/* Floating dialogs used by every create,
edit,
and detail action. */
.modal-backdrop{
  position: fixed;
  z-index: 20;
  inset: 0;
  background: rgba(17, 30, 58, 0.4);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: backdrop-in 180ms ease-out;
}

.drawer{
  position: fixed;
  z-index: 21;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(960px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  padding: 32px 34px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #e1e7ef;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--e4);
  transform: translate(-50%, -50%);
  animation: modal-enter var(--dur-3) var(--ease) both;
}

/* Cuando el cajón trae un documento, el papel empieza más abajo para que la
   equis de cerrar tenga su propia franja arriba.

   La equis va pegada a la esquina y el papel va centrado: si el papel es
   casi tan ancho como el cajón —ventana angosta—, el nombre del documento,
   que va arriba a la derecha, terminaba justo debajo de la equis y no se
   podía leer. Se baja el papel en vez de encogerlo: un comprobante se ve
   igual en pantalla que impreso, así que no se reacomoda por la pantalla,
   y encogerlo lo castigaría también en ventana ancha, donde cabe entero. */
.drawer:has(> .comprobante){ padding-top: 68px; }

.drawer-close{
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid #dce2ec;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 5px 16px rgba(19, 39, 76, 0.08);
  font-size: 27px;
  line-height: 1;
}

.drawer .form-grid,
.drawer .drawer-detail{
  padding-right: 8px;
}

.drawer .drawer-actions,
.drawer .sticky-form-actions{
  position: sticky;
  bottom: -32px;
  z-index: 5;
  margin: 12px -8px -32px;
  padding: 16px 8px 34px;
  border-top: 1px solid #e4eaf2;
  background: #fff;
  box-shadow: 0 -10px 18px -12px rgba(20, 29, 52, .28);
}

.sinpe-editor{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.sinpe-editor section{ display:grid; gap:8px; padding:11px; border:1px solid #e3e8ef; border-radius:8px; background:#fbfcfe; }
.sinpe-editor section > b{ color:var(--ink); font-size:13px; }
.sinpe-editor label{ gap:5px; font-size:12px; }

.drawer .form-grid > h2,
.drawer .drawer-detail > h2{
  padding-right: 58px;
}

.form-help{
  grid-column: 1 / -1;
  margin: 0;
  color: #63718d;
  font-size: 12px;
  line-height: 1.45;
}

.account-editor{
  display: grid;
  grid-template-columns: 110px repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 13px;
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  background: #fbfcfe;
}

.account-editor > b{
  align-self: center;
  color: #1d2d4c;
  font-size: 13px;
}

.drawer-detail > h2{
  margin-top: 0;
  font-size: 25px;
}

.bar-chart{
  overflow: hidden;
}

.bar-chart i{
  max-height: 88%;
}

.bar-chart em{
  left: 50%;
  transform: translateX(-50%);
}

/* Photographic hero scenes remain behind the copy and never affect layout. */
.hero-scene.hero-photo-office,
.hero-scene.hero-photo-liquidations,
.hero-scene.hero-photo-bonuses{
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(58%, 720px);
  margin: 0;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

.hero:has(.hero-photo-office),
.hero:has(.hero-photo-liquidations),
.hero:has(.hero-photo-bonuses){
  isolation: isolate;
}

.hero:has(.hero-photo-office)::after,
.hero:has(.hero-photo-liquidations)::after,
.hero:has(.hero-photo-bonuses)::after{
  z-index: 1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.96) 46%, rgba(255, 255, 255, 0.2) 76%, rgba(255, 255, 255, 0) 100%);
}

[data-theme="dark"] .hero:has(.hero-photo-office)::after,
[data-theme="dark"] .hero:has(.hero-photo-liquidations)::after,
[data-theme="dark"] .hero:has(.hero-photo-bonuses)::after{
  background: linear-gradient(90deg, #1b2433 0%, rgba(27, 36, 51, 0.96) 46%, rgba(27, 36, 51, 0.2) 76%, rgba(27, 36, 51, 0) 100%);
}

.hero:has(.hero-photo-office) .hero-icon,
.hero:has(.hero-photo-liquidations) .hero-icon,
.hero:has(.hero-photo-bonuses) .hero-icon,
.hero:has(.hero-photo-office) h2,
.hero:has(.hero-photo-liquidations) h2,
.hero:has(.hero-photo-bonuses) h2,
.hero:has(.hero-photo-office) p,
.hero:has(.hero-photo-liquidations) p,
.hero:has(.hero-photo-bonuses) p{
  z-index: 2;
}

.hero-scene.hero-photo-office{
  background-image: url("assets-hero-office.png");
}

.hero-scene.hero-photo-liquidations{
  background-image: url("assets-hero-liquidations.png");
}

.hero-scene.hero-photo-bonuses{
  background-image: url("assets-hero-bonuses.png");
}

.hero-scene.hero-photo-office i,
.hero-scene.hero-photo-liquidations i,
.hero-scene.hero-photo-bonuses i{
  display: none;
}

/* Liquidaciones has more controls,
so its commands wrap in a deliberate second row. */



/* Expedientes keeps the collaborator header intact while long document names scroll within their own table. */
.files-layout > *,
.file-detail,
.file-detail > header > div{
  min-width: 0;
}

.file-detail{
  overflow: hidden;
}

.file-detail > header{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.file-detail > header h2,
.file-detail > header p,
.file-detail > header small{
  overflow-wrap: anywhere;
}

.file-table-wrap{
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.file-detail .file-table-wrap table{
}

/* A transparent logo is contained inside a stable frame in the sidebar. */
.brand{
  height: 132px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.brand-logo-frame{
  width: 154px;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.brand img,
.logo-crop-preview img{
  width: 132px;
  height: 112px;
  object-fit: contain;
  object-position: center;
  transform: translate(var(--logo-x, 0), var(--logo-y, 0)) scale(var(--logo-scale, 1));
  transform-origin: center;
}

.company-logo .logo-adjust-button{
  width: 100%;
  margin-top: 8px;
}

.company-logo .logo-help{
  display: block;
  margin-top: 9px;
  color: #687590;
  font-size: 11px;
  line-height: 1.45;
}

.logo-adjust-form{
  display: grid;
  gap: 19px;
}

.logo-adjust-form h2{
  margin: 0;
  padding-right: 58px;
  font-size: 25px;
}

.logo-adjust-form > p{
  margin: -10px 0 2px;
  color: #63718c;
}

.logo-crop-preview{
  height: 170px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e0e7ee;
  border-radius: 10px;
  background: #f8fafc;
}

.logo-crop-preview img{
  width: 205px;
  height: 150px;
}

.logo-adjust-controls{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.logo-adjust-controls label{
  display: grid;
  gap: 9px;
  color: #55627e;
  font-size: 12px;
}

.logo-adjust-controls input{
  width: 100%;
  accent-color: var(--teal);
}

@keyframes modal-enter{
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.08);
  }
  to{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes backdrop-in{
  from { opacity: 0; }
  to{ opacity: 1; }
}

.drawer.closing{
  animation: modal-exit 240ms cubic-bezier(0.4, 0, 0.7, 0) both;
}

.modal-backdrop.closing{
  animation: backdrop-out 220ms ease-in both;
}

@keyframes modal-exit{
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to{
    opacity: 0;
    transform: translate(-50%, -50%) scale(.08);
  }
}

@keyframes backdrop-out{
  from { opacity: 1; }
  to{ opacity: 0; }
}

@media (max-width: 480px) {
  .brand{
    height: 80px;
    margin-bottom: 8px;
  }

  .brand-logo-frame{
    width: 58px;
    height: 70px;
  }

  .brand img{
    width: 58px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  .brand{
    display: none;
  }

  .drawer{
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    padding: 24px 18px;
    border-radius: 12px;
  }

  .drawer-close{
    top: 13px;
    right: 13px;
  }

  /* En angosto la equis sube, así que la franja puede ser más corta. */
  .drawer:has(> .comprobante){ padding-top: 60px; }

  .drawer .form-grid,
.drawer .drawer-detail{
    padding-right: 0;
  }

  .hero-scene.hero-photo-office,
.hero-scene.hero-photo-liquidations,
.hero-scene.hero-photo-bonuses{
    display: none;
  }


  .file-detail > header{
    grid-template-columns: auto minmax(0, 1fr);
  }

  .file-detail > header .badge{
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }

  .file-tabs{
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .file-tabs button{
    flex: 0 0 auto;
  }

  .logo-adjust-controls{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .account-editor{
    grid-template-columns: 1fr;
  }
}

/* The full desktop keeps its original proportions. Narrow desktop windows use a
   stable canvas with horizontal scrolling, instead of reorganizing the interface. */
@media (min-width: 481px) {
  html,
body{
    overflow-x: hidden;
  }

  #app-viewport{
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
  }

  #app,
.app-shell{
    min-width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 1239px) {
  .app-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    inset: auto;
    width: 220px;
    height: 100vh;
  }

  .content {
    min-width: 0;
    max-width: none;
    margin-left: 0;
  }

  /* Inicio no lleva barra lateral. */
  .app-shell.home-shell { display: block; }

  /* Las tablas anchas se deslizan dentro de su propio cuadro, no cortando la
     pantalla entera. Antes el programa se forzaba a 1240px y en una ventana
     más angosta el lado derecho quedaba fuera, sin barra visible. */
  /* Las tablas ya caben: no necesitan deslizarse por dentro. */

  /* La tabla y su panel de detalle se apilan en vez de apretarse. */
  .split-table { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1240px) {
  #app-viewport{
    overflow-x: visible;
  }
}

/* Cuadros/modales en tema oscuro: viven fuera de .app-shell,
así que necesitan
   sus propias reglas en vez de heredar las de .dark. */
[data-theme="dark"] .drawer{
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .drawer-close{
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .drawer .drawer-actions,
[data-theme="dark"] .drawer .sticky-form-actions{
  background: var(--card);
  border-top-color: var(--line);
}

[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid select,
[data-theme="dark"] .form-grid textarea{
  background: #121824;
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .form-grid fieldset,
[data-theme="dark"] .account-editor,
[data-theme="dark"] .sinpe-editor section{
  background: #121824;
  border-color: var(--line);
}

[data-theme="dark"] .mini-cards span{
  border-color: var(--line);
  background: #121824;
  color: #aeb9d1;
}

[data-theme="dark"] .mini-cards b,
[data-theme="dark"] .account-editor > b,
[data-theme="dark"] .sinpe-editor section > b{
  color: var(--ink);
}

[data-theme="dark"] .form-grid label,
[data-theme="dark"] .form-help,
[data-theme="dark"] .form-grid p,
[data-theme="dark"] .form-grid small{
  color: #aeb9d1;
}

/* En ventanas de escritorio menos altas la barra lateral se compacta para que
   todos los módulos —incluido Configuración— queden siempre alcanzables.
   Va al final porque este archivo se carga de último y gana a las medidas
   base del logo definidas más arriba. */
@media (max-height: 820px) {
  .brand{ height: 96px; margin-bottom: 6px; }
  .brand-logo-frame{ width: 128px; height: 88px; }
  .brand img{ width: 112px; height: 88px; }
  .nav-item{ height: 43px; }
  .sidebar nav{ gap: 4px; }
}

@media (max-height: 700px) {
  .brand{ height: 72px; margin-bottom: 4px; }
  .brand-logo-frame{ width: 104px; height: 66px; }
  .brand img{ width: 92px; height: 66px; }
  .nav-item{ height: 38px; font-size: 13px; }
  .nav-item .nav-icon svg{ width: 19px; height: 19px; }
  .sidebar nav{ gap: 2px; }
  .side-foot{ padding-top: 8px; font-size: 10px; }
}

/* ---- Ficha del colaborador en ventana angosta ----
   Está armada en dos columnas fijas (contenido + panel lateral) y la tarjeta de
   arriba en tres. En una ventana chica no cabía y todo se montaba encima.
   Va en modal.css porque es el último archivo que se carga: en
   collaborators.css estas reglas perdían contra employee-detail.css. */
@media (max-width: 1120px) {
  .employee-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .employee-summary-card { grid-template-columns: 88px minmax(0, 1fr); row-gap: 14px; min-height: 0; }
  .employee-summary-card .employee-dates { grid-column: 1 / -1; }
  .employee-tabs { flex-wrap: wrap; overflow: visible; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-detail-heading { min-height: 0; padding-top: 0; }
  .detail-top-actions { position: static; flex-wrap: wrap; margin-top: 12px; }
  .employee-detail-side { min-width: 0; }
}

/* ---- Celdas agrupadas de las tablas ----
   Un renglón cuenta cuatro cosas: quién, qué pasó, cuánto y cómo va. El dato
   principal arriba y el de apoyo debajo, en gris. Así seis a nueve columnas
   caben en cuatro o cinco, sin apretar nada. */
.celda { display: grid; gap: 2px; min-width: 0; }
.celda > b { font-size: 13px; font-weight: 600; }
.celda > small { color: #7b879e; font-size: 11.5px; line-height: 1.35; }

.celda-monto { text-align: right; }
.celda-monto .celda { justify-items: end; }
.celda-monto .celda > b { font-size: 15px; font-variant-numeric: tabular-nums; }
.celda-monto .celda > small { font-variant-numeric: tabular-nums; }

.celda-estado { display: flex; flex-wrap: wrap; gap: 5px; }

.data-area th.col-monto { text-align: right; }
.data-area th.col-accion { width: 44px; }

[data-theme="dark"] .celda > small { color: #8794ac; }

/* El nombre y el correo del colaborador empujaban la tabla a lo ancho. Se
   recortan con puntos suspensivos en vez de obligar a deslizar toda la tabla. */
.data-area td:first-child { max-width: 190px; }
.data-area .person-cell { min-width: 0; }
.data-area .person-cell > span { min-width: 0; }
.data-area .person-cell b {
  display: block;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* La columna de acciones no necesita más que el botón. */
.data-area th.col-accion,
.data-area td:last-child:has(> .more) { width: 46px; }

/* El texto de "todavía no hay nada" ocupa lo que haya, no fuerza el ancho. */
.data-area td .empty,
.file-table-wrap td .empty { min-width: 0; white-space: normal; }

/* Cada fecha de un rango se mantiene entera. */
.celda .fecha { white-space: nowrap; }

/* En ventana angosta las celdas se aprietan un poco y el nombre se parte entre
   nombre y apellido. Con eso las tablas caben sin deslizarse por dentro. */
@media (max-width: 1120px) {
  .data-area th,
  .data-area td { padding-left: 11px; padding-right: 11px; }
  .data-area td:first-child { max-width: 148px; }
  .data-area th.col-accion,
  .data-area td:last-child { padding-left: 4px; padding-right: 8px; }
}

/* Aguinaldos en ventana angosta: el bloque del período va completo arriba y las
   cifras debajo, en vez de apretarse en dos columnas fijas. */
@media (max-width: 1120px) {
  .agui-overview { grid-template-columns: minmax(0, 1fr); }
  .agui-overview > article:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .agui-overview .select-button { margin-left: auto; }
}

/* ═══════════════ Jerarquía de movimiento y luz ═══════════════
   El movimiento dice cuánta consecuencia tiene cada control, y la regla es
   deliberada: lo que más cambia las cosas es lo que MENOS invita. Guardar se
   levanta y se ilumina; Restablecer reacciona despacio, sin brillo. Si todo se
   moviera igual, nada destacaría y se vería barato.

   Nunca se anima el ancho ni el alto: solo posición, color y sombra. Así el
   movimiento jamás reacomoda la pantalla. */

.button,
.more,
.select-button,
.file-tabs button,
.employee-tabs button,
.roster-card,
.file-person,
.person-cell,
.deduction-add,
.dropzone,
.back-link,
.employee-status-toggle {
  transition: transform .16s cubic-bezier(.2, .7, .3, 1),
              box-shadow .18s ease,
              background-color .16s ease,
              border-color .16s ease,
              color .16s ease;
}

/* ---------- Nivel 1 · La acción principal ----------
   Una por pantalla, normalmente. Se levanta y enciende una luz de marca. */
.button.primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 22px rgba(0, 159, 155, .34);
}

.button.primary:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 3px 9px rgba(0, 159, 155, .26);
  transition-duration: .07s;
}

/* ---------- Nivel 2 · Acciones secundarias ----------
   No cambian nada por sí solas: se tiñe el borde y nada más. Sin levantarse,
   sin luz. Así nunca compiten con la principal que tienen al lado. */
.button.outline:hover,
.button.quiet:hover,
.select-button:hover,
.back-link:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(0, 159, 155, .06);
}

.button.outline:active,
.button.quiet:active,
.select-button:active { transform: scale(.985); transition-duration: .07s; }

/* ---------- Nivel 3 · Acciones con consecuencia ----------
   Restablecer, Restaurar, Rechazar. Reaccionan MÁS LENTO y sin sombra: el
   botón reconoce el gesto pero no anima a hacerlo. La fricción es a propósito. */
.button.danger-outline { transition-duration: .34s; }

.button.danger-outline:hover {
  color: #fff;
  background: #e5484d;
  border-color: #e5484d;
  box-shadow: none;
}

.button.danger-outline:active { transform: scale(.99); transition-duration: .1s; }

/* ---------- Nivel 4 · Navegación y selección ----------
   Son cientos: si brillaran, la pantalla sería un árbol de navidad. Solo tiñen. */
.more:hover { border-color: var(--teal); color: var(--teal); background: rgba(0, 159, 155, .07); letter-spacing: 1.5px; }
.more { transition: transform .16s ease, border-color .16s ease, color .16s ease, background-color .16s ease, letter-spacing .16s ease; }
.more:active { transform: scale(.93); transition-duration: .07s; }

.file-tabs button:hover:not(.on),
.employee-tabs button:hover:not(.active) { color: var(--teal); background: rgba(0, 159, 155, .06); }

.roster-card:active,
.file-person:active { transform: scale(.995); transition-duration: .07s; }

.person-cell:hover b { color: var(--teal); }

.deduction-add:hover { border-color: var(--teal); color: var(--teal); background: rgba(0, 159, 155, .06); }
.deduction-add:active { transform: scale(.97); transition-duration: .07s; }

.dropzone:hover { border-color: var(--teal); background: rgba(0, 159, 155, .05); }

.employee-status-toggle:hover { border-color: var(--teal); color: var(--teal); }

/* ---------- Nivel 5 · Campos y desplegables ---------- */
.app-shell input:not([type="file"]):hover:not(:disabled),
.app-shell select:hover:not(:disabled),
.app-shell textarea:hover:not(:disabled) { border-color: #a9b6cb; }

.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 159, 155, .16);
}

/* Los buscadores en óvalo se iluminan enteros desde la caja (:focus-within).
   El campo de adentro no tiene borde ni esquinas, así que el anillo de arriba
   le dibujaba un rectángulo dentro del óvalo al tocarlo para escribir. La
   regla del tema oscuro va aquí mismo porque pesa más que la de arriba. */
.app-shell :is(.search, .quien-buscar, .exp-buscar) input:focus-visible,
[data-theme="dark"] .app-shell :is(.search, .quien-buscar, .exp-buscar) input:focus-visible { box-shadow: none; }

/* El foco de teclado se ve siempre, en todo lo que se pueda pulsar. */
.app-shell button:focus-visible,
.roster-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- El aviso: el único momento con floritura ----------
   Es la confirmación de que algo pasó. Entra deslizándose con un rebote corto
   y sale derecho, sin ceremonia. */
.toast {
  transition: transform .34s cubic-bezier(.16, 1.02, .3, 1.28), opacity .2s ease;
  opacity: 0;
}

.toast.show { opacity: 1; }

/* ---------- Tema oscuro ---------- */
[data-theme="dark"] .button.primary:hover { box-shadow: 0 10px 22px rgba(0, 190, 180, .3); }
[data-theme="dark"] .button.outline:hover,
[data-theme="dark"] .button.quiet:hover,
[data-theme="dark"] .select-button:hover,
[data-theme="dark"] .back-link:hover,
[data-theme="dark"] .more:hover,
[data-theme="dark"] .deduction-add:hover { color: #5fd8d0; border-color: #2fd3c9; background: rgba(0, 190, 180, .1); }
[data-theme="dark"] .button.danger-outline:hover { background: #d9363e; border-color: #d9363e; color: #fff; }
[data-theme="dark"] .app-shell input:hover:not(:disabled),
[data-theme="dark"] .app-shell select:hover:not(:disabled),
[data-theme="dark"] .app-shell textarea:hover:not(:disabled) { border-color: #47566f; }
[data-theme="dark"] .app-shell input:focus-visible,
[data-theme="dark"] .app-shell select:focus-visible,
[data-theme="dark"] .app-shell textarea:focus-visible { border-color: #2fd3c9; box-shadow: 0 0 0 3px rgba(0, 190, 180, .2); }
[data-theme="dark"] .person-cell:hover b { color: #5fd8d0; }

/* ---------- Quien prefiera menos movimiento, no lo tiene ---------- */
@media (prefers-reduced-motion: reduce) {
  .button, .more, .select-button, .file-tabs button, .employee-tabs button,
  .roster-card, .file-person, .person-cell, .deduction-add, .dropzone,
  .back-link, .employee-status-toggle, .toast { transition-duration: .01ms; }
  .button.primary:hover, .button:active, .more:active,
  .roster-card:active, .file-person:active { transform: none; }
}

/* ---------- Desplegables ----------
   La flecha se voltea al abrirlo, así se sabe que está desplegado sin tener que
   mirar la lista. Es el único adorno que llevan: son controles de uso diario. */
.liquidation-picker { position: relative; }

.liquidation-picker select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.liquidation-picker:has(select)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  opacity: .55;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), opacity .16s ease;
  pointer-events: none;
}

.liquidation-picker:has(select):hover::after { opacity: .9; }
.liquidation-picker:has(select):focus-within::after { transform: rotate(225deg); opacity: 1; }
.liquidation-picker:hover select { border-color: #a9b6cb; }
.liquidation-picker:focus-within select { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 159, 155, .16); }

[data-theme="dark"] .liquidation-picker:hover select { border-color: #47566f; }
[data-theme="dark"] .liquidation-picker:focus-within select { border-color: #2fd3c9; box-shadow: 0 0 0 3px rgba(0, 190, 180, .2); }

@media (prefers-reduced-motion: reduce) {
  .liquidation-picker:has(select)::after { transition: none; }
}

/* ═══════════ El logo en relieve ═══════════
   La sombra se hace con drop-shadow, no con box-shadow: drop-shadow sigue el
   RECORTE REAL del PNG, así que abraza la silueta del panda y no dibuja un
   cuadro ni un círculo. Si mañana se cambia el logo, la sombra toma su forma
   nueva sola.

   El logo se inclina hacia donde está la flecha y la sombra cae al lado
   contrario, como si el cursor fuera la luz. Es pequeña y pegada al borde, no
   un resplandor.

   La sombra cambia de color con el tema por una razón práctica: en el claro,
   negra sobre fondo blanco se ve; en el oscuro, negra sobre fondo casi negro
   no se notaría, así que ahí va del turquesa de la casa. Sigue cayendo debajo
   y hacia el lado contrario del cursor, que es lo que la hace sombra y no
   halo. */
.logo-realce { perspective: 640px; }

.logo-realce-marco {
  position: relative;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--giroX, 0deg))
    rotateY(var(--giroY, 0deg))
    translateY(0) scale(1);
  /* En reposo, una sombra mínima: el logo apenas despega del fondo. */
  filter: drop-shadow(0 1px 1.5px rgba(12, 40, 58, .16));
  transition: transform .34s cubic-bezier(.2, .8, .25, 1), filter .34s ease;
}

.logo-realce:hover .logo-realce-marco {
  transform:
    rotateX(var(--giroX, 0deg))
    rotateY(var(--giroY, 0deg))
    translateY(-7px) scale(1.075);
}

/* El logo de la bienvenida se abraza a su tamaño para que la inclinación
   responda al puntero y no al ancho de toda la columna de texto. */
/* En bloque y ajustado al logo: en línea dejaba 3 px de más por el hueco
   que los navegadores reservan bajo el texto, y eso corría el título. */
.welcome-logo-wrap { display: block; width: fit-content; margin-inline: auto; line-height: 0; }
.welcome-logo-wrap .logo-realce-marco { display: block; }

/* Dos sombras superpuestas: una pegada al borde que define el recorte, y otra
   un poco más suelta que da la profundidad. Ninguna es voluminosa. */
.logo-realce:hover .logo-realce-marco {
  filter:
    drop-shadow(calc(var(--sombraX, 0px) * .34) calc(var(--sombraY, 10px) * .34) 2px rgba(10, 30, 50, .24))
    drop-shadow(var(--sombraX, 0px) var(--sombraY, 10px) 11px rgba(8, 24, 42, .40));
}

[data-theme="dark"] .logo-realce-marco {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .4));
}

[data-theme="dark"] .logo-realce:hover .logo-realce-marco {
  filter:
    drop-shadow(calc(var(--sombraX, 0px) * .34) calc(var(--sombraY, 10px) * .34) 2px rgba(47, 211, 201, .42))
    drop-shadow(var(--sombraX, 0px) var(--sombraY, 10px) 14px rgba(47, 211, 201, .48));
}

@media (prefers-reduced-motion: reduce) {
  .logo-realce-marco { transition: none; }
  .logo-realce:hover .logo-realce-marco { transform: none; }
}

/* ═══════════ Entrada de la pestaña ═══════════
   Al cambiar de pestaña los bloques suben en cascada corta, de arriba abajo.
   Solo al CAMBIAR de pestaña: al guardar o escribir no se repite, si no la
   pantalla estaría parpadeando todo el rato. */
@keyframes entraBloque {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.entra {
  animation: entraBloque .42s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--turno, 0) * 45ms);
}

/* Las tarjetas de cifras entran en la cascada y responden al ratón como el
   resto: se levantan un poco, sin luz (son informativas, no acciones). */
.stat-card { transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(16, 28, 66, .1); }
[data-theme="dark"] .stat-card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, .34); }

@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; }
  .stat-card { transition: none; }
  .stat-card:hover { transform: none; }
  .drawer, .anio-lista { animation: none; }
}

/* ═══════════ Arreglo del temblor al pasar el ratón ═══════════
   Los módulos del dashboard subían 7px y los del menú 2px. Si el cursor
   quedaba cerca del borde de abajo, el elemento se le escapaba, perdía el
   hover, volvía a su sitio, lo recuperaba… y temblaba sin parar.

   Se resuelve distinto en cada uno, porque el problema es distinto:

   · Menú lateral: es una lista vertical y pegada. Cualquier colchón invisible
     se solaparía con el vecino y se robarían el hover entre ellos. Aquí el
     levantamiento se quita: el tinte de fondo, la barrita de acento y el
     desplazamiento del ícono ya dicen que está encima, sin mover la caja.

   · Dashboard: es una rejilla con 18px de separación. Ahí sí cabe un colchón
     invisible de 8px que mantiene el cursor dentro aunque la tarjeta suba. */

/* --- Menú lateral: sin levantar la caja --- */
.nav-item:hover { transform: none; }

/* --- Dashboard: colchón que cabe dentro de la separación --- */
.welcome-module { position: relative; }

.welcome-module::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 22px;
  pointer-events: auto;
}

/* La tarjeta sube un poco menos que el colchón, para que nunca se le escape. */
.welcome-module:hover { transform: translateY(-5px) scale(1.03); }

/* El ícono del menú vuelve a moverse con suavidad: una regla anterior le
   reemplazó la transición del desplazamiento por la de opacidad, y el salto
   se sentía como un tirón. Ahora lleva las dos. */
.nav-item .nav-icon {
  transition: opacity .18s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
}

.welcome-module .welcome-icon {
  transition: transform .24s cubic-bezier(.2, .7, .3, 1), background-color .2s ease, color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .nav-item .nav-icon,
  .welcome-module .welcome-icon { transition: none; }
  .welcome-module:hover { transform: none; }
}

/* ═══════════ Aguinaldos · el período ═══════════
   El aguinaldo no es una fecha: es una acumulación de doce meses, de diciembre
   a noviembre. Antes el bloque solo decía el rango; ahora enseña en qué parte
   del período vamos, qué meses ya tienen registro y cuánto falta para la fecha
   de pago que manda la ley. El color es el mismo que identifica a Aguinaldos
   en el menú y en el dashboard. */
.agui-periodo {
  --acento: var(--teal);
  margin: 18px 0;
  padding: 20px 24px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.agui-periodo > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Este rótulo iba en turquesa mientras los de todas las demás tarjetas van
   en gris: era el único que cantaba distinto y por eso no entonaba. Ahora
   lleva el mismo tono y el mismo peso que los otros. */
.agui-periodo header small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.agui-periodo header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.agui-periodo header h2 svg { width: 17px; height: 17px; color: var(--acento); opacity: .8; }

/* ---- La tira de doce meses ----
   Cada segmento es un mes real del período. Lleno = ya tiene horas
   registradas; hueco = todavía no. El mes en curso lleva un punto debajo. */
.agui-tira {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  margin: 18px 0 14px;
}

.agui-mes { display: grid; gap: 6px; justify-items: center; }

.agui-mes i {
  display: block;
  width: 100%;
  height: 9px;
  border-radius: 5px;
  background: var(--line);
  transition: background-color .2s ease, transform .2s ease;
}

.agui-mes small { color: #98a2b3; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }

.agui-mes.sin i { background: #e3e8f0; }
.agui-mes.sin small { color: #aab4c4; }
.agui-mes.con i { background: var(--acento); }
.agui-mes.con small { color: var(--acento); }

/* El mes en curso: se marca con un punto, sin gritar. */
.agui-mes.hoy small { position: relative; color: var(--ink); }
.agui-mes.hoy small::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--acento);
}

.agui-mes:hover i { transform: scaleY(1.5); }

.agui-periodo > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.agui-periodo footer p { margin: 0; font-size: 12.5px; }
.agui-avance { color: #6b7892; }
.agui-avance b { color: var(--ink); font-variant-numeric: tabular-nums; }
.agui-ley { display: inline-flex; align-items: center; gap: 7px; color: #8894ab; font-size: 11.5px; }
.agui-ley svg { width: 14px; height: 14px; }
.agui-ley b { color: var(--acento); font-variant-numeric: tabular-nums; }

[data-theme="dark"] .agui-periodo { --acento: #5fd8d0; }
[data-theme="dark"] .agui-mes.sin i { background: rgba(255, 255, 255, .09); }
[data-theme="dark"] .agui-mes.sin small { color: #6b7896; }
[data-theme="dark"] .agui-mes.con i { background: var(--acento); }
[data-theme="dark"] .agui-mes.con small { color: var(--acento); }
[data-theme="dark"] .agui-avance { color: #9aa6bd; }
[data-theme="dark"] .agui-ley { color: #8794ac; }

@media (max-width: 1120px) {
  .agui-periodo { padding: 16px 18px 14px; }
  .agui-periodo header h2 { font-size: 18px; }
  .agui-mes small { font-size: 9.5px; }
}

/* ══ Aguinaldos: las cuatro fichas ═════════════════════════════════════════
   Tres dicen y una hace. Antes las tres que dicen eran una tira dividida por
   rayitas y el botón de comprobante andaba solo, centrado, en su propia fila.
   Ahora son cuatro piezas del mismo tamaño y la que se toca va de primera.

   La diferencia entre "esto se lee" y "esto se aprieta" no se escribe: se ve.
   La primera lleva el color del acento, se levanta al acercarle el mouse, el
   ícono se inclina y la flecha camina. Las otras tres se quedan quietas. */
.agui-fichas {
  --acento: var(--teal);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.agui-ficha {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--e1);
  text-align: left;
}

.agui-ficha-icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

.agui-ficha-icono svg { width: 20px; height: 20px; stroke-width: 2; }

.agui-ficha-texto { display: grid; gap: 3px; min-width: 0; }
.agui-ficha-texto small { color: #6b7892; font-size: 11.5px; line-height: 1.3; }
.agui-ficha-texto strong {
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 620;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* La del monto: es la cifra que uno vino a ver. */
.agui-ficha.destacada .agui-ficha-icono { color: #d68d0f; background: rgba(243, 154, 0, .13); }
.agui-ficha.destacada .agui-ficha-texto strong { font-size: 19px; letter-spacing: -.02em; }

/* ---- La que se aprieta ---- */
.agui-accion {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-color: color-mix(in srgb, var(--acento) 32%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 9%, var(--card)), var(--card) 70%);
  /* El resplandor y el borde van más lentos y con una curva pareja
     (ease-out simple, sin el arranque brusco de --ease): que se sienta
     como una luz que sube poco a poco, no como un flash. */
  transition: transform var(--dur-2) var(--ease), box-shadow .4s ease-out, border-color .4s ease-out;
}

.agui-accion .agui-ficha-icono {
  color: #fff;
  /* Un poco más oscuro que el --acento a secas: ese color, de fondo
     sólido en un cuadrito chico, se ve demasiado fosforescente. Solo
     aquí —no se toca la variable compartida con el resto de la
     pantalla. */
  background: color-mix(in srgb, var(--acento) 90%, black);
  /* En reposo casi no se nota: el resplandor grande es el premio de
     acercarse a la tarjeta, no algo que ya está prendido de por sí. */
  box-shadow: 0 2px 6px color-mix(in srgb, var(--acento) 10%, transparent);
  /* El ícono se eleva de una vez; su resplandor se enciende un poco
     después, para que se sienta como dos pasos y no como uno solo. */
  transition: transform var(--dur-2) var(--ease), box-shadow .3s ease-out .08s;
}

/* Las tres rayitas del recibo (las líneas de "aquí hay algo escrito"): en
   reposo se ven completas; al acercar el mouse se vuelven a trazar de
   arriba a abajo, despacio y a ritmo parejo (lineal), para que se note
   claramente que se están escribiendo una por una. */
.agui-accion .agui-ficha-icono svg path:nth-child(2) { stroke-dasharray: 6; stroke-dashoffset: 0; }
.agui-accion .agui-ficha-icono svg path:nth-child(3) { stroke-dasharray: 8; stroke-dashoffset: 0; }
.agui-accion .agui-ficha-icono svg path:nth-child(4) { stroke-dasharray: 5; stroke-dashoffset: 0; }

@keyframes agui-escribir { from { stroke-dashoffset: var(--largo); } to { stroke-dashoffset: 0; } }

.agui-accion:hover .agui-ficha-icono svg path:nth-child(2) { --largo: 6; animation: agui-escribir .34s linear backwards; }
.agui-accion:hover .agui-ficha-icono svg path:nth-child(3) { --largo: 8; animation: agui-escribir .34s linear .1s backwards; }
.agui-accion:hover .agui-ficha-icono svg path:nth-child(4) { --largo: 5; animation: agui-escribir .34s linear .2s backwards; }

.agui-accion .agui-ficha-texto strong { color: var(--acento); }

/* El texto ("Comprobante" / "Ver PDF") se levanta un poquito junto con
   el ícono; la etiqueta de arriba se mueve primero y la de abajo un
   pelín después, para que no suban las dos pegadas como un bloque. */
.agui-accion .agui-ficha-texto small { display: block; transition: transform .35s ease-out; }
.agui-accion .agui-ficha-texto strong { display: block; transition: transform .35s ease-out .06s; }
.agui-accion:hover .agui-ficha-texto small,
.agui-accion:hover .agui-ficha-texto strong { transform: translateY(-2px); }

.agui-ficha-flecha {
  margin-left: auto;
  color: var(--acento);
  opacity: .55;
  /* La flecha es el último paso de la cadena: espera a que el ícono ya
     esté encendido antes de moverse. Su iluminación (la opacidad) va
     más lenta y pareja, igual que el resplandor del cuadro. La espera
     es corta a propósito: que no se sienta como que tarda en arrancar. */
  transition: transform var(--dur-2) var(--ease) .12s, opacity .4s ease-out .12s;
}

/* Ojo: .agui-ficha-flecha va puesto sobre el propio <svg> (así lo arma
   dibujarIconos), no sobre un contenedor que lo envuelva. Un selector
   "... svg" aquí nunca encuentra nada. */
.agui-ficha-flecha { width: 17px; height: 17px; }

/* El tronco (la línea recta) se llena de izquierda a derecha; en cuanto
   llega al vértice, las dos líneas de la puntita —partidas en dos
   trazos por JS, ver render()— se llenan parejas hacia cada lado, como
   si el mismo chorro de agua se abriera en dos al llegar. Las tres van
   a velocidad LINEAL y pareja (mismo ritmo: unidad de línea entre
   0,02s) para que se sienta como un solo chorro sin frenar ni
   arrancar de golpe entre el tronco y la puntita. */
.agui-ficha-flecha path:first-child { stroke-dasharray: 14; stroke-dashoffset: 0; }
.agui-accion:hover .agui-ficha-flecha path:first-child { --largo: 14; animation: agui-escribir .28s linear .12s backwards; }

.agui-ficha-flecha .agui-punta-lado { stroke-dasharray: 9.9; stroke-dashoffset: 0; }
.agui-accion:hover .agui-ficha-flecha .agui-punta-lado { --largo: 9.9; animation: agui-escribir .2s linear .4s backwards; }

.agui-accion:hover {
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
  /* Sombra normal, oscura y discreta —no del color de la marca—, y más
     chica que la de "tarjeta flotando": como ya no se levanta, esa
     sombra grande se derramaba sobre las tarjetas vecinas. */
  box-shadow: 0 6px 14px rgba(16, 28, 66, .10);
}

.agui-accion:hover .agui-ficha-icono { transform: scale(1.08); box-shadow: 0 5px 12px color-mix(in srgb, var(--acento) 28%, transparent); }
.agui-accion:hover .agui-ficha-flecha { transform: translateX(5px); opacity: 1; }
.agui-accion:active { transform: translateY(1px); box-shadow: var(--e1); }

/* ══ Aguinaldos: el cuerpo ═════════════════════════════════════════════════ */
.agui-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}

.agui-meses,
.agui-panel {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--e1);
}

.agui-meses > header { margin-bottom: 16px; }
.agui-meses h2,
.agui-panel h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.agui-meses > header p { margin: 5px 0 0; color: #7d89a1; font-size: 12px; line-height: 1.45; max-width: 62ch; }

/* ---- Doce meses, doce columnas ----
   Antes era una lista de renglones con una barrita horizontal: tres columnas
   de texto por mes, que se veía a como una tabla de contabilidad. Esto es
   una gráfica de verdad —columnas que suben desde una base, con líneas guía
   de fondo— comparada contra el mes más alto de esta persona en este
   período; no hay tope inventado.

   El monto de cada mes solo aparece al pasar el mouse, o siempre en el mes
   en curso: doce cifras a la vista de una vez es ruido, no información. */
/* El alto de la PISTA: la franja donde viven las barras. Es de alto fijo y
   la comparten las doce columnas y las rayas, así que una raya rotulada
   "₡400 mil" cae exactamente donde llegaría una barra de ₡400 mil. */
.agui-grafica { position: relative; padding: 4px 2px 0; --agui-pista: 118px; --agui-carril: 42px; }

.agui-grafica-lineas {
  position: absolute;
  left: var(--agui-carril);
  right: 0;
  top: 16px;                 /* justo debajo de la fila del monto */
  height: var(--agui-pista);
  pointer-events: none;      /* el mouse sigue agarrando las barras */
  z-index: 0;                /* la cuadrícula va DETRÁS de las barras */
}

.agui-grafica-lineas span {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--line) 75%, transparent);
}

/* El monto de la raya, por dentro y en voz baja: quien lo busca lo lee, y
   a quien no le interesa casi ni lo nota. En vez de una pastilla sólida
   —que se vería como una calcomanía pegada encima de la barra— lleva un
   halo del color de la tarjeta, así se sigue leyendo cuando una barra le
   pasa por detrás sin taparla. */
.agui-grafica-lineas em {
  position: absolute;
  right: 100%;               /* en su carril, pegados a donde arranca la raya */
  margin-right: 7px;
  bottom: -5px;              /* centrados con la raya */
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agui-columnas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  padding-left: var(--agui-carril);   /* el carril de los montos */
}

/* Tres filas de alto conocido —monto, pista, mes— para que el piso de las
   barras sea el mismo en las doce. Antes la columna era flexible y el
   rótulo de diciembre, que lleva el año debajo, le subía el piso doce
   píxeles: su barra flotaba y se veía más alta de lo que era. */
.agui-col {
  display: grid;
  /* La columna se fija al ancho que le toca y NO crece con su contenido.
     Sin esto, el monto —que va en una sola línea y puede ser largo, como
     "₡617 864,67"— ensanchaba la columna de adentro, la pista se estiraba
     con ella y la barra quedaba corrida a la derecha: los meses con
     decimales se veían desparejos frente a los redondos. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 16px var(--agui-pista) 18px;
  justify-items: center;
  align-items: end;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-1) ease;
  position: relative;
  z-index: 1;
}

.agui-col-pista {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.agui-col:hover,
.agui-col.hoy { background: color-mix(in srgb, var(--teal) 7%, transparent); }

/* El monto se sale de su columna a propósito cuando es largo: es un
   rótulo que aparece al pasar el mouse, no una pieza del armazón. Si
   empujara el ancho, descuadraría la barra de abajo. */
.agui-col-monto {
  justify-self: center;
  margin-bottom: 7px;
  color: #7d89a1;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--dur-1) ease, transform var(--dur-1) ease;
}

.agui-col:hover .agui-col-monto,
.agui-col.hoy .agui-col-monto { opacity: 1; transform: none; color: var(--ink); }

.agui-col-barra {
  width: 60%;
  max-width: 24px;
  min-height: 5px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 88%, #fff), var(--teal));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--teal) 24%, transparent);
  transform-origin: bottom center;
  animation: agui-crece-v .5s var(--ease) both;
}

.agui-col:hover .agui-col-barra,
.agui-col.hoy .agui-col-barra { box-shadow: 0 3px 14px color-mix(in srgb, var(--teal) 38%, transparent); }

.agui-col-barra { animation-delay: calc(var(--turno, 0) * .03s + .02s); }

@keyframes agui-crece-v {
  from { transform: scaleY(0); opacity: .3; }
  to { transform: scaleY(1); opacity: 1; }
}

/* Un mes sin registro no es un cero: es un hueco, no una columna. */
.agui-col.sin .agui-col-barra {
  width: 40%;
  min-height: 6px;
  background: none;
  border: 1px dashed color-mix(in srgb, var(--line) 95%, transparent);
  border-radius: 999px;
  box-shadow: none;
  animation: none;
}

.agui-col-mes {
  margin-top: 9px;
  color: #98a2b3;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
}

.agui-col-mes small { display: block; margin-top: 1px; font-size: 9px; font-weight: 500; opacity: .75; }

.agui-col.sin .agui-col-mes { color: #aab4c4; }
.agui-col.hoy .agui-col-mes { color: var(--teal); }

.agui-vacio { padding: 10px 0; }

/* ---- El panel de la derecha ----
   Se quitó el renglón "Estado: Pendiente". No decía nada que el botón de
   abajo no dijera ya, y "pendiente" suena a trámite atorado cuando lo normal
   en marzo es que el aguinaldo todavía no se haya pagado. */
.agui-resumen { display: grid; gap: 0; margin: 14px 0 16px; }
.agui-resumen > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.agui-resumen dt { color: #7d89a1; font-size: 12.5px; }
.agui-resumen dd { margin: 0; color: var(--ink); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.agui-resumen-total { border-bottom: 0 !important; padding-top: 13px !important; }
.agui-resumen-total dt { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.agui-resumen-total dt small { display: block; color: #9aa5ba; font-size: 11px; font-weight: 400; }
.agui-resumen-total dd { color: var(--teal); font-size: 24px; font-weight: 650; letter-spacing: -.02em; }

.agui-panel .button { width: 100%; justify-content: center; margin-top: 4px; }
.agui-panel .cfg-note { margin: 0 0 12px; }

/* ---- Cuando ya está pagado ---- */
.agui-pagado { margin-top: 14px; text-align: center; }
.agui-pagado-marca {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 4px auto 12px;
  border-radius: 50%;
  color: #0f9d58;
  background: rgba(15, 157, 88, .12);
}
.agui-pagado-marca svg { width: 26px; height: 26px; stroke-width: 2; }
.agui-pagado b { display: block; color: var(--ink); font-size: 15px; font-weight: 620; }
.agui-pagado p { margin: 7px 0 0; color: #7d89a1; font-size: 12.5px; line-height: 1.55; }
.agui-pagado p b { display: inline; color: var(--ink); font-weight: 600; }

/* ---- El cuadro de confirmación ----
   Pagar no se puede deshacer, así que el cuadro dice lo mínimo y lo dice
   claro: de quién, de qué período, cuánto, y que después no hay vuelta. */
.agui-confirmar { text-align: center; }
.agui-confirmar-icono {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  color: #d68d0f;
  background: rgba(243, 154, 0, .13);
}
.agui-confirmar-icono svg { width: 28px; height: 28px; stroke-width: 1.9; }
.agui-confirmar h2 { margin: 0; font-size: 19px; font-weight: 620; letter-spacing: -.015em; }
.agui-confirmar-quien { margin: 6px 0 20px; color: #7d89a1; font-size: 13.5px; }

.agui-confirmar-datos {
  display: grid;
  gap: 0;
  margin: 0 0 18px;
  padding: 4px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--line) 22%, transparent);
  text-align: left;
}
.agui-confirmar-datos > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.agui-confirmar-datos dt { color: #7d89a1; font-size: 12.5px; }
.agui-confirmar-datos dd { margin: 0; color: var(--ink); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agui-confirmar-total { border-bottom: 0 !important; }
.agui-confirmar-total dt { color: var(--ink); font-size: 14px; font-weight: 600; }
.agui-confirmar-total dd { color: var(--teal); font-size: 22px; font-weight: 650; letter-spacing: -.02em; }

.agui-confirmar-alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid rgba(192, 57, 43, .28);
  border-radius: var(--r-sm);
  background: rgba(192, 57, 43, .07);
  color: #a5352a;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}
.agui-confirmar-alerta svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }
.agui-confirmar-alerta b { font-weight: 700; }
.agui-confirmar .drawer-actions { justify-content: center; }

/* ---- Tema oscuro ---- */
[data-theme="dark"] .agui-fichas { --acento: #5fd8d0; }
[data-theme="dark"] .agui-ficha-texto small { color: #9aa6bd; }
[data-theme="dark"] .agui-ficha.destacada .agui-ficha-icono { color: #e6b45f; background: rgba(214, 150, 20, .20); }
[data-theme="dark"] .agui-accion .agui-ficha-icono { color: #0b2c2b; }
[data-theme="dark"] .agui-accion:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, .32); }
[data-theme="dark"] .agui-meses > header p,
[data-theme="dark"] .agui-resumen dt,
[data-theme="dark"] .agui-pagado p,
[data-theme="dark"] .agui-confirmar-quien,
[data-theme="dark"] .agui-confirmar-datos dt { color: #8d99b1; }
[data-theme="dark"] .agui-col-monto { color: #8d99b1; }
[data-theme="dark"] .agui-col.sin .agui-col-mes,
[data-theme="dark"] .agui-resumen-total dt small { color: #79859d; }
[data-theme="dark"] .agui-col-barra { background: linear-gradient(180deg, #7ee6e0, #5fd8d0); box-shadow: 0 3px 10px rgba(95, 216, 208, .22); }
[data-theme="dark"] .agui-col:hover .agui-col-barra,
[data-theme="dark"] .agui-col.hoy .agui-col-barra { box-shadow: 0 3px 14px rgba(95, 216, 208, .4); }
[data-theme="dark"] .agui-col.sin .agui-col-barra { background: none; }
[data-theme="dark"] .agui-col:hover,
[data-theme="dark"] .agui-col.hoy { background: rgba(95, 216, 208, .10); }
[data-theme="dark"] .agui-col.hoy .agui-col-mes { color: #5fd8d0; }
[data-theme="dark"] .agui-resumen-total dd,
[data-theme="dark"] .agui-confirmar-total dd { color: #5fd8d0; }
[data-theme="dark"] .agui-pagado-marca { color: #5fd08a; background: rgba(46, 190, 120, .16); }
[data-theme="dark"] .agui-confirmar-icono { color: #e6b45f; background: rgba(214, 150, 20, .18); }
[data-theme="dark"] .agui-confirmar-datos { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .agui-confirmar-alerta { border-color: rgba(224, 108, 95, .34); background: rgba(224, 108, 95, .10); color: #f0a79c; }

/* ---- Ventana angosta ----
   PandaTech es de escritorio, pero la ventana se puede achicar. A 1240 las
   cuatro fichas pasan a dos filas de dos y el panel baja debajo de los meses;
   nunca se convierte en una columna de celular. */
@media (max-width: 1240px) {
  .agui-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agui-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1120px) {
  .agui-meses, .agui-panel { padding: 16px 18px; }
  .agui-grafica { --agui-pista: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .agui-col-barra { animation: none; }
  .agui-accion:hover .agui-ficha-icono { transform: none; }
  .agui-accion:hover .agui-ficha-icono svg path { animation: none; }
  .agui-accion:hover .agui-ficha-flecha path { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .agui-mes i { transition: none; }
  .agui-mes:hover i { transform: none; }
}

/* Los meses van con tres letras: una sola se repetía entre marzo/mayo,
   junio/julio y abril/agosto, y había que adivinar cuál era cuál. */
.agui-mes small { font-size: 10px; letter-spacing: .02em; text-transform: capitalize; }

/* Leyenda: qué significa lleno y qué significa hueco, sin tener que preguntar. */
.agui-leyenda {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  color: #8894ab;
  font-size: 11.5px;
}

.agui-leyenda .agui-muestra {
  width: 16px;
  height: 7px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.agui-leyenda .agui-muestra.con { background: var(--acento); }
.agui-leyenda .agui-muestra.sin { background: #e3e8f0; margin-left: 10px; }

[data-theme="dark"] .agui-leyenda { color: #8794ac; }
[data-theme="dark"] .agui-leyenda .agui-muestra.sin { background: rgba(255, 255, 255, .09); }

@media (max-width: 1120px) {
  .agui-mes small { font-size: 9px; }
  .agui-leyenda { flex-wrap: wrap; row-gap: 4px; }
}

/* ═══════════ Aguinaldos · las cuatro cifras ═══════════
   Van en su propio cuadro, centrado y con ancho contenido. Estiradas de lado a
   lado se veían perdidas: cuatro datos separados por 300px cada uno no se leen
   como un grupo. Con el cuadro centrado se leen de un vistazo, igual que se
   veían en ventana pequeña.

   El contenedor además seguía armado para dos columnas (antes el rectángulo
   del período iba a la izquierda), y con un solo hijo las cifras quedaban
   aplastadas en 340px: por eso a pantalla completa salía "Yalila / 0 de / 12 /
   meses". */
.agui-overview {
  grid-template-columns: minmax(0, 1fr);
  width: min(880px, 86%);
  margin-inline: auto;
}

.agui-overview .metrics-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px 0;
}

/* Cada cifra centrada en su casilla: el ícono arriba en su pastilla, debajo el
   nombre del dato y de último el número, que es lo que se busca. */
.agui-overview .metrics-strip > span {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 18px 14px;
  font-size: 0;
  text-align: center;
}

.agui-overview .metrics-strip > span svg {
  width: 19px;
  height: 19px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 12px;
  color: var(--teal);
  background: rgba(0, 159, 155, .10);
}

.agui-overview .metrics-strip b { font-size: 11.5px; line-height: 1.35; }
.agui-overview .metrics-strip strong {
  margin-top: 4px;
  font-size: 19px;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .agui-overview .metrics-strip > span svg {
  color: #5fd8d0;
  background: rgba(0, 190, 180, .14);
}

/* En ventana angosta pasan a dos y dos, que es como ya se veían bien. */
@media (max-width: 1120px) {
  .agui-overview .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agui-overview .metrics-strip > span { padding: 15px 12px; }
  .agui-overview .metrics-strip strong { font-size: 17px; }
}

/* ═══════════ Barra "Viendo a" ═══════════
   Es el control principal de cada pestaña: escoge de quién se están viendo los
   datos. Va en fila, con foto y nombre, y la persona escogida se enciende con
   el color de la pestaña. */
.quien {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.quien-titulo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding-left: 4px;
  color: #7b879e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.quien-titulo svg { width: 14px; height: 14px; color: var(--acento, var(--teal)); }

/* Si algún día son muchos, la fila se desliza de lado en vez de amontonarse. */
.quien-lista {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}

.quien-lista::-webkit-scrollbar { display: none; }

.quien-ficha {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 6px 14px 6px 6px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #5f6d88;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .1s ease;
}

.quien-ficha b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.quien-ficha .avatar { width: 30px; height: 30px; font-size: 11.5px; }

.quien-ficha:hover:not(.on) { background: rgba(15, 30, 60, .05); color: var(--ink); }
.quien-ficha:active { transform: scale(.97); }
.quien-ficha:focus-visible { outline: 2px solid var(--acento, var(--teal)); outline-offset: 2px; }

/* La persona escogida: borde y letra del color de la pestaña, fondo apenas
   teñido. No se rellena entera para que la foto siga leyéndose. */
.quien-ficha.on {
  position: relative;
  border-color: var(--acento, var(--teal));
  color: var(--acento, var(--teal));
  background: color-mix(in srgb, var(--acento, var(--teal)) 10%, transparent);
}
/* La única animación de ambiente de toda la casa, puesta a propósito en un
   solo sitio: quién se está viendo es lo primero que hay que confirmar al
   entrar a cualquier pestaña, y en una lista de siete u ocho personas el
   aro fijo se pierde. Este pulso lento —como el punto verde de "en línea"—
   dice "este de aquí" sin gritar; por eso es tan suave y tan lento. */
.quien-ficha.on::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid var(--acento, var(--teal));
  border-radius: inherit;
  animation: quien-pulso 2.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes quien-pulso {
  0%   { opacity: .5; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.16); }
  100% { opacity: 0; transform: scale(1.16); }
}

[data-theme="dark"] .quien { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .quien-titulo { color: #8794ac; }
[data-theme="dark"] .quien-ficha { color: #9aa6bd; }
[data-theme="dark"] .quien-ficha:hover:not(.on) { background: rgba(255, 255, 255, .06); color: var(--ink); }
[data-theme="dark"] .quien-ficha.on { background: color-mix(in srgb, var(--acento, var(--teal)) 16%, transparent); }

@media (max-width: 1120px) {
  .quien { flex-direction: column; align-items: stretch; gap: 8px; }
  .quien-lista { padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .quien-ficha { transition: none; }
  .quien-ficha:active { transform: none; }
  .quien-ficha.on::after { animation: none; display: none; }
}

/* La tarjeta de cifras ya no lleva el bloque de la persona: la barra "Viendo a"
   de arriba dice a quién se está viendo, y repetirlo dos veces sobraba. */
.selected-summary.solo-cifras { padding: 0; }
.selected-summary.solo-cifras .metric-group { flex: 1; }

@media (max-width: 1120px) {
  .selected-summary.solo-cifras { flex-direction: column; }
}

/* ── Expedientes y Reportes sin la lista de compañeros ─────────────────── */
/* La columna de 365px sostenía la lista lateral de colaboradores. Ahora que
   la selección vive en la barra "Viendo a", el detalle ocupa todo el ancho. */
.files-layout{ grid-template-columns: minmax(0, 1fr); }

/* La ficha del colaborador: el concepto manda, el dato se lee de corrido. */
.report-table td:nth-child(2){ font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.report-table th:nth-child(2){ text-align: left; }

/* La tira de contexto ya no lleva foto ni nombre (para eso está "Viendo a"):
   rótulo a la izquierda, sus etiquetas al lado y la explicación a la derecha. */
.selected-person-bar{ gap: 11px; padding: 13px 18px; }
.selected-person-bar > small{
  align-self: center; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento, var(--teal));
}
.selected-person-bar > small::after{
  content: ""; display: inline-block; width: 1px; height: 13px;
  margin: -2px 0 -2px 11px; vertical-align: middle; background: var(--line);
}
.selected-person-bar .badge{ margin-left: 0; }
.selected-person-bar p{ margin: 0 0 0 auto; padding-left: 18px; text-align: right; font-size: 13px; }

/* Al quitar el filtro de colaborador quedaron dos campos y el botón: que el
   botón conserve su tamaño en vez de estirarse a lo ancho de la fila. */
.report-filter > .button{ flex: 0 0 auto; justify-self: start; width: auto; }

/* Expedientes lista los seis documentos del expediente básico: los cargados y
   los que faltan, para que "0 de 6" diga cuáles son y no solo cuántos. */
.fila-pendiente td{ color: var(--muted, #7e8aa3); }
.fila-pendiente td:first-child{ font-weight: 500; }
b.pdf.vacio{ opacity: .45; filter: grayscale(1); }
.link-upload{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px dashed var(--line); border-radius: 8px;
  background: transparent; color: var(--teal); font-size: 13px; font-weight: 600;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.link-upload svg{ width: 14px; height: 14px; }
.link-upload:hover{ border-style: solid; border-color: var(--teal); background: rgba(13,148,136,.08); transform: translateY(-1px); }
.link-upload:active{ transform: translateY(0); }

/* ═══════════ Buscar dentro de "Viendo a" ═══════════
   Con cinco personas las fichas se ven todas; con treinta hay que poder
   encontrar a alguien por nombre o por cédula sin recorrer la fila. La lupa
   vive plegada al final de la barra y se abre sola al acercar el puntero, así
   la fila nunca crece ni se parte en dos renglones. */
.quien-lista { flex: 1 1 auto; }

.quien-buscar {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #7b879e;
  cursor: text;
  transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}

.quien-buscar svg { width: 16px; height: 16px; flex: 0 0 auto; }

.quien-buscar input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  /* El compás de la casa: la curva con aterrizaje suave que usa todo el
     programa, y la duración larga, que es la que se siente "con peso".
     Antes eran .26s con una curva propia y se sentía seco. */
  transition: width var(--dur-3) var(--ease-abrir), padding var(--dur-3) var(--ease-abrir);
}

.quien-buscar input::-webkit-search-cancel-button,
.quien-buscar input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Al pasar el ratón se ENCIENDE —canto y fondo—, para que se vea que es un
   botón. Pero no se abre: abrirse es cosa de tocarlo.

   Antes se abría con solo pasar por encima, y eso hacía que el cuadro
   apareciera solo, sin que uno hiciera nada. Erick lo describió bien: "pongo
   el mouse encima y empieza así, instantáneo". Ahora se presiona y se abre. */
.quien-buscar:hover { border-color: var(--line); background: rgba(15, 30, 60, .04); color: var(--ink); }
.quien-buscar:focus-within { border-color: var(--acento, var(--teal)); color: var(--acento, var(--teal)); }
.quien-buscar:focus-within input,
.quien.buscando .quien-buscar input { width: 166px; }
.quien.buscando .quien-buscar { border-color: var(--acento, var(--teal)); }

/* Cuántas quedan de cuántas, solo mientras se busca. */
.quien-conteo {
  flex: 0 0 auto;
  color: var(--acento, var(--teal));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.quien-vacio {
  padding: 0 10px;
  color: #8794ac;
  font-size: 13px;
  white-space: nowrap;
}

[data-theme="dark"] .quien-buscar { color: #8794ac; }
[data-theme="dark"] .quien-buscar:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .quien-buscar,
  .quien-buscar input { transition: none; }
}

/* En ventana angosta la barra se apila; la lupa se queda a su tamaño y no se
   estira de lado a lado. */
@media (max-width: 1120px) {
  .quien-buscar { align-self: flex-start; }
  .quien-buscar input { width: 166px; }
}

/* ═══════════ Cinco recuadros en una fila ═══════════
   Pagos y Liquidaciones llevan cinco cifras. Antes la quinta caía sola en un
   segundo renglón; ahora la fila se reparte entre las cinco. */
.stats.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }

/* La segunda línea de un recuadro: la modalidad de pago, el artículo de ley.
   Va pequeña y apagada para que la cifra siga siendo lo que se lee primero. */
.stat-card strong em {
  display: block;
  margin-top: 3px;
  color: #8794ac;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .01em;
}

@media (max-width: 1120px) { .stats.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Los botones de Aguinaldos, centrados bajo el cuadro de cifras. */
.toolbar.toolbar-centrada { justify-content: center; }

/* ═══════════ Faltas dentro del cuadro del período ═══════════
   La rebaja sale de las horas que se anotan arriba; esto guarda el día y el
   motivo, que es lo que el Código de Trabajo pide y las horas no dicen.
   Sirve igual en semanal, quincenal y mensual: el bloque se dibuja dentro de
   cada período que tenga esa forma de pago. */
.faltas-block{
  margin: 14px 0 0;
  padding: 13px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.faltas-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faltas-head > b{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.faltas-head > b svg{ width: 15px; height: 15px; color: var(--red, #e5484d); }

.faltas-lista{ display: grid; gap: 8px; margin-top: 11px; }
.faltas-vacio{ margin: 0; color: #8794ac; font-size: 12.5px; }

.falta-fila{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(229, 72, 77, .045);
}

.falta-fila > svg{ width: 16px; height: 16px; flex: 0 0 auto; color: var(--red, #e5484d); }
.falta-fila > span{ flex: 1; min-width: 0; display: grid; gap: 2px; }
.falta-fila b{ font-size: 13px; font-weight: 600; }
.falta-fila small{ color: #8794ac; font-size: 12px; }

.falta-quitar{
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: #8794ac;
  transition: background-color .16s ease, color .16s ease;
}
.falta-quitar svg{ width: 14px; height: 14px; }
.falta-quitar:hover{ background: rgba(229, 72, 77, .13); color: var(--red, #e5484d); }

[data-theme="dark"] .falta-fila{ background: rgba(229, 72, 77, .09); }

@media (prefers-reduced-motion: reduce) { .falta-quitar{ transition: none; } }
/* La etiqueta de estado se quedaba estirada ocupando el sobrante de la fila. */
.falta-fila .badge{ flex: 0 0 auto; align-self: center; }

/* ═══════════ Campanita de avisos ═══════════
   Es lo primero que se ve al abrir el programa, así que va arriba a la derecha
   junto a Configuración, del mismo tamaño que ella, sin gritar. */
.welcome-acciones{
  position: absolute; z-index: 2;
  top: 40px; right: 55px;
  display: flex; align-items: stretch; gap: 12px;
}
.welcome-acciones .settings-float{ position: static; top: auto; right: auto; }

.campana-float{
  position: relative;
  display: grid; place-items: center;
  width: 54px;
  border: 0; border-radius: 15px;
  color: var(--ink); background: #fff;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.campana-float svg{ width: 21px; height: 21px; transform-origin: 50% 18%; }
.campana-float:hover{ transform: translateY(-4px); box-shadow: 0 14px 26px rgba(16, 28, 66, .16); }
.campana-float:active{ transform: translateY(-1px); }

/* El número solo aparece si hay algo que atender. */
.campana-float > b{
  position: absolute; top: 9px; right: 9px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #e5484d; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
}
.campana-float.con-avisos svg{ color: #e5484d; }

[data-theme="dark"] .campana-float{ background: var(--card); color: var(--ink); }

/* Cerrar sesión, en la portada, donde no hay barra lateral. Mismo trato que
   la campanita —igual de grande, mismo canto, misma sombra— porque son
   vecinas y tienen que verse de la misma familia. Solo existe con la sesión
   abierta: en una planilla sin cuentas la portada queda igual que antes. */
.salir-float{
  position: relative;
  display: grid; place-items: center;
  width: 54px;
  border: 0; border-radius: 15px;
  color: var(--muted); background: #fff;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, color .22s ease;
}
.salir-float svg{ width: 20px; height: 20px; }
.salir-float:hover{ transform: translateY(-4px); box-shadow: 0 14px 26px rgba(16, 28, 66, .16); color: var(--red); }
.salir-float:active{ transform: translateY(-1px); }
/* En oscuro, --muted (#66728d) sobre la tarjeta queda al filo de lo legible
   para un ícono: se sube al gris claro que usa el resto del tema oscuro. */
[data-theme="dark"] .salir-float{ background: var(--card); color: #9aa6bd; }

/* El panel: una línea por asunto, y cada una lleva a donde se arregla. */
.avisos-lista{ display: grid; gap: 9px; }

.aviso-fila{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 11px;
  background: transparent; color: var(--ink); text-align: left;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.aviso-fila > svg:first-child{ width: 19px; height: 19px; flex: 0 0 auto; color: #d98324; }
.aviso-fila.urgente > svg:first-child{ color: #e5484d; }
.aviso-fila > span{ flex: 1; min-width: 0; display: grid; gap: 3px; }
.aviso-fila b{ font-size: 13.5px; font-weight: 650; }
.aviso-fila small{ color: #8794ac; font-size: 12px; line-height: 1.45; }
.aviso-flecha{ width: 16px; height: 16px; flex: 0 0 auto; color: #b3bccd; transition: transform .18s ease; }
.aviso-fila:hover{ border-color: var(--teal); background: rgba(13, 148, 136, .05); transform: translateX(2px); }
.aviso-fila:hover .aviso-flecha{ transform: translateX(3px); color: var(--teal); }

.avisos-vacio{ display: flex; align-items: center; gap: 9px; margin: 0; color: #8794ac; font-size: 13px; }
.avisos-vacio svg{ width: 17px; height: 17px; color: #12a594; }

/* ═══════════ El aviso que detiene el guardado ═══════════ */
.falta-aviso > h2{ display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.falta-aviso > h2 svg{ width: 21px; height: 21px; color: #d98324; }
.falta-aviso > p{ margin: 0 0 9px; font-size: 14px; line-height: 1.55; }
.falta-aviso-nota{ color: #7e8aa3; font-size: 13px !important; }

/* El número rojo del bloque de faltas: algo quedó sin explicar. */
.faltas-pendiente{
  min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: #e5484d; color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 1;
}
.faltas-aviso{
  display: flex; align-items: center; gap: 8px;
  margin: 0; color: #d98324; font-size: 12.5px;
}
.faltas-aviso svg{ width: 15px; height: 15px; flex: 0 0 auto; }

/* El logo de la barra se levanta un poco más: es chico y hay que verlo. */
.brand.logo-realce:hover .logo-realce-marco{
  transform:
    rotateX(var(--giroX, 0deg))
    rotateY(var(--giroY, 0deg))
    translateY(-9px) scale(1.11);
}

@media (prefers-reduced-motion: reduce) {
  .campana-float, .campana-float svg, .aviso-fila, .aviso-flecha{ transition: none; }
}

/* ═══════════ El vaivén de la campana ═══════════
   Se mece hacia el lado por donde llegó la flecha y se va apagando, como una
   campana de verdad. El giro sale del asa, no del centro, que es lo que hace
   que se lea como campana y no como un ícono girando. */
@keyframes campanear-der {
  0%   { transform: rotate(0deg); }
  16%  { transform: rotate(12deg); }
  34%  { transform: rotate(-9deg); }
  52%  { transform: rotate(6deg); }
  70%  { transform: rotate(-3.5deg); }
  86%  { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes campanear-izq {
  0%   { transform: rotate(0deg); }
  16%  { transform: rotate(-12deg); }
  34%  { transform: rotate(9deg); }
  52%  { transform: rotate(-6deg); }
  70%  { transform: rotate(3.5deg); }
  86%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}

.campana-float.campanea-der svg { animation: campanear-der .95s cubic-bezier(.36, .07, .19, .97); }
.campana-float.campanea-izq svg { animation: campanear-izq .95s cubic-bezier(.36, .07, .19, .97); }

/* Sin nada pendiente la campana está en calma: gris, sin número. Con avisos
   se pone roja, que es cuando hay que mirarla. */
.campana-float svg { color: #8794ac; transition: color .25s ease; }
.campana-float:hover svg { color: var(--ink); }
.campana-float.con-avisos svg,
.campana-float.con-avisos:hover svg { color: #e5484d; }

[data-theme="dark"] .campana-float svg { color: #8794ac; }
[data-theme="dark"] .campana-float:hover svg { color: var(--ink); }
[data-theme="dark"] .campana-float.con-avisos svg,
[data-theme="dark"] .campana-float.con-avisos:hover svg { color: #ff7b7f; }
[data-theme="dark"] .campana-float > b { background: #ff5a5f; }

@media (prefers-reduced-motion: reduce) {
  .campana-float.campanea-der svg,
  .campana-float.campanea-izq svg { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VENTANA ANGOSTA — un solo estado, pensado aparte
   ═══════════════════════════════════════════════════════════════════════════
   Por debajo de 1024 px el programa no se aplasta: se reacomoda. Menos
   columnas y más ancho para cada cosa, en vez de apretar todo hasta que se
   corte. Sigue siendo un programa de escritorio en ventana pequeña, no una
   app de teléfono: mismos controles, mismo peso visual, mismas distancias. */

/* La categoría y la fecha del documento viven bajo el nombre cuando no caben
   como columnas propias. En ancho normal esa línea no existe. */
.doc-nombre { display: inline-grid; gap: 2px; vertical-align: middle; }
.doc-extra { display: none; color: #8794ac; font-size: 11.5px; }

@media (max-width: 1024px) {
  /* Colaboradores: una tarjeta por fila. A dos columnas cada una se quedaba
     en 232 px y el correo y la cédula no cabían. */
  .roster { grid-template-columns: minmax(0, 1fr); }

  /* Expedientes: tres columnas en vez de cinco. */
  .file-table-wrap .col-categoria,
  .file-table-wrap .col-fecha { display: none; }
  .doc-extra { display: block; }

  /* La quinta cifra ocupa el ancho entero en vez de quedarse sola a media fila. */
  .stats.cinco > :last-child { grid-column: 1 / -1; }

  /* Los cuadros de cifras respiran menos, pero siguen alineados. */
  .stats { gap: 12px; }
}

/* El período del historial vive bajo el mes cuando no cabe como columna. */
.hist-mes { display: inline-grid; gap: 2px; }
.hist-extra { display: none; color: #8794ac; font-size: 11.5px; }

@media (max-width: 1024px) {
  /* La ficha de Reportes deja que el dato se parta en dos renglones antes de
     empujar la tabla fuera del cuadro. */
  .report-table td:nth-child(2) { white-space: normal; }
}

/* ═══════════ Ventana muy angosta ═══════════
   Debajo de 860 px las tablas largas sueltan las columnas que se pueden
   deducir de las otras, en vez de apretarse hasta cortar el texto. */
@media (max-width: 860px) {
  .time-history .col-periodo,
  .time-history .col-deducciones { display: none; }
  .hist-extra { display: block; }

  /* Las celdas ceden aire lateral, nunca legibilidad. */
  table th, table td { padding-left: 10px; padding-right: 10px; }
  .stat-card { padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL DE AVISOS — desplegable colgado de la campanita
   ═══════════════════════════════════════════════════════════════════════════
   Sale de la campanita y apunta a ella con una puntita, como los desplegables
   buenos: se entiende de dónde viene sin tener que explicarlo. Entra creciendo
   desde esa esquina, no apareciendo en el centro de la nada. */
.welcome-acciones { position: absolute; }

.avisos-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 12px);
  right: 0;
  width: 372px;
  max-width: calc(100vw - 40px);
  display: grid;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 22px 48px rgba(12, 22, 48, .18), 0 2px 6px rgba(12, 22, 48, .06);
  transform-origin: calc(100% - var(--flecha, 27px)) top;
  animation: avisos-entra .22s cubic-bezier(.2, .9, .3, 1);
  /* Nunca más alto que lo que cabe bajo la campanita (--alto-libre lo mide
     alternarAvisos). Con veinte avisos crecía a dos mil pixeles y lo que se
     deslizaba era la página entera; ahora la cabeza se queda quieta y solo
     la lista se desliza por dentro. */
  max-height: min(560px, var(--alto-libre, 70vh));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* La puntita que lo amarra a la campanita. */
.avisos-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  right: calc(var(--flecha, 27px) - 6px);
  width: 12px; height: 12px;
  border: 1px solid var(--line);
  border-right: 0; border-bottom: 0;
  border-radius: 3px 0 0 0;
  background: var(--card);
  transform: rotate(45deg);
}

@keyframes avisos-entra {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes avisos-sale {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(.97); }
}
.avisos-pop.saliendo { animation: avisos-sale .18s ease forwards; }

.avisos-cabeza {
  position: relative;
  border-radius: 16px 16px 0 0;
  background: var(--card);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--line);
}

.avisos-titulo {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #7e8aa3;
}
.avisos-titulo > b {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #e5484d; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0;
}

.avisos-cerrar {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: #8794ac;
  transition: background-color .16s ease, color .16s ease;
}
.avisos-cerrar svg { width: 15px; height: 15px; }
.avisos-cerrar:hover { background: rgba(15, 30, 60, .06); color: var(--ink); }

.avisos-lista {
  display: grid;
  align-content: start;
  min-height: 0;
  padding: 6px;
  border-radius: 0 0 16px 16px;
  background: var(--card);
  overflow-y: auto;
  /* Al llegar al final de la lista, el gesto no se le pasa a la página. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}

/* Cada aviso: el ícono en su pastilla de color, el asunto en negrita y el
   porqué debajo. La flecha solo se asoma al pasar por encima. */
.aviso-fila {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0; border-radius: 11px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background-color .16s ease;
}
.aviso-fila + .aviso-fila { box-shadow: inset 0 1px 0 var(--line); }
.aviso-fila:hover { background: rgba(15, 30, 60, .045); box-shadow: none; }
.aviso-fila:hover + .aviso-fila { box-shadow: none; }

.aviso-icono {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(217, 131, 36, .13);
  color: #d98324;
}
.aviso-icono svg { width: 17px; height: 17px; }
.aviso-fila.urgente .aviso-icono { background: rgba(229, 72, 77, .13); color: #e5484d; }

.aviso-texto { display: grid; gap: 3px; min-width: 0; }
.aviso-texto b { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.aviso-texto small { color: #8794ac; font-size: 12px; line-height: 1.45; }

.aviso-flecha { width: 16px; height: 16px; color: #c3cbd9; opacity: 0; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease; }
.aviso-fila:hover .aviso-flecha { opacity: 1; transform: translateX(0); color: var(--teal); }

/* Nada pendiente: se dice bonito, no con un renglón suelto. */
.avisos-vacio { display: grid; justify-items: center; gap: 7px; padding: 26px 18px 30px; text-align: center; }
.avisos-vacio > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(18, 165, 148, .12); color: #12a594; }
.avisos-vacio > span svg { width: 21px; height: 21px; }
.avisos-vacio b { font-size: 14px; }
.avisos-vacio small { color: #8794ac; font-size: 12.5px; }

[data-theme="dark"] .avisos-pop { box-shadow: 0 24px 52px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3); }
[data-theme="dark"] .avisos-cerrar:hover { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .aviso-fila:hover { background: rgba(255, 255, 255, .05); }

@media (max-width: 700px) { .avisos-pop { width: min(372px, calc(100vw - 32px)); } }

@media (prefers-reduced-motion: reduce) {
  .avisos-pop, .avisos-pop.saliendo { animation: none; }
  .aviso-fila, .aviso-flecha, .avisos-cerrar { transition: none; }
}

@media (max-width: 760px) {
  /* Lo último que cede en Expedientes: el nombre del documento se parte en dos
     renglones antes que la tabla se salga del cuadro. */
  .file-table-wrap th, .file-table-wrap td { padding-left: 8px; padding-right: 8px; }
  .doc-nombre { white-space: normal; }
  .file-table-wrap th:last-child, .file-table-wrap td:last-child { width: 1%; }
}

/* ═══════════ Ancho mínimo ═══════════
   Por debajo de 700 px la ventana ya no da para acomodar nada sin partir el
   contenido, así que el programa se planta: mantiene su acomodo y la ventana
   se desplaza, como cualquier aplicación de escritorio con tamaño mínimo. En
   vez de deshacerse, se queda entero. */
.app-shell { min-width: 700px; }
.welcome { min-width: 620px; }

@media (max-width: 1024px) {
  /* La etiqueta del expediente baja a su propio renglón: apretada al lado del
     nombre obligaba a partirlo en dos y a la ficha a leerse en escalera. */
  /* El encabezado es una rejilla de tres columnas. En angosto pasa a dos, y la
     etiqueta baja a un segundo renglón alineada bajo el nombre, en vez de
     robarle el ancho y obligarlo a partirse en dos. */
  .file-detail > header { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .file-detail > header > .badge { grid-column: 2; justify-self: start; margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DEL COLABORADOR — cuatro secciones con su índice
   ═══════════════════════════════════════════════════════════════════════════
   Eran 43 campos seguidos: dos mil pixeles de scroll donde todo pesaba igual.
   Ahora el índice de la izquierda dice qué hay y en qué parte va uno, y a la
   derecha solo se ve la sección abierta. Las cuatro existen siempre en el
   formulario, así que al guardar viaja todo aunque no se hayan abierto. */
.ficha-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  /* El ancho lo pone el cajón; el alto se topa para que los botones de
     guardar queden siempre a la vista y solo se desplacen los campos. */
  width: 100%;
  max-height: min(700px, calc(100vh - 150px));
}

.ficha-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.ficha-cabeza h2 { margin: 0; font-size: 21px; }
.ficha-cabeza p { margin: 3px 0 0; color: #8794ac; font-size: 13px; }
.ficha-avatar {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 13%, transparent);
  color: var(--teal);
}
.ficha-avatar svg { width: 22px; height: 22px; }
.ficha-avatar .avatar { width: 46px; height: 46px; font-size: 16px; }

.ficha-cuerpo {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 22px;
  min-height: 0;
  padding: 18px 0 4px;
}

/* El índice: cada sección con su ícono y una línea que dice qué guarda. */
.ficha-indice { display: grid; align-content: start; gap: 5px; }

.ficha-tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background-color .16s ease, border-color .16s ease;
}
.ficha-tab-icono {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(15, 30, 60, .05);
  color: #8794ac;
  transition: background-color .16s ease, color .16s ease;
}
.ficha-tab-icono svg { width: 17px; height: 17px; }
.ficha-tab-texto { display: grid; gap: 2px; min-width: 0; }
.ficha-tab-texto b { font-size: 13.5px; font-weight: 600; }
.ficha-tab-texto small { color: #8794ac; font-size: 11.5px; line-height: 1.35; }

.ficha-tab:hover { background: rgba(15, 30, 60, .04); }
.ficha-tab.on { border-color: var(--line); background: rgba(15, 30, 60, .05); }
.ficha-tab.on .ficha-tab-icono { background: var(--teal); color: #fff; }
.ficha-tab.on .ficha-tab-texto b { color: var(--teal); }

/* Solo se ve la sección abierta. */
.ficha-paneles { min-height: 0; overflow-y: auto; padding-right: 6px; }
.ficha-panel { display: none; }
.ficha-form[data-ficha-activa="datos"] .ficha-panel[data-ficha="datos"],
.ficha-form[data-ficha-activa="puesto"] .ficha-panel[data-ficha="puesto"],
.ficha-form[data-ficha-activa="pago"] .ficha-panel[data-ficha="pago"],
.ficha-form[data-ficha-activa="cuentas"] .ficha-panel[data-ficha="cuentas"] { display: block; }

.ficha-panel h3 { display: grid; gap: 3px; margin: 0 0 16px; font-size: 16px; }
.ficha-panel h3 small { color: #8794ac; font-size: 12.5px; font-weight: 400; }

.ficha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ficha-campos > .ancho-2, .ficha-campos > .ficha-cuenta, .ficha-campos > .ficha-nota { grid-column: 1 / -1; }

.ficha-campos label { display: grid; gap: 6px; min-width: 0; }
.ficha-campos label > span { color: #7e8aa3; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.ficha-campos input,
.ficha-campos select,
.ficha-campos textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ficha-campos textarea { resize: vertical; min-height: 62px; }
.ficha-campos input:focus,
.ficha-campos select:focus,
.ficha-campos textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}

/* Campos con símbolo: el colón y el porcentaje viven dentro del recuadro. */
.campo-money, .campo-sufijo { position: relative; display: block; }
.campo-money > i, .campo-sufijo > i {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #8794ac; font-size: 13.5px; font-style: normal; pointer-events: none;
}
.campo-money > i { left: 12px; }
.campo-sufijo > i { right: 13px; }
.campo-money input { padding-left: 27px; }
.campo-sufijo input { padding-right: 30px; }

.ficha-nota {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(15, 30, 60, .03);
  color: #7e8aa3; font-size: 12.5px; line-height: 1.5;
}
.ficha-nota svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--teal); }
.ficha-nota b { color: var(--ink); }

.ficha-cuenta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px;
  padding: 14px; border: 1px solid var(--line); border-radius: 13px;
}
.ficha-cuenta > header { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.ficha-cuenta > header b { font-size: 13px; }
.ficha-cuenta > .ancho-2 { grid-column: 1 / -1; }

[data-theme="dark"] .ficha-tab:hover { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .ficha-tab.on { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .ficha-tab-icono { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .ficha-nota { background: rgba(255, 255, 255, .035); }

@media (max-width: 1024px) {
  .ficha-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ficha-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-tab-texto small { display: none; }
  .ficha-campos { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ficha-tab, .ficha-tab-icono, .ficha-campos input, .ficha-campos select, .ficha-campos textarea { transition: none; }
}

/* ═══════════ Reporte del equipo ═══════════
   Lo que se venía a ver es el total, así que el total se ve: la fila del pie
   pesa distinto al resto y va pegada abajo. Antes estos botones solo saltaban
   a otra pestaña y había que sumar a mano. */
.reporte-caja { display: grid; gap: 0; width: 100%; max-height: min(660px, calc(100vh - 150px)); grid-template-rows: auto minmax(0, 1fr) auto; }

/* Aguinaldos quedó con tres cifras: se reparten el ancho en tres. */
.agui-overview .metrics-strip.de-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .agui-overview .metrics-strip.de-tres { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMPRESIÓN — el PDF sale de aquí
   ═══════════════════════════════════════════════════════════════════════════
   "Guardar como PDF" del navegador imprime lo que se ve. Sin estas reglas
   saldría la pantalla entera: barra lateral, botones y fondo oscuro incluidos.
   Con ellas sale solo el reporte, en blanco y negro, con el membrete de la
   empresa arriba y sin los botones, que en papel no sirven de nada. */
@media print {
  body[data-imprimiendo="reporte"] { background: #fff; }
  body[data-imprimiendo="reporte"] > * { display: none !important; }
  body[data-imprimiendo="reporte"] .drawer-backdrop,
  body[data-imprimiendo="reporte"] .drawer-wrap,
  body[data-imprimiendo="reporte"] .drawer { display: block !important; }

  body[data-imprimiendo="reporte"] .drawer-backdrop,
  body[data-imprimiendo="reporte"] .drawer-wrap {
    position: static !important;
    inset: auto !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  body[data-imprimiendo="reporte"] .drawer {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #14213d !important;
  }

  .reporte-caja { max-height: none !important; display: block !important; }
  .reporte-cabeza, .drawer-actions, .drawer-close, .reporte-sello { display: none !important; }
  .reporte-tabla { overflow: visible !important; max-height: none !important; }

  .reporte-membrete {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 0 0 14px;
    margin-bottom: 16px;
    border-bottom: 2px solid #14213d;
  }
  .reporte-membrete img { width: 62px; max-height: 46px; object-fit: contain; }
  .reporte-membrete > div { flex: 1; display: grid; gap: 3px; }
  .reporte-membrete b { font-size: 17px; color: #14213d; }
  .reporte-membrete span { font-size: 11.5px; color: #55627d; }
  .reporte-fecha { flex: 0 0 auto; font-size: 10.5px; color: #55627d; }

  .reporte-tabla table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .reporte-tabla th {
    position: static !important;
    padding: 7px 8px !important;
    border-bottom: 1px solid #14213d;
    background: none !important;
    color: #55627d !important;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .reporte-tabla td { padding: 7px 8px !important; color: #14213d !important; }
  .reporte-tabla tbody tr + tr td { border-top: 1px solid #dde3ec !important; }
  .reporte-tabla tfoot td {
    position: static !important;
    border-top: 2px solid #14213d !important;
    background: none !important;
    color: #14213d !important;
    font-weight: 700;
  }
  .rep-quien .avatar { display: none !important; }
  .rep-quien small { color: #55627d !important; }

  /* Las filas no se parten entre dos páginas. */
  .reporte-tabla tr { break-inside: avoid; }
  .reporte-tabla thead { display: table-header-group; }

  /* El margen de la hoja se fija UNA sola vez, más abajo, junto al papel de
     impresión. Aquí había 14 mm por lado: 28 mm de margen dejan 7,40 pulgadas
     útiles en una carta, y el comprobante mide 7,71 — se cortaba por la
     derecha, y en el teléfono fue donde se notó. */
}

/* ═══════════ Fuera las flechitas de los campos de número ═══════════
   Chrome y Safari pegan un par de triangulitos al borde derecho de todo
   <input type="number"> que suben y bajan de uno en uno. Aquí las cifras se
   escriben con el teclado: esas flechas solo estorban y se pulsan sin querer.
   Va sin envolver en ninguna clase, a propósito: aplica a todo el programa. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ═══════════ La ficha, un poco más fina ═══════════ */
/* El encabezado se apoya en un tono suave que lo separa del formulario sin
   necesidad de otra línea. */
.ficha-cabeza {
  margin: -32px -34px 0;
  padding: 26px 34px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 6%, transparent), transparent);
}

/* El índice se apoya en su propia columna, con una línea que lo separa de los
   campos: se lee como índice y no como cuatro botones sueltos. */
.ficha-cuerpo { padding-top: 20px; }
.ficha-indice {
  position: relative;
  padding-right: 22px;
}
.ficha-indice::after {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px; right: 0;
  width: 1px;
  background: var(--line);
}

/* La sección abierta se marca con una barrita del color de la casa a la
   izquierda, como los índices de los programas buenos. */
.ficha-tab { position: relative; padding-left: 14px; }
.ficha-tab::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: 999px;
  background: var(--teal);
  transform: translateY(-50%);
  transition: height .2s cubic-bezier(.2, .9, .3, 1);
}
.ficha-tab.on::before { height: 26px; }
.ficha-tab.on { background: transparent; border-color: transparent; }
.ficha-tab.on .ficha-tab-icono { box-shadow: 0 3px 10px color-mix(in srgb, var(--teal) 34%, transparent); }

/* El título de la sección con su número de orden: se sabe cuántas van. */
.ficha-panel h3 { padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* Los campos ganan aire y el foco se siente. */
.ficha-campos { gap: 16px 18px; }
.ficha-campos input:hover:not(:focus),
.ficha-campos select:hover:not(:focus),
.ficha-campos textarea:hover:not(:focus) { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }

/* Las tarjetas de cuenta se distinguen del fondo del formulario. */
.ficha-cuenta { background: rgba(15, 30, 60, .022); }
[data-theme="dark"] .ficha-cuenta { background: rgba(255, 255, 255, .022); }

@media (max-width: 1024px) {
  .ficha-indice { padding-right: 0; }
  .ficha-indice::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ficha-tab::before { transition: none; }
}

/* El desplegable de los datos de la empresa se veía con el estilo crudo del
   navegador, distinto a las casillas de al lado. Se iguala. */
.company-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.company-form select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}
[data-theme="dark"] .company-form select { background: #121824; }

/* La nota explicativa ocupa el ancho del formulario. */
.company-form .cfg-note { grid-column: 1 / -1; margin: 2px 0 4px; }

/* ═══════════ Sin logo cargado ═══════════
   No hay imagen de fábrica esperando en su lugar: si nadie ha subido un logo,
   se dibujan las iniciales del nombre comercial. Son dos letras, no un archivo
   guardado que pueda aparecer cuando no debe. */
.logo-vacio {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, transparent);
  text-align: center;
}
.logo-vacio b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.logo-vacio small { color: #8794ac; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* En la bienvenida es grande, así que las letras acompañan. */
.welcome-logo.logo-vacio { width: 150px; aspect-ratio: 1; border-radius: 26px; }
.welcome-logo.logo-vacio b { font-size: 46px; }
.welcome-logo.logo-vacio small { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOS COMPROBANTES
   ═══════════════════════════════════════════════════════════════════════════
   Sin recuadros: el papel se ordena con aire y filetes finos. El nombre del
   documento va en serif y grande, y el total cierra con una cifra grande, no
   con una caja de color. En pantalla se ve sobre el fondo de la aplicación;
   al imprimir sale solo, en blanco y negro. */
/* El comprobante es PAPEL: siempre blanco con tinta oscura, en los dos temas
   y en el PDF. Es lo que se le entrega a la gente y lo que él aprobó; no
   puede cambiar de color según cómo tenga puesto el programa. Por eso lleva
   su propia paleta fija y no toca ni un color del tema. */
.comprobante {
  --cp-tinta: #16202e;
  /* Estos dos se aclararon de más y la letra chiquita del papel no se
     alcanzaba a leer: el rótulo tenue quedaba en 2,6 de contraste sobre el
     blanco, cuando lo legible empieza en 4,5. Ahora dan 7,5 y 4,8. */
  --cp-suave: #495667;
  --cp-tenue: #66738a;
  --cp-regla: #dfe5ee;
  --cp-verde: #0e9c93;
  max-height: min(620px, calc(100vh - 210px));
  overflow-y: auto;
  padding: 26px 28px 30px;
  border-radius: 10px;
  background: #fff;
  color: var(--cp-tinta);
  font-size: 13px;
  line-height: 1.55;
}

.cp-membrete { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 20px; }
.cp-logo { flex: 0 0 auto; width: 56px; height: auto; object-fit: contain; }
.cp-membrete .logo-vacio { width: 56px; aspect-ratio: 1; border-radius: 10px; }
.cp-membrete .logo-vacio b { font-size: 17px; }
.cp-membrete .logo-vacio small { display: none; }
.cp-emisor { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cp-emisor b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.cp-emisor span { color: var(--cp-suave); font-size: 11px; line-height: 1.5; }
.cp-tipo { flex: 0 0 auto; text-align: right; display: grid; gap: 2px; align-content: start; }
.cp-tipo b { font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.cp-tipo span { font-size: 10.5px; color: var(--cp-tenue); letter-spacing: .04em; }

.cp-filete { height: 2px; background: var(--cp-tinta); position: relative; }
.cp-filete::before { content: ""; position: absolute; left: 0; top: 0; width: 62px; height: 2px; background: var(--cp-verde); }

.cp-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 34px; padding: 26px 0 30px; }
.cp-dato { display: grid; gap: 4px; align-content: start; min-width: 0; }
.cp-dato > span { font-size: 8.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-tenue); }
.cp-dato > b { font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: break-word; }
.cp-dato.ancho { grid-column: span 2; }
.cp-dato.completo { grid-column: 1 / -1; }
.cp-dato.destaca > b { font-weight: 700; }

.cp-tabla { width: 100%; border-collapse: collapse; }
.cp-tabla th {
  padding: 0 0 9px; border-bottom: 1px solid var(--cp-tinta); text-align: left;
  font-size: 8.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-tenue);
}
.cp-tabla td { padding: 11px 0; border-bottom: 1px solid var(--cp-regla); vertical-align: baseline; font-size: 13.5px; }
.cp-tabla .num, .cp-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-base { color: var(--cp-suave); font-size: 11.5px; }
.cp-tabla .resta { color: #c0392f; }
.cp-tabla tr.suma td { border-bottom: 1px solid var(--cp-tinta); font-weight: 600; }
.cp-tabla tr.seccion td {
  padding: 16px 0 6px; border-bottom: 0;
  font-size: 8.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-tenue);
}

/* ── Los reportes en papel ──────────────────────────────────────────────
   Un reporte lleva varias tablas seguidas —los meses, la gente, la cuenta— y
   sin un rótulo entre ellas se leen como una sola tabla larguísima con
   encabezados repetidos. El rótulo va en versalitas y con su raya arriba, del
   mismo tamaño que los encabezados de la tabla, para que ordene sin gritar. */
.cp-subtitulo {
  margin: 26px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--cp-regla);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-tenue);
}
.cp-encabezado + .cp-subtitulo,
.cp-subtitulo:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }

/* Un mes sin nada anotado se apaga pero no se esconde: en un papel que se
   entrega, un mes que falta es un dato, y quitarlo de la lista haría pensar
   que el año tuvo once meses. */
.cp-tabla tr.cp-fila-vacia td { color: var(--cp-suave); }
.cp-tabla tfoot tr.suma td { border-bottom: 0; border-top: 1px solid var(--cp-tinta); }
.cp-tabla i { font-style: italic; color: var(--cp-suave); }

.cp-meses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.cp-meses table { width: 100%; border-collapse: collapse; }
.cp-meses th {
  padding: 0 0 8px; border-bottom: 1px solid var(--cp-tinta); text-align: left;
  font-size: 8.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-tenue);
}
.cp-meses th:last-child, .cp-meses td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cp-meses td { padding: 6px 0; border-bottom: 1px solid var(--cp-regla); font-size: 12.5px; }

.cp-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-top: 26px; padding-top: 16px; border-top: 2px solid var(--cp-tinta);
}
.cp-total > span {
  display: grid; gap: 3px;
  font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-suave);
}
.cp-total small { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--cp-tenue); }
.cp-total > b {
  font-size: 34px; font-weight: 700; letter-spacing: -.025em; line-height: 1;
  color: var(--cp-verde); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.cp-declara {
  margin: 26px 0 0; padding-left: 16px; border-left: 2px solid var(--cp-regla);
  color: var(--cp-suave); font-size: 11.5px; line-height: 1.7;
}
.cp-declara b { color: var(--cp-tinta); }

.cp-firmas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; margin-top: 48px; }
.cp-firma { padding-top: 10px; border-top: 1px solid var(--cp-tinta); }
.cp-firma b { display: block; font-size: 12.5px; font-weight: 600; }
.cp-firma span { display: block; color: var(--cp-suave); font-size: 11px; }

.cp-pie {
  display: flex; justify-content: flex-end;
  margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--cp-regla);
  color: var(--cp-tenue); font-size: 10px;
}

/* No hay versión oscura del papel: ver arriba. */

/* ── El papel no se reacomoda ────────────────────────────────────────────
   Un comprobante es un documento, no una pantalla: tiene que verse igual
   siempre, porque va a salir en una hoja carta. Antes, con la ventana
   angosta, los datos pasaban de tres columnas a dos, el membrete se partía
   y las firmas se ponían una debajo de la otra. El papel impreso no puede
   depender de qué tan ancha tenía él la ventana al momento de imprimir.

   Así que el papel mide siempre lo mismo —740 px, el ancho útil de una
   carta con sus márgenes— y cuando no cabe se ACHICA entero, sin mover
   nada de sitio. Del achicado se encarga ajustarPapel() en app.js. */
.comprobante {
  width: 740px;
  max-width: none;
  margin-inline: auto;
  zoom: var(--cp-escala, 1);
}

/* ═══════════ El comprobante impreso ═══════════
   Al exportar, el programa saca una copia del papel y la pega suelta en
   #papel-de-impresion, hijo directo del body. Así estas reglas son las
   mismas venga del cajón o de la pantalla del comprobante, y no dependen
   de dónde estuviera metido. Todo en blanco y negro sobre blanco, para que
   no gaste tinta de color ni arrastre el tema oscuro al papel. */
#papel-de-impresion { display: none; }

/* ═══════════ Que el papel QUEPA en la hoja ═══════════
   El comprobante mide 740 px = 7,71 pulgadas. Una carta tiene 8,5 de ancho,
   así que entra… siempre que el margen de la hoja sea chico. Y ahí estaba el
   problema: al exportar desde el teléfono salía cortado por la derecha —se
   perdían el final del título, el monto y la fecha—.

   Se intentó primero pidiendo el margen por CSS (`@page { margin }`), y NO
   basta: **Chrome y Safari en el iPhone ignoran ese margen** y ponen el suyo,
   que es más grande. Se vio en el video de Erick: el papel salía cortado
   igual. En una computadora sí lo respetan, y por eso ahí nunca se notó.

   Como no se puede confiar en el margen, el papel se achica un poquito al
   imprimir: 740 × 0,92 = 681 px = 7,09 pulgadas. Eso entra aunque el
   navegador se ponga media pulgada de margen por lado (quedan 7,5) e incluso
   con 0,70 (quedan 7,1). El achicado es UNIFORME —el mismo truco que usa la
   pantalla—: no mueve nada de sitio, no cambia una tipografía ni parte un
   renglón. Es exactamente el mismo documento, impreso al 92 %.

   Si algún día hay que tocar este número: 740 × el número tiene que caber en
   las pulgadas útiles de la hoja, y hay que probarlo EXPORTANDO desde el
   teléfono, no en la computadora, que es más permisiva. */
@page {
  size: letter portrait;
  margin: 6mm;
}

@media print {
  /* ═══════════ Los colores salen EXACTOS ═══════════
     Por omisión el navegador imprime en modo "economy": tiene permiso para
     cambiarle los colores al documento para ahorrar tinta —aclara, apaga y se
     salta los fondos—. En una página cualquiera da igual; en un comprobante
     no: el rojo de las deducciones y el turquesa del neto salían de otro tono
     en el PDF exportado que en la pantalla, y Erick lo cazó comparando.

     Con `exact` el navegador reproduce lo que dice el CSS y nada más. Va en
     el papel y en TODO lo que lleva dentro, porque la herencia de esta
     propiedad no alcanza a los fondos de los hijos.

     Y los ::before / ::after aparte, que tampoco los alcanza el `*`. No es
     un detalle teórico: la rayita turquesa que va bajo el membrete es
     `.cp-filete::before`, y era justo la que desaparecía del PDF. */
  #papel-de-impresion .comprobante,
  #papel-de-impresion .comprobante *,
  #papel-de-impresion .comprobante *::before,
  #papel-de-impresion .comprobante *::after,
  body[data-imprimiendo="comprobante"] .comprobante,
  body[data-imprimiendo="comprobante"] .comprobante *,
  body[data-imprimiendo="comprobante"] .comprobante *::before,
  body[data-imprimiendo="comprobante"] .comprobante *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #papel-de-impresion .comprobante,
  body[data-imprimiendo="comprobante"] .comprobante {
    zoom: 0.92 !important;
    width: 740px !important;
    margin-inline: auto !important;
  }

  /* Un documento largo pasa a la segunda hoja, pero sin partir por la mitad
     una fila de la tabla, un total ni las firmas. Y si la tabla sigue en la
     hoja siguiente, su encabezado se repite: una columna de cifras sin título
     no se puede leer. */
  #papel-de-impresion tr,
  #papel-de-impresion .cp-total,
  #papel-de-impresion .cp-firmas,
  #papel-de-impresion .cp-hecho,
  #papel-de-impresion .cp-quien,
  #papel-de-impresion .cp-declara { break-inside: avoid; }

  #papel-de-impresion thead { display: table-header-group; }
  #papel-de-impresion .cp-encabezado { break-after: avoid; }

  body[data-imprimiendo="comprobante"] { background: #fff; }
  body[data-imprimiendo="comprobante"] > * { display: none !important; }
  body[data-imprimiendo="comprobante"] > #papel-de-impresion { display: block !important; }

  /* El papel ya viene claro por sí solo (ver .comprobante), así que aquí
     solo se le quitan los límites de la PANTALLA: el tope de alto, el borde
     redondeado, la sombra. Lo que se ve es lo que sale impreso.

     OJO con el relleno: aquí decía `padding: 0 !important` y era un error
     serio. Ese relleno no es adorno de pantalla, es el MARGEN INTERNO del
     documento — los 28 px de aire entre el borde del papel y el texto. Al
     quitarlo, el contenido pasaba de ocupar 684 px centrados a estirarse a
     los 740 completos, de borde a borde, y por eso se salía y se cortaba al
     exportar. El relleno se queda. */
  body[data-imprimiendo="comprobante"] .comprobante {
    max-height: none !important; overflow: visible !important;
    margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
}

/* El botón de cerrar del cajón se montaba encima del nombre del documento, y
   el alto fijo cortaba el total justo donde está la cifra que se busca. */
/* El botón de cerrar se montaba encima del nombre del documento. */
.cp-tipo { padding-right: 34px; }

/* Un documento se lee de corrido: rueda el cajón entero, no el papel dentro
   de un marco. Los botones se quedan pegados abajo para no tener que volver
   arriba a buscarlos. */
.comprobante { max-height: none; overflow: visible; }
.comprobante + .drawer-actions {
  position: sticky; bottom: -32px; z-index: 2;
  margin: 18px -34px -32px; padding: 16px 34px 20px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

/* ═══════════ La contraseña ═══════════
   Un campo de contraseña con su ojito al final del renglón, como en cualquier
   sitio donde uno inicia sesión: se escribe en puntitos y se puede mirar. */
/* Compacta y centrada, como una caja de iniciar sesión: en un cajón ancho el
   campo se estiraba y el ojito quedaba a media cuadra de los puntitos. */
.llave-form { display: grid; gap: 15px; width: min(390px, 100%); margin: 0 auto; }
.llave-form .drawer-actions { margin-top: 4px; }

.llave-cabeza { display: flex; align-items: center; gap: 14px; }
.llave-cabeza h2 { margin: 0; font-size: 19px; }
.llave-cabeza p { margin: 3px 0 0; color: #8794ac; font-size: 13px; }
.llave-icono {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 13px;
  background: color-mix(in srgb, var(--teal) 13%, transparent); color: var(--teal);
}
.llave-icono.abrir { background: rgba(217, 131, 36, .14); color: #d98324; }
.llave-icono svg { width: 21px; height: 21px; }

.llave-form .llave-campo { display: grid; gap: 6px; }
.llave-form .llave-campo > label { color: #7e8aa3; font-size: 12px; font-weight: 600; }
.llave-form .llave-campo small { color: #8794ac; font-size: 11px; }

.llave-form .llave-caja { position: relative; display: block; }
.llave-form .llave-caja input {
  width: 100%;
  padding: 10px 42px 10px 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; letter-spacing: .08em;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.llave-form .llave-caja input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}
.llave-ojo {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: #8794ac;
  transition: background-color .16s ease, color .16s ease;
}
.llave-ojo svg { width: 17px; height: 17px; }
.llave-ojo:hover { background: rgba(15, 30, 60, .06); color: var(--ink); }
[data-theme="dark"] .llave-ojo:hover { background: rgba(255, 255, 255, .07); }

.llave-estado { margin: 0; min-height: 18px; font-size: 12.5px; color: #12a594; }
.llave-estado.malo { color: #e5484d; }

/* ═══════════ El período bloqueado ═══════════
   Se ve completo —los números, las faltas, el desglose— pero no se toca. */
.time-card.trabada { border-style: dashed; }
.time-card.trabada input:disabled {
  color: var(--ink);
  background: rgba(15, 30, 60, .035);
  border-color: var(--line);
  opacity: 1;
  cursor: not-allowed;
}
[data-theme="dark"] .time-card.trabada input:disabled { background: rgba(255, 255, 255, .04); }

.time-trabada {
  display: flex; align-items: center; gap: 8px;
  margin: 0 auto 0 0;
  color: #8794ac; font-size: 12px;
}
.time-trabada svg { width: 14px; height: 14px; flex: 0 0 auto; }
.time-card.trabada .time-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .llave-form .llave-caja input, .llave-ojo { transition: none; }
}

/* Los cuadros de contraseña no necesitan todo el ancho del cajón: se estrechan
   para que se lean como una caja de iniciar sesión y no como un formulario. */
.drawer[data-cajon="contrasena"],
.drawer[data-cajon="desbloquear"] { width: min(430px, 94vw); }
.drawer[data-cajon="contrasena"] .llave-form,
.drawer[data-cajon="desbloquear"] .llave-form { width: 100%; }

/* ── El botón mientras comprueba la contraseña ───────────────────────────── */
/* La comprobación tarda a propósito (120 000 vueltas). Sin esta señal el
   botón parece muerto por un instante y uno vuelve a apretarlo. */
.button:disabled,
.button.esperando {
  opacity: .55;
  cursor: progress;
  pointer-events: none;
}

/* ── Copias automáticas ──────────────────────────────────────────────────── */
.drawer[data-cajon="copias"] { width: min(540px, 94vw); }
.copias-lista {
  list-style: none;
  margin: 4px 0 2px;
  padding: 4px;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2, rgba(127, 140, 170, .05));
}
.copia-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 10px 9px 12px;
  border-radius: 9px;
}
.copia-fila + .copia-fila { border-top: 1px solid var(--line); }
.copia-fila:hover { background: rgba(127, 140, 170, .09); }
.copia-cuando { min-width: 0; }
.copia-cuando b { display: block; font-size: 13.5px; font-weight: 600; }
.copia-cuando small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copia-fila .button { flex: 0 0 auto; padding: 6px 11px; font-size: 12.5px; }
.copia-vacia { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── Tiempo laborado: sin períodos y el repaso ───────────────────────────── */
/* Cuando el mes es anterior a su ingreso no hay cuadros. El hueco no se deja
   en blanco: se dice por qué, con el mismo peso que tendría un cuadro. */
.time-sin-periodos {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 40px 26px 44px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--surface-2, rgba(127, 140, 170, .05));
  text-align: center;
}
.time-sin-periodos svg {
  width: 30px;
  height: 30px;
  color: var(--muted);
  opacity: .8;
}
.time-sin-periodos > b { font-size: 15px; font-weight: 650; }
.time-sin-periodos p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.time-sin-periodos p b { color: var(--ink); font-weight: 600; }

.time-history-sub {
  margin: -6px 0 16px;
  max-width: 74ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── La hoja del comprobante en pantalla ─────────────────────────────────── */
/* El papel va centrado y solo, como una hoja sobre la mesa: es exactamente
   lo que va a salir impreso, sin nada alrededor que distraiga. */
.cp-hoja {
  display: flex;
  justify-content: center;
  padding: 4px 0 30px;
}
.cp-hoja .comprobante {
  width: 100%;
  max-width: 800px;
  max-height: none;
}

/* La hoja se ve como papel sobre la mesa, también en el tema oscuro. */
.cp-hoja .comprobante { box-shadow: 0 18px 50px rgba(8, 14, 26, .18); }
[data-theme="dark"] .cp-hoja .comprobante { box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.drawer .comprobante { box-shadow: none; }

/* ── Pagos: cada período, su estado y su botón ───────────────────────────── */
.pagos-lista {
  display: grid;
  gap: 10px;
  margin: 4px 0 26px;
}
.pago-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, auto) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.pago-fila.listo { border-color: color-mix(in srgb, var(--teal) 42%, var(--line)); }
.pago-fila.sin-registro { border-style: dashed; }
.pago-que { min-width: 0; }
.pago-que b { display: block; font-size: 14.5px; font-weight: 640; }
.pago-que small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pago-monto { text-align: right; font-variant-numeric: tabular-nums; }
.pago-monto b { font-size: 17px; font-weight: 680; letter-spacing: -.01em; }
.pago-fila.sin-registro .pago-monto { color: var(--muted); }
.pago-accion { justify-self: end; }
.pago-accion .button { white-space: nowrap; }

/* En ventana angosta cada cosa baja a su renglón, sin apretujarse. */
@media (max-width: 1080px) {
  .pago-fila {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
  }
  .pago-que { grid-column: 1 / -1; }
  .pago-monto { text-align: left; }
  .pago-accion { justify-self: end; }
}

/* El desglose dentro del cuadro de pagar: lo que se va a pagar, en limpio. */
.pagar-cuenta {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2, rgba(127, 140, 170, .05));
}
.pagar-cuenta p,
.pagar-cuenta strong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: 13px;
}
.pagar-cuenta p span { color: var(--muted); }
.pagar-cuenta p b { font-variant-numeric: tabular-nums; }
.pagar-cuenta p b.bad { color: var(--red); }
.pagar-cuenta strong {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.pagar-cuenta strong b { font-size: 18px; color: var(--teal); font-variant-numeric: tabular-nums; }
.pagar-fecha { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }

/* El cuadro de pagar pide una sola cosa: no necesita media pantalla. */
.drawer[data-cajon="pagar"] { width: min(470px, 94vw); }
.drawer[data-cajon="pagar"] .pagar-fecha input { width: 100%; }

/* Un pago que ya no cuadra con su período: se ve, y se puede rehacer. */
.pago-fila.cambiado { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); }
.pago-monto small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.pago-accion { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* El período del comprobante lleva debajo de qué día a qué día va. */
.cp-dato > b small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--cp-suave);
}

/* Un campo de fecha con algo imposible escrito. */
.campo-malo {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}
.campo-error {
  display: block;
  margin-top: 5px;
  color: var(--red);
  font-size: 11.5px;
  line-height: 1.45;
}
.button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

/* El botón de cerrar del cajón se montaba encima del sello de "4
   colaboradores" y lo dejaba cortado. Se le abre campo, igual que en el
   comprobante. */
.reporte-cabeza { padding-right: 40px; }

/* Los campos sueltos de los cajones —la fecha del pago, sobre todo— salían
   con el blanco de fábrica del navegador, que en el tema oscuro daba un
   parche brillante en medio del cuadro. Se visten igual que el campo de la
   contraseña, que ya seguía el tema. */
.llave-form > label input:not([type="checkbox"]):not([type="radio"]),
.llave-form .pagar-fecha input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.llave-form > label input:focus,
.llave-form .pagar-fecha input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}
.llave-form .pagar-fecha input.campo-malo:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent);
}

/* ── El último paso antes de pagar ───────────────────────────────────────── */
.drawer[data-cajon="pagar-seguro"] { width: min(490px, 94vw); }
.llave-icono.aviso {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange);
}
.pagar-repaso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2, rgba(127, 140, 170, .05));
}
.pagar-repaso .cp-dato > span {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pagar-repaso .cp-dato > b { font-size: 14px; font-weight: 550; line-height: 1.35; }
.pagar-repaso .cp-dato.ancho { grid-column: span 2; }
.pagar-neto { font-size: 19px !important; font-weight: 700 !important; color: var(--teal); }

/* El desglose chiquito de las deducciones, en el paso de confirmar. */
.pagar-detalle {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.45;
}

/* Lo que se rebaja va en rojo, como en todo el resto del programa. */
.pagar-repaso .cp-dato.rebaja > b { color: var(--red); }
.pagar-repaso .cp-dato.rebaja .pagar-detalle { color: color-mix(in srgb, var(--red) 72%, var(--muted)); }

/* Los desplegables de año pueden traer muchos: se les deja alto para rodar
   con la rueda del mouse en vez de una lista de tres apretada. */
.liquidation-picker select { max-height: 320px; }

/* ── El escogedor de año ─────────────────────────────────────────────────
   Propio, no el del navegador: ese enseña todos los años de un tirón. Este
   deja ver cinco y los demás se alcanzan rodando. */
.anio-picker { position: relative; }
.anio-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 108px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.anio-boton:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.anio-boton[aria-expanded="true"] {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
}
.anio-boton svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }

.anio-lista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 5px;
  list-style: none;
  /* Cinco filas a la vista; el resto, rodando. */
  max-height: calc(5 * 36px + 10px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--e3);
  transform-origin: top center;
  animation: menu-pop var(--dur-2) var(--ease) both;
}
@keyframes menu-pop {
  from { opacity: 0; transform: scale(.97) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.anio-lista button {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.anio-lista button:hover { background: color-mix(in srgb, var(--teal) 12%, transparent); }
.anio-lista button.puesto {
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  color: var(--teal);
  font-weight: 650;
}

/* La barra que lleva el escogedor de año se pinta por encima de lo que viene
   después. Su animación de entrada le crea una capa propia, y sin esto la
   lista de años se abría DETRÁS de los recuadros de abajo. */
.toolbar:has(.anio-picker),
.time-toolbar:has(.anio-picker) { position: relative; z-index: 6; }

/* La flecha del escogedor de año se voltea al abrirlo, igual que la de los
   desplegables del navegador: se sabe que está abierto sin mirar la lista. */
.anio-boton svg { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
.anio-boton[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── El calendario de vacaciones ─────────────────────────────────────────── */
.calendario {
  /* Con siete círculos de 32 px y sus huecos, el cuadro no necesita más
     ancho: si se deja crecer, los días se separan y se ve desparramado. */
  max-width: 320px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 12px 12px 14px;
  user-select: none;
}
.cal-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.cal-cabeza b { font-size: 13.5px; font-weight: 650; }
.cal-flecha {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}
.cal-flecha:hover { border-color: var(--teal); color: var(--teal); }
.cal-flecha svg { width: 15px; height: 15px; }

.cal-semana,
.cal-rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  /* Y centrado en su columna, para que las siete filas queden a plomo. */
  justify-items: center;
}
.cal-semana {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
}
.cal-dia,
.cal-vacio {
  display: grid;
  place-items: center;
  /* Cuadrado exacto, para que el redondeo dé un círculo y no un óvalo. Sin
     el ancho fijo la celda se estiraba a lo ancho de la columna: con la
     ventana en 1440 px el día medía 42 x 30 y se veía aplastado. */
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
button.cal-dia:hover { border-color: var(--teal); }
.cal-dia.domingo { color: var(--muted); }

/* Un día ya apartado, dentro del cuadro de asignar: se toca para soltarlo.
   Se le nota que responde, sin cambiarle el color, que el ámbar ya dice lo
   que es. */
.cal-dia.soltable { cursor: pointer; }
.cal-dia.soltable:hover,
.cal-dia.soltable:focus-visible {
  border-color: var(--tono);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 20%, transparent);
}

/* Los tres estados, con la misma receta: una línea bien marcada por fuera
   y por dentro el mismo color aclarado, como transparente. Le gustó cómo se
   veía el ámbar y quiso ese perfil para los tres.

   La proporción importa: relleno al 20 % y borde al 55 %. Con el borde a
   tope y el relleno al 14 % —como estaba el rojo— el día se veía como un
   aro duro alrededor de un hueco blanco, no como una pastilla.

   El número va en el mismo color pero más apretado, porque el color pelado
   encima de su propio relleno claro no se lee: el rojo daba 4,21 : 1 y el
   turquesa 2,60, con el mínimo en 4,5. En tema oscuro es al revés —el
   relleno queda oscuro—, así que ahí el número se aclara. */
.cal-dia.pendiente { --tono: var(--orange); }
/* Turquesa lo que YA SE GOZÓ y rojo el día de hoy. Se cambió a propósito:
   el turquesa es el color de la casa y lo gozado es la mayoría de los días,
   así el calendario se ve tranquilo; el rojo queda para el único día que
   está pasando ahorita, que es el que uno anda buscando. */
.cal-dia.encurso { --tono: var(--red); }
.cal-dia.gozado { --tono: var(--teal); }

.cal-dia.pendiente,
.cal-dia.encurso,
.cal-dia.gozado {
  background: color-mix(in srgb, var(--tono) 20%, transparent);
  border-color: color-mix(in srgb, var(--tono) 55%, transparent);
  color: color-mix(in srgb, var(--tono) 62%, #000);
  font-weight: 650;
}
[data-theme="dark"] .cal-dia.pendiente,
[data-theme="dark"] .cal-dia.encurso,
[data-theme="dark"] .cal-dia.gozado {
  color: color-mix(in srgb, var(--tono) 45%, #fff);
}

.cal-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leyenda .pt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Las bolitas de la leyenda, con el mismo perfil que el día: borde marcado
   y el centro aclarado, para que se reconozcan de un vistazo. */
/* El día que se está tocando ahora mismo en el cuadro de asignar va
   turquesa MACIZO, no en tinte: así no se confunde con el turquesa suave
   del día que se está gozando hoy. Solo se ve dentro de ese cuadro. */
.cal-dia.escogiendo {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-weight: 700;
}

.cal-leyenda .pt.pendiente,
.cal-leyenda .pt.encurso,
.cal-leyenda .pt.gozado { border-radius: 50%; border: 1px solid; }
.cal-leyenda .pt.encurso { background: color-mix(in srgb, var(--red) 20%, transparent); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.cal-leyenda .pt.pendiente { background: color-mix(in srgb, var(--orange) 20%, transparent); border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.cal-leyenda .pt.gozado { background: color-mix(in srgb, var(--teal) 20%, transparent); border-color: color-mix(in srgb, var(--teal) 55%, transparent); }

.cal-cuenta { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }

/* Debajo de la cuenta: a cuál período se le van a restar estos días. Va
   pegado ahí y no en un cuadro aparte porque es la consecuencia directa de
   lo que uno acaba de tocar en el calendario. */
.cal-reparto {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 9px 0 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--orange) 7%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.cal-reparto:empty { display: none; }
.cal-reparto svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--orange); }
.cal-reparto b { color: var(--ink); font-weight: 650; }
.cal-reparto em { font-style: normal; color: var(--red); font-weight: 600; }
.cal-cuenta b { color: var(--ink); }
.drawer[data-cajon="escoger-dias"] { width: min(400px, 94vw); }

/* ── Vacaciones ───────────────────────────────────────────────────────────
   La idea de la pantalla: en Costa Rica los días de vacaciones se ganan de
   uno en uno, un día por cada mes trabajado, contados desde el aniversario
   de ingreso de cada quien. Esa regla es la protagonista, y por eso el
   período en curso se dibuja con DOCE MUESCAS —una por mes— en vez de una
   barra lisa: se ve de un vistazo cuánto lleva ganado, cuánto ya tomó y
   cuánto le falta por ganar. */

/* El año, pegado al título del historial: sin esto uno no sabía de qué año
   era la lista y los renglones de varios años salían revueltos. */
.time-history h2 { display: flex; align-items: baseline; gap: 10px; }
.time-history-anio {
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.vac-barra { margin-bottom: 20px; }

/* ── El escogedor de período ─────────────────────────────────────────────
   Va a la derecha del todo, separado de los botones de acción: no es algo
   que uno "hace", es desde dónde se está mirando. Mismo aparato que el año
   de Tiempo laborado y Pagos, con las filas un poco más anchas porque
   "2026-2027" pide más letra que "2026". */
.vac-periodo-picker {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
/* El botón se hace tan ancho como el renglón más largo de la lista
   ("2026-2027" con su pastilla de EN CURSO), y la lista se abre midiendo
   exactamente lo mismo. Antes la lista crecía sola y quedaba más ancha que
   el botón: los bordes no coincidían y se veía disparejo. */
.vac-periodo-picker .anio-picker { min-width: 190px; }
/* Y a la misma altura que los botones de al lado: si no, queda 7 px más
   bajo y el renglón se ve descuadrado. */
.vac-periodo-picker .anio-boton { min-width: 190px; height: 42px; }
/* La lista se abre hacia la izquierda y crece lo que necesite: "2026-2027"
   más el rótulo "en curso" no caben en los 158 px del botón, y antes el
   rótulo se salía del cuadro tanto en pantalla completa como angosta. */
.periodo-picker .anio-lista {
  /* Anclada a la derecha para que en ventana angosta se abra hacia adentro
     y no se salga de la pantalla; del mismo ancho que el botón. */
  left: auto;
  right: 0;
  width: 100%;
}
.periodo-picker .anio-lista button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.periodo-picker .anio-lista b { font-weight: 500; }
.periodo-picker .anio-lista .puesto b { font-weight: 700; }
/* "En curso" va en su propia pastilla, no como texto suelto: así se lee
   como una marca del renglón y no como parte del nombre del período. */
.periodo-picker .anio-lista em {
  flex: 0 0 auto;
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--teal);
  white-space: nowrap;
}
/* En el renglón escogido el fondo ya es turquesa, así que la pastilla se
   marca al revés: turquesa maciza con la letra en blanco. */
.periodo-picker .anio-lista .puesto em {
  background: var(--teal);
  color: #fff;
}

/* ── El aviso de saldo colgando de otros períodos ─────────────────────────
   No se pintan los otros períodos enteros —para eso está el escogedor—,
   pero si quedan días de años pasados hay que decirlo: es plata que la
   empresa debe. Cada ficha lleva a su período. */
/* El aviso normal —días ganados más adelante— va en turquesa: es saldo, no
   un problema. El de deuda vieja va en ámbar, que ese sí hay que atender. */
.vac-otros {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 6%, var(--card));
}
.vac-otros.atrasado {
  border-color: color-mix(in srgb, var(--orange) 34%, var(--line));
  background: color-mix(in srgb, var(--orange) 7%, var(--card));
}
.vac-otros + .vac-otros { margin-top: 10px; }
.vac-otros-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.vac-otros-rotulo svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--teal); }
.vac-otros.atrasado .vac-otros-rotulo svg { color: var(--orange); }
.vac-otros-fichas { display: flex; flex-wrap: wrap; gap: 9px; }
.vac-otro {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}
.vac-otro:hover { border-color: var(--teal); transform: translateY(-1px); }
.vac-otro:active { transform: none; }
.vac-otro b { font-size: 15px; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.vac-otros.atrasado .vac-otro b { color: var(--orange); }
.vac-otro span { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .vac-otro { transition: none; }
  .vac-otro:hover { transform: none; }
}

.vac-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  align-items: start;
  gap: 20px;
}
.vac-cuerpo h2 {
  margin: 26px 0 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.vac-calendario > h2:first-child { margin-top: 0; }

/* La línea que dice qué contesta cada cuadro. En minúscula a propósito: el
   h2 de arriba ya va en versalitas y dos rótulos gritando se pelean. */
.vac-subtitulo {
  margin: -7px 0 11px;
  max-width: 68ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.vac-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ── El período en curso ────────────────────────────────────────────────── */
.vac-hero {
  padding: 22px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(16, 28, 66, .07);
}
[data-theme="dark"] .vac-hero { box-shadow: 0 12px 34px rgba(0, 0, 0, .3); }
.vac-hero header { display: grid; gap: 3px; }
.vac-hero header small { color: var(--muted); font-size: 12px; }

.vac-saldo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 16px;
}
.vac-saldo b {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.vac-saldo span { color: var(--muted); font-size: 13.5px; }

/* Las doce muescas. */
.vac-regla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}
.vac-regla i {
  /* CADA RAYITA ES UN DÍA, Y SU COLOR DICE QUÉ PASÓ CON ÉL.
     Color plano y ya: sin brillo, sin canto y sin sombra. Se probó de vidrio
     y en piezas de 10 px el efecto no aportaba nada, solo ruido.

     Los tonos sí son los que se escogieron entonces, y esos sí importan: los
     colores de la marca son oscuros —hechos para texto y para bordes— y
     rebajarlos los ensucia (el ámbar #ef9600 al 60% da un mostaza, el rojo
     un salmón apagado). Estos nacen claros, menos el rojo, que va hondo a
     propósito porque cualquier rojo aclarado se vuelve rosado.

     --tono es el color del día y --relleno cuánto tiñe. */
  --tono: var(--teal);
  --relleno: 13%;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tono) var(--relleno), transparent);
  /* Igual que las muescas del aguinaldo: al pasar por encima crecen, y de
     paso se entiende que cada rayita es un día. */
  transition: transform .2s ease;
}
/* Cada muesca sube por su cuenta cuando el mouse le pasa por encima, no
   todas de un solo tiro: así se cuenta día por día, igual que las del
   aguinaldo. */
.vac-regla i:hover { transform: scaleY(1.6); }
@media (prefers-reduced-motion: reduce) {
  .vac-regla i { transition: none; }
  .vac-regla i:hover { transform: none; }
}

/* Los seis estados de un día. Los tres primeros son los del calendario
   —turquesa lo gozado, rojo lo de hoy, ámbar lo apartado— para no tener que
   aprenderse dos códigos en la misma pantalla. */
/* El rojo va HONDO, no claro. Cualquier rojo rebajado con blanco se vuelve
   rosado —es lo que pasaba con el #f0808c al 46%—, así que este parte de un
   rojo apagado de por sí y se pone casi entero: queda un rojo desteñido que
   sigue siendo rojo. Es el único de la regla que necesita ir así de fuerte;
   el ámbar y el turquesa sí aclaran bien. */
.vac-regla i.gozada { --tono: #00a8a3; --relleno: 58%; }
.vac-regla i.encurso { --tono: #c0392b; --relleno: 72%; }
.vac-regla i.pactada { --tono: #f9c157; --relleno: 54%; }
.vac-regla i.pagada { --tono: #74b3f0; --relleno: 46%; }
/* Lo que le queda por tomar, y lo que todavía no se gana: el mismo verde
   apenas insinuado, para que la regla se lea como una sola cosa que se va
   llenando y no como rayitas grises con unas de color encima. */
.vac-regla i.queda { --relleno: 27%; }

/* En oscuro el tinte tiene que subir: si no, el fondo negro se lo come y
   todo queda color barro. */
[data-theme="dark"] .vac-regla i.gozada { --relleno: 90%; }
[data-theme="dark"] .vac-regla i.encurso { --relleno: 86%; }
[data-theme="dark"] .vac-regla i.pactada { --relleno: 84%; }
[data-theme="dark"] .vac-regla i.pagada { --relleno: 82%; }
[data-theme="dark"] .vac-regla i.queda { --relleno: 34%; }
[data-theme="dark"] .vac-regla i { --relleno: 14%; }

.vac-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}
.vac-pie span { display: inline-flex; align-items: center; gap: 7px; }
.vac-pie b { color: var(--ink); font-weight: 650; }
.vac-pie .pt, .cal-leyenda .pt { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
/* Los puntos del pie son la leyenda de la regla: mismos tonos, mismo
   redondeo, para que uno los empate de un vistazo. */
.vac-pie .pt { border-radius: 999px; }
/* Los puntos del pie son la leyenda de la regla: mismo tono y mismo relleno,
   en chiquito, para empatarlos de un vistazo. */
.vac-pie .pt {
  --tono: var(--teal);
  --relleno: 13%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tono) var(--relleno), transparent);
}
.vac-pie .pt.gozada { --tono: #00a8a3; --relleno: 58%; }
.vac-pie .pt.encurso { --tono: #c0392b; --relleno: 72%; }
.vac-pie .pt.pactada { --tono: #f9c157; --relleno: 54%; }
.vac-pie .pt.pagada { --tono: #74b3f0; --relleno: 46%; }
.vac-pie .pt.queda { --relleno: 27%; }
[data-theme="dark"] .vac-pie .pt.gozada { --relleno: 90%; }
[data-theme="dark"] .vac-pie .pt.encurso { --relleno: 86%; }
[data-theme="dark"] .vac-pie .pt.pactada { --relleno: 84%; }
[data-theme="dark"] .vac-pie .pt.pagada { --relleno: 82%; }
[data-theme="dark"] .vac-pie .pt.queda { --relleno: 34%; }
/* El primer renglón del pie no lleva punto: no es un color de la regla,
   es el total del año. */
.vac-pie-titulo { color: var(--muted); }

/* ── Los períodos ya cerrados: compactos ────────────────────────────────── */
.vac-periodos { display: grid; gap: 9px; }
.vac-periodo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 18px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
}
.vac-periodo .vac-regla { gap: 3px; }
.vac-periodo .vac-regla i { height: 7px; }
.vac-cifras { text-align: right; }
.vac-cifras small { display: block; color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.vac-cifras b { font-size: 17px; font-variant-numeric: tabular-nums; }

/* ── Los días asignados ─────────────────────────────────────────────────── */
.vac-lista { display: grid; gap: 9px; }
.vac-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
}
.vac-fila.gozada { background: color-mix(in srgb, var(--teal) 4%, var(--card)); }
.vac-que { min-width: 0; }
.vac-que > b { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 650; }
.vac-que > small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.vac-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.vac-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* La pastilla de un día que todavía no llega es un botón: se toca la equis
   y ese día vuelve al saldo. La equis va SIEMPRE a la vista, no solo al
   pasar el mouse: escondida no se encuentra, y él preguntó dos veces cómo
   se quitaba un día. Lo que se puede deshacer tiene que verse. */
.vac-chip.quitable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.vac-chip.quitable svg {
  width: 12px;
  height: 12px;
  opacity: .75;
  transition: opacity .16s ease;
}
.vac-chip.quitable:hover,
.vac-chip.quitable:focus-visible {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 20%, transparent);
}
.vac-chip.quitable:hover svg,
.vac-chip.quitable:focus-visible svg { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .vac-chip.quitable,
  .vac-chip.quitable svg { transition: none; }
}

/* Las pastillas siguen al calendario: turquesa lo ya gozado. */
.vac-chip.ido {
  border-color: color-mix(in srgb, var(--teal) 45%, transparent);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
}
/* El de hoy, en rojo: es el único día que está pasando ahorita. */
/* La pastilla de un pago: la fecha y, debajo, cuántos días cubrió. Se toca
   y sale el recibo de ESE pago, que cada uno tuvo su fecha y su firma. */
.vac-chip.pagada {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border-color: color-mix(in srgb, var(--blue, #087ee9) 34%, var(--line));
  background: color-mix(in srgb, #087ee9 10%, transparent);
  color: #087ee9;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.vac-chip.pagada em { font-style: normal; font-weight: 500; opacity: .8; }
.vac-chip.pagada:hover { border-color: #087ee9; background: color-mix(in srgb, #087ee9 18%, transparent); }
[data-theme="dark"] .vac-chip.pagada { color: #7ab8f5; border-color: rgba(122,184,245,.34); background: rgba(8,126,233,.16); }

.vac-chip.encurso {
  border-color: color-mix(in srgb, var(--red) 42%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}
.vac-lado { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.vac-quitar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}
.vac-quitar:hover { border-color: var(--red); color: var(--red); }
.vac-quitar svg { width: 14px; height: 14px; }
.vac-vacio { grid-column: 1 / -1; }

/* ── El calendario al lado ──────────────────────────────────────────────── */
.vac-calendario {
  position: sticky;
  top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(16, 28, 66, .07);
}
[data-theme="dark"] .vac-calendario { box-shadow: 0 12px 34px rgba(0, 0, 0, .3); }
.vac-calendario .calendario { border: 0; padding: 0; background: transparent; }
.vac-nota { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.vac-sin-fecha { margin-top: 18px; }

/* El día de hoy, señalado sin gritar. */
.cal-dia.hoy { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 55%, transparent); }

/* En ventana ancha el calendario va en su columna de 316 px y todo cae uno
   debajo del otro. */
.vac-cal-lado { margin-top: 12px; }

/* El acceso a la constancia, debajo del calendario y solo cuando el mes que
   se está viendo tiene días apartados. Es el papel con el que él se
   respalda si después alguien dice que no se le dieron esos días. */
/* El botón de la constancia dentro del renglón de días asignados: con
   rótulo, que un iconito solo no dice qué papel saca.

   Va como pastilla, a juego con la insignia de "Pactados" que tiene al
   lado: los dos se leen como piezas del mismo renglón. Heredaba la caja
   cuadrada de 28 px de .vac-quitar y el icono y el rótulo se apilaban uno
   encima del otro, saliéndose del recuadro. */
.vac-quitar.con-rotulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--orange) 32%, var(--line));
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.vac-quitar.con-rotulo svg { width: 13px; height: 13px; color: var(--orange); }
.vac-quitar.con-rotulo:hover {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--ink);
}

/* El hueco de la constancia guarda su sitio aunque no haya botón: si
   apareciera y desapareciera, el cuadro cambiaría de alto al pasar los
   meses y todo lo de abajo daría un brinco. */
/* El hueco guarda el sitio del botón haya botón o no, para que el panel no
   brinque al pasar de mes. Antes el hueco medía 40 px vacío y 41,25 con el
   botón adentro —el alto del botón dependía de la letra— y el calendario
   daba un saltito de un pelo justo en el mes que tiene constancia. Ahora el
   botón tiene alto fijo y el hueco mide exactamente eso: el mismo número
   en los dos casos, venga la letra que venga. */
.vac-constancia-hueco {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  min-height: 32px;
}
.vac-constancia {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--orange) 7%, transparent);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}
.vac-constancia:hover { border-color: var(--orange); transform: translateY(-1px); }
.vac-constancia:active { transform: none; }
.vac-constancia svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--orange); }
.vac-constancia b { font-size: 11.5px; font-weight: 650; }
.vac-constancia small { color: var(--muted); font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) {
  .vac-constancia { transition: none; }
  .vac-constancia:hover { transform: none; }
}

/* En ventana mediana la pestaña se pone en una sola columna y el panel del
   calendario se queda con TODO el ancho: el cuadro de 320 px quedaba
   flotando en medio con dos lagunas blancas a los lados y la explicación
   estirada de lado a lado. Se veía raro, y con razón. Aquí la leyenda y la
   explicación se pasan al costado del calendario, que es justo lo que llena
   ese hueco sin agrandar nada ni meter botones de relleno. */
@media (max-width: 1120px) {
  .vac-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .vac-periodo { grid-template-columns: minmax(0, 1fr) auto; }
  .vac-periodo .vac-regla { grid-column: 1 / -1; }

  .vac-calendario {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
    column-gap: 26px;
  }
  .vac-calendario > h2 { grid-column: 1 / -1; }
  .vac-calendario .calendario { margin-inline: 0; }
  .vac-cal-lado { align-self: center; margin-top: 0; }
  .vac-cal-lado .cal-leyenda { flex-direction: column; align-items: flex-start; gap: 9px; }
  .vac-nota { margin-top: 14px; }
}

/* Y cuando ya no caben los dos al lado —el calendario pide 320 px y la
   explicación otros 180—, vuelven a apilarse. Ahí el panel se encoge hasta
   el ancho del calendario y se centra: dejarlo de lado a lado con el cuadro
   flotando en medio es justo lo que se veía raro. */
@media (max-width: 720px) {
  .vac-calendario {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    max-width: 372px;
    margin-inline: auto;
  }
  .vac-calendario .calendario { margin-inline: auto; }
  .vac-cal-lado { align-self: stretch; }
  .vac-cal-lado .cal-leyenda { flex-direction: row; flex-wrap: wrap; }
}

/* El historial de vacaciones no se desliza por dentro: se aprieta lo justo
   para que quepan sus cuatro columnas. Un cuadro con scroll adentro esconde
   información sin avisar. */
.vac-historial th,
.vac-historial td { padding-left: 9px; padding-right: 9px; }
.vac-historial td:first-child { max-width: none; }
/* La fecha en números, sin partirse: "15-07-24 → 20-07-24" en un renglón. */
.hist-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist-flecha { font-style: normal; margin: 0 5px; color: var(--muted); }
/* Debajo del movimiento, en chiquito, qué fue: gozadas o saldadas. */
.hist-que { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

/* El escogedor de período va pegado a los botones, no colgando solo en un
   renglón aparte: en ventana angosta el "margin-left: auto" lo empujaba
   hasta abajo y quedaba suelto, lejos de Boleta. */
@media (max-width: 900px) {
  .vac-periodo-picker { margin-left: 0; }
  .vac-periodo-picker { font-size: 0; gap: 0; }
  .vac-periodo-picker .anio-picker { font-size: 12.5px; }
}

/* En pantallas de poca altura la barra lateral no cabe entera y se pone a
   deslizarse por dentro. Se aprieta un poco para que quepa completa. */
@media (max-height: 860px) {
  .sidebar { padding-top: 14px; padding-bottom: 10px; }
  .sidebar nav { gap: 3px; }
}

/* El año, encima del calendario de la pestaña. */
.vac-anio { margin-bottom: 12px; }
.vac-anio .liquidation-picker { justify-content: space-between; }
.vac-anio .anio-picker { flex: 0 0 auto; }
.vac-anio .anio-boton { min-width: 96px; }

/* El historial, al final de la pantalla de vacaciones. */
.vac-historial { margin-top: 0; }
.vac-historial table { width: 100%; }
.vac-fila .vac-que > small { color: var(--muted); font-size: 11.5px; }

/* ── La portada de cada pestaña ───────────────────────────────────────────
   Al entrar, la pestaña no enseña los datos de nadie: dice de qué es y pide
   escoger a quién. Así, si él le muestra la pantalla a alguien o se levanta
   un rato, no queda la plata de otro a la vista. */
.portada {
  display: grid;
  place-items: center;
  min-height: min(74vh, 620px);
  padding: 24px 0;
}
.portada-marco {
  width: min(560px, 100%);
  padding: 40px 40px 34px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 18px 50px rgba(16, 28, 66, .09);
  text-align: center;
}
[data-theme="dark"] .portada-marco { box-shadow: 0 22px 60px rgba(0, 0, 0, .38); }

.portada-icono {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--teal) 13%, transparent);
  color: var(--teal);
}
.portada-icono svg { width: 28px; height: 28px; }

.portada h1 {
  margin: 0 0 8px;
  font-size: 27px;
  font-weight: 630;
  letter-spacing: -.015em;
}
.portada p {
  margin: 0 auto;
  max-width: 42ch;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}
.portada-linea {
  width: 46px;
  height: 2px;
  margin: 24px auto 22px;
  border-radius: 2px;
  background: var(--teal);
  opacity: .5;
}
.portada-pide {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.portada-gente {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.portada-quien {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.portada-quien:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(16, 28, 66, .12);
}
.portada-quien .avatar { width: 34px; height: 34px; font-size: 12px; }
.portada-quien b { display: block; font-size: 13.5px; font-weight: 650; }
.portada-quien small { display: block; color: var(--muted); font-size: 11px; }

/* El renglón lleva dos hijos y nada más: el ojito y la frase entera dentro
   de un <span>. Sin ese <span>, el <b>15 segundos</b> del medio se volvía
   otro hijo del flex y partía la frase en tres columnas encimadas. */
.portada-nota {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 26px;
  max-width: 44ch;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
}
.portada-nota svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
.portada-nota > span { flex: 1 1 auto; }

@media (max-width: 720px) {
  .portada-marco { padding: 30px 22px 26px; }
  .portada-gente { flex-direction: column; }
  .portada-quien { width: 100%; }
}

/* ── La portada cuando hay mucha gente ───────────────────────────────────── */
.portada-buscar {
  position: relative;
  display: block;
  margin: 0 auto 18px;
  max-width: 360px;
}
.portada-buscar svg {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.portada-buscar input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.portada-buscar input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
}

/* ── La lupita plegada ─────────────────────────────────────────────────────
   Cuando todas las caras caben en pantalla el buscador estorba, pero tiene
   que estar: la lista tiene tope. Se pliega en una lupita del tamaño de un
   botón y se abre sola al tocarla. Ancho y letra son lo único que se anima;
   el alto se queda quieto para que las caras de abajo no brinquen. */
.portada-buscar.discreta {
  width: 34px;
  max-width: 34px;
  margin: 16px auto 0;
  /* Mismo compás que el resto del programa. Con .2s y `ease` la apertura se
     sentía de golpe; con la curva de la casa aterriza suave. */
  transition: max-width var(--dur-3) var(--ease-abrir), width var(--dur-3) var(--ease-abrir);
}
.portada-buscar.discreta svg {
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: left var(--dur-3) var(--ease-abrir), margin var(--dur-3) var(--ease-abrir);
}
.portada-buscar.discreta input {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 0;
  border-color: transparent;
  background: transparent;
  cursor: pointer;
  transition:
    width var(--dur-3) var(--ease-abrir),
    padding var(--dur-3) var(--ease-abrir),
    background-color var(--dur-2) ease,
    border-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease;
}
.portada-buscar.discreta:hover input {
  border-color: var(--line);
  background: var(--card);
}
.portada-buscar.discreta:focus-within {
  width: 100%;
  max-width: 300px;
}
.portada-buscar.discreta:focus-within svg {
  left: 13px;
  right: auto;
  margin: 0;
}
.portada-buscar.discreta:focus-within input {
  width: 100%;
  height: 34px;
  padding: 0 14px 0 38px;
  font-size: 13.5px;
  cursor: text;
  background: var(--card);
}

.portada-recientes > span {
  display: block;
  margin-bottom: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.portada-todos {
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
.portada-nadie { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; }
.portada-cuantos {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
}


/* ── El encabezado del comprobante ────────────────────────────────────────
   El nombre y la cédula van juntos, uno bajo el otro, como en cualquier
   recibo. Antes el nombre ocupaba dos columnas y la cédula caía sola en la
   tercera, y a la vista parecían dos datos de personas distintas. */
.cp-persona { grid-column: span 2; }
.cp-persona > b { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.cp-persona .cp-cedula {
  display: block;
  margin-top: 3px;
  color: var(--cp-suave);
  font-size: 11.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* La nota chiquita bajo un concepto tiene que leerse: es la que dice de
   dónde sale el número. */
.cp-base { color: var(--cp-suave); font-size: 11.5px; line-height: 1.45; }

/* ── El tiempo que la pantalla queda a la vista ──────────────────────────── */
.espera-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 4px;
}
.espera-opcion {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.espera-opcion:hover { border-color: var(--teal); color: var(--teal); }
.espera-opcion.puesta {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal);
}

/* ── El encabezado del comprobante, en dos lados ─────────────────────────
   A la izquierda a QUIÉN se le paga; a la derecha DE QUÉ se trata. Antes
   todo iba en una rejilla de tres columnas y, al juntar el nombre con la
   cédula, el lado derecho quedaba cojo. */
.cp-encabezado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: start;
  gap: 26px 34px;
  padding: 26px 0 28px;
}

.cp-quien > span,
.cp-quien-pie > span,
.cp-hecho > span {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-tenue);
}
.cp-quien > b {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.cp-quien > small {
  display: block;
  margin-top: 3px;
  color: var(--cp-suave);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.cp-quien-pie {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--cp-regla);
}
.cp-quien-pie > b {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* Los hechos: rótulo arriba, valor abajo, todo alineado por la derecha para
   que la columna quede pareja aunque los textos midan distinto. */
.cp-hechos {
  display: grid;
  gap: 15px;
  text-align: right;
  min-width: 190px;
}
.cp-hecho > b {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.3;
}
.cp-hecho > b > small {
  display: block;
  margin-top: 2px;
  color: var(--cp-suave);
  font-size: 11.5px;
  font-weight: 400;
}

@media (max-width: 620px) {
  .cp-encabezado { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cp-hechos { text-align: left; min-width: 0; }
}

/* ── El reporte del equipo, vestido como los comprobantes ────────────────
   Es papel igual que los demás: mismo membrete, mismo encabezado de dos
   lados, mismo blanco en los dos temas. Antes llevaba dos cabeceras, una
   encima de la otra, repitiendo el título. */
.drawer[data-cajon="reporte"] { width: min(880px, 96vw); }

/* ── De dónde sale el valor del día ──────────────────────────────────────
   Un renglón de la tabla dice "₡17 600 el día" y ya. Aquí abajo, donde hay
   campo, se enseña la cuenta entera: la hora que gana esa persona por las
   ocho horas de la jornada. Así nadie tiene que creerlo de memoria. */
/* ── La fórmula del día ──────────────────────────────────────────────────
   Va en la franja que queda entre la línea fina con que cierra la tabla y
   la línea gruesa del total, justo debajo de "cada día se paga como 8 horas
   de trabajo". Chiquita a propósito: es un dato al margen, no un renglón
   más del papel. */
.cp-formula {
  margin: 7px 0 0;
  line-height: 1.2;
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cp-tenue);
  font-variant-numeric: tabular-nums;
}
.cp-formula b { font-weight: 600; color: var(--cp-suave); }
/* Con la fórmula en medio, la franja se cierra: las dos líneas quedan
   juntas y el dato metido entre ellas, sin aire de sobra. */
.cp-formula + .cp-total { margin-top: 7px; }

/* ── Los días que le quedan, abajo del papel ─────────────────────────────
   Es la pregunta que se hace cualquiera al recibir la boleta: ¿y cuántos
   me quedan? Va abajo, con campo, y no arriba en letra chiquita. */
.cp-pendientes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--cp-regla);
  border-radius: 10px;
}
.cp-pendientes > div > span {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-tenue);
}
.cp-pendientes > div > small {
  display: block;
  margin-top: 4px;
  color: var(--cp-suave);
  font-size: 11.5px;
  line-height: 1.45;
}
.cp-pendientes > b {
  flex: 0 0 auto;
  text-align: right;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cp-verde);
  font-variant-numeric: tabular-nums;
}
.cp-pendientes > b > em {
  display: block;
  margin-top: 5px;
  color: var(--cp-suave);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

/* El aviso del artículo 81: va suelto entre la barra y la tabla, no dentro
   de una tarjeta, porque no es un dato más sino algo que hay que atender. */
.faltas-aviso { margin: 0 0 14px; }

/* La barra de Ausencias lleva botón, dos escogedores y cuatro filtros: en
   ventana angosta no caben en un renglón y el último quedaba cortado. */
.toolbar-faltas { flex-wrap: wrap; }
.toolbar-faltas .segmented { flex-wrap: wrap; }

/* ── Liquidaciones, la pestaña como documento ─────────────────────────────
   Dos columnas, igual que Vacaciones y Aguinaldos: el papel a la izquierda
   y, a la derecha, lo justo para poder leerlo —en qué va el trámite y de
   dónde salen los números—. Arriba, en su propia barra, los datos de la
   salida: el motivo y las fechas se ven sin abrir el configurador. */
.liq-salida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.liq-salida-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  min-width: 0;
}
.liq-salida-datos span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.liq-salida-datos small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.liq-salida-datos b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.liq-salida-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.liq-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  align-items: start;
  gap: 18px;
}
.liq-columna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.liq-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.liq-panel {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.liq-panel h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.liq-panel .badge { margin-bottom: 12px; }
.liq-panel-nota { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.liq-panel .liq-basis { margin: 0; padding: 0; border: 0; background: none; }
.liq-panel .liq-basis > div { display: flex; flex-direction: column; gap: 12px; }

/* La línea que la ley no concede. Antes salía "0 días × ₡6.982,64" y "₡0",
   que parece un error del programa; ahora se apaga y dice por qué. */
.liq-no-toca { opacity: .55; }
.liq-no-toca .liq-formula { font-style: italic; }
.liq-no-toca .liq-amount { color: var(--muted); font-weight: 600; }

.liq-anteriores h2 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.liq-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
/* El período liquidado manda en la tabla: es lo que se viene a buscar
   —de qué día a qué día— y por eso lleva la columna ancha. */
.liq-anteriores .data-area th:nth-child(1) { width: 34%; }
.liq-anteriores .data-area th:nth-child(2) { width: 18%; }
.liq-anteriores .data-area .col-accion { width: 1%; white-space: nowrap; }

/* En ventana angosta la columna de apoyo se va debajo del papel, nunca al
   lado apretada: los números no se leen en una columna de 150 píxeles. */
@media (max-width: 1040px) {
  .liq-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .liq-lado { flex-direction: row; flex-wrap: wrap; }
  .liq-lado .liq-panel { flex: 1 1 260px; }
}
@media (max-width: 720px) {
  .liq-salida { flex-direction: column; align-items: stretch; }
  .liq-lado { flex-direction: column; }
}

/* ── El cajón de la liquidación ───────────────────────────────────────────
   Quién se liquida ya no se pregunta: es la persona que se está viendo, y
   se enseña con su cara para que no quede duda de a quién se le está
   armando el papel. */
.liq-quien-fijo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.liq-quien-fijo span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.liq-quien-fijo b { font-size: 13.5px; font-weight: 600; }
.liq-quien-fijo small { font-size: 12px; color: var(--muted); }
.cajon-nota {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.cajon-nota b { color: var(--ink); font-weight: 600; }

/* El cuadro de confirmación va angosto a propósito: es una pregunta, no
   una pantalla, y a lo ancho se leía como un formulario más. */
.liq-seguro { max-width: 430px; margin: 0 auto; }
.liq-seguro .pagar-repaso { gap: 9px 14px; }
.drawer-actions.tres { flex-wrap: wrap; gap: 8px; }
.drawer-actions.tres .button { flex: 1 1 auto; }

/* ── La regla de antigüedad ───────────────────────────────────────────────
   Los escalones del Código de Trabajo, dibujados. Cada escalón es una
   barrita con su rótulo debajo; los días no se enseñan todos a la vez
   —treinta y tres números juntos no se leen, se ignoran— sino que salen al
   pasar el puntero, y el escalón se levanta igual que las columnas de
   Aguinaldos. Turquesa para lo cumplido, rojo para hoy: el idioma de
   siempre de la casa. */
.liq-regla {
  margin: 0 0 18px;
  padding: 15px 17px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.liq-regla > header { margin-bottom: 13px; }
.liq-regla h3 {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.liq-regla > header p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.liq-regla > header b { color: var(--ink); font-weight: 600; }

/* Sin carril deslizable a propósito: en CSS, en cuanto un eje deja de ser
   "visible" el otro también se recorta, y el globito de los días quedaba
   cortado por arriba. Once escalones caben de sobra en la columna del
   papel, así que se dejan encoger y el globito puede salirse. */
.liq-regla-pista { padding: 8px 0 0; }
.liq-regla-pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tramos), minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* El escalón sobre el que está el puntero se sube por encima de sus
   vecinos. Sin esto, el resplandor se desparrama por debajo de las
   barritas de al lado —que son opacas y se pintan después— y se ve cortado
   justo a la altura de los rótulos. */
.liq-regla-pasos > li { position: relative; display: flex; flex-direction: column; gap: 6px; }
.liq-regla-pasos > li:hover { z-index: 4; }

/* La barrita. Lo que todavía no llega es apenas un rastro; lo cumplido y el
   escalón de hoy llevan el turquesa encendido de las columnas de
   Aguinaldos: degradado de claro a lleno y resplandor del mismo color. */
.liq-regla-pasos > li > i {
  height: 11px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--teal) 13%, transparent);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.liq-regla-pasos > li.pasado > i,
.liq-regla-pasos > li.actual > i {
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 88%, #fff), var(--teal));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--teal) 26%, transparent);
}
.liq-regla-pasos > li.actual > i { box-shadow: 0 3px 15px color-mix(in srgb, var(--teal) 48%, transparent); }
/* Los primeros tres meses no dan nada: el turquesa aquí significa "ganado",
   así que ese tramo va en gris y sin resplandor. */
.liq-regla-pasos > li.sin > i,
.liq-regla-pasos > li.sin.pasado > i {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  box-shadow: none;
}

/* Al pasar por encima, el escalón se levanta y enseña sus días. */
.liq-regla-pasos > li:hover > i { transform: translateY(-3px) scaleY(1.45); }
/* Pero el resplandor es solo para lo que ya se ganó. Un escalón que
   todavía no llega no tiene por qué encenderse: se levanta apagado, igual
   que el tramo del arranque. Encender lo que no se ha cumplido haría
   pensar que ya está ahí. */
.liq-regla-pasos > li.pasado:hover > i,
.liq-regla-pasos > li.actual:hover > i {
  /* Un halo alrededor además del resplandor de abajo: así la luz envuelve
     la barrita en vez de caerle solo por un lado. */
  box-shadow: 0 0 14px color-mix(in srgb, var(--teal) 42%, transparent),
              0 6px 18px color-mix(in srgb, var(--teal) 40%, transparent);
}
.liq-regla-pasos > li.sin:hover > i,
.liq-regla-pasos > li.sin.pasado:hover > i,
.liq-regla-pasos > li.futuro:hover > i { box-shadow: none; }

.liq-regla-pasos > li > b {
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color .18s var(--ease);
}
.liq-regla-pasos > li.actual > b { color: var(--teal); }
.liq-regla-pasos > li:hover > b { color: var(--ink); }

/* El globito con los días va DEBAJO del escalón, no encima: arriba está el
   título de la regla y el globito le caía sobre las letras. Abajo cae justo
   sobre el renglón de la leyenda, que para eso tiene su altura apartada, y
   así aparece siempre en el mismo sitio. */
.liq-regla-globo {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--card);
  width: 158px;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.liq-regla-globo b { color: inherit; font-weight: 700; }
.liq-regla-pasos > li:hover .liq-regla-globo { opacity: 1; transform: translate(-50%, 0); }
/* Los dos de cada orilla se pegan a su lado, o se saldrían de la tarjeta.
   Se cuenta con nth-*-of-type porque la rayita de hoy también es hija de
   la lista y :last-child se la llevaría a ella. */
.liq-regla-pasos > li:nth-of-type(-n+2) .liq-regla-globo { left: 0; transform: translate(0, -4px); }
.liq-regla-pasos > li:nth-of-type(-n+2):hover .liq-regla-globo { transform: translate(0, 0); }
.liq-regla-pasos > li:nth-last-of-type(-n+2) .liq-regla-globo { left: auto; right: 0; transform: translate(0, -4px); }
.liq-regla-pasos > li:nth-last-of-type(-n+2):hover .liq-regla-globo { transform: translate(0, 0); }

/* Hoy, en rojo y encendido: es lo único rojo de la regla, así que se
   encuentra de una sin competirle a nada. */
.liq-regla-flecha {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 21px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff7a6d, #d92e26);
  box-shadow: 0 0 5px rgba(217, 46, 38, .8), 0 0 13px rgba(217, 46, 38, .45);
  pointer-events: none;
  /* Por encima de los escalones, incluso del que se está levantando. */
  z-index: 6;
}
.liq-regla-flecha::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9b91, #d92e26 72%);
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px var(--card), 0 0 7px rgba(217, 46, 38, .85), 0 0 16px rgba(217, 46, 38, .5);
}

/* La leyenda aparta su altura para que el globito, que cae justo encima de
   ella, no tape nada de lo que sigue. */
.liq-regla-pie { min-height: 38px; margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.liq-regla-aviso {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.liq-regla-aviso b { color: var(--ink); font-weight: 600; }
.liq-regla-aviso svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--teal); }

/* En oscuro el tinte tiene que subir o el fondo se lo come. */
[data-theme="dark"] .liq-regla-pasos > li > i { background: rgba(255, 255, 255, .09); }
[data-theme="dark"] .liq-regla-pasos > li.pasado > i,
[data-theme="dark"] .liq-regla-pasos > li.actual > i {
  background: linear-gradient(180deg, #7ee6e0, #5fd8d0);
  box-shadow: 0 3px 10px rgba(95, 216, 208, .22);
}
[data-theme="dark"] .liq-regla-pasos > li.actual > i { box-shadow: 0 3px 15px rgba(95, 216, 208, .46); }
[data-theme="dark"] .liq-regla-pasos > li.pasado:hover > i,
[data-theme="dark"] .liq-regla-pasos > li.actual:hover > i { box-shadow: 0 0 14px rgba(95, 216, 208, .45), 0 6px 18px rgba(95, 216, 208, .5); }
[data-theme="dark"] .liq-regla-pasos > li.sin:hover > i,
[data-theme="dark"] .liq-regla-pasos > li.sin.pasado:hover > i,
[data-theme="dark"] .liq-regla-pasos > li.futuro:hover > i { box-shadow: none; }
[data-theme="dark"] .liq-regla-pasos > li.sin > i,
[data-theme="dark"] .liq-regla-pasos > li.sin.pasado > i {
  background: color-mix(in srgb, var(--muted) 24%, transparent);
  box-shadow: none;
}
/* En oscuro el globito iba casi blanco: un cuadro encendido sobre la noche.
   Ahora es un globo oscuro, un escalón más alto que la tarjeta, que se
   despega por el canto de luz y la sombra. */
[data-theme="dark"] .liq-regla-globo {
  background: #2a3548;
  color: #e8edf7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .liq-regla-aviso { background: color-mix(in srgb, var(--teal) 12%, transparent); }

/* Un interruptor trabado por la ley. Se ve apagado y con candado para que
   quede claro que no es que falle: es que ahí la ley no da a escoger. */
.liquidation-form label.trabado { position: relative; opacity: .72; }
.liquidation-form label.trabado select { cursor: not-allowed; }
.liquidation-form label.trabado::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 13px;
  width: 11px;
  height: 11px;
  background: currentColor;
  opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* ── El escogedor de estado de Colaboradores ──────────────────────────────
   Antes eran tres botones en fila —Todos, Activos, Inactivos— del mismo
   tamaño y con el mismo peso, y eso le daba a los inactivos la misma
   importancia que a la gente que sí está trabajando. Ahora es un menú que
   arranca en Activos: los demás siguen ahí, pero hay que ir a buscarlos. */
.filtro-estado { position: relative; }
.filtro-estado > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .16s ease;
}
.filtro-estado > summary::-webkit-details-marker { display: none; }
.filtro-estado > summary:hover { border-color: #a9b6cb; }
.filtro-estado[open] > summary { border-color: var(--teal); }
.filtro-estado > summary svg { width: 14px; height: 14px; color: var(--muted); transition: transform .18s var(--ease); }
.filtro-estado[open] > summary svg { transform: rotate(180deg); }

.filtro-estado-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
}
.filtro-estado-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.filtro-estado-menu button span:nth-of-type(2) { flex: 1; }
.filtro-estado-menu button b { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.filtro-estado-menu button:hover { background: color-mix(in srgb, var(--teal) 10%, transparent); }
.filtro-estado-menu button.on { background: color-mix(in srgb, var(--teal) 14%, transparent); font-weight: 600; }

/* Verde el que trabaja, ámbar el que está en pausa, rojo el que ya salió. */
.dot-pausa { background: #f9c157; }
.dot-todos { background: color-mix(in srgb, var(--muted) 45%, transparent); }

[data-theme="dark"] .filtro-estado-menu { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }

/* El botón de sacar a alguien de la empresa, al pie de la columna y en
   gris. Antes iba arriba del todo, grande y de primero, que es donde uno
   pone lo que quiere que la gente apriete. Esto es lo contrario: tiene que
   estar, pero hay que ir a buscarlo. */
.employee-estado-pie { display: flex; justify-content: flex-start; padding-top: 2px; }
.employee-detail-side .employee-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.employee-detail-side .employee-status-toggle svg { width: 14px; height: 14px; }
.employee-detail-side .employee-status-toggle:hover {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 7%, transparent);
  color: var(--red);
}

/* El cuadro de confirmar la liquidación es una pregunta, no una pantalla:
   va angosto, como el de pagar en Tiempo laborado. Sin esto tomaba el
   ancho de un cajón cualquiera y la cuenta quedaba nadando en el vacío. */
.drawer[data-cajon="liquidacion-seguro"] { width: min(440px, 94vw); }
.drawer[data-cajon="liquidacion-seguro"] .liq-seguro { width: 100%; max-width: none; }

/* ── El destello, llevado a Vacaciones y Aguinaldos ──────────────────────
   Lo que se copia de la regla de Liquidaciones es EL DESTELLO, no el
   relleno. El primer intento le puso un degradado que mezclaba con blanco
   opaco arriba, y eso no le agregó brillo: le cambió el color a las
   muescas y las volvió otra cosa. El relleno se queda exactamente como
   estaba —un tinte plano y translúcido— y lo único que se agrega es el
   halo del mismo color por debajo. */
.vac-regla i,
.vac-pie .pt,
.cal-leyenda .pt {
  --halo: 0%;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--tono) var(--halo), transparent);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

/* Aquí estaba la diferencia con Liquidaciones, y no era el brillo: era el
   relleno. Las muescas de Vacaciones eran tintes translúcidos —un 34% de
   color sobre la tarjeta— y las barras de Liquidaciones son color LLENO
   con un degradado de claro a hondo. Por eso las de allá se ven encendidas
   y estas se veían lavadas por más halo que se les pusiera.
   Ahora llevan la misma fórmula, cada una con su color: turquesa lo
   gozado, rojo hoy, ámbar lo apartado, azul lo saldado. Lo único que sigue
   translúcido es lo que todavía no se gana, que es lo correcto: eso no es
   un color apagado, es la ausencia de color. */
.vac-regla i.gozada, .vac-regla i.encurso, .vac-regla i.pactada, .vac-regla i.pagada,
.vac-pie .pt.gozada, .vac-pie .pt.encurso, .vac-pie .pt.pactada, .vac-pie .pt.pagada,
.cal-leyenda .pt.gozada, .cal-leyenda .pt.encurso, .cal-leyenda .pt.pactada, .cal-leyenda .pt.pagada {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 82%, #fff), var(--tono));
}
[data-theme="dark"] .vac-regla i.gozada, [data-theme="dark"] .vac-regla i.encurso,
[data-theme="dark"] .vac-regla i.pactada, [data-theme="dark"] .vac-regla i.pagada,
[data-theme="dark"] .vac-pie .pt.gozada, [data-theme="dark"] .vac-pie .pt.encurso,
[data-theme="dark"] .vac-pie .pt.pactada, [data-theme="dark"] .vac-pie .pt.pagada,
[data-theme="dark"] .cal-leyenda .pt.gozada, [data-theme="dark"] .cal-leyenda .pt.encurso,
[data-theme="dark"] .cal-leyenda .pt.pactada, [data-theme="dark"] .cal-leyenda .pt.pagada {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 62%, #fff), var(--tono));
}
.vac-regla i.gozada, .vac-pie .pt.gozada, .cal-leyenda .pt.gozada { --halo: 34%; }
.vac-regla i.encurso, .vac-pie .pt.encurso, .cal-leyenda .pt.encurso { --halo: 42%; }
.vac-regla i.pactada, .vac-pie .pt.pactada, .cal-leyenda .pt.pactada { --halo: 36%; }
.vac-regla i.pagada, .vac-pie .pt.pagada, .cal-leyenda .pt.pagada { --halo: 34%; }
.vac-regla i.queda, .vac-pie .pt.queda, .cal-leyenda .pt.queda { --halo: 14%; }

/* El azul de "saldado en dinero" era tan pálido que al lado del turquesa
   no se leía como azul. Se hunde el tono y se sube el tinte para que sea
   azul de verdad, que es lo que tiene que decir de un vistazo. */
.vac-regla i.pagada, .vac-pie .pt.pagada, .cal-leyenda .pt.pagada { --tono: #3d93e8; --relleno: 62%; }
[data-theme="dark"] .vac-regla i.pagada,
[data-theme="dark"] .vac-pie .pt.pagada,
[data-theme="dark"] .cal-leyenda .pt.pagada { --relleno: 88%; }

/* Al pasar por encima, la muesca se levanta y el halo se abre alrededor,
   igual que los escalones de la regla. Pero SOLO las que significan algo:
   un día que todavía no se gana no tiene nada que enseñar, así que ni se
   levanta ni se enciende. Que reaccionara prometía una información que no
   existe, y en un período recién abierto eso son casi todas. */
.vac-regla i.gozada:hover,
.vac-regla i.encurso:hover,
.vac-regla i.pactada:hover,
.vac-regla i.pagada:hover,
.vac-regla i.queda:hover {
  transform: scaleY(1.6);
  box-shadow: 0 0 13px color-mix(in srgb, var(--tono) var(--halo), transparent),
              0 5px 16px color-mix(in srgb, var(--tono) var(--halo), transparent);
}
.vac-regla i:not(.gozada):not(.encurso):not(.pactada):not(.pagada):not(.queda):hover { transform: none; box-shadow: none; cursor: default; }

[data-theme="dark"] .vac-regla i.gozada, [data-theme="dark"] .vac-pie .pt.gozada, [data-theme="dark"] .cal-leyenda .pt.gozada { --halo: 40%; }
[data-theme="dark"] .vac-regla i.encurso, [data-theme="dark"] .vac-pie .pt.encurso, [data-theme="dark"] .cal-leyenda .pt.encurso { --halo: 48%; }
[data-theme="dark"] .vac-regla i.pactada, [data-theme="dark"] .vac-pie .pt.pactada, [data-theme="dark"] .cal-leyenda .pt.pactada { --halo: 42%; }
[data-theme="dark"] .vac-regla i.pagada, [data-theme="dark"] .vac-pie .pt.pagada, [data-theme="dark"] .cal-leyenda .pt.pagada { --halo: 40%; }
[data-theme="dark"] .vac-regla i.queda, [data-theme="dark"] .vac-pie .pt.queda, [data-theme="dark"] .cal-leyenda .pt.queda { --halo: 18%; }

/* Al pasar por encima, la muesca se levanta y el halo se abre alrededor,
   igual que los escalones de la regla de Liquidaciones. */
.vac-regla i:hover {
  transform: scaleY(1.6);
  box-shadow: 0 0 13px color-mix(in srgb, var(--tono) var(--halo), transparent),
              0 5px 16px color-mix(in srgb, var(--tono) var(--halo), transparent);
}
/* Lo que todavía no se gana no se enciende: encenderlo haría creer que ya
   está ahí. Misma regla que en Liquidaciones. */
.vac-regla i:not(.gozada):not(.encurso):not(.pactada):not(.pagada):not(.queda):hover { transform: none; box-shadow: none; cursor: default; }


/* Pegado al canto izquierdo de su columna, que ya es la mitad derecha de
   la pantalla: metido más adentro se perdía contra el borde. */
.employee-estado-pie.cerrar,
.employee-estado-pie.abrir { justify-content: flex-start; }

/* ── Los cuatro colores, ya fosforescentes ────────────────────────────────
   Sobre fondo oscuro un rojo hondo se lee café y un azul medio se apaga.
   Los tonos de tema claro no sirven de noche: hay que subirlos. El turquesa
   pasa a ser el mismo --teal de toda la casa, que es el que él reconoce.
   "Le quedan" se queda translúcido a propósito: son días disponibles, no
   días gastados, y si se pintan llenos no hay cómo distinguirlos de los ya
   gozados —que fue justo lo que pasó al primer intento. */
[data-theme="dark"] .vac-regla i.gozada,
[data-theme="dark"] .vac-pie .pt.gozada,
[data-theme="dark"] .cal-leyenda .pt.gozada { --tono: var(--teal); }
[data-theme="dark"] .vac-regla i.encurso,
[data-theme="dark"] .vac-pie .pt.encurso,
[data-theme="dark"] .cal-leyenda .pt.encurso { --tono: #ff6b5e; }
[data-theme="dark"] .vac-regla i.pactada,
[data-theme="dark"] .vac-pie .pt.pactada,
[data-theme="dark"] .cal-leyenda .pt.pactada { --tono: #ffc85c; }
[data-theme="dark"] .vac-regla i.pagada,
[data-theme="dark"] .vac-pie .pt.pagada,
[data-theme="dark"] .cal-leyenda .pt.pagada { --tono: #5bb2ff; }

/* En claro los tonos hondos sí sirven, pero el rojo ladrillo y el azul
   pálido tampoco lucían. Se avivan sin perder el sitio. */
.vac-regla i.encurso, .vac-pie .pt.encurso, .cal-leyenda .pt.encurso { --tono: #e8402f; }
.vac-regla i.pagada, .vac-pie .pt.pagada, .cal-leyenda .pt.pagada { --tono: #2f8fe6; }

/* ── La tira de meses del período del aguinaldo ───────────────────────────
   Era la única barra del programa que se quedó de color plano, sin el
   degradado ni el halo que ya llevan la gráfica de abajo y las reglas de
   Vacaciones y Liquidaciones. Ahora habla el mismo idioma: color lleno de
   claro a hondo, halo del mismo color, y al pasar por encima se levanta.
   Se usa `translate` y no `transform` porque la barrita ya tiene un
   transform propio en su transición y se pisarían. */
.agui-mes.con i {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 82%, #fff), var(--acento));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acento) 30%, transparent);
  transition: translate .18s var(--ease), box-shadow .18s var(--ease);
}
.agui-mes.con:hover i {
  translate: 0 -3px;
  box-shadow: 0 0 13px color-mix(in srgb, var(--acento) 48%, transparent),
              0 6px 17px color-mix(in srgb, var(--acento) 45%, transparent);
}
/* Un mes sin registrar no se enciende: no hay nada que celebrar ahí. */
.agui-mes.sin:hover i { translate: none; box-shadow: none; }

[data-theme="dark"] .agui-mes.con i {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 62%, #fff), var(--acento));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acento) 34%, transparent);
}
[data-theme="dark"] .agui-mes.con:hover i {
  box-shadow: 0 0 13px color-mix(in srgb, var(--acento) 55%, transparent),
              0 6px 17px color-mix(in srgb, var(--acento) 52%, transparent);
}

/* ── La gráfica de Aguinaldos, al pasar por encima ────────────────────────
   La columna se levanta y el halo se abre, igual que la tira de arriba.
   Va con `translate` y no con `transform` por una razón fina: la columna
   trae una animación de entrada con fill-mode "both", así que su último
   fotograma se queda mandando sobre `transform` para siempre y le gana a
   cualquier transform del hover. `translate` es una propiedad aparte y se
   compone encima en vez de pelear. */
.agui-col-barra { transition: translate .18s var(--ease), box-shadow .18s var(--ease); }
.agui-col:hover .agui-col-barra {
  translate: 0 -4px;
  box-shadow: 0 0 15px color-mix(in srgb, var(--teal) 45%, transparent),
              0 7px 20px color-mix(in srgb, var(--teal) 45%, transparent);
}
/* Un mes sin registrar no se levanta: no hay nada que enseñar ahí. */
.agui-col.sin:hover .agui-col-barra { translate: none; box-shadow: none; }
[data-theme="dark"] .agui-col:hover .agui-col-barra {
  box-shadow: 0 0 15px rgba(95, 216, 208, .5), 0 7px 20px rgba(95, 216, 208, .55);
}

/* Un poquito de luz en las dos cosas turquesa del recuadro del período: la
   cifra grande de los días que quedan y el rotulito de arriba. Es apenas un
   halo detrás de la letra —no un color nuevo— para que el turquesa se vea
   encendido como el de las muescas, sin ponerse a gritar. */
.vac-saldo b { text-shadow: 0 0 16px color-mix(in srgb, var(--teal) 38%, transparent); }
.vac-eyebrow { text-shadow: 0 0 11px color-mix(in srgb, var(--teal) 30%, transparent); }
[data-theme="dark"] .vac-saldo b { text-shadow: 0 0 20px color-mix(in srgb, var(--teal) 52%, transparent); }
[data-theme="dark"] .vac-eyebrow { text-shadow: 0 0 13px color-mix(in srgb, var(--teal) 42%, transparent); }

/* Los dos cuadros del aguinaldo van angostos: son una cuenta y una
   pregunta, no una pantalla. A lo ancho de un cajón normal, las cuatro
   líneas del desglose quedaban estiradas de canto a canto y el rótulo se
   despegaba tanto de su cifra que había que seguir el renglón con el dedo. */
.drawer[data-cajon="aguinaldo-confirmar"],
.drawer[data-cajon="bonus-seguro"] { width: min(420px, 94vw); }
.agui-seguro .agui-confirmar-quien { margin-bottom: 16px; font-size: 14px; }
.agui-seguro .agui-confirmar-quien b { color: var(--ink); font-weight: 650; }
.agui-confirmar-icono.aviso { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
[data-theme="dark"] .agui-confirmar-icono.aviso { color: #ff9b91; background: rgba(224, 108, 95, .16); }

/* ── El aviso, con su botón de omitir ─────────────────────────────────────
   La fila dejó de ser un solo botón: ahora son dos. El grande lleva a la
   pestaña; la equis esconde el aviso. Van separados porque, si la equis
   fuera parte del botón grande, querer esconder un aviso lo mandaría a uno
   a otra pantalla. */
.avisos-lista .aviso-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.aviso-ir {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 6px 11px 12px;
  border: 0;
  border-radius: 11px 0 0 11px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aviso-omitir {
  display: grid;
  place-items: center;
  width: 34px;
  border: 0;
  border-radius: 0 11px 11px 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s ease, color .16s ease, background-color .16s ease;
}
.aviso-omitir svg { width: 14px; height: 14px; }
.aviso-fila:hover .aviso-omitir { opacity: 1; }
.aviso-omitir:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.aviso-omitir:focus-visible { opacity: 1; }

.avisos-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px 11px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
.avisos-pie button {
  border: 0;
  background: none;
  color: var(--teal);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .aviso-omitir:hover { background: rgba(224, 108, 95, .14); color: #ff9b91; }

/* ═══════════════════════════════════════════════════════════════════════════
   LISTAS CON TOPE — lo que crece con el uso se desliza por dentro
   ═══════════════════════════════════════════════════════════════════════════
   ajustarTopes() (app.js) mide las cajas marcadas con data-tope y, si pasan
   de su número de renglones, les pone el alto y la clase .con-tope. Aquí va
   cómo se ven: deslizador fino, el gesto no se le escapa a la página, y en
   las tablas el encabezado se queda arriba y los totales abajo.

   Las rayas de una tabla con border-collapse no viajan con la celda pegada
   —se quedan en su sitio y se van con el scroll—, así que la del encabezado
   y la de los totales se dibujan con sombra por dentro. */
[data-tope] { position: relative; }
.con-tope {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}
.con-tope > table > thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fondo-tope, var(--card));
  box-shadow: inset 0 -1px 0 var(--line);
}
.con-tope > table > tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
}
/* Los totales de Reportes llevan un tinte translúcido y encima de los
   renglones se transparentaban: el tinte va ahora sobre el fondo de la
   tarjeta, que es el mismo color que se veía antes. */
.rep-tabla.con-tope tfoot td {
  border-top-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--rep-luz) 6%, transparent), color-mix(in srgb, var(--rep-luz) 6%, transparent)),
    var(--fondo-tope, var(--card));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--rep-luz) 35%, transparent);
}
[data-theme="dark"] .rep-tabla.con-tope tfoot td {
  background:
    linear-gradient(color-mix(in srgb, var(--rep-luz) 12%, transparent), color-mix(in srgb, var(--rep-luz) 12%, transparent)),
    var(--fondo-tope, var(--card));
}

/* Las hojas del expediente se levantan y echan sombra al pasarles encima o
   soltarles un archivo. Dentro de una caja que se desliza eso se cortaría en
   el borde, así que la caja lleva aire por dentro y lo devuelve con margen
   negativo: con tope o sin él, las hojas quedan en el mismo sitio. */
.exp-hojas[data-tope] { padding: 8px 14px 26px; margin: -8px -14px -26px; }

/* En papel no hay deslizador: sale la lista entera. */
@media print {
  .con-tope { max-height: none !important; overflow: visible !important; }
  .con-tope > table > thead th,
  .con-tope > table > tfoot td { position: static; box-shadow: none; }
}