:root {
    --color-bg: #eef6f2;
    --color-surface: #ffffff;
    --color-text: #1a211d;
    --color-muted: #5c6660;
    --color-primary: #0f8b6c;
    --color-primary-dark: #0b3a2e;
    --color-primary-soft: #e3f5ee;
    --color-success: #158049;
    --color-success-soft: #e4f6ec;
    --color-danger: #c0332f;
    --color-danger-soft: #fceceb;
    --color-warning: #a5620a;
    --color-warning-soft: #fdf1e0;
    --color-border: #dde6e1;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(11, 58, 46, 0.06);
    --shadow-md: 0 8px 24px rgba(11, 58, 46, 0.08);
    --shadow-lg: 0 20px 48px rgba(11, 58, 46, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    /* Base más grande que el default del navegador (16px -> 18px) para que
       todo el sitio (que usa rem) escale hacia arriba: varios usuarios
       tienen dificultad para leer letra chica. */
    font-size: 112.5%;
}

/* Preferencia de tamaño de letra por cuenta (ver widget de ayuda): escala
   el mismo html { font-size } de base, así que todo el sitio (que usa rem)
   crece o encoge junto con el texto. */
html.text-grande {
    font-size: 125%;
}

html.text-muy-grande {
    font-size: 140%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(15, 139, 108, 0.10), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(11, 58, 46, 0.07), transparent 55%),
        var(--color-bg);
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: 0.005em;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

.container-wide {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

/* Como .container, pero pensado para formularios largos: en pantallas
   angostas es idéntico (una columna), y desde 760px se ensancha para que
   .form-grid pueda mostrar los campos en 2 columnas en vez de una sola
   columna larga desperdiciando el resto del escritorio. */
.container-form {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

@media (min-width: 760px) {
    .container-form {
        max-width: 720px;
    }
}

/* Agrupa pares label+input de un formulario para poder ponerlos en 2
   columnas en desktop sin perder el orden label-arriba/input-abajo. Los
   campos que deben ocupar el ancho completo (textarea, listas, etc.) usan
   .form-field-wide. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (min-width: 760px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    .form-field-wide {
        grid-column: 1 / -1;
    }
}

/* Fila de botones de acción (ej. Confirmar/Volver a editar): apilados a
   todo el ancho en mobile, uno al lado del otro en desktop. */
.form-actions {
    display: flex;
    flex-direction: column;
}

@media (min-width: 760px) {
    .form-actions {
        flex-direction: row;
        gap: 12px;
    }

    .form-actions > button,
    .form-actions > .btn {
        width: auto;
        flex: 1;
    }
}

/* Marca: logo + nombre, reutilizada en la barra de admin y en las
   pantallas de acceso (login, OTP, recuperar clave, etc). */
.brand-mark {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(11, 58, 46, 0.25);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-word {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: inherit;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 4px 0 22px;
    text-align: center;
}

.auth-brand .brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
}

.auth-brand .brand-word {
    font-size: 1.35rem;
}

.auth-brand .brand-tagline {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}

h1 {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 16px;
}

p.subtitle {
    color: var(--color-muted);
    margin: 0 0 20px;
    font-size: 1.05rem;
}

label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 14px 0 6px;
}

.campo-requerido {
    color: var(--color-danger);
    opacity: 0.75;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15, 139, 108, 0.15);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

button,
.btn {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 15px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    margin-top: 18px;
    text-decoration: none;
    min-height: 48px;
    box-shadow: 0 1px 2px rgba(11, 58, 46, 0.12);
    transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

button:hover,
.btn:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 6px 16px rgba(11, 58, 46, 0.22);
}

button:active,
.btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(11, 58, 46, 0.12);
}

.btn-lg {
    padding: 22px;
    font-size: 1.25rem;
}

.btn-success {
    background: var(--color-success);
}

.btn-success:hover {
    background: #0e6339;
}

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

.btn-danger:hover {
    background: #9a2724;
}

.btn-secondary {
    background: #4b5468;
}

.btn-secondary:hover {
    background: #363d4d;
}

/* Grupo de botones grandes de selección única (radio) para reemplazar un
   <select> cuando hay pocas opciones y conviene un toque directo en vez de
   desplegar una lista (ej. "Tipo de visita" en el módulo del guardia). */
.choice-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 4px;
}

.choice-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.choice-btn input[type="radio"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.choice-btn.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}


/* Selector de pestañas (ej. portada: "Solicitar acceso" vs "Accesos"). */
.tabs {
    display: flex;
    gap: 6px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin: 4px 0 22px;
}

.tab-btn {
    flex: 1;
    width: auto;
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 10px 12px;
    margin: 0;
    min-height: unset;
    border-radius: calc(var(--radius-sm) - 4px);
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tab-btn:hover {
    background: rgba(15, 139, 108, 0.12);
    color: var(--color-text);
    box-shadow: none;
}

.tab-btn.is-active {
    background: var(--color-surface);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-sm);
}

.tabs-nav {
    margin-top: 0;
    gap: 2px;
}

.tabs-nav .tab-btn {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    text-decoration: none;
    padding: 10px 2px;
    font-size: 0.8rem;
}

.tab-panel[hidden] {
    display: none;
}

/* Botones chicos dentro de filas de tabla (Guardar/Activar/Desactivar).
   Más grandes que el 0.8rem original: siguen siendo "compactos" respecto
   al botón principal, pero legibles y fáciles de tocar. */
.btn-compact {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 10px 16px;
    font-size: 0.95rem;
    min-height: 40px;
}

.alert {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid transparent;
}

.alert-error {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: rgba(192, 51, 47, 0.18);
}

.alert-success {
    background: var(--color-success-soft);
    color: var(--color-success);
    border-color: rgba(21, 128, 73, 0.18);
}

.alert-info {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border-color: rgba(15, 139, 108, 0.18);
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Grillas de permisos (persona x ubicación/tipo): primera columna fija para
   no perder de vista a quién corresponde cada fila al hacer scroll lateral
   con muchas columnas. */
.grid-permisos th:first-child,
.grid-permisos td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    white-space: nowrap;
}

.grid-permisos tbody tr:hover td:first-child {
    background: #f7f9fd;
}

.grid-permisos th:not(:first-child) {
    min-width: 120px;
    max-width: 170px;
    white-space: normal;
}

.grid-permisos td:not(:first-child) {
    text-align: center;
}

.grid-permisos input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* En mobile, columnas de 120-170px por casillero dejan ver como mucho una
   columna completa por pantalla: cada encabezado queda a medias cortado en
   el borde y hay que arrastrar mucho para llegar a las últimas ubicaciones.
   Se achican columna y letra para que quepan más ubicaciones a la vista. */
@media (max-width: 760px) {
    .grid-permisos th,
    .grid-permisos td {
        padding: 8px 6px;
    }

    .grid-permisos th:not(:first-child) {
        min-width: 76px;
        max-width: 94px;
        font-size: 0.72rem;
    }

    .grid-permisos td:first-child {
        font-size: 0.92rem;
    }
}

/* Barra de filtros (buscador + selects) sobre una tabla. */
.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 14px;
}

.filter-bar .filter-field {
    flex: 1;
    min-width: 170px;
}

.filter-bar .filter-field label {
    margin: 0 0 6px;
}

.filter-bar .filter-field input,
.filter-bar .filter-field select {
    margin: 0;
}

.filter-bar .filter-count {
    font-size: 0.9rem;
    color: var(--color-muted);
    white-space: nowrap;
    padding-bottom: 12px;
}

/* En mobile una tabla ancha (muchas columnas) sigue siendo ilegible aunque
   tenga scroll horizontal: .table-stack la convierte en una lista de
   tarjetas (una fila = una tarjeta), mostrando la etiqueta de cada columna
   junto a su valor via el atributo data-label de cada <td>. Las celdas con
   formularios/botones de acción usan la clase td-block para apilarse en
   vertical en vez de forzar el layout horizontal etiqueta-valor. */
@media (max-width: 760px) {
    .table-stack table,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table-stack tbody tr {
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        margin-bottom: 12px;
        padding: 4px 14px;
    }

    /* Columna (etiqueta arriba, valor abajo) en vez de fila etiqueta-valor:
       con columnas de texto largo (ej. "Opciones / Categoría / Grupo") una
       fila con justify-content:space-between desbordaba el valor fuera de
       la tarjeta en vez de ajustarlo al ancho disponible. */
    .table-stack td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
        overflow-wrap: break-word;
    }

    .table-stack td:last-child {
        border-bottom: none;
    }

    .table-stack td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-muted);
    }

    /* !important: varias celdas de acciones traen su propio style="display:flex/inline"
       para el layout de escritorio (botones en fila) — en mobile siempre debe
       apilarse en bloque, sin depender de que cada página no traiga ese inline style. */
    .table-stack td.td-block {
        display: block !important;
        text-align: left;
    }

    .table-stack td.td-block::before {
        display: block;
        margin-bottom: 8px;
    }

    /* Las celdas de acciones traen varios <form style="display:inline"> con un
       botón cada uno (Desactivar/Restablecer/Eliminar...): en desktop fluyen
       en fila, pero en mobile ese inline-block wrapping los hacía solaparse
       verticalmente. Se fuerzan a bloque, uno por línea y ancho completo. */
    .table-stack td.td-block form {
        display: block !important;
        margin: 0 0 8px;
    }

    .table-stack td.td-block form:last-child {
        margin-bottom: 0;
    }

    .table-stack td.td-block form button {
        width: 100%;
    }

    /* Botones sueltos (fuera de un <form>, asociados via form="id") como el
       "Guardar" de personal.php: mismo trato de bloque + separación. */
    .table-stack td.td-block > button {
        display: block !important;
        width: 100%;
        margin: 0 0 8px;
    }

    .table-stack td.td-block > button:last-child {
        margin-bottom: 0;
    }
}

/* Inputs/selects editables dentro de celdas de tabla: sin esto, en un
   contenedor flex se aplastan a casi 0px. Se deja que la tabla se
   ensanche y sea la .table-scroll la que da el scroll horizontal. */
td input[type="text"],
td select {
    min-width: 140px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

th, td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 1rem;
}

th {
    color: var(--color-muted);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

tbody tr {
    transition: background 0.12s ease;
}

tbody tr:hover {
    background: #f7f9fd;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.badge-pendiente { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-aprobado { background: var(--color-success-soft); color: var(--color-success); }
.badge-rechazado { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-expirado { background: #e7e9f2; color: var(--color-muted); }
.badge-propia { background: #e8eefc; color: #2d4a9a; }
.badge-pase { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* Tipo de acceso en la vista única del guardia (solicitud / visita / vehículo). */
.badge-tipo-solicitud { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge-tipo-visita { background: #e8eefc; color: #2d4a9a; }
.badge-tipo-vehiculo { background: #f3e8fc; color: #6a2d9a; }

.acciones-rapidas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.acciones-rapidas .btn-lg { flex: 1 1 160px; text-align: center; text-decoration: none; color: #fff; }

.filtro-tipos { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.filtro-tipos .chip {
    width: auto; margin: 0; min-height: unset;
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted);
    font-weight: 700; font-size: 0.9rem; padding: 8px 14px; border-radius: 999px; box-shadow: none; cursor: pointer;
}
.filtro-tipos .chip.is-active { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.filtro-tipos .chip-count { opacity: 0.8; margin-left: 4px; }

.seccion-estado { margin: 22px 0 10px; font-size: 1.05rem; color: var(--color-muted); }
/* Panel del guardia compacto en todo tamaño: la tarjeta de saludo y los
   filtros ocupaban toda la pantalla (incluso en notebooks) y la lista de
   accesos quedaba fuera de vista. */
.saludo-guardia { padding: 14px 16px; margin-bottom: 12px; }
.saludo-guardia h1 { font-size: 1.15rem; margin: 0; }
.saludo-guardia .subtitle { display: none; }
.saludo-guardia .btn-lg { padding: 12px; font-size: 1rem; margin-top: 10px; }
.saludo-guardia .acciones-rapidas { flex-wrap: nowrap; gap: 8px; margin-top: 0; }
.saludo-guardia .acciones-rapidas .btn-lg { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.saludo-guardia .solo-angosto { display: none; }

.saludo-guardia ~ .filtro-tipos { margin-bottom: 4px; }
.saludo-guardia ~ .filtro-tipos .chip { padding: 6px 12px; }
.saludo-guardia ~ .seccion-estado { margin-top: 12px; }

@media (max-width: 420px) {
    .saludo-guardia .solo-ancho { display: none; }
    .saludo-guardia .solo-angosto { display: inline; }
}

/* Solo en celular los filtros van en una fila deslizable; en pantallas
   anchas bajan a otra línea para que ninguno quede cortado. */
@media (max-width: 760px) {
    .saludo-guardia ~ .filtro-tipos { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .saludo-guardia ~ .filtro-tipos::-webkit-scrollbar { display: none; }
    .saludo-guardia ~ .filtro-tipos .chip { flex-shrink: 0; }
}

nav.topnav {
    background: var(--color-primary-dark);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    box-shadow: 0 2px 12px rgba(11, 58, 46, 0.18);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav.topnav .nav-brand {
    color: #fff;
}

nav.topnav .nav-brand .brand-word {
    color: #fff;
}

nav.topnav .topnav-links {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    flex: 1;
}

nav.topnav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 500;
    opacity: 0.82;
    transition: opacity 0.15s ease;
}

nav.topnav a:hover {
    opacity: 1;
    text-decoration: underline;
}

nav.topnav .spacer {
    flex: 1;
}

/* Botones grandes (ícono arriba + texto abajo) para el menú principal de
   guardia/aprobador: más fáciles de ver y tocar que un link de texto plano,
   pensado para que usuarios adultos mayores identifiquen cada opción de un
   vistazo. No aplica al nav de admin (sus links viven dentro de
   .topnav-links, un nivel más abajo). Van agrupados en .topnav-actions (en
   vez de ser hijos directos de nav) para poder forzarlos a una sola fila
   que se reparte el ancho completo en el celular, en vez de envolverse en
   2 filas. */
nav.topnav .topnav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

nav.topnav .topnav-actions > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 104px;
    min-height: 64px;
    padding: 10px 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    border-radius: 12px;
    opacity: 1;
}

nav.topnav .topnav-actions > a .nav-icon {
    font-size: 1.4rem;
    line-height: 1;
}

/* Algunos botones tienen una etiqueta corta alternativa (.nav-label-short)
   para cuando no caben 2 palabras en una columna angosta del celular; en
   desktop se usa la etiqueta completa. */
.nav-label-short {
    display: none;
}

nav.topnav .topnav-actions > a:hover {
    background: #cdece0;
    opacity: 1;
    text-decoration: none;
}

nav.topnav .topnav-actions > a:active {
    background: #bfe6d6;
}

nav.topnav .topnav-actions > a[href*="logout.php"] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

nav.topnav .topnav-actions > a[href*="logout.php"]:hover {
    background: #f9dcda;
}

nav.topnav .topnav-actions > a[href*="logout.php"]:active {
    background: #f5cbc8;
}

/* Bajo 700px los botones dejan de tener un ancho mínimo fijo y en vez de
   envolverse en varias filas se reparten el ancho completo en una sola
   fila (encogen parejo, el texto puede partirse en 2 líneas dentro de su
   propio botón, pero la fila de botones no se parte en 2). */
@media (max-width: 700px) {
    nav.topnav .topnav-actions {
        flex-basis: 100%;
        gap: 4px;
    }

    nav.topnav .topnav-actions > a {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 1px;
        font-size: 0.64rem;
        min-height: 58px;
        overflow: hidden;
        gap: 3px;
        letter-spacing: -0.01em;
    }

    nav.topnav .topnav-actions > a .nav-icon {
        font-size: 1.15rem;
    }

    nav.topnav .topnav-actions > a .nav-label {
        overflow-wrap: anywhere;
        hyphens: manual;
    }

    .nav-label-full {
        display: none;
    }

    .nav-label-short {
        display: inline;
    }
}

nav.topnav .topnav-toggle {
    display: none;
}

/* Menús desplegables del nav de admin (agrupan varias páginas relacionadas
   bajo un solo título, ej. "Usuarios" contiene Usuarios/Personal/Grupos). */
nav.topnav .nav-group {
    position: relative;
}

nav.topnav .nav-group summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    cursor: pointer;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 500;
    opacity: 0.82;
    transition: opacity 0.15s ease;
}

nav.topnav .nav-group summary::-webkit-details-marker {
    display: none;
}

nav.topnav .nav-group summary:hover,
nav.topnav .nav-group[open] summary {
    opacity: 1;
}

nav.topnav .nav-group summary::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

nav.topnav .nav-group[open] summary::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

nav.topnav .nav-group-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

nav.topnav .nav-group-menu a {
    color: var(--color-text);
    opacity: 1;
    padding: 9px 12px;
    border-radius: 8px;
    font-weight: 500;
}

nav.topnav .nav-group-menu a:hover {
    background: var(--color-primary-soft);
    text-decoration: none;
}

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

/* Botones de atrás/adelante/recargar: solo tienen sentido cuando el sistema
   corre como app instalada (sin barra del navegador), así que permanecen
   ocultos hasta que app-toolbar.js detecta ese modo y marca <html>. */
.app-toolbar {
    display: none;
    align-items: center;
    gap: 6px;
}

html.is-app-standalone .app-toolbar {
    display: flex;
}

.app-toolbar button {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.app-toolbar button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.app-toolbar button:active {
    background: rgba(255, 255, 255, 0.28);
}

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notif-bell .notif-badge {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-danger);
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-primary-dark);
}

.buscador-accesos {
    max-width: 480px;
    margin: 16px auto 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.buscador-accesos .buscador-icono {
    flex-shrink: 0;
    font-size: 1rem;
    opacity: 0.6;
}

.buscador-accesos input {
    width: auto;
    flex: 1;
    margin: 0;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 1rem;
}

.buscador-accesos input:focus {
    box-shadow: none;
}

/* Menú hamburguesa en pantallas angostas: el sistema se usa harto desde el
   celular y una fila de 8 links envueltos ocupaba media pantalla. */
@media (max-width: 760px) {
    nav.topnav .topnav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        align-self: flex-start;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 8px;
        color: #fff;
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }

    nav.topnav .topnav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 2px;
    }

    /* El menú puede tener más links de los que caben en pantalla (Usuarios,
       Ubicación, Visitas, Vehículos, Reporte, Permisos...). Como el nav es
       sticky, si el panel abierto mide más que el alto visible queda "cortado"
       y no hay forma de hacer scroll para ver el resto: se limita su alto y
       se le da scroll propio. */
    nav.topnav .topnav-links.is-open {
        display: flex;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    nav.topnav .topnav-links a {
        padding: 13px 10px;
        border-radius: 8px;
    }

    nav.topnav .topnav-links a:active {
        background: rgba(255, 255, 255, 0.12);
    }

    nav.topnav .spacer {
        display: none;
    }

    nav.topnav .nav-group summary {
        padding: 13px 10px;
        border-radius: 8px;
        opacity: 1;
    }

    nav.topnav .nav-group summary:active {
        background: rgba(255, 255, 255, 0.12);
    }

    nav.topnav .nav-group-menu {
        position: static;
        min-width: 0;
        padding: 0 0 4px 14px;
        background: transparent;
        box-shadow: none;
    }

    nav.topnav .nav-group-menu a {
        color: #fff;
        opacity: 0.82;
        padding: 11px 10px;
    }

    nav.topnav .nav-group-menu a:hover,
    nav.topnav .nav-group-menu a:active {
        opacity: 1;
        background: rgba(255, 255, 255, 0.12);
    }
}

.access-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}

.access-card .meta {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.access-card h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 700;
}

.campos-completables-guardia {
    background: #fff8e6;
    border: 1px solid #f0d78c;
    border-radius: var(--radius);
    padding: 12px 14px;
}

.campos-completables-guardia label {
    margin-top: 8px;
}

.campos-completables-guardia label:first-of-type {
    margin-top: 0;
}

/* Plegado: una línea con los valores; al abrirlo aparecen los campos. */
details.campos-completables-guardia { padding: 0; margin-bottom: 12px; }
details.campos-completables-guardia > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.campos-completables-guardia > :last-child { margin-bottom: 12px; }
details.campos-completables-guardia summary {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; list-style: none;
    font-size: 0.95rem;
}
details.campos-completables-guardia summary::-webkit-details-marker { display: none; }
details.campos-completables-guardia .resumen-valores {
    flex: 1; min-width: 0; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
details.campos-completables-guardia .resumen-editar { flex-shrink: 0; color: var(--color-muted); font-size: 0.85rem; font-weight: 700; }
details.campos-completables-guardia[open] summary { border-bottom: 1px solid #f0d78c; margin-bottom: 10px; }
details.campos-completables-guardia[open] .resumen-editar { display: none; }

/* Botones de cada acceso en una fila y más bajos: la acción principal más ancha. */
.acciones-acceso { display: flex; gap: 8px; }
.acciones-acceso .btn-lg { margin-top: 0; padding: 12px; font-size: 1.05rem; min-height: 48px; white-space: nowrap; }
@media (max-width: 420px) {
    .acciones-acceso .btn-lg { padding: 12px 6px; font-size: 0.95rem; }
    .acciones-acceso .btn-lg + .btn-lg { font-size: 0.9rem; }
}
.acciones-acceso .btn-lg:first-child { flex: 3 1 0; }
.acciones-acceso .btn-lg + .btn-lg { flex: 2 1 0; padding: 12px 8px; font-size: 0.95rem; white-space: nowrap; }

.helper-text {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-top: 6px;
}

/* Widget de ayuda flotante */
.help-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f8b6c, var(--color-primary-dark));
    box-shadow: 0 8px 20px rgba(11, 58, 46, 0.35);
    animation: help-fab-bounce 2.4s ease-in-out infinite;
}

.help-fab:hover {
    background: linear-gradient(135deg, #0c6f57, var(--color-primary-dark));
}

.help-fab.is-active {
    animation: none;
}

.help-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
}

.help-fab-label {
    font-size: 0.9rem;
}

@keyframes help-fab-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* En celular el botón con texto "Ayuda" pegado a la esquina alcanzaba a taparse
   con botones de acción (ej. "Rechazar") en tarjetas anchas. Icono solo y
   centrado abajo, lejos de cualquier botón de esquina. */
@media (max-width: 760px) {
    .help-fab {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        animation-name: help-fab-bounce-center;
    }

    .help-fab.is-active {
        animation: none;
        transform: translateX(-50%);
    }

    .help-fab-label {
        display: none;
    }

    .help-panel {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

@keyframes help-fab-bounce-center {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

.help-panel {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 1000;
    width: min(340px, calc(100vw - 40px));
    max-height: min(480px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.help-panel[hidden] {
    display: none;
}

.help-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #0f8b6c, var(--color-primary-dark));
    color: #fff;
}

.help-panel-header h3 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.help-panel-header p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
}

.help-panel-close {
    width: auto;
    margin: 0;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 0.9rem;
}

.help-panel-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.help-panel-body {
    padding: 16px 18px;
    overflow-y: auto;
}

.help-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.help-item:last-of-type {
    border-bottom: none;
}

.help-item h4 {
    margin: 0 0 4px;
    font-size: 0.9rem;
}

.help-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.4;
}

/* Dashboard de métricas (admin/dashboard.php). */
.dash-filtros {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.dash-filtros .filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-filtros label {
    margin: 0;
    font-size: 0.85rem;
}

.dash-filtros input[type="date"] {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}

.dash-filtros button {
    width: auto;
    margin: 0;
    padding: 10px 18px;
    min-height: 42px;
}

.dash-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-preset {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.dash-preset:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.dash-preset.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.kpi-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    line-height: 1.1;
}

.kpi-sub {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-top: 6px;
}

.kpi-card.kpi-danger .kpi-value { color: var(--color-danger); }
.kpi-card.kpi-warning .kpi-value { color: var(--color-warning); }

.dash-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 760px) {
    .dash-cols { grid-template-columns: 1fr; }
}

.barlist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.barlist-row {
    display: grid;
    grid-template-columns: 130px 1fr 64px;
    align-items: center;
    gap: 10px;
}

.barlist-label {
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barlist-track {
    background: var(--color-primary-soft);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.barlist-fill {
    background: var(--color-primary);
    height: 100%;
    border-radius: 999px;
}

.barlist-value {
    font-size: 0.82rem;
    color: var(--color-muted);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .barlist-row { grid-template-columns: 92px 1fr 56px; }
}

.daily-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 150px;
    overflow-x: auto;
    padding: 6px 2px 0;
}

.daily-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1 0 auto;
    min-width: 10px;
    height: 100%;
}

.daily-bar {
    width: 100%;
    max-width: 20px;
    background: var(--color-primary);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.daily-bar-label {
    font-size: 0.62rem;
    color: var(--color-muted);
    margin-top: 4px;
    white-space: nowrap;
}

.dash-empty {
    color: var(--color-muted);
    font-size: 0.9rem;
    padding: 12px 0;
}

/* Ficha imprimible de una solicitud individual (admin/solicitud_detalle.php). */
.solicitud-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.solicitud-actions .btn {
    width: auto;
    margin: 0;
}

.solicitud-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

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

.solicitud-folio {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: right;
}

.solicitud-folio strong {
    font-size: 1.4rem;
    color: var(--color-primary-dark);
    letter-spacing: 0;
    display: block;
    margin-top: 2px;
}

.solicitud-section {
    margin-bottom: 22px;
}

.solicitud-section:last-child {
    margin-bottom: 0;
}

.solicitud-section h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-muted);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.solicitud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 24px;
}

.solicitud-field label {
    display: block;
    margin: 0 0 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: none;
}

.solicitud-field .valor {
    font-size: 1rem;
    color: var(--color-text);
}

.solicitud-persona-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.solicitud-persona-card:last-child {
    margin-bottom: 0;
}

.solicitud-persona-card .persona-nombre {
    font-weight: 700;
    margin-bottom: 10px;
}

.folio-link {
    color: var(--color-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.folio-link:hover {
    text-decoration: underline;
}

@media print {
    nav.topnav, .solicitud-actions, .help-widget {
        display: none !important;
    }

    body {
        background: #fff !important;
    }

    .container-wide {
        max-width: none;
        padding: 0;
    }

    .solicitud-card {
        box-shadow: none;
        border: none;
        padding: 0;
    }
}

.text-size-widget {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.text-size-label {
    margin: 0 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-muted);
}

.text-size-options {
    display: flex;
    gap: 8px;
}

.text-size-btn {
    width: auto;
    margin: 0;
    min-height: 40px;
    padding: 0 16px;
    font-weight: 700;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    box-shadow: none;
}

.text-size-btn:hover {
    background: rgba(15, 139, 108, 0.22);
}

.text-size-btn.is-active {
    background: var(--color-primary);
    color: #fff;
}

.text-size-btn.text-size-grande {
    font-size: 1.2rem;
}

.text-size-btn.text-size-muy-grande {
    font-size: 1.4rem;
}

.text-size-mensaje {
    margin: 8px 0 0;
}

.text-size-mensaje:empty {
    display: none;
}

.help-panel-footer {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--color-muted);
    text-align: center;
}

/* Admin > Personal: acciones en una sola fila y aviso de posible duplicado. */
.celda-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 250px; }
.celda-acciones .btn-compact { width: auto; white-space: nowrap; }
.celda-acciones form { margin: 0; }
.aviso-duplicado { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--color-warning); }

/* Solicitud: selector de personas en acordeón con buscador y chips. */
.personas-multiple {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    margin-bottom: 16px;
    overflow: hidden;
}
.personas-multiple.is-open { border-color: var(--color-primary); }
.personas-cabecera,
.personas-cabecera:hover,
.personas-cabecera:active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    background: transparent;
    color: var(--color-muted);
    box-shadow: none;
    transform: none;
    border-radius: 0;
}
.personas-cabecera:hover { background: var(--color-primary-soft); }
.personas-cabecera:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.personas-multiple.tiene-seleccion .personas-contador { color: var(--color-primary-dark); }
.personas-chevron {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform 0.15s ease;
}
.personas-multiple.is-open .personas-chevron { transform: rotate(-135deg); margin-top: 4px; }
.personas-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.personas-chips:not(:empty) { padding-bottom: 12px; }
button.persona-chip,
button.persona-chip:hover,
button.persona-chip:active {
    width: auto;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.82rem;
    line-height: 1.2;
    font-weight: 600;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    box-shadow: none;
    transform: none;
}
button.persona-chip::after { content: " ×"; opacity: 0.6; }
button.persona-chip:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.personas-panel { border-top: 1px solid var(--color-border); padding: 12px 14px; }
.personas-buscar {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}
.personas-buscar:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(15, 139, 108, 0.15); }
.personas-panel .personas-acciones { margin: 0 0 6px; }
.personas-lista { max-height: 280px; overflow-y: auto; }
.personas-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    margin: 0;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.personas-item:hover { background: var(--color-primary-soft); }
.personas-item input { width: auto; margin: 0; }

/* Menú de botones grandes: con 5-6 botones ya no caben en una fila entre
   700px y ~1100px (sobre todo con texto grande) y el último ("Salir") quedaba
   fuera de pantalla. Se permite que bajen a una segunda fila y se achica
   un poco el ancho mínimo de cada botón. */
@media (min-width: 701px) {
    nav.topnav .topnav-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
    }

    nav.topnav .topnav-actions > a {
        min-width: 88px;
    }
}

/* Historial del aprobador: más ancho que .container-wide y tabla densa
   (5 columnas agrupadas en vez de 9, texto y paddings más chicos) para
   que cada solicitud ocupe 2-3 líneas y no 6-8. */
.historial-compacto {
    max-width: 1320px;
}

.historial-compacto h1 {
    margin-bottom: 4px;
}

.historial-compacto .subtitle {
    margin-bottom: 14px;
}

@media (max-width: 760px) {
    .historial-compacto h1 {
        font-size: 1.5rem;
    }

    .historial-compacto .subtitle {
        font-size: 0.92rem;
    }

    .historial-compacto > .card {
        padding: 14px;
    }
}

/* Filtros sin etiqueta visible (cada select se explica con su primera
   opción: "Todos los estados", "Todos los tipos"...): caben en una fila en
   escritorio y de a dos por fila en el celular. Las etiquetas quedan para
   lectores de pantalla. */
.filter-bar-compacta {
    gap: 8px;
    align-items: center;
}

.filter-bar-compacta .filter-field {
    flex: 1 1 10.5rem;
    min-width: 10.5rem;
}

.filter-bar-compacta .filter-field:first-child {
    flex: 2 1 16rem;
}

.filter-bar-compacta .filter-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.filter-bar-compacta .filter-field input,
.filter-bar-compacta .filter-field select {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.92rem;
}

.filter-bar-compacta .filter-count {
    padding-bottom: 0;
}

@media (max-width: 760px) {
    .filter-bar-compacta {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .filter-bar-compacta .filter-field {
        min-width: 0;
    }

    .filter-bar-compacta .filter-field input,
    .filter-bar-compacta .filter-field select {
        font-size: 0.85rem;
        padding-left: 10px;
    }

    .filter-bar-compacta .filter-field:first-child,
    .filter-bar-compacta .filter-count {
        grid-column: 1 / -1;
    }
}

.historial-compacto td:first-child {
    min-width: 170px;
}

.historial-compacto td:last-child {
    min-width: 10rem;
}

.historial-compacto th,
.historial-compacto td {
    padding: 8px 10px;
    font-size: 0.92rem;
    line-height: 1.35;
    vertical-align: top;
}

.historial-compacto th {
    font-size: 0.75rem;
    white-space: nowrap;
}

.hc-folio {
    color: var(--color-muted);
    font-size: 0.8rem;
    margin-right: 4px;
}

.hc-sub {
    color: var(--color-muted);
    font-size: 0.82rem;
    margin-top: 2px;
}

.hc-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.hc-etiquetas .badge {
    padding: 2px 8px;
}

.hc-convertir {
    margin: 6px 0 0;
}

.hc-convertir button {
    width: auto;
    white-space: nowrap;
}

.hc-fecha {
    white-space: nowrap;
}

.hc-detalle {
    min-width: 260px;
}

.detalle-personas {
    margin-top: 4px;
}

.detalle-personas strong {
    font-size: 0.82rem;
}

.hc-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.hc-resumen .badge {
    padding: 2px 8px;
}

.hc-personas summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 3px;
}

.hc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.hc-chips .badge {
    padding: 2px 8px;
    white-space: nowrap;
}

/* Tarjeta móvil del historial: solicitante + estado como cabecera,
   ubicación e ingreso en una línea y el detalle abajo, sin repetir el
   título de cada columna (la tarjeta genérica de .table-stack apila
   etiqueta+valor por celda y cada solicitud ocupaba media pantalla).
   Celdas: 1 Solicitud, 2 Ubicación, 3 Detalle, 4 Ingreso, 5 Estado. */
@media (max-width: 760px) {
    .historial-compacto .table-stack tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        padding: 10px 12px;
    }

    .historial-compacto .table-stack td {
        min-width: 0;
        padding: 3px 0;
        border-bottom: none;
    }

    .historial-compacto .table-stack td::before {
        display: none;
    }

    .historial-compacto .table-stack td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .historial-compacto .table-stack td:nth-child(5) { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; max-width: 8.5rem; }
    .historial-compacto .table-stack td:nth-child(5) .hc-sub { font-size: 0.75rem; }
    .historial-compacto .table-stack td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .historial-compacto .table-stack td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; flex-direction: row; }
    .historial-compacto .table-stack td:nth-child(4)::before { display: inline; content: "Ingreso:"; }
    .historial-compacto .table-stack td:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid var(--color-border);
    }

    .historial-compacto .table-stack td:nth-child(2),
    .historial-compacto .table-stack td:nth-child(4) {
        color: var(--color-muted);
        font-size: 0.85rem;
    }
}

/* Panel de posibles duplicados (admin y aprobador) */
.fusion-razon { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--color-warning-soft); color: var(--color-warning); }
.fusion-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.fusion-opcion { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; font-weight: normal; }
.fusion-opcion:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.fusion-opcion input { width: auto; margin: 3px 0 0; }
.fusion-opcion small { color: var(--color-muted); line-height: 1.5; }
.fusion-sugerido { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; background: var(--color-primary); color: #fff; }
.fusion-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.fusion-acciones button { width: auto; }
.fusion-historial { margin: 0; padding-left: 18px; line-height: 1.8; }
@media (max-width: 640px) {
    .fusion-opciones { grid-template-columns: 1fr; }
    .fusion-acciones button { width: 100%; }
}

/* Sobrecito de correos enviados por solicitud (renderSobreCorreos) */
.sobre-correos { display: inline-block; margin-top: 4px; font-size: 0.8rem; }
.sobre-correos summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-muted); user-select: none; }
.sobre-correos summary::-webkit-details-marker { display: none; }
.sobre-correos[open] summary { border-color: var(--color-primary); color: var(--color-primary); }
.sobre-correos.sobre-con-error summary { border-color: var(--color-danger); color: var(--color-danger); }
.sobre-correos ul { list-style: none; margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--color-bg); line-height: 1.35; max-width: 340px; }
.sobre-correos li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.sobre-correos li + li { border-top: 1px solid var(--color-border); }
.sobre-estado { flex: none; font-weight: 700; width: 1em; text-align: center; }
.sobre-ok { color: var(--color-success); }
.sobre-error { color: var(--color-danger); }
.sobre-sin { color: var(--color-muted); }
.sobre-quien { display: flex; flex-direction: column; min-width: 0; }
.sobre-nombre { font-weight: 600; color: var(--color-text); }
.sobre-sub { color: var(--color-muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.sobre-correos li.sobre-leyenda { display: block; font-size: 0.72rem; color: var(--color-muted); }
.sobre-leyenda .sobre-estado { display: inline-block; }
.sobre-fallidos { font-weight: 600; }