/* Tema: tokens claros por defecto; los oscuros se aplican con el sistema (sin
   atributo data-theme) o forzados con data-theme="dark". Los dos bloques
   oscuros deben mantenerse idénticos. */
:root {
  --fondo: #f4f5f7;
  --superficie: #ffffff;
  --superficie-2: #eff1f4;
  --borde: #e2e5ea;
  --texto: #111318;
  --texto-suave: #5a606b;
  --acento: #2a78d6;
  --acento-suave: rgba(42, 120, 214, 0.12);
  --cabecera: rgba(255, 255, 255, 0.82);
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.05);
  --sobre-acento: #ffffff;
  --error: #d03b3b;
  --ok: #0ca30c;
  --aviso: #fab219;
  /* deportes: orden fijo de la paleta categórica */
  --dep-carrera: #2a78d6;
  --dep-raqueta: #e0602d;
  --dep-natacion: #11906a;
  --dep-fuerza: #ad7600;
  --dep-ciclismo: #c94a85;
  --dep-caminar: #008300;
  --dep-equipo: #7a5cd6;
  --dep-otros: #8a8984;
  /* series */
  --ctl: #2a78d6;
  --atl: #e0602d;
  --serie-fc: #e34948;
  --serie-ritmo: #2a78d6;
  --serie-gap: #6250d6;
  --serie-alt: #8a8984;
  /* rangos de fechas comparados en Curvas (42 días, 1 año, todo): validados juntos */
  --rango-1: #eb6834;
  --rango-2: #2a78d6;
  --rango-3: #008300;
  --serie-cad: #11906a;
  --serie-pot: #ad7600;
  --banda: rgba(42, 120, 214, 0.14);
  --barras: rgba(82, 81, 78, 0.28);
  /* zonas de intensidad (siempre rotuladas Z1-Z7) */
  --zona-1: #9aa5b1;
  --zona-2: #3b9cff;
  --zona-3: #4caf7d;
  --zona-4: #e0b341;
  --zona-5: #f08a3b;
  --zona-6: #e5534b;
  --zona-7: #b04fd8;
  /* bandas de forma */
  --forma-transicion: rgba(237, 161, 0, 0.16);
  --forma-fresco: rgba(42, 120, 214, 0.14);
  --forma-gris: rgba(138, 137, 132, 0.12);
  --forma-optimo: rgba(12, 163, 12, 0.14);
  --forma-riesgo: rgba(208, 59, 59, 0.16);
  /* franjas de la relación de carga aguda:crónica */
  --acwr-baja: rgba(138, 137, 132, 0.14);
  --acwr-habitual: rgba(12, 163, 12, 0.14);
  --acwr-elevada: rgba(237, 161, 0, 0.18);
  --acwr-muy-elevada: rgba(208, 59, 59, 0.18);
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0e1013;
    --superficie: #171a1f;
    --superficie-2: #21252c;
    --borde: #2d323a;
    --texto: #eef0f3;
    --texto-suave: #aab0bb;
    --acento: #3987e5;
    --acento-suave: rgba(57, 135, 229, 0.2);
    --cabecera: rgba(23, 26, 31, 0.82);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
    --dep-carrera: #3987e5;
    --dep-raqueta: #d95926;
    --dep-natacion: #199e70;
    --dep-fuerza: #c98500;
    --dep-ciclismo: #d55181;
  --dep-equipo: #9179e8;
    --dep-equipo: #9179e8;
    --dep-otros: #8a8984;
    --ctl: #3987e5;
    --atl: #d95926;
    --serie-fc: #e66767;
    --serie-ritmo: #3987e5;
    --serie-gap: #9085e9;
    --serie-cad: #199e70;
    --serie-pot: #c98500;
    --rango-1: #d95926;
    --rango-2: #3987e5;
    --rango-3: #008300;
    --banda: rgba(57, 135, 229, 0.2);
    --barras: rgba(195, 194, 183, 0.3);
    --zona-1: #8b95a3;
    --zona-2: #4aa3df;
    --zona-3: #5fc08f;
    --zona-4: #f0c24f;
    --zona-5: #ff9d4d;
    --zona-6: #f06b63;
    --zona-7: #c77bf0;
    --acwr-baja: rgba(195, 194, 183, 0.14);
    --acwr-habitual: rgba(12, 163, 12, 0.2);
    --acwr-elevada: rgba(237, 161, 0, 0.22);
    --acwr-muy-elevada: rgba(229, 83, 75, 0.24);
  }
}
:root[data-theme="dark"] {
  --fondo: #0e1013;
  --superficie: #171a1f;
  --superficie-2: #21252c;
  --borde: #2d323a;
  --texto: #eef0f3;
  --texto-suave: #aab0bb;
  --acento: #3987e5;
  --acento-suave: rgba(57, 135, 229, 0.2);
  --cabecera: rgba(23, 26, 31, 0.82);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
  --dep-carrera: #3987e5;
  --dep-raqueta: #d95926;
  --dep-natacion: #199e70;
  --dep-fuerza: #c98500;
  --dep-ciclismo: #d55181;
  --dep-otros: #8a8984;
  --ctl: #3987e5;
  --atl: #d95926;
  --serie-fc: #e66767;
  --serie-ritmo: #3987e5;
  --serie-gap: #9085e9;
  --serie-cad: #199e70;
  --serie-pot: #c98500;
  --rango-1: #d95926;
  --rango-2: #3987e5;
  --rango-3: #008300;
  --banda: rgba(57, 135, 229, 0.2);
  --barras: rgba(195, 194, 183, 0.3);
  --zona-1: #8b95a3;
  --zona-2: #4aa3df;
  --zona-3: #5fc08f;
  --zona-4: #f0c24f;
  --zona-5: #ff9d4d;
  --zona-6: #f06b63;
  --zona-7: #c77bf0;
  --acwr-baja: rgba(195, 194, 183, 0.14);
  --acwr-habitual: rgba(12, 163, 12, 0.2);
  --acwr-elevada: rgba(237, 161, 0, 0.22);
  --acwr-muy-elevada: rgba(229, 83, 75, 0.24);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 70px; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.5 "Inter", "Segoe UI Variable Text", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
/* Título de la vista (p. ej. el nombre de la actividad) */
.vista-pintada > h2:first-child, .vista-pintada > div > h2:first-child { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.texto-suave { color: var(--texto-suave); font-size: 0.87rem; }
.num { font-variant-numeric: tabular-nums; }

.cabecera {
  position: sticky; top: 0; z-index: 10; background: var(--cabecera); border-bottom: 1px solid var(--borde);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
}
.cabecera-fila { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; padding: 10px 20px; }
.marca { display: flex; align-items: center; gap: 9px; font-size: 1.1rem; font-weight: 750; letter-spacing: -0.02em; }
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pestanas { display: flex; gap: 2px; flex-wrap: wrap; background: var(--superficie-2); padding: 3px; border-radius: 11px; }
.pestanas a { padding: 6px 13px; border-radius: 8px; color: var(--texto-suave); font-weight: 550; font-size: 0.92rem; transition: background 0.15s, color 0.15s; }
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.pestanas a.activa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); transition: none; }

main { max-width: 1280px; margin: 0 auto; padding: 24px 20px 64px; }
.vista-pintada { display: flex; flex-direction: column; gap: 18px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 18px 20px; min-width: 0; box-shadow: var(--sombra); }
.tarjeta > h2, .tarjeta > h3 { margin-bottom: 12px; }
.pila { display: flex; flex-direction: column; gap: 18px; }   /* tarjetas apiladas dentro de un <div> */
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila-extremos { justify-content: space-between; }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; }

.boton {
  font: inherit; font-weight: 550; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; padding: 6px 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.boton:hover { background: var(--superficie-2); }
.boton:disabled { opacity: 0.6; cursor: default; }
.boton.activo { background: var(--acento-suave); border-color: var(--acento); color: var(--texto); font-weight: 650; }
.boton-primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 650; box-shadow: var(--sombra); }
.boton-primario:hover { background: var(--acento); filter: brightness(1.08); }
.boton-icono { display: inline-flex; padding: 6px; }
.selector { display: inline-flex; gap: 4px; flex-wrap: wrap; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; padding: 6px 10px; max-width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }
label { display: flex; flex-direction: column; gap: 3px; font-size: 0.87rem; color: var(--texto-suave); }

.aviso { max-width: 1240px; margin: 14px auto 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--borde); border-left: 4px solid var(--aviso); background: var(--superficie); box-shadow: var(--sombra); }
main .aviso { margin: 0; max-width: none; }
.aviso.error { border-left-color: var(--error); }
.aviso.ok { border-left-color: var(--ok); }

/* Cifras destacadas */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); }
.cifra .etiqueta { font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.cifra .valor { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 4px; }
.cifra .valor small { font-size: 0.82rem; font-weight: 550; letter-spacing: 0; color: var(--texto-suave); }
.cifra .nota { font-size: 0.78rem; color: var(--texto-suave); margin-top: 2px; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; min-width: 0; max-width: 100%; }
/* En rejillas y formularios los hijos pueden encoger (si no, una tabla ancha empuja la página hacia fuera) */
.rejilla-2 > *, .formulario > * { min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { text-align: left; font-weight: 600; color: var(--texto-suave); font-size: 0.8rem; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.d, th.d { text-align: right; font-variant-numeric: tabular-nums; }
tr.enlace { cursor: pointer; }
tr.enlace:hover td { background: var(--superficie-2); }
tr.semana td { background: var(--superficie-2); font-weight: 600; font-size: 0.85rem; }
td.nombre { white-space: normal; min-width: 150px; }

.punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.etiqueta-origen { font-size: 0.72rem; font-weight: 550; padding: 2px 8px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-suave); }
.banda-forma { font-size: 0.78rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--borde); }

/* Barra de zonas en miniatura y lista de zonas */
.mini-zonas { display: flex; width: 90px; height: 10px; border-radius: 3px; overflow: hidden; background: var(--superficie-2); gap: 1px; }
.mini-zonas span { height: 100%; }
.zonas { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto auto; gap: 5px 10px; align-items: center; font-size: 0.87rem; }
.zonas .barra { height: 14px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; }
.zonas .barra span { display: block; height: 100%; border-radius: 0 4px 4px 0; }

/* Gráficas */
.grafica { position: relative; height: 260px; }
.grafica.baja { height: 150px; }
.grafica.media { height: 200px; }
.lectura { min-height: 1.4em; font-size: 0.87rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.lectura b { color: var(--texto); font-weight: 600; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--texto-suave); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.ruta { width: 100%; height: 260px; }
.ruta path { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.formulario { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }   /* campos alineados por arriba (unos llevan nota debajo y otros no) */
/* Campos que se reparten el ancho; botones de su tamaño (nunca un botón a media pantalla); el resto, línea entera */
.formulario > label:not(.casilla), .formulario > .campo { flex: 1 1 190px; max-width: 420px; }
.formulario > .boton, .formulario > button { flex: 0 0 auto; align-self: flex-end; }
.formulario > .casilla, .formulario > p, .formulario > .fila, .formulario > .ancho, .formulario > div:not(.campo) { flex: 1 1 100%; }
.pasos { margin: 0; padding-left: 20px; }
.pasos li { margin: 4px 0; }
.vacio { text-align: center; padding: 28px 10px; color: var(--texto-suave); }
progress { width: 120px; vertical-align: middle; }

/* Tablas altas con scroll propio y cabecera fija */
.tabla-alta { max-height: 440px; overflow: auto; }
.tabla-alta thead th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }
caption { text-align: left; color: var(--texto-suave); font-size: 0.82rem; padding: 0 0 8px; caption-side: top; }
td.sub, td .sub { color: var(--texto-suave); font-size: 0.8rem; }
tr.sin-actividad td { color: var(--texto-suave); }
.nota-pie { color: var(--texto-suave); font-size: 0.82rem; margin: 8px 0 0; }
.boton:disabled.deporte-vacio { opacity: 0.45; }
.boton:focus-visible, a:focus-visible, .cal-act:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Calendario mensual: 7 días + columna de resumen semanal */
.cal-cabeza { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 168px; gap: 0; font-size: 0.8rem; color: var(--texto-suave); font-weight: 600; padding: 0 0 6px; }
.cal-cabeza span { padding: 0 6px; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 168px; border-top: 1px solid var(--borde); }
.cal-dia { min-height: 96px; padding: 4px 4px 6px; border-left: 1px solid var(--borde); min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cal-dia.fuera { background: var(--superficie-2); }
.cal-dia.fuera .cal-num { opacity: 0.55; }
.cal-num { font-size: 0.78rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; padding: 0 2px; }
.cal-num .largo { display: none; }
.cal-dia.hoy .cal-num { color: var(--sobre-acento); background: var(--acento); border-radius: 999px; padding: 0 7px; align-self: flex-start; font-weight: 600; }
.cal-act { display: block; padding: 3px 5px; border-radius: 5px; background: var(--superficie-2); border-left: 3px solid var(--texto-suave); color: var(--texto); font-size: 0.76rem; line-height: 1.3; min-width: 0; }
.cal-act:hover { text-decoration: none; filter: brightness(0.96); outline: 1px solid var(--borde); }
.cal-act .n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cal-act .m { display: block; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.cal-resumen { border-left: 1px solid var(--borde); padding: 6px 10px; font-size: 0.82rem; font-variant-numeric: tabular-nums; background: var(--superficie-2); }
.cal-resumen b { font-weight: 650; }
.cal-resumen .fila-r { display: flex; justify-content: space-between; gap: 8px; }
.cal-resumen .rotulo { color: var(--texto-suave); }
.cal-resumen .semana-t { color: var(--texto-suave); font-size: 0.76rem; margin-bottom: 3px; }
.cal-resumen .fila-r.previsto b { font-weight: 550; color: var(--texto-suave); font-style: italic; }
.cal-semana:last-child { border-bottom: 1px solid var(--borde); }
.cal-mando { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-mando h2 { min-width: 9em; text-align: center; }
.cal-mando h2::first-letter, .cal-num .largo::first-letter { text-transform: uppercase; }

@media (max-width: 900px) {
  .cal-cabeza { display: none; }
  .cal-semana { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
  .cal-resumen { order: -1; border-left: 0; border-bottom: 1px solid var(--borde); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
  .cal-resumen .semana-t { grid-column: 1 / -1; }
  .cal-dia { min-height: 0; border-left: 0; border-bottom: 1px solid var(--borde); flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding: 6px 8px; gap: 6px 10px; }
  .cal-dia:last-of-type { border-bottom: 0; }
  .cal-dia.sin-act { display: none; }
  .cal-dia.hoy.sin-act { display: flex; }
  .cal-num { flex: 0 0 100%; font-size: 0.85rem; }
  .cal-dia.hoy .cal-num { flex: 0 0 auto; padding: 1px 10px; margin-right: 100%; }
  .cal-dia.hoy .cal-num .largo::first-letter { text-transform: uppercase; }
  .cal-num .corto { display: none; }
  .cal-num .largo { display: inline-block; }
  .cal-act { flex: 1 1 100%; font-size: 0.85rem; padding: 5px 8px; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
  .cal-act .m { text-align: right; }
}
@media (max-width: 640px) {
  .grafica { height: 220px; }
  main { padding: 16px 16px 50px; }
  /* Cabecera compacta: marca y acciones en una fila; pestañas en una fila con scroll propio */
  .cabecera-fila { gap: 8px 10px; padding: 8px 16px; }
  .marca { order: 1; }
  .cabecera-acciones { order: 2; }
  .pestanas { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; }
  .pestanas a { white-space: nowrap; padding: 6px 10px; }
  #estado-sync { display: none; }
  .boton { padding: 5px 9px; }
  /* Objetivos táctiles de 40 px como mínimo (con el dedo, 30 px se quedan cortos) */
  .boton, select, input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="search"],
  input[type="password"], input[type="email"], input[type="url"], input[type="time"] { min-height: 40px; }
  /* Los «?» se ven pequeños, pero se tocan en un área de 40 px */
  .info-boton { position: relative; }
  .info-boton::after { content: ""; position: absolute; inset: -10px; }
  a.boton { display: inline-flex; align-items: center; }
  /* Pestañas deslizables: difuminado a la derecha como pista de que hay más */
  .pestanas { -webkit-mask-image: linear-gradient(to right, var(--texto) 85%, transparent); mask-image: linear-gradient(to right, var(--texto) 85%, transparent); }
  .pestanas::after { content: ""; flex: 0 0 48px; }   /* hueco final: la última pestaña puede salir del difuminado */
  /* Rangos de fechas en una sola fila deslizable */
  .selector-rango { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .selector-rango .boton { flex: 0 0 auto; }
  /* Filtro de deportes de Actividades: una fila deslizable */
  .fila-extremos > .filtros { flex: 1 1 100%; min-width: 0; }   /* si no, crece hasta el ancho de todos los deportes */
  .filtros > .selector-deportes { flex: 1 1 100%; min-width: 0; }
  .selector-deportes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%;
    -webkit-mask-image: linear-gradient(to right, var(--texto) 85%, transparent); mask-image: linear-gradient(to right, var(--texto) 85%, transparent); }
  .selector-deportes::after { content: ""; flex: 0 0 40px; }
  .selector-deportes .boton { flex: 0 0 auto; white-space: nowrap; }
  /* Exportar a CSV no tiene sentido en el móvil */
  /* Cifras destacadas de dos en dos */
  .cifras.cifras-destacadas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra.cifra-destacada .valor { font-size: 1.55rem; }
  .cifra-destacada .nota { display: none; }
  .cifras.cifras-secundarias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selector { gap: 3px; }
  th { white-space: normal; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cifra { padding: 12px 14px; }
  .cifra .valor { font-size: 1.5rem; }
  .tarjeta { padding: 14px; border-radius: 14px; }
  .vista-pintada > h2:first-child, .vista-pintada > div > h2:first-child { font-size: 1.3rem; }
  .pestanas { border-radius: 10px; }
}
tbody th[scope="row"] { color: var(--texto); font-size: 0.9rem; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 7px 8px; border-bottom: 1px solid var(--borde); }
tr:last-child th[scope="row"] { border-bottom: 0; }
.entrada-corta { width: 92px; }
select.rpe-rapido { padding: 2px 4px; font-size: 0.85rem; max-width: 96px; }

/* Récords, logros y filtros de la lista de actividades */
.etiqueta-record { margin-left: 6px; border: 1px solid var(--borde); white-space: nowrap; }
.logros { margin: 0; padding-left: 20px; }
.logros li { margin: 3px 0; }
.logros .nivel { color: var(--texto-suave); font-size: 0.82rem; }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filtros input[type="search"] { min-width: 180px; }
code { overflow-wrap: anywhere; }      /* direcciones largas (Google, Tailscale) sin salirse de la tarjeta */
.acciones-csv { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .acciones-csv { display: none; } }   /* aquí: la regla de arriba anularía la del bloque móvil */
a.boton { display: inline-block; }
a.boton:hover { text-decoration: none; }

/* Sección de peso (peso.js) */
.seccion-peso { display: grid; gap: 14px; }
.seccion-peso > h3 { margin-bottom: 0; }
.seccion-peso .sub-peso { margin: 4px 0 0; font-size: 0.9rem; color: var(--texto-suave); font-weight: 600; }
/* Cifras dentro de una tarjeta: sin sombra, sobre la superficie secundaria */
.seccion-peso .cifra, .semana-actual .cifra, .tarjeta-logros .cifra { box-shadow: none; background: var(--superficie-2); border-color: transparent; }
.peso-ajustes summary { cursor: pointer; color: var(--texto-suave); font-size: 0.87rem; font-weight: 550; }
.peso-ajustes[open] summary { margin-bottom: 10px; }

.pasos-ts { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 0.9rem; }
.pasos-ts code, .tarjeta p code { overflow-wrap: anywhere; }

/* Cifras destacadas (Bienestar): valor grande, estado con icono y texto, y mini gráfica de 30 días */
.cifras-destacadas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 12px; }
.cifra-destacada { --estado: var(--texto-suave); display: flex; flex-direction: column; gap: 2px; }
.cifra-destacada .valor { font-size: 2rem; }
.cifra-destacada.estado-bien { --estado: var(--ok); }
.cifra-destacada.estado-normal { --estado: var(--acento); }
.cifra-destacada.estado-atencion { --estado: var(--aviso); }
.cifra-destacada.estado-mal { --estado: var(--error); }
.estado-cifra { font-size: 0.82rem; font-weight: 650; color: var(--texto); }
.estado-cifra span { color: var(--estado); }
.minigrafica { display: block; width: 100%; height: auto; max-height: 44px; margin: 8px 0 2px; color: var(--acento); }
/* Cifras secundarias: más compactas */
.cifras-secundarias { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cifras-secundarias .cifra { padding: 10px 14px; box-shadow: none; }
.cifras-secundarias .cifra .valor { font-size: 1.3rem; }

/* Solo para lectores de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Icono redondo de aviso (Salud y portada) */
.av-icono {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-weight: 800; font-size: 0.8rem; background: var(--superficie-2); color: var(--acento);
}
.enlace-ics { display: block; overflow-wrap: anywhere; margin-top: 4px; }

/* Ayudas «?» (ayuda.js): botón redondo discreto y tarjeta flotante (popover, en la capa superior) */
.ayuda-boton {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; margin-left: 4px; vertical-align: middle;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave);
  font: 600 0.78rem/1 inherit; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ayuda-boton:hover, .ayuda-boton:focus-visible { background: var(--acento-suave); color: var(--acento); border-color: var(--acento); }
.ayuda-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ayuda-tarjeta {
  width: min(420px, calc(100vw - 32px)); max-height: min(80vh, 640px); overflow: auto; margin: auto; padding: 16px 18px;
  border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra), 0 18px 48px color-mix(in srgb, var(--texto) 18%, transparent); font-size: 0.9rem; line-height: 1.5; text-align: left;
  font-weight: 400; white-space: normal; letter-spacing: normal; text-transform: none;
}
.ayuda-tarjeta b { font-weight: 650; }
.ayuda-tarjeta::backdrop { background: color-mix(in srgb, var(--texto) 22%, transparent); }
.ayuda-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.ayuda-cab h4 { margin: 0; font-size: 1rem; }
.ayuda-cerrar { border: 0; background: none; color: var(--texto-suave); font-size: 1rem; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; }
.ayuda-cerrar:hover { background: var(--superficie-2); color: var(--texto); }
.ayuda-tarjeta p { margin: 6px 0; }
.ayuda-escala { width: 100%; border-collapse: collapse; margin: 8px 0; }
.ayuda-escala th { width: 3.6em; white-space: nowrap; padding: 5px 8px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; color: var(--acento);
  background: var(--acento-suave); border-bottom: 2px solid var(--superficie); border-radius: 6px; }
.ayuda-escala td { padding: 5px 10px; border-bottom: 1px solid var(--borde); white-space: normal; }
.ayuda-escala tr:last-child td { border-bottom: 0; }
.ayuda-nota { color: var(--texto-suave); font-size: 0.85rem; }
.campo-ayuda { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo-rotulo { display: flex; align-items: center; gap: 2px; }
.campo-rotulo label { font-size: 0.87rem; color: var(--texto-suave); }

/* Información «?» (ayuda.js `info`): globo junto al título; ratón (hover), teclado (foco) o toque */
.info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; font-weight: 400; }
.info-boton {
  width: 20px; height: 20px; padding: 0; border-radius: 999px; border: 1px solid var(--borde); background: transparent;
  color: var(--texto-suave); font: 600 0.72rem/1 inherit; cursor: help; display: inline-grid; place-items: center;
}
.info-boton:hover, .info.abierta .info-boton, .info-boton:focus-visible { color: var(--acento); border-color: var(--acento); background: var(--acento-suave); }
.info-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.info-texto {
  position: fixed; top: 0; left: 0; z-index: 60; width: max-content; max-width: min(300px, calc(100% - 24px));
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra), 0 10px 30px color-mix(in srgb, var(--texto) 14%, transparent);
  font-size: 0.84rem; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 0.12s, visibility 0.12s;
}
.info.abierta .info-texto, .info-boton:focus-visible + .info-texto { opacity: 1; visibility: visible; }
@media (hover: hover) { .info:hover .info-texto { opacity: 1; visibility: visible; } }

/* Detalle de una salida en bici (actividad.js htmlBici): zonas de potencia y rangos de cadencia */
.bici > div + div { margin-top: 16px; }
.bici h4 { margin: 0 0 8px; font-size: 0.95rem; }
.bici-barra { display: grid; grid-template-columns: minmax(7em, 13em) 1fr 8.5em; gap: 10px; align-items: center; font-size: 0.85rem; margin-bottom: 5px; }
.bici-rot { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bici-pista { height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.bici-pista > span { display: block; height: 100%; border-radius: 999px; }
.bici-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .bici-barra { grid-template-columns: 6.5em 1fr 7.5em; } }

/* Forma: casilla «Comparar con Intervals.icu» con su «?» en la cabecera de la tarjeta */
.comparacion { display: flex; align-items: center; gap: 2px; font-size: 0.87rem; }
.casilla-linea { flex-direction: row; align-items: center; gap: 6px; color: var(--texto-suave); font-size: 0.87rem; }
.cifra .etiqueta .info { margin-left: 4px; }
.extras-form { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.extras-form #ex-min { width: 5.5em; }
.extras-form #ex-nota { flex: 1 1 160px; min-width: 0; }
/* Menú del usuario en la cabecera (nombre ▾ -> Tu cuenta, Cerrar sesión) */
.menu-usuario { position: relative; }
#usuario-actual { cursor: pointer; font: inherit; font-size: 0.8rem; }
.menu-usuario-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 160px; display: grid;
  padding: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); }
.menu-usuario-lista[hidden] { display: none; }
.menu-usuario-lista a, .menu-usuario-lista button { display: block; text-align: left; padding: 8px 10px; border-radius: 6px;
  color: var(--texto); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.menu-usuario-lista a:hover, .menu-usuario-lista button:hover, .menu-usuario-lista :focus-visible { background: var(--acento-suave); }
/* Minigráficas legibles sin ejes: franja de lo normal, referencia, puntos con fecha y rótulo de periodo y rango */
.minigrafica .mini-banda { fill: var(--forma-optimo); }
.minigrafica .mini-banda.aviso { fill: color-mix(in srgb, var(--aviso) 22%, transparent); }   /* el token ya es translúcido */
.minigrafica .mini-ref { stroke: var(--texto-suave); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.minigrafica .mini-punto { fill: transparent; cursor: default; }
.minigrafica .mini-punto:hover { fill: currentColor; opacity: 0.5; }
.minigrafica-caja .minigrafica { margin-bottom: 0; height: 40px; }
.minigrafica-pie { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--texto-suave); margin: 2px 0 4px;
  font-variant-numeric: tabular-nums; }
/* El «?» de cualquier tarjeta o cifra va SIEMPRE en su esquina superior derecha (no pegado al título) */
.cifra { position: relative; }
.cifra .etiqueta:has(> .info) { padding-right: 26px; }
.cifra .etiqueta > .info { position: absolute; top: 10px; right: 10px; margin: 0; }
.tarjeta :is(h2, h3, h4, summary):has(> .info, > .ayuda-boton) { display: flex; align-items: center; gap: 6px; }
.tarjeta :is(h2, h3, h4, summary) > :is(.info, .ayuda-boton) { margin-left: auto; }
.tarjeta > summary:has(> .info)::after { margin-left: 8px !important; float: none; }
/* Textos de ayuda del «?» justificados (con guiones para no dejar huecos grandes entre palabras) */
.info-texto, .ayuda-tarjeta p, .ayuda-tarjeta li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }