/* Nómina y planilla (§8).
 *
 * 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-*).
 *
 * Lo propio de estas pantallas: la barra de acciones de nómina, el resumen de
 * la planilla con lo que además paga la empresa, las dos secciones de la
 * preparación del mes (CCSS primero, INS después) y unos ajustes de densidad.
 * Lo demás —tarjetas, indicadores, desplegables, recorrido, bandas— es de la
 * base común.
 */

/* --------------------------------------------------------- barra de nómina --
   «Abrir el período», «Ver períodos», «Reportes y exportaciones» y, a la
   derecha, «Preparar el mes para la CCSS y el INS» (§8.2). Sólo una destaca:
   la plantilla decide cuál lleva .btn--pral. */
.nomina-barra{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2);
  margin-bottom:var(--e-5);
}
.nomina-barra__der{ margin-left:auto; }
@media (max-width:680px){
  .nomina-barra__der{ margin-left:0; }
  .nomina-barra .btn{ white-space:normal; text-align:center; }
}

/* «Abrir el período» despliega su formulario sin guion: <details> con el
   botón por resumen y el formulario en una caja que flota bajo la barra. */
.nomina-barra__abrir{ position:relative; }
.nomina-barra__abrir > summary{ list-style:none; cursor:pointer; }
.nomina-barra__abrir > summary::-webkit-details-marker{ display:none; }
.nomina-barra__abrir > summary::after{
  content:""; width:7px; height:7px; margin-left:var(--e-1);
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--m-rapido) var(--m-curva);
}
.nomina-barra__abrir[open] > summary::after{ transform:rotate(225deg) translateY(-2px); }
.nomina-barra__panel{
  position:absolute; top:calc(100% + var(--e-2)); left:0; z-index:20;
  width:min(34rem, calc(100vw - 32px));
  padding:var(--e-4) var(--e-5);
  background:var(--blanco); border:1px solid var(--gris-200);
  border-top:3px solid var(--c-vino-linea); border-radius:var(--r-lg);
  box-shadow:var(--s-4);
}
.nomina-barra__panel .btn{ margin-top:var(--e-3); }
@media (prefers-reduced-motion: reduce){
  .nomina-barra__abrir > summary::after{ transition:none; }
}
@media print{ .nomina-barra{ display:none; } }

/* Cabeceras con acciones a la derecha: en el teléfono las acciones bajan y
   se reparten, sin desbordar la página. */
@media (max-width:680px){
  .nomina-cab .pagina-cab__acciones{ margin-left:0; flex-wrap:wrap; flex-shrink:1; }
  .nomina-cab .pagina-cab__acciones .btn{ white-space:normal; }
}
.nomina-cab .volver{ margin-top:var(--e-2); }
.nomina-enlaces{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-5);
  margin-top:var(--e-2);
}

/* ------------------------------------------------------- preparar el pago -- */
.nomina-faltante{ margin-bottom:var(--e-4); }
.nomina-faltante .banda__texto{ color:var(--azul-950); }
.nomina-faltante a{ font-weight:var(--w-semi); margin-left:var(--e-2); }

.nomina-preparar{ margin-bottom:var(--e-5); }
.nomina-preparar .card__cab{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3); }
.nomina-indicadores{ margin-bottom:var(--e-4); box-shadow:none; }
.nomina-indicadores .indicadores__cifra{ font-size:var(--t-xl); }
.nomina-indicadores .indicadores__et{ text-transform:uppercase; letter-spacing:var(--ls-eyebrow); font-size:var(--t-2xs); }
.nomina-subtitulo{
  font-size:var(--t-md); font-weight:var(--w-semi); color:var(--azul-950);
  margin:var(--e-4) 0 var(--e-2);
}
.nomina-causa{ margin-top:var(--e-2); }

/* El recorrido del mes: una línea con sus etapas, y en el teléfono una debajo
   de otra. Los enlaces conservan el color del estado del paso. */
.nomina-pasos{ margin-bottom:var(--e-5); }
.nomina-recorrido{ margin:0; row-gap:var(--e-2); }
.nomina-recorrido .recorrido__paso a{ color:inherit; text-decoration:none; }
.nomina-recorrido .recorrido__paso a:hover,
.nomina-recorrido .recorrido__paso a:focus-visible{ color:var(--c-vino); box-shadow:inset 0 -2px 0 var(--c-vino-linea); }
.nomina-recorrido .recorrido__paso--hecho a{ color:var(--teal-700); }
@media (max-width:680px){
  .nomina-recorrido{ flex-direction:column; align-items:flex-start; }
  .nomina-recorrido .recorrido__paso::after{ display:none; }
}

/* Los seis pasos de UNA planilla (22/10/2026, §3.2): cada paso con su acción
   o lo que falta debajo, en una línea. Tres columnas en pantalla ancha, dos
   en tableta y una en el teléfono; sin las rayas entre pasos. */
.nomina-recorrido--notas{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--e-3) var(--e-5);
}
.nomina-recorrido--notas .recorrido__paso{ align-items:flex-start; padding:0; min-width:0; }
.nomina-recorrido--notas .recorrido__paso::after{ display:none; }
.nomina-recorrido__texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.nomina-recorrido__nota{ font-size:var(--t-xs); font-weight:var(--w-normal); color:var(--gris-600); }
.nomina-recorrido__extra{ font-size:var(--t-xs); font-weight:var(--w-semi); }
@media (max-width:900px){
  .nomina-recorrido--notas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:680px){
  .nomina-recorrido--notas{ grid-template-columns:1fr; }
}

/* La planilla en pantalla en la entrada, y el cambio a otra (§3.1). */
.nomina-en-pantalla{ margin:0 0 var(--e-3); }
.nomina-en-pantalla a{ font-weight:var(--w-semi); }
.nomina-otras{ margin-top:var(--e-3); }

/* Continuar después de aprobar (§3.3 y §3.4): comprobantes, CCSS e INS, cada
   uno con su estado breve y su botón. */
.nomina-continuar{ margin-bottom:var(--e-5); }
.nomina-continuar__lista{ list-style:none; margin:var(--e-2) 0 0; padding:0; }
.nomina-continuar__lista > li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e-1) var(--e-3);
  padding:var(--e-3) 0; border-top:1px solid var(--gris-200);
}
.nomina-continuar__lista > li > strong{ color:var(--azul-950); min-width:9rem; }
.nomina-continuar__lista > li > .tenue{ flex:1 1 18rem; }
.nomina-continuar__lista .faltantes{ flex-basis:100%; }

/* La preparación del mes vista desde una planilla, y sus problemas
   agrupados con las personas afectadas (§3.4 y §3.6). */
.nomina-desde-planilla{ margin-top:var(--e-2); }
.nomina-problemas{ margin-bottom:var(--e-3); }
.nomina-problemas__accion{ margin-left:var(--e-2); white-space:nowrap; }

.nomina-periodos{ margin-bottom:var(--e-3); }
.nomina-periodos .desplegable__cuerpo{ padding:0; }
.nomina-periodos .tabla-env{ border:0; box-shadow:none; border-radius:0 0 var(--r-lg) var(--r-lg); }

/* ------------------------------------------------------------ la planilla --
   El resumen arriba (§8.4): lo del personal en una caja de cifras y, aparte,
   lo que además paga la empresa. Las cifras en colones son largas: un punto
   menos de tamaño que en los indicadores de las demás pantallas. */
.nomina-resumen{
  display:grid; grid-template-columns:minmax(0, 2fr) minmax(16rem, 1fr);
  gap:var(--e-4); align-items:stretch; margin-bottom:var(--e-4);
}
.nomina-resumen__personal .indicadores__cifra{ font-size:var(--t-xl); }
.nomina-resumen__empresa{ margin:0; }
.nomina-resumen__empresa .card__cuerpo{ padding:var(--e-4) var(--e-5); }
.nomina-resumen__empresa .nomina-subtitulo{ margin-top:0; }
.nomina-resumen__empresa .datos-lista dd{ text-align:right; }
.nomina-resumen__empresa .tenue{ margin-top:var(--e-2); font-size:var(--t-sm); }
@media (max-width:900px){
  .nomina-resumen{ grid-template-columns:1fr; }
}
.nomina-informe{ margin:0 0 var(--e-4); font-size:var(--t-sm); }
.nomina-informe a{ font-weight:var(--w-semi); }

.nomina-filtro{ margin-bottom:var(--e-3); }
.nomina-filtro__q{ max-width:16rem; }

/* El comprobante, más compacto (§8.4): la cabecera ocupa menos y los datos
   de la persona y del patrono van más juntos. La hoja es la misma en la
   pantalla, en la vista previa y en la app; aquí sólo cambia el aire. */
.comprobante .comprobante__cab{ padding-bottom:var(--e-2); margin-bottom:var(--e-3); }
.comprobante .comprobante__centro{ font-size:var(--t-sm); color:var(--c-texto-medio); }
.comprobante .comprobante__titulo{ font-size:var(--t-lg); color:var(--azul-950); }
.comprobante .comprobante__partes{ margin-bottom:var(--e-3); }
@media (max-width:680px){
  .comprobante .comprobante__partes{ grid-template-columns:1fr; gap:var(--e-3); }
}

/* --------------------------------------------- el mes, CCSS primero, INS -- */
.nomina-por-resolver{ margin:var(--e-1) 0 0; padding-left:var(--e-5); }
.nomina-por-resolver li + li{ margin-top:var(--e-1); }

.nomina-institucion{ margin:var(--e-6) 0 var(--e-4); }
.nomina-institucion__titulo{
  display:flex; align-items:center; gap:var(--e-3);
  font-size:var(--t-xl); font-weight:var(--w-bold); color:var(--azul-950);
  margin:0 0 var(--e-3); letter-spacing:.02em;
}
.nomina-institucion__titulo::after{
  content:""; flex:1; height:1px; background:var(--gris-200);
}
.nomina-institucion .card__cab{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3); }
.nomina-institucion .card__acciones{ flex-wrap:wrap; }
.nomina-institucion .desplegable--caja{ margin-top:var(--e-4); }
.nomina-plazo{ margin:var(--e-2) 0; }

.nomina-csv{ margin-top:var(--e-4); }