@font-face { font-family: "Figtree"; src: url("/static/fonts/Figtree.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/BricolageGrotesque.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --fundo: #F1F1F8; --folha: #FFFFFF; --folha-2: #F7F6FC; --tinta: #1C1636; --tinta-2: #5F5977; --linha: #E2E0EE; --campo: #FFFFFF; --borda-campo: #B9B5CC;
  --nav: #17123A; --nav-2: #241C52; --nav-tinta: #E8E5F8; --nav-fraco: #A49FC4;
  --sol: #FFC454; --sol-tinta: #2B123A; --sol-claro: #FFF3D6;
  --andy: #5B4BDB; --travel: #0B8580; --poli: #2563EB; --beca: #D6336C;
  --andy-claro: #E9E6FD; --travel-claro: #D5F2EF; --poli-claro: #DFE9FE; --beca-claro: #FCE3EC;
  --perigo: #B4231A; --perigo-claro: #FCE4E2; --ok: #14733F; --ok-claro: #D8F3E3;
  --sombra: 0 1px 2px rgba(28, 22, 54, .05), 0 8px 24px -14px rgba(28, 22, 54, .22);
  --canal: var(--andy); --canal-claro: var(--andy-claro);
  --texto: "Figtree", "Segoe UI", system-ui, sans-serif; --titulo: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fundo: #100C24; --folha: #1B1636; --folha-2: #231D44; --tinta: #F1EFFB; --tinta-2: #ADA8C8; --linha: #332C5A; --campo: #15112C; --borda-campo: #4F4778;
  --nav: #0B0819; --nav-2: #1D1742; --sol-claro: #3B2F12;
  --andy: #9A8EFA; --travel: #3FD0C7; --poli: #7FA8FB; --beca: #F77FA9;
  --andy-claro: #2A2459; --travel-claro: #0F3836; --poli-claro: #182C5C; --beca-claro: #4A1730;
  --perigo: #FF9C94; --perigo-claro: #471A17; --ok: #6EDB9F; --ok-claro: #123B25; --sombra: 0 10px 28px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --fundo: #100C24; --folha: #1B1636; --folha-2: #231D44; --tinta: #F1EFFB; --tinta-2: #ADA8C8; --linha: #332C5A; --campo: #15112C; --borda-campo: #4F4778;
  --nav: #0B0819; --nav-2: #1D1742; --sol-claro: #3B2F12;
  --andy: #9A8EFA; --travel: #3FD0C7; --poli: #7FA8FB; --beca: #F77FA9;
  --andy-claro: #2A2459; --travel-claro: #0F3836; --poli-claro: #182C5C; --beca-claro: #4A1730;
  --perigo: #FF9C94; --perigo-claro: #471A17; --ok: #6EDB9F; --ok-claro: #123B25; --sombra: 0 10px 28px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 16px/1.55 var(--texto); -webkit-font-smoothing: antialiased; }
.travel { --canal: var(--travel); --canal-claro: var(--travel-claro); }
.poli { --canal: var(--poli); --canal-claro: var(--poli-claro); }
.beca { --canal: var(--beca); --canal-claro: var(--beca-claro); }
.andy { --canal: var(--andy); --canal-claro: var(--andy-claro); }
h1, h2 { font-family: var(--titulo); }
h1 { font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.08; margin: 0; font-weight: 720; letter-spacing: -.02em; }
h2 { font-size: 1.22rem; line-height: 1.2; margin: 0 0 .7rem; font-weight: 680; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 .3rem; font-weight: 650; }
p { margin: 0 0 .6rem; max-width: 72ch; }
a { color: inherit; text-underline-offset: 2px; }
small, .fraco { color: var(--tinta-2); font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }
.quebra { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; border-radius: 4px; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* moldura */
.quadro { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--nav); color: var(--nav-tinta); padding: 1.1rem .8rem .8rem; display: flex; flex-direction: column; gap: .1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 20; }
.marca { font: 720 1.3rem/1 var(--titulo); letter-spacing: -.02em; padding: .2rem .55rem 1rem; display: flex; align-items: center; gap: .6rem; color: #fff; }
.marca i { width: 30px; height: 30px; border-radius: 9px; background: var(--sol); display: grid; place-items: center; color: var(--sol-tinta); flex: none; }
.marca i svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.grupo { font-size: .78rem; color: var(--nav-fraco); padding: .95rem .6rem .25rem; }
.lateral a { color: inherit; text-decoration: none; padding: .46rem .6rem; border-radius: 10px; display: flex; align-items: center; gap: .65rem; font-weight: 500; }
.lateral a:hover { background: var(--nav-2); }
.lateral a.ativo { background: var(--nav-2); color: #fff; font-weight: 650; box-shadow: inset 3px 0 0 var(--sol); }
.lateral a img { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.lateral a .ic { color: var(--nav-fraco); width: 19px; height: 19px; margin: 0 3.5px; }
.lateral a.ativo .ic { color: var(--sol); }
.lateral .contagem { margin-left: auto; background: var(--sol); color: var(--sol-tinta); font-size: .74rem; font-weight: 800; min-width: 21px; text-align: center; padding: 0 .35rem; border-radius: 99px; line-height: 21px; }
.rodape { margin-top: auto; padding-top: .9rem; }
.temas button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--folha); }
.quem { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem; border-radius: 12px; background: var(--nav-2); border: 1px solid transparent; color: var(--nav-tinta); text-align: left; cursor: pointer; font: inherit; }
.quem:hover, .quem.ativo { background: var(--nav-2); border-color: var(--sol); }
.quem > .ic { margin-left: auto; color: var(--nav-fraco); transition: transform .12s; }
.quem[aria-expanded="true"] > .ic { transform: rotate(180deg); }
.quem .ini { width: 34px; height: 34px; border-radius: 10px; background: var(--sol); color: var(--sol-tinta); display: grid; place-items: center; font-weight: 800; flex: none; }
.quem-texto { min-width: 0; line-height: 1.2; }
.quem b { display: block; font-size: .92rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.quem small { color: var(--nav-fraco); font-size: .76rem; }
.menu-conta { position: absolute; left: 0; right: 0; bottom: calc(100% - .3rem); background: var(--nav-2); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: .3rem; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .7); z-index: 5; }
.menu-conta[hidden] { display: none; }
.menu-conta a, .menu-conta button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 9px; background: none; color: var(--nav-tinta); font: 500 .95rem var(--texto); text-decoration: none; cursor: pointer; }
.menu-conta a:hover, .menu-conta button:hover { background: rgba(255, 255, 255, .1); border: 0; }
.menu-conta .ic, .lateral .menu-conta a .ic { margin: 0; color: var(--nav-fraco); width: 18px; height: 18px; }
.topo-movel { display: none; }
main { padding: 2rem clamp(1rem, 3vw, 2.6rem) 4rem; min-width: 0; max-width: 1320px; width: 100%; }
.cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.cabeca p { margin: .3rem 0 0; color: var(--tinta-2); }
.cabeca .retrato { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.cabeca .retrato img { width: 72px; height: 72px; border-radius: 20px; flex: none; }

/* blocos */
.faixa { background: var(--folha); border: 1px solid var(--linha); border-radius: 18px; padding: 1.2rem 1.3rem; margin-bottom: 1.1rem; box-shadow: var(--sombra); }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; align-items: start; }
.duas > .faixa { margin-bottom: 0; }
.aviso { display: flex; gap: .7rem; background: var(--sol-claro); border-radius: 14px; padding: .75rem 1rem; margin-bottom: 1rem; }
.aviso > .ic { margin-top: .2em; color: var(--tinta); }
.aviso.erro { background: var(--perigo-claro); }
.aviso.erro > .ic { color: var(--perigo); }
.aviso p:last-child { margin-bottom: 0; }

/* botões e formulários */
button, .botao { font: inherit; font-weight: 620; border: 1px solid var(--borda-campo); background: var(--folha); color: var(--tinta); padding: .5rem .95rem; border-radius: 11px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; transition: background .12s, border-color .12s; }
button:hover, .botao:hover { border-color: var(--tinta-2); background: var(--folha-2); }
button.primario, .botao.primario { background: var(--tinta); border-color: var(--tinta); color: var(--folha); }
button.primario:hover, .botao.primario:hover { opacity: .88; background: var(--tinta); }
button.perigo { border-color: var(--perigo); color: var(--perigo); }
button:disabled { opacity: .5; cursor: not-allowed; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
label { display: block; font-weight: 600; font-size: .9rem; margin: .7rem 0 .25rem; }
input, select, textarea { font: inherit; width: 100%; padding: .55rem .7rem; border: 1px solid var(--borda-campo); border-radius: 10px; background: var(--campo); color: var(--tinta); }
input[type=checkbox] { width: auto; margin-right: .45rem; accent-color: var(--canal); }
input[type=file] { padding: .4rem; }
textarea { min-height: 100px; resize: vertical; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1rem; }
.ajuda { font-size: .85rem; color: var(--tinta-2); margin: .2rem 0 0; }

/* tabelas e estados */
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th { text-align: left; font-weight: 650; color: var(--tinta-2); border-bottom: 1px solid var(--linha); padding: .4rem .7rem .5rem 0; white-space: nowrap; font-size: .85rem; }
td { border-bottom: 1px solid var(--linha); padding: .55rem .7rem .55rem 0; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.rolagem { overflow-x: auto; }
.estado { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1rem .6rem; border-radius: 99px; background: var(--canal-claro); color: var(--tinta); white-space: nowrap; }
.estado.espera { background: var(--sol); color: var(--sol-tinta); }
.estado.erro { background: var(--perigo-claro); color: var(--perigo); }
.estado.ok { background: var(--ok-claro); color: var(--ok); }
ul.lista { list-style: none; margin: 0; padding: 0; }
ul.lista li { padding: .6rem 0; border-bottom: 1px solid var(--linha); }
ul.lista li:last-child { border: 0; }
.trecho { border-left: 3px solid var(--canal); padding-left: .7rem; margin: .4rem 0; font-size: .9rem; }
details summary { cursor: pointer; font-weight: 620; }
img.miniatura { width: 100%; display: block; border-radius: 12px; }

/* Andy: o time inteiro numa faixa. É a identidade do portal. */
.abertura { position: relative; overflow: hidden; background: var(--nav); color: #fff; border-radius: 24px; padding: clamp(1.3rem, 3vw, 2.2rem); margin-bottom: 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; }
.abertura::after { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 300px at 88% 15%, rgba(109, 94, 245, .55), transparent 70%), radial-gradient(420px 260px at 62% 120%, rgba(214, 51, 108, .4), transparent 70%); pointer-events: none; }
.abertura > * { position: relative; z-index: 1; }
.abertura h1 { color: #fff; }
.abertura p { color: #CFCBE8; margin: .45rem 0 0; }
.abertura .contador { font: 760 clamp(3rem, 7vw, 5rem)/.9 var(--titulo); color: var(--sol); font-variant-numeric: tabular-nums; }
.abertura button { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); margin-top: .9rem; }
.abertura button:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }
.canal-painel { background: var(--folha); border: 1px solid var(--linha); border-radius: 20px; padding: 1.1rem 1.2rem; box-shadow: var(--sombra); display: flex; flex-direction: column; min-width: 0; }
.agente { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.agente img { width: 54px; height: 54px; border-radius: 16px; flex: none; }
.agente h2 { margin: 0; }
.agente h2 a { text-decoration: none; }
.agente h2 a:hover { color: var(--canal); }
.agente small { display: block; line-height: 1.25; }
.medidor { height: 7px; background: var(--canal-claro); border-radius: 99px; overflow: hidden; margin: .25rem 0 .1rem; }
.medidor span { display: block; height: 100%; background: var(--canal); border-radius: 99px; }

/* projetos com capa */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1rem; }
.cartao { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; background: var(--folha-2); min-width: 0; transition: border-color .12s; }
.cartao:hover { border-color: var(--canal); }
.cartao .capa { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--canal-claro), var(--folha)); display: grid; place-items: center; color: var(--canal); }
.cartao .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao .capa .ic { width: 34px; height: 34px; }
.cartao.vertical .capa { aspect-ratio: 4 / 5; }
.cartao > div:last-child { padding: .7rem .8rem .8rem; }
.cartao h3 { margin-bottom: .4rem; overflow-wrap: anywhere; }

/* etapas */
.etapas { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.1rem; padding: 0; list-style: none; counter-reset: etapa; }
.etapas li { counter-increment: etapa; font-size: .8rem; padding: .2rem .65rem; border-radius: 99px; background: var(--linha); color: var(--tinta-2); }
.etapas li::before { content: counter(etapa) ". "; font-weight: 700; }
.etapas li.feita { background: var(--canal-claro); color: var(--tinta); }
.etapas li.agora { background: var(--canal); color: var(--folha); font-weight: 700; }

/* mesa de revisão */
.revisao { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); gap: 1.1rem; align-items: start; }
.tela { background: #000; border-radius: 16px 16px 0 0; overflow: hidden; }
.tela video { display: block; width: 100%; max-height: 62vh; background: #000; }
.saidas { display: flex; gap: .3rem; margin-bottom: .6rem; flex-wrap: wrap; }
.saidas button[aria-pressed=true] { background: var(--tinta); color: var(--folha); }
.timeline { background: #17123A; color: #DDD9F3; padding: .75rem .85rem .85rem; font-size: .75rem; border-radius: 0 0 16px 16px; }
.timeline .pista { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; margin-top: 4px; }
.timeline .trilho { position: relative; height: 22px; background: #2A2358; border-radius: 5px; overflow: hidden; }
.timeline .bloco { position: absolute; top: 0; bottom: 0; overflow: hidden; white-space: nowrap; padding: 3px 4px; font-size: .68rem; border: 0; border-right: 1px solid #17123A; color: #fff; background: var(--canal); cursor: pointer; border-radius: 0; font-weight: 400; display: block; }
.timeline .bloco:hover { filter: brightness(1.2); background: var(--canal); }
.timeline .bloco.narr { background: #B8860B; }
.timeline .bloco.mus { background: #3D6E8F; }
.timeline .bloco.cap { background: #5F5977; }
.timeline .regua { display: flex; justify-content: space-between; color: #A49FC4; margin-top: 3px; padding-left: 70px; font-variant-numeric: tabular-nums; }

.decisao { background: var(--nav); color: #fff; padding: 1.15rem 1.2rem; position: sticky; top: 1rem; border-radius: 20px; }
.decisao h2 { display: flex; gap: .55rem; align-items: center; color: #fff; }
.decisao h2 i { width: 13px; height: 13px; border-radius: 50%; background: var(--sol); box-shadow: 0 0 0 4px rgba(255, 196, 84, .28); flex: none; }
.decisao.feita h2 i { background: #55C587; box-shadow: 0 0 0 4px rgba(85, 197, 135, .28); }
.decisao dl { margin: .4rem 0 .8rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; font-size: .9rem; }
.decisao dt { color: #A49FC4; }
.decisao dd { margin: 0; overflow-wrap: anywhere; }
.decisao button { width: 100%; justify-content: center; margin-top: .45rem; background: transparent; color: #fff; border-color: #5A5288; }
.decisao button:hover { background: #241C52; border-color: #8C85B8; }
.decisao button.aprovar { background: var(--sol); color: var(--sol-tinta); border-color: var(--sol); font-weight: 760; }
.decisao button.aprovar:hover { background: #FFD27A; border-color: #FFD27A; }
.decisao .hash { font-size: .74rem; color: #A49FC4; overflow-wrap: anywhere; }
.decisao p { color: #DAD6F0; }

/* prévia do Instagram */
.celular { max-width: 400px; margin: 0 auto; background: var(--folha); border: 1px solid var(--linha); border-radius: 28px; padding: .7rem .7rem 1rem; box-shadow: var(--sombra); }
.celular .perfil { display: flex; align-items: center; gap: .55rem; padding: .25rem .35rem .6rem; font-weight: 650; font-size: .92rem; }
.celular .perfil .ini { width: 32px; height: 32px; border-radius: 50%; background: var(--beca); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.carrossel { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 4 / 5; }
.carrossel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrossel button { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 0; color: #1C1636; }
.carrossel button:disabled { display: none; }
.carrossel .ant { left: .5rem; } .carrossel .prox { right: .5rem; }
.pontos { display: flex; justify-content: center; gap: 5px; margin: .6rem 0; }
.pontos span { width: 7px; height: 7px; border-radius: 50%; background: var(--linha); }
.pontos span.agora { background: var(--beca); }
.legenda { white-space: pre-wrap; font-size: .9rem; padding: 0 .35rem; overflow-wrap: anywhere; }

/* entrada: sempre escura, com a rede de agentes ao fundo */
.login {
  --tinta: #F4F2FF; --tinta-2: #BDB7DC; --campo: rgba(255, 255, 255, .07); --borda-campo: rgba(255, 255, 255, .24); --perigo: #FFB4AE; --perigo-claro: rgba(180, 35, 26, .32);
  position: relative; overflow: hidden; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(400px, 1fr); color: var(--tinta); color-scheme: dark;
  background: radial-gradient(900px 620px at 18% 12%, #3A2A9C 0, transparent 68%), radial-gradient(760px 560px at 78% 88%, #6E1654 0, transparent 66%), #0A0720;
}
.login .rede { position: absolute; inset: 0; width: 100%; height: 100%; }
.login .arte { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 4vw, 3.5rem); pointer-events: none; }
.titulo-ia h2 { font: 720 clamp(2.1rem, 3.7vw, 3.5rem)/1.04 var(--titulo); color: #fff; letter-spacing: -.028em; margin: .9rem 0 .8rem; }
.titulo-ia h2 span { display: block; }
.titulo-ia p { color: var(--tinta-2); margin: 0; max-width: 46ch; }
.selo { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 620; color: #E4DFFF; padding: .28rem .75rem; border-radius: 99px; background: rgba(167, 139, 250, .16); border: 1px solid rgba(167, 139, 250, .42); }
.selo .ic { color: var(--sol); }
.login .lado { position: relative; z-index: 1; display: grid; place-items: center; padding: 2rem 16px; }
.vidro { width: 100%; max-width: 400px; padding: 2rem; border-radius: 26px; background: rgba(23, 18, 58, .62); border: 1px solid rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85); }
.vidro .marca { color: #fff; padding: 0 0 1.5rem; }
.vidro h1 { margin-bottom: .35rem; color: #fff; }
.vidro > p { color: var(--tinta-2); }
.vidro input:focus { border-color: var(--sol); outline: 0; box-shadow: 0 0 0 3px rgba(255, 196, 84, .25); }
.vidro button.primario, .vidro button.primario:hover { background: var(--sol); border-color: var(--sol); color: var(--sol-tinta); font-weight: 760; opacity: 1; }
.vidro button.primario:hover { background: #FFD27A; border-color: #FFD27A; }
.senha { position: relative; }
.senha input { padding-right: 2.8rem; }
.senha button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 38px; padding: 0; justify-content: center; border: 0; background: none; color: var(--tinta-2); }
.login .entrar { width: 100%; justify-content: center; margin-top: 1.1rem; padding: .7rem; }
.erro-form { background: var(--perigo-claro); color: var(--perigo); border-radius: 10px; padding: .55rem .75rem; font-size: .9rem; margin-top: .8rem; font-weight: 550; }
.conta { max-width: 560px; }

dialog { border: 0; padding: 1.4rem; max-width: 520px; width: calc(100% - 32px); border-radius: 20px; background: var(--folha); color: var(--tinta); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
dialog::backdrop { background: rgba(16, 10, 40, .6); }
#toast { position: fixed; right: 16px; bottom: 16px; max-width: min(460px, calc(100vw - 32px)); z-index: 50; }
#toast div { background: var(--tinta); color: var(--folha); padding: .7rem 1rem; margin-top: .4rem; border-radius: 12px; box-shadow: var(--sombra); }
#toast div.erro { background: var(--perigo); color: #fff; }

@media (max-width: 960px) {
  .quadro { grid-template-columns: minmax(0, 1fr); }
  .topo-movel { display: flex; align-items: center; justify-content: space-between; background: var(--nav); color: #fff; padding: .6rem 16px; position: sticky; top: 0; z-index: 25; }
  .topo-movel .marca { padding: 0; font-size: 1.15rem; }
  .topo-movel button { background: none; border: 0; color: #fff; padding: .35rem; }
  .lateral { display: none; position: fixed; inset: 49px 0 0; height: auto; }
  .lateral .marca { display: none; }
  .quadro.aberto .lateral { display: flex; }
  main { padding: 1.1rem 16px 3rem; }
  .revisao { grid-template-columns: minmax(0, 1fr); }
  .decisao { position: static; }
  .canais, .duas { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; }
  .login .arte { min-height: 430px; padding: 1.2rem 16px 0; }
  .titulo-ia h2 { font-size: 1.75rem; margin: .6rem 0 .4rem; }
  .titulo-ia p { font-size: .92rem; }
  .selo { display: none; }
  .login .lado { padding: 1.3rem 16px 2rem; }
  .vidro { padding: 1.4rem; }
  .vidro .marca { padding-bottom: 1rem; }
  .abertura { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: entra .16s ease-out; }
  @keyframes entra { from { opacity: 0; transform: translateY(8px); } }
}
main a { overflow-wrap: anywhere; }
@media (max-width: 960px) { .cabeca .retrato img { width: 56px; height: 56px; border-radius: 16px; } }
.opcao { background: var(--canal-claro); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .6rem; }
.opcao p { margin-bottom: .3rem; }
.opcao label { margin-top: .5rem; }
.opcao input[type=number] { max-width: 120px; background: var(--campo); display: block; }
.lateral { scrollbar-width: thin; scrollbar-color: var(--nav-2) transparent; }
.rodape { position: sticky; bottom: -.8rem; background: var(--nav); padding-bottom: .8rem; }
/* Notebook de tela baixa: o menu inteiro continua visível, sem cortar o rodapé. */
@media (min-width: 961px) and (max-height: 800px) {
  .marca { padding-bottom: .5rem; }
  .grupo { padding: .4rem .6rem .1rem; }
  .lateral a { padding: .28rem .6rem; }
  .lateral a img { width: 22px; height: 22px; }
  .quem { padding: .35rem .5rem; }
  .rodape { padding-top: .4rem; }
}
form .entrar { margin-top: 1rem; }
/* No celular, a barra do navegador muda a altura visível: o rodapé com o nome precisa continuar à vista. */
.lateral { height: 100dvh; }
@media (max-width: 960px) { .lateral { height: auto; } }

/* Dashboard */
:root { --g-travel: #00897B; --g-poli: #2563EB; --g-beca: #D6336C; --grade: #ECEAF4; --eixo: #6F698A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-travel: #14A396; --g-poli: #5487EA; --g-beca: #E55C90; --grade: #2B2550; --eixo: #9A95B8; } }
:root[data-theme="dark"] { --g-travel: #14A396; --g-poli: #5487EA; --g-beca: #E55C90; --grade: #2B2550; --eixo: #9A95B8; }
.dash-filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.segmento { display: inline-flex; background: var(--folha); border: 1px solid var(--linha); border-radius: 11px; padding: 3px; }
.segmento button { border: 0; background: none; padding: .32rem .75rem; border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--tinta-2); }
.segmento button:hover { background: var(--folha-2); }
.segmento button[aria-pressed="true"] { background: var(--tinta); color: var(--folha); }
.dash-filtros select { width: auto; padding: .42rem .7rem; font-size: .92rem; }
.dash-filtros label { margin: 0; font-weight: 550; display: flex; align-items: center; font-size: .9rem; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.kpi { background: var(--folha); border: 1px solid var(--linha); border-radius: 16px; padding: .85rem 1rem; box-shadow: var(--sombra); text-decoration: none; display: block; min-width: 0; }
a.kpi:hover { border-color: var(--tinta-2); }
.kpi .rot { display: flex; align-items: center; gap: .4rem; color: var(--tinta-2); font-size: .85rem; font-weight: 550; }
.kpi .val { font: 720 2rem/1.1 var(--texto); letter-spacing: -.02em; margin: .3rem 0 .15rem; }
.kpi small { display: block; line-height: 1.3; }
.kpi.alerta .val { color: var(--perigo); }
.kpi.espera { background: var(--sol-claro); border-color: transparent; }
.dash-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; align-items: stretch; }
.dash-grade > .faixa { margin: 0; min-width: 0; }
.c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; }
.bloco-topo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: .6rem; }
.bloco-topo h2 { margin: 0; }
.bloco-topo p { margin: .1rem 0 0; }
.legenda-g { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .85rem; color: var(--tinta-2); margin-bottom: .4rem; }
.legenda-g span { display: inline-flex; align-items: center; gap: .35rem; }
.legenda-g i { width: 10px; height: 10px; border-radius: 3px; }
.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; overflow: visible; }
.grafico text { font: 500 11.5px var(--texto); fill: var(--eixo); }
.grafico .alvo { fill: transparent; }
.grafico .alvo:hover, .grafico .alvo:focus { fill: var(--grade); opacity: .55; outline: 0; }
.dica { position: fixed; z-index: 60; pointer-events: none; background: var(--folha); color: var(--tinta); border: 1px solid var(--linha); border-radius: 10px; padding: .45rem .65rem; font-size: .84rem; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45); max-width: 240px; }
.dica b { display: block; margin-bottom: .15rem; font-weight: 650; }
.dica div { display: flex; align-items: center; gap: .4rem; }
.dica i { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.dica strong { font-variant-numeric: tabular-nums; }
.vazio { min-height: 150px; display: grid; place-items: center; text-align: center; color: var(--tinta-2); padding: 1rem; font-size: .93rem; }
.vazio .ic { display: block; margin: 0 auto .4rem; width: 26px; height: 26px; opacity: .6; }
.matriz { width: 100%; border-collapse: separate; border-spacing: 4px; }
.matriz th { border: 0; font-size: .8rem; padding: 0 .2rem .2rem; text-align: center; white-space: normal; line-height: 1.15; vertical-align: bottom; }
.matriz th:first-child { text-align: left; }
.matriz td { border: 0; padding: 0; }
.matriz .ag { display: flex; align-items: center; gap: .5rem; font-weight: 620; white-space: nowrap; padding-right: .4rem; }
.matriz .ag img { width: 28px; height: 28px; border-radius: 9px; }
.matriz .cel { text-align: center; border-radius: 10px; padding: .5rem .2rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.barra-h { display: grid; grid-template-columns: minmax(90px, 40%) minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .28rem 0; font-size: .9rem; }
.barra-h .t { overflow-wrap: anywhere; }
.barra-h .trilha { height: 10px; background: var(--grade); border-radius: 99px; overflow: hidden; }
.barra-h .trilha span { display: block; height: 100%; border-radius: 99px; background: var(--andy); }
.barra-h .v { font-variant-numeric: tabular-nums; color: var(--tinta-2); font-size: .85rem; }
.teto { padding: .5rem 0; border-bottom: 1px solid var(--linha); }
.teto:last-child { border: 0; }
.teto .lin { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .9rem; margin-bottom: .25rem; }
.teto .lin b { font-weight: 620; display: flex; align-items: center; gap: .45rem; }
.teto img { width: 24px; height: 24px; border-radius: 8px; }
.saude { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; }
.saude li { display: flex; align-items: center; gap: .4rem; font-size: .9rem; padding: .2rem 0; min-width: 0; }
.saude .ok { color: var(--ok); } .saude .nao { color: var(--tinta-2); } .saude .mal { color: var(--perigo); }
.saude .ic { width: 16px; height: 16px; }
.subt { font-size: .82rem; font-weight: 650; color: var(--tinta-2); margin: .8rem 0 .25rem; }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--linha); font-size: .92rem; }
.linha-tempo li:last-child { border: 0; }
.linha-tempo .pt { width: 30px; height: 30px; border-radius: 9px; background: var(--folha-2); display: grid; place-items: center; color: var(--tinta-2); }
.linha-tempo .pt img { width: 30px; height: 30px; border-radius: 9px; }
.linha-tempo .pt .ic { width: 16px; height: 16px; }
@media (max-width: 1100px) { .c8, .c7, .c6, .c5, .c4 { grid-column: span 12; } }
.saude.uma { grid-template-columns: minmax(0, 1fr); }
.saude.uma li > .fraco:last-child { margin-left: auto; }
.pilha { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.pilha > .faixa { margin: 0; flex: 1; }
.pilha .vazio { min-height: 110px; }
.matriz td { vertical-align: middle; }
@media (max-width: 1100px) { .pilha { grid-column: span 12; } }
@media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi .val { font-size: 1.6rem; } }

/* Paginação */
.paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--linha); }
.paginas nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.paginas .pg { min-width: 36px; height: 36px; padding: 0 .55rem; justify-content: center; border: 1px solid var(--linha); background: var(--folha); color: var(--tinta); border-radius: 10px; font-weight: 600; }
.paginas .pg:hover:not(:disabled) { background: var(--folha-2); }
.paginas .pg[aria-current="page"] { background: var(--tinta); color: var(--folha); border-color: var(--tinta); }
.paginas .pg:disabled { opacity: .4; cursor: default; }
.paginas .reticencias { padding: 0 .3rem; }
.paginas .tam { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; color: var(--tinta-2); font-weight: 500; }
.paginas .tam select { width: auto; padding: .3rem .5rem; }

/* Celular: tabelas paginadas viram cartões, sem rolagem lateral. */
@media (max-width: 720px) {
  .paginado .rolagem { overflow: visible; }
  .paginado table, .paginado tbody, .paginado tr, .paginado td { display: block; width: 100%; }
  .paginado thead { display: none; }
  .paginado tr { border: 1px solid var(--linha); border-radius: 14px; padding: .55rem .8rem; margin-bottom: .6rem; background: var(--folha-2); }
  .paginado td { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: .6rem; border: 0; padding: .28rem 0; text-align: left; }
  .paginado td[data-rotulo]::before { content: attr(data-rotulo); color: var(--tinta-2); font-weight: 600; font-size: .85rem; }
  .paginado td:empty { display: none; }
  .paginas { justify-content: center; }
  .paginas > .fraco { width: 100%; text-align: center; }
  .paginas .pg { min-width: 40px; height: 40px; }
}