/* Painel do time do clone da Ju. Visual próprio: tema claro, verde-petróleo como cor de ação, fonte do sistema. */
:root {
  color-scheme: dark;
  --tinta: #e6e6ee;
  --tinta-suave: #a8a8bd;
  --fundo: #0f0f13;
  --papel: #17171d;
  --papel2: #1e1e27;
  --linha: #2e2e3b;
  --acento: #7c3aed;
  --acento-escuro: #6d28d9;
  --acento-claro: #2b2150;
  --link: #a78bfa;
  --degrade: linear-gradient(135deg, #2563eb, #7c3aed);
  --azul: #60a5fa;
  --azul-claro: #16233d;
  --verde: #4ade80;
  --verde-claro: #11291c;
  --laranja: #fb923c;
  --laranja-claro: #34200f;
  --vermelho: #f87171;
  --vermelho-claro: #381717;
  --cinza-claro: #25252f;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .25);
  --raio: 0.75rem;
  --lateral: 236px;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.45; color: var(--tinta); background: var(--fundo);
}
[x-cloak] { display: none !important; }
input[type=checkbox], input[type=radio], progress { accent-color: #7c3aed; }
h1 { font-size: 1.45rem; margin: 0 0 .4rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
h3 { font-size: .8rem; margin: 1.1rem 0 .4rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
a { color: var(--link); }
::placeholder { color: #8a8aa0; opacity: 1; }
::selection { background: #5b3cc4; color: #fff; }
small, .dica, .sub { color: var(--tinta-suave); }
.dica { font-size: .88rem; }
.sub { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); height: 100dvh; }
.lateral { background: #121218; border-right: 1px solid var(--linha); color: #d4d4e0; padding: 1rem .75rem; display: flex; flex-direction: column; gap: 1.2rem; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; font-weight: 650; line-height: 1.15; }
.marca small { display: block; font-weight: 400; font-size: .75rem; color: #a3a3b8; }
.marca-logo { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #2a2a38; }
.marca-logo-grande { width: 4rem; height: 4rem; }
.marca-sinal { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: #2aa7a1; color: #06302e; font-weight: 800; font-size: 1.15rem; }
.marca-grande { color: var(--tinta); margin-bottom: 1rem; }
.marca-grande small { color: var(--tinta-suave); }
.lateral nav { display: flex; flex-direction: column; gap: .15rem; }
.item { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border-radius: 8px; color: #c9c9d8; text-decoration: none; font-weight: 500; }
a.item:hover { background: #1e1e29; }
a.item.ativo { background: var(--degrade); color: #fff; font-weight: 650; box-shadow: 0 4px 14px rgba(124, 58, 237, .35); }
.item-breve { color: #8e8ea3; cursor: default; }
.item-breve em { font-style: normal; font-size: .68rem; border: 1px solid #3a3a4a; border-radius: 99px; padding: 0 .45rem; color: #a3a3b8; }
.contadores { display: inline-flex; gap: .25rem; }
.cont { display: inline-block; min-width: 1.35rem; text-align: center; padding: 0 .35rem; border-radius: 99px; font-size: .72rem; font-weight: 700; color: #fff; }
.cont-azul { background: #2563eb; } .cont-vermelho { background: #dc2626; } .cont-laranja { background: #c2410c; }
a.item.ativo .cont { box-shadow: 0 0 0 2px #7c3aed; }

.principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1.1rem; background: var(--papel); border-bottom: 1px solid var(--linha); }
.topo-usuario { display: flex; align-items: center; gap: .9rem; }
.topo-usuario form { margin: 0; }
.usuario-link { display: flex; flex-direction: column; line-height: 1.15; text-align: right; text-decoration: none; color: var(--tinta); }
.usuario-link small { font-size: .75rem; }
.estado { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border-radius: 99px; font-weight: 650; font-size: .9rem; }
.estado i { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.estado-verde { background: var(--verde-claro); color: var(--verde); }
.estado-vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.estado-laranja { background: var(--laranja-claro); color: var(--laranja); }
.estado-cinza { background: var(--cinza-claro); color: var(--tinta-suave); }
.faixa-pausa { background: #b91c1c; color: #fff; padding: .55rem 1.1rem; font-size: .93rem; }
.faixa-pausa a { color: #fff; font-weight: 650; margin-left: .5rem; }
.faixa-aviso { background: #7a4a00; }
.conteudo { flex: 1; min-height: 0; overflow-y: auto; padding: 1.3rem 1.5rem 2rem; }
.conteudo-chat { padding: 0; overflow: hidden; }

.inferior { display: none; }

/* ---------- avisos ---------- */
.avisos { padding: 0 1.1rem; }
.avisos:empty { display: none; }
.aviso { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin: .6rem 0; padding: .65rem .9rem; border-radius: 8px; font-size: .93rem; }
.aviso.erro { background: var(--vermelho-claro); color: #fca5a5; border: 1px solid #7f2a2a; }
.aviso.ok { background: var(--verde-claro); color: #86efac; border: 1px solid #1f5a37; }
.fechar { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 .2rem; }

/* ---------- componentes ---------- */
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.2rem 1.3rem; margin-bottom: 1.1rem; box-shadow: var(--sombra); }
.cartao-estreito { max-width: 480px; }
.cartao-medio { max-width: 760px; }
.cabecalho-tela { margin-bottom: .6rem; }
.btn { display: inline-block; border: 1px solid transparent; background: var(--degrade); color: #fff; padding: .5rem 1rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-claro { background: var(--papel2); border-color: #3a3a4a; color: #c4b5fd; }
.btn-claro:hover { background: var(--acento-claro); filter: none; }
.btn-perigo { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-perigo:hover { background: #991b1b; filter: none; }
.btn-pequeno { padding: .3rem .7rem; font-size: .86rem; }
.btn-grande { width: 100%; padding: .7rem 1rem; font-size: 1rem; }
.btn-mini { padding: .1rem .5rem; font-size: .95rem; background: var(--papel); color: var(--tinta); border-color: var(--linha); }
.btn-mini:hover { background: var(--cinza-claro); }
.btn-mini.ativo { background: var(--acento-claro); border-color: var(--link); }
.btn-texto { border-color: transparent; font-size: .8rem; color: var(--tinta-suave); text-decoration: underline; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.formulario { display: flex; flex-direction: column; gap: .85rem; }
.formulario label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .9rem; }
.formulario label small { font-weight: 400; }
.formulario .marcar { flex-direction: row; align-items: center; gap: .5rem; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; }
.largura-total { grid-column: 1 / -1; }
.alinhar-fim { align-self: end; }
.em-linha { display: flex; flex-direction: row; align-items: flex-end; gap: .5rem; margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  font: inherit; font-weight: 400; color: var(--tinta); background: var(--papel2); border: 1px solid #3a3a4a; border-radius: 8px; padding: .5rem .65rem; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--link); }
textarea { resize: vertical; }
.erro-campo { color: var(--vermelho); font-weight: 500; font-size: .85rem; }
.lista-links { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-links li { padding: .7rem 0; border-bottom: 1px solid var(--linha); }
.lista-links .breve { color: var(--tinta-suave); font-size: .88rem; }
.senha-provisoria { font: 700 1.5rem ui-monospace, Consolas, monospace; letter-spacing: .04em; background: #2a2410; color: #fde68a; border: 2px dashed #b58a00; padding: .8rem; border-radius: 8px; text-align: center; user-select: all; }

/* login */
.login-fundo { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; background: #07070b; position: relative; overflow: hidden; }
.login-fundo::before, .login-fundo::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); }
.login-fundo::before { top: 50%; left: 50%; width: 130%; height: 85%; min-width: 520px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(139, 69, 255, .6) 0%, rgba(139, 69, 255, .32) 40%, rgba(139, 69, 255, .12) 70%, transparent 100%);
  animation: nevoa 9s ease-in-out infinite; }
.login-fundo::after { top: 8%; right: -10%; width: 55%; height: 60%;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, .28) 0%, rgba(59, 130, 246, .1) 50%, transparent 90%);
  animation: nevoa 13s ease-in-out infinite reverse; }
@keyframes nevoa { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 50% { transform: translate(-48%, -52%) scale(1.08); opacity: 1; } }
.login-fundo::after { transform: none; }
@media (prefers-reduced-motion: reduce) { .login-fundo::before, .login-fundo::after { animation: none; } }
.login-fundo > * { position: relative; z-index: 1; }
.login.cartao { background: rgba(23, 23, 29, .78); backdrop-filter: blur(6px); border-color: #3a3150; }
.login { width: 100%; }
.login h1 { margin-top: .2rem; }

/* selos */
.selo { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .73rem; font-weight: 650; background: var(--cinza-claro); color: var(--tinta-suave); white-space: nowrap; }
.selo-azul { background: var(--azul-claro); color: var(--azul); }
.selo-verde { background: var(--verde-claro); color: var(--verde); }
.selo-laranja { background: var(--laranja-claro); color: var(--laranja); }
.selo-vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.selo-cinza { background: #2d2d39; color: #c9c9d8; }
.selo-claro { background: var(--acento-claro); color: #c4b5fd; }

/* tabelas */
.tabela-rolagem { overflow-x: auto; margin-bottom: 1.1rem; }
.tabela { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linha); vertical-align: top; font-size: .92rem; }
.tabela th { background: #1f1f29; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.tabela tr.inativo td { color: #8e8ea3; }
.tabela tr:target td { background: #2b2610; }
.tabela .nota { font-size: .85rem; color: var(--tinta-suave); margin-top: .2rem; }
.coluna-acao { white-space: nowrap; }
.coluna-acao .acoes form { margin: 0; }
.lista-vazia { color: var(--tinta-suave); padding: 1rem; text-align: center; }
.filtros { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin: .8rem 0; }
.filtros label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; }
.filtros select { min-width: 12rem; }
.resumo-motivos { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.resolver summary { list-style: none; display: inline-block; }
.resolver summary::-webkit-details-marker { display: none; }
.resolver form { margin-top: .5rem; min-width: 16rem; white-space: normal; }
.destaque-pausa { border-left: 6px solid var(--verde); }
.destaque-pausa.pausada { border-left-color: var(--vermelho); background: #2a1414; }

/* abas */
.abas { display: flex; flex-wrap: wrap; gap: .25rem; }
.abas-solta { margin: .4rem 0 .2rem; }
.aba { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 99px; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--tinta-suave); background: var(--cinza-claro); }
.aba b { font-size: .72rem; background: #0f0f13; border-radius: 99px; padding: 0 .4rem; color: var(--tinta); }
.aba.ativa { background: var(--degrade); color: #fff; }
.aba.ativa b { background: rgba(0, 0, 0, .35); color: #fff; }

/* ---------- Chat ---------- */
.chat { display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; height: 100%; }
.col-lista, .col-conversa, .col-painel { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--papel); }
.col-lista { border-right: 1px solid var(--linha); }
.col-painel { border-left: 1px solid var(--linha); padding: 1rem 1.1rem; overflow-y: auto; display: block; }
.col-conversa { background: #0f0f13; }
.busca { padding: .65rem; border-bottom: 1px solid var(--linha); }
.lista-rolagem { flex: 1; overflow-y: auto; }
#lista .abas { position: sticky; top: 0; z-index: 2; background: var(--papel); padding: .5rem .55rem; border-bottom: 1px solid var(--linha); }
.conv { display: block; padding: .65rem .8rem; border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; }
.conv:hover { background: #1e1e27; }
.conv.ativa { background: var(--acento-claro); box-shadow: inset 4px 0 0 var(--acento); }
.conv.novo { animation: destaque 6s ease-out; }
@keyframes destaque { 0% { background: #3b3017; } 100% { background: transparent; } }
.conv-linha { display: flex; align-items: baseline; gap: .45rem; }
.conv-linha strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-linha .fone { color: var(--tinta-suave); font-size: .8rem; }
.conv-linha time { margin-left: auto; color: var(--tinta-suave); font-size: .78rem; white-space: nowrap; }
.conv-previa { color: var(--tinta-suave); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: .1rem 0 .3rem; }
.conv-previa .quem { font-weight: 650; color: var(--tinta); }
.selos { display: flex; flex-wrap: wrap; gap: .25rem; }
.selos:empty { display: none; }

.conv-topo { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; background: var(--papel); border-bottom: 1px solid var(--linha); }
.conv-nome { display: flex; flex-direction: column; line-height: 1.2; }
.voltar, .ver-dados, .voltar-mobile { display: none; }
.mensagens { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.dia { text-align: center; margin: .5rem 0 .1rem; }
.dia span { background: #25252f; color: var(--tinta-suave); font-size: .75rem; padding: .1rem .7rem; border-radius: 99px; }
.evento { text-align: center; }
.evento span { display: inline-block; background: #25252f; color: #c4c4d4; font-size: .8rem; padding: .15rem .8rem; border-radius: 99px; }
.msg { max-width: min(720px, 86%); display: flex; flex-direction: column; gap: .15rem; }
.msg-aluna { align-self: flex-start; }
.msg-ia, .msg-pessoa { align-self: flex-end; }
.msg-autor { font-size: .75rem; font-weight: 650; color: var(--tinta-suave); padding: 0 .3rem; }
.msg-ia .msg-autor, .msg-pessoa .msg-autor { text-align: right; }
.balao { padding: .55rem .8rem; border-radius: 14px; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.balao .texto { line-height: 1.45; }
.balao code { background: rgba(255, 255, 255, .12); padding: 0 .25rem; border-radius: 4px; font-family: ui-monospace, Consolas, monospace; }
.msg-aluna .balao { background: #25252f; border: 1px solid var(--linha); border-top-left-radius: 4px; }
.msg-ia .balao { background: #3b2a6b; border-top-right-radius: 4px; }
.msg-pessoa .balao { background: #12403c; border-top-right-radius: 4px; border: 1px solid #1f6b64; }
.foto { display: block; max-width: 100%; height: auto; border-radius: 8px; margin-bottom: .35rem; background: #25252f; }
.msg-meta { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .72rem; color: var(--tinta-suave); padding: 0 .3rem; }
.msg-ia .msg-meta, .msg-pessoa .msg-meta { justify-content: flex-end; }
.alerta { color: var(--vermelho); font-weight: 650; }
.ia-extra { align-self: flex-end; max-width: 100%; background: rgba(255, 255, 255, .04); border: 1px solid var(--linha); border-radius: 10px; padding: .45rem .65rem; display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; }
.ferramentas { display: flex; flex-wrap: wrap; gap: .3rem; }
.fontes summary { cursor: pointer; font-weight: 650; color: #c4b5fd; }
.fontes ol { margin: .4rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.fontes .caminho { font-size: .8rem; color: var(--tinta-suave); }
.fontes blockquote { margin: .2rem 0; padding: .35rem .6rem; border-left: 3px solid var(--acento); background: #1e1e27; border-radius: 0 6px 6px 0; }
.mini { font-size: .78rem; color: var(--tinta-suave); }
.aval-estado { font-weight: 650; }
.aval-estado small { font-weight: 400; color: var(--tinta-suave); margin-left: .3rem; }
.aval-boa { color: var(--verde); } .aval-ruim { color: var(--vermelho); }
.comentario { font-weight: 400; color: var(--tinta); font-style: italic; margin-top: .15rem; }
.aval-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .25rem; }
.aval-botoes form { margin: 0; }
form.aval-ruim { margin-top: .5rem; display: flex; flex-direction: column; gap: .5rem; }
form.aval-ruim label { display: flex; flex-direction: column; gap: .15rem; font-weight: 600; font-size: .82rem; }

.rodape { background: var(--papel); border-top: 1px solid var(--linha); padding: .6rem 1rem .8rem; }
.rodape-info { margin: 0 0 .45rem; font-size: .85rem; color: var(--tinta-suave); }
.rodape-azul { color: var(--azul); }
.envio { display: flex; gap: .5rem; align-items: flex-end; margin: 0; }
.envio textarea { min-height: 2.8rem; }
.rodape-acoes { margin-top: .5rem; display: flex; gap: .5rem; }
.rodape-acoes form { margin: 0; }
.vazio { margin: auto; max-width: 28rem; text-align: center; color: var(--tinta-suave); padding: 2rem; }

.col-painel h2 { margin-bottom: .1rem; }
.fone-grande { margin: 0 0 .6rem; color: var(--tinta-suave); }
.dados { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; margin: 0; font-size: .88rem; }
.dados dt { color: var(--tinta-suave); }
.dados dd { margin: 0; font-weight: 550; text-align: right; }
.mini-cartao { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .6rem; border: 1px solid var(--linha); border-radius: 8px; margin-bottom: .4rem; font-size: .86rem; text-decoration: none; color: inherit; background: var(--papel2); }
a.mini-cartao:hover { background: var(--acento-claro); }
.vazio-mini { color: var(--tinta-suave); font-size: .85rem; margin: .2rem 0; }


/* ---------- Comportamento ---------- */
.oculto { display: none; }
.sr-so { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.duas-colunas > .cartao { margin-bottom: 1.1rem; }
.editor-prompt { font: .88rem/1.5 ui-monospace, Consolas, "Courier New", monospace; min-height: 22rem; tab-size: 2; }
.ativa-info { font-size: .88rem; margin: 0 0 .7rem; color: var(--tinta-suave); }
code { background: var(--cinza-claro); padding: 0 .3rem; border-radius: 4px; }
.pensando { display: none; color: var(--tinta-suave); font-style: italic; }
.teste-form.htmx-request .pensando { display: inline; }
.teste-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.teste-lados.um-lado { grid-template-columns: minmax(0, 640px); }
.teste-lado h3 { margin-top: 0; text-transform: none; font-size: 1rem; color: var(--tinta); letter-spacing: 0; }
.teste-conversa { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.teste-conversa .msg { max-width: 94%; }
.teste-meta { justify-content: flex-start !important; margin-bottom: .4rem; }
.diff { border: 1px solid var(--linha); border-radius: 8px; overflow-x: auto; margin: .6rem 0 1rem; background: #121218; font: .85rem/1.45 ui-monospace, Consolas, "Courier New", monospace; }
.diff-linha { display: flex; gap: .6rem; padding: 0 .6rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-marca { flex: 0 0 1ch; font-weight: 700; }
.diff-saiu { background: #3b1717; color: #fca5a5; }
.diff-entrou { background: #11291c; color: #86efac; }
.diff-corte { color: var(--tinta-suave); background: var(--cinza-claro); justify-content: center; }
.prompt-texto { white-space: pre-wrap; overflow-wrap: anywhere; background: #121218; border: 1px solid var(--linha); border-radius: 8px; padding: .8rem; font: .85rem/1.5 ui-monospace, Consolas, monospace; max-height: 28rem; overflow: auto; }

/* ---------- Início ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .9rem; margin: 1rem 0 1.1rem; }
.metrica { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: .9rem 1rem; box-shadow: var(--sombra); display: block; text-decoration: none; color: inherit; }
.metrica h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); margin: 0 0 .3rem; }
.metrica-valor { font-size: 1.9rem; font-weight: 700; margin: 0; line-height: 1.15; }
.metrica-valor small { font-size: .8rem; font-weight: 500; color: var(--tinta-suave); }
.metrica-nota, .metrica-linha { margin: .3rem 0 0; font-size: .84rem; color: var(--tinta-suave); }
.metrica-teste { border-top: 1px dashed var(--linha); padding-top: .3rem; }
.metrica-link:hover { background: var(--acento-claro); }
.variacao { font-weight: 700; color: var(--tinta); }
.variacao-subiu { color: var(--azul); } .variacao-caiu { color: var(--laranja); } .variacao-igual { color: var(--tinta-suave); }
.grafico { width: 100%; height: auto; max-height: 280px; display: block; }
.grafico-barra:hover { opacity: .8; }
.grafico-grade { stroke: var(--linha); stroke-width: 1; }
.grafico-eixo { fill: var(--tinta-suave); font-size: 11px; font-family: inherit; }
.ranking { list-style: none; padding: 0; margin: 0; counter-reset: pos; }
.ranking li { counter-increment: pos; display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0 .5rem 1.8rem; border-bottom: 1px solid var(--linha); position: relative; font-size: .9rem; }
.ranking li::before { content: counter(pos); position: absolute; left: 0; color: var(--tinta-suave); font-weight: 700; }
.ranking b { white-space: nowrap; }

@media (max-width: 1100px) { .duas-colunas { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .teste-lados, .teste-lados.um-lado { grid-template-columns: 1fr; } }

/* ---------- telas médias: o painel da aluna sai da lateral e vira uma visão à parte ("Dados da aluna") ---------- */
@media (max-width: 1240px) {
  .chat { grid-template-columns: 300px minmax(0, 1fr); }
  .col-painel { display: none; }
  .ver-dados, .voltar-mobile { display: inline-block; font-size: .9rem; text-decoration: none; font-weight: 600; }
  .ver-dados { margin-left: auto; }
  .voltar-mobile { margin-bottom: .6rem; }
  .chat.ver-painel .col-conversa { display: none; }
  .chat.ver-painel .col-painel { display: block; grid-column: 2; }
}

/* ---------- celular ---------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lateral { display: none; }
  .inferior { display: flex; background: #121218; border-top: 1px solid var(--linha); }
  .inferior a { flex: 1; text-align: center; padding: .8rem .2rem; color: #c9c9d8; text-decoration: none; font-weight: 600; }
  .inferior a.ativo { background: var(--degrade); color: #fff; }
  .topo { padding: .45rem .7rem; }
  .usuario-link small { display: none; }
  .conteudo { padding: 1rem .8rem 1.5rem; }
  .conteudo-chat { padding: 0; }
  .cartoes { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .metrica { padding: .7rem .75rem; }
  .metrica-valor { font-size: 1.5rem; }
  .editor-prompt { min-height: 16rem; }
  .grade-2 { grid-template-columns: 1fr; }
  .chat { display: block; }
  .col-lista, .col-conversa, .col-painel { height: 100%; }
  .col-conversa, .col-painel { display: none; }
  .chat.com-conversa .col-lista { display: none; }
  .chat.com-conversa .col-conversa { display: flex; }
  .chat.ver-painel .col-conversa { display: none; }
  .chat.ver-painel .col-painel { display: block; }
  .voltar, .ver-dados, .voltar-mobile { display: inline-block; font-size: .9rem; text-decoration: none; font-weight: 600; }
  .voltar-mobile { margin-bottom: .6rem; }
  .ver-dados { margin-left: auto; }
  .msg { max-width: 94%; }
  .estado { font-size: .8rem; padding: .25rem .6rem; }
  /* tabelas viram cartões */
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border-bottom: 6px solid var(--fundo); padding: .3rem 0; }
  .tabela td { border: 0; padding: .25rem .75rem; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 650; color: var(--tinta-suave); font-size: .78rem; }
  .coluna-acao { white-space: normal; }
}


/* ---------- Entrega 3: Base, Lacunas e Bateria ---------- */
.cresce { flex: 1; min-width: 14rem; }
progress.barra { width: 100%; height: .9rem; border-radius: 99px; overflow: hidden; border: 0; background: var(--cinza-claro); accent-color: var(--link); }
progress.barra::-webkit-progress-bar { background: var(--cinza-claro); }
progress.barra::-webkit-progress-value { background: var(--acento); }
progress.barra::-moz-progress-bar { background: var(--acento); }
.faltando { margin-top: .6rem; } .faltando ul { max-height: 16rem; overflow: auto; font-size: .88rem; }
.achados { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.achados .caminho { font-size: .82rem; color: var(--tinta-suave); }
.achados blockquote { margin: .2rem 0; padding: .35rem .6rem; border-left: 3px solid var(--acento); background: #1e1e27; border-radius: 0 6px 6px 0; }
.grupo-fase, .grupo-modulo { margin: .4rem 0; }
.grupo-fase > summary { cursor: pointer; padding: .4rem 0; font-size: 1rem; }
.grupo-modulo { margin-left: 1rem; } .grupo-modulo > summary { cursor: pointer; padding: .3rem 0; color: var(--tinta-suave); }
.soltar { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 2rem 1rem; border: 2px dashed #4a4a60; border-radius: var(--raio); background: #15151c; text-align: center; cursor: pointer; font-weight: 500; }
.soltar.sobre { border-color: var(--link); background: var(--acento-claro); }
.soltar input[type=file] { margin-top: .6rem; width: auto; border: 0; padding: 0; background: none; }
.lista-envio { display: flex; flex-direction: column; gap: .25rem; max-height: 16rem; overflow: auto; }
.item-envio { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem .5rem; border-radius: 6px; background: var(--cinza-claro); font-size: .9rem; }
.item-envio.item-ruim { background: var(--vermelho-claro); color: #fca5a5; }
.resumo-conf { display: flex; flex-wrap: wrap; gap: .5rem; }
.arquivo-conf { border: 1px solid var(--linha); border-radius: 8px; margin: .5rem 0; background: #15151c; }
.arquivo-conf > summary { cursor: pointer; padding: .55rem .8rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.arquivo-conf.situacao-erro { border-color: #7f2a2a; } .arquivo-conf.situacao-aviso { border-color: #7a5320; }
.arquivo-corpo { padding: 0 .8rem .8rem; display: flex; flex-direction: column; gap: .5rem; }
.problema { display: flex; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; }
.problema-erro { background: var(--vermelho-claro); } .problema-aviso { background: var(--laranja-claro); }
.sugestao { margin-top: .2rem; }
.opcoes { border: 1px solid var(--linha); border-radius: 8px; padding: .6rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.opcoes legend { font-weight: 700; font-size: .85rem; padding: 0 .3rem; }
.lacuna-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.lacuna-topo h2 { margin: 0; }
.lacuna-meta, .lacuna-estado { margin: .2rem 0; color: var(--tinta-suave); font-size: .9rem; }
.exemplos { margin: .6rem 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.em-linha-larga { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.editor-curto { min-height: 10rem; }
.placar-linha { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: baseline; margin: 0 0 .6rem; }
.placar-linha .boa { color: var(--verde); } .placar-linha .ruim { color: var(--vermelho); }
.bat-item h3 { margin-top: 0; text-transform: none; font-size: 1rem; color: var(--tinta); letter-spacing: 0; }
.bat-lado h4 { margin: 0 0 .4rem; font-size: .85rem; color: var(--tinta-suave); }
.bat-lado { padding: .6rem; border: 1px solid var(--linha); border-radius: 8px; }
.bat-lado.marca-boa { border-color: #1f5a37; background: #0f2318; } .bat-lado.marca-ruim { border-color: #7f2a2a; background: #2a1414; }
.marcar-linha { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.custo-previsto { background: var(--cinza-claro); padding: .6rem .8rem; border-radius: 8px; }