/* Lectoprofeno — la caja del medicamento
   Tokens: el suelo (ground) cambia con el tema; la caja es un objeto físico
   y se mantiene clara en los dos temas, solo se atenúa de noche. */

:root{
  --ground:#E9EFEB;
  --ground-2:#DCE4DF;
  --ink:#141516;
  --ink-2:#4A4D50;
  --ink-3:#767B7E;
  --line:#C9D2CC;

  --box:#FFFFFF;
  --box-2:#F3F4F1;
  --box-ink:#141516;
  --box-ink-2:#4A4D50;
  --box-ink-3:#7A7F82;
  --box-line:#DCDFDA;

  --accent:#0B8A5B;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(11,138,91,.10);

  --lift:0 1px 0 rgba(20,21,22,.05), 0 18px 40px -26px rgba(20,21,22,.55);
  --bad:#B3261E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131517;
    --ground-2:#0E1012;
    --ink:#ECEDEA;
    --ink-2:#B5B9B6;
    --ink-3:#868B89;
    --line:#30353A;

    --box:#F1F0EA;
    --box-2:#E5E4DD;
    --box-ink:#161719;
    --box-ink-2:#4B4E51;
    --box-ink-3:#7B7F82;
    --box-line:#D0CFC7;

    --accent:#3DBD86;
    --accent-ink:#0B1A12;
    --accent-soft:rgba(61,189,134,.14);

    --lift:0 1px 0 rgba(0,0,0,.4), 0 22px 44px -26px #000;
    --bad:#F2B8B5;
  }
}
:root[data-theme="dark"]{
  --ground:#131517;
  --ground-2:#0E1012;
  --ink:#ECEDEA;
  --ink-2:#B5B9B6;
  --ink-3:#868B89;
  --line:#30353A;

  --box:#F1F0EA;
  --box-2:#E5E4DD;
  --box-ink:#161719;
  --box-ink-2:#4B4E51;
  --box-ink-3:#7B7F82;
  --box-line:#D0CFC7;

  --accent:#3DBD86;
  --accent-ink:#0B1A12;
  --accent-soft:rgba(61,189,134,.14);

  --lift:0 1px 0 rgba(0,0,0,.4), 0 22px 44px -26px #000;
  --bad:#F2B8B5;
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
img{max-width:100%}
[hidden]{display:none!important}
button{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

.wrap{max-width:1180px;margin:0 auto;padding:36px 26px 64px;display:flex;flex-direction:column;gap:30px}

/* ---------- cabecera ---------- */
.cab{display:flex;flex-direction:column;gap:10px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.eyebrow{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.eyebrow span{color:var(--accent)}
h1{
  font-family:"Unbounded","Arial Black",sans-serif;font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.05;margin:0;letter-spacing:-.01em;text-wrap:balance;
}
h1 .mg{
  font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.38em;letter-spacing:.04em;
  color:var(--accent);vertical-align:.9em;margin-left:.25em;white-space:nowrap;
}
.tagline{
  margin:-2px 0 4px;font-family:"Unbounded",sans-serif;font-weight:500;font-size:clamp(.95rem,1.8vw,1.15rem);
  color:var(--ink-2);letter-spacing:.01em;
}
.lede{max-width:58ch;color:var(--ink-2);margin:0;font-size:15.5px}

/* ---------- escritorio ---------- */
.desk{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:34px;align-items:start}
.panel{display:flex;flex-direction:column;gap:26px}
.stage{display:flex;flex-direction:column;gap:18px;min-width:0}

.field-title{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;
}
.hint{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3);max-width:64ch}

/* estantería de ánimos: cada caja con su banda */
.moods{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mood{
  appearance:none;text-align:left;cursor:pointer;
  background:var(--ground-2);color:var(--ink);
  border:0;border-left:6px solid var(--banda);border-radius:3px;
  padding:9px 10px 9px 11px;display:flex;flex-direction:column;gap:2px;
  transition:background .15s ease,color .15s ease,transform .08s ease;
}
.mood b{font-size:13.5px;font-weight:600}
.mood i{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.35}
.mood:hover{background:var(--line)}
.mood:active{transform:translateY(1px)}
.mood[aria-pressed="true"]{background:var(--banda);color:var(--sobre)}
.mood[aria-pressed="true"] i{color:var(--sobre);opacity:.78}

.slider-ends{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--ink-3);margin-top:8px}
.slider-ends span:last-child{text-align:right}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;margin:0;height:24px;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--accent);border:3px solid var(--ground);margin-top:-9px;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--ground);
}

.doses{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dose{
  appearance:none;cursor:pointer;font-size:12.5px;
  background:var(--ground-2);color:var(--ink-2);border:0;border-radius:3px;
  padding:9px 10px;text-align:left;display:flex;flex-direction:column;gap:1px;
  transition:background .15s ease,color .15s ease;
}
.dose small{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3)}
.dose:hover{background:var(--line)}
.dose[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.dose[aria-pressed="true"] small{color:var(--accent-ink);opacity:.8}

.lenguas{display:flex;flex-wrap:wrap;gap:6px}
.lengua{
  appearance:none;cursor:pointer;font-size:12.5px;
  background:var(--ground-2);color:var(--ink-2);border:0;
  border-radius:999px;padding:6px 12px;transition:background .15s ease,color .15s ease;
}
.lengua:hover{background:var(--line)}
.lengua[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* ---------- la caja ---------- */
.caja{
  background:var(--box);color:var(--box-ink);
  border:1px solid var(--box-line);border-radius:5px;
  box-shadow:var(--lift);overflow:hidden;
}
.banda{
  background:var(--banda);color:var(--sobre);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 22px;
}
.banda-l{display:flex;flex-direction:column;gap:1px}
.indicado{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.82}
.banda-mood{font-family:"Unbounded",sans-serif;font-weight:500;font-size:14px;letter-spacing:.02em}
.braille{
  font-size:19px;letter-spacing:.06em;line-height:1;opacity:.85;
  font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",sans-serif;
}
.cn{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;opacity:.9}

.frente{padding:26px 22px 22px;display:flex;flex-direction:column;gap:14px;position:relative}
.marca h2{
  font-family:"Unbounded","Arial Black",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,3.4vw,2.3rem);line-height:1.08;margin:0;letter-spacing:.005em;text-wrap:balance;
  color:var(--box-ink);
}
.lab{margin:5px 0 0;font-size:14px;color:var(--box-ink-2);font-weight:500}
.lab span{color:var(--box-ink-3);font-weight:400}
.activo{
  margin:0;font-size:16px;font-weight:600;color:var(--box-ink);line-height:1.35;
  border-top:1px solid var(--box-line);padding-top:12px;
}
.activo span{
  display:block;margin-top:3px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  font-weight:400;color:var(--box-ink-3);
}
.frente-lat{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.lote{
  display:flex;gap:16px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--box-ink-3);font-variant-numeric:tabular-nums;
}
.lote b{font-weight:500;color:var(--box-ink-2)}
.efg{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--box-ink-2);
}
.efg b{
  font-family:"Unbounded",sans-serif;font-weight:700;font-size:12px;
  border:2px solid var(--box-ink);padding:2px 7px;border-radius:3px;color:var(--box-ink);
}
.sello{
  align-self:flex-start;border:2px solid var(--banda);color:var(--banda);
  padding:4px 10px 3px;transform:rotate(-3deg);text-align:center;opacity:.9;border-radius:2px;
}
.sello b{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.2}
.sello small{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em}

.nota-caja{
  margin:0;font-size:13px;line-height:1.5;color:var(--box-ink-2);
  border-left:3px solid var(--banda);padding-left:12px;
}
.nota-caja b{color:var(--box-ink);font-weight:600}

.compartir{display:flex;gap:8px;flex-wrap:wrap}
.cbtn{
  appearance:none;cursor:pointer;font-size:13px;font-weight:600;
  background:transparent;color:var(--box-ink);border:1px solid var(--box-ink);
  border-radius:4px;padding:9px 14px;transition:background .15s,color .15s;
}
.cbtn:hover{background:var(--box-ink);color:var(--box)}

.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--ground);padding:11px 16px;border-radius:6px;font-size:13.5px;
  z-index:40;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);max-width:min(92vw,560px);text-align:center;
}
.propina-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.propina{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;
  color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:8px 14px;transition:opacity .15s;
}
.propina:hover{opacity:.8}

/* prospecto: papel más fino, texto más pequeño, columnas */
.prospecto{
  background:var(--box-2);border-top:1px dashed var(--box-line);
  padding:20px 22px 24px;color:var(--box-ink-2);font-size:13px;line-height:1.5;
}
.prospecto-cab{
  margin:0;font-family:"Unbounded",sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--box-ink);
}
.prospecto-intro{margin:6px 0 16px;font-style:italic;color:var(--box-ink-3);max-width:70ch}
.prospecto-cols{columns:2;column-gap:28px}
.prospecto-cols section{break-inside:avoid;margin:0 0 14px}
.prospecto h3{
  margin:0 0 3px;font-size:13px;font-weight:600;color:var(--box-ink);
}
.prospecto p{margin:0;text-wrap:pretty}
.envase{border-top:1px solid var(--box-line);padding-top:14px;margin-top:4px}
.envase dl{
  margin:8px 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;
}
.envase dl div{display:flex;flex-direction:column;gap:2px;min-width:0}
.envase dt{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--box-ink-3)}
.envase dd{margin:0;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--box-ink);overflow-wrap:anywhere}
.dispensacion{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.comprar,.comprar-alt{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:600;font-size:14px;padding:12px 18px;border-radius:4px;transition:opacity .15s ease;
}
.comprar{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.comprar-alt{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.comprar:hover,.comprar-alt:hover{opacity:.82}
.envase .nota{font-size:12px;color:var(--box-ink-3);max-width:66ch}
.envase .nota b{color:var(--box-ink-2);font-weight:600}
.advertencia{
  margin:16px 0 0;background:var(--accent-soft);border-left:3px solid var(--accent);
  padding:10px 14px;font-size:13px;color:var(--box-ink);
}

/* ---------- anotar y acciones ---------- */
.anotar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--ground-2);border-radius:4px;padding:12px 16px;margin-top:-6px;
}
.anotar-lab{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.estados,.efecto{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.efecto > span{font-size:12.5px;color:var(--ink-3)}
.estados button,.efecto button,.filtros button{
  appearance:none;cursor:pointer;font-size:12.5px;
  background:var(--ground);color:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;transition:background .15s,color .15s,border-color .15s;
}
.estados button:hover,.efecto button:hover,.filtros button:hover{border-color:var(--accent)}
.estados button[aria-pressed="true"],.efecto button[aria-pressed="true"],.filtros button[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;
}

.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{
  appearance:none;cursor:pointer;font-size:13.5px;font-weight:600;
  border-radius:4px;padding:11px 16px;border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);transition:opacity .15s ease;
}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:hover{opacity:.85}
.contador{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- otros envases ---------- */
.otras h3,.cartilla-cab h3{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px;
}
.otras ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.otras li + li{border-top:1px solid var(--line)}
.slip{
  width:100%;appearance:none;background:transparent;border:0;cursor:pointer;
  color:var(--ink);text-align:left;padding:11px 4px 11px 0;display:grid;
  grid-template-columns:8px minmax(0,1fr) auto;gap:4px 14px;align-items:center;
}
.slip::before{content:"";grid-row:1/3;width:8px;height:100%;min-height:34px;border-radius:2px;background:var(--banda)}
.slip:hover .slip-t{color:var(--accent)}
.slip-t{font-size:14.5px;font-weight:500;grid-column:2}
.slip-a{font-size:12px;color:var(--ink-3);grid-column:2}
.slip-s{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);grid-column:3;grid-row:1/3;white-space:nowrap;text-align:right}

/* ---------- cartilla ---------- */
.cartilla{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:13px}
.cartilla-cab p{margin:0;font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cartilla-mandos{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtros button{padding:5px 12px}
.orden{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.orden select{
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--ink);background:var(--ground-2);border:1px solid var(--line);border-radius:4px;padding:7px 9px;cursor:pointer;
}
.cartilla-opt{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.cartilla-opt input{accent-color:var(--accent);width:16px;height:16px}
.cartilla-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cartilla-lista li{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;
  align-items:center;padding:11px 2px;border-top:1px solid var(--line);
}
.cartilla-lista li:first-child{border-top:0}
.cart-t{
  grid-column:1;appearance:none;background:transparent;border:0;padding:0;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--ink);text-align:left;
}
.cart-t:hover{color:var(--accent)}
.cart-m{grid-column:1;grid-row:2;font-size:11.5px;color:var(--ink-3)}
.cart-e{
  grid-row:1/3;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--ink-2);padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.cart-e.leido{border-color:var(--accent);color:var(--accent)}
.cart-x{
  grid-row:1/3;appearance:none;background:transparent;border:0;cursor:pointer;
  color:var(--ink-3);font-size:18px;line-height:1;padding:4px 6px;
}
.cart-x:hover{color:var(--accent)}
.cartilla-vacia{margin:0;font-size:13.5px;color:var(--ink-3);padding:6px 0;list-style:none}

footer{border-top:1px solid var(--line);padding-top:16px;color:var(--ink-3);font-size:12px;max-width:72ch}

/* ---------- táctil y móvil ---------- */
@media (pointer:coarse){
  .mood,.dose{min-height:48px}
  .slip{padding-top:14px;padding-bottom:14px}
  .estados button,.efecto button,.filtros button,.lengua{min-height:40px}
}
@media (max-width:880px){
  .wrap{padding:20px 16px 104px;gap:20px}
  .cab{padding-bottom:16px;gap:7px}
  .desk{grid-template-columns:1fr;gap:20px}
  .panel{gap:20px}
  .banda{padding:11px 16px}
  .braille{display:none}
  .frente{padding:20px 16px 18px}
  .prospecto{padding:18px 16px 20px}
  .prospecto-cols{columns:1}
  .dispensacion{flex-direction:column;align-items:stretch}
  .comprar,.comprar-alt{justify-content:center;padding:14px 18px}
  .anotar{padding:12px;gap:9px;margin-top:0}
  .cartilla-mandos{flex-direction:column;align-items:flex-start;gap:10px}
  .orden select{width:100%}
  .compartir{flex-direction:column}
  .cbtn{width:100%;padding:12px 14px}
  .toast{bottom:calc(100px + env(safe-area-inset-bottom))}
  .acciones{
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:var(--ground);border-top:1px solid var(--line);
    padding:9px 16px calc(10px + env(safe-area-inset-bottom));
    gap:8px;flex-wrap:wrap;align-items:center;
    box-shadow:0 -12px 26px -22px rgba(0,0,0,.75);
  }
  .acciones .btn{flex:1 1 0;padding:13px 12px;text-align:center;font-size:14px}
  .acciones .btn.ghost{flex:0 0 auto}
  .contador{order:-1;flex:1 0 100%;text-align:center;font-size:11px;letter-spacing:.04em}
}
@media (max-width:400px){
  .envase dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}