/* Intranet de Remuneraciones C y A — estilos (paleta y medidas de la maqueta, sección 9). */

:root {
  --navy: #14233A;
  --navy-activo: #28406A;
  --menu-texto: #D5DDEA;
  --menu-tenue: #8FA0B8;
  --menu-sub: #A9B7CC;
  --fondo: #F3F5F8;
  --tarjeta: #FFFFFF;
  --borde: #DDE2EA;
  --borde-suave: #E8ECF2;
  --borde-campo: #BFC7D4;
  --texto: #1B2430;
  --texto-2: #2B3544;
  --tenue: #5B6676;
  --primario: #1C5AA6;
  --primario-oscuro: #164A8A;
  --foco: #1C5AA6;
  --ok-fondo: #E1F0E7;      --ok-texto: #14633C;
  --atencion-fondo: #FFF0CF; --atencion-texto: #7A4E00;
  --problema-fondo: #FBE4E1; --problema-texto: #9F1F17;
  --info-fondo: #E4ECF8;    --info-texto: #1B4378;
  --neutro-fondo: #ECEEF2;  --neutro-texto: #4A5565;
  --radio: 12px;
  --radio-campo: 8px;
  --tactil: 44px;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); min-height: 100vh; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; font-weight: 600; line-height: 1.15; }
h2 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
h3 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
a { color: var(--primario); }
a:hover { opacity: .85; }
code { font-size: 13px; background: var(--neutro-fondo); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.oculto { display: none; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 50; background: #fff; padding: 10px 14px; border-radius: 8px; }
.saltar:focus { left: 8px; }
.tenue { color: var(--tenue); }
.mini { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icono-chico { width: 15px; height: 15px; vertical-align: -2px; }
.icono-grande { width: 44px; height: 44px; color: var(--tenue); }

/* --- Marco: menú lateral + contenido ------------------------------------- */
.marco { display: flex; min-height: 100vh; }
.menu {
  flex: 0 0 244px; background: var(--navy); padding: 24px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.menu-marca { display: flex; flex-direction: column; padding: 0 12px 20px; text-decoration: none; }
.menu-marca-nombre { font-size: 18px; font-weight: 600; color: #fff; }
.menu-marca-sub { font-size: 12px; color: var(--menu-sub); margin-top: 2px; }
.menu-grupo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--menu-tenue); padding: 14px 12px 6px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; min-height: var(--tactil); padding: 0 12px; border-radius: 8px;
  color: var(--menu-texto); font-size: 14px; text-decoration: none;
}
.menu-item .icono { width: 18px; height: 18px; opacity: .8; }
.menu-item:hover { background: rgba(255, 255, 255, .06); opacity: 1; }
.menu-item.activo { background: var(--navy-activo); color: #fff; font-weight: 500; }
.menu-item.pendiente { color: var(--menu-tenue); }
.menu-hito { margin-left: auto; font-size: 10px; letter-spacing: .03em; color: var(--menu-tenue); border: 1px solid #33496B; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.menu-pie { margin-top: auto; padding: 20px 12px 0; font-size: 12px; color: var(--menu-sub); display: flex; flex-direction: column; gap: 2px; }
.menu-salir { margin-top: 8px; background: none; border: 1px solid #33496B; color: var(--menu-texto); border-radius: 8px; min-height: 36px; padding: 0 12px; font: inherit; cursor: pointer; }
.menu-salir:hover { background: rgba(255, 255, 255, .06); }

.principal { flex: 1 1 auto; min-width: 0; }
.contenido { padding: 28px 32px 40px; max-width: 1400px; }
.cabecera { margin-bottom: 20px; }
.cabecera-grupo { font-size: 13px; color: var(--tenue); margin-bottom: 4px; }
.barra-movil { display: none; }
.velo { display: none; }

/* --- Tarjetas, avisos y chips ---------------------------------------------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-bottom: 20px; min-width: 0; }
.nota { font-size: 14px; color: var(--texto-2); margin-bottom: 16px; max-width: 75ch; }
.vacio { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vacio p { max-width: 60ch; }
.aviso { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.aviso-atencion { background: var(--atencion-fondo); color: var(--atencion-texto); }
.aviso-problema { background: var(--problema-fondo); color: var(--problema-texto); }
.aviso p + * { margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.chip-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.chip-atencion { background: var(--atencion-fondo); color: var(--atencion-texto); }
.chip-problema { background: var(--problema-fondo); color: var(--problema-texto); }
.chip-info { background: var(--info-fondo); color: var(--info-texto); }
.chip-neutro { background: var(--neutro-fondo); color: var(--neutro-texto); }
.chip-activo { background: var(--primario); color: #fff; }
a.chip { min-height: 32px; padding: 6px 12px; }

/* --- Botones ----------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tactil); padding: 0 18px;
  border-radius: var(--radio-campo); border: 1px solid var(--borde-campo); background: #fff; color: var(--texto);
  font: 500 14px "IBM Plex Sans", system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.boton:hover { opacity: 1; background: #F6F8FB; }
.boton-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.boton-primario:hover { background: var(--primario-oscuro); }
.boton-texto { border-color: transparent; background: none; color: var(--primario); padding: 0 10px; }
.boton-texto:hover { background: var(--info-fondo); }
.boton-peligro { color: var(--problema-texto); }
.boton-peligro:hover { background: var(--problema-fondo); }
.boton-ancho { width: 100%; }
.boton-icono { display: inline-flex; align-items: center; justify-content: center; width: var(--tactil); height: var(--tactil); border-radius: var(--radio-campo); border: 1px solid var(--borde-campo); background: #fff; color: var(--texto); cursor: pointer; }

/* --- Formularios --------------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: 14px; }
.formulario-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; align-items: start; }
.formulario-grilla h2 { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
.formulario-grilla h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.formulario-linea { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; flex-direction: row; }
.formulario-titulo { flex: 1 0 100%; font-weight: 600; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tenue); min-width: 0; }
.formulario-linea .campo { flex: 1 1 180px; }
.formulario-linea .campo-ancho { flex: 2 1 320px; }
.formulario-grilla .campo-ancho { grid-column: 1 / -1; }
.campo > span:first-child { font-weight: 500; color: var(--texto-2); }
input, select, textarea {
  width: 100%; min-height: var(--tactil); padding: 0 12px; border-radius: var(--radio-campo); border: 1px solid var(--borde-campo);
  font: 400 14px "IBM Plex Sans", system-ui, sans-serif; color: var(--texto); background: #fff;
}
textarea { padding: 10px 12px; min-height: 80px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 20px; min-height: 20px; height: 20px; margin: 0; accent-color: var(--primario); }
.con-error input, .con-error select { border-color: var(--problema-texto); }
.error { color: var(--problema-texto); font-size: 13px; }
.ayuda { color: var(--tenue); font-size: 12px; }
.casilla { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tactil); font-size: 14px; color: var(--texto); cursor: pointer; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.en-linea { display: inline-flex; gap: 8px; align-items: center; }
.en-linea input { min-width: 0; }

/* --- Tablas ---------------------------------------------------------------- */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
.tabla thead th { font-size: 12px; font-weight: 500; color: var(--tenue); border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla tbody th { font-weight: 500; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla-compacta th, .tabla-compacta td { padding: 7px 10px; font-size: 13px; }
.tabla-parametros td:nth-child(3) { color: var(--texto-2); font-size: 13px; max-width: 360px; }
.fila-verificada { background: #FAFDFB; }
.fila-edicion > td { background: #F8FAFC; }
.nota-celda { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--atencion-texto); }
.acciones-celda { text-align: right; white-space: nowrap; }
.tabla-parametros td .mini { display: block; }

/* --- Parámetros ------------------------------------------------------------- */
.cabecera-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.selector-periodo { display: flex; flex-wrap: wrap; gap: 8px; }
.resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.resumen-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 320px; font-size: 14px; }
.barra-progreso { flex: 1 1 200px; height: 8px; background: #E5E9F0; border-radius: 999px; overflow: hidden; }
.barra-progreso-relleno { display: block; height: 100%; background: var(--primario); border-radius: 999px; }
/* Anchos por pasos de 5 % (sin estilos en línea, por la política de contenido). */
.ancho-0 { width: 0; } .ancho-5 { width: 5%; } .ancho-10 { width: 10%; } .ancho-15 { width: 15%; } .ancho-20 { width: 20%; }
.ancho-25 { width: 25%; } .ancho-30 { width: 30%; } .ancho-35 { width: 35%; } .ancho-40 { width: 40%; } .ancho-45 { width: 45%; }
.ancho-50 { width: 50%; } .ancho-55 { width: 55%; } .ancho-60 { width: 60%; } .ancho-65 { width: 65%; } .ancho-70 { width: 70%; }
.ancho-75 { width: 75%; } .ancho-80 { width: 80%; } .ancho-85 { width: 85%; } .ancho-90 { width: 90%; } .ancho-95 { width: 95%; } .ancho-100 { width: 100%; }

/* --- Inicio (provisorio) ------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; color: var(--texto); text-decoration: none; align-items: flex-start; }
.kpi-etiqueta { font-size: 13px; color: var(--tenue); }
.kpi-valor { font-size: 26px; font-weight: 600; }
.lista-alertas { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.lista-alertas a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--texto); text-decoration: none; }
.ficha-alertas { flex-direction: row; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde-suave); }

/* --- Trabajadores: buscador + ficha -------------------------------------------- */
.dos-columnas { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.buscador { flex: 1 1 300px; max-width: 420px; padding: 16px; position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.buscador form { display: flex; flex-direction: column; gap: 8px; }
.columna-detalle { flex: 2 1 560px; min-width: 0; }
.chips-filtro { border: 0; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opcion { position: relative; }
.chip-opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-opcion span { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--neutro-fondo); color: var(--neutro-texto); }
.chip-opcion input:checked + span { background: var(--primario); color: #fff; }
.chip-opcion input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.lista-personas { overflow-y: auto; margin: 8px -6px 0; padding: 0 6px; }
.lista-personas ul { list-style: none; padding: 0; margin: 0; }
.lista-total { font-size: 12px; margin: 4px 0; }
.persona { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border-radius: 8px; margin-top: 2px; border: 1px solid transparent; color: var(--texto); text-decoration: none; }
.persona:hover { background: #F6F8FB; opacity: 1; }
.persona.elegida { background: var(--info-fondo); border-color: var(--primario); color: #10315C; }
.persona-nombre { font-size: 14px; font-weight: 500; line-height: 1.3; }
.persona-detalle { grid-column: 1; font-size: 12px; color: var(--tenue); }
.persona.elegida .persona-detalle { color: #2B4468; }
.persona-alerta { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--problema-fondo); color: var(--problema-texto); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.vacio-lista { padding: 12px; }
.ficha-cabecera { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.ficha-nombre { font-size: 22px; margin: 0; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 20px; margin: 10px 0 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 12px; color: var(--tenue); }
.datos dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.dato-ancho { grid-column: 1 / -1; }
.texto-exacto { white-space: pre-wrap; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
.bloque { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.bloque-cabecera { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.bloque-cabecera h3 { margin: 0; }
.bloque-cabecera .chips { margin-top: 0; }
.carpetas { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.carpeta-item { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 14px 16px; }
.carpeta-cabecera { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.carpeta-nombre { font-size: 15px; font-weight: 600; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 0 0; margin-top: 10px; border-top: 1px dashed var(--borde); font-size: 14px; color: var(--neutro-texto); }
.obras .bloque { margin-top: 12px; }
.obras .checklist li { justify-content: flex-start; }
.agregar { margin-top: 12px; }
.detalle-editar { margin-top: 12px; font-size: 14px; }
.detalle-editar summary { cursor: pointer; color: var(--primario); min-height: 32px; display: flex; align-items: center; }
.detalle-editar form { margin-top: 10px; }
.filtros { align-items: flex-end; }
.paginacion { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* --- Inicio de sesión --------------------------------------------------------- */
.sin-sesion { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; }
.login { width: 100%; max-width: 400px; }
.login-marca { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.login-marca h1 { font-size: 24px; }
.logo-caja { display: inline-flex; background: #fff; border-radius: 16px; padding: 10px; border: 1px solid var(--borde); }
.logo-caja img { display: block; width: 72px; height: auto; }

/* --- Celular -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .menu { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  .menu.abierto { transform: none; }
  .velo:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(20, 35, 58, .45); z-index: 30; }
  .barra-movil { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; }
  .barra-movil .boton-icono { background: transparent; color: #fff; border-color: #33496B; }
  .barra-movil-titulo { font-weight: 600; }
  .contenido { padding: 20px 16px 32px; }
  h1 { font-size: 24px; }
  .buscador { position: static; max-width: none; max-height: none; }
  .lista-personas { max-height: 50vh; }
  .tabla-parametros thead { display: none; }
  .tabla-parametros tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--borde-suave); }
  .tabla-parametros th, .tabla-parametros td { border: 0; padding: 0; }
  .tabla-parametros td:nth-child(3) { grid-column: 1 / -1; max-width: none; }
  .tabla-parametros .fila-edicion td { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Columnas fijas en parámetros: no saltan al marcar o editar una fila. */
@media (min-width: 901px) {
  .tabla-parametros { table-layout: fixed; }
  .tabla-parametros th:nth-child(1) { width: 30%; }
  .tabla-parametros th:nth-child(2) { width: 13%; }
  .tabla-parametros th:nth-child(3) { width: 31%; }
  .tabla-parametros th:nth-child(4) { width: 16%; }
  .tabla-parametros th:nth-child(5) { width: 10%; }
}

/* --- Cargas -------------------------------------------------------------------- */
.columna-principal { flex: 2 1 520px; min-width: 0; }
.columna-lateral { flex: 1 1 300px; min-width: 0; }
.tipos-carga { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tipos-carga legend { font-size: 13px; font-weight: 500; color: var(--texto-2); margin-bottom: 8px; }
.tipo-carga { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--borde-campo); border-radius: 10px; cursor: pointer; min-height: var(--tactil); }
.tipo-carga input { position: absolute; opacity: 0; }
.tipo-carga:has(input:checked) { border-color: var(--primario); background: var(--info-fondo); }
.tipo-carga:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.tipo-carga.deshabilitado { opacity: .55; cursor: not-allowed; }
.tipo-carga-nombre { font-weight: 600; font-size: 14px; }
.tipo-carga-ayuda { font-size: 12px; color: var(--tenue); }
.zona-archivo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 2px dashed #AEB9CB; border-radius: 12px; padding: 26px 20px; background: #F8FAFC; cursor: pointer; }
.zona-archivo.arrastrando, .zona-archivo:focus-within { border-color: var(--primario); background: var(--info-fondo); }
.zona-archivo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.zona-archivo-texto { font-size: 14px; color: var(--texto-2); font-weight: 500; }
.reglas { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--texto-2); }
.estados-carga { margin-top: 14px; }
.fila-ignorada { opacity: .55; }
.aviso-linea { color: var(--atencion-texto); }
.lista-simple { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.lista-simple li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra-aplicar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; position: sticky; bottom: 12px; box-shadow: 0 4px 16px rgba(20, 35, 58, .12); }
.eleccion { border: 0; padding: 0; margin: 0; gap: 12px; }
.tabla-personas-carga td:nth-child(2) { min-width: 220px; }

/* --- Asistencia ------------------------------------------------------------------ */
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 0; font-size: 12px; color: var(--tenue); }
.leyenda li { display: inline-flex; align-items: center; gap: 4px; }
.celda-muestra { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--neutro-fondo); color: var(--neutro-texto); }
.grilla-envoltura { margin-top: 12px; }
.grilla { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.grilla th, .grilla td { padding: 2px; text-align: center; border-bottom: 1px solid var(--borde-suave); }
.grilla thead th { font-weight: 500; color: var(--tenue); vertical-align: bottom; padding: 4px 2px; }
.grilla thead th span { display: block; line-height: 1.2; }
.grilla-letra { font-size: 10px; }
.grilla-feriado { font-size: 9px; color: var(--atencion-texto); font-weight: 600; }
.grilla .fin-semana { background: #EEF1F5; }
.grilla th.feriado, .grilla td.feriado { background: #FFF6E0; }
.grilla .no-paga { color: #A0A8B5; }
.grilla .num { text-align: right; padding: 2px 8px; white-space: nowrap; font-size: 13px; }
.grilla-nombre { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left !important; min-width: 200px; max-width: 240px; padding: 6px 10px 6px 4px !important; font-weight: 500; }
.grilla-nombre a { color: var(--texto); text-decoration: none; display: block; font-size: 13px; }
.grilla-nombre .mini { display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celda { width: 34px; min-height: 34px; height: 34px; border-radius: 6px; border: 1px solid transparent; background: transparent; font: 600 12px "IBM Plex Sans", system-ui, sans-serif; color: var(--texto); cursor: pointer; padding: 0; position: relative; }
.celda:hover { border-color: var(--primario); }
.celda sup { font-size: 9px; color: var(--primario); font-weight: 600; margin-left: 1px; }
.c-X, .celda-muestra.c-X { background: var(--ok-fondo); color: var(--ok-texto); }
.c-FS, .celda-muestra.c-FS, .c-FE, .celda-muestra.c-FE { background: #E8F3EC; color: #2F6B4A; }
.c-M, .celda-muestra.c-M { background: #EAF2E0; color: #45612B; }
.c-F, .celda-muestra.c-F, .c-PE, .celda-muestra.c-PE { background: var(--problema-fondo); color: var(--problema-texto); }
.c-LI, .celda-muestra.c-LI { background: var(--info-fondo); color: var(--info-texto); }
.c-T, .celda-muestra.c-T { background: var(--neutro-fondo); color: var(--neutro-texto); }
.celda-confirmar { box-shadow: inset 0 0 0 2px #E0A82E; }
.celda-muestra.celda-confirmar { background: var(--atencion-fondo); color: var(--atencion-texto); box-shadow: none; }
.celda-resolver, .celda-muestra.celda-resolver { background: var(--atencion-fondo); color: var(--problema-texto); border: 1px dashed var(--problema-texto); }
.celda-manual::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--primario); }
.celda-muestra.celda-manual { position: relative; }
.celda-muestra.celda-manual::after { content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--primario); }
.celda-ya-no { opacity: .55; border: 1px dashed var(--tenue); }
.total-raro { color: var(--atencion-texto); font-weight: 600; }
.editor-celda:empty { display: none; }
.editor-caja { border: 1px solid var(--primario); background: #F7FAFE; border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.editor-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.editor-celda .aviso-ok { margin-top: 12px; }
.bono-form { flex-wrap: wrap; }
.bono-form select { width: auto; }
.campo-monto { width: 120px; }
.bono-form input[name=motivo] { width: 200px; }
.nota-supervisor { font-style: italic; }
.grilla .grilla-total { background: #F7F9FC; border-left: 1px solid var(--borde-suave); }
/* El editor de días queda visible al bajar por la grilla. */
.editor-celda { position: sticky; top: 12px; z-index: 5; }
.editor-celda .editor-caja { box-shadow: 0 6px 20px rgba(20, 35, 58, .15); }

/* --- Liquidaciones -------------------------------------------------------------- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.pestana { display: inline-flex; align-items: center; min-height: var(--tactil); padding: 0 20px; border-radius: 10px 10px 0 0; color: var(--texto-2); text-decoration: none; font-weight: 500; border: 1px solid transparent; border-bottom: 0; }
.pestana.activa { background: #fff; border-color: var(--borde); color: var(--primario); margin-bottom: -1px; }
.seccion-liq h2 { font-size: 15px; }
.tabla-liq { font-size: 12px; }
.tabla-liq th, .tabla-liq td { padding: 6px 7px; white-space: nowrap; }
.tabla-liq .col-nombre { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 220px; white-space: normal; }
.tabla-liq .col-nombre a { color: var(--texto); text-decoration: none; font-weight: 500; }
.tabla-liq .col-nombre a:hover { color: var(--primario); text-decoration: underline; }
.tabla-liq tfoot td, .tabla-liq tfoot th { font-weight: 600; border-top: 2px solid var(--borde); background: #F7F9FC; }
.tabla-liq tfoot .col-nombre { background: #F7F9FC; }
.tabla-liq .col-libro { background: #FAFBFD; color: var(--texto-2); }
.tabla-liq .obs-liq { white-space: normal; min-width: 220px; }
.tabla-liq .obs-liq .chip { margin: 1px 2px 1px 0; }
.retiro td, .retiro th, .retiro th a, .retiro { color: #C0261B !important; }
.leyenda-liq .retiro { font-weight: 600; }
.valor-manual { background: var(--atencion-fondo) !important; }
.valor-libro { text-decoration: underline dotted #8FA0B8; text-underline-offset: 3px; }
.texto-problema { color: var(--problema-texto); }
.texto-atencion { color: var(--atencion-texto); }
.total-pagado th, .total-pagado td { border-top: 0 !important; background: #fff !important; }
.dif-dato { display: inline-block; margin-right: 10px; }
.fila-total th, .fila-total td { font-weight: 600; border-top: 1px solid var(--borde); }
.calculo-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 24px; }
.calculo-grilla caption { text-align: left; font-weight: 600; font-size: 14px; padding-bottom: 6px; }
.volver-fuente { margin-top: 6px; }

/* --- Carga a Nubox y cuadratura --------------------------------------------------- */
.tarjeta-destacada { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario) inset; }
.rejilla-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.fila-grupo th { background: #F7F9FC; font-weight: 600; text-align: left; }
.lista-controles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.control { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; }
.control-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.control p { margin: 6px 0 0; }
.control .lista-simple { margin: 6px 0 0; }
.condiciones { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.condiciones li { display: flex; gap: 10px; align-items: flex-start; color: var(--atencion-texto); }
.condiciones li.cumplida { color: var(--ok-texto); }
.condiciones li div { color: var(--texto); }
.condiciones .icono { flex: none; margin-top: 2px; }

/* --- Panel del cierre -------------------------------------------------------------- */
.pasos-cierre { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paso-cierre { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.paso-numero { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--neutro-fondo); color: var(--neutro-texto); }
.paso-listo .paso-numero { background: var(--ok-fondo); color: var(--ok-texto); }
.paso-alerta .paso-numero { background: var(--atencion-fondo); color: var(--atencion-texto); }
.paso-problema .paso-numero { background: var(--problema-fondo); color: var(--problema-texto); }
.paso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-archivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-archivos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista-archivos li:last-child { border-bottom: 0; }
@media (max-width: 640px) {
  .paso-cierre { grid-template-columns: 32px 1fr; }
  .paso-cierre .chip, .paso-cierre .boton, .paso-cierre > span:last-child { grid-column: 2; justify-self: start; }
}
.boton-chico { padding: 0 14px; font-size: 13px; }

/* --- Contratos, finiquitos y carpetas (hito 7) ----------------------------------------- */
.sin-margen { margin: 0; }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pildora { display: inline-flex; align-items: center; min-height: var(--tactil); padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; background: #fff; color: var(--texto-2); border: 1px solid #CBD3DF; }
.pildora.activa { background: var(--primario); border-color: var(--primario); color: #fff; }
.columna-principal { flex: 2 1 600px; min-width: 0; }
.columna-lateral { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.columna-lateral .tarjeta { margin-bottom: 0; }
.bloque-linea { display: block; margin-top: 2px; }
.fila-secundaria td { border-top: 0 !important; padding-top: 0 !important; }
.fila-secundaria .detalle-editar { margin-top: 0; }
.reglas { list-style: none; margin: 8px 0 0; padding: 0; }
.reglas li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--borde-suave); font-size: 14px; line-height: 1.4; }
.reglas .chip { flex: none; margin-top: 1px; }
.lista-plantillas { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-plantillas > li { padding: 10px 0; border-top: 1px solid var(--borde-suave); }
.plantilla-cabecera { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.lista-plantillas .acciones { margin-top: 4px; align-items: flex-start; }
.lista-plantillas .detalle-editar { margin-top: 0; }
.datos-una-columna { grid-template-columns: 1fr; }
.ficha-historial { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde-suave); font-size: 14px; color: var(--texto-2); line-height: 1.5; }
.ficha-historial p { margin: 0 0 6px; }
.acciones-contrato { margin-top: 10px; gap: 4px; }
.carpeta-sub { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.carpeta-sub p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lista-documentos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.documento { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 14px; overflow-wrap: anywhere; }
.documento a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.documento-requisito { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.subir-documento { margin-top: 16px; }
.subir-documento .formulario-linea { margin-top: 12px; }


/* --- Portada (hito 8) ------------------------------------------------------------------- */
/* Menú cajón: en escritorio se esconde y aparece al acercar el mouse al borde izquierdo (o con el teclado). */
.borde-cajon { display: none; }
@media (min-width: 901px) {
  .con-cajon .menu { position: fixed; inset: 0 auto 0 0; width: 244px; z-index: 40; transform: translateX(-100%); transition: transform .22s ease; }
  .con-cajon .borde-cajon { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 22px; z-index: 39; }
  .con-cajon .borde-cajon:hover ~ .menu, .con-cajon .menu:hover, .con-cajon .menu:focus-within { transform: none; box-shadow: 8px 0 28px rgba(10, 20, 40, .28); }
  .borde-marca { position: absolute; left: 5px; top: 50%; width: 5px; height: 80px; margin-top: -40px; border-radius: 3px; background: #9DB0CF; }
  .con-cajon .contenido { max-width: none; padding: 24px 40px 40px; }
}
.con-cajon .contenido { position: relative; overflow: hidden; }
.portada-arcos { position: absolute; right: 0; top: 0; width: 700px; max-width: 70%; height: auto; pointer-events: none; }

.portada-cabecera { position: relative; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.portada-titulos { min-width: 0; }
.portada-marca { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tenue); line-height: 1.35; }
.logo-chico { display: flex; background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 4px 6px; }
.logo-chico img { width: 46px; height: 41px; object-fit: contain; display: block; }
.portada-fecha { margin: 22px 0 0; font-size: 60px; font-weight: 700; line-height: 1.05; color: var(--navy); letter-spacing: -.01em; }
.portada-frase { font-size: 16px; color: var(--neutro-texto); margin-top: 12px; max-width: 640px; line-height: 1.5; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.portada-acciones .boton { border-radius: 10px; gap: 8px; }
.boton-punteado { border: 1.5px dashed var(--primario); color: var(--primario); background: #fff; font-weight: 600; }
kbd { font: 11px "IBM Plex Sans", system-ui, sans-serif; border: 1px solid var(--borde-campo); border-radius: 5px; padding: 1px 6px; color: var(--tenue); background: #fff; }

/* Fila de tarjetas: se angostan al agregar más; si no caben, scroll horizontal; en celular se apilan. */
.fila-tarjetas { position: relative; display: flex; gap: 14px; align-items: stretch; overflow-x: auto; padding: 6px 2px 10px; margin: -6px -2px 10px; }

/* Siluetas de personas (cabeza y cuerpo con CSS). */
.pp { --c: #1C5AA6; --w: 12px; position: relative; width: var(--w); height: calc(var(--w) * 1.5); display: inline-block; flex: none; }
.pp::before { content: ""; position: absolute; left: 25%; top: 0; width: 50%; height: 34%; border-radius: 50%; background: var(--c); }
.pp::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 58%; border-radius: 50% 50% 14% 14% / 80% 80% 14% 14%; background: var(--c); }
.pp-12 { --w: 12px; } .pp-26 { --w: 26px; } .pp-30 { --w: 30px; } .pp-34 { --w: 34px; }
.pp-ltda { --c: #1C5AA6; } .pp-spa { --c: #2A9FD6; } .pp-ingreso { --c: #2E9E6B; } .pp-retiro { --c: #C0392B; opacity: .6; }
.pp-gris { --c: #8FA3C4; } .pp-ok { --c: #2E9E6B; }
.ola { animation: barrido 4.2s ease-in-out infinite; }

/* Tarjeta grande: cierre del mes */
.tarjeta-cierre { flex: 2.7 4 440px; min-width: 320px; min-height: 620px; position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(160deg, #1C3A66 0%, #14233A 75%); padding: 20px 22px; display: flex; flex-direction: column; color: #fff; }
.cierre-figura { position: absolute; left: 0; right: 0; top: 64px; height: 290px; display: flex; justify-content: center; }
.hoja { position: absolute; top: 10px; width: 230px; height: 262px; border-radius: 12px; }
.hoja-atras-1 { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); animation: flota-a 6s ease-in-out infinite; transform: translateX(-46px) rotate(-8deg); }
.hoja-atras-2 { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); animation: flota-b 7s ease-in-out infinite; transform: translateX(46px) rotate(7deg); }
.hoja-frente { background: #F7FAFE; padding: 16px 18px; color: var(--navy); box-shadow: 0 14px 30px rgba(5, 12, 30, .35); animation: flota 5s ease-in-out infinite; }
.hoja-persona { display: flex; align-items: center; gap: 12px; }
.renglon { height: 7px; border-radius: 4px; background: #C9D5E6; }
.renglon-1 { width: 104px; } .renglon-2 { width: 66px; margin-top: 7px; opacity: .6; }
.hoja-barras { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.hoja-barras p { display: flex; justify-content: space-between; font-size: 11px; color: var(--neutro-texto); margin-bottom: 5px; }
.hoja-barras p.fuerte { color: var(--navy); font-weight: 600; }
.pista { height: 8px; border-radius: 4px; background: #E1E8F2; overflow: hidden; }
.barra { height: 100%; border-radius: 4px; transform-origin: left center; animation: crece 5s ease-out infinite; }
.barra-haberes { width: 86%; background: #1C5AA6; }
.barra-descuentos { width: 34%; background: #E0932B; animation-delay: .5s; }
.barra-liquido { width: 68%; background: #2A9FD6; animation-delay: 1s; }
.timbre { position: absolute; right: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #2E9E6B; animation: sello 5s ease-out infinite; }
.timbre::after { content: ""; position: absolute; left: 14px; top: 7px; width: 9px; height: 18px; border: solid #2E9E6B; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.cierre-arriba { position: relative; display: flex; justify-content: space-between; align-items: center; }
.cierre-estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #C9D6EA; }
.anillo { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #2A9FD6; }
.cierre-ir { width: 44px; height: 44px; border-radius: 50%; background: #2A9FD6; color: #0B1D33; display: flex; align-items: center; justify-content: center; }
.cierre-texto { position: relative; margin-top: auto; padding-top: 300px; }
.cierre-texto h2 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.cierre-sub { font-size: 15px; color: #C9D6EA; margin-top: 6px; }
.cierre-resumen { font-size: 12px; color: #A9BAD4; margin-top: 14px; }
.cierre-pasos { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 6px; }
.cierre-paso { flex: 1 1 0; min-width: 0; font-size: 10px; color: #A9BAD4; white-space: nowrap; }
.cierre-paso-barra { display: block; height: 6px; border-radius: 3px; background: #3A5784; margin-bottom: 6px; }
.paso-listo .cierre-paso-barra { background: #4FD39A; }
.paso-alerta .cierre-paso-barra, .paso-problema .cierre-paso-barra { background: #FFB454; }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cierre-acciones a { min-height: 44px; padding: 0 14px; border-radius: 9px; border: 1px solid #4A6A9C; background: #1B3158; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.punto-alerta { width: 7px; height: 7px; border-radius: 50%; background: #FFB454; }
.cierre-columnas { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #35527F; }
.cierre-columnas > div { flex: 1 1 200px; min-width: 0; }
.cierre-etiqueta { font-size: 12px; color: #A9BAD4; margin-bottom: 8px; }
.cierre-pendientes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cierre-pendientes li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #EAF0F9; }
.cierre-pendientes li > span:nth-child(2) { flex: 1 1 auto; }
.casilla-vacia { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #6F93C4; flex: 0 0 16px; }
.cierre-avance { font-size: 14px; font-weight: 600; line-height: 1.35; }
.cierre-avance-det { font-size: 12px; color: #A9BAD4; margin-top: 6px; }

/* Tarjetas del sistema y propias */
.tile { flex: 1 1 168px; min-width: 150px; min-height: 620px; position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--borde); background: #fff; padding: 18px; display: flex; flex-direction: column; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.tile[data-href] { cursor: pointer; }
.tile:hover, .tile:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 35, 58, .16); }
.tile-estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutro-texto); }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: #8792A3; }
.punto-ok { background: #1E7A4C; } .punto-atencion { background: #C77700; } .punto-problema { background: #C0261B; }
.punto-info { background: transparent; border: 2px solid var(--primario); } .punto-neutro { background: #8792A3; }
.cierre-pendientes .punto-atencion { background: #FFB454; } .cierre-pendientes .punto-info { background: #6F93C4; border: 0; }
.tile-figura { margin-top: 32px; display: flex; flex-direction: column; align-items: center; }
.tile-pie { margin-top: auto; }
.tile { container-type: inline-size; }
/* El título se achica con el ancho de la tarjeta para no cortar palabras ("Trabajadores" en una tarjeta angosta). */
.tile-titulo { font-size: clamp(16px, 15.5cqi, 28px); font-weight: 700; line-height: 1.1; color: var(--navy); margin: 0; hyphens: auto; }
.tile-bajada { font-size: 12px; color: var(--tenue); margin-top: 8px; }
.det { position: absolute; left: 0; right: 0; bottom: 0; background: var(--navy); color: #fff; padding: 16px 18px 18px; transform: translateY(102%); transition: transform .24s ease; }
.tile:hover .det, .tile:focus-within .det { transform: none; }
.det-titulo { font-size: 11px; letter-spacing: .08em; color: #A9BAD4; margin-bottom: 8px; }
.det-fila { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.35; padding: 5px 0; border-top: 1px solid #35527F; color: #EAF0F9; }
.det-fila b { font-weight: 600; color: #fff; text-align: right; }
.det-ir { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; font-size: 12px; font-weight: 600; color: #7FC4EC; }

.cal-semana, .cal { display: grid; grid-template-columns: repeat(7, 14px); gap: 4px; }
.cal-semana { margin-top: 16px; font-size: 9px; color: #8792A3; text-align: center; }
.cal { margin-top: 6px; }
.c { width: 14px; height: 14px; border-radius: 4px; position: relative; }
.c-ok { background: #1C5AA6; animation: barrido 4s ease-in-out infinite; }
.c-fin { background: #7FA6DC; animation: barrido 4s ease-in-out infinite; }
.c-ok::after, .c-fin::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.c-falta { border: 1.5px dashed #BFC9DA; }
svg .aguja { transform-origin: 18px 18px; animation: gira 6s linear infinite; }
svg .aguja-hora { transform-origin: 18px 18px; animation: gira 72s linear infinite; }

.casos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 6px; margin-top: 8px; justify-items: center; width: 100%; }
.caso { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.caso-figura { position: relative; padding-top: 2px; }
.caso-nombre { font-size: 10px; color: var(--neutro-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.insignia { position: absolute; right: -4px; top: -4px; width: 15px; height: 15px; border-radius: 50%; background: #E0932B; color: #fff; font: 700 10px/15px "IBM Plex Sans", system-ui, sans-serif; text-align: center; animation: aviso 1.9s ease-out infinite; }
.caso:nth-child(2) .insignia { animation-delay: .3s; } .caso:nth-child(3) .insignia { animation-delay: .6s; }
.caso:nth-child(4) .insignia { animation-delay: .9s; } .caso:nth-child(5) .insignia { animation-delay: 1.2s; } .caso:nth-child(6) .insignia { animation-delay: 1.5s; }

.balanza, .contrato { width: 100%; display: block; overflow: visible; }
.balanza .brazo { transform-origin: 70px 40px; animation: inclina 6s ease-in-out infinite; }
.brazo-chico { transform-origin: 70px 20px; animation: inclina 6s ease-in-out infinite; }
.balanza-leyenda { display: flex; justify-content: space-between; width: 100%; font-size: 10px; color: var(--tenue); margin-top: 2px; padding: 0 2px; }
.firma { stroke-dasharray: 200; animation: firma 4.5s ease-in-out infinite; }
.trazo { animation: trazo 2s linear infinite; }
.bandera { transform-origin: 108px 196px; animation: late 2s ease-in-out infinite; }
.linea-crece { transform-box: fill-box; transform-origin: left center; animation: crece 5s ease-out infinite; }
.linea-crece:nth-of-type(3) { animation-delay: .4s; } .linea-crece:nth-of-type(4) { animation-delay: .8s; }
.puntos-cal circle { animation: barrido 3.5s ease-in-out infinite; }

.gente { display: grid; grid-template-columns: repeat(8, 12px); gap: 7px 4px; justify-content: center; }
.gente-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 10px; color: var(--tenue); margin-top: 18px; }
.gente-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.gente-leyenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.leyenda-ltda { background: #1C5AA6; } .leyenda-spa { background: #2A9FD6; } .leyenda-ingreso { background: #2E9E6B; } .leyenda-retiro { background: #C0392B; }

.tile-propia { gap: 12px; cursor: default; }
.tile-propia:hover, .tile-propia:focus-within { transform: none; box-shadow: none; }
.tile-propia.resuelta { opacity: .7; }
.sin-margen-arriba { margin-top: 0; }
.propia-figura { height: 112px; border-radius: 10px; background: #F3F7FC; display: flex; align-items: center; justify-content: center; }
.fig-personas { display: flex; gap: 10px; align-items: flex-end; }
.propia-titulo { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--navy); margin: 0; overflow-wrap: anywhere; }
.propia-valor { font-size: 20px; font-weight: 700; color: var(--primario); line-height: 1.1; overflow-wrap: anywhere; }
.propia-nota { font-size: 14px; color: var(--neutro-texto); line-height: 1.45; overflow-wrap: anywhere; }
.propia-vence { font-size: 13px; font-weight: 600; color: var(--navy); }
.propia-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

/* Parte de abajo */
.portada-abajo { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.portada-abajo > .tarjeta { flex: 1 1 300px; min-width: 0; margin-bottom: 0; border-radius: 16px; }
.portada-abajo > .portada-cambios { flex: 1.3 1 420px; }
.portada-abajo-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.portada-abajo-cabecera h2 { font-size: 18px; color: var(--navy); margin: 0; }
.cambio { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--borde-suave); }
.portada-abajo-cabecera + .cambio { margin-top: 10px; }
.cambio-etiqueta { flex: 0 0 84px; font-size: 12px; font-weight: 600; color: var(--primario); padding-top: 2px; }
.cambio > div { min-width: 0; }
.cambio-titulo { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.atajos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.atajo { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--borde-campo); background: #fff; color: var(--texto); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 500; text-decoration: none; }
.atajo:hover { background: #F6F8FB; opacity: 1; }
.fecha-clave { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--borde-suave); font-size: 14px; }
.portada-abajo-cabecera + .fecha-clave { margin-top: 10px; }
.fecha-clave-dia { flex: 0 0 84px; font-size: 13px; font-weight: 600; color: var(--primario); }

/* Diálogos: buscar trabajador y nueva tarjeta */
.dialogo { border: 1px solid #BFD0E8; border-radius: 16px; padding: 20px 22px; width: min(560px, calc(100% - 32px)); box-shadow: 0 20px 50px rgba(20, 35, 58, .28); color: var(--texto); }
.dialogo-ancho { width: min(820px, calc(100% - 32px)); }
.dialogo::backdrop { background: rgba(20, 35, 58, .45); }
.dialogo-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.dialogo-cabecera h2 { margin: 0; font-size: 16px; color: var(--navy); }
.resultados-busqueda { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; }
.resultados-busqueda a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.resultados-busqueda a:hover, .resultados-busqueda a:focus-visible { background: var(--info-fondo); opacity: 1; }
.form-tarjeta-columnas { display: flex; flex-wrap: wrap; gap: 22px 32px; }
.form-tarjeta-columnas > .formulario { flex: 1 1 320px; min-width: 0; }
.grupo-pildoras { border: 0; padding: 0; margin: 0; }
.grupo-pildoras legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.grupo-pildoras .chip-opcion span { min-height: var(--tactil); border-radius: 10px; font-size: 14px; }
.form-tarjeta:has(input[name=tipo][value=sistema]:checked) .solo-propio { display: none; }
.form-tarjeta:not(:has(input[name=tipo][value=sistema]:checked)) .solo-sistema { display: none; }

@keyframes barrido { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes flota-a { 0%, 100% { transform: translateX(-46px) rotate(-8deg) translateY(0); } 50% { transform: translateX(-46px) rotate(-8deg) translateY(-5px); } }
@keyframes flota-b { 0%, 100% { transform: translateX(46px) rotate(7deg) translateY(0); } 50% { transform: translateX(46px) rotate(7deg) translateY(-7px); } }
@keyframes crece { 0% { transform: scaleX(0); } 30%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sello { 0%, 55% { transform: scale(0) rotate(-20deg); opacity: 0; } 68% { transform: scale(1.18) rotate(-10deg); opacity: 1; } 78%, 92% { transform: scale(1) rotate(-10deg); opacity: 1; } 100% { transform: scale(1) rotate(-10deg); opacity: 0; } }
@keyframes aviso { 0% { box-shadow: 0 0 0 0 rgba(224, 147, 43, .6); } 100% { box-shadow: 0 0 0 11px rgba(224, 147, 43, 0); } }
@keyframes inclina { 0%, 100% { transform: rotate(-9deg); } 25% { transform: rotate(7deg); } 50% { transform: rotate(-5deg); } 75% { transform: rotate(4deg); } }
@keyframes firma { 0% { stroke-dashoffset: 200; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes trazo { to { stroke-dashoffset: -16; } }
@keyframes late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes gira { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .fila-tarjetas { flex-wrap: wrap; overflow-x: visible; }
  .tarjeta-cierre, .tile { flex: 1 1 100%; min-width: 0; min-height: 0; }
  .tile { min-height: 360px; }
  .tarjeta-cierre { min-height: 600px; }
  .portada-fecha { font-size: 40px; }
  .cierre-texto h2 { font-size: 30px; }
}
.cal span.c:nth-of-type(1) { animation-delay: 0.00s; }
.cal span.c:nth-of-type(2) { animation-delay: 0.12s; }
.cal span.c:nth-of-type(3) { animation-delay: 0.24s; }
.cal span.c:nth-of-type(4) { animation-delay: 0.36s; }
.cal span.c:nth-of-type(5) { animation-delay: 0.48s; }
.cal span.c:nth-of-type(6) { animation-delay: 0.60s; }
.cal span.c:nth-of-type(7) { animation-delay: 0.72s; }
.cal span.c:nth-of-type(8) { animation-delay: 0.84s; }
.cal span.c:nth-of-type(9) { animation-delay: 0.96s; }
.cal span.c:nth-of-type(10) { animation-delay: 1.08s; }
.cal span.c:nth-of-type(11) { animation-delay: 1.20s; }
.cal span.c:nth-of-type(12) { animation-delay: 1.32s; }
.cal span.c:nth-of-type(13) { animation-delay: 1.44s; }
.cal span.c:nth-of-type(14) { animation-delay: 1.56s; }
.cal span.c:nth-of-type(15) { animation-delay: 1.68s; }
.cal span.c:nth-of-type(16) { animation-delay: 1.80s; }
.cal span.c:nth-of-type(17) { animation-delay: 1.92s; }
.cal span.c:nth-of-type(18) { animation-delay: 2.04s; }
.cal span.c:nth-of-type(19) { animation-delay: 2.16s; }
.cal span.c:nth-of-type(20) { animation-delay: 2.28s; }
.cal span.c:nth-of-type(21) { animation-delay: 2.40s; }
.cal span.c:nth-of-type(22) { animation-delay: 2.52s; }
.cal span.c:nth-of-type(23) { animation-delay: 2.64s; }
.cal span.c:nth-of-type(24) { animation-delay: 2.76s; }
.cal span.c:nth-of-type(25) { animation-delay: 2.88s; }
.cal span.c:nth-of-type(26) { animation-delay: 3.00s; }
.cal span.c:nth-of-type(27) { animation-delay: 3.12s; }
.cal span.c:nth-of-type(28) { animation-delay: 3.24s; }
.cal span.c:nth-of-type(29) { animation-delay: 3.36s; }
.cal span.c:nth-of-type(30) { animation-delay: 3.48s; }
.cal span.c:nth-of-type(31) { animation-delay: 3.60s; }
.gente .pp:nth-child(8n+1) { animation-delay: 0.00s; }
.gente .pp:nth-child(8n+2) { animation-delay: 0.14s; }
.gente .pp:nth-child(8n+3) { animation-delay: 0.28s; }
.gente .pp:nth-child(8n+4) { animation-delay: 0.42s; }
.gente .pp:nth-child(8n+5) { animation-delay: 0.56s; }
.gente .pp:nth-child(8n+6) { animation-delay: 0.70s; }
.gente .pp:nth-child(8n+7) { animation-delay: 0.84s; }
.gente .pp:nth-child(8n+8) { animation-delay: 0.98s; }
.puntos-cal circle:nth-child(1) { animation-delay: 0.0s; }
.puntos-cal circle:nth-child(2) { animation-delay: 0.3s; }
.puntos-cal circle:nth-child(3) { animation-delay: 0.6s; }
.puntos-cal circle:nth-child(4) { animation-delay: 0.9s; }
.puntos-cal circle:nth-child(5) { animation-delay: 1.2s; }
.puntos-cal circle:nth-child(6) { animation-delay: 1.5s; }
.puntos-cal circle:nth-child(7) { animation-delay: 1.8s; }
.puntos-cal circle:nth-child(8) { animation-delay: 2.1s; }
.fig-personas .pp:nth-child(2) { animation-delay: .4s; } .fig-personas .pp:nth-child(3) { animation-delay: .8s; }

/* --- Usuarios, cuenta y pago (hito 9) ---------------------------------------------------- */
.menu-cuenta { color: #fff; font-weight: 500; text-decoration: none; }
.menu-cuenta:hover { text-decoration: underline; }
.formulario-angosto { max-width: 480px; }
.login-otra { margin-top: 12px; text-align: center; }
.qr { display: flex; justify-content: center; padding: 12px 0; }
.clave-2fa, .clave-temporal { font-size: 15px; letter-spacing: .04em; user-select: all; }
.acciones-usuario { margin-top: 8px; }
.roles-ayuda { margin: 14px 0 0; padding-left: 18px; color: var(--texto-2); }
.roles-ayuda li { margin-top: 4px; }
.estado-pago { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--borde-suave); border-radius: 10px; margin: 12px 0; background: #F8FAFC; }
.estado-pago form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- Tanda 1 ------------------------------------------------------------------------------ */
.confirmar-prestamo { padding: 12px 0; border-top: 1px solid var(--borde-suave); }
.confirmar-prestamo:first-of-type { border-top: 0; }
.confirmar-prestamo p { margin: 0 0 8px; overflow-wrap: anywhere; }
.fechas-reglas { margin: 12px 0 0; display: grid; gap: 10px; }
.fechas-reglas div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 4px 14px; align-items: baseline; }
.fechas-reglas dt { font-weight: 600; }
.fechas-reglas dd { margin: 0; }
@media (max-width: 560px) { .fechas-reglas div { grid-template-columns: 1fr; } }
.subtitulo-pago { font-size: 16px; margin: 18px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.celda-persona { vertical-align: top; text-align: left; font-weight: 600; }
.boton:disabled { opacity: .5; cursor: not-allowed; }
/* Si el buscador y el detalle no caben lado a lado, el buscador deja de quedar fijo (no tapa el detalle). */
.dos-columnas { container-type: inline-size; }
@container (max-width: 879px) { .buscador { position: static; max-width: none; max-height: none; } }
.aviso-info { background: var(--info-fondo); color: var(--info-texto); }
.obras-supervisor { min-width: 260px; }
.obras-supervisor .opcion { display: flex; gap: 6px; align-items: baseline; font-size: 14px; }