/* ============================================================
   Vila Rica · App Fotos — design system (identidade Vila Rica)
   Azul royal #004AAD · Montserrat (títulos/números) + Poppins (corpo) · claro + escuro.
   Mesma linguagem dos apps de Finanças, Estoque e Metas. O tema troca só os valores
   das CSS variables — os componentes usam tokens, então herdam claro/escuro de graça.
   Regra da marca: sobre azul, texto e logos SEMPRE brancos; a coroa é sempre o arquivo
   oficial (identidade/design-guide.md). Vermelho só como urgência de promo, nunca na marca.
   ============================================================ */

/* ---------- fontes (arquivos locais em /assets/fonts) ---------- */
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Medium.ttf'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-SemiBold.ttf'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Bold.ttf'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-SemiBold.ttf'); font-weight:600; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-Bold.ttf'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-800.woff2') format('woff2'); font-weight:800; font-display:swap; }

/* ---------- tokens ---------- */
:root{
  /* marca */
  --brand:#004AAD; --brand-2:#1274FB; --brand-3:#438AFE; --navy:#002E6C;
  /* superfícies (claro) */
  --bg:#eaf0f9; --surface:#ffffff; --surface-2:#e0e9f6;
  /* texto */
  --ink:#002E6C; --muted:#3c577e; --faint:#8096b8; --line:#cbd9ed;
  /* interação */
  --brand-weak:#deebfb; --brand-ink:#003e91; --ac:#0a52cc;
  /* status */
  --green:#16a34a; --green-weak:#dcf0e3;
  --red:#dc2626;   --red-weak:#fbe2e2;
  --amber:#a8710c; --amber-weak:#f8eccf; --amber-bg:#FFF9E6; --amber-line:#F5D97A;
  --zap:#1ea85c;
  /* forma */
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 3px rgba(0,46,108,.06); --shadow-pop:0 10px 28px rgba(0,46,108,.14);
  /* topbar */
  --topbar:#ffffff; --topbar-ink:#002E6C; --topbar-line:#cbd9ed;
  /* fontes */
  --sans:'Poppins', system-ui, 'Segoe UI', Roboto, sans-serif;
  --head:'Montserrat', system-ui, 'Segoe UI', Roboto, sans-serif;
  /* aliases legados (páginas antigas usam var(--azul) etc.) */
  --azul:var(--brand); --vermelho:var(--red); --amarelo:var(--amber); --verde:var(--green); --cinza:var(--bg);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#040f1f; --surface:#081a33; --surface-2:#0e2545;
  --ink:#e6eefb; --muted:#9bb2d4; --faint:#637ca3; --line:#1b3c66;
  --brand:#3b82f6; --brand-2:#1274fb; --navy:#cdd9ec;
  --brand-weak:#12304f; --brand-ink:#9cc0f5; --ac:#3b82f6;
  --green:#28c76f; --green-weak:rgba(40,199,111,.18);
  --red:#ef5350;   --red-weak:rgba(239,83,80,.20);
  --amber:#f5a623; --amber-weak:rgba(245,166,35,.16); --amber-bg:#241d09; --amber-line:#5b4f2b;
  --shadow:0 1px 3px rgba(0,0,0,.35); --shadow-pop:0 12px 30px rgba(0,0,0,.5);
  --topbar:#071427; --topbar-ink:#e6eefb; --topbar-line:#173257;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--brand); text-decoration:none; }
b,strong{ font-weight:600; }
h1,h2,h3,h4{ font-family:var(--head); }
::selection{ background:rgba(59,130,246,.28); }

/* ---------- topbar (marca Vila Rica) ---------- */
.topbar{
  display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap;
  background:var(--topbar); color:var(--topbar-ink);
  border-bottom:1px solid var(--topbar-line);
  padding:11px 22px; position:sticky; top:0; z-index:20;
  box-shadow:0 1px 0 rgba(0,46,108,.03);
}
.topbar .brand{ display:flex; align-items:center; gap:11px; color:var(--topbar-ink); }

/* hambúrguer — recolhe o menu lateral pra sobrar largura pro trabalho (fica lembrado) */
.menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:36px;
  flex:none; padding:0; background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
  border-radius:var(--radius-sm); cursor:pointer; transition:color .15s, border-color .15s; }
.menu-btn:hover{ color:var(--brand); border-color:var(--brand); }
.menu-btn .bars{ position:relative; display:block; width:17px; height:2px; border-radius:2px;
  background:currentColor; transition:background .15s; }
.menu-btn .bars::before, .menu-btn .bars::after{ content:''; position:absolute; left:0; width:17px;
  height:2px; border-radius:2px; background:currentColor; transition:transform .18s ease; }
.menu-btn .bars::before{ top:-5px; }
.menu-btn .bars::after{ top:5px; }
/* fechado: vira um "≡" apertado, sinal de que tem menu escondido ali */
body.menu-off .menu-btn .bars::before{ transform:translateY(1.5px); }
body.menu-off .menu-btn .bars::after{ transform:translateY(-1.5px); }
/* Coroa oficial (avatar quadrado do brand book: coroa branca sobre azul royal).
   O arquivo já carrega o próprio fundo #004AAD — funciona nos temas claro e escuro. */
.topbar .brand-mark{ width:34px; height:34px; border-radius:9px; flex:none; display:block;
  box-shadow:0 1px 4px rgba(0,46,108,.28); }
.topbar .brand-name{ font-family:var(--head); font-weight:800; font-size:17px; line-height:1.05;
  letter-spacing:-.01em; color:var(--brand); }
html[data-theme="dark"] .topbar .brand-name{ color:var(--topbar-ink); }
.topbar .brand-name small{ display:block; font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-top:1px; }

.topbar .topnav{ display:flex; gap:4px; flex-wrap:wrap; margin-left:8px; }
.topbar .topnav a{ color:var(--muted); font-weight:600; font-size:13px; padding:7px 14px;
  border-radius:999px; transition:background .15s, color .15s; white-space:nowrap; }
.topbar .topnav a:hover{ background:var(--surface-2); color:var(--ink); }
.topbar .topnav a.on{ background:var(--brand); color:#fff; }
html[data-theme="dark"] .topbar .topnav a.on{ color:#fff; }

.topbar-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.topbar .giro-tag{ font-size:11.5px; color:var(--green); font-weight:600; white-space:nowrap; }
.tema-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:34px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
  border-radius:var(--radius-sm); cursor:pointer; font-size:15px; line-height:1;
  transition:color .15s, border-color .15s; }
.tema-btn:hover{ color:var(--brand); border-color:var(--brand); }
.t-claro{ display:none; }
html[data-theme="dark"] .t-escuro{ display:none; }
html[data-theme="dark"] .t-claro{ display:inline; }
.sair-link{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600;
  color:var(--muted); border:1px solid var(--line); background:var(--surface-2);
  padding:7px 13px; border-radius:var(--radius-sm); transition:color .15s, border-color .15s; }
.sair-link:hover{ color:var(--red); border-color:var(--red); }

/* selo da área (Atacado/Varejo) na topbar — clicável, volta pra tela de escolha */
.area-tag{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  color:var(--brand-ink); background:var(--brand-weak); border:1px solid var(--line);
  padding:6px 11px; border-radius:999px; white-space:nowrap; }
.area-tag:hover{ border-color:var(--brand); }
html[data-theme="dark"] .area-tag{ color:var(--brand-3); background:var(--surface-2); }

/* ---------- menu lateral (área VAREJO) ----------
   O Atendimento é o trabalho do dia e fica sozinho no topo; o resto vem agrupado embaixo.
   Em barra horizontal os 7 links pesavam todos igual — aqui a hierarquia fica visível. */
.lateral{ position:fixed; top:58px; left:0; bottom:0; width:224px; overflow-y:auto; z-index:15;
  background:var(--surface); border-right:1px solid var(--line); padding:16px 12px 24px; }
.lateral nav{ display:flex; flex-direction:column; gap:3px; }
.lateral a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; color:var(--muted); line-height:1.2; }
.lateral a .ic{ font-size:15px; width:20px; text-align:center; flex:none; }
.lateral a:hover{ background:var(--surface-2); color:var(--ink); }
.lateral a.on{ background:var(--brand); color:#fff; }
.lateral .lat-grupo{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint); padding:18px 12px 6px; }
.lateral .lat-trocar{ margin-top:auto; padding-top:14px; font-size:12.5px; font-weight:600; color:var(--faint); }
.lateral .lat-trocar:hover{ color:var(--brand); background:none; }
/* Com o menu lateral o conteúdo usa a TELA INTEIRA: o `max-width:1160px` do main é de quando
   a página era centrada e sem menu — junto com o lateral sobrava uma faixa morta à direita
   (numa tela de 1690px o conteúdo parava em 1384 e o resto ficava vazio). */
body.com-lateral main{ margin:26px 0 26px 224px; max-width:none; padding:0 26px 60px;
  transition:margin-left .18s ease; }
/* a barra fixa do catálogo (Atendimento) não pode passar por baixo do menu */
body.com-lateral .catbar{ left:224px; transition:left .18s ease; }

/* menu recolhido (hambúrguer): o lateral sai pela esquerda e o conteúdo toma a tela toda */
.lateral{ transition:transform .18s ease; }
body.menu-off .lateral{ transform:translateX(-100%); }
body.menu-off.com-lateral main{ margin-left:0; }
body.menu-off.com-lateral .catbar{ left:0; }

/* Tela estreita (ou o Varejo aberto dentro do CRM, que é um modal): o lateral vira uma
   fita horizontal rolável no topo. Sem drawer, sem JS — some a chance de travar fechado. */
@media (max-width:1100px){
  .lateral{ position:static; width:auto; height:auto; border-right:0; border-bottom:1px solid var(--line);
    padding:8px 12px; overflow-x:auto; }
  .lateral nav{ flex-direction:row; align-items:center; gap:5px; }
  .lateral a{ white-space:nowrap; padding:8px 13px; }
  .lateral .lat-grupo{ padding:0 4px 0 10px; border-left:1px solid var(--line); align-self:stretch;
    display:flex; align-items:center; white-space:nowrap; }
  .lateral .lat-trocar{ margin:0 0 0 auto; padding:8px 12px; }
  body.com-lateral main{ margin-left:0; }
  body.com-lateral .catbar{ left:0; }
  /* aqui o lateral é uma fita no fluxo: recolher tem que TIRAR do fluxo, senão
     sobraria uma faixa vazia no lugar dele */
  body.menu-off .lateral{ display:none; }
}

/* ---------- container ---------- */
main{ max-width:1160px; margin:26px auto; padding:0 20px 60px; }

/* ---------- cartões / seções ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; margin-bottom:20px; }
h2{ font-size:13px; color:var(--brand-ink); font-weight:700; margin:0 0 16px;
  text-transform:uppercase; letter-spacing:.06em; }
html[data-theme="dark"] h2{ color:var(--brand-3); }
.hint{ font-size:13px; color:var(--muted); margin:-6px 0 16px; line-height:1.55; }
.hint b{ color:var(--ink); }
.aviso{ background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber);
  border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; font-weight:600;
  margin-bottom:16px; line-height:1.55; }
.aviso.err{ background:var(--red-weak); border-color:transparent; color:var(--red); }
.resumo{ font-size:13px; color:var(--muted); font-weight:600; margin:2px 0 14px; }

/* ---------- botões ---------- */
button, a.btn{ font-family:inherit; }
button{ background:var(--brand); color:#fff; border:0; border-radius:10px;
  padding:10px 20px; font-weight:600; font-size:14px; cursor:pointer; transition:filter .12s; }
button:hover:not(:disabled){ filter:brightness(1.07); }
button:disabled{ opacity:.5; cursor:default; }
button.sec{ background:var(--surface); color:var(--brand); border:1px solid var(--line); }
button.sec:hover:not(:disabled){ border-color:var(--brand); background:var(--brand-weak); filter:none; }
html[data-theme="dark"] button.sec{ color:var(--brand-3); }
/* CTA grande (ação principal). Azul royal — regra da marca: institucional é sempre azul. */
button.cta{ background:var(--brand); font-size:16px; font-weight:700; padding:14px 32px; border-radius:10px;
  letter-spacing:.2px; box-shadow:0 6px 18px rgba(0,74,173,.28); }
button.cta:hover:not(:disabled){ filter:brightness(1.07); }
.fila{ font-size:13px; color:var(--muted); }

/* ---------- formulários ---------- */
label{ font-size:12px; color:var(--muted); font-weight:600; }
input, select, textarea{ font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 11px; outline:none; transition:border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-weak); }
textarea{ resize:vertical; }
input::placeholder, textarea::placeholder{ color:var(--faint); }
.cf{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); font-weight:600; }
.row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.hidden{ display:none !important; }

/* ---------- zona de upload (drag & drop) ---------- */
#drop{ border:2px dashed var(--line); border-radius:var(--radius); padding:34px; text-align:center;
  color:var(--muted); cursor:pointer; transition:.15s; background:var(--surface); }
#drop:hover{ border-color:var(--brand-3); }
#drop.hover{ border-color:var(--brand); background:var(--brand-weak); color:var(--brand-ink); }
#drop strong{ display:block; font-size:17px; color:var(--brand-ink); margin-bottom:6px; }
html[data-theme="dark"] #drop strong{ color:var(--brand-3); }
#drop small{ color:var(--faint); }

/* miniaturas de upload */
.thumbs, .thumbwrap{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.thumb{ position:relative; width:96px; height:96px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface); }
.thumb img{ width:100%; height:100%; object-fit:contain; }
.thumb .rm{ position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-weight:700; font-size:14px; line-height:22px;
  text-align:center; cursor:pointer; }

/* buscar/pegar da base de fotos */
.basesearch{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); }
.basesearch .lbl2{ display:block; font-size:13px; color:var(--ink); font-weight:700; margin-bottom:9px; }
.basesearch input.ref, .ref{ flex:1; min-width:160px; }
.basegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; margin-top:12px; }
.basecard{ border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer;
  background:var(--surface); transition:.12s; }
.basecard:hover{ border-color:var(--brand); }
.basecard.sel{ border-color:var(--green); box-shadow:0 0 0 2px var(--green-weak); }
.basecard img{ width:100%; height:104px; object-fit:contain; background:var(--surface-2); display:block; }
.basecard span{ display:block; font-size:10px; color:var(--faint); padding:4px 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seclbl, .lbl{ display:block; font-size:12px; color:var(--muted); font-weight:700; margin:2px 0 9px;
  text-transform:uppercase; letter-spacing:.04em; }

/* ---------- chips (pílulas) ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); font-size:12.5px; background:var(--surface); color:var(--muted);
  cursor:pointer; user-select:none; }
.chip.on{ background:var(--brand); color:#fff; border-color:var(--brand); }
.chip.mar{ background:var(--brand); color:#fff; border-color:var(--brand); font-weight:700; }
.chip .n{ opacity:.7; font-size:11px; }

/* ---------- caixa de preview (imagens de páginas geradas) ---------- */
.previewbox{ max-height:720px; overflow-y:auto; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px; display:flex; flex-direction:column; align-items:center;
  gap:12px; margin-top:8px; }
.previewPg{ width:100%; max-width:760px; aspect-ratio:210/297; background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.18); border-radius:2px; object-fit:contain; }
.pvPlaceholder{ background:var(--surface); display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:13px; }
.pvLoad{ padding:16px; color:var(--muted); font-size:13px; }

/* ---------- login ---------- */
.login-body{ display:grid; place-items:center; min-height:100vh; padding:20px;
  background:radial-gradient(1100px 460px at 50% -8%, #e6efff, var(--bg)); }
html[data-theme="dark"] .login-body{ background:radial-gradient(1100px 460px at 50% -8%, #0d2c5c, var(--bg)); }
.login-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px;
  width:min(380px,94vw); padding:34px 30px 30px; box-shadow:0 18px 50px rgba(0,46,108,.16);
  display:flex; flex-direction:column; }
.login-logo{ display:flex; justify-content:center; padding:2px 0 6px; }
.login-logo img{ width:auto; max-width:100%; }
.login-logo .logo-azul{ height:58px; }
.login-logo .logo-branca{ height:76px; display:none; }
html[data-theme="dark"] .login-logo .logo-azul{ display:none; }
html[data-theme="dark"] .login-logo .logo-branca{ display:block; }
.login-sub{ text-align:center; color:var(--muted); font-size:13px; margin:2px 0 20px; }
.login-card label{ display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin:14px 0 6px; }
.login-card input{ width:100%; padding:12px 13px; font-size:15px; border-radius:var(--radius-sm); }
.login-card button{ width:100%; margin-top:22px; padding:13px; font-size:15px; font-weight:700; }
.login-erro{ margin-top:14px; background:var(--red-weak); color:var(--red); border:1px solid transparent;
  border-radius:var(--radius-sm); padding:10px 12px; font-size:13px; text-align:center; display:none; }
.login-erro.on{ display:block; }

/* ---------- responsivo ---------- */
@media (max-width:720px){
  .topbar{ padding:10px 14px; }
  .topbar .topnav{ order:3; flex-basis:100%; margin-left:0; }
  .topbar-actions{ margin-left:auto; }
  main{ padding:0 14px 48px; margin-top:18px; }
  .card{ padding:18px; }
}