/* ==========================================================================
   Control Horario — Sistema visual (Rediseño UX/UI Global v1)

   Archivo único (app.css), CSS vanilla, sin frameworks, sin CDN, sin
   fuentes remotas, sin @import externo, sin iconos externos. Servido
   desde el mismo origen (public/assets/css/app.css), compatible sin
   cambios con la CSP ya vigente ("default-src 'self'"): no depende de
   'unsafe-inline' en ningún directivo.

   Validado primero en /admin/consulta como pantalla piloto (decisiones
   aprobadas el 2026-07-29) y extendido después, en la misma versión de
   este archivo, a toda la aplicación: pantallas de Empleado (/fichar,
   /historial), las ocho pantallas administrativas, /login y las
   pantallas de sistema (errores, /health) — Extensión Global del
   Sistema Visual, decisiones aprobadas el 2026-07-29.

   Convenciones:
   - Variables (custom properties) como única fuente de verdad para
     color, tipografía, espaciado y radios.
   - Sin !important, salvo la excepción justificada de
     prefers-reduced-motion (sección 17).
   - Sin animaciones ni transiciones decorativas.
   - El foco visible del navegador nunca se suprime.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Variables — tokens del sistema visual
   -------------------------------------------------------------------- */
:root {
  /* Tipografía: pila de fuentes de sistema, sin fuentes remotas. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: 1.75rem;
  --fs-h2: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-body: 1.5;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Ancho máximo de contenido */
  --content-max: 1100px;

  /* Bordes y radios */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Color base (contraste verificado contra AA) */
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1f2933;
  --color-muted: #52606d;
  --color-border: #d7dce1;
  --color-border-interactive: #5b6572;

  /* Color primario */
  --color-primary: #1d4ed8;
  --color-primary-hover: #1e40af;
  --color-primary-contrast: #ffffff;

  /* Color secundario */
  --color-secondary-bg: #f1f5f9;
  --color-secondary-bg-hover: #e2e8f0;
  --color-secondary-text: #1f2933;

  /*
   * Color de peligro: definido para el sistema completo (botones
   * .btn-danger, propuesto en la auditoría UX/UI aprobada). Sin uso
   * en este piloto, que es de solo lectura y no tiene ninguna acción
   * destructiva.
   */
  --color-danger: #b91c1c;
  --color-danger-hover: #991b1b;
  --color-danger-bg: #fef2f2;

  /* Estados semánticos (usados por role="alert"/role="status" y badges) */
  --color-success-text: #166534;
  --color-success-bg: #f0fdf4;
  --color-warning-text: #92400e;
  --color-warning-bg: #fffbeb;

  /* Foco */
  --color-focus: #1d4ed8;
}

/* --------------------------------------------------------------------
   2. Reset mínimo (no agresivo: solo box-sizing y márgenes base)
   -------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2 {
  line-height: 1.25;
}

h1 {
  font-size: var(--fs-h1);
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: var(--fs-h2);
  margin: var(--space-5) 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-3);
}

small {
  color: var(--color-muted);
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-hover);
}

/*
 * Foco visible: nunca se suprime. Es la única forma de no empeorar la
 * accesibilidad de teclado que hoy ya funciona por comportamiento
 * nativo del navegador (auditoría UX/UI, apartado A.14).
 */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   3. Layout de página
   -------------------------------------------------------------------- */
.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

/*
 * Variante estrecha y centrada: login y pantallas de sistema (errores,
 * /health). Mismo componente .page, ancho máximo reducido para
 * contenido breve y centrado (instrucción: "contenedor claro y
 * centrado" para login).
 */
.page--narrow {
  max-width: 480px;
}

/* --------------------------------------------------------------------
   4. Cabecera compartida (templates/partials/header.php)
   Presente en toda pantalla autenticada. Ausente en login y en las
   pantallas de sistema (errores, /health).
   -------------------------------------------------------------------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-text);
  color: var(--color-primary-contrast);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-header__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-body);
}

.app-header .logout-form {
  margin: 0;
}

/* --------------------------------------------------------------------
   5. Navegación (templates/partials/nav_admin.php y nav_empleado.php)
   Mismo tratamiento visual para ambas: reglas compartidas mediante
   selector múltiple para no duplicar declaraciones.
   -------------------------------------------------------------------- */
.nav-admin,
.nav-empleado {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.nav-admin__link,
.nav-empleado__link {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-secondary-text);
  font-size: var(--fs-small);
}

.nav-admin__link:hover,
.nav-empleado__link:hover {
  background-color: var(--color-secondary-bg-hover);
  color: var(--color-primary-hover);
}

.nav-admin__link[aria-current="page"],
.nav-empleado__link[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}

.nav-admin__link[aria-current="page"]:hover,
.nav-empleado__link[aria-current="page"]:hover {
  color: var(--color-primary-contrast);
}

/* Enlace de vuelta al área de Empleado dentro de nav-admin: mismo
   componente visual, sin tratamiento especial adicional. */
.nav-admin__link--volver {
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  padding-right: var(--space-3);
}

/* --------------------------------------------------------------------
   6. Formularios
   -------------------------------------------------------------------- */
fieldset {
  border: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: var(--fs-body);
}

input[type="text"],
input[type="date"],
input[type="datetime-local"],
input[type="password"],
input[type="number"],
select,
textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 2.5rem;
}

/* --------------------------------------------------------------------
   7. Botones
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  min-height: 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

/* Variante compacta: cabecera compartida (botón "Cerrar sesión") y
   cualquier contexto de espacio reducido. */
.btn-small {
  padding: var(--space-1) var(--space-3);
  min-height: 2rem;
  font-size: var(--fs-small);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

.btn-secondary {
  background-color: var(--color-secondary-bg);
  border-color: var(--color-border-interactive);
  color: var(--color-secondary-text);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-bg-hover);
  color: var(--color-secondary-text);
}

/*
 * .btn-danger: acciones que invalidan o desactivan algo ya existente
 * (por ejemplo, Confirmar una corrección de tipo Invalidar/Sustituir,
 * o Desactivar un empleado). Presentación únicamente: no cambia qué
 * hace el botón, solo cómo se distingue visualmente de una acción
 * puramente aditiva.
 */
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-primary-contrast);
}

.btn-danger:hover {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

/* Agrupa varias acciones de una misma fila de tabla (sustituye a los
   antiguos style="display:inline"). */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.row-actions form {
  margin: 0;
}

/* --------------------------------------------------------------------
   8. Mensajes
   -------------------------------------------------------------------- */
[role="alert"] {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger);
}

[role="status"] {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-text);
  border-radius: var(--radius-md);
  color: var(--color-success-text);
}

.hint {
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.empty-state {
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border-interactive);
  border-radius: var(--radius-md);
  color: var(--color-muted);
}

.result-summary {
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* --------------------------------------------------------------------
   9. Tablas
   -------------------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-4);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

thead th {
  background-color: var(--color-surface);
  font-size: var(--fs-small);
  color: var(--color-muted);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

td ul {
  margin: 0;
  padding-left: var(--space-4);
}

td li {
  margin-bottom: var(--space-1);
}

td li:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------
   10. Detalles (details/summary nativos — auditoría)
   -------------------------------------------------------------------- */
details {
  margin-top: var(--space-1);
}

summary {
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--fs-small);
}

summary:hover {
  color: var(--color-primary-hover);
}

/* Tabla anidada dentro de <details>: misma tabla, un poco más
   compacta y sin repetir el envoltorio .table-wrapper. */
details table {
  margin-top: var(--space-2);
}

details th {
  background-color: transparent;
  font-weight: 600;
  white-space: normal;
}

/* --------------------------------------------------------------------
   11. Badges (presentación únicamente; el texto lo decide el Controller)
   -------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.1rem var(--space-2);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* --------------------------------------------------------------------
   12. Paginación
   -------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------
   13. Utilidades
   -------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------
   14. Responsive
   Dos breakpoints: móvil (<600px) y tableta/escritorio (>=600px).
   -------------------------------------------------------------------- */
@media (max-width: 599px) {
  .page {
    padding: var(--space-4) var(--space-3) var(--space-5);
  }

  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  /* Los botones agrupados en una fila de tabla (.row-actions) no se
     estiran a ancho completo: harían la fila mucho más alta y menos
     legible que el desbordamiento horizontal ya previsto por
     .table-wrapper. */
  .row-actions .btn {
    width: auto;
  }

  .nav-admin,
  .nav-empleado {
    gap: var(--space-1);
  }

  .app-header {
    justify-content: center;
    text-align: center;
  }

  .app-header .logout-form .btn {
    width: auto;
  }
}

/* --------------------------------------------------------------------
   15. Movimiento reducido
   Excepción justificada al "sin !important": es la única forma de
   garantizar que una animación o transición que se añada en el futuro
   a un componente concreto quede anulada aquí, con independencia de su
   especificidad. Hoy el sistema no define ninguna animación ni
   transición propia, por lo que esta regla actúa como salvaguarda
   preventiva, no como corrección de algo existente.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}