/* Novatheris · portal de afiliados — hoja compartida */

/* Todo local: sin red no cambia nada. Un master por peso o todo saldría Medium. */
@font-face{font-family:'Figtree';src:url('fuentes/Figtree-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('fuentes/Figtree-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('fuentes/Figtree-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Local';src:url('fuentes/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Local';src:url('fuentes/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bone:#f5f4f0;         /* fondo */
  --line-in:#d0d0c9;      /* separadores */
  --line-strong:#8a8a82;  /* borde visible: campo, pill, stepper, casillas */
  --line-sel:#63635b;     /* borde de la pill elegida */
  --ink:#0d0d0c;          /* tinta */
  --mute:#63635b;         /* texto secundario y placeholder */
  --pill:#ecebe6;         /* fondo de botón secundario */
  --plinto:#f2f2ef;       /* plinto de la foto de producto */
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Plex Local',ui-monospace,'SF Mono',Menlo,monospace;
  --pad:20px;
  --tab-h:64px;
  --safe:env(safe-area-inset-bottom,0px);
  --cta-off:0px;          /* alto de la barra fija de abajo, si la hay */
}
body.con-tabs{--cta-off:var(--tab-h)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font:400 15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none}
input,textarea{font:inherit;color:inherit;-webkit-appearance:none}
::selection{background:var(--ink);color:var(--bone)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- estructura ---------- */
.app{max-width:480px;margin:0 auto;position:relative}
.screen{padding:8px var(--pad) 48px}
.topbar+.screen{padding-top:24px}
.screen--tabs,.screen--cta{padding-bottom:calc(var(--cta-off) + var(--safe) + 48px)}
/* el hueco de la barra fija solo existe cuando la barra existe */
body.has-cta .screen--cta{padding-bottom:calc(var(--cta-off) + var(--safe) + 92px)}
.cover-hero+.screen{padding-top:48px}
/* pantalla sin header propio (código, listo, error): mismo aire de arriba */
.app>.screen:first-child{padding-top:48px}

/* ---------- tipografía ---------- */
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 16px}
.eyebrow--tight{margin:0 0 8px}
.title{font:500 26px/1.2 var(--sans);letter-spacing:-.01em;margin:0 0 8px}
.lede{font:400 15px/1.5 var(--sans);color:var(--mute);margin:0 0 24px;max-width:34ch}
.note{font:400 15px/1.5 var(--sans);color:var(--mute);margin:8px 0 24px;max-width:40ch;text-wrap:balance}
.note--strong{color:var(--ink);font-weight:500}
.note--error{color:var(--ink);font-weight:500;background:var(--pill);border-left:2px solid var(--ink);padding:12px 14px}
.muted{color:var(--mute)}
.link{display:inline-block;min-height:48px;min-width:44px;padding:16px 0;font:400 15px/1.5 var(--sans);color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link--muted{color:var(--mute)}
/* 20px era para el numero solo en su linea; ahora va dentro de la frase */
.num{font:500 15px/1.5 var(--mono);letter-spacing:.02em;white-space:nowrap}
.rule{height:1px;background:var(--line-in);border:0;margin:24px 0}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad) 8px}
.topbar-mark{width:170px;height:auto;flex:none}
.topbar-user{font:400 15px/1 var(--sans);color:var(--mute);white-space:nowrap;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;text-align:right}
@media (max-width:339px){.topbar-user{display:none}}
.backbar{padding:8px var(--pad) 0}
.back{display:inline-flex;align-items:center;gap:8px;min-height:48px;font:400 15px/1 var(--sans);color:var(--mute)}
.back svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- botones ---------- */
.btn-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 24px;
  border-radius:999px;background:var(--ink);color:var(--bone);font:500 15px/1.2 var(--sans);text-align:center}
/* mientras se manda: no se toca de nuevo y no parpadea con opacidad */
.btn-primary[aria-busy="true"],.link[aria-busy="true"]{cursor:default}
.btn-primary[aria-busy="true"],.link[aria-busy="true"]{pointer-events:none}
.btn-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--pill);color:var(--ink);font:500 15px/1.2 var(--sans)}
.btn-pill--wide{display:flex;width:100%}
.btn-pill svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* opciones tipo radio: lo elegido se ve lleno, lo demás vacío. Nunca borde de tinta. */
.btn-pill[aria-pressed]{background:transparent;border-color:var(--line-strong);font-weight:400}
.btn-pill[aria-pressed]{--check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 25l7 7 14-16'/%3E%3C/svg%3E")}
/* el glifo U+2713 de Plex Mono se lee "raiz cuadrada" a 15 px: va el trazo dibujado */
.btn-pill[aria-pressed]::before{content:"";width:15px;height:15px;flex:none;visibility:hidden;background:currentColor;
  -webkit-mask:var(--check) center/15px no-repeat;mask:var(--check) center/15px no-repeat}
/* espejo del check: sin el la etiqueta queda 11,5 px a la derecha del centro */
.btn-pill[aria-pressed]::after{content:"";width:15px;flex:none}
.btn-pill[aria-pressed="true"]{background:var(--pill);border-color:var(--ink);font-weight:500}
.btn-pill[aria-pressed="true"]::before{visibility:visible}

/* grupo de opciones tipo radio */
/* el grupo viene como <fieldset>: se apaga el estilo del navegador. Chrome trata al
   legend como una caja mas del flex y los demas lo sacan del flujo: la fila propia
   con row-gap 0 deja los mismos 8 px del label en los dos casos. */
.choice{display:flex;flex-wrap:wrap;gap:0 8px;margin:0 0 24px;border:0;padding:0;min-width:0}
legend.field-label{flex:0 0 100%;padding:0}
.choice .btn-pill{flex:1}

/* ---------- stepper ---------- */
.stepper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;
  border:1px solid var(--line-strong);border-radius:12px;background:var(--bone)}
.stepper-btn{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;
  font:300 22px/1 var(--sans);color:var(--ink)}
.stepper-btn:disabled{opacity:.5;cursor:default}
.stepper-value{display:inline-block;font:500 22px/1 var(--sans);font-variant-numeric:tabular-nums;text-align:center;min-width:2ch}

/* ---------- tarjeta de producto ---------- */
.card{padding:24px 0;border-bottom:0}
.card+.card{border-top:1px solid var(--line-in)}
.card-main{display:flex;gap:16px;align-items:flex-start}
/* plinto: la foto siempre ocupa el mismo bloque, con o sin foto */
.card-photo{flex:none;width:112px;height:128px;background:var(--plinto);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-photo img{flex:none;width:auto;height:112px;max-width:none}
.card-info{flex:1;min-width:0}
.card-name{font:500 16px/1.3 var(--sans);margin:0}
.card-dose{font:400 15px/1.4 var(--sans);color:var(--mute);margin:8px 0 24px}
.card-price-label{font:400 15px/1.4 var(--sans);color:var(--mute);margin:0 0 8px}
.card-price{font:500 24px/1 var(--mono);margin:0}
.card-math{font:400 15px/1.4 var(--sans);color:var(--mute);margin:8px 0 0}
.card-stock{font:400 15px/1.4 var(--sans);color:var(--mute);margin:8px 0 0}
.card .stepper{margin-top:16px}
/* sin stock: la tarjeta se apaga entera, el nombre no */
.card-stock--out{font:400 15px/1.4 var(--sans);color:var(--ink);margin:16px 0 0}
.card:has(.card-stock--out) .card-photo img:not([src$="vial.svg"]){opacity:.4}
.card:has(.card-stock--out) .card-price{color:var(--mute);font-weight:400}

/* ---------- líneas de pedido ---------- */
.lines{margin:0;padding:0;list-style:none}
.line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-in)}
.line-name{font:500 16px/1.3 var(--sans);margin:0}
.line-dose{font:400 15px/1.4 var(--sans);color:var(--mute);margin:8px 0 0}
.line-qty{font:400 15px/1.4 var(--sans);color:var(--mute);margin:8px 0 0}
.line-sum{font:500 17px/1.4 var(--mono);white-space:nowrap}
.lines--cancelada .line-sum{color:var(--mute)}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:24px 0 0}
.total-label{font:400 15px/1 var(--sans);color:var(--mute)}
.total-value{font:500 24px/1 var(--mono)}

/* ---------- campos ---------- */
.field{margin:0 0 24px}
.field-label{display:block;font:400 15px/1.4 var(--sans);color:var(--mute);margin:0 0 8px}
.field-hint{font:400 13px/1.4 var(--sans);color:var(--mute);text-align:left;margin:8px 0 0}
.input{display:flex;cursor:text;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 16px;
  border:1px solid var(--line-strong);border-radius:12px;background:var(--bone)}
.input:focus-within{border-color:var(--ink)}
.input:has(:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
/* el campo vivo llena toda la caja: tocar cerca del borde también enfoca */
.input input,.input textarea{flex:1;min-width:0;width:100%;align-self:stretch;
  border:0;background:none;outline:none;padding:0;font:400 17px/1.4 var(--sans)}
.input input::placeholder,.input textarea::placeholder{color:var(--mute);opacity:1}
.input--area{align-items:stretch;padding:0}
.input--area textarea{resize:none;padding:16px;min-height:88px}
.input-prefix{flex:none;font:400 17px/1 var(--mono);color:var(--ink)}
.input:has(.input-prefix) input,.input #tel{font-family:var(--mono)}

/* ---------- casillas del código ---------- */
.otp{position:relative;display:flex;gap:8px;margin:0 0 24px}
.otp:has(+.note){margin-bottom:0}
.note--error:has(+form){margin-bottom:8px}
.otp-box{flex:1;height:56px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:12px;
  font:500 24px/1 var(--sans);font-variant-numeric:tabular-nums}
/* 16 px o iOS hace zoom al enfocar */
.otp-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:none;font-size:16px}
.otp:focus-within .otp-box{border-color:var(--line-sel)}
.otp .otp-box.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- barra fija de revisar pedido ---------- */
.sticky-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--cta-off) + var(--safe));z-index:19;
  width:100%;max-width:480px;padding:12px var(--pad) 16px;background:var(--bone);border-top:1px solid var(--line-in)}
body.has-cta .tabbar{border-top:0}

/* ---------- calculadora de descuento (en revisar) ---------- */
.calc-toggle{display:block;min-height:48px;padding:16px 0;font:400 15px/1.5 var(--sans);color:var(--mute);
  text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.calc{padding-top:8px}
.calc-pills{display:flex;flex-wrap:wrap;gap:0 8px;margin:0 0 16px;border:0;padding:0;min-width:0}
.calc-pills .btn-pill{flex:1;gap:4px;padding:0 8px;white-space:nowrap}
.calc-pills .btn-pill[aria-pressed]::before{width:12px;height:12px;-webkit-mask-size:12px;mask-size:12px}
.calc-pills .btn-pill[aria-pressed]::after{width:12px}
.calc-out{font:400 15px/1.4 var(--sans);margin:0}

/* ---------- barra de pestañas ---------- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:20;display:flex;
  width:100%;max-width:480px;background:var(--bone);border-top:1px solid var(--line-in);padding-bottom:var(--safe)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:var(--tab-h);color:var(--mute)}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tab-label{font:400 12px/1 var(--sans)}
.tab.is-active{color:var(--ink)}

/* ---------- lista de pedidos ---------- */
.order{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:0}
.order+.order{border-top:1px solid var(--line-in)}
.orders,.status--vacio{margin-top:24px}
/* el estado manda; lo ya cerrado se apaga */
.order--done .order-state{font-weight:400;color:var(--ink)}
.order--done .order-total{color:var(--mute)}
.order-body,.order-total{align-self:baseline}
.order-body{flex:1;min-width:0}
.order-date{font:400 15px/1.4 var(--sans);color:var(--mute);margin:0}
.order-state{font:500 16px/1.3 var(--sans);margin:0 0 8px}
.order-total{font:500 17px/1 var(--mono);white-space:nowrap}
.chev{flex:none;width:20px;height:20px;stroke:var(--mute);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- filas de acción ---------- */
.action{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;
  padding:8px 0;border-bottom:1px solid var(--line-in);font:400 15px/1.4 var(--sans);text-align:left}
.action .chev{transition:transform .18s ease}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
/* el que despliega apunta hacia abajo; el que navega se queda en > */
details>summary .chev{transform:rotate(90deg)}
details[open]>summary .chev{transform:rotate(270deg)}

/* ---------- saldo ---------- */
.balance-value{font:500 24px/1 var(--mono);margin:0 0 8px}
.balance-note{font:400 15px/1.4 var(--sans);color:var(--mute);margin:0 0 24px}
.balance .note--strong{margin:24px 0 4px}

/* ---------- compartir ficha ---------- */
.share-list{padding:8px 0 16px}
.share-item{display:flex;align-items:center;gap:16px;padding:8px 0}
.share-photo{flex:none;width:48px;height:48px}
.share-photo img{width:100%;height:100%;object-fit:contain}
.share-name{flex:1;min-width:0;font:400 15px/1.3 var(--sans)}

/* ---------- pantalla de estado ---------- */
.status{padding:0}
/* linea, no tinta: el acento oscuro de la pantalla es el boton */
.status-icon{width:48px;height:48px;margin:0 0 24px;stroke:var(--line-sel);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- portada de mockups ---------- */
.cover-hero{padding:48px var(--pad) 8px}
.cover-mark{width:240px;max-width:100%;height:auto}

/* la tarjeta agotada no vende: se apaga entera, no solo la foto */
.card:has(.card-stock--out) .card-name,
.card:has(.card-stock--out) .card-dose,
.card:has(.card-stock--out) .card-price-label,
.card:has(.card-stock--out) .card-math{color:var(--mute)}