/* Atletia — componentes en CSS puro (Jinja + HTMX). Guía: design/README.md y design/components/.
   Requiere tokens.css antes. Colores, espacios, radios y sombras solo con var(--token); nunca un color literal. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 15px/22px var(--font-sans); -webkit-font-smoothing: antialiased; }
.at-num { font-variant-numeric: tabular-nums; }
.at-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.at-col { display: grid; gap: var(--space-4); }
:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.at-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); }

/* ---------- Boton ---------- */
.at-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px;
  padding: 0 20px; border-radius: var(--radius-full); border: 1px solid var(--line);
  background: var(--surface-raised); color: var(--ink); font: 700 14px/1 var(--font-sans);
  text-decoration: none; cursor: pointer; transition: background-color .15s, transform .15s;
}
.at-btn:hover { background: var(--surface-sunken); }
.at-btn:active { transform: scale(.98); }
.at-btn--primario { background: var(--marca); border-color: var(--marca); color: var(--on-marca); }
.at-btn--primario:hover { background: var(--marca); filter: brightness(1.1); }
.at-btn--sutil { border-color: transparent; background: transparent; color: var(--marca); padding: 0 var(--space-3); }
.at-btn--sutil:hover { background: var(--marca-soft); }
.at-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 13px; }
.at-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface-raised); }
.at-btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .at-btn { transition: none; } .at-btn:active { transform: none; } }

/* ---------- Chips: Severidad, EstadoSesion, Deporte ---------- */
.at-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  border-radius: var(--radius-full); font: 600 12px/16px var(--font-sans); white-space: nowrap;
  background: var(--chip-bg, var(--surface-sunken)); color: var(--chip-fg, var(--ink));
}
.at-chip::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--chip-dot, currentColor); flex: none; }
.at-chip__pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.at-chip--urgente  { --chip-fg: var(--urgente); }
.at-chip--atencion { --chip-fg: var(--atencion); }
.at-chip--info     { --chip-fg: var(--info); }
.at-chip--no       { --chip-fg: var(--cumpl-no); }
.at-chip--parcial  { --chip-fg: var(--cumpl-parcial); }
.at-chip--ok       { --chip-fg: var(--cumpl-ok); }
.at-chip--sobre    { --chip-fg: var(--cumpl-sobre); }
.at-chip--sobre::before { content: "▲"; width: auto; height: auto; background: none; font-size: 9px; line-height: 1; }
.at-chip--extra    { --chip-bg: transparent; --chip-fg: var(--cumpl-extra); box-shadow: inset 0 0 0 1px var(--line-strong); }
.at-chip--fuerte   { --chip-bg: var(--chip-fg); color: var(--surface-raised); }
.at-chip--fuerte::before { background: var(--surface-raised); }
.at-chip--nado  { --chip-dot: var(--nado); }
.at-chip--bici  { --chip-dot: var(--bici); }
.at-chip--trote { --chip-dot: var(--trote); }

/* ---------- Icono de deporte ---------- */
.at-ico { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--dep); background: var(--surface-sunken); }
.at-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.at-ico--nado  { --dep: var(--nado); }
.at-ico--bici  { --dep: var(--bici); }
.at-ico--trote { --dep: var(--trote); }

/* ---------- Avatar ---------- */
.at-avatar {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--av-bg, var(--marca-soft)); color: var(--av-fg, var(--marca)); font: 800 14px/1 var(--font-sans);
}
.at-avatar--urgente  { --av-bg: var(--urgente);  --av-fg: var(--on-urgente); }
.at-avatar--atencion { --av-bg: var(--atencion); --av-fg: var(--on-atencion); }
.at-avatar--ok       { --av-bg: var(--ok);       --av-fg: var(--on-ok); }
.at-avatar--pausado  { --av-bg: var(--surface-sunken); --av-fg: var(--ink-muted); }
.at-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
/* Con foto: la imagen tapa las iniciales y el color del estado pasa a un anillo */
.at-avatar--foto { position: relative; box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--av-bg, var(--marca-soft)); }
.at-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.at-avatar--pausado > img { filter: grayscale(1); opacity: .7; }

/* ---------- Resumen (tarjeta azul, una por pantalla) ---------- */
.at-resumen {
  position: relative; overflow: hidden; display: grid; gap: var(--space-4); padding: var(--space-6);
  border-radius: var(--radius-xl); background: var(--marca); color: var(--on-marca); box-shadow: var(--shadow-hero);
}
.at-resumen__rotulo { font: 600 14px/20px var(--font-sans); opacity: .85; }
.at-resumen__cifra { font: 800 56px/56px var(--font-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.at-resumen__cifra small { font-size: 24px; letter-spacing: -.01em; margin-left: 2px; }
.at-resumen__delta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--on-marca); color: var(--marca); font: 800 12px/16px var(--font-sans); justify-self: start; }
.at-resumen__spark { width: 100%; height: 56px; display: block; }
.at-resumen__spark .area { fill: var(--marca-claro); opacity: .45; }
.at-resumen__spark .linea { fill: none; stroke: var(--on-marca); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.at-resumen__pie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--marca-claro); }
.at-resumen__pie b { display: block; font: 800 20px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.at-resumen__pie span { font: 500 12px/16px var(--font-sans); opacity: .85; }

/* ---------- Alerta (tarjeta de la bandeja) ---------- */
.at-bandeja { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.at-alerta {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0 var(--space-3); align-items: center;
  padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.at-alerta .at-avatar { grid-row: 1 / span 2; }
.at-alerta__titulo { margin: 0; font: 700 15px/22px var(--font-sans); min-width: 0; }
.at-alerta__titulo a, .at-actividad__quien a { color: inherit; text-decoration: none; }
.at-alerta__titulo a:hover, .at-actividad__quien a:hover { text-decoration: underline; }
.at-alerta__hora { font: 500 12px/22px var(--font-sans); color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.at-alerta__resumen { grid-column: 2 / -1; margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); min-width: 0; }
.at-alerta__cuerpo { grid-column: 1 / -1; display: grid; gap: var(--space-3); padding-top: var(--space-4); min-width: 0; }
.at-alerta__cita { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--marca-soft); font: 500 15px/22px var(--font-sans); }
.at-alerta__sugerencia { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.at-alerta__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.at-alerta--revisada { box-shadow: none; border-style: dashed; }
.at-alerta--revisada .at-alerta__titulo { color: var(--ink-muted); }

/* ---------- Actividad (feed de sesiones) ---------- */
.at-actividad { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.at-actividad__cab { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.at-actividad__quien { display: grid; min-width: 0; flex: 1; }
.at-actividad__quien b { font: 700 15px/20px var(--font-sans); }
.at-actividad__quien span { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.at-actividad__titulo { margin: 0; font: 800 17px/24px var(--font-sans); letter-spacing: -.01em; }
.at-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.at-stat { display: grid; gap: 2px; min-width: 0; }
.at-stat span { font: 600 12px/16px var(--font-sans); letter-spacing: .02em; color: var(--ink-muted); }
.at-stat b { font: 700 20px/24px var(--font-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.at-stat b small { font-size: 13px; font-weight: 600; color: var(--ink-muted); margin-left: 2px; }
.at-stat--no b { color: var(--cumpl-no); }
.at-stat--parcial b { color: var(--cumpl-parcial); }
.at-stat--ok b { color: var(--cumpl-ok); }
.at-actividad__nota { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ---------- Semaforo ---------- */
.at-semaforo { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/18px var(--font-sans); color: var(--ink); white-space: nowrap; }
.at-semaforo::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--sem); }
.at-semaforo--rojo     { --sem: var(--urgente); color: var(--urgente); }
.at-semaforo--amarillo { --sem: var(--atencion); }
.at-semaforo--verde    { --sem: var(--ok); }
.at-semaforo--pausado  { --sem: transparent; color: var(--ink-muted); }
.at-semaforo--pausado::before { box-shadow: inset 0 0 0 2px var(--line-strong); }

/* ---------- BarraCumplimiento: escala fija 0–150 %, marca en 100 % ---------- */
.at-barra { display: grid; gap: 6px; min-width: 0; }
.at-barra__rotulo { display: flex; justify-content: space-between; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.at-barra__rotulo strong { color: var(--ink); font-weight: 800; }
.at-barra__riel { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.at-barra__relleno { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full); background: var(--fill, var(--ink-muted)); width: calc(var(--pct) / 150 * 100%); max-width: 100%; }
.at-barra__meta { position: absolute; top: -4px; bottom: -4px; left: calc(100% / 150 * 100); width: 2px; border-radius: 2px; background: var(--ink); }
.at-barra--no { --fill: var(--cumpl-no); }
.at-barra--parcial { --fill: var(--cumpl-parcial); }
.at-barra--ok { --fill: var(--cumpl-ok); }
.at-barra--sobre { --fill: var(--cumpl-sobre); }

/* ---------- Dato y Anillo ---------- */
.at-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.at-dato { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.at-dato__rotulo { font: 600 12px/16px var(--font-sans); letter-spacing: .02em; color: var(--ink-muted); }
.at-dato__valor { font: 800 36px/40px var(--font-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.at-dato__unidad { font: 700 15px/1 var(--font-sans); letter-spacing: 0; color: var(--ink-muted); margin-left: 4px; }
.at-dato__nota { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.at-dato--urgente { border-color: var(--urgente); }
.at-dato--urgente .at-dato__valor { color: var(--urgente); }
.at-dato--atencion .at-dato__valor { color: var(--atencion); }
.at-dato--anillo { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
.at-dato--anillo .at-dato__rotulo { display: block; }
.at-anillo {
  --sz: 64px; position: relative; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); border-radius: var(--radius-full);
  background: conic-gradient(var(--fill, var(--marca)) calc(min(var(--pct), 100) * 1%), var(--surface-sunken) 0);
  font: 800 14px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
.at-anillo::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: var(--surface-raised); }
.at-anillo > span { position: relative; }
.at-anillo--ok { --fill: var(--cumpl-ok); }
.at-anillo--parcial { --fill: var(--cumpl-parcial); }
.at-anillo--no { --fill: var(--cumpl-no); }

/* ---------- TablaRoster ---------- */
.at-roster { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow-x: auto; }
.at-tabla { width: 100%; border-collapse: collapse; font: 400 15px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.at-tabla th { text-align: left; padding: var(--space-3) var(--space-4); color: var(--ink-muted); font: 600 12px/16px var(--font-sans); letter-spacing: .02em; white-space: nowrap; border-bottom: 1px solid var(--line); }
.at-tabla th[aria-sort] { color: var(--ink); }
.at-tabla th[aria-sort]::after { content: " ↓"; }
.at-tabla td { padding: var(--space-3) var(--space-4); vertical-align: middle; white-space: nowrap; }
.at-tabla tbody tr + tr td { border-top: 1px solid var(--line); }
.at-tabla tbody tr:hover td { background: var(--surface-sunken); }
.at-tabla .at-n { text-align: right; font-weight: 700; }
.at-persona { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.at-persona b { display: block; font-weight: 700; }
.at-persona small { display: block; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.at-persona:hover b { color: var(--marca); }
.at-conteo { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--radius-full); font: 800 12px/1 var(--font-sans); background: var(--urgente); color: var(--on-urgente); }
.at-conteo--atencion { background: var(--atencion); color: var(--on-atencion); }
.at-conteo--cero { background: transparent; color: var(--ink-muted); font-weight: 500; }
@media (max-width: 640px) { .at-solo-escritorio { display: none; } }

/* ---------- GraficoPMC ---------- */
.at-pmc { margin: 0; display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.at-pmc svg { width: 100%; height: auto; display: block; overflow: visible; }
.at-pmc .grid { stroke: var(--line); stroke-width: 1; }
.at-pmc .umbral { stroke: var(--urgente); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.at-pmc .ctl { fill: none; stroke: var(--pmc-ctl); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.at-pmc .ctl-area { fill: var(--pmc-ctl); opacity: .1; }
.at-pmc .atl { fill: none; stroke: var(--pmc-atl); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.at-pmc .tsb { fill: var(--pmc-tsb); opacity: .3; }
.at-pmc .tsb-bajo { fill: var(--urgente); opacity: .9; }
.at-pmc .hoy { fill: var(--pmc-ctl); stroke: var(--surface-raised); stroke-width: 3; }
.at-pmc .eje { fill: var(--ink-muted); font: 500 12px var(--font-sans); }
.at-pmc .eje-umbral { fill: var(--urgente); font: 700 12px var(--font-sans); }
.at-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.at-leyenda span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--surface-sunken); font: 600 12px/16px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.at-leyenda span::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--c); }
.at-leyenda strong { color: var(--ink); font-weight: 800; }

/* ---------- EstadoSync ---------- */
.at-sync { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--surface-sunken); font: 600 12px/16px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.at-sync::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ok); }
.at-sync--atrasada::before { background: var(--atencion); }
.at-sync--falla { color: var(--urgente); }
.at-sync--falla::before { background: var(--urgente); }
.at-aviso { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); border: 2px solid var(--urgente); color: var(--ink); }
.at-aviso strong { color: var(--urgente); font-weight: 800; }
.at-aviso span { font: 400 13px/18px var(--font-sans); }

/* ---------- Campo ---------- */
.at-campo { display: grid; gap: 6px; max-width: 360px; }
.at-campo label { font: 700 13px/18px var(--font-sans); }
.at-campo input, .at-campo select {
  min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--surface-sunken); color: var(--ink); font: 500 15px/22px var(--font-sans);
}
.at-campo input:hover { border-color: var(--line-strong); }
.at-campo input:focus-visible { background: var(--surface-raised); border-color: var(--marca); outline-offset: 1px; }
.at-campo__ayuda { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.at-campo--error input { border-color: var(--urgente); background: var(--surface-raised); }
.at-campo--error .at-campo__ayuda { color: var(--urgente); }
.at-campo__fila { display: flex; align-items: center; gap: var(--space-3); }
.at-campo__fila span { font: 500 15px/22px var(--font-sans); color: var(--ink-muted); }

/* ---------- Encabezado y secciones ---------- */
.at-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); }
.at-marca { display: inline-flex; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }

/* ---------- Logo (macro logo() en _logo.html) ---------- */
.at-logo { display: inline-flex; align-items: center; gap: var(--logo-gap, 8px); color: var(--ink); }
.at-logo__marca { width: var(--logo-marca, 28px); height: var(--logo-marca, 28px); flex: none; overflow: visible; }
.at-logo__pista { fill: none; stroke: var(--marca); stroke-width: 7px; }
.at-logo__carril { fill: none; stroke: var(--nado); stroke-width: 4px; }
.at-logo__atleta { fill: var(--trote); }
.at-logo__nombre { font: 800 var(--logo-nombre, 20px)/1 var(--font-sans); letter-spacing: -.04em; }
.at-logo--lg { --logo-marca: 52px; --logo-nombre: 38px; --logo-gap: 12px; }
.at-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.at-seccion h2 { margin: 0; font: 800 17px/24px var(--font-sans); letter-spacing: -.01em; }
.at-seccion a, .at-seccion span { font: 600 13px/18px var(--font-sans); color: var(--marca); text-decoration: none; }

/* ---------- Página, selector de tema y estados vacíos ---------- */
.at-page { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); display: grid; gap: var(--space-8); }
.at-header__acciones { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.at-tema { min-width: 0; }
.at-tema::before { content: ""; width: 14px; height: 14px; border-radius: var(--radius-full); border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.at-saludo h1 { margin: 0; font: 800 30px/36px var(--font-sans); letter-spacing: -.03em; text-wrap: balance; }
.at-saludo p { margin: 4px 0 0; color: var(--ink-muted); }
.at-vacio { display: grid; gap: var(--space-2); padding: var(--space-6); background: var(--surface-raised); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.at-vacio h2 { margin: 0; font: 800 17px/24px var(--font-sans); }
.at-vacio p { margin: 0; color: var(--ink-muted); }
.at-login { max-width: 380px; margin: var(--space-12) auto; padding: 0 var(--space-4); display: grid; gap: var(--space-6); }
.at-login__marca { display: flex; justify-content: center; }
.at-login form { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.at-login h1 { margin: 0; font: 800 22px/28px var(--font-sans); letter-spacing: -.02em; }
.at-login .at-campo { max-width: none; }
.at-login .at-btn { width: 100%; }
@media (max-width: 640px) { .at-header .at-sync { display: none; } }