html {
    position: relative;
    min-height: 100%;
    font-size: 0.9em;
}

body {
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    font-size: 0.8em;
    padding-top: 1em;
}
.page-header {
    padding-bottom: 9px;
    margin:40px 0 20px;
    border-bottom: 1px solid #eee;
}

td > span {
    display: block;
    font-size: 0.8em;
}

.select2-container { width: 100% !important; }
.select2 { background-color: #fff; }
.select2-selection__rendered { margin-left: 0.45em; color: #495057; }

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dropdown-menu li {
    position: relative;
}
.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}

/* Chrome rdte: navbar y footer. Antes vivían en un <style> inline del layout;
   se movieron acá para no duplicarlos entre LibreDTE.php y LibreDTEv2.php.
   Los colores salen de tokens.css — sin hex literales. */
.navbar.bg-light {
    background: #fff !important;
    border-bottom: 1px solid var(--rd-border);
    box-shadow: 0 1px 2px hsl(215 25% 10% / .03);
}
.navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.navbar .navbar-brand .rd-nav-mark {
    width: 31px;
    height: 27px;
    flex: none;
}
.navbar .navbar-brand .rd-nav-word {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--rd-logo-ink);
    margin-left: -3px;
}
.navbar .nav-link {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--rd-orange-ink);
}
footer.footer a {
    color: var(--rd-orange-ink);
}

/* ── Barra de módulos y mega-menú (layout LibreDTEv2) ───────────────────── */

/* Estado activo: subrayado + peso, NO solo color. Un usuario con daltonismo
   tiene que poder ver en qué módulo está. */
.rd-nav-module.active {
    color: var(--rd-orange-ink);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--rd-orange);
}

/* Acción primaria cuando no hay empresa seleccionada. */
.rd-nav-cta {
    color: var(--rd-orange-ink) !important;
    font-weight: 700;
}

.rd-mega-title {
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rd-muted-ink);
    padding: .25rem .75rem .4rem;
    margin: 0;
}

.rd-nav-module + .dropdown-menu .dropdown-item.active,
.rd-nav-module + .dropdown-menu .dropdown-item:active {
    background: hsl(var(--rd-primary-h) var(--rd-primary-s) var(--rd-primary-l) / .12);
    color: var(--rd-orange-ink);
    font-weight: 600;
}

/* Sobre lg: panel ancho anclado al contenedor.
   El position:static del <li> es lo que permite que el panel mida el ancho del
   contenedor y no el del botón. DEBE quedar dentro de este media query: fuera de
   él rompe el acordeón móvil. */
@media (min-width: 992px) {
    .navbar .rd-mega-parent {
        position: static;
    }

    .rd-mega {
        width: 100%;
        left: 0;
        right: 0;
        padding: 1rem .5rem;
        border: 1px solid var(--rd-border);
        border-radius: var(--rd-radius);
        box-shadow: var(--rd-shadow-md);
    }

    /* El panel sangra de borde a borde, pero su contenido se alinea con el
       .container del navbar: si no, las columnas arrancan pegadas al borde de
       la ventana mientras el logo y los módulos están sangrados, y se nota.
       Los anchos replican los de .container de Bootstrap 5 por breakpoint. */
    .rd-mega-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        max-width: 960px;
        margin-inline: auto;
    }

    .rd-mega-col {
        flex: 1 1 0;
        min-width: 12rem;
    }

    .rd-mega-col + .rd-mega-col {
        border-left: 1px solid var(--rd-border);
        padding-left: 1rem;
    }
}

@media (min-width: 1200px) {
    .rd-mega-row { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .rd-mega-row { max-width: 1320px; }
}

/* Bajo lg: acordeón. Las columnas se apilan a ancho completo y el panel deja de
   flotar; los encabezados de grupo pasan a ser la estructura de una lista que si
   no sería 21 líneas planas. */
@media (max-width: 991.98px) {
    .rd-mega {
        border: 0;
        box-shadow: none;
        padding-left: .5rem;
    }

    .rd-mega-row {
        display: block;
    }

    .rd-mega-col {
        width: 100%;
    }

    .rd-mega-col + .rd-mega-col {
        margin-top: .5rem;
        border-top: 1px solid var(--rd-border);
        padding-top: .5rem;
    }
}

.__loading-dialog .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.__loading-dialog .modal-content .__loading-icon,
.__loading-dialog .modal-content #__loading-message {
    color: #fff;
    font-size: 1.1rem;
}