/* Inicio, Pendientes y Documentos (§3, §4, §5).
 *
 * Rediseño GRC Empresarial (18/10/2026). Sólo tokens de lcr.css: ningún
 * color literal (core/tests_estilos.py lo comprueba en todas las hojas grc-*).
 *
 * Las tres pantallas comparten lenguaje: tarjetas con fondo difuminado
 * azul, línea vino arriba o a la izquierda, renglones de «qué hacer» con
 * su punto (lcr.css: .acciones-lista) y líneas vino que se encienden al
 * pasar el cursor o al llegar con el teclado. Todas las clases propias van
 * con prefijo —ini-, pend-, docs-— porque esta hoja se carga en todas las
 * pantallas y no debe tocar las de otro grupo.
 *
 * La transparencia sale de `color-mix` sobre los mismos tokens, no de
 * colores nuevos.
 */

/* ============================================================== INICIO == */

.ini-bloque{ margin-bottom:var(--e-6); }
.ini-toca{ overflow:hidden; }
.ini-inst{ scroll-margin-top:var(--e-6); }

/* ------------------------------------------------------ Lo que le toca -- */
.ini-toca__cab{ border-bottom-color:var(--vino-100); }
.ini-toca__cuenta{ margin-left:auto; }
.ini-toca__lista .acciones-lista__it{
  border-bottom-color:var(--vino-100);
  transition:background var(--m-rapido) var(--m-curva),
             box-shadow var(--m-rapido) var(--m-curva);
}
/* La línea vino del renglón, con el cursor y con el teclado (§3.3). */
.ini-toca__lista .acciones-lista__it:hover,
.ini-toca__lista .acciones-lista__it:focus-within{
  background:var(--g-suave-vino); box-shadow:inset 3px 0 0 var(--vino-500);
}
/* Medio punto más que los 15 px de antes (§3.3): la unidad `pt` dice
   exactamente lo pedido. */
.ini-toca__lista .acciones-lista__texto{
  font-size:calc(15px + .5pt); font-weight:var(--w-medio); color:var(--azul-950);
}
/* Puntos más vivos: un poco más grandes, con su aro y un halo suave. */
.ini-toca__lista .acciones-lista__punto{
  width:12px; height:12px; background:var(--azul-500);
  box-shadow:0 0 0 4px var(--azul-100), 0 0 10px color-mix(in srgb, var(--azul-500) 45%, transparent);
}
.ini-toca__lista .acciones-lista__it--atencion .acciones-lista__punto{
  background:var(--amarillo-600);
  box-shadow:0 0 0 4px var(--amarillo-100), 0 0 10px color-mix(in srgb, var(--amarillo-400) 70%, transparent);
}
.ini-toca__lista .acciones-lista__it--peligro .acciones-lista__punto{
  background:var(--vino-500);
  box-shadow:0 0 0 4px var(--vino-100), 0 0 10px color-mix(in srgb, var(--vino-500) 45%, transparent);
}
.ini-toca__lista .acciones-lista__it--ok .acciones-lista__punto{
  background:var(--teal-400);
  box-shadow:0 0 0 4px var(--teal-50), 0 0 10px color-mix(in srgb, var(--teal-400) 45%, transparent);
}
.ini-toca__vacio{ margin:0; padding:var(--e-6) var(--e-5); color:var(--c-texto-tenue); }
.ini-toca__mas{
  margin:0; padding:var(--e-3) var(--e-5); font-size:var(--t-sm);
  border-top:1px solid var(--vino-100); background:var(--g-suave-vino);
}
.ini-toca__mas a{ font-weight:var(--w-semi); }
.ini-toca__mas a::after{ content:" →"; }

/* -------------------------------------------------- franja de estados -- */
.ini-franja{ align-items:center; row-gap:var(--e-2); }
.ini-franja__texto{ display:flex; flex-direction:column; line-height:1.2; }
.ini-franja__de{ font-size:var(--t-xs); font-weight:var(--w-normal); color:var(--c-texto-tenue); }
/* En cero se apaga, sin desaparecer: el enlace sigue llevando a la lista. */
.ini-franja .ini-cero .franja__cifra,
.ini-franja .ini-cero .franja__et{ color:var(--gris-600); }
.ini-franja .ini-cero .franja__cifra{ font-weight:var(--w-semi); }
/* Detenidos con algún asunto: la alarma, en rojo y con su fondo. */
.ini-franja .ini-alarma{ background:var(--rojo-50); }
.ini-franja .ini-alarma .franja__cifra,
.ini-franja .ini-alarma .franja__et{ color:var(--rojo-700); }
.ini-franja__historial{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 6px;
  padding:var(--e-2) var(--e-4); border-radius:var(--r-md);
  text-decoration:none; color:var(--gris-700);
  transition:background var(--m-rapido) var(--m-curva), box-shadow var(--m-rapido) var(--m-curva);
}
.ini-franja__historial:hover,
.ini-franja__historial:focus-visible{
  background:var(--azul-50); color:var(--azul-950); text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--vino-500);
}
.ini-franja__ir{ color:var(--azul-700); font-weight:var(--w-semi); }
.ini-franja__nota{
  flex-basis:100%; margin:var(--e-1) var(--e-2) 0; text-align:right;
  font-size:var(--t-xs); color:var(--c-texto-tenue);
}
@media (max-width:900px){ .ini-franja__nota{ text-align:left; } }

/* --------------------------------------------------------- CCSS e INS -- */
.ini-inst__titulo{
  margin:0 0 var(--e-2); font-size:var(--t-xs); font-weight:var(--w-semi);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--gris-600);
}
.ini-inst__rejilla{
  display:grid; gap:var(--e-4);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.ini-inst__bloque{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--e-1) var(--e-4);
  align-items:start; padding:var(--e-4) var(--e-5);
  background:var(--g-suave-azul); color:var(--azul-950); text-decoration:none;
  border:1px solid var(--gris-200); border-radius:var(--r-lg); box-shadow:var(--s-tarjeta);
  transition:border-color var(--m-medio) var(--m-curva), box-shadow var(--m-medio) var(--m-curva);
}
/* Las líneas de acento dinámicas (§3.7): arriba, una línea que en reposo es
   un trazo corto y al pasar el cursor —o al llegar con el teclado— recorre
   el bloque entero; a la izquierda, una vertical vino que baja. Sin
   animación constante; con movimiento reducido, cambian sin recorrido. */
.ini-inst__bloque::before,
.ini-inst__bloque::after{ content:""; position:absolute; pointer-events:none; }
.ini-inst__bloque::before{
  left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--vino-600), var(--azul-500));
  transform:scaleX(.16); transform-origin:left center;
  transition:transform var(--m-lento) var(--m-curva);
}
.ini-inst__bloque::after{
  left:0; top:0; bottom:0; width:3px; background:var(--vino-500);
  transform:scaleY(0); transform-origin:center top;
  transition:transform var(--m-lento) var(--m-curva);
}
.ini-inst__bloque--ins::before{ background:linear-gradient(90deg, var(--azul-600), var(--vino-500)); }
.ini-inst__bloque:hover,
.ini-inst__bloque:focus-visible{ border-color:var(--vino-100); box-shadow:var(--s-3); text-decoration:none; color:var(--azul-950); }
.ini-inst__bloque:hover::before,
.ini-inst__bloque:focus-visible::before{ transform:scaleX(1); }
.ini-inst__bloque:hover::after,
.ini-inst__bloque:focus-visible::after{ transform:scaleY(1); }
.ini-inst__bloque:focus-visible{ outline:2px solid var(--c-vino-relleno); outline-offset:2px; }
.ini-inst__sigla{
  grid-row:span 3; display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:var(--r-md);
  background:var(--azul-800); color:var(--blanco);
  font-weight:800; font-size:var(--t-md); letter-spacing:.06em;
}
.ini-inst__bloque--ins .ini-inst__sigla{ background:var(--vino-700); }
.ini-inst__estado{ font-size:var(--t-lg); font-weight:var(--w-semi); }
.ini-inst__bloque--lista .ini-inst__estado{ color:var(--teal-700); }
.ini-inst__nota{ font-size:var(--t-sm); color:var(--c-texto-tenue); }
.ini-inst__ir{ font-size:var(--t-sm); font-weight:var(--w-semi); color:var(--azul-700); }
.ini-inst__ir::after{ content:" →"; }
.ini-inst__comun{
  list-style:none; margin:var(--e-3) 0 0; padding:var(--e-2) var(--e-3); font-size:var(--t-sm);
  color:var(--gris-700); background:var(--amarillo-100);
  border-left:3px solid var(--vino-600); border-radius:var(--r-md);
}

/* --------------------------------------------- la semana de ausencias -- */
/* Más presencia (§3.6): tarjeta con línea vino a la izquierda, título
   grande y casillas altas con letra legible. `.card` recorta lo que se sale,
   y aquí el globo de cada ausencia tiene que poder salir. */
.ini-cal{ overflow:visible; border-left:4px solid var(--vino-600); padding:var(--e-5) var(--e-6); }
.ini-cal__cab{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:var(--e-3); margin-bottom:var(--e-4);
}
.ini-cal__eyebrow{
  margin:0; font-size:var(--t-xs); font-weight:var(--w-semi);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--vino-700);
}
.ini-cal__titulo{ margin:2px 0 0; font-size:var(--t-2xl); font-weight:var(--w-bold); color:var(--azul-950); }
.ini-cal__nav{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.ini-cal__leyenda{ margin:0 0 var(--e-3); font-size:var(--t-sm); }
.ini-cal__muestra{
  display:inline-block; padding:0 6px; font-size:var(--t-2xs); color:var(--gris-700);
  background:var(--blanco); border:1px dashed var(--amarillo-600); border-radius:var(--r-sm);
}
.ini-cal__vacio{ margin:0 0 var(--e-3); color:var(--c-texto-tenue); }
.ini-cal__pie{ margin:var(--e-4) 0 0; font-size:var(--t-sm); }
.ini-cal__pie a{ font-weight:var(--w-semi); }
.ini-cal__pie a::after{ content:" →"; }

.ini-semana{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--e-2);
}
.ini-dia{
  min-width:0; display:flex; flex-direction:column; gap:var(--e-2);
  min-height:136px; padding:var(--e-2) var(--e-2) var(--e-3);
  background:var(--blanco); border:1px solid var(--gris-200); border-radius:var(--r-md);
}
.ini-dia--finde{ background:var(--gris-50); }
.ini-dia--hoy{ border:2px solid var(--azul-900); box-shadow:var(--s-2); }
.ini-dia__cab{
  margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px;
  padding-bottom:var(--e-1); border-bottom:1px solid var(--gris-100);
  font-size:var(--t-sm); font-weight:var(--w-normal);
}
.ini-dia__nombre{
  font-size:var(--t-xs); font-weight:var(--w-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--gris-700);
}
.ini-dia__numero{ font-size:var(--t-xl); font-weight:var(--w-bold); color:var(--azul-950); font-variant-numeric:tabular-nums; }
.ini-dia__mes{ font-size:var(--t-xs); color:var(--c-texto-tenue); }
.ini-dia__hoy{
  margin-left:auto; padding:1px 6px; border-radius:var(--r-sm);
  background:var(--vino-700); color:var(--blanco);
  font-size:var(--t-2xs); font-weight:var(--w-bold); letter-spacing:var(--ls-caps); text-transform:uppercase;
}
.ini-dia__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ini-dia__vacio{ margin:auto 0 0; text-align:center; font-size:var(--t-xs); color:var(--c-texto-tenue); }

/* Cada ausencia entera: sin recorte ni puntos suspensivos, con su letra y
   su color (los de lcr.css para el mes) y el pendiente punteado. */
.ini-ausencia{
  position:relative; display:flex; align-items:flex-start; gap:6px;
  padding:5px 6px; border-radius:var(--r-sm); text-decoration:none;
  font-size:var(--t-sm); line-height:1.3; color:var(--azul-950);
  background:var(--azul-50); box-shadow:inset 3px 0 0 var(--azul-600);
}
.ini-ausencia .calendario__letra{ margin-top:1px; }
.ini-ausencia--vacaciones{ background:var(--teal-50); box-shadow:inset 3px 0 0 var(--teal-600); }
.ini-ausencia--con-goce{ background:var(--azul-50); box-shadow:inset 3px 0 0 var(--azul-700); }
.ini-ausencia--sin-goce{ background:var(--rojo-50); box-shadow:inset 3px 0 0 var(--rojo-600); }
.ini-ausencia--sin-declarar{ background:var(--amarillo-100); box-shadow:inset 3px 0 0 var(--amarillo-600); }
.ini-ausencia--pendiente{ background:var(--blanco); outline:1px dashed var(--amarillo-600); outline-offset:-1px; }
.ini-ausencia:hover,
.ini-ausencia:focus-visible{
  text-decoration:none; color:var(--azul-950);
  box-shadow:inset 3px 0 0 var(--vino-500), 0 0 0 1px var(--vino-300);
}
.ini-ausencia:focus-visible{ outline:2px solid var(--c-vino-relleno); outline-offset:1px; }
.ini-ausencia__texto{ min-width:0; display:flex; flex-direction:column; }
.ini-ausencia__quien{ font-weight:var(--w-semi); overflow-wrap:anywhere; }
.ini-ausencia__que{ font-size:var(--t-xs); color:var(--gris-700); overflow-wrap:anywhere; }
/* El globo con el detalle, como en el mes: al pasar o al enfocar. */
.ini-ausencia:hover .ini-ausencia__globo,
.ini-ausencia:focus .ini-ausencia__globo{ display:block; }
.ini-dia:nth-child(n+6) .ini-ausencia__globo{ left:auto; right:0; }

/* En pantallas estrechas los días se apilan: cada uno en su renglón, con
   la fecha a la izquierda. Nada se encoge ni se corta, y sin globo (el
   dedo no pasa por encima: el enlace abre la solicitud). */
@media (max-width:900px){
  .ini-semana{ grid-template-columns:1fr; }
  .ini-dia{ flex-direction:row; align-items:flex-start; min-height:0; }
  .ini-dia__cab{ flex:0 0 96px; border-bottom:0; border-right:1px solid var(--gris-100); padding:0 var(--e-2) 0 0; }
  .ini-dia__lista{ flex:1; min-width:0; }
  .ini-dia__vacio{ margin:0; text-align:left; align-self:center; }
  .ini-ausencia__globo{ display:none !important; }
}
@media (max-width:680px){ .ini-cal{ padding:var(--e-4); } }

/* ---------------------------------------- historial y detalle plegado -- */
.ini-subtitulo{ margin:var(--e-5) 0 var(--e-2); font-size:var(--t-md); font-weight:var(--w-semi); color:var(--azul-950); }
.card__cuerpo > .ini-subtitulo:first-child,
.desplegable__cuerpo > .ini-subtitulo:first-child{ margin-top:0; }
.ini-advertencia{
  margin:0 0 var(--e-3); padding-left:var(--e-3);
  border-left:3px solid var(--vino-500); font-size:var(--t-sm); color:var(--gris-700);
}
.ini-historial .tabla-env{ margin-bottom:var(--e-2); }
.ini-detalle .tabla-env{ margin-bottom:var(--e-4); }

/* ========================================================== PENDIENTES == */

.pend-vacio{ margin-bottom:var(--e-5); }
.pend-grupos{
  display:grid; gap:var(--e-5); align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
/* Los grupos largos —lo que pide el abogado, los plazos— a lo ancho. */
.pend-grupo--ancho{ grid-column:1 / -1; }
.pend-grupo{
  background:var(--g-suave-azul); border:1px solid var(--gris-200);
  border-top:3px solid var(--vino-500); border-radius:var(--r-lg);
  box-shadow:var(--s-tarjeta); overflow:hidden; scroll-margin-top:var(--e-6);
}
.pend-grupo:target{ box-shadow:0 0 0 2px var(--vino-300), var(--s-tarjeta); }
.pend-grupo__cab{
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-5); border-bottom:1px solid var(--vino-100);
}
.pend-grupo__titulo{
  margin:0; display:flex; align-items:center; gap:10px;
  font-size:var(--t-lg); font-weight:var(--w-semi); color:var(--azul-950);
}
.pend-grupo__titulo::before{
  content:""; flex:none; width:10px; height:10px; border-radius:2px; background:var(--vino-600);
}
.pend-grupo__cuenta{
  margin-left:auto; min-width:26px; padding:1px 8px; text-align:center;
  border-radius:var(--r-full); background:var(--vino-50); color:var(--vino-700);
  box-shadow:inset 0 0 0 1px var(--vino-100);
  font-size:var(--t-xs); font-weight:var(--w-bold); font-variant-numeric:tabular-nums;
}
.pend-grupo__nota{ margin:0; padding:var(--e-2) var(--e-5) 0; font-size:var(--t-sm); color:var(--c-texto-tenue); }
.pend-lista .acciones-lista__it{
  padding:var(--e-3) var(--e-5); border-bottom-color:var(--vino-100);
  transition:background var(--m-rapido) var(--m-curva), box-shadow var(--m-rapido) var(--m-curva);
}
.pend-lista .acciones-lista__it:hover,
.pend-lista .acciones-lista__it:focus-within{
  background:var(--blanco); box-shadow:inset 3px 0 0 var(--vino-500);
}
.pend-lista .acciones-lista__texto{ font-size:var(--t-md); font-weight:var(--w-medio); overflow-wrap:anywhere; }
.pend-lista .acciones-lista__punto{
  box-shadow:0 0 0 4px var(--azul-100), 0 0 8px color-mix(in srgb, var(--azul-500) 40%, transparent);
}
.pend-lista .acciones-lista__it--atencion .acciones-lista__punto{
  box-shadow:0 0 0 4px var(--amarillo-100), 0 0 8px color-mix(in srgb, var(--amarillo-400) 65%, transparent);
}
.pend-lista .acciones-lista__it--peligro .acciones-lista__punto{
  background:var(--vino-500);
  box-shadow:0 0 0 4px var(--vino-100), 0 0 8px color-mix(in srgb, var(--vino-500) 40%, transparent);
}
/* Cuándo vence, como pastilla: azul si llega, vino si ya pasó. */
.pend-lista .acciones-lista__vence{
  padding:2px 9px; border-radius:var(--r-full); white-space:nowrap;
  font-size:var(--t-xs); background:var(--azul-50); color:var(--azul-800);
  box-shadow:inset 0 0 0 1px var(--azul-100);
}
.pend-lista .acciones-lista__vence--tarde{
  background:var(--vino-50); color:var(--vino-700); box-shadow:inset 0 0 0 1px var(--vino-100);
}
.pend-ref{ font-weight:var(--w-semi); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ========================================================== DOCUMENTOS == */

.docs-buscador{
  margin-bottom:var(--e-4); padding:var(--e-4) var(--e-5);
  background:var(--g-suave-azul); border:1px solid var(--gris-200);
  border-top:3px solid var(--vino-500); border-radius:var(--r-lg); box-shadow:var(--s-tarjeta);
}
.docs-buscador__caja{ display:flex; gap:var(--e-2); }
.docs-buscador__q{ flex:1 1 auto; min-width:0; font-size:var(--t-lg); padding:var(--e-3) var(--e-4); }
.docs-filtros{
  display:grid; gap:var(--e-3); align-items:end; margin-top:var(--e-4);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.docs-filtros__campo{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.docs-filtros__campo--fecha{ min-width:150px; }
.docs-filtros__campo label{
  font-size:var(--t-xs); font-weight:var(--w-semi); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--gris-700);
}
.docs-filtros__campo .campo-texto,
.docs-filtros__campo .campo-select{ width:100%; min-width:0; }
.docs-filtros__acciones{ display:flex; align-items:flex-end; }

.docs-activos{ list-style:none; margin:0 0 var(--e-4); padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }
.docs-activos__it{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:var(--r-full); background:var(--vino-50); color:var(--vino-700);
  box-shadow:inset 0 0 0 1px var(--vino-100); font-size:var(--t-sm); font-weight:var(--w-medio);
  text-decoration:none;
}
.docs-activos__it:hover,
.docs-activos__it:focus-visible{ color:var(--vino-800); text-decoration:none; box-shadow:inset 0 0 0 1px var(--vino-500); }
.docs-activos__x{ font-weight:var(--w-bold); }
.docs-activos__todos{ font-size:var(--t-sm); font-weight:var(--w-semi); }
.docs-aviso{ margin-bottom:var(--e-4); }

.docs-resultados{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--e-3); }
.docs-res{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--e-2) var(--e-4);
  padding:var(--e-4) var(--e-5); background:var(--blanco);
  border:1px solid var(--gris-200); border-radius:var(--r-lg); box-shadow:var(--s-tarjeta);
  transition:box-shadow var(--m-rapido) var(--m-curva), background var(--m-rapido) var(--m-curva);
}
.docs-res:hover,
.docs-res:focus-within{ background:var(--g-suave-azul); box-shadow:inset 3px 0 0 var(--vino-500), var(--s-tarjeta); }
.docs-res__cuerpo{ min-width:0; }
.docs-res__linea{ margin:0 0 4px; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); font-size:var(--t-xs); }
.docs-origen{
  padding:1px 7px; border-radius:var(--r-sm); font-size:var(--t-2xs); font-weight:var(--w-bold);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
  background:var(--azul-50); color:var(--azul-800); box-shadow:inset 0 0 0 1px var(--azul-100);
}
.docs-origen--empresa{ background:var(--vino-50); color:var(--vino-700); box-shadow:inset 0 0 0 1px var(--vino-100); }
.docs-origen--normas{ background:var(--teal-50); color:var(--teal-700); box-shadow:inset 0 0 0 1px var(--borde-teal); }
/* El resto de las fuentes del buscador de todo el sistema (18/10/2026,
   noche). La pastilla dice el origen con palabra; el color sólo acompaña. */
.docs-origen--evidencias,
.docs-origen--antecedentes{ background:var(--azul-100); color:var(--azul-900); box-shadow:inset 0 0 0 1px var(--azul-300); }
.docs-origen--cumplimiento,
.docs-origen--prevencion{ background:var(--amarillo-100); color:var(--oro-800); box-shadow:inset 0 0 0 1px var(--amarillo-400); }
.docs-origen--incidentes,
.docs-origen--incapacidades{ background:var(--rojo-50); color:var(--rojo-700); box-shadow:inset 0 0 0 1px var(--borde-rojo); }
.docs-origen--comprobantes,
.docs-origen--ccss,
.docs-origen--liquidaciones{ background:var(--gris-100); color:var(--gris-700); box-shadow:inset 0 0 0 1px var(--gris-300); }
.docs-res__tipo{ font-weight:var(--w-semi); color:var(--gris-600); }
.docs-res__titulo{
  font-size:var(--t-lg); font-weight:var(--w-semi); color:var(--azul-950);
  text-decoration:none; overflow-wrap:anywhere;
}
.docs-res__titulo:hover,
.docs-res__titulo:focus-visible{ color:var(--vino-700); text-decoration:underline; }
.docs-res__meta{ margin:4px 0 0; display:flex; flex-wrap:wrap; gap:2px var(--e-3); font-size:var(--t-sm); color:var(--gris-700); }
.docs-res__meta > span{ overflow-wrap:anywhere; }
.docs-res__meta > span + span::before{ content:"·"; margin-right:var(--e-3); color:var(--gris-400); }
.docs-res__lado{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--e-2); }
.docs-res__lado .chip{ max-width:320px; white-space:normal; }
.docs-res__acciones{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.docs-res__vista{ grid-column:1 / -1; margin-top:0; }
.docs-res__vista > summary{ font-size:var(--t-sm); }
.docs-res__ficha{ margin-top:var(--e-2); font-size:var(--t-sm); }
.docs-vacio{ margin-top:var(--e-2); }

/* La vista previa dentro del sistema (19/10/2026): el archivo incrustado,
   a todo el ancho y con un alto cómodo para leer un PDF sin desplazar la
   página entera; la imagen, sin pasarse del ancho. */
.docs-visor__cab{ margin-bottom:var(--e-4); }
.docs-visor__encabezado{ min-width:0; }
.docs-visor__titulo{ overflow-wrap:anywhere; }
.docs-visor__acciones{ align-items:center; flex-wrap:wrap; }
.docs-visor{
  padding:var(--e-3); background:var(--g-suave-azul);
  border:1px solid var(--gris-200); border-top:3px solid var(--vino-500);
  border-radius:var(--r-lg); box-shadow:var(--s-tarjeta);
}
.docs-visor__marco{
  display:block; width:100%; height:min(80vh, 1100px); min-height:420px;
  border:1px solid var(--gris-300); border-radius:var(--r-md); background:var(--gris-50);
}
.docs-visor__imagen{
  display:block; max-width:100%; height:auto; margin:0 auto;
  border:1px solid var(--gris-200); border-radius:var(--r-md); background:var(--blanco);
}
.docs-visor__respaldo{ margin:var(--e-3) var(--e-1) 0; font-size:var(--t-sm); color:var(--c-texto-tenue); }
@media (max-width:680px){
  .docs-visor{ padding:var(--e-2); }
  .docs-visor__marco{ height:75vh; min-height:320px; }
  .docs-visor__acciones{ margin-left:0; }
}
@media (max-width:680px){
  .docs-buscador{ padding:var(--e-3) var(--e-4); }
  .docs-buscador__caja{ flex-wrap:wrap; }
  .docs-buscador__caja .btn{ width:100%; }
  .docs-res{ grid-template-columns:1fr; padding:var(--e-3) var(--e-4); }
  .docs-res__lado{ align-items:flex-start; }
}

/* ================================================= SELECTOR DE EMPRESA ==
 * Instrucción consolidada del 22/10/2026, §1.1: el botón de la barra
 * superior con el nombre de la empresa es el desplegable único para
 * elegirla. Va aquí porque esta hoja se carga en todas las pantallas. Es un
 * <details> sin guiones: la pastilla es .empresa-sel (lcr.css) y la lista se
 * abre encima del lienzo, sin empujar la barra. Prefijo selector-empresa-
 * para no tocar las clases de otro grupo.
 */
.selector-empresa{ position:relative; min-width:0; }
.selector-empresa > summary{ list-style:none; user-select:none; }
.selector-empresa > summary::-webkit-details-marker{ display:none; }
.selector-empresa > summary::after{
  content:""; flex-shrink:0; width:7px; height:7px; margin:0 var(--e-1) 3px var(--e-1);
  border-right:2px solid var(--azul-700); border-bottom:2px solid var(--azul-700);
  transform:rotate(45deg); transition:transform var(--m-rapido) var(--m-curva);
}
.selector-empresa[open] > summary::after{ transform:rotate(225deg); margin-bottom:-3px; }
.selector-empresa[open] > summary{ border-color:var(--vino-500); }
.selector-empresa > summary:focus-visible{ outline:2px solid var(--c-vino-relleno); outline-offset:2px; }
.selector-empresa__sin{ background:var(--gris-300); color:var(--azul-950); }
.selector-empresa__lista{
  position:absolute; top:calc(100% + var(--e-2)); left:0; z-index:var(--z-tooltip);
  min-width:260px; max-width:min(380px, calc(100vw - 2 * var(--e-4)));
  max-height:min(60vh, 520px); overflow-y:auto; margin:0; padding:var(--e-2);
  background:var(--c-superficie); border:1px solid var(--gris-200);
  border-top:3px solid var(--vino-500); border-radius:var(--r-lg);
  box-shadow:var(--sombra-alzada);
}
.selector-empresa__titulo{
  margin:0; padding:var(--e-1) var(--e-3) var(--e-2);
  font-size:var(--t-xs); font-weight:var(--w-semi); color:var(--gris-600);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
}
.selector-empresa__op{
  display:flex; align-items:center; gap:var(--e-2); width:100%;
  padding:var(--e-2) var(--e-3); border:0; border-radius:var(--r-md);
  background:transparent; color:var(--azul-950); font:inherit;
  font-size:var(--t-sm); text-align:left; cursor:pointer;
  transition:background var(--m-rapido) var(--m-curva),
             box-shadow var(--m-rapido) var(--m-curva);
}
.selector-empresa__op .empresa-sel__nombre{ font-weight:var(--w-normal); white-space:normal; }
.selector-empresa__op:hover,
.selector-empresa__op:focus-visible{ background:var(--azul-50); box-shadow:inset 3px 0 0 var(--vino-500); outline:none; }
.selector-empresa__op[aria-current="true"]{ background:var(--azul-50); }
.selector-empresa__op[aria-current="true"] .empresa-sel__nombre{ font-weight:var(--w-semi); }
.selector-empresa__op[aria-current="true"]::after{
  content:"Elegida"; margin-left:auto; padding-left:var(--e-2);
  font-size:var(--t-2xs); font-weight:var(--w-semi); color:var(--vino-700);
}
.selector-empresa__op--cartera{
  margin-top:var(--e-1); border-top:1px solid var(--gris-200);
  border-radius:0 0 var(--r-md) var(--r-md); color:var(--azul-800);
}
@media (max-width:680px){
  .selector-empresa__lista{ min-width:0; width:calc(100vw - 2 * var(--e-4)); }
}