@charset "UTF-8";
/* =====================================================================
   CTAG NEXUS — Base: tokens de design, reset, botões, alertas e campos
   Paleta da marca: verde · teal · azul sobre preto
   ===================================================================== */

:root {
    /* Fundos */
    --bg-0: #03060a;
    --bg-1: #0a0f17;
    --bg-2: #0e1521;
    --bg-3: #121b2a;
    --linha:       rgba(120, 160, 200, 0.12);
    --linha-forte: rgba(120, 160, 200, 0.22);

    /* Texto */
    --txt:       #e8eef6;
    --txt-suave: #9fb0c3;
    --txt-fraco: #6b7e93;

    /* Marca */
    --verde: #5ed17a;
    --lima:  #a3e635;
    --azul:  #3b86f6;
    --azul-claro: #8db8fb;
    --teal:  #2bd4bf;

    /* Estados */
    --sobe:   #4ade80;
    --desce:  #f87171;
    --alerta: #f5b84a;

    /* Gradientes */
    --grad-marca: linear-gradient(120deg, #6ee07a 0%, #2bd4bf 48%, #3b86f6 100%);
    --grad-botao: linear-gradient(100deg, #2f7cf0 0%, #2bc3c9 55%, #6ad66f 100%);

    /* Raios e sombras */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --sombra: 0 18px 40px -18px rgba(0, 0, 0, 0.7);

    --fonte-display: 'Sora', system-ui, sans-serif;
    --fonte-corpo:   'Inter', system-ui, sans-serif;

    /* Superfícies e estados (trocam com o fundo) */
    --campo-bg:      rgba(5, 8, 13, 0.6);
    --caixa-sutil:   rgba(5, 8, 13, 0.45);
    --topbar-bg:     rgba(10, 15, 23, 0.85);
    --cartao-grad:   linear-gradient(160deg, rgba(18, 27, 42, 0.9), rgba(14, 21, 33, 0.6));
    --sutil:         rgba(120, 160, 200, 0.06);
    --sel-bg:        rgba(43, 212, 191, 0.12);
    --trilho:        rgba(120, 160, 200, 0.12);
    --sombra-cartao: none;
    --ok-txt:   #a7ecb7;
    --erro-txt: #fbb4b4;
    --medalhao: transparent;

    color-scheme: dark;
}

/* =====================================================================
   FUNDO BRANCO — mesma identidade, paleta clara.
   Ativado por <html data-fundo="branco"> (escolha salva no perfil).
   ===================================================================== */
:root[data-fundo="branco"] {
    --bg-0: #eef2f6;
    --bg-1: #f3f6f9;
    --bg-2: #ffffff;
    --bg-3: #eef2f7;
    --linha:       rgba(20, 45, 80, 0.10);
    --linha-forte: rgba(20, 45, 80, 0.20);

    --txt:       #0f1b2b;
    --txt-suave: #45576b;
    --txt-fraco: #6e7f92;

    --verde: #1e9a4c;
    --lima:  #4f8f0b;
    --azul:  #1f6fe5;
    --azul-claro: #1a5fcf;
    --teal:  #0d9c8c;
    --sobe:   #15924a;
    --desce:  #d33a3a;
    --alerta: #b7791f;

    --campo-bg:      #ffffff;
    --caixa-sutil:   #f3f6fa;
    --topbar-bg:     rgba(255, 255, 255, 0.86);
    --cartao-grad:   linear-gradient(160deg, #ffffff, #f6f9fc);
    --sutil:         rgba(20, 45, 80, 0.05);
    --sel-bg:        rgba(13, 156, 140, 0.10);
    --trilho:        rgba(20, 45, 80, 0.08);
    --sombra-cartao: 0 1px 2px rgba(15, 35, 60, 0.04), 0 10px 26px -18px rgba(15, 35, 60, 0.22);
    --sombra:        0 18px 40px -22px rgba(15, 35, 60, 0.35);
    --ok-txt:   #17733a;
    --erro-txt: #b42323;
    --medalhao: radial-gradient(circle at 50% 45%, #0d1b26, #04070b 72%);

    color-scheme: light;
}

/* Variantes do logo para cada fundo */
.so-branco { display: none !important; }
:root[data-fundo="branco"] .so-preto { display: none !important; }
:root[data-fundo="branco"] .so-branco { display: block !important; }

/* Troca suave entre os fundos */
body, .sidebar, .topbar, .painel, .card-stat, .resumo-card, .mini-card, .rel-card, .prop,
.inp, .usuario-box, .seletor, .fundo-radio, .lg-painel, .lg-marca {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* ---------- Seletor de fundo (radio Preto / Branco) ---------- */
.fundo-radio { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid var(--linha); background: var(--bg-2); border-radius: var(--r-md); padding: 0.25rem 0.3rem 0.25rem 0.7rem; margin: 0; min-width: 0; }
.fundo-radio legend { float: left; font-size: 0.76rem; color: var(--txt-fraco); font-weight: 500; margin-right: 0.35rem; padding: 0; }
.fr-op { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.65rem; border-radius: 10px; font-size: 0.84rem; font-weight: 500; color: var(--txt-suave); cursor: pointer; transition: background 0.15s, color 0.15s; }
.fr-op:hover { color: var(--txt); background: var(--sutil); }
.fr-op input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.fr-bola { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--linha-forte); display: grid; place-items: center; flex: none; transition: border-color 0.15s; }
.fr-bola::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); transform: scale(0); transition: transform 0.15s; }
.fr-amostra { width: 16px; height: 16px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.fr-amostra.preto { background: #05080d; }
.fr-amostra.branco { background: #ffffff; }
.fr-op:has(input:checked) { background: var(--sel-bg); color: var(--txt); }
.fr-op:has(input:checked) .fr-bola { border-color: var(--teal); }
.fr-op:has(input:checked) .fr-bola::after { transform: scale(1); }
.fr-op:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 1px; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--fonte-corpo);
    background: var(--bg-1);
    color: var(--txt);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--fonte-display); line-height: 1.2; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: rgba(94, 209, 122, 0.3); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120, 160, 200, 0.18); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.num, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--fonte-display); font-weight: 600; }
.grad-txt { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border: 1px solid var(--linha-forte); background: var(--bg-3); color: var(--txt);
    font-weight: 600; font-size: 0.88rem; padding: 0.62rem 1rem; border-radius: var(--r-md);
    transition: border-color 0.14s, background 0.14s, filter 0.14s, transform 0.1s;
    white-space: nowrap;
}
.btn:hover { border-color: rgba(120, 160, 200, 0.36); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-principal { border: none; color: #04140d; background: var(--grad-marca); box-shadow: 0 8px 22px -10px rgba(43, 212, 191, 0.7); }
.btn-principal:hover { filter: brightness(1.06); }
.btn-contorno, .btn-fantasma { background: transparent; }
.btn-perigo { color: var(--desce); background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.25); }
.btn-perigo:hover { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.45); }
.btn-bloco { width: 100%; }
.btn-pequeno { padding: 0.4rem 0.75rem; font-size: 0.82rem; }

/* ---------- Alertas ---------- */
.alerta { padding: 0.75rem 1rem; border-radius: var(--r-md); font-size: 0.9rem; border: 1px solid; }
.alerta-ok   { background: rgba(94, 209, 122, 0.1);  border-color: rgba(94, 209, 122, 0.3);  color: var(--ok-txt); }
.alerta-erro { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: var(--erro-txt); }
.alerta ul { margin: 0.35rem 0 0 1.1rem; }

/* ---------- Campos de formulário ---------- */
.campo { display: grid; gap: 0.38rem; min-width: 0; }
.campo > label, .campo > span { font-size: 0.8rem; color: var(--txt-suave); font-weight: 500; }
.campo .req { color: var(--teal); }
.campo-dica { font-size: 0.75rem; color: var(--txt-fraco); }
.inp, .campo > input, .campo > select, .campo > textarea {
    width: 100%; background: var(--campo-bg); border: 1px solid var(--linha-forte);
    border-radius: var(--r-md); padding: 0.7rem 0.85rem; color: var(--txt); font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.inp::placeholder, .campo > input::placeholder { color: var(--txt-fraco); }
.inp:focus, .campo > input:focus, .campo > select:focus, .campo > textarea:focus {
    outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(43, 212, 191, 0.13);
}
.campo > input:disabled { opacity: 0.6; }
select.inp, .campo > select { cursor: pointer; }
select option { background: var(--bg-2); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition: none !important; }
}