/* Mobile primeiro: o corretor usa isso no celular, entre um atendimento e outro. */
:root{
  --navy:#002040; --navy2:#1F4363; --terroso:#A67459;
  --fundo:#EEF1F3; --card:#FFFFFF; --linha:#DCE3E8; --texto:#16222B; --suave:#63737F;
  --barra:78px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- topo */
.topo{
  position:sticky; top:0; z-index:15; background:var(--navy); color:#fff;
  padding:10px 16px calc(10px + env(safe-area-inset-top)); padding-top:calc(10px + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.marca{display:flex; flex-direction:column; line-height:1.15}
.logo{font-weight:800; font-size:15px; letter-spacing:.16em}
.sub{font-size:9.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; opacity:.6}
.status{font-size:11px; font-weight:600; opacity:.75; text-align:right; max-width:52%}
.status.erro{opacity:1; color:#FFC9C0}

/* ---------------------------------------------------------------- busca */
.busca{padding:10px 14px 2px; display:flex; flex-direction:column; gap:7px}
.linha{display:flex; gap:8px}
.linha input{flex:1}
input{
  width:100%; padding:13px 14px; font:600 16px Montserrat,sans-serif; color:var(--texto);
  border:1px solid var(--linha); border-radius:11px; background:#fff; -webkit-appearance:none;
}
input:focus{outline:2px solid var(--navy2); outline-offset:1px; border-color:transparent}
input::placeholder{color:#9AA7B1; font-weight:500}

button{font-family:inherit; cursor:pointer; font-weight:700}
.primario{
  padding:13px 18px; border:none; border-radius:11px; background:var(--navy); color:#fff;
  font-size:15px; white-space:nowrap;
}
.primario:active{background:var(--navy2)}

.recado{
  margin:0; padding:13px 15px; border-radius:11px; background:#FFF4E5;
  border:1px solid #F3D9AE; color:#6B4A12; font-size:13.5px; font-weight:500; line-height:1.5;
}
.recado strong{display:block; margin-bottom:3px; font-weight:700}

.resultados{display:flex; flex-direction:column; gap:6px}
.resultados button{
  text-align:left; padding:11px 13px; border:1px solid var(--linha); border-radius:10px;
  background:#fff; font-size:14px; color:var(--texto); font-weight:600;
}
.resultados small{display:block; font-weight:500; color:var(--suave); margin-top:3px; font-size:12.5px}

/* ---------------------------------------------------------------- arte */
.palco{padding:10px 14px 2px; display:flex; flex-direction:column; align-items:center}
.vazio{color:var(--suave); font-size:14.5px; font-weight:600; text-align:center; padding:34px 20px; margin:0}
.moldura{display:none; margin:0; width:100%}
.moldura.visivel{display:block}
.tela{position:relative; width:fit-content; max-width:100%; margin:0 auto}
.tela img{
  display:block; width:auto; max-width:100%;
  max-height:50vh; max-height:50dvh;
  border-radius:12px; box-shadow:0 8px 26px rgba(0,24,48,.18); background:#fff;
}
/* o canvas fica por cima da <img>, do mesmo tamanho, e só aparece enquanto
   o dedo está arrastando — aí o desenho responde na hora, sem gerar arquivo */
.tela canvas{
  position:absolute; left:0; top:0; width:100%; height:100%;
  border-radius:12px;
}
.zonas{position:absolute; inset:0}
.zonas .zona{position:absolute; cursor:pointer; border-radius:4px; touch-action:pan-y}
/* na foto de cima o corte é em cima/embaixo, então o arrasto é vertical e
   precisa tomar o gesto do navegador */
.zonas .zona.vertical{touch-action:none}
.zonas .zona:active{box-shadow:inset 0 0 0 4px rgba(255,255,255,.95), inset 0 0 0 8px var(--navy)}
/* enquanto arrasta, sai o realce de toque — atrapalha ver o enquadramento */
.zonas .zona.movendo{cursor:grabbing; box-shadow:none}

/* só aparece na foto que saiu do centro */
.recentrar{
  position:absolute; top:6px; right:6px; width:30px; height:30px; padding:0;
  border:none; border-radius:50%; background:rgba(6,22,38,.55); color:#fff;
  font-size:15px; line-height:30px; text-align:center;
  backdrop-filter:blur(3px); box-shadow:0 1px 4px rgba(0,16,32,.3);
}
.recentrar:active{background:rgba(6,22,38,.9)}
.toque{
  text-align:center; font-size:12px; font-weight:600; color:var(--suave);
  padding:7px 0 0;
}


/* -------------------------------------------------- faixa de estilo da arte */
/* Fica sempre à vista, logo abaixo da arte: o corretor troca fonte e cor
   sem abrir nada. */
/* Uma linha só quando cabe; em tela estreita quebra em duas, nunca corta
   um controle pela metade. */
.estilo{
  width:100%; margin:8px auto 0; display:flex; align-items:center;
  flex-wrap:wrap; gap:7px 9px;
  padding:7px 9px; background:#fff; border:1px solid var(--linha); border-radius:12px;
}
.fontes{display:flex; gap:5px; flex:none}
.pil{
  padding:8px 11px; border:1px solid var(--linha); background:#fff; border-radius:9px;
  font-size:12.5px; font-weight:700; color:var(--suave); white-space:nowrap; line-height:1.1;
}
.pil.ativa{background:var(--navy); border-color:var(--navy); color:#fff}
.pil[data-fonte="forte"]{font-family:Anton,Montserrat,sans-serif; font-weight:400; letter-spacing:.03em; font-size:14px}
.pil[data-fonte="moderna"]{font-family:Poppins,Montserrat,sans-serif}

.cores{display:flex; gap:8px; flex:none; margin-left:auto; align-items:center}
.cor{
  width:29px; height:29px; padding:0; border-radius:50%; flex:none;
  background:var(--c); border:1px solid rgba(0,24,48,.22);
}
.cor.ativa{box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--navy2)}
@media (min-width:420px){
  .cores{padding-left:11px; border-left:1px solid var(--linha)}
}

/* ---------------------------------------------------------------- editor */
.editor{padding:6px 14px 16px; display:flex; flex-direction:column; gap:9px}
.grupo{background:#fff; border:1px solid var(--linha); border-radius:12px; overflow:hidden}
.grupo summary{
  padding:14px 16px; font-size:14.5px; font-weight:700; color:var(--navy);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.grupo summary::-webkit-details-marker{display:none}
.grupo summary::after{content:"＋"; font-size:17px; color:var(--suave); font-weight:600}
.grupo[open] summary::after{content:"−"}
.corpo{padding:0 16px 16px; display:flex; flex-direction:column; gap:7px}
.rot{font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--suave); margin-top:6px}
.nota{font-size:12px; color:var(--suave); margin:8px 0 0; line-height:1.5}

/* sugestões rolam na horizontal em vez de empilhar 4 linhas */
.sugestoes{
  display:flex; gap:7px; overflow-x:auto; padding:3px 14px 3px 0; margin:2px -14px 2px 0;
  scrollbar-width:none;
}
.sugestoes::-webkit-scrollbar{display:none}
.sugestoes button{
  flex:none; padding:8px 13px; border:1px solid var(--linha); background:#fff;
  border-radius:20px; font-size:13px; font-weight:600; color:var(--navy2); white-space:nowrap;
}
.sugestoes button:active{background:#E7EEF2}

/* ---------------------------------------------------------------- barra */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:16;
  background:rgba(255,255,255,.97); border-top:1px solid var(--linha);
  backdrop-filter:blur(10px);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px; align-items:center;
}
.abas{display:flex; gap:5px; background:#EDF1F4; padding:4px; border-radius:11px; flex:none}
.aba{
  padding:9px 15px; border:none; background:transparent; border-radius:8px;
  font-size:13.5px; color:var(--suave);
}
.aba.ativa{background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(0,24,48,.14)}
.salvar{flex:1; padding:15px; font-size:15.5px}

/* ---------------------------------------------------------------- galeria */
.modal{
  position:fixed; inset:0; z-index:30; background:var(--fundo);
  display:flex; flex-direction:column;
}
.modal-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
  background:var(--navy); color:#fff; font-size:15px;
}
.fechar{border:none; background:rgba(255,255,255,.16); color:#fff; padding:9px 15px; border-radius:9px; font-size:13.5px}
.galeria{
  flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px; padding:12px 12px calc(12px + env(safe-area-inset-bottom));
}
.galeria img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:9px;
  border:3px solid transparent; background:#DCE3E8;
}
.galeria img.usada{border-color:var(--terroso)}

/* ---------------------------------------------------------------- desktop */
@media (min-width:900px){
  body{
    padding:0; display:grid; min-height:100vh;
    grid-template-columns:380px 1fr;
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"topo palco" "busca palco" "editor palco" "barra palco";
    align-content:start;
  }
  .topo{grid-area:topo; position:static; padding:18px 20px}
  .logo{font-size:17px}
  .status{font-size:12px}
  .busca{grid-area:busca; padding:16px 20px 6px}
  .editor{grid-area:editor; padding:8px 20px 16px; align-content:start}
  .barra{grid-area:barra; position:static; padding:14px 20px 20px; border-top:1px solid var(--linha)}
  .palco{
    grid-area:palco; background:#E4E9ED; padding:26px; justify-content:center;
    align-self:stretch; overflow-y:auto;
  }
  .tela img{max-height:calc(100vh - 152px); max-height:calc(100dvh - 152px)}
  .estilo{width:fit-content; max-width:100%; margin-top:12px}
  .modal{padding:26px; background:rgba(4,18,30,.62); align-items:center; justify-content:center}
  .modal-topo{border-radius:14px 14px 0 0; width:min(940px,100%); padding:16px 20px}
  .galeria{
    flex:none; width:min(940px,100%); max-height:70vh; background:#fff;
    border-radius:0 0 14px 14px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); padding:16px;
  }
}