/* =================================================================================
   VOLARIS NEXUS • Tema de cores
   ---------------------------------------------------------------------------------
   Paleta OFICIAL do Manual de Marca Volaris 2026 (estúdio JujubyArt, pág. 11).
   *** NUNCA amostrar cor do PNG do logo — foi assim que nasceram os valores
       antigos (#1AA6B2 / #0C2C4C), que este arquivo substitui. ***

     Blue 1   #052846      Blue 2   #0F3D5F      Blue 3   #156986   Aqua 1   #2EC4C6
     Orange 1 #F1570B      Orange 2 #FC720C      Orange 3 #FEA808   Yellow 1 #FAC626

   PAPÉIS (os mesmos que a fatura PDF do Nexus já codifica):
     - Blue 3   = primário: apoio legível sobre branco (o aqua puro não tem
                  contraste para texto). Botão, link, item ativo, paginação.
     - Blue 2 / Blue 1 = o fundo da escala (800-900) e o texto de destaque.
     - Aqua 1   = régua/marcador: topo do card, aba ativa, divisor, info.
     - Orange 1 = ação/estado. Fica em utilitário e na barra-assinatura; NÃO vira
                  semântica do Bootstrap, senão rouba o sentido de warning/danger.

   PRINCÍPIO: este arquivo SÓ recolore a MARCA (azuis + semânticas + foco).
   Os neutros (fundo, texto, bordas, superfícies de card/tabela) ficam por conta
   do Inspinia/Bootstrap, que já trocam sozinhos entre claro e escuro
   (data-bs-theme="light" | "dark"). Assim o tema funciona nos dois modos.

   As poucas superfícies tingidas de azul (hover e linha selecionada da grade) têm
   variante de dark mode em [data-bs-theme="dark"].

   Tipografia NÃO entra aqui: a Matrice é de uso exclusivo do logo e o arquivo do
   kit é DEMO, sem licença de embed. O wordmark "VOLARIS" só vem como IMAGEM.

   Ativar (depois do CSS do Inspinia):
     <link href="~/css/volaris-theme.css" rel="stylesheet" asp-append-version="true" />
   ================================================================================= */

:root {
    /* ---------- Marca ---------- */
    --vl-primary: #156986;              /* Blue 3 */
    --vl-primary-rgb: 21, 105, 134;

    --vl-navy: #052846;                 /* Blue 1 — texto de destaque / fim da escala */
    --vl-navy-rgb: 5, 40, 70;

    --vl-aqua: #2EC4C6;                 /* Aqua 1 — régua / marcador */
    --vl-aqua-rgb: 46, 196, 198;

    --vl-cta: #F1570B;                  /* Orange 1 — ação / estado */
    --vl-cta-rgb: 241, 87, 11;

    --vl-amarelo: #FAC626;              /* Yellow 1 — 3º segmento da assinatura */

    /* ---------- Escala do azul primário (800 e 900 são cores da marca) ---------- */
    --vl-primary-50:  #EFF5F6;
    --vl-primary-100: #D5E4E9;
    --vl-primary-200: #ADCAD5;
    --vl-primary-300: #7EACBC;
    --vl-primary-400: #508FA4;
    --vl-primary-500: #156986;          /* Blue 3 */
    --vl-primary-600: #145E7D;
    --vl-primary-700: #125373;
    --vl-primary-800: #0F3D5F;          /* Blue 2 */
    --vl-primary-900: #052846;          /* Blue 1 */

    /* ---------- Cores semânticas ----------
       warning e info saem da marca (Orange 3 e Aqua 1); success e danger são
       harmonizadas — a paleta não tem verde nem vermelho. */
    --vl-success: #1E9E6A;
    --vl-success-rgb: 30, 158, 106;
    --vl-warning: #FEA808;              /* Orange 3 */
    --vl-warning-rgb: 254, 168, 8;
    --vl-danger:  #DC4C4C;
    --vl-danger-rgb: 220, 76, 76;
    --vl-info:    #2EC4C6;              /* Aqua 1 */
    --vl-info-rgb: 46, 196, 198;

    /* ---------- Raios ---------- */
    --vl-radius-sm: .375rem;
    --vl-radius:    .625rem;
    --vl-radius-pill: 50rem;

    --vl-focus-ring: 0 0 0 .2rem rgba(var(--vl-primary-rgb), .30);
    --vl-transition: .2s ease;

    /* ===== Sobrescrita APENAS dos tokens de MARCA do Bootstrap 5 ===== */
    --bs-primary: var(--vl-primary);
    --bs-primary-rgb: var(--vl-primary-rgb);
    --bs-link-color: var(--vl-primary);
    --bs-link-color-rgb: var(--vl-primary-rgb);
    --bs-success: var(--vl-success);
    --bs-success-rgb: var(--vl-success-rgb);
    --bs-warning: var(--vl-warning);
    --bs-warning-rgb: var(--vl-warning-rgb);
    --bs-danger: var(--vl-danger);
    --bs-danger-rgb: var(--vl-danger-rgb);
    --bs-info: var(--vl-info);
    --bs-info-rgb: var(--vl-info-rgb);
}

/* =================================================================================
   1. Base (neutro, agnóstico de modo)
   ================================================================================= */
::selection {
    background: rgba(var(--vl-primary-rgb), .22);
}

* {
    scrollbar-color: rgba(var(--vl-primary-rgb), .45) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--vl-primary-rgb), .35);
    border-radius: var(--vl-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--vl-primary-rgb), .6);
    background-clip: content-box;
}

/* =================================================================================
   2. Botões (cor da marca — vale nos dois modos)
   ================================================================================= */
.btn {
    --bs-btn-border-radius: var(--vl-radius-sm);
    font-weight: 500;
    transition: background-color var(--vl-transition), border-color var(--vl-transition), color var(--vl-transition);
}

.btn:focus-visible {
    box-shadow: var(--vl-focus-ring);
}

/* Primário — flat, cor sólida da marca (sem gradiente/glow) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--vl-primary);
    --bs-btn-border-color: var(--vl-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vl-primary-700);
    --bs-btn-hover-border-color: var(--vl-primary-700);
    --bs-btn-active-bg: var(--vl-primary-900);
    --bs-btn-active-border-color: var(--vl-primary-900);
    --bs-btn-disabled-bg: var(--vl-primary-300);
    --bs-btn-disabled-border-color: var(--vl-primary-300);
    color: #fff;
    background-color: var(--vl-primary);
    border-color: var(--vl-primary);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--vl-primary-700);
    border-color: var(--vl-primary-700);
}

.btn-primary:active,
.btn-primary:first-child:active,
.btn-primary.active,
.btn-primary:focus:active {
    color: #fff;
    background-color: var(--vl-primary-900);
    border-color: var(--vl-primary-900);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff;
    background-color: var(--vl-primary-300);
    border-color: var(--vl-primary-300);
}

/* Outline primário */
.btn-outline-primary {
    --bs-btn-color: var(--vl-primary);
    --bs-btn-border-color: var(--vl-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vl-primary);
    --bs-btn-hover-border-color: var(--vl-primary);
    --bs-btn-active-bg: var(--vl-primary-900);
    border-color: var(--vl-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:first-child:active,
.btn-outline-primary.active {
    color: #fff;
    background-color: var(--vl-primary);
    border-color: var(--vl-primary);
}

/* Variantes semânticas.
   warning (Orange 3) e info (Aqua 1) são claras demais para texto branco —
   levam o navy da marca, que é o par do manual. */
.btn-success { --bs-btn-bg: var(--vl-success); --bs-btn-border-color: var(--vl-success); --bs-btn-hover-bg: #18875A; --bs-btn-hover-border-color: #18875A; }
.btn-warning { --bs-btn-bg: var(--vl-warning); --bs-btn-border-color: var(--vl-warning); --bs-btn-color: var(--vl-navy); --bs-btn-hover-color: var(--vl-navy); --bs-btn-hover-bg: #E89600; --bs-btn-hover-border-color: #E89600; }
.btn-danger  { --bs-btn-bg: var(--vl-danger);  --bs-btn-border-color: var(--vl-danger);  --bs-btn-hover-bg: #C53F3F; --bs-btn-hover-border-color: #C53F3F; }
.btn-info    { --bs-btn-bg: var(--vl-info);    --bs-btn-border-color: var(--vl-info);    --bs-btn-color: var(--vl-navy); --bs-btn-hover-color: var(--vl-navy); --bs-btn-hover-bg: #22ACAE; --bs-btn-hover-border-color: #22ACAE; }

/* .btn-light (ex.: "Fechar" do popup de pesquisa): no hover o Inspinia pinta o
   texto com --ins-primary (verde #1ab394, não migrado p/ a marca). Força na cor
   Volaris. Aqui o prefixo é --ins-, que é o que a regra .btn:hover do template lê. */
.btn-light {
    --ins-btn-hover-color: var(--vl-primary);
}

/* =================================================================================
   3. Cards (só raio — cor/superfície fica com o Inspinia, nos dois modos)
   ================================================================================= */
.card {
    --bs-card-border-radius: var(--vl-radius);
    --bs-card-inner-border-radius: calc(var(--vl-radius) - 1px);
}

/* Régua de topo no aqua — o marcador da marca */
.card-accent {
    border-top: 3px solid var(--vl-aqua);
}

/* Cards bordados (.card-bordered + .border-primary): o Inspinia pinta a borda
   via --ins-primary (verde, não migrado p/ a marca). Força na cor primária Volaris. */
.card.card-bordered.border-primary {
    border-color: var(--vl-primary) !important;
}

/* =================================================================================
   4. Formulários (só foco e checks da marca — texto/borda ficam com o Inspinia)
   ================================================================================= */
.form-control:focus,
.form-select:focus {
    border-color: var(--vl-primary);
    box-shadow: var(--vl-focus-ring);
}

.form-check-input:checked {
    background-color: var(--vl-primary);
    border-color: var(--vl-primary);
}

.form-check-input:focus {
    border-color: var(--vl-primary);
    box-shadow: var(--vl-focus-ring);
}

.form-switch .form-check-input:checked {
    background-color: var(--vl-primary);
}

/* =================================================================================
   5. Tabelas + DataTables
   ---------------------------------------------------------------------------------
   O CABEÇALHO (thead) não é tocado — fica como o Inspinia entrega, nos dois
   modos. Aqui só o corpo da grade: hover, linha selecionada e paginação.
   ================================================================================= */
.table {
    --bs-table-hover-bg: var(--vl-primary-50);
    --bs-table-hover-color: var(--vl-navy);
}

table.dataTable tbody tr.selected > *,
table.dataTable tbody tr.selected {
    background-color: var(--vl-primary-50) !important;
    color: var(--vl-navy) !important;
    box-shadow: none;
}

/* ----- Dark mode: tons escuros da marca ----- */
[data-bs-theme="dark"] .table {
    --bs-table-hover-bg: rgba(var(--vl-primary-rgb), .28);
    --bs-table-hover-color: #fff;
}

[data-bs-theme="dark"] table.dataTable tbody tr.selected > *,
[data-bs-theme="dark"] table.dataTable tbody tr.selected {
    background-color: var(--vl-primary-700) !important;
    color: #fff !important;
}

/* Paginação do DataTables (neutro segue o modo; ativo/hover na marca) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--vl-radius-sm) !important;
    border: 1px solid transparent !important;
    color: inherit !important;
    transition: all var(--vl-transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(var(--vl-primary-rgb), .14) !important;
    border-color: rgba(var(--vl-primary-rgb), .35) !important;
    color: inherit !important;
}

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

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--vl-primary);
    box-shadow: var(--vl-focus-ring);
    outline: none;
}

/* =================================================================================
   6. Navegação (só estado ativo/hover da marca)
   ================================================================================= */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--vl-primary);
    --bs-nav-pills-link-active-color: #fff;
}

.nav-pills .nav-link:hover:not(.active):not(.disabled) {
    background: rgba(var(--vl-primary-rgb), .12);
    color: var(--vl-primary);
}

.nav-pills .nav-link.active {
    background: var(--vl-primary);
}

.nav-tabs .nav-link.active {
    color: var(--vl-primary);
    border-top: 2px solid var(--vl-aqua);
}

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

.breadcrumb-item a {
    color: var(--vl-primary);
}

.page-link {
    color: var(--vl-primary);
}

.page-link:hover {
    background: rgba(var(--vl-primary-rgb), .14);
    color: var(--vl-primary);
}

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

/* =================================================================================
   7. Badges, alerts, list-group, dropdown, progress
   ================================================================================= */
.badge.bg-primary { background: var(--vl-primary) !important; }
.badge.text-bg-primary { background: var(--vl-primary) !important; color: #fff !important; }

/* Aqua e Orange 3 são claros demais para texto branco — levam o navy da marca. */
.badge.bg-info,
.badge.text-bg-info { background: var(--vl-info) !important; color: var(--vl-navy) !important; }
.badge.bg-warning,
.badge.text-bg-warning { background: var(--vl-warning) !important; color: var(--vl-navy) !important; }

.alert-primary { border-left: 4px solid var(--vl-primary); }
.alert-success { border-left: 4px solid var(--vl-success); }
.alert-warning { border-left: 4px solid var(--vl-warning); }
.alert-danger  { border-left: 4px solid var(--vl-danger); }
.alert-info    { border-left: 4px solid var(--vl-info); }

.progress-bar {
    background-color: var(--vl-primary);
}

.list-group-item.active {
    background: var(--vl-primary);
    border-color: var(--vl-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--vl-primary);
    color: #fff;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--vl-primary-rgb), .12);
}

/* =================================================================================
   8. Utilitários da marca
   ================================================================================= */
.text-volaris         { color: var(--vl-primary) !important; }
.text-volaris-navy    { color: var(--vl-navy) !important; }
.text-volaris-aqua    { color: var(--vl-aqua) !important; }
.text-volaris-cta     { color: var(--vl-cta) !important; }

.bg-volaris           { background-color: var(--vl-primary) !important; color: #fff; }
.bg-volaris-navy      { background-color: var(--vl-navy) !important; color: #fff; }
.bg-volaris-aqua      { background-color: var(--vl-aqua) !important; color: var(--vl-navy); }
.bg-volaris-cta       { background-color: var(--vl-cta) !important; color: #fff; }
.bg-volaris-soft      { background-color: rgba(var(--vl-primary-rgb), .12) !important; }
.bg-volaris-aqua-soft { background-color: rgba(var(--vl-aqua-rgb), .14) !important; }

.border-volaris       { border-color: var(--vl-primary) !important; }
.border-volaris-aqua  { border-color: var(--vl-aqua) !important; }

.divider-volaris {
    height: 3px;
    width: 56px;
    border-radius: var(--vl-radius-pill);
    background: var(--vl-aqua);
    border: 0;
    opacity: 1;
}

/* Barra-assinatura tricolor (as asas do logo) — a mesma proporção 46/27/27 da
   fatura e do boleto. Amarra a tela ao documento que o cliente recebe. */
.barra-volaris {
    height: 5px;
    border: 0;
    opacity: 1;
    border-radius: 0;
    background: linear-gradient(to right,
        var(--vl-aqua) 0%, var(--vl-aqua) 46%,
        var(--vl-cta) 46%, var(--vl-cta) 73%,
        var(--vl-amarelo) 73%, var(--vl-amarelo) 100%);
}

/* Realce de foco acessível e consistente */
:focus-visible {
    box-shadow: var(--vl-focus-ring);
    border-radius: var(--vl-radius-sm);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--vl-primary) !important;
}

/* =================================================================================
   9. Sidebar — realce na marca
   ---------------------------------------------------------------------------------
   O template deixa dois pontos no verde --ins-primary/#1ab394 (não migrado p/ a
   marca): o menu em DESTAQUE (special-menu) e o realce/hover do card do usuário.
   Força ambos na cor Volaris, nos dois modos.
   ================================================================================= */

/* Menu em destaque (MENU_DESTAQUE = ESPECIAL): fundo na marca; escurece no hover/foco. */
.side-nav .side-nav-item .side-nav-link.special-menu {
    background-color: var(--vl-primary) !important;
    border-color: var(--vl-primary) !important;
    color: #fff !important;
    transition: background-color var(--vl-transition), border-color var(--vl-transition);
}

.side-nav .side-nav-item .side-nav-link.special-menu:hover,
.side-nav .side-nav-item .side-nav-link.special-menu:focus {
    background-color: var(--vl-primary-900) !important;
    border-color: var(--vl-primary-900) !important;
    color: #fff !important;
}

/* Item de menu (topo e sub): realce da marca preenchendo o botão inteiro no hover/foco.
   O .special-menu é mais específico (+ !important), então mantém o escurecer próprio. */
.side-nav .side-nav-item .side-nav-link:hover,
.side-nav .side-nav-item .side-nav-link:focus {
    background: rgba(var(--vl-primary-rgb), .12);
    color: var(--vl-primary) !important;
}

/* Card do usuário na sidebar (.sidenav-user): hover na marca, não no verde do template */
.sidenav-user a:hover,
.sidenav-user a:hover .sidenav-user-name,
.sidenav-user a:hover span,
.sidenav-user .sidenav-user-name:hover {
    color: var(--vl-primary) !important;
}