/* =========================================================================
   PANEL · Bloque 1 de la hoja única — Sol y Tierra
   Fase 1 de la refundación · 2026-08-13 · docs/DESIGN.md manda sobre esto.

   Hoja consolidada enlazada por los 4 HTML del panel.
   Este bloque inicial contiene los tokens validados de la Fase 1; el resto
   reúne base, componentes, utilidades y media queries de la Fase 2.

   Estado final correcto de panel/assets/css/:  fonts.css + syt-panel.css

   ARQUITECTURA (decidida por Carlitos, no se reabre):
   chrome NEGRO + contenido CLARO. El negro enmarca (menú, cabecera, barra
   móvil); el claro se lee (tarjetas, tablas, fichas). Un dato de negocio
   JAMÁS va sobre negro: Loreto mira esto durante horas en temporada alta.
   ========================================================================= */

:root{
  /* =======================================================================
     PALETA DE TRES COLORES · naranjo, blanco y negro
     -----------------------------------------------------------------------
     Decisión de Carlitos (14-ago): fuera el coral oscuro y fuera el crema.
     Solo naranjo, blanco y negro, con la referencia KTM como norte.

     El naranjo es VIVO. Y como es vivo, el texto que va ENCIMA de un relleno
     naranjo es NEGRO, no blanco: blanco sobre #ff6a13 da 2.6 y no cumple,
     negro da 8.9. Es además lo que hace la referencia. Para naranjo COMO
     TEXTO sobre blanco existe una versión oscurecida.

     Los grises que quedan son negro con transparencia —líneas y sombras—,
     no colores nuevos: la paleta sigue siendo de tres.
     ======================================================================= */
  --naranjo:            #ff6a13;  /* el naranjo. Rellenos y acentos */
  --naranjo-hover:      #ff7d33;  /* un punto más claro al pasar el mouse */
  --naranjo-texto:      #a63c00;  /* naranjo COMO TEXTO sobre blanco → 5.6 */
  --negro:              #0a0a0a;
  --blanco:             #ffffff;

  /* Puente con los nombres antiguos, para no reescribir 9.000 líneas de golpe.
     Todo lo que decía "coral" ahora apunta al naranjo que corresponde. */
  --syt-coral:          var(--naranjo);
  --syt-coral-vivo:     var(--naranjo);
  --syt-coral-texto:    var(--naranjo-texto);
  --syt-coral-relleno:  var(--naranjo);

  /* --- Chrome: lo que enmarca ------------------------------------------- */
  --panel-chrome:       #0a0a0a;
  --panel-chrome-alt:   #141414;
  --panel-chrome-t1:    #ffffff;  /* ítem activo del menú */
  --panel-chrome-t2:    #c9c9c9;  /* ítem normal */
  --panel-chrome-t3:    #9a9a9a;  /* etiqueta de grupo */
  --panel-chrome-linea: #262626;

  /* --- Contenido: lo que se lee ------------------------------------------ */
  /* Lienzo BLANCO. Ni gris ni crema: los dos se veían sucios junto a las
     tarjetas. La separación entre lienzo y tarjeta ya no la da un tono de
     fondo distinto sino la LÍNEA y la sombra, que es como resuelve la
     referencia. Tres colores, sin tonos intermedios. */
  --panel-lienzo:       #ffffff;  /* fondo del área de trabajo */
  --panel-superficie:   #ffffff;  /* tarjetas, tablas, fichas */
  --panel-tinta-1:      #0a0a0a;  /* el dato que importa · 19.8 */
  --panel-tinta-2:      #3d3d3d;  /* dato secundario · 10.9 */
  --panel-tinta-3:      #5c5c5c;  /* etiqueta, unidad, ayuda · 7.0 */
  /* La línea es NEUTRA, no cálida. Ahora carga más trabajo que antes: es ella
     (con la sombra) la que separa tarjeta de lienzo, porque ambos son blancos.
     El #e4e0dc anterior tenía tinte crema y ensuciaba el borde. */
  --panel-linea:        #dcdcdc;

  /* --- Estados: color + TEXTO siempre --------------------------------------
     Regla de negocio: un turno sobrecargado DICE su motivo en palabras.
     "Turno sobrecargado: 3 colegios en un turno de mañana (capacidad 1)".
     El color acompaña; nunca informa solo. */
  --ok-relleno:         #0f6b3d;  --ok-texto:      #0b5330;
  --alerta-relleno:     #8a5200;  --alerta-texto:  #6b4000;
  --error-relleno:      #a3231a;  --error-texto:   #8c1e16;

  /* --- Tipografía: una sola familia, League Spartan ---------------------- */
  --fuente: 'League Spartan', system-ui, -apple-system, Arial, sans-serif;

  --t-titulo:   clamp(1.6rem, 3vw, 2.2rem);
  --t-seccion:  clamp(1.25rem, 2vw, 1.6rem);
  --t-sub:      1.05rem;
  --t-cuerpo:   1rem;
  --t-cuerpo-s: 0.9rem;          /* densidad del panel */
  --t-etiqueta: 0.78rem;         /* mínimo absoluto */

  --p-titulo: 800; --p-seccion: 750; --p-sub: 700;
  --p-cuerpo: 450; --p-etiqueta: 700; --p-cifra: 700;

  --i-titulo: 1.10; --i-media: 1.20; --i-lectura: 1.60; --i-densa: 1.45;
  --l-titulo: -.03em; --l-etiqueta: .06em; --l-cifra: -.02em;

  --medida: 68ch;

  /* --- Espaciado: ritmo 4/8 ---------------------------------------------- */
  --e-1:4px; --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;

  /* --- Radios ------------------------------------------------------------ */
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:24px; --r-full:999px;

  /* --- Sombras ----------------------------------------------------------- */
  --s-1: 0 1px 2px rgba(7,7,7,.06), 0 2px 8px -4px rgba(7,7,7,.10);
  --s-2: 0 4px 12px -4px rgba(7,7,7,.12), 0 12px 32px -16px rgba(7,7,7,.18);
  --s-3: 0 12px 32px -12px rgba(7,7,7,.20), 0 32px 72px -40px rgba(7,7,7,.36);

  /* --- Movimiento: nada supera 300 ms ------------------------------------
     Loreto usa esto a toda velocidad un 4 de septiembre. */
  --curva: cubic-bezier(.22, 1, .36, 1);
  --t-1: 150ms; --t-2: 220ms; --t-3: 300ms;

  /* --- Táctil ------------------------------------------------------------ */
  --toque: 44px;
  --input-movil: 16px;           /* por debajo, iOS hace zoom al enfocar */
}



/* Las cifras de dinero y cantidades alinean en columna. */
:root{ --cifra-numeric: tabular-nums; }



/* =========================================================================
   CONSOLIDACIÓN FASE 2 · reglas base y componentes
   Cada selector exacto aparece una sola vez por contexto responsive.
   ========================================================================= */

@layer legacy{

body[data-page="desk"] *{
  box-sizing: border-box;
}

body[data-page="desk"] header h1{
  font-size: 1.05rem;
  margin: 0;
  font-weight: 800;
}

body[data-page="desk"] header h1 span{
  color: var(--coral);
}

body[data-page="desk"] .conn{
  font-size: .76rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

body[data-page="desk"] .dot{
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--soft);
}

body[data-page="desk"] .dot.on{
  background: var(--ok);
}

body[data-page="desk"] .spacer{
  flex: 1;
}

body[data-page="desk"] .switch{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}

body[data-page="desk"] .toggle{
  width: 46px;
  height: 26px;
  border-radius: 99px;
  background: var(--line-2);
  border: 0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}

body[data-page="desk"] .toggle::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  background: var(--panel-superficie);
  transition: left .2s;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--panel-chrome) 20%, transparent);
}

body[data-page="desk"] .toggle[aria-pressed="true"]{
  background: var(--ok);
}

body[data-page="desk"] .toggle[aria-pressed="true"]::after{
  left: 23px;
}

body[data-page="desk"] main{
  flex: 1;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 0;
}

body[data-page="desk"] .list{
  border-right: 1px solid var(--line);
  background: var(--panel-superficie);
  overflow-y: auto;
}

body[data-page="desk"] .list-empty{
  padding: 24px 18px;
  color: var(--soft);
  font-size: .86rem;
}

body[data-page="desk"] .sesion{
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body[data-page="desk"] .sesion:hover{
  background: var(--bg);
}

body[data-page="desk"] .sesion .n{
  font-weight: 700;
  font-size: .92rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body[data-page="desk"] .sesion .u{
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="desk"] .badge{
  background: var(--coral);
  color: var(--panel-chrome-t1);
  font-size: .68rem;
  font-weight: 800;
  border-radius: 99px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
}

body[data-page="desk"] .estado{
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--soft);
}

body[data-page="desk"] .estado.conectado{
  color: var(--ok);
}

body[data-page="desk"] .chat{
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

body[data-page="desk"] .chat-head{
  padding: 12px 18px;
  background: var(--panel-superficie);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-page="desk"] .chat-head strong{
  font-size: .98rem;
}

body[data-page="desk"] .chat-head button{
  margin-left: auto;
  border: 1px solid var(--line-2);
  background: var(--panel-superficie);
  border-radius: 9px;
  padding: 7px 12px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

body[data-page="desk"] .chat-head button:hover{
  border-color: var(--coral);
  color: var(--coral);
}

body[data-page="desk"] .msgs{
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

body[data-page="desk"] .m{
  max-width: 72%;
  padding: 9px 13px;
  border-radius: 15px;
  font-size: .9rem;
  line-height: 1.4;
}

body[data-page="desk"] .m.sys{
  align-self: center;
  background: transparent;
  color: var(--soft);
  font-size: .78rem;
  font-style: italic;
}

body[data-page="desk"] .composer{
  display: flex;
  gap: 9px;
  padding: 12px 16px;
  background: var(--panel-superficie);
  border-top: 1px solid var(--line);
}

body[data-page="desk"] .composer input{
  flex: 1;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  padding: 0 16px;
  font-size: .92rem;
  font-family: var(--font);
}

body[data-page="desk"] .composer input:focus{
  outline: 2px solid var(--coral);
  outline-offset: 1px;
  border-color: var(--coral);
}

body[data-page="desk"] .composer button{
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 99px;
  background: var(--coral);
  color: var(--panel-chrome-t1);
  cursor: pointer;
  font-size: 1.1rem;
}

body[data-page="desk"] .composer button:disabled{
  opacity: .5;
  cursor: default;
}

body[data-page="desk"] .placeholder{
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--soft);
  font-size: .9rem;
  text-align: center;
  padding: 24px;
}

body[data-page="desk"]{
  --coral: var(--syt-coral-vivo);
  --link: var(--syt-coral);
  --ink: var(--panel-tinta-1);
  --muted: var(--panel-tinta-3);
  --soft: var(--panel-chrome-t3);
  --line: var(--panel-linea);
  --line-2: var(--panel-linea);
  --bg: var(--panel-lienzo);
  --ok: var(--ok-relleno);
  --font: 'League Spartan',system-ui,-apple-system,sans-serif;
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body[data-page="desk"] header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--panel-superficie);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--panel-chrome-alt) 4%, transparent);
}

body[data-page="desk"] .sesion.active{
  background: var(--panel-lienzo);
  border-left: 3px solid var(--coral);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 60%, transparent);
}

body[data-page="desk"] .m.operador{
  align-self: flex-end;
  background: var(--coral);
  color: var(--panel-chrome-t1);
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 22%, transparent),0 8px 18px -8px color-mix(in srgb, var(--syt-coral-vivo) 28%, transparent);
}

body[data-page="desk"] .m.cliente{
  align-self: flex-start;
  background: var(--panel-superficie);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 70%, transparent),0 6px 14px -8px color-mix(in srgb, var(--panel-chrome-alt) 10%, transparent);
}

body[data-page="disponibilidad"]{
  font-family: system-ui;
  padding: 40px;
  text-align: center;
  color: var(--panel-tinta-2);
}

body[data-page="ficha-online"] *{
  box-sizing: border-box;
}

body[data-page="ficha-online"]{
  --blanco: var(--panel-chrome-t1);
  --soft: var(--panel-lienzo);
  --line: var(--panel-linea);
  --line2: var(--panel-linea);
  --texto: var(--panel-chrome-alt);
  --texto-2: var(--panel-tinta-3);
  --texto-3: var(--panel-chrome-t3);
  --lima: var(--panel-chrome-t3);
  --verde: var(--panel-tinta-3);
  --oro: var(--syt-coral-vivo);
  --naranja: var(--syt-coral-vivo);
  --coral: var(--syt-coral-vivo);
  --frambuesa: var(--syt-coral-vivo);
  --ink: var(--syt-coral);
  --ok: var(--ok-relleno);
  --alerta: var(--syt-coral-vivo);
  --wsp: var(--ok-relleno);
  /* El degradado arrancaba en GRIS y terminaba en naranjo: mezclado daba ese
     tono turbio que había que eliminar. Con tres colores un degradado de un
     solo color no aporta nada, así que es naranjo plano de punta a punta. */
  --grad: linear-gradient(125deg,var(--naranjo) 0%,var(--naranjo-hover) 100%);
  --ok-soft: var(--panel-lienzo);
  --warn-soft: var(--panel-lienzo);
  --bad-soft: var(--panel-lienzo);
  --coral-soft: var(--panel-lienzo);
  --card: var(--panel-chrome-t1);
  --r: 13px;
  --r-lg: 22px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--panel-chrome-alt) 4%, transparent),0 12px 34px color-mix(in srgb, var(--panel-chrome-alt) 7%, transparent);
  --ease: cubic-bezier(0.34,1.35,0.64,1);
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: 'League Spartan',system-ui,sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

body[data-page="ficha-online"] button, body[data-page="ficha-online"] input, body[data-page="ficha-online"] select{
  font: inherit;
}

body[data-page="ficha-online"] button{
  cursor: pointer;
}

body[data-page="ficha-online"] .shell{
  min-height: 100vh;
  background: linear-gradient(180deg,var(--panel-superficie) 0%,var(--panel-superficie) 58%,var(--panel-lienzo) 100%);
}

body[data-page="ficha-online"] .topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--panel-superficie) 94%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

body[data-page="ficha-online"] .topbar-in{
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-page="ficha-online"] .brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-family: 'League Spartan';
  font-weight: 700;
}

body[data-page="ficha-online"] .brand img{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--syt-coral-vivo) 18%, transparent);
}

body[data-page="ficha-online"] .brand span{
  white-space: nowrap;
}

body[data-page="ficha-online"] .save-state{
  margin-left: auto;
  color: var(--texto-2);
  font-size: .78rem;
  white-space: nowrap;
}

body[data-page="ficha-online"] .wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 14px 110px;
}

body[data-page="ficha-online"] .hero{
  display: grid;
  gap: 12px;
  margin: 10px 0 18px;
}

body[data-page="ficha-online"] .title{
  font-family: 'League Spartan';
  font-size: clamp(1.5rem,1rem + 2vw,2.35rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-page="ficha-online"] .meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--texto-2);
}

body[data-page="ficha-online"] .pill{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--soft);
  font-size: .78rem;
  font-weight: 800;
  color: var(--texto-2);
}

body[data-page="ficha-online"] .pill.ok{
  background: var(--ok-soft);
  color: var(--ok);
}

body[data-page="ficha-online"] .pill.warn{
  background: var(--warn-soft);
  color: var(--alerta-relleno);
}

body[data-page="ficha-online"] .pill.bad{
  background: var(--bad-soft);
  color: var(--alerta);
}

body[data-page="ficha-online"] .notice{
  display: none;
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--r);
  padding: 12px 14px;
  background: var(--panel-superficie);
  font-size: .9rem;
  color: var(--texto-2);
}

body[data-page="ficha-online"] .notice.on{
  display: block;
}

body[data-page="ficha-online"] .grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

body[data-page="ficha-online"] .panel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

body[data-page="ficha-online"] .panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

body[data-page="ficha-online"] .panel h2{
  margin: 0;
  font-family: 'League Spartan';
  font-size: 1.05rem;
  letter-spacing: 0;
  font-weight: 700;
}

body[data-page="ficha-online"] .panel-sub{
  margin-top: 2px;
  color: var(--texto-2);
  font-size: .82rem;
}

body[data-page="ficha-online"] .rows{
  display: grid;
  gap: 10px;
  padding: 12px;
}

body[data-page="ficha-online"] .person{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-superficie);
}

body[data-page="ficha-online"] .n{
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--soft);
  display: grid;
  place-items: center;
  font-family: 'League Spartan';
  font-weight: 700;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

body[data-page="ficha-online"] .fields{
  display: grid;
  gap: 10px;
}

body[data-page="ficha-online"] .field label{
  display: block;
  margin-bottom: 5px;
  color: var(--texto-2);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body[data-page="ficha-online"] .field input, body[data-page="ficha-online"] .field select{
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line2);
  border-radius: 11px;
  background: var(--panel-superficie);
  color: var(--texto);
  padding: 0 11px;
  outline: none;
}

body[data-page="ficha-online"] .field input:focus, body[data-page="ficha-online"] .field select:focus{
  border-color: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent);
}

body[data-page="ficha-online"] .stock-note{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: .75rem;
  color: var(--texto-3);
}

body[data-page="ficha-online"] .stock-note b{
  font-family: 'League Spartan';
  font-weight: 700;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

body[data-page="ficha-online"] .stock-note.over b, body[data-page="ficha-online"] .stock-note.over{
  color: var(--alerta);
}

body[data-page="ficha-online"] .row-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

body[data-page="ficha-online"] .icon-btn{
  min-height: 38px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--soft);
  color: var(--texto-2);
  font-weight: 800;
  padding: 0 12px;
}

body[data-page="ficha-online"] .icon-btn:hover{
  background: var(--bad-soft);
  border-color: var(--alerta);
  color: var(--alerta);
}

body[data-page="ficha-online"] .add{
  height: 40px;
  border: 1px solid var(--line2);
  background: var(--soft);
  border-radius: 11px;
  padding: 0 14px;
  font-weight: 800;
  color: var(--texto);
}

body[data-page="ficha-online"] .add:hover{
  background: var(--coral-soft);
  border-color: var(--coral);
  color: var(--ink);
}

body[data-page="ficha-online"] .summary{
  display: grid;
  gap: 10px;
  padding: 14px;
}

body[data-page="ficha-online"] .summary-row{
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: var(--panel-superficie);
}

body[data-page="ficha-online"] .summary-row.over{
  border-color: var(--alerta);
  background: var(--bad-soft);
}

body[data-page="ficha-online"] .summary-title{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .82rem;
  font-weight: 800;
}

body[data-page="ficha-online"] .summary-title span:last-child{
  font-family: 'League Spartan';
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

body[data-page="ficha-online"] .bar{
  height: 8px;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}

body[data-page="ficha-online"] .bar i{
  display: block;
  height: 100%;
  width: 0;
  background: var(--ok);
  border-radius: 999px;
  transition: width .25s var(--ease),background .25s;
}

body[data-page="ficha-online"] .summary-row.warn .bar i{
  background: var(--naranja);
}

body[data-page="ficha-online"] .summary-row.over .bar i{
  background: var(--alerta);
}

body[data-page="ficha-online"] .empty{
  padding: 16px;
  color: var(--texto-2);
  font-size: .9rem;
}

body[data-page="ficha-online"] .actions{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--panel-superficie) 94%, transparent);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  padding: 10px 14px;
}

body[data-page="ficha-online"] .actions-in{
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-page="ficha-online"] .btn{
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--panel-superficie);
  color: var(--texto);
  font-weight: 800;
  padding: 0 16px;
}

body[data-page="ficha-online"] .btn.primary{
  background: var(--coral);
  border-color: var(--coral);
  color: var(--panel-chrome-t1);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--syt-coral-vivo) 22%, transparent);
}

body[data-page="ficha-online"] .btn.primary:disabled{
  background: var(--panel-linea);
  border-color: var(--panel-linea);
  color: var(--panel-chrome-t3);
  box-shadow: none;
  cursor: not-allowed;
}

body[data-page="ficha-online"] .btn.wsp{
  display: none;
  background: var(--wsp);
  border-color: var(--wsp);
  color: var(--ok-texto);
}

body[data-page="ficha-online"] .btn.wsp.on{
  display: block;
}

body[data-page="ficha-online"] .toast{
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  background: var(--panel-chrome-alt);
  color: var(--panel-chrome-t1);
  border-radius: 12px;
  padding: 11px 16px;
  font-weight: 800;
  font-size: .86rem;
  z-index: 60;
  transition: all .25s var(--ease);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--panel-chrome) 24%, transparent);
}

body[data-page="ficha-online"] .toast.on{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body[data-page="ficha-online"] .loading, body[data-page="ficha-online"] .error{
  min-height: 54vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--texto-2);
  padding: 24px;
}

body[data-page="ficha-online"] .spinner{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--coral);
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

body[data-page="ficha-online"] .hidden{
  display: none;
}

html:has(body[data-page="ficha-online"]), body[data-page="ficha-online"], body[data-page="ficha-online"] *{
  font-family: 'League Spartan',system-ui,sans-serif;
}

body[data-page="ficha-online"], body[data-page="ficha-online"] .shell, body[data-page="ficha-online"] .panel, body[data-page="ficha-online"] .stock-note{
  background: var(--panel-superficie);
  background-image: none;
}

body[data-page="ficha-online"] .brand-mark, body[data-page="ficha-online"] .n{
  background: var(--panel-tinta-1);
  background-image: none;
  color: var(--panel-chrome-t1);
}

body[data-page="ficha-online"] .grad-text{
  font-weight: 700;
  background: none;
  background-image: none;
  color: var(--panel-chrome-t1);
  -webkit-text-fill-color: currentColor;
}

body[data-page="ficha-online"] .topbar, body[data-page="ficha-online"] .panel-head, body[data-page="ficha-online"] .notice, body[data-page="ficha-online"] .actions, body[data-page="ficha-online"] .person, body[data-page="ficha-online"] .summary-row{
  background-image: none;
}

body[data-page="index"] h1, body[data-page="index"] h2, body[data-page="index"] h3{
  font-family: 'League Spartan',sans-serif;
  letter-spacing: -.02em;
}

body[data-page="index"] .mono{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
}

body[data-page="index"] button{
  font: inherit;
  cursor: pointer;
}

body[data-page="index"] .grad-text{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.05;
}

body[data-page="index"] .side:before{
  content: "";
  height: 4px;
  border-radius: 999px;
  background: var(--grad);
  margin: 0 8px 18px;
}

body[data-page="index"] .brand{
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: 1.1rem;
  padding: 6px 8px 18px;
  color: var(--text);
}

body[data-page="index"] .brand img{
  height: 32px;
  width: auto;
}

body[data-page="index"] .main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body[data-page="index"] .ops-pill{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--naranja-soft);
  color: var(--naranja-ink);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Carlitos, 04-sep: «escribo una letra y salta al tiro abajo». El buscador
   ahora vive dentro de un contenedor propio -`.search-wrap`, con
   `position:relative`- para poder colgarle debajo el cuadradito de
   sugerencias sin que nada de la página se mueva mientras se escribe. */
body[data-page="index"] .search-wrap{
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 320px;
}
body[data-page="index"] .search{
  width: 100%;
  min-height: 44px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 14px;
  color: var(--text2);
  font-size: .88rem;
  outline: none;
  transition: border-color .25s,background .25s;
}

body[data-page="index"] .search:focus{
  border-color: var(--naranja);
  background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent);
}

body[data-page="index"] .buscar-sugerencias{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  /* La caja cuelga de la barra superior, que es OSCURA. Sin fijar tinta aquí,
     el nombre del colegio heredaba el color claro del chrome y quedaba blanco
     sobre la tarjeta blanca: solo se veía la segunda línea, que sí fija color.
     El colegio es el dato que importa, así que va con la tinta más fuerte. */
  color: var(--panel-tinta-1);
  /* Y no puede encogerse con la barra: con el buscador estrecho el nombre del
     colegio no cabía en una línea legible. */
  min-width: 280px;
  z-index: 40;
  max-height: 340px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.35);
  padding: 6px;
}
body[data-page="index"] .buscar-fila{
  display: block;
  width: 100%;
  color: var(--panel-tinta-1);
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
body[data-page="index"] .buscar-fila b{ display: block; font-size: .86rem; color: var(--panel-tinta-1); font-weight: 700; }
body[data-page="index"] .buscar-fila small{ display: block; color: var(--text2); font-size: .74rem; margin-top: 1px; }
body[data-page="index"] .buscar-fila:hover,
body[data-page="index"] .buscar-fila.on{ background: var(--soft); }
body[data-page="index"] .buscar-vacio{ margin: 0; padding: 10px; font-size: .82rem; color: var(--text2); }

body[data-page="index"] .top .right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-page="index"] .mes{
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
}

body[data-page="index"] .view.active{
  display: block;
  animation: f .4s var(--spring);
}

body[data-page="index"] .vh{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

body[data-page="index"] .h1{
  font-size: clamp(1.5rem,1rem+1.8vw,2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

body[data-page="index"] .sub{
  color: var(--text2);
  font-size: .92rem;
  margin-top: 3px;
}

body[data-page="index"] .btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  border-radius: 11px;
  font-weight: 700;
  font-size: .88rem;
  border: 1.5px solid var(--line2);
  background: var(--card);
  color: var(--text);
  transition: all .25s var(--spring);
}

body[data-page="index"] .btn:hover{
  background: var(--soft);
  transform: translateY(-1px);
}

body[data-page="index"] .btn.pri:hover{
  background: var(--naranja-ink);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--syt-coral) 30%, transparent);
}

body[data-page="index"] .btn.gh{
  border-color: transparent;
  background: transparent;
  color: var(--text2);
}

body[data-page="index"] .btn.gh:hover{
  background: var(--soft);
  color: var(--text);
}

body[data-page="index"] .kpi.acc{
  border-top: 3px solid var(--naranja);
}

body[data-page="index"] .kpi.acc::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad);
}

body[data-page="index"] .kpi .l{
  color: var(--text2);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

body[data-page="index"] .kpi .v.red{
  color: var(--red);
}

body[data-page="index"] .kpi .v.ok{
  color: var(--ok);
}

body[data-page="index"] .card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  overflow: hidden;
}

body[data-page="index"] table{
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

body[data-page="index"] th{
  --tw-text-opacity: 1;
  text-align: left;
  color: var(--text2);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card-hover);
}

body[data-page="index"] td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

body[data-page="index"] tbody tr{
  cursor: pointer;
  transition: background .2s;
}

body[data-page="index"] tbody tr:nth-child(even){
  background: var(--soft);
}

body[data-page="index"] tbody tr:nth-child(even):hover{
  background: var(--card-hover);
}

body[data-page="index"] td.num{
  font-family: 'League Spartan';
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body[data-page="index"] .s0{
  color: var(--ok);
  font-family: 'League Spartan';
  text-align: right;
  font-weight: 600;
}

body[data-page="index"] .sx{
  color: var(--red);
  font-family: 'League Spartan';
  text-align: right;
  font-weight: 700;
}

body[data-page="index"] .ch-naranja{
  background: var(--naranja-soft);
  color: var(--naranja-ink);
}

body[data-page="index"] .ch-ok{
  background: var(--ok-soft);
  color: var(--ok);
}

body[data-page="index"] .ch-gray{
  background: var(--gray-soft);
  color: var(--text2);
}

body[data-page="index"] .ch-red{
  background: var(--red-soft);
  color: var(--red);
}

body[data-page="index"] .cdot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px var(--card);
}

body[data-page="index"] .day{
  padding: 18px 20px;
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  transition: background .3s;
}

body[data-page="index"] .day:nth-child(odd){
  background: var(--card);
  border: 1px solid var(--line2);
}

body[data-page="index"] .day:nth-child(even){
  background: var(--soft);
  border: 1px solid var(--line2);
}

body[data-page="index"] .slot{
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--naranja);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--sh);
  cursor: pointer;
  transition: all .3s var(--spring);
}

body[data-page="index"] .slot:nth-child(even){
  background: var(--soft);
}

body[data-page="index"] .slot b{
  font-size: .96rem;
}

body[data-page="index"] .slot .m{
  color: var(--text2);
  font-size: .84rem;
  margin: 3px 0;
}

body[data-page="index"] .slot .hr{
  font-size: .82rem;
  color: var(--text2);
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="index"] .slot .hr b{
  font-family: 'League Spartan';
  color: var(--text);
}

body[data-page="index"] .fgrid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

body[data-page="index"] .box{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 85%, transparent),0 1px 2px color-mix(in srgb, var(--panel-chrome-alt) 4%, transparent),0 14px 32px -16px color-mix(in srgb, var(--panel-chrome-alt) 14%, transparent);
  margin-bottom: 16px;
}

body[data-page="index"] .box h3{
  font-size: 1.05rem;
  margin-bottom: 14px;
  font-weight: 800;
}

/* Carlitos, 04-sep: el botón "Imprimir varios" de Documentos -metido crudo
   dentro del <h3>, se veía apretado contra el texto. Encabezado propio, con
   el título a la izquierda y el botón a la derecha. */
body[data-page="index"] .box-documentos-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body[data-page="index"] .box-documentos-head h3{ margin-bottom: 0; }

body[data-page="index"] .box-datos{
  border-top: 3px solid var(--panel-chrome-t3);
}

body[data-page="index"] .box-plata{
  border-top: 3px solid var(--ok-relleno);
}

body[data-page="index"] .box-docs{
  border-top: 3px solid var(--naranja);
}

body[data-page="index"] .box-online{
  border-top: 3px solid var(--naranja);
}

body[data-page="index"] .online-url{
  font-family: 'League Spartan';
  font-size: .72rem;
  color: var(--text2);
  word-break: break-all;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  margin-top: 10px;
}

body[data-page="index"] .dl{
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  border-bottom-color: var(--line);
}

body[data-page="index"] .dl:last-child{
  border: 0;
}

body[data-page="index"] .dl .k{
  color: var(--text2);
}

body[data-page="index"] .dl .v{
  font-weight: 600;
}

body[data-page="index"] .dl .v.mono{
  font-family: 'League Spartan';
  font-variant-numeric: tabular-nums;
}

body[data-page="index"] .res-section{
  margin-bottom: 28px;
}

body[data-page="index"] .res-section-title{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}

body[data-page="index"] .res-section-title::before{
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: var(--grad);
}

body[data-page="index"] .alert-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}

body[data-page="index"] .fi{
  opacity: 0;
  animation: fadeInUp .5s var(--spring) forwards;
}

body[data-page="index"] .act{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-page="index"] .hrow:nth-child(even){
  background: var(--soft);
}

body[data-page="index"] .ov{
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--panel-chrome) 25%, transparent);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
  animation: fadeOv .3s ease;
}

body[data-page="index"] .ov.on{
  display: flex;
}

body[data-page="index"] .modal{
  background: var(--card);
  border-radius: var(--r-xl);
  max-width: 580px;
  width: 100%;
  padding: 28px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--panel-chrome-alt) 30%, transparent);
  animation: pop .4s var(--spring);
}

body[data-page="index"] .modal h3{
  font-size: 1.25rem;
  margin-bottom: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

body[data-page="index"] .frm{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

body[data-page="index"] .frm label{
  font-size: .76rem;
  font-weight: 700;
  color: var(--text2);
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body[data-page="index"] .frm input, body[data-page="index"] .frm select{
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line2);
  border-radius: 11px;
  font: inherit;
  outline: none;
  background: var(--soft);
  color: var(--text);
  transition: border-color .2s,box-shadow .2s;
}

body[data-page="index"] .frm input:focus, body[data-page="index"] .frm select:focus{
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent);
}

body[data-page="index"] .frm .full{
  grid-column: 1/3;
}

body[data-page="index"] .mfoot{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

body[data-page="index"] .toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--panel-chrome-t1);
  padding: 12px 20px;
  border-radius: 11px;
  font-weight: 600;
  font-size: .9rem;
  opacity: 0;
  transition: all .3s var(--spring);
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--panel-chrome-alt) 30%, transparent);
}

body[data-page="index"] .toast.on{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body[data-page="index"] .mobile-nav{
  display: none;
}

body[data-page="index"] [id="chatFab"]{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 60px;
  height: 60px;
  border: none;
  /* Relleno naranjo plano con letra NEGRA. Antes era el degradado `--grad`
     (que arrancaba en gris) con letra blanca: 2.87 de contraste y aspecto
     sucio, justo lo que había que sacar. */
  background: var(--naranjo);
  color: var(--negro);
  font-size: 1.6rem;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--naranjo) 40%, transparent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .3s var(--spring);
  border-radius: 50%;
}

body[data-page="index"] [id="chatFab"]:hover{
  transform: translateY(-3px) scale(1.05);
}

body[data-page="index"] [id="chatWin"]{
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 71;
  width: 388px;
  max-width: calc(100vw - 28px);
  height: 580px;
  max-height: calc(100vh - 130px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 70px color-mix(in srgb, var(--panel-chrome-alt) 26%, transparent);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: pop .35s var(--spring);
}

body[data-page="index"] [id="chatWin"].on{
  display: flex;
}

body[data-page="index"] .chat-h{
  background: var(--grad);
  color: var(--panel-chrome-t1);
  padding: 14px 18px;
  font-family: 'League Spartan';
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

body[data-page="index"] .chat-h small{
  font-weight: 600;
  opacity: .9;
  font-size: .64rem;
  font-family: 'League Spartan';
  background: color-mix(in srgb, var(--panel-superficie) 18%, transparent);
  padding: 3px 7px;
  border-radius: 6px;
}

body[data-page="index"] .chat-h .x{
  margin-left: auto;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: color-mix(in srgb, var(--panel-superficie) 22%, transparent);
  border: 0;
  padding: 0;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  transition: background .2s;
}

body[data-page="index"] .chat-h .x:hover{
  background: color-mix(in srgb, var(--panel-superficie) 32%, transparent);
}

body[data-page="index"] .chat-body{
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--soft);
}

body[data-page="index"] .msg{
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .88rem;
  white-space: pre-wrap;
  line-height: 1.5;
  animation: msgIn .3s var(--spring);
}

body[data-page="index"] .msg.u{
  align-self: flex-end;
  background: var(--naranja);
  color: var(--panel-chrome-t1);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent);
}

body[data-page="index"] .msg.b{
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

body[data-page="index"] .msg.typing{
  color: var(--text3);
  font-style: italic;
}

body[data-page="index"] .msg .act{
  margin-top: 8px;
}

body[data-page="index"] .chat-sug{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: var(--soft);
  border-top: 1px solid var(--line);
}

body[data-page="index"] .chat-sug button{
  font-size: .72rem;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--card);
  color: var(--text2);
  font-weight: 600;
  transition: all .2s;
}

body[data-page="index"] .chat-sug button:hover{
  background: var(--naranja-soft);
  color: var(--naranja-ink);
  border-color: var(--naranja);
}

body[data-page="index"] .chat-in{
  display: flex;
  gap: 7px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--card);
  align-items: center;
}

body[data-page="index"] .chat-in input[type=text]{
  flex: 1;
  height: 42px;
  border: 1px solid var(--line2);
  border-radius: 11px;
  padding: 0 12px;
  font: inherit;
  outline: none;
  transition: border-color .2s,box-shadow .2s;
}

body[data-page="index"] .chat-in input[type=text]:focus{
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent);
}

body[data-page="index"] .chat-in .ic{
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid var(--line2);
  background: var(--card);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all .2s;
}

body[data-page="index"] .chat-in .ic:hover{
  background: var(--soft);
}

body[data-page="index"] .chat-in .snd{
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--panel-chrome-t1);
  font-weight: 800;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--syt-coral-vivo) 22%, transparent);
}

body[data-page="index"] .chat-in .snd:hover{
  background: var(--naranja-ink);
}

body[data-page="index"] .disp-empty{
  text-align: center;
  color: var(--text3);
  padding: 20px;
  font-size: .85rem;
}

body[data-page="index"] .ftl-resumen-box{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 18px;
  box-shadow: var(--sh-sm);
}

body[data-page="index"] .ftl-resumen-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="index"] .ftl-resumen-head .ftl-color-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: .92rem;
  color: var(--text);
}

body[data-page="index"] .ftl-resumen-head .ftl-color-tag .dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--soft);
}

body[data-page="index"] .ftl-resumen-head .ftl-total-tag{
  font-family: 'League Spartan',sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--naranja-ink);
  background: var(--naranja-soft);
  padding: 4px 12px;
  border-radius: 9px;
}

body[data-page="index"] .ftl-resumen-table{
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: .82rem;
}

body[data-page="index"] .ftl-resumen-table th{
  font-weight: 700;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text3);
  padding: 8px 10px;
  text-align: center;
  border-bottom: 2px solid var(--line);
}

body[data-page="index"] .ftl-resumen-table th:first-child{
  text-align: left;
}

body[data-page="index"] .ftl-resumen-table td{
  text-align: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-family: 'League Spartan',sans-serif;
  font-weight: 600;
}

body[data-page="index"] .ftl-resumen-table td:first-child{
  text-align: left;
  font-family: 'League Spartan';
  font-weight: 700;
  color: var(--text2);
  font-size: .78rem;
}

body[data-page="index"] .ftl-resumen-table .ftl-rt-total{
  background: var(--soft);
  font-weight: 800;
}

body[data-page="index"] .ftl-resumen-table .ftl-rt-total td{
  border-bottom: none;
  border-top: 2px solid var(--line);
}

body[data-page="index"] .ftl-resumen-table .cero{
  color: var(--text3);
  opacity: .4;
}

body[data-page="index"] .ftl-resumen-split{
  display: flex;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}

body[data-page="index"] .ftl-resumen-split .ftl-split-card{
  flex: 1;
  min-width: 140px;
  background: var(--soft);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
}

body[data-page="index"] .ftl-resumen-split .ftl-split-card .lbl{
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  font-weight: 800;
  margin-bottom: 4px;
}

body[data-page="index"] .ftl-resumen-split .ftl-split-card .val{
  font-family: 'League Spartan',sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
}

body[data-page="index"] .ftl-resumen-split .ftl-split-card.men .val{
  color: var(--panel-chrome-t3);
}

body[data-page="index"] .ftl-resumen-split .ftl-split-card.women .val{
  color: var(--syt-coral);
}

body[data-page="index"] .ftl-seccion{
  margin-bottom: 18px;
}

body[data-page="index"] .ftl-titulo{
  font-weight: 800;
  font-size: .84rem;
  margin-bottom: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-page="index"] .ftl-titulo .ftl-count{
  font-family: 'League Spartan',sans-serif;
  font-size: .72rem;
  font-weight: 700;
  background: var(--soft);
  color: var(--text3);
  padding: 2px 8px;
  border-radius: 7px;
}

body[data-page="index"] .ftl-nombre{
  text-align: left;
  font-family: 'League Spartan';
  font-weight: 600;
  color: var(--text);
}

body[data-page="index"] .ftl-tbl-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--line);
}

body[data-page="index"] .ftl-tbl-wrap .disp-tbl{
  min-width: 400px;
}

body[data-page="index"] .ftl-tbl-wrap .disp-tbl td{
  font-size: .82rem;
  padding: 10px 12px;
}

body[data-page="index"] .ftl-tbl-wrap .disp-tbl th{
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text3);
  font-weight: 700;
  padding: 8px 12px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

body[data-page="index"] .ftl-tbl-wrap .disp-tbl tbody tr{
  transition: background .15s;
}

body[data-page="index"] .ftl-tbl-wrap .disp-tbl tbody tr:hover{
  background: var(--soft);
}

body[data-page="index"] .ftl-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

body[data-page="index"] .ftl-head .eyebrow{
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  font-weight: 800;
}

body[data-page="index"] .ftl-head h3{
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 2px;
}

body[data-page="index"] .ftl-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

body[data-page="index"] .ftl-wrap{
  max-width: 900px;
  margin: 0 auto;
}

body[data-page="index"] .ftl-box{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--sh-sm);
}

body[data-page="index"] .ftl-resumen-line{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

body[data-page="index"] .ftl-resumen-line strong{
  font-weight: 800;
  font-size: .92rem;
  color: var(--text);
}

body[data-page="index"] .ftl-resumen-line span{
  font-size: .82rem;
  color: var(--text3);
}

body[data-page="index"] .inv-banner{
  background: var(--naranja-soft);
  border: 1px solid var(--naranja);
  color: var(--naranja-ink);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 14px;
}

body[data-page="index"] .inv-toolbar{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

body[data-page="index"] .inv-toolbar input, body[data-page="index"] .inv-toolbar button, body[data-page="index"] .inv-toolbar select{
  margin: 0;
}

/* Selector explícito para la lectura operativa: un día sin color no responde
   cuánto queda realmente para preparar el siguiente colegio. */
body[data-page="index"] .inv-color-select{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--text2);
  font-size: .74rem;
  font-weight: 800;
}
body[data-page="index"] .inv-color-select select{
  min-height: 34px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: 0 22px 0 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
body[data-page="index"] .inv-color-select:focus-within{
  outline: 3px solid color-mix(in srgb, var(--naranja) 28%, transparent);
  outline-offset: 2px;
}

body[data-page="index"] .inv-dia-guia{
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--naranja) 35%, var(--line));
  border-left: 4px solid var(--naranja);
  border-radius: 9px;
  background: color-mix(in srgb, var(--naranja) 7%, var(--panel-superficie));
  color: var(--text2);
  font-size: .8rem;
  line-height: 1.45;
}
body[data-page="index"] .inv-dia-guia b{ color: var(--text); }

/* Documentos generales en el inicio: cada tarjeta es un enlace de descarga
   directo, no un botón que abra una ventana o necesite JavaScript adicional. */
body[data-page="index"] .ini-documentos{
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--sh-sm);
}
body[data-page="index"] .ini-documentos-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}
body[data-page="index"] .ini-documentos-head h2{
  margin: 3px 0 0;
  font-size: 1rem;
}
body[data-page="index"] .ini-documentos-head p{
  max-width: 32rem;
  margin: 0;
  color: var(--text2);
  font-size: .8rem;
  line-height: 1.4;
}
body[data-page="index"] .ini-documentos-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body[data-page="index"] .ini-documento{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 146px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-superficie);
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body[data-page="index"] .ini-documento:hover{
  border-color: var(--naranja);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}
body[data-page="index"] .ini-documento:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--naranja) 35%, transparent);
  outline-offset: 3px;
}
body[data-page="index"] .ini-documento-tipo{
  color: var(--naranja-ink);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
}
body[data-page="index"] .ini-documento strong{
  margin-top: 7px;
  font-size: .9rem;
}
body[data-page="index"] .ini-documento small{
  margin-top: 4px;
  color: var(--text2);
  font-size: .75rem;
  line-height: 1.35;
}
body[data-page="index"] .ini-documento b{
  margin-top: auto;
  padding-top: 13px;
  color: var(--naranja-ink);
  font-size: .8rem;
}
@media (max-width: 680px){
  body[data-page="index"] .ini-documentos{ padding: 14px; }
  body[data-page="index"] .ini-documentos-head{ align-items: flex-start; flex-direction: column; gap: 7px; }
  body[data-page="index"] .ini-documentos-grid{ grid-template-columns: 1fr; }
  body[data-page="index"] .ini-documento{ min-height: 126px; }
}

body[data-page="index"] .inv-kpis{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-bottom: 18px;
}

body[data-page="index"] .inv-kpi{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--spring),box-shadow .3s;
}

body[data-page="index"] .inv-kpi:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

body[data-page="index"] .inv-kpi::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad);
}

body[data-page="index"] .inv-kpi .l{
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  font-weight: 800;
  margin-bottom: 6px;
}

body[data-page="index"] .inv-kpi .v{
  font-family: 'League Spartan',sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.02em;
}

body[data-page="index"] .inv-kpi .v.ok{
  color: var(--ok);
}

body[data-page="index"] .inv-kpi .v.warn{
  color: var(--alerta-relleno);
}

body[data-page="index"] .inv-kpi .v.bad{
  color: var(--red);
}

body[data-page="index"] .inv-kpi .sub{
  font-size: .68rem;
  color: var(--text3);
  margin-top: 4px;
  font-weight: 600;
}

body[data-page="index"] .inv-filters{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

body[data-page="index"] .inv-search{
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  background: var(--soft);
  outline: none;
  transition: all .25s var(--spring);
}

body[data-page="index"] .inv-search:focus{
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-soft);
  background: var(--card);
}

body[data-page="index"] .inv-filter-chip{
  padding: 6px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--text2);
  font-weight: 700;
  font-size: .76rem;
  cursor: pointer;
  transition: all .2s var(--spring);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

body[data-page="index"] .inv-filter-chip:hover{
  border-color: var(--naranja);
  color: var(--naranja-ink);
  transform: translateY(-1px);
}

body[data-page="index"] .inv-filter-chip.active{
  background: var(--naranja);
  color: var(--panel-chrome-t1);
  border-color: var(--naranja);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent);
}

body[data-page="index"] .inv-filter-chip .cnt{
  font-family: 'League Spartan',sans-serif;
  font-size: .66rem;
  opacity: .7;
  background: color-mix(in srgb, var(--panel-chrome) 8%, transparent);
  padding: 1px 6px;
  border-radius: 6px;
}

body[data-page="index"] .inv-filter-chip.active .cnt{
  background: color-mix(in srgb, var(--panel-superficie) 22%, transparent);
  opacity: 1;
}

/* Filtros del cruce por talla (talla + hora, Carlitos 31-ago). La fila ocupa
   el ancho completo para que las chips quepan sin apretarse en escritorio. */
body[data-page="index"] .inv-filter-row{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  flex-basis: 100%;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
body[data-page="index"] .inv-filter-rotulo{
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text2);
  margin-inline-end: 2px;
  min-width: 42px;
}
body[data-page="index"] .inv-hora-top{
  flex-basis: 100%;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text2);
  background: color-mix(in srgb, var(--naranja) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--naranja) 25%, transparent);
  border-radius: 10px;
  padding: 7px 12px;
  margin-top: 4px;
}
body[data-page="index"] .inv-hora-top b{ color: var(--naranja-ink); }

body[data-page="index"] .inv-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

body[data-page="index"] .inv-tab{
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--text2);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: all .25s var(--spring);
  display: flex;
  align-items: center;
  gap: 7px;
}

body[data-page="index"] .inv-tab .dot{
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  transition: transform .3s var(--spring);
}

body[data-page="index"] .inv-tab:hover{
  border-color: var(--text3);
  transform: translateY(-1px);
}

body[data-page="index"] .inv-tab:hover .dot{
  transform: scale(1.2);
}

body[data-page="index"] .inv-tab.active{
  background: var(--text);
  color: var(--panel-chrome-t1);
  border-color: var(--text);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--panel-chrome-alt) 15%, transparent);
}

body[data-page="index"] .inv-color-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--sh);
  transition: box-shadow .3s var(--spring),transform .3s var(--spring);
  animation: invCardIn .4s var(--spring);
}

body[data-page="index"] .inv-color-card:hover{
  box-shadow: var(--sh-md);
}

body[data-page="index"] .inv-color-head{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

body[data-page="index"] .inv-color-head .dot{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--card),0 0 0 4px var(--line);
}

body[data-page="index"] .inv-color-head h3{
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  font-family: 'League Spartan',sans-serif;
  letter-spacing: -.01em;
}

body[data-page="index"] .inv-fecha-badge{
  font-size: .72rem;
  font-weight: 700;
  color: var(--text2);
  background: var(--soft);
  padding: 5px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: 5px;
}

body[data-page="index"] .inv-fecha-badge::before{
  content: "📅";
  font-size: .7rem;
}

body[data-page="index"] .inv-fecha-input{
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  background: var(--soft);
  outline: none;
  transition: all .25s var(--spring);
  min-width: 150px;
}

body[data-page="index"] .inv-fecha-input:focus{
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-soft);
  background: var(--card);
}

body[data-page="index"] .inv-grid-2x2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

body[data-page="index"] .inv-block-syt{
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  transition: border-color .25s,box-shadow .25s;
}

body[data-page="index"] .inv-block-syt:hover{
  border-color: var(--naranja);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--syt-coral-vivo) 6%, transparent);
}

body[data-page="index"] .inv-block-syt h4{
  font-size: .74rem;
  font-weight: 800;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

body[data-page="index"] .inv-block-syt h4 .ic{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--naranja-soft);
  color: var(--naranja-ink);
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
}

body[data-page="index"] .inv-table-wrap{
  overflow-x: auto;
  border-radius: 8px;
}

body[data-page="index"] .inv-table-syt{
  border-collapse: collapse;
  font-size: .76rem;
  width: 100%;
  transition: opacity .2s;
}

body[data-page="index"] .inv-table-syt th{
  background: var(--card);
  color: var(--text3);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  padding: 6px 3px;
  text-align: center;
  border: 1px solid var(--line);
  min-width: 36px;
  position: sticky;
  top: 0;
}

body[data-page="index"] .inv-table-syt .th-total{
  background: var(--text);
  color: var(--panel-chrome-t1);
  min-width: 50px;
  font-size: .62rem;
}

body[data-page="index"] .inv-table-syt td{
  padding: 4px 2px;
  text-align: center;
  border: 1px solid var(--line);
}

body[data-page="index"] .inv-table-syt .rowlbl-syt{
  background: var(--card);
  color: var(--text2);
  font-weight: 800;
  text-align: left;
  padding: 6px 10px;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

body[data-page="index"] .inv-row-cantidad{
  background: #ffe6cc;
}

body[data-page="index"] .inv-row-cantidad td{
  background: #ffe6cc;
  border-color: var(--panel-chrome-t2);
}

body[data-page="index"] .inv-row-cantidad .rowlbl-syt{
  background: #ffe6cc;
  color: var(--naranjo-texto);
  font-weight: 800;
}

body[data-page="index"] .inv-row-cole{
  background: var(--card);
  transition: background .2s;
}

body[data-page="index"] .inv-row-cole:hover{
  background: var(--soft);
}

body[data-page="index"] .inv-row-cole .td-cole{
  background: var(--card);
  min-height: 28px;
  transition: background .2s;
}

body[data-page="index"] .inv-row-cole:hover .td-cole{
  background: var(--soft);
}

body[data-page="index"] .inv-row-arri{
  background: var(--soft);
  font-weight: 700;
}

body[data-page="index"] .inv-row-arri .rowlbl-syt{
  background: var(--soft);
  color: var(--text);
}

body[data-page="index"] .inv-row-arri .td-arri{
  color: var(--text3);
}

body[data-page="index"] .inv-row-arri .td-total-arri{
  background: var(--soft);
  font-weight: 800;
  font-size: .9rem;
  color: var(--text);
}

body[data-page="index"] .inv-row-disp{
  background: var(--card);
  font-weight: 700;
}

body[data-page="index"] .inv-row-disp .rowlbl-syt{
  background: var(--card);
  color: var(--text);
}

body[data-page="index"] .inv-row-disp .td-disp{
  color: var(--text3);
}

body[data-page="index"] .inv-row-disp .td-total-disp{
  font-weight: 800;
  font-size: .9rem;
  border: 2px solid var(--ok);
  border-radius: 6px;
  transition: transform .2s var(--spring);
}

body[data-page="index"] .inv-row-disp:hover .td-total-disp{
  transform: scale(1.05);
}

body[data-page="index"] .td-total-cantidad{
  background: var(--naranjo);
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  border: 1px solid var(--naranjo);
  font-family: 'League Spartan',sans-serif;
}

body[data-page="index"] .td-total-cole{
  color: var(--text3);
  font-size: .76rem;
}

body[data-page="index"] .inv-cell{
  width: 40px;
  height: 32px;
  text-align: center;
  border: 1.5px solid var(--panel-chrome-t2);
  border-radius: 7px;
  font-family: 'League Spartan',sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: var(--text);
  background: var(--panel-lienzo);
  -moz-appearance: textfield;
  transition: all .2s var(--spring);
}

body[data-page="index"] .inv-cell::-webkit-outer-spin-button, body[data-page="index"] .inv-cell::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

body[data-page="index"] .inv-cell:focus{
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-soft);
  background: var(--card);
  transform: scale(1.06);
}

body[data-page="index"] .inv-cell.inv-saved{
  border-color: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
  animation: invSaved .5s var(--spring);
}

body[data-page="index"] .inv-cell.inv-zero{
  color: var(--text3);
  opacity: .5;
}

body[data-page="index"] .inv-foot{
  margin-top: 10px;
  font-size: .72rem;
  color: var(--text2);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

body[data-page="index"] .inv-foot b{
  color: var(--text);
  font-family: 'League Spartan',sans-serif;
}

body[data-page="index"] .inv-chip{
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: transform .2s var(--spring);
}

body[data-page="index"] .inv-chip:hover{
  transform: scale(1.05);
}

body[data-page="index"] .inv-chip.ok{
  background: var(--ok-soft);
  color: var(--ok);
}

body[data-page="index"] .inv-chip.cuidado{
  background: var(--panel-lienzo);
  color: var(--alerta-relleno);
}

body[data-page="index"] .inv-chip.critico{
  background: var(--red-soft);
  color: var(--red);
}

body[data-page="index"] .inv-empty{
  text-align: center;
  padding: 40px 20px;
  /* `--text3` daba rgb(155,150,145) sobre el lienzo claro = 2.62, por debajo
     de AA. `--panel-tinta-3` se ve igual de discreto y da 6.54. */
  color: var(--panel-tinta-3);
  font-size: .9rem;
}

body[data-page="index"] .inv-empty b{
  color: var(--naranja-ink);
  font-weight: 800;
}

body[data-page="index"] .chat-quick{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

body[data-page="index"] .chat-quick-btn{
  padding: 5px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text2);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s var(--spring);
}

body[data-page="index"] .chat-quick-btn:hover{
  border-color: var(--naranja);
  color: var(--naranja-ink);
  background: var(--naranja-soft);
  transform: translateY(-1px);
}

body[data-page="index"] .inv-mapa-calor{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--sh-sm);
}

body[data-page="index"] .inv-mapa-titulo{
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  font-weight: 800;
  margin-bottom: 10px;
}

body[data-page="index"] .inv-mapa-dias{
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

body[data-page="index"] .inv-mapa-dia{
  padding: 6px 10px;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s var(--spring);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
}

body[data-page="index"] .inv-mapa-dia:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

body[data-page="index"] .inv-mapa-dia.selected{
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-soft);
}

body[data-page="index"] .inv-conflictos{
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-page="index"] .inv-conflicto{
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  animation: invCardIn .3s var(--spring);
}

body[data-page="index"] .inv-conflicto-icon{
  font-size: 1.1rem;
}

body[data-page="index"] .inv-conflicto div{
  flex: 1;
  line-height: 1.4;
  color: var(--text);
}

body[data-page="index"] .inv-conflicto b{
  color: var(--red);
}

body[data-page="index"] .inv-cole-filled{
  background: var(--naranja-soft);
}

body[data-page="index"] .inv-cole-filled .rowlbl-syt{
  background: var(--naranja-soft);
  color: var(--naranja-ink);
  font-size: .6rem;
  line-height: 1.2;
  font-weight: 700;
}

body[data-page="index"] .inv-row-cole .rowlbl-syt{
  font-size: .62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

body[data-page="index"] .inv-row-cole .rowlbl-syt.empty-cole{
  color: var(--text3);
  font-weight: 400;
}

body[data-page="index"] .inv-row-cole-names{
  border-top: 1px dashed var(--panel-linea);
}

body[data-page="index"] .inv-row-cole-names td{
  background: var(--panel-lienzo);
  border-top: 1px dashed var(--panel-linea);
}

body[data-page="index"] .td-cole.sin-ficha{
  opacity: .6;
}

body[data-page="index"] .inv-disp-ok{
  background: var(--ok-soft);
  color: var(--ok);
}

body[data-page="index"] .inv-disp-cuidado{
  border-color: var(--alerta-relleno);
  background: var(--panel-lienzo);
  color: var(--alerta-relleno);
}

body[data-page="index"] .inv-disp-critico{
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
  font-weight: 900;
}

body[data-page="index"] .side .brand{
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .side .foot{
  margin-top: auto;
  padding: 14px 8px;
  font-size: .78rem;
  border-top: 1px solid var(--line);
  color: var(--panel-chrome-t1);
  border-top-color: color-mix(in srgb, var(--panel-chrome-t1) 10%, transparent);
}

body[data-page="index"] .top{
  height: 64px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--chrome);
  border-bottom-color: var(--chrome-line);
}

body[data-page="index"] .top h2{
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .top .search{
  background: color-mix(in srgb, var(--panel-superficie) 7%, transparent);
  border-color: color-mix(in srgb, var(--panel-chrome-t1) 15%, transparent);
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .top .search::placeholder{
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .top .mes{
  background: color-mix(in srgb, var(--panel-superficie) 7%, transparent);
  border-color: color-mix(in srgb, var(--panel-chrome-t1) 15%, transparent);
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .mobile-nav a.active{
  background: var(--naranja);
  color: var(--panel-chrome-t1);
}

/* La cabecera pegajosa TIENE que ser opaca. Sin fondo propio, la fila que pasa
   por debajo se transparenta y el encabezado parece meterse encima del primer
   dato — es exactamente lo que Carlitos vio: "el título tapando el primer
   dato". Se le da la superficie del panel y una línea que la separe.
   El `top` va en CERO, y esa fue una correccion de una correccion mia. Lo
   habia puesto en `var(--panel-topbar-h, 64px)` razonando que la cabecera
   debia quedar bajo la barra superior fija. Es correcto SOLO si la que
   scrollea es la pagina. Y aqui no lo es: medido en las siete vistas, TODAS
   las tablas del panel se anclan a un contenedor con scroll propio (`.card`,
   `.inv-table-wrap`), ninguna al documento. Con el ancla en el contenedor,
   esos 64px empujan la cabecera 64px hacia ABAJO y la dejan encima de la
   primera fila: exactamente el defecto que se queria arreglar. Las tablas de
   inventario ya estaban en 0 y por eso nunca fallaron. */
body[data-page="index"] thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-superficie);
  color: var(--panel-tinta-2);
  box-shadow: 0 1px 0 var(--panel-linea), 0 6px 12px -10px color-mix(in srgb, var(--panel-chrome) 30%, transparent);
}

body[data-page="index"] tbody tr:hover{
  background: var(--card-hover);
  box-shadow: inset 3px 0 0 var(--naranja);
}

body[data-page="index"] tbody tr:focus-visible, body[data-page="index"] .slot:focus-visible, body[data-page="index"] .kpi:focus-visible, body[data-page="index"] .day:focus-visible{
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

body[data-page="index"] a:focus-visible, body[data-page="index"] button:focus-visible, body[data-page="index"] .nav a:focus-visible, body[data-page="index"] input:focus-visible, body[data-page="index"] select:focus-visible, body[data-page="index"] .search:focus-visible{
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

body[data-page="index"] .kpi .v{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -.02em;
  font-feature-settings: "tnum" 1;
  line-height: 1.05;
}

body[data-page="index"] .kpi:hover .l{
  color: var(--text);
}

body[data-page="index"] .rbar{
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--gray-soft);
  margin-top: 6px;
  overflow: hidden;
}

body[data-page="index"] .rbar>b{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ok);
  transition: width .55s var(--ease-out);
}

body[data-page="index"] .rbar.warn>b{
  background: var(--naranja);
}

body[data-page="index"] .rbar.bad>b{
  background: var(--red);
}

/* ===========================================================================
   EL RESET QUE TENÍA APRETADO TODO EL PANEL
   ---------------------------------------------------------------------------
   Antes esta regla era `body[data-page="index"] *{margin:0;padding:0;…}`.
   Un reset universal CON ESPECIFICIDAD (0,1,1) que ganaba contra CUALQUIER
   componente: `.metric-card{padding:18px}` (0,1,0) perdía, y lo mismo todas
   las demás tarjetas, tablas y bloques del panel.

   Efecto real, el que Carlitos veía: el texto nacía pegado al borde de la
   caja ("ACTURADO" en vez de "FACTURADO"), el número se pegaba a su etiqueta
   ("7Horarios sin confirmar") y no había aire en ninguna parte.

   Un reset debe tener especificidad CERO para que cualquier componente lo
   pueda sobrescribir. Eso hace `:where()`. El `box-sizing` y la barra de
   scroll sí se mantienen universales: son comportamiento, no espaciado.
   =========================================================================== */
body[data-page="index"] *{
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}

/* El selector COMPLETO va dentro de `:where()`. Si solo se envuelve el `*`,
   `body[data-page="index"]` sigue aportando (0,1,1) y el reset vuelve a ganar
   contra `.metric-card` (0,1,0). Envuelto entero, la especificidad es 0 y
   cualquier componente manda sobre él, que es lo que debe hacer un reset. */
:where(body[data-page="index"] *){
  margin: 0;
  padding: 0;
}

body[data-page="index"] ::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

body[data-page="index"] ::-webkit-scrollbar-thumb{
  background: var(--line2);
  border-radius: 999px;
  border: 3px solid var(--card);
}

body[data-page="index"] ::-webkit-scrollbar-thumb:hover{
  background: var(--text3);
}

body[data-page="index"]{
  --bg: var(--panel-chrome-t1);
  --soft: var(--panel-lienzo);
  --line: var(--panel-linea);
  --line2: var(--panel-linea);
  --text: var(--panel-chrome-alt);
  --text2: var(--panel-tinta-3);
  --text3: var(--panel-chrome-t3);
  --naranja: var(--syt-coral-vivo);
  --naranja-soft: var(--panel-lienzo);
  /* `--naranja-ink` termina como TINTA sobre blanco en 8 `style=` en línea que
     escribe el propio JS del panel. Apuntaba al relleno vivo (2.87) y por eso
     84 celdas de disponibilidad salían ilegibles: un estilo en línea le gana a
     cualquier regla, así que esto no se podía arreglar desde el CSS. Termina
     en "-ink": es tinta, y la tinta naranja sobre blanco es la oscurecida. */
  --naranja-ink: var(--naranjo-texto);
  --ok: var(--ok-relleno);
  --ok-soft: var(--panel-lienzo);
  /* `--red` es el ROJO de error. Apuntarlo al naranjo dejó a los errores sin
     color propio: todo se veía igual de naranjo y "critico" ya no destacaba. */
  --red: var(--error-texto);
  --red-soft: var(--panel-lienzo);
  --gray-soft: var(--panel-lienzo);
  /* El degradado arrancaba en GRIS y terminaba en naranjo: mezclado daba ese
     tono turbio que había que eliminar. Con tres colores un degradado de un
     solo color no aporta nada, así que es naranjo plano de punta a punta. */
  --grad: linear-gradient(125deg,var(--naranjo) 0%,var(--naranjo-hover) 100%);
  --grad-soft: linear-gradient(125deg,color-mix(in srgb, var(--panel-chrome-t3) 6%, transparent),color-mix(in srgb, var(--syt-coral-vivo) 6%, transparent));
  --white: var(--panel-chrome-t1);
  --card: var(--panel-chrome-t1);
  --card-hover: var(--panel-lienzo);
  --chrome: var(--panel-chrome-alt);
  --chrome-line: var(--panel-chrome-linea);
  --chrome-txt: color-mix(in srgb, var(--panel-chrome-t1) 62%, transparent);
  --r: 13px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 9999px;
  --sh: 0 1px 2px color-mix(in srgb, var(--panel-chrome-alt) 4%, transparent),0 8px 22px color-mix(in srgb, var(--panel-chrome-alt) 5%, transparent);
  --sh-sm: 0 1px 2px color-mix(in srgb, var(--panel-chrome-alt) 5%, transparent);
  --sh-md: 0 4px 16px color-mix(in srgb, var(--panel-chrome-alt) 6%, transparent);
  --sh-lg: 0 14px 40px color-mix(in srgb, var(--syt-coral-vivo) 10%, transparent),0 4px 12px color-mix(in srgb, var(--syt-coral-vivo) 6%, transparent);
  --sh-xl: 0 28px 70px color-mix(in srgb, var(--panel-chrome-alt) 12%, transparent);
  --sh-warm: 0 14px 40px color-mix(in srgb, var(--syt-coral-vivo) 10%, transparent),0 4px 12px color-mix(in srgb, var(--syt-coral-vivo) 6%, transparent);
  --sh-warm-lg: 0 24px 60px color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent),0 8px 20px color-mix(in srgb, var(--syt-coral-vivo) 7%, transparent);
  --ease: cubic-bezier(0.34,1.35,0.64,1);
  --ease-out: cubic-bezier(0,0,0.45,1);
  --ease-bounce: cubic-bezier(0.34,1.35,0.64,1);
  --spring: cubic-bezier(0.34,1.35,0.64,1);
  font-family: 'League Spartan',system-ui,sans-serif;
  color: var(--text);
  background: var(--soft);
  display: flex;
  min-height: 100vh;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body[data-page="index"] h1, body[data-page="index"] h2, body[data-page="index"] h3, body[data-page="index"] .h1{
  font-feature-settings: "ss01" 1;
  text-wrap: balance;
}

body[data-page="index"] .mono, body[data-page="index"] .kpi .v, body[data-page="index"] td.num, body[data-page="index"] .s0, body[data-page="index"] .sx{
  font-feature-settings: "tnum" 1;
}

body[data-page="index"] .kpi{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--spring),box-shadow .3s;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 85%, transparent),0 1px 2px color-mix(in srgb, var(--panel-chrome-alt) 4%, transparent),0 14px 32px -16px color-mix(in srgb, var(--panel-chrome-alt) 14%, transparent);
}

body[data-page="index"] .kpi:hover{
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 95%, transparent),0 20px 46px -18px color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent),0 8px 20px -10px color-mix(in srgb, var(--panel-chrome-alt) 12%, transparent);
}

body[data-page="index"] .kpi.acc::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 120% at 100% 0%,color-mix(in srgb, var(--syt-coral-vivo) 5%, transparent),transparent 58%);
}

body[data-page="index"] .card, body[data-page="index"] .box, body[data-page="index"] .slot{
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 70%, transparent),var(--sh);
}

body[data-page="index"] .tur-tabs{
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

body[data-page="index"] .tur-tab:hover{
  background: var(--soft);
  transform: translateY(-1px);
}

body[data-page="index"] .tur-tab.active{
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--panel-chrome-t1);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--syt-coral-vivo) 22%, transparent);
}

body[data-page="index"] .tur-sub{
  display: none;
  animation: f .4s var(--spring);
}

body[data-page="index"] .tur-sub.active{
  display: block;
}

body[data-page="index"] .tur-day{
  margin-bottom: 18px;
}

body[data-page="index"] .tur-day-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

body[data-page="index"] .tur-day-head .d-name{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
}

body[data-page="index"] .tur-day-head .d-date{
  font-family: 'League Spartan';
  color: var(--text3);
  font-size: .82rem;
}

body[data-page="index"] .tur-day-head .d-count{
  margin-left: auto;
  font-size: .72rem;
  color: var(--text2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

body[data-page="index"] .tur-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap: 10px;
}

body[data-page="index"] .tur-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--sh-sm);
  transition: transform .25s var(--spring),box-shadow .25s;
}

body[data-page="index"] .tur-card.ent{
  border-left-color: var(--ok);
}

body[data-page="index"] .tur-card.dev{
  border-left-color: var(--naranja);
}

body[data-page="index"] .tur-card-top{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

body[data-page="index"] .tur-card-hora{
  font-family: 'League Spartan';
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

body[data-page="index"] .tur-card-type{
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

body[data-page="index"] .tur-card-type.ent{
  background: var(--ok-soft);
  color: var(--ok);
}

body[data-page="index"] .tur-card-type.dev{
  background: var(--naranja-soft);
  color: var(--naranja-ink);
}

body[data-page="index"] .tur-card-col{
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
  margin-bottom: 2px;
}

body[data-page="index"] .tur-card-meta{
  font-size: .74rem;
  color: var(--text3);
}

body[data-page="index"] .tur-card-trajes{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft);
  font-size: .7rem;
  font-weight: 700;
  color: var(--text2);
}

body[data-page="index"] .tur-staff-grid{
  display: grid;
  grid-template-columns: minmax(120px,180px) 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

body[data-page="index"] .tur-staff-day{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--soft);
  border-radius: 11px;
  border-left: 3px solid var(--naranja);
}

body[data-page="index"] .tur-staff-day .d-name{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: .95rem;
}

body[data-page="index"] .tur-staff-day .d-date{
  font-family: 'League Spartan';
  font-size: .72rem;
  color: var(--text3);
}

body[data-page="index"] .tur-staff-franjas{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-page="index"] .tur-franja{
  display: grid;
  grid-template-columns: minmax(110px,150px) 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--sh-sm);
}

body[data-page="index"] .tur-franja-label{
  font-family: 'League Spartan';
  font-weight: 700;
  font-size: .78rem;
  color: var(--text2);
  padding-top: 2px;
}

body[data-page="index"] .tur-franja-label.prioridad{
  color: var(--naranja-ink);
}

body[data-page="index"] .tur-franja-names{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page="index"] .tur-name{
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--soft);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text);
  border: 1px solid var(--line);
}

body[data-page="index"] .tur-name.unassigned{
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}

body[data-page="index"] .tur-name.prioridad{
  background: var(--naranja);
  color: var(--panel-chrome-t1);
  border-color: var(--naranja);
}

body[data-page="index"] .tur-marker{
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--naranja-soft);
  color: var(--naranja-ink);
}

body[data-page="index"] .tur-cruce-wrap{
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}

body[data-page="index"] .tur-cruce{
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  min-width: 760px;
}

body[data-page="index"] .tur-cruce th{
  text-align: left;
  color: var(--text2);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--card-hover);
  white-space: nowrap;
}

body[data-page="index"] .tur-cruce td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

body[data-page="index"] .tur-cruce td.num{
  font-family: 'League Spartan';
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body[data-page="index"] .tur-alerta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body[data-page="index"] .tur-alerta.ok{
  background: var(--ok-soft);
  color: var(--ok);
}

body[data-page="index"] .tur-alerta.warn{
  background: var(--panel-lienzo);
  color: var(--alerta-relleno);
}

body[data-page="index"] .tur-alerta.crit{
  background: var(--red-soft);
  color: var(--red);
}

body[data-page="index"] .tur-alerta.inef{
  background: var(--gray-soft);
  color: var(--text2);
}

body[data-page="index"] .tur-calor{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--sh-sm);
}

body[data-page="index"] .tur-calor-titulo{
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  font-weight: 800;
  margin-bottom: 10px;
}

body[data-page="index"] .tur-calor-dias{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-page="index"] .tur-calor-dia:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

body[data-page="index"] .tur-calor-dia.selected{
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-soft);
}

body[data-page="index"] .btn.pri{
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--panel-chrome-t1);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 25%, transparent),0 8px 20px -6px color-mix(in srgb, var(--syt-coral-vivo) 34%, transparent);
}

body[data-page="index"] .brand-mark{
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: var(--panel-chrome-t1);
  font-family: 'League Spartan';
  font-weight: 800;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 30%, transparent),0 10px 22px -6px color-mix(in srgb, var(--syt-coral-vivo) 35%, transparent);
}

body[data-page="index"] .av{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--panel-chrome-t1);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: 'League Spartan';
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 30%, transparent),0 8px 18px -6px color-mix(in srgb, var(--syt-coral) 30%, transparent);
}

body[data-page="index"] .side{
  width: 252px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--chrome);
  border-right-color: var(--chrome-line);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--panel-chrome-alt) 3%, transparent);
}

body[data-page="index"] .nav a, body[data-page="index"] .mobile-nav a, body[data-page="index"] .btn, body[data-page="index"] .btn.sm, body[data-page="index"] .chip, body[data-page="index"] .inv-tab, body[data-page="index"] .inv-filter-chip, body[data-page="index"] .tur-tab, body[data-page="index"] .tur-calor-dia, body[data-page="index"] .inv-mapa-dia, body[data-page="index"] .kpi, body[data-page="index"] .slot, body[data-page="index"] .day, body[data-page="index"] .tur-card{
  min-height: 44px;
}

body[data-page="index"] button, body[data-page="index"] a[class], body[data-page="index"] .nav a, body[data-page="index"] .mobile-nav a{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

body[data-page="index"] .btn, body[data-page="index"] .btn.sm{
  height: 44px;
  padding: 0 18px;
}

body[data-page="index"] .btn.sm{
  padding: 0 13px;
  font-size: .82rem;
  height: 40px;
}

body[data-page="index"] .chip{
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .02em;
  min-height: auto;
}

body[data-page="index"] .nav a{
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 3px;
  transition: background .25s var(--spring),color .25s,color .25s;
  color: var(--chrome-txt);
  padding: 14px 14px;
  border-radius: 14px;
  gap: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  min-height: 48px;
  font-size: .92rem;
}

body[data-page="index"] .nav a .i{
  font-family: 'League Spartan';
  transition: all .25s;
  background: color-mix(in srgb, var(--panel-superficie) 8%, transparent);
  color: var(--panel-chrome-t1);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: .85rem;
  display: grid;
  place-items: center;
  font-weight: 800;
}

body[data-page="index"] .nav a:hover{
  color: var(--panel-chrome-t1);
  background: color-mix(in srgb, var(--panel-superficie) 8%, transparent);
  transform: translateX(3px) scale(1.01);
  transition: background .35s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.22,1,0.36,1),color .35s;
}

body[data-page="index"] .nav a.active{
  color: var(--panel-chrome-t1);
  box-shadow: inset 3px 0 0 var(--naranja),0 8px 22px -10px color-mix(in srgb, var(--syt-coral-vivo) 40%, transparent);
  background: color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent);
}

body[data-page="index"] .nav a.active .i{
  transform: scale(1.1);
  background: color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent);
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .mobile-nav a{
  color: var(--panel-chrome-t1);
  min-height: 56px;
  padding: 6px 2px;
}

body[data-page="index"] .kpi, body[data-page="index"] .slot, body[data-page="index"] .day, body[data-page="index"] .tur-card, body[data-page="index"] .box, body[data-page="index"] .inv-color-card, body[data-page="index"] .tur-franja, body[data-page="index"] .tur-day, body[data-page="index"] .inv-mapa-dia, body[data-page="index"] .tur-calor-dia{
  animation: fiUp .5s cubic-bezier(0.22,1,0.36,1) both;
}

body[data-page="index"] .kpi:nth-child(1), body[data-page="index"] .slot:nth-child(1){
  animation-delay: .04s;
}

body[data-page="index"] .kpi:nth-child(2), body[data-page="index"] .slot:nth-child(2){
  animation-delay: .10s;
}

body[data-page="index"] .kpi:nth-child(3), body[data-page="index"] .slot:nth-child(3){
  animation-delay: .16s;
}

body[data-page="index"] .kpi:nth-child(4), body[data-page="index"] .slot:nth-child(4){
  animation-delay: .22s;
}

body[data-page="index"] .kpi:nth-child(5), body[data-page="index"] .slot:nth-child(5){
  animation-delay: .28s;
}

body[data-page="index"] .kpi:nth-child(6), body[data-page="index"] .slot:nth-child(6){
  animation-delay: .34s;
}

body[data-page="index"] .kpi:nth-child(7), body[data-page="index"] .slot:nth-child(7){
  animation-delay: .40s;
}

body[data-page="index"] .kpi:nth-child(8), body[data-page="index"] .slot:nth-child(8){
  animation-delay: .46s;
}

body[data-page="index"] .inv-color-card, body[data-page="index"] .day, body[data-page="index"] .tur-day{
  animation-delay: var(--d,0s);
}

body[data-page="index"] .kpi:hover, body[data-page="index"] .slot:hover, body[data-page="index"] .day:hover, body[data-page="index"] .tur-card:hover, body[data-page="index"] .box:hover, body[data-page="index"] .inv-color-card:hover, body[data-page="index"] .tur-franja:hover, body[data-page="index"] .tur-calor-dia:hover{
  transform: translateY(-2px);
}

body[data-page="index"] .slot:hover{
  background: var(--card-hover);
  transform: translateY(-3px);
  border-left-color: var(--naranja-ink);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent),0 6px 18px color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent);
}

body[data-page="index"] .tur-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--panel-chrome-alt) 10%, transparent);
}

body[data-page="index"] .res-section-title, body[data-page="index"] .kpi .l, body[data-page="index"] .inv-kpi .l, body[data-page="index"] .tur-calor-titulo, body[data-page="index"] .tur-day-head .d-count, body[data-page="index"] .inv-mapa-titulo{
  text-transform: uppercase;
  letter-spacing: .06em;
}

body[data-page="index"] .mono, body[data-page="index"] .kpi .v, body[data-page="index"] .inv-kpi .v, body[data-page="index"] .tur-card-hora, body[data-page="index"] .tur-day-head .d-date, body[data-page="index"] .td.num, body[data-page="index"] .s0, body[data-page="index"] .sx, body[data-page="index"] .num, body[data-page="index"] .ftl-tbl td{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

body[data-page="index"] .view{
  display: none;
  padding-bottom: 2rem;
}

body[data-page="index"] .res-section, body[data-page="index"] .box, body[data-page="index"] .kpis{
  margin-bottom: 32px;
}

body[data-page="index"] .kpis{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin-bottom: 28px;
  gap: 18px;
}

body[data-page="index"] .content{
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 28px;
}

body[data-page="index"] .tl-wrap{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 4px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

body[data-page="index"] .tl-wrap::-webkit-scrollbar{
  height: 8px;
}

body[data-page="index"] .tl-card{
  flex: 0 0 auto;
  width: 182px;
  border-radius: 16px;
  padding: 20px 18px;
  cursor: pointer;
  scroll-snap-align: start;
  background: var(--card);
  border: 1.5px solid var(--line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 85%, transparent),0 1px 2px color-mix(in srgb, var(--panel-chrome-alt) 4%, transparent),0 14px 32px -16px color-mix(in srgb, var(--panel-chrome-alt) 14%, transparent);
  transition: transform .3s cubic-bezier(0.22,1,0.36,1),box-shadow .3s,border-color .3s;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 44px;
}

body[data-page="index"] .tl-card:hover{
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 95%, transparent),0 20px 46px -18px color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent),0 8px 20px -10px color-mix(in srgb, var(--panel-chrome-alt) 12%, transparent);
}

body[data-page="index"] .tl-card.sel{
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-soft),0 14px 36px color-mix(in srgb, var(--syt-coral-vivo) 14%, transparent);
}

body[data-page="index"] .tl-card .tl-fecha{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text2);
}

body[data-page="index"] .tl-card .tl-num{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.02em;
}

body[data-page="index"] .tl-card .tl-meta{
  font-size: .78rem;
  color: var(--text2);
  font-weight: 600;
}

body[data-page="index"] .tl-card .tl-bar{
  height: 8px;
  border-radius: 999px;
  background: var(--gray-soft);
  overflow: hidden;
  margin-top: 4px;
}

body[data-page="index"] .tl-card .tl-bar>b{
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(0.22,1,0.36,1);
}

body[data-page="index"] .tl-card .tl-tag{
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
}

body[data-page="index"] .tl-card.crit{
  border-top: 4px solid var(--red);
}

body[data-page="index"] .tl-card.crit .tl-tag{
  background: var(--red);
  color: var(--panel-chrome-t1);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--syt-coral-vivo) 30%, transparent);
}

body[data-page="index"] .tl-card.crit .tl-bar>b{
  background: var(--red);
}

body[data-page="index"] .tl-card.alto{
  border-top: 4px solid var(--syt-coral-vivo);
}

body[data-page="index"] .tl-card.alto .tl-tag{
  background: var(--syt-coral-vivo);
  color: var(--panel-chrome-t1);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--syt-coral-vivo) 30%, transparent);
}

body[data-page="index"] .tl-card.alto .tl-bar>b{
  background: var(--syt-coral-vivo);
}

body[data-page="index"] .tl-card.medio{
  border-top: 4px solid var(--syt-coral-vivo);
}

body[data-page="index"] .tl-card.medio .tl-tag{
  background: var(--syt-coral-vivo);
  color: var(--panel-tinta-3);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--syt-coral-vivo) 30%, transparent);
}

body[data-page="index"] .tl-card.medio .tl-bar>b{
  background: var(--syt-coral-vivo);
}

body[data-page="index"] .tl-card.bajo{
  border-top: 4px solid var(--ok);
}

body[data-page="index"] .tl-card.bajo .tl-tag{
  background: var(--ok);
  color: var(--panel-chrome-t1);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--ok-relleno) 30%, transparent);
}

body[data-page="index"] .tl-card.bajo .tl-bar>b{
  background: var(--ok);
}

body[data-page="index"] .tl-dots{
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 0 4px 8px;
}

body[data-page="index"] .tl-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line2);
  transition: all .25s var(--spring);
}

body[data-page="index"] .tl-dot.on{
  background: var(--naranja);
  transform: scale(1.3);
  box-shadow: 0 0 0 3px var(--naranja-soft);
}

body[data-page="index"] .alert-vcard{
  border-radius: 16px;
  padding: 20px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 85%, transparent),0 1px 2px color-mix(in srgb, var(--panel-chrome-alt) 4%, transparent),0 14px 32px -16px color-mix(in srgb, var(--panel-chrome-alt) 14%, transparent);
  cursor: pointer;
  transition: transform .3s cubic-bezier(0.22,1,0.36,1),box-shadow .3s;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid transparent;
}

body[data-page="index"] .alert-vcard:hover{
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-chrome-t1) 95%, transparent),0 20px 46px -18px color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent),0 8px 20px -10px color-mix(in srgb, var(--panel-chrome-alt) 12%, transparent);
}

body[data-page="index"] .alert-vcard.red{
  background: var(--red-soft);
  border-left: 5px solid var(--red);
}

body[data-page="index"] .alert-vcard.warn{
  background: var(--panel-lienzo);
  border-left: 5px solid var(--syt-coral);
}

body[data-page="index"] .alert-vcard .av-ico{
  font-size: 2rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

body[data-page="index"] .alert-vcard.red .av-ico{
  background: color-mix(in srgb, var(--syt-coral-vivo) 15%, transparent);
  color: var(--red);
}

body[data-page="index"] .alert-vcard.warn .av-ico{
  background: color-mix(in srgb, var(--syt-coral) 15%, transparent);
  color: var(--syt-coral);
}

body[data-page="index"] .alert-vcard .av-tit{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: .96rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text);
}

body[data-page="index"] .alert-vcard .av-txt{
  font-size: .84rem;
  color: var(--text2);
  font-weight: 600;
  line-height: 1.4;
}

body[data-page="index"] .alert-vcard .av-num{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
}

body[data-page="index"] .alert-vcard.red .av-num{
  color: var(--red);
}

body[data-page="index"] .alert-vcard.warn .av-num{
  color: var(--syt-coral);
}

body[data-page="index"] .alert-vcard .av-go{
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--naranja-ink);
  margin-top: auto;
  opacity: .7;
}

body[data-page="index"] .fin-bar{
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: var(--gray-soft);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--panel-chrome) 6%, transparent);
}

body[data-page="index"] .fin-bar>b{
  transition: width .6s cubic-bezier(0.22,1,0.36,1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: var(--panel-chrome-t1);
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
}

body[data-page="index"] .fin-bar .b-ok{
  background: linear-gradient(90deg,var(--ok),var(--ok-relleno));
}

body[data-page="index"] .fin-bar .b-red{
  background: linear-gradient(90deg,var(--syt-coral-vivo),var(--syt-coral-relleno));
}

body[data-page="index"] .fin-legend{
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 12px;
  font-size: .78rem;
  font-weight: 700;
}

body[data-page="index"] .fin-legend .lg{
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-page="index"] .fin-legend .lg>span{
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

body[data-page="index"] .saldo-row{
  display: grid;
  grid-template-columns: 14px 1.6fr 1fr 70px 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .2s,box-shadow .2s;
  min-height: 44px;
}

body[data-page="index"] .saldo-row:hover{
  background: var(--card-hover);
  transform: translateX(2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--panel-chrome-alt) 4%, transparent);
}

body[data-page="index"] .saldo-row:last-child{
  border: 0;
}

body[data-page="index"] .saldo-dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--card);
}

body[data-page="index"] .saldo-col{
  font-weight: 800;
  font-size: .92rem;
}

body[data-page="index"] .saldo-col small{
  display: block;
  font-weight: 600;
  color: var(--text3);
  font-size: .76rem;
  margin-top: 2px;
}

body[data-page="index"] .saldo-fecha{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--text2);
}

body[data-page="index"] .saldo-trajes{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
  font-size: .86rem;
}

body[data-page="index"] .saldo-abono{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .84rem;
  color: var(--ok);
}

body[data-page="index"] .saldo-prog{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 100px;
}

body[data-page="index"] .saldo-prog .sp-bar{
  height: 10px;
  border-radius: 999px;
  background: var(--gray-soft);
  overflow: hidden;
}

body[data-page="index"] .saldo-prog .sp-bar>b{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--ok),var(--ok-relleno));
  transition: width .6s cubic-bezier(0.22,1,0.36,1);
}

body[data-page="index"] .saldo-prog .sp-pct{
  font-size: .7rem;
  font-weight: 700;
  color: var(--text2);
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
}

body[data-page="index"] .saldo-saldo{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--red);
  text-align: right;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--syt-coral-vivo) 10%, transparent);
}

body[data-page="index"] .saldo-badge{
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}

body[data-page="index"] .saldo-badge.pend{
  background: var(--red-soft);
  color: var(--red);
}

body[data-page="index"] .saldo-badge.ok{
  background: var(--ok-soft);
  color: var(--ok);
}

body[data-page="index"] .saldo-head{
  display: grid;
  grid-template-columns: 14px 1.6fr 1fr 70px 1fr 1fr;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--card-hover);
  border-radius: 16px 16px 0 0;
}

body[data-page="index"] .saldo-head>span{
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
}

body[data-page="index"] .ag-day-head{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 14px 18px;
  border-radius: 16px 16px 0 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom: 0;
}

body[data-page="index"] .ag-day-head .ag-name{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: capitalize;
}

body[data-page="index"] .ag-day-head .ag-kpi{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--soft);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text2);
}

body[data-page="index"] .ag-day-head .ag-kpi b{
  font-family: 'League Spartan';
  font-size: .88rem;
  color: var(--text);
}

body[data-page="index"] .ag-day-head .ag-carga{
  margin-left: auto;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body[data-page="index"] .ag-carga.crit{
  background: var(--red);
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .ag-carga.alto{
  background: var(--syt-coral-vivo);
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .ag-carga.medio{
  background: var(--syt-coral-vivo);
  color: var(--panel-tinta-3);
}

body[data-page="index"] .ag-carga.bajo{
  background: var(--ok);
  color: var(--panel-chrome-t1);
}

body[data-page="index"] .ag-tl{
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  overflow-x: auto;
  padding: 14px 10px;
  background: var(--soft);
  position: relative;
  -webkit-overflow-scrolling: touch;
}

body[data-page="index"] .ag-tl-rail{
  display: flex;
  min-width: 100%;
  position: relative;
}

body[data-page="index"] .ag-hour{
  flex: 0 0 70px;
  border-right: 1px dashed var(--line2);
  min-height: 120px;
  position: relative;
}

body[data-page="index"] .ag-hour:last-child{
  border: 0;
}

body[data-page="index"] .ag-hour-lbl{
  position: absolute;
  top: -2px;
  left: 4px;
  font-family: 'League Spartan';
  font-size: .62rem;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .02em;
}

body[data-page="index"] .ag-card{
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--naranja);
  box-shadow: var(--sh-sm);
  transition: transform .25s cubic-bezier(0.22,1,0.36,1),box-shadow .25s;
  min-height: 44px;
  z-index: 2;
}

body[data-page="index"] .ag-card:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--panel-chrome-alt) 12%, transparent);
  z-index: 5;
}

body[data-page="index"] .ag-card .ac-top{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

body[data-page="index"] .ag-card .ac-time{
  font-family: 'League Spartan';
  font-weight: 700;
  font-size: .72rem;
  color: var(--text2);
}

body[data-page="index"] .ag-card .ac-state{
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body[data-page="index"] .ag-card .ac-col{
  font-weight: 800;
  font-size: .82rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="index"] .ag-card .ac-meta{
  font-size: .68rem;
  color: var(--text2);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="index"] .ag-card .ac-trajes{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft);
  font-size: .64rem;
  font-weight: 700;
  color: var(--text2);
  font-family: 'League Spartan';
}

body[data-page="index"] .tur-calor-dia{
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s var(--spring);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  min-width: 88px;
  min-height: 44px;
}

body[data-page="index"] .tur-calor-dia .cnum{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.02em;
}

body[data-page="index"] .tur-calor-dia .clbl{
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
  margin-top: 4px;
}

body[data-page="index"] .tur-calor-dia .cdate{
  font-family: 'League Spartan';
  font-size: .64rem;
  opacity: .7;
  margin-top: 2px;
}

body[data-page="index"] .tur-tab{
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text2);
  cursor: pointer;
  transition: all .25s var(--spring);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 14px;
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  min-height: 44px;
}

body[data-page="index"] .tur-tab .tt-ico{
  font-size: 1.15rem;
  line-height: 1;
}

body[data-page="index"] .tur-tab .tt-cnt{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-chrome) 8%, transparent);
  min-width: 22px;
  text-align: center;
}

body[data-page="index"] .tur-tab.active .tt-cnt{
  background: color-mix(in srgb, var(--panel-superficie) 25%, transparent);
}

body[data-page="index"] .tur-ratio-cell{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

body[data-page="index"] .tur-ratio-bar{
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-soft);
  overflow: hidden;
  min-width: 60px;
}

body[data-page="index"] .tur-ratio-bar>b{
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s cubic-bezier(0.22,1,0.36,1);
}

body[data-page="index"] .tur-ratio-val{
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: .82rem;
  min-width: 34px;
  text-align: right;
}

body[data-page="index"] .eyebrow{
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--naranja-ink);
  margin-bottom: 6px;
  display: block;
}

body[data-page="index"] .auth-gate{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--panel-chrome) 96%, transparent);
  touch-action: auto;
}

body[data-page="index"] .auth-gate[hidden]{
  display: none;
}

body[data-page="index"] .auth-card{
  position: relative;
  isolation: isolate;
  width: min(440px,100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  background: var(--panel-superficie);
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 30px 90px color-mix(in srgb, var(--panel-chrome) 34%, transparent);
  border-top: 4px solid var(--naranja);
  transform: none;
}

body[data-page="index"] .auth-mark{
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: var(--panel-chrome-t1);
  font: bold 24px 'League Spartan';
  margin-bottom: 22px;
}

body[data-page="index"] .auth-card h1{
  font: 800 1.65rem/1.1 'League Spartan';
  margin-bottom: 10px;
  /* Sin color explícito heredaba el blanco del chrome sobre una tarjeta
     blanca: "Panel privado" quedaba INVISIBLE (ratio 1.0). Es la primera
     pantalla que ve Loreto cada vez que entra. Medido en producción. */
  color: var(--panel-tinta-1);
}

body[data-page="index"] .auth-card p{
  color: var(--text2);
  font-size: .9rem;
  line-height: 1.55;
  margin-bottom: 22px;
}

body[data-page="index"] .auth-card label{
  display: block;
  font-weight: 800;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

body[data-page="index"] .auth-card input{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  font: 600 .95rem 'League Spartan';
  margin-bottom: 12px;
  touch-action: manipulation;
  user-select: text;
  -webkit-user-select: text;
}

body[data-page="index"] .auth-card input:focus{
  outline: 3px solid color-mix(in srgb, var(--syt-coral-vivo) 18%, transparent);
  border-color: var(--naranja);
}

body[data-page="index"] .auth-card button{
  width: 100%;
  min-height: 48px;
}

body[data-page="index"] .auth-error{
  min-height: 20px;
  color: var(--red);
  font-size: .82rem;
  font-weight: 700;
  margin-top: 10px;
}

body[data-page="index"] .session-exit{
  border: 1px solid var(--line);
  background: var(--panel-superficie);
  border-radius: 999px;
  padding: 8px 12px;
  font: 700 .72rem 'League Spartan';
  color: var(--text2);
}

html:has(body[data-page="index"]).auth-locked, html:has(body[data-page="index"]).auth-locked body{
  overflow: hidden;
  overscroll-behavior: none;
}

body[data-page="index"] .exec-shell{
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--sh);
  overflow: hidden;
}

body[data-page="index"] .exec-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg,var(--panel-superficie) 55%,var(--naranja-soft));
}

body[data-page="index"] .exec-head h3{
  margin: 0;
}

body[data-page="index"] .exec-head .sub{
  max-width: 560px;
  text-align: right;
}

body[data-page="index"] .exec-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

body[data-page="index"] .exec-tab{
  border: 1px solid var(--line);
  background: var(--panel-superficie);
  color: var(--text2);
  border-radius: 999px;
  padding: 9px 14px;
  font: 800 .76rem 'League Spartan';
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}

body[data-page="index"] .exec-tab.active{
  background: var(--text);
  border-color: var(--text);
  color: var(--panel-chrome-t1);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--panel-chrome-alt) 15%, transparent);
}

body[data-page="index"] .exec-body{
  padding: 22px;
}

body[data-page="index"] .exec-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}

body[data-page="index"] .exec-stat{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: var(--panel-superficie);
  min-height: 112px;
}

body[data-page="index"] .exec-stat .k{
  font-size: .68rem;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .07em;
}

body[data-page="index"] .exec-stat .n{
  font: 800 1.55rem/1.1 'League Spartan';
  margin-top: 12px;
  letter-spacing: -.03em;
}

body[data-page="index"] .exec-stat .hint{
  font-size: .72rem;
  color: var(--text3);
  margin-top: 7px;
  line-height: 1.4;
}

body[data-page="index"] .exec-split{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  margin-top: 16px;
}

body[data-page="index"] .exec-panel{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: var(--panel-superficie);
}

body[data-page="index"] .exec-panel h4{
  font: 800 .78rem 'League Spartan';
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 14px;
}

body[data-page="index"] .rank-row{
  display: grid;
  grid-template-columns: minmax(120px,1fr) 2fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

body[data-page="index"] .rank-name{
  font-weight: 750;
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="index"] .rank-track{
  height: 9px;
  border-radius: 999px;
  background: var(--gray-soft);
  overflow: hidden;
}

body[data-page="index"] .rank-track b{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad);
}

body[data-page="index"] .rank-val{
  font: 750 .75rem 'League Spartan';
  white-space: nowrap;
}

body[data-page="index"] .cost-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body[data-page="index"] .cost-form input, body[data-page="index"] .cost-form select{
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-superficie);
  padding: 0 11px;
  font: 650 .8rem 'League Spartan';
}

body[data-page="index"] .cost-form .wide{
  grid-column: 1/-1;
}

body[data-page="index"] .cost-list{
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

body[data-page="index"] .cost-item{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
}

body[data-page="index"] .cost-item small{
  display: block;
  color: var(--text3);
  margin-top: 2px;
}

body[data-page="index"] .cost-delete{
  border: 0;
  background: var(--red-soft);
  color: var(--red);
  border-radius: 8px;
  padding: 7px 9px;
  font-weight: 800;
  cursor: pointer;
}

body[data-page="index"] .data-note{
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--panel-lienzo);
  border: 1px solid var(--panel-chrome-t2);
  color: var(--alerta-texto);
  font-size: .78rem;
  line-height: 1.5;
}

body[data-page="index"] .data-note.ok{
  background: var(--ok-soft);
  border-color: var(--panel-chrome-t2);
  color: var(--ok-relleno);
}

body[data-page="index"] .tur-staff-form{
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.3fr 1fr 1fr auto;
  gap: 9px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
  background: var(--soft);
}

body[data-page="index"] .tur-staff-form label{
  display: grid;
  gap: 5px;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text2);
}

body[data-page="index"] .tur-staff-form input, body[data-page="index"] .tur-staff-form select{
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-superficie);
  padding: 0 9px;
  font: 650 .76rem 'League Spartan';
  min-width: 0;
}

body[data-page="index"] .tur-staff-form .btn{
  justify-content: center;
}

body[data-page="index"] .tur-name.tentative{
  background: var(--panel-lienzo);
  color: var(--alerta-texto);
  border-color: var(--panel-chrome-t2);
}

body[data-page="index"] .tur-name.absent{
  background: var(--red-soft);
  color: var(--red);
  text-decoration: line-through;
}

body[data-page="index"] .tur-name button{
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 900;
  margin-left: 4px;
  padding: 0 2px;
}

.nav{
  overflow-y: auto;
  padding-right: 2px;
}

.v2-intro{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 24px;
}

.v2-intro-copy{
  max-width: 760px;
}

.v2-intro .h1{
  margin-top: 3px;
}

.v2-intro .sub{
  max-width: 720px;
  line-height: 1.55;
  margin-top: 8px;
}

.v2-read-order{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 480px;
}

.v2-read-order span{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: .7rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.v2-read-order b{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-right: 6px;
  background: var(--ink);
  color: var(--panel-chrome-t1);
  font: 700 .62rem 'League Spartan';
}

.metric-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.metric-card{
  position: relative;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 34px -24px color-mix(in srgb, var(--panel-chrome-alt) 35%, transparent);
  overflow: visible;
}

.metric-card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: var(--panel-chrome-t2);
}

.metric-card.good::before{
  background: var(--ok);
}

.metric-card.bad::before{
  background: var(--red);
}

.metric-card.warn::before{
  background: var(--syt-coral-vivo);
}

.metric-card.blue::before{
  background: var(--blue);
}

.metric-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .075em;
}

.metric-info{
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  color: var(--muted);
  font: 800 .7rem 'League Spartan';
  cursor: help;
}

.metric-info::after{
  content: attr(data-tip);
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + 9px);
  width: 230px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--panel-chrome-t1);
  font: 600 .72rem/1.45 League Spartan;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--panel-chrome) 20%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: .18s;
}

.metric-info:hover::after, .metric-info:focus::after{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.metric-value{
  display: block;
  margin-top: 15px;
  color: var(--ink);
  font: 800 clamp(1.32rem,2.3vw,2rem)/1 'League Spartan';
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.metric-card.good .metric-value{
  color: var(--ok);
}

.metric-card.bad .metric-value{
  color: var(--red);
}

.metric-card.warn .metric-value{
  color: var(--alerta-relleno);
}

.metric-desc{
  margin-top: 10px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
  min-height: 2.1em;
}

.v2-section{
  margin: 28px 0;
}

.v2-section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 13px;
}

.v2-section-head h3{
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.v2-section-head p{
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
  max-width: 660px;
}

.v2-surface{
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: 0 12px 36px -28px color-mix(in srgb, var(--panel-chrome-alt) 45%, transparent);
  padding: 20px;
}

.focus-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}

.focus-card{
  display: block;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: transform .2s,box-shadow .2s,border-color .2s;
}

.focus-card:hover{
  transform: translateY(-2px);
  border-color: var(--panel-chrome-t2);
  box-shadow: 0 14px 32px -24px color-mix(in srgb, var(--panel-chrome-alt) 55%, transparent);
}

.focus-card .fc-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.focus-card .fc-icon{
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  font-size: 1rem;
}

.focus-card .fc-count{
  font: 800 1.32rem 'League Spartan';
}

.focus-card strong{
  display: block;
  margin-top: 12px;
  font-size: .82rem;
}

.focus-card p{
  margin-top: 5px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.focus-card.critical{
  background: linear-gradient(145deg,var(--panel-superficie) 35%,var(--red-soft));
  border-color: var(--panel-linea);
}

.focus-card.warning{
  background: linear-gradient(145deg,var(--panel-superficie) 35%,var(--panel-lienzo));
  border-color: var(--panel-chrome-t2);
}

.overview-split{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 16px;
}

.finance-progress{
  height: 18px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-lienzo);
  margin: 16px 0 10px;
}

.finance-progress span{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--panel-chrome-t1);
  font: 800 .66rem 'League Spartan';
}

.finance-progress .paid{
  background: var(--ok);
}

.finance-progress .pending{
  background: var(--red);
}

.finance-legend{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
}

.finance-legend b{
  font-family: 'League Spartan';
  color: var(--ink);
}

.season-days{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 3px 2px 8px;
  scroll-snap-type: x proximity;
}

.season-day{
  display: flex;
  flex: 0 0 138px;
  flex-direction: column;
  align-items: flex-start;
  scroll-snap-align: start;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 13px;
  text-align: left;
  cursor: pointer;
}

.season-day:hover{
  border-color: var(--focus);
}

.season-day .sd-date{
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}

.season-day .sd-total{
  display: block;
  margin-top: 8px;
  font: 800 1.45rem 'League Spartan';
}

.season-day .sd-meta{
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  color: var(--muted);
}

.season-day .sd-risk{
  display: inline-flex;
  margin-top: 9px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-lienzo);
  color: var(--ok-relleno);
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.season-day.high .sd-risk{
  background: var(--red-soft);
  color: var(--red);
}

.season-day.medium .sd-risk{
  background: var(--panel-lienzo);
  color: var(--alerta-relleno);
}

.priority-details{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.priority-details details{
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.priority-details summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: .82rem;
}

.priority-details summary::-webkit-details-marker{
  display: none;
}

.priority-details summary::after{
  content: "+";
  font: 800 1rem 'League Spartan';
  color: var(--focus);
}

.priority-details details[open] summary::after{
  content: "–";
}

.priority-list{
  max-height: 420px;
  overflow: auto;
  border-top: 1px solid var(--line-soft);
}

.priority-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}

.priority-row:last-child{
  border-bottom: 0;
}

.priority-row:hover{
  background: var(--surface-2);
}

.priority-row strong{
  font-size: .78rem;
}

.priority-row small{
  display: block;
  color: var(--muted);
  font-size: .68rem;
  margin-top: 3px;
}

.priority-row b{
  font: 800 .78rem 'League Spartan';
  color: var(--red);
  white-space: nowrap;
}

.source-note{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid var(--panel-linea);
  border-radius: 14px;
  background: var(--panel-lienzo);
  color: var(--panel-tinta-2);
  font-size: .73rem;
  line-height: 1.5;
}

.source-note strong{
  color: var(--ok-texto);
}

.agenda-date-tabs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 10px;
  margin-bottom: 16px;
  scroll-snap-type: x proximity;
}

.agenda-date-tab{
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: .7rem;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}

.agenda-date-tab.active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--panel-chrome-t1);
}

.agenda-day-v2{
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 12px 36px -30px color-mix(in srgb, var(--panel-chrome-alt) 55%, transparent);
}

.agenda-day-summary{
  display: grid;
  grid-template-columns: minmax(200px,1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}

.agenda-day-summary h3{
  font-size: 1rem;
  text-transform: capitalize;
}

.agenda-day-summary span{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--panel-superficie);
  border: 1px solid var(--line-soft);
  font-size: .66rem;
  font-weight: 800;
  color: var(--muted);
}

.agenda-list{
  display: grid;
}

.agenda-row{
  display: grid;
  grid-template-columns: 112px minmax(210px,1.35fr) 150px 178px minmax(210px,.9fr);
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .18s;
}

.agenda-row:last-child{
  border-bottom: 0;
}

.agenda-row:hover{
  background: var(--panel-superficie);
}

.agenda-time strong{
  font: 800 .88rem 'League Spartan';
}

.agenda-time small, .agenda-school small, .agenda-counts small, .agenda-logistics small{
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.35;
}

.agenda-school strong{
  display: block;
  font-size: .82rem;
}

.agenda-color{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 800;
}

.agenda-color i{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}

.agenda-counts{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
}

.agenda-counts span{
  padding: 7px 5px;
  border-radius: 9px;
  background: var(--surface-2);
  text-align: center;
  font: 800 .72rem 'League Spartan';
}

.agenda-counts span::first-line{
  font-weight: 800;
}

.agenda-logistics{
  min-width: 0;
}

.agenda-statuses{
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.status-pill{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-lienzo);
  color: var(--muted);
  font-size: .59rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.status-pill.ok{
  background: var(--ok-soft);
  color: var(--ok);
}

.status-pill.bad{
  background: var(--red-soft);
  color: var(--red);
}

.status-pill.warn{
  background: var(--panel-lienzo);
  color: var(--alerta-relleno);
}

.finance-equation{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 9px;
  align-items: stretch;
}

.finance-term{
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: var(--surface);
  padding: 16px;
  min-width: 0;
}

.finance-term .ft-label{
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.finance-term strong{
  display: block;
  margin-top: 10px;
  font: 800 1.22rem 'League Spartan';
  overflow-wrap: anywhere;
}

.finance-term small{
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.35;
}

.finance-term.result{
  background: var(--panel-lienzo);
  border-color: var(--panel-chrome-t2);
}

.finance-operator{
  display: grid;
  place-items: center;
  color: var(--quiet);
  font: 800 1.2rem 'League Spartan';
}

.finance-two{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
}

.date-bars{
  display: grid;
  gap: 11px;
}

.date-bar{
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 10px;
  align-items: center;
}

.date-bar .db-date{
  font: 700 .68rem 'League Spartan';
  color: var(--muted);
}

.date-bar .db-track{
  height: 12px;
  border-radius: 999px;
  background: var(--panel-lienzo);
  overflow: hidden;
}

.date-bar .db-track b{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad);
}

.date-bar .db-value{
  font: 800 .69rem 'League Spartan';
  white-space: nowrap;
}

.pipeline-list{
  display: grid;
  gap: 10px;
}

.pipeline-row{
  display: grid;
  grid-template-columns: 100px 1fr 32px;
  gap: 10px;
  align-items: center;
}

.pipeline-row span{
  font-size: .68rem;
  font-weight: 800;
  text-transform: capitalize;
}

.pipeline-row i{
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--panel-lienzo);
  overflow: hidden;
}

.pipeline-row i b{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--focus);
}

.pipeline-row strong{
  font: 800 .72rem 'League Spartan';
  text-align: right;
}

.glossary{
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
}

.glossary summary{
  cursor: pointer;
  padding: 15px 17px;
  font-size: .76rem;
  font-weight: 800;
  list-style: none;
}

.glossary summary::-webkit-details-marker{
  display: none;
}

.glossary-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
}

.glossary-item{
  background: var(--panel-superficie);
  padding: 14px 16px;
}

.glossary-item strong{
  font-size: .74rem;
}

.glossary-item p{
  margin-top: 4px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}

.cost-v2-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cost-v2-form input, .cost-v2-form select{
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-superficie);
  padding: 0 11px;
  font: 650 .78rem League Spartan;
}

.cost-v2-form .wide{
  grid-column: 1/-1;
}

.client-grid{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 13px;
}

.client-card:hover{
  border-color: var(--panel-chrome-t2);
  box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--panel-chrome-alt) 55%, transparent);
}

.client-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.client-card h3{
  font-size: .86rem;
  line-height: 1.35;
}

.client-card .cc-count{
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  font: 800 .64rem 'League Spartan';
}

.client-card .cc-stats{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin-top: 14px;
}

.client-card .cc-stat{
  padding: 9px 7px;
  border-radius: 10px;
  background: var(--surface-2);
  text-align: center;
}

.client-card .cc-stat b{
  display: block;
  font: 800 .72rem 'League Spartan';
}

.client-card .cc-stat span{
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.client-card .cc-contact{
  margin-top: 12px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}

.rent-filters{
  display: grid;
  grid-template-columns: repeat(3,minmax(140px,1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.rent-filter{
  display: grid;
  gap: 5px;
}

.rent-filter label{
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--muted);
}

.rent-filter select{
  min-height: 42px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-superficie);
  padding: 0 10px;
  font: 700 .75rem League Spartan;
}

/* Filtros de un clic de plata (Debe plata / Reserva incompleta): el mismo
   clic enciende y apaga, y combinan con fecha/estado/color. */
.rent-deuda{
  grid-auto-flow: column;
  justify-content: start;
  align-content: end;
  gap: 6px;
}
.rent-deuda .rd{
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-superficie);
  color: var(--text2);
  font: 700 .72rem League Spartan;
  cursor: pointer;
  white-space: nowrap;
}
.rent-deuda .rd.on{
  background: var(--naranja-soft, rgba(230,110,20,.14));
  border-color: var(--naranja);
  color: var(--naranja-ink, var(--naranja));
}

/* Enlace de cobro por WhatsApp en la tabla de deudores. */
.wa-mini{
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--ok);
  border-radius: 8px;
  color: var(--ok);
  font: 700 .68rem League Spartan;
  text-decoration: none;
  white-space: nowrap;
}
.wa-mini:hover{ background: rgba(46,164,79,.14); }

/* Ficha: navegacion chica arriba (Volver/Anterior/Siguiente/Editar) —
   los papeles dejaron de ser una hilera de botones. */
.fp-nav{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.fp-nav .fp-nav-cont{
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  min-width: 6.5ch;          /* «1 de 65» y «10 de 65» ocupan lo mismo */
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fp-nav .fp-editar{ margin-left: auto; }

/* El par Anterior/Siguiente: un bloque propio, separado de «Volver» y con
   sitio fijo. Antes eran dos botones sueltos que aparecian y desaparecian en
   los extremos, y el resto de la fila se corria: uno apuntaba a «→» y apretaba
   «Volver». Ahora el ancho no depende de si hay a donde ir. */
.fp-nav .fp-volver{ margin-inline-end: 10px; }
.fp-nav .fp-pager{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;            /* nunca se encoge ni se va a otra linea */
  padding: 2px;
  border: 1px solid var(--linea, #e6e1da);
  border-radius: 10px;
  background: var(--fondo2, #faf7f3);
}
.fp-nav .fp-pg{
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  border-radius: 8px;
  color: var(--naranja-ink, #c2410c);
}
.fp-nav .fp-pg:not([disabled]):hover{
  background: var(--naranja-suave, #fde7d7);
}
.fp-nav .fp-pg[disabled]{
  opacity: .32;
  cursor: not-allowed;
  color: var(--text2);
}
@media (max-width: 640px){
  .fp-nav .fp-pg{ min-width: 46px; height: 40px; font-size: 19px; }
  .fp-nav .fp-nav-cont{ font-size: 13.5px; }
}

/* Ficha: la plata con jerarquia (idea Stitch) — tres lineas grandes, la
   garantia separada debajo, y el desglose fino plegado. */
.box-plata .pl-main .v{ font-size: 1.02rem; }
.box-plata .pl-saldo .v{ font-size: 1.18rem; font-weight: 800; }
.plata-detalle{ margin-top: 10px; }
.plata-detalle summary{
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text2);
  padding: 4px 0;
}
.plata-detalle .dl{ padding: 3px 0; }
.pl-acciones{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   DINERO EN DOS PARTES: EL ARRIENDO Y LA GARANTÍA

   Carlitos, 04-sep: «divide las finanzas en 2 partes... fácil de mirar,
   separa y jerarquiza, destaca cosas con colores y negritas». Cada parte es
   su propia tarjeta -mismo trato visual que ya usa `.money-custody`, no un
   sistema nuevo-, para que de un vistazo se sepa cuál es cuál sin leer nada.
--------------------------------------------------------------------------- */
.pl-seccion{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--panel-chrome-t2);
  border-radius: 14px;
  background: var(--panel-lienzo);
}
.pl-seccion:first-of-type{ margin-top: 10px; }
.pl-seccion-tit{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.pl-seccion-tit span{
  font: 900 .92rem 'League Spartan';
  color: var(--text);
}
.pl-seccion-tit small{ color: var(--text2); font-size: .68rem; }
body[data-page="index"] .chip.sm{ padding: 2px 8px; font-size: .64rem; }
/* La garantía se distingue por un borde superior de color -el mismo gesto
   que ya usa `.kpi.danger`-, no por repetir toda la tarjeta en otro tono. */
.pl-seccion-garantia{ border-top: 3px solid var(--naranja); }

/* El check de abono/saldo: SOLO LECTURA -viene de la plata real, no de un
   click-, pero se ve y se toca como cualquier casilla para que a simple
   vista se lea "pagado sí/no" sin hacer cuentas. */
.pl-check-fila{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1px dashed var(--line);
  cursor: default;
}
.pl-check-fila input{ width: 18px; height: 18px; accent-color: var(--ok); flex: none; }
.pl-check-fila .pl-check-txt{ font-weight: 700; margin-right: auto; }
.pl-check-fila .v{ font-size: .92rem; }
.pl-check-fila.pend .v{ color: var(--red); font-weight: 800; }
.pl-check-fila.ok .v{ color: var(--ok); }

/* Piezas dañadas: la lista vive adentro de su propio recuadro punteado -la
   misma señal que ya usa `.pl-ledger`-, para que se note que es un area de
   trabajo (agregar/quitar), no un dato fijo. */
.pl-danos{
  margin: 12px 0 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.pl-danos-head{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.pl-danos-head b{ font-size: .82rem; margin-right: auto; }
.pl-dano-form{ margin-top: 8px; padding: 10px; }
.pl-dano-form .dl{ padding: 4px 0; }

/* Carlitos, 04-sep: «que sea más simple... en los abonos debe salir la
   opción de abono completo o por partes». Cada paso es una pregunta y
   nada más -sin campos sueltos esperando que alguien adivine para qué son-. */
.pl-pago-paso{ margin-top: 8px; padding: 12px; text-align: center; }
.pl-pago-pregunta{ margin: 0 0 10px; font-weight: 800; font-size: .88rem; }
.pl-pago-opciones{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
/* Carlitos, 04-sep: «que abajo salga un poco más destacado las piezas
   dañadas y el valor a descontar de la garantía». El total de la lista
   -"Descuento por daños"- pasa de una fila más a una tarjeta propia, mismo
   peso visual que ya tiene "Garantía a devolver" debajo. */
.pl-danos .pl-pago-total{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
}
.pl-danos .pl-pago-total .k{ font-weight: 800; }
.pl-danos .pl-pago-total .v{ font-size: 1.08rem; font-weight: 900; }
/* Carlitos, 04-sep: «tiene que salir un call to action ahí, así como
   'selecciona tu pieza', para que la gente sepa cómo usar la interfaz». */
.pl-dano-cta{
  margin: 0 0 8px;
  font-size: .74rem;
  font-weight: 800;
  color: var(--naranja-ink);
}

/* La cifra final: lo único que de verdad hay que leer si solo se tiene un
   segundo. Mismo trato que `.money-custody`, pero el numero es el
   protagonista -mas grande que cualquier otra cifra del bloque-. */
.pl-garantia-final{
  display: grid;
  gap: 2px;
  margin: 10px 0;
  padding: 13px;
  border: 1px solid var(--panel-chrome-t2);
  border-radius: 12px;
  background: var(--panel-lienzo);
}
.pl-garantia-final .k{
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text2);
}
.pl-garantia-final b{ font: 900 1.3rem 'League Spartan'; }
.pl-garantia-final small{ color: var(--panel-tinta-3); font-size: .65rem; line-height: 1.4; }

/* Ficha: layout 01-sep noche v2 (pedido Carlitos). La zona de Documentos es
   un SUBMENU desplegable del CTA "Crear documento": vive FLOTANDO bajo el
   encabezado (position:absolute, ancho fijo, sombra), NO empuja el contenido.
   La ficha de datos queda SIEMPRE mitad y mitad (Colegio y pedido |
   Representante) — ordenada, sin columnas que cambian. */
.ficha-principal{
  position: relative;      /* ancla del submenu de documentos */
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
/* El submenu de documentos: desplegado desde el CTA, queda PEGADO al boton
   (Carlitos 01-sep 23:04: "quedó muy abajo... que quede pegado al boton del
   cta, porque de ese boton se despliega"). Se ancla con position:fixed bajo
   el CTA (el CTA vive en el fp-nav del encabezado): top 110px lo pone justo
   debajo del boton, sin perder vista. Click fuera lo cierra. MISMA
   funcionalidad de siempre dentro.
   Especificidad con prefijo body[data-page] para ganarle al .box base (1px). */
body[data-page="index"] .box-documentos.docs-oculta{ display: none; }
/* Va sin `.ficha-principal` a proposito. El panel de documentos dejo de vivir
   ahi -ahora cuelga de `.ficha-disclosure-body`- y con el selector viejo la
   regla no aplicaba a nadie: ganaba el `.box{position:relative}` generico de
   mas abajo. Como el JS le pone `right:` calculado para un elemento FIJO, en
   un telefono de 375px terminaba en left:-202px: el boton decia "Cerrar
   documentos" y en pantalla no aparecia nada. */
body[data-page="index"] .box-documentos{
  position: fixed;
  top: 104px;
  right: 28px;
  z-index: 60;
  width: min(420px, calc(100vw - 48px));
  max-height: min(72vh, 640px);
  overflow: auto;
  /* !important: las reglas globales .box de las lineas 7741/8254 vienen
     despues y le ganarian al borde. El submenu es MENU (estado), su contorno
     naranjo de 2px dice "esto sale del CTA", no es decoracion. */
  border: 2px solid var(--naranja) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 56px -24px rgba(0, 0, 0, .45) !important;
  background: var(--panel-superficie, #fff);
}
/* Los datos de la ficha: SIEMPRE dos columnas (mitad y mitad, ordenado). */
.box-datos .datos-dos-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
  align-items: start;
}
@media (max-width: 900px){
  .ficha-principal{ grid-template-columns: 1fr; }
  .box-datos .datos-dos-col{ grid-template-columns: 1fr; }
}
/* En el telefono NO puede ser un panel flotante. `section.view` lleva un
   transform de su animacion de entrada (matrix(1,0,0,1,0,8)) y un transform
   en un ancestro hace que `position:fixed` se resuelva contra ESE ancestro y
   no contra la ventana: `bottom` deja de servir y la caja termina en y=900 de
   una pantalla de 812, o sea fuera. Medido en 375px.
   Aqui fluye normal dentro de su plegable, que es lo que se espera en un
   telefono: se toca "Abrir documentos" y aparecen justo debajo. */
@media (max-width: 760px){
  body[data-page="index"] .box-documentos{
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 10px 0 0 !important;
    overflow: visible !important;
  }
}
.box-documentos .fp-docitem{ border-top: 1px solid var(--line-soft); }
.box-documentos .fp-docitem:first-of-type{ border-top: 0; }
.fp-docseta{ font-size: .6rem; color: var(--text2); }
.fp-docitem > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  font-weight: 700;
  font-size: .82rem;
}
.fp-docitem > summary::-webkit-details-marker{ display: none; }
.fp-docitem .fp-docseta{ margin-left: auto; transition: transform .15s; }
.fp-docitem[open] .fp-docseta{ transform: rotate(180deg); }
.fp-docacciones{
  display: flex;
  gap: 6px;
  padding: 0 2px 10px 2px;
  flex-wrap: wrap;
}
/* Ver documento: el papel se previsualiza DENTRO del panel (Carlitos 28-ago),
   con Imprimir —el formato PDF de siempre— y Descargar en la propia vista. */
.doc-prev{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.doc-prev-card{
  display: flex;
  flex-direction: column;
  width: min(1260px, 97vw);
  height: min(88vh, 980px);
  background: var(--panel-superficie, #141414);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.doc-prev-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.doc-prev-head strong{ font-size: .95rem; }
.doc-prev-body{
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  /* La fila unica ocupa TODO el alto del visor. Sin esta linea la fila se
     media por contenido y el iframe colapsaba a los 150px que trae de fabrica:
     el papel salia cortado y sobraba un bloque en blanco abajo
     (Carlitos 01-sep 21:04). */
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  background: var(--panel-lienzo);
}
.doc-prev-message{
  min-width: 0;
  overflow: auto;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: var(--panel-superficie);
}
.doc-prev-message > summary{
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 44px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  background: var(--panel-superficie);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  font-size: .78rem;
  font-weight: 800;
}
.doc-prev-message > summary::-webkit-details-marker{ display: none; }
.doc-prev-message > summary::after{ content: '−'; float: right; color: var(--text3); }
.doc-prev-message:not([open]) > summary::after{ content: '+'; }
.doc-msg-inner{ display: grid; gap: 13px; padding: 14px 16px 18px; }
.doc-msg-line{ display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.doc-msg-line > span{ color: var(--text3); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.doc-msg-line > b{ overflow-wrap: anywhere; color: var(--text); font-size: .78rem; }
.doc-msg-copy{ min-width: 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.doc-msg-copy > div{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.doc-msg-copy pre{
  max-height: 230px;
  margin: 9px 0 0;
  padding: 11px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 9px;
  background: var(--panel-lienzo);
  /* Carlitos 02-sep: el texto del correo se veia "plomo" (gris). Es el mensaje
     real que se envia: tinta negra, no secundaria. */
  color: var(--text);
  font: 500 .73rem/1.52 Manrope, sans-serif;
}
.doc-prev-message.internal .doc-msg-inner{ color: var(--text2); font-size: .82rem; line-height: 1.5; }
.doc-prev-frame{
  flex: 1;
  width: 100%;
  /* El iframe trae 150px de alto de fabrica (atributo por defecto del HTML).
     Sin un height explicito el visor de escritorio lo dejaba en 150px y el
     papel salia cortado con espacio en blanco sobrante (Carlitos 01-sep).
     El media query movil ya lo tenia; el escritorio no. */
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.rent-table{
  min-width: 1420px;
}

.rent-table th{
  position: static;
  top: auto;
}

.v2-section .card thead th{
  position: static;
  top: auto;
}

.rent-table td{
  vertical-align: top;
  font-size: .77rem;
}

.rent-table .cell-main{
  font-weight: 800;
}

.rent-table .cell-sub{
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.35;
}

.rent-table .money-stack{
  display: grid;
  gap: 3px;
  text-align: right;
  font-family: 'League Spartan';
}

.rent-table .money-stack b{
  color: var(--red);
}

.mobile-table-note{
  display: none;
  color: var(--muted);
  font-size: .68rem;
  margin-bottom: 10px;
}

[id="disponibilidad"] .vh::after{
  content: "Lectura: stock − comprometido = disponible. En modo por día aparecen los colegios y las tallas que consumen cada prenda.";
  flex-basis: 100%;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--panel-lienzo);
  color: var(--panel-tinta-3);
  font-size: .7rem;
  line-height: 1.45;
}

.brand-mark{
  width: 46px;
  flex-basis: 46px;
  font-size: .75rem;
  letter-spacing: -.045em;
}

.auth-mark{
  width: 68px;
  font-size: 1rem;
  letter-spacing: -.04em;
}

.ctx-help{
  font-size: .76rem;
  color: var(--muted);
  background: var(--panel-lienzo);
  border-radius: 12px;
  padding: 11px 14px;
  margin: 10px 0 18px;
  border-left: 3px solid var(--blue);
  line-height: 1.5;
}

.ctx-help b{
  color: var(--ink);
}

.ficha-overview{
  grid-template-columns: minmax(0,1.18fr) minmax(360px,.82fr);
  align-items: start;
}

.ficha-tallaje-full{
  width: 100%;
  margin-top: 8px;
}

.ftl-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.ftl-head h3{
  margin: 3px 0 0;
}

.ftl-head>strong{
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--panel-lienzo);
  color: var(--error-relleno);
  font: 800 .72rem 'League Spartan';
  white-space: nowrap;
}

.ftl-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  align-items: start;
}

.ftl-seccion{
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface-2);
}

.ftl-seccion.review{
  grid-column: 1/-1;
  border-color: var(--panel-chrome-t2);
  background: var(--panel-lienzo);
}

.ftl-titulo{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  color: var(--ink);
  font-size: .88rem;
  text-transform: none;
  letter-spacing: 0;
}

.ftl-titulo span{
  display: inline-grid;
  min-width: 29px;
  height: 25px;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  background: var(--panel-superficie);
  border: 1px solid var(--line-soft);
  font: 800 .67rem 'League Spartan';
}

.ftl-tbl-wrap{
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-superficie);
  overflow: auto;
}

.ftl-tbl-wrap .disp-tbl{
  min-width: 460px;
}

.ftl-tbl-wrap .disp-tbl tr:nth-child(even){
  background: transparent;
}

.ftl-tbl-wrap .disp-tbl tr:hover{
  background: var(--panel-superficie);
}

.ftl-num{
  width: 34px;
  color: var(--quiet);
  font: 800 .72rem 'League Spartan';
  text-align: left;
}

.ftl-resumen{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 13px;
  background: var(--panel-lienzo);
  color: var(--muted);
  font-size: .76rem;
}

.ftl-resumen strong{
  color: var(--ink);
  font-size: .82rem;
}

.compact-kpi{
  padding: 10px 18px;
}

.panel-empty{
  text-align: center;
  color: var(--muted);
  padding: 40px;
}

.schedule-help{
  margin: 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}

.hor-filter{
  display: grid;
  gap: 11px;
  margin: 18px 0 8px;
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 17px;
  background: linear-gradient(145deg,var(--panel-superficie),var(--panel-superficie));
}

.hor-filter-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hor-filter-head>div{
  display: grid;
  gap: 3px;
}

.hor-filter-head span{
  color: var(--ink);
  font-size: .72rem;
  font-weight: 900;
}

.hor-filter-head strong{
  color: var(--muted);
  font-size: .64rem;
  font-weight: 700;
}

.hor-day-filter{
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.hor-day{
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-superficie);
  color: var(--muted);
  font: 800 .67rem League Spartan;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s,background .18s,color .18s;
}

.hor-day:hover, .hor-day:focus-visible{
  border-color: var(--panel-chrome-t2);
  color: var(--ink);
}

.hor-day.active{
  border-color: var(--focus);
  background: var(--focus);
  color: var(--panel-chrome-t1);
}

.hor-day b{
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-chrome) 7%, transparent);
  font: 850 .62rem 'League Spartan';
}

.hor-day.active b{
  background: color-mix(in srgb, var(--panel-superficie) 20%, transparent);
}

.hor-sep{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 0 12px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .065em;
}

.hor-sep::before{
  content: "";
  width: 4px;
  height: 17px;
  border-radius: 999px;
  background: var(--grad);
}

.hor-card:hover, .hor-card:focus-visible{
  transform: translateY(-2px);
  border-color: var(--panel-chrome-t2);
  box-shadow: 0 18px 40px -29px color-mix(in srgb, var(--panel-chrome-alt) 70%, transparent);
}

.hor-card.confirmed{
  background: var(--panel-superficie);
}

.hc-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hc-col{
  color: var(--ink);
  font-size: .92rem;
  font-weight: 850;
}

.hc-meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.hc-time-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--soft);
}

.hc-time-row span{
  color: var(--muted);
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.hc-time-value{
  color: var(--ink);
  font: 950 1.13rem/1.2 'League Spartan';
  text-align: right;
}

.hc-time-value.missing{
  color: var(--red);
  font-family: 'League Spartan';
  font-size: .82rem;
}

.hc-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.hc-pend, .hc-ok{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 900;
  white-space: nowrap;
}

.hc-pend{
  background: var(--red-soft);
  color: var(--red);
}

.hc-pend.has-time{
  background: var(--panel-lienzo);
  color: var(--alerta-relleno);
}

.hc-ok{
  background: var(--ok-soft);
  color: var(--ok);
}

.hor-confirmed{
  margin-top: 24px;
  border: 1px solid var(--line-soft);
  border-radius: 17px;
  background: color-mix(in srgb, var(--panel-superficie) 58%, transparent);
  overflow: hidden;
}

.hor-confirmed summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 17px;
  cursor: pointer;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
  list-style: none;
}

.hor-confirmed summary::-webkit-details-marker{
  display: none;
}

.hor-confirmed summary::after{
  content: "+";
  color: var(--focus);
  font: 800 1rem 'League Spartan';
}

.hor-confirmed[open] summary::after{
  content: "–";
}

.hor-confirmed-list{
  padding: 0 12px 2px;
}

.ficha-hora-principal{
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--panel-tinta-1);
  color: var(--panel-chrome-t1);
  font-size: 1rem;
}

.box-logistica{
  border-top: 3px solid var(--focus);
  background: linear-gradient(145deg,var(--panel-superficie),var(--panel-superficie));
}

.logistica-title, .tur-prioridades-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.logistica-title h3, .tur-prioridades-head h3{
  margin: 3px 0 0;
  font-size: 1rem;
}

.logistica-main{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
  margin-top: 15px;
}

.logistica-main>div{
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: var(--panel-superficie);
}

.logistica-main>div.danger{
  border-color: var(--panel-chrome-t2);
  background: var(--panel-lienzo);
}

.logistica-main span{
  color: var(--muted);
  font-size: .59rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.logistica-main strong{
  font-size: .72rem;
}

.logistica-main b{
  font: 900 .88rem 'League Spartan';
  overflow-wrap: anywhere;
}

.logistica-rule{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--panel-lienzo);
  color: var(--panel-tinta-3);
  font-size: .68rem;
  line-height: 1.4;
}

.logistica-rule b{
  color: var(--ok-texto);
}

.logistica-alerts{
  margin-top: 11px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel-lienzo);
}

.logistica-alerts>strong{
  font-size: .72rem;
}

.logistica-alerts p{
  margin: 7px 0 0;
  font-size: .68rem;
  line-height: 1.45;
}

.logistica-alerts p.critical{
  color: var(--red);
}

.logistica-alerts.money{
  background: var(--panel-lienzo);
  color: var(--syt-coral-texto);
}

.money-custody{
  display: grid;
  gap: 4px;
  margin: 10px 0;
  padding: 13px;
  border: 1px solid var(--panel-chrome-t2);
  border-radius: 12px;
  background: var(--panel-lienzo);
}

.money-custody span{
  color: var(--alerta-relleno);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.money-custody strong{
  font: 900 1.05rem 'League Spartan';
  color: var(--alerta-texto);
}

.money-custody small{
  color: var(--panel-tinta-3);
  font-size: .65rem;
  line-height: 1.4;
}

.kpi.danger{
  border-top: 3px solid var(--red);
  background: linear-gradient(145deg,var(--panel-superficie),var(--panel-lienzo));
}

.kpi.ok{
  border-top: 3px solid var(--ok);
}

.tur-prioridades, .tur-agenda-unica{
  margin: 18px 0;
  padding: 19px;
  border: 1px solid var(--line-soft);
  border-radius: 19px;
  background: var(--panel-superficie);
  box-shadow: 0 18px 45px -38px color-mix(in srgb, var(--panel-chrome-alt) 65%, transparent);
}

.tur-prioridades{
  border-top: 3px solid var(--red);
  background: linear-gradient(145deg,var(--panel-superficie),var(--panel-superficie));
}

.tur-prioridades-head>span{
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font: 800 .64rem 'League Spartan';
  white-space: nowrap;
}

.tur-prioridades-grid{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 15px;
}

.tur-risk{
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 5px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel-superficie);
  text-align: left;
  color: var(--ink);
}

.tur-risk:hover{
  transform: translateY(-2px);
  box-shadow: 0 13px 28px -22px color-mix(in srgb, var(--panel-chrome-alt) 65%, transparent);
}

.tur-risk.critical{
  border-color: var(--panel-chrome-t2);
  background: var(--panel-lienzo);
}

.tur-risk.urgent{
  border-color: var(--panel-chrome-t2);
  background: var(--panel-lienzo);
}

.tur-risk.warning{
  border-color: var(--panel-chrome-t2);
  background: var(--panel-lienzo);
}

.tur-risk.money{
  border-color: var(--panel-chrome-t2);
  background: var(--panel-lienzo);
}

.tur-risk b{
  font-size: .76rem;
}

.tur-risk span{
  font-size: .69rem;
  line-height: 1.42;
}

.tur-risk small{
  color: var(--muted);
  font-size: .62rem;
}

.tur-agenda-scroll{
  margin-top: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: auto;
}

.tur-agenda-unica table{
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: .72rem;
}

.tur-agenda-unica th{
  padding: 10px 12px;
  background: var(--soft);
  color: var(--muted);
  font-size: .58rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .055em;
  white-space: nowrap;
}

.tur-agenda-unica td{
  padding: 11px 12px;
  border-top: 1px solid var(--line-soft);
  vertical-align: middle;
}

.tur-agenda-unica tbody tr{
  cursor: pointer;
}

.tur-agenda-unica tbody tr:hover{
  background: var(--panel-superficie);
}

.tur-agenda-unica td small{
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .6rem;
}

.tur-op{
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.tur-op.entrega{
  background: var(--ok-soft);
  color: var(--ok);
}

.tur-op.presentacion{
  background: var(--panel-lienzo);
  color: var(--panel-tinta-3);
}

.tur-op.devolucion{
  background: var(--naranja-soft);
  color: var(--naranja-ink);
}

.tur-card.pre{
  border-left-color: var(--panel-chrome-t3);
}

.tur-card.conflict{
  border-color: var(--panel-chrome-t2);
  background: var(--panel-lienzo);
}

.tur-card-type.pre{
  background: var(--panel-lienzo);
  color: var(--panel-tinta-3);
}

.tur-cobranza{
  margin: 18px 0;
  padding: 19px;
  border: 1px solid var(--panel-chrome-t2);
  border-top: 3px solid var(--syt-coral);
  border-radius: 19px;
  background: linear-gradient(145deg,var(--panel-superficie),var(--panel-superficie));
}

.tur-cobranza .tur-prioridades-head p{
  max-width: 72ch;
  margin-top: 5px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}

.tur-cobranza table{
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  font-size: .72rem;
}

.tur-cobranza th{
  padding: 10px 12px;
  background: var(--panel-lienzo);
  color: var(--panel-tinta-3);
  font-size: .57rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tur-cobranza td{
  padding: 11px 12px;
  border-top: 1px solid var(--panel-linea);
  vertical-align: middle;
}

.tur-cobranza tbody tr{
  cursor: pointer;
}

.tur-cobranza tbody tr:hover{
  background: var(--panel-lienzo);
}

.tur-cobranza td small{
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .59rem;
}

.tur-cobranza .custody{
  color: var(--alerta-relleno);
}

.tur-money-due{
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font: 900 .68rem 'League Spartan';
  white-space: nowrap;
}

.nav a:focus-visible, .mobile-nav a:focus-visible, .btn:focus-visible, .focus-card:focus-visible, .client-card:focus-visible, .agenda-row:focus-visible, .hor-card:focus-visible, .season-day:focus-visible, .agenda-date-tab:focus-visible, .metric-info:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--panel-chrome-t3) 32%, transparent);
  outline-offset: 2px;
}

button, select, input, textarea, .nav a, .mobile-nav a{
  touch-action: manipulation;
}

.cc-number{
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-tinta-1);
  color: var(--panel-chrome-t1);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

html, html body, html body *{
  font-family: 'League Spartan', system-ui, sans-serif;
}

.ficha-resumen-top{
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   Los dos cuadros del inicio de la ficha (pedido de Carlitos, 13-ago)
   "datos principales a la izquierda en un cuadrado y otro cuadrado con el
    resumen de tallas por cantidad divididos en hombre y mujer, e indicando el
    color. Estos 2 cuadros deben ser del mismo tamaño y ocupar el inicio de
    cada ficha, y abajo la lista. Abajo los detalles de dinero."

   `1fr 1fr` + `align-items:stretch` es lo que garantiza el MISMO tamaño: las
   dos columnas miden igual y las cajas se estiran a la altura de la más alta.
   --------------------------------------------------------------------------- */
.ficha-duo{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.ficha-duo-box{
  display: flex;
  flex-direction: column;
  min-width: 0;          /* deja que el contenido largo envuelva, no desborde */
  margin: 0;
}

/* El cuadro de tallas trae su propia caja: aquí se aplana para que no se vea
   una caja dentro de otra y las dos columnas pesen visualmente igual. */
.ficha-duo-tallas .ftl-resumen-box{
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  flex: 1;
}

.ficha-duo-tallas .ftl-resumen-table{
  width: 100%;
}

/* Las tablas de tallas scrollean DENTRO de su caja: nunca empujan la página. */
.ficha-duo-tallas .ftl-resumen-multi{
  overflow-x: auto;
}

/* La cabecera de esta tabla NO va pegajosa. Son 8 tallas: no hay nada que
   seguir mientras se scrollea, y al flotar terminaba TAPANDO la primera fila
   (se veía "XS" arriba del encabezado y la fila "S" desaparecía). */
body[data-page="index"] .ficha-duo-tallas .ftl-resumen-table thead th{
  position: static;
}

/* La alerta de turno apretado: color + TEXTO, nunca solo color.
   Antes el fondo era crema (#fdf6ec). Con la paleta de tres el aviso se marca
   con una BARRA naranja a la izquierda sobre blanco: se ve desde lejos, no
   ensucia la tarjeta y no inventa un cuarto tono. */
.ficha-alerta-turno{
  margin: 12px 0 0;
  padding: 10px 12px 10px 14px;
  border-radius: 0 12px 12px 0;
  border: 1px solid var(--panel-linea);
  border-left: 4px solid var(--naranjo);
  background: var(--blanco);
  color: var(--panel-tinta-1);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.4;
}

/* En móvil los dos cuadros se apilan: uno debajo del otro, ancho completo. */
@media (max-width: 880px){
  .ficha-duo{
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

.ficha-resumen-top .ftl-resumen-head{
  grid-column: 1/-1;
}

.ficha-resumen-top .ftl-resumen-split{
  flex-direction: column;
  min-width: 170px;
  margin-top: 0;
}

.v2-section-head .tc-insight{
  margin: 4px 0 0;
  font-size: .86rem;
  color: var(--text2);
}

.v2-section-head .tc-insight b{
  font-family: 'League Spartan',sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.tc-amber{
  color: var(--naranja-ink);
}

.tc-red{
  color: var(--red);
}

.tc-green{
  color: var(--ok);
}

.rent-table thead th{
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
  box-shadow: 0 1px 0 var(--line);
}

.rent-table tbody tr:nth-child(even){
  background: var(--soft);
}

.rent-table tbody tr:hover{
  background: var(--naranja-soft);
}

/* Pie de totales fijos (idea Stitch escritorio, 27-ago): la suma de lo filtrado
   sigue a la vista mientras se arrastra la tabla. Los totales del encabezado,
   arriba, desaparecían con el primer scroll y con 65 filas nadie recordaba
   cuánto sumaba lo que estaba mirando. */
.rent-table tfoot td{
  position: sticky;
  bottom: 0;
  background: var(--card);
  z-index: 2;
  box-shadow: 0 -1px 0 var(--line);
  padding: 0;
}

.rent-tfoot-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: baseline;
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--text2);
}

.rent-tfoot-row b{
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.rent-tfoot-row .tf-red{ color: var(--red); }
.rent-tfoot-row .tf-green{ color: var(--ok); }

/* ============================================================================
   Recepción y devolución (27-ago): dos pasos separados — revisión y garantía.
   El vencido se ve antes de leerse: borde rojo y conteo en rojo. Semaforo +
   texto, nunca solo color.
   ============================================================================ */
.rcp-kpis{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Capacidad de bodega en el calendario (27-ago): franja delgada bajo el
   encabezado del día. La medición vive al lado — porcentaje y números, no
   solo una barra vacía. */
.ag-cap{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
}

.ag-cap-bar{
  flex: 1 1 auto;
  max-width: 340px;
  height: 6px;
  border-radius: 3px;
  background: var(--soft, rgba(0,0,0,.08));
  overflow: hidden;
}

.ag-cap-bar i{
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--naranja-ink, #a33e00);
  transition: width .4s ease;
}

.ag-cap-bar i.ag-cap-lleno{
  background: var(--red);
}

.ag-cap-txt{
  font-size: .78rem;
  color: var(--text2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ag-atencion{
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Tablón de documentos por emitir (27-ago): tres columnas compactas dentro de
   un desplegable, para que no ocupe pantalla cuando está al día. */
.doc-tablon{
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 0 16px;
}

.doc-tablon summary{
  cursor: pointer;
  padding: 12px 0;
  font-weight: 700;
  color: var(--text);
}

.doc-tablon summary b{
  color: var(--naranja-ink);
  font-variant-numeric: tabular-nums;
}

.doc-tablon-cols{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  padding-bottom: 16px;
}

.doc-col h4{
  margin: 0 0 4px;
  font-size: .92rem;
}

.doc-count{
  display: inline-block;
  min-width: 22px;
  text-align: center;
  background: var(--naranja-soft, rgba(255,106,19,.12));
  color: var(--naranja-ink);
  border-radius: 999px;
  font-size: .8rem;
  padding: 1px 7px;
}

.doc-nota{
  margin: 0 0 8px;
  font-size: .78rem;
  color: var(--text2);
}

.doc-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-col li{
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .88rem;
}

.doc-col li small{
  color: var(--text2);
  margin-left: 6px;
}

.doc-col li:hover{
  background: var(--naranja-soft);
}

.desk-link{
  color: var(--text2);
  text-decoration: none;
  font-size: .85rem;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.desk-link:hover{
  color: var(--naranja-ink);
  border-color: var(--naranja-ink);
}

.rcp-kpi{
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text2);
  font-size: .85rem;
}

.rcp-kpi b{
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.rcp-kpi.con-data b{
  color: var(--naranja-ink);
}

.rcp-sep{
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text2);
  margin: 22px 0 10px;
}

.rcp-card{
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.rcp-card.urgente{
  border-color: var(--red);
  border-left-color: var(--red);
}

.rcp-top{
  display: flex;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  align-items: baseline;
}

.rcp-col{
  font-weight: 800;
  font-size: 1.02rem;
}

.rcp-sub{
  color: var(--text2);
  font-size: .85rem;
}

.rcp-dia-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.rcp-dia{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: .9rem;
}

.rcp-dia.vencido{
  color: var(--red);
  font-weight: 800;
}

.rcp-dia.hoy{
  color: var(--naranja-ink);
  font-weight: 800;
}

.rcp-pie{
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.rcp-gar, .rcp-saldo{
  font-size: .88rem;
  color: var(--text2);
}

.rcp-gar b{ color: var(--text); }
.rcp-saldo b{ color: var(--red); }

.rcp-acciones{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.rcp-cerrados summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--text2);
  padding: 10px 0;
}

.rcp-cerrados-lista{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.rcp-mini{
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  background: var(--card);
}

.rcp-mini:hover{
  background: var(--naranja-soft);
}

@media (max-width: 640px){
  .rcp-dia-wrap{
    align-items: flex-start;
  }
  .rcp-acciones{
    margin-left: 0;
    width: 100%;
  }
  .rcp-acciones .btn{
    flex: 1 1 auto;
  }
}

.ftl-resumen-multi{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,560px),1fr));
  gap: 16px;
  align-items: start;
}

.ftl-color-bloque{
  min-width: 0;
  max-inline-size: 100%;
}

/* Las tablas de seis columnas conservan un ancho mínimo legible. El scroll
   pertenece a cada tabla, nunca a la tarjeta vecina ni a toda la página. */
.ftl-resumen-table-wrap{
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.ftl-color-sub{
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: .82rem;
  margin-bottom: 8px;
  color: var(--text);
}

.ftl-color-sub .dot{
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.ficha-resumen-top .ftl-resumen-box{
  display: grid;
  gap: 10px 28px;
  align-items: start;
  margin-bottom: 0;
  grid-template-columns: 1fr auto;
}

.client-card-head>div:first-child{
  min-width: 0;
  flex: 1;
}

.client-card-head h3{
  white-space: normal;
  overflow-wrap: anywhere;
}

.inv-color-card{
  min-width: 0;
}

.inv-color-card div, .inv-color-card table{
  min-width: 0;
  max-width: 100%;
}

[id="generar"] select, [id="generar"] code{
  max-width: 100%;
  min-width: 0;
}

[id="generar"] code{
  display: inline-block;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
}

.view :is(.card,.box,.v2-surface){
  min-width: 0;
}

.view.active, .tur-sub, .fi, .inv-conflicto, .kpi, .slot, .day, .tur-card, .box, .inv-color-card, .tur-franja, .tur-day, .inv-mapa-dia, .tur-calor-dia, .metric-card, .focus-card, .v2-surface, .client-card, .agenda-row{
  animation: none;
  opacity: 1;
  transform: none;
}

html body, html body *{
  font-family: 'League Spartan',system-ui,sans-serif;
}

button, input, select, textarea{
  font-family: 'League Spartan',system-ui,sans-serif;
}

.kpi:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--panel-chrome) 22%, transparent);
  box-shadow: var(--syt-shadow-card-hover);
}

.kpi .v{
  font-family: 'League Spartan',system-ui,sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums lining-nums;
}

.exec-tab{
  font-family: 'League Spartan',system-ui,sans-serif;
}

.exec-stat, .exec-panel{
  box-shadow: 0 18px 44px -38px color-mix(in srgb, var(--panel-chrome) 58%, transparent);
}

.tur-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--syt-shadow-card-hover);
}

.tur-card.dev, .tur-card.conflict{
  border-left-color: var(--syt-berry);
}

.client-card, .client-card-head, .client-card-head > div:first-child, .client-card .cc-school, .inv-color-card, .inv-grid-2x2, .inv-grid-2x2 > *{
  min-width: 0;
  max-width: 100%;
}

.client-card{
  border: 1px solid var(--line-soft);
  border-radius: 17px;
  background: var(--surface);
  padding: 17px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}

.client-card-head > div:first-child{
  flex: 1 1 auto;
  overflow: hidden;
}

.client-card .cc-school{
  margin-top: 5px;
  color: var(--muted);
  font-size: .7rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-grid-2x2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inv-table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

html body, html body *, html body button, html body input, html body select, html body textarea{
  font-family: 'League Spartan',Arial,sans-serif;
  font-synthesis: none;
}

.brand, .brand-mark, .av, .auth-mark, .metric-value, .kpi .v, .compact-kpi b, .ag-kpi b, .inv-kpi b, .num, .mono, .section-title, .res-section-title, .panel-head{
  font-family: 'League Spartan',Arial,sans-serif;
}

h1, h2, h3, h4, h5, h6{
  font-weight: 800;
  letter-spacing: -.04em;
}

strong, b{
  font-weight: 700;
}

.side::before{
  background: linear-gradient(90deg,var(--solar-coral),var(--solar-orange));
  box-shadow: 0 0 20px color-mix(in srgb, var(--syt-coral-vivo) 45%, transparent);
}

.brand-mark, .av, .auth-mark{
  color: var(--panel-chrome-t1);
  background: linear-gradient(145deg,var(--solar-coral),var(--solar-orange));
  border: 1px solid color-mix(in srgb, var(--panel-chrome-t1) 25%, transparent);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent),0 14px 34px -18px color-mix(in srgb, var(--syt-coral-vivo) 80%, transparent);
}

.nav .i{
  background: color-mix(in srgb, var(--panel-superficie) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--panel-chrome-t1) 8%, transparent);
}

.session-exit{
  border-radius: 14px;
  font-weight: 700;
}

.kpi, .box, .card, .compact-kpi, .ag-kpi, .ag-card, .hor-card, .client-card, .inv-kpi, .inv-color-card, .exec-shell, .exec-stat, .exec-panel, .tur-card, .tl-card, .alert-vcard, .modal, .cost-item, .box-datos, .box-docs, .box-logistica, .box-online, .box-plata{
  border: 1px solid color-mix(in srgb, var(--panel-chrome) 13%, transparent);
  border-radius: 20px;
  background: linear-gradient(145deg,color-mix(in srgb, var(--panel-superficie) 99%, transparent),color-mix(in srgb, var(--panel-superficie) 95%, transparent));
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent),0 28px 65px -46px color-mix(in srgb, var(--panel-chrome) 55%, transparent);
}

.kpi:nth-child(2n), .ag-card:nth-child(3n), .hor-card:nth-child(2n), .exec-panel:nth-child(2n), .tur-card:nth-child(2n){
  background-image: linear-gradient(145deg,color-mix(in srgb, var(--panel-chrome-t1) 95%, transparent),color-mix(in srgb, var(--panel-chrome-t1) 90%, transparent)),var(--solar-lamina-light);
  background-size: cover;
  background-position: center;
}

.kpi, .ag-card, .hor-card, .client-card, .inv-color-card, .exec-stat, .exec-panel, .tur-card, .tl-card, .alert-vcard{
  transition: transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .22s ease;
}

.kpi:hover, .ag-card:hover, .hor-card:hover, .client-card:hover, .inv-color-card:hover, .exec-stat:hover, .exec-panel:hover, .tur-card:hover, .tl-card:hover, .alert-vcard:hover{
  transform: translate3d(0,-5px,0);
  border-color: color-mix(in srgb, var(--syt-coral-vivo) 32%, transparent);
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--syt-coral-vivo) 9%, transparent),0 34px 75px -42px color-mix(in srgb, var(--syt-coral-vivo) 42%, transparent);
}

.kpi::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  top: -92px;
  right: -72px;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent);
  box-shadow: 0 0 58px 22px color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent);
}

.kpi.ok::after{
  background: color-mix(in srgb, var(--ok-relleno) 8%, transparent);
  box-shadow: 0 0 54px 20px color-mix(in srgb, var(--ok-relleno) 6%, transparent);
}

.panel-head, .section-title, .res-section-title{
  border-bottom-color: color-mix(in srgb, var(--syt-coral-vivo) 18%, transparent);
}

.exec-shell{
  box-shadow: 0 28px 70px -52px color-mix(in srgb, var(--panel-chrome) 72%, transparent);
  overflow: hidden;
}

.exec-head{
  background-position: center;
  background-color: var(--panel-chrome);
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--panel-chrome) 91%, transparent),color-mix(in srgb, var(--panel-chrome) 72%, transparent)),var(--solar-lamina-dark);
  background-size: cover;
  color: var(--panel-chrome-t1);
  border-bottom: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent);
}

.exec-head h2, .exec-head h3, .exec-head p{
  color: var(--panel-chrome-t1);
}

.exec-tab.active{
  background: linear-gradient(135deg,var(--solar-coral),var(--solar-orange));
  color: var(--panel-chrome-t1);
  border-color: transparent;
}

.btn.pri, button.pri{
  color: var(--panel-chrome-t1);
  background: linear-gradient(135deg,var(--solar-coral),var(--solar-orange));
  border-color: color-mix(in srgb, var(--panel-chrome-t1) 16%, transparent);
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--syt-coral-vivo) 76%, transparent);
}

.btn.pri:hover, button.pri:hover{
  transform: translateY(-2px);
  box-shadow: 0 23px 46px -20px color-mix(in srgb, var(--syt-coral-vivo) 86%, transparent);
}

input, select, textarea, .form input, .form select, .form textarea{
  min-height: 44px;
  border-radius: 13px;
  background: var(--panel-superficie);
  color: var(--panel-tinta-1);
  border-color: color-mix(in srgb, var(--panel-chrome) 16%, transparent);
}

input:focus, select:focus, textarea:focus{
  outline: 3px solid color-mix(in srgb, var(--syt-coral-vivo) 14%, transparent);
  border-color: var(--solar-coral);
}

.auth-gate{
  background-color: var(--panel-chrome);
  background-image: linear-gradient(color-mix(in srgb, var(--panel-chrome) 75%, transparent),color-mix(in srgb, var(--panel-chrome) 92%, transparent)),var(--solar-eclipse-dark);
  background-size: cover;
}

.auth-card{
  color: var(--panel-chrome-t1);
  background: linear-gradient(145deg,color-mix(in srgb, var(--panel-chrome-alt) 94%, transparent),color-mix(in srgb, var(--panel-chrome) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 28%, transparent);
  border-radius: 26px;
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--syt-coral-vivo) 13%, transparent),0 42px 90px -42px color-mix(in srgb, var(--syt-coral-vivo) 70%, transparent);
  backdrop-filter: blur(24px);
}

/* La tarjeta de login es CLARA (--panel-superficie). Esta regla la pintaba con
   la tinta del chrome oscuro (--panel-chrome-t1 = blanco): título, bajada y
   las etiquetas "Usuario"/"Contraseña" quedaban blanco sobre blanco, ratio 1.0.
   Es la primera pantalla que ve Loreto. Detectado midiendo PRODUCCIÓN, donde
   el login sí aparece; en local nunca se veía porque la API responde. */
.auth-card h1, .auth-card label{
  color: var(--panel-tinta-1);
}

.auth-card p{
  color: var(--panel-tinta-2);
}

.mobile-nav{
  background-color: color-mix(in srgb, var(--panel-chrome) 96%, transparent);
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--panel-chrome) 96%, transparent),color-mix(in srgb, var(--panel-chrome) 80%, transparent)),var(--solar-ember-dark);
  background-size: cover;
  border-top: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 24%, transparent);
  box-shadow: 0 -18px 45px -34px color-mix(in srgb, var(--syt-coral-vivo) 75%, transparent);
}

.mobile-nav a.active{
  color: var(--panel-chrome-t1);
  background: linear-gradient(135deg,color-mix(in srgb, var(--syt-coral-vivo) 36%, transparent),color-mix(in srgb, var(--syt-coral-vivo) 18%, transparent));
}

.toast:not(.on){
  display: none;
}

.content::before{
  content: "";
  position: fixed;
  inset: 64px 0 0 250px;
  background: var(--solar-light-image) center/cover no-repeat;
  opacity: .11;
  pointer-events: none;
  z-index: -1;
  display: none;
}

.side::after{
  content: "";
  position: absolute;
  inset: auto -20% 0;
  width: 70%;
  height: 230px;
  pointer-events: none;
  background: radial-gradient(circle,color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent),transparent 67%);
}

.top .right{
  gap: 10px;
}

.kpi:hover, .box:hover, .card:hover, .ag-card:hover, .hor-card:hover, .client-card:hover, .inv-color-card:hover, .exec-stat:hover, .exec-panel:hover, .tur-card:hover, .tl-card:hover, .alert-vcard:hover, .tur-franja:hover{
  box-shadow: var(--panel-lift);
}

.kpis{
  gap: clamp(12px,1.5vw,20px);
}

.kpi{
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--syt-line-light);
  background-color: var(--syt-white);
  background-image: linear-gradient(color-mix(in srgb, var(--panel-chrome-t1) 88%, transparent),color-mix(in srgb, var(--panel-chrome-t1) 96%, transparent)),url('../images/surfaces/syt-panel-lamina-v2.webp');
  background-size: cover;
  box-shadow: var(--syt-shadow-card);
  transition: transform .3s var(--syt-ease),
    border-color .25s ease,
    box-shadow .3s var(--syt-ease);
  min-height: 194px;
  padding: 23px 22px 22px;
  border-radius: 22px;
}

.kpi .l{
  color: var(--panel-tinta-3);
  letter-spacing: .075em;
}

.kpi .v, .compact-kpi b, .ag-kpi b, .inv-kpi b{
  font-weight: 700;
  color: var(--panel-tinta-1);
  font-size: clamp(1.8rem,2.25vw,2.6rem);
  letter-spacing: -.065em;
}

.tl-wrap{
  gap: 14px;
  padding: 10px 3px 18px;
}

.tl-card{
  width: 210px;
  min-height: 206px;
  border-radius: 22px;
  padding: 21px 20px;
}

.tl-card .tl-fecha, .tur-day-head .d-count, .tur-calor-titulo{
  letter-spacing: .075em;
}

.tl-card .tl-num{
  font-size: clamp(2.4rem,3.1vw,3.35rem);
  letter-spacing: -.075em;
}

.tl-card .tl-tag{
  position: relative;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
}

.tl-card.crit{
  border-top: 5px solid var(--red);
}

.tl-card.alto{
  border-top: 5px solid var(--panel-orange);
}

.tl-card.medio{
  border-top: 5px solid var(--syt-coral);
}

.tl-card.bajo{
  border-top: 5px solid var(--ok);
}

.tl-card.sel{
  border-color: var(--panel-coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--syt-coral-vivo) 13%, transparent),var(--panel-lift);
}

.tur-calor{
  padding: 20px;
  border-radius: 22px;
}

.tur-calor-dias{
  gap: 9px;
}

.tur-calor-dia{
  border: 1px solid transparent;
  min-width: 94px;
  min-height: 78px;
  border-radius: 16px;
}

.tur-calor-dia.selected{
  border-color: var(--panel-coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent);
}

.tur-day{
  padding: 20px;
  border: 1px solid var(--panel-line);
  border-radius: 22px;
  background: var(--panel-superficie);
  box-shadow: var(--panel-shadow);
}

.tur-day-head{
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-chrome) 11%, transparent);
}

.tur-day-head .d-name{
  font-size: clamp(1.15rem,1.55vw,1.5rem);
  letter-spacing: -.045em;
}

.tur-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.tur-card{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--syt-line-light);
  border-left: 4px solid var(--syt-coral);
  background: var(--syt-white);
  box-shadow: var(--syt-shadow-card);
  transition: transform .3s var(--syt-ease), box-shadow .3s var(--syt-ease);
  min-height: 154px;
  padding: 16px;
  border-radius: 18px;
}

.tur-card-hora{
  color: var(--syt-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  letter-spacing: -.045em;
}

.tur-card-col{
  margin-top: 8px;
  color: var(--syt-ink);
  font-weight: 700;
  line-height: 1.35;
  font-size: 1rem;
}

.tur-card-meta{
  margin-top: 5px;
  color: var(--syt-muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
}

.tur-tab{
  border-radius: 999px;
  padding: 11px 17px;
}

.tur-franja{
  padding: 14px;
  border-radius: 16px;
}

.tur-risk, .tur-prioridades, .tur-cobranza, .tur-agenda-unica{
  border-radius: 22px;
}

.fgrid{
  grid-template-columns: minmax(0,1.75fr) minmax(340px,.9fr);
  gap: 22px;
}

.box{
  padding: clamp(20px,2vw,30px);
  border-radius: 22px;
}

.ftl-wrap{
  max-width: none;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.ftl-tbl-wrap, .tur-agenda-scroll, .tur-cruce-wrap{
  max-width: 100%;
  border-radius: 16px;
}

table td, table th{
  padding: 14px 16px;
}

.hor-card{
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: 0 12px 34px -29px color-mix(in srgb, var(--panel-chrome-alt) 60%, transparent);
  cursor: pointer;
  transition: transform .18s,border-color .18s,box-shadow .18s;
  padding: 18px;
  border-radius: 18px;
}

body, .main{
  background: var(--panel-base);
  color: var(--panel-white);
}

.main{
  width: calc(100% - 248px);
  background-color: var(--panel-superficie);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background: var(--panel-lienzo);
  background-image: radial-gradient(circle at 88% 3%,color-mix(in srgb, var(--syt-coral) 16%, transparent),transparent 22%);
}

.side{
  width: 248px;
  padding: 18px 12px;
  background-color: color-mix(in srgb, var(--panel-chrome) 96%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent);
  box-shadow: 20px 0 60px -50px color-mix(in srgb, var(--syt-coral-vivo) 80%, transparent);
  background-image: linear-gradient(color-mix(in srgb, var(--panel-chrome) 93%, transparent),color-mix(in srgb, var(--panel-chrome) 98%, transparent)),var(--panel-orbit);
  background-size: cover;
  background-position: 78% bottom;
  background: var(--panel-chrome);
  border-color: var(--panel-rule);
}

.side:before{
  margin-bottom: 14px;
  background: var(--panel-coral-deep);
}

.brand, .side .foot{
  color: var(--panel-chrome-t1);
}

.brand-mark, .av{
  background: var(--panel-coral-deep);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--syt-coral) 26%, transparent);
}

.nav a{
  font-size: .86rem;
  padding: 11px 12px;
  min-height: 46px;
  gap: 11px;
  border: 1px solid transparent;
  transition: transform .28s cubic-bezier(.22,1,.36,1),background .25s ease,border-color .25s ease;
  color: var(--panel-chrome-t1);
}

.nav a:hover{
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--syt-coral-vivo) 14%, transparent);
  background: color-mix(in srgb, var(--panel-superficie) 7%, transparent);
  color: var(--panel-chrome-t1);
}

.nav a.active{
  border-color: color-mix(in srgb, var(--syt-coral-vivo) 22%, transparent);
  background: color-mix(in srgb, var(--syt-coral) 16%, transparent);
  color: var(--panel-chrome-t1);
  box-shadow: inset 3px 0 0 var(--panel-coral-deep);
}

.nav a .i{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: var(--panel-chrome-alt);
  color: var(--panel-chrome-t1);
}

.nav a.active .i{
  background: var(--panel-coral-deep);
  color: var(--panel-chrome-t1);
}

.top{
  padding-inline: clamp(20px,3vw,42px);
  background-color: color-mix(in srgb, var(--panel-chrome) 96%, transparent);
  box-shadow: 0 14px 42px -34px color-mix(in srgb, var(--syt-coral-vivo) 80%, transparent);
  min-height: 72px;
  background-size: cover;
  background-position: center right;
  border-bottom: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 23%, transparent);
  background: var(--panel-chrome);
  border-color: var(--panel-rule);
  background-image: none;
}

.top h2{
  font-size: clamp(1.16rem,1.4vw,1.55rem);
  letter-spacing: -.045em;
  color: var(--panel-chrome-t1);
}

/* Sin el pulso infinito. Esta pastilla dice "Garantia + horario + documentos":
   es un recordatorio permanente, no una alerta. Latiendo cada 5 segundos en la
   barra superior le grita a Loreto todo el dia por algo que nunca cambia, y
   ademas gasta el recurso: cuando de verdad haya que mirar algo, el
   movimiento ya no significa nada. El movimiento se reserva para lo que pasa,
   no para lo que esta. */
.ops-pill{
  border: 1px solid color-mix(in srgb, var(--panel-chrome-t1) 18%, transparent);
  box-shadow: 0 12px 32px -22px color-mix(in srgb, var(--naranjo) 80%, transparent);
  background: color-mix(in srgb, var(--naranjo) 16%, transparent);
  color: var(--panel-chrome-t2);
}

.search, .mes{
  background: var(--panel-chrome-alt);
  border-color: var(--panel-rule);
  color: var(--panel-chrome-t1);
}

.search::placeholder{
  color: var(--panel-chrome-t1);
}

.sub, .kpi .l, .side .foot, .empty, .muted, .desc{
  color: var(--panel-copy);
}

.kpi, .box, .card, .compact-kpi, .ag-kpi, .ag-card, .hor-card, .client-card, .inv-kpi, .inv-color-card, .exec-shell, .exec-stat, .exec-panel, .tur-card, .tl-card, .alert-vcard, .modal, .cost-item, .box-datos, .box-docs, .box-logistica, .box-online, .box-plata, .tur-calor, .tur-franja{
  border: 1px solid var(--panel-line);
  position: relative;
  overflow: hidden;
  color: var(--panel-chrome-t1);
  background: var(--panel-chrome-alt);
  background-image: linear-gradient(145deg,color-mix(in srgb, var(--panel-chrome-t1) 4%, transparent),transparent 66%);
  background-blend-mode: normal;
  border-color: var(--panel-rule);
  box-shadow: var(--panel-dark-shadow);
}

.kpi, .box, .card, .compact-kpi, .ag-kpi, .ag-card, .hor-card, .client-card, .inv-kpi, .inv-color-card, .exec-shell, .exec-stat, .exec-panel, .tur-card, .tl-card, .alert-vcard, .modal, .cost-item, .box-datos, .box-docs, .box-logistica, .box-online, .box-plata, .tur-calor, .tur-franja, .panel, .person, .summary-row, .notice, .topbar, .actions, .shell{
  background-color: var(--panel-chrome-alt);
  background-image: none;
}

.kpi:nth-child(2n), .ag-card:nth-child(3n), .hor-card:nth-child(2n), .exec-panel:nth-child(2n), .tur-card:nth-child(2n), .focus-card.critical, .focus-card.warning, .hor-filter, .box-logistica, .kpi.danger, .tur-prioridades, .tur-cobranza, .schedule-help, .hor-day, .hc-time-row, .tur-staff-form, .tur-risk, .tur-name, .ag-carga{
  background-color: var(--panel-chrome-alt);
  background-image: none;
  color: var(--panel-chrome-t1);
}

.exec-head, .exec-tabs, .tur-prioridades-head, .hor-filter-head{
  color: var(--panel-chrome-t1);
  background: var(--panel-tinta-1);
  background-image: none;
  border-color: var(--panel-rule);
}

.exec-tab:not(.active), .tur-tab:not(.active){
  background: var(--panel-chrome-alt);
  color: var(--panel-chrome-t1);
  border-color: var(--panel-rule);
}

.metric-card, .focus-card, .v2-surface, .logistica-main>div{
  color: var(--panel-chrome-t1);
  background: var(--panel-chrome-alt);
  background-image: none;
  border-color: var(--panel-rule);
  box-shadow: var(--panel-dark-shadow);
}

.metric-card .metric-desc, .focus-card p{
  color: var(--panel-copy);
}

.metric-card .metric-value{
  color: var(--panel-chrome-t1);
}

.panel, .person, .summary-row, .notice{
  border-color: var(--panel-rule);
  color: var(--panel-chrome-t1);
  box-shadow: var(--panel-dark-shadow);
}

.panel-head{
  border-color: var(--panel-rule);
}

.panel-sub, .field label, .stock-note, .stock-note b, .save-state, .empty, .loading, .error{
  color: var(--panel-copy);
}

.topbar, .actions{
  background: var(--panel-chrome);
  border-color: var(--panel-rule);
}

.shell{
  background: var(--panel-base);
}

.person, .summary-row{
  background: var(--panel-chrome-alt);
}

.n, .pill{
  background: var(--panel-chrome-linea);
  color: var(--panel-chrome-t1);
}

.pill.ok{
  background: color-mix(in srgb, var(--ok-relleno) 18%, transparent);
  color: var(--panel-chrome-t3);
}

.pill.warn{
  background: color-mix(in srgb, var(--syt-coral) 16%, transparent);
  color: var(--panel-chrome-t2);
}

.pill.bad{
  background: color-mix(in srgb, var(--syt-coral-vivo) 16%, transparent);
  color: var(--panel-chrome-t2);
}

.summary-row.over{
  background: color-mix(in srgb, var(--syt-coral-vivo) 11%, transparent);
  border-color: color-mix(in srgb, var(--syt-coral-vivo) 55%, transparent);
}

.kpi::before, .box::before, .tl-card::before, .tur-card::before, .hor-card::before{
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--panel-chrome-t1) 72%, transparent);
  opacity: .9;
  border-color: color-mix(in srgb, var(--panel-chrome-t1) 6%, transparent);
}

.kpi .v, .compact-kpi b, .ag-kpi b, .inv-kpi b, .h1, .vh h1, .vh h2, .box h2, .box h3, .card h2, .card h3{
  color: var(--panel-chrome-t1);
}

.kpi .v.red{
  color: var(--syt-coral-vivo);
}

.kpi .v.ok{
  color: var(--panel-chrome-t3);
}

.btn{
  background: var(--panel-chrome-alt);
  border-color: var(--panel-rule);
  color: var(--panel-chrome-t1);
}

.btn:hover{
  background: var(--panel-chrome-linea);
}

.btn.pri{
  background: var(--panel-coral-deep);
  border-color: var(--panel-coral-deep);
}

.chip.ch-naranja{
  background: color-mix(in srgb, var(--syt-coral) 16%, transparent);
  color: var(--panel-chrome-t2);
}

.chip.ch-ok{
  background: color-mix(in srgb, var(--ok-relleno) 18%, transparent);
  color: var(--panel-chrome-t3);
}

.chip.ch-gray{
  background: color-mix(in srgb, var(--panel-superficie) 10%, transparent);
  color: var(--panel-chrome-t1);
}

.chip.ch-red{
  background: color-mix(in srgb, var(--syt-coral-vivo) 16%, transparent);
  color: var(--panel-chrome-t2);
}

table{
  color: var(--panel-chrome-t1);
}

table th{
  background: var(--panel-chrome);
  color: var(--panel-chrome-t1);
  border-color: var(--panel-rule);
}

table td{
  border-color: var(--panel-rule);
}

tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--panel-superficie) 3%, transparent);
}

tbody tr:hover, tbody tr:nth-child(even):hover{
  background: color-mix(in srgb, var(--syt-coral) 10%, transparent);
}

.s0{
  color: var(--panel-chrome-t3);
}

.sx{
  color: var(--panel-chrome-t2);
}

.hor-card [data-hora]{
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--panel-chrome-t1);
}

.day:nth-child(odd), .day:nth-child(even), .tur-day{
  background: var(--panel-chrome-alt);
  border-color: var(--panel-rule);
}

.tur-day-head .d-count{
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel-chrome-linea);
  color: var(--panel-chrome-t1);
}

.tl-card::after{
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,color-mix(in srgb, var(--syt-coral) 24%, transparent),transparent 70%);
}

.tl-card.sel, .tur-calor-dia.selected{
  border-color: var(--panel-coral-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--syt-coral) 16%, transparent),var(--panel-dark-shadow);
}

.tur-card.ent{
  border-left: 5px solid var(--ok);
  border-left-color: var(--panel-chrome-t3);
}

.tur-card.dev{
  border-left: 5px solid var(--panel-coral);
  border-left-color: var(--panel-coral-deep);
}

.tur-tab.active{
  background: var(--panel-coral-deep);
  border-color: var(--panel-coral-deep);
}

input, select, textarea{
  background: var(--panel-tinta-1);
  border-color: var(--panel-rule);
  color: var(--panel-chrome-t1);
}

input::placeholder, textarea::placeholder{
  color: var(--panel-chrome-t1);
}

:root{
  --panel-max: 1440px;
  --ink: var(--panel-chrome-alt);
  --muted: var(--panel-tinta-3);
  --quiet: var(--panel-chrome-t3);
  --surface: var(--panel-chrome-t1);
  --surface-2: var(--panel-lienzo);
  --line-soft: var(--panel-linea);
  --focus: var(--syt-coral-vivo);
  --blue: var(--panel-chrome-t3);
  --violet: var(--panel-chrome-t3);
  --syt-black: var(--panel-chrome);
  --syt-white: var(--panel-chrome-t1);
  --syt-coral: var(--syt-coral-vivo);
  --syt-berry: var(--syt-coral);
  --syt-green: var(--ok-relleno);
  --syt-ink: var(--panel-tinta-1);
  --syt-muted: var(--panel-tinta-3);
  --syt-line-light: color-mix(in srgb, var(--panel-chrome) 12%, transparent);
  --syt-line-dark: color-mix(in srgb, var(--panel-chrome-t1) 14%, transparent);
  --syt-radius-md: 18px;
  --syt-radius-lg: 24px;
  --syt-shadow-card: 0 1px 2px color-mix(in srgb, var(--panel-chrome) 5%, transparent),
    0 18px 48px -30px color-mix(in srgb, var(--panel-chrome) 36%, transparent);
  --syt-shadow-card-hover: 0 2px 4px color-mix(in srgb, var(--panel-chrome) 6%, transparent),
    0 24px 58px -28px color-mix(in srgb, var(--syt-coral-vivo) 26%, transparent);
  --syt-ease: cubic-bezier(.22, 1, .36, 1);
  --solar-black: var(--panel-chrome);
  --solar-ink: var(--panel-tinta-1);
  --solar-white: var(--panel-chrome-t1);
  --solar-coral: var(--syt-coral-vivo);
  --solar-orange: var(--syt-coral-vivo);
  --solar-green: var(--ok-relleno);
  --solar-dark-image: url('../images/surfaces/solar-dark-v3.webp');
  --solar-light-image: url('../images/surfaces/solar-light-v3.webp');
  --solar-feather-dark: url('../images/surfaces/solar-feather-dark.webp');
  --solar-feather-light: url('../images/surfaces/solar-feather-light.webp');
  --solar-lamina-dark: url('../images/surfaces/solar-lamina-dark.webp');
  --solar-lamina-light: url('../images/surfaces/solar-lamina-light.webp');
  --solar-eclipse-dark: url('../images/surfaces/solar-eclipse-dark.webp');
  --solar-ember-dark: url('../images/surfaces/solar-ember-dark.webp');
  --solar-contour-light: url('../images/surfaces/solar-contour-light.webp');
  --solar-corridor-dark: url('../images/surfaces/solar-corridor-dark.webp');
  --font-display: 'League Spartan',Arial,sans-serif;
  --font-body: 'League Spartan',Arial,sans-serif;
  --font-mono: 'League Spartan',Arial,sans-serif;
  --accent: var(--syt-coral-vivo);
  --red: var(--error-texto);   /* el rojo de error es rojo, no naranjo */
  --panel-coral: var(--syt-coral-vivo);
  --panel-orange: var(--syt-coral-vivo);
  --panel-ink: var(--panel-tinta-1);
  --panel-paper: var(--panel-chrome-t1);
  --panel-line: color-mix(in srgb, var(--panel-chrome) 13%, transparent);
  --panel-shadow: 0 24px 58px -46px color-mix(in srgb, var(--panel-chrome) 52%, transparent);
  --panel-lift: 8px 8px 0 color-mix(in srgb, var(--syt-coral-vivo) 7%, transparent),0 32px 72px -50px color-mix(in srgb, var(--syt-coral-vivo) 42%, transparent);
  --panel-orbit: url('../images/surfaces/syt-panel-orbit-dark-v1.webp');
  --panel-coral-deep: var(--syt-coral);
  --panel-coral-soft: color-mix(in srgb, var(--syt-coral) 16%, transparent);
  --panel-base: var(--panel-chrome);
  --panel-surface: var(--panel-chrome-alt);
  --panel-surface-2: var(--panel-chrome-alt);
  --panel-white: var(--panel-chrome-t1);
  --panel-copy: color-mix(in srgb, var(--panel-chrome-t1) 72%, transparent);
  --panel-rule: color-mix(in srgb, var(--panel-chrome-t1) 12%, transparent);
  --panel-dark-shadow: 0 24px 68px -44px color-mix(in srgb, var(--panel-chrome) 92%, transparent),0 0 0 1px color-mix(in srgb, var(--panel-chrome-t1) 4%, transparent);
  --p-canvas: var(--panel-lienzo);
  --p-surface: var(--panel-chrome-t1);
  --p-surface-2: var(--panel-lienzo);
  --p-line: var(--panel-linea);
  --p-line-strong: var(--panel-chrome-t2);
  --p-ink: var(--panel-chrome-alt);
  --p-ink-2: var(--panel-tinta-2);
  --p-ink-3: var(--panel-tinta-3);
  --p-coral: var(--syt-coral);
  --p-coral-ink: var(--syt-coral-texto);
  --p-ok: var(--ok-relleno);
  --p-warn: var(--alerta-relleno);
  --p-red: var(--syt-coral-relleno);
  --p-chrome: var(--panel-chrome);
  --p-chrome-line: color-mix(in srgb, var(--panel-chrome-t1) 12%, transparent);
  --p-t-display: clamp(1.35rem,1.05rem+1.1vw,1.75rem);
  --p-t-title: 1.02rem;
  --p-t-body: .875rem;
  --p-t-label: .72rem;
  --p-t-micro: .66rem;
}

body{
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--panel-ink);
  background: var(--p-canvas);
}

.main, .content, .view{
  background: transparent;
}

html body .content div, html body .content section, html body .content article, html body .content aside, html body .content header, html body .content footer, html body .content ul, html body .content ol, html body .content li, html body .content table, html body .content tbody, html body .content tr, html body .content td, html body .content span, html body .content b, html body .content strong, html body .content p, html body .content h2, html body .content h3, html body .content h4, html body .content small, html body .content label, html body .content dl, html body .content dt, html body .content dd{
  background-color: transparent;
  background-image: none;
}

.metric-card, .focus-card, .v2-surface, .client-card, .hor-card, .box, .card, .kpi, .slot, .day, .tur-card, .inv-color-card, .tur-franja, .tur-day, .inv-mapa-dia, .tur-calor-dia, .agenda-row, .exec-shell, .exec-panel, .tur-prioridades, .tur-agenda-unica, .tur-cobranza, .ftl-resumen, .ctx-help, .money-custody, .logistica-main>div{
  background: var(--p-surface);
  background-image: none;
  border-color: var(--p-line);
  color: var(--p-ink);
}

html body .content{
  color: var(--p-ink);
}

html body .content :where(h1,h2,h3,h4,h5,h6,p,span,b,strong,em,small,li,label, div,td,dt,dd,figcaption,summary,legend,a){
  color: var(--p-ink);
}

.content :where(.db-value,.metric-value,.kpi .v,.money,.num,.rank-val){
  color: var(--p-ink);
}

html body .content .sub, html body .content .metric-desc, html body .content .v2-section-head p, html body .content .client-card p, html body .content .hc-meta, html body .content .cc-school, html body .content .source-note, html body .content .data-note{
  color: var(--p-ink-2);
}

html body .content .cc-stat span, html body .content .eyebrow{
  color: var(--p-ink-3);
}

html body .top .session-exit{
  background: color-mix(in srgb, var(--panel-superficie) 10%, transparent);
  color: var(--panel-chrome-t1);
  border: 1px solid var(--p-chrome-line);
}

.chip, .badge, .pill, .cc-stat, .cc-count, .status-pill, .inv-chip, .ops-pill, .saldo-badge, .ac-state, .agenda-counts span, .tur-tab, .exec-tab, .inv-filter-chip, .hor-filter{
  background: var(--p-surface-2);
  color: var(--p-ink);
  border: 1px solid var(--p-line);
}

.cc-stat b, .agenda-counts span b{
  color: var(--p-ink);
}

html body .content .focus-card.critical, html body .content .focus-card.warning, html body .content .focus-card.good, html body .content .kpi.danger, html body .content .kpi.acc, html body .content .metric-card.good, html body .content .metric-card.bad, html body .content .metric-card.warn, html body .content .metric-card.blue, html body .content .season-day.high, html body .content .season-day.medium, html body .content .tur-risk{
  background: var(--p-surface);
  background-image: none;
  color: var(--p-ink);
}

html body .content .focus-card.critical{
  border-left: 4px solid var(--p-red);
}

html body .content .focus-card.warning{
  border-left: 4px solid var(--p-warn);
}

html body .content .focus-card.good{
  border-left: 4px solid var(--p-ok);
}

.chip.ch-ok, .status-pill.ok, .ac-state.ok, .inv-chip.ok{
  background: var(--panel-lienzo);
  color: var(--p-ok);
  border-color: var(--panel-chrome-t2);
}

.chip.ch-naranja, .status-pill.warn, .ac-state.warn, .inv-chip.cuidado{
  background: var(--panel-lienzo);
  color: var(--p-warn);
  border-color: var(--panel-chrome-t2);
}

.chip.ch-red, .status-pill.bad, .ac-state.bad, .inv-chip.critico{
  background: var(--panel-lienzo);
  color: var(--p-red);
  border-color: var(--panel-linea);
}

.tur-tab.active, .exec-tab.active, .inv-filter-chip.active, .btn.pri{
  background: var(--p-coral);
  color: var(--panel-chrome-t1);
  border-color: var(--p-coral);
}

.side, .top{
  background: var(--p-chrome);
  color: var(--panel-chrome-t1);
}

.side *, .top *{
  color: inherit;
}

.side .nav a{
  color: var(--panel-chrome-t1);
}

.side .nav a:hover{
  color: var(--panel-chrome-t1);
  background: color-mix(in srgb, var(--panel-superficie) 7%, transparent);
}

.side .nav a.active{
  background: var(--p-coral);
  color: var(--panel-chrome-t1);
}

.side .foot{
  position: relative;
  z-index: 1;
  border-color: var(--panel-rule);
  color: var(--panel-chrome-t1);
}

.top .search{
  background: color-mix(in srgb, var(--panel-superficie) 8%, transparent);
  color: var(--panel-chrome-t1);
  border-color: var(--p-chrome-line);
}

.top .search::placeholder{
  color: var(--panel-chrome-t1);
}

html body .side .brand{
  position: static;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 16px;
  margin: 0 0 6px;
  z-index: 2;
}

html body .side .nav{
  margin-top: 0;
}

html body .side .nav-group{
  display: block;
  margin: 16px 12px 5px;
  padding: 0;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--panel-chrome-t1);
}

html body .side .nav a{
  font-size: .83rem;
  padding: 9px 12px;
  min-height: 40px;
}

html body .side .nav a.nav-home{
  font-size: .9rem;
  font-weight: 800;
  min-height: 44px;
}

html body .side .nav a.nav-action{
  margin-top: 18px;
  border: 1px dashed color-mix(in srgb, var(--panel-chrome-t1) 22%, transparent);
  border-radius: 11px;
  color: var(--panel-chrome-t1);
}

html body .content .cc-number, html body .content .cc-number *{
  background: var(--panel-chrome-alt);
  color: var(--panel-chrome-t1);
  border: 0;
}

.h1, .v2-intro .h1{
  font-size: var(--p-t-display);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.v2-section-head h3, .box h3, .card h3{
  font-size: var(--p-t-title);
  letter-spacing: -.01em;
}

.eyebrow{
  font-size: var(--p-t-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 800;
}

.sub, .metric-desc{
  font-size: var(--p-t-body);
  line-height: 1.55;
}

.metric-value, .kpi .v, .metric-card .metric-value{
  font-size: clamp(1.5rem,1.1rem+1.2vw,2.05rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--p-ink);
  font-variant-numeric: tabular-nums;
}

td.num, .money, .mono, .cc-stat b, .rent-table td, .sd-total, .rank-val{
  font-variant-numeric: tabular-nums;
}

.content table, .rent-table, .ftl-tbl, .tur-cobranza table, .tur-agenda-unica table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--p-surface);
}

.content table th, .rent-table th, .ftl-tbl th, .tur-cobranza th, .tur-agenda-unica th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel-chrome-alt);
  color: var(--panel-chrome-t1);
  border-bottom: 1px solid var(--p-line-strong);
  font-size: var(--p-t-label);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 11px 12px;
  text-align: left;
  white-space: nowrap;
}

.content table td, .rent-table td, .ftl-tbl td{
  padding: 11px 12px;
  border-bottom: 1px solid var(--p-line);
  color: var(--p-ink);
  font-size: var(--p-t-body);
}

.content table tbody tr:nth-child(even) td{
  background: var(--p-surface-2);
}

.content table tbody tr:hover td{
  background: var(--panel-lienzo);
}

.table-wrap, .ftl-tbl-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--p-line);
  border-radius: 12px;
  background: var(--p-surface);
}

.content{
  position: relative;
  isolation: isolate;
  padding: clamp(22px,3vw,42px);
  max-width: 1580px;
  overflow-x: clip;
}

.content img, .content video, .content canvas{
  max-width: 100%;
  height: auto;
}

.cc-school, .client-card h3, .agenda-row .ag-name, .rent-table td:first-child, .tur-name, .hor-card h3{
  overflow-wrap: anywhere;
  white-space: normal;
}

.content a:focus-visible, .content button:focus-visible, .content [tabindex]:focus-visible, .client-card:focus-visible{
  outline: 3px solid var(--p-coral);
  outline-offset: 2px;
  border-radius: 8px;
}

html body .content [id="horarios"] :is(div,section,article,aside,header,footer,ul,ol, li,table,tbody,tr,td,th,span,b,strong,p,h2,h3,h4,small,label,dl,dt,dd), html body .content [id="turnos"] :is(div,section,article,aside,header,footer,ul,ol, li,table,tbody,tr,td,th,span,b,strong,p,h2,h3,h4,small,label,dl,dt,dd){
  color: var(--p-ink);
  background-color: transparent;
  background-image: none;
  border-color: var(--p-line);
}

html body .content [id="horarios"] :is(.hor-card,.hor-day,.box,.card,.kpi,.metric-card,.v2-surface,.tur-card), html body .content [id="turnos"] :is(.tur-card,.tur-day,.tur-franja,.box,.card,.kpi,.metric-card,.v2-surface,.tur-prioridades,.tur-cobranza,.tur-agenda-unica){
  background-color: var(--p-surface);
  border: 1px solid var(--p-line);
}

html body .content [id="horarios"] th, html body .content [id="turnos"] th{
  background-color: var(--panel-chrome-alt);
  color: var(--panel-chrome-t1);
}

html body .content [id="horarios"] :is(button,a,input,select), html body .content [id="turnos"] :is(button,a,input,select){
  color: var(--p-ink);
  background-color: var(--p-surface-2);
  background-image: none;
  border: 1px solid var(--p-line);
}

html body .content [id="horarios"] .active, html body .content [id="turnos"] .active{
  background-color: var(--p-coral);
  color: var(--panel-chrome-t1);
  border-color: var(--p-coral);
}

@keyframes spin{to{transform:rotate(360deg)}}

@keyframes f{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@keyframes fadeOv{from{opacity:0}to{opacity:1}}

@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}

@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@keyframes shimmer{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--syt-coral-vivo) 30%, transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent)}}

@keyframes invCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@keyframes invSaved{0%{transform:scale(1.15)}100%{transform:scale(1)}}

@keyframes fiUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@keyframes panel-solar-pulse{0%,100%{box-shadow:0 18px 38px -22px color-mix(in srgb, var(--syt-coral-vivo) 64%, transparent)}50%{box-shadow:0 22px 46px -18px color-mix(in srgb, var(--syt-coral-vivo) 88%, transparent)}}

}



/* =========================================================================
   FASE 2 · Contrato semántico del panel
   Chrome oscuro; toda información de negocio vive en superficies claras.
   ========================================================================= */

html, body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;
}

body[data-page="index"]{
  background:var(--panel-lienzo);
  color:var(--panel-tinta-1);
  --red:var(--error-texto);
}
body[data-page="index"] .side,
body[data-page="index"] .top,
body[data-page="index"] .mobile-nav,
body[data-page="index"] .more-menu{
  background:var(--panel-chrome);
  color:var(--panel-chrome-t1);
}
body[data-page="index"] .nav-group{
  color:var(--panel-chrome-t3);
}
body[data-page="index"] .nav a,
body[data-page="index"] .mobile-nav a,
body[data-page="index"] .more-menu a{
  color:var(--panel-chrome-t2);
}

body[data-page="index"] .nav a.active,
body[data-page="index"] .nav-action.active,
body[data-page="index"] .mobile-nav a.active,
body[data-page="index"] .btn.pri,
body[data-page="index"] .tur-tab.active,
body[data-page="index"] .hor-day.active,
body[data-page="index"] .exec-tab.active,
body[data-page="index"] .inv-filter-chip.active,
body[data-page="index"] .brand-mark,
body[data-page="index"] .av{
  background:var(--syt-coral-relleno);
  color:var(--panel-chrome-t1);
}
body[data-page="index"] .nav a.active *,
body[data-page="index"] .nav-action.active *,
body[data-page="index"] .mobile-nav a.active *,
body[data-page="index"] .btn.pri *,
body[data-page="index"] .tur-tab.active *,
body[data-page="index"] .hor-day.active *,
body[data-page="index"] .exec-tab.active *,
body[data-page="index"] .inv-filter-chip.active *{
  color:inherit;
}

body[data-page="index"] .main,
body[data-page="index"] .content,
body[data-page="index"] .view{
  background:var(--panel-lienzo);
  color:var(--panel-tinta-1);
}
body[data-page="index"] .content h1,
body[data-page="index"] .content h2,
body[data-page="index"] .content h3,
body[data-page="index"] .content h4,
body[data-page="index"] .content strong,
body[data-page="index"] .content b{
  color:var(--panel-tinta-1);
}
body[data-page="index"] .content p,
body[data-page="index"] .content li,
body[data-page="index"] .content .sub,
body[data-page="index"] .content .hint,
body[data-page="index"] .content .l,
body[data-page="index"] .content .foot{
  color:var(--panel-tinta-3);
}
body[data-page="index"] .foot{
  color:var(--panel-chrome-t3);
}

body[data-page="index"] .kpi,
body[data-page="index"] .box,
body[data-page="index"] .card,
body[data-page="index"] .metric-card,
body[data-page="index"] .panel,
body[data-page="index"] .exec-card,
body[data-page="index"] .rank-card,
body[data-page="index"] .table-wrap,
body[data-page="index"] .modal-card,
body[data-page="index"] .drawer-card,
body[data-page="index"] .sheet{
  background:var(--panel-superficie);
  color:var(--panel-tinta-1);
}
body[data-page="index"] table{
  background:var(--panel-superficie);
  color:var(--panel-tinta-2);
}
body[data-page="index"] table th{
  background:var(--panel-lienzo);
  color:var(--panel-tinta-2);
}
body[data-page="index"] table td{
  color:var(--panel-tinta-2);
}
body[data-page="index"] .rowlbl-syt,
body[data-page="index"] .empty-cole,
body[data-page="index"] .td-total-cole,
body[data-page="index"] .td-total-disp{
  color:var(--panel-tinta-3);
}
body[data-page="index"] .inv-mapa-titulo{
  color:var(--panel-tinta-3);
}
body[data-page="index"] .d-date{
  color:var(--panel-tinta-3);
}
body[data-page="index"] .inv-filter-chip.active .cnt{
  background:transparent;
  color:inherit;
}

body[data-page="index"] .ok,
body[data-page="index"] .inv-disp-ok,
body[data-page="index"] .inv-chip.ok,
body[data-page="index"] .inv-mapa-ok{
  color:var(--ok-texto);
}
body[data-page="index"] .cuidado,
body[data-page="index"] .inv-disp-cuidado,
body[data-page="index"] .inv-chip.cuidado,
body[data-page="index"] .inv-mapa-cuidado{
  color:var(--alerta-texto);
}
body[data-page="index"] .pending{
  background:var(--alerta-relleno);
  color:var(--panel-chrome-t1);
}
body[data-page="index"] .paid{
  color:var(--panel-chrome-t1);
}
body[data-page="index"] .critico,
body[data-page="index"] .risk,
body[data-page="index"] .ch-red,
body[data-page="index"] .sd-risk,
body[data-page="index"] .inv-disp-critico,
body[data-page="index"] .inv-mapa-critico{
  color:var(--error-texto);
}

body[data-page="index"] input,
body[data-page="index"] select,
body[data-page="index"] textarea{
  background:var(--panel-superficie);
  color:var(--panel-tinta-1);
  border-color:var(--panel-linea);
  min-height:var(--toque);
}
body[data-page="index"] input::placeholder,
body[data-page="index"] textarea::placeholder{
  color:var(--panel-tinta-3);
}

body[data-page="desk"]{
  background:var(--panel-lienzo);
  color:var(--panel-tinta-1);
}
body[data-page="desk"] header,
body[data-page="desk"] .topbar{
  background:var(--panel-chrome);
  color:var(--panel-chrome-t1);
}
body[data-page="desk"] .card,
body[data-page="desk"] .panel,
body[data-page="desk"] .list{
  background:var(--panel-superficie);
  color:var(--panel-tinta-1);
}

body[data-page="ficha-online"]{
  background:var(--panel-lienzo);
  color:var(--panel-tinta-1);
}
body[data-page="ficha-online"] .topbar{
  background:var(--panel-chrome);
  color:var(--panel-chrome-t1);
}
body[data-page="ficha-online"] .panel,
body[data-page="ficha-online"] .card,
body[data-page="ficha-online"] .summary-row,
body[data-page="ficha-online"] .person{
  background:var(--panel-superficie);
  color:var(--panel-tinta-1);
}

body[data-page="disponibilidad"]{
  background:var(--panel-lienzo);
  color:var(--panel-tinta-1);
}



/* Fase 7: importador determinista de tallaje. */
body[data-page="index"].tallaje-import-open{overflow:hidden}
body[data-page="index"] .ftl-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--e-2);flex-wrap:wrap}
body[data-page="index"] .ftl-head-actions>strong{font-variant-numeric:tabular-nums;color:var(--panel-chrome-t1)}
body[data-page="index"] .tallaje-import-trigger{min-height:var(--toque);white-space:nowrap}
/* La lista se edita arriba y el conteo queda al final, donde se prepara el
   pedido. Los avisos son texto además de color: bodega necesita saber qué
   falta sin adivinar por un borde rojo. */
body[data-page="index"] .ftl-wrap .ftl-resumen-box{margin-top:var(--e-5)}
body[data-page="index"] .ftl-srv{display:inline-flex;flex-wrap:wrap;gap:var(--e-1);align-items:center}
body[data-page="index"] .ftl-srv-chip{display:inline-flex;align-items:center;min-height:28px;padding:3px 8px;border:1px solid var(--panel-linea);border-radius:var(--r-full);font-size:.72rem;font-weight:700;line-height:1.2}
body[data-page="index"] .ftl-srv-chip.ok{border-color:color-mix(in srgb,var(--ok-texto) 35%,var(--panel-linea));background:color-mix(in srgb,var(--ok-texto) 9%,var(--panel-superficie));color:var(--ok-texto)}
body[data-page="index"] .ftl-srv-chip.warn{border-color:color-mix(in srgb,var(--error-texto) 32%,var(--panel-linea));background:color-mix(in srgb,var(--error-relleno) 11%,var(--panel-superficie));color:var(--error-texto)}
body[data-page="index"] .ftl-vaciar{border-color:color-mix(in srgb,var(--error-texto) 36%,var(--panel-linea));color:var(--error-texto)}
body[data-page="index"] .ftl-vaciar:hover{background:color-mix(in srgb,var(--error-relleno) 12%,var(--panel-superficie))}
body[data-page="index"] .ftl-vaciar:focus-visible{outline:3px solid var(--syt-coral-vivo);outline-offset:3px}
body[data-page="index"] .tallaje-import-overlay{z-index:90;align-items:center;justify-content:center;padding:var(--e-4);background:color-mix(in srgb,var(--panel-chrome) 72%,transparent)}
body[data-page="index"] .tallaje-import-modal{width:min(1120px,100%);max-width:1120px;max-height:calc(100dvh - (var(--e-4) * 2));padding:0;overflow:auto;overscroll-behavior:contain;background:var(--panel-superficie);color:var(--panel-tinta-1);border:1px solid var(--panel-linea);border-radius:var(--r-4);box-shadow:var(--s-3)}
body[data-page="index"] .tallaje-import-heading{position:sticky;inset-block-start:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-4);padding:var(--e-5);border-bottom:1px solid var(--panel-linea);background:color-mix(in srgb,var(--panel-superficie) 96%,transparent);backdrop-filter:blur(18px)}
body[data-page="index"] .tallaje-import-heading h3{margin:var(--e-1) 0 0;color:var(--panel-tinta-1);font-size:clamp(1.25rem,2vw,1.65rem)}
body[data-page="index"] .tallaje-import-context{margin:var(--e-1) 0 0;color:var(--panel-tinta-3);font-size:.9rem}
body[data-page="index"] .tallaje-import-close{display:inline-grid;place-items:center;flex:0 0 var(--toque);inline-size:var(--toque);block-size:var(--toque);min-height:var(--toque);border:1px solid var(--panel-linea);border-radius:var(--r-2);background:var(--panel-superficie);color:var(--panel-tinta-1);cursor:pointer}
body[data-page="index"] .tallaje-import-close:hover{background:var(--panel-lienzo)}
body[data-page="index"] .tallaje-import-close:focus-visible,body[data-page="index"] .tallaje-dropzone:focus-visible,body[data-page="index"] .tallaje-import-body input:focus-visible,body[data-page="index"] .tallaje-import-body select:focus-visible{outline:3px solid var(--syt-coral-vivo);outline-offset:3px}
body[data-page="index"] .tallaje-import-body{padding:var(--e-5)}
body[data-page="index"] .tallaje-import-step{display:grid;gap:var(--e-5)}
body[data-page="index"] .tallaje-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-3)}
body[data-page="index"] .tallaje-section-heading h4{margin:0;color:var(--panel-tinta-1);font-size:1.05rem}
body[data-page="index"] .tallaje-section-heading span{display:block;margin-top:var(--e-1);color:var(--panel-tinta-3);font-size:.82rem}
body[data-page="index"] .tallaje-file-input{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body[data-page="index"] .tallaje-dropzone{display:grid;place-items:center;gap:var(--e-2);min-height:190px;padding:var(--e-6) var(--e-4);border:2px dashed var(--panel-linea);border-radius:var(--r-3);background:var(--panel-lienzo);color:var(--panel-tinta-2);text-align:center;cursor:pointer;transition:border-color var(--t-2) ease,background var(--t-2) ease,transform var(--t-2) ease}
body[data-page="index"] .tallaje-dropzone:hover,body[data-page="index"] .tallaje-dropzone.is-dragging{border-color:var(--syt-coral-vivo);background:color-mix(in srgb,var(--syt-coral-vivo) 8%,var(--panel-superficie));transform:translateY(-2px)}
body[data-page="index"] .tallaje-dropzone strong{color:var(--panel-tinta-1);font-size:1.08rem}
body[data-page="index"] .tallaje-dropzone small{color:var(--panel-tinta-3)}
body[data-page="index"] .tallaje-drop-icon{display:grid;place-items:center;inline-size:52px;block-size:52px;border-radius:var(--r-full);background:var(--panel-chrome);color:var(--panel-chrome-t1);font-size:1.5rem}
body[data-page="index"] .tallaje-safety-note,body[data-page="index"] .tallaje-import-error,body[data-page="index"] .tallaje-import-ok{display:flex;align-items:flex-start;gap:var(--e-2);flex-wrap:wrap;padding:var(--e-3) var(--e-4);border:1px solid var(--panel-linea);border-radius:var(--r-2);background:var(--panel-lienzo);color:var(--panel-tinta-2)}
body[data-page="index"] .tallaje-safety-note strong,body[data-page="index"] .tallaje-import-ok strong{color:var(--ok-texto)}
body[data-page="index"] .tallaje-import-error{display:grid;border-color:color-mix(in srgb,var(--error-relleno) 45%,var(--panel-linea));background:color-mix(in srgb,var(--error-relleno) 8%,var(--panel-superficie))}
body[data-page="index"] .tallaje-import-error strong,body[data-page="index"] .tallaje-import-error span{color:var(--error-texto)}
body[data-page="index"] .tallaje-file-summary{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3) var(--e-4);border:1px solid var(--panel-linea);border-radius:var(--r-2);background:var(--panel-lienzo)}
body[data-page="index"] .tallaje-file-summary>span{font-size:1.6rem}
body[data-page="index"] .tallaje-file-summary div{display:grid;min-width:0}
body[data-page="index"] .tallaje-file-summary strong{overflow-wrap:anywhere;color:var(--panel-tinta-1)}
body[data-page="index"] .tallaje-file-summary small{color:var(--panel-tinta-3)}
body[data-page="index"] .tallaje-progress{inline-size:100%;block-size:14px;overflow:hidden;border:0;border-radius:var(--r-full);accent-color:var(--syt-coral-vivo);background:var(--panel-linea)}
body[data-page="index"] .tallaje-progress::-webkit-progress-bar{background:var(--panel-linea)}
body[data-page="index"] .tallaje-progress::-webkit-progress-value,body[data-page="index"] .tallaje-progress::-moz-progress-bar{background:var(--syt-coral-vivo)}
body[data-page="index"] .tallaje-progress-label{margin:calc(var(--e-4) * -1) 0 0;color:var(--panel-tinta-3);text-align:center;font-variant-numeric:tabular-nums}
body[data-page="index"] .tallaje-preview-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-3)}
body[data-page="index"] .tallaje-preview-counts article{display:grid;gap:var(--e-1);padding:var(--e-4);border:1px solid var(--panel-linea);border-radius:var(--r-2);background:var(--panel-lienzo)}
body[data-page="index"] .tallaje-preview-counts article.is-total{border-color:var(--panel-chrome);background:var(--panel-chrome)}
body[data-page="index"] .tallaje-preview-counts span{color:var(--panel-tinta-3);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
body[data-page="index"] .tallaje-preview-counts strong{color:var(--panel-tinta-1);font-size:clamp(1.8rem,4vw,2.7rem);line-height:1;font-variant-numeric:tabular-nums}
body[data-page="index"] .tallaje-preview-counts .is-total span,body[data-page="index"] .tallaje-preview-counts .is-total strong{color:var(--panel-chrome-t1)}
body[data-page="index"] .tallaje-compare{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);gap:var(--e-4);align-items:stretch;padding:var(--e-4);border:1px solid var(--panel-linea);border-radius:var(--r-3);background:var(--panel-lienzo)}
body[data-page="index"] .tallaje-compare-copy{display:grid;align-content:center;gap:var(--e-1)}
body[data-page="index"] .tallaje-compare-copy span,body[data-page="index"] .tallaje-compare-copy small{color:var(--panel-tinta-3)}
body[data-page="index"] .tallaje-compare-copy strong{color:var(--panel-tinta-1);font-size:1.05rem;font-variant-numeric:tabular-nums}
body[data-page="index"] .tallaje-differences{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-2)}
body[data-page="index"] .tallaje-differences article{display:grid;place-items:center;min-height:96px;padding:var(--e-2);border:1px solid var(--panel-linea);border-radius:var(--r-2);background:var(--panel-superficie)}
body[data-page="index"] .tallaje-differences span{color:var(--panel-tinta-3);font-size:.75rem;font-weight:700;text-transform:uppercase}
body[data-page="index"] .tallaje-differences strong{color:var(--ok-texto);font-size:2rem;font-variant-numeric:tabular-nums}
body[data-page="index"] .tallaje-differences article.is-different{border-color:color-mix(in srgb,var(--error-relleno) 55%,var(--panel-linea));background:color-mix(in srgb,var(--error-relleno) 9%,var(--panel-superficie))}
body[data-page="index"] .tallaje-differences article.is-different strong{color:var(--error-texto)}
body[data-page="index"] .tallaje-issues,body[data-page="index"] .tallaje-row-editor,body[data-page="index"] .tallaje-confirmation,body[data-page="index"] .tallaje-history{display:grid;gap:var(--e-3);padding:var(--e-4);border:1px solid var(--panel-linea);border-radius:var(--r-3);background:var(--panel-superficie)}
body[data-page="index"] .tallaje-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--e-2);flex-wrap:wrap}
body[data-page="index"] .tallaje-issues ul{display:grid;gap:var(--e-2);margin:0;padding:0;list-style:none}
body[data-page="index"] .tallaje-issue{display:grid;gap:var(--e-1);padding:var(--e-3);border-inline-start:4px solid var(--alerta-relleno);border-radius:var(--r-1);background:color-mix(in srgb,var(--alerta-relleno) 8%,var(--panel-superficie));color:var(--alerta-texto)}
body[data-page="index"] .tallaje-issue.is-error{border-inline-start-color:var(--error-relleno);background:color-mix(in srgb,var(--error-relleno) 8%,var(--panel-superficie));color:var(--error-texto)}
body[data-page="index"] .tallaje-issue small{overflow-wrap:anywhere}
body[data-page="index"] .tallaje-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
body[data-page="index"] .tallaje-table-wrap table{min-width:860px;width:100%;border-collapse:collapse}
body[data-page="index"] .tallaje-table-wrap th,body[data-page="index"] .tallaje-table-wrap td{padding:var(--e-2);border-bottom:1px solid var(--panel-linea);color:var(--panel-tinta-2);text-align:start;vertical-align:top}
body[data-page="index"] .tallaje-table-wrap th{color:var(--panel-tinta-3);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase}
body[data-page="index"] .tallaje-table-wrap input[type="text"],body[data-page="index"] .tallaje-table-wrap select{width:100%;min-width:110px;min-height:var(--toque);padding:var(--e-2);border:1px solid var(--panel-linea);border-radius:var(--r-1);background:var(--panel-superficie);color:var(--panel-tinta-1)}
body[data-page="index"] .tallaje-table-wrap input[type="text"]{min-width:220px}
body[data-page="index"] .tallaje-field-error{display:block;margin-top:var(--e-1);color:var(--error-texto);font-size:.72rem;line-height:var(--i-densa)}
body[data-page="index"] .tallaje-field-error[hidden]{display:none}
body[data-page="index"] .tallaje-include-cell label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--e-1);min-height:var(--toque);cursor:pointer}
body[data-page="index"] .tallaje-include-cell input{inline-size:22px;block-size:22px;min-height:22px;accent-color:var(--ok-relleno)}
body[data-page="index"] .tallaje-row-flag{display:inline-flex;padding:2px var(--e-2);border-radius:var(--r-full);background:color-mix(in srgb,var(--alerta-relleno) 12%,var(--panel-superficie));color:var(--alerta-texto);font-size:.72rem;font-weight:700}
body[data-page="index"] .tallaje-row-review td{background:color-mix(in srgb,var(--alerta-relleno) 5%,var(--panel-superficie))}
body[data-page="index"] .tallaje-row-invalid td{background:color-mix(in srgb,var(--error-relleno) 7%,var(--panel-superficie))}
body[data-page="index"] .tallaje-row-invalid [aria-invalid="true"]{border-color:var(--error-relleno);box-shadow:0 0 0 2px color-mix(in srgb,var(--error-relleno) 14%,transparent)}
body[data-page="index"] .tallaje-row-excluded td{background:var(--panel-lienzo);color:var(--panel-tinta-3)}
body[data-page="index"] .tallaje-row-excluded select,body[data-page="index"] .tallaje-row-excluded input[type="text"]{opacity:.68}
body[data-page="index"] .tallaje-confirmation{position:sticky;inset-block-end:0;z-index:1;border-color:var(--panel-chrome);box-shadow:0 -12px 32px color-mix(in srgb,var(--panel-chrome) 10%,transparent)}
body[data-page="index"] .tallaje-confirmation h4,body[data-page="index"] .tallaje-confirmation p{margin:0}
body[data-page="index"] .tallaje-confirmation p{margin-top:var(--e-1);color:var(--panel-tinta-3)}
body[data-page="index"] .tallaje-difference-confirm{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--e-2);min-height:var(--toque);padding:var(--e-3);border-radius:var(--r-2);background:color-mix(in srgb,var(--alerta-relleno) 9%,var(--panel-superficie));color:var(--alerta-texto);cursor:pointer}
body[data-page="index"] .tallaje-difference-confirm[hidden]{display:none}
body[data-page="index"] .tallaje-difference-confirm input{inline-size:22px;block-size:22px;min-height:22px;accent-color:var(--alerta-relleno)}
body[data-page="index"] .tallaje-validation-status{min-height:1.25em;color:var(--panel-tinta-2)}
body[data-page="index"] .tallaje-validation-status.is-error{color:var(--error-texto)}
body[data-page="index"] .tallaje-confirm-actions{display:flex;justify-content:flex-end;gap:var(--e-2);flex-wrap:wrap}
body[data-page="index"] .tallaje-confirm-actions .btn{min-height:var(--toque)}
body[data-page="index"] .tallaje-confirm-actions .btn[disabled]{cursor:not-allowed;opacity:.52}
body[data-page="index"] .tallaje-history-list{display:grid;gap:var(--e-2);margin:0;padding:0;list-style:none}
body[data-page="index"] .tallaje-history-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e-3);padding:var(--e-3);border:1px solid var(--panel-linea);border-radius:var(--r-2);background:var(--panel-lienzo)}
body[data-page="index"] .tallaje-history-main,body[data-page="index"] .tallaje-history-meta{display:grid;gap:var(--e-1)}
body[data-page="index"] .tallaje-history-main strong{overflow-wrap:anywhere;color:var(--panel-tinta-1)}
body[data-page="index"] .tallaje-history-main span,body[data-page="index"] .tallaje-history-meta,body[data-page="index"] .tallaje-history-empty{color:var(--panel-tinta-3);font-size:.8rem}
body[data-page="index"] .tallaje-history-status{justify-self:start;padding:2px var(--e-2);border-radius:var(--r-full);background:color-mix(in srgb,var(--ok-relleno) 12%,var(--panel-superficie));color:var(--ok-texto);font-weight:700;text-transform:capitalize}
body[data-page="index"] .tallaje-import-success{justify-items:center;text-align:center}
body[data-page="index"] .tallaje-import-success>div{max-width:650px}
body[data-page="index"] .tallaje-import-success h4{margin:var(--e-1) 0;color:var(--panel-tinta-1);font-size:1.5rem}
body[data-page="index"] .tallaje-import-success p{margin:0;color:var(--panel-tinta-3)}
body[data-page="index"] .tallaje-success-mark{display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:var(--r-full);background:var(--ok-relleno);color:var(--panel-chrome-t1);font-size:2rem;font-weight:800}
body[data-page="index"] .tallaje-import-success .tallaje-preview-counts,body[data-page="index"] .tallaje-import-success .tallaje-history,body[data-page="index"] .tallaje-import-success .tallaje-confirm-actions,body[data-page="index"] .tallaje-import-success .tallaje-safety-note{justify-self:stretch;max-width:none}
body[data-page="index"] .tallaje-result-money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-3);justify-self:stretch;margin:0}
body[data-page="index"] .tallaje-result-money div{display:grid;gap:var(--e-1);padding:var(--e-3);border:1px solid var(--panel-linea);border-radius:var(--r-2);background:var(--panel-lienzo)}
body[data-page="index"] .tallaje-result-money dt{color:var(--panel-tinta-3);font-size:.78rem}
body[data-page="index"] .tallaje-result-money dd{margin:0;color:var(--panel-tinta-1);font-weight:800;font-variant-numeric:tabular-nums}

/* === Media queries agrupadas al final ================================ */

@media (min-width:768px){
  @layer legacy{
    body[data-page="ficha-online"] .wrap{
          padding: 28px 24px 120px;
        }

        body[data-page="ficha-online"] .hero{
          grid-template-columns: 1fr auto;
          align-items: end;
        }

        body[data-page="ficha-online"] .grid{
          grid-template-columns: minmax(0,1fr) 340px;
          align-items: start;
        }

        body[data-page="ficha-online"] .panel.form{
          grid-column: 1;
        }

        body[data-page="ficha-online"] .panel.side{
          grid-column: 2;
          position: sticky;
          top: 76px;
        }

        body[data-page="ficha-online"] .person{
          grid-template-columns: 42px minmax(150px,1.2fr) minmax(112px,.72fr) minmax(112px,.72fr) minmax(112px,.72fr);
          align-items: start;
        }

        body[data-page="ficha-online"] .fields{
          display: contents;
        }

        body[data-page="ficha-online"] .row-actions{
          grid-column: 2 / -1;
          align-self: end;
        }

        body[data-page="ficha-online"] .actions-in{
          grid-template-columns: 1fr auto auto;
          align-items: center;
        }

        body[data-page="ficha-online"] .btn.wsp.on{
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
  }
}

@media (max-width:1280px){
  @layer legacy{
    body[data-page="index"] .alert-grid{
          grid-template-columns: 1fr 1fr;
        }

        body[data-page="index"] .exec-grid{
          grid-template-columns: repeat(2,minmax(0,1fr));
        }

        body[data-page="index"] .exec-split{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] .tur-staff-form{
          grid-template-columns: 1fr 1fr 1fr;
        }

        body[data-page="index"] .tur-staff-form .btn{
          width: 100%;
        }

        .ficha-overview{
          grid-template-columns: minmax(0,1fr) minmax(340px,.72fr);
        }

        .metric-grid, .focus-grid{
          grid-template-columns: repeat(2,minmax(0,1fr));
        }

        .client-grid{
          grid-template-columns: repeat(2,minmax(0,1fr));
        }

        .finance-equation{
          grid-template-columns: 1fr auto 1fr;
          align-items: stretch;
        }

        .finance-equation .finance-operator:nth-of-type(4){
          display: none;
        }

        .finance-term.result{
          grid-column: 1/-1;
        }

        .agenda-row{
          grid-template-columns: 100px minmax(190px,1.2fr) 130px 160px minmax(180px,.8fr);
          gap: 12px;
        }

        .fgrid{
          grid-template-columns: 1fr;
        }

        .top{
          padding-inline: 18px;
        }
  }
}

@media (max-width:981px){
  @layer legacy{
    body[data-page="index"] .kpis{
          grid-template-columns: 1fr 1fr;
        }

        body[data-page="index"] .fgrid{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] .inv-grid-2x2{
          grid-template-columns: 1fr;
        }

        body{
          display: block;
          padding-bottom: calc(102px + env(safe-area-inset-bottom));
          width: 100%;
          min-width: 0;
        }

        /* El padding del body no alcanza: el contenido de cada vista vive en
           su propio contenedor y quedaba por DEBAJO de la barra móvil fija
           (72px). Medido en Horarios: "✓ Confirmado", "11:30" y
           "19 trajes · reservado" tapados entre 4 y 22px al llegar al final.
           El colchón va donde está el contenido, no solo en el body. */
        body[data-page="index"] .main{
          padding-bottom: calc(96px + env(safe-area-inset-bottom));
        }

        .top h2{
          width: 100%;
          font-size: 1rem;
          line-height: 1.2;
        }

        .ops-pill{
          display: none;
        }

        .top .right{
          order: 2;
          width: 100%;
          margin: 0;
          justify-content: space-between;
          gap: 8px;
        }

        .search{
          order: 3;
          flex-basis: 100%;
          max-width: none;
          min-width: 0;
        }

        .mobile-nav a.active{
          background: var(--focus);
          color: var(--panel-chrome-t1);
        }

        .v2-intro{
          align-items: flex-start;
          flex-direction: column;
          gap: 14px;
        }

        .v2-read-order{
          justify-content: flex-start;
        }

        .overview-split, .priority-details, .finance-two{
          grid-template-columns: 1fr;
        }

        .agenda-day-summary{
          grid-template-columns: 1fr auto;
          align-items: start;
        }

        .agenda-day-summary h3{
          grid-column: 1/-1;
        }

        .agenda-row{
          grid-template-columns: 88px minmax(0,1fr);
          gap: 12px;
          padding: 15px;
        }

        .agenda-color, .agenda-counts, .agenda-logistics{
          grid-column: 2;
        }

        .agenda-counts{
          max-width: 220px;
        }

        .rent-filters{
          grid-template-columns: 1fr 1fr;
        }

        /* Los toggles de plata van a lo ancho en pantallas chicas. */
        .rent-deuda{
          grid-column: 1 / -1;
          grid-auto-flow: row;
          align-content: start;
        }
        .rent-deuda .rd{ flex: 1; }
        .rent-deuda{ display: flex; }

        .mobile-table-note{
          display: block;
        }

        .ficha-overview{
          grid-template-columns: 1fr;
        }

        .logistica-main{
          grid-template-columns: 1fr 1fr 1fr;
        }

        .tur-prioridades-grid{
          grid-template-columns: 1fr 1fr;
        }

        .ftl-grid{
          grid-template-columns: 1fr;
        }

        .ftl-seccion.review{
          grid-column: auto;
        }

        .hc-top{
          align-items: flex-start;
          flex-direction: column;
        }

        .hor-filter-head{
          align-items: flex-start;
          flex-direction: column;
        }

        .hor-filter-head .btn{
          width: 100%;
          justify-content: center;
        }

        .hc-time-row{
          align-items: flex-start;
          flex-direction: column;
          gap: 5px;
        }

        .hc-time-value{
          text-align: left;
        }

        .hc-actions{
          width: 100%;
          display: grid;
          grid-template-columns: 1fr 1fr;
        }

        .hc-actions .hc-pend{
          grid-column: 1/-1;
          justify-self: start;
        }

        .hc-actions .btn{
          width: 100%;
          justify-content: center;
        }

        .ov{
          align-items: flex-end;
          padding: 0;
        }

        .modal{
          width: 100%;
          max-width: none;
          max-height: calc(100dvh - env(safe-area-inset-top));
          overflow: auto;
          border-radius: 22px 22px 0 0;
          padding: 24px max(18px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
        }

        input, select, textarea{
          font-size: 16px;
        }

        .mobile-nav{
          position: fixed;
          left: max(10px,env(safe-area-inset-left));
          right: max(10px,env(safe-area-inset-right));
          bottom: max(10px,env(safe-area-inset-bottom));
          z-index: 80;
          display: flex;
          grid-template-columns: none;
          overflow-x: auto;
          overflow-y: hidden;
          border: 1px solid color-mix(in srgb, var(--panel-chrome-t1) 13%, transparent);
          border-radius: 18px;
          background: color-mix(in srgb, var(--panel-chrome) 97%, transparent);
          box-shadow: 0 18px 50px color-mix(in srgb, var(--panel-chrome) 42%, transparent);
          scroll-snap-type: x proximity;
          overscroll-behavior-inline: contain;
          padding: 5px;
          gap: 4px;
        }

        .mobile-nav a{
          display: flex;
          border-radius: 12px;
          color: var(--panel-chrome-t1);
          scroll-snap-align: start;
          line-height: 1.2;
          flex: 0 0 70px;
          min-width: 70px;
          min-height: 46px;
          font-size: .55rem;
          padding: 5px 4px;
        }

        [id="chatWin"]{
          bottom: calc(158px + env(safe-area-inset-bottom));
          max-height: min(58dvh,480px);
        }

        .inv-grid-2x2{
          grid-template-columns: minmax(0, 1fr);
        }

        .content::before{
          inset: 134px 0 62px 0;
        }

        .top{
          height: auto;
          min-height: 72px;
          padding: calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));
          align-items: center;
          flex-wrap: wrap;
          gap: 9px;
          background-position: 70% center;
        }

        [id="chatFab"]{
          font-size: 1.35rem;
          width: 54px;
          height: 54px;
          bottom: calc(92px + env(safe-area-inset-bottom));
          right: 18px;
        }

        .kpi, .box, .card, .ag-card, .hor-card, .client-card, .inv-color-card, .exec-shell, .exec-stat, .exec-panel, .tur-card, .tl-card, .alert-vcard, .modal{
          border-radius: 18px;
          box-shadow: 6px 6px 0 color-mix(in srgb, var(--syt-coral-vivo) 7%, transparent),0 24px 55px -43px color-mix(in srgb, var(--panel-chrome) 50%, transparent);
        }

        .side{
          display: none;
          position: fixed;
          inset: 0 auto 0 0;
          width: min(82vw,290px);
          z-index: 120;
          transform: translateX(-100%);
          transition: transform .26s cubic-bezier(0,0,.45,1);
        }

        .side.open{
          transform: none;
          box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--panel-chrome) 55%, transparent);
        }

        .main{
          min-width: 0;
          background-attachment: scroll;
          width: 100%;
        }

        .metric-grid, .client-grid, .cc-stats, .exec-split, .logistica-main{
          grid-template-columns: 1fr;
        }

        .table-wrap, .ftl-tbl-wrap{
          overflow-x: auto;
          max-width: 100%;
        }

        .content table{
          min-width: 640px;
        }

        .btn, .chip, .tur-tab, .exec-tab, .inv-filter-chip, .nav a, .top .av, .content button, .content a[role="button"]{
          min-height: 44px;
        }

        .cc-stat{
          min-height: 52px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .content input, .content select, .content textarea{
          font-size: 16px;
          min-height: 44px;
        }

        .h1, .v2-intro .h1{
          font-size: 1.3rem;
        }

        html body .mobile-nav{
          display: grid;
          grid-template-columns: repeat(5,1fr);
          grid-auto-flow: column;
          flex-direction: row;
          gap: 2px;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 130;
          background: var(--p-chrome);
          border-top: 1px solid var(--p-chrome-line);
          padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        }

        html body .mobile-nav a, html body .mobile-nav .mn-more{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 3px;
          min-height: 52px;
          padding: 5px 2px;
          border: 0;
          background: transparent;
          color: var(--panel-chrome-t1);
          font-size: .62rem;
          font-weight: 700;
          text-align: center;
          line-height: 1.1;
          cursor: pointer;
        }

        html body .mobile-nav a.active{
          color: var(--panel-chrome-t1);
          background: color-mix(in srgb, var(--syt-coral-vivo) 22%, transparent);
          border-radius: 10px;
        }

        html body .mobile-nav .mn-i{
          font-size: 1.02rem;
          line-height: 1;
        }

        html body .mn-sheet{
          position: fixed;
          inset: 0;
          z-index: 140;
          background: color-mix(in srgb, var(--panel-chrome) 55%, transparent);
          display: flex;
          align-items: flex-end;
        }

        html body .mn-sheet[hidden]{
          display: none;
        }

        html body .mn-sheet-panel{
          width: 100%;
          background: var(--p-surface);
          border-radius: 18px 18px 0 0;
          padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
          display: grid;
          gap: 4px;
        }

        html body .mn-sheet-title{
          font-size: .64rem;
          font-weight: 800;
          letter-spacing: .12em;
          text-transform: uppercase;
          color: var(--p-ink-3);
          margin-bottom: 6px;
        }

        html body .mn-sheet-panel a{
          display: flex;
          align-items: center;
          gap: 10px;
          min-height: 48px;
          padding: 10px 12px;
          border-radius: 11px;
          color: var(--p-ink);
          font-size: .92rem;
          font-weight: 700;
        }

        html body .mn-sheet-panel a:active{
          background: var(--p-surface-2);
        }

        html body .mn-sheet-close{
          margin-top: 10px;
          min-height: 46px;
          border-radius: 11px;
          border: 1px solid var(--p-line);
          background: var(--p-surface-2);
          color: var(--p-ink);
          font-weight: 800;
        }

        .content{
          width: 100%;
          max-width: 100%;
          overflow: hidden;
          padding: 18px 14px 96px;
          padding-bottom: 112px;
        }

        .fab, [id="chatFab"]{
          bottom: calc(84px + env(safe-area-inset-bottom));
          right: 14px;
        }
  }
}

@media (min-width:981px){
  @layer legacy{
    html body .mobile-nav, html body .mn-sheet{
          display: none;
        }
  }
}

@media (max-width:480px){
  @layer legacy{
    .metric-grid, .focus-grid, .client-grid{
          grid-template-columns: 1fr;
        }

        .season-day{
          flex-basis: 126px;
        }

        .agenda-row{
          grid-template-columns: 1fr;
        }

        .agenda-color, .agenda-counts, .agenda-logistics{
          grid-column: 1;
        }

        .agenda-time{
          display: flex;
          justify-content: space-between;
          gap: 10px;
          align-items: center;
        }

        .kpis, .tur-cards{
          grid-template-columns: 1fr;
        }

        .kpi, .tur-card{
          border-radius: 18px;
          padding: 17px;
        }

        .tur-card{
          min-height: 0;
        }

        .top h2{
          font-size: 1rem;
        }

        .kpi .v{
          font-size: clamp(1.5rem,8vw,2rem);
        }

        .content{
          padding-left: 13px;
          padding-right: 13px;
          padding: 14px 11px 96px;
        }

        .metric-value, .kpi .v{
          font-size: 1.45rem;
        }
  }
}

@media (prefers-reduced-motion:reduce){
  @layer legacy{
    body[data-page="index"] .view.active{
          animation: none;
        }

        body[data-page="index"] .kpi, body[data-page="index"] .slot, body[data-page="index"] .btn, body[data-page="index"] .nav a, body[data-page="index"] tbody tr, body[data-page="index"] .rbar>b{
          transition: none;
        }

        body[data-page="index"] *, body[data-page="index"] ::before, body[data-page="index"] ::after{
          animation: none;
          transition: none;
        }

        body[data-page="index"] .kpi:hover, body[data-page="index"] .slot:hover, body[data-page="index"] .day:hover, body[data-page="index"] .tur-card:hover, body[data-page="index"] .box:hover, body[data-page="index"] .inv-color-card:hover, body[data-page="index"] .tur-franja:hover, body[data-page="index"] .tur-calor-dia:hover, body[data-page="index"] .alert-vcard:hover, body[data-page="index"] .tl-card:hover, body[data-page="index"] .ag-card:hover{
          transform: none;
        }

        .metric-card, .focus-card, .agenda-row, .client-card{
          transition: none;
          animation: none;
        }

        .kpi:hover, .tur-card:hover{
          transform: none;
        }

        *, *::before, *::after{
          animation-iteration-count: 1;
          scroll-behavior: auto;
          transition: none;
          animation: none;
          animation-duration: .01ms;
          transition-duration: .01ms;
        }
  }

  :root{ --t-1:.01ms; --t-2:.01ms; --t-3:.01ms; }

  *, *::before, *::after{
      animation-duration:var(--t-1);
      animation-iteration-count:1;
      transition-duration:var(--t-1);
      scroll-behavior:auto;
    }
}

@media (max-width:768px){
  @layer legacy{
    body[data-page="desk"] main{
          grid-template-columns: 1fr;
        }

        body[data-page="desk"] .chat{
          display: none;
        }

        body[data-page="desk"] .chat.open{
          display: flex;
        }

        body[data-page="desk"] .list.hide{
          display: none;
        }

        body[data-page="index"] .alert-grid{
          grid-template-columns: 1fr;
        }

        body[data-page="index"]{
          display: block;
          padding-bottom: 84px;
        }

        body[data-page="index"] .side{
          display: none;
        }

        body[data-page="index"] .top{
          height: auto;
          min-height: 68px;
          align-items: flex-start;
          flex-wrap: wrap;
          padding: 12px 16px;
        }

        body[data-page="index"] .top h2{
          width: 100%;
          font-size: 1.05rem;
        }

        body[data-page="index"] .ops-pill{
          display: none;
        }

        body[data-page="index"] .search{
          order: 3;
          max-width: none;
          flex-basis: 100%;
        }

        body[data-page="index"] .top .right{
          margin-left: 0;
        }

        body[data-page="index"] .frm{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] .frm .full{
          grid-column: 1;
        }

        body[data-page="index"] .kpis{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] table{
          min-width: 1040px;
        }

        body[data-page="index"] .card{
          overflow: auto;
        }

        body[data-page="index"] .mobile-nav{
          position: fixed;
          left: 12px;
          right: 12px;
          bottom: 12px;
          z-index: 80;
          display: grid;
          grid-template-columns: repeat(6,1fr);
          gap: 4px;
          padding: 7px;
          border: 1px solid var(--line);
          border-radius: 20px;
          background: color-mix(in srgb, var(--panel-chrome) 96%, transparent);
          backdrop-filter: blur(20px);
          box-shadow: 0 20px 50px color-mix(in srgb, var(--panel-chrome) 50%, transparent);
        }

        body[data-page="index"] .mobile-nav a{
          min-height: 56px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 3px;
          border-radius: 14px;
          color: var(--text2);
          font-size: .62rem;
          font-weight: 800;
          text-align: center;
          text-transform: uppercase;
          letter-spacing: .02em;
          transition: all .25s var(--spring);
          padding: 5px 2px;
        }

        body[data-page="index"] .mobile-nav a.active{
          background: var(--naranja-soft);
          color: var(--naranja-ink);
        }

        body[data-page="index"] [id="chatFab"]{
          bottom: 88px;
        }

        body[data-page="index"] .ftl-grid{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] .inv-kpis{
          grid-template-columns: 1fr 1fr;
        }

        body[data-page="index"] .tur-staff-grid{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] .tur-franja{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] .tur-cards{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] .tur-cruce{
          min-width: 600px;
        }

        body[data-page="index"] .content{
          padding: 20px 14px 28px;
        }

        body[data-page="index"] .saldo-row, body[data-page="index"] .saldo-head{
          grid-template-columns: 14px 1.4fr 60px 1fr;
          gap: 8px;
        }

        body[data-page="index"] .saldo-row .saldo-fecha, body[data-page="index"] .saldo-head .sh-fecha{
          display: none;
        }

        body[data-page="index"] .saldo-row .saldo-abono, body[data-page="index"] .saldo-head .sh-abono{
          display: none;
        }

        body[data-page="index"] .auth-gate{
          place-items: start center;
        }

        body[data-page="index"] .auth-card{
          margin: auto 0;
          padding: 26px 22px;
          border-radius: 20px;
        }

        body[data-page="index"] .exec-head{
          align-items: flex-start;
          flex-direction: column;
        }

        body[data-page="index"] .exec-head .sub{
          text-align: left;
        }

        body[data-page="index"] .exec-grid{
          grid-template-columns: 1fr 1fr;
        }

        body[data-page="index"] .exec-body, body[data-page="index"] .exec-head{
          padding: 18px;
        }

        body[data-page="index"] .exec-tabs{
          padding: 12px 18px;
          overflow-x: auto;
          flex-wrap: nowrap;
        }

        body[data-page="index"] .exec-tab{
          white-space: nowrap;
        }

        body[data-page="index"] .rank-row{
          grid-template-columns: minmax(90px,1fr) 1.4fr auto;
        }

        body[data-page="index"] .cost-form{
          grid-template-columns: 1fr;
        }

        body[data-page="index"] .cost-form .wide{
          grid-column: auto;
        }

        body[data-page="index"] .tur-staff-form{
          grid-template-columns: 1fr;
        }

        .metric-grid, .focus-grid, .client-grid{
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }

        .metric-card{
          padding: 15px;
        }

        .metric-value{
          font-size: 1.14rem;
        }

        .metric-desc{
          font-size: .67rem;
          min-height: 0;
        }

        .metric-info::after{
          position: fixed;
          left: 16px;
          right: 16px;
          bottom: 104px;
          width: auto;
        }

        .focus-card{
          padding: 14px;
        }

        .focus-card p{
          display: none;
        }

        .v2-surface{
          padding: 15px;
        }

        .finance-equation{
          grid-template-columns: 1fr;
        }

        .finance-operator{
          min-height: 24px;
        }

        .finance-equation .finance-operator:nth-of-type(4){
          display: grid;
        }

        .finance-term.result{
          grid-column: auto;
        }

        .glossary-grid{
          grid-template-columns: 1fr;
        }

        .rent-filters{
          grid-template-columns: 1fr;
        }

        .cost-v2-form{
          grid-template-columns: 1fr;
        }

        .cost-v2-form .wide{
          grid-column: auto;
        }

        .ftl-head, .ftl-resumen{
          align-items: flex-start;
          flex-direction: column;
        }

        .logistica-title, .tur-prioridades-head{
          align-items: flex-start;
          flex-direction: column;
        }

        .logistica-main, .tur-prioridades-grid{
          grid-template-columns: 1fr;
        }

        .logistica-rule{
          align-items: flex-start;
          flex-direction: column;
        }

        .tur-prioridades, .tur-agenda-unica, .tur-cobranza{
          padding: 15px;
          margin-inline: -2px;
        }

        .ftl-seccion{
          padding: 13px;
        }

        .ftl-tbl-wrap{
          margin-inline: -2px;
        }

        .rent-table{
          min-width: 0;
          display: block;
        }

        .rent-table thead{
          display: none;
        }

        .rent-table tbody, .rent-table tr, .rent-table td{
          display: block;
          width: 100%;
        }

        .rent-table tr{
          margin: 0 0 12px;
          border: 1px solid var(--line-soft);
          border-radius: 15px;
          background: var(--panel-superficie);
          overflow: hidden;
          box-shadow: 0 10px 28px -25px color-mix(in srgb, var(--panel-chrome-alt) 55%, transparent);
        }

        .rent-table td{
          display: grid;
          grid-template-columns: 105px minmax(0,1fr);
          gap: 10px;
          padding: 10px 13px;
          border-bottom: 1px solid var(--line-soft);
          text-align: left;
          overflow-wrap: anywhere;
        }

        .rent-table td:last-child{
          border-bottom: 0;
        }

        .rent-table td::before{
          content: attr(data-label);
          color: var(--muted);
          font-size: .59rem;
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: .05em;
        }

        .rent-table .money-stack{
          text-align: left;
        }

        .card:has(.rent-table){
          overflow: visible;
          background: transparent;
          border: 0;
          box-shadow: none;
        }

        .ficha-resumen-top .ftl-resumen-box{
          grid-template-columns: 1fr;
        }

        .ficha-resumen-top .ftl-resumen-split{
          flex-direction: row;
        }

        .ftl-resumen-multi{
          grid-template-columns: 1fr;
        }

        .content{
          padding: 20px 14px 34px;
        }

        .top{
          min-height: 64px;
          gap: 9px;
        }

        .top .ops-pill, .top .search{
          display: none;
        }

        .kpi{
          min-height: 164px;
          padding: 18px;
          border-radius: 18px;
        }

        .tl-card{
          width: min(78vw,250px);
          min-height: 188px;
        }

        .tur-day{
          padding: 15px;
          border-radius: 18px;
        }

        .tur-day-head{
          align-items: flex-start;
          flex-wrap: wrap;
        }

        .tur-day-head .d-count{
          margin-left: 0;
        }
  }

  body[data-page="index"] .ftl-head,body[data-page="index"] .ftl-resumen-head,body[data-page="index"] .ftl-head-actions,body[data-page="index"] .tallaje-section-heading{align-items:stretch;flex-direction:column}
    body[data-page="index"] .tallaje-import-trigger,body[data-page="index"] .tallaje-section-heading .btn{width:100%;justify-content:center}
    body[data-page="index"] .tallaje-import-overlay{align-items:flex-end;padding:0}
    body[data-page="index"] .tallaje-import-modal{width:100%;max-height:calc(100dvh - env(safe-area-inset-top));border-radius:var(--r-4) var(--r-4) 0 0}
    body[data-page="index"] .tallaje-import-heading,body[data-page="index"] .tallaje-import-body{padding:var(--e-4)}
    body[data-page="index"] .tallaje-preview-counts,body[data-page="index"] .tallaje-differences,body[data-page="index"] .tallaje-result-money{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-2)}
    body[data-page="index"] .tallaje-preview-counts article,body[data-page="index"] .tallaje-differences article{min-width:0;padding:var(--e-2)}
    body[data-page="index"] .tallaje-preview-counts strong,body[data-page="index"] .tallaje-differences strong{font-size:1.55rem}
    body[data-page="index"] .tallaje-compare{grid-template-columns:1fr}
    body[data-page="index"] .tallaje-history-list li{grid-template-columns:1fr}
    body[data-page="index"] .tallaje-confirm-actions{display:grid;grid-template-columns:1fr}
    body[data-page="index"] .tallaje-confirm-actions .btn{width:100%;justify-content:center}
}

/* ===========================================================================
   MOVIMIENTO DEL PANEL · pedido de Carlitos (13-ago)
   ---------------------------------------------------------------------------
   Criterio: Loreto opera esto a toda velocidad un 4 de septiembre. El
   movimiento tiene que confirmar acciones y guiar la lectura, nunca hacerla
   esperar. Nada supera 300 ms y todo se apaga con `prefers-reduced-motion`.

   Va al final y FUERA de `@layer legacy` a propósito: dentro de la capa
   perdería contra las reglas sin capa que ya existen en esta hoja.
   =========================================================================== */

/* Las tarjetas de la vista entran escalonadas: da sensación de orden, que es
   justo lo que Carlitos pedía con "que todo tenga una estructura". */
@keyframes syt-panel-entra{
  from{ opacity: 0; transform: translate3d(0, 10px, 0) }
  to  { opacity: 1; transform: none }
}

body[data-page="index"] .view.active :is(.metric-card,.focus-card){
  animation: syt-panel-entra var(--t-3, 300ms) var(--curva, cubic-bezier(.22,1,.36,1)) both;
}
body[data-page="index"] .view.active :is(.metric-card,.focus-card):nth-child(2){ animation-delay: .05s }
body[data-page="index"] .view.active :is(.metric-card,.focus-card):nth-child(3){ animation-delay: .10s }
body[data-page="index"] .view.active :is(.metric-card,.focus-card):nth-child(4){ animation-delay: .15s }

/* Respuesta al puntero: la tarjeta que se puede tocar lo demuestra. */
@media (hover: hover){
  body[data-page="index"] :is(.metric-card,.focus-card,.box):hover{
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 14px 34px -22px color-mix(in srgb, var(--panel-chrome) 45%, transparent);
  }
  body[data-page="index"] :is(.metric-card,.focus-card,.box){
    transition: transform var(--t-2, 220ms) var(--curva, cubic-bezier(.22,1,.36,1)),
                box-shadow var(--t-2, 220ms) ease,
                border-color var(--t-1, 150ms) ease;
  }
  /* La fila del arriendo se ilumina al pasar: ayuda a no perder el renglón
     cuando se recorre una tabla larga. */
  body[data-page="index"] tbody tr{ transition: background var(--t-1, 150ms) ease }
  body[data-page="index"] tbody tr:hover{
    background: color-mix(in srgb, var(--syt-coral-vivo) 7%, transparent);
  }
  body[data-page="index"] .btn:active{ transform: translate3d(0, 1px, 0) }
}

/* El ítem del menú desliza su marca de activo en vez de aparecer de golpe. */
body[data-page="index"] .side a{
  transition: background var(--t-1, 150ms) ease, color var(--t-1, 150ms) ease;
}

/* Contrato de accesibilidad: quien pide menos movimiento, no recibe ninguno. */
@media (prefers-reduced-motion: reduce){
  body[data-page="index"] .view.active :is(.metric-card,.focus-card){
    animation: none;
    animation-delay: 0s;
  }
  body[data-page="index"] :is(.metric-card,.focus-card,.box):hover{
    transform: none;
  }
  body[data-page="index"] .btn:active{ transform: none }
}

/* ===========================================================================
   PALETA DE TRES COLORES · el naranjo lleva texto NEGRO
   ---------------------------------------------------------------------------
   Igual que en el sitio: blanco sobre #ff6a13 da 2.6, negro da 8.9. Es lo que
   hace la referencia KTM. Fuera de la capa para ganar sin pelear.
   =========================================================================== */
body[data-page="index"] :is(.btn.pri, .nav-action, .brand-mark, .av,
                            .chip.ch-naranja, .tur-risk.critical b,
                            .metric-card.warn::before){
  background: var(--naranjo);
  color: var(--negro);
  border-color: var(--naranjo);
}

/* La tarjeta de foco crítico NO se rellena entera de naranjo: es una tarjeta
   con parrafos dentro, y un bloque naranjo lleno de texto pesa demasiado para
   el "claro, ordenado, con aire". Se marca con la BARRA naranja al costado,
   igual que el aviso de turno apretado. Ademas, al rellenarla entera sus
   parrafos heredaban la tinta gris clara y daban 2.33. */
body[data-page="index"] .focus-card.critical{
  background: var(--blanco);
  border: 1px solid var(--panel-linea);
  border-left: 4px solid var(--naranjo);
  color: var(--panel-tinta-1);
}

body[data-page="index"] .focus-card.critical :is(p, span, small, li, dd){
  color: var(--panel-tinta-2);
}

body[data-page="index"] .focus-card.critical :is(h2, h3, h4, b, strong){
  color: var(--panel-tinta-1);
}

body[data-page="index"] :is(.btn.pri, .nav-action):hover{
  background: var(--naranjo-hover);
  color: var(--negro);
}

/* El ítem activo del menú: relleno naranjo, letra negra. */
body[data-page="index"] .side a.active{
  background: var(--naranjo);
  color: var(--negro);
}

/* Las tarjetas ya no se separan por un fondo distinto —el lienzo es blanco—
   sino por su línea y su sombra, como en la referencia. */
body[data-page="index"] :is(.metric-card, .focus-card, .box, .v2-surface){
  background: var(--blanco);
  border: 1px solid color-mix(in srgb, var(--negro) 12%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--negro) 5%, transparent),
              0 8px 24px -18px color-mix(in srgb, var(--negro) 22%, transparent);
}

/* El acento como TEXTO sobre blanco usa la version oscurecida; sobre el
   chrome negro, el naranjo vivo. */
body[data-page="index"] .main :is(.eyebrow, .k, .lbl){
  color: var(--panel-tinta-3);
}

body[data-page="index"] .side :is(.nav-group, .eyebrow){
  color: var(--panel-chrome-t3);
}

/* ===========================================================================
   LOS DOS ROLES DEL NARANJO · cierre del cambio de paleta
   ---------------------------------------------------------------------------
   El puente `--syt-coral: var(--naranjo)` fue un error propio: la paleta vieja
   tenía CUATRO tokens con roles distintos (marca, vivo, texto, relleno) y los
   colapsé todos en el naranjo vivo. Eso rompió 123 medidas de un golpe, en dos
   modos y solo dos:

     A · naranjo vivo usado como TINTA sobre blanco   → 2.87, pide 4.5
     B · blanco usado como tinta sobre RELLENO naranjo → 2.87, pide 4.5

   El naranjo tiene dos roles y no son intercambiables:
     · RELLENO  #ff6a13 → su letra va NEGRA        (6.90)
     · TINTA    sobre blanco va #a63c00            (6.43)
   =========================================================================== */

/* --- A · relleno naranjo, letra negra ------------------------------------
   OJO: aquí solo va lo que de verdad conserva RELLENO naranjo. Los ítems de
   menú y los chips seleccionados salieron de esta lista cuando pasaron a barra
   naranja y a relleno negro (ver "JERARQUÍA DEL NARANJO" más abajo). Dejarlos
   aquí les ponía letra negra sobre fondo negro y desaparecía el texto. */
body[data-page="index"] :is(
  .btn.pri, .nav-action,
  .tl-card.alto .tl-tag, .tl-card.medio .tl-tag,
  .ag-carga.alto, .ag-carga.medio
){
  color: var(--negro);
}

/* El párrafo dentro de un bloque naranjo heredaba la tinta terciaria clara
   (#5c5c5c sobre naranjo = 2.33). Dentro del naranjo todo texto es negro. */
body[data-page="index"] :is(.btn.pri, .nav-action, .ag-carga.alto,
                            .ag-carga.medio, .tl-card.alto .tl-tag) :is(p, span, b, small){
  color: var(--negro);
}

/* --- B · naranjo como tinta sobre superficie clara -----------------------
   Sin acotar a `.main`: las tablas de disponibilidad viven fuera de ella y por
   eso 420 celdas `td.mono` seguían saliendo en naranjo vivo sobre blanco. */
body[data-page="index"] :is(
  td.mono, .v.mono, .mono, .ic, .ops-pill,
  .status-pill.bad, .pill.bad, .chip.ch-red,
  .kpi .v.red, .alert-vcard.warn .av-num, .alert-vcard.warn .av-ico
){
  color: var(--naranjo-texto);
}

/* Iconos y texto dentro de los botones de acción, que sí van naranjos. */
body[data-page="index"] :is(.btn.pri, .nav-action) :is(.i, .ic, span, b, small){
  color: var(--negro);
}

/* La demanda por talla: el numero va en naranjo tinta, y el CERO se apaga.
   Antes el cero se apagaba con `opacity:.3`, que hunde el contraste a 1.5 sin
   que ninguna regla pueda repararlo. Ahora se apaga con una TINTA mas suave
   que sigue siendo legible (#5c5c5c sobre blanco = 6.69). */
body[data-page="index"] .td-demanda{
  font-weight: 700;
  color: var(--naranjo-texto);
}

body[data-page="index"] .td-demanda.es-cero{
  font-weight: 450;
  color: var(--panel-tinta-3);
}

/* Las tablas de talla se cortaban por la derecha: la columna "T" quedaba a
   medias y Loreto no podía llegar a ella. El `overflow-x` del contenedor
   estaba puesto, pero no servía de nada: un hijo de CSS Grid trae
   `min-width:auto`, se niega a encoger por debajo de su contenido y revienta
   la reja en vez de dejar que el contenedor haga scroll. */
body[data-page="index"] .inv-grid-2x2 > *,
body[data-page="index"] .inv-block-syt{
  min-width: 0;
}

body[data-page="index"] .inv-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===========================================================================
   JERARQUÍA DEL NARANJO · qué significa cada bloque naranjo
   ---------------------------------------------------------------------------
   Al mirar la vista de trajes disponibles había CINCO bloques naranjos a la
   vez: dónde estoy, una acción, un interruptor y dos filtros. Todos iguales.
   Cuando todo es naranjo, el naranjo no dice nada y la pantalla se lee como un
   ladrillo de color.

   Con tres colores el significado tiene que venir de la FORMA, no del tono:

     naranjo relleno   → una ACCIÓN. Botón que hace algo.
     negro relleno     → lo que está SELECCIONADO ahora.
     barra naranja     → algo que pide ATENCIÓN (alerta, foco crítico).

   Así queda un solo naranjo sólido por zona y se entiende de un vistazo.
   =========================================================================== */

/* --- Menú lateral: "dónde estoy" es una barra, no un bloque ---------------
   El ítem activo y el botón de acción eran dos bloques naranjos idénticos y
   pegados: no se distinguía el lugar donde estoy de la cosa que hace algo.
   Ahora el único naranjo sólido del menú es el botón. */
/* `.nav-action` queda FUERA: es el botón de acción, no un ítem de menú. Si
   entra aquí recibe el fondo tenue y se queda con su letra negra encima:
   negro sobre negro, invisible. */
body[data-page="index"] :is(.side, .nav) a.active:not(.nav-action){
  background: color-mix(in srgb, var(--blanco) 10%, transparent);
  border-left: 3px solid var(--naranjo);
  border-radius: 0 12px 12px 0;
  color: var(--blanco);
}

body[data-page="index"] :is(.side, .nav) a.active:not(.nav-action) :is(.i, span, b){
  color: var(--blanco);
}

/* El icono del ítem activo tampoco lleva relleno naranjo. */
body[data-page="index"] :is(.side, .nav) a.active:not(.nav-action) .i{
  background: color-mix(in srgb, var(--blanco) 12%, transparent);
}

/* --- Barra inferior de móvil: mismo idioma que el menú de escritorio ------
   Llevaba relleno naranjo con letra blanca (2.87). En vez de cambiarle la
   tinta se le quita el relleno: el activo se marca con una barra naranja
   ARRIBA, que es donde el dedo mira en una barra inferior. */
body[data-page="index"] .mobile-nav a.active,
html body[data-page="index"] .mobile-nav a.active{
  background: color-mix(in srgb, var(--blanco) 10%, transparent);
  border-top: 3px solid var(--naranjo);
  color: var(--blanco);
}

body[data-page="index"] .mobile-nav a.active :is(.mn-i, span, b){
  background: none;
  color: var(--blanco);
}

/* --- Filtros y pestañas: lo seleccionado va NEGRO -------------------------
   Es el mismo lenguaje que ya usaba el chip "Todos" de color, que estaba
   negro. Ahora todos los seleccionados hablan igual. */
body[data-page="index"] :is(.inv-filter-chip, .exec-tab, .tur-tab, .chip).active{
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}

body[data-page="index"] :is(.inv-filter-chip, .exec-tab, .tur-tab, .chip).active :is(span, b, small){
  color: var(--blanco);
}

/* --- Las tarjetas de resumen: la línea superior solo grita si hay alerta --
   Las cuatro llevaban la misma barra naranja arriba, incluidas las que solo
   informan (stock total, comprometido). El naranjo tiene que estar reservado
   para lo que necesita mirada. */
body[data-page="index"] .inv-kpi::before{
  background: var(--panel-linea);
}

body[data-page="index"] :is(.inv-kpi.crit, .inv-kpi.alerta, .inv-kpi.warn,
                            .inv-kpi:has(.v.red), .inv-kpi:has(.inv-disp-critico))::before{
  background: var(--naranjo);
}

/* ---------------------------------------------------------------------------
   "¿ESTÁ LISTO?" · la columna que responde de una vez
   ---------------------------------------------------------------------------
   Antes había que leer Logística, Documentos y Estado y cruzarlas de cabeza
   para saber si un arriendo podía salir. Ahora lo dice una celda.

   Semáforo + TEXTO, nunca solo color: quien no distingue bien los colores
   tiene que poder leerlo igual. El color acompaña; la palabra informa.
   --------------------------------------------------------------------------- */
body[data-page="index"] .listo-si{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .78rem;
  color: var(--ok-texto);
  white-space: nowrap;
}

body[data-page="index"] .listo-no{
  display: inline-block;
  padding: 4px 8px 4px 10px;
  border-left: 3px solid var(--naranjo);
  border-radius: 0 8px 8px 0;
  background: var(--blanco);
  color: var(--panel-tinta-1);
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.35;
}

/* Lo que impide que el traje salga —hora y tallas— se marca en rojo; lo demás
   (plata, firma, contacto) es naranjo: importa, pero no bloquea el despacho. */
body[data-page="index"] .listo-no.bad{
  border-left-color: var(--error-relleno);
  color: var(--error-texto);
}

/* ===========================================================================
   EL MOVIMIENTO SE APAGA ENTERO · Fase 6
   ---------------------------------------------------------------------------
   Mismo caso que en el sitio: los bloques de `prefers-reduced-motion` que ya
   habia ENUMERABAN selectores, y una lista siempre se queda corta. Loreto usa
   esto horas seguidas; si alguien del equipo tiene vertigo, la preferencia del
   sistema tiene que apagarlo TODO, no una parte.

   `.01ms` y no `none`: con duracion cero el navegador no dispara
   `transitionend` ni `animationend`, y el JavaScript que espera ese evento se
   queda colgado. El movimiento desaparece; la mecanica sigue.
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   EL FOCO SE VE SIEMPRE · Fase 6
   ---------------------------------------------------------------------------
   Habia reglas de `:focus-visible`, pero enumeraban selectores concretos
   —`tbody tr`, `.slot`, `.kpi`, `.day`, `a`, `button`…— y cualquier cosa que
   no estuviera en esa lista se quedaba sin anillo. Medido: 27 filas de la
   vista Resumen se podian alcanzar con Tab sin que se viera donde estabas.

   Una lista de selectores siempre se queda corta. Esto va por lo que el
   navegador considera enfocable, asi que cubre tambien lo que se agregue
   despues sin que nadie tenga que acordarse de volver aqui.
   =========================================================================== */
body[data-page="index"] :is(
  a[href], button, input, select, textarea, summary,
  [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="link"]
):focus-visible{
  outline: 2px solid var(--naranjo);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Sobre el chrome negro el naranjo solo no destaca lo suficiente: se le suma
   un halo claro para que el anillo se lea sobre cualquiera de los dos fondos. */
body[data-page="index"] .side :is(a, button, [tabindex]):focus-visible,
body[data-page="index"] .top :is(a, button, [tabindex]):focus-visible{
  outline-color: var(--blanco);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--naranjo) 55%, transparent);
}

/* ---------------------------------------------------------------------------
   LISTA DE CLIENTES · P2 del plan
   ---------------------------------------------------------------------------
   Pasa de tarjeta completa a fila. Es mas estrecha que la de arriendos —siete
   columnas, no once— asi que no necesita el ancho minimo de aquella y cabe
   entera sin arrastrar.
   --------------------------------------------------------------------------- */
body[data-page="index"] .client-table{
  min-width: 0;
}

/* El contacto se dice en positivo cuando existe y se marca cuando falta.
   Con 44 de 44 clientes sin telefono, esto tiene que verse sin abrir fichas. */
body[data-page="index"] .cc-falta{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--naranjo) 14%, var(--blanco));
  color: var(--naranjo-texto);
  font-weight: 700;
  font-size: .74rem;
  /* Sin esto la pildora partia "Sin teléfono" en dos lineas y la segunda
     quedaba recortada contra el borde de la celda. */
  white-space: nowrap;
}

body[data-page="index"] .cc-ok{
  font-weight: 700;
  color: var(--panel-tinta-1);
}

/* La columna de contacto necesita su ancho: es la unica con pildora. */
body[data-page="index"] .client-table td:last-child,
body[data-page="index"] .client-table th:last-child{
  min-width: 150px;
}

body[data-page="index"] .client-table td:last-child .cell-sub{
  margin-top: 5px;
}

/* El nombre manda; el colegio acompana. Con 12 colegios en una fila —el caso
   de "(sin encargado)"— la linea se corta a dos y deja de empujar la tabla. */
body[data-page="index"] .client-table .cell-sub{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   AVISO DE CARGA INCOMPLETA
   El panel ya no echa a Loreto cuando fallan los datos: se queda abierto y le
   dice que su clave está bien. Antes esto se reportaba como "contraseña
   incorrecta" y por eso tenía que escribirla dos veces.
   --------------------------------------------------------------------------- */
.aviso-carga{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--panel-linea);
  border-left: 4px solid var(--naranjo);
  border-radius: 0 12px 12px 0;
  background: var(--blanco);
  color: var(--panel-tinta-1);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--negro) 30%, transparent);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
}

.aviso-carga button{
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--naranjo);
  color: var(--negro);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 560px){
  .aviso-carga{ flex-direction: column; align-items: stretch; text-align: left; }
  .aviso-carga button{ width: 100%; }
}

/* =============================================================================
   CAPA 1 — La franja de resumen (Carlitos, 18-ago-2026)
   =============================================================================
   El problema: cada vista abria con 4 o 5 tarjetas de resumen de ~130px de alto
   que empujaban hacia abajo lo que Loreto realmente va a mirar. "No me aporta
   mucho, o lo dejamos en una esquinita o lo dejas en una pura tira de arriba."

   La solucion es solo CSS. No se toca ni una linea del HTML ni del JS: los 8
   bloques .kpis del panel siguen generandose igual y aqui se les cambia la
   forma. En un archivo de 3.791 lineas, no tocar el markup es lo que evita
   romper algo que ya funciona.

   Especificidad: las reglas de arriba usan `body[data-page="index"] .kpi`
   (0-2-1). Aqui se usa `body[data-page="index"] .kpis .kpi` (0-3-1) para ganar
   por construccion, sin forzar la cascada.
   ========================================================================== */

body[data-page="index"] .kpis{
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

/* La tarjeta deja de ser tarjeta: sin borde propio, sin radio, sin sombra,
   sin el degradado de acento y sin el salto al pasar el mouse. Una tira no
   levanta. */
body[data-page="index"] .kpis .kpi{
  flex: 1 1 0;
  min-width: 8.5rem;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: .5rem .85rem .55rem;
  transition: background .18s ease;
}
body[data-page="index"] .kpis .kpi:first-child{ border-left: 0; }
body[data-page="index"] .kpis .kpi:hover{
  transform: none;
  box-shadow: none;
  background: var(--card-hover, transparent);
}
body[data-page="index"] .kpis .kpi.acc::after{ content: none; }

/* Etiqueta arriba, numero abajo: se lee de un vistazo y cabe en ~44px. */
body[data-page="index"] .kpis .kpi .l{
  display: block;
  font-size: .8rem;   /* 12.8px — igual que antes. La sonda marca todo bajo 12px. */
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 .1rem;
  white-space: nowrap;
}
body[data-page="index"] .kpis .kpi .v{
  display: block;
  font-size: 1.06rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* El acento vuelve como lo que el sistema ya dice que significa: una barra
   naranja al costado = algo que pide atencion. Nunca naranjo como tinta del
   numero salvo el token validado. */
body[data-page="index"] .kpis .kpi.acc{
  box-shadow: inset 3px 0 0 var(--naranjo);
}
body[data-page="index"] .kpis .kpi.acc:first-child{
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

/* En movil la tira scrollea sola. La pagina nunca scrollea horizontal. */
@media (max-width: 720px){
  body[data-page="index"] .kpis{ border-radius: 8px; }
  body[data-page="index"] .kpis .kpi{
    flex: 0 0 auto;
    min-width: 7.75rem;
    padding: .45rem .75rem .5rem;
  }
  body[data-page="index"] .kpis .kpi .v{ font-size: 1rem; }
  body[data-page="index"] .kpis .kpi .l{ font-size: .8rem; }
}

/* La segunda fila de KPIs (la operativa) va pegada a la primera: se leen como
   una sola franja de dos pisos, no como dos bloques separados. */
body[data-page="index"] .kpis + .kpis{
  margin-top: -12px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}
body[data-page="index"] .kpis:has(+ .kpis){
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}


/* =============================================================================
   CAPA 2 — El sistema de color de DATOS (Carlitos, 18-ago-2026)
   =============================================================================
   Los colores de traje NO son colores de interfaz: son un dato. El branding
   (naranjo, negro, blanco) manda en el chrome; estos mandan en el contenido.
   Estan en capas distintas de la pantalla, asi que no compiten.

   Los valores salen de los rellenos REALES del Excel de Loreto, leidos con
   openpyxl de sus dos planillas. No se interpretaron ni se "mejoraron".

     Rojo    #FF0000   traje rojo          31 celdas
     Azul    #3333FF   traje azul          28 celdas
     Fucsia  #FF00FF   traje fucsia        23 celdas
     Amarillo #FFFF00  confirmado, listo  255 celdas  <- el que mas usa
     Cian    #00FFFF   hora del baile     109 celdas
     Verde   #92D050   entrega tardia       4 celdas

   Cada color entra como un TRIO y no como un valor suelto:
     solido  el color tal cual, para rellenos y puntos
     lienzo  el mismo color a baja opacidad, para tenir una superficie entera
     tinta   el color oscurecido hasta pasar AA, para usarlo COMO TEXTO

   Medido antes de escribirlo. Como relleno con letra negra: rojo 4,95:1,
   fucsia 6,31:1, amarillo 18,44:1, cian 15,79:1, verde 10,71:1. El azul cumple
   con letra blanca, 6,87:1. Como TEXTO sobre blanco el amarillo puro da 1,07:1
   y es ilegible: por eso existe la tinta.
   ========================================================================== */

:root{
  --traje-rojo:          #ff0000;
  --traje-rojo-lienzo:   #ff00001c;
  --traje-rojo-tinta:    #c40000;
  --traje-azul:          #3333ff;
  --traje-azul-lienzo:   #3333ff1c;
  --traje-azul-tinta:    #3333ff;
  --traje-fucsia:        #ff00ff;
  --traje-fucsia-lienzo: #ff00ff1a;
  --traje-fucsia-tinta:  #b800b8;
  --traje-morado:        #7b2fbe;
  --traje-morado-lienzo: #7b2fbe1a;
  --traje-morado-tinta:  #5c1f95;
  --dato-confirmado:        #ffff00;
  --dato-confirmado-lienzo: #ffff002e;
  --dato-confirmado-tinta:  #6b6b00;
  --dato-baile:             #00ffff;
  --dato-baile-lienzo:      #00ffff26;
  --dato-baile-tinta:       #007575;
  --dato-tarde:             #92d050;
  --dato-tarde-lienzo:      #92d05029;
  --dato-tarde-tinta:       #527a2b;
}

/* Una superficie tenida del color de su traje. El lienzo es tan suave que el
   texto negro encima no pierde ni una centesima de contraste, y la barra del
   canto es la que se ve de lejos: es la que Loreto va a usar para encontrar la
   tarjeta sin leer. */
[data-traje="rojo"]{   --tt: var(--traje-rojo);   --tl: var(--traje-rojo-lienzo); }
[data-traje="azul"]{   --tt: var(--traje-azul);   --tl: var(--traje-azul-lienzo); }
[data-traje="fucsia"]{ --tt: var(--traje-fucsia); --tl: var(--traje-fucsia-lienzo); }
[data-traje="morado"]{ --tt: var(--traje-morado); --tl: var(--traje-morado-lienzo); }

/* Mixto no se inventa un color: muestra los tres en franjas. Resuelve los 12
   arriendos que dicen "varios colores" sin mentir sobre cual es. */
[data-traje="mixto"]{
  --tt: var(--traje-fucsia);
  --tl: transparent;
}
[data-traje="mixto"].inv-color-card,
[data-traje="mixto"].ag-card{
  background-image: repeating-linear-gradient(135deg,
    var(--traje-rojo-lienzo) 0 14px,
    var(--traje-azul-lienzo) 14px 28px,
    var(--traje-fucsia-lienzo) 28px 42px);
}

.inv-color-card[data-traje]{
  background-color: var(--tl);
  border-left: 5px solid var(--tt);
}
.ag-card[data-traje]{
  background-color: var(--tl);
  border-left-color: var(--tt);
}

/* El punto de color lleva contorno: sobre blanco el amarillo y el cian
   desaparecen sin el. */
.dot, .cdot, .saldo-dot{ box-shadow: inset 0 0 0 1px #00000026; }

/* El color nunca es la unica senal: el nombre va escrito al lado, siempre.
   Hay quien no distingue rojo de fucsia, y en una impresion en blanco y negro
   el color no existe. */
.chip-traje{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .12em .5em .12em .35em;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--negro);
  background: var(--tl, transparent);
  box-shadow: inset 0 0 0 1px #00000026;
}
.chip-traje::before{
  content: "";
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: var(--tt, var(--muted));
  box-shadow: inset 0 0 0 1px #00000026;
}


/* =============================================================================
   CAPA 3 — Flujo del día: la cinta (Carlitos, 18-ago-2026)
   =============================================================================
   Cada arriendo es una linea que va de su entrega a su devolucion, tenida del
   color de su traje. Encima, la curva de cuantos trajes hay fuera de bodega.
   Los colores de traje son DATO: entran por [data-traje], nunca como chrome.
   ========================================================================== */

.flujo-dias{
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: 0 0 .3rem;
  margin-bottom: 14px;
  scrollbar-width: thin;
}
.flujo-dia{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .18s ease, background .18s ease;
}
.flujo-dia:hover{ border-color: var(--naranjo); }
.flujo-dia.on{
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
/* Los hijos siguen el color del boton. Sin esto, otra regla de la hoja les
   pintaba rgb(20,20,20) y el dia activo quedaba en negro sobre negro: 1,06:1.
   Se escribe la regla general en vez de perseguir el selector que gana. */
/* TODO lo de adentro sigue el color del boton, no solo los dos hijos directos.
   Apunte a .fd-dia y .fd-mov y me falto el <b> de los numeros: en el dia activo
   quedaban negro sobre negro y las cifras simplemente no estaban. La medicion no
   lo vio porque medi los hijos que nombre, no los que hay. Lo caza mirar. */
.flujo-dia, .flujo-dia *{ color: inherit; }
.flujo-dia.on, .flujo-dia.on *{ color: var(--blanco); }
.flujo-dia .fd-c{ font-weight: 800; color: inherit; }
.fd-dia{ font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.fd-mov{ font-size: .75rem; opacity: .8; white-space: nowrap; }
.flujo-dia.on .fd-mov{ opacity: .85; }

.flujo-cinta{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 6px 6px;
  overflow: hidden;
}
.flujo-scroll{ overflow-x: auto; overscroll-behavior-x: contain; }
.flujo-scroll svg{ display: block; min-width: 700px; }

/* Rejilla y ejes: presentes, nunca protagonistas. */
.fl-grid{ stroke: var(--line); stroke-width: 1; }
.fl-hora{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; fill: var(--muted); text-anchor: middle;
}
.fl-eje{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px; letter-spacing: .09em; fill: var(--muted);
}
.fl-eje-n{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700; fill: var(--ink);
}

/* La curva del flujo. Naranjo porque es la lectura del sistema, no un dato de
   traje: cuanto hay afuera es informacion de la operacion. */
.fl-linea{ fill: none; stroke: var(--naranjo); stroke-width: 2; stroke-linejoin: round; }
.fl-pico{ fill: var(--naranjo); }
.fl-pico-t{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; fill: var(--naranjo-texto);
}

/* Una fila = un arriendo. La barra lleva el color del traje. */
.fl-fila{ cursor: pointer; }
.fl-hit{ fill: transparent; }
.fl-fila:hover .fl-hit, .fl-fila:focus-visible .fl-hit{ fill: var(--tl, #00000008); }
.fl-fila:focus-visible{ outline: 2px solid var(--naranjo); outline-offset: -2px; }
.fl-etq{
  font-size: 11.5px; fill: var(--ink); text-anchor: end;
  font-family: inherit; font-weight: 600;
}
.fl-barra{
  stroke: var(--tt, var(--muted));
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .9;
}
.fl-fila:hover .fl-barra{ opacity: 1; stroke-width: 9; }
.fl-cap{ fill: var(--tt, var(--muted)); stroke: var(--card); stroke-width: 1.5; }
.fl-cap-v{ fill: var(--card); stroke: var(--tt, var(--muted)); stroke-width: 2.5; }
.fl-antes{ fill: none; stroke: var(--tt, var(--muted)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fl-n{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; fill: var(--muted);
}

.flujo-pie{
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem;
  margin-top: 10px; font-size: .82rem; color: var(--muted);
}
.fl-ley{ display: inline-flex; align-items: center; gap: .4rem; }
.fl-ley i{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fl-ley-e{ background: var(--muted); }
.fl-ley-v{ background: var(--card); box-shadow: inset 0 0 0 2px var(--muted); }
.fl-ley-a{
  width: 0; height: 0; border-radius: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-right: 6px solid var(--muted);
}
.fl-falta{
  color: var(--naranjo-texto); font-weight: 700;
  border-left: 3px solid var(--naranjo); padding-left: .55rem;
}

@media (prefers-reduced-motion: reduce){
  .flujo-dia, .fl-barra, .fl-hit{ transition: none; }
}


/* Capa 4 — la ficha ahora tiene dos salidas impresas: el documento que firma el
   cliente y la ficha del meson. En movil se apilan en vez de desbordar. */
.fp-acciones{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 620px){
  .fp-acciones{ width: 100%; }
  .fp-acciones .fp-btn{ flex: 1 1 100%; }
}


/* La alerta de disponibilidad: la pregunta que Loreto se hace y que hasta ahora
   no tenia donde mirar. Barra naranja al costado = pide atencion, que es lo que
   el sistema ya dice que significa. El color de cada traje entra como DATO. */
.flujo-alerta{
  border: 1px solid var(--line);
  border-left: 4px solid var(--naranjo);
  border-radius: 0 8px 8px 0;
  background: var(--card);
  padding: .7rem .9rem;
  margin-bottom: 12px;
  font-size: .9rem;
  line-height: 1.5;
}
.flujo-alerta > b{ color: var(--naranjo-texto); }
.fa-color{
  display: block;
  margin-top: .35rem;
  padding: .22rem .5rem;
  border-radius: 5px;
  background: var(--tl, transparent);
  border-left: 3px solid var(--tt, var(--line));
  text-transform: none;
}
.fa-pie{
  display: block;
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--muted);
}
.flujo-nota{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: .55rem .8rem;
  margin-bottom: 12px;
  font-size: .86rem;
  color: var(--muted);
}

/* El escalon del medio de la cinta: datos que se miran de pie en la bodega,
   no un formulario. "Caminos mas que mil datos". */
.fl-det{
  margin-top: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--tt, var(--linea-fuerte));
  border-radius: 0 12px 12px 0;
  background: var(--tl, var(--card));
  padding: 1rem 1.1rem;
}
.fl-det-cab{ display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.fl-det-col{ font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; }
.fl-det-sub{ font-size: .85rem; color: var(--muted); margin-top: .15rem; }
.fl-det-grid{ display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: .9rem; }
.fl-det-caja{ background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: .7rem .8rem; }
.fl-det-caja h4{
  margin: 0 0 .45rem; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
}
.fl-det-num{ font-size: .9rem; color: var(--muted); }
.fl-det-num span{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-right: .3rem;
  font-variant-numeric: tabular-nums;
}
.fl-det-hm{ display: flex; gap: .8rem; font-size: .85rem; color: var(--muted); margin-top: .3rem; flex-wrap: wrap; }
.fl-chip{ margin-top: .5rem; }
.fl-det-hora{ display: flex; justify-content: space-between; gap: .6rem; font-size: .88rem; padding: .16rem 0; }
.fl-det-hora span{ color: var(--muted); }
.fl-det-hora b{ font-weight: 800; }
.fl-equipo{ font-size: .82rem; line-height: 1.5; margin-top: .4rem; }
.fl-sem{
  margin-top: .5rem; font-size: .8rem; font-weight: 700;
  padding: .28rem .5rem; border-radius: 5px; border-left: 3px solid var(--line);
}
.fl-sem.ok{ border-left-color: var(--c-verde, #1c7c4a); color: var(--c-verde-tinta, #527a2b); }
.fl-sem.pend{ border-left-color: var(--naranjo); color: var(--naranjo-texto); }
.fl-fila.fl-abierta .fl-barra{ stroke-width: 10; opacity: 1; }
.fd-eq{ font-size: .74rem; opacity: .8; white-space: nowrap; }
.fd-eq-no{ color: var(--naranjo-texto); font-weight: 700; opacity: 1; }
.flujo-dia.on .fd-eq-no{ color: var(--blanco); }

/* El desglose de tallas dentro del detalle. Lo que Loreto controla de verdad:
   traje x talla x color. La fila "hay" marca en naranjo donde no alcanza. */
.fl-tallas{ display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: .8rem; }
.fl-tt{ background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: .65rem .75rem; overflow-x: auto; }
.fl-tt h4{
  margin: 0 0 .45rem; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
}
.fl-tabla{ border-collapse: collapse; width: 100%; font-size: .84rem; }
.fl-tabla th, .fl-tabla td{ padding: .22rem .4rem; text-align: center; border-bottom: 1px solid var(--line); }
.fl-tabla th:first-child, .fl-tabla td:first-child{ text-align: left; color: var(--muted); white-space: nowrap; }
.fl-tabla th{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; font-weight: 700; color: var(--muted);
}
.fl-tabla td.n{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.fl-tabla tr:last-child td{ border-bottom: 0; }
/* Donde no alcanza: barra naranja bajo el numero. El color no es la unica
   senal, el texto de abajo dice cuales faltan y cuantos. */
.fl-tabla td.fl-falta-t{ color: var(--naranjo-texto); box-shadow: inset 0 -3px 0 var(--naranjo); }


/* =============================================================================
   CAPA 1 (completada) — la franja tambien en las otras pestanas
   =============================================================================
   La primera version solo compacto .kpis, del Resumen. Las demas vistas usan
   sus propias tarjetas —.inv-kpis en Trajes y tallas, .ag-kpi en el Calendario,
   .exec-stat en el resumen ejecutivo— y ahi seguian ocupando media pantalla.
   Carlitos: "los cuadros de resumenes de todas las pestanas estan arriba
   ocupando toda la pantalla".

   Mismo tratamiento y misma especificidad ganada por construccion.
   ========================================================================== */

body[data-page="index"] .inv-kpis{
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
body[data-page="index"] .inv-kpis .inv-kpi{
  flex: 1 1 0;
  min-width: 8.5rem;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: .5rem .85rem .55rem;
  transition: background .18s ease;
}
body[data-page="index"] .inv-kpis .inv-kpi:first-child{ border-left: 0; }
body[data-page="index"] .inv-kpis .inv-kpi:hover{
  transform: none;
  box-shadow: none;
  background: var(--card-hover, transparent);
}
body[data-page="index"] .inv-kpis .inv-kpi::after,
body[data-page="index"] .inv-kpis .inv-kpi::before{ content: none; }
/* La etiqueta no baja de 12px: la sonda marca todo lo que este por debajo. */
body[data-page="index"] .inv-kpis .inv-kpi .l,
body[data-page="index"] .inv-kpis .inv-kpi small,
body[data-page="index"] .inv-kpis .inv-kpi .inv-kpi-label{
  display: block;
  font-size: .8rem;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 .1rem;
  white-space: nowrap;
}
body[data-page="index"] .inv-kpis .inv-kpi .v,
body[data-page="index"] .inv-kpis .inv-kpi strong,
body[data-page="index"] .inv-kpis .inv-kpi b{
  display: block;
  font-size: 1.06rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* El resumen ejecutivo y las tarjetas del calendario: el mismo aire, sin
   convertirlos en tira porque ahi si son pocos y conviven con otra cosa. */
body[data-page="index"] .exec-stat{
  padding: .55rem .8rem;
  border-radius: 8px;
  box-shadow: none;
}
body[data-page="index"] .ag-day-head .ag-kpi{
  padding: .3rem .55rem;
  border-radius: 6px;
  box-shadow: none;
}

@media (max-width: 720px){
  body[data-page="index"] .inv-kpis{ border-radius: 8px; }
  body[data-page="index"] .inv-kpis .inv-kpi{
    flex: 0 0 auto;
    min-width: 7.75rem;
    padding: .45rem .75rem .5rem;
  }
}

/* La tercera linea de cada tarjeta ("prendas en bodega", "reservado por
   arriendos") sobra en una tira: la etiqueta de arriba ya lo dice y esa linea
   era justamente lo que hacia altas las tarjetas. Se queda accesible para el
   lector de pantalla. */
body[data-page="index"] .inv-kpis .inv-kpi .sub,
body[data-page="index"] .kpis .kpi .sub{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Las filas del listado llevan el color de su traje. Lienzo suave para no tapar
   el dato, y una barra de canto que se ve de lejos: es la que sirve para
   encontrar un colegio sin leer. */
.rent-table tbody tr[data-traje]{
  background: var(--tl, transparent);
  box-shadow: inset 4px 0 0 var(--tt, transparent);
}
.rent-table tbody tr[data-traje]:hover{ background: var(--tl, transparent); filter: brightness(.985); }
.rent-table tbody tr[data-traje="mixto"]{
  background-image: repeating-linear-gradient(135deg,
    var(--traje-rojo-lienzo) 0 12px, var(--traje-azul-lienzo) 12px 24px, var(--traje-fucsia-lienzo) 24px 36px);
}

/* Finanzas abre con quien debe, no con los totales. La clausula QUINTO manda:
   sin saldo cancelado no se entregan los trajes. */
.pagar-primero{ margin-bottom: 22px; }
.pagar-aviso{
  margin: 0 0 10px; padding: .55rem .8rem; font-size: .9rem;
  border-radius: 0 8px 8px 0; border-left: 4px solid var(--naranjo); background: var(--card);
}
.pagar-aviso.pagar-vencido b{ color: var(--naranjo-texto); }
.pagar-tabla{ width: 100%; border-collapse: collapse; font-size: .9rem; }
.pagar-tabla th{
  text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pagar-tabla td{ padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.pagar-tabla td.num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pagar-tabla tbody tr{ cursor: pointer; }
.pagar-tabla tbody tr[data-traje]{ background: var(--tl, transparent); box-shadow: inset 4px 0 0 var(--tt, transparent); }
.pagar-tabla tbody tr:focus-visible{ outline: 2px solid var(--naranjo); outline-offset: -2px; }
/* El estado no depende solo del color: lleva la palabra escrita. */
.pg{ font-size: .8rem; font-weight: 700; white-space: nowrap;
  padding: .16rem .45rem; border-radius: 5px; border-left: 3px solid var(--line); }
.pg.pg-mal{    border-left-color: var(--traje-rojo);   color: var(--traje-rojo-tinta); }
.pg.pg-pronto{ border-left-color: var(--naranjo);      color: var(--naranjo-texto); }
.pg.pg-ok{     border-left-color: var(--dato-tarde);   color: var(--dato-tarde-tinta); }
.pg.pg-sin{    border-left-color: var(--linea-fuerte); color: var(--muted); }
.v2-empty{ color: var(--muted); padding: .8rem 0; }

/* Equipo y turnos abre con la cobertura dia por dia. Los dias con movimiento y
   sin nadie son lo urgente y estaban enterrados entre doce bloques. */
/* Nombre propio: .tur-alerta ya existia en el panel con crit/warn/inef/ok y
   mi regla la habria pisado entera. */
.tur-sinnadie{
  border: 1px solid var(--line); border-left: 4px solid var(--naranjo);
  border-radius: 0 8px 8px 0; background: var(--card);
  padding: .7rem .9rem; margin-bottom: 14px; font-size: .92rem;
}
.tur-sinnadie b{ color: var(--naranjo-texto); }
.tur-cob{ width: 100%; border-collapse: collapse; font-size: .9rem; }
.tur-cob th{
  text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tur-cob td{ padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tur-cob td.num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* El dia sin equipo lleva barra naranja Y la palabra escrita: el color nunca es
   la unica senal. */
.tur-cob tr.tur-falta{ box-shadow: inset 4px 0 0 var(--naranjo); }
.tur-nadie{ color: var(--naranjo-texto); font-weight: 700; }
.tur-gente{ font-size: .8rem; color: var(--muted); margin-top: .2rem; line-height: 1.45; }

/* ==========================================================================
   CAPA 8 · LA PLANILLA                                    (Carlitos, 18-ago)
   --------------------------------------------------------------------------
   Carlitos, mirando el panel: "un exceso de blanco de fondo que hace que no
   haya orden visual". Tenía razón y el motivo era medible: el zebra estaba en
   var(--soft) = #fafafa, que sobre blanco da una diferencia de 5 puntos de
   luminancia. Técnicamente aplicado, visualmente inexistente.

   Loreto lee planillas. Su Excel tiene rejilla, cabecera con fondo y filas que
   se distinguen. Eso no es decoración: es lo que permite seguir una fila larga
   con el dedo sin saltarse de línea. Aquí las tablas se comportan como esa
   planilla, con el gris subido hasta que la fila se separe de verdad.

   El color del dato sigue siendo el del Excel de Loreto y sigue entrando como
   lienzo, nunca sólido: tiñe la fila sin tapar el número que lleva encima.
   ========================================================================== */
body[data-page="index"]{
  --planilla-rejilla:  #e2e2e6;   /* la línea de celda, como la de Excel */
  --planilla-cabecera: #ededf0;   /* el fondo del encabezado */
  --planilla-cebra:    #f1f1f5;   /* la fila par: 9 puntos bajo el blanco */
}

/* --- La rejilla ---------------------------------------------------------- */
body[data-page="index"] .card table,
body[data-page="index"] .v2-section table{
  border-collapse: collapse;
}
body[data-page="index"] .card table td,
body[data-page="index"] .v2-section table td{
  border-bottom: 1px solid var(--planilla-rejilla);
  border-right: 1px solid var(--planilla-rejilla);
}
body[data-page="index"] .card table td:last-child,
body[data-page="index"] .v2-section table td:last-child{ border-right: 0; }

/* --- La cabecera, con peso ----------------------------------------------- */
body[data-page="index"] .card thead th,
body[data-page="index"] .v2-section thead th{
  background: var(--planilla-cabecera);
  color: var(--panel-tinta-2);
  border-bottom: 1.5px solid #b9b9c0;
  border-right: 1px solid var(--planilla-rejilla);
}
body[data-page="index"] .card thead th:last-child,
body[data-page="index"] .v2-section thead th:last-child{ border-right: 0; }

/* --- La fila par, que ahora sí se ve -------------------------------------- */
body[data-page="index"] .card tbody tr:nth-child(even),
body[data-page="index"] .v2-section tbody tr:nth-child(even){
  background: var(--planilla-cebra);
}

/* --- La fila teñida del color del traje gana al cebra ---------------------
   Es dato, no adorno: el color dice de qué traje se habla. Va sobre el gris
   para que no se pierda en las filas pares. */
body[data-page="index"] :is(.card,.v2-section) tbody tr[data-traje="rojo"]   { background: var(--traje-rojo-lienzo); }
body[data-page="index"] :is(.card,.v2-section) tbody tr[data-traje="azul"]   { background: var(--traje-azul-lienzo); }
body[data-page="index"] :is(.card,.v2-section) tbody tr[data-traje="fucsia"] { background: var(--traje-fucsia-lienzo); }
body[data-page="index"] :is(.card,.v2-section) tbody tr[data-traje="mixto"]{
  background: linear-gradient(90deg,
    var(--traje-rojo-lienzo) 0 33.33%,
    var(--traje-azul-lienzo) 33.33% 66.66%,
    var(--traje-fucsia-lienzo) 66.66%);
}
/* El hover tiene que seguir notándose encima de la fila teñida. */
body[data-page="index"] tbody tr[data-traje]:hover{
  box-shadow: inset 3px 0 0 var(--naranja, #ff6a13), inset 0 0 0 999px rgba(0,0,0,.035);
}

/* --- La columna de números, alineada como en una planilla ----------------- */
body[data-page="index"] .card td.num,
body[data-page="index"] .card th.num,
body[data-page="index"] .v2-section td.num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   CAPA 9 · LA CINTA COMO RELOJ                            (Carlitos, 18-ago)
   --------------------------------------------------------------------------
   "Abajo está la línea de tiempo, pero no parece línea de tiempo... la idea de
   marcar las horas es que yo este puntito lo pueda mover para que yo pueda
   ubicar la línea del traje... los colegios deberían estar visibles cuando yo
   le haga clic al punto por horario."

   La cinta deja de ser una lista de barras con nombres al margen. Es un reloj:
   se arrastra un cursor y debajo aparece el corte de ese instante, con los
   colegios y el desglose por color. Los 132 px que ocupaban los nombres se
   devolvieron a la línea de tiempo.
   ========================================================================== */

/* --- La franja de días: más aire y más cuerpo ----------------------------- */
body[data-page="index"] .flujo-dias{ gap: 10px; padding: 4px 2px 10px; }
body[data-page="index"] .flujo-dias .fd{
  min-width: 148px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--panel-linea);
  line-height: 1.45;
}
body[data-page="index"] .flujo-dias .fd b,
body[data-page="index"] .flujo-dias .fd .fd-d{ font-size: 1.06rem; letter-spacing: -.01em; }
body[data-page="index"] .flujo-dias .fd .fd-c{ font-size: .84rem; }

/* --- El eje horario, que ahora dice que son horas ------------------------- */
body[data-page="index"] .fl-hora{ font-size: 10.5px; fill: #6a6a72; }
body[data-page="index"] .fl-hora-fuerte{ font-size: 11.5px; fill: #2a2a2e; font-weight: 700; }
body[data-page="index"] .fl-grid-fuerte{ stroke: #cfcfd6; }
body[data-page="index"] .fl-eje-rot{
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; fill: #8a8a92;
}

/* --- El cursor ------------------------------------------------------------ */
body[data-page="index"] .fl-cursor{ pointer-events: none; }
body[data-page="index"] .fl-cursor-l{
  stroke: var(--negro, #0a0a0a); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .75;
}
body[data-page="index"] .fl-cursor-t{ fill: var(--negro, #0a0a0a); }
body[data-page="index"] .fl-cursor-f{ fill: #fff; }
/* La zona de agarre es transparente y ancha: sin ella habría que apuntar a una
   línea de 2 px, que con el dedo es imposible. */
body[data-page="index"] .fl-agarre{
  fill: transparent; cursor: ew-resize; touch-action: none;
}
body[data-page="index"] .fl-agarre:focus-visible{
  fill: color-mix(in srgb, var(--naranjo, #ff6a13) 8%, transparent);
  outline: 2px solid var(--naranjo, #ff6a13);
}
/* Las barras que el cursor toca suben; el resto se retira sin desaparecer. */
body[data-page="index"] .fl-fila{ transition: opacity .12s; }
body[data-page="index"] .fl-fila:not(.fl-tocada){ opacity: .42; }
body[data-page="index"] .fl-fila.fl-tocada .fl-barra{ stroke-width: 9; }
body[data-page="index"] .fl-fila.fl-apagada{ opacity: .12; }

/* --- El corte del instante ------------------------------------------------ */
body[data-page="index"] .fl-corte{
  margin-top: 14px; border: 1.5px solid var(--panel-linea);
  border-radius: 14px; background: #fff; overflow: hidden;
}
body[data-page="index"] .flc-cab{
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 18px; background: #18181b; color: #ffffff;
}
body[data-page="index"] .flc-cab,
body[data-page="index"] .flc-cab *{
  color: #ffffff;
}
body[data-page="index"] .flc-hora{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  color: #fbbf24; /* Ámbar brillante para alta visibilidad */
}
body[data-page="index"] .flc-tit{ display: flex; flex-direction: column; gap: 2px; }
body[data-page="index"] .flc-tit b{
  font-size: 1.02rem; font-weight: 700;
  color: #ffffff;
}
body[data-page="index"] .flc-tit span{
  font-size: .84rem; opacity: .95;
  color: #e2e8f0;
}

/* Las pastillas de color: son el filtro, y por eso son botones de verdad. */
body[data-page="index"] .flc-colores{
  display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--panel-linea);
}
body[data-page="index"] .flc-color{
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  min-height: 44px; padding: 8px 14px; cursor: pointer;
  border: 1.5px solid var(--panel-linea); border-radius: 11px;
  background: #fff; font: inherit; text-align: left;
}
body[data-page="index"] .flc-color[data-traje="rojo"]  { background: var(--traje-rojo-lienzo);   border-color: var(--traje-rojo); }
body[data-page="index"] .flc-color[data-traje="azul"]  { background: var(--traje-azul-lienzo);   border-color: var(--traje-azul); }
body[data-page="index"] .flc-color[data-traje="fucsia"]{ background: var(--traje-fucsia-lienzo); border-color: var(--traje-fucsia); }
body[data-page="index"] .flc-color[data-traje="morado"]{ background: var(--traje-morado-lienzo); border-color: var(--traje-morado); }
body[data-page="index"] .flc-color.flc-on{ box-shadow: inset 0 0 0 2px var(--negro, #0a0a0a); }
body[data-page="index"] .flc-c-n{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.24rem; font-weight: 700; line-height: 1;
}
body[data-page="index"] .flc-c-k{ font-size: .8rem; font-weight: 700; text-transform: capitalize; }
body[data-page="index"] .flc-c-h{ font-size: .73rem; color: #5c5c62; }
body[data-page="index"] .flc-c-mal{ color: #a11; font-weight: 700; }

body[data-page="index"] .flc-pronto{
  display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 18px;
  font-size: .86rem; border-bottom: 1px solid var(--panel-linea);
}
body[data-page="index"] .flc-sale::before  { content: "↑ "; color: var(--naranjo-texto, #a63c00); }
body[data-page="index"] .flc-vuelve::before{ content: "↓ "; color: #2b6b3f; }
body[data-page="index"] .flc-nada{ padding: 20px 18px; color: #5c5c62; margin: 0; }
body[data-page="index"] .flc-tabla{ width: 100%; }
body[data-page="index"] .flc-apura{ color: #a11; font-weight: 700; }

/* ==========================================================================
   CAPA 10 · EL CALENDARIO DE MES                          (Carlitos, 18-ago)
   --------------------------------------------------------------------------
   "La idea es poder ver como un calendario... un calendario interactivo que yo
   vaya apretando por día, y no un calendario hacia abajo, sino un calendario
   así como el calendario que uno ve."

   Y sobre Equipo y turnos: "está súper enredado, veo una lista que no entiendo
   qué es". Esa vista se disuelve acá dentro: la pregunta "quién entrega" es del
   día, no de una lista aparte.
   ========================================================================== */
body[data-page="index"] .cal-barra{
  display: flex; align-items: center; gap: 12px; margin: 18px 0 12px;
}
body[data-page="index"] .cal-mes{
  margin: 0; font-size: 1.3rem; text-transform: capitalize; letter-spacing: -.01em;
}
body[data-page="index"] .cal-nav{
  width: 44px; height: 44px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid var(--panel-linea); background: #fff;
  font-size: 1.35rem; line-height: 1; font-family: inherit;
}
body[data-page="index"] .cal-nav:hover{ background: var(--planilla-cebra, #f1f1f5); }
body[data-page="index"] .cal-tot{ margin-left: auto; font-size: .88rem; color: #5c5c62; }
body[data-page="index"] .cal-aviso{
  padding: 12px 16px; border-radius: 11px; margin-top: 14px;
  background: color-mix(in srgb, var(--naranjo, #ff6a13) 10%, #fff);
  border: 1.5px solid var(--naranjo, #ff6a13); font-size: .92rem;
}

/* --- La grilla ------------------------------------------------------------ */
body[data-page="index"] .cal-grid{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
body[data-page="index"] .cal-dow{
  padding: 8px 4px; text-align: center; font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #6a6a72;
}
body[data-page="index"] .cal-celda{
  min-height: 108px; padding: 8px; border-radius: 11px;
  border: 1.5px solid var(--panel-linea); background: #fff;
  display: flex; flex-direction: column; gap: 5px;
}
body[data-page="index"] .cal-fuera{ background: transparent; border-color: transparent; min-height: 0; }
body[data-page="index"] .cal-n{ font-size: .95rem; font-weight: 800; color: #8a8a92; }
body[data-page="index"] .cal-con{ cursor: pointer; background: var(--planilla-cebra, #f1f1f5); }
body[data-page="index"] .cal-con .cal-n{ color: var(--negro, #0a0a0a); }
body[data-page="index"] .cal-con:hover{ border-color: var(--negro, #0a0a0a); }
body[data-page="index"] .cal-abierta{
  border-color: var(--negro, #0a0a0a); box-shadow: inset 0 0 0 2px var(--negro, #0a0a0a);
}
body[data-page="index"] .cal-falta{ border-color: var(--naranjo, #ff6a13); }
body[data-page="index"] .cal-celda:focus-visible{ outline: 2px solid var(--naranjo, #ff6a13); outline-offset: 2px; }

body[data-page="index"] .cal-chips{ display: flex; flex-direction: column; gap: 3px; }
body[data-page="index"] .cal-chip{
  font-size: .705rem; padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-weight: 600;
}
body[data-page="index"] .cal-sale  { background: color-mix(in srgb, var(--naranjo, #ff6a13) 16%, #fff); }
body[data-page="index"] .cal-vuelve{ background: #dff0e4; }
body[data-page="index"] .cal-eq    { background: #e8e8ec; color: #3d3d3d; }
body[data-page="index"] .cal-sineq { background: var(--naranjo, #ff6a13); color: #0a0a0a; font-weight: 800; }

/* La tira de color dice de qué trajes se trata sin tener que abrir el día. */
body[data-page="index"] .cal-tira{ display: flex; gap: 3px; margin-top: auto; }
body[data-page="index"] .cal-tira i{ height: 4px; flex: 1; border-radius: 2px; }
body[data-page="index"] .cal-tira i[data-traje="rojo"]  { background: var(--traje-rojo); }
body[data-page="index"] .cal-tira i[data-traje="azul"]  { background: var(--traje-azul); }
body[data-page="index"] .cal-tira i[data-traje="fucsia"]{ background: var(--traje-fucsia); }

/* --- El detalle del día --------------------------------------------------- */
body[data-page="index"] .cal-pista{ margin: 18px 0; color: #5c5c62; }
body[data-page="index"] .cal-det{ margin-top: 22px; }
body[data-page="index"] .cal-det-cab{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
body[data-page="index"] .cal-det-cab h3{ margin: 0; font-size: 1.22rem; text-transform: capitalize; }
body[data-page="index"] .cal-det-eq{
  padding: 12px 16px; border-radius: 11px; background: var(--planilla-cebra, #f1f1f5);
  font-size: .92rem; margin-bottom: 16px;
}
body[data-page="index"] .cal-sineq-t{ color: var(--naranjo-texto, #a63c00); }
body[data-page="index"] .cal-det-h{
  margin: 18px 0 8px; font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #3a3a3a;
}
body[data-page="index"] .cal-tabla{ width: 100%; }

@media (max-width: 860px){
  body[data-page="index"] .cal-celda{ min-height: 84px; padding: 6px; }
  body[data-page="index"] .cal-chip{ font-size: .66rem; }
  body[data-page="index"] .cal-dow{ font-size: .66rem; }
}

/* ==========================================================================
   CAPA 11 · PENDIENTES                                    (Carlitos, 18-ago)
   --------------------------------------------------------------------------
   "La parte de resumen general, siento que está rara. En realidad no es algo
   que yo vería." Mostraba nueve bloques de métricas que ya viven en Finanzas y
   en Calendario. Lo único que no estaba en ninguna otra parte era qué está
   atascado, y eso es lo que queda.
   ========================================================================== */
body[data-page="index"] .pnd-tipos{
  display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px;
}
body[data-page="index"] .pnd-tipo{
  display: flex; flex-direction: column; gap: 1px; padding: 10px 15px;
  border: 1.5px solid var(--panel-linea); border-radius: 11px;
  background: var(--planilla-cebra, #f1f1f5); min-width: 116px;
}
body[data-page="index"] .pnd-tipo b{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; line-height: 1;
}
body[data-page="index"] .pnd-tipo span{ font-size: .76rem; color: #4a4a52; }
body[data-page="index"] .pnd-urge{
  padding: 12px 16px; border-radius: 11px; margin: 0 0 16px;
  background: color-mix(in srgb, var(--naranjo, #ff6a13) 12%, #fff);
  border-left: 4px solid var(--naranjo, #ff6a13);
}
body[data-page="index"] .pnd-tabla{ width: 100%; }
body[data-page="index"] .pnd-dias{
  display: block; font-size: .74rem; color: #6a6a72; font-family: inherit;
}
body[data-page="index"] .pnd-cerca{ color: var(--naranjo-texto, #a63c00); font-weight: 800; }
body[data-page="index"] .pnd-chips{ display: flex; flex-wrap: wrap; gap: 4px; }
body[data-page="index"] .pnd-chip{
  font-size: .72rem; padding: 2px 8px; border-radius: 5px; white-space: nowrap;
  border: 1px solid rgba(0,0,0,.14); background: #fff; font-weight: 600;
}
/* Cada tipo de atasco se ve distinto: el horario es de Loreto, la ficha es del
   colegio, la plata es de cobranza. Son tres llamados diferentes. */
body[data-page="index"] .pnd-horario { background: color-mix(in srgb, var(--naranjo, #ff6a13) 18%, #fff); }
body[data-page="index"] .pnd-ficha   { background: color-mix(in srgb, var(--dato-baile, #00ffff) 20%, #fff); }
body[data-page="index"] .pnd-firma   { background: color-mix(in srgb, var(--dato-confirmado, #ffff00) 26%, #fff); }
body[data-page="index"] .pnd-plata   { background: #e6f0e8; }
body[data-page="index"] .pnd-datos,
body[data-page="index"] .pnd-contacto{ background: #ececf0; }

/* --- El aviso de descuadre: al lado, y no como error ----------------------
   Carlitos: "respeta los horarios marcados en el excel de loreto, pero le
   ponemos alertas al ladito nomás / no como error". Son dos fuentes que no
   coinciden, no un fallo: el Excel manda y la diferencia se resuelve con
   Loreto. Por eso va en gris con un filo naranjo, y no en rojo. */
body[data-page="index"] .dl-ojo{
  display: block; margin-top: 3px; padding: 4px 9px;
  font-size: .76rem; line-height: 1.35; color: #4a4a52;
  background: var(--planilla-cebra, #f1f1f5);
  border-left: 3px solid var(--naranjo, #ff6a13); border-radius: 0 6px 6px 0;
}
body[data-page="index"] .pnd-revisar{
  background: var(--planilla-cebra, #f1f1f5);
  border-color: var(--naranjo, #ff6a13); border-style: dashed;
}

/* --- El correo, y lo que dijo el cliente ---------------------------------
   Carlitos: "el correo por ejemplo sí es vital". Va con enlace para escribir
   sin copiarlo, y cuando falta lo dice, porque es por donde se coordina.
   Lo demás que trajo Hermes va plegado: es contexto para quien coordina, no un
   dato de operación, y abierto ocupaba más que la ficha entera. */
body[data-page="index"] .dl-mail{
  color: var(--naranjo-texto, #a63c00); text-decoration: underline;
  text-underline-offset: 2px; word-break: break-all;
}
body[data-page="index"] .dl-falta{ color: #8a8a92; font-style: italic; }
body[data-page="index"] .dl-notas{
  grid-column: 1 / -1; margin-top: 8px;
  border: 1.5px solid var(--panel-linea); border-radius: 9px;
  background: var(--planilla-cebra, #f1f1f5);
}
body[data-page="index"] .dl-notas summary{
  cursor: pointer; padding: 9px 12px; min-height: 44px;
  display: flex; align-items: center;
  font-size: .84rem; font-weight: 700; color: #3a3a3a;
}
body[data-page="index"] .dl-notas summary:hover{ color: var(--negro, #0a0a0a); }
body[data-page="index"] .dl-notas pre{
  margin: 0; padding: 0 12px 12px; white-space: pre-wrap; word-break: break-word;
  font: inherit; font-size: .82rem; line-height: 1.5; color: #4a4a52;
}

/* --- Los puntos de la cinta: cada uno es su propio evento -----------------
   Carlitos: "quiero ver los puntos, o sea los arriendos que hay por horario y
   por día, si es entrega o devolución, y ahí ver todos los datos".

   La salida va rellena y la devolución hueca: de lejos se distinguen sin leer
   nada, que es como Loreto lee la cinta. El área de toque es un círculo
   invisible de 13 px porque el punto visible mide 5 y con el dedo sería
   imposible acertarle. */
body[data-page="index"] .fl-pt{ cursor: pointer; }
body[data-page="index"] .fl-pt-hit{ fill: transparent; }
body[data-page="index"] .fl-cap-e{ stroke: #fff; stroke-width: 1.5; }
body[data-page="index"] .fl-cap-v{
  fill: #fff; stroke-width: 2.5;
}
body[data-page="index"] .fl-fila[data-traje="rojo"]   .fl-cap-v{ stroke: var(--traje-rojo); }
body[data-page="index"] .fl-fila[data-traje="azul"]   .fl-cap-v{ stroke: var(--traje-azul); }
body[data-page="index"] .fl-fila[data-traje="fucsia"] .fl-cap-v{ stroke: var(--traje-fucsia); }
body[data-page="index"] .fl-fila[data-traje="sin"]    .fl-cap-v{ stroke: #8a8a92; }
body[data-page="index"] .fl-pt:hover .fl-cap{ r: 7; }
body[data-page="index"] .fl-pt-on .fl-cap{
  r: 8; stroke: var(--negro, #0a0a0a); stroke-width: 2.5;
}
body[data-page="index"] .fl-pt:focus-visible .fl-pt-hit{
  fill: color-mix(in srgb, var(--naranjo, #ff6a13) 24%, transparent);
}

/* --- El detalle dice qué evento es, y a dónde se puede ir ----------------- */
body[data-page="index"] .fl-det-ev{
  display: inline-block; padding: 3px 10px; border-radius: 6px; margin-bottom: 6px;
  font-size: .74rem; font-weight: 800; letter-spacing: .07em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
body[data-page="index"] .fl-ev-e{ background: var(--naranjo, #ff6a13); color: #0a0a0a; }
body[data-page="index"] .fl-ev-v{ background: #2b6b3f; color: #fff; }
body[data-page="index"] .fl-det-ir{
  display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start;
}
body[data-page="index"] .fl-det-ir .btn{ min-height: 40px; }
/* Al llegar derivado desde el flujo, la fila destino se enciende un momento:
   sin eso uno aterriza en una tabla larga y no sabe qué vino a ver. */
body[data-page="index"] .fl-resalta{
  animation: fl-resalta 2.4s ease-out;
}
@keyframes fl-resalta{
  0%, 55%{ box-shadow: inset 0 0 0 2px var(--naranjo, #ff6a13); }
  100%   { box-shadow: inset 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce){
  body[data-page="index"] .fl-resalta{ animation: none; box-shadow: inset 0 0 0 2px var(--naranjo, #ff6a13); }
}

/* --- Los bloques de tallas, teñidos y separados por color -----------------
   Carlitos: "los cuadros de resumen, si un colegio arrendó 2 colores o más,
   deben venir separados por color y no el total". En el mesón se preparan los
   rojos y después los azules: un total de veintiséis no sirve para preparar
   nada. Y con dos o tres bloques iguales en blanco había que leer el subtítulo
   para saber cuál era cuál. */
body[data-page="index"] .ftl-color-bloque[data-traje]{
  padding: 10px; border-radius: 10px; border: 1.5px solid;
}
body[data-page="index"] .ftl-color-bloque[data-traje="rojo"]  { background: var(--traje-rojo-lienzo);   border-color: var(--traje-rojo); }
body[data-page="index"] .ftl-color-bloque[data-traje="azul"]  { background: var(--traje-azul-lienzo);   border-color: var(--traje-azul); }
body[data-page="index"] .ftl-color-bloque[data-traje="fucsia"]{ background: var(--traje-fucsia-lienzo); border-color: var(--traje-fucsia); }

body[data-page="index"] .ftl-split-card[data-traje="rojo"]  { background: var(--traje-rojo-lienzo);   border-color: var(--traje-rojo); }
body[data-page="index"] .ftl-split-card[data-traje="azul"]  { background: var(--traje-azul-lienzo);   border-color: var(--traje-azul); }
body[data-page="index"] .ftl-split-card[data-traje="fucsia"]{ background: var(--traje-fucsia-lienzo); border-color: var(--traje-fucsia); }
body[data-page="index"] .ftl-split-card .dot{
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.28);
}
body[data-page="index"] .ftl-tt-c{
  display: inline-block; padding: 3px 9px; border-radius: 6px; margin-left: 5px;
  font-weight: 800; border: 1px solid rgba(0,0,0,.16);
}
body[data-page="index"] .ftl-tt-c[data-traje="rojo"]  { background: var(--traje-rojo-lienzo); }
body[data-page="index"] .ftl-tt-c[data-traje="azul"]  { background: var(--traje-azul-lienzo); }
body[data-page="index"] .ftl-tt-c[data-traje="fucsia"]{ background: var(--traje-fucsia-lienzo); }

/* --- El color del traje en la lista de alumnos ---------------------------
   Carlitos: "en la columna de color que venga con el nombre y el color
   pintadito, y que esos colores se reflejen para la impresión, para imprimir a
   color". El punto solo no basta cuando la lista tiene cuarenta filas: se busca
   el color, no se lee la palabra. */
body[data-page="index"] .disp-tbl tbody tr[data-traje="rojo"]   td{ background: var(--traje-rojo-lienzo); }
body[data-page="index"] .disp-tbl tbody tr[data-traje="azul"]   td{ background: var(--traje-azul-lienzo); }
body[data-page="index"] .disp-tbl tbody tr[data-traje="fucsia"] td{ background: var(--traje-fucsia-lienzo); }
body[data-page="index"] .disp-tbl .dot{
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.3);
}

/* Al imprimir desde el navegador, los fondos se descartan por ahorro de tinta y
   la ficha vuelve a ser un muro blanco. Acá el color ES el dato. */
@media print{
  body[data-page="index"] *{
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* --- Dos colores son dos colores ------------------------------------------
   Carlitos: "si el arriendo tiene 2 colores, deben salir los 2 colores". El
   chip decía "Azul+Fucsia" y llevaba un solo punto fucsia, porque colorHex
   elegía uno por su cuenta cuando la clave era "mixto". Ahora la muestra es un
   degradado en franjas con los colores que el arriendo tiene de verdad. */
body[data-page="index"] .chip-pt{
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px;
  border: 1px solid rgba(0,0,0,.3);
}
body[data-page="index"] .dot{
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  vertical-align: -1px; border: 1px solid rgba(0,0,0,.3);
}

/* --- El buscador de la cinta ---------------------------------------------
   Carlitos: "la línea de tiempo es como inservible… debe poder ser útil, el
   primer contacto interactivo para buscar información". Se escribe un colegio y
   la cinta salta al día donde ocurre: antes había que adivinar el día primero. */
body[data-page="index"] .fl-buscar{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 14px 0 12px; position: relative;
}
body[data-page="index"] .fl-b-inp{
  flex: 1 1 280px; min-height: 46px; padding: 11px 16px;
  border: 1.5px solid var(--panel-linea); border-radius: 12px;
  font: inherit; font-size: 1rem; background: #fff;
}
body[data-page="index"] .fl-b-inp:focus{
  outline: 2px solid var(--naranjo, #ff6a13); outline-offset: 1px; border-color: transparent;
}
body[data-page="index"] .fl-b-x{
  position: absolute; left: calc(100% - 340px); top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--planilla-cebra, #f1f1f5); font: inherit;
}
body[data-page="index"] .fl-b-modo{ display: flex; gap: 0; }
body[data-page="index"] .fl-b-m{
  min-height: 46px; padding: 10px 18px; cursor: pointer; font: inherit; font-weight: 700;
  border: 1.5px solid var(--panel-linea); background: #fff;
}
body[data-page="index"] .fl-b-m:first-child{ border-radius: 12px 0 0 12px; }
body[data-page="index"] .fl-b-m:last-child { border-radius: 0 12px 12px 0; border-left: 0; }
body[data-page="index"] .fl-b-m.on{ background: var(--negro, #0a0a0a); color: #fff; border-color: var(--negro, #0a0a0a); }

/* Un cupo sin cubrir no es una persona. La planilla de turnos declara cupos que
   nadie tomó y contarlos como equipo hacía ver días cubiertos que en realidad
   están a medias. */
body[data-page="index"] .cal-libres{
  display: block; margin-top: 6px; color: var(--naranjo-texto, #a63c00); font-weight: 700;
}

/* ==========================================================================
   CAPA 12 · LA CINTA RESPONDE "¿ALCANZO?"                (Carlitos, 18-ago)
   --------------------------------------------------------------------------
   "Es como pa ver solo horarios, en verdad no tiene utilidad." Tenía razón: la
   hora de cada colegio ya está en el Calendario, en la tabla y en la ficha. Lo
   que solo una línea de tiempo puede mostrar es la SIMULTANEIDAD — cómo se
   encima lo que sale con lo que todavía no vuelve.
   ========================================================================== */

/* --- Las bandas por color, contra el stock ------------------------------- */
body[data-page="index"] .fl-banda-bg{ fill: #00000006; rx: 6; }
body[data-page="index"] .fl-banda[data-traje="rojo"]   .fl-banda-area{ fill: #ff000030; stroke: var(--traje-rojo);   stroke-width: 1.5; }
body[data-page="index"] .fl-banda[data-traje="azul"]   .fl-banda-area{ fill: #3333ff30; stroke: var(--traje-azul);   stroke-width: 1.5; }
body[data-page="index"] .fl-banda[data-traje="fucsia"] .fl-banda-area{ fill: #ff00ff28; stroke: var(--traje-fucsia); stroke-width: 1.5; }
/* La línea del stock: lo que hay en bodega. Si el área la cruza, no alcanza. */
body[data-page="index"] .fl-banda-stock{
  stroke: var(--negro, #0a0a0a); stroke-width: 1.5; stroke-dasharray: 5 3;
}
body[data-page="index"] .fl-banda-stock-t{ font-size: 9px; fill: #3a3a3e; font-weight: 700; }
body[data-page="index"] .fl-banda-k{
  font-size: 10px; font-weight: 800; letter-spacing: .12em; fill: #4a4a52;
}
body[data-page="index"] .fl-banda-n{ font-size: 10.5px; fill: #2a2a2e; font-weight: 600; }
body[data-page="index"] .fl-banda[data-traje="rojo"]   .fl-banda-k{ fill: var(--traje-rojo-tinta); }
body[data-page="index"] .fl-banda[data-traje="azul"]   .fl-banda-k{ fill: var(--traje-azul-tinta); }
body[data-page="index"] .fl-banda[data-traje="fucsia"] .fl-banda-k{ fill: var(--traje-fucsia-tinta); }

/* --- El aprieto: un traje que sale antes de haber vuelto ------------------ */
body[data-page="index"] .fl-aprieto{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 16px; border-radius: 11px; margin: 12px 0;
  background: var(--planilla-cebra, #f1f1f5);
  border-left: 4px solid var(--naranjo, #ff6a13);
  font-size: .9rem;
}
body[data-page="index"] .fl-aprieto-mal{
  background: color-mix(in srgb, var(--naranjo, #ff6a13) 13%, #fff);
  border-left-color: #a11;
}

/* --- El "ahora" ---------------------------------------------------------- */
body[data-page="index"] .fl-ahora line{
  stroke: #a11; stroke-width: 1.5; stroke-dasharray: 2 2;
}
body[data-page="index"] .fl-ahora text{
  font-size: 9px; font-weight: 800; letter-spacing: .12em; fill: #a11;
}

/* El interruptor de 1 / 3 días va suelto, separado de los de modo: son dos
   decisiones distintas —cómo agrupo y cuánto miro— y juntarlas en un solo grupo
   hacía parecer que eran excluyentes entre sí. */
body[data-page="index"] .fl-b-solo{ border-radius: 12px; }
/* Cuando el eje cubre tres días, el cambio de día se marca más que la hora. */
body[data-page="index"] .fl-hora-dia{
  font-weight: 800; fill: var(--negro, #0a0a0a); font-size: 11px;
}

/* --- El correo al cliente, listo para copiar ------------------------------
   Carlitos: "que sea personalizado, cosa de copiar y pegar". Va en la ficha,
   junto a los papeles, porque es lo que se manda con el documento. Plegado a
   propósito: son dos textos largos y abiertos empujan los datos del arriendo
   fuera de la pantalla. */
body[data-page="index"] .cor-caja{
  margin: 14px 0 18px; border: 1.5px solid var(--panel-linea); border-radius: 12px;
  background: var(--planilla-cebra, #f1f1f5); overflow: hidden;
}
body[data-page="index"] .cor-caja summary{
  cursor: pointer; padding: 13px 16px; min-height: 46px;
  display: flex; align-items: center; font-weight: 700; font-size: .94rem;
}
body[data-page="index"] .cor-caja summary:hover{ background: #e8e8ee; }
body[data-page="index"] .cor-cuerpo{
  display: grid; gap: 14px; padding: 0 14px 14px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
body[data-page="index"] .cor-uno{
  background: #fff; border: 1px solid var(--panel-linea); border-radius: 10px; overflow: hidden;
}
body[data-page="index"] .cor-head{
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border-bottom: 1px solid var(--panel-linea); background: #fafafb;
}
body[data-page="index"] .cor-head b{ flex: 1; font-size: .88rem; }
body[data-page="index"] .cor-asunto{
  margin: 0; padding: 9px 12px; font-size: .82rem;
  border-bottom: 1px solid #ececf0; color: #3a3a3e;
}
body[data-page="index"] .cor-txt{
  margin: 0; padding: 12px; max-height: 340px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font: inherit; font-size: .82rem; line-height: 1.5; color: #2a2a2e;
}
body[data-page="index"] .btn.cor-ok{ background: #2b6b3f; color: #fff; }
@media print{ body[data-page="index"] .cor-caja{ display: none; } }

/* --- Qué hacer a esta hora -----------------------------------------------
   Carlitos: "si pongo una hora debería tirarme automáticamente a la vista de
   abajo, y debe tener llamado a la acción". El scroll baja al soltar el cursor,
   nunca durante el arrastre —eso marea y pelea con el dedo—, y acá abajo el
   corte dice qué corresponde hacer: a las 19:00 de un jueves es preparar lo que
   sale; a las 15:00 de un viernes, recibir lo que vuelve. */
body[data-page="index"] .flc-hacer{
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 16px 18px; border-top: 1.5px solid var(--panel-linea);
  background: var(--planilla-cebra, #f1f1f5);
}
body[data-page="index"] .flc-h-txt{ flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
body[data-page="index"] .flc-h-txt b{ font-size: 1.06rem; letter-spacing: -.01em; }
body[data-page="index"] .flc-h-txt span{ font-size: .84rem; color: #4a4a52; }
body[data-page="index"] .flc-h-btn{ display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page="index"] .flc-h-btn .btn{ min-height: 44px; }

/* ==========================================================================
   CAPA 13 · LAS FILAS EN HTML Y EL DETALLE EN SU LUGAR   (Carlitos, 18-ago)
   --------------------------------------------------------------------------
   "Cuando abro un colegio que en vez de abrirse la pestaña de resumen abajo se
   abra como en la sección, y no abajo de todos los colegios sino que abajo del
   colegio escogido nomás. Y juega con el formato y colores divididos por
   información relevante, como cantidad, equipos, etc."

   Dentro de un SVG no se puede meter HTML entre dos filas, así que el detalle
   tenía que irse al final del dibujo — con trece colegios, lejos de la barra
   que se apretó. Las filas pasan a HTML posicionado en porcentaje sobre la
   misma escala de tiempo que la curva, y el detalle se abre donde corresponde.
   ========================================================================== */
body[data-page="index"] .fl-filas{ position: relative; padding: 6px 0 2px; }
body[data-page="index"] .fr{
  display: flex; align-items: center; gap: 10px; padding: 3px 0;
}
body[data-page="index"] .fr-off{ opacity: .2; }
body[data-page="index"] .fr-pista{
  position: relative; flex: 1; height: 30px; cursor: pointer;
  border-radius: 7px; background: #00000005;
}
body[data-page="index"] .fr-pista:hover{ background: #0000000d; }
body[data-page="index"] .fr-pista:focus-visible{ outline: 2px solid var(--naranjo, #ff6a13); }
/* La barra lleva el nombre adentro: así no roba ancho a la línea de tiempo, que
   fue justo el reclamo de que los colegios ocupaban el margen izquierdo. */
body[data-page="index"] .fr-barra{
  position: absolute; top: 8px; height: 14px; border-radius: 7px;
  display: flex; align-items: center; min-width: 6px;
}
body[data-page="index"] .fr-txt{
  padding: 0 9px; font-size: .78rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body[data-page="index"] .fr[data-traje="rojo"]   .fr-barra{ background: var(--traje-rojo); }
body[data-page="index"] .fr[data-traje="azul"]   .fr-barra{ background: var(--traje-azul); }
body[data-page="index"] .fr[data-traje="fucsia"] .fr-barra{ background: var(--traje-fucsia); }
body[data-page="index"] .fr[data-traje="mixto"]  .fr-barra{
  background: linear-gradient(90deg, var(--traje-rojo) 0 33%, var(--traje-azul) 33% 66%, var(--traje-fucsia) 66%);
}
body[data-page="index"] .fr[data-traje="sin"]    .fr-barra{ background: #8a8a92; }

/* Los puntos de evento: salida rellena, devolución hueca. Área de toque de 26px
   porque el punto visible mide 12 y con el dedo sería imposible. */
body[data-page="index"] .fr-pt{
  position: absolute; top: 50%; width: 26px; height: 26px; padding: 0;
  transform: translate(-50%, -50%); border: 0; background: transparent;
  cursor: pointer; border-radius: 50%;
}
body[data-page="index"] .fr-pt::after{
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}
body[data-page="index"] .fr[data-traje="rojo"]   .fr-e::after{ background: var(--traje-rojo); }
body[data-page="index"] .fr[data-traje="azul"]   .fr-e::after{ background: var(--traje-azul); }
body[data-page="index"] .fr[data-traje="fucsia"] .fr-e::after{ background: var(--traje-fucsia); }
body[data-page="index"] .fr[data-traje="sin"]    .fr-e::after{ background: #8a8a92; }
body[data-page="index"] .fr-v::after{ background: #fff; }
body[data-page="index"] .fr[data-traje="rojo"]   .fr-v::after{ box-shadow: 0 0 0 3px var(--traje-rojo); }
body[data-page="index"] .fr[data-traje="azul"]   .fr-v::after{ box-shadow: 0 0 0 3px var(--traje-azul); }
body[data-page="index"] .fr[data-traje="fucsia"] .fr-v::after{ box-shadow: 0 0 0 3px var(--traje-fucsia); }
body[data-page="index"] .fr[data-traje="sin"]    .fr-v::after{ box-shadow: 0 0 0 3px #8a8a92; }
body[data-page="index"] .fr-pt:hover::after{ inset: 5px; }
body[data-page="index"] .fr-pt:focus-visible{ outline: 2px solid var(--naranjo, #ff6a13); }

body[data-page="index"] .fr-n{
  width: 42px; text-align: right; font-weight: 800; font-size: .84rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
body[data-page="index"] .fr-on .fr-pista{ background: #0000000f; }
body[data-page="index"] .fl-filas-cur{
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1.5px dashed rgba(10,10,10,.55); pointer-events: none;
  margin-left: 0;
}

/* --- El detalle, abierto bajo su fila ------------------------------------- */
body[data-page="index"] .fl-det{
  margin: 4px 0 14px 0; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--panel-linea); background: #fff;
}
body[data-page="index"] .fl-det[data-traje="rojo"]  { border-color: var(--traje-rojo); }
body[data-page="index"] .fl-det[data-traje="azul"]  { border-color: var(--traje-azul); }
body[data-page="index"] .fl-det[data-traje="fucsia"]{ border-color: var(--traje-fucsia); }

/* Cada caja con el color de lo que informa: el traje con el suyo, el reloj en
   naranjo, la plata en verde y el equipo en gris. Así se busca el bloque por
   color en vez de leer los cuatro títulos. */
body[data-page="index"] .fl-det-caja{ border-top: 4px solid transparent; }
body[data-page="index"] .fl-det-caja:nth-child(1){ border-top-color: var(--naranjo, #ff6a13); background: #ff6a1308; }
body[data-page="index"] .fl-det-caja:nth-child(2){ border-top-color: #7a7a86; background: #7a7a8608; }
body[data-page="index"] .fl-det-caja:nth-child(3){ border-top-color: #2b6b3f; background: #2b6b3f08; }
body[data-page="index"] .fl-det-caja:nth-child(4){ border-top-color: #3d6fb4; background: #3d6fb408; }

/* --- La franja de días en Arriendos y el editor de la ficha ---------------
   Carlitos: "en todos los arriendos igual quiero arribita la elección por día
   para no bajar tanto". Un desplegable obliga a abrirlo y leer una lista; una
   franja se elige de un toque y además dice cuántos hay en cada día. */
body[data-page="index"] .rent-dias{
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px;
  scrollbar-width: thin;
}
body[data-page="index"] .rd{
  flex: 0 0 auto; min-width: 104px; min-height: 56px; padding: 9px 14px; cursor: pointer;
  border: 1.5px solid var(--panel-linea); border-radius: 11px; background: #fff;
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  font: inherit; text-align: left;
}
body[data-page="index"] .rd b{ font-size: .96rem; }
body[data-page="index"] .rd span{ font-size: .74rem; color: #5c5c62; }
body[data-page="index"] .rd:hover{ border-color: var(--negro, #0a0a0a); }
body[data-page="index"] .rd.on,
body[data-page="index"] .rd.on *{
  background: var(--negro, #0a0a0a); border-color: var(--negro, #0a0a0a); color: #ffffff;
}
body[data-page="index"] .rd.on span{ color: rgba(255,255,255,.85); }

/* --- El editor de la ficha ------------------------------------------------
   "Hay varios datos que debo poder editar directamente en el panel, pero que
   queden guardados en la BD. El panel es la verdad absoluta." Cada grupo con su
   color, igual que el detalle de la cinta. */
body[data-page="index"] .ed-caja{
  margin: 14px 0; border: 1.5px solid var(--panel-linea); border-radius: 12px;
  background: #fff; overflow: hidden;
}
body[data-page="index"] .ed-caja summary{
  cursor: pointer; padding: 13px 16px; min-height: 46px;
  display: flex; align-items: center; font-weight: 700; font-size: .94rem;
  background: var(--planilla-cebra, #f1f1f5);
}
body[data-page="index"] .ed-cuerpo{
  display: grid; gap: 14px; padding: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
body[data-page="index"] .ed-grupo{
  padding: 12px; border-radius: 10px; border-top: 4px solid transparent;
  display: flex; flex-direction: column; gap: 9px;
}
body[data-page="index"] .ed-grupo h5{
  margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #4a4a52;
}
body[data-page="index"] .ed-g-contacto{ border-top-color: #3d6fb4; background: #3d6fb40a; }
body[data-page="index"] .ed-g-trajes  { border-top-color: var(--naranjo, #ff6a13); background: #ff6a130a; }
body[data-page="index"] .ed-g-horas   { border-top-color: #7a7a86; background: #7a7a860a; }
body[data-page="index"] .ed-g-plata   { border-top-color: #2b6b3f; background: #2b6b3f0a; }
body[data-page="index"] .ed-c{ display: flex; flex-direction: column; gap: 3px; }
body[data-page="index"] .ed-c span{ font-size: .78rem; color: #4a4a52; font-weight: 600; }
body[data-page="index"] .ed-c input{
  min-height: 42px; padding: 9px 11px; font: inherit; font-size: .92rem;
  border: 1.5px solid var(--panel-linea); border-radius: 8px; background: #fff;
}
body[data-page="index"] .ed-c input:focus{
  outline: 2px solid var(--naranjo, #ff6a13); outline-offset: 1px; border-color: transparent;
}
body[data-page="index"] .ed-par{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-page="index"] .ed-pie{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 13px 16px; border-top: 1px solid var(--panel-linea);
  background: var(--planilla-cebra, #f1f1f5);
}
body[data-page="index"] .ed-nota{ flex: 1 1 240px; font-size: .8rem; color: #4a4a52; }
body[data-page="index"] .ed-pie .btn{ min-height: 44px; }
@media print{ body[data-page="index"] .ed-caja{ display: none; } }

/* El destinatario, arriba del correo. Si falta se escribe ahí mismo: mandar a
   la persona al editor de arriba y hacerla volver es el desvío que hace que el
   dato nunca se cargue. */
body[data-page="index"] .cor-dest{
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--panel-linea); background: #fff;
}
body[data-page="index"] .cor-d-ok{ flex: 1 1 220px; font-size: .88rem; }
body[data-page="index"] .cor-d-ok a{ color: var(--naranjo-texto, #a63c00); font-weight: 700; }
body[data-page="index"] .cor-d-falta{
  flex: 1 1 200px; font-size: .84rem; color: var(--naranjo-texto, #a63c00); font-weight: 600;
}
body[data-page="index"] .cor-d-inp{
  flex: 1 1 220px; min-height: 42px; padding: 9px 12px; font: inherit;
  border: 1.5px solid var(--panel-linea); border-radius: 8px;
}
body[data-page="index"] .cor-d-inp:focus{
  outline: 2px solid var(--naranjo, #ff6a13); outline-offset: 1px; border-color: transparent;
}

/* --- El cursor pasa por detrás del detalle --------------------------------
   Carlitos: "la línea de tiempo que atraviesa toda la página debería quedar por
   detrás de la pestaña de resumen". La línea marca la hora sobre las BARRAS;
   cruzando el panel abierto no señala nada y solo estorba la lectura. */
body[data-page="index"] .fl-filas-cur{ z-index: 0; }
body[data-page="index"] .fl-det{ position: relative; z-index: 1; }
body[data-page="index"] .fr{ position: relative; z-index: 0; }

/* Los botones del detalle no caben en una línea y se salían de la tarjeta. */
body[data-page="index"] .fl-det-cab{
  flex-wrap: wrap; gap: 12px; align-items: flex-start;
}
body[data-page="index"] .fl-det-ir{ flex-wrap: wrap; max-width: 100%; }
body[data-page="index"] .fl-det{ overflow: hidden; }
body[data-page="index"] .fl-det-grid{ max-width: 100%; }

/* El correo del destinatario va PRIMERO y con su botón: es lo que se pega en el
   "Para:", y tener que seleccionarlo a mano con el mouse es justo la fricción
   que sobra cuando se mandan cuarenta correos seguidos. */
body[data-page="index"] .cor-d-lbl{ font-size: .82rem; font-weight: 800; color: #4a4a52; }
body[data-page="index"] .cor-d-mail{
  flex: 1 1 200px; padding: 8px 12px; border-radius: 8px;
  background: var(--planilla-cebra, #f1f1f5); border: 1px solid var(--panel-linea);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .86rem;
  word-break: break-all; user-select: all;
}

/* El correo se muestra CON formato, no como texto plano: las negritas existían
   y no se veían porque el panel pintaba el <pre>. Ahora se ve tal como le va a
   llegar al cliente, y el texto plano queda oculto solo para copiar donde no
   haya formato. */
body[data-page="index"] .cor-rico{ white-space: normal; }
body[data-page="index"] .cor-rico p{ margin: 0 0 8px; }
body[data-page="index"] .cor-rico ul{ margin: 0 0 8px; padding-left: 20px; }
body[data-page="index"] .cor-rico li{ margin-bottom: 3px; }
body[data-page="index"] .cor-rico b{ color: var(--negro, #0a0a0a); }
body[data-page="index"] .cor-rico blockquote{
  margin: 9px 0; padding: 9px 13px; border-left: 3px solid var(--naranjo, #ff6a13);
  background: var(--planilla-cebra, #f1f1f5); font-style: normal;
}
/* Ficha de tallaje editable */
.ftl-edit-input { border: 1px solid transparent; background: transparent; font: inherit; color: inherit; padding: 2px 4px; border-radius: 4px; width: 100%; min-width: 60px; }
.ftl-edit-input:focus { border-color: var(--sky, #87CEEB); background: #fff; outline: none; }
.ftl-edit-row:hover .ftl-edit-input { border-color: #e0e0e0; }
.ftl-del-btn { background: none; border: none; color: #c00; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.ftl-del-btn:hover { background: #fee; }
.ftl-add-btn { background: none; border: 1px dashed #ccc; color: var(--text2, #666); cursor: pointer; font: inherit; padding: 6px 14px; border-radius: 6px; margin-top: 6px; }
.ftl-add-btn:hover { border-color: var(--sky, #87CEEB); color: var(--sky, #87CEEB); }
.ftl-edit-toggle { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 6px; border: 1px solid #ddd; background: #f5f5f5; cursor: pointer; }
.ftl-edit-toggle:hover { background: #eaeaea; }
/* Faldon con talla distinta a chaqueta: marca discreta en el resumen */
.ftl-faldon-extra { display:inline-block; font-size:7pt; font-weight:700; color:#a63c00; background:#fff6ee; border:1px solid #ffd9bd; border-radius:3px; padding:0 3px; margin-left:4px; vertical-align:middle; }

/* Estilos para grupos de botones de documentos en la ficha */
.fp-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fp-doc-btn-group { display: inline-flex; align-items: center; gap: 4px; background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px 8px; }
.fp-doc-title { font-size: 11px; font-weight: 700; color: #475569; margin-right: 4px; }

/* Botones de acción principales de documentos */
body[data-page="index"] .fp-btn.fp-btn-main {
  font-weight: 600;
  background: var(--pri, #d97706);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
body[data-page="index"] .fp-btn.fp-btn-main:hover {
  filter: brightness(1.08);
}

/* --- Blindaje de contraste: ningún elemento con fondo oscuro puede tener texto negro --- */
body[data-page="index"] .flc-cab,
body[data-page="index"] .flc-cab .flc-hora,
body[data-page="index"] .flc-cab .flc-tit,
body[data-page="index"] .flc-cab .flc-tit b,
body[data-page="index"] .flc-cab .flc-tit span {
  color: #ffffff;
}
body[data-page="index"] .flc-cab .flc-hora {
  color: #fbbf24; /* Ámbar nítido para la hora */
}
body[data-page="index"] .flc-cab .flc-tit span {
  color: #e2e8f0;
}

/* ---- Ficha · "Que falta antes de entregar" (19-ago) -----------------------
   Reemplaza a .logistica-main, que repetia el reloj que ya esta en Datos
   principales. Aca solo va lo accionable. El color señala y nunca va solo:
   cada linea lleva barra naranja Y texto. */
.logistica-pendientes{
  margin-top: 11px;
  display: grid;
  gap: 8px;
}
.logistica-pendientes p{
  margin: 0;
  padding: 9px 12px 9px 13px;
  font-size: .74rem;
  line-height: 1.5;
  border-radius: 0 10px 10px 0;
  background: var(--panel-lienzo);
  border-left: 3px solid var(--linea, #d9d9e0);
}
.logistica-pendientes p.alerta{
  border-left-color: #ff6a13;
}
/* El dinero se marca distinto del tiempo: son dos urgencias que no se
   resuelven igual, y el hilo conductor dice que gana el tiempo. */
.logistica-pendientes p.alerta.money{
  border-left-color: #a63c00;
}
.logistica-pendientes p.dato{
  border-left-color: var(--linea, #d9d9e0);
  color: var(--text2);
}
.logistica-pendientes p b{ font-weight: 800; }

.logistica-ok{
  margin: 11px 0 0;
  padding: 10px 12px;
  font-size: .74rem;
  font-weight: 700;
  color: #1f6b3e;
  background: rgba(31, 107, 62, .07);
  border-radius: 10px;
}

/* Sin tallaje cargado no se dibuja el aside de tallas, asi que los datos
   ocupan el ancho completo en vez de dejar media pantalla en blanco. */
.ficha-duo--sola{
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Tallas: chaqueta y faldon, las dos prendas (19-ago) ------------------
   Mismo criterio que la ficha impresa: la celda donde las dos prendas no
   coinciden se marca, porque es la unica que hay que mirar dos veces. */
.ftl-desparejo-aviso{
  margin: 0 0 6px;
  font-size: .68rem;
  font-weight: 700;
  color: #a63c00;
}
.ftl-resumen-table td.ftl-difiere{
  font-weight: 800;
  background: rgba(255, 106, 19, .12);
}

/* ---- Orden de la lista de alumnos (19-ago) --------------------------------
   Dos vistas del mismo dato: como lo entrego el colegio -para comparar contra
   su papel- y alfabetico -para encontrar a una persona suelta-. El N° no cambia
   entre las dos: es la posicion en la ficha original. */
.ftl-orden{
  display: inline-flex;
  border: 1px solid var(--linea, #d9d9e0);
  border-radius: 8px;
  overflow: hidden;
}
.ftl-orden-b{
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  padding: 6px 11px;
  min-height: 32px;
  background: transparent;
  color: var(--text2);
}
.ftl-orden-b + .ftl-orden-b{ border-left: 1px solid var(--linea, #d9d9e0); }
.ftl-orden-b:hover{ background: rgba(0,0,0,.04); }
.ftl-orden-b.on{ background: #ff6a13; color: #0a0a0a; }

/* Empezar una ficha de cero, sin archivo que importar. */
.ftl-vacio-edit{ padding: 14px; }
.ftl-vacio-edit p{ margin: 0 0 10px; font-size: .78rem; color: var(--text2); }

/* Las notas, a lo ancho del editor. */
.ed-c--ancho{ grid-column: 1 / -1; }
.ed-c textarea{
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--linea, #d9d9e0);
  border-radius: 8px;
  resize: vertical;
  width: 100%;
}

/* En que se reparte lo recibido, debajo del campo que lo edita. Sin esto el
   numero del editor y el de la ficha parecen contradecirse. */
.ed-reparto{
  grid-column: 1 / -1;
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text2);
  background: var(--panel-lienzo);
  border-radius: 8px;
  padding: 9px 11px;
}
.ed-reparto b{ font-weight: 800; color: var(--text); }

/* El ofrecimiento de cargar una ficha que el chat acaba de leer. */
.chat-ficha-acc{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.chat-ficha-aviso{font-size:11px;color:var(--text2,#666)}

/* Flujo diario: horario vertical de una sola columna. */
body[data-page="index"] .fd-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:940px;margin:0 auto 14px}
body[data-page="index"] .fd-cabecera .h1{text-transform:capitalize}
body[data-page="index"] .fd-kpis{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
body[data-page="index"] .fd-kpis span{min-width:112px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text2);font-size:.72rem}
body[data-page="index"] .fd-kpis b{display:block;color:var(--text);font-size:1.05rem}
body[data-page="index"] .fd-kpis .fd-kpi-alerta{border-color:color-mix(in srgb,var(--warn) 52%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--card))}
body[data-page="index"] .fd-kpis .fd-kpi-alerta b{color:#8a4b00}
body[data-page="index"] .fd-navegacion{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;max-width:940px;margin:0 auto;padding:8px;border:1px solid var(--line);border-radius:15px;background:var(--card)}
body[data-page="index"] .fd-navegacion>button{width:44px;height:44px;border:1px solid var(--line2);border-radius:11px;background:var(--soft);color:var(--text);font:900 1.1rem/1 inherit;cursor:pointer}
body[data-page="index"] .fd-navegacion>button:disabled{opacity:.35;cursor:default}
body[data-page="index"] .fd-dias{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:2px}
body[data-page="index"] .fd-dias button{flex:0 0 auto;min-height:40px;padding:7px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text2);font:800 .74rem/1 inherit;text-transform:capitalize;cursor:pointer}
body[data-page="index"] .fd-dias button.on{background:var(--naranja-soft);border-color:color-mix(in srgb,var(--naranja) 35%,var(--line));color:var(--naranja-ink)}
/* Filtrar por movimiento -Carlitos, 04-sep: «hoy solo me queda imprimir las
   entregas de hoy»-. Mismo trato visual que los días (`.fd-dias button`):
   es el mismo gesto -tocar para fijar un filtro-, así que se ve igual. */
body[data-page="index"] .fd-filtro{display:flex;gap:6px;max-width:940px;margin:10px auto 0}
body[data-page="index"] .fd-filtro button{flex:0 0 auto;min-height:36px;padding:6px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--text2);font:800 .74rem/1 inherit;cursor:pointer}
body[data-page="index"] .fd-filtro button.on{background:var(--naranja-soft);border-color:color-mix(in srgb,var(--naranja) 35%,var(--line));color:var(--naranja-ink)}
body[data-page="index"] .fd-leyenda{display:flex;gap:8px;max-width:850px;margin:14px auto 4px;padding-left:88px;font-size:.72rem;font-weight:750}
/* Misma pareja de colores que las etiquetas de cada fila -mostaza/verde-,
   para que la leyenda diga la verdad de lo que hay abajo. */
body[data-page="index"] .fd-leyenda span{padding:2px 9px;border-radius:999px;color:#0a0a0a}
body[data-page="index"] .fd-leyenda .retiro{background:#e3b23c}
body[data-page="index"] .fd-leyenda .devolucion{background:#7cb342}
body[data-page="index"] .fd-horario{position:relative;max-width:850px;margin:0 auto 24px;padding:10px 0 22px}
body[data-page="index"] .fd-hora{display:grid;grid-template-columns:64px 24px minmax(0,1fr);align-items:start;min-height:78px}
body[data-page="index"] .fd-hora>time{padding:14px 10px 0 0;color:var(--text2);font:800 .82rem/1 var(--font,inherit);text-align:right}
body[data-page="index"] .fd-nodo{position:relative;align-self:stretch;display:flex;justify-content:center}
body[data-page="index"] .fd-nodo::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--line2)}
body[data-page="index"] .fd-hora:first-child .fd-nodo::before{top:18px}
body[data-page="index"] .fd-hora:last-child .fd-nodo::before{bottom:calc(100% - 20px)}
body[data-page="index"] .fd-nodo>span{position:relative;z-index:1;width:12px;height:12px;margin-top:17px;border:3px solid var(--card);border-radius:50%;background:var(--naranja);box-shadow:0 0 0 1px var(--line2)}
body[data-page="index"] .fd-eventos{display:grid;gap:8px;padding:5px 0 15px 12px}
body[data-page="index"] .fd-bloque{border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 4px 14px color-mix(in srgb,var(--panel-chrome-alt) 5%,transparent);overflow:hidden}
body[data-page="index"] .fd-bloque.abierto{border-color:color-mix(in srgb,var(--naranja) 42%,var(--line));box-shadow:0 10px 24px color-mix(in srgb,var(--panel-chrome-alt) 9%,transparent)}
body[data-page="index"] .fd-bloque.revisar{border-left:4px solid var(--warn)}
body[data-page="index"] .fd-bloque-resumen{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;align-items:center;gap:10px;width:100%;min-height:68px;padding:10px 14px;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}
body[data-page="index"] .fd-bloque-resumen:hover{background:var(--soft)}
body[data-page="index"] .fd-alerta-chip{justify-self:end;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--warn) 16%,var(--card));color:#7a4300;font-size:.66rem;font-weight:850;white-space:nowrap}
body[data-page="index"] .fd-bloque.abierto .fd-chevron{transform:rotate(180deg)}
body[data-page="index"] .fd-bloque-detalle{padding:14px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--soft) 55%,var(--card))}
body[data-page="index"] .fd-bloque-detalle[hidden]{display:none}
body[data-page="index"] .fd-alerta{margin-bottom:10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--warn) 50%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--warn) 10%,var(--card));color:#6d420d;font-size:.76rem;line-height:1.45}
body[data-page="index"] .fd-alerta.critica{border-color:color-mix(in srgb,var(--red) 48%,var(--line));background:color-mix(in srgb,var(--red) 7%,var(--card));color:var(--red)}
body[data-page="index"] .fd-equipo,body[data-page="index"] .fd-colegios{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
body[data-page="index"] .fd-seccion-titulo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
body[data-page="index"] .fd-seccion-titulo h4{margin:0;font-size:.84rem}
body[data-page="index"] .fd-seccion-titulo span{color:var(--text3);font-size:.68rem;font-weight:750}
body[data-page="index"] .fd-equipo-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
body[data-page="index"] .fd-equipo-lista>div{padding:9px 10px;border-radius:9px;background:var(--soft)}
body[data-page="index"] .fd-equipo-lista :is(b,span){display:block}
body[data-page="index"] .fd-equipo-lista b{font-size:.77rem}
body[data-page="index"] .fd-equipo-lista span{margin-top:2px;color:var(--text2);font-size:.65rem;text-transform:capitalize}
body[data-page="index"] .fd-equipo-vacio{margin:0;color:var(--red);font-size:.75rem;font-weight:750}
body[data-page="index"] .fd-colegios{display:grid;gap:8px}
body[data-page="index"] .fd-colegios .fd-seccion-titulo{margin-bottom:1px}
body[data-page="index"] .fd-colegio{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
body[data-page="index"] .fd-colegio-copy{min-width:0}
body[data-page="index"] .fd-colegio-copy :is(.fd-tipo,strong,small,p){display:block}
body[data-page="index"] .fd-colegio-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
body[data-page="index"] .fd-colegio-copy small{margin-top:2px;color:var(--text2);font-size:.67rem}
body[data-page="index"] .fd-colegio-copy p{margin:3px 0 0;color:var(--text3);font-size:.65rem}
body[data-page="index"] .fd-colegio-acciones{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
body[data-page="index"] .fd-turnos-link{display:flex;justify-content:flex-end;padding-top:10px}
body[data-page="index"] .fd-evento{border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 4px 14px color-mix(in srgb,var(--panel-chrome-alt) 5%,transparent);overflow:hidden}
body[data-page="index"] .fd-evento.abierto{border-color:color-mix(in srgb,var(--naranja) 42%,var(--line));box-shadow:0 10px 24px color-mix(in srgb,var(--panel-chrome-alt) 9%,transparent)}
body[data-page="index"] .fd-resumen{display:grid;grid-template-columns:34px minmax(0,1fr) 30px;align-items:center;gap:10px;width:100%;min-height:64px;padding:9px 12px;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}
body[data-page="index"] .fd-resumen:hover{background:var(--soft)}
body[data-page="index"] .fd-punto{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--soft);font-weight:900}
body[data-page="index"] .fd-retiro .fd-punto{background:#e5f4f9;color:#1d6f8e}
body[data-page="index"] .fd-presentacion .fd-punto{background:var(--naranja-soft);color:var(--naranja-ink)}
body[data-page="index"] .fd-devolucion .fd-punto{background:#eef2df;color:#5f692e}
body[data-page="index"] .fd-resumen-copy{min-width:0}
body[data-page="index"] .fd-resumen-copy :is(.fd-tipo,strong,small){display:block}
body[data-page="index"] .fd-tipo{margin-bottom:2px;color:var(--text3);font-size:.66rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
/* Carlitos, 04-sep: «pinta el botón, porque si me pones el color pequeño
   entre tanta info se me pierde». El color de retiro/devolución vivía solo
   en el círculo de 32px de la izquierda -fácil de pasar por alto en una
   lista larga-. Acá el rótulo de cada fila ("Retiro"/"Devolución") se pinta
   entero, como una etiqueta sólida: amarillo mostaza para lo que se retira,
   verde para lo que se devuelve. El texto queda en negro -no en el color-,
   para que siga leyéndose igual de nítido que el resto de la ficha. */
body[data-page="index"] .fd-colegio-copy .fd-tipo,
body[data-page="index"] .fd-resumen-copy .fd-tipo{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  color:#0a0a0a;
  background:var(--soft);
  font-size:.66rem;
}
body[data-page="index"] .fd-retiro .fd-colegio-copy .fd-tipo{background:#e3b23c}
body[data-page="index"] .fd-devolucion .fd-colegio-copy .fd-tipo{background:#7cb342}
/* Carlitos, 04-sep: «pon el color de retiro o devolución en el título». El
   título de cada bloque de hora (`.fd-bloque-resumen`) quedó sin el mismo
   trato que la fila de colegio de abajo -mostaza/verde solo cuando el
   bloque es de un solo tipo; si a esa hora coinciden retiro Y devolución,
   ningún color solo diría la verdad, así que queda neutro. */
body[data-page="index"] .fd-bloque.fd-retiro .fd-resumen-copy .fd-tipo{background:#e3b23c}
body[data-page="index"] .fd-bloque.fd-devolucion .fd-resumen-copy .fd-tipo{background:#7cb342}
body[data-page="index"] .fd-resumen-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
body[data-page="index"] .fd-resumen-copy small{margin-top:3px;color:var(--text2);font-size:.74rem}
body[data-page="index"] .fd-chevron{justify-self:end;color:var(--text3);font-size:1.25rem;transition:transform .18s ease}
body[data-page="index"] .fd-evento.abierto .fd-chevron{transform:rotate(180deg)}
body[data-page="index"] .fd-detalle{padding:0 14px 14px 56px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--soft) 58%,var(--card))}
body[data-page="index"] .fd-detalle[hidden]{display:none}
body[data-page="index"] .fd-detalle dl{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:0}
body[data-page="index"] .fd-detalle dl>div{padding:11px 0;border-bottom:1px solid var(--line)}
body[data-page="index"] .fd-detalle dt{color:var(--text3);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
body[data-page="index"] .fd-detalle dd{margin:3px 0 0;color:var(--text);font-size:.8rem;font-weight:700;line-height:1.4}
body[data-page="index"] .fd-acciones{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px}
body[data-page="index"] .fd-sin-hora>time{font-size:.68rem;color:var(--red)}
body[data-page="index"] .fd-sin-hora .fd-nodo>span{background:var(--red)}
body[data-page="index"] .fd-vacio{max-width:850px;margin:18px auto;padding:28px;border:1px dashed var(--line2);border-radius:14px;background:var(--soft);color:var(--text2);text-align:center}

/* Alta guiada: responsable -> arriendo -> confirmacion. */
body[data-page="index"] .alta-overlay{z-index:95}
body[data-page="index"] .alta-modal{max-width:720px;padding:0;overflow:hidden;color:var(--text)}
body[data-page="index"] .alta-modal [hidden]{display:none}
body[data-page="index"] .alta-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 14px}
body[data-page="index"] .alta-head h3{margin:3px 0 0;color:var(--text)}
body[data-page="index"] .alta-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line2);border-radius:12px;background:var(--soft);color:var(--text);font:800 1rem/1 inherit;cursor:pointer}
body[data-page="index"] .alta-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0 26px 18px;list-style:none;border-bottom:1px solid var(--line)}
body[data-page="index"] .alta-progress li{display:flex;align-items:center;gap:7px;color:var(--text3);font-size:.78rem;font-weight:800}
body[data-page="index"] .alta-progress li span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);border:1px solid var(--line2);color:var(--text2)}
body[data-page="index"] .alta-progress li[aria-current="step"]{color:var(--naranja-ink)}
body[data-page="index"] .alta-progress li[aria-current="step"] span{background:var(--naranja);border-color:var(--naranja);color:var(--panel-chrome-t1)}
body[data-page="index"] .alta-progress li.done span{background:var(--ok);border-color:var(--ok);color:white}
body[data-page="index"] #altaForm{max-height:calc(90vh - 118px);overflow:auto}
body[data-page="index"] .alta-step{padding:22px 26px 8px}
body[data-page="index"] .alta-step[hidden]{display:none}
body[data-page="index"] .alta-step h4{margin:0;color:var(--text);font-size:1.06rem;line-height:1.25;outline:none}
body[data-page="index"] .alta-help{margin:6px 0 18px;color:var(--text2);font-size:.86rem;line-height:1.5}
body[data-page="index"] .alta-choice{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;border:0}
body[data-page="index"] .alta-choice legend{width:100%;margin:0 0 5px;color:var(--text2);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
body[data-page="index"] .alta-choice label{display:flex;align-items:center;gap:8px;min-height:44px;padding:7px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--soft);color:var(--text);font-size:.84rem;font-weight:750;cursor:pointer}
body[data-page="index"] .alta-choice input{width:18px;height:18px;accent-color:var(--naranja)}
body[data-page="index"] :is(#altaClienteExistente,#altaColegioExistente)>label,
body[data-page="index"] .alta-fields label{display:block;margin:0 0 5px;color:var(--text2);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
body[data-page="index"] :is(#altaClienteExistente,#altaColegioExistente)>select,
body[data-page="index"] .alta-fields :is(input,select){width:100%;height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:11px;background:var(--soft);color:var(--text);font:inherit;outline:none}
body[data-page="index"] :is(#altaClienteExistente,#altaColegioExistente)>select:focus,
body[data-page="index"] .alta-fields :is(input,select):focus{border-color:var(--naranja);box-shadow:0 0 0 3px color-mix(in srgb,var(--syt-coral-vivo) 12%,transparent)}
body[data-page="index"] .alta-fields{margin-top:14px}
body[data-page="index"] .alta-arriendo-fields{padding-top:16px;border-top:1px solid var(--line)}
body[data-page="index"] .optional{font-size:.68rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text3)}
body[data-page="index"] .alta-field-error{margin:5px 0 0;color:var(--red);font-size:.76rem;font-weight:700;line-height:1.35}
body[data-page="index"] .alta-fields [aria-invalid="true"],body[data-page="index"] #altaForm select[aria-invalid="true"]{border-color:var(--red)}
body[data-page="index"] .alta-alert{margin:14px 0 0;padding:12px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--warn) 9%,var(--card));font-size:.82rem;line-height:1.45}
body[data-page="index"] .alta-alert p{margin:0 0 9px}
body[data-page="index"] .alta-alert div{display:flex;flex-wrap:wrap;gap:8px}
body[data-page="index"] .alta-review{display:grid;gap:0;margin:18px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
body[data-page="index"] .alta-review>div{display:grid;grid-template-columns:145px 1fr;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line)}
body[data-page="index"] .alta-review>div:last-child{border-bottom:0}
body[data-page="index"] .alta-review dt{color:var(--text2);font-size:.76rem;font-weight:800}
body[data-page="index"] .alta-review dd{margin:0;font-size:.86rem;font-weight:750;line-height:1.4}
body[data-page="index"] .alta-money{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;border-radius:14px;background:var(--soft)}
body[data-page="index"] .alta-money>div{padding:10px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
body[data-page="index"] .alta-money span,body[data-page="index"] .alta-money strong{display:block}
body[data-page="index"] .alta-money span{color:var(--text2);font-size:.72rem;font-weight:750}
body[data-page="index"] .alta-money strong{margin-top:4px;font-size:1.05rem}
body[data-page="index"] .alta-money .alta-money-main{grid-column:1/-1;border-color:color-mix(in srgb,var(--naranja) 50%,var(--line));background:var(--naranja-soft)}
body[data-page="index"] .alta-money .alta-money-main strong{color:var(--naranja-ink);font-size:1.25rem}
body[data-page="index"] .alta-money p{grid-column:1/-1;margin:2px 2px 0;color:var(--text2);font-size:.76rem;line-height:1.4}
body[data-page="index"] .alta-status{min-height:20px;margin:8px 26px 0;color:var(--red);font-size:.8rem;font-weight:700;line-height:1.4}
body[data-page="index"] .alta-status:empty{min-height:0}
body[data-page="index"] .alta-status p{margin:0 0 8px}
body[data-page="index"] .alta-status .btn{margin:0 8px 8px 0}
body[data-page="index"] .alta-foot{position:sticky;bottom:0;margin:0;padding:16px 26px 22px;background:linear-gradient(transparent 0,var(--card) 18px);z-index:2}

/* Ficha simple: una sola columna de secciones nativas y desplegables. */
body[data-page="index"] .mobile-session-exit{display:none}
body[data-page="index"] details.ficha-disclosure{
  margin:10px 0;border:1px solid var(--panel-linea);border-radius:14px;background:var(--blanco);
  box-shadow:0 5px 18px -16px color-mix(in srgb,var(--negro) 55%,transparent);overflow:hidden;
}
body[data-page="index"] details.ficha-disclosure > summary{
  min-height:58px;display:flex;align-items:center;gap:12px;padding:0 16px;cursor:pointer;
  color:var(--panel-tinta-1);font-weight:850;line-height:1.3;list-style:none;
}
body[data-page="index"] details.ficha-disclosure > summary::-webkit-details-marker{display:none}
body[data-page="index"] details.ficha-disclosure > summary::after{
  content:"Abrir";margin-inline-start:auto;color:var(--naranjo-texto);font-size:.72rem;font-weight:850;
}
body[data-page="index"] details.ficha-disclosure[open] > summary{border-bottom:1px solid var(--panel-linea)}
body[data-page="index"] details.ficha-disclosure[open] > summary::after{content:"Cerrar"}
body[data-page="index"] .ficha-disclosure-body{padding:10px}
body[data-page="index"] .ficha-disclosure :is(.box,.ficha-tallaje-full){margin:0;border:0;box-shadow:none}
body[data-page="index"] .ficha-disclosure .ficha-tallaje-full{padding:0;overflow:hidden}
body[data-page="index"] .ficha-disclosure .ftl-tbl-wrap{max-inline-size:100%;overflow-x:auto}
body[data-page="index"] .ficha-disclosure .ftl-head-actions{flex-wrap:wrap}
body[data-page="index"] :is(.ed-caja,.cor-caja).ficha-disclosure{margin:10px 0}

/* El acordeon «Más» de la ficha: correo, que falta, ficha online, horario,
   prendas de prueba y editor. Cerrado por defecto — existe cuando se busca,
   pero no compite con datos, plata y tallaje (Carlitos 28-ago). */
body[data-page="index"] details.ficha-extra{
  margin:10px 0;border:1px solid var(--panel-linea);border-radius:14px;background:var(--blanco);
  box-shadow:0 5px 18px -16px color-mix(in srgb,var(--negro) 55%,transparent);overflow:hidden;
}
body[data-page="index"] details.ficha-extra > summary{
  min-height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;cursor:pointer;
  color:var(--panel-tinta-3);font-weight:700;font-size:.9rem;line-height:1.3;list-style:none;
}
body[data-page="index"] details.ficha-extra > summary::-webkit-details-marker{display:none}
body[data-page="index"] details.ficha-extra > summary .fp-docseta{
  margin-inline-start:auto;font-size:.8rem;color:var(--naranjo-texto);transition:transform .15s ease;
}
body[data-page="index"] details.ficha-extra[open] > summary{
  border-bottom:1px solid var(--panel-linea);color:var(--panel-tinta-1);
}
body[data-page="index"] details.ficha-extra[open] > summary .fp-docseta{transform:rotate(180deg)}
body[data-page="index"] .ficha-extra-body{padding:10px}

/* La nota del Morado en Trajes: el color existe, su stock se carga despues.
   Los ceros de morado son «pendiente», no faltante. */
body[data-page="index"] .inv-nota-morado{
  margin:8px 0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--traje-morado) 35%,transparent);
  border-radius:12px;background:var(--traje-morado-lienzo);color:var(--panel-tinta-2);font-size:.85rem;
}

/* ===========================================================================
   PANEL MÓVIL · 390 px primero
   ---------------------------------------------------------------------------
   Esta capa se limita al teléfono. El escritorio conserva su composición y
   sus tablas; aquí la misma información se agrupa en tarjetas y detalles.
   =========================================================================== */
@media (max-width:640px){
  html, body{max-inline-size:100%;overflow-x:clip}
  body[data-page="index"]{padding-bottom:0}
  body[data-page="index"] .top{
    block-size:56px;min-block-size:56px;height:56px;padding:0 14px;
    align-items:center;flex-wrap:nowrap;gap:8px;overflow:hidden;
  }
  body[data-page="index"] .top h2{
    width:auto;min-width:0;margin:0;font-size:1rem;line-height:1.1;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  body[data-page="index"] .top :is(.ops-pill,.search,.right){display:none}
  body[data-page="index"] .mobile-session-exit{
    display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:44px;margin-inline-start:auto;
    border:1px solid color-mix(in srgb,var(--blanco) 34%,transparent);border-radius:10px;background:transparent;
    color:var(--blanco);font:inherit;font-size:.7rem;font-weight:800;line-height:1;
  }
  body[data-page="index"] .ed-c input{font-size:16px}
  body[data-page="index"] .ed-par input{min-width:0;width:100%}
  body[data-page="index"] .content{
    min-inline-size:0;padding:12px 12px calc(104px + env(safe-area-inset-bottom));
  }
  body[data-page="index"] :is(.view,.main,.fgrid,.ficha-overview){min-inline-size:0}
  body[data-page="index"] :is(.vh,.v2-intro) .sub{display:none}
  body[data-page="index"] .mobile-nav{
    left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));
    grid-template-columns:repeat(5,minmax(0,1fr));padding:5px;gap:2px;border-radius:16px;
  }
  body[data-page="index"] .mobile-nav :is(a,.mn-more){
    min-width:0;min-height:52px;padding:4px 1px;border:0;background:transparent;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:var(--text2);font:800 .56rem/1.05 var(--font,inherit);text-transform:none;letter-spacing:0;
  }
  body[data-page="index"] .mobile-nav .mn-more .mn-i{font-size:1.25rem;line-height:1}
  body[data-page="index"] [id="chatFab"]{
    width:48px;height:48px;min-width:48px;min-height:48px;
    right:16px;bottom:calc(84px + env(safe-area-inset-bottom));font-size:1.2rem;
  }
  body[data-page="index"] #chatWin{right:12px;bottom:calc(140px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}
  body[data-page="index"] .fd-cabecera{display:block;margin-bottom:10px}
  body[data-page="index"] .fd-kpis{justify-content:flex-start;margin-top:10px}
  body[data-page="index"] .fd-kpis span{min-width:0;flex:1}
  body[data-page="index"] .fd-navegacion{grid-template-columns:44px minmax(0,1fr) 44px;padding:6px;gap:8px}
  body[data-page="index"] .fd-navegacion>button{width:44px;height:44px}
  body[data-page="index"] .fd-dias button{min-height:40px;padding-inline:10px}
  body[data-page="index"] .fd-leyenda{gap:10px;margin-top:10px;padding-left:0;font-size:.64rem}
  body[data-page="index"] .fd-horario{padding-top:4px}
  body[data-page="index"] .fd-hora{grid-template-columns:48px 18px minmax(0,1fr);min-height:74px}
  body[data-page="index"] .fd-hora>time{padding-right:6px;font-size:.75rem}
  body[data-page="index"] .fd-eventos{padding-left:7px}
  body[data-page="index"] .fd-resumen{grid-template-columns:30px minmax(0,1fr) 24px;gap:8px;min-height:62px;padding:8px}
  body[data-page="index"] .fd-bloque-resumen{grid-template-columns:minmax(0,1fr) 24px;min-height:64px;padding:9px 10px}
  body[data-page="index"] .fd-alerta-chip{grid-column:1/-1;grid-row:2;justify-self:start;margin-top:-4px}
  body[data-page="index"] .fd-bloque-detalle{padding:9px}
  body[data-page="index"] .fd-equipo,body[data-page="index"] .fd-colegios{padding:9px}
  body[data-page="index"] .fd-equipo-lista{grid-template-columns:1fr}
  body[data-page="index"] .fd-colegio{grid-template-columns:30px minmax(0,1fr)}
  body[data-page="index"] .fd-colegio-acciones{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  body[data-page="index"] .fd-colegio-acciones .btn{justify-content:center}
  body[data-page="index"] .fd-turnos-link .btn{width:100%;justify-content:center}
  body[data-page="index"] .fd-punto{width:30px;height:30px}
  body[data-page="index"] .fd-resumen-copy strong{font-size:.84rem}
  body[data-page="index"] .fd-resumen-copy small{font-size:.75rem}
  body[data-page="index"] .fd-detalle{padding:0 10px 12px}
  body[data-page="index"] .fd-detalle dl{grid-template-columns:1fr}
  body[data-page="index"] .fd-detalle dl>div{padding:9px 0}
  body[data-page="index"] .fd-acciones .btn{flex:1;justify-content:center}
  body[data-page="index"] .alta-overlay{align-items:flex-end;padding:0}
  body[data-page="index"] .alta-modal{max-height:calc(100dvh - env(safe-area-inset-top));border-radius:22px 22px 0 0}
  body[data-page="index"] .alta-head{padding:18px 16px 10px}
  body[data-page="index"] .alta-progress{padding:0 16px 14px;gap:4px}
  body[data-page="index"] .alta-progress li{font-size:.64rem;gap:4px}
  body[data-page="index"] .alta-progress li span{width:25px;height:25px}
  body[data-page="index"] #altaForm{max-height:calc(100dvh - 105px - env(safe-area-inset-top))}
  body[data-page="index"] .alta-step{padding:18px 16px 6px}
  body[data-page="index"] .alta-choice{display:grid;grid-template-columns:1fr 1fr}
  body[data-page="index"] .alta-choice label{padding:6px 9px;font-size:.76rem}
  body[data-page="index"] .alta-review>div{grid-template-columns:1fr;gap:3px}
  body[data-page="index"] .alta-money{grid-template-columns:1fr}
  body[data-page="index"] .alta-money .alta-money-main,body[data-page="index"] .alta-money p{grid-column:1}
  body[data-page="index"] .alta-status{margin-inline:16px}
  body[data-page="index"] .alta-foot{display:grid;grid-template-columns:1fr 1fr;padding:15px 16px calc(16px + env(safe-area-inset-bottom))}
  body[data-page="index"] .alta-foot .btn{width:100%;justify-content:center}
  body[data-page="index"] .alta-entry{width:100%;justify-content:center}
  body[data-page="index"] .mn-sheet-panel{padding:18px 14px calc(14px + env(safe-area-inset-bottom))}
  body[data-page="index"] .mn-session{display:flex;align-items:center;gap:10px;margin:8px 0 2px;padding:12px;border-top:1px solid color-mix(in srgb,var(--blanco) 22%,transparent)}
  body[data-page="index"] .mn-session-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--naranjo);color:var(--negro);font-weight:900}
  body[data-page="index"] .mn-session b,body[data-page="index"] .mn-session small{display:block;color:var(--blanco)}
  body[data-page="index"] .mn-session small{margin-top:2px;color:var(--panel-chrome-t3)}
  body[data-page="index"] .mn-session-exit{width:100%;min-height:44px;border:1px solid color-mix(in srgb,var(--blanco) 36%,transparent);border-radius:10px;background:transparent;color:var(--blanco);font:800 .75rem/1 inherit}

  body[data-page="index"] :is(button,input,select,textarea,summary){min-height:44px}
  body[data-page="index"] :is(input,select,textarea){font-size:16px}
  body[data-page="index"] :is(.rent-dias,.tur-calor-dias,.tur-mobile-days,.inv-mobile-tabs,.inv-tabs,.fp-acciones){
    max-inline-size:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
  }
  body[data-page="index"] .fp-acciones{display:flex;flex-wrap:nowrap;gap:8px;padding-bottom:4px}
  body[data-page="index"] .fp-doc-btn-group{flex:0 0 auto}
  body[data-page="index"] .fp-acciones .fp-btn{white-space:nowrap}

  /* Ficha: las secciones largas recuerdan su estado y conservan una sola columna. */
  body[data-page="index"] details.ficha-disclosure > summary{min-height:52px;padding:0 14px}
  body[data-page="index"] .ficha-disclosure-body{padding:0 10px 10px}
  body[data-page="index"] .ficha-overview{display:none}

  /* Listas de arriendos y clientes: una tarjeta de aproximadamente 90 px. */
  body[data-page="index"] .mobile-list-search{position:sticky;top:0;z-index:12;padding:5px 0 9px;background:var(--blanco)}
  body[data-page="index"] .mobile-list-search input{width:100%;padding:0 13px;border:1px solid var(--panel-linea);border-radius:11px;background:var(--blanco)}
  body[data-page="index"] .mobile-filter{margin:0 0 10px;border:1px solid var(--panel-linea);border-radius:12px;background:var(--blanco)}
  body[data-page="index"] .mobile-filter summary{display:flex;align-items:center;padding:0 13px;font-weight:800;cursor:pointer}
  body[data-page="index"] .mobile-filter-body{display:grid;grid-template-columns:1fr;gap:8px;padding:0 12px 12px}
  body[data-page="index"] .mobile-filter label{display:grid;gap:4px;font-size:.75rem;font-weight:800;color:var(--text2)}
  body[data-page="index"] .mobile-filter select{width:100%;min-height:46px;padding:0 10px;border:1px solid var(--panel-linea);border-radius:9px;background:var(--blanco);color:var(--text)}
  body[data-page="index"] .mobile-list-count{margin:8px 2px 10px;font-size:.73rem;color:var(--text2);font-weight:700}
  body[data-page="index"] :is(.mobile-rent-list,.mobile-client-list,.tur-mobile-list,.mobile-finance-list){display:grid;gap:8px}
  body[data-page="index"] .mobile-rent-card,body[data-page="index"] .mobile-client-card{
    width:100%;min-height:90px;padding:10px 12px;border:1px solid var(--panel-linea);border-radius:13px;background:var(--blanco);color:var(--text);text-align:left;
  }
  body[data-page="index"] .content :is(.mobile-rent-card,.mobile-client-card){display:grid;grid-template-columns:minmax(0,1fr);align-content:start;row-gap:2px}
  body[data-page="index"] :is(.mobile-rent-card,.mobile-client-card) > *{min-width:0}
  body[data-page="index"] :is(.mobile-rent-card,.mobile-client-card) strong{display:block;margin:2px 0;font-size:.87rem;line-height:1.18}
  body[data-page="index"] .mobile-rent-number,body[data-page="index"] .mobile-client-card > span{display:block;font-size:.65rem;font-weight:850;color:var(--text2)}
  body[data-page="index"] .mobile-rent-meta,body[data-page="index"] .mobile-client-card p{display:block;margin:0;color:var(--text2);font-size:.71rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body[data-page="index"] .mobile-rent-data{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:.75rem;font-weight:750}
  body[data-page="index"] :is(.mobile-rent-card,.mobile-client-card) footer{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:.68rem;line-height:1.2}
  body[data-page="index"] .mobile-balance.due,body[data-page="index"] .mobile-client-card .due{color:var(--naranjo-texto);font-weight:900}
  body[data-page="index"] .mobile-balance.ok,body[data-page="index"] .mobile-client-card .ok{color:var(--ok-texto);font-weight:850}
  body[data-page="index"] .mobile-ready{font-weight:800}.mobile-ready.pending{color:var(--naranjo-texto)}.mobile-ready.ok{color:var(--ok-texto)}
  body[data-page="index"] .mobile-more{width:100%;margin:10px 0;min-height:48px;border:1px solid var(--panel-linea);border-radius:12px;background:var(--blanco);font-weight:850;color:var(--panel-tinta-1)}

  /* Inventario: tarjetas por prenda y chips de talla editables, sin tabla ancha. */
  body[data-page="index"] .inv-mobile-tabs,body[data-page="index"] .tur-mobile-days{display:flex;gap:7px;padding:3px 0 8px;white-space:nowrap}
  body[data-page="index"] :is(.inv-mobile-tabs,.tur-mobile-days) button{flex:0 0 auto;min-height:44px;padding:0 12px;border:1px solid var(--panel-linea);border-radius:999px;background:var(--blanco);font-weight:800;color:var(--text2)}
  body[data-page="index"] :is(.inv-mobile-tabs,.tur-mobile-days) button.active{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
  body[data-page="index"] .inv-mobile-note{margin:0 0 10px;font-size:.72rem;color:var(--text2)}
  body[data-page="index"] .inv-mobile-color{margin:12px 0;padding:11px;border:1px solid var(--panel-linea);border-radius:15px;background:var(--blanco)}
  body[data-page="index"] .inv-mobile-color > h2{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:.9rem}
  body[data-page="index"] .inv-mobile-color > h2 i{width:12px;height:12px;border-radius:50%}
  body[data-page="index"] .inv-mobile-block{margin:8px 0;padding:10px;border:1px solid var(--panel-linea);border-radius:11px}
  body[data-page="index"] .inv-mobile-block header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:start}
  body[data-page="index"] .inv-mobile-icon{font-size:1.1rem}.inv-mobile-block h3{margin:0;font-size:.8rem}.inv-mobile-block p{margin:3px 0 0;font-size:.64rem;color:var(--text2);line-height:1.25}
  body[data-page="index"] .inv-mobile-sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  body[data-page="index"] .inv-mobile-size{display:flex;align-items:center;gap:4px;min-height:44px;padding:3px 6px;border:1px solid var(--panel-linea);border-radius:8px;background:var(--panel-lienzo);font-size:.68rem;font-weight:850}
  body[data-page="index"] .inv-mobile-size input{width:46px;min-width:46px;min-height:46px;padding:0;border:0;background:transparent;text-align:center;font-weight:900;color:var(--panel-tinta-1)}
  body[data-page="index"] .inv-mobile-size.inv-zero{color:var(--text2)}

  /* Finanzas y turnos: una sola acción dominante por tarjeta. */
  body[data-page="index"] .mobile-finance-total{display:grid;gap:2px;margin:10px 0;padding:14px;border-left:4px solid var(--naranjo);border-radius:12px;background:var(--blanco);box-shadow:0 1px 2px color-mix(in srgb,var(--negro) 8%,transparent)}
  body[data-page="index"] .mobile-finance-total span,body[data-page="index"] .mobile-finance-total small{color:var(--text2);font-size:.75rem;font-weight:700}
  body[data-page="index"] .mobile-finance-total strong{font-size:1.35rem;color:var(--naranjo-texto)}
  body[data-page="index"] .mobile-finance-card{padding:12px;border:1px solid var(--panel-linea);border-radius:13px;background:var(--blanco)}
  body[data-page="index"] .mobile-finance-card > span{font-size:.75rem;color:var(--text2)}.mobile-finance-card h3{margin:4px 0;font-size:.86rem}.mobile-finance-card > strong{display:block;margin:8px 0 10px;font-size:1.05rem;color:var(--naranjo-texto)}
  body[data-page="index"] .mobile-finance-card button{width:100%;min-height:46px;border:0;border-radius:10px;background:var(--naranjo);color:var(--negro);font:900 .78rem/1 inherit}
  body[data-page="index"] .tur-mobile-card{width:100%;min-height:94px;padding:10px 12px;border:1px solid var(--panel-linea);border-left:4px solid var(--panel-linea);border-radius:12px;background:var(--blanco);color:var(--text);text-align:left}
  body[data-page="index"] .content .tur-mobile-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:2px 8px}
  body[data-page="index"] .tur-mobile-card.entrega{border-left-color:var(--naranjo)}.tur-mobile-card.devolucion{border-left-color:var(--ok-texto)}.tur-mobile-card.critico{border-left-color:var(--error-relleno)}
  body[data-page="index"] .tur-mobile-time{grid-column:1;font-weight:900;font-size:.8rem}.tur-mobile-type{float:none;grid-column:2;font-size:.63rem;font-weight:900;color:var(--text2)}
  body[data-page="index"] .tur-mobile-card strong,body[data-page="index"] .tur-mobile-card > span:not(.tur-mobile-time):not(.tur-mobile-type){display:block;grid-column:1 / -1;margin-top:3px}.tur-mobile-card > span{font-size:.75rem;color:var(--text2)}
  body[data-page="index"] .tur-mobile-card footer{display:flex;grid-column:1 / -1;justify-content:space-between;gap:8px;margin-top:6px;font-size:.75rem;font-weight:750}
  body[data-page="index"] .tur-mobile-balance{color:var(--naranjo-texto)}
}

/* Marca los campos que el colegio a veces todavia no ha dado. Sin esto el
   formulario se lee como si todo fuera obligatorio, y la hora de presentacion
   llega despues: varios colegios la confirman semanas mas tarde. */
body[data-page="index"] .alta-opcional{
  font-weight: 500; font-size: .78rem; color: var(--text3, #6b6b73);
}

/* Prendas de prueba: lo que el curso tiene prestado para tomarse la talla.
   La entrega de muestras se acredita en la constancia separada.
   afuera, y hasta ahora no se veian en ninguna parte. */
body[data-page="index"] .pp-item{
  border:1px solid var(--panel-linea); border-radius:10px; padding:10px; margin-bottom:8px;
}
body[data-page="index"] .pp-cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:4px;
}
body[data-page="index"] .pp-monto{
  font-weight:800; font-variant-numeric:tabular-nums; font-size:1.05rem;
}
body[data-page="index"] .pp-afuera{ color:var(--naranja-ink); font-weight:700; }
body[data-page="index"] .pp-estado{ margin-bottom:6px; font-size:.85rem; }
body[data-page="index"] .pp-detalle{
  margin:6px 0 8px; padding-top:6px; border-top:1px dashed var(--panel-linea);
}
body[data-page="index"] .pp-nueva summary{
  cursor:pointer; font-weight:700; font-size:.88rem; padding:8px 0; min-height:44px;
  display:flex; align-items:center;
}
body[data-page="index"] .pp-form{ display:flex; flex-direction:column; gap:6px; }
body[data-page="index"] .pp-form label{ font-size:.78rem; font-weight:600; color:#4a4a52; }
body[data-page="index"] .pp-form :is(input,select){
  min-height:44px; padding:9px 11px; font:inherit;
  border:1.5px solid var(--panel-linea); border-radius:8px; background:#fff;
}
@media (max-width:640px){
  body[data-page="index"] .pp-form :is(input,select){ font-size:16px; }
}

/* Calendario: el cambio entre presentaciones y reuniones, y la lista de
   reuniones. Sin colores nuevos: se usan los tokens del panel y el naranjo de
   marca solo para lo activo. */
body[data-page="index"] .cal-modos{
  display:flex; gap:6px; margin:0 0 12px; flex-wrap:wrap;
}
body[data-page="index"] .cal-modos button{
  min-height:44px; padding:9px 16px; font:inherit; font-weight:700; font-size:.86rem;
  border:1.5px solid var(--panel-linea); border-radius:10px;
  background:var(--blanco); color:var(--text2); cursor:pointer;
}
body[data-page="index"] .cal-modos button.active{
  border-color:var(--naranjo,#ff6a13); color:var(--naranja-ink);
  background:color-mix(in srgb, var(--naranjo,#ff6a13) 8%, var(--blanco));
}
body[data-page="index"] .cal-nueva{ margin-bottom:14px; }
body[data-page="index"] .cal-form{ display:flex; flex-direction:column; gap:6px; max-inline-size:520px; }
body[data-page="index"] .cal-form label{ font-size:.78rem; font-weight:600; color:#4a4a52; }
body[data-page="index"] .cal-form :is(input,select){
  min-height:44px; padding:9px 11px; font:inherit;
  border:1.5px solid var(--panel-linea); border-radius:8px; background:#fff;
}
body[data-page="index"] .cal-dia-reu{ margin-bottom:14px; }
body[data-page="index"] .cal-dia-reu.pasado{ opacity:.62; }
body[data-page="index"] .cal-dia-reu h3{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin:0 0 6px; font-size:1rem; text-transform:capitalize;
}
body[data-page="index"] .cal-dia-n{ font-size:.78rem; font-weight:600; color:var(--text3,#6b6b73); }
body[data-page="index"] .cal-reu{
  display:flex; align-items:center; gap:10px; padding:10px;
  border:1px solid var(--panel-linea); border-radius:10px; margin-bottom:6px;
  background:var(--blanco);
}
body[data-page="index"] .cal-reu.hecha{ background:#2b6b3f0a; border-color:#2b6b3f33; }
body[data-page="index"] .cal-reu-hora{
  min-inline-size:58px; font-weight:800; font-variant-numeric:tabular-nums;
}
body[data-page="index"] .cal-reu-cuerpo{ flex:1; min-inline-size:0; display:flex; flex-direction:column; }
body[data-page="index"] .cal-reu-lleva{ font-size:.8rem; color:var(--text3,#6b6b73); }
/* El control de la muestra dentro de cada reunion: flujo aparte de la ficha
   (Carlitos 28-ago). Afuera = lo que la gente se llevo y todavia no vuelve. */
body[data-page="index"] .cal-reu-entrega{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px;
  padding:7px 10px; border:1px solid var(--panel-linea); border-radius:8px; background:var(--blanco);
}
body[data-page="index"] .cal-reu-entrega.atrasada{ border-color:var(--red,#c0392b); }
body[data-page="index"] .cal-reu-afuera{ font-size:.8rem; color:var(--panel-tinta-2); flex:1; min-inline-size:0; }
body[data-page="index"] .cal-reu-pend{ font-size:.78rem; color:var(--text3,#6b6b73); font-style:italic; }
@media (max-width:640px){
  body[data-page="index"] .cal-form :is(input,select){ font-size:16px; }
  body[data-page="index"] .cal-reu{ flex-wrap:wrap; }
  body[data-page="index"] .cal-reu-cuerpo{ flex-basis:100%; order:3; }
}

/* =============================================================================
   La revision de la ficha de tallaje
   -----------------------------------------------------------------------------
   Vive al inicio de la seccion de tallaje de la ficha (antes estaba en el
   bloque «siguiente paso», que Carlitos saco de la cabecera: «mucha basura»).
   ========================================================================== */
body[data-page="index"] .rev-caja:empty{ display:none; }
body[data-page="index"] .rev-caja{
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--line);
}
body[data-page="index"] .rev-ok{
  margin:0; font-size:.86rem; color:var(--ok-relleno); font-weight:600;
}
body[data-page="index"] .rev-titulo{
  margin:0 0 10px; font-size:.88rem; font-weight:700;
}
body[data-page="index"] .rev-lista{
  margin:0; padding-left:18px;
  display:flex; flex-direction:column; gap:7px;
  font-size:.82rem; color:var(--text2);
}
/* El «cómo se arregla» va debajo y en cursiva: es la instrucción, no el
   problema. Junto en la misma línea se lee como una sola frase larga. */
body[data-page="index"] .rev-lista em{
  display:block; margin-top:2px; color:var(--text3); font-size:.78rem;
}
body[data-page="index"] .rev-mas{ list-style:none; margin-left:-18px; font-style:italic; }

/* ── Qué toca ahora, en una línea ────────────────────────────────────────
   El bloque grande se saco porque tenia "mucha basura que no quiero ver".
   Esto es lo minimo que contesta la pregunta: un chip con la etapa al lado
   del curso, y un boton junto al de Editar. Cero alto nuevo.
   El chip NO usa el naranjo de la marca: el naranjo es la accion, y aqui la
   accion es el boton. El chip solo informa. */
.fp-etapa{
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--panel-superficie-2, #f3f4f5);
  border: 1px solid var(--panel-linea, #e1e3e4);
  color: var(--panel-tinta-2, #4b5563);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: 1px;
  white-space: nowrap;
}
/* Al dia: verde, y se lee como "no hay nada pendiente". */
.fp-etapa-ok{
  background: var(--ok-fondo, #dcfce7);
  border-color: var(--ok-relleno, #15803d);
  color: var(--ok-relleno, #15803d);
}
/* El boton del paso va al final de la fila de navegacion, separado de los
   chicos de mover entre colegios: es la accion, no navegacion. */
.fp-paso{ margin-left: auto; }
/* El boton de la etapa (secundario) va junto a Editar, antes del CTA fijo. */
.fp-etapa-btn{ margin-left: 6px; }
/* Casillas de confirmación (Carlitos 02-sep): chicas, junto al CTA, para ver
   de un vistazo si el cliente confirmó Compromiso/Programación/Guía. */
.fp-checks{ display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
.fp-check{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; min-height: 24px;
  font: 700 .68rem/1 Manrope, sans-serif;
  color: var(--text2);
  background: var(--panel-superficie-2, #f3f4f5);
  border: 1px solid var(--panel-linea, #e1e3e4);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.fp-check:hover{ border-color: var(--line-fuerte); color: var(--text); }
.fp-check.on{
  color: var(--ok-relleno, #15803d);
  background: var(--ok-fondo, #dcfce7);
  border-color: var(--ok-relleno, #15803d);
}
@media (max-width: 640px){
  .fp-paso{ margin-left: 0; }
  .fp-etapa{ display: block; margin: 0 0 4px; width: fit-content; }
}

/* =============================================================================
   EL RESUMEN DE INICIO
   Seis piezas en una tira: cinco cifras y el botón de agregar. Se lee de
   izquierda a derecha en el orden en que se hacen las preguntas.

   La tarjeta de garantías está deliberadamente aparte: borde punteado y la
   palabra "se devuelve" abajo. Es plata que no es de la casa, y confundirla
   con la caja ya dejó la cartera doce millones por debajo. La forma tiene que
   decirlo aunque nadie lea la etiqueta.
   ========================================================================== */
.ini-resumen{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}

.ini-card{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel-superficie);
  min-width: 0;
}

.ini-l{
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text2);
}

.ini-v{
  font-family: 'League Spartan', system-ui, sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

/* El pie va en --text2, no en --text3: medido sobre la superficie del panel,
   --text3 daba contraste 2,81 y el minimo legible es 4,5. Y a 12px, porque
   bajo eso la sonda de layout lo marca como falla. */
.ini-p{
  font-size: .78rem;
  line-height: 1.32;
  color: var(--text2);
}

/* Lo cobrado: es de la casa. */
.ini-card.ini-ok{ border-top: 3px solid var(--ok); }
.ini-card.ini-ok .ini-v{ color: var(--ok); }

/* Lo que falta por cobrar: solo se pinta si hay algo que cobrar. */
.ini-card.ini-debe{ border-top: 3px solid var(--red); }
.ini-card.ini-debe .ini-v{ color: var(--red); }

/* La garantía: ajena. Punteado en vez de línea llena, y el pie en cursiva. */
.ini-card.ini-gar{
  border-style: dashed;
  background: transparent;
}
.ini-card.ini-gar .ini-v{ color: var(--text2); font-weight: 700; }
.ini-card.ini-gar .ini-p{ font-style: italic; }

/* El botón cierra la tira, con el mismo alto que las tarjetas. */
.ini-cta{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border: 1px solid var(--naranja);
  border-radius: 14px;
  background: var(--naranja-soft, transparent);
  color: var(--naranja-ink, var(--naranja));
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ini-cta:hover{ transform: translateY(-2px); box-shadow: var(--syt-shadow-card, 0 6px 18px -12px rgba(0,0,0,.4)); }
.ini-cta:focus-visible{ outline: 2px solid var(--naranja); outline-offset: 2px; }
.ini-cta-mas{ font-size: 1.5rem; line-height: 1; font-weight: 700; }
.ini-cta b{ display: block; font-size: .93rem; }
.ini-cta small{ display: block; font-size: .78rem; opacity: .82; margin-top: 2px; }

@media (max-width: 640px){
  .ini-resumen{ grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .ini-cta{ grid-column: 1 / -1; justify-content: center; }
}

/* =============================================================================
   AGENDA DE REUNIONES Y TALLAJE  (Recepción, arriba)
   Calendario a la izquierda, el día desplegado a la derecha. En el teléfono
   el calendario va arriba y la lista debajo, en una columna.
   ========================================================================== */
.rn-wrap{ margin: 0 0 34px; }

.rn-cabecera{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.rn-cabecera .sub{ max-width: 62ch; margin: 4px 0 0; }

.rn-cols{ display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 20px; align-items: start; }

/* --- Calendario --- */
.rn-cal{
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: var(--panel-superficie); padding: 13px;
  position: sticky; top: 14px;
}
.rn-cal-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.rn-cal-top b{ font-size: .95rem; text-transform: capitalize; }
.rn-cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rn-cal-dow{
  text-align: center; font-size: .68rem; font-weight: 700; color: var(--text2);
  padding-bottom: 4px; letter-spacing: .04em;
}
.rn-cal-hueco{ aspect-ratio: 1; }
.rn-cal-dia{
  position: relative; aspect-ratio: 1; min-height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text); cursor: pointer;
  font: 600 .82rem inherit; font-variant-numeric: tabular-nums;
}
.rn-cal-dia:hover{ border-color: var(--naranja); }
.rn-cal-dia:focus-visible{ outline: 2px solid var(--naranja); outline-offset: 1px; }
.rn-cal-dia.con{ background: var(--naranja-soft, rgba(255,106,19,.12)); border-color: var(--naranja); }
/* Los días con presentación llevan una barra abajo: no se agenda encima. */
.rn-cal-dia.baile::after{
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--red);
}
.rn-cal-pip{
  position: absolute; top: 1px; right: 2px;
  min-width: 14px; height: 14px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px; background: var(--naranja); color: #fff;
  font: 700 9.5px/1 inherit;
}
.rn-cal-pie{ margin: 9px 0 0; font-size: .74rem; color: var(--text2); line-height: 1.35; }
.rn-leyenda{ display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; }
.rn-leyenda.baile{ background: var(--red); }

/* --- La lista de días --- */
.rn-dia{ margin-bottom: 20px; }
.rn-dia h3{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
  font-size: 1rem; text-transform: capitalize;
}
.rn-dia-n{ font-size: .76rem; font-weight: 400; color: var(--text2); text-transform: none; }
.rn-dia h3 .btn{ margin-left: auto; }

.rn-lista{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rn-item{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 11px;
  background: var(--panel-superficie);
}
.rn-item.editando{ display: block; border-color: var(--naranja); }
.rn-hora{
  min-width: 52px; font: 700 .9rem ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.rn-cuerpo{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rn-cuerpo b{ font-size: .92rem; }
.rn-cuerpo a{ color: inherit; }
.rn-entrega, .rn-nota{ font-size: .78rem; color: var(--text2); }
.rn-nota{ font-style: italic; }
.rn-marca{
  align-self: flex-start; margin-top: 2px; padding: 1px 7px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--line-soft); color: var(--text2);
}
.rn-acciones{ display: flex; gap: 5px; align-items: center; }
/* Una reunión hecha se apaga pero no se esconde: sirve de registro. */
.rn-item.rn-hecha{ opacity: .62; }
.rn-item.rn-hecha .rn-marca{ background: var(--ok-soft, #e6f4ea); color: var(--ok); }
.rn-item.rn-cancelada{ opacity: .5; }
.rn-item.rn-cancelada .rn-cuerpo b{ text-decoration: line-through; }

/* --- Formulario --- */
.rn-form{ display: flex; flex-direction: column; gap: 9px; }
.rn-form-fila{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rn-form label{ display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--text2); }
.rn-form input, .rn-form select, .rn-form textarea{
  font: inherit; font-size: .88rem; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-lienzo, #fff); color: var(--text);
}
.rn-form input:focus-visible, .rn-form select:focus-visible, .rn-form textarea:focus-visible{
  outline: 2px solid var(--naranja); outline-offset: 1px;
}
.rn-form textarea{ resize: vertical; }
.rn-form-pie{ display: flex; gap: 7px; margin-top: 3px; }
.rn-borrar{ margin-left: auto; color: var(--red); }

@media (max-width: 900px){
  .rn-cols{ grid-template-columns: 1fr; }
  .rn-cal{ position: static; }
}
@media (max-width: 560px){
  .rn-form-fila{ grid-template-columns: 1fr; }
  .rn-item{ flex-wrap: wrap; }
  .rn-acciones{ width: 100%; justify-content: flex-end; }
}

/* =============================================================================
   LA TABLA DE STOCK, CON COLOR
   "un exceso de blanco de fondo que hace que no haya orden visual"
   "formato de tabla tipo excel con los colores coherentes no solidos"

   Medido antes: las 16 tablas tenian TODAS las celdas en rgb(255,255,255),
   sin cebra y sin banda de encabezado. Ocho columnas de talla en blanco puro
   se leen mal: la vista se pierde de fila al buscar una cantidad.

   Los tonos salen del naranjo de la marca rebajado al 4-7%, no de un gris
   cualquiera: tiñen sin taparse con el dato, que es lo que se pidio.
   ========================================================================== */
body[data-page="index"] .inv-table-syt{
  --inv-banda:  color-mix(in srgb, var(--naranja) 7%, var(--panel-superficie));
  --inv-cebra:  color-mix(in srgb, var(--naranja) 3.5%, var(--panel-superficie));
  --inv-borde:  color-mix(in srgb, var(--naranja) 16%, var(--line));
}

/* La banda del encabezado: separa las tallas del resto de un vistazo. */
body[data-page="index"] .inv-table-syt th{
  background: var(--inv-banda);
  color: var(--text2);
}

/* Cebra: una fila sí, una no. Es lo que evita saltarse de línea. */
body[data-page="index"] .inv-table-syt tbody tr:nth-child(even) > td{
  background: var(--inv-cebra);
}
body[data-page="index"] .inv-table-syt tbody tr:nth-child(odd) > td{
  background: var(--panel-superficie);
}

/* La etiqueta de la fila es el ancla: va más marcada que las celdas. */
body[data-page="index"] .inv-table-syt .rowlbl-syt,
body[data-page="index"] .inv-table-syt tbody tr:nth-child(even) > .rowlbl-syt{
  background: var(--inv-banda);
  color: var(--text2);
}

/* La columna del total se despega: es la que se lee primero. */
body[data-page="index"] .inv-table-syt td:last-child,
body[data-page="index"] .inv-table-syt tbody tr:nth-child(even) > td:last-child{
  background: color-mix(in srgb, var(--naranja) 11%, var(--panel-superficie));
  font-weight: 800;
  border-left: 2px solid var(--inv-borde);
}

/* Al pasar por encima se ilumina la fila entera: con ocho tallas se agradece. */
body[data-page="index"] .inv-table-syt tbody tr:hover > td{
  background: color-mix(in srgb, var(--naranja) 13%, var(--panel-superficie));
}

/* Las celdas editables se ven editables. */
body[data-page="index"] .inv-row-cantidad > td,
body[data-page="index"] .inv-table-syt tbody tr.inv-row-cantidad:nth-child(even) > td{
  background: color-mix(in srgb, var(--naranja) 5%, var(--panel-lienzo));
}

/* Un cero no es lo mismo que un dato: se apaga para que el ojo lo salte. */
body[data-page="index"] .inv-table-syt td.inv-cero{ color: var(--text3); }

/* Los encabezados de talla estaban en --text3 a 9,6px: contraste 3,12 sobre el
   mínimo de 4,5, y 34 celdas así. Venía de antes, pero teñir el fondo lo dejó
   peor. XS/S/M/L son las etiquetas que se buscan con el dedo mientras se
   cuentan trajes: van legibles. */
body[data-page="index"] .inv-table-syt th{
  color: var(--text);
  font-size: .7rem;
}
body[data-page="index"] .inv-table-syt .rowlbl-syt{
  color: var(--text);
  font-size: .68rem;
}

/* La columna del total la pinta un th, no un td: por eso la regla anterior no
   la tocaba. Se marca por su clase, que es lo estable. */
body[data-page="index"] .inv-table-syt .th-total,
body[data-page="index"] .inv-table-syt .td-total,
body[data-page="index"] .inv-table-syt tbody tr > *:last-child{
  border-left: 2px solid var(--inv-borde);
}
body[data-page="index"] .inv-table-syt tbody tr > td:last-child,
body[data-page="index"] .inv-table-syt tbody tr:nth-child(even) > td:last-child{
  background: color-mix(in srgb, var(--naranja) 12%, var(--panel-superficie));
  font-weight: 800;
  color: var(--text);
}

/* =============================================================================
   HOJA EXCEL DEL DÍA — pedido Carlitos 01-sep (noche): la planilla del color
   con AIRE y el fondo del bloque teñido del COLOR DEL TRAJE (no solo la línea).
   Los verdes de STOCK y DISPONIBLE se mantienen para destacar; la cebra naranja
   no debe pisarlos.
   ========================================================================== */

/* El bloque entero se tiñe con el lienzo del traje (más presente que antes:
   era 1c/1a de alfa, se sube para que el color se vea de verdad) y la barra
   del canto se mantiene como firma. */
body[data-page="index"] .inv-excel-card[data-traje]{
  background-color: color-mix(in srgb, var(--tt) 10%, #ffffff);
  border-left: 5px solid var(--tt);
  padding: 26px 24px 22px;
}

/* Aire entre la cabecera del color, el título MUJER/HOMBRE y su tabla. */
body[data-page="index"] .inv-excel-titulo{
  font-family: 'League Spartan',sans-serif;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--text);
  margin: 26px 0 12px;
}
body[data-page="index"] .inv-excel-gen:first-of-type .inv-excel-titulo{
  margin-top: 4px;
}
body[data-page="index"] .inv-excel-gen + .inv-excel-gen{
  /* Mujer y Hombre son dos planillas operativas distintas. El corte tiene que
     verse antes de que empiece el segundo bloque, no depender solo del título. */
  margin-top: 42px;
  padding-top: 26px;
  border-top: 2px solid color-mix(in srgb, var(--tt) 34%, #ffffff);
}

/* Tabla de la hoja: filas con respiro. La tabla del modo día es compacta a
   propósito, pero la HOJA es la que se mira para decidir: 9px de fila. */
body[data-page="index"] .inv-excel-tabla td{
  padding: 9px 4px;
}

/* STOCK TOTAL y DISPONIBLE conservan VERDE, por sobre la cebra naranja
   (la cebra de 13242 pinta todos los pares). Con textura tenue para que el
   número negro siga mandando. */
body[data-page="index"] .inv-excel-tabla tr.inv-row-cantidad > td,
body[data-page="index"] .inv-table-syt tr.inv-row-cantidad:nth-child(even) > td{
  background: color-mix(in srgb, var(--ok) 16%, #ffffff);
  border-top: 2px solid color-mix(in srgb, var(--ok) 45%, #ffffff);
  border-bottom: 2px solid color-mix(in srgb, var(--ok) 45%, #ffffff);
}
body[data-page="index"] .inv-excel-tabla tr.inv-row-cantidad > .rowlbl-syt{
  background: color-mix(in srgb, var(--ok) 22%, #ffffff);
  color: var(--text);
}
body[data-page="index"] .inv-excel-tabla tr.inv-row-disp > td,
body[data-page="index"] .inv-table-syt tr.inv-row-disp:nth-child(even) > td{
  background: color-mix(in srgb, var(--ok) 24%, #ffffff);
  border-top: 2px solid color-mix(in srgb, var(--ok) 55%, #ffffff);
}
body[data-page="index"] .inv-excel-tabla tr.inv-row-disp > .rowlbl-syt{
  background: color-mix(in srgb, var(--ok) 30%, #ffffff);
  color: var(--text);
}
/* Los totales de esas dos filas también verdes (la regla 13298 pinta el
   last-child naranja). */
body[data-page="index"] .inv-excel-tabla tr.inv-row-cantidad > td:last-child,
body[data-page="index"] .inv-excel-tabla tr.inv-row-disp > td:last-child{
  background: color-mix(in srgb, var(--ok) 30%, #ffffff);
}
/* DISPONIBLE conserva su marco verde fuerte: es LA cifra de decisión. */
body[data-page="index"] .inv-excel-tabla tr.inv-row-disp > .td-total-disp{
  border: 2px solid var(--ok);
  border-radius: 6px;
}

/* El hover naranja no tapa los verdes al pasar el mouse. */
body[data-page="index"] .inv-excel-tabla tr.inv-row-cantidad:hover > td,
body[data-page="index"] .inv-excel-tabla tr.inv-row-disp:hover > td{
  background: color-mix(in srgb, var(--ok) 30%, #ffffff);
}

/* FIN HOJA EXCEL DEL DÍA ================================================ */

/* =============================================================================
   EL RESUMEN DEL COLEGIO EN EL CALENDARIO
   Apretar un colegio ya no salta a la ficha: abre esto. Cuatro bloques —qué
   llevan, la plata, el equipo de ese horario y qué falta— y recién el botón
   deriva. Es la diferencia entre mirar y entrar.
   ========================================================================== */
.cal-tabla tbody tr.cal-fila-abierta > td{
  background: color-mix(in srgb, var(--naranja) 10%, var(--panel-superficie));
  box-shadow: inset 0 -2px 0 var(--naranja);
}

.cal-tabla tbody tr.cal-resumen-fila > td{ padding: 0; border-top: 0; }

.cal-resumen{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  padding: 16px 18px 18px;
  background: color-mix(in srgb, var(--naranja) 4%, var(--panel-superficie));
  border-bottom: 1px solid var(--line-soft);
}

.cal-res-bloque h5{
  margin: 0 0 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text2);
}

.cal-res-cab{ margin: 0 0 6px; font-size: .84rem; }
.cal-res-cab b{ font-variant-numeric: tabular-nums; }

.cal-res-piezas{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px;
  font-size: .78rem; color: var(--text2);
}
.cal-res-piezas b{ color: var(--text); font-variant-numeric: tabular-nums; }

/* La plata: la garantía separada, como en todas partes del panel. */
.cal-res-plata{ margin: 0; font-size: .8rem; }
.cal-res-plata > div{ display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.cal-res-plata dt{ color: var(--text2); }
.cal-res-plata dd{ margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-res-debe dd{ color: var(--red); }
.cal-res-plata .cal-res-gar{ border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 5px; }
.cal-res-gar dd{ font-weight: 600; color: var(--text2); text-align: right; }
.cal-res-gar dd small{ display: block; font-size: .68rem; font-style: italic; opacity: .8; }

.cal-res-equipo{ list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.cal-res-equipo li{ display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.cal-res-equipo span{ color: var(--text2); font-size: .73rem; font-variant-numeric: tabular-nums; }
.cal-res-sineq{ margin: 0; font-size: .78rem; color: var(--red); }
.cal-res-ok{ margin: 0; font-size: .8rem; color: var(--ok); }

.cal-res-cierre{ display: flex; flex-direction: column; }
.cal-res-cta{ margin-top: auto; align-self: flex-start; }

@media (max-width: 640px){
  .cal-resumen{ grid-template-columns: 1fr; padding: 13px 14px; }
  .cal-res-piezas{ grid-template-columns: 1fr; }
  .cal-res-cta{ align-self: stretch; }
}

/* Los chips de «qué falta» en el resumen del calendario. Hora y tallas
   impiden despachar; el resto avisa pero el traje igual sale. */
.cal-resumen .pnd-chip{
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; margin: 0 4px 4px 0;
}
.cal-resumen .pnd-bloquea{
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}
.cal-resumen .pnd-avisa{
  background: color-mix(in srgb, var(--naranja) 16%, transparent);
  color: var(--naranja-ink, var(--naranja));
}
.cal-res-aprox{
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: .68rem; font-style: italic; opacity: .85;
}

/* =============================================================================
   FINANZAS
   Seis cifras arriba y las cuentas colegio por colegio abajo. La garantía va
   punteada en las dos: es plata en custodia, no ganancia, y sumarla al resto
   es el error que dejó la cartera doce millones por debajo.
   ========================================================================== */
.fin-resumen{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.fin-card{
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 16px 14px;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: var(--panel-superficie); min-width: 0;
}
.fin-l{
  font-size: .78rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text2);
}
.fin-v{
  font-family: 'League Spartan', system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 1.62rem); font-weight: 800;
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--text);
}
.fin-p{ font-size: .78rem; line-height: 1.32; color: var(--text2); }
.fin-card.fin-ok{ border-top: 3px solid var(--ok); }
.fin-card.fin-ok .fin-v{ color: var(--ok); }
.fin-card.fin-debe{ border-top: 3px solid var(--red); }
.fin-card.fin-debe .fin-v{ color: var(--red); }
.fin-card.fin-gar{ border-style: dashed; background: transparent; }
.fin-card.fin-gar .fin-v{ color: var(--text2); font-weight: 700; }
.fin-card.fin-gar .fin-p{ font-style: italic; }

/* --- La tabla de cuentas --- */
.fin-tabla{ width: 100%; border-collapse: collapse; font-size: .84rem; }
.fin-tabla th{
  background: color-mix(in srgb, var(--naranja) 7%, var(--panel-superficie));
  color: var(--text2); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.fin-tabla th.num, .fin-tabla td.num{ text-align: right; font-variant-numeric: tabular-nums; }
.fin-tabla td{ padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.fin-tabla tbody tr{ cursor: pointer; }
.fin-tabla tbody tr:nth-child(even) > td{
  background: color-mix(in srgb, var(--naranja) 3%, var(--panel-superficie));
}
.fin-tabla tbody tr:hover > td{
  background: color-mix(in srgb, var(--naranja) 10%, var(--panel-superficie));
}
.fin-tabla tbody tr.fin-fila-abierta > td{
  background: color-mix(in srgb, var(--naranja) 12%, var(--panel-superficie));
  box-shadow: inset 0 -2px 0 var(--naranja);
}
.fin-num-debe b{ color: var(--red); }
.fin-num-ok b{ color: var(--ok); }
/* La garantía atenuada y con su propio borde: no pertenece a las de al lado. */
.fin-tabla td.fin-num-gar{ color: var(--text2); border-left: 1px dashed var(--line); }

/* --- El detalle desplegado --- */
.fin-tabla tbody tr.fin-det-fila > td{ padding: 0; }
.fin-det{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; padding: 16px 18px;
  background: color-mix(in srgb, var(--naranja) 4%, var(--panel-superficie));
}
.fin-det-bloque h5{
  margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text2);
}
.fin-det-gar{ border-left: 1px dashed var(--line); padding-left: 16px; }
.fin-det-dl{ margin: 0; font-size: .82rem; }
.fin-det-dl > div{ display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; align-items: baseline; }
.fin-det-dl dt{ color: var(--text2); white-space: nowrap; }
.fin-det-dl dd{ margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.fin-det-dl dd small{ display: block; font-size: .7rem; font-weight: 400; color: var(--text2); font-style: italic; }
.fin-det-debe dd{ color: var(--red); }
.fin-det-ok dd{ color: var(--ok); }
.fin-det-cta{ margin-top: 10px; }

@media (max-width: 700px){
  .fin-det{ grid-template-columns: 1fr; padding: 13px 14px; }
  .fin-det-gar{ border-left: 0; border-top: 1px dashed var(--line); padding-left: 0; padding-top: 12px; }
}

/* =============================================================================
   CORRECCIONES DE LEGIBILIDAD  (medidas, no a ojo)
   Al traer el bloque de reuniones desde Calendario a Recepción quedó a la vista
   texto que antes casi nadie miraba. Medido sobre 1.132 elementos:

     «✓ hecha»                 contraste 1,43  ← casi invisible
     «Se lleva: muestras…»     contraste 2,28
     «2 reuniones»             contraste 2,81
     la hora del turno         contraste 2,88

   El mínimo legible es 4,5. Y el proyecto marca como falla el texto bajo 12px,
   así que las etiquetas mías suben a 12px.
   ========================================================================== */
body[data-page="index"] .cal-dia-n,
body[data-page="index"] .cal-reu-lleva{ color: var(--text2); }

body[data-page="index"] .listo-si{
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}

body[data-page="index"] .cal-reu-hora{ color: var(--text); }
body[data-page="index"] .cal-reu-cuerpo b{ color: var(--text); }

/* Etiquetas propias a 12px: bajo eso la sonda de layout lo marca. */
.fin-tabla th{ font-size: .78rem; }
.fin-det-dl dd small,
.cal-res-gar dd small,
.cal-res-aprox{ font-size: .75rem; }
.fin-det-bloque h5,
.cal-res-bloque h5{ font-size: .78rem; }
.rn-cal-dow{ font-size: .75rem; }
.rn-cal-pie{ font-size: .78rem; }

/* El eyebrow y las etiquetas del bloque de reuniones estaban a 10,6px. */
body[data-page="index"] .rn-wrap .eyebrow,
body[data-page="index"] .rn-wrap label{ font-size: .78rem; }
/* Los chips de «qué falta» del calendario, a 12px. */
body[data-page="index"] .cal-resumen .pnd-chip{ font-size: .78rem; }

/* =============================================================================
   EL LOGO ES LA ENTRADA A INICIO
   Pasó de <div> a <button>, así que hay que quitarle lo que el navegador le
   pone a los botones y devolverle el aspecto que tenía. Y tiene que verse
   apretable: si es la única puerta a Inicio, nadie va a adivinarlo.
   ========================================================================== */
body[data-page="index"] button.brand{
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-family: 'League Spartan';
  font-weight: 800;
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  transition: background-color .18s ease, transform .18s ease;
}
body[data-page="index"] button.brand:hover{
  background: color-mix(in srgb, var(--naranja) 10%, transparent);
  transform: translateY(-1px);
}
body[data-page="index"] button.brand:focus-visible{
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}
/* Cuando Inicio es la vista abierta, el logo lo dice. */
body[data-page="index"] button.brand.active{
  background: color-mix(in srgb, var(--naranja) 14%, transparent);
}

/* La cabecera de Inicio respira: es una portada, no una tabla. */
#inicio .vh{ margin-bottom: 20px; }
#inicio .sub{ max-width: 58ch; }

/* =============================================================================
   EL MENÚ DEL TELÉFONO SE LEÍA MAL
   Medido: las siete etiquetas en contraste 2,96 sobre el mínimo de 4,5. Es la
   navegación principal del teléfono, que es por donde entra Loreto — el ítem
   activo se veía y los otros seis se adivinaban.

   Venía de antes; se arregla ahora que se agregó Inicio y quedó a la vista.
   ========================================================================== */
/* La barra siempre es oscura (fondo rgb(10,10,10)), así que el valor va
   directo: no depende del tema y no se cae si un token cambia. Gris claro
   sobre casi negro da 11,8 de contraste; el activo, blanco puro. */
/* Se usa la MISMA forma `:is(a, .mn-more)` que la regla que hay que vencer.
   `:is()` toma la especificidad de su argumento mas alto -- ahi `.mn-more`, una
   clase -- asi que ese selector pesa (0,3,1) y le ganaba a un `html body ... a`
   que solo llega a (0,2,3). Igualando la forma y yendo despues, gana esta.

   El color sale de `--panel-chrome-t2`, que el propio sistema define como "item
   normal" del menu. No es un valor inventado: estaba y no se estaba usando. */
body[data-page="index"] .mobile-nav :is(a, .mn-more){
  color: var(--panel-chrome-t2);
  opacity: 1;
}
body[data-page="index"] .mobile-nav :is(a, .mn-more).active{
  color: var(--panel-chrome-t1);
}

/* El eyebrow de Inicio a 12px: bajo eso la sonda lo marca como falla. */
#inicio .eyebrow{ font-size: .78rem; }

/* =========================================================================
   28-AGO · Arreglos pedidos por Carlitos
   Va al final a proposito: gana por orden de cascada sin tener que pelear
   con la especificidad de las reglas de mas arriba.
   ========================================================================= */

/* --- Envio de documentos: los dos hitos, en los cuatro papeles ---------- */
.fp-docacciones .doc-envio{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft, #e6e1da);
}
.btn.doc-env.on{
  background: color-mix(in srgb, var(--ok, #2f7d32) 14%, transparent);
  border-color: color-mix(in srgb, var(--ok, #2f7d32) 45%, transparent);
  color: var(--ok, #2f7d32);
  font-weight: 700;
}
.btn.doc-conf.on{
  background: color-mix(in srgb, var(--ok, #2f7d32) 22%, transparent);
  border-color: var(--ok, #2f7d32);
  color: var(--ok, #2f7d32);
  font-weight: 800;
}
.btn.doc-conf[disabled]{ opacity: .38; cursor: not-allowed; }

/* Chip intermedio: enviado pero sin respuesta del cliente. */
.chip.ch-med{
  background: color-mix(in srgb, var(--naranjo, #e8590c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--naranjo, #e8590c) 40%, transparent);
  color: var(--naranja-ink, #c2410c);
}

/* --- Menu inferior del telefono: SIETE items, no cinco -----------------
   La rejilla estaba declarada `repeat(5,...)` con siete enlaces dentro, asi
   que los dos ultimos se salian y los nombres se pisaban. Ahora son ocho:
   se sumo «Equipo», que hasta hoy no tenia como abrirse. */
@media (max-width: 980px){
  /* Se usa `html body[data-page=...]` (0,2,3) en vez de forzar prioridad: le gana a
     `html body .mobile-nav` (0,1,3) y a `body[data-page] .mobile-nav` (0,2,2),
     que son las dos reglas contra las que estaba peleando. La regla del
     proyecto es igualar especificidad; forzarla tapa el problema y deja la
     cascada peor para el siguiente que la toque. */
  html body[data-page="index"] .mobile-nav{
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
    padding: 4px 2px;
  }
  html body[data-page="index"] .mobile-nav :is(a,.mn-more){
    padding: 4px 0;
    gap: 1px;
    overflow: hidden;
  }
  html body[data-page="index"] .mobile-nav .mn-i{ font-size: 1.05rem; line-height: 1; }
  /* La etiqueta estaba en .5rem (8px) y bajaba a .46rem (7,4px) en pantallas
     chicas. A 360px con ocho columnas hay 45px por item -- justo el minimo
     tactil-- y debajo un texto que no se alcanza a leer. Se sube a 10px, que
     entra igual porque el nombre va recortado con puntos suspensivos. */
  html body[data-page="index"] .mobile-nav .mn-t{
    display: block;
    max-width: 100%;
    font-size: .625rem;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}

/* --- Visor de documentos en el telefono --------------------------------
   Salia cortado a la derecha: el papel mide ~800px fijos y la pantalla 360.
   El zoom lo pone el JS; aqui se le da la pantalla completa y se evita que
   el fondo siga corriendo detras. */
body.con-visor{ overflow: hidden; }
@media (max-width: 820px){
  .doc-prev{ padding: 0; align-items: stretch; }
  .doc-prev-card{
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .doc-prev-head{
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 12px calc(10px + env(safe-area-inset-top));
    background: var(--panel-superficie, #141414);
  }
  .doc-prev-head .fp-acciones{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .doc-prev-head .fp-acciones .btn{ flex: 1 1 auto; min-height: 42px; }
  .doc-prev-body{ grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .doc-prev-message{ max-height: 42dvh; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .doc-prev-message:not([open]){ max-height: 44px; overflow: hidden; }
  .doc-msg-line{ grid-template-columns: 48px minmax(0,1fr) auto; }
  .doc-prev-frame{
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
  }
}

/* --- Botones de papel en el telefono: que se puedan apretar ------------- */
@media (max-width: 820px){
  .fp-docacciones{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .fp-docacciones .btn{
    flex: 1 1 44%;
    min-height: 42px;
    justify-content: center;
  }
  .fp-docacciones .btn.pri{ flex-basis: 100%; }
  .fp-docitem summary{ min-height: 46px; display: flex; align-items: center; gap: 6px; }
}

/* «Atención en vivo» y «Cerrar sesión» quedaban ocultos en el teléfono porque
   .top .right entero iba a display:none. El enlace existía y no se podía
   apretar: por eso «no hace nada». Se muestran de nuevo, compactos. */
/* De 641 a 980 es TABLET: ahi el encabezado todavia tiene sitio para
   «Atencion en vivo» y «Cerrar sesion». Abajo de 641 no, y ademas el
   bloque movil ya los oculta -- pero este venia DESPUES en el archivo y
   con mas especificidad, asi que los volvia a mostrar. Resultado: en el
   telefono salian TRES controles (Salir, Atencion en vivo y Cerrar
   sesion, dos de ellos lo mismo) y el titulo salia cortado. */
@media (min-width: 641px) and (max-width: 980px){
  body[data-page="index"] .top .right{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
  }
  body[data-page="index"] .top .right .mes,
  body[data-page="index"] .top .right .av{ display: none; }
  body[data-page="index"] .top .right .desk-link{
    font-size: .7rem;
    padding: 6px 8px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  body[data-page="index"] .top .right .session-exit{ font-size: .7rem; min-height: 36px; }
}

/* Alta de turnos */
.tur-alta-form{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}
.tur-alta-form label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text2);
  min-width: 0;
}
.tur-alta-form :is(input, select){
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  font: inherit;
  min-width: 0;
}
.tur-alta-form button{ min-height: 42px; }
.tur-alta-nota{ margin: 10px 0 0; font-size: .74rem; color: var(--text2); }
.cal-res-ir{ margin-inline-start: 6px; }

/* La lista de quién SÍ está ese día, cuando ningún turno llega a la hora del
   retiro. Va atenuada respecto del equipo que sí cubre: están, pero en otro
   horario. */
.cal-res-equipo.cal-res-fuera{ opacity: .82; margin-top: 6px; }
.cal-res-equipo.cal-res-fuera li{ border-left: 2px solid var(--line); padding-left: 8px; }
.cal-res-nota{
  margin: 8px 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text2);
}
.cal-res-ir{ margin-top: 6px; }

/* Formulario de edición de un turno, dentro de la tabla. */
.tur-editando > td{ background: color-mix(in srgb, var(--naranja) 7%, var(--panel-superficie)); }
.tur-acciones{ white-space: nowrap; text-align: right; }
.tur-borrar{ color: var(--red); }

/* =============================================================================
   QUÉ SE LLEVA A LA PRUEBA DE TALLA  ·  dentro del Compromiso
   El generador ya sabía redactar el párrafo de responsabilidad; le faltaba este
   dato. Va aquí y no en otra pestaña porque es donde se genera el papel.
   ========================================================================== */
.cp-prueba{
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-superficie);
}
.cp-prueba-tit{
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 9px;
}
.cp-prueba-tit small{
  display: block;
  font-size: .76rem;
  font-weight: 400;
  color: var(--text2);
  margin-top: 2px;
}
.cp-prueba-opts{ display: flex; gap: 7px; flex-wrap: wrap; }
/* La opción elegida se ve elegida: es la que decide por cuánto responde el
   curso, así que no puede quedar a la interpretación de un borde tenue. */
.cp-prueba-opts .cp-opt.on{
  background: var(--naranja);
  border-color: var(--naranja);
  color: #fff;
}
.cp-prueba-nota{
  margin: 9px 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text2);
}
.cp-prueba-nota.cp-prueba-falta{ color: var(--red); }

/* El plazo de devolución, dentro del bloque de la prueba de talla. */
.cp-plazo{
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}
.cp-plazo label{
  font-size: .78rem;
  color: var(--text2);
  white-space: nowrap;
}
.cp-plazo input{
  padding: 5px 8px;
  font-size: .82rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-fondo);
  color: var(--text);
}

/* =============================================================================
   LOS CUATRO COLORES, EN LA FICHA
   Era una casilla de texto libre: por eso la base tiene "mixto" y "2 colores".
   Ahora estan los cuatro y se marcan los que el curso lleve.
   ========================================================================== */
.col-sel{ display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; margin-left: 7px; }
.col-opt{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: .78rem;
  font-family: inherit;
  color: var(--text2);
  background: var(--panel-fondo);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.col-opt:hover{ border-color: var(--line-fuerte); color: var(--text); }
/* El marcado tiene que leerse de un vistazo: define el traje de todo el curso. */
.col-opt.on{
  color: var(--text);
  font-weight: 600;
  background: var(--panel-superficie);
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px var(--line-fuerte);
}
.col-opt .cdot{
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
  flex: none;
}
.col-opt:not(.on) .cdot{ opacity: .38; }
/* Lo que decia antes y no servia: se muestra para que se vea que hay que cambiarlo. */
.col-aviso{ font-size: .74rem; color: var(--red); white-space: nowrap; }
.col-fichas{
  padding: 3px 9px;
  font-size: .74rem;
  font-family: inherit;
  color: var(--text);
  background: var(--panel-superficie);
  border: 1px dashed var(--line-fuerte);
  border-radius: 999px;
  cursor: pointer;
}
.col-fichas:hover{ border-style: solid; }

/* =============================================================================
   DISPONIBILIDAD OPERATIVA — día, color, talla y hora primero
   La pantalla responde una consulta de bodega; no es un tutorial ni una tira
   de KPIs. El color del traje identifica, pero no tiñe toda la superficie.
   ========================================================================== */
[id="disponibilidad"] .vh::after{ content: none; display: none; }
body[data-page="index"] [id="disponibilidad"] .vh .h1{ color: var(--text); }

body[data-page="index"] .inv-dia-query{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  background: var(--panel-superficie);
  box-shadow: 0 12px 30px -26px color-mix(in srgb, var(--panel-chrome) 45%, transparent);
}
body[data-page="index"] .inv-dia-query-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
body[data-page="index"] .inv-dia-query h2{
  margin: 2px 0 0;
  font: 800 clamp(1.15rem, 2vw, 1.45rem)/1.1 Manrope, sans-serif;
  color: var(--text);
}
body[data-page="index"] .inv-planilla-head p{
  margin: 6px 0 0;
  color: var(--text2);
  font-size: .82rem;
}
body[data-page="index"] .inv-consulta-avanzada{
  margin-top: 14px;
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  background: var(--panel-superficie);
}
body[data-page="index"] .inv-consulta-avanzada > summary{
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 15px;
  cursor: pointer;
  color: var(--text2);
  font-size: .8rem;
  font-weight: 800;
}
body[data-page="index"] .inv-consulta-avanzada-body{
  display: grid;
  gap: 12px;
  padding: 0 15px 15px;
  border-top: 1px solid var(--panel-line);
}
body[data-page="index"] .inv-consulta-avanzada .inv-filter-row{
  padding-top: 12px;
  border-top: 1px solid var(--panel-line);
}
body[data-page="index"] .inv-consulta-avanzada .inv-filter-row:first-child{ border-top: 0; }
body[data-page="index"] .inv-consulta-avanzada .inv-hora-top{
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--panel-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--ok) 8%, var(--panel-superficie));
}
body[data-page="index"] .inv-dia-query-state{
  color: var(--text2);
  font-size: .8rem;
  text-align: right;
}
body[data-page="index"] .inv-dia-query-state b{ color: var(--text); }
body[data-page="index"] .inv-dia-query-state span{ color: var(--error-texto); font-weight: 700; }
body[data-page="index"] .inv-dia-query .inv-filter-row{
  padding-top: 12px;
  border-top: 1px solid var(--panel-line);
}
body[data-page="index"] .inv-dia-query .inv-filter-chip{
  min-height: 38px;
  padding: 7px 13px;
  background: var(--panel-lienzo);
}
body[data-page="index"] .inv-dia-query .inv-filter-chip.active{
  background: var(--panel-chrome);
  border-color: var(--panel-chrome);
  color: var(--panel-chrome-t1);
  box-shadow: none;
}
body[data-page="index"] .inv-filter-empty{ color: var(--text3); font-size: .78rem; }
body[data-page="index"] .inv-dia-query .inv-hora-top{
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 11px 13px;
  border-color: color-mix(in srgb, var(--ok) 28%, var(--panel-line));
  background: color-mix(in srgb, var(--ok) 8%, var(--panel-superficie));
}
body[data-page="index"] .inv-dia-query .inv-hora-top span{
  color: var(--text2);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-page="index"] .inv-dia-query .inv-hora-top b{ color: var(--ok-texto); font-size: 1rem; }
body[data-page="index"] .inv-dia-query .inv-hora-top strong{ color: var(--text); font-size: .8rem; }

body[data-page="index"] .inv-color-card[data-traje]{
  background: color-mix(in srgb, var(--tt) 10%, #ffffff);
  border-left: 5px solid var(--tt);
  box-shadow: 0 14px 34px -30px color-mix(in srgb, var(--panel-chrome) 48%, transparent);
}

/* Las tres filas de decisión tienen significado fijo en todas las tablas. */
body[data-page="index"] .inv-table-syt tbody tr.inv-row-cantidad > td,
body[data-page="index"] .inv-table-syt tbody tr.inv-row-cantidad:nth-child(even) > td,
body[data-page="index"] .inv-table-syt tbody tr.inv-row-cantidad:hover > td{
  background: color-mix(in srgb, var(--ok) 11%, var(--panel-superficie));
  color: var(--text);
  border-color: color-mix(in srgb, var(--ok) 24%, var(--panel-line));
}
body[data-page="index"] .inv-table-syt tbody tr.inv-row-arri > td,
body[data-page="index"] .inv-table-syt tbody tr.inv-row-arri:nth-child(even) > td,
body[data-page="index"] .inv-table-syt tbody tr.inv-row-arri:hover > td{
  background: color-mix(in srgb, var(--alerta-relleno) 8%, var(--panel-superficie));
  color: var(--text);
}
body[data-page="index"] .inv-table-syt tbody tr.inv-row-disp > td,
body[data-page="index"] .inv-table-syt tbody tr.inv-row-disp:nth-child(even) > td,
body[data-page="index"] .inv-table-syt tbody tr.inv-row-disp:hover > td{
  background: color-mix(in srgb, var(--ok) 19%, var(--panel-superficie));
  color: var(--text);
  border-color: color-mix(in srgb, var(--ok) 34%, var(--panel-line));
}
body[data-page="index"] .inv-table-syt :is(.inv-row-cantidad,.inv-row-arri,.inv-row-disp) .rowlbl-syt{
  font-size: .7rem;
  letter-spacing: .02em;
}
body[data-page="index"] .inv-table-syt .td-total-cantidad{
  color: var(--ok-texto);
  font-family: Manrope, sans-serif;
}

/* =============================================================================
   FICHA EDITABLE — el modo edición debe verse y tocarse sin adivinar
   ========================================================================== */
body[data-page="index"] .ftl-edit-toggle{
  min-height: 44px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: .78rem;
}
body[data-page="index"] .ftl-head-actions > strong{ color: var(--text); }
body[data-page="index"] .ftl-edit-banner{
  margin: 14px 0;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--panel-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 8%, var(--panel-superficie));
  color: var(--text2);
  font-size: .8rem;
  line-height: 1.45;
}
body[data-page="index"] .ftl-edit-banner b{ color: var(--ok-texto); }
body[data-page="index"] .ftl-edit-input{
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: var(--panel-superficie);
  color: var(--text);
}
body[data-page="index"] .ftl-edit-input:focus{
  border-color: var(--naranja);
  background: var(--panel-superficie);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--naranja) 16%, transparent);
}
body[data-page="index"] .ftl-add-btn,
body[data-page="index"] .ftl-del-btn{ min-height: 40px; }
body[data-page="index"] .ftl-add-btn{
  border-color: color-mix(in srgb, var(--ok) 42%, var(--panel-line));
  color: var(--ok-texto);
  background: color-mix(in srgb, var(--ok) 7%, var(--panel-superficie));
}
body[data-page="index"] .ftl-del-btn{ min-width: 40px; }

/* =============================================================================
   TURNOS — una lectura principal y el detalle bajo demanda
   ========================================================================== */
body[data-page="index"] #turnos .tur-kpis{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}
body[data-page="index"] #turnos .tur-fold{
  margin: 12px 0;
  overflow: clip;
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  background: var(--panel-superficie);
  box-shadow: 0 12px 30px -28px color-mix(in srgb, var(--panel-chrome) 38%, transparent);
}
body[data-page="index"] #turnos .tur-fold > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
}
body[data-page="index"] #turnos .tur-fold > summary::-webkit-details-marker{ display: none; }
body[data-page="index"] #turnos .tur-fold > summary > span{ display: grid; gap: 2px; }
body[data-page="index"] #turnos .tur-fold > summary b{ color: var(--text); font-size: .88rem; }
body[data-page="index"] #turnos .tur-fold > summary small{ color: var(--text3); font-size: .7rem; font-weight: 500; }
body[data-page="index"] #turnos .tur-fold > summary > strong{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--panel-lienzo);
  color: var(--text2);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}
body[data-page="index"] #turnos .tur-fold > summary::after{
  content: '+';
  color: var(--text3);
  font-size: 1.05rem;
}
body[data-page="index"] #turnos .tur-fold[open] > summary::after{ content: '−'; }
body[data-page="index"] #turnos .tur-fold[open] > summary{ border-bottom: 1px solid var(--panel-line); }
body[data-page="index"] #turnos .tur-fold-body{ padding: 14px 16px 16px; }
body[data-page="index"] #turnos .tur-table-wrap{ overflow: auto; }
body[data-page="index"] #turnos .tur-fold-body > .card{
  margin-top: 12px;
  border-color: var(--panel-line);
  box-shadow: none;
}
body[data-page="index"] #turnos .tur-alta{ padding: 4px 0 14px; }
body[data-page="index"] #turnos .tur-alta h3{ margin: 0 0 10px; font-size: .9rem; }
body[data-page="index"] #turnos .tur-calor{ margin-bottom: 12px; }
body[data-page="index"] #turnos .tur-prioridades{ margin-bottom: 12px; }

@media (max-width: 900px){
  body[data-page="index"] #turnos .tur-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px){
  body[data-page="index"] .inv-dia-query{ padding: 14px; }
  body[data-page="index"] .inv-dia-query-head{ align-items: flex-start; flex-direction: column; gap: 8px; }
  body[data-page="index"] .inv-dia-query-state{ text-align: left; }
  body[data-page="index"] .inv-dia-query .inv-filter-row{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  body[data-page="index"] .inv-dia-query .inv-filter-chip{ flex: 0 0 auto; min-height: 44px; }
  body[data-page="index"] .inv-dia-query .inv-hora-top{ grid-template-columns: auto auto; }
  body[data-page="index"] .inv-dia-query .inv-hora-top strong{ grid-column: 1 / -1; }
  body[data-page="index"] .ftl-head-actions > *{ width: 100%; justify-content: center; }
  body[data-page="index"] .ftl-edit-input{ min-width: 112px; }
  body[data-page="index"] #turnos .tur-kpis{ grid-template-columns: 1fr 1fr; }
  body[data-page="index"] #turnos .tur-fold > summary{ min-height: 64px; padding: 10px 12px; }
  body[data-page="index"] #turnos .tur-fold > summary > strong{ display: none; }
  body[data-page="index"] #turnos .tur-fold-body{ padding: 10px 12px 12px; }
}

/* =============================================================================
   CAPA OPERATIVA · 01-SEP
   El panel es una mesa de control: la cabecera dice dónde estoy, el color se
   escoge junto a la bodega y las fichas separan persona, reloj y vestuario.
   Esta capa no cambia contratos ni datos; ordena la lectura de todas las vistas.
   ========================================================================== */
body[data-page="index"] .view > :is(.vh, .v2-intro){
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--p-line);
}
body[data-page="index"] .view > .vh .h1,
body[data-page="index"] .view > .v2-intro .h1{ max-width: 26ch; text-wrap: balance; }
body[data-page="index"] .view > .vh .sub,
body[data-page="index"] .view > .v2-intro .sub{ max-width: 72ch; text-wrap: pretty; }
body[data-page="index"] :is(.box, .card, .metric-card, .v2-surface, .client-card, .hor-card, .tur-card, .inv-color-card){
  box-shadow: 0 1px 1px color-mix(in srgb, var(--panel-chrome) 6%, transparent),
    0 14px 28px -26px color-mix(in srgb, var(--panel-chrome) 42%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body[data-page="index"] .view:focus{ outline: none; }
body[data-page="index"] #invConsultaBodega,
body[data-page="index"] #invVistaTallas{ scroll-margin-top: 28px; }

/* --- Ficha: el vestuario manda antes que el listado plano de datos ------- */
body[data-page="index"] .box-datos{ overflow: hidden; }
body[data-page="index"] .datos-box-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; }
body[data-page="index"] .datos-titulo-linea{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body[data-page="index"] .datos-titulo-linea .eyebrow,
body[data-page="index"] .datos-titulo-linea h3{ margin:0; }
body[data-page="index"] .datos-titulo-sep{ color:var(--p-ink-3); font-weight:850; }
body[data-page="index"] .datos-trajes-resumen{
  display:grid; grid-template-columns:minmax(138px,.9fr) minmax(230px,1.2fr); gap:1px;
  margin:0 0 12px; overflow:hidden; border:1px solid color-mix(in srgb, var(--p-coral) 22%, var(--p-line));
  border-radius:14px; background:color-mix(in srgb, var(--p-coral) 16%, var(--p-line));
}
/* Carlitos 02-sep: el resumen de trajes ocupaba demasiado alto y obligaba a
   bajar para ver los datos. Se compacta: menos alto mínimo, menos padding y
   el número grande más contenido. */
body[data-page="index"] .datos-total-trajes,
body[data-page="index"] .datos-genero{ display:grid; align-content:center; gap:2px; min-height:64px; padding:9px 14px; background:var(--p-surface); }
body[data-page="index"] .datos-total-trajes{ background:color-mix(in srgb, var(--p-coral) 10%, var(--p-surface)); }
body[data-page="index"] .datos-total-trajes span,
body[data-page="index"] .datos-genero span,
body[data-page="index"] .datos-grupo-label{ color:var(--p-ink-3); font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
body[data-page="index"] .datos-total-trajes strong{ color:var(--p-coral-ink); font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem); line-height:.92; letter-spacing:-.05em; }
body[data-page="index"] .datos-total-trajes small,
body[data-page="index"] .datos-genero small{ color:var(--p-ink-2); font-size:.72rem; }
body[data-page="index"] .datos-generos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; }
body[data-page="index"] .datos-genero strong{ color:var(--p-ink); font-size:1.25rem; line-height:1; letter-spacing:-.035em; }
body[data-page="index"] .datos-genero.mujer{ border-top:3px solid color-mix(in srgb, var(--p-coral) 70%, var(--p-surface)); }
body[data-page="index"] .datos-genero.hombre{ border-top:3px solid var(--ok); }
body[data-page="index"] .datos-grupo{ margin-top:17px; }
body[data-page="index"] .datos-grupo + .datos-grupo{ padding-top:17px; border-top:1px solid var(--p-line); }
body[data-page="index"] .datos-grupo-label{ display:block; margin:0 0 6px; }
body[data-page="index"] .box-datos .dl{ display:grid; grid-template-columns:minmax(132px,.7fr) minmax(0,1.3fr); align-items:center; gap:14px; min-height:42px; padding:8px 0; border-bottom-color:color-mix(in srgb, var(--p-line) 88%, transparent); }
/* Ficha mitad y mitad (Carlitos 01-sep 23:01): filas del MISMO alto en ambas
   columnas — las .dl normales comparten alto fijo y las .dl-paso comparten el
   suyo, asi izquierda y derecha quedan emparejadas sin escalones. */
body[data-page="index"] .datos-dos-col .datos-grupo .dl{ min-height:46px; }
body[data-page="index"] .datos-dos-col .datos-grupo .dl-paso{ min-height:64px; }
body[data-page="index"] .box-datos .dl .k{ color:var(--p-ink-2); font-size:.82rem; font-weight:650; }
body[data-page="index"] .box-datos .dl .v{ justify-self:end; text-align:right; color:var(--p-ink); font-weight:750; }
body[data-page="index"] .box-datos .dl-paso{ grid-template-columns:minmax(160px,.9fr) minmax(0,1.1fr); margin-top:5px; padding:10px 12px; border:0; border-left:3px solid var(--p-coral); background:color-mix(in srgb, var(--p-coral) 7%, var(--p-surface)); }
body[data-page="index"] .box-datos .dl-paso + .dl-paso{ border-left-color:color-mix(in srgb, var(--p-coral) 62%, var(--ok)); }
body[data-page="index"] .box-datos .dl-paso + .dl-paso + .dl-paso{ border-left-color:var(--ok); }
body[data-page="index"] .box-datos .dl-trajes-colores .v{ align-items:center; }

/* --- Herramientas de ficha: plegadas, compactas y solo con acciones ------- */
body[data-page="index"] details.ficha-extra{ margin-top:22px; overflow:hidden; border:1px solid var(--p-line); border-radius:14px; background:var(--p-surface); box-shadow:0 10px 26px -26px color-mix(in srgb, var(--panel-chrome) 56%, transparent); }
body[data-page="index"] details.ficha-extra > summary{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:54px; padding:0 16px; cursor:pointer; list-style:none; font-weight:800; }
body[data-page="index"] .ficha-extra-summary{ color:var(--p-ink-3); font-size:.76rem; font-weight:650; }
body[data-page="index"] .ficha-extra-body{ display:grid; gap:12px; padding:14px 16px 18px; border-top:1px solid var(--p-line); background:color-mix(in srgb, var(--p-surface-2) 44%, var(--p-surface)); }
body[data-page="index"] .ficha-extra-unit{ overflow:hidden; border:1px solid var(--p-line); border-radius:12px; background:var(--p-surface); }
body[data-page="index"] .ficha-extra-unit > summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:0 13px; cursor:pointer; font-weight:800; list-style:none; }
body[data-page="index"] .ficha-extra-unit > summary small{ color:var(--p-ink-3); font-size:.72rem; font-weight:650; }
body[data-page="index"] .ficha-extra-unit[open] > summary{ border-bottom:1px solid var(--p-line); background:var(--p-surface-2); }
body[data-page="index"] .ficha-extra-horario{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px; border:1px solid color-mix(in srgb, var(--p-coral) 28%, var(--p-line)); border-radius:12px; background:color-mix(in srgb, var(--p-coral) 7%, var(--p-surface)); }
body[data-page="index"] .ficha-extra-horario strong{ display:block; margin-top:3px; font-size:.86rem; }
body[data-page="index"] .ficha-online-card{ padding:14px; }
body[data-page="index"] .ficha-online-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
body[data-page="index"] .ficha-online-card-head h3{ margin:2px 0 0; }
body[data-page="index"] .ficha-online-card .act{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
body[data-page="index"] .ficha-online-card .act .btn:first-child{ grid-column:1 / -1; }
body[data-page="index"] .online-url{ margin-top:10px; border:1px solid var(--p-line); border-radius:10px; background:var(--p-surface-2); }
body[data-page="index"] .online-url summary{ padding:9px 10px; cursor:pointer; color:var(--p-ink-2); font-size:.78rem; font-weight:750; }
body[data-page="index"] .online-url > div{ padding:0 10px 10px; overflow-wrap:anywhere; color:var(--p-ink-2); font-size:.76rem; }
body[data-page="index"] .box-logistica{ margin:0; border-left:4px solid var(--p-coral); }

/* --- Disponibilidad: se elige la colección justo antes de su planilla ------ */
body[data-page="index"] .inv-color-bar{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px; padding:13px 0 2px; border-top:1px solid var(--p-line); }
body[data-page="index"] .inv-color-bar-label{ color:var(--p-ink-2); font-size:.72rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
body[data-page="index"] .inv-color-options{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
body[data-page="index"] .inv-color-choice{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 10px; border:1px solid var(--p-line); border-radius:10px; background:var(--p-surface-2); color:var(--p-ink-2); font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease; }
body[data-page="index"] .inv-color-choice i{ width:11px; height:11px; flex:0 0 11px; border:1px solid color-mix(in srgb, var(--panel-chrome) 20%, transparent); border-radius:50%; background:var(--inv-color); }
body[data-page="index"] .inv-color-choice:hover{ border-color:var(--inv-color); transform:translateY(-1px); }
body[data-page="index"] .inv-color-choice.active{ border-color:var(--inv-color); background:color-mix(in srgb, var(--inv-color) 12%, var(--p-surface)); color:var(--p-ink); box-shadow:inset 0 0 0 1px var(--inv-color); }
body[data-page="index"] .inv-color-choice:focus-visible{ outline:3px solid color-mix(in srgb, var(--inv-color) 48%, var(--p-coral)); outline-offset:2px; }

/* FICHA · carril de acceso rápido en el espacio libre del encabezado.
   No son pestañas falsas: llevan a los bloques reales de la ficha. */
body[data-page="index"] .view > .ficha-vh{
  align-items: flex-start;
  gap: clamp(18px, 4vw, 56px);
  margin-bottom: 0;
  padding-bottom: 10px;
}
body[data-page="index"] .ficha-vh-main{ min-width: 0; flex: 1 1 420px; }
/* El bloque .ficha-jump completo vive mas abajo, en la seccion del dock
   (pedido Carlitos 01-sep: dock fijo + selector negro). Una sola fuente. */

/* DOCK DEL SUBMENU (pedido Carlitos 01-sep 20:46): el "Ir a" de la ficha es
   una brujula. TRES estados (aclaracion Carlitos 01-sep noche):
   1. TOPE de la ficha: vive en su sitio del flujo, integrado bajo el
      encabezado — NO flota (flotando arriba se veia chueco, tapaba el nav).
   2. Bajando: se ESCONDE para no tapar contenido.
   3. Subiendo un poco, desde CUALQUIER punto (fondo incluido): aparece
      FLOTANTE fijo en pantalla (top 64px) para poder volver sin llegar al
      tope. Con sticky perdia el anclaje al final de pagina (top negativo);
      por eso el estado flotante es position:fixed, no sticky.
   La seccion donde uno esta queda marcada con SELECTOR NEGRO (relleno negro,
   letra blanca). Contorno GRUESO a pedido de Carlitos (01-sep): carril con
   borde 2px y el dock flotante lleva borde propio + sombra. */
body[data-page="index"] .ficha-jump-dock{
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 0 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--p-line);
  transition: opacity .22s ease;
}
/* Estado flotante: el JS lo activa al subir desde cualquier altura. */
body[data-page="index"] .ficha-jump-dock.is-flotando{
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: min(100% - 24px, 680px);
  margin: 0;
  padding: 6px 10px;
  border: 2px solid var(--p-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
  background: color-mix(in srgb, var(--panel-superficie) 96%, transparent);
  backdrop-filter: blur(8px);
}
body[data-page="index"] .ficha-jump-dock.is-hidden{
  transform: translateX(-50%) translateY(-84px);
  pointer-events: none;
  opacity: 0;
}
body[data-page="index"] .ficha-jump{
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  width: min(100%, 620px);
  margin: 0;
  padding: 7px;
  /* Contorno GRUESO (Carlitos 01-sep): borde 2px en vez de 1px. */
  border: 2px solid color-mix(in srgb, var(--p-ink) 26%, var(--p-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--p-surface-2) 64%, var(--p-surface));
}
body[data-page="index"] .ficha-jump .ficha-jump-label{
  padding: 0 6px;
  color: var(--p-ink-3);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-page="index"] .ficha-jump button{
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--p-ink-2);
  font: inherit;
  /* Carlitos, 04-sep: «agrándalo solo un chin, las letras más que nada, el
     cuadrado está bien» -sube la letra, el botón queda del mismo tamaño. */
  font-size: .8rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
/* Check de estado del submenú (Carlitos 02-sep): ✓ listo, ⚠ falta algo, ✕ nada.
   Chiquito, al lado del título, sin robar protagonismo. */
body[data-page="index"] .ficha-jump .ficha-jump-check{
  display: inline-block;
  margin-left: 5px;
  font-size: .66rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: 1px;
}
body[data-page="index"] .ficha-jump .ficha-jump-check.ok{ color: #15803d; }
body[data-page="index"] .ficha-jump .ficha-jump-check.warn{ color: #b45309; }
body[data-page="index"] .ficha-jump .ficha-jump-check.no{ color: #b91c1c; }
/* Sobre el botón activo (negro), el check se aclara para que se lea. */
body[data-page="index"] .ficha-jump button.active .ficha-jump-check.ok{ color: #86efac; }
body[data-page="index"] .ficha-jump button.active .ficha-jump-check.warn{ color: #fcd34d; }
body[data-page="index"] .ficha-jump button.active .ficha-jump-check.no{ color: #fca5a5; }
/* EL SELECTOR NEGRO: la seccion activa va rellena de negro con letra blanca.
   Es estado, no decoracion: dice donde estas parado sin leer nada. */
body[data-page="index"] .ficha-jump button.active{
  background: var(--negro, #111);
  color: #fff;
  border-color: var(--negro, #111);
}
body[data-page="index"] .ficha-jump button:hover{
  border-color: color-mix(in srgb, var(--p-coral) 26%, var(--p-line));
  background: color-mix(in srgb, var(--p-coral) 8%, var(--p-surface));
  color: var(--p-ink);
  transform: translateY(-1px);
}
body[data-page="index"] .ficha-jump button.active:hover{
  background: var(--negro, #111);
  color: #fff;
}

/* PREVISUALIZACION DE ARRIENDOS (pedido Carlitos 01-sep, retomado de Codex):
   la tabla de la lista lleva SOLO documentos y pagos. Estados breves en chips
   que se pueden leer sin depender del color. */
body[data-page="index"] .rent-table-operativa{ min-width: 860px; }
body[data-page="index"] .rent-table-operativa td{ padding-block: 12px; }

/* Orden visual por día: modo explícito, reversible y separado de la ficha. */
body[data-page="index"] .rent-order-entry{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-direction:column;
}
body[data-page="index"] .rent-order-entry p{ margin:0; }
body[data-page="index"] .rent-order-entry .btn{ white-space:nowrap; }
body[data-page="index"] .rent-filters[inert],
body[data-page="index"] .mobile-filter[inert]{
  opacity:.58;
  filter:saturate(.65);
}
body[data-page="index"] .rent-order-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 12px;
  padding:14px 16px;
  border:2px solid #111;
  border-radius:16px;
  background:#fff8f2;
  box-shadow:0 8px 24px rgba(38,22,12,.08);
}
body[data-page="index"] .rent-order-toolbar > div:first-child{
  display:grid;
  gap:3px;
}
body[data-page="index"] .rent-order-toolbar strong{
  color:#151515;
  font-size:15px;
}
body[data-page="index"] .rent-order-toolbar span{
  color:#5f5b57;
  font-size:13px;
}
body[data-page="index"] .rent-order-toolbar > div:last-child{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
body[data-page="index"] .rent-table.is-reordering tbody tr{
  cursor:default;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
body[data-page="index"] .rent-table.is-reordering tbody tr:hover{
  filter:none;
}
body[data-page="index"] .rent-order-column{
  width:58px;
  min-width:58px;
  padding-inline:10px !important;
  text-align:center;
}
body[data-page="index"] .rent-order-handle{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #c8c4bf;
  border-radius:11px;
  background:#fff;
  color:#2b2927;
  font:900 20px/1 system-ui,sans-serif;
  letter-spacing:0;
  cursor:grab;
  touch-action:none;
  box-shadow:0 2px 7px rgba(27,22,18,.08);
}
body[data-page="index"] .rent-order-handle:hover{
  border-color:#ff6b12;
  color:#b44200;
  transform:translateY(-1px);
}
body[data-page="index"] .rent-order-handle:focus-visible{
  outline:3px solid rgba(255,107,18,.28);
  outline-offset:2px;
  border-color:#ff6b12;
}
body[data-page="index"] .rent-order-handle:active{ cursor:grabbing; }
body[data-page="index"] .rent-order-dragging{
  opacity:.38;
  box-shadow:0 12px 26px rgba(22,18,14,.16);
}
body[data-page="index"] .rent-order-before{ box-shadow:inset 0 4px 0 #ff6b12; }
body[data-page="index"] .rent-order-after{ box-shadow:inset 0 -4px 0 #ff6b12; }
body[data-page="index"] .rent-order-edit-mobile{
  width:100%;
  margin:0 0 10px;
}
body[data-page="index"] .mobile-rent-order{
  position:relative;
  display:block;
  width:100%;
}
body[data-page="index"] .mobile-rent-order-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  padding:0 0 9px;
  border-bottom:1px solid rgba(30,25,20,.12);
  color:#68635e;
  font-size:12px;
}

@media (max-width:760px){
  body[data-page="index"] .rent-order-toolbar{
    align-items:stretch;
    flex-direction:column;
    margin:0 0 10px;
    padding:13px;
  }
  body[data-page="index"] .rent-order-toolbar > div:last-child{ width:100%; }
  body[data-page="index"] .rent-order-toolbar .btn{ flex:1; }
  body[data-page="index"] .rent-order-entry{ align-items:stretch; }
}
body[data-page="index"] .rent-doc-summary,
body[data-page="index"] .rent-payment-state{
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
}
body[data-page="index"] .rent-doc-summary.ok,
body[data-page="index"] .rent-payment-state.ok{
  border-color: color-mix(in srgb, var(--ok) 34%, var(--p-line));
  background: color-mix(in srgb, var(--ok) 10%, var(--p-surface));
  color: var(--ok-texto, var(--ok));
}
body[data-page="index"] .rent-doc-summary.pending,
body[data-page="index"] .rent-payment-state.pending{
  border-color: color-mix(in srgb, var(--p-coral) 34%, var(--p-line));
  background: color-mix(in srgb, var(--p-coral) 9%, var(--p-surface));
  color: var(--p-ink-2);
}
body[data-page="index"] .rent-payment-summary{ display: grid; gap: 5px; justify-items: start; }
body[data-page="index"] .ficha-jump button:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--p-coral) 42%, transparent);
  outline-offset: 2px;
}
/* Los anclas necesitan margen para no quedar tapadas bajo el dock fijo. */
body[data-page="index"] :is(#fichaDocumentos,#fichaPedido,#fichaDinero,#fichaTallaje,#fichaHerramientas){ scroll-margin-top: 144px; }

/* ARRIENDOS · la lista es el foco. Día y filtros son una bandeja de consulta,
   no cinco tarjetas que obligan a bajar antes de ver el primer colegio. */
body[data-page="index"] #arriendos .v2-intro{
  margin-bottom: 14px;
  padding-bottom: 14px;
}
body[data-page="index"] #arriendos .v2-intro .sub{
  margin-top: 4px;
  line-height: 1.4;
}
body[data-page="index"] #arriendos .doc-tablon{
  margin-bottom: 10px;
  padding: 0 13px;
  border-radius: 14px;
  box-shadow: none;
}
body[data-page="index"] #arriendos .doc-tablon summary{
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 0;
  font-size: .86rem;
}
body[data-page="index"] #arriendos .rent-dias{
  gap: 7px;
  padding: 2px 1px 8px;
}
body[data-page="index"] #arriendos .rent-dias > .rd{
  min-width: 96px;
  min-height: 50px;
  padding: 7px 12px;
  border-radius: 10px;
}
body[data-page="index"] #arriendos .rent-dias > .rd b{ font-size: .89rem; }
body[data-page="index"] #arriendos .rent-dias > .rd span{ font-size: .68rem; }
body[data-page="index"] #arriendos .rent-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 9px;
  margin-bottom: 12px;
  padding: 12px;
}
body[data-page="index"] #arriendos .rent-filters > .rent-filter:not(.rent-deuda){
  flex: 1 1 165px;
}
body[data-page="index"] #arriendos .rent-deuda{
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  gap: 6px;
}
body[data-page="index"] #arriendos .rent-deuda .rd{
  min-height: 42px;
  padding-inline: 12px;
}
body[data-page="index"] #arriendos .rent-filters > .btn{
  flex: 0 0 auto;
  min-height: 42px;
  padding-inline: 14px;
}

@media (max-width:980px){
  body[data-page="index"] .ficha-vh{ flex-direction: column; gap: 12px; }
  body[data-page="index"] .ficha-vh-main{ width: 100%; }
  body[data-page="index"] .ficha-jump{ width: 100%; }
  body[data-page="index"] #arriendos .rent-deuda{ flex-basis: 100%; }
}

@media (max-width:720px){
  body[data-page="index"] .view > :is(.vh,.v2-intro){ margin-bottom:18px; padding-bottom:15px; }
  body[data-page="index"] .view > .ficha-vh{ margin-bottom:0; padding-bottom:10px; }
  body[data-page="index"] .datos-trajes-resumen{ grid-template-columns:1fr; }
  body[data-page="index"] .datos-total-trajes{ min-height:60px; }
  body[data-page="index"] .box-datos .dl{ grid-template-columns:minmax(105px,.82fr) minmax(0,1.18fr); gap:10px; }
  body[data-page="index"] .box-datos .dl .v{ overflow-wrap:anywhere; }
  body[data-page="index"] .ficha-extra-summary{ display:none; }
  body[data-page="index"] .ficha-extra-horario{ align-items:stretch; flex-direction:column; }
  body[data-page="index"] .ficha-online-card .act{ grid-template-columns:1fr; }
  body[data-page="index"] .ficha-online-card .act .btn{ grid-column:auto; }
  body[data-page="index"] .inv-color-bar{ grid-template-columns:1fr; gap:8px; }
  body[data-page="index"] .inv-color-options{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="index"] .ficha-vh{ flex-direction: column; gap: 12px; }
  body[data-page="index"] .ficha-vh-main{ width: 100%; }
  body[data-page="index"] .ficha-jump{ width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); }
  body[data-page="index"] .ficha-jump-label{ display: none; }
  body[data-page="index"] .ficha-jump-dock{ top: 64px; padding: 4px 0; }
  body[data-page="index"] .ficha-jump button{ min-height: 42px; padding: 7px 5px; font-size: .7rem; }
  body[data-page="index"] #arriendos .rent-filters{ padding: 10px; }
  body[data-page="index"] #arriendos .rent-deuda{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  body[data-page="index"] #arriendos .rent-deuda .rd{ min-width: 0; padding-inline: 7px; white-space: normal; }
  body[data-page="index"] #arriendos .rent-filters > .btn{ width: 100%; }
}

/* =============================================================================
   EL PANEL EN UN TELÉFONO
   -----------------------------------------------------------------------------
   El panel se diseñó en escritorio y ahí se ve bien. En 390px nadie lo había
   mirado. Lo que sigue arregla, pestaña por pestaña, lo que una pantalla chica
   rompe: cajas que no encogen, texto que no se lee y controles que no se
   aciertan con el dedo.

   Va al final del archivo a propósito: así gana por orden a las reglas de
   escritorio sin tener que subir la especificidad ni usar !important.

   Se revisa con `node scripts/qa_movil_panel.mjs`, que no necesita la clave.
   ========================================================================== */
@media (max-width: 640px){

  /* ---- 1. Cajas que se niegan a encoger -----------------------------------
     Un hijo de grid o de flex trae `min-width:auto`: no baja de su contenido,
     y en vez de apretarse empuja la página hacia el lado. Es el motivo por el
     que el calendario de Recepción salía 398px en una pantalla de 390. */
  .rn-cols > *,
  .ini-grid > *,
  .fin-grid > *,
  .tur-alta-form > *,
  .v2-surface > *{ min-width: 0; }

  /* El calendario del mes: siete columnas tienen que caber sí o sí. Se baja el
     alto mínimo del día para que la celda pueda angostarse; sigue sobre los
     44px de zona tocable porque el día es cuadrado y el ancho manda. */
  .rn-cal{ padding: 10px; }
  .rn-cal-dia,
  .rn-cal-hueco{ min-height: 38px; }
  /* 4px, no 2: con 2 las celdas quedaban pegadas y con el pulgar se abre el
     dia de al lado. Sigue cabiendo porque la celda bajo a 38px de alto. */
  .rn-cal-grid{ gap: 8px; }
  .rn-cal-dow{ font-size: .7rem; }

  /* ---- 2. Texto que no se lee ---------------------------------------------
     Bajo 12px el ojo se cansa; y un input bajo 16px hace que iOS agrande la
     página sola al tocarlo, y después queda corrida.

     Los selectores van CALIFICADOS igual que los de arriba en el archivo. Sin
     eso pierden: `body[data-page="index"] .mobile-session-exit` gana por
     especificidad aunque venga antes, y el texto se quedaba en 11.2px. */
  body[data-page="index"] .mobile-session-exit{ font-size: .78rem; }
  /* La barra de abajo es la excepcion al piso de 12px, y a proposito: a 12px
   «Arriendos» y «Recepcion» dejaban de caber en su columna y salian como
   «Arrien...» y «Recep...», que es peor que una letra mas chica. Una etiqueta
   de pestana no se lee sola: va debajo de un icono y el icono ya dice cual es.
   iOS usa 10px en la suya; aca quedan 11.5px. */
html body[data-page="index"] .mobile-nav .mn-t{ font-size: .7rem; letter-spacing: -.02em; }
  body[data-page="index"] .ini-documento-tipo{ font-size: .75rem; }
  body[data-page="index"] :is(input, select, textarea){ font-size: 16px; }

  /* ---- 3. Controles que no se aciertan con el dedo -------------------------
     44px es la medida de una yema. Debajo de eso se falla el toque y se abre
     otra cosa -- que en este panel puede ser generar un documento. */
  body[data-page="index"] :is(.cal-nav, .rn-cal-top .btn, .rn-form-pie .btn,
    .tur-dia-btn, .ag-dia-btn, .btn.sm){ min-height: 44px; min-width: 44px; }
  /* Las flechas ‹ › del mes eran 32x44 y 37x44: alto bien, ancho no. Un dedo
     necesita las dos medidas. */
  body[data-page="index"] .rn-cal-top button,
  body[data-page="index"] .cal-nav{ min-width: 44px; }

  /* ---- 4. Amontonamiento ---------------------------------------------------
     Dos botones a menos de 8px se tocan juntos. Con el pulgar, uno u otro. */
  .rn-form-pie,
  .doc-envio,
  .cp-prueba-opts,
  .col-sel{ gap: 8px; }

  /* Los rotulos chicos: eyebrow, dias de la semana, titulos de mapa. En
     escritorio 10.6px se leen porque la pantalla esta a 60cm; el telefono se
     mira a 30cm y con la mano en movimiento. 12px es el piso. */
  body[data-page="index"] :is(.eyebrow, .rn-cal-dow, .inv-mapa-titulo,
    .ftl-count, .dl-ojo, .ini-kpi-lbl, .fp-hm){ font-size: .75rem; }

  /* Cualquier cosa que se toque y sea una fila entera: alto de dedo. La ficha
     mini de Recepcion salia de 33px de alto y es un enlace a la ficha. */
  body[data-page="index"] :is(.rcp-mini, .ag-card, .flujo-card,
    [onclick]:not(span):not(i)){ min-height: 44px; }

  /* Amontonamiento: los dias del selector de fecha y los pares de botones que
     quedaban a 2 y 5px. Con el pulgar eso es un solo blanco. */
  body[data-page="index"] :is(.tur-dias, .ag-dias, .inv-dias,
    .rn-cal-top, .doc-envio, .fp-dos-col){ gap: 8px; }

  /* ---- El piso de 12px, completo ------------------------------------------
     La lista sale de la sonda, no de la intuicion: son las clases que median
     entre 10.2 y 11.7px con el telefono en la mano. No se escala la raiz porque
     el mas chico esta en 10.2 y subir la raiz lo suficiente (+18%) volveria a
     desbordar las tablas que recien entraron.

     `.75rem` = 12px exactos con la raiz en 16. Es el piso, no una preferencia. */
  body[data-page="index"] :is(
    .mn-t, .inv-mapa-dia, .cal-dow, .fd-tipo, .fd-kpi-alerta, .fd-alerta-chip,
    .tur-mobile-type, .tur-mobile-balance,
    .mobile-rent-number, .mobile-rent-meta, .mobile-list-count,
    .mobile-balance, .mobile-ready,
    .retiro, .presentacion, .devolucion
  ){ font-size: .75rem; }

  /* Los sueltos: `small`, `time` y los `span` sin clase dentro de tarjetas y
     tablas. Se acotan a sus contenedores para no tocar el resto del panel. */
  body[data-page="index"] :is(small, time){ font-size: .75rem; }
  body[data-page="index"] :is(.card, .box, .v2-surface, .mobile-rent,
    .tur-mobile, .fd-card, .ini-kpi) span:not([class]){ font-size: .75rem; }
  body[data-page="index"] label{ font-size: .78rem; }

  /* ---- Las dos que estan declaradas para TODOS los anchos ------------------
     `.fd-kpis span` y `.inv-color-bar-label` fijan su tamano fuera de cualquier
     media query. No se tocan alla: en escritorio se ven bien y esa pantalla ya
     esta dada por buena. Se pisan aca, y solo aca. */
  body[data-page="index"] .fd-kpis span,
  body[data-page="index"] .inv-color-bar-label{ font-size: .75rem; }

  /* ---- Tiras de chips y flechas -------------------------------------------
     Los selectores de dia y las pestanas de filtro quedaban a 6 y 7px. Con el
     pulgar eso es un solo blanco: se toca «vie 4 sep» y se abre «sab 5 sep».
     8px es la separacion minima para que sean dos objetivos distintos. */
  body[data-page="index"] :is(.fd-dias, .fd-tabs, .ag-tabs, .tur-tabs,
    .tur-filtros, .inv-mapa, .inv-mapa-fila, .chips, .tabs){ gap: 8px; }

  /* Y lo mismo para cualquier fila de botones hermanos que el navegador arme
     con flex: se los separa por el contenedor, no botón por botón. */
  body[data-page="index"] .view :is(nav, .filtros, .barra-chips){ gap: 8px; }

  /* Las flechas de navegar arriendo median 40x44: el alto estaba, el ancho no. */
  body[data-page="index"] .view button{ min-width: 44px; }

  /* Los nombres reales de las tiras, sacados del DOM y no adivinados: eran
     `fd-navegacion`, `cal-modos`, `tur-mobile-days` e `inv-mapa-dias`, con
     gaps de 4, 6, 7 y 5px. Con el pulgar, cualquiera de esos es un solo
     objetivo: se toca un dia y se abre el de al lado. */
  body[data-page="index"] :is(.fd-navegacion, .cal-modos,
    .tur-mobile-days, .inv-mapa-dias){ gap: 8px; }

  /* ---- La barra de pestanas: que las palabras quepan enteras ---------------
     «Arriendos» y «Recepcion» salian como «Arrien...» y «Recep...», y ya salian
     asi ANTES de tocar nada: faltaban 5px por columna. En vez de achicar la
     letra -que ya esta en el minimo de una tab bar- se le devuelve el ancho que
     se estaba gastando en margenes, separacion y relleno lateral. Son 5px que
     no hacian falta y una palabra completa que si. */
  /* Ocho items NO caben en un telefono. Exprimiendo letra y margenes se
     llego a 45px por columna -por debajo de los 44px comodos una vez que se
     descuenta el gap- y aun asi «Arriendos» y «Recepcion» salian cortados:
     medido en 375px, que es lo que usa Carlitos. En vez de seguir achicando,
     la barra se desliza: cada item recupera ancho de sobra, la palabra entra
     entera y el dedo acierta. El activo se trae solo a la vista. */
  body[data-page="index"] .mobile-nav{
    left: 4px; right: 4px;
    padding: 5px 4px;
    display: flex;
    gap: 2px;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body[data-page="index"] .mobile-nav::-webkit-scrollbar{ display: none; }
  body[data-page="index"] .mobile-nav :is(a, .mn-more){
    flex: 0 0 auto;
    min-width: 66px;
    padding-inline: 6px;
    scroll-snap-align: center;
  }
  body[data-page="index"] .mobile-nav .mn-t{
    font-size: .72rem;
    letter-spacing: 0;
    max-width: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}

/* =============================================================================
   IMPRIMIR TODO EL DÍA DE UNA
   Un archivo por tipo con todas las hojas del día, cada colegio en la suya.
   ========================================================================== */
.ini-lote{
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--panel-superficie);
}
.ini-lote-fila{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ini-lote-fila label{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text2);
}
.ini-lote-fila input[type="date"]{
  padding: 9px 11px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-fondo);
  color: var(--text);
}
/* Cuántos colegios entran en el archivo: se ve ANTES de mandar a imprimir, que
   es cuando todavía se puede corregir el día. */
.ini-lote-cuenta{
  margin-right: auto;
  padding: 5px 11px;
  font-size: .82rem;
  font-weight: 800;
  border-radius: 999px;
  background: var(--soft);
  color: var(--text);
}
@media (max-width: 640px){
  .ini-lote-fila{ gap: 8px; }
  .ini-lote-fila .btn{ flex: 1 1 100%; min-height: 44px; }
  .ini-lote-cuenta{ margin-right: 0; }
}

/* Los dias de la temporada, listos para imprimir. Uno por fila: se ve de un
   vistazo cual toca y cuanto trae, sin tener que buscar la fecha. */
.lote-dias{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lote-dia{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-fondo);
}
.lote-dia-que{ display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.lote-dia-que b{ font-size: .92rem; text-transform: capitalize; }
.lote-dia-que small{ font-size: .78rem; color: var(--text2); }
/* El proximo dia con arriendos va marcado: es el que se imprime nueve de cada
   diez veces, y asi no hay que leer la lista entera para encontrarlo. */
.lote-dia.proximo{ border-color: var(--naranja); box-shadow: inset 0 0 0 1px var(--naranja); }
/* Los dias que ya pasaron no se listan (Carlitos 16-sep: «en vez de mostrar
   la lista de dias que ya no nos sirven, muestrame lo que si»). Para
   reimprimir uno viejo esta el selector «Otro dia». */
.lote-dia-acciones{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lote-pasados{ margin-top: 8px; color: var(--text2); font-size: .8rem; }
.ini-lote-fila{ flex-wrap: wrap; }
.lote-estado{
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--soft);
  font-size: .85rem;
  font-weight: 700;
}
.lote-vacio{ margin-top: 12px; color: var(--text2); font-size: .88rem; }
@media (max-width: 640px){
  .lote-dia{ flex-wrap: wrap; gap: 8px; }
  .lote-dia-que{ flex: 1 1 100%; margin-right: 0; }
  .lote-dia-acciones{ flex: 1 1 100%; }
  .lote-dia .btn{ flex: 1 1 auto; min-height: 44px; }
}

/* -----------------------------------------------------------------------------
   ELEGIR COLEGIOS ANTES DE IMPRIMIR

   Carlitos, 04-sep: la impresora a veces se atasca y no quiere verse obligado
   a mandar el dia entero de nuevo por un colegio que fallo. El panel se abre
   DENTRO de la fila del dia -no en un modal aparte- para no perder de vista
   cuantos colegios y trajes trae ese dia mientras se elige.
--------------------------------------------------------------------------- */
.lote-dia .btn.activo{ border-color: var(--naranja); color: var(--naranja); }
.lote-picker{
  flex: 1 1 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  background: var(--soft);
}
.lote-picker-vacio{ margin: 0; font-size: .85rem; color: var(--text2); }
.lote-picker-barra{ display: flex; gap: 8px; margin-bottom: 8px; }
.lote-picker-lista{
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}
.lote-picker-fila{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.lote-picker-fila:hover{ background: var(--panel-fondo); }
.lote-picker-fila input{ flex: none; width: 17px; height: 17px; accent-color: var(--naranja); }
.lote-picker-fila span{ display: flex; flex-direction: column; min-width: 0; }
.lote-picker-fila b{ font-size: .86rem; }
.lote-picker-fila small{ font-size: .76rem; color: var(--text2); }
/* Un colegio destildado se ve apagado en su propia fila -la misma senal que
   ya usa `.lote-dia.pasado` para "esto no va esta vez". */
.lote-picker-fila:has(input:not(:checked)){ opacity: .5; }

/* ---------------------------------------------------------------------------
   EL PANEL UNIFICADO DE IMPRESION -Carlitos, 04-sep-2026-
   «prefiero que en vez de tantos botones... ponga ahi ver imprimir solamente,
   y dentro de la previsualizacion el filtro para seleccionar lo que quiero
   imprimir, cuantas copias, y los colegios». Mismo tratamiento visual que
   `.doc-prev` (el visor de un documento), una sola tarjeta en vez del panel
   de dos columnas -acá no hay nada que previsualizar todavía, solo elegir-.
--------------------------------------------------------------------------- */
.lote-modal-ov{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.lote-modal-card{
  display: flex;
  flex-direction: column;
  width: min(560px, 96vw);
  max-height: min(88vh, 900px);
  background: var(--panel-superficie, #141414);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.lote-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.lote-modal-head strong{ font-size: .95rem; }
.lote-modal-body{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lote-modal-sec h4{ margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); }
.lote-modal-tipo{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.lote-modal-tipo:last-child{ border-bottom: 0; }
.lote-modal-tipo input[type="checkbox"]{ flex: none; width: 18px; height: 18px; accent-color: var(--naranja); }
.lote-modal-tipo-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lote-modal-tipo-txt b{ font-size: .87rem; }
.lote-modal-tipo-txt small{ font-size: .75rem; color: var(--text2); }
.lote-modal-copias{ flex: none; }
.lote-modal-copias label{ display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text2); }
.lote-modal-copias input{
  width: 46px;
  padding: 5px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-fondo);
  color: var(--text);
  font: inherit;
  text-align: center;
}
.lote-modal-copias input:disabled{ opacity: .4; }
.lote-modal-pie{
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
}
.lote-modal-pie .btn{ flex: 1; }
@media (max-width: 620px){
  .lote-modal-card{ width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; }
}

/* El filtro de movimientos del panel de impresión -Carlitos, 05-sep: «quise
   imprimir solo la devolución y se imprimieron las de devolución y retiro»-.
   Vive arriba de todo y dice en palabras qué va a salir. */
body[data-page="index"] .lote-modal-movs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body[data-page="index"] .lote-modal-movs .btn{ flex: 1 1 auto; }
body[data-page="index"] .lote-modal-resumen{
  margin: 10px 0 0;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--soft);
  color: var(--text2);
  font-size: .8rem;
  font-weight: 700;
}
body[data-page="index"] .lote-modal-resumen.vacio{
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

/* =============================================================================
   PEGAR LOS DATOS DE UNA VEZ (alta guiada)
   Escribir doce campos a mano es donde se perdia el alta: se cierra el modal
   por cualquier motivo y hay que empezar de nuevo.
   ========================================================================== */
body[data-page="index"] .alta-pegar{
  margin: 0 0 14px;
  border: 1px solid var(--panel-linea);
  border-radius: 12px;
  background: var(--panel-lienzo);
  padding: 10px 12px;
}
body[data-page="index"] .alta-pegar > summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  color: var(--panel-tinta-1);
}
body[data-page="index"] .alta-pegar > summary::-webkit-details-marker{ display: none; }
body[data-page="index"] .alta-pegar > summary span{
  font-size: .8rem;
  color: var(--panel-tinta-3);
}
body[data-page="index"] .alta-pegar-ayuda{
  margin: 2px 0 8px;
  color: var(--panel-tinta-2);
  font-size: .84rem;
  line-height: 1.5;
}
body[data-page="index"] .alta-entry-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
body[data-page="index"] .alta-entry-actions .btn{min-height: 44px;white-space: nowrap;}
@media (max-width: 640px){
  body[data-page="index"] .alta-entry-actions{width: 100%;display: grid;grid-template-columns: 1fr 1fr;}
  body[data-page="index"] .alta-entry-actions .btn{min-width: 0;white-space: normal;}
}
body[data-page="index"] .alta-pegar textarea{
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--panel-linea);
  border-radius: 10px;
  font: inherit;
  font-size: .92rem;
  line-height: 1.45;
  resize: vertical;
  background: var(--panel-chrome-t1);
  color: var(--panel-tinta-1);
}
body[data-page="index"] .alta-pegar-acciones{
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
body[data-page="index"] .alta-pegar-resultado:empty{ display: none; }
body[data-page="index"] .alta-pegar-resultado{ margin-top: 10px; font-size: .88rem; line-height: 1.5; }
body[data-page="index"] .alta-pegar-resultado .btn{margin-top: 8px;}
body[data-page="index"] .alta-pegar-ok{
  margin: 0 0 6px;
  color: var(--ok-texto, #0b6b32);
  font-weight: 700;
}
body[data-page="index"] .alta-pegar-detalle{
  margin: 0 0 6px;
  color: var(--panel-tinta-2);
}
body[data-page="index"] .alta-pegar-nota{
  margin: 0 0 6px;
  padding: 7px 10px;
  border-left: 3px solid var(--panel-linea);
  background: var(--panel-lienzo);
  color: var(--panel-tinta-2);
  border-radius: 4px;
}
body[data-page="index"] .alta-pegar-aviso{
  margin: 0 0 6px;
  padding: 7px 10px;
  border-left: 3px solid #d98324;
  background: #fff5eb;
  color: #a63c00;
  border-radius: 4px;
  font-weight: 600;
}
body[data-page="index"] .alta-pegar-sobra{
  margin: 0;
  color: var(--panel-tinta-3);
  font-size: .84rem;
}
/* Disponibilidad incompleta: los cursos sin tallaje no pueden desaparecer de
   una planilla que se usa para prometer stock. El aviso es compacto, pero no
   plegable: mientras falten tallas, la decisión sigue bloqueada. */
body[data-page="index"] .inv-pendientes-dia{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin:14px 0 18px;
  padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--naranja) 48%,var(--line));
  border-left:5px solid var(--naranja);
  border-radius:14px;
  background:color-mix(in srgb,var(--naranja) 8%,#fff);
  color:var(--text);
}
body[data-page="index"] .inv-pendientes-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--naranja);
  color:#111;
  font:950 1rem/1 var(--font);
}
body[data-page="index"] .inv-pendientes-dia strong{font-weight:900}
body[data-page="index"] .inv-pendientes-dia p{
  margin:3px 0 7px;
  color:var(--text2);
  font-size:.84rem;
  line-height:1.45;
}
body[data-page="index"] .inv-pendientes-dia ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.76rem;
}
body[data-page="index"] .inv-pendientes-dia li{color:var(--text2)}
@media (max-width:640px){
  body[data-page="index"] .inv-pendientes-dia{
    grid-template-columns:26px minmax(0,1fr);
    padding:12px;
  }
  body[data-page="index"] .inv-pendientes-icon{width:26px;height:26px}
  body[data-page="index"] .inv-pendientes-dia ul{display:grid;gap:5px}
}

/* Proceso completo (Carlitos 16-sep): una caja al tope de Dinero. Abierta
   invita a cerrar; cerrada lo confirma en verde y deja reabrir. */
.pc-caja{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px; padding: 10px 12px;
  border: 1px dashed var(--line-soft); border-radius: 12px;
  background: var(--panel-fondo);
}
.pc-caja.ok{ border-style: solid; border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--panel-fondo)); }
.pc-txt{ display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.pc-txt b{ font-size: .92rem; }
.pc-txt small{ font-size: .8rem; color: var(--text2); line-height: 1.35; }
.pc-caja .btn{ flex: 0 0 auto; }
@media (max-width: 640px){ .pc-caja .btn{ flex: 1 1 100%; min-height: 44px; } }

/* Cada mes por separado (Carlitos 16-sep). La barra va arriba de la franja
   de dias: el mes elegido en naranja, y a la derecha el acceso a los dias que
   ya pasaron, que por defecto no se muestran. */
.mes-barra{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; }
.mes-historial{ flex: 0 0 auto; }
.mes-historial summary{ cursor: pointer; padding: 12px; font-weight: 700; }
.mes-historial > .mes-lista{ flex-wrap: wrap; }
body[data-page="index"] .ed-eliminar{ color: #a22020; border: 1px solid #a22020; background: #fff; }
.papelera-dialog{ width: min(820px, calc(100vw - 32px)); max-height: 85dvh; border: 1px solid #ccc; border-radius: 16px; padding: 24px; color: #171717; background: white; }
.papelera-overlay{ position: fixed; inset: 0; z-index: 10000; background: rgb(0 0 0 / 45%); display: flex; justify-content: center; align-items: center; padding: 16px; }
.papelera-overlay[hidden]{ display: none; }
.papelera-dialog{ overflow: auto; box-sizing: border-box; }
.papelera-cabecera,.papelera-arriendo,.papelera-acciones{ display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.papelera-cabecera h2{ margin: 0; font-size: 1.35rem; }
.papelera-arriendo{ border-top: 1px solid #ddd; padding: 18px 0; }
.papelera-arriendo p{ margin: 6px 0 0; }
.papelera-acciones .btn{ min-height: 44px; }
body[data-page="index"] .nav .nav-papelera{
  display:flex; align-items:center; gap:11px; width:100%; min-height:46px;
  padding:11px 12px; border:1px solid transparent; border-radius:12px;
  font:inherit; font-size:.86rem; text-align:left;
  color:var(--panel-chrome-t1); background:transparent; cursor:pointer;
}
body[data-page="index"] .nav .nav-papelera:hover{ background:var(--panel-chrome-alt); }
body[data-page="index"] .nav-papelera:focus-visible{ outline:2px solid var(--naranja); outline-offset:2px; }
body[data-page="index"] .mobile-nav .nav-papelera{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:0 0 auto; min-width:76px; min-height:56px; gap:3px; padding:5px 6px;
  border:0; border-radius:14px; font:inherit; font-size:.72rem; font-weight:800;
  color:var(--panel-chrome-t1); background:transparent; cursor:pointer; scroll-snap-align:center;
}
.papelera-cabecera .btn{ min-height:44px; }
.papelera-dialog p,.papelera-arriendo strong{ overflow-wrap:anywhere; }
.papelera-dialog > p{ margin:16px 0; line-height:1.45; }
.papelera-arriendo p{ line-height:1.35; }
@media(max-width:600px){
  .papelera-dialog{ padding:20px; max-height:calc(100dvh - 32px); }
  .papelera-cabecera{ align-items:flex-start; }
  .papelera-cabecera .papelera-acciones{ width:100%; justify-content:flex-start; gap:12px; }
  .papelera-arriendo .papelera-acciones{ gap:12px; }
}
body[data-page="index"] .inv-excel-cole b{ display: block; }
body[data-page="index"] .inv-excel-cole small{ display: block; text-transform: none; font-size: 12px; line-height: 1.45; }
body[data-page="index"] .inv-excel-cole .inv-ventana{ margin-top: 6px; font-weight: 500; }
body[data-page="index"] .inv-momento{ display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 20px 0 12px; }
body[data-page="index"] .inv-momento label{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 700; }
body[data-page="index"] .inv-momento input{ padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; min-height: 44px; }
body[data-page="index"] .inv-momento > span, body[data-page="index"] .inv-actualizado{ color: var(--text2); font-size: .85rem; }
body[data-page="index"] .inv-franjas{ margin-top: 18px; }
body[data-page="index"] .inv-franjas summary{ font-weight: 700; padding-block: 12px; cursor: pointer; }
body[data-page="index"] .inv-franjas-lista{ display: flex; flex-wrap: wrap; gap: 10px; }
body[data-page="index"] .inv-franja{ display: grid; gap: 6px; padding: 12px 16px; min-height: 64px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; }
body[data-page="index"] .inv-franja.conflicto{ border-color: #ad2929; background: #fff3f3; color: #8c1d1d; }
body[data-page="index"] .inv-franja span{ font-size: .85rem; }
body[data-page="index"] .inv-incidencias{ margin-top: 18px; padding: 16px; border: 1px solid #aa4a00; border-radius: 10px; background: #fff6ed; color: #703000; }
body[data-page="index"] .inv-incidencias ul{ padding-left: 22px; margin: 12px 0 0; }
body[data-page="index"] .inv-incidencias li{ padding-block: 6px; }

/* Cobros en secuencia y cruces legibles, 01-oct. Mantener el aire del panel. */
body[data-page="index"] .pl-check-garantia{ flex-wrap: wrap; gap: 16px; }
body[data-page="index"] .pl-check-garantia label{ display:flex; align-items:center; gap:12px; margin-right:auto; min-height:44px; cursor:pointer; }
body[data-page="index"] .pl-check-garantia .v small{ color:var(--text2); font-weight:400; }
body[data-page="index"] .pl-resumen-cobros{ margin-top:24px; padding:16px 20px; border-radius:12px; background:var(--bg); }
body[data-page="index"] .pl-resumen-cobros .k small{ display:block; font-size:.8rem; color:var(--text2); margin-top:4px; }
body[data-page="index"] .pl-resumen-cobros .v{ font-variant-numeric:tabular-nums; }
body[data-page="index"] .pl-resumen-pendiente .v{ color:var(--naranja-ink); }
body[data-page="index"] .fp-eliminar{ margin-inline-end:8px; }
body[data-page="index"] .inv-horario-consulta{ margin-top:24px; }
body[data-page="index"] .inv-horario-resultado{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:12px; background:var(--ok-soft,#eaf5ee); color:var(--ok-texto,#126438); }
body[data-page="index"] .inv-horario-resultado.conflicto, body[data-page="index"] .inv-stock-talla.conflicto, body[data-page="index"] .inv-faltantes-claros{ background:#fff0ee; color:#8b2319; }
body[data-page="index"] .inv-horario-resultado.incierto{ background:#fff6ed; color:#703000; }
body[data-page="index"] .inv-horario-titulo{ margin:28px 0 8px; }
body[data-page="index"] .inv-horario-ayuda{ color:var(--text2); line-height:1.5; margin:8px 0 16px; }
body[data-page="index"] .inv-franjas-lista{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
body[data-page="index"] .inv-franja{ min-height:96px; text-align:left; padding:16px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:#fff; }
body[data-page="index"] .inv-franja strong{ color:var(--ok-texto,#126438); }
body[data-page="index"] .inv-franja.conflicto strong{ color:#8b2319; }
body[data-page="index"] .inv-franja.incierto strong{ color:#703000; }
body[data-page="index"] .inv-franja.selected{ outline:2px solid var(--text); outline-offset:2px; }
body[data-page="index"] .inv-franja:focus-visible, body[data-page="index"] .inv-tiempo-barra:focus-visible{ outline:3px solid var(--text); outline-offset:3px; }
body[data-page="index"] .inv-horario-detalle{ padding-top:16px; border-top:1px solid var(--line); }
body[data-page="index"] .inv-horario-detalle h3{ margin:8px 0 12px; }
body[data-page="index"] .inv-coinciden{ display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
body[data-page="index"] .inv-faltantes-claros{ margin:20px 0; padding:20px; border-radius:12px; }
body[data-page="index"] .inv-faltantes-claros ul{ margin:12px 0 0; padding-left:24px; }
body[data-page="index"] .inv-faltantes-claros li{ padding:8px 0; }
body[data-page="index"] .inv-faltantes-claros li span{ display:block; font-size:.85rem; margin-top:4px; }
body[data-page="index"] .inv-horario-ok{ color:var(--ok-texto,#126438); }
body[data-page="index"] .inv-stock-horario{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
body[data-page="index"] .inv-stock-prenda{ padding:20px; border:1px solid var(--line); border-radius:12px; background:#fff; }
body[data-page="index"] .inv-stock-prenda h4{ margin:0 0 8px; font-size:1.1rem; }
body[data-page="index"] .inv-stock-prenda > p{ color:var(--text2); font-size:.85rem; margin:0 0 16px; }
body[data-page="index"] .inv-stock-tallas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
body[data-page="index"] .inv-stock-talla{ display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--ok-soft,#eaf5ee); border-radius:8px; font-variant-numeric:tabular-nums; }
body[data-page="index"] .inv-stock-talla span{ font-size:.9rem; }
body[data-page="index"] .inv-linea-tiempo{ margin:28px 0 8px; }
body[data-page="index"] .inv-linea-tiempo summary, body[data-page="index"] .inv-planilla-detalle > summary{ min-height:44px; padding:12px 0; font-weight:700; cursor:pointer; }
body[data-page="index"] .inv-tiempo-scroll{ overflow-x:auto; max-width:100%; padding:12px 0; }
body[data-page="index"] .inv-tiempo-canvas{ min-width:760px; padding-right:28px; }
body[data-page="index"] .inv-tiempo-eje, body[data-page="index"] .inv-tiempo-fila{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:center; }
body[data-page="index"] .inv-tiempo-eje{ min-height:44px; color:var(--text2); font-size:.85rem; }
body[data-page="index"] .inv-tiempo-eje > div{ position:relative; height:24px; }
body[data-page="index"] .inv-tiempo-eje > div span{ position:absolute; transform:translateX(-50%); }
body[data-page="index"] .inv-tiempo-fila{ border-top:1px solid var(--line); min-height:72px; }
body[data-page="index"] .inv-tiempo-nombre{ background:none; border:0; text-align:left; padding:12px 0; min-height:44px; color:var(--text); cursor:pointer; }
body[data-page="index"] .inv-tiempo-nombre span{ display:block; color:var(--text2); font-size:.85rem; margin-top:4px; }
body[data-page="index"] .inv-tiempo-pista{ position:relative; height:48px; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),var(--line) calc(12.5% - 1px),var(--line) 12.5%); }
body[data-page="index"] .inv-tiempo-cruce{ position:absolute; inset-block:0; background:repeating-linear-gradient(135deg,#ffe0db 0px,#ffe0db 5px,#ffb8aa 5px,#ffb8aa 7px); }
body[data-page="index"] .inv-tiempo-barra{ position:absolute; top:8px; min-height:32px; overflow:hidden; white-space:nowrap; border:1px solid var(--text); border-radius:6px; background:var(--text); color:#fff; font:inherit; font-size:.8rem; cursor:pointer; }
body[data-page="index"] .inv-tiempo-pendiente{ font-size:.85rem; color:var(--text2); }
body[data-page="index"] .inv-planilla-detalle{ margin-top:24px; }
@media(max-width:700px){
  body[data-page="index"] .inv-stock-horario{ grid-template-columns:1fr; }
  body[data-page="index"] .inv-franjas-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="index"] .inv-franja{ padding:12px; }
  body[data-page="index"] .pl-resumen-cobros{ padding:12px; }
  body[data-page="index"] .pl-resumen-cobros .dl{ gap:12px; flex-wrap:wrap; }
}
body[data-page="index"] .inv-conflictos{ border-color: #ad2929; background: #fff3f3; color: #8c1d1d; }
body[data-page="index"] .inv-cole-link{ min-height:44px; text-decoration: underline; color: inherit; font-weight: 700; background: transparent; border: 0; cursor: pointer; padding: 6px; }
.rent-search-context{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;color:var(--panel-tinta-2);font-size:.86rem}
.rent-search-context .mes-pasados{margin:0}
.mes-lista{ display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; max-width: 100%; }
.mes-b{
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-soft); background: var(--panel-fondo); color: var(--text);
  font: inherit;
}
.mes-b b{ font-size: .88rem; }
.mes-b span{ font-size: .72rem; color: var(--text2); }
.mes-b.on{ border-color: var(--naranja); box-shadow: inset 0 0 0 1px var(--naranja); }
.mes-b:focus-visible, .mes-pasados:focus-visible{ outline: 2px solid var(--naranja); outline-offset: 2px; }
.mes-pasados{
  margin-left: auto; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .8rem; color: var(--text2); text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 640px){
  .mes-barra{ gap: 6px; }
  .mes-b{ min-height: 44px; justify-content: center; }
  .mes-pasados{ margin-left: 0; min-height: 44px; }
}

/* Finanzas del mes: cinco cifras en fila; en telefono, de a dos. */
.fin-mes .mes-barra{ margin-top: 0; }
.fin-mes-grid{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fin-mes-grid > div{
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel-fondo); min-width: 0;
}
.fin-mes-grid span{ font-size: .74rem; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.fin-mes-grid b{ font-size: 1.05rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fin-mes-grid small{ font-size: .74rem; color: var(--text2); }
.fin-mes-grid .fin-mes-debe{ color: var(--naranja-ink, var(--naranja)); }
.fin-temporada{ margin: 18px 0 6px; font-size: .74rem; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
@media (max-width: 900px){ .fin-mes-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
   Documentos como linea de tiempo (Carlitos 16-sep: «tan chiquita no se
   puede hacer na»). En escritorio es una hoja grande centrada sobre la ficha,
   con el resto oscurecido; en el telefono fluye dentro de la ficha. Los seis
   pasos en fila, unidos por una linea que se pone verde a medida que quedan
   listos; el paso elegido se abre debajo.
   ------------------------------------------------------------------------- */
/* Centrado con margin:auto y no con transform: la animacion de entrada de
   las .box (fiUp, fill both) deja transform:none encima y el panel quedaba
   corrido a la derecha, medio fuera de la pantalla. */
body[data-page="index"] .box-documentos.doc-linea{
  top: 76px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: min(1080px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 100px);
  padding: 18px 22px 22px;
  animation: none;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .04) !important;
}

.doc-linea .box-documentos-head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-cabeza{ display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.doc-cabeza h3{ margin: 0; font-size: 1.15rem; }
.doc-progreso{ font-size: .82rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.doc-cabeza-acciones{ display: flex; gap: 8px; align-items: center; }
.doc-cerrar{ min-width: 36px; font-size: 1rem; }

.doc-tl{
  list-style: none; margin: 18px 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.doc-paso{ position: relative; }
.doc-paso::before{
  content: ""; position: absolute; top: 31px; left: -50%; width: 100%; height: 3px;
  background: var(--line-soft); z-index: 0;
}
.doc-paso:first-child::before{ display: none; }
.doc-paso.is-listo::before{ background: var(--ok); }
.doc-paso > button{
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 4px 6px 12px; border: 0; border-radius: 14px; background: none;
  color: var(--text); font: inherit; text-align: center; cursor: pointer;
}
.doc-paso > button:hover .doc-nodo{ transform: translateY(-2px); }
.doc-paso > button:focus-visible{ outline: 2px solid var(--naranja); outline-offset: 2px; }
.doc-nodo{
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.45rem;
  background: var(--panel-superficie, var(--panel-fondo)); border: 3px solid var(--line-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.doc-paso b{ font-size: .88rem; line-height: 1.2; }
.doc-paso small{ font-size: .74rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.doc-estado{
  font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--soft); color: var(--text2);
}
.doc-paso.is-listo .doc-nodo{ border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel-superficie, var(--panel-fondo))); }
.doc-paso.is-listo .doc-estado{ color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.doc-paso.is-enviado .doc-nodo{ border-color: var(--naranja); }
.doc-paso.is-enviado .doc-estado{ color: var(--naranja-ink, var(--naranja)); background: color-mix(in srgb, var(--naranja) 12%, transparent); }
.doc-paso.on > button{ background: color-mix(in srgb, var(--naranja) 9%, transparent); }
.doc-paso.on .doc-nodo{ box-shadow: 0 0 0 5px color-mix(in srgb, var(--naranja) 30%, transparent); }
@media (prefers-reduced-motion: reduce){ .doc-nodo{ transition: none; } .doc-paso > button:hover .doc-nodo{ transform: none; } }

.doc-linea .doc-panel{ border: 1px solid var(--line-soft) !important; border-radius: 14px; padding: 14px 18px; }
.doc-linea .doc-panel:not(.on){ display: none; }
.doc-linea .doc-panel > summary{ pointer-events: none; font-size: 1rem; padding: 0 0 4px; }
.doc-linea .doc-panel > summary .fp-docseta{ display: none; }
.doc-que{ margin: 0 0 12px; font-size: .86rem; color: var(--text2); }
.doc-linea .doc-panel .fp-docacciones{ gap: 10px; padding: 0; }
.doc-linea .doc-panel .fp-docacciones > .btn{ min-height: 40px; padding-inline: 14px; }

@media (max-width: 760px){
  body[data-page="index"] .box-documentos.doc-linea{ margin: 10px 0 0 !important; width: 100% !important; padding: 14px; }
  /* En el telefono los seis pasos van en dos filas de a tres, todos a la
     vista: una cinta que se desliza escondia la mitad. */
  .doc-tl{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; }
  .doc-paso::before{ display: none; }
  .doc-nodo{ width: 46px; height: 46px; font-size: 1.2rem; }
  .doc-paso b{ font-size: .8rem; }
  .doc-linea .doc-panel{ padding: 12px; }
  .doc-linea .doc-panel .fp-docacciones > .btn{ flex: 1 1 calc(50% - 10px); min-height: 44px; }
}