/* ============================================================================
   demo.css — Estilos de las vistas demo de Asistia360
   ============================================================================

   Estructura:
     1.  Reset y base
     2.  Variables CSS (paleta corporativa)
     3.  Pantalla de LOGIN
     4.  Layout de la APP (grid: sidebar + topbar + main)
     5.  SIDEBAR
     6.  TOPBAR (reloj, usuario, logout)
     7.  MAIN (área de contenido)
     8.  Headers de página
     9.  Sistema de CARDS
    10.  Sistema de GRIDS
    11.  Botones
    12.  Status messages
    13.  Tablas de datos
    14.  Tags y badges
    15.  Componentes específicos (credenciales, stats, placeholder)
    16.  Marcaje (botones grid)
    17.  Utilidades
    18.  Responsive
============================================================================ */


/* ──────────────────────────────────────────────────────────────────────────
   1. Reset y base
   ────────────────────────────────────────────────────────────────────────── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #f5f5f5;
    color: #1a202c;
    min-height: 100vh;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }


/* ──────────────────────────────────────────────────────────────────────────
   2. Variables CSS — paleta corporativa Asistia360
   ────────────────────────────────────────────────────────────────────────── */
:root {
    --color-primary:        #1a365d;   /* azul oscuro corporativo */
    --color-primary-light:  #2c5282;
    --color-accent:         #3182ce;   /* azul medio */
    --color-accent-light:   #4299e1;

    --color-success:        #38a169;
    --color-success-dark:   #2f855a;
    --color-danger:         #e53e3e;
    --color-danger-dark:    #c53030;
    --color-warning:        #ed8936;
    --color-warning-dark:   #dd6b20;

    --color-bg:             #f5f5f5;
    --color-bg-soft:        #edf2f7;
    --color-surface:        #ffffff;
    --color-border:         #e2e8f0;
    --color-border-strong:  #cbd5e0;

    --color-text:           #1a202c;
    --color-text-soft:      #4a5568;
    --color-text-muted:     #718096;

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);

    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. Pantalla de LOGIN
   ══════════════════════════════════════════════════════════════════════════ */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #e6f0fa 0%, #f5f5f5 100%);
}

/* Cuando hay sesión, ocultamos la pantalla de login */
body.authenticated .login-screen { display: none; }

.login-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px;
    width: 100%;
    max-width: 480px;
}

.login-card h1 {
    color: var(--color-primary);
    margin-bottom: 8px;
    font-size: 24px;
}

.subtitle {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.login-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-soft);
    margin-bottom: 6px;
}

.login-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: ui-monospace, "Cascadia Code", monospace;
}

.login-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 8px;
    line-height: 1.5;
}

.login-hint code {
    background: var(--color-bg-soft);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.login-form button {
    width: 100%;
    margin-top: 16px;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. Layout de la APP
   ══════════════════════════════════════════════════════════════════════════ */
.app-layout {
    display: none;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    height: 100vh;
}

body.authenticated .app-layout { display: grid; }


/* ══════════════════════════════════════════════════════════════════════════
   5. SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */
.app-sidebar {
    grid-area: sidebar;
    background: var(--color-primary);
    color: white;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.brand {
    padding: 8px 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
}

.brand-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.brand-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: var(--color-accent);
    color: white;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

.nav-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}

/* Encabezado de bloque del sidebar (Mi asistencia / Gestion / Configuracion).
   display:flex para que coincida con el override de demo.js, que fuerza
   display:flex a los encabezados con nav-item--admin cuando el usuario es admin. */
.nav-heading {
    display: flex;
    align-items: center;
    padding: 16px 12px 4px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.nav-item.active {
    background: var(--color-accent);
    color: white;
}

.nav-icon {
    font-size: 16px;
    width: 20px;
    display: inline-flex;
    justify-content: center;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. TOPBAR
   ══════════════════════════════════════════════════════════════════════════ */
.app-topbar {
    grid-area: topbar;
    background: white;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    box-shadow: var(--shadow-sm);
}

.topbar-left { justify-self: flex-start; display: flex; align-items: center; gap: 10px; }
.topbar-center { justify-self: center; }
.topbar-right { justify-self: flex-end; display: flex; align-items: center; gap: 16px; }

/* Botón hamburguesa: solo visible en móvil (lo habilita el @media). */
.topbar-burger {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.topbar-burger:hover { background: var(--color-bg-soft); }

/* Overlay del drawer: nunca visible en desktop. */
.sidebar-overlay { display: none; }

.page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
}

.live-clock {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-bg-soft);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}

.user-chip {
    text-align: right;
    line-height: 1.2;
}

.user-chip-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

.user-chip-rut {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: ui-monospace, monospace;
}

.btn-logout {
    width: auto;
    padding: 6px 14px;
    font-size: 13px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s;
    margin: 0;
}

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


/* ══════════════════════════════════════════════════════════════════════════
   7. MAIN
   ══════════════════════════════════════════════════════════════════════════ */
.app-main {
    grid-area: main;
    overflow-y: auto;
    padding: 24px 32px;
}

.section-view {
    max-width: 1200px;
    margin: 0 auto;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. Headers de página
   ══════════════════════════════════════════════════════════════════════════ */
.page-header {
    margin-bottom: 24px;
}

.page-h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
    letter-spacing: -0.4px;
}

.page-h2-accent {
    color: var(--color-accent);
}

.page-subtitle {
    color: var(--color-text-muted);
    font-size: 14px;
}


/* ══════════════════════════════════════════════════════════════════════════
   9. Cards
   ══════════════════════════════════════════════════════════════════════════ */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
}

.card-body { padding: 20px; }

.card-body-flush { padding: 0; }

.card-info { background: #f8fbff; }

.card-foot-info {
    margin-top: 16px;
    padding: 10px 12px;
    background: #c6f6d5;
    color: #22543d;
    border-radius: var(--radius-sm);
    font-size: 12px;
}

/* Card de estadística (en el dashboard) */
.card-stat {
    padding: 16px 18px;
}

.card-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.card-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.card-stat-value small {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.card-stat-foot {
    font-size: 12px;
    color: var(--color-text-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   10. Sistemas de grid
   ══════════════════════════════════════════════════════════════════════════ */
.cards-grid {
    display: grid;
    gap: 16px;
}

/* Fluido: dos columnas cuando hay ancho, apila a una cuando se estrecha,
   sin depender de un breakpoint duro. */
.cards-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* Fluido: hasta 3 columnas cuando hay ancho, apila solo a una en pantallas
   angostas, sin depender de un breakpoint duro (mismo enfoque que cards-grid-2). */
.cards-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cards-grid-4 { grid-template-columns: repeat(4, 1fr); }

.cards-grid-mt { margin-top: 16px; }

/* ──────────────────────────────────────────────────────────────────────────
   Enrolamiento biométrico
   Tarjetas Empleado + Lector
   ────────────────────────────────────────────────────────────────────────── */

.am-enroll-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

@media (min-width: 720px) {
    .am-enroll-grid {
        grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    }
}
/* Buscador de empleado + boton "Limpiar" al lado (Enrolar Huella). */
.am-employee-row{
    display:flex;
    align-items:flex-start;
    gap:8px;
    flex-wrap:wrap;
}

.am-employee-select{
    flex:1 1 260px;
    min-width:0;
}

/* Agranda un poco el buscador de trabajador (SearchUI) */
.am-employee-select .sui-field > input{
    min-height:44px;
    font-size:15px;
    padding:10px 34px 10px 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   11. Botones
   ══════════════════════════════════════════════════════════════════════════ */
button {
    background: var(--color-accent);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    font-family: inherit;
}

button:hover:not(:disabled) {
    background: var(--color-primary-light);
}

button:active:not(:disabled) {
    transform: translateY(1px);
}

button:disabled {
    background: #a0aec0;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-accent);
    color: white;
    width: 100%;
    margin: 0;
}

.btn-large {
    padding: 14px 20px;
    font-size: 16px;
}

.btn-link {
    background: transparent;
    color: var(--color-accent);
    border: none;
    padding: 4px 0;
    width: auto;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-link:hover {
    color: var(--color-primary);
    background: transparent;
}

/* Variantes por tipo de marcaje */
.btn-checkin     { background: var(--color-success); }
.btn-checkin:hover:not(:disabled) { background: var(--color-success-dark); }

.btn-checkout    { background: var(--color-danger); }
.btn-checkout:hover:not(:disabled) { background: var(--color-danger-dark); }

.btn-meal        { background: var(--color-warning); }
.btn-meal:hover:not(:disabled) { background: var(--color-warning-dark); }


/* ══════════════════════════════════════════════════════════════════════════
   12. Status messages (verde / rojo / azul)
   ══════════════════════════════════════════════════════════════════════════ */
.status {
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-top: 12px;
    font-family: ui-monospace, "Cascadia Code", monospace;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow-y: auto;
}

.status.success {
    background: #c6f6d5;
    color: #22543d;
    border: 1px solid #9ae6b4;
}

.status.error {
    background: #fed7d7;
    color: #742a2a;
    border: 1px solid #fc8181;
}

.status.info {
    background: #bee3f8;
    color: #2a4365;
    border: 1px solid #90cdf4;
}


/* ══════════════════════════════════════════════════════════════════════════
   13. Tablas de datos
   ══════════════════════════════════════════════════════════════════════════ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    text-align: left;
    padding: 10px 20px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
}

.data-table tbody td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
}

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

.data-table tbody tr:hover {
    background: #fafafa;
}

.data-table-placeholder td {
    background: #fffaf0;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
}

.receipt-code {
    background: var(--color-bg-soft);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    word-break: break-all;
    overflow-wrap: anywhere;
}


/* ══════════════════════════════════════════════════════════════════════════
   14. Tags y badges
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-accent-light);
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

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

.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.tag-green  { background: #c6f6d5; color: #22543d; }
.tag-red    { background: #fed7d7; color: #742a2a; }
.tag-orange { background: #feebc8; color: #7b341e; }
.tag-blue   { background: #bee3f8; color: #2a4365; }

.channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-soft);
}


/* ══════════════════════════════════════════════════════════════════════════
   15. Componentes específicos
   ══════════════════════════════════════════════════════════════════════════ */

/* Status dots para indicar estado */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.status-dot-success { background: var(--color-success); }
.status-dot-warning { background: var(--color-warning); }
.status-dot-danger  { background: var(--color-danger); }
.status-dot-neutral { background: var(--color-text-muted, #9aa0a6); }

/* Lista de credenciales (en el dashboard) */
.credential-list {
    list-style: none;
}

.credential-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

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

.credential-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
}

.credential-info {
    flex: 1;
    min-width: 0;            /* permite que el texto largo (reloj) se ajuste */
    line-height: 1.3;
}

/* El subtexto (reloj, N° tarjeta) puede ser largo: que se ajuste sin desbordar. */
.credential-detail {
    display: block;
    overflow-wrap: anywhere;
}

.credential-info strong {
    display: block;
    font-size: 13px;
    color: var(--color-primary);
}

.credential-info small {
    font-size: 11px;
    color: var(--color-text-muted);
}

.credential-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}

.credential-status-ok      { background: #c6f6d5; color: #22543d; }
.credential-status-pending { background: var(--color-bg-soft); color: var(--color-text-muted); }

.credential-inactive { opacity: 0.65; }

/* Stats rápidos */
.quick-action-text {
    font-size: 13px;
    color: var(--color-text-soft);
    margin-bottom: 12px;
}

.quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.quick-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.quick-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

/* Placeholder para secciones aún no implementadas */
.placeholder-content {
    text-align: center;
    padding: 60px 40px;
}

.placeholder-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.placeholder-content h3 {
    font-size: 18px;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.placeholder-content p {
    color: var(--color-text-soft);
    margin-bottom: 12px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.placeholder-endpoint {
    font-size: 13px;
}

.placeholder-endpoint code {
    background: var(--color-bg-soft);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, monospace;
}

.placeholder-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 20px !important;
}

/* Lista informativa */
.info-list {
    list-style: none;
}

.info-list li {
    padding: 8px 0;
    font-size: 13px;
    color: var(--color-text-soft);
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}

.info-list li:last-child { border-bottom: none; }

.info-list code {
    background: var(--color-bg-soft);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, monospace;
    font-size: 12px;
}


/* ══════════════════════════════════════════════════════════════════════════
   16. Marcaje: dos grupos con jerarquia (Jornada principal / Colacion secundaria)
   ══════════════════════════════════════════════════════════════════════════ */

/* Cada grupo es un bloque con su titulo y su par de botones. */
.punch-group { margin-bottom: 14px; }
.punch-group:last-of-type { margin-bottom: 12px; }

/* Colacion: separada por un divisor sutil y un respiro extra arriba para
   que se lea como un segundo bloque, distinto de Jornada. */
.punch-group-sub {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.punch-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.punch-grid {
    display: grid;
    /* Dos botones lado a lado cuando hay ancho; apilan fluido en pantallas chicas. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
}

/* Boton de marcaje: area de toque comoda, icono + etiqueta apilados. */
.btn-punch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 92px;
    padding: 16px 12px;
    font-size: 15px;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 0.15s, transform 0.06s, box-shadow 0.15s;
}

.btn-punch:hover:not(:disabled) {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

.btn-punch:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-punch .punch-ico {
    font-size: 20px;
    line-height: 1;
}

.btn-punch .punch-lbl {
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Jornada: acciones principales (abren/cierran el dia). Mas grandes y destacadas. */
.punch-grid-main .btn-punch {
    min-height: 108px;
    font-size: 16px;
}

.punch-grid-main .btn-punch .punch-ico { font-size: 24px; }

/* Colaciones: acciones secundarias, mas chicas y discretas que Entrada/Salida. */
.btn-punch-sub {
    min-height: 64px;
    font-size: 13px;
    opacity: 0.92;
    box-shadow: none;
}

.btn-punch-sub .punch-ico { font-size: 16px; }

.btn-punch-sub:hover:not(:disabled) {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Indicador de ubicacion: SOLO estado, nunca coordenadas. */
.geo-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-soft);
    margin-top: 12px;
    padding: 9px 12px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
}

.geo-info .geo-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.geo-info.geo-on  { color: #22543d; background: #f0fff4; }
.geo-info.geo-on  .geo-dot { background: var(--color-success); }
.geo-info.geo-off .geo-dot { background: var(--color-text-muted); }
.geo-info.geo-pending .geo-dot { background: var(--color-warning); }

/* Indicador SI/NO de geolocalizacion en el detalle del comprobante verificado.
   Solo informa si el marcaje tenia ubicacion; nunca muestra coordenadas. */
.detail-value .geo-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.detail-value .geo-dot-on  { background: var(--color-success); }
.detail-value .geo-dot-off { background: var(--color-text-muted, #9aa0a6); }

/* Tarjeta de exito del marcaje: estado agradable, NO un volcado de log. */
.punch-result {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 16px 18px;
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    border-radius: var(--radius-md);
    color: #22543d;
}

.punch-result-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: var(--color-success);
    border-radius: 50%;
}

.punch-result-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.punch-result-text strong {
    font-size: 15px;
    line-height: 1.3;
}

.punch-result-time {
    font-size: 14px;
    color: var(--color-success-dark);
    font-weight: 600;
}

.punch-result-note {
    font-size: 12px;
    color: var(--color-text-soft);
    margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   17. Utilidades
   ══════════════════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   18. Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
    /* cards-grid-3 fluye solo (auto-fit); no necesita override aquí. */
}

@media (max-width: 768px) {
    /* ── Layout a una sola columna: el sidebar sale del flujo y pasa a ser
       un panel deslizable (drawer) controlado por .sidebar-open. ── */
    .app-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 64px 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }

    /* Sidebar como drawer: fuera de pantalla por defecto, entra al abrir.
       Muestra los TEXTOS completos del nav (no es barra de iconos). */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1000;
        box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.25));
    }
    .app-layout.sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    /* Overlay semitransparente que oscurece el fondo cuando el drawer está abierto. */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 900;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .app-layout.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* Burger visible en móvil. */
    .topbar-burger { display: inline-flex; align-items: center; }

    /* Topbar compacto: el reloj central se preserva (achicado); se ocultan
       el título de página y el chip de usuario para que burger + reloj +
       botones quepan en una sola fila sin desbordar. */
    .app-topbar { padding: 0 12px; }
    .page-title { display: none; }
    .user-chip { display: none; }
    .topbar-right { gap: 8px; }
    .btn-logout { padding: 5px 9px; font-size: 12px; }
    .live-clock { font-size: 14px; padding: 4px 9px; letter-spacing: 0; }

    /* Cards a una columna. */
    .cards-grid-4, .cards-grid-2 {
        grid-template-columns: 1fr;
    }
    /* cards-grid-3 ya colapsa solo por su minmax fluido. */
    .app-main { padding: 16px; }
}
/* ════════════════════════════════════════════════════════════════════════
   PASO 3.1 — Estilos nuevos para Mi Día
   ════════════════════════════════════════════════════════════════════════

   IMPORTANTE: este bloque se AGREGA al final del demo.css existente.
   No reemplaza nada del CSS anterior.
   ════════════════════════════════════════════════════════════════════════ */


/* ─── Header con acción a la derecha ─────────────────────────────────── */
.page-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.page-header-with-action .btn-link {
    margin-bottom: 4px;
}


/* ─── Estados (loading, error, empty) ────────────────────────────────── */
.loading-state {
    text-align: center;
    padding: 48px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.error-state {
    border-color: #fc8181;
    background: #fff5f5;
}

.error-state .placeholder-icon {
    color: var(--color-danger);
    opacity: 0.6;
}


/* ─── Barra de progreso ──────────────────────────────────────────────── */
.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.progress-label {
    font-size: 13px;
    color: var(--color-text-soft);
    font-weight: 600;
}

.progress-value {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 700;
    font-family: ui-monospace, monospace;
}

.progress-bar-wrap {
    width: 100%;
    height: 12px;
    background: var(--color-bg-soft);
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-success));
    border-radius: 6px;
    transition: width 0.4s ease;
}


/* ─── Timeline ───────────────────────────────────────────────────────── */
.timeline {
    list-style: none;
    position: relative;
    padding-left: 12px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 90px 24px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    position: relative;
}

/* Línea vertical entre dots */
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 100px;
    top: 28px;
    bottom: -12px;
    width: 2px;
    background: var(--color-border);
}

.timeline-time {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--color-text-muted);
    padding-top: 4px;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid white;
    box-shadow: 0 0 0 2px var(--color-accent);
    margin-top: 6px;
    margin-left: 5px;
}

.timeline-dot-empty {
    background: white;
    box-shadow: 0 0 0 2px var(--color-border-strong);
}

.timeline-body {
    padding-top: 2px;
}

.timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.timeline-receipt {
    margin-top: 2px;
}

.timeline-pending {
    opacity: 0.6;
}

.timeline-pending em {
    font-size: 12px;
    color: var(--color-text-muted);
}

.geo-pill {
    display: inline-flex;
    align-items: center;
    background: #c6f6d5;
    color: #22543d;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
}


/* ─── Detalle JSON crudo ─────────────────────────────────────────────── */
.raw-json-details {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0;
}

.raw-json-details summary {
    cursor: pointer;
    padding: 12px 20px;
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: ui-monospace, monospace;
    user-select: none;
}

.raw-json-details summary:hover {
    color: var(--color-text-soft);
}

.raw-json-details[open] summary {
    border-bottom: 1px solid var(--color-border);
}

.raw-json {
    margin: 0;
    padding: 16px 20px;
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 11px;
    color: var(--color-text);
    background: #fafafa;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.5;
}


/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .timeline-item {
        grid-template-columns: 70px 20px 1fr;
        gap: 8px;
    }
    .timeline-item:not(:last-child)::after {
        left: 80px;
    }
    .timeline-time { font-size: 11px; }
}
/* ════════════════════════════════════════════════════════════════════════
   PASO 3.1.1 — Ajustes para tabla de Mi Día
   ════════════════════════════════════════════════════════════════════════

   IMPORTANTE: este bloque se AGREGA al final del demo.css existente.
   ════════════════════════════════════════════════════════════════════════ */


/* ─── Banner informativo (Salida pendiente, etc.) ────────────────────── */
.info-banner {
    background: #ebf8ff;
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    color: #2c5282;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-banner-icon {
    font-size: 16px;
}


/* ─── Fila "última marcación" destacada en la tabla ──────────────────── */
.data-table tr.is-latest {
    background: linear-gradient(90deg, #f0fff4 0%, transparent 50%);
    border-left: 3px solid var(--color-success);
}

.data-table tr.is-latest td:first-child {
    padding-left: 17px;  /* compensa el border-left de 3px */
}

.data-table tr.is-latest:hover {
    background: linear-gradient(90deg, #e6fffa 0%, #fafafa 50%);
}

.latest-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--color-success);
    color: white;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
}


/* ─── Celdas de la tabla ─────────────────────────────────────────────── */
.time-cell {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-weight: 600;
    color: var(--color-primary);
}

.muted {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 12px;
}


/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .latest-badge {
        display: none; /* en móvil el resaltado del fondo es suficiente */
    }
    .data-table thead th,
    .data-table tbody td {
        padding: 8px 12px;
    }
}
/* ════════════════════════════════════════════════════════════════════════
   PASO 3.2 — Estilos para Mis Marcajes (filtros, paginación, modal)
   AGREGAR AL FINAL de demo.css
   ════════════════════════════════════════════════════════════════════════ */


/* ─── Barra de filtros ───────────────────────────────────────────────── */
.filters-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 12px;
    align-items: flex-end;
}

/* Card de filtros que contiene un buscador con sugerencias (SearchUI).
   `.card` usa `overflow: hidden` (para recortar esquinas redondeadas de las
   tablas), lo que RECORTABA el menu desplegable del autocomplete al desbordar
   el borde de la card. Aqui lo liberamos y, ademas, elevamos toda la card a su
   propio contexto de apilamiento (z-index) para que el menu abierto flote por
   ENCIMA de las cards del reporte que se dibujan debajo. */
.filters-card {
    overflow: visible;
    position: relative;
    z-index: 5;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.filter-group input,
.filter-group select {
    padding: 8px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: white;
    font-family: inherit;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.15);
}

.filter-actions {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.filter-actions .btn-primary {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
    margin: 0;
}

.btn-secondary-sm {
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    margin: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-secondary-sm:hover:not(:disabled) {
    background: var(--color-border);
}

/* ─── Barra de descarga de reportes (Art. 27/28) ─────────────────────── */
.report-download-bar .card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
}

.report-download-bar {
    border-left: 4px solid var(--color-success);
}

.download-bar-label {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 14px;
    margin-right: 4px;
}

/* Botón de descarga: verde (acción de exportar), mismo patrón que btn-checkin */
.btn-download {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
    background: var(--color-success);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-download:hover:not(:disabled) {
    background: var(--color-success-dark);
}



/* ─── Paginación ─────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.pag-btn {
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
    background: white;
    color: var(--color-accent);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-weight: 600;
    margin: 0;
}

.pag-btn:hover:not(:disabled) {
    background: var(--color-bg-soft);
    border-color: var(--color-accent);
}

.pag-btn:disabled {
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    border-color: var(--color-border);
    cursor: not-allowed;
}

.pag-info {
    font-size: 13px;
    color: var(--color-text-soft);
    font-weight: 500;
}


/* ─── Modal overlay y dialog ─────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}

.modal-overlay.hidden {
    display: none;
}

.modal-dialog {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 16px;
    color: var(--color-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    margin: 0;
}

.modal-close:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.modal-footer .btn-primary {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
    margin: 0;
}

/* Cuando el modal está abierto, evitar scroll del fondo */
body.modal-open {
    overflow: hidden;
}


/* ─── Detalle dentro del modal ───────────────────────────────────────── */
.detail-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.detail-section:last-of-type {
    border-bottom: none;
}

.detail-h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    font-weight: 700;
    margin-bottom: 8px;
}

.detail-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
}

.detail-label {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.detail-value {
    font-size: 13px;
    color: var(--color-text);
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Ficha del comprobante en el panel (modelo de la certificadora): UNA tarjeta
   con tres secciones (titulo + linea, sin marcos). Los campos van en dos
   columnas de pares rotulo-valor; los largos (.ficha-full) ocupan el ancho
   completo y los subordinados (.ficha-sub: resolucion y su fecha, empresa
   externa) van sangrados con una linea a la izquierda, ligados a su padre. Las
   columnas dependen del ancho de la TARJETA (container query), no de la ventana:
   el panel tiene barra lateral. Solo presentacion: el comprobante imprimible y
   el correo no usan estas clases. */
.ficha-modelo { container-type: inline-size; margin-top: 10px; }
.ficha-modelo .card-body { padding: 4px 16px 8px; }
.ficha-seccion + .ficha-seccion { margin-top: 6px; border-top: 1px solid var(--color-border); }
.ficha-titulo { margin: 0; padding: 8px 0 4px; font-size: 15px; font-weight: 600; color: var(--color-primary); }
.ficha-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
.ficha-item { padding: 3px 0; gap: 8px; grid-template-columns: 1fr; min-width: 0; }
.ficha-item .detail-label, .ficha-item .detail-value { line-height: 1.25; }
.ficha-sub { padding-left: 12px; border-left: 2px solid var(--color-border); }
@container (min-width: 480px) {
    .ficha-item { grid-template-columns: 190px minmax(0, 1fr); }
}
@container (min-width: 720px) {
    .ficha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha-full { grid-column: 1 / -1; }
    .ficha-item { grid-template-columns: 170px minmax(0, 1fr); }
}

.hash-code {
    background: var(--color-bg-soft);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    word-break: break-all;
}

/* Mensaje amable de "Reenviar comprobante" dentro del modal de detalle. */
.resend-feedback {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.resend-feedback.hidden {
    display: none;
}

.resend-feedback-ok {
    background: rgba(56, 161, 105, 0.12);
    color: #2f855a;
    border: 1px solid rgba(56, 161, 105, 0.35);
}

.resend-feedback-err {
    background: rgba(229, 62, 62, 0.10);
    color: #c53030;
    border: 1px solid rgba(229, 62, 62, 0.30);
}

.resend-feedback-info {
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
}


/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .filters-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .filters-bar {
        grid-template-columns: 1fr;
    }
    .pagination {
        flex-direction: column;
        gap: 8px;
    }
    .pag-info {
        font-size: 11px;
        text-align: center;
    }
    .detail-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .detail-label {
        font-size: 11px;
    }
    .modal-overlay {
        padding: 12px;
    }
    .modal-dialog {
        max-height: 95vh;
    }
    .modal-footer {
        justify-content: stretch;
    }
    .modal-footer .btn-secondary-sm,
    .modal-footer .btn-primary {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* ════════════════════════════════════════════════════════════════════════
   PASO 3.3 — Estilos para Verificar Comprobante
   AGREGAR AL FINAL de demo.css
   ════════════════════════════════════════════════════════════════════════ */


/* ─── Formulario de verificación ─────────────────────────────────────── */
.verify-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: end;
}

.verify-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.verify-input-group label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.verify-input-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: ui-monospace, "Cascadia Code", monospace;
    background: white;
    box-sizing: border-box;
}

.verify-input-group input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.verify-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.verify-hint code {
    background: var(--color-bg-soft);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

.verify-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.verify-actions .btn-primary {
    width: auto;
    min-width: 140px;
    padding: 12px 20px;
    font-size: 14px;
    margin: 0;
}


/* ─── Banner de resultado (los 3 estados) ────────────────────────────── */
.verify-banner {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    align-items: flex-start;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
}

.verify-banner-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-banner-body { flex: 1; }

.verify-banner-body h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

.verify-banner-body p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.verify-banner-note {
    font-size: 12px !important;
    opacity: 0.85;
    margin-top: 8px !important;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
}


/* Estado VALID — verde profesional */
.verify-banner-ok {
    background: #f0fff4;
    border-color: var(--color-success);
}
.verify-banner-ok .verify-banner-icon {
    background: var(--color-success);
    color: white;
}
.verify-banner-ok h3 { color: #22543d; }
.verify-banner-ok p  { color: #276749; }


/* Estado TAMPERED — ROJO DESTACADO (Art. 14 b — Res. 38) */
.verify-banner-tampered {
    background: #fff5f5;
    border-color: var(--color-danger);
    border-width: 3px;
    animation: alertPulse 1.6s ease-in-out 1;
}
.verify-banner-tampered .verify-banner-icon {
    background: var(--color-danger);
    color: white;
}
.verify-banner-tampered h3 {
    color: #742a2a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.verify-banner-tampered p { color: #9b2c2c; }

@keyframes alertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
    50%      { box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); }
}


/* Estado NOT_FOUND / INVALID_FORMAT — amarillo informativo */
.verify-banner-warning {
    background: #fffaf0;
    border-color: #ed8936;
}
.verify-banner-warning .verify-banner-icon {
    background: #ed8936;
    color: white;
}
.verify-banner-warning h3 { color: #7b341e; }
.verify-banner-warning p  { color: #9c4221; }


/* Estado ERROR — fallo de red u otro */
.verify-banner-error {
    background: #fed7d7;
    border-color: #c53030;
}
.verify-banner-error .verify-banner-icon {
    background: #c53030;
    color: white;
}
.verify-banner-error h3 { color: #742a2a; }
.verify-banner-error p  { color: #9b2c2c; }


/* ─── Card de información ────────────────────────────────────────────── */
.verify-info-card {
    background: #f8fbff;
}


/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .verify-form {
        grid-template-columns: 1fr;
    }
    .verify-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .verify-actions .btn-primary,
    .verify-actions .btn-secondary-sm {
        flex: 1 1 140px;
    }
    .verify-banner {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    .verify-banner-icon {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}
/* ════════════════════════════════════════════════════════════════════════
   PASO 3.4 — Estilos para Vista Reloj
   AGREGAR AL FINAL de demo.css
   ════════════════════════════════════════════════════════════════════════ */


/* ─── Toggle switch (iOS style) ─────────────────────────────────────── */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #cbd5e0;
    transition: background 0.2s;
    border-radius: 24px;
}

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

.switch input:checked + .switch-slider {
    background: var(--color-success);
}

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

.switch-label {
    font-size: 13px;
    color: var(--color-text-soft);
    vertical-align: middle;
    font-weight: 600;
}


/* ─── Punto verde animado para la última marca del reloj ─────────────── */
.reloj-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    margin-left: 8px;
    vertical-align: middle;
    animation: livePulse 1.2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(56, 161, 105, 0);
        transform: scale(1.1);
    }
}


/* ─── Fila nueva (flash al llegar por auto-refresh) ──────────────────── */
.row-flash {
    animation: rowFlash 2.5s ease-out 1;
    background: linear-gradient(90deg, #c6f6d5 0%, transparent 70%) !important;
}

@keyframes rowFlash {
    0% {
        background: linear-gradient(90deg, #9ae6b4 0%, transparent 70%) !important;
    }
    100% {
        background: transparent !important;
    }
}
/* ─── Estados de la sección Enrolamientos ─────────────────────────────── */
.enrol-state {
    padding: 32px;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
}

.data-table-wide {
    table-layout: auto;
    width: 100%;
}

.data-table-actions {
    text-align: right;
    width: 120px;
}


/* ─── Badges de estado por reloj en la tabla ──────────────────────────── */
.enrol-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    margin: 2px;
    font-weight: 500;
    white-space: nowrap;
}

.enrol-badge-ok {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.enrol-badge-partial {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.enrol-badge-none {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}


/* ─── Botón chico (para "Enrolar" en la tabla) ────────────────────────── */
.btn-small {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 6px;
}


/* ─── Botón secundario (Cancelar del modal) ───────────────────────────── */
.btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover:not(:disabled) {
    background: #e5e7eb;
}


/* ═══════════════════════════════════════════════════════════════════════
   MODAL (puede reusarse para futuros modales del demo)
   ═══════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-backdrop.hidden {
    display: none;
}

.modal-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none !important;
    border: none;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.modal-close:hover {
    color: #1f2937;
    background: #f3f4f6 !important;
    border-radius: 6px;
}

.modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #fafafa;
}


/* ═══════════════════════════════════════════════════════════════════════
   Formulario del modal
   ═══════════════════════════════════════════════════════════════════════ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group-grow {
    flex: 1;
}

.form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-input {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Campo informativo, no editable (ej. PIN autogenerado en enrolamiento) */
.form-input-readonly {
    background: #f3f4f6;
    color: #6b7280;
    font-style: italic;
    cursor: default;
}

.form-input-readonly:focus {
    border-color: #d1d5db;
    box-shadow: none;
}

.form-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 14px;
}

.form-check input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.form-check small {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Lista de relojes dentro del modal
   ═══════════════════════════════════════════════════════════════════════ */

.enrol-devices-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.enrol-device-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.enrol-device-row:hover {
    background: #f9fafb;
}

/* Reloj sin acceso: no se puede enrolar PIN (el acceso se otorga en Usuarios). */
.enrol-device-row-disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: #f9fafb;
}

.enrol-device-row-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.enrol-device-row input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.enrol-device-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.enrol-device-info strong {
    font-size: 14px;
}

.enrol-device-info small {
    font-size: 12px;
    color: #6b7280;
    font-family: 'SF Mono', Menlo, monospace;
}


/* Mini etiquetas dentro de la lista del modal */
.enrol-state-label {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    width: fit-content;
}

.enrol-state-ok {
    background: #d1fae5;
    color: #065f46;
}

.enrol-state-partial {
    background: #fef3c7;
    color: #92400e;
}

.enrol-state-none {
    background: #f3f4f6;
    color: #6b7280;
}


/* Status dentro del modal */
.modal-body > .status {
    white-space: pre-line;  /* respetar saltos de línea \n */
}


/* ══════════════════════════════════════════════════════════════════════════
   19. MOTOR DE CALCULO v2 (vista admin integrada)
   ──────────────────────────────────────────────────────────────────────────
   Estilos namespaced con prefijo `am-` (adaptados de la vista standalone del
   motor). Conviven con el resto del demo sin colisionar. Los fragmentos HTML
   server-rendered (#motor-*-content) usan estas clases.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --am-surface: #ffffff;
    --am-border: #e2e6ec;
    --am-text: #1f2933;
    --am-muted: #7b8794;
    --am-primary: #2563eb;
    --am-primary-dark: #1d4ed8;
    --am-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --am-radius: 10px;
}

/* ── Items admin del sidebar: ocultos por defecto; JS los muestra si es admin ── */
/* .nav-item--tenant-admin es el subconjunto mas estrecho (solo tenant_admin;
   hoy, la vista de Auditoria del Art. 15). Mismo tratamiento: oculto hasta que
   applyAdminVisibility() decida. */
.nav-item--admin,
.nav-item--tenant-admin { display: none; }

/* ── Contenedor de la seccion (donde el JS inyecta el fragmento) ── */
.motor-content { color: var(--am-text); }
.motor-loading { color: var(--am-muted); padding: 28px 4px; font-size: 14px; }

/* ── Cabeceras / texto ── */
.am-version {
    font-size: 12px; font-weight: 600; color: #4338ca;
    background: rgba(99, 102, 241, 0.15); padding: 2px 8px; border-radius: 999px;
    vertical-align: middle;
}
.am-page-head { margin-bottom: 20px; }
.am-page-head h1 { margin: 0 0 4px; font-size: 22px; color: var(--color-primary); }
.am-day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.am-day-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.am-breadcrumb { font-size: 13px; color: var(--am-muted); margin-bottom: 12px; }
.am-breadcrumb a { color: var(--am-primary); }
.am-breadcrumb a:hover { text-decoration: underline; }
.am-muted { color: var(--am-muted); }
.am-strong { font-weight: 700; }
.am-mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12.5px; }
.am-mt { margin-top: 12px; }

/* ── Cards ── */
.am-card {
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    box-shadow: var(--am-shadow);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.am-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.am-card-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
/* Card de worker dentro del grid am-metrics: el grid maneja el espaciado con
   `gap`, por eso anulamos el margin-bottom heredado de am-card. */
.am-worker { margin-bottom: 0; text-align: left; }

/* ── Metricas ── */
.am-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.am-metric { text-align: center; padding: 20px; }
.am-metric-value { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.am-metric-label { color: var(--am-muted); font-size: 12.5px; margin-top: 4px; }
.am-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.am-dot-on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.am-dot-off { background: #9ca3af; }

/* ── Tablas ── */
.am-table-wrap { overflow-x: auto; }
.am-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.am-table thead th {
    text-align: left; color: var(--am-muted); font-weight: 600; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.03em;
    padding: 8px 10px; border-bottom: 2px solid var(--am-border); white-space: nowrap;
}
.am-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--am-border); white-space: nowrap; }
.am-table tbody tr:hover { background: #f8fafc; }
.am-table tbody tr.am-row-link { cursor: pointer; }
.am-num { text-align: right; font-variant-numeric: tabular-nums; }
.am-row-warn { background: #fffbeb; }
.am-row-warn:hover { background: #fef3c7; }
.am-warn-text { color: #b45309; font-weight: 600; }
.am-row-actions { display: flex; gap: 6px; }
/* Columna "Acciones" al final de la fila, alineada a la derecha. En la celda,
   los botones se agrupan a la derecha (mismo patron que .am-actions). */
.am-actions-col { text-align: right; }
td.am-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Tabla que colapsa a tarjetas en movil (opt-in: .am-table-stack) ──
   En escritorio es una .am-table normal. Bajo 640px cada fila se apila como
   tarjeta: se oculta el thead y cada celda muestra su etiqueta (data-label) a la
   izquierda y el valor a la derecha, SIN scroll horizontal. Reusa el breakpoint
   640px que ya usa el resto del proyecto. Cada <td> debe llevar data-label. */
@media (max-width: 640px) {
    .am-table-stack { min-width: 0; }
    .am-table-stack thead { display: none; }
    .am-table-stack tbody tr {
        display: block;
        border: 1px solid var(--am-border);
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 4px 0;
    }
    .am-table-stack tbody tr:hover { background: transparent; }
    .am-table-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 7px 14px;
        border: 0;
        white-space: normal;
    }
    .am-table-stack tbody td::before {
        content: attr(data-label);
        color: var(--am-muted);
        font-weight: 600;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex: 0 0 auto;
    }
    /* La celda de acciones va al pie de la tarjeta, botones alineados a la
       derecha y sin la etiqueta repetida. */
    .am-table-stack tbody td.am-actions {
        justify-content: flex-end;
        border-top: 1px solid var(--am-border);
        margin-top: 4px;
        padding-top: 10px;
    }
    .am-table-stack tbody td.am-actions::before { display: none; }
}

/* ── Badges de estado (day_status) ── */
.am-badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.am-badge-lg { font-size: 13px; padding: 4px 12px; }
.badge-worked   { background: #dcfce7; color: #166534; }
.badge-partial  { background: #fef9c3; color: #854d0e; }
.badge-rest     { background: #e5e7eb; color: #374151; }
.badge-holiday  { background: #dbeafe; color: #1e40af; }
.badge-leave    { background: #fef3c7; color: #92400e; }
.badge-absent   { background: #fee2e2; color: #991b1b; }
.badge-noschedule { background: #ffedd5; color: #9a3412; }
.badge-neutral  { background: #eef2f7; color: #475569; }

/* Turnos (casos 11-12): trabajo (verde) vs descanso (gris). */
.am-badge-work { background: #dcfce7; color: #166534; }
.am-badge-rest { background: #e5e7eb; color: #374151; }

/* Telemetria de workers (Deuda #3): estado del barrido. */
.am-worker-status-success { background: #dcfce7; color: #166534; }
.am-worker-status-partial { background: #fef9c3; color: #854d0e; }
.am-worker-status-error   { background: #fee2e2; color: #991b1b; }
.am-worker-status-running { background: #dbeafe; color: #1e40af; }
.am-run-detail > summary { cursor: pointer; display: inline-block; }
.am-run-summary {
    margin: 8px 0 0; padding: 8px 10px; background: #0f172a; color: #e2e8f0;
    border-radius: 6px; font-size: 11.5px; line-height: 1.45; overflow-x: auto;
    white-space: pre; max-width: 360px;
}

/* Tarjeta del schedule: grilla clave-valor. */
.am-kv-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 18px; padding: 4px 2px;
}
.am-kv-grid > div { display: flex; flex-direction: column; gap: 2px; }
.am-kv-grid .am-muted { font-size: 11.5px; }

/* Calendario mensual de turnos. */
.am-calendar { table-layout: fixed; }
.am-calendar th { text-align: center; text-transform: capitalize; font-size: 11.5px; }
.am-cal-cell {
    vertical-align: top; height: 58px; text-align: left; padding: 4px 6px;
    border: 1px solid #eef2f7;
}
.am-cal-day { display: block; font-size: 12px; font-weight: 600; color: #475569; }
.am-cal-label { margin-top: 4px; font-size: 10px; }
.am-cal-work { background: #f0fdf4; }
.am-cal-rest { background: #f8fafc; }
.am-cal-undef { background: #fffbeb; }
.am-cal-out { background: #fbfcfe; opacity: 0.45; }
.am-cal-none .am-cal-day { color: #cbd5e1; }

/* En movil el calendario (7 columnas) mantiene un ancho minimo legible y
   hace scroll horizontal dentro de su .am-table-wrap en lugar de desbordar. */
@media (max-width: 640px) {
    .am-calendar { min-width: 480px; }
    .am-cal-cell { height: 50px; padding: 3px 4px; }
    .am-cal-label { font-size: 9px; }
}

/* ── Grid de resumen (dia / semana) ── */
.am-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.am-summary-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f8fafc; border-radius: 8px; border: 1px solid var(--am-border); }
.am-sum-label { font-size: 11.5px; color: var(--am-muted); }
.am-sum-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Definition list (workers) ── */
.am-deflist { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
.am-deflist dt { color: var(--am-muted); }
.am-deflist dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Formularios / botones ── */
.am-form-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.am-label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--am-muted); font-weight: 600; }
/* El display:flex de .am-label le gana al [hidden] del navegador: sin esto, el
   campo Subtipo seguia visible con "Pacto de horas extra" seleccionado. */
#doc-create-form .am-label[hidden] { display: none; }
.am-input {
    border: 1px solid var(--am-border); border-radius: 8px; padding: 8px 10px;
    font-size: 14px; background: #fff; color: var(--am-text); min-width: 160px;
}
.am-input:focus { outline: none; border-color: var(--am-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.am-time-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.am-time-row .am-input { min-width: 110px; flex: 0 1 auto; }
.am-btn {
    display: inline-block; border: 1px solid var(--am-border); background: #fff;
    color: var(--am-text); border-radius: 8px; padding: 8px 14px; font-size: 13px;
    font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s;
}
.am-btn:hover { background: #f1f5f9; }
.am-btn-sm { padding: 4px 10px; font-size: 12px; }
.am-btn-primary { background: var(--am-primary); border-color: var(--am-primary); color: #fff; }
.am-btn-primary:hover { background: var(--am-primary-dark); }
.am-btn:disabled { opacity: .6; cursor: default; }
/* Boton solo-icono (acciones suaves con tooltip) y glifo de icono. */
.am-btn-icon { padding: 4px 8px; line-height: 1; }
.am-ico { display: inline-block; font-size: 14px; line-height: 1; }
/* Variante sutil de peligro para acciones sensibles (desactivar / reset clave). */
.am-btn-danger-soft { border-color: #e4b3b3; color: #b91c1c; }
.am-btn-danger-soft:hover { background: #fbeaea; border-color: #d99a9a; }
/* Modal "Ver acceso": tarjetas por metodo + indicador de metodos minimos (solo lectura). */
.am-acc-ident { margin: 0 0 12px; }
/* Franja destacada: metodos de marcacion suficientes o insuficientes. */
.am-acc-hero {
    border: 1px solid var(--am-border); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 14px;
}
.am-acc-hero-ok  { border-color: #bbf7d0; background: #f0fdf4; }
.am-acc-hero-bad { border-color: #fecaca; background: #fef2f2; }
.am-acc-hero p { margin: 8px 0 0; }
/* Grilla responsive de tarjetas de metodo (2 col escritorio, 1 en movil). */
.am-acc-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.am-acc-card { border: 1px solid var(--am-border); border-radius: 10px; padding: 12px 14px; }
.am-acc-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.am-acc-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.am-acc-card-title .am-ico { font-size: 18px; }
.am-acc-card-body { font-size: 12.5px; color: var(--am-text); }
.am-acc-list { margin: 4px 0 0; padding-left: 18px; }
.am-acc-list li { margin: 2px 0; }
/* Acciones dentro de una tarjeta de metodo (clave web, enrolar huella). */
.am-acc-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
/* Fila de reloj: info a la izquierda + boton "Quitar acceso" a la derecha. */
.am-acc-list li .am-acc-reloj-info { display: inline; }
.am-acc-list li:has(.am-btn) {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 6px 0; list-style: none; margin-left: -18px;
}
.am-acc-list li .am-btn { flex: 0 0 auto; }

/* Formulario inline "Dar acceso a reloj" dentro de la tarjeta Relojes. */
.am-acc-grant {
    margin-top: 10px; padding: 10px; border: 1px solid var(--am-border);
    border-radius: 8px; background: #f9fafb;
    display: flex; flex-direction: column; gap: 8px;
}
.am-acc-grant .am-label { font-size: 12px; }
.am-acc-grant-fechas { display: flex; flex-wrap: wrap; gap: 8px; }
.am-acc-grant-fechas .am-label { flex: 1 1 140px; }

/* ── Resultado / json / alertas ── */
.am-result {
    margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 12.5px;
    font-family: "SFMono-Regular", Consolas, monospace; white-space: pre-wrap;
    word-break: break-word; max-height: 320px; overflow: auto;
}
.am-result-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.am-result-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.am-json {
    background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: 8px;
    font-size: 12.5px; overflow: auto; max-height: 360px;
    font-family: "SFMono-Regular", Consolas, monospace;
}
.am-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 13.5px; }
.am-alert-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.am-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.am-alert a { color: var(--am-primary); font-weight: 600; }
.am-alert a:hover { text-decoration: underline; }
.am-empty { color: var(--am-muted); padding: 14px 4px; font-size: 13.5px; }

/* ── Consentimientos (Art. 57) ── */
/* Formulario responsive: grilla que colapsa a una columna en pantallas angostas. */
.am-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 16px;
}
.am-form-grid .am-label { width: auto; }
.am-consent-help { margin: 0; font-size: 12.5px; }
.am-file-input { padding: 6px 8px; font-size: 13px; cursor: pointer; }
.am-file-status { display: inline-block; margin-right: 8px; color: #166534; font-weight: 600; }
.am-consent-textarea { width: 100%; min-width: 0; resize: vertical; font: inherit; line-height: 1.4; }

/* Los consentimientos se presentan como TARJETAS (una por consentimiento), no como
   tabla: el proposito es un parrafo legal largo y una tabla de 7 columnas obligaba a
   scroll horizontal y superponia el boton "Revocar" al texto. Se reutiliza el patron
   de tarjeta ya existente (.am-acc-card / .am-acc-card-head / .am-acc-card-title /
   .am-acc-card-body). Pila vertical, sin ancho fijo, sin scroll horizontal. */
.am-consent-cards { display: flex; flex-direction: column; gap: 12px; }
/* Cabecera: titulo (tipo) a la izquierda; estado + "Revocar" a la derecha, en su
   propio contenedor flex, para que nunca se superpongan al titulo ni al texto. */
.am-consent-card .am-acc-card-head { flex-wrap: wrap; row-gap: 8px; }
.am-consent-card-actions {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap;
}
/* Cuerpo: cada dato en su propia linea; el proposito envuelve libremente. */
.am-consent-line { margin: 4px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.am-consent-line:first-child { margin-top: 0; }

/* ── Vista de correcciones (admin + trabajador) ──
   Acciones de cada fila de la tabla de marcaciones: envuelven en varias lineas en
   pantallas angostas para no forzar scroll horizontal (leccion aprendida). */
.am-corr-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Grupos de campos condicionales del modal "Proponer correccion". */
.corr-prop-group { margin-top: 6px; }
/* Plazo por vencer / vencido: rojo + peso, ademas del icono (no solo color). */
.am-corr-urgent { color: #b91c1c; font-weight: 600; }

/* ── Toast (feedback de acciones / acceso denegado) ── */
.motor-toast {
    position: fixed; bottom: 24px; right: 24px; max-width: 360px; z-index: 9999;
    background: #111827; color: #fff; padding: 12px 16px; border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); font-size: 13px;
    opacity: 0; transform: translateY(10px); pointer-events: none; transition: all .2s;
}
.motor-toast-show { opacity: 1; transform: translateY(0); }
.motor-toast-ok { background: #065f46; }
.motor-toast-err { background: #991b1b; }

/* ── Biometrico: enrolar huella + sync relojes ─────────────────────────── */
/* Badges de estado de la aplicacion del lector */
.am-helper-status-ok { background: #dcfce7; color: #166534; }
.am-helper-status-error { background: #fee2e2; color: #991b1b; }

/* Bloque "de donde obtener la aplicacion del lector". Siempre visible en la
   tarjeta del lector; se resalta cuando la aplicacion no responde. */
.am-helper-download-alert { border-left: 3px solid #991b1b; padding-left: 10px; }

/* Toggle de modo (segmentado real/demo) */
.am-mode-toggle { display: inline-flex; gap: 6px; border: 1px solid var(--am-border);
    border-radius: 8px; padding: 4px; background: #f8fafc; }
.am-mode-toggle label { display: flex; align-items: center; gap: 6px; padding: 4px 12px;
    border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--am-text); }
.am-mode-toggle input { accent-color: var(--am-primary); }
.am-mode-toggle label:has(input:checked) { background: #fff; box-shadow: var(--am-shadow);
    font-weight: 600; }

/* Selector de dedo: grid de 2 columnas (mano derecha / izquierda) */
.am-finger-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
    margin-top: 6px; max-width: 560px; }
.am-finger-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    border: 1px solid var(--am-border); border-radius: 8px; font-size: 13px;
    cursor: pointer; background: #fff; }
.am-finger-opt input { accent-color: var(--am-primary); }
.am-finger-opt:has(input:checked) { border-color: var(--am-primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.12); }

/* Preview del template capturado */
.am-fingerprint-preview { display: flex; gap: 16px; align-items: center;
    padding: 14px 16px; border: 1px dashed var(--am-primary); border-radius: 10px;
    background: #f5f9ff; }
.am-fp-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
    color: #fff; background: var(--am-primary); letter-spacing: 1px; }
.am-fp-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 4px 18px; font-size: 13px; flex: 1; }
.am-fp-meta .am-muted { font-size: 11.5px; margin-right: 4px; }
.am-fp-hash { grid-column: 1 / -1; }
.am-fp-hash code { font-size: 12px; }

/* Error de sync (truncado) en la tabla */
.am-sync-error { font-size: 11px; color: #b45309; max-width: 280px;
    white-space: normal; line-height: 1.3; margin-top: 3px; }

/* ── Auditoria (Art. 15): celdas "valor anterior" / "valor nuevo" ──
   Son las unicas celdas de una .am-table que llevan VARIOS pares campo:valor
   (una edicion puede cambiar cinco campos), asi que el `white-space: nowrap`
   por defecto de .am-table las estiraba hasta empujar la ultima columna fuera
   del contenedor. Envuelven y se acotan; el resto de la tabla no cambia.
   Bajo 640px manda .am-table-stack, que ya pone white-space: normal. */
/* Bloque interior de una celda de la tabla de auditoria.
   Existe por el modo apilado (.am-table-stack): ahi cada <td> es un flex y su
   contenido, si va suelto, queda como item anonimo con `min-width: auto`, que no
   baja de su tamano de contenido. Con el nombre y el RUT sueltos en la celda la
   tarjeta desbordaba ~10px a 360px. Envolviendo el contenido en este bloque, el
   item flex si puede encogerse y el ancho lo manda la tarjeta. */
.am-audit-cell {
    white-space: normal;
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Las celdas "valor anterior" / "valor nuevo" llevan VARIOS pares campo:valor
   (una edicion puede cambiar cinco campos). En escritorio se acotan para que la
   ultima columna no quede empujada fuera del contenedor; un max-width sobre el
   propio <td> seria solo una sugerencia con table-layout:auto, por eso va aca.
   Bajo 640px el ancho lo manda la tarjeta. */
.am-audit-value { max-width: 300px; }

@media (max-width: 640px) {
    .am-audit-value { max-width: 100%; }
}

/* ── Documentos Art. 47: tabs, estados, cards de contenido ─────────────── */
/* Barra de tabs (admin "Documentos" / empleado "Mis Documentos") */
.am-tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--am-border);
    margin-bottom: 18px; flex-wrap: wrap; }
.am-tab { border: none; background: transparent; padding: 10px 16px; font-size: 13px;
    font-weight: 600; color: var(--am-muted); cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -1px; }
.am-tab:hover { color: var(--am-text); }
.am-tab-active { color: var(--am-primary); border-bottom-color: var(--am-primary); }
.am-tab-badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px;
    background: #fef9c3; color: #854d0e; font-size: 11px; font-weight: 700; margin-left: 4px;
    text-align: center; }

/* Badges de estado de documento (gris/amarillo/verde/rojo/azul) */
.am-doc-status { display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; }
.am-doc-status-draft    { background: #eef2f7; color: #475569; }
.am-doc-status-pending  { background: #fef9c3; color: #854d0e; }
.am-doc-status-signed   { background: #dcfce7; color: #166534; }
.am-doc-status-rejected { background: #fee2e2; color: #991b1b; }
.am-doc-status-delivered{ background: #dbeafe; color: #1e40af; }

/* Card de detalle / notificacion + preview del contenido */
.am-doc-card { border: 1px solid var(--am-border); border-radius: 10px; padding: 14px 16px;
    margin-bottom: 14px; background: #fff; }
.am-doc-card-head { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.am-doc-content { white-space: pre-wrap; word-break: break-word; background: #f8fafc;
    border: 1px solid var(--am-border); border-radius: 8px; padding: 12px 14px;
    font-size: 13.5px; line-height: 1.5; color: var(--am-text); max-height: 360px; overflow: auto; }

/* Formulario de creacion / textarea */
.am-doc-form { display: flex; flex-direction: column; }
.am-textarea { width: 100%; min-height: 90px; resize: vertical; font-family: inherit;
    line-height: 1.5; }

/* ── Mantenedor de Usuarios (Bloque 4) ── */
.am-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px; margin-bottom: 12px; }
.am-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.am-form-error { color: #b91c1c; font-size: 13px; font-weight: 600; }
.am-form-ok { color: #047857; font-size: 13px; font-weight: 600; }
.am-label-check { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; }
/* Marcaje movil: los tipos van dentro de un .am-label (texto atenuado); solo
   Entrada/Salida, fijos, deben verse atenuados. */
.mm-types .mm-type-opt { color: var(--am-text); cursor: pointer; }
.mm-types .mm-type-opt.is-fixed { color: var(--am-muted); cursor: default; }
.mm-types .mm-type-opt input:not(:disabled) { cursor: pointer; }
.mm-types .mm-meal-warn { margin: 2px 0 0; font-size: 12px; color: #b45309; font-weight: 600; }
.mm-types .mm-meal-warn[hidden] { display: none; }
.am-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Modal del mantenedor (reusa .modal-overlay para el centrado) */
.am-modal-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; }
.am-modal-head { display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--am-border); }
.am-modal-head h3 { margin: 0; font-size: 16px; }
.am-modal-close { background: none; border: none; font-size: 22px; line-height: 1;
    cursor: pointer; color: var(--am-muted); }
.am-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.am-modal-foot { padding: 14px 20px; border-top: 1px solid var(--am-border);
    display: flex; gap: 10px; justify-content: flex-end; }
/* Modal ancho para el editor de plantillas de turno (cabecera + tabla de tramos) */
.am-modal-card-lg { max-width: 720px; }

/* Editor de plantillas de turno (shift_templates) */
.am-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle; border: 1px solid var(--am-border); }
.am-table-compact th, .am-table-compact td { padding: 6px 8px; }
.am-seg-midnight { font-size: 12px; color: var(--color-warning, #b45309); white-space: nowrap; }

/* Asignacion de turnos (Bloque 3): lista de empleados con checkbox + avisos */
.am-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 16px; max-height: 240px; overflow-y: auto; padding: 8px;
    border: 1px solid var(--am-border); border-radius: var(--radius-md, 8px); }
.am-check-item { display: flex; align-items: center; gap: 8px; font-size: 13px;
    padding: 2px 0; cursor: pointer; }
.am-warn-list { margin: 8px 0 0; padding-left: 18px; display: flex;
    flex-direction: column; gap: 6px; font-size: 13px; }

/* Caja destacada de la clave temporal */
.am-temp-pass { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radius-md); }
.am-temp-pass code { font-size: 20px; font-weight: 700; letter-spacing: 1px;
    color: #065f46; font-family: "SFMono-Regular", Consolas, monospace; }

/* Pantalla de cambio de contrasena */
.cambiar-pass-wrap { display: flex; justify-content: center; padding: 24px 12px; }
.cambiar-pass-card { width: 100%; max-width: 520px; }

/* Modo forzado: oculta navegacion y atajos del topbar hasta cambiar la clave */
body.pw-locked .app-sidebar .nav-menu,
body.pw-locked #btn-cambiar-pass { display: none; }
body.pw-locked .nav-item { pointer-events: none; }
/* ════════════════════════════════════════════════════════════════════════
   Mi Día — canal real, popup de comprobante y responsive fluido
   AGREGAR AL FINAL de demo.css
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Scroll horizontal contenido para la tabla de marcajes ──────────────
   Mantiene la tabla dentro de la card en pantallas angostas sin desbordar el
   layout. Solo aparece scroll cuando el contenido no cabe. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll .data-table {
    min-width: 460px;  /* evita que las columnas se aplasten ilegibles */
}

/* ─── Botón "Ver comprobante" en la celda de la tabla ────────────────────── */
.btn-receipt {
    width: auto;
    margin: 0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--color-bg-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
}

.btn-receipt:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Dos acciones (codigo de comprobante + detalle) lado a lado en la celda
   Comprobante. En movil se apilan para no desbordar la columna. */
.receipt-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 600px) {
    .receipt-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .receipt-actions .btn-receipt {
        width: 100%;
        text-align: center;
    }
}

/* ─── Modal compacto del comprobante ─────────────────────────────────────── */
.modal-dialog-sm {
    max-width: 460px;
}

.receipt-modal-hint {
    font-size: 13px;
    color: var(--color-text-soft);
    margin-bottom: 12px;
}

.receipt-modal-code {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: clamp(18px, 5vw, 26px);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
}

.receipt-modal-note {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 12px;
}

.receipt-modal-copied {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success);
    text-align: center;
}
/* ═══════════════════════════════════════════════════════════════════════════
   Carga masiva de usuarios (Mantenedor de Usuarios) — vista admin
   Ayuda plegable con el formato del archivo + resumen del resultado. Reusa el
   resto de las clases .am-* (card, table, alert, badge); solo se agrega lo que
   no existia.
   ═══════════════════════════════════════════════════════════════════════════ */
.am-help {
    border: 1px solid var(--am-border, #e2e8f0);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: #f8fafc;
    font-size: 13px;
}
.am-help > summary { cursor: pointer; font-weight: 600; }
.am-help-list { margin: 10px 0; padding-left: 20px; line-height: 1.7; }
.am-help-list code,
.am-pre {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12.5px;
}
.am-help-list code { background: #e2e8f0; padding: 1px 5px; border-radius: 4px; }
.am-pre {
    background: #0f172a; color: #e2e8f0;
    padding: 12px 14px; border-radius: 8px;
    overflow-x: auto; white-space: pre; margin: 6px 0 10px;
}
.am-alert-ok { background: #dcfce7; border: 1px solid #86efac; color: #166534; }

/* Resumen de la carga: contadores grandes, en linea y que envuelven en movil. */
.am-bulk-summary { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 6px; }
.am-bulk-figure { display: flex; flex-direction: column; }
.am-bulk-figure b { font-size: 20px; line-height: 1.2; }
.am-bulk-figure span { font-size: 12px; color: var(--am-muted, #64748b); }


/* ── Pagina publica de firma (/documents/accept/{token}) ─────────────────── */
/* Standalone: la abre el trabajador desde el correo, fuera del SPA. Por eso
   define su propio fondo y ancho de columna en vez de heredar el layout. */
.am-accept-body {
    background: #f1f5f9;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--am-text, #0f172a);
}
.am-accept-wrap { max-width: 760px; margin: 0 auto; padding: 32px 18px 48px; }
.am-accept-head { margin-bottom: 18px; }
.am-accept-head h1 { font-size: 22px; margin: 0 0 2px; color: #1f3864; }
.am-accept-card { padding: 22px 24px; }
.am-accept-foot { margin-top: 22px; text-align: center; font-size: 12px; }

/* Banda de estado: el color dice de entrada si el enlace sirve o no. */
.am-accept-state { border-radius: 10px; padding: 14px 16px; border-left: 4px solid; }
.am-accept-state h2 { font-size: 17px; margin: 0 0 4px; }
.am-accept-state p { margin: 0; font-size: 14px; }
.am-accept-state-pending   { background: #fef9c3; border-color: #ca8a04; color: #713f12; }
.am-accept-state-signed    { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.am-accept-state-rejected  { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }
.am-accept-state-expired   { background: #ffedd5; border-color: #ea580c; color: #7c2d12; }
.am-accept-state-cancelled { background: #eef2f7; border-color: #64748b; color: #334155; }
.am-accept-state-not_found { background: #eef2f7; border-color: #64748b; color: #334155; }

/* Ficha de metadatos: etiqueta a la izquierda, valor a la derecha. */
.am-accept-meta {
    display: grid; grid-template-columns: 200px 1fr; gap: 6px 14px;
    margin: 18px 0 0; font-size: 13.5px;
}
.am-accept-meta dt { color: var(--am-muted, #64748b); }
.am-accept-meta dd { margin: 0; }

.am-accept-step { border-top: 1px solid var(--am-border, #e2e8f0); padding-top: 16px; }
.am-accept-step h3 { font-size: 15px; margin: 0 0 10px; color: #1f3864; }
.am-accept-form { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }

.am-accept-msg { margin: 10px 0 0; font-size: 13.5px; }
.am-accept-msg-err { color: #991b1b; }
.am-accept-msg-ok  { color: #166534; }

@media (max-width: 560px) {
    .am-accept-meta { grid-template-columns: 1fr; gap: 2px 0; }
    .am-accept-meta dt { margin-top: 8px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Recepcion del reloj (diagnostico ADMS, solo lectura, solo tenant_admin)
   ════════════════════════════════════════════════════════════════════════
   Las tablas usan .am-table-stack (tarjetas bajo 640px). Lo propio de esta
   vista: la barra de actualizacion, el semaforo de antiguedad y el payload
   crudo expandible, que envuelve dentro de su celda para no forzar scroll
   horizontal de la pagina. */
.rr-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin-bottom: 14px;
}
.rr-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.rr-updated { font-size: 12.5px; }
.rr-check { flex-direction: row; align-items: center; gap: 6px; align-self: flex-end; padding-bottom: 8px; }

.rr-fresh { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rr-light {
    display: inline-block; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
    vertical-align: middle;
}
.rr-light-ok   { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.rr-light-warn { background: #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,0.18); }
.rr-light-bad,
.rr-light-none { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.rr-legend { font-size: 12px; margin: 10px 0 0; line-height: 1.8; }

.rr-payload summary { cursor: pointer; color: #1e40af; font-weight: 600; }
.rr-payload pre {
    margin: 6px 0 0; padding: 8px 10px; font-size: 11.5px; line-height: 1.4;
    background: #f8fafc; border: 1px solid var(--am-border); border-radius: 6px;
    white-space: pre; width: 360px; max-height: 260px; overflow: auto; text-align: left;
}
/* Celdas de dos lineas (alias + serial, nombre + RUT). En escritorio no se
   parten: la tabla crece y scrollea DENTRO de .am-table-wrap, nunca la pagina. */
.rr-cell { min-width: 0; line-height: 1.45; }

@media (max-width: 640px) {
    /* En tarjeta el contenido va en un bloque que si puede encogerse (mismo
       motivo que .am-audit-cell) y el <pre> envuelve en vez de medir 360px. */
    .rr-cell { white-space: normal; overflow-wrap: anywhere; text-align: right; }
    .rr-payload pre { width: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
    /* En tarjeta, el payload ocupa todo el ancho bajo su etiqueta. */
    .am-table-stack tbody td.rr-payload-cell { display: block; }
    .am-table-stack tbody td.rr-payload-cell::before { display: block; margin-bottom: 4px; }
    .rr-payload pre { max-width: 100%; }
    .rr-check { align-self: auto; padding-bottom: 0; }
}

/* Marcar: tipo esperado segun la ultima marca del dia (solo sugerencia). */
.btn-punch.is-expected {
    outline: 3px solid #1e3a8a;
    outline-offset: 2px;
}
.punch-expected {
    margin: 12px 0 0;
    font-size: 0.9rem;
    color: #475569;
}

/* Tabla de pactos (Documentos enviados): el texto libre envuelve y la tabla
   scrollea dentro de su contenedor en vez de desbordar la tarjeta. */
.am-table-wrap-contained { max-width: 100%; overflow-x: auto; }
.am-table-pactos td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.am-table-pactos .am-pacto-reason { min-width: 180px; max-width: 360px; }
.am-table-pactos .am-pacto-actions { min-width: 140px; }
.am-table-pactos .am-pacto-actions .am-btn { white-space: normal; margin: 2px 0; }