/* ============================================================
   Areté — sistema de diseño «obsidiana y oro».
   Casi negro, grises cálidos y un solo acento dorado; cada apartado
   tiene un tono apagado propio que solo aparece en sus datos. Sin
   dependencias: tipografías del sistema, animaciones con anime.js y el
   fondo 3D con three.js (fx.js).
   Inspiración: la sobriedad de Linear, la paleta estrecha y el brillo
   como relieve de WHOOP, y componentes de 21st.dev (tarjetas con grano,
   indicadores de puntos, cristal con reflejo).
   ============================================================ */

:root {
  color-scheme: dark;
  /* Superficies: obsidiana */
  --bg: #050505;
  --bg-soft: #09090a;
  --panel: #0e0e0f;
  --panel-2: #161618;
  --panel-3: #212124;
  --text: #eeebe3;
  --muted: #8d8a82;
  --border: rgba(255, 255, 255, 0.065);
  --border-strong: rgba(255, 255, 255, 0.13);
  /* Acento: oro */
  --accent: #d8b46a;
  --accent-ink: #120e06;
  --accent-2: #b8904a;
  --accent-grad: linear-gradient(135deg, #f4e6c2 0%, #d8b46a 46%, #a9803f 100%);
  --gold-text: linear-gradient(180deg, #fbf6ea 10%, #e2cc97 62%, #b8904a 120%);
  --ivory-text: linear-gradient(180deg, #fbf9f4 25%, #b7b1a4 115%);
  --good: #6cc39a;
  --bad: #e0654f;
  --warn: #e3a64a;
  --info: #8fb0d8;
  /* Cristal */
  --glass: rgba(9, 9, 10, 0.74);
  --glass-top: rgba(5, 5, 5, 0.66);
  --surface-glass: rgba(14, 14, 15, 0.9);
  --specular: rgba(255, 255, 255, 0.045);
  /* Radios: más rectos que antes, menos burbuja */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-full: 980px;
  /* Sombras: profundas y sin color */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 0 rgba(0, 0, 0, 0.5), 0 22px 50px -24px rgba(0, 0, 0, 0.85);
  --shadow-lg: 0 30px 90px -20px rgba(0, 0, 0, 0.9);
  /* Movimiento */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --focus: 0 0 0 3px rgba(216, 180, 106, 0.26);
  /* Tipografía: titulares con serifa (editorial, clásica como el nombre)
     y el resto en la sans del sistema. */
  --font-ui: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-display: "Sitka Display", "Sitka Heading", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, ui-serif, serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1ec;
  --bg-soft: #fbfaf7;
  --panel: #ffffff;
  --panel-2: #f1eee7;
  --panel-3: #e4e0d6;
  --text: #17150f;
  --muted: #6f6a5f;
  --border: rgba(23, 21, 15, 0.08);
  --border-strong: rgba(23, 21, 15, 0.16);
  --accent: #9c7430;
  --accent-ink: #ffffff;
  --accent-2: #7d5c24;
  --accent-grad: linear-gradient(135deg, #c9a45e, #9c7430 58%, #7a5822);
  --gold-text: linear-gradient(180deg, #8a6424 0%, #6b4c19 100%);
  --ivory-text: linear-gradient(180deg, #17150f 0%, #3a352b 100%);
  --good: #2f8a5b;
  --bad: #c2412d;
  --warn: #b3741a;
  --info: #3d6aa8;
  --glass: rgba(251, 250, 247, 0.78);
  --glass-top: rgba(251, 250, 247, 0.72);
  --surface-glass: rgba(255, 255, 255, 0.9);
  --specular: rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 1px 2px rgba(23, 21, 15, 0.05);
  --shadow-md: 0 1px 2px rgba(23, 21, 15, 0.04), 0 16px 40px -18px rgba(23, 21, 15, 0.18);
  --shadow-lg: 0 24px 70px -20px rgba(23, 21, 15, 0.25);
  --focus: 0 0 0 3px rgba(156, 116, 48, 0.25);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  letter-spacing: -0.011em;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fondo: trama de puntos sobre halos de luz ambiental, en una capa
   compuesta propia (translateZ) para que el scroll no la repinte. */
/* Fondo 3D (three.js): océano de partículas bajo toda la interfaz. */
#bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  transform: translateZ(0);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px),
    radial-gradient(42rem 32rem at 10% -6%, rgba(10, 132, 255, 0.13), transparent),
    radial-gradient(38rem 30rem at 92% 14%, rgba(94, 92, 230, 0.11), transparent),
    radial-gradient(46rem 36rem at 45% 112%, rgba(100, 210, 255, 0.08), transparent);
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%;
}
:root[data-theme="light"] body::before {
  background-image:
    radial-gradient(rgba(29, 29, 31, 0.055) 1px, transparent 1.4px),
    radial-gradient(42rem 32rem at 10% -6%, rgba(0, 113, 227, 0.09), transparent),
    radial-gradient(38rem 30rem at 92% 14%, rgba(94, 92, 230, 0.08), transparent),
    radial-gradient(46rem 36rem at 45% 112%, rgba(100, 210, 255, 0.09), transparent);
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%;
}

h1, h2, h3 { letter-spacing: -0.022em; font-weight: 650; }

button, input, select { font: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

input, select {
  min-width: 0;
  height: 40px;
  border: 1px solid var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 62%, transparent);
  border-radius: var(--r-md);
  padding: 0 12px;
  outline: none;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
input:hover, select:hover { border-color: var(--border-strong); }
input:focus, select:focus { border-color: var(--accent); box-shadow: var(--focus); }
input[type="checkbox"] {
  height: 18px;
  width: 18px;
  accent-color: var(--accent);
  border-radius: 6px;
}
input[type="color"] { padding: 4px; width: 64px; cursor: pointer; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--panel-3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Movimiento ---------- */
/* Entrada con desenfoque (estilo anuncios de Apple): el contenido
   "enfoca" a la vez que sube. */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes titleIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Usa las propiedades sueltas scale/opacity para no pisar el
   transform: rotate(-90deg) del donut. */
@keyframes donutPop {
  from { scale: 0.72; opacity: 0; }
  to { scale: 1; opacity: 1; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes shine {
  to { transform: translateX(130%); }
}
@keyframes shimmer {
  0% { background-position: 130% 0; }
  60%, 100% { background-position: -130% 0; }
}
@keyframes menuIn {
  from { opacity: 0; transform: scale(0.9) translateY(-6px); filter: blur(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes growX {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes growY {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* La entrada de paneles la orquesta anime.js (fx.js) con stagger;
   estas reglas quedan como base estática si fx.js no cargase. */
.panel, .metric, .mini-card { opacity: 1; }
.bar-row i, .progress-track span {
  transform-origin: 0 50%;
  animation: growX 0.8s var(--ease-out) backwards;
  animation-delay: 0.2s;
}
.line-chart .line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.2s var(--ease-out) 0.2s forwards;
}
.line-chart .area, .line-chart .dot, .line-chart .dot-halo {
  animation: fadeIn 0.9s ease 0.5s both;
}
.topbar h1 { animation: titleIn 0.5s var(--ease) backwards; }
.topbar p { animation: titleIn 0.5s var(--ease) 0.07s backwards; }
.donut { animation: donutPop 0.8s var(--ease) 0.12s backwards; }
.no-anim .panel, .no-anim .metric, .no-anim .mini-card,
.no-anim .bar-row i, .no-anim .progress-track span,
.no-anim .cf-bars i, .no-anim .line-chart .area,
.no-anim .line-chart .dot, .no-anim .line-chart .dot-halo,
.no-anim .topbar h1, .no-anim .topbar p,
.no-anim .donut, .no-anim .sub-card { animation: none; }
.no-anim .line-chart .line { animation: none; stroke-dashoffset: 0; }

/* ---------- Autenticación ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 520px) 1fr;
}
.auth-panel {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(1.5);
  -webkit-backdrop-filter: blur(34px) saturate(1.5);
  border-right: 1px solid var(--border);
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, #4da3ff, #0a6bf2 55%, #5e5ce6 125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(10, 132, 255, 0.35);
}
.brand-mark svg { display: block; }
/* Titular con brillo que recorre el degradado, como los claims de Apple. */
.auth h1 {
  margin: 12px 0 0;
  max-width: 14ch;
  font-size: 48px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--text) 38%, var(--accent) 50%, var(--accent-2) 57%, var(--text) 70%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 6.5s var(--ease-out) 0.8s infinite;
}
.auth p { color: var(--muted); max-width: 520px; line-height: 1.6; margin: 0; }
.auth-form, .stack-form { display: grid; gap: 14px; }
.auth-form label, .stack-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.auth-links { display: grid; gap: 10px; justify-items: start; }
.auth-preview {
  padding: 50px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 24% 10%, rgba(10, 132, 255, 0.12), transparent 30rem),
    radial-gradient(circle at 85% 80%, rgba(94, 92, 230, 0.1), transparent 28rem);
}
.preview-grid {
  width: min(780px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.35));
}
/* Las tarjetas de la portada flotan con desfases distintos (la entrada
   "rise" termina antes de que empiece el vaivén). */
.preview-grid > :nth-child(odd) {
  animation: rise 0.55s var(--ease) backwards, floatY 7s ease-in-out 1.4s infinite;
}
.preview-grid > :nth-child(even) {
  animation: rise 0.55s var(--ease) backwards, floatY 8.5s ease-in-out 2.1s infinite;
}

/* ---------- Superficies ---------- */
/* Sin backdrop-filter en las tarjetas: con decenas de paneles el blur
   hunde el scroll a ~30fps. El cristal de verdad queda reservado a
   sidebar, topbar, modales y toasts (pocos elementos). */
.mini-card, .panel, .metric {
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-md);
  transition: border-color 220ms var(--ease-out);
}
.panel, .metric, .mini-card { position: relative; min-width: 0; }
.panel:hover, .metric:hover, .mini-card:hover { border-color: var(--border-strong); }
/* Brillo que sigue al puntero (las coordenadas --mx/--my las fija fx.js). */
.panel::after, .metric::after, .mini-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms var(--ease-out);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}
.panel:hover::after, .metric:hover::after, .mini-card:hover::after { opacity: 1; }
.mini-card { min-height: 170px; padding: 20px; display: grid; place-items: center; }
.mini-card.wide { grid-column: span 2; }
.mini-card .donut { width: 118px; height: 118px; }
.preview-grid .metric strong { font-size: clamp(18px, 2.4vw, 26px); }
.list-preview { display: grid; place-items: stretch; align-content: center; gap: 18px; }
.list-preview span { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---------- Botones ---------- */
.primary, .ghost, .danger, .link-button, .icon-button {
  border: 0;
  border-radius: var(--r-full);
  min-height: 40px;
  padding: 0 18px;
  color: var(--text);
  background: transparent;
  font-weight: 550;
}
.primary {
  position: relative;
  overflow: hidden;
  color: var(--accent-ink);
  font-weight: 650;
  background: var(--accent-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent);
}
.primary:hover { filter: brightness(1.06); }
/* Destello especular que barre el botón al pasar el ratón. */
.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.35) 50%, transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}
.primary:hover::after { animation: shine 0.85s var(--ease-out); }
.ghost {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--text);
}
.ghost:hover { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.ghost.small { min-height: 30px; padding: 0 12px; font-size: 13px; }
.danger { color: #fff; background: var(--bad); font-weight: 600; }
.danger:hover { filter: brightness(1.08); }
.link-button { justify-self: start; color: var(--accent); padding: 0; min-height: 28px; font-weight: 550; }
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.icon-button {
  width: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.icon-button:hover { background: color-mix(in srgb, var(--muted) 20%, transparent); }
.icon-button.subtle { width: 30px; min-height: 30px; background: transparent; color: var(--muted); font-size: 18px; border-radius: var(--r-sm); }
.icon-button.subtle:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
/* Editar no es una acción destructiva: no debe teñirse de rojo al pasar. */
.icon-button.subtle[data-edit-tx] { font-size: 15px; }
.icon-button.subtle[data-edit-tx]:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.row-actions { display: flex; gap: 2px; }
.primary, .ghost, .danger, .link-button, .icon-button, .sidebar nav button {
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms var(--ease-out);
}
.primary:active, .ghost:active, .danger:active, .icon-button:active { transform: scale(0.96); }
button:focus-visible, input:focus-visible, select:focus-visible { box-shadow: var(--focus); outline: none; }
.form-error { color: var(--bad); font-size: 13px; min-height: 1em; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Estructura general ---------- */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 14px 18px;
  border-right: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar .brand-lockup { padding: 0 10px; }
.sidebar nav { display: grid; gap: 3px; }
.sidebar nav button {
  width: 100%;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--muted);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  text-align: left;
  font-weight: 500;
}
.sidebar nav button:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.sidebar nav button.active {
  color: var(--text);
  font-weight: 600;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mod) 20%, transparent),
    color-mix(in srgb, var(--mod) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod) 24%, transparent);
}
.sidebar nav button.active svg { color: var(--mod); }
.sidebar b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  padding: 0 6px;
}
.privacy-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.privacy-note svg { flex-shrink: 0; color: var(--accent); }
.user-chip {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.user-chip span { overflow: hidden; text-overflow: ellipsis; }
.user-chip button {
  border: 0;
  background: transparent;
  color: var(--accent);
  justify-self: start;
  padding: 0;
  cursor: pointer;
  font-weight: 550;
}
.user-chip button:hover { text-decoration: underline; text-underline-offset: 3px; }

.workspace { padding: 0 32px 36px; min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 -32px 26px;
  padding: 20px 32px 16px;
  background: var(--glass-top);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.topbar > div:nth-child(2) { margin-right: auto; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.menu { display: none; }

.month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.month-nav strong {
  min-width: 128px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
}
.month-nav .icon-button { width: 28px; min-height: 28px; font-size: 17px; background: transparent; border-radius: 999px; }
.month-nav .icon-button:hover { background: color-mix(in srgb, var(--muted) 18%, transparent); }

.page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-grid .span-2 { grid-column: span 2; }
/* A ancho completo, las cuatro tarjetas KPI caen en una fila exacta. */
.dashboard-grid .import-card { grid-column: 1 / -1; }
.panel { padding: 22px; }
.span-2 { grid-column: span 2; }
.full { grid-column: 1 / -1; }
.full-screen-panel { min-height: calc(100vh - 132px); }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.section-header h2 { margin: 0; font-size: 16px; font-weight: 650; }
.muted { color: var(--muted); line-height: 1.6; }
.empty {
  text-align: center;
  padding: 26px 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  margin: 0;
  font-size: 14px;
}

.metric {
  min-height: 118px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  overflow: hidden;
}
.metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.metric strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric.good strong, .money.good { color: var(--good); }
.metric.bad strong, .money.bad { color: var(--bad); }

/* ---------- Tarjetas KPI ----------
   Tilt en perspectiva, filo de luz y brillo anclados al puntero: la
   técnica de "Glare Cards" (21st.dev), que allí es React + framer-motion
   y aquí son dos variables CSS que fx.js escribe en pointermove. */
.metric.link { cursor: pointer; }
.metric.link {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
  transition: transform 520ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
/* Mientras el puntero está encima el seguimiento es casi directo; al
   salir, fx.js quita .tilting y la transición larga devuelve la tarjeta. */
.metric.link.tilting { transition: transform 110ms linear, border-color 180ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.metric.link:hover { border-color: var(--border-strong); box-shadow: inset 0 1px 0 var(--specular), var(--shadow-lg); }

/* Filo de luz: un cono de color anclado al puntero, recortado al borde
   con una máscara de 1px. */
.metric.glare::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  background: conic-gradient(from -0.25turn at var(--mx, 50%) var(--my, 50%),
    transparent 0 7%,
    color-mix(in srgb, var(--accent) 88%, white) 20%,
    transparent 33% 100%);
  -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;
}
.metric.glare:hover::before { opacity: 0.9; }

.metric-top { display: flex; align-items: center; gap: 9px; }
.metric-top > span { flex: 1; min-width: 0; }
.metric-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.metric-icon svg { width: 15px; height: 15px; }
.metric.bad .metric-icon {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 24%, transparent);
}

/* Píldora de variación respecto al mes anterior. */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 3px 8px 3px 5px;
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}
.delta.up { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.delta.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.delta.flat { color: var(--muted); background: color-mix(in srgb, var(--muted) 15%, transparent); padding: 3px 9px; }

/* Mini-gráfica: sale a sangre por los tres lados de la tarjeta. */
.metric.has-spark { min-height: 174px; padding-bottom: 0; }
.metric-spark { margin: 14px -20px 0; height: 52px; }
.spark { display: block; width: 100%; height: 100%; color: var(--accent); }
.spark.good { color: var(--good); }
.spark.bad { color: var(--bad); }
.spark-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-dot { fill: currentColor; transform-box: fill-box; transform-origin: center; }

/* ---------- Importador ---------- */
.import-card {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 0.9fr);
  gap: 18px;
  align-items: center;
}
.import-card h2 { margin: 0 0 8px; font-size: 17px; }
.import-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.dropzone {
  min-height: 128px;
  border: 1.5px dashed var(--border-strong);
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.dropzone.over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  transform: scale(1.01);
}
.dropzone.compact { min-height: 110px; }
.drop-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.importer-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.tx-actions { display: grid; gap: 10px; align-content: center; }
.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Tabla de transacciones ---------- */
.filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.table-wrap { overflow: auto; margin: 0 -8px; }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th, td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
th:first-child, td:first-child { padding-left: 14px; }
th:last-child, td:last-child { padding-right: 14px; }
th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom-color: var(--border-strong);
}
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color 140ms var(--ease-out); }
th.sortable:hover { color: var(--text); }
th.sorted { color: var(--accent); }
th .sort-arrow { font-style: normal; font-size: 9px; margin-left: 5px; }
tbody tr { transition: background-color 140ms var(--ease-out); }
tbody tr:hover { background: color-mix(in srgb, var(--muted) 7%, transparent); }
tbody tr:last-child td { border-bottom: 0; }
td { font-size: 14px; }
td strong { font-weight: 600; }
td small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; text-transform: capitalize; }
td input:not([type="checkbox"]), td select { height: 34px; width: 100%; min-width: 110px; border-radius: var(--r-sm); background: transparent; }
td input:not([type="checkbox"]):hover, td select:hover { background: var(--panel-2); }
.money { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.pagination { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; }

/* ---------- Pills y formas ---------- */
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat) 15%, transparent);
  color: var(--text);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
}
.category-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--cat) 25%, transparent);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stack-form label small { font-weight: 450; opacity: 0.75; }
.stack-form .check { display: flex; align-items: center; gap: 10px; font-weight: 550; }
.hint-box {
  margin-top: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-radius: var(--r-md);
  display: grid;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Tooltip flotante ---------- */
#chart-tip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px)) scale(0.96);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
#chart-tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 12px)) scale(1); }
#chart-tip strong { display: block; font-variant-numeric: tabular-nums; font-size: 14px; }
#chart-tip small { color: var(--muted); display: block; margin-bottom: 1px; }

/* ---------- Gráficos ---------- */
.bar-chart { display: grid; gap: 14px; }
.bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 96px;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.bar-row.clickable { cursor: pointer; }
.bar-row.clickable:hover span { color: var(--text); }
.bar-row.clickable:hover i { filter: brightness(1.18); }
.bar-row span { transition: color 140ms var(--ease-out); }
.bar-row div {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  overflow: hidden;
}
.bar-row i { display: block; height: 100%; border-radius: inherit; transition: filter 140ms var(--ease-out); }
.bar-row strong {
  color: var(--text);
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.line-chart { width: 100%; height: 240px; display: block; cursor: crosshair; }
.line-chart .lc-cursor {
  stroke: var(--border-strong);
  stroke-dasharray: 4 4;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transition: opacity 120ms var(--ease-out);
}
.line-chart .lc-dot {
  fill: var(--accent);
  stroke: var(--surface-glass);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.line-chart.hover .lc-cursor, .line-chart.hover .lc-dot { opacity: 1; }
.line-chart .line {
  fill: none;
  stroke: var(--chart, var(--accent));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-chart .grid { stroke: var(--border); stroke-width: 1; }
.line-chart .axis { fill: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.line-chart .dot { fill: var(--chart, var(--accent)); }
.line-chart .dot-halo { fill: color-mix(in srgb, var(--chart, var(--accent)) 22%, transparent); }
.line-chart .lc-target { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: 0.8; }
.line-chart .lc-raw { stroke: color-mix(in srgb, var(--chart, var(--accent)) 55%, var(--muted)); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.55; }
.mini-card .line-chart { height: 130px; }

.donut { width: 150px; height: 150px; transform: rotate(-90deg); overflow: visible; }
.donut circle[data-seg] {
  cursor: pointer;
  transition: opacity 160ms var(--ease-out), stroke-width 160ms var(--ease-out);
}
.donut circle[data-seg].dim { opacity: 0.3; }
.donut circle[data-seg].hot { stroke-width: 5.8; }
.donut-total { font-size: 4.8px; font-weight: 700; fill: var(--text); letter-spacing: -0.02em; }
.donut-sub { font-size: 2.4px; font-weight: 650; fill: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
.donut-legend { display: grid; justify-items: center; gap: 20px; }
.legend-rows { width: 100%; display: grid; gap: 4px; }
.legend-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  transition: background-color 140ms var(--ease-out);
}
.legend-row { cursor: pointer; }
.legend-row:hover, .legend-row.hot { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.legend-pct { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.legend-row strong { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cashflow {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 190px;
  padding-top: 8px;
}
.cf-col { flex: 1; display: grid; gap: 10px; height: 100%; grid-template-rows: 1fr auto; cursor: pointer; }
.cf-col:hover .cf-bars i { filter: brightness(1.18); }
.cf-col:hover span { color: var(--text); }
.cf-bars { display: flex; gap: 5px; align-items: flex-end; justify-content: center; height: 100%; }
.cf-bars i {
  display: block;
  width: clamp(10px, 32%, 24px);
  border-radius: 6px;
  transform-origin: bottom;
  animation: growY 0.7s var(--ease-out) backwards;
  transition: filter 140ms var(--ease-out);
}
.cf-bars .in { background: var(--good); animation-delay: 0.15s; }
.cf-bars .out { background: color-mix(in srgb, var(--bad) 80%, var(--panel)); animation-delay: 0.25s; }
.cf-col span { text-align: center; font-size: 12px; color: var(--muted); text-transform: capitalize; font-weight: 500; }
.cf-legend { display: flex; gap: 18px; margin-top: 14px; font-size: 13px; color: var(--muted); font-weight: 500; }
.cf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cf-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cf-legend .dot.in { background: var(--good); }
.cf-legend .dot.out { background: var(--bad); }

.progress { display: flex; align-items: center; gap: 12px; }
.progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  overflow: hidden;
}
.progress-track span { display: block; height: 100%; border-radius: inherit; }
.progress.green .progress-track span { background: var(--good); }
.progress.yellow .progress-track span { background: var(--warn); }
.progress.red .progress-track span { background: var(--bad); }
.progress em {
  font-style: normal;
  font-size: 12px;
  font-weight: 650;
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.progress.green em { color: var(--good); }
.progress.yellow em { color: var(--warn); }
.progress.red em { color: var(--bad); }

/* ---------- Listas (presupuestos, reglas, entidades) ---------- */
.budget-list, .rule-list, .card-list, .alerts-list, .alert-stack { display: grid; gap: 10px; }
.budget-row, .rule-row, .entity-card {
  display: grid;
  grid-template-columns: 1.4fr auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.budget-row:hover, .rule-row:hover, .entity-card:hover, .alert-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.budget-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.budget-row strong { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.budget-row .inline-amount { width: 100px; height: 32px; text-align: right; border-radius: var(--r-sm); }
.budget-mini { display: grid; gap: 9px; }
.budget-mini .category-pill { justify-self: start; }
.budget-list.compact { gap: 18px; }
.rule-row { grid-template-columns: 28px 1fr auto auto auto; }
.rule-row b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.rule-row span { color: var(--muted); font-size: 13px; text-transform: capitalize; }
.entity-card { grid-template-columns: auto 1fr auto auto; }
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), var(--shadow-sm);
}
.entity-card small { display: block; color: var(--muted); margin-top: 2px; font-size: 12.5px; }
.balance-edit { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 550; }
.balance-edit input { width: 120px; height: 34px; text-align: right; border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }

/* ---------- Alertas ---------- */
.alert-card, .mini-alert {
  border-radius: var(--r-md);
  background: var(--panel-2);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.alert-card::before, .mini-alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--warn);
}
.alert-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.alert-card strong, .mini-alert strong { font-size: 14px; font-weight: 650; }
.alert-card p, .mini-alert span { color: var(--muted); margin: 5px 0; line-height: 1.5; font-size: 13.5px; }
.alert-card small { color: var(--muted); font-size: 12px; }
.alert-card.danger::before, .mini-alert.danger::before { background: var(--bad); }
.alert-card.warning::before, .mini-alert.warning::before { background: var(--warn); }
.alert-card.info::before, .mini-alert.info::before { background: var(--info); }
.alert-card.read { opacity: 0.5; }
.alert-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mini-alert { padding: 12px 14px; }
.mini-alert strong, .mini-alert span { display: block; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn 0.2s ease both;
}
.modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 26px;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  animation: sheetIn 0.42s var(--ease) both;
}

/* ---------- Coach financiero ---------- */
.coach-card { gap: 4px; }
.coach-card strong small { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.coach-card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.mini-alert.good::before { background: var(--good); }
.coach-chat-panel { display: flex; flex-direction: column; }
.chat-log {
  display: grid;
  gap: 10px;
  align-content: start;
  height: 300px;
  overflow-y: auto;
  padding: 4px 6px 4px 2px;
  margin-bottom: 12px;
}
.chat-msg { display: flex; gap: 8px; align-items: flex-end; }
.chat-msg.user { justify-content: flex-end; }
.chat-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #4da3ff, #0a6bf2 60%, #5e5ce6 130%);
  color: #fff;
  font-size: 12px;
}
/* La burbuja nueva la anima fx.js (solo la última, no todo el historial). */
.bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
}
.chat-msg.coach .bubble {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-bottom-left-radius: 6px;
}
.chat-msg.user .bubble {
  background: var(--accent);
  color: var(--accent-ink);
  border-bottom-right-radius: 6px;
  font-weight: 500;
}
.bubble strong { font-variant-numeric: tabular-nums; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  border: 0;
  border-radius: var(--r-full);
  min-height: 30px;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 13%, transparent);
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chip:active { transform: scale(0.96); }
.chat-form { display: flex; gap: 10px; margin-top: auto; }
.chat-form input { flex: 1; border-radius: var(--r-full); padding: 0 16px; }
.typing { display: inline-flex; gap: 4px; padding: 3px 2px; }
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: typingDot 1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Estado de la IA local ---------- */
.section-header .ai-chip { margin-right: auto; }
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 11%, transparent);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.ai-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
}
.ai-chip .dot.ok {
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent);
}
.ai-chip .dot.off { background: var(--muted); box-shadow: none; }
.ai-note { color: var(--muted); font-size: 11.5px; display: inline-block; margin-top: 4px; }
.ai-intro { margin: -4px 0 14px; font-size: 13.5px; }
.ai-status { font-size: 12.5px; align-self: center; }

/* ---------- Menú de opciones del coach ---------- */
.coach-menu-wrap { position: relative; }
.menu-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  min-width: 232px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: menuIn 0.24s var(--ease) both;
}
.menu-pop[hidden] { display: none; }
.menu-pop button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 8px 11px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 550;
  text-align: left;
  transition: background-color 140ms var(--ease-out);
}
.menu-pop button svg { flex-shrink: 0; color: var(--muted); }
.menu-pop button:hover { background: color-mix(in srgb, var(--muted) 14%, transparent); }
.menu-pop button.danger-item, .menu-pop button.danger-item svg { color: var(--bad); }
.menu-pop button.danger-item:hover { background: color-mix(in srgb, var(--bad) 13%, transparent); }

/* ---------- Suscripciones ---------- */
.sub-list { display: grid; gap: 10px; }
.sub-card, .detect-row {
  display: grid;
  grid-template-columns: auto 1.35fr 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), opacity 200ms var(--ease-out), filter 200ms var(--ease-out);
}
.sub-card { animation: rise 0.5s var(--ease) backwards; }
.sub-card:hover, .detect-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.sub-card.paused { opacity: 0.55; filter: saturate(0.4); }
.detect-row { grid-template-columns: auto 1fr auto auto; border-style: dashed; border-color: var(--border-strong); background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.detect-intro { margin: -6px 0 14px; font-size: 13.5px; }
.sub-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px color-mix(in srgb, var(--c) 35%, transparent);
}
.sub-info { min-width: 0; }
.sub-info strong {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-info small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.sub-next { display: grid; gap: 3px; justify-items: start; color: var(--muted); font-size: 12px; }
.sub-due {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.sub-due.soon { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.sub-amount {
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.sub-amount small { color: var(--muted); font-weight: 600; font-size: 12px; }
.sub-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- Modal de revisión ---------- */
.review-modal { width: min(760px, 100%); }
.review-intro { margin: 0 0 14px; font-size: 13.5px; }
.review-list {
  display: grid;
  gap: 8px;
  max-height: 52vh;
  overflow: auto;
  margin-bottom: 18px;
  padding-right: 4px;
}
.review-row {
  display: grid;
  grid-template-columns: auto 1fr auto minmax(160px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
  transition: opacity 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.review-row:hover { border-color: var(--border-strong); }
.review-row:has(input:not(:checked)) { opacity: 0.45; }
.review-info { min-width: 0; }
.review-info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-info small { color: var(--muted); font-size: 12px; }
.review-row select { height: 32px; border-radius: var(--r-sm); font-size: 13px; }
.review-source {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.review-source.regla { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.review-source.historial { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.review-source.conocido { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.review-source.traspaso { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
/* Bloque de traspasos detectados dentro del modal de revision. */
.review-transfers { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.review-transfers h3 { margin: 0 0 4px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.review-transfers p { margin: 0 0 10px; font-size: 12.5px; }
.review-transfers .review-row { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 6px; }
/* Etiqueta de traspaso en la tabla de movimientos. */
.tx-transfer { color: var(--warn); }
.review-source.ia {
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, transparent), color-mix(in srgb, var(--accent-2) 78%, transparent));
}
.review-ai-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 14px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.review-ai-note.failed { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.spinner.small { width: 16px; height: 16px; border-width: 2px; flex-shrink: 0; }
.review-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Toasts ---------- */
#toast-root {
  position: fixed;
  bottom: var(--toast-bottom, 24px);
  right: 24px;
  z-index: 60;
  display: grid;
  gap: 10px;
  justify-items: end;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 16px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 550;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--shadow-md);
  animation: sheetIn 0.4s var(--ease) both;
  transition: opacity 0.4s ease, transform 0.4s var(--ease);
}
.toast::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  flex-shrink: 0;
}
.toast.bad::before { background: var(--bad); }
.toast.hide { opacity: 0; transform: translateY(10px) scale(0.97) !important; }
/* Cuando anime.js gestiona la entrada, la animación CSS se apaga. */
.toast.js-anim { animation: none; }

/* ---------- Modal de confirmación (sustituye a confirm()) ---------- */
.confirm-overlay { z-index: 70; }
.confirm-modal {
  width: min(420px, 100%);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.confirm-modal h3 { margin: 10px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.confirm-modal p { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 34ch; }
.confirm-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--warn) 6%, transparent);
}
.confirm-icon.danger {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--bad) 6%, transparent);
}
.confirm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.confirm-actions button { min-width: 128px; }

/* ---------- Zona de riesgo ---------- */
.danger-zone { border-color: color-mix(in srgb, var(--bad) 30%, var(--border)); }
.danger-zone .section-header h2 { color: var(--bad); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid .import-card, .dashboard-grid .span-2 { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    z-index: 30;
    width: 280px;
    transform: translateX(-105%);
    transition: transform 0.32s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .menu { display: inline-grid; }
  .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .importer-row { grid-template-columns: 1fr; }
  .tx-actions { grid-auto-flow: column; justify-content: start; }
}

@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; }
  .auth-panel { padding: 32px 22px; }
  .auth h1 { font-size: 36px; }
  .auth-preview { display: none; }
  .workspace { padding: 0 16px 24px; }
  .topbar { align-items: flex-start; flex-wrap: wrap; margin: 0 -16px 18px; padding: 14px 16px 12px; }
  .topbar h1 { font-size: 22px; }
  .topbar p { display: none; }
  .top-actions { width: 100%; justify-content: space-between; }
  .page-grid, .dashboard-grid, .budget-grid { grid-template-columns: 1fr; }
  .span-2, .full, .import-card, .dashboard-grid .import-card, .dashboard-grid .span-2 { grid-column: auto; }
  .import-card { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .metric strong { font-size: 24px; }
  .bar-row { grid-template-columns: 94px 1fr; }
  .bar-row strong { grid-column: 2; text-align: left; }
  .budget-row, .rule-row, .entity-card, .alert-card { grid-template-columns: 1fr; align-items: stretch; }
  .sub-card, .detect-row { grid-template-columns: auto 1fr auto; }
  .sub-card .sub-next { display: none; }
  .sub-card .sub-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .review-row { grid-template-columns: auto 1fr auto; }
  .review-row select { grid-column: 2 / -1; }
  .cashflow { gap: 8px; height: 150px; }
  .line-chart { height: 200px; }
  .ai-chip span { display: none; }
  .ai-chip { padding: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .metric.link, .metric.link.tilting { transform: none; transition: border-color 180ms linear; }
  .metric.glare::before { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .line-chart .line { stroke-dashoffset: 0; }
}

/* ---------- Sincronización entre dispositivos ---------- */
.ai-chip .dot.bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }

.sync-pair {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
/* El QR se dibuja siempre sobre blanco: el modo oscuro invertiría el
   contraste y muchas cámaras dejarían de reconocerlo. */
.sync-qr {
  background: #fff;
  padding: 12px;
  border-radius: 14px;
  width: 208px;
  line-height: 0;
}
.sync-qr svg { display: block; width: 100%; height: auto; }
.sync-pair-help { display: grid; gap: 12px; align-content: start; }
.sync-pair-help p { margin: 0; font-size: 13.5px; }
.sync-pair-help label { display: grid; gap: 6px; font-size: 13px; font-weight: 550; }
.sync-pair-help input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.sync-pair-help input[readonly] { color: var(--muted); }
.sync-pair-help small { font-weight: 450; opacity: 0.75; }
.auth-note { margin-top: 18px; font-size: 12px; word-break: break-all; }

@media (max-width: 760px) {
  .sync-pair { grid-template-columns: 1fr; justify-items: center; }
  .sync-qr { width: min(240px, 70vw); }
  .sync-pair-help { width: 100%; }
  /* Este sí lleva sitio de sobra para el texto, al revés que el chip
     del Coach que vive apretado en la cabecera de sección. */
  .ai-chip.sync-chip span { display: inline; }
  /* Barra de inicio del iPhone: que el último botón no quede debajo. */
  .workspace { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- Informes ----------
   El selector de periodo manda sobre el resto: atajos para los casos de
   siempre y dos selectores de mes para cualquier otro. Un mes suelto es
   poner el mismo mes en los dos extremos, así que no hay dos modos. */
.report-toolbar { display: grid; gap: 16px; }
.report-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip.on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}
.report-custom { margin-left: 4px; color: var(--muted); font-size: 12.5px; font-weight: 550; }
/* Leerlo o verlo: mismo informe, dos formas de seguirlo. */
.report-mode {
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.report-mode button {
  min-height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.report-mode button:hover { color: var(--text); }
.report-mode button.on { color: var(--text); background: var(--panel); box-shadow: var(--shadow-sm); }

/* El informe en palabras: ancho de columna de lectura, no de tabla. */
.report-read .read-body { max-width: 68ch; }
.report-read h3 {
  margin: 26px 0 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.report-read h3:first-child { margin-top: 0; }
.report-read p { margin: 0 0 12px; color: var(--text); font-size: 15px; line-height: 1.65; }
.report-read strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.report-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.report-range label {
  display: grid;
  flex: 1 1 170px;
  max-width: 250px;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.report-out { margin-left: auto; justify-content: flex-end; }

.report-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.report-summary h2 { margin: 0 0 4px; font-size: 19px; }
.report-summary p { margin: 0; font-size: 13px; }
.report-warn { color: var(--warn); font-weight: 600; }
/* La conclusión del periodo en una frase: es lo primero que se busca al
   abrir un informe, antes que cualquier tabla. */
.report-verdict {
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 550;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.report-verdict.good { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.report-verdict.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.report-verdict strong { font-variant-numeric: tabular-nums; }

.table-note { margin: -8px 0 14px; font-size: 12.5px; }
.report-table { min-width: 560px; }
.report-table th.num, .report-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tr.clickable { cursor: pointer; }
.report-table tr.clickable:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.report-table td small { text-transform: none; }
.report-table .delta { cursor: inherit; }
.swatch.inline {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 3px;
  box-shadow: none;
}

/* Matriz categorías × meses: cada celda lleva el color de su categoría
   con la intensidad que le toca por importe, así que el mes en el que
   algo se dispara salta a la vista sin leer un solo número. */
.matrix-table th, .matrix-table td { padding: 9px 8px; font-size: 13px; white-space: nowrap; }
.matrix-table th b { display: block; font-size: 9px; font-weight: 600; opacity: 0.7; }
.matrix-table td.cell { border-radius: 6px; }
.matrix-table tbody tr:hover { background: none; }
.matrix-table .matrix-total td {
  border-bottom: 0;
  border-top: 1px solid var(--border-strong);
  color: var(--muted);
  font-weight: 650;
}
.report-flow { gap: 8px; }
.report-flow .cf-col span { font-size: 11.5px; }
.report-flow .cf-col span b { display: block; font-size: 9.5px; font-weight: 600; opacity: 0.7; }
.report-flow + .cf-legend .muted { margin-left: auto; font-weight: 450; }

/* Apartado de descarga: tres formatos, cada uno con lo que hace. Se
   explica para qué sirve cada uno porque la diferencia entre un PDF y
   un CSV no tiene por qué saberla nadie. */
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.download-opt {
  display: grid;
  grid-template-columns: 40px 1fr;
  /* La segunda fila se come el alto sobrante: así el botón cae al pie
     de la tarjeta y los tres quedan a la misma altura. */
  grid-template-rows: auto 1fr;
  gap: 12px 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  transition: border-color 160ms var(--ease-out);
}
.download-opt:hover { border-color: var(--border-strong); }
.download-opt .dl-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.download-opt .dl-icon svg { width: 19px; height: 19px; }
.download-opt > div > strong { display: block; margin-bottom: 5px; font-size: 14.5px; font-weight: 650; }
.download-opt p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.download-opt p strong { color: var(--text); font-weight: 650; }
.download-opt button { grid-column: 2; justify-self: start; align-self: end; margin-top: 10px; }

/* Al llegar desde el botón de arriba: un parpadeo del borde, o no se
   sabe adónde te ha llevado con el informe entero por medio. */
.report-download.just-landed { animation: landed 1.4s var(--ease-out); }
@keyframes landed {
  0%, 100% { box-shadow: inset 0 1px 0 var(--specular), var(--shadow-md); }
  25%, 65% { box-shadow: inset 0 1px 0 var(--specular), var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
}

/* Comentario del Coach: con su propio fondo y un filo de otro color,
   para que no se confunda con la narración, que son cuentas hechas en
   el equipo y no la opinión de un modelo. */
.report-ai-body { display: grid; gap: 12px; }
.report-ai-text {
  max-width: 72ch;
  padding: 16px 18px;
  border-left: 3px solid var(--accent-2);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  font-size: 14.5px;
  line-height: 1.7;
}
.report-ai-text strong { font-weight: 650; }
.report-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 12.5px; }
.report-ai-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; }
.report-ai-note { max-width: 72ch; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.report-ai-note.bad { color: var(--bad); }

/* Cabecera que solo existe en papel: sin barra lateral ni título de la
   app, un informe impreso sin periodo ni fecha no vale para nada. */
.print-head { display: none; }

@media (max-width: 1100px) {
  .report-range label { flex-basis: calc(50% - 6px); max-width: none; }
  .report-out { margin-left: 0; width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .report-range label { flex-basis: 100%; }
  .report-summary { display: grid; }
  .report-mode { margin-left: 0; width: 100%; }
  .report-mode button { flex: 1; }
  .report-read p { font-size: 14.5px; }
}

/* ---------- Impresión ----------
   Imprimir o guardar en PDF el informe que se está viendo: fuera los
   controles y la navegación, y paleta clara pase lo que pase (el tema
   oscuro en papel se come la tinta y no se lee). */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-soft: #ffffff;
    --panel: #ffffff;
    --panel-2: #ffffff;
    --panel-3: #f2f2f4;
    --text: #111111;
    --muted: #555555;
    --border: rgba(0, 0, 0, 0.14);
    --border-strong: rgba(0, 0, 0, 0.3);
    --glass: #ffffff;
    --glass-top: #ffffff;
    --surface-glass: #ffffff;
    --specular: transparent;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --good: #1a7f37;
    --bad: #c62828;
    --warn: #a15c00;
    --accent: #0b5ed7;
  }
  @page { margin: 12mm; }
  html, body { background: #ffffff; }
  /* Sin esto el navegador descarta los fondos y la matriz de calor, las
     píldoras de categoría y las barras salen en blanco. */
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before, #bg-fx, .sidebar, .topbar, #toast-root, #chart-tip,
  .report-toolbar, .modal-overlay, #fx-confirm { display: none !important; }
  * { animation: none !important; transition: none !important; }
  .app-shell { display: block; }
  .workspace { padding: 0; }
  .print-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    grid-column: 1 / -1;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid #111111;
    color: #444444;
    font-size: 12px;
  }
  .print-head strong { color: #111111; font-size: 16px; }
  .page-grid, .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .panel, .metric {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 12px 14px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    box-shadow: none;
  }
  .panel.full, .panel.span-2, .dashboard-grid .span-2 { grid-column: 1 / -1; }
  .metric, .metric.has-spark { min-height: 0; }
  .metric.link { transform: none; }
  .metric strong { font-size: 20px; }
  .metric-spark { display: none; }
  .panel::after, .metric::after, .metric.glare::before { display: none !important; }
  .section-header { margin-bottom: 10px; }
  .section-header h2 { font-size: 13px; }
  .section-header button { display: none; }
  .table-wrap { overflow: visible; margin: 0; }
  table { min-width: 0 !important; width: 100%; font-size: 10px; }
  th, td { padding: 5px 6px; }
  .cashflow { height: 130px; }
  .line-chart { max-height: 180px; }
  /* En papel no se pulsa nada: las instrucciones de uso sobran. */
  .report-flow + .cf-legend .muted { display: none; }
  /* La narración sí puede partirse entre páginas —no cabe en una— pero
     nunca justo después de un encabezado. */
  .report-read { break-inside: auto; page-break-inside: auto; }
  .report-read h3 { margin: 14px 0 5px; font-size: 10px; break-after: avoid; page-break-after: avoid; }
  .report-read p { margin-bottom: 7px; font-size: 11px; line-height: 1.5; }
  .report-read .read-body { max-width: none; }
  /* Los botones de descarga son pantalla, no informe. */
  .report-download { display: none !important; }
  /* El comentario del Coach solo va al papel si se ha pedido. */
  .report-ai:not(.has-text), .report-ai-actions, .report-ai-wait, .report-ai-note { display: none !important; }
  .report-ai-text { max-width: none; padding: 8px 10px; font-size: 11px; line-height: 1.5; }
}

/* ============================================================
   Apartados: Inicio, Finanzas, Hábitos, Tareas y Entreno.
   Cada apartado tiene su color (--mod), que tiñe la navegación, los
   anillos del día y los detalles de sus pantallas. Los botones
   principales van siempre en oro, el acento de la marca.
   ============================================================ */
:root {
  --mod-inicio: #d8b46a;
  --mod-finanzas: #6fbf9f;
  --mod-habitos: #a393e0;
  --mod-tareas: #86a8dc;
  --mod-entreno: #df8a62;
  --mod: var(--accent);
}
:root[data-theme="light"] {
  --mod-inicio: #9c7430;
  --mod-finanzas: #2f8266;
  --mod-habitos: #6a55b8;
  --mod-tareas: #3d68a8;
  --mod-entreno: #b8552c;
}
.mod-inicio { --mod: var(--mod-inicio); }
.mod-finanzas { --mod: var(--mod-finanzas); }
.mod-habitos { --mod: var(--mod-habitos); }
.mod-tareas { --mod: var(--mod-tareas); }
.mod-entreno { --mod: var(--mod-entreno); }

/* ---------- Barra lateral: selector de apartado ---------- */
.module-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}
.rail-btn {
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn:hover { color: var(--mod); background: color-mix(in srgb, var(--mod) 13%, transparent); }
.rail-btn:active { transform: scale(0.94); }
.rail-btn.active {
  color: #fff;
  background: var(--mod);
  box-shadow: 0 6px 16px -6px var(--mod), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.module-head { padding: 0 12px; margin: 2px 0 -8px; }
.module-head span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mod);
}
.sidebar-foot { margin-top: auto; display: grid; gap: 12px; }

/* ---------- Barra superior ---------- */
.topbar-title { min-width: 0; }
.eyebrow {
  display: block;
  margin-bottom: 1px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mod);
}
.search-button { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.search-button svg { width: 16px; height: 16px; flex-shrink: 0; }
.search-button span { color: var(--text); }
kbd {
  font: 600 11px/1 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  white-space: nowrap;
}

/* ---------- Pestañas de sección (barra lateral plegada) ---------- */
.section-chips { display: none; }
.section-chips .chip { flex-shrink: 0; }
.section-chips .chip.on {
  background: color-mix(in srgb, var(--mod) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod) 45%, transparent);
}
.section-chips .chip b {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 10.5px;
}
.bottom-bar { display: none; }

/* ---------- Hoy ---------- */
.today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.today-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.today-hello { min-width: 0; }
.today-date {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.today-hello h2 { margin: 4px 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.today-lines { margin: 0 0 14px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quick-actions button { display: inline-flex; align-items: center; gap: 7px; }
.quick-actions svg { width: 16px; height: 16px; }
.today-rings { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.day-rings { display: block; overflow: visible; }
.day-rings .ring-track { fill: none; stroke: color-mix(in srgb, var(--mod) 18%, transparent); }
.day-rings .ring-fill {
  fill: none;
  stroke: var(--mod);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}
.ring-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ring-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; font-size: 13.5px; min-width: 150px; }
.ring-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--mod); }
.ring-legend strong { font-variant-numeric: tabular-nums; }
.ring-legend small { color: var(--muted); font-weight: 500; }
.today-card { display: flex; flex-direction: column; }
.today-card-head h2 { display: flex; align-items: center; gap: 10px; }
.mod-dot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--mod);
  background: color-mix(in srgb, var(--mod) 16%, transparent);
}
.mod-dot svg { width: 16px; height: 16px; }
.today-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.today-stats > div {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--muted) 9%, transparent);
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  transition: background-color 160ms var(--ease-out);
}
.today-stats > div.link:hover { background: color-mix(in srgb, var(--mod) 12%, transparent); }
.today-stats span { font-size: 12px; font-weight: 600; color: var(--muted); }
.today-stats strong { font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.today-stats .delta { justify-self: start; }
.today-note { margin: 8px 0 0; font-size: 12px; }
.today-sub { margin: 18px 0 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.today-list li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.today-list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-list li small { color: var(--muted); }
.today-list li strong { font-variant-numeric: tabular-nums; }
.today-list li.link { cursor: pointer; }
.today-list li.link:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.sub-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--accent)); }
.today-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.today-soon { margin: 0 0 12px; }
[role="button"].link { cursor: pointer; }

/* ---------- Buscador (Ctrl+K) ---------- */
.palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 12vh 16px 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.14s var(--ease-out);
}
.palette {
  width: min(620px, 100%);
  max-height: 70vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  /* Opaco: con cualquier transparencia, lo que hay debajo (botones de
     colores, tablas) se transparentaba y competía con los resultados. */
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}
.palette-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.palette-input svg { color: var(--muted); flex-shrink: 0; }
.palette-input input,
.palette-input input:hover,
.palette-input input:focus {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
}
.palette-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.palette-group {
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.palette-item {
  width: 100%;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.palette-item svg { width: 17px; height: 17px; color: var(--muted); }
.palette-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.palette-item.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.palette-item.on svg { color: var(--accent); }
.palette-empty { margin: 0; padding: 18px; text-align: center; }

/* ---------- Apartados en tablet y móvil ---------- */
@media (max-width: 1280px) {
  .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  /* Fondo oscuro detrás del menú lateral abierto: deja claro que tocar
     fuera lo cierra. */
  .app-shell:has(.sidebar.open)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(0, 0, 0, 0.38);
    animation: fadeIn 0.2s var(--ease-out);
  }
  .section-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: -12px -32px 18px;
    padding: 2px 32px 4px;
    scrollbar-width: none;
  }
  .section-chips::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
  .section-chips { margin: -6px -16px 16px; padding: 2px 16px 4px; }
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--glass-top);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border-top: 1px solid var(--border);
  }
  .bottom-bar button {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 6px 0 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .bottom-bar button svg { width: 22px; height: 22px; }
  .bottom-bar button.active { color: var(--mod); }
  .bottom-bar button:active { transform: scale(0.94); }
  .workspace { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  :root { --toast-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .search-button { width: 40px; padding: 0; justify-content: center; }
  .search-button span, .search-button kbd { display: none; }
  .today-grid { grid-template-columns: 1fr; }
  .today-hero { flex-direction: column; align-items: stretch; gap: 18px; }
  .today-hello h2 { font-size: 26px; }
  .today-rings { justify-content: center; }
  .today-stats { grid-template-columns: 1fr; }
  .palette-overlay { padding-top: 10px; }
  .palette { max-height: 80vh; }
  /* Cabecera en una sola fila: título a la izquierda y buscar y tema
     como iconos a la derecha. Solo las páginas con controles propios
     (el selector de mes del dashboard) necesitan la segunda fila. */
  .topbar:not(.has-actions) { flex-wrap: nowrap; align-items: center; }
  .topbar:not(.has-actions) .top-actions { width: auto; margin-left: auto; flex-shrink: 0; }
  .topbar-title { min-width: 0; }
  .topbar-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .theme-button { width: 40px; padding: 0; justify-content: center; }
  .theme-button span { display: none; }
}
.theme-button { display: inline-flex; align-items: center; gap: 8px; }
.theme-button svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Al imprimir (informes) la navegación nueva tampoco sale. */
@media print {
  .bottom-bar, .section-chips, .search-button, .palette-overlay { display: none !important; }
}

/* ============================================================
   Gráficos de los apartados (charts.js): mapa de calor, calendario,
   columnas y anillos. Pintan con el color del hábito (--hc) si lo hay
   y, si no, con el del apartado (--mod).
   ============================================================ */
.heatmap-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: thin; }
.heatmap { display: block; max-width: none; }
.hm-label { fill: var(--muted); font-size: 9.5px; font-weight: 600; }
.hm-cell { fill: color-mix(in srgb, var(--muted) 15%, transparent); }
.hm-cell.l0 { fill: color-mix(in srgb, var(--muted) 15%, transparent); }
.hm-cell.l1 { fill: color-mix(in srgb, var(--hc, var(--mod)) 30%, transparent); }
.hm-cell.l2 { fill: color-mix(in srgb, var(--hc, var(--mod)) 52%, transparent); }
.hm-cell.l3 { fill: color-mix(in srgb, var(--hc, var(--mod)) 76%, transparent); }
.hm-cell.l4 { fill: var(--hc, var(--mod)); }
.hm-cell.miss { fill: color-mix(in srgb, var(--bad) 22%, color-mix(in srgb, var(--muted) 12%, transparent)); }
.hm-cell.bad { fill: var(--bad); }
.hm-cell.skip { fill: transparent; stroke: color-mix(in srgb, var(--hc, var(--mod)) 60%, transparent); stroke-width: 1.2; stroke-dasharray: 2 2; }
.hm-cell.paused { fill: color-mix(in srgb, var(--muted) 6%, transparent); }
.heatmap.clickable .hm-cell { cursor: pointer; }
.heatmap .hm-cell:hover { stroke: var(--text); stroke-width: 1.4; }
.hm-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.hm-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.hm-legend i.l0 { background: color-mix(in srgb, var(--muted) 15%, transparent); }
.hm-legend i.l1 { background: color-mix(in srgb, var(--hc, var(--mod)) 30%, transparent); }
.hm-legend i.l2 { background: color-mix(in srgb, var(--hc, var(--mod)) 52%, transparent); }
.hm-legend i.l3 { background: color-mix(in srgb, var(--hc, var(--mod)) 76%, transparent); }
.hm-legend i.l4 { background: var(--hc, var(--mod)); }
.hm-legend span { margin: 0 4px; }
.hm-note { margin: 10px 0 0; font-size: 12.5px; }

.mcal-head, .mcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.mcal-head span { text-align: center; color: var(--muted); font-size: 11px; font-weight: 650; padding-bottom: 4px; }
.mcal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.1;
  padding: 0;
  min-width: 0;
}
button.mcal-day { cursor: pointer; transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
button.mcal-day:hover { box-shadow: inset 0 0 0 1.5px var(--hc, var(--mod)); }
button.mcal-day:active { transform: scale(0.94); }
.mcal-day b { font-weight: 600; }
.mcal-day small { font-size: 9.5px; color: inherit; opacity: 0.85; }
.mcal-day.st-hecho { background: var(--hc, var(--mod)); color: var(--hc-ink, #fff); }
.mcal-day.st-parcial { background: color-mix(in srgb, var(--hc, var(--mod)) 40%, transparent); }
.mcal-day.st-fallo { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.mcal-day.st-pendiente { box-shadow: inset 0 0 0 1.5px var(--hc, var(--mod)); background: transparent; }
.mcal-day.st-saltado { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 14%, transparent) 0 4px, transparent 4px 8px); color: var(--muted); }
.mcal-day.st-libre { background: transparent; color: var(--muted); }
.mcal-day.st-pausado { background: color-mix(in srgb, var(--muted) 6%, transparent); color: var(--muted); }
.mcal-day.st-futuro, .mcal-day.st-antes { background: transparent; color: color-mix(in srgb, var(--muted) 55%, transparent); }
.mcal-blank { aspect-ratio: 1; }
.month-nav.small { padding: 2px; }

.vbars { display: flex; align-items: stretch; gap: 6px; height: 170px; }
.vbar { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 6px; }
.vbar-track {
  position: relative;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  overflow: hidden;
}
.vbar-track i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hc, var(--mod)) 75%, transparent);
  animation: growY 0.7s var(--ease-out) backwards;
  transform-origin: bottom;
}
.vbar.current .vbar-track i { background: var(--hc, var(--mod)); }
.vbar.empty .vbar-track { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 10%, transparent) 0 4px, transparent 4px 8px); }
.vbar span { text-align: center; color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.vbar.current span { color: var(--text); }
.vbars.has-target .vbar-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--t);
  border-top: 1.5px dashed color-mix(in srgb, var(--text) 45%, transparent);
}
/* Dentro de los apartados las barras van en paneles estrechos: la
   etiqueta y la cifra no pueden quedarse con todo el ancho. */
.hbars .bar-row { grid-template-columns: minmax(64px, 110px) minmax(40px, 1fr) 48px; gap: 10px; }

.mini-ring { display: block; overflow: visible; flex-shrink: 0; }
.mini-ring .ring-track { fill: none; stroke: color-mix(in srgb, var(--hc, var(--mod)) 18%, transparent); }
.mini-ring .ring-fill { fill: none; stroke: var(--hc, var(--mod)); stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease-out); }
.mini-ring text { fill: var(--text); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip small { color: var(--muted); font-weight: 600; margin-left: 2px; }
.chip.on small { color: var(--text); }

.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; }

/* ============================================================
   Hábitos
   ============================================================ */
.habit-page { --chart: var(--mod); }
.habit-detail { --chart: var(--hc); }
.habit-emoji {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--hc, var(--mod)) 16%, transparent);
  font-size: 19px;
  line-height: 1;
}
.habit-emoji.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; vertical-align: middle; }
.habit-emoji.big { width: 48px; height: 48px; border-radius: 14px; font-size: 26px; }
.habit-emoji.huge { width: 72px; height: 72px; border-radius: 22px; font-size: 40px; }
.habit-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.habit-text { display: grid; gap: 1px; min-width: 0; }
.habit-text strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-text small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-live { color: var(--hc, var(--mod)); font-variant-numeric: tabular-nums; }

/* Cabecera del día */
.habit-day-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.habit-day-nav { display: flex; align-items: center; gap: 10px; }
.habit-day-nav > div { display: grid; min-width: 150px; }
.habit-day-nav strong { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.habit-day-nav small { color: var(--muted); font-size: 12.5px; }
.habit-day-sum { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.habit-day-sum > div { display: grid; }
.habit-day-sum strong { font-size: 16px; }
.habit-day-sum small { color: var(--muted); font-size: 13px; }
.habit-day-head .primary { display: inline-flex; align-items: center; gap: 7px; }
.habit-day-head .primary svg { width: 16px; height: 16px; }

/* Lista del día */
.habit-list-panel { display: grid; gap: 18px; align-content: start; }
.habit-group { display: grid; gap: 6px; }
.habit-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.habit-group h3 small { margin-left: auto; font-size: 12px; letter-spacing: 0; text-transform: none; }
.habit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--muted) 7%, transparent);
  transition: background-color 180ms var(--ease-out);
}
.habit-row:hover { background: color-mix(in srgb, var(--hc) 9%, color-mix(in srgb, var(--muted) 7%, transparent)); }
.habit-row.hecho .habit-text strong { color: var(--muted); }
.habit-more { font-size: 18px; }

/* El botón grande: check, contador o temporizador */
.habit-check {
  --size: 42px;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--hc, var(--mod)) 70%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--hc, var(--mod)) 70%, transparent);
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.habit-check:hover { background: color-mix(in srgb, var(--hc, var(--mod)) 14%, transparent); }
.habit-check:active { transform: scale(0.9); }
.habit-check svg { position: relative; z-index: 1; opacity: 0.55; }
.habit-check.on {
  background: var(--hc, var(--mod));
  border-color: var(--hc, var(--mod));
  color: var(--hc-ink, #fff);
  box-shadow: 0 6px 18px -8px var(--hc, var(--mod));
  animation: checkPop 0.36s var(--ease-out);
}
.habit-check.on svg { opacity: 1; }
.habit-check.skipped { border-style: dashed; opacity: 0.6; }
/* Contador y temporizador: anillo de progreso con conic-gradient. */
.habit-check.counter, .habit-check.timer {
  border: 0;
  background: conic-gradient(var(--hc, var(--mod)) var(--p, 0%), color-mix(in srgb, var(--hc, var(--mod)) 18%, transparent) 0);
}
.habit-check.counter::before, .habit-check.timer::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--panel);
}
.habit-check.counter svg, .habit-check.timer svg { opacity: 0.9; color: var(--hc, var(--mod)); }
.habit-check.counter.on::before, .habit-check.timer.on::before { display: none; }
.habit-check.counter.on svg, .habit-check.timer.on svg { color: var(--hc-ink, #fff); }
.habit-check.timer.running { animation: timerPulse 1.6s ease-in-out infinite; }
@keyframes checkPop { 0% { transform: scale(0.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes timerPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hc, var(--mod)) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }

/* Tira de los últimos 7 días */
.habit-week { display: flex; gap: 4px; }
.hday {
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.hday:hover:not(:disabled) { transform: scale(1.12); }
.hday:disabled { cursor: default; opacity: 0.35; }
.hday.hecho { background: var(--hc, var(--mod)); color: var(--hc-ink, #fff); }
.hday.parcial { background: color-mix(in srgb, var(--hc, var(--mod)) 42%, transparent); color: var(--text); }
.hday.fallo { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad); }
.hday.pendiente { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hc, var(--mod)); color: var(--text); }
.hday.saltado { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 22%, transparent) 0 3px, transparent 3px 6px); }
.hday.libre { background: transparent; }
.hday.pausado { background: color-mix(in srgb, var(--muted) 6%, transparent); }

.habit-optional-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.habit-optional-toggle small { letter-spacing: 0; }
.habit-optional-toggle span { margin-left: auto; }
.habit-optional-toggle:hover { color: var(--text); }

/* Columna lateral */
.habit-side-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.quit-list { display: grid; gap: 8px; }
.quit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--hc) 9%, transparent);
}
.quit-card .ghost { grid-column: 1 / -1; justify-self: start; }
.quit-days { display: grid; justify-items: end; font-size: 26px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; color: var(--hc); }
.quit-days small { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.habit-week-big { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wk-day { display: grid; justify-items: center; gap: 4px; }
.wk-day span { font-size: 11px; font-weight: 650; color: var(--muted); }
.wk-day.today span { color: var(--mod); }
.habit-week-note { margin: 12px 0 0; font-size: 13px; }

/* Ideas / primeros pasos */
.habit-onboarding h2 { margin: 0 0 4px; }
.habit-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 16px 0; }
.habit-idea {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--muted) 5%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.habit-idea:hover { border-color: var(--hc); background: color-mix(in srgb, var(--hc) 8%, transparent); }
.habit-idea:active { transform: scale(0.98); }
.habit-idea > span:last-child { display: grid; min-width: 0; }
.habit-idea strong { font-size: 14px; font-weight: 600; }
.habit-idea small { color: var(--muted); font-size: 12px; }

/* Mis hábitos */
.habit-list-head, .habit-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.habit-toolbar p { margin: 0; font-size: 13px; }
.habit-list-head .primary { display: inline-flex; align-items: center; gap: 7px; }
.habit-list-head .primary svg { width: 16px; height: 16px; }
.habit-card { display: grid; gap: 14px; align-content: start; }
.habit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.habit-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.habit-card-stats > div, .habit-kpis > div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  min-width: 0;
}
.habit-card-stats span, .habit-kpis span { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.habit-card-stats strong { font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.habit-card-stats small { color: var(--muted); font-size: 12px; font-weight: 600; }
.habit-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.habit-order { margin-left: auto; display: flex; gap: 2px; }
.habit-order .icon-button.subtle:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.danger-text { color: var(--bad) !important; }

/* Ficha */
.habit-hero { display: grid; gap: 18px; }
.habit-hero-main { display: flex; align-items: flex-start; gap: 18px; }
.habit-hero-main > div:nth-child(2) { flex: 1; min-width: 0; }
.habit-hero h2 { margin: 2px 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.habit-hero p { margin: 0; }
.habit-why { margin-top: 8px !important; font-size: 15px; font-style: italic; color: var(--text); }
.habit-since { margin-top: 6px !important; font-size: 13px; }
.habit-hero-ring { display: grid; justify-items: center; gap: 6px; }
.habit-hero-ring small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.habit-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.habit-kpis strong { font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.milestones li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 6px 4px; color: var(--muted); font-size: 14px; }
.milestones li strong { font-weight: 600; }
.milestones li em { font-style: normal; font-size: 12px; font-weight: 600; }
.milestones li.got { color: var(--text); }
.milestones li.got em { color: var(--hc, var(--mod)); }
.habit-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.link-row {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.link-row:hover { background: color-mix(in srgb, var(--muted) 9%, transparent); }
.link-row small { color: var(--muted); font-size: 12px; }
.habit-danger { display: grid; gap: 4px; }

/* Estadísticas e informe */
/* La nota pequeña junto a una cifra ("de 21", "· la lista crece"). */
.metric strong small { font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.habit-table { min-width: 640px; }
.habit-table td { vertical-align: middle; }
.habit-table tr.clickable { cursor: pointer; }
.habit-bar { display: inline-block; width: 72px; height: 6px; margin-right: 10px; vertical-align: middle; border-radius: 99px; background: color-mix(in srgb, var(--muted) 14%, transparent); overflow: hidden; }
.habit-bar i { display: block; height: 100%; border-radius: inherit; }
.attention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.attention-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.attention-list li.link:hover { background: color-mix(in srgb, var(--muted) 9%, transparent); }
.attention-list li > span:last-child { display: grid; min-width: 0; }
.attention-list small { color: var(--muted); font-size: 12.5px; }
.habit-report-head h2 { margin: 0 0 4px; font-size: 20px; }
.habit-report-head p { margin: 0; font-size: 13px; }
.habit-page .report-read h3 { color: var(--mod); }

/* Formulario de hábito */
.habit-form-modal { width: min(620px, 100%); }
.hf-name-row { display: flex; align-items: flex-end; gap: 12px; }
.hf-name-row label { flex: 1; }
.hf-block { display: grid; gap: 8px; }
.hf-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; max-height: 128px; overflow-y: auto; padding: 2px; }
.emoji-grid button {
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.emoji-grid button:hover { background: color-mix(in srgb, var(--muted) 14%, transparent); }
.emoji-grid button.on { background: color-mix(in srgb, var(--hc) 24%, transparent); box-shadow: inset 0 0 0 2px var(--hc); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.swatches button:hover { transform: scale(1.1); }
.swatches button.on { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--c); }
.kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kind-opt {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.kind-opt strong { font-size: 14px; }
.kind-opt small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.kind-opt:hover { border-color: var(--hc); }
.kind-opt.on { border-color: var(--hc); background: color-mix(in srgb, var(--hc) 12%, transparent); box-shadow: inset 0 0 0 1px var(--hc); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 10%, transparent); }
.seg button {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--hc, var(--mod)) 40%, transparent); }
.weekday-pick { display: flex; gap: 6px; }
.weekday-pick button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.weekday-pick button.on { background: var(--hc); border-color: var(--hc); color: var(--hc-ink, #fff); }
.form-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack-form textarea, .wk-ex-notes textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.mood-pick { display: flex; gap: 6px; }
.mood-pick button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  font-size: 22px;
  cursor: pointer;
  filter: grayscale(0.7);
  opacity: 0.75;
  transition: transform 140ms var(--ease-out), filter 140ms var(--ease-out), opacity 140ms var(--ease-out);
}
.mood-pick button:hover { opacity: 1; filter: none; }
.mood-pick button.on { filter: none; opacity: 1; background: color-mix(in srgb, var(--hc, var(--mod)) 22%, transparent); transform: scale(1.06); }
.habit-day-modal h2 { display: flex; align-items: center; gap: 10px; }
.hd-date { margin: -8px 0 16px; }

/* Hábitos en la tarjeta de Inicio */
.today-habits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.today-habit { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.today-habit .habit-check { --size: 36px; }
.today-habit.hecho .habit-text strong { color: var(--muted); }

@media (max-width: 1100px) {
  .habit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .habit-day-head { align-items: stretch; }
  .habit-day-nav { justify-content: space-between; }
  .habit-day-head .primary { width: 100%; justify-content: center; }
  .habit-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .habit-row .habit-week { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; padding-left: 54px; }
  .habit-row .habit-more { grid-column: 3; grid-row: 1; }
  .habit-hero-main { flex-wrap: wrap; }
  .habit-hero-ring { width: 100%; }
  .kind-grid, .form-row.three { grid-template-columns: 1fr; }
  .habit-card-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .habit-card-stats strong { font-size: 15px; }
  .vbars { height: 140px; gap: 3px; }
  .vbar span { font-size: 9px; }
  .habit-order { margin-left: 0; }
}
@media print {
  .habit-check, .habit-week, .habit-more, .habit-card-actions, .habit-day-head .primary { display: none !important; }
  .report-read p { font-size: 11.5px; }
}

/* ============================================================
   Tareas
   ============================================================ */
.task-page { --chart: var(--mod); }
.primary.small, .danger.small { min-height: 32px; padding: 0 14px; font-size: 13px; }
.section-header h2 small { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, var(--mod)); flex-shrink: 0; }

/* Cabecera de Hoy */
/* El resumen arriba y la captura rápida debajo, a todo el ancho: es lo
   que más se usa y no puede quedarse en un hueco. */
.task-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.task-head-sum { display: flex; align-items: center; gap: 14px; }
.task-head-sum > div { display: grid; }
.task-head-sum strong { font-size: 16px; }
.task-head-sum small { color: var(--muted); font-size: 13px; }
.task-head-add { min-width: 0; }

/* Captura rápida */
.task-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--muted) 6%, transparent);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.task-quick:focus-within { border-color: var(--mod); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod) 22%, transparent); }
.task-quick input,
.task-quick input:hover,
.task-quick input:focus { flex: 1; min-width: 0; min-height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; color: var(--text); font: inherit; font-size: 14.5px; }
.tq-plus { color: var(--mod); display: grid; place-items: center; }
.tq-plus svg { width: 16px; height: 16px; }
.tq-help-btn { font-weight: 700; }
.tq-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; margin-top: 6px; }
.tq-preview:empty { display: none; }
.tq-title { font-size: 12.5px; font-weight: 600; margin-right: 2px; }
.tq-help { margin-top: 8px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--mod) 8%, transparent); font-size: 13px; }
.tq-help p { margin: 0 0 6px; }
.tq-help ul { margin: 0; padding-left: 18px; line-height: 1.7; color: var(--muted); }
.tq-help b { color: var(--text); }
.task-day .task-quick, .task-cal-side .task-quick, .wr-project-card .task-quick, .today-card .task-quick { margin-top: 10px; padding-top: 2px; padding-bottom: 2px; }
.task-day .task-quick .primary.small, .today-card .task-quick .primary.small { display: none; }

/* Etiquetas pequeñas de la fila */
.task-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-chip svg { width: 11px; height: 11px; flex-shrink: 0; }
.task-chip.due.vencida { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }
.task-chip.due.hoy { color: var(--good); background: color-mix(in srgb, var(--good) 13%, transparent); }
.task-chip.due.manana { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.task-chip.project i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); flex-shrink: 0; }
.task-chip.tag { color: var(--mod); background: color-mix(in srgb, var(--mod) 11%, transparent); }
.task-chip.prio.p1 { color: #ff453a; background: color-mix(in srgb, #ff453a 13%, transparent); }
.task-chip.prio.p2 { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 13%, transparent); }
.task-chip.prio.p3 { color: #0a84ff; background: color-mix(in srgb, #0a84ff 13%, transparent); }

/* Filas de tareas */
.task-list { display: grid; gap: 2px; }
.task-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border-radius: 12px;
  transition: background-color 150ms var(--ease-out), opacity 150ms var(--ease-out);
}
.task-row:hover { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.task-row[draggable="true"] { cursor: grab; }
.task-row.dragging, .kanban-card.dragging, .tcal-chip.dragging { opacity: 0.45; }
.task-row.drop-over { box-shadow: inset 0 2px 0 var(--mod); }
.task-row.doing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--mod);
}
.task-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--pc, var(--muted)) 80%, transparent);
  background: color-mix(in srgb, var(--pc, transparent) 10%, transparent);
  color: transparent;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.task-check:hover { color: var(--pc, var(--muted)); }
.task-check:active { transform: scale(0.88); }
.task-check.on { background: var(--pc, var(--mod)); border-color: var(--pc, var(--mod)); color: #fff; animation: checkPop 0.32s var(--ease-out); }
.task-main {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.task-title { font-size: 14.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.task-row.done .task-title, .kanban-card.done .task-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.task-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 140ms var(--ease-out); }
.task-row:hover .task-actions, .task-row:focus-within .task-actions, .task-actions.visible { opacity: 1; }
.task-actions .icon-button.subtle svg { width: 15px; height: 15px; }
.task-actions .icon-button.subtle:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.task-actions [data-task-trash]:hover { color: var(--bad); }
.task-list.compact .task-actions { display: none; }
.task-drop-end { height: 14px; border-radius: 8px; }
.task-drop-end.drop-over { background: color-mix(in srgb, var(--mod) 18%, transparent); }
.task-row.trashed { grid-template-columns: minmax(0, 1fr) auto; }
.task-row.trashed .task-title { color: var(--muted); }
body.task-dragging [data-drop] { transition: background-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out); }
[data-drop].drop-over { box-shadow: inset 0 0 0 2px var(--mod); background-color: color-mix(in srgb, var(--mod) 7%, transparent); }
.task-panel.overdue .section-header h2 { color: var(--bad); }
.task-next li { grid-template-columns: 1fr auto; }
/* La columna lateral ocupa dos filas: Vencidas y Hoy se apilan a su
   lado sin estirarse hasta su altura. */
.task-page .task-side { grid-row: span 2; }
.task-page > .task-panel { align-self: start; }

/* Próximos */
.task-upcoming .task-day { align-content: start; display: grid; }
.task-day.is-today { border-color: color-mix(in srgb, var(--mod) 45%, var(--border)); }

/* Listas */
.task-lists-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.task-lists-side { display: grid; gap: 2px; padding: 14px 10px; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
.task-listnav {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}
.task-listnav svg { width: 16px; height: 16px; }
.task-listnav .pdot { margin-left: 3px; }
.task-listnav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-listnav small { font-size: 12px; font-variant-numeric: tabular-nums; }
.task-listnav:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 10%, transparent); }
.task-listnav.on { color: var(--text); background: color-mix(in srgb, var(--mod) 16%, transparent); }
.task-listnav.on svg { color: var(--mod); }
.task-listnav-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 2px; padding: 0 10px; }
.task-listnav-head span { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.task-listnav-head .icon-button.subtle { width: 26px; min-height: 26px; }
.task-listnav-head .icon-button.subtle:hover { color: var(--mod); background: color-mix(in srgb, var(--mod) 12%, transparent); }
.task-listnav-empty { margin: 2px 10px 4px; font-size: 12px; }
.task-listnav-sep { height: 1px; margin: 10px 6px; background: var(--border); }
.task-lists-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
.task-list-head { flex-wrap: wrap; margin-bottom: 0; }
.task-list-head h2 { display: flex; align-items: center; gap: 8px; }
.task-list-head h2 svg { width: 18px; height: 18px; color: var(--mod); }
.task-list-head select { min-height: 32px; font-size: 13px; }
.task-list-picker { display: none; gap: 8px; align-items: center; min-width: 0; }
.task-list-picker select { flex: 1; min-width: 0; min-height: 38px; }
.task-list-picker .ghost.small { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.task-list-picker svg { width: 14px; height: 14px; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kanban-col { display: grid; gap: 8px; align-content: start; min-height: 160px; padding: 10px; border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 7%, transparent); }
.kanban-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
.kanban-head strong { font-size: 13px; }
.kanban-head small { color: var(--muted); font-weight: 600; }
.kanban-col.en_curso .kanban-head strong { color: var(--mod); }
.kanban-col.hecha .kanban-head strong { color: var(--good); }
.kanban-card {
  display: grid;
  gap: 6px;
  padding: 10px 10px 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--pc, var(--border-strong));
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.kanban-move { display: flex; justify-content: flex-end; gap: 2px; }
.kanban-move .icon-button.subtle { width: 26px; min-height: 26px; font-size: 16px; }
.kanban-move .icon-button.subtle:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.kanban-move .icon-button.subtle:disabled { opacity: 0.3; }
.kanban-empty { margin: 0; padding: 18px 8px; text-align: center; font-size: 12.5px; border: 1.5px dashed var(--border-strong); border-radius: 10px; }

/* Calendario */
.tcal-head, .tcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tcal-head span { padding-bottom: 4px; text-align: center; color: var(--muted); font-size: 11px; font-weight: 650; }
.tcal-day {
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 7%, transparent);
  cursor: pointer;
  min-width: 0;
  transition: box-shadow 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.tcal-day:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.tcal-day b { font-size: 12.5px; font-weight: 650; }
.tcal-day.past b { color: var(--muted); }
.tcal-day.today b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mod); color: #fff; }
.tcal-day.sel { box-shadow: inset 0 0 0 2px var(--mod); }
.tcal-day small { color: var(--muted); font-size: 11px; font-weight: 600; }
.tcal-chip {
  display: block;
  padding: 1px 6px;
  border-radius: 6px;
  border-left: 3px solid var(--pc, var(--mod));
  background: color-mix(in srgb, var(--pc, var(--mod)) 13%, transparent);
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
}
.tcal-chip.done { opacity: 0.5; text-decoration: line-through; }
.tcal-chip.late { border-left-color: var(--bad); }
.task-cal-side { display: grid; gap: 10px; align-content: start; }

/* Matriz */
.matrix-intro { margin: 0 0 14px; font-size: 13.5px; }
.matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.matrix-q { min-height: 240px; display: grid; align-content: start; gap: 8px; border-top: 3px solid var(--q); }
.matrix-q .section-header { margin-bottom: 4px; flex-wrap: wrap; }
.matrix-q h2 { color: var(--q); }
.matrix-hint { color: var(--muted); font-size: 12px; font-weight: 600; }
.q-hazlo { --q: var(--bad); }
.q-planifica { --q: var(--mod); }
.q-delega { --q: #0a84ff; }
.q-elimina { --q: var(--muted); }

/* Foco */
.focus-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 40px; padding: 28px; }
.focus-ring { position: relative; width: 240px; height: 240px; flex-shrink: 0; }
.focus-ring svg { display: block; }
.focus-ring .ring-track { fill: none; stroke: color-mix(in srgb, var(--mod) 16%, transparent); }
.focus-ring .ring-fill { fill: none; stroke: var(--mod); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.focus-main.descanso .ring-fill, .focus-main.largo .ring-fill { stroke: var(--good); }
.focus-ring-text { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; }
.focus-ring-text strong { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.focus-ring-text small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.focus-side { display: grid; gap: 14px; flex: 1 1 280px; max-width: 420px; }
.focus-task { margin: 0; font-size: 15px; }
.focus-pick { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.focus-custom { gap: 8px; }
.focus-start { justify-self: start; }
.focus-pill { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--mod-tareas); }
.focus-pill.rest { color: var(--good); }
.focus-pill.paused { opacity: 0.6; }

/* Revisión semanal */
.wr-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wr-steps button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wr-steps li.done button { color: var(--good); }
.wr-steps li.on button { color: var(--text); background: color-mix(in srgb, var(--mod) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod) 45%, transparent); }
.wr-body { display: grid; gap: 12px; }
.wr-body h2 { margin: 0; font-size: 20px; }
.wr-body > p { margin: 0; }
.wr-row { display: grid; gap: 4px; padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
.wr-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 42px; }
.wr-actions .chip { min-height: 26px; font-size: 12px; }
.wr-project { margin-left: 42px; max-width: 260px; min-height: 32px; font-size: 13px; }
.wr-ok { margin: 6px 0; color: var(--good); font-weight: 600; }
.wr-project-card { padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--pc) 7%, transparent); border-left: 3px solid var(--pc); }
.wr-project-card .section-header { margin-bottom: 4px; }
.wr-project-card p { margin: 0; }
.wr-nav { margin-top: 8px; }
.wr-stats { max-width: 560px; }

/* Formulario de tarea */
.task-modal, .project-modal { width: min(640px, 100%); }
.prio-seg button svg { width: 13px; height: 13px; color: var(--pc); }
.prio-seg button.on { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--pc); }
.tf-tag-suggest { margin-top: -6px; }
.tf-tag-suggest .chip { min-height: 26px; font-size: 12px; }
.subtasks { display: grid; gap: 4px; }
.subtask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.subtask .task-check { width: 20px; height: 20px; }
.subtask input { min-height: 34px; }
.subtask.done input { color: var(--muted); text-decoration: line-through; }
.subtask.add { grid-template-columns: 20px minmax(0, 1fr); }
.tf-info { margin: 0; font-size: 12.5px; }


/* Paneles de los apartados montados como rejilla de una columna: la
   columna no puede ser más ancha que el panel. Sin esto, algo que no
   encoge (una fila de botones) ensanchaba la rejilla y el contenido se
   salía por la derecha en el móvil. */
.task-lists-main, .wr-body, .task-cal-side, .focus-side, .habit-list-panel, .habit-card,
.task-upcoming .task-day, .matrix-q, .kanban-col, .habit-hero, .habit-side-col,
.task-head, .habit-group, .task-list, .kanban-card { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1100px) {
  .task-lists-layout { grid-template-columns: 1fr; }
  .task-lists-side { position: static; max-height: none; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .task-listnav-head, .task-listnav-empty, .task-listnav-sep { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .task-head { grid-template-columns: 1fr; }
  /* En una sola columna, lo de hoy antes que el resumen lateral. */
  .task-page > .task-side { order: 10; grid-row: auto; }
  .task-lists-side { display: none; }
  .task-list-picker { display: flex; }
  .task-list-picker .ghost.small span { display: none; }
  .task-list-picker .ghost.small { width: 38px; min-height: 38px; padding: 0; justify-content: center; }
  .task-actions { opacity: 1; }
  .task-row { grid-template-columns: auto minmax(0, 1fr); }
  .task-row .task-actions { grid-column: 2; justify-content: flex-end; margin-top: -4px; }
  .task-row.trashed { grid-template-columns: 1fr; }
  .task-row.trashed .task-actions { grid-column: 1; }
  .kanban { grid-template-columns: 1fr; }
  .tcal-day { min-height: 54px; padding: 4px; }
  .tcal-chip { display: none; }
  .tcal-day small { display: none; }
  .tcal-day:has(.tcal-chip)::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mod); justify-self: center; }
  .matrix { grid-template-columns: 1fr; }
  .focus-ring { width: 220px; height: 220px; }
  .focus-ring svg { width: 220px; height: 220px; }
  .wr-actions { padding-left: 0; }
  .wr-project { margin-left: 0; }
  .task-lists-side { grid-template-columns: 1fr 1fr; }
  .task-quick .primary.small { display: none; }
}
@media print {
  .task-actions, .task-quick, .tq-preview, .kanban-move { display: none !important; }
}

/* ============================================================
   Entrenamientos
   ============================================================ */
.wk-page, .wk-session { --chart: var(--mod); }
.form-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Hoy */
.wk-hero { display: grid; gap: 10px; align-content: start; background: linear-gradient(140deg, color-mix(in srgb, var(--mod) 16%, var(--panel)) 0%, var(--panel) 62%); }
.wk-hero h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.wk-hero p { margin: 0; }
.wk-hero .button-row { margin-top: 6px; }
.wk-hero .button-row svg { width: 15px; height: 15px; }
.wk-hero .primary, .wk-hero .ghost { display: inline-flex; align-items: center; gap: 7px; }
.wk-hero-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mod); }
.wk-hero.live { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mod) 55%, transparent); }
.wk-hero.live .wk-hero-kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--mod); animation: wkPulse 1.6s ease-in-out infinite; vertical-align: 1px; }
@keyframes wkPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.wk-hero-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 18px; }
.wk-hero-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.wk-hero-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-hero-list li small { color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.wk-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.wk-sday { display: grid; justify-items: center; gap: 5px; }
.wk-sday small { font-size: 11px; font-weight: 650; color: var(--muted); }
.wk-sday i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.wk-sday.done i { background: var(--mod); }
.wk-sday.plan i { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mod) 70%, transparent); }
.wk-sday.today small { color: var(--mod); }
.wk-sday.today:not(.done) i { box-shadow: inset 0 0 0 2px var(--mod); }
.today-card .wk-strip { margin: 12px 0 0; }
.today-card .wk-sday i { width: 26px; height: 26px; font-size: 11.5px; }

.wk-rows { display: grid; gap: 4px; }
.wk-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wk-row:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.wk-row-emoji { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font-size: 17px; background: color-mix(in srgb, var(--mod) 14%, transparent); }
.wk-row-main { display: grid; min-width: 0; }
.wk-row-main strong { font-size: 14px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-row-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-pr-count { font-size: 12px; font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; }
.wk-month-head { margin: 14px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.wk-month-head:first-child { margin-top: 0; }
.wk-more { justify-self: center; margin-top: 10px; }

.wk-routine-quick li { grid-template-columns: minmax(0, 1fr) auto auto; }
.wk-routine-quick .ghost.small { width: 34px; min-height: 30px; padding: 0; justify-content: center; }
.wk-routine-quick svg { width: 14px; height: 14px; }

.wk-pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wk-pr-list .link-row { display: grid; gap: 2px; text-align: left; }
.wk-pr-list .link-row span { font-size: 13.5px; }
.wk-pr-list.compact { margin: 12px 0 4px; }
.wk-pr-list.compact li { font-size: 13px; padding: 3px 0; }

.wk-body-mini .wk-weight-big { display: grid; gap: 2px; margin-bottom: 12px; }
.wk-weight-big strong { font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wk-weight-big small { color: var(--muted); font-size: 12.5px; }
.wk-quick-weight { display: flex; gap: 8px; }
.wk-quick-weight input { flex: 1; min-width: 0; }

.wk-today-live, .wk-today-plan { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--mod) 12%, transparent); }
.wk-today-live { flex-wrap: wrap; }
.wk-today-plan > div, .wk-today-live > strong { display: grid; min-width: 0; }
.wk-today-plan small, .wk-today-live small { color: var(--muted); font-size: 12px; }
.wk-today-plan strong { font-size: 16px; }
.wk-today-live .primary, .wk-today-plan .primary { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wk-today-live svg, .wk-today-plan svg { width: 13px; height: 13px; }

/* Mapa de músculos */
.muscle-map { display: flex; justify-content: center; gap: 14px; }
.muscle-map figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.muscle-map svg { width: 124px; height: 219px; overflow: visible; }
.muscle-map.small svg { width: 92px; height: 162px; }
.muscle-map figcaption { font-size: 11px; font-weight: 600; color: var(--muted); }
.mm-base { fill: color-mix(in srgb, var(--muted) 24%, transparent); }
.mm-m path { fill: color-mix(in srgb, var(--muted) 15%, transparent); stroke: var(--panel); stroke-width: 0.8; transition: fill 200ms var(--ease-out), filter 140ms var(--ease-out); }
.mm-m:hover path { filter: brightness(1.2); }
.mm-m[data-muscle] { cursor: pointer; }
.mm-m.rec-recuperando path { fill: var(--warn); }
.mm-m.rec-listo path { fill: var(--good); }
.mm-m.z-bajo path { fill: color-mix(in srgb, var(--mod) 40%, transparent); }
.mm-m.z-optimo path { fill: var(--mod); }
.mm-m.z-alto path { fill: var(--warn); }
.mm-m.z-minor path { fill: color-mix(in srgb, var(--mod) 62%, transparent); }
.mm-m.z-poco path { fill: color-mix(in srgb, var(--mod) 28%, transparent); }
.mm-m.ex-primary path { fill: var(--mod); }
.mm-m.ex-secondary path { fill: color-mix(in srgb, var(--mod) 40%, transparent); }
.mm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.mm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mm-legend i { width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 15%, transparent); }
.mm-legend i.rec-recuperando, .mm-legend i.z-alto { background: var(--warn); }
.mm-legend i.rec-listo { background: var(--good); }
.mm-legend i.z-bajo { background: color-mix(in srgb, var(--mod) 40%, transparent); }
.mm-legend i.z-optimo { background: var(--mod); }

/* Barras con la franja recomendada */
.range-bars .bar-row > div { position: relative; overflow: visible; }
.range-bars .rb-band {
  position: absolute;
  top: -4px;
  bottom: -4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--good) 14%, transparent);
  box-shadow: inset 1.5px 0 0 color-mix(in srgb, var(--good) 45%, transparent), inset -1.5px 0 0 color-mix(in srgb, var(--good) 45%, transparent);
}
.range-bars .bar-row i { position: relative; background: color-mix(in srgb, var(--mod) 45%, transparent); }
.range-bars .zone-optimo i { background: var(--mod); }
.range-bars .zone-alto i { background: var(--warn); }
.range-bars .zone-minor i { background: color-mix(in srgb, var(--mod) 55%, var(--muted)); }
.range-bars .zone-optimo strong { color: var(--good); }
.range-bars .zone-alto strong { color: var(--warn); }

/* Historial */
.wk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wk-toolbar p { margin: 0; }
.wk-toolbar .button-row svg { width: 15px; height: 15px; }
.wk-toolbar .ghost, .wk-toolbar .primary { display: inline-flex; align-items: center; gap: 7px; }
.mcal-day.wk-done { background: var(--mod); color: #fff; }
.mcal-day.wk-act { background: color-mix(in srgb, var(--mod) 45%, transparent); color: var(--text); }
.mcal-day.wk-plan { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mod) 65%, transparent); }
.mcal-day.today { outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent); outline-offset: 1px; }
.mcal-day.sel { outline: 2.5px solid var(--text); outline-offset: 1px; }
.wk-history .wk-cal { align-self: start; }
.wk-hist-list { grid-row: span 2; }

/* Ficha de un entreno */
.wk-detail-hero { display: grid; gap: 16px; }
.wk-detail-title { display: flex; align-items: center; gap: 14px; }
.wk-detail-title h2 { margin: 0; font-size: 22px; }
.wk-detail-title p { margin: 2px 0 0; }
.wk-big-emoji { width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; border-radius: 18px; font-size: 28px; background: color-mix(in srgb, var(--mod) 16%, transparent); }
.wk-notes { margin: 0; font-style: italic; color: var(--text); }
.wk-detail-actions svg { width: 15px; height: 15px; }
.wk-detail-actions .ghost, .wk-detail-actions .primary { display: inline-flex; align-items: center; gap: 7px; }
.wk-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.wk-ex-done .section-header { margin-bottom: 10px; align-items: baseline; }
.wk-ex-done .section-header h2 { font-size: 15px; }
.wk-ex-done .link-button { font-weight: 650; text-align: left; color: var(--text); }
.wk-ex-done .link-button:hover { color: var(--mod); }
/* La regla general de las tablas (min-width: 980px) es para la de movimientos. */
.wk-set-table, .wk-rm-table, .wk-measure-table { min-width: 0; }
.wk-set-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wk-set-table td { padding: 6px 4px; border-top: 1px solid var(--border); }
.wk-set-table tr:first-child td { border-top: 0; }
.wk-set-table td:first-child { width: 34px; }
.wk-set-table td:last-child { width: 26px; text-align: right; }
.wk-set-table tr.warm td { color: var(--muted); }
.wk-set-table small { color: var(--muted); font-size: 11.5px; }
.wk-pr-badge { cursor: default; }
.wk-ss-tag { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; font-size: 11.5px; font-weight: 750; color: #fff; background: var(--mod); flex-shrink: 0; }
.wk-ex-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); font-style: italic; }

/* Números de serie (en la ficha y en la sesión) */
.wk-set-n {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  padding: 0;
}
button.wk-set-n { cursor: pointer; }
.wk-set-n.t-calentamiento { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.wk-set-n.t-descendente { color: var(--info); background: color-mix(in srgb, var(--info) 16%, transparent); }
.wk-set-n.t-fallo { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }

/* Biblioteca */
.wk-lib-toolbar { display: grid; gap: 12px; }
.wk-lib-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wk-lib-search .wk-search { flex: 1 1 260px; }
.wk-lib-search select { width: auto; min-width: 170px; }
.wk-lib-search .primary { display: inline-flex; align-items: center; gap: 7px; }
.wk-lib-search .primary svg { width: 15px; height: 15px; }
.wk-search { border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 12px; background: color-mix(in srgb, var(--muted) 6%, transparent); }
.wk-search input { min-height: 40px; }
.wk-muscle-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.wk-muscle-chips::-webkit-scrollbar { display: none; }
.wk-muscle-chips .chip { flex-shrink: 0; }
.wk-lib-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 6px; border-radius: var(--r-md); }
.wk-lib-row:hover { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.wk-lib-main { display: grid; min-width: 0; padding: 8px 4px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wk-lib-main strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-lib-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-lib-right { padding-right: 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--mod); background: color-mix(in srgb, var(--mod) 14%, transparent); vertical-align: 2px; }
.wk-star { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: color-mix(in srgb, var(--muted) 70%, transparent); cursor: pointer; padding: 0; }
.wk-star svg { width: 16px; height: 16px; }
.wk-star:hover { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.wk-star.on { color: var(--warn); }
.wk-star.on svg { fill: currentColor; }
.wk-calc-out { margin-top: 12px; }
.wk-calc-big { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wk-calc-big span { color: var(--muted); font-size: 13px; font-weight: 600; }
.wk-calc-big strong { font-size: 26px; color: var(--mod); font-variant-numeric: tabular-nums; }
.wk-rm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wk-rm-table th { text-align: left; font-size: 11.5px; font-weight: 650; color: var(--muted); padding: 0 6px 6px; }
.wk-rm-table td { padding: 5px 6px; border-top: 1px solid var(--border); }
.wk-rm-table td:first-child { color: var(--muted); }

/* Ficha de un ejercicio */
.wk-ex-hero { display: grid; gap: 16px; }
.wk-ex-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.wk-ex-hero h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 22px; }
.wk-ex-hero p { margin: 4px 0 10px; }
.wk-ex-notes { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.wk-ex-notes small { font-weight: 450; }
.wk-rm-table td { white-space: nowrap; }
.wk-ex-hero .button-row svg { width: 15px; height: 15px; }
.wk-ex-hero .button-row .ghost, .wk-ex-hero .button-row .primary { display: inline-flex; align-items: center; gap: 7px; }
.wk-ex-hist .link-row, .wk-rec-list .link-row { text-align: left; }
.wk-ex-hist em { font-style: normal; color: var(--muted); font-size: 12px; }
.wk-rec-list .link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.wk-rec-list strong { font-variant-numeric: tabular-nums; }

/* Progreso */
.wk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wk-map-panel { display: grid; align-content: start; }
.wk-map-panel .section-header { flex-wrap: wrap; }

/* Cuerpo */
.wk-body-kpis .habit-kpis small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; margin-top: 2px; }
.wk-goal-line { margin: 14px 0 0; }
.wk-measures-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.wk-measure-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wk-measure-table th { text-align: left; font-size: 11.5px; font-weight: 650; color: var(--muted); padding: 0 6px 6px; }
.wk-measure-table td { padding: 6px; border-top: 1px solid var(--border); }
.wk-down { color: var(--good); }
.wk-up { color: var(--text); }
.wk-body-form .habit-optional-toggle { margin: 0; }
/* El formulario, a la derecha y a lo alto de las dos primeras filas. */
.wk-body .wk-body-form { grid-row: span 2; }
.wk-body > .panel { align-self: start; }

/* Sesión en vivo y editor de rutinas */
.wk-session { display: grid; gap: 16px; padding-bottom: 90px; }
.wk-session.is-past, .wk-session.is-routine { padding-bottom: 0; }
.wk-session > .panel, .wk-ex-list { max-width: 820px; width: 100%; margin-left: auto; margin-right: auto; }
.wk-session-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; }
.wk-session-head.past { grid-template-columns: minmax(0, 1fr); }
.wk-session-title { min-width: 0; }
.wk-session-title p { margin: 4px 0 0; font-size: 13px; }
.wk-name-input { width: 100%; font-size: 20px; font-weight: 650; border-color: transparent; background: transparent; padding-left: 6px; margin-left: -6px; }
.wk-name-input:hover { border-color: var(--border-strong); }
.wk-session-stats { display: flex; gap: 22px; }
.wk-session-stats div { display: grid; }
.wk-session-stats span { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.wk-session-stats strong { font-size: 20px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.wk-ex-list { display: grid; gap: 12px; }
.wk-session-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wk-session-foot .primary { display: inline-flex; align-items: center; gap: 7px; }
.wk-session-foot .primary svg { width: 15px; height: 15px; }
.wk-session-foot p { flex-basis: 100%; text-align: center; margin: 0; }

.wk-ex { padding: 16px 16px 12px; }
.wk-ex.ss { border-left: 3px solid var(--mod); }
.wk-ex.ss:not(.ss-last) { margin-bottom: -6px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.wk-ex.ss:not(.ss-first) { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.wk-ex-head { display: flex; align-items: center; gap: 10px; }
.wk-ex-title { display: grid; flex: 1; min-width: 0; }
.wk-ex-title .link-button { justify-self: start; max-width: 100%; font-size: 15.5px; font-weight: 650; color: var(--text); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ex-title .link-button:hover { color: var(--mod); }
.wk-ex-title small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-menu-btn { font-size: 20px; color: var(--muted); }
.wk-menu-btn[aria-expanded="true"] { color: var(--text); background: color-mix(in srgb, var(--muted) 16%, transparent); }
.wk-ex-menu { display: grid; gap: 12px; margin: 12px 0 4px; padding: 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 8%, transparent); }
.wk-ex-menu .chip { display: inline-flex; align-items: center; gap: 6px; }
.wk-ex-menu .chip svg { width: 13px; height: 13px; }
.wk-ex-menu .chip:disabled { opacity: 0.4; cursor: default; }
.wk-ex-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.wk-ex-opts label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wk-ex-opts .wk-ex-note-field { grid-column: 1 / -1; }
.wk-range { display: flex; align-items: center; gap: 6px; }
.wk-range input { width: 64px; text-align: center; }
.wk-range span { color: var(--muted); }
.wk-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; }
.wk-hint strong { color: var(--mod); }

.wk-sets { display: grid; gap: 4px; margin-top: 10px; }
.wk-set-head, .wk-set { display: grid; align-items: center; gap: 6px; }
.wk-sets.live .wk-set-head, .wk-sets.live .wk-set { grid-template-columns: 30px minmax(0, 1fr) 64px 54px 40px 26px; }
.wk-sets.live.rir .wk-set-head, .wk-sets.live.rir .wk-set { grid-template-columns: 30px minmax(0, 1fr) 60px 50px 46px 40px 26px; }
.wk-sets.past .wk-set-head, .wk-sets.past .wk-set { grid-template-columns: 30px minmax(0, 1fr) 64px 54px 26px; }
.wk-sets.past.rir .wk-set-head, .wk-sets.past.rir .wk-set { grid-template-columns: 30px minmax(0, 1fr) 60px 50px 46px 26px; }
.wk-sets.routine .wk-set-head, .wk-sets.routine .wk-set { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 26px; }
.wk-set-head { padding: 0 2px 2px; font-size: 11px; font-weight: 650; color: var(--muted); }
.wk-set-head span { text-align: center; }
.wk-set-head span:nth-child(2) { text-align: left; }
.wk-sets.routine .wk-set-head span:nth-child(2) { text-align: center; }
.wk-set { padding: 3px 2px; border-radius: 10px; transition: background-color 160ms var(--ease-out); }
.wk-set.done { background: color-mix(in srgb, var(--good) 13%, transparent); }
.wk-prev {
  min-width: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.wk-prev:disabled { cursor: default; opacity: 0.6; }
.wk-prev:not(:disabled):hover { color: var(--text); }
.wk-in { min-width: 0; width: 100%; min-height: 36px; padding: 0 4px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-in::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); font-weight: 500; }
.wk-set.done .wk-in { background: transparent; border-color: transparent; }
.wk-rir { min-height: 36px; padding: 0 2px; text-align: center; }
.wk-check {
  width: 38px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.wk-check:hover { color: var(--text); }
.wk-check:active { transform: scale(0.92); }
.wk-check.on { background: var(--good); color: #fff; }
.wk-del { width: 26px; min-height: 26px; font-size: 16px; }
.wk-add-set { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.wk-add-set svg { width: 13px; height: 13px; }

/* Descanso */
/* Centrada con márgenes, no con transform: la animación de entrada usa
   transform y lo pisaría (la barra salía desplazada a la derecha). */
.wk-rest {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 24;
  width: min(560px, calc(100vw - 32px));
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-glass);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-strong);
}
.wk-rest.enter { animation: sheetIn 0.35s var(--ease) both; }
.wk-rest-track { height: 4px; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.wk-rest-track i { display: block; height: 100%; background: var(--mod); transition: width 250ms linear; }
.wk-rest-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; }
.wk-rest-label { display: grid; flex: 1; min-width: 0; font-size: 13px; font-weight: 650; }
.wk-rest-label small { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-rest-row strong { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-right: 4px; }
.wk-rest-row .ghost.small { padding: 0 10px; }
.wk-pill { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--mod-entreno); }
.wk-pill.rest { color: var(--warn); }

/* Terminar, elegir ejercicios, formularios */
.wk-fin-kpis { margin-bottom: 4px; }
.wk-pending { align-items: flex-start !important; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.wk-pending input { margin-top: 2px; }
.wk-pending small { display: block; color: var(--muted); font-weight: 500; }
.wk-rpe { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.wk-rpe button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  cursor: pointer;
  padding: 0;
}
.wk-rpe button.on { color: #fff; background: var(--mod); }
.wk-picker { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 12px; height: min(760px, calc(100vh - 40px)); overflow: hidden; }
.wk-picker .section-header { margin-bottom: 0; }
.wk-picker .wk-search { border-radius: var(--r-md); }
.wk-pick-muscles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.wk-pick-muscles::-webkit-scrollbar { display: none; }
.wk-pick-muscles .chip { flex-shrink: 0; }
.wk-pick-list { overflow-y: auto; min-height: 0; margin: 0 -8px; padding: 0 8px; }
.wk-pick-list .palette-group { padding: 10px 6px 4px; }
.wk-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 8px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wk-pick-row:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.wk-pick-row.on { background: color-mix(in srgb, var(--mod) 14%, transparent); }
.wk-pick-box { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--border-strong); color: #fff; }
.wk-pick-row.on .wk-pick-box { background: var(--mod); box-shadow: none; }
.wk-pick-main { display: grid; min-width: 0; }
.wk-pick-main strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-pick-main small { color: var(--muted); font-size: 12px; }
.wk-pick-foot { justify-content: flex-end; }
.wk-pick-foot .ghost { display: inline-flex; align-items: center; gap: 6px; }
.wk-pick-foot svg { width: 14px; height: 14px; }
.wk-exform .kind-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wk-exform .kind-opt:hover, .wk-exform .kind-opt.on { border-color: var(--mod); }
.wk-exform .kind-opt.on { background: color-mix(in srgb, var(--mod) 12%, transparent); box-shadow: inset 0 0 0 1px var(--mod); }
.wk-exform .kind-opt:disabled { opacity: 0.4; cursor: default; }
.wk-sport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 196px; overflow-y: auto; padding: 2px; }
.wk-sport-grid button {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 0;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--muted) 9%, transparent);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.wk-sport-grid button span { font-size: 22px; line-height: 1.2; }
.wk-sport-grid button small { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; }
.wk-sport-grid button:hover { background: color-mix(in srgb, var(--muted) 16%, transparent); }
.wk-sport-grid button.on { background: color-mix(in srgb, var(--mod) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--mod); }
.wk-sport-grid button.on small { color: var(--text); }
.wk-activity .seg button.on, .wk-exform .seg button.on { box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--mod) 45%, transparent); }

/* Calculadora de discos */
.wk-plates-out { margin-top: 16px; }
.plate-viz { display: flex; align-items: center; justify-content: center; height: 96px; margin-bottom: 10px; }
.plate-viz i { width: 12px; height: var(--ph); margin: 0 1px; border-radius: 3px; background: var(--pc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.plate-bar { width: 110px; height: 10px; border-radius: 3px; background: linear-gradient(#d1d1d6, #8e8e93); }
.plate-sleeve { width: 18px; height: 14px; border-radius: 3px; background: linear-gradient(#d1d1d6, #8e8e93); }
.wk-plates-text { margin: 0 0 4px; text-align: center; font-size: 15px; }

/* Rutinas */
.wk-plan-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wk-plan-day { display: grid; align-content: start; gap: 6px; min-height: 76px; padding: 10px; border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 7%, transparent); }
.wk-plan-day small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.wk-plan-day.today { box-shadow: inset 0 0 0 1.5px var(--mod); }
.wk-plan-day.today small { color: var(--mod); }
.wk-plan-day .chip { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in srgb, var(--mod) 16%, transparent); }
.wk-plan-day .muted { font-size: 12px; }
.wk-routine { display: grid; align-content: start; gap: 10px; }
.wk-routine-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wk-routine-head h3 { margin: 0; font-size: 17px; }
.wk-routine-head small { color: var(--mod); font-size: 12.5px; font-weight: 650; }
.wk-routine-head svg { width: 15px; height: 15px; }
.wk-routine > p { margin: 0; font-size: 13px; }
.wk-routine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wk-routine-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.wk-routine-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-routine-list li small { color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.wk-routine .button-row { margin-top: auto; }
.wk-routine .button-row svg { width: 13px; height: 13px; }
.wk-routine .button-row .primary, .wk-routine .button-row .ghost { display: inline-flex; align-items: center; gap: 6px; }
.wk-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.wk-tpl { display: grid; align-content: start; gap: 6px; padding: 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 7%, transparent); }
.wk-tpl p { margin: 0; font-size: 13px; line-height: 1.5; }
.wk-tpl small { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.wk-tpl .ghost { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.wk-tpl svg { width: 13px; height: 13px; }

.wk-hist-list, .wk-lib-list, .wk-ex, .wk-routine, .wk-hero, .wk-ex-hero,
.wk-detail-hero, .wk-map-panel, .wk-body-form, .wk-tpl { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1100px) {
  .wk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wk-hist-list { grid-row: auto; }
  .wk-body .wk-body-form, .wk-body .habit-side-col { grid-column: 1 / -1; grid-row: auto; }
  .wk-body .habit-side-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .form-row.four { grid-template-columns: 1fr 1fr; }
  .wk-body .habit-side-col { grid-template-columns: minmax(0, 1fr); }
  .wk-hero h2 { font-size: 22px; }
  .wk-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wk-session-head { grid-template-columns: 1fr; gap: 12px; }
  .wk-session-stats { justify-content: space-between; }
  .wk-session-head .button-row { display: grid; grid-template-columns: 1fr 1fr; }
  .wk-ex { padding: 14px 10px 10px; }
  .wk-sets.live .wk-set-head, .wk-sets.live .wk-set { grid-template-columns: 28px minmax(0, 1fr) 58px 48px 38px 22px; gap: 5px; }
  .wk-sets.live.rir .wk-set-head, .wk-sets.live.rir .wk-set { grid-template-columns: 28px minmax(0, 1fr) 54px 44px 40px 36px 22px; gap: 4px; }
  .wk-sets.past .wk-set-head, .wk-sets.past .wk-set { grid-template-columns: 28px minmax(0, 1fr) 58px 48px 22px; gap: 5px; }
  .wk-sets.past.rir .wk-set-head, .wk-sets.past.rir .wk-set { grid-template-columns: 28px minmax(0, 1fr) 54px 44px 40px 22px; gap: 4px; }
  .wk-set-n { width: 26px; height: 26px; }
  .wk-check { width: 36px; }
  .wk-rest { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wk-session.is-live { padding-bottom: 120px; }
  .wk-rest-row { gap: 6px; padding: 8px 10px 8px 12px; }
  .wk-rest-row strong { font-size: 21px; }
  .wk-rest-label small { display: none; }
  .wk-ex-hero-main { grid-template-columns: 1fr; }
  .wk-ex-map { justify-self: center; }
  .wk-plan-grid { grid-template-columns: 1fr 1fr; }
  .wk-lib-search select { flex: 1 1 140px; }
  .wk-picker { height: calc(100vh - 20px); padding: 18px; }
  .wk-rpe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .muscle-map svg { width: 112px; height: 198px; }
  .wk-detail-title h2, .wk-ex-hero h2 { font-size: 19px; }
}
@media print {
  .wk-rest, .wk-pill { display: none !important; }
}

/* ============================================================
   Conexiones, metas, logros e informe general
   ============================================================ */
.goal-page, .logro-page, .gen-page { --chart: var(--mod); }

/* Metas */
.goal-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; }
.goal-card.done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--good) 45%, transparent); }
.goal-card.archived { opacity: 0.6; }
.goal-head { display: flex; align-items: flex-start; gap: 12px; }
.goal-emoji { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; font-size: 21px; background: color-mix(in srgb, var(--mod) 15%, transparent); }
.goal-title { flex: 1; min-width: 0; display: grid; }
.goal-title h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.goal-title small { color: var(--mod); font-size: 12px; font-weight: 650; }
.goal-head svg { width: 15px; height: 15px; }
.goal-bar { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); }
.goal-bar i { display: block; height: 100%; border-radius: inherit; background: var(--mod); transition: width 400ms var(--ease-out); }
.goal-card.done .goal-bar i { background: var(--good); }
.goal-bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); opacity: 0.55; }
.goal-bar.small { height: 6px; }
.goal-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goal-foot strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.goal-pct { color: var(--muted); font-size: 13px; font-weight: 650; }
.goal-pace { flex-shrink: 0; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.goal-pace.st-adelantada, .goal-pace.st-hecha { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.goal-pace.st-en-ritmo { color: var(--info); background: color-mix(in srgb, var(--info) 15%, transparent); }
.goal-pace.st-por-detrás, .goal-pace.st-vencida { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.goal-when { margin: 0; font-size: 12.5px; }
.goal-manual { justify-content: flex-end; }
.goal-empty { display: grid; gap: 10px; }
.goal-empty h2 { margin: 0; font-size: 22px; }
.goal-empty p { margin: 0; max-width: 70ch; }
.goal-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.goal-idea {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--mod) 11%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.goal-idea span { font-size: 20px; }
.goal-idea:hover { background: color-mix(in srgb, var(--mod) 18%, transparent); }
.goal-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.goal-type {
  display: grid;
  justify-items: start;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.goal-type span { font-size: 20px; }
.goal-type strong { font-size: 14px; }
.goal-type small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.goal-type:hover { border-color: var(--mod); background: color-mix(in srgb, var(--mod) 10%, transparent); }
.goal-modal .hf-label { text-transform: none; }

/* Logros */
.logro-hero { display: flex; align-items: center; gap: 22px; }
.logro-hero h2 { margin: 0 0 4px; font-size: 22px; }
.logro-hero p { margin: 6px 0 0; }
.logro-hero .mini-ring { flex-shrink: 0; --mod: var(--mod-inicio); }
.logro-hero .ring-fill { stroke: var(--mod-inicio); }
.logro-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.logro-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--mod-inicio) 14%, transparent); }
.logro-section .section-header h2 { color: var(--mod); }
.logro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.logro {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 16px 12px 14px;
  border-radius: var(--r-lg);
  text-align: center;
  background: color-mix(in srgb, var(--muted) 7%, transparent);
}
.logro-medal {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 50%;
  font-size: 27px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.logro.got .logro-medal {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 40%, var(--mod)), var(--mod));
  box-shadow: 0 8px 22px -10px var(--mod), inset 0 0 0 3px color-mix(in srgb, #fff 35%, transparent);
}
.logro.locked .logro-medal { filter: grayscale(1); opacity: 0.55; }
.logro strong { font-size: 13.5px; line-height: 1.3; }
.logro small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.logro em { margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.logro.got em { color: var(--mod); }
.logro-bar { width: 80%; height: 5px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; }
.logro-bar i { display: block; height: 100%; background: var(--mod); opacity: 0.75; }

/* Tarjetas de Hoy */
.today-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.today-goals li { display: grid; gap: 5px; padding: 6px 8px; border-radius: var(--r-md); cursor: pointer; }
.today-goals li:hover { background: color-mix(in srgb, var(--muted) 9%, transparent); }
.today-goals li > span { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-goals small { color: var(--muted); font-size: 12px; }
.today-logros { margin: 0 0 10px; }
.today-logros strong { font-size: 30px; letter-spacing: -0.02em; }
.today-logros small { color: var(--muted); font-size: 14px; }

/* Sugerencias en Tareas */
.task-sugg { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod-finanzas) 30%, transparent); }
.task-sugg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.task-sugg-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 7%, transparent); }
.task-sugg-icon { font-size: 18px; }
.task-sugg-main { display: grid; min-width: 0; }
.task-sugg-main strong { font-size: 13.5px; }
.task-sugg-main small { color: var(--muted); font-size: 12px; }
.task-sugg-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.task-sugg-actions .ghost { display: inline-flex; align-items: center; gap: 5px; }
.task-sugg-actions svg { width: 13px; height: 13px; }

/* Hábito ligado a Entreno */
.habit-link-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--mod-entreno); }
.wk-linked { margin-top: 8px; }
.wk-linked strong { color: var(--text); }

/* Informe general */
.gen-kpi .metric-top > span { color: var(--mod); }
.gen-block .section-header h2 { display: flex; align-items: center; gap: 8px; }
.gen-stats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; }
.gen-stats li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 14px; }
.gen-stats li:last-child { border-bottom: 0; }
.gen-stats li > span { color: var(--muted); }
.gen-stats strong { font-variant-numeric: tabular-nums; text-align: right; }
.gen-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; font-size: 14px; }
.gen-list small { color: var(--muted); }

@media (max-width: 760px) {
  .logro-hero { flex-direction: column; align-items: flex-start; }
  .logro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-ideas { grid-template-columns: 1fr; }
  .goal-type-grid { grid-template-columns: 1fr 1fr; }
}
@media print {
  .task-sugg { display: none !important; }
}

/* ============================================================
   Areté — el acabado «obsidiana y oro».
   Va al final a propósito: afina lo de arriba sin tocar la
   estructura (rejillas, móvil, impresión).
   ============================================================ */

/* ---------- Fondo: negro, un halo de oro muy tenue y grano ---------- */
body::before {
  background-image:
    radial-gradient(58rem 34rem at 50% -16%, rgba(216, 180, 106, 0.075), transparent 70%),
    radial-gradient(42rem 32rem at 104% 112%, rgba(255, 255, 255, 0.025), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1.3px);
  background-size: 100% 100%, 100% 100%, 28px 28px;
}
:root[data-theme="light"] body::before {
  background-image:
    radial-gradient(58rem 34rem at 50% -16%, rgba(156, 116, 48, 0.085), transparent 70%),
    radial-gradient(rgba(23, 21, 15, 0.045) 1px, transparent 1.3px);
  background-size: 100% 100%, 28px 28px;
}
/* Grano de película (ruido fractal en SVG, como las tarjetas con ruido
   de 21st.dev): quita al negro el aspecto de pantalla plana. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after { opacity: 0.035; mix-blend-mode: multiply; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { letter-spacing: -0.018em; }
.wordmark,
.topbar h1,
.today-hello h2,
.auth h1,
.logro-hero h2,
.goal-empty h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.topbar h1 { font-size: 30px; line-height: 1.1; }
.today-hello h2 { font-size: 38px; line-height: 1.1; margin: 6px 0 4px; }
.logro-hero h2 { font-size: 26px; }
.wordmark {
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0.01em;
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Etiquetas en versalitas espaciadas (a la manera de WHOOP). */
.metric span,
.today-date,
.eyebrow,
.module-head span,
.today-sub,
.ring-legend span {
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 650;
}
.ring-legend span { color: var(--muted); }
.section-header h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.today-mantra {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
}

/* ---------- Marca ---------- */
.brand-lockup { gap: 11px; }
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(216, 180, 106, 0.2), 0 8px 22px -10px rgba(216, 180, 106, 0.55);
}
.brand-mark svg, .auth-logo svg { display: block; width: 100%; height: 100%; }
.brain-plate { fill: #000; }
.brain-grooves { stroke: #000; }
.sidebar .brand-lockup { padding: 2px 10px 4px; }

/* ---------- Superficies ---------- */
.mini-card, .panel, .metric {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0) 42%),
    var(--panel);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-md);
}
:root[data-theme="light"] .mini-card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .metric { background: var(--panel); }
.panel:hover, .metric:hover, .mini-card:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border-strong));
}
/* El brillo como relieve: la tarjeta con enlace se ilumina en oro. */
.metric.link:hover {
  box-shadow: inset 0 1px 0 var(--specular), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 26px 70px -24px rgba(216, 180, 106, 0.28);
}
/* Cifras grandes: marfil que se apaga hacia abajo, como metal pulido. */
.metric strong, .today-stats strong, .dg-center strong {
  font-weight: 600;
  letter-spacing: -0.03em;
  background: var(--ivory-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric.good strong, .today-stats strong.money.good { -webkit-text-fill-color: var(--good); }
.metric.bad strong, .today-stats strong.money.bad { -webkit-text-fill-color: var(--bad); }
.metric strong .money, .metric strong [class*="money"] { -webkit-text-fill-color: currentColor; }
.metric strong small { -webkit-text-fill-color: var(--muted); font-weight: 500; letter-spacing: 0; }

/* ---------- Botones, chips y campos ---------- */
.primary {
  color: var(--accent-ink);
  background: var(--accent-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 10px 26px -12px rgba(216, 180, 106, 0.6);
}
.primary::after { background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%); }
.ghost, .icon-button {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ghost:hover, .icon-button:hover {
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.icon-button.subtle { box-shadow: none; }
:root[data-theme="light"] .ghost,
:root[data-theme="light"] .icon-button { background: rgba(23, 21, 15, 0.035); }
:root[data-theme="light"] .ghost:hover,
:root[data-theme="light"] .icon-button:hover { background: rgba(23, 21, 15, 0.07); }
.danger { background: color-mix(in srgb, var(--bad) 88%, #000); }
.chip {
  color: var(--muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.chip:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
:root[data-theme="light"] .chip:hover { background: rgba(23, 21, 15, 0.05); }
.chip.on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 58%, transparent);
}
input, select, textarea { background: color-mix(in srgb, var(--bg-soft) 80%, transparent); }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---------- Navegación ---------- */
.sidebar { background: rgba(5, 5, 5, 0.8); }
:root[data-theme="light"] .sidebar { background: rgba(251, 250, 247, 0.86); }
.sidebar nav button.active {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 2px 0 0 var(--mod), inset 0 0 0 1px var(--border);
}
:root[data-theme="light"] .sidebar nav button.active { background: rgba(23, 21, 15, 0.045); }
.module-rail {
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px var(--border);
}
.rail-btn.active {
  color: var(--mod);
  background: color-mix(in srgb, var(--mod) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod) 48%, transparent), 0 0 22px -8px var(--mod);
}
.section-chips .chip.on {
  color: var(--text);
  background: color-mix(in srgb, var(--mod) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod) 55%, transparent);
}
.privacy-note { background: rgba(216, 180, 106, 0.06); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, 0.12); }
:root[data-theme="light"] .privacy-note { background: rgba(156, 116, 48, 0.07); box-shadow: none; }

/* ---------- Anillos del día: brillo del color de cada apartado ---------- */
.day-rings g { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mod) 50%, transparent)); }
.day-rings .ring-track { stroke: color-mix(in srgb, var(--mod) 11%, transparent); }
.mod-dot { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod) 28%, transparent); }

/* ---------- Indicador de puntos en arco ---------- */
.dot-gauge {
  --dg: var(--accent);
  position: relative;
  width: var(--dg-size);
  height: var(--dg-size);
  flex: none;
}
.dot-gauge svg { display: block; overflow: visible; }
.dg-dot { fill: rgba(255, 255, 255, 0.08); transition: fill 300ms var(--ease-out); }
:root[data-theme="light"] .dg-dot { fill: rgba(23, 21, 15, 0.1); }
.dg-dot.on { fill: var(--dg); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--dg) 80%, transparent)); }
.dg-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding-top: 4%;
}
.dg-center strong { font-size: calc(var(--dg-size) * 0.27); line-height: 1; font-variant-numeric: tabular-nums; }
.dg-center small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.coach-score { align-items: center; text-align: center; gap: 4px; }
.coach-score > span { align-self: stretch; text-align: left; }
.coach-score p { margin: 0; }
.logro-hero .dot-gauge { --dg: var(--mod-inicio); }

/* ---------- Pantalla de entrada ---------- */
.auth-panel { background: rgba(5, 5, 5, 0.72); gap: 18px; }
:root[data-theme="light"] .auth-panel { background: rgba(251, 250, 247, 0.8); }
.auth-logo {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(216, 180, 106, 0.24), 0 24px 70px -22px rgba(216, 180, 106, 0.55);
}
.auth-name { margin: 6px 0 0; display: grid; gap: 6px; }
.auth-name .wordmark { font-size: 46px; }
.auth-name small { color: var(--muted); font-size: 12.5px; letter-spacing: 0.05em; }
.auth h1 {
  margin: 4px 0 0;
  font-size: 40px;
  max-width: 16ch;
  background: linear-gradient(100deg, var(--text) 36%, #f4e6c2 47%, var(--accent) 53%, var(--text) 66%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-preview { background: none; }

/* ---------- Cristal: barras, avisos y ventanas ---------- */
.topbar { border-bottom-color: var(--border); }
.toast { background: rgba(14, 14, 15, 0.92); border-color: var(--border-strong); }
:root[data-theme="light"] .toast { background: rgba(255, 255, 255, 0.94); }
.toast::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.modal-overlay { background: rgba(0, 0, 0, 0.62); }
.modal { border-color: var(--border-strong); }

@media print {
  body::after { display: none; }
}

/* ============================================================
   Rendimiento: 60 fps también en equipos modestos.
   Detrás de todo hay un fondo 3D que cambia en cada frame, así que
   cualquier efecto que dependa de lo que tiene debajo (un desenfoque de
   fondo, un modo de fusión) se recalcula 60 veces por segundo. Aquí se
   quitan esos efectos y se dejan los que pinta una sola vez.
   ============================================================ */

/* Barras y ventanas: opacas en vez de desenfocar lo de detrás. Los
   desenfoques pequeños y pasajeros (avisos, menús, la ayuda de los
   gráficos, el descanso) se quedan. */
.auth-panel, .sidebar, .topbar, .bottom-bar, .modal-overlay, .palette-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sidebar { background: rgba(7, 7, 8, 0.95); }
.topbar { background: rgba(6, 6, 7, 0.92); }
.auth-panel { background: rgba(6, 6, 7, 0.9); }
.bottom-bar { background: rgba(7, 7, 8, 0.97); }
.modal-overlay, .palette-overlay { background: rgba(0, 0, 0, 0.74); }
:root[data-theme="light"] .sidebar { background: rgba(251, 250, 247, 0.97); }
:root[data-theme="light"] .topbar { background: rgba(243, 241, 236, 0.95); }
:root[data-theme="light"] .auth-panel { background: rgba(251, 250, 247, 0.93); }
:root[data-theme="light"] .bottom-bar { background: rgba(251, 250, 247, 0.98); }
:root[data-theme="light"] .modal-overlay,
:root[data-theme="light"] .palette-overlay { background: rgba(23, 21, 15, 0.42); }

/* El grano ya no va en una capa a pantalla completa por encima (con modo
   de fusión, que se mezcla en cada frame): va en el fondo, que se pinta
   una vez. */
body::after { content: none; }
body::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(58rem 34rem at 50% -16%, rgba(216, 180, 106, 0.075), transparent 70%),
    radial-gradient(42rem 32rem at 104% 112%, rgba(255, 255, 255, 0.025), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1.3px);
  background-size: 220px 220px, 100% 100%, 100% 100%, 28px 28px;
}
:root[data-theme="light"] body::before {
  background-image:
    radial-gradient(58rem 34rem at 50% -16%, rgba(156, 116, 48, 0.085), transparent 70%),
    radial-gradient(rgba(23, 21, 15, 0.045) 1px, transparent 1.3px);
  background-size: 100% 100%, 28px 28px;
}

/* Entradas sin desenfoque: animar un blur obliga a repintar en cada
   frame; la opacidad y la posición las mueve el compositor. */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes titleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes menuIn {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
}
.workspace.entering .panel,
.workspace.entering .metric { animation: entrar 560ms var(--ease-out) backwards; }
.preview-grid { filter: none; }
.auth h1 { animation-iteration-count: 2; }

/* Brillos: un filtro por gráfico, no uno por punto o por anillo. */
.day-rings g { filter: none; }
.day-rings { filter: drop-shadow(0 0 5px rgba(216, 180, 106, 0.16)); }
.dg-dot.on { filter: none; }
.dot-gauge svg { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--dg) 55%, transparent)); }

/* El brillo que sigue al puntero, solo en las tarjetas pequeñas:
   repintar un degradado del tamaño de un panel grande en cada
   movimiento del ratón es caro. */
.panel:not(.metric):not(.mini-card)::after { content: none; }

/* Sombras más cortas: se pintan antes y se ven igual sobre negro. */
:root {
  --shadow-md: 0 1px 0 rgba(0, 0, 0, 0.5), 0 14px 30px -18px rgba(0, 0, 0, 0.85);
  --shadow-lg: 0 22px 54px -18px rgba(0, 0, 0, 0.88);
}

/* ============================================================
   Rangos, nivel y rachas (rangos.js)
   Insignias talladas con el color de cada rango. Todo estático: los
   brillos son degradados, sin filtros animados.
   ============================================================ */
.tier-hierro { --rb-light: #aeb3bb; --rb-dark: #474b52; }
.tier-bronce { --rb-light: #e7ad7c; --rb-dark: #7a4726; }
.tier-plata { --rb-light: #f1f3f7; --rb-dark: #858c97; }
.tier-oro { --rb-light: #f7dfa0; --rb-dark: #a67a2b; }
.tier-rubi { --rb-light: #ff9aa9; --rb-dark: #8c1d35; }
.tier-esmeralda { --rb-light: #9ef2cb; --rb-dark: #1b7652; }
.tier-diamante { --rb-light: #d3f4ff; --rb-dark: #3d8cb6; }
.tier-campeon { --rb-light: #dccdff; --rb-dark: #583bab; }
.tier-arete { --rb-light: #fff4d2; --rb-dark: #c69a4c; }

.rank-badge { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--rb); line-height: 0; }
.rank-badge svg { display: block; overflow: visible; }
.rank-badge .rb-roman { font-family: var(--font-display); font-size: 17px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.35); stroke-width: 2px; letter-spacing: 0.02em; }
.rank-badge.locked .rb-ghost { fill: color-mix(in srgb, var(--muted) 8%, transparent); stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rank-badge.locked text { font-family: var(--font-display); font-size: 20px; fill: var(--muted); }
.rank-badge .rb-brain { position: absolute; inset: 0; display: grid; place-items: center; }
.rank-badge .rb-brain .brain-grooves { stroke: rgba(0, 0, 0, 0.55); }
.rk-hero .rank-badge, .rk-cel-hero .rank-badge:last-child { filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--rb-dark, #000) 55%, transparent)); }
.rank-chip { display: inline-flex; align-items: center; gap: 6px; }
.rank-chip b { font-weight: 650; }

.rk-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.rk-title { margin: 2px 0 4px; font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.05; background: var(--ivory-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.rk-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; margin: 8px 0 6px; }
.rk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rb-dark, var(--accent-2)), var(--rb-light, var(--accent))); }
.rk-bar.xp i, .rk-bar.streak i { background: var(--accent-grad); }

.rk-setup { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rk-setup h2 { margin: 0 0 6px; }

.rk-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.rk-global { display: flex; align-items: center; gap: 20px; min-width: 0; }
.rk-global > div { min-width: 0; flex: 1; }
.rk-global p { margin: 0; }
.rk-level-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.rk-level-n { font-family: var(--font-display); font-size: 46px; line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rk-level-row b { display: block; font-size: 16px; }
.rk-level-row small { color: var(--muted); font-size: 12px; }
.rk-streaks { display: grid; gap: 8px; }
.rk-streak { display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 118px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer; }
.rk-streak:hover { border-color: var(--border-strong); }
.rk-streak span { grid-row: span 2; font-size: 20px; }
.rk-streak strong { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.rk-streak small { color: var(--muted); font-size: 11.5px; }

.rk-streak-big { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 12px; }
.rk-streak-big strong { font-family: var(--font-display); font-size: 52px; line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rk-streak-big span { color: var(--muted); font-size: 13px; }
.rk-wild { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; }
.rk-wild i { font-style: normal; opacity: 0.22; filter: grayscale(1); }
.rk-wild i.on { opacity: 1; filter: none; }
.rk-wild small { margin-left: 4px; color: var(--muted); font-size: 12px; }
.rk-weeks { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.rk-wk { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 14%, transparent); font-size: 11px; }
.rk-wk.ok { background: var(--accent-grad); }
.rk-wk.comodin { background: color-mix(in srgb, var(--info) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 60%, transparent); }
.rk-wk.fallo { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.rk-wk.curso { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.habit-card-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-warn { color: var(--warn) !important; }

.rk-xp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rk-xp-list li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
.rk-xp-list li small { grid-column: 1; color: var(--muted); font-size: 11.5px; }
.rk-xp-list li b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: tabular-nums; }

.rk-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center; }
.rk-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rk-zone { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer; }
.rk-zone:hover { border-color: var(--border-strong); }
.rk-zone.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: var(--focus); }
.rk-zone b { display: block; font-size: 13.5px; }
.rk-zone small { color: var(--muted); font-size: 12px; }
.mm-m.rk-m path { fill: color-mix(in srgb, var(--rb-light) 70%, var(--rb-dark)); }
.mm-m.rk-none path { fill: color-mix(in srgb, var(--muted) 10%, transparent); }
.rk-legend i[class^="tier-"] { background: linear-gradient(135deg, var(--rb-light), var(--rb-dark)); }

.rk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rk-row-main { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.rk-row-main:hover { background: var(--panel-2); }
.rk-row-text { display: grid; min-width: 0; }
.rk-row-text b { font-size: 14px; font-weight: 650; }
.rk-row-text small { color: var(--muted); font-size: 12px; }
.rk-row-text .rk-bar { margin: 6px 0 4px; max-width: 420px; }
.rk-next { color: color-mix(in srgb, var(--text) 72%, var(--muted)) !important; }

.rk-how summary { cursor: pointer; list-style: none; }
.rk-how summary::-webkit-details-marker { display: none; }
.rk-how summary h2 { display: inline; margin: 0; }
.rk-how summary::after { content: " ›"; color: var(--muted); }
.rk-how details[open] summary::after { content: " ⌄"; }
.rk-how p { color: color-mix(in srgb, var(--text) 80%, var(--muted)); line-height: 1.55; font-size: 13.5px; max-width: 78ch; }

.rk-mini { display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto; gap: 10px 32px; align-items: center; }
.rk-mini .hm-note { grid-column: 1 / -1; margin: 0; }
.rk-mini-row { display: flex; align-items: center; gap: 14px; }
.rk-mini-text { display: grid; min-width: 0; flex: 1; }
.rk-mini-text small { color: var(--muted); font-size: 12px; }
.rk-mini-text .rk-bar { margin: 6px 0 0; }
.rk-mini-streaks { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.rk-mini-streaks b { color: var(--text); }

.rk-ex-line { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); }
.rk-ex-line > div { display: grid; flex: 1; min-width: 0; }
.rk-ex-line small { color: var(--muted); font-size: 12px; }
.rk-ex-line .rk-bar { margin: 6px 0 4px; }

.rk-cel { text-align: center; }
.rk-cel .section-header { text-align: left; }
.rk-cel h2 { font-family: var(--font-display); font-size: 24px; }
.rk-cel-hero { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0 8px; }
.rk-cel-arrow { font-size: 22px; color: var(--muted); }
.rk-cel-main { font-size: 15px; margin: 6px 0 12px; }
.rk-cel-list { list-style: none; margin: 0 auto 12px; padding: 0; display: grid; gap: 6px; max-width: 380px; text-align: left; }
.rk-cel-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rk-cel-list small { color: var(--muted); }
.rk-cel-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 16px; }
.rk-cel-facts span { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-full); font-size: 13px; background: var(--panel-2); }
.rk-cel .button-row { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .rk-cel-hero .rank-badge:last-child { animation: rkPop 700ms var(--ease-out) both; }
}
@keyframes rkPop { from { opacity: 0; transform: scale(0.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .rk-hero { grid-template-columns: 1fr; gap: 20px; }
  .rk-streaks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-body-grid { grid-template-columns: 1fr; }
  .rk-mini { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .rk-global { gap: 14px; }
  .rk-global .rank-badge { --rb: 72px; }
  .rk-global .rank-badge svg { width: 72px; height: 81px; }
  .rk-title { font-size: 26px; }
  .rk-zone { padding: 8px 10px; gap: 8px; }
}

/* ============================================================
   Importar capturas (entreno-importar.js)
   ============================================================ */
.imp-drop { border: 1.5px dashed var(--border-strong); transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.imp-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.imp-drop-main { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.imp-drop-main > svg { width: 38px; height: 38px; color: var(--accent); }
.imp-drop-main h2 { margin: 0 0 4px; }
.imp-drop-main p { margin: 0; }
.imp-pick { display: inline-flex; align-items: center; cursor: pointer; padding: 10px 18px; border-radius: var(--r-full); }
.imp-tips { margin: 16px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
kbd { font-family: var(--font-ui); font-size: 11px; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--panel-2); }

.imp-files { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.imp-files li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); }
.imp-files img { width: 56px; height: 90px; object-fit: cover; object-position: top; border-radius: 8px; background: #000; }
.imp-files b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-bar { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; margin: 8px 0 4px; }
.imp-bar i { display: block; height: 100%; background: var(--accent-grad); transition: width 200ms linear; }
.imp-file-actions { display: flex; gap: 2px; }

.imp-review-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.imp-review-head h2 { margin: 0 0 4px; }
.imp-review-head p { margin: 0; max-width: 70ch; }
.imp-meta { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.imp-meta label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.imp-exs { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.imp-ex { padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); }
.imp-ex.doubt { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.imp-ex-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.imp-ex-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 12px; font-weight: 700; margin-top: 6px; }
.imp-ex-pick { display: grid; gap: 6px; min-width: 0; }
.imp-ex-pick select, .imp-ex-pick input { width: 100%; }
.imp-ex-pick small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.imp-plan { margin: 8px 0 0; font-size: 12.5px; }
.imp-sets { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; margin: 10px 0 8px; font-size: 13px; }
.imp-sets th:first-child { width: 44px; }
.imp-sets th:last-child { width: 34px; }
.imp-sets th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 6px 4px; }
.imp-sets td { padding: 2px 6px; }
.imp-sets td:first-child { color: var(--muted); width: 36px; }
.imp-sets td input:not([type="checkbox"]) { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; padding: 0 8px; background: var(--panel); }

.imp-unknown { margin-top: 12px; }
.imp-unknown summary { cursor: pointer; font-size: 12.5px; }
.imp-unknown p { font-size: 12px; line-height: 1.6; }
.imp-done ul { margin: 8px 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.imp-ups { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 14px; font-size: 13px; }

@media (max-width: 700px) {
  .imp-drop-main { grid-template-columns: 1fr; }
  .imp-meta { grid-template-columns: 1fr 1fr; }
  .imp-meta label:first-child { grid-column: 1 / -1; }
  .imp-exs { grid-template-columns: 1fr; }
}

/* ---------- Plantillas de rutinas: filtros y detalle ---------- */
.wk-tpl-filters { display: grid; gap: 8px; margin-top: 12px; }
.wk-tpl-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wk-tpl { grid-template-rows: auto auto 1fr auto; }
.wk-tpl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wk-tpl-head strong { font-size: 15px; }
.wk-tpl-tags { display: inline-flex; gap: 6px; flex: none; }
.wk-tpl-tags b, .wk-tpl-tags i { font-style: normal; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: var(--r-full); background: color-mix(in srgb, var(--muted) 14%, transparent); color: color-mix(in srgb, var(--text) 80%, var(--muted)); }
.wk-tpl-tags i.lvl-principiante { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.wk-tpl-tags i.lvl-intermedio { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.wk-tpl-tags i.lvl-avanzado { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.wk-tpl-more summary { cursor: pointer; font-size: 12px; color: var(--muted); line-height: 1.5; }
.wk-tpl-more[open] summary { margin-bottom: 8px; }
.wk-tpl-routine { margin: 6px 0 10px; font-size: 12.5px; }
.wk-tpl-routine ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.wk-tpl-routine li small { margin-left: 4px; }
.wk-tpl .primary.small, .wk-tpl .ghost.small { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }

/* ============================================================
   Mentor (mentor.js): botón flotante, panel y pantalla completa
   ============================================================ */
.mentor-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 26;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--panel) 92%, #000);
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.9), 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.mentor-fab:hover { transform: translateY(-2px); border-color: var(--accent); }
.mentor-fab[hidden] { display: none; }
.mentor-fab .brain-logo { flex: none; }
.mentor-panel {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 35;
  width: min(430px, calc(100vw - 32px));
  display: none;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mentor-panel.open { display: flex; animation: sheetIn 0.32s var(--ease) both; }
.mentor-page { display: flex; flex-direction: column; min-height: calc(100vh - 210px); padding: 0; overflow: hidden; }
.mentor-page .mt-body { max-width: 860px; width: 100%; margin: 0 auto; }
.mentor-page .mt-form { max-width: 860px; width: 100%; margin: 0 auto 6px; }

.mt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.mt-title { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.mt-title b { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.mt-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.mt-status .dot.ok { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.mt-status .dot.off { background: var(--muted); }
.mt-head-actions { display: inline-flex; gap: 2px; flex: none; }

.mt-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mt-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 8px 4px; }
.mt-empty h3 { margin: 8px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.mt-empty p { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.55; }
.mt-log { display: flex; flex-direction: column; gap: 10px; }
.mt-msg { display: flex; gap: 8px; align-items: flex-end; }
.mt-msg.user { justify-content: flex-end; }
.mt-msg .bubble { max-width: 86%; }
.mt-msg.assistant .bubble { background: color-mix(in srgb, var(--muted) 12%, transparent); border-bottom-left-radius: 6px; }
.mt-msg.user .bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; font-weight: 500; white-space: pre-wrap; }
.mt-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #000; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.mt-tool { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-left: 36px; font-size: 12px; color: var(--muted); }
.mt-tool i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mt-note { align-self: stretch; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 8%, transparent); font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 80%, var(--muted)); }
.mt-note.bad { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--text); }
.mt-prop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; margin-left: 36px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.mt-prop-icon { font-size: 22px; grid-row: span 2; }
.mt-prop-main { display: grid; gap: 2px; min-width: 0; }
.mt-prop-main small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.mt-prop-main b { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.mt-prop-main small.bad { color: var(--bad); text-transform: none; letter-spacing: 0; font-weight: 500; }
.mt-prop-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 2; }
.mt-prop.hecha { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 6%, var(--panel)); }
.mt-prop.hecha .mt-prop-main small { color: var(--good); }
.mt-prop.cancelada, .mt-prop.deshecha { opacity: 0.6; border-color: var(--border); background: transparent; }
.mt-prop.cancelada .mt-prop-main small, .mt-prop.deshecha .mt-prop-main small { color: var(--muted); }
.mt-prop.error { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.mt-all { display: flex; justify-content: flex-end; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.mt-chips .chip { white-space: normal; text-align: left; line-height: 1.35; padding: 6px 12px; }
.mt-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.mt-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; padding: 11px 14px; border-radius: 16px; font: inherit; font-size: 14px; line-height: 1.45; }
.mt-send, .mt-stop { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.mt-send svg { width: 18px; height: 18px; }
.mt-stop { font-size: 13px; }

@media (max-width: 760px) {
  .mentor-fab { right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); width: 52px; padding: 0; justify-content: center; }
  .mentor-fab span { display: none; }
  .mentor-panel { inset: 0; width: 100%; border-radius: 0; border: 0; z-index: 36; padding-bottom: env(safe-area-inset-bottom); }
  .mentor-page { min-height: calc(100vh - 230px); }
  .mt-prop, .mt-tool { margin-left: 0; }
}
@media print { .mentor-fab, .mentor-panel { display: none !important; } }

/* ---------- Entregas: rutinas preparadas fuera de la app ---------- */
.modal.dlv { width: min(820px, 100%); padding-bottom: 0; }
.dlv .section-header h2 { font-family: var(--font-display); font-size: 22px; }
.dlv > p { margin: -6px 0 14px; font-size: 13.5px; }
.dlv-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.dlv-list > li { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); }
.dlv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dlv-head b { font-size: 14.5px; font-weight: 650; }
.dlv-days { flex: none; padding: 2px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 650; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dlv-list > li > small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.dlv-list ol { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.dlv-list ol li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.dlv-list ol em { flex: none; font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); }
.dlv-free { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 4px; padding: 10px 12px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; background: color-mix(in srgb, var(--warn) 12%, transparent); cursor: pointer; }
.dlv-free input { margin-top: 2px; flex: none; }
.dlv-free small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.45; }
/* Los botones siempre a la vista, aunque la lista haga desplazarse el aviso. */
.dlv .button-row { position: sticky; bottom: 0; flex-wrap: wrap; align-items: center; margin: 0 -26px; padding: 14px 26px 22px; background: var(--panel); border-top: 1px solid var(--border); }
/* ---------- iPhone: instalar, vincular con el PC y tacto ---------- */
.install-hint { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.install-hint strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--accent); }
.install-hint p, .pair-steps { margin: 0; font-size: 13.5px; line-height: 1.55; }
.install-hint svg, .pair-steps svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--accent); }
.pair-scan { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; }
.pair-scan svg { width: 20px; height: 20px; }
.pair-paste { display: flex; gap: 8px; margin-top: 6px; }
.pair-paste input { flex: 1; }
.pair-steps { padding-left: 20px; display: grid; gap: 12px; }
.pair-steps li::marker { color: var(--accent); font-weight: 700; }

.qr-scan { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #000; }
.qr-scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-scan-frame { position: relative; width: min(70vw, 300px); aspect-ratio: 1; border-radius: 24px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55); outline: 3px solid var(--accent); outline-offset: -3px; }
.qr-scan p { position: absolute; left: 16px; right: 16px; top: calc(24px + env(safe-area-inset-top)); margin: 0; text-align: center; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.qr-scan button { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); min-width: 160px; background: rgba(20, 20, 22, 0.8); color: #fff; }

/* En pantallas táctiles: sin el zoom de Safari al escribir (lo hace con
   letra de menos de 16 px), sin el destello gris al tocar y sin la
   espera del doble toque. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  html { -webkit-tap-highlight-color: transparent; }
  button, a, label, [role="button"] { touch-action: manipulation; }
}