.employee-detail-heading{
  position: relative;
  min-height: 97px;
  padding-top: 29px;
  margin-bottom: 16px;
}

.employee-detail-heading h1{
  margin: 17px 0 5px;
  font-size: 30px;
  letter-spacing: 0;
}

.employee-detail-heading > p{
  margin: 0;
  color: #586681;
  font-size: 15px;
}

.back-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-weight: 700;
}

.back-link svg{ width: 19px; height: 19px; }

.detail-top-actions{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 12px;
}

.detail-top-actions .button svg{ width: 18px; height: 18px; }

.employee-detail-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 18px;
}

.employee-summary-card,
.employee-detail-side section,
.employee-tab-content{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.employee-summary-card{
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 310px;
  align-items: center;
  gap: 20px;
  min-height: 160px;
  padding: 20px;
}

.employee-summary-card .avatar{
  width: 108px;
  height: 108px;
  font-size: 38px;
}

/* El nombre iba a 26px en negrita cerrada. Con un nombre de verdad —cuatro
   palabras, como "Fabián Rolando Serrano Obando"— no cabía y se cortaba
   con puntos suspensivos; y aun cuando cabía, pesaba demasiado para lo que
   es: un rótulo, no un titular. */
.employee-summary-card h2{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.015em;
  flex-wrap: wrap;          /* si el nombre ocupa dos líneas, la insignia acompaña */
}

/* El nombre no se recorta: se pasa a la línea de abajo. Un nombre tico
   completo son cuatro palabras —"Fabián Rolando Serrano Obando"— y no
   cabía ni en pantalla grande: salía "Fabián Rolando Serra…", que en una
   planilla es justo lo que uno no puede permitirse, porque el nombre es
   de quién es la plata. */
.employee-summary-card h2 span{
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.employee-summary-card h2 .badge{
  flex-shrink: 0;
}

.employee-summary-card > div > b{ font-size: 15px; }

.employee-summary-card > div > p{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 15px 0 0;
  color: #52617f;
  font-size: 13px;
}

.employee-summary-card > div > p svg{ width: 17px; height: 17px; }

.employee-dates{
  display: grid;
  gap: 17px;
  padding-left: 27px;
  border-left: 1px solid #e5eaf1;
}

.employee-dates span{
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  color: #596784;
}

.employee-dates svg{ width: 18px; height: 18px; }
.employee-dates b{ color: var(--ink); }

.employee-tabs{
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 16px;
  border-bottom: 1px solid #e3e8ef;
  overflow: hidden;
}

.employee-tabs button{
  min-width: 0;
  flex: 1 1 0;
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 7px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #1f2d4a;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* El ícono no se encoge: con la pestaña angosta, "Documentos" y "Vacaciones"
   se lo comían entero y quedaban sin ícono. */
.employee-tabs button svg{ flex: 0 0 auto; width: 19px; height: 19px; color: #596782; }

.employee-tabs button.active{
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.employee-tabs button.active svg{ color: var(--teal); }

.employee-tab-content{ margin-top: 16px; overflow: hidden; }

.detail-section{
  padding: 21px 25px;
  border-bottom: 1px solid #e8ecf1;
}

.detail-section:last-child{ border-bottom: 0; }
.detail-section.compact{ padding-bottom: 18px; }

.detail-section h2{
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 8px;
  font-size: 17px;
}

.detail-section h2 svg{ width: 22px; height: 22px; color: var(--teal); }
.detail-section > p{ margin: 0 0 17px; color: #5f6e8a; }

.detail-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-grid > div,
.pay-configuration > div{
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-right: 1px solid #e9edf3;
  border-top: 1px solid #e9edf3;
}

.detail-grid > div:nth-child(-n + 3){ border-top: 0; }
.detail-grid > div:nth-child(3n){ border-right: 0; }

.detail-grid > .detail-item-pair{ display: flex; gap: 22px; }

.detail-grid small,
.pay-configuration small{
  color: #5f6d88;
  font-size: 12px;
}

.detail-grid b,
.pay-configuration b{ white-space: pre-line; font-size: 14px; }

.pay-configuration{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pay-configuration > div{
  min-height: 64px;
  border-top: 0;
}

.pay-configuration > div:last-child{ border-right: 0; }
.detail-section .notice{ margin-top: 17px; }

.employee-detail-side{
  display: grid;
  align-content: start;
  gap: 17px;
}

.employee-detail-side section{ padding: 24px; }

.employee-status-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid #e6eaf1;
  border-radius: 8px;
  color: #55627e;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .18s ease, color .18s ease;
}

.employee-status-toggle svg{ width: 15px; height: 15px; }
.employee-status-toggle:hover{ border-color: #c9d0dd; color: var(--ink); }
.employee-detail-side h2{ display: flex; align-items: center; gap: 10px; margin: 0 0 17px; font-size: 17px; }
.employee-detail-side h2 svg{ width: 21px; height: 21px; color: var(--teal); }
.employee-detail-side p{ color: #52617e; line-height: 1.55; }
.employee-detail-side .button{ width:100%; margin-top:12px; }

.employee-detail-side dl{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 17px 12px;
  margin: 0;
}

.employee-detail-side dt{ color: #5d6b86; }
.employee-detail-side dd{ margin: 0; color: var(--ink); text-align: right; font-weight: 700; }

.employee-documents,
.employee-history,
.simple-list{
  border: 1px solid #e2e7ee;
  border-radius: 8px;
  overflow: hidden;
}

.employee-documents > div{
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 11px 17px;
  border-bottom: 1px solid #e7ebf1;
}

.employee-documents > div:last-child{ border-bottom: 0; }
.employee-documents span:nth-child(2){ display:grid; gap:5px; }
.employee-documents small{ color:#60708c; }
.document-icon{ width: 43px; height:43px; display:grid; place-items:center; border-radius:7px; color:var(--teal); background:#e3f7f4; }
.document-icon svg{ width:25px; height:25px; }
.document-actions{ display:flex; align-items:center; gap:7px; }
.employee-documents .compact-button,
.employee-documents .document-actions .button{ min-height:34px; padding:0 10px; font-size:12px; }
.payment-accounts{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.payment-accounts article{ display:grid; gap:5px; padding:13px; border:1px solid #e2e8ef; border-radius:8px; background:#fbfcfe; }
.payment-accounts article.primary{ border-color:#85d9d4; background:#f1fbfa; }
.payment-accounts small{ color:#5c6b86; }
.payment-accounts span{ overflow-wrap:anywhere; color:#32415f; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.payment-accounts em{ color:#61708b; font-size:12px; font-style:normal; }
.sinpe-accounts{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:12px; }
.sinpe-accounts article{ display:grid; grid-template-columns:30px minmax(0, 1fr); align-items:center; gap:9px; min-height:76px; padding:11px; border:1px solid #e3e8ef; border-radius:8px; background:#fbfcfe; }
.sinpe-accounts article.primary{ border-color:#9fe5df; background:#f0fcfa; }
.sinpe-accounts i{ width:30px; height:30px; padding:6px; border-radius:50%; color:#147bd1; background:#eaf4ff; }
.sinpe-accounts span{ display:grid; gap:3px; min-width:0; }
.sinpe-accounts small,
.sinpe-accounts em{ overflow:hidden; color:#596884; font-size:11px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.sinpe-accounts b{ overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.detail-section > .button{ margin-top:15px; }

.form-span-2{ grid-column: 1 / -1; }
.form-span-2 textarea{ min-height: 72px; resize: vertical; }

.employee-history > div{
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 12px 17px;
  border-bottom: 1px solid #e7ebf1;
}

.employee-history > div:last-child{ border-bottom: 0; }
.employee-history > div > span{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--teal); background:#e3f7f4; }
.employee-history > div:nth-child(2n) > span{ color:#207fe8; background:#e7f2ff; }
.employee-history p{ display:grid; gap:5px; margin:0; }
.employee-history p small{ color:#60708d; }
.employee-history time{ color:#596784; font-size:12px; white-space:nowrap; }

/* El historial y el de vacaciones se deslizan por dentro cuando crecen: van
   marcados con data-tope en el HTML (ver "Listas con tope" en app.js). */

.vacation-metrics{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 17px 0 23px;
  padding: 13px;
  border: 1px solid #dde5ed;
  border-radius: 8px;
}

.vacation-metrics > div{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 5px 11px;
  padding: 8px 14px;
  border-right: 1px solid #e5eaf1;
}

.vacation-metrics > div:last-child{ border-right: 0; }
.vacation-metrics svg{ grid-row: span 2; width:40px; height:40px; padding:8px; border-radius:50%; color:var(--teal); background:#e3f7f4; }
.vacation-metrics small{ color:#596783; }.vacation-metrics b{ font-size:18px; }
.detail-section h3{ margin: 0 0 12px; font-size:16px; }
.simple-list > div{ display:grid; grid-template-columns:1fr auto auto; gap:18px; padding:13px 17px; border-bottom:1px solid #e7ebf1; }.simple-list > div:last-child{border-bottom:0;}
.notifications > div > span{ color:#803fea; background:#f1eaff; }.notifications > div:nth-child(2n) > span{ color:#0b9d98; background:#e3f7f4; }

@media(max-width:480px) {
  .employee-detail-layout{ grid-template-columns: 1fr; }
  .employee-detail-side{ grid-template-columns: repeat(3, 1fr); }
  .employee-detail-side section{ padding: 17px; }
}

@media(max-width:480px) {
  .employee-detail-heading{ padding-top: 12px; }
  .detail-top-actions{ position:static; flex-wrap:wrap; margin-top:15px; }
  .employee-detail-heading h1{ margin-top:20px; font-size:25px; }
  .employee-summary-card{ grid-template-columns: 75px 1fr; padding:16px; }
  .employee-summary-card .avatar{ width:70px; height:70px; font-size:25px; }
  .employee-summary-card h2{ font-size:20px; }
  .employee-summary-card > div > p{ display:none; }
  .employee-dates{ grid-column:1/-1; padding:14px 0 0; border-left:0; border-top:1px solid #e5eaf1; }
  .employee-detail-side{ grid-template-columns:1fr; }
  .detail-grid{ grid-template-columns:1fr 1fr; }
  .detail-grid > div:nth-child(3n){ border-right:1px solid #e9edf3; }
  .detail-grid > div:nth-child(2n){ border-right:0; }
  .detail-grid > div:nth-child(3){ border-top:1px solid #e9edf3; }
  .pay-configuration,
.vacation-metrics{ grid-template-columns:1fr 1fr; }
  .pay-configuration > div:nth-child(2n),
.vacation-metrics > div:nth-child(2n){ border-right:0; }
  .pay-configuration > div:nth-child(n+3){ border-top:1px solid #e9edf3; }
  .vacation-metrics > div:nth-child(n+3){ border-top:1px solid #e9edf3; }
  .employee-history > div{ grid-template-columns:43px 1fr; }
  .employee-history time{ grid-column:2; }
  .employee-tabs button{ padding:0; }
  .employee-tabs button span{ display:none; }
  .payment-accounts{ grid-template-columns:1fr; }
  .sinpe-accounts{ grid-template-columns:1fr; }
  .employee-documents > div{ grid-template-columns:43px minmax(0, 1fr); }
  .employee-documents .document-actions,
.employee-documents .compact-button{ grid-column:2; justify-self:start; }
}

/* ── La historia en la empresa ────────────────────────────────────────────
   Los tramos que trabajó, uno debajo del otro, con el de ahora resaltado.
   Es lo que contesta "¿este señor ya había trabajado aquí antes?" sin
   tener que ir a buscar la liquidación vieja. */
.tramos-historia{
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--e1);
}
.tramos-historia h2{
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 13.5px; font-weight: 640; color: var(--ink);
}
.tramos-historia h2 svg{ width: 16px; height: 16px; color: var(--muted); }
.tramos-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tramos-lista li{
  position: relative; padding-left: 17px;
  display: grid; gap: 1px;
}
/* La bolita de la línea de tiempo: apagada lo que ya cerró, viva lo de hoy. */
.tramos-lista li::before{
  content: ""; position: absolute; left: 0; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
}
.tramos-lista li::after{
  content: ""; position: absolute; left: 3.5px; top: 15px; bottom: -9px;
  width: 1px; background: var(--line);
}
.tramos-lista li:last-child::after{ display: none; }
.tramos-lista b{ font-size: 12.5px; font-weight: 620; color: var(--ink); }
.tramos-lista small{ font-size: 11.5px; color: var(--muted); }
.tramo-vivo::before{ background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }
.tramo-vivo b{ color: var(--teal); }
.tramos-pausas{
  display: flex; gap: 7px; align-items: flex-start;
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}
.tramos-pausas svg{ width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

/* ── Escoger entre pausa y salida ─────────────────────────────────────────
   Dos caminos que se parecen y no son lo mismo, así que se enseñan
   completos —con su consecuencia escrita— en vez de un menú. */
.pausa-opciones{ display: grid; gap: 10px; margin: 4px 0 14px; }
.pausa-opcion{
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 3px 13px;
  align-items: start; text-align: left; cursor: pointer;
  padding: 14px 15px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card);
  transition: border-color .2s ease, background .2s ease;
}
.pausa-opcion:hover{ border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.pausa-opcion.elegida{
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, var(--card));
}
.pausa-icono{
  grid-row: span 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent);
}
.pausa-icono svg{ width: 19px; height: 19px; }
.pausa-opcion b{ font-size: 14px; font-weight: 620; color: var(--ink); }
.pausa-opcion small{ font-size: 12px; line-height: 1.5; color: var(--muted); }
.forma-pausa label{ display: grid; gap: 5px; margin-bottom: 12px; font-size: 12.5px; color: var(--muted); }
.forma-pausa label em{ font-style: normal; opacity: .7; }
.forma-pausa input{
  padding: 10px 12px; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}

/* La fecha que quedó cerrada con llave. */
.fecha-trabada{
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 13px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.fecha-trabada b{ font-size: 14px; color: var(--ink); }
.fecha-trabada span{
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
}
.fecha-trabada svg{ width: 13px; height: 13px; }
.fecha-trabada .button{ margin-left: auto; }

[data-theme="dark"] .fecha-trabada{ background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .tramos-lista b{ color: #e8edf7; }
[data-theme="dark"] .tramo-vivo b{ color: #5fd8d0; }
[data-theme="dark"] .tramo-vivo::before{ background: #5fd8d0; box-shadow: 0 0 0 3px rgba(95, 216, 208, .18); }
[data-theme="dark"] .pausa-icono{ color: #5fd8d0; background: rgba(95, 216, 208, .14); }
[data-theme="dark"] .pausa-opcion.elegida{ border-color: #5fd8d0; background: rgba(95, 216, 208, .08); }

@media (prefers-reduced-motion: reduce) {
  .pausa-opcion{ transition: none; }
}

/* ── El peso de los datos ─────────────────────────────────────────────────
   Todos los valores de la ficha se escriben con <b>, y el navegador pinta
   <b> en negrita cerrada (700). En una pantalla que es casi pura ficha
   —puesto, fecha de ingreso, cédula, nacionalidad, teléfono— eso se vuelve
   un muro de blanco grueso: se ve grande y duro, y no entona con el fondo
   oscuro. El dato se lee igual de bien en semi negrita, y la pantalla
   descansa. */
.employee-summary-card > div > b,
.employee-dates b,
.detail-grid b,
.detail-grid .dato-vacio{ font-weight: 500; }

.detail-section h2{ font-size: 15px; font-weight: 600; }

/* Y el blanco, un punto más tibio: el mismo trato que las cifras de las
   tarjetas. El nombre del colaborador sí conserva el blanco fuerte, que
   es lo único que debe destacar aquí. */
[data-theme="dark"] .employee-summary-card > div > b,
[data-theme="dark"] .employee-dates b,
[data-theme="dark"] .detail-grid b{ color:#cfd9ea; }

/* ── Las cuentas en tema oscuro ───────────────────────────────────────────
   Estas tarjetas se escribieron con colores claros fijos —#e2e8ef, #f1fbfa,
   #eaf4ff— y en tema oscuro quedaban blancas encima del fondo negro:
   encandilaban de noche, que es justo cuando se usa el tema oscuro. */
[data-theme="dark"] .payment-accounts article,
[data-theme="dark"] .sinpe-accounts article {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}
[data-theme="dark"] .payment-accounts article.primary,
[data-theme="dark"] .sinpe-accounts article.primary {
  border-color: rgba(95, 216, 208, .38);
  background: rgba(95, 216, 208, .09);
}
[data-theme="dark"] .payment-accounts small,
[data-theme="dark"] .payment-accounts em,
[data-theme="dark"] .sinpe-accounts small,
[data-theme="dark"] .sinpe-accounts em { color: #93a1bb; }
[data-theme="dark"] .payment-accounts span { color: #cfd9ea; }
[data-theme="dark"] .sinpe-accounts i { color: #7ec2ff; background: rgba(126, 194, 255, .14); }

/* ── La ficha del colaborador, menos cuadrada ─────────────────────────────
   La pestaña General era una rejilla de tres columnas con una línea de un
   píxel alrededor de cada casilla: nueve recuadros pegados que se leían
   como una tabla de contabilidad, y en tema oscuro eran nueve rayas claras
   cruzando la pantalla. Ahora las casillas se separan con aire en vez de
   con rayas, y cada bloque es un panel con su canto redondeado, como los de
   Vacaciones y Aguinaldos. */
.employee-tab-content .detail-section {
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.employee-tab-content .detail-section:last-child { margin-bottom: 0; border-bottom: 1px solid var(--line); }
.employee-tab-content .detail-section h2 {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.employee-tab-content .detail-section h2 svg { width: 15px; height: 15px; }
.employee-tab-content .detail-section > p { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); }

.detail-grid,
.pay-configuration { gap: 18px 28px; }
.detail-grid > div,
.pay-configuration > div {
  min-height: 0;
  padding: 0;
  border: 0;
  gap: 4px;
}
.detail-grid small,
.pay-configuration small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-grid b,
.pay-configuration b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.detail-grid > .detail-item-pair { gap: 28px; }

/* La columna de la derecha habla el mismo idioma. */
.employee-detail-side section {
  padding: 18px 20px;
  border-radius: 14px;
}
.employee-detail-side section h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.employee-detail-side section h2 svg { width: 15px; height: 15px; }

[data-theme="dark"] .employee-tab-content .detail-section { border-color: rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .026); }

/* ── Las alertas de la ficha ──────────────────────────────────────────────
   Antes eran cinco renglones iguales para todo el mundo. Ahora cada una es
   un hecho, así que se leen como tarjetas: el ícono a la izquierda dice de
   qué habla y el canto de color, qué tan urgente es. */
.ficha-alertas { display: grid; gap: 9px; }
.ficha-alertas article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--teal) 55%, transparent);
  border-radius: 11px;
  background: var(--card);
}
.ficha-alertas article.urgente { border-left-color: color-mix(in srgb, var(--red) 65%, transparent); }
.ficha-alertas article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}
.ficha-alertas article.urgente > span { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.ficha-alertas article > span svg { width: 16px; height: 16px; }
.ficha-alertas article div { display: grid; gap: 3px; min-width: 0; }
.ficha-alertas article b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ficha-alertas article small { font-size: 12px; line-height: 1.5; color: var(--muted); }

.ficha-alertas-vacio {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 28px 20px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
}
.ficha-alertas-vacio svg { width: 22px; height: 22px; color: var(--teal); }
.ficha-alertas-vacio b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ficha-alertas-vacio small { max-width: 46ch; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ── La ficha en tema oscuro, pareja en todas sus pestañas ────────────────
   Cada pestaña se veía de otra intensidad. Historial, Documentos y el resumen
   de Vacaciones se escribieron con colores claros fijos —rayas #e7ebf1,
   círculos #e3f7f4 y #e7f2ff detrás de los íconos, grises #596784—, y en
   oscuro cada renglón llevaba una raya y un círculo casi blancos: con muchos
   renglones, el Historial entero se veía más claro. Las alertas, al revés,
   tapaban el velo de la sección con el color macizo de la tarjeta y quedaban
   más oscuras. Ahora todo lo de adentro se pone encima de la sección con el
   mismo trato que las cuentas: velo blanco muy suave, canto tenue y el tinte
   del ícono en transparencia. */
[data-theme="dark"] .employee-documents,
[data-theme="dark"] .employee-history,
[data-theme="dark"] .simple-list,
[data-theme="dark"] .vacation-metrics,
[data-theme="dark"] .employee-dates { border-color: rgba(255, 255, 255, .09); }
[data-theme="dark"] .employee-documents > div,
[data-theme="dark"] .employee-history > div,
[data-theme="dark"] .simple-list > div,
[data-theme="dark"] .vacation-metrics > div { border-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .employee-tabs { border-bottom-color: rgba(255, 255, 255, .09); }

[data-theme="dark"] .employee-history > div > span,
[data-theme="dark"] .document-icon,
[data-theme="dark"] .vacation-metrics svg { color: #5fd8d0; background: rgba(95, 216, 208, .14); }
[data-theme="dark"] .employee-history > div:nth-child(2n) > span { color: #7ec2ff; background: rgba(126, 194, 255, .14); }

/* Las alertas: solo los tres cantos grises; el de la izquierda es el color
   de la urgencia y se queda. */
[data-theme="dark"] .ficha-alertas article {
  border-top-color: rgba(255, 255, 255, .09);
  border-right-color: rgba(255, 255, 255, .09);
  border-bottom-color: rgba(255, 255, 255, .09);
  /* Un punto menos que las cuentas: aquí las tarjetas cubren casi toda la
     sección, y con .04 la pestaña entera se veía más clara que las otras. */
  background: rgba(255, 255, 255, .03);
}

/* Los grises del tema claro sobre negro no se leían, y las pestañas sin
   abrir iban en azul marino: casi invisibles. */
[data-theme="dark"] .employee-summary-card > div > p,
[data-theme="dark"] .employee-dates span,
[data-theme="dark"] .employee-detail-side dt,
[data-theme="dark"] .employee-documents small,
[data-theme="dark"] .employee-history p small,
[data-theme="dark"] .employee-history time,
[data-theme="dark"] .vacation-metrics small { color: #93a1bb; }
[data-theme="dark"] .employee-tabs button:not(.active) { color: #aab5c8; }
[data-theme="dark"] .employee-tabs button:not(.active) svg { color: #8390a8; }
/* La abierta, con el turquesa claro: el hondo (--teal) sobre negro se apaga,
   igual que pasó en las pestañas de Reportes. */
[data-theme="dark"] .employee-tabs button.active,
[data-theme="dark"] .employee-tabs button.active svg { color: #5fd8d0; border-bottom-color: #5fd8d0; }

/* ── Las cuentas, sin realce fijo ─────────────────────────────────────────
   La primera cuenta y el primer SINPE iban siempre encendidos, y eso se
   leía como si estuvieran seleccionados o como un error. La principal se
   distingue por su rótulo, que para eso lo tiene; lo que se ilumina es la
   que uno está mirando, y apenas. */
.payment-accounts article.primary,
.sinpe-accounts article.primary {
  border-color: var(--line);
  background: var(--card);
}
.payment-accounts article,
.sinpe-accounts article {
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.payment-accounts article:hover,
.sinpe-accounts article:hover {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
  background: color-mix(in srgb, var(--teal) 5%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--teal) 12%, transparent);
}
[data-theme="dark"] .payment-accounts article.primary,
[data-theme="dark"] .sinpe-accounts article.primary {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}
[data-theme="dark"] .payment-accounts article:hover,
[data-theme="dark"] .sinpe-accounts article:hover {
  border-color: rgba(95, 216, 208, .40);
  background: rgba(95, 216, 208, .07);
  box-shadow: 0 2px 10px rgba(95, 216, 208, .14);
}

/* ── La ficha según el ancho que de verdad tiene ──────────────────────────
   Las pestañas y el resumen de vacaciones se acomodaban por el ancho de la
   VENTANA, pero lo que manda es el del recuadro: entre 480 y 1120 pixeles
   la ficha va a una columna y el recuadro queda en unos 540. Ahí seis
   pestañas en fila no caben con ícono y nombre, y los cuatro cuadros del
   resumen se salían por la derecha. Ninguna de las dos zonas tiene nada
   posicionado adentro, así que medirlas como contenedor no mueve nada. */
.employee-tabs,
.employee-tab-content{ container-type: inline-size; }

@container (max-width: 720px){
  /* El ícono arriba y el nombre debajo, como las pestañas de una app: caben
     las seis sin perder ni el ícono ni la palabra. */
  .employee-tabs button{
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
    padding: 8px 2px 6px;
    font-size: 12px;
  }
  .vacation-metrics{ grid-template-columns: 1fr 1fr; }
  .vacation-metrics > div:nth-child(2n){ border-right: 0; }
  .vacation-metrics > div:nth-child(n+3){ border-top: 1px solid #e9edf3; }
  [data-theme="dark"] .vacation-metrics > div:nth-child(n+3){ border-top-color: rgba(255, 255, 255, .06); }
}

[data-theme="dark"] .employee-tabs button:hover:not(.active),
[data-theme="dark"] .employee-tabs button:hover:not(.active) svg{ color: #5fd8d0; }