/* Puente de acceso y nómina (nomina.proher.app) con la línea de proher.app. Fuente: plataforma-phn/tema/puentes/acceso.css.
   Se carga DESPUÉS de style.css: sus variables pasan a leer los tokens --phn-* del tema elegido en Personalizar.
   Aquí --verde es el verde de RELLENO y --verde-texto el de texto. */
:root:root {
  --fondo: var(--phn-bg);
  --campo: var(--phn-neutral-bg);
  --blanco: var(--phn-surface);
  --tinta: var(--phn-text);
  --oscuro: var(--phn-text);
  --tinta-3: var(--phn-text-2);
  --linea: var(--phn-border);
  --verde: var(--phn-accent);
  --verde-sobre: var(--phn-on-accent);
  --verde-texto: var(--phn-accent-text);
  --verde-tinte: var(--phn-accent-soft);
  --verde-tinte-texto: var(--phn-accent-soft-text);
  --foco: var(--phn-focus);
  --rojo: var(--phn-danger-fg);
  --ambar: var(--phn-warn-fg);
  --azul: var(--phn-info-fg);
  --radio: var(--phn-radius-card);
  --radio-sm: var(--phn-radius-field);
  --sombra: var(--phn-shadow-card);
  --fuente: var(--phn-font);
}
.btn--primario { border-radius: calc(var(--phn-radius-card) - 6px); min-height: 50px; }
.login { border-radius: var(--phn-radius-card); box-shadow: var(--phn-shadow-card); }

/* ── Espacio (2026-11-04): menos aire, más filas a la vista; escala con Densidad de Personalizar ── */
.main { padding: calc(24px * var(--phn-space,1)); }
.vista__head { margin-bottom: calc(14px * var(--phn-space,1)); }
.vista__titulo { font-size: 30px; }
.tabla-caja { padding: calc(4px * var(--phn-space,1)) calc(18px * var(--phn-space,1)) calc(8px * var(--phn-space,1)); }
.tabla th { padding: calc(10px * var(--phn-space,1)) calc(10px * var(--phn-space,1)); }
.tabla td { padding: calc(9px * var(--phn-space,1)) calc(10px * var(--phn-space,1)); }
.tabla__vacia td { padding: calc(24px * var(--phn-space,1)); }
.empresa { margin-bottom: calc(24px * var(--phn-space,1)); }
.alta { padding: calc(16px * var(--phn-space,1)); margin-bottom: calc(14px * var(--phn-space,1)); }
.informe { padding: calc(18px * var(--phn-space,1)); }
@media (max-width: 720px) {
  .main { padding: calc(16px * var(--phn-space,1)); }
  .vista__titulo { font-size: 26px; }
  .tabla-caja { padding: calc(4px * var(--phn-space,1)) calc(14px * var(--phn-space,1)) calc(8px * var(--phn-space,1)); }
  .login { padding: calc(24px * var(--phn-space,1)); }
}
@media (min-width: 1024px) {
  #view-panel.is-active { padding-left: 264px; }
  .topbar { width: 264px; padding: calc(20px * var(--phn-space,1)) calc(14px * var(--phn-space,1)); gap: calc(16px * var(--phn-space,1)); background: var(--phn-surface-nav); }
  .main { max-width: 1180px; padding: calc(28px * var(--phn-space,1)) calc(32px * var(--phn-space,1)) calc(40px * var(--phn-space,1)); }
  .fechas { padding-left: max(32px, calc((100% - 1180px) / 2 + 32px)); }
  #registros-personas:not([hidden]) { gap: calc(16px * var(--phn-space,1)); }
}
@media (min-width: 1500px) {
  .main { max-width: 1320px; }
  .fechas { padding-left: max(32px, calc((100% - 1320px) / 2 + 32px)); }
  #registros-personas:not([hidden]) { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}

/* ══ Modo oscuro (2026-11-04): estilos Oscuro y Grafito ══ */
:root:root[data-modo="oscuro"] {
  color-scheme: dark;
  --verde-fuerte: color-mix(in srgb, var(--phn-accent) 85%, #000);
  --tinta-2: color-mix(in srgb, var(--phn-text) 55%, var(--phn-text-2));
  --linea-2: var(--phn-border-strong);
}
[data-modo="oscuro"] .topbar { background: var(--phn-surface-nav); }
[data-modo="oscuro"] .pestanas { background: var(--phn-neutral-bg); }
@media (max-width: 1023px) {
  [data-modo="oscuro"] .pestanas { background: var(--phn-surface-nav); }
}
[data-modo="oscuro"] .tabla th { color: var(--phn-text-3); }
[data-modo="oscuro"] .tabla tbody tr:hover { background: var(--phn-surface-2); }
[data-modo="oscuro"] .marca--aviso { background: var(--phn-warn-bg); }
[data-modo="oscuro"] .foto-chip { background: var(--phn-info-bg); }
[data-modo="oscuro"] .foto-chip:hover { background: color-mix(in srgb, var(--phn-info-bg) 80%, var(--phn-info-fg)); }
[data-modo="oscuro"] .campo__error { background: var(--phn-danger-bg); }
[data-modo="oscuro"] .btn--peligro:hover { background: var(--phn-danger-bg); }
[data-modo="oscuro"] .toast.is-error { background: var(--phn-danger-solid); color: var(--phn-on-danger); }
[data-modo="oscuro"] .visor { background: rgba(0,0,0,.65); }
[data-modo="oscuro"] dialog.hoja::backdrop { background: rgba(0,0,0,.65); }