/* ============================================================
   LIDERFARMA — sistema visual
   Lenguaje tomado de las referencias entregadas:
   · fondo negro + texto blanco, superficies elevadas #1A1A19 / #F4F2EF
   · botones píldora (700), tarjetas 8px / 16px, inputs píldora
   · sombras suaves, grilla de 4px, titulares apretados (1.05–1.1)
   · degradado menta #C6DDD6 → #C2EFF5 → #C4D1DD como momento de marca
   · Inter como tipografía
   Color de marca: verde LiderFarma (logo #0B9540, piezas #1EB07A).
   ============================================================ */
:root{
  /* marca */
  --verde:#0B9540; --verde-2:#1EB07A; --verde-3:#27D08A; --verde-osc:#07672C;
  --azul:#004D99; --azul-2:#3371AD; --marino:#001E60;
  --grad-menta:linear-gradient(100deg, #C6DDD6 0%, #C2EFF5 50%, #C4D1DD 100%);
  --grad-marca:linear-gradient(120deg, #1EB07A 0%, #0B9540 55%, #07672C 100%);
  /* neutros */
  --negro:#000000; --elev-1:#0B0C0C; --elev-2:#1A1A19; --elev-3:#242423;
  --blanco:#FFFFFF; --neutro:#F4F2EF; --arcilla:#DED5D0; --carbon:#413D3C;
  --gris-100:#D9DADA; --gris-200:#A5AAAA; --gris-300:#989090; --gris-400:#707575; --gris-500:#414646; --gris-600:#0A1414;
  --muted:#A5AAAA; --muted-2:#767471; --borde:rgba(255,255,255,.12); --borde-claro:#E3E4E5;
  /* feedback */
  --ok:#00853E; --ok-l:#D4EBDF; --info:#296EA3; --info-l:#E2E7F2; --aviso:#BC5724; --aviso-l:#F4E3DA; --error:#A32A33; --error-l:#F7E9E9;
  /* forma */
  --r-pill:9999px; --r-btn:45px; --r-card:16px; --r-card-s:8px; --r-input:9999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s9:36px; --s10:40px; --s30:120px;
  --sombra-1:rgba(65,61,60,.1) 0 2px 4px 2px;
  --sombra-2:rgba(0,0,0,.1) 0 1px 5px 0;
  --sombra-3:rgba(0,0,0,.25) 0 2px 8px 0;
  --sombra-4:rgba(0,0,0,.15) 0 3px 5px 2px;
  --glow:0 0 0 1px rgba(30,176,122,.35), 0 10px 40px -10px rgba(30,176,122,.55);
  --ease:cubic-bezier(.17,.67,.3,1); --t1:.3s; --t2:.5s; --t3:.6s;
  --ff:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --max:1351px; --gut:clamp(16px, 3.4vw, 40px);
  --z-nav:9999; --z-modal:10000; --z-toast:10001;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important; animation-iteration-count:1!important} }
body{margin:0; font-family:var(--ff); font-size:16px; line-height:1.5; color:var(--blanco); background:var(--negro); -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"}
img{display:block; max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--verde-3); outline-offset:2px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{width:min(var(--max), 100% - 2*var(--gut)); margin-inline:auto}
[hidden]{display:none!important}

/* tipografía */
.eyebrow{display:inline-flex; align-items:center; gap:var(--s2); margin:0 0 var(--s4); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--verde-2)}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor}
.h1{margin:0; font-size:clamp(44px, 6.4vw, 88px); line-height:1.02; font-weight:800; letter-spacing:-.045em}
.h2{margin:0; font-size:clamp(34px, 4.2vw, 56px); line-height:1.06; font-weight:800; letter-spacing:-.04em; text-wrap:balance}
.h3{margin:0; font-size:clamp(20px, 1.8vw, 24px); line-height:1.15; font-weight:700; letter-spacing:-.02em}
.lead{margin:var(--s5) 0 0; max-width:560px; font-size:clamp(16px, 1.3vw, 18px); line-height:1.55; color:var(--muted)}
.grad{background:var(--grad-menta); -webkit-background-clip:text; background-clip:text; color:transparent}
.grad-marca{background:linear-gradient(100deg, #27D08A, #C2EFF5 60%, #C4D1DD); -webkit-background-clip:text; background-clip:text; color:transparent}

/* botones — píldora, 700 */
.btn{--h:48px; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); height:var(--h); padding:0 var(--s6); border-radius:var(--r-btn); border:1px solid transparent; font-weight:700; font-size:15px; letter-spacing:-.01em; text-decoration:none; white-space:nowrap; transition:transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease), background-color var(--t1), border-color var(--t1), color var(--t1), opacity var(--t1)}
.btn svg{width:18px; height:18px; flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.45; pointer-events:none}
.btn-verde{background:var(--verde); color:#fff}
.btn-verde:hover{background:var(--verde-2); box-shadow:0 0 0 4px rgba(30,176,122,.22), var(--sombra-3)}
.btn-blanco{background:#fff; color:var(--carbon)}
.btn-blanco:hover{box-shadow:0 0 0 4px rgba(255,255,255,.18), var(--sombra-3)}
.btn-linea{background:transparent; border-color:rgba(255,255,255,.28); color:#fff}
.btn-linea:hover{border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.btn-fantasma{background:rgba(255,255,255,.06); color:#fff}
.btn-fantasma:hover{background:rgba(255,255,255,.12)}
.btn-oscuro{background:var(--carbon); color:#fff}
.btn-oscuro:hover{background:#000; box-shadow:0 0 0 4px rgba(65,61,60,.2)}
.btn-peligro{background:var(--error); color:#fff}
.btn-sm{--h:36px; padding:0 var(--s4); font-size:13.5px}
.btn-lg{--h:56px; padding:0 var(--s8); font-size:16px}
.btn-ico{width:var(--h); padding:0}
.btn-bloque{width:100%}

/* chips */
.chip{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 var(--s4); border-radius:var(--r-pill); border:1px solid var(--borde); background:rgba(255,255,255,.03); color:#fff; font-size:14px; font-weight:600; white-space:nowrap; transition:background-color var(--t1), border-color var(--t1), color var(--t1), transform var(--t1) var(--ease)}
.chip:hover{border-color:rgba(255,255,255,.4); transform:translateY(-1px)}
.chip[aria-pressed="true"], .chip.on{background:#fff; color:var(--carbon); border-color:#fff}
.chip i{width:8px; height:8px; border-radius:50%}

/* inputs — píldora */
.campo{display:block}
.campo > span{display:block; margin:0 0 6px var(--s2); font-size:13px; font-weight:600; color:var(--muted)}
.input{width:100%; height:48px; padding:0 var(--s5); border-radius:var(--r-input); border:1px solid var(--borde); background:var(--elev-2); color:#fff; font-size:16px; transition:border-color var(--t1), box-shadow var(--t1)}
.input::placeholder{color:var(--muted-2)}
.input:focus{outline:none; border-color:var(--verde-2); box-shadow:0 0 0 4px rgba(30,176,122,.18)}
textarea.input{height:auto; min-height:96px; padding:var(--s3) var(--s5); border-radius:24px; resize:vertical}
select.input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A5AAAA' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 20px center; padding-right:44px}
.buscador{position:relative}
.buscador svg{position:absolute; left:20px; top:50%; width:20px; height:20px; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.buscador .input{padding-left:52px}

/* tarjetas */
.card{background:var(--neutro); color:var(--carbon); border-radius:var(--r-card-s); box-shadow:var(--sombra-1)}
.panel{background:var(--elev-2); border:1px solid var(--borde); border-radius:var(--r-card)}
.vidrio{background:rgba(26,26,25,.55); border:1px solid rgba(255,255,255,.1); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); border-radius:var(--r-card)}

/* insignias */
.badge{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; letter-spacing:.02em}
.badge-ok{background:var(--ok-l); color:var(--ok)} .badge-info{background:var(--info-l); color:var(--info)} .badge-aviso{background:var(--aviso-l); color:var(--aviso)} .badge-error{background:var(--error-l); color:var(--error)}
.badge-verde{background:rgba(30,176,122,.16); color:var(--verde-3)} .badge-gris{background:rgba(255,255,255,.08); color:var(--gris-100)}

/* modal / cajón */
.velo{position:fixed; inset:0; z-index:var(--z-modal); background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity var(--t2), visibility var(--t2)}
.velo.on{opacity:1; visibility:visible}
.modal{position:fixed; z-index:calc(var(--z-modal) + 1); left:50%; top:50%; width:min(520px, calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; transform:translate(-50%, -46%) scale(.98); opacity:0; visibility:hidden; transition:transform var(--t2) var(--ease), opacity var(--t2), visibility var(--t2); background:var(--elev-2); border:1px solid var(--borde); border-radius:24px; box-shadow:0 40px 100px -30px rgba(0,0,0,.9); padding:var(--s8)}
.modal.on{transform:translate(-50%, -50%); opacity:1; visibility:visible}
.cajon{position:fixed; z-index:calc(var(--z-modal) + 1); top:0; right:0; bottom:0; width:min(460px, 100%); display:flex; flex-direction:column; background:var(--elev-1); border-left:1px solid var(--borde); transform:translateX(102%); transition:transform var(--t2) var(--ease); box-shadow:-40px 0 100px -40px rgba(0,0,0,.9)}
.cajon.on{transform:none}
.cajon-cab{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s5) var(--s6); border-bottom:1px solid var(--borde)}
.cajon-cuerpo{flex:1; overflow:auto; padding:var(--s6)}
.cajon-pie{padding:var(--s5) var(--s6); border-top:1px solid var(--borde); background:var(--elev-2)}
.cerrar{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--borde); background:transparent; color:#fff; transition:background-color var(--t1)}
.cerrar:hover{background:rgba(255,255,255,.08)}
.cerrar svg{width:18px; height:18px}

/* avisos */
.toasts{position:fixed; z-index:var(--z-toast); left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(460px, calc(100% - 32px))}
.toast{display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r-pill); background:#fff; color:var(--carbon); font-size:14.5px; font-weight:600; box-shadow:var(--sombra-3), 0 20px 50px -20px rgba(0,0,0,.6); animation:toastIn var(--t2) var(--ease) both}
.toast.ok::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ok)}
.toast.error::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--error)}
.toast.sale{animation:toastOut var(--t1) ease both}
@keyframes toastIn{from{opacity:0; transform:translateY(12px) scale(.96)}}
@keyframes toastOut{to{opacity:0; transform:translateY(8px)}}

/* banda modo demo */
.demo-banda{display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 16px; background:repeating-linear-gradient(135deg, #1A1A19 0 10px, #141413 10px 20px); color:var(--gris-200); font-size:12px; font-weight:600; text-align:center}
.demo-banda b{color:var(--verde-3)}