/* MAINEVOLVE · Diseño Z (estilo Apple): limpio, moderno y muy visual. Elegido el 18/10/2026.
   Capa que se carga la última y sustituye al cristal (Liquid Glass) y a la letra Bebas en toda la app:
   fondo gris claro / negro, tarjetas sólidas muy redondeadas, letra del sistema, titulares con palabras en
   degradado, botón principal en fuego y navegación arriba (escritorio) o abajo tipo iOS (móvil).
   Los tokens usan «:root:not(#z)» para mandar sobre los estilos «fitness/salud» de temas.css sin !important. */

/* ═════════ Tokens · claro ═════════ */
:root:not(#z) {
  --bg: #f5f5f7;
  --bg-art: none;
  --glass-bg: #ffffff;
  --glass-bg-strong: #ffffff;
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-highlight: transparent;
  --glass-sheen: transparent;
  --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05);
  --glass-blur: 0px;
  --glass-saturate: 100%;
  --glass-solid: #ffffff;
  --fill: #f2f2f5;
  --fill-hover: #e8e8ed;
  --fill-inset: 0 0 0 transparent;
  --hairline: rgba(0, 0, 0, 0.08);
  --modal-tint: rgba(255, 255, 255, 0);
  --live-bg: #ffffff;
  --scrim: rgba(0, 0, 0, 0.36);
  --option-bg: #ffffff;
  --radius-card: 28px;
  --radius-field: 12px;

  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #86868b;
  --accent-text: #c53a12;
  --up: #1f8a3b;
  --down: #d70f3c;

  --grad: linear-gradient(135deg, #f7a600 0%, #ed5c23 50%, #e0283a 100%);
  --grad-text: linear-gradient(90deg, #f5a000 0%, #ed5c23 48%, #e0283a 100%);
  --grad-sheen: linear-gradient(transparent, transparent);
  --lens: transparent;
  --lens-edge: transparent;
  --lift-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 22px 50px rgba(0, 0, 0, 0.1);

  --chart-grid: rgba(0, 0, 0, 0.06);
  --chart-tick: #86868b;
  --chart-point: #ffffff;

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
  --display: var(--font);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Color por categoría (sobre blanco, contraste AA) */
  --c-comer: #1f8a3b;
  --c-entrenar: #d65a00;
  --c-salud: #d70f3c;
  --c-agua: #0066cc;
  --c-sueno: #5246d6;
  --c-premium: #9a2fd0;
  --c-mente: #0a7f86;
  --z-sombra-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 22px 50px rgba(0, 0, 0, 0.1);
  --z-nav: rgba(250, 250, 252, 0.8);
  --z-boton: #e8e8ed;
  --z-fuerte: #1d1d1f;
  --z-fuerte-texto: #ffffff;
  color-scheme: light;
}

/* ═════════ Tokens · oscuro ═════════ */
:root:not(#z)[data-theme='dark'] {
  --bg: #000000;
  --glass-bg: #1c1c1e;
  --glass-bg-strong: #1c1c1e;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 0 0 0 transparent;
  --glass-solid: #1c1c1e;
  --fill: #2c2c2e;
  --fill-hover: #3a3a3c;
  --hairline: rgba(255, 255, 255, 0.1);
  --live-bg: #1c1c1e;
  --scrim: rgba(0, 0, 0, 0.6);
  --option-bg: #1c1c1e;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #8e8e93;
  --accent-text: #ff8a5c;
  --up: #30d158;
  --down: #ff453a;
  --grad-text: linear-gradient(90deg, #ffb340 0%, #ff7a3d 48%, #ff4d5e 100%);
  --lift-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-tick: #8e8e93;
  --chart-point: #1c1c1e;
  --c-comer: #30d158;
  --c-entrenar: #ff9f0a;
  --c-salud: #ff375f;
  --c-agua: #0a84ff;
  --c-sueno: #7d7aff;
  --c-premium: #bf5af2;
  --c-mente: #40c8e0;
  --z-sombra-hover: 0 0 0 1px rgba(255, 255, 255, 0.14);
  --z-nav: rgba(22, 22, 23, 0.8);
  --z-boton: #2c2c2e;
  --z-fuerte: #f5f5f7;
  --z-fuerte-texto: #000000;
  color-scheme: dark;
}

/* ═════════ Base ═════════ */
body { font-family: var(--font); letter-spacing: -0.01em; }
h1, h2, h3 { font-family: var(--font); font-weight: 600; text-transform: none; letter-spacing: -0.022em; line-height: 1.12; }
h1 { font-size: 40px; letter-spacing: -0.028em; line-height: 1.08; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
.grad-text { background-image: var(--grad-text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.eyebrow { gap: 0; margin-bottom: 8px; font: 600 12px var(--font); letter-spacing: 0.02em; color: var(--muted); }
.eyebrow::before { display: none; }
.label-caps { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.small { font-size: 13px; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }

/* Sin cristal: superficies sólidas, sin reflejos ni desenfoque */
.glass, .glass-strong, .glass-nav, .card, .kpi, .login-card, .modal, .sheet, .toast {
  backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent;
  box-shadow: var(--glass-shadow);
}

/* ═════════ Tarjetas ═════════ */
.card { padding: 28px; border-radius: var(--radius-card); }
.card + .card { margin-top: 20px; }
.grid { gap: 20px; }
.card-head { margin-bottom: 16px; }
.card-head h2 { font-size: 22px; }
a.card, .card.list-row, button.card { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  a.card:hover, .card.list-row:hover { transform: scale(1.012); box-shadow: var(--z-sombra-hover); }
}
.kpi { padding: 24px 26px; border-radius: 24px; }
.kpi .value { font-size: 44px; font-weight: 600; letter-spacing: -0.035em; background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
.kpi .value small { -webkit-text-fill-color: var(--muted); font-weight: 500; }
.kpi .label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }

/* ═════════ Botones ═════════ */
.btn {
  min-height: 44px; padding: 0 22px; gap: 8px;
  background: var(--z-boton); color: var(--text); border: 0; box-shadow: none;
  font: 500 15px/1 var(--font); letter-spacing: -0.01em; text-transform: none;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease), background 0.2s var(--ease);
}
.btn.primary { background: var(--grad); color: #fff; border: 0; text-shadow: none; box-shadow: 0 8px 22px rgba(237, 92, 35, 0.26); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: none; }
.btn.danger { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); border: 0; }
.btn.sm { min-height: 34px; padding: 0 15px; font-size: 14px; }
.btn.icon { min-height: 0; padding: 8px; }
.btn.sm.icon { padding: 7px; }
.btn.is-on { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--accent-text); border: 0; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { transform: none; filter: brightness(0.97); box-shadow: none; background: var(--fill-hover); }
  .btn.primary:not(:disabled):hover { filter: brightness(1.08); background: var(--grad); box-shadow: 0 10px 26px rgba(237, 92, 35, 0.32); }
  .btn.ghost:not(:disabled):hover { background: var(--fill); box-shadow: none; }
  .btn.danger:not(:disabled):hover { background: color-mix(in srgb, var(--down) 18%, transparent); box-shadow: none; }
}
:root[data-theme='dark'] .btn:not(.primary):not(.ghost):not(.danger):not(.is-on) { background: var(--z-boton); }

/* ═════════ Campos ═════════ */
label.field { gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--muted); }
input, select, textarea { background: var(--fill); border: 1px solid transparent; border-radius: var(--radius-field); box-shadow: none; font: 400 16px var(--font); }
:root[data-theme='light'] input, :root[data-theme='light'] select, :root[data-theme='light'] textarea { border-color: transparent; }
input:focus, select:focus, textarea:focus { background: var(--glass-solid); border-color: #ed5c23; box-shadow: 0 0 0 4px rgba(237, 92, 35, 0.16); }
fieldset { border: 1px solid var(--hairline); border-radius: 20px; background: transparent; }
legend { font-size: 16px; }
.search input { border-radius: 999px; }

/* ═════════ Chips, insignias, pestañas y controles segmentados (iOS) ═════════ */
.chip { background: var(--fill); border: 0; padding: 6px 12px; font-weight: 500; }
button.chip, label.chip { color: var(--text); }
.chip.is-on, .chip.is-on:hover { background: var(--z-fuerte); color: var(--z-fuerte-texto); border: 0; }
@media (hover: hover) and (pointer: fine) {
  button.chip:hover, label.chip:hover { transform: none; background: var(--fill-hover); box-shadow: none; border-color: transparent; }
  .chip.is-on:hover { background: var(--z-fuerte); }
}
.badge { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 4px 10px; border: 0; background: var(--fill); }
.badge.activo, .badge.pausa, .badge.baja { border: 0; }
.tabs, .seg, .theme-switch { background: var(--fill-hover); border: 0; box-shadow: none; padding: 3px; border-radius: 11px; gap: 0; }
:root[data-theme='dark'] .tabs, :root[data-theme='dark'] .seg, :root[data-theme='dark'] .theme-switch { background: #2c2c2e; }
.tabs a, .seg button { padding: 7px 16px; border-radius: 8px; font: 500 14px/1.2 var(--font); letter-spacing: -0.01em; color: var(--text); }
.tabs a.active, .seg button[aria-pressed='true'], .theme-switch button[aria-pressed='true'] {
  background: var(--glass-solid); color: var(--text); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
}
:root[data-theme='dark'] .tabs a.active, :root[data-theme='dark'] .seg button[aria-pressed='true'], :root[data-theme='dark'] .theme-switch button[aria-pressed='true'] { background: #636366; color: #fff; }
.theme-switch button { border-radius: 8px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .tabs a:not(.active):hover, .seg button[aria-pressed='false']:hover { background: transparent; color: var(--muted); box-shadow: none; }
}

/* ═════════ Listas, tablas, progreso ═════════ */
.list-row b { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .list-row:hover { box-shadow: none; } }
.table th { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--glass-solid); border-bottom: 1px solid var(--hairline); }
.table-wrap { border-radius: 18px; }
@media (hover: hover) and (pointer: fine) { .table tr.clickable:hover td:first-child { box-shadow: none; } }
.bar { height: 6px; border: 0; background: var(--fill-hover); }
.metric-row b { font-weight: 600; letter-spacing: -0.02em; }
.result-box { background: color-mix(in srgb, #ed5c23 7%, var(--glass-solid)); border: 0; box-shadow: none; }
.empty svg { color: var(--muted); }
.avatar { background: var(--grad); box-shadow: none; font: 600 18px/1 var(--font); }
.avatar.lg { font-size: 30px; }
.nav-badge { background: #ff3b30; font-weight: 600; }

/* ═════════ Ventanas, avisos y panel «Más» ═════════ */
.modal { background: var(--glass-solid); border-radius: 28px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25); }
.modal-head, .modal-foot { background: var(--glass-solid); border-color: var(--hairline); }
.modal-head h2 { font-size: 22px; }
.toast { background: #1d1d1f; color: #fff; border: 0; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); font-size: 14px; }
:root[data-theme='dark'] .toast { background: #3a3a3c; }
.toast.error { box-shadow: inset 4px 0 0 #ff453a, 0 10px 30px rgba(0, 0, 0, 0.25); }
.toast.ok { box-shadow: inset 4px 0 0 #30d158, 0 10px 30px rgba(0, 0, 0, 0.25); }
.sheet { background: var(--glass-solid); }
.sheet-nav a.active { background: var(--fill); color: var(--text); }
.sheet-nav a.active svg { color: #ed5c23; }
.demo-banner { border: 0; background: color-mix(in srgb, #fbbb0b 16%, transparent); }

/* ═════════ Estructura: barra superior (escritorio) ═════════ */
.shell { flex-direction: column; }
.sidebar { display: none; }
.topnav { position: sticky; top: 0; z-index: 50; background: var(--z-nav); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); }
.topnav-in { max-width: 1280px; margin: 0 auto; height: 56px; padding: 0 32px; display: flex; align-items: center; gap: 22px; }
.topnav .logo { height: 19px; width: auto; flex-shrink: 0; }
.topnav-links { display: flex; flex-direction: row; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav-links::-webkit-scrollbar { display: none; }
.topnav-links a { width: auto; flex-shrink: 0; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 500 14px var(--font); letter-spacing: -0.01em; text-transform: none; color: var(--muted); }
.topnav-links a svg { display: none; }
.topnav-links a.active { background: var(--fill-hover); color: var(--text); box-shadow: none; font-weight: 600; }
:root[data-theme='dark'] .topnav-links a.active { background: #2c2c2e; }
.topnav-links .nav-badge { margin-left: 2px; }
.nav a.active .nav-badge { background: #ff3b30; color: #fff; }
@media (hover: hover) and (pointer: fine) { .topnav-links a:not(.active):hover { color: var(--text); background: transparent; box-shadow: none; } }
.topnav-acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.topnav-acciones .theme-switch { margin: 0; }
.topnav-acciones .theme-switch button { padding: 5px 9px; }
.topnav-acciones .theme-switch button svg { width: 15px; height: 15px; }
.topnav-acciones .btn.icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: transparent; color: var(--text); }
.topnav-acciones .btn.icon svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .topnav-acciones .btn.icon:hover { background: var(--fill-hover); } }
.topnav-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font: 600 13px var(--font); margin-left: 4px; text-transform: uppercase; }
.main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 40px 32px 88px; }
.topbar { margin-bottom: 28px; }
.topbar h1 { font-size: 40px; }

/* ═════════ Acceso y páginas públicas ═════════ */
.login-hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
.login-card { box-shadow: var(--glass-shadow); }
.login-card h2 { font-size: 26px; }
.pub-hero h1 { font-size: clamp(38px, 9vw, 56px); line-height: 1.04; letter-spacing: -0.032em; }
.pub-btn { min-height: 50px; font-size: 16px; }
.pub-ok h2 { font-size: 30px; }
.pub-texto h2 { font-size: 22px; }
.pub-plan { border: 0; }
.pub-plan:has(input:checked) { box-shadow: inset 0 0 0 2px #ed5c23; }

/* ═════════ Móvil ═════════ */
@media (max-width: 760px) {
  .topnav { display: none; }
  .main { padding: 18px 16px calc(104px + env(safe-area-inset-bottom)); }
  h1, .topbar h1 { font-size: 30px; }
  .card { padding: 22px; border-radius: 22px; }
  .kpi { padding: 18px; border-radius: 20px; }
  .kpi .value { font-size: 34px; }
  .tabs a { padding: 7px 12px; font-size: 13px; }
  /* Cabecera fija sencilla */
  .mobile-header { margin: 0; top: 0; padding: max(8px, env(safe-area-inset-top)) 8px 8px 16px; border-radius: 0; border: 0; border-bottom: 1px solid var(--hairline); background: var(--z-nav); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: none; }
  .mobile-header img { height: 19px; }
  /* Barra inferior estilo iOS */
  .bottom-nav { left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-radius: 0; border: 0; border-top: 1px solid var(--hairline); background: var(--z-nav); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: none; }
  .bottom-nav a, .bottom-nav button { padding: 4px 0; border-radius: 10px; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
  .bottom-nav a svg, .bottom-nav button svg { width: 25px; height: 25px; }
  .bottom-nav a.active, .bottom-nav button.active { background: transparent; color: #ed5c23; box-shadow: none; }
  :root[data-theme='dark'] .bottom-nav a.active, :root[data-theme='dark'] .bottom-nav button.active { color: #ff7a3d; }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .rest-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Accesibilidad */
@media (prefers-reduced-transparency: reduce) {
  .topnav, .mobile-header, .bottom-nav { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  a.card:hover, .card.list-row:hover { transform: none; }
}

/* Hábitos de Hoy: la letra del sistema es más ancha que Bebas; dos columnas cómodas y el nombre nunca se corta a medias */
.p-habitos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.p-habito { border: 0; }
.p-habito--campo .grow { min-width: 0; }
.p-habito--campo .grow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Campos dentro de filas grises: el campo va en blanco (o gris más claro en oscuro) para que se vea */
.p-habito input, .ej-card input, .sa-toma input, fieldset input, .tipo-card input, .result-box input, .p-habito select { background: var(--glass-solid); }
:root[data-theme='dark'] .p-habito input, :root[data-theme='dark'] .ej-card input { background: #3a3a3c; }

/* ═════════════════════════════════════════════════════════════════════════════
   Z2 · Pantallas de la app con lo visual del prototipo
   ═════════════════════════════════════════════════════════════════════════════ */
/* Titular «frase en negro. frase en gris.» */
.z-gris { color: var(--muted); }
h1 .z-gris { -webkit-text-fill-color: var(--muted); }
.z-seccion { margin-top: 52px; }
.z-titular { font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 20px; }
.z-titular span { color: var(--muted); }
.z-fila-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.c-comer { color: var(--c-comer); } .c-entrenar { color: var(--c-entrenar); } .c-salud { color: var(--c-salud); } .c-agua { color: var(--c-agua); }
.c-sueno { color: var(--c-sueno); } .c-premium { color: var(--c-premium); } .c-mente { color: var(--c-mente); }
.z-eyebrow-ic { display: flex; align-items: center; gap: 6px; font: 600 12px var(--font); letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 8px; }
.z-eyebrow-ic svg { width: 16px; height: 16px; }
.z-num { font-size: 44px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.z-num small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; margin-left: 4px; }
.z-num--m { font-size: 32px; }

/* Rueda del día */
.z-rueda { position: relative; flex-shrink: 0; }
.z-rueda svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.z-rueda circle { fill: none; stroke-linecap: round; }
.z-rueda .pista { opacity: 0.16; }
.z-rueda .arco { transition: stroke-dasharray 1.4s var(--ease); }
.z-rueda-centro { position: absolute; inset: 0; display: grid; place-items: center; }
.z-rueda-centro img { width: 30%; height: 30%; object-fit: contain; }
.z-hoy-hero { display: flex; flex-direction: column; }
.z-hoy-rueda { display: flex; align-items: center; gap: 36px; margin: 18px 0 6px; }
.z-leyenda { display: grid; gap: 18px; flex: 1; min-width: 0; }
.z-leyenda-item { display: grid; grid-template-columns: 12px 1fr; gap: 3px 12px; align-items: baseline; }
.z-leyenda-item > i { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; }
.z-leyenda-item b { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.z-leyenda-item b em { font-style: normal; font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }
.z-leyenda-item small { grid-column: 2; font-size: 13px; color: var(--muted); }
.z-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.z-macros .metric + .metric { margin-top: 0; }
.z-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.z-enlace { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-text); font-size: 15px; font-weight: 500; }
.z-enlace svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.z-enlace:hover svg { transform: translateX(3px); }

/* Carruseles (estanterías) */
.z-estante { position: relative; }
.z-estante-pista {
  --z-borde: max(32px, calc((100vw - 1280px) / 2 + 32px));
  display: grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px var(--z-borde) 28px; margin: 0 calc(-1 * var(--z-borde)); scroll-padding-inline: var(--z-borde);
}
.z-estante-pista::-webkit-scrollbar { display: none; }
.z-estante-pista > * { scroll-snap-align: start; margin: 0 !important; }
.z-flechas { display: flex; gap: 10px; margin-bottom: 20px; }
.z-flecha { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fill-hover); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: opacity 0.2s; }
.z-flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.z-flecha:disabled { opacity: 0.35; cursor: default; }
.z-tarjeta { display: flex; flex-direction: column; min-height: 300px; color: inherit; }
.z-tarjeta .z-plato { margin: 0 0 18px; }
.z-tarjeta--plato { padding: 14px 14px 22px; }
.z-tarjeta--plato > :not(.z-plato) { padding-left: 10px; padding-right: 10px; }
.z-card-tit--m { font-size: 21px; line-height: 1.2; }
.z-tarjeta .z-enlace { margin-top: auto; padding-top: 14px; }
.z-tarjeta .p-vasos { margin: 16px 0 10px; }
.z-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.z-meta span { display: inline-flex; align-items: center; gap: 5px; }
.z-meta svg { width: 15px; height: 15px; }

/* Platos: emoji grandes sobre fondos de color (como en el prototipo) */
.z-plato { position: relative; display: grid; place-items: center; border-radius: 22px; aspect-ratio: 4 / 3; font-size: 84px; line-height: 1; overflow: hidden; text-shadow: 0 10px 18px rgba(0, 0, 0, 0.16); }
.z-plato > span { transition: transform 0.6s var(--ease); }
a.card:hover .z-plato > span, a.z-tarjeta:hover .z-plato > span { transform: scale(1.08) rotate(-3deg); }
.z-p-menta { background: linear-gradient(140deg, #e2f8ea, #bdebcf); } .z-p-durazno { background: linear-gradient(140deg, #ffe7d9, #ffcdb4); }
.z-p-cielo { background: linear-gradient(140deg, #e1f0ff, #bfdcff); } .z-p-lavanda { background: linear-gradient(140deg, #efe9ff, #d9ccff); }
.z-p-limon { background: linear-gradient(140deg, #fff7d1, #ffe78f); } .z-p-rosa { background: linear-gradient(140deg, #ffe4ec, #ffc4d6); }
.z-p-fuego { background: linear-gradient(140deg, #ffb347, #ed5c23 55%, #e0283a); } .z-p-noche { background: linear-gradient(140deg, #a59bff, #5246d6); }
:root[data-theme='dark'] .z-p-menta { background: linear-gradient(140deg, #13301e, #1c472b); } :root[data-theme='dark'] .z-p-durazno { background: linear-gradient(140deg, #3b2418, #57301c); }
:root[data-theme='dark'] .z-p-cielo { background: linear-gradient(140deg, #13263a, #1b3a5c); } :root[data-theme='dark'] .z-p-lavanda { background: linear-gradient(140deg, #221c3d, #31295a); }
:root[data-theme='dark'] .z-p-limon { background: linear-gradient(140deg, #332e10, #4a4114); } :root[data-theme='dark'] .z-p-rosa { background: linear-gradient(140deg, #3a1723, #561f33); }
/* Las recetas (dibujo de la receta): mismo tono, en pastel */
.rc-dibujo { background: linear-gradient(140deg, color-mix(in srgb, var(--rc1) 26%, #fff), color-mix(in srgb, var(--rc1) 48%, #fff)); text-shadow: 0 8px 14px rgba(0, 0, 0, 0.16); }
:root[data-theme='dark'] .rc-dibujo { background: linear-gradient(140deg, color-mix(in srgb, var(--rc2) 26%, #1c1c1e), color-mix(in srgb, var(--rc2) 42%, #1c1c1e)); }
.p-receta-img { border-radius: 12px; }
.rc-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.rc-card { padding: 12px 12px 18px; }
.rc-foto { border-radius: 20px; aspect-ratio: 4 / 3; font-size: 76px; }
img.rc-foto { object-fit: cover; }
.rc-cuerpo { padding: 14px 8px 0; }
.rc-nombre { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.rc-tag { border: 0; }
a.rc-card:hover .rc-foto { transform: scale(1.02); }
.rc-foto { transition: transform 0.6s var(--ease); }
.rc-hero { padding: 14px; }
.rc-foto-grande { border-radius: 22px; aspect-ratio: 16 / 7; font-size: clamp(80px, 11vw, 150px); }

/* Vasos de agua y sueño en el carrusel */
.z-noches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 72px; margin-top: 16px; }
.z-noches i { display: block; border-radius: 6px; background: linear-gradient(180deg, #a7a4ff, var(--c-sueno)); min-height: 4px; }
.z-noches-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; font-size: 11px; color: var(--faint); margin-top: 6px; }

/* Mi salud: fichas como en la app Salud */
.z-fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.z-ficha { display: flex; flex-direction: column; min-height: 210px; }
.card.z-ficha + .card.z-ficha { margin-top: 0; }
.z-ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.z-ficha-cab > span { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; }
.z-ficha-cab svg { width: 19px; height: 19px; }
.z-ficha-cab a { font-size: 13px; color: var(--muted); }
.z-ficha .z-num { margin-top: auto; }
.z-ficha-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; min-height: 34px; }
.z-ficha-pie .btn.sm { min-height: 32px; padding: 0 13px; }
.z-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--pill, var(--muted)); background: color-mix(in srgb, var(--pill, var(--muted)) 14%, transparent); }
.z-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Logros: medallas redondas */
.lg-insignia { border: 0; padding: 14px; border-radius: 18px; }
.lg-insignia > svg { width: 30px; height: 30px; padding: 13px; border-radius: 50%; }
.lg-insignia.on > svg { background: var(--grad); box-shadow: inset 0 -5px 12px rgba(0, 0, 0, 0.18), 0 8px 18px rgba(237, 92, 35, 0.25); }
.lg-insignia.on { border: 0; }

/* Premium: portada como en el prototipo */
.z-premium-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.z-premium-grande { grid-row: span 2; display: flex; flex-direction: column; min-height: 560px; }
.card.z-premium-grande, .z-premium-grid > .card { margin: 0; }
.z-premium-grid > .card:not(.z-premium-grande) { min-height: 270px; }
.z-icono-cat { display: block; width: 42px; height: 42px; margin-bottom: 16px; }
.z-icono-cat svg { width: 42px; height: 42px; stroke-width: 1.6; }
.z-card-tit { font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.z-card-tit--xl { font-size: 38px; line-height: 1.08; letter-spacing: -0.028em; }
.tg { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tg-fuego { background-image: var(--grad-text); } .tg-verde { background-image: linear-gradient(90deg, #1f8a3b, #0a8f86); } .tg-azul { background-image: linear-gradient(90deg, #0066cc, #0a8fbf); }
.tg-morado { background-image: linear-gradient(90deg, #8a2be2, #d6246e); } .tg-salud { background-image: linear-gradient(90deg, #d70f3c, #f0567a); } .tg-naranja { background-image: linear-gradient(90deg, #d65a00, #f08c00); }
:root[data-theme='dark'] .tg-verde { background-image: linear-gradient(90deg, #30d158, #40c8e0); } :root[data-theme='dark'] .tg-azul { background-image: linear-gradient(90deg, #0a84ff, #5ac8fa); }
:root[data-theme='dark'] .tg-morado { background-image: linear-gradient(90deg, #bf5af2, #ff6482); } :root[data-theme='dark'] .tg-salud { background-image: linear-gradient(90deg, #ff375f, #ff7a93); }
:root[data-theme='dark'] .tg-naranja { background-image: linear-gradient(90deg, #ff9f0a, #ffc94a); }
.z-pila { position: relative; flex: 1; margin: 26px -28px -28px; min-height: 300px; }
.z-pila > div { position: absolute; border-radius: 24px; background: var(--glass-solid); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16); padding: 16px; }
:root[data-theme='dark'] .z-pila > div { background: #2c2c2e; }
.z-pila .t1 { width: 50%; left: 5%; bottom: 16%; transform: rotate(-7deg); }
.z-pila .t2 { width: 44%; left: 40%; bottom: 34%; transform: rotate(5deg); z-index: 2; display: grid; place-items: center; }
.z-pila .t3 { width: 46%; right: 4%; bottom: 3%; transform: rotate(-3deg); z-index: 3; }
.z-pila .z-plato { font-size: 60px; border-radius: 16px; }
.z-pila-barras { display: flex; align-items: end; gap: 6px; height: 84px; margin-top: 10px; }
.z-pila-barras i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #bf5af2, #8a2be2); }

/* ═════════ Z2 · Móvil ═════════ */
@media (max-width: 1080px) {
  .z-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-premium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-premium-grande { grid-column: span 2; grid-row: auto; min-height: 480px; }
}
@media (max-width: 760px) {
  .z-seccion { margin-top: 36px; }
  .z-titular { font-size: 24px; margin-bottom: 14px; }
  .z-flechas { display: none; }
  .z-estante-pista { --z-borde: 16px; grid-auto-columns: 78vw; gap: 14px; }
  .z-hoy-rueda { flex-direction: column; align-items: stretch; gap: 22px; }
  .z-hoy-rueda .z-rueda { align-self: center; }
  .z-leyenda { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .z-leyenda-item { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .z-leyenda-item small { grid-column: 1; }
  .z-leyenda-item b { font-size: 20px; }
  .z-leyenda-item b em { display: block; font-size: 12px; }
  .z-macros { gap: 10px; }
  .z-num { font-size: 36px; }
  .z-fichas { gap: 12px; }
  .z-ficha { min-height: 176px; padding: 18px; }
  .z-ficha .z-num { font-size: 28px; }
  .z-ficha-cab { flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
  .z-ficha-pie { flex-wrap: wrap; }
  .z-premium-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .z-premium-grande { grid-column: auto; min-height: 460px; }
  .z-premium-grid > .card:not(.z-premium-grande) { min-height: 0; }
  .z-card-tit--xl { font-size: 30px; }
  .z-pila { margin: 22px -22px -22px; min-height: 270px; }
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rc-card { padding: 8px 8px 14px; }
  .rc-foto { font-size: 52px; border-radius: 16px; }
  .rc-nombre { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .z-rueda .arco { transition: none; } a.card:hover .z-plato > span { transform: none; } }
@media (max-width: 760px) {
  .z-macros .metric-row { flex-direction: column; align-items: flex-start; gap: 0; font-size: 12px; }
  .z-macros .metric-row b { font-size: 17px; }
}
.sa-tests-puntos { display: inline-flex; gap: 6px; align-items: center; }
.z-ficha .sa-sem { font-size: 13px; }
/* Tarjetas que son filas de lista (informe para el médico, accesos): título y texto en dos líneas, alineadas con las demás */
.card.list-row { margin-left: 0; margin-right: 0; padding: 22px 24px; }
.card.list-row .grow > b { display: block; font-size: 17px; }
.card.list-row .grow > small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
@media (max-width: 760px) {
  .z-premium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .z-premium-grande { grid-column: span 2; }
  .z-premium-grid > .card:not(.z-premium-grande) { padding: 18px; }
  .z-premium-grid > .card:not(.z-premium-grande) .z-card-tit { font-size: 17px; line-height: 1.25; }
  .z-premium-grid > .card:not(.z-premium-grande) .z-icono-cat, .z-premium-grid > .card:not(.z-premium-grande) .z-icono-cat svg { width: 30px; height: 30px; margin-bottom: 12px; }
}

/* ═════════ Z3 · Panel del coach, bienvenida, páginas públicas e informes ═════════ */
/* Nombre editable de dietas y programas: como un titular */
.z-titulo-input { font: 600 40px/1.1 var(--font) !important; letter-spacing: -0.028em; color: var(--text); }
.z-titulo-input:focus { background: none !important; box-shadow: none !important; outline: 2px solid #0071e3 !important; outline-offset: 4px; border-radius: 8px; }
@media (max-width: 760px) { .z-titulo-input { font-size: 28px !important; } }
/* Bienvenida: opciones en tarjetas blancas, selección con aro naranja; la cuenta en blanco para que se vean los campos */
.ob-opcion, .ob-estilo, .ob-objetivos div, .ob-cuenta { background: var(--glass-solid); border: 0; box-shadow: var(--glass-shadow); }
.ob-opcion.on, .ob-estilo.on { background: var(--glass-solid); box-shadow: inset 0 0 0 2px #ed5c23, var(--glass-shadow); }
.ob-ic { background: var(--fill); border: 0; }
.ob-objetivos b { font-weight: 600; letter-spacing: -0.02em; }
.ob-regalo { border: 0; }
.ob-estilo--fitness .ob-mini { background: #000; }
.ob-estilo--fitness .ob-mini i { background: #1c1c1e; border: 0; }
.ob-estilo--fitness .ob-mini i:first-child, .ob-estilo--salud .ob-mini i:first-child { background: var(--grad); }
.ob-estilo--salud .ob-mini { background: #f5f5f7; border: 1px solid rgba(0, 0, 0, 0.06); }
.ob-estilo--salud .ob-mini i { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
/* Casillas en forma de chip (filtros, días…): elegidas en oscuro, como los chips */
.chip-check span { border: 0; background: var(--fill-hover); }
.chip-check input:checked + span { background: var(--z-fuerte); color: var(--z-fuerte-texto); }

/* ═════════ Z4 · Animaciones ═════════ */
@keyframes z-entra { from { opacity: 0; transform: translateY(14px); } }
#view.z-entrando .z-en { animation: z-entra 0.5s var(--ease) both; animation-delay: calc(var(--z-i, 0) * 40ms); }
#view.z-entrando .topbar { animation: z-entra 0.45s var(--ease) both; }
/* Pulsar: un poco de respuesta táctil en tarjetas, chips y botones */
label.chip { cursor: pointer; }
button.chip:active, label.chip:active, .tipo-card:active, a.card:active { transform: scale(0.98); }
.bar > i { transition: width 0.9s var(--ease); }
/* Ejercicios: ilustración por grupo muscular en lugar de fotos */
.ej-dibujo { display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; line-height: 1; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.14); }
.ej-tile .ej-dibujo { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; font-size: 60px !important; border-radius: 0; }
.ej-dibujo-grande { display: grid; place-items: center; aspect-ratio: 16 / 7; border-radius: 22px; font-size: clamp(64px, 10vw, 110px); line-height: 1; text-shadow: 0 10px 18px rgba(0, 0, 0, 0.16); margin-bottom: 4px; }
.tm-dibujo { display: grid; place-items: center; width: min(78vw, 320px); aspect-ratio: 1; border-radius: 32px; font-size: 120px; line-height: 1; text-shadow: 0 12px 22px rgba(0, 0, 0, 0.18); }

/* Tramos de series: cada serie (o grupo de series) con sus reps y su RIR */
.sem-table tr.tramo-cab td { padding: 14px 5px 2px; text-align: left; }
.sem-table tr.tramo-cab div { display: flex; gap: 8px; align-items: center; }
.sem-table tr.tramo-cab input { flex: 1; min-width: 0; max-width: 360px; text-align: left; font-weight: 600; }
.tramo-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; }
.sem-table tr.tramo-total td { padding-top: 10px; border-top: 1px solid var(--hairline); font-weight: 700; }
.lg-sets tr.lg-tramo td { padding: 10px 4px 0; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); }
.lg-sets tr.lg-tramo b { color: var(--text); }

/* ═════════ Liquid Glass en las barras de navegación (lib/lente.js) ═════════
   Barra inferior del móvil flotante y de cristal; una lente de cristal marca la sección activa y se desliza
   al pasar el ratón (ordenador) o al arrastrar el dedo por la barra (móvil). */
:root:not(#z) {
  --lg-barra: rgba(255, 255, 255, 0.7);
  --lg-sombra: inset 0 0 0 0.5px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --lg-lente: rgba(118, 118, 128, 0.13);
  --lg-lente-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.03), inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --lg-lente-viva: rgba(255, 255, 255, 0.6);
  --lg-lente-viva-sombra: inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 -3px 8px rgba(0, 0, 0, 0.05), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.16);
}
:root:not(#z)[data-theme='dark'] {
  --lg-barra: rgba(30, 30, 32, 0.66);
  --lg-sombra: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.55);
  --lg-lente: rgba(118, 118, 128, 0.3);
  --lg-lente-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --lg-lente-viva: rgba(255, 255, 255, 0.16);
  --lg-lente-viva-sombra: inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.6);
}
.lente {
  position: absolute; z-index: 0; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); translate: var(--x, 0) var(--y, 0);
  border-radius: 999px; pointer-events: none; opacity: 0; background: var(--lg-lente); box-shadow: var(--lg-lente-sombra);
  transition: translate 480ms cubic-bezier(0.3, 1.3, 0.5, 1), width 480ms cubic-bezier(0.3, 1.3, 0.5, 1), height 300ms var(--ease),
    scale 320ms cubic-bezier(0.3, 1.5, 0.5, 1), opacity 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.lente.visible { opacity: 1; }
.lente.sin-trans { transition: none; }
.lente.gota { animation: lente-gota 480ms cubic-bezier(0.3, 1.2, 0.5, 1); }
@keyframes lente-gota { 30% { scale: 1.07 0.86; } 100% { scale: 1 1; } }
.lente.pulsada { animation: none; scale: calc(1.1 + var(--estira, 0)) calc(1.2 - var(--estira, 0)); background: var(--lg-lente-viva); box-shadow: var(--lg-lente-viva-sombra); }
.lente.arrastrando { transition: scale 160ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease); }

/* Ordenador: barra superior */
.topnav-links { position: relative; padding: 6px 4px; margin: -6px -4px; }
.topnav-links a { position: relative; z-index: 1; transition: color 200ms var(--ease); }
.topnav-links.con-lente a.active, :root[data-theme='dark'] .topnav-links.con-lente a.active { background: transparent; }
@media (hover: hover) and (pointer: fine) { .topnav-links.con-lente a:hover { color: var(--text); } }

/* Móvil: barra inferior flotante */
@media (max-width: 760px) {
  .bottom-nav {
    left: 14px; right: 14px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 4px; border: 0; border-radius: 999px;
    background: var(--lg-barra); -webkit-backdrop-filter: blur(16px) saturate(190%); backdrop-filter: blur(16px) saturate(190%); box-shadow: var(--lg-sombra);
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a, .bottom-nav button { position: relative; z-index: 1; padding: 7px 0 6px; border-radius: 999px; transition: color 200ms var(--ease); -webkit-user-drag: none; }
  .bottom-nav.con-lente a:active, .bottom-nav.con-lente button:active { background: transparent; }
  .bottom-nav a svg, .bottom-nav button svg { transition: scale 260ms cubic-bezier(0.3, 1.5, 0.5, 1); }
  .bottom-nav .bajo-lente:not(.active) { color: var(--text); }
  .bottom-nav .bajo-lente svg { scale: 1.2; }
  .bottom-nav .nav-dot { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lente { transition: opacity 150ms linear; }
  .lente.gota { animation: none; }
  .lente.pulsada { scale: 1; }
  .bottom-nav .bajo-lente svg { scale: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  .bottom-nav { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lente.pulsada { background: var(--fill-hover); }
}

/* Coach + app: atajos «Más en tu app» en Hoy */
.z-atajos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.z-atajo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 18px; background: var(--fill); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.z-atajo span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--glass-solid); }
.z-atajo svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .z-atajo:hover { background: var(--fill-hover); } }

/* ═════════ Rendimiento ═════════
   El cristal solo vive en las barras. Un backdrop-filter, aunque sea «blur(0)» (lo que dejaba app.css), obliga a
   componer cada tarjeta en su propia capa y a procesar lo que hay detrás en cada fotograma al desplazarse. */
.glass, .glass-strong, .glass-nav, .card, .kpi, .login-card, .modal, .sheet, .toast, .sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Editor de dietas: objetivo editable de las comidas por opciones */
.obj-comida { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.obj-comida input { width: 58px; padding: 3px 6px; font-size: 12px; border-radius: 8px; text-align: center; }
.pct-dia { display: flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.pct-dia input { width: 46px; padding: 3px 4px; font-size: 12px; border-radius: 8px; text-align: center; }
.pct-dia input::placeholder { color: var(--muted); opacity: 0.7; }
small.pct-dia.down { color: var(--down); }

/* Intercambios en «Mi dieta»: ⇆ junto a cada alimento y lista de parecidos por compatibilidad de macros */
.dd-opciones li b { display: inline-flex; align-items: center; gap: 6px; }
.dd-swap { min-width: 36px; min-height: 36px; margin: -8px -6px -8px 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent-text); font-size: 17px; cursor: pointer; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.dd-swap:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .dd-swap:hover { background: var(--fill-hover); } }
.dd-cambio { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.dd-deshacer { border: 0; padding: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.dd-parecidos { display: grid; gap: 6px; margin-top: 12px; max-height: min(56vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.dd-parecido { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--fill); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .dd-parecido:hover { background: var(--fill-hover); } }
.dd-parecido .grow { min-width: 0; }
.dd-parecido b { display: block; font-size: 14px; font-weight: 600; }
.dd-parecido small { display: block; font-size: 12px; color: var(--muted); }
.dd-g { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-compat { min-width: 48px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.dd-compat.alto { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); }
.dd-compat.medio { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--accent-text); }
.dd-compat.bajo { background: var(--fill); color: var(--muted); }
@media print { .dd-swap, .dd-deshacer { display: none; } }

/* Animación propia de cada ejercicio (lib/ejercicio-anim.js): figura blanca sobre el color de su grupo muscular */
.ej-anim { padding: 0; overflow: hidden; }
.ej-anim svg.ea, .tm-anim svg.ea { width: 100%; height: 100%; display: block; }
.ea path, .ea circle, .ea rect { vector-effect: non-scaling-stroke; }
.ea-linea, .ea-atras { fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.ea-atras { stroke: rgba(255, 255, 255, 0.55); }
.ea-cabeza { fill: #fff; }
.ea-suelo { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-linecap: round; }
.ea-fijo { fill: rgba(255, 255, 255, 0.3); }
.ea-fijo-linea { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2.4; stroke-linecap: round; }
.ea-obj { fill: rgba(30, 20, 40, 0.75); }
.ea-disco { fill: rgba(30, 20, 40, 0.75); stroke: #fff; stroke-width: 1.4; }
.ea-cable { stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.4; fill: none; }
.ej-thumb.ej-anim .ea-linea { stroke-width: 3.2; }

/* Inicio del cliente (opción B): tres anillos (pasos, kcal, agua) y lo que toca hoy */
.hz-resumen { display: flex; align-items: center; gap: clamp(16px, 4vw, 36px); }
.hz-anillos { width: clamp(140px, 34vw, 200px); flex-shrink: 0; }
.hz-anillos circle { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 700ms var(--ease); }
.hz-anillos .hz-pista { stroke: var(--fill); stroke-linecap: butt; }
circle.hz-pasos { stroke: #ff6a1a; }
circle.hz-kcal { stroke: #22a06b; }
circle.hz-agua { stroke: #378add; }
.hz-leyenda { flex: 1; min-width: 0; max-width: 440px; display: grid; gap: 8px; }
.hz-resumen { justify-content: center; }
.hz-fila { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.hz-fila b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hz-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.hz-punto.hz-pasos { background: #ff6a1a; } .hz-punto.hz-kcal { background: #22a06b; } .hz-punto.hz-agua { background: #378add; }
.hz-apuntar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.hz-apuntar .hz-pasos { width: 150px; }
.hz-agua { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.hz-agua > span { display: inline-flex; align-items: center; gap: 4px; }
.hz-agua svg { width: 16px; height: 16px; color: #378add; }
.hz-tarea { text-decoration: none; color: inherit; }
.hz-tarea .lg-check { pointer-events: none; }
@media (max-width: 560px) { .hz-resumen { flex-direction: column; align-items: stretch; } .hz-anillos { align-self: center; width: 170px; } }
@media (prefers-reduced-motion: reduce) { .hz-anillos circle { transition: none; } }

/* Miniatura de ejercicio con vídeo de YouTube */
.ej-yt { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #111; flex-shrink: 0; }
.ej-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ej-yt i { position: absolute; left: 50%; top: 50%; width: 34%; max-width: 30px; aspect-ratio: 1.4; transform: translate(-50%, -50%); border-radius: 22%; background: rgba(255, 0, 51, 0.92); }
.ej-yt i::after { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.ej-tile .ej-yt { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; border-radius: 0; }

/* Ficha · historia clínica: una fila por pregunta, a todo el ancho, con la respuesta entera */
.clinica-filas { display: flex; flex-direction: column; gap: 10px; }
.clinica-fila { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--text, #888) 4%, transparent); }
.clinica-fila.llena { border-left: 3px solid var(--accent-text); }
.clinica-fila > span { font-weight: 600; padding-top: 10px; line-height: 1.35; }
.clinica-fila textarea { min-height: 44px; resize: vertical; overflow: hidden; line-height: 1.5; }
@media (max-width: 760px) { .clinica-fila { grid-template-columns: 1fr; gap: 8px; } .clinica-fila > span { padding-top: 0; } }

/* ═════════ Cocinar paso a paso (pantalla completa) ═════════ */
html.ck-abierto, html.ck-abierto body { overflow: hidden; }
.ck {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); outline: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  animation: ck-aparece 240ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes ck-aparece { from { opacity: 0; transform: scale(0.985); } }
.ck-top { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 14px clamp(16px, 4vw, 40px) 10px; }
.ck-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--z-boton); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.ck-x svg { width: 20px; height: 20px; }
.ck-x:active, .ck-pie .btn:active, .ck-ing:active, .ck-reloj-btn:active { transform: scale(0.97); }
.ck-titulo { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-cuenta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-barra { display: flex; gap: 4px; padding: 0 clamp(16px, 4vw, 40px); }
.ck-barra i { flex: 1; height: 4px; border-radius: 4px; background: var(--fill-hover); transition: background 300ms var(--ease); }
.ck-barra i.hecho { background: color-mix(in srgb, #ed5c23 55%, var(--fill-hover)); }
.ck-barra i.actual { background: #ed5c23; }
.ck-temp { display: flex; justify-content: center; padding: 10px 16px 0; }
.ck-temp[hidden] { display: none; }
.ck-temp-ir { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: color-mix(in srgb, #ed5c23 14%, var(--glass-solid)); color: var(--accent-text); font: 500 14px var(--font); cursor: pointer; }
.ck-temp-ir b { font-variant-numeric: tabular-nums; font-size: 15px; }
.ck-temp-ir svg { width: 16px; height: 16px; }
.ck-escena { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-items: center; padding: 8px clamp(20px, 6vw, 72px); touch-action: pan-y; }
.ck-vista { width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 0; }
.ck-entra { animation: ck-paso 280ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes ck-paso { from { opacity: 0; transform: translateX(var(--ck-desde, 28px)); } }
.ck-num { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; background: var(--grad); color: #fff; font: 700 20px/1 var(--font); font-variant-numeric: tabular-nums; margin-bottom: 22px; }
.ck-texto { margin: 0; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; text-wrap: pretty; }
.ck-reloj { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.ck-reloj-btn { min-height: 52px; padding: 0 22px; font-size: 17px; }
.ck-reloj-btn svg { width: 20px; height: 20px; }
.ck-reloj-num { font-size: clamp(44px, 8vw, 64px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-right: 6px; }
.ck-ings h2, .ck-fin h2 { font-size: clamp(26px, 3.6vw, 34px); margin: 0 0 6px; }
.ck-sub { margin: 0 0 22px; color: var(--muted); font-size: 16px; }
.ck-ings ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck-ing { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-radius: 16px; background: var(--glass-solid); box-shadow: var(--glass-shadow); color: var(--text); font: 400 17px var(--font); text-align: left; cursor: pointer; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms var(--ease); }
.ck-ing b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck-tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--hairline); display: grid; place-items: center; flex-shrink: 0; color: transparent; transition: background 200ms var(--ease), border-color 200ms var(--ease); }
.ck-tick svg { width: 15px; height: 15px; }
.ck-ing[aria-pressed='true'] { opacity: 0.55; }
.ck-ing[aria-pressed='true'] .grow { text-decoration: line-through; }
.ck-ing[aria-pressed='true'] .ck-tick { background: var(--c-comer); border-color: var(--c-comer); color: #fff; }
.ck-fin { text-align: center; display: grid; justify-items: center; }
.ck-fin-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c-comer) 16%, transparent); color: var(--c-comer); margin-bottom: 18px; }
.ck-fin-ico svg { width: 34px; height: 34px; }
.ck-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 4vw, 40px) max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--bg); }
.ck-pie .btn { min-height: 52px; padding: 0 24px; font-size: 16px; }
.ck-pie .ck-sig { margin-left: auto; min-width: 150px; }
.ck-pie .btn svg { width: 18px; height: 18px; }
.ck-pie .ck-ant[hidden] { display: none; }
@media (max-width: 560px) { .ck-pie .btn { flex: 1; } .ck-pie .ck-sig { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .ck, .ck-entra { animation: none; } .ck-barra i { transition: none; } }

/* Editor de pasos */
.pasos-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.pasos-fila { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: start; }
.pasos-n { width: 28px; height: 28px; margin-top: 8px; border-radius: 50%; background: var(--fill-hover); display: grid; place-items: center; font: 600 13px var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.pasos-fila textarea { min-height: 44px; resize: none; overflow: hidden; line-height: 1.45; }
.pasos-acc { display: flex; gap: 2px; padding-top: 4px; }
.pasos-acc svg { width: 16px; height: 16px; }
.pasos-acc [data-paso-subir] svg { transform: rotate(90deg); }
.pasos-acc [data-paso-bajar] svg { transform: rotate(-90deg); }
.pasos-fila:first-child [data-paso-subir], .pasos-fila:last-child [data-paso-bajar] { visibility: hidden; }
.pasos-temp { grid-column: 2; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-size: 12.5px; }
.pasos-temp:empty { display: none; }
.pasos-temp svg { width: 14px; height: 14px; }
.pasos-ayuda { margin: 8px 0 0; }
@media (max-width: 560px) { .pasos-fila { grid-template-columns: 24px 1fr; } .pasos-acc { grid-column: 2; justify-content: flex-end; padding-top: 0; } .pasos-n { width: 24px; height: 24px; } }

/* ═════════ Recetario ═════════ */
.rt-ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 22px; }
.rt-ajuste > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.rt-ajuste .chips { gap: 6px; }
.rt-ajuste .chip small { color: inherit; opacity: 0.7; font-weight: 500; margin-left: 4px; }
.rt-buscar { flex: 1 1 220px; }
.rt-sec { margin-top: 30px; }
.rt-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 14px; }
.rt-sec-head h2 { font-size: 24px; margin: 0; }
.rt-sec-head small { color: var(--muted); font-size: 14px; }
.rt-vacio { padding: 26px; display: flex; gap: 18px; align-items: center; }
.rt-vacio .rc-dibujo { width: 64px; height: 64px; border-radius: 18px; font-size: 30px; flex-shrink: 0; }
.rt-vacio p { margin: 4px 0 12px; color: var(--muted); }
.rt-origen { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(0, 0, 0, 0.55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rc-card { position: relative; }
.rt-pasos-n { color: var(--accent-text); font-weight: 600; }
.rt-macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rt-macro { padding: 12px 14px; border-radius: 16px; background: var(--fill); }
.rt-macro small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.rt-macro b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rt-macro span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-macro i { display: block; height: 4px; border-radius: 4px; margin-top: 8px; background: var(--fill-hover); overflow: hidden; }
.rt-macro i::after { content: ''; display: block; height: 100%; width: var(--p, 0%); background: var(--c, #ed5c23); border-radius: 4px; }
.rt-nota { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, #ed5c23 9%, var(--glass-solid)); margin-top: 16px; }
.rt-nota svg { width: 18px; height: 18px; color: var(--accent-text); flex-shrink: 0; margin-top: 2px; }
.rt-nota p { margin: 0; white-space: pre-line; }
.rt-cocinar { width: 100%; min-height: 54px; font-size: 16px; margin-top: 18px; }
.rt-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 14px; }
.rt-pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px 1fr; gap: 12px; line-height: 1.55; }
.rt-pasos li::before { content: counter(paso); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-hover); font: 600 14px var(--font); color: var(--text); }
.rt-pasos .pasos-temp { grid-column: 2; margin-top: -8px; }
.rt-faltan { margin: 12px 0 0; font-size: 13px; color: var(--accent-text); }
.rt-fila-cli { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.rt-sel { width: 100%; max-width: 340px; }
@media (max-width: 760px) { .rt-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rt-sec-head h2 { font-size: 21px; } }

/* Dieta del cliente: pasos de las recetas y enlace a su recetario */
.dd-pasos ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; line-height: 1.5; color: var(--muted); }
.dd-cocinar { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.dd-cocinar:hover { text-decoration: underline; }
@media print { .dd-cocinar { display: none; } }
.rt-mini { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 22px; object-fit: cover; }
.rt-nota-sec { margin: -6px 4px 14px; }
@media (max-width: 560px) {
  /* Comidas en una fila que se desliza (como un control segmentado), sin empujar la página */
  .rt-ajuste { padding: 16px; gap: 10px; }
  .rt-ajuste .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; scroll-padding: 16px; scroll-snap-type: x proximity; max-width: calc(100% + 32px); }
  .rt-ajuste .chips::-webkit-scrollbar { display: none; }
  .rt-ajuste .chip { flex-shrink: 0; scroll-snap-align: start; }
}

/* ═════════ Pulido del movimiento (revisión de diseño, 02/11/2026) ═════════
   Entradas con ease-out fuerte y sin rebote, salidas más rápidas que las entradas, el panel «Más» sube desde abajo
   como una hoja de iOS y el cambio de pantalla dura poco (se ve decenas de veces al día). */
:root:not(#z) { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }
.modal { animation: rise 240ms var(--ease-out); }
.toast { animation: rise 240ms var(--ease-out); }
.sheet { animation: sube 320ms var(--ease-drawer); }
@keyframes sube { from { transform: translateY(100%); } }
@keyframes sale { to { opacity: 0; } }
@keyframes sale-baja { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
.modal-bg.saliendo { animation: sale 150ms ease-out forwards; pointer-events: none; }
.modal-bg.saliendo .modal { animation: sale-baja 150ms ease-out forwards; }
.toast.saliendo { animation: sale-baja 160ms ease-out forwards; }
.ck.saliendo { animation: sale 160ms ease-out forwards; pointer-events: none; }
@keyframes z-entra { from { opacity: 0; transform: translateY(8px); } }
#view.z-entrando .z-en { animation: z-entra 300ms var(--ease-out) both; animation-delay: calc(var(--z-i, 0) * 30ms); }
#view.z-entrando .topbar { animation: z-entra 280ms var(--ease-out) both; }
a.card, .card.list-row, button.card { transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out); }
/* La foto de la receta crece un poco solo con ratón: en el móvil el «hover» se quedaba pegado tras tocar */
a.rc-card:hover .rc-foto { transform: none; }
.rc-foto { transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.rc-card:hover .rc-foto { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
  /* Menos movimiento no es ninguno: modales, avisos, el panel «Más» y el modo cocina siguen apareciendo con un fundido corto */
  .modal-bg, .modal, .toast, .sheet-bg, .sheet, .ck { animation: fade 160ms ease-out !important; }
  .modal-bg.saliendo, .modal-bg.saliendo .modal, .toast.saliendo, .ck.saliendo { animation: sale 120ms ease-out forwards !important; }
}