/* A FENDA - CSS MASTER (VERSÃO REPARADA) */
/* 🫧 CORRENTE – 2026-10-13 (v7.2)
   Comecei aqui a Fase 2 do Hacker Theme.
   Cada variável é uma porta que a Fase 3 vai abrir.
   O oceano é fundo, mas a corrente é quem move. */

:root {
    /* ============================================================
       VARIÁVEIS ORIGINAIS (mantidas)
       ============================================================ */
    --cor-principal: #0246859d;
    --laranja-fenda: linear-gradient(165deg, oklab(68.355% 0.15793 0.1283), oklab(58.032% 0.10737 -0.11072 / 0.824));
    --dourado: #ffbc00;
    --azul-fenda: #70cde4;
    --background-dark: #0d0d0d;
    --glass-bg: rgba(255, 255, 255, 0.055);
    --vibe-ads-bg: #08080ec2;
    --vibe-ads-stroke-opacity: 0.12;
    --vibe-ads-static-brightness: 0.06;
    --vibe-ads-dynamic-brightness: 0.3;
    --vibe-ads-pulse-duration: 5s;
    --vibe-ads-header-offset: 80px;
    --tamanho-fonte-header: clamp(0.86em, 4cqi, 2rem);
    --altura-estimada-header: calc((clamp(0.9rem, 4cqi, 2rem) * 1.3) + 2lh + 15px);

    /* ============================================================
       🐚 CORRENTE – 2026-10-13 (Sprint 2.5 / Fase 2 — Etapa 2.1)

       Variáveis semânticas para o futuro tema hacker.
       Cada uma tem valor HEX para máxima compatibilidade
       (iPhone 6S / iOS 9.3). Em navegadores modernos, a variável
       é usada diretamente; em navegadores antigos, o fallback hex
       hardcoded no ponto de uso cobre o caso.

       A troca de tema (Fase 3) redefinirá essas variáveis dentro
       de um seletor [data-theme="hacker"], sem precisar tocar nos
       arquivos CSS originais.
       ============================================================ */

    /* ─── FUNDOS ─── */
    --bg-page: #0246859d;
    --bg-page-dark: #0d0d0d;
    --bg-card: rgba(17, 17, 17, 0.32);
    --bg-card-hover: rgba(0, 0, 0, 0.397);
    --bg-card-hover-strong: rgba(0,0,0,0.6); /*.spotted-card:hover (com backdrop) - 🐚 FAROL – Fase 2 (PEC) */
    --bg-modal-overlay: rgba(0, 0, 0, 0.5);
    --bg-modal-content: rgba(20, 20, 30, 0.92);
    --bg-sidebar: rgba(10, 25, 47, 0.95);
    --bg-drawer: #11111105;
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-input-hover: rgba(255, 255, 255, 0.12);   /* 🐚 FAROL – Fase 2 */
    --bg-glass: rgba(255, 255, 255, 0.055);
    --bg-card-dark: #1a1a2ee0;
    --bg-footer: #1a1a1ae0; 

    /* ─── SOMBRAS (PEC 2026-10-15 – para tema hacker neon) ─── */
    --sombra-card: 0 8px 20px rgba(0, 0, 0, 0.4);          /* Cards com sombra padrão - 🐚 FAROL – Fase 2 (PEC) */
    --sombra-card-hover: 0 12px 30px rgba(0, 0, 0, 0.5);   /* Hover de cards - 🐚 FAROL – Fase 2 (PEC) */
    --sombra-modal: 0 15px 30px rgba(0, 0, 0, 0.6);        /* Modais e popups - 🐚 FAROL – Fase 2 (PEC) */

    /* ─── TEXTOS ─── */
    --texto-primario: #ffffff;
    --texto-secundario: #cccccc;
    --texto-terciario: #aaaaaa;
    --texto-muted: #888888;
    --texto-disabled: #666666;
    --texto-dourado: #ffbc00;
    --texto-dourado-hover: #ffd44d;
    --cor-principal-laranja: #fc900c;   /* 🐚 FAROL – Fase 2 – laranja de destaque (títulos, slide, diretrizes) */

    /* ─── BORDAS ─── */
    --borda-sutil: rgba(255, 255, 255, 0.05);
    --borda-media: rgba(255, 255, 255, 0.1);
    --borda-card: rgba(255, 255, 255, 0.15);
    --borda-dourada: rgba(255, 188, 0, 0.2);
    --borda-glow-suave:	rgba(255,188,0,0.10); /* Bordas douradas sutis - 🐚 FAROL – Fase 2 (PEC) */

    /* ─── CORES DE ESTADO ─── */
    --cor-sucesso: #4caf50;
    --cor-sucesso-hover: #66bb6a;
    --cor-erro: #ff6b6b;
    --cor-erro-escuro: #f44336;
    --cor-aviso: #ffa500;
    --cor-info: #00f3ff;
    --cor-perigo: #cc420c;

    /* ─── AURA ─── */
    /* --aura-user é injetada dinamicamente pelo PHP (perfil.php) via style
       inline. Aqui só o fallback para quando o PHP não a define. */
    --aura-fallback: #70cde4;
    --aura-borda-avatar: #ff9f0f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

* {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* Fallback para navegadores que não conhecem :focus-visible */
@supports not selector(:focus-visible) {
    input:focus,
    textarea:focus,
    select:focus,
    button:focus,
    a:focus {
        outline: 2px solid var(--dourado, #ffbc00);
        outline-offset: 2px;
    }
}

html, body {
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    background: #0246859d;                          /* fallback hardcoded */
    background: var(--bg-page, #0246859d);          /* themeable */
    color: #fffffff8;
    color: var(--texto-primario, oklch(0.96 0 0 / 1));                   
    font-family: 'Inter', -apple-system, BlinkMacSystemFont , Segoe UI, Tahoma, Verdana, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
    width: 100%;
    container-type: inline-size;
    container-name: main-area;
    scrollbar-width: thin;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    font-size: 0.9rem;
    font-size: clamp(14px, 0.6vw + 0.625rem, 20px);
    max-width: 100vw;
    max-width: 100cqw;
    margin: 0 auto;
    padding: 0 12px;
    /* Isso devolve o respiro nas laterais */
    width: 100%;
    box-sizing: border-box ;
}

html {
    scroll-behavior: smooth;
}

/* ============================================================
   🌅 FAGULHA — 2026-10-16 — Fase 5 (Hacker Theme)
   ============================================================
   Bloco de variáveis do tema hacker.
   Aplicado quando o <html> tem data-theme="hacker" (via JS).

   Cada variável redefine o valor definido em :root (acima).
   Nada aqui usa !important — o poder vem da cascata natural
   de custom properties: o valor mais específico vence.

   Isso é o CORAÇÃO do tema hacker. Sem este bloco, o
   skin-hacker.css não tem onde se apoiar.

   Variáveis originais preservadas — só redefinimos.
   Variáveis dinâmicas via PHP (--cor-borda-glow, --aura-user)
   NÃO são tocadas aqui — são injetadas inline pelo PHP.
   ============================================================ */

:root[data-theme="hacker"] {
    /* ─── HACKER: IDENTIDADE BASE ─── */
    --hacker-green: #00ff41;                    /* canônica — unifica os 4 verdes do skin antigo */
    --hacker-green-soft: #00cc33;               /* variante mais escura pra textos/bordas secundárias */
    --hacker-green-glow: rgba(0, 255, 65, 0.4); /* glow padrão pra sombras */
    --hacker-bg: #000000;                       /* preto puro do terminal */
    --hacker-font: 'Courier New', 'Courier', monospace;
    --hacker-hover-bg: #00ff41;                 /* inversão hover: fundo verde */
    --hacker-hover-text: #000000;               /* inversão hover: texto preto */

    /* ─── FUNDOS ─── */
    --bg-page: #000000;
    --bg-page-dark: #000000;
    --bg-card: rgba(0, 20, 0, 0.85);            /* card com tinta verde-fósforo sutil */
    --bg-card-hover: rgba(0, 40, 0, 0.9);
    --bg-card-hover-strong: rgba(0, 40, 0, 0.95);
    --bg-modal-overlay: rgba(0, 0, 0, 0.85);    /* overlay preto quase sólido */
    --bg-modal-content: rgba(0, 15, 0, 0.95);   /* conteúdo do modal com tinta verde */
    --bg-sidebar: rgba(0, 15, 0, 0.95);
    --bg-drawer: rgba(0, 10, 0, 0.9);
    --bg-input: rgba(0, 40, 0, 0.4);            /* inputs com fundo verde-translúcido */
    --bg-input-hover: rgba(0, 60, 0, 0.6);
    --bg-glass: rgba(0, 30, 0, 0.3);
    --bg-card-dark: rgba(0, 10, 0, 0.9);
    --bg-footer: rgba(0, 10, 0, 0.95);

    /* ─── SOMBRAS (glow verde-fósforo) ─── */
    --sombra-card: 0 8px 20px rgba(0, 255, 65, 0.15);
    --sombra-card-hover: 0 12px 30px rgba(0, 255, 65, 0.25);
    --sombra-modal: 0 15px 30px rgba(0, 255, 65, 0.3);

    /* ─── TEXTOS (escala de verde-fósforo) ─── */
    --texto-primario: #00ff41;                  /* verde canônico do terminal */
    --texto-secundario: #00cc33;                /* verde médio */
    --texto-terciario: #00aa2a;                 /* verde mais apagado */
    --texto-muted: #008822;                     /* verde escuro */
    --texto-disabled: #005515;                  /* verde bem apagado */
    --texto-dourado: #ffcc00;                   /* amarelo-matrix (mantém identidade dourada) */
    --texto-dourado-hover: #ffe066;             /* amarelo-claro pro hover */
    --cor-principal-laranja: #00ffcc;           /* hacker: laranja vira ciano-neon */

    /* ─── BORDAS (verde translúcido) ─── */
    --borda-sutil: rgba(0, 255, 65, 0.15);
    --borda-media: rgba(0, 255, 65, 0.3);
    --borda-card: rgba(0, 255, 65, 0.5);
    --borda-dourada: rgba(0, 255, 65, 0.35);
    --borda-glow-suave: rgba(0, 255, 65, 0.2);

    /* ─── CORES DE ESTADO (mantidas reconhecíveis) ─── */
    --cor-sucesso: #00ff41;                     /* verde hacker (já é o tema) */
    --cor-sucesso-hover: #66ff88;
    --cor-erro: #ff4141;                        /* vermelho mantido pra contraste */
    --cor-erro-escuro: #ff2020;
    --cor-aviso: #ffcc00;                       /* amarelo mantido pra avisos */
    --cor-info: #00ffcc;                        /* ciano-neon */
    --cor-perigo: #ff4141;

    /* ─── AURA (borda/fallback padrão viram verde hacker) ─── */
    /* ⚠️ --aura-user continua sendo injetada inline pelo PHP.
          Aqui só sobrescrevemos o fallback estático. */
    --aura-fallback: #00ff41;
    --aura-borda-avatar: #00ff41;
}