/*
 * gen.css — Sistema de diseño de SIMA (móvil primero).
 * Se carga después de Bootstrap 5.3.3, Select2 y custom.css.
 *
 * Índice:
 *   1. Tokens (claro / oscuro)
 *   2. Mapeo a variables de Bootstrap
 *   3. Base (tipografía, enlaces, foco)
 *   4. Componentes de Bootstrap (botones, formularios, modales, tablas, paginación...)
 *   5. Armazón de la app (gen-app, gen-main, gen-content)
 *   6. Barra superior (gen-topbar)
 *   7. Barra inferior (gen-tabbar) — móvil
 *   8. Columna de iconos (gen-rail) — tablet
 *   9. Menú lateral (gen-sidebar) — escritorio
 *  10. Offcanvas "Más" y listas
 *  11. Botón flotante (gen-fab)
 *  12. Tarjetas (gen-card), etiquetas y pastillas
 *  13. Chips (gen-chip)
 *  14. Barra de stock (gen-stock-bar)
 *  15. Avisos flotantes (gen-toasts)
 *  16. Barra de guardar (gen-savebar)
 *  17. Línea de tiempo (gen-timeline)
 *  18. Tablas apiladas (gen-table-stack)
 *  19. Hoja inferior (.modal-sheet)
 *  20. Estado vacío (gen-empty)
 *  21. Migas, volver y paginación
 *  22. Select2 y SweetAlert2
 *  23. Compatibilidad con estilos antiguos (custom.css)
 *  24. Táctil en móvil
 *  27. Buscador global (Ctrl+K), teclas y ayuda de atajos
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root,
[data-bs-theme=light] {
    --gen-bg: #EAEFEC;
    --gen-surface: #F8FAF9;
    --gen-sunken: #DFE6E3;
    --gen-ink: #16201E;
    --gen-muted: #56645F;
    --gen-line: #CED8D4;
    --gen-accent: #F2A516;
    --gen-accent-ink: #1E1500;
    --gen-link: #1D6B64;
    --gen-ok: #2C7A4D;
    --gen-warn: #A86A12;
    --gen-crit: #B0402C;
    --gen-blocked: #647585;

    /* Colores de estado legibles sobre fondo --gen-ink (avisos flotantes) */
    --gen-on-ink-ok: #5DBE86;
    --gen-on-ink-warn: #E3A84C;
    --gen-on-ink-crit: #E57E69;

    /* Valores RGB para las variables *-rgb de Bootstrap */
    --gen-bg-rgb: 234, 239, 236;
    --gen-ink-rgb: 22, 32, 30;
    --gen-link-rgb: 29, 107, 100;

    --gen-scrim: rgba(14, 20, 19, .42);
    --gen-shadow: 0 18px 40px -18px rgba(18, 30, 27, .45);

    --gen-f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
    --gen-f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
    --gen-f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Medidas del armazón */
    --gen-topbar-h: 56px;
    --gen-tabbar-h: 64px;
    --gen-rail-w: 84px;
    --gen-sidebar-w: 248px;
    --gen-radius: 14px;
    --gen-radius-sm: 10px;
    --gen-safe-top: env(safe-area-inset-top, 0px);
    --gen-safe-bottom: env(safe-area-inset-bottom, 0px);
    --gen-safe-left: env(safe-area-inset-left, 0px);
    --gen-safe-right: env(safe-area-inset-right, 0px);

    color-scheme: light;
}

[data-bs-theme=dark] {
    --gen-bg: #0E1312;
    --gen-surface: #162020;
    --gen-sunken: #0B100F;
    --gen-ink: #E3ECE8;
    --gen-muted: #94A39E;
    --gen-line: #283432;
    --gen-accent: #F5B53A;
    --gen-accent-ink: #1E1500;
    --gen-link: #62C3B7;
    --gen-ok: #5DBE86;
    --gen-warn: #E3A84C;
    --gen-crit: #E57E69;
    --gen-blocked: #90A0AE;

    --gen-on-ink-ok: #2C7A4D;
    --gen-on-ink-warn: #A86A12;
    --gen-on-ink-crit: #B0402C;

    --gen-bg-rgb: 14, 19, 18;
    --gen-ink-rgb: 227, 236, 232;
    --gen-link-rgb: 98, 195, 183;

    --gen-scrim: rgba(0, 0, 0, .55);
    --gen-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);

    color-scheme: dark;
}

/* ==========================================================================
   2. Mapeo a variables de Bootstrap (ambos temas)
   ========================================================================== */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-body-bg: var(--gen-bg);
    --bs-body-bg-rgb: var(--gen-bg-rgb);
    --bs-body-color: var(--gen-ink);
    --bs-body-color-rgb: var(--gen-ink-rgb);
    --bs-emphasis-color: var(--gen-ink);
    --bs-border-color: var(--gen-line);
    --bs-border-color-translucent: var(--gen-line);
    --bs-secondary-color: var(--gen-muted);
    --bs-tertiary-color: var(--gen-muted);
    --bs-secondary-bg: var(--gen-sunken);
    --bs-tertiary-bg: var(--gen-sunken);
    --bs-link-color: var(--gen-link);
    --bs-link-color-rgb: var(--gen-link-rgb);
    --bs-link-hover-color: var(--gen-link);
    --bs-link-hover-color-rgb: var(--gen-link-rgb);
    --bs-heading-color: var(--gen-ink);
    --bs-body-font-family: var(--gen-f-body);
    --bs-font-monospace: var(--gen-f-mono);
    --bs-border-radius: var(--gen-radius-sm);
    --bs-focus-ring-color: rgba(var(--gen-link-rgb), .35);
    --bs-success-text-emphasis: var(--gen-ok);
    --bs-warning-text-emphasis: var(--gen-warn);
    --bs-danger-text-emphasis: var(--gen-crit);
}

/* ==========================================================================
   3. Base
   ========================================================================== */
body {
    background-color: var(--gen-bg);
    color: var(--gen-ink);
    font-family: var(--gen-f-body);
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--gen-f-display);
    font-weight: 750;
    font-stretch: 106%;
    line-height: 1.15;
    text-wrap: balance;
}

a {
    color: var(--gen-link);
}

:focus-visible {
    outline: 3px solid var(--gen-link);
    outline-offset: 2px;
}

code, kbd, pre, samp {
    font-family: var(--gen-f-mono);
}

/* Cifras y coordenadas */
.gen-num {
    font-variant-numeric: tabular-nums;
}

.gen-mono {
    font-family: var(--gen-f-mono);
    font-variant-numeric: tabular-nums;
}

.gen-muted {
    color: var(--gen-muted);
}

/* Solo para lectores de pantalla (complementa .visually-hidden) */
.gen-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   4. Componentes de Bootstrap
   ========================================================================== */

/* Botón principal en ámbar */
.btn-primary {
    --bs-btn-color: var(--gen-accent-ink);
    --bs-btn-bg: var(--gen-accent);
    --bs-btn-border-color: var(--gen-accent);
    --bs-btn-hover-color: var(--gen-accent-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--gen-accent) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--gen-accent) 88%, #000);
    --bs-btn-focus-shadow-rgb: 242, 165, 22;
    --bs-btn-active-color: var(--gen-accent-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--gen-accent) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--gen-accent) 80%, #000);
    --bs-btn-disabled-color: var(--gen-accent-ink);
    --bs-btn-disabled-bg: var(--gen-accent);
    --bs-btn-disabled-border-color: var(--gen-accent);
    font-weight: 700;
}

.btn-outline-primary {
    --bs-btn-color: var(--gen-link);
    --bs-btn-border-color: var(--gen-link);
    --bs-btn-hover-color: var(--gen-surface);
    --bs-btn-hover-bg: var(--gen-link);
    --bs-btn-hover-border-color: var(--gen-link);
    --bs-btn-active-color: var(--gen-surface);
    --bs-btn-active-bg: var(--gen-link);
    --bs-btn-active-border-color: var(--gen-link);
    --bs-btn-focus-shadow-rgb: var(--gen-link-rgb);
}

/* Botón neutro (superficie con borde), como los del mockup */
.btn-secondary,
.btn-light,
.btn-outline-secondary {
    --bs-btn-color: var(--gen-ink);
    --bs-btn-bg: var(--gen-surface);
    --bs-btn-border-color: var(--gen-line);
    --bs-btn-hover-color: var(--gen-ink);
    --bs-btn-hover-bg: var(--gen-sunken);
    --bs-btn-hover-border-color: var(--gen-line);
    --bs-btn-active-color: var(--gen-ink);
    --bs-btn-active-bg: var(--gen-sunken);
    --bs-btn-active-border-color: var(--gen-line);
    --bs-btn-disabled-color: var(--gen-muted);
    --bs-btn-disabled-bg: var(--gen-surface);
    --bs-btn-disabled-border-color: var(--gen-line);
    --bs-btn-focus-shadow-rgb: var(--gen-link-rgb);
}

.btn {
    --bs-btn-border-radius: var(--gen-radius-sm);
    --bs-btn-font-weight: 700;
}

.btn-link {
    --bs-btn-color: var(--gen-link);
    --bs-btn-hover-color: var(--gen-link);
}

/* Botón de icono cuadrado */
.gen-icon-btn {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--gen-ink);
    text-decoration: none;
}

.gen-icon-btn:hover {
    background: var(--gen-sunken);
    color: var(--gen-ink);
}

/* Formularios */
.form-control,
.form-select {
    background-color: var(--gen-surface);
    border-color: var(--gen-line);
    color: var(--gen-ink);
    border-radius: var(--gen-radius-sm);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--gen-surface);
    color: var(--gen-ink);
    border-color: var(--gen-link);
    box-shadow: 0 0 0 .2rem rgba(var(--gen-link-rgb), .25);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--gen-sunken);
}

.form-control::placeholder {
    color: var(--gen-muted);
}

.form-label,
.col-form-label {
    font-weight: 700;
}

.form-check-input:checked {
    background-color: var(--gen-link);
    border-color: var(--gen-link);
}

.form-check-input:focus {
    border-color: var(--gen-link);
    box-shadow: 0 0 0 .2rem rgba(var(--gen-link-rgb), .25);
}

/* Superficies */
.card {
    --bs-card-bg: var(--gen-surface);
    --bs-card-border-color: var(--gen-line);
    --bs-card-border-radius: var(--gen-radius);
    --bs-card-cap-bg: transparent;
}

.modal {
    --bs-modal-bg: var(--gen-surface);
    --bs-modal-border-color: var(--gen-line);
    --bs-modal-border-radius: 18px;
    --bs-modal-header-border-color: transparent;
    --bs-modal-footer-border-color: transparent;
}

.modal-title {
    font-family: var(--gen-f-display);
    font-weight: 750;
}

.modal-backdrop {
    --bs-backdrop-bg: #0E1413;
    --bs-backdrop-opacity: .45;
}

.offcanvas {
    --bs-offcanvas-bg: var(--gen-surface);
    --bs-offcanvas-color: var(--gen-ink);
    --bs-offcanvas-border-color: var(--gen-line);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--gen-surface);
    --bs-dropdown-border-color: var(--gen-line);
    --bs-dropdown-link-color: var(--gen-ink);
    --bs-dropdown-link-hover-bg: var(--gen-sunken);
    --bs-dropdown-link-active-bg: var(--gen-accent);
    --bs-dropdown-link-active-color: var(--gen-accent-ink);
    --bs-dropdown-border-radius: var(--gen-radius-sm);
}

.list-group {
    --bs-list-group-bg: var(--gen-surface);
    --bs-list-group-border-color: var(--gen-line);
    --bs-list-group-active-bg: var(--gen-accent);
    --bs-list-group-active-color: var(--gen-accent-ink);
    --bs-list-group-active-border-color: var(--gen-accent);
}

/* Pestañas: subrayado ámbar en la activa */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--gen-line);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-color: var(--gen-ink);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--gen-accent);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-link-color: var(--gen-muted);
    --bs-nav-link-hover-color: var(--gen-ink);
    --bs-nav-link-font-weight: 700;
}

.nav-tabs .nav-link {
    border-width: 0 0 2px;
}

/* Tablas */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--gen-ink);
    --bs-table-border-color: var(--gen-line);
    --bs-table-striped-bg: rgba(var(--gen-ink-rgb), .03);
    --bs-table-hover-bg: rgba(var(--gen-ink-rgb), .05);
}

.table > thead th {
    font-family: var(--gen-f-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gen-muted);
}

/* Alertas en línea con los colores de estado */
.alert {
    --bs-alert-border-radius: var(--gen-radius);
}

/* Paginación */
.pagination {
    --bs-pagination-color: var(--gen-link);
    --bs-pagination-bg: var(--gen-surface);
    --bs-pagination-border-color: var(--gen-line);
    --bs-pagination-hover-color: var(--gen-link);
    --bs-pagination-hover-bg: var(--gen-sunken);
    --bs-pagination-hover-border-color: var(--gen-line);
    --bs-pagination-focus-color: var(--gen-link);
    --bs-pagination-focus-bg: var(--gen-sunken);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--gen-link-rgb), .25);
    --bs-pagination-active-color: var(--gen-accent-ink);
    --bs-pagination-active-bg: var(--gen-accent);
    --bs-pagination-active-border-color: var(--gen-accent);
    --bs-pagination-disabled-color: var(--gen-muted);
    --bs-pagination-disabled-bg: var(--gen-surface);
    --bs-pagination-disabled-border-color: var(--gen-line);
    --bs-pagination-border-radius: var(--gen-radius-sm);
}

/* ==========================================================================
   5. Armazón de la app
   ========================================================================== */
.gen-app {
    min-height: 100vh;
    min-height: 100dvh;
}

.gen-main {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Nunca scroll horizontal de página (textos largos, tablas antiguas) */
    overflow-x: clip;
}

.gen-content {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: 12px calc(16px + var(--gen-safe-right)) 24px calc(16px + var(--gen-safe-left));
}

/* Móvil: hueco para la barra inferior (y el FAB o la barra de guardar si existen) */
@media (max-width: 767.98px) {
    .gen-content {
        padding-bottom: calc(var(--gen-tabbar-h) + var(--gen-safe-bottom) + 24px);
    }

    .gen-app:has(.gen-fab-wrap) .gen-content {
        padding-bottom: calc(var(--gen-tabbar-h) + var(--gen-safe-bottom) + 96px);
    }

    .gen-app:has(.gen-savebar) .gen-content {
        padding-bottom: calc(var(--gen-tabbar-h) + var(--gen-safe-bottom) + 96px);
    }
}

/* Tablet: columna de iconos a la izquierda */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .gen-main {
        margin-left: calc(var(--gen-rail-w) + var(--gen-safe-left));
    }

    .gen-content {
        padding: 16px 24px 32px;
    }
}

/* Escritorio: menú lateral completo */
@media (min-width: 1200px) {
    .gen-main {
        margin-left: var(--gen-sidebar-w);
    }

    .gen-content {
        padding: 20px 32px 40px;
    }
}

/* ==========================================================================
   6. Barra superior
   ========================================================================== */
.gen-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: calc(var(--gen-topbar-h) + var(--gen-safe-top));
    padding: var(--gen-safe-top) calc(8px + var(--gen-safe-right)) 0 calc(16px + var(--gen-safe-left));
    background: var(--gen-bg);
    border-bottom: 1px solid var(--gen-line);
}

.gen-topbar-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--gen-f-display);
    font-size: 1.25rem;
    font-weight: 750;
    font-stretch: 108%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gen-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

@media (min-width: 768px) {
    .gen-topbar {
        padding: 0 24px;
    }

    .gen-topbar-title {
        font-size: 1.5rem;
    }

    .gen-topbar-actions {
        gap: 8px;
    }
}

@media (min-width: 1200px) {
    .gen-topbar {
        padding: 0 32px;
    }
}

/* ==========================================================================
   7. Barra inferior (móvil)
   ========================================================================== */
.gen-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(var(--gen-tabs, 4), 1fr);
    padding: 6px calc(4px + var(--gen-safe-right)) calc(6px + var(--gen-safe-bottom)) calc(4px + var(--gen-safe-left));
    background: var(--gen-surface);
    border-top: 1px solid var(--gen-line);
}

.gen-tab {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gen-muted);
    font-size: .75rem;
    line-height: 1.1;
    text-decoration: none;
}

.gen-tab:hover {
    color: var(--gen-ink);
}

.gen-tab-icon {
    width: 56px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 1.1rem;
    transition: background-color .15s ease;
}

.gen-tab.active {
    color: var(--gen-ink);
    font-weight: 700;
}

.gen-tab.active .gen-tab-icon {
    background: var(--gen-accent);
    color: var(--gen-accent-ink);
}

/* ==========================================================================
   8. Columna de iconos (tablet)
   ========================================================================== */
.gen-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    width: calc(var(--gen-rail-w) + var(--gen-safe-left));
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: calc(14px + var(--gen-safe-top)) 0 calc(14px + var(--gen-safe-bottom)) var(--gen-safe-left);
    background: var(--gen-surface);
    border-right: 1px solid var(--gen-line);
    overflow-y: auto;
}

.gen-rail-logo {
    margin-bottom: 10px;
    font-family: var(--gen-f-display);
    font-weight: 800;
    font-stretch: 120%;
    font-size: 1rem;
    color: var(--gen-ink);
    text-decoration: none;
}

.gen-rail-logo img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.gen-rail-link {
    width: 68px;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--gen-muted);
    font-size: .7rem;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
}

.gen-rail-link svg,
.gen-rail-link i {
    font-size: 1.15rem;
}

.gen-rail-link:hover {
    background: var(--gen-sunken);
    color: var(--gen-ink);
}

.gen-rail-link.active {
    background: var(--gen-accent);
    color: var(--gen-accent-ink);
    font-weight: 700;
}

/* ==========================================================================
   9. Menú lateral (escritorio)
   ========================================================================== */
.gen-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    width: var(--gen-sidebar-w);
    flex-direction: column;
    gap: 8px;
    padding: 20px 14px 14px;
    background: var(--gen-surface);
    border-right: 1px solid var(--gen-line);
    overflow-y: auto;
}

.gen-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 12px;
    font-family: var(--gen-f-display);
    font-weight: 800;
    font-stretch: 118%;
    font-size: 1.35rem;
    color: var(--gen-ink);
    text-decoration: none;
}

.gen-brand-logo {
    width: 36px;
    height: 36px;
    flex: none;
    object-fit: contain;
}

.gen-brand-name {
    letter-spacing: .06em;
}

.gen-brand-group {
    font-family: var(--gen-f-body);
    font-weight: 400;
    font-stretch: normal;
    font-size: .85rem;
    color: var(--gen-muted);
}

.gen-sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gen-sidebar-heading {
    margin: 16px 10px 4px;
    font-family: var(--gen-f-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gen-muted);
}

.gen-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 12px;
    color: var(--gen-ink);
    text-decoration: none;
}

.gen-sidebar-link svg {
    color: var(--gen-muted);
}

.gen-sidebar-link:hover {
    background: var(--gen-sunken);
    color: var(--gen-ink);
}

.gen-sidebar-link.active {
    background: var(--gen-accent);
    color: var(--gen-accent-ink);
    font-weight: 700;
}

.gen-sidebar-link.active svg {
    color: var(--gen-accent-ink);
}

.gen-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px 0 8px;
    border-top: 1px solid var(--gen-line);
}

.gen-sidebar-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    line-height: 1.3;
}

.gen-sidebar-user-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gen-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gen-sunken);
    color: var(--gen-ink);
    font-size: .75rem;
    font-weight: 700;
}

/* ==========================================================================
   10. Offcanvas "Más" y listas
   ========================================================================== */
.offcanvas-bottom.gen-more {
    height: auto;
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 22px 22px 0 0;
    padding-bottom: var(--gen-safe-bottom);
}

@media (min-width: 768px) {
    .offcanvas-bottom.gen-more {
        left: 50%;
        right: auto;
        width: 480px;
        margin-left: -240px;
    }
}

.gen-more .offcanvas-header {
    position: relative;
    padding-top: 22px;
}

.gen-more .offcanvas-title {
    font-size: 1.25rem;
}

.gen-more .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 0;
}

.gen-more-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 8px;
}

.gen-more-user-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.gen-more-user-info span {
    font-size: .875rem;
    color: var(--gen-muted);
}

/* Asa de las hojas inferiores (offcanvas y .modal-sheet) */
.gen-sheet-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 2px;
    background: var(--gen-line);
}

/* Lista de opciones (offcanvas, menús) */
.gen-list {
    display: flex;
    flex-direction: column;
    background: var(--gen-surface);
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
    overflow: hidden;
}

.gen-list > form {
    margin: 0;
}

.gen-list-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid var(--gen-line);
    background: transparent;
    color: var(--gen-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.gen-list > :first-child.gen-list-item,
.gen-list > :first-child .gen-list-item {
    border-top: 0;
}

.gen-list-item > span {
    flex: 1;
    min-width: 0;
}

.gen-list-item svg:first-child {
    color: var(--gen-link);
}

.gen-list-item:hover {
    background: var(--gen-sunken);
    color: var(--gen-ink);
}

.gen-list-item.active {
    font-weight: 700;
}

.gen-list-chevron {
    color: var(--gen-muted);
    font-size: .8rem;
}

.gen-list-item-danger,
.gen-list-item-danger svg:first-child {
    color: var(--gen-crit);
}

/* ==========================================================================
   11. Botón flotante (solo móvil)
   ========================================================================== */
.gen-fab,
.gen-fab-wrap > a,
.gen-fab-wrap > button {
    position: fixed;
    right: calc(16px + var(--gen-safe-right));
    bottom: calc(var(--gen-tabbar-h) + var(--gen-safe-bottom) + 16px);
    z-index: 1031;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 16px;
    background: var(--gen-accent);
    color: var(--gen-accent-ink);
    font-size: 1.4rem;
    box-shadow: var(--gen-shadow);
    text-decoration: none;
}

.gen-fab:hover,
.gen-fab-wrap > a:hover,
.gen-fab-wrap > button:hover {
    color: var(--gen-accent-ink);
    background: color-mix(in srgb, var(--gen-accent) 88%, #000);
}

/* ==========================================================================
   12. Tarjetas, etiquetas y pastillas
   ========================================================================== */
.gen-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--gen-surface);
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
    color: var(--gen-ink);
    /* Textos largos sin espacios: se parten en vez de desbordar */
    overflow-wrap: anywhere;
}

.gen-card-title {
    margin: 0;
    font-family: var(--gen-f-body);
    font-size: 1rem;
    font-weight: 700;
}

.gen-card-title a {
    color: var(--gen-ink);
    text-decoration: none;
}

.gen-card-meta {
    font-size: .875rem;
    color: var(--gen-muted);
}

.gen-card-figure {
    font-family: var(--gen-f-display);
    font-size: 1.35rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.gen-card-figure small {
    font-family: var(--gen-f-body);
    font-size: .8rem;
    font-weight: 400;
    color: var(--gen-muted);
}

.gen-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Rejilla de tarjetas: 1 columna en móvil, 2 en md, 3 en xl */
.gen-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

@media (min-width: 768px) {
    .gen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (min-width: 1200px) {
    .gen-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Etiqueta pequeña en mayúsculas (mono) */
.gen-label {
    font-family: var(--gen-f-mono);
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gen-muted);
}

.gen-more .gen-label {
    margin-top: 8px;
}

/* Pastilla de estado */
.gen-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--gen-muted);
}

.gen-pill-ok { color: var(--gen-ok); }
.gen-pill-warn { color: var(--gen-warn); }
.gen-pill-crit { color: var(--gen-crit); }
.gen-pill-blocked { color: var(--gen-blocked); }
.gen-pill-link { color: var(--gen-link); }

/* ==========================================================================
   13. Chips (filtros)
   ========================================================================== */
.gen-chips {
    display: flex;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.gen-chips::-webkit-scrollbar {
    display: none;
}

/* Con ratón no se puede arrastrar: barra fina visible (y la rueda desplaza en horizontal, chips_scroll.js) */
@media (hover: hover) and (pointer: fine) {
    .gen-chips {
        scrollbar-width: thin;
        scrollbar-color: var(--gen-line) transparent;
        padding-bottom: 6px;
    }
    .gen-chips::-webkit-scrollbar { display: block; height: 6px; }
    .gen-chips::-webkit-scrollbar-thumb { background: var(--gen-line); border-radius: 3px; }
    .gen-chips::-webkit-scrollbar-track { background: transparent; }
}

.gen-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--gen-line);
    border-radius: 999px;
    background: var(--gen-surface);
    color: var(--gen-ink);
    font-size: .875rem;
    white-space: nowrap;
    text-decoration: none;
}

.gen-chip:hover {
    border-color: var(--gen-link);
    color: var(--gen-ink);
}

.gen-chip.active {
    background: var(--gen-ink);
    border-color: var(--gen-ink);
    color: var(--gen-bg);
    font-weight: 700;
}

/* ==========================================================================
   14. Barra de stock
   ========================================================================== */
.gen-stock-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--gen-sunken);
}

.gen-stock-bar > span {
    display: block;
    min-width: 3px;
}

.gen-stock-available { background: var(--gen-ok); }
.gen-stock-reserved { background: var(--gen-warn); }
.gen-stock-blocked { background: var(--gen-blocked); }

/* Leyenda opcional bajo la barra */
.gen-stock-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: .8rem;
    color: var(--gen-muted);
    font-variant-numeric: tabular-nums;
}

.gen-stock-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gen-stock-legend b {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}

/* ==========================================================================
   15. Avisos flotantes (toasts)
   ========================================================================== */
.gen-toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--gen-tabbar-h) + var(--gen-safe-bottom) + 12px);
    z-index: 1090;
    width: min(480px, calc(100% - 32px));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .gen-toasts {
        bottom: calc(24px + var(--gen-safe-bottom));
    }
}

.gen-toast {
    --bs-toast-max-width: 100%;
    width: 100%;
    pointer-events: auto;
    background: var(--gen-ink);
    color: var(--gen-bg);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--gen-shadow);
}

.gen-toast-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px 10px 14px;
}

.gen-toast-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.gen-toast-icon { flex: none; }
.gen-toast-success .gen-toast-icon { color: var(--gen-on-ink-ok); }
.gen-toast-warning .gen-toast-icon { color: var(--gen-on-ink-warn); }
.gen-toast-error .gen-toast-icon { color: var(--gen-on-ink-crit); }

/* La X sobre fondo --gen-ink: clara en tema claro y oscura en tema oscuro */
[data-bs-theme=light] .gen-toast .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme=dark] .gen-toast .btn-close {
    filter: none;
}

/* ==========================================================================
   16. Barra de guardar (formularios)
   ========================================================================== */
.gen-savebar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

@media (max-width: 767.98px) {
    .gen-savebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--gen-tabbar-h) + var(--gen-safe-bottom));
        z-index: 1025;
        margin: 0;
        padding: 10px calc(16px + var(--gen-safe-right)) 10px calc(16px + var(--gen-safe-left));
        background: var(--gen-surface);
        border-top: 1px solid var(--gen-line);
    }

    .gen-savebar .btn {
        flex: 1;
    }
}

/* ==========================================================================
   17. Línea de tiempo (movimientos)
   ========================================================================== */
.gen-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.gen-timeline > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--gen-line);
    overflow-wrap: anywhere;
}

.gen-timeline > li:first-child {
    border-top: 0;
}

.gen-timeline-qty {
    flex: none;
    min-width: 44px;
    font-family: var(--gen-f-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.gen-timeline-qty.is-minus { color: var(--gen-warn); }
.gen-timeline-qty.is-plus { color: var(--gen-ok); }
.gen-timeline-qty.is-blocked { color: var(--gen-blocked); }
.gen-timeline-qty.is-lost { color: var(--gen-crit); }

.gen-timeline-body {
    flex: 1;
    min-width: 0;
}

.gen-timeline-meta {
    font-size: .875rem;
    color: var(--gen-muted);
}

.gen-timeline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* ==========================================================================
   18. Tablas apiladas: en móvil cada fila es una tarjeta y cada celda lleva su
   etiqueta desde data-label
   ========================================================================== */
@media (max-width: 767.98px) {
    .gen-table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .gen-table-stack,
    .gen-table-stack tbody,
    .gen-table-stack tr,
    .gen-table-stack td {
        display: block;
        width: 100%;
    }

    .gen-table-stack tr {
        margin-bottom: 10px;
        padding: 8px 14px;
        background: var(--gen-surface);
        border: 1px solid var(--gen-line);
        border-radius: var(--gen-radius);
    }

    .gen-table-stack > :not(caption) > * > * {
        padding: 6px 0;
        border-bottom: 1px dashed var(--gen-line);
        box-shadow: none;
    }

    .gen-table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .gen-table-stack tr > td:last-child {
        border-bottom: 0;
    }

    .gen-table-stack td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        font-family: var(--gen-f-mono);
        font-size: .7rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--gen-muted);
        text-align: left;
    }
}

/* ==========================================================================
   19. Hoja inferior (.modal-sheet): en móvil el modal sube desde abajo
   ========================================================================== */
.modal-sheet .gen-sheet-handle {
    display: none;
}

@media (max-width: 767.98px) {
    .modal-sheet .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        max-height: 90vh;
        max-height: 90dvh;
        margin: 0;
        display: flex;
        align-items: flex-end;
    }

    .modal-sheet.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .25s ease-out;
    }

    .modal-sheet.show .modal-dialog {
        transform: none;
    }

    .modal-sheet .modal-content {
        max-height: 90vh;
        max-height: 90dvh;
        overflow: hidden;
        border: 0;
        border-radius: 22px 22px 0 0;
        padding-bottom: var(--gen-safe-bottom);
    }

    .modal-sheet .modal-header {
        position: relative;
        padding-top: 22px;
    }

    .modal-sheet .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-sheet .modal-footer > .btn {
        flex: 1;
    }

    .modal-sheet .gen-sheet-handle {
        display: block;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .modal-sheet.fade .modal-dialog {
        transition: none;
    }
}

/* ==========================================================================
   20. Estado vacío
   ========================================================================== */
.gen-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px;
    text-align: center;
    color: var(--gen-muted);
}

.gen-empty-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--gen-sunken);
    color: var(--gen-link);
    font-size: 1.6rem;
}

.gen-empty-title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--gen-ink);
}

.gen-empty-text {
    margin: 0;
    max-width: 40ch;
}

.gen-empty-action {
    margin-top: 8px;
}

/* ==========================================================================
   21. Migas, volver y paginación
   ========================================================================== */
.gen-breadcrumbs .breadcrumb {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-divider-color: var(--gen-muted);
    --bs-breadcrumb-item-active-color: var(--gen-ink);
    --bs-breadcrumb-margin-bottom: .75rem;
    font-size: .875rem;
    color: var(--gen-muted);
}

.gen-breadcrumbs .breadcrumb-item a {
    color: var(--gen-muted);
    text-decoration: none;
}

.gen-breadcrumbs .breadcrumb-item a:hover {
    color: var(--gen-link);
}

.gen-breadcrumbs .breadcrumb-item.active {
    font-weight: 700;
}

/* En móvil la barra superior ya hace de cabecera: las migas sobran */
@media (max-width: 767.98px) {
    .gen-breadcrumbs {
        display: none;
    }
}

.gen-backlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--gen-link);
    font-weight: 700;
    text-decoration: none;
}

.gen-backlink:hover {
    color: var(--gen-link);
}

.gen-pagination {
    margin-top: 16px;
}

.gen-pagination .pagination {
    margin-bottom: 0;
}

.gen-pagination-info {
    margin: 0;
    font-size: .875rem;
    color: var(--gen-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   22. Select2 (tema bootstrap-5) y SweetAlert2 legibles en ambos temas
   ========================================================================== */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--gen-surface);
    border-color: var(--gen-line);
    color: var(--gen-ink);
    border-radius: var(--gen-radius-sm);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    color: var(--gen-ink);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__placeholder,
.select2-container--bootstrap-5 .select2-search .select2-search__field::placeholder {
    color: var(--gen-muted);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--gen-link);
    box-shadow: 0 0 0 .2rem rgba(var(--gen-link-rgb), .25);
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--gen-surface);
    border-color: var(--gen-line);
    color: var(--gen-ink);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--gen-surface);
    border-color: var(--gen-line);
    color: var(--gen-ink);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: var(--gen-ink);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--gen-sunken);
    color: var(--gen-ink);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--gen-accent);
    color: var(--gen-accent-ink);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled {
    color: var(--gen-muted);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: var(--gen-sunken);
    border-color: var(--gen-line);
    color: var(--gen-ink);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    color: var(--gen-ink);
}

/* Flecha y aspa de Select2 en tema oscuro (el tema las pinta oscuras) */
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection__clear,
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection__choice__remove {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* SweetAlert2 con los colores del tema */
.swal2-popup {
    background: var(--gen-surface);
    color: var(--gen-ink);
    border-radius: 18px;
    font-family: var(--gen-f-body);
}

.swal2-title,
.swal2-html-container {
    color: var(--gen-ink);
}

/* ==========================================================================
   23. Clases heredadas de custom.css que aún se usan en las vistas
   ========================================================================== */
.ctn-page,
.ctn-div {
    background-color: var(--gen-surface);
    color: var(--gen-ink);
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
    box-shadow: none;
    padding: 16px;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .ctn-page,
    .ctn-div {
        padding: 24px;
    }
}

.td-title {
    color: var(--gen-muted);
}

.btn-backlink,
.btn-backlink:hover {
    color: var(--gen-link);
}

.ctn-backlink {
    padding-top: 20px;
}

.text-right {
    text-align: right !important;
}

/* Oculta etiquetas de texto en pantallas estrechas (botones solo con icono) */
@media (max-width: 720px) {
    .mv-hidden {
        display: none;
    }
}

/* ==========================================================================
   24. Táctil en móvil: controles de al menos 44px de alto
   ========================================================================== */
@media (max-width: 767.98px) {
    .btn,
    .form-control,
    .form-select,
    .page-link,
    .select2-container--bootstrap-5 .select2-selection {
        min-height: 44px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .page-link {
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gen-chip {
        min-height: 44px;
    }

    /* Aspa de cierre: área táctil de 44px */
    .btn-close {
        padding: 14px;
    }

    /* Evita el zoom automático de iOS al enfocar campos */
    .form-control,
    .form-select,
    .select2-container--bootstrap-5 .select2-search .select2-search__field {
        font-size: 16px;
    }
}

/* ==========================================================================
   Pantallas de acceso (invitado): login y contraseña
   Layout base/layouts.blade.php. Solo tokens, válido en claro y oscuro.
   ========================================================================== */
.gen-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--gen-bg);
    color: var(--gen-ink);
    padding: calc(var(--gen-safe-top) + 16px) calc(var(--gen-safe-right) + 16px) calc(var(--gen-safe-bottom) + 16px) calc(var(--gen-safe-left) + 16px);
}

.gen-auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 0;
}

.gen-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--gen-ink);
    text-align: center;
}

/* Logo por modo (base.elements.logo): con logo-dark.* se pintan los dos y se ve uno según el tema */
:root:not([data-bs-theme=dark]) .gen-logo-dark,
[data-bs-theme=dark] .gen-logo-light {
    display: none !important;
}

/* El logo puede ser el del grupo (public/branding/custom/), con cualquier proporción */
.gen-logo-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.gen-logo-name {
    font-family: var(--gen-f-display);
    font-weight: 800;
    font-stretch: 112%;
    font-size: 2.25rem;
    letter-spacing: .12em;
    line-height: 1;
}

.gen-logo-group {
    font-size: .9rem;
    color: var(--gen-muted);
}

.gen-logo::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--gen-accent);
}

.gen-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--gen-surface);
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
    box-shadow: var(--gen-shadow);
    padding: 24px 20px;
}

.gen-auth-title {
    font-family: var(--gen-f-display);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.gen-auth-card .form-label {
    font-weight: 700;
    margin-bottom: 4px;
}

.gen-auth-card .form-control {
    min-height: 48px;
    font-size: 16px;
}

.gen-auth-card .btn {
    min-height: 48px;
}

.gen-auth-card .gen-field-error {
    display: block;
    margin-top: 4px;
    font-size: .875rem;
    color: var(--gen-crit);
}

.gen-auth-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--gen-link);
    font-weight: 700;
}

.gen-auth-note {
    color: var(--gen-muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.gen-auth-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .8125rem;
    color: var(--gen-muted);
}

/* ==========================================================================
   25. Inicio (dashboard)
   ========================================================================== */
.gen-home-greeting {
    margin: 0 0 16px;
    font-family: var(--gen-f-display);
    font-size: 1.5rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.gen-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

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

.gen-quick-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 14px;
    border: 1px solid var(--gen-line);
    border-radius: 14px;
    background: var(--gen-surface);
    color: var(--gen-ink);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.gen-quick-item:hover { color: var(--gen-ink); }

.gen-quick-item i { font-size: 1.25rem; }

.gen-quick-item.is-primary {
    border-color: var(--gen-accent);
    background: var(--gen-accent);
    color: var(--gen-accent-ink);
}

.gen-quick-item.is-primary:hover { color: var(--gen-accent-ink); }

.gen-home-section { margin-bottom: 20px; }

/* Bloques del inicio: una columna en móvil; en escritorio, pendiente + salidas | almacén + actividad */
.gen-home-columns { display: block; }
@media (min-width: 1200px) {
    .gen-home-columns.has-two {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
}

.gen-home-heading { display: block; margin: 0 0 8px; }
.gen-home-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.gen-home-more { font-size: .875rem; font-weight: 600; color: var(--gen-link); text-decoration: none; }
.gen-home-more:hover { text-decoration: underline; }

.gen-home-done {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    border: 1px dashed var(--gen-line);
    border-radius: var(--gen-radius);
    color: var(--gen-muted);
}
.gen-home-done svg, .gen-home-done i { color: var(--gen-ok); }

.gen-home-note { margin: 8px 0 0; font-size: .875rem; color: var(--gen-muted); overflow-wrap: anywhere; }

/* Lo que tengo pendiente */
.gen-task-list { margin: 0; padding: 0 16px; list-style: none; }
.gen-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gen-line);
}
.gen-task:last-child { border-bottom: 0; }
.gen-task-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gen-sunken);
    color: var(--gen-link);
}
.gen-task-warn .gen-task-icon { color: var(--gen-warn); }
.gen-task-crit .gen-task-icon { color: var(--gen-crit); }
.gen-task-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gen-task-action { flex: none; }
@media (max-width: 575.98px) {
    .gen-task { flex-wrap: wrap; }
    .gen-task-action { margin-left: 48px; }
}

/* Próximas salidas: la tarjeta del listado con "Hoy / Mañana / En N días" */
.gen-home-outings { grid-template-columns: 1fr; }
.gen-outing-relative { font-weight: 700; color: var(--gen-link); }

/* Estado del almacén: contadores */
.gen-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .gen-stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.gen-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--gen-line);
    border-left-width: 4px;
    border-radius: var(--gen-radius-sm);
    background: var(--gen-surface);
    color: var(--gen-ink);
    text-decoration: none;
}
.gen-stat:hover { color: var(--gen-ink); border-color: var(--gen-muted); }
.gen-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gen-stat-top b { font-size: 1.5rem; line-height: 1.1; }
.gen-stat-label { font-size: .875rem; color: var(--gen-muted); }
.gen-stat-crit { border-left-color: var(--gen-crit); }
.gen-stat-crit .gen-stat-top svg, .gen-stat-crit .gen-stat-top i { color: var(--gen-crit); }
.gen-stat-warn { border-left-color: var(--gen-warn); }
.gen-stat-warn .gen-stat-top svg, .gen-stat-warn .gen-stat-top i { color: var(--gen-warn); }
.gen-stat-muted { border-left-color: var(--gen-line); }
.gen-stat-muted .gen-stat-top svg, .gen-stat-muted .gen-stat-top i { color: var(--gen-muted); }
.gen-stat.is-zero { border-left-color: var(--gen-line); opacity: .6; }
.gen-stat.is-zero .gen-stat-top svg, .gen-stat.is-zero .gen-stat-top i { color: var(--gen-muted); }

.gen-recent > li { align-items: center; }

/* ==========================================================================
   25. Almacén: listado (búsqueda, tarjetas deslizables)
   ========================================================================== */
.gen-search {
    position: relative;
    margin-bottom: 10px;
}

.gen-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gen-muted);
    pointer-events: none;
}

.gen-search-input {
    min-height: 44px;
    padding-left: 40px;
    border-radius: 999px;
}

.gen-filter-chips { margin-bottom: 10px; }

.gen-list-count {
    margin-bottom: 10px;
    font-size: .875rem;
}

.gen-swipe {
    position: relative;
    min-width: 0;
    border-radius: var(--gen-radius);
    overflow: hidden;
}

.gen-swipe-actions {
    position: absolute;
    inset: 0 0 0 auto;
    display: none;
}

.gen-material-card {
    height: 100%;
    touch-action: pan-y;
    transition: transform .2s ease;
}

.gen-material-card.is-dragging { transition: none; }

.gen-material-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.gen-material-main { min-width: 0; }

.gen-material-head .gen-card-figure { flex: none; }

/* Las acciones de deslizar solo existen en pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
    .gen-swipe-actions { display: flex; }

    .gen-swipe-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 84px;
        min-height: 44px;
        background: var(--gen-accent);
        color: var(--gen-accent-ink);
        font-size: .8rem;
        font-weight: 700;
        text-decoration: none;
    }

    .gen-swipe-action.is-return {
        background: var(--gen-link);
        color: var(--gen-surface);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gen-material-card { transition: none; }
}

/* ==========================================================================
   25. Detalle de material: resumen de stock, lista etiqueta/valor y acciones
   ========================================================================== */
.gen-detail-title {
    font-family: var(--gen-f-display);
    font-size: 1.5rem;
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}

.gen-stock-summary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.gen-stock-summary-num {
    font-family: var(--gen-f-mono);
    font-size: 2.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--gen-ink);
}

.gen-stock-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.gen-stock-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gen-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

@media (min-width: 768px) {
    .gen-detail-actions {
        flex-direction: row;
    }
}

.gen-dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
}

.gen-dl > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-top: 1px solid var(--gen-line);
    min-width: 0;
}

.gen-dl > div:first-child {
    border-top: 0;
}

.gen-dl dt {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gen-muted);
}

.gen-dl dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .gen-dl > div {
        flex-direction: row;
        gap: 16px;
    }

    .gen-dl dt {
        flex: 0 0 11rem;
        padding-top: 2px;
    }
}

.gen-timeline-remarks {
    margin-top: 2px;
    color: var(--gen-ink);
}

.gen-manage-stock .btn {
    min-height: 52px;
}

/* Formularios: la barra de guardar fija en móvil no tapa el último campo */
@media (max-width: 767.98px) {
    form[data-shortcut="save"] {
        padding-bottom: 72px;
    }
}

/* ==========================================================================
   26. Cuevas: listado, ficha en dos columnas, material por tramos,
       formulario, multimedia y notas
   ========================================================================== */
.section-title {
    margin: 0 0 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gen-muted);
}

.divider {
    height: 1px;
    margin: 20px 0;
    background: var(--gen-line);
}

/* Listado */
.gen-cave-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.gen-cave-card .gen-card-title {
    font-size: 1.05rem;
}

.gen-cave-card .gen-card-title a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
}

.gen-cave-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.gen-map-frames {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.gen-map-frames iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
    background: var(--gen-sunken);
}

@media (min-width: 1200px) {
    .gen-map-frames {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cabecera de la ficha */
.gen-cave-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.gen-cave-header-main {
    min-width: 0;
}

.gen-cave-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gen-cave-header-actions .btn {
    min-height: 44px;
}

@media (min-width: 768px) {
    .gen-cave-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

/* Ficha: una columna en móvil, dos desde lg */
.gen-cave-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.gen-cave-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

@media (min-width: 992px) {
    .gen-cave-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.gen-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.gen-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--gen-surface);
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
    overflow-wrap: anywhere;
}

.gen-fact b {
    font-size: 1.15rem;
}

.gen-fact .gen-num {
    font-size: 1.35rem;
}

.gen-fact-wide {
    grid-column: 1 / -1;
}

.gen-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--gen-warn);
    border-left-width: 4px;
    border-radius: var(--gen-radius);
    background: var(--gen-surface);
    color: var(--gen-ink);
    overflow-wrap: anywhere;
}

.gen-notice > i {
    flex: none;
    margin-top: 3px;
    color: var(--gen-warn);
}

.gen-locations,
.gen-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gen-locations li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--gen-line);
}

.gen-location-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gen-links li {
    padding: 10px 0;
    border-top: 1px solid var(--gen-line);
    overflow-wrap: anywhere;
}

.gen-links li:first-child {
    border-top: 0;
}

.gen-card #div-map {
    margin-top: 8px;
    border: 1px solid var(--gen-line);
}

/* Material por tramos (también en el formulario, con los mismos ids y clases del JS) */
.gen-gear,
#materials_list_js {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.obstaculo-card {
    min-width: 0;
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
    background: var(--gen-surface);
    overflow: hidden;
}

.obstaculo-header {
    padding: 10px 14px;
    background: var(--gen-sunken);
    border-bottom: 1px solid var(--gen-line);
    font-weight: 700;
    color: var(--gen-ink);
}

.obstaculo-header-cursor {
    cursor: move;
}

.obstaculo-codigo {
    font-size: 1.05rem;
}

.gen-code {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--gen-accent);
    color: var(--gen-accent-ink);
    font-family: var(--gen-f-mono);
    font-size: .9rem;
    font-weight: 500;
}

.obstaculo-descripcion {
    display: block;
    line-height: 1.3;
    color: var(--gen-muted);
    overflow-wrap: anywhere;
}

.obstaculo-material {
    padding: 10px 14px;
    border-top: 1px solid var(--gen-line);
    align-items: flex-start;
    overflow-wrap: anywhere;
}

.obstaculo-cantidad {
    flex: none;
    white-space: nowrap;
}

.drag-hint {
    font-size: .85rem;
    color: var(--gen-muted);
}

.editing input {
    width: 100%;
    font-size: .9rem;
}

/* Tarjeta oscura "Total" */
.obstaculo-total {
    border: 1px solid var(--gen-ink);
    border-radius: var(--gen-radius);
    background: var(--gen-ink);
    color: var(--gen-bg);
}

.obstaculo-total .obstaculo-descripcion {
    color: var(--gen-bg);
}

/* Formulario de ficha */
.gen-cave-form .material-item {
    padding: 12px;
    border-radius: var(--gen-radius);
    background: var(--gen-sunken);
}

.gen-cave-form .list-group-item {
    background: var(--gen-surface);
    color: var(--gen-ink);
    border-color: var(--gen-line);
    overflow-wrap: anywhere;
}

.gen-cave-form .btn,
.gen-cave-form .form-control,
.gen-cave-form .form-select {
    min-height: 44px;
}

.gen-cave-form textarea.form-control {
    min-height: 100px;
}

/* Multimedia */
.dropzone-area {
    border: 2px dashed var(--gen-line);
    border-radius: var(--gen-radius);
    background: var(--gen-sunken);
    color: var(--gen-ink);
    cursor: pointer;
    transition: border-color .2s;
}

.dropzone-area:hover {
    border-color: var(--gen-link);
}

.dz-icon {
    font-size: 2rem;
    color: var(--gen-muted);
}

.media-card {
    position: relative;
    overflow: hidden;
    background: var(--gen-surface);
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
}

.media-thumb {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    cursor: zoom-in;
}

.media-doc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    font-size: 2.6rem;
    color: var(--gen-muted);
    background: var(--gen-sunken);
}

.media-info {
    padding: 8px 10px;
    font-size: .8rem;
}

.media-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.media-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Notas */
.comentarios-list {
    max-width: 800px;
}

.comentario-item {
    position: relative;
    padding: 14px 0;
    border-bottom: 1px solid var(--gen-line);
}

.comentario-item:last-child {
    border-bottom: 0;
}

.comentario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.comentario-usuario {
    font-weight: 700;
}

.comentario-fecha {
    margin-left: 6px;
    font-family: var(--gen-f-mono);
    font-size: .75rem;
    color: var(--gen-muted);
}

.comentario-texto {
    line-height: 1.5;
    color: var(--gen-ink);
    overflow-wrap: anywhere;
}

/* ==========================================================================
   25. Configuración: usuarios, roles, tipos de material y permisos
   ========================================================================== */
.gen-filter-form { margin-bottom: 10px; }

.gen-filter-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.gen-filter-row .form-select { flex: 1 1 auto; min-width: 0; }

.gen-stack-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.gen-permissions-title {
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gen-line);
}

.gen-permissions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.gen-permission {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 6px 12px;
    background: var(--gen-surface);
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
}

.gen-permission .form-check-input {
    float: none;
    flex: none;
    margin: 0;
}

.gen-permission .form-check-label {
    flex: 1;
    min-height: 32px;
    display: flex;
    align-items: center;
    color: var(--gen-ink);
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .gen-permissions-grid { grid-template-columns: repeat(2, 1fr); }
    .gen-filter-form { display: flex; gap: 8px; align-items: flex-start; }
    .gen-filter-form .gen-search { flex: 1 1 auto; }
    .gen-filter-form .gen-filter-row { margin-top: 0; flex: none; }
}

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

/* ==========================================================================
   27. Buscador global (Ctrl+K), teclas y ayuda de atajos
   ========================================================================== */
/* Tecla */
.gen-kbd {
    display: inline-block;
    font-family: var(--gen-f-mono);
    font-size: .78rem;
    line-height: 1.4;
    padding: 1px 6px;
    color: var(--gen-ink);
    background: var(--gen-surface);
    border: 1px solid var(--gen-line);
    border-bottom-width: 2px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Botón "Buscar o ir a…" del menú lateral (escritorio) */
.gen-cmdk {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    margin: 0 0 12px;
    padding: 6px 8px 6px 12px;
    font: inherit;
    font-size: .875rem;
    color: var(--gen-muted);
    background: var(--gen-surface);
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius-sm);
    cursor: pointer;
}

.gen-cmdk:hover {
    border-color: var(--gen-link);
    color: var(--gen-ink);
}

.gen-cmdk-text {
    flex: 1;
    text-align: left;
}

/* Buscador */
.gen-cmd .modal-dialog {
    max-width: 560px;
    margin-top: calc(10vh + var(--gen-safe-top));
}

.gen-cmd .modal-content {
    overflow: hidden;
    box-shadow: var(--gen-shadow);
}

.gen-cmd-in {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gen-line);
}

.gen-cmd-in-icon {
    color: var(--gen-muted);
}

.gen-cmd-input {
    flex: 1;
    min-width: 0;
    min-height: 32px;
    font: inherit;
    font-size: max(16px, 1.05rem); /* 16px como mínimo: evita el zoom de iOS */
    color: var(--gen-ink);
    background: transparent;
    border: 0;
    outline: none;
}

.gen-cmd-input::placeholder {
    color: var(--gen-muted);
}

/* El campo no lleva contorno propio: el foco se ve en todo el recuadro */
.gen-cmd-in:focus-within {
    box-shadow: inset 0 -2px 0 var(--gen-link);
}

.gen-cmd-list {
    max-height: min(380px, 55vh);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 6px;
}

.gen-cmd-group {
    padding: 10px 10px 4px;
    font-family: var(--gen-f-mono);
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gen-muted);
}

.gen-cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--gen-radius-sm);
    color: var(--gen-ink);
    cursor: pointer;
}

.gen-cmd-icon {
    flex: none;
    color: var(--gen-muted);
}

.gen-cmd-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gen-cmd-title,
.gen-cmd-sub {
    overflow-wrap: anywhere;
}

.gen-cmd-sub {
    font-size: .8rem;
    color: var(--gen-muted);
}

.gen-cmd-hint {
    margin-left: auto;
    flex: none;
}

.gen-cmd-item.is-selected {
    background: var(--gen-accent);
    color: var(--gen-accent-ink);
}

.gen-cmd-item.is-selected .gen-cmd-icon,
.gen-cmd-item.is-selected .gen-cmd-sub {
    color: var(--gen-accent-ink);
}

.gen-cmd-list[aria-busy=true] {
    opacity: .7;
}

.gen-cmd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
    color: var(--gen-muted);
    overflow-wrap: anywhere;
}

.gen-cmd-empty svg,
.gen-cmd-empty i {
    font-size: 1.5rem;
    opacity: .6;
}

.gen-cmd-foot {
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-top: 1px solid var(--gen-line);
    font-size: .8rem;
    color: var(--gen-muted);
}

/* Móvil: el buscador ocupa toda la pantalla (el teclado tapa la mitad inferior) */
@media (max-width: 767.98px) {
    .gen-cmd .modal-dialog {
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .gen-cmd .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
        padding-top: var(--gen-safe-top);
    }

    .gen-cmd-in {
        padding: 6px calc(4px + var(--gen-safe-right)) 6px calc(16px + var(--gen-safe-left));
    }

    .gen-cmd-list {
        flex: 1;
        max-height: none;
        padding-bottom: calc(6px + var(--gen-safe-bottom));
    }
}

/* Ayuda de atajos */
.gen-shortcuts-table td {
    padding: 10px 8px;
    vertical-align: middle;
    background: transparent;
}

.gen-shortcuts-table td:first-child {
    white-space: nowrap;
    width: 1%;
    color: var(--gen-muted);
}

/* ==========================================================================
   28. Salidas
   ========================================================================== */
.gen-outing-month { display: block; margin: 18px 0 8px; }

/* Filtros del listado: buscador y tipo en la misma línea en escritorio */
.gen-outing-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.gen-outing-filters .gen-search { margin-bottom: 0; }

@media (min-width: 768px) {
    .gen-outing-filters { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); }
}

/* Tarjeta del listado: cabecera (fecha + título/estado + hora/lugar), tipos y pie */
.gen-outing-card {
    gap: 12px;
    padding: 16px;
    color: inherit;
    text-decoration: none;
}

.gen-outing-card:hover { border-color: var(--gen-muted); color: inherit; }

.gen-outing-top { display: flex; gap: 14px; align-items: flex-start; }

.gen-outing-date {
    flex: 0 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 8px 0;
    border-radius: var(--gen-radius-sm);
    background: var(--gen-sunken);
    border: 1px solid var(--gen-line);
    color: var(--gen-ink);
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
}

.gen-outing-date b { font-size: 1.5rem; font-family: var(--gen-f-display); line-height: 1; }

.gen-outing-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }

.gen-outing-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.gen-outing-title-row .gen-card-title { flex: 1 1 60%; min-width: 0; font-size: 1.05rem; line-height: 1.25; }
.gen-outing-status { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.gen-outing-when,
.gen-outing-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: .875rem;
    color: var(--gen-muted);
}

.gen-outing-when > span,
.gen-outing-foot > span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }

.gen-outing-types { display: flex; flex-wrap: wrap; gap: 6px; }

.gen-outing-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gen-sunken);
    color: var(--gen-ink);
    font-size: .8rem;
    white-space: nowrap;
}

.gen-outing-type svg,
.gen-outing-type i { color: var(--gen-link); }

.gen-outing-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--gen-line); }
.gen-outing-foot .gen-num { color: var(--gen-ink); font-weight: 700; }
.gen-outing-caves { flex: 1 1 60%; }

.gen-outing-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.gen-outing-head { margin-bottom: 12px; }

/* Detalle: acción principal + menú de acciones secundarias (a la derecha, solo icono y texto) */
.gen-detail-actions { align-items: center; margin-bottom: 12px; }
.gen-detail-actions > form,
.gen-detail-actions > .btn { align-self: stretch; }
.gen-detail-actions .dropdown { display: flex; }
.gen-more-actions { align-self: flex-end; }
.gen-more-actions > .btn-link { color: var(--gen-muted); text-decoration: none; font-weight: 600; padding-inline: 8px; }
.gen-more-actions > .btn-link:hover,
.gen-more-actions > .btn-link:focus-visible,
.gen-more-actions > .btn-link[aria-expanded="true"] { color: var(--gen-ink); }

@media (min-width: 768px) {
    .gen-detail-actions > form,
    .gen-detail-actions > .btn { align-self: auto; }
    .gen-more-actions { margin-left: auto; align-self: center; }
}
.gen-detail-actions .dropdown-menu { background: var(--gen-surface); border-color: var(--gen-line); min-width: 220px; }
.gen-detail-actions .dropdown-item { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--gen-ink); }
.gen-detail-actions .dropdown-item:hover,
.gen-detail-actions .dropdown-item:focus { background: var(--gen-sunken); color: var(--gen-ink); }
.gen-detail-actions .dropdown-item.gen-item-danger,
.gen-detail-actions .dropdown-item.gen-item-danger:hover { color: var(--gen-crit); }

/* Cueva sin ficha técnica */
.gen-chip-other,
.gen-cave-chip-other { border-style: dashed; }

.gen-bag-list { list-style: none; margin: 0; padding: 0; }

.gen-bag-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gen-line);
}

.gen-bag-line:last-child { border-bottom: 0; }
.gen-bag-name { flex: 1; min-width: 0; }
.gen-bag-state { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }

.gen-stock-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gen-muted);
}

.gen-stock-dot-ok { background: var(--gen-ok); }
.gen-stock-dot-low { background: var(--gen-warn); }
.gen-stock-dot-short,
.gen-stock-dot-none { background: var(--gen-crit); }
.gen-stock-dot-free { background: var(--gen-blocked); }

.gen-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.gen-person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.gen-person { display: flex; align-items: center; gap: 8px; }
.gen-person-external .gen-avatar { border: 1px dashed var(--gen-muted); }

/* Estado de cada bloque de la devolución: Sin indicar (crit) / Completo (ok) / Falta N (warn).
   Borde de 2 px y fondo tintado del color; la pastilla lleva icono del color y texto --gen-ink sobre
   un tinte más fuerte (el blanco sobre --gen-warn no llega a 4,5:1 en claro, y en oscuro los tokens son claros). */
.gen-return-line { --gen-return-c: var(--gen-crit); border: 2px solid var(--gen-return-c); }
.gen-return-line.gen-return-state-none { --gen-return-c: var(--gen-crit); }
.gen-return-line.gen-return-state-ok { --gen-return-c: var(--gen-ok); }
.gen-return-line.gen-return-state-warn { --gen-return-c: var(--gen-warn); }
.gen-return-line[class*="gen-return-state-"] {
    background: color-mix(in srgb, var(--gen-return-c) 10%, var(--gen-surface));
}

.gen-return-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid var(--gen-return-c);
    border-radius: 999px;
    background: color-mix(in srgb, var(--gen-return-c) 18%, var(--gen-surface));
    color: var(--gen-ink);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}
.gen-return-badge-icon { display: none; color: var(--gen-return-c); }
.gen-return-state-none .gen-return-badge-icon[data-badge-icon="none"],
.gen-return-state-ok .gen-return-badge-icon[data-badge-icon="ok"],
.gen-return-state-warn .gen-return-badge-icon[data-badge-icon="warn"] { display: inline-flex; }

.gen-return-missing { font-weight: 600; color: var(--gen-ink); }
.gen-return-review-check { min-height: 44px; display: flex; align-items: center; gap: 8px; padding-left: 0; }
.gen-return-review-check .form-check-input { width: 1.4em; height: 1.4em; margin: 0; float: none; }

.gen-return-counters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Contador de la pantalla de devolución: en escritorio no ocupan todo el ancho */
@media (min-width: 768px) {
    .gen-return-counters { grid-template-columns: repeat(2, minmax(0, 220px)); }
}

.gen-return-counters .btn { min-width: 44px; min-height: 44px; }

/* Pieza no divisible: dos botones de estado en vez de contadores */
.gen-return-toggle { display: flex; flex-wrap: wrap; gap: 10px; }
.gen-return-toggle .gen-return-state { min-width: 140px; }

.gen-pending-block + .gen-pending-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gen-line); }

.gen-btn-touch,
.gen-detail-actions .btn,
.gen-savebar .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* Formulario de salida: tipo en botones grandes, saca editable y hojas (material, socios, cuevas) */
.gen-outing-form .section-title { margin-bottom: 12px; }
.gen-outing-form fieldset legend { font-weight: 700; }

.gen-type-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 6px 4px;
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius-sm);
    background: var(--gen-surface);
    color: var(--gen-ink);
    font-size: .8rem;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
}

.gen-type-tile i { font-size: 1.15rem; color: var(--gen-muted); }
.gen-type-tile:hover { border-color: var(--gen-link); }
.btn-check:checked + .gen-type-tile { border: 2px solid var(--gen-ink); background: var(--gen-sunken); font-weight: 700; }
.btn-check:checked + .gen-type-tile i { color: var(--gen-ink); }
.btn-check:focus-visible + .gen-type-tile { outline: 2px solid var(--gen-link); outline-offset: 2px; }

.gen-text-crit { color: var(--gen-crit); }
.gen-text-warn { color: var(--gen-warn); }

.gen-bag-warning {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--gen-warn);
    border-radius: var(--gen-radius-sm);
    background: var(--gen-sunken);
    color: var(--gen-ink);
    font-size: .875rem;
}

.gen-bag-warning i { color: var(--gen-warn); margin-top: 3px; }

/* Recordatorio del material o de su tipo en una línea de la saca: texto en tinta (contraste) y campana en warn */
.gen-bag-reminder { color: var(--gen-ink); font-style: italic; }
.gen-bag-reminder i { color: var(--gen-warn); font-style: normal; }

.gen-bag-main {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Contador −/+ con cantidad editable */
.gen-qty {
    flex: none;
    display: flex;
    align-items: center;
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius-sm);
    background: var(--gen-surface);
}

.gen-qty button {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--gen-ink);
    font-size: 1.25rem;
    line-height: 1;
}

.gen-qty button:disabled { color: var(--gen-muted); opacity: .5; }

.gen-qty input {
    width: 3em;
    height: 44px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gen-ink);
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.gen-qty input::-webkit-outer-spin-button,
.gen-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gen-qty-lg button { width: 52px; height: 52px; font-size: 1.5rem; }
.gen-qty-lg input { width: 3.2em; font-size: 1.25rem; }

/* Listas de selección de las hojas */
.gen-pick-list { list-style: none; margin: 0; padding: 0; }
.gen-pick-item + .gen-pick-item { border-top: 1px solid var(--gen-line); }
.gen-pick-item.is-open { background: var(--gen-sunken); border-radius: var(--gen-radius-sm); }

.gen-pick-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 10px 6px;
    border: 0;
    background: transparent;
    color: var(--gen-ink);
    text-align: left;
    cursor: pointer;
}

.gen-pick-row:disabled { opacity: .55; cursor: default; }
.gen-pick-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gen-pick-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gen-pick-bar { margin-top: 6px; height: 6px; }
.gen-pick-free { color: var(--gen-link); font-weight: 700; }
/* "Quitar de la saca" bajo la fila de un material que ya está en la saca (hermano del botón de la fila) */
.gen-pick-actions { display: flex; justify-content: flex-end; padding: 0 6px 6px; margin-top: -6px; }
/* Enlace compacto en rojo: la zona táctil (36 px) es mayor que el texto, pero no ocupa una fila entera */
.gen-pick-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--gen-radius-sm);
    background: transparent;
    color: var(--gen-crit);
    font-size: .8125rem;
    font-weight: 600;
}
.gen-pick-remove:hover,
.gen-pick-remove:focus-visible { background: color-mix(in srgb, var(--gen-crit) 12%, transparent); }
.gen-pick-empty { padding: 14px 6px; }
.gen-import-row .form-check-input { flex: none; width: 22px; height: 22px; margin: 0; }

.gen-pick-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0 6px 12px;
}

/* Pestañas segmentadas (Socios / Externo) */
.gen-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 4px;
    border-radius: 12px;
    background: var(--gen-sunken);
}

.gen-seg .nav-link {
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--gen-muted);
}

.gen-seg .nav-link.active { background: var(--gen-surface); color: var(--gen-ink); font-weight: 700; }

/* Socios: tarjetas que se marcan con un toque */
#sheet-people-js .gen-person-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gen-person-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    min-height: 88px;
    padding: 12px 4px;
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius);
    background: var(--gen-surface);
    color: var(--gen-ink);
    font-size: .8rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.gen-person-card .gen-avatar { width: 48px; height: 48px; font-size: 1rem; }
.gen-person-card[aria-pressed="true"] { border: 2px solid var(--gen-link); background: var(--gen-sunken); font-weight: 700; }

.gen-person-check {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gen-link);
    color: var(--gen-surface);
    font-size: .7rem;
}

.gen-person-card[aria-pressed="true"] .gen-person-check { display: grid; }

.gen-people-list { list-style: none; margin: 0; padding: 0; }
.gen-people-list .gen-person { min-height: 48px; padding: 4px 0; }
.gen-people-list .gen-person + .gen-person { border-top: 1px solid var(--gen-line); }
.gen-person-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Cuevas asociadas */
.gen-chips-wrap { flex-wrap: wrap; overflow: visible; }
.gen-cave-chip { padding-right: 4px; white-space: normal; }

.gen-cave-chip button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -8px -4px -8px 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--gen-muted);
}

.gen-cave-chip button:hover { color: var(--gen-crit); }
.gen-cave-chip .gen-cave-chip-create { margin-right: -12px; }
.gen-cave-chip .gen-cave-chip-create:hover { color: var(--gen-link); }

.gen-table-group th { background: var(--gen-sunken); color: var(--gen-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

/* ==========================================================================
   29. Pestañas del Almacén
   ========================================================================== */
.gen-subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid var(--gen-line);
    border-radius: 12px;
    background: var(--gen-sunken);
    overflow-x: auto;
    scrollbar-width: none;
}
.gen-subtabs::-webkit-scrollbar { display: none; }

.gen-subtab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 16px;
    border-radius: 9px;
    color: var(--gen-muted);
    font-size: .9rem;
    white-space: nowrap;
    text-decoration: none;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .gen-subtab { padding: 6px 8px; font-size: .85rem; }
}

.gen-subtab:hover { color: var(--gen-ink); }
.gen-subtab:focus-visible { outline: 3px solid var(--gen-link); outline-offset: 2px; }

.gen-subtab.active {
    background: var(--gen-surface);
    box-shadow: 0 0 0 1px var(--gen-line);
    color: var(--gen-ink);
    font-weight: 700;
}

@media (min-width: 768px) {
    .gen-subtabs { display: inline-flex; }
    .gen-subtab { flex: none; }
}

/* Hoja "Cortar" (ficha del material) */
.gen-cut-rows { display: flex; flex-direction: column; gap: 10px; }
.gen-cut-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}
.gen-cut-field { min-width: 0; }
.gen-cut-field .form-label { margin-bottom: 4px; font-size: .85rem; color: var(--gen-muted); }
.gen-cut-row .form-control,
.gen-cut-row .cut-row-remove-js,
.cut-row-add-js { min-height: 44px; }
.gen-cut-row .cut-row-remove-js { min-width: 44px; }
.gen-cut-summary { color: var(--gen-ink); font-weight: 700; }
.gen-cut-summary-over,
.gen-cut-error { color: var(--gen-crit); }
.gen-cut-error { font-size: .9rem; }
.gen-cut-origin { color: var(--gen-muted); }

/* Título de una línea de la saca: pieza que se lleva (ref, longitud, tipo) y, debajo, lo que pide la ficha */
.gen-line-head { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.gen-line-ref { font-weight: 700; }
.gen-line-len {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid var(--gen-line);
    border-radius: 999px;
    font-family: var(--gen-f-mono);
    font-size: .8125rem;
    line-height: 1.5;
}
.gen-line-type { color: var(--gen-muted); font-size: .875rem; }
.gen-line-source { display: block; margin-top: 2px; color: var(--gen-muted); }
.gen-line-source svg, .gen-line-source i { margin-right: 4px; }
.gen-line-needs { font-weight: 600; }

/* Foto de un material: miniatura cuadrada (listado del almacén, saca) que abre el visor; sin foto, icono por defecto */
.gen-thumb {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--gen-line);
    border-radius: var(--gen-radius-sm);
    background: var(--gen-sunken);
    color: var(--gen-muted);
}
.gen-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-thumb svg { width: 55%; height: 55%; opacity: .7; }
.gen-thumb.image-viewer-js { cursor: zoom-in; }
.gen-thumb.image-viewer-js:focus-visible { outline: 2px solid var(--gen-link); outline-offset: 2px; }
.gen-thumb-sm { width: 36px; height: 36px; border-radius: 8px; }
/* Ficha del material: foto cuadrada junto al título (usa la foto original para que no se vea borrosa) */
.gen-thumb-lg { width: 88px; height: 88px; border-radius: var(--gen-radius); }
@media (min-width: 768px) {
    .gen-thumb-lg { width: 112px; height: 112px; }
}
.gen-material-detail-head { display: flex; align-items: center; gap: 16px; }
.gen-material-detail-head .gen-material-main { flex: 1; min-width: 0; }
.gen-material-head .gen-thumb { align-self: center; }
.gen-material-head .gen-material-main { flex: 1; }

/* Campo de foto del formulario del material */
.gen-image-field { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gen-image-field .gen-thumb { width: 96px; height: 96px; }
.gen-image-field-controls { flex: 1; min-width: 220px; }

/* Registro con enlace: campo trampa fuera de la vista (no display:none, que algunos bots detectan) */
.gen-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Pantalla del QR para proyectar */
.gen-qr-screen {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.gen-qr-title { margin: 0; font-family: var(--gen-f-display); font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 750; }
/* El QR va siempre negro sobre blanco (también en tema oscuro) para que lo lean todos los móviles */
.gen-qr-box { padding: 16px; border-radius: var(--gen-radius); background: #fff; line-height: 0; }
.gen-qr-box img, .gen-qr-box canvas { display: block; max-width: 100%; height: auto; }
.gen-qr-url { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 600; overflow-wrap: anywhere; }
.gen-qr-expiry { margin: 0; color: var(--gen-muted); font-size: 1.125rem; }
.gen-qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.gen-qr-meta { margin: 0; color: var(--gen-muted); font-size: .875rem; }
:fullscreen .gen-qr-actions, :fullscreen .gen-auth-footer { display: none; }

/* Campana de notificaciones (barra superior) */
.gen-bell { position: relative; }
.gen-bell-badge {
    position: absolute;
    top: 6px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gen-accent);
    color: var(--gen-accent-ink);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.gen-notif-list { margin: 0; padding: 0; list-style: none; }
.gen-notif {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--gen-line);
    color: var(--gen-ink);
    text-decoration: none;
}
.gen-notif-list li:last-child .gen-notif { border-bottom: 0; }
.gen-notif:hover { color: var(--gen-ink); background: var(--gen-sunken); }
.gen-notif-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gen-sunken);
    color: var(--gen-link);
}
.gen-notif-warn .gen-notif-icon { color: var(--gen-warn); }
.gen-notif-crit .gen-notif-icon { color: var(--gen-crit); }
.gen-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.gen-notif:not(.is-unread) .gen-notif-text { color: var(--gen-muted); }
.gen-notif:not(.is-unread) .gen-notif-text b { color: var(--gen-ink); font-weight: 600; }
.gen-notif-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--gen-link); }
.gen-notif-empty { margin: 8px 0; text-align: center; }
.gen-notif-page { padding: 4px 16px; margin-bottom: 16px; }

/* Visor de fotos: por encima de las hojas (puede abrirse desde la saca) */
.gen-image-viewer { z-index: 1070; }
.modal-backdrop.gen-image-viewer-backdrop { z-index: 1065; }
.gen-image-viewer .modal-body { background: var(--gen-sunken); }
.gen-image-viewer .modal-body img {
    display: block;
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* Selector de vista Tarjetas / Lista (base.elements.view_toggle) */
.gen-views[data-view="cards"] .gen-view-table,
.gen-views[data-view="table"] .gen-view-cards { display: none; }

.gen-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.gen-list-toolbar .gen-list-count { margin-bottom: 0; }

.gen-view-toggle {
    flex: none;
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    padding: 3px;
    border-radius: 10px;
    background: var(--gen-sunken);
}
.gen-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--gen-muted);
}
.gen-view-btn:hover { color: var(--gen-ink); }
.gen-views[data-view="cards"] .gen-view-btn[data-view="cards"],
.gen-views[data-view="table"] .gen-view-btn[data-view="table"] {
    background: var(--gen-surface);
    color: var(--gen-ink);
    box-shadow: 0 1px 2px rgba(var(--gen-ink-rgb), .12);
}

.gen-view-table { margin-bottom: 14px; }
.gen-view-table .table { margin-bottom: 0; }
.gen-view-table td { vertical-align: middle; }
.gen-view-table .gen-thumb { flex: none; }
.gen-view-table .gen-stock-legend { margin-top: 0; }
.gen-table-title { font-weight: 600; }
.gen-table-sub { font-size: .8rem; color: var(--gen-muted); }
.gen-table-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
@media (min-width: 768px) {
    .gen-table-pills { justify-content: flex-start; }
}

/* ==========================================================================
   Estadísticas del almacén (materials/stats)
   ========================================================================== */
.gen-stats { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.gen-stats h2, .gen-stats h3 { font-family: var(--gen-f-display); font-weight: 800; margin: 0; }
.gen-stats h2 { font-size: 1.25rem; }
.gen-stats h3 { font-size: 1.05rem; }
.gen-stats-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 8px; }
.gen-stats-section { gap: 12px; }
.gen-stats-note { font-size: .8rem; }

.gen-stats-filter { gap: 12px; }
.gen-stats-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.gen-stats-dates label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.gen-stats-dates .form-control { min-height: 40px; }
.gen-stats-summary { font-size: .875rem; flex: 1 1 260px; text-align: right; }
.gen-stats-summary b { color: var(--gen-ink); }
@media (max-width: 575.98px) {
    .gen-stats-summary { text-align: left; }
}

.gen-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.gen-stats-wide { grid-column: 1 / -1; gap: 12px; }
.gen-stats-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }

.gen-stats-label { font-family: var(--gen-f-mono); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--gen-muted); }
.gen-stats-big { font-family: var(--gen-f-display); font-weight: 800; font-size: 2rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.gen-stats-big small { font-size: .95rem; font-weight: 600; color: var(--gen-muted); }
.gen-stats-mid { font-size: 1.6rem; }
.gen-stats-big.is-ok { color: var(--gen-ok); }
.gen-stats-big.is-warn { color: var(--gen-warn); }
.gen-stats-big.is-crit { color: var(--gen-crit); }
.gen-stats-big.is-blocked { color: var(--gen-blocked); }
.gen-stats-crit { color: var(--gen-crit); font-weight: 700; }

.gen-stats-figures { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 36px; }
.gen-stats-aside { margin-left: auto; font-size: .875rem; text-align: right; }
.gen-stats-aside b { color: var(--gen-ink); }
@media (max-width: 575.98px) {
    .gen-stats-aside { margin-left: 0; text-align: left; flex-basis: 100%; }
}
.gen-stats-averages { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 12px 48px; }
.gen-stats-averages > .gen-stats-label { flex-basis: 100%; }

.gen-stats-table th { font-family: var(--gen-f-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gen-muted); }
.gen-stats-table td { font-variant-numeric: tabular-nums; }
.gen-stats-use-col { width: 200px; }
.gen-stats-inline { display: flex; align-items: center; gap: 8px; }
.gen-stats-inline .gen-stats-track { flex: 1; }
.gen-stats-inline .gen-mono { font-size: .75rem; }

/* Barras horizontales de los rankings */
.gen-stats-track { height: 8px; min-width: 40px; margin-top: 4px; border-radius: 99px; background: var(--gen-sunken); overflow: hidden; }
.gen-stats-inline .gen-stats-track { margin-top: 0; }
.gen-stats-fill { height: 100%; background: var(--gen-link); border-radius: 99px; }
.gen-stats-fill.is-accent { background: var(--gen-accent); }

.gen-stats-rank { display: grid; grid-template-columns: minmax(0, 1fr) 56px 64px; gap: 8px 12px; align-items: center; font-size: .875rem; }
.gen-stats-bytype { display: grid; grid-template-columns: minmax(80px, 130px) minmax(0, 1fr) minmax(70px, auto); gap: 10px 12px; align-items: center; font-size: .875rem; }
.gen-stats-bytype .gen-stats-track { margin-top: 0; }

/* Columnas verticales del mensual */
.gen-stats-columns { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; align-items: end; height: 170px; padding-top: 18px; border-bottom: 1px solid var(--gen-line); }
.gen-stats-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.gen-stats-col .gen-mono { font-size: .6875rem; }
.gen-stats-colbar { width: 100%; min-height: 2px; background: var(--gen-link); border-radius: 5px 5px 0 0; }
.gen-stats-colbar.is-accent { background: var(--gen-accent); }
.gen-stats-collabels { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; text-align: center; }
.gen-stats-collabels span { overflow: hidden; text-overflow: clip; font-size: .625rem; }

.gen-stats-more > summary { display: inline-flex; margin-top: 8px; list-style: none; cursor: pointer; }
.gen-stats-more > summary::-webkit-details-marker { display: none; }
.gen-stats-more[open] > summary { margin-bottom: 8px; }

/* Botón «i» con la explicación de un indicador (zona táctil de 32 px) */
.gen-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gen-muted); font-size: .85rem; line-height: 1; vertical-align: middle; text-transform: none; letter-spacing: 0; cursor: pointer; }
.gen-info-btn:hover, .gen-info-btn[aria-expanded="true"] { color: var(--gen-ink); background: var(--gen-sunken); }
.gen-info-btn:focus-visible { outline: 2px solid var(--gen-link); outline-offset: 1px; }
.gen-stats-popover { --bs-popover-max-width: 280px; font-size: .85rem; }


/* ===== Crónica de la salida (boletín) ===== */
.gen-chronicle-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.gen-chronicle-head .gen-label { margin: 0; }
.gen-chronicle-authors { font-size: .9rem; margin-bottom: 8px; }
.gen-chronicle-excerpt { margin: 4px 0 12px; color: var(--gen-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gen-chronicle-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gen-chronicle-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gen-chronicle-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .92rem; }
.gen-chronicle-facts dt { color: var(--gen-muted); font-weight: 400; }
.gen-chronicle-facts dd { margin: 0; overflow-wrap: anywhere; }
.gen-chronicle-settings > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.gen-chronicle-settings > summary::-webkit-details-marker { display: none; }
.gen-chronicle-settings > summary::after { content: "\25BE"; margin-left: auto; color: var(--gen-muted); }
.gen-chronicle-settings[open] > summary::after { content: "\25B4"; }
.gen-chronicle-author-remove { color: inherit; line-height: 1; text-decoration: none; }
.gen-chronicle-body p, .gen-chronicle-body h3 { margin-bottom: .75em; }
.gen-chronicle-body h3, .gen-chronicle-editor .ql-editor h3 { font-family: var(--gen-f-display); font-size: 1.15rem; font-weight: 700; margin-top: 1em; }

/* Quill con los tokens de la app (claro y oscuro); la barra se queda arriba al escribir textos largos */
.gen-chronicle-editor .ql-toolbar.ql-snow { position: sticky; top: calc(var(--gen-topbar-h) + var(--gen-safe-top)); z-index: 5; background: var(--gen-surface); border: 1px solid var(--gen-line); border-radius: var(--gen-radius-sm) var(--gen-radius-sm) 0 0; }
.gen-chronicle-editor .ql-container.ql-snow { border: 1px solid var(--gen-line); border-top: 0; border-radius: 0 0 var(--gen-radius-sm) var(--gen-radius-sm); font-family: var(--gen-f-body); font-size: 1rem; color: var(--gen-ink); background: var(--gen-surface); }
.gen-chronicle-editor .ql-editor { min-height: 280px; line-height: 1.6; }
.gen-chronicle-editor .ql-editor.ql-blank::before { color: var(--gen-muted); }
.gen-chronicle-editor .ql-snow .ql-stroke { stroke: var(--gen-ink); }
.gen-chronicle-editor .ql-snow .ql-fill { fill: var(--gen-ink); }
.gen-chronicle-editor .ql-snow button:hover .ql-stroke, .gen-chronicle-editor .ql-snow button.ql-active .ql-stroke { stroke: var(--gen-link); }
.gen-chronicle-editor .ql-snow button:hover .ql-fill, .gen-chronicle-editor .ql-snow button.ql-active .ql-fill { fill: var(--gen-link); }
.gen-chronicle-editor .ql-snow .ql-toolbar button, .gen-chronicle-editor .ql-toolbar.ql-snow button { width: 36px; height: 32px; }
.gen-chronicle-savebar { flex-wrap: wrap; }

.gen-chronicle-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gen-chronicle-photo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gen-chronicle-photo-img { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: var(--gen-radius-sm); overflow: hidden; background: var(--gen-sunken); cursor: zoom-in; }
.gen-chronicle-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-chronicle-photo-img:focus-visible { outline: 2px solid var(--gen-link); outline-offset: 2px; }
.gen-chronicle-photo-tools { display: flex; justify-content: space-between; align-items: center; }
.gen-chronicle-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 12px; border: 2px dashed var(--gen-line); border-radius: var(--gen-radius-sm); color: var(--gen-muted); cursor: pointer; text-align: center; }
.gen-chronicle-photo-add:hover, .gen-chronicle-photo-add:focus-within { border-color: var(--gen-link); color: var(--gen-link); }


/* ===== Boletín ===== */
.gen-bulletin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gen-bulletin-card { display: block; color: inherit; text-decoration: none; }
.gen-bulletin-card:hover { color: inherit; border-color: var(--gen-link); }
.gen-bulletin-progress { height: 8px; margin: 8px 0 4px; border-radius: 99px; background: var(--gen-sunken); overflow: hidden; }
.gen-bulletin-progress span { display: block; height: 100%; background: var(--gen-ok); border-radius: 99px; }
.gen-bulletin-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.gen-bulletin-row-muted td { opacity: .65; }

.gen-bulletin-toolbar { display: flex; gap: 8px; align-items: center; }
.gen-bulletin-toolbar .gen-search { flex: 1 1 auto; min-width: 0; margin: 0; }
.gen-bulletin-toolbar .btn { flex: none; }