/* ==========================================================================
   Frete NTC — identidade visual NTC&Logística (temas claro e escuro)
   Base: escuro = Bootswatch Slate (bootstrap.min.css)
         claro  = Bootstrap 5.3.3 (bootstrap-claro.min.css)
   O tema ativo fica em <html data-tema="claro|escuro">.
   ========================================================================== */

/* ── Marca (fixa nos dois temas) ── */
:root {
    --ntc-navy-950: #081a30;
    --ntc-navy-900: #0b2340;
    --ntc-navy-800: #103252;   /* barra superior do portal NTC */
    --ntc-navy-700: #144b7b;   /* cabeçalho e menu do portal NTC */
    --ntc-azul:     #1e3d7a;   /* azul do logo */
    --ntc-azul-500: #2a64b0;
    --ntc-azul-400: #4c86d1;
    --ntc-ouro:     #d1a54e;   /* "& Logística" do logo */
    --ntc-ouro-600: #b88a32;
    --ntc-laranja:  #ef7d00;   /* destaque "Associe-se" do portal */
    --ntc-raio: 14px;
}

/* ── Tokens do tema escuro (padrão, próximo ao visual anterior) ── */
:root,
:root[data-tema="escuro"] {
    --ntc-topo-bg: linear-gradient(100deg, var(--ntc-navy-950) 0%, var(--ntc-navy-800) 55%, var(--ntc-navy-700) 100%);
    --ntc-topo-ink: #ffffff;
    --ntc-topo-ink2: rgba(255, 255, 255, .72);
    --ntc-menu-bg: #17202c;
    --ntc-menu-ink: #c9d3df;
    --ntc-menu-ink-hover: #ffffff;
    --ntc-menu-borda: rgba(255, 255, 255, .06);
    --ntc-drop-bg: #222a35;
    --ntc-drop-ink: #d9e0e8;
    --ntc-drop-hover: rgba(209, 165, 78, .14);
    --ntc-sombra: 0 10px 30px rgba(0, 0, 0, .35);
    --ntc-primario: #2a64b0;
    --ntc-primario-hover: #3574c6;
    --ntc-superficie: #2e343b;
    --ntc-superficie-2: #353c44;
    --ntc-borda: #444c55;
    --ntc-ink: #e6eaef;
    --ntc-ink2: #aab4c0;
}

/* ── Tokens do tema claro ── */
:root[data-tema="claro"] {
    --ntc-topo-bg: #ffffff;
    --ntc-topo-ink: var(--ntc-navy-800);
    --ntc-topo-ink2: #5b6b7f;
    --ntc-menu-bg: linear-gradient(100deg, var(--ntc-navy-800) 0%, var(--ntc-navy-700) 100%);
    --ntc-menu-ink: rgba(255, 255, 255, .86);
    --ntc-menu-ink-hover: #ffffff;
    --ntc-menu-borda: rgba(255, 255, 255, .10);
    --ntc-drop-bg: #ffffff;
    --ntc-drop-ink: #22324a;
    --ntc-drop-hover: rgba(30, 61, 122, .07);
    --ntc-sombra: 0 10px 30px rgba(16, 50, 82, .12);
    --ntc-primario: var(--ntc-azul);
    --ntc-primario-hover: #16305f;
    --ntc-superficie: #ffffff;
    --ntc-superficie-2: #f6f8fb;
    --ntc-borda: #cfd9e6;
    --ntc-ink: #0f1d33;
    --ntc-ink2: #44546a;
}

/* ==========================================================================
   Base de página
   ========================================================================== */
:root[data-tema="escuro"] body {
    background:
        radial-gradient(1200px 380px at 50% -140px, rgba(20, 75, 123, .35), transparent 70%),
        #272b30;
    background-attachment: fixed;
}
:root[data-tema="claro"] body {
    background:
        radial-gradient(1200px 380px at 50% -160px, rgba(20, 75, 123, .10), transparent 70%),
        #f2f5f9;
    background-attachment: fixed;
}

/* ==========================================================================
   Tema claro — contraste e acabamento
   ========================================================================== */
:root[data-tema="claro"] {
    --bs-body-color: #13213a;            /* texto principal mais escuro */
    --bs-body-color-rgb: 19, 33, 58;
    --bs-emphasis-color: #0a1528;
    --bs-secondary-color: rgba(19, 33, 58, .78);   /* .text-muted e textos auxiliares */
    --bs-tertiary-color: rgba(19, 33, 58, .55);
    --bs-heading-color: #0b2340;         /* títulos no azul-marinho NTC */
    --bs-border-color: #c2cede;          /* contornos de campos, tabelas e divisórias */
    --bs-secondary-bg: #e8edf4;          /* campos somente leitura */
    --bs-tertiary-bg: #f3f6fa;
    --bs-link-color: #1e3d7a;
    --bs-link-color-rgb: 30, 61, 122;
    --bs-link-hover-color: #16305f;
    --bs-link-hover-color-rgb: 22, 48, 95;
}
:root[data-tema="claro"] label,
:root[data-tema="claro"] .form-label { color: #1b2a42; }   /* só a cor: peso maior quebraria rótulos longos */
:root[data-tema="claro"] hr { opacity: .55; border-top-color: #b9c6d8; }

/* Campos: contorno definido, leve profundidade e foco no azul NTC */
:root[data-tema="claro"] .form-control,
:root[data-tema="claro"] .form-select {
    color: #0f1d33;
    border-color: #b6c4d6;
    box-shadow: inset 0 1px 2px rgba(16, 50, 82, .06);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
:root[data-tema="claro"] .form-control:hover:not(:focus):not([readonly]):not(:disabled),
:root[data-tema="claro"] .form-select:hover:not(:focus):not(:disabled) { border-color: #8ea2bd; }
:root[data-tema="claro"] .form-control:focus,
:root[data-tema="claro"] .form-select:focus {
    border-color: var(--ntc-azul-500);
    box-shadow: 0 0 0 .2rem rgba(42, 100, 176, .18), inset 0 1px 2px rgba(16, 50, 82, .06);
}
:root[data-tema="claro"] .form-control::placeholder { color: #8292a8; }
:root[data-tema="claro"] .form-control[readonly],
:root[data-tema="claro"] .form-control:disabled,
:root[data-tema="claro"] .form-select:disabled {
    background-color: #e8edf4;
    color: #33445c;
    border-color: #c9d4e2;
    box-shadow: none;
}
:root[data-tema="claro"] .input-group-text {
    background-color: #e6ecf5;
    color: #1e3d7a;
    border-color: #b6c4d6;
    font-weight: 600;
}
:root[data-tema="claro"] .form-check-input { border-color: #8ea2bd; }
:root[data-tema="claro"] .form-check-input:checked { background-color: var(--ntc-azul); border-color: var(--ntc-azul); }

/* Cards: borda e sombra mais presentes, cabeçalho com acento dourado */
:root[data-tema="claro"] .card {
    border-color: #cfd9e6;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 50, 82, .06), 0 6px 18px rgba(16, 50, 82, .07);
}
:root[data-tema="claro"] .card-header {
    background: linear-gradient(180deg, #f5f8fc, #edf2f8);
    color: var(--ntc-navy-800);
    font-weight: 600;
    border-bottom-color: #d6dfea;
    box-shadow: inset 4px 0 0 var(--ntc-ouro);
}
/* caixas de referência (card-body pequeno, ex.: valores de referência do Coeficiente) */
:root[data-tema="claro"] .card > .card-body.small {
    background: linear-gradient(180deg, #f7f9fd, #eef3fa);
    border-left: 4px solid var(--ntc-azul-500);
    border-radius: 12px;
}
:root[data-tema="claro"] .card-body.small strong { color: var(--ntc-navy-800); }
:root[data-tema="claro"] .border.rounded { border-color: #c9d4e2 !important; }

/* Botão secundário em cinza-azulado (combina com a marca) */
:root[data-tema="claro"] .btn-secondary {
    --bs-btn-bg: #4a5b73; --bs-btn-border-color: #4a5b73;
    --bs-btn-hover-bg: #3b4a5f; --bs-btn-hover-border-color: #3b4a5f;
    --bs-btn-active-bg: #33404f; --bs-btn-active-border-color: #33404f;
    --bs-btn-disabled-bg: #4a5b73; --bs-btn-disabled-border-color: #4a5b73;
}
:root[data-tema="claro"] .btn-outline-secondary {
    --bs-btn-color: #3b4a5f; --bs-btn-border-color: #8ea2bd;
    --bs-btn-hover-bg: #4a5b73; --bs-btn-hover-border-color: #4a5b73; --bs-btn-hover-color: #fff;
}

/* Tabelas: listras e linhas um pouco mais marcadas */
:root[data-tema="claro"] .table { --bs-table-striped-bg: rgba(30, 61, 122, .035); --bs-table-hover-bg: rgba(30, 61, 122, .06); }
:root[data-tema="claro"] .table > :not(caption) > * > * { border-bottom-color: #d6dfea; }
/* Botão primário com o azul NTC (no Slate ele era cinza com gradiente) */
.btn-primary {
    --bs-btn-bg: var(--ntc-primario);
    --bs-btn-border-color: var(--ntc-primario);
    --bs-btn-hover-bg: var(--ntc-primario-hover);
    --bs-btn-hover-border-color: var(--ntc-primario-hover);
    --bs-btn-active-bg: var(--ntc-primario-hover);
    --bs-btn-active-border-color: var(--ntc-primario-hover);
    --bs-btn-disabled-bg: var(--ntc-primario);
    --bs-btn-disabled-border-color: var(--ntc-primario);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    background-image: none;
}
.btn-outline-primary {
    --bs-btn-color: var(--ntc-primario);
    --bs-btn-border-color: var(--ntc-primario);
    --bs-btn-hover-bg: var(--ntc-primario);
    --bs-btn-hover-border-color: var(--ntc-primario);
    --bs-btn-active-bg: var(--ntc-primario);
    --bs-btn-active-border-color: var(--ntc-primario);
}
:root[data-tema="escuro"] .btn-outline-primary { --bs-btn-color: var(--ntc-azul-400); --bs-btn-border-color: var(--ntc-azul-400); }

/* Tema claro: superfícies com profundidade suave */
:root[data-tema="claro"] .card {
    border-color: var(--ntc-borda);
    box-shadow: 0 1px 2px rgba(16, 50, 82, .04), 0 4px 14px rgba(16, 50, 82, .05);
}
:root[data-tema="claro"] .table > thead > tr > th {
    background-color: #eef2f8;
    color: var(--ntc-navy-800);
}
:root[data-tema="claro"] .modal-content { border: 0; box-shadow: var(--ntc-sombra); }

/* Botões "claros" pensados para fundo escuro continuam visíveis no tema claro */
:root[data-tema="claro"] .btn-outline-light:not(.ntc-keep) {
    --bs-btn-color: #475569;
    --bs-btn-border-color: #94a3b8;
    --bs-btn-hover-bg: #475569;
    --bs-btn-hover-border-color: #475569;
    --bs-btn-hover-color: #fff;
}

/* ==========================================================================
   Cabeçalho (2 faixas, inspirado no portal NTC)
   ========================================================================== */
.ntc-header {
    position: relative;
    z-index: 1030;
    text-align: left;   /* não herda text-center de páginas */
    margin-bottom: 1.25rem;
    border-radius: var(--ntc-raio);
    box-shadow: var(--ntc-sombra);
}
.ntc-topo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: var(--ntc-topo-bg);
    color: var(--ntc-topo-ink);
    border-radius: var(--ntc-raio) var(--ntc-raio) 0 0;
    position: relative;
}
/* filete dourado entre as faixas */
.ntc-topo::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--ntc-ouro) 0%, #f0d28f 50%, var(--ntc-ouro) 100%);
}
.ntc-marca {
    display: flex; align-items: center; gap: 14px;
    color: inherit; text-decoration: none; min-width: 0;
}
.ntc-marca:hover { color: inherit; }
.ntc-marca img { height: 42px; width: auto; display: block; }
.ntc-marca-sep { width: 1px; align-self: stretch; margin: 4px 0; background: currentColor; opacity: .2; }
.ntc-marca-txt { line-height: 1.15; min-width: 0; }
.ntc-marca-txt strong { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.ntc-marca-txt small { display: block; font-size: .72rem; color: var(--ntc-topo-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* logos: um por tema */
.ntc-logo-claro { display: none !important; }
:root[data-tema="claro"] .ntc-logo-claro { display: block !important; }
:root[data-tema="claro"] .ntc-logo-escuro { display: none !important; }

.ntc-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ntc-usuario {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 600; white-space: nowrap; color: var(--ntc-topo-ink);
}
.ntc-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ntc-ouro); color: var(--ntc-navy-900);
    font-size: .8rem; font-weight: 800; flex-shrink: 0;
}
.ntc-btn-icone {
    height: 34px; min-width: 34px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 9px; border: 1px solid currentColor;
    background: transparent; color: var(--ntc-topo-ink);
    font-size: .85rem; line-height: 1; text-decoration: none;
    opacity: .9; transition: background .15s, opacity .15s, color .15s;
    cursor: pointer;
}
.ntc-btn-icone:hover { opacity: 1; color: var(--ntc-topo-ink); background: rgba(127, 127, 127, .14); }
:root[data-tema="escuro"] .ntc-btn-icone { border-color: rgba(255, 255, 255, .28); }
:root[data-tema="claro"] .ntc-btn-icone { border-color: #c9d4e3; }
/* alternador: mostra o ícone do tema de destino */
.ntc-tema-btn .fa-sun { display: inline-block; }
.ntc-tema-btn .fa-moon { display: none; }
:root[data-tema="claro"] .ntc-tema-btn .fa-sun { display: none; }
:root[data-tema="claro"] .ntc-tema-btn .fa-moon { display: inline-block; }

.ntc-toggler {
    display: none;
    border: 1px solid currentColor; border-radius: 9px;
    background: transparent; color: var(--ntc-topo-ink);
    width: 38px; height: 34px;
}

/* Faixa do menu */
.ntc-menu {
    background: var(--ntc-menu-bg);
    border-radius: 0 0 var(--ntc-raio) var(--ntc-raio);
    padding: 0 10px;
    --bs-navbar-padding-y: 0;
}
.ntc-menu.navbar { border: 0; text-shadow: none; }   /* neutraliza o Slate */
.ntc-menu .navbar-nav { gap: 2px; flex-wrap: wrap; }
.ntc-menu .nav-link { border: 0 !important; }
.ntc-menu .nav-link {
    position: relative;
    color: var(--ntc-menu-ink) !important;
    font-size: .875rem; font-weight: 600; letter-spacing: .015em;
    padding: 11px 12px !important;
    white-space: nowrap;
    transition: color .15s;
}
.ntc-menu .nav-link::after { border-top-color: currentColor; }
.ntc-menu .nav-link::before {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
    background: var(--ntc-ouro); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.ntc-menu .nav-link:hover,
.ntc-menu .nav-link:focus,
.ntc-menu .nav-link.show,
.ntc-menu .nav-link.active { color: var(--ntc-menu-ink-hover) !important; }
.ntc-menu .nav-link:hover::before,
.ntc-menu .nav-link.show::before,
.ntc-menu .nav-link.active::before { transform: scaleX(1); }

.ntc-menu .dropdown-menu {
    --bs-dropdown-bg: var(--ntc-drop-bg);
    --bs-dropdown-color: var(--ntc-drop-ink);
    --bs-dropdown-link-color: var(--ntc-drop-ink);
    --bs-dropdown-link-hover-color: var(--ntc-drop-ink);
    --bs-dropdown-link-hover-bg: var(--ntc-drop-hover);
    --bs-dropdown-link-active-bg: var(--ntc-azul);
    --bs-dropdown-border-color: var(--ntc-borda);
    --bs-dropdown-divider-bg: var(--ntc-borda);
    border-radius: 12px;
    padding: 6px;
    box-shadow: var(--ntc-sombra);
    margin-top: 2px !important;
}
.ntc-menu .dropdown-item {
    border-radius: 8px;
    font-size: .875rem;
    padding: 7px 12px;
    border-left: 3px solid transparent;
}
.ntc-menu .dropdown-item:hover,
.ntc-menu .dropdown-item:focus { border-left-color: var(--ntc-ouro); }
.ntc-menu .dropdown-item i { width: 18px; color: var(--ntc-ouro); }

@media (max-width: 991.98px) {
    .ntc-toggler { display: inline-flex; align-items: center; justify-content: center; }
    .ntc-marca-txt small, .ntc-marca-sep { display: none; }
    .ntc-usuario .ntc-usuario-nome { display: none; }
    .ntc-menu { padding: 0 6px; }
    .ntc-menu .navbar-collapse { padding: 6px 0 10px; }
    .ntc-menu .nav-link::before { display: none; }
    .ntc-menu .dropdown-menu { box-shadow: none; }
}
@media (max-width: 575.98px) {
    .ntc-topo { padding: 8px 12px; gap: 10px; }
    .ntc-marca img { height: 32px; }
    .ntc-marca-txt { display: none; }
    .ntc-acoes { gap: 6px; }
    .ntc-btn-icone .ntc-rotulo { display: none; }
}

/* ==========================================================================
   Botão flutuante de contato e modal de sugestão
   ========================================================================== */
#btnContatoNtc {
    z-index: 1040 !important;   /* abaixo do fundo das janelas (modais) */
    background: var(--ntc-azul) !important;
    border: 2px solid var(--ntc-ouro) !important;
}
#btnContatoNtc:hover { background: var(--ntc-azul-500) !important; }
.ntc-modal-topo { background: linear-gradient(100deg, var(--ntc-navy-900), var(--ntc-navy-700)); border-bottom: 3px solid var(--ntc-ouro); }
.ntc-contato-col { background: var(--ntc-superficie-2); border-right: 1px solid var(--ntc-borda); }

/* ==========================================================================
   Impressão de qualquer tela: sem cabeçalho, mascote e botões flutuantes
   ========================================================================== */
@media print {
    .ntc-header, .ntc-mascote, #btnContatoNtc { display: none !important; }
    body { background: #fff !important; }
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .ntc-menu .nav-link::before { transition: none; }
}