/* ========================================================================
   YaMarca — PWA. Mobile-first. Sin frameworks.
   ======================================================================== */

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
}

/* === Sistema de diseño consolidado (Prompt #15H) ===
 *
 * Paleta neutra slate + primario azul (#2563eb estilo Stripe). Antes
 * había un verde corporativo y greys ad-hoc; ahora hay una sola fuente
 * de verdad. Las variables ALIAS (--bg, --card-bg, --error, --exito,
 * --colacion, --salida, --entrada) preservan retro-compatibilidad: las
 * pantallas que aún las usan no cambian de comportamiento, solo
 * heredan la paleta nueva.
 */
:root {
    /* Primario (azul) */
    --primario: #2563eb;
    --primario-hover: #1d4ed8;
    --primario-active: #1e40af;
    --primario-ring: #93c5fd;
    --primario-bg-suave: #eff6ff;

    /* Estados */
    --presente: #10b981;
    --colacion: #f59e0b;
    --peligro: #dc2626;
    --peligro-hover: #b91c1c;
    --peligro-bg-suave: #fef2f2;
    --inactivo: #6b7280;

    /* Neutros (slate) */
    --bg-app: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-overlay: rgba(15, 23, 42, 0.5);
    --border: #e2e8f0;
    --border-fuerte: #cbd5e1;
    --text: #0f172a;
    --text-muted: #64748b;
    --text-disabled: #94a3b8;

    /* Tipografía */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    /* Sombras (sutiles, neutras) */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
              0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.05),
                 0 2px 4px rgba(15, 23, 42, 0.04);

    /* Radios */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;

    /* Transiciones */
    --transition: 150ms ease;

    /* Aliases retrocompatibles */
    --bg: var(--bg-app);
    --card-bg: var(--bg-card);
    --error: var(--peligro);
    --error-bg: var(--peligro-bg-suave);
    --exito: var(--presente);
    --exito-bg: #ecfdf5;
    --entrada: var(--presente);
    --salida: var(--peligro);
}

body {
    background: var(--bg-app);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 1.875rem; font-weight: 600; line-height: 1.2; margin: 0 0 1rem 0; color: var(--text); }
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; margin: 0 0 0.75rem 0; color: var(--text); }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.5rem 0; color: var(--text); }

a { color: var(--primario); text-decoration: none; }
a:hover { color: var(--primario-hover); text-decoration: underline; }

/* ========================================================================
   Botones unificados (.btn)
   ------------------------------------------------------------------------
   Sistema de clases compositivo: cada botón se arma con
       <button class="btn btn-{primario|secundario|peligro} [btn-sm]">
   `.btn` aporta layout, tamaño, transición y estado :disabled.
   Las variantes solo cambian colores. Reemplaza al ad-hoc CSS inline
   ("padding: 0.5rem 1rem; text-decoration: none; ...") que tenían los
   botones de "+ Nuevo X" en las listas admin.
   ======================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    background: var(--bg-card);
    color: var(--text);
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition);
    user-select: none;
    white-space: nowrap;
    font-family: inherit;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primario-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primario {
    background: var(--primario);
    color: white;
    border-color: var(--primario);
}

.btn-primario:hover:not(:disabled) {
    background: var(--primario-hover);
    border-color: var(--primario-hover);
    color: white;
    text-decoration: none;
}

.btn-secundario {
    background: white;
    color: var(--text);
    border-color: var(--border-fuerte);
}

.btn-secundario:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--text-muted);
    text-decoration: none;
}

.btn-peligro {
    background: white;
    color: var(--peligro);
    border-color: var(--peligro);
}

.btn-peligro:hover:not(:disabled) {
    background: var(--peligro);
    color: white;
    text-decoration: none;
}

/* Variante "ghost": acciones sutiles en headers. */
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background: var(--bg-card-hover);
    color: var(--text);
    text-decoration: none;
}

/* Variante "peligro-suave" (Prompt #15I): Salir y otras acciones de
   cierre. Visible pero no agresiva — el usuario la busca
   ocasionalmente y no es la acción primaria de ninguna pantalla. */
.btn-peligro-suave {
    background: transparent;
    color: var(--peligro);
    border-color: #fecaca;  /* red-200 */
}

.btn-peligro-suave:hover:not(:disabled) {
    background: var(--peligro-bg-suave);
    border-color: #fca5a5;  /* red-300 */
    color: var(--peligro-hover);
    text-decoration: none;
}

.btn-peligro-suave:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.825rem;
}

/* ========================================================================
   Login
   ======================================================================== */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card h1 {
    color: var(--primario);
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.subtitle {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
}

input, select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    margin-top: 0.25rem;
    background: var(--card-bg);
    color: var(--text);
}

input:focus, select:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 2px rgba(26, 135, 84, 0.1);
}

.btn-primary {
    width: 100%;
    padding: 1rem;
    background: var(--primario);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.error {
    color: var(--error);
    background: var(--error-bg);
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* ========================================================================
   Marcar
   ======================================================================== */

.marcar-container {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.header h1 {
    margin: 0;
    font-size: 1.25rem;
    word-break: break-word;
}

.rol {
    margin: 0.125rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primario);
    cursor: pointer;
    font-size: 0.9rem;
    flex-shrink: 0;
    padding: 0.5rem;
}

.header-derecha {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.estado-conexion {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
}

.estado-online { background: var(--exito-bg); color: var(--exito); }
.estado-offline { background: var(--error-bg); color: var(--error); }
.estado-sincronizando { background: #fff3cd; color: #856404; }

.mensaje-info {
    color: #856404;
    background: #fff3cd;
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

/* ========================================================================
   Menú post-login
   ======================================================================== */

.menu-container {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.opciones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.card-opcion {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem;
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.1s;
}

.card-opcion:active {
    transform: scale(0.98);
}

.card-opcion .icono {
    font-size: 2rem;
    line-height: 1;
}

.card-opcion .texto strong {
    display: block;
    font-size: 1rem;
}

.card-opcion .texto span {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ========================================================================
   Sucursal (dashboard supervisor)
   ======================================================================== */

.sucursal-container {
    padding: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.info-actualizacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    gap: 1rem;
}

.info-actualizacion p {
    margin: 0;
    color: var(--text-muted);
}

.lista-trabajadores {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trabajador-fila {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-left: 4px solid transparent;
}

.trabajador-fila.fila-alerta {
    border-left-color: var(--error);
}

.trabajador-nombre strong {
    display: block;
}

.trabajador-nombre span {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.trabajador-jornada {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.trabajador-estado {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* === BADGES (Prompt #15N) ===
 * TODOS los badges comparten la misma base: padding, font-size,
 * line-height, border-radius. Las variantes solo cambian color y
 * fondo — nunca tamaño. La consistencia visual es inviolable: un
 * .badge en cualquier pantalla con cualquier variante se ve idéntico
 * en proporciones. */
.badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--bg);
    color: var(--text);
}

/* Variantes — solo color/fondo. NO TOCAR padding/font-size/etc. */
.badge-presente { background: var(--exito-bg); color: var(--exito); }
.badge-en_colacion { background: #fff3cd; color: #856404; }
.badge-salio { background: var(--bg); color: var(--text-muted); }
.badge-fuera_jornada { background: var(--bg); color: var(--text-muted); }
.badge-no_marco_entrada { background: var(--error-bg); color: var(--error); }
.badge-alerta { background: var(--error); color: white; }
.badge-vigente { background: #dbeafe; color: #1e40af; }
.badge-rol-admin { background: #fef3c7; color: #92400e; }
.badge-rol-supervisor { background: #dbeafe; color: #1e40af; }
.badge-rol-trabajador { background: #f1f5f9; color: var(--text-muted); }
.badge-tipo-sucursal { background: #ede9fe; color: #5b21b6; }
.badge-tipo-jornada { background: #cffafe; color: #155e75; }

.trabajador-ultima {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.sin-data {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

/* ========================================================================
   Regularizar
   ======================================================================== */

.regularizar-container {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.ayuda {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    margin-top: 0.25rem;
    resize: vertical;
    background: var(--card-bg);
    color: var(--text);
}

textarea:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 2px rgba(26, 135, 84, 0.1);
}

/* ========================================================================
   Admin (dashboard de tarjetas + placeholders)
   ======================================================================== */

.admin-container {
    padding: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.admin-placeholder-container {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.tarjetas-admin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (min-width: 600px) {
    .tarjetas-admin {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .tarjetas-admin {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.tarjeta-admin {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem;
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
    border: 1px solid transparent;
}

.tarjeta-admin:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--primario);
}

.tarjeta-admin:active {
    transform: translateY(0);
}

.tarjeta-admin .tarjeta-icono {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}

.tarjeta-admin .tarjeta-data {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tarjeta-admin .tarjeta-data strong {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.tarjeta-admin .tarjeta-data .numero {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}

.tarjeta-admin .tarjeta-data .detalle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ========================================================================
   Listas admin (CRUD): cards en mobile, tabla en desktop
   ======================================================================== */

.admin-lista-container {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.admin-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

@media (min-width: 768px) {
    .admin-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.admin-toolbar .filtros {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.admin-toolbar .busqueda {
    flex: 1;
    max-width: 400px;
}

.admin-toolbar input[type="search"],
.admin-toolbar select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text);
}

.admin-toolbar .filtro-toggle {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.admin-toolbar .filtro-toggle button {
    background: transparent;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.admin-toolbar .filtro-toggle button.activo {
    background: var(--primario);
    color: white;
}

.admin-lista-items {
    display: grid;
    gap: 0.5rem;
}

.admin-lista-item {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-lista-item.fila-inactiva {
    opacity: 0.55;
}

.admin-lista-item .item-titulo {
    font-weight: 600;
    color: var(--text);
}

.admin-lista-item .item-subtitulo {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.admin-lista-item .item-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.admin-lista-item .item-acciones a,
.admin-lista-item .item-acciones button {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
}

.admin-lista-item .item-acciones .accion-peligro {
    color: var(--error);
    border-color: var(--error);
}

.admin-lista-item .item-acciones .accion-success {
    color: var(--exito);
    border-color: var(--exito);
}

/* Activo / Inactivo — solo color. La base .badge define padding/etc.
 * Antes (Prompt #15J y previos) tenían padding/font-size/border-radius
 * propios, lo que rompía la consistencia con .badge-rol-* y .badge-vigente.
 * Prompt #15N: limpieza definitiva. */
.badge-activo {
    background: #dcfce7;
    color: #166534;
}

.badge-inactivo {
    background: #f1f5f9;
    color: var(--text-muted);
}

.sin-data {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 10px;
}

@media (min-width: 768px) {
    .admin-lista-items.como-tabla {
        display: table;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: var(--card-bg);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .admin-lista-items.como-tabla .header-tabla,
    .admin-lista-items.como-tabla .admin-lista-item {
        display: table-row;
    }
    .admin-lista-items.como-tabla .admin-lista-item {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        flex-direction: row;
        gap: 0;
    }
    .admin-lista-items.como-tabla .admin-lista-item > * {
        display: table-cell;
        padding: 0.75rem;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
    .admin-lista-items.como-tabla .header-tabla > * {
        display: table-cell;
        padding: 0.75rem;
        background: var(--bg);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.85rem;
        text-align: left;
        border-bottom: 2px solid var(--border);
    }
}

/* ========================================================================
   Forms admin
   ======================================================================== */

.admin-form-container {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.admin-form-container .acciones-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.admin-form-container .acciones-form .btn-secundario {
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
    text-align: center;
    display: inline-block;
}

.admin-form-container .acciones-form .btn-peligro {
    background: var(--card-bg);
    color: var(--error);
    border-color: var(--error);
}

.admin-form-container .acciones-form .btn-exito {
    background: var(--exito-bg);
    color: var(--exito);
    border-color: var(--exito);
}

/* Días de la semana checkboxes (form de jornada) */
.dias-checkboxes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.dias-checkboxes label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    margin: 0;
    font-weight: 400;
}

.dias-checkboxes label input {
    margin: 0;
    width: auto;
}

.dias-checkboxes label.dia-activo {
    background: var(--exito-bg);
    color: var(--exito);
    border-color: var(--exito);
    font-weight: 600;
}

/* Detalle asignaciones */
.bloque-asignacion {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.bloque-asignacion h2 {
    margin-top: 0;
    font-size: 1rem;
}

.historial-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.historial-item:last-child {
    border-bottom: none;
}

.historial-item .vigente {
    color: var(--exito);
    font-weight: 600;
}

.sucursal-selector {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.sucursal-selector label {
    margin: 0;
}

.botones-marcar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.btn-grande {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 0.5rem;
    min-height: 110px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.1s;
    color: var(--text);
}

.btn-grande:active {
    transform: scale(0.97);
}

.btn-grande:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-grande .icono {
    font-size: 1.75rem;
    line-height: 1;
}

.btn-grande .label {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
}

.btn-entrada {
    border-color: var(--entrada);
    color: var(--entrada);
}

.btn-salida {
    border-color: var(--salida);
    color: var(--salida);
}

.btn-colacion-inicio,
.btn-colacion-fin {
    border-color: var(--colacion);
    color: var(--colacion);
}

.estado {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 12px;
}

.ultima-marcacion p {
    margin: 0 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ultima-marcacion strong {
    color: var(--text);
    font-size: 1rem;
}

.mensaje-exito {
    color: var(--exito);
    background: var(--exito-bg);
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

.mensaje-error {
    color: var(--error);
    background: var(--error-bg);
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

/* ========================================================================
   Operación en vivo (Prompt #16A)
   ------------------------------------------------------------------------
   Reusa `.lista-trabajadores`, `.trabajador-fila`, `.badge-*` del dashboard
   del supervisor (sucursal.html). Acá agregamos solo la toolbar (selector
   + refrescar + meta) y la grilla de KPIs.
   ======================================================================== */

/* Selector de sucursal cuando vive en `.page-header-actions` (Prompt #15K).
   Sin `width: 100%` global de inputs/select — el dropdown debe quedar
   horizontal junto al botón Refrescar, no expandir toda la fila. */
.page-header-actions .select {
    width: auto;
    min-width: 220px;
    margin-top: 0;
}

.kpis-operacion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .kpis-operacion {
        grid-template-columns: repeat(5, 1fr);
    }
}

.kpi-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-left: 3px solid transparent;
}

.kpi-card .kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-card .kpi-valor {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}

.kpi-card.alerta {
    border-left-color: var(--peligro);
}

.kpi-card.alerta .kpi-valor {
    color: var(--peligro);
}

/* ========================================================================
   Operación: vista "Todas las sucursales" + donut grande + timeline
   (Prompt #16B)
   ======================================================================== */

.operacion-kpis-grande {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

@media (min-width: 900px) {
    .operacion-kpis-grande {
        grid-template-columns: 1fr auto;
    }
}

.donut-grande-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--card-bg);
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Grilla de sucursales (vista "Todas") */
.grilla-sucursales {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 600px) {
    .grilla-sucursales {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .grilla-sucursales {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tarjeta-sucursal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
    text-align: center;
    width: 100%;
    font-family: inherit;
    color: var(--text);
}

.tarjeta-sucursal:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--primario);
}

.tarjeta-sucursal h3 {
    margin: 0;
    font-size: 1rem;
}

.tarjeta-sucursal-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tarjeta-sucursal-meta strong {
    font-size: 1.25rem;
    color: var(--primario);
}

.tarjeta-sucursal-extra {
    margin-top: 0.25rem;
}

/* Timeline horario */
.timeline-section {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.timeline-section h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.timeline-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.timeline-eje {
    display: flex;
    justify-content: space-between;
    padding-left: 8rem;  /* alinea con el inicio de los tracks (ver fila) */
    border-bottom: 1px dashed var(--border);
    padding-bottom: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.timeline-fila {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;
}

.timeline-nombre {
    font-size: 0.8rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-track {
    position: relative;
    height: 20px;
    background: var(--bg);
    border-radius: 4px;
}

.timeline-marca {
    position: absolute;
    top: 2px;
    width: 6px;
    height: 16px;
    border-radius: 2px;
    transform: translateX(-50%);
    cursor: help;
}

.marca-entrada { background: #1a8754; }
.marca-inicio_colacion { background: #fd7e14; }
.marca-fin_colacion { background: #fbbf24; }
.marca-salida { background: #dc2626; }

.timeline-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.timeline-leyenda .leyenda-cuadro {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* ========================================================================
   Reportes mensuales (Prompt #16B)
   ======================================================================== */

/* Modo vista previa de reportes (Prompt #15N) — sin wrapper card,
 * las secciones (banner, gráficos, tablas) viven directamente en el
 * container con espaciado vertical consistente. */
.reporte-vista-previa {
    margin-top: 0;
}

.banner-parcial {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
}

.reporte-graficos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0;
}

@media (min-width: 768px) {
    .reporte-graficos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === REPORTE CARD (Prompt #15O) === Hermano visual del .form-card:
 * mismo padding, border-radius, shadow, border. Diferente clase porque
 * semánticamente es un container de display, no de form. Cada sección
 * de la vista previa (gráficos, tabla, no-contratados) vive en su
 * propio .reporte-card para que las 3 cards se vean hermanas. */
.reporte-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .reporte-card { padding: 1.5rem; }
}

.reporte-card-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.reporte-card-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

/* Línea meta del trabajador (tipo · sucursal · jornada) en reporte
 * individual. Reemplaza el uso ad-hoc de `.ayuda` con un estilo
 * dedicado y márgenes consistentes con la sección. */
.reporte-meta-trabajador {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

/* Wrapper de scroll horizontal para tablas anchas. Standalone (sin
 * .reporte-card padre) tiene su propio fondo/borde/shadow. Dentro
 * de un .reporte-card pierde esos estilos y se extiende a los bordes
 * con margins negativos para que el scroll abarque todo el card. */
.reporte-tabla-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow);
}

.reporte-tabla-wrap .reporte-tabla-dias,
.reporte-tabla-wrap .reporte-tabla-resumen {
    margin: 0;
}

.reporte-card .reporte-tabla-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 -2rem -2rem -2rem;
    padding: 0 2rem 2rem 2rem;
}

@media (max-width: 640px) {
    .reporte-card .reporte-tabla-wrap {
        margin: 0 -1.5rem -1.5rem -1.5rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
}

/* Grafico-card dentro de reporte-card pierde su shadow propio para
 * evitar el efecto "doble elevación". El reporte-card ya da elevación;
 * el grafico solo necesita su fondo gris suave para diferenciarse. */
.reporte-card .grafico-card {
    box-shadow: none;
}

/* Acordeón de detalle por trabajador (vista sucursal) — asegurar que
 * mantiene separación con el resumen de arriba cuando vive dentro
 * del reporte-card. */
.reporte-card .acordeon-trabajador {
    margin-top: 1rem;
}

/* Selectables y otros elementos del modo selección dentro de un
 * .form-field necesitan un toggle-group que ocupe el espacio
 * disponible (no fit-content como por default). */
.form-field .toggle-group {
    width: 100%;
    max-width: 360px;
}

@media (max-width: 480px) {
    .form-field .toggle-group {
        max-width: none;
    }
}

/* Tarjeta de gráfico (Prompt #15I): estilo PowerPoint corporativo —
   fondo gris suave que da identidad de "zona de visualización" + borde
   sutil + sin sombra. Título limpio (no uppercase). */
.grafico-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: none;
}

.grafico-card h3 {
    margin: 0 0 1.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}

/* Contenedor con altura fija — Chart.js requiere un parent con
   dimensiones explícitas para que `responsive: true` funcione. */
.grafico-canvas-container {
    position: relative;
    height: 240px;
}

.reporte-tabla-dias,
.reporte-tabla-resumen {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.reporte-tabla-dias th,
.reporte-tabla-dias td,
.reporte-tabla-resumen th,
.reporte-tabla-resumen td {
    border: 1px solid var(--border);
    padding: 0.4rem 0.5rem;
    text-align: left;
}

.reporte-tabla-dias th,
.reporte-tabla-resumen th {
    background: #e5e7eb;
    font-weight: 600;
    text-align: center;
    font-size: 0.75rem;
}

.reporte-tabla-dias .fila-no-pactada td {
    background: #f3f4f6;
    color: var(--text-muted);
}

/* Días con ausencia justificada (Prompt #16D): tinte azul claro para
 * que se distingan visualmente del resto. La fila no se "vacía" — las
 * marcaciones reales (si hubo) siguen visibles para auditoría. */
.reporte-tabla-dias .fila-ausencia td {
    background: #eff6ff;
}

/* Días feriados (Prompt #32b → diferenciados en #32d).
 * - Irrenunciable: amarillo oscuro, día NO laboral por ley (gris efectivo
 *   en el reporte, sin alerta) para todos excepto DUEÑO_OPERADOR.
 * - Normal: amarillo claro, día laboral común con badge informativo.
 *   Si el trabajador marcó, alerta legal de recargo del 50%.
 */
.reporte-tabla-dias .fila-feriado td {
    background: #fef3c7;
}
.reporte-tabla-dias .fila-feriado-irrenunciable td {
    background: #fde68a;  /* amarillo más oscuro */
}
.reporte-tabla-dias .fila-feriado-trabajado td {
    background: #fef9c3;
    border-left: 3px solid #eab308;
}

.badge-feriado {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}
.badge-feriado-irrenunciable {
    background: #fde68a;
    color: #78350f;
    border: 1px solid #f59e0b;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.alerta-recargo-legal {
    color: #92400e;
    font-weight: 500;
    font-size: 0.85em;
    display: block;
    margin-top: 4px;
}
.alerta-recargo-legal::before {
    content: "⚠️ ";
}

/* Modales de geolocalización (Prompt #34). */
.instrucciones-navegador {
    margin: 16px 0;
}
.instrucciones-navegador h3 {
    font-size: 14px;
    margin-bottom: 8px;
    color: #0f172a;
}
.instrucciones-navegador details {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 6px;
}
.instrucciones-navegador summary {
    cursor: pointer;
    font-weight: 500;
    color: #1e40af;
    padding: 4px 0;
}
.instrucciones-navegador ol {
    margin: 8px 0 4px 24px;
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
}

.geo-info-list {
    margin: 12px 0;
    padding: 0;
}
.geo-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}
.geo-info-row:last-child {
    border-bottom: none;
}
.geo-info-row dt {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}
.geo-info-row dd {
    margin: 0;
    color: #dc2626;
    font-size: 14px;
}
.geo-info-row dd strong {
    font-size: 16px;
}

/* Distancia en marcaciones del reporte (Prompt #34). */
.distancia-marcacion {
    font-size: 11px;
    color: #6b7280;
    display: inline-block;
    margin-left: 4px;
}
.distancia-marcacion.cercana { color: #16a34a; }
.distancia-marcacion.media { color: #ca8a04; }
.distancia-marcacion.lejana { color: #dc2626; }
.marcacion-legacy {
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Calendario de feriados próximos (Prompt #32d) — grid en operación. */
.feriados-proximos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px 0;
}
.feriado-tarjeta {
    position: relative;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid transparent;
    cursor: help;
}
.feriado-tarjeta.feriado-irrenunciable {
    background: #fde68a;
    border-color: #f59e0b;
}
.feriado-tarjeta.feriado-normal {
    background: #fef9c3;
    border-color: #fde68a;
}
.feriado-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.9em;
}
.feriado-fecha {
    font-size: 12px;
    color: #64748b;
    text-transform: capitalize;
}
.feriado-nombre {
    font-weight: 600;
    color: #0f172a;
    margin-top: 2px;
}
.feriado-etiqueta {
    font-size: 11px;
    color: #78350f;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Modal aprobar ausencia: tabla compacta saldo (Prompt #32b). */
.vacaciones-summary {
    margin: 0 0 1rem 0;
    padding: 0;
}
.vacaciones-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}
.vacaciones-summary-row:last-child {
    border-bottom: none;
    font-weight: 600;
}
.vacaciones-summary-row dt {
    margin: 0;
    color: #64748b;
}
.vacaciones-summary-row dd {
    margin: 0;
    color: #0f172a;
}
.vacaciones-summary-negativo dd {
    color: #dc2626;
}
.checkbox-confirmacion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
}
.checkbox-confirmacion input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Preview en vivo de días hábiles en solicitar ausencia. */
.preview-dias-habiles {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 12px;
    font-size: 14px;
}
.preview-dias-habiles strong {
    color: #1e3a8a;
}

.reporte-tabla-dias .reporte-totales td {
    background: #dbeafe;
    font-weight: 600;
}

.reporte-notas-pie {
    background: #fff8e6;
    border-left: 3px solid #f59e0b;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.reporte-notas-pie h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.reporte-notas-pie ul {
    margin: 0;
    padding-left: 1.25rem;
}

.acordeon-trabajador {
    background: var(--bg);
    border-radius: 6px;
    padding: 1rem;
    margin: 0.75rem 0;
}

.acordeon-trabajador h4 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

@media print {
    /* Ocultar controles interactivos en impresión: las acciones del
       header (descargar/imprimir/cambiar selección) y headers viejos
       que pudieran quedar. Lo que importa al imprimir es el contenido
       del reporte. */
    .page-header-actions,
    .header { display: none !important; }
    .reporte-vista-previa { box-shadow: none; padding: 0; }
}


/* ========================================================================
   DESIGN SYSTEM v2 (Prompt #15H)
   ------------------------------------------------------------------------
   Clases nuevas para el rediseño del panel admin. Aditivas: las clases
   viejas siguen funcionando (los aliases CSS variable mantienen los
   colores). Las pantallas se migran de a poco usando estas clases.
   ======================================================================== */

/* -------- Containers & headers -------- */

.admin-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
}

@media (max-width: 640px) {
    .admin-page { padding: 1rem; }
}

.page-header {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.page-header h1 {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.page-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-subtitle {
    color: var(--text-muted);
    margin: 0.375rem 0 0 0;
    font-size: 0.95rem;
}

/* Acciones a la derecha del título (dropdown + botones del header).
   Prompt #15K. Si el header tiene varias acciones (operación, vista
   previa de reportes), agruparlas en este wrapper para que floten
   alineadas horizontalmente y se acomoden bien en mobile. */
.page-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .page-header {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
    .page-header-inner { align-items: flex-start; }
}

@media (max-width: 768px) {
    .page-header-actions {
        width: 100%;
        margin-top: 0.75rem;
    }
    .page-header-actions .select {
        flex: 1;
    }
}

/* -------- Header global con navegación -------- */

.app-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    font-size: 1rem;
}

.app-brand:hover {
    text-decoration: none;
    color: var(--primario);
}

.app-brand-logo {
    color: var(--primario);
    font-size: 1.25rem;
    line-height: 1;
}

.app-nav {
    display: flex;
    gap: 0.25rem;
    flex: 1;
}

.app-nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.app-nav-link:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    text-decoration: none;
}

.app-nav-link.active {
    background: var(--primario-bg-suave);
    color: var(--primario);
}

.app-header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-user-name {
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .app-header-inner { flex-wrap: wrap; gap: 0.75rem; padding: 0.625rem 1rem; }
    .app-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
    .app-user-name { display: none; }
}

/* -------- Stats grid (dashboard) -------- */

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(5, 1fr); }
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
}

.stat-card-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.stat-card-value {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}

.stat-card-meta {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* -------- Action cards (dashboard "Gestión") -------- */

.action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .action-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .action-grid { grid-template-columns: repeat(3, 1fr); }
}

.action-card {
    /* Layout horizontal con icono a la izquierda (Prompt #15I).
       El emoji vive dentro de un cuadradito con fondo azul suave para
       contención visual: emoji suelto se ve "sticker", emoji en su slot
       se ve "ícono UI". */
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition),
                transform var(--transition);
}

.action-card:hover {
    border-color: var(--primario);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--text);
    transform: translateY(-1px);
}

.action-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primario-bg-suave);
    border-radius: var(--radius-md);
    font-size: 1.75rem;
    line-height: 1;
}

.action-card-content {
    flex: 1;
    min-width: 0;
}

.action-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.action-card-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* -------- Filtros / inputs base -------- */

.filters-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.input,
.select {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--border-fuerte);
    border-radius: var(--radius);
    background: white;
    color: var(--text);
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus,
.select:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px var(--primario-ring);
}

.input::placeholder { color: var(--text-disabled); }

/* -------- Tabla de datos (lista admin) -------- */

.data-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

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

.data-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-app);
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: top;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-card-hover); }

.data-table .numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.row-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* -------- Form card -------- */

/* === FORM CARD (Prompt #15N) === Centrado horizontal con max-width
 * 720px — forms más anchos generan inputs demasiado largos que
 * dificultan la lectura. */
.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    max-width: 720px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .form-card {
        padding: 1.5rem;
        margin: 0;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .form-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Campos que ocupan toda la fila — emails largos, textareas, días
 * de la semana. */
.form-field-full {
    grid-column: 1 / -1;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0;
}

/* Inputs con altura uniforme para todos los tipos (text, date, time,
 * email, password, number, select, textarea). Antes type="date" se
 * veía más alto que type="text" por defaults del navegador. */
.form-field input,
.form-field select,
.form-field textarea {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-fuerte);
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.5;
    font-family: inherit;
    color: var(--text);
    background: white;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}

.form-field textarea {
    min-height: 100px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px var(--primario-ring);
}

.form-field input:disabled,
.form-field input[readonly],
.form-field select:disabled {
    background: var(--bg-app);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-field .field-help,
.form-field small {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.form-actions {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Botones del action bar con tamaño visual mínimo uniforme. */
.form-actions .btn {
    min-width: 120px;
    justify-content: center;
}

/* -------- Toggle pills (selector mutuamente excluyente) --------
   Patrón estilo Stripe / Linear: dos pestañas adyacentes que se tocan,
   activa con fondo primario, inactiva neutra. Reemplaza los radio
   buttons nativos en el Prompt #15I (los radios del browser tienen
   estilo Windows imposible de modernizar). */

.toggle-group {
    display: inline-flex;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    gap: 2px;
    width: fit-content;
}

.toggle-pill {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    font-family: inherit;
    white-space: nowrap;
}

.toggle-pill:hover:not(.toggle-pill-active) {
    color: var(--text);
}

.toggle-pill-active {
    background: var(--primario);
    color: white;
    box-shadow: var(--shadow-sm);
}

.toggle-pill:focus-visible {
    outline: 2px solid var(--primario-ring);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .toggle-group { width: 100%; }
    .toggle-pill { flex: 1; }
}

/* -------- Banner amarillo (mes en curso) -------- */

.banner-warn {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--radius);
    padding: 0.875rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #78350f;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    font-size: 0.9rem;
}

/* -------- Reporte: header + totales + observaciones -------- */

.reporte-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.reporte-title {
    font-size: 1.5rem;
    margin: 0 0 0.25rem 0;
}

.reporte-meta {
    color: var(--text-muted);
    margin: 0;
    font-size: 1rem;
}

.reporte-acciones-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.totales-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .totales-grid { grid-template-columns: repeat(4, 1fr); }
}

.totales-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.totales-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.totales-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.obs-cell {
    max-width: 320px;
}

.obs-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.825rem;
    list-style: disc;
}

.obs-list li {
    margin-bottom: 0.2rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.obs-list li:last-child { margin-bottom: 0; }

.fila-no-pactado td {
    background: var(--bg-app);
    color: var(--text-disabled);
}


/* ========================================================================
   PWA TRABAJADOR / SUPERVISOR (Prompt #15L)
   ------------------------------------------------------------------------
   Polish visual de las 5 pantallas trabajador (login, marcar, menu,
   sucursal supervisor, regularizar). Reusa variables del sistema de
   diseño consolidado (#15H–#15K) — mismo `--primario`, mismo
   `--bg-app`, etc. — y agrega clases específicas:
     - `.login-*` para la pantalla de auth.
     - `.trabajador-header` para el header chico de las pantallas
       trabajador/supervisor (no es el header global del admin).
     - `.btn-marcar`, `.marcar-*` para los 4 botones grandes de
       marcación (mín 120px alto).
   ======================================================================== */

/* -------- Login (pre-auth) -------- */

.login-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow);
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* Brand-mark cuadrado redondeado con tick SVG, equivalente al de la
   landing yamarca.cl. 32x32 acá porque es elemento principal del login. */
.login-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primario);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.login-brand-mark svg {
    width: 20px;
    height: 20px;
}

.login-brand-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.login-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin: 0 0 2rem 0;
    font-size: 0.95rem;
}

.login-form {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 0;
}

.login-error {
    background: var(--peligro-bg-suave);
    color: var(--peligro);
    border: 1px solid #fecaca;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
}

.login-footer-text {
    text-align: center;
    color: var(--text-disabled);
    font-size: 0.8125rem;
    margin: 1.5rem 0 0 0;
}

/* -------- Registro público (Prompt #25b) --------
   Reusa .login-wrapper / .login-card / .login-brand del login. Los
   añadidos son: lead, formulario más alto, errores inline por campo,
   checkbox de términos, toggle mostrar/ocultar password y panel
   inline para email no verificado. */

.registro-card {
    max-width: 480px;
}

.registro-lead {
    text-align: center;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
    font-size: 0.875rem;
}

.registro-form {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.registro-error-link {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
}

.registro-error-link a {
    color: var(--peligro);
    text-decoration: underline;
    font-weight: 600;
}

.field-error {
    color: var(--peligro);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0;
}

.input-with-toggle {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-with-toggle .input {
    flex: 1;
    padding-right: 5rem;
}

.input-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.input-toggle:hover {
    color: var(--primario);
}

.checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-inline input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* -------- /registro-pendiente (Prompt #25b) -------- */

.pendiente-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--primario);
}

.pendiente-icon svg {
    width: 56px;
    height: 56px;
}

.pendiente-mensaje {
    text-align: center;
    color: var(--text);
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.pendiente-mensaje strong {
    word-break: break-word;
}

.pendiente-secundario {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin: 0 0 1.5rem 0;
}

.pendiente-feedback {
    margin: 0.5rem 0 1rem 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.pendiente-feedback.exito {
    background: var(--exito-bg);
    color: var(--exito);
    border: 1px solid #a7f3d0;
}

.pendiente-feedback.error {
    background: var(--peligro-bg-suave);
    color: var(--peligro);
    border: 1px solid #fecaca;
}

/* -------- /verificar-email/{token} resultado (Prompt #25b) -------- */

.verif-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.verif-icon svg {
    width: 64px;
    height: 64px;
}

.verif-icon.exito { color: var(--presente); }
.verif-icon.error { color: #f59e0b; }

.verif-titulo {
    text-align: center;
    margin: 0 0 0.75rem 0;
}

.verif-mensaje {
    text-align: center;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
}

/* -------- Banner login verificado / panel email no verificado -------- */

.login-banner-exito {
    background: var(--exito-bg);
    color: var(--exito);
    border: 1px solid #a7f3d0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.login-panel-no-verificado {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.login-panel-no-verificado p {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: #92400e;
}

.login-panel-no-verificado .panel-feedback {
    margin: 0.5rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

[x-cloak] { display: none !important; }

/* -------- Header trabajador / supervisor --------
   Header chico (no global): saludo + chip de estado online/offline +
   botón Salir. Las pantallas trabajador NO acceden al panel admin
   ni necesitan nav Panel/Operación/Reportes; un header dedicado más
   liviano es suficiente. */

.trabajador-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.trabajador-saludo {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.trabajador-saludo strong {
    color: var(--text);
    font-weight: 600;
}

.trabajador-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Chip de conexión online/offline (con dot animado en online) */
.chip-estado-red {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.chip-online { background: #dcfce7; color: #166534; }
.chip-offline { background: #fef3c7; color: #92400e; }

.chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.chip-online .chip-dot {
    background: #22c55e;
    animation: chip-pulse 2s ease-in-out infinite;
}

@keyframes chip-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.chip-badge {
    margin-left: 0.4rem;
    padding-left: 0.4rem;
    border-left: 1px solid currentColor;
    opacity: 0.85;
    font-weight: 500;
}

/* -------- Marcar: layout + selector + 4 botones grandes -------- */

.marcar-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem;
}

.marcar-sucursal {
    margin-bottom: 1.5rem;
}

.marcar-sucursal label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.marcar-sucursal .select {
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-size: 1rem;
}

.marcar-botones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* `.btn-marcar` redefinido (Prompt #15L) — antes era `.btn-grande`.
   Tamaño táctil mínimo 120px alto: contexto farmacia (dedos sucios /
   húmedos) + acción que se hace 4 veces al día → vale la pena el
   espacio. */
.btn-marcar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    padding: 1.25rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
    box-shadow: var(--shadow);
}

.btn-marcar:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-marcar:active:not(:disabled) {
    transform: translateY(0);
}

.btn-marcar:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Emojis (Prompt #15M) en lugar de iconos abstractos: respetan su
   color nativo, no responden a `color:`. El borde del botón sigue
   transmitiendo el estado por color. */
.btn-marcar-icono {
    font-size: 2rem;
    line-height: 1;
}

.btn-marcar-texto {
    line-height: 1.2;
    text-align: center;
}

.btn-marcar-entrada { border-color: #bbf7d0; }
.btn-marcar-colacion { border-color: #fde68a; }
.btn-marcar-vuelta { border-color: #bbf7d0; }
.btn-marcar-salida { border-color: #fecaca; }

/* Acción secundaria de la pantalla marcar (Prompt #16E): atajo a
 * solicitar ausencia. Intencionalmente más sobrio que los 4 botones
 * grandes — fila full-width, padding menor, emoji más chico, sin
 * colores condicionales. Refleja la jerarquía: marcación es la
 * acción cotidiana; solicitar ausencia es eventual. */
.marcar-acciones-secundarias {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Refuerzo visual (Prompt #16F): el diseño sutil del #16E se leía
 * como link. Subimos a "botón firme" — borde fuerte, sombra
 * completa, padding mayor, font-weight 600 — manteniendo la
 * jerarquía vs los 4 botones grandes coloridos (que siguen ganando
 * por tamaño y color). */
.btn-secundario-marcar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border-fuerte);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transition),
                background var(--transition),
                box-shadow var(--transition),
                transform var(--transition);
    box-shadow: var(--shadow);
    cursor: pointer;
}

.btn-secundario-marcar:hover {
    border-color: var(--primario);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--text);
}

.btn-secundario-marcar:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
}

.btn-secundario-marcar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primario-ring);
}

.btn-secundario-icono {
    font-size: 1.5rem;
    line-height: 1;
}

.btn-secundario-texto {
    color: var(--text);
}


.ultima-marcacion-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}

.ultima-marcacion-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.ultima-marcacion-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.1rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 360px) {
    .marcar-botones { grid-template-columns: 1fr; }
}

@media (min-width: 640px) {
    .btn-marcar { min-height: 140px; }
}

/* -------- Menú post-login (SUPERVISOR / ADMIN) -------- */

.menu-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem;
}


/* ========================================================================
   ASIGNACIONES — LISTA + DETALLE (Prompt #15M)
   ------------------------------------------------------------------------
   Pantalla de asignaciones reusando el patrón data-table-card del resto
   de las listas y un layout en cards verticales para el detalle:
   - Card 1: vigentes (sucursal + jornada en grid).
   - Card 2: cambiar sucursal (form).
   - Card 3: cambiar jornada (form).
   - Card 4: historial completo (timeline visual con dots).
   ======================================================================== */

.td-principal {
    font-weight: 500;
    color: var(--text);
}

.row-actions-header {
    text-align: right;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px dashed var(--border-fuerte);
    border-radius: var(--radius-lg);
}

.empty-state p { margin: 0; }

/* Container de las secciones del detalle */
.seccion-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.seccion-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow);
}

/* Énfasis visual en la card más importante (vigentes). */
.seccion-card.seccion-vigentes {
    border-left: 3px solid var(--primario);
}

.seccion-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.seccion-header h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.seccion-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Grid de los 2 bloques vigentes (sucursal + jornada). 1 col mobile,
   2 desde 640px. */
.vigentes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .vigentes-grid { grid-template-columns: 1fr 1fr; }
}

.vigente-bloque {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.vigente-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.vigente-valor {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.vigente-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.vigente-vacio {
    color: var(--text-disabled);
    font-style: italic;
    padding: 0.5rem 0;
}

/* Timeline del historial — dots de color según vigente vs cerrado. */
.historial-timeline {
    display: flex;
    flex-direction: column;
}

.historial-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.historial-item:last-child {
    border-bottom: none;
}

.historial-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.45rem;
}

.historial-vigente .historial-dot { background: var(--primario); }
.historial-cerrado .historial-dot { background: var(--text-disabled); }

.historial-contenido { flex: 1; min-width: 0; }

.historial-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.historial-recurso {
    font-weight: 500;
    color: var(--text);
}

.historial-fechas {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.historial-fechas strong {
    color: var(--text);
    font-weight: 500;
}


/* ========================================================================
   CONFIG RECORDATORIOS — toggle como pill (Prompt #16C)
   ------------------------------------------------------------------------
   Para los 4 toggles activo/inactivo del form de configuración admin.
   Reusa el patrón visual de .toggle-pill pero como single switch.
   ======================================================================== */

.config-toggle-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.config-toggle-row .config-toggle-label {
    flex: 1;
    min-width: 220px;
}

.config-toggle-row .config-toggle-titulo {
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.15rem;
}

.config-toggle-row .config-toggle-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Native checkbox styled como switch slider */
.config-toggle-row .config-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}


/* ========================================================================
   MODAL OVERLAY (Prompt #16D)
   ------------------------------------------------------------------------
   Modal sencillo usado en /app/admin/ausencias para los formularios
   de carga / rechazo / cancelación. Sin animaciones costosas — el
   contenido es estático y simple.
   ======================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    z-index: 100;
    overflow-y: auto;
}

.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    width: 100%;
    max-width: 560px;
    margin: auto 0;
}

@media (max-width: 640px) {
    .modal-card { padding: 1.5rem; }
}

.modal-card h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}


/* ========================================================================
   CALENDARIO DE AUSENCIAS (Prompt #16D)
   ------------------------------------------------------------------------
   Vista en /app/admin/operacion: ausencias activas en el rango. Una
   "tarjeta por día" con badges de los trabajadores ausentes.
   ======================================================================== */

.ausencias-calendario {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .ausencias-calendario {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ausencias-calendario {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ausencia-grupo-dia {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.ausencia-grupo-dia-fecha {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.ausencia-grupo-dia-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ausencia-tarjeta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text);
}

.config-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.config-toggle-switch .config-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-fuerte);
    border-radius: 999px;
    transition: background var(--transition);
    cursor: pointer;
}

.config-toggle-switch .config-toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.config-toggle-switch input:checked + .config-toggle-slider {
    background: var(--primario);
}

.config-toggle-switch input:checked + .config-toggle-slider::before {
    transform: translateX(20px);
}

.config-toggle-switch input:focus-visible + .config-toggle-slider {
    box-shadow: 0 0 0 3px var(--primario-ring);
}

/* Sub-form de parámetros del recordatorio (visible solo si activo) */
.config-parametros {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.config-parametros .input-inline {
    display: inline-block;
    width: 70px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-fuerte);
    border-radius: var(--radius);
    text-align: center;
    margin: 0 0.25rem;
}


/* ========================================================================
   PASSWORD TOGGLE (Prompt #37)
   ------------------------------------------------------------------------
   Botón "ojo" superpuesto al input de contraseña para mostrar/ocultar
   el texto. Default cerrado; sin persistencia entre sesiones.
   ======================================================================== */

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper > input {
    /* Reservar espacio a la derecha para el botón. */
    padding-right: 2.5rem;
    flex: 1;
}

.password-toggle-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: color 0.15s ease;
}

.password-toggle-btn:hover {
    color: var(--text);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--primario);
    outline-offset: 1px;
}

.password-toggle-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}