/* ══════════════════════════════════════════════
   SPACESHIELD AI v5.2 · responsive.css
   Responsividade total — todos os browsers
   Adicionar APÓS head.css e body.css
══════════════════════════════════════════════ */

/* ── Normalização cross-browser ── */
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Touch targets mínimos (iOS/Android) */
button, [role="button"], select, input, textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 36px;
}

/* Evitar zoom em inputs iOS */
input[type="text"],
input[type="number"],
input[type="email"],
textarea,
select {
    font-size: 16px !important;
}

@media (min-width: 769px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    textarea,
    select {
        font-size: 13px !important;
    }
}

/* Smooth scroll nativo */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* -ms-text-size-adjust removed for compatibility: not supported by Chrome, Edge, Firefox, Safari */
}

/* Evitar overflow horizontal global */
body {
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════
   SSL BADGE GLOBAL
══════════════════════════════════════════════ */
.ssl-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    font-family:    'Share Tech Mono', monospace;
    font-size:      9px;
    color:          var(--green);
    background:     rgba(0,255,136,.08);
    border:         1px solid rgba(0,255,136,.25);
    border-radius:  4px;
    padding:        3px 8px;
    letter-spacing: .5px;
    white-space:    nowrap;
    cursor:         default;
    transition:     all .2s;
}
.ssl-badge:hover { background: rgba(0,255,136,.14); }
.ssl-badge-icon { font-size: 10px; }
.ssl-badge-dot  { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; flex-shrink: 0; }

.ssl-panel {
    background: rgba(0,255,65,.03);
    border:     1px solid rgba(0,255,65,.25);
    padding:    10px 14px;
    margin:     8px 0;
    position:   relative;
    box-shadow: 0 0 10px rgba(0,255,65,0.06);
}
.ssl-panel::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     2px;
    background: var(--green);
    box-shadow: var(--glow-green);
}
.ssl-panel-title {
    font-family:    var(--three-d-font);
    font-size:      6px;
    color:          var(--green);
    margin-bottom:  10px;
    letter-spacing: .5px;
    text-shadow:    var(--glow-green);
}
.ssl-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         4px 0;
    border-bottom:   1px solid rgba(0,255,65,.06);
}
.ssl-row:last-child { border-bottom: none; }
.ssl-lbl { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: var(--text3); }
.ssl-val { font-family: var(--three-d-font); font-size: 6px; color: var(--green); text-shadow: 0 0 4px rgba(0,255,65,0.5); }
.ssl-val.ssl-warn { color: var(--yellow); }
.ssl-val.ssl-err  { color: var(--red); }

/* ══════════════════════════════════════════════
   MOBILE-FIRST BREAKPOINTS
══════════════════════════════════════════════ */

/* ─── Ultra-wide (>1600px) ─── */
@media (min-width: 1600px) {
    .grid-main {
        grid-template-columns: 260px 1fr 260px;
    }
    .metric-val { font-size: 20px; } /* Orbitron já é grande — limitar em ultra-wide */
    .tab-bar    { gap: 6px; }
}

/* ─── Desktop largo (1200–1599px) ─── */
@media (max-width: 1599px) and (min-width: 1200px) {
    .grid-main {
        grid-template-columns: 220px 1fr 220px;
    }
}

/* ─── Tablet paisagem / Desktop pequeno (1024–1199px) ─── */
@media (max-width: 1199px) and (min-width: 1025px) {
    .grid-main {
        grid-template-columns: 190px 1fr 190px;
    }
    .tab-btn { font-size: 9px; padding: 8px 10px; }
    .inv-hero { flex-direction: column; gap: 10px; }
    .inv-hero-right { text-align: left; min-width: unset; }
}

/* ─── Tablet retrato (861–1024px) ─── */
@media (max-width: 1024px) and (min-width: 861px) {
    .grid-main {
        grid-template-columns: 160px 1fr;
        height: calc(100vh - 44px - 80px);
    }
    .sidebar-right {
        display: none; /* Oculta sidebar direita — conteúdo vai para tabs */
    }
    .topbar {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
        gap: 6px;
    }
    .corp-badge  { order: 10; font-size: 9px; }
    .tab-btn     { font-size: 9px; padding: 7px 9px; }
    .jstats-row  { grid-template-columns: 1fr 1fr; }
    .jfield-grid { grid-template-columns: 1fr; }
    .transp-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Mobile grande (481–768px) ─── */
@media (max-width: 768px) {
    /* Layout principal: coluna única */
    .grid-main {
        display:    flex;
        flex-direction: column;
        height:     auto;
        overflow:   visible;
        min-height: calc(100vh - 44px - 70px);
    }

    .sidebar-left,
    .sidebar-right {
        max-height:    none;
        border-right:  none;
        border-left:   none;
        border-bottom: 1px solid var(--border);
        padding:       12px;
    }

    .sidebar-left {
        order: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
        align-items: start;
    }
    .sidebar-left .section-title { grid-column: 1/-1; }

    .sidebar-right {
        order: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
    }
    .sidebar-right .section-title { grid-column: 1/-1; }

    .center-panel {
        order: 1;
        height: auto;
        overflow: visible;
    }

    /* Topbar compacto */
    .topbar {
        flex-wrap:  wrap;
        height:     auto;
        padding:    8px 12px;
        gap:        6px;
    }
    .status-bar   { flex-wrap: wrap; gap: 6px; }
    .corp-badge   { order: 10; width: 100%; font-size: 9px; }

    /* Tab bar scrollável horizontalmente */
    .tab-bar {
        overflow-x: auto;
        white-space: nowrap;
        /* Hide scrollbar for Firefox (not widely supported, so removed) */
        /* Hide scrollbar for IE, Edge */
        -ms-overflow-style: none;
        padding: 0 8px;
        gap: 2px;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn {
        font-size:     9px;
        padding:       8px 10px;
        white-space:   nowrap;
        flex-shrink:   0;
        display:       inline-block;
    }

    /* Network canvas menor */
    .netmap { height: 120px; }

    /* Tab content sem overflow escondido */
    .tab-content {
        max-height: none;
        overflow:   visible;
        padding:    12px 10px;
    }

    /* Investor bar */
    .inv-hero-bar {
        flex-direction: column;
        align-items:    flex-start;
        gap:            10px;
    }
    .iport-row {
        width:     100%;
        display:   grid;
        grid-template-columns: 1fr 1fr;
        gap:       6px;
    }
    .iport-card   { min-width: unset; }
    .inv-actions  { flex-direction: row; width: 100%; gap: 6px; }
    .inv-btn      { flex: 1; text-align: center; padding: 9px 8px; }

    /* Modal */
    .modal-box    { padding: 16px; margin: 8px; max-width: calc(100vw - 16px); }
    .form-row     { grid-template-columns: 1fr; }

    /* Corpo dos módulos */
    .corp-docs-grid   { grid-template-columns: 1fr; }
    .corp-assets      { grid-template-columns: 1fr 1fr; }
    .corp-grid        { grid-template-columns: 1fr; }
    .corp-compliance  { grid-template-columns: 1fr 1fr; }
    .corp-budget      { grid-template-columns: 1fr 1fr; }
    .iso-steps-grid   { grid-template-columns: 1fr; }
    .iso-kpi-row      { grid-template-columns: 1fr 1fr; }
    .annex-grid       { grid-template-columns: 1fr 1fr; }
    .transp-grid      { grid-template-columns: 1fr; }
    .jstats-row       { grid-template-columns: 1fr 1fr; }
    .jfield-grid      { grid-template-columns: 1fr; }

    .inv-hero               { flex-direction: column; }
    .inv-hero-right         { text-align: left; min-width: unset; width: 100%; }
    .inv-sim-moic-row       { flex-direction: column; }
    .inv-pitch-grid         { grid-template-columns: 1fr; }
    .inv-tese-grid          { grid-template-columns: 1fr; }
    .inv-proj-chart         { grid-template-columns: repeat(3, 1fr); }
    .inv-proj-tbl-head,
    .inv-proj-tbl-row       { grid-template-columns: 1fr 1fr 1fr; }
    .inv-proj-tbl-head span:nth-child(n+4),
    .inv-proj-tbl-row span:nth-child(n+4) { display: none; }

    /* Chatbot */

    /* Corp transparency */
    .transp-score-row       { flex-direction: column; gap: 12px; text-align: center; }
    .transp-score-vs        { display: none; }
}

/* ─── Mobile pequeno (≤480px) ─── */
@media (max-width: 480px) {
    /* Grid sidebar em coluna */
    .sidebar-left,
    .sidebar-right {
        grid-template-columns: 1fr;
    }

    /* Métricas menores */
    .metric-val     { font-size: 18px; }
    .iport-val      { font-size: 14px; }

    /* Portfolio 2×2 compacto */

    /* Tabs com ícones apenas */
    .tab-btn        { font-size: 8px; padding: 7px 8px; letter-spacing: 0; }

    /* Valores de valuation */
    .inv-val-val    { font-size: 16px; }
    .inv-res-big    { font-size: 22px; }

    /* Sliders ocupam toda largura */
    .inv-sim-slider-row { flex-wrap: wrap; }

    /* Tabela projeção: só período + ARR */
    .inv-proj-tbl-head,
    .inv-proj-tbl-row {
        grid-template-columns: 1fr 1fr;
    }
    .inv-proj-tbl-head span:nth-child(n+3),
    .inv-proj-tbl-row  span:nth-child(n+3) { display: none; }

    /* Chatbot */

    /* Corp assets */
    .corp-assets     { grid-template-columns: 1fr; }
    .corp-compliance { grid-template-columns: 1fr; }
    .corp-budget     { grid-template-columns: 1fr; }
    .annex-grid      { grid-template-columns: 1fr; }
    .iso-kpi-row     { grid-template-columns: 1fr 1fr; }

    /* Modal fullscreen */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-box     { border-radius: 10px 10px 0 0; max-height: 90vh; margin: 0; max-width: 100vw; }
}

/* ─── Samsung Fold / telas muito estreitas (≤320px) ─── */
@media (max-width: 320px) {
    .logo { font-size: 12px; letter-spacing: 1px; }
    .tab-btn { font-size: 7px; padding: 6px 7px; }
    .metric-val { font-size: 16px; }
}

/* ══════════════════════════════════════════════
   WEBKIT / SAFARI FIXES
══════════════════════════════════════════════ */

/* Safari: flex gap substitute */
@supports not (gap: 10px) {
    .status-bar > * + *  { margin-left: 8px; }
    .tab-bar    > * + *  { margin-left: 2px; }
    .inv-actions > * + * { margin-left: 6px; }
}

/* Safari: SVG animations */

@-webkit-keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* Firefox: scrollbar styling */
/*
@-moz-document url-prefix() {
    .sidebar-left,
    .sidebar-right,
    .tab-content,
    .feed-list { scrollbar-width: thin; scrollbar-color: var(--bg4) var(--bg2); }
}
*/

/* IE11 / Edge Legacy: grid fallback */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .grid-main {
        display: -ms-flexbox;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .sidebar-left  { -ms-flex: 0 0 220px; flex: 0 0 220px; width: 220px; }
    .sidebar-right { -ms-flex: 0 0 220px; flex: 0 0 220px; width: 220px; }
    .center-panel  { -ms-flex: 1; flex: 1; }
}

/* Chrome 49+ / Edge 16+: Grid com prefixo antigo */
@supports not (display: grid) {
    .grid-main {
        display: flex;
        flex-direction: row;
    }
    .sidebar-left,
    .sidebar-right {
        flex: 0 0 220px;
        width: 220px;
    }
    .center-panel { flex: 1; }
}

/* ══════════════════════════════════════════════
   PRINT MEDIA
══════════════════════════════════════════════ */
@media print {
    .topbar, .tab-bar, .ctrl-bar, .inv-actions,
    .grid-main     { display: block; }
    .sidebar-left,
    .sidebar-right { display: block; width: 100%; }
    .tab-content   { display: block !important; opacity: 1 !important; }
    body           { background: #fff; color: #000; }
    :root {
        --text1: #000; --text2: #333; --text3: #666;
        --bg: #fff;    --bg2: #f5f5f5;
        --accent: #007acc; --green: #00a050;
    }
}

/* ══════════════════════════════════════════════
   ACESSIBILIDADE
══════════════════════════════════════════════ */

/* Focus visível para teclado */
:focus-visible {
    outline:        2px solid var(--accent);
    outline-offset: 2px;
    border-radius:  2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
    }
    .status-dot { animation: none; opacity: 1; }
}

/* High contrast */
@media (prefers-contrast: high) {
    :root {
        --border: rgba(0,212,255,.4);
        --text3:  #8ab0cc;
    }
    .tab-btn      { border: 1px solid var(--border); }
    .metric-val   { text-shadow: none; }
}

/* Dark mode nativo (já é dark, mas garante em sistemas sem preferência) */
@media (prefers-color-scheme: light) {
    /* O sistema SpaceShield é sempre dark — mantém */
    :root { color-scheme: dark; }
}

/* ══════════════════════════════════════════════
   LANDSCAPE MOBILE
══════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
    .grid-main  { flex-direction: row; height: calc(100vh - 44px - 60px); overflow: hidden; }
    .sidebar-left  { flex: 0 0 160px; overflow-y: auto; display: block; }
    .center-panel  { flex: 1; overflow: hidden; }
    .sidebar-right { display: none; }
    .netmap { height: 100px; }
    .tab-btn { font-size: 8px; padding: 6px 8px; }
}

/* ══════════════════════════════════════════════
   PAINEL ADMINISTRATIVO — MOBILE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .adm-panel-overlay {
        left:   0 !important;
        right:  0 !important;
        top:    0 !important;
        bottom: 0 !important;
        width:  100vw !important;
        height: 100dvh !important;
        border-radius: 0;
        overflow-y: auto;
    }

    .adm-panel-header {
        flex-wrap: wrap;
        gap:       6px;
        padding:   8px 10px;
    }

    .adm-panel-logo  { font-size: 11px; }
    .adm-panel-badge { display: none; }
    .adm-panel-user  { font-size: 9px; }

    .adm-panel-tabbar {
        overflow-x:       auto;
        white-space:      normal;
        -ms-overflow-style: none;
        padding:          0;
        gap:              0;
    }
    .adm-panel-tabbar::-webkit-scrollbar { display: none; }

    .adm-tab-group      { flex-direction: column; }
    .adm-tab-group-lbl  { min-width: unset; width: 100%; border-right: none; border-bottom: 1px solid rgba(0,212,255,.08); padding: 4px 10px; font-size: 8px; }
    .adm-tab-group-btns { padding: 6px 8px; overflow-x: auto; flex-wrap: nowrap; }

    .adm-tab-btn {
        font-size:   8px;
        padding:     5px 9px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .adm-panel-body {
        padding:    10px;
        overflow-y: auto;
    }

    /* ISO 27001 mobile */
    .iso-steps-grid   { grid-template-columns: 1fr; }
    .iso-kpi-row      { grid-template-columns: 1fr 1fr; }
    .annex-grid       { grid-template-columns: 1fr 1fr; }
    .iso-header       { flex-direction: column; gap: 10px; }
    .cert-actions-row { flex-direction: column; gap: 6px; }
    .cert-sign-btn,
    .cert-draw-sig-btn,
    .cert-print-btn   { width: 100%; padding: 10px; font-size: 10px; }

    /* Admin min (flutuante) */
    .adm-panel-overlay.adm-min {
        left:   auto !important;
        right:  12px !important;
        bottom: 80px !important;
        top:    auto !important;
        width:  calc(100vw - 24px) !important;
        height: auto !important;
    }
}

/* ══════════════════════════════════════════════
   MODAL PIX / COMPRA — MOBILE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .modal-box {
        padding:    14px;
        margin:     6px;
        max-width:  calc(100vw - 12px);
        max-height: 92vh;
        overflow-y: auto;
    }

    .nf-pix-body {
        flex-direction: column;
        align-items:    center;
        gap:            14px;
    }

    .pix-qr-wrap {
        display:        flex;
        flex-direction: column;
        align-items:    center;
    }

    .pix-qr-canvas canvas,
    .pix-qr-canvas img {
        width:  180px !important;
        height: 180px !important;
    }

    .nf-pix-info-col { width: 100%; }

    .pix-copy-btn {
        width:     100%;
        padding:   12px;
        font-size: 12px;
    }

    .nf-pix-hint {
        font-size: 11px;
        line-height: 1.6;
    }

    .form-row { grid-template-columns: 1fr; }

    .confirm-btn {
        width:      100%;
        padding:    14px;
        font-size:  12px;
    }

    /* Nota fiscal mobile */
    .nf-wrap            { margin: 0; }
    .nf-cp-header-grid  { flex-direction: column; gap: 8px; }
    .nf-cp-nf-id        { text-align: left; }
    .nf-valor-row       { flex-wrap: wrap; }

    .nf-actions {
        flex-direction: column;
        gap:  8px;
    }
    .nf-download-btn,
    .nf-close-btn { width: 100%; padding: 12px; }
}

/* ══════════════════════════════════════════════
   PRODUTOS — MOBILE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Grid de cards: 1 coluna */
    .prod-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 4px;
    }

    .prod-panel       { padding: 0; }
    .prod-pagination  { flex-wrap: wrap; gap: 4px; padding: 8px 4px; }
    .prod-pg-btn      { font-size: 8px; padding: 6px 8px; }
    .prod-pg-prev,
    .prod-pg-next     { padding: 6px 10px; }

    .prod-cnae-hdr    { flex-direction: column; gap: 8px; padding: 10px 12px; }
    .prod-cnae-tags   { flex-wrap: wrap; gap: 4px; }

    .prod-card        { padding: 12px; }
    .prod-card-nome   { font-size: 13px; }
    .prod-card-preco  { font-size: 16px; }

    .prod-card-actions {
        flex-direction: column;
        gap: 8px;
    }
    .prod-card-btn {
        width:    100%;
        padding:  10px;
        font-size: 10px;
        text-align: center;
    }

    .prod-ai-btns  { flex-direction: column; gap: 8px; }
    .prod-ai-btn   { width: 100%; padding: 10px; }
}

/* ══════════════════════════════════════════════
   PAGAMENTOS PIX — MOBILE (painel admin)
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pay-stats-row { grid-template-columns: 1fr 1fr; }

    .pay-card-top  {
        flex-direction: column;
        gap:            10px;
    }

    .pay-card-side {
        display:        flex;
        flex-wrap:      wrap;
        gap:            8px;
        align-items:    center;
    }

    .pay-card-actions { flex-direction: column; gap: 8px; }

    .pay-btn {
        width:     100%;
        padding:   12px;
        font-size: 11px;
        text-align: center;
    }

    .pay-email-status { font-size: 10px; }
}

/* ══════════════════════════════════════════════
   TOPBAR — MOBILE
══════════════════════════════════════════════ */
@media (max-width: 480px) {
    .topbar {
        padding:     6px 10px;
        min-height:  0;
    }

    .logo         { font-size: 14px; letter-spacing: 1px; }
    .live-badge   { display: none; }
    .three-d-toggle-btn { display: none; }

    .signin-btn {
        padding:   7px 12px;
        font-size: 10px;
    }

    .clock { font-size: 10px; }
}

/* ══════════════════════════════════════════════
   PRODUTOS BAR — MOBILE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .produtos-bar {
        padding: 6px 10px;
    }

    .pb-stats-block {
        display: none;
    }

    .pb-tut-btn {
        font-size: 9px;
        padding:   5px 8px;
    }
}

/* ══════════════════════════════════════════════
   PAINEL DE PRODUTOS — TAB ATIVA NO MOBILE
   body[data-active-tab="produtos"] colapsa o
   canvas de rede para dar espaço ao painel.
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Esconde canvas quando a aba produtos está ativa */
    body[data-active-tab="produtos"] .netmap {
        height:        0 !important;
        min-height:    0 !important;
        overflow:      hidden;
        border-bottom: none;
        padding:       0;
        margin:        0;
    }

    /* Dá espaço total ao tab de produtos */
    body[data-active-tab="produtos"] #tab-produtos.visible {
        display:                  block;
        min-height:               calc(100dvh - 44px - 54px - 44px);
        overflow-y:               auto;
    }

    /* Remove padding extra do painel quando em fullscreen */
    body[data-active-tab="produtos"] .prod-panel {
        padding-top: 0;
    }

    /* Garante que o center-panel não limite a altura */
    body[data-active-tab="produtos"] .center-panel {
        overflow-y: auto;
    }
}