:root {
    --acm-navy: #27364B;
    --acm-navy-secondary: #1B406C;
    --acm-navy-dark: #182A47;
    --acm-navy-darker: #0F192A;
    --acm-cyan: #009DC5;
    --acm-teal: #00818C;
    --acm-cyan-light: #4DBFDA;
    --acm-cyan-lighter: #85C7D3;
    --acm-cyan-pale: #BDE2EA;
    --acm-blue-bright: #3B9AD6;
    --acm-teal-dark: #2D6061;
    --acm-teal-secondary: #46B8A8;
    --acm-yellow: #EAD419;
    --acm-black: #1D1D1B;
    --acm-white: #FFFFFF;
    --acm-danger: #A93226;
    --acm-gray-header: #A8A8AA;

    --acm-font-marca: 'Patua One', Georgia, serif;
    --acm-font-texto: Bahnschrift, 'Calisto MT', Arial, sans-serif;

    --surface-body: #f4f6f8;
    --surface-navbar: var(--acm-gray-header);
    --surface-navbar-text: var(--acm-navy);
}

[data-bs-theme="dark"] {
    --surface-body: #0e1520;
    --surface-navbar: #16202f;
    --surface-navbar-text: #e7edf3;
}

body {
    background-color: var(--surface-body);
    font-family: var(--acm-font-texto);
    /* El fondo de página (bg4/bg5) es siempre oscuro, con o sin modo oscuro activo,
       así que el texto "suelto" fuera de tarjetas se mantiene claro en todo momento. */
    color: #dbe3ea;
}

h1, h2, h3, .navbar-brand, .display-6 {
    font-family: var(--acm-font-marca);
    color: #eef3f7;
}

/* Dentro de una tarjeta o superficie blanca, los títulos vuelven a los colores
   de marca (oscuros en claro, cian en oscuro), porque ahí sí hay contraste garantizado.
   :where() mantiene esto en especificidad cero para que clases semánticas de Bootstrap
   como .text-danger/.text-success sigan ganando siempre. */
:where(.card, .card-body, .bg-white, .accordion-body) :where(h1, h2, h3) {
    color: var(--acm-navy);
}

:where([data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card-body, [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .accordion-body) :where(h1, h2, h3) {
    color: var(--acm-cyan-light);
}

/* Mismo problema para texto normal (no encabezados): body.page-app/page-home fuerzan
   texto claro pensado para el fondo oscuro con textura, así que cualquier párrafo
   suelto dentro de una tarjeta clara necesita su propio color oscuro por defecto. */
:where(.card-body, .accordion-body) {
    color: var(--acm-navy-darker);
}

[data-bs-theme="dark"] :where(.card-body, .accordion-body) {
    color: #e7edf3;
}

a {
    color: var(--acm-cyan);
}

a:hover {
    color: var(--acm-teal);
}

.navbar {
    background-color: var(--surface-navbar) !important;
}

.navbar .container-fluid {
    position: relative;
}

.navbar-brand {
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

.navbar-logo {
    height: 52px;
    width: auto;
}

[data-bs-theme="dark"] .navbar-logo {
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 0.5rem;
    padding: 0.25rem 0.4rem;
}

@media (max-width: 991.98px) {
    .navbar-logo {
        height: 40px;
    }
}

.navbar-light .navbar-nav .nav-link {
    color: var(--surface-navbar-text);
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--acm-cyan);
    border-bottom-color: var(--acm-cyan);
}

.navbar-light .navbar-text {
    color: var(--surface-navbar-text);
}

.nav-link-icon {
    margin-right: 0.5rem;
    font-size: 0.95em;
    opacity: 0.8;
}

.navbar-account {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.navbar-account-name {
    display: flex;
    align-items: center;
    color: var(--surface-navbar-text);
    font-size: 0.92rem;
    font-weight: 600;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.theme-toggle-label {
    display: none;
}

/* .bg-light es una utilidad de Bootstrap que no responde a data-bs-theme (se queda
   blanca siempre) — se usa en campos de solo lectura/autocompletados y badges, así
   que en modo oscuro la reemplazamos por una superficie oscura coherente. */
[data-bs-theme="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #e7edf3;
}

[data-bs-theme="dark"] .bg-light.text-muted,
[data-bs-theme="dark"] .badge.bg-light {
    color: rgba(231, 237, 243, 0.75) !important;
}

/* Las tablas usan .bg-white para verse como una tarjeta clara sobre el fondo con
   textura (bg4/bg5); en modo oscuro necesitan su propia superficie oscura en vez
   de quedar blancas fijas (esto también evita huecos blancos en filas con celdas
   vacías, ya que el color de la tabla se ve a través de ellas). */
[data-bs-theme="dark"] table.bg-white {
    background-color: #1a2432 !important;
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.5);
    color: var(--surface-navbar-text);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.theme-toggle-btn:hover {
    background: var(--acm-white);
    border-color: var(--acm-cyan);
    color: var(--acm-cyan);
    transform: rotate(-12deg);
}

[data-bs-theme="dark"] .theme-toggle-btn {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

/* Centra el menú principal en la barra completa, sin depender del ancho
   del logo ni del bloque de usuario/logout a la derecha. */
@media (min-width: 992px) {
    .navbar-nav.me-auto {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
    }

    .navbar-account {
        margin-left: 0.75rem;
    }
}

/* Menú colapsado en mobile: cada elemento (enlaces, tema, cuenta, cerrar sesión)
   como una fila completa con separador, en vez del amontonamiento por defecto. */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-bottom: 0.5rem;
    }

    .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    [data-bs-theme="dark"] .navbar-nav .nav-link {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .navbar-account {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px solid rgba(0, 0, 0, 0.15);
    }

    [data-bs-theme="dark"] .navbar-account {
        border-top-color: rgba(255, 255, 255, 0.15);
    }

    .navbar-account .nav-link,
    .navbar-account-name {
        padding: 0.7rem 0.25rem;
        margin-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    [data-bs-theme="dark"] .navbar-account .nav-link,
    [data-bs-theme="dark"] .navbar-account-name {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .theme-toggle-btn {
        width: 100%;
        height: auto;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: transparent;
        justify-content: flex-start;
        padding: 0.7rem 0.25rem;
    }

    [data-bs-theme="dark"] .theme-toggle-btn {
        border-bottom-color: rgba(255, 255, 255, 0.1);
        background: transparent;
    }

    .theme-toggle-btn:hover {
        transform: none;
        background: rgba(0, 0, 0, 0.05);
    }

    [data-bs-theme="dark"] .theme-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .theme-toggle-btn i {
        margin-right: 0.6rem;
        font-size: 1rem;
    }

    .theme-toggle-label {
        display: inline;
        font-size: 0.95rem;
    }
}

.btn-primary {
    background-color: var(--acm-cyan);
    border-color: var(--acm-cyan);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--acm-teal);
    border-color: var(--acm-teal);
}

.btn-outline-primary {
    color: var(--acm-cyan);
    border-color: var(--acm-cyan);
}

.btn-outline-primary:hover {
    background-color: var(--acm-cyan);
    border-color: var(--acm-cyan);
}

.btn-success {
    background-color: var(--acm-teal-secondary);
    border-color: var(--acm-teal-secondary);
}

.btn-success:hover {
    background-color: var(--acm-teal);
    border-color: var(--acm-teal);
}

.btn-outline-danger {
    color: var(--acm-danger);
    border-color: var(--acm-danger);
}

.btn-outline-danger:hover {
    background-color: var(--acm-danger);
    border-color: var(--acm-danger);
}

.card, .accordion-item {
    border-color: var(--acm-cyan-pale);
}

.accordion-button:not(.collapsed) {
    background-color: var(--acm-cyan-pale);
    color: var(--acm-navy);
}

.tabla-certificados td, .tabla-certificados th {
    vertical-align: middle;
}

.tabla-certificados thead {
    background-color: var(--acm-navy);
    color: var(--acm-white);
}

/* Estados del certificado (ver ETIQUETAS_ESTADO en mail_service.py) */
.badge-estado {
    font-family: var(--acm-font-texto);
    font-weight: 600;
    padding: 0.4em 0.75em;
}

.badge-creado {
    background-color: var(--acm-cyan-pale);
    color: var(--acm-navy);
}

.badge-en_revision {
    background-color: var(--acm-yellow);
    color: var(--acm-navy-darker);
}

.badge-listo {
    background-color: var(--acm-teal-secondary);
    color: var(--acm-white);
}

.badge-bloqueado,
.badge-rechazado {
    background-color: var(--acm-danger);
    color: var(--acm-white);
}

.badge-pendiente_aprobacion {
    background-color: var(--acm-yellow);
    color: var(--acm-navy-darker);
}

.badge-activo {
    background-color: var(--acm-teal-secondary);
    color: var(--acm-white);
}

.badge-desactivado {
    background-color: var(--acm-navy-secondary);
    color: var(--acm-white);
}

.borde-estado-creado { border-top: 4px solid var(--acm-cyan-lighter); }
.borde-estado-en_revision { border-top: 4px solid var(--acm-yellow); }
.borde-estado-listo { border-top: 4px solid var(--acm-teal-secondary); }
.borde-estado-bloqueado { border-top: 4px solid var(--acm-danger); }

.linea-tiempo {
    list-style: none;
    padding-left: 0;
}

.linea-tiempo li {
    position: relative;
    padding: 0 0 1.25rem 1.75rem;
    border-left: 2px solid var(--acm-cyan-pale);
}

.linea-tiempo li:last-child {
    border-left-color: transparent;
}

.linea-tiempo li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--acm-cyan);
    border: 2px solid var(--acm-white);
}

/* ============================
   Fondos de página
   ============================ */

body.page-app {
    background-image: linear-gradient(180deg, rgba(14, 21, 32, 0.05), rgba(14, 21, 32, 0.05)), url('../img/bg4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

[data-bs-theme="dark"] body.page-app {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55)), url('../img/bg4.jpg');
}

/* El hero de inicio lleva su propio fondo (ver .home-hero); el body solo necesita
   un color sólido de respaldo para que no haya destellos blancos en los bordes. */
body.page-home {
    background-color: #0f1928;
}

body.page-home main.container {
    /* !important porque la utilidad .my-4 de Bootstrap ya trae !important en el
       margen — si no, ese margen sobrante empuja el alto total más allá de 100vh
       y aparece una barra de scroll vertical vacía. */
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.home-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgba(10, 17, 28, 0.55), rgba(10, 17, 28, 0.8)), url('../img/bg5.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 40rem;
}

.home-hero-logo-badge {
    margin: 0 auto 1.75rem;
    align-self: center;
}

.home-hero-eyebrow {
    color: var(--acm-cyan-light);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.home-hero-title {
    color: var(--acm-white);
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.home-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    max-width: 34rem;
    margin: 0 auto 2.25rem;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.home-hero-actions .btn-login {
    padding: 0.75rem 1.75rem;
    width: auto;
}

.home-hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    color: var(--acm-white);
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.home-hero-btn-ghost:hover {
    color: var(--acm-white);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--acm-white);
}

@media (max-width: 575.98px) {
    .home-hero {
        padding: 2.5rem 1.25rem;
    }

    .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
}

/* Inicio: sin barra de navegación — solo el botón de tema, flotando sobre la foto. */
body.page-home .navbar {
    background: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 1rem 1.25rem;
}

body.page-home .navbar .container-fluid {
    justify-content: flex-end;
    padding: 0;
}

body.page-home .navbar-brand,
body.page-home .navbar-toggler,
body.page-home .navbar-nav.me-auto,
body.page-home .navbar-account-name,
body.page-home .navbar-account .nav-link {
    display: none !important;
}

body.page-home .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 0;
}

body.page-home .navbar-account {
    margin: 0 !important;
}

/* Se repiten ancho/alto/radio/padding aquí (con más especificidad que la regla
   general para mobile) para que el botón se quede como círculo flotante en el
   inicio sin importar el tamaño de pantalla. */
body.page-home .theme-toggle-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: rgba(15, 25, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--acm-white);
}

body.page-home .theme-toggle-btn:hover {
    background: rgba(15, 25, 42, 0.6);
    border-color: var(--acm-white);
    color: var(--acm-white);
    transform: rotate(-12deg);
}

body.page-home .theme-toggle-label {
    display: none !important;
}

body.page-login {
    background-image: linear-gradient(180deg, rgba(9, 15, 26, 0.82), rgba(9, 15, 26, 0.62)), url('../img/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ============================
   Login
   ============================ */

.login-shell {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-glass-card {
    width: 100%;
    max-width: 26rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 1.5rem;
    padding: 2.75rem 2.25rem;
    box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.5);
    color: var(--acm-white);
}

.login-glass-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.login-brand-logo-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--acm-white);
    border-radius: 0.9rem;
    padding: 0.6rem 0.9rem;
    box-shadow: 0 0.5rem 1.25rem -0.4rem rgba(15, 25, 42, 0.45);
}

.login-brand-logo {
    height: 34px;
    width: auto;
    display: block;
}

.login-glass-card h1 {
    color: var(--acm-white);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.35rem;
}

.login-form-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 2rem;
}

.login-field {
    margin-bottom: 1.15rem;
}

.login-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.4rem;
    display: inline-block;
}

.login-input-wrap {
    position: relative;
}

.login-field-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    pointer-events: none;
}

.login-field .form-control {
    padding: 0.65rem 0.9rem 0.65rem 2.6rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--acm-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.login-field .form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.login-field .form-control:focus {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: var(--acm-cyan-light);
    box-shadow: 0 0 0 0.2rem rgba(77, 191, 218, 0.25);
    color: var(--acm-white);
}

.login-field--password .form-control {
    padding-right: 2.75rem;
}

.login-field--password .form-control.is-invalid {
    background-image: none;
}

.login-toggle-password {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.25rem 0.4rem;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s ease;
}

.login-toggle-password:hover {
    color: var(--acm-cyan-light);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -0.25rem 0 1.5rem;
    font-size: 0.85rem;
}

.login-options .form-check-input {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

.login-options .form-check-input:checked {
    background-color: var(--acm-cyan);
    border-color: var(--acm-cyan);
}

.login-options .form-check-label {
    color: rgba(255, 255, 255, 0.85);
}

.btn-login {
    background-color: var(--acm-cyan);
    border-color: var(--acm-cyan);
    border-radius: 0.75rem;
    padding: 0.7rem 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-login:hover:not(:disabled),
.btn-login:focus:not(:disabled) {
    background-color: var(--acm-teal);
    border-color: var(--acm-teal);
    transform: translateY(-1px);
    box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(0, 129, 140, 0.55);
}

.btn-login:disabled {
    opacity: 0.85;
}

.login-footer-link {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
}

.login-footer-link a {
    color: var(--acm-cyan-light);
    font-weight: 600;
}

.login-footer-link a:hover {
    color: var(--acm-white);
}

@media (max-width: 420px) {
    .login-glass-card {
        padding: 2.25rem 1.5rem;
    }
}

.login-glass-card--wide {
    max-width: 30rem;
}

.login-field .form-text {
    color: rgba(255, 255, 255, 0.65);
}

.login-field .form-control:read-only {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
}

.login-field .form-control:disabled {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

.login-alert {
    background-color: rgba(169, 50, 38, 0.25);
    border: 1px solid rgba(169, 50, 38, 0.5);
    color: #ffd9d3;
}

/* Selector con búsqueda (static/js/select-buscable.js) */
.buscable {
    position: relative;
}

.buscable-lista {
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 16rem;
    margin-top: 2px;
    overflow-y: auto;
}

.buscable-lista .dropdown-item {
    white-space: normal;
}

.buscable-lista .dropdown-item.active,
.buscable-lista .dropdown-item:hover {
    background-color: var(--acm-cyan);
    color: var(--acm-white);
}

.buscable-lista .buscable-vacio {
    padding: 0.5rem 1rem;
    color: var(--bs-secondary-color);
}