/* ============================================================
   EJN — Capa ERP
   Se carga después de ejn-app.css. Contiene:
     1. Densidad del panel (más información en la misma pantalla)
     2. Navegación secundaria del módulo
     3. Componentes de trabajo: tarjeta, KPI, pestañas, fichas, pasos
     4. Grilla
   No toca ejn-tokens.css: la marca sigue siendo la fuente de verdad.
   La densidad se aplica solo dentro del panel; el acceso conserva
   los tamaños del manual.
   ============================================================ */

/* ---------- 1. Densidad ----------
   El manual fija 14 px "densidad ERP". En pantallas de operación con
   grillas de 15 filas y fichas de 30 campos, 14 px obliga a scrollear
   de más. Bajamos un punto dentro del panel y comprimimos la escala
   de espaciado. Fuera del panel nada cambia. */
.app {
  --fs-h1: 19px;
  --fs-h2: 16px;
  --fs-h3: 14px;
  --fs-body: 13px;
  --fs-small: 11.5px;
  --fs-caption: 10.5px;

  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 32px;

  --sidebar-width: 232px;
  --topbar-height: 48px;
}

.app .contenido { padding: var(--space-5) var(--space-6); }
.app .barra-lateral { padding: var(--space-4) var(--space-3); }
.app .barra-lateral__marca { padding-bottom: var(--space-4); }
.app .barra-lateral__wordmark { font-size: 17px; }
.app .barra-lateral__nav { padding-top: var(--space-4); }
.app .encabezado { margin-bottom: var(--space-4); gap: var(--space-4); }
.app .encabezado h1 { font-size: var(--fs-h1); }
.app .btn { padding: 7px 13px; font-size: 12.5px; }
.app .campo input,
.app .campo select,
.app .campo textarea { padding: 6px 9px; font-size: 12.5px; }
.app .campo { gap: 4px; }

/* ---------- 2. Árbol de navegación ----------
   Tres niveles, y cada uno se lee distinto:
     · APLICACIÓN   el módulo. Texto claro, escudo, siempre visible.
     · CATEGORÍA    agrupa pantallas. Se pliega y despliega.
     · PANTALLA     la hoja del árbol. Sangrada bajo su categoría.
   Ningún elemento del menú tiene fondo claro: la barra es navy y todo lo
   que vive adentro se distingue por peso, color e indentación. */

.barra-lateral__nav { gap: 0; }

.nav-titulo {
  margin: 14px 0 4px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gray-600);
}

/* Nivel 1 — aplicación */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  color: var(--gray-700);
  font-size: 12.5px;
  text-decoration: none;
}

a.nav-item:hover { background: var(--gray-100); color: var(--ejn-navy); }

.nav-item--activo {
  background: var(--module-accent-soft, var(--ejn-navy-soft));
  color: var(--ejn-navy);
  font-weight: var(--fw-semibold);
  border-left-color: var(--module-accent, var(--ejn-navy));
}

.nav-item__punto { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
                   background: var(--module-accent, var(--gray-300)); }

/* Icono de la entrada. Con el menú plegado es lo único que queda, así que
   tiene que alcanzar por sí solo para reconocer la pantalla. */
.ico { flex-shrink: 0; opacity: .72; }
.nav-item:hover .ico,
.nav-item--activo .ico { opacity: 1; }
.nav-item--activo .ico { color: var(--module-accent, var(--ejn-azul-acento)); }
/* El escudo del módulo ya trae su color de marca: va siempre a plena opacidad. */
.ico--escudo { opacity: 1; }
.nav-item--bloqueado .ico--escudo { filter: grayscale(1); opacity: .4; }
.nav-item__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item--kernel .nav-item__punto { background: var(--ejn-navy); }
.nav-item--bloqueado { color: var(--gray-600); cursor: not-allowed; }
.nav-item--bloqueado .nav-item__punto { background: var(--gray-300); }

/* Nivel 2 — categoría plegable. Sin fondo, sin borde, sin apariencia de botón. */
.nav-grupo {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 6px 0 1px;
  padding: 4px 10px 4px 18px;
  background: transparent;
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-600);
}

.nav-grupo:hover { background: var(--gray-100); color: var(--gray-700); }
.nav-grupo:focus-visible { outline: 2px solid var(--module-accent, var(--ejn-azul-acento)); outline-offset: -2px; }

.nav-grupo__flecha {
  display: inline-flex;
  width: 9px;
  flex-shrink: 0;
  transition: transform .15s ease;
  font-size: 8px;
  line-height: 1;
}

.nav-grupo--abierto .nav-grupo__flecha { transform: rotate(90deg); }
.nav-grupo__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Nivel 3 — pantalla */
.nav-sub { display: flex; flex-direction: column; gap: 0; }
.nav-sub--cerrado { display: none; }

.nav-sub .nav-item {
  padding: 5px 10px 5px 31px;
  font-size: 12px;
  color: var(--gray-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.nav-sub .nav-item:hover { background: var(--gray-100); color: var(--ejn-navy); }

.nav-sub .nav-item--activo {
  background: var(--module-accent-soft, var(--ejn-azul-acento-soft));
  color: var(--ejn-navy);
  font-weight: var(--fw-semibold);
  border-left-color: var(--module-accent, var(--ejn-azul-acento));
}

.nav-sub .nav-item .ico { opacity: .62; }
.nav-sub .nav-item:hover .ico,
.nav-sub .nav-item--activo .ico { opacity: 1; }

/* ---------- 2b. Barra lateral plegada ----------
   Queda una columna de iconos de 22 px, con separadores entre ramas y el
   escudo del módulo arriba de las suyas. Ancho suficiente para que el icono
   respire y se pueda apuntar con el mouse sin errar. */
.app--plegado .barra-lateral { width: 62px; flex-shrink: 0; padding: var(--space-4) 7px; overflow: hidden; }

.app--plegado .barra-lateral__wordmark,
.app--plegado .nav-item__texto,
.app--plegado .nav-grupo__texto,
.app--plegado .nav-grupo__flecha,
.app--plegado .version__nom { display: none; }

/* 08/09/2026: "Cerrar sesion" tiene que seguir siendo alcanzable con el
   menu plegado -- antes se ocultaba el <form> entero (bug real, Daniel no
   se podia desloguear). Ahora solo se oculta el texto (.nav-item__texto,
   arriba) y el boton queda como icono solo, del mismo tamano que un
   .nav-item de la navegacion. */
.app--plegado .btn-salir {
  width: 32px; height: 32px; padding: 0; margin: 0 auto;
  border-radius: var(--radius-sm);
}

/* Los títulos de sección y las ramas se vuelven una línea divisoria. */
.app--plegado .nav-titulo,
.app--plegado .nav-grupo {
  height: 1px; padding: 0; margin: 8px 6px; overflow: hidden;
  background: var(--gray-200); border-radius: 1px; text-indent: -999px;
}

.app--plegado .nav-sub--cerrado { display: flex; }
.app--plegado .nav-sub { margin: 0; }

.app--plegado .nav-item {
  justify-content: center;
  padding: 9px 0;
  margin-bottom: 2px;
  border-left-width: 0;
  border-radius: var(--radius-sm);
}

.app--plegado .nav-sub .nav-item { padding: 8px 0; }
.app--plegado .nav-item .ico { width: 21px; height: 21px; opacity: .85; }
.app--plegado .nav-sub .nav-item .ico { width: 19px; height: 19px; }
.app--plegado .nav-item--activo { background: var(--module-accent-soft, var(--ejn-azul-acento-soft)); }
.app--plegado .nav-item--activo .ico { opacity: 1; }
.app--plegado .nav-item--app { background: var(--gray-50); }
.app--plegado .nav-item--app.nav-item--activo { background: var(--module-accent-soft, var(--ejn-azul-acento-soft)); }
.app--plegado .barra-lateral__marca { justify-content: center; padding-bottom: var(--space-3); }
.app--plegado .version { text-align: center; padding: 7px 2px; }
.app--plegado .version__num { font-size: 9.5px; }

.barra-superior__izq { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.barra-superior__der { display: flex; align-items: center; gap: var(--space-4); }

/* Versión al pie del menú */
.version { display: block; padding: 6px 8px; margin-bottom: 8px; border-radius: var(--radius-sm);
           text-decoration: none; background: var(--gray-50); }
.version:hover { background: var(--gray-100); }
.version__num { display: block; font-size: 11px; font-weight: var(--fw-bold);
                color: var(--gray-700); font-variant-numeric: tabular-nums; }
/* P-112 (19/09/2026): NOMBRE ahora es el changelog completo de la
   version (a veces varios parrafos) -- se recorta a 2 lineas con
   ellipsis para que el pie de la barra lateral no crezca sin limite;
   el texto entero se ve con el title (tooltip nativo) del link .version. */
.version__nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                overflow: hidden; text-overflow: ellipsis; max-height: 2.5em;
                font-size: 9.5px; line-height: 1.25; color: var(--gray-600); }

/* ---------- 2c. Enlaces sin subrayado ----------
   En un panel de trabajo casi todo es navegable. Subrayarlo todo ensucia. */
.contenido a,
.migas a,
.barra-lateral a { text-decoration: none; }
.contenido a:hover { text-decoration: none; }
.contenido p a,
.contenido dd a { color: var(--ejn-blue-dark); }
.contenido p a:hover,
.contenido dd a:hover { color: var(--ejn-navy); }

/* ---------- 2d. Desplegables ----------
   La forma del desplegable (trazo, radio, flecha, foco) vive en `ejn-app.css`,
   junto al campo de texto, porque las pantallas públicas no cargan esta hoja.
   Acá quedan sólo los ajustes de densidad del ERP y el foco por color de módulo. */
.app .campo select,
.grilla__filtro,
.grilla__tam select {
  padding: 6px 28px 6px 10px;
  font-size: 12.5px;
  background-position: right 9px center;
}

.app .campo select:focus,
.grilla__filtro:focus {
  border-color: var(--module-accent, var(--ejn-blue));
  box-shadow: 0 0 0 3px var(--module-accent-soft, var(--ejn-blue-soft));
}

.app .campo textarea:focus {
  border-color: var(--module-accent, var(--ejn-blue));
  box-shadow: 0 0 0 3px var(--module-accent-soft, var(--ejn-blue-soft));
}

.grilla__tam select { padding: 3px 22px 3px 7px; font-size: 11.5px; background-position: right 5px center; }

/* ---------- 3. Componentes ---------- */

/* Migas de pan en la barra superior */
.barra-superior { justify-content: space-between; }
.migas { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--gray-600); min-width: 0; }
.migas a { color: var(--gray-600); text-decoration: none; }
.migas a:hover { color: var(--module-accent, var(--ejn-blue-dark)); }
.migas b { color: var(--gray-900); font-weight: var(--fw-semibold); }
.migas__sep { color: var(--gray-300); }

/* Tarjeta -- 08/09/2026: fondo pasa de blanco a gray-50 (el mismo fondo
   de la pagina), pedido de Daniel tras ver una demostracion (Opcion B) --
   asi la tarjeta no choca visualmente contra componentes con su propio
   fondo (ej. .grilla, que sigue blanca con borde celeste) ni contra la
   pagina: el borde gray-200 sigue marcando el limite. Ver ESTADO.md. */
.tarjeta {
  /* 12/09/2026: bug real reportado por Daniel -- estaba en --gray-50,
     el MISMO color que el fondo de la app (body.ejn en ejn-tokens.css),
     asi que la tarjeta quedaba invisible y todo se veia "gris parejo"
     sin contraste. Debe ser blanca para que se note como superficie
     elevada sobre el fondo. Mismo dia, con el fondo ya vuelto a blanco
     liso (ver .app en ejn-app.css), Daniel pidio ademas sombra en
     formularios/subformularios -- todos viven dentro de .tarjeta (el
     wrapper compartido de tarjetas comunes Y de las plegables de
     subformulario, ver data-plegable en ejn-app.js), asi que alcanza
     con agregarla aca para cubrir ambos casos de una sola vez. Mismo
     token --shadow-sm ya usado en otras superficies elevadas
     (.grilla__buscar, .kpi:hover). */
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  /* 17/09/2026: bug real reportado por Daniel (EPP, "Registrar entrega")
     -- un <select> buscable (.combo__lista, z-index 40, ver mas abajo)
     dentro de una .tarjeta se dibujaba DETRAS de la .grilla que viene
     despues en el documento (.grilla__barra tiene position:relative
     z-index:5). Causa: :hover de abajo le pone `transform` a la
     .tarjeta, y eso solo -- sin `position` propio -- crea un nuevo
     stacking context que ENCIERRA a cualquier hijo con z-index alto
     (como el combo), aislandolo de sus hermanos afuera de la tarjeta.
     Como el mouse tiene que estar sobre la tarjeta para escribir en el
     buscador, este :hover esta activo siempre que se lo necesita.
     `position: relative` aca (sin cambiar layout, es el default visual
     de relative sin offsets) habilita el z-index de abajo. */
  position: relative;
  /* 12/09/2026: hover con sombra mas profunda + lift, pedido de Daniel
     tras ver el mockup "Apple Design" -- mismo patron ya probado en
     a.modulo:hover (ejn-app.css). */
  transition: box-shadow .15s ease, transform .15s ease;
}
.tarjeta:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  /* 17/09/2026: saca a la tarjeta hovereada (y todo lo que tenga adentro,
     como un combo buscable abierto) por encima de hermanos con su propio
     z-index bajo (ej. .grilla__barra en 5) -- ver nota de arriba. Bien
     por debajo de los z-index reales de overlay (combo 40/60, menu
     acciones 60, toasts 999+) para no taparlos si algun dia conviven. */
  z-index: 10;
}
/* --gris pasa a blanco (antes al reves): ahora es la variante que se
   destaca contra el fondo gray-50 por defecto -- se usa para tarjetas
   anidadas (ej. finance/emision_nueva.php, tarjeta de candidato dentro
   de una tarjeta). El nombre de la clase quedo desactualizado (un solo
   uso en toda la plataforma), no se renombro para no tocar esa vista. */
.tarjeta--gris { background: var(--white); }
/* 12/09/2026 (pedido de Daniel, fase 1 de adoptar el mockup ver/editar
   aprobado como estandar): panel lateral con fondo tintado, para que se
   lea como "resumen/accion" distinto del contenido principal blanco --
   igual que el panel "Clasificacion y estado" del mockup. No reusa
   .tarjeta--gris (esa es blanca, ver su comentario arriba) porque tiene
   un proposito distinto: esta SI debe notarse tintada. */
.tarjeta--resumen { background: var(--gray-50); }

.tarjeta__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid var(--gray-200);
}

.tarjeta__cab h2, .tarjeta__cab h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ejn-navy); }
.tarjeta__cuerpo { padding: var(--space-2) var(--space-4); }
.tarjeta__cuerpo--liso { padding: 0; }
/* Variante --liso para tablas HTML nativas (no el componente grilla(), que
   ya maneja su propio scroll interno vía .grilla__marco): reemplaza a
   --liso, no se usan juntas -- P-89, 07/09/2026. */
.tarjeta__cuerpo--liso-scroll { padding: 0; overflow-x: auto; }

/* Tarjeta plegable: el título es un botón que despliega/pliega el cuerpo.
   Ver ejn-app.js, iniciarPlegables(). El contador (badge) queda siempre
   visible en la cabecera -- con la tarjeta cerrada es lo único que se ve
   del contenido, por eso no se oculta al abrir. */
.tarjeta__cab-toggle {
  display: flex; align-items: center; gap: var(--space-2);
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: left; flex: 1 1 auto; min-width: 0;
}
.tarjeta__cab-toggle h2, .tarjeta__cab-toggle h3 {
  /* 09/09/2026: antes solo margin/white-space -- el tamano/peso/color se
     heredaban de .tarjeta__cab h2 por orden de cascada (misma especificidad,
     h2 es descendiente de .tarjeta__cab ademas de .tarjeta__cab-toggle).
     Reporte de Daniel: el titulo del sector se ve mas grande que "Agregar
     sector". Se explicita aca para que no dependa del orden de las reglas
     ni de particularidades del boton -- mismo valor que .tarjeta__cab h2. */
  margin: 0; white-space: nowrap;
  font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ejn-navy);
}
.tarjeta__cab-toggle:hover h2, .tarjeta__cab-toggle:hover h3 { color: var(--ejn-blue); }
.tarjeta__cab-flecha {
  width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid var(--gray-400); border-bottom: 2px solid var(--gray-400);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.tarjeta--abierta > .tarjeta__cab .tarjeta__cab-flecha { transform: rotate(45deg); }

/* Rejillas de layout */
.rejilla { display: grid; gap: var(--space-4); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; } }

/* Indicador */
.kpi {
  background: var(--white); border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-md); padding: 10px 14px;
}
.kpi__valor { font-size: 22px; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -.4px; }

.kpi__rotulo { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .5px; color: var(--gray-600); font-weight: var(--fw-semibold); margin-top: 3px; }
.kpi__nota { font-size: 10.5px; color: var(--gray-600); margin-top: 3px; }
.kpi--alerta { border-left-color: var(--ejn-red); }
.kpi--alerta .kpi__valor { color: var(--ejn-red-dark); }
.kpi--aviso { border-left-color: var(--module-accent, var(--ejn-gold)); }
.kpi--aviso .kpi__valor { color: var(--ejn-gold-dark); }
.kpi--ok { border-left-color: var(--ejn-green); }

/* Pestañas */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--gray-200); margin-bottom: var(--space-4); overflow-x: auto; }

/* 21/09/2026: variante para pantallas donde las pestañas se manejan con un
   <select> en vez de mostrarse como botones (login, ver auth/login.php) --
   los <button data-panel> siguen intactos en el DOM (el <select> les hace
   click() por JS), sólo se ocultan visualmente. Reutilizable para cualquier
   otra pantalla que en el futuro necesite el mismo ahorro de ancho. */
.pestanas--oculto { display: none; }
.pestana {
  padding: 7px 13px; font-size: 12.5px; font-weight: var(--fw-semibold);
  color: var(--gray-600); background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; font-family: var(--font-family);
}
.pestana:hover { color: var(--gray-900); }
.pestana--activa { color: var(--ejn-navy); border-bottom-color: var(--module-accent, var(--ejn-blue)); }
/* 11/09/2026 (pedido Daniel, RAR): pestaña que necesita atención del usuario
   -- ej. "Estado" cuando el RAR se reabrió a Borrador tras haber sido
   presentado (RarRepo::reabrirSiPresentado()) y todavía no se volvió a
   actualizar el estado. Roja aunque no esté activa (tiene que llamar la
   atención igual si el usuario está mirando otra pestaña) y se mantiene
   roja si además está activa -- por eso el selector repite ambas
   combinaciones en vez de depender del orden de cascada. */
.pestana--alerta,
.pestana--alerta.pestana--activa { color: var(--ejn-red-dark); border-bottom-color: var(--ejn-red); }
.pestana--alerta:hover { color: var(--ejn-red-dark); }
/* 19/09/2026 (pedido Daniel, Siniestros Intelligence): la pestaña "Intelligence"
   se pinta del color de la banda de riesgo vigente del siniestro -- mismo
   mapeo tono->color que ya usan los .badge--ok/--warn/--dang/--info/--neu de
   acá abajo (ver SiniestroIntelligenceRepo::bandaDeScore()). Mismo patrón de
   selector doblado que .pestana--alerta de arriba, para que gane aunque la
   pestaña también esté activa. Sin score calculado (motor nunca corrido) no
   se aplica ninguna de estas clases -- la pestaña queda con el color neutro. */
.pestana--ok, .pestana--ok.pestana--activa     { color: var(--ejn-green-dark); border-bottom-color: var(--ejn-green); }
.pestana--ok:hover     { color: var(--ejn-green-dark); }
.pestana--info, .pestana--info.pestana--activa { color: var(--ejn-blue-dark);  border-bottom-color: var(--ejn-blue); }
.pestana--info:hover   { color: var(--ejn-blue-dark); }
.pestana--warn, .pestana--warn.pestana--activa { color: var(--ejn-gold-dark);  border-bottom-color: var(--ejn-gold); }
.pestana--warn:hover   { color: var(--ejn-gold-dark); }
.pestana--dang, .pestana--dang.pestana--activa { color: var(--ejn-red-dark);   border-bottom-color: var(--ejn-red); }
.pestana--dang:hover   { color: var(--ejn-red-dark); }

/* Hay solapas que no alternan paneles en la misma página sino que cambian de
   página —elegir qué nomenclador se está mirando, por ejemplo—. Ahí el control
   correcto es un enlace, no un botón: se puede abrir en otra pestaña y queda en
   el historial. Sólo hay que sacarle el subrayado que traen los enlaces del
   contenido, para que no se lea como texto enlazado suelto. */
a.pestana { text-decoration: none; }

/* 17/10/2026 (pedido Daniel): icono de linea delante del rotulo de cada pestana,
   mismo lenguaje que el menu lateral (icono() de core/helpers.php). Hereda el color
   de la pestana (activa/alerta/tono) por currentColor; un poco mas apagado en reposo. */
.pestana .ico { margin-right: 6px; vertical-align: -3px; }
.pestana--activa .ico, .pestana:hover .ico { opacity: 1; }

/* Ficha de datos (pares etiqueta/valor de solo lectura) */
.ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-5); }
@media (max-width: 1000px) { .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ficha > div { padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
.ficha dt { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .4px; color: var(--gray-600); font-weight: var(--fw-semibold); }
.ficha dd { margin: 1px 0 0; font-size: 12.5px; font-weight: var(--fw-medium); }

/* Formulario en columnas */
.fila { display: grid; gap: var(--space-4); margin-bottom: var(--space-3); }
.fila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fila--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .fila--2, .fila--3, .fila--4 { grid-template-columns: 1fr; } }

/* Diseño compacto dentro de una tarjeta -- generalizado a TODA la
   plataforma el 08/09/2026 (piloto en Core/Traslados > Asignación,
   validado por Daniel: "ahi quedo perfecto, lo podemos replicar en todo
   lo demas" -- ver ESTADO.md). .ficha/.fila de ancho fijo (1fr) reparten
   TODO el ancho disponible entre sus columnas aunque el contenido sea
   corto -- un valor como "Manual" en una columna de 300px+ deja mucho
   blanco alrededor, y una .fila--3 con un solo campo dibuja 2 columnas
   vacías al lado. Dentro de .tarjeta__cuerpo (o sea: en cualquier
   subformulario, de cualquier tarjeta, en toda la plataforma):
   - .ficha pasa a flujo (flex-wrap): cada par etiqueta/valor se acomoda
     junto al siguiente mientras entre, y sólo baja de renglón si el
     ancho realmente no alcanza -- el grid de columnas fijas podía
     forzar 2 renglones aunque sobrara ancho, según cuántas columnas
     entraran exactas (fue el bug que Daniel encontró en la primera
     revisión del piloto).
   - .fila acota sus columnas a un ancho razonable (auto-fit,
     minmax(200px,320px)) en vez de estirarse a lo que sobre.
   - mt-2/mt-3/mt-4 y el margin-bottom de .fila se reducen, para que no
     quede tanto aire entre el bloque de datos, el texto de ayuda y cada
     botón.
   Riesgo conocido, no bloqueante: en una .ficha con MUCHOS pares (hay
   fichas de hasta ~30 en core/siniestro.php, care/prestador.php, etc.),
   el flujo ya no garantiza que los valores de distintos renglones queden
   alineados en columnas prolijas como antes -- se gana compacidad, se
   pierde alineación de tabla. No se pudo verificar visualmente en vivo
   (sin sesión en test.ejnassistance.com desde este entorno) -- conviene
   que Daniel/el chat de cada módulo lo revise en pantallas con fichas
   grandes. Fuera de una tarjeta (.ficha/.fila sueltos, si los hay) sigue
   el comportamiento de grid de columnas fijas de arriba, sin cambios. */
.tarjeta__cuerpo .ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 4px;
}
.tarjeta__cuerpo .ficha > div { padding: 0; border-bottom: none; }
.tarjeta__cuerpo .ficha dt { margin: 0 6px 0 0; white-space: nowrap; }
.tarjeta__cuerpo .ficha dd { margin: 0 var(--space-5) 0 0; }

/* Ficha vertical -- opt-in, un par etiqueta/valor por renglón (pedido de
   Daniel, 08/09/2026: ILP/Siniestro > liquidación tiene fichas con muchos
   pares y etiquetas largas -- ej. "Fórmula s/Ley (53 × VMIBi × Coef.Edad ×
   %inc)" -- justo el caso que el comentario de arriba ya marcaba como
   riesgo del flujo compacto. No toca .ficha ni .tarjeta__cuerpo .ficha de
   arriba (siguen sirviendo al resto de la plataforma sin cambios) -- se
   agrega .ficha--vertical como modificador que cada vista suma a mano
   donde hace falta legibilidad de tabla en vez de compacidad. Selector con
   especificidad (0,3,0)/(0,3,1) a propósito, para ganarle a
   .tarjeta__cuerpo .ficha sin depender del orden en el archivo. */
.tarjeta__cuerpo .ficha.ficha--vertical {
  display: grid;
  grid-template-columns: minmax(220px, max-content) 1fr;
  column-gap: var(--space-4);
  row-gap: 6px;
  align-items: baseline;
}
.tarjeta__cuerpo .ficha.ficha--vertical > div { padding: 0; border-bottom: none; }
.tarjeta__cuerpo .ficha.ficha--vertical dt { white-space: normal; margin: 0; }
.tarjeta__cuerpo .ficha.ficha--vertical dd { margin: 0; }
@media (max-width: 640px) {
  .tarjeta__cuerpo .ficha.ficha--vertical { grid-template-columns: 1fr; row-gap: 2px; }
  .tarjeta__cuerpo .ficha.ficha--vertical dd { margin-bottom: 6px; }
}

.tarjeta__cuerpo .fila {
  grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
  justify-content: start;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-1);
}

/* 20/09/2026, pedido de Daniel (Core/Comunicaciones formales): dos
   fieldsets completos (formularios enteros, no campos sueltos) uno al
   lado del otro -- el auto-fit(200,320) de arriba, pensado para
   empaquetar CAMPOS cortos, angostaba cada fieldset a ~300px y hacia
   que sus propios campos cayeran uno por renglon, inflando el alto de
   la tarjeta ("que no ocupen tanto alto"). .fila--panel fuerza una
   division real 50/50 del ancho disponible de la tarjeta -- dinamica,
   se reparte TODO el ancho, no un tope fijo -- y sigue colapsando a 1
   columna en pantallas angostas, igual que .fila--2/3/4. */
.tarjeta__cuerpo .fila.fila--panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .tarjeta__cuerpo .fila.fila--panel { grid-template-columns: 1fr; } }

.tarjeta__cuerpo .mt-2 { margin-top: var(--space-1); }
.tarjeta__cuerpo .mt-3 { margin-top: var(--space-2); }
.tarjeta__cuerpo .mt-4 { margin-top: var(--space-2); }
.tarjeta__cuerpo .campo__ayuda { max-width: 640px; margin-top: var(--space-1); margin-bottom: var(--space-1); }
/* Parrafo de ayuda que describe una tabla/seccion entera (no un campo puntual):
   no debe truncarse a 640px, tiene que usar todo el ancho de la tarjeta. */
.tarjeta__cuerpo .campo__ayuda--ancho { max-width: none; }
.campo__ayuda { font-size: 10.5px; color: var(--gray-600); }
/* Mensaje de estado vacío dentro de una tarjeta liso (padding:0) -- necesita
   su propio respiro porque el contenedor no aporta ninguno. */
.campo__ayuda--espaciada { padding: 12px; }
.campo input[readonly], .campo input:disabled { background: var(--gray-50); color: var(--gray-600); }

/* 14/09/2026 (reporte de Daniel): fechas sueltas dentro de un .campo
   (fuera de una grilla -- ver mas abajo la version para
   .grilla__tabla td > input[type="date"]) se veian con tipografia
   nativa del navegador en vez de la de la plataforma. Mismo origen
   que el fix de RGRL: algunos navegadores (WebKit/Safari en
   particular) no siempre heredan font-family en :disabled -- se
   repite explicitamente en los 3 estados para no depender de eso.
   Los campos del checklist de Actividades (Submuracion, Excavaciones,
   Demolicion -- ver programa.php) arrancan disabled hasta que se
   tilda el item, por eso el caso se notaba ahi primero. */
.app .campo input[type="date"] {
  font-family: var(--font-family);
  /* 21/10/2026 (pedido de Daniel): SIN font-size ni padding propios. Tenían 12.5px y 6px 9px, y como este selector (con [type]) pesa más que la densidad de
     `.app .campo input` (12px, 4px 8px), todas las fechas salían más grandes y altas que el resto de los campos. Tamaño y relleno salen de `.app .campo input`. */
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
}
.app .campo input[type="date"]:focus {
  outline: none;
  border-color: var(--module-accent, var(--ejn-blue));
  box-shadow: 0 0 0 3px var(--module-accent-soft, var(--ejn-blue-soft));
}
.app .campo input[type="date"]:disabled {
  font-family: var(--font-family);
  background: var(--gray-50);
  border-color: var(--gray-200);
  color: var(--gray-600);
  cursor: not-allowed;
}

/* Campo que ocupa 2 columnas de una .fila en grilla */
.campo--ancho2 { grid-column: span 2; }

/* RGRL checklist (11/09/2026): la fecha de regularizacion va suelta en una
   <td> de grilla, no dentro de .campo. Al principio solo tenia estilo para
   :disabled (background/color/cursor, sin ningun border) -- eso dejaba que
   el navegador dibujara su propio control nativo (el "borde 3D en degrade"
   que reporto Daniel, mas notorio en Safari/WebKit deshabilitado). Se
   agrega un borde liso en los 3 estados (base/foco/disabled), calcado del
   look de .campo input pero con padding mas chico porque va suelto en una
   celda de grilla, no dentro de .campo (11/09/2026, pedido de Daniel: "que
   tenga borde liso... pero en formato deshabilitado"). Selector acotado a
   "td > input" (hijo directo, sin .campo en el medio) a proposito: hay
   fechas ENVUELTAS en .campo dentro de otras tablas .grilla__tabla (ej.
   programa.php, recomendaciones/medidas) que ya tenian su estilo correcto
   via ".campo input" -- con el selector amplio les hubiera pisado el
   padding por mayor especificidad, sin que nadie lo pidiera. .campo--error
   resalta en rojo la fecha que falta completar (ejn-rgrl-checklist.js la
   agrega/saca al validar antes de enviar). */
.grilla__tabla td > input[type="date"] {
  font-family: var(--font-family);
  font-size: inherit;
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
}
.grilla__tabla td > input[type="date"]:focus {
  outline: none;
  border-color: var(--ejn-blue);
  box-shadow: 0 0 0 3px var(--ejn-blue-soft);
}
.grilla__tabla td > input[type="date"]:disabled { background: var(--gray-50); border-color: var(--gray-200); color: var(--gray-600); cursor: not-allowed; }
/* RAR - Expuestos (core/rar.php), 12/09/2026: reporte de Daniel -- la
   fecha de "Fin exposición" se veia con el look nativo del navegador
   (otra fuente, sin borde ni radio) mientras el resto de la grilla ya
   tenia el estilo de arriba. Causa: ahi el <input type="date"> no es
   hijo DIRECTO de <td> como en el resto de los casos -- esta un nivel
   mas adentro, dentro de un <form class="form-linea"> (necesario para
   poder enviarse solo con su propio csrf al hacer clic en "Cerrar"),
   asi que "td > input" no lo alcanza. Mismo estilo, agregado un nivel
   de anidamiento via "td > form" -- no se toca el selector de arriba
   (que a proposito excluye los casos envueltos en .campo, ver el
   comentario de esa regla) para no volver a pisar nada sin que nadie
   lo pida. */
.grilla__tabla td > form input[type="date"] {
  font-family: var(--font-family);
  font-size: inherit;
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
}
.grilla__tabla td > form input[type="date"]:focus {
  outline: none;
  border-color: var(--ejn-blue);
  box-shadow: 0 0 0 3px var(--ejn-blue-soft);
}
.campo--error { border-color: var(--ejn-red) !important; }
/* Campo que se expande dentro de un .form-linea (flex), para que el botón
   de al lado quede pegado al ancho justo del input, no a lo que sobre. */
.campo--flex1 { flex: 1; }

/* Input angosto para valores cortos (motivo de anulación, código, etc.) */
.input-chico { width: 110px; }

.bloque { border: none; padding: 0; margin: 0 0 var(--space-5); }
/* RGRL (11/09/2026, pedido de Daniel): el bloque "Importar desde Excel"
   se pierde entre el resto del contenido -- lo pidio enmarcado y con
   color propio para que el usuario entienda de un vistazo que ahi se
   puede exportar/importar la planilla, separado en 2 columnas (Paso 1
   exportar / Paso 2 importar). Reusa el mismo tono "info" que ya usa
   .aviso-barra--info (mismos tokens --ejn-blue-soft/--ejn-blue) en vez
   de inventar un color nuevo. */
.bloque--destacado {
  border: 1px solid var(--ejn-blue);
  background: var(--ejn-blue-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.bloque--destacado .bloque__titulo { border-bottom-color: var(--ejn-blue); color: var(--ejn-blue-dark); }
.paso-titulo {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .4px;
  font-weight: var(--fw-bold); color: var(--ejn-blue-dark); margin: 0 0 6px;
}
.bloque__titulo {
  display: block; width: 100%;
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .6px;
  color: var(--gray-600); font-weight: var(--fw-bold);
  padding-bottom: 6px; margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--module-accent-soft, var(--gray-100));
}

/* Pasos del circuito */
.pasos { display: flex; margin-bottom: var(--space-4); flex-wrap: wrap; }
.paso {
  flex: 1 1 120px; padding: 7px 12px; background: var(--white);
  border: 1px solid var(--gray-200); border-right: none; font-size: 11px; color: var(--gray-600);
}
.paso:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.paso:last-child { border-right: 1px solid var(--gray-200); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.paso b { display: block; font-size: 12px; color: var(--gray-700); }

/* Notas al pie de una pantalla */
.nota-norma, .nota-transversal {
  padding: 8px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 11.5px; margin: var(--space-3) 0; line-height: 1.45;
}
.nota-norma { background: var(--ejn-blue-soft); border-left: 3px solid var(--ejn-blue); color: #244F68; }
.nota-transversal { background: var(--ejn-orange-soft); border-left: 3px solid var(--ejn-orange); color: #8B690F; }

/* Línea de tiempo */
.hilo { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.hilo:last-child { border-bottom: none; }
.hilo__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--module-accent, var(--ejn-blue)); margin-top: 4px; flex-shrink: 0; }
.hilo__cuerpo { flex: 1; min-width: 0; }
.hilo__titulo { font-size: 12.5px; font-weight: var(--fw-semibold); }
.hilo__detalle { font-size: 11.5px; color: var(--gray-600); }
.hilo__fecha { font-size: 10.5px; color: var(--gray-600); white-space: nowrap; }

/* Utilitarias */
/* 10/09/2026, hallazgo de Daniel: esta clase (195 columnas de grilla con
   tipo='mono' + 80 usos directos en fichas, en los 7 modulos) ponia
   codigos/numeros de identificacion en una tipografia monoespaciada
   distinta a la del resto de la plataforma -- inconsistente a proposito
   pedido de sacar. Ahora usa la misma fuente de siempre (Montserrat,
   var(--font-family)); .num ya resuelve la alineacion de numeros con
   font-variant-numeric: tabular-nums, sin necesitar una tipografia
   distinta. Se deja el nombre de clase sin cambiar (detalle interno, no
   visible) para no tocar los ~275 usos en PHP. */
.mono { font-family: var(--font-family); font-size: 11.5px; }
.mono--chico { font-size: 10px; }
.mono--grande { font-size: 1.2em; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 11/09/2026: pedido de Daniel en Core/Establecimientos > RAR -- los datos
   de columnas numericas (Agentes, Expuestos) quedaban con right-align via
   .num mientras el titulo de columna es siempre left-align
   (.grilla__tabla thead th), generando un desalineo visual entre titulo y
   dato en columnas angostas. .num-izq es opt-in por columna (via
   'clase'=>'num-izq' en la config de columnas de grilla.php) para no
   afectar el right-align esperado en el resto de la plataforma (montos,
   otros conteos en Finance, etc.). */
.num.num-izq { text-align: left; }
.fuerte { font-weight: var(--fw-semibold); }
.silencio { color: var(--gray-600); font-size: var(--fs-small); }
.pila { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Fila de campo + botón alineados abajo (para que el botón quede a la
   altura del input, no del label) -- distinto de .pila, que centra. */
.form-linea { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; flex-wrap: wrap; }
/* Form de una sola acción (botón "Anular", "Quitar", etc.) embebido en una
   fila de tabla o de acciones: no debe romper el flujo en línea. */
.form-inline { display: inline; }
/* Fila de tabla dada de baja/anulada: se sigue viendo, tachada y atenuada,
   en vez de desaparecer -- conserva el historial visible. */
.fila--anulada { opacity: .55; text-decoration: line-through; }

/* 21/10/2026: las variantes .badge--* y el tamaño de la etiqueta de estado viven ahora en un solo lugar: rixart-tokens.css (StatusBadge). */

.btn-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; font-size: 11.5px; font-weight: var(--fw-semibold);
  font-family: var(--font-family);
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  background: var(--white); color: var(--gray-700); cursor: pointer;
}
.btn-mini:hover { background: var(--gray-50); border-color: var(--gray-400); }
.btn-modulo { background: var(--module-accent, var(--ejn-blue)); color: var(--white); border-color: transparent; }
.btn-modulo:hover { filter: brightness(.94); color: var(--white); }

/* ---------- 4. Grilla ---------- */

.grilla {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ejn-azul-acento-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}  /* 06/09/2026: borde con tinte celeste tenue + sombra suave -- pedido de
     Daniel de sombreado azulado en todas las grillas, y despues "Cristal /
     Vidrio Diurno" (recuadros con sombra en vez de solo borde). El fondo
     de la tabla sigue solido (--white), no vidrio, por legibilidad de
     datos operativos. */

.grilla__barra {
  position: relative; z-index: 5; overflow: visible;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--ejn-azul-acento-soft);
  background: var(--ejn-azul-acento-mist); border-radius: var(--radius-md) var(--radius-md) 0 0;
}  /* 06/09/2026: antes gris plano -- mismo sombreado tenue que el resto de la grilla */

/* .grilla__barra-fin eliminada (21/09/2026, pedido de Daniel: orden fijo Exportar/Imprimir/Limpiar/Buscar/Ocultar/Agrupar/Filtros) -- ya no hay wrapper empujado a la derecha, todo fluye en .grilla__barra con el mismo gap. */

.grilla__buscar { position: relative; display: flex; align-items: center; }
.grilla__buscar svg { position: absolute; left: 8px; color: var(--gray-600); pointer-events: none; }
.grilla__buscar input {
  width: 260px; max-width: 40vw;
  padding: 5px 9px 5px 27px;
  font-family: var(--font-family); font-size: 12px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white);
}
/* 14/09/2026 (pedido de Daniel, auditoria responsive): en mobile el
   font-size sube a 16px mas abajo (media 860px) para evitar el
   zoom automatico de iOS Safari al enfocar un input con texto mas
   chico -- ver nota completa junto a .acc, mas abajo en este mismo
   archivo. */
.grilla__buscar input:focus { outline: none; border-color: var(--module-accent, var(--ejn-blue)); box-shadow: 0 0 0 2px var(--module-accent-soft, var(--ejn-blue-soft)); }

/* Sólo densidad y ancho: la forma la pone `ejn-app.css`. Ojo con usar acá el
   atajo `background`, que borra la flecha del desplegable. */
.grilla__filtro {
  padding: 5px 26px 5px 8px; font-size: 12px;
  color: var(--gray-700); max-width: 190px;
  background-position: right 7px center;
}

.grilla__seleccionados {
  font-size: 11.5px; font-weight: var(--fw-semibold);
  color: var(--ejn-blue-dark); background: var(--ejn-blue-soft);
  padding: 3px 9px; border-radius: 999px;
}

/* 18/09/2026, pedido de Daniel (EPP): variante boton de lo de arriba,
   cuando la grilla pide filtroSeleccion (ver componentes/grilla.php,
   rixart-grilla.js) -- mismo look en reposo, cursor y estado .activo
   cuando el filtro Ver solo seleccionados esta prendido. */
.grilla__seleccionados--filtro {
  border: none; cursor: pointer; font-family: inherit; line-height: 1.4;
}
.grilla__seleccionados--filtro:hover { background: var(--ejn-blue); color: #FFF; }
.grilla__seleccionados--filtro.activo {
  background: var(--ejn-blue); color: #FFF;
}

.grilla__marco { overflow-x: auto; }

/* ---------- Agrupar / filtrar en cascada (19/09/2026, pedido de Daniel) ----------
   Barra opcional (ver 'agrupable' en componentes/grilla.php) entre la barra
   de filtros y la tabla: arrastrar un encabezado de columna hasta acá lo
   convierte en un nivel de filtro (misma pastilla .menu--filtro que ya usan
   los filtros de columna, para que se vea como parte del mismo sistema).
   Borde punteado en vez de sólido a propósito: distingue a simple vista una
   zona donde se sueltan cosas de una barra de botones fija. */
.grilla__agrupar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 10px; min-height: 36px;
  border-bottom: 1px dashed var(--ejn-azul-acento-soft);
  background: var(--white);
  transition: background-color .12s, border-color .12s;
}
.grilla__agrupar--sobre {
  background: var(--module-accent-soft, var(--ejn-blue-soft));
  border-bottom-style: solid;
  border-bottom-color: var(--module-accent, var(--ejn-blue));
}
.grilla__agrupar-etiqueta {
  font-size: 11px; font-weight: var(--fw-semibold); color: var(--gray-600);
  white-space: nowrap;
}
.grilla__agrupar-niveles { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.grilla__agrupar-ayuda { font-size: 11.5px; color: var(--gray-600); font-style: italic; }
.grilla__agrupar-nivel > summary::after { content: none; } /* hereda todo de .menu--filtro salvo lo de abajo */
.grilla__agrupar-quitar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 2px; padding: 0;
  border: none; border-radius: 999px; background: var(--gray-200);
  color: var(--gray-600); font-size: 12px; line-height: 1; cursor: pointer;
}
.grilla__agrupar-quitar:hover { background: var(--ejn-red-soft); color: var(--ejn-red-dark); }

/* Modificador opcional --acotada (09/09/2026, pedido de Daniel: en Pólizas
   el conjunto barra+filas+pie de paginación superaba el alto de la pantalla
   y el pie con la paginación quedaba fuera de la vista). Se activa vía la
   clave 'clase' de grilla() (ver componentes/grilla.php) -- ninguna otra
   grilla de la plataforma la usa por defecto, así que esto no cambia nada
   fuera de la pantalla que la pida explícitamente.

   Acota sólo el cuerpo de filas (.grilla__marco) a una fracción del alto de
   la ventana y le agrega scroll propio; el encabezado de columnas ya es
   sticky por defecto (.grilla__tabla thead th, ver abajo) así que queda fijo
   arriba de ese scroll. La fila de totales (tfoot) se fija abajo del mismo
   scroll. La barra de filtros y el pie de paginación (.grilla__pie) son
   hermanos de .grilla__marco, no quedan adentro del scroll acotado: siempre
   visibles, sin importar cuántas filas tenga la página actual. */
.grilla--acotada .grilla__marco { max-height: 60vh; overflow-y: auto; }
.grilla--acotada .grilla__tabla tfoot td {
  position: sticky; bottom: 0; z-index: 1;
}

.grilla__tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.grilla__tabla thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 7px 10px; white-space: nowrap;
  background: var(--ejn-azul-acento-mist); border-bottom: 1px solid var(--ejn-azul-acento-soft);
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .4px;
  color: var(--gray-600); font-weight: var(--fw-bold);
}  /* 06/09/2026: cabecera con el mismo sombreado tenue -- antes blanco/gris plano */
/* 17/09/2026, pedido de Daniel (grillas de Cobranza y Emision): el titulo
   de una columna numerica/moneda se alinea a la derecha, igual que el
   dato -- antes SIEMPRE quedaba a la izquierda (regla de arriba) aunque
   el <th> ya traia la clase .num (componentes/grilla.php la agrega desde
   siempre, pero nunca alcanzaba a pesar por specificidad). .num-izq en el
   <th> (propagado ahora desde grilla.php cuando la columna lo pide) es la
   excepcion que mantiene el titulo a la izquierda para las columnas
   angostas de RAR (Agentes/Expuestos) que motivaron el .num-izq
   original del 11/09/2026 -- ese caso no se toca. */
.grilla__tabla thead th.num { text-align: right; }
.grilla__tabla thead th.num.num-izq { text-align: left; }

.grilla__tabla th.ordenable { cursor: pointer; user-select: none; }
.grilla__tabla th.ordenable:hover { color: var(--ejn-navy); background: var(--gray-50); }
.grilla__tabla th .flecha { display: inline-block; width: 8px; margin-left: 4px; opacity: .35; }
.grilla__tabla th .flecha::after { content: '↕'; font-size: 9px; }
.grilla__tabla th.asc .flecha, .grilla__tabla th.desc .flecha { opacity: 1; color: var(--module-accent-dark, var(--ejn-blue-dark)); }
.grilla__tabla th.asc .flecha::after { content: '↑'; }
.grilla__tabla th.desc .flecha::after { content: '↓'; }

.grilla__tabla tbody td { padding: 6px 10px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.grilla__tabla tbody tr:nth-child(even) { background: var(--ejn-azul-acento-mist); }  /* 06/09/2026: antes #FCFDFE (casi imperceptible) */
.grilla__tabla tbody tr:hover { background: var(--module-accent-soft, var(--ejn-blue-soft)); }
.grilla__tabla tbody tr[data-url], .grilla__tabla tbody tr[data-abre-panel] { cursor: pointer; }

/* Fila "resumen" clicable que filtra otra grilla (ej. resumen por CUIT en
   el Libro de Cobranzas) -- ver iniciarFiltrosDeGrilla() en ejn-app.js. */
tr.fila-clicable { cursor: pointer; }
tr.fila-clicable:hover { background: var(--module-accent-soft, var(--ejn-blue-soft)); }
tr.fila-clicable--activa { background: var(--ejn-blue-soft); font-weight: var(--fw-bold); }
.grilla__tabla tfoot td { padding: 7px 10px; background: var(--ejn-azul-acento-mist); border-top: 1px solid var(--ejn-azul-acento-soft); font-weight: var(--fw-bold); font-size: 12px; }  /* 06/09/2026: mismo sombreado tenue */

.grilla__tabla .col-sel { width: 30px; text-align: center; }
/* 14/09/2026, pedido de Daniel: Acciones paso a ser la primera columna
   de toda grilla (antes iba al final, de ahi el text-align:right que
   la pegaba al borde derecho de su celda). Ahora se alinea a la
   izquierda, como el resto de las columnas que empiezan la fila. */
.grilla__tabla .col-acc { width: 1%; white-space: nowrap; text-align: left; }

/* ---------- Filas compactas, truncado con "..." y columnas redimensionables ----------
   10/09/2026, pedido de Daniel sobre 3 capturas (Poliza/Polizas, Care/Casos,
   Care/Prestadores): "el espaciado vertical... es muy alto... si el
   contenido de un campo es muy ancho, que muestre 3 puntos suspensivos...
   y la posibilidad de ensanchar la columna". La causa real de las filas
   altas no era solo el padding: ninguna celda truncaba, asi que un campo
   largo (ej. "Radiologia · Tomografia computada · Resonancia magnetica ·
   Ecografia") envolvia a varias lineas y estiraba TODA la fila.

   Alcance a proposito: solo las grillas armadas con el componente
   compartido grilla() (ver componentes/grilla.php, siempre dentro de
   <div class="grilla" data-grilla>). Las tablas armadas a mano con
   .grilla__tabla directo (rgrl.php, ilt.php, estudios_juridicos.php, etc.,
   ver "archivos con tablas hand-rolled" en CLAUDE.md) quedan afuera: no
   tienen tirador de ensanchado ni anchos de columna calculados, truncarlas
   sin darles esa salida seria peor que dejarlas como estan -- candidato a
   una futura migracion a grilla(), no en esta pasada. Por eso todo va
   scopeado bajo ".grilla", no sobre ".grilla__tabla" a secas.

   table-layout:fixed es lo que hace que el ancho de cada columna (la clase
   w-N existente, o el que el usuario arrastre) se respete de verdad y
   habilita el truncado -- antes (auto) el navegador igual estiraba la
   columna para no cortar el contenido. */
.grilla .grilla__tabla { table-layout: fixed; }
.grilla .grilla__tabla th,
.grilla .grilla__tabla td { overflow: hidden; text-overflow: ellipsis; }
.grilla .grilla__tabla tbody td { padding: 5px 8px; white-space: nowrap; }

/* Checklist RGRL (11/09/2026, pedido de Daniel: "el espaciado entre
   renglones... se desperdicia muchisimo espacio de alto de pagina"). Esta
   tabla es hand-rolled (no pasa por grilla(), ver el comentario de arriba
   que la excluye a proposito junto con ilt.php/estudios_juridicos.php),
   asi que no hereda el padding compacto de ".grilla .grilla__tabla tbody
   td". Se resuelve con un modificador propio en vez de agregarle la clase
   ".grilla" -- eso activaria table-layout:fixed + truncado con "...",
   rompiendo el contenido largo de la columna "Item" (ancho libre, sin
   clase w-N). Solo acorta el padding vertical, no toca el layout de
   columnas ni otras tablas hand-rolled que no pidieron este cambio. */
.grilla__tabla--compacta tbody td { padding: 3px 8px; }

/* Tirador de ensanchado: lo agrega PHP solo en columnas de datos (no en
   seleccion ni acciones, ver componentes/grilla.php) y lo maneja iniciar()
   en ejn-grilla.js (arrastre + persistencia en localStorage por grilla).
   Sin position:relative a proposito -- el thead th ya es position:sticky,
   que tambien sirve de referencia para el hijo absoluto. */
.grilla .grilla__tabla .grilla__resizer {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; touch-action: none; z-index: 2;
}
.grilla .grilla__tabla .grilla__resizer:hover,
.grilla .grilla__tabla .grilla__resizer--activo {
  background: var(--module-accent-dark, var(--ejn-blue-dark)); opacity: .5;
}
.grilla__tabla--redimensionando,
.grilla__tabla--redimensionando * { cursor: col-resize !important; user-select: none; }

/* Reordenar columnas por arrastre (10/09/2026): sin icono dedicado --
   se sacó el 10/09/2026 (hallazgo de Daniel: el icono cortaba el rótulo
   de la columna en pantallas angostas, ver CLAUDE.md/ESTADO.md) -- el
   <th> entero es arrastrable (componentes/grilla.php, draggable="true").
   La columna arrastrada baja su opacidad mientras se mueve, mismo
   criterio visual que /plataforma/orden-menu (ver iniciar() en
   ejn-grilla.js). */
.grilla .grilla__tabla th.ordenable.grilla__col--arrastrando { opacity: .4; }

/* Ancho de la columna Acciones: con table-layout:fixed el viejo truco
   "width:1%" de .col-acc (arriba) deja de funcionar -- fixed toma el 1%
   literal, no "lo minimo que entre el contenido". Se reemplaza por un
   ancho calculado en PHP segun la cantidad de iconos (ver
   componentes/grilla.php) con doble clase para pesar mas que la regla
   .col-acc de arriba SIN tocarla -- las tablas armadas a mano que usan
   .col-acc directo (fuera de .grilla, sin table-layout:fixed) siguen con
   el mismo width:1% de siempre, sin cambios. */
.grilla__tabla th.col-acc.acc-60  { width: 60px; }
.grilla__tabla th.col-acc.acc-90  { width: 90px; }
.grilla__tabla th.col-acc.acc-120 { width: 120px; }
.grilla__tabla th.col-acc.acc-150 { width: 150px; }

/* ---------- Fila de grilla desplegable ----------
   Mismo patron data-plegable/data-plegable-boton/data-plegable-cuerpo de
   las tarjetas, aplicado a un <tr> (fila resumen) que revela un <tr>
   hermano (fila detalle, con un único <td colspan>) en vez de a una
   tarjeta completa. Reusa la clase que ya togglea iniciarPlegables()
   (.tarjeta--abierta) para la rotación de flecha -- no hizo falta tocar
   ejn-app.js. Pedido de Daniel 09/09/2026 (ficha del preventor: contratos
   primero en grilla, cada uno desplegable con sus valores + viáticos). */
.fila-plegable__boton {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 4px; margin: 0 auto; cursor: pointer;
}
.fila-plegable.tarjeta--abierta .tarjeta__cab-flecha { transform: rotate(45deg); }
.fila-plegable__detalle > td {
  background: var(--gray-50); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-100);
}

/* ---------- Tabla simple ---------- */
/* Mismo lenguaje visual que .grilla__tabla (cabecera con sombreado tenue,
   cebra, hover, bordes), pero sin barra de busqueda/orden -- pensada para
   listas cortas embebidas dentro de una tarjeta (ej. agentes de riesgo por
   sector en el RAR). No tenia NINGUNA regla en ningun CSS del proyecto
   hasta ahora (bug real encontrado 09/09/2026, reporte de Daniel sobre el
   RAR: la tabla se veia como texto plano sin alinear, con "diferencias en
   la fuente" entre filas -- sin CSS propio, cada fila quedaba a merced de
   estilos heredados de forma inconsistente en vez de una tipografia
   uniforme). Tambien la usan varias vistas de Finance (libro_mayor,
   libro_diario, iva_listado, emisiones, cobranzas, libro_ssn_listado,
   libro_ssn_detalle, ri_conector) -- quedan corregidas por este mismo fix
   sin tocar su PHP, ver docs/ESTADO.md. */
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla-simple thead th {
  text-align: left; padding: 7px 10px; white-space: nowrap;
  background: var(--ejn-azul-acento-mist); border-bottom: 1px solid var(--ejn-azul-acento-soft);
  /* 09/09/2026: --fs-small (12px) en vez de --fs-caption (11px, el mismo
     tamaño que usa .grilla__tabla) -- en una tabla chica embebida dentro
     de una tarjeta (no una grilla de pagina completa) el salto de tamaño
     entre cabecera y filas se notaba mas. Sigue en mayuscula+tracking
     para distinguirse de los datos, pero mas cerca del cuerpo (12.5px). */
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .4px;
  color: var(--gray-600); font-weight: var(--fw-bold);
}
.tabla-simple tbody td {
  padding: 6px 10px; border-bottom: 1px solid var(--gray-100);
  vertical-align: middle; font-weight: var(--fw-regular); font-size: 12.5px;
}
.tabla-simple tbody tr:last-child td { border-bottom: none; }
.tabla-simple tbody tr:nth-child(even) { background: var(--ejn-azul-acento-mist); }
.tabla-simple tbody tr:hover { background: var(--module-accent-soft, var(--ejn-blue-soft)); }
.tabla-simple tfoot td { padding: 7px 10px; background: var(--ejn-azul-acento-mist); border-top: 1px solid var(--ejn-azul-acento-soft); font-weight: var(--fw-bold); font-size: 12px; }

/* .tabla-simple usada como formulario de alta rapida (11/09/2026, pedido
   de Daniel en RAR/Nomina: "Agregar un trabajador a mano" era un
   formulario apilado -- label arriba de cada campo, dos filas -- lo pidio
   como una grilla, mas simple: una sola fila de inputs, alineada con las
   columnas de la nomina de arriba). Clase modificadora a proposito -- sin
   ella, .tabla-simple sigue siendo sólo de lectura en los otros 9 archivos
   que ya la usan (finance) y en los 2 <input> sueltos dentro de <td> que
   ya existian (esop_citacion.php, rgrl.php) sin tocarles el aspecto. */
.tabla-simple--formulario td input,
.tabla-simple--formulario td select {
  width: 100%;
  font-family: var(--font-family);
  font-size: 12.5px;
  padding: 5px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
}
.tabla-simple--formulario td select { padding-right: 26px; }
.tabla-simple--formulario td input:focus,
.tabla-simple--formulario td select:focus {
  outline: none; border-color: var(--ejn-blue); box-shadow: 0 0 0 2px var(--ejn-blue-soft);
}
.tabla-simple--formulario td { vertical-align: middle; }

/* Columna tipo "presencia" del componente grilla() (ver componentes/grilla.php):
   una marca por período, hay/no-hay -- binario, por eso alcanza con una clase
   modificadora en vez de un color arbitrario por valor (P-89, 07/09/2026).
   El style= original usaba var(--linea)/var(--exito, #1a7f4b): ninguno de los
   dos tokens existe en ejn-tokens.css (grep negativo en todo public/assets/css),
   así que el borde nunca se pintó (shorthand inválido sin fallback) y el activo
   siempre cayó al hex hardcodeado, nunca al token. Se corrige acá usando los
   tokens reales del sistema en vez de arrastrar el bug: --gray-300 (mismo
   borde que usan los inputs) y --color-success (semántico, ver MANUAL_DE_MARCA
   §2.3) en vez de un verde hardcodeado. */
.tira-presencia { display: inline-flex; gap: 2px; align-items: center; }
.tira-presencia__marca {
  width: 10px; height: 16px; border-radius: 2px;
  border: 1px solid var(--gray-300); background: transparent;
}
.tira-presencia__marca--activa { background: var(--color-success); }

/* Edición inline en una grilla: el registro que se está editando y la fila de
   edición desplegada se resaltan con el acento del módulo, para que quede claro
   qué se está tocando. El desplegado se alterna con el mismo botón (data-alterna). */
.grilla__tabla tbody tr.fila--editando > td {
  background: var(--module-accent-soft, var(--ejn-blue-soft));
}
.grilla__tabla tbody tr.fila--editando > td:first-child {
  box-shadow: inset 3px 0 0 var(--module-accent, var(--ejn-blue));
}
.grilla__tabla tbody tr.fila-edicion > td {
  background: var(--module-accent-soft, var(--ejn-blue-soft));
  border-bottom: 1px solid var(--gray-200);
  box-shadow: inset 3px 0 0 var(--module-accent, var(--ejn-blue));
  padding: 10px 12px;
}
/* Fila con una alerta operativa a atender (ej. Programas especiales: RAR con
   agente cancerígeno sin DDJJ SVCC presentada para ese período/agente),
   pedido de Daniel 09/09/2026 -- se pinta toda la fila en rojo, no solo un
   badge, porque el aviso es sobre el registro completo. Mismo patrón que
   .fila--editando de arriba, en rojo en vez del acento del módulo. */
.grilla__tabla tbody tr.fila--alerta > td {
  background: var(--ejn-red-soft);
}
.grilla__tabla tbody tr.fila--alerta > td:first-child {
  box-shadow: inset 3px 0 0 var(--ejn-red);
}
.grilla__tabla tbody tr.fila--alerta:hover > td {
  background: var(--ejn-red-soft);
  filter: brightness(.97);
}
/* Fila con una advertencia (no un error/alerta): el agente de riesgo que
   acaba de reabrir un RAR ya presentado a Borrador, pedido de Daniel
   10/09/2026 -- mismo patrón que .fila--alerta de arriba pero en amarillo
   (dorado, igual que .aviso-barra--warn) y sin ligarse a .grilla__tabla
   porque esta tabla puntual (agentes por puesto, core/rar.php) es un
   <table class="tabla-simple">, no el componente grilla.php genérico. */
tr.fila--advertencia > td {
  background: var(--ejn-gold-soft);
}
tr.fila--advertencia > td:first-child {
  box-shadow: inset 3px 0 0 var(--ejn-gold);
}
tr.fila--advertencia:hover > td {
  background: var(--ejn-gold-soft);
  filter: brightness(.97);
}

/* Panel de alta desplegado (no es una fila): borde de acento sutil. */
[data-panel].esta-editando {
  border-left: 3px solid var(--module-accent, var(--ejn-blue));
  padding-left: 10px;
}

.acciones { display: inline-flex; gap: 2px; }
/* Tamano tactil de .acc en mobile: ver nota junto al media 860px
   agregado mas abajo (busca "auditoria responsive"). */
/* Separador horizontal reutilizable. Reemplaza estilos inline (border-top)
   que la CSP `style-src 'self'` descarta. */
.divisor { border-top: 1px solid var(--gray-200); padding-top: var(--space-3); margin-top: var(--space-3); }
/* Form que debe quedar en línea dentro de una celda de acciones (antes
   iba con style="display:inline", bloqueado por la CSP). */
.form-linea { display: inline; }

/* ============================================================
   Auditoria responsive (14/09/2026, pedido de Daniel): "que la
   plataforma detecte el tamaño de pantalla del usuario y ajuste todo
   el sitio... sin perder calidad en el uso". La mayor parte de la
   plataforma ya tenia una base responsive solida (menu de celular,
   grillas con scroll horizontal propio, .rejilla/.fila/.ficha con
   sus propios puntos de quiebre -- ver tasks #23/#41/#55/#56 en
   ESTADO.md). Esta pasada corrige dos problemas puntuales que
   afectaban a TODA la plataforma por igual, no a una pantalla:

   1. Zoom automatico de iOS Safari en los campos de texto (font-size
      menor a 16px dispara zoom-in nativo del sistema al enfocar).
   2. Area tactil de los iconos de Acciones (.acc), 24x24px fijo --
      por debajo del minimo recomendado para touch (44px Apple HIG /
      48px Material). Mismo umbral de 860px que ya usa ejn-app.css
      para "modo celular" (nav-item, .pag/.btn-mini/.btn-icono), asi
      leen como un solo modo coherente entre los dos archivos. */
@media (max-width: 860px) {
  .app .campo input,
  .app .campo select,
  .app .campo textarea,
  .grilla__buscar input,
  .grilla__tabla td > input[type="date"] { font-size: 16px; }
}

.acc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: none; color: var(--gray-600); cursor: pointer;
}
.acc:hover { background: var(--white); border-color: var(--gray-300); color: var(--module-accent-dark, var(--ejn-blue-dark)); }
/* .acc/.acciones en mobile van DESPUES de la regla base (misma
   especificidad -- a igual especificidad gana la que aparece despues
   en el documento, sin importar el @media). Puesta antes, la base sin
   media la pisaba en mobile y el fix no tenia ningun efecto real. */
@media (max-width: 860px) {
  .acc { width: 34px; height: 34px; }
  .acciones { gap: 6px; }
}

.acc--inerte { opacity: .3; cursor: default; }

/* Accion destructiva (eliminar), P-94 07/09/2026: mismo tamano que
   .acc, hover en rojo en vez del color de modulo -- borrar no es una
   accion mas, tiene que leerse distinto antes del clic. */
.acc--dang:hover { background: var(--ejn-red-soft); border-color: var(--ejn-red); color: var(--ejn-red-dark); }

/* Ícono "actualizado" (ej. RAR presentado hace menos de un año en
   Poliza/Establecimientos), pedido de Daniel 09/09/2026: a diferencia de
   .acc--dang (que solo se pinta al pasar el mouse, porque es una advertencia
   sobre la accion), acá el verde es el estado normal del ícono -- informa de
   un vistazo sin necesidad de hacer hover. */
.acc--ok { color: var(--ejn-green-dark); }
.acc--ok:hover { background: var(--ejn-green-soft); border-color: var(--ejn-green); color: var(--ejn-green-dark); }
/* El ícono se pinta relleno sólido (no sólo el trazo) en este estado --
   pedido de Daniel 10/09/2026: con sólo el color de trazo, casi no se
   distinguía del ojo gris por defecto. El SVG condiciona fill=currentColor
   sólo para tono 'ok' (ver componentes/grilla.php, tipo 'ojo'). */
.acc--ok svg { fill: currentColor; }

/* Ícono "plazo" de Investigaciones (Prevención), pedido de Daniel
   17/09/2026: la misma alerta "Plazo vencido (Circular SRT 1/04)" que ya
   se ve en la ficha, resumida en un ícono de ojo en la grilla -- 3
   estados, ninguno depende de hover (hay que poder ver de un pantallazo
   qué investigación necesita atención, sin pasar el mouse fila por fila).

   .acc--pend: plazo corriendo, todavía no vencido -- borde gris visible
   por defecto (a diferencia de .acc, que lo tiene transparente hasta el
   hover). No es rojo porque no hay nada mal todavía, pero tampoco se
   funde con el fondo como un ícono inerte.

   .acc--venc: plazo vencido -- mismo criterio que .acc--ok (relleno
   visible sin hover, ver nota de arriba), pero en rojo. Deliberadamente
   NO se reutiliza .acc--dang: esa clase es la de "eliminar" en toda la
   plataforma y sólo se pinta al pasar el mouse (es una advertencia sobre
   la acción, no un estado); reutilizarla acá habría vuelto invisible por
   defecto la alerta de vencimiento que se pide que sea visible siempre. */
.acc--pend { border-color: var(--gray-300); }

.acc--venc { color: var(--ejn-red-dark); }
.acc--venc:hover { background: var(--ejn-red-soft); border-color: var(--ejn-red); color: var(--ejn-red-dark); }
.acc--venc svg { fill: currentColor; }

.grilla__vacio { margin: 0; padding: var(--space-6); text-align: center; color: var(--gray-600); font-size: var(--fs-small); }

/* Menú desplegable de exportación.
   Se abre con <details>, así que no depende de JavaScript. El panel es
   absoluto y con z-index alto: nunca empuja ni tapa a los botones vecinos. */
.menu { position: relative; display: inline-block; }

.menu > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: 11.5px; font-weight: var(--fw-semibold);
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  background: var(--white); color: var(--gray-700); cursor: pointer;
  list-style: none; user-select: none; white-space: nowrap;
}
.menu > summary::-webkit-details-marker,
.menu > summary::marker { display: none; content: ''; }
.menu > summary:hover { background: var(--gray-50); border-color: var(--gray-400); }
.menu[open] > summary {
  background: var(--module-accent-soft, var(--ejn-blue-soft));
  border-color: var(--module-accent, var(--ejn-blue));
  color: var(--ejn-navy);
}
.menu__caret { font-size: 8px; opacity: .55; transition: transform .15s; }
.menu[open] .menu__caret { transform: rotate(180deg); }

/* 21/09/2026, pedido de Daniel: "quiero que cuando se aplica alguna
   condicion sobre la grilla en los filtros superiores, ese filtro le
   cambie el color para que el usuario note que esta filtrado, puede ser
   AGRUPAR, MOSTRAR, etc." -- clase 'activo', alternada por JS (o server-
   side para Columnas, que ya resuelve su estado inicial en PHP) en
   Agrupar, Mostrar/Ocultar columnas y Filtros por columna (los tres son
   <details class="menu ...">), mas Buscar por separado mas abajo (no es
   un <details>). Mismo nombre y mismo criterio de color que ya usa "Ver
   solo seleccionados" (.grilla__seleccionados--filtro.activo, 18/09/2026)
   -- un solo lenguaje visual de "esto tiene algo aplicado" en toda la
   grilla. Va DESPUES de la regla [open] de arriba a proposito: mismo peso
   de selector (2 clases + tipo), así que por orden en la hoja "tiene una
   condicion aplicada" pisa a "esta abierto" cuando coinciden los dos --
   más importante saber que hay un filtro activo que si el menú está
   desplegado en este instante. */
.menu.activo > summary {
  background: var(--module-accent, var(--ejn-blue));
  border-color: var(--module-accent, var(--ejn-blue));
  color: #FFF;
}
.menu.activo > summary:hover { background: var(--ejn-blue-dark); border-color: var(--ejn-blue-dark); }
.menu.activo .menu__caret { opacity: .85; }

.grilla__buscar.activo input {
  border-color: var(--module-accent, var(--ejn-blue));
  background: var(--module-accent-soft, var(--ejn-blue-soft));
}
.grilla__buscar.activo svg { color: var(--module-accent, var(--ejn-blue)); }

.menu__lista {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 60;
  width: 232px; padding: 5px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.menu__titulo {
  padding: 5px 9px 6px; margin-bottom: 3px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: .8px;
  text-transform: uppercase; color: var(--gray-600);
}

.menu__lista button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border: none; background: none; border-radius: var(--radius-sm);
  font-family: var(--font-family); color: var(--gray-700); cursor: pointer;
}
.menu__lista button:hover { background: var(--module-accent-soft, var(--ejn-blue-soft)); color: var(--ejn-navy); }
.menu__lista button + button { margin-top: 1px; }

.menu__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; flex-shrink: 0;
  border-radius: 4px; font-size: 8.5px; font-weight: var(--fw-bold); letter-spacing: .3px;
}
.menu__icono--csv  { background: var(--ejn-green-soft);  color: var(--ejn-green-dark); }
.menu__icono--xls  { background: #EDECEB;                color: #286650; }
.menu__icono--json { background: var(--ejn-blue-soft);   color: var(--ejn-blue-dark); }
.menu__icono--pdf  { background: var(--ejn-red-soft);    color: var(--ejn-red-dark); }

.menu__texto { display: flex; flex-direction: column; min-width: 0; }
.menu__texto strong { font-size: 12px; font-weight: var(--fw-semibold); line-height: 1.2; }
.menu__texto small { font-size: 10px; color: var(--gray-600); line-height: 1.3; }

.menu__pie {
  padding: 6px 9px 3px; margin-top: 3px; border-top: 1px solid var(--gray-100);
  font-size: 9.5px; color: var(--gray-600); line-height: 1.35;
}

/* ---------- Mostrar/ocultar columnas de grilla ----------
   10/09/2026, pedido de Daniel: "cada usuario tiene una forma de trabajar
   diferente" -- boton al comienzo de la barra (a diferencia de Exportar,
   que va al final) con un checkbox por columna. .menu__lista cuelga con
   right:0 por defecto (pensado para el boton de Exportar, al final de la
   barra) -- acá va a la izquierda del propio boton, así que se invierte:
   si colgara a la derecha se saldría del contenedor. */
.menu--columnas .menu__lista { left: 0; right: auto; }

/* ---------- Agrupar (agrupación real de filas, 21/09/2026, pedido de Daniel) ----------
   Distinto de .grilla__agrupar de más arriba (esa es un filtro en cascada,
   nunca reordena filas). El panel cuelga a la izquierda igual que
   "Columnas visibles", con el mismo <select> del sistema (sin
   reimplementar un combo propio) y una lista numerada de los niveles ya
   elegidos, cada uno con su botón "×" para sacarlo. */
.menu--agrupacion .menu__lista { left: 0; right: auto; width: 260px; }
.menu--agrupacion select { width: 100%; margin: 2px 0 8px; }
.menu__agrupacion-niveles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.menu__agrupacion-nivel {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: var(--radius-sm); background: var(--gray-50);
}
.menu__agrupacion-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--module-accent, var(--ejn-blue)); color: var(--white);
  font-size: 9.5px; font-weight: var(--fw-bold);
}
.menu__agrupacion-texto { flex: 1; min-width: 0; font-size: 12px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__agrupacion-quitar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; padding: 0; border: none; border-radius: 999px;
  background: var(--gray-200); color: var(--gray-600); font-size: 12px; line-height: 1; cursor: pointer;
}
.menu__agrupacion-quitar:hover { background: var(--ejn-red-soft); color: var(--ejn-red-dark); }

/* Fila de encabezado de grupo dentro de la tabla: ocupa todo el ancho
   (colspan calculado en JS) y funciona como un botón grande -- clic en
   cualquier parte de la fila expande/contrae, no sólo el ícono. */
.grilla__grupo-fila { background: var(--gray-50); cursor: pointer; }
.grilla__grupo-fila:hover { background: var(--module-accent-soft, var(--ejn-blue-soft)); }
.grilla__grupo-fila td { padding: 6px 10px; border-bottom: 1px solid var(--gray-100); }
.grilla__grupo-toggle { display: inline-block; width: 14px; color: var(--gray-600); font-size: 10px; }
.grilla__grupo-texto { font-weight: var(--fw-semibold); color: var(--gray-700); margin-right: 6px; }
.grilla__grupo-cant { color: var(--gray-600); font-size: 11px; }

.menu__lista--columnas { max-height: 320px; overflow-y: auto; }

.menu--importar .menu__caret { opacity: .85; }
.menu--importar .menu__lista { left: 0; right: auto; }

.menu__check {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 9px; border-radius: var(--radius-sm);
  font-size: 12px; color: var(--gray-700); cursor: pointer;
}
.menu__check:hover { background: var(--gray-50); }
.menu__check input { margin: 0; flex-shrink: 0; }

.menu__marcar-todos {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 6px 9px;
  font-family: var(--font-family); font-size: 11.5px; font-weight: var(--fw-semibold);
  color: var(--module-accent-dark, var(--ejn-blue-dark)); cursor: pointer;
}
.menu__marcar-todos:hover { text-decoration: underline; }

/* ---------- Filtros de grilla: multi-seleccion (17/09/2026) ----------
   Pedido de Daniel: poder marcar una o varias opciones por filtro de
   grilla (antes era un <select> de una sola opcion, `.grilla__filtro`
   mas abajo en este archivo, que ya no se usa en el markup pero se deja
   sin tocar por si alguna vista vieja no actualizada aun lo referencia).
   Mismo componente `.menu` + <details> que "Columnas visibles", pero
   colgando a la izquierda (como los filtros viejos), no a la derecha
   (que es el default pensado para "Exportar"). */
.menu--filtro > summary { max-width: 220px; }
.menu--filtro > summary span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu--filtro .menu__lista { left: 0; right: auto; }
.menu--filtro .menu__lista--filtro { max-height: 320px; overflow-y: auto; }
/* Filtros elegibles (21/10/2026): el desplegable «Filtros» lista las columnas filtrables y los chips elegidos van en su propia fila, debajo de la barra. */
.grilla--filtros-elegibles .menu--filtro[hidden] { display: none; }
.grilla--filtros-elegibles .grilla__filtros-grupo { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: inherit; }
.grilla--filtros-elegibles .grilla__filtros-grupo:not(:has(.menu--filtro:not([hidden]))) { display: none; }
.menu--filtros-todos .menu__lista--filtros-elegibles { left: 0; right: auto; width: 250px; }
.menu--filtro .menu__pie { display: flex; gap: 4px; }
.menu--filtro .menu__pie .menu__marcar-todos { width: auto; }

.menu--calendario-cno .menu__lista { left: auto; right: 0; width: 300px; padding: 12px; }

/* Tarjeta de aviso clicable del tablero */
a.kpi { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.kpi:hover { box-shadow: var(--shadow-md); border-color: var(--module-accent, var(--ejn-blue)); }
a.kpi::after { content: '→'; float: right; margin-top: -20px; color: var(--gray-300); font-size: 15px; }
a.kpi:hover::after { color: var(--module-accent-dark, var(--ejn-blue-dark)); }

a.hilo { text-decoration: none; color: inherit; }
a.hilo:hover { background: var(--module-accent-soft, var(--ejn-blue-soft)); }

/* Circuito de autorización */
.circuito { display: flex; flex-direction: column; gap: 0; }

/* Barra de alerta arriba del contenido */
.aviso-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 13px; margin-bottom: var(--space-4);
  border-radius: var(--radius-sm); font-size: 12.5px;
  border-left: 3px solid;
}
.aviso-barra--dang { background: var(--ejn-red-soft);  border-color: var(--ejn-red);  color: var(--ejn-red-dark); }
.aviso-barra--warn { background: var(--ejn-gold-soft); border-color: var(--ejn-gold); color: var(--ejn-gold-dark); }
.aviso-barra--info { background: var(--ejn-blue-soft); border-color: var(--ejn-blue); color: var(--ejn-blue-dark); }
.aviso-barra--ok   { background: var(--ejn-green-soft, #EEEEEE); border-color: var(--ejn-green, #35876A); color: var(--ejn-green-dark, #27644F); }
.aviso-barra b { font-weight: var(--fw-bold); }
.aviso-barra .btn-mini { margin-left: auto; }

/* Con qué perfil se está mirando el módulo */
.banda-perfil {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 18px; border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50); font-size: 11.5px; color: var(--gray-700);
}
.banda-perfil__quien {
  padding: 2px 9px; border-radius: 999px;
  background: var(--module-accent, var(--ejn-blue)); color: #FFF;
  font-weight: var(--fw-semibold); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .4px;
}
.banda-perfil__texto { flex: 1 1 auto; min-width: 0; }
.banda-perfil__modo {
  padding: 2px 9px; border: 1px solid var(--gray-300); border-radius: 999px;
  font-size: 10.5px; color: var(--gray-600); white-space: nowrap;
}
.banda-perfil__probar {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--gray-600); white-space: nowrap;
}
.banda-perfil__opcion {
  padding: 2px 8px; border: 1px solid var(--gray-300); border-radius: 999px;
  color: var(--gray-600); text-decoration: none;
}
.banda-perfil__opcion:hover { background: var(--white); border-color: var(--gray-400); }
.banda-perfil__opcion--activa {
  background: var(--ejn-navy); border-color: var(--ejn-navy); color: #FFF;
}

/* Enlace de una grilla a otro registro: el vínculo tiene que verse */
.enlace-registro { text-decoration: none; }
.enlace-registro:not(:has(.badge)) {
  color: var(--ejn-blue-dark); font-weight: var(--fw-semibold);
  border-bottom: 1px dotted currentColor;
}
.enlace-registro:hover .badge { filter: brightness(.95); }

/* 17/09/2026: .enlace-registro tambien se usa en un <button> cuando la
   accion abre un panel (Consulta rapida) en vez de navegar a otra
   pantalla -- mismo aspecto visual, sin el chrome nativo de boton. */
button.enlace-registro {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; cursor: pointer;
}

/* Canales de una plantilla: casillas grandes, no una lista suelta */
.canales { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.canal {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--white); cursor: pointer;
}
.canal:hover { border-color: var(--gray-400); background: var(--gray-50); }
.canal--elegido { border-color: var(--module-accent, var(--ejn-blue)); background: var(--module-accent-soft, var(--ejn-blue-soft)); }

/* Opción que la aseguradora no habilitó: se muestra, pero apagada. Ver que
   existe y no está disponible dice más que no verla. */
.canal--bloqueado {
  opacity: .55; cursor: not-allowed;
  background: repeating-linear-gradient(
    -45deg, var(--gray-50), var(--gray-50) 6px, var(--white) 6px, var(--white) 12px);
}
.canal--bloqueado:hover { border-color: var(--gray-200); background: var(--gray-50); }
.canal input { margin-top: 2px; flex-shrink: 0; accent-color: var(--module-accent, var(--ejn-blue)); }
.canal__texto { display: flex; flex-direction: column; min-width: 0; }
.canal__texto strong { font-size: 12.5px; font-weight: var(--fw-semibold); line-height: 1.25; }
.canal__texto small { font-size: 10.5px; color: var(--gray-600); }
.canal--elegido .canal__texto strong { color: var(--ejn-navy); }

/* Organigrama: árbol vertical con conectores */
.organi__marco { overflow-x: auto; padding: var(--space-3) 0; }
ul.organi { list-style: none; margin: 0; padding-left: 26px; position: relative; }
ul.organi > .organi__nodo { position: relative; padding: 5px 0 5px 22px; }
ul.organi > .organi__nodo::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  border-left: 1px solid var(--gray-300);
}
ul.organi > .organi__nodo:last-child::before { bottom: calc(100% - 24px); }
ul.organi > .organi__nodo::after {
  content: ''; position: absolute; left: 0; top: 24px; width: 18px;
  border-top: 1px solid var(--gray-300);
}
.organi__marco > ul.organi { padding-left: 0; }
.organi__marco > ul.organi > .organi__nodo { padding-left: 0; }
.organi__marco > ul.organi > .organi__nodo::before,
.organi__marco > ul.organi > .organi__nodo::after { display: none; }

.organi__caja {
  display: inline-flex; flex-direction: column; gap: 1px;
  min-width: 250px; padding: 8px 12px;
  border: 1px solid var(--gray-200); border-left: 3px solid var(--module-accent, var(--ejn-blue));
  border-radius: var(--radius-sm); background: var(--white); text-decoration: none;
}
.organi__caja:hover { border-color: var(--module-accent, var(--ejn-blue)); box-shadow: var(--shadow-sm); }
.organi__caja--vacante { border-left-color: var(--ejn-gold); background: var(--ejn-gold-soft); }
.organi__cargo { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--ejn-navy); }
.organi__ocupante { font-size: 11.5px; color: var(--gray-600); }
.organi__pie { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.organi__pie .mono { color: var(--gray-600); }

/* Sello de inalterabilidad */
.sello {
  border: 1px solid var(--ejn-green); border-radius: var(--radius-md);
  background: var(--ejn-green-soft); padding: 13px 15px;
}
.sello--roto { border-color: var(--ejn-red); background: var(--ejn-red-soft); }
.sello__codigo {
  font-family: var(--font-family);
  font-size: 17px; font-weight: 700; letter-spacing: 1.5px; color: var(--ejn-green-dark);
}
.sello--roto .sello__codigo { color: var(--ejn-red-dark); }
.sello__rotulo { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .6px; font-weight: var(--fw-bold); color: var(--ejn-green-dark); }
.sello--roto .sello__rotulo { color: var(--ejn-red-dark); }
.sello__huella {
  font-family: var(--font-family); font-size: 10.5px;
  word-break: break-all; color: var(--gray-600); margin-top: 6px; line-height: 1.5;
}
.cadena { display: flex; flex-direction: column; gap: 0; }
.cadena__eslabon { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.cadena__num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ejn-green-soft); color: var(--ejn-green-dark);
  font-size: 11px; font-weight: var(--fw-bold);
}
.cadena__datos { flex: 1; min-width: 0; }
.cadena__link { text-align: center; color: var(--gray-300); font-size: 13px; line-height: 1; }

/* Documento impreso: membrete, cuerpo, firma y pie.
   Es lo que ve el destinatario, no una vista del sistema. Por eso usa
   tipografía y márgenes de papel, no la densidad del panel. */
.documento {
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--white); overflow: hidden;
}
.documento__membrete {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 2px solid var(--module-accent, var(--ejn-blue));
  background: var(--gray-50);
}
.documento__membrete img { flex-shrink: 0; }
.documento__datos { font-size: 10.5px; line-height: 1.5; color: var(--gray-700); }
.documento__asunto {
  padding: 11px 18px 0; font-size: 13px; font-weight: var(--fw-bold); color: var(--ejn-navy);
}
.documento__cuerpo { padding: 13px 18px; font-size: 12.5px; line-height: 1.7; color: var(--gray-900); }
.documento__firma {
  padding: 4px 18px 16px; font-size: 11.5px; line-height: 1.5;
}
.documento__firma-linea { font-weight: var(--fw-semibold); color: var(--ejn-navy); }
.documento__firma-linea + .documento__firma-linea { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--gray-200); display: inline-block; min-width: 200px; }
.documento__firma-sector { color: var(--gray-600); }
.documento__firma-art { margin-top: 3px; font-size: 10.5px; color: var(--gray-600); }
.documento__pie {
  padding: 9px 18px; border-top: 1px solid var(--gray-200); background: var(--gray-50);
  font-size: 9.5px; line-height: 1.5; color: var(--gray-600); text-align: center;
}

/* Caja del logo cargado */
.logo-caja {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border: 1px dashed var(--gray-300); border-radius: var(--radius-sm);
  background: var(--gray-50);
}
.logo-caja .mono { color: var(--gray-600); }
.logo-caja--vacia { justify-content: center; min-height: 62px; }

/* Firma escaneada estampada en el documento */
.documento__firma-imagen {
  display: block; margin: 0 0 -6px -4px; max-width: 210px; opacity: .92;
}
.documento__firma-poder {
  margin-top: 5px; font-size: 9.5px; font-style: italic; color: var(--gray-600);
}

/* Banda de alerta del sistema: la ve todo el mundo, en toda pantalla */
.banda-sistema {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 18px; border-bottom: 1px solid transparent;
  font-size: 12px; line-height: 1.45;
}
.banda-sistema--dang { background: #FDECEE; border-bottom-color: #F6BEC3; color: #A41621; }
.banda-sistema--warn { background: #FDF7E8; border-bottom-color: #F5E0A7; color: #88670F; }
.banda-sistema--info { background: #E3EEF5; border-bottom-color: #C5DAE8; color: #244F68; }
.banda-sistema svg { flex: 0 0 auto; }
.banda-sistema__texto { flex: 1 1 auto; min-width: 0; }
.banda-sistema__texto b { font-weight: var(--fw-semibold); }
.banda-sistema__accion {
  flex: 0 0 auto; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px;
  font-size: 11px; font-weight: var(--fw-semibold); color: inherit; text-decoration: none;
  white-space: nowrap;
}
.banda-sistema__accion:hover { background: rgba(255, 255, 255, .55); }

/* Avisos con contenido real en el panel lateral */
.aviso-item {
  display: block; margin-top: 8px; padding: 9px 11px;
  border: 1px solid var(--gray-200); border-left-width: 3px; border-radius: var(--radius-sm);
  background: var(--white); text-decoration: none; color: inherit;
}
.aviso-item:hover { background: var(--gray-50); }
.aviso-item--dang { border-left-color: var(--ejn-red); }
.aviso-item--warn { border-left-color: #B58914; }
.aviso-item__titulo { display: block; font-size: 12px; color: var(--ejn-navy); }
.aviso-item__texto { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--gray-600); }
.aviso-item__accion { display: block; margin-top: 5px; font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--gray-600); }

/* Previsualización del contenido de una notificación */
.previsual { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.previsual__asunto {
  padding: 9px 13px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50);
  font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--ejn-navy);
}
.previsual__cuerpo { padding: 13px; font-size: 12.5px; line-height: 1.65; color: var(--gray-700); }
.previsual__cuerpo b { color: var(--ejn-navy); }

/* Comparación dato enviado / dato corregido */
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 800px) { .diff { grid-template-columns: 1fr; } }
.diff__lado { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.diff__cab { padding: 5px 10px; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .5px; font-weight: var(--fw-bold); }
.diff__cab--antes { background: var(--ejn-red-soft); color: var(--ejn-red-dark); }
.diff__cab--despues { background: var(--ejn-green-soft); color: var(--ejn-green-dark); }
.diff pre { margin: 0; padding: 10px; font-family: var(--font-family); font-size: 11px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }

.grilla__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; padding: 7px 10px; border-top: 1px solid var(--gray-200);
  background: var(--gray-50); border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.grilla__conteo { display: flex; align-items: center; gap: var(--space-3); font-size: 11.5px; color: var(--gray-600); }
.grilla__tam { display: flex; align-items: center; gap: 5px; }
.grilla__tam select { padding: 3px 20px 3px 6px; font-size: 11.5px; background-position: right 5px center; }

.paginador { display: flex; align-items: center; gap: 3px; }
.pag {
  min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  background: var(--white); color: var(--gray-700); cursor: pointer;
  font-family: var(--font-family); font-size: 13px; line-height: 1;
}
.pag:hover:not(:disabled) { background: var(--module-accent-soft, var(--ejn-blue-soft)); border-color: var(--module-accent, var(--ejn-blue)); }
.pag:disabled { opacity: .35; cursor: default; }
.pag-info { padding: 0 8px; font-size: 11.5px; color: var(--gray-600); font-variant-numeric: tabular-nums; }

/* ---------- Selección múltiple con casillas ----------
   Hay campos que son «marcá todos los que correspondan»: los servicios que
   brinda un prestador, los módulos que habilita una licencia. Un desplegable
   múltiple nativo es incómodo —hay que saber que se usa con Ctrl— y esconde
   lo que está marcado justo cuando lo importante es verlo de un vistazo.

   Se dibujan en columnas de ancho fijo y no con `flex-wrap`, para que las
   opciones queden alineadas en grilla y no formen un párrafo de texto suelto
   que obliga a leer palabra por palabra. */
.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 2px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--gray-50);
}

.opcion {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--gray-700); cursor: pointer;
}

.opcion:hover { background: var(--white); }
.opcion input { margin: 0; accent-color: var(--module-accent, var(--ejn-blue)); cursor: pointer; }
.opcion input:checked + span { font-weight: var(--fw-semibold); color: var(--ejn-navy); }

/* Grupo corto de opción única, en línea (ej. Cumple/No cumple/N/A del
   checklist RGRL): a diferencia de .opciones de arriba -- pensada para
   listas largas que conviene alinear en grilla -- acá son siempre 2-3
   valores fijos, así que apilarlos en columna sólo desperdicia alto. En
   un checklist de 100+ ítems eso significaba mucho scroll para nada
   (pedido de Daniel 09/09/2026). Se agrega como modificador
   (`.opciones.opciones--linea`) en vez de tocar `.opciones` para no
   afectar las otras pantallas que ya la usan con listas más largas. */
.opciones--linea {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 14px;
  max-height: none;
  overflow: visible;
  /* 11/09/2026 (2da vuelta, pedido de Daniel): la fila seguia
     viendose igual de alta pese a achicar el padding del <td> y
     redistribuir columnas -- la caja real que sobraba era esta:
     .opciones (la base) trae padding:10px 12px + border:1px, pensado
     para el panel vertical con scroll de una lista larga de
     checkboxes, no para 2-3 radios en una sola linea. Se le saca el
     padding/border/fondo -- en una fila de grilla ya alcanza con la
     linea divisoria de la propia fila, no hace falta un recuadro
     aparte adentro de la celda. */
  padding: 0;
  border: none;
  background: transparent;
  /* 11/09/2026 (pedido de Daniel): alinear las 3 pills a la derecha
     para que la columna Cumple quede pareja con Regularizacion (que
     tambien se alinea a la derecha, ver .txt-der en rgrl.php) --
     text-align no alcanza porque esto es un flex row, hace falta
     justify-content. */
  justify-content: flex-end;
}
/* 09/09/2026: el texto de cada opcion (ej. "No cumple") no debe partirse
   en dos lineas -- eso fue lo que estiraba el alto de cada fila del
   checklist del RGRL mucho mas de lo necesario. Scoped a .opciones--linea
   (no a .opcion en general) para no tocar las listas largas en columna
   que ya usan .opciones en otras pantallas. */
.opciones--linea .opcion { white-space: nowrap; padding: 2px 5px; }

/* 09/09/2026 (pedido de Daniel): checkbox-grupo LARGO de una sola
   categoría (ej. las 24 provincias habilitadas de un preventor) -- ni
   .opciones (columna angosta, mucho scroll) ni .opciones--linea (una
   sola fila, se corta y obliga a scroll horizontal) sirven para esto.
   Grilla real de varias columnas, sin overflow horizontal: cada opción
   ocupa su celda y el conjunto crece hacia abajo, no hacia los costados. */
.opciones--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 16px;
  max-height: none;
  overflow: visible;
}

/* Lista de datos breve dentro de una tarjeta: pocas líneas, sin cromo. */
/* Buscador sobre un select largo.
   El select original queda en el DOM y sigue mandando el valor: se esconde
   sin `display:none` para que la validación nativa del navegador pueda
   enfocarlo y mostrar su globo de error. */
.combo { position: relative; }
.combo__oculto {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
}
.combo__entrada { width: 100%; }
.combo__entrada--vacio { border-color: var(--ejn-red); }

.combo__lista {
  position: absolute; z-index: 40; top: 100%; left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  list-style: none; margin: 2px 0 0; padding: 4px;
  background: var(--white); border: 1px solid var(--gray-300);
  border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.combo__opcion {
  padding: 6px 9px; font-size: 12.5px; cursor: pointer;
  border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo__opcion:hover,
.combo__opcion--marcada { background: var(--module-accent-soft, var(--gray-100)); }
.combo__vacio { padding: 10px; font-size: 12px; color: var(--gray-600); }

/* El conteo va pegado arriba y dentro de la lista, no debajo: si estuviera
   fuera habría que adivinar el alto de la lista para posicionarlo. */
.combo__conteo {
  position: sticky; top: -4px; z-index: 1;
  margin: -4px -4px 4px; padding: 5px 9px;
  font-size: 10.5px; color: var(--gray-600);
  background: var(--gray-50, #FAFBFC); border-bottom: 1px solid var(--gray-200);
}

/* Adjuntos ya cargados de una prestación. */
.adjuntos { list-style: none; margin: 0; padding: 0; }
.adjuntos li {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--gray-100);
}
.adjuntos li:last-child { border-bottom: none; }

/* Asiento clínico: texto que se lee, no dato que se compara.
   Se distingue del resto de la ficha a propósito — lo escribió una persona y
   respeta sus saltos de línea; el ancho se limita porque una línea de 200
   caracteres no se lee. */
.asiento {
  white-space: pre-wrap; max-width: 78ch;
  font-size: 12.5px; line-height: 1.6; color: var(--gray-800, var(--gray-700));
  padding: 10px 14px; margin: 0 0 var(--space-3);
  background: var(--gray-50, #FAFBFC);
  border-left: 3px solid var(--module-accent, var(--ejn-blue));
}

.listado { list-style: none; margin: 0; padding: 0; }
.listado li {
  padding: 6px 0; font-size: 12.5px; color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}
.listado li:last-child { border-bottom: none; }

/* Impresión: solo la grilla pedida, sin cromo de la aplicación. */
@media print {
  body.imprimiendo .barra-lateral,
  body.imprimiendo .barra-superior,
  body.imprimiendo .avisos,
  body.imprimiendo .avisos-fondo,
  body.imprimiendo .grilla__barra,
  body.imprimiendo .grilla__pie,
  body.imprimiendo .col-acc,
  body.imprimiendo .col-sel { display: none !important; }

  body.imprimiendo .app { display: block; height: auto; overflow: visible; }
  body.imprimiendo .contenido { overflow: visible; padding: 0; }
  body.imprimiendo .grilla { border: none; }
  body.imprimiendo .grilla__tabla tbody tr[hidden] { display: none; }
  /* Codigo de validacion del documento (migracion 331): al pie de cada pagina de lo que se imprime desde la grilla. */
  body.imprimiendo .grilla__pie-firma { display: block; position: fixed; left: 8mm; right: 8mm; bottom: 3mm; margin: 0; font-size: 6.5pt; color: var(--gray-600); }
}
.grilla__pie-firma { display: none; }

/* Wiki interna: contenido renderizado desde Markdown liviano (core/Negocio/Markdown.php). */
.wiki-contenido h2 { margin-top: 0; }
.wiki-contenido h2, .wiki-contenido h3, .wiki-contenido h4 { margin-bottom: .5rem; }
.wiki-contenido p { line-height: 1.6; margin: 0 0 1rem; }
.wiki-contenido ul, .wiki-contenido ol { margin: 0 0 1rem 1.25rem; }
.wiki-contenido li { margin-bottom: .25rem; }
.wiki-contenido blockquote {
  margin: 0 0 1rem;
  padding: .6rem 1rem;
  border-left: 3px solid var(--gray-300, #DAD7D3);
  background: var(--gray-50, #FAFBFC);
  border-radius: 0 .375rem .375rem 0;
}
.wiki-tabla { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.wiki-tabla th, .wiki-tabla td {
  border: 1px solid var(--gray-200, #EAE9E7);
  padding: .5rem .75rem;
  text-align: left;
  vertical-align: top;
}
.wiki-tabla th { background: var(--gray-50, #FAFBFC); font-weight: 600; }
.wiki-figura { margin: 0 0 1.25rem; }
.wiki-figura img {
  max-width: 100%;
  border: 1px solid var(--gray-200, #EAE9E7);
  border-radius: .5rem;
  display: block;
}
.wiki-figura figcaption {
  font-size: .8125rem;
  color: var(--gray-500, #777777);
  margin-top: .375rem;
}

/* ------------------------------------------------------------------
   Orden del menú (P-98, pedido de Daniel 09/09/2026) -- listas
   arrastrables de la pantalla /plataforma/orden-menu.
   ------------------------------------------------------------------ */
.orden-menu__lista {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.orden-menu__fila {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--gray-50, #FAFBFC);
  border: 1px solid var(--gray-200, #EAE9E7);
  border-radius: .5rem;
  cursor: grab;
  user-select: none;
}
.orden-menu__fila:active { cursor: grabbing; }
.orden-menu__fila--arrastrando { opacity: .4; }
.orden-menu__fila--item { background: #fff; padding: .375rem .625rem; }
.orden-menu__asa { color: var(--gray-400, #A6A6A6); flex-shrink: 0; display: flex; }
.orden-menu__rotulo { font-size: .9375rem; }
.orden-menu__grupos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.orden-menu__grupo {
  border: 1px solid var(--gray-200, #EAE9E7);
  border-radius: .625rem;
  padding: .625rem .75rem .75rem;
  background: var(--gray-50, #FAFBFC);
}
.orden-menu__grupo-cabecera {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: grab;
  user-select: none;
  margin-bottom: .5rem;
  font-weight: 600;
}
.orden-menu__grupo-cabecera:active { cursor: grabbing; }
.orden-menu__lista--items { margin: 0; padding-left: 1.75rem; gap: .25rem; }

/* ESOP -- Accionar por estudio y resultado (migración 189, 14/09/2026):
   enlace de "pasos de seguimiento" bajo cada celda de la matriz, y ajustes
   mínimos para la tabla de pasos de la pantalla de detalle. */
.celda-accionar { display: flex; flex-direction: column; gap: 2px; }
.celda-accionar__pasos { font-size: 10.5px; color: var(--gray-400, #A6A6A6); text-decoration: none; white-space: nowrap; }
.celda-accionar__pasos:hover { color: var(--brand-600, #5096C1); text-decoration: underline; }
#tabla-pasos { border: 1px solid var(--gray-200); }
#tabla-pasos th, #tabla-pasos td { border: 1px solid var(--gray-100); }
#tabla-pasos td.centrado { text-align: center; }
#tabla-pasos select,
#tabla-pasos input[type="number"],
#tabla-pasos input[type="text"],
#tabla-pasos .combo__entrada {
  display: block; width: 100%; min-width: 90px; height: 30px; box-sizing: border-box;
  font-family: var(--font-family); font-size: 12.5px; padding: 0 8px;
  border: none; border-radius: 0;
  background-color: transparent; color: var(--gray-900);
}
#tabla-pasos select { padding: 0 26px 0 8px; }
#tabla-pasos input[type="number"]:focus,
#tabla-pasos input[type="text"]:focus,
#tabla-pasos select:focus,
#tabla-pasos .combo__entrada:focus {
  outline: none; box-shadow: inset 0 0 0 2px var(--ejn-blue); background-color: var(--white);
}
#tabla-pasos input[type="number"] { min-width: 64px; }
#tabla-pasos .combo { position: relative; min-width: 90px; }
#tabla-pasos .combo__lista { font-size: 12.5px; }

/* P-108 (16/09/2026, pedido de Daniel): submenú dentro del submenú
   (subgrupos) + flechas subir/bajar en /plataforma/orden-menu. */
.orden-menu__flecha {
  border: 1px solid var(--gray-200, #EAE9E7);
  background: #fff;
  border-radius: .25rem;
  width: 1.375rem;
  height: 1.375rem;
  line-height: 1;
  font-size: .625rem;
  color: var(--gray-500, #777777);
  cursor: pointer;
  flex-shrink: 0;
}
.orden-menu__flecha:hover { background: var(--gray-100, #F4F6F8); color: var(--ejn-navy, #282828); }
.orden-menu__subgrupo {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
  background: var(--gray-100, #F4F6F8);
}
.orden-menu__subgrupo-cabecera {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: grab;
  user-select: none;
}
.orden-menu__subgrupo-cabecera:active { cursor: grabbing; }
.orden-menu__subgrupo-titulo {
  flex: 1;
  min-width: 0;
  font-size: .875rem;
  font-weight: 600;
  border: 1px solid var(--gray-200, #EAE9E7);
  border-radius: .25rem;
  padding: .25rem .5rem;
  background: #fff;
}
.orden-menu__lista--subitems { margin: .5rem 0 0; padding-left: 1.5rem; gap: .25rem; }
.orden-menu__submenu-select {
  font-size: .8125rem;
  border: 1px solid var(--gray-200, #EAE9E7);
  border-radius: .25rem;
  padding: .1875rem .375rem;
  color: var(--gray-600, #585858);
  max-width: 11rem;
}
.orden-menu__nuevo-subgrupo { margin-top: .5rem; }

/* P-108 (16/09/2026): submenú dentro del submenú en la navegación lateral
   -- sólo un divisor de título e indentación extra, sin acordeón propio
   (ver comentario en layouts/privado.php, $grupoNav). */
.nav-subgrupo__titulo {
  padding: 6px 10px 2px 31px;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--gray-600);
}
.nav-item--anidado { padding-left: 44px; }
.app--plegado .nav-subgrupo__titulo { display: none; }
.app--plegado .nav-item--anidado { padding-left: 0; }

/* 27/09/2026 (pedido de Daniel): pantalla "Prestadores cercanos" del
   portal de Work -- ver app/Views/work/prestadores_cercanos.php y
   rixart-prestadores-cercanos.js. .mapa-preview (altura, borde) ya existe
   en rixart-mapa-picker.css; acá sólo lo que es propio de esta pantalla. */
.pc-panel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pc-estado { margin: 0; flex: 1 1 260px; }
.pc-mapa { min-height: 320px; }
.pc-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.pc-tarjeta { padding: var(--space-3); margin-bottom: 0; }
.pc-tarjeta__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.pc-tarjeta__cabecera strong { color: var(--gray-900); }
.pc-tarjeta__linea { margin: 2px 0; font-size: 12.5px; color: var(--gray-600); }
.pc-tarjeta [data-pc-como-llegar] { margin-top: var(--space-2); }

/* =====================================================================================================================
   Estilo LICIPAS (17/10/2026): forma de los componentes del panel tomada de LICIPAS 0.49.1 (docs/ux/PROMPT_ESTILO_LICIPAS_PARA_RIXART.md).
   No cambia la marca de RIXART: usa SOLO los tokens (el acento de cada módulo sigue mandando en el menú). Sin hex ni rgba nuevos.
   ===================================================================================================================== */

/* --- Menú lateral: ítems compactos con barra y pastilla en el activo, versión y salir (desde 861 px) --- */
@media (min-width: 861px) {
  .barra-lateral__nav { gap: 1px; padding-top: var(--space-3); }
  .nav-item { gap: 10px; padding: 7px 10px; border-radius: 10px; border-left: 0; position: relative; font-size: 13px; transition: background .15s ease, color .15s ease; }
  .nav-item .ico { width: 17px; height: 17px; stroke-width: 1.6; opacity: 1; color: var(--gray-700); transition: color .15s ease; }
  .nav-item .ico--escudo { width: 18px; height: 18px; }
  a.nav-item:hover { background: var(--ejn-azul-acento-mist); color: var(--ejn-navy); }
  a.nav-item:hover .ico { color: var(--module-accent, var(--ejn-azul-acento)); }
  .nav-item--activo, .nav-sub .nav-item--activo { background: linear-gradient(90deg, var(--module-accent-soft, var(--ejn-azul-acento-soft)), var(--ejn-azul-acento-mist)); font-weight: var(--fw-semibold); border-left: 0; }
  .nav-item--activo::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 4px 4px 0; background: var(--module-accent, var(--ejn-azul-acento)); }
  .nav-item--activo .ico { color: var(--module-accent, var(--ejn-azul-acento)); }
  .nav-sub .nav-item { padding: 6px 10px 6px 31px; font-size: 12.5px; border-radius: 10px; }
  .nav-sub .nav-item:hover { background: var(--ejn-azul-acento-mist); color: var(--ejn-navy); }
  .nav-sub .nav-item .ico { opacity: 1; }
  .nav-item--anidado { padding-left: 44px; }
  .nav-titulo { margin: 12px 0 3px; padding: 0 10px; font-size: 10px; letter-spacing: 1.4px; color: var(--gray-700); }
  .barra-lateral__pie { gap: var(--space-2); border-top: 0; }
  .version { display: block; margin: 0; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--ejn-teal-soft); background: linear-gradient(120deg, var(--ejn-teal-soft), var(--ejn-azul-acento-mist)); box-shadow: var(--shadow-sm); }
  .version:hover { background: linear-gradient(120deg, var(--ejn-teal-soft), var(--ejn-azul-acento-soft)); }
  .version__num { font-size: 12.5px; color: var(--ejn-navy); }
  .version__nom { font-size: 10.5px; color: var(--gray-700); }
  .barra-lateral .btn-salir { min-height: 34px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--gray-600), var(--ejn-navy)); color: var(--white); font-size: 12.5px; font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); }
  .barra-lateral .btn-salir:hover { background: linear-gradient(135deg, var(--gray-700), var(--ejn-navy-dark)); color: var(--white); }
  .barra-lateral .btn-salir .ico { color: var(--white); }
  .app--plegado .nav-item--activo::before { top: 7px; bottom: 7px; }
  .app--plegado .nav-item .ico { width: 21px; height: 21px; }
  .app--plegado .nav-sub .nav-item .ico { width: 19px; height: 19px; }
  .app--plegado .nav-item--anidado { padding-left: 0; }
  .app--plegado .version { padding: 7px 2px; }
  .app--plegado .barra-lateral .btn-salir { min-height: 32px; border-radius: var(--radius-sm); }
}
@media (prefers-reduced-motion: reduce) { .nav-item, .nav-item .ico { transition: none; } }

/* --- Ruta de acceso (migas) en la barra superior: casita de Inicio / módulo / categoría / pantalla actual en negrita --- */
.migas-admin { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--gray-600); }
.migas-admin strong, .migas-admin b { color: var(--ejn-navy); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.migas-admin__sep { color: var(--gray-300); }
.migas-admin__enlace { display: inline-flex; align-items: center; color: var(--gray-600); text-decoration: none; }
.migas-admin__enlace:hover { color: var(--ejn-azul-acento); }
.migas-admin__enlace:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; border-radius: 4px; }
.migas-admin__enlace .ico { opacity: 1; color: var(--ejn-azul-acento); }
@media (max-width: 640px) { .migas-admin__raiz, .migas-admin__sep { display: none; } }

/* --- Datos del usuario en la barra superior: sin tarjeta, línea divisoria fina, avatar de 30 px, nombre y rol debajo --- */
.barra-superior__der { gap: var(--space-3); }
.usuario-chip--tarjeta, .usuario-chip--tarjeta:hover { gap: 10px; padding: 0 0 0 var(--space-3); margin: 0; border-left: 1px solid var(--gray-200); border-radius: 0; text-decoration: none; background: none; color: inherit; }
.usuario-chip--tarjeta:focus-visible { outline: 3px solid var(--ejn-azul-acento-soft); outline-offset: 4px; border-radius: 8px; }
.usuario-chip--tarjeta .usuario-chip__foto, .usuario-chip--tarjeta .usuario-chip__inicial { width: 30px; height: 30px; font-size: 14px; }
.usuario-chip--tarjeta .usuario-chip__inicial { background: linear-gradient(135deg, var(--ejn-azul-acento), var(--ejn-navy)); }
.usuario-chip__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.usuario-chip--tarjeta .usuario-chip__nombre { font-size: 13px; font-weight: var(--fw-semibold); color: var(--ejn-navy); max-width: 190px; }
.usuario-chip__rol { margin: 0; padding: 0; background: none; font-size: 11px; font-weight: var(--fw-medium); color: var(--gray-600); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-chip--tarjeta:hover .usuario-chip__nombre { color: var(--ejn-azul-acento-dark); }
@media (max-width: 860px) {
  .usuario-chip--tarjeta { padding-left: var(--space-2); gap: 8px; }
  .usuario-chip--tarjeta .usuario-chip__nombre { max-width: 84px; font-size: 12.5px; }
  .usuario-chip__rol { display: none; }
}
/* En celulares angostos solo queda el avatar: así la ruta de acceso (pantalla actual) conserva lugar en la barra de 48 px. */
@media (max-width: 480px) { .usuario-chip--tarjeta .usuario-chip__txt { display: none; } }

/* --- Botones: se mantiene el estilo propio (no circulares). .btn-siguiente = acción que lleva a la pantalla o paso siguiente --- */
.contenido a.btn-primary, .contenido a.btn-primary:hover, .contenido a.btn-danger, .contenido a.btn-danger:hover { color: var(--white); }
.contenido a.btn-secondary, .contenido a.btn-secondary:hover { color: var(--gray-700); }
.btn-siguiente, .contenido a.btn-siguiente { background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento-dark); border-color: transparent; }
.btn-siguiente:hover, .contenido a.btn-siguiente:hover { background: var(--ejn-azul-acento); color: var(--white); }
.btn-siguiente:focus-visible { outline: 3px solid var(--ejn-azul-acento-soft); outline-offset: 2px; }

/* --- Cuadros emergentes (<dialog class="dialogo">) en vez de bloques de explicación fijos --- */
dialog.dialogo { border: 0; border-radius: 16px; padding: 0; width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--shadow-lg); color: var(--gray-800); }
dialog.dialogo::backdrop { background: color-mix(in srgb, var(--ejn-navy) 45%, transparent); }
.dialogo__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 16px 20px; border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; background: var(--white); }
.dialogo__cab h2 { margin: 0; font-size: var(--fs-h3); color: var(--ejn-navy); }
.dialogo__cerrar { appearance: none; border: 0; background: var(--gray-100); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--gray-600); }
.dialogo__cerrar:hover { background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento); }
.dialogo__cerrar:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.dialogo__cuerpo { padding: 16px 20px 20px; }
dialog.dialogo--chico { width: min(460px, calc(100% - 32px)); }
dialog.dialogo--ancho { width: min(880px, calc(100% - 32px)); }

/* --- Aviso destacado e indicadores (patrón «panel de atención») --- */
.pa-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); border-radius: var(--radius-md); background: linear-gradient(120deg, var(--ejn-azul-acento-dark), var(--ejn-azul-acento)); color: var(--white); box-shadow: var(--shadow-md); }
.pa-hero__icono { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--white) 16%, transparent); color: var(--white); }
.pa-hero__etq { display: inline-block; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--white) 18%, transparent); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.pa-hero h2 { margin: 6px 0 4px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.25; color: var(--white); }
.pa-hero p { margin: 0; opacity: .92; }
.pa-hero__cta { margin-top: var(--space-3) !important; opacity: 1 !important; }
.contenido a.pa-btn-claro, .contenido a.pa-btn-claro:hover { background: var(--white); color: var(--ejn-azul-acento-dark); border-color: transparent; font-weight: var(--fw-bold); }
.contenido a.pa-btn-claro:hover { background: var(--ejn-azul-acento-soft); }
.pa-hero__num { width: 80px; height: 80px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--white) 14%, transparent); border: 2px solid color-mix(in srgb, var(--white) 45%, transparent); }
.pa-hero__num strong { font-size: 30px; line-height: 1; }
.pa-hero__num span { font-size: var(--fs-small); opacity: .9; }
.pa-hero--calma { background: var(--ejn-azul-acento-soft); color: var(--ejn-navy); box-shadow: var(--shadow-sm); }
.pa-hero--calma h2 { color: var(--ejn-navy); }
.pa-hero--calma .pa-hero__icono { background: var(--white); color: var(--ejn-azul-acento); }
.pa-hero--calma .pa-hero__etq { background: var(--white); color: var(--ejn-azul-acento-dark); }
.pa-hero--calma p { opacity: 1; color: var(--gray-700); }
.pa-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.pa-kpi { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.pa-kpi__ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento); }
.pa-kpi strong { display: block; font-size: 19px; line-height: 1.1; color: var(--ejn-navy); }
.pa-kpi span { font-size: var(--fs-small); color: var(--gray-600); }
.pa-kpi--nuevo { border-color: var(--ejn-azul-acento); box-shadow: 0 0 0 3px var(--ejn-azul-acento-soft); }
.pa-kpi--nuevo .pa-kpi__ico { background: var(--ejn-azul-acento); color: var(--white); }
.pa-kpi--cierra { border-color: var(--ejn-gold); }
.pa-kpi--cierra .pa-kpi__ico { background: var(--ejn-gold-soft); color: var(--ejn-gold-dark); }
.pa-kpi--alerta { border-color: var(--ejn-red); }
.pa-kpi--alerta .pa-kpi__ico { background: var(--ejn-red-soft); color: var(--ejn-red-dark); }
@media (max-width: 860px) { .pa-kpis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .pa-hero { grid-template-columns: minmax(0, 1fr); } .pa-hero__icono { display: none; } }

/* --- Mi cuenta: perfil con avatar, tarjetas en dos columnas, preferencias como opciones y baja en franja roja --- */
.ct-perfil { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-5); }
.ct-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--ejn-navy); color: var(--white); font-size: 18px; font-weight: var(--fw-bold); letter-spacing: .02em; }
.ct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ct-perfil__txt { min-width: 0; }
.ct-perfil__txt h2 { margin: 0; font-size: 18px; color: var(--ejn-navy); overflow-wrap: anywhere; }
.ct-perfil__txt p { margin: 2px 0 0; color: var(--gray-600); }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; margin: 0 0 var(--space-4); }
/* Mi cuenta (21/10/2026, pedido de Daniel): las cuatro tarjetas de arriba forman un 2 x 2 simétrico: las dos de cada fila miden lo mismo de alto (la más alta manda) y las de abajo ocupan el mismo ancho que las de arriba. */
.ct-grid--avisos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-datos .pila { align-items: center; gap: var(--space-3); }
.ct-card { margin: 0; padding: var(--space-4); min-width: 0; }
.ct-card > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--space-2); font-size: 15px; color: var(--ejn-navy); }
.ct-card > h2 .ico { color: var(--ejn-azul-acento); opacity: 1; }
.ct-fila { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--gray-200); }
.ct-fila:first-of-type { border-top: 0; }
.ct-fila__ico { flex: 0 0 auto; display: grid; place-items: center; width: 26px; color: var(--ejn-navy); }
.ct-fila__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ct-fila__tit { font-weight: var(--fw-semibold); color: var(--ejn-navy); }
.ct-fila__val { color: var(--gray-600); font-size: var(--fs-small); overflow-wrap: anywhere; }
.ct-fila > .btn, .ct-fila > .btn-mini { flex: 0 0 auto; }

.pa-prog { display: block; height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.pa-prog__relleno { display: block; height: 100%; border-radius: 999px; background: var(--ejn-green); }
.pa-prog__relleno--amarillo { background: var(--ejn-gold); }
.pa-prog__relleno--rojo { background: var(--ejn-red); }
.pa-prog__relleno--0 { width: 0; } .pa-prog__relleno--10 { width: 10%; } .pa-prog__relleno--20 { width: 20%; } .pa-prog__relleno--30 { width: 30%; } .pa-prog__relleno--40 { width: 40%; } .pa-prog__relleno--50 { width: 50%; }
.pa-prog__relleno--60 { width: 60%; } .pa-prog__relleno--70 { width: 70%; } .pa-prog__relleno--80 { width: 80%; } .pa-prog__relleno--90 { width: 90%; } .pa-prog__relleno--100 { width: 100%; }

@media (max-width: 960px) { .ct-grid, .ct-grid--avisos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {  .ct-avatar { width: 60px; height: 60px; font-size: 22px; } }

/* --- Densidad (estilo LICIPAS): botones de 12,5 px con relleno 7/13 en todo el panel; los campos ya miden 6/9 a 12,5 px (.app .campo). En celular se
   conserva un blanco táctil más grande. --- */
.app .btn { padding: 7px 13px; font-size: 12.5px; }
@media (max-width: 860px) { .app .btn { padding: 9px 14px; } }

/* --- Listas de trabajo como tarjetas (estilo LICIPAS): filtros por categoría como tarjetas, selector de orden y filas con flecha. Se arma con el helper
   filas() (app/Views/componentes/filas.php) y trae también la grilla de siempre detrás de «Vista: Tabla». --- */
.pa-vista__barra { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--gray-600); }
.pa-vista__barra .btn-mini[aria-pressed="true"] { background: var(--ejn-azul-acento-soft); border-color: var(--ejn-azul-acento); color: var(--ejn-azul-acento-dark); }
.pa-principal { min-width: 0; container-type: inline-size; container-name: pa; }
.pa-filtros { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3); margin: 0 0 var(--space-4); }
.pa-circulos { flex: 1 1 360px; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.pa-circulo { position: static; width: auto; min-width: 150px; flex: 1 1 150px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: left; font: inherit; color: var(--gray-700); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.pa-circulo:hover { border-color: var(--ejn-azul-acento); }
.pa-circulo:focus-visible { outline: 3px solid var(--ejn-azul-acento-soft); outline-offset: 2px; }
.pa-circulo__ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento); }
.pa-circulo__ico .ico { opacity: 1; }
.pa-circulo[aria-pressed="true"] { border-color: var(--ejn-azul-acento); background: var(--ejn-azul-acento-mist); box-shadow: 0 0 0 3px var(--ejn-azul-acento-soft); }
.pa-circulo__txt { flex: 1 1 auto; min-width: 0; font-size: var(--fs-small); line-height: 1.2; font-weight: var(--fw-semibold); color: var(--ejn-navy); }
.pa-circulo__n { flex: 0 0 auto; font-size: 14px; font-weight: var(--fw-bold); color: var(--ejn-navy); }
.pa-orden { flex: 0 1 220px; display: grid; align-content: center; gap: 2px; padding: 8px 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-size: 11.5px; color: var(--gray-600); }
.pa-orden select { width: 100%; padding: 0; border: 0; background: transparent; color: var(--ejn-navy); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; }
.pa-orden:focus-within { border-color: var(--ejn-azul-acento); box-shadow: 0 0 0 3px var(--ejn-azul-acento-soft); }
.pa-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pa-fila { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 190px auto; grid-template-areas: "ico cuerpo plazo accion"; align-items: center; gap: 14px; padding: 14px 16px; background: var(--white); border: 1px solid var(--gray-200); border-left: 4px solid var(--gray-300); border-radius: 12px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.pa-fila[hidden] { display: none; }
.pa-fila:hover { box-shadow: var(--shadow-md); border-color: var(--ejn-azul-acento); }
.pa-fila--ok { border-left-color: var(--ejn-green); }
.pa-fila--info { border-left-color: var(--ejn-azul-acento); }
.pa-fila--dang { border-left-color: var(--ejn-red); }
.pa-fila--nuevas { background: linear-gradient(90deg, var(--ejn-azul-acento-soft), var(--white) 38%); }
.pa-fila__enlace { position: absolute; inset: 0; border-radius: 12px; z-index: 1; }
.pa-fila__enlace:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.pa-fila__ico { grid-area: ico; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento); }
.pa-fila__ico .ico { opacity: 1; }
.pa-fila__cuerpo { grid-area: cuerpo; min-width: 0; }
.pa-fila__tit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; font-weight: var(--fw-bold); color: var(--ejn-navy); }
.pa-fila__sub { margin-top: 2px; font-size: 12.5px; color: var(--gray-600); overflow-wrap: anywhere; }
.pa-fila__estado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 8px 0 0; font-size: 13px; color: var(--gray-700); }
.pa-fila__estado strong { color: var(--ejn-navy); }
.pa-fila__punto { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); align-self: center; }
.pa-fila__punto--ok { background: var(--ejn-green); }
.pa-fila__punto--info { background: var(--ejn-azul-acento); }
.pa-fila__punto--dang { background: var(--ejn-red); }
.pa-fila__plazo { grid-area: plazo; min-width: 0; }
.pa-fila__plazo-txt { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: var(--fs-small); color: var(--gray-600); }
.pa-fila__accion { grid-area: accion; position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; }
.pa-fila__accion .btn { white-space: nowrap; }
.pa-fila__flecha { display: grid; place-items: center; color: var(--gray-600); }
.pa-fila:hover .pa-fila__flecha { color: var(--ejn-azul-acento); }
.pa-nuevas, .pa-actualizada { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: var(--fw-bold); line-height: 1.5; white-space: nowrap; }
.pa-nuevas { background: var(--ejn-azul-acento); color: var(--white); }
.pa-actualizada { background: var(--ejn-gold-soft); color: var(--ejn-gold-dark); }
.pa-filas__vacio { padding: var(--space-5); text-align: center; color: var(--gray-600); border: 1px dashed var(--gray-300); border-radius: 12px; }
.pa-filas__vacio[hidden] { display: none; }
@container pa (max-width: 860px) {
  .pa-fila { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "ico cuerpo accion" "ico plazo plazo"; }
}
@container pa (max-width: 560px) {
  .pa-fila { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ico cuerpo" "plazo plazo" "accion accion"; padding: 14px; }
  .pa-fila__ico { width: 44px; height: 44px; }
  .pa-fila__accion .btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .pa-circulo { min-width: 0; flex-basis: calc(50% - var(--space-3)); }
  .pa-orden { flex-basis: 100%; }
  .pa-fila__flecha { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pa-fila, .pa-circulo { transition: none; } }

/* --- Presentación al ingresar (estilo LICIPAS): capa sobre la primera pantalla privada; sale sola por CSS (nunca queda trabada si el JS no carga) --- */
.bienvenida-intro--capa { z-index: 1500; animation: bienvenida-capa-salida .45s ease-in 4.2s forwards; }
.bienvenida-intro--capa.es-salida { animation: bienvenida-capa-salida .4s ease-in forwards; }
.bienvenida-intro--capa .bienvenida-intro__logo { width: min(78vw, 300px); }
button.bienvenida-intro__saltar { background: none; border: 0; cursor: pointer; font: inherit; font-size: .8rem; }
@keyframes bienvenida-capa-salida { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .bienvenida-intro--capa { animation: bienvenida-capa-salida .01s linear 1.2s forwards; }
}
@media print { .bienvenida-intro--capa { display: none; } }

/* --- Barra de navegación inferior en el celular: 4 accesos principales + «Más» (abre el menú); queda debajo del menú desplegable (z-index 38) --- */
.nav-inferior { display: none; }
@media (max-width: 860px) {
  .nav-inferior {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
    background: var(--white); border-top: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-inferior__item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
    font: var(--fw-semibold) 11px/1.2 var(--font-family); color: var(--gray-600);
  }
  .nav-inferior__item:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; border-radius: 8px; }
  .nav-inferior__item .ico { width: 22px; height: 22px; padding: 3px 14px; box-sizing: content-box; border-radius: 999px; opacity: 1; }
  .nav-inferior__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-inferior__item--activo { color: var(--ejn-azul-acento-dark); }
  .nav-inferior__item--activo .ico { background: var(--ejn-azul-acento-soft); }
  .nav-inferior__n {
    position: absolute; top: -2px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--ejn-red); color: var(--white); font-size: 10px; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center;
  }
  .app--nav-inferior .contenido { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .nav-inferior__item { font-size: 10px; }
  .nav-inferior__item .ico { padding: 3px 8px; }
}

/* Menú lateral por niveles (17/10/2026): un nivel a la vez, con encabezado «‹ nivel anterior» y el nombre del nivel actual */
.nav-nivel { display: flex; flex-direction: column; gap: inherit; }
.nav-nivel--oculto { display: none; }
.nav-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 2px 4px 10px; margin-bottom: var(--space-2); border-bottom: 1px solid var(--gray-200); }
.nav-cab__volver { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-left: -4px; padding: 4px 8px 4px 4px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 12px; color: var(--gray-600); cursor: pointer; }
.nav-cab__volver:hover { background: var(--gray-100); color: var(--ejn-navy); }
.nav-cab__volver:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 1px; }
.nav-cab__volver-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-cab__titulo { max-width: 100%; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: var(--fw-bold); color: var(--ejn-navy); }
button.nav-item--ir { width: 100%; background: none; border: 0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
button.nav-item--ir:hover { background: var(--ejn-azul-acento-mist); color: var(--ejn-navy); }
button.nav-item--ir:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: -2px; }
.nav-item--ruta { color: var(--ejn-navy); font-weight: var(--fw-semibold); }
.nav-item__flecha { margin-left: auto; flex: none; font-size: 16px; line-height: 1; color: var(--gray-600); }
.app--plegado .nav-cab, .app--plegado .nav-item__flecha { display: none; }

/* Aviso de privacidad (punto 8 de datos de salud, 17/10/2026): página pública y aceptación al ingresar. Sin estilos en línea (CSP). */
.tarjeta-acceso.tarjeta-acceso--ancha { max-width: 760px; width: 100%; }
.privacidad__texto { max-height: 52vh; overflow: auto; text-align: left; padding: .75rem 1rem; margin: .5rem 0 1rem; border: 1px solid var(--gray-300); border-radius: 8px; background: color-mix(in srgb, var(--white) 60%, transparent); }
.privacidad__texto h2 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.privacidad__texto h2:first-child { margin-top: 0; }
.privacidad__texto p { line-height: 1.55; margin: 0 0 .75rem; }
.privacidad__texto ul { margin: 0 0 .75rem 1.25rem; }
.privacidad__texto li { margin-bottom: .25rem; }
.privacidad__acepto { display: flex; gap: .5rem; align-items: flex-start; text-align: left; margin: 0 0 .9rem; cursor: pointer; }
.privacidad__acepto input { margin-top: .2rem; flex: none; }
.aviso-barra--salud { font-size: .85rem; padding: .45rem .8rem; margin-bottom: .75rem; }

/* ---------- Panel de inicio: tarjetas que cada persona oculta o muestra (19/10/2026) ----------
   Las filas del panel pasan de grilla de columnas fijas a flex con salto de línea: al ocultar una tarjeta las que quedan ocupan su lugar y se estiran para
   llenar la fila, sin huecos. Mismos anchos y puntos de corte que antes; solo dentro de .panel-inicio (los tableros de módulo siguen igual). El JS
   (rixart-panel-tarjetas.js) y el servidor marcan `hidden` en las tarjetas ocultas y en los contenedores que quedan vacíos. */
.panel-inicio .grilla-modulos { display: flex; flex-wrap: wrap; }
.panel-inicio .grilla-modulos > .modulo { flex: 1 1 150px; min-width: 0; }
.panel-inicio .pa-kpis { display: flex; flex-wrap: wrap; }
.panel-inicio .pa-kpis > .pa-kpi { flex: 1 1 200px; min-width: 0; }
.panel-inicio .kpi-fila { display: flex; flex-wrap: wrap; }
.panel-inicio .kpi-fila > .kpi-tarjeta { flex: 1 1 140px; }
.panel-inicio .dash-fila { display: flex; flex-wrap: wrap; }
.panel-inicio .dash-fila--2 > .dash-panel--area { flex: 2 1 0; min-width: 300px; }
.panel-inicio .dash-fila--2 > .dash-panel--donut { flex: 1 1 0; min-width: 180px; }
.panel-inicio .dash-fila--4 > .dash-panel { flex: 1 1 0; min-width: 140px; }
.panel-inicio .dash-fila--4 > .dash-panel--barras { flex-grow: 1.3; }
.panel-inicio .dash-fila--4 > .dash-panel--usuarios { flex-grow: .9; }
@media (max-width: 1280px) { .panel-inicio .grilla-modulos > .modulo { flex-basis: 220px; } }
@media (max-width: 1100px) { .panel-inicio .dash-fila--4 > .dash-panel { flex: 1 1 calc(50% - var(--space-2)); min-width: 0; } }
@media (max-width: 860px) {
  .panel-inicio .pa-kpis > .pa-kpi { flex-basis: 100%; }
  .panel-inicio .dash-fila--2 > .dash-panel { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 720px) {
  .panel-inicio .grilla-modulos > .modulo { flex-basis: calc(50% - var(--space-2)); }
  .panel-inicio .kpi-fila > .kpi-tarjeta { flex-basis: calc(50% - var(--space-2)); }
}
@media (max-width: 560px) { .panel-inicio .dash-fila--4 > .dash-panel { flex-basis: 100%; } }
@media (max-width: 480px) {
  .panel-inicio .grilla-modulos > .modulo { flex-basis: 100%; }
  .panel-inicio .kpi-fila > .kpi-tarjeta { flex-basis: 100%; }
}
/* Columnas laterales del dashboard: si una se queda sin tarjetas, el centro (y la otra columna) ocupan su lugar; si no queda el centro, las columnas
   pasan a filas de tarjetas, como en pantallas angostas. */
@media (min-width: 1101px) {
  .panel-dashboard-grid:has(> .panel-dashboard-lateral--izq[hidden]) { grid-template-columns: minmax(0, 1fr) 240px; }
  .panel-dashboard-grid:has(> .panel-dashboard-lateral--der[hidden]) { grid-template-columns: 240px minmax(0, 1fr); }
  .panel-dashboard-grid:has(> .panel-dashboard-lateral--izq[hidden]):has(> .panel-dashboard-lateral--der[hidden]) { grid-template-columns: minmax(0, 1fr); }
}
.panel-dashboard-grid:not(:has(> .panel-dashboard-centro:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.panel-dashboard-grid:not(:has(> .panel-dashboard-centro:not([hidden]))) > .panel-dashboard-lateral { flex-direction: row; flex-wrap: wrap; }
.panel-dashboard-grid:not(:has(> .panel-dashboard-centro:not([hidden]))) > .panel-dashboard-lateral > .dash-panel { flex: 1 1 260px; }
/* «Personalizar panel»: un grupo de casillas por bloque del panel. */
#panel-dlg-personalizar .opciones { margin: 0 0 var(--space-3); max-height: none; }
#panel-dlg-personalizar legend { padding: 0 6px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ejn-navy); }
#panel-dlg-personalizar .opcion { font-size: var(--fs-body); }
#panel-dlg-personalizar form > .pila { position: sticky; bottom: 0; margin: 0 -20px -20px; padding: var(--space-3) 20px; background: var(--white); border-top: 1px solid var(--gray-200); }
.panel-inicio [data-panel-vacio] p { margin: 0 0 var(--space-2); }
.panel-inicio [data-panel-vacio] p:last-child { margin-bottom: 0; }

/* =====================================================================================================================
   Densidad compacta (19/10/2026, pedido de Daniel): la plataforma ocupaba demasiado espacio gráfico (letras grandes y espaciados amplios) comparada con
   la app de Claude. En escritorio (desde 861 px) baja la escala tipográfica, los espaciados y el alto de filas, barras, botones y campos. En celular se
   conservan los tamaños táctiles de siempre. Solo tokens y medidas: sin colores nuevos.
   ===================================================================================================================== */
@media (min-width: 861px) {
  :root {
    --fs-body: 13px; --fs-small: 11.5px; --fs-caption: 10.5px; --fs-h1: 18px; --fs-h2: 16px; --fs-h3: 13.5px;
    --space-2: 6px; --space-3: 10px; --space-4: 12px; --space-5: 18px; --space-6: 24px; --space-7: 36px;
    --radius-sm: 7px; --radius-md: 10px;
  }
  body.ejn { font-size: var(--fs-body); line-height: 1.4; }

  /* Barra lateral y superior */
  .app:not(.app--plegado) .barra-lateral { width: 206px; padding: var(--space-3) 6px; }
  .app .barra-lateral__marca { padding-bottom: var(--space-3); }
  .app .barra-lateral__nav { padding-top: var(--space-2); gap: 0; }
  .nav-item { gap: 8px; padding: 4px 8px; font-size: 12.5px; border-radius: 8px; }
  .nav-item .ico { width: 16px; height: 16px; }
  .nav-titulo { margin: 8px 0 2px; padding: 0 8px; }
  .nav-cab { padding: 0 2px 6px; margin-bottom: 4px; }
  .nav-cab__titulo { font-size: 13.5px; }
  .nav-cab__volver { padding: 2px 6px 2px 2px; font-size: 11.5px; }
  .version { padding: 4px 8px; margin-bottom: 6px; }
  .barra-superior { height: 40px; padding: 0 var(--space-4); }
  .migas-admin { font-size: 12px; gap: 6px; }
  .usuario-chip--tarjeta .usuario-chip__foto, .usuario-chip--tarjeta .usuario-chip__inicial { width: 26px; height: 26px; font-size: 12px; }
  .app .contenido { padding: var(--space-3) var(--space-4); }

  /* Encabezado, tarjetas e indicadores */
  .app .encabezado { margin-bottom: var(--space-2); gap: var(--space-3); }
  .app .encabezado h1 { font-size: var(--fs-h1); }
  .encabezado__sub { margin-top: 2px; font-size: 11.5px; }
  .tarjeta__cab { padding: 6px 12px; gap: var(--space-2); }
  .tarjeta__cab h2, .tarjeta__cab h3 { font-size: var(--fs-h3); }
  .tarjeta__cuerpo { padding: var(--space-2) var(--space-3); }
  .kpi { padding: 7px 12px; }
  .kpi__valor { font-size: 18px; }
  .kpi__rotulo { margin-top: 2px; font-size: 10px; letter-spacing: .4px; }
  .kpi__nota { margin-top: 2px; font-size: 10px; }
  .pa-kpi { gap: 8px; padding: 6px 10px; }
  .pa-kpi strong { font-size: 16px; }
  .pa-kpi__ico { width: 28px; height: 28px; }
  .pa-hero { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
  .pa-hero__icono { width: 40px; height: 40px; }

  /* Pestañas, botones, campos y distintivos */
  .pestana { padding: 5px 11px; font-size: 12px; }
  .app .btn { padding: 4px 10px; font-size: 12px; }
  .btn-mini { padding: 3px 7px; font-size: 11px; }
  .app .campo { gap: 2px; }
  .app .campo label { font-size: 11px; }
  .app .campo input, .app .campo select, .app .campo textarea { padding: 4px 8px; font-size: 12px; }
  /* El select deja lugar a la flecha desplegable (el padding de arriba le pisaba el margen derecho y el texto se montaba sobre el ícono). */
  .app .campo select { padding-right: 26px; background-position: right 8px center; }

  /* Tablas y grillas */
  .tabla-simple { font-size: 12px; }
  .tabla-simple thead th { padding: 4px 8px; font-size: 10.5px; }
  .tabla-simple tbody td { padding: 3px 8px; font-size: 12px; }
  .grilla__barra { padding: 5px 8px; gap: 5px; }
  .grilla__tabla { font-size: 12px; }
  .grilla__tabla thead th { padding: 5px 8px; }
  .grilla__tabla tbody td { padding: 3px 8px; }

  /* Panel de inicio: módulos y widgets */
  .modulo { padding: var(--space-3); }
  .modulo__nombre { margin: 4px 0 2px; font-size: 13px; letter-spacing: .8px; }
  .modulo__desc { margin: 0 0 var(--space-2); font-size: 11.5px; line-height: 1.35; }
  .modulo__resumen { margin-top: 4px; gap: 3px; }
  .kpi-tarjeta { padding: var(--space-2) var(--space-3); }
  .kpi-tarjeta__anillo { width: 44px; height: 44px; }
  .kpi-tarjeta__valor { font-size: 17px; }
  .dash-panel { padding: var(--space-3); gap: var(--space-2); }
  .dash-donut { width: 130px; height: 130px; }
  .dash-barras { height: 100px; }
  .dash-lista__avatar { width: 28px; height: 28px; }
  .dash-usuarios__numero { font-size: 22px; }

  /* Listas de trabajo en tarjetas (filas con flecha y filtros-tarjeta) */
  .pa-filtros { gap: var(--space-2); margin: 0 0 var(--space-3); }
  .pa-circulo { gap: 8px; padding: 5px 10px; min-width: 130px; }
  .pa-circulo__ico { width: 26px; height: 26px; border-radius: 8px; }
  .pa-orden { padding: 4px 10px; }
  .pa-filas { gap: var(--space-2); }
  .pa-fila { grid-template-columns: 34px minmax(0, 1fr) 170px auto; gap: 10px; padding: 8px 12px; }
  .pa-fila__ico { width: 34px; height: 34px; border-radius: 9px; }
  .pa-fila__tit { font-size: 13px; gap: 4px 6px; }
  .pa-fila__sub { margin-top: 1px; font-size: 11.5px; }
  .pa-fila__estado { margin: 3px 0 0; font-size: 12px; }
  .pa-fila__plazo-txt { margin-bottom: 3px; }
  .pa-nuevas, .pa-actualizada { padding: 1px 8px; font-size: 10.5px; }
}

/* =====================================================================================================================
   Franja superior azul y sub-barra (19/10/2026, pedido de Daniel, referencia de la pantalla de SCI)
   La banda del logo (arriba de la barra lateral) y la barra superior forman una sola franja azul; el módulo se nombra al lado del logo, los avisos y el
   usuario van en blanco, y la ruta de acceso pasa a una sub-barra con la hora y los accesos rápidos (consulta, ayuda, bloqueo). Solo tokens.
   ===================================================================================================================== */
.barra-superior { background: var(--franja-bg); border-bottom: 0; color: var(--franja-texto); }
.barra-superior .btn-icono { background: transparent; border-color: transparent; color: var(--franja-texto); }
.barra-superior .btn-icono:hover, .barra-superior .btn-icono[aria-expanded="true"] { background: var(--franja-vidrio); border-color: transparent; color: var(--franja-texto); }
.barra-superior .btn-icono:focus-visible { outline: 2px solid var(--franja-texto); outline-offset: 1px; }
.barra-superior .btn-icono__contador { top: -3px; right: -3px; background: var(--aviso-punto); box-shadow: 0 0 0 2px var(--franja-medio); }

.franja-contexto { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--franja-texto); white-space: nowrap; }
.franja-contexto__nombre { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: .2px; }
.franja-contexto__sep { width: 1px; height: 18px; background: var(--franja-vidrio-fuerte); flex-shrink: 0; }
.franja-contexto__desc { font-size: var(--fs-body); color: var(--franja-texto-suave); overflow: hidden; text-overflow: ellipsis; }

.barra-superior .usuario-chip--tarjeta, .barra-superior .usuario-chip--tarjeta:hover { border-left-color: var(--franja-vidrio-fuerte); }
.barra-superior .usuario-chip--clicable:hover, .barra-superior .usuario-chip--clicable:focus-visible { background-color: transparent; }
.barra-superior .usuario-chip__nombre { color: var(--franja-texto); text-transform: uppercase; letter-spacing: .3px; }
.barra-superior .usuario-chip__rol { color: var(--franja-texto-suave); }
.barra-superior .usuario-chip--tarjeta .usuario-chip__inicial { background: var(--franja-texto); color: var(--franja-inicio); }
.barra-superior .usuario-chip--tarjeta:focus-visible { outline: 2px solid var(--franja-texto); }

.subbarra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 42px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.subbarra .migas { flex: 1; min-width: 0; }
.subbarra__der { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.subbarra__reloj { padding-right: var(--space-3); margin-right: var(--space-1); border-right: 1px solid var(--gray-200); font-size: var(--fs-small); color: var(--gray-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
.subbarra .btn-icono { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }

@media (min-width: 861px) {
  .barra-superior { height: var(--franja-alto); }
  .app:not(.app--plegado) .barra-lateral, .app.app--plegado .barra-lateral { padding-top: 0; }
  .app .barra-lateral__marca { box-sizing: border-box; height: var(--franja-alto); background: transparent; color: var(--ejn-navy); border-bottom: 0; padding-bottom: 0; }  /* 20/10/2026, pedido de Daniel: el logo ya no lleva fondo azul, queda sobre el color del menú (con el wordmark navy y el degradé original de la A) */
  .app:not(.app--plegado) .barra-lateral__marca { margin: 0 -6px var(--space-3); padding: 0 var(--space-4); }
  .app.app--plegado .barra-lateral__marca { margin: 0 -7px var(--space-3); padding: 0; }
  .app .barra-lateral__wordmark { color: inherit; }
  .app .barra-lateral__wordmark .wordmark-rixart { height: 18px; }
}
@media (max-width: 860px) {
  .franja-contexto__desc, .franja-contexto__sep, .subbarra__reloj { display: none; }
  .subbarra { padding: var(--space-2) var(--space-4); }
}
body.imprimiendo .subbarra { display: none !important; }

/* =====================================================================================================================
   Tablero y estados vacíos (19/10/2026, pedido de Daniel, referencia de SCI y de Biblioteca técnica). Solo tokens.
   - .seccion con .seccion__icono: tarjeta de acceso (ícono tintado, título, descripción y «Ver … →»); sin ícono conserva el borde de acento.
   - .kpi con .kpi__icono: indicador con círculo tintado; dentro de .resumen («Resumen general») va sobre fondo suave.
   - .vacio: estado vacío (ilustración, título, texto y acción); .vacio--compacto para paneles chicos. .nota-info: aviso de apoyo con (i).
   ===================================================================================================================== */
.tinte-azul     { --tinte-fondo: var(--tinte-azul-fondo);     --tinte-icono: var(--tinte-azul-icono); }
.tinte-verde    { --tinte-fondo: var(--tinte-verde-fondo);    --tinte-icono: var(--tinte-verde-icono); }
.tinte-violeta  { --tinte-fondo: var(--tinte-violeta-fondo);  --tinte-icono: var(--tinte-violeta-icono); }
.tinte-turquesa { --tinte-fondo: var(--tinte-turquesa-fondo); --tinte-icono: var(--tinte-turquesa-icono); }
.tinte-naranja  { --tinte-fondo: var(--tinte-naranja-fondo);  --tinte-icono: var(--tinte-naranja-icono); }
.tinte-rojo     { --tinte-fondo: var(--tinte-rojo-fondo);     --tinte-icono: var(--tinte-rojo-icono); }
.tinte-gris     { --tinte-fondo: var(--tinte-gris-fondo);     --tinte-icono: var(--tinte-gris-icono); }

/* Accesos */
.grilla-secciones { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.seccion { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
a.seccion:hover { box-shadow: var(--shadow-md); }
.seccion:has(> .seccion__icono) { border-left-width: 1px; padding: var(--space-4); }
.seccion__icono { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tinte-fondo, var(--tinte-azul-fondo)); color: var(--tinte-icono, var(--tinte-azul-icono)); }
.seccion__icono .ico { opacity: 1; }
.seccion:has(> .seccion__icono) .seccion__nombre { margin: var(--space-1) 0 0; }
.seccion:has(> .seccion__icono) .seccion__desc { flex: 1; margin: 0; }
.seccion__ir { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ejn-azul-acento); }

/* Indicadores con ícono y panel «Resumen general» */
.kpi:has(> .kpi__icono) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: center; }
.kpi__icono { grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--tinte-fondo, var(--tinte-azul-fondo)); color: var(--tinte-icono, var(--tinte-azul-icono)); }
.kpi__icono .ico { opacity: 1; }
.kpi:has(> .kpi__icono) .kpi__valor { font-size: 22px; }
.kpi:has(> .kpi__icono) .kpi__rotulo { margin-top: 1px; font-size: var(--fs-body); font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; color: var(--gray-800); }
.resumen { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4) var(--space-4); }

.resumen .rejilla + .rejilla { margin-top: var(--space-3); }
.resumen .kpi { background: var(--gray-50); border-color: var(--gray-100); border-left-width: 1px; }

/* Paneles del dashboard */
.dash-panel { background: var(--white); }

/* Estados vacíos */
.vacio { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; color: var(--gray-600); }
.vacio__ilustracion { width: 120px; height: 100px; margin-bottom: var(--space-1); }
.vacio__sombra { fill: var(--gray-100); }
.vacio__hoja-atras { fill: var(--ejn-azul-acento-soft); }
.vacio__hoja { fill: var(--white); stroke: var(--ejn-azul-acento); stroke-width: 1.6; }
.vacio__linea { fill: none; stroke: var(--ejn-azul-acento-soft); stroke-width: 3; stroke-linecap: round; }
.vacio__chapa { fill: var(--ejn-azul-acento); }
.vacio__mas { fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; }
.vacio__chispa { fill: none; stroke: var(--ejn-azul-acento); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.vacio__titulo { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--ejn-navy); }
.vacio__texto { margin: 0; max-width: 440px; font-size: var(--fs-small); }
.vacio__accion { margin-top: var(--space-2); }
.vacio--compacto { padding: var(--space-3); gap: var(--space-1); }
.vacio__icono { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinte-gris-fondo); color: var(--tinte-gris-icono); }
.vacio--compacto .vacio__texto { font-size: var(--fs-small); color: var(--gray-600); }

.nota-info .ico { flex-shrink: 0; margin-top: 1px; color: var(--ejn-azul-acento); opacity: 1; }

/* Indicadores con ícono: el tinte sigue el estado del indicador (alerta = rojo, aviso = ámbar, ok = verde); sin estado, azul. */
.kpi--alerta > .kpi__icono { --tinte-fondo: var(--tinte-rojo-fondo);    --tinte-icono: var(--tinte-rojo-icono); }
.kpi--aviso  > .kpi__icono { --tinte-fondo: var(--tinte-naranja-fondo); --tinte-icono: var(--tinte-naranja-icono); }
.kpi--ok     > .kpi__icono { --tinte-fondo: var(--tinte-verde-fondo);   --tinte-icono: var(--tinte-verde-icono); }
.kpi:has(> .kpi__icono) { position: relative; }
a.kpi:has(> .kpi__icono)::after { position: absolute; float: none; margin: 0; right: var(--space-3); top: 50%; transform: translateY(-50%); }
.grilla__vacio { padding: 0; }

.estado-dato .ico { flex-shrink: 0; opacity: 1; color: var(--gray-600); }
.estado-dato b { display: block; font-size: 20px; font-weight: var(--fw-bold); line-height: 1.1; color: var(--ejn-navy); }
.estado-dato span { display: block; font-size: var(--fs-small); }

.hse-nav__item .ico { opacity: .8; }
.hse-nav__item--activo .ico { opacity: 1; }

.hse-sec .hse-filtros .btn { display: inline-flex; align-items: center; gap: 6px; }
.vacio--compacto .vacio__titulo { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.vacio__accion, .vacio__accion:hover { text-decoration: none; }

/* =====================================================================================================================
   Cabeceras de tarjeta tintadas (20/10/2026, pedido de Daniel): la cabecera de cada .tarjeta (ej. «Contrato») lleva un fondo un poco más oscuro que el
   cuerpo, dentro de la gama del tema elegido (--ejn-azul-acento-soft cambia con el tema y con el color personalizado). Solo tokens.
   ===================================================================================================================== */
.tarjeta__cab { background: var(--ejn-azul-acento-soft); border-bottom-color: var(--gray-200); }
.tarjeta__cab { border-bottom-color: color-mix(in srgb, var(--ejn-azul-acento) 16%, var(--white)); }
.tarjeta > .tarjeta__cab:first-child { border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
.tarjeta > .tarjeta__cab:only-child, .tarjeta[data-plegable]:not(.tarjeta--abierta) > .tarjeta__cab { border-radius: calc(var(--radius-md) - 1px); border-bottom-color: transparent; }

/* Botones de filtro con ícono (20/10/2026): «Filtrar» y «Buscar» alinean ícono y texto. */
.btn:not(.btn--bloque):has(> .ico) { display: inline-flex; align-items: center; gap: 6px; }

/* Filtros en una sola fila (20/10/2026): el formulario GET con una fila de campos y, abajo, sus botones (Buscar/Filtrar/Limpiar) pone los botones a la derecha
   de los campos; en pantallas angostas los botones pasan abajo. Los formularios con más de una fila de campos no se tocan. */
form[method="get"]:has(> .fila:first-child):has(> .pila:last-child):not(:has(> .fila ~ .fila)) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
form[method="get"]:has(> .fila:first-child):has(> .pila:last-child):not(:has(> .fila ~ .fila)) > .fila { flex: 1 1 420px; min-width: 0; margin-bottom: 0; }
form[method="get"]:has(> .fila:first-child):has(> .pila:last-child):not(:has(> .fila ~ .fila)) > .pila { flex: 0 0 auto; }

/* =====================================================================================================================
   Paneles laterales (avisos, ayuda, consulta) con cabecera azul y avisos con ícono (20/10/2026, pedido de Daniel, referencia de SCI). Solo tokens.
   ===================================================================================================================== */
.avisos__cabecera { background: var(--franja-bg); border-bottom: 0; color: var(--franja-texto); }
.avisos__cabecera .avisos__titulo { color: var(--franja-texto); }
.avisos__cabecera .btn-icono { color: var(--franja-texto); border-color: transparent; background: transparent; }
.avisos__cabecera .btn-icono:hover { background: var(--franja-vidrio); border-color: transparent; color: var(--franja-texto); }
.avisos__cabecera .btn-icono:focus-visible { outline: 2px solid var(--franja-texto); }
.aviso-grupo__titulo { gap: var(--space-2); text-transform: none; letter-spacing: 0; font-size: var(--fs-body); color: var(--gray-800); }
.aviso-grupo__nombre { flex: 1; font-weight: var(--fw-semibold); }
.aviso-grupo__icono { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tinte-fondo, var(--tinte-gris-fondo)); color: var(--tinte-icono, var(--tinte-gris-icono)); flex-shrink: 0; }
.aviso-grupo__icono .ico { opacity: 1; }
.aviso-grupo__vacio .vacio { padding: var(--space-2) var(--space-3); border: 1px dashed var(--gray-200); border-radius: var(--radius-md); }
.aviso-grupo__vacio .vacio__icono { display: none; }
.aviso-grupo__vacio .vacio__titulo { font-size: var(--fs-small); color: var(--gray-700); }
.aviso-grupo__vacio .vacio__texto { font-size: var(--fs-caption); color: var(--gray-600); }
.aviso-item { display: flex; align-items: flex-start; gap: var(--space-3); border-left-width: 1px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.aviso-item:hover { box-shadow: var(--shadow-md); }
.aviso-item__icono { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tinte-fondo, var(--tinte-gris-fondo)); color: var(--tinte-icono, var(--tinte-gris-icono)); flex-shrink: 0; }
.aviso-item__icono .ico { opacity: 1; }
.aviso-item__cuerpo { flex: 1; min-width: 0; }
.aviso-item__accion { color: var(--ejn-azul-acento); }

/* Paneles del dashboard con ícono tintado delante del título (20/10/2026). */
.dash-panel__cab h3 { display: inline-flex; align-items: center; gap: var(--space-2); }
.dash-panel__icono { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--tinte-fondo, var(--tinte-azul-fondo)); color: var(--tinte-icono, var(--tinte-azul-icono)); flex-shrink: 0; }
.dash-panel__icono .ico { opacity: 1; }

/* =====================================================================================================================
   Botones nunca pegados a un campo (19/10/2026, pedido de Daniel, captura de «Datos de mi empresa»: el Guardar quedaba a 1 px del correo).
   Regla general para toda la plataforma, sin tocar vista por vista; solo tokens.
   - Vertical: un botón (o su fila .pila) que sigue directamente a un campo, fila de campos, ayuda o párrafo dentro de un cuerpo de tarjeta o de un
     formulario de bloque se separa con --space-4 (12 px en escritorio). Los formularios en línea (flex/grid con gap) ya traen su propia separación
     (en rixart-prv.css: .prv-inline, .es-alta, .es-resp__form, .mc-filtros__acc).
   - Lateral: los botones al costado de un campo (filas de filtros, .pila, barras de grilla) quedan a 8 px como mínimo (antes 4-6 px).
   ===================================================================================================================== */
:is(.tarjeta__cuerpo, form:not(.prv-inline, .es-alta, .es-resp__form, .form-linea, .fila, .pila, .formulario)) > :is(.campo, .fila, .campo__ayuda, .combo, .ficha, p, label, input, select, textarea) + :is(.btn, .btn-mini, button:not(.acc, .btn-icono), .pila) { margin-top: var(--space-4); }
/* Botón que cae en una fila de la grilla de campos (el hueco entre filas de campos es más chico, --space-2): se completa hasta --space-4. */
:is(.tarjeta__cuerpo .fila, form.fila) > :is(.btn, .btn-mini, button:not(.acc, .btn-icono), .pila, .campo--accion, .fila-fin, .campo:has(> :is(.btn, .btn-mini, button:not(.acc, .btn-icono)):first-child)) { margin-top: calc(var(--space-4) - var(--space-2)); }
/* Un form-linea con campos es una fila (campo + botón alineados abajo); el .form-linea de una celda de acciones sigue en línea. */
.form-linea:has(> :is(.campo, .combo, label > :is(input, select))) { display: flex; margin-top: var(--space-4); row-gap: var(--space-4); }
.pila { column-gap: calc(var(--space-2) + 2px); }
.form-linea:has(> :is(.campo, .combo, label > :is(input, select))), .grilla__barra, .menu--filtro .menu__pie { column-gap: calc(var(--space-2) + 2px); }
/* Barra de la grilla: cuando los controles saltan de renglón (celular), el renglón de abajo no queda pegado al de arriba. */
.grilla__barra { row-gap: var(--space-3); }

/* =====================================================================================================================
   RGRL (19/10/2026, pedido de Daniel): «Importar desde Excel» deja de ser un fieldset gris con contorno oscuro. Es una tarjeta con el fondo suave del tema,
   dos pasos numerados y una zona de archivo (clic o arrastre; rixart-rgrl-checklist.js muestra el nombre elegido). Solo tokens.
   Combos buscables con opciones largas (gremios del catálogo MTEySS): `data-combo-ancha` en el select → la lista es más ancha que el campo y la opción
   hace salto de línea en vez de cortarse con «…» (posicionar() de rixart-app.js).
   ===================================================================================================================== */
.importar-excel { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); background: var(--module-accent-soft, var(--ejn-blue-soft)); border: 1px solid var(--gray-200); border-radius: var(--radius-md); }
.importar-excel__cab { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.importar-excel__ico { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--white); color: var(--module-accent, var(--ejn-blue)); box-shadow: var(--shadow-sm); }
.importar-excel__titulo { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--gray-700); }
.importar-excel__sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--gray-600); }
.importar-excel__pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.importar-excel__paso { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-3); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.importar-excel__num { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--module-accent, var(--ejn-blue)); color: var(--white); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.importar-excel__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); flex: 1; min-width: 0; }
.importar-excel__cuerpo > .btn { margin-top: var(--space-1); }
.importar-excel__cuerpo > p { margin: 0; }
.importar-excel__paso-titulo { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--gray-700); }
.importar-excel__form { align-self: stretch; display: block; }
.importar-excel__zona { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); text-align: center; cursor: pointer; background: var(--gray-50, var(--white)); border: 2px dashed var(--gray-300); border-radius: var(--radius-md); transition: border-color .15s ease, background .15s ease; }
.importar-excel__zona:hover, .importar-excel__zona--sobre { border-color: var(--module-accent, var(--ejn-blue)); background: var(--module-accent-soft, var(--ejn-blue-soft)); }
.importar-excel__zona:focus-within { outline: 2px solid var(--module-accent, var(--ejn-blue)); outline-offset: 2px; }
.importar-excel__zona-ico { color: var(--module-accent, var(--ejn-blue)); }
.importar-excel__zona-texto { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--gray-700); }
.importar-excel__zona-ayuda { font-size: var(--fs-small); color: var(--gray-600); }
.importar-excel__zona-archivo { max-width: 100%; margin-top: var(--space-1); font-size: var(--fs-small); color: var(--gray-600); overflow-wrap: anywhere; }
.importar-excel__zona--lleno { border-style: solid; border-color: var(--ejn-green); background: var(--ejn-green-soft); }
.importar-excel__zona--lleno .importar-excel__zona-archivo { color: var(--ejn-green-dark); font-weight: var(--fw-semibold); }
@media (max-width: 900px) { .importar-excel__pasos { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .importar-excel { padding: var(--space-3); } .importar-excel__paso { padding: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { .importar-excel__zona { transition: none; } }

.combo__lista--ancha .combo__opcion { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }

/* Marca de la empresa o del servicio de H&S en lo que sale del sistema (migración 312, 20/10/2026): logo, nombre y membrete; en pantalla solo la vista previa de
   Administración, en el resto de las pantallas aparece únicamente al imprimir. */
.marca-cliente { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--gray-200); }
.marca-cliente__logo { display: block; width: auto; height: auto; max-width: 220px; max-height: 64px; object-fit: contain; }
.marca-cliente__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-small); color: var(--gray-600); }
.marca-cliente__texto strong { font-size: var(--fs-body); color: var(--ejn-navy); }
.marca-cliente--solo-impresion, .marca-pie--solo-impresion { display: none; }
.marca-pie--solo-impresion { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--gray-200); font-size: var(--fs-small); color: var(--gray-600); }
@media print { .marca-cliente--solo-impresion { display: flex; } .marca-pie--solo-impresion { display: block; } }

/* =====================================================================================================================
   Íconos en buscadores, filtros, orden de columnas y ruta de acceso (21/10/2026, pedido de Daniel). La CSP permite img-src data:, así que los íconos de
   fondo van como SVG en línea (sin colores hexadecimales: lupa en «slategray»; la flecha de orden es una máscara y toma el color del texto).
   ===================================================================================================================== */
/* Lupa en los campos de búsqueda (los que ya traen la suya, .grilla__buscar y .pl-buscar, quedan como estaban). */
input[type="search"]:not(.grilla__buscar input):not(.pl-buscar input),
input[type="text"][name="q"],
input.combo__entrada.combo__entrada,
input.consulta__entrada.consulta__entrada {
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='slategray' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px 15px;
}
.rorg-buscar { background-position: 10px center; }

/* Embudo en los filtros de columna de las grillas. */
.menu--filtro > summary .ico { flex-shrink: 0; opacity: .8; }

/* Flecha de orden en las columnas ordenables: ⇅ sin ordenar, ↑ ascendente, ↓ descendente. */
.grilla__tabla th .flecha,
.grilla__tabla th.asc .flecha,
.grilla__tabla th.desc .flecha {
  display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -2px; background: currentColor; opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20V5M4 9l4-4 4 4M16 4v15M12 15l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20V5M4 9l4-4 4 4M16 4v15M12 15l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.grilla__tabla th .flecha::after, .grilla__tabla th.asc .flecha::after, .grilla__tabla th.desc .flecha::after { content: none; }
.grilla__tabla th.ordenable:hover .flecha { opacity: .85; }
.grilla__tabla th.asc .flecha, .grilla__tabla th.desc .flecha { opacity: 1; }
.grilla__tabla th.asc .flecha {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
}
.grilla__tabla th.desc .flecha {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");
}

/* Ruta de acceso: separador «>» (ícono de flecha de ruta) en lugar de «/». */
.migas-admin__sep { display: inline-flex; align-items: center; color: var(--gray-600); }
.migas-admin__sep .ico { opacity: 1; }

/* =====================================================================================================================
   Pestañas de toda la plataforma con el diseño de las de Estructura (21/10/2026, pedido de Daniel): tarjeta blanca con borde y sombra suave,
   la activa rellena con el color de acento del módulo. Más bajas que las de Estructura (una línea, ~32 px); las de Estructura (.es-tab) se
   achican a ~46 px. Aplica a .pestana / .pestanias (.pestania, .es-activa); la tipografía, el icono y los tonos (alerta/ok/info/warn/dang) se conservan.
   Solo tokens.
   ===================================================================================================================== */
.pestanas, .pestanias { display: flex; flex-wrap: nowrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 2px 2px var(--space-2); border-bottom: 0; overflow-x: auto; }
.pestanas, .pestanias { scrollbar-width: none; }
.pestanas::-webkit-scrollbar, .pestanias::-webkit-scrollbar { display: none; }
/* Las pestañas ocultas (login: el tipo de acceso va en el desplegable) tienen que seguir ocultas: la regla de arriba, que va después de .pestanas--oculto, las volvía a mostrar. */
.pestanas.pestanas--oculto { display: none; }
.pestana, .pestania {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 14px; font-size: 12.5px; font-weight: var(--fw-semibold); line-height: 1.3; white-space: nowrap; text-decoration: none;
  color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.pestana .ico { margin-right: 0; vertical-align: baseline; flex: none; }
.pestana:hover, .pestania:hover { color: var(--ejn-navy); border-color: var(--gray-400); }
.pestana:focus-visible, .pestania:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.pestana--activa, .pestana--activa:hover, .pestania.es-activa, .pestania.es-activa:hover { color: var(--white); background: var(--module-accent, var(--ejn-azul-acento)); border-color: transparent; }
.pestana--ok { color: var(--ejn-green-dark); border-color: var(--ejn-green); }

.pestana--alerta, .pestana--dang { color: var(--ejn-red-dark); border-color: var(--ejn-red); }
.pestana--ok:hover { color: var(--ejn-green-dark); }
.pestana--info:hover { color: var(--ejn-blue-dark); }
.pestana--warn:hover { color: var(--ejn-gold-dark); }
.pestana--alerta:hover, .pestana--dang:hover { color: var(--ejn-red-dark); }
.pestana--ok.pestana--activa { color: var(--white); background: var(--ejn-green-dark); border-color: transparent; }
.pestana--info.pestana--activa { color: var(--white); background: var(--ejn-azul-acento); border-color: transparent; }
.pestana--warn.pestana--activa { color: var(--white); background: var(--ejn-gold-dark); border-color: transparent; }
.pestana--alerta.pestana--activa, .pestana--dang.pestana--activa { color: var(--white); background: var(--ejn-red-dark); border-color: transparent; }
@media (max-width: 860px) {
  .pestana, .pestania { padding: 6px 12px; }
}

/* =====================================================================================================================
   Panel lateral, buscadores sueltos y lista de los desplegables (21/10/2026, pedido de Daniel).
   ===================================================================================================================== */
/* Densidad del ERP para los campos de búsqueda sueltos (la base está en rixart-app.css, con especificidad cero). */
:where(.app input[type="search"]) { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }

/* Panel lateral (<dialog class="dialogo dialogo--lateral">): el mismo cuadro emergente de siempre (data-abrir-dialogo / data-cerrar-dialogo), pero pegado al borde
   derecho y a toda la altura, para editar un registro sin perder de vista la lista. Cierra con la cruz, «Cancelar», un clic en el fondo o Escape. */
dialog.dialogo--lateral { margin: 0 0 0 auto; inset: 0 0 0 auto; width: min(560px, 100%); max-width: 100%; height: 100%; max-height: 100%; border-radius: 16px 0 0 16px; }
dialog.dialogo--lateral[open] { display: flex; flex-direction: column; animation: panel-lateral-entra .2s ease-out; }
dialog.dialogo--lateral .dialogo__cuerpo { flex: 1 1 auto; overflow-y: auto; }
dialog.dialogo--lateral .es-alcance { grid-template-columns: 1fr; }
dialog.dialogo--lateral .es-alcance__grupo { max-height: 180px; }
@keyframes panel-lateral-entra { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.dialogo--lateral[open] { animation: none; } }

/* Lista de un desplegable (<select>) con el estilo de la plataforma: la arma rixart-selectores.js en lugar de la del sistema operativo. Cuelga del <body> (o del
   cuadro emergente que contiene al campo) con posición fija, igual que la lista de los buscables (.combo__lista), así ningún contenedor con overflow la recorta. */
.selector__lista {
  position: fixed; z-index: 1000; box-sizing: border-box;
  max-height: 320px; overflow-y: auto;
  list-style: none; margin: 2px 0 0; padding: 4px;
  background: var(--white); border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  font-family: var(--font-family); color: var(--gray-900);
}
.selector__lista[hidden] { display: none; }
.selector__opcion { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; font-size: 12.5px; line-height: 1.35; cursor: pointer; border-radius: 4px; }
.selector__opcion:hover, .selector__opcion--marcada { background: var(--module-accent-soft, var(--gray-100)); }
.selector__opcion--actual { font-weight: var(--fw-semibold); color: var(--module-accent, var(--ejn-blue)); }
.selector__opcion--actual::after { content: '✓'; flex: none; font-weight: var(--fw-semibold); }
.selector__opcion--deshabilitada { color: var(--gray-400); cursor: not-allowed; }
.selector__opcion--deshabilitada:hover { background: transparent; }
.selector__grupo { padding: 8px 9px 4px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: uppercase; color: var(--gray-600); cursor: default; }
select.selector--abierto { border-color: var(--module-accent, var(--ejn-blue)); box-shadow: 0 0 0 3px var(--module-accent-soft, var(--ejn-blue-soft)); }

/* Buscador de opciones de la barra superior (22/10/2026): sobre la franja de color, con el menú de resultados en una tarjeta blanca (patrón del buscador de QINSURE). */
.buscador-global { position: relative; display: flex; align-items: center; flex: 0 1 400px; min-width: 160px; margin: 0 var(--space-4); color: var(--franja-texto); }
.buscador-global > svg { position: absolute; left: 11px; pointer-events: none; opacity: .85; }
input.buscador-global__campo.buscador-global__campo { width: 100%; height: 34px; padding: 0 34px 0 34px; border: 1px solid var(--franja-vidrio-fuerte); border-radius: var(--radius-md); background: var(--franja-vidrio); color: var(--franja-texto); font-size: var(--fs-body); box-shadow: none; }
input.buscador-global__campo.buscador-global__campo::placeholder { color: var(--franja-texto-suave); opacity: 1; }
input.buscador-global__campo.buscador-global__campo:focus { outline: none; background: var(--white); color: var(--gray-900); border-color: var(--white); box-shadow: 0 0 0 3px var(--franja-vidrio-fuerte); }
.buscador-global:focus-within > svg { color: var(--gray-600); opacity: 1; }
.buscador-global__atajo { position: absolute; right: 9px; padding: 0 6px; border: 1px solid var(--franja-vidrio-fuerte); border-radius: 5px; font: inherit; font-size: 11px; line-height: 18px; color: var(--franja-texto-suave); pointer-events: none; }
.buscador-global:focus-within .buscador-global__atajo { display: none; }
.buscador-global__lista { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; margin: 0; padding: var(--space-1); list-style: none; max-height: 360px; overflow-y: auto; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); color: var(--gray-900); }
.buscador-global__lista[hidden] { display: none; }
.buscador-global__item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.buscador-global__item--activo, .buscador-global__item:hover { background: var(--gray-100); }
.buscador-global__titulo { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--gray-900); }
.buscador-global__titulo mark { background: transparent; color: var(--module-accent, var(--ejn-blue-dark)); font-weight: var(--fw-bold); }
.buscador-global__ruta { font-size: var(--fs-small); color: var(--gray-600); }
.buscador-global__vacio { padding: 10px; font-size: var(--fs-small); color: var(--gray-600); }
@media (max-width: 1100px) { .buscador-global { flex-basis: 260px; margin: 0 var(--space-3); } }
@media (max-width: 860px) { .buscador-global { display: none; } }

/* ============================================================================================================================================================
   Chat por registro (22/10/2026, v0.65.627; estilo v2 según el brief de Daniel). Bloque final de rixart-erp.css; el mockup está en docs/prototipos/chat_por_registro.
   Reglas de este bloque:
     · SOLO variables de rixart-tokens.css. Ningún hex ni rgba: los tonos de cada persona salen de mezclar tokens con color-mix (como ya hace el fondo de los diálogos).
     · Panel limpio sobre blanco puro (patrón de la Consulta rápida: <aside class="avisos">, clase esta-abierto, .avisos-fondo) con cabecera blanca en lugar de la franja.
     · Reusa .btn-icono, .badge (StatusBadge), .tinte-*, .aviso-item y .dialogo; el avatar repite el de la barra superior (foto o inicial en círculo).
     · Clases nuevas con prefijo chat- (un componente nuevo, no una variante de otro). Sin style= ni JS en línea.
   Paleta: la gama de azules del sitio. Cada persona tiene su tono (id % 5): azul, celeste, violeta-azulado, azul profundo y pizarra.
   ============================================================================================================================================================ */

/* ---------- Tono de cada persona (avatar y burbuja): --chat-c es el color pleno, --chat-tinta el texto sobre él ---------- */
.chat-av--c0, .chat-msg--c0 { --chat-c: var(--ejn-azul-acento); --chat-tinta: var(--white); --chat-mezcla: 24%; }
.chat-av--c1, .chat-msg--c1 { --chat-c: var(--cristal-blue-light); --chat-tinta: var(--franja-inicio); --chat-mezcla: 48%; }
.chat-av--c2, .chat-msg--c2 { --chat-c: color-mix(in srgb, var(--ejn-azul-acento) 80%, var(--ejn-red)); --chat-tinta: var(--white); --chat-mezcla: 26%; }
.chat-av--c3, .chat-msg--c3 { --chat-c: var(--ejn-teal-dark); --chat-tinta: var(--white); --chat-mezcla: 24%; }
.chat-av--c4, .chat-msg--c4 { --chat-c: var(--color-secondary); --chat-tinta: var(--white); --chat-mezcla: 26%; }

/* ---------- Avatar: foto o iniciales en círculo, punto de presencia ---------- */
.chat-av {
  --av: 36px; position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; box-sizing: border-box;
  width: var(--av); height: var(--av); border-radius: 50%; color: var(--chat-tinta, var(--white)); user-select: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--chat-c, var(--ejn-azul-acento)) 78%, var(--white)), var(--chat-c, var(--ejn-azul-acento)));
  font-size: calc(var(--av) * .38); font-weight: var(--fw-semibold); letter-spacing: .02em; line-height: 1;
}
.chat-av--xs { --av: 18px; } .chat-av--sm { --av: 30px; } .chat-av--md { --av: 38px; } .chat-av--lg { --av: 52px; }
.chat-av__foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.chat-av__ini { pointer-events: none; }
.chat-av--mas { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); font-size: var(--fs-small); }
.chat-av__estado {
  position: absolute; right: -1px; bottom: -1px; width: calc(var(--av) * .3); height: calc(var(--av) * .3); min-width: 8px; min-height: 8px;
  border-radius: 50%; border: 2px solid var(--white); background: var(--gray-300); box-sizing: border-box;
}
.chat-av--xs .chat-av__estado { display: none; }
.chat-av__estado--en_linea { background: var(--ejn-green); }
.chat-av__estado--ausente { background: var(--ejn-gold); }
.chat-av--nuevo { animation: chat-pop .5s cubic-bezier(.2, 1.4, .4, 1); }

/* ---------- Botón de la cabecera del registro ---------- */
.chat-boton { position: relative; gap: var(--space-2); }
.chat-boton .ico { flex: 0 0 auto; }
.chat-boton__pila { display: inline-flex; margin-left: 2px; }
.chat-boton__pila .chat-av { box-shadow: 0 0 0 2px var(--white); }
.chat-boton__pila .chat-av + .chat-av { margin-left: -6px; }
.chat-boton .badge.badge--contador { margin-left: 2px; }
.chat-boton[aria-expanded="true"] { background: var(--ejn-azul-acento-soft); border-color: var(--ejn-azul-acento); color: var(--ejn-azul-acento-dark); }

/* ---------- Sala: panel lateral derecho (patrón .avisos), blanco, mucho aire ----------
   Debajo de la franja superior: la campana y el usuario siguen a la vista mientras se conversa. Sin fondo oscurecido en escritorio (el formulario sigue
   usable); en celular ocupa toda la pantalla y sí lleva fondo. */
.avisos--chat { width: 480px; max-width: 100vw; top: var(--franja-alto); background: var(--white); border-left: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); }
.avisos-fondo--chat { display: none; }

/* cabecera blanca: título, subtítulo, personas en línea y cerrar */
.avisos--chat .avisos__cabecera.chat__cab { align-items: center; padding: var(--space-4) var(--space-5); background: var(--white); color: var(--gray-900); border-bottom: 1px solid var(--gray-100); }
.avisos--chat .avisos__cabecera .avisos__titulo { color: var(--gray-900); font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -.005em; }
.avisos--chat .avisos__cabecera .btn-icono { color: var(--gray-600); border-color: transparent; background: transparent; }
.avisos--chat .avisos__cabecera .btn-icono:hover { background: var(--gray-100); color: var(--gray-900); }
.avisos--chat .avisos__cabecera .btn-icono:focus-visible { outline: 2px solid var(--ejn-azul-acento); }
.chat__cab-txt { min-width: 0; }
.chat__ref { margin: 2px 0 0; font-size: var(--fs-small); color: var(--gray-600); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__ref-sep { margin: 0 6px; }
.chat__cab-der { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.chat__cab-sep { width: 1px; height: 22px; background: var(--gray-200); }
.chat__personas-btn { display: flex; align-items: center; gap: var(--space-2); padding: 3px 6px 3px 3px; border: 0; border-radius: 9999px; background: transparent; cursor: pointer; font: inherit; color: var(--gray-700); }
.chat__personas-btn:hover { background: var(--gray-50); }
.chat__personas-btn:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 1px; }
.chat__pila { display: flex; align-items: center; }
.chat__pila .chat-av { box-shadow: 0 0 0 2px var(--white); }
.chat__pila .chat-av + .chat-av { margin-left: -8px; }
.chat__en-linea { font-size: var(--fs-body); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; color: var(--gray-700); }

/* definiciones fijadas */
.chat__defs { flex-shrink: 0; background: var(--ejn-green-soft); border-bottom: 1px solid var(--gray-100); color: var(--ejn-green-dark); }
.chat__defs > summary { display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-5); cursor: pointer; list-style: none; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.chat__defs > summary::-webkit-details-marker { display: none; }
.chat__defs > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.chat__defs[open] > summary::after { transform: rotate(-135deg); }
.chat__defs-lista { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--space-5) var(--space-3); max-height: 180px; overflow-y: auto; }
.chat-defs__item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 7px 10px; border: 1px solid var(--gray-200); border-left: 3px solid var(--ejn-green); border-radius: var(--radius-sm); background: var(--white); text-align: left; cursor: pointer; font: inherit; color: var(--gray-900); }
.chat-defs__item:hover { background: var(--gray-50); }
.chat-defs__txt { font-size: var(--fs-small); line-height: 1.4; }
.chat-defs__quien { font-size: var(--fs-caption); color: var(--gray-600); }

/* ---------- Hilo de mensajes ---------- */
.chat__centro { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--white); }
.chat__hilo { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-3); overscroll-behavior: contain; }
.chat-dia { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; color: var(--gray-600); font-size: var(--fs-caption); }
.chat-dia::before, .chat-dia::after { content: ""; flex: 1; height: 1px; background: var(--gray-100); }
.chat-dia__txt { text-transform: uppercase; letter-spacing: .6px; font-weight: var(--fw-medium); }
.chat-nuevos-linea { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-1); }
.chat-nuevos-linea::before, .chat-nuevos-linea::after { content: ""; flex: 1; height: 1px; background: var(--ejn-azul-acento-soft); }
.chat-nuevos-linea__txt { padding: 2px 10px; border-radius: 9999px; background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento-dark); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .3px; }

/* aviso de sistema: texto gris muy suave, o pastilla gris clara con ícono de información */
.chat-aviso { align-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 96%; padding: 5px 14px 5px 8px; border-radius: 9999px; background: var(--gray-50); color: var(--gray-600); font-size: var(--fs-small); line-height: 1.35; }
.chat-aviso__ico { display: grid; place-items: center; flex: 0 0 auto; color: var(--gray-600); }
.chat-aviso__nombre { font-weight: var(--fw-semibold); color: var(--gray-700); text-transform: uppercase; letter-spacing: .01em; }
.chat-aviso__hora { flex: 0 0 auto; font-size: var(--fs-caption); color: var(--gray-600); font-variant-numeric: tabular-nums; }
.chat-aviso--enlace { cursor: pointer; }
.chat-aviso--enlace:hover { background: var(--gray-100); }
.chat-aviso--enlace:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }

/* mensaje: avatar a la izquierda, nombre al lado y burbuja de historieta con cola hacia el avatar */
.chat-msg { --burbuja: color-mix(in srgb, var(--chat-c, var(--ejn-azul-acento)) var(--chat-mezcla, 17%), var(--white)); --burbuja-luz: color-mix(in srgb, var(--burbuja) 45%, var(--white));
  display: flex; align-items: flex-start; gap: var(--space-3); max-width: 94%; }
.chat-msg--propio { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg--cont { margin-top: -2px; }
.chat-msg__hueco { flex: 0 0 30px; }
.chat-msg__col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.chat-msg--propio .chat-msg__col { align-items: flex-end; }
.chat-msg__cab { display: flex; align-items: baseline; gap: var(--space-2); margin: 3px 0 5px 2px; min-width: 0; }
.chat-msg__autor { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--gray-900); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.chat-msg__rol { font-size: var(--fs-caption); color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msg__linea { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 100%; }
.chat-msg--propio .chat-msg__linea { flex-direction: row-reverse; }
.chat-msg__burbuja {
  position: relative; min-width: 0; max-width: 100%; padding: 10px 15px; border-radius: 18px; color: var(--gray-900); font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere;
  background: linear-gradient(180deg, var(--burbuja-luz), var(--burbuja));
  box-shadow: inset 0 1px 0 var(--white), inset 0 -2px 0 color-mix(in srgb, var(--chat-c, var(--ejn-azul-acento)) 16%, transparent), var(--shadow-sm);
}
/* cola: nace arriba, junto al nombre, y apunta al avatar (en los propios, hacia el borde derecho) */
.chat-msg:not(.chat-msg--cont) .chat-msg__burbuja { border-top-left-radius: 4px; }
.chat-msg:not(.chat-msg--cont) .chat-msg__burbuja::before { content: ""; position: absolute; top: 0; left: -11px; width: 13px; height: 18px; background: var(--burbuja-luz); clip-path: polygon(100% 0, 100% 100%, 0 0); }
.chat-msg--propio:not(.chat-msg--cont) .chat-msg__burbuja { border-top-left-radius: 18px; border-top-right-radius: 4px; }
.chat-msg--propio:not(.chat-msg--cont) .chat-msg__burbuja::before { left: auto; right: -11px; clip-path: polygon(0 0, 0 100%, 100% 0); }
.chat-msg--para-mi:not(.chat-msg--propio) .chat-msg__burbuja { box-shadow: 0 0 0 2px var(--ejn-gold), var(--shadow-sm); }
.chat-msg--definicion .chat-msg__burbuja { box-shadow: 0 0 0 2px var(--ejn-green), var(--shadow-sm); }
.chat-msg__texto { white-space: pre-wrap; }
.chat-msg__def { display: inline-flex; gap: 3px; margin: 0 0 6px; }
.chat-msg__hora { flex: 0 0 auto; padding-bottom: 3px; font-size: var(--fs-caption); color: var(--gray-600); font-variant-numeric: tabular-nums; }
.chat-msg__meta { display: flex; align-items: center; gap: var(--space-2); margin: 2px 4px 0; min-height: 22px; }
.chat-msg--propio .chat-msg__meta { flex-direction: row-reverse; }
.chat-msg__visto { display: inline-flex; align-items: center; color: var(--ejn-azul-acento); }
.chat-msg__visto .chat-av { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--white); }
.chat-msg__visto .ico + .chat-av { margin-left: 3px; }
.chat-msg__acciones { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.chat-msg:hover .chat-msg__acciones, .chat-msg:focus-within .chat-msg__acciones { opacity: 1; }
.chat-msg__accion { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gray-600); cursor: pointer; }
.chat-msg__accion:hover { background: var(--gray-100); color: var(--ejn-azul-acento-dark); }
.chat-msg__accion:focus-visible { outline: 2px solid var(--ejn-azul-acento); }
.chat-msg__accion--activa { color: var(--ejn-green-dark); background: var(--ejn-green-soft); }
@media (hover: none) { .chat-msg__acciones { opacity: 1; } }

/* @mención: en un mensaje, en el editor y en la campana */
.chat-mencion { display: inline; padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--white) 60%, transparent); color: var(--ejn-azul-acento-dark); font-weight: var(--fw-semibold); white-space: nowrap; }
.chat-mencion--yo { background: var(--ejn-gold-soft); color: var(--ejn-gold-dark); }
.chat-mencion--editor { background: var(--ejn-azul-acento-soft); cursor: default; user-select: all; }

/* respuesta en el mismo hilo: cita del mensaje original */
.chat-cita { display: flex; flex-direction: column; gap: 1px; width: 100%; margin: 0 0 7px; padding: 5px 10px; border: 0; border-left: 3px solid var(--chat-c, var(--ejn-azul-acento)); border-radius: 4px 10px 10px 4px; background: color-mix(in srgb, var(--white) 55%, transparent); text-align: left; cursor: pointer; font: inherit; color: var(--gray-700); }
.chat-cita__autor { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--gray-900); text-transform: uppercase; letter-spacing: .02em; }
.chat-cita__txt { font-size: var(--fs-small); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* adjunto (en el mensaje y en el editor) */
.chat-adjunto { display: flex; align-items: center; gap: var(--space-2); min-width: 190px; max-width: 100%; margin-top: 7px; padding: 6px 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white); color: var(--gray-900); }
.chat-adjunto:first-child { margin-top: 0; }
.chat-adjunto__ico { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--tinte-fondo, var(--tinte-gris-fondo)); color: var(--tinte-icono, var(--tinte-gris-icono)); }
.chat-adjunto__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.chat-adjunto__nombre { font-size: var(--fs-small); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-adjunto__tam { font-size: var(--fs-caption); color: var(--gray-600); }
.chat-adjunto__accion { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gray-600); cursor: pointer; }
.chat-adjunto__accion:hover { background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento-dark); }

/* escribiendo… y «N mensajes nuevos» */
.chat__escribe { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-5) var(--space-2); font-size: var(--fs-caption); color: var(--gray-600); flex-shrink: 0; }
.chat__escribe[hidden], .chat__nuevos[hidden], .chat__defs[hidden], .chat__adjuntos[hidden], .chat__responde[hidden], .chat-menciones[hidden], .chat-emoji-pop[hidden], .chat__envio-aviso[hidden] { display: none; }
.chat__puntos { display: inline-flex; gap: 3px; padding: 7px 10px; border-radius: 12px 12px 12px 3px; background: var(--ejn-azul-acento-soft); }
.chat__puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--ejn-azul-acento); animation: chat-salta 1.1s infinite ease-in-out; }
.chat__puntos i:nth-child(2) { animation-delay: .15s; } .chat__puntos i:nth-child(3) { animation-delay: .3s; }
.chat__nuevos { position: absolute; right: var(--space-5); bottom: var(--space-2); z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 9999px; background: var(--ejn-azul-acento); color: var(--white); box-shadow: var(--shadow-md); font: var(--fw-semibold) var(--fs-small)/1 var(--font-family); cursor: pointer; animation: chat-entra .25s ease-out; }
.chat__nuevos:hover { background: var(--ejn-azul-acento-dark); }

/* ---------- Pie: respuesta, adjuntos y campo de texto ---------- */
.chat__pie { position: relative; flex-shrink: 0; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--gray-100); background: var(--white); }
.chat__responde { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); padding: 5px 6px 5px 10px; border-left: 3px solid var(--ejn-azul-acento); border-radius: 4px 10px 10px 4px; background: var(--ejn-azul-acento-mist); animation: chat-entra .2s ease-out; }
.chat-responde__cuerpo { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.chat-responde__autor { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--ejn-azul-acento-dark); }
.chat-responde__txt { font-size: var(--fs-small); color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-responde__quitar { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gray-600); cursor: pointer; }
.chat-responde__quitar:hover { background: var(--gray-100); }
.chat__adjuntos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.chat__adjuntos .chat-adjunto { margin-top: 0; min-width: 0; }
.chat__fila { display: flex; align-items: flex-end; gap: var(--space-2); }
.chat__caja { display: flex; align-items: flex-end; flex: 1; min-width: 0; border: 1px solid var(--gray-200); border-radius: 22px; background: var(--white); transition: border-color .15s, box-shadow .15s; }
.chat__caja:focus-within { border-color: var(--ejn-azul-acento); box-shadow: 0 0 0 3px var(--ejn-azul-acento-soft); }
.chat__editor { flex: 1; min-width: 0; min-height: 42px; max-height: 128px; overflow-y: auto; padding: 11px 4px 9px 16px; outline: none; font-size: var(--fs-body); line-height: 1.45; color: var(--gray-900); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__editor:empty::before { content: attr(data-placeholder); display: block; color: var(--gray-600); font-size: var(--fs-small); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.chat__iconos { display: flex; align-items: center; flex: 0 0 auto; padding: 0 6px 5px 0; }
.chat__iconos .btn-icono { width: 30px; height: 30px; color: var(--gray-600); border-radius: 50%; }
.chat__iconos .btn-icono:hover { background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento-dark); }
.chat__enviar { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 42px; padding: 0 14px; border: 0; border-radius: 21px; background: var(--ejn-azul-acento-soft); color: var(--ejn-azul-acento-dark); font: var(--fw-semibold) var(--fs-body)/1 var(--font-family); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.chat__enviar:hover:not(:disabled) { background: var(--ejn-azul-acento); color: var(--white); transform: translateY(-1px); }
.chat__enviar:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.chat__enviar:disabled { background: var(--gray-50); color: var(--gray-400); cursor: not-allowed; }
.chat__pista { display: flex; align-items: center; gap: 5px; margin: 8px 4px 0; font-size: var(--fs-caption); color: var(--gray-600); line-height: 1.3; }
.chat__envio-aviso { display: flex; align-items: center; gap: 5px; margin: 0 0 var(--space-2); padding: 5px 10px; border-radius: var(--radius-sm); background: var(--ejn-green-soft); color: var(--ejn-green-dark); font-size: var(--fs-small); animation: chat-entra .2s ease-out; }

/* menú de @menciones (sobre el campo) */
.chat-menciones { position: absolute; left: var(--space-4); right: var(--space-4); bottom: calc(100% - 8px); z-index: 5; max-height: 290px; overflow-y: auto; padding: var(--space-1); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: chat-entra .15s ease-out; }
.chat-menciones__cab { display: flex; align-items: center; gap: 5px; padding: 6px 10px 4px; font-size: var(--fs-caption); color: var(--gray-600); }
.chat-menciones__grupo { padding: 6px 10px 2px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .5px; text-transform: uppercase; color: var(--gray-600); }
.chat-menciones__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--gray-900); }
.chat-menciones__item:hover, .chat-menciones__item--activo { background: var(--gray-50); }
.chat-menciones__item--activo { box-shadow: inset 3px 0 0 var(--ejn-azul-acento); }
.chat-menciones__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.chat-menciones__nombre { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.chat-menciones__rol { font-size: var(--fs-small); color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-menciones__suma { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--ejn-azul-acento-dark); }
.chat-menciones__vacio { margin: 0; padding: 12px 10px; font-size: var(--fs-small); color: var(--gray-600); }
.chat-menciones__pie { padding: 5px 10px 3px; border-top: 1px solid var(--gray-100); margin-top: 3px; font-size: var(--fs-caption); color: var(--gray-600); }

/* emojis */
.chat-emoji-pop { position: absolute; right: calc(var(--space-5) + 80px); bottom: calc(100% - 6px); z-index: 5; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: var(--space-2); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: chat-entra .15s ease-out; }
.chat-emoji-pop button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 19px; cursor: pointer; }
.chat-emoji-pop button:hover { background: var(--gray-100); }

/* diálogo «Personas de este chat» (reusa dialog.dialogo--chico) */
.chat-personas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-persona { display: flex; align-items: center; gap: var(--space-3); padding: 7px 4px; border-bottom: 1px solid var(--gray-100); }
.chat-persona:last-child { border-bottom: 0; }
.chat-persona__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.chat-persona__nombre { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.chat-persona__rol { font-size: var(--fs-small); color: var(--gray-600); }
.chat-personas-sub { margin: var(--space-4) 0 var(--space-1); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .5px; text-transform: uppercase; color: var(--gray-600); }

/* ---------- Alerta en la campana (reusa .aviso-item) y aviso flotante ---------- */
.aviso-item--chat { display: flex; align-items: flex-start; gap: var(--space-3); border-left-color: var(--ejn-azul-acento); }
.aviso-item--chat .chat-av { margin-top: 1px; }
.btn-icono__contador.chat-pulso { animation: chat-pulso .7s ease-out; }
.chat-toast { position: fixed; top: calc(var(--franja-alto) + var(--space-3)); right: var(--space-4); z-index: 60; display: flex; align-items: center; gap: var(--space-3); width: 330px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 12px; border: 1px solid var(--gray-200); border-left: 3px solid var(--ejn-azul-acento); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-lg); color: var(--gray-900); text-decoration: none; animation: chat-toast-entra .35s cubic-bezier(.2, 1.2, .4, 1); }
.chat-toast + .chat-toast { top: calc(var(--franja-alto) + var(--space-3) + 78px); }
.chat-toast--sale { opacity: 0; transform: translateX(24px); transition: opacity .3s, transform .3s; }
.chat-toast__cuerpo { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.chat-toast__titulo { font-size: var(--fs-small); color: var(--ejn-azul-acento-dark); }
.chat-toast__txt { font-size: var(--fs-small); color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-toast__cerrar { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gray-600); cursor: pointer; flex: 0 0 auto; }
.chat-toast__cerrar:hover { background: var(--gray-100); }

/* ---------- Chat permanente: dos vistas (sala / «Mis conversaciones»), botón de la barra superior, registro cerrado, error de envío, editado y acciones del autor ---------- */
.chat__sala { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.chat__ref[hidden], .chat__sala[hidden], .chat__bandeja[hidden], .chat__nueva[hidden], #chat-volver[hidden], .chat__personas-btn[hidden], .chat__cab-sep[hidden], .chat__cerrado[hidden], .chat__error[hidden] { display: none; }
.avisos--chat .avisos__cabecera #chat-volver { margin-right: var(--space-2); flex: 0 0 auto; }
.chat__bandeja { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); background: var(--white); overscroll-behavior: contain; }
.chat__bandeja-pista { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--space-3); font-size: var(--fs-caption); color: var(--gray-600); line-height: 1.35; }
.chat-bandeja { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.chat-bandeja__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 11px 14px; border: 1px solid var(--gray-100); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; font: inherit; color: var(--gray-900); }
.chat-bandeja__item:hover { background: var(--gray-50); }
.chat-bandeja__item:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 1px; }
.chat-bandeja__item--nuevo { border-color: var(--ejn-azul-acento-soft); background: var(--ejn-azul-acento-mist); }
.chat-bandeja__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.chat-bandeja__titulo { font-size: var(--fs-body); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bandeja__sec { font-size: var(--fs-small); color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bandeja__cuando { font-size: var(--fs-caption); color: var(--gray-600); }
.chat__nueva { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); background: var(--white); overscroll-behavior: contain; }
.chat__nueva[hidden], .chat-nueva__personas[hidden] { display: none; }
.chat-nueva { display: flex; flex-direction: column; gap: var(--space-3); }
.chat-nueva textarea { width: 100%; resize: vertical; min-height: 84px; }
.chat-nueva__personas { list-style: none; margin: var(--space-2) 0 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); }
.chat-nueva__persona { display: flex; align-items: center; gap: var(--space-3); padding: 7px 10px; cursor: pointer; }
.chat-nueva__personas li { border-bottom: 1px solid var(--gray-100); }
.chat-nueva__personas li:last-child { border-bottom: 0; }
.chat-nueva__personas li[hidden] { display: none; }
.chat-nueva__persona:hover { background: var(--gray-50); }
.chat-nueva__persona input { flex: 0 0 auto; width: auto; margin: 0; }
.chat-nueva__persona-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.chat-nueva__persona-nombre { font-size: var(--fs-body); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-nueva__persona-rol { font-size: var(--fs-small); color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-nueva__acciones { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.chat__bandeja-nueva { width: 100%; justify-content: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.chat-bandeja__vacio { margin: var(--space-4) 0; padding: var(--space-4); border: 1px dashed var(--gray-200); border-radius: var(--radius-md); background: var(--white); color: var(--gray-600); font-size: var(--fs-small); text-align: center; line-height: 1.45; list-style: none; }
#btn-chat .btn-icono__contador { background: var(--ejn-azul-acento); }
.chat__cerrado { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-2); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--gray-50); color: var(--gray-700); font-size: var(--fs-small); }
.chat__error { margin: 0 0 var(--space-2); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--ejn-red-soft); color: var(--ejn-red-dark); font-size: var(--fs-small); }
.chat__pie--cerrado .chat__fila, .chat__pie--cerrado .chat__pista { display: none; }
.chat-msg__editado { font-size: var(--fs-caption); color: var(--gray-600); font-style: italic; }
.chat-msg__accion--dang:hover { background: var(--ejn-red-soft); color: var(--ejn-red-dark); }
.chat__mas { align-self: center; padding: 4px 12px; border: 1px solid var(--gray-200); border-radius: 9999px; background: var(--white); color: var(--gray-700); font: var(--fw-semibold) var(--fs-small)/1.2 var(--font-family); cursor: pointer; }
.chat__mas:hover { background: var(--gray-50); }

/* ---------- Movimiento ---------- */
.chat-entra { animation: chat-entra .28s ease-out; }
.chat-resalta .chat-msg__burbuja, .chat-resalta.chat-aviso { animation: chat-resalta 1.4s ease-out; }
@keyframes chat-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes chat-pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes chat-salta { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes chat-pulso { 0% { transform: scale(1); } 30% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes chat-resalta { 0%, 25% { box-shadow: 0 0 0 4px var(--ejn-azul-acento-soft), var(--shadow-md); } 100% { box-shadow: var(--shadow-sm); } }
@keyframes chat-toast-entra { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .chat-entra, .chat-av--nuevo, .chat__nuevos, .chat__responde, .chat-menciones, .chat-emoji-pop, .chat-toast, .chat__envio-aviso { animation: none; }
  .chat__puntos i, .btn-icono__contador.chat-pulso, .chat-resalta .chat-msg__burbuja { animation: none; }
}

/* ---------- Celular: la sala ocupa toda la pantalla (con fondo), sobre la barra inferior ---------- */
@media (max-width: 860px) {
  .avisos--chat { top: 0; width: 100vw; height: 100dvh; z-index: 55; border-left: 0; }
  .avisos-fondo--chat { display: block; z-index: 54; }
  .avisos--chat .avisos__cabecera.chat__cab { padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3); }
  .chat__hilo { padding: var(--space-4) var(--space-3) var(--space-3); }
  .chat-msg { max-width: 96%; }
  .chat__pie { padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .chat__pista { display: none; }
  .chat__enviar { padding: 0 14px; }
  .chat-toast { top: calc(var(--franja-alto) + var(--space-2)); right: var(--space-3); left: var(--space-3); width: auto; max-width: none; }
  .chat-boton__pila { display: none; }
  .chat-menciones { max-height: 240px; left: var(--space-3); right: var(--space-3); }
  .chat-emoji-pop { right: var(--space-3); }
}

/* =====================================================================================================================
   Panel de inicio del empleador y del servicio de H&S (22/10/2026, mockup en docs/prototipos/panel_empleador): disposición de las tarjetas con dato real.
   Reusa dash-panel, dash-lista, dash-resumen, dash-donut, pl-stats y pa-prog; solo agrega las filas, los títulos y los puntos de estado. Solo tokens.
   ===================================================================================================================== */
.pe-titulo { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--gray-200); }
.pe-titulo h2 { margin: 0; font-size: var(--fs-h3, 15px); color: var(--ejn-navy); }
.pe-titulo span { font-size: var(--fs-small); color: var(--gray-600); }
.pe-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); align-items: stretch; }
.pe-fila > .dash-panel { margin: 0; min-width: 0; }
.pe-seccion[hidden], .pe-fila > [hidden] { display: none; }
.pe-donuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); text-align: center; margin-bottom: var(--space-3); }
.pe-donut { display: block; text-decoration: none; color: inherit; }
.pe-donut:hover .pe-donuts__rot { color: var(--ejn-navy); }
.pe-donuts .dash-donut { width: 84px; height: 84px; }
.pe-donuts__rot { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--gray-700); }
.pe-donuts .dash-donut__valor--aviso { stroke: var(--ejn-gold); }
.pe-donuts .dash-donut__valor--alerta { stroke: var(--ejn-red); }
@media (max-width: 560px) { .pe-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pe-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; background: var(--gray-300); }
.pe-punto--ok { background: var(--ejn-green); }
.pe-punto--warn { background: var(--ejn-gold); }
.pe-punto--dang { background: var(--ejn-red); }
.pe-nota { margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--gray-600); }
.pe-pie { margin: var(--space-3) 0 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pe-barra-dias { margin: var(--space-2) 0 var(--space-3); }
@media (min-width: 1100px) { .pe-fila > .dash-panel:has(.pe-donuts) { grid-column: span 2; } }
/* Atajos y semáforo (22/10/2026): la fila de atajos va arriba del panel; el semáforo ocupa todo el ancho y sus filas llevan el mismo punto de estado de las tarjetas. */
.pe-atajos { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.pe-atajos__rot { font-size: var(--fs-small); color: var(--gray-600); margin-right: var(--space-1); }
.pe-fila > .pe-ancho { grid-column: 1 / -1; }
.pe-estabs th, .pe-estabs td { white-space: nowrap; }
/* Cifras de las tarjetas del panel (22/10/2026): .pl-stats / .pl-stat / .pl-lin viven en rixart-prv.css, que el panel no carga; sin esto el número y su rótulo salían pegados
   («1En curso»). Mismas reglas, acotadas a las filas de tarjetas del panel. El número va arriba y el rótulo abajo, centrados, como en Gestión preventiva. */
.pe-fila .pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.pe-fila .pl-stat { text-align: center; padding: 10px 6px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); }
.pe-fila .pl-stat strong { display: block; font-size: 20px; line-height: 1.2; color: var(--ejn-navy); }
.pe-fila .pl-stat span { display: block; margin-top: 2px; font-size: 11px; color: var(--gray-600); }
.pe-fila .pl-stat--alerta strong { color: var(--ejn-red-dark); }
.pe-fila .pl-lin { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 6px 0; font-size: 13px; border-top: 1px solid var(--gray-100); }
.pe-fila .pl-lin:first-of-type { border-top: 0; }

/* ============================================================================================================================================================
   Ayuda contextual (PROPUESTA de diseño — mockup, 23/10/2026). Se vuelca como bloque final de rixart-erp.css.
   Reglas de este bloque:
     · SOLO variables de rixart-tokens.css. Ningún hex ni rgba: los tintes salen de color-mix sobre tokens (como el fondo de los diálogos).
     · Reusa dialog.dialogo--lateral (el panel lateral de 21/10/2026), .btn-icono, .btn / .btn-mini, .badge, .aviso-barra, .campo y .tarjeta. Clases nuevas, chicas,
       con prefijo ay- (un componente nuevo: panel de ayuda, marcador «?» y recorrido guiado). Sin style= ni JS en línea (CSP script-src 'self', style-src 'self':
       las posiciones del recorrido las pone rixart-ayuda.js por CSSOM, que la CSP permite).
     · Movimiento: todo lo animado se apaga con prefers-reduced-motion (y con html.ay-sin-movimiento, que usa la demo para mostrarlo).
   ============================================================================================================================================================ */

:root { --ay-ancho: 440px; --ay-z: 1500; }

/* ---------- Punto de entrada: el «?» de la subbarra (btn-ayuda ya existe en layouts/privado.php); ahora con rótulo en pantallas anchas ---------- */
.ay-boton, .subbarra .ay-boton { width: auto; min-width: 36px; padding-inline: var(--space-3); gap: 6px; flex: none; white-space: nowrap; }  /* 23/10/2026: .subbarra .btn-icono (34 px de ancho) le ganaba por especificidad y el rótulo «Ayuda» quedaba fuera del marco */
.ay-boton__txt { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.ay-boton__punto { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--ejn-azul-acento); border: 2px solid var(--white); box-sizing: border-box; }
.ay-boton__punto:not([hidden]) { animation: ay-latido 1.8s ease-in-out 3; }
@media (max-width: 1100px) { .ay-boton, .subbarra .ay-boton { width: 36px; padding-inline: 0; } .ay-boton__txt { display: none; } }

/* ---------- Panel: dialog.dialogo--lateral de siempre, más angosto; en escritorio no bloquea y EMPUJA el contenido para que el formulario siga a la vista ---------- */
dialog.dialogo--lateral.ay-panel { width: min(var(--ay-ancho), 100%); border-radius: 16px 0 0 16px; background: var(--white); }
dialog.dialogo--lateral.ay-panel:not([open]) { display: none; }
dialog.dialogo--lateral.ay-panel:not(:modal) { position: fixed; z-index: calc(var(--ay-z) - 100); border-left: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); }
dialog.dialogo--lateral.ay-panel::backdrop { background: color-mix(in srgb, var(--ejn-navy) 45%, transparent); }
.ay-panel__cab { padding: var(--space-4) var(--space-5); align-items: flex-start; }
.ay-panel__cab-txt { min-width: 0; }
.ay-panel__sup { display: block; font-size: var(--fs-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--gray-600); }
.ay-panel__cab h2 { margin: 2px 0 0; font-size: var(--fs-h3); line-height: var(--lh-tight); }
.ay-panel__cab h2:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 3px; border-radius: var(--radius-sm); }
.ay-panel__cuerpo { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) var(--space-5) var(--space-5); }
.ay-panel__pie { flex: 0 0 auto; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--gray-200); background: var(--gray-50); font-size: var(--fs-caption); color: var(--gray-600); line-height: 1.45; }
.ay-panel__pie p { margin: 0; }
.ay-panel__pie p + p { margin-top: var(--space-1); }
.ay-panel__pie kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--gray-300); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--white); font: inherit; font-weight: var(--fw-semibold); color: var(--gray-700); }
.ay-voto { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); color: var(--gray-700); }
@media (min-width: 1101px) {
  body.ay-con-panel .marco { margin-right: var(--ay-ancho); transition: margin-right .2s ease-out; }
}
@media (max-width: 600px) { dialog.dialogo--lateral.ay-panel { width: 100%; border-radius: 0; } .ay-panel__pie p:last-child { display: none; } }

/* ---------- Buscador dentro de la ayuda ---------- */
.ay-buscar { position: relative; }
.ay-buscar__ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-600); pointer-events: none; }
.ay-buscar input[type="search"] { width: 100%; box-sizing: border-box; padding-left: 36px; padding-top: 9px; padding-bottom: 9px; font-size: var(--fs-body); }
.ay-sugerencias { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.ay-sugerencias button { max-width: 100%; text-align: left; }
.ay-resultados { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.ay-resultado { display: block; width: 100%; box-sizing: border-box; padding: var(--space-3); border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); color: inherit; text-align: left; font: inherit; text-decoration: none; cursor: pointer; }
.ay-resultado:hover { border-color: var(--ejn-azul-acento); background: var(--ejn-azul-acento-mist); }
.ay-resultado:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.ay-resultado__tit { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--gray-900); }
.ay-resultado__txt { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--gray-600); }
.ay-resultado mark { background: var(--ejn-gold-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
.ay-vacio-busqueda { margin: var(--space-3) 0 0; padding: var(--space-3); border: 1px dashed var(--gray-300); border-radius: var(--radius-md); font-size: var(--fs-small); color: var(--gray-600); }

/* ---------- Bloques del panel ---------- */
.ay-bloque { min-width: 0; }
.ay-bloque__tit { margin: 0 0 var(--space-2); font-size: var(--fs-small); letter-spacing: .04em; text-transform: uppercase; color: var(--gray-600); font-weight: var(--fw-semibold); }
.ay-bloque p { margin: 0 0 var(--space-2); line-height: 1.55; color: var(--gray-800); }
.ay-bloque p:last-child { margin-bottom: 0; }
.ay-bloque ul { margin: 0; padding-left: 1.2em; line-height: 1.5; color: var(--gray-800); }
.ay-bloque li + li { margin-top: var(--space-1); }
.ay-bloque code { font-family: var(--font-mono); font-size: .92em; background: var(--gray-100); padding: 0 4px; border-radius: var(--radius-sm); }

/* Tarjeta de arranque del recorrido */
.ay-guiame { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--ejn-azul-acento-soft); border-radius: var(--radius-md); background: var(--ejn-azul-acento-mist); }
.ay-guiame__tit { margin: 0; font-weight: var(--fw-semibold); color: var(--ejn-navy); }
.ay-guiame__meta { margin: 0; font-size: var(--fs-small); color: var(--gray-700); }
.ay-guiame__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* Lista de lo que hay / se completa: <details> nativo (teclado y lector de pantalla sin código) */
.ay-items { display: flex; flex-direction: column; gap: var(--space-2); }
.ay-item { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); }
.ay-item[open] { border-color: var(--ejn-azul-acento-soft); }
.ay-item--foco { border-color: var(--ejn-azul-acento); box-shadow: 0 0 0 3px var(--ejn-azul-acento-soft); }
.ay-item__resumen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px var(--space-3); cursor: pointer; font-weight: var(--fw-semibold); color: var(--gray-900); list-style: none; border-radius: var(--radius-md); }
.ay-item__resumen::-webkit-details-marker { display: none; }
.ay-item__resumen::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: rotate(45deg); transition: transform .15s; }
.ay-item[open] > .ay-item__resumen::after { transform: rotate(-135deg); }
.ay-item__resumen:hover { background: var(--gray-50); }
.ay-item__resumen:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: -2px; }
.ay-item__cuerpo { padding: 0 var(--space-3) var(--space-3); }
.ay-item__cuerpo p { margin: 0 0 var(--space-2); line-height: 1.5; color: var(--gray-800); }
.ay-filas { margin: 0 0 var(--space-3); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.ay-fila { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--gray-200); line-height: 1.5; color: var(--gray-800); }
.ay-fila b { color: var(--gray-900); }
.ay-fila--ejemplo { border-left-color: var(--ejn-azul-acento-soft); background: var(--ejn-azul-acento-mist); padding: var(--space-1) var(--space-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ay-fila--formato { border-left-color: var(--ejn-teal); }
.ay-fila--error { border-left-color: var(--ejn-gold-dark); background: var(--ejn-gold-soft); padding: var(--space-1) var(--space-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ay-item__acciones { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Mensajes de error con su remedio */
.ay-errores { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.ay-errores div { padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-200); border-radius: var(--radius-md); }
.ay-errores dt { font-weight: var(--fw-semibold); color: var(--gray-900); }
.ay-errores dd { margin: 2px 0 0; font-size: var(--fs-small); color: var(--gray-700); line-height: 1.45; }

/* Enlaces a la Wiki */
.ay-enlaces { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ay-enlaces a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: var(--ejn-azul-acento-dark); text-decoration: none; font-weight: var(--fw-medium); }
.ay-enlaces a:hover { background: var(--ejn-azul-acento-mist); border-color: var(--ejn-azul-acento); }
.ay-enlaces a:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.ay-enlaces a .ico { flex: 0 0 auto; }
.ay-enlaces__sub { display: block; font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--gray-600); }
.ay-aparte { margin: var(--space-3) 0 0; }

/* ---------- Marcador «?» junto a cada tarjeta, bloque o campo (lo dibuja rixart-ayuda.js: la vista no lo escribe) ---------- */
.ay-pregunta { display: inline-grid; place-items: center; flex: 0 0 auto; box-sizing: border-box; min-width: 24px; width: 24px; height: 24px; margin-left: var(--space-2); padding: 0; border: 1px solid var(--gray-300); border-radius: 50%; background: var(--white); color: var(--gray-600); font: var(--fw-bold) 12px/1 var(--font-family); vertical-align: middle; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.ay-pregunta:hover { background: var(--ejn-azul-acento-soft); border-color: var(--ejn-azul-acento); color: var(--ejn-azul-acento-dark); }
.ay-pregunta:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.campo[data-ayuda] { position: relative; }
.ay-pregunta--campo { position: absolute; top: -1px; right: 0; width: 20px; height: 20px; min-width: 20px; margin: 0; font-size: 11px; }
.tarjeta__cab .ay-pregunta { margin-right: auto; }
legend.bloque__titulo .ay-pregunta { margin-left: var(--space-2); }

/* ---------- «Mostrame dónde» y foco de la ayuda sobre un elemento ---------- */
.ay-resalte { outline: 3px solid var(--ejn-azul-acento); outline-offset: 3px; border-radius: var(--radius-md); animation: ay-pulso 1.2s ease-in-out 2; }

/* ---------- Invitación de la primera visita (usa .aviso-barra) ---------- */
.ay-invitacion { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ay-invitacion__acciones { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Recorrido guiado ---------- */
.ay-tour { position: fixed; inset: 0; z-index: var(--ay-z); pointer-events: none; }
/* El velo oscurece todo menos el elemento: una capa a pantalla completa con un hueco (clip-path, lo calcula rixart-ayuda.js). Más robusta que una sombra gigante. */
.ay-velo { position: fixed; inset: 0; background: color-mix(in srgb, var(--ejn-navy) 38%, transparent); pointer-events: none; }
.ay-foco { position: fixed; box-sizing: border-box; border-radius: var(--radius-md); box-shadow: 0 0 0 3px var(--ejn-azul-acento); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.ay-globo { position: fixed; box-sizing: border-box; width: 360px; max-width: calc(100vw - 24px); padding: var(--space-4); border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); color: var(--gray-800); box-shadow: var(--shadow-lg); pointer-events: auto; animation: ay-entra .18s ease-out; }
.ay-globo:focus { outline: none; }
.ay-globo:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.ay-globo::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--white); border: 1px solid var(--gray-200); transform: rotate(45deg); left: var(--ay-flecha-x, 24px); }
.ay-globo[data-lado="abajo"]::before { top: -7px; border-right: 0; border-bottom: 0; }
.ay-globo[data-lado="arriba"]::before { bottom: -7px; border-left: 0; border-top: 0; }
.ay-globo[data-lado="dentro"]::before { display: none; }
.ay-globo__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.ay-globo__paso { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--ejn-azul-acento-dark); }
.ay-globo__cerrar { appearance: none; border: 0; background: transparent; width: 28px; height: 28px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--gray-600); cursor: pointer; }
.ay-globo__cerrar:hover { background: var(--gray-100); color: var(--gray-900); }
.ay-globo__cerrar:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 1px; }
.ay-globo__tit { margin: 0 0 var(--space-1); font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--ejn-navy); }
.ay-globo__txt { margin: 0; line-height: 1.5; font-size: var(--fs-body); }
.ay-globo__estado { margin: var(--space-2) 0 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--gray-600); }
.ay-globo__estado--ok { color: var(--ejn-green-dark); }
.ay-globo__mas { margin: var(--space-2) 0 0; font-size: var(--fs-small); }
.ay-globo__mas button { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--ejn-azul-acento-dark); text-decoration: underline; cursor: pointer; }
.ay-globo__mas button:focus-visible { outline: 2px solid var(--ejn-azul-acento); outline-offset: 2px; }
.ay-puntos { display: flex; gap: 5px; margin: var(--space-3) 0 var(--space-2); padding: 0; list-style: none; }
.ay-puntos li { flex: 1 1 0; max-width: 28px; height: 4px; border-radius: 2px; background: var(--gray-200); }
.ay-puntos li.ay-punto--hecho { background: var(--ejn-azul-acento-soft); }
.ay-puntos li.ay-punto--actual { background: var(--ejn-azul-acento); }
.ay-globo__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.ay-globo__nav { display: flex; gap: var(--space-2); }

/* Aviso breve (retomar el recorrido / volver a la ayuda). Es un role="status", no roba el foco. */
.ay-aviso { position: fixed; left: 50%; bottom: var(--space-6); z-index: var(--ay-z); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-3); max-width: min(520px, calc(100vw - 24px)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ejn-navy); color: var(--white); box-shadow: var(--shadow-lg); font-size: var(--fs-small); animation: ay-entra .18s ease-out; }
.ay-aviso button { appearance: none; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--white) 55%, transparent); border-radius: var(--radius-sm); background: transparent; color: var(--white); padding: 4px 10px; font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.ay-aviso button:hover { background: color-mix(in srgb, var(--white) 16%, transparent); }
.ay-aviso button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ---------- Celular: el globo del recorrido se acomoda abajo, como hoja, y los botones son de 44 px ---------- */
@media (max-width: 600px) {
  .ay-globo { left: 8px !important; right: 8px; top: auto !important; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
  .ay-globo::before { display: none; }
  .ay-globo .btn, .ay-globo .btn-mini, .ay-guiame .btn, .ay-guiame .btn-mini { min-height: 44px; }
  .ay-globo__cerrar { width: 44px; height: 44px; }
  .ay-pregunta { width: 28px; height: 28px; }
  .ay-pregunta--campo { width: 24px; height: 24px; min-width: 24px; }
  .ay-aviso { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ---------- Movimiento reducido / contraste forzado ---------- */
@keyframes ay-entra { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ay-pulso { 0%, 100% { outline-color: var(--ejn-azul-acento); } 50% { outline-color: var(--ejn-azul-acento-soft); } }
@keyframes ay-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .ay-boton__punto:not([hidden]), .ay-resalte, .ay-globo, .ay-aviso { animation: none; }
  .ay-foco, .ay-item__resumen::after, .ay-pregunta { transition: none; }
  body.ay-con-panel .marco { transition: none; }
}
html.ay-sin-movimiento .ay-boton__punto:not([hidden]), html.ay-sin-movimiento .ay-resalte, html.ay-sin-movimiento .ay-globo, html.ay-sin-movimiento .ay-aviso, html.ay-sin-movimiento dialog.dialogo--lateral[open] { animation: none; }
html.ay-sin-movimiento .ay-foco, html.ay-sin-movimiento .ay-item__resumen::after, html.ay-sin-movimiento .ay-pregunta, html.ay-sin-movimiento body.ay-con-panel .marco { transition: none; }
@media (forced-colors: active) {
  .ay-velo { display: none; }
  .ay-foco { outline: 3px solid Highlight; box-shadow: none; }
  .ay-globo, .ay-item, .ay-resultado { border: 1px solid CanvasText; }
  .ay-resalte { outline-color: Highlight; }
}
.ay-cambio { align-self: flex-start; }

/* ===== Modo sin conexión (v0.65.674): indicador de la barra, pantalla «Trabajar sin conexión» y su cáscara sin red. Solo tokens de la paleta. ===== */
.of-estado { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-900); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; }
.of-estado[hidden] { display: none; }
.of-estado:hover { border-color: var(--ejn-azul-acento); color: var(--ejn-azul-acento-dark); }
.of-estado__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-600); flex: none; }
.of-estado--ok .of-estado__punto { background: var(--ejn-green); }

.of-estado--aviso .of-estado__punto { background: var(--ejn-gold); }

.of-estado--sin .of-estado__punto { background: var(--ejn-red); }

/* Accesibilidad (WCAG 2.4.7): el encabezado ordenable de la grilla se alcanza con el teclado y muestra el foco. */
.grilla__tabla th.ordenable:focus-visible { outline: 2px solid var(--ejn-blue); outline-offset: -2px; }

/* Árbol del menú lateral (28/10/2026, pedido de Daniel): los títulos de grupo se abren y cierran de a uno. Reusa .nav-grupo / .nav-sub; acá solo la cantidad de accesos
   del grupo, la sangría de sus hijos (menos que la del acordeón viejo, que no tenía flecha) y el movimiento de la flecha. Solo variables. */
.nav-grupo__n { flex: none; min-width: 10px; padding: 0 2px; font-size: 9.5px; font-weight: var(--fw-semibold); letter-spacing: 0; text-align: right; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.nav-arbol > .nav-grupo { gap: 4px; padding: 4px 6px 4px 8px; letter-spacing: .2px; }
.nav-sub.nav-sub--arbol .nav-item { padding-left: 24px; }
.nav-sub.nav-sub--arbol .nav-item--anidado { padding-left: 24px; }
.app--plegado .nav-grupo__n { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-grupo__flecha { transition: none; } }