/* =============================================================================
   plataforma/css/tema-iatur-shell.css — Tema IATUR, parte 2: shell e componentes.
   Carregado depois de tema-iatur.css (tokens). Mesmo interruptor:
   html[data-tema="iatur"]. Ver o cabeçalho de tema-iatur.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   3. Shell: sidebar flutuante + topbar na coluna do conteúdo
--------------------------------------------------------------------------- */
html[data-tema="iatur"] .agx-shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
  padding: 16px 24px 16px 16px;
  min-height: 100dvh;
}
/* Sem largura máxima no shell (o protótipo centralizava em 1500px, o que numa
   tela larga deixava uma margem grande à esquerda da sidebar — achado do Pedro
   em 07/11). A sidebar encosta à esquerda; só o conteúdo tem largura máxima. */
html[data-tema="iatur"] .agx-shell-corpo { display: contents; }
html[data-tema="iatur"] .agx-shell.agx-sidebar--recolhida { grid-template-columns: 76px minmax(0, 1fr); }

/* standalone (login, recuperar senha, primeiro acesso): volta ao fluxo simples */
html[data-tema="iatur"] .agx-shell--standalone {
  display: block;
  padding: 0;
  max-width: none;
}
html[data-tema="iatur"] .agx-shell--standalone .agx-shell-corpo { display: grid; }
html[data-tema="iatur"] .agx-shell--standalone .agx-conteudo {
  grid-column: auto;
  grid-row: auto;
  max-width: var(--agx-container);
  /* centraliza o miolo das telas sem menu (entrar, esqueci a senha…):
     o .agx-conteudo geral zera a margem para encostar no menu */
  margin: 0 auto;
  padding: 36px 32px 72px;
}
html[data-tema="iatur"] .agx-topo-standalone {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* sidebar: painel */
html[data-tema="iatur"] .agx-sidebar {
  grid-column: 1;
  grid-row: 1 / span 2;
  top: 16px;
  height: calc(100dvh - 32px);
  gap: 2px;
  padding: 22px 16px 16px;
  background: var(--iatur-card);
  border: 1px solid var(--iatur-line);
  border-radius: 22px;
  box-shadow: var(--iatur-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scrollbar-width: none;
}
html[data-tema="iatur"] .agx-sidebar::-webkit-scrollbar { display: none; }
html[data-tema="iatur"] .agx-sidebar-nav { gap: 2px; }
/* no esquema claro a sidebar continua navy (tone-b do protótipo) */
html[data-tema="iatur"][data-esquema="claro"] .agx-sidebar,
html[data-tema="iatur"][data-esquema="claro"] .agx-drawer {
  --iatur-card: #0B1534;
  --iatur-text: #FFFFFF;
  --iatur-text-3: #C5CEE6;
  --iatur-muted: #93A1C2;
  --iatur-accent: #8DB3FF;
  --iatur-line: rgba(255, 255, 255, 0.08);
  --iatur-inset: rgba(255, 255, 255, 0.06);
  --iatur-inset-line: rgba(255, 255, 255, 0.1);
  --iatur-act: rgba(37, 99, 235, 0.35);
  --iatur-ink: 255, 255, 255;
  --iatur-shadow: 0 14px 34px -10px rgba(11, 21, 52, 0.35);
  color-scheme: dark;
}

/* o <main> recebe foco programático a cada navegação: sem anel aqui */
html[data-tema="iatur"] .agx-conteudo:focus,
html[data-tema="iatur"] .agx-conteudo:focus-visible { outline: none; }

/* logo de texto no topo da sidebar (só existe neste tema; agx.css esconde).
   Decisão do Arthur (07/11): "IATUR | PLATAFORMA" em texto, sem o logo neon. */
html[data-tema="iatur"] .agx-sidebar-marca {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 2px 8px 18px;
  text-decoration: none;
  color: var(--iatur-text);
}
html[data-tema="iatur"] .agx-sidebar-marca-texto { display: flex; align-items: baseline; gap: 10px; line-height: 1; }
html[data-tema="iatur"] .agx-sidebar-marca-tur { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
html[data-tema="iatur"] .agx-sidebar-marca-sep { font-size: 20px; font-weight: 300; color: var(--iatur-line); opacity: 0.9; }
html[data-tema="iatur"] .agx-sidebar-marca-pl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--iatur-accent);
}
html[data-tema="iatur"] .agx-sidebar-marca-curta { display: none; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
html[data-tema="iatur"] .agx-sidebar--recolhida .agx-sidebar-marca { justify-content: center; padding-left: 0; padding-right: 0; }
html[data-tema="iatur"] .agx-sidebar--recolhida .agx-sidebar-marca-texto { display: none; }
html[data-tema="iatur"] .agx-sidebar--recolhida .agx-sidebar-marca-curta { display: inline; }

html[data-tema="iatur"] .agx-sidebar-grupo { margin-bottom: 10px; }
html[data-tema="iatur"] .agx-sidebar-rotulo {
  margin: 4px 0 6px 12px;
  font-family: var(--agx-font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--iatur-accent);
  opacity: 0.85;
}
html[data-tema="iatur"] .agx-sidebar-item,
html[data-tema="iatur"] .agx-sidebar-recolher {
  position: relative;
  gap: 12px;
  padding: 7px 10px 7px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--iatur-text);
  opacity: 0.75;
}
html[data-tema="iatur"] .agx-sidebar-item:hover,
html[data-tema="iatur"] .agx-sidebar-recolher:hover {
  background: var(--iatur-inset);
  color: var(--iatur-text);
  opacity: 1;
}
html[data-tema="iatur"] .agx-sidebar-item[aria-current="page"],
html[data-tema="iatur"] .agx-sidebar-item.ativo {
  opacity: 1;
  font-weight: 600;
  color: var(--iatur-text);
  background: var(--iatur-act);
  box-shadow: inset 0 0 0 1px rgba(91, 147, 255, 0.35);
}
html[data-tema="iatur"] .agx-sidebar-item.ativo .agx-icone { color: var(--iatur-accent); }
html[data-tema="iatur"] .agx-sidebar-item.ativo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--iatur-accent);
}
html[data-tema="iatur"] .agx-sidebar--recolhida .agx-sidebar-item,
html[data-tema="iatur"] .agx-sidebar--recolhida .agx-sidebar-recolher { padding: 9px; }

/* topbar: enxuta, sem marca no desktop (a marca está na sidebar) */
html[data-tema="iatur"] .agx-topo {
  grid-column: 2;
  grid-row: 1;
  top: 0;
  margin: -16px 0 0;
  padding-top: 16px;
  background: color-mix(in srgb, var(--iatur-bg1) 84%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0;
  box-shadow: none;
}
html[data-tema="iatur"] .agx-topo .topo-inner { max-width: none; padding: 10px 4px 14px; }
html[data-tema="iatur"] .agx-topo .marca { display: none; }
html[data-tema="iatur"] .agx-busca-gatilho,
html[data-tema="iatur"] .agx-chip-usuario,
html[data-tema="iatur"] .agx-btn-icone {
  background: var(--iatur-inset);
  border: 1px solid var(--iatur-inset-line);
  color: var(--iatur-text-3);
  box-shadow: none;
}
html[data-tema="iatur"] .agx-busca-gatilho { padding: 10px 14px 10px 16px; min-width: 240px; }
html[data-tema="iatur"] .agx-busca-gatilho:hover,
html[data-tema="iatur"] .agx-chip-usuario:hover,
html[data-tema="iatur"] .agx-btn-icone:hover {
  background: var(--iatur-act);
  border-color: rgba(91, 147, 255, 0.35);
  color: var(--iatur-text);
  box-shadow: none;
}
html[data-tema="iatur"] .agx-kbd { background: var(--iatur-inset); border-color: var(--iatur-inset-line); box-shadow: none; }
html[data-tema="iatur"] .agx-badge-num { box-shadow: 0 0 0 2px var(--iatur-card); }

html[data-tema="iatur"] .agx-conteudo {
  grid-column: 2;
  grid-row: 2;
  max-width: var(--agx-container);
  margin: 0;
  padding: 16px 4px 80px;
}
html[data-tema="iatur"] .agx-topo .topo-inner { max-width: var(--agx-container); margin: 0; }

/* drawer (celular) */
html[data-tema="iatur"] .agx-drawer { background: var(--iatur-card); border-right-color: var(--iatur-line); }

@media (max-width: 959px) {
  html[data-tema="iatur"] .agx-shell,
  html[data-tema="iatur"] .agx-shell.agx-sidebar--recolhida {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  html[data-tema="iatur"] .agx-topo {
    grid-column: 1;
    margin: 0;
    padding-top: 0;
    background: color-mix(in srgb, var(--iatur-card) 92%, transparent);
    border-bottom: 1px solid var(--iatur-line);
  }
  html[data-tema="iatur"] .agx-topo .topo-inner { padding: 12px 16px; }
  html[data-tema="iatur"] .agx-topo .marca { display: inline-flex; }
  html[data-tema="iatur"] .agx-busca-gatilho { min-width: 0; }
  /* tablet (600–959 px): a busca vira só a lupa, senão a fileira do topo
     (menu, marca, busca, sino, tema, usuário) passava ~6 px da tela a 768 px */
  html[data-tema="iatur"] .agx-busca-gatilho-texto,
  html[data-tema="iatur"] .agx-busca-gatilho .agx-kbd { display: none; }
  html[data-tema="iatur"] .agx-busca-gatilho { padding: 10px; }
  html[data-tema="iatur"] .agx-conteudo { grid-column: 1; padding: 24px 16px 72px; }
}
/* telas muito estreitas: a topbar não cabe 5 controles; a troca de esquema
   continua no menu do usuário */
@media (max-width: 379px) {
  html[data-tema="iatur"] .agx-btn-esquema { display: none; }
}

/* ---------------------------------------------------------------------------
   4. Componentes: onde o token não alcança
--------------------------------------------------------------------------- */
html[data-tema="iatur"] .card,
html[data-tema="iatur"] .agx-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-tema="iatur"] .agx-btn--primario { background: var(--iatur-primary); }
html[data-tema="iatur"] .agx-btn--primario:hover { background: var(--iatur-primary-2); }
/* botão primário dentro de cartões de destaque (azul/navy): branco com texto navy */
html[data-tema="iatur"] .hero .agx-btn--primario,
html[data-tema="iatur"] .agx-aluno-hero-curso .agx-btn--primario,
html[data-tema="iatur"] .agx-aluno-conta-hero .agx-btn--primario,
html[data-tema="iatur"] .agx-ia-destaque--escuro .agx-btn--primario {
  background: #FFFFFF;
  color: #0B1534;
  box-shadow: none;
}
html[data-tema="iatur"] .hero .agx-btn--primario:hover,
html[data-tema="iatur"] .agx-aluno-hero-curso .agx-btn--primario:hover,
html[data-tema="iatur"] .agx-aluno-conta-hero .agx-btn--primario:hover,
html[data-tema="iatur"] .agx-ia-destaque--escuro .agx-btn--primario:hover { background: #EEF2FF; color: #0B1534; }
html[data-tema="iatur"] .agx-player { background: #050B1E; border-color: var(--iatur-line); }
html[data-tema="iatur"] .agx-btn--secundario {
  background: var(--iatur-inset);
  border: 1px solid var(--iatur-inset-line);
  color: var(--iatur-text);
}
html[data-tema="iatur"] .agx-btn--secundario:hover { background: var(--iatur-act); border-color: rgba(91, 147, 255, 0.35); }
html[data-tema="iatur"] .agx-campo-controle {
  background: var(--iatur-inset);
  border-color: var(--iatur-inset-line);
  color: var(--iatur-text);
}
html[data-tema="iatur"] .agx-campo-controle:focus { border-color: rgba(91, 147, 255, 0.6); background: var(--iatur-card); }
html[data-tema="iatur"] .agx-campo-controle::placeholder { color: var(--iatur-muted); }
html[data-tema="iatur"] .agx-campo-select::after { color: var(--iatur-muted); }
html[data-tema="iatur"] .eyebrow,
html[data-tema="iatur"] .agx-eyebrow { color: var(--iatur-accent); }
/* sobre o gradiente azul dos heros o accent (#5B93FF) dá 1,7:1 — vai a branco */
html[data-tema="iatur"] .hero .eyebrow,
html[data-tema="iatur"] .agx-aluno-hero-curso .eyebrow,
html[data-tema="iatur"] .agx-aluno-conta-hero .eyebrow,
html[data-tema="iatur"] .agx-ia-destaque--escuro .eyebrow,
html[data-tema="iatur"] .agx-ia-destaque--escuro .agx-eyebrow { color: rgba(255, 255, 255, 0.78); }
/* Inter é mais larga que a Geist: a 320 px o texto da LGPD precisa poder
   quebrar palavra (achado da suíte E2E, onboarding-ui-completo) */
html[data-tema="iatur"] .agx-aluno-bloco-lgpd .agx-radio span,
html[data-tema="iatur"] .agx-aluno-radios .agx-radio span {
  hyphens: auto;
  overflow-wrap: anywhere;
}
html[data-tema="iatur"] .agx-ia-aviso {
  background: rgba(245, 184, 61, 0.12);
  border-color: rgba(245, 184, 61, 0.4);
  color: var(--iatur-text-2);
}
html[data-tema="iatur"] .callout-atencao,
html[data-tema="iatur"] .callout-dica { color: var(--iatur-text-2); }

/* código, prompts e atalhos continuam monoespaçados */
html[data-tema="iatur"] code,
html[data-tema="iatur"] pre,
html[data-tema="iatur"] kbd,
html[data-tema="iatur"] .bloco-codigo,
html[data-tema="iatur"] .agx-kbd,
html[data-tema="iatur"] textarea.agx-campo-controle--codigo {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
}
/* rótulos pequenos em caixa alta: espaçamento do protótipo, não o do mono */
html[data-tema="iatur"] .eyebrow,
html[data-tema="iatur"] .agx-sidebar-rotulo,
html[data-tema="iatur"] .agx-campo-rotulo,
html[data-tema="iatur"] .indice-titulo { letter-spacing: 0.08em; font-weight: 600; }