/**
 * panel-theme.css — tema del panel (layouts Vertical y Horizontal)
 * AdminLTE 4.1.0 + Bootstrap 5.3.8
 *
 * Orden de carga en templates/base.html, y el orden importa:
 *   1. css/design-tokens.css   — define las variables
 *   2. adminlte.min.css        — el shell del panel
 *   3. css/panel-theme.css     — ESTE archivo: mapea tokens → Bootstrap/AdminLTE
 *   4. css/adminlte3-skins.css — el skin que cada empresa eligió, si eligió uno
 *
 * El paso 4 va último a propósito: este tema es el aspecto por defecto de la
 * instalación, pero la elección de navbar/sidebar de cada tenant
 * (/security/dashboard/update/) tiene que poder sobreescribirlo.
 *
 * NO duplicar hex codes — mapear variables de design-tokens.css.
 */

/* =============================================
   1. MAPEO DE TOKENS → VARIABLES BOOTSTRAP / ADMINLTE 4
   ============================================= */
:root,
[data-bs-theme="light"] {
    /* Bootstrap 5.3 — paleta semántica */
    --bs-primary:           var(--color-primary);
    --bs-primary-rgb:       8, 31, 58;
    --bs-secondary:         var(--color-gray);
    --bs-secondary-rgb:     85, 85, 85;
    --bs-success:           var(--color-success);
    --bs-danger:            var(--color-danger);
    --bs-warning:           var(--color-warning);
    --bs-info:              var(--color-info);
    --bs-body-font-family:  var(--font-body);
    --bs-border-radius:     6px;
    --bs-link-color:        var(--color-primary);
    --bs-link-hover-color:  var(--color-accent);

    /* AdminLTE 4 — shell del panel */
    --lte-sidebar-width:        260px;
    --lte-sidebar-bg:           var(--color-primary);
    --lte-sidebar-color:        var(--color-white);
    --lte-sidebar-hover-bg:     var(--color-primary-light);
    --lte-sidebar-active-bg:    var(--color-accent);
    --lte-sidebar-active-color: var(--color-white);
    --lte-sidebar-submenu-bg:   var(--color-primary-dark);
    --lte-navbar-bg:            var(--color-white);
    --lte-navbar-color:         var(--color-primary);
    --lte-brand-bg:             var(--color-primary);

    /* Tokens semánticos del panel — el ÚNICO lugar donde se decide
       "de qué color va el texto/superficie". Cada tema los redefine y los
       componentes de abajo solo consumen estos, nunca hex ni --color-primary
       directamente. Así el modo oscuro no requiere duplicar reglas. */
    --panel-surface:        var(--color-white);      /* fondo de tarjetas */
    --panel-surface-alt:    var(--color-bg-light);   /* header/footer/breadcrumb */
    --panel-text:           var(--color-gray);       /* texto normal */
    --panel-text-strong:    var(--color-primary);    /* labels, títulos */
    /* No se usa --color-gray-light (#888): sobre #F5F7FA da 3.3:1 y estas
       etiquetas son de .7rem. #666f79 llega a 4.76:1 (AA). */
    --panel-text-muted:     #666f79;                 /* texto secundario */
    --panel-border:         var(--color-border);
    --panel-highlight:      var(--color-primary);    /* cifras destacadas */
}

/* =============================================
   2. MODO OSCURO — via data-bs-theme (AdminLTE 4)
   ============================================= */
[data-bs-theme="dark"] {
    --bs-body-bg:       #0b1626;
    --bs-body-color:    #e8ecf2;
    --lte-navbar-bg:    #0e1c30;
    --color-surface:    #101f34;
    --color-border:     #1e3350;

    /* Variables de color explícitas para dark mode — Fix para var(--color-white) */
    --color-white:      #FFFFFF;
    --color-primary:    #081F3A;
    --color-primary-dark: #04101f;
    --color-primary-light: #0e3260;
    --color-accent:     #F57C00;
    --color-accent-light: #FF9800;
    --color-gray:       #555555;

    /* --color-bg-light se usa como fondo de card-header, card-footer,
       breadcrumb y secciones alternas. En claro es #F5F7FA; si no se
       reasigna aquí, esas zonas quedan blancas en modo oscuro y el texto
       claro encima resulta ilegible. */
    --color-bg-light:   #0e1c30;
    --color-bg-subtle:  #0d1a2c;

    /* Tokens semánticos — el texto NUNCA puede seguir siendo azul marino
       (--color-primary) ni gris #555 sobre fondos oscuros. */
    --panel-surface:        #101f34;
    --panel-surface-alt:    #0e1c30;
    --panel-text:           #e8ecf2;
    --panel-text-strong:    #f2f6fb;
    --panel-text-muted:     #9fb0c5;
    --panel-border:         #1e3350;
    /* En oscuro el azul marino de marca no contrasta: se destaca con el naranja */
    --panel-highlight:      var(--color-accent-light);

    /* design-tokens.css se carga ANTES que este archivo y fija `body`, `a` y
       `h1..h6`. Esos selectores leen ahora estos tokens, así que basta con
       definirlos aquí; no hace falta pelear especificidad. */
    --panel-body-bg:        #0b1626;
    --panel-link:           var(--color-accent-light);
    --panel-link-hover:     var(--color-accent);
}

/* Tarjetas: superficie oscura CON texto claro (antes el texto quedaba
   en #1a1a1a sobre #101f34, es decir, invisible). */
[data-bs-theme="dark"] .card {
    background-color: var(--panel-surface);
    color: var(--panel-text);
}

[data-bs-theme="dark"] .card-body {
    background-color: var(--panel-surface);
    color: var(--panel-text);
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--color-primary-dark);
    color: var(--panel-text-strong) !important;
}

[data-bs-theme="dark"] .card-header .card-title,
[data-bs-theme="dark"] .card-header h1,
[data-bs-theme="dark"] .card-header h2,
[data-bs-theme="dark"] .card-header h3,
[data-bs-theme="dark"] .card-header h4,
[data-bs-theme="dark"] .card-header h5,
[data-bs-theme="dark"] .card-header i {
    color: var(--panel-text-strong) !important;
    opacity: 1;
}

[data-bs-theme="dark"] .card-footer {
    background-color: var(--panel-surface-alt);
    color: var(--panel-text);
}

/* Encabezados y texto suelto dentro de la tarjeta (p.ej. el total de la
   compra, que es un <h1> sin clase de color). */
[data-bs-theme="dark"] .card-body h1,
[data-bs-theme="dark"] .card-body h2,
[data-bs-theme="dark"] .card-body h3,
[data-bs-theme="dark"] .card-body h4,
[data-bs-theme="dark"] .card-body h5,
[data-bs-theme="dark"] .card-body h6,
[data-bs-theme="dark"] .card-footer h1,
[data-bs-theme="dark"] .card-footer h2,
[data-bs-theme="dark"] .card-footer h3,
[data-bs-theme="dark"] .card-footer h4,
[data-bs-theme="dark"] .card-footer h5,
[data-bs-theme="dark"] .card-footer h6 {
    color: var(--panel-text-strong);
}

/* Bootstrap fija .text-muted/.text-primary a valores pensados para claro */
[data-bs-theme="dark"] .text-muted {
    color: var(--panel-text-muted) !important;
}

[data-bs-theme="dark"] .text-primary {
    color: var(--color-accent-light) !important;
}

[data-bs-theme="dark"] hr {
    border-top-color: var(--panel-border);
    opacity: .5;
}

/* =============================================
   3. NAVBAR SUPERIOR (.app-header)
   ============================================= */
.app-header {
    border-bottom: 1px solid var(--color-border);
}

/* Opción "Marca (navy corporativo)" de Dashboard.navbar -- la única de la
   lista que no viene de la paleta genérica de AdminLTE 3
   (css/adminlte3-skins.css), sino del propio token de marca. `!important`
   por el mismo motivo que .app-sidebar más abajo: dos hojas cargan una
   regla de igual especificidad para .app-header (esta y
   adminlte3-skins.css) y sin !important el orden de carga decide cuál gana
   en vez del nombre de la clase.
   Nombre "navbar-corporate", NO "navbar-brand": el logo (<a>) en
   hzt_header.html ya usa la clase nativa de Bootstrap `navbar-brand`, que
   no tiene nada que ver con este skin de color. */
.navbar-corporate.app-header {
    background-color: var(--color-primary) !important;
    --bs-navbar-color: rgba(255, 255, 255, .8);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-disabled-color: rgba(255, 255, 255, .8);
}

.navbar-corporate.app-header .nav-link,
.navbar-corporate.app-header .hzt-brand .brand-text,
.navbar-corporate.app-header .hzt-company-name {
    color: #fff;
}

.app-header .nav-link {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

.app-header .nav-link:hover {
    color: var(--color-accent);
}

[data-bs-theme="dark"] .app-header {
    border-bottom-color: var(--color-primary-light);
}

[data-bs-theme="dark"] .app-header .nav-link {
    color: var(--color-white);
}

[data-bs-theme="dark"] .app-header .nav-link:hover {
    color: var(--color-accent-light);
}

/* ---- Menú de usuario ----
   El componente .user-menu (ancho del dropdown, alto y tipografía del
   .user-header, paddings de .user-body/.user-footer, tamaño de .user-image)
   lo aporta AdminLTE 4.1.0. Aquí solo van los ajustes de identidad
   corporativa y el layout de las filas de datos, que la librería no cubre.
   Los selectores replican la especificidad de AdminLTE (.navbar-nav > ...)
   para que estas reglas ganen sin recurrir a !important. */
.navbar-nav > .user-menu > .nav-link {
    max-width: 220px;
}

.navbar-nav > .user-menu .user-image {
    object-fit: cover;
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    flex: 0 0 auto;
}

.navbar-nav > .user-menu > .dropdown-menu {
    overflow: hidden;
    border-color: var(--panel-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    min-height: auto;
    padding: 1rem .75rem;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    object-fit: cover;
    background-color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.35);
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
    margin-top: .6rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 600;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
    font-weight: 400;
    opacity: .8;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small.user-header-role {
    color: var(--color-accent-lighter);
    opacity: 1;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-section {
    display: block;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--panel-border);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-section .dropdown-item {
    padding: .35rem .9rem;
    font-size: .85rem;
}

.navbar-nav > .user-menu > .dropdown-menu .user-section-title {
    display: block;
    padding: .5rem .9rem .25rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--panel-text-muted);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body {
    padding: 0 0 .5rem;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body .user-body-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .3rem .9rem;
    font-size: .8rem;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body .user-body-label {
    color: var(--panel-text-muted);
    white-space: nowrap;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body .user-body-value {
    color: var(--panel-text);
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background-color: var(--panel-surface-alt);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer > .user-footer-primary {
    display: flex;
    gap: .5rem;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer > .user-footer-primary > .btn {
    flex: 1 1 0;
}

[data-bs-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu {
    background-color: var(--panel-surface);
}

[data-bs-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background-color: var(--color-primary-dark);
}

[data-bs-theme="dark"] .navbar-nav > .user-menu .user-image {
    border-color: var(--panel-border);
}

/* =============================================
   4. SIDEBAR
   ============================================= */
.app-sidebar {
    background-color: var(--color-primary) !important;
}

.app-sidebar .brand-link {
    background-color: var(--color-primary-dark);
    border-bottom: 1px solid rgba(245, 124, 0, 0.3);
    padding: 0.9rem 1rem;
}

.app-sidebar .brand-image {
    max-height: 34px;
    width: auto;
    opacity: 1;
}

/* Sustituye al logo de la empresa cuando no se ha subido uno: mismo alto que
   `.brand-image` para que la marca no salte de tamaño entre empresas. */
.app-sidebar .brand-icon {
    font-size: 1.6rem;
    line-height: 34px;
    color: var(--color-white);
}

.app-sidebar .brand-text {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--color-white);
}

.app-sidebar .sidebar-menu .nav-link {
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.2s ease;
}

.app-sidebar .sidebar-menu > .nav-item > .nav-link.active {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    font-weight: 600;
}

.app-sidebar .sidebar-menu > .nav-item > .nav-link:hover {
    background-color: var(--color-primary-light);
    color: var(--color-white);
}

.app-sidebar .nav-icon {
    color: var(--color-accent-light);
}

/* Submódulos (nav-treeview): tratamiento más discreto que el nivel de
   módulo, para que la jerarquía padre→hijo se perciba de un vistazo.
   El fondo sólido queda reservado al padre; el hijo activo se marca
   con borde de acento + texto de color, no con el mismo bloque naranja. */
.app-sidebar .nav-treeview {
    background-color: var(--lte-sidebar-submenu-bg);
}

.app-sidebar .nav-treeview .nav-link {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 400;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.app-sidebar .nav-treeview .nav-link:hover {
    background-color: transparent;
    color: var(--color-white);
    border-left-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.app-sidebar .nav-treeview .nav-link.active {
    background-color: color-mix(in srgb, var(--color-accent) 15%, transparent) !important;
    color: var(--color-accent-light) !important;
    font-weight: 500;
    border-left-color: var(--color-accent);
}

.app-sidebar .nav-treeview .nav-icon {
    opacity: 0.7;
}

.app-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.app-sidebar .user-panel {
    border-bottom: 1px solid rgba(245, 124, 0, 0.2);
}

.app-sidebar .user-panel .info a {
    color: var(--color-white);
}

/* =============================================
   5. LOGIN
   ============================================= */
.login-page {
    background-color: var(--color-bg-light);
}

.login-box .card {
    border-top: 4px solid var(--color-accent);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(8, 31, 58, 0.12);
}

.login-logo,
.login-logo a {
    font-family: var(--font-heading);
    color: var(--panel-text-strong);
}

/* El CTA de login es naranja — es una acción, no un elemento de marca */
.login-box .btn-warning,
.login-card-body .btn-warning {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

.login-box .btn-warning:hover,
.login-card-body .btn-warning:hover {
    background-color: var(--color-accent-light) !important;
    border-color: var(--color-accent-light) !important;
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
}

/* =============================================
   6. CLASES UTILITARIAS DE MARCA (.bg-brand-*)
   Para KPI cards — NO usar bg-info/success/warning/danger en widgets
   ============================================= */
.bg-brand-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.bg-brand-accent {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

.bg-brand-neutral {
    background-color: var(--color-gray) !important;
    color: var(--color-white) !important;
}

.bg-brand-info {
    background-color: var(--color-info) !important;
    color: var(--color-white) !important;
}

.bg-brand-success {
    background-color: var(--color-success) !important;
    color: var(--color-white) !important;
}

.bg-brand-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-white) !important;
}

/* =============================================
   7. WIDGETS KPI (small-box / info-box)
   ============================================= */
.small-box {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(8, 31, 58, 0.08);
}

.info-box-icon {
    border-radius: 50%;
}

/* =============================================
   8. CARDS
   ============================================= */
.card {
    border-color: var(--panel-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card .card-header {
    background-color: var(--panel-surface-alt);
    border-bottom: 1px solid var(--panel-border);
}

.card .card-header .card-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--panel-text-strong);
}

.card .card-footer {
    background-color: var(--panel-surface-alt);
    border-top: 1px solid var(--panel-border);
}

/* =============================================
   9. TABLAS DE FACTURACIÓN
   ============================================= */
.table thead th {
    font-family: var(--font-subtitle);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
}

.table tbody td {
    font-family: var(--font-body);
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--panel-text);
}

.table-hover tbody tr:hover {
    background-color: rgba(245, 124, 0, 0.04);
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* DataTables — paginación con marca */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
}

.dataTables_wrapper .paginate_button:hover {
    background: var(--color-accent) !important;
    color: var(--color-white) !important;
    border-color: var(--color-accent) !important;
}

/* =============================================
   10. BADGES DE ESTADO DE FACTURA (semánticos)
   NO usar el naranja de marca para estados del sistema
   ============================================= */
.badge-pagada {
    background-color: var(--color-success);
    color: var(--color-white);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-pendiente {
    background-color: var(--color-warning);
    color: #1a1a1a;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-vencida {
    background-color: var(--color-danger);
    color: var(--color-white);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* =============================================
   11. BOTONES DEL PANEL
   ============================================= */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--color-primary-light);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem rgba(8, 31, 58, 0.25);
}

.btn-cta {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: var(--color-accent-light);
    border-color: var(--color-accent-dark);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
}

/* =============================================
   12. FORMULARIOS
   ============================================= */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem rgba(245, 124, 0, 0.15);
}

label {
    font-family: var(--font-subtitle);
    font-weight: 600;
    color: var(--panel-text-strong);
}

/* =============================================
   13. MODALES
   ============================================= */
.modal-header {
    background-color: var(--color-primary);
    border-bottom-color: var(--color-primary-light);
}

.modal-header .btn-close {
    filter: invert(1);
}

.modal-title {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
}

/* =============================================
   14. BREADCRUMB
   ============================================= */
.breadcrumb {
    background-color: var(--panel-surface-alt);
    border: 1px solid var(--panel-border);
    border-radius: 0.375rem;
}

.breadcrumb a {
    color: var(--panel-text-strong);
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

.breadcrumb-item.active {
    color: var(--panel-text-muted);
}

/* El separador "/" de Bootstrap usa --bs-breadcrumb-divider-color, fijo a un
   gris de tema claro */
[data-bs-theme="dark"] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--panel-text-muted);
}

/* =============================================
   15. PAGINACIÓN
   ============================================= */
.pagination .page-link {
    color: var(--panel-text-strong);
    border-color: var(--panel-border);
}

.pagination .page-link:hover {
    background-color: rgba(245, 124, 0, 0.04);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* =============================================
   16. ICONOGRAFÍA CIRCULAR
   ============================================= */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
}

.icon-circle.filled {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
}

/* =============================================
   17. FOOTER
   ============================================= */
.app-footer {
    background-color: var(--panel-surface-alt);
    border-top: 1px solid var(--panel-border);
    color: var(--panel-text);
    font-size: 0.9rem;
}

.app-footer a,
.app-footer strong {
    color: var(--panel-text-strong);
}

/* =============================================
   18. TABS
   ============================================= */
.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--color-accent);
    color: var(--panel-text-strong);
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: var(--color-accent);
}

/* =============================================
   19. TIPOGRAFÍA
   ============================================= */
body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.card-title, 
.modal-title {
    font-family: var(--font-heading);
}

/* =============================================
   20. FIXES PARA TRANSICIONES SUAVES TEMA
   ============================================= */
* {
    transition-property: background-color, border-color, color;
    transition-timing-function: ease;
    transition-duration: 0.2s;
}

button, a, input[type="submit"], input[type="reset"] {
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 0.3s;
}

/* =============================================
   21. MODO OSCURO — LIBRERÍAS DE TERCEROS
   Select2, DataTables, tempusdominus y jQuery UI traen sus propios colores
   claros fijos; sin estos overrides quedan blancos dentro del panel oscuro.
   ============================================= */
[data-bs-theme="dark"] .select2-container--bootstrap4 .select2-selection,
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--panel-surface-alt);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

[data-bs-theme="dark"] .select2-container--bootstrap4 .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered {
    color: var(--panel-text) !important;
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--panel-surface-alt);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

[data-bs-theme="dark"] .select2-search__field {
    background-color: var(--panel-surface);
    border-color: var(--panel-border) !important;
    color: var(--panel-text);
}

[data-bs-theme="dark"] .select2-results__option {
    color: var(--panel-text);
}

[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-bs-theme="dark"] .dataTables_wrapper label {
    color: var(--panel-text);
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--panel-surface-alt);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

[data-bs-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu,
[data-bs-theme="dark"] .daterangepicker {
    background-color: var(--panel-surface-alt);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

[data-bs-theme="dark"] .bootstrap-datetimepicker-widget td,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget th,
[data-bs-theme="dark"] .daterangepicker td,
[data-bs-theme="dark"] .daterangepicker th {
    color: var(--panel-text);
}

[data-bs-theme="dark"] .ui-widget-content,
[data-bs-theme="dark"] .ui-autocomplete {
    background: var(--panel-surface-alt);
    border-color: var(--panel-border);
    color: var(--panel-text);
}

[data-bs-theme="dark"] .ui-menu .ui-menu-item-wrapper.ui-state-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* =============================================
   22. LAYOUT HORIZONTAL (body.layout-top-nav)
   Sin sidebar: el navbar carga la marca, la navegación de módulos y las
   acciones de sesión. AdminLTE 4 solo aporta el shell, así que el
   comportamiento responsive de estas tres zonas se define aquí.
   ============================================= */
/* Todas las opciones de Dashboard.navbar incluyen `navbar-dark` o
   `navbar-light`, pero las variantes de color (`navbar-primary`, `navbar-navy`,
   …) ya no existen en AdminLTE 4: el navbar conserva el fondo del tema. El
   resultado es texto blanco (navbar-dark) sobre fondo blanco. Se reatan aquí
   las variables del navbar a los tokens del panel para que el header se lea
   con cualquier valor guardado en security/dashboard/update/. */
.hzt-navbar {
    --bs-navbar-color: var(--panel-text);
    --bs-navbar-hover-color: var(--color-accent);
    --bs-navbar-active-color: var(--color-accent);
    --bs-navbar-brand-color: var(--panel-text-strong);
    --bs-navbar-brand-hover-color: var(--color-accent);
    --bs-navbar-toggler-border-color: var(--panel-border);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23081F3A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-color: var(--panel-surface);
    padding-top: .35rem;
    padding-bottom: .35rem;
    column-gap: .5rem;
}

[data-bs-theme="dark"] .hzt-navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8ecf2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-color: var(--lte-navbar-bg);
}

/* Sin sidebar el contenido llega hasta el borde; el respiro lo da el header.
   Se cubren los dos nombres del encabezado: `.app-content-header` es el de
   AdminLTE 4 (el que usa hzt_body.html) y `.content-header` el heredado de
   AdminLTE 3, que todavía aparece en plantillas sin migrar. */
body.layout-top-nav .app-content-header,
body.layout-top-nav .content-header {
    padding: 1rem .5rem .25rem;
}

/* ---- Marca ---- */
.hzt-navbar .hzt-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* min-width:0 permite que el texto se trunque en vez de empujar las
       acciones fuera del viewport en pantallas estrechas */
    min-width: 0;
    max-width: 45vw;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.hzt-navbar .hzt-brand .brand-image {
    height: 34px;
    width: auto;
    margin: 0;
    opacity: 1;
}

/* Sustituye al logo de la empresa cuando no se ha subido uno: mismo alto que
   `.brand-image` para que la marca no salte de tamaño entre empresas. */
.hzt-navbar .hzt-brand .brand-icon {
    font-size: 1.4rem;
    line-height: 34px;
    color: var(--panel-text-strong);
}

.hzt-navbar .hzt-brand .brand-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--panel-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Acciones (empresa / tema / usuario) ---- */
.hzt-navbar .hzt-actions {
    gap: .1rem;
    flex-wrap: nowrap;
}

.hzt-navbar .hzt-actions > .nav-item > .nav-link {
    padding: .4rem .55rem;
}

.hzt-navbar .hzt-company-name {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Por debajo de sm solo queda el icono: el nombre de la empresa compite con
   la marca y el menú de usuario por un ancho que no existe */
@media (max-width: 575.98px) {
    .hzt-navbar .hzt-company-name {
        display: none;
    }

    /* con 3 iconos de acción + toggler quedan ~150px para la marca */
    .hzt-navbar .hzt-brand {
        max-width: 40vw;
    }

    .hzt-navbar .hzt-brand .brand-text {
        font-size: .95rem;
    }

    .hzt-navbar .hzt-actions > .nav-item > .nav-link {
        padding: .4rem .4rem;
    }
}

.hzt-navbar .hzt-company .dropdown-menu .dropdown-item {
    white-space: normal;
}

/* ---- Menú de módulos ---- */
.hzt-navbar .hzt-modules {
    /* con muchos tipos de módulo la barra pasa a una segunda línea en lugar
       de desbordar horizontalmente */
    flex-wrap: wrap;
    row-gap: .15rem;
    column-gap: .1rem;
}

.hzt-navbar .hzt-modules > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.hzt-navbar .hzt-modules > .nav-item > .nav-link > i {
    color: var(--color-accent);
}

.hzt-navbar .hzt-modules > .nav-item > .nav-link:hover,
.hzt-navbar .hzt-modules > .nav-item > .nav-link:focus-visible,
.hzt-navbar .hzt-modules > .nav-item.show > .nav-link {
    background-color: rgba(245, 124, 0, .1);
    color: var(--color-accent);
}

/* Módulo actual (request.session.module) */
.hzt-navbar .hzt-modules > .nav-item > .nav-link.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.hzt-navbar .hzt-modules > .nav-item > .nav-link.active > i {
    color: var(--color-accent-lighter);
}

/* El desplegable que contiene el módulo actual queda marcado también. :has()
   no está en navegadores antiguos; sin él solo se pierde el resaltado. */
.hzt-navbar .hzt-modules > .nav-item.dropdown:has(.dropdown-item.active) > .nav-link {
    color: var(--color-accent);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.hzt-navbar .hzt-modules .dropdown-menu {
    border-radius: var(--radius-md);
    padding: .35rem;
}

.hzt-navbar .hzt-modules .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .7rem;
    border-radius: var(--radius-sm);
}

.hzt-navbar .hzt-modules .dropdown-item > i {
    width: 1.1rem;
    text-align: center;
    color: var(--color-accent);
}

.hzt-navbar .hzt-modules .dropdown-item.active,
.hzt-navbar .hzt-modules .dropdown-item:active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.hzt-navbar .hzt-modules .dropdown-item.active > i {
    color: var(--color-accent-lighter);
}

.hzt-navbar .navbar-toggler {
    padding: .3rem .55rem;
    border-color: var(--panel-border);
}

.hzt-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(245, 124, 0, .2);
}

/* ---- Menú colapsado ---- */
@media (max-width: 991.98px) {
    .hzt-navbar .navbar-collapse {
        max-height: calc(100vh - 4.5rem);
        overflow-y: auto;
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--panel-border);
    }

    /* Bootstrap deja los submenús en flujo dentro del collapse: se sangran
       para que se lea la jerarquía tipo/módulo */
    .hzt-navbar .hzt-modules .dropdown-menu {
        margin-left: 1.1rem;
        border-left: 2px solid var(--panel-border) !important;
        border-radius: 0;
        box-shadow: none !important;
    }
}

/* Entre sm y lg sobra ancho para la marca; por debajo manda el bloque xs */
@media (min-width: 576px) and (max-width: 991.98px) {
    .hzt-navbar .hzt-brand {
        max-width: 55vw;
    }
}

[data-bs-theme="dark"] .hzt-navbar .hzt-brand .brand-text {
    color: var(--panel-text-strong);
}

[data-bs-theme="dark"] .hzt-navbar .hzt-modules > .nav-item > .nav-link.active,
[data-bs-theme="dark"] .hzt-navbar .hzt-modules .dropdown-item.active {
    background-color: var(--color-primary-light);
}

/* ---- Panel de módulos del dashboard horizontal ---- */
.hzt-tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    /* el borde inferior de .nav-tabs se corta al scrollear; se recrea aquí */
    border-bottom: 1px solid var(--panel-border);
}

.hzt-tabs-scroll .nav-tabs {
    border-bottom: 0;
}