/* ============================================================================
   EMPORIO IT — CENTRO DE MANDO · sistema de diseño
   ----------------------------------------------------------------------------
   Esta hoja viste SOLO el sistema interno (/app/). El sitio público de la raíz
   (css/emporio.css, clases .eg-*) no se toca: son dos pieles distintas del
   mismo negocio. Por eso todo acá lleva el prefijo .eit- y ningún selector
   global pisa etiquetas fuera de /app/ salvo el reset mínimo de esta página.

   POR QUÉ ESTA ESTÉTICA
   La portada es editorial de lujo (marfil, Cormorant, mucho aire). El sistema
   es la contracara OPERATIVA: blanco, negro, grises y densidad de datos. Lo
   único que se hereda de la marca es el gesto Armani — mayúsculas finas muy
   espaciadas y filetes de 1px — aplicado a las microetiquetas y a los títulos
   de sección. El color se reserva ÚNICAMENTE para estados: si algo está
   pintado, significa algo.

   DOS TIPOGRAFÍAS, CADA UNA EN SU PUESTO
   - Jost  → marca, títulos de sección y microetiquetas en MAYÚSCULA. Es una
             geométrica preciosa en grande y floja en chico.
   - Inter → absolutamente todo lo demás: tablas, datos, formularios, cuerpo.
             Acá hay cientos de filas de números y Inter está dibujada para eso.
   Las dos se cargan por Google Fonts desde el <head> de cada página (no se usa
   @import: bloquea el render y obliga a una ida y vuelta extra).

   PISOS DE CALIDAD QUE NO SE NEGOCIAN (los verifica un chequeo automático)
   - 11px es el piso absoluto de cualquier texto funcional. El cuerpo va 13-14.
   - Contraste AA real, calculado: 4.5:1 texto normal, 3:1 texto grande y
     bordes de controles. Cada color de texto de abajo tiene su ratio anotado.
   - 12px de padding mínimo en todo contenedor de bloque con borde o fondo.
   - Foco visible en todo lo tabulable y respeto por prefers-reduced-motion.
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================ */

:root{

  /* ---- Papel y superficies -------------------------------------------------
     Blanco puro para el lienzo (las tablas largas se leen mejor sobre #FFF) y
     un hueso apenas sucio para las superficies elevadas: separa sin dibujar
     una caja. El hueso tiene una pizca de amarillo para emparentarlo con el
     marfil del sitio público sin volverlo beige. */
  --eit-papel:        #FFFFFF;   /* fondo del contenido */
  --eit-superficie:   #FAFAF9;   /* tarjetas, cabeceras de tabla, lateral */
  --eit-superficie-2: #F2F1EE;   /* hover de fila, pista de progreso, chips */
  --eit-superficie-3: #EBE9E5;   /* esqueleto de carga, separadores gruesos */

  /* ---- Tinta ---------------------------------------------------------------
     Cuatro niveles, todos AA sobre blanco. El "deshabilitado" también pasa AA
     a propósito: un campo apagado se tiene que poder LEER, solo no se edita. */
  --eit-tinta:        #111111;   /* 18.9:1 — títulos, datos, botón primario */
  --eit-tinta-2:      #44403B;   /* 10.3:1 — cuerpo y celdas secundarias */
  --eit-tinta-3:      #5F5A54;   /*  6.8:1 — metadatos, microetiquetas, ayuda */
  --eit-tinta-4:      #6E6861;   /*  5.5:1 — placeholder y deshabilitado */
  --eit-tinta-inv:    #FFFFFF;   /* texto sobre negro */

  /* ---- Filetes -------------------------------------------------------------
     Dos pesos. El fino es decorativo (separa bloques). El fuerte es el que
     dibuja el CONTORNO DE UN CONTROL y por eso llega a 3.5:1: la norma pide
     3:1 para el borde de algo con lo que se interactúa. No los intercambies. */
  --eit-linea:        #E6E3DE;   /* 1.3:1 — separador decorativo */
  --eit-linea-2:      #D6D2CB;   /* separador marcado, cabecera de tabla */
  --eit-linea-fuerte: #8F887E;   /* 3.5:1 — borde de input, select, checkbox */

  /* ---- Estados -------------------------------------------------------------
     Tres tokens por estado porque cada uno tiene un trabajo distinto:
       -ink  → TEXTO. Pasa 4.5:1 sobre blanco y sobre su propio -suave.
       -marca→ PUNTO, TIRA, BARRA. Gráfico sin texto: le alcanza 3:1.
       -suave→ FONDO del chip. Casi blanco, apenas teñido.
     Si usás -marca para texto chico rompés AA. Si usás -ink para un punto se
     ve apagado. Están separados justamente para no tener que elegir mal. */
  --eit-ok-ink:        #15653C;  /* 7.1:1 — al día */
  --eit-ok-marca:      #1E7F4C;  /* 4.6:1 */
  --eit-ok-suave:      #EDF4EF;

  --eit-atencion-ink:   #8A5A00; /* 5.9:1 — requiere atención */
  --eit-atencion-marca: #B07400; /* 3.9:1 */
  --eit-atencion-suave: #FAF2E3;

  --eit-critico-ink:    #A3231B; /* 7.5:1 — crítico / vencido */
  --eit-critico-marca:  #C62A1F; /* 5.6:1 */
  --eit-critico-suave:  #FBEDEB;

  --eit-neutro-ink:     #5F5A54; /* 6.8:1 — sin datos todavía */
  --eit-neutro-marca:   #8F887E; /* 3.5:1 */
  --eit-neutro-suave:   #F2F1EE;

  /* ---- Espaciado: escala de 4 -------------------------------------------- */
  --eit-s-1:  4px;
  --eit-s-2:  8px;
  --eit-s-3:  12px;   /* padding mínimo de cualquier caja */
  --eit-s-4:  16px;
  --eit-s-5:  20px;
  --eit-s-6:  24px;
  --eit-s-7:  32px;
  --eit-s-8:  40px;
  --eit-s-9:  48px;
  --eit-s-10: 64px;

  /* ---- Radios --------------------------------------------------------------
     Esto es un sistema de datos, no una app de consumo: las esquinas casi no
     se redondean. 2px es el default, 3px para superficies grandes que flotan.
     La píldora existe SOLO para el interruptor (ver §11). */
  --eit-r-1: 2px;
  --eit-r-2: 3px;
  --eit-r-3: 4px;
  --eit-r-pill: 999px;

  /* ---- Tipografía --------------------------------------------------------- */
  --eit-f-marca: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --eit-f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --eit-fs-micro: 11px;  /* PISO. Solo microetiquetas en mayúscula */
  --eit-fs-xs:    12px;  /* metadatos, chips, paginación */
  --eit-fs-sm:    13px;  /* celdas de tabla, botones, nav */
  --eit-fs-base:  14px;  /* cuerpo y formularios */
  --eit-fs-md:    16px;  /* subtítulos, entradas destacadas */
  --eit-fs-lg:    20px;  /* título de tarjeta grande */
  --eit-fs-xl:    26px;  /* título de sección */
  --eit-fs-kpi:   32px;  /* valor de un indicador */
  --eit-fs-display: 42px;/* portada de reporte impreso */

  --eit-lh-apretado: 1.2;
  --eit-lh-normal:   1.45;
  --eit-lh-suelto:   1.65;

  /* El tracking Armani. Nunca se aplica a un párrafo: solo a etiquetas cortas */
  --eit-tr-micro: .14em;
  --eit-tr-marca: .26em;

  /* ---- Sombras -------------------------------------------------------------
     Una sola, y solo para lo que FLOTA de verdad (modal, panel, toast, menú).
     Lleva desplazamiento y desenfoque: un halo centrado sin offset no es
     profundidad, es decoración. En el plano de la página no hay sombras: la
     jerarquía la hacen los filetes y el aire. */
  --eit-sombra: 0 8px 24px rgba(17,17,17,.12), 0 1px 2px rgba(17,17,17,.10);

  /* ---- Capas -------------------------------------------------------------- */
  --eit-z-pegajoso: 20;   /* cabecera de tabla */
  --eit-z-superior: 40;   /* barra superior */
  --eit-z-lateral:  50;   /* barra lateral (en celular tapa el contenido) */
  --eit-z-velo:     80;
  --eit-z-panel:    85;
  --eit-z-modal:    90;
  --eit-z-toast:    95;

  /* ---- Medidas del armazón ------------------------------------------------ */
  --eit-lateral-an:  236px;  /* ancho de la barra lateral desplegada */
  --eit-superior-al: 64px;   /* alto de la barra superior */
  --eit-contenido-max: 1480px;

  /* ---- Movimiento --------------------------------------------------------- */
  --eit-vel-1: .12s;  /* color, borde: tiene que sentirse instantáneo */
  --eit-vel-2: .2s;   /* apertura de menú, chevron */
  --eit-vel-3: .28s;  /* panel lateral y modal */
  --eit-ease: cubic-bezier(.22,.61,.36,1);
}


/* ============================================================================
   2. BASE
   ============================================================================ */

.eit *,
.eit *::before,
.eit *::after{ box-sizing:border-box; }

.eit{
  margin:0;
  background:var(--eit-papel);
  color:var(--eit-tinta);
  font-family:var(--eit-f-texto);
  font-size:var(--eit-fs-base);
  line-height:var(--eit-lh-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Evita el "zoom" de iOS al rotar y el scroll lateral por un hijo ancho. */
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* Las superficies que el navegador dibuja por su cuenta también son parte del
   diseño: cursor, selección y barras de scroll salen de fábrica en azul y
   celeste y delatan una página armada en vez de diseñada. */
.eit{
  caret-color:var(--eit-tinta);
  scrollbar-color:var(--eit-linea-2) transparent;
  scrollbar-width:thin;
}
.eit ::selection{ background:var(--eit-tinta); color:var(--eit-tinta-inv); }
.eit ::-webkit-scrollbar{ width:10px; height:10px; }
.eit ::-webkit-scrollbar-track{ background:transparent; }
.eit ::-webkit-scrollbar-thumb{
  background:var(--eit-linea-2);
  border:3px solid var(--eit-papel);   /* el borde finge un thumb angosto */
  border-radius:var(--eit-r-pill);
}
.eit ::-webkit-scrollbar-thumb:hover{ background:var(--eit-linea-fuerte); }

/* El reset va envuelto en :where() A PROPÓSITO. Sin eso, un selector como
   `.eit button` (una clase + una etiqueta) le gana en especificidad a
   `.eit-btn--primario` (una clase sola) y el botón negro termina con el texto
   negro: invisible. Con :where() todas estas reglas valen lo mismo que una
   clase suelta y cualquier componente las pisa sin pelear. */
.eit :where(h1,h2,h3,h4,h5,h6,p,figure){ margin:0; }
.eit :where(ul,ol){ margin:0; padding:0; list-style:none; }
.eit :where(img,svg){ max-width:100%; }
.eit :where(svg){ display:block; }
.eit :where(a){ color:var(--eit-tinta); text-decoration-color:var(--eit-linea-fuerte); text-underline-offset:3px; }
.eit :where(a):hover{ text-decoration-color:var(--eit-tinta); }
.eit :where(button,input,select,textarea){ font:inherit; color:inherit; }
.eit :where(hr){ border:0; border-top:1px solid var(--eit-linea); margin:var(--eit-s-6) 0; }

/* Un único anillo de foco en todo el sistema. Se dibuja por fuera para no
   mover nada de lugar y es negro sólido: se ve sobre blanco y sobre hueso. */
.eit :focus-visible{
  outline:2px solid var(--eit-tinta);
  outline-offset:2px;
}
/* Sobre el botón negro el anillo negro se pierde: ahí se invierte (anillo
   blanco pegado al botón, halo negro por fuera para que también se vea sobre
   papel blanco). No se toca el border-radius en :focus-visible: el contorno
   ya sigue la forma del elemento y cambiarlo haría saltar los radios. */
.eit .eit-btn--primario:focus-visible{
  outline-color:var(--eit-papel);
  outline-offset:-3px;
  box-shadow:0 0 0 2px var(--eit-tinta);
}


/* ============================================================================
   3. TIPOGRAFÍA Y UTILIDADES DE TEXTO
   ============================================================================ */

/* La microetiqueta: el gesto de la marca. Mayúscula, fina, muy espaciada.
   NUNCA se usa para una frase larga — leer un párrafo en mayúscula cansa
   porque desaparece la silueta de las palabras. Etiqueta corta y punto. */
.eit-micro{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  font-weight:500;
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
  line-height:1.3;
}
.eit-micro--tinta{ color:var(--eit-tinta); }

.eit-titulo{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-xl);
  font-weight:400;
  letter-spacing:.01em;
  line-height:var(--eit-lh-apretado);
  color:var(--eit-tinta);
}
.eit-titulo-2{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-lg);
  font-weight:400;
  line-height:1.25;
}
.eit-titulo-3{
  font-size:var(--eit-fs-md);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.005em;
}

.eit-texto{ font-size:var(--eit-fs-base); color:var(--eit-tinta-2); line-height:var(--eit-lh-suelto); }
.eit-texto--medida{ max-width:68ch; }   /* el renglón cómodo: 65-75 caracteres */
.eit-meta{ font-size:var(--eit-fs-xs); color:var(--eit-tinta-3); }

/* Números tabulares EN TODAS PARTES donde haya una columna de plata: sin esto
   el "1" ocupa menos que el "8" y las comas bailan de fila en fila. */
.eit-num,
.eit-tabla td,
.eit-tabla th,
.eit-kpi-valor,
.eit input[type="number"]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.eit-num--der{ text-align:right; }
.eit-moneda{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Todos los íconos del sistema son de TRAZO y comparten un único grosor. Un
   set mezclado (unos rellenos, otros de línea, cada uno con su peso) es lo
   primero que delata una interfaz armada con piezas sueltas. Nunca se usa un
   emoji ni un carácter unicode como ícono: se dibuja el SVG. */
.eit-icono{
  width:16px; height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

/* Solo para lectores de pantalla (etiquetas de iconos, títulos de tabla que se
   ocultan en celular, saltos de navegación). */
.eit-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* El salto "ir al contenido" aparece recién cuando se lo tabula. */
.eit-saltar{
  position:absolute; left:var(--eit-s-3); top:-60px; z-index:100;
  background:var(--eit-tinta); color:var(--eit-tinta-inv);
  padding:var(--eit-s-3) var(--eit-s-4); font-size:var(--eit-fs-sm);
  text-decoration:none; transition:top var(--eit-vel-2) var(--eit-ease);
}
.eit-saltar:focus{ top:var(--eit-s-3); }


/* ============================================================================
   4. ARMAZÓN: lateral + barra superior + contenido
   ============================================================================ */

.eit-app{
  display:grid;
  grid-template-columns:var(--eit-lateral-an) minmax(0,1fr);
  min-height:100vh;
  min-height:100dvh;
}
/* Colapsada a íconos: solo cambia el ancho y el resto del layout obedece. */
.eit-app[data-lateral="iconos"]{ --eit-lateral-an:60px; }

/* minmax(0,1fr) arriba + min-width:0 acá: las dos mitades del truco que evita
   que una tabla ancha empuje la página y aparezca scroll horizontal. */
.eit-col{ min-width:0; display:flex; flex-direction:column; }


/* ---- 4.1 Barra lateral --------------------------------------------------- */

.eit-side{
  position:sticky; top:0;
  z-index:var(--eit-z-lateral);
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  background:var(--eit-superficie);
  border-right:1px solid var(--eit-linea);
  overflow:hidden;
}

.eit-side-marca{
  display:flex; align-items:center; gap:var(--eit-s-3);
  padding:var(--eit-s-4) var(--eit-s-4);
  min-height:var(--eit-superior-al);
  border-bottom:1px solid var(--eit-linea);
  flex:0 0 auto;
}
.eit-side-marca-txt{
  font-family:var(--eit-f-marca);
  font-size:13px;
  font-weight:400;
  letter-spacing:var(--eit-tr-marca);
  text-transform:uppercase;
  color:var(--eit-tinta);
  white-space:nowrap; overflow:hidden;
}
.eit-side-marca-sub{
  display:block;
  font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro);
  color:var(--eit-tinta-3);
  margin-top:3px;
}

.eit-side-scroll{ flex:1 1 auto; overflow-y:auto; padding:var(--eit-s-3) 0 var(--eit-s-5); }

/* Agrupar 19 secciones sin rótulos es ilegible: el grupo es lo que hace que el
   menú se escanee de un vistazo en vez de leerse entero. */
.eit-side-grupo{ padding:var(--eit-s-4) var(--eit-s-4) var(--eit-s-2); }
.eit-side-grupo:first-child{ padding-top:var(--eit-s-2); }

.eit-side-nav a{
  display:flex; align-items:center; gap:var(--eit-s-3);
  padding:9px var(--eit-s-4);
  font-size:var(--eit-fs-sm);
  color:var(--eit-tinta-2);
  text-decoration:none;
  border-left:2px solid transparent;  /* la marca de "acá estás" */
  transition:background var(--eit-vel-1), color var(--eit-vel-1);
  white-space:nowrap;
}
.eit-side-nav a:hover{ background:var(--eit-superficie-2); color:var(--eit-tinta); }
.eit-side-nav a.es-activa{
  background:var(--eit-papel);
  color:var(--eit-tinta);
  font-weight:600;
  border-left-color:var(--eit-tinta);
}
.eit-side-nav a svg{ flex:0 0 auto; width:17px; height:17px; stroke:currentColor; opacity:.78; }
.eit-side-nav a.es-activa svg{ opacity:1; }
.eit-nav-txt{ overflow:hidden; text-overflow:ellipsis; }
/* La cuenta pendiente (tareas, vencidos) va a la derecha, nunca inventada. */
.eit-nav-cuenta{
  margin-left:auto;
  font-size:var(--eit-fs-micro);
  font-variant-numeric:tabular-nums;
  color:var(--eit-tinta-3);
}

/* Modo íconos: se esconden los textos, el ícono se centra y el title() del
   enlace hace de etiqueta. No se achica ningún texto: se saca. */
.eit-app[data-lateral="iconos"] .eit-nav-txt,
.eit-app[data-lateral="iconos"] .eit-nav-cuenta,
.eit-app[data-lateral="iconos"] .eit-side-grupo,
.eit-app[data-lateral="iconos"] .eit-side-marca-txt,
.eit-app[data-lateral="iconos"] .eit-side-pie-txt{ display:none; }
.eit-app[data-lateral="iconos"] .eit-side-nav a{ justify-content:center; padding:11px 0; }
.eit-app[data-lateral="iconos"] .eit-side-marca{ justify-content:center; padding:var(--eit-s-4) 0; }
.eit-app[data-lateral="iconos"] .eit-side-pie{ justify-content:center; }

.eit-side-pie{
  flex:0 0 auto;
  display:flex; align-items:center; gap:var(--eit-s-3);
  padding:var(--eit-s-3) var(--eit-s-4);
  border-top:1px solid var(--eit-linea);
}
.eit-side-pie-txt{ min-width:0; }

/* El número de versión. Tiene que poder leerse cuando se lo buscan, y
   desaparecer cuando no: por eso va al margen, chico y gris, y recién al pasar
   el mouse toma el color del texto normal. `tabular-nums` para que no baile
   cuando pase de 9 a 10. */
.eit-side-ver{
  margin-left:auto;
  flex:0 0 auto;
  font-size:var(--eit-fs-xs);
  font-variant-numeric:tabular-nums;
  color:var(--eit-tinta-3);
  opacity:.65;
  white-space:nowrap;
  transition:opacity var(--eit-vel-2,.15s) var(--eit-ease,ease);
}
.eit-side-pie:hover .eit-side-ver{ opacity:1; }
/* Con la lateral en modo íconos no entra: se saca, igual que el resto del
   texto. El número sigue estando en las pantallas de acceso. */
.eit-app[data-lateral="iconos"] .eit-side-ver{ display:none; }

/* Botón que colapsa la lateral. También sirve de cierre en celular. */
.eit-side-toggle{
  background:none; border:1px solid transparent; cursor:pointer;
  padding:7px; color:var(--eit-tinta-3); border-radius:var(--eit-r-1);
  display:inline-flex; align-items:center; justify-content:center;
}
.eit-side-toggle:hover{ color:var(--eit-tinta); background:var(--eit-superficie-2); }


/* ---- 4.2 Barra superior -------------------------------------------------- */

.eit-top{
  position:sticky; top:0;
  z-index:var(--eit-z-superior);
  display:flex; align-items:center; gap:var(--eit-s-4);
  min-height:var(--eit-superior-al);
  padding:var(--eit-s-3) var(--eit-s-6);
  background:var(--eit-papel);
  border-bottom:1px solid var(--eit-linea);
}
.eit-top-izq{ display:flex; align-items:center; gap:var(--eit-s-3); min-width:0; }
.eit-top-der{ display:flex; align-items:center; gap:var(--eit-s-2); margin-left:auto; }

/* Buscador global. Lleva la lupa adentro con padding-left reservado: el ícono
   es decorativo (aria-hidden) y la etiqueta real va en .eit-sr. */
.eit-busqueda{ position:relative; flex:1 1 320px; max-width:420px; min-width:0; }
.eit-busqueda svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--eit-tinta-3); pointer-events:none;
}
.eit-busqueda input{
  width:100%;
  padding:10px var(--eit-s-3) 10px 34px;
  font-size:var(--eit-fs-sm);
  background:var(--eit-superficie);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-1);
  transition:border-color var(--eit-vel-1), background var(--eit-vel-1);
}
.eit-busqueda input::placeholder{ color:var(--eit-tinta-4); }
.eit-busqueda input:hover{ border-color:var(--eit-linea-fuerte); }
.eit-busqueda input:focus{ background:var(--eit-papel); border-color:var(--eit-tinta); }

/* Pastilla de usuario del rincón derecho. */
.eit-usuario{
  display:flex; align-items:center; gap:var(--eit-s-2);
  padding:5px var(--eit-s-2) 5px 5px;
  background:none; border:1px solid transparent; cursor:pointer;
  border-radius:var(--eit-r-1);
}
.eit-usuario:hover{ background:var(--eit-superficie-2); }
.eit-avatar{
  flex:0 0 auto;
  width:28px; height:28px;
  display:grid; place-items:center;
  background:var(--eit-tinta); color:var(--eit-tinta-inv);
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  letter-spacing:.06em;
  border-radius:var(--eit-r-1);
}
.eit-avatar--claro{
  background:var(--eit-superficie-2);
  color:var(--eit-tinta);
  border:1px solid var(--eit-linea-2);
}
.eit-avatar--g{ width:38px; height:38px; font-size:var(--eit-fs-xs); }
.eit-usuario-nom{ font-size:var(--eit-fs-sm); font-weight:500; line-height:1.2; }
.eit-usuario-rol{ font-size:var(--eit-fs-micro); color:var(--eit-tinta-3); line-height:1.2; }


/* ---- 4.3 Contenido ------------------------------------------------------- */

.eit-contenido{
  flex:1 1 auto;
  width:100%;
  max-width:var(--eit-contenido-max);
  padding:var(--eit-s-6) var(--eit-s-6) var(--eit-s-10);
  /* Las tablas de la página se pegan DEBAJO de la barra superior, no arriba
     de todo: si no, la cabecera queda tapada al hacer scroll. */
  --eit-tabla-top:var(--eit-superior-al);
}

/* Cabecera de página: migas, título, acciones. Misma forma en las 19 secciones
   — la navegación consistente es la mitad de la sensación de "profesional". */
.eit-cab{
  display:flex; align-items:flex-end; gap:var(--eit-s-4);
  flex-wrap:wrap;
  padding-bottom:var(--eit-s-4);
  border-bottom:1px solid var(--eit-linea);
  margin-bottom:var(--eit-s-6);
}
.eit-cab-txt{ min-width:0; }
.eit-cab .eit-micro{ margin-bottom:var(--eit-s-2); }
.eit-cab-sub{ font-size:var(--eit-fs-sm); color:var(--eit-tinta-3); margin-top:6px; max-width:72ch; }
.eit-cab-acc{ display:flex; gap:var(--eit-s-2); margin-left:auto; flex-wrap:wrap; }

/* Separación entre bloques de una misma página. Más aire ARRIBA de un título
   que abajo: así el título pertenece a lo que viene, no a lo que terminó. */
.eit-bloque{ margin-top:var(--eit-s-8); }
.eit-bloque > .eit-bloque-cab{
  display:flex; align-items:baseline; gap:var(--eit-s-3);
  margin-bottom:var(--eit-s-3);
}
.eit-bloque-cab .eit-micro{ margin-right:auto; }


/* ============================================================================
   5. MIGAS, PESTAÑAS
   ============================================================================ */

.eit-migas{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--eit-fs-xs); }
.eit-migas a{ color:var(--eit-tinta-3); text-decoration:none; }
.eit-migas a:hover{ color:var(--eit-tinta); text-decoration:underline; }
.eit-migas li[aria-current]{ color:var(--eit-tinta); font-weight:500; }
.eit-migas li{ display:flex; align-items:center; gap:6px; }
.eit-migas li + li::before{ content:"/"; color:var(--eit-linea-fuerte); }

/* Pestañas subrayadas: el filete corrido es la línea base y la activa la pisa
   con 2px negros. Sin cajas, sin fondo. */
.eit-tabs{
  display:flex; gap:var(--eit-s-5);
  border-bottom:1px solid var(--eit-linea);
  overflow-x:auto;
  scrollbar-width:none;
}
.eit-tabs::-webkit-scrollbar{ display:none; }
.eit-tab{
  position:relative;
  background:none; border:0; cursor:pointer;
  padding:var(--eit-s-3) 2px;
  font-size:var(--eit-fs-sm);
  color:var(--eit-tinta-3);
  white-space:nowrap;
  transition:color var(--eit-vel-1);
}
.eit-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--eit-tinta);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--eit-vel-2) var(--eit-ease);
}
.eit-tab:hover{ color:var(--eit-tinta); }
.eit-tab.es-activa{ color:var(--eit-tinta); font-weight:600; }
.eit-tab.es-activa::after{ transform:scaleX(1); }
.eit-tab-cuenta{
  margin-left:6px;
  font-size:var(--eit-fs-micro);
  font-variant-numeric:tabular-nums;
  color:var(--eit-tinta-3);
}


/* ============================================================================
   6. BOTONES
   ============================================================================ */

.eit-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--eit-s-2);
  padding:11px var(--eit-s-5);
  font-family:var(--eit-f-texto);
  font-size:var(--eit-fs-sm);
  font-weight:500;
  line-height:1.15;
  letter-spacing:.01em;
  white-space:nowrap;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:var(--eit-r-1);
  background:none;
  color:var(--eit-tinta);
  transition:background var(--eit-vel-1), color var(--eit-vel-1), border-color var(--eit-vel-1);
}
.eit-btn svg{ width:15px; height:15px; stroke:currentColor; flex:0 0 auto; }

/* Primario: negro lleno. UNO por pantalla — si hay dos, ninguno es el principal */
.eit-btn--primario{ background:var(--eit-tinta); color:var(--eit-tinta-inv); border-color:var(--eit-tinta); }
.eit-btn--primario:hover{ background:#000; border-color:#000; }

/* Secundario: filete. El caballo de batalla de las barras de acciones. */
.eit-btn--secundario{ border-color:var(--eit-linea-fuerte); color:var(--eit-tinta); background:var(--eit-papel); }
.eit-btn--secundario:hover{ border-color:var(--eit-tinta); background:var(--eit-superficie); }

/* Terciario: texto. Para "Cancelar" y acciones de fila. */
.eit-btn--terciario{ color:var(--eit-tinta-2); padding-left:var(--eit-s-3); padding-right:var(--eit-s-3); }
.eit-btn--terciario:hover{ color:var(--eit-tinta); background:var(--eit-superficie-2); }

/* Destructivo: rojo de contorno. Relleno solo dentro del modal de confirmación,
   donde ya se explicó qué se borra. */
.eit-btn--peligro{ border-color:var(--eit-critico-marca); color:var(--eit-critico-ink); background:var(--eit-papel); }
.eit-btn--peligro:hover{ background:var(--eit-critico-suave); border-color:var(--eit-critico-ink); }
.eit-btn--peligro-lleno{ background:var(--eit-critico-ink); border-color:var(--eit-critico-ink); color:var(--eit-tinta-inv); }
.eit-btn--peligro-lleno:hover{ background:#8C1E17; border-color:#8C1E17; }

/* Denso: para la columna de acciones de una tabla, donde 38px de alto por fila
   rompería la densidad. Excepción consciente al padding de 12px. */
.eit-btn--chico{ padding:7px var(--eit-s-3); font-size:var(--eit-fs-xs); }
.eit-btn--bloque{ display:flex; width:100%; }

.eit-btn[disabled],
.eit-btn.es-deshabilitado{
  cursor:not-allowed;
  background:var(--eit-superficie-2);
  color:var(--eit-tinta-4);
  border-color:var(--eit-linea-2);
}

/* Cargando: el texto se queda (para que el botón no cambie de ancho) y se
   agrega un indicador. El botón se bloquea con aria-busy + disabled. */
.eit-btn.es-cargando{ cursor:progress; color:var(--eit-tinta-4); }
.eit-btn.es-cargando::before{
  content:""; width:12px; height:12px; flex:0 0 auto;
  border:1.5px solid currentColor; border-top-color:transparent;
  border-radius:var(--eit-r-pill);
  animation:eit-girar .7s linear infinite;
}
@keyframes eit-girar{ to{ transform:rotate(360deg); } }

/* Botón de solo ícono: cuadrado, con etiqueta en .eit-sr o en title. */
.eit-btn-icono{
  display:inline-grid; place-items:center;
  width:32px; height:32px;
  padding:0; cursor:pointer;
  background:none; color:var(--eit-tinta-3);
  border:1px solid transparent; border-radius:var(--eit-r-1);
  transition:background var(--eit-vel-1), color var(--eit-vel-1);
}
.eit-btn-icono:hover{ background:var(--eit-superficie-2); color:var(--eit-tinta); }
.eit-btn-icono svg{ width:17px; height:17px; stroke:currentColor; }
.eit-btn-icono--filete{ border-color:var(--eit-linea-2); }

/* Fila de botones. gap y wrap para que en celular bajen en vez de desbordar. */
.eit-acciones{ display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap; }
.eit-acciones--der{ justify-content:flex-end; }


/* ============================================================================
   7. FORMULARIOS
   ============================================================================ */

.eit-campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.eit-etiqueta{
  font-size:var(--eit-fs-xs);
  font-weight:600;
  color:var(--eit-tinta);
  letter-spacing:.005em;
}
/* El asterisco de obligatorio nunca va solo: el lector de pantalla recibe la
   palabra completa. */
.eit-etiqueta .eit-obl{ color:var(--eit-critico-ink); margin-left:2px; }

.eit-input,
.eit-select,
.eit-textarea{
  width:100%;
  padding:10px var(--eit-s-3);
  font-size:var(--eit-fs-base);
  background:var(--eit-papel);
  color:var(--eit-tinta);
  border:1px solid var(--eit-linea-fuerte);  /* 3.5:1 — contorno de control */
  border-radius:var(--eit-r-1);
  transition:border-color var(--eit-vel-1), box-shadow var(--eit-vel-1);
}
.eit-textarea{ min-height:96px; resize:vertical; line-height:var(--eit-lh-normal); }
.eit-input::placeholder,
.eit-textarea::placeholder{ color:var(--eit-tinta-4); }  /* 5.5:1, se lee */
.eit-input:hover,
.eit-select:hover,
.eit-textarea:hover{ border-color:var(--eit-tinta-3); }
.eit-input:focus,
.eit-select:focus,
.eit-textarea:focus{
  border-color:var(--eit-tinta);
  box-shadow:inset 0 0 0 1px var(--eit-tinta);  /* engorda el borde sin mover nada */
  outline:none;
}
.eit-input:focus-visible,
.eit-select:focus-visible,
.eit-textarea:focus-visible{ outline:2px solid var(--eit-tinta); outline-offset:1px; }

.eit-input[disabled],
.eit-select[disabled],
.eit-textarea[disabled]{
  background:var(--eit-superficie-2);
  color:var(--eit-tinta-4);
  border-color:var(--eit-linea-2);
  cursor:not-allowed;
}
.eit-input[readonly]{ background:var(--eit-superficie); }

/* ---------------------------------------------------------------------------
   LOS TRES DIBUJITOS SALEN DE ARCHIVOS, Y NO DE UN `data:` ADENTRO DEL CSS
   ---------------------------------------------------------------------------
   La flecha del select, el tilde de la casilla y la rayita del "algunos sí"
   estaban escritos acá adentro como `url("data:image/svg+xml,…")`. Se pasaron
   a `css/iconos/*.svg` porque la política de seguridad del sitio (el archivo
   `_headers` de la raíz) declara `img-src 'self'`, y un `data:` NO es 'self':
   el navegador los bloquea.

   Probado, no supuesto: sirviendo la app con esa misma cabecera, la consola
   decía "Loading the image 'data:image/svg+xml,…' violates the following
   Content Security Policy directive: img-src 'self'. The action has been
   blocked." por los tres.

   Y lo que se rompía no era un adorno. Sin el tilde, una casilla MARCADA se ve
   igual que una sin marcar: alguien tilda "dar de baja" y la pantalla no le
   contesta nada.

   Un archivo del mismo sitio sí es 'self', así que entra sin tocar la política.
   El dibujo es exactamente el mismo de antes, carácter por carácter.
--------------------------------------------------------------------------- */

/* El select nativo con la flecha dibujada por nosotros: el triángulo del
   sistema operativo no pertenece a ningún diseño. */
.eit-select{
  appearance:none; -webkit-appearance:none;
  padding-right:34px;
  background-image:url("iconos/flecha-select.svg");
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
}

.eit-ayuda{ font-size:var(--eit-fs-xs); color:var(--eit-tinta-3); }
.eit-error{
  display:flex; align-items:flex-start; gap:6px;
  font-size:var(--eit-fs-xs); color:var(--eit-critico-ink); font-weight:500;
}
.eit-error svg{ width:13px; height:13px; stroke:currentColor; flex:0 0 auto; margin-top:1px; }
/* El error pinta el borde, pero el color NO es el único aviso: siempre va el
   texto debajo. Un daltónico tiene que poder usar el formulario igual. */
.eit-campo.es-error .eit-input,
.eit-campo.es-error .eit-select,
.eit-campo.es-error .eit-textarea{ border-color:var(--eit-critico-marca); }
.eit-campo.es-error .eit-input:focus{ box-shadow:inset 0 0 0 1px var(--eit-critico-marca); }

/* Aviso de guardado del formulario.

   VA ARRIBA DE LOS CAMPOS, no pegado a los botones. El dueño lo dijo con
   estas palabras: "dice más abajo no se pudo guardar". En un alta de veinte
   campos agrupados en fichas plegables, un cartel al final del formulario
   queda a dos pantallas de donde la persona está mirando — y en un celular de
   375 px, directamente fuera de la pantalla. Arriba, y además `ui.js` lo trae
   a la vista con scrollIntoView cuando aparece.

   El margen va ABAJO (antes iba arriba, cuando el cartel estaba al final) y
   se aplica con `:not([hidden])` para que un cartel oculto no deje un hueco. */
.eit-error-general:not([hidden]){ margin-bottom:var(--eit-s-4); }
/* La segunda línea: QUÉ HACER. Un poco más chica que el error, porque es la
   instrucción y no la noticia, pero del mismo color: es parte del mismo
   mensaje, no una aclaración al pie. */
.eit-error-que-hacer{ display:block; margin-top:5px; font-size:var(--eit-fs-xs); }

/* Grupo de campos en grilla. auto-fit + minmax: baja a una columna solo. */
.eit-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--eit-s-4) var(--eit-s-4);
}
.eit-form-grid .eit-ancho{ grid-column:1/-1; }

/* Casilla y radio dibujados a mano: el control nativo cambia de forma en cada
   sistema operativo y acá hay tablas con decenas de casillas en fila. */
.eit-check,
.eit-radio{
  display:flex; align-items:flex-start; gap:var(--eit-s-2);
  cursor:pointer; font-size:var(--eit-fs-sm); color:var(--eit-tinta-2);
  line-height:1.35;
}
.eit-check input,
.eit-radio input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto;
  width:16px; height:16px; margin:1px 0 0;
  background:var(--eit-papel);
  border:1px solid var(--eit-linea-fuerte);
  cursor:pointer;
  transition:background var(--eit-vel-1), border-color var(--eit-vel-1);
}
.eit-check input{ border-radius:var(--eit-r-1); }
.eit-radio input{ border-radius:var(--eit-r-pill); }
.eit-check input:hover,
.eit-radio input:hover{ border-color:var(--eit-tinta); }
.eit-check input:checked{
  background:var(--eit-tinta) center/10px 10px no-repeat;
  border-color:var(--eit-tinta);
  background-image:url("iconos/tilde.svg");
}
.eit-check input:indeterminate{
  background:var(--eit-tinta) center/8px 2px no-repeat;
  border-color:var(--eit-tinta);
  background-image:url("iconos/raya.svg");
}
.eit-radio input:checked{
  border-color:var(--eit-tinta);
  box-shadow:inset 0 0 0 3px var(--eit-papel);
  background:var(--eit-tinta);
}
.eit-check input[disabled],
.eit-radio input[disabled]{ background:var(--eit-superficie-2); border-color:var(--eit-linea-2); cursor:not-allowed; }
/* Si la casilla está bloqueada, su texto también tiene que avisarlo: una
   etiqueta en negro al lado de un cuadrito apagado se lee como "se puede
   tocar". Igual queda en 5,5:1, o sea legible: bloqueado no es ilegible. */
.eit-check:has(input[disabled]),
.eit-radio:has(input[disabled]),
.eit-switch:has(input[disabled]){ color:var(--eit-tinta-4); cursor:not-allowed; }

/* Interruptor. Única píldora del sistema: la forma redondeada es LO que lo
   distingue de una casilla a simple vista, y acá conviven los dos. */
.eit-switch{ display:flex; align-items:center; gap:var(--eit-s-3); cursor:pointer; font-size:var(--eit-fs-sm); }
.eit-switch input{
  appearance:none; -webkit-appearance:none;
  position:relative; flex:0 0 auto;
  width:34px; height:18px; margin:0;
  background:var(--eit-superficie-3);
  border:1px solid var(--eit-linea-fuerte);
  border-radius:var(--eit-r-pill);
  cursor:pointer;
  transition:background var(--eit-vel-2), border-color var(--eit-vel-2);
}
.eit-switch input::after{
  content:""; position:absolute; top:2px; left:2px;
  width:12px; height:12px;
  background:var(--eit-tinta-3);
  border-radius:var(--eit-r-pill);
  transition:transform var(--eit-vel-2) var(--eit-ease), background var(--eit-vel-2);
}
.eit-switch input:checked{ background:var(--eit-tinta); border-color:var(--eit-tinta); }
.eit-switch input:checked::after{ transform:translateX(16px); background:var(--eit-papel); }
.eit-switch input[disabled]{ cursor:not-allowed; opacity:.55; }
.eit-switch-txt{ min-width:0; }
.eit-switch-ayuda{ display:block; font-size:var(--eit-fs-xs); color:var(--eit-tinta-3); margin-top:2px; }

/* Barra de filtros sobre una tabla. */
.eit-filtros{
  display:flex; align-items:center; gap:var(--eit-s-2);
  flex-wrap:wrap;
  padding:var(--eit-s-3);
  background:var(--eit-superficie);
  border:1px solid var(--eit-linea);
  border-bottom:0;
  border-radius:var(--eit-r-2) var(--eit-r-2) 0 0;
}
.eit-filtros .eit-input,
.eit-filtros .eit-select{ width:auto; min-width:150px; padding:7px var(--eit-s-3); font-size:var(--eit-fs-sm); }
.eit-filtros .eit-select{ padding-right:30px; }
.eit-filtros-der{ margin-left:auto; display:flex; align-items:center; gap:var(--eit-s-2); }


/* ============================================================================
   8. CHIPS DE ESTADO
   ============================================================================ */

/* Un chip es un elemento en línea, no un contenedor de bloque: su padding se
   mide contra la altura del renglón (24px de alto total), no contra los 12px
   de las cajas. El punto va siempre: el color nunca es el único mensaje. */
.eit-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px var(--eit-s-2);
  font-size:var(--eit-fs-xs);
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
  border:1px solid transparent;
  border-radius:var(--eit-r-1);
  background:var(--eit-neutro-suave);
  color:var(--eit-tinta-2);
}
.eit-chip::before{
  content:""; flex:0 0 auto;
  width:6px; height:6px;
  border-radius:var(--eit-r-pill);
  background:currentColor;
}
.eit-chip--sin-punto::before{ display:none; }

.eit-chip.es-ok{ background:var(--eit-ok-suave); color:var(--eit-ok-ink); border-color:#CFE3D7; }
.eit-chip.es-atencion{ background:var(--eit-atencion-suave); color:var(--eit-atencion-ink); border-color:#E8D7B0; }
.eit-chip.es-critico{ background:var(--eit-critico-suave); color:var(--eit-critico-ink); border-color:#EFCCC8; }
.eit-chip.es-neutro{ background:var(--eit-neutro-suave); color:var(--eit-neutro-ink); border-color:var(--eit-linea-2); }

/* Etiqueta neutra sin semántica de estado: un rubro, un plan, un producto. */
.eit-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px var(--eit-s-2);
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-1);
  white-space:nowrap;
}

/* Punto de semáforo suelto, para meter adentro de una celda o un título. */
.eit-punto{
  display:inline-block; flex:0 0 auto;
  width:8px; height:8px;
  border-radius:var(--eit-r-pill);
  background:var(--eit-neutro-marca);
  vertical-align:middle;
}
.eit-punto.es-ok{ background:var(--eit-ok-marca); }
.eit-punto.es-atencion{ background:var(--eit-atencion-marca); }
.eit-punto.es-critico{ background:var(--eit-critico-marca); }
.eit-punto.es-neutro{ background:var(--eit-neutro-marca); }


/* ============================================================================
   9. TARJETAS Y KPI
   ============================================================================ */

.eit-tarjeta{
  background:var(--eit-papel);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
  min-width:0;
}
.eit-tarjeta--hueso{ background:var(--eit-superficie); }
.eit-tarjeta-cab{
  display:flex; align-items:center; gap:var(--eit-s-3);
  padding:var(--eit-s-3) var(--eit-s-4);
  border-bottom:1px solid var(--eit-linea);
}
.eit-tarjeta-cab .eit-micro{ margin-right:auto; }
.eit-tarjeta-cuerpo{ padding:var(--eit-s-4); }
.eit-tarjeta-cuerpo--apretado{ padding:var(--eit-s-3); }
.eit-tarjeta-pie{
  display:flex; align-items:center; gap:var(--eit-s-2);
  padding:var(--eit-s-3) var(--eit-s-4);
  border-top:1px solid var(--eit-linea);
  background:var(--eit-superficie);
  font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
}
/* Tarjeta que se puede clickear entera (ficha de cliente, de revendedor). */
.eit-tarjeta--link{ display:block; text-decoration:none; transition:border-color var(--eit-vel-1), background var(--eit-vel-1); }
.eit-tarjeta--link:hover{ border-color:var(--eit-linea-fuerte); background:var(--eit-superficie); }

/* Grilla de tarjetas. auto-fill para que sobre ancho y no se estiren feo. */
.eit-grilla{ display:grid; gap:var(--eit-s-3); grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.eit-grilla--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.eit-grilla--kpi{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* ---- Indicador (KPI) ------------------------------------------------------
   Etiqueta chica arriba, número grande abajo, comparación contra el período
   anterior. El número manda; la etiqueta explica; la variación contextualiza.
   Con la base vacía el valor es "—" y la comparación no se muestra: nunca un
   número de adorno. */
.eit-kpi{
  padding:var(--eit-s-4);
  background:var(--eit-papel);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
  min-width:0;
}
.eit-kpi-etq{
  display:flex; align-items:center; gap:6px;
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  font-weight:500;
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-kpi-valor{
  display:block;
  margin-top:var(--eit-s-2);
  font-size:var(--eit-fs-kpi);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--eit-tinta);
}
.eit-kpi-valor .eit-kpi-unidad{ font-size:var(--eit-fs-md); font-weight:400; color:var(--eit-tinta-3); margin-left:3px; }
.eit-kpi-pie{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:var(--eit-s-2);
  font-size:var(--eit-fs-xs);
  color:var(--eit-tinta-3);
}
/* La variación lleva flecha ADEMÁS de color: sin la flecha, verde y rojo son
   el mismo gris para quien no distingue esos dos. */
.eit-kpi-delta{ display:inline-flex; align-items:center; gap:3px; font-weight:600; }
.eit-kpi-delta svg{ width:12px; height:12px; stroke:currentColor; }
.eit-kpi-delta.es-sube{ color:var(--eit-ok-ink); }
.eit-kpi-delta.es-baja{ color:var(--eit-critico-ink); }
.eit-kpi-delta.es-igual{ color:var(--eit-tinta-3); }
/* Cuando no hay con qué comparar todavía. */
.eit-kpi-delta.es-sindatos{ color:var(--eit-tinta-3); font-weight:400; }
.eit-kpi.es-vacio .eit-kpi-valor{ color:var(--eit-tinta-4); font-weight:400; }

/* Lista de pares etiqueta/valor para una ficha. */
.eit-datos{ display:grid; gap:var(--eit-s-3); grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.eit-dato-etq{ font-size:var(--eit-fs-micro); letter-spacing:var(--eit-tr-micro); text-transform:uppercase; color:var(--eit-tinta-3); font-family:var(--eit-f-marca); font-weight:500; }
.eit-dato-val{ font-size:var(--eit-fs-base); color:var(--eit-tinta); margin-top:3px; font-variant-numeric:tabular-nums; }

/* Aviso en línea. Sin franja gruesa de color: ícono + filete, y listo. */
.eit-nota{
  display:flex; align-items:flex-start; gap:var(--eit-s-3);
  padding:var(--eit-s-3) var(--eit-s-4);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-2);
  background:var(--eit-superficie);
  font-size:var(--eit-fs-sm);
  color:var(--eit-tinta-2);
}
.eit-nota svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; stroke:var(--eit-tinta-3); }
.eit-nota.es-atencion{ background:var(--eit-atencion-suave); border-color:#E8D7B0; color:var(--eit-atencion-ink); }
.eit-nota.es-atencion svg{ stroke:currentColor; }
.eit-nota.es-critico{ background:var(--eit-critico-suave); border-color:#EFCCC8; color:var(--eit-critico-ink); }
.eit-nota.es-critico svg{ stroke:currentColor; }
.eit-nota.es-ok{ background:var(--eit-ok-suave); border-color:#CFE3D7; color:var(--eit-ok-ink); }
.eit-nota.es-ok svg{ stroke:currentColor; }
.eit-nota-ttl{ font-weight:600; display:block; margin-bottom:2px; }


/* ============================================================================
   10. TABLAS
   ============================================================================ */

.eit-tabla-caja{
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
  background:var(--eit-papel);
  /* `clip` y no `hidden`: los dos recortan las esquinas de la primera y la
     última fila, pero `hidden` convierte a la caja en contenedor de scroll y
     eso MATA el position:sticky de la cabecera. Es el error clásico de las
     tablas pegajosas y acá está evitado a propósito. */
  overflow:clip;
}
/* La barra de filtros ya puso el borde de arriba; se evita la doble línea. */
.eit-filtros + .eit-tabla-caja{ border-radius:0 0 var(--eit-r-2) var(--eit-r-2); }

/* Scroll horizontal para tablas más anchas que la columna de contenido. Vive
   ACÁ adentro, nunca en la página.
   OJO, limitación real del navegador: un contenedor con overflow-x pasa a ser
   el contexto de scroll de sus hijos, así que adentro de .eit-tabla-scroll la
   cabecera deja de pegarse al hacer scroll DE LA PÁGINA. Dos salidas, elegí
   según el caso:
     · tabla que entra a lo ancho  → no la envuelvas: la cabecera se pega
       debajo de la barra superior (--eit-tabla-top).
     · tabla larga y/o ancha       → .eit-tabla-scroll.es-alto: el listado
       scrollea solo, con su propia cabecera pegada arriba de todo. */
.eit-tabla-scroll{ overflow-x:auto; }
.eit-tabla-scroll.es-alto{ max-height:min(60vh,560px); overflow:auto; --eit-tabla-top:0px; }

.eit-tabla{ width:100%; border-collapse:collapse; font-size:var(--eit-fs-sm); }

.eit-tabla thead th{
  position:sticky;
  top:var(--eit-tabla-top,0px);
  z-index:var(--eit-z-pegajoso);
  padding:var(--eit-s-3) var(--eit-s-4);
  text-align:left;
  vertical-align:bottom;
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  font-weight:500;
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
  background:var(--eit-superficie);
  border-bottom:1px solid var(--eit-linea-2);
  white-space:nowrap;
}
.eit-tabla tbody td{
  padding:var(--eit-s-3) var(--eit-s-4);
  border-bottom:1px solid var(--eit-linea);
  color:var(--eit-tinta-2);
  vertical-align:middle;
}
.eit-tabla tbody tr:last-child td{ border-bottom:0; }
.eit-tabla tbody tr:hover td{ background:var(--eit-superficie); }
.eit-tabla tbody tr.es-seleccionada td{ background:var(--eit-superficie-2); }
/* La primera columna suele ser el nombre: va en tinta plena y con más peso. */
.eit-tabla .eit-td-principal{ color:var(--eit-tinta); font-weight:500; }
.eit-tabla .eit-td-num{ text-align:right; font-variant-numeric:tabular-nums; }
.eit-tabla .eit-td-acc{ text-align:right; white-space:nowrap; width:1%; }
.eit-tabla .eit-td-apretado{ width:1%; white-space:nowrap; }

/* Pie de tabla con los totales. Nunca se calcula a ojo: lo suma el código. */
.eit-tabla tfoot td{
  padding:var(--eit-s-3) var(--eit-s-4);
  border-top:1px solid var(--eit-linea-2);
  background:var(--eit-superficie);
  font-weight:600;
  color:var(--eit-tinta);
}

/* Cabecera ordenable: es un <button> de verdad, así se tabula y se activa con
   Enter. La flecha solo aparece en la columna activa; las demás muestran el
   par de flechas tenue al pasar el mouse. */
.eit-th-btn{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit;
}
.eit-th-btn:hover{ color:var(--eit-tinta); }
.eit-th-btn svg{ width:11px; height:11px; stroke:currentColor; opacity:0; transition:opacity var(--eit-vel-1); }
.eit-th-btn:hover svg{ opacity:.5; }
.eit-tabla th[aria-sort] .eit-th-btn{ color:var(--eit-tinta); }
.eit-tabla th[aria-sort] .eit-th-btn svg{ opacity:1; }
.eit-tabla th[aria-sort="descending"] .eit-th-btn svg{ transform:rotate(180deg); }

/* Rayado opcional: ayuda en tablas de más de ~15 filas y muchas columnas. */
.eit-tabla--rayada tbody tr:nth-child(even) td{ background:var(--eit-superficie); }
.eit-tabla--rayada tbody tr:hover td{ background:var(--eit-superficie-2); }

/* Paginación. Siempre dice cuántos resultados hay: "mostrando X de Y" es la
   diferencia entre confiar en un listado y sospechar que falta algo. */
.eit-paginacion{
  display:flex; align-items:center; gap:var(--eit-s-3); flex-wrap:wrap;
  padding:var(--eit-s-3) var(--eit-s-4);
  border-top:1px solid var(--eit-linea);
  background:var(--eit-superficie);
  font-size:var(--eit-fs-xs);
  color:var(--eit-tinta-3);
}
.eit-paginacion-nums{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.eit-pag{
  min-width:28px; height:28px;
  display:inline-grid; place-items:center;
  padding:0 7px;
  font-size:var(--eit-fs-xs);
  font-variant-numeric:tabular-nums;
  background:none; border:1px solid transparent; border-radius:var(--eit-r-1);
  color:var(--eit-tinta-2); cursor:pointer;
}
.eit-pag:hover{ background:var(--eit-papel); border-color:var(--eit-linea-2); color:var(--eit-tinta); }
.eit-pag.es-activa{ background:var(--eit-tinta); border-color:var(--eit-tinta); color:var(--eit-tinta-inv); font-weight:600; }
.eit-pag[disabled]{ color:var(--eit-tinta-4); cursor:not-allowed; background:none; border-color:transparent; }
.eit-pag svg{ width:13px; height:13px; stroke:currentColor; }


/* ============================================================================
   11. ESTADO VACÍO
   ============================================================================ */

/* El componente más usado del sistema, porque el software arranca VACÍO y así
   tiene que arrancar. Tres piezas, en este orden: qué falta, por qué importa,
   qué botón apretar. Si no hay acción posible, se omite el botón — no se pone
   uno falso. */
.eit-vacio{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--eit-s-3);
  padding:var(--eit-s-8) var(--eit-s-6);
  background:var(--eit-superficie);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
}
.eit-vacio-icono{
  width:34px; height:34px;
  stroke:var(--eit-tinta-4);
  stroke-width:1.1;
  margin-bottom:var(--eit-s-1);
}
.eit-vacio-ttl{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-md);
  font-weight:400;
  color:var(--eit-tinta);
}
.eit-vacio-txt{
  font-size:var(--eit-fs-sm);
  color:var(--eit-tinta-3);
  max-width:46ch;
  line-height:var(--eit-lh-suelto);
}
.eit-vacio .eit-acciones{ margin-top:var(--eit-s-2); justify-content:center; }
/* Versión chica, para el hueco de una tarjeta o de una columna del kanban. */
.eit-vacio--chico{ padding:var(--eit-s-5) var(--eit-s-4); }
.eit-vacio--chico .eit-vacio-icono{ width:24px; height:24px; }
.eit-vacio--chico .eit-vacio-ttl{ font-size:var(--eit-fs-base); }
/* Dentro de una tabla, ocupando todo el ancho. */
.eit-vacio--tabla{ border:0; border-radius:0; background:var(--eit-papel); }


/* ============================================================================
   12. PROGRESO
   ============================================================================ */

.eit-progreso{ min-width:0; }
.eit-progreso-cab{
  display:flex; align-items:baseline; gap:var(--eit-s-3);
  font-size:var(--eit-fs-xs);
  color:var(--eit-tinta-3);
  margin-bottom:6px;
}
.eit-progreso-cab b{ color:var(--eit-tinta); font-weight:600; font-variant-numeric:tabular-nums; margin-left:auto; }
.eit-progreso-pista{
  height:6px;
  background:var(--eit-superficie-3);
  border-radius:var(--eit-r-1);
  overflow:hidden;
}
.eit-progreso-barra{
  height:100%;
  width:0;
  background:var(--eit-tinta);
  transition:width var(--eit-vel-3) var(--eit-ease);
}
.eit-progreso-barra.es-ok{ background:var(--eit-ok-marca); }
.eit-progreso-barra.es-atencion{ background:var(--eit-atencion-marca); }
.eit-progreso-barra.es-critico{ background:var(--eit-critico-marca); }

/* Variante por tramos: "2 de 3 períodos cobrados" se entiende mejor con tres
   bloques separados que con una barra continua al 66%. */
.eit-tramos{ display:flex; gap:3px; }
.eit-tramo{
  flex:1 1 0; height:6px;
  background:var(--eit-superficie-3);
  border-radius:1px;
}
.eit-tramo.es-lleno{ background:var(--eit-tinta); }
.eit-tramo.es-ok{ background:var(--eit-ok-marca); }
.eit-tramo.es-atencion{ background:var(--eit-atencion-marca); }
.eit-tramo.es-critico{ background:var(--eit-critico-marca); }


/* ============================================================================
   13. LÍNEA DE TIEMPO
   ============================================================================ */

/* Historial de un cliente: rail de 1px a la izquierda y un punto por hito.
   El rail se dibuja en el contenedor (no en cada ítem) para que no quede un
   pedacito colgando debajo del último punto. */
.eit-linea-tiempo{ position:relative; padding-left:var(--eit-s-5); }
.eit-linea-tiempo::before{
  content:""; position:absolute;
  left:4px; top:6px; bottom:6px;
  width:1px; background:var(--eit-linea-2);
}
.eit-lt-item{ position:relative; padding:0 0 var(--eit-s-5); }
.eit-lt-item:last-child{ padding-bottom:0; }
.eit-lt-punto{
  position:absolute; left:calc(var(--eit-s-5) * -1); top:5px;
  width:9px; height:9px;
  background:var(--eit-papel);
  border:1px solid var(--eit-linea-fuerte);
  border-radius:var(--eit-r-pill);
  box-sizing:border-box;
}
.eit-lt-item.es-hecho .eit-lt-punto{ background:var(--eit-tinta); border-color:var(--eit-tinta); }
.eit-lt-item.es-ok .eit-lt-punto{ background:var(--eit-ok-marca); border-color:var(--eit-ok-marca); }
.eit-lt-item.es-atencion .eit-lt-punto{ background:var(--eit-atencion-marca); border-color:var(--eit-atencion-marca); }
.eit-lt-item.es-critico .eit-lt-punto{ background:var(--eit-critico-marca); border-color:var(--eit-critico-marca); }
.eit-lt-fecha{
  font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  font-family:var(--eit-f-marca);
  font-weight:500;
  color:var(--eit-tinta-3);
}
.eit-lt-ttl{ font-size:var(--eit-fs-sm); font-weight:600; color:var(--eit-tinta); margin-top:3px; }
.eit-lt-txt{ font-size:var(--eit-fs-sm); color:var(--eit-tinta-2); margin-top:3px; max-width:68ch; }


/* ============================================================================
   14. KANBAN
   ============================================================================ */

.eit-kanban{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(252px,1fr);
  gap:var(--eit-s-3);
  overflow-x:auto;        /* el scroll es de la pista, no de la página */
  padding-bottom:var(--eit-s-2);
  align-items:start;
}
.eit-kb-col{
  display:flex; flex-direction:column;
  min-width:0;
  background:var(--eit-superficie);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
}
.eit-kb-cab{
  display:flex; align-items:center; gap:var(--eit-s-2);
  padding:var(--eit-s-3);
  border-bottom:1px solid var(--eit-linea);
}
.eit-kb-cab .eit-micro{ margin-right:auto; overflow:hidden; text-overflow:ellipsis; }
.eit-kb-cuenta{
  font-size:var(--eit-fs-micro);
  font-variant-numeric:tabular-nums;
  color:var(--eit-tinta-3);
  background:var(--eit-papel);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-1);
  padding:1px 6px;
}
.eit-kb-lista{ display:flex; flex-direction:column; gap:var(--eit-s-2); padding:var(--eit-s-3); min-height:72px; }
.eit-kb-ficha{
  display:block; text-align:left; width:100%;
  padding:var(--eit-s-3);
  background:var(--eit-papel);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-1);
  cursor:pointer;
  text-decoration:none;
  transition:border-color var(--eit-vel-1);
}
.eit-kb-ficha:hover{ border-color:var(--eit-linea-fuerte); }
.eit-kb-ficha-ttl{ font-size:var(--eit-fs-sm); font-weight:600; color:var(--eit-tinta); }
.eit-kb-ficha-meta{
  display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap;
  margin-top:var(--eit-s-2);
  font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
}


/* ============================================================================
   15. ESQUELETO DE CARGA
   ============================================================================ */

/* Late con opacidad en vez de barrer un degradado: no hay un solo degradado en
   todo el sistema y no se va a abrir la excepción por un placeholder. */
.eit-esqueleto{
  display:block;
  height:12px;
  background:var(--eit-superficie-3);
  border-radius:var(--eit-r-1);
  animation:eit-latir 1.5s ease-in-out infinite;
}
.eit-esqueleto + .eit-esqueleto{ margin-top:var(--eit-s-2); }
.eit-esqueleto--ttl{ height:18px; width:40%; }
.eit-esqueleto--linea{ width:100%; }
.eit-esqueleto--corta{ width:62%; }
.eit-esqueleto--bloque{ height:72px; }
.eit-esqueleto--circulo{ width:34px; height:34px; border-radius:var(--eit-r-pill); }
@keyframes eit-latir{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }


/* ============================================================================
   16. PERSONA / ORGANIGRAMA
   ============================================================================ */

/* Tarjeta de una persona del equipo comercial. La tira de color de arriba es
   el semáforo de desempeño; el punto al lado del rol repite el estado por si
   la tira se pierde al imprimir en blanco y negro. Gris = todavía no hay
   datos suficientes para calificar, que es lo normal al abrir el sistema. */
.eit-persona{
  position:relative;
  display:flex; align-items:flex-start; gap:var(--eit-s-3);
  padding:var(--eit-s-4);
  padding-top:calc(var(--eit-s-4) + 3px);
  background:var(--eit-papel);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
  min-width:0;
  text-align:left;
}
.eit-persona::before{
  content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px;
  background:var(--eit-neutro-marca);
  border-radius:var(--eit-r-2) var(--eit-r-2) 0 0;
}
.eit-persona.es-ok::before{ background:var(--eit-ok-marca); }
.eit-persona.es-atencion::before{ background:var(--eit-atencion-marca); }
.eit-persona.es-critico::before{ background:var(--eit-critico-marca); }
.eit-persona.es-neutro::before{ background:var(--eit-neutro-marca); }
.eit-persona-txt{ min-width:0; flex:1 1 auto; }
.eit-persona-nom{ font-size:var(--eit-fs-base); font-weight:600; color:var(--eit-tinta); line-height:1.25; }
.eit-persona-rol{
  display:flex; align-items:center; gap:6px;
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
  margin-top:4px;
}
.eit-persona-datos{
  display:flex; gap:var(--eit-s-4); flex-wrap:wrap;
  margin-top:var(--eit-s-3);
  font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
}
.eit-persona-datos b{ display:block; color:var(--eit-tinta); font-size:var(--eit-fs-sm); font-variant-numeric:tabular-nums; }

/* Árbol del organigrama: una rama por nivel, con sangría y filete. Se arma con
   <ul> anidadas; no hace falta SVG para tres niveles. */
.eit-arbol{ display:flex; flex-direction:column; gap:var(--eit-s-3); }
.eit-arbol-hijos{
  display:flex; flex-direction:column; gap:var(--eit-s-3);
  margin-top:var(--eit-s-3);
  margin-left:var(--eit-s-5);
  padding-left:var(--eit-s-5);
  border-left:1px solid var(--eit-linea-2);
}


/* ============================================================================
   17. MODAL, PANEL LATERAL, TOAST
   ============================================================================ */

.eit-velo{
  position:fixed; inset:0;
  z-index:var(--eit-z-velo);
  background:rgba(17,17,17,.38);
  opacity:0; visibility:hidden;
  transition:opacity var(--eit-vel-2), visibility var(--eit-vel-2);
}
.eit-velo.es-abierto{ opacity:1; visibility:visible; }

.eit-modal{
  position:fixed; z-index:var(--eit-z-modal);
  left:50%; top:50%;
  transform:translate(-50%,-48%);
  width:min(540px,calc(100vw - 32px));
  max-height:min(86vh,720px);
  display:flex; flex-direction:column;
  background:var(--eit-papel);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-2);
  box-shadow:var(--eit-sombra);
  opacity:0; visibility:hidden;
  transition:opacity var(--eit-vel-2), transform var(--eit-vel-2) var(--eit-ease), visibility var(--eit-vel-2);
}
.eit-modal.es-abierto{ opacity:1; visibility:visible; transform:translate(-50%,-50%); }
.eit-modal--ancho{ width:min(820px,calc(100vw - 32px)); }
.eit-modal-cab{
  display:flex; align-items:flex-start; gap:var(--eit-s-3);
  padding:var(--eit-s-4);
  border-bottom:1px solid var(--eit-linea);
}
.eit-modal-ttl{ font-family:var(--eit-f-marca); font-size:var(--eit-fs-lg); font-weight:400; flex:1 1 auto; }
.eit-modal-cuerpo{ padding:var(--eit-s-4); overflow-y:auto; }
.eit-modal-pie{
  display:flex; align-items:center; gap:var(--eit-s-2);
  justify-content:flex-end;
  padding:var(--eit-s-3) var(--eit-s-4);
  border-top:1px solid var(--eit-linea);
  background:var(--eit-superficie);
  flex-wrap:wrap;
}
.eit-modal-pie .eit-modal-pie-izq{ margin-right:auto; }

/* Panel lateral: para ver una ficha sin perder el listado de atrás. Ese es
   justamente el criterio para elegirlo en vez de un modal. */
.eit-panel{
  position:fixed; z-index:var(--eit-z-panel);
  top:0; right:0; bottom:0;
  width:min(520px,100vw);
  display:flex; flex-direction:column;
  background:var(--eit-papel);
  border-left:1px solid var(--eit-linea-2);
  box-shadow:var(--eit-sombra);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--eit-vel-3) var(--eit-ease), visibility var(--eit-vel-3);
}
.eit-panel.es-abierto{ transform:translateX(0); visibility:visible; }
.eit-panel-cab{
  display:flex; align-items:flex-start; gap:var(--eit-s-3);
  padding:var(--eit-s-4);
  border-bottom:1px solid var(--eit-linea);
  flex:0 0 auto;
}
.eit-panel-cuerpo{ flex:1 1 auto; overflow-y:auto; padding:var(--eit-s-4); }
.eit-panel-pie{
  flex:0 0 auto;
  display:flex; gap:var(--eit-s-2); justify-content:flex-end;
  padding:var(--eit-s-3) var(--eit-s-4);
  border-top:1px solid var(--eit-linea);
  background:var(--eit-superficie);
}

/* Avisos efímeros. Abajo a la derecha, apilados, con botón de cerrar: nada que
   desaparezca solo sin dejar rastro si traía un error. */
.eit-toasts{
  position:fixed; z-index:var(--eit-z-toast);
  right:var(--eit-s-4); bottom:var(--eit-s-4);
  display:flex; flex-direction:column; gap:var(--eit-s-2);
  width:min(380px,calc(100vw - 32px));
  pointer-events:none;
}
.eit-toast{
  display:flex; align-items:flex-start; gap:var(--eit-s-3);
  padding:var(--eit-s-3) var(--eit-s-4);
  background:var(--eit-papel);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-2);
  box-shadow:var(--eit-sombra);
  pointer-events:auto;
  animation:eit-entrar var(--eit-vel-3) var(--eit-ease);
}
.eit-toast svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; stroke:var(--eit-tinta-3); }
.eit-toast.es-ok svg{ stroke:var(--eit-ok-marca); }
.eit-toast.es-atencion svg{ stroke:var(--eit-atencion-marca); }
.eit-toast.es-critico svg{ stroke:var(--eit-critico-marca); }
.eit-toast-txt{ flex:1 1 auto; min-width:0; font-size:var(--eit-fs-sm); color:var(--eit-tinta-2); }
.eit-toast-ttl{ display:block; font-weight:600; color:var(--eit-tinta); margin-bottom:2px; }
@keyframes eit-entrar{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Menú desplegable (acciones de fila, selector de período). */
.eit-menu{
  position:absolute; z-index:var(--eit-z-superior);
  min-width:190px;
  padding:var(--eit-s-1) 0;
  background:var(--eit-papel);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-2);
  box-shadow:var(--eit-sombra);
}
.eit-menu button,
.eit-menu a{
  display:flex; align-items:center; gap:var(--eit-s-2);
  width:100%; padding:8px var(--eit-s-3);
  background:none; border:0; cursor:pointer;
  font-size:var(--eit-fs-sm); color:var(--eit-tinta-2); text-align:left; text-decoration:none;
}
.eit-menu button:hover,
.eit-menu a:hover{ background:var(--eit-superficie-2); color:var(--eit-tinta); }
.eit-menu .es-peligro{ color:var(--eit-critico-ink); }
.eit-menu-sep{ height:1px; background:var(--eit-linea); margin:var(--eit-s-1) 0; }


/* ============================================================================
   18. UTILIDADES
   ============================================================================ */

.eit-fila{ display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap; }
.eit-fila--entre{ justify-content:space-between; }
.eit-pila{ display:flex; flex-direction:column; gap:var(--eit-s-3); }
.eit-pila--apretada{ gap:var(--eit-s-2); }
.eit-crece{ flex:1 1 auto; min-width:0; }
.eit-sep-v{ width:1px; align-self:stretch; background:var(--eit-linea); margin:0 var(--eit-s-1); }
.eit-truncar{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eit-sin-margen{ margin:0; }


/* ============================================================================
   18b. ACCESO, CLAVE Y BUSCADOR  (lo agregó el agente del shell)
   ============================================================================
   Tres piezas que el catálogo original no tenía, porque cuando se escribió
   todavía no había pantalla de ingreso ni buscador global. Siguen las mismas
   convenciones: prefijo .eit-, `--` para variantes, `.es-` para estados, cero
   degradados, color únicamente para comunicar un estado.
   ========================================================================= */

/* El shell muestra y esconde pantallas enteras con el atributo [hidden]. Varios
   componentes de esta hoja fijan `display`, y en CSS una declaración de
   `display` le gana al comportamiento por defecto de [hidden]: sin esta regla,
   una pantalla "oculta" se seguiría viendo. */
.eit [hidden]{ display:none !important; }

/* ---- Pantalla de acceso --------------------------------------------------
   Ingreso y puesta en marcha. No usa el armazón .eit-app porque todavía no hay
   ni menú ni usuario: es una hoja sola, centrada, sin nada que distraiga. */
.eit-acceso{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:var(--eit-s-6) var(--eit-s-4);
  background:var(--eit-superficie);
}
.eit-acceso-caja{
  width:min(420px,100%);
  background:var(--eit-papel);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
  padding:var(--eit-s-6);
}
/* La puesta en marcha pide más datos: dos columnas a partir de 560px. */
.eit-acceso-caja--ancha{ width:min(620px,100%); }

.eit-acceso-marca{
  display:flex; align-items:baseline; gap:var(--eit-s-2);
  padding-bottom:var(--eit-s-4);
  border-bottom:1px solid var(--eit-linea);
  margin-bottom:var(--eit-s-5);
}
.eit-acceso-marca-txt{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-md);
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--eit-tinta);
}
.eit-acceso-marca-sub{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
  margin-left:auto;
}
.eit-acceso-ttl{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-xl);
  font-weight:300;
  color:var(--eit-tinta);
  line-height:1.15;
}
.eit-acceso-sub{
  font-size:var(--eit-fs-sm);
  color:var(--eit-tinta-3);
  margin-top:var(--eit-s-2);
  max-width:54ch;
}
.eit-acceso-pie{
  margin-top:var(--eit-s-5);
  padding-top:var(--eit-s-4);
  border-top:1px solid var(--eit-linea);
  font-size:var(--eit-fs-xs);
  color:var(--eit-tinta-3);
}
/* El número de versión, en su propio renglón para que no se lea pegado a la
   advertencia de honestidad: son dos cosas distintas. */
.eit-acceso-pie-ver{
  display:block;
  margin-top:var(--eit-s-2);
  font-variant-numeric:tabular-nums;
  opacity:.7;
}

/* ---- Campo de contraseña con ojito ---------------------------------------
   El botón va DENTRO del campo, sobre el padding derecho del input, que se
   agranda para que el texto nunca pase por debajo del ícono. */
.eit-clave{ position:relative; display:block; }
.eit-clave .eit-input{ padding-right:40px; }
.eit-clave-ojo{
  position:absolute; top:0; right:0;
  width:36px; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  color:var(--eit-tinta-3);
  border-radius:var(--eit-r-1);
}
.eit-clave-ojo:hover{ color:var(--eit-tinta); }
.eit-clave-ojo svg{ width:17px; height:17px; stroke:currentColor; }

/* Medidor de fuerza de la clave: mismo lenguaje visual que .eit-tramos. */
.eit-clave-fuerza{
  display:flex; align-items:center; gap:var(--eit-s-2);
  font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
}
.eit-clave-fuerza .eit-tramos{ flex:1 1 auto; max-width:140px; }

/* ---- Resultados del buscador global --------------------------------------
   Cuelga de .eit-busqueda, que ya es position:relative. */
.eit-busqueda-res{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  max-height:min(60vh,420px); overflow-y:auto;
  background:var(--eit-papel);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-2);
  box-shadow:var(--eit-sombra);
  padding:var(--eit-s-2);
  z-index:60;
}
.eit-res-grupo{ padding:var(--eit-s-2) var(--eit-s-3) 4px; }
.eit-res-item{
  display:block; width:100%; text-align:left;
  padding:var(--eit-s-2) var(--eit-s-3);
  background:none; border:0; cursor:pointer;
  border-radius:var(--eit-r-1);
  color:var(--eit-tinta-2);
  text-decoration:none;
}
.eit-res-item:hover,
.eit-res-item.es-activa{ background:var(--eit-superficie-2); color:var(--eit-tinta); }
.eit-res-ttl{ display:block; font-size:var(--eit-fs-sm); font-weight:500; color:var(--eit-tinta); }
.eit-res-sub{ display:block; font-size:var(--eit-fs-xs); color:var(--eit-tinta-3); margin-top:1px; }

/* ---- Detalle técnico de un error -----------------------------------------
   Cuando un módulo rompe se muestra el error de verdad, no una pantalla en
   blanco. El texto va monoespaciado y con scroll propio: un stack largo no
   tiene por qué estirar la página. */
.eit-detalle-error{
  margin-top:var(--eit-s-3);
  padding:var(--eit-s-3);
  background:var(--eit-superficie-2);
  border:1px solid var(--eit-linea-2);
  border-radius:var(--eit-r-1);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--eit-fs-xs);
  line-height:1.5;
  color:var(--eit-tinta-2);
  max-height:240px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

@media (min-width:560px){
  .eit-acceso-caja--ancha .eit-form-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .eit-acceso{ padding:var(--eit-s-4) var(--eit-s-3); align-content:start; }
  .eit-acceso-caja{ padding:var(--eit-s-5) var(--eit-s-4); }
}


/* ============================================================================
   19. RESPONSIVE
   ============================================================================
   El Director trabaja en escritorio con tablas anchas. El Revendedor trabaja
   desde el celular. Por eso debajo de 760px la lateral se vuelve un cajón
   deslizable y las tablas marcadas con .eit-tabla--apilable se convierten en
   tarjetas: cada celda muestra su propio rótulo y nada se sale de pantalla.
   ========================================================================= */

@media (max-width:1120px){
  :root{ --eit-lateral-an:208px; }
  .eit-contenido{ padding:var(--eit-s-5) var(--eit-s-4) var(--eit-s-9); }
}

@media (max-width:760px){

  .eit-app{ grid-template-columns:minmax(0,1fr); }

  /* Cajón: fuera de pantalla hasta que se lo abre. */
  .eit-side{
    position:fixed; top:0; left:0; bottom:0;
    width:min(280px,86vw);
    height:100%;
    transform:translateX(-100%);
    visibility:hidden;
    box-shadow:var(--eit-sombra);
    transition:transform var(--eit-vel-3) var(--eit-ease), visibility var(--eit-vel-3);
  }
  .eit-app.es-menu-abierto .eit-side{ transform:translateX(0); visibility:visible; }
  /* En celular el modo íconos no aplica: el cajón siempre va completo. */
  .eit-app[data-lateral="iconos"] .eit-nav-txt,
  .eit-app[data-lateral="iconos"] .eit-side-grupo,
  .eit-app[data-lateral="iconos"] .eit-side-marca-txt,
  .eit-app[data-lateral="iconos"] .eit-nav-cuenta,
  .eit-app[data-lateral="iconos"] .eit-side-pie-txt{ display:revert; }
  .eit-app[data-lateral="iconos"] .eit-side-nav a{ justify-content:flex-start; padding:9px var(--eit-s-4); }

  .eit-top{ padding:var(--eit-s-3); gap:var(--eit-s-2); }
  .eit-busqueda{ flex:1 1 auto; max-width:none; }
  .eit-usuario-nom,.eit-usuario-rol{ display:none; }

  .eit-contenido{ padding:var(--eit-s-4) var(--eit-s-3) var(--eit-s-9); }
  .eit-cab{ align-items:flex-start; flex-direction:column; gap:var(--eit-s-3); }
  .eit-cab-acc{ margin-left:0; width:100%; }
  .eit-cab-acc .eit-btn{ flex:1 1 auto; }

  .eit-titulo{ font-size:22px; }
  .eit-kpi-valor{ font-size:26px; }

  /* Tabla → tarjetas apiladas. Cada <td> necesita data-col con su rótulo. */
  .eit-tabla--apilable thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .eit-tabla--apilable,
  .eit-tabla--apilable tbody,
  .eit-tabla--apilable tr,
  .eit-tabla--apilable td{ display:block; width:auto; }
  .eit-tabla--apilable tr{
    padding:var(--eit-s-3);
    border-bottom:1px solid var(--eit-linea);
  }
  .eit-tabla--apilable tbody tr:hover td{ background:none; }
  .eit-tabla--apilable td{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:var(--eit-s-4);
    padding:5px 0;
    border:0;
    text-align:right;
  }
  .eit-tabla--apilable td::before{
    content:attr(data-col);
    flex:0 0 auto;
    font-family:var(--eit-f-marca);
    font-size:var(--eit-fs-micro);
    font-weight:500;
    letter-spacing:var(--eit-tr-micro);
    text-transform:uppercase;
    color:var(--eit-tinta-3);
    text-align:left;
  }
  /* Una celda sin nada adentro (relleno del pie, columna de separación) no
     tiene por qué ocupar un renglón de la tarjeta. */
  .eit-tabla--apilable td:empty{ display:none; }
  /* La celda sin rótulo —la casilla de selección— se va a la izquierda: a la
     derecha, sin etiqueta enfrente, queda flotando sola. */
  .eit-tabla--apilable td[data-col=""]{ justify-content:flex-start; }
  .eit-tabla--apilable .eit-td-principal{ font-size:var(--eit-fs-base); }
  .eit-tabla--apilable .eit-td-acc{ width:auto; justify-content:flex-end; }
  .eit-tabla--apilable .eit-td-acc::before{ content:""; }
  .eit-tabla--apilable tfoot td{ border-top:1px solid var(--eit-linea-2); }
  .eit-tabla-scroll{ overflow-x:visible; }

  .eit-paginacion{ justify-content:center; }
  .eit-paginacion-nums{ margin-left:0; }

  .eit-panel{ width:100vw; border-left:0; }
  .eit-modal{ width:calc(100vw - 24px); }
  .eit-toasts{ right:var(--eit-s-3); left:var(--eit-s-3); bottom:var(--eit-s-3); width:auto; }

  .eit-kanban{ grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; }
  .eit-arbol-hijos{ margin-left:var(--eit-s-2); padding-left:var(--eit-s-3); }
}

/* Pantallas muy angostas: que nada se corte. */
@media (max-width:360px){
  .eit-contenido{ padding-left:var(--eit-s-2); padding-right:var(--eit-s-2); }
  .eit-btn{ padding-left:var(--eit-s-3); padding-right:var(--eit-s-3); }
}


/* ============================================================================
   20. MOVIMIENTO REDUCIDO
   ============================================================================ */

/* Quien pidió menos movimiento en su sistema operativo no debería tener que
   pedirlo dos veces. Todo se vuelve instantáneo, pero nada desaparece: los
   paneles siguen abriendo, sin deslizarse. */
@media (prefers-reduced-motion:reduce){
  .eit *,
  .eit *::before,
  .eit *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .eit-esqueleto{ animation:none; opacity:.8; }
}


/* ============================================================================
   21. IMPRESIÓN
   ============================================================================
   Los reportes se imprimen y se mandan en PDF. Se saca todo lo que no es
   contenido (navegación, botones, avisos flotantes), se pasa a una sola
   columna y se evita que una tarjeta o una fila se parta entre dos hojas.
   ========================================================================= */

@media print{
  @page{ margin:14mm; }

  .eit{ background:#FFF; color:#000; font-size:10.5pt; overflow:visible; }

  .eit-side,
  .eit-top,
  .eit-toasts,
  .eit-velo,
  .eit-panel,
  .eit-paginacion,
  .eit-filtros,
  .eit-saltar,
  .eit-btn,
  .eit-btn-icono,
  .eit-acciones,
  .eit-cab-acc,
  .eit-tabs{ display:none !important; }

  .eit-app{ display:block; }
  .eit-contenido{ max-width:none; padding:0; }

  /* Sin fondos: ahorra tinta y evita que un hueso salga gris sucio. */
  .eit-tarjeta,
  .eit-kpi,
  .eit-tabla-caja,
  .eit-nota,
  .eit-vacio,
  .eit-persona{
    background:#FFF !important;
    border:1px solid #999;
    box-shadow:none;
    break-inside:avoid;
  }
  .eit-tabla thead th{
    position:static;
    background:#FFF !important;
    color:#000;
    border-bottom:1px solid #000;
  }
  /* La cabecera se repite en cada hoja: una tabla de 4 páginas sin títulos de
     columna no se puede leer. */
  .eit-tabla thead{ display:table-header-group; }
  .eit-tabla tr{ break-inside:avoid; }
  .eit-tabla tbody td{ border-bottom:1px solid #CCC; color:#000; }
  .eit-tabla--apilable td::before{ content:none; }

  .eit-chip{ border:1px solid #666; background:#FFF !important; color:#000; }
  .eit-progreso-pista,.eit-tramo{ border:1px solid #999; }

  .eit-bloque{ break-inside:avoid-page; }
  .eit-titulo,.eit-titulo-2,.eit-micro{ break-after:avoid; }
}


/* ============================================================================
   16. DENSIDAD COMPACTA
   ============================================================================
   Pedido del dueño: "siento que está todo muy grande, quiero que sea todo más
   compacto". Esto aprieta el sistema entero desde un solo lugar.

   POR QUÉ ACÁ ABAJO Y NO EDITANDO LOS TOKENS DE ARRIBA: para que se vea de un
   vistazo qué se cambió por densidad y qué es el diseño original, y para poder
   volver atrás borrando este bloque. Los valores de arriba quedan como la
   escala de referencia.

   EL DIAL: `--eit-densidad` multiplica TODO el aire del sistema.
       1    = la escala original (la de antes)
       .8   = lo que está puesto ahora
       .7   = bastante más apretado
   Cambiás ese número y se mueve la aplicación entera.

   LO QUE **NO** SE ACHICA, Y ES A PROPÓSITO:
   - El piso de 11px del texto funcional y los tamaños de lectura (12/13/14).
     "Compacto" tiene que significar menos aire, no letra más chica: achicar
     la letra no gana densidad, gana cansancio.
   - Los tres primeros escalones de espaciado (4, 8 y 12px). El 12 es el
     padding mínimo adentro de cualquier caja con borde: por debajo, el texto
     se pega al filete.
   - Nada del celular. Ver el bloque de abajo: ahí el dedo manda y los
     objetivos táctiles vuelven a 44px.
   ============================================================================ */

:root{
  --eit-densidad: .8;

  /* Aire: todo lo que separa. Los tres primeros no se tocan (ver arriba). */
  --eit-s-4:  calc(16px * var(--eit-densidad));
  --eit-s-5:  calc(20px * var(--eit-densidad));
  --eit-s-6:  calc(24px * var(--eit-densidad));
  --eit-s-7:  calc(32px * var(--eit-densidad));
  --eit-s-8:  calc(40px * var(--eit-densidad));
  --eit-s-9:  calc(48px * var(--eit-densidad));
  --eit-s-10: calc(64px * var(--eit-densidad));

  /* Tipografía: solo baja la parte GRANDE, que es la que ocupa pantalla.
     El cuerpo, las celdas y las microetiquetas quedan donde estaban. */
  --eit-fs-md:      15px;   /* era 16 */
  --eit-fs-lg:      17px;   /* era 20 */
  --eit-fs-xl:      21px;   /* era 26 — título de sección */
  --eit-fs-kpi:     25px;   /* era 32 — valor de indicador */
  --eit-fs-display: 32px;   /* era 42 — portada de reporte impreso */

  /* Un pelo menos de interlineado: no se nota en una línea y se nota mucho
     en una tabla de treinta filas. */
  --eit-lh-normal: 1.4;

  /* El armazón: la barra de arriba y la lateral se comían pantalla sin dar
     nada a cambio. */
  --eit-superior-al: 52px;   /* era 64 */
  --eit-lateral-an:  206px;  /* era 236 */
}

/* Los controles que tenían el alto escrito a mano y no salían de un token. */
.eit-btn{ padding-top:7px; padding-bottom:7px; }          /* era 11px */
.eit-side-nav a{ padding-top:7px; padding-bottom:7px; }   /* era 9px */

/* La barra de arriba medía 65px y bajarle el `min-height` no alcanzaba: el que
   mandaba era el alto del buscador, no el token. Se aprieta el campo y la
   barra lo sigue. */
.eit-top{ padding-top:9px; padding-bottom:9px; }
.eit-busqueda input{ padding-top:7px; padding-bottom:7px; }

/* Los campos de formulario, por la misma razón que todo lo demás. */
.eit-input,
.eit-select,
.eit-textarea{ padding-top:7px; padding-bottom:7px; }

/* ----------------------------------------------------------------------------
   El celular queda afuera de la compactación.
   El revendedor usa esto de parado, en la calle, con una mano. Ahí el límite no
   es la pantalla: es el dedo. Los objetivos táctiles vuelven a 44px y el aire
   vuelve casi a la escala original, porque en una columna angosta lo apretado
   no se lee como "profesional", se lee como "no le puedo pegar al botón".
   ---------------------------------------------------------------------------- */
@media (max-width:760px){
  :root{ --eit-densidad: .94; }

  .eit-btn{
    min-height:44px;
    padding-top:10px; padding-bottom:10px;
  }
  .eit-btn.eit-btn--chico{ min-height:38px; }
  .eit-side-nav a{ min-height:44px; padding-top:10px; padding-bottom:10px; }
  .eit-btn-icono{ min-width:44px; min-height:44px; }
  /* Estos dos quedaron abajo de 44 y en el teléfono son los dos controles del
     armazón: el que cierra el cajón del menú (32x32) y el que abre el menú de
     la cuenta (72x40). Quedan arriba de todo y a los costados, que es justo
     donde el pulgar tiene menos puntería. */
  .eit-side-toggle{ min-width:44px; min-height:44px; }
  .eit-usuario{ min-height:44px; }

  /* Los números de página medían 28x28 y van pegados uno al lado del otro: es
     la fila de botones donde más fácil se le erra, y errarle manda a la página
     equivocada de un listado.
     El alto va a 44, que es lo que arregla la puntería del pulgar. El ancho se
     queda en 40 y no en 44 a propósito: son siete objetivos en una fila (cinco
     números más anterior y siguiente) y con 44 cada uno la fila se sale de una
     pantalla de 375px. Un objetivo de 40x44 con 4px de separación se acierta;
     uno que no entra en la pantalla, no. */
  .eit-pag{ min-width:40px; height:44px; padding:0 var(--eit-s-2); }

  /* Las opciones de los menús desplegables (el de la cuenta, el de acciones de
     cada fila) quedaban en 34px de alto. Son una lista de renglones pegados y
     una de ellas suele ser la peligrosa: "Cerrar sesión", "Dar de baja". */
  .eit-menu button,
  .eit-menu a{ min-height:44px; padding-top:10px; padding-bottom:10px; }
  /* Las pestañas también se tocan con el dedo: quedaban en 42px, dos menos
     que todo lo demás, y son lo que más se aprieta adentro de una ficha. */
  .eit-tab{ min-height:44px; }

  /* Un campo de 29px en un celular es una invitación a errarle. Y además,
     por debajo de 16px de letra iOS hace zoom solo al enfocar el campo y te
     descoloca la pantalla entera: por eso el tamaño sube acá. */
  .eit-input,
  .eit-select,
  .eit-textarea,
  .eit-busqueda input{
    min-height:44px;
    padding-top:10px; padding-bottom:10px;
    font-size:16px;
  }

  /* El ojito de la contraseña medía 36px de ancho: alto le sobraba (44, el del
     campo) pero ancho le faltaba. Es EL botón que más se aprieta en un celular
     —escribir una contraseña a ciegas con el pulgar sale mal— y errarle
     significa pegarle al campo y mover el cursor. Se lleva a 44 y el campo
     deja el hueco correspondiente para que el texto no pase por abajo. */
  .eit-clave-ojo{ width:44px; }
  .eit-clave .eit-input{ padding-right:48px; }

  /* LOS FILTROS DE LAS TABLAS, QUE SE ESTABAN ESCAPANDO DE LA REGLA DE ARRIBA.
     `.eit-filtros .eit-input` tiene más peso que `.eit-input` a secas, así que
     ganaba y dejaba el buscador de cada tabla en 13px y 7px de alto. En un
     iPhone eso es el zoom automático al tocar el campo: la pantalla salta, se
     corre todo y hay que volver a acomodarla con los dedos. Y es el campo que
     más se toca del sistema, porque está arriba de cada listado.
     Se repite el mismo selector para empatarle en peso. */
  .eit-filtros .eit-input,
  .eit-filtros .eit-select,
  .eit-filtros .eit-textarea{
    font-size:16px;
    min-height:44px;
    padding-top:10px; padding-bottom:10px;
  }
  /* Con 16px de letra, 150px de ancho mínimo ya no entran dos por renglón en
     un teléfono: que ocupen el renglón entero en vez de desbordar. */
  .eit-filtros .eit-input,
  .eit-filtros .eit-select{ flex:1 1 100%; min-width:0; width:100%; }
}


/* ============================================================================
   17. LA MARCA DEL MENÚ, CENTRADA
   ============================================================================
   Pedido: el "EMPORIO IT" de la barra lateral, un poco más chico y centrado
   en el medio de la barra.

   El detalle que lo hacía difícil: el botón de colapsar vive adentro del mismo
   renglón, así que con un simple `justify-content:center` se centraba el
   CONJUNTO (botón + marca) y la marca quedaba corrida a la derecha. Por eso el
   botón se saca del flujo y se ancla a la izquierda: recién ahí el centro del
   texto coincide con el centro real de la barra.
   ============================================================================ */

.eit-side-marca{
  position:relative;
  justify-content:center;
  text-align:center;
  gap:0;
  padding-left:var(--eit-s-3);
  padding-right:var(--eit-s-3);
}

.eit-side-toggle{
  position:absolute;
  left:var(--eit-s-2);       /* bien pegado al borde: cada píxel que ocupa acá es
                                ancho que pierde el texto centrado */
  top:50%;
  transform:translateY(-50%);
}

/* El ancho que le queda al texto es el de la barra menos el botón de los dos
   lados (el centrado obliga a reservar también el lado donde no hay nada).
   Con la barra en 206px son 118px: justo lo que necesita "Centro de Mando" en
   un renglón. Si la barra se angosta, el texto se corta con puntos suspensivos
   en vez de partirse en dos. */
.eit-side-marca > div{
  min-width:0;
  max-width:calc(100% - 64px);
}
.eit-side-marca-txt{
  font-size:12px;            /* era 13 */
  text-overflow:ellipsis;
}
.eit-side-marca-sub{
  letter-spacing:.08em;      /* era .14em: el tracking ancho no entraba */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Con el menú colapsado a íconos la marca se esconde y el botón queda solo:
   ahí vuelve al flujo, porque si no se superpondría consigo mismo centrado. */
.eit-app[data-lateral="iconos"] .eit-side-toggle{
  position:static;
  transform:none;
}
/* Y el bloque de texto desaparece entero. La regla vieja escondía solo el
   nombre de la empresa y dejaba el subtítulo, que en un riel de 60px se leía
   "Ce…" y además corría el botón 14px fuera del centro. */
.eit-app[data-lateral="iconos"] .eit-side-marca > div{ display:none; }


/* ============================================================================
   18. LA VUELTA AL SITIO DESDE LAS PANTALLAS DE ACCESO
   ============================================================================
   La portada pública y el sistema son dos cosas distintas que viven en la
   misma carpeta: se entra por la portada y el botón "Ingresar" trae acá. Pero
   desde acá no había camino de vuelta más que el botón de atrás del navegador.
   Este es ese camino.
   ============================================================================ */

.eit-acceso-volver{
  margin-top:var(--eit-s-4);
  text-align:center;
}
.eit-acceso-volver a{
  display:inline-block;
  padding:6px 4px;              /* área de toque, aunque el texto sea chico */
  font-size:var(--eit-fs-xs);
  color:var(--eit-tinta-3);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--eit-vel-1), border-color var(--eit-vel-1);
}
.eit-acceso-volver a:hover{
  color:var(--eit-tinta);
  border-bottom-color:var(--eit-linea-2);
}
.eit-acceso-volver a:focus-visible{
  outline:2px solid var(--eit-tinta);
  outline-offset:2px;
}
@media (max-width:760px){
  .eit-acceso-volver a{ min-height:44px; line-height:32px; }
}


/* ============================================================================
   19. ESCAPARATE DE SOFTWARES
   ============================================================================
   La sección Softwares dejó de ser una tabla y pasó a ser una grilla de
   recuadros, uno por software, con los números de quien está mirando.

   La referencia es la tarjeta del sitio público ("Proyectos que entregamos"):
   recuadro de fondo gris muy suave sobre el blanco de la página, esquinas
   apenas redondeadas, la marca arriba y abajo etiqueta, nombre y una línea de
   qué es. Pero es una TRADUCCIÓN, no una copia: el sitio es editorial de lujo
   y esto es la contracara operativa, así que no se toca una sola clase .eg-*
   ni se importa un color de allá. Todo sale de los tokens de esta hoja.

   Dos decisiones que importan:

   · LO GANADO Y LO POTENCIAL SE VEN DISTINTOS. Lo ganado va en la fila de
     cifras, en tinta plena. Lo potencial va en su propia caja, con fondo de
     papel, un filete a la izquierda y la palabra "Estimado" al lado del
     rótulo. Nadie tiene que leer la letra chica para darse cuenta de que uno
     ya pasó y el otro no.

   · UN PRODUCTO QUE NO SE PUEDE VENDER SE VE, PERO APAGADO. Y apagado NO es
     opacity: bajar la opacidad se lleva puesto el contraste del texto. Es un
     fondo distinto y la tinta un escalón más clara, que sigue pasando AA, más
     el chip de estado y el motivo escrito con todas las letras.
   ============================================================================ */

/* Una columna más ancha que la grilla genérica: adentro de cada lámina entran
   tres cifras en fila, y abajo de 280px se apilarían feo. */
.eit-grilla--laminas{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--eit-s-4); }

.eit-lamina{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--eit-superficie);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
  color:inherit;
  text-decoration:none;
  overflow:clip;                /* la marca de arriba respeta el radio */
  transition:border-color var(--eit-vel-1), background var(--eit-vel-1);
}
.eit-lamina:hover{ border-color:var(--eit-linea-fuerte); background:var(--eit-papel); }
.eit-lamina:focus-visible{ outline:2px solid var(--eit-tinta); outline-offset:2px; }

/* La "imagen" de la lámina. El catálogo de datos no guarda imágenes por
   producto, así que la marca es tipográfica: el nombre en la familia de la
   casa, grande, con tracking. Un software nuevo tiene lámina desde el minuto
   cero, sin subir un archivo ni tocar código. */
.eit-lamina-marca{
  display:flex; align-items:center; justify-content:center;
  min-height:96px;
  padding:var(--eit-s-4);
  background:var(--eit-papel);
  border-bottom:1px solid var(--eit-linea);
}
.eit-lamina-marca > span{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-xl);
  font-weight:300;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--eit-tinta);
  text-align:center;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.eit-lamina:hover .eit-lamina-marca{ background:var(--eit-superficie); }

.eit-lamina-txt{
  display:flex; flex-direction:column; gap:var(--eit-s-2);
  padding:var(--eit-s-4);
  min-width:0;
}
.eit-lamina-meta{ display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap; }
/* El número de orden, como en las planchas del sitio. Es la posición en la
   lista que se está viendo, no un código: por eso es gris y chico. */
.eit-lamina-num{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro);
  color:var(--eit-tinta-4);
  font-variant-numeric:tabular-nums;
}
/* <h3> en la lámina y <span> adentro del botón "Sumar un software": en un
   <button> solo entra contenido de frase. Por eso van los dos y el margen
   del navegador se anula a mano. */
.eit-lamina-nom{
  display:block;
  margin:0;
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-lg);
  font-weight:400;
  line-height:1.15;
  color:var(--eit-tinta);
}
.eit-lamina-desc{
  margin:0;
  font-size:var(--eit-fs-sm);
  line-height:1.5;
  color:var(--eit-tinta-2);
  /* Tres renglones y corta: la descripción completa está en la ficha, y una
     lámina de alto variable rompe la grilla. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  line-clamp:3; overflow:hidden;
}
.eit-lamina-sindato{ color:var(--eit-tinta-4); font-weight:400; }

/* ---- Las cifras ---------------------------------------------------------- */

.eit-lamina-cifras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:var(--eit-s-3);
  margin-top:var(--eit-s-2);
  padding-top:var(--eit-s-3);
  border-top:1px solid var(--eit-linea);
}
.eit-lamina-cifras--4{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.eit-lamina-cifra{ min-width:0; }
.eit-lamina-cifra-etq{
  display:block;
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  font-weight:500;
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-lamina-cifra b,
.eit-lamina-potencial b{
  display:block;
  margin-top:3px;
  font-size:var(--eit-fs-md);
  font-weight:600;
  line-height:1.2;
  color:var(--eit-tinta);
  overflow-wrap:anywhere;
}
.eit-lamina-cifra-pie{
  display:block;
  margin-top:2px;
  font-size:var(--eit-fs-xs);
  line-height:1.35;
  color:var(--eit-tinta-3);
}

/* ---- Lo que dejaría una venta nueva --------------------------------------
   Caja propia, filete a la izquierda y la palabra "Estimado" pegada al
   rótulo. Es lo único de la lámina que todavía no pasó. */
.eit-lamina-potencial{
  display:block;
  margin-top:var(--eit-s-3);
  padding:var(--eit-s-3);
  background:var(--eit-papel);
  border:1px solid var(--eit-linea);
  border-left:2px solid var(--eit-tinta);
  border-radius:var(--eit-r-1);
}
.eit-lamina:hover .eit-lamina-potencial{ background:var(--eit-superficie); }
.eit-lamina-potencial-etq{
  display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap;
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  font-weight:500;
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-lamina-estimado,
.eit-tag--estimado{
  display:inline-block;
  padding:1px 6px;
  border:1px dashed var(--eit-linea-fuerte);
  border-radius:var(--eit-r-1);
  font-family:var(--eit-f-texto);
  font-size:var(--eit-fs-micro);
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--eit-tinta-3);
}
/* El mismo guiño en una celda de tabla: el punteado dice "todavía no pasó"
   sin gastar un color de estado, que acá significaría otra cosa. */
.eit-estimado{
  display:inline-block;
  padding:1px 0;
  border-bottom:1px dashed var(--eit-linea-fuerte);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--eit-tinta);
}

/* ---- Lo que no se puede ofrecer ------------------------------------------ */

.eit-lamina-aviso{
  display:block;
  margin:var(--eit-s-3) 0 0;
  padding:var(--eit-s-3);
  background:var(--eit-neutro-suave);
  border-radius:var(--eit-r-1);
  font-size:var(--eit-fs-xs);
  line-height:1.45;
  color:var(--eit-neutro-ink);
}
/* Apagada, no transparente: bajar la opacidad rompe el contraste del texto. */
.eit-lamina--apagada{ background:var(--eit-superficie-2); }
.eit-lamina--apagada .eit-lamina-marca{ background:var(--eit-superficie-2); }
.eit-lamina--apagada .eit-lamina-marca > span{ color:var(--eit-tinta-3); }
.eit-lamina--apagada:hover .eit-lamina-marca{ background:var(--eit-superficie); }

/* ---- La lámina para sumar un software ------------------------------------ */

.eit-lamina--nueva{
  align-items:center; justify-content:center; gap:var(--eit-s-2);
  min-height:200px;
  padding:var(--eit-s-6) var(--eit-s-4);
  background:transparent;
  border:1px dashed var(--eit-linea-fuerte);
  text-align:center;
  cursor:pointer;
  font:inherit;
  color:var(--eit-tinta-2);
}
.eit-lamina--nueva:hover{ background:var(--eit-superficie); border-color:var(--eit-tinta); }
.eit-lamina--nueva svg{ width:20px; height:20px; stroke:currentColor; }
.eit-lamina--nueva .eit-lamina-desc{ max-width:30ch; }

/* ---- Barra de filtros que no está pegada a una tabla ---------------------- */

.eit-filtros--suelta{
  border-bottom:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
  margin-bottom:var(--eit-s-4);
}

/* ---- Lista de viñetas ----------------------------------------------------- */

.eit-lista{ margin:0; padding-left:1.1em; display:grid; gap:var(--eit-s-2); }
.eit-lista li{ font-size:var(--eit-fs-sm); line-height:1.5; color:var(--eit-tinta-2); }

/* ---- Serie mensual en barras ---------------------------------------------
   Dibujada a mano, sin librerías. El SVG lleva SOLO las barras, en
   porcentajes y sin viewBox: así se estira con la caja sin deformarse. Los
   rótulos son HTML de verdad —un <text> adentro de un viewBox se escala con
   el dibujo y en el celular llega a 6px, y acá nada funcional baja de 11— y
   debajo va siempre la misma serie en una tabla para lector de pantalla. */

.eit-serie{ margin:0; display:grid; gap:var(--eit-s-2); min-width:0; }
.eit-serie figcaption{ color:var(--eit-tinta-3); }
.eit-serie-caja{ height:132px; }
.eit-serie-svg{ display:block; width:100%; height:100%; }
.eit-serie-ejes{
  display:grid;
  grid-template-columns:repeat(var(--eit-serie-n,12),1fr);
  padding-top:var(--eit-s-2);
  border-top:1px solid var(--eit-linea);
}
.eit-serie-ejes span{
  text-align:center;
  font-size:var(--eit-fs-micro);
  color:var(--eit-tinta-3);
  overflow:hidden;
}
.eit-serie--vacia{ padding:var(--eit-s-4) 0; }

/* ---- El escaparate en el teléfono -----------------------------------------
   El revendedor mira esto parado en la vereda, antes de entrar a un comercio.
   Una sola columna, las cifras de a dos y nada que se salga a lo ancho. */

@media (max-width:760px){
  .eit-grilla--laminas{ grid-template-columns:1fr; gap:var(--eit-s-3); }
  /* 44px desde la tablet para abajo: de 760px para abajo se toca con el
     dedo, no se apunta con el mouse. */
  .eit-filtros--suelta .eit-input,
  .eit-filtros--suelta .eit-select{ flex:1 1 150px; min-width:0; min-height:44px; }
  /* Doce rótulos no entran en un teléfono: se muestran uno sí y uno no. La
     tabla equivalente sigue teniendo los doce. */
  .eit-serie--densa .eit-serie-ejes span:nth-child(even){ visibility:hidden; }
  .eit-serie-caja{ height:112px; }
}
@media (max-width:420px){
  .eit-lamina-marca{ min-height:76px; }
  .eit-lamina-marca > span{ font-size:var(--eit-fs-md); }
  .eit-lamina-cifras,
  .eit-lamina-cifras--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* La lámina entera ya es un objetivo táctil enorme; lo que importa acá es
     que los desplegables de filtro se puedan tocar: 44px, la misma medida
     que usa el resto del sistema en el teléfono (el menú lateral y los
     botones de ícono). Un dedo no acierta en 40, y acá hay cinco seguidos.
     Se hereda del corte de 760px; queda escrito igual porque es el número
     que importa y no tiene que perderse si alguien toca el otro bloque. */
  .eit-filtros--suelta .eit-input,
  .eit-filtros--suelta .eit-select{ min-height:44px; }
}

@media print{
  .eit-lamina{ break-inside:avoid; background:transparent; }
  .eit-lamina--nueva,
  .eit-filtros--suelta{ display:none; }
  .eit-serie-caja{ height:96px; }
}


/* ============================================================================
   19. CHECKLIST DE SEGURIDAD POR SOFTWARE   (.eit-chk-*, .eit-paso*)
   ----------------------------------------------------------------------------
   Tres piezas, en orden de cuánto gritan:

     1. LA INSIGNIA de la lámina del escaparate. El documento de producto lo
        pide así: "un producto que se está vendiendo con la seguridad a medias
        tiene que gritarlo". Por eso el aviso no es un puntito al costado: es
        un renglón entero, con el nombre de lo que falta, sobre el fondo del
        estado. Si está en regla, es apenas un filete verde y un número.

     2. LA LISTA de los 50 puntos en la ficha. Es LO QUE MÁS SE USA de todo
        esto: alguien se sienta una vez y pasa por los cincuenta. El renglón
        está armado para eso — un solo salto de tabulación por punto (el grupo
        de radios) y las flechas cambian el estado. Nada de abrir un modal por
        ítem, nada de un botón "Guardar" al final.

     3. LOS PRIMEROS PASOS del catálogo vacío, que es lo primero que ve un
        Director el primer día.

   EL COLOR SIGUE LA REGLA DE LA CASA: no hay una paleta nueva. El veredicto
   del checklist (rojo/amarillo/verde/gris) se traduce a los cuatro estados del
   sistema en softwares-checklist.js y acá se usan los tokens de siempre.
   ============================================================================ */

/* ---- 19.1 La insignia de la lámina ---------------------------------------
   Vive adentro de <a class="eit-lamina">, así que no lleva nada apretable:
   toda la lámina ya es el objetivo táctil. */

.eit-chk-insignia{
  display:block;
  margin-top:var(--eit-s-3);
  padding:var(--eit-s-3);
  border:1px solid var(--eit-linea);
  border-left:3px solid var(--eit-neutro-marca);
  border-radius:var(--eit-r-1);
  background:var(--eit-neutro-suave);
}
.eit-chk-insignia.es-ok{       border-left-color:var(--eit-ok-marca);       background:var(--eit-ok-suave); }
.eit-chk-insignia.es-atencion{ border-left-color:var(--eit-atencion-marca); background:var(--eit-atencion-suave); }
.eit-chk-insignia.es-critico{  border-left-color:var(--eit-critico-marca);  background:var(--eit-critico-suave); }

.eit-chk-insignia-cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--eit-s-2);
}
.eit-chk-insignia-etq{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-chk-insignia-cab .eit-num{ font-size:var(--eit-fs-md); font-weight:600; color:var(--eit-tinta); }
.eit-chk-insignia-estado{
  display:block; margin-top:2px;
  font-size:var(--eit-fs-sm); font-weight:600; color:var(--eit-tinta-2);
}
.eit-chk-insignia.es-ok       .eit-chk-insignia-estado{ color:var(--eit-ok-ink); }
.eit-chk-insignia.es-atencion .eit-chk-insignia-estado{ color:var(--eit-atencion-ink); }
.eit-chk-insignia.es-critico  .eit-chk-insignia-estado{ color:var(--eit-critico-ink); }
.eit-chk-insignia-pie{
  display:block; margin-top:2px;
  font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
}
/* El grito. Va con el ink crítico y en 13px: tiene que leerse de corrido,
   no entrecerrando los ojos. */
.eit-chk-insignia-grito{
  margin:var(--eit-s-2) 0 0;
  padding-top:var(--eit-s-2);
  border-top:1px solid rgba(17,17,17,.08);
  font-size:var(--eit-fs-sm);
  line-height:var(--eit-lh-normal);
  color:var(--eit-critico-ink);
}

/* ---- 19.2 La cabecera del panel ------------------------------------------ */

.eit-chk-cab{
  padding:var(--eit-s-4);
  border:1px solid var(--eit-linea);
  border-left:3px solid var(--eit-neutro-marca);
  border-radius:var(--eit-r-2);
  background:var(--eit-superficie);
}
.eit-chk-cab.es-ok{       border-left-color:var(--eit-ok-marca); }
.eit-chk-cab.es-atencion{ border-left-color:var(--eit-atencion-marca); }
.eit-chk-cab.es-critico{  border-left-color:var(--eit-critico-marca); }

.eit-chk-cab-ttl{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--eit-s-3); }
.eit-chk-cab-num{
  font-size:var(--eit-fs-kpi); font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--eit-tinta);
}
.eit-chk-cab-sub{ font-size:var(--eit-fs-xs); color:var(--eit-tinta-3); }
.eit-chk-cab-exp{
  margin:var(--eit-s-3) 0 0; max-width:72ch;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-chk-motivos{ margin-top:var(--eit-s-3); font-size:var(--eit-fs-sm); color:var(--eit-tinta-2); }
.eit-chk-motivos li{ margin-bottom:4px; }

/* El avance de cada grupo, en una tira de barritas chicas. */
.eit-chk-grupos-resumen{
  display:grid; gap:var(--eit-s-4);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:var(--eit-s-4);
}
.eit-chk-grupo-mini .eit-micro{ display:block; margin-bottom:var(--eit-s-1); }
.eit-chk-grupo-mini .eit-meta{ display:block; margin-top:var(--eit-s-1); }

/* ---- 19.3 La barra de filtros del panel ---------------------------------- */

.eit-chk-barra{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--eit-s-3);
  margin:var(--eit-s-5) 0 var(--eit-s-3);
}
.eit-chk-filtros{ display:flex; flex-wrap:wrap; gap:4px; }
.eit-chk-filtro{
  min-height:32px; padding:0 var(--eit-s-3);
  border:1px solid var(--eit-linea-2); border-radius:var(--eit-r-1);
  background:var(--eit-papel);
  font:inherit; font-size:var(--eit-fs-sm); color:var(--eit-tinta-2);
  cursor:pointer;
  transition:background var(--eit-vel-1), border-color var(--eit-vel-1);
}
.eit-chk-filtro:hover{ background:var(--eit-superficie-2); }
.eit-chk-filtro.es-activo{
  background:var(--eit-tinta); border-color:var(--eit-tinta); color:var(--eit-tinta-inv);
}
.eit-chk-porques{ font-size:var(--eit-fs-sm); color:var(--eit-tinta-2); }

/* ---- 19.4 Los grupos ------------------------------------------------------ */

.eit-chk-grupo{ margin-top:var(--eit-s-6); }
.eit-chk-grupo-cab{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--eit-s-4);
  padding-bottom:var(--eit-s-2);
  border-bottom:1px solid var(--eit-linea-2);
}
.eit-chk-grupo-ttl{
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-md); font-weight:400;
  color:var(--eit-tinta);
}
.eit-chk-grupo-cuenta{
  flex:0 0 auto;
  font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
  font-variant-numeric:tabular-nums; text-align:right;
}
.eit-chk-grupo-cuenta.es-critico{ color:var(--eit-critico-ink); font-weight:600; }
.eit-chk-sub{ margin:var(--eit-s-4) 0 var(--eit-s-1); }

/* ---- 19.5 El renglón de un punto -----------------------------------------
   Tres columnas en escritorio: el texto, el grupo de estados y el botón de
   detalle. El detalle ocupa el ancho entero cuando se abre. */

.eit-chk-lista{ list-style:none; margin:0; padding:0; }

.eit-chk-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"txt estados mas" "det det det";
  align-items:start;
  gap:var(--eit-s-3);
  padding:var(--eit-s-3) var(--eit-s-3) var(--eit-s-3) var(--eit-s-4);
  border-bottom:1px solid var(--eit-linea);
  border-left:3px solid transparent;
}
.eit-chk-item:hover{ background:var(--eit-superficie); }
.eit-chk-item.es-listo{     border-left-color:var(--eit-ok-marca); }
.eit-chk-item.es-enCurso{   border-left-color:var(--eit-atencion-marca); }
.eit-chk-item.es-noAplica{  border-left-color:var(--eit-neutro-marca); }
.eit-chk-item.es-noAplica .eit-chk-item-ttl{ color:var(--eit-tinta-3); }
/* Un crítico sin resolver se ve desde el otro lado de la habitación. El
   filete rojo lo gana a todo lo demás, incluido el "listo" vencido. */
.eit-chk-item.es-critico.es-pendiente,
.eit-chk-item.es-critico.es-enCurso,
.eit-chk-item.es-vencido{
  border-left-color:var(--eit-critico-marca);
  background:var(--eit-critico-suave);
}
.eit-chk-item.es-huerfano{ opacity:.78; }
.eit-chk-item.es-sin-guardar{
  background:var(--eit-atencion-suave);
  border-left-color:var(--eit-atencion-marca);
}

.eit-chk-item-txt{ grid-area:txt; min-width:0; }
.eit-chk-item-ttl{
  display:block;
  font-size:var(--eit-fs-base); font-weight:500; line-height:var(--eit-lh-normal);
  color:var(--eit-tinta);
}
.eit-chk-marca{
  display:inline-block; margin-left:var(--eit-s-2); padding:1px 6px;
  border-radius:var(--eit-r-1);
  background:var(--eit-critico-suave);
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro); text-transform:uppercase;
  color:var(--eit-critico-ink);
  vertical-align:middle;
}
.eit-chk-marca.es-vencido{  background:var(--eit-atencion-suave); color:var(--eit-atencion-ink); }
.eit-chk-marca.es-huerfano{ background:var(--eit-neutro-suave);   color:var(--eit-neutro-ink); }

.eit-chk-porque{
  margin:var(--eit-s-1) 0 0; max-width:70ch;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-chk-pie{
  margin:var(--eit-s-1) 0 0;
  font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
}
.eit-chk-error{
  margin:var(--eit-s-2) 0 0;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-critico-ink);
}
/* El sello de "Guardado". Aparece y se va solo; con el movimiento apagado
   simplemente desaparece, sin transición (lo apaga el bloque global de
   prefers-reduced-motion). */
.eit-chk-sello{
  display:inline-block; margin-top:var(--eit-s-1);
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro); text-transform:uppercase;
  color:var(--eit-ok-ink);
  opacity:1; transition:opacity var(--eit-vel-3) var(--eit-ease);
}
.eit-chk-sello.es-ido{ opacity:0; }

/* ---- 19.6 Los cuatro estados, como un control segmentado -----------------
   Son RADIOS de verdad, no botones: el navegador ya sabe mover la selección
   con las flechas dentro de un grupo de radios, y eso es exactamente lo que
   hace falta para pasar por cincuenta puntos sin levantar las manos del
   teclado (Tab para entrar al punto, flecha para elegir, Tab al siguiente).
   El input está oculto para el ojo pero NO para el lector de pantalla ni
   para el foco: la clase .eit-sr lo recorta, no lo saca. */

.eit-chk-estados{
  grid-area:estados;
  display:flex; margin:0; padding:0; min-width:0;
  border:1px solid var(--eit-linea-fuerte);
  border-radius:var(--eit-r-1);
  overflow:hidden;
}
.eit-chk-opcion{
  /* El radio recortado por .eit-sr se posiciona absoluto: con esto queda
     adentro de su propio segmento y no se va a buscar un ancestro lejano,
     que es lo que hace saltar el scroll al tabular. */
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-right:1px solid var(--eit-linea-2);
  background:var(--eit-papel);
  font-size:var(--eit-fs-xs); line-height:1.2; white-space:nowrap;
  color:var(--eit-tinta-3);
  cursor:pointer;
  transition:background var(--eit-vel-1), color var(--eit-vel-1);
}
.eit-chk-opcion:last-child{ border-right:0; }
.eit-chk-opcion:hover{ background:var(--eit-superficie-2); color:var(--eit-tinta-2); }
.eit-chk-opcion input:disabled ~ span{ color:var(--eit-tinta-4); }

.eit-chk-opcion input:checked + span{ font-weight:600; }
.eit-chk-opcion.es-pendiente input:checked + span,
.eit-chk-opcion.es-noAplica  input:checked + span{ color:var(--eit-tinta); }
.eit-chk-opcion.es-enCurso   input:checked + span{ color:var(--eit-atencion-ink); }
.eit-chk-opcion.es-listo     input:checked + span{ color:var(--eit-ok-ink); }

/* El fondo del segmento elegido. Va con :has() y es puro adorno: el estado
   ya se lee por el peso y el color de la letra, y por el filete del renglón.
   Un navegador sin :has() muestra lo mismo un poco más plano. */
.eit-chk-opcion:has(input:checked){ background:var(--eit-superficie-2); }
.eit-chk-opcion.es-enCurso:has(input:checked){  background:var(--eit-atencion-suave); }
.eit-chk-opcion.es-listo:has(input:checked){    background:var(--eit-ok-suave); }
.eit-chk-opcion.es-noAplica:has(input:checked){ background:var(--eit-neutro-suave); }

/* El foco se dibuja sobre la etiqueta, porque el input está recortado. */
.eit-chk-opcion:has(input:focus-visible){
  outline:2px solid var(--eit-tinta);
  outline-offset:-2px;
}

/* ---- 19.7 El detalle de un punto ----------------------------------------- */

.eit-chk-mas{
  grid-area:mas;
  display:inline-flex; align-items:center; gap:4px;
  min-height:32px; padding:0 var(--eit-s-2);
  border:1px solid transparent; border-radius:var(--eit-r-1);
  background:none;
  font:inherit; font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
  cursor:pointer;
}
.eit-chk-mas:hover{ background:var(--eit-superficie-2); color:var(--eit-tinta-2); }
.eit-chk-mas .eit-icono{ width:14px; height:14px; transition:transform var(--eit-vel-2) var(--eit-ease); }
.eit-chk-mas[aria-expanded="true"] .eit-icono{ transform:rotate(180deg); }

.eit-chk-detalle{
  grid-area:det;
  margin-top:var(--eit-s-2);
  padding:var(--eit-s-3);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-1);
  background:var(--eit-papel);
}
.eit-chk-detalle-grilla{
  display:grid; gap:var(--eit-s-3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.eit-chk-detalle-grilla .eit-ancho{ grid-column:1/-1; }
.eit-chk-detalle-grilla .eit-textarea{ min-height:72px; }
.eit-chk-pide{ margin-bottom:var(--eit-s-3); }

/* ---- 19.8 En la tabla que compara todos los softwares -------------------- */

.eit-chk-celda-grito{
  margin-top:4px;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal);
  color:var(--eit-critico-ink);
}
.eit-chk-rojo{ color:var(--eit-critico-ink); }

/* ---- 19.9 Los primeros pasos del catálogo vacío -------------------------- */

.eit-pasos{ list-style:none; margin:0; padding:0; }
.eit-paso{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--eit-s-3);
  padding:var(--eit-s-3) 0;
  border-bottom:1px solid var(--eit-linea);
}
.eit-paso:last-child{ border-bottom:0; padding-bottom:0; }
.eit-paso:first-child{ padding-top:0; }
.eit-paso-num{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border:1px solid var(--eit-linea-fuerte); border-radius:var(--eit-r-pill);
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-xs);
  color:var(--eit-tinta-2);
}
.eit-paso-ttl{ display:block; font-size:var(--eit-fs-base); color:var(--eit-tinta); }
.eit-paso-txt{
  margin:2px 0 0; max-width:70ch;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}

/* ---- 19.10 El teléfono ----------------------------------------------------
   Una lista de cincuenta puntos con cuatro columnas es una tortura en un
   teléfono. Acá el renglón se apila: primero qué es y por qué importa,
   después los cuatro estados ocupando el ancho entero, con 44px de alto cada
   uno — que es la medida del dedo y la que usa todo el resto del sistema. */

@media (max-width:760px){
  .eit-chk-item{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"txt mas" "estados estados" "det det";
    gap:var(--eit-s-2);
    padding:var(--eit-s-4) var(--eit-s-3);
  }
  .eit-chk-estados{ width:100%; }
  .eit-chk-opcion{
    flex:1 1 0; min-width:0; min-height:44px; padding:6px 4px;
    font-size:var(--eit-fs-xs);
  }
  .eit-chk-mas{ min-height:44px; min-width:44px; }
  .eit-chk-filtro{ min-height:44px; }
  .eit-chk-grupo-cab{ flex-direction:column; align-items:flex-start; gap:var(--eit-s-1); }
  .eit-chk-grupo-cuenta{ text-align:left; }
  .eit-chk-cab-num{ font-size:var(--eit-fs-xl); }
  .eit-chk-detalle-grilla{ grid-template-columns:1fr; }
}

/* A 375px, "Pendiente" y "No aplica" apenas entran en un cuarto del ancho.
   Antes que recortarlas con puntos suspensivos —que deja dos botones que
   dicen lo mismo— se bajan a 11px, que es el piso del sistema, y se deja que
   corten en dos renglones dentro de los 44px de alto. */
@media (max-width:420px){
  .eit-chk-opcion{
    font-size:var(--eit-fs-micro);
    white-space:normal; text-align:center; line-height:1.15;
    padding:4px 2px;
  }
}

@media print{
  .eit-chk-barra,
  .eit-chk-mas,
  .eit-chk-estados{ display:none; }
  .eit-chk-item{ break-inside:avoid; display:block; }
  .eit-chk-insignia{ break-inside:avoid; }
}


/* ============================================================================
   20. PLANTILLAS DE PLAN   (.eit-plt-*)
   ----------------------------------------------------------------------------
   Lo que se ve cuando un software todavía no tiene planes, y lo que se ve al
   poner el mismo plan en varios softwares de una vez.

   UNA SOLA IDEA SOSTIENE TODO ESTE BLOQUE: el precio es el único dato que no
   viene puesto, y eso tiene que VERSE, no estar escrito en una ayuda que nadie
   lee. Por eso hay un renglón dedicado a decirlo en cada tarjeta de plantilla,
   y por eso en la pantalla de la tanda el campo del precio es lo único
   editable de cada renglón.

   NO HAY UNA PALETA NUEVA, como en todo el resto: los tokens son los de
   siempre y el aire sale del dial `--eit-densidad`.
   ============================================================================ */

/* ---- 20.1 Las tarjetas de plantilla ---------------------------------------
   `auto-fill` con 260px: cuatro plantillas entran en dos renglones en un
   monitor y en uno por renglón en un teléfono, sin un @media propio. */

.eit-plt-arranque{ margin-top:var(--eit-s-5); }
.eit-plt-arranque-cab{ margin-bottom:var(--eit-s-3); }
.eit-plt-arranque-txt{
  margin:var(--eit-s-1) 0 0; max-width:75ch;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}

.eit-plt-grilla{
  display:grid; gap:var(--eit-s-3);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}

.eit-plt-tarjeta{
  display:flex; flex-direction:column; gap:var(--eit-s-2);
  padding:var(--eit-s-4);
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
  background:var(--eit-papel);
}
.eit-plt-tarjeta-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--eit-s-2); }
.eit-plt-tarjeta-ttl{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-md);
  color:var(--eit-tinta);
}
.eit-plt-tarjeta-sub{
  margin:0; font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-plt-tarjeta-lista{
  margin:0; padding-left:var(--eit-s-4);
  font-size:var(--eit-fs-xs); line-height:1.55; color:var(--eit-tinta-3);
}
/* `margin-top:auto` empuja el pie al fondo: con listas de distinto largo, los
   botones de las cuatro tarjetas quedan alineados en la misma línea. */
.eit-plt-tarjeta-pie{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--eit-s-2);
  margin-top:auto; padding-top:var(--eit-s-3);
  border-top:1px solid var(--eit-linea);
}
/* El renglón que dice lo que falta. No es un error ni una advertencia: es la
   regla de la casa, así que va en la microetiqueta de siempre y no en rojo. */
.eit-plt-sinprecio{
  font-family:var(--eit-f-marca);
  font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro);
  text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-plt-porque{
  margin:var(--eit-s-2) 0 0; max-width:75ch;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-3);
}

/* ---- 20.2 Agregar otro escalón a un producto que ya tiene planes ---------- */

.eit-plt-sumar{
  margin-top:var(--eit-s-4); padding-top:var(--eit-s-3);
  border-top:1px solid var(--eit-linea);
}
.eit-plt-sumar .eit-acciones{ margin:var(--eit-s-2) 0; flex-wrap:wrap; }
.eit-plt-sumar .eit-meta{ display:block; }

/* ---- 20.3 La tanda: un software por renglón, un precio por software -------
   NO es una tabla. Una tabla de tres columnas acá sería una tabla con una sola
   celda editable por fila, y en un teléfono eso se apila mal. Es una lista de
   renglones que a 760px pasan de dos columnas a una, con el campo ocupando el
   ancho completo. */

.eit-plt-tanda{
  margin:var(--eit-s-4) 0;
  border:1px solid var(--eit-linea);
  border-radius:var(--eit-r-2);
}
.eit-plt-fila{
  display:grid; align-items:center; gap:var(--eit-s-3);
  grid-template-columns:minmax(0,1fr) minmax(0,260px);
  padding:var(--eit-s-3) var(--eit-s-4);
  border-bottom:1px solid var(--eit-linea);
}
.eit-plt-fila:last-child{ border-bottom:0; }
/* El que ya lo tiene se apaga: está ahí para que se vea que no falta, no para
   que se lo vuelva a tocar. */
.eit-plt-fila.es-puesto{ background:var(--eit-superficie-2); }
.eit-plt-fila-quien{ min-width:0; }
.eit-plt-fila-ttl{ display:block; font-size:var(--eit-fs-base); color:var(--eit-tinta); }
.eit-plt-fila-quien .eit-meta{ display:block; }
.eit-plt-fila-ya{ display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap; }
.eit-plt-fila-precio{ display:flex; gap:var(--eit-s-2); min-width:0; }
.eit-plt-fila-precio .eit-input{ flex:1 1 auto; min-width:0; }
.eit-plt-moneda{ flex:0 0 auto; width:auto; }
/* El error del renglón arranca en la segunda columna, debajo de su campo. */
.eit-plt-fila .eit-error{ grid-column:2; }

/* ---- 20.4 El teléfono -----------------------------------------------------
   A 375px, "nombre del software" y "precio" no entran uno al lado del otro sin
   dejar el campo en 90px, que es inescribible. Se apilan, el campo ocupa el
   renglón entero, y el alto y la letra de los controles ya los pone la regla
   general de `.eit-input`/`.eit-select` del bloque de celular (44px y 16px,
   que es lo que evita el zoom automático de iOS al tocar el campo). */

@media (max-width:760px){
  .eit-plt-fila{
    grid-template-columns:minmax(0,1fr);
    gap:var(--eit-s-2);
    padding:var(--eit-s-4) var(--eit-s-3);
  }
  .eit-plt-fila .eit-error{ grid-column:1; }
  .eit-plt-fila-precio .eit-input{ flex:1 1 auto; }
  /* La moneda con 16px de letra ya no cabe en "auto" junto al precio: se le
     da un ancho fijo que entra en 375px con el campo al lado. */
  .eit-plt-moneda{ flex:0 0 88px; width:88px; }
  .eit-plt-tarjeta-pie{ flex-direction:column; align-items:stretch; }
  .eit-plt-tarjeta-pie .eit-btn{ width:100%; }
}


/* ============================================================================
   21. RONDAS DEL MES, COSTO Y GANANCIA   (.eit-rnd-*, .eit-cst-*, .eit-gdg-*)
   ----------------------------------------------------------------------------
   Tres piezas nuevas, y una decisión de reuso que conviene leer antes de tocar
   nada:

   EL RENGLÓN TILDABLE DE UNA RONDA ES EL MISMO WIDGET QUE EL DEL CHECKLIST.
   `rondas-piezas.js` dibuja sus puntos con las clases `.eit-chk-item`,
   `.eit-chk-estados` y `.eit-chk-opcion` del bloque 19, a propósito. Es
   exactamente el mismo gesto —un grupo de radios de verdad, un solo salto de
   tabulación por punto, las flechas cambian el estado, 44px de alto en el
   teléfono— y ese control ya está resuelto, probado y con su bloque de
   celular hecho. Dos copias del mismo control terminan con una arreglada y la
   otra no. Lo único que hace falta acá son los estados que el checklist no
   tiene: él dice "listo", las rondas dicen "hecho".

   Y EL COLOR SIGUE LA REGLA DE LA CASA: no hay una paleta nueva. Los
   veredictos de una ronda (hecha / a medias / sin empezar / salteada) se
   traducen a los cuatro estados del sistema en `rondas-catalogo.js` y acá se
   usan los tokens de siempre.
   ============================================================================ */

/* ---- 21.1 El estado "hecho", que el checklist no tiene -------------------- */

.eit-chk-item.es-hecho{ border-left-color:var(--eit-ok-marca); }
.eit-chk-opcion.es-hecho input:checked + span{ color:var(--eit-ok-ink); }
.eit-chk-opcion.es-hecho:has(input:checked){ background:var(--eit-ok-suave); }

/* Un punto que este mes NO TOCA (la restauración de prueba, que va cada seis
   meses) se ve apagado y con el filete neutro: no es un pendiente ni un
   hecho, está fuera de la cuenta del mes. Si se pintara como pendiente, la
   ronda quedaría en rojo cinco meses de cada seis por un control al día. */
.eit-rnd-item.es-no-toca{
  opacity:.72;
  border-left-color:var(--eit-neutro-marca);
  background:var(--eit-superficie);
}

/* ---- 21.2 La cabecera de una ronda --------------------------------------- */

.eit-rnd-cab{
  padding:var(--eit-s-4);
  border:1px solid var(--eit-linea);
  border-left:3px solid var(--eit-neutro-marca);
  border-radius:var(--eit-r-2) var(--eit-r-2) 0 0;
  background:var(--eit-superficie);
}
.eit-rnd-cab.es-ok{       border-left-color:var(--eit-ok-marca);       background:var(--eit-ok-suave); }
.eit-rnd-cab.es-atencion{ border-left-color:var(--eit-atencion-marca); background:var(--eit-atencion-suave); }
.eit-rnd-cab.es-critico{  border-left-color:var(--eit-critico-marca);  background:var(--eit-critico-suave); }

.eit-rnd-cab-ttl{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--eit-s-4); flex-wrap:wrap;
}
.eit-rnd-cab-nom{
  margin:2px 0 0;
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-lg); font-weight:400;
  line-height:var(--eit-lh-apretado); color:var(--eit-tinta);
}
.eit-rnd-cab-num{ display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap; }
.eit-rnd-cab-num .eit-num{ font-size:var(--eit-fs-md); font-weight:600; color:var(--eit-tinta); }
.eit-rnd-cab-sub{ font-size:var(--eit-fs-xs); color:var(--eit-tinta-3); }
.eit-rnd-cab-desc,
.eit-rnd-cab-porque,
.eit-rnd-cab-exp,
.eit-rnd-cab-alcance{
  margin:var(--eit-s-2) 0 0; max-width:78ch;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
/* El porqué de la ronda entera va en letra más chica y apagada: se lee una
   vez, no cada mes, y si pesara igual que el estado taparía el número. */
.eit-rnd-cab-porque,
.eit-rnd-cab-alcance{ font-size:var(--eit-fs-xs); color:var(--eit-tinta-3); }
.eit-rnd-motivos{
  margin:var(--eit-s-2) 0 0;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-rnd-sub{ margin:var(--eit-s-5) 0 var(--eit-s-2); }
.eit-rnd-intro{ margin:calc(var(--eit-s-3) * -1) 0 var(--eit-s-3); max-width:78ch; }

/* La lista de una ronda cuelga de su cabecera, sin aire en el medio: son una
   sola pieza y el borde continuo lo dice mejor que un título suelto. */
.eit-rnd .eit-chk-lista{
  margin:0; padding:0; list-style:none;
  border:1px solid var(--eit-linea); border-top:0;
  border-radius:0 0 var(--eit-r-2) var(--eit-r-2);
  background:var(--eit-papel);
}
.eit-rnd .eit-chk-item:last-child{ border-bottom:0; }

/* ---- 21.3 El número calculado de la cuarta ronda -------------------------
   Es lo que distingue a "Dinero del mes" de un checklist de adorno: el número
   está puesto, con de cuándo es, y lo que se tilda es haberlo mirado. Por eso
   pesa más que el texto del punto. */

.eit-rnd-num{
  display:block; margin:var(--eit-s-2) 0 0;
  padding:var(--eit-s-3);
  border:1px solid var(--eit-linea-2); border-radius:var(--eit-r-2);
  background:var(--eit-superficie);
}
.eit-rnd-num.es-ok{      border-color:var(--eit-ok-marca);       background:var(--eit-ok-suave); }
.eit-rnd-num.es-alerta{  border-color:var(--eit-atencion-marca); background:var(--eit-atencion-suave); }
.eit-rnd-num.es-sindato{ border-style:dashed; }
.eit-rnd-num-val{
  display:block;
  font-family:var(--eit-f-texto); font-size:var(--eit-fs-lg); font-weight:600;
  font-variant-numeric:tabular-nums; line-height:var(--eit-lh-apretado);
  color:var(--eit-tinta);
}
.eit-rnd-num.es-sindato .eit-rnd-num-val{ font-size:var(--eit-fs-md); color:var(--eit-tinta-3); }
.eit-rnd-num.es-alerta  .eit-rnd-num-val{ color:var(--eit-atencion-ink); }
.eit-rnd-num-cuando{
  display:block; margin-top:2px;
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro); text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-rnd-num-pie{
  display:block; margin-top:var(--eit-s-1); max-width:70ch;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-rnd-num .eit-btn{ margin-top:var(--eit-s-2); }
.eit-rnd-cadencia{
  margin:var(--eit-s-2) 0 0; max-width:70ch;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-3);
}

/* ---- 21.4 La insignia de la lámina del escaparate ------------------------
   Vive adentro de <a class="eit-lamina">, así que no lleva nada apretable:
   toda la lámina ya es el objetivo táctil. Misma anatomía que la del
   checklist, a propósito: son dos avisos del mismo tipo en el mismo lugar y
   si se vieran distintos competirían en vez de leerse. */

.eit-rnd-insignia{
  display:block; margin-top:var(--eit-s-2);
  padding:var(--eit-s-2) var(--eit-s-3);
  border-left:3px solid var(--eit-neutro-marca);
  background:var(--eit-superficie);
}
.eit-rnd-insignia.es-ok{       border-left-color:var(--eit-ok-marca);       background:var(--eit-ok-suave); }
.eit-rnd-insignia.es-atencion{ border-left-color:var(--eit-atencion-marca); background:var(--eit-atencion-suave); }
.eit-rnd-insignia.es-critico{  border-left-color:var(--eit-critico-marca);  background:var(--eit-critico-suave); }
.eit-rnd-insignia-cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--eit-s-2);
}
.eit-rnd-insignia-etq{
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro); text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-rnd-insignia-cab .eit-num{ font-size:var(--eit-fs-sm); font-weight:600; color:var(--eit-tinta); }
.eit-rnd-insignia-estado{
  display:block; margin-top:2px;
  font-size:var(--eit-fs-sm); font-weight:500; color:var(--eit-tinta-2);
}
.eit-rnd-insignia.es-ok       .eit-rnd-insignia-estado{ color:var(--eit-ok-ink); }
.eit-rnd-insignia.es-atencion .eit-rnd-insignia-estado{ color:var(--eit-atencion-ink); }
.eit-rnd-insignia.es-critico  .eit-rnd-insignia-estado{ color:var(--eit-critico-ink); }
.eit-rnd-insignia-pie{
  display:block; font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
}
.eit-rnd-insignia-grito{
  margin:var(--eit-s-1) 0 0;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-critico-ink);
}

/* La leyenda del producto interno, donde las demás láminas tienen sus cifras.
   Ocupa el mismo lugar pero dice otra cosa: no hay plata que mostrar. */
.eit-lamina-interno{
  margin:var(--eit-s-3) 0 0;
  padding:var(--eit-s-3);
  border:1px dashed var(--eit-linea-2); border-radius:var(--eit-r-2);
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}

/* ---- 21.5 La tarjeta plegable de un software en Rondas del mes ------------
   Catorce softwares por tres rondas son cuarenta y dos paneles. Se abre uno a
   la vez y se pinta recién al abrirlo: en el teléfono es la única forma de que
   la pantalla responda. Las tiras de colores dicen cómo está cada ronda sin
   tener que abrir nada. */

.eit-rnd-sw{
  position:relative;
  margin-bottom:var(--eit-s-3);
  border:1px solid var(--eit-linea); border-left:3px solid var(--eit-neutro-marca);
  border-radius:var(--eit-r-2);
  background:var(--eit-papel);
}
.eit-rnd-sw.es-ok{       border-left-color:var(--eit-ok-marca); }
.eit-rnd-sw.es-atencion{ border-left-color:var(--eit-atencion-marca); }
.eit-rnd-sw.es-critico{  border-left-color:var(--eit-critico-marca); }

.eit-rnd-sw-cab{
  display:flex; align-items:center; gap:var(--eit-s-3);
  width:100%; min-height:56px; padding:var(--eit-s-3) var(--eit-s-4);
  border:0; background:none; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
}
.eit-rnd-sw-cab:hover{ background:var(--eit-superficie); }
.eit-rnd-sw-cab:focus-visible{ outline:2px solid var(--eit-tinta); outline-offset:-2px; }
.eit-rnd-sw-txt{ flex:1 1 auto; min-width:0; }
.eit-rnd-sw-nom{
  display:block;
  font-size:var(--eit-fs-md); color:var(--eit-tinta);
}
.eit-rnd-sw-estado{ display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap; }
.eit-rnd-sw-estado .eit-num{ font-size:var(--eit-fs-sm); font-variant-numeric:tabular-nums; }
.eit-rnd-sw-flecha{
  flex:0 0 auto; width:16px; height:16px;
  transition:transform var(--eit-vel-2) var(--eit-ease);
}
.eit-rnd-sw-cab[aria-expanded="true"] .eit-rnd-sw-flecha{ transform:rotate(180deg); }

/* Las tiras: una por ronda, con el color de su estado. No son semáforos
   redondos sino tiras, que es lo que ya usa el Centro de Mando. */
.eit-rnd-sw-tiras{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding:0 var(--eit-s-4) var(--eit-s-3);
}
.eit-rnd-tira{
  padding:var(--eit-s-2) var(--eit-s-3);
  border-top:3px solid var(--eit-neutro-marca);
  background:var(--eit-superficie);
}
.eit-rnd-tira.es-ok{       border-top-color:var(--eit-ok-marca);       background:var(--eit-ok-suave); }
.eit-rnd-tira.es-atencion{ border-top-color:var(--eit-atencion-marca); background:var(--eit-atencion-suave); }
.eit-rnd-tira.es-critico{  border-top-color:var(--eit-critico-marca);  background:var(--eit-critico-suave); }
.eit-rnd-tira-nom{
  display:block;
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro); text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-rnd-tira-cuenta{
  display:block;
  font-size:var(--eit-fs-sm); font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--eit-tinta);
}
.eit-rnd-tira-estado{ display:block; font-size:var(--eit-fs-xs); color:var(--eit-tinta-2); }

.eit-rnd-sw-cuerpo{ padding:0 var(--eit-s-4) var(--eit-s-4); }
.eit-rnd-sw-cuerpo > .eit-bloque:first-child{ margin-top:0; }

/* ---- 21.6 El costo de mantenimiento -------------------------------------- */

.eit-cst-vacio{
  margin:0 0 var(--eit-s-3); max-width:72ch;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-cst-vacio:last-child{ margin-bottom:0; }

/* ---- 21.7 El desglose de la ganancia ------------------------------------
   "Si el Director no puede abrirlo y seguir la cuenta, no lo va a usar." Por
   eso cada renglón arranca del total del anterior y los subtotales se marcan:
   la columna se tiene que poder sumar a mano con un dedo. Y una moneda por
   columna, porque no se suman nunca. */

.eit-gdg-cab{
  margin:0 0 var(--eit-s-3);
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro); text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-gdg-cols{
  display:grid; gap:var(--eit-s-5);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.eit-gdg-col-cab{ margin-bottom:var(--eit-s-2); }
.eit-gdg-lista{ list-style:none; margin:0; padding:0; }
.eit-gdg-fila{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--eit-s-3);
  padding:var(--eit-s-2) 0;
  border-bottom:1px solid var(--eit-linea);
}
.eit-gdg-fila.es-total{
  border-top:1px solid var(--eit-linea-2);
  border-bottom:1px solid var(--eit-linea-2);
  padding:var(--eit-s-3) 0;
  background:var(--eit-superficie);
}
/* El total FINAL pesa más que los intermedios: es el número que se busca. */
.eit-gdg-fila.es-final{ background:var(--eit-superficie-2); }
.eit-gdg-fila.es-final .eit-num{ font-size:var(--eit-fs-md); }
.eit-gdg-fila.es-sindato .eit-gdg-etq{ color:var(--eit-tinta-3); }
.eit-gdg-txt{ min-width:0; }
.eit-gdg-etq{ display:block; font-size:var(--eit-fs-sm); color:var(--eit-tinta); }
.eit-gdg-fila.es-total .eit-gdg-etq{ font-weight:600; }
.eit-gdg-ayuda{
  display:block; margin-top:2px; max-width:56ch;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-3);
}
.eit-gdg-motivo{
  display:block; margin-top:var(--eit-s-1); max-width:56ch;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-atencion-ink);
}
.eit-gdg-val{
  flex:0 0 auto; text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.eit-gdg-sindato{ font-size:var(--eit-fs-sm); color:var(--eit-tinta-3); }
/* Un cero se muestra —la columna se tiene que poder sumar entera— pero sin
   signo y apagado: no sumó ni restó nada y no tiene que competir con los
   renglones que sí movieron plata. */
.eit-gdg-cero{ color:var(--eit-tinta-3); }

/* ---- 21.8 El teléfono ----------------------------------------------------
   Cuatro rondas con sus puntos en un teléfono es mucho, así lo dijo el dueño.
   Lo que se hace acá: la cabecera de la ronda se apila, la tarjeta de un
   software también, las tiras pasan a una sola columna y el número calculado
   queda a ancho completo. El renglón tildable ya se apila solo, con sus 44px
   de alto por estado, porque usa las clases del bloque 19. */

@media (max-width:760px){
  .eit-rnd-cab{ padding:var(--eit-s-3); }
  .eit-rnd-cab-ttl{ flex-direction:column; gap:var(--eit-s-2); }
  .eit-rnd-cab-nom{ font-size:var(--eit-fs-md); }
  /* EL PORQUÉ DE LA RONDA ENTERA NO SE MUESTRA EN EL TELÉFONO. "Cuatro rondas
     con sus puntos en un teléfono es mucho", y este párrafo explica por qué
     existe la ronda: se lee una vez, no todos los meses. Lo que NO se esconde
     es la `descripcion` (qué se controla) ni el porqué de cada PUNTO, que es
     el que hace falta en el momento de decidir si se tilda o no. */
  .eit-rnd-cab-porque{ display:none; }
  .eit-rnd-sw-cab{
    flex-wrap:wrap; min-height:44px;
    padding:var(--eit-s-3) var(--eit-s-8) var(--eit-s-3) var(--eit-s-3);
  }
  .eit-rnd-sw-estado{ width:100%; }
  .eit-rnd-sw-flecha{ position:absolute; right:var(--eit-s-3); top:var(--eit-s-4); }
  .eit-rnd-sw-tiras{ grid-template-columns:1fr; padding:0 var(--eit-s-3) var(--eit-s-3); }
  .eit-rnd-sw-cuerpo{ padding:0 var(--eit-s-2) var(--eit-s-3); }
  .eit-rnd-num{ padding:var(--eit-s-2); }
  .eit-rnd-num-val{ font-size:var(--eit-fs-md); }
  .eit-rnd-num .eit-btn{ width:100%; min-height:44px; }
  .eit-gdg-cols{ grid-template-columns:1fr; }
  /* A 375px el rótulo y el importe no caben en la misma línea sin partir el
     número. Se apilan: el importe abajo, alineado a la izquierda con el
     rótulo, que es más fácil de seguir con el dedo que una columna derecha
     de 90px. */
  .eit-gdg-fila{ flex-direction:column; gap:var(--eit-s-1); }
  .eit-gdg-val{ text-align:left; }
}

@media print{
  .eit-rnd-sw-cab,
  .eit-rnd-num .eit-btn{ display:none; }
  .eit-rnd-sw-cuerpo{ display:block !important; }
  .eit-rnd-item,
  .eit-rnd-cab,
  .eit-rnd-insignia,
  .eit-gdg-col{ break-inside:avoid; }
}

/* ===========================================================================
   22. DOMINIOS — el nombre, cuándo vence y dónde está delegado
   ===========================================================================
   Un dominio vencido es el sistema caído y el nombre a la venta para
   cualquiera, así que esta sección tiene una sola prioridad visual: que los
   DÍAS QUE FALTAN se lean antes que nada, y que "sin fecha cargada" no se
   parezca a "falta mucho".

   Se reusa todo lo que ya existe —los cuatro tonos del sistema, `eit-num`,
   `eit-chk-marca`, `eit-chip`— y se agrega solamente lo que no tenía forma:
   el renglón de un dominio, la insignia de la tarjeta y el dictamen que va
   pegado a un punto del checklist. */

/* ---- 22.1 La cabecera del panel ---------------------------------------- */

.eit-dom-cab{
  padding:var(--eit-s-4);
  border:1px solid var(--eit-linea);
  border-left:3px solid var(--eit-neutro-marca);
  border-radius:var(--eit-r-2);
  background:var(--eit-superficie);
}
.eit-dom-cab.es-ok{       border-left-color:var(--eit-ok-marca); }
.eit-dom-cab.es-atencion{ border-left-color:var(--eit-atencion-marca); }
.eit-dom-cab.es-critico{  border-left-color:var(--eit-critico-marca); }
.eit-dom-cab-ttl{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--eit-s-3); flex-wrap:wrap;
}
.eit-dom-cab-nom{
  margin:2px 0 0;
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-lg); font-weight:500;
  line-height:var(--eit-lh-apretado); color:var(--eit-tinta);
}
.eit-dom-cab-num{ display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap; }
.eit-dom-cab-exp{
  margin:var(--eit-s-3) 0 0; max-width:78ch;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-dom-avisos{
  margin:var(--eit-s-3) 0 0; max-width:78ch;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}

/* ---- 22.2 El renglón de un dominio -------------------------------------
   Es una ficha y no una fila de tabla a propósito: cada dominio trae ocho
   datos y ninguno es opcional de mirar. Una tabla de ocho columnas en un
   teléfono se lee con scroll horizontal, que es como no leerla. */

.eit-dom-lista{
  margin:var(--eit-s-4) 0 0; padding:0; list-style:none;
  display:grid; gap:var(--eit-s-3);
}
.eit-dom-item{
  padding:var(--eit-s-4);
  border:1px solid var(--eit-linea);
  border-left:3px solid var(--eit-neutro-marca);
  border-radius:var(--eit-r-2);
  background:var(--eit-papel);
}
.eit-dom-item.es-ok{       border-left-color:var(--eit-ok-marca); }
.eit-dom-item.es-atencion{ border-left-color:var(--eit-atencion-marca); background:var(--eit-atencion-suave); }
.eit-dom-item.es-critico{  border-left-color:var(--eit-critico-marca);  background:var(--eit-critico-suave); }
.eit-dom-item-cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--eit-s-3); flex-wrap:wrap;
}
.eit-dom-item-nom{ display:flex; align-items:center; gap:var(--eit-s-2); flex-wrap:wrap; }

/* El nombre del dominio va en la tipografía de los números y no en la del
   texto: es una cadena técnica que se compara letra por letra contra lo que
   dice el registrador, y en una proporcional la ele y el uno se confunden. */
.eit-dom-nombre{
  font-family:var(--eit-f-texto); font-size:var(--eit-fs-md); font-weight:600;
  font-variant-numeric:tabular-nums; word-break:break-all; color:var(--eit-tinta);
}
.eit-dom-item-cuenta{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  text-align:right;
}
.eit-dom-item-cuenta .eit-num{
  font-size:var(--eit-fs-md); font-weight:600; color:var(--eit-tinta);
}
.eit-dom-item.es-critico  .eit-dom-item-cuenta .eit-num{ color:var(--eit-critico-ink); }
.eit-dom-item.es-atencion .eit-dom-item-cuenta .eit-num{ color:var(--eit-atencion-ink); }
.eit-dom-item-fecha{ font-size:var(--eit-fs-xs); color:var(--eit-tinta-3); }
.eit-dom-item-exp,
.eit-dom-item-pie{
  margin:var(--eit-s-2) 0 0; max-width:74ch;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-dom-item-pie{ color:var(--eit-tinta-3); }
.eit-dom-item-notas{
  margin:var(--eit-s-3) 0 0; padding:var(--eit-s-3);
  border-left:2px solid var(--eit-linea-2);
  max-width:74ch;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
  white-space:pre-line;
}
.eit-dom-item .eit-datos{ margin-top:var(--eit-s-3); }
.eit-dom-item-acciones{ margin-top:var(--eit-s-3); }

/* El renglón de abajo de un dato: lo que falta anotar, dicho sin gritar. Es
   el lugar donde se dice "está el proveedor pero no los servidores", que no
   es un error pero deja la mitad del problema sin resolver. */
.eit-dom-flojo{
  display:block; margin-top:2px;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-3);
}

/* ---- 22.3 La insignia de la lámina del escaparate ----------------------
   Misma anatomía que la del checklist y la de la ronda, a propósito: son
   avisos del mismo tipo en el mismo lugar y si se vieran distintos
   competirían en vez de leerse. Vive adentro de un <a>, así que no lleva
   nada apretable. */

.eit-dom-insignia{
  display:block; margin-top:var(--eit-s-2);
  padding:var(--eit-s-2) var(--eit-s-3);
  border-left:3px solid var(--eit-neutro-marca);
  background:var(--eit-superficie);
}
.eit-dom-insignia.es-ok{       border-left-color:var(--eit-ok-marca);       background:var(--eit-ok-suave); }
.eit-dom-insignia.es-atencion{ border-left-color:var(--eit-atencion-marca); background:var(--eit-atencion-suave); }
.eit-dom-insignia.es-critico{  border-left-color:var(--eit-critico-marca);  background:var(--eit-critico-suave); }
.eit-dom-insignia-cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--eit-s-2);
}
.eit-dom-insignia-etq{
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro); text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-dom-insignia-cab .eit-num{ font-size:var(--eit-fs-sm); font-weight:600; color:var(--eit-tinta); }
.eit-dom-insignia.es-critico  .eit-dom-insignia-cab .eit-num{ color:var(--eit-critico-ink); }
.eit-dom-insignia.es-atencion .eit-dom-insignia-cab .eit-num{ color:var(--eit-atencion-ink); }
.eit-dom-insignia-nom{
  display:block; margin-top:2px;
  font-family:var(--eit-f-texto); font-size:var(--eit-fs-sm); font-weight:500;
  word-break:break-all; color:var(--eit-tinta-2);
}
.eit-dom-insignia-pie{
  display:block; font-size:var(--eit-fs-xs); color:var(--eit-tinta-3);
}
.eit-dom-insignia-grito{
  margin:var(--eit-s-1) 0 0;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-critico-ink);
}

/* ---- 22.4 El dictamen pegado a un punto del checklist ------------------
   Lo que contesta el dato cargado, al lado del punto que el Director tilda a
   mano. Tiene que leerse como OTRA VOZ y no como parte del punto: por eso el
   recuadro punteado, que es el mismo recurso que usa la leyenda del producto
   interno para decir "esto es un comentario del sistema, no un campo".

   Cuando el tilde y el dato NO coinciden el recuadro pasa a línea llena y
   color: ese caso es el más valioso de los tres y no puede verse igual que
   una confirmación. */

.eit-dom-dictamen{
  display:block; margin:var(--eit-s-2) 0 0;
  padding:var(--eit-s-2) var(--eit-s-3);
  border:1px dashed var(--eit-linea-2); border-radius:var(--eit-r-2);
  background:var(--eit-superficie);
  max-width:74ch;
}
.eit-dom-dictamen.es-discrepa{ border-style:solid; }
.eit-dom-dictamen.es-ok.es-discrepa{       border-color:var(--eit-ok-marca);       background:var(--eit-ok-suave); }
.eit-dom-dictamen.es-atencion.es-discrepa{ border-color:var(--eit-atencion-marca); background:var(--eit-atencion-suave); }
.eit-dom-dictamen.es-critico.es-discrepa{  border-color:var(--eit-critico-marca);  background:var(--eit-critico-suave); }
.eit-dom-dictamen-etq{
  display:block;
  font-family:var(--eit-f-marca); font-size:var(--eit-fs-micro);
  letter-spacing:var(--eit-tr-micro); text-transform:uppercase;
  color:var(--eit-tinta-3);
}
.eit-dom-dictamen.es-discrepa .eit-dom-dictamen-etq{ color:var(--eit-critico-ink); }
.eit-dom-dictamen.es-ok.es-discrepa .eit-dom-dictamen-etq{ color:var(--eit-ok-ink); }
.eit-dom-dictamen.es-atencion.es-discrepa .eit-dom-dictamen-etq{ color:var(--eit-atencion-ink); }
.eit-dom-dictamen-txt{
  display:block; margin-top:2px;
  font-size:var(--eit-fs-sm); line-height:var(--eit-lh-normal); color:var(--eit-tinta);
  word-break:break-word;
}
.eit-dom-dictamen-pie,
.eit-dom-dictamen-aviso{
  display:block; margin:var(--eit-s-1) 0 0;
  font-size:var(--eit-fs-xs); line-height:var(--eit-lh-normal); color:var(--eit-tinta-2);
}
.eit-dom-dictamen-aviso{ font-weight:500; color:var(--eit-tinta); }

/* ---- 22.5 El teléfono ---------------------------------------------------
   A 375px la cuenta de días no entra en la misma línea que el nombre sin
   partir el número. Se apila, y la cuenta pasa a la izquierda: alineada con
   el nombre se sigue con el dedo mejor que una columna derecha de 90px. Los
   botones van a ancho completo con 44px de alto, que es el área táctil
   mínima de la casa. */

@media (max-width:760px){
  .eit-dom-cab{ padding:var(--eit-s-3); }
  .eit-dom-cab-ttl{ flex-direction:column; gap:var(--eit-s-2); }
  .eit-dom-cab-nom{ font-size:var(--eit-fs-md); }
  .eit-dom-item{ padding:var(--eit-s-3); }
  .eit-dom-item-cab{ flex-direction:column; gap:var(--eit-s-2); }
  .eit-dom-item-cuenta{ align-items:flex-start; text-align:left; }
  .eit-dom-item-acciones{ flex-direction:column; align-items:stretch; }
  .eit-dom-item-acciones .eit-btn{ width:100%; min-height:44px; }
  .eit-dom-nombre{ font-size:var(--eit-fs-sm); }
}

@media print{
  .eit-dom-item-acciones{ display:none; }
  .eit-dom-item,
  .eit-dom-cab,
  .eit-dom-insignia,
  .eit-dom-dictamen{ break-inside:avoid; }
}