/* =========================================================
   Bonsái · calma, sobriedad y precisión
   Papel, salvia y piedra. Superficies planas con borde de 1 px,
   letra del sistema y un solo acento, usado con moderación.
   ========================================================= */

/* Permite animar los anillos de progreso */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ---------- Colores (modo claro por defecto) ---------- */
:root {
  --paper: #F6F5F1;           /* fondo liso */
  --card: #FFFFFF;
  --wash: #F0EFEA;            /* rellenos suaves y estado pulsado */
  --hair: #E3E1DA;            /* bordes de 1 px */
  --hair-strong: #CBC8BF;
  --ink: #1E2320;             /* texto principal */
  --ink-2: #5A605B;           /* texto secundario (contraste AA sobre papel y tarjeta) */
  --sage: #4F6F5C;            /* acento: salvia apagada */
  --sage-ink: #3F5E4C;        /* texto en color de acento */
  --sage-soft: #E6ECE7;
  --on-sage: #FFFFFF;         /* texto e iconos sobre el acento */
  --alert: #A5423C;           /* recaídas, borrar */
  --alert-soft: #F6E7E5;
  --on-alert: #FFFFFF;
  --warn: #8C6200;            /* aviso: en el límite (texto y barra, contraste AA sobre la tarjeta) */
  --track: #E8E6E0;           /* fondo de anillos y barras */
  --heat-0: #ECEAE4;          /* casilla vacía de los mapas */
  /* El bonsái de Progreso: maceta de barro, tronco, hojas en tonos salvia y flores sakura */
  --bz-pot: #B87559; --bz-pot-dark: #9A5C43; --bz-soil: #6E5A48; --bz-seed: #9C7B5B;
  --bz-trunk: #7A6352; --bz-bark: #54412F; --bz-jin: #CFC5B6;
  --bz-leaf: #6F9677; --bz-leaf-2: #8DB095; --bz-leaf-3: #557D5E;
  --bz-flower: #E7AEB8; --bz-moss: #7FA06A; --bz-stone: #A9A69C;
  --paused: #D6D3CB;          /* días en pausa en los mapas */
  --bar-bg: rgba(246, 245, 241, 0.82);
  --tab-idle: #5A605B;        /* pestañas no activas */
  --backdrop: rgba(30, 35, 32, 0.36);
  --float-shadow: 0 12px 32px rgba(20, 26, 22, 0.16); /* la única sombra: lo que flota (diálogos, avisos) */
  --toast-bg: #1E2320;
  --toast-ink: #F6F5F1;
  --toast-action: #A7C4B1;

  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;

  --tab-h: 50px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --above-bar: calc(var(--safe-b) + var(--tab-h));
  --text: 1;                  /* tamaño del texto (Ajustes): multiplica todos los font-size */

  color-scheme: light;
}
:root[data-text="large"] { --text: 1.1; }
:root[data-text="xlarge"] { --text: 1.2; }

/* ---------- Modo oscuro: grafito verdoso, no negro puro ----------
   Automático (según el móvil) salvo que en Ajustes se elija claro u oscuro (data-theme en <html>).
   Los dos bloques llevan los mismos colores. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161A18;
    --card: #1D2220;
    --wash: #252B28;
    --hair: #2F3632;
    --hair-strong: #434B46;
    --ink: #E6E9E5;
    --ink-2: #A0A7A1;
    --sage: #8DAE99;
    --sage-ink: #A7C4B1;
    --sage-soft: rgba(141, 174, 153, 0.14);
    --on-sage: #121714;
    --alert: #D98A82;
    --alert-soft: rgba(217, 138, 130, 0.14);
    --on-alert: #1E1210;
    --warn: #E0B25A;
    --track: #2C332F;
    --heat-0: #262C29;
    --bz-pot: #C4876B; --bz-pot-dark: #A0654C; --bz-soil: #8A7462; --bz-seed: #B08F6D;
    --bz-trunk: #A48A76; --bz-bark: #6A5545; --bz-jin: #D8CFC2;
    --bz-leaf: #86AD92; --bz-leaf-2: #A6C8AF; --bz-leaf-3: #648C71;
    --bz-flower: #F0C0C8; --bz-moss: #8FB07A; --bz-stone: #8E8B83;
    --paused: #3A413D;
    --bar-bg: rgba(22, 26, 24, 0.82);
    --tab-idle: #8A918B;
    --backdrop: rgba(0, 0, 0, 0.5);
    --float-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --toast-bg: #E6E9E5;
    --toast-ink: #161A18;
    --toast-action: #3F5E4C;

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161A18;
  --card: #1D2220;
  --wash: #252B28;
  --hair: #2F3632;
  --hair-strong: #434B46;
  --ink: #E6E9E5;
  --ink-2: #A0A7A1;
  --sage: #8DAE99;
  --sage-ink: #A7C4B1;
  --sage-soft: rgba(141, 174, 153, 0.14);
  --on-sage: #121714;
  --alert: #D98A82;
  --alert-soft: rgba(217, 138, 130, 0.14);
  --on-alert: #1E1210;
  --warn: #E0B25A;
  --track: #2C332F;
  --heat-0: #262C29;
  --bz-pot: #C4876B; --bz-pot-dark: #A0654C; --bz-soil: #8A7462; --bz-seed: #B08F6D;
  --bz-trunk: #A48A76; --bz-bark: #6A5545; --bz-jin: #D8CFC2;
  --bz-leaf: #86AD92; --bz-leaf-2: #A6C8AF; --bz-leaf-3: #648C71;
  --bz-flower: #F0C0C8; --bz-moss: #8FB07A; --bz-stone: #8E8B83;
  --paused: #3A413D;
  --bar-bg: rgba(22, 26, 24, 0.82);
  --tab-idle: #8A918B;
  --backdrop: rgba(0, 0, 0, 0.5);
  --float-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --toast-bg: #E6E9E5;
  --toast-ink: #161A18;
  --toast-action: #3F5E4C;

  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 calc(16px * var(--text))/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea { font: inherit; color: inherit; }
button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button:disabled { cursor: default; opacity: 0.4; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Texto solo para lectores de pantalla (su contenedor debe tener position: relative,
   o dentro de una zona con desplazamiento lateral ensancharía la página) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding:
    calc(var(--safe-t) + 4px)
    calc(var(--safe-r) + 16px)
    calc(var(--above-bar) + 32px)
    calc(var(--safe-l) + 16px);
}

/* Etiquetas de sección: pequeñas y en gris, sin mayúsculas */
.section-label {
  margin: 0 0 8px 4px;
  color: var(--ink-2);
  font-size: calc(14px * var(--text));
  font-weight: 500;
}
.section-label.spaced { margin-top: 24px; }

/* ---------- Botones ---------- */
.primary-btn {
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  background: var(--sage);
  color: var(--on-sage);
  font-size: calc(16px * var(--text));
  font-weight: 600;
  transition: opacity 0.15s ease;
}
.primary-btn:active { opacity: 0.8; }
.primary-btn.danger { background: var(--alert); color: var(--on-alert); }

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--card);
  font-size: calc(15px * var(--text));
  font-weight: 500;
  transition: background-color 0.15s ease;
}
.secondary-btn svg { width: 18px; height: 18px; }
.secondary-btn:active { background: var(--wash); }
.secondary-btn.wide { width: 100%; }
.secondary-btn.spaced { margin-top: 16px; }

.text-btn,
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--sage-ink);
  font-size: calc(16px * var(--text));
  font-weight: 500;
  transition: opacity 0.15s ease;
}
.link-btn { font-size: calc(15px * var(--text)); }
.link-btn svg { width: 16px; height: 16px; }
.text-btn:active,
.link-btn:active { opacity: 0.6; }
.link-btn.center { display: flex; width: fit-content; margin: 8px auto 0; }

/* «Editar / Listo» en Hoy: botón de texto */
.pill-btn {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--sage-ink);
  font-size: calc(16px * var(--text));
  font-weight: 500;
  transition: background-color 0.15s ease;
}
.pill-btn:active { background: var(--wash); }
.pill-btn.active { font-weight: 600; }
/* «Restaurar» en Ajustes: pequeño y con borde */
.pill-btn.small {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--hair);
  font-size: calc(14px * var(--text));
}

.add-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sage);
  color: var(--on-sage);
  transition: opacity 0.15s ease;
}
.add-btn svg { width: 20px; height: 20px; stroke-width: 1.75; }
.add-btn:active { opacity: 0.75; }

.icon-btn {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  color: var(--ink-2);
  transition: background-color 0.15s ease;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.danger { color: var(--alert); }
.icon-btn:active { background: var(--wash); }

/* Chips pequeños: la única forma de píldora */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  margin-top: 12px;
  padding: 0 12px 0 9px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage-ink);
  font-size: calc(14px * var(--text));
  font-weight: 500;
  transition: opacity 0.15s ease;
}
.chip svg { width: 16px; height: 16px; stroke-width: 1.75; }
.chip:active { opacity: 0.6; }

.danger-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 28px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--card);
  color: var(--alert);
  font-size: calc(15px * var(--text));
  font-weight: 500;
  transition: background-color 0.15s ease;
}
.danger-btn:active { background: var(--alert-soft); }
.danger-btn.in-card { margin-top: 14px; }
.danger-hint {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  line-height: 1.4;
  text-align: center;
}

/* ---------- Cabecera y títulos ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}
.view > .topbar:empty { min-height: 16px; }

.avatar-bubble {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--card);
  font-size: calc(20px * var(--text));
  line-height: 1;
  transition: background-color 0.15s ease;
}
.avatar-bubble:active { background: var(--wash); }

.greeting {
  display: grid;
  flex: 1;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}
.greeting-hello,
.greeting-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.greeting-hello { color: var(--ink-2); font-size: calc(13px * var(--text)); }
.greeting-name { font-size: calc(15px * var(--text)); font-weight: 600; }

.topbar-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.title-text { min-width: 0; }

/* Títulos grandes en serif (New York en el iPhone) */
h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(34px * var(--text));
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.subtitle {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: calc(15px * var(--text));
}

.day-nav {
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--card);
}
.day-nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 38px;
  transition: background-color 0.15s ease;
}
.day-nav button + button { border-left: 1px solid var(--hair); }
.day-nav button:active { background: var(--wash); }
.day-nav svg { width: 18px; height: 18px; stroke-width: 1.75; }

/* ---------- Tarjetas ---------- */
.card {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
}
.card.clip { overflow: hidden; }
#history .card:first-child,
#progress-view .card:first-child { margin-top: 20px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: calc(16px * var(--text));
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-head .text-btn { font-size: calc(15px * var(--text)); }
.card-count {
  flex-shrink: 0;
  color: var(--ink-2);
  font-size: calc(14px * var(--text));
  font-variant-numeric: tabular-nums;
}
.card-text { margin: 8px 0 14px; color: var(--ink-2); font-size: calc(14px * var(--text)); line-height: 1.45; }
.card-text.first { margin-top: 0; }
.card-title { display: grid; flex: 1; min-width: 0; }
.card-title h2 { flex: none; }
.card-sub {
  overflow: hidden;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.stat {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--wash);
  text-align: left;
}
.stat b {
  display: block;
  font-size: calc(22px * var(--text));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.stat span { display: block; color: var(--ink-2); font-size: calc(12px * var(--text)); line-height: 1.3; }

/* ---------- Emoji editable (avatar del perfil y emoji del hábito) ----------
   El emoji se ve en un <span> centrado con flex; encima hay un <input> invisible del mismo tamaño que
   recoge lo que escribes. Dentro de un <input>, Safari lo recorta por la derecha y lo descentra. */
.emoji-field {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.emoji-glyph {
  display: block;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.emoji-capture {
  /* Del mismo tamaño que el círculo o recuadro, incluido su borde de 1 px */
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: calc(16px * var(--text)); /* 16 px o más: el iPhone no hace zoom al tocarlo */
  text-indent: 0;
  letter-spacing: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.emoji-capture:focus,
.emoji-capture:focus-visible { outline: none; } /* el foco se ve en el recuadro (:focus-within) */

/* Icono de un hábito: su emoji en un cuadrado teñido con su color */
.emoji {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--wash);
  background: color-mix(in srgb, var(--c, var(--sage)) 12%, var(--card));
  font-size: calc(20px * var(--text));
  line-height: 1;
}

/* Anillos de progreso (día, nivel, resumen) */
.ring,
.day-ring,
.summary-ring,
.levelup-ring {
  --p: 0;
  --ring-w: 6px;
  position: relative;
  display: grid;
  place-content: center;
  text-align: center;
}
.ring::before,
.day-ring::before,
.summary-ring::before,
.levelup-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--sage) calc(var(--p) * 1turn), var(--track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - 0.5px), #000 calc(100% - var(--ring-w)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - 0.5px), #000 calc(100% - var(--ring-w)));
}
.ring > *,
.day-ring > *,
.summary-ring > *,
.levelup-ring > * { position: relative; }

.xp-track {
  display: block;
  height: 4px;
  margin: 10px 0 8px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--track);
}
.xp-track.big { height: 6px; margin: 16px 0 0; border-radius: 3px; }
.xp-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--sage);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Hoy: tarjeta principal (día + nivel) ---------- */
.hero-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
  transition: background-color 0.15s ease;
}
.hero-card:active { background: var(--wash); }

.day-ring {
  width: 76px;
  height: 76px;
  transition: --p 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.day-ring-count {
  font-size: calc(20px * var(--text));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.day-ring-count svg { display: block; width: 22px; height: 22px; margin: 0 auto; color: var(--sage); }
.day-ring-label { margin-top: 2px; color: var(--ink-2); font-size: calc(11px * var(--text)); font-weight: 500; }

.hero-info { display: grid; min-width: 0; }
.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  white-space: nowrap;
}
#level-name { font-weight: 500; }
.level-xp { font-variant-numeric: tabular-nums; font-weight: 500; }
.hero-level-title {
  overflow: hidden;
  margin-top: 1px;
  font-family: var(--serif);
  font-size: calc(22px * var(--text));
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.level-next {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shield-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.shield-chip svg { width: 15px; height: 15px; }

/* ---------- Hoy: retos de la semana ---------- */
.challenge-strip {
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
  transition: background-color 0.15s ease;
}
.challenge-strip:active { background: var(--wash); }

/* Modo vacaciones: aviso en Hoy mientras está activo */
.vacation-note {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
}
.vacation-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--wash);
  color: var(--sage-ink);
}
.vacation-icon svg { width: 18px; height: 18px; }
.vacation-note p { margin: 0; color: var(--ink-2); font-size: calc(14px * var(--text)); line-height: 1.35; }
.vacation-note b { color: var(--ink); font-weight: 600; }
.vacation-note .text-btn { min-height: 44px; padding: 0 10px; }
#vacation-list .confirm-list { margin-top: 0; }
.cs-icon,
.rule-icon,
.ch-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.cs-icon svg,
.rule-icon svg,
.ch-icon svg { width: 18px; height: 18px; }
.cs-body { display: grid; gap: 8px; min-width: 0; }
.cs-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: calc(15px * var(--text));
  font-weight: 500;
}
.cs-title b { color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.cs-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cs-bar,
.ch-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--track);
}
/* En curso, a medio tono; completado, en el color del acento; fallado, en gris */
.cs-bar > span,
.ch-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sage);
  background: color-mix(in srgb, var(--sage) 55%, var(--track));
}
.cs-bar.done > span,
.challenge.done .ch-bar > span { background: var(--sage); }
.cs-bar.failed > span,
.challenge.failed .ch-bar > span { background: var(--hair-strong); }
.challenge-strip .chevron { width: 16px; height: 16px; color: var(--ink-2); stroke-width: 1.75; }

/* ---------- Hoy: pista y cabecera de la lista ---------- */
.coach {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--wash);
  color: var(--ink-2);
  font-size: calc(14px * var(--text));
  line-height: 1.4;
}

.list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 24px 4px 8px;
}
.list-title { display: grid; gap: 3px; min-width: 0; }
.list-head h2 { margin: 0; color: var(--ink-2); font-size: calc(14px * var(--text)); font-weight: 500; }
.list-note { color: var(--ink-2); font-size: calc(12px * var(--text)); font-variant-numeric: tabular-nums; }
.list-note.all-done { color: var(--sage-ink); font-weight: 500; }
.habit-total { display: flex; align-items: baseline; gap: 4px; color: var(--ink-2); font-size: calc(12px * var(--text)); white-space: nowrap; }
.habit-total strong { color: var(--sage-ink); font-size: calc(18px * var(--text)); font-variant-numeric: tabular-nums; }

/* ---------- Hoy: lista de hábitos (una tarjeta con separadores finos) ---------- */
.habit-list {
  display: grid;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.habit-list:empty { display: none; }
.habit-list li {
  position: relative;
  transition: transform 0.2s ease;
}
.habit-list li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 64px;
  z-index: 1;
  height: 1px;
  background: var(--hair);
  pointer-events: none;
}
.habit-list li.dragging {
  z-index: 2;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hair), var(--float-shadow);
  transition: none;
}
.habit-list li.dragging::before { display: none; }

.habit {
  --c: var(--sage);
  /* La casilla hecha usa el color del hábito, un poco más oscuro para que la marca se lea bien */
  --c-fill: color-mix(in srgb, var(--c) 80%, #1E2320);
  --on-c: #FFFFFF;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  -webkit-touch-callout: none;
  transition: background-color 0.15s ease;
}
.habit-list li:first-child .habit { border-radius: 13px 13px 0 0; }
.habit-list li:last-child .habit { border-radius: 0 0 13px 13px; }
.habit-list li:only-child .habit { border-radius: 13px; }
.habit:active { background: var(--wash); }

.info { display: grid; min-width: 0; }
.name {
  overflow: hidden;
  font-size: calc(16px * var(--text));
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta {
  margin-top: 1px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -1.5px; stroke-width: 1.75; }
.meta u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.flame { color: var(--ink); font-weight: 500; }
.habit .amount { color: var(--ink); font-weight: 600; }

/* Casilla redonda: se rellena con el color del hábito */
.check {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--hair-strong);
  border-radius: 50%;
  color: transparent;
}
.check svg { width: 15px; height: 15px; stroke-width: 2; }
.habit.done .check { border-color: var(--c-fill); background: var(--c-fill); color: var(--on-c); }
/* Al marcarlo: se rellena en 200 ms, sin botes */
.habit.pop .check { animation: check-fill 0.2s ease-out; }
@keyframes check-fill {
  from { border-color: var(--hair-strong); background-color: transparent; color: transparent; transform: scale(0.88); }
}

/* Cantidad: un anillo fino alrededor de la casilla muestra lo que llevas */
.habit.qty:not(.done) .check { border-color: var(--track); color: var(--c-fill); }
.habit.qty:not(.done) .check::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: conic-gradient(var(--c-fill) calc(var(--fill, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.habit.qty .check svg { width: 14px; height: 14px; }
.habit.target:not(.done) .check { color: transparent; }

/* Descanso y pausa: se atenúan el icono y el nombre (el texto sigue siendo legible) */
.habit.resting:not(.done) .name,
.habit.paused .name { color: var(--ink-2); font-weight: 400; }
.habit.resting:not(.done) .emoji { opacity: 0.55; }
.habit.resting:not(.done) .check { border-color: var(--hair); }
.habit.paused .emoji { opacity: 0.55; filter: grayscale(1); }
.check.pause-mark { border-style: dashed; color: var(--ink-2); }
.check.pause-mark svg { width: 12px; height: 12px; }

/* Recaídas y días protegidos */
.habit.slipped .meta { color: var(--alert); }
.habit.slipped .check { border-color: var(--alert); }
.habit.shielded .meta { color: var(--sage-ink); }

/* Con límite: una barra fina bajo el texto con lo que llevas. Sus colores dicen cómo vas, sea cual sea el del
   hábito: salvia mientras no llegas, ocre en el máximo y el de las recaídas si te pasas. El texto de la fila dice
   lo mismo («en el límite», «te pasaste») y, para que no se corte con el texto grande, puede ocupar dos líneas. */
.habit.limit .meta { white-space: normal; }
.limit-bar {
  display: block;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--track);
}
.limit-bar > span {
  display: block;
  width: calc(var(--limit, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--sage);
}
.habit.at-limit .limit-bar > span { background: var(--warn); }
.habit.slipped .limit-bar > span { background: var(--alert); }
.habit.at-limit .limit-state { color: var(--warn); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .limit-bar > span { transition: width 0.2s ease-out, background-color 0.2s ease-out; }
}

/* Botones junto a la casilla (la nota del día): van fuera del botón del hábito, que es el que marca.
   El hueco (.aux-space) reserva su sitio en la fila y los botones se colocan encima. */
.habit.with-aux { grid-template-columns: 36px 1fr auto auto; }
.aux-space { width: calc(var(--aux, 1) * 36px - 8px); }
.habit-aux {
  position: absolute;
  top: 50%;
  right: 50px;
  display: flex;
  transform: translateY(-50%);
}
.aux-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  border-radius: 10px;
  color: var(--ink-2);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.aux-btn svg { width: 20px; height: 20px; }
.aux-btn:active { background: var(--wash); }
.aux-btn.on { color: var(--sage-ink); }

/* Modo edición: tirador para reordenar */
.grip-space { width: 30px; }
.grip {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  color: var(--ink-2);
  cursor: grab;
  touch-action: none;
  transform: translateY(-50%);
}
.grip svg { width: 20px; height: 20px; }

/* "+10 XP": texto pequeño que sube un poco y se desvanece */
.xp-float {
  position: fixed;
  z-index: 40;
  color: var(--sage-ink);
  font-size: calc(13px * var(--text));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  animation: xp-float 0.9s ease-out forwards;
}
.xp-float.minus,
.xp-float.step { color: var(--ink-2); }
@keyframes xp-float {
  0% { opacity: 0; transform: translate(-50%, 4px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}

/* ---------- Hoy: diario (ánimo y nota) ---------- */
.journal { margin-top: 28px; padding-bottom: 6px; } /* abajo queda «Añadir nota», que ya tiene su altura */
.mood-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.mood-row button {
  display: grid;
  place-items: center;
  height: 44px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  color: var(--ink-2);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mood-row button:active { background: var(--wash); }
.mood-row button[aria-checked="true"] {
  border-color: var(--sage);
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.journal .link-btn { margin-top: 8px; padding: 0 2px; }
.note-actions { margin-top: 4px; }
.note-actions .link-btn { margin-top: 0; padding: 0 2px; color: var(--alert); }
.note-actions .link-btn svg { width: 15px; height: 15px; }
.note-box { position: relative; margin: 12px 0 10px; }
.note-box textarea {
  display: block;
  width: 100%;
  min-height: 84px;
  padding: 10px 12px 24px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
  font-size: calc(16px * var(--text)); /* 16px o más evita el zoom del iPhone */
  line-height: 1.4;
  resize: vertical;
}
.note-box textarea:focus { border-color: var(--sage); outline: none; box-shadow: 0 0 0 3px var(--sage-soft); }
.note-box textarea::placeholder { color: var(--ink-2); opacity: 1; }
.note-count {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: var(--ink-2);
  font-size: calc(11px * var(--text));
  font-variant-numeric: tabular-nums;
}

.list-note strong {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Hoy: rutinas (bloques de hábitos) ---------- */
.routine + .routine,
.routine + .routine-title.others { margin-top: 20px; }
.routine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px 8px;
}
.routine-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: calc(15px * var(--text));
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-title.others { margin: 0 4px 8px; }
.routine-count {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  font-variant-numeric: tabular-nums;
}
.routine-count.done { color: var(--sage-ink); font-weight: 500; }
.routine-count svg { width: 14px; height: 14px; stroke-width: 2; }

/* ---------- Bienvenida ---------- */
.welcome { margin-top: 20px; }
.welcome-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: 8px;
  border-radius: 14px;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.welcome-badge svg { width: 30px; height: 30px; }
.welcome h2 {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: calc(26px * var(--text));
  font-weight: 500;
  letter-spacing: -0.01em;
}
.welcome-intro { max-width: 34em; margin: 8px 0 22px; color: var(--ink-2); font-size: calc(14px * var(--text)); line-height: 1.5; }

/* ---------- Tipos de hábito (bienvenida y al crear uno) ---------- */
.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.welcome .type-grid { margin-bottom: 8px; }
.type-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--card);
  text-align: left;
  transition: background-color 0.15s ease;
}
.type-tile:active { background: var(--wash); }
.type-tile[data-type="custom"] { grid-column: 1 / -1; }
.t-emoji {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--wash);
  color: var(--sage-ink);
  font-size: calc(18px * var(--text));
  line-height: 1;
}
.t-emoji svg { width: 18px; height: 18px; }
.type-text { display: grid; min-width: 0; }
.type-name { font-size: calc(15px * var(--text)); font-weight: 500; line-height: 1.25; }
.type-hint { color: var(--ink-2); font-size: calc(12px * var(--text)); line-height: 1.3; }

.picker-title {
  margin: 0 4px 16px;
  font-family: var(--serif);
  font-size: calc(24px * var(--text));
  font-weight: 500;
}
.type-search input { -webkit-appearance: none; appearance: none; }
.type-search input::-webkit-search-decoration { -webkit-appearance: none; }
.type-group { margin-top: 20px; }
#type-empty { margin-top: 16px; }
.back-btn { margin: -12px 0 4px -6px; }
.back-btn svg { width: 18px; height: 18px; }

/* Deslizador de la meta (y de la cantidad real de un día) */
.slider-card {
  margin-top: 12px;
  padding: 14px 16px 10px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--card);
}
#measure-type + .slider-card { margin-top: 10px; }
.slider-value {
  display: block;
  font-size: calc(28px * var(--text));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}
.slider-value.met { color: var(--sage-ink); }
.slider-value.over { color: var(--alert); }
input[type="range"] {
  display: block;
  width: 100%;
  height: 32px;
  margin: 6px 0 0;
  accent-color: var(--sage);
  touch-action: pan-y;
}
.slider-scale {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
  font-size: calc(12px * var(--text));
  font-variant-numeric: tabular-nums;
}

/* ---------- Estado vacío ---------- */
.empty {
  margin-top: 56px;
  padding: 0 12px;
  text-align: center;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 14px;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.empty-icon svg { width: 28px; height: 28px; }
.empty h2 { margin: 16px 0 6px; font-family: var(--serif); font-size: calc(24px * var(--text)); font-weight: 500; }
.empty p { margin: 0 0 24px; color: var(--ink-2); font-size: calc(15px * var(--text)); }

/* ---------- Progreso: nivel ---------- */
.card.hero { padding: 24px 16px 16px; text-align: center; }
.ring {
  --ring-w: 7px;
  width: 112px;
  height: 112px;
  margin: 0 auto 12px;
}
.ring b { font-size: calc(34px * var(--text)); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }
.hero-level { color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.hero-title { margin: 2px 0 0; font-family: var(--serif); font-size: calc(28px * var(--text)); font-weight: 500; }
.hero-next { margin: 8px 0 0; color: var(--ink-2); font-size: calc(14px * var(--text)); font-variant-numeric: tabular-nums; }
.card.hero .stat { background: var(--wash); }

/* Cómo ganar XP */
.rules {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.rules li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.rules li + li { border-top: 1px solid var(--hair); }
.rule-text b { display: block; font-size: calc(15px * var(--text)); font-weight: 500; line-height: 1.3; }
.rule-text span { display: block; margin-top: 1px; color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.35; }
.rule-xp { font-size: calc(14px * var(--text)); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.rules-note { margin: 12px 0 0; color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.45; }

/* Camino de niveles */
.road {
  display: flex;
  gap: 8px;
  margin: 12px -16px 0;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.road::-webkit-scrollbar { display: none; }
.road-step {
  position: relative;
  display: grid;
  flex: 0 0 96px;
  justify-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  text-align: center;
  scroll-snap-align: center;
}
.road-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  color: var(--ink-2);
  font-size: calc(14px * var(--text));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.road-title { font-size: calc(14px * var(--text)); font-weight: 500; }
.road-xp { color: var(--ink-2); font-size: calc(11px * var(--text)); font-variant-numeric: tabular-nums; }
.road-step.locked .road-title { color: var(--ink-2); font-weight: 400; }
.road-step.done .road-num { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-ink); }
.road-step.done .road-xp { color: var(--sage-ink); }
.road-step.current { border-color: var(--sage); background: var(--sage-soft); }
.road-step.current .road-num { border-color: var(--sage); background: var(--sage); color: var(--on-sage); }

/* Logros: insignias con icono de línea; las bloqueadas en gris con su avance */
.badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
@media (min-width: 480px) {
  .badges { grid-template-columns: repeat(3, 1fr); }
}
.badge {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--hair);
  border-radius: 12px;
}
.badge-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--ink-2);
}
.badge-icon svg { width: 20px; height: 20px; }
.badge.unlocked .badge-icon { background: var(--sage-soft); color: var(--sage-ink); }
.badge b { font-size: calc(14px * var(--text)); font-weight: 600; }
.badge.locked b { color: var(--ink-2); font-weight: 500; }
.badge-desc { color: var(--ink-2); font-size: calc(12px * var(--text)); line-height: 1.35; }
.badge-bar {
  height: 3px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--track);
}
.badge-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink-2); }
.badge-count { margin-top: 4px; color: var(--ink-2); font-size: calc(11px * var(--text)); font-variant-numeric: tabular-nums; }
.badge-done { margin-top: 8px; color: var(--sage-ink); font-size: calc(12px * var(--text)); font-weight: 500; }
.badge-share { justify-self: start; min-height: 40px; margin: 0 0 -8px -4px; font-size: calc(13px * var(--text)); }
.badge-share svg { width: 15px; height: 15px; }

/* Protectores de racha */
.shield-row { display: flex; gap: 8px; margin-top: 12px; }
.shield-slot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px dashed var(--hair-strong);
  border-radius: 10px;
  color: var(--hair-strong);
}
.shield-slot svg { width: 22px; height: 22px; }
.shield-slot.full { border: 1px solid var(--sage); background: var(--sage-soft); color: var(--sage-ink); }
.shield-stats { margin: 12px 0 0; color: var(--ink-2); font-size: calc(13px * var(--text)); font-variant-numeric: tabular-nums; }

/* Retos de la semana (detalle) */
.challenge-list {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.challenge {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
}
.ch-icon { background: var(--wash); color: var(--ink-2); }
.challenge.done .ch-icon { background: var(--sage-soft); color: var(--sage-ink); }
.challenge.failed .ch-icon { opacity: 0.55; }
.ch-body { display: grid; gap: 6px; min-width: 0; }
.ch-body b { font-size: calc(15px * var(--text)); font-weight: 500; line-height: 1.3; }
.ch-meta { color: var(--ink-2); font-size: calc(12px * var(--text)); font-variant-numeric: tabular-nums; }
.challenge.done .ch-meta { color: var(--sage-ink); }

/* ---------- Historial: mapa de calor ---------- */
.heatmap {
  --cell: 13px;
  --gap: 3px;
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.hm-days {
  display: grid;
  grid-template-rows: 14px repeat(7, var(--cell));
  row-gap: var(--gap);
  color: var(--ink-2);
  font-size: calc(10px * var(--text));
  line-height: var(--cell);
}
.hm-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hm-scroll::-webkit-scrollbar { display: none; }
.hm-months,
.hm-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--cell);
  column-gap: var(--gap);
  width: max-content;
}
.hm-months {
  height: 14px;
  color: var(--ink-2);
  font-size: calc(10px * var(--text));
  line-height: 14px;
}
.hm-months span { white-space: nowrap; }
.hm-grid {
  grid-template-rows: repeat(7, var(--cell));
  row-gap: var(--gap);
  margin-top: var(--gap);
}
/* Un solo tono: el color del hábito (--c) a distintas intensidades; el general usa la salvia */
.hm-grid i,
.legend i { border-radius: 3px; background: var(--heat-0); }
.hm-grid .l1, .legend .l1 { background: color-mix(in srgb, var(--c, var(--sage)) 30%, var(--heat-0)); }
.hm-grid .l2, .legend .l2 { background: color-mix(in srgb, var(--c, var(--sage)) 55%, var(--heat-0)); }
.hm-grid .l3, .legend .l3 { background: color-mix(in srgb, var(--c, var(--sage)) 78%, var(--heat-0)); }
.hm-grid .l4, .legend .l4 { background: var(--c, var(--sage)); }
.hm-grid .future { visibility: hidden; }
.hm-grid .rest { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-strong); }
.hm-grid .paused { background: var(--paused); }
.hm-grid .slip { background: color-mix(in srgb, var(--alert) 60%, var(--heat-0)); }
.hm-grid .shield {
  background: color-mix(in srgb, var(--c, var(--sage)) 20%, var(--heat-0));
  box-shadow: inset 0 0 0 1.5px var(--c, var(--sage));
}
.hm-grid .today { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.hm-grid .sel { box-shadow: inset 0 0 0 2px var(--ink); }

.hm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
}
.hm-foot .link-btn { flex-shrink: 0; font-size: calc(14px * var(--text)); }
/* Nota del hábito en el día elegido, con su botón para añadirla o editarla */
.hm-habit-note { display: grid; gap: 2px; }
.hm-habit-note .link-btn { justify-self: start; font-size: calc(14px * var(--text)); }
.hm-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--wash);
  font-size: calc(14px * var(--text));
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.legend {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  color: var(--ink-2);
  font-size: calc(11px * var(--text));
}
.legend i { width: 11px; height: 11px; }
.legend span:first-child { margin-right: 3px; }
.legend span:last-child { margin-left: 3px; }

/* ---------- Historial: la tarjeta de cada hábito abre su ficha ---------- */
.card-head[data-open-detail] { cursor: pointer; }
.stats-btn {
  width: 100%;
  border-radius: 12px;
  text-align: left;
  transition: opacity 0.15s ease;
}
.stats-btn:active { opacity: 0.7; }

/* ---------- Ficha de un hábito ---------- */
#habit-detail-body > .card:first-of-type { margin-top: 0; }
.detail-head { display: flex; align-items: center; gap: 12px; margin: 0 4px 16px; }
.detail-head p { margin: 0; color: var(--ink-2); font-size: calc(14px * var(--text)); line-height: 1.4; }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat span + span { margin-top: 2px; }
.card-text.small { margin: 10px 0 0; font-size: calc(13px * var(--text)); }
.detail-sub { margin: 16px 0 6px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.detail-list { margin: 0; padding: 0; list-style: none; }
.detail-list li {
  padding: 8px 0;
  border-top: 1px solid var(--hair);
  font-size: calc(14px * var(--text));
  line-height: 1.4;
}
.detail-list li:first-child { border-top: 0; }
.detail-list.runs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.detail-list.runs span { color: var(--ink-2); }
.detail-notes { margin: 8px 0 0; padding: 0; list-style: none; }
.detail-notes li + li { border-top: 1px solid var(--hair); }
.detail-notes button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 0;
  text-align: left;
}
.detail-notes button:active { opacity: 0.6; }
.detail-note-day { color: var(--ink-2); font-size: calc(12px * var(--text)); }
.detail-note-text { font-size: calc(15px * var(--text)); line-height: 1.4; overflow-wrap: anywhere; }
.detail-notes + .link-btn,
.card .detail-notes ~ .link-btn { margin-top: 4px; }
.legend-goal { flex-shrink: 0; color: var(--ink-2); font-size: calc(13px * var(--text)); }

/* Gráfica de cantidades: una barra por día, del color del hábito; más clara si no llegó a la meta */
.amount-chart {
  display: block;
  width: 100%;
  height: 110px;
  margin-top: 14px;
  border-radius: 6px;
  overflow: visible;
  stroke: none;
}
.amount-chart:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }
.amount-chart rect { fill: var(--c, var(--sage)); stroke: none; cursor: pointer; }
.amount-chart rect.part { fill: color-mix(in srgb, var(--c, var(--sage)) 45%, var(--card)); }
.amount-chart rect.zero { fill: var(--track); }
.amount-chart rect.over { fill: var(--alert); } /* con límite: los días que te pasaste */
.amount-chart rect.sel { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.amount-chart .goal { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.chart-scale { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ink-2); font-size: calc(11px * var(--text)); }
.chart-sel { min-height: 1.4em; margin: 8px 0 0; font-size: calc(14px * var(--text)); font-variant-numeric: tabular-nums; }
.detail-table { margin-top: 12px; font-size: calc(14px * var(--text)); }
.detail-table summary { min-height: 44px; display: flex; align-items: center; color: var(--sage-ink); font-weight: 500; cursor: pointer; }
.detail-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.detail-table th, .detail-table td { padding: 6px 0; border-top: 1px solid var(--hair); text-align: left; font-weight: 400; }
.detail-table thead th { color: var(--ink-2); font-size: calc(12px * var(--text)); border-top: 0; }
.detail-table td { text-align: right; }

/* ---------- Salud ---------- */
#health-view > :first-child { margin-top: 0; } /* en la hoja, el primer bloque va arriba del todo */
.card-text:last-child { margin-bottom: 0; }
.health-empty { margin: 24px 0 32px; }
.health-value {
  margin: 6px 0 0;
  font-size: calc(40px * var(--text));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.health-value span { margin-left: 6px; color: var(--ink-2); font-size: calc(18px * var(--text)); font-weight: 600; letter-spacing: 0; }
.health-diff { margin: 4px 0 0; color: var(--ink-2); font-size: calc(14px * var(--text)); }
.health-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--wash);
  font-size: calc(14px * var(--text));
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.period-picker { margin-top: 12px; }
.health-chart-empty { margin: 14px 0 0; }
.health-chart {
  margin: 12px -4px 0;
  border-radius: 10px;
  touch-action: pan-y;
  cursor: crosshair;
}
.health-chart svg { display: block; width: 100%; height: auto; stroke: none; }
.hc-grid { stroke: var(--hair); stroke-width: 1; }
.hc-axis { fill: var(--ink-2); font-size: calc(11px * var(--text)); font-variant-numeric: tabular-nums; }
.hc-line { fill: none; stroke: var(--sage); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-dot,
.hc-sel { fill: var(--sage); stroke: var(--card); stroke-width: 2; }
.hc-cross { stroke: var(--ink-2); stroke-width: 1; }
.health-chart:not(.has-sel) .hc-cross,
.health-chart:not(.has-sel) .hc-sel { display: none; }
/* Con la media de 7 días, los registros pasan a segundo plano y la media lleva el color del acento */
.hc-line.soft { stroke: color-mix(in srgb, var(--sage) 40%, var(--card)); stroke-width: 1.5; }
.hc-dot.soft { fill: color-mix(in srgb, var(--sage) 40%, var(--card)); }
.hc-avg { fill: none; stroke: var(--sage); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hc-bar { fill: var(--sage); }
.hc-bar.soft { fill: color-mix(in srgb, var(--sage) 40%, var(--card)); }
.hc-range { stroke: var(--sage); stroke-width: 3; stroke-linecap: round; }
.hc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: calc(12px * var(--text));
}
.hc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hc-legend i { display: inline-block; width: 16px; border-top: 2px solid; border-radius: 1px; }
.hc-legend .raw { border-color: color-mix(in srgb, var(--sage) 40%, var(--card)); }
.hc-legend .avg { border-top-width: 3px; border-color: var(--sage); }
/* Tu objetivo: una línea discontinua en el color del texto secundario (sin colores de aviso) */
.hc-goal { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hc-legend .goal { border-top: 2px dashed var(--ink-2); }
.health-goal { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--hair); }
.health-goal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.health-goal-head .detail-sub { margin: 8px 0 0; color: var(--ink); font-size: calc(14px * var(--text)); font-weight: 600; }
.health-goal-head .text-btn { flex-shrink: 0; font-size: calc(15px * var(--text)); }
.health-goal .card-text.small { margin-top: 6px; }
.health-goal-link { margin-top: 10px; }
.health-goal-types button { min-height: 44px; line-height: 1.2; }
/* Medidas personalizadas: «Editar» en la lista y su diálogo */
.metric-row.custom .pill-btn.small { margin: -2px 0 12px; }
.health-custom-new { margin-top: 14px; }
.health-field.hc-group { margin-top: 16px; }
.hc-options button { min-height: 44px; padding: 0 4px; line-height: 1.2; }
.hc-group .hint { margin-top: 8px; }
.hc-range { margin-top: 16px; }
.health-goal-fields { margin-top: 14px; }
.pair-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Resumen: una tarjeta por medida; la elegida se ve en detalle debajo */
.health-coach { margin-top: 20px; }
.health-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.health-coach + .health-tiles { margin-top: 12px; }
.health-tile {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.health-tile:active { background: var(--wash); }
.health-tile[aria-pressed="true"] { border-color: var(--sage); box-shadow: inset 0 0 0 1px var(--sage); }
.ht-label,
.ht-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-label { color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.ht-value { font-size: calc(21px * var(--text)); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.ht-value small { margin-left: 4px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 600; letter-spacing: 0; }
.ht-sub { color: var(--ink-2); font-size: calc(12px * var(--text)); }
.health-quick { margin-top: 10px; }
.health-tiles + .card,
.health-quick + .card { margin-top: 12px; }
.health-detail .card-head .text-btn { flex-shrink: 0; }
.health-detail .card-head .text-btn svg { width: 18px; height: 18px; }

/* Botón que se activa y se desactiva (la media de 7 días) */
.toggle-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.toggle-chip[aria-pressed="true"] { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-ink); }

.stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.health-compare { margin: 10px 0 0; color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.45; }

/* Resumen de 7, 30 y 90 días: una columna por periodo. Si no cabe (texto muy grande), se desplaza la tabla, no la página. */
.summary-scroll { position: relative; margin-top: 10px; overflow-x: auto; }
.health-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(14px * var(--text));
  font-variant-numeric: tabular-nums;
}
.health-summary th,
.health-summary td { padding: 7px 0 7px 10px; border-top: 1px solid var(--hair); text-align: right; white-space: nowrap; }
.health-summary thead th,
.health-summary thead td { border-top: 0; color: var(--ink-2); font-size: calc(12px * var(--text)); font-weight: 500; }
.health-summary th[scope="row"] { padding-left: 0; color: var(--ink-2); font-weight: 400; text-align: left; white-space: normal; }
.health-summary th[scope="rowgroup"] { padding: 14px 0 6px; font-weight: 600; text-align: left; }
.health-summary-card .card-text.small + .card-text.small { margin-top: 6px; }

/* Relación con tus hábitos: los días que lo hiciste frente a los que no */
.relation-picker { margin-top: 4px; }
.relation-list { margin: 12px 0 0; padding: 0; list-style: none; }
.relation { padding: 12px 0; border-top: 1px solid var(--hair); }
.relation:last-child { padding-bottom: 0; }
.relation-name {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: calc(15px * var(--text));
  font-weight: 600;
}
.relation .card-text.small { margin-top: 4px; }
.relation-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}
/* Las cifras, a la misma altura aunque una etiqueta ocupe dos líneas */
.relation-stats div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: var(--wash); }
.relation-stats dt { flex: 1; color: var(--ink-2); font-size: calc(12px * var(--text)); line-height: 1.3; }
.relation-stats dd {
  margin: 2px 0 0;
  font-size: calc(18px * var(--text));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.2;
}
.relation-stats dd span { display: block; color: var(--ink-2); font-size: calc(12px * var(--text)); font-weight: 400; }
.relation-diff { margin: 8px 0 0; font-size: calc(14px * var(--text)); font-variant-numeric: tabular-nums; }
.relation-empty { margin-top: 12px; }

/* ---------- Informe para el médico ---------- */
/* Mientras se ve, ocupa el sitio de la app (y es lo único que se imprime) */
html.reporting main,
html.reporting .timer-bar,
html.reporting .tabbar { display: none !important; }
.report-intro { margin: -6px 4px 4px; }
.report-metrics { display: grid; gap: 6px; }
.report-dates { margin-top: 10px; }
.report {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 32px) calc(var(--safe-l) + 16px);
}
.report-bar { display: grid; gap: 8px; }
.report-bar .text-btn { justify-self: start; margin-left: -6px; }
.report-bar .text-btn svg { width: 18px; height: 18px; }
.report-hint { margin: 0 4px; }
.report-doc {
  margin-top: 16px;
  padding: 20px 16px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  font-size: calc(15px * var(--text));
  line-height: 1.45;
}
.report-doc h1 { font-size: calc(28px * var(--text)); }
#report-title:focus { outline: none; }
.report-kicker { margin: 0 0 6px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.report-meta { margin: 8px 0 0; font-weight: 600; }
.report-small { margin: 6px 0 0; color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.4; }
.report-metric { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--hair-strong); }
.report-metric h2 { margin: 0; font-size: calc(21px * var(--text)); font-weight: 600; overflow-wrap: anywhere; }
.report-unit { color: var(--ink-2); font-weight: 400; }
.report-metric > p { margin: 4px 0 0; color: var(--ink-2); }
.report-block { margin-top: 20px; }
.report-block h3 { margin: 0 0 6px; font-size: calc(15px * var(--text)); font-weight: 600; }
.report-block > p { margin: 6px 0 0; }
.report-doc .summary-scroll { margin-top: 0; }
.report-chart { margin: 0; }
.report-chart svg { display: block; width: 100%; height: auto; stroke: none; }
.report-chart .hc-cross,
.report-chart .hc-sel { display: none; }
.report-chart figcaption { margin-top: 6px; color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.4; }
.report-list { margin: 8px 0 0; padding-left: 20px; }
.report-list li + li { margin-top: 6px; }
.report-records { position: relative; overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--text)); font-variant-numeric: tabular-nums; }
.report-table th,
.report-table td { padding: 6px 10px 6px 0; border-top: 1px solid var(--hair); text-align: left; vertical-align: top; }
.report-table th:last-child,
.report-table td:last-child { padding-right: 0; overflow-wrap: anywhere; }
.report-table thead th { border-top: 0; color: var(--ink-2); font-size: calc(12px * var(--text)); font-weight: 500; }
.report-table td:first-child { white-space: nowrap; }
.report-table .num { white-space: nowrap; }

@media print {
  @page { margin: 14mm 12mm; }
  /* Blanco y negro, también si el móvil está en modo oscuro, y con el tamaño de texto normal */
  html.reporting:root {
    --paper: #FFFFFF; --card: #FFFFFF; --wash: #F2F2F2; --hair: #999999; --hair-strong: #000000;
    --ink: #000000; --ink-2: #333333; --sage: #000000; --sage-ink: #000000; --text: 1;
    color-scheme: light;
  }
  html.reporting,
  html.reporting body { min-height: 0; background: #FFFFFF; color: #000000; }
  html.reporting body > :not(#report) { display: none !important; }
  .report { max-width: none; padding: 0; }
  .report-bar { display: none !important; }
  .report-doc { margin: 0; padding: 0; border: 0; border-radius: 0; font-size: 10.5pt; }
  .report-doc h1 { font-size: 18pt; }
  .report-metric { margin-top: 18pt; padding-top: 12pt; }
  .report-metric h2 { font-size: 14pt; }
  .report-block h3 { font-size: 11pt; }
  .report-small,
  .report-chart figcaption { font-size: 9pt; }
  .report-table,
  .report-doc .health-summary { font-size: 9.5pt; }
  .report-doc .health-summary { width: auto; min-width: 55%; }
  .report-doc .health-summary td,
  .report-doc .health-summary thead th { padding-left: 24pt; }
  .report-records,
  .report-doc .summary-scroll { overflow: visible; }
  /* Saltos de página: la cabecera de la tabla se repite, y no se parten las filas, las gráficas ni los resúmenes */
  .report-table thead { display: table-header-group; }
  .report-table tr,
  .report-head,
  .report-chart,
  .report-block:not(.report-records) { break-inside: avoid; }
  .report-doc h2,
  .report-doc h3 { break-after: avoid; }
  .report-chart .hc-line,
  .report-chart .hc-avg,
  .report-chart .hc-range { stroke: #000000; }
  .report-chart .hc-dot { fill: #000000; stroke: #FFFFFF; }
  .report-chart .hc-bar { fill: #666666; }
  .report-chart .hc-grid { stroke: #CCCCCC; }
  .report-chart .hc-axis { fill: #000000; }
  .report-chart .hc-goal { stroke: #000000; stroke-dasharray: 5 4; }
}
.health-buttons { display: grid; gap: 8px; margin-top: 12px; }
.health-reminder .reminder-row { margin-top: 12px; }

/* Formulario: una medida, varias (registro rápido) o editar */
.health-quick-hint { margin: -6px 4px 14px; }
.health-fields { display: grid; gap: 14px; }
.health-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.health-field legend { margin-bottom: 6px; padding: 0 0 0 4px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.pair-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.form-card .field.health-date { margin-top: 14px; }
.form-card #health-form-error { margin-top: 10px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tag[aria-pressed="true"] { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-ink); }

/* Elegir medidas y unidades */
.health-metrics-hint { margin: -4px 4px 8px; }
.metric-row + .metric-row { border-top: 1px solid var(--hair); }
.metric-row .segmented { margin-bottom: 12px; }
.health-caption {
  min-height: 20px;
  margin: 6px 0 0;
  color: var(--ink);
  font-size: calc(14px * var(--text));
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.health-list {
  margin: 8px -16px -8px;
  padding: 0;
  list-style: none;
}
.health-list li + li { border-top: 1px solid var(--hair); }
.health-row {
  display: grid;
  grid-template-columns: 1fr auto 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px 8px 16px;
  text-align: left;
  transition: background-color 0.15s ease;
}
.health-row:active { background: var(--wash); }
.health-row-text { display: grid; min-width: 0; }
.health-row-text b { font-size: calc(15px * var(--text)); font-weight: 500; }
.health-row-text span {
  overflow: hidden;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-row-value { font-size: calc(15px * var(--text)); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.health-row .chevron { width: 16px; height: 16px; color: var(--ink-2); stroke-width: 1.75; }

.modal-card.form-card { text-align: left; }
.form-card h2 { margin-bottom: 16px; text-align: center; }
.form-card .text-btn { justify-content: center; }
.form-card .field + .field,
.form-card .field-error + .field { margin-top: 14px; }
.form-card .field input { background: var(--paper); }
.form-card .field input[aria-invalid="true"] { border-color: var(--alert); }
.form-card .confirm-actions { margin-top: 20px; }
.field-error { margin: 6px 4px 0; color: var(--alert); font-size: calc(13px * var(--text)); line-height: 1.35; }
.form-card.scroll { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.check-list { margin: 18px 0 0; padding: 0; border: 0; }
.check-list legend { padding: 0 0 6px 4px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.check-list .card-text { margin: 0; }
.check-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 0;
  cursor: pointer;
}
.check-row + .check-row { border-top: 1px solid var(--hair); }
.check-row.plain {
  grid-template-columns: minmax(0, 1fr) 24px;
  padding: 6px 12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
}
.form-card .confirm-body { margin-bottom: 14px; }
.hm-grid i:focus-visible { outline: none; } /* al enfocarla se elige: se ve con el borde de .sel */
.check-text { display: grid; min-width: 0; }
.check-text b { overflow: hidden; font-size: calc(15px * var(--text)); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.check-text span { color: var(--ink-2); font-size: calc(12px * var(--text)); }
.check-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--sage); cursor: pointer; }
.form-card .hint { margin-bottom: 0; }

/* Desplegable con el mismo aspecto que los campos de texto */
.field select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858379' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  color: var(--ink);
  font: inherit;
  font-size: calc(17px * var(--text));
  -webkit-appearance: none;
  appearance: none;
}
.field select:focus { border-color: var(--sage); outline: none; box-shadow: 0 0 0 3px var(--sage-soft); }
.secondary-btn.danger-text { color: var(--alert); }

/* ---------- Zen ---------- */
/* Tarjetas de Hoy que abren Salud y Zen */
.link-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
  transition: background-color 0.15s ease;
}
.link-card:active { background: var(--wash); }
.link-card-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.link-card-icon svg { width: 20px; height: 20px; }
.link-card-text { display: grid; gap: 1px; min-width: 0; }
.link-card-text b { font-size: calc(15px * var(--text)); font-weight: 600; }
.link-card-text span { color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.35; }
.link-card .chevron { width: 16px; height: 16px; color: var(--ink-2); stroke-width: 1.75; }

/* Tarjeta de Zen en Hoy: la entrada a Zen y, debajo, «Necesito calma» (dos botones en una misma tarjeta) */
.zen-card {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
}
.zen-card .link-card { margin: 0; border: 0; border-radius: 0; }
.calm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border-top: 1px solid var(--hair);
  background: var(--sage-soft);
  color: var(--sage-ink);
  font-size: calc(15px * var(--text));
  font-weight: 600;
  transition: opacity 0.15s ease;
}
.calm-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
.calm-btn:active { opacity: 0.7; }
/* En Zen, arriba del todo y más grande */
.calm-btn.big {
  min-height: 64px;
  border: 0;
  border-radius: 14px;
  background: var(--sage);
  color: var(--on-sage);
  font-size: calc(18px * var(--text));
}
.hint.calm-hint { margin: 8px 0 16px; }

/* «Necesito calma»: textos tranquilos y botones grandes */
.calm-lead { margin: 4px 0 0; color: var(--ink-2); font-size: calc(16px * var(--text)); line-height: 1.45; text-align: center; }
.calm-actions { display: grid; gap: 10px; margin-top: 20px; }
.calm-actions .primary-btn,
.calm-actions .secondary-btn { width: 100%; min-height: 56px; border-radius: 14px; font-size: calc(18px * var(--text)); }
.calm-end { margin-top: 24px; text-align: center; }
.calm-end h2 { margin: 16px 0 8px; font-family: var(--serif); font-size: calc(28px * var(--text)); font-weight: 500; line-height: 1.25; }
.calm-end > p { margin: 0 0 6px; color: var(--ink-2); font-size: calc(16px * var(--text)); line-height: 1.45; }
.calm-end .calm-small { margin-top: 12px; font-size: calc(14px * var(--text)); }

/* Hoja de Zen */
.sheet-slot { justify-self: start; }
.sheet-head .zen-back { margin-left: -6px; }
.zen-back svg { width: 18px; height: 18px; }
#zen-title:focus { outline: none; }
.zen-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sage-soft);
  color: var(--sage-ink);
  font-size: calc(14px * var(--text));
  font-weight: 500;
}
.zen-quote { margin-top: 0; }
.zen-quote-text { margin: 0; font-family: var(--serif); font-size: calc(20px * var(--text)); line-height: 1.35; }
.section-label.zen-label { margin-top: 24px; }
.zen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.zen-tile {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
  transition: background-color 0.15s ease;
}
.zen-tile:active { background: var(--wash); }
.zen-tile-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.zen-tile-icon svg { width: 18px; height: 18px; }
.zen-tile b { font-size: calc(15px * var(--text)); font-weight: 600; }
.zen-tile > span:last-child { color: var(--ink-2); font-size: calc(12px * var(--text)); line-height: 1.35; }

/* Prácticas: opciones, tiempo y controles */
.tag[aria-checked="true"] { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-ink); }
.tag:disabled { opacity: 0.5; }
.zen-choices { justify-content: center; margin-top: 14px; }
.zen-phase {
  min-height: 1.3em;
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: calc(26px * var(--text));
  line-height: 1.3;
  text-align: center;
}
.zen-time {
  min-height: 1.4em;
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: calc(15px * var(--text));
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.zen-controls { display: grid; gap: 8px; margin-top: 18px; }
.zen-controls .text-btn { justify-content: center; }

/* Respiración: el círculo crece al inhalar y se encoge al exhalar, al ritmo de cada fase */
.breath-stage {
  display: grid;
  place-items: center;
  height: 220px;
  margin-top: 16px;
}
.breath-circle {
  width: 200px;
  height: 200px;
  border: 2px solid var(--sage);
  border-radius: 50%;
  background: var(--sage-soft);
  transform: scale(0.5);
  transition-property: transform;
  transition-timing-function: ease-in-out;
}
.breath-circle.full { transform: scale(1); }
.breath-circle.almost { transform: scale(0.85); } /* suspiro: la primera inhalación; «inhala otra vez» lo llena */
@media (prefers-reduced-motion: reduce) {
  .breath-circle,
  .breath-circle.full,
  .breath-circle.almost { transform: scale(0.7); }
}
/* Tipos de respiración: de dos en dos, para que quepan con cualquier tamaño de texto */
.segmented.breaths { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Escaneo corporal y relajación muscular: el paso actual en grande y una barra con el avance */
.guide-list { margin-top: 14px; color: var(--ink-2); font-size: calc(14px * var(--text)); }
.guide-list summary { min-height: 44px; padding: 10px 0; color: var(--sage-ink); font-weight: 600; cursor: pointer; }
.guide-list ol { margin: 0; padding-left: 22px; line-height: 1.6; }
.guide-bar { height: 4px; overflow: hidden; border-radius: 2px; background: var(--track); }
.guide-bar span { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: var(--sage); }
.guide-count { margin: 14px 0 0; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; text-align: center; }
.guide-title { margin: 6px 0 0; font-family: var(--serif); font-size: calc(30px * var(--text)); font-weight: 500; line-height: 1.2; text-align: center; }
.guide-text { max-width: 30em; margin: 14px auto 0; font-size: calc(17px * var(--text)); line-height: 1.5; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .guide-bar span { transition: width 0.6s ease; }
}

/* Modo dormir: casi negro y mínimo, en cualquier tema. Todo es un botón para salir. Los grises son tenues, pero
   siguen teniendo contraste suficiente sobre negro (6,4:1 el texto y 5,4:1 la pista). */
.sheet.sleep-mode {
  inset: 0;
  max-width: none;
  border-radius: 0;
  background: #000;
  color: #8a908b;
}
.sheet.sleep-mode::backdrop { background: #000; }
.sheet.sleep-mode .sheet-head { display: none; }
.sheet.sleep-mode .sheet-body { display: flex; padding: 0; }
.sleep-exit {
  display: grid;
  flex: 1;
  place-items: center;
  width: 100%;
  min-height: 100%;
  padding: calc(var(--safe-t) + 24px) 24px calc(var(--safe-b) + 24px);
  color: #8a908b;
  text-align: center;
}
.sleep-exit:focus-visible { outline: 2px solid #7d837e; outline-offset: -10px; }
.sleep-inner { display: grid; justify-items: center; gap: 18px; }
.sleep-exit .breath-stage { margin: 0; }
.sleep-exit .breath-circle { border-color: #4a5a50; background: #0b0f0d; }
.sleep-exit .zen-phase { color: #8a908b; }
.sleep-moon svg { width: 44px; height: 44px; color: #7d837e; stroke-width: 1.25; }
.sleep-title { font-family: var(--serif); font-size: calc(30px * var(--text)); }
.sleep-text { max-width: 22em; font-size: calc(16px * var(--text)); line-height: 1.45; }
.sleep-hint { margin-top: 24px; color: #7d837e; font-size: calc(14px * var(--text)); }
.sleep-mix p { margin: 0; }
.sleep-mix-names { margin-top: 4px !important; font-size: calc(17px * var(--text)); font-weight: 500; }
.sleep-mix .link-btn { margin-top: 8px; }
.pack-sleep-link { margin: -4px 0 8px; }
.health-sleep-link { margin-top: 14px; }

/* Vaciar la cabeza: al soltarlo, el texto sube un poco, se desenfoca y se desvanece (sin moverse si se pide
   reducir movimiento: entonces se borra al momento) */
.dump-box textarea { min-height: 220px; background: var(--card); }
.dump-done { min-height: 1.4em; margin: 10px 0 0; color: var(--sage-ink); font-size: calc(15px * var(--text)); font-weight: 500; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .dump-box.letting-go textarea { animation: let-go 1.2s ease-in forwards; }
}
@keyframes let-go {
  to { opacity: 0; filter: blur(6px); transform: translateY(-28px) scale(0.98); }
}

/* Meditación: el anillo se completa con el tiempo */
.ring.zen-ring { --ring-w: 8px; width: 200px; height: 200px; margin: 8px auto 0; }
.ring.zen-ring b { font-size: calc(40px * var(--text)); }

/* Sonidos */
.zen-sound {
  min-height: 56px;
  padding: 0 12px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--card);
  font-size: calc(15px * var(--text));
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.zen-sound[aria-checked="true"] { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-ink); }
.zen-volume { display: grid; gap: 4px; margin-top: 18px; }
.zen-volume span { padding-left: 4px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
/* Mezclador: cada sonido, con su botón (dentro o fuera de la mezcla) y su volumen */
.mixer { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.mix-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(96px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--card);
}
.mix-row.on { border-color: var(--sage); }
.mix-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: calc(15px * var(--text));
  font-weight: 500;
  text-align: left;
}
.mix-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--hair-strong);
  border-radius: 50%;
}
.mix-check svg { width: 14px; height: 14px; stroke-width: 2; }
.mix-row.on .mix-check { border-color: var(--sage); background: var(--sage); color: var(--on-sage); }
.mix-row input[type="range"] { margin: 0; }
.mix-row input[type="range"]:disabled { opacity: 0.4; }

/* 5-4-3-2-1 */
.zen-steps { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.zen-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  font-size: calc(15px * var(--text));
}
.zen-steps b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.zen-big {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: calc(72px * var(--text));
  line-height: 1;
  text-align: center;
}
.zen-dots { display: flex; justify-content: center; gap: 8px; }
.zen-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--track); }
.zen-dots .done { background: var(--sage); }
.zen-dots .now { box-shadow: 0 0 0 2px var(--sage); background: var(--card); }

/* Gratitud y emociones */
.zen-fields { display: grid; gap: 12px; }
.zen-history { display: grid; margin: 0; padding: 0; list-style: none; }
.zen-history > li { padding: 10px 0; font-size: calc(14px * var(--text)); }
.zen-history > li + li { border-top: 1px solid var(--hair); }
.zen-history > li > b { display: block; margin-bottom: 4px; font-size: calc(13px * var(--text)); font-weight: 600; }
.zen-history ul { margin: 0; padding-left: 18px; color: var(--ink-2); line-height: 1.45; }
.zen-history.emotions > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.zen-emotion-text { display: grid; gap: 1px; min-width: 0; }
.zen-emotion-text b { font-size: calc(15px * var(--text)); font-weight: 500; }
.zen-emotion-text span { overflow-wrap: anywhere; color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.35; }
/* Las cinco intensidades en una fila si caben; si no (pantalla estrecha o texto grande), pasan a otra fila */
.segmented.five { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.6em), 1fr)); }
.segmented.five button { padding: 0 2px; font-size: calc(12px * var(--text)); }
.zen-summary { margin-top: 16px; }

/* Intención del día: en Hoy (solo si la escribiste) y su historial en Zen */
.intention-card {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
}
.intention-card .kicker { margin: 0; }
.intention-text { margin: 4px 0 0; overflow-wrap: anywhere; font-family: var(--serif); font-size: calc(19px * var(--text)); line-height: 1.35; }
.intention-ask { margin: 12px 0 0; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.intention-rate { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.intention-rate .tag[aria-pressed="true"] { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-ink); }
.zen-history.intentions > li { display: grid; gap: 4px; }
.intention-past { overflow-wrap: anywhere; font-family: var(--serif); font-size: calc(16px * var(--text)); }
.intention-result { color: var(--sage-ink); font-size: calc(13px * var(--text)); font-weight: 600; }
.emotion-time .segmented { margin-bottom: 4px; }
.emotion-time .card-text { margin-top: 12px; }
/* Seis columnas: con texto grande, la fecha puede ocupar dos líneas para que quepan */
.emotion-time .mb-label { line-height: 1.2; text-align: center; white-space: normal; }

/* Al terminar una práctica */
.zen-result { margin-top: 24px; text-align: center; }
.zen-result h2 { margin: 16px 0 8px; font-family: var(--serif); font-size: calc(26px * var(--text)); font-weight: 500; }
.zen-result p { margin: 0 0 6px; color: var(--ink-2); font-size: calc(15px * var(--text)); line-height: 1.45; }
.zen-result .confirm-actions { margin-top: 20px; }

/* ---------- Ajustes ---------- */
.section-label.group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 8px 4px;
}
#view-settings .section-label.group:first-of-type { margin-top: 20px; }
#view-settings .card { margin-top: 0; }

.profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Avatar del perfil: círculo de 64 px con el emoji a la mitad (32 px) */
.avatar-field {
  width: 64px;
  height: 64px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--wash);
}
.avatar-field .emoji-glyph { font-size: calc(32px * var(--text)); }
.avatar-field:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-soft); }
.profile-info { display: grid; gap: 1px; min-width: 0; }
.profile-name {
  overflow: hidden;
  font-family: var(--serif);
  font-size: calc(22px * var(--text));
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-name.no-name { color: var(--ink-2); font-family: var(--sans); font-size: calc(17px * var(--text)); font-weight: 500; }
.profile-level { color: var(--sage-ink); font-size: calc(14px * var(--text)); font-weight: 500; }
.profile-since { color: var(--ink-2); font-size: calc(13px * var(--text)); }

.divider { height: 1px; margin: 16px -16px; background: var(--hair); }

.setting-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
}

.beta-pill {
  padding: 1px 7px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: calc(10px * var(--text));
  font-weight: 600;
  letter-spacing: 0.04em;
}

.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.backup-date { margin: 12px 0 0; color: var(--ink-2); font-size: calc(13px * var(--text)); }
.backup-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.backup-due {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sage-soft);
  color: var(--sage-ink);
  font-size: calc(14px * var(--text));
  font-weight: 500;
  line-height: 1.4;
}

/* Interruptores: casillas nativas (role="switch") con aspecto de interruptor.
   El fondo apagado y la bola cumplen 3:1 de contraste en los dos temas. */
.switch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 0;
  cursor: pointer;
}
.switch-row + .switch-row { border-top: 1px solid var(--hair); }
.switch-text { display: grid; gap: 1px; }
.switch-text b { font-size: calc(15px * var(--text)); font-weight: 500; line-height: 1.3; }
.switch-text span { color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.35; }
.switch-row input {
  position: relative;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: var(--hair-strong);
  background: color-mix(in srgb, var(--ink-2) 70%, var(--card));
  cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.switch-row input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--on-sage);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.switch-row input:checked { background: var(--sage); }
.switch-row input:checked::before { transform: translateX(20px); }

/* Almacenamiento: etiqueta a la izquierda y valor a la derecha */
.info-rows { margin: 0; padding: 0; list-style: none; }
.info-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: calc(14px * var(--text));
}
.info-rows li:first-child { padding-top: 0; }
.info-rows li + li { border-top: 1px solid var(--hair); }
.info-rows span { color: var(--ink-2); }
.info-rows b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
#storage-persist { margin-top: -2px; }

/* Ayuda: filas que abren un diálogo */
.link-list { margin: -8px 0; padding: 0; list-style: none; }
.link-list li + li { border-top: 1px solid var(--hair); }
.link-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 0;
  text-align: left;
  transition: opacity 0.15s ease;
}
.link-row:active { opacity: 0.6; }
.link-row .chevron { width: 16px; height: 16px; color: var(--ink-2); stroke-width: 1.75; }
.rule-icon.danger { background: var(--alert-soft); color: var(--alert); }


.archived-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.archived-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.archived-list li:first-child { padding-top: 0; }
.archived-list li:last-child { padding-bottom: 0; }
.archived-list li + li { border-top: 1px solid var(--hair); }
.archived-info { display: grid; flex: 1; min-width: 0; }
.archived-info b {
  overflow: hidden;
  font-size: calc(15px * var(--text));
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archived-info span { color: var(--ink-2); font-size: calc(12px * var(--text)); font-variant-numeric: tabular-nums; line-height: 1.35; }

.routine-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.routine-list:empty { display: none; }
.routine-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.routine-list li:first-child { padding-top: 0; }
.routine-list li + li { border-top: 1px solid var(--hair); }
.routine-info { display: grid; flex: 1; min-width: 0; }
.routine-info b,
.routine-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-info b { font-size: calc(15px * var(--text)); font-weight: 500; }
.routine-info span { color: var(--ink-2); font-size: calc(12px * var(--text)); line-height: 1.35; }

.app-version {
  margin: 28px 0 0;
  color: var(--ink-2);
  font-size: calc(12px * var(--text));
  line-height: 1.5;
  text-align: center;
}
/* Enlace al repositorio, debajo de la versión (relative: por su texto .sr-only) */
.repo-link {
  position: relative;
  text-decoration: none;
}

/* ---------- Barra de pestañas: de lado a lado, translúcida ---------- */
.tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  height: calc(var(--tab-h) + var(--safe-b));
  /* En pantallas anchas los botones se quedan centrados, a la anchura del contenido */
  padding: 0 max(var(--safe-r), calc(50% - 280px)) var(--safe-b) max(var(--safe-l), calc(50% - 280px));
  border-top: 1px solid var(--hair);
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--tab-idle);
  font-size: calc(10px * var(--text));
  font-weight: 500;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.tab:active { opacity: 0.6; }
/* La activa: color del acento, algo más gruesa y con el icono relleno a medio tono */
.tab[aria-current="page"] { color: var(--sage-ink); font-weight: 600; }
.tab[aria-current="page"] svg { fill: color-mix(in srgb, currentColor 18%, transparent); }
.tab:focus-visible { outline-offset: -4px; border-radius: 10px; }

/* ---------- Hoja para crear / editar ---------- */
.sheet {
  position: fixed;
  inset: calc(var(--safe-t) + 12px) 0 0 0;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: var(--paper);
  color: var(--ink);
}
.sheet[open] { animation: sheet-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet::backdrop { background: var(--backdrop); }
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet form,
.sheet-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sheet-frame { position: relative; }
.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  padding: 6px calc(var(--safe-r) + 16px) 6px calc(var(--safe-l) + 16px);
  border-bottom: 1px solid var(--hair);
}
.sheet-head h2 { margin: 0; font-size: calc(17px * var(--text)); font-weight: 600; }
.sheet-head .text-btn { justify-self: start; }
.sheet-head .text-btn.end { justify-self: end; }
.save-btn {
  justify-self: end;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--sage);
  color: var(--on-sage);
  font-size: calc(15px * var(--text));
  font-weight: 600;
  transition: opacity 0.15s ease;
}
.save-btn:active { opacity: 0.8; }

.sheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 32px) calc(var(--safe-l) + 16px);
}

/* Emoji del hábito: recuadro de 88 px teñido con su color y el emoji a la mitad (44 px) */
.habit-emoji-field {
  --c: var(--sage);
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border: 1px solid var(--hair);
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--hair));
  border-radius: 22px;
  background: var(--card);
  background: color-mix(in srgb, var(--c) 12%, var(--card));
}
.habit-emoji-field .emoji-glyph { font-size: calc(44px * var(--text)); }
.habit-emoji-field:focus-within { border-color: var(--c); }
.hint {
  margin: 10px 0 22px;
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  line-height: 1.4;
  text-align: center;
}
.hint.left { margin: 10px 4px 0; text-align: left; }

/* Una sola columna que nunca pasa del ancho del contenedor (en un grid, el mínimo de cada campo sería su contenido) */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field.spaced { margin-top: 22px; }
.field span { padding-left: 4px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.field input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--card);
  font-size: calc(17px * var(--text)); /* 16px o más evita que el iPhone haga zoom */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder { color: var(--ink-2); opacity: 1; }
.field input:focus { border-color: var(--sage); outline: none; box-shadow: 0 0 0 3px var(--sage-soft); }
/* Fecha y hora: en iPhone, Safari les pone su propio aspecto, un ancho mínimo mayor que el del campo
   y el texto centrado. Sin él quedan idénticos a los demás campos (el selector nativo se sigue abriendo). */
.field input[type="date"],
.field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.field input::-webkit-date-and-time-value { margin: 0; padding: 0; text-align: left; }
/* En iPhone y iPad, Safari centra el valor en vertical porque el campo es flex con align-items: center
   (así lo hace su hoja de estilos interna); se mantiene, en bloque para que ocupe todo el ancho.
   Solo allí (-webkit-touch-callout solo existe en iOS): en Chrome, con flex, su icono de calendario
   dejaría de ir a la derecha. */
@supports (-webkit-touch-callout: none) {
  .field input[type="date"],
  .field input[type="time"] {
    display: flex;
    align-items: center;
  }
}
.unit-field { margin-top: 12px; }

/* Control segmentado, como en iOS */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--wash);
}
.segmented.two { grid-template-columns: 1fr 1fr; }
.segmented button {
  min-height: 36px;
  padding: 0 6px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: calc(14px * var(--text));
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.segmented.two button { min-height: 44px; line-height: 1.2; }
.segmented button[aria-checked="true"] {
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--ink);
}

.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.weekday-row button {
  min-height: 40px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink-2);
  font-size: calc(14px * var(--text));
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.weekday-row button[aria-pressed="true"] { border-color: var(--sage); background: var(--sage); color: var(--on-sage); }

.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 6px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--card);
}
.stepper button {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--wash);
  font-size: calc(22px * var(--text));
  transition: opacity 0.15s ease;
}
.stepper button:active { opacity: 0.6; }
.stepper button:last-child { margin-left: auto; }
.stepper output,
.stepper input {
  font-size: calc(22px * var(--text));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}
.stepper output { min-width: 26px; }
.stepper input {
  width: 64px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.stepper input:focus { outline: none; background: var(--sage-soft); }
.stepper span { flex: 1; color: var(--ink-2); font-size: calc(15px * var(--text)); }

.color-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 0 4px;
}
.color-swatch {
  position: relative;
  width: 100%;
  max-width: 36px;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: var(--sw);
}
.color-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--sw); }
/* Marca de elegido: una uve blanca dibujada con dos bordes */
.color-swatch[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 11px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -62%) rotate(45deg);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}
.emoji-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--card);
  font-size: calc(22px * var(--text));
  line-height: 1;
  transition: background-color 0.15s ease;
}
.card .emoji-grid button { background: var(--wash); }
.emoji-grid button[aria-pressed="true"],
.card .emoji-grid button[aria-pressed="true"] { border-color: var(--sage); background: var(--sage-soft); }

.pause-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--card);
}
.pause-text { margin: 0; color: var(--ink-2); font-size: calc(14px * var(--text)); line-height: 1.4; }
.pause-box .field input { background: var(--paper); }

.reminder-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: end;
  gap: 10px;
}
.reminder-row .secondary-btn { min-height: 48px; padding: 0 10px; font-size: calc(14px * var(--text)); line-height: 1.2; }

/* ---------- Diálogos ---------- */
.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: calc(var(--safe-t) + 16px) 20px calc(var(--safe-b) + 16px);
  border: 0;
  background: transparent;
  color: var(--ink);
}
.modal[open] { display: grid; place-items: center; }
.modal::backdrop { background: var(--backdrop); }
.modal-card {
  width: 100%;
  max-width: 340px;
  padding: 24px 20px 16px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--float-shadow);
  text-align: center;
  animation: modal-in 0.22s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
}
.modal-card h2 { margin: 0; font-family: var(--serif); font-size: calc(28px * var(--text)); font-weight: 500; }
.kicker { margin: 0 0 4px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }

/* Subida de nivel: el anillo se completa despacio */
.levelup-ring {
  --p: 1;
  width: 104px;
  height: 104px;
  margin: 4px auto 16px;
  animation: ring-fill 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) 0.1s both;
}
.levelup-ring b { font-size: calc(32px * var(--text)); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }
@keyframes ring-fill {
  from { --p: 0; }
}
.levelup-sub { margin: 6px 0 20px; color: var(--ink-2); font-size: calc(15px * var(--text)); }
.levelup-achievements,
.summary-list {
  display: grid;
  gap: 8px;
  margin: -4px 0 20px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.levelup-achievements li,
.summary-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--wash);
  font-size: calc(14px * var(--text));
}
.levelup-achievements b,
.summary-list b { display: block; color: var(--ink-2); font-size: calc(12px * var(--text)); font-weight: 500; }
.sum-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card);
  color: var(--sage-ink);
}
.sum-icon svg { width: 18px; height: 18px; }

/* Apuntar la cantidad real de un día */
.log-card .slider-value { margin-top: 16px; font-size: calc(34px * var(--text)); }
.log-card input[type="range"] { margin-top: 10px; }
.log-goal { margin: 10px 0 18px; color: var(--ink-2); font-size: calc(14px * var(--text)); font-variant-numeric: tabular-nums; }
.log-goal.at { color: var(--warn); font-weight: 600; }
.log-goal.over { color: var(--alert); font-weight: 600; }
.log-card .text-btn { justify-content: center; }

/* Confirmación */
.confirm-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.confirm-icon svg { width: 22px; height: 22px; }
.confirm-icon.danger { background: var(--alert-soft); color: var(--alert); }
.modal-card h2.confirm-title { margin: 12px 0 0; font-size: calc(22px * var(--text)); }
.confirm-body {
  margin: 10px 0 20px;
  color: var(--ink-2);
  font-size: calc(15px * var(--text));
  line-height: 1.45;
  text-align: left;
}
.confirm-body p { margin: 0; }
.confirm-body p + p { margin-top: 8px; }
.confirm-body b { color: var(--ink); font-weight: 600; }
.confirm-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.confirm-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
  font-size: calc(14px * var(--text));
}
.confirm-list svg { width: 18px; height: 18px; margin-top: 1px; color: var(--alert); }
.confirm-list li.keep svg { color: var(--sage-ink); }
.confirm-list + p { margin-top: 12px; }
.confirm-body .link-btn { display: flex; width: fit-content; margin: 8px auto -8px; }
.confirm-actions { display: grid; gap: 8px; }
.confirm-actions .secondary-btn { width: 100%; }

/* Ayuda: bienvenida, preguntas frecuentes y novedades */
.info-card {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}
.modal-card.info-card h2 { margin-bottom: 16px; font-size: calc(24px * var(--text)); text-align: center; }
.info-card .summary-list { margin: 0 0 20px; }
.info-card .summary-list li { align-items: flex-start; }
.info-card .summary-list b { color: var(--ink); font-size: calc(14px * var(--text)); font-weight: 600; }
.info-body { margin-bottom: 20px; }
.info-body .summary-list:last-child { margin-bottom: 0; }
.faq { border-bottom: 1px solid var(--hair); }
.faq:first-child { border-top: 1px solid var(--hair); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 0;
  font-size: calc(15px * var(--text));
  font-weight: 500;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; color: var(--ink-2); transition: transform 0.2s ease; }
.faq[open] summary svg { transform: rotate(90deg); }
.faq p { margin: 0 0 12px; color: var(--ink-2); font-size: calc(14px * var(--text)); line-height: 1.5; }
.news-title { margin: 0 0 6px; font-size: calc(15px * var(--text)); font-weight: 600; }
.news-group { margin: 0 0 4px; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 600; }
.news-list {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: calc(14px * var(--text));
  line-height: 1.5;
}
.news-list:last-child { margin-bottom: 0; }
.news-list li + li { margin-top: 4px; }

/* Resumen de la semana */
.summary-card {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-card h2.summary-title { font-size: calc(22px * var(--text)); }
.summary-hero { display: grid; justify-items: center; gap: 6px; margin: 16px 0 4px; }
.summary-ring { --ring-w: 7px; width: 112px; height: 112px; }
.summary-ring b { font-size: calc(26px * var(--text)); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; }
.summary-sub { margin: 0; color: var(--ink-2); font-size: calc(14px * var(--text)); }
.delta {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wash);
  color: var(--ink-2);
  font-size: calc(13px * var(--text));
  font-weight: 500;
}
.delta.up { background: var(--sage-soft); color: var(--sage-ink); }
.summary-card .stats { margin-bottom: 4px; }
.summary-list { margin-top: 12px; }
.summary-card .primary-btn { margin-top: 4px; }

/* Revisión semanal */
.review-nav {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 12px;
}
.review-week { display: grid; text-align: center; }
.review-week b { font-family: var(--serif); font-size: calc(20px * var(--text)); font-weight: 500; }
.review-week span { color: var(--ink-2); font-size: calc(13px * var(--text)); }
.review-section { margin-top: 24px; }
.review-section .card { margin-top: 0; }
.review-overview {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 16px;
}
.review-overview .summary-ring { width: 96px; height: 96px; }
.review-overview .summary-ring b { font-size: calc(22px * var(--text)); }
.review-overview-text { display: grid; justify-items: start; gap: 8px; }
.review-overview-text p { margin: 0; font-size: calc(15px * var(--text)); line-height: 1.4; }
.review-sub { margin: 16px 0 0; color: var(--ink-2); font-size: calc(13px * var(--text)); font-weight: 500; }
.review-section .summary-list { margin: 12px 0 0; }
.review-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.review-list li:first-child { padding-top: 0; }
.review-list li + li { border-top: 1px solid var(--hair); }
.review-list li:last-child { padding-bottom: 0; }
.review-habit { display: grid; min-width: 0; }
.review-habit b {
  overflow: hidden;
  font-size: calc(15px * var(--text));
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-habit span { color: var(--ink-2); font-size: calc(13px * var(--text)); line-height: 1.35; }
/* Los 7 días de la semana en fila, con las mismas casillas que el Historial */
.hm-grid.review-days {
  --cell: 11px;
  grid-auto-flow: row;
  grid-template-rows: none;
  grid-template-columns: repeat(7, var(--cell));
  grid-auto-rows: var(--cell);
  gap: 3px;
  margin: 0;
}
.review-list.plan li { grid-template-columns: 36px minmax(0, 1fr); }
.review-actions { display: flex; flex-wrap: wrap; grid-column: 2; gap: 8px; }

/* Columnas pequeñas (una sola serie) */
.mini-bars {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 4px;
  margin-top: 10px;
}
.mini-bar { display: grid; justify-items: center; gap: 4px; }
.mb-value { color: var(--ink); font-size: calc(12px * var(--text)); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.mb-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-bottom: 1px solid var(--hair);
}
.mb-fill {
  display: block;
  width: 100%;
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--sage) 45%, var(--card));
}
.mini-bar.em .mb-fill { background: var(--sage); }
.mb-label { color: var(--ink-2); font-size: calc(11px * var(--text)); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tendencias (plegables) */
.trends-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -16px;
  padding: 16px;
  border-radius: 13px;
  list-style: none;
  cursor: pointer;
}
.trends-summary::-webkit-details-marker { display: none; }
.trends-summary .card-title h2 { margin: 0; font-size: calc(16px * var(--text)); font-weight: 600; }
.trends-summary > svg { width: 18px; height: 18px; color: var(--ink-2); transition: transform 0.2s ease; }
.trends[open] .trends-summary > svg { transform: rotate(90deg); }
.trends-summary:focus-visible { outline-offset: -2px; }
.trends-body { margin-top: 28px; }
.trends-body .card-text { margin-bottom: 0; }
.trend-title { margin: 20px 0 0; font-size: calc(14px * var(--text)); font-weight: 600; }
.trend-text,
.trend-empty { margin: 8px 0 0; font-size: calc(14px * var(--text)); line-height: 1.45; }
.trend-empty { color: var(--ink-2); }
.trend-list { margin-top: 10px; }

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed;
  bottom: calc(var(--above-bar) + 12px);
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--toast-bg);
  box-shadow: var(--float-shadow);
  color: var(--toast-ink);
  font-size: calc(15px * var(--text));
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease-out;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.show.has-action { pointer-events: auto; }
.toast button {
  min-height: 36px;
  color: var(--toast-action);
  font-weight: 600;
}

/* ---------- El bonsái que crece contigo (Progreso y Hoy) ---------- */
.bonsai { display: block; width: 144px; height: 144px; margin: -4px auto 8px; stroke: none; }
.bonsai.small { width: 100%; height: 100%; margin: 0; }
/* En la tarjeta de Hoy, junto al título del nivel */
.hero-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.level-bonsai { flex-shrink: 0; width: calc(34px * var(--text)); height: calc(34px * var(--text)); margin: -6px -2px -4px 0; }
.bz-pot { fill: var(--bz-pot); }
.bz-pot-dark { fill: var(--bz-pot-dark); }
.bz-soil { fill: var(--bz-soil); }
.bz-seed { fill: var(--bz-seed); }
.bz-trunk { fill: none; stroke: var(--bz-trunk); stroke-linecap: round; stroke-linejoin: round; }
.bz-trunk-fill { fill: var(--bz-trunk); }
.bz-root { fill: none; stroke: var(--bz-trunk); stroke-width: 1.4; stroke-linecap: round; }
.bz-bark { fill: none; stroke: var(--bz-bark); stroke-width: 1; stroke-linecap: round; }
.bz-jin { fill: none; stroke: var(--bz-jin); stroke-width: 1.6; stroke-linecap: round; }
.bz-leaf { fill: var(--bz-leaf); }
.bz-leaf-2 { fill: var(--bz-leaf-2); }
.bz-leaf-3 { fill: var(--bz-leaf-3); }
.bz-flower { fill: var(--bz-flower); }
.bz-moss { fill: none; stroke: var(--bz-moss); stroke-width: 1.4; stroke-linecap: round; }
.bz-stone { fill: var(--bz-stone); }
/* La copa se mece despacio, como con brisa (nada si se pide «reducir movimiento») */
@media (prefers-reduced-motion: no-preference) {
  .bonsai .bz-crown { transform-box: view-box; transform-origin: 60px 91px; animation: bz-sway 7s ease-in-out infinite; }
}
@keyframes bz-sway { 50% { transform: rotate(1.2deg); } }

/* ---------- Temporizador de un hábito: barra fija encima de las pestañas ---------- */
.timer-bar {
  position: fixed;
  bottom: calc(var(--above-bar) + 10px);
  left: 50%;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(528px, calc(100% - 24px - var(--safe-l) - var(--safe-r)));
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--float-shadow);
  transform: translateX(-50%);
}
.timer-info { display: grid; flex: 1; min-width: 0; }
.timer-info b {
  overflow: hidden;
  font-size: calc(15px * var(--text));
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--ink-2); font-size: calc(13px * var(--text)); }
.timer-time { color: var(--ink); font-size: calc(15px * var(--text)); font-variant-numeric: tabular-nums; font-weight: 600; }
.timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.timer-bar.paused .timer-dot { background: var(--hair-strong); }
/* Un pulso suave mientras cuenta (sin movimiento si se pide «reducir movimiento») */
@media (prefers-reduced-motion: no-preference) {
  .timer-bar:not(.paused) .timer-dot { animation: timer-pulse 2s ease-in-out infinite; }
}
@keyframes timer-pulse { 50% { opacity: 0.35; } }
.timer-btn {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--wash);
  color: var(--ink);
  font-size: calc(15px * var(--text));
  font-weight: 600;
  transition: opacity 0.15s ease;
}
.timer-btn svg { width: 20px; height: 20px; }
.timer-btn:active { opacity: 0.6; }
.timer-btn.primary { padding: 0 14px; background: var(--sage); color: var(--on-sage); }
/* Con el temporizador a la vista, el final de la página y los avisos suben para no quedar debajo */
:root.has-timer main { padding-bottom: calc(var(--above-bar) + 104px); }
:root.has-timer .toast { bottom: calc(var(--above-bar) + 84px); }
/* En la fila del hábito: el tiempo que lleva, delante de la racha */
.timer-chip { color: var(--sage-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Sin movimiento para quien lo pide en el sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}