/* Farmacias RED, official logo palette: white, ink #231F20 and lime #DDDC1F. Earlier note: turquoise #24BBCF logo band, white surfaces, Barlow (close to the DIN-style FARMACIAS lettering), light weights. Turquoise-only palette. */
:root{
  --marca:#DDDC1F; --acento:#DDDC1F; --acento-cl:#F6F6D6; --sobre-acento-cl:#4A4900; --oro:#DDDC1F; --oro-cl:#FAFAE8; --oro-osc:#5C5B00;
  --tinta:#1A1718; --tinta-2:#2E2A2B; --gris:#4A4644; --fondo:#F5F5F1; --sup:#FFFFFF; --borde:#E6E6DE; --borde-f:#CFCFC4;
  --verde:#157A41; --verde-cl:#E3F6EA; --alerta:#B42318; --alerta-cl:#FDE2E4; --sobre-acento:#231F20;
  --saldo-bg:#007F91; --saldo-txt:#231F20; --saldo-num:#231F20; --foco:#231F20; --banda-txt:#231F20;
  --sombra:0 1px 3px rgba(0,60,70,.08),0 10px 30px rgba(0,60,70,.08);
  --f-texto:"Nunito Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --f-display:"Nunito Sans",-apple-system,"Segoe UI",Arial,sans-serif; --titulo:#231F20; --hondo:#DDDC1F; --hondo-num:#231F20; --card:0 0 .5px rgba(0,0,0,.14),0 1px 1px rgba(0,0,0,.24);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --marca:#DDDC1F; --acento:#DDDC1F; --acento-cl:#45451F; --sobre-acento-cl:#E8E77A; --oro:#DDDC1F; --oro-cl:#42411D; --oro-osc:#E8E77A;
  --tinta:#F1F0EA; --tinta-2:#D5D3CB; --gris:#D3D0C8; --fondo:#302C2D; --sup:#3E3A3B; --borde:#4F4A4B; --borde-f:#686261;
  --verde:#5BD08E; --verde-cl:#24503A; --alerta:#FFA49B; --alerta-cl:#5A2E2E; --sobre-acento:#1A1718;
  --saldo-bg:#0A5A66; --saldo-txt:#231F20; --saldo-num:#231F20; --foco:#DDDC1F; --banda-txt:#231F20;
  --sombra:0 1px 3px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.2); --titulo:#F1F0EA; --hondo:#DDDC1F; --hondo-num:#231F20; --card:0 0 0 1px rgba(255,255,255,.06);color-scheme:dark}}
:root[data-theme="dark"]{
  --marca:#DDDC1F; --acento:#DDDC1F; --acento-cl:#45451F; --sobre-acento-cl:#E8E77A; --oro:#DDDC1F; --oro-cl:#42411D; --oro-osc:#E8E77A;
  --tinta:#F1F0EA; --tinta-2:#D5D3CB; --gris:#D3D0C8; --fondo:#302C2D; --sup:#3E3A3B; --borde:#4F4A4B; --borde-f:#686261;
  --verde:#5BD08E; --verde-cl:#24503A; --alerta:#FFA49B; --alerta-cl:#5A2E2E; --sobre-acento:#1A1718;
  --saldo-bg:#0A5A66; --saldo-txt:#231F20; --saldo-num:#231F20; --foco:#DDDC1F; --banda-txt:#231F20;
  --sombra:0 1px 3px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.2); --titulo:#F1F0EA; --hondo:#DDDC1F; --hondo-num:#231F20; --card:0 0 0 1px rgba(255,255,255,.06);color-scheme:dark}

*{box-sizing:border-box}
strong,b{font-weight:600}
body{background:var(--fondo);color:var(--tinta);font-family:var(--f-texto);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 40px}
h1,h2,h3{font-weight:600;font-family:var(--f-display);text-wrap:balance;margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn,.chip,.link,.salir,.pie button{transition:background-color .15s ease,color .15s ease,opacity .15s ease}
.btn:active{opacity:.85}
.btn[disabled]{opacity:.6;cursor:progress}
.num{font-variant-numeric:tabular-nums}

.controles{max-width:420px;margin:0 auto 14px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--gris)}
.controles .fila{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.etq{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.chip{border:1px solid var(--borde-f);background:var(--sup);border-radius:999px;padding:5px 11px;cursor:pointer;font-size:13px}
.chip[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}

.telefono{max-width:420px;margin:0 auto;background:var(--sup);border:1px solid var(--borde);border-radius:28px;box-shadow:var(--sombra);
  overflow:hidden;min-height:720px;display:flex;flex-direction:column}
.barra{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--marca);color:var(--banda-txt)}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--banda-txt)}
.logo-svg{display:block;width:84px;height:auto;overflow:visible}
.logo span{padding-left:12px;border-left:1.5px solid rgba(255,255,255,.7)}
.salir{background:none;border:0;color:var(--banda-txt);font-weight:500;font-size:14px;cursor:pointer;padding:0 10px;min-height:44px}
.cuerpo{flex:1;padding:20px;display:flex;flex-direction:column;gap:16px;overflow:auto}
.pie{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--borde);background:var(--sup)}
.pie button{background:none;border:0;padding:10px 4px 12px;min-height:56px;cursor:pointer;color:var(--gris);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:3px}
.pie button svg{width:22px;height:22px}
.pie button{border-top:3px solid transparent!important;margin-top:-1px}
.pie button[aria-current="page"]{color:var(--tinta);font-weight:500;border-top-color:var(--marca)!important}

.titulo{font-size:24px;letter-spacing:-.015em}
.sub{color:var(--gris);font-size:14px;margin:4px 0 0}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:13px;font-weight:500;color:var(--tinta-2)}
.campo input{border:1px solid var(--borde-f);background:var(--sup);border-radius:12px;padding:13px 14px;font-size:17px;width:100%}
.codigo{letter-spacing:.5em;text-align:center;font-family:var(--f-display);font-size:24px!important}
.btn{background:var(--acento);color:var(--sobre-acento);border:0;border-radius:12px;padding:14px;font-weight:500;cursor:pointer;width:100%;font-size:16px}
.btn.sec{background:var(--acento-cl);color:var(--sobre-acento-cl)}
.link{background:none;border:0;color:var(--tinta);text-decoration:underline;text-decoration-color:var(--marca);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;padding:0;min-height:44px;display:inline-flex;align-items:center;font-weight:500;text-align:left}
.aviso{border-radius:12px;padding:12px 14px;font-size:14px;background:var(--acento-cl);color:var(--tinta-2)}
.aviso.alerta{background:var(--alerta-cl)}
.aviso.ok{background:var(--verde-cl)}
.nota{font-size:13px;color:var(--gris)}
.campo input[aria-invalid="true"]{border-color:var(--alerta)}
.aviso.alerta{color:var(--alerta)}

.saldo{background:var(--saldo-bg);color:var(--saldo-txt);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.saldo::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;border:26px solid rgba(255,255,255,.10)}
.saldo .etq{opacity:.85}
.saldo .grande{color:var(--saldo-num);font-family:var(--f-display);font-size:44px;font-weight:600;line-height:1;letter-spacing:-.02em}
.saldo .pesos{font-size:15px;opacity:1;font-weight:500}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border:1px solid var(--borde);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tile b{font-family:var(--f-display);font-size:20px}
.tile span{font-size:13px;color:var(--gris)}
.seccion{display:flex;flex-direction:column;gap:10px}
.seccion h2{font-size:16px}
.cupon{display:flex;gap:12px;align-items:center;border:1.5px dashed var(--oro);background:var(--oro-cl);border-radius:14px;padding:12px 14px}
.cupon .pct{font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--oro-osc);min-width:76px}
.cupon div{min-width:0}
.cupon small{display:block;color:var(--gris);font-size:13px}
.convenio{border:1px solid var(--borde);border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.proximo{border:1px dashed var(--borde-f);border-radius:14px;padding:14px;color:var(--gris);font-size:14px}

.lista{display:flex;flex-direction:column}
.compra{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--borde)}
.compra:last-child{border-bottom:0}
.compra .fecha{font-weight:500}
.compra .suc{font-size:13px;color:var(--gris)}
.compra .imp{text-align:right;font-weight:500}
.pts{text-align:right;font-size:13px;color:var(--verde)}
.pts.canje{color:var(--oro-osc)}

.dato{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--borde)}
.dato:last-child{border-bottom:0}
.dato div{min-width:0}
.dato small{display:block;font-size:13px;color:var(--gris)}
.dato span{overflow-wrap:anywhere}
.switch{width:46px;height:28px;border-radius:999px;border:0;background:var(--borde-f);position:relative;cursor:pointer;flex:none}
.switch::before{content:"";position:absolute;inset:-8px -4px}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--sup);transition:left .15s}
.switch[aria-checked="true"]{background:var(--acento)}
.switch[aria-checked="true"]::after{background:var(--sobre-acento)}
.switch[aria-checked="true"]::after{left:21px}
.hoja{border:1px solid var(--borde-f);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--sup)}
.explica{max-width:420px;margin:16px auto 0;font-size:13px;color:var(--gris);display:flex;flex-direction:column;gap:6px}

/* Layout system adapted from the getdesign.md retail design-md (structure only: warm canvas, white cards with whisper shadows, pill buttons, color-block band for points, weight-led hierarchy, tight tracking). RED's own logo and palette. */
body,.telefono{letter-spacing:-.01em}
.cuerpo{background:var(--fondo);padding:24px 16px;gap:16px}
.titulo{font-size:24px;font-weight:600;color:var(--titulo);letter-spacing:-.01em}
.seccion h2{font-size:18px;font-weight:400;color:var(--tinta)}
.btn{border-radius:50px;padding:12px 20px;font-weight:600;transition:transform .2s ease,background-color .2s ease}
.btn:active{transform:scale(.95);opacity:1}
.btn.sec{background:transparent;color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
.chip{border-radius:50px}
.campo input{border-radius:12px;background:var(--sup)}
.tile,.convenio,.hoja,.cupon,.proximo,.lista,.datos-caja{background:var(--sup);border:0;border-radius:12px;box-shadow:var(--card)}
.tile,.convenio,.cupon{padding:16px}
.proximo{box-shadow:none;border:1px dashed var(--borde-f);background:transparent}
.cupon{background:var(--sup);border-left:4px solid var(--oro)}
.saldo{background:var(--hondo);border-radius:12px;padding:24px 20px}
.saldo::after{display:none}
.saldo .grande{color:var(--hondo-num);font-weight:600;letter-spacing:-.01em}
.saldo .etq{letter-spacing:.15em}
.lista{padding:0 16px}
.aviso{border-radius:12px}
.pie{box-shadow:0 -1px 3px rgba(0,0,0,.06),0 -2px 2px rgba(0,0,0,.04);border-top:0}
.telefono{border:0;box-shadow:0 0 .5px rgba(0,0,0,.14),0 1px 1px rgba(0,0,0,.24),0 10px 30px rgba(0,0,0,.08)}
.barra{background:#FFFFFF;border-bottom:1px solid #E6E6DE;padding:10px 20px}
.logo-svg{width:96px}
.logo span{border-left-color:rgba(35,31,32,.25)}
.saldo .etq{opacity:1;font-weight:600}
.cupon .pct{color:var(--oro-osc)}
.tarjeta-pts{color:#141112;background:linear-gradient(135deg,#E4E32E 0%,#DDDC1F 50%,#D6D518 100%);border-radius:18px;padding:20px 20px 16px;gap:8px;
  box-shadow:0 1px 2px rgba(35,31,32,.18),0 12px 28px rgba(150,148,0,.35);isolation:isolate}
.tarjeta-pts::before{content:"";position:absolute;z-index:-1;right:-70px;top:-90px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28) 0 38%,transparent 39% 52%,rgba(255,255,255,.18) 53% 60%,transparent 61%)}
.tarjeta-pts::after{display:block!important;content:"RED";position:absolute;z-index:-1;top:auto;left:auto;right:-6px;bottom:-30px;border:0;width:auto;height:auto;border-radius:0;
  font:800 120px/1 "Nunito Sans",sans-serif;letter-spacing:-.04em;color:rgba(35,31,32,.05)}
.tp-arriba{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tp-marca{background:#231F20;color:#DDDC1F;border-radius:50px;padding:4px 10px;font-size:12px;font-weight:600;letter-spacing:.02em}
.tp-num{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.tarjeta-pts .grande{font-size:52px}
.tp-pts{font-size:18px;font-weight:600}
.tp-abajo{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:8px;padding-top:12px;border-top:1px dashed rgba(35,31,32,.3)}
.tp-abajo div{display:flex;flex-direction:column;min-width:0}
.tp-nombre{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-dni{font-size:13px;font-weight:600}
.tp-ultima{background:#FFFFFF;border-radius:50px;padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.btn.sec{background:#FFFFFF;color:#1A1718;box-shadow:inset 0 0 0 1.5px #1A1718}
.grupo{gap:0;padding:16px 16px 8px}
.grupo .dato:last-of-type{border-bottom:0}
.grupo-cab{padding-bottom:6px;border-bottom:1px solid var(--borde)}
.grupo-cab h2{font-size:18px;font-weight:600;display:flex;align-items:center;gap:8px}
.grupo-cab h2 svg{width:18px;height:18px}
.grupo-cab p{margin:2px 0 0;font-size:14px;color:var(--gris)}
.editar{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:50px;border:0;background:var(--acento);color:var(--sobre-acento);font-weight:600;font-size:14px;flex:none}
.editar svg{width:16px;height:16px}
.editar:active{transform:scale(.95)}
.fijo .dato span{color:var(--tinta)}
.error-pie{display:flex;flex-direction:column;gap:10px;padding:14px 0 8px;border-top:1px solid var(--borde);font-size:14px;color:var(--tinta-2)}
.campo .acepto{display:flex;flex-direction:row;gap:12px;align-items:flex-start;margin-top:6px;font-size:14px;color:var(--tinta-2);cursor:pointer;text-align:left}
.campo .acepto input{width:22px;height:22px;flex:none;margin:0;padding:0;accent-color:#1A1718}
.acepto a{color:inherit;text-decoration:underline;text-decoration-color:var(--marca);text-decoration-thickness:2px;text-underline-offset:2px}
/* En el celular el portal ocupa toda la pantalla, sin el marco. */
@media (max-width:480px){body{padding:0}.telefono{border-radius:0;min-height:100dvh;box-shadow:none}.explica{padding:0 16px 24px}}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cargando{padding:40px 20px;color:var(--gris);text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.legal .cuerpo h2{font-size:18px;font-weight:600;margin-top:12px}
.legal .cuerpo p,.legal .cuerpo li{font-size:15px;margin:0}
.legal .cuerpo ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
a.salir{display:inline-flex;align-items:center;text-decoration:none}
.explica a{color:inherit;text-decoration:underline;text-decoration-color:var(--marca);text-decoration-thickness:2px;text-underline-offset:2px}