@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fontes/manrope-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fontes/manrope-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fontes/manrope-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fontes/manrope-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fontes/manrope-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fontes/sora-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url('/fontes/sora-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fontes/sora-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fontes/sora-latin-700-normal.woff2') format('woff2');}

/* brand.css — sistema visual do app Olha (não confundir com a
   identidade de cada loja/catálogo gerado, que vem de configs/*.json).
   Paleta da landing "novo design" (Vercel): creme + terracota, Sora + Manrope.
   Os nomes --av-gold* ficaram por compatibilidade: hoje são o terracota. */


:root{
  /* Superfícies */
  --av-bg: #FAF7F2;          /* creme */
  --av-bg-app: #FAF7F2;
  --av-panel: #FFFFFF;       /* papel */
  --av-panel-2: #F5EFE6;
  --av-panel-3: #EFE7D9;
  --av-sidebar-hover: #FAF7F2;
  --av-line: #EAE2D3;
  --av-line-soft: #EFE8DC;
  --av-border-strong: #DDD2BF;

  /* Texto */
  --av-text: #26241F;        /* tinta */
  --av-text-secondary: #4A463E;
  --av-text-muted: #6B6558;
  --av-text-faint: #9A9284;
  --av-text-dim: #B5AC9C;

  /* Marca (terracota) */
  --av-gold: #B8532F;
  --av-gold-hover: #A4472A;
  --av-gold-dark: #8F3D22;
  --av-gold-light: #F0956B;
  --av-gold-soft: #FBEEE1;
  --av-gold-line: rgba(184,83,47,.28);
  --av-on-gold: #FFFFFF;
  --av-grad: linear-gradient(100deg, #B8532F, #F0956B);
  --av-grad-diag: linear-gradient(135deg, #B8532F, #F0956B);

  /* Estados */
  --av-danger: #C0392B;
  --av-danger-soft: #FDECEA;
  --av-ok: #2E8B57;

  /* Forma */
  --av-r-sm: 8px;
  --av-r-md: 10px;
  --av-r-lg: 14px;
  --av-r-xl: 20px;
  --av-r-pill: 999px;
  --av-shadow-1: 0 1px 2px rgba(38,36,31,.06);
  --av-shadow-2: 0 20px 40px -20px rgba(184,83,47,.18);
  --av-shadow-gold: 0 12px 24px -10px rgba(184,83,47,.5);
  --av-focus: 0 0 0 3px rgba(240,149,107,.35);
  --av-ease: cubic-bezier(.2,.8,.2,1);

  /* Tipografia */
  --av-font-display: 'Sora', sans-serif;
  --av-font-body: 'Manrope', sans-serif;
  --av-font-mono: 'IBM Plex Mono', monospace;

  /* Moldura do app */
  --av-side-w: 240px;
  --av-tab-h: 64px;
  --av-mtop-h: 56px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; font-family:var(--av-font-body); background:var(--av-bg); color:var(--av-text); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;}
a{color:var(--av-gold); text-decoration:none;}
a:hover{color:var(--av-gold-hover);}
:focus-visible{outline:none; box-shadow:var(--av-focus); border-radius:var(--av-r-sm);}
img{max-width:100%;}
.av-ico{flex-shrink:0; display:block;}
body.av-travado{overflow:hidden;}
[hidden]{display:none !important;}

.av-cap{
  font:500 10.5px var(--av-font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- Botões ---------- */
.av-btn-primary, .av-btn-ghost, .av-btn-soft{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:700 14px var(--av-font-body); padding:12px 22px; min-height:44px;
  border-radius:var(--av-r-md); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .12s var(--av-ease), background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.av-btn-primary{background:var(--av-grad); color:var(--av-on-gold); border:none; box-shadow:var(--av-shadow-gold);}
.av-btn-primary:hover{filter:brightness(1.05); color:var(--av-on-gold);}
.av-btn-ghost{background:var(--av-panel); color:var(--av-text); border:1.5px solid var(--av-line);}
.av-btn-ghost:hover{border-color:var(--av-gold-light); color:var(--av-text);}
.av-btn-soft{background:var(--av-panel-2); color:var(--av-text); border:1px solid var(--av-line);}
.av-btn-soft:hover{background:var(--av-panel-3); color:var(--av-text);}
.av-btn-primary:active, .av-btn-ghost:active, .av-btn-soft:active{transform:scale(.97);}
.av-btn-primary:disabled, .av-btn-ghost:disabled, .av-btn-soft:disabled{opacity:.6; cursor:default; transform:none;}
.av-btn-block{width:100%;}
.av-btn-sm{padding:8px 14px; min-height:36px; font-size:13px;}

.av-icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--av-r-pill); border:none; background:transparent; color:var(--av-text-secondary); cursor:pointer;
  transition:background .15s, color .15s, transform .12s var(--av-ease);
}
.av-icon-btn:hover{background:var(--av-panel-2); color:var(--av-text);}
.av-icon-btn:active{transform:scale(.92);}

.av-link-btn{background:none; border:none; padding:0; color:var(--av-text-muted); font:500 13px var(--av-font-body); cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
.av-link-btn:hover{color:var(--av-text);}

.av-spinner{width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:av-gira .7s linear infinite;}
@keyframes av-gira{to{transform:rotate(360deg);}}

/* ---------- Marca ---------- */
.av-brand{display:inline-flex; align-items:center; gap:10px; color:var(--av-text);}
.av-brand:hover{color:var(--av-text);}
.av-brand-name{font:600 22px var(--av-font-display);letter-spacing:-.02em;}

.av-marca-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;box-shadow:none;}
.av-marca-box img{display:block;width:100%;height:100%;object-fit:contain;}
.brand-name{font-family:var(--av-font-display);font-weight:600!important;color:var(--av-text);}

/* ---------- Avatar ---------- */
.av-avatar{
  --s:36px; position:relative; width:var(--s); height:var(--s); border-radius:calc(var(--s) * .25); flex-shrink:0;
  background:var(--av-gold-soft); border:1px solid var(--av-gold-line); overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  font:600 calc(var(--s) * .36) var(--av-font-display); color:var(--av-gold);
}
.av-avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--av-panel); padding:12%;}

/* ---------- Campos ---------- */
.av-field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.av-field label{font:600 13px var(--av-font-body); color:var(--av-text-secondary);}
.av-field .av-hint{font:400 12px var(--av-font-body); color:var(--av-text-faint);}
.av-input{
  width:100%; min-height:48px; background:var(--av-panel); border:1.5px solid var(--av-line); border-radius:var(--av-r-md);
  color:var(--av-text); font:400 16px var(--av-font-body); padding:12px 14px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.av-input::placeholder{color:var(--av-text-dim);}
.av-input:hover{border-color:var(--av-border-strong);}
.av-input:focus{outline:none; border-color:var(--av-gold-light); box-shadow:var(--av-focus); background:var(--av-panel);}
.av-input-wrap{position:relative; display:flex; align-items:center;}
.av-input-wrap.com-icone .av-input{padding-left:44px;}
.av-input-wrap.com-olho .av-input{padding-right:48px;}
.av-input-ico{position:absolute; left:14px; color:var(--av-text-faint); pointer-events:none; display:flex;}
.av-input-wrap:focus-within .av-input-ico{color:var(--av-gold);}
.av-input-olho{position:absolute; right:4px; width:40px; height:40px; border:none; background:none; color:var(--av-text-faint); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:var(--av-r-pill);}
.av-input-olho:hover{color:var(--av-text); background:var(--av-panel-2);}
.av-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-2px 0 20px; font:500 13px var(--av-font-body); flex-wrap:wrap;}
.av-check{display:flex; align-items:center; gap:8px; color:var(--av-text-secondary); cursor:pointer; min-height:32px;}
.av-check input{accent-color:var(--av-gold); width:18px; height:18px;}

.av-alert{border-radius:var(--av-r-md); padding:11px 14px; font:500 13px var(--av-font-body); line-height:1.45; margin-bottom:16px; display:none; gap:10px; align-items:flex-start;}
.av-alert.show{display:flex;}
.av-alert .av-ico{margin-top:1px;}
.av-alert.erro{background:var(--av-danger-soft); border:1px solid rgba(192,57,43,.25); color:#9B2C20;}
.av-alert.ok{background:var(--av-gold-soft); border:1px solid var(--av-gold-line); color:var(--av-text);}
.av-alert.ok .av-ico{color:var(--av-gold);}

/* ---------- Telas de acesso ---------- */
.av-auth{
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px; gap:24px;
  background:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(240,149,107,.18), transparent 70%), var(--av-bg);
}
.av-auth-card{width:100%; max-width:420px; background:var(--av-panel); border:1px solid var(--av-line); border-radius:var(--av-r-xl); padding:32px 28px; box-shadow:var(--av-shadow-2);}
.av-auth-card h1{font:700 24px var(--av-font-display); margin:0 0 6px; letter-spacing:-.01em;}
/* Capa com o mascote no topo do cartão (boas-vindas) */
.av-auth-capa{position:relative; height:128px; margin:-32px -28px 24px; border-radius:var(--av-r-xl) var(--av-r-xl) 0 0; overflow:hidden; background:#B8532F;}
.av-auth-capa img{width:100%; height:100%; object-fit:cover; object-position:85% 30%; display:block;}
.av-auth-capa span{position:absolute; left:24px; top:50%; transform:translateY(-50%); font:600 19px/1.2 var(--av-font-display); color:#fff8ee; text-shadow:0 1px 8px rgba(80,30,10,.35); letter-spacing:-.01em;}
.av-auth-sub{font:400 14px var(--av-font-body); color:var(--av-text-muted); margin:0 0 24px; line-height:1.55;}
.av-auth-foot{font:500 14px var(--av-font-body); color:var(--av-text-muted); text-align:center; margin:0;}
@media (max-width:480px){
  .av-auth{justify-content:flex-start; padding-top:40px;}
  .av-auth-card{padding:26px 20px; border-radius:var(--av-r-lg);}
}

/* ---------- Moldura do app ---------- */
body.av-app{background:var(--av-bg-app); padding-left:var(--av-side-w);}
.av-side{
  position:fixed; inset:0 auto 0 0; width:var(--av-side-w); z-index:30;
  background:var(--av-panel); border-right:1px solid var(--av-line);
  display:flex; flex-direction:column; padding:22px 14px 16px; gap:26px;
}
.av-side-top{padding:4px 10px;}
.av-side-nav{display:flex; flex-direction:column; gap:4px;}
.av-side-item{
  display:flex; align-items:center; gap:14px; min-height:48px; padding:0 14px; border-radius:var(--av-r-md);
  font:500 15px var(--av-font-body); color:var(--av-text-secondary); text-decoration:none;
  transition:background .15s, color .15s, transform .12s var(--av-ease);
}
.av-side-item:hover{background:var(--av-sidebar-hover); color:var(--av-text);}
.av-side-item:active{transform:scale(.98);}
.av-side-item.ativo{color:var(--av-gold); font-weight:700; background:var(--av-gold-soft);}
.av-side-item.ativo .av-ico{color:var(--av-gold); stroke-width:2.1;}
.av-side-item.destaque{background:var(--av-grad); color:var(--av-on-gold); font-weight:700; margin:6px 0; box-shadow:var(--av-shadow-gold);}
.av-side-item.destaque:hover{filter:brightness(1.05); background:var(--av-grad); color:var(--av-on-gold);}
.av-side-item.destaque .av-ico{color:var(--av-on-gold);}
.av-side-item.desativado{opacity:.5; cursor:default;}
.av-side-item.desativado:hover{background:none; color:var(--av-text-secondary);}
.av-side-item em{margin-left:auto; font:500 9.5px var(--av-font-mono); letter-spacing:.1em; text-transform:uppercase; font-style:normal; color:var(--av-text-faint);}
.av-side-perfil{
  margin-top:auto; display:flex; align-items:center; gap:10px; width:100%; padding:10px; border-radius:var(--av-r-md);
  background:none; border:none; color:var(--av-text-muted); cursor:pointer; text-align:left;
}
.av-side-perfil:hover{background:var(--av-sidebar-hover); color:var(--av-text);}
.av-side-perfil-txt{display:flex; flex-direction:column; min-width:0; flex:1;}
.av-side-perfil-txt strong{font:600 13.5px var(--av-font-body); color:var(--av-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.av-side-perfil-txt small{font:400 12px var(--av-font-body); color:var(--av-text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.av-mtop, .av-tabbar{display:none;}

@media (max-width:860px){
  body.av-app{padding-left:0; padding-top:var(--av-mtop-h); padding-bottom:calc(var(--av-tab-h) + env(safe-area-inset-bottom));}
  .av-side{display:none;}
  .av-mtop{
    display:flex; position:fixed; inset:0 0 auto 0; height:var(--av-mtop-h); z-index:30;
    align-items:center; justify-content:space-between; padding:0 12px 0 16px;
    background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--av-line-soft);
  }
  .av-mtop .av-brand-name{font:600 22px var(--av-font-display);letter-spacing:-.02em;}
  .av-mtop-perfil{background:none; border:none; padding:4px; border-radius:50%; cursor:pointer;}
  .av-tabbar{
    display:grid; grid-template-columns:repeat(3,1fr); position:fixed; inset:auto 0 0 0; z-index:30;
    height:calc(var(--av-tab-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
    border-top:1px solid var(--av-line-soft);
  }
  .av-tab{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--av-text-faint); font:600 10.5px var(--av-font-body); text-decoration:none;
    transition:color .15s, transform .12s var(--av-ease);
  }
  .av-tab:active{transform:scale(.9);}
  .av-tab.ativo{color:var(--av-gold);}
  .av-tab.ativo .av-ico{color:var(--av-gold); stroke-width:2.1;}
  .av-tab-criar{
    width:52px; height:38px; border-radius:var(--av-r-md); background:var(--av-grad); color:var(--av-on-gold);
    display:flex; align-items:center; justify-content:center; box-shadow:var(--av-shadow-gold);
  }
  .av-tab.criar:hover .av-tab-criar{filter:brightness(1.05);}
  .av-tab-criar .av-ico{stroke-width:2.4;}
}

/* ---------- Folha de ações ---------- */
.av-sheet-backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; padding:16px;
  transition:background .2s;
}
.av-sheet-backdrop.aberta{background:rgba(38,36,31,.4);}
.av-sheet{
  width:100%; max-width:400px; background:var(--av-panel); border:1px solid var(--av-line); border-radius:var(--av-r-xl);
  box-shadow:var(--av-shadow-2); padding:8px 8px 10px; transform:scale(.96); opacity:0; transition:transform .2s var(--av-ease), opacity .2s;
}
.av-sheet-backdrop.aberta .av-sheet{transform:none; opacity:1;}
.av-sheet-grip{display:none;}
.av-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 8px 10px 14px; border-bottom:1px solid var(--av-line-soft); margin-bottom:6px;}
.av-sheet-title{font:700 16px var(--av-font-display); color:var(--av-text);}
.av-sheet-sub{font:400 12.5px var(--av-font-body); color:var(--av-text-faint); margin-top:2px; word-break:break-word;}
.av-sheet-list{display:flex; flex-direction:column;}
.av-sheet-item{
  display:flex; align-items:center; gap:14px; min-height:52px; padding:8px 12px; border-radius:var(--av-r-md);
  background:none; border:none; color:var(--av-text); text-align:left; cursor:pointer; font:500 15px var(--av-font-body); text-decoration:none; width:100%;
}
.av-sheet-item:hover{background:var(--av-panel-2); color:var(--av-text);}
.av-sheet-item:active{background:var(--av-panel-3);}
.av-sheet-ico{width:38px; height:38px; border-radius:10px; background:var(--av-gold-soft); display:flex; align-items:center; justify-content:center; color:var(--av-gold); flex-shrink:0;}
.av-sheet-item:hover .av-sheet-ico{color:var(--av-gold);}
.av-sheet-txt{display:flex; flex-direction:column; min-width:0;}
.av-sheet-txt small{font:400 12.5px var(--av-font-body); color:var(--av-text-faint);}
.av-sheet-item.perigo, .av-sheet-item.perigo .av-sheet-ico{color:var(--av-danger);}
@media (max-width:860px){
  .av-sheet-backdrop{align-items:flex-end; padding:0;}
  .av-sheet{max-width:none; border-radius:var(--av-r-xl) var(--av-r-xl) 0 0; border-bottom:none; padding-bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateY(100%); opacity:1;}
  .av-sheet-grip{display:block; width:40px; height:4px; border-radius:4px; background:var(--av-border-strong); margin:4px auto 6px;}
}

/* ---------- Toast ---------- */
.av-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px); z-index:70;
  display:flex; align-items:center; gap:8px; background:var(--av-text); border:none; color:#fff;
  font:600 13.5px var(--av-font-body); padding:11px 16px; border-radius:var(--av-r-pill); box-shadow:var(--av-shadow-2);
  opacity:0; transition:all .2s var(--av-ease); pointer-events:none;
}
.av-toast .av-ico{color:var(--av-gold-light);}
.av-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
@media (max-width:860px){ .av-toast{bottom:calc(var(--av-tab-h) + 16px + env(safe-area-inset-bottom));} }

/* ---------- Utilitários ---------- */
.av-stripes{
  background-image:repeating-linear-gradient(135deg, #F3ECE0 0px, #F3ECE0 10px, #EFE7D9 10px, #EFE7D9 20px);
}
.av-skeleton{background:linear-gradient(90deg, var(--av-panel) 0%, var(--av-panel-2) 50%, var(--av-panel) 100%); background-size:200% 100%; animation:av-brilho 1.2s ease-in-out infinite;}
@keyframes av-brilho{0%{background-position:100% 0;} 100%{background-position:-100% 0;}}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }