/* ═══════════════════════════════════════════════════════════════════
   PAINEL · identidade Magnus Mídias · claro e escuro
   Tokens: magnus/branding/design-system/tokens/
   Implementação de referência: int-infra/lp-magnus

   ⭐⭐ A REGRA QUE ORGANIZA OS DOIS TEMAS, e ela é da marca:
      "alto contraste em DOIS NÍVEIS: off-white e navy". Não há terceiro.
      ⚪ Cada tema é o outro espelhado: a MESMA tinta em translucidez,
        invertida. É por isso que "nunca cinza puro" funciona nos dois.

   🔴 E O QUE TEMA NÃO É: inverter o fundo.
      As cores de estado que passam AAA sobre navy REPROVAM sobre
      off-white — o verde cai de 11,48:1 para 1,61:1. Medido, não
      suposto. Por isso elas têm valor PRÓPRIO em cada tema, escurecido
      mantendo o matiz para a cor continuar reconhecível.
   ═══════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap");

:root{
  /* --- a paleta da marca, que não muda --- */
  --navy:#00002B; --navy-alt:#0A0A33; --navy-fundo:#000018;
  --off-white:#F4F4F9; --off-white-alt:#EAEAF2;

  --r-sm:6px; --r-md:12px; --r-lg:24px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --t-hover:200ms; --t-card:300ms;
  --w-lateral:230px; --h-topo:73px;
}

/* ══ TEMA CLARO ══ navy sobre off-white ═══════════════════════════ */
:root, [data-tema="claro"]{
  --bg:var(--off-white);
  --bg-alt:var(--off-white-alt);
  --lateral-bg:#FFFFFF;
  --superficie:#FFFFFF;
  --campo:var(--off-white-alt);
  --tinta:var(--navy);
  --tinta-70:rgba(0,0,43,.70);
  --tinta-55:rgba(0,0,43,.55);
  --linha:rgba(0,0,43,.10);
  --borda:rgba(0,0,43,.12);
  --borda-forte:rgba(0,0,43,.30);
  --sombra:0 20px 40px -20px rgba(0,0,43,.22);
  --btn-bg:var(--navy); --btn-tinta:var(--off-white);
  --borda-lateral:rgba(0,0,43,.12);
  --lateral-hover:var(--off-white-alt);
  /* 🔴 estado, recalculado para fundo CLARO · todos ≥ 4,5:1 */
  --bom:#177E51; --ruim:#E00000; --alerta:#946700;
  --bom-fundo:rgba(23,126,81,.10);
  --ruim-fundo:rgba(224,0,0,.10);
  --alerta-fundo:rgba(148,103,0,.12);
  /* ⭐ a rosca precisa de tinta ESCURA no claro, senão some no fundo */
  --grafico:var(--navy);
}

/* ══ TEMA ESCURO ══ off-white sobre navy ══════════════════════════ */
[data-tema="escuro"]{
  /* 🔴 O canvas é MAIS ESCURO que o navy e a lateral é MAIS AZUL, ao
     contrário do que estava. Pedido do Cristian, e ele tem razão: no
     desenho antigo a lateral era a superfície mais escura da tela, e
     ela é justamente a que fica sempre visível.
     ⚪ Invertido, a lateral ganha presença e o conteúdo recua.

     ⚠️ E a inversão exigiu recalcular tudo: a lateral clareou, então a
     tinta sobre ela perde contraste. Medido: 15,82:1 no cheio, 8,17:1
     em 70% e 5,50:1 em 55%. Todos passam. */
  --bg:#000014;
  --bg-alt:#080820;
  --lateral-bg:#0D1642;
  --superficie:rgba(244,244,249,.05);
  --campo:#000010;
  /* ⭐ a borda na lateral precisa ser MAIS forte que no canvas: sobre
     superfície clara, translúcido a 14% quase some */
  --borda-lateral:rgba(244,244,249,.20);
  /* 🔴 no escuro o hover da lateral NÃO pode ser --bg-alt: a lateral
     agora é mais CLARA que o canvas, e o hover viraria um buraco. */
  --lateral-hover:rgba(244,244,249,.09);
  --tinta:var(--off-white);
  --tinta-70:rgba(244,244,249,.70);
  --tinta-55:rgba(244,244,249,.55);
  --linha:rgba(244,244,249,.10);
  --borda:rgba(244,244,249,.14);
  --borda-forte:rgba(244,244,249,.30);
  --sombra:0 20px 40px -20px rgba(0,0,0,.55);
  --btn-bg:var(--off-white); --btn-tinta:var(--navy);
  --bom:#3DDC97; --ruim:#FF6B6B; --alerta:#FFD166;
  --bom-fundo:rgba(61,220,151,.14);
  --ruim-fundo:rgba(255,107,107,.14);
  --alerta-fundo:rgba(255,209,102,.14);
  --grafico:var(--off-white);
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tinta);
     font-family:Sora,-apple-system,BlinkMacSystemFont,sans-serif;
     font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;
     transition:background var(--t-card) var(--ease),color var(--t-card) var(--ease)}

/* ══ porta ══ */
.porta{max-width:420px;margin:90px auto;padding:32px;background:var(--superficie);
       border:1px solid var(--borda);border-radius:var(--r-lg);text-align:center;
       box-shadow:var(--sombra)}
.porta h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.porta p{color:var(--tinta-55);font-size:.875rem;margin-bottom:20px}
.porta input{width:100%;padding:13px;margin-bottom:12px;background:var(--campo);
             border:1px solid var(--borda);border-radius:var(--r-sm);color:var(--tinta);
             font-family:inherit;font-size:1rem}
.porta input:focus{outline:none;border-color:var(--borda-forte)}
.erro{color:var(--ruim);font-size:.875rem;margin-top:12px}

/* ══ estrutura ══ */
.app{display:flex;min-height:100vh}
.lateral{width:var(--w-lateral);flex-shrink:0;background:var(--lateral-bg);
         border-right:1px solid var(--borda-lateral);display:flex;flex-direction:column;
         position:fixed;top:0;bottom:0;left:0;z-index:20}
/* ⭐⭐ A LINHA DO CABEÇALHO É UMA SÓ, atravessando lateral e conteúdo.
   ⚪ Antes cada lado tinha o próprio padding e as bordas caíam em alturas
     diferentes, o que se vê na hora: parece um degrau.
   🔴 Altura FIXA nos dois, e não padding, porque padding depende do que
     está dentro e o conteúdo dos dois lados é diferente. */
.logo{display:flex;align-items:center;gap:11px;padding:0 20px;
      height:var(--h-topo);border-bottom:1px solid var(--borda-lateral)}
.logo-marca{width:30px;height:auto;flex-shrink:0}
/* ⭐ a variante se escolhe pelo CONTRASTE com o fundo, não por gosto:
   fundo claro pede logo escuro, fundo navy pede logo claro. */
.so-escuro{display:none}
[data-tema="escuro"] .so-claro{display:none}
[data-tema="escuro"] .so-escuro{display:block}
.logo-txt{display:flex;flex-direction:column;line-height:1.2}
.nome{font-weight:600;font-size:.9375rem;letter-spacing:-.02em}
.sub{font-size:.75rem;color:var(--tinta-55)}

.nav{flex:1;overflow-y:auto;padding:16px 12px}
.grupo{display:block;font-size:.75rem;text-transform:uppercase;opacity:.55;
       letter-spacing:.18em;padding:16px 10px 7px;font-weight:600}
.link{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:0;
      color:var(--tinta-70);padding:10px;border-radius:var(--r-sm);cursor:pointer;
      font-family:inherit;font-size:.9375rem;text-align:left;
      transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
/* ⭐ ícone em SVG de traço, no mesmo peso da tipografia. `currentColor`
   faz ele herdar a cor do link, então ativo e inativo funcionam sem
   uma segunda regra, e o tema troca junto sem tocar em nada. */
.link svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;
          stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.link.ativa svg{opacity:1}
.link:hover{background:var(--lateral-hover);color:var(--tinta)}
.link.ativa{background:var(--btn-bg);color:var(--btn-tinta);font-weight:600}
.rodape-lateral{padding:12px;border-top:1px solid var(--borda-lateral);display:flex;flex-direction:column;gap:4px}
.sair:hover{color:var(--ruim);background:var(--ruim-fundo)}

.conteudo{flex:1;margin-left:var(--w-lateral);min-width:0}
.topo{display:flex;align-items:center;gap:14px;padding:0 24px;height:var(--h-topo);
      border-bottom:1px solid var(--borda);position:sticky;top:0;background:var(--bg);z-index:10}
.topo h1{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;flex:1}
.btn-menu{display:none;background:transparent;border:0;color:var(--tinta);font-size:1.25rem;cursor:pointer}
.acoes{display:flex;align-items:center;gap:12px}
.carimbo{color:var(--tinta-55);font-size:.875rem}

.btn{background:var(--btn-bg);color:var(--btn-tinta);border:1px solid transparent;
     border-radius:var(--r-pill);padding:11px 22px;font-weight:600;font-size:.9rem;
     letter-spacing:-.01em;cursor:pointer;font-family:inherit;
     transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra)}

/* ⭐ o seletor de tema: um botão-ícone, sem texto, ao lado de Atualizar */
.btn-tema{background:transparent;border:1px solid var(--borda);color:var(--tinta-70);
          border-radius:var(--r-pill);width:38px;height:38px;cursor:pointer;font-size:1rem;
          display:grid;place-items:center;
          transition:all var(--t-hover) var(--ease)}
.btn-tema:hover{border-color:var(--borda-forte);color:var(--tinta);transform:translateY(-2px)}

.filtros{display:flex;align-items:flex-end;gap:16px;padding:16px 24px;
         border-bottom:1px solid var(--borda);flex-wrap:wrap;background:var(--bg-alt)}
.filtros label{display:flex;flex-direction:column;gap:6px;font-size:.75rem;opacity:.55;
               text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.filtros select{background:var(--superficie);border:1px solid var(--borda);color:var(--tinta);
                border-radius:var(--r-sm);padding:9px 12px;font-family:inherit;font-size:.9375rem;
                text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer;
                min-width:180px;opacity:1}
.filtros select:hover{border-color:var(--borda-forte)}
.intervalo{color:var(--tinta-55);font-size:.8125rem;padding-bottom:10px}

.pagina{display:none}
.pagina.ativa{display:block}

/* ══ a grade contínua · gap de 1px, o fundo vira a linha ══ */
/* 🔴 O VÃO DA ÚLTIMA LINHA, e a primeira tentativa foi PIOR que o problema.
   ⚪ Com `background` de linha no container, a sobra da última linha ficava
     cinza e virava uma faixa vazia destacada — mais feia que o buraco.

   ⭐ A técnica que resolve: o container tem a cor do CARTÃO, e a linha
   divisória vem de `outline` em cada um. Outline não ocupa espaço, então
   ela pinta dentro do gap de 1px e some onde não há cartão.
   ⚪ Resultado: grade contínua, e sobra invisível. */
.cartoes{display:grid;gap:1px;margin:24px;background:var(--bg);
         border:1px solid var(--linha);border-radius:var(--r-md);overflow:hidden;
         grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cartao{background:var(--bg);padding:24px 22px;outline:1px solid var(--linha);
        transition:background var(--t-card) var(--ease)}
.cartao:hover{background:var(--bg-alt)}
/* ⭐ valor primeiro, rótulo depois: quem varre um painel lê o número */
.cartao .num{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.03em;
             line-height:1;white-space:nowrap}
.cartao .rot{font-weight:600;font-size:.875rem;line-height:1.4;margin-top:.75rem;letter-spacing:-.01em}
.cartao .pe{font-size:.8125rem;color:var(--tinta-55);margin-top:.375rem;line-height:1.5}
.cartao.destaque{background:var(--bg-alt)}
.num.bom{color:var(--bom)} .num.ruim{color:var(--ruim)} .num.alerta{color:var(--alerta)}

/* ══ blocos ══ */
.bloco{margin:24px;background:var(--superficie);border:1px solid var(--borda);
       border-radius:var(--r-lg);overflow:hidden}
.bloco h2{font-size:.9375rem;padding:17px 20px;border-bottom:1px solid var(--borda);
          font-weight:600;letter-spacing:-.02em}
.bloco h2 small{display:block;color:var(--tinta-55);font-size:.8125rem;font-weight:400;
                margin-top:4px;letter-spacing:0}
.faixa{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.faixa .bloco{margin:24px 12px}
.faixa .bloco:first-child{margin-left:24px}
.faixa .bloco:last-child{margin-right:24px}

.tabela-alvo{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.875rem}
/* 🔴 o min-width só vale para tabela LARGA. Nos blocos de 3 colunas ele
   forçava rolagem sem necessidade. */
.tabela-alvo table{min-width:0}
.bloco:not(.faixa .bloco) .tabela-alvo table{min-width:520px}
th{text-align:left;padding:12px 16px;font-size:.75rem;opacity:.55;
   text-transform:uppercase;letter-spacing:.18em;font-weight:600;
   border-bottom:1px solid var(--borda);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--linha);white-space:nowrap}
/* ⭐ o nome do produto PODE quebrar: cortar nome é pior que duas linhas */
td:first-child{white-space:normal;word-break:break-word}
tr:last-child td{border-bottom:0}
.dir{text-align:right}
.vazio{padding:30px 20px;color:var(--tinta-55);text-align:center;font-size:.875rem}

.abas{display:flex;gap:6px;padding:14px 16px;border-bottom:1px solid var(--borda)}
.aba{background:transparent;border:1px solid var(--borda);color:var(--tinta-70);
     border-radius:var(--r-pill);padding:8px 17px;cursor:pointer;font-family:inherit;
     font-size:.8125rem;transition:all var(--t-hover) var(--ease)}
.aba:hover{border-color:var(--borda-forte);color:var(--tinta)}
.aba.ativa{background:var(--btn-bg);color:var(--btn-tinta);border-color:var(--btn-bg);font-weight:600}

.marca{display:inline-block;padding:3px 11px;border-radius:var(--r-pill);
       font-size:.75rem;font-weight:600}
.m-aprovada{background:var(--bom-fundo);color:var(--bom)}
.m-pendente{background:var(--alerta-fundo);color:var(--alerta)}
.m-perdida{background:var(--ruim-fundo);color:var(--ruim)}

.aviso{padding:18px 20px;font-size:.8125rem;color:var(--tinta-70);line-height:1.65}
.aviso code{background:var(--campo);padding:2px 7px;border-radius:var(--r-sm);font-size:.75rem}
.form{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--borda);flex-wrap:wrap}
.form input{flex:1;min-width:110px;background:var(--campo);border:1px solid var(--borda);
            border-radius:var(--r-sm);padding:10px 12px;color:var(--tinta);
            font-family:inherit;font-size:.875rem}
.form input:focus{outline:none;border-color:var(--borda-forte)}
.editavel{background:var(--campo);border:1px solid var(--borda);border-radius:var(--r-sm);
          padding:6px 10px;color:var(--tinta);font-family:inherit;font-size:.8125rem;
          width:96px;text-align:right}
.mini{background:transparent;border:1px solid var(--borda);color:var(--tinta-55);
      border-radius:var(--r-pill);padding:5px 12px;cursor:pointer;font-family:inherit;
      font-size:.75rem;transition:all var(--t-hover) var(--ease)}
.mini:hover{color:var(--ruim);border-color:var(--ruim)}

/* ══ curva, rosca e anéis ══ */
.curva-alvo{padding:24px 20px}
.curva{display:flex;align-items:flex-end;gap:7px;height:200px;margin-bottom:12px}
.barra{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.barra .haste{background:var(--grafico);border-radius:var(--r-sm) var(--r-sm) 0 0;min-height:3px}
.barra.queda .haste{background:var(--ruim)}
.barra .valor{font-size:.75rem;text-align:center;margin-bottom:6px;font-weight:600}
.barra .eixo{font-size:.6875rem;color:var(--tinta-55);text-align:center;margin-top:8px}
.legenda{font-size:.8125rem;color:var(--tinta-55);text-align:center;padding-top:10px;
         border-top:1px solid var(--borda)}

.rosca-alvo{padding:20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center}
.rosca-svg{flex-shrink:0}
.rosca-legenda{display:flex;flex-direction:column;gap:8px;font-size:.875rem}
.rosca-legenda span{display:flex;align-items:center;gap:9px;color:var(--tinta-70)}
.rosca-legenda b{color:var(--tinta);font-weight:600}
.ponto{width:9px;height:9px;border-radius:var(--r-pill);flex-shrink:0}

.aneis{display:flex;gap:30px;padding:24px 20px;flex-wrap:wrap}
.anel{display:flex;align-items:center;gap:13px}
.anel-txt{display:flex;flex-direction:column}
.anel-txt b{font-size:1rem;font-weight:700;letter-spacing:-.02em}
.anel-txt small{color:var(--tinta-55);font-size:.75rem}

@media (max-width:820px){
  .lateral{transform:translateX(-100%);transition:transform var(--t-card) var(--ease);
           box-shadow:var(--sombra)}
  .lateral.aberta{transform:translateX(0)}
  .conteudo{margin-left:0}
  .btn-menu{display:block}
  .cartoes{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin:16px}
  .cartao{padding:18px 16px}
  .bloco,.faixa .bloco{margin:18px 16px}
  .filtros select{min-width:145px}
}