.hero-icon svg{
  width: 40px;
  height: 40px;
  stroke-width: 2.25;
}

.page-heading .button svg,
.employee-toolbar .search svg,
.employee-toolbar .select-button svg{
  width: 19px;
  height: 19px;
  stroke-width: 2.15;
}

.employee-toolbar{
  flex-wrap: nowrap;
}

.employee-toolbar .segmented{
  flex: 0 0 auto;
}

.employee-toolbar .segmented button{
  min-width: 108px;
  white-space: nowrap;
}

.hero-scene{
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  margin: 0;
  color: #8bb7b2;
  opacity: 0.95;
}

.hero.collaborators::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.collaborators::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.collaborators{
  isolation: isolate;
}

.hero.collaborators .hero-icon,
.hero.collaborators h2,
.hero.collaborators p{
  z-index: 2;
}

.hero.collaborators .hero-scene{
  z-index: 0;
  right: -1px;
  width: min(58%, 720px);
  background-image: url("assets-hero-office.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

.hero.collaborators .hero-scene > i{
  display: none;
}

.hero-window{
  position: absolute;
  inset: 0 0 0 0;
  background: repeating-linear-gradient(90deg, rgba(221, 231, 232, 0.6) 0 3px, transparent 3px 94px);
}

.hero-desk{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 13px;
  background: #d6a77e;
  box-shadow: 0 8px 0 rgba(189, 137, 99, 0.42);
}

.hero-laptop{
  position: absolute;
  right: 31%;
  bottom: 13px;
  width: 90px;
  height: 61px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(120deg, #d8d7d4, #aeb0b0);
  transform: skewX(-8deg);
  box-shadow: 5px 8px 12px rgba(49, 55, 62, 0.15);
}

.hero-laptop::after{
  content: "";
  position: absolute;
  right: -13px;
  bottom: -6px;
  width: 117px;
  height: 8px;
  border-radius: 0 0 7px 7px;
  background: #a6aaab;
}

.hero-plant{
  position: absolute;
  right: 9%;
  bottom: 13px;
  width: 42px;
  height: 48px;
  border-radius: 4px 4px 13px 13px;
  background: #fafafa;
  box-shadow: inset 0 -7px 0 #e5e5e5;
}

.hero-plant::before{
  content: "";
  position: absolute;
  top: -40px;
  left: -10px;
  width: 60px;
  height: 58px;
  border-radius: 55% 45% 50% 50%;
  background: radial-gradient(ellipse at 24% 75%, #5d9f45 0 12%, transparent 13%), radial-gradient(ellipse at 75% 72%, #78b157 0 13%, transparent 14%), radial-gradient(ellipse at 50% 25%, #6ba84b 0 21%, transparent 22%);
}

[data-theme="dark"] .freq-semanal{ color: #4ade80; background: rgba(10, 158, 92, .17); }
[data-theme="dark"] .freq-quincenal{ color: #7ab8f5; background: rgba(8, 126, 233, .17); }
[data-theme="dark"] .freq-mensual{ color: #b79bf5; background: rgba(119, 66, 236, .19); }

[data-theme="dark"] .vacation-chip{
  color: #5fd8d0;
  background: rgba(0, 190, 180, .13);
  border-color: rgba(0, 190, 180, .28);
}

.freq-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.freq-tag svg{
  width: 13px;
  height: 13px;
}

.freq-semanal{ color: #0a9e5c; background: #e6f8ef; }
.freq-quincenal{ color: #0987ed; background: #e5f3ff; }
.freq-mensual{ color: #7742ec; background: #f1e9ff; }

.vacation-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #0a8f7f;
  background: #e6f8f5;
  border: 1px solid #d3f0ea;
  white-space: nowrap;
}

.vacation-chip svg{
  width: 14px;
  height: 14px;
}

.vacation-chip b{
  font-size: 14px;
  font-weight: 800;
}

.segmented .dot{
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

.segmented .dot-active{ background: #1fae67; }
.segmented .dot-inactive{ background: #e5484d; }

@media (max-width: 480px) {
  .hero-scene{ display: none; }
  .employee-toolbar{ flex-wrap: wrap; }
  .employee-toolbar .segmented{ width: 100%; overflow-x: auto; }
}

/* ---------- Pestaña Tiempo laborado ---------- */
.time-toolbar{ flex-wrap: wrap; gap: 14px; }

.time-summary{ margin: 18px 0; }

.time-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  margin-bottom: 18px;
}

/* Mensual trae un solo período: a lo ancho de la pantalla los campos quedarían
   larguísimos,
así que la tarjeta se limita. */
.time-grid[data-periods="1"]{ grid-template-columns: minmax(0, 760px); }

/* Un mes con cinco sábados trae cinco semanas, y en dos columnas la última
   quedaría sola y a medio ancho. Se pone a lo ancho para que la fila cierre
   pareja. Lo mismo con tres. */
.time-grid[data-periods="3"] .time-card:last-child,
.time-grid[data-periods="5"] .time-card:last-child { grid-column: 1 / -1; }

@media (max-width: 1240px) {
  .time-grid,
.time-grid[data-periods="1"]{ grid-template-columns: minmax(0, 1fr); }
}

.time-card{
  display: grid;
  gap: 14px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.time-card.saved{ border-color: #c9ecea; }

.time-card > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.time-card h3{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 16px;
}

.time-card h3 svg{ width: 19px; height: 19px; color: var(--teal); }

.time-rate{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 11px 13px;
  border-radius: 8px;
  background: #f4f8fb;
  color: #5f6d88;
  font-size: 12px;
}

.time-rate b{ color: var(--ink); font-size: 13px; }

.time-inputs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.time-inputs label{
  display: grid;
  gap: 6px;
  color: #55627e;
  font-size: 12px;
}

.time-inputs .time-span-2{ grid-column: 1 / -1; }

.time-inputs input{
  padding: 10px;
  border: 1px solid #dce2ec;
  border-radius: 7px;
  outline-color: var(--teal);
  color: var(--ink);
  background: #fff;
}

.time-detail{
  display: grid;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px dashed #dfe5ee;
}

.time-detail p{
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 2px;
  color: #5f6d88;
  font-size: 12px;
}

.time-detail p b{ color: var(--ink); font-size: 13px; }

.time-detail strong{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 12px;
}

.time-gross{ color: #087e7d; background: #eaf8f7; }
.time-net{ color: #07864e; background: #eaf9f4; font-size: 13px; }
.time-net b{ font-size: 19px; }

.time-actions{ display: flex; justify-content: flex-end; }

.time-history{ padding: 20px; }
.time-history h2{ margin: 0 0 16px; font-size: 17px; }
.time-history table{ min-width: 0; }

[data-theme="dark"] .time-rate{ background: #121824; color: #9aa6bd; }
[data-theme="dark"] .time-inputs input{ background: #121824; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .time-inputs label{ color: #9aa6bd; }
[data-theme="dark"] .time-detail{ border-top-color: var(--line); }
[data-theme="dark"] .time-detail p{ color: #9aa6bd; }
[data-theme="dark"] .time-gross{ color: #5fd8d0; background: rgba(0, 190, 180, .13); }
[data-theme="dark"] .time-net{ color: #4ade80; background: rgba(10, 158, 92, .17); }
[data-theme="dark"] .time-card.saved{ border-color: rgba(0, 190, 180, .35); }

/* Deducciones con concepto,
para saber por qué se descuenta cada monto */
.deductions-block{
  display: grid;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.deductions-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.deductions-head b{ color: #55627e; font-size: 12px; }

.deduction-add{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--teal);
  border-radius: 20px;
  color: var(--teal);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: background .18s ease, color .18s ease;
}

.deduction-add svg{ width: 14px; height: 14px; }
.deduction-add:hover{ background: var(--teal); color: #fff; }

.deduction-list{ display: grid; gap: 8px; }

.deduction-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 34px;
  gap: 8px;
}

.deduction-row input{
  padding: 9px 10px;
  border: 1px solid #dce2ec;
  border-radius: 7px;
  outline-color: var(--teal);
  color: var(--ink);
  background: #fff;
  font-size: 13px;
}

.deduction-remove{
  display: grid;
  place-items: center;
  border: 1px solid #e6eaf1;
  border-radius: 7px;
  color: #8b96ad;
  background: #fff;
  transition: color .18s ease, border-color .18s ease;
}

.deduction-remove svg{ width: 15px; height: 15px; }
.deduction-remove:hover{ color: #f2333e; border-color: #ffc8cd; }

/* Selectores de colaborador / mes / año: en oscuro se veían blancos */
[data-theme="dark"] .liquidation-picker select{
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .liquidation-picker{ color: #9aa6bd; }

[data-theme="dark"] .deductions-block{ border-color: var(--line); }
[data-theme="dark"] .deductions-head b{ color: #9aa6bd; }
[data-theme="dark"] .deduction-row input{ background: #121824; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .deduction-remove{ background: #121824; border-color: var(--line); color: #9aa6bd; }
[data-theme="dark"] .deduction-remove:hover{ color: #ff8b8b; border-color: rgba(242,51,62,.4); }

/* Campos de dinero: llevan el símbolo de colones fijo dentro de la casilla.
   Solo aplica a montos (ingresos,
CCSS,
deducciones),
no a horas ni días. */
.money-field{ position: relative; display: block; }

.money-field > i{
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  color: #8b96ad;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  pointer-events: none;
}

.money-field input{ width: 100%; padding-left: 26px; }

[data-theme="dark"] .money-field > i{ color: #7e8aa3; }

/* ---------- Configuración rediseñada ---------- */
.cfg-card{
  display: grid;
  gap: 16px;
  padding: 22px;
  margin: 0 0 18px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: box-shadow .22s ease, border-color .22s ease;
}

.cfg-card:hover{ box-shadow: 0 14px 30px rgba(16, 28, 66, .1); }

.cfg-card > header{
  display: flex;
  align-items: center;
  gap: 14px;
}

.cfg-card h2{ margin: 0; font-size: 16px; }
.cfg-card header p{ margin: 3px 0 0; color: #6b7892; font-size: 12.5px; line-height: 1.45; }

.cfg-icon{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
}

.cfg-icon svg{ width: 22px; height: 22px; }
.cfg-icon.teal{ color: #00a39e; background: #e2f7f4; }
.cfg-icon.purple{ color: #8242e9; background: #f0e8ff; }
.cfg-icon.blue{ color: #278cf4; background: #e5f1ff; }
.cfg-icon.orange{ color: #f0a000; background: #fff1d9; }
.cfg-icon.red{ color: #ff4350; background: #ffe7e8; }


.cfg-body label{
  display: grid;
  gap: 6px;
  color: #55627e;
  font-size: 12px;
}

.cfg-body input,
.cfg-body textarea{
  padding: 10px 12px;
  border: 1px solid #dce2ec;
  border-radius: 8px;
  outline-color: var(--teal);
  color: var(--ink);
  background: #fff;
  font-size: 13px;
}

.cfg-body textarea{ resize: vertical; }
.cfg-body input:disabled{ color: #7c879e; background: #f5f7fa; }
.cfg-body .button{ justify-self: end; align-self: flex-end; }

/* Empresa: logo a la par de los campos */
.cfg-empresa .company-form{
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px 18px;
  align-items: start;
}

.cfg-empresa .company-logo{
  grid-row: span 6;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.cfg-empresa .company-logo img{
  width: 104px;
  height: auto;
  margin: 0;
}

.cfg-empresa .company-logo .button{ width: 100%; justify-self: stretch; font-size: 12px; padding: 0 10px; }
.cfg-empresa .company-form > label{ grid-column: 2; }
.cfg-empresa .company-form > .button{ grid-column: 2; }

.cfg-params > label:first-child{ grid-column: 1 / -1; }
.cfg-params > .button{ grid-column: 1 / -1; }

.cfg-note{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.45;
}

.cfg-note svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.cfg-note.info{ color: #1471d7; background: #eef7ff; }
.cfg-note.warning{ color: #9a6213; background: #fff8ea; }

.cfg-last{ margin: 0; color: #5f6d88; font-size: 12.5px; }
.cfg-last b{ color: var(--ink); }

.cfg-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-actions .button{ flex: 1; justify-self: stretch; }

.cfg-danger{ border-color: #f8d2d5; }
.cfg-danger .button{ justify-self: stretch; }

/* Configuración en tema oscuro */
[data-theme="dark"] .cfg-card{ background: var(--card); border-color: var(--line); }
[data-theme="dark"] .cfg-card:hover{ box-shadow: 0 14px 30px rgba(0, 0, 0, .32); }
[data-theme="dark"] .cfg-card header p{ color: #9aa6bd; }
[data-theme="dark"] .cfg-body label{ color: #9aa6bd; }
[data-theme="dark"] .cfg-body input,
[data-theme="dark"] .cfg-body textarea{ background: #121824; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .cfg-body input:disabled{ color: #7e8aa3; background: #10161f; }
[data-theme="dark"] .cfg-last{ color: #9aa6bd; }
[data-theme="dark"] .cfg-note.info{ color: #7ab8f5; background: rgba(8, 126, 233, .14); }
[data-theme="dark"] .cfg-note.warning{ color: #e0b45c; background: rgba(169, 114, 10, .18); }
[data-theme="dark"] .cfg-icon.teal{ color: #5fd8d0; background: rgba(0, 190, 180, .15); }
[data-theme="dark"] .cfg-icon.purple{ color: #b79bf5; background: rgba(119, 66, 236, .18); }
[data-theme="dark"] .cfg-icon.blue{ color: #7ab8f5; background: rgba(8, 126, 233, .16); }
[data-theme="dark"] .cfg-icon.orange{ color: #e0b45c; background: rgba(169, 114, 10, .2); }
[data-theme="dark"] .cfg-icon.red{ color: #ff8b8b; background: rgba(242, 51, 62, .16); }
[data-theme="dark"] .cfg-danger{ border-color: rgba(242, 51, 62, .3); }

/* Los estilos viejos de .company-form (etiquetas en dos columnas,
campos sin
   borde) chocaban con la tarjeta nueva y encimaban el texto. Se reescriben. */
.cfg-empresa .company-form > label{
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  border-bottom: 0;
  color: #55627e;
  font-size: 12px;
}

.cfg-empresa .company-form input{
  padding: 10px 12px;
  border: 1px solid #dce2ec;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  background: #fff;
  color: var(--ink);
}

.cfg-empresa .company-logo{
  grid-row: span 6;
  display: grid;
  align-content: start;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.cfg-empresa .company-logo img{ width: 96px; margin: 0 auto 2px; }

.cfg-empresa .company-logo .button{
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  font-size: 11.5px;
}

.cfg-empresa .logo-help{
  color: #7c879e;
  font-size: 10.5px;
  line-height: 1.35;
}

.cfg-empresa .company-form > .button{
  grid-column: 2;
  justify-self: end;
  margin-top: 4px;
}

[data-theme="dark"] .cfg-empresa .company-form > label{ color: #9aa6bd; }
[data-theme="dark"] .cfg-empresa .company-form input{ background: #121824; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .cfg-empresa .logo-help{ color: #7e8aa3; }

/* .company-form .button (app.css) mandaba TODO botón a "grid-column:2",
incluidos
   los del logo,
que viven en su propia rejilla de una sola columna: eso creaba una
   columna fantasma y los sacaba encima de los campos de la derecha. */
.cfg-empresa .company-logo .button{
  grid-column: 1;
  justify-self: stretch;
  width: 100%;
  margin-top: 0;
  white-space: normal;
  line-height: 1.25;
}

.cfg-empresa .company-logo .button span{ white-space: normal; }
.cfg-empresa .company-logo .button b svg{ width: 15px; height: 15px; }
.cfg-empresa .logo-help{ grid-column: 1; justify-self: stretch; }

/* Vista previa del pago: muestra el desglose tomado de Tiempo laborado */
.pay-preview{
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.pay-preview > header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 9px;
  border-bottom: 1px dashed #dfe5ee;
  color: #5f6d88;
  font-size: 12px;
  font-weight: 700;
}

.pay-preview > header svg{ width: 15px; height: 15px; color: var(--teal); }

.pay-preview p{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 7px 2px;
  color: #5f6d88;
  font-size: 12px;
}

.pay-preview p b{ color: var(--ink); font-size: 13px; }

.pay-preview strong{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 12px;
}

.pay-gross{ color: #087e7d; background: #eaf8f7; }
.pay-net{ color: #07864e; background: #eaf9f4; font-size: 13px; }
.pay-net b{ font-size: 19px; }

[data-theme="dark"] .pay-preview{ background: #121824; border-color: var(--line); }
[data-theme="dark"] .pay-preview > header{ color: #9aa6bd; border-bottom-color: var(--line); }
[data-theme="dark"] .pay-preview p{ color: #9aa6bd; }
[data-theme="dark"] .pay-gross{ color: #5fd8d0; background: rgba(0, 190, 180, .13); }
[data-theme="dark"] .pay-net{ color: #4ade80; background: rgba(10, 158, 92, .17); }

/* ---------- Desglose de liquidación ---------- */
.liq-detail{ display: grid; gap: 16px; }

.liq-base{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.liq-base > div{
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.liq-base small{ color: #6b7892; font-size: 11.5px; }
.liq-base b{ font-size: 15px; }

.liq-rows{ display: grid; gap: 10px; }

.liq-rows article{
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfdfe;
}

.liq-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
}

.liq-head b{ font-size: 14px; }
.liq-head span{ color: #6b7892; font-size: 12px; white-space: nowrap; }
.liq-head strong{ font-size: 15px; white-space: nowrap; }

.liq-rows small{
  color: #7c879e;
  font-size: 11.5px;
  line-height: 1.4;
}

.liq-negative{ border-color: #f8d2d5; background: #fffafa; }

.liq-total{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 17px;
  border-radius: 10px;
  color: #07864e;
  background: #eaf9f4;
  font-size: 13px;
}

.liq-total b{ font-size: 23px; }

[data-theme="dark"] .liq-base > div{ border-color: var(--line); background: #121824; }
[data-theme="dark"] .liq-base small{ color: #9aa6bd; }
[data-theme="dark"] .liq-rows article{ border-color: var(--line); background: #121824; }
[data-theme="dark"] .liq-head span{ color: #9aa6bd; }
[data-theme="dark"] .liq-rows small{ color: #7e8aa3; }
[data-theme="dark"] .liq-negative{ border-color: rgba(242,51,62,.3); background: rgba(242,51,62,.08); }
[data-theme="dark"] .liq-total{ color: #4ade80; background: rgba(10, 158, 92, .17); }

/* ---------- Encabezado de cada pestaña,
más sobrio ----------
   El círculo grande con el ícono adentro pesaba demasiado y le robaba
   protagonismo al contenido. Se cambia por un cuadrito redondeado más pequeño,
igual al de Configuración,
y la banda baja de altura.                     */
.hero{
  height: auto;
  min-height: 104px;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 14px;
}

.hero-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 24px;
}

.hero-icon svg{ width: 24px; height: 24px; stroke-width: 2.1; }

.hero h2{
  margin: 0 0 5px;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.hero p{
  max-width: 520px;
  color: #6b7892;
  font-size: 13px;
  line-height: 1.5;
}

/* La foto del fondo se funde antes,
para que no compita con el texto. */
.hero.collaborators .hero-scene,
.hero:has(.hero-photo-office) .hero-scene,
.hero:has(.hero-photo-liquidations) .hero-scene,
.hero:has(.hero-photo-bonuses) .hero-scene{
  width: min(46%, 560px);
  opacity: .75;
}

[data-theme="dark"] .hero p{ color: #9aa6bd; }

[data-theme="dark"] .hero-icon{ color: #5fd8d0; background: rgba(0, 190, 180, .16); }
[data-theme="dark"] .hero.purple .hero-icon{ color: #b79bf5; background: rgba(130, 66, 233, .20); }
[data-theme="dark"] .hero.red .hero-icon{ color: #ff8b8b; background: rgba(255, 67, 80, .18); }
[data-theme="dark"] .hero.orange .hero-icon{ color: #e6b45f; background: rgba(214, 150, 20, .20); }

/* ---------- Fundido de la foto del encabezado ----------
   Antes la foto arrancaba de golpe en un punto exacto y encima el degradado
   pasaba de opaco a transparente en muy poco espacio: se veía un corte duro.
   Ahora la propia imagen se desvanece por la izquierda y el degradado usa
   pasos suaves,
así la foto "aparece" en vez de "empezar".                  */
.hero-scene.hero-photo-office,
.hero-scene.hero-photo-liquidations,
.hero-scene.hero-photo-bonuses,
.hero.collaborators .hero-scene{
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 16%, rgba(0, 0, 0, .62) 38%, #000 68%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 16%, rgba(0, 0, 0, .62) 38%, #000 68%);
}

/* Degradado con más pasos: imita una curva suave en vez de una rampa recta. */
.hero.collaborators::after,
.hero:has(.hero-photo-office)::after,
.hero:has(.hero-photo-liquidations)::after,
.hero:has(.hero-photo-bonuses)::after{
  background: linear-gradient(90deg,
    #fff 0%,
    rgba(255, 255, 255, .99) 30%,
    rgba(255, 255, 255, .92) 46%,
    rgba(255, 255, 255, .74) 58%,
    rgba(255, 255, 255, .45) 70%,
    rgba(255, 255, 255, .18) 82%,
    rgba(255, 255, 255, .04) 92%,
    rgba(255, 255, 255, 0) 100%);
}

[data-theme="dark"] .hero.collaborators::after,
[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, .99) 30%,
    rgba(27, 36, 51, .92) 46%,
    rgba(27, 36, 51, .74) 58%,
    rgba(27, 36, 51, .45) 70%,
    rgba(27, 36, 51, .18) 82%,
    rgba(27, 36, 51, .04) 92%,
    rgba(27, 36, 51, 0) 100%);
}

/* ---------- Movimiento discreto ----------
   La foto respira muy lento (24 s por recorrido): se percibe vivo sin distraer.
   El encabezado entra suave al cambiar de pestaña,
igual que el dashboard.   */
@keyframes heroDrift{
  from { transform: scale(1.02); }
  to{ transform: scale(1.09); }
}

@keyframes heroIn{
  from { opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero-scene.hero-photo-office,
.hero-scene.hero-photo-liquidations,
.hero-scene.hero-photo-bonuses,
.hero.collaborators .hero-scene{
  animation: heroDrift 24s ease-in-out infinite alternate;
}

.hero{ animation: heroIn .45s cubic-bezier(.16, 1, .3, 1) both; }

.hero-icon{ transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.hero:hover .hero-icon{ transform: scale(1.06) rotate(-3deg); }

@media (prefers-reduced-motion: reduce) {
  .hero,
.hero-scene{ animation: none; }
}

/* ---------- Banda del encabezado: menos texto,
menos alto ----------
   Antes repetía lo que ya dice el título de la página y sumaba una segunda
   línea de relleno. Ahora es una sola frase útil y la banda adelgaza.       */
.hero{ min-height: 76px; padding: 16px 20px; gap: 16px; }

.hero h2{
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #4a5872;
  letter-spacing: 0;
  line-height: 1.45;
}

/* La segunda línea queda vacía en todas las pestañas: se oculta. */
.hero p:empty{ display: none; }

.hero-icon{ width: 42px; height: 42px; border-radius: 13px; }
.hero-icon svg{ width: 20px; height: 20px; }

[data-theme="dark"] .hero h2{ color: #a8b4cb; }

/* ---------- Animación propia del encabezado ----------
   El dashboard usa aparición desde abajo y rebote al pasar el mouse.
   Aquí se usa un revelado lateral,
para que no se sienta lo mismo.          */
@keyframes heroIconIn{
  from { opacity: 0; transform: translateX(-12px) scale(.86); }
  to{ opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes heroTextIn{
  from { opacity: 0; transform: translateX(-16px); }
  to{ opacity: 1; transform: translateX(0); }
}

.hero{ animation: none; }
.hero-icon{ animation: heroIconIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.hero > div:not(.hero-scene){ animation: heroTextIn .55s cubic-bezier(.16, 1, .3, 1) .07s both; }

/* Sin rebote al pasar el mouse: ese gesto es del dashboard. */
.hero:hover .hero-icon{ transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-icon,
.hero > div:not(.hero-scene),
.hero-scene{ animation: none; }
}

/* Corrección: al animar el bloque de texto se creó una capa propia que lo dejó
   por debajo del degradado de la foto,
y la regla también pisaba la animación
   del ícono. Se separa el ícono y se sube el texto por encima del degradado. */
.hero > div:not(.hero-scene):not(.hero-icon){
  position: relative;
  z-index: 2;
  animation: heroTextIn .55s cubic-bezier(.16, 1, .3, 1) .07s both;
}

.hero > .hero-icon{
  position: relative;
  z-index: 2;
  animation: heroIconIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

/* ---------- Firma del encabezado: luz que sigue el cursor ----------
   No se repite ningún gesto ya usado (el dashboard sube y rebota,
el menú
   crece una barrita,
los cuadros salen desde el clic). Aquí una luz suave
   viaja con el puntero y el velo de la foto se retira un poco,
así que al
   pasar por la banda se descubre más de la imagen.                          */
.hero{
  --mx: 50%;
  --my: 50%;
  transition: border-color .35s ease, box-shadow .35s ease;
}

.hero::before{
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx) var(--my),
    rgba(0, 190, 180, .16) 0%,
    rgba(0, 190, 180, .07) 38%,
    transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.hero:hover::before{ opacity: 1; }

.hero:hover{
  border-color: rgba(0, 190, 180, .32);
  box-shadow: 0 12px 30px rgba(16, 28, 66, .10);
}

/* El velo se retira al pasar el mouse: se alcanza a ver más de la foto. */
.hero::after{ transition: opacity .45s ease; }
.hero:hover::after{ opacity: .82; }

/* El texto va por encima de la luz. */
.hero > div:not(.hero-scene):not(.hero-icon),
.hero > .hero-icon{ z-index: 3; }

[data-theme="dark"] .hero::before{
  background: radial-gradient(240px circle at var(--mx) var(--my),
    rgba(95, 216, 208, .20) 0%,
    rgba(95, 216, 208, .08) 40%,
    transparent 72%);
}

[data-theme="dark"] .hero:hover{
  border-color: rgba(95, 216, 208, .35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
  .hero::before{ display: none; }
}

/* ---------- Filas que responden en toda su área ----------
   Antes solo el nombre reaccionaba: el resto de la fila (cédula,
puesto,
modalidad,
fecha,
vacaciones,
estado) no hacía nada al tocarlo.
   Ahora toda la fila selecciona y se ilumina al pasar el puntero.           */
tr.row-pick{ cursor: pointer; }

tr.row-pick td{ transition: background-color .18s ease, border-color .18s ease; }

tr.row-pick:hover td{ background: #f2fbfa; }
tr.row-pick:hover td:first-child{ border-left-color: var(--teal); }

/* La fila ya seleccionada mantiene su color aunque se pase por encima. */
tr.row-pick.selected-row:hover td{ background: #eaf7f5; }

/* El botón de los tres puntos no debe verse arrastrado por el resalte. */
tr.row-pick .more{ position: relative; z-index: 1; }

[data-theme="dark"] tr.row-pick:hover td{ background: #1b2b3f; }
[data-theme="dark"] tr.row-pick.selected-row:hover td{ background: #1c3f39; }

/* Expedientes: la tarjeta del colaborador también se ilumina. */
.file-person{ cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.file-person:hover{ background: #f2fbfa; border-color: #c9ecea; transform: translateX(2px); }
.file-person.selected:hover{ background: #eaf7f5; }

[data-theme="dark"] .file-person:hover{ background: #1b2b3f; border-color: #3a4a63; }
[data-theme="dark"] .file-person.selected:hover{ background: #1c3f39; }

/* ---------- Sin parpadeo al seleccionar ----------
   La animación de entrada solo corre cuando se cambia de pestaña. Al hacer
   clic en un colaborador la pantalla se redibuja,
y antes eso repetía la
   animación cada vez: se veía como un parpadeo del encabezado.              */
.hero-icon,
.hero > div:not(.hero-scene):not(.hero-icon),
.welcome-module{ animation: none; }

.hero.is-entering > .hero-icon{ animation: heroIconIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.hero.is-entering > div:not(.hero-scene):not(.hero-icon){ animation: heroTextIn .55s cubic-bezier(.16, 1, .3, 1) .07s both; }
.welcome-module.is-entering{ animation: moduleIn .5s cubic-bezier(.16, 1, .3, 1) both; }

/* Colaboradores: seleccionar aquí no muestra ningún detalle{ background: #fff; border-color: #edf0f4; }

/* El selector de colaborador es la decisión principal de la pantalla:
   se destaca sobre el mes y el año,
que son secundarios. */
.time-toolbar .liquidation-picker:first-child select{
  min-width: 220px;
  font-weight: 700;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 159, 155, .12);
}

[data-theme="dark"] .time-toolbar .liquidation-picker:first-child select{
  border-color: rgba(95, 216, 208, .5);
  box-shadow: 0 0 0 3px rgba(95, 216, 208, .12);
}

/* El reset anterior no alcanzaba: una regla más específica de arriba
   (.hero > div:not(.hero-scene)) seguía animando también el ícono. */
.hero > .hero-icon,
.hero > div:not(.hero-scene){ animation: none; }

.hero.is-entering > .hero-icon{ animation: heroIconIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.hero.is-entering > div:not(.hero-scene):not(.hero-icon){ animation: heroTextIn .55s cubic-bezier(.16, 1, .3, 1) .07s both; }

/* ---------- Íconos reales en recuadros y métricas ----------
   Varios íconos eran caracteres sueltos de texto (▣ ◴ ♧ ▧ ↓ !). No tienen
   color ni grosor propio,
por eso se veían toscos y desentonaban en oscuro.
   Ahora son íconos de la misma familia que el menú lateral.                 */
.stat-icon svg{ width: 24px; height: 24px; stroke-width: 2.1; }
.metric > span svg{ width: 21px; height: 21px; stroke-width: 2.1; }
.metrics-strip span svg{ width: 21px; height: 21px; stroke-width: 2.1; }
.agui-overview > article > span svg{ width: 24px; height: 24px; stroke-width: 2.1; }

/* Los cuadros de las métricas usan la forma redondeada del resto del sistema. */
.metric > span{ border-radius: 13px; }

/* ---------- Resumen de Aguinaldos,
en un solo bloque parejo ----------
   Antes eran dos piezas de distinto alto pegadas: el período a la izquierda y
   las métricas a la derecha,
con bordes y rellenos que no coincidían.        */
.agui-overview{
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.agui-overview > article,
.agui-overview .metrics-strip{
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.agui-overview > article{
  gap: 14px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  align-items: center;
}

.agui-overview > article > span{
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #d69614;
  background: rgba(214, 150, 20, .14);
  font-size: 0;
}

.agui-overview > article > div{ flex: 1; min-width: 0; }
.agui-overview > article small{ display: block; color: #6b7892; font-size: 11.5px; }
.agui-overview > article b{ display: block; margin: 3px 0 2px; font-size: 15px; line-height: 1.3; }
.agui-overview > article p{ margin: 0; color: #8b96ad; font-size: 11px; line-height: 1.35; }
.agui-overview .liquidation-picker{ flex: 0 0 auto; }
.agui-overview .liquidation-picker select{ min-width: 92px; }

.agui-overview .metrics-strip{ padding: 0; }

.agui-overview .metrics-strip span{
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  font-size: 0;
}

.agui-overview .metrics-strip span:last-child{ border-right: 0; }
.agui-overview .metrics-strip span svg{ color: var(--teal); }
.agui-overview .metrics-strip b{ color: #6b7892; font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.agui-overview .metrics-strip strong{ display: block; margin-top: 3px; color: var(--ink); font-size: 16px; }

[data-theme="dark"] .agui-overview{ border-color: var(--line); background: var(--card); }
[data-theme="dark"] .agui-overview > article{ border-right-color: var(--line); }
[data-theme="dark"] .agui-overview > article > span{ color: #e6b45f; background: rgba(214, 150, 20, .20); }
[data-theme="dark"] .agui-overview > article small,
[data-theme="dark"] .agui-overview .metrics-strip b{ color: #9aa6bd; }
[data-theme="dark"] .agui-overview > article p{ color: #7e8aa3; }
[data-theme="dark"] .agui-overview .metrics-strip span{ border-right-color: var(--line); }
[data-theme="dark"] .agui-overview .metrics-strip span svg{ color: #5fd8d0; }

/* Título de la lista de colaboradores en Expedientes,
con ícono real */
.employee-list h2{ display: flex; align-items: center; gap: 9px; }
.employee-list h2 svg{ width: 18px; height: 18px; color: var(--teal); }

/* ============================================================
   ACOMODO GENERAL DE PESTAÑAS
   Problema de fondo: cajas dentro de cajas. El bloque tenía borde y sombra,
y cada recuadro interno repetía borde y sombra. Eso multiplicaba líneas y
   se leía como parches pegados sobre el fondo.
   Criterio: una sola tarjeta por bloque,
y adentro se divide con líneas finas
   en lugar de más bordes. Menos líneas,
misma información.
   ============================================================ */

/* ---- Bloque "colaborador + sus números" (Vacaciones,
Ausencias) ---- */
.selected-summary{
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
}

.selected-person{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 290px;
  padding: 18px 22px;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--line);
}

.selected-person > small{
  margin-bottom: 10px;
  color: #8b96ad;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.selected-person h2{ font-size: 19px; }
.selected-person p{ margin: 4px 0 0; color: #6b7892; font-size: 12.5px; }
.selected-person small:not(:first-child){ display: none; }

.metric-group{ gap: 0; }

/* Las métricas ya no son cajas: son columnas separadas por una línea fina. */
.metric{
  grid-template-columns: 40px 1fr;
  gap: 4px 12px;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

.metric:last-child{ border-right: 0; }
.metric > span{ width: 38px; height: 38px; border-radius: 12px; }
.metric > span svg{ width: 19px; height: 19px; }
.metric small{ color: #6b7892; font-size: 11.5px; }
.metric strong{ font-size: 19px; }

[data-theme="dark"] .selected-person{ border-right-color: var(--line); }
[data-theme="dark"] .selected-person > small{ color: #7e8aa3; }
[data-theme="dark"] .selected-person p{ color: #9aa6bd; }
[data-theme="dark"] .metric{ border-right-color: var(--line); }
[data-theme="dark"] .metric small{ color: #9aa6bd; }

/* ---- Barra "colaborador seleccionado" (Tiempo laborado,
Pagos,
Liquidaciones) ---- */
.selected-person-bar{
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
}

.selected-person-bar > small{
  align-self: center;
  color: #8b96ad;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.selected-person-bar .avatar{ width: 42px; height: 42px; font-size: 15px; }
.selected-person-bar span b{ font-size: 15px; }
.selected-person-bar span small{ color: #6b7892; font-size: 12px; }

/* El texto explicativo del final se separa del resto y no se pega al borde. */
.selected-person-bar p{
  margin: 0 0 0 auto;
  padding-left: 18px;
  border-left: 1px solid var(--line);
  color: #6b7892;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: right;
  max-width: 300px;
}

[data-theme="dark"] .selected-person-bar > small{ color: #7e8aa3; }
[data-theme="dark"] .selected-person-bar span small,
[data-theme="dark"] .selected-person-bar p{ color: #9aa6bd; }
[data-theme="dark"] .selected-person-bar p{ border-left-color: var(--line); }

/* ---- Franja de totales (Tiempo laborado) ---- */
.metrics-strip{ border-radius: 12px; padding: 0; }

.metrics-strip span{
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 15px 18px;
  border-right: 1px solid var(--line);
  font-size: 0;
}

.metrics-strip span:last-child{ border-right: 0; }
.metrics-strip span svg{ color: var(--teal); }
.metrics-strip b{ color: #6b7892; font-size: 11.5px; line-height: 1.3; }
.metrics-strip strong{ display: block; margin-top: 3px; font-size: 17px; }

[data-theme="dark"] .metrics-strip span{ border-right-color: var(--line); }
[data-theme="dark"] .metrics-strip b{ color: #9aa6bd; }
[data-theme="dark"] .metrics-strip span svg{ color: #5fd8d0; }

/* ---- Recuadros sueltos: misma familia visual ---- */
.stats{ gap: 14px; }
.stat-card{ border-radius: 12px; padding: 16px 18px; gap: 14px; }
.stat-icon{ width: 46px; height: 46px; border-radius: 14px; }
.stat-card small{ color: #6b7892; font-size: 11.5px; }
.stat-card strong{ font-size: 20px; }

[data-theme="dark"] .stat-card small{ color: #9aa6bd; }

/* ---- Encabezado de Tiempo laborado,
en una sola pieza ---- */
.time-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.time-who{ display: flex; align-items: center; gap: 14px; }
.time-who .avatar{ width: 44px; height: 44px; font-size: 16px; }
.time-who b{ display: block; font-size: 15px; }
.time-who small{ display: block; margin-top: 2px; color: #6b7892; font-size: 12px; }
.time-tags{ display: flex; gap: 7px; margin-top: 8px; }

.time-hint{
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--line);
  color: #6b7892;
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 280px;
  text-align: right;
}

.time-toolbar{ margin: 14px 0 0; }

[data-theme="dark"] .time-who small,
[data-theme="dark"] .time-hint{ color: #9aa6bd; }
[data-theme="dark"] .time-hint{ border-left-color: var(--line); }

/* ---- Expedientes: pestañas de categoría y zona de subida ---- */
.file-tabs button{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.file-tabs button svg{ width: 14px; height: 14px; }
.file-tabs button:hover{ border-color: var(--teal); color: var(--teal); }

.dropzone{
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  font-size: 12.5px;
}

.dropzone svg{ width: 17px; height: 17px; }
.dropzone b{ display: inline-flex; align-items: center; gap: 7px; float: none; margin-left: auto; border-radius: 8px; padding: 8px 12px; }

/* En oscuro estos bloques seguían con fondos claros: se veían como parches. */
[data-theme="dark"] .file-tabs button{ background: var(--card); border-color: var(--line); color: #9aa6bd; }
[data-theme="dark"] .file-tabs button.on{ color: #0b1220; background: var(--teal); border-color: var(--teal); }
[data-theme="dark"] .file-tabs button:hover:not(.on){ border-color: rgba(95,216,208,.45); color: #5fd8d0; }
[data-theme="dark"] .dropzone{ background: #121824; border-color: #3a4a63; color: #9aa6bd; }
[data-theme="dark"] .dropzone b{ color: #5fd8d0; border-color: rgba(95,216,208,.4); }
[data-theme="dark"] .file-person{ background: var(--card); border-color: var(--line); }
[data-theme="dark"] .file-person.selected{ background: #173834; border-color: #2a5a51; }
[data-theme="dark"] .pdf{ color: #ff8b8b; border-color: rgba(242,51,62,.45); }
[data-theme="dark"] .file-detail > header h2{ color: var(--ink); }
[data-theme="dark"] .employee-list .button{ background: var(--card); border-color: var(--line); color: var(--ink); }

/* ================= Configuración: bandas por tipo de ajuste =================
   Antes las siete tarjetas caían en columnas de alturas libres,
así que el
   borde de abajo quedaba desparejo y al angostar la ventana se perdía el orden
   de lectura. Ahora se agrupan por lo que cambia cada ajuste (la empresa,
las
   preferencias,
el mantenimiento) y cada banda lleva dos tarjetas de la misma
   altura: las filas cierran parejas y nada se corta. */

/* Tira de estado bajo el título. No es un ajuste que se cambie,
es información,
así que no compite con los formularios. */
.cfg-status{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: -6px 0 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.cfg-status > div{
  display: grid;
  gap: 3px;
  padding: 13px 18px;
  border-right: 1px solid var(--line);
}

.cfg-status > div:last-child{ border-right: 0; }
.cfg-status small{ color: #6b7892; font-size: 11.5px; }
.cfg-status b{ color: var(--ink); font-size: 15px; }

.cfg-bands{ display: grid; gap: 30px; }

.cfg-band-head{
  margin: 0 0 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.cfg-band-head h2{
  margin: 0;
  color: var(--teal);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cfg-band-head p{ margin: 6px 0 0; color: #6b7892; font-size: 12.5px; line-height: 1.45; }

.cfg-band-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

/* La tarjeta se estira a la altura de su pareja y el cuerpo ocupa lo que sobra,
para que el botón de guardar quede siempre pegado abajo. */
.cfg-band-cards > .cfg-card{ height: 100%; grid-template-rows: auto minmax(0, 1fr); }

.cfg-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.cfg-body > .button,
.cfg-body > .cfg-actions{ margin-top: auto; }
.cfg-body > .button{ align-self: flex-end; justify-self: end; }

.cfg-body > .cfg-grow{ flex: 1 1 auto; }
.cfg-body label{ align-content: start; }

label.cfg-grow{ display: grid; grid-template-rows: auto minmax(0, 1fr); }
label.cfg-grow textarea{ height: 100%; min-height: 96px; }
label.cfg-grow input{ align-self: start; }

/* Los dos formularios de dos columnas siguen siendo rejilla. */
.cfg-body.company-form,
.cfg-body.cfg-params{ display: grid; }

.cfg-params{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: start;
}

.cfg-wide{ grid-column: 1 / -1; }

/* Modo oscuro */
[data-theme="dark"] .cfg-status{ background: var(--card); border-color: var(--line); }
[data-theme="dark"] .cfg-status > div{ border-color: var(--line); }
[data-theme="dark"] .cfg-status small{ color: #9aa6bd; }
[data-theme="dark"] .cfg-band-head{ border-bottom-color: var(--line); }
[data-theme="dark"] .cfg-band-head p{ color: #9aa6bd; }

/* Ventana angosta: las bandas pasan a una tarjeta por fila. El corte es 1240px,
   el mismo ancho que ya usa el resto del sistema: por debajo de ahí las tarjetas
   quedan tan angostas que los botones se parten en dos renglones. Son solo dos
   estados, para que no aparezcan acomodos intermedios raros. */
@media (max-width: 1240px) {
  .cfg-band-cards{ grid-template-columns: minmax(0, 1fr); }
  .cfg-status{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg-status > div:nth-child(2){ border-right: 0; }
  .cfg-status > div:nth-child(-n + 2){ border-bottom: 1px solid var(--line); }
}

/* ---- Selector de apariencia: cada opción muestra el sistema en ese modo ----
   Antes eran tres botones de texto que dejaban media tarjeta vacía y en modo
   oscuro no se distinguía cuál estaba puesto. */
.theme-picker{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.theme-picker button{
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.theme-picker button:hover{ border-color: #a9b4c6; transform: translateY(-1px); }
.theme-picker button.on{ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 163, 158, .14); }
.theme-picker button:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }

.theme-name{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #52607c;
  font-size: 12px;
  font-weight: 600;
}

.theme-name svg{ width: 14px; height: 14px; }
.theme-picker button.on .theme-name{ color: var(--teal); }

/* La miniatura se dibuja con degradados: barra lateral,
renglón activo y dos
   renglones de contenido. Sin imágenes,
así no hay archivos que cargar. */
.theme-preview{
  display: block;
  height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-repeat: no-repeat;
}

.tp-light{
  background-color: #eef1f6;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(var(--teal), var(--teal)),
    linear-gradient(#d5dde9, #d5dde9),
    linear-gradient(#d5dde9, #d5dde9);
  background-size: 30% 100%, 46% 8px, 54% 6px, 36% 6px;
  background-position: 0 0, 40% 24%, 40% 52%, 40% 74%;
}

.tp-dark{
  background-color: #121824;
  background-image:
    linear-gradient(#1b2433, #1b2433),
    linear-gradient(#31d8ce, #31d8ce),
    linear-gradient(#2c3a50, #2c3a50),
    linear-gradient(#2c3a50, #2c3a50);
  background-size: 30% 100%, 46% 8px, 54% 6px, 36% 6px;
  background-position: 0 0, 40% 24%, 40% 52%, 40% 74%;
}

/* Automático: la misma pantalla partida,
clara de un lado y oscura del otro. */
.tp-auto{
  background-color: #121824;
  background-image:
    linear-gradient(var(--teal), var(--teal)),
    linear-gradient(#d5dde9, #d5dde9),
    linear-gradient(#2c3a50, #2c3a50),
    linear-gradient(#fff, #fff),
    linear-gradient(#eef1f6, #eef1f6);
  background-size: 46% 8px, 26% 6px, 28% 6px, 30% 100%, 50% 100%;
  background-position: 40% 24%, 40% 52%, 68% 52%, 0 0, 0 0;
}

[data-theme="dark"] .theme-picker button{ border-color: var(--line); }
[data-theme="dark"] .theme-picker button:hover{ border-color: #47566f; }
[data-theme="dark"] .theme-picker button.on{ border-color: var(--teal); }
[data-theme="dark"] .theme-name{ color: #9aa6bd; }
[data-theme="dark"] .theme-picker button.on .theme-name{ color: #5fd8d0; }
[data-theme="dark"] .theme-preview{ border-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .theme-picker button{ transition: none; }
  .theme-picker button:hover{ transform: none; }
}

/* ================= Filtros de estado (Colaboradores,
Ausencias,
Vacaciones,
Liquidaciones,
Pagos) =================
   El cuadro se veía blanco y plano en tema oscuro y no se distinguía cuál
   filtro estaba puesto: la regla `.dark .segmented button` pesaba más que
   `.segmented .on` y le borraba el color al botón activo. */
.segmented{
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #eef1f6;
}

.segmented button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #5a6884;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .1s ease;
}

.segmented button:hover:not(.on){ color: var(--ink); background: rgba(255, 255, 255, .8); }
.segmented button:active{ transform: scale(.96); }
.segmented button:focus-visible{ outline: 2px solid var(--teal); outline-offset: 1px; }

/* El filtro puesto se enciende: relleno de marca y un halo suave alrededor. */
.segmented button.on{
  color: #fff;
  background: var(--teal);
  box-shadow: 0 2px 10px rgba(0, 163, 158, .38);
}

.segmented button.on .dot{ background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }

[data-theme="dark"] .segmented{ border-color: var(--line); background: #141c29; }
[data-theme="dark"] .segmented button{ color: #9aa6bd; background: transparent; }
[data-theme="dark"] .segmented button:hover:not(.on){ color: var(--ink); background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .segmented button.on{
  color: #04231f;
  background: #2fd3c9;
  box-shadow: 0 2px 12px rgba(47, 211, 201, .3);
}
[data-theme="dark"] .segmented button.on .dot{ background: #04231f; box-shadow: 0 0 0 3px rgba(4, 35, 31, .2); }

@media (prefers-reduced-motion: reduce) {
  .segmented button{ transition: none; }
  .segmented button:active{ transform: none; }
}

/* ================= Detalle de liquidación =================
   Antes era una lista de etiquetas y montos: no se veía de dónde salía ninguna
   cifra. Una liquidación costarricense es siempre días × salario diario,
así que
   cada renglón ahora enseña su propia cuenta y el artículo que la respalda. */
.liq-statement{
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}

.liq-statement h3{
  margin: 0 0 13px;
  color: var(--teal);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---- Encabezado: quién,
por qué y en qué paso va ---- */
.liq-statement-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}

.liq-who{ display: flex; align-items: center; gap: 12px; }
.liq-who > div{ display: grid; gap: 1px; }
.liq-who b{ font-size: 14px; font-weight: 600; }
.liq-who small{ color: #6b7892; font-size: 12px; }


/* Los tres pasos del trámite. Es una secuencia real,
por eso van numerados de
   izquierda a derecha: se ve en cuál está y cuál sigue. */
.liq-track{ display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }

.liq-track li{
  position: relative;
  padding: 4px 15px 4px 25px;
  color: #94a0b6;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.liq-track li::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 7px;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  border: 2px solid #c6cfdd;
  border-radius: 50%;
}

.liq-track li + li::after{
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 15px;
  height: 1px;
  background: #c6cfdd;
}

.liq-track[data-step="1"] li:nth-child(-n + 1),
.liq-track[data-step="2"] li:nth-child(-n + 2),
.liq-track[data-step="3"] li:nth-child(-n + 3){ color: var(--teal); }

.liq-track[data-step="1"] li:nth-child(-n + 1)::before,
.liq-track[data-step="2"] li:nth-child(-n + 2)::before,
.liq-track[data-step="3"] li:nth-child(-n + 3)::before{ border-color: var(--teal); background: var(--teal); }

/* El paso en el que está ahora lleva un halo,
para distinguirlo de los ya hechos. */
.liq-track[data-step="1"] li:nth-child(1)::before,
.liq-track[data-step="2"] li:nth-child(2)::before,
.liq-track[data-step="3"] li:nth-child(3)::before{ box-shadow: 0 0 0 4px rgba(0, 163, 158, .18); }

/* ---- Base de cálculo: los tres números de los que sale todo lo demás ---- */
.liq-basis{
  padding: 16px 24px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 163, 158, .045);
}

.liq-basis > div{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.liq-basis span{ display: grid; gap: 2px; }
.liq-basis small{ color: #6b7892; font-size: 11.5px; }
.liq-basis b{ font-size: 15px; font-weight: 500; }
.liq-basis em{ color: #8894ab; font-size: 11px; font-style: normal; }

/* ---- Los renglones que se le deben ---- */
.liq-lines{ padding: 18px 24px 20px; }
.liq-lines ol{ display: grid; margin: 0; padding: 0; list-style: none; }

.liq-lines li{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 210px) 150px;
  align-items: baseline;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}

.liq-line-name{ display: grid; gap: 2px; }
.liq-line-name b{ font-size: 13.5px; font-weight: 500; }
.liq-line-name small{ color: #8894ab; font-size: 11.5px; }
.liq-formula{ color: #6b7892; font-size: 12.5px; text-align: right; }
.liq-amount{ font-size: 14.5px; font-weight: 500; text-align: right; }

.liq-subtotal{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 0;
  font-size: 13px;
}

.liq-subtotal span{ color: #6b7892; }
.liq-subtotal b{ font-size: 14.5px; }
.liq-minus{ margin-top: 6px; }
.liq-minus b{ color: #e5484d; }

/* ---- Total: el único momento fuerte de la tarjeta ---- */
.liq-total{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  background: rgba(0, 163, 158, .07);
}

.liq-total-figure small{ display: block; color: #5f6d88; font-size: 12px; }
.liq-total-figure strong{ display: block; margin: 2px 0 3px; font-size: 31px; letter-spacing: -.02em; line-height: 1.1; }
.liq-total-figure em{ color: #7b879e; font-size: 11.5px; font-style: normal; }
.liq-total-actions{ display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Tema oscuro ---- */
[data-theme="dark"] .liq-statement{ background: var(--card); border-color: var(--line); }
[data-theme="dark"] .liq-statement-head,
[data-theme="dark"] .liq-basis,
[data-theme="dark"] .liq-total{ border-color: var(--line); }
[data-theme="dark"] .liq-who small,
[data-theme="dark"] .liq-facts dt,
[data-theme="dark"] .liq-basis small,
[data-theme="dark"] .liq-formula,
[data-theme="dark"] .liq-subtotal span,
[data-theme="dark"] .liq-total-figure small{ color: #9aa6bd; }
[data-theme="dark"] .liq-line-name small,
[data-theme="dark"] .liq-basis em,
[data-theme="dark"] .liq-total-figure em{ color: #7e8aa3; }
[data-theme="dark"] .liq-lines li{ border-bottom-color: var(--line); }
[data-theme="dark"] .liq-basis{ background: rgba(0, 190, 180, .07); }
[data-theme="dark"] .liq-total{ background: rgba(0, 190, 180, .1); }
[data-theme="dark"] .liq-track li{ color: #8794ac; }
[data-theme="dark"] .liq-track li::before{ border-color: #47566f; }
[data-theme="dark"] .liq-track li + li::after{ background: #47566f; }
[data-theme="dark"] .liq-track[data-step="1"] li:nth-child(-n + 1),
[data-theme="dark"] .liq-track[data-step="2"] li:nth-child(-n + 2),
[data-theme="dark"] .liq-track[data-step="3"] li:nth-child(-n + 3){ color: #5fd8d0; }
[data-theme="dark"] .liq-track[data-step="1"] li:nth-child(-n + 1)::before,
[data-theme="dark"] .liq-track[data-step="2"] li:nth-child(-n + 2)::before,
[data-theme="dark"] .liq-track[data-step="3"] li:nth-child(-n + 3)::before{ border-color: #2fd3c9; background: #2fd3c9; }
[data-theme="dark"] .liq-minus b{ color: #ff8b8b; }

/* Ventana angosta: el encabezado y el total se apilan en vez de apretarse. */
@media (max-width: 1240px) {
  .liq-statement-head{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .liq-total{ grid-template-columns: minmax(0, 1fr); }
  .liq-lines li{ grid-template-columns: minmax(0, 1fr) 140px; }
  .liq-formula{ grid-column: 1; text-align: left; }
  .liq-basis > div{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sin períodos registrados no hay monto que mostrar: el hueco explica qué hacer
   en vez de enseñar un cero que parece un error. */
.liq-total-figure.is-pending strong{ font-size: 19px; letter-spacing: 0; }
.liq-total-figure.is-pending em{ display: block; max-width: 64ch; margin-top: 4px; line-height: 1.5; }

/* ================= Colaboradores: fichas en vez de filas =================
   Una fila que cruzaba la pantalla de lado a lado obligaba a recorrer 1200px
   con la vista para leer a una sola persona. Cada quien tiene ahora su ficha,
con una franja de color que dice de una vez cómo se le paga. */
.roster{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  margin-top: 4px;
}

.roster-card{
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  padding-left: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* La franja: verde agua para salario mensual,
azul para pago por horas. */
.roster-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--teal);
}

.roster-card[data-modality="horas"]::before{ background: #4a9bf5; }

.roster-card:hover{ border-color: #b9c4d4; box-shadow: 0 12px 26px rgba(16, 28, 66, .1); transform: translateY(-2px); }
.roster-card:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }

.roster-card.is-selected{
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 163, 158, .16), 0 12px 26px rgba(16, 28, 66, .1);
}

.roster-card > header{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 15px 14px 13px 16px;
  border-bottom: 1px solid var(--line);
}

.roster-id{ display: grid; gap: 2px; min-width: 0; }
.roster-id b{ font-size: 14.5px; line-height: 1.25; }
.roster-id small{ overflow: hidden; color: #6b7892; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.roster-card > header .more{ align-self: start; }

.roster-facts{ display: grid; align-content: start; gap: 11px; margin: 0; padding: 14px 16px; }
.roster-facts > div{ display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.roster-facts dt{ color: #8894ab; font-size: 11.5px; }
.roster-facts dd{ display: grid; justify-items: start; gap: 3px; margin: 0; min-width: 0; font-size: 12.5px; font-weight: 600; }
.roster-facts dd > :first-child{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.roster-facts dd span{ color: #8894ab; font-size: 11.5px; font-weight: 500; }

.roster-card > footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgba(15, 30, 60, .025);
}

.roster-vac{ display: inline-flex; align-items: center; gap: 7px; color: #5f6d88; font-size: 12px; }
.roster-vac svg{ width: 15px; height: 15px; color: var(--teal); }
.roster-vac b{ color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }

.roster-empty{ grid-column: 1 / -1; }
.roster-count{ margin: 16px 2px 0; color: #7b879e; font-size: 12.5px; }

[data-theme="dark"] .roster-card{ border-color: var(--line); background: var(--card); }
[data-theme="dark"] .roster-card:hover{ border-color: #47566f; box-shadow: 0 12px 26px rgba(0, 0, 0, .34); }
[data-theme="dark"] .roster-card.is-selected{ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 190, 180, .22), 0 12px 26px rgba(0, 0, 0, .34); }
[data-theme="dark"] .roster-card > header,
[data-theme="dark"] .roster-card > footer{ border-color: var(--line); }
[data-theme="dark"] .roster-card > footer{ background: rgba(255, 255, 255, .028); }
[data-theme="dark"] .roster-id small,
[data-theme="dark"] .roster-facts dt,
[data-theme="dark"] .roster-facts dd span,
[data-theme="dark"] .roster-vac{ color: #9aa6bd; }
[data-theme="dark"] .roster-count{ color: #8794ac; }
[data-theme="dark"] .roster-vac svg{ color: #5fd8d0; }

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

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

/* Leyenda de la gráfica de Reportes: la muestra se dibuja,
ya no es un carácter. */
.legend span{ display: inline-flex; align-items: center; gap: 7px; }
.legend .lg-bar{ width: 11px; height: 11px; border-radius: 3px; background: var(--teal); }
.legend .lg-line{ width: 14px; height: 3px; border-radius: 2px; background: #f0a000; }

/* Íconos dentro de títulos,
apartados y desplegables. */
.receipt-side h3,
.form-grid legend{ display: inline-flex; align-items: center; gap: 8px; }
.receipt-side h3 svg,
.form-grid legend svg{ width: 16px; height: 16px; color: var(--teal); }
.select-button,
.report-filter button:not(.button){ display: inline-flex; align-items: center; gap: 7px; }
.select-button svg,
.report-filter button:not(.button) svg{ width: 15px; height: 15px; }
.report-actions p{ display: inline-flex; align-items: center; gap: 7px; }
.report-actions p svg{ width: 15px; height: 15px; }
.available-reports button b svg,
.file-person b svg{ width: 15px; height: 15px; }
.drawer-close svg{ width: 17px; height: 17px; }

/* La etapa va junto a la versión,
en chiquito: dice si ya se lanzó o no. */
.cfg-status em{ color: #8894ab; font-size: 11px; font-style: normal; }
[data-theme="dark"] .cfg-status em{ color: #7e8aa3; }

/* La etapa va junto a la versión,
en chiquito: dice si ya se lanzó o no. */
.cfg-status em{ color: #8894ab; font-size: 11px; font-style: normal; }
[data-theme="dark"] .cfg-status em{ color: #7e8aa3; }

/* ---- Restaurar desde archivo: comparar antes de reemplazar ---- */
.restore-table{ width: 100%; margin: 16px 0 4px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.restore-table th{ padding: 8px 10px; border-bottom: 1px solid var(--line); color: #6b7892; font-size: 11.5px; font-weight: 600; text-align: left; }
.restore-table th:not(:first-child),
.restore-table td:not(:first-child){ text-align: right; }
.restore-table td{ padding: 9px 10px; border-bottom: 1px solid var(--line); }
.restore-table td:first-child{ color: #5f6d88; }
/* Los renglones que cambian se marcan,
para que se vea qué se está reemplazando. */
.restore-table tr.cambia td{ background: rgba(240, 160, 0, .09); }
.restore-table tr.cambia td b{ color: #9a6213; }

.restore-aviso{ margin: 16px 0 0; padding: 12px 14px; border-radius: 9px; color: #9a6213; background: #fff8ea; font-size: 12.5px; line-height: 1.5; }

[data-theme="dark"] .restore-table th,
[data-theme="dark"] .restore-table td{ border-bottom-color: var(--line); }
[data-theme="dark"] .restore-table th,
[data-theme="dark"] .restore-table td:first-child{ color: #9aa6bd; }
[data-theme="dark"] .restore-table tr.cambia td{ background: rgba(169, 114, 10, .16); }
[data-theme="dark"] .restore-table tr.cambia td b{ color: #e0b45c; }
[data-theme="dark"] .restore-aviso{ color: #e0b45c; background: rgba(169, 114, 10, .16); }

/* ---- Campos con problema ----
   El aviso va debajo del campo,
no en un recuadro flotante: así se ve cuál es
   cuál cuando hay varios,
y no tapa el formulario. */
.campo-malo{
  border-color: #e5484d !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .13);
}

.campo-error{
  display: block;
  margin-top: 5px;
  color: #c9313a;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}

[data-theme="dark"] .campo-malo{
  border-color: #ff6b70 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 112, .16);
}

[data-theme="dark"] .campo-error{ color: #ff9d9d; }

/* Con un mensaje de error debajo,
la fila crece y los campos vecinos se
   estiraban para igualarla. Cada campo conserva su alto. */
.form-grid label,
.form-grid fieldset > label{ align-self: start; }
.form-grid label > input,
.form-grid label > select{ align-self: start; }

/* Un dato que todavía no se ha llenado se dice, en gris: antes salía en blanco
   y no se distinguía de un dato real. */
.dato-vacio { color: #97a2b8; font-weight: 500; }
[data-theme="dark"] .dato-vacio { color: #7b879e; }

/* ---- Ventana angosta: nada se corta ----
   Las tiras de datos van en cuatro columnas fijas; en una ventana chica no
   caben y quedaban partidas por la mitad. Pasan a dos. */
@media (max-width: 1120px) {
  .selected-summary { flex-direction: column; align-items: stretch; gap: 0; }
  .selected-person { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric-group,
  .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { flex-wrap: wrap; }
  .liquidation-controls { flex-wrap: wrap; }
  .files-layout,
  .report-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Reportes: la fila de filtros no cabía y el botón se salía. */
@media (max-width: 1120px) {
  .report-filter { flex-wrap: wrap; row-gap: 12px; }
  .report-filter label { flex: 1 1 200px; }
  .report-filter > .button { flex: 1 1 100%; justify-content: center; }

  /* Expedientes: la tabla de documentos se desliza en su cuadro, como las demás. */
  /* La tabla de documentos ya cabe: no necesita deslizarse. */
  .file-tabs { flex-wrap: wrap; }
}



/* ── Las cuatro cifras de Ausencias, afinadas ─────────────────────────────
   El número manda y la unidad lo acompaña: "2 días y 4 horas" se leía todo
   del mismo tamaño, así que había que leer la casilla entera para saber
   cuánto era. Ahora el número se ve de un vistazo y la palabra queda de
   apoyo. Y cuando no hay número —"ninguna"— va toda chiquita, porque eso
   no es una cifra sino una respuesta. */
.metric strong {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.metric strong em {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  color: var(--muted);
}
.metric strong em.sin-cifra { margin-left: 0; font-size: 15px; }
.metric small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.metric { align-items: center; padding: 18px 20px; }
.metric > div { display: grid; gap: 5px; }
/* La línea que separa no llega a los cantos: respira. */
.metric { border-right: 0; position: relative; }
.metric:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  right: 0;
  width: 1px;
  background: var(--line);
}
[data-theme="dark"] .metric:not(:last-child)::after { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .metric strong em { color: #93a1bb; }

/* ── Los cuatro cuadros de Ausencias, centrados ───────────────────────────
   Iban con el ícono a la izquierda y el texto pegado a la derecha, así que
   cada cuadro empezaba en un sitio distinto según lo largo del rótulo y los
   cuatro se veían corridos entre sí. Ahora todo va en columna y al centro:
   el ícono arriba, el rótulo debajo y la cifra bajo el rótulo, en su eje.
   Cuatro columnas iguales, cada una leyéndose de arriba abajo. */
.selected-summary.solo-cifras .metric {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 11px;
  padding: 22px 16px;
  text-align: center;
}
.selected-summary.solo-cifras .metric > div { justify-items: center; gap: 7px; }
.selected-summary.solo-cifras .metric small {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.selected-summary.solo-cifras .metric strong { font-size: 23px; line-height: 1.1; }
.selected-summary.solo-cifras .metric strong em { display: block; margin: 3px 0 0; font-size: 11.5px; }
.selected-summary.solo-cifras .metric strong em.sin-cifra { display: block; margin: 0; font-size: 16px; }
.selected-summary.solo-cifras .metric > span { width: 40px; height: 40px; border-radius: 13px; }
.selected-summary.solo-cifras .metric > span svg { width: 19px; height: 19px; }
.selected-summary.solo-cifras .metric:not(:last-child)::after { top: 22px; bottom: 22px; }

/* ── El panel de detalle, alineado ────────────────────────────────────────
   El rótulo iba a la izquierda y el dato pegado al canto derecho, a más de
   doscientos píxeles de distancia: había que seguir el renglón con el dedo
   para saber cuál valor era de cuál rótulo, y con un motivo largo se
   descuadraba del todo. Ahora cada dato va debajo de su rótulo. */
.detail-panel dl {
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
}
.detail-panel dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-panel dd {
  margin: 2px 0 0;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Quién se le anota la falta, en el cajón de Nuevo registro. */
.falta-quien {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
}
.falta-quien span { display: grid; gap: 2px; min-width: 0; }
.falta-quien small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.falta-quien b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* La cuenta de días no se escribe: sale del calendario. Por eso no es una
   casilla —una casilla invita a teclear, y lo tecleado podía contradecir a
   los días marcados— sino la cifra ya resuelta. Va con el mismo alto y el
   mismo canto que los dos campos de al lado para que la fila quede a plomo,
   pero con un fondo apenas teñido, que es lo que dice "esto no se llena". */
.falta-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px;
  /* El mismo canto que los campos de al lado —que lo traen escrito a mano,
     no del tema— para que los tres bordes de la fila sean el mismo. */
  border: 1px solid #dce2ec;
  border-radius: 7px;
  background: color-mix(in srgb, var(--teal) 7%, transparent);
}
.falta-total b { font-size: 14px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.falta-total small { font-size: 12.5px; color: var(--muted); }
[data-theme="dark"] .falta-total { border-color: var(--line); background: color-mix(in srgb, var(--teal) 14%, transparent); }

/* El calendario y el motivo, pareados: cuáles días a la izquierda, por qué
   a la derecha. Solo en medio de la fila, el calendario deja como 320 px de
   blanco a cada lado con la ventana abierta, y eso no se ve terminado. */
.falta-cuando { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.falta-cuando .falta-calendario { margin-inline: 0; }
.falta-cuando-lado { display: grid; gap: 14px; align-content: start; }
/* Con el cajón angosto la columna de la derecha queda de 220 px y el texto
   de la nota se vuelve una tira: mejor uno debajo del otro. */
@media (max-width: 780px) {
  .falta-cuando { grid-template-columns: 1fr; }
  .falta-cuando .falta-calendario { margin-inline: auto; }
}

/* Las tres preguntas cortas del cajón de faltas —tipo, cuántos y si estuvo
   justificada— van en una sola fila. En la rejilla de dos columnas del
   formulario la tercera dejaba un hueco al lado, y el calendario arrancaba
   después de ese hueco. */
.falta-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; align-items: end; }
/* Con el cajón angosto tres selects quedan de cinco letras: se parten en dos
   arriba y la tercera abajo, que sigue siendo mejor que verlos aplastados.
   El corte es a 640 y no antes porque el cajón mide como 140 px menos que la
   ventana: a 640 todavía le quedan tres columnas de 150, que aguantan. */
@media (max-width: 640px) {
  .falta-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .falta-tres > label:last-child { grid-column: 1 / -1; }
}
/* Y donde el formulario entero se vuelve de una columna, esta fila también. */
@media (max-width: 480px) {
  .falta-tres { grid-template-columns: 1fr; }
}

/* El panel dice de cuál registro está hablando, arriba de todo: si no, uno
   no sabe si lo que ve es de la fila que acaba de tocar o de otra. */
.detail-panel-cual {
  margin: -8px 0 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}

/* ── El calendario del cajón de faltas ────────────────────────────────────
   Como el de Vacaciones pero un punto más chico: círculos de 28 px en vez
   de 32. Va debajo de las preguntas y no arriba, así que conviene que no se
   coma la vista; con 28 los días siguen siendo cómodos de tocar. Antes se
   estiraba a las dos columnas del formulario y cada día quedaba del tamaño
   de un botón: lo que en Vacaciones se lee como calendario, aquí se leía
   como una cuadrícula. */
.falta-calendario {
  max-width: 300px;
  margin-inline: auto;
  padding: 11px 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  user-select: none;
}
.falta-cal-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
/* Sin flechas —la falta viene amarrada a un período— el mes va centrado. */
.falta-cal-cabeza.sin-flechas { justify-content: center; }
.falta-cal-cabeza b { font-size: 13px; font-weight: 650; color: var(--ink); }
.falta-cal-flecha {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.falta-cal-flecha:hover { border-color: var(--teal); color: var(--teal); }
.falta-cal-flecha svg { width: 14px; height: 14px; }

.falta-cal-semana,
.falta-cal-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  justify-items: center;
}
.falta-cal-semana {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: center;
}
.falta-cal-vacio,
.falta-cal-dia {
  /* Cuadrado exacto, para que el redondeo dé un círculo y no un óvalo. */
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.falta-cal-dia {
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.falta-cal-dia:hover { border-color: var(--teal); }
.falta-cal-dia.domingo { color: var(--muted); }
/* Hoy se marca con un canto, no con relleno: el relleno es para lo escogido. */
.falta-cal-dia.hoy { border-color: color-mix(in srgb, var(--red) 55%, transparent); font-weight: 600; }
/* El día que faltó, en el rojo de la casa: una falta no es una buena noticia. */
.falta-cal-dia.escogido {
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, #e8402f 82%, #fff), #e8402f);
  box-shadow: 0 2px 8px color-mix(in srgb, #e8402f 34%, transparent);
  color: #fff;
  font-weight: 600;
}
[data-theme="dark"] .falta-cal-dia.escogido {
  background: linear-gradient(180deg, color-mix(in srgb, #ff6b5e 62%, #fff), #ff6b5e);
  color: #2a0f0c;
}
/* La cuenta va abajo, no en la cabecera: ahí arriba le quitaba el sitio a
   las flechas, y creciendo con cada día marcado movía el mes de lugar. */
.falta-cal-pie {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}