/**
 * Estilos globales del sistema (Documento 03, §4.3).
 * Lo específico de un módulo va en css/<modulo>.css, no aquí.
 *
 * Identidad "Classic black & gold" (2026-07-19): negro profundo +
 * dorado del logo de Eventos Classic. Sin librerías ni fuentes
 * externas: Bootstrap 5 local + tipografía del sistema.
 */

:root {
    --classic-negro: #131316;
    --classic-negro-suave: #1c1c21;
    --classic-dorado: #e3a82b;
    --classic-dorado-oscuro: #8a6613;
    --app-fondo: #f6f5f2;
    --app-borde: #e8e6e1;
    --app-sombra: 0 1px 3px rgba(19, 19, 22, .07), 0 8px 24px -12px rgba(19, 19, 22, .12);
    --app-menu-ancho: 250px;
    --app-navbar-alto: 56px;
}

body {
    padding-top: var(--app-navbar-alto);
    background-color: var(--app-fondo);
    color: #26262b;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--classic-negro);
}

a {
    color: var(--classic-dorado-oscuro);
}

a:hover {
    color: #6d4f0d;
}

/* ---- Barra superior ---- */

.app-navbar {
    background-color: var(--classic-negro);
    min-height: var(--app-navbar-alto);
    border-bottom: 2px solid var(--classic-dorado);
}

.app-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.app-navbar .navbar-brand img {
    height: 26px;
    width: auto;
}

.app-navbar .navbar-brand .marca-acento {
    color: var(--classic-dorado);
    font-weight: 500;
    font-size: .9rem;
}

.app-navbar .btn-dark {
    background-color: var(--classic-negro-suave);
    border: 1px solid #2c2c33;
}

/* ---- Menú lateral (oscuro, look panel premium) ---- */

.app-menu {
    width: var(--app-menu-ancho);
    /* !important: en escritorio Bootstrap vuelve transparente el fondo
       de los offcanvas responsivos (offcanvas-lg) con !important, y los
       textos claros del menú quedarían sobre fondo blanco. */
    background-color: var(--classic-negro-suave) !important;
    border-right: 0;
}

.app-menu .offcanvas-header {
    color: #fff;
}

.app-menu .btn-close {
    filter: invert(1);
}

@media (min-width: 992px) {
    .app-menu {
        position: fixed;
        top: var(--app-navbar-alto);
        bottom: 0;
        left: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #3a3a42 transparent;
    }
}

.app-menu .nav-link {
    color: #b6b8c0;
    border-radius: .5rem;
    padding: .5rem .75rem;
    border-left: 3px solid transparent;
    transition: color .15s ease, background-color .15s ease;
}

.app-menu .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
}

.app-menu .nav-link.active {
    color: #fff;
    background-color: rgba(227, 168, 43, .12);
    border-left-color: var(--classic-dorado);
    border-radius: 0 .5rem .5rem 0;
}

.app-menu .nav-link.active .bi {
    color: var(--classic-dorado);
}

.app-menu .menu-seccion {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8b8c96;
    padding: 1.1rem .75rem .3rem;
}

/* ---- Zona de contenido ---- */

.app-contenido {
    padding: 1.5rem;
}

@media (min-width: 992px) {
    .app-contenido {
        margin-left: var(--app-menu-ancho);
        padding: 2rem 2.25rem;
    }
}

.breadcrumb {
    font-size: .85rem;
}

/* ---- Tarjetas ---- */

.card {
    border: 1px solid var(--app-borde);
    border-radius: .75rem;
}

.card.shadow-sm {
    border: 0;
    box-shadow: var(--app-sombra) !important;
}

.card-header {
    border-bottom-color: var(--app-borde);
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.card > .card-header:first-child {
    border-radius: .75rem .75rem 0 0;
}

/* ---- Tablas ---- */

.table thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6c6d75;
}

.table-light,
.table thead.table-light th {
    --bs-table-bg: #faf9f6;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #faf5e8;
}

/* ---- Botones y formularios ---- */

.btn {
    border-radius: .5rem;
}

.btn-dark {
    --bs-btn-bg: var(--classic-negro);
    --bs-btn-border-color: var(--classic-negro);
    --bs-btn-hover-bg: #2b2b33;
    --bs-btn-hover-border-color: #2b2b33;
    --bs-btn-active-bg: #2b2b33;
    --bs-btn-active-border-color: #2b2b33;
}

.btn-dark:focus-visible,
.form-control:focus,
.form-select:focus {
    border-color: var(--classic-dorado);
    box-shadow: 0 0 0 .2rem rgba(227, 168, 43, .25);
}

.form-control,
.form-select {
    border-radius: .5rem;
}

/* ---- Tarjetas de indicadores (dashboard) ---- */

.tarjeta-indicador {
    transition: transform .15s ease, box-shadow .15s ease;
}

.tarjeta-indicador:hover {
    transform: translateY(-2px);
}

.tarjeta-indicador .indicador-valor {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--classic-negro);
}

.tarjeta-indicador .bi {
    font-size: 1.15rem;
    color: var(--classic-negro);
    background: var(--classic-dorado);
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    flex-shrink: 0;
}

/* ---- Login (pantalla propia, sin layout) ---- */

.login-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--classic-negro);
    padding: 1.5rem;
}

.login-caja {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .55);
    padding: 2.25rem 2rem;
}

.login-caja .login-logo {
    display: block;
    margin: 0 auto 1.5rem;
    max-width: 230px;
    height: auto;
}

.login-pie {
    color: #8a8b93;
    font-size: .8rem;
    text-align: center;
    margin-top: 1.25rem;
}