/* ============================================================================
   Samapp 1.24.0 — Hábitos
   ----------------------------------------------------------------------------
   Selectores .habit* / .habits* únicamente. Ni un color propio: todo sale de
   tokens.css, así que Claro/Oscuro × Sobrio/Pastel funcionan sin una regla
   por tema. El verde es --ctx-finanzas; el "verde suave" se mezcla contra
   --surface para que no derive de matiz en oscuro.

   Regla 90/10: el único color de la pantalla vive en el anillo, los puntos
   cumplidos, los checks y la burbuja del icono de cada hábito.
   ========================================================================== */

:root {
  /* Relleno sólido (anillo, puntos, checks, marcas de semana). Se mezcla un
     poco con la tinta: en Sobrio apenas se nota; en Pastel, donde el verde
     del token es muy claro, sube el contraste de la palomita blanca sin
     salirse de la paleta. En Oscuro la tinta es clara, así que aclara —y ahí
     la palomita se pinta con --surface (oscura), no con blanco. Medido. */
  --habit-green: color-mix(in srgb, var(--ctx-finanzas) 60%, var(--ink));
  /* Texto e iconos en verde: mezclado hacia la tinta fuerte para leerse en
     los cuatro cruces Claro/Oscuro × Sobrio/Pastel (≥ 3:1). */
  --habit-green-ink: color-mix(in srgb, var(--ctx-finanzas) 55%, var(--ink-strong));
  --habit-green-soft: color-mix(in srgb, var(--ctx-finanzas) 38%, var(--surface));
  --habit-green-tint: color-mix(in srgb, var(--ctx-finanzas) 12%, var(--surface));
  --habit-gray: var(--ink-faint);
  --habit-gray-faint: var(--surface-sunken);
  --habit-on-green: #fff;
}
:root[data-theme="dark"] { --habit-on-green: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --habit-on-green: var(--surface); }
}

/* ------------------------------------------------------------ Cabecera -- */
.habits-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
}
.habits-head-main { min-width: 0; }
.habits-add { flex: 0 0 auto; gap: 6px; margin-bottom: 2px; }
.habits-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.habits-range { font-size: 0.8125rem; color: var(--ink-muted); white-space: nowrap; }

/* ------------------------------------------------------------- Resumen -- */
.habits-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-low);
}
.habits-ring { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.habits-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.habits-ring-track { fill: none; stroke: var(--habit-gray-faint); stroke-width: 9; }
.habits-ring-fill {
  fill: none;
  stroke: var(--habit-green);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .45s var(--ease);
}
.habits-ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1;
}
.habits-ring-text strong { font-size: 21px; font-weight: 600; color: var(--ink-strong); letter-spacing: -.01em; }
.habits-ring-text strong span { font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); }
.habits-ring-text small { margin-top: 4px; font-size: 0.625rem; color: var(--ink-muted); line-height: 1.2; }
.habits-summary-body { min-width: 0; }
.habits-streak {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.9375rem; font-weight: 600; color: var(--habit-green-ink);
}
.habits-streak .i { font-size: 1.125rem; }
.habits-quote { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.35; color: var(--ink-muted); }
/* 2.1.1 — Chevrons a --ink-muted: medidos en 2.42-2.75:1 sobre su fila. */
.habits-summary-chevron { color: var(--ink-muted); }
.habits-summary-chevron .i { font-size: 1.125rem; }

/* ---------------------------------------------------------- Fila de hábito */
.habits-list { display: flex; flex-direction: column; gap: var(--s2); }
.habit-row {
  display: grid;
  /* 1.29 — Tres columnas: icono, nombre y palomita. Los siete puntos de la
     semana ya no compiten aquí con el nombre —viven en el resumen y en el
     detalle—, así que a 390px el nombre pasa de ~150px a ~250px y "Meditar
     por la mañana" cabe entero. El botón del check mide 44 y ocupa 36 de
     columna (margen negativo). */
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.habit-row:hover { background: var(--surface-hover); }
.habit-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.habit-row.is-paused { grid-template-columns: 36px minmax(0, 1fr) 36px; opacity: .72; }
.habit-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--ctx-tint, var(--surface-sunken));
  /* El trazo se acerca a la tinta fuerte: en Pastel los --ctx son tan claros
     que el icono se perdía sobre su propio tinte (1.3:1, medido). */
  color: color-mix(in srgb, var(--ctx, var(--ink-muted)) 60%, var(--ink-strong));
}
.habit-icon .i { font-size: 1.125rem; }
.habit-body { min-width: 0; }
.habit-name {
  font-size: 0.875rem; font-weight: 600; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.habit-meta { margin-top: 1px; font-size: 0.75rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.habit-row.is-done .habit-name { color: var(--ink); }

/* Siete indicadores: punto arriba, letra abajo. */
.habit-days { display: flex; gap: 6px; flex: 0 0 auto; }
.habit-day { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 10px; }
/* --ink-muted, no --ink-faint: a 9px la letra necesita los 5.9:1 (faint da 2.6). */
.habit-day small { font-size: 0.625rem; line-height: 1; color: var(--ink-muted); font-weight: 500; }
.habit-dot {
  display: block; width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--habit-gray);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.habit-dot[data-state="done"]   { background: var(--habit-green); }
.habit-dot[data-state="off"]    { background: var(--habit-green-soft); }
.habit-dot[data-state="missed"] { background: var(--habit-gray); }
.habit-dot[data-state="today"]  { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.habit-dot[data-state="future"] { background: var(--habit-gray-faint); }

/* Check: botón de 44px (área táctil), círculo de 32px dibujado dentro. */
.habit-check {
  position: relative;
  width: 44px; height: 44px;
  margin: -6px -4px;
  padding: 0; border: 0; background: transparent;
  cursor: pointer;
  display: grid; place-items: center;
  border-radius: var(--r-full);
}
.habit-check::before {
  content: "";
  position: absolute;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--habit-gray);
  background: var(--surface);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .16s var(--ease);
}
.habit-check svg { position: relative; width: 16px; height: 16px; fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.habit-check[aria-pressed="true"]::before { background: var(--habit-green); border-color: var(--habit-green); }
.habit-check[aria-pressed="true"] svg { stroke: var(--habit-on-green); }
.habit-check:hover::before { border-color: var(--ink-faint); }
.habit-check[aria-pressed="true"]:hover::before { border-color: var(--habit-green); }
.habit-check:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.habit-check:active::before { transform: scale(.92); }
/* Al marcar, un pequeño rebote — sutil, sin confeti. */
@keyframes habit-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.habit-check.habit-pop[aria-pressed="true"]::before { animation: habit-pop .28s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .habit-check.habit-pop[aria-pressed="true"]::before { animation: none; }
  .habits-ring-fill { transition: none; }
}

/* 320–359px: no hay sitio para nombre + siete puntos + check en una línea.
   El nombre puede partirse en dos renglones (nunca recortarse), los puntos
   se aprietan y el icono baja a 34px. Medido en 320: "Registrar gastos"
   entero, sin scroll horizontal. */
@media (max-width: 359px) {
  .habit-row { grid-template-columns: 34px minmax(0, 1fr) 36px; gap: 8px; padding: 10px 10px 10px 10px; }
  .habit-row.is-paused { grid-template-columns: 34px minmax(0, 1fr) 36px; }
  .habit-icon { width: 34px; height: 34px; }
  .habit-icon .i { font-size: 1.0625rem; }
  .habit-name {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 0.875rem; line-height: 1.2;
  }
  .habit-days { gap: 4px; }
  .habit-day { width: 9px; }
  .habits-ring { width: 92px; height: 92px; }
  .habits-ring-text strong { font-size: 1.1875rem; }
  .habits-summary { gap: var(--s3); padding: var(--s4); }
  .habits-quote { font-size: 0.8125rem; }
}

/* ----------------------------------------------------------- Tu semana -- */
.habits-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.habits-week-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-width: 0;
}
.habits-week-day small { font-size: 0.6875rem; color: var(--ink-muted); }
.habits-week-day strong { font-size: 0.875rem; font-weight: 600; color: var(--ink-strong); line-height: 1; }
.habits-week-day.is-today { border-color: var(--ink-faint); }
.habits-week-mark {
  display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 2px;
  border-radius: var(--r-full);
  background: var(--habit-gray-faint);
  border: 1.5px solid transparent;
}
.habits-week-mark svg { width: 12px; height: 12px; fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.habits-week-day[data-state="full"] .habits-week-mark { background: var(--habit-green); }
.habits-week-day[data-state="full"] .habits-week-mark svg { stroke: var(--habit-on-green); }
.habits-week-day[data-state="partial"] .habits-week-mark { background: var(--habit-green-soft); }
.habits-week-day[data-state="partial"] .habits-week-mark svg { stroke: var(--habit-on-green); }
.habits-week-day[data-state="none"] .habits-week-mark { background: var(--habit-gray); }
.habits-week-day[data-state="today"] .habits-week-mark { background: transparent; border-color: var(--ink-faint); }
.habits-week-day[data-state="future"] .habits-week-mark { background: var(--habit-gray-faint); }

/* ------------------------------------------------------- Tres métricas -- */
.habits-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s4);
}
.habits-stat {
  min-width: 0;
  padding: 10px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.habits-stat-head {
  display: flex; align-items: flex-start; gap: 4px;
  font-size: 0.6875rem; line-height: 1.2; color: var(--ink-muted); font-weight: 500; letter-spacing: -.005em;
}
/* "Hábito más constante" no cabe en una línea a 390px: se parte en dos en vez
   de recortarse. Las tres tarjetas comparten fila, así que igualan altura. */
.habits-stat-head span { min-width: 0; }
.habits-stat-head .i { margin-top: 1px; }
.habits-stat-head .i { font-size: 0.8125rem; flex: 0 0 auto; }
.habits-stat:nth-child(1) .habits-stat-head .i { color: var(--habit-green-ink); }
.habits-stat:nth-child(2) .habits-stat-head .i { color: var(--ctx-sillasmx); }
.habits-stat:nth-child(3) .habits-stat-head .i { color: var(--ctx-sillasmx); }
.habits-stat strong {
  display: block; margin-top: 6px;
  font-size: 1.125rem; font-weight: 600; line-height: 1.2; color: var(--ink-strong); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El nombre del hábito puede partirse en dos líneas; una cifra, nunca. */
.habits-stat strong.user-content { white-space: normal; font-size: 1rem; }
.habits-stat small { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--ink-muted); line-height: 1.2; }
/* En pantallas muy estrechas: 2 + 1, nunca tres tarjetas apiladas enormes. */
@media (max-width: 359px) {
  .habits-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .habits-stat:last-child { grid-column: 1 / -1; }
}
/* 2.1.2 — con letra grande las tarjetas se reparten según el tamaño de letra
   (la cifra «18 de 65» ya se cortaba al 130 % y al 200 % había scroll
   horizontal): caben 3, 2 + 1 o 1 por fila, y la que queda sola ocupa el ancho,
   igual que el 2 + 1 de abajo. Con letra normal siguen siendo 3 columnas
   iguales (medido de 360 a 1440). Por debajo de 360 se conserva la rejilla. */
@media (min-width: 360px) {
  .habits-stats { display: flex; flex-wrap: wrap; }
  .habits-stat { flex: 1 1 6rem; }
}

/* ---------------------------------------------------- Sam motivacional -- */
.habits-sam {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3) var(--s3) var(--s3) var(--s2);
}
.habits-sam-mark { width: 56px; height: 56px; }
.habits-sam-bubble {
  position: relative;
  padding: 10px 14px;
  background: var(--surface-sunken);
  border-radius: var(--r-lg);
}
.habits-sam-bubble::before {
  content: ""; position: absolute; left: -6px; top: 50%;
  width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg);
  background: var(--surface-sunken); border-radius: 2px;
}
.habits-sam-bubble strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-strong); }
.habits-sam-bubble p { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-muted); }
/* La nota "manuscrita" se resuelve por composición (rotación, tamaño, peso),
   no con una fuente descargada: Quicksand sigue siendo la única tipografía. */
.habits-sam-note {
  flex: 0 0 auto;
  font-size: 0.8125rem; line-height: 1.2; font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: .01em;
  text-align: center;
  transform: rotate(-6deg);
  padding: 0 4px;
}
@media (max-width: 359px) {
  .habits-sam { grid-template-columns: auto minmax(0, 1fr); }
  .habits-sam-note { display: none; }
}

/* ---------------------------------------------------------- Vacío ------- */
.habits-empty {
  width: min(100%, 420px);
  margin: var(--s6) auto 0;
  padding: var(--s7) var(--s5);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.habits-empty-mark { width: 64px; height: 64px; margin: 0 auto var(--s4); }
.habits-empty h2 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--ink-strong); }
.habits-empty p { margin: var(--s2) 0 var(--s5); font-size: 0.875rem; color: var(--ink-muted); line-height: 1.35; }

/* ---------------------------------------------------------- Formulario -- */
.habit-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.habit-fieldset legend { margin-bottom: var(--s2); font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); }
.habit-chipset { display: flex; gap: var(--s2); flex-wrap: wrap; }
.habit-chip, .habit-daychip { position: relative; cursor: pointer; }
.habit-chip input, .habit-daychip input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.habit-chip span {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--s4);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  background: var(--surface-sunken); color: var(--ink-muted);
  font-size: var(--t-meta); font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.habit-chip input:checked + span { background: var(--action); color: var(--action-ink); }
.habit-chip input:focus-visible + span, .habit-daychip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.habit-days-picker { display: flex; gap: 6px; margin-top: var(--s3); }
.habit-daychip span {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--surface-sunken); color: var(--ink-muted);
  font-size: 0.8125rem; font-weight: 600;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* 2.1.2 — el mismo token que la palomita: en Oscuro la letra va en --surface
   (el blanco fijo daba 2.07:1 sobre el verde menta). */
.habit-daychip input:checked + span { background: var(--habit-green); color: var(--habit-on-green); }
[data-freq-section][hidden] { display: none; }
.habit-weekly-field { margin-top: var(--s3); }
.habit-weekly-field input { max-width: 140px; }
.habit-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.habit-form-actions { display: flex; flex-direction: column; gap: var(--s2); }
@media (max-width: 359px) {
  .habit-two { grid-template-columns: 1fr; }
  .habit-days-picker { gap: 4px; }
  .habit-daychip span { width: 36px; height: 36px; }
}

/* ------------------------------------------------------------- Detalle -- */
.habit-detail { display: flex; flex-direction: column; gap: var(--s4); }
.habit-detail-hero { display: flex; align-items: center; gap: var(--s3); }
.habit-detail-hero .habit-icon { width: 44px; height: 44px; }
.habit-detail-hero .habit-icon .i { font-size: 22px; }
.habit-detail-hero strong { display: block; font-size: 1rem; font-weight: 600; color: var(--ink-strong); }
.habit-detail-hero small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-muted); }
.habit-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.habit-detail-stat {
  padding: 10px 12px;
  background: var(--surface-sunken);
  border-radius: var(--r-md);
}
.habit-detail-stat small { display: block; font-size: 0.75rem; color: var(--ink-muted); }
.habit-detail-stat strong { display: block; margin-top: 4px; font-size: 1.0625rem; font-weight: 600; color: var(--ink-strong); }
.habit-heat { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.habit-heat i {
  display: block; aspect-ratio: 1;
  border-radius: 4px;
  background: var(--habit-gray-faint);
  border: 1px solid transparent;
}
.habit-heat i[data-state="done"]   { background: var(--habit-green); }
.habit-heat i[data-state="missed"] { background: var(--habit-gray); }
.habit-heat i[data-state="off"]    { background: transparent; border-color: var(--line); }
.habit-heat i[data-state="today"]  { background: transparent; border-color: var(--ink-faint); }
.habit-detail-info { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
.habit-detail-info div { min-width: 0; }
.habit-detail-info dt { font-size: 0.75rem; color: var(--ink-muted); }
.habit-detail-info dd { margin: 1px 0 0; font-size: 0.875rem; color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------- Escritorio -- */
@media (min-width: 900px) {
  .habits-ring { width: 112px; height: 112px; }
  .habits-ring-text strong { font-size: 22px; }
  /* 2.1.2 — la fila perdió los siete puntos en 1.29 y aquí conservaba 4 columnas:
     la palomita caía en la de `auto` y dejaba la última vacía (67 px de hueco). */
  .habit-row { grid-template-columns: 40px minmax(0, 1fr) 36px; padding: 10px 14px 10px 14px; }
  .habit-icon { width: 40px; height: 40px; }
  .habit-name { font-size: 0.9375rem; }
  .habit-days { gap: 8px; }
  .habit-day { width: 11px; }
  .habits-stats { gap: var(--s3); }
}

/* ============================================================================
   1.26 — "Tus hábitos de hoy" en Mi día
   ----------------------------------------------------------------------------
   Una sola tarjeta: resumen (anillo pequeño, cuántos faltan, racha) que abre
   Hábitos, hasta dos pendientes con su check, y la semana en siete puntos.
   Reutiliza .habits-ring, .habit-icon, .habit-name, .habit-check y
   .habit-dot: mismos colores, mismos estados, ningún valor nuevo.
   ========================================================================== */
.home-habits {
  display: flex; flex-direction: column;
  margin: 0 0 var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-low);
  overflow: hidden;
}
/* El rótulo y "Ver todos ↗" comparten fila: el enlace no se estira (link-more
   es de ancho completo por defecto) para que el rótulo quepa en una línea. */
/* 2.1.1 — «Ver todos ↗» medía 72x32 en 320 y en 375. */
.home-habits-all { width: auto; flex: 0 0 auto; margin: 0; min-height: var(--tap); padding: 0; white-space: nowrap; }
.home-habits-all span { margin-left: 4px; }
.section-label-row:has(.home-habits-all) .section-label { white-space: nowrap; }
.home-habits-summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  width: 100%; padding: 12px 14px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.home-habits-summary:hover { background: var(--surface-hover); }
.home-habits-summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.habits-ring-sm { width: 64px; height: 64px; }
.habits-ring-sm .habits-ring-track, .habits-ring-sm .habits-ring-fill { stroke-width: 7; }
.habits-ring-sm .habits-ring-text strong { font-size: 1.0625rem; }
.habits-ring-sm .habits-ring-text strong span { font-size: 0.75rem; }
.home-habits-icon {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: var(--r-full); background: var(--habit-green-tint); color: var(--habit-green-ink);
}
.home-habits-icon .i { font-size: 26px; }
.home-habits-body { min-width: 0; }
.home-habits-title { display: block; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--ink-strong); }
.home-habits-title b { font-weight: 700; }
.home-habits-sub { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-muted); }
.home-habits-streak {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 0.8125rem; font-weight: 600; color: var(--habit-green-ink);
}
.home-habits-streak .i { font-size: 0.9375rem; }
.home-habits-streak b { font-weight: 700; }
.home-habits-chevron { color: var(--ink-muted); }
.home-habits-chevron .i { font-size: 1.125rem; }
.home-habits-list { margin: 0 14px; border-top: 1px solid var(--line); }
.home-habit {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.home-habit:last-child { border-bottom: 0; }
.home-habit:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--r-sm); }
.home-habit .habit-name { font-size: 0.9375rem; }
.home-habit .habit-meta { font-size: 0.8125rem; }
.home-habit.is-done .habit-name { color: var(--ink); }
.home-habits-week {
  display: flex; justify-content: space-between;
  margin: 0 14px; padding: 10px 6px 12px;
  border-top: 1px solid var(--line);
}
.home-habits-week .habit-day { width: 22px; gap: 6px; }
.home-habits-week .habit-dot { width: 10px; height: 10px; }
.home-habits-week .habit-day small { font-size: 0.6875rem; }
.home-habits-week .habit-day.is-today small { color: var(--ink-strong); font-weight: 600; }
.habit-dot[data-state="partial"] { background: var(--habit-green-soft); }
/* 2.1.2 — el día a medias se confundía con uno futuro (Claro) o sin cumplir
   (Sobrio): medio relleno, con los mismos tokens de hecho y de futuro. */
.habits-strip .habit-dot[data-state="partial"],
.home-habits-week .habit-dot[data-state="partial"] { background: linear-gradient(90deg, var(--habit-green) 50%, var(--habit-gray-faint) 50%); }
/* Sin hábitos: una línea con Sam y un solo botón. */
.home-habits-empty {
  flex-direction: row; align-items: center; gap: var(--s3);
  padding: 12px 14px;
}
.home-habits-mark { width: 40px; height: 40px; flex: 0 0 auto; }
.home-habits-empty .home-habits-body { flex: 1 1 auto; }
.home-habits-empty .btn { flex: 0 0 auto; }
@media (max-width: 359px) {
  .home-habits-summary { gap: var(--s3); padding: 10px 12px; }
  .habits-ring-sm { width: 56px; height: 56px; }
  .home-habits-title { font-size: 0.9375rem; }
  .home-habits-empty { flex-wrap: wrap; }
}

/* ============================================================================
   1.29 — Menos saturación
   ----------------------------------------------------------------------------
   La pantalla decía tres veces lo mismo: anillo grande, racha, frase de ánimo,
   tres tarjetas de métricas y una burbuja de Sam, todo antes del primer hábito.
   Ahora arriba va UN resumen compacto (anillo pequeño, una línea de estado y la
   semana en siete puntos) y debajo lo accionable: Hoy y Esta semana. Próximos,
   En pausa y Mi progreso son secciones plegables.

   Ni un color nuevo: los mismos tokens de arriba.
   ========================================================================== */

.habits-summary {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.habits-summary-top { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.habits-summary-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--habit-green-tint);
  color: var(--habit-green-ink);
}
.habits-summary-icon .i { font-size: 21px; }
.habits-summary-body { min-width: 0; }
.habits-summary-title { display: block; font-size: 1rem; font-weight: 600; color: var(--ink-strong); line-height: 1.2; }
.habits-summary-sub { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-muted); }
.habits-summary-extra { display: block; margin-top: 6px; }
.habits-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem; font-weight: 600; color: var(--habit-green-ink);
  background: var(--habit-green-tint);
  border-radius: var(--r-full);
}
.habits-chip .i { font-size: 0.8125rem; }

/* La semana, en siete puntos con su letra. Cada día lleva su estado en texto
   para quien no ve el color (lector de pantalla). */
.habits-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.habits-strip-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.habits-strip-day small { font-size: 0.625rem; line-height: 1; color: var(--ink-muted); font-weight: 500; }
.habits-strip-day.is-today small { color: var(--ink-strong); font-weight: 700; }
.habits-strip .habit-dot { width: 100%; height: 6px; border-radius: var(--r-full); }
/* Un día sin nada programado deja de pintarse en verde claro: parecía un día
   cumplido. Descansar no es un logro ni un fallo, así que va en neutro. */
.habit-dot[data-state="off"] { background: var(--habit-gray-faint); }

/* Día de descanso: una tarjeta baja que no finge un 0/0. */
.habits-rest {
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.habits-rest-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.habits-rest strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-strong); }
.habits-rest small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-muted); }

/* Meta semanal: el avance contra la meta completa, con su barra. */
.habit-row-weekly .habit-meta { white-space: normal; }
.habit-bar {
  margin-top: 6px; height: 4px; border-radius: var(--r-full);
  background: var(--habit-gray-faint); overflow: hidden;
}
.habit-bar i { display: block; height: 100%; background: var(--habit-green); border-radius: var(--r-full); }
.habit-row-weekly.is-done .habit-bar i { background: var(--habit-green); }

/* Próximos y en pausa: filas sin palomita, con su porqué. */
.habit-row-quiet { opacity: .82; }
.habit-row-quiet .habit-meta { color: var(--ink-muted); }

/* Secciones plegables. El encabezado es un botón de 44px de alto. */
.habits-fold { border-top: 1px solid var(--line); padding-top: var(--s2); }
.habits-fold-head {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  font-size: 0.875rem; font-weight: 600; color: var(--ink);
  text-align: left;
}
.habits-fold-head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
.habits-count {
  min-width: 20px; padding: 1px 6px;
  font-size: 0.75rem; font-weight: 600; color: var(--ink-muted);
  background: var(--surface-sunken); border-radius: var(--r-full);
  text-align: center;
}
.habits-fold-chevron { margin-left: auto; color: var(--ink-muted); transition: transform var(--dur) var(--ease); }
.habits-fold-chevron .i { font-size: 1.125rem; display: block; }
.habits-fold.is-open .habits-fold-chevron { transform: rotate(90deg); }
.habits-fold-body { padding: var(--s2) 0 var(--s3); display: flex; flex-direction: column; gap: var(--s2); }

/* Notas del formulario y del historial. */
.habit-hint { margin: var(--s2) 0 0; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-muted); }
.habit-hint-warn { color: var(--ink); }
.habit-more { margin-top: var(--s2); }
.habit-more > summary {
  min-height: 44px; display: flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.habit-more > summary::-webkit-details-marker { display: none; }
.habit-more > summary::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.habit-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.habit-more > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
/* Igual que con las secciones de frecuencia: `[hidden]` no gana contra el
   `display` de `.field`, así que sin esto la hora aparecía siempre —incluso
   con el recordatorio apagado. */
.habit-reminder-field { margin-top: var(--s2); }
.habit-reminder-field[hidden] { display: none !important; }

/* Detalle: estado actual y próxima oportunidad, en palabras. */
.habit-detail-state {
  margin: 0; padding: 8px 12px;
  font-size: 0.875rem; color: var(--ink);
  background: var(--surface-sunken); border-radius: var(--r-sm);
}
.habit-heat i[data-state="extra"]  { background: var(--habit-green-soft); }
.habit-heat i[data-state="paused"] { background: transparent; border-style: dashed; border-color: var(--line); }
/* Un mes recién empezado dibujaba veintisiete cuadros gris oscuro: un muro de
   reproche donde debería haber un mapa. El día sin cumplir se marca, pero en
   el gris del fondo, no en el de la tinta. */
.habit-heat i[data-state="missed"] { background: var(--habit-gray-faint); border-color: var(--line); }
.habit-detail-hero strong { font-size: 0.9375rem; }

/* Historial corregible: cada día con su fecha escrita y su estado en texto. */
.habit-history { display: flex; flex-direction: column; gap: var(--s3); }
.habit-log-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.habit-log-row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.habit-log-day { min-width: 0; flex: 1 1 auto; }
.habit-log-day strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-strong); }
.habit-log-day small { display: block; font-size: 0.75rem; color: var(--ink-muted); }
.habit-log-row[data-state="off"], .habit-log-row[data-state="paused"] { border-style: dashed; }

/* Un nombre largo en "Más constante" estiraba la tarjeta a ocho renglones y
   descuadraba las otras dos. Dos líneas y elipsis; el nombre completo sigue en
   su fila y en su detalle. */
.habits-stat strong.user-content {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.2;
}
/* 2.1.2 — las tres tarjetas igualan altura (el nombre ya está limitado a 2
   renglones): con `start` medían 98 / 127 / 113 px en la misma fila. */
.habits-stats { align-items: stretch; }

@media (max-width: 359px) {
  .habits-summary { padding: var(--s3); }
  .habits-summary-title { font-size: 0.9375rem; }
  .habits-strip-day small { font-size: 0.625rem; }
}

/* ============================================================================
   1.30 — Los tres arreglos visuales de la auditoría
   ----------------------------------------------------------------------------
   A10 · Un plegable cerrado seguía ocupando 241 px a 320. `foldHtml` ponía
         `hidden`, pero la regla del cuerpo impone `display:flex` y gana: en
         CSS, `[hidden]` es sólo `display:none` de la hoja del navegador.
   A12 · La semana quedaba comprimida en el centro de una tarjeta ancha porque
         la regla vieja de `.habits-summary` conservaba `align-items:center`
         de cuando era una rejilla de tres columnas. La nueva la volvió una
         columna flex, y ese centrado pasó a encoger a sus hijos.
   Se corrigen donde nacen, no con un parche encima.
   ========================================================================== */

/* A10 — cerrado es cerrado. */
.habits-fold-body[hidden] { display: none !important; }

/* A12 — la tarjeta del resumen es una columna: sus hijos ocupan el ancho. El
   centrado vertical vive sólo en la fila de arriba, que es quien lo necesita. */
.habits-summary { align-items: stretch; }
.habits-summary-top { align-items: center; }
.habits-strip { width: 100%; }
/* Siete columnas iguales y sin gap desigual en los extremos: el día empieza y
   termina donde termina la tarjeta. */
.habits-strip-day { min-width: 0; }

/* ------------------------------------------------- Espaciado y remates -- */

/* El texto de un botón con icono se centra COMO CONJUNTO, con 8 px entre los
   dos, en vez de quedar el icono pegado al borde. */
.habits-fold-head > span:first-child { flex: 1 1 auto; min-width: 0; }
/* Nada de tocar el relleno de `.habits-add`: a 360 px o menos ese botón se
   queda en 42 px de ancho y sólo con el icono, así que un padding lateral lo
   aplasta hasta convertir el "+" en un punto. Lo comprobé en la captura. */

/* Un nombre largo en el detalle se parte en dos líneas en vez de encogerse. */
.habit-detail-hero strong { white-space: normal; line-height: 1.2; }
.habit-detail .habit-name, .habit-detail-hero div { min-width: 0; }

/* Entre el contenido y las acciones finales de una hoja: 20 px, no 8. */
.habit-detail .sheet-actions { margin-top: var(--s5); }
/* Eliminar no compite con las acciones normales: queda al final y en secundario. */
.habit-detail .sheet-item.danger { margin-top: var(--s2); }

/* Las filas de Historial comparten eje con el resto de filas de la app. */
.habit-log-row { padding-inline: 12px; }
/* 2.1.2 — hijas flex de una lista con max-height: no se encogen por debajo de
   su texto (al 200 % medían 48 px con 78 de texto y se montaban). Con
   padding-block 3px la fila sigue en 48 px al 100 %; sólo crece con letra grande. */
.habit-log-row { flex-shrink: 0; padding-block: 3px; }

@media (max-width: 359px) {
  /* A 320 px el margen lateral baja a 16, no desaparece. */
  .habits-strip { gap: 4px; }
  .habits-fold-head { gap: 6px; }
}