/* ============================================================
   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-400);
}

/* 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-400); 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-400);
}

.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; }
.version__nom { display: block; font-size: 9.5px; color: var(--gray-400); }

/* ---------- 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); }
/* 14/09/2026: resumen breve en el titulo de una tarjeta plegable (ej.
   "Asignacion del caso . Adm.: X / Med.: Y") -- trunca con ellipsis si no
   entra, en vez de heredar el white-space:nowrap sin limite de
   .tarjeta__cab-toggle h2/h3 de arriba. */
.tarjeta__cab-resumen {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1 1 auto; margin-left: 2px;
}

/* 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__valor--chico { font-size: 15px; }
.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-400); 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; }
.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); }

/* 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; }

/* 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-400); 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);
}

.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-400); }
/* 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);
  font-size: 12.5px;
  padding: 6px 9px;
  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-400);
}
.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); }
.paso--hecho { background: var(--ejn-green-soft); border-color: #CFE7D9; }
.paso--hecho b { color: var(--ejn-green-dark); }
.paso--actual { background: var(--module-accent-soft, var(--ejn-blue-soft)); border-color: var(--module-accent, var(--ejn-blue)); }
.paso--actual b { color: var(--ejn-navy); }

/* 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: #1F4A6B; }
.nota-transversal { background: var(--ejn-orange-soft); border-left: 3px solid var(--ejn-orange); color: #7C4213; }

/* 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-400); 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; }
/* Bloque de respuesta cruda (JSON de una API externa, por ejemplo): mismo
   monospace que .mono pero con wrap y alto acotado con scroll propio. */
.bloque-respuesta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; white-space: pre-wrap; max-height: 300px; overflow: auto;
}
.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; }
.pila--nowrap { white-space: nowrap; }
/* 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; }

.badge--ok   { background: var(--ejn-green-soft); color: var(--ejn-green-dark); }
.badge--warn { background: var(--ejn-gold-soft);  color: var(--ejn-gold-dark); }
.badge--dang { background: var(--ejn-red-soft);   color: var(--ejn-red-dark); }
.badge--info { background: var(--ejn-blue-soft);  color: var(--ejn-blue-dark); }
.badge--neu  { background: var(--ejn-azul-acento-mist); color: var(--gray-600); border: 1px solid var(--ejn-azul-acento-soft); }  /* 06/09/2026: mismo sombreado tenue que .badge-neutral -- ver ejn-tokens.css */
.badge { padding: 1px 8px; font-size: 10.5px; }

.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); }

/* Etiqueta acotada del valor de una práctica (Autorizaciones, panel de
   detalle): a diferencia de una .tarjeta, no se estira al ancho del
   contenedor -- ocupa sólo lo que su contenido necesita (pedido de Daniel,
   08/09/2026: la tarjeta ancha se leía con demasiado espacio vacío al lado
   del monto). */
.etiqueta-valor {
  display: inline-flex; align-items: baseline; gap: 7px; max-width: 100%;
  padding: 7px 12px; margin: var(--space-3) 0 0;
  border-radius: var(--radius-sm);
  background: var(--ejn-azul-acento-mist); border: 1px solid var(--ejn-azul-acento-soft);
  font-size: 12.5px; line-height: 1.4;
}
.etiqueta-valor__monto { font-weight: var(--fw-bold); color: var(--ejn-navy); white-space: nowrap; }
.etiqueta-valor__detalle { color: var(--gray-600); font-size: 11.5px; }

/* Botón con pinta de link -- abre el panel lateral de Historia Clínica
   (ver .avisos/.entrada-clinica más abajo y ejn-app.js,
   iniciarHistoriaLateral()). No es una navegación real, por eso es
   <button> y no <a>: mismo criterio que a.pestana de más arriba, al
   revés -- ahí un enlace se viste de botón porque navega; acá un botón
   se viste de enlace porque no navega. */
.siniestro-link {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: var(--fw-semibold);
  color: var(--ejn-azul-acento-dark); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--ejn-azul-acento-soft);
}
.siniestro-link:hover { color: var(--ejn-azul-acento); text-decoration-color: var(--ejn-azul-acento); }

/* ---------- 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 { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.grilla__buscar { position: relative; display: flex; align-items: center; }
.grilla__buscar svg { position: absolute; left: 8px; color: var(--gray-400); 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;
}

.grilla__marco { overflow-x: auto; }

/* 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); }

/* Tabla de finance/libro_ssn_listado.php (Grupo A / Grupo B): venía en un
   <style> inline en la propia vista -- CSP style-src 'self' lo bloqueaba en
   silencio igual que un atributo style= (hallazgo del barrido posterior a
   P-89, 07/09/2026). Mismo ancho de columna en las dos tablas a propósito,
   para que se vean encolumnadas entre sí aunque sean tablas separadas. */
.libros-ssn-tabla { table-layout: fixed; width: 100%; }
.libros-ssn-tabla col.col-numero     { width: 5%; }
.libros-ssn-tabla col.col-libro      { width: 27%; }
.libros-ssn-tabla col.col-origen     { width: 10%; }
.libros-ssn-tabla col.col-detalle    { width: 19%; }
.libros-ssn-tabla col.col-periodo    { width: 12%; }
.libros-ssn-tabla col.col-presentado { width: 17%; }
.libros-ssn-tabla col.col-accion     { width: 10%; }
.libros-ssn-tabla th, .libros-ssn-tabla td { vertical-align: middle; }

/* 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-400); 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-400); 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); }

.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-400);
}

.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: #E6F2EA;                color: #1D6F3F; }
.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-400); 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-400); 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; }
.menu__lista--columnas { max-height: 320px; overflow-y: 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; }
.menu--filtro .menu__pie { display: flex; gap: 4px; }
.menu--filtro .menu__pie .menu__marcar-todos { width: auto; }

/* 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; }
.circuito__paso { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--gray-100); align-items: flex-start; }
.circuito__paso:last-child { border-bottom: none; }
.circuito__marca {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--fw-bold); background: var(--gray-200); color: var(--gray-600);
}
.circuito__marca--ok { background: var(--ejn-green); color: var(--white); }
.circuito__marca--curso { background: var(--module-accent, var(--ejn-blue)); color: var(--ejn-navy); }
.circuito__marca--rechazo { background: var(--ejn-red); color: var(--white); }
.circuito__cuerpo { flex: 1; min-width: 0; }
.circuito__titulo { font-size: 12.5px; font-weight: var(--fw-semibold); }
.circuito__detalle { font-size: 11.5px; color: var(--gray-600); }

/* 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, #E7F5EC); border-color: var(--ejn-green, #33A05C); color: var(--ejn-green-dark, #1E6B3B); }
.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-500); 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-400); }

/* 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: ui-monospace, SFMono-Regular, Menlo, monospace;
  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: ui-monospace, SFMono-Regular, Menlo, monospace; 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-400); }
.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-500);
}

/* 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: #FDECEC; border-bottom-color: #F3C2C2; color: #8A1F1F; }
.banda-sistema--warn { background: #FEF6E7; border-bottom-color: #F2DDB0; color: #7A5410; }
.banda-sistema--info { background: #EAF2FB; border-bottom-color: #C3D8F0; color: #1B4A7E; }
.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: #C0392B; }
.aviso-item--warn { border-left-color: #D08700; }
.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-500); }

/* 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: ui-monospace, SFMono-Regular, Menlo, monospace; 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, #FAFAFA); 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; }
.adjuntos__peso { margin-left: auto; font-size: 11px; color: var(--gray-400); white-space: nowrap; }

/* 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, #FAFAFA);
  border-left: 3px solid var(--module-accent, var(--ejn-blue));
}

/* Historia clínica en el panel lateral (ver ejn-app.js,
   iniciarHistoriaLateral(), y care/historia_lateral.php): una tarjeta por
   evolución, más angosta que en la pantalla completa porque vive en un
   drawer de 400px -- reusa .avisos/.avisos-fondo/.avisos__* para el
   contenedor (ya existían para el panel de Avisos de la topbar) y .asiento
   para el texto del asiento; esto es sólo el envoltorio de cada entrada. */
.entrada-clinica { padding: var(--space-3) 0; border-bottom: 1px solid var(--gray-100); }
.entrada-clinica:last-child { border-bottom: none; }
.entrada-clinica__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.entrada-clinica__fecha { font-size: 11px; font-weight: var(--fw-bold); color: var(--ejn-navy); }
.entrada-clinica__prestador { font-size: 11px; color: var(--gray-600); margin: 0 0 4px; }
.entrada-clinica__texto { font-size: 12px; max-width: none; }
.entrada-clinica__dx { margin-top: 4px; font-size: 10.5px; color: var(--gray-400); }

/* Panel lateral de detalle de un movimiento de Poliza (09/09/2026, pedido
   de Daniel: "dato anterior y dato nuevo que genera el movimiento").
   Mismo drawer .avisos que .entrada-clinica de arriba, contenido propio:
   una caja con el campo que cambió y sus dos valores. */
.movimiento-cambio {
  border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  padding: var(--space-3); background: var(--gray-50);
}
.movimiento-cambio__campo { margin: 0 0 6px; font-weight: var(--fw-semibold); color: var(--ejn-navy); }
.movimiento-cambio__antes, .movimiento-cambio__despues { margin: 0 0 4px; font-size: 12.5px; }
.movimiento-cambio__antes { color: var(--gray-500); }
.movimiento-cambio__despues { color: var(--ejn-navy); }
.movimiento-cambio__antes span, .movimiento-cambio__despues span {
  display: inline-block; min-width: 95px; color: var(--gray-400);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
}

.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; }
}


/* 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 { 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, #cbd5e1);
  background: var(--gray-50, #f8fafc);
  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, #e2e8f0);
  padding: .5rem .75rem;
  text-align: left;
  vertical-align: top;
}
.wiki-tabla th { background: var(--gray-50, #f8fafc); font-weight: 600; }
.wiki-figura { margin: 0 0 1.25rem; }
.wiki-figura img {
  max-width: 100%;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: .5rem;
  display: block;
}
.wiki-figura figcaption {
  font-size: .8125rem;
  color: var(--gray-500, #64748b);
  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, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  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, #94a3b8); 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, #e2e8f0);
  border-radius: .625rem;
  padding: .625rem .75rem .75rem;
  background: var(--gray-50, #f8fafc);
}
.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, #94a3b8); text-decoration: none; white-space: nowrap; }
.celda-accionar__pasos:hover { color: var(--brand-600, #4f46e5); 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, #e2e8f0);
  background: #fff;
  border-radius: .25rem;
  width: 1.375rem;
  height: 1.375rem;
  line-height: 1;
  font-size: .625rem;
  color: var(--gray-500, #64748b);
  cursor: pointer;
  flex-shrink: 0;
}
.orden-menu__flecha:hover { background: var(--gray-100, #f1f5f9); color: var(--ejn-navy, #0f172a); }
.orden-menu__subgrupo {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
  background: var(--gray-100, #f1f5f9);
}
.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, #e2e8f0);
  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, #e2e8f0);
  border-radius: .25rem;
  padding: .1875rem .375rem;
  color: var(--gray-600, #475569);
  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-400);
}
.nav-item--anidado { padding-left: 44px; }
.app--plegado .nav-subgrupo__titulo { display: none; }
.app--plegado .nav-item--anidado { padding-left: 0; }