:root {
  /* Paleta cálida/gourmet: crema, terracota y salvia — hace juego con un
     negocio de cajas de regalo, panes dulces, turrones y vinos, sin resultar
     recargada para el uso diario. */
  --bg: #ede0c9;
  --card: #fffaf0;
  --border: #cbaf83;
  --text: #2b2015;
  --muted: #6b5a44;
  --accent: #b8452a;
  --accent-dark: #8f3620;
  --accent-bg: #f0c7b0;
  --danger: #a3311c;
  --danger-bg: #f2d2c4;
  --success: #3f6b34;
  --success-bg: #d9ead0;
  --warn: #8f6210;
  --warn-bg: #f2e0ac;
  --info: #2c5561;
  --info-bg: #cfe2e7;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); }
input, select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
button {
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 6px 11px;
}
button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
button.primary:hover { background: var(--accent-dark); }
button.danger { color: var(--danger); border-color: #eabfae; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Botón chico, solo ícono (ej: "Movimiento"/"Editar" en filas de una tabla
   densa) - para que no se coma tanto ancho cuando hay muchas filas. */
button.icon-btn {
  padding: 3px 7px;
  font-size: 13px;
  line-height: 1.4;
}
button.icon-btn.danger { color: var(--danger); border-color: #eabfae; }

/* Menú "⋮" compacto por fila (ej: tabla de Stock) - un solo botón de
   opciones en vez de varios iconos sueltos, para que la fila quede angosta
   aun con varias acciones posibles. Un solo listener global (ver app.js)
   cierra cualquier menú abierto al clickear en cualquier otro lado. */
.row-menu { position: relative; display: inline-block; }
.row-menu-list {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 190px;
  z-index: 30;
  padding: 4px;
}
.row-menu-list.open { display: block; }
.row-menu-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.row-menu-list button:hover { background: var(--bg); }
.row-menu-list button.danger { color: var(--danger); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card h2, .card h3 { margin-top: 0; }

/* Tablas densas: mucho texto en poco espacio (listas de productos/variantes
   largas), así que priorizan filas finitas por sobre "aire" entre filas. */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg); }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.pill.neg { background: var(--danger-bg); color: var(--danger); }
.pill.low { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--success-bg); color: var(--success); }
.pill.info { background: var(--info-bg); color: var(--info); }

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  display: none;
  max-width: 360px;
  z-index: 50;
}
.toast.show { display: block; }
.toast.ok { background: var(--success-bg); color: var(--success); border: 1px solid #c9dcbb; }
.toast.err { background: var(--danger-bg); color: var(--danger); border: 1px solid #eabfae; }

/* --- Login --- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 340px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card .subtitle { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.login-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}
.login-error.show { display: block; }

/* --- App shell --- */
.topbar {
  background: var(--card);
  border-bottom: 2px solid var(--accent);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .brand { font-weight: 700; font-size: 16px; color: var(--accent-dark); }
.topbar .user-info { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.role-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-bg);
  color: var(--accent-dark);
  text-transform: uppercase;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 10px 24px 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  border: none;
  background: none;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.tab-btn.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }

/* Segunda fila de navegación (las secciones dentro de un módulo, ej. Stock/
   Combos/Movimientos dentro de "Depósito") - más chica y con fondo propio
   para que se lea como un nivel subordinado a la fila de módulos de arriba. */
.tabs.sub-tabs {
  padding: 6px 24px;
  background: var(--bg);
  gap: 2px;
}
.tabs.sub-tabs .tab-btn {
  padding: 6px 12px;
  font-size: 13px;
}

.content { max-width: 1000px; margin: 0 auto; padding: 24px; }
/* El calendario de Entregas necesita más ancho que el resto de las pantallas
   para que las celdas de cada día se vean cómodas - se ensancha el
   contenedor solo cuando el calendario está montado adentro. */
.content:has(#calendarGrid) { max-width: 1320px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > .field { flex: 1 1 160px; }

.muted { color: var(--muted); font-size: 13px; }
.right { text-align: right; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

.banner {
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 47, 38, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-box {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box h3 { margin-top: 0; }
/* Modales con listas de componentes (Armar caja a medida, combos de
   catálogo) necesitan más ancho que un formulario simple: con el máximo
   angosto de 420px, el selector de "Componente" quedaba comprimido a una
   fracción mínima de la ventana ("ventanita mini"). */
.modal-box.wide { max-width: 760px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.close-x { float: right; background: none; border: none; font-size: 18px; color: var(--muted); padding: 0 4px; }

/* Combos/Cajas: las tarjetas de "Cajas Personalizadas" y las del "Catálogo
   de cajas" usan el mismo estilo de .card, lo que las hacía difíciles de
   diferenciar a simple vista al bajar por la lista. Un borde de color +
   un tinte de fondo bien sutil alcanza para distinguirlas sin recargar. */
.card-personalizada { border-left: 4px solid var(--accent); background: linear-gradient(to right, var(--accent-bg) 0%, var(--card) 18px); }
.card-catalogo { border-left: 4px solid var(--success); background: linear-gradient(to right, var(--success-bg) 0%, var(--card) 18px); }

.empty-state { color: var(--muted); font-size: 14px; padding: 20px 0; text-align: center; }
.product-card { margin-bottom: 8px; }
.product-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.product-card-header h3 { margin: 0; font-size: 14.5px; }
.product-card-header .muted { font-size: 12px; }

/* --- CRM / Clientes --- */
.crm-layout { display: flex; gap: 16px; align-items: flex-start; }
.crm-list-col { flex: 0 0 320px; }
.crm-detail-col { flex: 1 1 auto; min-width: 0; }
.crm-list { padding: 0; max-height: 70vh; overflow-y: auto; }
.crm-list-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.crm-list-item:last-child { border-bottom: none; }
.crm-list-item:hover { background: var(--bg); }
.crm-list-item.active { background: var(--accent-bg); border-left: 3px solid var(--accent); padding-left: 9px; }
.crm-list-item .nombre { font-weight: 600; font-size: 14px; }
.crm-list-item .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.etapa-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.etapa-Interesado { background: var(--warn-bg); color: var(--warn); }
.etapa-En-negociación { background: var(--info-bg); color: var(--info); }
.etapa-Cliente { background: var(--success-bg); color: var(--success); }
.etapa-Perdido { background: var(--danger-bg); color: var(--danger); }

/* Estado de campaña de preventa de la temporada actual (aparte de la etapa) */
.temporada-Sin-contactar { background: var(--border); color: var(--muted); }
.temporada-Contactado { background: var(--info-bg); color: var(--info); }
.temporada-Cotización-enviada { background: var(--warn-bg); color: var(--warn); }
.temporada-Confirmado { background: var(--success-bg); color: var(--success); }
.temporada-No-este-año { background: var(--danger-bg); color: var(--danger); }
.interaction-item { border-bottom: 1px solid var(--border); padding: 10px 0; }
.interaction-item:last-child { border-bottom: none; }
.interaction-item .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* --- Ventas (dashboard + barras simples, sin libreria de graficos) --- */
.kpi-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi-card { flex: 1 1 180px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.kpi-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--accent-dark); }

.panel-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; align-items: flex-start; }
.panel-grid > .card { flex: 1 1 300px; min-width: 260px; margin-bottom: 0; }

.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 13px; }
.bar-row .bar-label { flex: 0 0 42%; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1 1 auto; background: var(--bg); border-radius: 6px; height: 15px; overflow: hidden; }
.bar-fill { background: var(--accent); height: 100%; border-radius: 6px; }
.bar-row .bar-value { flex: 0 0 auto; text-align: right; font-weight: 600; white-space: nowrap; }

.sortable-th { cursor: pointer; user-select: none; }
.sortable-th:hover { color: var(--accent-dark); }
.sortable-th .sort-arrow { opacity: 0.5; margin-left: 2px; }
.sortable-th.sort-active .sort-arrow { opacity: 1; }

.filtro-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* --- Entregas (calendario mensual + lista del día) --- */
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendar-cell { min-height: 72px; border: 1px solid var(--border); border-radius: 7px; padding: 6px; cursor: pointer; background: var(--card); }
.calendar-cell:hover { border-color: var(--accent); }
.calendar-cell.empty { visibility: hidden; cursor: default; }
.calendar-cell.today { border-color: var(--accent-dark); border-width: 2px; }
.calendar-cell.selected { background: var(--accent-bg); border-color: var(--accent); }
.calendar-daynum { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.calendar-count { font-size: 10.5px; border-radius: 9px; padding: 1px 6px; display: inline-block; margin: 0 2px 2px 0; }
.calendar-count.pendientes { background: var(--warn-bg); color: var(--warn); }
.calendar-count.armadas { background: var(--info-bg); color: var(--info); }
.calendar-count.entregadas { background: var(--success-bg); color: var(--success); }

.entrega-item { border-bottom: 1px solid var(--border); padding: 10px 0; cursor: pointer; }
.entrega-item:last-child { border-bottom: none; }
.entrega-item:hover { color: var(--accent-dark); }
.entrega-nota-armado {
  margin-top: 4px;
  padding: 5px 8px;
  background: var(--warn-bg);
  color: #5c4108;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.35;
}
.filtro-presets button.active { background: var(--accent); color: #fff; border-color: var(--accent); }