/* ============================================================
   BACK2PRIME · styles.css
   Capa propia sobre basecoat.min.css (cargado antes).
   Dark-first, mobile-first. Orden: fuentes → tokens → bridge →
   base → layout → componentes → vistas → overlays → responsive.
   ============================================================ */

/* ---------- Fuentes autoalojadas (offline en el gym) ---------- */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/BarlowCondensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/BarlowCondensed-700.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/PublicSans-400.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/PublicSans-600.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/PublicSans-700.woff2') format('woff2');}

/* ---------- Tokens BACK2PRIME ---------- */
:root{
  --bg:#0B0D10;
  --surface:#14171B;
  --surface2:#1B2027;
  --line:#272E38;
  --line-soft:#1F252E;
  /* Superficie de la barra inferior. Derivado midiendo contraste contra --bg:
     #14171B daba 1,08:1 (invisible en OLED, la barra parecía flotar) y #1B2027
     1,19:1. El ojo separa dos superficies planas grandes a partir de ~1,35:1,
     y este es el primer escalón que lo cruza. */
  --tabbar-bg:#242B35;   /* 1,36:1 vs --bg */
  --ink:#F2F4F0;
  --ink2:#A7AFB9;
  /* Derivado, no elegido: #6B7480 daba 3,46:1 sobre --surface2, que es el más
     claro de los tres fondos donde se usa. Subiendo SOLO la luminosidad HSL
     (tono 214,3° y saturación 8,9% intactos), 0,5358 es el primer valor que
     cruza 4,5:1 ahí. Resultado 5,35 / 4,94 / 4,50 sobre bg/surface/surface2,
     y conserva 1,78× de luminancia frente a --ink2: los dos niveles se siguen
     distinguiendo. */
  --ink3:#7E8793;
  --volt:#C8F24E;
  --volt-dim:#9DBF3B;
  --volt-ink:#10140A;
  --f1:#4CC07E; --f1-bg:rgba(76,192,126,.12);
  --f2:#E5B63E; --f2-bg:rgba(229,182,62,.12);
  --f3:#66A0E8; --f3-bg:rgba(102,160,232,.12);
  --f4:#E5685A; --f4-bg:rgba(229,104,90,.13);
  --ok:#4CC07E;
  --danger:#F07567;
  --r:14px;
  --r-sm:10px;
  /* Los tres roles tipográficos, en un solo sitio: estructura, prosa y datos.
     Cambiar la cara de cuerpo es cambiar --cuerpo y nada más. */
  --cuerpo:'Public Sans',system-ui,-apple-system,sans-serif;
  --disp:'Barlow Condensed',var(--cuerpo);
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;
  /* Liquid Glass (iOS 26): la barra es una píldora FLOTANTE de cristal sobre
     el contenido, no una franja pegada al borde. --tab-off la separa del borde
     físico: 12 px sin inset; con indicador de inicio (inset 34) queda a 28 px,
     librando el gesto de inicio. El contenido pasa por debajo y se ve a través
     del blur: ese es el efecto. */
  --tab-h:56px;
  --tab-off:max(12px,calc(env(safe-area-inset-bottom,0px) - 6px));
  --glass:rgba(29,35,43,.58);
  --glass-strong:rgba(21,25,31,.84);
  --glass-line:rgba(255,255,255,.09);
  --glass-hi:rgba(255,255,255,.12);
  --shadow:0 8px 28px rgba(0,0,0,.42);

  /* ---------- Movimiento ----------
     Las curvas de CSS de serie (ease, ease-out) son demasiado flojas para que
     el movimiento se sienta intencionado. Estas son las fuertes.
     Regla de elección: algo que ENTRA o SALE → --ease-sale (empieza rápido, se
     siente inmediato). Algo que se MUEVE por pantalla → --ease-mueve. La hoja
     inferior tiene la suya, que es la curva de iOS.
     --ease-muelle es el rebote de la burbuja de pestañas: el único sitio donde
     el sobreimpulso está justificado, porque es la firma del Liquid Glass. */
  --ease-sale:cubic-bezier(.23,1,.32,1);
  --ease-mueve:cubic-bezier(.77,0,.175,1);
  --ease-hoja:cubic-bezier(.32,.72,0,1);
  --ease-muelle:cubic-bezier(.3,1.45,.4,1);
  /* Presupuesto: la UI se queda por debajo de 300 ms. Más allá se percibe lenta
     aunque el reloj diga otra cosa. */
  --t-pulsar:140ms;   /* respuesta al pulsar */
  --t-corto:180ms;    /* chips, desplegables pequeños */
  --t-medio:240ms;    /* toast, cronómetro, burbuja */
  --t-hoja:260ms;     /* hoja inferior (ya estaba ajustada aquí, se conserva) */

  color-scheme:dark;
}

/* Aquí vivían 20 variables puente hacia los nombres de shadcn y un parche que
   neutralizaba el overflow:hidden de su .card. Al retirar Basecoat se comprobó
   que ninguna de las 20 se usaba en ningún fichero, y el parche pasó a ser un
   no-op. La única huella que queda de aquella convivencia es .b2-badge, que se
   llama así porque .badge chocaba. */

/* ---------- Base · layout unificado ----------
   El documento scrollea SIEMPRE (navegador e instalada): cabecera y barra son
   cristal fijo y el contenido pasa por debajo. En Safari, #view lleva un
   min-height calculado que deja el documento 2 px por encima de la pantalla
   para que su toolbar se repliegue también en las vistas cortas. La altura de
   la cabecera la mide app.js en --hdr-h. html.pwa queda solo como marcador
   para el diagnóstico. */
/* Reset. Sustituye a basecoat.min.css (213 KB), del que solo llegaban a
   aplicarse 17 reglas de 1.221: estas del reset, tres de .card y una de tokens
   que nadie usaba. El resto iba dentro de @layer, y el CSS sin capa —o sea todo
   este fichero— gana siempre a las capas, así que ni se aplicaba. Se copian con
   las variables ya resueltas. */
*,::before,::after,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;tab-size:4;line-height:1.5;scroll-behavior:smooth}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
button,input,select,optgroup,textarea{font:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:transparent;border-radius:0}
button,input:where([type="button"],[type="reset"],[type="submit"]){appearance:button}
[hidden]:where(:not([hidden="until-found"])){display:none!important}
body{overscroll-behavior:none}
body{
  margin:0;background:var(--bg);color:var(--ink);
  /* 16 y no 15: la x de Public Sans mide un 94,5% de la de Inter (52 vs 55
     medidos), así que al mismo px se leería un 5,5% más pequeña. 15 × 55/52 =
     15,87. Y 16 es además el suelo de cuerpo recomendado en web. */
  font:400 16px/1.5 var(--cuerpo);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--hdr-h,59px);
  padding-bottom:calc(var(--tab-h) + var(--tab-off) + 14px);
  overscroll-behavior-y:none;
}
#view{
  min-height:calc(100vh  - var(--hdr-h,59px) - var(--tab-h) - var(--tab-off) - 14px + 2px);
  min-height:calc(100lvh - var(--hdr-h,59px) - var(--tab-h) - var(--tab-off) - 14px + 2px);
}
/* .02em es el valor MEDIO de la rampa, no el único: el tracking es específico
   del tamaño. En versalitas condensadas el espaciado rescata a los cuerpos
   pequeños y afloja a los grandes, que ya se separan por su propio tamaño.
   La rampa va de .03em a 16 px hasta .005em a 31 px, y está declarada abajo
   en cada tamaño concreto. El interlineado hace el camino inverso: apretado
   arriba (.hero h1 a 1.02), holgado en el cuerpo. */
h1,h2,h3,.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;margin:0;font-weight:700}
h3{letter-spacing:.03em}
p{margin:.5em 0}
a{color:var(--volt)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mut{color:var(--ink2)}
.mini{font-size:13px;color:var(--ink2)}
button{font-family:inherit;-webkit-tap-highlight-color:transparent}
/* Piezas que se dibujan como bloques de contenido (fila de ejercicio, tarjeta
   de receta, artículo de la compra…) pero que son botones de verdad. El reset
   va AQUÍ ARRIBA a propósito: así las reglas de cada componente, que vienen
   después, mandan sobre el aspecto y no hay que repetir fondo ni borde. */
.plano{
  appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
/* Botón que ocupa toda su celda de tabla. Los 44 px son la zona táctil (HIG):
   la celda ya rondaba esa altura, así que crecer hasta ahí apenas mueve la fila. */
.celda-btn{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:44px}

/* Para el lector de pantalla, invisible para la vista. Lo usa el h1 de las
   vistas cuyo título visible es la propia pestaña activa. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.sr-only:focus{outline:none}
input,select,textarea{font-family:inherit;color:var(--ink)}
::selection{background:var(--volt);color:var(--volt-ink)}
:focus-visible{outline:2px solid var(--volt);outline-offset:2px;border-radius:4px}

/* ---------- Layout ---------- */
.wrap{max-width:640px;margin:0 auto;padding:0 16px}
#view{padding-top:8px}
section.block{margin:18px 0}

/* ---------- Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(11,13,16,.6);
  /* Mismo problema que la barra inferior: al hacer scroll, el botón volt pasa
     por debajo del cristal y el icono de Ajustes caía a 2,65:1. Un icono exige
     3:1 (WCAG 1.4.11) y eso se cumpliría con brightness(.91), pero deja 0,02 de
     margen. Con el umbral de texto (4,5:1) sale .635, que da margen real y no
     cuesta nada sobre el fondo normal: el icono pasa de 8,78:1 a 8,88:1. */
  -webkit-backdrop-filter:blur(20px) saturate(1.6) brightness(.635);
  backdrop-filter:blur(20px) saturate(1.6) brightness(.635);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-top:env(safe-area-inset-top,0px);
}
.hdr-in{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto;padding:10px 14px}
.brand{display:flex;align-items:baseline;gap:1px;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:.03em;user-select:none}
.brand .b2{color:var(--volt);font-size:24px;transform:translateY(1px)}
.hdr-sp{flex:1}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;white-space:nowrap;
}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.streak{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-weight:700;font-size:14px;color:var(--f2)}
/* Racha rota: la mejor marca no se esfuma, pasa a un chip apagado. */
.streak.best{color:var(--ink2)}
.streak.best #streakIco{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:transparent;border:1px solid transparent;color:var(--ink2);cursor:pointer;
}
.icon-btn:active{background:var(--surface2)}

/* ---------- Tab bar ---------- */
/* Píldora Liquid Glass: flota sobre el contenido, que se ve pasar a través
   del blur. La pestaña activa lleva su propia burbuja de cristal volt. */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:var(--tab-off);z-index:50;
  width:min(calc(100% - 24px),520px);
  border-radius:30px;
  background:var(--glass);
  /* brightness() acota el peor caso: el botón volt de cerrar el día pasa por
     debajo del cristal y la etiqueta inactiva caía a 1,77:1. Derivado: 0,375
     es el brillo máximo que aún cruza 4,5:1 con volt detrás (uso 0,37 por
     margen de redondeo). Sobre el fondo normal apenas se nota —#151A21 pasa a
     #12161C—, así que el efecto cristal se conserva: solo muerde cuando algo
     brillante pasa por debajo, que es justo cuando hace falta.
     Subir la opacidad en su lugar habría exigido .89 y matado el cristal. */
  -webkit-backdrop-filter:blur(22px) saturate(1.7) brightness(.37);
  backdrop-filter:blur(22px) saturate(1.7) brightness(.37);
  border:1px solid var(--glass-line);
  box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-hi);
}
.tabbar-in{display:flex;height:var(--tab-h);padding:0 6px}
/* Etiqueta inactiva #98A1AE: medido ≥4,6:1 sobre el cristal en el peor fondo
   de la app (lección de la v6: --ink3 caía a 3:1 y era ilegible a 10,5 px). */
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:0;color:#98A1AE;cursor:pointer;padding:0;position:relative;
}
.tab svg{width:21px;height:21px;stroke-width:1.9;position:relative}
.tab span{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;position:relative}
.tab.on{color:var(--volt)}
/* UNA sola burbuja de cristal que viaja entre pestañas (bezier con rebote =
   sensación de muelle). Durante el arrastre se pega al dedo sin transición. */
.tabbar{touch-action:none}   /* el gesto horizontal es nuestro, no del scroll */
.tab-bubble{
  position:absolute;top:7px;bottom:7px;left:0;width:0;border-radius:21px;pointer-events:none;
  background:rgba(200,242,78,.13);
  box-shadow:inset 0 0 0 1px rgba(200,242,78,.22),inset 0 1px 0 rgba(255,255,255,.08);
  /* transform, no left/width: animar propiedades de layout obliga al navegador
     a recalcular en cada fotograma. El muelle es el mismo, el coste no. */
  /* 260 y no 340: el muelle es el mismo —el rebote es la firma del Liquid
     Glass y se queda—, pero a 340 ms la burbuja seguía asentándose cuando ya
     estabas leyendo la vista nueva. La UI se queda por debajo de 300. */
  transition:transform var(--t-medio) var(--ease-muelle);
  will-change:transform;
}
.tabbar.dragging .tab-bubble{transition:none;background:rgba(200,242,78,.18)}

/* ---------- Tarjetas y cabeceras ---------- */
/* El flex en columna con 24 px de hueco, y el cuerpo a 14 px con su interlineado,
   NO eran decisiones propias: los ponía el componente .card de Basecoat y toda
   la app se dibujó encima. Al retirar Basecoat se hacen explícitos, que es donde
   debieron estar siempre. Los valores son los suyos exactos (--text-sm y
   --text-sm--line-height), verificados comparando la huella de las 5 vistas. */
.card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:15px 15px 13px;margin:12px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  display:flex;flex-direction:column;gap:24px;
  font-size:14px;line-height:calc(1.25/0.875);
}
.card.flat{background:transparent;border-style:dashed}
.card-title{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.card-title h2{font-size:19px}
.card-title .sub{font-size:13px;color:var(--ink2);letter-spacing:0;text-transform:none;font-family:var(--cuerpo);font-weight:400}
.sec-h{display:flex;align-items:baseline;gap:8px;margin:22px 2px 4px}
.sec-h h2{font-size:21px;letter-spacing:.014em}
.sec-h .mini{margin-left:auto}

/* Disco olímpico */
.disco{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:50%;border:5px solid;background:var(--bg);
  font-family:var(--mono);font-weight:700;font-size:11.5px;
}
.disco.d1{border-color:var(--f1);color:var(--f1)}
.disco.d2{border-color:var(--f2);color:var(--f2)}
.disco.d3{border-color:var(--f3);color:var(--f3)}
.disco.d4{border-color:var(--f4);color:var(--f4)}
.disco.big{width:64px;height:64px;border-width:9px;font-size:19px}
.disco.locked{border-color:var(--line);color:var(--ink3);background:var(--surface)}

/* ---------- HOY ---------- */
.hero{padding:18px 2px 2px}
.hero .fecha{font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.hero h1{font-size:31px;line-height:1.02;margin-top:2px;letter-spacing:.005em}
.hero .sub{color:var(--ink2);font-size:14px;margin-top:4px}
.hero .antes{color:var(--ink2)}
.banner{
  display:flex;gap:10px;align-items:flex-start;border-radius:var(--r);padding:12px 14px;margin:12px 0;
  background:var(--f3-bg);border:1px solid color-mix(in srgb,var(--f3) 35%,transparent);font-size:14px;
}
.banner b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.banner.warn{background:var(--f2-bg);border-color:color-mix(in srgb,var(--f2) 40%,transparent)}
.banner.hot{background:var(--f4-bg);border-color:color-mix(in srgb,var(--f4) 40%,transparent)}
.banner.ok{background:var(--f1-bg);border-color:color-mix(in srgb,var(--f1) 40%,transparent)}

/* fila de ejercicio */
.exrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.exrow:last-child{border-bottom:0}
.exrow .exmain{flex:1;min-width:0;cursor:pointer}
.exrow .exname{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:6px;min-height:44px}
.exrow .exname .info{color:var(--ink3);flex:0 0 auto}
.exrow .exmeta{display:flex;gap:8px;align-items:center;margin-top:3px;flex-wrap:wrap}
/* .dose ya NO es interactivo: era gemelo del temporizador, medía 36×20 y
   cambiaba la sesión siguiente sin avisar. Ahora es solo la etiqueta 3×8. */
.exrow .dose{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--ink2);background:var(--surface2);border-radius:6px;padding:2px 8px}
/* Semana de descarga: la dosis no es la de siempre, y tiene que notarse. */
.exrow .dose.descarga{color:var(--f2);background:var(--f2-bg)}
.exrow .rest{font-family:var(--mono);font-size:12px;color:var(--ink3);border:1px solid var(--line);border-radius:6px;padding:2px 9px;cursor:pointer;user-select:none;color:var(--ink2)}
.exrow .rest:active{background:var(--surface2)}
/* Reps completas o a medias: control propio y etiquetado, solo cuando el
   ejercicio está hecho. Decide el peso de la próxima sesión, así que se dice. */
.repchip{
  font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--f1);background:color-mix(in srgb,var(--f1) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--f1) 30%,transparent);
  border-radius:7px;padding:3px 9px;cursor:pointer;user-select:none;
}
.repchip.corto{color:var(--f2);background:color-mix(in srgb,var(--f2) 13%,transparent);border-color:color-mix(in srgb,var(--f2) 32%,transparent)}
.exrow .exnote{font-size:12.5px;color:var(--ink3);margin-top:2px}
.kgbox{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* 16px no es estética: por debajo, iOS hace zoom al enfocar el campo y te
   descoloca la pantalla en mitad de la serie. */
.kgbox input{
  width:60px;min-height:44px;text-align:center;font-family:var(--mono);font-weight:700;font-size:16px;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 2px;color:var(--ink);
}
.kgbox input::placeholder{color:var(--ink3);font-weight:400}
.kgbox .u{font-size:11px;color:var(--ink3);margin-left:-2px}
.checkbtn{
  width:44px;height:44px;border-radius:13px;flex:0 0 auto;cursor:pointer;
  border:1.5px solid var(--line);background:var(--surface2);color:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  /* Nada de `all`: es el control más pulsado de la app y `all` arrastra fuera
     de GPU cualquier propiedad que cambie. */
  transition:background-color var(--t-pulsar) var(--ease-sale),
             border-color var(--t-pulsar) var(--ease-sale),
             color var(--t-pulsar) var(--ease-sale),
             transform var(--t-pulsar) var(--ease-sale);
}
/* Marcar una serie es EL gesto de la sesión: tiene que responder al dedo. */
.checkbtn:active{transform:scale(.94)}
.checkbtn svg{width:20px;height:20px}
.checkbtn.on{background:var(--volt);border-color:var(--volt);color:var(--volt-ink)}
/* Tocable: escribe el peso sugerido como valor real en el campo. */
.sugg{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--volt);
  background:color-mix(in srgb,var(--volt) 12%,transparent);border:1px solid color-mix(in srgb,var(--volt) 26%,transparent);
  border-radius:7px;padding:3px 9px;cursor:pointer;user-select:none;
}
.sugg:active{background:color-mix(in srgb,var(--volt) 22%,transparent)}

/* hábitos */
.habits{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.habit{
  display:flex;align-items:center;gap:9px;background:var(--surface2);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:10px 11px;cursor:pointer;user-select:none;transition:border-color .15s;
}
.habit .hicon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink2);flex:0 0 auto}
.habit .hicon svg{width:17px;height:17px}
.habit .ht{font-size:13px;font-weight:600;line-height:1.3}
.habit .hs{font-size:12px;color:var(--ink3)}
.habit.on{border-color:var(--volt)}
.habit.on .hicon{background:var(--volt);color:var(--volt-ink)}
.habit.wide{grid-column:1/-1}
.habit input{
  width:76px;min-height:44px;margin-left:auto;text-align:center;font-family:var(--mono);font-weight:700;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 4px;font-size:16px;
}
.cerrar{
  width:100%;margin:16px 0 6px;padding:15px;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--volt);color:var(--volt-ink);
  font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 6px 22px color-mix(in srgb,var(--volt) 25%,transparent);
}
.cerrar:disabled{background:var(--surface2);color:var(--ink3);box-shadow:none}
/* Descargando idioma: el cursor lo dice y el borde marca cuál se está trayendo.
   Sin atenuar: el texto tiene que seguir leyéndose igual de bien. */
.langbtn[aria-busy="true"]{cursor:progress;border-color:var(--volt)}
.cerrar.hecho{background:var(--surface2);color:var(--f1);border:1px solid color-mix(in srgb,var(--f1) 40%,transparent)}
/* Por debajo del umbral el botón deja de vestirse de triunfo: no miente. */
.cerrar.flojo{background:var(--surface2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.cierre-nota{text-align:center;font-size:12.5px;color:var(--ink2);margin:18px 0 0}
.cierre-nota + .cerrar{margin-top:7px}
.reabrir{
  display:block;margin:2px auto 0;background:none;border:0;cursor:pointer;
  color:var(--ink2);font-size:12.5px;padding:10px 14px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);
}
.reabrir:active{color:var(--ink)}
.done-strip{display:flex;align-items:center;gap:8px;color:var(--f1);font-weight:600;font-size:14px}

/* colapsables */
details.fold{border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--surface2);margin:10px 0}
details.fold>summary{
  list-style:none;cursor:pointer;padding:11px 13px;min-height:44px;display:flex;align-items:center;gap:8px;
  font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;
}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);transition:transform .18s}
details.fold[open]>summary::after{transform:rotate(-135deg)}
details.fold .fold-in{padding:2px 13px 12px;font-size:14px}

/* ---------- Tablas ---------- */
.tw{overflow-x:auto;margin:10px 0;padding:4px 10px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:600;
  text-align:left;padding:9px 10px;color:var(--ink2);background:var(--surface2);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
/* 12px arriba y abajo: 51 celdas de estas tablas son pulsables y a 9px se
   quedaban en 38 de alto. De paso respiran. */
td{padding:13px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td.sr{font-family:var(--mono);font-weight:600;white-space:nowrap}
tr.now td{background:color-mix(in srgb,var(--volt) 7%,transparent)}

/* ---------- PLAN ---------- */
/* El color de fase es DATO (disco olímpico 10/15/20/25), no adorno — pero no
   necesita una pestaña de 5 px a la izquierda para decirlo. Va en el borde
   entero de la tarjeta: identifica igual y deja de ser el tópico visual. */
.fase-card{border-radius:var(--r)}
.fase-card.p1{border-color:color-mix(in srgb,var(--f1) 45%,transparent)}
.fase-card.p2{border-color:color-mix(in srgb,var(--f2) 45%,transparent)}
.fase-card.p3{border-color:color-mix(in srgb,var(--f3) 45%,transparent)}
.fase-card.p4{border-color:color-mix(in srgb,var(--f4) 45%,transparent)}
.fase-card.pn{border-color:color-mix(in srgb,var(--nutri) 45%,transparent)}
/* Bloque destacado en volt sin barra lateral. */
.destaca{border:1px solid color-mix(in srgb,var(--volt) 30%,transparent);background:color-mix(in srgb,var(--volt) 6%,transparent)}
.regla-g{display:grid;gap:9px}
.regla{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 13px;font-size:14px}
.regla b{display:block;font-family:var(--disp);letter-spacing:.02em;font-size:14.5px;margin-bottom:2px}
.exlib{display:flex;flex-direction:column}
.exlib .exrow .dose{background:var(--surface)}
.zona-h{font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:14px 2px 2px}

/* ---------- NUTRICIÓN ---------- */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rec-card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:12px 13px;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:104px;
}
.rec-card:active{background:var(--surface2)}
.rec-card .rtipo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-family:var(--disp);font-weight:600;color:var(--nutri,#B7A7E8)}
.rec-card h3{font-size:16.5px;line-height:1.1;letter-spacing:.01em}
.rec-card .rmacros{margin-top:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink2)}
.rec-card .rkcal{color:var(--ink);font-weight:700}
:root{--nutri:#B7A7E8}
.shoplist .habit{margin:0}
.shopcat{margin:14px 0 6px;font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.shopitem{display:flex;align-items:center;gap:10px;padding:8px 2px;min-height:44px;border-bottom:1px solid var(--line-soft);cursor:pointer;user-select:none}
.shopitem:last-child{border-bottom:0}
.shopitem .sq{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--ink2);flex:0 0 auto;min-width:74px}
.shopitem .si{font-size:14px}
.shopitem.on .si,.shopitem.on .sq{text-decoration:line-through;color:var(--ink3)}
.shopitem .tick{margin-left:auto;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:transparent}
.shopitem.on .tick{background:var(--volt);border-color:var(--volt);color:var(--volt-ink)}
.shopitem .tick svg{width:14px;height:14px}
.prep-step{display:flex;gap:11px;padding:9px 0;min-height:44px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.prep-step:last-child{border-bottom:0}
.prep-step .pmin{font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--nutri);flex:0 0 34px;padding-top:1px}
.prep-step .pt{font-size:14px;flex:1}
.prep-step.on .pt{color:var(--ink3);text-decoration:line-through}

/* ---------- PROGRESO ---------- */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}
.stat{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 12px}
.stat{min-width:0}
.stat .sl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-family:var(--disp);font-weight:600;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* nowrap + clamp: con 4 columnas en un móvil de 375 px, «190 g» y «205 g»
   partían en dos líneas y descuadraban la fila. */
.stat .sv{font-family:var(--mono);font-weight:700;font-size:clamp(15px,4.3vw,19px);margin-top:1px;white-space:nowrap}
.stat .sd{font-size:11px;color:var(--ink2)}
/* el desfase del menu: pie de la fila de cifras, no una cifra mas.
   Mismo peso que las etiquetas de arriba para que se lea despues. */
.obj-cifras{margin:6px 0 0}
.dmenu{font-size:11.5px;color:var(--ink3);margin:7px 2px 0;letter-spacing:.01em}
.stat .sv .up{color:var(--f1)} .stat .sv .down{color:var(--f4)}
.chart-card{padding-bottom:6px}
.chart-card svg{display:block;width:100%;height:auto}
.chart-wrap{position:relative}
.ctip{
  position:absolute;pointer-events:none;z-index:5;display:none;
  background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;
  font-size:12px;box-shadow:var(--shadow);white-space:nowrap;
}
.ctip .tv{font-family:var(--mono);font-weight:700}
.seg{display:inline-flex;background:var(--surface2);border:1px solid var(--line-soft);border-radius:999px;padding:3px;gap:2px;margin:2px 0 6px}
.seg button{
  border:0;background:transparent;color:var(--ink2);font-family:var(--disp);font-weight:600;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 13px;border-radius:999px;cursor:pointer;
}
.seg button.on{background:var(--volt);color:var(--volt-ink)}
/* Chips-ancla con scroll-spy (Comida, Progreso): saltan al bloque y se
   iluminan solas según lo que tienes delante */
.chipnav{
  position:sticky;top:calc(var(--hdr-h,59px) + 8px);z-index:30;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin:10px -14px 4px;padding:2px 14px 6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
}
.chipnav::-webkit-scrollbar{display:none}
.chipnav button{
  flex:0 0 auto;font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink2);background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:6px 13px;cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.chipnav button.on{background:var(--volt);color:var(--volt-ink);border-color:transparent}

/* Sub-secciones de PLAN: segmentado de cristal pegado bajo la cabecera */
.seg.seg-plan{
  position:sticky;top:calc(var(--hdr-h,59px) + 8px);z-index:30;
  display:flex;width:100%;margin:10px 0 4px;
  background:var(--glass);border-color:var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 6px 22px rgba(0,0,0,.35),inset 0 1px 0 var(--glass-hi);
}
.seg.seg-plan button{flex:1;padding:7px 4px;font-size:12.5px}

/* Comida del día (vista HOY) */
.meal-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.meal-row:last-of-type{border-bottom:0}
.meal-row .mi{font-size:17px;width:24px;text-align:center;flex:0 0 auto}
.meal-row .ml{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);width:74px;flex:0 0 auto}
.meal-row .mn{flex:1;min-width:0;font-weight:600;font-size:14px}
.meal-row .mk{font-family:var(--mono);font-size:11.5px;color:var(--ink2);flex:0 0 auto}
.meal-row.libre .mn{color:var(--volt)}
.tbl-toggle{font-size:12px;color:var(--ink2);background:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;margin-left:auto}

/* ---------- LOGROS ---------- */
/* minmax(0,1fr): con `1fr` a secas el mínimo es min-content, así que un disco
   de 64 px ensanchaba su columna y los 4 discos salían descuadrados (68/68/74/74). */
.vitrina{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.vslot{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px 11px;min-width:0;
}
.vslot .vdisc{width:60px;height:60px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vslot .vdisc svg{width:60px;height:60px}
.vslot .vn{font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:center}
.vslot.won{border-color:color-mix(in srgb,var(--volt) 35%,transparent)}
.disco.big{width:60px;height:60px;border-width:8px;font-size:17px}

/* min(100%,150px) evita que la columna exija 150 px en pantallas estrechas.
   Sin min-height: la caja crece con su contenido, así el texto nunca se sale
   (en iOS los emoji de Apple son más altos que su caja y con line-height:1
   pisaban la línea siguiente). */
/* OJO: la clase se llama .b2-badge, NO .badge. Basecoat define su propio
   .badge (pill horizontal) y aunque el mío gana en display/flex-direction por
   orden de carga, le colaba `white-space:nowrap` y `width:fit-content` —
   propiedades que yo no declaraba — y la caja crecía hasta 327 px pisando a su
   vecina de rejilla. Renombrar es más barato que perseguir cada propiedad. */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px;align-items:stretch}
.b2-badge{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-width:0;width:auto;white-space:normal;overflow:hidden;
}
.b2-badge .bi{font-size:20px;line-height:1.25;height:1.25em;display:block;flex:0 0 auto}
.b2-badge .bn{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;line-height:1.15;overflow-wrap:anywhere}
.b2-badge .bd{font-size:11.5px;color:var(--ink2);line-height:1.35;overflow-wrap:anywhere}
.b2-badge .bwhen{font-family:var(--mono);font-size:11px;color:var(--volt-dim);margin-top:auto;padding-top:4px}
/* La opacidad atenúa texto Y fondo a la vez, así que el contraste se hunde:
   a .42 la descripción quedaba en 2,36:1. Derivado: .70 es el mínimo con el
   que --ink2 sobre --surface vuelve a 4,5:1. Lo que de verdad dice "bloqueado"
   es el emoji en gris, no el atenuado, así que se refuerza la desaturación. */
.b2-badge.locked{opacity:.70;filter:saturate(.1)}

/* ---------- Sheet (bottom sheet) ---------- */
.sheet-bg{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);opacity:0;transition:opacity var(--t-corto) var(--ease-sale);backdrop-filter:blur(2px)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:81;max-height:86dvh;overflow-y:auto;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  border-radius:22px 22px 0 0;border-top:1px solid var(--glass-line);
  box-shadow:0 -14px 44px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-hi);
  transform:translateY(102%);transition:transform var(--t-hoja) var(--ease-hoja);
  padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));
  max-width:640px;margin:0 auto;
  /* none, no contain: el rebote elástico de iOS al llegar arriba competía con
     el arrastre-para-cerrar y el gesto salía a trompicones. */
  overscroll-behavior:none;touch-action:pan-y;
}
.sheet-open .sheet{transform:translateY(0)}
.sheet-open .sheet-bg{opacity:1}
/* Tirador: zona de agarre real de 26 px de alto (la barrita sola son 4 px,
   imposible de coger con el pulgar), centrada con un pseudo-elemento. */
.sheet .grip{
  /* Es a la vez tirador de arrastre y botón de cerrar. 44 px de zona táctil
     (HIG) con márgenes negativos: ocupa los mismos 30 px de flujo que antes,
     así que el diseño no se mueve. */
  display:block;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;
  position:relative;height:44px;margin:-12px auto -2px;width:100%;max-width:200px;
  cursor:grab;touch-action:none;
}
.sheet .grip::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);
}
.sheet .grip:active{cursor:grabbing}
.sheet h2{font-size:22px;margin-bottom:2px;letter-spacing:.014em}
.sheet .stag{font-size:12px;color:var(--ink2);margin-bottom:10px}
.sheet h4{font-family:var(--disp);text-transform:uppercase;letter-spacing:.07em;font-size:13.5px;color:var(--ink2);margin:15px 0 5px}
.sheet ul{margin:4px 0;padding-left:19px;font-size:14px}
.sheet li{margin:4px 0}
.sheet .alt{background:var(--surface2);border-radius:var(--r-sm);padding:9px 11px;margin:6px 0;font-size:13px}
.sheet .alt b{font-weight:600}
.sheet .mol{border:1px solid color-mix(in srgb,var(--f2) 34%,transparent);padding:9px 11px;background:var(--f2-bg);border-radius:var(--r-sm);font-size:13px;margin:8px 0}

/* ---------- Timer flotante ---------- */
/* ---------- Zona táctil mínima (44 px, HIG) ----------
   Donde engordar la caja rompería el ritmo visual, se expande SOLO el área de
   toque con un pseudo-elemento: el chip sigue midiendo 24 px, el dedo golpea 44.
   Se expande en vertical, nunca en horizontal, para que dos controles vecinos
   no se roben el toque. */
.exrow .rest,.sugg,.repchip,.seg button,.chipnav button,.tbl-toggle,.reabrir{position:relative}
.exrow .rest::after,.sugg::after,.repchip::after,.seg button::after,
.chipnav button::after,.tbl-toggle::after,.reabrir::after{
  content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:44px;pointer-events:auto;
}
/* La fila de chips scrollea en horizontal, así que necesita hueco propio o
   recortaría el área de toque que acabamos de dar. */
.chipnav{padding-top:6px;padding-bottom:10px}

.timer{
  position:fixed;z-index:85;left:50%;transform:translateX(-50%) translateY(20px);
  bottom:calc(var(--tab-h) + var(--tab-off) + 20px);
  display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  padding:8px 9px 8px 16px;box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);
  /* `all` intentaba transicionar también el backdrop-filter de 20 px: caro,
     fuera de GPU y justo mientras estás a mitad de serie. Solo lo que se mueve. */
  transition:opacity var(--t-medio) var(--ease-sale),transform var(--t-medio) var(--ease-sale);
}
.timer.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.timer .tt{font-family:var(--mono);font-weight:700;font-size:19px;min-width:56px}
.timer.fin{border-color:var(--volt)}
.timer.fin .tt{color:var(--volt)}
.timer button{
  border:0;background:var(--surface);color:var(--ink2);border-radius:999px;
  min-height:44px;min-width:44px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;
}
.timer button:active{background:var(--surface2);color:var(--ink)}

/* ---------- CUESTIONARIO: pasos de datos ---------- */
.cuest-bar{height:3px;background:var(--surface2);border-radius:2px;margin:8px 0 16px;overflow:hidden}
.cuest-bar i{display:block;height:100%;width:100%;background:var(--volt);border-radius:2px;transform-origin:left;transition:transform var(--t-medio) var(--ease-sale)}
.cuest-t{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.01em;text-transform:uppercase;line-height:1.08;margin:6px 0 2px}
.cuest-p{color:var(--ink2);font-size:14px;margin:4px 0 10px}
.cuest-ops{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.cuest-ops.fila{flex-direction:row;flex-wrap:wrap}
.copt{
  min-height:56px;padding:14px 16px;border-radius:var(--r-sm);text-align:left;
  font-size:15px;font-weight:600;cursor:pointer;color:var(--ink);
  background:var(--surface2);border:1px solid var(--line-soft);
  transition:transform var(--t-pulsar) var(--ease-sale),
             border-color var(--t-pulsar) var(--ease-sale),
             background-color var(--t-pulsar) var(--ease-sale);
}
.cuest-ops.fila .copt{flex:1;min-width:52px;text-align:center;padding:14px 6px}
.copt:active{transform:scale(.97)}
.copt.on{border-color:var(--volt);background:color-mix(in srgb,var(--volt) 10%,var(--surface2))}
.cuest-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.cnum label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:6px}
.cnum input{
  width:100%;min-height:52px;text-align:center;font-family:var(--mono);font-weight:700;font-size:18px;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;
}
.cuest-pie{display:flex;gap:14px;justify-content:space-between;align-items:center;margin-top:22px}
.cuest-pie .btn-b2p{flex:1;max-width:70%}
.cres{font-size:14px;padding:2px 0;border-bottom:1px solid var(--line-soft)}
.cres:last-child{border-bottom:0}

/* ---------- Enlace a la tecnica en YouTube ---------- */
.yt-link{
  display:flex;align-items:center;gap:11px;min-height:48px;margin-top:14px;
  padding:10px 14px;border-radius:var(--r-sm);text-decoration:none;
  background:var(--surface2);border:1px solid var(--line-soft);color:var(--ink);
  font-size:14px;font-weight:600;
  transition:transform var(--t-pulsar) var(--ease-sale),border-color var(--t-pulsar) var(--ease-sale);
}
.yt-link:active{transform:scale(.97);border-color:#FF0033}
.yt-ico{display:inline-flex;flex:0 0 auto}
.yt-ico svg{width:29px;height:20px;display:block}

/* ---------- Pictograma de patron de movimiento ---------- */
.pat-fila{display:flex;align-items:center;gap:10px;margin:2px auto 8px;justify-content:center}
.pat-ico{display:inline-flex;width:44px;height:44px;border-radius:12px;background:var(--surface2);border:1px solid var(--line-soft);align-items:center;justify-content:center}
.pat-img{width:44px;height:44px;object-fit:contain}
.pat-ico svg{width:38px;height:38px;display:block}
.pat-txt{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.pt-s{fill:var(--ink);stroke:none}
.pt-v{fill:none;stroke:var(--volt);stroke-linecap:round;stroke-linejoin:round}
.pt-vd{fill:var(--volt);stroke:none}
.pt-suelo{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.6;stroke-linecap:round}
.pt-f{fill:none;stroke:var(--volt);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.9}

/* ---------- La barra del plan + anillos ---------- */
.bp-card{padding-bottom:8px}
.bp svg{display:block;width:100%;height:auto}
.bp-barra{fill:#3A4250}
.bp-tope{fill:#4A5364}
.bp-aro{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.16);stroke-width:1.5}
.bp-disco.lleno .bp-aro{stroke:none}
.bp-disco.f1.lleno .bp-aro{fill:var(--f1)} .bp-disco.f2.lleno .bp-aro{fill:var(--f2)}
.bp-disco.f3.lleno .bp-aro{fill:var(--f3)} .bp-disco.f4.lleno .bp-aro{fill:var(--f4)}
.bp-disco.activo .bp-aro{stroke:var(--volt);stroke-dasharray:4 3}
.bp-disco.f1 .bp-lleno{fill:var(--f1)} .bp-disco.f2 .bp-lleno{fill:var(--f2)}
.bp-disco.f3 .bp-lleno{fill:var(--f3)} .bp-disco.f4 .bp-lleno{fill:var(--f4)}
.bp-disco.futuro .bp-aro{stroke-dasharray:2 4;stroke:rgba(255,255,255,.22)}
.an-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.an{position:relative;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:4px}
.an-svg{position:relative;width:76px;height:76px}
.an-svg svg{width:76px;height:76px;display:block}
.an-fondo{fill:none;stroke:var(--surface2);stroke-width:7}
.an-arco{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dasharray .6s var(--ease-sale)}
.an-volt{stroke:var(--volt)} .an-f1{stroke:var(--f1)} .an-f3{stroke:var(--f3)}
.an-centro{position:absolute;top:38px;left:0;right:0;transform:translateY(-50%);text-align:center;font-weight:700;font-size:15px}
.an-l{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}

/* ---------- Fotos de platos ----------
   Siempre con width/height declarados: el hueco se reserva antes de que
   llegue la imagen y nada salta (CLS). aspect-ratio 1 porque son cuadradas. */
.rec-card.con-foto{padding:0;overflow:hidden;min-height:0}
.rec-card .rfoto{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--surface2)}
.rec-card.con-foto .rtipo{margin:10px 13px 0}
.rec-card.con-foto h3{margin:2px 13px 0}
.rec-card.con-foto .rmacros{margin:auto 13px 12px}
.sheet .rhero{display:block;width:calc(100% + 32px);margin:-8px -16px 12px;aspect-ratio:1;max-height:260px;object-fit:cover;border-radius:22px 22px 0 0;background:var(--surface2)}
.meal-row .mfoto{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--surface2)}

/* ---------- Mapa muscular ----------
   Silueta apagada, regiones en volt. El resplandor solo en la ficha: a 40 px
   de alto un drop-shadow no aporta y cuesta en cada fila. */
.mapa svg{display:block;width:100%;max-width:250px;height:auto;margin:10px auto 2px}
.mapa .mm-base{fill:var(--surface2);stroke:rgba(255,255,255,.12);stroke-width:1;stroke-linejoin:round}
/* líneas de anatomía (clavículas, rótulas, tableta): solo trazo, y solo a tamaño ficha */
.mapa .mm-linea *{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.9;stroke-linecap:round}
.mapa-mini .mm-linea{display:none}
.mapa .mm-p *,.mapa .mm-s *,.mapa .mm-r *{stroke:none}
.mapa .mm-p .mm-linea *,.mapa .mm-s .mm-linea *{stroke:rgba(16,20,10,.35)}
.mapa .mm-r,.mapa-mini .mm-r{fill:rgba(255,255,255,.07)}
.mapa .mm-p{fill:var(--volt);fill-opacity:.92;filter:drop-shadow(0 0 6px rgba(200,242,78,.45))}
.mapa .mm-s{fill:var(--volt);fill-opacity:.36}
.mapa-mini{display:inline-block;flex:0 0 auto;width:40px;height:42px;margin-right:9px;vertical-align:middle}
.mapa-mini svg{width:40px;height:42px;display:block}
.mapa-mini .mm-base{fill:var(--surface);stroke:rgba(255,255,255,.08);stroke-width:1.5}
.mapa-mini .mm-p{fill:var(--volt);fill-opacity:.95}
.mapa-mini .mm-s{fill:var(--volt);fill-opacity:.4}
/* en la carta del mazo va grande, sin resplandor (es cristal encima de cristal) */
.mapa-carta svg{width:150px;height:auto;margin:2px auto 6px}
.mapa-carta .mm-p{filter:none}

/* ---------- QUIZ: mazo de gustos (prototipo Fase 1) ---------- */
.quiz-zona{position:relative;height:min(56dvh,430px);margin:14px 0}
.qcard{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:22px;
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
}
.qcard:active{cursor:grabbing}
.qcard.detras{transform:scale(.95) translateY(12px);opacity:.7;pointer-events:none}
.qcard.detras2{transform:scale(.9) translateY(24px);opacity:.35;pointer-events:none}
.qcard .qn{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:.005em;text-transform:uppercase;text-align:center;line-height:1.05;padding:0 18px}
.qcard .qz{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.qcard .qsi,.qcard .qno{
  position:absolute;top:18px;font-family:var(--disp);font-weight:700;font-size:21px;text-transform:uppercase;
  letter-spacing:.05em;padding:3px 12px;border:2.5px solid;border-radius:10px;opacity:0;pointer-events:none;
  transition:opacity 140ms var(--ease-sale);   /* fundido al soltar; el arrastre lo anula en JS */
}
/* Chip de categoria: el color dice el bloque sin leer */
.qcard .qcat{
  font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 11px;border-radius:999px;border:1px solid;margin-bottom:2px;
}
.qcard .qcat-ej{color:var(--volt);border-color:color-mix(in srgb,var(--volt) 45%,transparent);background:color-mix(in srgb,var(--volt) 9%,transparent)}
.qcard .qcat-dep{color:var(--f3);border-color:color-mix(in srgb,var(--f3) 45%,transparent);background:color-mix(in srgb,var(--f3) 10%,transparent)}
.qcard .qcat-com{color:#B7A7E8;border-color:rgba(183,167,232,.45);background:rgba(183,167,232,.1)}
.qcard .qsi{left:16px;color:var(--volt);border-color:var(--volt);transform:rotate(-8deg)}
.qcard .qno{right:16px;color:var(--danger);border-color:var(--danger);transform:rotate(8deg)}
.quiz-botones{display:flex;gap:18px;justify-content:center;margin-top:16px}
/* Mismo peso visual para las dos decisiones: en un mazo de gustos ninguna es
   "la primaria". El color dice cual es cual; el relleno llega AL PULSAR, que
   es cuando la eleccion existe. */
.qbtn{
  width:60px;height:60px;min-width:60px;min-height:60px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;line-height:1;cursor:pointer;
  background:var(--surface2);border:1.5px solid var(--line);
  transition:transform var(--t-pulsar) var(--ease-sale),
             background-color var(--t-pulsar) var(--ease-sale),
             color var(--t-pulsar) var(--ease-sale);
}
.qbtn.si{color:var(--volt);border-color:color-mix(in srgb,var(--volt) 55%,transparent)}
.qbtn.no{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.qbtn:active{transform:scale(.9)}
.qbtn.si:active{background:var(--volt);color:var(--volt-ink)}
.qbtn.no:active{background:color-mix(in srgb,var(--danger) 20%,var(--surface2))}
.quiz-aux{display:flex;gap:22px;justify-content:center;margin-top:12px}
/* acciones secundarias (atrás, deshacer, saltar, cerrar…): la misma pastilla
   volt del chip de añadir dato — una sola voz para todo lo auxiliar */
.qaux{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 14px;
  border-radius:999px;font-size:12px;font-weight:700;font-family:var(--disp);letter-spacing:.05em;text-transform:uppercase;
  color:var(--volt);background:color-mix(in srgb,var(--volt) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--volt) 30%,transparent);text-decoration:none;
  transition:transform var(--t-pulsar) var(--ease-sale),background var(--t-pulsar) var(--ease-sale)}
.qaux:active{transform:scale(.94);background:color-mix(in srgb,var(--volt) 20%,transparent)}

/* Versión nueva esperando: píldora persistente sobre la barra, al alcance del
   pulgar. Es un botón de verdad (44 px) y no caduca sola: una actualización
   pendiente no es un aviso fugaz sino una acción disponible. z-index 79: por
   debajo del velo de la hoja (80), para que un panel abierto la tape. */
.updpill{
  position:fixed;left:50%;z-index:79;
  bottom:calc(var(--tab-h) + var(--tab-off) + 14px);
  transform:translateX(-50%) translateY(10px);opacity:0;
  min-height:44px;padding:10px 18px;border-radius:999px;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  font-size:13.5px;font-weight:600;box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);
  transition:opacity var(--t-medio) var(--ease-sale),transform var(--t-medio) var(--ease-sale);
}
.updpill.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* Si el cronómetro está en pantalla, la píldora sube un piso: comparten esquina */
.timer.on ~ .updpill{bottom:calc(var(--tab-h) + var(--tab-off) + 78px)}

/* ---------- Toast + celebración ---------- */
.toast{
  position:fixed;z-index:90;left:50%;transform:translateX(-50%) translateY(-8px);
  top:calc(env(safe-area-inset-top,0px) + 10px);opacity:0;pointer-events:none;
  transition:opacity var(--t-medio) var(--ease-sale),transform var(--t-medio) var(--ease-sale);
  background:var(--glass);border:1px solid var(--glass-line);border-radius:14px;padding:10px 16px;
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  font-size:14px;font-weight:600;box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);max-width:90vw;text-align:center;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.celebra-bg{position:fixed;inset:0;z-index:95;background:rgba(5,6,8,.82);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.celebra-bg.on{display:flex}
/* 450 ms se sale del presupuesto de UI a propósito: una celebración de logro se
   ve unas pocas veces en 12 semanas y ahí el presupuesto de fantasía aplica. */
.celebra{text-align:center;padding:30px 24px;animation:pop .45s var(--ease-muelle)}
.celebra .ci{font-size:64px;line-height:1;margin-bottom:10px}
.celebra .cn{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:.005em;text-transform:uppercase;color:var(--volt)}
.celebra .cd{color:var(--ink2);max-width:300px;margin:8px auto 0}
.celebra .cok{margin-top:22px;background:var(--volt);color:var(--volt-ink);border:0;border-radius:999px;padding:11px 30px;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
#confetti{position:fixed;inset:0;z-index:96;pointer-events:none}

/* ---------- Selector de idioma ---------- */
.langrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:4px 0 8px}
.langbtn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 2px 7px;cursor:pointer;color:var(--ink2);min-width:0;
}
.langbtn .lf{font-size:21px;line-height:1}
.langbtn .ln{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.langbtn.on{border-color:var(--volt);color:var(--volt);background:color-mix(in srgb,var(--volt) 9%,var(--surface2))}

/* ---------- Onboarding / ajustes ---------- */
.field{margin:12px 0}
.field label{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--ink2);margin-bottom:5px}
.field input{
  width:100%;min-height:44px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px;font-size:16px;font-family:var(--mono);font-weight:600;
}
.btnrow{display:flex;gap:9px;margin-top:14px}
.btn-b2p{
  flex:1;padding:13px;border:0;border-radius:var(--r-sm);cursor:pointer;font-weight:700;font-size:14.5px;
  background:var(--volt);color:var(--volt-ink);
}
.btn-ghost{flex:1;padding:13px;border-radius:var(--r-sm);cursor:pointer;font-weight:600;font-size:14px;background:var(--surface2);color:var(--ink);border:1px solid var(--line)}

/* ---------- Responsive ---------- */
/* ---------- Respuesta al pulsar ----------
   Un control que no acusa el dedo se siente muerto. La escala va al revés que
   el tamaño: 0,94 en un botón de 44 px se nota justo; ese mismo 0,94 en una
   tarjeta ancha sería aparatoso, así que ahí baja a 0,985.
   Va aquí abajo, después de los componentes, para no pisar sus transiciones. */
.icon-btn,.exrow .rest,.sugg,.repchip,.rec-card,.cerrar,.btn-b2p,.btn-ghost,
.langbtn,.reabrir,.tbl-toggle,.celebra .cok{
  transition:transform var(--t-pulsar) var(--ease-sale);
}
.icon-btn:active,.exrow .rest:active,.sugg:active,.repchip:active{transform:scale(.94)}
.cerrar:active,.btn-b2p:active,.btn-ghost:active,.langbtn:active,
.reabrir:active,.tbl-toggle:active,.celebra .cok:active{transform:scale(.97)}
.rec-card:active{transform:scale(.985)}

@media(min-width:700px){
  .wrap,.hdr-in,.tabbar-in{max-width:760px}
  .sheet{max-width:760px;border-radius:20px 20px 0 0}
  .habits{grid-template-columns:repeat(4,1fr)}
  .habit.wide{grid-column:span 2}
  .rec-grid{grid-template-columns:repeat(3,1fr)}
  .statrow{grid-template-columns:repeat(6,1fr)}
  .vitrina{max-width:520px}
  body{font-size:15.5px}
  /* Medida de línea, no ancho de contenedor: las tablas, las gráficas y las
     rejillas SÍ quieren todo el ancho, así que el tope va sobre la prosa.
     57ch está derivado: 1ch (el glifo «0» de Public Sans) mide 8,57 px a 14 px,
     pero el ancho MEDIO del texto real de la app —con espacios y tildes— es
     6,55 px. Para que quepan los 75 caracteres del límite alto del rango
     cómodo hacen falta 75 × 6,55 / 8,57 = 57,3ch; a 13 px sale 56,1, así que un
     solo valor vale para los dos tamaños. En escritorio se leían 118–135. */
  .wrap p,.wrap li,.wrap .regla{max-width:57ch}
}
@media(min-width:1100px){
  .wrap,.hdr-in,.tabbar-in{max-width:860px}
}
@media(prefers-reduced-motion:reduce){
  /* Movimiento reducido significa MENOS y más suave, no cero. El `*{transition:
     none}` que había antes también mataba las transiciones de opacidad, que son
     justo las que ayudan a entender qué acaba de cambiar: la hoja aparecía de
     golpe, el toast surgía sin previo aviso. Se conserva el desvanecido y se
     elimina lo que de verdad marea: el desplazamiento, la escala y el rebote. */
  *{animation-duration:.01ms !important;animation-delay:0ms !important}
  .tab-bubble,.sheet,.timer,.toast,.updpill,.sheet-bg{
    transition-property:opacity !important;
    transition-duration:var(--t-corto) !important;
    transition-timing-function:var(--ease-sale) !important;
  }
  .icon-btn:active,.exrow .rest:active,.sugg:active,.repchip:active,
  .cerrar:active,.btn-b2p:active,.btn-ghost:active,.langbtn:active,
  .reabrir:active,.tbl-toggle:active,.rec-card:active,.checkbtn:active,
  .celebra .cok:active{transform:none}
}

/* Superficies sólidas: mismos tonos derivados en v6, para los dos casos en que
   el cristal no debe existir. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .tabbar{background:var(--tabbar-bg)}
  .hdr{background:var(--bg)}
  .sheet{background:#161A20}
  .qcard{background:#161A20}
  .timer,.toast,.updpill,.seg.seg-plan,.chipnav button{background:var(--surface2)}
}
/* Esta app es cristal de arriba abajo. Quien activa «reducir transparencia» no
   está pidiendo otro estilo: está pidiendo poder leer. El sistema lo señala y
   hasta ahora no lo escuchábamos: solo se atendía la ausencia de soporte, que
   es un caso técnico, no una preferencia. */
@media(prefers-reduced-transparency:reduce){
  .tabbar{background:var(--tabbar-bg)}
  .hdr{background:var(--bg)}
  .sheet{background:#161A20}
  .qcard{background:#161A20}
  .timer,.toast,.updpill,.seg.seg-plan,.chipnav button{background:var(--surface2)}
  .tabbar,.hdr,.sheet,.timer,.toast,.updpill,.seg.seg-plan,.chipnav button,.sheet-bg{
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .sheet-bg{background:rgba(0,0,0,.72)}   /* sin blur, el velo hace el trabajo */
}
/* Contraste alto: las superficies flotantes necesitan un borde que las separe
   de verdad del contenido, no la insinuación al 9% que basta con cristal. */
@media(prefers-contrast:more){
  .tabbar,.hdr,.sheet,.timer,.toast,.updpill{border-color:var(--ink2)}
  .card,.b2-badge,.habit,.shopitem,.prep-step,.meal-row{border-color:var(--line)}
  .b2-badge.locked{opacity:1;filter:saturate(.1)}
}

.cres-l{color:var(--ink3);font-size:11px;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-right:7px}

.perfil-hero{gap:2px}
.ph-nombre{font-family:var(--disp);font-weight:700;font-size:27px;letter-spacing:.02em}

/* chip de anyadir dato: la paleta volt de los chips de sugerencia, en pastilla */
.addchip{display:inline-flex;align-items:center;margin-left:8px;padding:5px 12px;min-height:30px;
  border-radius:999px;font-size:12px;font-weight:700;font-family:var(--disp);letter-spacing:.05em;text-transform:uppercase;
  color:var(--volt);background:color-mix(in srgb,var(--volt) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--volt) 30%,transparent);
  transition:transform var(--t-pulsar) var(--ease-sale),background var(--t-pulsar) var(--ease-sale)}
.addchip:active{transform:scale(.94);background:color-mix(in srgb,var(--volt) 20%,transparent)}

/* imagenes de las cartas del mazo */
.qcard .qimg{width:min(58%,168px);aspect-ratio:1;object-fit:contain;margin:2px auto 6px;display:block}
.qcard .qemoji{font-size:64px;line-height:1.25;margin:6px 0 2px}

/* burbuja flotante de busqueda: cristal de la casa, sobre el contenido y bajo las hojas */
.fab{position:fixed;right:14px;bottom:calc(var(--tab-off) + var(--tab-h) + 14px);z-index:45;
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:color-mix(in srgb,var(--surface) 76%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-soft);box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform var(--t-pulsar) var(--ease-sale)}
.fab:active{transform:scale(.9)}
body.onb .fab{display:none}
.bsq-res{margin-top:10px;min-height:120px}

.ico{display:inline-flex;vertical-align:-3px;line-height:0}
summary .ico,.hicon .ico{vertical-align:middle}

/* cierre del mazo: la ultima carta es un cierre, no otra carta */
.qcard .btn-b2p{flex:0 0 auto}
.qfin{justify-content:center;gap:12px}
.qfin-ico{color:var(--volt);display:flex;justify-content:center}
.qfin-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:280px;margin:0 auto}
.qfin-cta{width:100%;max-width:280px;margin:6px auto 0}

/* fila del resumen tocable: se lee igual, pero lleva a su paso */
.cres-btn{display:flex;align-items:center;gap:2px;width:100%;text-align:left;min-height:38px;color:var(--ink)}
.cres-btn:active{opacity:.7}

/* lo que descartaste sigue consultable, pero se dice que no está en tu plan */
.exrow.fuera .exname{opacity:.62}
.exrow .fuera-tag{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);border:1px solid var(--line-soft);border-radius:999px;padding:2px 8px;white-space:nowrap}

/* ---------- Puerta de entrada: alta, reveal, pausa médica y tour ----------
   Durante el alta/cuestionario/reveal la app no tiene barra: no hay a dónde
   ir hasta que existe un plan. La cabecera se queda (la marca saluda). */
body.onb .tabbar,body.onb #btnAjustes,body.onb .chip,body.onb .streak{display:none}
body.onb{padding-bottom:24px}
body.onb #view{min-height:calc(100vh - var(--hdr-h,59px) - 24px)}

.alta{min-height:72vh;max-width:430px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding-top:8px}
/* .btn-b2p trae flex:1 para repartirse en filas; en esta columna con hueco
   (min-height) eso lo convertía en un botón a pantalla completa */
.alta .btn-b2p,.alta .btn-ghost,.rev .btn-b2p{flex:0 0 auto}
/* el nombre es prosa, no un número: fuera la monoespaciada de los campos de kg */
.alta .field input{font-family:var(--cuerpo);font-weight:500}
.alta-discos{display:flex;justify-content:center;gap:10px}
.alta-discos .disco{margin:0}
.alta-marca{display:flex;justify-content:center;align-items:baseline;gap:1px;font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:.03em;user-select:none}
.alta-marca .b2{color:var(--volt);font-size:38px;transform:translateY(1px)}
.alta-sub{color:var(--ink2);text-align:center;font-size:15px;margin:0 6px}
.alta-langs{display:flex;justify-content:center;gap:8px;margin-top:6px}
.lpill{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;
  background:var(--surface2);border:1px solid var(--line-soft);border-radius:999px;
  transition:border-color var(--t-pulsar) var(--ease-sale),transform var(--t-pulsar) var(--ease-sale)}
.lpill.on{border-color:var(--volt)}
.lpill:active{transform:scale(.94)}

.rev{max-width:430px;margin:0 auto;display:flex;flex-direction:column;gap:12px;padding-top:14px}
.rev-disco{display:flex;justify-content:center}
.rev-disco .disco{margin:0;width:56px;height:56px;font-size:19px}
.rev-t{text-align:center;font-size:27px;margin:0}
.rev-sub{text-align:center;color:var(--ink2);margin:0 8px;font-size:14.5px}
.rev-lista{gap:0;padding-top:4px;padding-bottom:4px}
.rev-row{display:flex;align-items:flex-start;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line-soft)}
.rev-row:last-child{border-bottom:0}
.rev-ico{flex:0 0 auto;font-size:20px;line-height:1.3}
.rev-txt{min-width:0}
.rev-rt{font-weight:600;font-size:15px}

/* Tour: recorte de foco + burbuja. El recorte solo VIAJA con transform; el
   tamaño cambia al instante (animar layout aquí sería pagar reflow por gusto). */
.tour{position:fixed;inset:0;z-index:70}
.tour-spot{position:fixed;left:0;top:0;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(4,6,9,.62);
  transition:transform var(--t-medio) var(--ease-mueve)}
.tour-bub{position:fixed;left:14px;right:14px;max-width:430px;margin:0 auto;z-index:71}
.tour-bub h3{margin:0;font-size:19px}
.tour-n{letter-spacing:.06em}
/* cabecera de cada parada: en que seccion estas, y cuantas quedan */
.tour-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.tour-sec{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--volt)}
.tour-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
@media(prefers-reduced-motion:reduce){
  .tour-spot{transition:none}
}

/* ==================== PLAN: calendario real ==================== */
/* Seis pestañas: la etiqueta cede tamaño antes que romperse en dos líneas. */
@media (max-width: 409px) { .tab span { font-size: 9.5px; letter-spacing: .02em } }

.fases-leyenda { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px }
.fase-banda { border: 1px solid var(--line); border-radius: 12px; background: var(--surface) }
.fase-banda summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none }
.fase-banda summary::-webkit-details-marker { display: none }
.fase-banda .fase-obj { padding: 0 12px 10px; color: var(--ink2) }
.fase-punto { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto }
.fase-punto.f1 { background: var(--f1) } .fase-punto.f2 { background: var(--f2) }
.fase-punto.f3 { background: var(--f3) } .fase-punto.f4 { background: var(--f4) }

.mes { padding: 12px 12px 14px; margin-bottom: 12px }
/* centrado y con aire a los lados: las flechas del visor viven a top:6px
   y a 8px de cada borde, o sea justo encima de este titulo. Alineado a la
   izquierda, la flecha de retroceder se comia el nombre del mes. */
.mes-t { font-family: var(--disp); font-weight: 700; letter-spacing: .1em; font-size: 12px;
  color: var(--ink2); margin-bottom: 8px; text-align: center; padding: 0 34px;
  min-height: 22px; display: flex; align-items: center; justify-content: center }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px }
.cal-dn { text-align: center; color: var(--ink3); padding-bottom: 2px }
.cal-d {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: var(--surface2); color: var(--ink);
  font-family: var(--mono); font-size: 13px; padding: 0; cursor: pointer; position: relative;
}
.cal-d.off { background: none; color: var(--ink3); opacity: .35; pointer-events: none }
/* el tinte de cada fase: el mismo disco que ya identifica al plan */
.cal-d.f1 { background: color-mix(in srgb, var(--f1) 24%, var(--surface2)) }
.cal-d.f2 { background: color-mix(in srgb, var(--f2) 24%, var(--surface2)) }
.cal-d.f3 { background: color-mix(in srgb, var(--f3) 24%, var(--surface2)) }
.cal-d.f4 { background: color-mix(in srgb, var(--f4) 24%, var(--surface2)) }
.cal-d.con-f::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .8 }
.cal-d.con-h::before { content: ''; position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--volt) }
.cal-d.hoyd { outline: 2px solid var(--volt); outline-offset: 1px }
.cal-d:active { transform: scale(.94) }

.dia-quieto { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px }
.meal-row .mf { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: 0 0 auto }

/* ==================== EJERCICIOS: tarjetas con mapa ==================== */
.ej-zonas, .ej-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.ej-zcard, .ej-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 14px 10px 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); cursor: pointer; position: relative;
}
.ej-zcard:active, .ej-card:active { background: var(--surface2) }
.ej-zcard .ej-zmapa svg { width: 88px; height: auto }
.ej-card .ej-mapa svg { width: 62px; height: auto }
.ej-card .ej-nom { font-size: 13.5px; line-height: 1.2 }
.ej-card.fuera { opacity: .55 }
.ej-card .fuera-tag { position: absolute; top: 6px; right: 6px }
.ej-atras { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px }

/* el mapa dentro de tarjeta: compacto, sin el margen de la ficha */
.ej-zcard .ej-zmapa svg, .ej-card .ej-mapa svg { margin: 0 auto }

/* Contraseña con ojo: el botón vive DENTRO del campo, y el input reserva
   sitio a la derecha para que el texto nunca pase por debajo. 44px de lado
   porque es un objetivo táctil, no un adorno. */
.con-ojo { position: relative; display: block }
.con-ojo input { width: 100%; padding-right: 46px }
.con-ojo .ojo {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink3); cursor: pointer; border-radius: 10px;
}
.con-ojo .ojo:hover, .con-ojo .ojo[aria-pressed="true"] { color: var(--ink) }
.con-ojo .ojo:active { background: var(--surface2) }

/* ==================== COMIDA: recetario por grupos ==================== */
.rec-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px }
.rg-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 10px 10px 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); cursor: pointer;
}
.rg-card:active { background: var(--surface2) }
.rg-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 11px }
.rg-ph { width: 100%; aspect-ratio: 4/3; border-radius: 11px; background: var(--surface2);
  display: flex; align-items: center; justify-content: center; color: var(--ink3) }
.rg-ph.chica { aspect-ratio: 1; width: 100% }

/* ==================== COMIDA: la compra con imagen ==================== */
.shopfold { margin-bottom: 10px }
.shopfold summary { display: flex; align-items: center; gap: 8px }
.shopitem { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center;
  gap: 10px; width: 100%; text-align: left }
.shopitem .pimg { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; background: var(--surface2) }
.shopitem img.pimg { cursor: zoom-in }
.shopitem .pimg.ph { display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 700; font-size: 15px; color: var(--ink3) }
.shopitem .sq { min-width: 0; text-align: right }
.shopitem.on .pimg { opacity: .4; filter: grayscale(1) }


/* segunda burbuja: reportar, a la izquierda de la de buscar */
.fab-rep { right: calc(14px + 48px + 10px) }
.rep-tipos { display: flex; gap: 8px; margin: 0 0 4px }
.rep-tipos .lpill { flex: 1 }
.rep-txt {
  width: 100%; resize: vertical; min-height: 96px;
  font-family: var(--cuerpo); font-size: 15px; color: var(--ink);
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px;
}
.rep-txt:focus { outline: 2px solid var(--volt); outline-offset: 1px }


/* ==================== zoom de producto ==================== */
.zoom-capa {
  position: fixed; inset: 0; z-index: 120; cursor: zoom-out;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(0, 0, 0, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: zoom-entra .16s var(--ease-sale);
}
.zoom-img { width: min(80vw, 400px); aspect-ratio: 1; object-fit: cover;
  border-radius: 20px; border: 1px solid var(--glass-line); box-shadow: var(--shadow) }
.zoom-cap { font-family: var(--disp); font-weight: 600; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding: 0 24px; text-align: center }
@keyframes zoom-entra { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .zoom-capa { animation: none } }

/* ==================== calendario: un mes por pantalla ==================== */
.cal-envoltura { position: relative }
.cal-visor {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cal-visor::-webkit-scrollbar { display: none }
.cal-visor .mes { flex: 0 0 100%; scroll-snap-align: center }
.cal-nav {
  position: absolute; top: 6px; width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
  background: color-mix(in srgb, var(--surface2) 88%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--ink2); cursor: pointer; padding: 0 0 2px;
}
.cal-nav:active { transform: scale(.92) }
.cal-nav.izq { left: 8px } .cal-nav.der { right: 8px }

/* ==================== pop-up del dia: filas que se ven tocables ==================== */
.dia-lista { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px }
.toca {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 0; cursor: pointer;
  transition: transform var(--t-pulsar) var(--ease-sale);
}
#sheet .toca { margin: 8px 0 0 }
#sheet .dia-lista .toca { margin: 0 }
.toca:active { transform: scale(.98); background: var(--surface) }
.toca-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.toca-tx .ml { width: auto }
.toca-num { flex: 0 0 auto; color: var(--ink2); font-size: 12.5px }
.toca-chev { flex: 0 0 auto; color: var(--ink3); font-size: 21px; line-height: 1; transform: translateY(-1px) }
.toca .mf { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex: 0 0 auto }


/* ============ COMIDA: los ingredientes de la receta, con foto ============
   Misma geometria que .shopitem (46 px, radio 11): la compra y la receta
   hablan de los mismos productos, asi que se parecen. */
.ing-lista { display: flex; flex-direction: column; margin: 2px 0 4px }
.ing-fila { display: grid; grid-template-columns: 46px 1fr auto; align-items: center;
  gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft) }
.ing-fila:last-child { border-bottom: 0 }
.ing-fila .ing-img { width: 46px; height: 46px; border-radius: 11px;
  object-fit: cover; background: var(--surface2) }
.ing-fila img.ing-img { cursor: zoom-in }
.ing-fila .ing-img.ph { display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 700; font-size: 15px; color: var(--ink3) }
.ing-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px }
.ing-tx .mini { margin: 0 }
.ing-q { min-width: 0; text-align: right; font-size: 13px; color: var(--ink2); white-space: nowrap }

/* enlace a la politica: discreto en la puerta, visible cuando se busca */
.priv-a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.priv-a:hover{color:var(--ink)}
.priv-a:focus-visible{outline:2px solid var(--volt);outline-offset:2px;border-radius:3px}

/* ====== calendario del cuestionario: elegir el dia de arranque ======
   Reutiliza .cal-grid y .cal-d del calendario de Plan a proposito: es el
   mismo gesto y conviene que se vea igual. Solo cambia el estado elegido,
   que alli no existe porque alli se abre un dia, no se escoge. */
.cal-d.cal-pick { background: var(--surface2); color: var(--ink) }
.cal-d.cal-pick:not(.off):hover { background: var(--line) }
.cal-d.cal-pick.sel { background: var(--volt); color: var(--volt-ink); font-weight: 700 }
.cal-d.cal-pick.sel.hoyd { outline-color: var(--ink) }
.cal-d.cal-pick[disabled] { cursor: default }

/* boton secundario con la forma del principal: para acciones que no son la del dia */
.btn-b2p.fantasma{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.btn-b2p.fantasma:hover{color:var(--ink)}