/* weekly.css — estilos del módulo (propiedad del módulo correspondiente). */

/* ---------- weekly ---------- */
/* Panel semanal (#/weekly) y tarjeta resumen (Hoy y Progreso). Propietario: módulo del panel. */
.wk { gap: 14px; }

/* Navegación de semanas */
.wk-nav { display: flex; align-items: center; gap: 8px; }
.wk-nav-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--text);
}
.wk-nav-btn.is-pressed { background: var(--border-strong); }
.wk-nav-btn:disabled { opacity: 0.35; }
.wk-nav-cur {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  font-size: calc(16px * var(--ts));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-nav-cur:disabled { color: var(--text-2); opacity: 1; }
/* Texto grande: «Ir a esta semana» (semanas pasadas) no cabe en una línea a 375 px; pasa a dos en vez de cortarse */
html.text-large .wk-nav-cur { white-space: normal; text-overflow: clip; line-height: 1.2; padding: 6px 8px; }
.wk-provisional {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 2px;
  font-size: calc(13px * var(--ts));
  line-height: 1.45;
  color: var(--muted);
}
.wk-provisional .icon { flex: none; margin-top: 2px; color: var(--info); }

/* Bloques Información / Sugerencias */
.wk-block { display: flex; flex-direction: column; gap: 10px; }
.wk-block + .wk-block { margin-top: 10px; }
.wk-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
}
.wk-block-suggestion .wk-block-head { border-left-color: var(--accent); }
.wk-block-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
}
.wk-block-suggestion .wk-block-icon { background: var(--accent-soft); color: var(--accent); }
.wk-block-titles { flex: 1; min-width: 0; }
.wk-block-title { font-size: calc(15px * var(--ts)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.wk-block-sub { margin-top: 2px; font-size: calc(13px * var(--ts)); line-height: 1.35; color: var(--muted); }
.wk-block-count {
  flex: none;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: calc(13px * var(--ts));
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wk-none { padding: 4px 2px; font-size: calc(14px * var(--ts)); color: var(--muted); }

/* Mensaje */
.wk-msg { gap: 8px; border-left: 4px solid var(--border-strong); }
.wk-msg-good { border-left-color: var(--ok); }
.wk-msg-warn { border-left-color: var(--warn); }
.wk-msg-neutral { border-left-color: var(--info); }
.wk-msg-head { display: flex; align-items: center; gap: 8px; }
/* Nivel: .state (css/app.css) */
.wk-msg-title { font-size: calc(17px * var(--ts)); font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.wk-msg-text { font-size: calc(15px * var(--ts)); line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }

/* Filas de un mensaje (carga por tipo, km por deporte, ejercicios…) */
.wk-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.wk-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: calc(14px * var(--ts));
  line-height: 1.4;
}
.wk-item:last-child { border-bottom: 0; }
/* Dos columnas: cada una se parte en líneas dentro de su sitio (sin saltar la cifra a otra fila). */
.wk-item-label { flex: 1 1 0; min-width: 34%; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.wk-item-value { flex: 0 1 auto; max-width: 64%; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
/* Filas con textos largos: etiqueta arriba y valor debajo (todas iguales en la lista). */
.wk-items-stack .wk-item { flex-direction: column; align-items: stretch; gap: 1px; }
.wk-items-stack .wk-item-label { min-width: 0; }
.wk-items-stack .wk-item-value { max-width: none; text-align: left; }
.wk-items-wrap { display: flex; flex-direction: column; }
.wk-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--accent);
  font-size: calc(15px * var(--ts));
  font-weight: 700;
}
.wk-more .icon { transition: transform 0.15s ease; }
.wk-more.open .icon { transform: rotate(180deg); }

/* «¿Por qué?» */
.wk-msg .why-body { padding: 10px 12px 8px; }
.wk-why { display: flex; flex-direction: column; gap: 8px; }
.wk-why-rule { color: var(--text-2); }
.wk-why-rule b { color: var(--text); }
.wk-why-head { font-size: calc(12px * var(--ts)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wk-why ul.wk-why-data { list-style: none; margin: 0; padding: 0; }
.wk-why-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.wk-why ul.wk-why-data li + li { margin-top: 0; }
.wk-why-label { flex: 1 1 0; min-width: 34%; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.wk-why-value { flex: 0 1 auto; max-width: 66%; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
/* Lista con alguna fila larga: TODAS apiladas (etiqueta arriba, valor debajo), sin zigzag ni valores partidos. */
.wk-why-stacked .wk-why-row { flex-direction: column; align-items: stretch; gap: 1px; }
.wk-why-stacked .wk-why-label { min-width: 0; }
.wk-why-stacked .wk-why-value { max-width: none; text-align: left; }
.wk-why-sub { padding-left: 14px; border-top-style: dashed; font-size: calc(13px * var(--ts)); }
.wk-why-sub .wk-why-label { font-weight: 600; color: var(--text-2); }

/* Tabla de músculos */
.wk-mtable { display: flex; flex-direction: column; margin: 0 -14px 0 -12px; border-top: 1px solid var(--border); }
.wk-mrow { display: flex; flex-direction: column; gap: 5px; padding: 8px 14px 9px 12px; border-bottom: 1px solid var(--border); }
.wk-mrow-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* El nombre es el dato clave de la fila: se parte en dos líneas si hace falta, nunca se corta con «…». */
.wk-mrow-name { flex: 1; min-width: 0; font-size: calc(15px * var(--ts)); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.wk-mrow-val { flex: none; font-size: calc(13px * var(--ts)); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-mrow-val b { font-size: calc(16px * var(--ts)); font-weight: 800; color: var(--text); }
.wk-mstatus {
  flex: none;
  min-width: 76px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: calc(12px * var(--ts));
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}
.wk-mstatus-below { background: var(--warn-soft); color: var(--warn); }
.wk-mstatus-in { background: var(--ok-soft); color: var(--ok); }
.wk-mstatus-above { background: var(--info-soft); color: var(--info); }
.wk-mstatus-none { background: var(--surface-3); color: var(--muted); }
.wk-mstatus-pending { background: var(--surface-3); color: var(--text-2); }
.wk-mrow-bottom { display: flex; align-items: center; gap: 10px; }
.wk-mbar { position: relative; flex: 1; display: block; height: 10px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.wk-mbar-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(74, 222, 128, 0.2);
  box-shadow: inset 2px 0 0 rgba(74, 222, 128, 0.85), inset -2px 0 0 rgba(74, 222, 128, 0.85);
}
.wk-mbar-fill { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 3px; background: var(--muted); }
.wk-mrow[data-status="below"] .wk-mbar-fill { background: var(--warn); }
.wk-mrow[data-status="in"] .wk-mbar-fill { background: var(--ok); }
.wk-mrow[data-status="above"] .wk-mbar-fill { background: var(--info); }
/* Ancho fijo: así todas las barras miden lo mismo y el mismo rango cae en el mismo sitio en cada fila. */
.wk-mrow-delta { flex: none; width: 5.2em; font-size: calc(12px * var(--ts)); font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-mnote { padding: 8px 14px 0 12px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }

/* Enlace a Ajustes y estados vacíos */
.wk-settings-link { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-top: 6px; }
.wk-settings-link > .icon:first-child { flex: none; color: var(--accent); }
.wk-settings-link .list-item-sub { white-space: normal; overflow: visible; text-overflow: clip; }
.wk-empty { padding: 4px; }

/* «Resumen de la semana» (arriba del panel; propietario: módulo de resúmenes). La diferencia con la semana
   anterior usa .sum-delta de css/summary.css (flecha + texto). */
.wk-recap { gap: 10px; }
.wk-recap-head { display: flex; align-items: center; gap: 10px; }
.wk-recap-titles { flex: 1; min-width: 0; }
.wk-recap-title { font-size: calc(18px * var(--ts)); font-weight: 750; }
.wk-recap-sub { margin-top: 2px; font-size: calc(13px * var(--ts)); line-height: 1.35; color: var(--muted); }
.wk-recap-empty { font-size: calc(14px * var(--ts)); color: var(--muted); }
.wk-recap-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wk-recap-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.wk-recap-label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.wk-recap-value { font-size: calc(20px * var(--ts)); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wk-recap-kpi .sum-delta { margin-top: 3px; }
/* Texto grande: «−4 h 13 min» o «−33.207 kg» no caben enteros en medio ancho a 375 px y se salían de la ficha;
   la diferencia parte por sus espacios en vez de desbordar; el % sigue entero («(−57 %)», nunca «(−57 / %)») y a
   tamaño normal todo sigue en una pieza */
html.text-large .wk-recap-kpi .sum-delta-part:first-child { white-space: normal; }
.wk-recap-km { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.wk-recap-km-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 0 7px 10px;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--kc);
  flex-wrap: wrap;
  row-gap: 4px;
}
.wk-recap-km-row:last-child { border-bottom: 0; }
/* Nombre entero (con su emoji) a la izquierda; si no cabe todo, la cifra y la diferencia bajan a la derecha. */
.wk-recap-km-name { flex: 1 0 auto; font-size: calc(15px * var(--ts)); font-weight: 650; white-space: nowrap; }
.wk-recap-km-right { flex: 0 1 auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.wk-recap-km-val { font-size: calc(16px * var(--ts)); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-recap-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wk-recap-link { gap: 4px; }
.wk-recap-link .icon { flex: none; }

/* Pantallas muy estrechas (320 px) */
@media (max-width: 359px) {
  .wk-recap-value { font-size: calc(18px * var(--ts)); }
  .wk-mrow-top { flex-wrap: wrap; row-gap: 2px; }
  .wk-mrow-name { flex: 1 0 100%; }
  .wk-mrow-val { margin-right: auto; }
  .wk-mstatus { min-width: 70px; }
  .wk-block-sub { font-size: var(--fs-sm); }
}

/* ---------- goals ---------- */
/* Objetivos (#/goals, #/goal/new, #/goal/:id) y tarjeta resumen (Hoy y Progreso). Propietario: módulo de objetivos. */
.goal-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-2);
  font-size: calc(14px * var(--ts));
  line-height: 1.4;
}
.goal-note .icon { flex: none; margin-top: 1px; color: var(--info); }
.goal-list { display: flex; flex-direction: column; gap: 12px; }
.goal-none { padding: 4px 2px; }
.goal-new { margin-top: 2px; }

/* Tarjeta de un objetivo */
.goal-card { gap: 10px; }
.goal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: -4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}
.goal-head.is-pressed { opacity: 0.75; }
.goal-emoji { flex: none; width: 34px; font-size: 26px; line-height: 1; text-align: center; } /* fijo, como las baldosas: con el texto grande crecía más que su caja y se montaba en el título */
.goal-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.goal-title { font-size: calc(17px * var(--ts)); font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.goal-kind { font-size: calc(13px * var(--ts)); color: var(--muted); }
.goal-chev { flex: none; color: var(--muted); }
.goal-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.goal-val {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.goal-val-k { font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.goal-val-v { font-size: calc(20px * var(--ts)); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-val-n { font-size: calc(12px * var(--ts)); line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }

/* Barra de progreso */
.goal-bar { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.goal-bar-sm { height: 6px; }
.goal-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--accent); }
[data-status="achieved"] .goal-bar-fill { background: var(--ok); }
[data-status="insufficient"] .goal-bar-fill { background: var(--muted); }
[data-status="no_trend"] .goal-bar-fill { background: var(--warn); }
.goal-bar-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: -4px; font-size: calc(13px * var(--ts)); color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-pct { font-weight: 750; color: var(--text-2); }
.goal-eta { font-size: calc(15px * var(--ts)); font-weight: 650; line-height: 1.35; }
.goal-eta-achieved { color: var(--ok); }
.goal-eta-ready { color: var(--accent); }
.goal-eta-no_trend { color: var(--warn); }
.goal-eta-insufficient { color: var(--text-2); }
.goal-badge-arch { background: var(--surface-3); color: var(--muted); }
.goal-warn { margin-top: -4px; font-size: calc(13px * var(--ts)); line-height: 1.35; color: var(--warn); }

/* «¿Por qué?» */
.goal-why { display: flex; flex-direction: column; gap: 6px; }
.goal-why b { color: var(--text); }
.goal-why-warn { color: var(--warn); }
.goal-why-data { margin: 0; padding-left: 18px; font-variant-numeric: tabular-nums; }
.goal-why-date { color: var(--muted); }

/* Secciones plegadas (conseguidos, archivados) */
.goal-fold-wrap { display: flex; flex-direction: column; gap: 10px; }
.goal-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-2);
  font-weight: 700;
  text-align: left;
}
.goal-fold[aria-expanded="true"] { color: var(--text); }
.goal-fold-body { display: flex; flex-direction: column; gap: 12px; }

/* Formulario */
.goal-form .card { gap: 14px; }
.goal-form .seg-btn { min-height: 44px; }
.goal-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}
.goal-pick.is-pressed { background: var(--surface-3); }
.goal-pick .icon { flex: none; color: var(--muted); }
.goal-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-pick-label { font-size: calc(12px * var(--ts)); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.goal-pick-name { font-size: calc(17px * var(--ts)); font-weight: 700; overflow-wrap: anywhere; }
.goal-presets { gap: 6px; }
.goal-presets .chip { padding: 0 12px; font-size: calc(14px * var(--ts)); }
.goal-dur-clear { align-self: flex-start; }
.goal-how-warn { color: var(--warn); }
.goal-bw-info { font-size: calc(15px * var(--ts)); color: var(--text-2); }
.goal-title-auto { align-self: flex-start; }
.goal-create { margin-top: 4px; }
.goal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.goal-preview { gap: 10px; }
.goal-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.goal-preview-title { font-size: calc(17px * var(--ts)); font-weight: 750; }
.goal-preview-sub { font-size: calc(13px * var(--ts)); color: var(--muted); }
.goal-preview-empty { font-size: calc(15px * var(--ts)); }

/* Tarjeta resumen (Hoy y Progreso) */
.goal-sum { gap: 8px; }
.goal-sum-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 4px 0 10px;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: calc(15px * var(--ts));
  font-weight: 700;
}
.goal-sum-list { display: flex; flex-direction: column; }
.goal-sum-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-height: 56px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--text);
  text-align: left;
}
.goal-sum-row:first-child { border-top: 0; padding-top: 2px; }
.goal-sum-row.is-pressed { opacity: 0.75; }
.goal-sum-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.goal-sum-name { flex: 1; min-width: 0; font-size: calc(15px * var(--ts)); font-weight: 700; overflow-wrap: anywhere; }
.goal-sum-pct { flex: none; font-size: calc(14px * var(--ts)); font-weight: 750; color: var(--text-2); font-variant-numeric: tabular-nums; }
.goal-sum-eta { font-size: calc(13px * var(--ts)); line-height: 1.35; color: var(--muted); }
.goal-sum-row[data-status="achieved"] .goal-sum-eta { color: var(--ok); }
.goal-sum-more { font-size: calc(13px * var(--ts)); color: var(--muted); }

@media (max-width: 380px) {
  .goal-val-v { font-size: calc(18px * var(--ts)); }
  .goal-emoji { width: 28px; font-size: 22px; }
}
/* ---------- /goals ---------- */

/* Mapa corporal encima de la tabla de músculos (integración ronda 4) */
.wk-muscles { display: flex; flex-direction: column; gap: 12px; }

/* ---------- «Tu análisis» en el panel (ronda 5; la tarjeta es de css/analysis.css) ---------- */
.wk-analysis { border-left: 4px solid var(--accent); }

/* ---------- «Lo importante esta semana» (Hoy, views/focus.js · docs/PULIDO.md §6) ----------
   Una tarjeta, filas con separador (sin tarjetas dentro): el principal más grande; los secundarios, compactos. */
.focus { gap: 4px; }
.focus-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.focus-heading { font-size: calc(18px * var(--ts)); font-weight: 750; }
.focus-sub { font-size: var(--fs-sm); color: var(--muted); }
.focus-allgood { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0 10px; font-size: var(--fs-md); line-height: 1.4; color: var(--text); }
.focus-allgood .icon { flex: none; margin-top: 1px; color: var(--ok); }
/* Ronda 9: «Aún pocos datos…» no es un «Bien»: reloj en gris, no el check verde */
.focus-fewdata .icon { color: var(--muted); }
.focus-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
/* ---------- Una conclusión, plegable (views/focus-item.js · PULIDO §33) ----------
   Plegada: icono del nivel + título (protagonista) + una línea con qué hacer. La cabecera entera es el botón (≥ 44 px).
   Animación solo de CSS y robusta en WebKit y Chromium: grid-template-rows 0fr → 1fr (sin medir alturas), el contenido
   aparece con opacidad y un desplazamiento mínimo, el chevron gira; 260 ms, curva de iOS. Nada de height: auto. */
.focus-item { border-bottom: 1px solid var(--border); }
.focus-item:last-child { border-bottom: 0; }
.focus-h { margin: 0; font: inherit; }
.focus-toggle {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: start;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.focus-toggle:focus-visible { outline-offset: -2px; border-radius: 10px; }
.focus-toggle:active .focus-title { opacity: 0.72; }
.focus-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--muted);
}
.focus-ico-warn { background: var(--warn-soft); color: var(--warn); }
.focus-ico-good { background: var(--ok-soft); color: var(--ok); }
.focus-ico-up { background: var(--ok-soft); color: var(--ok); } /* «Sube el peso»: estado positivo, como su antiguo state-progress (el acento es de la acción principal) */
.focus-main .focus-ico { width: 36px; height: 36px; border-radius: 10px; }
.focus-hd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.focus-main .focus-hd { padding-top: 5px; }
.focus-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.focus-main .focus-title { font-size: calc(18px * var(--ts)); font-weight: 750; line-height: 1.25; }
.focus-step { font-size: calc(14px * var(--ts)); font-weight: 500; line-height: 1.35; color: var(--text-2); overflow-wrap: anywhere; }
.focus-low { color: var(--muted); }
.focus-chev { flex: none; display: grid; place-items: center; width: 24px; height: 30px; color: var(--muted); }
.focus-main .focus-chev { height: 36px; }
.focus-chev .icon { transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1); }
.focus-item[data-open="1"] .focus-chev .icon { transform: rotate(180deg); }

.focus-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
.focus-item[data-open="1"] .focus-panel { grid-template-rows: 1fr; }
.focus-body {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* alineado con el título, no con el icono */
  padding-inline-start: 42px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease-out, transform 260ms cubic-bezier(0.32, 0.72, 0, 1), padding-bottom 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
.focus-main .focus-body { padding-inline-start: 48px; }
.focus-item[data-open="1"] .focus-body { opacity: 1; transform: none; padding-bottom: 14px; transition-delay: 60ms, 0ms, 0ms; }
/* Abierta y quieta: sin recorte (el anillo de foco del «¿Por qué?» no se corta) */
.focus-item.is-settled .focus-body { overflow: visible; }
.focus-text { display: flex; flex-direction: column; gap: 8px; font-size: calc(14px * var(--ts)); line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.focus-text p { margin: 0; }
.focus-main .focus-text { font-size: var(--fs-md); }
.focus-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.focus-body > .why { align-self: stretch; }
.focus .why-body, .an-card-summary .why-body { padding: 10px 12px 8px; }
.focus-more { margin-top: -4px; }
@media (prefers-reduced-motion: reduce) {
  .focus-panel, .focus-body, .focus-chev .icon { transition: none !important; }
  .focus-body { transform: none; }
}
.focus-links { display: flex; flex-wrap: wrap; column-gap: 18px; border-top: 1px solid var(--border); padding-top: 2px; }
/* Veredicto del tiempo previsto (objetivo de carrera con tiempo; mismas clases que Eventos) */
.goal-verdict { margin-top: -4px; font-size: calc(14px * var(--ts)); line-height: 1.35; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
/* Hoy (verde solo para la acción principal, la selección y los estados positivos): una estimación en curso va en el
   azul de su insignia «Estimación»; «al alcance» y «conseguido» siguen en verde */
.today .goal-sum-row[data-status="estimate"] .goal-bar-fill { background: var(--info); }
.today .goal-sum-row[data-status="ready"] .goal-bar-fill { background: var(--ok); }