/* =====================================================================
   TEMA G2G LOG 2.0 — visual compartilhado por todas as telas
   Tudo aqui vale SÓ para a tela (@media screen): impressão e PDFs
   continuam exatamente como antes.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Exo+2:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
    --g2g-bg: #040A18;
    --g2g-bg-menu: rgba(3, 9, 22, 0.86);
    --g2g-surface: rgba(10, 24, 54, 0.78);
    --g2g-surface-2: rgba(3, 9, 22, 0.60);
    --g2g-card: linear-gradient(180deg, rgba(18, 40, 86, 0.70), rgba(7, 17, 40, 0.80));
    --g2g-border: rgba(56, 139, 253, 0.38);
    --g2g-border-soft: rgba(56, 139, 253, 0.20);
    --g2g-glow: 0 0 28px rgba(37, 99, 235, 0.18);
    --g2g-accent: #38BDF8;
    --g2g-primary: #2563EB;
    --g2g-primary-hover: #1D4ED8;
    --g2g-text: #E6EDF7;
    --g2g-muted: #A5B4CF;
    --g2g-hint: #7FA2D6;
    --g2g-label: #A5C3EE;
    --g2g-box: #FBBF24;
    --g2g-success: #34D399;
    --g2g-danger: #F87171;
    --g2g-warning: #FB923C;
    --g2g-font: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
    --g2g-font-display: 'Rajdhani', 'Exo 2', sans-serif;
    --g2g-font-mono: 'JetBrains Mono', Consolas, monospace;
}

@media screen {
    html { color-scheme: dark; }
    body {
        font-family: var(--g2g-font);
        color: var(--g2g-text);
        background:
            radial-gradient(1100px 520px at 75% -8%, rgba(37, 99, 235, 0.26), transparent 62%),
            radial-gradient(800px 480px at 8% 108%, rgba(14, 165, 233, 0.12), transparent 60%),
            var(--g2g-bg);
        background-attachment: fixed;
    }
    /* Página aberta dentro do Hub: fundo transparente para emendar com o Hub */
    html.g2g-embed, html.g2g-embed body { background: transparent !important; }
    html.g2g-embed body { padding: 14px 24px 24px !important; }
    /* Páginas aproveitam a largura da tela (sem faixas vazias nas laterais) */
    .container { max-width: 1600px !important; }

    /* Componentes reutilizáveis */
    .g2g-card {
        background: var(--g2g-card);
        border: 1px solid var(--g2g-border);
        border-radius: 14px;
        box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.10), var(--g2g-glow);
    }
    .g2g-label {
        font-family: var(--g2g-font-display);
        font-size: 14px; font-weight: 600; letter-spacing: 0.12em;
        text-transform: uppercase; color: var(--g2g-label);
    }
    .g2g-num {
        font-family: var(--g2g-font-display);
        font-weight: 700; letter-spacing: 0.01em; color: var(--g2g-text);
    }
    .g2g-chip {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
        border: 1px solid transparent; white-space: nowrap;
    }
    .g2g-chip.up   { color: #6EE7B7; background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.40); }
    .g2g-chip.down { color: #FDBA74; background: rgba(251, 146, 60, 0.14); border-color: rgba(251, 146, 60, 0.45); }
    .g2g-chip.info { color: #7DD3FC; background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.40); }
    .g2g-chip.flat { color: var(--g2g-muted); background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.30); }
    .g2g-icon-tile {
        width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(14, 165, 233, 0.14); color: var(--g2g-accent);
        box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35), 0 0 14px rgba(56, 189, 248, 0.25);
    }

    /* Barra de rolagem discreta */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(56, 139, 253, 0.28); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.45); background-clip: padding-box; }

    ::selection { background: rgba(56, 189, 248, 0.35); }
}

/* ===== Celular: tudo cabe na largura da tela, sem arrastar para o lado ===== */
@media screen and (max-width: 768px) {
    html.g2g-embed body { padding: 10px 10px 20px !important; }
    html, body { max-width: 100%; overflow-x: hidden; }
    select, input, textarea, img, canvas, video, iframe { max-width: 100%; }
    .container, .card, .chart-container, .kpi-card, .dash-card, .controls, .control-group, .form-group,
    .report-page, .invoice-box, .audit-panel, .settings-bar, .result-box { min-width: 0; max-width: 100%; }
    .main-grid, .dashboard-grid, .dashboard-row, .dashboard-row-3, .kpi-grid, .kpi-grid-5, .dashboard-results { grid-template-columns: minmax(0, 1fr) !important; }
    .main-grid > *, .dashboard-grid > *, .dashboard-row > *, .kpi-grid > *, .kpi-grid-5 > *, .dashboard-results > * { min-width: 0; }
    select { text-overflow: ellipsis; }
    h1 { font-size: 26px !important; line-height: 1.15; }
}

/* ---------------------------------------------------------------------
   CELULAR: tudo cabe na largura da tela, sem arrastar para o lado
   --------------------------------------------------------------------- */
@media screen and (max-width: 820px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    html.g2g-embed body { padding: 10px 10px 20px !important; }
    html, body { max-width: 100%; overflow-x: hidden; }
    /* Itens de grade/linha podem encolher até a largura da tela */
    * { min-width: 0; }
    img, canvas, video, iframe, svg, input, select, textarea, button { max-width: 100%; }
    select { text-overflow: ellipsis; }
    /* Tabelas largas rolam dentro do próprio cartão, nunca a página */
    .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
}