/* =====================================================================
   Telas de painel e de ajuste (rodada 4): Ao vivo, Resultado, Ajustes, Simular, Login.
   Carregado depois do app.css. Escuro e palco (Ao vivo inteiro, faixa de numeros do Resultado);
   branco e a coisa em si (tabelas, formularios).
   Pares de contraste novos, todos AA (calculados): --p-txt e --p-txt-2 em --noite-2 e --noite-3,
   --p-vermelho (#FF8A80), --p-verde (#5FD39A) e --p-amarelo (#F5CD47) em --noite-3.
   Rodada 5 (23/10, tudo preto): Resultado, Ajustes e Simular no mesmo palco das outras telas; a faixa de numeros
   passa a --noite-3 (no palco --noite-2 ela sumia). Numeros: branco / #1F1F1F 16,48; #A3A3A3 / #1F1F1F 6,53;
   #A3A3A3 / #141414 7,30 (texto do periodo); filtro ativo #0D0D0D / #FFFFFF 19,44; #5FD39A / #1F1F1F 8,85; #FF8A80 / #1F1F1F 7,22.
   ===================================================================== */

/* ---------------------------------------------------------- Ao vivo: a sala de controle */
.palco{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:var(--e5);color:var(--p-txt)}
.palco-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);flex-wrap:wrap}
.palco .resumo{display:flex;gap:var(--e6);margin:0;flex-wrap:wrap}
.palco .resumo > div{display:flex;flex-direction:column-reverse;gap:2px}
.palco .resumo dt{font-size:12px;color:var(--p-txt-2);font-weight:600}
.palco .resumo dd{margin:0;font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--p-txt)}
.palco .resumo .critico dd{color:var(--p-vermelho)}
.palco .resumo .atencao dd{color:var(--p-amarelo)}
.palco .atualiza{margin:0;font-size:12px;color:var(--p-txt-2);display:flex;align-items:center;gap:8px}
.palco .atualiza .ponto{width:8px;height:8px;border-radius:50%;background:var(--p-verde);animation:pulsa 2s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.35}}
.palco .vazio{background:var(--bloco-p);box-shadow:var(--bloco-anel);border-radius:var(--r2);color:var(--p-txt-2)}
.palco .vazio strong{color:var(--p-txt)}
.palco .vazio p{color:var(--p-txt-2)}
.palco .btn.fraco{background:transparent;color:var(--p-txt);border-color:var(--linha)}

.av-lista{background:var(--bloco-p);box-shadow:var(--bloco-anel);border-radius:var(--r2);overflow:hidden}
.av-linha{display:grid;grid-template-columns:minmax(150px,2.2fr) 1.1fr 1.4fr .8fr 1.1fr;align-items:center;gap:var(--e3);
  padding:14px var(--e4) 14px 12px;border-left:4px solid transparent;border-bottom:1px solid var(--linha);color:var(--p-txt)}
.av-linha:last-child{border-bottom:0}
a.av-linha{transition:background var(--transicao)}
a.av-linha:hover{background:var(--sup-2)}
a.av-linha:focus-visible{outline-color:var(--foco);outline-offset:-2px}
.av-linha.critico{border-left-color:var(--p-vermelho)}
.av-linha.cab{padding-top:10px;padding-bottom:10px;font-size:12px;font-weight:600;color:var(--p-txt-2);background:var(--palco);border-bottom-color:var(--linha)}
.av-linha .quem{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-linha .n{text-align:right;font-variant-numeric:tabular-nums}
.av-linha .grande{font-size:28px;font-weight:800;line-height:1}
.av-linha .espera{font-weight:700;font-size:15px}
.av-linha .espera.critico{color:var(--p-vermelho)}
.av-linha .espera.atencao{color:var(--p-amarelo)}
.av-linha .espera.ok{color:var(--p-verde);font-weight:600}
.rodape-palco{margin:calc(var(--e3) * -1) 0 0;font-size:13px;color:var(--p-txt-2)}

.atrasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--e4)}
.bloco-palco{background:var(--bloco-p);box-shadow:var(--bloco-anel);border-radius:var(--r2);padding:var(--e4) var(--e5)}
.bloco-palco h2{margin:0 0 var(--e3);font-size:15px;font-weight:700;display:flex;justify-content:space-between;color:var(--p-txt)}
.bloco-palco h2 span{color:var(--p-txt-2);font-weight:600}
.bloco-palco ul{list-style:none;margin:0;padding:0}
.bloco-palco li a{display:flex;align-items:center;gap:var(--e2);min-height:44px;border-bottom:1px solid var(--linha);font-size:14px;color:var(--p-txt)}
.bloco-palco li:last-child a{border-bottom:0}
.bloco-palco li a:hover{color:var(--p-link);text-decoration:underline}
.bloco-palco li b{margin-left:auto;font-weight:700;color:var(--p-vermelho);font-variant-numeric:tabular-nums}
.bloco-palco li .ponto{width:9px;height:9px;border-radius:50%;background:var(--c,var(--cinza));flex:none}
.bloco-palco li .num{font-weight:700;color:var(--p-txt-2)}
.bloco-palco .ok{margin:0;color:var(--p-verde);font-size:14px}
.bloco-palco .mais{display:inline-block;margin-top:var(--e2);color:var(--p-link);font-weight:600;font-size:13px}

/* ---------------------------------------------------------- Resultado */
.res-pagina{max-width:1180px}
.res-controles{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e4)}
.res-controles .filtros{padding:0;align-items:center}
.periodo-texto{margin:0;flex:1 1 320px;text-align:right;color:var(--p-txt-2);font-size:var(--t5)}

.faixa-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--bloco-p);box-shadow:var(--bloco-anel);border-radius:var(--r2);color:var(--p-txt);overflow:hidden}
.faixa-kpi .kpi{padding:var(--e5) var(--e5) var(--e4);border-right:1px solid var(--linha);display:flex;flex-direction:column;gap:6px;min-width:0}
.faixa-kpi .kpi:nth-child(4){border-right:0}
.faixa-kpi .rot{font-size:12px;font-weight:600;color:var(--p-txt-2)}
.faixa-kpi b{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums}
.faixa-kpi .sub{font-size:12px;color:var(--p-txt-2)}
.faixa-kpi .delta{font-size:12px;font-weight:700;color:var(--p-txt-2)}
.faixa-kpi .delta.bom{color:var(--p-verde)}
.faixa-kpi .delta.ruim{color:var(--p-vermelho)}
.faixa-kpi .nota-faixa{grid-column:1/-1;margin:0;padding:10px var(--e5);background:var(--faixa-nota);font-size:12px;color:var(--p-txt-2)}

.res-numeros.segunda{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.res-numeros.segunda b{font-size:1.35rem;white-space:nowrap}
.res-pagina .cartao{max-width:none}
.res-duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:var(--e4);align-items:start}
.res-pagina .legenda{font-size:var(--t5);margin:0 0 var(--e3)}
.res-pagina .cartao > h2{font-size:15px}

/* ---------------------------------------------------------- Ajustes */
.cfg-grade{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--e4);max-width:1200px;margin:0 auto;align-items:start}
.cfg-lado{display:flex;flex-direction:column;gap:var(--e4)}
.cfg-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e3)}
.cfg-cab h2{margin:0}
.cfg-cab input[type=search]{flex:1 1 180px;max-width:260px;min-height:40px;border:1px solid var(--borda-2);border-radius:20px;padding:0 var(--e4);font:inherit;font-size:var(--t4);background:#fff;color:var(--txt)}
.cfg-cab input[type=search]:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-claro)}
details.pessoa{border:1px solid var(--borda);border-radius:var(--r1);margin-bottom:var(--e2);background:#fff;color:var(--txt)}
details.pessoa[open]{border-color:var(--borda-2)}
details.pessoa > summary{display:flex;align-items:center;gap:var(--e3);min-height:56px;padding:6px var(--e3);cursor:pointer;list-style:none}
details.pessoa > summary::-webkit-details-marker{display:none}
details.pessoa > summary:hover{background:var(--cinza-claro)}
details.pessoa .nome{flex:1;min-width:0;display:flex;flex-direction:column}
details.pessoa .nome b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.pessoa .nome small{font-size:12px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.pessoa > :not(summary){margin-left:var(--e3);margin-right:var(--e3)}
details.pessoa > form,details.pessoa > div{padding:0}
details.pessoa > .desf-botoes{margin-bottom:var(--e3)}
.loja-linha{display:flex;align-items:center;gap:var(--e3);min-height:48px;border-bottom:1px solid var(--borda)}
.loja-linha b{flex:1;font-size:14px}
.link-acao{background:none;border:0;padding:0 var(--e2);min-height:44px;color:var(--txt-2);font:600 13px var(--f);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-acao:hover{color:var(--vermelho-txt)}
.nova-loja{display:flex;gap:var(--e2);margin-top:var(--e3)}
.nova-loja input{flex:1;min-width:0;min-height:44px;border:1px solid var(--borda-2);border-radius:var(--r1);padding:0 var(--e3);font:inherit;font-size:var(--t4)}
.nova-loja input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-claro)}
.cfg-grade .btn{min-height:44px}

/* ---------------------------------------------------------- Simular */
.demo-card{margin:0 auto}
.demo-cab{display:flex;justify-content:flex-end;margin-bottom:var(--e2)}

/* ---------------------------------------------------------- Login: o traco azul liga a marca ao app */
.tela-login{background:var(--palco)}
body:has(.tela-login){background:var(--palco)}
.tela-login form{border-top:3px solid var(--azul);box-shadow:0 24px 60px -20px var(--sombra-login),var(--bloco-anel)}
.tela-login .btn{background:var(--noite-0);border-color:var(--noite-0)}
.tela-login .btn:hover{background:#2A2A2A}

/* ---------------------------------------------------------- celular */
@media (max-width:900px){
  .faixa-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faixa-kpi .kpi{border-right:0;border-bottom:1px solid var(--linha);padding:var(--e4)}
  .faixa-kpi .kpi:first-child{grid-column:1/-1}
  .faixa-kpi .kpi:nth-child(3){border-right:1px solid var(--linha)}
  .faixa-kpi .kpi:nth-child(n+3){border-bottom:0}
  .faixa-kpi .kpi:nth-child(2){border-right:0}
  .faixa-kpi b{font-size:1.7rem}
  .periodo-texto{text-align:left}
  .cfg-grade{grid-template-columns:1fr}
  .av-linha{grid-template-columns:1fr 1fr;row-gap:6px}
  .av-linha.cab{display:none}
  .av-linha .quem{grid-column:1/-1}
  .av-linha .n,.av-linha .espera{text-align:left}
  .av-linha [data-r]::before{content:attr(data-r);display:block;font-size:11px;font-weight:600;color:var(--p-txt-2);margin-bottom:2px}
  .av-linha .grande{font-size:24px}
  .palco .resumo{gap:var(--e5)}
  .palco .resumo dd{font-size:28px}
}

.cfg-lado section > form:not(.loja-linha):not(.nova-loja){margin-bottom:var(--e4)}

/* ---------------------------------------------------------- Resultado: visoes e blocos (rodada 5, etapa 5)
   Cor so com significado, nos dois temas: verde = venda, vermelho = perda/atraso, ambar = atencao, azul = volume.
   Sobre o cartao branco fixo usam-se os tokens -txt (verde-txt #17784A 5,4:1, vermelho-txt #A42626 6,6:1, ambar #9A5B00 5,1:1);
   direto no palco (faixa de KPI, barra de edicao) usam-se os p-* do tema. */
.res-topo{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
.res-topo .espaco{flex:1 1 0}
.res-topo .btn,.res-datas .btn{min-height:40px}
.res-reset{margin:0}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r1);background:var(--sup)}
.seg a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--e4);border-radius:8px;font-size:13px;font-weight:700;color:var(--p-txt-2);white-space:nowrap}
.seg a:hover{color:var(--p-txt)}
.seg a.ativo{background:var(--pill-bg);color:var(--pill-txt)}
.res-datas{display:flex;align-items:flex-end;gap:var(--e2);flex-wrap:wrap}
.res-datas .campo{margin:0}
.res-datas label{color:var(--p-txt-2);margin-bottom:3px}
.res-datas input{width:112px;min-height:40px;font-size:13px;padding:0 var(--e3)}
.res-datas.ativo input{border-color:var(--azul)}
.res-dica{margin:0;color:var(--p-txt-2);font-size:var(--t5)}
.res-dica #res-estado{margin-left:var(--e2);font-weight:700;color:var(--p-txt)}

/* a grade: 6 colunas; 1/3 = 2, 1/2 = 3, linha inteira = 6 */
.res-grade{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--e4);align-items:start}
.rb{min-width:0;container-type:inline-size;display:flex;flex-direction:column;gap:var(--e2)}
.rb-t{grid-column:span 2}.rb-m{grid-column:span 3}.rb-c{grid-column:span 6}
.rb-corpo{display:flex;flex-direction:column;gap:var(--e4);min-width:0}
.rb-corpo > .cartao{max-width:none}
.rb .legenda{margin:0 0 var(--e3);font-size:var(--t5)}
.rb .rodape-bloco{margin:var(--e3) 0 0}
.rb .res-numeros{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.rb .cartao .res-numeros div{background:var(--cinza-claro);box-shadow:none}
.rb .res-numeros b{font-size:1.3rem;white-space:nowrap}
.rb .meta-vazia{margin:0 0 var(--e3);font-weight:700;color:var(--ambar)}
.rb-filtro{display:flex;align-items:flex-end;gap:var(--e2);flex-wrap:wrap;margin:0 0 var(--e3)}
.rb-filtro .campo{margin:0}
.rb-filtro input{width:112px;min-height:40px;font-size:13px}
.rb-filtro .btn{min-height:40px}

/* cores com significado dentro do cartao branco e dos numeros */
.rb .venda{color:var(--verde-txt)}
.rb .ruim,.rb .perda{color:var(--vermelho-txt)}
.rb .atencao{color:var(--ambar)}
.rb .ok{color:var(--verde-txt)}
.faixa-kpi b.venda{color:var(--p-verde)}
.faixa-kpi b.resp.ok{color:var(--p-verde)}
.faixa-kpi b.resp.atencao{color:var(--p-amarelo)}
.faixa-kpi b.resp.ruim{color:var(--p-vermelho)}
.pct{display:inline-block;min-width:48px;text-align:center;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;color:var(--on-st)}
.pct.ok{background:var(--st-venda);color:var(--on-st)}
.pct.atencao{background:var(--st-espera);color:var(--on-st)}
.pct.ruim{background:var(--st-atraso);color:var(--on-st)}
.pct.neutro{background:var(--cinza-claro);color:var(--txt)}
.pdot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--vermelho)}

/* a barra de edicao de cada bloco (fica direto no palco) */
.res-grade.editando .rb{padding:var(--e2);border:1px dashed var(--linha);border-radius:var(--r3)}
.rb-ed{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;color:var(--p-txt)}
.rb-ed button{min-height:40px;min-width:40px;border:1px solid var(--linha);border-radius:var(--r1);background:var(--sup);color:var(--p-txt);font:700 12px var(--f);cursor:pointer;padding:0 var(--e3);display:inline-flex;align-items:center;justify-content:center}
.rb-ed button:hover:not(:disabled){background:var(--sup-2)}
.rb-ed button:disabled{opacity:.35;cursor:not-allowed}
.rb-ed button:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.rb-ed svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rb-ed .rb-mov svg,.rb-ed .rb-alca svg{fill:none}
.rb-ed .rb-alca svg circle{fill:currentColor;stroke:none}
.rb-alca{cursor:grab;touch-action:none}
.rb-nome{flex:1 1 120px;font-size:14px;min-width:0}
.rb-tams,.rb-mov{display:inline-flex;gap:4px}
.rb-ed [aria-pressed="true"]{background:var(--pill-bg);border-color:var(--pill-bg);color:var(--pill-txt)}
.rb-esconde{color:var(--p-txt-2)}
.rb.arrastando{opacity:.55;border-color:var(--azul)!important;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.arrastando-grade,.arrastando-grade *{cursor:grabbing!important;user-select:none}
.rb-bandeja{background:var(--bloco-p);box-shadow:var(--bloco-anel);border-radius:var(--r2);padding:var(--e4) var(--e5);color:var(--p-txt)}
.rb-bandeja h2{margin:0 0 var(--e3);font-size:15px}
.rb-bandeja ul{list-style:none;margin:0;padding:0}
.rb-bandeja li{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);min-height:48px;border-bottom:1px solid var(--linha);font-size:14px}
.rb-bandeja li:last-child{border-bottom:0}

/* bloco estreito (1/3, ou o celular): a tabela vira linhas legiveis, pela largura do proprio bloco */
@container (max-width:520px){
  .rb table.tabela thead{display:none}
  .rb table.tabela tr{display:block;padding:var(--e2) 0;border-bottom:1px solid var(--borda)}
  .rb table.tabela td{display:flex;justify-content:space-between;gap:var(--e3);border:0;padding:var(--e1) var(--e2);text-align:right}
  .rb table.tabela td::before{content:attr(data-r);color:var(--txt-3);text-align:left;flex:none}
  .rb table.tabela td:empty{display:none}
}
@media (max-width:900px){
  .res-grade{grid-template-columns:minmax(0,1fr)}
  .rb-t,.rb-m,.rb-c{grid-column:1/-1}
  .res-topo .espaco{display:none}
  .res-datas input,.rb-filtro input{width:100%}
  .res-datas .campo,.rb-filtro .campo{flex:1 1 120px}
  .seg a{padding:0 var(--e3)}
}