/* Ambar Selecto — shared/ambar.css
   Tokens de marca extraídos UNA vez de index.html:210-225 (CSS custom properties del :root)
   + reset base + header/logo compartidos por mayorista/, vendedor/ y admin-mayorista/.
   Las 3 apps linkean este archivo — NO copiar los tokens a cada HTML (3 copias driftean). */

:root{
  /* Ambar Selecto — borgoña profundo + ámbar + crema (mismos tokens que el retail) */
  --wine:#5E1B2E;--wine-d:#451323;--wine-m:#7E2940;
  --gold:#C79A55;--gold-l:#E9D5A8;--gold-d:#8C6D2F;
  --deep:#2B0F1B;
  --cream:#F7F0E4;--cream-m:#EFE4CE;
  --text:#2E1520;--text-m:#6F4A55;--text-l:#9C7E86;
  --b:rgba(199,154,85,.22);--bs:rgba(199,154,85,.46);
  --white:#FFFDF9;--sh:rgba(43,15,27,.16);
  --offer:#B04A12;
  --ok:#2E7D46;
  --wa:#1FAF54;
  --radius:12px;
  --font-d:'Fraunces',Georgia,serif;
  --font-b:'Archivo','Helvetica Neue',sans-serif;
}

/* ── Reset base (mobile-first) ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100vw;}
body{font-family:var(--font-b);background:var(--cream);color:var(--text);min-height:100dvh;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
::selection{background:var(--gold);color:var(--deep);}
img{max-width:100%;}
button{font-family:inherit;}
input,textarea,select{font-family:inherit;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ── HEADER + LOGO (mismo look que el retail, sin los links de carrito/asesoría) ── */
header{background:var(--deep);position:sticky;top:0;z-index:200;border-bottom:1px solid rgba(233,213,168,.16);}
.hdr{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px;padding:0 20px;}
.logo{display:flex;align-items:center;gap:11px;line-height:1;flex-shrink:0;}
.logo-mark{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 1px rgba(233,213,168,.4);}
.logo-mark img{width:100%;height:100%;object-fit:cover;display:block;}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-main{font-family:var(--font-d);font-size:19px;font-weight:500;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;}
.logo-sub{font-size:8.5px;font-weight:500;color:var(--gold-l);letter-spacing:.26em;text-transform:uppercase;margin-top:4px;opacity:.85;}

/* ── Contenedor de la app + estado de carga (las tasks 4-6 rellenan #app) ── */
main{max-width:1280px;margin:0 auto;padding:24px 20px;min-height:60vh;}
.ambar-loading{display:flex;align-items:center;justify-content:center;min-height:40vh;color:var(--text-m);font-size:14px;text-align:center;padding:40px 20px;}