/* Calculadora de ayuno intermitente (prefijo ay-) — usa mm-tools.css */
.ay { --ph0: #8ec5ff; --ph1: #a98bff; --ph2: #d061f2; --ph3: #f036e1; --ay-over: rgba(255,255,255,.3); }
html[data-theme="light"] .ay { --ph0: #3f8fd9; --ph1: #7a55e6; --ph2: #a832c9; --ph3: #c81fb8; --ay-over: rgba(22,16,26,.28); }
.ay-live, .ay-week, .ay-info { grid-column: 1 / -1; }
.ay-warn { margin-bottom: 20px; }
.ay-warn b { display: block; }

/* ---------- Protocolos ---------- */
.ay-protos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .ay-protos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ay-proto { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px 14px 13px; min-height: 96px; border-radius: 16px; cursor: pointer;
  background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s, transform .2s cubic-bezier(.16,1,.3,1); }
.ay-proto input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ay-proto:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ay-proto:active { transform: scale(.98); }
.ay-proto:has(input:checked) { background: linear-gradient(135deg, rgba(240,54,225,.10), rgba(145,73,255,.10)); box-shadow: inset 0 0 0 1.5px #f036e1; }
.ay-proto:has(input:focus-visible) { outline: 2px solid #f036e1; outline-offset: 2px; }
.ay-ratio { font-size: 24px; font-weight: 500; letter-spacing: -0.04em; color: var(--paper); line-height: 1.1; }
.ay-pop { justify-self: start; font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 99px; color: var(--tl-acc); background: rgba(240,54,225,.1); box-shadow: inset 0 0 0 1px rgba(240,54,225,.3); white-space: nowrap; }
.ay-plevel { font-size: 12.5px; color: var(--paper-dim); line-height: 1.35; }
.ay-dots { display: flex; gap: 3px; margin-top: auto; }
.ay-dots i { width: 14px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.ay-dots i.on { background: linear-gradient(90deg, #9149ff, #f036e1); }
.ay-proto.wide { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; }
.ay-proto.wide .ay-dots { margin-top: 0; }
@media (max-width: 420px) { .ay-proto.wide { grid-template-columns: auto minmax(0, 1fr); } .ay-proto.wide .ay-dots { grid-column: 2; } }
.ay-pdesc { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--paper-dim); min-height: 42px; }
.ay-sched.is-off { opacity: .4; pointer-events: none; }

.ay-time-row { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.is-24 .ay-time-row { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); }
.ay-time-row select.pg-input { height: 56px; min-height: 56px; font-size: 22px; letter-spacing: -0.02em; padding-left: 18px; border-radius: 16px; }
.ay-colon { font-family: 'JetBrains Mono', monospace; font-size: 22px; color: var(--paper-faint); text-align: center; }
.ay-ap { flex-wrap: nowrap; }
.ay-ap button { min-height: 44px; padding: 0 12px; }
@media (max-width: 400px) { .ay-time-row { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); } .ay-ap { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; } }
.ay .tl-seg button[disabled] { opacity: .35; cursor: default; }

/* ---------- Reloj ---------- */
.ay-out-h { margin-bottom: 6px; }
.ay-clock { max-width: 460px; margin: 0 auto; }
.ay-clock-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; user-select: none; -webkit-user-select: none; }
.ay-face { fill: rgba(var(--glass-tint), .025); }
.ay-arc-fast { fill: none; stroke: rgba(var(--glass-tint), .09); stroke-width: 24; }
.ay-arc-eat { fill: none; stroke: url(#ay-g); stroke-width: 24; cursor: grab; touch-action: none; }
.ay-tick { stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.ay-tick.maj { stroke: var(--paper-faint); }
.ay-hl { fill: var(--paper-dim); font-size: 13px; }
.ay-now { stroke: var(--paper-faint); stroke-width: 1.5; stroke-linecap: round; }
.ay-now-dot { fill: var(--paper); }
.ay-meal { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.ay-end { fill: var(--ink); stroke: #f036e1; stroke-width: 2.5; }
.ay-handle { cursor: grab; touch-action: none; outline: none; }
.is-drag .ay-handle, .is-drag .ay-arc-eat { cursor: grabbing; }
.ay-hit { fill: transparent; }
.ay-knob { fill: #fff; stroke: #9149ff; stroke-width: 2.5; transition: stroke-width .2s; }
.ay-handle:hover .ay-knob, .ay-handle:focus-visible .ay-knob { stroke: #f036e1; stroke-width: 5; }
.ay-grip { stroke: #9149ff; stroke-width: 1.5; stroke-linecap: round; fill: none; pointer-events: none; }
.ay-c1 { fill: var(--paper-faint); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ay-c2 { fill: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 500; letter-spacing: -0.04em; }
.ay-c3 { fill: var(--paper-dim); font-size: 13px; }
.ay-clock-leg { list-style: none; padding: 0; margin: 6px 0 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 12.5px; color: var(--paper-dim); }
.ay-clock-leg li { display: inline-flex; align-items: center; gap: 7px; }
.ay-clock-leg i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.ay-clock-leg .eat { background: linear-gradient(135deg, #9149ff, #f036e1); }
.ay-clock-leg .fast { background: rgba(var(--glass-tint), .14); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ay-clock-leg .meal { border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }
.ay-win { margin: 4px 0 18px; }
.ay-win .tl-big-label { margin-bottom: 8px; }
.ay-win-v { margin: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ay-win-v span { white-space: nowrap; }
.ay-win-v i { font-style: normal; color: var(--tl-acc); font-size: .7em; }
.ay-kpis dd { font-family: 'DM Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.02em; }
.ay-kpis dd small { margin-left: 6px; font-size: 12px; font-weight: 400; }
.ay-meal-t { font-variant-numeric: tabular-nums; }
.ay-meals-h { margin: 24px 0 6px; }
.ay-meals { list-style: none; margin: 0; padding: 0; }
.ay-meals li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); animation: tlIn .4s cubic-bezier(.16,1,.3,1) both; }
.ay-meals li:nth-child(2) { animation-delay: 50ms; } .ay-meals li:nth-child(3) { animation-delay: 100ms; }
.ay-meal-t { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 500; font-size: 17px; color: var(--paper); letter-spacing: -0.02em; white-space: nowrap; }
.ay-meal-l b { display: block; font-size: 14px; font-weight: 600; color: var(--paper); }
.ay-meal-l small { display: block; font-size: 12.5px; color: var(--paper-faint); margin-top: 2px; }
.ay-actions { margin-top: 20px; }
.ay-52-box { margin-top: 10px; }
.ay-52-box > svg { color: var(--tl-acc); }
.ay-52-days { margin: 20px 0 18px; }
.ay-52-days .tl-seg button { padding: 0 12px; }
@media (max-width: 480px) { .ay-52-days .tl-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } }

/* ---------- Secciones a lo ancho ---------- */
.ay-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.ay-sec-head .tl-sub { margin: 0; max-width: 420px; }
.ay-title { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }

/* Cronómetro */
.ay-live-grid { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 32px; align-items: center; }
.ay-ring-svg { display: block; width: 184px; height: 184px; }
.ay-ring-tr { fill: none; stroke: rgba(var(--glass-tint), .08); stroke-width: 12; }
.ay-ring-pr { fill: none; stroke: url(#ay-rg); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.16,1,.3,1); }
.ay-ring-pct { fill: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 500; letter-spacing: -0.04em; }
.ay-ring-sub { fill: var(--paper-faint); font-size: 12.5px; }
.ay-live-big { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; color: var(--paper-dim); text-wrap: balance; }
.ay-live-big b { color: var(--paper); font-weight: 600; white-space: nowrap; }
.ay-live-sub { margin: 10px 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--paper-dim); }
.ay-live-sub b { color: var(--paper); font-weight: 500; }
.ay-live.is-done .ay-live-big b { color: var(--tl-ok); }
@media (max-width: 640px) { .ay-live-grid { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; } .ay-ring-svg { width: 160px; height: 160px; } .ay-live-txt .tl-actions { justify-content: center; } }

/* Fases */
.ay-phases { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.ay-track { position: relative; padding: 52px 0 0; margin: 4px 0 22px; }
.ay-bands { position: relative; height: 16px; border-radius: 99px; overflow: hidden; background: rgba(var(--glass-tint), .06); }
.ay-band { position: absolute; top: 0; bottom: 0; opacity: .55; }
.ay-band.b0 { background: var(--ph0); } .ay-band.b1 { background: var(--ph1); } .ay-band.b2 { background: var(--ph2); }
.ay-band.b3 { background: linear-gradient(90deg, transparent, var(--ph3) 30%); }
.ay-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ay-over); transition: width .6s cubic-bezier(.16,1,.3,1); }
.ay-hours { position: relative; height: 18px; margin-top: 8px; }
.ay-hours span { position: absolute; top: 0; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--paper-faint); white-space: nowrap; }
.ay-hours span:first-child { transform: none; } .ay-hours span:last-child { transform: translateX(-100%); }
.ay-goal, .ay-mark { position: absolute; bottom: 26px; width: 0; border-left: 1.5px dashed var(--paper-dim); }
.ay-goal { top: 26px; }
.ay-mark { top: 0; border-left: 2px solid #f036e1; }
.ay-goal b, .ay-mark b { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 500; white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--paper); }
.ay-mark b { background: #f036e1; color: #fff; box-shadow: none; }
.ay-goal.r b, .ay-mark.r b { transform: translateX(-100%); }
.ay-goal.l b, .ay-mark.l b { transform: translateX(-2px); }
.ay-phase-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ay-ph { position: relative; padding: 18px 18px 18px; border-radius: 18px; background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, box-shadow .3s; }
.ay-ph::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; }
.ay-ph.b0::before { background: var(--ph0); } .ay-ph.b1::before { background: var(--ph1); } .ay-ph.b2::before { background: var(--ph2); } .ay-ph.b3::before { background: var(--ph3); }
.ay-ph-h { font-size: 12px; color: var(--paper-faint); }
.ay-ph h3 { margin: 8px 0 6px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.ay-ph p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--paper-dim); }
.ay-ph-now { display: none; margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--tl-acc); }
.ay-ph.on { background: linear-gradient(135deg, rgba(240,54,225,.08), rgba(145,73,255,.08)); box-shadow: inset 0 0 0 1.5px rgba(240,54,225,.55); }
.ay-ph.on .ay-ph-now { display: inline-flex; align-items: center; gap: 6px; }
.ay-ph.on .ay-ph-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ayPulse 1.6s ease-in-out infinite; }
@keyframes ayPulse { 50% { opacity: .3; } }
@media (max-width: 1100px) { .ay-phase-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ay-phase-list { grid-template-columns: 1fr; } }

@media (max-width: 560px) { .ay-hours span.minor { display: none; } }

/* Plan semanal */
.ay-week-grid { display: grid; gap: 4px; }
.ay-wk-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 250px; gap: 18px; align-items: center; min-height: 46px; padding: 0 10px; border-radius: 14px; }
.ay-wk-row.today { background: rgba(var(--glass-tint), .04); box-shadow: inset 0 0 0 1px var(--line); }
.ay-wk-axis { min-height: 22px; }
.ay-wk-ticks { position: relative; height: 18px; }
.ay-wk-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--paper-faint); white-space: nowrap; }
.ay-wk-ticks span:first-child { transform: none; } .ay-wk-ticks span:last-child { transform: translateX(-100%); }
.ay-wk-day { font-size: 14px; font-weight: 600; color: var(--paper); display: flex; flex-direction: column; line-height: 1.2; }
.ay-wk-day small { font-size: 11px; font-weight: 500; color: var(--tl-acc); letter-spacing: .06em; text-transform: uppercase; }
.ay-wk-bar { position: relative; height: 18px; border-radius: 99px; background: rgba(var(--glass-tint), .07); box-shadow: inset 0 0 0 1px var(--line); }
.ay-wk-seg { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #9149ff, #f036e1); }
.ay-wk-seg.normal { background: rgba(var(--glass-tint), .14); }
.ay-wk-meal { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; transform: translate(-50%, -50%); }
.ay-wk-txt { font-size: 13.5px; color: var(--paper-dim); font-variant-numeric: tabular-nums; }
.ay-wk-txt b { color: var(--tl-acc); font-weight: 600; }
@media (max-width: 760px) {
  .ay-wk-row { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; padding: 8px 10px; }
  .ay-wk-axis > span:last-child { display: none; }
  .ay-wk-txt { grid-column: 2; font-size: 12.5px; }
  .ay-wk-ticks span.minor { display: none; }
  .ay-wk-day { grid-row: span 2; }
  .ay-wk-axis { padding-top: 0; padding-bottom: 0; }
}

/* Información */
.ay-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.ay-block h3 { margin: 0 0 16px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ay-block .tl-note { margin-top: 14px; }
.ay-breaks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ay-bk-h { margin: 0 0 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.ay-bk-h.ok { color: var(--tl-ok); } .ay-bk-h.bad { color: var(--tl-bad); }
.ay-who { padding: 22px; border-radius: 20px; background: rgba(255,122,138,.06); box-shadow: inset 0 0 0 1px rgba(255,122,138,.3); }
@media (max-width: 900px) { .ay-info-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ay-breaks { grid-template-columns: 1fr; } .ay-who { padding: 18px; } }

@media (prefers-reduced-motion: reduce) { .ay-ring-pr, .ay-fill { transition: none; } .ay-meals li { animation: none; } .ay-ph.on .ay-ph-now::before { animation: none; } }

/* ---------- Impresión ---------- */
@media print {
  html, html[data-theme="light"] { --paper: #16101a; --paper-dim: #3c3440; --paper-faint: #5e5562; --line: rgba(0,0,0,.12); --line-strong: rgba(0,0,0,.22); --glass-bg: transparent; --glass-bg-strong: rgba(0,0,0,.03); --glass-tint: 0, 0, 0; --ink: #fff; }
  .pg-hero, .pg-sec:not(.pg-tool), .ay-in, #ay-live-btns, .ay-live-grid { display: none !important; }
  .pg-tool .tl-app { grid-template-columns: 1fr; }
  .tl-panel { box-shadow: none !important; border: 1px solid #ddd; backdrop-filter: none !important; break-inside: avoid; }
  .ay-meals li { animation: none; }
}