/* POMODORO DENTRO DEL TEMA: tarjeta en la portada y reloj en la barra del lector. Cristal, minimalista. */
.pomo-card{--pc:var(--lx-ac,#1E7A5A);display:flex;align-items:center;gap:22px;margin:0 0 24px;padding:18px 22px 18px 18px;border-radius:26px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 9%,transparent),transparent 60%),color-mix(in srgb,var(--lx-sup,#fff) 72%,transparent);
  border:1px solid color-mix(in srgb,var(--pc) 16%,var(--lx-linea,rgba(0,0,0,.08)));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -26px color-mix(in srgb,var(--pc) 60%,transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);position:relative;overflow:hidden}
.pomo-card::after{content:"";position:absolute;width:220px;height:220px;left:-60px;top:-80px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 22%,transparent),transparent);pointer-events:none;opacity:.7;transition:opacity .6s}
.pomo-card.descanso,.pomo-pill.descanso{--pc:#3E8FB0}
.pomo-anillo{position:relative;flex:none;width:148px;height:148px;z-index:1}
.pomo-anillo svg,.pomo-pill svg{width:100%;height:100%;transform:rotate(-90deg)}
.pomo-fondo{fill:none;stroke:color-mix(in srgb,var(--pc) 13%,transparent);stroke-width:6}
.pomo-arco{fill:none;stroke:var(--pc);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .5s linear,stroke .4s;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--pc) 45%,transparent))}
.pomo-dentro{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:3px;text-align:center}
.pomo-fase{font:600 10.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--lx-tenue,#5B6862)}
.pomo-tiempo{font:300 38px/1 "Inter",system-ui,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--lx-txt,#17201B)}
.pomo-puntos{display:flex;gap:4px;margin-top:4px}
.pomo-puntos i{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--pc) 22%,transparent)}
.pomo-puntos i.on{background:var(--pc)}
.pomo-txt{position:relative;z-index:1;min-width:0;flex:1}
.pomo-ceja{display:block;font:600 11.5px var(--f-body,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--pc)}
.pomo-nota{margin:6px 0 14px;font-size:14px;line-height:1.5;color:var(--lx-tenue,#5B6862)}
.pomo-bots{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pomo-prim{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;padding:12px 22px 12px 18px;font:600 15px var(--f-body,Inter,sans-serif);color:#fff;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 88%,#fff),var(--pc));box-shadow:0 10px 24px -12px var(--pc),0 1px 0 rgba(255,255,255,.35) inset;transition:transform .15s,box-shadow .15s}
.lx .pomo-prim,.lx .pomo-prim span{color:#fff}
.pomo-prim:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px var(--pc),0 1px 0 rgba(255,255,255,.35) inset}
.pomo-sec{border:0;background:none;padding:8px 6px;font:500 13px var(--f-body,Inter,sans-serif);color:var(--lx-tenue,#5B6862);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pomo-card.activo .pomo-anillo::before{content:"";position:absolute;inset:10px;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--pc) 30%,transparent);animation:pomoLatido 2.6s ease-in-out infinite}
@keyframes pomoLatido{50%{box-shadow:0 0 0 10px transparent,0 0 34px 2px color-mix(in srgb,var(--pc) 18%,transparent)}}

/* Reloj pequeño en la barra del lector */
.pomo-pill{--pc:var(--lx-ac,#1E7A5A);display:inline-flex;align-items:center;gap:7px;flex:none;height:38px;padding:0 12px 0 6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pc) 22%,var(--lx-linea,rgba(0,0,0,.08)));
  background:color-mix(in srgb,var(--pc) 7%,var(--lx-sup,#fff));color:var(--lx-txt,#17201B);cursor:pointer;font:500 14px/1 "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pomo-pill svg{width:26px;height:26px}
.pomo-pill .pomo-fondo,.pomo-pill .pomo-arco{stroke-width:12}
.pomo-pill i{display:inline-grid;place-items:center;color:var(--pc)}.pomo-pill i svg{width:14px;height:14px;transform:none}
.pomo-pill.activo{box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 12%,transparent)}
.pomo-pill:hover{border-color:var(--pc)}

@media (max-width:700px){
  .pomo-card{flex-direction:column;text-align:center;padding:20px 16px}
  .pomo-bots{justify-content:center}
  /* En el móvil la barra no da para más: el reloj flota abajo a la izquierda. */
  .pomo-pill.pomo-flota{position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;height:44px;padding:0 14px 0 7px;font-size:15px;
    background:color-mix(in srgb,var(--lx-sup,#fff) 82%,transparent);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 12px 30px -14px rgba(0,0,0,.35)}
  .pomo-pill.pomo-flota svg{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){.pomo-card.activo .pomo-anillo::before{animation:none}.pomo-arco{transition:none}}