/* ============================================================
   Miles Task — Hoja de estilos principal
   ============================================================ */

/* ─── Variables (Tema oscuro) ─── */
:root {
  /* Le dice al navegador que dibuje SUS controles en oscuro: el desplegable del <select>,
     el calendario de <input type=date>, el reloj de <input type=time>, las barras de
     scroll y el autocompletado. Sin esto, todos esos elementos salían con el tema claro
     del sistema sobre una app oscura — el corte visual más grosero que teníamos. */
  color-scheme: dark;
  /* Tiñe con el color de la app lo nativo que no se puede estilar: checkbox, range, focus. */
  accent-color: #22d3ee;
  --bg-deep: #080810;
  --bg-base: #0e0e18;
  --bg-card: #151520;
  --bg-card-hover: #1c1c2c;
  --bg-elevated: #222236;
  --bg-input: #111119;
  --bg-drawer: #0b0b14;
  --tx: #eaeaf2;
  --tx2: #8a8aa6;
  --tx3: #55556e;
  --cyan: #00e5cc;
  --cyan2: #00c4ae;
  --cyan-g: rgba(0, 229, 204, .13);
  --cyan-gs: rgba(0, 229, 204, .28);
  --purple: #8b3fd9;
  --purple-g: rgba(139, 63, 217, .13);
  --magenta: #e84393;
  --orange: #fd7e14;
  --red: #ef4444;
  --green: #10b981;
  --yellow: #f59e0b;
  --blue: #3b82f6;
  --indigo: #6366f1;
  --pink: #ec4899;
  --teal: #14b8a6;
  --grad1: linear-gradient(135deg, var(--cyan), var(--purple));
  --grad-warm: linear-gradient(135deg, var(--orange), var(--magenta));
  --grad-blue: linear-gradient(135deg, var(--blue), var(--indigo));
  --grad-green: linear-gradient(135deg, var(--teal), var(--green));
  --grad-pink: linear-gradient(135deg, var(--pink), var(--magenta));
  --r: 16px;
  --r-sm: 12px;
  --r-full: 50px;
  --shadow: 0 2px 20px rgba(0, 0, 0, .3);
  --t: .22s cubic-bezier(.4, 0, .2, 1);
  --font: 'Outfit', system-ui, sans-serif;
  /* Fuente de presentación, solo para la pantalla de carga. Outfit es muy geométrica y de
     letras casi circulares; en el telón de entrada —que es lo primero que ve alguien— eso
     se leía blando. Sora tiene formas más rectas y sobrias, así que la marca entra con otro
     tono sin cambiar la tipografía de toda la aplicación.
     El respaldo es `system-ui` a propósito: la fuente llega de la red y el telón aparece
     ANTES, así que durante un instante se ve la del sistema. Con una de palo seco parecida
     el cambio no se nota; con una serif de respaldo, el salto sería evidente. */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* ─── Liquid Glass (tema oscuro) ───
     Superficies translúcidas que refractan el color ambiental del fondo. */
  --glass:        rgba(24, 24, 38, .55);   /* fill de tarjetas/superficies */
  --glass-strong: rgba(17, 17, 29, .72);   /* listas: más opaco = más legible */
  --glass-chrome: rgba(10, 10, 20, .62);   /* topbar / nav / drawer */
  --glass-brd:    rgba(255, 255, 255, .10);/* hairline del borde */
  --glass-hi:     rgba(255, 255, 255, .16);/* brillo especular (arista superior) */
  --glass-blur:   22px;
  --glass-sat:    165%;
  --glass-sh:     0 10px 34px -14px rgba(0, 0, 0, .6), 0 2px 8px -3px rgba(0, 0, 0, .4);
  --glass-sh-sm:  0 2px 12px -6px rgba(0, 0, 0, .5);
  --glass-sh-lg:  0 26px 70px -20px rgba(0, 0, 0, .72), 0 6px 18px -6px rgba(0, 0, 0, .45);
  /* Manchas de color del fondo ambiental */
  --amb-1: rgba(0, 229, 204, .16);
  --amb-2: rgba(139, 63, 217, .18);
  --amb-3: rgba(232, 67, 147, .12);
}

/* ─── Variables (Tema claro) ─── */
html.light {
  color-scheme: light; /* los controles nativos acompañan al tema claro */
  --bg-deep: #f5f6fa;
  --bg-base: #ffffff;
  --bg-card: #f0f1f6;
  --bg-card-hover: #e8e9f0;
  --bg-elevated: #e2e3ed;
  --bg-input: #edeef4;
  --bg-drawer: #f8f9fc;
  --tx: #1a1a2e;
  --tx2: #5a5a7a;
  --tx3: #9090a8;
  --cyan: #00b8a5;
  --cyan2: #009e8e;
  --cyan-g: rgba(0, 184, 165, .1);
  --cyan-gs: rgba(0, 184, 165, .22);
  --purple: #7c3aed;
  --purple-g: rgba(124, 58, 237, .1);
  --shadow: 0 2px 16px rgba(0, 0, 0, .06);

  /* ─── Liquid Glass (tema claro) ─── */
  --glass:        rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .74);
  --glass-chrome: rgba(255, 255, 255, .66);
  --glass-brd:    rgba(15, 20, 40, .08);
  --glass-hi:     rgba(255, 255, 255, .9);
  --glass-blur:   22px;
  --glass-sat:    170%;
  --glass-sh:     0 10px 30px -16px rgba(31, 38, 60, .28), 0 2px 8px -3px rgba(31, 38, 60, .12);
  --glass-sh-sm:  0 2px 12px -6px rgba(31, 38, 60, .16);
  --glass-sh-lg:  0 26px 64px -22px rgba(31, 38, 60, .3), 0 6px 16px -6px rgba(31, 38, 60, .14);
  --amb-1: rgba(0, 184, 165, .14);
  --amb-2: rgba(124, 58, 237, .13);
  --amb-3: rgba(236, 72, 153, .1);
}

html.light body { background: var(--bg-deep) }
/* PWA standalone: iOS dibuja la hora/batería en BLANCO (black-translucent).
   En tema claro el topbar es blanco → texto del sistema invisible.
   Forzamos una franja oscura solo en el área de safe-area-inset-top. */
html.light body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background: #0b0b14;
  z-index: 250;
  pointer-events: none;
}
html.light .topbar { background: rgba(255, 255, 255, .92); border-bottom-color: rgba(0, 0, 0, .06) }
html.light .bottom-nav { background: rgba(255, 255, 255, .94); border-top-color: rgba(0, 0, 0, .06) }
html.light .drawer { background: var(--bg-drawer); border-right-color: rgba(0, 0, 0, .06) }
html.light .drawer-overlay { background: rgba(0, 0, 0, .2) }
html.light .modal { background: var(--bg-base); border-color: rgba(0, 0, 0, .08); box-shadow: 0 20px 60px rgba(0, 0, 0, .12) }
html.light .modal-ov { background: rgba(0, 0, 0, .2); backdrop-filter: blur(8px) }
html.light .card { border-color: rgba(0, 0, 0, .05) }
html.light .card-grad { background: var(--grad1) }
/* background-color, NO el shorthand: `background` borra el background-image y con él
   desaparecía el chevron del <select> en tema claro. */
html.light .fi { background-color: var(--bg-input); border-color: rgba(0, 0, 0, .08) }
html.light .fi:focus { border-color: var(--cyan) }
html.light .task { border-color: rgba(0, 0, 0, .05) }
html.light .k-col { border-color: rgba(0, 0, 0, .05); background: var(--bg-deep) }
html.light .k-card { border-color: rgba(0, 0, 0, .05) }
html.light .habit { border-color: rgba(0, 0, 0, .05) }
html.light .note { border-color: rgba(0, 0, 0, .05) }
html.light .stat-box { border-color: rgba(0, 0, 0, .05) }
html.light .chip { background: var(--bg-elevated) }
html.light .chip.on,
html.light .chip-cyan { background: var(--cyan-g); color: var(--cyan) }
html.light .qa-menu { background: var(--bg-base); border-color: rgba(0, 0, 0, .08); box-shadow: 0 20px 60px rgba(0, 0, 0, .1) }
html.light .toast { background: var(--bg-base); border-color: rgba(0, 0, 0, .08); box-shadow: 0 4px 20px rgba(0, 0, 0, .1) }
html.light .m-logo { border-color: var(--cyan) }
html.light .ach { border-color: rgba(0, 0, 0, .05) }
html.light .ach.on { border-color: var(--cyan) }
html.light .tech { border-color: rgba(0, 0, 0, .05) }
html.light .set-item { border-bottom-color: rgba(0, 0, 0, .05) }
html.light .drawer-item:hover { background: rgba(0, 0, 0, .03) }
html.light .drawer-item.active { background: var(--cyan-g) }
html.light .toggle { background: #d1d5db; border-color: #d1d5db }
html.light .toggle.on { background: var(--cyan); border-color: var(--cyan) }
html.light .toggle::after { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15) }
html.light .btn-sec { background: var(--bg-elevated); border-color: rgba(0, 0, 0, .06) }
html.light #theme-btn { background: var(--bg-card); border-color: rgba(0, 0, 0, .08) }
html.light .set-item { border-bottom-color: rgba(0, 0, 0, .06) }
html.light .cal-day { background: var(--bg-card) }
html.light .chart-bar-track { background: var(--bg-elevated) }
html.light .timer-btn { background: var(--bg-card); border-color: rgba(0, 0, 0, .06) }
html.light .matrix-cell { border-color: rgba(0, 0, 0, .05) }
html.light .matrix-item { background: var(--bg-elevated) }
/* El track NO se pisa acá: su degradado de relleno ya usa --bg-elevated para la parte
   vacía, así que funciona en los dos temas. Pisarlo borraba el relleno. */
html.light input[type=range] { background: #d1d5db }
html.light .habit.hab-done-today { border-color: var(--cyan) !important }
html.light .note-color-dot { border-color: var(--bg-base) }
html.light .note-pin.on svg { stroke: var(--yellow) }

/* ─── Reset & base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body {
  font-family: var(--font);
  background: var(--bg-deep);
  color: var(--tx);
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; -webkit-appearance: none }
input, textarea, select { font-family: inherit; color: inherit; -webkit-appearance: none }
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
::-webkit-scrollbar { width: 4px; height: 4px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--tx3); border-radius: 10px }
::selection { background: var(--cyan-gs); color: #fff }

/* ─── Animaciones ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
@keyframes slideUp { from { opacity: 0; transform: translateY(100%) } to { opacity: 1; transform: translateY(0) } }
@keyframes slideRight { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.93) } to { opacity: 1; transform: scale(1) } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 12px var(--cyan-g) } 50% { box-shadow: 0 0 28px var(--cyan-gs) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes confetti { 0% { transform: translateY(-10px) rotate(0); opacity: 1 } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0 } }
@keyframes breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.02) } }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes ring-fill { from { stroke-dashoffset: 703.72 } to { stroke-dashoffset: 0 } }

.anim { animation: fadeUp .4s ease both }
.anim-1 { animation-delay: .06s }
.anim-2 { animation-delay: .12s }
.anim-3 { animation-delay: .18s }
.anim-4 { animation-delay: .24s }
.anim-5 { animation-delay: .3s }

/* ─── Layout ─── */
#app { display: flex; flex-direction: column; min-height: 100dvh; position: relative }
.page {
  flex: 1;
  padding: 0 16px 100px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  max-width: 720px; margin: 0 auto; width: 100%; display: none;
}
.page.active { display: block }
.page-pad { padding-top: calc(68px + env(safe-area-inset-top)) }

/* ─── Top bar ─── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(8, 8, 16, .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  height: calc(56px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-left { display: flex; align-items: center; gap: 12px }
.topbar-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em }
.topbar-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--cyan); box-shadow: 0 0 12px var(--cyan-g) }
.hamburger {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; transition: var(--t);
}
.hamburger:active { background: var(--bg-elevated) }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--tx2); border-radius: 2px; transition: var(--t) }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px) }
.hamburger.open span:nth-child(2) { opacity: 0 }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px) }

/* ─── Side drawer ─── */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 150; opacity: 0;
  pointer-events: none; transition: opacity .3s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: all }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 280px; background: var(--bg-drawer);
  z-index: 160; transform: translateX(-100%); transition: transform .32s cubic-bezier(.32, .72, .32, 1);
  display: flex; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, .04); overflow-y: auto;
}
.drawer.open { transform: translateX(0) }
.drawer-header {
  padding: calc(24px + env(safe-area-inset-top)) 20px 20px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.drawer-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)) }
.drawer-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cyan); box-shadow: 0 0 16px var(--cyan-g) }
.drawer-info h3 { font-size: 1.05rem; font-weight: 700 }
.drawer-info p { font-size: .72rem; color: var(--tx2); margin-top: 2px }
.drawer-nav { padding: 12px 10px; flex: 1 }
.drawer-section { padding: 6px 10px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); margin-top: 12px }
.drawer-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-sm);
  transition: var(--t); margin-bottom: 2px; position: relative; width: 100%;
}
.drawer-item:hover, .drawer-item:active { background: rgba(255, 255, 255, .04) }
.drawer-item.active { background: var(--cyan-g) }
.drawer-item.active .drawer-icon { box-shadow: 0 0 12px var(--cyan-g) }
.drawer-item > span:not(.drawer-badge) { font-size: .88rem; font-weight: 500; line-height: 1; flex: 1; text-align: left }
.drawer-item.active > span:not(.drawer-badge) { color: var(--cyan); font-weight: 600 }
.drawer-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.drawer-icon svg { width: 18px; height: 18px }
.drawer-badge {
  font-size: .6rem; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-full); background: var(--red); color: #fff;
  min-width: 18px; text-align: center;
  flex: 0 0 auto;       /* no crecer, no encoger, ancho según contenido */
  width: fit-content;
  line-height: 1.4;
}
.drawer-footer { padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .04); font-size: .7rem; color: var(--tx3); text-align: center }

/* ─── Bottom nav (Mobile) ─── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; background: rgba(11, 11, 20, .94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, .04); display: flex; justify-content: space-around;
  align-items: center;
  padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  z-index: 100;
}
.nav-i {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 10px;
  border-radius: var(--r-sm); transition: var(--t); min-width: 52px; position: relative;
}
.nav-i svg { width: 22px; height: 22px; transition: var(--t) }
.nav-i .nav-label { font-size: 9px; font-weight: 500; color: var(--tx3); transition: var(--t) }
.nav-i.active svg { stroke: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan-g)) }
.nav-i.active .nav-label { color: var(--cyan); font-weight: 600 }
.nav-i.active::before {
  content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2.5px; border-radius: 3px; background: var(--grad1);
}
.nav-fab {
  width: 50px; height: 50px; border-radius: 50%; background: var(--grad1);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--cyan-g);
  margin-top: -18px; transition: var(--t);
}
.nav-fab:active { transform: scale(.9) }
.nav-fab svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.5 }

/* ─── Icon circles ─── */
.ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.ico svg { width: 20px; height: 20px }
.ico-sm { width: 32px; height: 32px; border-radius: 9px }
.ico-sm svg { width: 16px; height: 16px }
.ico-lg { width: 48px; height: 48px; border-radius: 14px }
.ico-lg svg { width: 24px; height: 24px }
.ico-xl { width: 56px; height: 56px; border-radius: 16px }
.ico-xl svg { width: 28px; height: 28px }
.ico-cyan { background: var(--cyan-g) }     .ico-cyan svg { stroke: var(--cyan) }
.ico-purple { background: var(--purple-g) } .ico-purple svg { stroke: var(--purple) }
.ico-orange { background: rgba(253, 126, 20, .12) } .ico-orange svg { stroke: var(--orange) }
.ico-red { background: rgba(239, 68, 68, .12) }     .ico-red svg { stroke: var(--red) }
.ico-green { background: rgba(16, 185, 129, .12) }  .ico-green svg { stroke: var(--green) }
.ico-blue { background: rgba(59, 130, 246, .12) }   .ico-blue svg { stroke: var(--blue) }
.ico-pink { background: rgba(236, 72, 153, .12) }   .ico-pink svg { stroke: var(--pink) }
.ico-yellow { background: rgba(245, 158, 11, .12) } .ico-yellow svg { stroke: var(--yellow) }
.ico-indigo { background: rgba(99, 102, 241, .12) } .ico-indigo svg { stroke: var(--indigo) }
.ico-teal { background: rgba(20, 184, 166, .12) }   .ico-teal svg { stroke: var(--teal) }

/* ─── Cards ─── */
.card { background: var(--bg-card); border-radius: var(--r); padding: 16px; border: 1px solid rgba(255, 255, 255, .04); transition: var(--t) }
.card:hover { background: var(--bg-card-hover) }
.card-grad { background: var(--grad1); border: none; position: relative; overflow: hidden }
.card-grad::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px;
  border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none;
}
.card-grad::before {
  content: ''; position: absolute; left: -20px; bottom: -60px; width: 100px; height: 100px;
  border-radius: 50%; background: rgba(255, 255, 255, .04); pointer-events: none;
}

/* ─── Home: títulos y saludo ─── */
.page-head { margin-bottom: 20px }
.greeting {
  font-size: clamp(.74rem, 2.4vw, .82rem);
  color: var(--tx2);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px; min-height: 1.2em;
}
.page-title {
  font-size: clamp(1.4rem, 5.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* ─── Hero banner motivacional (Home) ─── */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 70%, var(--magenta) 110%);
  border-radius: 18px;
  padding: clamp(16px, 4vw, 22px) clamp(16px, 4vw, 24px);
  margin-bottom: 18px;
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .15);
}
.hero::before {
  content: ''; position: absolute; top: -50px; right: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  filter: blur(2px);
  z-index: -1;
}
.hero::after {
  content: ''; position: absolute; bottom: -70px; right: 40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  filter: blur(6px);
  z-index: -1;
}
.hero-inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 18px);
  min-width: 0;
}
.hero-logo {
  width: clamp(48px, 13vw, 60px);
  height: clamp(48px, 13vw, 60px);
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  background: rgba(255, 255, 255, .08);
}
.hero-body { flex: 1; min-width: 0 }
.hero-msg {
  font-size: clamp(.92rem, 3vw, 1.05rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.hero-meta {
  margin-top: 6px;
  font-size: clamp(.68rem, 2.2vw, .78rem);
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  display: flex; align-items: center; gap: 6px;
  min-height: 1.2em;
}
.hero-meta:empty { display: none }

/* ─── Card de progreso (Home) ─── */
.progress-card {
  background: var(--bg-card);
  border-radius: var(--r);
  padding: clamp(14px, 3.5vw, 18px);
  border: 1px solid rgba(255, 255, 255, .04);
  margin-bottom: 18px;
}
.progress-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 12px;
}
.progress-card-pct {
  font-size: clamp(1.25rem, 4.5vw, 1.55rem);
  font-weight: 800;
  background: var(--grad1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.progress-card-foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 10px;
  font-size: clamp(.7rem, 2.2vw, .78rem);
  color: var(--tx2);
}

/* En pantallas muy chicas, reducir aún más */
@media (max-width: 360px) {
  .hero { border-radius: 14px }
  .hero-meta { font-size: .65rem }
}

/* ─── Progress ─── */
.progress { height: 8px; background: var(--bg-elevated); border-radius: 8px; overflow: hidden }
.progress-fill { height: 100%; background: var(--grad1); border-radius: 8px; transition: width .6s cubic-bezier(.4, 0, .2, 1) }

/* ─── Stats grid ─── */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px }
.stat-box {
  background: var(--bg-card); border-radius: var(--r); padding: 14px 8px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .04); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.stat-box .ico { margin: 0 auto 8px }
.stat-val { font-size: 1.35rem; font-weight: 700; line-height: 1.2 }
.stat-lbl { font-size: .66rem; color: var(--tx2); margin-top: 3px; line-height: 1.2 }

/* ─── Sections ─── */
.sec { margin-bottom: 22px }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px }
.sec-title { font-size: .95rem; font-weight: 600; line-height: 1 }
.sec-link { font-size: .78rem; color: var(--cyan); display: flex; align-items: center; gap: 3px; white-space: nowrap; flex-shrink: 0 }
.sec-link svg { width: 14px; height: 14px }

/* ─── Task item (look "banner": sin franjas duras) ─── */
.task {
  background-color: var(--bg-card);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, .05);
  display: flex; gap: 14px; align-items: flex-start;
  transition: background-color var(--t), transform var(--t), box-shadow .3s ease, border-color var(--t);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.task::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--task-tint, none);
  z-index: 0;
}
.task > * { position: relative; z-index: 1 }
.task:hover {
  background-color: var(--bg-card-hover);
  transform: translateY(-2px);
  border-color: var(--task-accent, rgba(255, 255, 255, .08));
  box-shadow: 0 14px 30px -16px var(--task-glow, rgba(0, 0, 0, .4));
}
.task:active { transform: translateY(-1px) scale(.998) }
.task.done { opacity: .55 }
.task.done .task-t { text-decoration: line-through }
.task.done:hover { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .08) }
.task.overdue {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(239, 68, 68, .18);
}
.task.overdue:hover {
  box-shadow: 0 14px 30px -16px rgba(239, 68, 68, .45), inset 0 0 0 1px rgba(239, 68, 68, .35);
  border-color: rgba(239, 68, 68, .35);
}
.task-meta-i.overdue-text { color: var(--red); font-weight: 600 }
.task-meta-i.overdue-text svg { stroke: var(--red) }
.task-tag { padding: 2px 6px; font-size: .6rem }

/* ─── Time blocking en card ─── */
.task-time {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--cyan-g); color: var(--cyan);
  font-family: var(--mono);
}
.task-time svg { width: 11px; height: 11px }

/* ─── Iconitos en título ─── */
.task-icon-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; vertical-align: -3px;
  margin-left: 6px; color: var(--tx2);
}
.task-icon-mini svg { width: 11px; height: 11px }
/* Candado: marca las tareas que el resto del espacio no ve. */
.task-priv { color: var(--purple); background: var(--purple-g); border-radius: 5px }

/* ─── Interruptor "Solo para mí" (modal de tarea) ─── */
.priv-row { margin-top: 4px }
.priv-toggle {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; text-align: left; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 13px;
  backdrop-filter: blur(10px); color: var(--tx2);
  transition: border-color .25s, background .25s, color .25s;
}
.priv-toggle:hover { border-color: var(--purple); color: var(--tx) }
.priv-toggle.on { border-color: var(--purple); background: var(--purple-g); color: var(--tx) }
.priv-ico { position: relative; width: 20px; height: 20px; flex-shrink: 0; color: var(--purple) }
.priv-ico svg {
  position: absolute; inset: 0; width: 20px; height: 20px;
  transition: opacity .28s cubic-bezier(.34,1.56,.64,1), transform .28s cubic-bezier(.34,1.56,.64,1);
}
/* El candado se cierra al activar: el abierto se va girando y el cerrado entra. */
.priv-ico-lock { opacity: 0; transform: scale(.6) rotate(-25deg) }
.priv-toggle.on .priv-ico-lock { opacity: 1; transform: none }
.priv-toggle.on .priv-ico-open { opacity: 0; transform: scale(.6) rotate(25deg) }
.priv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.priv-t { font-size: .82rem; font-weight: 700 }
.priv-d { font-size: .68rem; color: var(--tx3) }
.priv-sw {
  flex-shrink: 0; width: 40px; height: 23px; border-radius: 999px;
  background: var(--glass-brd); position: relative; transition: background .25s;
}
.priv-toggle.on .priv-sw { background: var(--purple) }
.priv-knob {
  position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--tx); transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.priv-toggle.on .priv-knob { transform: translateX(17px) }
/* Bloqueado: la tarea es privada porque su proyecto lo es. Se muestra encendido pero no
   se puede tocar — apretarlo no haría nada y confundiría. */
.priv-toggle.priv-locked { cursor: default; opacity: .72 }
.priv-toggle.priv-locked:hover { border-color: var(--purple); color: var(--tx2) }

/* Enlace en texto corrido (salir del espacio). */
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--cyan); font: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--tx) }

/* ─── Badge "EN FOCO" ─── */
.task-focus-badge {
  display: inline-block;
  font-size: .55rem; font-weight: 800; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 4px;
  background: var(--grad1); color: #fff;
  margin-left: 6px; vertical-align: 2px;
  animation: pulse-glow 1.6s ease-in-out infinite;
}
.task.in-focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-g), 0 14px 30px -16px var(--cyan-gs);
}

/* ─── Estrella Top 3 ─── */
.task-star {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--tx3);
  transition: var(--t);
}
.task-star svg { width: 14px; height: 14px }
.task-star:hover { background: var(--cyan-g); color: var(--cyan) }
.task-star.on { background: var(--cyan-g); color: var(--cyan) }
.task.is-top { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(245, 158, 11, .25) }

/* ─── Home: sección Top 3 ─── */
.top-list { display: flex; flex-direction: column; gap: 8px }
.top-item { display: flex; align-items: stretch; gap: 10px; position: relative }
.top-item > .task { flex: 1; min-width: 0 }
.top-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; min-width: 28px;
  font-size: 1.1rem; font-weight: 800;
  background: var(--grad1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ─── Timeline visual ─── */
.timeline {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .04);
  padding: 6px 12px 6px 56px;
  overflow: hidden;
}
.timeline-row {
  position: relative;
  border-top: 1px dashed rgba(255, 255, 255, .04);
}
.timeline-row:first-child { border-top: none }
.timeline-hour {
  position: absolute;
  left: -48px; top: -7px;
  width: 44px;
  font-size: .65rem; font-weight: 600;
  color: var(--tx3);
  font-family: var(--mono);
  text-align: right;
}
.timeline-track { display: block; height: 100% }
.timeline-now {
  position: absolute;
  left: 8px; right: 12px;
  border-top: 2px solid var(--red);
  z-index: 3;
  pointer-events: none;
}
.timeline-now-dot {
  position: absolute;
  left: -4px; top: -5px;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(239, 68, 68, .6);
}
.timeline-block {
  position: absolute;
  left: 56px; right: 12px;
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: var(--t);
  border: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
  z-index: 2;
}
.timeline-block::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--task-tint, none);
  pointer-events: none;
}
.timeline-block > * { position: relative }
.timeline-block:hover {
  border-color: var(--task-accent, var(--cyan));
  transform: translateX(2px);
  box-shadow: 0 8px 20px -10px var(--task-glow, rgba(0, 0, 0, .4));
}
.timeline-block.done { opacity: .55 }
.timeline-block-time {
  font-size: .62rem; font-weight: 600;
  color: var(--tx2); font-family: var(--mono);
  margin-bottom: 2px;
}
.timeline-block-title {
  font-size: .82rem; font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.timeline-empty {
  position: relative;
  text-align: center;
  padding: 20px;
  font-size: .82rem;
  color: var(--tx3);
}
.timeline-block.pri-urgent { --task-tint: linear-gradient(110deg, rgba(239, 68, 68, .22), transparent 65%); --task-glow: rgba(239, 68, 68, .4); --task-accent: rgba(239, 68, 68, .35) }
.timeline-block.pri-high   { --task-tint: linear-gradient(110deg, rgba(253, 126, 20, .2), transparent 65%); --task-glow: rgba(253, 126, 20, .35); --task-accent: rgba(253, 126, 20, .3) }
.timeline-block.pri-medium { --task-tint: linear-gradient(110deg, rgba(245, 158, 11, .18), transparent 65%); --task-glow: rgba(245, 158, 11, .3); --task-accent: rgba(245, 158, 11, .28) }
.timeline-block.pri-low    { --task-tint: linear-gradient(110deg, rgba(16, 185, 129, .18), transparent 65%); --task-glow: rgba(16, 185, 129, .3); --task-accent: rgba(16, 185, 129, .28) }

/* Timeline responsive en móvil chico */
@media (max-width: 380px) {
  .timeline { padding: 6px 8px 6px 44px }
  .timeline-hour { left: -40px; width: 36px; font-size: .58rem }
  .timeline-block { left: 44px; right: 8px }
}

/* ─── Task star: deshabilitado cuando hay 3 tops ─── */
.task-star.disabled {
  opacity: .35;
  cursor: not-allowed;
}
.task-star.disabled:hover { background: var(--bg-elevated); color: var(--tx3) }

/* ─── is-top que también está completada: mantener el ring oro ─── */
.task.is-top.done {
  opacity: .65;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(245, 158, 11, .35);
}

/* ─── Light mode overrides para clases nuevas ─── */
html.light .task-time { background: rgba(0, 184, 165, .12); color: var(--cyan2) }
html.light .task-icon-mini { color: var(--tx2) }
html.light .task-focus-badge { color: #fff }
html.light .task-star { background: var(--bg-elevated); color: var(--tx3) }
html.light .task-star.on { background: rgba(245, 158, 11, .22); color: #b87800 }
html.light .timeline { background: var(--bg-card) }
html.light .timeline-row { border-top-color: rgba(0, 0, 0, .05) }
html.light .timeline-hour { color: var(--tx3) }
html.light .timeline-block { background: var(--bg-elevated); border-color: rgba(0, 0, 0, .08) }
html.light .timeline-block-time { color: var(--tx2) }
html.light .timeline-now { border-top-color: var(--red) }
html.light .top-num { -webkit-text-fill-color: transparent }
html.light .hero { box-shadow: 0 8px 24px -10px rgba(0, 184, 165, .35) }
html.light .progress-card { border-color: rgba(0, 0, 0, .05) }
.task-chk {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tx3); flex-shrink: 0;
  margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: var(--t);
}
.task-chk:hover { border-color: var(--cyan) }
.task-chk.on { background: var(--grad1); border-color: transparent }
.task-chk.on svg { opacity: 1 }
.task-chk svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; opacity: 0; transition: var(--t) }

/* ─── Área táctil de los controles chicos ─────────────────────────────────────
   La casilla mide 22px, que está bien de DIBUJO pero es muy poco para el dedo: es el
   control más tocado de la aplicación en el celular y la recomendación de Apple son 44.
   Se agranda solo la zona sensible con un pseudo-elemento; el círculo se ve exactamente
   igual que antes.

   Los 11px de cada lado están MEDIDOS en el navegador, no elegidos a ojo: alrededor de la
   casilla hay 19px de hueco a la izquierda, 14 a la derecha y 18 arriba. O sea que el área
   crece dentro de espacio muerto y no le roba toques al título.

   Que no lo invada importa más de lo que parece: la casilla vive DENTRO de la tarjeta de la
   tarea, y el despacho de eventos resuelve con closest('[data-action]') — gana el de
   adentro. Si el área tapara el título, tocar la primera palabra completaría la tarea en
   lugar de abrirla, que es peor que el problema que esto viene a resolver. */
.task-chk { position: relative }
.task-chk::after { content: ''; position: absolute; inset: -11px }
.task-body { flex: 1; min-width: 0 }
.task-t { font-size: .88rem; font-weight: 500; line-height: 1.35; margin-bottom: 3px }
.task-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; margin-top: 4px }
.task-meta-i { font-size: .7rem; color: var(--tx2); display: flex; align-items: center; gap: 4px; padding: 2px 0 }
.task-meta-i svg { width: 11px; height: 11px }
.task-acts { display: flex; gap: 4px; flex-shrink: 0; align-items: center }
.task-act {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center; transition: var(--t);
}
.task-act:hover { background: var(--cyan-g) }
.task-act svg { width: 13px; height: 13px; stroke: var(--cyan) }

/* ─── Acentos por prioridad (tint + glow + checkbox tinted) ─── */
.task.pri-urgent {
  --task-tint: radial-gradient(140% 100% at 0% 0%, rgba(239, 68, 68, .12), transparent 55%);
  --task-glow: rgba(239, 68, 68, .42);
  --task-accent: rgba(239, 68, 68, .28);
}
.task.pri-urgent .task-chk { border-color: rgba(239, 68, 68, .55) }
.task.pri-high {
  --task-tint: radial-gradient(140% 100% at 0% 0%, rgba(253, 126, 20, .1), transparent 55%);
  --task-glow: rgba(253, 126, 20, .38);
  --task-accent: rgba(253, 126, 20, .24);
}
.task.pri-high .task-chk { border-color: rgba(253, 126, 20, .5) }
.task.pri-medium {
  --task-tint: radial-gradient(140% 100% at 0% 0%, rgba(245, 158, 11, .08), transparent 55%);
  --task-glow: rgba(245, 158, 11, .32);
  --task-accent: rgba(245, 158, 11, .22);
}
.task.pri-medium .task-chk { border-color: rgba(245, 158, 11, .5) }
.task.pri-low {
  --task-tint: radial-gradient(140% 100% at 0% 0%, rgba(16, 185, 129, .08), transparent 55%);
  --task-glow: rgba(16, 185, 129, .32);
  --task-accent: rgba(16, 185, 129, .22);
}
.task.pri-low .task-chk { border-color: rgba(16, 185, 129, .5) }
/* El checkbox marcado conserva el gradient base */
.task .task-chk.on { border-color: transparent }

.pri-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0 }

/* ─── Status badges ─── */
.badge {
  font-size: .6rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-full);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.badge-pending { background: rgba(255, 255, 255, .06); color: var(--tx2) }
.badge-progress { background: var(--cyan-g); color: var(--cyan) }
.badge-paused { background: rgba(253, 126, 20, .12); color: var(--orange) }
.badge-done { background: rgba(16, 185, 129, .12); color: var(--green) }
.badge-archived { background: rgba(99, 102, 241, .12); color: var(--indigo) }

/* ─── Kanban ─── */
.kanban {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.kanban::-webkit-scrollbar { height: 3px }
.k-col {
  min-width: 78vw; max-width: 320px; flex-shrink: 0; background: var(--bg-base);
  border-radius: var(--r); padding: 10px; scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, .04);
}
@media (min-width: 600px) { .k-col { min-width: 260px } }
.k-col-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.k-col-title { font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 8px }
.k-col-dot { width: 8px; height: 8px; border-radius: 50% }
.k-col-count { font-size: .68rem; background: var(--bg-elevated); padding: 2px 8px; border-radius: var(--r-full); color: var(--tx2) }
.k-card {
  background: var(--bg-card); border-radius: var(--r-sm); padding: 12px; margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, .04); transition: var(--t); cursor: pointer;
}
.k-card:hover { border-color: rgba(0, 229, 204, .15); transform: translateY(-1px) }
.k-card:active { transform: scale(.98) }
.k-card-title { font-size: .82rem; font-weight: 500; margin-bottom: 8px; line-height: 1.3 }
.k-card-footer { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; color: var(--tx2) }
.k-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px }
.k-card-tag { font-size: .6rem; padding: 2px 6px; border-radius: 4px; background: var(--bg-elevated); color: var(--tx2) }
.k-card-pri { width: 100%; height: 3px; border-radius: 3px; margin-bottom: 8px }

/* ─── Habit ─── */
.habit {
  background: var(--bg-card); border-radius: var(--r); padding: 14px; margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, .04); transition: var(--t);
  position: relative; overflow: hidden;
}
.habit:hover { background: var(--bg-card-hover) }
.habit-top { display: flex; align-items: center; gap: 12px }
.habit-info { flex: 1 }
.habit-name { font-size: .9rem; font-weight: 500 }
.habit-streak { font-size: .72rem; color: var(--tx2); display: flex; align-items: center; gap: 4px; margin-top: 3px }
.habit-streak svg { width: 12px; height: 12px; stroke: var(--orange) }
.habit-chk {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--tx3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.habit-chk.on { background: var(--grad1); border-color: transparent; transform: scale(1.15); box-shadow: 0 0 16px var(--cyan-g) }
.habit-chk.on svg { opacity: 1 }
.habit-chk svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 3; opacity: 0; transition: var(--t) }
.habit-week { display: flex; gap: 3px; margin-top: 10px; justify-content: space-between }
.habit-day { display: flex; flex-direction: column; align-items: center; gap: 3px }
.habit-day-lbl { font-size: .55rem; color: var(--tx3); font-weight: 600 }
.habit-day-dot {
  width: 22px; height: 22px; border-radius: 6px; background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.habit-day-dot.on { background: var(--cyan); transform: scale(1.1) }
.habit-day-dot.on svg { opacity: 1 }
.habit-day-dot svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; opacity: 0 }
.habit-day-dot.today { border: 2px solid var(--cyan) }
.habit-progress { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .7rem; color: var(--tx2) }
.habit-progress .progress { flex: 1; height: 5px }
.habit.hab-done-today { border-color: var(--cyan) !important; border-left: 3px solid var(--green) !important }
.habit.hab-done-today::after {
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 24px solid var(--green); border-left: 24px solid transparent;
}
.habit-goal-tag { font-size: .6rem; padding: 2px 7px; border-radius: 4px; background: rgba(16, 185, 129, .12); color: var(--green); margin-left: 4px }

/* ─── Calendar ─── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }
.cal-head { font-size: .65rem; font-weight: 600; color: var(--tx3); text-align: center; padding: 8px 0 }
.cal-day {
  aspect-ratio: 1; border-radius: var(--r-sm); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: .82rem; cursor: pointer; transition: var(--t);
  position: relative; background: var(--bg-card);
}
.cal-day:hover { background: var(--bg-card-hover) }
.cal-day.today { border: 2px solid var(--cyan); font-weight: 700 }
.cal-day.selected { background: var(--cyan); color: #000; font-weight: 700 }
.cal-day.other-month { color: var(--tx3); opacity: .4 }
.cal-day .cal-dots { position: absolute; bottom: 4px; display: flex; gap: 3px; align-items: center; justify-content: center }
.cal-day .cal-dot { width: 5px; height: 5px; border-radius: 50%; transition: var(--t) }
.cal-day .cal-dot-task { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-g) }
.cal-day .cal-dot-rem { background: var(--yellow); box-shadow: 0 0 8px rgba(245, 158, 11, .55) }
.cal-day.has-rem { background: linear-gradient(180deg, var(--bg-card) 0%, rgba(245, 158, 11, .08) 100%) }
.cal-day.selected .cal-dot-task, .cal-day.selected .cal-dot-rem { box-shadow: 0 0 0 2px rgba(0, 0, 0, .15) }
.cal-day.selected.has-rem { background: var(--cyan) }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px }
.cal-nav-title { font-size: 1rem; font-weight: 600 }
.cal-nav-btn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card);
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .04);
}
.cal-nav-btn svg { width: 18px; height: 18px; stroke: var(--tx2) }
.cal-events { margin-top: 16px }
.cal-event {
  position: relative;
  display: flex; gap: 12px; align-items: center; padding: 12px 14px 12px 16px;
  background: var(--bg-card); border-radius: var(--r-sm); margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, .04);
  overflow: hidden;
  transition: var(--t);
  animation: fadeUp .35s ease both;
}
.cal-event::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 3px 0 0 3px;
  background: var(--cyan);
}
.cal-event:hover { background: var(--bg-card-hover); transform: translateX(2px) }
.cal-event--rem::before { background: linear-gradient(180deg, var(--yellow), var(--orange)) }
.cal-event--rem {
  background: linear-gradient(90deg, rgba(245, 158, 11, .08) 0%, var(--bg-card) 60%);
  border-color: rgba(245, 158, 11, .15);
}
.cal-event--rem:hover { background: linear-gradient(90deg, rgba(245, 158, 11, .14) 0%, var(--bg-card-hover) 70%) }
.cal-event-time-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-width: 56px; padding: 6px 4px;
  background: rgba(245, 158, 11, .1); border-radius: 10px;
  flex-shrink: 0;
}
.cal-event-time-block--task {
  min-width: 44px; padding: 10px;
  background: var(--cyan-g); color: var(--cyan);
}
.cal-event-time-h {
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: var(--yellow); letter-spacing: .02em; line-height: 1;
}
.cal-event-bell { width: 12px; height: 12px; color: var(--yellow); opacity: .75 }
.cal-event-body { flex: 1; min-width: 0 }
.cal-event-title {
  font-size: .9rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cal-event-meta { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.cal-event-time { font-size: .7rem; color: var(--cyan); font-weight: 600; min-width: 48px; font-family: var(--mono) }
.cal-event-actions { display: flex; gap: 4px; flex-shrink: 0 }
.cal-reminder-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .62rem; font-weight: 600; padding: 3px 8px; border-radius: var(--r-full);
  background: rgba(245, 158, 11, .14); color: var(--yellow);
  border: 1px solid rgba(245, 158, 11, .2);
}
.cal-event-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 32px 16px; color: var(--tx3); text-align: center;
  background: var(--bg-card); border-radius: var(--r-sm);
  border: 1px dashed rgba(255, 255, 255, .06);
}
.cal-event-empty svg { color: var(--tx3); opacity: .5; margin-bottom: 4px }
.cal-event-empty p { font-size: .88rem; font-weight: 500; color: var(--tx2); margin: 0 }
.cal-event-empty span { font-size: .72rem; color: var(--tx3) }
html.light .cal-event--rem { background: linear-gradient(90deg, rgba(245, 158, 11, .12) 0%, var(--bg-card) 60%); border-color: rgba(245, 158, 11, .25) }
html.light .cal-event-empty { background: var(--bg-card); border-color: rgba(0, 0, 0, .08) }

/* ─── Chart ─── */
.chart-container { background: var(--bg-card); border-radius: var(--r); padding: 16px; border: 1px solid rgba(255, 255, 255, .04); margin-bottom: 16px }
.chart-title { font-size: .88rem; font-weight: 600; margin-bottom: 14px }
.chart-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.chart-bar-label { font-size: .7rem; color: var(--tx2); min-width: 32px; text-align: right }
.chart-bar-track { flex: 1; height: 18px; background: var(--bg-elevated); border-radius: 6px; overflow: hidden; position: relative }
.chart-bar-fill {
  height: 100%; border-radius: 6px; transition: width .8s cubic-bezier(.4, 0, .2, 1);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 6px;
  font-size: .6rem; font-weight: 600; color: #fff;
  /* `min-width: fit-content` hacía que una barra de 0% igual se pintara del ancho de su
     número: "Urgente 0" mostraba una pastilla roja, o sea la nada disfrazada de dato.
     Ahora el cero no pinta nada y el número se muestra AL LADO (.chart-bar-cero). */
  min-width: 0; overflow: hidden; white-space: nowrap;
}
/* El valor cuando la barra es cero o demasiado corta para que entre adentro. */
.chart-bar-cero {
  font-size: .62rem; font-weight: 600; color: var(--tx3);
  padding-left: 7px; align-self: center; white-space: nowrap; flex-shrink: 0;
}
.chart-bar-val { font-size: .7rem; color: var(--tx2); min-width: 24px }

/* ─── Timer ─── */
.timer-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 12px }
.timer-modes { display: flex; background: var(--bg-card); border-radius: var(--r-full); padding: 3px; margin-bottom: 28px }
.timer-mode {
  padding: 9px 16px; border-radius: var(--r-full); font-size: .78rem; font-weight: 500;
  color: var(--tx2); transition: var(--t); white-space: nowrap;
}
.timer-mode.active { background: var(--grad1); color: #fff }
.timer-ring-wrap { position: relative; width: 260px; height: 260px; margin-bottom: 24px }
.timer-ring { transform: rotate(-90deg) }
.timer-ring-bg { fill: none; stroke: var(--bg-elevated); stroke-width: 7 }
.timer-ring-prog { fill: none; stroke: url(#tGrad); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .5s ease }
.timer-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center }
.timer-time { font-family: var(--mono); font-size: 3rem; font-weight: 600; letter-spacing: 2px }
.timer-lbl { font-size: .82rem; color: var(--tx2); margin-top: 4px }
.timer-ctrls { display: flex; align-items: center; gap: 16px; margin-bottom: 20px }
.timer-btn {
  width: 52px; height: 52px; border-radius: 50%; background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center; transition: var(--t);
}
.timer-btn:hover { background: var(--bg-elevated) }
.timer-btn svg { width: 20px; height: 20px; stroke: var(--tx2) }
.timer-play {
  width: 64px; height: 64px; border-radius: 50%; background: var(--grad1);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 24px var(--cyan-g); transition: var(--t);
}
.timer-play:active { transform: scale(.9) }
.timer-play.paused { background: var(--red); box-shadow: 0 0 24px rgba(239, 68, 68, .2) }
.timer-play svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 2.5 }
.timer-dots { display: flex; gap: 5px; margin-bottom: 16px }
.timer-dot { width: 28px; height: 5px; border-radius: 5px; background: var(--bg-elevated); transition: var(--t) }
.timer-dot.on { background: var(--grad1) }

/* ─── Notes ─── */
.note {
  background: var(--bg-card); border-radius: var(--r); padding: 14px 14px 14px 18px; margin-bottom: 10px;
  position: relative; border: 1px solid rgba(255, 255, 255, .04); cursor: pointer; transition: var(--t);
}
.note:hover { background: var(--bg-card-hover) }
.note-color-opt { cursor: pointer; transition: var(--t); position: relative }
.note-color-opt.on { border-color: #fff !important; box-shadow: 0 0 0 2px var(--cyan) }
.note-color-opt:hover { opacity: .8 }
.note-color-strip { width: 4px; height: 100%; border-radius: 4px; position: absolute; left: 0; top: 0 }
.note-pin { position: absolute; top: 10px; right: 10px; cursor: pointer; transition: var(--t) }
.note-pin svg { width: 14px; height: 14px; stroke: var(--tx3); transition: var(--t) }
.note-pin.on svg { stroke: var(--yellow); fill: var(--yellow) }
.note-cat { font-size: .58rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--bg-elevated); color: var(--tx2) }
.note-cat-cyan { background: var(--cyan-g); color: var(--cyan) }
.note-cat-purple { background: var(--purple-g); color: var(--purple) }
.note-cat-orange { background: rgba(253, 126, 20, .12); color: var(--orange) }
.note-cat-green { background: rgba(16, 185, 129, .12); color: var(--green) }
.note-cat-pink { background: rgba(236, 72, 153, .12); color: var(--pink) }
.note-cat-yellow { background: rgba(245, 158, 11, .12); color: var(--yellow) }
.note-t { font-size: .92rem; font-weight: 600; margin-bottom: 3px }
.note-pre {
  font-size: .78rem; color: var(--tx2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.note-date { font-size: .66rem; color: var(--tx3); margin-top: 8px }

/* ─── Matrix ─── */
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.matrix-cell {
  background: var(--bg-card); border-radius: var(--r); padding: 12px; min-height: 100px;
  border: 1px solid rgba(255, 255, 255, .04);
}
.matrix-h {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.matrix-item {
  font-size: .76rem; padding: 5px 8px; margin-bottom: 3px; background: var(--bg-elevated);
  border-radius: 6px; cursor: pointer; transition: var(--t);
}
.matrix-item:hover { background: var(--bg-card-hover) }

/* ─── Modal ─── */
.modal-ov {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(10px);
  z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-ov.open { display: flex }
/* m-confirm va por encima de cualquier otro modal: las confirmaciones se
   invocan desde dentro de otros modales (eliminar tarea/hábito/nota) y el
   diálogo debe quedar SIEMPRE visible y receptivo a clicks. */
#m-confirm { z-index: 300 }
.modal {
  /* `relative` ancla el botón de cierre a la tarjeta y no a la pantalla. */
  position: relative;
  background: var(--bg-base); border-radius: var(--r); width: 100%; max-width: 460px;
  max-height: 85vh; overflow-y: auto; padding: 24px 20px 28px; animation: scaleIn .28s ease;
  border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.modal-handle { width: 36px; height: 3.5px; border-radius: 4px; background: var(--tx3); margin: 0 auto 18px }
.modal-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px }

/* ─── Botón de cierre del modal ───
   Vidrio como el resto: la X gira un cuarto de vuelta al pasar por encima y el aro
   exterior se enciende. Al presionarla se hunde. */
.modal-x {
  position: absolute; top: 13px; right: 13px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx2);
  background: var(--glass, var(--bg-elevated));
  border: 1px solid var(--glass-brd, rgba(255, 255, 255, .08));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), color .2s ease,
              border-color .2s ease, box-shadow .3s ease, background .2s ease;
}
.modal-x svg { width: 15px; height: 15px; transition: transform .32s cubic-bezier(.34, 1.56, .64, 1) }
.modal-x:hover {
  color: var(--tx); border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-g), var(--glass-sh-sm);
}
.modal-x:hover svg { transform: rotate(90deg) }
.modal-x:active { transform: scale(.88) }
.modal-x:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-g) }
/* El contenido no debe pasar por debajo de la X. */
.modal .modal-title { padding-right: 40px }

/* El menú rápido también tiene su X, anclada a la hoja. */
.qa-menu { position: relative }
.qa-menu .modal-x { top: 12px; right: 12px }

/* Las opciones entran escalonadas: se lee de arriba abajo en lugar de aparecer todo junto. */
.qa-ov.open .qa-opt { animation: qaIn .34s cubic-bezier(.22, 1, .36, 1) both }
.qa-ov.open .qa-opt:nth-child(2) { animation-delay: .03s }
.qa-ov.open .qa-opt:nth-child(3) { animation-delay: .06s }
.qa-ov.open .qa-opt:nth-child(4) { animation-delay: .09s }
.qa-ov.open .qa-opt:nth-child(5) { animation-delay: .12s }
.qa-ov.open .qa-opt:nth-child(6) { animation-delay: .15s }
.qa-ov.open .qa-opt:nth-child(7) { animation-delay: .18s }
@keyframes qaIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .qa-ov.open .qa-opt { animation: none } }

/* ─── Cierre animado ───
   Antes el modal desaparecía de golpe. Ahora se encoge y se desvanece, y el fondo
   se despeja al mismo tiempo. */
.modal-ov.closing { pointer-events: none }
.modal-ov.closing .modal { animation: modalOut .2s cubic-bezier(.4, 0, 1, 1) forwards }
@keyframes modalOut {
  to { opacity: 0; transform: scale(.94) translateY(10px) }
}
@media (prefers-reduced-motion: reduce) {
  .modal-x, .modal-x svg { transition: none }
  .modal-ov.closing .modal { animation: none; opacity: 0 }
}

/* ─── Forms ─── */
.fg { margin-bottom: 16px }
fieldset.fg { border: none; padding: 0; margin-inline: 0 }
fieldset.fg legend { padding: 0; margin-bottom: 6px }
.fl { display: block; font-size: .78rem; font-weight: 500; color: var(--tx2); margin-bottom: 6px; line-height: 1 }
.fi {
  width: 100%; padding: 11px 14px; background: var(--bg-input); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--r-sm); font-size: 16px; transition: var(--t); outline: none;
  touch-action: manipulation;
}
.fi:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-g) }
.fi::placeholder { color: var(--tx3) }
textarea.fi { resize: vertical; min-height: 80px; line-height: 1.5 }
/* El chevron venía con `fill` sobre un trazo abierto: se veía como una manchita en vez
   del ícono. Ahora es un stroke de 2.4 como el resto de la iconografía de la app, y el
   padding derecho evita que el texto se le monte encima. */
select.fi {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2388889f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  cursor: pointer;
}
select.fi:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Fecha y hora: el ícono nativo queda pegado al borde y con el color del sistema.
   Le damos aire y lo teñimos como el resto de los íconos secundarios. */
/* Las flechitas nativas del input numérico aparecen al pasar el mouse y son del sistema:
   rompen la estética. En móvil no existen, así que no se pierde nada. */
input[type="number"].fi { -moz-appearance: textfield; appearance: textfield }
input[type="number"].fi::-webkit-outer-spin-button,
input[type="number"].fi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* Van en media fila y el texto (dd/mm/aaaa, --:-- a. m.) es largo. No podemos bajar el
   font-size —abajo de 16px iOS hace zoom al enfocar—, así que el espacio sale del padding. */
input[type="date"].fi, input[type="time"].fi { padding-left: 10px; padding-right: 30px; cursor: pointer }
input[type="date"].fi::-webkit-calendar-picker-indicator,
input[type="time"].fi::-webkit-calendar-picker-indicator {
  position: absolute; right: 9px; width: 16px; height: 16px; padding: 0;
  opacity: .55; cursor: pointer; transition: var(--t);
}
input[type="date"].fi::-webkit-calendar-picker-indicator:hover,
input[type="time"].fi::-webkit-calendar-picker-indicator:hover { opacity: 1 }
/* El indicador se posiciona absoluto: el input tiene que ser su contenedor. */
input[type="date"].fi, input[type="time"].fi { position: relative }
/* Sin valor, el navegador muestra dd/mm/aaaa en el color del texto: lo bajamos a
   placeholder para que no compita con un valor real. */
input[type="date"].fi:not(:focus):invalid, input[type="time"].fi:not(:focus):invalid { color: var(--tx3) }
.frow { display: flex; gap: 12px }
.frow .fg { flex: 1; min-width: 0 }

/* ─── Buttons ─── */
.btn {
  padding: 11px 18px; border-radius: var(--r-sm); font-size: .85rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: var(--t);
}
.btn-pri { background: var(--grad1); color: #fff; box-shadow: 0 0 16px var(--cyan-g) }
.btn-pri:hover { opacity: .9 }
.btn-pri:active { transform: scale(.97) }
.btn-sec { background: var(--bg-elevated); color: var(--tx); border: 1px solid rgba(255, 255, 255, .06) }
.btn-sec:hover { background: var(--bg-card-hover) }
.btn-dan { background: rgba(239, 68, 68, .1); color: var(--red) }
.btn-dan:hover { background: rgba(239, 68, 68, .18) }
.btn-block { width: 100% }
.btn-sm { padding: 7px 13px; font-size: .78rem }
.btn-xs { padding: 5px 10px; font-size: .72rem; border-radius: 6px }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50% }

/* ─── Tab buttons ─── */
.tab-btn {
  flex: 1; padding: 9px 10px; border-radius: 8px; font-size: .78rem; font-weight: 500;
  text-align: center; color: var(--tx2); transition: var(--t);
}
.tab-btn.on { background: var(--bg-elevated); color: var(--tx) }

/* ─── Chips ─── */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-full);
  font-size: .68rem; font-weight: 600; background: var(--bg-elevated); color: var(--tx2); cursor: pointer; transition: var(--t);
}
.chip.on, .chip-cyan { background: var(--cyan-g); color: var(--cyan) }
.chip-purple { background: var(--purple-g); color: #b088e8 }
.chip:hover { opacity: .8 }

/* ─── Toggle ─── */
.toggle {
  width: 48px; height: 26px; border-radius: 26px; background: var(--bg-elevated);
  position: relative; cursor: pointer; transition: var(--t); border: 2px solid rgba(255, 255, 255, .06);
  /* Sin esto el flex del renglón lo aplasta cuando la descripción es larga: la pista
     quedaba en 30px y la perilla (left:24px + 18px) se salía por la derecha. */
  flex-shrink: 0;
}
.toggle.on { background: var(--cyan); border-color: var(--cyan) }
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: var(--t); box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.toggle.on::after { left: 24px }

/* ─── Search ─── */
.search { position: relative; margin-bottom: 14px }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--tx3) }
.search .fi { padding-left: 36px }

/* ─── Toast ─── */
.toast {
  position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--bg-elevated);
  padding: 10px 20px; border-radius: var(--r-full); font-size: .82rem; font-weight: 500; z-index: 300;
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  animation: scaleIn .3s ease; display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px);
}
.toast.ok { border-color: var(--green); color: var(--green) }
.toast.err { border-color: var(--red); color: var(--red) }
.toast.hide { display: none }

.confetti { position: fixed; width: 8px; height: 8px; border-radius: 2px; z-index: 250; animation: confetti 1.5s ease-out forwards; pointer-events: none }

/* ─── Quick add ─── */
.qa-ov {
  position: fixed; inset: 0; z-index: 180; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.qa-ov.open { display: flex }
.qa-menu {
  background: var(--bg-base); border-radius: var(--r); width: 100%; max-width: 360px;
  padding: 20px 16px 24px; animation: scaleIn .28s ease; border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.qa-opt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-sm); transition: var(--t); width: 100%; text-align: left }
.qa-opt:hover, .qa-opt:active { background: var(--bg-card) }
.qa-opt .ico { flex-shrink: 0 }
.qa-opt-info { display: flex; flex-direction: column; justify-content: center; min-width: 0 }
.qa-opt-t { font-size: .9rem; font-weight: 600; line-height: 1.3 }
.qa-opt-d { font-size: .72rem; color: var(--tx2); margin-top: 2px; line-height: 1.3 }

/* ─── Empty state ─── */
.empty { text-align: center; padding: 36px 20px }
.empty p { color: var(--tx2); font-size: .88rem; margin: 12px 0 }

/* ─── Settings ─── */
.set-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.set-lbl { font-size: .9rem; font-weight: 500; line-height: 1.3 }
.set-desc { font-size: .72rem; color: var(--tx2); margin-top: 2px; line-height: 1.3 }

/* ─── Technique ─── */
.tech {
  background: var(--bg-card); border-radius: var(--r); padding: 14px; margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, .04); transition: var(--t);
}
.tech:hover { background: var(--bg-card-hover) }
.tech-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px }
.tech-name { font-size: .9rem; font-weight: 600 }
.tech-desc { font-size: .76rem; color: var(--tx2); line-height: 1.4 }

/* ─── Achievement ─── */
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.ach {
  background: var(--bg-card); border-radius: var(--r); padding: 12px 8px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .04); transition: var(--t);
}
.ach.on { border-color: var(--cyan); box-shadow: 0 0 16px var(--cyan-g) }
.ach .ico { margin: 0 auto 6px }
.ach-name { font-size: .68rem; font-weight: 600 }
.ach-desc { font-size: .58rem; color: var(--tx3); margin-top: 2px }

/* ─── Miles logo ─── */
.m-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cyan); box-shadow: 0 0 16px var(--cyan-g) }
.m-logo-sm { width: 32px; height: 32px; border: 1.5px solid var(--cyan) }
.m-logo-lg { width: 64px; height: 64px }
.m-logo-xl { width: 88px; height: 88px }

/* ─── Subtasks ─── */
.subtask-list { margin: 14px 0 }
.subtask {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-card);
  border-radius: var(--r-sm); margin-bottom: 4px; border: 1px solid rgba(255, 255, 255, .04); transition: var(--t);
}
.subtask:hover { background: var(--bg-card-hover) }
.subtask.st-done { opacity: .5 }
.subtask.st-done .st-title { text-decoration: line-through }
.st-chk {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tx3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--t);
}
.st-chk.on { background: var(--grad1); border-color: transparent }
.st-chk svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; opacity: 0; transition: var(--t) }
.st-chk.on svg { opacity: 1 }
.st-title { font-size: .78rem; flex: 1; min-width: 0 }
.st-del { color: var(--tx3); padding: 2px; cursor: pointer; flex-shrink: 0; transition: var(--t) }
.st-del:hover { color: var(--red) }
.st-add { display: flex; gap: 6px; margin-top: 8px }
.st-add input { flex: 1 }
.st-progress { font-size: .68rem; color: var(--tx2); margin-top: 6px; display: flex; align-items: center; gap: 8px }
.st-progress .progress { flex: 1; height: 4px }

/* ─── Comentarios de tarea (colaborativo) ─── */
.tc-count { font-size: .68rem; font-weight: 600; color: var(--tx2); background: var(--bg-elevated); border-radius: var(--r-full); padding: 1px 8px; min-width: 20px; text-align: center }
.tc-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px }
.tc-empty { font-size: .76rem; color: var(--tx3); text-align: center; padding: 12px 0 }
.tc-item { display: flex; gap: 9px; align-items: flex-start }
.tc-item .avatar { margin-top: 1px; flex-shrink: 0 }
.tc-body {
  flex: 1; min-width: 0;
  background: var(--glass, var(--bg-card)); border: 1px solid var(--glass-brd, rgba(255,255,255,.06));
  border-radius: 12px; padding: 7px 11px;
  box-shadow: var(--glass-sh-sm, 0 1px 2px rgba(0,0,0,.15)), inset 0 1px 0 var(--glass-hi, transparent);
}
.tc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px }
.tc-name { font-size: .74rem; font-weight: 700; color: var(--tx); line-height: 1.2 }
.tc-time { font-size: .64rem; color: var(--tx3); flex: 1 }
.tc-del { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tx3); flex-shrink: 0; transition: var(--t) }
.tc-del:hover { background: rgba(239, 68, 68, .14); color: var(--red) }
.tc-text { font-size: .82rem; color: var(--tx); line-height: 1.4; white-space: pre-wrap; word-break: break-word }
.tc-add { display: flex; gap: 7px; align-items: center; margin-top: 4px }
.tc-add .avatar { flex-shrink: 0 }
.tc-add input { flex: 1 }
.tc-add .btn-icon { flex-shrink: 0; width: 38px; height: 38px }

/* ─── Adjuntos de tarea (imágenes / PDF / Word) ─── */
.att-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px }
.att-item { position: relative }
.att-thumb { display: block; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-brd, rgba(255,255,255,.1)); box-shadow: var(--glass-sh-sm, 0 1px 2px rgba(0,0,0,.2)) }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.att-file {
  display: flex; align-items: center; gap: 9px; max-width: 220px;
  background: var(--glass, var(--bg-card)); border: 1px solid var(--glass-brd, rgba(255,255,255,.08));
  border-radius: 12px; padding: 8px 12px 8px 10px;
  box-shadow: var(--glass-sh-sm, 0 1px 2px rgba(0,0,0,.15)), inset 0 1px 0 var(--glass-hi, transparent);
}
.att-ico { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center }
.att-ico svg { width: 24px; height: 24px }
.att-meta { min-width: 0; display: flex; flex-direction: column }
.att-name { font-size: .78rem; font-weight: 600; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px }
.att-size { font-size: .64rem; color: var(--tx3) }
.att-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--glass-brd, rgba(255,255,255,.12));
  color: var(--tx2); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: var(--t);
}
.att-del:hover { background: rgba(239, 68, 68, .18); color: var(--red) }
.att-add { margin-top: 2px; gap: 7px }

/* ─── Estado de guardado (topbar) ─── */
.sync-status {
  font-size: .6rem; font-weight: 700; padding: 4px 8px; border-radius: 7px;
  background: var(--bg-elevated); color: var(--tx2); white-space: nowrap;
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
}
.sync-status.warn { background: rgba(245, 158, 11, .16); color: var(--orange, #f59e0b) }
.sync-status.bad { background: rgba(239, 68, 68, .16); color: var(--red, #ef4444) }

/* ─── Paginación de listas ─── */
.load-more { margin-top: 10px }
.load-more-end { text-align: center; font-size: .68rem; color: var(--tx3); padding: 12px 0 4px }

/* ─── Avatar con foto ─── */
.avatar-photo { overflow: hidden; padding: 0; background: var(--bg-elevated) }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit }

/* ─── Editor de perfil ─── */
.pf-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px }
/* La segunda mitad del selector gana a `.avatar` (que se define más abajo con la misma
   especificidad); si no, la previsualización sale del tamaño de un avatar chico. */
.pf-avatar-prev, .avatar.pf-avatar-prev { width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0; font-size: 1.3rem }
.pf-avatar-acts { display: flex; flex-direction: column; gap: 6px; min-width: 0 }

/* ─── Indicadores de actividad (Home) ─── */
.ins-card { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px }
.ins-row { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 12px; transition: var(--t) }
.ins-row + .ins-row { border-top: 1px solid var(--glass-brd, rgba(255, 255, 255, .05)) }
.ins-ico {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.ins-ico svg { width: 14px; height: 14px }
.ins-ok { background: rgba(16, 185, 129, .14); color: var(--green) }
.ins-info { background: var(--cyan-g); color: var(--cyan) }
.ins-warn { background: rgba(245, 158, 11, .15); color: var(--orange) }
.ins-txt { font-size: .8rem; line-height: 1.5; color: var(--tx2); padding-top: 4px }
.ins-empty { display: flex; align-items: flex-start; gap: 11px; padding: 12px }
.ins-empty p { font-size: .78rem; line-height: 1.55; color: var(--tx3); margin: 0 }

/* ─── Código de respaldo ─── */
.rec-ico {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cyan-g); color: var(--cyan); border: 1px solid var(--glass-brd);
}
.rec-ico svg { width: 26px; height: 26px }
.rec-desc { font-size: .8rem; color: var(--tx2); line-height: 1.5; text-align: center; margin-bottom: 16px }
.rec-desc strong { color: var(--tx) }
/* El código se lee y se transcribe: monoespaciado, grande y bien separado. */
.rec-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; text-align: center;
  color: var(--cyan); padding: 16px 12px; border-radius: 14px;
  background: var(--bg-input); border: 1px dashed rgba(34, 211, 238, .35);
  word-break: break-all; user-select: all;
}
.rec-check {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
  font-size: .8rem; color: var(--tx2); cursor: pointer;
}
/* La app aplica `-webkit-appearance: none` a TODOS los input, así que un checkbox nativo
   sale INVISIBLE. Este es propio y sigue la identidad: cuadrado redondeado y tilde cyan.
   Se usa en todos los checkbox de la app (respaldo, fijar nota…). */
.chk, .rec-check input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0; cursor: pointer;
  border-radius: 7px; border: 1.5px solid var(--glass-brd); background: var(--bg-input);
  position: relative; transition: var(--t);
}
.chk:hover, .rec-check input:hover { border-color: var(--cyan) }
.chk:checked, .rec-check input:checked { background: var(--grad1); border-color: transparent }
.chk:checked::after, .rec-check input:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.chk:focus-visible, .rec-check input:focus-visible { box-shadow: 0 0 0 3px var(--cyan-g) }
#rec-done:disabled { opacity: .45; pointer-events: none }

/* Enlaces de texto del acceso (olvidé mi contraseña / volver). */
.auth-link {
  display: block; width: 100%; margin-top: 12px; padding: 6px;
  font-size: .76rem; font-weight: 600; color: var(--tx2); transition: color .2s ease;
}
.auth-link:hover { color: var(--cyan) }

/* ─── Entrar con Google ───
   Separador con la palabra "o" en el medio: dos líneas que crecen y el texto centrado.
   El botón respeta la guía de marca de Google (fondo propio, logo a color, no recoloreado)
   porque es condición de uso del inicio de sesión, no una preferencia estética. */
.auth-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px; color: var(--tx3); font-size: .72rem;
}
.auth-sep::before, .auth-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--bd);
}
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
  font-weight: 600; letter-spacing: .01em;
}
.btn-google:hover { background: #f7f8f8; border-color: #c6c9cc }
.btn-google:active { background: #eef0f1 }
.btn-google svg { flex-shrink: 0 }

/* ─── Campana de novedades (topbar) ─── */
.tb-bell {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-card); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .06); transition: var(--t); flex-shrink: 0;
}
html.light .tb-bell { border-color: rgba(0, 0, 0, .07) }
.tb-bell:active { transform: scale(.92) }
.tb-bell-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--red, #ef4444); color: #fff;
  font-size: .6rem; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-base); pointer-events: none;
}

/* ─── Bandeja de novedades ─── */
.inbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch }
.inbox-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 12px; background: var(--bg-elevated);
  border: 1px solid transparent; transition: var(--t);
}
.inbox-item.unread { border-color: var(--cyan); background: var(--cyan-g) }
.inbox-item:active { transform: scale(.985) }
/* Ícono en pastilla teñida según el tipo de novedad — mismo lenguaje que los .ico de la app. */
.inbox-ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--tx2);
}
.inbox-ico svg { width: 15px; height: 15px }
.inbox-ico-assigned { background: var(--cyan-g); color: var(--cyan) }
.inbox-ico-done { background: rgba(16, 185, 129, .14); color: var(--green) }
.inbox-ico-comment { background: rgba(139, 63, 217, .16); color: var(--purple) }
.inbox-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 }
.inbox-text { font-size: .78rem; color: var(--tx); line-height: 1.35 }
.inbox-time { font-size: .64rem; color: var(--tx3) }

/* ─── Tiempo por miembro (detalle de tarea) ─── */
.tt-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 9px }
.tt-row { display: flex; align-items: center; gap: 7px }
.tt-row .avatar { flex-shrink: 0 }
.tt-name { flex: 1; min-width: 0; font-size: .72rem; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tt-min { font-size: .72rem; font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums }
.tt-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.tt-add .chip { font-size: .68rem }

/* ─── Kanban move buttons ─── */
.k-card-actions { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap }
.k-move-btn {
  font-size: .58rem; padding: 3px 7px; border-radius: 4px; background: var(--bg-elevated);
  color: var(--tx2); transition: var(--t); white-space: nowrap;
}
.k-move-btn:hover { background: var(--cyan-g); color: var(--cyan) }

/* ─── Task description counter ─── */
.task-counter { display: flex; justify-content: space-between; margin-top: 4px; font-size: .66rem; color: var(--tx3) }

/* ─── Range slider ─── */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 6px; background: var(--bg-elevated); outline: none; margin: 10px 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--grad1); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 229, 204, .3); border: 2px solid #fff;
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad1); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 229, 204, .3); border: 2px solid #fff;
}
/* Track relleno hasta el valor, como las barras de progreso del resto de la app.
   --range-pct lo actualiza paintRange() en app.js. */
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(to right, var(--cyan) 0%, var(--purple) var(--range-pct, 0%), var(--bg-elevated) var(--range-pct, 0%));
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--bg-elevated) }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--cyan) }
html.light input[type=range] { background: var(--bg-elevated) }
html.light input[type=range]::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, .15); border: 2px solid #fff }

/* ════════════════ HÁBITOS — Bloques del día, contador cuantitativo, notas ════════════════ */

/* Secciones por bloque del día */
.hab-block-section { margin-bottom: 18px }
.hab-block-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--tx2);
  padding: 8px 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  margin-bottom: 10px;
}
.hab-block-count {
  font-size: .65rem; font-weight: 700;
  background: var(--bg-elevated); color: var(--tx2);
  padding: 2px 8px; border-radius: var(--r-full);
}
html.light .hab-block-header { border-bottom-color: rgba(0, 0, 0, .06) }

/* Contenedor de acciones a la derecha del hábito */
.habit-actions {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.habit-action-row { display: flex; gap: 4px }
.habit-mini-btn {
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--tx3);
  transition: var(--t);
}
.habit-mini-btn:hover { background: var(--bg-card-hover); color: var(--tx2) }
.habit-mini-btn.has-note { background: var(--cyan-g); color: var(--cyan) }
.habit-mini-btn.has-note::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--cyan);
}
.habit-mini-btn { position: relative }

.habit-done-tag {
  font-size: .6rem; font-weight: 700;
  color: var(--green); margin-left: 4px;
  background: rgba(16, 185, 129, .15);
  padding: 1px 6px; border-radius: var(--r-full);
}

/* Hábito no programado para hoy: control deshabilitado + etiqueta */
.hab-offday-tag {
  font-size: .6rem; font-weight: 700;
  color: var(--tx3); margin-left: 4px;
  background: var(--bg-elevated);
  padding: 1px 6px; border-radius: var(--r-full);
}
.hab-offday .habit-chk,
.hab-offday .habit-counter { opacity: .38; pointer-events: none }

/* Contador cuantitativo */
.habit-counter {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-elevated); border-radius: var(--r-full);
  padding: 2px;
}
.habit-counter-btn {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); color: var(--tx);
  font-weight: 700; font-size: 1rem;
  transition: var(--t);
}
.habit-counter-btn:hover { background: var(--bg-card-hover) }
/* Acá el área solo puede crecer hacia arriba y abajo: el "−" y el "+" están a 4px con el
   número en el medio, así que estirarlos a lo ancho haría que se pisaran entre sí y restar
   terminaría sumando. Se gana alto, que es lo que falla al tocar con el pulgar. */
.habit-counter-btn { position: relative }
.habit-counter-btn::after { content: ''; position: absolute; inset: -9px -1px }
.habit-counter-btn.plus {
  background: var(--grad1); color: #fff;
  box-shadow: 0 0 12px var(--cyan-g);
}
.habit-counter-val {
  min-width: 42px; text-align: center;
  font-weight: 700; font-size: .82rem;
  font-family: var(--mono); color: var(--tx);
  padding: 0 4px;
}
.habit-counter-val.done { color: var(--green) }
.habit-counter-target { font-size: .6rem; color: var(--tx2); font-weight: 500 }

/* Variante compacta para el Home */
.habit-compact .habit-counter-mini {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-elevated); border-radius: var(--r-full);
  padding: 2px;
}
.habit-compact .habit-counter-mini .habit-counter-btn {
  width: 22px; height: 22px; font-size: .9rem;
}
.habit-compact .habit-counter-mini .habit-counter-val {
  min-width: 38px; font-size: .72rem; padding: 0 2px;
}

/* Light mode */
html.light .habit-mini-btn { background: var(--bg-elevated); color: var(--tx3) }
html.light .habit-mini-btn.has-note { background: rgba(0, 184, 165, .12); color: var(--cyan2) }
html.light .habit-counter { background: var(--bg-elevated) }
html.light .habit-counter-btn { background: var(--bg-card) }
html.light .habit-counter-btn.plus { color: #fff }
html.light .habit-done-tag { color: var(--green); background: rgba(16, 185, 129, .12) }

/* ════════════════ HEATMAP ANUAL ════════════════ */
.heatmap-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.heatmap {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-auto-flow: row;
  gap: 3px;
  min-width: max-content;
}
.heatmap-cell {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  transition: transform .15s ease;
  cursor: pointer;
}
.heatmap-cell:hover { transform: scale(1.4); z-index: 2; position: relative }
.heatmap-skip { background: transparent; cursor: default }
.heatmap-skip:hover { transform: none }
.heatmap-l0 { background: rgba(255, 255, 255, .06) }
.heatmap-l1 { background: rgba(0, 229, 204, .25) }
.heatmap-l2 { background: rgba(0, 229, 204, .45) }
.heatmap-l3 { background: rgba(0, 229, 204, .7) }
.heatmap-l4 { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-g) }
.heatmap-legend {
  display: flex; align-items: center; gap: 4px;
  margin-top: 10px; font-size: .65rem; color: var(--tx3);
  justify-content: flex-end;
}
.heatmap-meta {
  font-size: .68rem; font-weight: 500;
  color: var(--tx2); margin-left: 8px;
}
/* Light mode */
html.light .heatmap-l0 { background: rgba(0, 0, 0, .05) }
html.light .heatmap-l1 { background: rgba(0, 184, 165, .25) }
html.light .heatmap-l2 { background: rgba(0, 184, 165, .45) }
html.light .heatmap-l3 { background: rgba(0, 184, 165, .7) }
html.light .heatmap-l4 { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-g) }

/* ════════════════ ICONOS — wrapper SVG inline ════════════════ */
.habit-streak {
  display: flex; align-items: center; gap: 5px;
}
.habit-streak-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--orange);
}
.habit-streak-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: rgba(253, 126, 20, .15) }
.habit-streak-empty { color: var(--tx3) }
.habit-done-tag {
  display: inline-flex; align-items: center; gap: 3px;
}
.habit-done-tag-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 11px; height: 11px;
}
.habit-done-tag-icon svg { width: 100%; height: 100%; stroke: var(--green) }

.overdue-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 11px; height: 11px;
  margin-left: 4px; color: var(--red);
  vertical-align: -1px;
}
.overdue-icon svg { width: 100%; height: 100%; stroke: currentColor }

.hab-block-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.hab-block-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--cyan);
}
.hab-block-icon svg { width: 100%; height: 100%; stroke: currentColor }

/* Botones de icono extra-pequeños (reminders) */
.btn-icon-xs {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--tx2);
  transition: var(--t);
  flex-shrink: 0;
}
.btn-icon-xs svg { width: 13px; height: 13px; stroke: currentColor }
.btn-icon-xs:hover { background: var(--bg-card-hover); color: var(--tx) }
.btn-icon-xs.btn-icon-dan { background: rgba(239, 68, 68, .1); color: var(--red) }
.btn-icon-xs.btn-icon-dan:hover { background: rgba(239, 68, 68, .2) }
html.light .btn-icon-xs { background: var(--bg-elevated); color: var(--tx3) }

/* ════════════════ UX MÓVIL — touch targets + feedback ════════════════ */

/* Touch targets mínimos 44x44 en mobile (Apple HIG / Material guidelines) */
@media (pointer: coarse) {
  .task-act { width: 38px; height: 38px }
  .task-act svg { width: 15px; height: 15px }
  .task-star { width: 38px; height: 38px }
  .task-star svg { width: 16px; height: 16px }
  .habit-mini-btn { width: 32px; height: 32px }
  .habit-mini-btn svg { width: 14px; height: 14px }
  .habit-counter-btn { width: 32px; height: 32px; font-size: 1.1rem }
  .habit-compact .habit-counter-mini .habit-counter-btn { width: 28px; height: 28px }
  .btn-icon-xs { width: 36px; height: 36px }
  .btn-icon-xs svg { width: 15px; height: 15px }
  .chip { padding: 6px 12px }
  .tab-btn { padding: 11px 10px; min-height: 38px }
  /* Con el dedo, la campana y el botón de tema necesitan más blanco alrededor. */
  .tb-bell, #theme-btn { width: 40px; height: 40px }
  .inbox-item { padding: 13px 12px }
  .load-more { padding-top: 12px; padding-bottom: 12px }
}

/* Feedback táctil al presionar (active state visible) */
.btn:active, .btn-pri:active, .btn-sec:active, .btn-dan:active { transform: scale(.97) }
.task-act:active, .task-star:active, .habit-mini-btn:active, .btn-icon-xs:active { transform: scale(.92) }
.habit-counter-btn:active { transform: scale(.88) }
.task-chk:active, .habit-chk:active, .st-chk:active { transform: scale(.9) }
.chip:active { transform: scale(.95) }
.timer-btn:active, .timer-play:active { transform: scale(.93) }
.cal-day:active { transform: scale(.95) }
.qa-opt:active { transform: scale(.98) }
.drawer-item:active { transform: scale(.985) }
.nav-i:active { transform: scale(.92) }

/* Tap highlight transparente en TODOS los elementos clickeables */
button, [data-action], [role="button"], a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;  /* desactiva el double-tap zoom */
}

/* Drag-to-close del modal: el handle es clickeable para cerrar */
.modal-handle {
  cursor: grab;
  transition: var(--t);
  margin: -6px auto 14px;
  padding: 8px 0;
  background-clip: content-box;
  width: 44px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-handle::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: var(--tx3);
  transition: var(--t);
}
.modal-handle:hover::before { background: var(--tx2); width: 44px }
.modal-handle:active { cursor: grabbing }

/* Disable pointer-events en star deshabilitado para evitar tap */
.task-star.disabled { pointer-events: none }

/* Scroll suave en listas */
#habits-list, #home-tasks, #tv-list, #notes-list, #cal-events {
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Focus visible para accesibilidad teclado */
button:focus-visible, [data-action]:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* iOS safe area bottom */
.bottom-nav { padding-bottom: max(4px, env(safe-area-inset-bottom)) }
.page { padding-bottom: calc(100px + env(safe-area-inset-bottom)) }

/* Mejor scroll de tabs Tareas en móvil */
#p-tasks > div:first-of-type[style*="overflow-x"] {
  scrollbar-width: none;
}
#p-tasks > div:first-of-type[style*="overflow-x"]::-webkit-scrollbar {
  display: none;
}

/* ─── Responsive ─── */
@media (min-width: 768px) {
  .page {
    padding: 0 24px 100px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .k-col { min-width: 260px; max-width: 280px }
  /* En desktop, la nav se queda centrada y con ancho acotado para no verse estirada
     a lo ancho del viewport. Mantiene position: fixed via left:50% + translate. */
  .bottom-nav {
    left: 50%; right: auto;
    transform: translateX(-50%);
    max-width: 720px; width: 100%;
    border-radius: 18px 18px 0 0;
    border-left: 1px solid rgba(255, 255, 255, .04);
    border-right: 1px solid rgba(255, 255, 255, .04);
  }
  html.light .bottom-nav {
    border-left-color: rgba(0, 0, 0, .06);
    border-right-color: rgba(0, 0, 0, .06);
  }
}
@media (max-width: 360px) {
  .heatmap { grid-template-rows: repeat(7, 10px) }
  .heatmap-cell { width: 10px; height: 10px }
  .modal { padding: 20px 16px 24px }
  .page {
    padding: 0 12px 100px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .page-pad { padding-top: calc(60px + env(safe-area-inset-top)) }
  .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)) }
  /* En pantallas muy angostas el topbar lleva campana + tema + nivel: achicamos el
     título y los botones antes que dejar que se desborde. */
  .topbar-title { font-size: .92rem }
  .tb-bell, #theme-btn { width: 32px; height: 32px }
  .pf-avatar-prev, .avatar.pf-avatar-prev { width: 56px; height: 56px }
  .inbox-list { max-height: 52vh }
}

/* ─── QA destacado (Captura rápida) ─── */
.qa-opt-featured {
  background: linear-gradient(135deg, var(--cyan-g), rgba(139, 63, 217, .1));
  border: 1px solid var(--cyan-g);
  box-shadow: 0 0 16px var(--cyan-g);
  margin-bottom: 4px;
}
.qa-opt-featured:hover, .qa-opt-featured:active {
  background: linear-gradient(135deg, var(--cyan-gs), rgba(139, 63, 217, .18));
}
.qa-opt-featured .ico {
  box-shadow: 0 0 12px var(--cyan-g);
}
.qa-opt-t { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.qa-opt-kbd {
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .08); color: var(--tx2);
  border: 1px solid rgba(255, 255, 255, .08);
  letter-spacing: .04em;
}
html.light .qa-opt-kbd { background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .08); color: var(--tx2) }
/* Ocultar el hint de teclado en devices touch — Ctrl+K no aplica sin teclado físico */
@media (pointer: coarse) { .qa-opt-kbd { display: none } }

/* ─── Captura rápida (Natural Language) ─── */
.capture-head {
  display: flex; gap: 12px; align-items: center;
  margin: -4px 0 14px;
}
.capture-spark-ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan-gs), rgba(139, 63, 217, .25));
  color: var(--cyan);
  box-shadow: 0 0 16px var(--cyan-g);
  flex-shrink: 0;
}
.capture-spark-ico svg { width: 18px; height: 18px }
.capture-sub { font-size: .72rem; color: var(--tx2); line-height: 1.2 }
.capture-input-wrap { margin-bottom: 12px }
.capture-input {
  font-size: 16px; padding: 14px 16px;
  background: var(--bg-input);
  border: 1.5px solid var(--cyan-g);
}
.capture-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-g);
}

.capture-preview {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .04);
  margin-bottom: 4px;
  animation: fadeUp .25s ease;
}
.capture-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 600;
  background: var(--bg-elevated);
  color: var(--tx);
  border: 1px solid rgba(255, 255, 255, .04);
}
.capture-chip-ico { display: inline-flex; align-items: center; opacity: .8 }
.capture-chip-ico svg { width: 11px; height: 11px }
.capture-chip-title {
  background: var(--cyan-g); color: var(--cyan);
  border-color: rgba(0, 229, 204, .25);
  max-width: 100%;
}
.capture-chip-title .capture-chip-v {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.capture-chip-date {
  background: rgba(139, 63, 217, .15); color: var(--purple);
  border-color: rgba(139, 63, 217, .25);
}
.capture-chip-time {
  background: rgba(245, 158, 11, .14); color: var(--yellow);
  border-color: rgba(245, 158, 11, .25);
}
.capture-chip-dur {
  background: rgba(253, 126, 20, .14); color: var(--orange);
  border-color: rgba(253, 126, 20, .25);
}
.capture-chip-tag {
  background: rgba(232, 67, 147, .12); color: var(--pink);
  border-color: rgba(232, 67, 147, .22);
}
/* Tag sugerido por el parser (no escrito por el usuario): borde punteado + label "auto" */
.capture-chip-sugg {
  background: linear-gradient(135deg, rgba(232, 67, 147, .1), rgba(0, 229, 204, .08));
  border: 1px dashed rgba(232, 67, 147, .4);
}
.capture-chip-sugg-lbl {
  font-size: .56rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  opacity: .65; margin-left: 3px;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, .15);
}
html.light .capture-chip-sugg-lbl { background: rgba(0, 0, 0, .08) }
.capture-chip-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.capture-chip-pri-urgent { color: var(--red); background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .25) }
.capture-chip-pri-high   { color: var(--orange); background: rgba(253, 126, 20, .12); border-color: rgba(253, 126, 20, .25) }
.capture-chip-pri-low    { color: var(--green); background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .25) }
.capture-chip-rec {
  background: linear-gradient(135deg, rgba(0, 229, 204, .12), rgba(139, 63, 217, .1));
  color: var(--cyan);
  border-color: rgba(0, 229, 204, .25);
}
.capture-chip-sub {
  background: rgba(255, 255, 255, .04);
  color: var(--tx2);
  border-color: rgba(255, 255, 255, .06);
  font-weight: 500;
}
.capture-chip-type {
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .65rem; font-weight: 800;
}
.capture-chip-type-note     { color: var(--yellow); background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .35) }
.capture-chip-type-reminder { color: var(--purple); background: rgba(139, 63, 217, .18); border-color: rgba(139, 63, 217, .35) }
.capture-chip-type-habit    { color: var(--green);  background: rgba(16, 185, 129, .18); border-color: rgba(16, 185, 129, .35) }

/* Quick-insert chips (encima del preview): clickeables, insertan tokens en el input. */
.capture-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.capture-quick-chip {
  font-size: .68rem; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--bg-card); color: var(--tx2);
  border: 1px solid rgba(255, 255, 255, .06);
  cursor: pointer; transition: var(--t);
}
.capture-quick-chip:hover, .capture-quick-chip:focus-visible {
  background: var(--bg-elevated); color: var(--cyan);
  border-color: rgba(0, 229, 204, .3);
}

.capture-help {
  padding: 12px 14px;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .04);
}
.capture-help-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .04);
}
.capture-help-row:last-child { border-bottom: none }
.capture-help-lbl {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tx3);
  min-width: 72px; flex-shrink: 0;
}
.capture-help-ex {
  font-size: .76rem; color: var(--tx2);
  font-family: var(--mono);
}
.kbd-hint {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; padding: 1px 5px;
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  background: rgba(255, 255, 255, .15); border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .1);
}

/* ─── Tarjeta Cerrá tu día (Home) ─── */
.daily-review-card {
  margin: 14px 0 16px;
  background: linear-gradient(135deg, rgba(139, 63, 217, .12), rgba(0, 229, 204, .06));
  border: 1px solid rgba(139, 63, 217, .22);
  border-radius: var(--r);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.daily-review-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--purple), var(--cyan));
}
.daily-review-card-inner {
  display: flex; align-items: center; gap: 12px;
}
.daily-review-card-ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(139, 63, 217, .15); color: var(--purple);
  flex-shrink: 0;
}
.daily-review-card-ico svg { width: 20px; height: 20px }
.daily-review-card-body { flex: 1; min-width: 0 }
.daily-review-card-t {
  font-size: .92rem; font-weight: 700; line-height: 1.2; margin-bottom: 3px;
}
.daily-review-card-d {
  font-size: .74rem; color: var(--tx2); line-height: 1.35;
}

/* Recap de ayer */
.home-yesterday {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .04);
}
.home-yesterday-head { margin-bottom: 6px }
.home-yesterday-lbl {
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tx3);
}
.home-yesterday-inner { display: flex; align-items: center; gap: 10px }
.home-yesterday-mood {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(245, 158, 11, .14); color: var(--yellow);
  flex-shrink: 0;
}
.home-yesterday-mood svg { width: 22px; height: 22px }
.home-yesterday-text { flex: 1; min-width: 0 }
.home-yesterday-stats { font-size: .72rem; font-weight: 600 }
.home-yesterday-ref {
  font-size: .68rem; color: var(--tx2); margin-top: 2px;
  font-style: italic; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Daily Review modal ─── */
.review-head {
  display: flex; gap: 12px; align-items: center;
  margin: -4px 0 16px;
}
.review-moon-ico {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(139, 63, 217, .25), rgba(59, 130, 246, .15));
  color: var(--purple);
  flex-shrink: 0;
}
.review-moon-ico svg { width: 22px; height: 22px }
.review-date {
  font-size: .76rem; color: var(--tx2); text-transform: capitalize;
}
.review-section {
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.review-section:first-of-type { border-top: none; padding-top: 0 }
.review-sec-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tx3);
  margin-bottom: 10px;
}
.review-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.review-stat {
  text-align: center;
  padding: 12px 8px;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .04);
}
.review-stat-val { font-size: 1.4rem; font-weight: 800; line-height: 1.1 }
.review-stat-lbl { font-size: .66rem; color: var(--tx2); margin-top: 2px }
.review-streak { margin-top: 10px; text-align: center }
.review-streak-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 600;
  background: rgba(253, 126, 20, .14); color: var(--orange);
  border: 1px solid rgba(253, 126, 20, .25);
}
.review-streak-tag-ico { display: inline-flex }
.review-streak-tag-ico svg { width: 12px; height: 12px }

.review-pend {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .04);
  margin-bottom: 6px;
  transition: var(--t);
}
.review-pend.moved {
  opacity: .4;
  pointer-events: none;
  background: rgba(16, 185, 129, .08);
  border-color: rgba(16, 185, 129, .2);
}
.review-pend-info { flex: 1; min-width: 0 }
.review-pend-t {
  font-size: .84rem; font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-pend-meta { margin-top: 3px }
.review-pend-overdue {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .62rem; font-weight: 600;
  color: var(--red);
}
.review-pend-overdue-ico { display: inline-flex }
.review-pend-overdue-ico svg { width: 10px; height: 10px }
.review-pend-acts { display: flex; gap: 4px; flex-shrink: 0 }
.review-pend-btn { background: var(--bg-elevated) }
.review-pend-btn:hover { background: var(--cyan-g); color: var(--cyan) }

.review-mood { margin-top: 12px }
.review-mood-lbl {
  font-size: .72rem; color: var(--tx2); margin-bottom: 8px;
}
.review-mood-options {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.review-mood-opt {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: 8px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid rgba(255, 255, 255, .06);
  color: var(--tx3);
  transition: var(--t);
}
.review-mood-opt:hover { color: var(--tx2); border-color: rgba(255, 255, 255, .14) }
.review-mood-opt.on {
  background: rgba(245, 158, 11, .14);
  border-color: var(--yellow);
  color: var(--yellow);
  transform: scale(1.06);
}
.review-mood-opt svg { width: 26px; height: 26px }

.review-top3 { display: flex; flex-direction: column; gap: 8px }
.review-top3-row {
  display: flex; gap: 10px; align-items: center;
}
.review-top3-num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cyan-g);
  color: var(--cyan);
  font-size: .78rem; font-weight: 700;
  flex-shrink: 0;
}
.review-top3-row .fi { flex: 1 }
.review-sug-lbl {
  font-size: .65rem; color: var(--tx3); margin: 10px 0 6px;
}
.review-sug-chips { display: flex; flex-wrap: wrap; gap: 6px }
.review-sug-chip {
  padding: 7px 12px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 500;
  background: var(--bg-elevated); color: var(--tx2);
  border: 1px solid rgba(255, 255, 255, .04);
  transition: var(--t);
  min-height: 32px;
  display: inline-flex; align-items: center;
}
@media (pointer: coarse) {
  .review-sug-chip { padding: 9px 14px; min-height: 36px }
}
.review-sug-chip:hover { background: var(--cyan-g); color: var(--cyan); border-color: var(--cyan-gs) }
.review-sug-chip.used {
  opacity: .4;
  text-decoration: line-through;
  pointer-events: none;
}

/* Time input para reviewTime en Settings.
   font-size 16px obligatorio para evitar el auto-zoom de iOS al enfocar. */
/* Tiene que entrar "09:00 p. m." completo MÁS el ícono del reloj. En es-AR el formato de
   12 horas es largo; con el ancho anterior se cortaba la "m.". */
.set-time {
  width: auto !important; min-width: 140px; max-width: 160px;
  padding: 8px 10px; font-size: 16px; flex-shrink: 0;
}

/* Light theme ajustes */
html.light .daily-review-card {
  background: linear-gradient(135deg, rgba(139, 63, 217, .08), rgba(0, 229, 204, .04));
  border-color: rgba(139, 63, 217, .25);
}
html.light .capture-help-row { border-bottom-color: rgba(0, 0, 0, .05) }
html.light .review-pend.moved {
  background: rgba(16, 185, 129, .06);
  border-color: rgba(16, 185, 129, .15);
}

/* ─── Install prompt (iPad only) ─── */
.install-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 95;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 14px;
  border-radius: var(--r-full);
  background: var(--grad1);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: -.005em;
  box-shadow: 0 14px 32px -8px rgba(0, 229, 204, .45), 0 6px 14px -6px rgba(139, 63, 217, .45);
  transition: transform var(--t), opacity var(--t), box-shadow var(--t);
  -webkit-tap-highlight-color: transparent;
  animation: install-pop .42s cubic-bezier(.34, 1.56, .64, 1) both;
}
.install-fab.show { display: inline-flex }
.install-fab svg { width: 18px; height: 18px; stroke: #fff }
.install-fab:hover { box-shadow: 0 18px 40px -8px rgba(0, 229, 204, .6), 0 8px 18px -6px rgba(139, 63, 217, .55) }
.install-fab:active { transform: scale(.96) }
.install-fab::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad1);
  filter: blur(14px);
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}

@keyframes install-pop {
  from { opacity: 0; transform: translateY(20px) scale(.85) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

.install-hero {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.install-hero img {
  width: 56px; height: 56px; border-radius: 16px;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 18px var(--cyan-g);
  flex-shrink: 0;
}

.install-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.install-steps li {
  display: flex; gap: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: var(--r);
  padding: 12px 14px;
}
html.light .install-steps li { border-color: rgba(0, 0, 0, .05) }
.install-step-n {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad1);
  color: #fff;
  font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.install-step-body { flex: 1; min-width: 0 }
.install-step-t { font-size: .88rem; font-weight: 600; line-height: 1.35 }
.install-step-d {
  font-size: .76rem; color: var(--tx2);
  margin-top: 4px; line-height: 1.45;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.install-share-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(59, 130, 246, .15);
  color: var(--blue);
  flex-shrink: 0;
}
.install-share-ico svg { width: 13px; height: 13px }
.install-warn {
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(253, 126, 20, .1);
  border: 1px solid rgba(253, 126, 20, .25);
  border-radius: 10px;
  color: var(--orange);
  font-weight: 500;
  align-items: flex-start;
}
.install-warn svg {
  width: 16px; height: 16px;
  stroke: var(--orange);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ════════════════ COLABORACIÓN: proyectos, miembros, avatares ════════════════ */

/* ─── Avatares ─── */
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: var(--av, var(--cyan));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  flex-shrink: 0; user-select: none;
}
.avatar-xs { width: 20px; height: 20px; font-size: .54rem }
.avatar-sm { width: 26px; height: 26px; font-size: .62rem }
.avatar-lg { width: 40px; height: 40px; font-size: .82rem }
.avatar-empty {
  background: transparent; color: var(--tx3);
  border: 1.5px dashed var(--tx3); text-shadow: none;
}
.avatar-more { background: var(--bg-elevated); color: var(--tx2); text-shadow: none }
.avatar-off { opacity: .32; filter: grayscale(.4); transition: var(--t) }
.avatar-off:hover { opacity: .6 }
.avatar-stack { display: inline-flex; align-items: center }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--bg-card) }
.avatar-stack .avatar:not(:first-child) { margin-left: -7px }
.avatar-add {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--tx2);
  border: 1px dashed var(--tx3); transition: var(--t); flex-shrink: 0;
}
.avatar-add svg { width: 13px; height: 13px }
.avatar-add:hover { color: var(--cyan); border-color: var(--cyan) }

/* ─── Chip de proyecto y asignados en tarjetas de tarea ─── */
.proj-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .6rem; font-weight: 600; padding: 2px 8px;
  border-radius: var(--r-full); background: var(--bg-elevated); color: var(--pc, var(--cyan));
}
.proj-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc, var(--cyan)); flex-shrink: 0 }
.task-assignees { display: inline-flex; align-items: center; margin-left: 2px }

/* ─── Barra de miembros (página proyectos) ─── */
.members-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .04);
  padding: 12px 14px; margin-bottom: 16px;
}
.members-bar-lbl { font-size: .78rem; font-weight: 600; color: var(--tx2); flex-shrink: 0 }
.members-bar-avatars { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }

/* ─── Tarjetas de proyecto ─── */
.proj-list { display: flex; flex-direction: column; gap: 12px }
.proj-card {
  background: var(--bg-card); border-radius: var(--r); padding: 14px;
  border: 1px solid rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px transparent; transition: var(--t); cursor: pointer;
  position: relative; overflow: hidden;
}
.proj-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--pc, var(--cyan)); opacity: .9;
}
.proj-card:hover { background: var(--bg-card-hover); transform: translateY(-1px) }
.proj-card:active { transform: translateY(0) scale(.995) }
.proj-card-head { display: flex; align-items: center; gap: 12px }
.proj-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pc, var(--cyan)) 14%, transparent);
  color: var(--pc, var(--cyan));
}
.proj-ico svg { width: 21px; height: 21px }
.proj-ico-sm { width: 34px; height: 34px; border-radius: 10px }
.proj-ico-sm svg { width: 17px; height: 17px }
.proj-card-info { flex: 1; min-width: 0 }
.proj-card-name {
  font-size: .92rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-shared-tag {
  font-size: .56rem; font-weight: 600; padding: 2px 6px; border-radius: var(--r-full);
  background: var(--purple-g); color: var(--purple); flex-shrink: 0; letter-spacing: .02em;
}
.proj-card-sub { font-size: .72rem; color: var(--tx2); margin-top: 2px }
.proj-card-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px }
.proj-card-bar .progress { flex: 1; height: 6px }
.proj-card-pct { font-size: .68rem; font-weight: 700; color: var(--tx2); min-width: 30px; text-align: right }

/* ─── Proyectos en Home (compacto) ─── */
.home-proj-list { display: flex; flex-direction: column; gap: 8px }
.home-proj {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border-radius: var(--r-sm); padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .04); cursor: pointer; transition: var(--t);
}
.home-proj:hover { background: var(--bg-card-hover) }
.home-proj-info { flex: 1; min-width: 0 }
.home-proj-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.home-proj-bar { display: flex; align-items: center; gap: 8px; margin-top: 4px }
.home-proj-bar .progress { flex: 1; height: 5px }
.home-proj-bar span { font-size: .64rem; color: var(--tx3); font-weight: 600; flex-shrink: 0 }

/* ─── Detalle de proyecto ─── */
.pd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }
.pd-head-info { flex: 1; min-width: 0 }
.pd-head-name { font-size: 1.05rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pd-head-sub { font-size: .74rem; color: var(--tx2); margin-top: 2px }
.pd-desc { font-size: .82rem; color: var(--tx2); line-height: 1.5; margin-bottom: 12px }
.pd-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px }
.pd-bar .progress { flex: 1; height: 7px }
.pd-bar span { font-size: .7rem; font-weight: 700; color: var(--tx2); min-width: 32px; text-align: right }
.pd-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px }
.pd-filters .chip { display: inline-flex; align-items: center; gap: 5px }
.chip-av {
  width: 16px; height: 16px; border-radius: 50%; background: var(--av, var(--cyan));
  color: #fff; font-size: .48rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.pd-tasks { display: flex; flex-direction: column; gap: 8px }
.pd-empty { text-align: center; font-size: .8rem; color: var(--tx3); padding: 20px }
.pd-task {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border-radius: var(--r-sm); padding: 10px;
  border: 1px solid rgba(255, 255, 255, .04); transition: var(--t);
}
.pd-task.done { opacity: .6 }
.pd-task.done .pd-task-t { text-decoration: line-through }
.pd-task-body { flex: 1; min-width: 0; cursor: pointer }
.pd-task-t { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pd-task-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .68rem; color: var(--tx2) }
.pd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0 }
.pd-done-by { color: var(--green); font-weight: 600; display: inline-flex; align-items: center; gap: 3px }
.pd-done-by svg { width: 10px; height: 10px; flex-shrink: 0 }
.pd-assign { display: flex; align-items: center; gap: 4px; flex-shrink: 0 }
.pd-assign .avatar { cursor: pointer }

/* ─── Pickers (color, ícono, asignados) ─── */
.assignee-picker { display: flex; gap: 7px; flex-wrap: wrap }
.assignee-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 6px; border-radius: var(--r-full);
  background: var(--bg-elevated); color: var(--tx2);
  font-size: .76rem; font-weight: 600; transition: var(--t); border: 1.5px solid transparent;
}
.assignee-chip-av {
  width: 20px; height: 20px; border-radius: 50%; background: var(--av, var(--cyan));
  color: #fff; font-size: .54rem; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.assignee-chip.on { color: var(--tx); border-color: var(--av, var(--cyan)); background: var(--bg-card-hover) }
.assignee-chip:active { transform: scale(.96) }
.assignee-chip-add { color: var(--tx3); border: 1.5px dashed var(--tx3); padding: 5px 12px }
.assignee-chip-add:hover { color: var(--cyan); border-color: var(--cyan) }

.color-picker { display: flex; gap: 9px; flex-wrap: wrap }
.color-dot {
  width: 28px; height: 28px; border-radius: 50%; background: var(--av);
  border: 2px solid transparent; transition: var(--t); position: relative;
}
.color-dot.on { border-color: var(--tx); transform: scale(1.08) }
.color-dot:active { transform: scale(.94) }

.icon-picker { display: flex; gap: 8px; flex-wrap: wrap }
.icon-opt {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--tx2);
  border: 1.5px solid transparent; transition: var(--t);
}
.icon-opt svg { width: 20px; height: 20px }
.icon-opt.on { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-g) }
.icon-opt:active { transform: scale(.94) }

/* ─── Lista de miembros ─── */
.members-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px }
.member-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border-radius: var(--r-sm); padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .04);
}
.member-row-info { flex: 1; min-width: 0 }
.member-row-name { font-size: .84rem; font-weight: 600; display: flex; align-items: center; gap: 6px }
.member-you {
  font-size: .56rem; font-weight: 700; padding: 1px 6px; border-radius: var(--r-full);
  background: var(--cyan-g); color: var(--cyan); letter-spacing: .03em;
}
.member-row-sub { font-size: .68rem; color: var(--tx2); margin-top: 1px }
.member-row-acts { display: flex; gap: 4px; flex-shrink: 0 }
.member-add { display: flex; gap: 8px; align-items: center }
.member-add .fi { flex: 1 }

/* ─── Ajustes tema claro ─── */
html.light .proj-card,
html.light .home-proj,
html.light .pd-task,
html.light .member-row,
html.light .members-bar { border-color: rgba(0, 0, 0, .05) }
html.light .proj-chip,
html.light .assignee-chip,
html.light .avatar-more { background: var(--bg-elevated) }
html.light .icon-opt { background: var(--bg-elevated) }
html.light .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--bg-base) }

/* ══════════════════════════════════════════════════════════════════════
   LIQUID GLASS — capa premium (estilo iOS)
   Fondo de color ambiental que se refracta a través de superficies
   translúcidas con brillo especular. Todo se controla por tokens
   (--glass-*), así que funciona igual en tema claro y oscuro.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Fondo ambiental fijo (detrás de todo el contenido) ─── */
#liquid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(42% 32% at 12% -4%, var(--amb-1), transparent 72%),
    radial-gradient(46% 34% at 104% 8%, var(--amb-2), transparent 72%),
    radial-gradient(52% 42% at 86% 104%, var(--amb-3), transparent 72%);
}
#liquid-bg::before, #liquid-bg::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(72px); opacity: .5; will-change: transform;
}
#liquid-bg::before {
  width: 48vmax; height: 48vmax; left: -14vmax; top: -16vmax;
  background: radial-gradient(circle, var(--amb-2), transparent 62%);
  animation: liquidDrift1 28s ease-in-out infinite;
}
#liquid-bg::after {
  width: 42vmax; height: 42vmax; right: -14vmax; bottom: -16vmax;
  background: radial-gradient(circle, var(--amb-1), transparent 62%);
  animation: liquidDrift2 34s ease-in-out infinite;
}
@keyframes liquidDrift1 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(8vmax, 6vmax) } }
@keyframes liquidDrift2 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-7vmax, -5vmax) } }
/* El contenido vive por encima del fondo ambiental */
#app { position: relative; z-index: 1 }

/* ─── Chrome traslúcido: topbar / bottom-nav / drawer ─── */
.topbar {
  background: var(--glass-chrome);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
.bottom-nav {
  background: var(--glass-chrome);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-top: 1px solid var(--glass-brd);
  box-shadow: 0 -1px 0 var(--glass-hi) inset;
}
.drawer {
  background: var(--glass-chrome);
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-sat));
  border-right: 1px solid var(--glass-brd);
  box-shadow: var(--glass-sh-lg);
}

/* ─── Superficies elevadas: glass real con blur + brillo especular ─── */
.card, .progress-card, .stat-box, .chart-container, .timeline,
.timer-modes, .cal-event-empty {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-sh), inset 0 1px 0 var(--glass-hi);
}
.card:hover { background: var(--glass-strong) }

/* ─── Listas (muchos ítems): translúcidas + rim, sin blur (rendimiento) ─── */
.task, .habit, .note, .k-card, .k-col, .proj-card, .home-proj,
.member-row, .pd-task, .matrix-cell, .timeline-block, .cal-event {
  background-color: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-sh-sm), inset 0 1px 0 var(--glass-hi);
}

/* ─── Modales / hojas / menús: glass frosted profundo ─── */
.modal, .qa-menu {
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(30px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(30px) saturate(var(--glass-sat));
  box-shadow: var(--glass-sh-lg), inset 0 1px 0 var(--glass-hi);
}
.modal-ov {
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.qa-ov {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.toast {
  background: var(--glass-strong);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(20px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-sat));
  box-shadow: var(--glass-sh-lg), inset 0 1px 0 var(--glass-hi);
}

/* ─── Acabado glossy en elementos de acción (gradiente + brillo) ─── */
.btn-pri {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 46%),
    var(--grad1);
  box-shadow: 0 8px 22px -8px var(--cyan-gs), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.nav-fab {
  background:
    radial-gradient(120% 120% at 32% 14%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 46%),
    var(--grad1);
  box-shadow: 0 12px 26px -8px var(--cyan-gs), inset 0 2px 3px rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.timer-play {
  background:
    radial-gradient(120% 120% at 32% 14%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 48%),
    var(--grad1);
  box-shadow: 0 14px 30px -10px var(--cyan-gs), inset 0 2px 3px rgba(255, 255, 255, .38);
}

/* ─── Sheen especular en superficies de gradiente ─── */
.hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, var(--cyan) 0%, var(--purple) 70%, var(--magenta) 110%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.card-grad {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 44%),
    var(--grad1);
  box-shadow: var(--glass-sh), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ─── Controles pequeños: translucidez sutil coherente ─── */
.chip, .tab-btn.on, .badge-pending, .timer-btn, .task-act, .task-star,
.habit-mini-btn, .btn-icon-xs, .matrix-item {
  border: 1px solid var(--glass-brd);
}
.timer-btn {
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
}

/* ─── Overrides de tema claro para superficies con regla previa opaca ─── */
html.light .topbar, html.light .bottom-nav, html.light .drawer { background: var(--glass-chrome) }
html.light .modal, html.light .qa-menu, html.light .toast { background: var(--glass-strong) }
html.light .modal-ov { background: rgba(15, 20, 40, .18); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%) }
html.light .card, html.light .task, html.light .habit, html.light .note,
html.light .k-card, html.light .proj-card, html.light .home-proj,
html.light .member-row, html.light .stat-box, html.light .timeline { border-color: var(--glass-brd) }
html.light .timer-btn { background: var(--glass) }

/* ─── Accesibilidad: transparencia reducida → superficies sólidas ─── */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #16161f; --glass-strong: #14141d; --glass-chrome: rgba(10, 10, 20, .96) }
  html.light { --glass: #ffffff; --glass-strong: #ffffff; --glass-chrome: rgba(255, 255, 255, .98) }
  .topbar, .bottom-nav, .drawer, .card, .progress-card, .stat-box, .chart-container,
  .timeline, .timer-modes, .modal, .qa-menu, .toast, .timer-btn {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #liquid-bg { opacity: .35 }
}

/* ─── Accesibilidad: movimiento reducido ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .1s !important;
    scroll-behavior: auto !important;
  }
  #liquid-bg::before, #liquid-bg::after { animation: none !important }
}

/* ─── Fallback: navegadores sin backdrop-filter → subir opacidad para legibilidad ─── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(20, 20, 32, .92); --glass-strong: rgba(16, 16, 26, .95); --glass-chrome: rgba(9, 9, 18, .96) }
  html.light { --glass: rgba(255, 255, 255, .93); --glass-strong: rgba(255, 255, 255, .96); --glass-chrome: rgba(255, 255, 255, .96) }
}

/* ══════════════════════════════════════════════════════════
   ACCESO (login/registro) + CUENTA & COLABORACIÓN
   ══════════════════════════════════════════════════════════ */
.auth-gate {
  position: fixed; inset: 0; z-index: 500; display: none;
  align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(0, 229, 204, .16), transparent 70%),
    radial-gradient(60% 45% at 100% 10%, rgba(139, 63, 217, .2), transparent 70%),
    var(--bg-deep);
  overflow-y: auto;
}
.auth-gate.show { display: flex }
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--glass-strong, var(--bg-card));
  border: 1px solid var(--glass-brd, rgba(255, 255, 255, .1));
  backdrop-filter: blur(30px) saturate(var(--glass-sat, 160%));
  -webkit-backdrop-filter: blur(30px) saturate(var(--glass-sat, 160%));
  box-shadow: var(--glass-sh-lg, 0 24px 70px -18px rgba(0, 0, 0, .7)), inset 0 1px 0 var(--glass-hi, rgba(255, 255, 255, .14));
  border-radius: 22px; padding: 30px 24px 24px; text-align: center;
  animation: scaleIn .3s ease;
}
/* ─── Aurora de fondo ───
   Tres manchas de color que se desplazan muy lento detrás del vidrio. Es lo que hace que
   la card se sienta apoyada sobre algo vivo en vez de sobre un fondo plano. */
.auth-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.auth-aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: .5; will-change: transform;
}
.auth-aurora span:nth-child(1) { width: 60vw; height: 60vw; max-width: 420px; max-height: 420px; top: -10%; left: -15%; background: var(--cyan); animation: auroraA 18s ease-in-out infinite }
.auth-aurora span:nth-child(2) { width: 55vw; height: 55vw; max-width: 380px; max-height: 380px; bottom: -12%; right: -12%; background: var(--purple); animation: auroraB 22s ease-in-out infinite }
.auth-aurora span:nth-child(3) { width: 40vw; height: 40vw; max-width: 280px; max-height: 280px; top: 45%; left: 55%; background: var(--pink, #ec4899); opacity: .28; animation: auroraC 26s ease-in-out infinite }
@keyframes auroraA { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(18%, 12%, 0) scale(1.15) } }
@keyframes auroraB { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(-16%, -14%, 0) scale(1.1) } }
@keyframes auroraC { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(-22%, 18%, 0) scale(.85) } }

/* Reflejo especular que barre la card al pasar el mouse: el "brillo" del vidrio. */
.auth-card { position: relative; z-index: 1; overflow: hidden; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1) }
.auth-card > *:not(.auth-sheen) { position: relative; z-index: 1 }
/* El brillo que cruza la card al pasar el mouse. Descansa fuera, a la izquierda, y entra
   solo durante el barrido.

   El `left` tiene que ser bastante más negativo de lo que parece necesario, y la culpa es
   del `skewX`: al inclinar la banda, su borde SUPERIOR se corre hacia la derecha unos
   0,125 × la altura de la card (~80px con la card de registro). Con el -60% que tenía, ese
   borde terminaba en +23px — o sea, dentro — y asomaba una cuña diagonal fija en la esquina
   de arriba a la izquierda. Se veía como una sombra rara que nadie había puesto ahí.

   Con -100% el borde superior queda en -129px aun con la card más alta, así que la banda
   está fuera de verdad hasta que empieza el barrido. La animación es la misma: solo cambia
   desde dónde arranca. */
.auth-sheen {
  position: absolute; top: 0; left: -100%; width: 45%; height: 100%; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.10) 45%, rgba(255,255,255,.16) 50%, transparent);
  transform: skewX(-14deg); transition: left .8s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
  .auth-card:hover { transform: translateY(-3px); box-shadow: var(--glass-sh-lg), 0 0 0 1px var(--glass-hi), inset 0 1px 0 var(--glass-hi) }
  .auth-card:hover .auth-sheen { left: 115% }
}

.auth-logo {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
  border: 2px solid var(--cyan); box-shadow: 0 0 20px var(--cyan-g); object-fit: cover;
  animation: authLogoIn .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes authLogoIn { from { opacity: 0; transform: translateY(-8px) scale(.9) } to { opacity: 1; transform: none } }
.auth-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em }
.auth-sub { font-size: .82rem; color: var(--tx2); margin-top: 4px; margin-bottom: 20px }
/* Las pestañas usan una pastilla que se DESLIZA entre las dos, en vez de encenderse y
   apagarse. Es el mismo gesto que el resto de la app usa para cambiar de estado. */
.auth-tabs { position: relative; display: flex; gap: 4px; background: var(--bg-elevated); border-radius: var(--r-sm); padding: 3px; margin-bottom: 20px }
.auth-tab { position: relative; z-index: 1; flex: 1; padding: 9px; border-radius: 8px; font-size: .82rem; font-weight: 600; color: var(--tx2); transition: color .25s ease }
.auth-tab.on { color: var(--tx) }
.auth-tab-glider {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 5px);
  border-radius: 8px; background: var(--glass, var(--bg-card));
  box-shadow: var(--glass-sh-sm), inset 0 1px 0 var(--glass-hi);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.auth-tabs.register .auth-tab-glider { transform: translateX(calc(100% + 4px)) }
/* ─── Campo con label flotante ───
   El label vive DENTRO del campo y sube al enfocar o al haber texto. El placeholder pasa
   a ser una pista (vos@ejemplo.com) que solo aparece mientras escribís, así el campo no
   grita dos cosas a la vez. */
/* .field-box envuelve SOLO el input: así la línea de foco se apoya en el borde del campo
   y no debajo del medidor de fuerza, que vive fuera de la caja. */
.field { margin-bottom: 14px; text-align: left }
.field-box { position: relative }
.field-input.fi { padding: 22px 14px 9px; font-size: 16px }
.field-input.has-action { padding-right: 46px }
.field-label {
  position: absolute; left: 14px; top: 9px; font-size: .66rem; font-weight: 600;
  letter-spacing: .02em; color: var(--cyan); pointer-events: none;
  transition: top .22s cubic-bezier(.22,1,.36,1), font-size .22s cubic-bezier(.22,1,.36,1), color .22s ease;
}
/* Vacío y sin foco: el label ocupa el lugar del placeholder. */
.field-input.fi:placeholder-shown:not(:focus) ~ .field-label {
  top: 15px; font-size: .95rem; font-weight: 500; color: var(--tx3);
}
.field-input.fi::placeholder { opacity: 0; transition: opacity .2s ease }
.field-input.fi:focus::placeholder { opacity: 1 }
/* Foco: en vez de una línea abajo (que apilaba barras y engordaba el campo), el BORDE
   entero se vuelve del degradado de la marca. Es la misma superficie de vidrio, sin
   agregar un solo pixel de alto. El truco del mask recorta el relleno y deja solo la
   arista de 1px. */
.field-box::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-sm);
  padding: 1px; background: var(--grad1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .28s ease; pointer-events: none;
}
.field-box:focus-within::after { opacity: 1 }
/* El borde plano cede su lugar al degradado para que no se vean dos aristas. */
.field-box:focus-within .field-input.fi { border-color: transparent }
/* Ojo para ver la contraseña. */
.field-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  color: var(--tx3); transition: var(--t);
}
.field-eye svg { width: 17px; height: 17px }
.field-eye:hover, .field-eye.on { color: var(--cyan); background: var(--cyan-g) }
/* Fuerza de la contraseña: tres barritas DENTRO del campo, al lado del ojo. Ocupan cero
   alto extra y se leen de un vistazo, como la señal del celular. */
.field-meter {
  display: none; position: absolute; right: 46px; top: 50%; transform: translateY(-50%);
  align-items: flex-end; gap: 3px; height: 14px; pointer-events: none;
}
.field-meter.show { display: flex }
.field-meter i { width: 3px; border-radius: 2px; background: var(--tx3); opacity: .35; transition: background .25s ease, opacity .25s ease }
.field-meter i:nth-child(1) { height: 7px }
.field-meter i:nth-child(2) { height: 10px }
.field-meter i:nth-child(3) { height: 14px }
.field-meter.lvl1 i:nth-child(-n+1),
.field-meter.lvl2 i:nth-child(-n+2),
.field-meter.lvl3 i:nth-child(-n+3) { opacity: 1 }
.field-meter.lvl1 i:nth-child(-n+1) { background: var(--red) }
.field-meter.lvl2 i:nth-child(-n+2) { background: var(--orange) }
.field-meter.lvl3 i:nth-child(-n+3) { background: var(--green) }

.auth-card .fg { margin-bottom: 12px; text-align: left }
.auth-error { font-size: .8rem; color: var(--red); background: rgba(239, 68, 68, .12); border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 12px; text-align: left }
.auth-card .btn-block { margin-top: 4px }
.auth-foot { font-size: .72rem; color: var(--tx3); margin-top: 16px; line-height: 1.5 }

/* Botón con estado de carga: mientras habla con el servidor no queda "muerto". */
.auth-submit { position: relative; overflow: hidden }
.auth-submit .auth-spinner {
  position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  opacity: 0; animation: authSpin .7s linear infinite;
}
.auth-submit.loading .auth-submit-txt { opacity: 0 }
.auth-submit.loading .auth-spinner { opacity: 1 }
.auth-submit-txt { transition: opacity .18s ease }
@keyframes authSpin { to { transform: rotate(360deg) } }

/* El error entra con un empujón lateral en vez de aparecer de la nada. */
.auth-error { animation: authShake .4s cubic-bezier(.36,.07,.19,.97) }
@keyframes authShake {
  10%, 90% { transform: translateX(-2px) } 20%, 80% { transform: translateX(3px) }
  30%, 50%, 70% { transform: translateX(-5px) } 40%, 60% { transform: translateX(5px) }
}

/* Nada de esto se mueve si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .auth-aurora span, .auth-logo, .auth-error { animation: none }
  .auth-card, .auth-sheen, .field-label, .field-line, .auth-tab-glider { transition: none }
}

/* Cuenta & colaboración (Ajustes) */
.account-me { display: flex; align-items: center; gap: 11px; padding: 4px 0 14px; border-bottom: 1px solid var(--glass-brd, rgba(255, 255, 255, .06)); margin-bottom: 14px; width: 100%; background: none; transition: var(--t) }
.account-me:active { transform: scale(.99); opacity: .8 }
.account-me-edit { margin-left: auto; flex-shrink: 0; font-size: .72rem; font-weight: 700; color: var(--cyan); padding: 6px 12px; border-radius: 8px; background: var(--cyan-g) }
.account-me .avatar { width: 40px; height: 40px; font-size: .8rem; flex-shrink: 0 }
.account-me-info { min-width: 0; text-align: left }
.account-me-name { font-size: .95rem; font-weight: 700 }
.account-me-email { font-size: .74rem; color: var(--tx2) }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.invite-code {
  font-family: var(--mono); font-size: 1.25rem; font-weight: 700; letter-spacing: .12em;
  color: var(--cyan); margin-top: 4px;
  background: var(--cyan-g); border-radius: 8px; padding: 4px 12px; display: inline-block;
}

/* ════════════════ PANTALLA DE CARGA ════════════════
   Cubre el hueco entre "entré" y "la app está lista". Vive sobre todo lo demás y se va
   con una sola transición de opacidad + escala: la app queda "detrás" y emerge, en vez
   de aparecer de la nada. */
.splash {
  /* Por encima de TODO, incluida la pantalla de acceso (z-index 500): al ingresar, el
     telón se levanta mientras el gate todavía está en pantalla — si quedara debajo, el
     usuario vería el formulario congelado justo en el momento que esto viene a tapar. */
  position: fixed; inset: 0; z-index: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--bg-deep);
  transition: opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1), visibility .5s;
}
.splash.hide { opacity: 0; transform: scale(1.06); visibility: hidden; pointer-events: none }

/* Aura de marca: los dos colores de Miles latiendo detrás del logo. */
.splash-aura {
  position: absolute; width: min(70vw, 420px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--cyan), transparent 62%),
              radial-gradient(circle at 68% 62%, var(--purple), transparent 60%);
  filter: blur(70px); opacity: .5;
  animation: splashAura 4.5s ease-in-out infinite;
}
@keyframes splashAura {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .45 }
  50%      { transform: scale(1.18) rotate(22deg); opacity: .62 }
}

.splash-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center }

/* Anillo: gira entero y además "respira" el trazo, para que se lea como progreso
   indeterminado y no como un spinner cualquiera. */
.splash-ring { position: absolute; inset: 0; width: 120px; height: 120px; transform: rotate(-90deg) }
.splash-ring circle { fill: none; stroke-width: 3; stroke-linecap: round }
.splash-ring-bg { stroke: var(--glass-brd) }
.splash-ring-fg {
  stroke: var(--cyan);
  stroke-dasharray: 327; stroke-dashoffset: 245;
  transform-origin: 60px 60px;
  animation: splashSpin 1.4s cubic-bezier(.6,.1,.4,.9) infinite, splashDash 2.8s ease-in-out infinite;
}
@keyframes splashSpin { to { transform: rotate(360deg) } }
@keyframes splashDash {
  0%, 100% { stroke-dashoffset: 278; stroke: var(--cyan) }
  50%      { stroke-dashoffset: 100; stroke: var(--purple) }
}

/* El logo entra una vez y después late suave, sincronizado con el aura. */
.splash-logo {
  width: 72px; height: 72px; border-radius: 22px; position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  animation: splashPop .8s cubic-bezier(.34,1.56,.64,1) both, splashBreath 4.5s ease-in-out 0.8s infinite;
}
@keyframes splashPop { from { opacity: 0; transform: scale(.55) } to { opacity: 1; transform: scale(1) } }
@keyframes splashBreath { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.06) } }

/* "Miles Task" letra por letra. El escalonado lo dan los nth-child de abajo. */
.splash-word { display: flex; gap: 1px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: .02em }
.splash-word span { opacity: 0; animation: splashLetter .5s cubic-bezier(.22,1,.36,1) both }
.splash-word .splash-sp { width: 9px }
.splash-word span:nth-child(1) { animation-delay: .34s } .splash-word span:nth-child(2) { animation-delay: .40s }
.splash-word span:nth-child(3) { animation-delay: .46s } .splash-word span:nth-child(4) { animation-delay: .52s }
.splash-word span:nth-child(5) { animation-delay: .58s } .splash-word span:nth-child(7) { animation-delay: .66s }
.splash-word span:nth-child(8) { animation-delay: .72s } .splash-word span:nth-child(9) { animation-delay: .78s }
.splash-word span:nth-child(10) { animation-delay: .84s }
/* Las 5 primeras en cyan y "Task" en violeta: el degradado de la marca, en texto. */
.splash-word span:nth-child(-n+5) { color: var(--cyan) }
.splash-word span:nth-child(n+7) { color: var(--purple) }
@keyframes splashLetter { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.splash-msg {
  font-family: var(--font-display); font-weight: 300;
  font-size: .78rem; color: var(--tx3); letter-spacing: .08em;
  opacity: 0; animation: splashFade .6s ease .95s both;
}
@keyframes splashFade { to { opacity: 1 } }

/* Respeta a quien pidió menos movimiento: se ve la marca, quieta. */
@media (prefers-reduced-motion: reduce) {
  .splash-aura, .splash-ring-fg, .splash-logo, .splash-word span, .splash-msg { animation: none }
  .splash-word span, .splash-msg { opacity: 1 }
  .splash-ring-fg { stroke-dashoffset: 245 }
}

/* ─── Sesiones activas (dispositivos) ─── */
.sesion-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; margin-bottom: 8px;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 13px;
  backdrop-filter: blur(10px);
}
/* La sesión actual se distingue: es la única que no se puede cerrar desde acá. */
.sesion-row.sesion-actual { border-color: var(--cyan); background: var(--cyan-g) }
.sesion-info { flex: 1; min-width: 0 }
.sesion-dev { font-size: .84rem; font-weight: 700; display: flex; align-items: center; gap: 7px }
.sesion-sub { font-size: .7rem; color: var(--tx3); margin-top: 2px }
.sesion-row .btn { flex-shrink: 0 }

/* ─── Calendario: estados de los eventos ───
   Lo que ya pasó se atenúa y lo hecho se tacha. Sin esto, a media tarde la lista del día
   se veía igual que a la mañana: no se distinguía lo que quedaba por delante. */
.cal-event--pasado { opacity: .55 }
.cal-event--pasado .cal-event-time-h { color: var(--tx3) }
.cal-event--hecha .cal-event-title { text-decoration: line-through; color: var(--tx3) }

/* El título del mes ahora es un botón: vuelve a hoy. */
.cal-nav-title {
  background: none; border: none; cursor: pointer; font: inherit; color: inherit;
  padding: 4px 10px; border-radius: 9px; transition: background .2s, color .2s;
}
.cal-nav-title:hover { background: var(--cyan-g); color: var(--cyan) }
.cal-day:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px }

/* ─── Estadísticas: etiquetas largas ───
   El nombre se recorta con puntos suspensivos, no cortando la cadena: antes se hacía
   `substring(0,10)` y quedaban cosas como "Lectura té", que se leen como un error. */
.chart-bar-nombre {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chart-bar-label { overflow: hidden }

/* Aclaración de a quién pertenecen los números cuando se trabaja en equipo. */
.stats-equipo {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; margin-bottom: 14px;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 13px;
  backdrop-filter: blur(10px);
  font-size: .76rem; color: var(--tx2); line-height: 1.45;
}
.stats-equipo svg { flex-shrink: 0; margin-top: 2px; color: var(--purple) }
.stats-equipo strong { color: var(--tx); font-weight: 700 }