/* =============================================
   Plataforma AP — Componentes UI
   Incluye: botones, coberturas, tarifa, stepper,
   formularios (contenedores), resumen, stats, login,
   tablas, modales, popups dinámicos (JS) y utilidades.

   Nota: hasta julio 2026 este archivo estaba dividido en
   components.css + components-extra.css. Se unificaron
   porque ambos eran "componentes de UI" — la separación
   no aportaba claridad, solo obligaba a buscar en dos lados.
   ============================================= */

/* ── Botones ── */
.btn-primary {
  width: 100%;
  background: var(--btn-primario-bg);
  color: var(--btn-primario-text);
  border: none;
  padding: 11px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;    
}
.btn-primary:hover { background: var(--btn-primario-hover); }

.btn-next {
  background: var(--btn-avance-bg);
  color: var(--btn-primario-text);
  border: none;
  padding: 12px 32px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(78,203,160,.35);
  font-family: inherit;
  transition: all .15s;
}
.btn-next:hover:not(:disabled) { background: var(--btn-avance-hover); transform: translateY(-1px); }
.btn-next:disabled { opacity: .5; cursor: not-allowed; }
.btn-next--danger { background: var(--btn-danger-bg); }
.btn-next--danger:hover:not(:disabled) { background: var(--btn-danger-hover); transform: translateY(-1px); }

.btn-back {
  background: var(--btn-primario-bg);
  color: var(--btn-primario-text);
  border: none;
  padding: 12px 28px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: all .15s;
}
.btn-back:hover { background: var(--btn-primario-hover); transform: translateY(-1px); }

.btn-sec {
  background: var(--btn-sec-bg);
  color: var(--btn-sec-text);
  border: 1px solid var(--btn-sec-border);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s;
}
.btn-sec:hover { background: var(--bg); }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-sm);
  font-size: 16px;
  color: var(--text-sec);
  font-family: inherit;
  transition: all .15s;
  line-height: 1;
}
.btn-icon:hover { background: var(--bg); color: var(--text); }

.btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .5rem;
  margin-bottom: 1rem;
}
.center {
  justify-content: center;
} 
.space-between {
  justify-content: space-between;
} 

/* ── Coberturas ── */
.cob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 1.5rem;
}
.cob-card {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 1.125rem 1rem;
  text-align: center;
}
.cob-icon {
  width: 40px; height: 40px;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .625rem;
}
.cob-card h3 { font-size: 12px; font-weight: 500; color: var(--text-sec); margin-bottom: .4rem; line-height: 1.3; }
.cob-card .amount { font-size: 16px; font-weight: 600; color: var(--text); }

/* Variantes de color por tipo de cobertura (usadas en la landing) */
.cob-icon--muerte     { background: var(--bpl); }
.cob-icon--muerte i      { color: var(--bp); font-size: 22px; }

.cob-icon--invalidez  { background: var(--success-light); }
.cob-icon--invalidez i   { color: var(--berkley); font-size: 22px; }

.cob-icon--asistencia { background: var(--warning-light); }
.cob-icon--asistencia i  { color: var(--warning); font-size: 22px; }

/* ── Tarifa ── */
.tarifa-box {
  background: var(--bpl);
  border-radius: var(--r-lg);
  padding: 1.125rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(var(--bp-rgb),.2);
}
.tarifa-box h4 { font-size: 15px; font-weight: 600; margin-bottom: .875rem; }
.tarifa-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .4rem; gap: 1rem; }
.tarifa-row:last-child { margin-bottom: 0; }
.tarifa-label { font-size: 13px; color: var(--text-sec); }
.tarifa-val { font-size: 13px; font-weight: 600; color: var(--color-accent-text); text-align: right; }
.tarifa-sep { border-top: 1px solid rgba(var(--bp-rgb),.25); padding-top: .75rem; margin-top: .75rem; }
.tarifa-total-val { font-size: 18px; font-weight: 700; color: var(--color-accent-text); }
.tarifa-nota { font-style: normal; color: var(--text-sec); }
.tarifa-label--strong { font-weight: 600; color: var(--text); }

/* ── Stepper ── */
.stepper {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  justify-content: center;
}
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -50%; top: 16px;
  width: 100%; height: 1px;
  background: var(--border);
}
.step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  border: 2px solid var(--border);
  background: var(--bg); color: var(--text-sec);
  position: relative; z-index: 1;
  transition: all .2s;
}
.step.active .step-circle { border-color: var(--bp); background: var(--bp); color: white; }
.step.done  .step-circle { border-color: var(--success); background: var(--success); color: white; }
.step-label { font-size: 11px; color: var(--text-sec); text-align: center; font-weight: 500; }
.step.active .step-label { color: var(--bp); font-weight: 600; }

/* ── Form box ── */
.form-box {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.form-box h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ── Calc box ── */
.calc-box {
  background: var(--bpl);
  border-radius: var(--r-sm);
  padding: .875rem;
  font-size: 13px;
  color: var( --color-accent-text);
  margin-bottom: .875rem;
  border: 1px solid rgba(var(--bp-rgb),.2);
}

/* ── Resumen step 3 ── */
.resumen-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 1.25rem; }
.res-card { background: var(--bg); border-radius: var(--r); padding: 1rem; text-align: center; }
.res-num { font-size: 22px; font-weight: 600; color: var(--bp); }
.res-label { font-size: 11px; color: var(--text-sec); margin-top: 2px; font-weight: 500; }
.resumen-persons {
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--border);
  overflow: hidden;
  overflow-x: auto;
  margin-bottom: 1.25rem;
}
.res-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 400px; }
.res-table thead tr { background: var(--bpl); }
.res-table thead th { padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--bp); white-space: nowrap; }
.res-table tbody tr { border-top: 1px solid var(--border); }
.res-table tbody td { padding: 8px 12px; color: var(--text); }

/* ── Stats DB ── */
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 1.25rem; }
.stat-card { background: var(--bg); border-radius: var(--r); padding: 1rem; text-align: center; }
.stat-card .sn { font-size: 24px; font-weight: 600; color: var(--color-accent-text); }
.stat-card .sl { font-size: 12px; color: var(--text-sec); margin-top: 2px; font-weight: 500; }

/* ── Login ── */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 56px); padding: 2rem; }
.login-card {
  background: var(--card);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  padding: 2.5rem;
  width: 100%; max-width: 380px;
  text-align: center;
  box-shadow: var(--shadow);
}
.login-card h2 { font-size: 19px; font-weight: 600; margin-bottom: .4rem; }
.login-card .sub { font-size: 13px; color: var(--text-sec); margin-bottom: 1.5rem; }
.err {
  color: var(--danger);
  font-size: 12px;
  margin-top: .5rem;
  display: none;
  background: var(--danger-light);
  padding: 6px 10px;
  border-radius: var(--r-sm);
}

/* ── Tabla general (historial) ── */
.db-wrap { padding: var(--space-lg); max-width: 1100px; margin: 0 auto; }
.db-top { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 1rem; flex-wrap: wrap; gap: 8px; }
.db-top h2 { font-size: 19px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.table-wrap { background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; overflow-x: auto; position: relative; }
table { width: 100%; border-collapse: collapse; }
.db-table thead tr { background: var(--bpl); }
.db-table thead th {
  padding: 10px 12px; text-align: left;
  font-weight: 600; font-size: 11px;
  color: var(--color-accent-text); text-transform: uppercase;
  letter-spacing: .4px; white-space: nowrap;
}
.db-table tbody tr { border-top: 1px solid var(--border); transition: background .1s; }
.db-table tbody tr:hover { background: var(--bg); }
.db-table tbody td { padding: 9px 12px; color: var(--text); font-size: 12px; }

/* Líneas divisorias verticales en la tabla del Historial de certificados —
   separan visualmente: datos de la persona (Nombre, DNI, Nac.) | datos de
   cobertura (Desde, Hasta, Días) | resto (Cláusula, Ubicación, Estado...).
   Solo en esta tabla puntual (#db-table-historial), no en las otras que
   comparten la clase .db-table. */
#db-table-historial th:nth-child(3),
#db-table-historial td:nth-child(3) {
  border-right: 1px solid var(--border);
}
#db-table-historial th:nth-child(4),
#db-table-historial td:nth-child(4) {
  font-weight: bold;
}
#db-table-historial th:nth-child(5),
#db-table-historial td:nth-child(5) {
  border-right: 1px solid var(--border);
}
#db-table-historial th:nth-child(6),
#db-table-historial td:nth-child(6) {
  text-align: center;
  border-right: 1px solid var(--border);
}
#db-table-historial th:nth-child(7),
#db-table-historial td:nth-child(7) {
  border-right: 1px solid var(--border);
}
#db-table-historial th:nth-child(10),
#db-table-historial td:nth-child(10) {
  text-align: center;
}
#db-table-historial th:nth-child(11),
#db-table-historial td:nth-child(11) {
  text-align: center;
}



/* Estado visual de filas del historial */
.row-anulada { opacity: .5; background: var(--bg); }
.row-anulada td { color: var(--text-sec) !important; }
/* Agrupación visual por certificado (personas del mismo certificado comparten color) */
.row-group-alt { 
  background-color: var(--bg-even-row);
}

/* Celda "Salón" del historial — distinta si el salón está en papelera/eliminado */
.ubicacion-cell { font-size: 11px; color: var(--text-sec); }
.ubicacion-cell--eliminado { color: var(--danger); font-style: italic; font-weight: 600; }

/* Badges dinámicos (estado activo/anulado, cláusula NR, etc.) */
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-green  { background: var(--success-light); color: var(--success); }

/* ── Modales ── */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: white;
  border-radius: var(--r-xl);
  padding: 2rem;
  width: 100%;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-titulo    { font-size: 16px; font-weight: 600; margin-bottom: 1.25rem; }
.modal-cred-body { font-size: 13px; color: var(--text-sec); margin-bottom: 1.25rem; line-height: 1.5; }

/* Modificadores de ancho (popups de confirmación / CSV / resultados) */
.modal-box--sm { max-width: 380px; }
.modal-box--lg { max-width: 560px; }
.modal-box--xl { max-width: 830px; }
.modal-box--excel-error {width: 500px;}

/* ── Popups de contenido dinámico (generados desde JS) ── */

.popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.popup-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
.popup-nota {
  font-size: 12px;
  color: var(--text-sec);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.popup-nota em { font-style: italic; display: block; margin-top: .25rem; }

.popup-confirm-titulo { font-size: 16px; font-weight: 600; margin-bottom: .75rem; }
.popup-confirm-msg    { font-size: 13px; color: var(--text-sec); margin-bottom: 1.5rem; }

/* Discrepancias de datos (autocompletado vs. maestro de personas) —
   estas 4 clases las reutiliza el popup unificado de revisión (.revision-fila--discrepancia) */
.disc-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.disc-etiqueta { font-size: 10px; font-weight: 600; margin-bottom: 4px; }
.disc-etiqueta-sistema { color: var(--text-sec); }
.disc-etiqueta-nuevo   { color: var(--bp); }
.disc-nombre   { font-weight: 600; color: var(--text); }
.disc-nac      { color: var(--text-sec); font-size: 12px; }

/* Tabla de ubicaciones */
.acciones-row { display: flex; gap: 2px; }
.td-usuario   { font-size: 11px; color: var(--text-sec); }

/* Toggle Activos / Papelera */
.toggle-vista-ubicaciones { display: flex; background: var(--gray-light); border-radius: 8px; padding: 3px; gap: 3px; }
.btn-toggle-ubicaciones {
  border: none; background: none;
  padding: 6px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--text-sec); font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all .15s;
}
.btn-toggle-ubicaciones.active { background: var(--bp); color: white; }
.btn-toggle-ubicaciones:hover:not(.active) { background: white; }

/* Popups de importación CSV de ubicaciones — tablas de preview / errores / resultado */
.popup-scroll-box {
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 1rem 0;
}
.popup-scroll-box--280 { max-height: 280px; }
.popup-scroll-box--300 { max-height: 300px; }
.popup-scroll-box--320 { max-height: 320px; }

.popup-table {
  width: 100%;
  border-collapse: collapse;
}
.popup-table--compact { font-size: 12px; }

.popup-thead-error { background: var(--danger-light); }
.popup-thead-info  { background: var(--bpl); }

.popup-th-error {
  padding: 6px 10px;
  text-align: left;
}
.popup-th-info {
  padding: 7px 10px;
  text-align: left;
  font-size: 11px;
  color: var(--bp);
}

.popup-td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.csv-err-fila  { color: var(--warning); font-weight: 600; }
.csv-err-campo { color: var(--text-sec); }

/* Columna de contraseña (JS la tacha tras el countdown de 10s) */
.td-pass { color: var(--bp); font-weight: 600; }

/* ── Utilidades de color (íconos y texto) ── */
.icon-bp      { color: var(--icon); }
.icon-bt      { color: var(--bt); }
.icon-danger  { color: var(--danger); }
.icon-success { color: var(--success); }
.icon-warning { color: var(--warning); }

.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-bp      { color: var(--bp); }
.text-muted   { font-size: 11px; color: var(--text-sec); }

.hidden { display: none; }

/* ── Overlay de carga (mientras se crea el certificado) ── */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.9);
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-overlay-box { text-align: center; color: var(--bp); font-weight: 600; font-size: 14px; }
/* Combinado con .hidden, mismo patrón que .field-err.hidden más abajo en
   este archivo — .loading-overlay ya trae su propio display:flex, así que
   .hidden solo (una clase) no le gana en la cascada. 2 clases sí ganan,
   sin importar el orden de las reglas. (bug encontrado y arreglado
   15/07/2026, al migrar el style="display:none" inline a esta clase) */
.loading-overlay.hidden { display: none; }
.loading-overlay-box .spin { font-size: 34px; display: block; margin: 0 auto .75rem; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utilidades de espaciado (margin-top) ── */
.mt-sm { margin-top: .625rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.25rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }

/* ── Utilidades de espaciado (margin-bottom) ── */
.mb-sm { margin-bottom: .625rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.25rem; }
.mb-xl { margin-bottom: 1.5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }

.mant-mes-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  cursor: pointer;
}
.mant-mes-row input[type=checkbox] { width: 18px; height: 18px; }
.mant-mes-row input[type=checkbox]:disabled { cursor: not-allowed; }
.mant-mes-row span:first-of-type { font-size: 14px; font-weight: 500; flex: 1; }

/* Tildado (se conserva) o mes en curso: verde. Destildado (se va a borrar): rojo. */
.mant-mes-row--tildado {
  background: var(--success-light);
  border-color: var(--success);
}
.mant-mes-row--tildado input[type=checkbox] { accent-color: var(--success); }
.mant-mes-row--destildado {
  background: var(--danger-light);
  border-color: var(--danger);
}
.mant-mes-row--destildado input[type=checkbox] { accent-color: var(--danger); }

.mant-mes-badge {
  font-size: 12px;
  color: var(--color-accent-text);
  background: white;
  padding: 2px 10px;
  border-radius: 20px;
}
.mt-xl { margin-top: 1.5rem; }

/* ── Utilidades de tamaño de ícono ── */
.icon-sm { font-size: 14px; }
.icon-md { font-size: 18px; }
.icon-lg { font-size: 22px; }
.icon-mr-xs { margin-right: 4px; }
.icon-mr-sm { margin-right: 6px; }
.icon-berkley { color: var(--berkley); }

/* ── Utilidades de layout chico ── */
.row-gap-sm { display: flex; gap: 8px; align-items: center; }
.row-gap-xs { display: flex; gap: 8px; }
.btn-row--end { justify-content: flex-end; }
.text-15 { font-size: 15px; }

/* ── Login: bloque de marca ── */
.login-brand-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 1.5rem; }
.logo-chain--lg { width: 38px; height: 38px; }
.logo-chain--lg svg { width: 23px; height: 23px; }
.login-brand-text { font-size: 28px; font-weight: 700; color: var(--bp); }

/* ── Caja de Cláusula de No Repetición (resumen paso 3) ── */
.res-clausula-box {
  background: var(--bpl);
  border-radius: 8px;
  padding: .875rem;
  font-size: 13px;
  color: var(--bp);
  margin-bottom: 1rem;
  border: 1px solid rgba(var(--bp-rgb),.2);
}

/* ── Nota al pie de la landing ── */
.footer-note { text-align: center; font-size: 12px; color: var(--text-sec); padding: 1.5rem 0; }

/* ── Select angosto (filtro de estado en historial) ── */
.month-select--sm { min-width: 140px; }

/* ── Nota "historial inalterable" ── */
.readonly-note {
  font-size: 11px;
  color: var(--text-sec);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--gray-light);
  border-radius: 6px;
}

/* ── Certificado: estado vacío y encabezado ── */
.cert-empty-box { background: white; border-radius: 12px; padding: 3rem 1rem; max-width: 720px; margin: 0 auto; }
.cert-top-title { font-size: 17px; font-weight: 600; color: var(--text); }
.cert-codigo-label { font-size: 11px; color: var(--text-sec); margin-top: 2px; }
.cert-claus-text { font-size: 11px; line-height: 1.6; font-style: italic; }

/* ── Modales: anchos especiales (con sombra propia, distinta a --shadow-lg) ── */
.modal-box--w440 { max-width: 440px; box-shadow: 0 8px 40px rgba(0,0,0,.2); }
.modal-box--w420 { max-width: 420px; box-shadow: 0 8px 40px rgba(0,0,0,.2); }
.modal-box--w400 { max-width: 400px; box-shadow: 0 8px 40px rgba(0,0,0,.2); }

.toast-copy-btn {
  background: rgba(255,255,255,.2);
  border: none;
  color: white;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 10px;
  vertical-align: middle;
  flex-shrink: 0;
}
.toast-copy-btn:hover { background: rgba(255,255,255,.35); }

.toast.show {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toast span {
  white-space: pre-line;
}
.btn-row-inline {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.radio-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-sec);
  cursor: pointer;
}

.radio-inline input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--bp);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   Popup de revisión unificado (errores de Excel + discrepancias)
   ══════════════════════════════════════════════════════════════ */

.revision-fila {
  background: var(--bg);
  border-radius: var(--r);
  border: 1px solid var(--border);
  padding: 1rem;
  margin-bottom: .75rem;
}
.revision-fila--error {
  border-left: 3px solid var(--danger);
}
.revision-fila--corregida {
  border-left: 3px solid var(--success);
  background: var(--success-light);
}
.revision-fila--discrepancia {
  border-left: 3px solid var(--warning);
}

.revision-fila-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}

.revision-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.revision-badge--error {
  background: var(--danger-light);
  color: var(--danger);
}
.revision-badge--ok {
  background: var(--success-light);
  color: var(--success);
}
.revision-badge--discrepancia {
  background: var(--warning-light);
  color: var(--warning);
}

.revision-motivo {
  font-size: 12px;
  color: var(--text-sec);
  flex: 1;
}

.revision-descartar {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-weight: 500;
}
.revision-descartar:hover {
  background: var(--danger-light);
}

.revision-opcion {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.revision-opcion:hover {
  border-color: var(--bp);
}
.revision-opcion--elegida {
  border-color: var(--success);
  background: var(--success-light);
}

/* ══════════════════════════════════════════════════════════════
   Layout compacto de personas — 1 línea por persona, sin labels
   (usado tanto en la lista del paso 2 como en el popup de revisión)
   ══════════════════════════════════════════════════════════════ */

#persons-container:not(:empty) {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 1rem;
}

.person-row-wrap {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.person-row-wrap:last-child {
  border-bottom: none;
}
.person-row-wrap:nth-child(even) {
  background: var(--bg);
}

.person-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.person-num-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--bp);
  background: var(--bpl);
  padding: 3px 8px;
  border-radius: 10px;
  min-width: 14px;
  text-align: center;
}

.person-input {
  height: 32px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  color: var(--text);
  min-width: 0;
}
.person-input:focus {
  outline: none;
  border-color: var(--bp);
  box-shadow: 0 0 0 3px rgba(var(--bp-rgb),.12);
}
.person-input.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(216,90,48,.12);
}
.person-input--nombre { flex: 1 1 200px; }
.person-input--fecha  { flex: 0 0 150px; }
.person-input--dni    { flex: 0 0 130px; }

.person-icon-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.person-icon-btn:hover {
  background: var(--bg);
}
.person-icon-btn--search { color: var(--bp); }
.person-icon-btn--remove { color: var(--danger); }

.person-row-errors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 0 0 32px;
}
.person-row-errors:empty {
  display: none;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
  display: inline-block;
}

.exp-status{
  display:flex;align-items:center;gap:8px;
  font-size:13px;margin-top:.75rem;padding:8px 12px;
  border-radius:8px;background:var(--bpl);color:var(--bp);
}
.exp-status.exp-status--ok{ background:var(--success-light);color:var(--success); }
/* Combinado con .hidden — mismo motivo que .loading-overlay.hidden más
   arriba. Bug encontrado y arreglado 15/07/2026. */
.exp-status.hidden{ display:none; }

.overlay-carga{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(44,44,42,.55);
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.overlay-carga-box{
  background: var(--card);
  border-radius:14px;
  padding:2rem 2.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.overlay-carga-box i{
  font-size:32px;
  color:var(--bp);
}
.overlay-carga-box p{
  font-size:14px;
  color:var(--text);
  font-weight:500;
  margin:0;
}

/* Variante "local": en vez de tapar toda la pantalla (position:fixed),
   se contiene dentro de su elemento padre (necesita position:relative
   en el padre, ej. .table-wrap). Se usa para el loading del historial,
   donde no queremos tapar el resto de la página, solo la tabla. */
.overlay-carga--local {
  position: absolute;
  background: rgba(255,255,255,.85);
  z-index: 10;
  border-radius: inherit;
}

/* ── Paginación del historial ── */
.db-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
/* Combinado con .hidden — mismo motivo que .loading-overlay.hidden más
   arriba. Bug encontrado y arreglado 15/07/2026. */
.db-pagination.hidden { display: none; }
.db-pag-info {
  font-size: 13px;
  color: var(--text-sec);
  font-weight: 500;
  min-width: 120px;
  text-align: center;
}
.btn-sec--sm {
  padding: 6px 12px;
  font-size: 12px;
}
.btn-sec--sm:disabled {
  opacity: .4;
  cursor: not-allowed;
}

#step2-vigencia-desde,
#step2-vigencia-hasta {
  margin: 0px 5px;
}

/* ── Toggle maestro de personas (Mantenimiento) ─────────────────────────── */
.toggle-maestro-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.toggle-maestro-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.btn-toggle-maestro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.toggle-maestro-track {
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--border-input);
  position: relative;
  transition: background .2s;
}

.btn-toggle-maestro[data-activo="1"] .toggle-maestro-track {
  background: var(--color-accent-text);
}

.toggle-maestro-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: left .2s;
}

.btn-toggle-maestro[data-activo="1"] .toggle-maestro-thumb {
  left: 23px;
}

.toggle-maestro-texto {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-text);
  min-width: 24px;
}

.btn-toggle-maestro[data-activo="0"] .toggle-maestro-texto {
  color: var(--text-sec);
}


/* ── Reset password ── */
.rp-success-icon {
  color: var(--success);
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}
.btn-primary--link {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 1.5rem;
}

.err--visible { display: block; }