/* ══════════════════════════════════════════════════════════════
   brand.css — Colores 4 Seasons (Brandbook 2025)
   Azul Profundo #1F2856 · Verde Aqua #16B7A4 · Blanco Neutro #F2F2F2
   Se carga DESPUÉS de layout.css, config.css y reportes.css
   Regla del brandbook: blanco predominante, azul para títulos y
   bloques, verde solo para resaltar (botones, íconos, foco).
══════════════════════════════════════════════════════════════ */
:root {
    --brand-azul: #1F2856;
    --brand-verde: #16B7A4;
    --brand-blanco: #F2F2F2;
    --db-bg1: #F2F2F2;
    --db-orange: #16B7A4;
}

/* ── Fondos y títulos ───────────────────────────────────── */
.cfg-page,
.db-launcher {
    background: var(--brand-blanco);
}

.cfg-title,
.cfg-stat-num,
.cfg-item-name,
.va-title,
.db-ic-name,
.db-sub-titulo {
    color: var(--brand-azul);
}

/* ── Enlaces y navegación ───────────────────────────────── */
.cfg-sub a:hover {
    color: var(--brand-azul);
}

.cfg-back-btn:hover {
    border-color: var(--brand-verde);
    color: var(--brand-azul);
}

.cfg-bc-active {
    color: var(--brand-azul);
}

.db-sub-back:hover {
    border-color: var(--brand-verde);
    color: var(--brand-azul);
}

/* ── Foco de inputs ─────────────────────────────────────── */
.cfg-search-wrap input:focus,
.cfg-field input:focus,
.cfg-field select:focus,
.db-search-wrap input:focus,
.va-input-wrap input:focus,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-verde);
    box-shadow: 0 0 0 3px rgba(22,183,164,.18);
}

.va-input-wrap:focus-within .va-input-ico {
    color: var(--brand-verde);
}

/* ── Toggle ─────────────────────────────────────────────── */
.tog input:checked + .tog-track {
    background: var(--brand-verde);
}

/* ── Botones primarios (verde con texto azul) ───────────── */
.cfg-btn-primary,
.va-submit-btn {
    background: var(--brand-verde);
    color: var(--brand-azul) !important;
}

    .cfg-btn-primary:hover,
    .va-submit-btn:hover:not(:disabled) {
        background: var(--brand-verde);
        filter: brightness(.92);
        box-shadow: 0 4px 12px rgba(22,183,164,.30);
    }

/* ── Badges, avatares, uploads ──────────────────────────── */
.cfg-badge-orange {
    background: rgba(22,183,164,.12);
    color: var(--brand-azul);
    border: 1px solid rgba(22,183,164,.35);
}

.cfg-item-avatar,
.va-icon-wrap {
    background: rgba(22,183,164,.12);
    color: var(--brand-azul);
    border: 1px solid rgba(22,183,164,.30);
}

.cfg-upload-zone:hover {
    border-color: var(--brand-verde);
}

    .cfg-upload-zone:hover .cfg-upload-icon {
        color: var(--brand-verde);
    }

/* ── Select2 ────────────────────────────────────────────── */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(22,183,164,.12);
    color: var(--brand-azul);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(22,183,164,.20);
    color: var(--brand-azul);
}

/* ── Reportes ───────────────────────────────────────────── */
.rpt-modal-header-dark {
    background: var(--brand-azul);
}

.vendedor-bar,
.rpt-bk-bar {
    background: var(--brand-verde);
}

.top-n-btn.active {
    background: var(--brand-azul);
    border-color: var(--brand-azul);
    color: #fff;
}

.top-n-btn:hover:not(.active) {
    background: rgba(22,183,164,.12);
    border-color: var(--brand-verde);
    color: var(--brand-azul);
}

.rpt-ptab.active,
.rpt-ctab.active {
    color: var(--brand-azul);
    box-shadow: inset 0 -2px 0 var(--brand-verde), 0 1px 4px rgba(0,0,0,.10);
}

.rpt-spinner {
    border-color: rgba(22,183,164,.20);
    border-top-color: var(--brand-verde);
}

.rpt-tabla th:hover {
    color: var(--brand-azul);
}

/* Íconos de los KPIs: todos en la misma paleta */
.rpt-kpi-ico {
    background: rgba(22,183,164,.12) !important;
    color: var(--brand-azul) !important;
}

/* ── Barra superior y launcher ──────────────────────────── */
.db-topbar {
    background: var(--brand-verde);
}

.db-tb-logo {
    background: var(--brand-azul);
}

.db-tb-name span {
    color: var(--brand-azul);
}

.db-tb-avatar {
    background: var(--brand-azul);
}

.db-tb-role,
.db-tb-date,
.db-tb-empresa {
    color: var(--brand-azul);
}

.db-ic:hover {
    border-color: var(--db-ic-accent, rgba(22,183,164,.55));
}

.db-ic-bubble {
    background: var(--db-ic-bg, rgba(22,183,164,.12));
}

.db-sub-ic:hover {
    border-color: var(--db-ic-accent, rgba(22,183,164,.55));
}

.db-ic[data-contenedor="true"] .db-ic-bubble::before {
    background: var(--db-ic-accent, var(--brand-verde));
}


/* ── Login ─────────────────────────────────────────────── */
.lgn-page {
    background: var(--brand-blanco);
}

    .lgn-page::before {
        background: radial-gradient(circle, rgba(22,183,164,.14) 0%, transparent 70%);
    }

    .lgn-page::after {
        background: radial-gradient(circle, rgba(31,40,86,.08) 0%, transparent 70%);
    }

.lgn-stripe {
    background: linear-gradient(90deg, var(--brand-azul), var(--brand-verde));
}

.lgn-logo {
    background: var(--brand-azul);
    box-shadow: 0 4px 14px rgba(31,40,86,.25);
}

.lgn-brand,
.lgn-welcome {
    color: var(--brand-azul);
}

    .lgn-brand span {
        color: var(--brand-verde);
    }

/* Foco de inputs */
.lgn-input:focus {
    border-color: var(--brand-verde);
    box-shadow: 0 0 0 3px rgba(22,183,164,.18);
}

.lgn-input-wrap:focus-within .lgn-input-ico {
    color: var(--brand-verde);
}

/* Recuérdame */
.lgn-remember input:checked + .lgn-remember-box {
    background: var(--brand-verde);
    border-color: var(--brand-verde);
}

.lgn-remember-check {
    color: var(--brand-azul);
}

/* Botón principal: verde con texto azul */
.lgn-submit {
    background: var(--brand-verde);
    color: var(--brand-azul);
}

    .lgn-submit:hover:not(:disabled) {
        background: var(--brand-verde);
        filter: brightness(.92);
        box-shadow: 0 6px 20px rgba(22,183,164,.32);
    }

.lgn-spinner {
    border-color: rgba(31,40,86,.25);
    border-top-color: var(--brand-azul);
}

/* Selección de empresa (paso 2) */
.lgn-empresa-card:hover {
    border-color: rgba(22,183,164,.55);
    box-shadow: 0 4px 14px rgba(22,183,164,.15);
}

.lgn-empresa-card:has(input:checked) {
    border-color: var(--brand-verde);
    box-shadow: 0 0 0 3px rgba(22,183,164,.18), 0 4px 14px rgba(22,183,164,.12);
}

.lgn-empresa-name {
    color: var(--brand-azul);
}

.lgn-empresa-check {
    background: var(--brand-verde);
    color: var(--brand-azul);
    box-shadow: 0 2px 6px rgba(22,183,164,.30);
}