/* Estilo: lateral no azul-marinho do logo, títulos direto no fundo, cartões só para conteúdo, azul do logo como destaque.
   Marca própria: cada aviso leva as ondas do sino do logo.
   Claro e escuro pelo atributo data-tema no <html> (definido em index.html e trocado no painel). */
:root {
  --canvas: #edf0f5; --paper: #fff; --alt: #f3f5f9; --ink: #0b1727; --mid: #5a6475; --line: #e3e7ee;
  --accent: #085afc; --accent-h: #0049d6; --accent-t: #0049d6; --marca: #085afc;
  --marinho: #0b1727; --sobre-marinho: #dfe6f2; --onda: #6fa1ff;
  --onda-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 0.5 17 30'%3E%3Cg fill='none' stroke='%23085afc' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M4.6 9.6a10 10 0 0 1 3.6 12.2'/%3E%3Cpath d='M6.8 2.6a17.5 17.5 0 0 1 7.4 24.8'/%3E%3C/g%3E%3C/svg%3E"); --ember: #e11d48; --ok: #15803d;
  --s1: #2563eb; --s2: #eb6834; --s3: #1baf7a; --s4: #52514e; --up: #16a34a; --up-texto: #15803d; --down: #e11d48;
  --grid: #eceef2; --axis: #d5d9e0; --muted: #8a909b;
  --r-ctl: 10px; --r-card: 16px; --r-sm: 10px;
  --anel: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, .04);
  font-family: Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "ss01", "cv11";
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --canvas: #070c14; --paper: #101826; --alt: #172133; --ink: #eef2f8; --mid: #94a0b4; --line: #222d40;
  --marinho: #0d1a2e;
  --accent-t: #8ab4ff; --marca: #4d8bff; --ember: #fb7185; --ok: #4ade80;
  --s1: #3b82f6; --s2: #d95926; --s3: #199e70; --s4: #c3c2b7; --up: #22c55e; --up-texto: #4ade80; --down: #f43f5e;
  --grid: #20242c; --axis: #323844;
  --anel: 0 0 0 1px var(--line);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { background: var(--canvas); color: var(--ink); }
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* celular deitado: fora do recorte da câmera */
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: 14px; font-weight: 600; }
.mid { color: var(--mid); }
.peq { font-size: 12px; }
.cap { font-size: 12.5px; color: var(--mid); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.erro { color: var(--ember); }
.ok { color: var(--ok); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
summary { cursor: pointer; }

/* estrutura: lateral e conteúdo flutuam como cartões sobre o fundo */
.casca { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 12px; padding: 12px; min-height: 100vh; align-items: start; }
.lateral { background: var(--marinho); color: var(--sobre-marinho); border-radius: var(--r-card); padding: 14px 10px 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; height: calc(100vh - 24px); overflow: auto; }
.marca { display: flex; align-items: center; gap: 10px; padding: 2px 8px 10px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.marca span span { display: block; font-size: 12px; color: var(--mid); font-weight: 400; letter-spacing: 0; }
.logo { width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #0b1727; display: grid; place-items: center; flex: none; }
.nome-marca { font-weight: 700; letter-spacing: -.03em; font-size: 16px; }
.nome-marca b { color: var(--marca); font-weight: 700; }
.marca .menu-btn { display: none; margin-left: auto; width: 36px; padding: 0; }
.marca.grande { padding: 0; gap: 12px; }
.marca.grande .logo { width: 44px; height: 44px; border-radius: 12px; }
.marca.grande .logo svg { width: 30px; height: 30px; }
.marca.grande .nome-marca { font-size: 22px; }
.menu-itens { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.legal { font-size: 11px; line-height: 1.45; color: var(--mid); padding: 0 6px; }
.legal a { color: var(--mid); }
.nav-rot { font-size: 12px; color: color-mix(in srgb, var(--sobre-marinho) 55%, transparent); padding: 12px 10px 6px; }
.lateral a.nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-ctl); text-decoration: none; color: color-mix(in srgb, var(--sobre-marinho) 78%, transparent); font-weight: 500; }
.lateral a.nav svg { flex: none; }
.lateral a.nav:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.lateral a.nav[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .11); font-weight: 600; }
.lateral a.nav[aria-current="page"] svg { color: var(--onda); }
.lateral :focus-visible { outline-color: var(--onda); }
.lateral .nome-marca b { color: var(--onda); }
.lateral .marca span span, .lateral .mid, .lateral .legal, .lateral .legal a { color: color-mix(in srgb, var(--sobre-marinho) 62%, transparent); }
.lateral .btn.cont { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.lateral .btn.cont:hover { background: rgba(255, 255, 255, .08); }
.lateral .segmentos { background: rgba(255, 255, 255, .08); }
.lateral .segmentos button { color: color-mix(in srgb, var(--sobre-marinho) 70%, transparent); }
.lateral .segmentos button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
.lateral .rodape { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; }
.tema { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 10px; font-weight: 500; }
.usuario { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.usuario div { min-width: 0; line-height: 1.3; }
.usuario b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
main { width: 100%; min-width: 0; container-type: inline-size; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; padding: 14px 4px 0; }
.topo p { margin-top: 4px; max-width: 72ch; }
.pilha { display: grid; gap: 12px; }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.espaco { flex: 1; }

/* cartões */
.cartao { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--anel); padding: 20px; }
.cartao > h2 + * { margin-top: 12px; }

/* controles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--r-ctl); border: 0; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--accent-h); }
.btn.sec { background: var(--alt); color: var(--ink); }
.btn.sec:hover { background: var(--line); }
.btn.cont { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.cont:hover { background: var(--alt); }
.btn.perigo { background: transparent; color: var(--ember); box-shadow: inset 0 0 0 1px var(--line); }
.btn.perigo:hover { background: var(--alt); }
.btn.peq { height: 28px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: default; }
input, select, textarea { background: var(--paper); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-ctl); padding: 8px 12px; height: 36px; width: 100%; min-width: 0; }
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
input[type="checkbox"] { width: 16px; height: 16px; padding: 0; box-shadow: none; accent-color: var(--accent); flex: none; }
label { display: grid; gap: 6px; font-weight: 500; font-size: 13px; }
label.opcao { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 14px; cursor: pointer; }
label .mid { font-weight: 400; }
.form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.selo { display: inline-block; white-space: nowrap; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--alt); }
.selo.escuro, a.selo { background: color-mix(in srgb, var(--accent) 14%, var(--paper)); color: var(--accent-t); font-weight: 600; text-decoration: none; }
.selo.cont { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* tabelas e listas */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; color: var(--mid); font-weight: 500; padding: 8px 12px 8px 0; white-space: nowrap; }
.acoes { display: inline-flex; gap: 6px; justify-content: flex-end; }
.tabela td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.tabela td:last-child, .tabela th:last-child { padding-right: 0; text-align: right; }
.tabela tr.clic { cursor: pointer; }
.tabela tr.clic:hover td { background: var(--alt); }
.tabela td.esq, .tabela th.esq { text-align: left; }
.tabela a { text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.rolar { overflow-x: auto; }
.item { padding: 12px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; padding-top: 0; }
.item:last-child { padding-bottom: 0; }
.vazio { color: var(--mid); padding: 8px 0; }
.sobe { color: var(--up-texto); } .desce { color: var(--ember); }
.texto-resumo { white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.mono { overflow-wrap: anywhere; font-family: ui-monospace, "Geist Mono", Menlo, monospace; font-size: 13px; }

/* login */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.entrada .cartao { width: min(400px, 100%); display: grid; gap: 16px; padding: 28px; }
.entrada.dupla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); place-items: stretch; padding: 12px; gap: 12px; }
.lado-form { display: grid; place-items: center; padding: 24px 0; }
.vitrine { background: var(--marinho); color: var(--sobre-marinho); border-radius: var(--r-card); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.vitrine .nome-marca { color: #fff; }
.vitrine .nome-marca b { color: var(--onda); }
.vitrine h2 { font-size: 40px; line-height: 1.08; letter-spacing: -.04em; color: #fff; font-weight: 600; max-width: 15ch; }
.vitrine-texto p { margin-top: 14px; font-size: 16px; line-height: 1.55; max-width: 44ch; color: color-mix(in srgb, var(--sobre-marinho) 78%, transparent); }
.avisos-ex { display: grid; gap: 10px; max-width: 440px; }
.ex-rot { font-size: 12.5px; color: color-mix(in srgb, var(--sobre-marinho) 60%, transparent); }
.aviso-ex { position: relative; background: #fff; color: #0b1727; border-radius: 14px; padding: 12px 16px 12px 40px; display: grid; gap: 4px; box-shadow: 0 14px 32px rgba(0, 0, 0, .28); }
.aviso-ex::before { content: ''; position: absolute; left: 15px; top: 15px; width: 13px; height: 23px; background: var(--onda-svg) no-repeat center / contain; }
.aviso-ex .selo { background: #eef3ff; color: #0049d6; font-weight: 600; }
.aviso-ex .mid { color: #5a6475; }
/* o único movimento da tela: os avisos de exemplo chegam um depois do outro */
@media (prefers-reduced-motion: no-preference) {
  .aviso-ex { animation: chega .5s cubic-bezier(.2, .8, .2, 1) both; }
  .aviso-ex:nth-of-type(2) { animation-delay: .5s; }
  .aviso-ex:nth-of-type(3) { animation-delay: 1s; }
}
@keyframes chega { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.entrada .segmentos button { flex: 1; }

/* modal e aviso */
dialog { border: 0; border-radius: var(--r-card); padding: 24px; background: var(--paper); color: var(--ink); width: min(640px, calc(100vw - 32px)); box-shadow: 0 0 0 1px var(--line), 0 16px 48px rgba(0,0,0,.18); }
dialog::backdrop { background: rgba(0,0,0,.4); }
#aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: var(--r-ctl); opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100vw - 32px); z-index: 10; }
#aviso.ver { opacity: 1; }
.senha-box { background: var(--alt); border-radius: var(--r-sm); padding: 12px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }

/* painéis e gráficos */
.duas { display: grid; gap: 12px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.duas.igual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--paper); border-radius: var(--r-card); box-shadow: var(--anel); }
.kpis > .kpi { background: none; box-shadow: none; border-radius: 0; padding: 18px 20px; border-left: 1px solid var(--line); }
.kpis > .kpi:first-child { border-left: 0; }
.cartao .kpis { background: none; box-shadow: none; border-radius: 0; border-block: 1px solid var(--line); }
.cartao .kpis > .kpi:first-child { padding-left: 0; }
.kpi .cap { font-size: 13px; }
.kpi .valor { font-size: 28px; font-weight: 700; letter-spacing: -.035em; margin-top: 4px; line-height: 1.15; }
.kpi .peq { margin-top: 4px; }
.cartao, .pilha > *, .duas > *, .kpis > *, .kpi { min-width: 0; }
.cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cab h2 { margin: 0; }
.cab + * { margin-top: 12px; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--mid); display: inline-block; }
.ponto.bom { background: var(--up); } .ponto.ruim { background: var(--down); } .ponto.neutro { background: var(--axis); }
.spark { display: block; overflow: visible; }
.spark.sobe { color: var(--up); } .spark.desce { color: var(--down); }

.mapa { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.tile { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--c) var(--f), var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, var(--line)); }
.tile:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.tile b { font-size: 14px; }

.segmentos { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: var(--alt); }
.segmentos button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--mid); }
.segmentos button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--anel); }
.tema .segmentos button { padding: 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; border: 0; cursor: pointer; font-size: 13px; font-weight: 500; background: transparent; color: var(--mid); box-shadow: inset 0 0 0 1px var(--line); }
.chip[aria-pressed="true"] { color: var(--ink); background: var(--alt); }
.chip i { display: inline-block; width: 12px; border-top: 2px solid var(--c, var(--ink)); }
.grafico-ativo { width: 100%; height: 460px; overflow: hidden; }
.grafico-barras { width: 100%; height: 190px; overflow: hidden; }
/* valor em destaque: "R$" e centavos mais leves que o número */
.preco-grande { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.rs { color: var(--mid); font-weight: 600; }
.cent { font-size: .5em; color: var(--mid); letter-spacing: -.01em; }
.faixa { position: relative; height: 8px; border-radius: 4px; background: var(--alt); margin: 12px 2px 6px; } /* 2px de folga: o marcador no máximo não vaza da tabela */
.faixa i { position: absolute; top: -4px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.trilho { height: 8px; border-radius: 4px; background: var(--alt); overflow: hidden; }
.trilho i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.alvo { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.alvo:first-child { border-top: 0; padding-top: 0; }
.tempo { display: grid; gap: 0; }
.tempo .passo { position: relative; padding: 0 0 14px 18px; border-left: 1px solid var(--line); margin-left: 4px; }
.tempo .passo:last-child { padding-bottom: 0; border-left-color: transparent; }
.tempo .passo::before { content: ''; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* alertas e resumos */
.rank { display: grid; grid-template-columns: minmax(80px, 38%) 1fr 28px; gap: 10px; align-items: center; padding: 5px 0; }
.rank-v { text-align: right; }
.dia + .dia { margin-top: 20px; }
.dia-t { margin-bottom: 8px; }
.aviso { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.aviso::before { content: ''; position: absolute; left: 4px; top: 15px; width: 13px; height: 23px; background: var(--onda-svg) no-repeat center / contain; }
.aviso:first-of-type, .cab + .aviso { border-top: 0; }
.vazio-acao { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vazio-acao p { color: var(--mid); }
.origem { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.aviso-topo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.resumos { display: grid; gap: 12px; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.lista-res { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 12px; }
.res-item { display: grid; gap: 0; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 12px; border-radius: var(--r-ctl); cursor: pointer; }
.res-item:hover, .res-item[aria-current="true"] { background: var(--alt); }

.exec { display: grid; gap: 2px; }
/* resultado das execuções (Dados e execução) */
.res-lista { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 12px; }
.res-lista li { padding-left: 16px; position: relative; }
.res-lista li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.res-bruto { margin-top: 16px; }
.res-bruto pre { white-space: pre-wrap; margin-top: 8px; padding: 12px; border-radius: var(--r-sm); background: var(--alt); color: var(--mid); max-height: 260px; overflow: auto; }

/* faixa de destaque no topo das telas (canais desligados, fonte com falha, suporte) */
.faixa-aviso { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
.faixa-aviso.ruim { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--down) 40%, var(--line)); background: color-mix(in srgb, var(--down) 6%, var(--paper)); }
.faixa-aviso p { margin-top: 2px; }
.selo.alerta { background: color-mix(in srgb, var(--s2) 16%, var(--paper)); color: var(--s2); font-weight: 600; }
/* conta: canais de aviso */
.canal { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.canal:first-of-type { margin-top: 12px; }
.canal p { margin-top: 2px; }
/* regra escrita: o que o sistema entendeu */
.entendi { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--alt); }
/* resumo: parágrafo de destaques */
.destaques { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); box-shadow: inset 3px 0 0 var(--accent); }
.destaques p:first-of-type { margin-top: 6px; font-size: 15px; line-height: 1.6; }
.destaques .peq { margin-top: 6px; }
/* carteira: célula editável */
input.cel { height: 30px; width: 110px; text-align: right; box-shadow: none; background: transparent; padding: 4px 8px; font-variant-numeric: tabular-nums; }
input.cel:hover { box-shadow: inset 0 0 0 1px var(--line); }
/* ajuda e suporte */
.faq { padding: 12px 0; border-top: 1px solid var(--line); }
.faq:first-child { border-top: 0; padding-top: 0; }
.faq summary { font-weight: 500; }
.faq p { margin-top: 8px; }
.msg { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.cartao.msg { padding: 20px; border-top: 0; }
.cartao > h2 + .msg { border-top: 0; }
.resp { margin-top: 8px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--alt); display: grid; gap: 4px; }
.msg .selo { justify-self: start; }
/* termos e privacidade */
.doc { max-width: 760px; margin: 24px auto; padding: 32px; line-height: 1.65; }
.doc h1 { margin: 16px 0 4px; }
.doc h2 { margin: 24px 0 6px; }
.doc ul { padding-left: 20px; display: grid; gap: 4px; }
.doc p + p { margin-top: 8px; }

/* faixa de indicadores com até 5 números: com o conteúdo abaixo de 860px vira duas colunas, a última sozinha ocupa a linha toda */
@container (max-width: 860px) {
  .kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > .kpi { border-left: 0; border-top: 1px solid var(--line); }
  .kpis > .kpi:nth-child(-n+2) { border-top: 0; }
  .kpis > .kpi:nth-child(even) { border-left: 1px solid var(--line); }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cartao .kpis > .kpi:nth-child(odd) { padding-left: 0; }
}

/* Monitores largos: o conteúdo ocupa a tela toda e, em vez de esticar cada cartão, as telas se reorganizam em colunas.
   O Início, com a tabela de ativos, só divide em três a partir de 1800px de conteúdo (monitor 2560 e ultrawide). */
@container (min-width: 1800px) {
  /* Início: "Meus ativos" à esquerda; avisos, mapa, alvos, eventos e resumo ao lado */
  .painel:has(.c-ativos) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; }
  .painel:has(.c-ativos) > .duas { display: contents; }
  .painel:has(.c-ativos) > :is(.faixa-aviso, .kpis) { grid-column: 1 / -1; }
  .painel .c-ativos { grid-column: 1; grid-row: span 3; }
  .painel:not(:has(.c-resumo)) .c-ativos { grid-row: span 2; }
  .painel :is(.c-avisos, .c-alvo) { grid-column: 2; }
  .painel :is(.c-mapa, .c-eventos) { grid-column: 3; }
  .painel .c-resumo { grid-column: 2 / -1; }
}
/* A partir de 1500px de conteúdo (monitor 1920 em diante), as outras telas já trabalham em colunas */
@container (min-width: 1500px) {
  /* Alertas: linha do tempo à esquerda, gráfico e rankings ao lado */
  #a-corpo:has(.c-linha) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-flow: row dense; }
  #a-corpo:has(.c-linha) > .kpis { grid-column: 1 / -1; }
  #a-corpo:has(.c-linha) > .duas { display: contents; }
  #a-corpo .c-linha { grid-column: 1; grid-row: span 2; }
  #a-corpo :is(.c-barras, .c-rank) { grid-column: 2; }

  /* Carteira: indicadores empilhados ao lado da importação; posições na largura toda */
  main[data-tela="carteira"] > .pilha:has(> .kpis) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  main[data-tela="carteira"] > .pilha > .kpis { grid-column: 1; grid-row: 1; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  main[data-tela="carteira"] > .pilha > .kpis > .kpi { border-left: 0; border-top: 1px solid var(--line); align-content: center; }
  main[data-tela="carteira"] > .pilha > .kpis > .kpi:first-child { border-top: 0; }
  main[data-tela="carteira"] > .pilha:has(> .kpis) > .cartao:last-child { grid-column: 2; grid-row: 1; }
  main[data-tela="carteira"] > .pilha > .kpis + .cartao { grid-column: 1 / -1; grid-row: 2; }

  /* Calendário: eventos lado a lado dentro de cada cartão */
  main[data-tela="calendario"] .cartao:has(> .item) { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); column-gap: 32px; align-content: start; }
  main[data-tela="calendario"] .cartao:has(> .item) > h2 { grid-column: 1 / -1; }

  /* Demais telas de cartões: mural em colunas que se equilibram sozinhas */
  main:is([data-tela="ativos"], [data-tela="conta"], [data-tela="ajuda"]) > .pilha, #res-det { display: block; columns: 2; column-gap: 12px; }
  main:is([data-tela="ativos"], [data-tela="conta"], [data-tela="ajuda"]) > .pilha > *,
  #res-det > *, #res-det > .duas > * { break-inside: avoid; margin-bottom: 12px; }
  main:is([data-tela="ativos"], [data-tela="conta"], [data-tela="ajuda"]) > .pilha > p,
  #res-det > :first-child, #res-det > p { column-span: all; }
  #res-det > .duas { display: contents; }
}
@container (min-width: 2600px) {
  main:is([data-tela="conta"], [data-tela="ajuda"]) > .pilha { columns: 3; }
}
@media (max-width: 900px) {
  .duas, .duas.igual, .resumos { grid-template-columns: minmax(0, 1fr); }
  .entrada.dupla { grid-template-columns: minmax(0, 1fr); }
  .vitrine { padding: 28px 24px; gap: 24px; }
  .vitrine h2 { font-size: 28px; }
  .grafico-ativo { height: 400px; }
  .lista-res { position: static; max-height: 220px; }
}
/* celular: a lateral vira uma barra com a marca e um botão que abre o menu */
@media (max-width: 800px) {
  .casca { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
  .lateral { position: sticky; top: 8px; z-index: 5; height: auto; max-height: calc(100vh - 16px); padding: 8px 8px 8px 10px; }
  .marca { padding: 0; }
  .marca .menu-btn { display: inline-flex; }
  .menu-itens { display: none; padding-top: 8px; }
  .lateral.aberta .menu-itens { display: flex; }
  .lateral a.nav { padding: 11px 10px; }
  .topo { padding: 8px 4px 0; margin-bottom: 12px; }
  .topo h1 { font-size: 22px; }
  .cartao { padding: 16px; }
  .kpis > .kpi { padding: 14px 16px; }
  .kpi .valor { font-size: 24px; }
  .aviso-ex:nth-of-type(n+2) { display: none; }
  .btn.peq, .segmentos button, .chip { min-height: 36px; }
  .btn.peq { padding: 0 14px; }
  .t-inicio :is(th, td):is(:nth-child(4), :nth-child(5), :nth-child(7)),
  .t-ativos :is(th, td):nth-child(4),
  .t-hist :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)) { display: none; }
  .tabela .acoes { flex-direction: column; align-items: stretch; }
  .tabela td, .tabela th { padding-right: 8px; }
  .vitrine-texto p { display: none; }
  .vitrine { gap: 18px; padding: 22px 20px; }
  .vitrine h2 { font-size: 24px; }
  /* carteira: cada posição vira um bloco com rótulos */
  .tabela.empilha thead { display: none; }
  .tabela.empilha, .tabela.empilha tbody { display: block; }
  .tabela.empilha tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--line); }
  .tabela.empilha td { border: 0; padding: 0; text-align: left; }
  .tabela.empilha td.esq { grid-column: 1 / -1; }
  .tabela.empilha td[data-r]::before { content: attr(data-r); display: block; font-size: 12px; color: var(--mid); }
  .tabela.empilha td.acao { grid-column: 1 / -1; text-align: left; }
  .tabela.empilha input.cel { text-align: left; padding-left: 0; width: 100%; }
  .preco-grande { font-size: 32px; }
  .canal { flex-direction: column; align-items: flex-start; }
  .doc { margin: 8px; padding: 20px; }
  .entrada { padding: 12px; }
  .entrada .cartao { padding: 22px; }
  .entrada.dupla { padding: 8px; gap: 8px; }
  .lado-form { padding: 0; }
  .lado-form .cartao { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { #aviso { transition: none; } }

/* Movimento, na linha da demo Star Service: uma curva só (saída suave), entrada em cascata ao abrir cada tela,
   saída com desfoque na troca de tela, números contando, linhas e barras se desenhando. Quem pede menos movimento no sistema não vê nada disso.
   O atraso de cada peça (--d) vem do app.js. */
:root { --ease: cubic-bezier(.22, .8, .24, 1); }
@keyframes surge { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } }
@keyframes sobe-leve { from { opacity: 0; transform: translateY(8px); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes estoura { from { opacity: 0; transform: translateY(8px) scale(.96); filter: blur(4px); } }
@keyframes enche { from { width: 0; } }
@keyframes desliza { from { left: 0; opacity: 0; } }
@keyframes traca { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: no-preference) {
  main { transition: opacity .17s var(--ease), filter .17s var(--ease), transform .17s var(--ease); }
  main.sai { opacity: 0; filter: blur(10px); transform: translateY(6px); pointer-events: none; }
  main.entra :is(.topo, .cartao:not(.cartao .cartao)) { animation: surge .6s var(--ease) both; animation-delay: var(--d, 0ms); }
  main.entra :is(tbody tr, .aviso, .item, .alvo, .tile, .passo, .msg:not(.cartao)) { animation: sobe-leve .5s var(--ease) both; animation-delay: var(--d, 0ms); }
  main.entra .trilho i { animation: enche 1s var(--ease) both; animation-delay: calc(var(--d, 0ms) + 200ms); }
  main.entra .faixa i { animation: desliza 1s var(--ease) both; animation-delay: calc(var(--d, 0ms) + 200ms); }
  main.entra .spark polyline { stroke-dasharray: 1; animation: traca 1.1s var(--ease) both; animation-delay: calc(var(--d, 0ms) + 150ms); }
  main.entra .spark circle { animation: aparece .4s var(--ease) both; animation-delay: calc(var(--d, 0ms) + 900ms); }

  /* login */
  .vitrine, .entrada .cartao { animation: surge .7s var(--ease) both; }
  .lado-form .cartao { animation-delay: 90ms; }

  /* menu do celular: itens descem em sequência ao abrir */
  .lateral.aberta .menu-itens > * { animation: sobe-leve .35s var(--ease) both; animation-delay: calc(var(--n, 0) * 22ms); }

  /* janelas e mensagens */
  dialog[open] { animation: estoura .32s var(--ease) both; }
  dialog[open]::backdrop { animation: aparece .2s ease-out both; }
  #aviso { transform: translate(-50%, 12px) scale(.96); transition: opacity .25s var(--ease), transform .4s var(--ease); }
  #aviso.ver { transform: translate(-50%, 0); }

  /* resposta ao toque e ao passar o mouse */
  .btn, .chip, .tile, .segmentos button, .lateral a.nav, .tabela tr.clic td { transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
  .btn:active, .chip:active, .segmentos button:active, .tile:active { transform: scale(.97); }
  @media (hover: hover) {
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: scale(.97); }
    .tile:hover { transform: translateY(-2px); }
  }

  /* troca de tema: cores passam suavemente em vez de piscar */
  .trocando, .trocando * { transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s, box-shadow .4s, fill .4s, stroke .4s !important; }
}

/* Celular e tablet: o iPhone dá zoom sozinho ao tocar num campo com letra menor que 16px.
   16px nos campos resolve sem travar o zoom de pinça (que precisa continuar para acessibilidade). */
@media (pointer: coarse) {
  /* como aplicativo: toque duplo não dá zoom, sem clarão cinza no toque, letra não cresce ao girar o celular */
  html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  input.cel { height: 36px; }
}

/* App instalado no celular (tela de início): a página desenha por baixo da barra de status (viewport-fit=cover).
   A barra azul-marinho encosta no topo e cobre essa área, sem fresta onde o conteúdo rolado aparece borrado. */
@media (display-mode: standalone) and (max-width: 800px) {
  .casca { padding-top: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .lateral { top: 0; margin: 0 -8px; border-radius: 0 0 var(--r-card) var(--r-card);
    padding: calc(env(safe-area-inset-top) + 8px) 16px 10px 18px; max-height: 100dvh; }
  .entrada { padding-top: calc(env(safe-area-inset-top) + 12px); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .entrada.dupla { padding: 0 0 calc(8px + env(safe-area-inset-bottom)); }
  .vitrine { border-radius: 0 0 var(--r-card) var(--r-card); padding-top: calc(env(safe-area-inset-top) + 18px); }
  .lado-form { padding: 0 8px; }
  #aviso { bottom: calc(20px + env(safe-area-inset-bottom)); }
}