:root{
  --tinta:#0B1533; --tinta2:#0B1533; --papel:#FFFFFF; --creme:#EEF2FD; --branco:#fff;
  --laranja:#FF8A1F; --laranja2:#FF8A1F; --linha:rgba(11,21,51,.14); --suave:rgba(11,21,51,.64);
  --ok:#2E7D4F; --erro:#B03D1F; --aviso:#8A5F00;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14px;background:var(--papel);color:var(--tinta);display:flex;flex-direction:column}
h1,h2,h3,.marca{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;letter-spacing:-.015em}
button{font-family:inherit;font-size:14px;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--tinta);background:var(--branco);border:1px solid var(--linha);border-radius:9px;padding:7px 9px;min-width:0;width:100%}
textarea{resize:vertical;line-height:1.45}
input[type=color]{padding:2px;height:36px;width:56px;flex:0 0 auto}
input[type=checkbox]{width:auto}
:focus-visible{outline:2px solid var(--laranja2);outline-offset:1px}
.vis-esc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.topo{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--tinta);color:var(--papel);flex-wrap:wrap;position:relative}
.marca{font-weight:800;font-size:18px;white-space:nowrap;margin-right:6px}
.marca i{font-style:normal;color:inherit}
.marca i::after{content:".";color:var(--laranja)}
.projeto select{background:var(--tinta2);color:var(--papel);border-color:rgba(255,255,255,.25);max-width:240px}
.sep{flex:1}
.estado{font-size:14px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:40ch;flex:1 1 0}
.estado:empty{display:none}
.b{border:none;border-radius:999px;padding:8px 14px;font-weight:700;white-space:nowrap}
.b-cheio{background:var(--laranja);color:#0B1533}
@media (hover:hover) and (pointer:fine){.b-cheio:hover{background:#8F3018}}.b-cheio:active{background:#8F3018}
.b-linha{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--papel)}
.menu{position:absolute;top:100%;left:250px;z-index:20;background:#fff;color:var(--tinta);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:6px;display:flex;flex-direction:column;min-width:240px}
.menu[hidden]{display:none}
.menu button{background:none;border:none;text-align:left;padding:9px 12px;border-radius:8px}
@media (hover:hover) and (pointer:fine){.menu button:hover{background:var(--creme)}}.menu button:active{background:var(--creme)}
.menu .perigo{color:var(--erro)}

.abas{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--linha);overflow-x:auto}
.aba{background:none;border:none;padding:9px 12px;font-weight:700;color:var(--suave);border-bottom:3px solid transparent}
.aba.ativa{color:var(--tinta);border-bottom-color:var(--laranja2)}
.painel{flex:1;overflow:auto;padding:14px 16px 60px}

.grupo{border:1px solid var(--linha);border-radius:14px;padding:12px 14px;margin:0 0 14px;background:var(--papel)}
.grupo>h3{margin:0 0 10px;font-size:17px}
.grupo>p.nota,.nota{margin:-4px 0 10px;color:var(--suave);font-size:14px;line-height:1.45}
.campo{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.campo>span{font-size:14px;font-weight:700;color:var(--suave)}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.linha3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cor{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cor label{flex:1;font-weight:600}
.mini{background:#fff;border:1px solid var(--linha);border-radius:999px;padding:6px 12px;font-weight:600;font-size:14px}
.mini.perigo{color:var(--erro)}
.acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

.horario{display:grid;grid-template-columns:70px 1fr 1fr auto;gap:6px;align-items:center;margin-bottom:6px}
.horario b{font-size:14px}
.horario label{font-size:14px;display:flex;gap:4px;align-items:center;white-space:nowrap}

.cat{border:1px solid var(--linha);border-radius:14px;margin-bottom:14px;background:#fff;overflow:hidden}
.cat-topo{display:flex;gap:6px;align-items:center;padding:10px;background:var(--creme)}
.cat-topo input{font-weight:700}
.item{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:10px;border-top:1px solid var(--linha)}
.foto{width:64px;height:64px;border-radius:10px;border:1px dashed var(--linha);background:var(--papel) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1.2;color:var(--suave);text-align:center;padding:2px}
.foto.tem{border-style:solid;color:transparent}
.item-campos{display:flex;flex-direction:column;gap:6px;min-width:0}
.item-linha{display:grid;grid-template-columns:1fr 92px;gap:6px}
.item-rodape{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.item-rodape select{width:auto}
.item-rodape label{font-size:14px;display:flex;gap:4px;align-items:center}
.estrela{background:none;border:1px solid var(--linha);border-radius:999px;padding:4px 10px;font-size:14px}
.estrela.on{background:#F4E4B0;border-color:#C9A227}
.add{width:100%;background:none;border:none;border-top:1px dashed var(--linha);padding:10px;font-weight:700;color:var(--laranja)}

.seg{display:inline-flex;background:#fff;border-radius:999px;padding:3px;border:1px solid var(--linha)}
.seg button{border:none;background:none;border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px}
.seg button.on{background:var(--tinta);color:var(--papel)}

dialog{border:none;border-radius:16px;padding:0;max-width:min(640px,94vw);width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(11,21,51,.45)}
.dlg{padding:18px 20px}
.dlg h2{margin:0 0 10px;font-size:19px}
.dlg textarea{min-height:240px;font:13.5px/1.45 ui-monospace,Menlo,monospace}
.dlg-botoes{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.dlg-botoes .b-linha{color:var(--tinta);border-color:var(--linha)}
.link-pronto{display:flex;gap:6px;margin:8px 0}
.link-pronto input{font-weight:600}


/* ---------- disposição: Editar, Lado a lado ou Prévia (botões do topo) ---------- */
html,body{height:100%;overflow:hidden}
.corpo{flex:1;display:grid;grid-template-columns:minmax(380px,520px) minmax(0,1fr);min-height:0}
.editor{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--linha);background:#fff}
.previa{display:flex;flex-direction:column;min-height:0;min-width:0;background:#EFF1F4}
body.modo-edicao .corpo{grid-template-columns:minmax(0,1fr)}
body.modo-edicao .previa{display:none}
body.modo-edicao .painel{max-width:760px;width:100%;margin:0 auto}
body.modo-previa .corpo{grid-template-columns:minmax(0,1fr)}
body.modo-previa .editor{display:none}
.seg-escuro{background:var(--tinta2);border-color:rgba(255,255,255,.25)}
.seg-escuro button{color:var(--papel)}
.seg-escuro button.on{background:var(--papel);color:var(--tinta)}

/* ---------- prévia: o site é desenhado no tamanho real do aparelho e reduzido para caber ---------- */
.previa-barra{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}
.moldura{flex:1;min-height:0;min-width:0;position:relative;overflow:hidden}
.moldura iframe{position:absolute;left:50%;top:8px;border:none;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18);transform-origin:50% 0}
.moldura.fone iframe{border-radius:34px}
.moldura.tablet iframe{border-radius:22px}
.moldura.tela iframe{border-radius:10px}
.moldura.livre iframe{left:0;top:0;width:100%;height:100%;transform:none!important;border-radius:0;box-shadow:none}
.medida{font-size:13px;color:var(--suave);white-space:nowrap}
.avisos-bt{border:1px solid #E2C46A;background:#FFF6D6;color:#6B4E00;border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px}
.avisos-bt.erro{border-color:#E7A08F;background:#FDE9E4;color:var(--erro)}
.relato{margin:0 12px 8px;background:#fff;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.5;border-left:4px solid var(--aviso);max-height:30vh;overflow:auto}
.relato.erro{border-left-color:var(--erro);white-space:pre-wrap;font:13px/1.5 ui-monospace,Menlo,monospace}
.relato ul{margin:0;padding-left:18px}
.marcas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.marcas .foto{width:100%;height:84px;background-size:contain;background-origin:content-box;padding:8px}

/* ---------- tela estreita (celular, janela pequena): uma coisa de cada vez ---------- */
@media (max-width:900px){
  .so-largo{display:none}
  .topo{gap:6px;padding:8px 10px}
  .marca{font-size:16px}
  .projeto select{max-width:150px}
  .estado{order:10;width:100%;flex:1 1 100%;max-width:none;white-space:normal}
  .corpo{grid-template-columns:minmax(0,1fr)!important}
  body:not(.modo-previa) .previa{display:none}
  body.modo-previa .editor{display:none}
  .editor{border-right:none}
  .painel{padding:12px 12px 80px}
  .menu{left:10px;right:10px;min-width:0}
  .horario{grid-template-columns:62px 1fr 1fr;row-gap:2px}
  .horario label{grid-column:2/4}
}
@media (max-width:600px){
  .previa-barra .seg{display:none}
  .previa-barra{padding:6px 10px}
  .marca{font-size:15px;margin-right:0}
  .b{padding:7px 12px}
  .seg-escuro button{padding:6px 10px}
}
.passos-ia{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:14px}
.passos-ia li{line-height:1.45}
.passos-ia textarea{margin-top:6px;min-height:0;font-family:inherit;font-size:14px;line-height:1.45}
.faq{border-bottom:1px solid var(--linha);padding:8px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:6px 0 2px;color:var(--suave);line-height:1.5}
.dlg .b-linha{color:var(--tinta);border-color:var(--linha)}
.passos-ia .acoes{align-items:center}
.falta{border:1px solid #E2C46A;background:#FFF8E1;border-radius:14px;padding:10px 14px;margin:0 0 14px;font-size:14px}
.falta.ok{border-color:#9CC9AE;background:#EEF7F1}
.falta ul{margin:6px 0 0;padding-left:18px}
.falta .link{background:none;border:none;padding:2px 0;color:var(--laranja);font-weight:700;text-decoration:underline;cursor:pointer;text-align:left}
.ajustes-ia{margin-top:8px;border-left:4px solid #E2C46A;background:#FFF8E1;border-radius:8px;padding:8px 12px;font-size:14px}
.ajustes-ia ul{margin:4px 0 0;padding-left:18px}
.progresso{margin:0 0 12px}
.progresso .barra{height:10px;border-radius:99px;background:var(--creme);overflow:hidden;margin-bottom:6px}
.progresso .barra span{display:block;height:100%;background:var(--ok)}
.duvidas{border:1px solid #E7A08F;background:#FDF0EC;border-radius:14px;padding:10px 14px;margin:0 0 12px;font-size:14px}
.duvidas ul{margin:6px 0 0;padding-left:18px}
.ck{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;padding:6px 0;border-top:1px solid var(--linha)}
.ck:first-of-type{border-top:none}
.ck-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--creme);color:var(--suave)}
.ck-ok .ck-ico{background:#DDEFE4;color:#22633D}
.ck-falta .ck-ico{background:#FCE3DC;color:var(--erro)}
.ck .link{color:var(--tinta);text-decoration:none;font-weight:600}
.ck-falta .link{color:var(--erro);text-decoration:underline}
.ck-ok .link{color:var(--suave)}
.dia{display:grid;grid-template-columns:72px 120px 1fr;gap:8px;align-items:start;margin-bottom:8px}
.dia b{padding-top:8px;font-size:14px}
.dia select{width:auto}
.faixas{display:flex;flex-direction:column;gap:6px}
.faixa{display:flex;gap:6px;align-items:center}
.faixa span{font-size:14px;color:var(--suave)}
.sub-grupo{border:1px dashed var(--linha);border-radius:12px;padding:10px;margin:0 0 10px;background:#fff}
.sem-foto{font-size:13px;font-weight:700;color:var(--erro);background:#FCE3DC;border-radius:99px;padding:3px 8px}
@media (max-width:600px){.dia{grid-template-columns:1fr 1fr}.dia .faixas{grid-column:1/3}.linha3{grid-template-columns:1fr 1fr}}
.link{background:none;border:none;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.ck .link{font-weight:600}
.faixa input{flex:1;min-width:0;width:auto}
.dia{grid-template-columns:64px 104px minmax(0,1fr)}
.tex-modelos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px}
.tex-modelo{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--linha);background:#fff;border-radius:12px;padding:8px;font-size:14px;font-weight:600}
@media (hover:hover) and (pointer:fine){.tex-modelo:hover{border-color:var(--laranja2)}}.tex-modelo:active{border-color:var(--laranja2)}
.tex-amostra{display:block;width:100%;height:54px;border-radius:8px;background-color:var(--laranja);-webkit-mask-size:60px auto;mask-size:60px auto;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.tex-caixa{border:1px solid var(--linha);border-radius:12px;background:var(--papel);overflow:hidden}
.tex-atual{height:90px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.tex-trocar{margin:0 0 12px}
.tex-trocar summary{cursor:pointer;font-weight:700;font-size:14px;margin-bottom:8px}

/* ---------- revisão de telas 18/10/2026 ---------- */
/* botão de contorno dentro do editor: a cor papel do topo escuro sumia no fundo claro */
.painel .b-linha{color:var(--tinta);border-color:var(--linha);background:#fff}
input[type=checkbox],input[type=range]{accent-color:var(--tinta)}
.marcas+.nota{margin-top:10px}
/* horários no celular: a regra .dia acima (64px 104px 1fr) vencia a do @media e espremia os campos de hora */
@media (max-width:600px){
  .dia{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dia .faixas{grid-column:1/3}
  .faixa input{flex:1 1 0}
}
.faixas>.mini{align-self:flex-start}
.faixa{max-width:360px}
/* toque (celular e tablet): alvos de 44px */
@media (pointer:coarse),(max-width:900px){
  .b,.mini,.estrela,.seg button,.aba,.avisos-bt,.add{min-height:44px}
  .seg-escuro button,.previa-barra .seg button{padding:6px 14px}
  input:not([type=checkbox]):not([type=range]):not([type=color]),select{min-height:44px}
  input[type=color]{height:44px}
  .estrela,.mini,.aba{min-width:46px}
  .acoes>label,.item-rodape>label,.campo .acoes label{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding-right:8px}
  input[type=checkbox]{width:20px;height:20px}
  .ck .link,.falta .link{min-height:44px;min-width:44px;padding:10px 0;display:inline-flex;align-items:center}
  .ck{padding:2px 0}
  .ck-ico{margin-top:11px}
  .menu button{min-height:44px}
  .faq summary{padding:10px 0}
  .ck .link+.nota{margin-top:-8px!important;padding-bottom:6px}
  .tex-modelo{min-height:44px}
}
/* abas no celular: as seis cabem em 390px */
@media (max-width:600px){
  .abas{padding:6px 4px 0;gap:0}
  .aba{padding:9px 6px}
  .b{padding:7px 11px}
}
/* topo em tela estreita: duas linhas arrumadas (marca, projeto, Novo e ajuda; depois as ações), sem o ? sozinho numa linha */
@media (max-width:900px){
  .topo{row-gap:6px}
  .projeto{flex:1 1 calc(100% - 270px);min-width:0}
  .topo>.sep{display:none}
  .topo{padding:8px}
  .seg-escuro button{padding:6px 10px}
  #btLink{margin-left:auto}
  .projeto select{max-width:none}
  #btAjuda{order:1;width:44px;padding:0}
  #btIA{order:2}
  #btMais{order:3}
  .seg-escuro{order:5}
  #btLink{order:6}
  .menu{order:7}
}
/* janela longa (Usar IA, Ajuda) no celular: Fechar e os outros botões ficam sempre à vista */
.dlg{padding-bottom:0}
.dlg-botoes{position:sticky;bottom:0;background:#fff;padding:10px 0 max(18px,env(safe-area-inset-bottom));margin-top:2px;flex-wrap:wrap}

/* ---------- direção de arte, rodada 2 (19/10/2026) ---------- */
/* escala de espaço: 4 8 12 16 24 32 */
.ico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;vertical-align:-4px}
.b,.mini,.estrela{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#btMais .ico{width:16px;height:16px;margin-right:-4px}
.ico-txt{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--tinta);white-space:nowrap}
.ico-txt .ico{width:16px;height:16px}
.b-suave{background:var(--creme);color:var(--tinta);border:1px solid transparent}
@media (hover:hover) and (pointer:fine){.b-suave:hover{background:#E6E9EE}}.b-suave:active{background:#E6E9EE}

/* lado a lado: o formulário ganha largura de leitura e a prévia fica com o resto */
.corpo{grid-template-columns:clamp(420px,46vw,680px) minmax(0,1fr)}
.painel{padding:16px 24px 64px;container-type:inline-size}
.grupo{padding:16px;margin:0 0 16px;border-radius:14px}
.grupo>h3{margin:0 0 12px;font-size:17px;line-height:1.25}
.grupo>p.nota{margin:-6px 0 12px}
.campo{gap:6px;margin-bottom:12px}
.campo:last-child{margin-bottom:0}
.linha2,.linha3{gap:12px}
.nota{max-width:68ch}
.nota-topo{margin:0 0 16px}
.rotulo{display:block;font-size:14px;font-weight:700;color:var(--suave);margin:4px 0 6px}

/* Editar (só o formulário): abas alinhadas ao conteúdo; o Checklist usa duas colunas no computador */
body.modo-edicao .abas{justify-content:center}
body.modo-edicao .painel{max-width:808px}
body.modo-edicao .painel[data-aba=checklist]{max-width:1088px}
@container (min-width:700px){
  .ck-grupos{columns:2;column-gap:16px}
  .ck-grupos .grupo{break-inside:avoid;display:inline-block;width:100%}
  .resumo{grid-template-columns:minmax(0,1fr) auto}
}

/* Checklist: resumo no topo, um bloco só com progresso e a ação principal */
.resumo{display:grid;gap:16px;align-items:center;background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:16px;margin:0 0 16px}
.progresso{margin:0}
.resumo-tit{margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px}
.resumo-tit span{font-size:14px;color:var(--erro);font-weight:700}
.progresso .barra{margin:0}
.resumo-acao{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.resumo-acao .nota{margin:0;max-width:34ch}
@container (min-width:700px){.resumo-acao{align-items:flex-end;text-align:right}}
.ck{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:8px 0}
.ck-ico{width:24px;height:24px;margin-top:0}
.ck-ico .ico{width:14px;height:14px;stroke-width:2.6}
.ck-opcional .ck-ico .ico{width:12px;height:12px;stroke-width:2}
.ck .link{line-height:1.4;padding:2px 0}
.duvidas{padding:12px 16px;margin:0 0 16px}

/* Cardápio: categoria como bloco, ações por ícone, adicionar como ação secundária */
.cat{margin-bottom:16px}
.cat-topo{padding:12px;gap:8px}
.cat-topo input{flex:1 1 auto;width:auto;min-width:0}
.cat-topo .mini{flex:0 0 auto}
.item{padding:12px;gap:12px}
.item-campos{gap:8px}
.item-linha{gap:8px}
.item-rodape{gap:8px}
.estrela{min-width:36px;height:36px;padding:0 9px;background:#fff}
.estrela.on{color:#7A5A00}
.estrela.on .ico{fill:currentColor}
.mini .ico{width:16px;height:16px}
.add{display:block;text-align:center;color:var(--laranja)}
.add-solta{width:100%;border:1.5px dashed rgba(176,61,31,.45);border-radius:14px;background:transparent;padding:12px;font-weight:700;margin:0 0 4px}
@media (hover:hover) and (pointer:fine){.add-solta:hover,.add:hover{background:#FBEDE7}}.add-solta:active,.add:active{background:#FBEDE7}

/* Blocos: diferenciais com o número curto e o texto longo */
.dif{display:grid;grid-template-columns:minmax(104px,.7fr) minmax(0,1fr) minmax(0,1.6fr);gap:8px;margin-bottom:8px}
@media (min-width:601px){.abas{padding:8px 12px 0}}

/* Horários: o "+ 2º turno" fica na mesma linha do turno quando cabe */
.faixas{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.faixa{flex:1 1 260px}
.faixas>.mini{align-self:center}
.dia{margin-bottom:12px}
.faixa .mini .ico{width:16px;height:16px}

/* Menu Mais em grupos (projeto, links, IA e arquivos, backup, apagar), separados por espaço */
.menu{padding:8px}
.menu .menu-grupo{margin-top:8px;position:relative}

/* Janelas: título, corpo e botões com o mesmo ritmo; Fechar sempre de contorno */
.dlg{padding:24px 24px 0}
.dlg h2{margin:0 0 12px;font-size:20px;line-height:1.2}
.dlg-botoes{gap:8px;padding:16px 0 24px;margin-top:8px}
.dlg-botoes .b-suave{margin-right:auto}
.link-pronto{gap:8px;margin:12px 0}
.link-pronto input{min-height:44px}
.passos-ia{gap:24px;padding-left:22px}
.passos-ia li::marker{font-weight:800}
.passos-ia li>b:first-child{font-size:15px}
.passos-ia textarea{margin:8px 0 0}
.passos-ia .acoes{margin-top:8px}
.faq{padding:0;border-bottom:1px solid var(--linha)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);transform:rotate(45deg) translateY(-3px);flex:0 0 auto;transition:transform .15s}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.faq p{margin:0 0 12px;max-width:62ch}

/* topo: mensagem de estado em no máximo duas linhas no celular e no tablet */
@media (max-width:900px){
  .estado{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
  .estado:empty{display:none}
  .painel{padding:16px 16px 80px}
}
/* celular: o prato usa a largura toda abaixo da foto; diferenciais em duas linhas */
@media (max-width:600px){
  .painel{padding:12px 12px 80px}
  .grupo{padding:14px 12px}
  .item{grid-template-columns:64px minmax(0,1fr);align-items:start}
  .item-campos{display:contents}
  .item-campos>*{grid-column:1/-1}
  .item-campos>:first-child{grid-column:2;align-self:center}
  .item-campos>.item-linha:first-child{grid-template-columns:minmax(0,1fr) 84px}
  .dif{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);margin-bottom:16px}
  .dif input:last-child{grid-column:1/-1}
  .resumo-acao .nota{max-width:none}
  .dlg{padding:20px 16px 0}
}
@media (pointer:coarse),(max-width:900px){
  .estrela{min-width:44px;height:44px}
}
.item-icones{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
@media (pointer:coarse),(max-width:900px){
  .ck-ico{margin-top:10px}
}
/* Visual > Marca: a logo clara aparece sobre fundo escuro, como vai ser usada */
.marcas [data-foto=logoClaro].tem{background-color:var(--tinta);border-color:var(--tinta)}
.grupo>.marcas+p.nota{margin:12px 0 0}

/* 28/10/2026 (Mateus): base branca, cobalto e laranja só de detalhe; modo noturno opcional (botão ☾ no topo) */
.topo{background:var(--papel);color:var(--tinta);border-bottom:1px solid var(--linha)}
.topo .b-linha,.b-linha{color:var(--tinta);border-color:var(--linha)}
@media (hover:hover) and (pointer:fine){.topo .b-linha:hover,.b-linha:hover{border-color:#1F4FE0;color:#1F4FE0}}.topo .b-linha:active,.b-linha:active{border-color:#1F4FE0;color:#1F4FE0}
.topo select,select.cliente,.projeto select{background:var(--branco,#fff);color:var(--tinta);border:1px solid var(--linha)}
.desc-mud{color:var(--suave)}
.marca small{color:var(--suave)}
.portao{background:var(--creme)}
.portao form{box-shadow:0 20px 50px -24px rgba(11,21,51,.35);border:1px solid var(--linha)}
:root[data-tema="escuro"]{color-scheme:dark;--tinta:#EEF2FD;--tinta2:#EEF2FD;--papel:#0F1A38;--branco:#16224A;--creme:#16224A;--linha:rgba(238,242,253,.2);--suave:rgba(238,242,253,.7)}
:root[data-tema="escuro"] input,:root[data-tema="escuro"] select,:root[data-tema="escuro"] textarea,:root[data-tema="escuro"] .menu,:root[data-tema="escuro"] .portao form,:root[data-tema="escuro"] .painel .b-linha{background:#16224A;color:#EEF2FD}
:root[data-tema="escuro"] .b-cheio{color:#0B1533}
#btTema{min-width:44px;padding-left:0;padding-right:0}
:root[data-tema="escuro"] .seg{background:#16224A}
:root[data-tema="escuro"] .aba{color:#C3CBE6}
:root[data-tema="escuro"] .aba.ativa{color:#fff}
:root[data-tema="escuro"] dialog{background:#0F1A38;color:#EEF2FD}

/* Toque no celular (31/10/2026): sem flash cinza, toque sem atraso, segurar botão não seleciona texto */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,select,[role=button],input[type=checkbox],input[type=radio]{touch-action:manipulation}
button,summary,[role=button]{-webkit-user-select:none;user-select:none}
@media (pointer:coarse),(max-width:760px){input,select,textarea,.passos-ia textarea{font-size:16px}}

/* Modo noturno completo (02/11/2026): fundos fixos em #fff e #EFF1F4 ficavam claros com texto claro por cima.
   Tudo o que tinha cor fixa ganha par escuro aqui; a prévia do site em si continua como o cliente vai ver. */
:root[data-tema="escuro"]{--ok:#6FD08F;--erro:#FF9A80;--aviso:#F2C14E;--tinta:#EEF2FD;--suave:rgba(238,242,253,.78)}
:root[data-tema="escuro"] body{background:#0B1330;color:#EEF2FD}
:root[data-tema="escuro"] .editor{background:#0F1A38;border-right-color:rgba(238,242,253,.16)}
:root[data-tema="escuro"] .previa{background:#0A1230}
:root[data-tema="escuro"] .abas{background:#0F1A38}
:root[data-tema="escuro"] .aba{color:#C3CBE6}
:root[data-tema="escuro"] .aba:hover{color:#fff}
:root[data-tema="escuro"] .aba.ativa{color:#fff}
:root[data-tema="escuro"] .grupo,:root[data-tema="escuro"] .cat{background:#16224A;border-color:rgba(238,242,253,.2);color:#EEF2FD}
:root[data-tema="escuro"] .cat-topo{background:#1C2A5A}
:root[data-tema="escuro"] .mini,:root[data-tema="escuro"] .estrela,:root[data-tema="escuro"] .add,:root[data-tema="escuro"] .painel .b-linha,:root[data-tema="escuro"] .dlg .b-linha,:root[data-tema="escuro"] .dlg-botoes .b-linha{background:#1C2A5A;color:#EEF2FD;border-color:rgba(238,242,253,.3)}
:root[data-tema="escuro"] .mini.perigo{color:#FF9A80}
:root[data-tema="escuro"] .estrela.on{background:#F2C14E;color:#2B1D00;border-color:#F2C14E}
:root[data-tema="escuro"] .seg-escuro{background:#16224A;border-color:rgba(238,242,253,.3)}
:root[data-tema="escuro"] .seg-escuro button{color:#EEF2FD}
:root[data-tema="escuro"] .seg-escuro button.on{background:#EEF2FD;color:#0B1533}
:root[data-tema="escuro"] .previa-barra .seg{background:#16224A;border-color:rgba(238,242,253,.3)}
:root[data-tema="escuro"] .previa-barra .seg button{color:#EEF2FD}
:root[data-tema="escuro"] .previa-barra .seg button.on{background:#EEF2FD;color:#0B1533}
:root[data-tema="escuro"] .previa-barra .b-linha,:root[data-tema="escuro"] .previa-barra a,:root[data-tema="escuro"] #btAbrirAba{background:#16224A;color:#EEF2FD;border:1px solid rgba(238,242,253,.3)}
:root[data-tema="escuro"] .topo .b-linha{color:#EEF2FD;border-color:rgba(238,242,253,.35);background:transparent}
:root[data-tema="escuro"] .topo select{background:#16224A;color:#EEF2FD;border-color:rgba(238,242,253,.3)}
:root[data-tema="escuro"] .relato{background:#16224A;color:#EEF2FD}
:root[data-tema="escuro"] .relato.erro{color:#FFB4A0}
:root[data-tema="escuro"] .nota,:root[data-tema="escuro"] .campo>span,:root[data-tema="escuro"] .desc-mud{color:rgba(238,242,253,.8)}
:root[data-tema="escuro"] .item-rodape label,:root[data-tema="escuro"] .horario label{color:#EEF2FD}
:root[data-tema="escuro"] .menu button{color:#EEF2FD}
:root[data-tema="escuro"] .menu button:hover{background:#1C2A5A}
:root[data-tema="escuro"] .sem-foto{background:#4A2418;color:#FFB4A0}
:root[data-tema="escuro"] a{color:#9DB8FF}
:root[data-tema="escuro"] .falta{background:#3A2E0E;border-color:#8A6D1F;color:#FFE9A8}
:root[data-tema="escuro"] .falta.ok{background:#12301F;border-color:#2F6B47;color:#C9F0D6}
:root[data-tema="escuro"] .tex-modelo{background:#1C2A5A;color:#EEF2FD;border-color:rgba(238,242,253,.3)}