/* Reto 60 · V2 (nueva UI de Mauri). Spec docs/superpowers/specs/2026-10-22-reto-v2-design.md §4.5:
   fondo oscuro, oro con bisel, texto ≥ 17 px, botones ≥ 48 px, máximo 2 botones,
   cabe en 375 × 667 sin scroll. Clases `.v2-*`; lo demás es Tailwind. */
:root {
  --v2-bg: #06101a;
  --v2-ink: #eeebe3;
  --v2-muted: rgba(238, 235, 227, 0.62);
  --v2-gold: #cdaf5f;
  --v2-gold-hi: #f1d98a;
  --v2-gold-ink: #2a1f06;
  --v2-water: #36a6e5;
  --v2-blue: #0c63f3; /* --blue del prototipo de Mauri */
  --v2-green: #4fcf8a;
  --v2-card: rgba(255, 255, 255, 0.06);
  --v2-line: rgba(238, 235, 227, 0.14);
}

/* Fuente del prototipo de Mauri (--font-body): Roboto primero. En Android y en el CI
   (fonts-roboto) es la misma; en iOS cae a SF. Así lo que mide el CI a 375 × 667 es lo que ve el teléfono. */
.v2-screen { max-width: 520px; margin: 0 auto; min-height: 100dvh; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px)); color: var(--v2-ink); background: transparent; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.35; }
/* Agua de fondo (prototipo de Mauri, #water): canvas fijo detrás de la pantalla; el
   navy de html/body queda debajo como base. No recibe toques: el Stimulus escucha en
   document y deja pasar los controles. Se llama v2-pond porque .v2-water ya es el
   tono azul de los botones y slots de agua. */
.v2-pond { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
/* Sombra del prototipo para que el texto se lea sobre el patrón de olas. */
.v2-title, .v2-eyebrow, .v2-text, .v2-muted { text-shadow: 0 1px 2px rgba(3, 7, 11, 0.95), 0 0 16px rgba(3, 7, 11, 0.85), 0 0 30px rgba(3, 7, 11, 0.6); }
/* Pico fija su propia fuente en títulos y controles: dentro de la V2 heredan la de arriba. */
.v2-screen :is(h1, h2, h3, h4, p, button, input, select, textarea, label) { font-family: inherit; }
.v2-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.v2-back { color: var(--v2-gold-hi); font-size: 17px; text-decoration: none; padding: 10px 6px 10px 0; }
.v2-body { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.v2-eyebrow { margin: 0; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--v2-muted); }
.v2-title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--v2-ink); }
.v2-text { margin: 0; color: var(--v2-ink); }
.v2-muted { margin: 0; color: var(--v2-muted); font-size: 16px; }
.v2-card { padding: 16px; border-radius: 18px; background: var(--v2-card); border: 1px solid var(--v2-line); }

/* Oro con bisel (nueva-ui.md §5 "Letras doradas"): degradado + borde claro arriba, oscuro abajo. */
.v2-gold { background: linear-gradient(180deg, var(--v2-gold-hi) 0%, var(--v2-gold) 55%, #9c7d2f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.25); font-weight: 700; }
.v2-goal { font-size: 56px; line-height: 1; letter-spacing: -0.02em; }

/* Acciones: principal abajo, al pulgar; secundario = link. */
.v2-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; }
.v2-form-inline { display: contents; }
.v2-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 20px; border-radius: 16px; border: 0; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; text-decoration: none; }
.v2-primary { background: linear-gradient(180deg, var(--v2-gold-hi), var(--v2-gold)); color: var(--v2-gold-ink); box-shadow: 0 6px 18px rgba(205, 175, 95, 0.28); }
.v2-primary.v2-water { background: linear-gradient(180deg, #6cc3f3, var(--v2-water)); color: #06202e; box-shadow: 0 6px 18px rgba(54, 166, 229, 0.28); }
.v2-off { background: none; color: rgba(205, 175, 95, 0.6); border: 1.5px solid rgba(205, 175, 95, 0.5); box-shadow: none; }
.v2-link { background: none; border: 0; padding: 10px; font: inherit; font-size: 17px; color: var(--v2-gold-hi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Pregunta con 2 o 3 respuestas grandes. */
.v2-choices { display: flex; flex-direction: column; gap: 10px; }
.v2-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 14px 18px; border-radius: 16px; background: var(--v2-card); border: 1.5px solid var(--v2-line); color: var(--v2-ink); font: inherit; font-size: 18px; text-align: left; cursor: pointer; text-decoration: none; }
.v2-choice.is-on, .v2-choice[aria-pressed="true"] { border-color: var(--v2-gold); box-shadow: inset 0 0 0 1px var(--v2-gold); }
.v2-choice-sub { display: block; font-size: 15px; color: var(--v2-muted); }

/* Campos: grandes, una pregunta por pantalla. */
.v2-field { display: flex; flex-direction: column; gap: 6px; }
.v2-input { width: 100%; min-height: 56px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--v2-line); background: rgba(0, 0, 0, 0.25); color: var(--v2-ink); font: inherit; font-size: 24px; }
.v2-input:focus { outline: 2px solid var(--v2-gold); outline-offset: 2px; }
.v2-time { display: flex; gap: 8px; align-items: center; }
.v2-time .v2-input { text-align: center; font-variant-numeric: tabular-nums; }

/* El botón apagado que responde: el campo que falta tiembla con borde dorado. */
.v2-needs { animation: v2-needs 0.55s cubic-bezier(0.3, 0.7, 0.3, 1); outline: 2px solid var(--v2-gold-hi); outline-offset: 4px; border-radius: 14px; }
@keyframes v2-needs { 0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 5px 0; } }

/* Hexágonos de progreso (onboarding: 8; racha: 7 de la semana). */
.v2-hexes { display: flex; gap: 6px; }
.v2-hex { width: 14px; height: 16px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(205, 175, 95, 0.22); }
.v2-hex.is-on { background: var(--v2-gold); }
/* Pasos del onboarding (prototipo .pip): hechos en azul relleno, el actual con borde dorado. */
.v2-pip { width: 14px; height: 13px; display: block; }
.v2-pip polygon { fill: transparent; stroke: rgba(238, 235, 227, 0.28); stroke-width: 1.6; transition: fill 0.4s, stroke 0.4s; }
.v2-pip.is-done polygon { fill: var(--v2-blue); stroke: var(--v2-blue); }
.v2-pip.is-now polygon { stroke: var(--v2-gold-hi); fill: rgba(205, 175, 95, 0.25); }
.v2-hexes:has(.v2-pip) { gap: 9px; }

/* Botón hexagonal de "mantener presionado" (compromiso y cierre de sesión; prototipo .hex):
   cara oscura con borde de oro y canto 3D; se llena de oro de abajo hacia arriba con --fill
   (lo pone el Stimulus), tiembla más fuerte conforme carga (--amp, .is-charging) y al
   completarse se hunde (.is-sunk). Hexágono de punta plana como el prototipo. */
.v2-hold { --v2-hexclip: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); position: relative; width: 150px; height: 140px; margin: 0 auto; border: 0; background: none; cursor: pointer; color: var(--v2-gold-hi); font: inherit; font-size: 17px; font-weight: 700; transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.3, 1.4); }
.v2-hold::before { content: ""; position: absolute; inset: 0 0 -7% 0; top: 7%; clip-path: var(--v2-hexclip); background: linear-gradient(180deg, #5e4819, #211906); }
.v2-hold .v2-hold-face { position: absolute; inset: 0; clip-path: var(--v2-hexclip); background: linear-gradient(135deg, #fff1c4, #cdaf5f 50%, #7e6127); }
.v2-hold .v2-hold-face::after { content: ""; position: absolute; inset: 2.5px 2.8px; clip-path: var(--v2-hexclip); background: #16130c; }
.v2-hold .v2-hold-fill { position: absolute; inset: 2.5px 2.8px; clip-path: var(--v2-hexclip); background: linear-gradient(150deg, #f6e2a4, #d9ba68 42%, #a07e35); -webkit-mask-image: linear-gradient(to top, #000 calc(var(--fill, 0) * 100%), transparent calc(var(--fill, 0) * 100%)); mask-image: linear-gradient(to top, #000 calc(var(--fill, 0) * 100%), transparent calc(var(--fill, 0) * 100%)); }
.v2-hold .v2-hold-glow { position: absolute; left: 50%; top: 46%; width: 250px; height: 230px; margin: -115px 0 0 -125px; border-radius: 50%; background: radial-gradient(closest-side, rgba(241, 216, 143, 0.3), rgba(205, 175, 95, 0.12) 55%, rgba(205, 175, 95, 0) 100%); pointer-events: none; opacity: calc(0.35 + var(--fill, 0) * 0.65); transform: scale(calc(0.9 + var(--fill, 0) * 0.55)); }
.v2-hold .v2-hold-label { position: relative; z-index: 1; display: block; white-space: pre-line; color: var(--v2-gold-hi); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); transition: color 0.35s; }
.v2-hold[data-half] .v2-hold-label { color: var(--v2-gold-ink); text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35); }
.v2-hold-hand { display: block; width: 26px; height: 26px; margin: 0 auto 4px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); animation: v2-press 1.4s ease-in-out infinite; }
.v2-hold[data-half] .v2-hold-hand { filter: none; }
.v2-hold.is-charging .v2-hold-hand { animation: none; }
@keyframes v2-press { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
.v2-hold:active:not(.is-sunk) { transform: translateY(3px) scale(0.965); }
.v2-hold.is-charging { animation: v2-shake 0.09s linear infinite; }
@keyframes v2-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: calc(var(--amp, 0) * 1px) calc(var(--amp, 0) * -0.6px); }
  50% { translate: calc(var(--amp, 0) * -0.8px) calc(var(--amp, 0) * 0.5px); }
  75% { translate: calc(var(--amp, 0) * 0.6px) calc(var(--amp, 0) * 0.8px); }
}
.v2-hold.is-sunk { transition: transform 0.7s cubic-bezier(0.55, 0, 0.8, 0.2), opacity 0.7s ease-in, filter 0.7s; transform: translateY(22px) scale(0.5); opacity: 0; filter: blur(3px); }
@media (prefers-reduced-motion: reduce) {
  .v2-hold.is-charging, .v2-hold-hand { animation: none; }
  .v2-hold.is-sunk { transform: none; filter: none; }
}
.v2-hold-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; padding: 10px 16px; border-radius: 14px; background: rgba(6, 16, 26, 0.95); border: 1px solid rgba(205, 175, 95, 0.45); color: var(--v2-ink); font-size: 15px; }
.v2-hold-tip[hidden] { display: none; }

/* Hoy: los dos ejercicios del día. */
.v2-slot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 14px 18px; border-radius: 18px; text-decoration: none; color: inherit; }
.v2-slot.v2-land { background: linear-gradient(180deg, var(--v2-gold-hi), var(--v2-gold)); color: var(--v2-gold-ink); }
.v2-slot.v2-water { background: linear-gradient(180deg, #6cc3f3, var(--v2-water)); color: #06202e; }
.v2-slot.is-done { background: var(--v2-card); color: var(--v2-green); border: 1px solid var(--v2-line); }
.v2-slot-kicker { display: block; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.v2-slot-name { display: block; font-size: 19px; font-weight: 700; }

/* Flor de 7 pilares (SVG inline o grid de hexágonos). */
.v2-flower { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.v2-petal { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 8px 4px; border-radius: 14px; background: var(--v2-card); border: 1px solid var(--v2-line); text-decoration: none; color: inherit; }
.v2-petal-pct { font-size: 18px; font-weight: 700; color: var(--v2-gold-hi); }
.v2-petal-name { font-size: 12px; color: var(--v2-muted); text-align: center; }

/* Cronómetro: anillo grande y número. */
.v2-ring { position: relative; width: min(72vw, 300px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.v2-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.v2-ring-track { fill: none; stroke: var(--v2-line); stroke-width: 10; }
.v2-ring-bar { fill: none; stroke: var(--v2-gold); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.v2-ring-num { font-size: 64px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.v2-ring.is-over .v2-ring-bar { stroke: var(--v2-green); }
.v2-flash { animation: v2-flash 0.5s ease-out; }
@keyframes v2-flash { 0% { background: rgba(205, 175, 95, 0.35); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) { .v2-needs, .v2-flash { animation: none; } }

/* ---- Panel B · Sesión: ejercicio, cronómetro, resultado, feedback y cierre ---- */
.v2-ex { display: flex; flex-direction: column; gap: 12px; }
.v2-figure { position: relative; display: flex; justify-content: center; align-items: center; min-height: 56px; }
.v2-figure-img { max-height: 26dvh; max-width: 100%; object-fit: contain; border-radius: 16px; background: rgba(255, 255, 255, 0.92); cursor: pointer; }
.v2-figure-video { position: absolute; right: 8px; bottom: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(205, 175, 95, 0.6); background: rgba(6, 16, 26, 0.85); color: var(--v2-gold-hi); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.v2-figure:not(:has(img)) .v2-figure-video { position: static; }
.v2-goal-box { display: flex; flex-direction: column; gap: 4px; }
.v2-goal-box .v2-goal { font-size: clamp(40px, 12vw, 56px); }
.v2-desc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.v2-desc-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--v2-muted); }
.v2-link-sm { padding: 6px 0; font-size: 17px; }
.v2-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--v2-line); background: var(--v2-card); color: var(--v2-ink); font: inherit; font-size: 16px; text-decoration: none; cursor: pointer; }
.v2-dialog { width: min(92vw, 480px); max-height: 90dvh; padding: 0; border: 1px solid var(--v2-line); border-radius: 20px; background: var(--v2-bg); color: var(--v2-ink); }
.v2-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.v2-dialog-body { display: flex; flex-direction: column; gap: 12px; padding: 20px; font-size: 17px; }
.v2-video .dry-video { max-height: 70dvh; }
.v2-safety .dry-warn, .v2-safety .dry-body { font-size: 18px; color: var(--v2-ink); }
.v2-choice-gold { background: linear-gradient(180deg, var(--v2-gold-hi), var(--v2-gold)); color: var(--v2-gold-ink); border-color: transparent; font-weight: 700; }
.v2-unit { font-size: 20px; color: var(--v2-muted); }
.v2-check { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; font-size: 40px; font-weight: 700; }
.v2-check.is-gold { background: linear-gradient(180deg, var(--v2-gold-hi), var(--v2-gold)); color: var(--v2-gold-ink); }
.v2-check.is-blue { background: linear-gradient(180deg, #6cc3f3, var(--v2-water)); color: #06202e; }
.v2-feed-line { margin: 0; font-size: 20px; line-height: 1.35; }
.v2-share { position: relative; padding: 16px; border-radius: 18px; border: 2px solid var(--v2-gold); color: var(--v2-ink); opacity: 0.6; }
.v2-share-soon { position: absolute; top: 10px; right: 12px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--v2-gold-hi); }
.v2-timer { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.v2-timer-sub { margin: 0; min-height: 1.4em; text-align: center; font-size: 19px; color: var(--v2-ink); }
.v2-ring-num.is-small { font-size: 44px; }
.v2-timer { flex: 1; }
.v2-timer-actions { width: 100%; margin-top: auto; }
/* Pantalla completa de verdad: sin el relleno de `main.container` de Pico, que
   sumaba ~30 px a los 100dvh de .v2-screen y obligaba a hacer scroll en 375 × 667. */
/* El fondo navy va también en html y body: Pico pinta :root y custom.css pone body en
   negro con !important. En la app nativa el vidrio del header y el rebote del scroll
   enseñan el color de html, así que debe ser el mismo navy. */
html:has(.v2-screen), body:has(.v2-screen) { background: var(--v2-bg) !important; }
main.container:has(.v2-screen) { padding: 0; max-width: none; }
.v2-timer .v2-ring { width: min(64vw, 38dvh, 300px); }
.v2-feed { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.v2-done { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.v2-hold-wrap { margin-top: auto; padding-top: 48px; display: flex; justify-content: center; }
.v2-hold { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.v2-hold-finger { display: block; font-size: 22px; animation: v2-finger 1.6s ease-in-out infinite; }
@keyframes v2-finger { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.v2-joker-gem { width: 64px; height: 72px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(180deg, var(--v2-gold-hi), var(--v2-gold)); }
@media (prefers-reduced-motion: reduce) { .v2-hold-finger { animation: none; } }
/* Pico pone width: 100 % y margen a todo submit/botón: el hexágono y las respuestas no.
   El texto se centra con grid (cara, relleno y globo son absolutos y no cuentan):
   un <button> ya centra su contenido en vertical, así que un padding-top fijo lo
   bajaba ~25 px del centro del hexágono. */
button.v2-hold { display: grid; place-items: center; width: 150px; height: 140px; padding: 0; margin: 0 auto; border: 0; background: none; box-shadow: none; line-height: 1.2; }
.v2-choices .v2-choice, .v2-pills .v2-pill, .v2-actions .v2-btn, .v2-actions .v2-link { margin: 0; }
button.v2-hold .v2-hold-label { padding: 0 14px; font-size: 16px; line-height: 1.15; text-align: center; }
/* M-6: texto ≥ 17 px y toques ≥ 48 px en lo del panel B (spec §4.5). */
.v2-pill, .v2-figure-video { min-height: 48px; font-size: 17px; }
.v2-share-soon { font-size: 17px; letter-spacing: 0.02em; }
button.v2-hold .v2-hold-label { font-size: 17px; padding: 0 14px; }
.v2-hold-tip { font-size: 17px; }