/* ============================================================
   "Ahora" — composicion de pantallas

   Los tokens, las tipografias, la base y la receta de cristal viven en
   tokens.css, que carga antes que este archivo. Aca solo se compone.

   Reglas del handoff, no negociables:
   · 4 destinos fijos + captura flotante
   · limite de 5 elementos visibles en Hoy
   · el tiempo SIEMPRE en barra ademas de numero
   · nada en rojo, ningun contador de atrasadas
   · objetivos de toque >= 44px
   · cada proyecto tiene color Y forma (no depende del matiz)
   ============================================================ */

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input, textarea, select { font: inherit; color: inherit; }

/* --- Formas por proyecto ---
   Color Y forma: dos personas con distinta percepcion del color siguen
   distinguiendo los proyectos. */

[data-proj='1'] { --pc: var(--p1); }
[data-proj='2'] { --pc: var(--p2); }
[data-proj='3'] { --pc: var(--p3); }
[data-proj='4'] { --pc: var(--p4); }
[data-proj='5'] { --pc: var(--p5); }
[data-proj='6'] { --pc: var(--p6); }

[data-shape] {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--pc);
  border-radius: 3px;
}
[data-shape='ci'] { border-radius: 50%; }
[data-shape='di'] { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); }
[data-shape='tr'] { width: 11px; height: 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
[data-shape='ba'] { width: 13px; height: 5px; border-radius: var(--r-pill); }
[data-shape='ri'] {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--pc);
}

/* --- Animaciones --- */

@keyframes csPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes csToast {
  0% { opacity: 0; transform: translateY(14px); }
  18% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes csPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes csRise { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

/* Movimiento reducido: el diseno no pide apagarlo todo. Mueren los bucles
   ambientales (el drift del fondo, la respiracion, el ecualizador) y el
   cambio de pantalla se vuelve un fundido corto, pero los estados siguen
   confirmandose: quitar toda transicion deja la interfaz muda. */
@media (prefers-reduced-motion: reduce) {
  .bg-glows i { animation: none !important; }
  .breath-blob, .eq-bar, [data-loop-anim] { animation: none !important; }
  .view-anim { animation: fade-in 0.15s linear !important; }
  * { transition-duration: 0.01ms !important; }
}

button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--sp-2);
}

/* ============================================================
   Acceso
   ============================================================ */

.screen-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 8vw, 56px);
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx3);
}

.screen-login h1 {
  font-size: var(--h1);
  line-height: 1.15;
  margin: 14px 0 6px;
  font-weight: 700;
}

.login-sub { margin: 0 0 28px; color: var(--tx2); font-size: 15px; }

.field-label { display: block; font-size: 13px; color: var(--tx2); margin-bottom: 7px; }

.field {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: var(--surf);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-bottom: 16px;
}

.btn-primary-xl {
  width: 100%;
  height: 60px;
  background: var(--acc);
  color: var(--accTx);
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
}

.btn-link {
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  color: var(--tx2);
  font-size: 15px;
  text-decoration: underline;
}

/* El diseno no usa rojo en ningun estado. Los errores van en el ambar de sistema. */
.error-text {
  color: var(--warm);
  font-size: 14px;
  min-height: 1.3em;
  margin: -6px 0 12px;
  font-weight: 700;
}

/* ============================================================
   Shell
   ============================================================ */

.app-shell { display: flex; min-height: 100vh; }

/* Rail lateral: solo en escritorio */
.rail {
  width: 236px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--surf);
  display: none;
  flex-direction: column;
  padding: 22px 14px;
}
@media (min-width: 1100px) {
  .rail { display: flex; }
}

.rail-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx3);
  padding: 0 10px 20px;
}

.rail-btn {
  min-height: 52px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  color: var(--tx2);
}
.rail-btn.active { background: var(--accSoft); color: var(--acc); }
.rail-btn .count { margin-left: auto; font-size: 12px; color: var(--tx3); }

.rail-capture {
  margin-top: 18px;
  height: 52px;
  background: var(--acc);
  color: var(--accTx);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rail-spacer { flex: 1; }

.rail-settings {
  min-height: 48px;
  padding: 0 12px;
  text-align: left;
  color: var(--tx2);
  font-size: 15px;
  border-radius: 10px;
}

.main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  min-height: 100vh;
}

/* --- Cabecera ---
   En los destinos: identidad a la izquierda (fecha + nivel, y lleva al
   progreso) y dos botones redondos a la derecha. En las pantallas
   apiladas: titulo y Cerrar. */

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: max(var(--sp-3), env(safe-area-inset-top)) var(--pad) var(--sp-6);
}

.head-id {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  text-align: left;
  border-radius: var(--r-mini);
}

.head-date {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: rgba(244, 243, 247, 0.64);
}

.head-level {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--ink);
}

.dot-ok {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.head-stack { min-width: 0; }
.head-kicker { display: block; }
.head h1 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-title-l);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: var(--sp-1) 0 0;
}

.head-btns { display: flex; gap: var(--sp-5); flex: none; }

.round-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform 0.16s var(--ease);
}
.round-btn:active { transform: scale(0.94); }

/* El punto de aviso lleva borde del color del fondo para separarse del
   icono sin necesitar un halo. */
.round-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
  border: 2.5px solid var(--bg);
}

/* Tres lineas escalonadas, no iguales: se lee como menu y no como
   "hamburguesa de plantilla". */
.menu-lines { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.menu-lines i { height: 2px; border-radius: var(--r-pill); background: currentColor; }
.menu-lines i:nth-child(1) { width: 16px; }
.menu-lines i:nth-child(2) { width: 11px; }
.menu-lines i:nth-child(3) { width: 7px; }

.chip-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sp-7);
  font-size: var(--fs-body);
  color: var(--ink-2);
  border-radius: var(--r-row-s);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.chip-btn.on { color: var(--acc2); background: var(--accDim); }

.chip-count {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
}
.chip-btn.on .chip-count { background: var(--accDim); }

.body-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3) var(--pad) var(--scroll-end);
}
@media (min-width: 1100px) {
  .body-scroll { padding-bottom: 40px; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.span-all { grid-column: 1 / -1; }

/* Cada cambio de pantalla entra con el mismo gesto. Antes era un corte
   seco (problema conocido #9). */
.view-anim { animation: swap 0.44s var(--ease); }

/* --- Barra flotante ---
   Cuatro destinos. Flota separada de los bordes: en iPhone el gesto de
   inicio vive abajo y una barra pegada al borde se toca por accidente. */

.bottom-nav {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: var(--nav-bottom);
  border-radius: var(--r-hero);
  padding: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
  z-index: 4;
  box-shadow: var(--sh-nav);
}
@media (min-width: 1100px) {
  .bottom-nav { display: none; }
}

.nav-tab {
  flex: 1;
  min-height: 56px;
  border-radius: var(--r-btn);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--ink-3);
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.nav-tab.active {
  background: rgba(255, 255, 255, 0.13);
  color: var(--ink);
}
.nav-tab span {
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-tab .count {
  position: absolute;
  top: 6px;
  right: 50%;
  margin-right: -22px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  line-height: 15px;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  color: var(--ink-2);
}
.nav-tab { position: relative; }
.nav-tab.active .count { background: var(--acc); color: var(--on-acc); }
.nav-tab .count:empty { display: none; }

.fab {
  position: fixed;
  right: 20px;
  bottom: calc(var(--nav-bottom) + 78px);
  width: 62px;
  height: 62px;
  border-radius: var(--r-field);
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  box-shadow: var(--sh-fab);
  font-size: 30px;
  font-weight: 700;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.16s var(--ease);
}
.fab:active { transform: scale(0.94); }
@media (min-width: 1100px) {
  .fab { display: none; }
}

/* --- Menu (···) ---
   Resuelve el problema conocido #2: Archivo y Ajustes solo se alcanzaban
   desde Hoy. Ahora estan a un toque desde los cuatro destinos. */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(6, 5, 10, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  animation: fade-in 0.2s linear;
}

.sheet {
  width: 100%;
  margin: 0 12px 30px;
  margin-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-radius: var(--r-sheet);
  box-shadow: var(--sh-sheet);
  animation: pop 0.34s var(--ease);
}

.sheet-grip {
  width: 38px;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  margin: 0 auto var(--sp-6);
}

.sheet-row {
  width: 100%;
  min-height: 58px;
  padding: 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  font-size: var(--fs-ui);
  color: var(--ink);
  text-align: left;
  border-radius: var(--r-mini);
}
.sheet-row + .sheet-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.sheet-row .sheet-ico {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-mini);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc2);
}
.sheet-row .sheet-sub {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}

/* --- Cards --- */

.card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.card-accent {
  background: var(--accSoft);
  border: 1.5px solid var(--accLine);
  border-radius: 16px;
  padding: 16px 16px 14px;
}

.card-title { font-size: 15px; font-weight: 700; }
.card-sub { font-size: 13px; color: var(--tx2); }

.card-label-acc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc);
}

.row-between { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 10px;
}
.section-head .cap { font-size: 12px; color: var(--tx3); }

.stack { display: flex; flex-direction: column; gap: 10px; }

.muted-note { font-size: 12.5px; color: var(--tx3); line-height: 1.6; }

/* ============================================================
   Filas de tarea
   ============================================================ */

.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--pc, var(--line));
  background: var(--surf);
  transition: background .25s ease;
}
.task-row.quick { padding: 11px 13px; }
.task-row.celebrating { background: var(--okSoft); animation: csPop .45s ease; }

.check {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--tx3);
  box-shadow: inset 0 0 0 2px var(--line);
}
.task-row.celebrating .check {
  background: var(--ok);
  color: var(--bg);
  box-shadow: inset 0 0 0 2px var(--ok);
}

.task-main { flex: 1; min-width: 0; }

.task-title {
  font-size: var(--big);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.task-row.celebrating .task-title { color: var(--ok); }

.task-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.task-meta .name { font-size: 12px; color: var(--tx2); }
.task-meta .time { font-size: 12px; color: var(--tx2); }

/* El tiempo siempre tambien como barra, no solo como numero. */
.time-bar {
  display: inline-block;
  height: 7px;
  border-radius: 4px;
  background: var(--pc, var(--acc));
  opacity: .55;
}

.row-btn {
  min-height: 44px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--acc);
  border-radius: 10px;
  background: var(--surf2);
  flex: none;
}

.icon-btn-sm {
  width: 44px;
  height: 44px;
  flex: none;
  font-size: 18px;
  color: var(--tx3);
  border-radius: 10px;
}

.more-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--tx2);
  font-size: 14px;
}

.empty {
  color: var(--tx3);
  font-size: 15px;
  padding: 18px 0;
}

/* ============================================================
   Hoy
   ============================================================ */

.qw-meta { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.qw-meta span:last-child { font-size: 13px; color: var(--tx2); }
.qw-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 16px; }
.qw-done {
  width: 100%;
  height: 60px;
  background: var(--acc);
  color: var(--accTx);
  border-radius: 13px;
  font-size: 18px;
  font-weight: 700;
}

.progress-track {
  height: 14px;
  background: var(--surf2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
}
.progress-fill {
  background: var(--ok);
  transition: width .4s ease;
}

.day-dots { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.day-dot {
  width: 100%;
  flex: 1;
  min-width: 6px;
  height: 8px;
  border-radius: 4px;
  background: var(--surf2);
}
.day-dot.done { background: var(--ok); }
.day-dot.quick { opacity: .55; }

/* Tira del dia. Sin marco de tarjeta a proposito: es un dato de ojeada, y
   ponerle borde y fondo lo hacia competir con la tarea que si se puede tocar. */
.day-strip { padding: 2px 2px 0; }
.day-strip-top { display: flex; align-items: center; gap: 11px; }
.day-strip-top .progress-track { flex: 1; height: 10px; }
.day-strip-stats { font-size: 12.5px; color: var(--tx2); white-space: nowrap; }
.day-strip-line { margin-top: 9px; font-size: 13px; color: var(--tx2); }
.day-strip-line:empty { display: none; }

/* Modo Ahora dentro de la tarjeta accionable. Era un boton solido a pantalla
   completa encima de todo: pesaba mas que la tarea misma. */
.now-open-link {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--accLine);
  background: transparent;
  color: var(--acc);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.now-open-link:active { background: var(--accSoft); }

/* ============================================================
   Capturar
   ============================================================ */

.dump {
  width: 100%;
  min-height: 200px;
  padding: 18px;
  font-size: 19px;
  line-height: 1.5;
  background: var(--surf);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  resize: none;
  font-family: inherit;
}

.cap-actions { display: flex; gap: 10px; }

.btn-tall {
  flex: 1;
  height: 64px;
  background: var(--surf);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
}
.btn-tall.rec {
  background: var(--warmSoft);
  border-color: var(--warm);
  color: var(--warm);
  animation: csPulse 1.4s ease-in-out infinite;
}

.provider-row { display: flex; gap: 8px; }

.provider-btn {
  flex: 1;
  min-height: 76px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--surf2);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--tx);
}
.provider-btn.on { border-color: var(--acc); background: var(--accSoft); }
.provider-btn.off { opacity: .45; }
.provider-btn img { height: 20px; max-width: 84%; object-fit: contain; }
.provider-btn .pname { font-size: 13px; font-weight: 700; }
.provider-btn .pstate { font-size: 11px; color: var(--tx3); }
.provider-btn.on .pstate { color: var(--acc); }

.btn-primary-lg {
  width: 100%;
  height: 56px;
  margin-top: 12px;
  background: var(--acc);
  color: var(--accTx);
  border-radius: 13px;
  font-size: 17px;
  font-weight: 700;
}
.btn-primary-lg:disabled { opacity: .45; cursor: default; }

.prop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-left: 5px solid var(--pc, var(--line));
  border-radius: 14px;
  padding: 12px 12px 12px 11px;
}
.prop-row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  background: transparent;
  border: 0;
  font-size: 16px;
  font-weight: 700;
}
.pill-btn {
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
  background: var(--surf2);
  border-radius: 10px;
  flex: none;
}

.btn-row { display: flex; gap: 10px; margin-top: 6px; }
.btn-row .grow { flex: 1; }

.btn-secondary-xl {
  height: 60px;
  padding: 0 20px;
  background: var(--surf);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-size: 16px;
}

/* ============================================================
   Plan
   ============================================================ */

.seg {
  display: flex;
  gap: 5px;
  padding: 4px;
  background: var(--surf2);
  border-radius: 12px;
  margin-bottom: 14px;
}
.seg button {
  flex: 1;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tx2);
}
.seg button.on {
  background: var(--surf);
  color: var(--tx);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Carga del dia: tira, no tarjeta. Se conserva la clase .load-card porque el JS
   le pone/quita `.over`, que es lo que vuelve ambar la barra cuando el dia se
   pasa de la raya. Ambar, nunca rojo. */
.load-card {
  margin: 2px 0 16px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surf);
}
.load-card.over { border-color: var(--warm); background: var(--warmSoft); }

.load-strip-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.load-strip-title { font-size: 14px; font-weight: 700; }
.load-strip-num { font-size: 12.5px; color: var(--tx2); white-space: nowrap; }
.load-strip-note { margin-top: 9px; font-size: 13px; color: var(--tx2); }
.load-strip-note:empty { display: none; }

/* "Organizar mi dia": una fila de accion en vez de una tarjeta con titulo,
   subtitulo y parrafo explicativo que ya se leyo la primera vez. */
.plan-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.plan-action-btn {
  flex: 1;
  min-width: 200px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 13px;
  background: var(--acc);
  color: var(--accTx);
  font-size: 16px;
  font-weight: 700;
}
.plan-action-btn:disabled { opacity: .6; }
.plan-action-now { font-size: 12.5px; color: var(--tx2); white-space: nowrap; }
/* El resultado ocupa su propia linea completa debajo de la fila. */
.plan-action > #auto-result { flex-basis: 100%; }

.load-track {
  height: 16px;
  background: var(--surf2);
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}
.load-fill { height: 100%; background: var(--acc); transition: width .4s ease; }
.load-card.over .load-fill { background: var(--warm); }
.load-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--tx2);
  opacity: .6;
}

.suggestion {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.suggestion .txt { flex: 1; min-width: 180px; font-size: 14px; }
.btn-acc-md {
  min-height: 48px;
  padding: 0 16px;
  background: var(--acc);
  color: var(--accTx);
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
}
.btn-ghost-md { min-height: 48px; padding: 0 14px; color: var(--tx2); font-size: 15px; }

.day-grid { position: relative; margin-top: 4px; }

.hour-line {
  position: absolute;
  left: 46px;
  right: 0;
  height: 0;
  border-top: 1px solid var(--line);
}
.hour-line span {
  position: absolute;
  left: -46px;
  top: -8px;
  font-size: 11px;
  color: var(--tx3);
  background: var(--bg);
  padding-right: 6px;
}

.block {
  position: absolute;
  left: 52px;
  right: 4px;
  padding: 8px 11px;
  border-radius: 11px;
  overflow: hidden;
  background: color-mix(in oklab, var(--pc) 14%, var(--surf));
  border: 1px solid color-mix(in oklab, var(--pc) 40%, var(--surf));
  border-left: 5px solid var(--pc);
}
.block.fixed { opacity: .72; --pc: var(--tx3); }
.block .btime { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tx2); }
.block .btitle { font-size: 15px; font-weight: 700; margin-top: 3px; line-height: 1.25; }
.block .brm {
  position: absolute;
  top: 4px; right: 4px;
  width: 32px; height: 32px;
  font-size: 15px;
  color: var(--tx3);
  border-radius: 8px;
}

.hour-open {
  position: absolute;
  left: 52px;
  right: 4px;
  border: 1px dashed transparent;
  border-radius: 11px;
  color: var(--tx3);
  font-size: 13px;
  text-align: left;
  padding-left: 10px;
}
.hour-open:hover, .hour-open:focus-visible { border-color: var(--line); }

.week-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: end;
  height: 300px;
  padding: var(--sp-8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
}
.week-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}
.week-col .hrs {
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  color: var(--ink-4);
}
.week-bar {
  width: 100%;
  border-radius: var(--sp-3) var(--sp-3) var(--sp-1) var(--sp-1);
  min-height: 4px;
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  opacity: 0.38;
  transition: height 0.5s var(--ease);
}
/* Pasarse del maximo avisa en ambar. Nunca en rojo. */
.week-bar.over { background: linear-gradient(180deg, #F6CE8B, var(--warm)); }
.week-col.today .week-bar { opacity: 1; }
.week-col .dname {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--ink-4);
}
.week-col.today .dname { color: var(--acc2); }

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-card);
}
.month-cell {
  aspect-ratio: 1;
  border-radius: var(--sp-5);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
}
.month-cell.blank { opacity: 0.18; }
.month-cell.today {
  background: var(--accDim);
  box-shadow: inset 0 0 0 1px var(--accLine);
}
.month-cell .n { font-size: var(--fs-badge); color: var(--ink-3); }
.month-cell.today .n { color: var(--acc2); }
.month-cell .bar {
  display: block;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--acc);
  opacity: 0.85;
}
.month-cell .bar.over { background: var(--warm); }

/* ============================================================
   Foco
   ============================================================ */

.focus-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 60vh;
  text-align: center;
}

.focus-kicker { font-size: 13px; color: var(--tx2); letter-spacing: .06em; text-transform: uppercase; }
.focus-task { font-size: 20px; font-weight: 700; max-width: 420px; line-height: 1.3; margin: 6px 0 20px; }

.focus-task-select {
  max-width: 340px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 11px;
  margin-bottom: 18px;
}

/* El anillo marca el avance: conic-gradient sobre el borde, con el centro
   recortado por el disco interior. */
.ring {
  width: clamp(220px, 62vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--acc) var(--deg, 0deg), var(--surf2) 0deg);
  transition: background .8s linear;
}
.ring-inner {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring.break { background: conic-gradient(var(--ok) var(--deg, 0deg), var(--surf2) 0deg); }

.timer-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(38px, 12vw, 54px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.timer-sub { font-size: 13px; color: var(--tx2); margin-top: 4px; }

.timer-main {
  margin-top: 22px;
  min-width: 220px;
  height: 64px;
  padding: 0 28px;
  background: var(--acc);
  color: var(--accTx);
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
}
.timer-main.running { background: var(--surf); color: var(--tx); border: 1.5px solid var(--line); }

.pots-line { margin-top: 18px; font-size: 13px; color: var(--tx3); }

/* ============================================================
   Archivo
   ============================================================ */

.search {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--surf);
  border: 1.5px solid var(--line);
  border-radius: 13px;
  margin-bottom: 8px;
}

.evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.evidence-cell { background: var(--surf2); border-radius: 12px; padding: 12px; }
.evidence-cell .n {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}
.evidence-cell .label { font-size: 12px; color: var(--tx2); margin-top: 5px; line-height: 1.35; }

.evidence-bars { display: flex; gap: 3px; margin-top: 14px; align-items: flex-end; height: 52px; }
.evidence-bars span {
  flex: 1;
  min-height: 3px;
  border-radius: 2px;
  background: var(--ok);
  opacity: .8;
}
.evidence-bars span.zero { background: var(--surf2); opacity: 1; }

.arch-day {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}
.arch-day .dlabel { font-size: 14px; font-weight: 700; }
.arch-day .rule { flex: 1; height: 1px; background: var(--line); }
.arch-day .dsum { font-size: 12px; color: var(--tx2); }

.arch-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.arch-check {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--okSoft);
  color: var(--ok);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arch-item .t { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.arch-item .lbl { font-size: 12px; color: var(--tx3); }

/* ============================================================
   Ajustes / Avisos
   ============================================================ */

.swatches { display: flex; gap: 8px; margin-top: 12px; }
.swatches span { flex: 1; height: 38px; border-radius: 9px; border: 1px solid var(--line); }

.legend-row { display: flex; align-items: center; gap: 12px; }
.legend-chip { width: 34px; height: 20px; border-radius: 7px; flex: none; }

.sound-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sound-btn {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 11px;
  background: var(--surf2);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx2);
}
.sound-btn.on { background: var(--accSoft); color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--accLine); }

.slider-row { display: flex; align-items: center; gap: 12px; }
.slider-row input[type='range'] { flex: 1; min-width: 0; accent-color: var(--acc); }
.slider-row .val {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  min-width: 66px;
  text-align: right;
}

.key-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  background: var(--surf2);
  border-radius: 12px;
}
.key-row img { width: 30px; height: 22px; object-fit: contain; flex: none; }
.key-row .kname { flex: 1; font-size: 15px; font-weight: 700; }
.key-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: var(--surf);
  border: 1px solid var(--line);
  color: var(--tx2);
}
.key-btn.on { background: var(--okSoft); color: var(--ok); border-color: var(--ok); }

.proj-row { display: flex; align-items: center; gap: 11px; }
.proj-swatch {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: var(--surf2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj-row .pname { flex: 1; font-size: 15px; }
.proj-row .sname { font-size: 11px; color: var(--tx3); }

.rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surf2);
  border-radius: 12px;
  width: 100%;
  text-align: left;
}
.rule-row .rtxt { flex: 1; min-width: 0; }
.rule-row .rlabel { display: block; font-size: 15px; font-weight: 700; }
.rule-row .rnote { display: block; font-size: 12.5px; color: var(--tx2); margin-top: 2px; }

.switch {
  width: 48px;
  height: 28px;
  flex: none;
  border-radius: 99px;
  background: var(--surf3);
  padding: 3px;
  display: flex;
  transition: background .2s ease;
}
.switch.on { background: var(--acc); justify-content: flex-end; }
.switch .knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surf);
  transition: transform .2s ease;
}

.reminder-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  background: var(--surf2);
  border-radius: 12px;
  border-left: 5px solid var(--pc, var(--line));
}
.reminder-row .rtime { font-size: 13px; color: var(--tx2); min-width: 46px; }
.reminder-row .rt { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }

.next-alert-time { font-size: 13px; color: var(--tx2); margin: 12px 0 4px; }
.next-alert-task { font-size: 21px; font-weight: 700; line-height: 1.25; margin-bottom: 16px; }
.alert-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.alert-cta .go {
  flex: 1;
  min-width: 150px;
  height: 56px;
  background: var(--acc);
  color: var(--accTx);
  border-radius: 13px;
  font-size: 17px;
  font-weight: 700;
}
.alert-cta .snooze {
  min-height: 56px;
  padding: 0 18px;
  background: var(--surf);
  border: 1.5px solid var(--line);
  border-radius: 13px;
  font-size: 15px;
  font-weight: 700;
}

.logout-btn {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--tx2);
  font-size: 15px;
}

/* ============================================================
   Toast y alarma
   ============================================================ */

.toast-wrap {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(110px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
}
.toast {
  animation: csToast 1.8s ease forwards;
  background: var(--okSoft);
  color: var(--ok);
  border: 1.5px solid var(--ok);
  border-radius: 99px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
}

/* La alarma ocupa todo: no hay que buscar donde apagarla. */
.alarm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: var(--warmSoft);
  color: var(--tx);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
  text-align: center;
}
.alarm-kicker {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx2);
  animation: csPulse 1.1s ease-in-out infinite;
}
.alarm-title { font-size: clamp(40px, 11vw, 64px); font-weight: 700; line-height: 1.1; margin: 0; }
.alarm-task { font-size: 16px; color: var(--tx2); max-width: 340px; }
.alarm-dismiss {
  width: 100%;
  max-width: 420px;
  height: 88px;
  background: var(--tx);
  color: var(--bg);
  border-radius: 18px;
  font-size: 22px;
  font-weight: 700;
}
.alarm-again { min-height: 52px; padding: 0 20px; font-size: 16px; color: var(--tx2); text-decoration: underline; }

/* --- Spotify --- */

.sp-now { display: flex; align-items: center; gap: 12px; }
.sp-cover {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 10px;
  background: var(--surf3);
  object-fit: cover;
}
.sp-meta { min-width: 0; flex: 1; }
.sp-kicker { font-size: 11px; color: var(--tx3); letter-spacing: .08em; text-transform: uppercase; }
.sp-track { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-artist { font-size: 12px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-btn {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--surf2);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
}
.sp-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sp-controls input[type='range'] { flex: 1; min-width: 0; accent-color: var(--acc); }

.ai-msg { font-size: 14px; line-height: 1.55; margin: 0; color: var(--tx2); }
.ai-msg.warn { color: var(--warm); font-weight: 700; }
.ai-next { font-size: 15px; font-weight: 700; margin: 10px 0 0; }

/* ══════════ Estado, fecha limite y progreso en las filas ══════════ */

/* "En curso": barra lateral azul. Es lo unico que distingue la fila; no se
   inventa un color nuevo ni se usa rojo para nada. */
.task-row.running { border-left: 3px solid var(--acc); padding-left: 11px; }
.task-row[role='button'] { cursor: pointer; }
.task-row[role='button']:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.check.on { background: var(--ok); border-color: var(--ok); color: #fff; }

.status-chip,
.due-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surf2);
  color: var(--tx2);
  white-space: nowrap;
}
.status-chip { background: var(--accSoft); color: var(--acc); }
/* Ambar, nunca rojo: es un aviso, no un regano. */
.due-chip.warm { background: var(--warmSoft); color: var(--warm); }

.sub-line { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.sub-progress {
  flex: 1;
  height: 5px;
  min-width: 40px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
}
.sub-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ok);
  transition: width 0.25s ease;
}
.sub-count { font-size: 11px; color: var(--tx3); white-space: nowrap; }

/* El titulo de la tarea rapida ahora abre el editor: se resetea el boton. */
.qw-title {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Borrar del archivo */
.arch-del {
  flex: none;
  min-width: 32px;
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.arch-del.armed {
  min-width: 72px;
  font-size: 12px;
  font-weight: 700;
  border-color: var(--warm);
  color: var(--warm);
  background: var(--warmSoft);
}

/* ══════════ Editor de tarea ══════════ */

body.no-scroll { overflow: hidden; }

/* Con una hoja abierta encima, el contenido de atras deja de desenfocar.
   Apilar una capa a pantalla completa sobre veinte superficies con
   backdrop-filter obliga al compositor a rehacer TODOS esos desenfoques, y en
   iPhone eso es justo el retardo que se siente al tocar una tarea. Detras de
   una hoja opaca no se ve nada de eso, asi que no se pierde nada. */
body.no-scroll .main-col .glass,
body.no-scroll .main-col .glass-lite,
body.no-scroll .bottom-nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Reflejo del cielo sobre el canto curvo. Va aparte porque un gradiente mas
   en el background pelearia con el del grosor. */
.editor-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  border-radius: 36px 36px 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}

@keyframes sheetUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}

.editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 5, 10, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade-in 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overscroll-behavior: contain;
}
.editor-sheet {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Cristal fuerte: tres paradas en el gradiente (claro arriba, valle a media
     altura, repunte abajo) es lo que el ojo lee como una PIEZA GRUESA de
     vidrio y no como una capa de pintura. El saturate alto hace que el color
     de debajo sangre a traves; sin el parece plastico gris. */
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.19),
    rgba(255, 255, 255, 0.06) 46%,
    rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(40px) saturate(210%) brightness(1.22);
  backdrop-filter: blur(40px) saturate(210%) brightness(1.22);
  box-shadow:
    0 -24px 70px rgba(0, 0, 0, 0.6),
    inset 0 1.4px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.17),
    inset 0 -20px 40px rgba(255, 255, 255, 0.06);
  border-radius: 36px 36px 0 0;
  border: 0;
  animation: sheetUp 0.38s var(--ease);
  padding: 14px 18px calc(28px + env(safe-area-inset-bottom));
}
@media (min-width: 700px) {
  .editor-overlay { align-items: center; }
  .editor-sheet { border-radius: 22px; border-bottom: 1px solid var(--line); max-height: 88vh; }
}

.ed-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 12px;
  /* Sin fondo propio. Llevaba var(--bg) —- negro opaco —- de cuando la hoja era
     opaca; sobre el cristal se veia como una barra negra pegada arriba. Al ser
     sticky, lo que pase por debajo se desenfoca contra el cristal de la hoja,
     que es justo el efecto que se busca. */
  background: none;
}
.ed-saved {
  font-size: 12px;
  font-weight: 700;
  color: var(--ok);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ed-saved.on { opacity: 1; }
.ed-close {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surf);
  color: var(--tx);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.ed-title-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.ed-done-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 2px solid var(--line);
  background: var(--surf);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.ed-done-btn.on { background: var(--ok); border-color: var(--ok); }
.ed-title {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--tx);
  padding: 7px 0 0;
}
.ed-title:focus { outline: none; }
.ed-title.done { color: var(--tx3); text-decoration: line-through; }

.ed-field { margin-bottom: 22px; }
.ed-label { font-size: 13px; font-weight: 700; color: var(--tx2); margin-bottom: 8px; }
.ed-hint { font-size: 13px; color: var(--tx3); margin: -4px 0 9px; }

.ed-seg { display: flex; flex-wrap: wrap; gap: 7px; }
.ed-seg-btn {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surf);
  color: var(--tx2);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.ed-seg-btn.on {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--accTx);
  font-weight: 700;
}

.ed-chip {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surf);
  color: var(--tx2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ed-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

/* Selector de tiempo: cada unidad sube Y baja. */
.ed-time-box {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surf);
  padding: 15px;
}
.ed-time-read { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 13px; }
.ed-time-read.empty { color: var(--tx3); font-weight: 600; }
.ed-time { display: flex; justify-content: center; gap: 22px; }
.ed-time-unit { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ed-step {
  width: 46px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surf2);
  color: var(--tx);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.ed-step:active { background: var(--surf3); }
.ed-time-val { font-size: 25px; font-weight: 700; min-width: 46px; text-align: center; }
.ed-time-cap { font-size: 11px; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.05em; }

.ed-date { margin: 0; }
.ed-due-note { font-size: 13px; color: var(--tx3); margin-top: 10px; }
.ed-due-note.warm { color: var(--warm); font-weight: 600; }

/* Subtareas */
.ed-subs {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surf);
  padding: 14px;
}
.ed-sub-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.ed-sub-count { font-size: 13px; color: var(--tx2); font-weight: 700; white-space: nowrap; }
.ed-sub-progress { flex: 1; height: 7px; border-radius: 999px; background: var(--surf2); overflow: hidden; }
.ed-sub-fill { height: 100%; width: 0; border-radius: 999px; background: var(--ok); transition: width 0.25s ease; }
.ed-sub-list { display: flex; flex-direction: column; gap: 7px; }
.ed-sub-empty { font-size: 14px; color: var(--tx3); line-height: 1.5; padding: 3px 0 5px; }
.ed-sub-row { display: flex; align-items: center; gap: 10px; }
.ed-sub-check {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 2px solid var(--line);
  background: var(--surf2);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.ed-sub-row.done .ed-sub-check { background: var(--ok); border-color: var(--ok); }
.ed-sub-title {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--tx);
  padding: 9px 0;
}
.ed-sub-title:focus { outline: none; border-bottom: 1px solid var(--accLine); }
.ed-sub-row.done .ed-sub-title { color: var(--tx3); text-decoration: line-through; }
.ed-sub-del {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--tx3);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.ed-sub-add { display: flex; gap: 8px; margin-top: 12px; }
.ed-sub-input { margin: 0; flex: 1; min-width: 0; }
.ed-sub-addbtn {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  background: var(--acc);
  color: var(--accTx);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.ed-notes {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surf);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tx);
  padding: 13px;
  resize: vertical;
}
.ed-notes:focus { outline: none; border-color: var(--accLine); }

/* Borrar. En ambar, no en rojo, y siempre en dos toques. */
.ed-danger { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; }
.ed-delete {
  width: 100%;
  min-height: 48px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ed-delete.armed { border-color: var(--warm); color: var(--warm); background: var(--warmSoft); }
.ed-danger-note { font-size: 13px; color: var(--warm); margin-top: 9px; line-height: 1.5; }

/* Aviso persistente cuando el proveedor de IA falla. Ambar, nunca rojo. */
.card-sub.warn { color: var(--warm); font-weight: 600; line-height: 1.55; }

/* Modelo elegido de un toque en Ajustes. */
.ed-chip.on { background: var(--acc); border-color: var(--acc); color: var(--accTx); font-weight: 700; }

/* ══════════ Progreso: puntos, nivel, racha y logros ══════════ */
/* Nada aca se vacia ni vuelve a cero. La barra mide lo que falta para el
   siguiente nivel, no lo que se dejo de hacer. */

.day-progress-line {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acc);
}
.day-progress-line:empty { display: none; }

.prog-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.prog-level { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prog-level-n {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--acc);
  color: var(--accTx);
  font-size: 21px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prog-level-name { font-size: 17px; font-weight: 700; }
.prog-level-sub { font-size: 13px; color: var(--tx2); margin-top: 2px; }
.prog-total { font-size: 27px; font-weight: 700; color: var(--acc); }

.prog-track {
  height: 9px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
  margin: 15px 0 20px;
}
.prog-fill { height: 100%; border-radius: 999px; background: var(--acc); transition: width 0.3s ease; }

.prog-streak {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: 15px;
  background: var(--surf2);
  margin-bottom: 18px;
}
.prog-streak-n {
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 9px;
  border-radius: 13px;
  background: var(--ok);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prog-streak-line { font-size: 15px; font-weight: 700; line-height: 1.4; }
.prog-streak-sub { font-size: 13px; color: var(--tx2); margin-top: 3px; line-height: 1.45; }

.prog-cells {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  .prog-cells { grid-template-columns: repeat(4, 1fr); }
}
.prog-cell { text-align: center; }
.prog-cell .n { font-size: 23px; font-weight: 700; }
.prog-cell .label { font-size: 12px; color: var(--tx2); margin-top: 3px; line-height: 1.35; }

.prog-badges-title { font-size: 13px; font-weight: 700; color: var(--tx2); margin-bottom: 10px; }
.prog-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
@media (min-width: 700px) {
  .prog-badges { grid-template-columns: repeat(4, 1fr); }
}
.prog-badge {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px;
  /* Los que faltan se ven apagados, no tachados ni en alarma. */
  opacity: 0.45;
}
.prog-badge.got { opacity: 1; border-color: var(--ok); background: var(--okSoft); }
.prog-badge .bname { font-size: 14px; font-weight: 700; }
.prog-badge .bhint { font-size: 12px; color: var(--tx2); margin-top: 3px; line-height: 1.35; }

/* ══════════ Practicas diarias: cuerpo y mente ══════════ */
/* Insistente, no bloqueante. Nada aca reprocha ni se pone rojo: una practica
   saltada se ve tranquila, no fallida. */

.pr-row { padding: 14px 0; border-top: 1px solid var(--line); }
.pr-row:first-child { border-top: 0; padding-top: 0; }
.pr-row.skipped { opacity: 0.62; }

.pr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pr-name { font-size: 16px; font-weight: 700; }
.pr-count { font-size: 13px; color: var(--tx2); white-space: nowrap; }
.pr-row.done .pr-count { color: var(--ok); font-weight: 700; }

.pr-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surf2);
  overflow: hidden;
  margin: 10px 0 12px;
}
.pr-fill { height: 100%; border-radius: 999px; background: var(--acc); transition: width 0.25s ease; }
.pr-row.done .pr-fill { background: var(--ok); }

.pr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-ok { flex-basis: 100%; font-size: 13px; color: var(--tx2); margin-bottom: 2px; }
.pr-row.done .pr-ok { color: var(--ok); font-weight: 600; }

.pr-step {
  min-width: 52px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surf2);
  color: var(--tx);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.pr-step.ghost { background: transparent; color: var(--tx2); font-weight: 600; }

.pr-skip {
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--tx3);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.pr-week { display: flex; gap: 5px; margin-top: 13px; }
.pr-dot {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  /* El dia sin nada se ve vacio, no roto. */
  background: var(--surf2);
}
.pr-dot.part { background: var(--accLine); }
.pr-dot.done { background: var(--ok); }

/* Ajustes */
.pr-set { padding: 13px 0; border-top: 1px solid var(--line); }
.pr-set:first-child { border-top: 0; padding-top: 0; }
.pr-set-name { font-size: 15px; font-weight: 700; }
.pr-set .slider-row { margin-top: 10px; }

/* ══════════ Reuniones ══════════ */

.meet-hours { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.meet-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surf);
}
.meet-row[data-proj] { border-left-width: 3px; }

.meet-time { flex: none; width: 52px; text-align: right; padding-top: 1px; }
.meet-time .from { font-size: 15px; font-weight: 700; }
.meet-time .to { font-size: 12px; color: var(--tx3); margin-top: 2px; }

.meet-main { flex: 1; min-width: 0; }
.meet-name { font-size: 16px; font-weight: 700; line-height: 1.32; }
.meet-sub { font-size: 13px; color: var(--tx2); margin-top: 4px; }
.meet-notes { font-size: 13px; color: var(--tx3); margin-top: 5px; line-height: 1.5; }
.meet-from-cal { font-size: 11px; color: var(--tx3); margin-top: 6px; }

.meet-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--acc);
  text-decoration: none;
}

.meet-actions { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.meet-del {
  min-width: 32px;
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.meet-del.armed {
  min-width: 72px;
  font-size: 12px;
  font-weight: 700;
  border-color: var(--warm);
  color: var(--warm);
  background: var(--warmSoft);
}

/* ══════════ Fuentes de salud ══════════ */

.health-row { align-items: flex-start; }
.health-row .kname { display: flex; flex-direction: column; gap: 2px; }
.hname { font-size: 15px; font-weight: 700; }
.hwhat { font-size: 12px; color: var(--tx3); line-height: 1.4; }
/* Sin credenciales el boton se ve apagado, pero sigue siendo tocable y explica. */
.key-btn.off { opacity: 0.6; }

/* ══════════ Fila de tarea editable (estilo Notion) ══════════ */

.tr-wrap {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surf);
  padding: 12px 13px;
  margin-bottom: 9px;
}

.tr-row { display: flex; align-items: center; gap: 10px; }
.tr-shape { flex: none; }
.tr-title {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx);
  padding: 6px 0;
}
.tr-title:focus { outline: none; }
.tr-title::placeholder { color: var(--tx3); font-weight: 400; }

.tr-drop {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--tx3);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.tr-props { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.tr-pill {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surf2);
  color: var(--tx2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tr-pill.on { border-color: var(--acc); color: var(--acc); }
.tr-select { -webkit-appearance: none; appearance: none; padding-right: 11px; }

/* Prioridad. Alta va en ambar, NUNCA en rojo: es una senal, no una alarma. */
.tr-pill.tr-prio[data-prio='alta'] {
  background: var(--warmSoft);
  border-color: var(--warm);
  color: var(--warm);
  font-weight: 700;
}
.tr-pill.tr-prio[data-prio='baja'] { opacity: 0.7; }

/* Panel de tiempo: sube y baja, y llega hasta 8 h. */
.tr-time-panel {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.tr-time-read { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 10px; }
.tr-steppers { display: flex; justify-content: center; gap: 7px; margin-bottom: 10px; }
.tr-step {
  min-width: 54px;
  min-height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surf2);
  color: var(--tx);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.tr-presets { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tr-preset {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tr-preset.on { background: var(--acc); border-color: var(--acc); color: var(--accTx); }

.tr-add {
  width: 100%;
  min-height: 48px;
  border-radius: 13px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--tx2);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.tr-save {
  width: 100%;
  min-height: 48px;
  border-radius: 13px;
  border: 0;
  background: var(--acc);
  color: var(--accTx);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}

/* Chip de prioridad alta en las filas de Hoy. */
.prio-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--warmSoft);
  color: var(--warm);
  white-space: nowrap;
}

/* ══════════ Bienestar en Foco ══════════ */

#wellbeing { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }

.wb-card {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surf);
  padding: 16px;
}
.wb-title { font-size: 16px; font-weight: 700; }
.wb-sub { font-size: 13px; color: var(--tx2); margin-top: 4px; }

.wb-list { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
.wb-tech {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  min-height: 56px;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--surf2);
  cursor: pointer;
  font-family: inherit;
}
.wb-tech .tname { font-size: 15px; font-weight: 700; color: var(--tx); }
.wb-tech .twhat { font-size: 12px; color: var(--tx2); line-height: 1.4; }

.wb-count { font-size: 13px; color: var(--tx2); font-weight: 700; }
.wb-glasses { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0; }
.wb-glass {
  width: 22px;
  height: 28px;
  border-radius: 4px 4px 8px 8px;
  border: 2px solid var(--line);
  background: transparent;
}
.wb-glass.on { background: var(--acc); border-color: var(--acc); }

.wb-actions { display: flex; gap: 8px; }
.wb-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  background: var(--acc);
  color: var(--accTx);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.wb-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--tx2); font-weight: 600; }

.wb-routine { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.wb-routine summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  min-height: 44px;
  justify-content: center;
}
.wb-routine summary::-webkit-details-marker { display: none; }
.wb-routine .rname { font-size: 15px; font-weight: 700; }
.wb-routine .rwhat { font-size: 12px; color: var(--tx2); }
.wb-steps { margin: 10px 0 6px; padding-left: 20px; }
.wb-steps li { font-size: 14px; line-height: 1.65; color: var(--tx2); }

/* Respiracion guiada a pantalla completa */
.breath-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg-now);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-9);
  padding: var(--sp-11);
}
.breath-name {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* La burbuja: forma organica, no un circulo. El circulo perfecto se lee como
   un medidor; la forma irregular se lee como algo vivo, y eso es lo que hace
   que el cuerpo la acompane en vez de mirarla. */
.breath-stage {
  position: relative;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.breath-blob,
.breath-core {
  position: absolute;
  inset: 0;
  /* La duracion la fija el JS con la de cada fase. */
  transition-property: transform;
  transition-timing-function: ease-in-out;
  will-change: transform;
}

.breath-blob {
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: radial-gradient(circle at 35% 30%, var(--acc2), var(--acc) 62%, transparent 78%);
  filter: blur(6px);
  animation: morph 12s ease-in-out infinite;
}
/* En "Reten" la forma tambien se queda quieta: si siguiera ondulando, la
   instruccion de sostener se contradiria con lo que se ve. */
.breath-blob.holding { animation-play-state: paused; }

.breath-core {
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 60%);
  -webkit-backdrop-filter: blur(var(--gb-lite)) saturate(160%);
  backdrop-filter: blur(var(--gb-lite)) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  margin: 26px;
}

.breath-label {
  font-size: var(--fs-title-s);
  font-weight: 700;
  text-align: center;
  padding: 0 var(--sp-8);
}
.breath-count { font-size: var(--fs-display); color: var(--acc2); font-weight: 500; }
.breath-cycles { font-size: var(--fs-body); color: var(--ink-3); }
.breath-stop {
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surf);
  color: var(--tx);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* ══════════ Propuesta de horario ══════════ */

.ap-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.ap-row:first-child { border-top: 0; }
.ap-time { flex: none; font-size: 13px; font-weight: 700; color: var(--acc); white-space: nowrap; }
.ap-main { flex: 1; min-width: 0; }
.ap-title { font-size: 15px; font-weight: 600; }
.ap-sub { font-size: 12px; color: var(--tx3); margin-top: 2px; }

/* ══════════ Mover bloques en el dia ══════════ */

/* Reuniones dentro del dia: se ven, pero no se arrastran desde aqui. */
.block.meeting {
  background: var(--surf2);
  border-style: dashed;
  opacity: 0.9;
}
.block.meeting .btime,
.block.meeting .btitle { color: var(--tx2); }

/* Controles de mover, pegados al borde derecho del bloque. */
.bnudge {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.bnudge-btn {
  width: 30px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tx3);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.bnudge-btn:active { background: var(--surf3); color: var(--tx); }

.bgrip {
  width: 30px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--surf2);
  color: var(--tx3);
  font-size: 13px;
  cursor: grab;
  /* Imprescindible: sin esto el gesto lo roba el scroll de la pagina en movil. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.bgrip:active { cursor: grabbing; background: var(--acc); color: var(--accTx); }

.block.dragging {
  z-index: 20;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  /* Sin transicion al arrastrar: la ficha debe ir pegada al dedo. */
  transition: none;
}

/* Encima de otra cosa. Se avisa, no se impide: el usuario manda. */
.block.clashing { border-color: var(--warm); border-style: dashed; }
.block.clashing .btime { color: var(--warm); font-weight: 700; }

/* ══════════ Modo Ahora ══════════ */
/* Una sola tarea. Sin contadores, sin progreso, sin menus: lo unico que hay que
   decidir es empezar o marcarla. */

.now-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
}

.now-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 18px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx2);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.now-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx3);
}

.now-card {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
.now-proj { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tx2); }
.now-title { font-size: 30px; font-weight: 700; line-height: 1.25; }
.now-time { font-size: 17px; color: var(--acc); font-weight: 700; }
.now-steps { font-size: 14px; color: var(--tx2); }

.now-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin-top: 6px;
}
.now-go,
.now-done {
  width: 100%;
  min-height: 60px;
  border-radius: 16px;
  border: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.now-go { background: var(--acc); color: var(--accTx); }
.now-done { background: transparent; border: 1px solid var(--line); color: var(--tx2); }

/* La siguiente se nombra pero no se toca: saber que existe calma, poder saltar
   a ella dispersa. */
.now-next { font-size: 14px; color: var(--tx3); max-width: 380px; line-height: 1.5; }

/* Dividir en pasos con IA */
.ed-split {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px dashed var(--accLine);
  background: transparent;
  color: var(--acc);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.ed-split:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   Rediseno — Fase 1: Hoy
   Todo lo de aqui abajo compone con los tokens de tokens.css.
   ============================================================ */

/* --- Acceso, revestido --- */

.screen-login h1 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -0.012em;
}

.screen-login .field {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-btn);
}
.screen-login .field:focus {
  border-color: var(--accLine);
  outline: none;
}

.btn-primary-xl {
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  border-radius: var(--r-btn);
  box-shadow: var(--sh-btn);
  transition: transform 0.16s var(--ease);
}
.btn-primary-xl:active { transform: scale(0.975); }

/* --- Franja de progreso del dia --- */

.day-card {
  border-radius: var(--r-card);
  padding: var(--sp-7) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.day-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
}

.day-lead { font-size: var(--fs-ui); color: var(--ink-2); }
.day-count { color: var(--ok); font-weight: 700; }
.day-time { font-size: var(--fs-meta); color: var(--ink-3); }

.day-track {
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.day-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--ok), var(--ok2));
  transition: width 0.5s var(--ease);
}

.day-dots { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.day-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.day-dot.done { background: var(--ok); }

/* --- Conmutador Ahora / Dia / Semana --- */

.hoy-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--sp-2);
  border-radius: var(--r-pill);
}

.hoy-pill {
  position: absolute;
  top: var(--sp-2);
  bottom: var(--sp-2);
  left: var(--sp-2);
  width: calc((100% - 2 * var(--sp-2)) / 3);
  border-radius: var(--r-pill);
  transition: transform 0.42s var(--ease);
  pointer-events: none;
}

.hoy-switch [data-layout] {
  position: relative;
  min-height: 40px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-3);
  transition: color 0.22s var(--ease);
}
.hoy-switch [data-layout].active { color: var(--ink); }

.hoy-carousel { overflow: hidden; }
.hoy-track {
  display: flex;
  width: 300%;
  transition: transform 0.42s var(--ease);
}
.hoy-panel {
  width: 33.333%;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* Aire minimo para que las sombras de las tarjetas no se recorten. */
  padding: var(--sp-1);
}

/* --- Vista Ahora: la tarjeta hero --- */

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sheet);
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  box-shadow: var(--sh-hero);
}
/* El glow del acento arriba a la derecha: sin el, la tarjeta es una caja. */
.hero-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 190px;
  height: 160px;
  border-radius: 50%;
  background: var(--accDim);
  filter: blur(38px);
  pointer-events: none;
}

.label.acc { color: var(--acc2); }

.hero-top {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
}

.hero-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  padding: 0;
}

.hero-done {
  min-height: 56px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  font-size: var(--fs-lead);
  font-weight: 700;
  box-shadow: var(--sh-btn);
  transition: transform 0.16s var(--ease);
}
.hero-done:hover { transform: translateY(-1px); }
.hero-done:active { transform: scale(0.975); }

.hero-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.hero-sec {
  min-height: 46px;
  border-radius: var(--r-row-s);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 700;
  transition: background 0.22s var(--ease), transform 0.16s var(--ease);
}
.hero-sec:active { transform: scale(0.97); }

.after-label { margin-top: var(--sp-3); }

.after-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}
.after-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-ui);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.after-min { font-size: var(--fs-meta); color: var(--ink-3); flex: none; }
.after-more { padding: var(--sp-2) var(--sp-6) 0; }

/* --- Emoji con tinte del proyecto --- */

.emoji-tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pc) 16%, transparent);
}
.emoji-tile.lg { width: 46px; height: 46px; border-radius: var(--r-chip); font-size: 22px; }
.emoji-tile.md { width: 38px; height: 38px; border-radius: var(--r-mini); font-size: 18px; }
.emoji-tile.sm { width: 30px; height: 30px; border-radius: 10px; font-size: 15px; }

/* --- Vista Dia --- */

.t-group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-3);
}
.t-group-pill {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-7);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.t-group-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.07); }

.t-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-row);
  cursor: pointer;
}
.t-row.running { box-shadow: inset 0 0 0 1.5px var(--accLine); }
.t-row.done { opacity: 0.45; }
.t-row.done .t-title { text-decoration: line-through; }

.t-check {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.26);
  background: transparent;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.t-check.on {
  border-color: var(--ok);
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1712' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.4l4 4 8-8.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.t-title {
  font-size: var(--fs-ui);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-focus {
  flex: none;
  min-height: 34px;
  padding: 0 var(--sp-7);
  border-radius: var(--r-pill);
  background: var(--accDim);
  color: var(--acc2);
  font-size: var(--fs-meta);
  font-weight: 700;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.t-focus:hover { background: var(--acc); color: var(--on-acc); }

/* --- Vista Semana --- */

.wk-day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--sp-5);
  padding: 0 var(--sp-2);
}
.wk-label {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--acc2);
}
.wk-now { font-size: var(--fs-label); color: var(--ink-3); }

.wk-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-row-s);
  background: rgba(255, 255, 255, 0.03);
}
.wk-row.meeting { background: rgba(255, 255, 255, 0.055); }
.wk-row[role='button'] { cursor: pointer; }

.wk-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc, rgba(255, 255, 255, 0.3));
}
.wk-time { flex: none; font-size: var(--fs-meta); color: var(--ink-3); }
.wk-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-free {
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-body);
  color: var(--ink-4);
}

/* --- Rapidas: chips --- */

.quick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.quick-note { color: var(--ink-4); }

.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.q-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 46px;
  padding: 0 var(--sp-7) 0 var(--sp-5);
  border-radius: var(--r-pill);
  cursor: pointer;
  max-width: 100%;
}
.q-chip.done { opacity: 0.45; }
.q-chip.done .q-title { text-decoration: line-through; }

.q-check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.26);
  background: transparent;
}
.q-check.on {
  border-color: var(--ok);
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1712' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.4l4 4 8-8.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.q-emoji { font-size: 15px; }
.q-title {
  font-size: var(--fs-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-add {
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  background: none;
  color: var(--ink-3);
  font-size: var(--fs-body);
  font-weight: 700;
  justify-content: center;
}

/* --- Minimo de hoy --- */

.min-card {
  border-radius: var(--r-field);
  padding: var(--sp-8);
  background: rgba(111, 211, 184, 0.06);
  border: 1px solid rgba(111, 211, 184, 0.14);
}
.min-head { margin-bottom: var(--sp-6); }
.min-label { color: var(--ok); }

/* --- Celebracion --- */

.celebrate-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.confetti {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiFall 1.3s var(--ease) forwards;
}
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(-10px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(150px) rotate(240deg); }
}

.celebrate-card {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  min-width: 150px;
  padding: var(--sp-9) var(--sp-11);
  border-radius: var(--r-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  animation: pop 0.34s var(--ease);
}
.celebrate-emoji { font-size: 34px; line-height: 1; }
.celebrate-pts { font-size: var(--fs-title-s); color: var(--ok); font-weight: 500; }
.celebrate-msg { font-size: var(--fs-body); color: var(--ink-2); }

/* ============================================================
   Rediseno — Fase 2: Plan y Citas
   ============================================================ */

/* Titulo editorial de pantalla (Plan, Citas). Hoy no lo lleva: alli manda
   la franja de progreso. */
.screen-title {
  font-size: var(--fs-title-l);
  line-height: 1.06;
  margin: 0 0 var(--sp-7);
}
.grid .screen-title { margin-bottom: var(--sp-2); }

/* Campos de formulario, ya globales (antes solo en Acceso). */
.field {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-btn);
  color: var(--ink);
}
.field:focus { border-color: var(--accLine); outline: none; }

/* Selector segmentado, en el lenguaje del conmutador de Hoy. */
.seg {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: var(--sp-7);
}
.seg button {
  flex: 1;
  min-height: 38px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-3);
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.seg button.on {
  background: rgba(255, 255, 255, 0.13);
  color: var(--ink);
}

/* --- Carga del dia --- */

.load-card {
  border-radius: var(--r-card);
  padding: var(--sp-7) var(--sp-8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
/* Pasado del limite: la tarjeta entera se tine de ambar. Aviso, no regano. */
.load-card.over {
  background: var(--warmDim);
  border-color: rgba(240, 179, 84, 0.3);
}

.load-strip-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
}
.load-strip-title { font-size: var(--fs-ui); font-weight: 700; }
.load-card.over .load-strip-title { color: var(--warm); }
.load-strip-num { font-size: var(--fs-meta); color: var(--ink-3); }

.load-track {
  position: relative;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
}
.load-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  transition: width 0.5s var(--ease);
  max-width: 100%;
}
.load-card.over .load-fill { background: linear-gradient(90deg, var(--warm), #F6CE8B); }
/* La marca del maximo: blanca, de 2px, siempre visible sobre la barra. */
.load-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
}
.load-strip-note { font-size: var(--fs-body); color: var(--ink-2); }

.suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  padding-top: var(--sp-2);
}
.suggestion .txt { flex: 1 1 100%; font-size: var(--fs-body); color: var(--ink-2); }
.suggestion .txt b { color: var(--ink); }

.btn-acc-md {
  min-height: 44px;
  padding: 0 var(--sp-9);
  border-radius: var(--r-row-s);
  background: var(--warm);
  color: var(--on-warm);
  font-size: var(--fs-body);
  font-weight: 700;
  transition: transform 0.16s var(--ease);
}
.btn-acc-md:active { transform: scale(0.97); }

.btn-ghost-md {
  min-height: 44px;
  padding: 0 var(--sp-7);
  border-radius: var(--r-row-s);
  color: var(--ink-3);
  font-size: var(--fs-body);
  font-weight: 700;
}

/* --- Organizar mi dia --- */

.plan-action { margin-bottom: var(--sp-7); }
.plan-action-btn {
  width: 100%;
  min-height: 52px;
  border-radius: var(--r-btn);
  background: var(--accDim);
  color: var(--acc2);
  font-size: var(--fs-ui);
  font-weight: 700;
  transition: background 0.22s var(--ease), transform 0.16s var(--ease);
}
.plan-action-btn:active { transform: scale(0.985); }

/* --- Rejilla del dia --- */

.day-grid { position: relative; }

.hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.hour-line .mono {
  position: absolute;
  top: -8px;
  left: 0;
  width: 42px;
  font-size: var(--fs-label);
  color: var(--ink-4);
}

.hour-open {
  position: absolute;
  left: 50px;
  right: 0;
  border: 1.5px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--r-row-s);
  color: var(--ink-4);
  font-size: var(--fs-meta);
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.hour-open:hover { border-color: var(--accLine); color: var(--acc2); }

.block {
  position: absolute;
  left: 50px;
  right: 0;
  border-radius: var(--r-row-s);
  padding: var(--sp-3) var(--sp-6);
  background: color-mix(in srgb, var(--pc, #8F7CF7) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #8F7CF7) 32%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.block.fixed {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.block.meeting {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
}
.block.dragging { opacity: 0.85; box-shadow: var(--sh-hero); z-index: 3; }
/* Solaparse avisa en ambar, no se impide: el usuario manda. */
.block.clashing { border-color: var(--warm); box-shadow: inset 0 0 0 1px var(--warm); }

.btime {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.btitle {
  font-size: var(--fs-body);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brm {
  position: absolute;
  top: 2px;
  right: 40px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-3);
  font-size: 17px;
}
.brm:hover { color: var(--warm); }

.bnudge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) 0;
}
.bnudge-btn {
  width: 30px;
  height: 24px;
  border-radius: var(--sp-3);
  color: var(--ink-3);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
}
.bnudge-btn:hover { color: var(--ink); }
.bgrip {
  flex: 1;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  cursor: grab;
  touch-action: none;
  font-size: 15px;
}
.bgrip:active { cursor: grabbing; }

/* --- Citas --- */

.cita-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sheet);
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  box-shadow: var(--sh-hero);
}
.cita-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 190px;
  height: 160px;
  border-radius: 50%;
  background: var(--accDim);
  filter: blur(38px);
  pointer-events: none;
}

.cita-chip {
  align-self: flex-start;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--accDim);
  color: var(--acc2);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cita-title { font-size: 26px; line-height: 1.1; }
.cita-when { font-size: var(--fs-meta); color: var(--ink-3); }
.cita-people { font-size: var(--fs-body); color: var(--ink-2); }
.cita-prep {
  font-size: var(--fs-meta);
  color: var(--acc2);
  padding-top: var(--sp-2);
}

.cita-add {
  width: 100%;
  min-height: 52px;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--r-btn);
  color: var(--ink-3);
  font-size: var(--fs-ui);
  font-weight: 700;
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.cita-add:hover { border-color: var(--accLine); color: var(--acc2); }

.cita-row {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-row);
}

.cita-date {
  flex: none;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.cita-dow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cita-num { font-size: var(--fs-title-s); line-height: 1; }

.cita-sep {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.09);
}

/* ============================================================
   Rediseno — ajustes de la Fase 2 (rendimiento y captura)
   ============================================================ */

/* Cristal para lo que se repite muchas veces.
   Lleva desenfoque de verdad —- es el efecto, no un adorno —- pero con un radio
   menor (--gb-lite) que las superficies grandes. Desenfocar 24px quince veces
   es lo que ahogaba al telefono; a 12px el compositor respira y el vidrio se
   sigue viendo. Si aun asi va lento, Ajustes → Transparencias lo apaga todo. */
.glass-lite {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04) 55%,
    rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: blur(var(--gb-lite)) saturate(170%) brightness(1.10);
  backdrop-filter: blur(var(--gb-lite)) saturate(170%) brightness(1.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 -10px 20px rgba(255, 255, 255, 0.035);
}

/* --- Alta rapida en linea --- */

.q-typing { padding-right: var(--sp-5); gap: var(--sp-3); }

/* Pastilla de proyecto al crear una rapida. Cicla al tocarla, sin abrir nada:
   una rapida es de dos minutos y no aguanta un selector. "auto" quiere decir
   que lo detecto por las palabras del titulo, que es lo que pasa casi siempre. */
.q-proj {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  min-height: 34px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--pc, #FFFFFF) 16%, rgba(255, 255, 255, 0.05));
  color: var(--ink-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  max-width: 116px;
  overflow: hidden;
  white-space: nowrap;
}
.q-input {
  width: 190px;
  max-width: 52vw;
  min-height: 42px;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-body);
  color: var(--ink);
}
.q-input::placeholder { color: var(--ink-4); }

/* --- Capturar --- */

.cap-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.dump {
  width: 100%;
  min-height: 210px;
  padding: var(--sp-8);
  border-radius: var(--r-field);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink);
  font-size: var(--fs-lead);
  line-height: 1.45;
  resize: vertical;
}
.dump:focus { border-color: var(--accLine); outline: none; }
.dump::placeholder { color: var(--ink-4); }

.cap-dictar {
  align-self: flex-start;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-9);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 700;
  transition: background 0.22s var(--ease), transform 0.16s var(--ease);
}
.cap-dictar:active { transform: scale(0.97); }
/* Grabando: el boton se tine del acento para que no haya duda de que esta vivo. */
.cap-dictar.rec { background: var(--acc); color: var(--on-acc); }

.cap-status {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.cap-primary {
  min-height: 56px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  font-size: var(--fs-lead);
  font-weight: 700;
  box-shadow: var(--sh-btn);
  transition: transform 0.16s var(--ease);
}
.cap-primary:active { transform: scale(0.985); }
.cap-primary:disabled {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-4);
  box-shadow: none;
}

.cap-secondary {
  min-height: 52px;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-2);
  font-size: var(--fs-ui);
  font-weight: 700;
}
.cap-secondary:disabled { color: var(--ink-4); }

.cap-note {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--ink-3);
}
/* Los errores tambien en ambar. No existe el rojo. */
.cap-note.warn { color: var(--warm); }

/* ============================================================
   Rediseno — Fase 4: Rutinas, Como vas y arranque de practicas
   ============================================================ */

.screen-sub {
  margin: calc(-1 * var(--sp-4)) 0 var(--sp-9);
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.45;
}

/* --- Practicas: el boton de arranque --- */

.pr-start {
  min-height: 46px;
  padding: 0 var(--sp-9);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  font-size: var(--fs-body);
  font-weight: 700;
  box-shadow: 0 8px 18px var(--accDim);
  transition: transform 0.16s var(--ease);
}
.pr-start:active { transform: scale(0.97); }
/* Corriendo: se vuelve verde, el color de "esto esta pasando de verdad". */
.pr-start.live {
  background: linear-gradient(180deg, var(--ok2), var(--ok));
  color: #0B1712;
  box-shadow: 0 8px 18px var(--okDim);
}

.wb-card.wb-target {
  border-color: var(--accLine);
  box-shadow: 0 0 0 1px var(--accLine);
}

/* --- Rutinas --- */

.rt-group-label { display: block; margin: var(--sp-9) 0 var(--sp-5); }

.rt-chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.rt-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 48px;
  padding: 0 var(--sp-8);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.16s var(--ease);
}
.rt-chip:hover { transform: translateY(-2px); }
.rt-chip.on {
  background: color-mix(in srgb, var(--acc) 24%, transparent);
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  color: var(--ink);
}

.rt-emoji { font-size: 16px; }
.rt-name { font-size: var(--fs-body); font-weight: 700; }
.rt-min { font-size: var(--fs-micro); color: var(--ink-3); }
.rt-chip.on .rt-min { color: var(--acc2); }

/* Punto en la esquina: distingue las propias de las del catalogo. */
.rt-own {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc2);
}

.rt-create {
  width: 100%;
  min-height: 52px;
  margin-top: var(--sp-10);
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--r-btn);
  color: var(--ink-3);
  font-size: var(--fs-ui);
  font-weight: 700;
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.rt-create:hover { border-color: var(--accLine); color: var(--acc2); }

.rt-maker {
  margin-top: var(--sp-10);
  padding: var(--sp-9);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.rt-input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sp-8);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink);
  font-size: var(--fs-ui);
}
.rt-input:focus { border-color: var(--accLine); outline: none; }

.rt-sub { display: block; margin-top: var(--sp-3); }

.rt-emoji-row, .rt-opt-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.rt-emoji-btn {
  width: 46px;
  height: 46px;
  border-radius: var(--r-mini);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 19px;
}
.rt-emoji-btn.on {
  background: var(--accDim);
  border-color: var(--accLine);
}

.rt-opt {
  min-height: 44px;
  padding: 0 var(--sp-8);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 700;
}
.rt-opt.on { background: var(--accDim); border-color: var(--accLine); color: var(--acc2); }

.rt-maker-actions { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-3); }
.rt-save {
  flex: 1;
  min-height: 52px;
  min-width: 200px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  font-size: var(--fs-ui);
  font-weight: 700;
  box-shadow: var(--sh-btn);
}
.rt-cancel { min-height: 52px; padding: 0 var(--sp-8); color: var(--ink-3); font-weight: 700; }

.rt-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}
.rt-preset {
  min-height: 52px;
  padding: 0 var(--sp-9);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 700;
}
.rt-done {
  flex: 1;
  min-height: 52px;
  min-width: 180px;
  border-radius: var(--r-btn);
  background: var(--accDim);
  color: var(--acc2);
  font-size: var(--fs-ui);
  font-weight: 700;
}

/* --- Como vas --- */

.st-card {
  border-radius: var(--r-card);
  padding: var(--sp-9);
  margin-bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.st-lead { font-size: var(--fs-title-s); line-height: 1.3; color: var(--ink-2); }
.st-lead b { color: var(--ink); font-weight: 700; }

.st-sub { font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; }

/* Barras por dia. La escala es el mejor dia de la semana, no una meta:
   una barra corta no significa que fallaste. */
.st-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
  height: 108px;
  padding-top: var(--sp-3);
}
.st-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); height: 100%; }
.st-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.st-bar {
  width: 100%;
  border-radius: var(--sp-3) var(--sp-3) var(--sp-1) var(--sp-1);
  background: rgba(255, 255, 255, 0.10);
  transition: height 0.5s var(--ease);
}
.st-bar.on { background: linear-gradient(180deg, var(--ok2), var(--ok)); }
.st-dow { font-size: var(--fs-badge); color: var(--ink-4); }

.st-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.st-level-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); }
.st-level-n { font-size: var(--fs-title-l); line-height: 1; }
.st-level-name { font-size: var(--fs-body); color: var(--acc2); margin-top: var(--sp-2); }
.st-points { font-size: var(--fs-ui); color: var(--ink-2); }

.st-track { height: 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.st-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  transition: width 0.5s var(--ease);
}

.st-streak { display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-3); }
.st-flame { font-size: 24px; }
.st-streak-n { font-size: var(--fs-ui); font-weight: 700; }

/* --- Colores --- */

.st-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.st-swatch {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 48px;
  padding: 0 var(--sp-8);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 700;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.st-swatch-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 26%, transparent);
}
.st-swatch.on { border-color: var(--sw); background: color-mix(in srgb, var(--sw) 18%, transparent); color: var(--ink); }
/* Bloqueado dice QUE FALTA, no "no puedes". */
.st-swatch.locked { opacity: 0.45; cursor: default; }
.st-swatch-need { font-size: var(--fs-badge); color: var(--ink-3); }

/* --- Tabla de puntos --- */

.st-table { display: flex; flex-direction: column; }
.st-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: 44px;
}
.st-row + .st-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.st-row-label { font-size: var(--fs-body); color: var(--ink-2); }
.st-row-n { font-size: var(--fs-ui); color: var(--ok); font-weight: 500; }

/* --- Premios y logros --- */

.st-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
}
.st-badge {
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-row-s);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.45;
}
.st-badge.got {
  opacity: 1;
  background: var(--okDim);
  border-color: rgba(79, 214, 156, 0.28);
}
.st-badge-name { font-size: var(--fs-body); font-weight: 700; }
.st-badge.got .st-badge-name { color: var(--ok); }
.st-badge-hint { font-size: var(--fs-micro); color: var(--ink-3); margin-top: var(--sp-2); }

/* ============================================================
   Rediseno — Fase 3: Foco
   ============================================================ */

.fx-player {
  border-radius: var(--r-card);
  padding: var(--sp-8);
  margin-bottom: var(--sp-9);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.fx-player-head { display: flex; align-items: center; justify-content: space-between; }
.fx-player-msg { font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; }

.fx-label { display: block; margin-bottom: var(--sp-5); }

.fx-tasks {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-9);
}
.fx-task {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 44px;
  padding: 0 var(--sp-8);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  font-size: var(--fs-body);
  max-width: 62vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-task.on { background: var(--accDim); border-color: var(--accLine); color: var(--ink); }
.fx-task-empty { font-size: var(--fs-meta); color: var(--ink-4); }

/* --- Conmutador de fase --- */

.fx-phase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-10);
}
.fx-phase button {
  min-height: 48px;
  border-radius: var(--r-pill);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  color: var(--ink-3);
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.fx-phase button.on { background: var(--accDim); color: var(--ink); }
/* En descanso manda el verde, no el acento: es otro tipo de tiempo. */
.fx-phase button[data-phase='break'].on { background: rgba(79, 214, 156, 0.22); }
.fx-phase-name { font-size: var(--fs-body); font-weight: 700; }
.fx-phase-min { font-size: var(--fs-badge); letter-spacing: 0.16em; color: var(--ink-4); }
.fx-phase button.on .fx-phase-min { color: var(--acc2); }
.fx-phase button[data-phase='break'].on .fx-phase-min { color: var(--ok2); }

/* --- La rueda --- */

.fx-dial-wrap { display: flex; justify-content: center; margin-bottom: var(--sp-10); }

.fx-dial {
  position: relative;
  width: 272px;
  height: 272px;
  max-width: 78vw;
  max-height: 78vw;
  border-radius: 50%;
  /* El relleno por grados. --ring cambia con la fase. */
  background: conic-gradient(from 0deg, var(--ring, var(--acc)) var(--deg, 0deg),
    rgba(255, 255, 255, 0.06) var(--deg, 0deg));
  box-shadow: var(--sh-ring);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.fx-dial.dragging { cursor: grabbing; }
.fx-dial.break { box-shadow: 0 0 50px var(--okDim); }

/* Marcas de minuto: una cada 6 grados, recortadas a un aro. */
.fx-ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -0.35deg,
    rgba(255, 255, 255, 0.30) 0deg 0.7deg,
    transparent 0.7deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 78%, #000 79%);
  mask: radial-gradient(circle, transparent 78%, #000 79%);
  pointer-events: none;
}

.fx-ref {
  position: absolute;
  font-size: var(--fs-micro);
  color: var(--ink-4);
  pointer-events: none;
}
.fx-ref-t { top: 10px; left: 50%; transform: translateX(-50%); }
.fx-ref-b { bottom: 10px; left: 50%; transform: translateX(-50%); }
.fx-ref-l { left: 12px; top: 50%; transform: translateY(-50%); }
.fx-ref-r { right: 12px; top: 50%; transform: translateY(-50%); }

/* La perilla orbita: el contenedor rota y la perilla vive en su borde. */
.fx-knob-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.2s var(--ease);
}
.fx-dial.dragging .fx-knob-orbit { transition: none; }
.fx-knob {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--acc);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.fx-dial.break .fx-knob { border-color: var(--ok); }

.fx-disc {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--bg-ring);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  pointer-events: none;
}
.fx-num { font-size: var(--fs-timer); line-height: 1; font-weight: 500; }
.fx-sub { font-size: var(--fs-meta); color: var(--ink-3); }

/* --- Controles --- */

.fx-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-9);
}
.fx-main {
  flex: 1;
  min-height: 56px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  font-size: var(--fs-lead);
  font-weight: 700;
  box-shadow: var(--sh-btn);
  transition: transform 0.16s var(--ease);
}
.fx-main:active { transform: scale(0.985); }
.fx-main.running {
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink);
  box-shadow: none;
}
.fx-reset {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Ciclo --- */

.fx-cycle {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  margin-bottom: var(--sp-12);
}
.fx-dots { display: flex; gap: var(--sp-4); }
.fx-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.fx-dot.done { background: var(--ok); }
.fx-dot.now { box-shadow: 0 0 0 4px var(--accDim); }

/* --- Respirar y Agua, fijos bajo el pomodoro --- */

.br-card, .wt-card {
  border-radius: var(--r-card);
  padding: var(--sp-9);
  margin-bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.br-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); }
.br-title { font-size: var(--fs-title-s); }
.br-pattern { font-size: var(--fs-micro); color: var(--ink-2); }

/* Alto fijo: sin el, la tarjeta entera salta cada vez que el blob se infla. */
.br-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 196px;
}

.br-blob {
  position: absolute;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  will-change: transform, opacity;
}
.br-blob > span { position: absolute; display: block; }

/* Halo difuso con su propio pulso lento. */
.br-halo {
  inset: -26px;
  border-radius: 50%;
  background: var(--accDim);
  animation: halo 9s ease-in-out infinite;
}
/* Cuerpo organico: gradiente descentrado + morph del borde. El circulo
   perfecto se lee como un medidor; esto se lee como algo vivo. */
.br-body {
  inset: 0;
  background: radial-gradient(circle at 34% 28%, var(--acc2), var(--acc) 60%, transparent 80%);
  animation: morph 18s ease-in-out infinite;
}
.br-core {
  inset: 30px;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  backdrop-filter: blur(6px) saturate(160%);
  box-shadow: inset 0 1.4px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* Brillo especular: lo que lo termina de volver un objeto y no una mancha. */
.br-shine {
  top: 22px;
  left: 34px;
  width: 26px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  filter: blur(5px);
}

@keyframes morph {
  0%, 100% { border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; }
  25% { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; }
  50% { border-radius: 52% 48% 60% 40% / 56% 44% 56% 44%; }
  75% { border-radius: 42% 58% 46% 54% / 48% 52% 48% 52%; }
}

/* Fase y cuenta atras DEBAJO del blob: dentro se moverian con el. */
.br-read {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: calc(-1 * var(--sp-6));
}
.br-phase {
  font-size: 23px;
  line-height: 1;
  color: rgba(244, 243, 247, 0.92);
  transition: opacity 0.4s ease;
}
.br-left { font-size: var(--fs-micro); letter-spacing: 0.22em; color: var(--ink-3); }

.br-techs { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.br-tech {
  min-height: 47px;
  padding: 0 var(--sp-8);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(244, 243, 247, 0.82);
  transition: all 0.25s ease;
}
.br-tech.on {
  background: color-mix(in srgb, var(--acc) 22%, transparent);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  color: var(--ink);
}

.br-go {
  min-height: 52px;
  border-radius: var(--r-row-s);
  font-size: 14.5px;
  font-weight: 700;
  background: color-mix(in srgb, var(--acc) 24%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  transition: all 0.25s ease;
}
/* Corriendo va en ambar: parar es la accion, y el ambar avisa sin alarmar. */
.br-go.live { background: rgba(240, 179, 84, 0.20); color: var(--warm); }

.wt-glasses { display: flex; gap: var(--sp-3); }
.wt-glass {
  flex: 1;
  height: 46px;
  /* Esquinas de abajo mas redondas: dibuja un vaso sin necesitar un icono. */
  border-radius: 12px 12px 16px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  transition: all 0.3s var(--ease);
}
.wt-glass.on {
  background: rgba(111, 211, 184, 0.28);
  border-color: rgba(111, 211, 184, 0.5);
}
.wt-glass:hover { transform: translateY(-2px); }

/* --- Menu: emoji en cuadro tintado --- */

.sheet-emoji {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.sheet-row .sheet-chev { margin-left: auto; color: var(--ink-4); display: flex; }
.sheet-row .sheet-sub { margin-left: auto; }
.sheet-row .sheet-sub + .sheet-chev { margin-left: var(--sp-5); }

.sheet-colors {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-2) var(--sp-7);
}
.sheet-color {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--sw);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s var(--ease);
}
.sheet-color i { width: 24px; height: 24px; border-radius: 50%; background: var(--sw); display: block; }
.sheet-color.on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw) 28%, transparent); }
.sheet-color:active { transform: scale(0.92); }

/* ============================================================
   Rediseno — cierre de la Fase 4: Archivo
   ============================================================ */

.search {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sp-8);
  margin-bottom: var(--sp-9);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink);
  font-size: var(--fs-ui);
}
.search:focus { border-color: var(--accLine); outline: none; }
.search::placeholder { color: var(--ink-4); }

.arch-evidence {
  border-radius: var(--r-card);
  padding: var(--sp-9);
  margin-bottom: var(--sp-9);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.evidence-cell .n {
  font-family: var(--font-mono);
  font-size: var(--fs-title-s);
  color: var(--ink);
}
.evidence-cell .label {
  font-size: var(--fs-micro);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-top: var(--sp-2);
}

/* 28 dias. Los ceros se dibujan como una linea fina, no como un hueco:
   un dia vacio se ve vacio, no roto. */
.evidence-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 62px;
}
.evidence-bars span {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--ok2), var(--ok));
}
.evidence-bars span.zero { background: rgba(255, 255, 255, 0.10); }

.arch-count { display: block; margin-bottom: var(--sp-6); }

.arch-day {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.arch-day .dlabel {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--acc2);
}
.arch-day .rule { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.07); }
.arch-day .dsum { font-size: var(--fs-micro); color: var(--ink-3); }

/* Lo cerrado se dibuja en verde: es avance guardado, no una lista muerta. */
.arch-item {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 52px;
  padding: 0 var(--sp-7);
  border-radius: var(--r-row-s);
  background: rgba(79, 214, 156, 0.06);
  border: 1px solid rgba(79, 214, 156, 0.14);
}
.arch-check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1712' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.4l4 4 8-8.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.arch-item .t {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arch-item .lbl { font-size: var(--fs-micro); color: var(--ink-4); }

.arch-del {
  flex: none;
  min-width: 44px;
  height: 44px;
  border-radius: var(--r-mini);
  color: var(--ink-4);
  font-size: 17px;
}
/* Armado para borrar: ambar, nunca rojo. */
.arch-del.armed {
  background: var(--warmDim);
  color: var(--warm);
  font-size: var(--fs-meta);
  font-weight: 700;
  padding: 0 var(--sp-5);
}

/* ============================================================
   Rediseno — Fase 5: Acceso, Ajustes y Avisos

   El handoff no cubre estas tres pantallas. Se visten con los tokens
   sin inventarles layout, y en Ajustes se resuelve el problema
   conocido #1: once tarjetas del mismo peso, todas abiertas.
   ============================================================ */

/* --- Ajustes en grupos plegables --- */

.set-group {
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.set-group[open] { background: rgba(255, 255, 255, 0.055); }

.set-sum {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 64px;
  padding: var(--sp-6) var(--sp-12) var(--sp-6) var(--sp-8);
  cursor: pointer;
  position: relative;
  list-style: none;
}
.set-sum::-webkit-details-marker { display: none; }

/* Chevron propio: el triangulo del navegador no sigue el sistema. */
.set-sum::after {
  content: '';
  position: absolute;
  right: var(--sp-8);
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.22s var(--ease);
}
.set-group[open] .set-sum::after { transform: rotate(-135deg); margin-top: -2px; }

.set-name { font-size: var(--fs-ui); font-weight: 700; }
.set-hint { font-size: var(--fs-meta); color: var(--ink-3); }

/* Las tarjetas de adentro pierden su marco: el grupo ya es el marco. */
.set-group .card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--sp-6) var(--sp-8) var(--sp-8);
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.logout-btn {
  width: 100%;
  min-height: 52px;
  border-radius: var(--r-btn);
  background: var(--warmDim);
  color: var(--warm);
  font-size: var(--fs-ui);
  font-weight: 700;
}

/* --- Primera vez --- */

.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 5, 10, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-9);
  animation: fade-in 0.3s ease;
}

.ob-card {
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: var(--r-sheet);
  padding: var(--sp-11);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  box-shadow: var(--sh-sheet);
  animation: pop 0.34s var(--ease);
}

.ob-title {
  font-size: var(--fs-title);
  line-height: 1.12;
  margin: 0;
}
.ob-sub {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
}

.ob-fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.ob-input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sp-8);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink);
}
.ob-input:focus { border-color: var(--accLine); outline: none; }
.ob-input::placeholder { color: var(--ink-4); }

.ob-go {
  min-height: 56px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  font-size: var(--fs-lead);
  font-weight: 700;
  box-shadow: var(--sh-btn);
}
.ob-go:disabled { opacity: 0.6; }

/* Saltarse esto no cuesta nada y no se esconde: obligar a configurar antes de
   dejar entrar contradice "dos campos y estas dentro". */
.ob-skip {
  min-height: 44px;
  color: var(--ink-3);
  font-size: var(--fs-body);
}

.hero-empty-sub {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- Proyectos --- */

.proj-row, .proj-new {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 52px;
  padding: 0 var(--sp-3);
}
.proj-row + .proj-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
/* Archivado se ve apagado pero sigue ahi: nada se pierde. */
.proj-row.archived { opacity: 0.45; }

.proj-swatch {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pc) 18%, transparent);
}

.proj-name {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-mini);
  background: none;
  color: var(--ink);
  font-size: var(--fs-body);
}
.proj-name:focus {
  border-color: var(--accLine);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.proj-btn {
  flex: none;
  min-height: 44px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-mini);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  font-size: var(--fs-meta);
  font-weight: 700;
}
.proj-btn.acc { background: var(--accDim); color: var(--acc2); }
.proj-btn.warm { color: var(--warm); }

.proj-add {
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-5);
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--r-row-s);
  color: var(--ink-3);
  font-size: var(--fs-body);
  font-weight: 700;
}
.proj-add:hover { border-color: var(--accLine); color: var(--acc2); }

/* ============================================================
   Que la pantalla no se mueva ni se amplie
   ============================================================ */

/* LA CAUSA DE LA AMPLIACION: Safari de iPhone hace zoom automatico al enfocar
   un campo con letra menor a 16px, y no vuelve solo. Casi todos los campos
   estaban en 13.5px. No se arregla con user-scalable=no -- iOS lo ignora desde
   hace anos y ademas romperia el pellizco para acercar, que es accesibilidad.
   Se arregla con lo unico que iOS respeta: 16px de verdad al enfocar. */
input, textarea, select { font-size: 16px; }

.field, .dump, .search, .q-input, .proj-name, .rt-input, .ed-title, .ed-notes {
  font-size: 16px;
}

/* Nada empuja la pagina a lo ancho. Un solo elemento que se pase de largo
   deja toda la app desplazable en horizontal y se siente rota. */
html, body { max-width: 100%; overflow-x: hidden; }
.body-scroll { overscroll-behavior-y: contain; }

/* Las capas no rebotan ni arrastran la pagina de atras. */
.sheet-overlay, .editor-overlay, .now-overlay, .alarm-overlay, .breath-overlay {
  overscroll-behavior: contain;
  touch-action: none;
}
.sheet, .editor-sheet { touch-action: pan-y; }

/* --- Cerrar arrastrando --- */

.sheet-grip {
  /* Zona de agarre real de 44px: el tirador se ve fino pero se toca comodo. */
  position: relative;
  padding: 0;
}
.sheet-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: calc(-1 * var(--sp-5)) 0 var(--sp-2);
  cursor: grab;
  touch-action: none;
}
.sheet-drag:active { cursor: grabbing; }
.sheet-drag i {
  display: block;
  width: 42px;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.34);
}

/* Mientras se arrastra no hay transicion: la hoja tiene que seguir al dedo. */
.sheet.dragging, .editor-sheet.dragging { transition: none; animation: none; }
.sheet.closing, .editor-sheet.closing {
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
  transform: translateY(110%);
  opacity: 0;
}

.sheet-close {
  width: 100%;
  min-height: 52px;
  margin-top: var(--sp-5);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-2);
  font-size: var(--fs-ui);
  font-weight: 700;
}

/* --- Editor de una tarea rapida ---
   Una rapida es, por definicion, algo de dos minutos. Preguntarle duracion,
   pasos y fecha limite cuesta mas que hacerla, asi que esas filas no se
   muestran. Sigue estando "Tamano", que es el camino para convertirla en
   tarea normal si resulto no ser tan rapida. */
.editor-sheet.quick [data-ed='pasos'],
.editor-sheet.quick [data-ed='cuanto crees que toma'],
.editor-sheet.quick [data-ed='fecha limite'] { display: none; }

/* --- Avisos --- */

.alert-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sheet);
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--sh-hero);
}
.alert-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 190px;
  height: 160px;
  border-radius: 50%;
  background: var(--accDim);
  filter: blur(38px);
  pointer-events: none;
}

.next-alert-time { font-size: var(--fs-meta); color: var(--acc2); }
.next-alert-task {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.12;
}

.alert-cta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-3); }
.alert-cta .go {
  flex: 1;
  min-width: 150px;
  min-height: 50px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  color: var(--on-acc);
  font-size: var(--fs-ui);
  font-weight: 700;
  box-shadow: var(--sh-btn);
}
.alert-cta .snooze {
  min-height: 50px;
  padding: 0 var(--sp-9);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 700;
}

/* --- Acceso --- */

.screen-login .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--acc2);
  font-weight: 400;
}
.login-sub { color: var(--ink-2); font-size: var(--fs-ui); }
.field-label { color: var(--ink-3); font-size: var(--fs-meta); }
.btn-link { color: var(--ink-3); text-decoration: none; font-size: var(--fs-body); }
.btn-link:hover { color: var(--acc2); }