/* Devoquinho Studio com a identidade do D-Manda: escuro em vidro fosco sobre degradê cinza-chumbo, azul Devoc e âmbar só para
   o que pede atenção, IBM Plex. Sem sombras: a estrutura vem de linhas e superfícies translúcidas. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fontes/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fontes/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fontes/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fontes/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fontes/ibm-plex-sans-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fontes/ibm-plex-sans-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fontes/ibm-plex-sans-condensed-latin-700-normal.woff2) format('woff2'); }
:root {
  color-scheme: dark;
  --fundo-grad: linear-gradient(160deg, #4a4f58 0%, #30343b 45%, #1d2025 100%);
  --tinta: #2f6fe0; --tinta-2: #4a85ec; --tinta-fundo: rgba(80, 140, 255, .18); --link: #8db6ff;
  --papel: #2a2e35; --folha: rgba(255, 255, 255, .07); --texto: #f3f5f8; --cinza: #cdd2da; --suave: #aab0bb;
  --linha: rgba(255, 255, 255, .13); --linha-2: rgba(255, 255, 255, .08); --linha-forte: rgba(255, 255, 255, .28);
  --grafite: #14171c; --grafite-2: #1a1e25; --grade: rgba(125, 155, 205, .075); --grade-forte: rgba(125, 155, 205, .15);
  --ambar: #ffc933; --ambar-texto: #ffc933; --ambar-fundo: rgba(255, 201, 51, .15); --ambar-ink: #1b1600;
  --verde: #5fd08f; --verde-fundo: rgba(95, 208, 143, .15); --vermelho: #ff8f86; --vermelho-fundo: rgba(255, 143, 134, .15);
  --nav: rgba(0, 0, 0, .3);
  --titulo: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --corpo: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --raio: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--papel) var(--fundo-grad) fixed; color: var(--texto); font: 14px/1.5 var(--corpo); -webkit-font-smoothing: antialiased; min-height: 100vh; }
h1, h2, h3 { font-family: var(--titulo);  font-weight: 600; margin: 0; letter-spacing: .005em; line-height: 1.12; }
h1 { font-size: 32px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
.num { font-family: var(--titulo);  font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
[hidden] { display: none !important; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 84px minmax(0, 1fr); min-height: 100vh; }
.trilho { position: sticky; top: 0; height: 100vh; background: var(--nav); border-right: 1px solid var(--linha); backdrop-filter: blur(14px); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px; z-index: 5; }
.logo { width: 42px; height: 42px; margin-bottom: 14px; }
.nav { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; border-radius: var(--raio); color: var(--suave); text-decoration: none; font-size: 12px; line-height: 1.15; text-align: center; }
.nav a svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover { background: rgba(255, 255, 255, .07); color: var(--texto); }
.nav a[aria-current="page"] { color: var(--link); background: var(--tinta-fundo); font-weight: 600; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tinta); }
.selo { position: absolute; top: 3px; right: 9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ambar); color: var(--ambar-ink); font: 600 11px/18px var(--titulo); text-align: center; }
.eu { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font: 600 14px var(--titulo); }
.sair { background: none; border: 0; color: var(--suave); font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.sair:hover { color: var(--texto); text-decoration: underline; }
main { min-width: 0; padding: 22px clamp(24px, 2.4vw, 52px) 56px; width: 100%; }
.topo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.topo h1 { flex: 1; min-width: 0; }
.busca { display: flex; align-items: center; gap: 8px; min-width: 250px; padding: 8px 12px; background: var(--folha); border: 1px solid var(--linha); border-radius: 999px; color: var(--suave); font-size: 14px; }
.busca:hover { border-color: var(--linha-forte); }
.busca svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.busca kbd { margin-left: auto; font: 12px var(--corpo); border: 1px solid var(--linha); border-radius: 4px; padding: 0 5px; }

/* ---------- botões e etiquetas ---------- */
.bt { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--raio); border: 1px solid transparent; background: var(--tinta); color: #fff; font-weight: 600; font-size: 14px; }
.bt:hover { background: var(--tinta-2); }
.bt.sec { background: var(--folha); color: var(--link); border-color: var(--linha-forte); }
.bt.sec:hover { background: var(--tinta-fundo); }
.bt.ok { background: var(--verde); color: #0b2a18; } .bt.ok:hover { background: #7be0a8; }
.bt.perigo { background: var(--folha); color: var(--vermelho); border-color: rgba(255, 143, 134, .5); }
.bt.perigo:hover { background: var(--vermelho-fundo); }
.bt.mini { padding: 5px 11px; font-size: 13px; }
.bt:disabled { opacity: .5; cursor: not-allowed; }
.ch { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; background: var(--papel); color: var(--cinza); border: 1px solid var(--linha-2); white-space: nowrap; }
.ch.publico { background: var(--tinta-fundo); color: var(--link); border-color: rgba(80, 140, 255, .45); }
.ch.restrito { background: rgba(0, 0, 0, .35); color: #e6ebf5; border-color: var(--linha-forte); }
.ch.ambar { background: var(--ambar-fundo); color: var(--ambar-texto); border-color: rgba(255, 201, 51, .45); }
.ch.verde { background: var(--verde-fundo); color: var(--verde); border-color: rgba(95, 208, 143, .45); }
.ch.verm { background: var(--vermelho-fundo); color: var(--vermelho); border-color: rgba(255, 143, 134, .45); }
.ch.link { color: var(--link); background: var(--folha); border-color: rgba(141, 182, 255, .35); cursor: pointer; text-decoration: none; }
.ch.link:hover { background: var(--tinta-fundo); }
.pt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

/* ---------- monitor de bancada (o elemento marcante) ---------- */
.monitor { position: relative; background: var(--grafite); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; isolation: isolate; color: #D4DDEC; }
.monitor::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px), linear-gradient(var(--grade-forte) 1px, transparent 1px), linear-gradient(90deg, var(--grade-forte) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; }
.monitor::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(160, 190, 240, .5) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(160, 190, 240, .8) 0 1px, transparent 1px 50px);
  background-size: 100% 4px, 100% 9px; background-repeat: no-repeat; }
.monitor canvas { display: block; }
.canto { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(143, 182, 255, .7); pointer-events: none; z-index: 2; }
.canto.a { left: 10px; top: 16px; border-width: 1.5px 0 0 1.5px; } .canto.b { right: 10px; top: 16px; border-width: 1.5px 1.5px 0 0; }
.canto.c { left: 10px; bottom: 10px; border-width: 0 0 1.5px 1.5px; } .canto.d { right: 10px; bottom: 10px; border-width: 0 1.5px 1.5px 0; }
.leitura { position: absolute; left: 26px; top: 28px; z-index: 3; pointer-events: none; }
.leitura .grande { font: 600 76px/0.95 var(--titulo);  color: #EEF4FF; letter-spacing: -.01em; }
.leitura .rot { font-size: 14px; color: #9DB0CF; margin-top: 4px; }
.leitura .alerta { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; color: #FFD27A; font-size: 13.5px; }
.leitura .alerta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); }
.ver-mapa { position: absolute; right: 24px; bottom: 22px; z-index: 3; }

/* ---------- início ---------- */
.saudacao { margin: 0 0 18px; }
.saudacao p { margin: 6px 0 0; font-size: 17px; color: var(--cinza); }
.hero { height: clamp(380px, 38vh, 560px); cursor: pointer; margin-bottom: 26px; }
.hero canvas { position: absolute; inset: 0; }
.duas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.bloco { margin-bottom: 30px; }
.bloco > h2 { margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; }
.bloco > h2 small { font: 400 14px var(--corpo); color: var(--suave); }
.linhas { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); }
.linha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--linha-2); }
.linha:first-child { border-top: 0; }
.linha .corpo { flex: 1; min-width: 0; }
.linha .corpo b { font-weight: 600; }
.linha .corpo p { margin: 1px 0 0; font-size: 13.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vazio { padding: 22px 18px; color: var(--suave); text-align: left; }
.vazio b { color: var(--texto); display: block; margin-bottom: 2px; font-family: var(--titulo); font-size: 17px; font-weight: 600;  }
.vazio .bt { margin-top: 12px; }
.nivel { display: grid; grid-template-columns: 112px 1fr 34px; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.nivel .trilha { height: 10px; background: rgba(255, 255, 255, .1); border-radius: 5px; overflow: hidden; }
.nivel .trilha i { display: block; height: 100%; border-radius: 5px; transition: width .5s ease; }
.nivel a { color: var(--texto); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nivel a:hover { text-decoration: underline; }
.nivel .num { text-align: right; font-size: 16px; }

/* ---------- mapa ---------- */
.mapa-caixa { height: calc(100vh - 128px); min-height: 460px; }
.mapa-caixa canvas { position: absolute; inset: 0; }
.filtros { position: absolute; left: 22px; top: 26px; z-index: 4; display: flex; flex-direction: column; gap: 10px; width: 210px; }
.painel-vidro { background: rgba(18, 22, 29, .82); border: 1px solid rgba(143, 182, 255, .22); border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(4px); }
.painel-vidro label { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; cursor: pointer; color: #D4DDEC; }
.painel-vidro input[type=checkbox] { accent-color: #5B93F5; }
.painel-vidro input[type=search] { width: 100%; background: transparent; border: 0; color: #EEF4FF; outline: none; font-size: 14px; }
.painel-vidro input::placeholder { color: #8493AE; }
.detalhe { position: absolute; right: 20px; top: 26px; bottom: 20px; width: 340px; z-index: 4; display: flex; flex-direction: column; padding: 16px; background: rgba(18, 22, 29, .92); border: 1px solid rgba(143, 182, 255, .25); border-radius: 12px; }
.detalhe h2 { color: #EEF4FF; margin-bottom: 8px; }
.detalhe .corpo { overflow: auto; flex: 1; font-size: 14px; color: #C9D3E3; margin: 10px 0; }
.detalhe .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.detalhe .ch { background: #232B38; color: #C9D3E3; border-color: #34405A; }
.fechar { position: absolute; right: 10px; top: 8px; background: none; border: 0; color: #8FA0BE; font-size: 22px; line-height: 1; }

/* ---------- notas ---------- */
.notas { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.lista { position: sticky; top: 16px; max-height: calc(100vh - 40px); overflow: auto; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); }
.lista input { width: 100%; border: 0; border-bottom: 1px solid var(--linha); padding: 11px 14px; outline: none; background: transparent; position: sticky; top: 0; }
.grupo summary { justify-content: flex-start; text-align: left; list-style: none; cursor: pointer; padding: 9px 14px; font: 600 14px var(--titulo);  display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid var(--linha-2); }
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary > span:last-child { margin-left: auto; font-weight: 400; color: var(--suave); }
.item { display: block; padding: 7px 14px 7px 31px; color: var(--texto); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--linha-2); }
.item:hover { background: var(--papel); }
.item[aria-current="true"] { background: var(--tinta-fundo); color: var(--link); font-weight: 600; box-shadow: inset 3px 0 0 var(--tinta); }
.leitor { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px 34px 32px; min-height: 420px; }
.leitor header { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 4px; }
.leitor h1 { font-size: 38px; }
.meta { font-size: 13px; color: var(--suave); margin: 8px 0 22px; }
.texto { max-width: 70ch; font-size: 15px; line-height: 1.6; }
.texto h1 { font-size: 26px; margin: 0 0 12px; display: none; }
.texto h2 { font-size: 21px; margin: 24px 0 6px; }
.texto h3 { font-size: 17px; margin: 18px 0 4px; }
.texto p { margin: 0 0 11px; }
.texto ul { margin: 0 0 12px; padding-left: 22px; }
.texto li { margin: 2px 0; }
.texto code { background: var(--papel); padding: 0 5px; border-radius: 4px; font-size: .92em; }
.texto .ch.link { padding: 0 9px; font-size: 14px; }
.ligacoes { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linha-2); align-items: start; }
.ligacoes h3 { margin: 0 0 8px; }
.ligacoes .grupo-ch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.viz { height: 210px; }
.viz canvas { position: absolute; inset: 0; }

/* ---------- propor ---------- */
.propor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.propor h1 { margin-bottom: 4px; }
.campo { margin: 18px 0 0; }
.campo > label, .campo > .rotulo { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14px; }
.campo small { display: block; color: var(--suave); font-size: 13px; margin-top: 4px; }
.campo input[type=text], .campo input[type=email], .campo input[type=password], .campo textarea, .campo select { width: 100%; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--folha); }
.campo textarea { min-height: 190px; resize: vertical; line-height: 1.6; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--link); }
.segmentos { display: grid; gap: 8px; }
.seg { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--folha); cursor: pointer; }
.seg:has(input:checked) { border-color: var(--link); background: var(--tinta-fundo); box-shadow: inset 0 0 0 1px var(--tinta); }
.seg input { margin-top: 4px; accent-color: var(--link); }
.seg b { display: block; font-weight: 600; }
.seg span { font-size: 13px; color: var(--suave); }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ch.alvo { cursor: pointer; background: var(--folha); border: 1px dashed var(--linha-forte); color: var(--cinza); }
.ch.alvo:hover { border-color: var(--link); color: var(--link); }
.ch.alvo.on { background: var(--tinta); color: #fff; border: 1px solid var(--tinta); }
.lado { position: sticky; top: 16px; }
.lado .monitor { height: 300px; }
.lado .monitor canvas { position: absolute; inset: 0; }
.confere { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.confere li { display: flex; gap: 8px; align-items: center; color: var(--suave); }
.confere li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--linha-forte); flex: none; }
.confere li.sim { color: var(--texto); }
.confere li.sim::before { background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; border-color: var(--verde); }
.previa { margin-top: 16px; padding: 14px 18px; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); max-height: 260px; overflow: auto; }
.aviso { padding: 10px 14px; border-radius: var(--raio); background: var(--ambar-fundo); color: var(--ambar-texto); border: 1px solid rgba(255, 201, 51, .45); margin: 12px 0 0; font-size: 14px; }
.erro { color: var(--vermelho); font-size: 14px; margin: 10px 0 0; min-height: 20px; }
.enviado { text-align: left; padding: 8px 0; }
.enviado .monitor { height: 220px; margin: 18px 0; }
.enviado .monitor canvas { position: absolute; inset: 0; }

/* ---------- fila ---------- */
.abas { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.aba { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--folha); font-size: 14px; }
.aba[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.prop { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 12px; overflow: hidden; }
.prop.pendente { border-left: 4px solid var(--ambar); } .prop.ajuste { border-left: 4px solid #E08A1E; } .prop.aprovada { border-left: 4px solid var(--verde); } .prop.rejeitada { border-left: 4px solid #98A2B5; }
.prop > summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 13px 16px; }
.prop > summary::-webkit-details-marker { display: none; }
.prop > summary .quem { flex: 1; min-width: 0; }
.prop > summary b { font: 600 18px var(--titulo);  }
.prop > summary p { margin: 0; font-size: 13.5px; color: var(--suave); }
.prop .dentro { padding: 4px 18px 18px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--linha-2); }
.prop .dentro .monitor { height: 230px; margin-top: 12px; }
.prop .dentro .monitor canvas { position: absolute; inset: 0; }
.prop .decisao { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px solid var(--linha-2); }
.prop .decisao input[type=text], .prop .decisao select { padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); min-width: 220px; background: var(--folha); }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13.5px; margin-top: 12px; }
.diff div { background: var(--papel); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; }
.diff .rm { background: var(--vermelho-fundo); } .diff .ad { background: var(--verde-fundo); }
.diff h3 { grid-column: span 1; font-size: 14px; margin-bottom: 2px; }
.cometario { margin-top: 8px; padding: 9px 12px; border-radius: var(--raio); background: var(--papel); font-size: 14px; }

/* ---------- login ---------- */
.entrar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 100vh; }
.entrar .monitor { border-radius: 0; min-height: 100vh; }
.entrar .monitor canvas { position: absolute; inset: 0; }
.entrar .chamada { position: absolute; left: 44px; bottom: 48px; right: 44px; z-index: 3; pointer-events: none; }
.entrar .chamada h1 { font-size: 46px; color: #EEF4FF; max-width: 14ch;  }
.entrar .chamada p { color: #A5B6D3; font-size: 17px; max-width: 38ch; margin: 12px 0 0; }
.entrar .form { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(28px, 6vw, 84px); background: var(--folha); }
.entrar .form .logo { margin: 0 0 22px; }
.entrar .form h2 { font-size: 26px; margin-bottom: 4px; }
.entrar .form .bt { width: 100%; justify-content: center; padding: 11px; margin-top: 18px; }

/* ---------- busca rápida e aviso ---------- */
.veu { position: fixed; inset: 0; background: rgba(12, 16, 24, .55); z-index: 50; display: grid; place-items: start center; padding-top: 14vh; }
.paleta { width: min(600px, 92vw); background: #30343b; border: 1px solid var(--linha-forte); border-radius: 10px; overflow: hidden; }
.paleta input { width: 100%; border: 0; padding: 16px 18px; font-size: 17px; outline: none; border-bottom: 1px solid var(--linha); }
.paleta .res { max-height: 340px; overflow: auto; }
.paleta .res a { display: flex; gap: 10px; align-items: center; padding: 10px 18px; text-decoration: none; color: var(--texto); }
.paleta .res a:hover, .paleta .res a.sel { background: var(--tinta-fundo); }
.paleta .res small { margin-left: auto; color: var(--suave); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--grafite); color: #EEF4FF; padding: 11px 18px; border-radius: 10px; z-index: 60; display: flex; gap: 14px; align-items: center; border: 1px solid var(--linha-forte); }
.toast a { color: #9CC0FF; }
.toast.ok::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #35D08F; box-shadow: 0 0 9px #35D08F; }

@media (max-width: 960px) {
  .duas, .propor, .notas, .ligacoes, .prop .dentro, .entrar { grid-template-columns: 1fr; }
  .lista { position: static; max-height: 320px; } .lado { position: static; }
  .entrar .monitor { min-height: 260px; } .entrar .chamada { bottom: 24px; } .entrar .chamada h1 { font-size: 32px; }
  .detalhe { width: auto; left: 14px; top: auto; height: 55%; }
}
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; padding-bottom: 66px; }
  .trilho { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: 62px; flex-direction: row; padding: 4px 6px; border-right: 0; border-top: 1px solid var(--linha); }
  .logo, .eu { display: none; } .nav { flex-direction: row; padding: 0; } .nav a { flex: 1; } .nav a[aria-current="page"]::before { display: none; }
  main { padding: 16px 16px 40px; } .busca { min-width: 0; } .busca span, .busca kbd { display: none; } .hero { height: 300px; } .leitura .grande { font-size: 56px; }
  .filtros { width: 170px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- página pública de contribuição ---------- */
.pagina-contribuir { background: var(--papel); }
.contribuir { max-width: 640px; margin: 0 auto; padding: 36px 22px 64px; }
.contribuir .marca { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font: 600 22px var(--titulo);  }
.contribuir .marca .logo { margin: 0; }
.contribuir h1 { font-size: 36px; margin-bottom: 8px; }
.pedido { margin: 20px 0 6px; padding: 14px 16px; background: var(--folha); border: 1px solid var(--linha); border-left: 4px solid var(--ambar); border-radius: var(--raio); }
.pedido b { font: 600 18px var(--titulo);  }
.pedido p { margin: 4px 0 6px; }
.pedido small { color: var(--suave); }
.contribuir .campo textarea { min-height: 220px; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- equipes (links) ---------- */
.equipes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.link-item { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 12px; }
.link-item.inativo { opacity: .6; }
.link-item .cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.link-item .cab b { font: 600 18px var(--titulo);  flex: 1; min-width: 160px; }
.link-item p { margin: 6px 0 0; font-size: 14px; color: var(--suave); }
.link-item .url { display: flex; gap: 8px; margin-top: 10px; }
.link-item .url input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--papel); font-size: 13px; }
.form-link { position: sticky; top: 16px; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 18px 18px; }
.form-link h2 { margin-top: 12px; }

/* ---------- aprendizado por conversa ---------- */
.conversa { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.chat { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 480px; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linha-2); flex-wrap: wrap; }
.visao { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 999px; overflow: hidden; }
.visao button { border: 0; background: var(--folha); padding: 5px 14px; font-size: 13.5px; }
.visao button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.msgs { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.balao { max-width: 84%; padding: 10px 14px; border-radius: 14px; word-wrap: break-word; }
.balao.eu { align-self: flex-end; background: var(--tinta); color: #fff; border-bottom-right-radius: 4px; }
.balao.dq { align-self: flex-start; background: rgba(255, 255, 255, .09); border-bottom-left-radius: 4px; }
.balao.dq .texto p:last-child { margin-bottom: 0; }
.balao.erro-b { align-self: flex-start; background: var(--vermelho-fundo); color: var(--vermelho); }
.rastro { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.digitando { display: inline-flex; gap: 4px; padding: 4px 0; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: #8A97B1; animation: pulo 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.sugestoes-chat { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.chat form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--linha); }
.chat form input { flex: 1; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--folha); }
.analise .monitor { height: 280px; margin-bottom: 14px; }
.analise .monitor canvas { position: absolute; inset: 0; }
.analise h3 { margin: 14px 0 6px; }
.analise ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.analise .rodape { margin-top: 14px; font-size: 13px; color: var(--suave); }

/* ---------- fila: origem e ajuste ---------- */
.editar { grid-column: 1 / -1; padding: 12px 14px; background: var(--papel); border-radius: var(--raio); }
.editar .campo { margin-top: 10px; }
.editar .campo:first-child { margin-top: 0; }
.editar .campo textarea { min-height: 130px; }
.acoes-topo { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
@media (max-width: 960px) { .equipes, .conversa { grid-template-columns: 1fr; } .form-link { position: static; } .chat { height: 70vh; } }

/* ---------- conversa em tela cheia ---------- */
main.cheia { max-width: none; padding: 16px 28px 20px; }
.cheia .topo { margin-bottom: 12px; }
.cheia .conversa { grid-template-columns: minmax(0, 1fr) minmax(380px, 36%); gap: 22px; }
.cheia .chat { position: relative; height: calc(100vh - 92px); min-height: 520px; }
.cheia .chat-topo { padding: 12px clamp(18px, 3vw, 40px); }
.cheia .msgs { padding: 26px clamp(18px, 4vw, 64px); gap: 16px; }
.cheia .balao { max-width: min(78%, 920px); font-size: 16.5px; line-height: 1.6; padding: 12px 16px; }
.cheia .sugestoes-chat { padding: 0 clamp(18px, 4vw, 64px) 12px; }
.cheia .chat form { padding: 14px clamp(18px, 4vw, 64px) 18px; }
.cheia .chat form input { padding: 13px 15px; font-size: 16px; }
.cheia .analise { height: calc(100vh - 92px); display: flex; flex-direction: column; min-height: 0; }
.cheia .analise .monitor { height: auto; flex: 1 1 44%; min-height: 240px; margin-bottom: 14px; }
.cheia .analise .lista-analise { flex: 1 1 56%; min-height: 0; overflow: auto; padding-right: 4px; }
.cheia .analise .lista-analise h3:first-child { margin-top: 0; }
.finalizando { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center; background: rgba(42, 46, 53, .93); padding: 24px; }
.finalizando b { display: block; font: 600 24px var(--titulo);  margin-top: 8px; }
.finalizando p { margin: 6px auto 0; max-width: 40ch; color: var(--suave); }
.nav a .ponto { position: absolute; top: 8px; right: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); border: 2px solid var(--folha); }

/* ---------- resumo da conversa ---------- */
.resumo-cab { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; font-size: 14px; }
.resumo-titulo { font-size: clamp(30px, 3.4vw, 46px); margin: 6px 0 8px; max-width: 26ch; }
.resumo-geral { font-size: 18px; max-width: 70ch; color: var(--cinza); margin: 0 0 20px; }
.aprendizado { background: var(--folha); border: 1px solid var(--linha); border-left: 4px solid var(--ambar); border-radius: var(--raio); padding: 14px 18px; margin-bottom: 12px; }
.aprendizado h3 { font-size: 19px; margin-bottom: 4px; }
.aprendizado p { margin: 0 0 10px; max-width: 68ch; }
.rodape-apr { display: flex; gap: 10px; align-items: center; }
.transcricao { margin-top: 10px; display: grid; gap: 8px; font-size: 14px; }
.transcricao p { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--papel); white-space: pre-wrap; }
.transcricao p.eu { background: var(--tinta-fundo); }

/* ---------- acertos da conversa ---------- */
.chat-topo { flex-wrap: nowrap; }
#c-info { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rastro .ch { white-space: normal; text-align: left; line-height: 1.35; padding-top: 3px; padding-bottom: 3px; }
.msgs { overflow-x: hidden; }
@media (max-width: 720px) { .chat-topo { flex-wrap: wrap; } }

/* ---------- telas largas ---------- */
@media (min-width: 1500px) {
  .leitor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); column-gap: 44px; align-content: start; }
  .leitor > header, .leitor > h1, .leitor > .meta, .leitor > .aviso, .leitor > .texto { grid-column: 1; }
  .leitor > .ligacoes { grid-column: 2; grid-row: 1 / span 5; margin: 0; padding: 0 0 0 36px; border-top: 0; border-left: 1px solid var(--linha-2); grid-template-columns: 1fr; position: sticky; top: 16px; align-self: start; }
  .leitor > .ligacoes .viz { height: 260px; }
  .notas { grid-template-columns: 340px minmax(0, 1fr); }
}

/* ---------- hierarquia na leitura das notas ---------- */
.texto h2 { font-size: 22px; margin: 30px 0 8px; padding-top: 18px; border-top: 1px solid var(--linha-2); }
.texto h3 { font-size: 16px; margin: 20px 0 4px; color: var(--cinza); }
.texto ul:has(> .li-links) { list-style: none; padding: 0; margin: 0 0 12px; }
.li-links { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 9px 0; border-top: 1px solid var(--linha-2); margin: 0 !important; }
.li-links:first-child { border-top: 0; }
.li-rot { font-size: 13.5px; color: var(--suave); padding-top: 4px; }
.li-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.li-chips .ch.link { margin: 0; }

/* coluna de conexões da nota */
.conexoes { display: grid; gap: 14px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linha-2); align-content: start; }
.conexoes .viz { height: 210px; }
.con-resumo { margin: 0; font-size: 14px; color: var(--suave); }
.con-resumo b { font-size: 24px; color: var(--texto); font-weight: 600; margin-right: 2px; }
.con-resumo span { margin: 0 6px; }
.seg-con { display: flex; border: 1px solid var(--linha-forte); border-radius: 999px; overflow: hidden; background: var(--folha); }
.seg-con button { flex: 1; border: 0; background: transparent; padding: 7px 12px; font-size: 14px; display: flex; justify-content: center; gap: 7px; align-items: baseline; color: var(--cinza); }
.seg-con button b { font-size: 15px; font-weight: 600; }
.seg-con button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.con-grupo { margin-top: 2px; }
.con-grupo h4 { display: flex; align-items: center; gap: 8px; margin: 12px 0 7px; font: 600 14px var(--titulo);  }
.con-grupo h4 .num { margin-left: auto; font-weight: 400; color: var(--suave); }
.con-grupo .grupo-ch { margin: 0; gap: 5px; }
.con-grupo .ch.link { font-size: 13px; padding: 1px 9px; margin: 0; }
.acoes-nota { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
@media (min-width: 1500px) {
  .leitor > .conexoes { grid-column: 2; grid-row: 1 / span 5; margin: 0; padding: 0 0 0 36px; border-top: 0; border-left: 1px solid var(--linha-2); position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow: auto; }
  .leitor > .conexoes .viz { height: 260px; }
}

/* ---------- lista de notas minimizável ---------- */
.lista-topo { display: flex; align-items: stretch; position: sticky; top: 0; z-index: 1; background: var(--folha); border-bottom: 1px solid var(--linha); }
.lista-topo input { flex: 1; min-width: 0; width: auto; position: static; border: 0; border-bottom: 0; }
.lista .min { width: 44px; border: 0; border-left: 1px solid var(--linha-2); background: transparent; color: var(--suave); display: grid; place-items: center; }
.lista .min:hover, .lista .expandir:hover { background: var(--tinta-fundo); color: var(--link); }
.lista .expandir { display: none; }
.notas.recolhida { grid-template-columns: 48px minmax(0, 1fr); }
.notas.recolhida .lista-topo, .notas.recolhida #n-grupos { display: none; }
.notas.recolhida .lista { overflow: hidden; max-height: none; }
.notas.recolhida .lista .expandir { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; padding: 14px 0 18px; border: 0; background: transparent; color: var(--suave); }
.notas.recolhida .lista .expandir span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 14px var(--titulo);  letter-spacing: .02em; }
@media (min-width: 1500px) { .notas.recolhida { grid-template-columns: 48px minmax(0, 1fr); } }
@media (max-width: 960px) { .notas.recolhida { grid-template-columns: 1fr; } .notas.recolhida .lista .expandir { flex-direction: row; justify-content: center; } .notas.recolhida .lista .expandir span { writing-mode: horizontal-tb; transform: none; } }

/* ---------- subgrupos dentro da área ---------- */
.subgrupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 26px; font: 600 13.5px var(--corpo); color: var(--cinza); background: transparent; border-bottom: 1px solid var(--linha-2); justify-content: flex-start; }
.subgrupo > summary::-webkit-details-marker { display: none; }
.subgrupo > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid #8A97B1; border-bottom: 1.5px solid #8A97B1; transform: rotate(-45deg); transition: none; margin-right: 2px; flex: none; }
.subgrupo[open] > summary::before { transform: rotate(45deg); }
.subgrupo > summary > span:last-child { margin-left: auto; font-weight: 400; color: var(--suave); }
.subgrupo > summary:hover { background: var(--papel); }
.subgrupo .item { padding-left: 46px; }

/* ---------- vidro fosco (como as colunas do D-Manda) ---------- */
.linhas, .leitor, .lista, .chat, .prop, .link-item, .form-link, .pedido, .previa, .aprendizado, .seg, .campo input, .campo textarea, .campo select { backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.campo input::placeholder, .campo textarea::placeholder, .lista input::placeholder, .chat form input::placeholder { color: #8a909b; }
input[type=checkbox], input[type=radio] { accent-color: var(--tinta); }
::selection { background: rgba(80, 140, 255, .4); }
.assinatura { display: block; height: 30px; width: auto; }
.entrar .chamada .assinatura { margin-bottom: 20px; }
.contribuir .marca .assinatura { height: 26px; opacity: .95; }

.campo-senha { width: 100%; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--folha); }

/* fundo animado (D-Manda) e configurações */
.bg-shader { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
html.sem-anim *, html.sem-anim *::before, html.sem-anim *::after { transition: none !important; animation: none !important; }
.engrenagem { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--raio); color: var(--suave); }
.engrenagem svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.engrenagem:hover, .engrenagem[aria-current] { color: var(--texto); background: var(--folha); }
.cfg { max-width: 560px; margin: 0 0 20px; padding: 18px 20px; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); backdrop-filter: blur(10px); }
.cfg h2 { font: 600 16px var(--titulo); margin: 0 0 12px; }
.cfg .rotulo { margin: 14px 0 6px; font-weight: 600; }
.cfg .suave { color: var(--suave); font-size: 13px; margin: 6px 0; }
.cfg .chip { display: flex; gap: 8px; align-items: center; }
.segfundo { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: var(--raio); overflow: hidden; }
.segfundo button { background: none; border: 0; color: var(--suave); padding: 7px 16px; cursor: pointer; font: inherit; }
.segfundo button.on { background: var(--tinta); color: #fff; }

select, select option, select optgroup { color-scheme: dark; }
select option, select optgroup { background: #262a31; color: #f3f5f8; }
select option:checked { background: #2f6fe0; color: #fff; }
input:-webkit-autofill, textarea:-webkit-autofill { -webkit-text-fill-color: var(--texto); box-shadow: 0 0 0 100px #2b3038 inset; }

/* janela (pop-up) */
.intro-acao { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin: -8px 0 18px; }
.intro-acao .bt { flex: none; }
dialog.janela { width: min(560px, 92vw); max-height: 92vh; padding: 0; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: #262a31; color: var(--texto); overflow: auto; }
dialog.janela::backdrop { background: rgba(8, 10, 14, .62); backdrop-filter: blur(3px); }
dialog.janela .form-link { position: static; border: 0; background: none; padding: 6px 22px 22px; backdrop-filter: none; }
.acoes-janela { display: flex; gap: 10px; margin-top: 6px; }

/* menu em grupos */
.grupo-nav { display: flex; flex-direction: column; gap: 2px; }
.grupo-nav + .grupo-nav { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha); }
.grupo-nav > p { margin: 0 0 2px; padding: 0 2px; font-size: 11px; color: var(--suave); text-align: center; opacity: .8; }
@media (max-width: 720px) { .grupo-nav { flex-direction: row; flex: 1; } .grupo-nav > p { display: none; } .grupo-nav + .grupo-nav { margin: 0; padding: 0; border: 0; } }
.trilho { overflow-y: auto; scrollbar-width: none; } /* com os grupos o menu pode passar da altura de janelas baixas */

/* menu lateral: recolhido (só ícones) por padrão, estendido com os nomes */
.app { grid-template-columns: 64px minmax(0, 1fr); }
.app.estendido { grid-template-columns: 224px minmax(0, 1fr); }
.nav a > span:not(.selo) { display: none; }
.nav a { padding: 11px 2px; }
.grupo-nav > p { display: none; }
.selo { top: 3px; right: 6px; }
.alterna { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--raio); background: none; color: var(--suave); cursor: pointer; }
.alterna svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alterna:hover { color: var(--texto); background: var(--folha); }
.estendido .trilho { align-items: stretch; padding: 14px 10px; }
.estendido .logo { align-self: flex-start; margin-left: 4px; }
.estendido .nav { padding: 0; }
.estendido .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 9px 12px; font-size: 14px; text-align: left; }
.estendido .nav a > span:not(.selo) { display: inline; }
.estendido .nav a[aria-current="page"]::before { left: -10px; }
.estendido .selo { position: static; margin-left: auto; }
.estendido .nav a .ponto { top: 50%; right: 12px; transform: translateY(-50%); }
.estendido .grupo-nav > p { display: block; padding: 0 12px; text-align: left; font-size: 12px; }
.estendido .eu { flex-direction: row; justify-content: flex-end; padding: 0 4px; }
@media (max-width: 720px) {
  .app, .app.estendido { grid-template-columns: 1fr; }
  .trilho, .estendido .trilho { padding: 4px 6px; align-items: center; }
  .nav a > span:not(.selo), .estendido .nav a > span:not(.selo) { display: block; }
  .estendido .nav a, .nav a { flex-direction: column; justify-content: center; gap: 3px; padding: 9px 2px 8px; font-size: 12px; text-align: center; }
  .estendido .selo, .selo { position: absolute; top: 3px; right: 9px; margin: 0; }
  .alterna, .estendido .grupo-nav > p { display: none; }
}

/* conta (configurações, avatar, sair) no topo, junto da busca */
.conta { display: flex; align-items: center; gap: 8px; flex: none; }
.conta .avatar { width: 34px; height: 34px; font-size: 13px; }
.conta .sair { font-size: 13px; padding: 4px 8px; }
@media (max-width: 720px) { .conta .sair { display: none; } }

/* menu da conta: clicar na foto abre configurações e sair */
button.avatar { border: 0; padding: 0; cursor: pointer; }
button.avatar:hover { filter: brightness(1.12); }
.menu-conta { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 6px; background: #262a31; border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.menu-conta .quem { display: flex; flex-direction: column; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--linha); }
.menu-conta .quem span { color: var(--suave); font-size: 13px; }
.menu-conta a, .menu-conta button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 4px; background: none; color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu-conta a:hover, .menu-conta button:hover { background: var(--folha); }
.menu-conta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--suave); }

/* sino de avisos */
.caixa-sino, .caixa-avatar { position: relative; }
.sino { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--suave); cursor: pointer; }
.sino svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sino:hover, .sino[aria-expanded="true"] { color: var(--texto); background: var(--folha); }
.selo-sino { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ambar); color: var(--ambar-ink); font: 600 11px/17px var(--titulo); text-align: center; }
.menu-avisos { position: absolute; right: -44px; top: calc(100% + 8px); z-index: 30; width: min(380px, 92vw); max-height: 70vh; overflow: auto; padding: 6px; background: #262a31; border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.avisos-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.avisos-cab button { background: none; border: 0; color: var(--link); font: inherit; font-size: 13px; cursor: pointer; }
.avisos-cab button:hover { text-decoration: underline; }
.aviso-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 4px; color: var(--texto); text-decoration: none; line-height: 1.35; }
.aviso-item:hover { background: var(--folha); }
.aviso-item svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--suave); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aviso-item small { display: block; margin-top: 2px; color: var(--suave); font-size: 12px; }
.aviso-item.novo { background: var(--tinta-fundo); }
.aviso-item.novo svg { stroke: var(--link); }
.vazio-avisos { margin: 0; padding: 14px 10px; color: var(--suave); font-size: 13px; }

/* efeito de digitação da resposta */
.balao.dq.escrevendo .texto > :last-child::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 3px; vertical-align: text-bottom; background: var(--link); animation: piscar 1s steps(2, start) infinite; }
@keyframes piscar { to { visibility: hidden; } }

/* o monitor deixa o fundo animado aparecer, para não ficar um bloco cinza solto */
.monitor { background: rgba(6, 14, 36, .38); border-color: rgba(143, 182, 255, .24); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* fundo preto liso (padrão): o mesmo grafite do mapa */
html[data-fundo="preto"] body { background: var(--grafite); }
html[data-fundo="preto"] .app { --nav: rgba(255, 255, 255, .03); }

/* gasto do modelo */
.barra { height: 8px; max-width: 420px; background: var(--folha); border: 1px solid var(--linha); border-radius: 4px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--verde); }
.linha .corpo small { display: block; margin-top: 2px; color: var(--suave); font-size: 13px; }

/* Configurações: grade de cartões, linhas de ajuste com chave liga/desliga, dados em lista */
.cfg-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cfg-grade .cfg { max-width: none; margin: 0; padding: 4px 22px 18px; }
@media (max-width: 960px) { .cfg-grade { grid-template-columns: 1fr; } }
.cfg-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 12px; }
.cfg-cab h2 { margin: 0; }
.cfg-linha { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--linha); }
.cfg-linha b { font-weight: 600; }
.cfg-linha p { margin: 2px 0 0; max-width: 38ch; }
.cfg-nota { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); }
.chave { position: relative; display: inline-block; flex: none; width: 42px; height: 24px; cursor: pointer; }
.chave input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chave i { position: absolute; inset: 0; border-radius: 12px; background: var(--folha); border: 1px solid var(--linha-forte); transition: background .15s; }
.chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--suave); transition: transform .15s, background .15s; }
.chave input:checked + i { background: var(--tinta); border-color: var(--tinta); }
.chave input:checked + i::after { transform: translateX(18px); background: #fff; }
.chave input:focus-visible + i { outline: 2px solid var(--link); outline-offset: 2px; }
.cfg-dados { margin: 0; }
.cfg-dados > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--linha); }
.cfg-dados dt { color: var(--suave); }
.cfg-dados dt small { font-size: 12px; }
.cfg-dados dd { margin: 0; }
.cfg-dados dd small { display: block; margin-top: 2px; color: var(--suave); font-size: 13px; }
.cfg-dados .barra { margin-top: 8px; max-width: none; }
.cfg-ajuda { padding: 12px 0 0; border-top: 1px solid var(--linha); color: var(--suave); font-size: 13px; }
.cfg-ajuda summary { cursor: pointer; }
.cfg-ajuda p { margin: 8px 0 0; }
.cfg code { padding: 1px 5px; border-radius: 4px; background: var(--folha); font-size: 12.5px; }
.cfg-conta { display: flex; align-items: center; gap: 14px; padding: 4px 0 6px; }
.cfg-conta > div { flex: 1; min-width: 0; }
.cfg-conta p { margin: 2px 0 0; }
.cfg #k-lista .linhas { margin-top: 12px; }
.cfg #k-lista > p { margin: 12px 0 0; }
.cfg-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* links para conferir antes de aprovar */
.links-conferir { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--ambar); border-radius: var(--raio); background: rgba(255, 201, 51, .07); }
.links-conferir p { margin: 4px 0 10px; font-size: 13px; }
.links-conferir .lk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--linha); }
.links-conferir .lk code { flex: 1; min-width: 0; word-break: break-all; }
.links-conferir .lk label { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; }

.chave-linha { align-items: flex-start; }
.chave-linha .corpo small { display: block; margin-top: 3px; }
.chave-linha .barra { margin-top: 8px; max-width: 360px; }
.acoes-chave { display: flex; gap: 6px; flex: none; }

/* estado do sistema */
.estado-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; margin-bottom: 18px; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); }
.estado-topo b { font-size: 18px; }
.estado-topo p { margin: 4px 0 0; }
.estado-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cartao-estado { padding: 14px 18px 16px; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); border-left-width: 3px; }
.cartao-estado.ok { border-left-color: var(--verde); } .cartao-estado.atencao { border-left-color: var(--ambar); } .cartao-estado.falha { border-left-color: var(--vermelho); }
.ce-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ce-cab h2 { margin: 0; font-size: 15px; }
.ce-resumo { margin: 8px 0 0; font-weight: 600; }
.cartao-estado ul { margin: 8px 0 0; padding-left: 18px; color: var(--suave); font-size: 13px; }