/* Estilos propios de la app de Romano Maderera.
   La marca (colores, tipografías, escala, grilla) viene de tokens.css / base.css
   / grid.css — NO redefinir esos valores acá. Este archivo es solo layout de la
   app (shell, nav, tarjetas, tablas, kanban, calendario, formularios, login).

   Tema: claro es el default en :root; oscuro sobreescribe superficies/texto
   bajo html[data-theme="dark"]. Mismo patrón que dashboard_cheques_romano.html. */

:root {
  --fondo: #f1f2f3;
  --panel: #ffffff;
  --panel-fuerte: #e4e7e8;
  --linea: #dadde0;
  --linea-fuerte: #c3c7ca;
  --texto: #0f1113;
  --texto-tenue: #6b7178;
  --verde-texto: var(--sestanto-green);
  --rojo-texto: var(--sestanto-red);
  --ambar-texto: var(--sestanto-amber-dark);
  --calle: 4mm;
}
html[data-theme="dark"] {
  --fondo: #12181c;
  --panel: #171e23;
  --panel-fuerte: #1d262c;
  --linea: rgba(255, 255, 255, 0.12);
  --linea-fuerte: rgba(255, 255, 255, 0.22);
  --texto: #f2f2f2;
  --texto-tenue: #9aa0a6;
  --verde-texto: var(--sestanto-green-light);
  --rojo-texto: var(--sestanto-red-light);
  --ambar-texto: var(--sestanto-amber);
}

/* El multiselect del brand kit fija sus tokens en dark; acá los atamos a las
   superficies de la app para que respete claro/oscuro. */
:root {
  --msel-surface: var(--panel);
  --msel-border: var(--linea-fuerte);
  --msel-ink: var(--texto);
  --msel-gray: var(--texto-tenue);
  --msel-green: var(--sestanto-green);
  --msel-hover: rgba(127, 127, 127, 0.12);
}
/* Panel del multiselect: acciones arriba (Todos/Ninguno), opciones scrolleables
   en el medio, OK abajo. No se cierra al tildar. (El display lo controla
   .msel.open del brand kit; acá solo definimos la caja cuando está abierto.) */
.msel-panel {
  box-shadow: none;
  max-height: min(60vh, 360px);
  padding: 0;
  overflow: visible;
}
.msel.open .msel-panel { display: flex; flex-direction: column; }
.msel-opts { overflow-y: auto; }
.msel-actions { border-top: 0; padding: 6px 10px; }
.msel-actions-top { border-bottom: 1px solid var(--msel-border); }
.msel-actions-bottom { border-top: 1px solid var(--msel-border); justify-content: flex-end; }
.msel-ok { font-weight: 700 !important; padding: 2px 12px; }

* { box-sizing: border-box; }
*, img, svg, table, pre { max-width: 100%; }
html, body { height: 100%; }
/* base.css del brand kit fija html a blanco; lo atamos al fondo del tema para
   que no aparezca una franja blanca al hacer scroll o en páginas cortas. */
html { background: var(--fondo); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-body, "Noto Sans", sans-serif);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* La página nunca scrollea de lado: en mobile todo se ajusta al ancho de la
     pantalla; el scroll vertical es el único permitido. El contenido ancho
     (tablas) scrollea dentro de su propio recuadro. `clip` recorta sin crear
     un contenedor de scroll (no rompe el sticky del topbar). */
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--font-display, "Archivo Narrow", sans-serif); margin: 0; letter-spacing: 0.018em; }
:root { --h-cabecera: 78px; }  /* lo mide router.js en vivo */
:root { --h-calhead: 44px; }  /* barra sticky del calendario, la mide pedidos-calendario.js */
a { color: var(--verde-texto); }
[hidden] { display: none !important; }

/* ---------- Shell ---------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
/* topbar + nav: contenedor fijo, no se pierde el contexto al hacer scroll */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar {
  background: var(--panel-fuerte);
  border-bottom: 1px solid var(--linea);
}
.topbar-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.marca { display: flex; align-items: center; gap: 8px; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
.marca .isotipo { width: 42px; height: 14px; display: block; }
.marca .wordmark { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.05em; }
.marca .cliente { font-size: 11px; color: var(--texto-tenue); border-left: 1px solid var(--linea-fuerte); padding-left: 8px; }
.topbar-sp { flex: 1; }
.topbar button.icono,
.topbar .user-chip {
  background: none;
  border: 1px solid transparent;
  color: var(--texto-tenue);
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--radius-input);
}
.topbar button.icono:hover { color: var(--texto); border-color: var(--linea-fuerte); }
.user-chip { display: flex; align-items: center; gap: 6px; }

/* Nav de módulos / vistas — dos niveles (módulo / vistas del módulo) */
.nav {
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;   /* solo la barra scrollea de lado si no entra, no la página */
}
.nav-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  gap: 2px;
}
.nav a {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--texto-tenue);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--texto); }
.nav a.activo { color: var(--texto); border-bottom-color: var(--verde-texto); font-weight: 600; }

/* Fila 1: módulos */
.nav-prim a {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Fila 2: vistas del módulo activo — más chica y con fondo tenue */
.nav-sec {
  background: var(--panel-fuerte);
  border-bottom-color: var(--linea);
}
.nav-sec a { padding: 7px 12px; font-size: 11.5px; }
.nav-sec a.activo { border-bottom-color: var(--verde-texto); }

/* Menú principal en la fila del topbar (escritorio) con submenú por hover */
.nav-principal { display: flex; align-items: stretch; gap: 2px; margin-left: 12px; }
.nav-item { position: relative; display: flex; }
.nav-principal a {
  padding: 8px 12px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-principal a:hover { color: var(--texto); }
.nav-principal a.activo { color: var(--texto); border-bottom-color: var(--verde-texto); font-weight: 600; }
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  flex-direction: column;
  background: var(--panel-fuerte);
  border: 1px solid var(--linea-fuerte);
  z-index: 50;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu { display: flex; }
.submenu a { text-transform: none; letter-spacing: 0; font-size: 12px; border-bottom: 0; padding: 9px 14px; }
.submenu a:hover { background: var(--panel); }
.submenu a.activo { color: var(--verde-texto); }
/* En escritorio las vistas del módulo van en el submenú: la 2ª fila sobra */
@media (min-width: 641px) { .nav-sec:not(.nav-sub) { display: none; } }
@media (max-width: 640px) {
  .nav-principal {
    order: 3; flex: 1 1 100%; margin-left: 0; overflow-x: auto;
  }
  .nav-item .submenu { display: none !important; }
}

main.contenido {
  flex: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px;
}

/* Banner de conexión / errores */
.banner {
  padding: 8px 12px;
  font-size: 12px;
  border: 1px solid var(--linea-fuerte);
  margin-bottom: 12px;
  background: var(--panel);
}
.banner.error { border-color: var(--rojo-texto); color: var(--rojo-texto); }
.banner.ok { border-color: var(--verde-texto); color: var(--verde-texto); }

/* ---------- Controles base ---------- */
input, select, textarea, button {
  font-family: inherit;
  font-size: 12px;
  color: var(--texto);
}
input[type="text"], input[type="search"], input[type="date"], input[type="number"],
input[type="password"], select, textarea {
  background: var(--fondo);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radius-input);
  padding: 6px 8px;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: #0f1417;
}
label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--texto-tenue); }
label.campo > span { text-transform: uppercase; letter-spacing: 0.04em; font-size: 9.5px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-fuerte);
  border: 1px solid var(--linea-fuerte);
  color: var(--texto);
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--radius-input);
}
.btn:hover { border-color: var(--texto-tenue); }
.btn.primario { background: var(--sestanto-green); border-color: var(--sestanto-green); color: #fff; }
.btn.primario:hover { background: #185a32; }
.btn.tenue { background: none; color: var(--texto-tenue); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* ---------- Módulos / tarjetas ---------- */
.modulo { background: var(--panel); border: 1px solid var(--linea); padding: 12px 14px; margin-bottom: var(--space-16, 16px); }
.modulo > h2 { font-size: 14px; margin-bottom: 4px; }
.modulo > .desc { font-size: 11px; color: var(--texto-tenue); margin-bottom: 10px; }

.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros .btn-reset { align-self: flex-end; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-bottom: 16px; }
.kpi { background: var(--panel); padding: 10px 12px; }
/* Tarjeta de excepción: acento rojo a la izquierda, se dibuja siempre (no
   depende del contraste de fondo, a diferencia del borde general de .modulo). */
.kpi.alerta { box-shadow: inset 3px 0 0 var(--rojo-texto); }
.kpi-click { cursor: pointer; }
.kpi-click:hover { background: var(--panel-fuerte); }
.kpi .label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); }
.kpi .val { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-top: 2px; }
.kpi .val.alerta { color: var(--rojo-texto); }
.kpi .sub { font-size: 9.5px; color: var(--texto-tenue); margin-top: 1px; }
/* Debajo del importe: variación (▲/▼) — el color dice si el cambio es bueno o
   malo para el negocio, no si subió o bajó. */
.kpi .delta { font-size: 10px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .delta.malo { color: var(--rojo-texto); }
.kpi .delta.bueno { color: var(--verde-texto); }
@media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Tablas ---------- */
/* La tabla se ajusta al ancho disponible; el texto de las celdas envuelve.
   Sin scroll lateral. El encabezado queda fijo debajo de la cabecera. */
.tabla-scroll { border: 1px solid var(--linea); }
table.datos { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; }
table.datos thead th {
  position: sticky; top: var(--h-cabecera);
  z-index: 5;
  background: var(--panel-fuerte);
  text-align: left; font-weight: 600; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--texto-tenue); padding: 6px 8px; cursor: pointer;
}
table.datos tbody td { padding: 6px 8px; border-top: 1px solid var(--linea); overflow-wrap: anywhere; }
table.datos tbody tr:hover { background: var(--panel-fuerte); }
table.datos tbody tr.venc td { background: rgba(200, 30, 44, 0.13); }
table.datos tbody tr.prox td { background: rgba(210, 150, 30, 0.15); }
table.datos td.num, table.datos th.num { text-align: right; }
table.datos tfoot td { padding: 7px 8px; border-top: 1px solid var(--linea-fuerte); font-weight: 600; }
.fila-accion { cursor: pointer; }

.badge { display: inline-block; font-size: 9px; padding: 1px 6px; border: 1px solid currentColor; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; }
.badge.verde { color: var(--verde-texto); }
.badge.ambar { color: var(--ambar-texto); }
.badge.rojo { color: var(--rojo-texto); }
.badge.gris { color: var(--texto-tenue); }

.chip-saldo { color: var(--ambar-texto); font-weight: 600; }
.vencido { color: var(--rojo-texto); font-weight: 600; }

/* ---------- Gráfico de barras CSS (sin dependencias) ----------
   Fondo limpio: sin números sobre las barras. Los datos salen al pasar el
   cursor (.chart-tip). Sin scroll interno: las barras se reparten el ancho.
   Cada barra filtra el tablero al tocarla (Ctrl = varias). */
/* Sin eje visible, sin grilla de fondo: el dibujo flota directo sobre el
   fondo del módulo, nada lo enmarca (ni siquiera una línea de base). */
.barras { display: flex; align-items: flex-end; gap: 4px; height: 132px; position: relative; padding-top: 18px; }
.barra-col { display: flex; flex-direction: column-reverse; align-items: center; flex: 1 1 0; min-width: 0; height: 100%; position: relative; cursor: pointer; }
.barra-col:hover .barra-seg { filter: brightness(1.18); }
.barras.filtrando .barra-col:not(.sel) { opacity: 0.3; }
.barra-col.sel::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; border-top: 3px solid var(--verde-texto); }
/* Categorías en escala de grises: mismo gris de marca (--sestanto-gray) que va
   aclarándose, nunca negro/navy. El color queda para resaltar (la barra
   seleccionada lleva el verde arriba, el resto se atenúa). Una costura del
   color del panel separa los tramos para que se sigan leyendo como objetos
   distintos aun cuando dos grises vecinos se parezcan. */
:root {
  --cat-1: var(--sestanto-gray);
  --cat-2: color-mix(in srgb, var(--sestanto-gray) 74%, white);
  --cat-3: color-mix(in srgb, var(--sestanto-gray) 54%, white);
  --cat-4: color-mix(in srgb, var(--sestanto-gray) 38%, white);
  --cat-5: var(--sestanto-amber); /* Alejandro: único tono con color, para que se distinga del resto */
}
.barra-seg { width: 100%; min-height: 1px; border-top: 1px solid var(--panel); }
.barra-seg.EMITIDO_MACRO { background: var(--cat-1); }
.barra-seg.EMITIDO_ICBC { background: var(--cat-2); }
.barra-seg.VALENTINO { background: var(--cat-3); }
.barra-seg.PROYECTADO { background: var(--cat-4); }
.barra-seg.ALEJANDRO { background: var(--cat-5); }
/* Lo que está en curso (mes actual / tramo de hoy a 7 días) es el único resalte
   fijo de los gráficos: las mismas 5 categorías pero en verde de marca. */
:root {
  --cat-g1: var(--chart-1);
  --cat-g2: color-mix(in srgb, var(--chart-1) 74%, white);
  --cat-g3: color-mix(in srgb, var(--chart-1) 54%, white);
  --cat-g4: color-mix(in srgb, var(--chart-1) 38%, white);
  --cat-g5: var(--sestanto-amber); /* Alejandro, igual que fuera del período en curso */
}
.barra-col.actual .barra-seg.EMITIDO_MACRO { background: var(--cat-g1); }
.barra-col.actual .barra-seg.EMITIDO_ICBC { background: var(--cat-g2); }
.barra-col.actual .barra-seg.VALENTINO { background: var(--cat-g3); }
.barra-col.actual .barra-seg.PROYECTADO { background: var(--cat-g4); }
.barra-col.actual .barra-seg.ALEJANDRO { background: var(--cat-g5); }
.barra-col.actual .barra-lbl { color: var(--verde-texto); font-weight: 700; }
.leyenda-actual i { background: var(--chart-1); }
.barra-tot { position: absolute; left: -4px; right: -4px; margin-bottom: 2px; text-align: center; font-size: 9px; font-weight: 700; color: var(--texto); white-space: nowrap; pointer-events: none; }
.barra-lbl { position: absolute; top: calc(100% + 4px); left: 0; right: 0; font-size: 8px; color: var(--texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.barra-lbl-sub { display: block; font-size: 7px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-linea { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ambar-texto); pointer-events: none; }
.ref-linea span { position: absolute; right: 0; top: -12px; font-size: 8px; color: var(--ambar-texto); background: var(--panel); padding: 0 3px; }
.chart-sub { font-size: 11px; color: var(--texto-tenue); margin-bottom: 16px; display: flex; align-items: baseline; flex-wrap: wrap; }
.chart-body { min-width: 0; }
.leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: 9px; color: var(--texto-tenue); margin: 32px 0 4px; }
.leyenda span { display: flex; align-items: center; gap: 4px; }
.leyenda i { width: 8px; height: 8px; display: inline-block; }

/* Tooltip de los gráficos (se muestra al pasar el cursor por una barra) */
.chart-tip {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--panel-fuerte); border: 1px solid var(--linea-fuerte);
  padding: 6px 8px; font-size: 11px; max-width: 230px; line-height: 1.5;
}
.chart-tip .ttl { font-weight: 700; }
.chart-tip .tot { color: var(--texto-tenue); margin-bottom: 2px; }
.chart-tip .ln { display: flex; align-items: center; gap: 5px; }
.chart-tip .ln i { width: 8px; height: 8px; display: inline-block; flex: 0 0 8px; }
.chart-tip .ln b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }

/* ---------- Kanban ---------- */
/* Sin scroll lateral: las columnas se reparten el ancho y bajan de fila cuando
   no entran (flex-wrap). */
.kanban { display: flex; flex-wrap: wrap; gap: var(--calle); align-items: flex-start; }
.kanban-col { flex: 1 1 185px; min-width: 0; max-width: 100%; background: var(--panel); border: 1px solid var(--linea); }
.kanban-col > h3 {
  position: sticky;
  top: var(--h-cabecera);
  z-index: 4;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 8px 10px; border-bottom: 1px solid var(--linea);
  display: flex; justify-content: space-between; color: var(--texto-tenue);
  background: var(--panel-fuerte);
}
.kanban-col .lista { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kanban-col.drop { outline: 2px solid var(--verde-texto); outline-offset: -2px; }
.tarjeta { background: var(--panel-fuerte); border: 1px solid var(--linea); padding: 8px 9px; cursor: grab; }
.tarjeta:active { cursor: grabbing; }
/* Estado de la entrega: toda la tarjeta se tiñe. Fondo translúcido => sirve en
   claro y oscuro. */
.tarjeta.venc { border-color: var(--rojo-texto); background: rgba(200, 30, 44, 0.16); }
.tarjeta.prox { border-color: var(--ambar-texto); background: rgba(210, 150, 30, 0.18); }
.tarjeta.con-alerta { border-color: var(--ambar-texto); }
.tarjeta .cli { font-weight: 600; font-size: 12px; }
.tarjeta .meta { font-size: 10px; color: var(--texto-tenue); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.tarjeta .imp { font-variant-numeric: tabular-nums; }
.tarjeta .alertas { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px; }
.alerta-chip {
  font-size: 9px;
  padding: 1px 5px;
  border: 1px solid var(--ambar-texto);
  color: var(--ambar-texto);
  background: rgba(210, 150, 30, 0.14);
  white-space: nowrap;
}
.alerta-nota { flex-basis: 100%; font-size: 10px; color: var(--texto-tenue); font-style: italic; margin-top: 1px; }

.kanban-col.col-historial { flex: 1 1 200px; background: var(--panel-fuerte); }
.kanban-col.col-historial .lista { max-height: 70vh; overflow-y: auto; }

/* ---------- Historial de producción (línea de tiempo) ---------- */
.hist-div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
}
.hist-div::after { content: ''; flex: 1; height: 1px; background: var(--linea-fuerte); }
.hist-div:first-child { margin-top: 0; }
.hist-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--linea);
}
.hist-hora { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--texto-tenue); flex: 0 0 auto; }
.hist-ico { flex: 0 0 auto; color: var(--verde-texto); }

/* ---------- Fletes (lista + mapa) ---------- */
.fletes-split {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--calle);
  align-items: start;
}
.fletes-lista {
  background: var(--panel);
  border: 1px solid var(--linea);
  min-width: 0;
}
.flete-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}
.flete-item:hover { background: var(--panel-fuerte); }
.flete-item.sel { background: var(--panel-fuerte); box-shadow: inset 3px 0 0 var(--verde-texto); }
.fletes-mapa,
.mapa {
  position: sticky;
  top: calc(var(--h-cabecera) + 8px);
  height: calc(100vh - var(--h-cabecera) - 24px);
  min-height: 320px;
  border: 1px solid var(--linea);
  background: var(--panel-fuerte);
}
.mapa .leaflet-container { height: 100%; width: 100%; background: var(--panel-fuerte); }
/* Leaflet: controles legibles en oscuro */
.leaflet-bar a, .leaflet-control-attribution { color: #222 !important; }

@media (max-width: 820px) {
  .fletes-split { grid-template-columns: 1fr; }
  .fletes-lista { order: 2; }
  .fletes-mapa, .mapa { position: static; height: 46vh; order: 1; }
}

/* ---------- Calendario ---------- */
.cal-head {
  position: sticky;
  top: var(--h-cabecera);
  z-index: 6;
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 8px 0; margin-bottom: 4px;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}
.cal-vistas { display: flex; gap: 4px; }
.cal-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.cal-dow {
  position: sticky;
  top: calc(var(--h-cabecera) + var(--h-calhead));
  z-index: 5;
  background: var(--panel-fuerte); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-tenue); padding: 4px 6px; text-align: center;
}
.cal-cel { background: var(--panel); min-height: 78px; padding: 4px 5px; font-size: 10px; cursor: pointer; overflow: hidden; min-width: 0; }
.cal-cel:hover { background: var(--panel-fuerte); }
.cal-cel.fuera { opacity: 0.4; }
.cal-cel.hoy { outline: 2px solid var(--verde-texto); outline-offset: -2px; }
.cal-cel .dnum { color: var(--texto-tenue); }
.cal-cel .ev { display: block; margin-top: 2px; padding: 1px 3px; background: var(--panel-fuerte); border-left: 2px solid var(--verde-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cel .ev.venc { border-left-color: var(--rojo-texto); color: var(--rojo-texto); background: rgba(200, 30, 44, 0.14); }
.cal-cel .ev.prox { border-left-color: var(--ambar-texto); color: var(--ambar-texto); background: rgba(210, 150, 30, 0.16); }
.cal-cel .ev.entregado { border-left-color: var(--texto-tenue); color: var(--texto-tenue); }

/* Vista SEMANA: 7 columnas con tarjetas completas */
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.cal-sem-col { background: var(--panel); display: flex; flex-direction: column; min-width: 0; }
.cal-sem-col.hoy { outline: 2px solid var(--verde-texto); outline-offset: -2px; }
.cal-sem-col > h3 {
  position: sticky;
  top: calc(var(--h-cabecera) + var(--h-calhead));
  z-index: 4;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-tenue);
  padding: 6px 8px; border-bottom: 1px solid var(--linea);
  display: flex; justify-content: space-between; background: var(--panel-fuerte);
}
.cal-sem-col.vacia > h3 { border-bottom: 0; opacity: 0.75; }
.cal-sem-col.vacia > h3 span:last-child { text-transform: none; letter-spacing: 0; }
.cal-sem-lista { padding: 6px; display: flex; flex-direction: column; gap: 6px; }

/* Vista DÍA: lista de tarjetas completas */
.cal-dia-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--calle); }

/* Tarjeta de pedido completa (semana / día) */
.pcard { background: var(--panel-fuerte); border: 1px solid var(--linea); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.pcard .meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 10px; color: var(--texto-tenue); align-items: baseline; }

/* --- Mobile: semana pasa a agenda vertical --- */
@media (max-width: 720px) {
  .cal-semana { display: flex; flex-direction: column; grid-template-columns: none; }
  .cal-sem-col { border-bottom: 1px solid var(--linea); }
  .cal-sem-lista { max-height: none; }
  .cal-dia-lista { grid-template-columns: 1fr; }
  .cal-cel { min-height: 54px; font-size: 9px; }
  .cal-head h2 { min-width: 0 !important; flex: 1; font-size: 15px; }
  .cal-nav { margin-left: 0; width: 100%; }
  .cal-vistas { width: 100%; }
  .cal-vistas .btn { flex: 1; }
}

/* ---------- Bloque de alerta con texto (§2.8) ----------
   Banda con borde izquierdo de 3px del color de severidad + texto. Para un
   mensaje puntual ("40 cheques sin anotar"), no para el estado de una fila
   (eso son los badges de tabla). Máximo una crítica por pantalla. */
.alerta-bloque { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; background: var(--panel-fuerte); border-left: 3px solid var(--texto-tenue); font-size: 12px; margin-bottom: 14px; }
.alerta-bloque .ico { font-weight: 700; flex: 0 0 auto; color: var(--texto-tenue); }
.alerta-bloque b { font-weight: 600; }
.alerta-bloque.ok { border-left-color: var(--verde-texto); }
.alerta-bloque.ok .ico { color: var(--verde-texto); }
.alerta-bloque.atencion { border-left-color: var(--ambar-texto); }
.alerta-bloque.atencion .ico { color: var(--ambar-texto); }
.alerta-bloque.critica { border-left-color: var(--rojo-texto); }
.alerta-bloque.critica .ico { color: var(--rojo-texto); }

/* ---------- Historial de cambios (auditoría por módulo) ----------
   Mismas clases que el historial de producción de Pedidos (línea de tiempo:
   divisor de fecha + item con hora, ícono y detalle) para no duplicar look. */
.hist-detalle { font-size: 11px; }
.hist-detalle .rec { color: var(--texto-tenue); }
.hist-detalle .clave { font-weight: 600; }

/* ---------- Chequeras: detalle de cheques usados (fila expandida) ---------- */
.chequera-detalle-wrap { padding: 4px 0 8px; }
.chequera-resumen { font-size: 11px; color: var(--texto-tenue); padding: 4px 6px 8px; }
.chequera-detalle-wrap table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.chequera-detalle-wrap th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-tenue); padding: 3px 6px; }
.chequera-detalle-wrap td { padding: 3px 6px; border-top: 1px solid var(--linea); }
.chequera-detalle-wrap td.num, .chequera-detalle-wrap th.num { text-align: right; }
.chequera-fila-chip { background: none; border: 0; color: var(--verde-texto); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* ---------- Rechazados: barra simple (una sola serie, gris + acento en el
   valor más alto — no es el orden fijo de categoría, es un solo metric) ---- */
.barra-seg.simple { background: var(--chart-4); }
.barra-col.destacado .barra-seg.simple { background: var(--chart-1); }

/* ---------- Cheques ---------- */
/* Los dos gráficos del tablero siempre al 50/50 y lado a lado hasta el
   breakpoint mobile (el sistema apila recién a 1080; acá no queremos eso). */
@media (min-width: 641px) {
  .z-row.cheques-graf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-row.cheques-graf > .modulo { grid-column: auto !important; }
}
table.datos td.col-fuerte { font-weight: 600; }
table.datos tr.fila-venc td { background: rgba(200, 30, 44, 0.10); }

/* Total del período en el calendario (debajo de la barra sticky) */
.cal-tot {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 6px 2px 10px; font-size: 12px; color: var(--texto-tenue);
}
.cal-tot b { font-family: var(--font-display); font-size: 17px; color: var(--texto); }
.cal-tot .tenue { font-size: 10px; }

/* Carga masiva: marcas de fila */
.carga-filas tr.fila-warn td { background: rgba(210, 150, 30, 0.12); }
.carga-filas tr.fila-err td { background: rgba(200, 30, 44, 0.12); }
.carga-filas td.celda-warn { color: var(--rojo-texto); font-weight: 600; }

/* Carga masiva: la tabla es el CSV tal cual -> scrollea DENTRO del recuadro
   (la página nunca scrollea de lado). */
.carga-scroll { border: 1px solid var(--linea); overflow-x: auto; max-width: 100%; }
.carga-filas { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.carga-filas th, .carga-filas td { border: 1px solid var(--linea); padding: 4px 6px; text-align: left; }
.carga-filas thead th {
  background: var(--panel-fuerte); font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
}
.carga-filas input, .carga-filas select { width: 100%; border: 0; background: transparent; color: var(--texto); font: inherit; padding: 2px; }
.carga-filas input:focus, .carga-filas select:focus { outline: 1px solid var(--verde-texto); }
.carga-filas td.cel-idx { text-align: right; color: var(--texto-tenue); }
.carga-filas th:nth-child(11), .carga-filas th:nth-child(12), .carga-filas th:nth-child(13),
.carga-filas th:nth-child(14), .carga-filas th:nth-child(15), .carga-filas th:nth-child(16),
.carga-filas td.cel-ref { background: var(--panel-fuerte); color: var(--linea-fuerte); min-width: 44px; }
.carga-total { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin: 10px 0; font-size: 12px; }
.carga-total b { font-family: var(--font-display); font-size: 16px; }
pre.csv-preview { background: var(--panel-fuerte); border: 1px solid var(--linea); padding: 10px; overflow-x: auto; font-size: 11px; line-height: 1.5; white-space: pre; }

/* ---------- Formularios / modal ---------- */
dialog.modal { border: 1px solid var(--linea-fuerte); background: var(--panel); color: var(--texto); padding: 0; max-width: 520px; width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: hidden; }
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.modal header { padding: 12px 14px; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; }
dialog.modal header h2 { font-size: 14px; }
dialog.modal form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
dialog.modal > div { overflow-y: auto; min-height: 0; }   /* cuerpo de los modales sin form (historial, alertas) */
dialog.modal .cuerpo { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow-y: auto; min-height: 0; }
dialog.modal .cuerpo .ancho { grid-column: 1 / -1; }
dialog.modal footer { padding: 12px 14px; border-top: 1px solid var(--linea); display: flex; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.form-error { color: var(--rojo-texto); font-size: 11px; padding: 0 14px 10px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { background: var(--panel); border: 1px solid var(--linea); padding: 24px; width: 100%; max-width: 340px; }
.login-card .isotipo { width: 54px; height: 18px; display: block; margin-bottom: 14px; }
.login-card h1 { font-size: 17px; margin-bottom: 2px; }
.login-card p.sub { font-size: 11px; color: var(--texto-tenue); margin-bottom: 18px; }
.login-card label.campo { margin-bottom: 12px; }
.login-card .btn { width: 100%; justify-content: center; }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#toast .t { background: var(--texto); color: var(--fondo); font-size: 12px; padding: 7px 14px; max-width: 90vw; }
#toast .t.err { background: var(--rojo-texto); color: #fff; }

/* ---------- Home ---------- */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--calle); }
.home-card { background: var(--panel); border: 1px solid var(--linea); padding: 16px; text-decoration: none; color: inherit; display: block; }
.home-card:hover { border-color: var(--texto-tenue); }
.home-card h3 { font-size: 15px; margin-bottom: 4px; }
.home-card p { font-size: 11px; color: var(--texto-tenue); }

.vacio { text-align: center; color: var(--texto-tenue); font-size: 12px; padding: 40px 12px; }

/* ============================================================
   MOBILE — todo se ajusta al ancho de la pantalla. Sin scroll
   horizontal de página; solo scroll vertical. El contenido ancho
   (tablas) scrollea dentro de su propio recuadro.
   ============================================================ */
@media (max-width: 640px) {
  main.contenido { padding: 12px; }
  h1 { font-size: 19px; }

  /* Topbar: sin desbordes; el nombre de usuario se oculta */
  .topbar-inner { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .marca .cliente { display: none; }
  .topbar .user-chip { display: none; }

  /* Nav de módulos: scrollea horizontal SOLO la barra, sin empujar la página */
  .nav { max-width: 100vw; }
  .nav-inner { padding: 0 12px; }

  dialog.modal .cuerpo { grid-template-columns: 1fr; }

  /* Filtros: cada control a ancho completo, uno abajo del otro */
  .modulo.filtros { flex-direction: column; align-items: stretch; }
  .modulo.filtros > label.campo,
  .modulo.filtros > .btn,
  .modulo.filtros > button { width: 100%; }
  /* ...salvo los checkbox, que quedan compactos y alineados a la izquierda */
  .modulo.filtros > label.campo.chk { width: auto; align-self: flex-start; }
  .modulo.filtros > label.campo.chk > span { text-align: left; }
  .msel, .msel-btn { width: 100%; min-width: 0; }
  .msel-panel { min-width: 0; width: 100%; left: 0; right: 0; }
  input[type="text"], input[type="search"], input[type="date"],
  input[type="number"], input[type="password"], select, textarea { width: 100%; }

  /* KPIs: 1 columna */
  .kpis { grid-template-columns: 1fr; }

  /* Grilla de gráficos del tablero de cheques: apilada */
  .z-row { grid-template-columns: 1fr; column-gap: 0; }
  .z-row > .modulo { grid-column: 1 / -1 !important; }

  /* Kanban (principal y producción): columnas apiladas, ancho completo */
  .kanban { flex-direction: column; overflow-x: visible; gap: 10px; }
  .kanban-col { flex: 1 1 auto; width: 100%; }
  .kanban-col .lista { max-height: none; }
  .kanban-col.col-historial { flex: 1 1 auto; width: 100%; }
  .kanban-col.col-historial .lista { max-height: 50vh; }

  /* Tablas -> tarjetas apiladas (una fila = una tarjeta con etiqueta: valor).
     Así no hay scroll horizontal ni siquiera dentro del recuadro. */
  .tabla-scroll { overflow-x: visible; border: 0; }
  table.datos.responsiva { font-size: 12px; }
  table.datos.responsiva thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.datos.responsiva tbody tr {
    display: block;
    border: 1px solid var(--linea);
    margin-bottom: 6px;
    background: var(--panel);
  }
  table.datos.responsiva tbody tr.venc { border-color: var(--rojo-texto); }
  table.datos.responsiva tbody tr.prox { border-color: var(--ambar-texto); }
  table.datos.responsiva tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 10px;
    border: 0;
    border-top: 1px solid var(--linea);
    text-align: right;
  }
  table.datos.responsiva tbody td:first-child { border-top: 0; }
  table.datos.responsiva tbody td::before {
    content: attr(data-label);
    color: var(--texto-tenue);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    flex: 0 0 auto;
  }
  table.datos.responsiva tbody td:empty { display: none; }
  table.datos.responsiva tfoot tr { display: block; padding: 6px 10px; border-top: 2px solid var(--linea-fuerte); }
  table.datos.responsiva tfoot td { display: inline; padding: 0 6px 0 0; }

  /* Cabeceras de vista con botones: que envuelvan bien */
  main.contenido > div:first-child { flex-wrap: wrap; }

  /* Home: 1 columna */
  .home-grid { grid-template-columns: 1fr; }

  /* Calendario mes: celdas más chicas pero siempre 7 en el ancho */
  .cal-cel { min-height: 52px; font-size: 8.5px; padding: 3px 4px; }
  .cal-dow { font-size: 8px; padding: 3px 2px; }
}

/* ---------- Carga masiva: semanas libres contra el tope ----------
   Gris = ya comprometido, verde = lo que suma el lote (el resalte), rojo sólo
   cuando se excede el tope. */
.sem-lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.sem-fila { display: grid; grid-template-columns: 110px minmax(0, 1fr) 190px; gap: 10px; align-items: center; font-size: 11px; }
.sem-lbl { display: flex; flex-direction: column; line-height: 1.25; }
.sem-lbl span { font-size: 9px; color: var(--texto-tenue); }
.sem-barra { position: relative; height: 12px; display: flex; overflow: visible; }
.sem-barra i { display: block; height: 100%; }
.sem-comp { background: var(--cat-2); }
.sem-lote { background: var(--chart-1); }
.sem-barra .sem-tope { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--ambar-texto); }
.sem-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sem-num small { display: block; font-weight: 400; font-size: 9px; color: var(--texto-tenue); }
.sem-num.exc { color: var(--rojo-texto); }
@media (max-width: 640px) {
  .sem-fila { grid-template-columns: 84px minmax(0, 1fr); }
  .sem-num { grid-column: 1 / -1; text-align: left; }
}