/* Exordial Marketing — tema do painel.
   Mesma identidade do portal Exordial Jurisprudência: azul-tinta + dourado,
   claro por padrão, escuro em html.tema-escuro. Superfícies nomeadas
   (página → cartão → bloco → campo). Inter no corpo, Fraunces nos títulos. */
@import url("fonts.css");

:root {
  --background: 0 0% 100%;
  --foreground: 210 4% 13%;
  --card: 0 0% 100%;
  --primary: 211 54% 23%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 20% 96%;
  --muted: 210 20% 96%;
  --muted-foreground: 215 16% 38%;
  --accent: 210 20% 96%;
  --destructive: 0 70% 45%;
  --success: 161 42% 30%;
  --border: 213 20% 90%;
  --input: 213 20% 88%;
  --ring: 211 54% 30%;
  --radius: 0.5rem;
  --gold: 36 38% 50%;
  --gold-light: 38 44% 62%;
  --action: 35 41% 62%;
  --action-foreground: 225 44% 14%;
  --surface-0: 210 22% 98%;
  --surface-1: 0 0% 100%;
  --surface-2: 210 20% 97%;
  --surface-3: 210 20% 94%;
  --sidebar-background: 210 22% 98%;
  --sidebar-foreground: 215 16% 38%;
  --sidebar-primary: 211 54% 23%;
  --sidebar-accent: 210 20% 94%;
  --sidebar-accent-foreground: 211 54% 23%;
  --sidebar-border: 213 20% 90%;
  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  /* dados (paleta validada: ver README) */
  --series-1: #2A6AB8;
  --series-2: #C9892A;
  --series-3: #13866A;
  --series-muted: #B5BFCB;
  --series-muted-2: #D6DDE5;
  --ord-1: #8FB0D2; --ord-2: #6A93BF; --ord-3: #4A76A8; --ord-4: #2E5A8C; --ord-5: #1B3A5A;
  --status-good: #2D6E5A;
  --status-warn: #A4741A;
  --status-bad: #B32D2D;
  --viz-grid: hsl(213 20% 92%);
  --viz-axis: hsl(213 16% 80%);
  --viz-ink: hsl(215 16% 38%);
  --viz-ink-muted: hsl(215 12% 55%);
  --viz-surface: #ffffff;

  color-scheme: light;
}

html.tema-escuro {
  --background: 211 42% 7%;
  --foreground: 210 22% 94%;
  --card: 211 34% 10%;
  --primary: 205 60% 63%;
  --primary-foreground: 211 52% 9%;
  --secondary: 211 30% 17%;
  --muted: 211 28% 15%;
  --muted-foreground: 214 15% 64%;
  --accent: 211 28% 16%;
  --destructive: 0 62% 56%;
  --success: 161 48% 55%;
  --border: 211 22% 20%;
  --input: 211 22% 22%;
  --ring: 205 60% 55%;
  --gold: 38 48% 62%;
  --gold-light: 38 52% 72%;
  --action: 35 45% 66%;
  --action-foreground: 225 44% 14%;
  --surface-0: 211 42% 7%;
  --surface-1: 211 34% 10%;
  --surface-2: 211 30% 13%;
  --surface-3: 211 28% 16%;
  --sidebar-background: 211 40% 9%;
  --sidebar-foreground: 214 15% 70%;
  --sidebar-primary: 205 60% 63%;
  --sidebar-accent: 211 30% 14%;
  --sidebar-accent-foreground: 210 22% 94%;
  --sidebar-border: 211 22% 18%;
  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4);

  --series-1: #3D86C4;
  --series-2: #B8862F;
  --series-3: #219A76;
  --series-muted: #3E4C5C;
  --series-muted-2: #2C3846;
  --ord-1: #2E5A8C; --ord-2: #3E74AE; --ord-3: #5590C8; --ord-4: #7BAEDB; --ord-5: #A6CBEB;
  --status-good: #4FB08F;
  --status-warn: #D9A85C;
  --status-bad: #E06A6A;
  --viz-grid: hsl(211 22% 16%);
  --viz-axis: hsl(211 20% 26%);
  --viz-ink: hsl(214 15% 70%);
  --viz-ink-muted: hsl(214 12% 52%);
  --viz-surface: #111B22;

  color-scheme: dark;
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: hsl(var(--surface-0)); color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600; letter-spacing: -0.015em; margin: 0;
}
h1 { font-size: 1.5rem; letter-spacing: -0.025em; line-height: 1.15; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: hsl(var(--muted-foreground)); }
.nums { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-ligatures: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oculto { display: none !important; }

/* ------------------------------------------------------------ shell */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 16rem; flex-shrink: 0; display: flex; flex-direction: column;
  background: hsl(var(--sidebar-background)); color: hsl(var(--sidebar-foreground));
  border-right: 1px solid hsl(var(--sidebar-border));
  position: sticky; top: 0; height: 100vh; transition: width .18s ease;
}
.shell.recolhido .sidebar { width: 3.25rem; }
.shell.recolhido .sidebar .rotulo, .shell.recolhido .sidebar .marca-texto, .shell.recolhido .sidebar .usuario-email { display: none; }
.shell.recolhido .sidebar .nav a { justify-content: center; padding: .55rem 0; }
.sidebar-header { height: 3.5rem; display: flex; align-items: center; padding: 0 1rem; border-bottom: 1px solid hsl(var(--sidebar-border)); }
.shell.recolhido .sidebar-header { justify-content: center; padding: 0; }
.marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: hsl(var(--foreground)); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.marca .marca-texto span { color: hsl(var(--muted-foreground)); font-weight: 500; }
.marca img { width: 1.35rem; height: 1.35rem; object-fit: contain; }
.nav { list-style: none; margin: 0; padding: .5rem; display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: calc(var(--radius) - 2px);
  text-decoration: none; color: hsl(var(--sidebar-foreground)); font-size: .875rem; font-weight: 500;
}
.nav a:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); }
.nav a.ativo { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); font-weight: 600; }
.nav svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.nav .badge-mock { margin-left: auto; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--gold)); border: 1px solid hsl(var(--gold) / .5); border-radius: 999px; padding: 0 .35rem; }
.shell.recolhido .nav .badge-mock { display: none; }
.sidebar-footer { margin-top: auto; padding: .5rem; border-top: 1px solid hsl(var(--sidebar-border)); }
.usuario { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .5rem; border: 0; background: transparent; border-radius: calc(var(--radius) - 2px); cursor: pointer; text-align: left; }
.usuario:hover { background: hsl(var(--sidebar-accent)); }
.avatar { width: 1.75rem; height: 1.75rem; border-radius: 6px; background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.usuario-email { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario { position: absolute; bottom: 3.4rem; left: .5rem; min-width: 13rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .12); padding: .25rem; z-index: 40; }
.menu-usuario button { display: flex; width: 100%; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 0; background: none; border-radius: 4px; cursor: pointer; font-size: .8125rem; }
.menu-usuario button:hover { background: hsl(var(--accent)); }
.menu-usuario .sep { height: 1px; background: hsl(var(--border)); margin: .25rem 0; }
.menu-usuario .rotulo-menu { padding: .35rem .6rem; font-size: .75rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 30; height: 3.5rem; display: flex; align-items: center; gap: .5rem;
  padding: 0 1rem; border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--surface-0) / .9); backdrop-filter: blur(8px);
}
.topo .titulo-topo { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.topo .frescor { font-size: .75rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.sep-v { width: 1px; height: 1rem; background: hsl(var(--border)); }
main { padding: 1.25rem 1.5rem 3rem; max-width: 1440px; width: 100%; }
.pagina { display: flex; flex-direction: column; gap: 1.25rem; }
.pagina-cabecalho { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.pagina-cabecalho .sub { color: hsl(var(--muted-foreground)); font-size: .8125rem; }

/* ---------------------------------------------------------- botoes */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1rem; border-radius: calc(var(--radius) - 2px); border: 0; font-size: .875rem; font-weight: 600; cursor: pointer; white-space: nowrap; background: hsl(var(--action)); color: hsl(var(--action-foreground)); transition: background .12s; }
.btn:hover { background: hsl(var(--action) / .9); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn:focus-visible, .btn-ghost:focus-visible, .btn-icon:focus-visible, .input:focus-visible, .nav a:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn-outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--input)); font-weight: 500; }
.btn-outline:hover { background: hsl(var(--accent)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); font-weight: 500; }
.btn-ghost:hover { background: hsl(var(--accent)); }
.btn-sm { height: 2.25rem; padding: 0 .75rem; font-size: .8125rem; }
.btn-icon { width: 2rem; height: 2rem; padding: 0; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: hsl(var(--foreground)); }
.btn-icon:hover { background: hsl(var(--accent)); }
.btn-icon svg { width: 1rem; height: 1rem; }
.btn svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------- campos */
.campo { display: flex; flex-direction: column; gap: .5rem; }
.label { font-size: .875rem; font-weight: 500; }
.input { height: 2.75rem; width: 100%; border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); padding: 0 .75rem; font-size: .9375rem; }
.input::placeholder { color: hsl(var(--muted-foreground)); }
.senha-wrap { position: relative; }
.senha-wrap .input { padding-right: 2.75rem; }
.senha-wrap .olho { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); }
.erro-form { font-size: .8125rem; color: hsl(var(--destructive)); min-height: 1.2em; }
.ok-form { font-size: .8125rem; color: hsl(var(--success)); }

/* ---------------------------------------------------------- cards */
.grade { display: grid; gap: 1rem; }
.grade-kpi { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.grade-1 { grid-template-columns: 1fr; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.25rem .5rem; }
.card-title { font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)); font-family: 'Inter', sans-serif; letter-spacing: 0; }
.card-sub { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .15rem; }
.card-body { padding: 0 1.25rem 1.1rem; flex: 1; min-width: 0; }
.card-footer { padding: .75rem 1.25rem; border-top: 1px solid hsl(var(--border) / .6); font-size: .75rem; color: hsl(var(--muted-foreground)); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.card-acoes { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.card.mockup { border-style: dashed; background: hsl(var(--surface-2)); box-shadow: none; }
.card.mockup .viz, .card.mockup .tabela, .card.mockup .kpi-valor { opacity: .65; }

.kpi-valor { font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.kpi-valor-texto { font-size: 1.35rem; padding-top: .2rem; }
.kpi-sub { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .35rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.delta { font-weight: 600; }
.delta.sobe { color: hsl(var(--success)); }
.delta.desce { color: hsl(var(--destructive)); }
.kpi-icone { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); flex-shrink: 0; }

.medidor { height: 6px; border-radius: 999px; background: hsl(var(--surface-3)); overflow: hidden; margin-top: .5rem; }
.medidor > i { display: block; height: 100%; background: var(--series-1); border-radius: 999px; }
.medidor.alto > i { background: var(--status-warn); }
.medidor.cheio > i { background: var(--status-bad); }

/* -------------------------------------------------------- listas */
a.card-link { text-decoration: none; color: inherit; display: block; transition: border-color .12s, box-shadow .12s, transform .12s; }
a.card-link:hover .card { border-color: hsl(var(--ring) / .55); box-shadow: 0 2px 10px rgb(0 0 0 / .07); }
a.card-link:hover .kpi-valor { color: hsl(var(--primary)); }
a.card-link:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius); }
.card-link .card-title::after { content: "›"; margin-left: .35rem; opacity: .45; font-weight: 600; }
.lista-barra { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.lista-barra .input { height: 2.25rem; width: auto; min-width: 12rem; flex: 1; max-width: 22rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; height: 2.25rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid hsl(var(--input)); background: transparent; font-size: .8125rem; cursor: pointer; white-space: nowrap; }
.chip:hover { background: hsl(var(--accent)); }
.chip.ativo { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; font-weight: 500; }
.tabela th.ordenavel { cursor: pointer; user-select: none; }
.tabela th.ordenavel:hover { color: hsl(var(--foreground)); }
.tabela th .seta { opacity: .5; margin-left: .2rem; }
.tabela td.perfil a { text-decoration: none; }
.tabela td.perfil a:hover { text-decoration: underline; }
.tabela td.texto { max-width: 22rem; }
/* No celular a tabela guarda só o essencial; o resto continua na tela larga. */
@media (max-width: 760px) {
  .tabela .col-p2 { display: none; }
  .tabela th, .tabela td { padding: .45rem .4rem; }
  .tabela td.perfil { max-width: 10.5rem; }
  .tabela td.perfil .muted { font-size: .7rem; line-height: 1.3; }
  .tabela td.perfil a { font-size: .8125rem; overflow-wrap: anywhere; }
}
.paginacao { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: space-between; }
.paginacao .controles { display: flex; align-items: center; gap: .5rem; }
.voltar { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); text-decoration: none; }
.voltar:hover { color: hsl(var(--foreground)); }

/* ---------------------------------------------------------- badges */
.dot { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--surface-2)); border-radius: 999px; padding: 0 .55rem; height: 1.4rem; font-size: .75rem; font-weight: 500; color: hsl(var(--foreground) / .85); white-space: nowrap; }
.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted-foreground) / .6); }
.dot.positivo::before { background: var(--status-good); }
.dot.alerta::before { background: var(--status-warn); }
.dot.perigo::before { background: var(--status-bad); }
.dot.marca::before { background: hsl(var(--primary)); }
.dot.mock { color: hsl(var(--gold)); border-color: hsl(var(--gold) / .5); }
.dot.mock::before { background: hsl(var(--gold)); }

.alertas { display: flex; gap: .5rem; flex-wrap: wrap; }
.alerta { display: inline-flex; align-items: center; gap: .5rem; border-radius: var(--radius); padding: .4rem .7rem; font-size: .8125rem; background: hsl(var(--surface-2)); border: 1px solid hsl(var(--border)); }
.alerta svg { width: .9rem; height: .9rem; flex-shrink: 0; }
.alerta.atencao svg { color: var(--status-warn); }
.alerta.critico svg { color: var(--status-bad); }
.alerta.info svg { color: hsl(var(--primary)); }

/* ---------------------------------------------------------- tabela */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.tabela th { text-align: left; font-weight: 500; color: hsl(var(--muted-foreground)); padding: .5rem .6rem; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.tabela td { padding: .5rem .6rem; border-bottom: 1px solid hsl(var(--border) / .6); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr:hover td { background: hsl(var(--surface-2)); }
.vazio { border: 1px dashed hsl(var(--border)); border-radius: var(--radius); padding: 2rem; text-align: center; font-size: .8125rem; color: hsl(var(--muted-foreground)); }

/* ---------------------------------------------------------- viz */
.viz { position: relative; width: 100%; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; font-family: 'Inter', system-ui, sans-serif; }
.viz text { fill: var(--viz-ink); font-size: 11px; }
.viz .tick text { fill: var(--viz-ink-muted); }
.viz .grid line { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz .axis line { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.viz .rotulo-valor { fill: var(--viz-ink); font-weight: 600; font-size: 11px; }
.viz .rotulo-n { fill: var(--viz-ink-muted); font-size: 10px; }
.viz .marco-linha { stroke: var(--viz-axis); stroke-width: 1; stroke-dasharray: 0; }
.viz .marco-faixa { fill: hsl(var(--gold) / .12); }
.viz .marco-faixa.incidente { fill: hsl(var(--destructive) / .10); }
.viz .marco-texto { fill: var(--viz-ink); font-size: 10px; }
.marcos-lista { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.marcos-lista b { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid hsl(var(--border)); font-size: .65rem; margin-right: .3rem; font-weight: 600; }
.viz .cruz { stroke: var(--viz-axis); stroke-width: 1; pointer-events: none; }
.viz .alvo { pointer-events: none; }
.viz .barra { transition: opacity .1s; }
.viz .barra:hover, .viz .celula:hover { opacity: .85; }
.viz .celula-texto { font-size: 11px; font-weight: 600; pointer-events: none; }
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .5rem; }
.legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.legenda i.linha { height: 2px; width: 14px; border-radius: 1px; }
.viz-tip { position: fixed; z-index: 60; pointer-events: none; min-width: 8rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border) / .8); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .14); padding: .45rem .6rem; font-size: .75rem; display: none; }
.viz-tip .tip-titulo { font-weight: 600; margin-bottom: .25rem; }
.viz-tip .tip-linha { display: flex; align-items: center; gap: .45rem; justify-content: space-between; }
.viz-tip .tip-linha i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.viz-tip .tip-linha b { font-variant-numeric: tabular-nums; margin-left: .75rem; }
.viz-tip .tip-linha span { color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: .4rem; }

/* ------------------------------------------------------ controle do motor */
.controle { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); align-items: start; }
.controle .bloco { display: flex; flex-direction: column; gap: .5rem; }
.controle .estado { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.controle .estado .kpi-valor { font-size: 1.35rem; }
.numeros { display: flex; gap: .75rem; flex-wrap: wrap; }
.numeros .campo { flex: 1; min-width: 7rem; gap: .35rem; }
.numeros .label { font-size: .75rem; color: hsl(var(--muted-foreground)); font-weight: 500; }
.numeros .input { height: 2.5rem; font-variant-numeric: tabular-nums; }
.dica { font-size: .75rem; color: hsl(var(--muted-foreground)); }
.dica.aviso { color: var(--status-warn); }

/* ------------------------------------------------------ segundo fator */
.qr { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid hsl(var(--border)); display: block; }
.totp-passos { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.totp-passos ol { margin: 0; padding-left: 1.1rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); display: flex; flex-direction: column; gap: .35rem; max-width: 26rem; }
.chave-manual { font-size: .8125rem; word-break: break-all; background: hsl(var(--surface-2)); padding: .35rem .5rem; border-radius: 4px; display: inline-block; margin-top: .25rem; }
.codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .4rem; margin: .5rem 0; }
.codigos span { background: hsl(var(--surface-2)); border: 1px solid hsl(var(--border)); border-radius: 4px; padding: .35rem .5rem; text-align: center; font-size: .875rem; }
.linha-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.linha-form .campo { flex: 1; min-width: 10rem; }
.linha-form .input { height: 2.5rem; }
.acoes-inline { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

/* --------------------------------------------------------- login */
.auth { display: flex; min-height: 100vh; }
.auth-marca { display: none; width: 44%; max-width: 36rem; flex-shrink: 0; flex-direction: column; justify-content: space-between; padding: 3rem; position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(155deg, hsl(211 52% 9%) 0%, hsl(211 54% 17%) 60%, hsl(211 52% 11%) 100%); }
.auth-marca .textura { position: absolute; bottom: -6rem; right: -7rem; width: 32rem; height: 32rem; transform: rotate(12deg); opacity: .045; pointer-events: none; }
.auth-marca .marca { color: #fff; }
.auth-marca .marca .marca-texto span { color: rgb(255 255 255 / .65); }
.auth-marca h2 { font-size: 2rem; line-height: 1.2; max-width: 26rem; color: #fff; }
.auth-marca p { margin-top: 1.25rem; max-width: 26rem; color: rgb(255 255 255 / .7); }
.auth-marca .rodape { font-size: .8125rem; color: rgb(255 255 255 / .45); }
.auth-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.auth-form .caixa { width: 100%; max-width: 24rem; }
.auth-form h1 { font-size: 1.75rem; }
.auth-form .sub { margin-top: .5rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.auth-form form { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.auth-form .marca-mobile { margin-bottom: 2rem; display: inline-flex; }
.auth-form .rodape { margin-top: 1.75rem; border-top: 1px solid hsl(var(--border)); padding-top: 1.25rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
@media (min-width: 1024px) { .auth-marca { display: flex; } .auth-form .marca-mobile { display: none; } }

/* ------------------------------------------------------ responsivo */
.scrim { display: none; }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 50; width: 17rem !important; transform: translateX(-100%); transition: transform .18s ease; }
  .shell.menu-aberto .sidebar { transform: none; }
  .shell.recolhido .sidebar .rotulo, .shell.recolhido .sidebar .marca-texto, .shell.recolhido .sidebar .usuario-email, .shell.recolhido .nav .badge-mock { display: initial; }
  .shell.recolhido .sidebar .nav a { justify-content: flex-start; padding: .5rem .6rem; }
  .shell.recolhido .sidebar-header { justify-content: flex-start; padding: 0 1rem; }
  .shell.menu-aberto .scrim { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 45; }
  main { padding: 1rem 1rem 3rem; }
  .topo .frescor { display: none; }
}