/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES — el vocabulario visual del sistema, como clases CSS.

   En la app original estos estilos viven en línea, dentro de cada componente
   de React. Acá están extraídos uno por uno a clases, con las mismas medidas,
   para que se puedan usar en HTML plano, en React, en Vue o en lo que sea.

   Todo se apoya en las variables de `tema.css`: ningún color está escrito a
   mano. Cambiar el tema en el <html> repinta todo esto sin tocar una línea.

   Requiere: tema.css cargado ANTES que este archivo.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Superficies ─────────────────────────────────────────────────────────
   La tarjeta es la unidad básica de la interfaz: superficie, borde de un píxel
   y radio 14. Nada de sombra en reposo — la sombra aparece solo al levantarla
   con el mouse (.card-hover, ya definido en tema.css). Una pantalla llena de
   tarjetas con sombra permanente se ve sucia. */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

/* Panel: una tarjeta con cabecera. El ícono va apagado y chico (14px) porque
   acompaña al título, no compite con él. */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.panel-head svg { color: var(--textDim); }
.panel-title { font-size: 14px; font-weight: 600; }
.panel-action { margin-left: auto; background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 500; }
.panel-body { display: flex; flex-direction: column; }

/* Cabecera con degradado: el único bloque de color pleno de la pantalla, arriba
   del todo. El degradado va del color del botón principal al mismo color
   oscurecido, así que se adapta solo a cada tema. Los dos círculos translúcidos
   le dan profundidad sin dibujar nada reconocible. */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px 24px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--accentButton), color-mix(in srgb, var(--accentButton) 45%, black));
}
.hero::before,
.hero::after { content: ""; position: absolute; border-radius: 999px; }
.hero::before { top: -40px; right: -30px; width: 160px; height: 160px; background: rgba(255,255,255,0.08); }
.hero::after { bottom: -60px; right: 60px; width: 120px; height: 120px; background: rgba(255,255,255,0.06); }
.hero > * { position: relative; }
.hero h1 { font-family: 'Sora', 'Inter', sans-serif; font-weight: 700; font-size: 24px; margin: 0; }
.hero p { font-size: 13.5px; opacity: 0.9; margin: 4px 0 0; }


/* ── 2. Botones ─────────────────────────────────────────────────────────────
   Tres pesos y nada más: principal (sólido), secundario (solo borde) y de
   ícono (cuadrado). El principal usa --accentButton y NUNCA --accent: el
   acento es un color de texto, en los temas oscuros brilla demasiado como
   fondo. El texto encima es siempre blanco, en todos los temas. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { background: var(--surfaceAlt); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primario { background: var(--accentButton); color: var(--accentText); border-color: transparent; }
.btn-primario:hover { background: var(--accentButton); filter: brightness(1.08); }

.btn-ok { background: var(--okButton); color: var(--okText); border-color: transparent; }
.btn-peligro { background: var(--urgent); color: #FFFFFF; border-color: transparent; }
/* Destructiva dentro de una tabla (una por fila): solo borde, para que la
   columna de acciones no quede llena de bloques rojos. */
.btn-borde-peligro { background: var(--surface); color: var(--urgent); border-color: color-mix(in srgb, var(--urgent) 45%, transparent); }
.btn-borde-peligro:hover { background: var(--urgentSoft); border-color: var(--urgent); }

/* Fantasma: sin fondo ni borde. Para acciones terciarias dentro de una tarjeta,
   donde un botón con caja sería un tercer rectángulo dentro de otros dos. */
.btn-fantasma { background: none; border-color: transparent; color: var(--textDim); }
.btn-fantasma:hover { background: var(--surfaceAlt); color: var(--text); }

.btn-sm { padding: 5px 10px; font-size: 11.5px; border-radius: 8px; }
.btn-lg { padding: 11px 12px; font-size: 13.5px; border-radius: 10px; width: 100%; }

/* Botón de ícono: 28×28, con fondo apenas distinto del de la tarjeta. Es el
   que aparece repetido en las filas de una lista, así que tiene que pesar poco. */
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--surfaceAlt);
  border: 1px solid var(--border);
  color: var(--textDim);
  border-radius: 8px;
  cursor: pointer;
}
.btn-icono:hover { color: var(--text); }
/* Texto explicativo bajo la cabecera de una tabla-marco (mismo margen lateral). */
.tabla-nota { margin: 0; padding: 0 16px 10px; }
/* Accion destructiva en una fila (eliminar): gris en reposo, rojo al pasar. */
.btn-icono.peligro:hover { color: var(--urgent); border-color: var(--urgent); background: var(--urgentSoft); }
.btn-icono svg { display: block; }
/* Varias acciones juntas en una celda. */
.acciones-fila { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }

/* Variante de la barra superior: sin fondo en reposo, solo el borde. */
.btn-icono-borde {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); color: var(--textDim);
  border-radius: 8px; padding: 6px; cursor: pointer;
}
.btn-icono-borde.activo { background: var(--accentSoft); color: var(--accent); border-color: transparent; }


/* ── 3. Etiquetas de estado ─────────────────────────────────────────────────
   Píldora de color suave con el texto en el color pleno. Nunca color pleno de
   fondo: en una tabla, cinco píldoras saturadas tapan los datos.
   El par color/fondo-suave existe para los cuatro estados semánticos. */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-ok      { background: var(--okSoft);     color: var(--ok); }
.badge-warn    { background: var(--warnSoft);   color: var(--warn); }
.badge-urgente { background: var(--urgentSoft); color: var(--urgent); }
.badge-info    { background: var(--infoSoft);   color: var(--info); }
.badge-neutro  { background: var(--surfaceAlt); color: var(--textDim); border: 1px solid var(--border); }

/* Versión chica, la que va incrustada dentro de una línea de texto. */
.badge-xs { padding: 1px 7px; font-size: 10px; font-weight: 700; }

/* Contador: la píldora numérica al lado de un título o sobre una campana. */
.contador {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--urgentSoft); color: var(--urgent);
  border-radius: 999px; padding: 2px 8px;
  font-size: 10.5px; font-weight: 700;
}
.contador-flotante {
  position: absolute; top: -3px; right: -3px;
  min-width: 15px; height: 15px; padding: 0;
  background: var(--urgent); color: #FFFFFF;
  font-size: 9.5px;
}

/* Contorno: la marca de pertenencia ("Mi cartera", un autor, una categoría).
   Solo borde, sin relleno — es un dato de contexto, no un estado. */
.chip-contorno {
  border: 1px solid var(--border); color: var(--textDim);
  border-radius: 999px; padding: 2px 8px; font-size: 10.5px;
}
.chip-contorno.activo { border-color: var(--accent); color: var(--accent); }


/* ── 4. Formularios ─────────────────────────────────────────────────────────
   El campo va sobre --surfaceAlt, no sobre la superficie: hundido respecto de
   la tarjeta que lo contiene. El foco lo marca un halo de 3px del color del
   acento (la regla vive en tema.css y aplica a todo input de la página). */

.campo {
  width: 100%;
  background: var(--surfaceAlt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
}
.campo::placeholder { color: var(--textDim); }

.campo-etiqueta { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.campo-ayuda { font-size: 11px; color: var(--textDim); margin-top: 4px; }

/* Filtro: etiqueta y control bajo un mismo borde, en una sola línea de 34px.
   Cuando el filtro está aplicado, toda la caja se tiñe del acento — así se ve
   de un vistazo cuáles están tocados sin leerlos uno por uno. */
.filtro {
  display: inline-flex; align-items: center;
  height: 34px; padding-left: 10px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: background .15s, border-color .15s;
}
.filtro > span { font-size: 11.5px; white-space: nowrap; color: var(--textDim); }
.filtro > select {
  background: none; border: none; height: 100%;
  color: var(--text); padding: 0 6px; font-size: 12.5px; font-weight: 500;
  min-width: 130px; cursor: pointer;
}
.filtro.activo { background: var(--accentSoft); border-color: var(--accent); }
.filtro.activo > span, .filtro.activo > select { color: var(--accent); font-weight: 600; }

/* Botón que se alinea con los filtros: misma altura, mismo radio. */
.filtro-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 7px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.filtro-btn.activo { background: var(--warnSoft); color: var(--warn); border-color: var(--warn); font-weight: 600; }


/* ── 5. Selector de vista / pestañas ────────────────────────────────────────
   Grupo de opciones con una pastilla que se DESLIZA hasta la elegida en vez de
   saltar. El salto obliga al ojo a volver a buscar dónde quedó la selección.
   El JavaScript que mueve la pastilla está en react/usePastillaDeslizante.js;
   acá está la caja. */

.selector {
  position: relative;
  display: inline-flex; align-items: center;
  height: 34px; padding: 2px;
  background: var(--surfaceAlt);
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* El rótulo va adentro del mismo borde, apagado y sin peso de botón: es el
   nombre del grupo, no una tercera opción que se pueda apretar. */
.selector-rotulo {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--textDim); opacity: 0.55;
  padding: 0 9px 0 8px; margin-right: 2px;
  line-height: 28px; white-space: nowrap; user-select: none;
}
.selector button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 12px;
  background: none; border: none; border-radius: 8px;
  color: var(--textDim); font-size: 12.5px; font-weight: 600;
  transition: color .2s ease; cursor: pointer;
}
.selector button[aria-pressed="true"] { color: var(--accentText); }
/* La pastilla va DEBAJO de los botones (z-index 0): si fuera encima, el texto
   activo parpadearía mientras el fondo se mueve. */
.selector-pastilla {
  position: absolute; left: 0; top: 0; z-index: 0;
  background: var(--accentButton); border-radius: 8px;
  pointer-events: none;
  transition: transform .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) { .selector-pastilla { transition: none; } }
/* Sin pastilla (pantallas Jinja, sin el componente de React): el boton
   elegido lleva el fondo el mismo. Antes el texto elegido quedaba en
   --accentText sobre nada y no se leia (2026-09-30). */
.selector:not(:has(.selector-pastilla)) button[aria-pressed="true"] { background: var(--accentButton); }

/* Pestañas redondas, la otra forma del mismo grupo. */
.tab {
  border: none; border-radius: 999px; padding: 6px 12px;
  background: var(--surfaceAlt); color: var(--text);
  font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.tab.activa { background: var(--accentButton); color: var(--accentText); }


/* ── 6. Listas y filas ──────────────────────────────────────────────────────
   La app no usa <table> para las listas: usa filas flexibles, porque cada fila
   tiene que poder llevar avatar, etiquetas, botones y un menú sin pelearse con
   el ancho de las columnas.

   La franja de color a la izquierda (inset box-shadow, no un borde: un borde
   correría el contenido 3px) permite leer el estado de toda la lista de un
   vistazo. */

.lista { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.fila:last-child { border-bottom: none; }
.fila:hover { background: var(--surfaceAlt); }
.fila-ok      { box-shadow: inset 3px 0 0 var(--ok); }
.fila-warn    { box-shadow: inset 3px 0 0 var(--warn); }
.fila-urgente { box-shadow: inset 3px 0 0 var(--urgent); }
.fila-titulo { font-size: 13.5px; font-weight: 600; }
.fila-sub { font-size: 12px; color: var(--textDim); }

/* Cabecera de tabla, cuando sí se usa una tabla. */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left; padding: 10px 14px;
  background: var(--surfaceAlt);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--textDim);
  border-bottom: 1px solid var(--border);
}
.tabla td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--border); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--surfaceAlt); }

/* Avatar con iniciales. El mismo par accentSoft/accent de siempre. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--accentSoft); color: var(--accent);
  font-size: 12px; font-weight: 700;
}
.avatar-sm { width: 32px; height: 32px; font-size: 11.5px; }

/* Estado vacío: centrado, apagado y corto. */
.vacio { text-align: center; padding: 24px 0; color: var(--textDim); font-size: 13px; }


/* ── 7. Indicadores (KPI) ───────────────────────────────────────────────────
   Número grande en la tipografía de display, etiqueta abajo y un contexto en
   gris. El ícono va dentro de un cuadrado teñido con el 16% de su propio color:
   es lo que hace que cuatro tarjetas iguales se distingan de un vistazo. */

.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; cursor: pointer; }
.kpi-icono {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 12px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.kpi-valor { font-family: 'Sora', 'Inter', sans-serif; font-weight: 700; font-size: 26px; margin: 0 0 2px; }
.kpi-label { font-size: 12px; font-weight: 600; }
.kpi-sub { font-size: 11px; color: var(--textDim); margin-top: 2px; }
/* Se pinta con `style="color: var(--info)"` en el contenedor del ícono y el
   cuadrado se tiñe solo. Los cuatro colores del sistema: info, ok, warn, urgent. */


/* ── 8. Menús y capas flotantes ─────────────────────────────────────────────
   Un menú desplegable siempre lleva DOS elementos: el panel y una capa
   invisible a pantalla completa por detrás, que lo cierra al hacer clic
   afuera. Sin esa capa, el menú se queda abierto para siempre. */

.capa-cierre { position: fixed; inset: 0; z-index: 99; }
.menu {
  position: absolute; z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 160px;
}
.menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px;
  background: none; border: none;
  font-size: 12.5px; text-align: left; color: var(--text);
  cursor: pointer;
}
.menu button:hover { background: var(--surfaceAlt); }
.menu button.activa { color: var(--accent); }
.menu-grupo {
  border-top: 1px solid var(--border);
  padding: 8px 12px 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--textDim);
}

/* Panel lateral (drawer). Las animaciones .drawer-overlay / .drawer-panel ya
   están en tema.css; acá va la superficie. */
.drawer {
  background: var(--surface);
  border-left: 1px solid var(--border);
  width: 420px; max-width: 100vw;
  display: flex; flex-direction: column;
}
.drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-cuerpo { flex: 1; overflow-y: auto; padding: 16px; }

/* Aviso: bloque de color suave para un mensaje de estado dentro del flujo. */
.aviso { border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.aviso-ok      { background: var(--okSoft);     color: var(--ok); }
.aviso-warn    { background: var(--warnSoft);   color: var(--warn); }
.aviso-urgente { background: var(--urgentSoft); color: var(--urgent); }
.aviso-info    { background: var(--infoSoft);   color: var(--info); }


/* ── 9. Estructura de la aplicación ─────────────────────────────────────────
   Menú lateral de 220px fijo, barra superior y el contenido con scroll propio.
   La clase .sidebar es la que los temas con ornamento usan para pintarle su
   propio fondo (ver tema.css), así que conviene conservar ese nombre. */

.app { display: flex; height: 100vh; }
.sidebar {
  display: flex; flex-direction: column; flex-shrink: 0;
  width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.sidebar-marca { display: flex; align-items: center; gap: 8px; padding: 16px; }
.sidebar-marca span { font-family: 'Sora', 'Inter', sans-serif; font-weight: 700; font-size: 15px; }
.sidebar nav { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; flex: 1; }
/* .navitem ya trae el hover desde tema.css */
.navitem {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500;
  text-decoration: none; color: var(--text);
  background: transparent;
  transition: color .2s ease;
}
.navitem.activo { color: var(--accent); }
/* La misma pastilla deslizante del selector, en versión menú: acá el fondo es
   el acento suave, porque el texto queda encima y tiene que seguir legible. */
.nav-pastilla {
  position: absolute; left: 0; top: 0; z-index: 0;
  background: var(--accentSoft); border-radius: 8px; pointer-events: none;
  transition: transform .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1);
}
.sidebar-pie { padding: 8px; border-top: 1px solid var(--border); position: relative; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.contenido { flex: 1; overflow-y: auto; padding: 24px; }


/* ── 10. Ajustes por tema para las clases ───────────────────────────────────
   En la app original los temas Telar, Lino, Cordillera y Greda se enganchan a
   los estilos EN LÍNEA (selectores del tipo [style*="..."]). Como acá los
   componentes usan clases, hay que repetir esos enganches apuntando a las
   clases. Es la única parte del kit que no estaba tal cual en el original.

   Botón principal con degradado entre los dos colores de la paleta: es el
   único lugar donde el acento y su compañero aparecen juntos. */

[data-theme="telar"] .btn-primario,
[data-theme="telar"] .selector-pastilla,
[data-theme="telar"] .tab.activa {
  background-image: linear-gradient(135deg, #C42E7E 0%, #E8437F 50%, #FF7E6E 100%);
}
[data-theme="lino"] .btn-primario,
[data-theme="lino"] .selector-pastilla,
[data-theme="lino"] .tab.activa {
  background-image: linear-gradient(135deg, #B02F6C 0%, #C9456F 50%, #D9834F 100%);
}
[data-theme="cordillera"] .btn-primario,
[data-theme="cordillera"] .selector-pastilla,
[data-theme="cordillera"] .tab.activa {
  background-image: linear-gradient(135deg, #1E6E8F 0%, #23597E 100%);
}
[data-theme="greda"] .btn-primario,
[data-theme="greda"] .selector-pastilla,
[data-theme="greda"] .tab.activa {
  background-image: linear-gradient(135deg, #1B6580 0%, #215270 100%);
}

/* Telar y Lino llevan la geometría más blanda; Cordillera y Greda la firme.
   Es lo que hace que se lean como dos pares y no como cuatro temas sueltos. */
[data-theme="telar"] .card, [data-theme="telar"] .panel, [data-theme="telar"] .kpi, [data-theme="telar"] .lista,
[data-theme="lino"]  .card, [data-theme="lino"]  .panel, [data-theme="lino"]  .kpi, [data-theme="lino"]  .lista {
  border-radius: 16px;
}
[data-theme="telar"] .selector, [data-theme="telar"] .menu, [data-theme="telar"] .campo, [data-theme="telar"] .aviso,
[data-theme="lino"]  .selector, [data-theme="lino"]  .menu, [data-theme="lino"]  .campo, [data-theme="lino"]  .aviso {
  border-radius: 12px;
}

/* ======================================================================
   Piezas comunes de pantalla (Regla 6, fase B, 2026-09-29). Van con
   static/js/ui.js. Referencia viva en /kit. Solo tokens de tema.css.
   ====================================================================== */

/* Norma 1 -- encabezado de página. Título + alcance + hora a la izquierda,
   acciones a la derecha (la principal al final).
   <header class="pagina-cab">
     <div class="pagina-cab-texto">
       <h1 class="pagina-titulo">Pendientes</h1>
       <div class="pagina-sub"><span class="pagina-alcance">Su sucursal</span>
         <span data-ui-actualizado></span></div>
     </div>
     <div class="pagina-acciones">...botones...</div>
   </header> */
.pagina-cab{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-4);
}
.pagina-cab-texto{min-width:0; flex:1 1 280px;}
.pagina-titulo{
  font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1.2;
  color:var(--text); margin:0; letter-spacing:-.01em; text-wrap:balance;
}
.pagina-sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-1); font-size:13px; color:var(--textDim);
}
.pagina-alcance{
  display:inline-flex; align-items:center; gap:6px; padding:2px 10px;
  border-radius:var(--radius-pill); background:var(--accentSoft); color:var(--accent);
  font-weight:600; font-size:12px;
}
.pagina-sub [data-ui-actualizado]{font-variant-numeric:tabular-nums;}
.pagina-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);}

/* Enlace para volver a la pantalla madre, arriba del título. */
.pagina-volver{display:inline-flex; align-items:center; gap:4px; margin-bottom:var(--sp-1);
  font-size:12.5px; font-weight:600; color:var(--accent);}
.pagina-volver:hover{text-decoration:underline;}
/* Descripción larga bajo el encabezado (una o dos frases; lo largo va en .nota). */
.pagina-desc{margin:calc(-1 * var(--sp-2)) 0 var(--sp-4); max-width:80ch; font-size:13px; line-height:1.55; color:var(--textDim);}

/* Barra de filtros: etiqueta arriba y control abajo, todo en una fila que
   se pliega. <div class="barra-filtros"><label class="filtro-campo">
   <span class="campo-etiqueta">Sucursal</span><select class="campo">…</select></label>
   … <div class="barra-filtros-acciones">botones</div></div> */
.barra-filtros{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-3);
  margin-bottom:var(--sp-4);}
.filtro-campo{display:flex; flex-direction:column; min-width:0;}
.filtro-campo .campo-etiqueta{margin-bottom:4px; font-size:11.5px; color:var(--textDim);}
.barra-filtros .campo{width:auto; min-width:170px; padding:8px 10px; font-size:13px;}
.barra-filtros .campo[type="search"], .barra-filtros .campo.ancho{min-width:260px;}
.barra-filtros-acciones{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-left:auto; align-self:flex-end;}
@media (max-width:640px){
  .filtro-campo, .barra-filtros .campo{width:100%; min-width:0;}
  .barra-filtros-acciones{margin-left:0;}
}

/* Cabecera de una tabla dentro de .tabla-marco: título, cantidad, acciones. */
.tabla-cab{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border);}
.tabla-cab h2, .tabla-cab h3{font-size:14px; font-weight:700; color:var(--text); margin:0;}
.tabla-cab .cuenta{font-weight:500; color:var(--textDim); margin-left:4px; font-variant-numeric:tabular-nums;}
.tabla td.num, .tabla th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tabla td.nowrap{white-space:nowrap;}
.tabla-compacta td{padding:8px 12px; font-size:12.5px;}
/* Tabla larga: alto limitado, cabecera pegada arriba al desplazarse. */
.tabla-marco.con-alto{max-height:72vh; overflow:auto;}
.tabla-marco.con-alto thead th{position:sticky; top:0; z-index:1;}
.tabla-sin-corte td, .tabla-sin-corte th{white-space:nowrap;}
/* Paginador bajo una tabla: anterior · «Página 2 de 9 · 1.234 filas» · siguiente. */
.paginador{display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3);
  font-size:12.5px; color:var(--textDim); font-variant-numeric:tabular-nums;}
/* Cifras de resumen en una línea (no tarjetas): «4.828 clientes · 12 sin vendedor». */
.cifras-linea{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-3);
  font-size:12px; color:var(--textDim);}
.cifras-linea b{color:var(--text); font-variant-numeric:tabular-nums;}
/* Separación estándar entre bloques de una pantalla. */
.bloque{margin-bottom:var(--sp-5);}
/* Cifras: se usan las del Inicio (.kpis-fila > .kpi-c > .kpi-et / .kpi-val / .kpi-sub). */

/* Lista de barras horizontales: nombre · barra · valor.
   <div class="barras-lista"><div class="barra-fila"><span class="barra-nombre">X</span>
   <span class="barra-pista"><span style="width:40%"></span></span><span class="barra-valor">$1</span></div></div> */
.barras-lista{display:flex; flex-direction:column;}
.barra-fila{display:grid; grid-template-columns:minmax(140px, 240px) 1fr minmax(90px, max-content);
  align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; font-size:13px;}
.barra-nombre{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.barra-nombre small{color:var(--textDim); font-size:11px; margin-left:4px;}
.barra-pista{display:block; height:12px; border-radius:var(--radius-pill); background:var(--surfaceAlt); overflow:hidden;}
.barra-pista > span{display:block; height:100%; border-radius:var(--radius-pill); background:var(--accent);}
.barra-pista.warn > span{background:var(--warn);}
.barra-pista.ok > span{background:var(--ok);}
.barra-valor{text-align:right; font-weight:600; font-variant-numeric:tabular-nums;}
@media (max-width:560px){ .barra-fila{grid-template-columns:1fr auto;} .barra-pista{grid-column:1 / -1; order:3;} }

/* Formulario: campos en columnas que se pliegan solas.
   <div class="form-grid"><label class="form-campo"><span class="campo-etiqueta">X</span><input class="campo"></label></div> */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--sp-3) var(--sp-4);}
.form-campo{display:flex; flex-direction:column; min-width:0;}
.form-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4);}
.panel > h2, .card > h2, .panel > h3{font-size:15px; font-weight:700; margin:0 0 var(--sp-3);}
details.avanzado > summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--accent); margin:var(--sp-3) 0; user-select:none;}

/* Zona para elegir un archivo (clic o arrastrar). Con archivo elegido: .con-archivo. */
.zona-archivo{display:flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:44px;
  border:1.5px dashed var(--border); border-radius:var(--radius-md); padding:var(--sp-3) var(--sp-4);
  font-size:13px; color:var(--textDim); background:var(--surfaceAlt); cursor:pointer; text-align:center;}
.zona-archivo:hover, .zona-archivo.arrastrando{border-color:var(--accent); color:var(--accent);}
.zona-archivo.con-archivo{border-style:solid; border-color:var(--ok); color:var(--ok); font-weight:600; background:var(--okSoft);}
.zona-archivo input[type=file]{display:none;}

/* Botón procesando: <button class="btn btn-primario" aria-busy="true">. */
.btn[aria-busy="true"]{pointer-events:none; opacity:.8;}
.btn[aria-busy="true"]::before{content:""; width:13px; height:13px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:ui-girar .7s linear infinite;}
@keyframes ui-girar{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.btn[aria-busy="true"]::before{animation-duration:2s;}}

/* Columnas por período (gráfico simple en CSS, colores del tema):
   <div class="columnas-mes"><div class="col"><span class="val">$1</span><span class="bar" style="height:40%"></span><span class="et">ene</span></div></div> */
.columnas-mes{display:flex; align-items:stretch; gap:var(--sp-3); height:190px; margin-bottom:var(--sp-4);}
.columnas-mes .col{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;}
.columnas-mes .val{font-size:10.5px; font-weight:700; color:var(--text); margin-bottom:4px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.columnas-mes:has(.col:nth-child(9)) .val{display:none;}  /* muchas columnas: el valor queda en el title */
.columnas-mes .bar{width:60%; min-height:2px; background:var(--accent); border-radius:5px 5px 2px 2px;}
.columnas-mes .et{margin-top:6px; padding-top:4px; width:100%; text-align:center; border-top:1px solid var(--border);
  font-size:10.5px; color:var(--textDim); white-space:nowrap;}

/* Lista de casillas con desplazamiento (filtro de varios valores). */
.lista-casillas{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surfaceAlt);
  max-height:150px; overflow-y:auto; min-width:260px; padding:var(--sp-1) var(--sp-2);}
.lista-casillas label{display:flex; align-items:center; gap:var(--sp-2); padding:3px 2px; font-size:12.5px; cursor:pointer;}

/* Dos columnas que pasan a una en pantallas angostas. */
.dos-columnas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4);}
@media (max-width:900px){ .dos-columnas{grid-template-columns:1fr;} }
/* Filas que se pueden elegir (clic filtra otra parte de la pantalla). */
.tabla tbody tr.clicable{cursor:pointer;}
.tabla tbody tr.seleccionada, .tabla tbody tr.seleccionada:hover{background:var(--accentSoft);}

/* Buscador con sugerencias: el contenedor lleva position:relative.
   <div class="autocompletar"><input class="campo"><div class="sugerencias-lista" hidden>
   <button type="button">Opción</button></div></div> */
.autocompletar{position:relative;}
.sugerencias-lista{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); max-height:240px; overflow-y:auto;}
.sugerencias-lista > button{display:block; width:100%; text-align:left; padding:8px 12px; font-size:12.8px;
  background:none; border:none; color:var(--text); cursor:pointer; font-family:inherit;}
.sugerencias-lista > button:hover, .sugerencias-lista > button:focus-visible{background:var(--surfaceAlt);}
/* Valor elegido con botón para quitarlo. */
.chip-elegido{display:inline-flex; align-items:center; gap:var(--sp-2); width:fit-content; margin-top:var(--sp-1);
  padding:4px 6px 4px 12px; border-radius:var(--radius-pill); background:var(--accentSoft); color:var(--accent);
  font-size:12.5px; font-weight:600;}
.chip-elegido[hidden]{display:none;}
.chip-elegido button{display:inline-flex; background:none; border:none; color:inherit; cursor:pointer; padding:2px; border-radius:50%;}
.chip-elegido button:hover{background:color-mix(in srgb, currentColor 15%, transparent);}

/* Filas de subtotal y total en tablas de resultados. */
.tabla tr.subtotal td{font-weight:700; background:var(--surfaceAlt);}
.tabla tr.total td{font-weight:700; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);}
.tabla td.sangria{padding-left:var(--sp-6);}
/* Monto negativo: rojo (norma 4: falta). Positivo destacado: verde. */
.negativo{color:var(--urgent);}
.kpi-val.positivo{color:var(--ok);}
.kpi-val.negativo{color:var(--urgent);}
.columnas-mes .bar.negativo{background:var(--urgent);}

/* Migas: Cartera de Clientes › Gestión de cartera › Procesos. */
.migas{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:var(--sp-2); font-size:12px; color:var(--textDim);}
.migas a{color:var(--textDim); cursor:pointer;}
.migas a:hover{color:var(--accent);}
.migas .actual{color:var(--text); font-weight:600;}

/* Pestañas de subpantalla (subrayadas). Enlaces o botones:
   <nav class="pestanas"><a class="pestana activa" href="…">Mover</a>…</nav> */
.pestanas{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:var(--sp-5); overflow-x:auto;}
.pestana{padding:9px 16px; font-size:13px; font-weight:600; color:var(--textDim); white-space:nowrap;
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; font-family:inherit;}
.pestana:hover{color:var(--accent);}
.pestana.activa, .pestana.on, .pestana[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent);}

/* Texto de un archivo (vista previa), en monoespaciada. */
.bloque-codigo{margin:0; padding:var(--sp-3) var(--sp-4); background:var(--surfaceAlt); color:var(--text);
  font-family:var(--font-mono); font-size:11.5px; line-height:1.75; overflow-x:auto; white-space:pre;}
/* Fila de lista que no se abre (sin mano ni hover). */
.fila.estatica{cursor:default;}
.fila.estatica:hover{background:none;}
.lista-alta{max-height:44vh; overflow-y:auto;}

/* Pestañas tipo píldora (filtran una misma tabla): <div class="tabs-fila" role="tablist">
   <button class="tab" role="tab" aria-selected="true">Requieren acción<span class="n">12</span></button> */
.tabs-fila{display:flex; flex-wrap:wrap; gap:6px;}
.tab[aria-selected="true"], .tab.on, .tab.activa{background:var(--accentButton); color:var(--accentText);}
.tab .n{font-family:var(--font-mono); margin-left:6px; opacity:.85;}
/* Buscador dentro de una barra (ocupa lo que sobra). */
.campo.campo-buscar{flex:1 1 220px; width:auto; min-width:0; padding:7px 10px; font-size:12.5px;}
/* Botón que se ve como enlace (acciones dentro de una tabla). */
.btn-enlace{font:inherit; font-weight:600; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; text-align:left;}
.btn-enlace:hover{text-decoration:underline;}
/* Texto secundario corto (pistas, detalle bajo un dato de tabla). */
.pista{font-size:11.5px; color:var(--textDim);}
.detalle-celda{font-size:11.5px; color:var(--textDim); margin-top:3px; max-width:46ch;}
.desplazable-x{overflow-x:auto;}
/* Dentro de un diálogo los campos van apilados con aire parejo. */
.dialogo-cuerpo{display:flex; flex-direction:column; gap:var(--sp-3);}
.dialogo form{display:contents;}
textarea.campo{min-height:72px; resize:vertical;}
/* Lista de casillas agrupada (nota > líneas) para elegir varias filas. */
.lista-elegir{max-height:260px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surfaceAlt);}
.lista-elegir .grupo{display:flex; gap:8px; align-items:center; padding:6px 9px; background:var(--surface);
  font-size:12.5px; font-weight:600; position:sticky; top:0; border-top:1px solid var(--border);}
.lista-elegir label{display:flex; gap:8px; align-items:flex-start; padding:5px 9px 5px 28px; font-size:12.5px;
  cursor:pointer; border-top:1px solid var(--border);}
.lista-elegir label:hover{background:var(--surface);}
.lista-elegir input{margin-top:2px; accent-color:var(--accent);}

/* Encabezado que ordena al hacer clic (la flecha la pone el JS). */
.tabla th.ordenable{cursor:pointer; user-select:none;}
.tabla th.ordenable:hover{color:var(--accent);}
/* Fila de detalle desplegada bajo otra fila. */
.tabla tr.detalle-fila > td{background:var(--surfaceAlt); padding:0;}

/* Interruptor (sí/no) con título y explicación; el JS alterna .on.
   <button type="button" class="interruptor on"><span class="interruptor-riel"><i></i></span>
   <span class="interruptor-txt"><b>Agrupar por RUT</b><small>una fila por empresa</small></span></button> */
.interruptor{display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:8px 13px; cursor:pointer; font:inherit; color:var(--text); text-align:left;}
.interruptor:hover{border-color:var(--accent);}
.interruptor-riel{position:relative; width:34px; height:19px; border-radius:var(--radius-pill); flex:none;
  background:var(--surfaceAlt); border:1px solid var(--border); transition:background .15s, border-color .15s;}
.interruptor-riel i{position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:var(--textDim); transition:left .15s, background .15s;}
.interruptor.on .interruptor-riel{background:var(--accent); border-color:var(--accent);}
.interruptor.on .interruptor-riel i{left:16px; background:var(--accentText);}
.interruptor-txt{display:flex; flex-direction:column; line-height:1.3;}
.interruptor-txt b{font-size:12.5px;}
.interruptor-txt small{font-size:11px; color:var(--textDim);}
@media (prefers-reduced-motion: reduce){ .interruptor-riel, .interruptor-riel i{transition:none;} }
.tabla th.cen, .tabla td.cen{text-align:center;}

/* Formularios de una columna: ancho de lectura cómodo. */
.contenido-angosto{max-width:620px;}
.form-apilado > .form-campo{margin-bottom:var(--sp-4);}
.form-apilado small{display:block; color:var(--textDim); font-size:11.5px; margin-top:4px; line-height:1.45;}

/* Paneles de pestaña: solo el marcado se ve. */
.tab-panel{display:none;}
.tab-panel.on, .tab-panel.activa{display:block;}

/* Compatibilidad: .field (etiqueta + control) de las pantallas grandes que
   ya la usaban en cientos de lugares (Formularios). Se ve IGUAL que
   .form-campo + .campo-etiqueta + .campo. No usar en pantallas nuevas. */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
.field > label{font-size:12px; font-weight:600; color:var(--text);}
/* :where() deja la especificidad en una clase: las reglas propias de la
   pantalla (fila de productos, cantidad, buscador) mandan sobre esta. */
.field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea){
  width:100%; background:var(--surfaceAlt); border:1px solid var(--border); border-radius:10px;
  padding:9px 12px; font-size:13.5px; font-family:inherit; color:var(--text);}
.field input[type=file]{font:inherit; font-size:12.5px; color:var(--text);}
.field textarea{min-height:60px; resize:vertical;}
.field small{color:var(--textDim); font-size:11px;}
.barra-filtros .field{margin-bottom:0;}

/* Estado de los datos en el encabezado: punto verde listo / rojo con error. */
.estado-datos{display:inline-flex; align-items:center; gap:6px;}
.estado-datos::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok);}
.estado-datos.error::before{background:var(--urgent);}
.estado-datos.cargando::before{background:var(--textDim);}
.tabla-compacta th{padding:8px 12px;}

/* Recuadro: explicación larga dentro del flujo, con el texto en color normal
   (un párrafo entero en ámbar no se lee) y el significado en el borde. */
.recuadro{border-left:4px solid var(--info); background:var(--infoSoft); color:var(--text);
  border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
  font-size:13px; line-height:1.55; max-width:110ch;}
.recuadro-warn{border-left-color:var(--warn); background:var(--warnSoft);}
.recuadro-urgente{border-left-color:var(--urgent); background:var(--urgentSoft);}
.recuadro-ok{border-left-color:var(--ok); background:var(--okSoft);}
.recuadro-neutro{border-left-color:var(--border); background:var(--surfaceAlt);}
.recuadro ul{margin:var(--sp-2) 0 0 var(--sp-5); padding:0;}
.recuadro p + p{margin-top:var(--sp-2);}

/* Título de sección dentro de una pantalla (mismo que usa el Inicio). */
.seccion-titulo{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--textDim); margin:var(--sp-6) 0 var(--sp-3);}
.seccion-titulo:first-child{margin-top:0;}

/* hidden siempre oculta, aunque la clase o un style en línea digan display. */
[hidden]{display:none !important;}

/* Norma 5 -- cargando / vacío / error (UI.estado). */
.ui-estado{padding:var(--sp-6) var(--sp-4); text-align:center;}
.ui-estado-titulo{font-weight:600; color:var(--text); font-size:14px;}
.ui-estado-detalle{margin-top:var(--sp-1); color:var(--textDim); font-size:13px; max-width:60ch; margin-inline:auto;}
.ui-estado-reintentar{margin-top:var(--sp-3);}
.ui-estado-cargando{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) 0; text-align:left;}
.ui-estado-barra{
  display:block; height:14px; border-radius:var(--radius-sm); background:var(--surfaceAlt);
  width:calc(100% - var(--i, 0) * 7%);
  animation:ui-estado-pulso 1.3s ease-in-out infinite; animation-delay:calc(var(--i, 0) * 90ms);
}
@keyframes ui-estado-pulso{0%,100%{opacity:1} 50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){.ui-estado-barra{animation:none;}}
.ui-estado-error{
  background:var(--urgentSoft); border:1px solid var(--urgent); border-radius:var(--radius-md);
  margin:var(--sp-2) 0;
}
.ui-estado-error .ui-estado-titulo{color:var(--urgent);}
.ui-fila-estado > td{padding:0 !important; border:0 !important; background:transparent !important;}

/* Norma 7 -- aviso breve (UI.aviso): uno solo, abajo al centro. */
.aviso-breve{
  position:fixed; left:50%; bottom:var(--sp-6); z-index:9999;
  transform:translate(-50%, 12px); opacity:0; pointer-events:none;
  max-width:min(520px, calc(100vw - 32px));
  padding:10px 16px; border-radius:var(--radius-md);
  background:var(--text); color:var(--surface); box-shadow:var(--shadow);
  font-size:13.5px; font-weight:500; transition:opacity .18s, transform .18s;
}
.aviso-breve.visible{opacity:1; transform:translate(-50%, 0);}
.aviso-breve[data-tipo="ok"]{border-left:4px solid var(--ok);}
.aviso-breve[data-tipo="error"]{background:var(--urgent); color:#fff;}
.aviso-breve[data-tipo="info"]{border-left:4px solid var(--info);}
@media (prefers-reduced-motion: reduce){.aviso-breve{transition:none;}}

/* Norma 7 -- diálogo centrado (el reset del kit le quita margin:auto). */
dialog.dialogo{
  margin:auto; padding:0; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px);
}
dialog.dialogo-sm{width:min(420px, calc(100vw - 32px));}
dialog.dialogo-lg{width:min(860px, calc(100vw - 32px));}
dialog.dialogo::backdrop{background:rgba(15,20,28,.45);}
.dialogo-cab{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border);}
.dialogo-cab h2{font-family:var(--font-display); font-size:17px; margin:0;}
.dialogo-cuerpo{padding:var(--sp-5); overflow:auto;}
.dialogo-cuerpo > p{margin:0;}
.dialogo-pie{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5) var(--sp-4); border-top:1px solid var(--border);}

/* Norma 4 -- un color por significado: se usan los .badge-* de arriba.
   verde .badge-ok = listo/facturable · azul .badge-info = en camino ·
   ámbar .badge-warn = requiere acción · rojo .badge-urgente = falta/vencido ·
   gris .badge-neutro = informativo. */

/* Norma 10 -- tabla con desplazamiento propio: la página no se corre de lado. */
.tabla-marco{overflow-x:auto; max-width:100%; border:1px solid var(--border);
  border-radius:var(--radius-md); background:var(--surface);}
.tabla-marco > table{width:100%;}
@media (pointer: coarse){.btn{min-height:40px;} .btn-sm{min-height:34px;}}

/* Norma 11 -- foco del teclado visible en todo lo que se puede operar. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* Calendario del mes (2026-09-30, nacio en Calendario Compra Nacional).
   Grilla de 7 columnas con los eventos de cada dia como botones. El color
   sigue la norma 4: azul = planificado, rojo = vencido o para hoy.
   <div class="cal-mes-marco"><div class="cal-mes">
     <div class="cal-dow">lun</div>...
     <div class="cal-dia hoy"><div class="cal-dia-cab"><span>30</span><span class="mono">$1,2 MM</span></div>
       <button class="cal-evento urgente"><b>Proveedor</b><span>$1,2 MM · 3 SKU</span></button></div>
   </div></div>
   Dia de otro mes: .fuera · dia pasado: .pasado · evento elegido: .elegido ·
   evento que no calza con un filtro: .atenuado. */
.cal-mes-marco{overflow-x:auto;}
.cal-mes{display:grid; grid-template-columns:repeat(7, minmax(96px, 1fr)); min-width:700px;
  border-top:1px solid var(--border); border-left:1px solid var(--border);}
.cal-dow{font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--textDim);
  padding:var(--sp-1) var(--sp-2); background:var(--surfaceAlt);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);}
.cal-dia{min-height:104px; display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-1) 6px;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);}
.cal-dia.fuera, .cal-dia.pasado{background:var(--surfaceAlt);}
.cal-dia.fuera .cal-dia-cab{opacity:.45;}
.cal-dia.hoy{box-shadow:inset 0 0 0 2px var(--accent);}
.cal-dia-cab{display:flex; justify-content:space-between; gap:var(--sp-1); font-size:12px; color:var(--textDim);}
.cal-dia-cab .mono{font-size:11px;}
.cal-evento{display:block; width:100%; text-align:left; font-family:inherit; font-size:11.5px; line-height:1.3;
  padding:3px 6px; border:0; border-left:3px solid var(--info); border-radius:4px;
  background:var(--infoSoft); color:var(--text); cursor:pointer;}
.cal-evento b{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-evento span{font-family:var(--font-mono); color:var(--textDim);}
.cal-evento.urgente{border-left-color:var(--urgent); background:var(--urgentSoft);}
.cal-evento.elegido{outline:2px solid var(--text); outline-offset:-1px;}
.cal-evento.atenuado{opacity:.3;}
/* Panel lateral ancho (detalle con tablas y grafico). Mismo .drawer + .drawer-panel. */
.drawer.drawer-ancho{width:min(920px, 100vw);}

/* Grafico de Chart.js con alto fijo (2026-10-02). El canvas va solo dentro del
   marco y el grafico lleva maintainAspectRatio:false: el tamaño lo pone el
   marco, no el canvas. Un .panel con solo el canvas adentro se achica: con el
   zoom 0.9 del portal Chart.js mide el 90% al crearlo y, como el alto del panel
   sale del propio canvas, despues nunca vuelve a crecer (en el Calendario
   Compra Nacional, angostar la ventana y volver a agrandarla lo dejaba al 49%).
   <div class="grafico-marco"><canvas id="..." aria-label="..."></canvas></div> */
.grafico-marco{position:relative; width:100%; min-width:0; height:240px;}
.grafico-marco.grafico-bajo{height:200px;}

/* Contenido principal + columna lateral angosta (2026-09-30): un calendario o
   una tabla a la izquierda y resumenes chicos a la derecha; en pantallas
   angostas la columna pasa abajo.
   <div class="columnas-lateral"><section class="panel">...</section><aside>...</aside></div> */
.columnas-lateral{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--sp-4); align-items:start;}
.columnas-lateral > aside{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0;}
.columnas-lateral .barra-fila{grid-template-columns:minmax(90px, 130px) 1fr minmax(64px, max-content); gap:var(--sp-2);}
@media (max-width:1100px){ .columnas-lateral{grid-template-columns:minmax(0,1fr);} }

/* Flecha para desplegar un grupo (2026-09-30). Va dentro del boton que abre
   y cierra, con aria-expanded; gira al abrir:
   <button class="btn-enlace" aria-expanded="false">{{ icono('desplegar', 14, 'ico-desplegar') }} Proveedor</button> */
.ico-desplegar{vertical-align:-2px; transition:transform .15s ease;}
[aria-expanded="true"] > .ico-desplegar{transform:rotate(90deg);}
@media (prefers-reduced-motion: reduce){ .ico-desplegar{transition:none;} }

/* Pantallas de bodega (2026-10-01, app de Despachos): se usan de pie, a un
   metro de la pantalla y con pistola lectora.
   - Lectura: el campo donde cae la pistoleada. Grande, monoespaciado y en
     mayuscula; Enter lo envia.
       <input class="campo lectura" autocomplete="off" autofocus>
   - Cifras grandes: la misma fila de cifras del Inicio, con valores que se
     leen de lejos. Estado del valor con .ok / .warn / .urgente en .kpi-c.
       <div class="kpis-fila kpis-grandes"><div class="kpi-c warn"><span class="kpi-et">Faltan</span><span class="kpi-val">3</span></div></div>
   - Recuadro grande: el resultado de la ultima lectura.
       <div class="recuadro recuadro-ok recuadro-grande">Bulto 2 de 4 agregado</div>
   - Barra de avance: .barra-pista + <span> cuyo ancho pone el JavaScript
     (el.style.width), nunca un style="" en la plantilla. */
.campo.lectura{font-family:var(--font-mono); font-size:26px; font-weight:600; letter-spacing:.04em;
  padding:14px 16px; text-transform:uppercase; border-width:2px;}
.campo.lectura:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accentSoft);}
.kpis-grandes .kpi-c{padding:16px 20px; border-top:4px solid var(--border);}
.kpis-grandes .kpi-val{font-size:44px; line-height:1.1; font-variant-numeric:tabular-nums;}
.kpis-grandes .kpi-val.texto{font-size:28px; line-height:1.25; overflow-wrap:anywhere;}
.kpis-grandes .kpi-c.ok{border-top-color:var(--ok);}
.kpis-grandes .kpi-c.ok .kpi-val{color:var(--ok);}
.kpis-grandes .kpi-c.warn{border-top-color:var(--warn);}
.kpis-grandes .kpi-c.warn .kpi-val{color:var(--warn);}
.kpis-grandes .kpi-c.urgente{border-top-color:var(--urgent);}
.kpis-grandes .kpi-c.urgente .kpi-val{color:var(--urgent);}
.kpis-grandes .kpi-c.info{border-top-color:var(--info);}
.recuadro.recuadro-grande{font-size:18px; font-weight:600; padding:var(--sp-4) var(--sp-5); border-left-width:6px;}
.recuadro.recuadro-grande small{display:block; font-size:13px; font-weight:400; margin-top:var(--sp-1); color:var(--textDim);}

/* Cabecera de kimi fuera del armazon con menu lateral (app de Despachos,
   2026-10-02): <header class="app-header suelta">. Toma el alto de la grilla. */
.app-header.suelta{min-height:var(--header-h); flex-wrap:wrap; padding:var(--sp-2) var(--sp-5);}
.app-header.suelta .brand{height:auto;}

/* Pila: bloques de una pantalla uno bajo otro con la separacion de la escala
   (2026-10-01). <main class="contenido"><div class="pila">...</div></main> */
.pila{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0;}
.pila > .pagina-cab{margin-bottom:0;}

/* Hoja para imprimir (2026-10-01): caratula de pallet, nomina, rotulos.
   En pantalla se ve como una hoja; al imprimir, cada .hoja-impresion es una
   pagina y desaparece todo lo marcado .no-imprimir (menu, botones).
     <section class="hoja-impresion">
       <div class="rotulo-gigante">VALDIVIA</div>
       <dl class="hoja-datos"><div><dt>Bultos</dt><dd>12</dd></div>...</dl>
     </section>
   */
.hoja-impresion{background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:var(--sp-8); margin:0 auto var(--sp-5); max-width:1040px;
  display:flex; flex-direction:column; gap:var(--sp-4);}
.hoja-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4);
  border-bottom:2px solid var(--text); padding-bottom:var(--sp-3);}
.hoja-cab h2{font-family:var(--font-display); font-size:20px; margin:0;}
.hoja-cab img{display:block; height:28px; width:auto; margin-bottom:var(--sp-1);}
.rotulo-gigante{font-family:var(--font-display); font-weight:800; font-size:min(14vw, 120px); line-height:1;
  text-align:center; text-transform:uppercase; overflow-wrap:anywhere; letter-spacing:-.01em;}
.rotulo-grande{font-family:var(--font-display); font-weight:700; font-size:min(8vw, 56px); line-height:1.05;
  text-align:center; text-transform:uppercase; overflow-wrap:anywhere;}
.rotulo-sub{text-align:center; font-size:16px; color:var(--textDim);}
.hoja-datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); margin:0;
  border:2px solid var(--text); border-radius:var(--radius-sm);}
.hoja-datos > div{padding:var(--sp-2) var(--sp-3); border-right:1px solid var(--border); text-align:center;}
.hoja-datos > div:last-child{border-right:0;}
.hoja-datos dt{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--textDim);}
.hoja-datos dd{margin:0; font-family:var(--font-mono); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums;}
.codigo-barras{display:block; height:72px; width:auto; max-width:100%; margin:0 auto; color:var(--text);}
.codigo-barras-txt{text-align:center; font-family:var(--font-mono); font-size:13px; letter-spacing:.2em;}
.hoja-impresion .tabla{font-size:12.5px;}
/* Lineas de firma al pie de una hoja: <div class="hoja-firmas"><div>Entrega</div><div>Recibe</div></div> */
.hoja-firmas{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--sp-8); margin-top:var(--sp-10);}
.hoja-firmas > div{border-top:1px solid var(--text); padding-top:var(--sp-1); text-align:center; font-size:12px; color:var(--textDim);}
/* Copias que salen solo en papel (segunda copia, rotulo): .solo-imprimir */
.solo-imprimir{display:none;}
/* Vista de camara o foto tomada (cierre de pallet). */
.vista-camara{display:block; width:100%; max-height:300px; object-fit:contain; border-radius:var(--radius-sm);
  background:var(--surfaceAlt); border:1px solid var(--border);}
@media print{
  .no-imprimir, .aviso-breve{display:none !important;}
  .solo-imprimir{display:block;}
  .contenido:has(.hoja-impresion){padding:0; overflow:visible;}
  .hoja-impresion{border:0; border-radius:0; max-width:none; margin:0; padding:0;
    break-after:page; page-break-after:always;}
  .hoja-impresion:last-of-type{break-after:auto; page-break-after:auto;}
  .rotulo-gigante{font-size:110px;}
  .rotulo-grande{font-size:54px;}
  .hoja-impresion .tabla-marco{overflow:visible; border:0;}
}

/* Linea de tiempo (2026-10-04, ficha del pallet en Despachos): lo que le paso
   a algo, del inicio al final. El color del punto sigue la norma 4
   (.ok listo, .info en camino, .warn requiere accion, .urgente falta;
   sin clase = informativo).
   <ol class="linea-tiempo">
     <li class="ok"><span class="linea-punto">{{ icono('ok', 12) }}</span>
       <div class="linea-titulo">Pallet cerrado</div>
       <div class="linea-meta">04-10-2026 15:20 · DIEGO REYES</div>
       <div class="linea-detalle">Transportista 570 SAMEX…</div></li>
   </ol> */
.linea-tiempo{list-style:none; margin:0; padding:0;}
.linea-tiempo > li{position:relative; padding:0 0 var(--sp-5) 40px; min-height:28px;}
.linea-tiempo > li::before{content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--border);}
.linea-tiempo > li:last-child{padding-bottom:0;}
.linea-tiempo > li:last-child::before{display:none;}
.linea-punto{position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; background:var(--surfaceAlt); color:var(--textDim); border:2px solid var(--border);}
.linea-tiempo > li.ok .linea-punto{background:var(--okSoft); color:var(--ok); border-color:var(--ok);}
.linea-tiempo > li.info .linea-punto{background:var(--infoSoft); color:var(--info); border-color:var(--info);}
.linea-tiempo > li.warn .linea-punto{background:var(--warnSoft); color:var(--warn); border-color:var(--warn);}
.linea-tiempo > li.urgente .linea-punto{background:var(--urgentSoft); color:var(--urgent); border-color:var(--urgent);}
.linea-titulo{font-weight:600; font-size:14px; line-height:28px;}
.linea-meta{font-size:12px; color:var(--textDim); font-variant-numeric:tabular-nums;}
.linea-detalle{font-size:13px; margin-top:2px;}

/* Pasos de un proceso (2026-10-04): en cual va algo. .hecho = ya paso,
   .actual = el que toca ahora; sin clase = falta.
   <ol class="pasos-flujo"><li class="hecho">Registrar bultos</li><li class="actual">Cerrar</li><li>Embarcar</li></ol> */
.pasos-flujo{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2); counter-reset:paso;}
.pasos-flujo > li{counter-increment:paso; display:flex; align-items:center; gap:var(--sp-2); flex:1 1 160px;
  padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--textDim); font-size:13px; font-weight:600;}
.pasos-flujo > li::before{content:counter(paso); flex:none; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--surfaceAlt); color:var(--textDim);
  font-size:12px; border:1px solid var(--border);}
.pasos-flujo > li.hecho{color:var(--ok); border-color:var(--ok); background:var(--okSoft);}
.pasos-flujo > li.hecho::before{background:var(--ok); color:var(--surface); border-color:var(--ok);}
.pasos-flujo > li.actual{color:var(--text); border-color:var(--accent); box-shadow:0 0 0 2px var(--accentSoft);}
.pasos-flujo > li.actual::before{background:var(--accent); color:var(--accentText); border-color:var(--accent);}
.pasos-flujo.terminado > li.hecho:last-child{color:var(--info); border-color:var(--info); background:var(--infoSoft);}
.pasos-flujo.terminado > li.hecho:last-child::before{background:var(--info); border-color:var(--info);}

/* Documento de lectura (2026-10-04, manual de Despachos): texto largo con
   indice, titulos, pasos numerados y capturas con pie.
   <article class="documento">
     <nav class="documento-indice"><a href="#paso-1">1. Registrar bultos</a>…</nav>
     <section id="paso-1" class="documento-seccion"><h2>1. Registrar bultos</h2>
       <p>…</p><ol class="documento-pasos"><li>…</li></ol>
       <figure><img src="…" alt="…"><figcaption>…</figcaption></figure></section>
   </article>
   Al imprimir, cada .documento-seccion empieza en pagina nueva. */
.documento{max-width:900px; display:flex; flex-direction:column; gap:var(--sp-6); font-size:14.5px; line-height:1.6;}
.documento h2{font-family:var(--font-display); font-size:22px; margin:0 0 var(--sp-3); scroll-margin-top:var(--sp-6);}
.documento h3{font-size:16px; margin:var(--sp-4) 0 var(--sp-2);}
.documento p{margin:0 0 var(--sp-3);}
.documento ul, .documento ol{margin:0 0 var(--sp-3) var(--sp-6); padding:0;}
.documento li{margin-bottom:var(--sp-1);}
.documento-seccion{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-6);}
.documento-indice{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-1) var(--sp-4);}
.documento-indice a{color:var(--accent); font-weight:600; padding:var(--sp-1) 0;}
.documento-indice a:hover{text-decoration:underline;}
.documento-pasos{counter-reset:dpaso; list-style:none; margin-left:0 !important;}
.documento-pasos > li{counter-increment:dpaso; position:relative; padding-left:38px; margin-bottom:var(--sp-3);}
.documento-pasos > li::before{content:counter(dpaso); position:absolute; left:0; top:0; width:26px; height:26px;
  border-radius:50%; background:var(--accent); color:var(--accentText); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;}
.documento figure{margin:var(--sp-3) 0 var(--sp-4); border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; background:var(--surfaceAlt);}
.documento figure img{display:block; width:100%; height:auto;}
.documento figcaption{font-size:12.5px; color:var(--textDim); padding:var(--sp-2) var(--sp-3); background:var(--surface);
  border-top:1px solid var(--border);}
.documento kbd{font-family:var(--font-mono); font-size:12px; padding:1px 6px; border:1px solid var(--border);
  border-bottom-width:2px; border-radius:4px; background:var(--surfaceAlt);}
@media print{
  body:has(.documento){background:var(--surface);}
  .contenido:has(.documento){padding:0; overflow:visible;}
  .documento{max-width:none; gap:0; font-size:12pt;}
  .documento-seccion{border:0; padding:0; break-before:page; page-break-before:always;}
  .documento-seccion:first-of-type{break-before:auto; page-break-before:auto;}
  .documento figure{break-inside:avoid; page-break-inside:avoid;}
  .documento-indice a{color:var(--text);}
}