/* Admin MamãeTech — visual aprovado no esboço (painel/esboco/admin_esboco.html), 05/10/2026.
   Escuro é o padrão; html[data-tema="claro"] liga o claro (botão ☀/☾). */

:root{
  --ciano:#00d1ff;--azul:#0066ff;--roxo:#7a3cff;--magenta:#ff3cf0;
  --ground:#0b0f1a;--superficie:#151a2a;--elevada:#1e2335;
  --texto:#eef1f8;--texto-2:#a2acc4;--texto-3:#6b7793;--linha:#262d42;--linha-forte:#333c55;
  --ok:#38d98a;--alerta:#ffb020;--erro:#ff5c7a;
  --gradiente:linear-gradient(100deg,var(--ciano),var(--roxo));
  --c1:#00d1ff;--c2:#7a3cff;--c3:#ff3cf0;
  --sans:ui-sans-serif,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--texto);font:14px/1.45 var(--sans)}
.mono{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
a{color:inherit;text-decoration:none}
/* topo */
.topo{height:66px;border-bottom:1px solid var(--linha);display:flex;align-items:center;padding:0 22px;gap:18px}
.marca{font-weight:900;font-size:19px;letter-spacing:.02em;background:var(--gradiente);-webkit-background-clip:text;color:transparent}
.selo{border:1px solid var(--ciano);color:var(--ciano);font-size:10.5px;padding:4px 9px;border-radius:4px}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:12px;color:var(--texto-2)}
.av{width:34px;height:34px;border-radius:50%;background:var(--gradiente);display:grid;place-items:center;font-weight:700;color:#fff}
.quem b{display:block;color:var(--texto);font-size:14px;letter-spacing:0;text-transform:none;font-family:var(--sans)}
/* layout */
.app{display:grid;grid-template-columns:256px 1fr;min-height:calc(100vh - 66px)}
.lado{border-right:1px solid var(--linha);padding:22px 12px}
.grupo{font-size:10.5px;color:var(--texto-3);margin:22px 12px 8px}
.grupo:first-child{margin-top:0}
.grupo i{font-style:normal;display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;vertical-align:0}
.item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;color:var(--texto-2);font-size:15px;cursor:pointer}
.item:hover{background:var(--superficie);color:var(--texto)}
.item.on{background:#14284a;color:var(--ciano)}
.item .n{margin-left:auto;font:10.5px var(--mono);padding:2px 7px;border-radius:9px;background:var(--elevada);color:var(--texto-2)}
.item .n.alerta{background:#3a2a0b;color:var(--alerta)}
.item .breve{margin-left:auto;font:9.5px var(--mono);letter-spacing:.12em;border:1px solid var(--linha-forte);padding:2px 7px;border-radius:9px;color:var(--texto-3)}
.ic{width:18px;text-align:center;opacity:.85}
main{padding:26px 34px 60px}
.cab{display:flex;align-items:flex-start;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--linha)}
.cab h1{font-size:26px;font-weight:700}
.cab p{color:var(--texto-2);margin-top:8px}
.btn{margin-left:auto;background:var(--gradiente);color:#fff;border:0;padding:13px 22px;border-radius:4px;font:700 12px var(--mono);letter-spacing:.14em;cursor:pointer;white-space:nowrap}
.btn.sec{background:transparent;border:1px solid var(--linha-forte);color:var(--texto-2);margin-left:0}
/* cartões */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0}
.card{background:var(--superficie);border:1px solid var(--linha);border-radius:4px;padding:18px 20px}
.card b{display:block;font-size:30px;font-weight:800}
.card span{font-size:11px;color:var(--texto-2)}
.card.alerta{border-color:#6b4a10;background:#17150f}.card.alerta b{color:var(--alerta)}
.card.ok b{color:var(--ok)}
/* esteira */
h2{font:700 13.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--linha);margin-bottom:12px}
h2 a{margin-left:auto;font:11px var(--mono);letter-spacing:.14em;color:var(--texto-2)}
.esteira{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:stretch;margin-bottom:30px}
.seta{display:grid;place-items:center;color:var(--texto-3);font-size:18px}
.casa{background:var(--superficie);border:1px solid var(--linha);border-top:3px solid var(--cor);border-radius:4px;padding:14px 16px}
.casa .t{font:700 11px var(--mono);letter-spacing:.14em;color:var(--cor)}
.casa h3{font-size:16px;margin:4px 0 10px}
.etapa{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--texto-2);padding:4px 0}
.etapa .h{margin-left:auto;font:11px var(--mono);color:var(--texto-3)}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)}.dot.al{background:var(--alerta)}.dot.er{background:var(--erro)}.dot.off{background:var(--texto-3)}
/* lista + lateral */
.duas{display:grid;grid-template-columns:1fr 340px;gap:32px}
.linha{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--linha);border-left:3px solid var(--cor)}
.linha:hover{background:var(--superficie)}
.linha .tit{font-size:15.5px;font-weight:600}
.linha .meta{font:11.5px var(--mono);color:var(--texto-3);margin-top:4px;letter-spacing:.06em}
.tag{margin-left:auto;font:10.5px var(--mono);letter-spacing:.12em;padding:4px 10px;border-radius:12px;border:1px solid;white-space:nowrap}
.tag.ok{color:var(--ok);border-color:#1f5c40;background:#0f2219}
.tag.al{color:var(--alerta);border-color:#6b4a10;background:#1d170b}
.tag.ci{color:var(--ciano);border-color:#0b4a5c;background:#0b1d26}
.tag.ro{color:#b18cff;border-color:#3d2a6b;background:#171229}
.espera{background:var(--superficie);border:1px solid var(--linha);border-radius:4px;padding:16px 18px;margin-bottom:12px;cursor:pointer}
.espera:hover{border-color:var(--linha-forte)}
.espera b{font-size:26px;font-weight:800}
.espera p{margin:4px 0 8px}
.espera small{font:10.5px var(--mono);letter-spacing:.12em;color:var(--texto-3)}
.espera.quente{border-color:#6b4a10}.espera.quente b{color:var(--alerta)}
/* telas */
.tela{display:none}.tela.on{display:block}
.nota{border:1px dashed var(--linha-forte);border-radius:6px;padding:10px 14px;color:var(--texto-3);font-size:12.5px;margin:-8px 0 22px}
.nota b{color:var(--magenta)}
/* roteiro */
.editor{display:grid;grid-template-columns:1fr 360px;gap:24px;margin-top:22px}
.folha{background:var(--superficie);border:1px solid var(--linha);border-radius:4px;padding:22px 26px;font-size:16px;line-height:1.7}
.folha .bloco{font:700 11px var(--mono);letter-spacing:.14em;color:var(--magenta);margin:18px 0 4px}
.folha .bloco:first-child{margin-top:0}
.folha [contenteditable]{outline:none;border-radius:4px;padding:2px 4px;margin:0 -4px}
.folha [contenteditable]:focus{background:var(--elevada)}
.barra{display:flex;gap:10px;margin-top:14px}
.chat{background:var(--superficie);border:1px solid var(--linha);border-radius:4px;display:flex;flex-direction:column}
.chat .topo-c{padding:14px 16px;border-bottom:1px solid var(--linha);font:700 11px var(--mono);letter-spacing:.14em;color:var(--magenta)}
.msgs{padding:14px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.msg{padding:10px 12px;border-radius:6px;font-size:13.5px;max-width:92%}
.msg.eu{background:#14284a;align-self:flex-end}
.msg.ia{background:var(--elevada)}
.msg small{display:block;font:10px var(--mono);color:var(--texto-3);margin-top:4px;letter-spacing:.08em}
.entrada{border-top:1px solid var(--linha);padding:12px;display:flex;gap:8px}
.entrada input{flex:1;background:var(--ground);border:1px solid var(--linha-forte);color:var(--texto);padding:10px 12px;border-radius:4px;font:13.5px var(--sans)}
.entrada .btn{margin:0;padding:10px 14px}
/* rotinas */
table{width:100%;border-collapse:collapse;margin-top:18px}
th{font:10.5px var(--mono);letter-spacing:.14em;color:var(--texto-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--linha);text-transform:uppercase}
td{padding:14px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
td .sub{font:11px var(--mono);color:var(--texto-3);margin-top:3px}
.casa-t{font:700 10.5px var(--mono);letter-spacing:.12em}
.chave{display:inline-flex;border:1px solid var(--linha-forte);border-radius:4px;overflow:hidden}
.chave button{background:transparent;border:0;color:var(--texto-3);font:700 10.5px var(--mono);letter-spacing:.12em;padding:7px 11px;cursor:pointer}
.chave button.on{background:var(--elevada);color:var(--texto)}
.chave button.on.auto{color:var(--ok)}
.rodar{background:transparent;border:1px solid var(--linha-forte);color:var(--ciano);font:700 10.5px var(--mono);letter-spacing:.12em;padding:7px 11px;border-radius:4px;cursor:pointer}
.ia{font:10px var(--mono);color:var(--alerta);letter-spacing:.1em}
@media(max-width:900px){.app{grid-template-columns:1fr}.lado{display:none}.cards{grid-template-columns:1fr 1fr}.duas,.editor{grid-template-columns:1fr}.esteira{grid-template-columns:1fr}.seta{transform:rotate(90deg);height:24px}main{padding:20px 16px}.topo .dir span:not(.av){display:none}}


.tema{background:transparent;border:1px solid var(--linha-forte);color:var(--texto-2);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px}
.tema:hover{color:var(--texto)}
/* ═══ TEMA CLARO (botão ☀/☾ no topo) ═══ */
html[data-tema="claro"]{
  --ground:#f3f5fa;--superficie:#ffffff;--elevada:#eef1f7;
  --texto:#141a2b;--texto-2:#4a5470;--texto-3:#7b8499;--linha:#e2e6ef;--linha-forte:#cdd3e1;
  --ciano:#0089b8;--c1:#0089b8;--c2:#6a2ee8;--c3:#d21fc4;
  --ok:#14915a;--alerta:#c27a00;--erro:#d93355;
  --gradiente:linear-gradient(100deg,#00b4e6,#7a3cff);
}
html[data-tema="claro"] .topo{background:#fff}
html[data-tema="claro"] .lado{background:#fff}
html[data-tema="claro"] .item.on{background:#e3f4fb;color:var(--ciano)}
html[data-tema="claro"] .item .n.alerta{background:#fff1d6;color:var(--alerta)}
html[data-tema="claro"] .card,html[data-tema="claro"] .casa,html[data-tema="claro"] .espera,html[data-tema="claro"] .folha,html[data-tema="claro"] .chat{box-shadow:0 1px 2px rgba(20,26,43,.05)}
html[data-tema="claro"] .card.alerta,html[data-tema="claro"] .espera.quente{border-color:#f0d08f;background:#fffaf0}
html[data-tema="claro"] .tag.ok{border-color:#a8e0c4;background:#eafaf2}
html[data-tema="claro"] .tag.al{border-color:#f0d08f;background:#fff6e3}
html[data-tema="claro"] .tag.ci{border-color:#9fd8ec;background:#e8f7fc}
html[data-tema="claro"] .tag.ro{color:#6a2ee8;border-color:#cdb8f7;background:#f3eefe}
html[data-tema="claro"] .msg.eu{background:#e3f4fb}
html[data-tema="claro"] .entrada input{background:#fff}
html[data-tema="claro"] .btn{color:#fff}
html[data-tema="claro"] .linha:hover{background:#f7f9fc}

/* ═══ Etapa 1 — extras do app de verdade ═══ */
.item.breve-on{opacity:.55;cursor:default}
.item.breve-on:hover{background:transparent;color:var(--texto-2)}
.vazio{color:var(--texto-3);font-size:13px;padding:14px}
.carregando{opacity:.45}
.espera small.mono.breve{color:var(--texto-3)}
button.sair{background:none;border:0;color:var(--texto-2);font-size:16px;cursor:pointer}
/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login form{width:100%;max-width:380px;background:var(--superficie);border:1px solid var(--linha);border-radius:8px;padding:30px 28px}
.login .marca{font-size:22px;margin-bottom:6px}
.login p{color:var(--texto-2);margin-bottom:22px}
.login label{display:block;font:10.5px var(--mono);letter-spacing:.14em;color:var(--texto-3);margin-bottom:8px;text-transform:uppercase}
.login input{width:100%;background:var(--ground);border:1px solid var(--linha-forte);color:var(--texto);padding:12px;border-radius:4px;font:15px var(--sans);margin-bottom:16px}
.login .btn{width:100%;margin:0}
.login .erro{color:var(--erro);font-size:13px;min-height:20px;margin-top:12px}
.login .tema{position:fixed;top:16px;right:16px}
.item{white-space:nowrap}
.item .n,.item .breve{flex:none;font-size:9px;padding:2px 6px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.app{grid-template-columns:276px 1fr}

/* ═══ Etapa 2 — Casa 1 ═══ */
a.linha{color:inherit}
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 6px}
.filtro{background:var(--superficie);border:1px solid var(--linha-forte);color:var(--texto);padding:9px 12px;border-radius:4px;font:13.5px var(--sans)}
.filtro.busca{flex:1;min-width:220px}
.resumo-l{font-size:11px;color:var(--texto-3)}
.chip{background:transparent;border:1px solid var(--linha-forte);color:var(--texto-2);padding:6px 11px;border-radius:14px;font:12.5px var(--sans);cursor:pointer}
.chip:hover{color:var(--texto)}
.chip.on{border-color:var(--c1);color:var(--c1);background:color-mix(in srgb,var(--c1) 10%,transparent)}
.filtros + #lista,.filtros + .grade{margin-top:14px}
/* temas: faixas de shorts */
.faixas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.faixa{display:flex;flex-direction:column;gap:10px}
.ftit{display:flex;align-items:baseline;gap:10px}
.ftit b{font-size:16px}.ftit span{font-size:10.5px;color:var(--texto-3)}
.vcard,.tcard{display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linha);border-radius:4px;overflow:hidden;color:inherit}
.vcard:hover,.tcard:hover{border-color:var(--linha-forte)}
.vcard img,.tcard img,.semthumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--elevada);display:block}
.vtxt{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vtit{font-weight:600;font-size:14px;line-height:1.35}
.vtxt .tag{margin-left:0}
.meta{font:11.5px var(--mono);color:var(--texto-3);letter-spacing:.04em}
.tema-l{border-bottom:1px solid var(--linha)}
.tema-l summary{cursor:pointer;padding:12px 14px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;border-left:3px solid var(--c1)}
.tema-l summary .tit{font-weight:600;font-size:15.5px}
.tema-l[open] summary{background:var(--superficie)}
.tema-l .linha{padding-left:28px}
/* títulos */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
/* canal */
.graficos{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grafico{position:relative;background:var(--superficie);border:1px solid var(--linha);border-radius:4px;padding:10px 8px 4px}
.grafico svg{width:100%;height:auto;display:block}
.g-grade{stroke:var(--linha);stroke-width:1}
.g-eixo{fill:var(--texto-3);font:10.5px var(--mono)}
.g-linha{fill:none;stroke:var(--c1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.g-mira{stroke:var(--texto-3);stroke-width:1;stroke-dasharray:3 3}
.g-ponto{fill:var(--c1);stroke:var(--superficie);stroke-width:2}
.g-hit{fill:transparent;cursor:crosshair}
.g-dica{position:absolute;top:6px;transform:translateX(-50%);background:var(--elevada);border:1px solid var(--linha-forte);border-radius:4px;padding:6px 10px;font-size:12.5px;pointer-events:none;white-space:nowrap}
.g-dica span{font:11px var(--mono);color:var(--texto-3)}
.tabela-rolar{overflow-x:auto}
td.n,th.n{text-align:right;font-family:var(--mono)}
td a{color:var(--texto)}td a:hover{color:var(--c1)}
td .tag{margin-left:0}
@media(max-width:900px){.faixas,.graficos{grid-template-columns:1fr}}
/* shorts das faixas: compacto (miniatura ao lado do texto) */
.faixa .vcard{flex-direction:row}
.faixa .vcard img,.faixa .vcard .semthumb{width:112px;flex:none;aspect-ratio:9/12}
.faixa .vtit{font-size:13.5px}
.item{font-size:14.5px}

/* ═══ Etapa 3 — Casa 2 (leitor) ═══ */
.acoes{margin-left:auto;display:flex;gap:10px;align-items:center}
.acoes .btn{margin:0}
.leitor{display:grid;grid-template-columns:360px 1fr;gap:24px;margin-top:20px;align-items:start}
.leitor-lista{display:flex;flex-direction:column;border-top:1px solid var(--linha);max-height:calc(100vh - 150px);overflow-y:auto;position:sticky;top:16px}
.litem{display:flex;gap:12px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--linha);border-left:3px solid transparent;color:var(--texto);padding:12px 12px;cursor:pointer;font:inherit}
.litem:hover{background:var(--superficie)}
.litem.on{background:var(--superficie);border-left-color:var(--c2)}
.lnum{color:var(--c2);font-weight:700;padding-top:2px}
.lcorpo{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.lcorpo .tit{font-weight:600;font-size:14.5px;line-height:1.35}
.lcorpo .tag{margin-left:0}
.leitor-texto{background:var(--superficie);border:1px solid var(--linha);border-top:3px solid var(--c2);border-radius:4px;padding:26px 32px;min-height:300px}
/* texto vindo das casas (markdown) */
.md{font-size:15.5px;line-height:1.7;max-width:78ch}
.md h2,.md h3,.md h4,.md h5,.md h6{font-family:var(--sans);text-transform:none;letter-spacing:0;border:0;display:block;padding:0;margin:22px 0 8px;line-height:1.3}
.md h2{font-size:21px}.md h3{font-size:17px}.md h4,.md h5,.md h6{font-size:15.5px}
.md > :first-child{margin-top:0}
.md p{margin:0 0 12px}
.md ul,.md ol{margin:0 0 12px 22px}
.md li{margin:4px 0}.md li.sub{margin-left:20px;list-style:circle}
.md a{color:var(--c1);word-break:break-word}
.md strong{color:var(--texto)}
.md code{font:13px var(--mono);background:var(--elevada);padding:1px 5px;border-radius:3px}
.md pre{background:var(--elevada);padding:12px;border-radius:4px;overflow-x:auto;margin-bottom:12px}
.md blockquote{border-left:3px solid var(--linha-forte);padding:2px 0 2px 14px;color:var(--texto-2);margin:0 0 12px}
.md hr{border:0;border-top:1px solid var(--linha);margin:20px 0}
.md-tabela{overflow-x:auto;margin:0 0 14px}
.md table{margin:0;font-size:13.5px;line-height:1.45}
.md th,.md td{padding:8px 10px;vertical-align:top;border-bottom:1px solid var(--linha)}
.md th{white-space:nowrap}
@media(max-width:900px){.leitor{grid-template-columns:1fr}.leitor-lista{position:static;max-height:none}.leitor-texto{padding:18px 16px}.acoes{margin-left:0;flex-wrap:wrap}}