/* ==========================================================================
   Plataforma Prop5 Invest — casca de navegação
   --------------------------------------------------------------------------
   Este arquivo estiliza só a MOLDURA (barra lateral + palco). Cada ferramenta
   continua com seu próprio HTML/CSS/JS intactos, carregados em <iframe>: é
   documento independente, então nada aqui alcança o conteúdo interno, e nada
   do interno alcança isto. Foi escolha deliberada — as duas ferramentas têm
   classes de mesmo nome (.btn, .top-header, .app-container) tunadas cada uma
   para a sua tela, e uma folha de estilo só para as duas faria a cascata de
   uma pisar na outra.

   Paleta idêntica à das ferramentas (medida nos arquivos oficiais da marca):
   tinta #051824, ouro #FDBE1A. Ver Analise de Grupos Servopa/css/estilos.css
   para a nota completa de contraste.

   --------------------------------------------------------------------------
   TEMA ESCURO

   A casca tem os dois temas, ligados por `data-tema="escuro"` em <html>, e é
   ela que MANDA no tema das cinco ferramentas — o interruptor da barra lateral
   é o único da tela, porque js/tema.js esconde o das ferramentas assim que
   detecta que elas rodam embutidas.

   O que a casca NÃO consegue fazer é alcançar o conteúdo dos iframes por CSS:
   documento independente, escopo independente, é exatamente a propriedade que
   a nota do topo deste arquivo explica. Por isso a troca viaja por
   postMessage; ver js/tema.js.

   ISTO IMPORTA PARA O DESENHO, E NÃO SÓ PARA O CÓDIGO: entre a barra lateral
   escura e a ferramenta ainda clara existe um instante — o de uma mensagem
   atravessar o postMessage. Ele é curto e não pisca no meio do uso, porque
   quem decide o tema de cada ferramenta na ABERTURA é o script inline do <head>
   dela, e não a mensagem. A mensagem só corrige o caso em que os dois
   documentos não compartilham localStorage.

   O bloco escuro fica dentro de `@media screen` pela mesma razão das
   ferramentas: fora da tela ele não se aplica e a impressão sai clara.
   ========================================================================== */

:root {
  color-scheme: light;

  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  --brand: #051824;
  --brand-600: #0D3348;
  --brand-300: #5C7383;
  --brand-wash: #E3EAEF;
  --accent: #FDBE1A;
  --accent-wash: #FFF6DF;
  --accent-rule: #E9A800;

  --paper: #EDF1F4;
  --surface: #FFFFFF;
  --sunken: #F4F7F9;
  --rule: #D9E1E6;
  --rule-strong: #BCC8D0;

  --text: #051824;
  --text-muted: #4A5C68;
  --text-subtle: #5B6C77;

  /* O logotipo é PNG de UMA tinta escura, feito para fundo claro. Sobre o navy
     do tema escuro ele desapareceria; o filtro o achata em branco preservando
     o alfa, e evita carregar um segundo arquivo de marca. */
  --logo-filtro: none;

  --radius: 4px;
  --shadow-raised: 0 2px 6px rgba(5, 24, 36, 0.08);

  --t: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen {
  [data-tema="escuro"] {
    color-scheme: dark;

    --brand: #6FB4DC;
    --brand-600: #9BCDEC;
    --brand-300: #5A93B5;
    --brand-wash: #10354C;
    --accent: #FDBE1A;
    --accent-wash: #322D18;
    --accent-rule: #C9971C;

    --paper: #04121C;
    --surface: #0A2536;
    --sunken: #071D2A;
    --rule: #14344A;
    --rule-strong: #1F4A66;

    --text: #E9F1F7;
    --text-muted: #9DB4C6;
    --text-subtle: #8AA3B5;

    --logo-filtro: brightness(0) invert(1) opacity(0.92);

    --shadow-raised: 0 3px 12px rgba(0, 0, 0, 0.55);
  }
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- casca */

.portal-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.portal-sidebar {
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  transition: flex-basis var(--t);
}

.portal-sidebar.is-recolhido { flex: 0 0 64px; }

.sidebar-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--rule);
}

.sidebar-logo { width: 26px; height: 26px; flex: 0 0 auto; }

.sidebar-marca {
  flex: 1 1 auto;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--t);
}

.portal-sidebar.is-recolhido .sidebar-topo { justify-content: center; }
.portal-sidebar.is-recolhido .sidebar-marca { width: 0; opacity: 0; }

.sidebar-lista {
  list-style: none;
  flex: 1 1 auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.sidebar-item:hover { background: var(--sunken); color: var(--text); }

.sidebar-item[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--brand);
  font-weight: 600;
  border-left-color: var(--accent);
}

.sidebar-icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
}
.sidebar-icone svg { width: 100%; height: 100%; }

.sidebar-rotulo { overflow: hidden; }

.portal-sidebar.is-recolhido .sidebar-item { justify-content: center; padding-left: 8px; padding-right: 8px; }
.portal-sidebar.is-recolhido .sidebar-rotulo { width: 0; }

.sidebar-retrair {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-subtle);
  font: inherit;
  cursor: pointer;
}
.sidebar-retrair:hover { background: var(--sunken); color: var(--text); }

.sidebar-retrair .sidebar-icone { width: 16px; height: 16px; transition: transform var(--t); }
.portal-sidebar.is-recolhido .sidebar-retrair .sidebar-icone { transform: rotate(180deg); }

/* ------------------------------------------------- rodapé da barra lateral
   O interruptor de tema mora aqui, e não no topo junto da marca, por hierarquia:
   a barra lateral existe para trocar de FERRAMENTA, e um sexto item com o mesmo
   peso dos cinco disputaria a leitura da lista. Abaixo do filete ele lê como o
   que é — ajuste da janela, não destino.

   Reusa a caixa de .sidebar-item de propósito: retrai junto com a barra, o
   rótulo some no mesmo movimento e o ícone fica centrado sem regra própria.
   ------------------------------------------------------------------------ */

.sidebar-rodape {
  flex: 0 0 auto;
  padding: 8px;
  border-top: 1px solid var(--rule);
}

.tema-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}

.tema-item:hover { background: var(--sunken); color: var(--text); }
.tema-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.tema-item .sidebar-icone { width: 20px; height: 20px; }

.portal-sidebar.is-recolhido .tema-item { justify-content: center; padding-left: 8px; padding-right: 8px; }
.portal-sidebar.is-recolhido .tema-rotulo-visivel { width: 0; overflow: hidden; }

.tema-rotulo-visivel { overflow: hidden; }

/* Os dois glifos moram juntos no HTML e o CSS esconde um, em vez de o JS trocar
   o desenho: o botão continua correto se o script falhar, e não há quadro em
   que o ícone esteja vazio. Quem manda no estado é `data-tema` em <html> — a
   mesma fonte da verdade que pinta a página, então não existe caminho em que o
   sol apareça com a tela clara. */
.tema-icone { display: none; }
.tema-icone-lua { display: flex; }
[data-tema="escuro"] .tema-icone-lua { display: none; }
[data-tema="escuro"] .tema-icone-sol { display: flex; }

/* O ouro do interruptor fica preso a `@media screen` pela mesma razao que os
   tokens: fora da tela `--accent` volta a ser #FDBE1A sobre branco, que da
   1,7:1 e e justamente o uso que a nota de marca proibe. E o rodape inteiro
   sai da folha logo abaixo — no papel nao ha o que alternar. */
@media screen {
  [data-tema="escuro"] .tema-item { color: var(--accent); }
  [data-tema="escuro"] .tema-item:hover { background: var(--sunken); color: var(--accent); }
}

@media print {
  .sidebar-rodape { display: none !important; }
}

/* Marca de uma tinta só: sobre o navy do tema escuro ela sumiria. */
.sidebar-logo { filter: var(--logo-filtro); }

.portal-palco {
  flex: 1 1 auto;
  position: relative;
  /* O palco fica visível por um instante enquanto o iframe carrega. Sem cor
     própria ele seria branco no tema escuro — um lampejo de tela cheia a cada
     primeira abertura de ferramenta. */
  background: var(--paper);
}

.portal-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .portal-sidebar, .sidebar-item, .sidebar-marca, .sidebar-retrair .sidebar-icone {
    transition: none;
  }
}