/* 202 Entrenamiento Personal · área privada (cliente y gestión).
   Se apoya en site.css: de ahí vienen las tipografías, los tokens de color,
   los radios, la escala de espacio, los botones (.bg, .bo) y el foco. Aquí
   solo está lo que la web pública no tiene: el shell de la aplicación, la
   navegación inferior, las listas con filete, los estados, los formularios
   y la hoja inferior. Mismo lenguaje, otro uso.

   Principio: pocas cosas, muy bien colocadas. Espacio, tipografía, filetes.
   Las tarjetas se reservan para lo que es una unidad (la próxima sesión, una
   reserva, un aviso, una solicitud). Sombras, ninguna.
   ============================================================ */

:root{
  /* Lo que pinta el navegador y no está en ninguna hoja: la barra de
     desplazamiento, el calendario de un campo de fecha, la lista de un
     desplegable, las casillas. Sin esto salen en claro con el sistema en
     oscuro, que es justo donde más canta. */
  color-scheme:light dark;
  /* Estados. Verde, ámbar y rojo muy contenidos; el texto siempre acompaña
     al color, nunca lo sustituye. Los tres cumplen AA sobre los tres marfiles
     (5,1 o más) y sobre su propio relleno suave. */
  --ok:#2F6B45;--ok-soft:#DFEBE1;
  --warn:#7A5410;--warn-soft:#F1E4C6;
  --bad:#9B3B32;--bad-soft:#F3DEDB;
  --ap-nav-h:64px;
  --ap-top-h:60px;
  --ap-ancho:720px;
  --gs-side:236px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ok:#8FCB9F;--ok-soft:rgba(143,203,159,.14);
    --warn:#E0B26A;--warn-soft:rgba(224,178,106,.14);
    --bad:#E39A92;--bad-soft:rgba(227,154,146,.14);
  }
}

/* ── Shell ─────────────────────────────────────────────────────────── */
/* El grano de la web pública no se pinta aquí: en una interfaz de uso diario
   es textura de más. El cuerpo de la aplicación va a 16px. */
/* Sin rebote de página en las tres aplicaciones. Tirar hacia abajo estando
   arriba recarga en Android y hace el rubber band en iOS: en una web que se
   lee está bien, a mitad de un entreno es perder lo que llevas. Va en
   body.app y no en html, porque en la web pública el gesto sí se quiere. */
html:has(body.app),body.app{overscroll-behavior:none}
body.app{font-size:16px;line-height:1.55;min-height:100svh;display:flex;flex-direction:column}
body.app .grain{display:none}
body.app p{max-width:none}

.ap-top{position:sticky;top:0;z-index:var(--z-nav);height:var(--ap-top-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:0 20px;background:var(--bg);border-bottom:1px solid var(--border)}
.ap-logo{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink)}
.ap-logo img{width:36px;height:36px;border-radius:var(--r-sm);object-fit:contain;background:#000}
.ap-logo span{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;line-height:1.2;color:var(--ink-soft)}
.ap-top-acciones{display:flex;align-items:center;gap:4px}
/* Botón de icono: 44px de objetivo, borde fino, sin relleno. */
.ap-ib{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--ink);cursor:pointer;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.ap-ib:hover{border-color:var(--border-strong);background:var(--hover-wash)}}
.ap-ib:active{transform:scale(.94)}
.ap-ib svg{width:22px;height:22px}
.ap-ib.con-borde{border-color:var(--border-strong)}
/* El punto de "hay avisos sin leer": ocre, pequeño, arriba a la derecha. */
.ap-ib .ap-punto{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--accent);
  border:2px solid var(--bg)}

.ap-main{flex:1;width:100%;max-width:var(--ap-ancho);margin:0 auto;
  padding:var(--s4) 20px calc(var(--ap-nav-h) + var(--s7) + env(safe-area-inset-bottom,0px))}
.ap-main:focus{outline:none}
/* Cada vista entra con un fundido corto: responde a una acción, no decora. */
.ap-vista{animation:ap-entra .2s var(--ease)}
@keyframes ap-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Navegación inferior: cinco destinos, iconos lineales y rótulo. El activo
   va en tinta llena con un punto de ocre; el resto, en tinta apagada. */
.ap-nav{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  height:calc(var(--ap-nav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--bg);border-top:1px solid var(--border)}
.ap-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:44px;color:var(--ink-muted);position:relative;
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;line-height:1;transition:color var(--t) var(--ease)}
.ap-nav a svg{width:22px;height:22px}
.ap-nav a[aria-current="page"]{color:var(--ink)}
.ap-nav a::before{content:"";position:absolute;top:0;left:50%;width:18px;height:2px;margin-left:-9px;background:var(--accent);
  transform:scaleX(0);transition:transform var(--t) var(--ease)}
.ap-nav a[aria-current="page"]::before{transform:scaleX(1)}
.ap-nav a:active{transform:scale(.96)}
.ap-nav[hidden]{display:none}

/* ── Tipografía de la aplicación ────────────────────────────────────── */
.ap-h1{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;
  font-size:clamp(2.2rem,2.033rem + 0.7407vw,2.7rem);line-height:1.05;letter-spacing:-.015em;
  padding-bottom:.04em;margin:0 0 6px;text-wrap:balance;
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.ap-h1:focus{outline:none}
.ap-sub{color:var(--ink-soft);margin:0 0 var(--s5)}
/* Epígrafe: condensada, versalitas, apagado. El ocre se reserva. */
.ap-eb{display:block;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--ink-muted);margin:0 0 var(--s2)}
.ap-h2{font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:600;font-size:1.2rem;line-height:1.3;
  letter-spacing:-.01em;margin:0 0 var(--s3)}
.ap-h3{font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:600;font-size:1.05rem;line-height:1.35;margin:0 0 4px}
/* Cifras y horas en la serif, con numerales de caja alta. */
.ap-num{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.ap-hora{font-size:1.9rem}
.ap-muted{color:var(--ink-muted)}
.ap-p{color:var(--ink-soft);margin:0 0 var(--s3)}
.ap-p:last-child{margin-bottom:0}
.ap-nota{font-size:.94rem;color:var(--ink-muted);line-height:1.5;margin:var(--s3) 0 0}
.ap-pre{white-space:pre-line}

/* Bloques: separación vertical generosa entre bloques de una vista. */
.ap-bloque{margin-top:var(--s6)}
.ap-bloque:first-child{margin-top:0}
.ap-bloque-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.ap-bloque-cab .ap-eb{margin:0}

/* ── Tarjeta: solo para lo que es una unidad ────────────────────────── */
.ap-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:20px}
.ap-card+.ap-card{margin-top:var(--s2)}
.ap-card.destacada{border-color:var(--border-strong)}
.ap-card .ap-eb{margin-bottom:6px}
.ap-card-acciones{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
/* Aviso discreto (algo pendiente, todo al día). */
.ap-aviso{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink)}
.ap-aviso svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--ink-muted)}
.ap-aviso.pendiente{border-color:var(--warn);background:var(--warn-soft)}
.ap-aviso.pendiente svg{color:var(--warn)}
.ap-aviso.error{border-color:var(--bad);background:var(--bad-soft)}
.ap-aviso.error svg{color:var(--bad)}
.ap-aviso.ok{color:var(--ink-soft);border-style:dashed}
.ap-aviso p{margin:0}
.ap-aviso a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--border-strong)}

/* ── Listas con filete ──────────────────────────────────────────────── */
.ap-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.ap-lista>li{border-bottom:1px solid var(--border)}
/* Fila: se toca entera. Fecha o icono a la izquierda, texto en medio,
   estado o flecha a la derecha. Sin hueco muerto entre filas. */
.ap-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);
  width:100%;min-height:72px;padding:14px 0;color:var(--ink);text-align:left;background:transparent;border:0;
  font:inherit;cursor:pointer;transition:background var(--t) var(--ease)}
.ap-fila.sin-accion{cursor:default}
@media(hover:hover) and (pointer:fine){.ap-fila:not(.sin-accion):hover{background:var(--hover-wash)}}
.ap-fila:active:not(.sin-accion) .ap-fila-tx{transform:translateX(2px)}
.ap-fila-tx{min-width:0;transition:transform var(--t) var(--ease)}
.ap-fila-t{display:block;font-weight:500;line-height:1.35}
/* Cuando el título de la fila es el propio enlace, con la altura de la
   línea se queda en 22px y no llega al mínimo táctil de 24. */
a.ap-fila-t{display:inline-flex;align-items:center;min-height:24px;position:relative}
/* Con el dedo, la zona que responde llega a 44px sin que el texto se mueva
   ni la lista crezca: es un ejercicio que se abre de pie y con prisa. */
@media (pointer:coarse){
  a.ap-fila-t::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;min-width:44px}
}
/* Un botón apagado tiene que parecerlo. En el área privada los hay que
   esperan a que se marque una casilla, y con el color de siempre se
   pulsan una y otra vez sin que pase nada. */
.bg:disabled,.bo:disabled,.bwa:disabled{background:var(--bg-alt);color:var(--ink-soft);border-color:var(--border);cursor:default;transform:none}
.ap-fila-d{display:block;color:var(--ink-soft);font-size:.95rem;line-height:1.4;margin-top:2px}
.ap-fila-fin{display:flex;align-items:center;gap:10px;justify-self:end;color:var(--ink-muted);white-space:nowrap;font-size:.95rem}
.ap-fila-fin svg{width:18px;height:18px;flex:none}
.ap-fila-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--ink-soft);background:var(--surface)}
.ap-fila-ic svg{width:20px;height:20px}
/* Fecha en columna: día grande en serif, mes en condensada. */
.ap-fecha{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;
  padding:6px 0;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border)}
.ap-fecha b{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;font-size:1.6rem;line-height:1;
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;color:var(--ink)}
.ap-fecha span{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:10px;color:var(--ink-muted);margin-top:3px}
.ap-fecha.hoy{background:var(--ink);border-color:var(--ink)}
.ap-fecha.hoy b{color:var(--bg)}
.ap-fecha.hoy span{color:var(--bg)}
/* Vista de menú (Más): icono, rótulo, flecha. */
.ap-menu .ap-fila{min-height:60px;padding:8px 0}
.ap-menu .ap-fila-t{font-weight:400}
.ap-menu .ap-fila.peligro{color:var(--bad)}
.ap-menu .ap-fila.peligro .ap-fila-ic{color:var(--bad);border-color:transparent;background:var(--bad-soft)}

/* Definiciones: rótulo y dato, en columnas. */
.ap-datos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px var(--s4);margin:0}
.ap-datos dt{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--ink-muted);padding-top:4px}
.ap-datos dd{margin:0;color:var(--ink);word-break:break-word}
.ap-datos dd small{display:block;color:var(--ink-muted);font-size:.9rem}
/* Un enlace dentro de un dato se toca: 26px de alto y filete. */
.ap-datos dd a{display:inline-flex;align-items:center;min-height:26px;border-bottom:1px solid var(--border-strong);transition:border-color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.ap-datos dd a:hover{border-bottom-color:var(--ink)}}

/* Detalle de sesión: la hora manda. */
.ap-detalle-cab{margin-bottom:var(--s5)}
.ap-detalle-cab .ap-hora{display:block;margin:6px 0 4px}
.ap-detalle-cab .ap-h1{margin-bottom:0}

/* ── Estados: un punto y una palabra. Nunca solo color. ─────────────── */
.ap-est{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:var(--ink-soft);white-space:nowrap}
.ap-est::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-muted);flex:none}
.ap-est.ok{color:var(--ok)}.ap-est.ok::before{background:var(--ok)}
.ap-est.warn{color:var(--warn)}.ap-est.warn::before{background:var(--warn)}
.ap-est.bad{color:var(--bad)}.ap-est.bad::before{background:var(--bad)}
.ap-est.ink{color:var(--ink)}.ap-est.ink::before{background:var(--ink)}

/* Progreso del mes: un círculo por sesión. Relleno, hecha; vacío, pendiente. */
.ap-puntos{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0 var(--s2)}
.ap-puntos i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink);background:transparent}
.ap-puntos i.hecha{background:var(--ink)}
.ap-puntos i.perdida{border-color:var(--ink-muted);background:var(--bg-alt)}

/* Con varias modalidades, una línea por cada una: nombre, cifra y sus puntos. */
.ap-mes-comp{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px var(--s3);padding:10px 0;border-top:1px solid var(--border)}
.ap-mes-comp:last-of-type{border-bottom:1px solid var(--border);margin-bottom:var(--s3)}
.ap-mes-comp .ap-puntos{grid-column:1 / -1;margin:2px 0 0}
.ap-mes-cifra{font-size:1.4rem}
.ap-mes-cifra small{font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:400;font-size:.85rem;color:var(--ink-muted);margin-left:4px}

/* Iniciales de un entrenador. */
.ap-av{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:var(--accent-soft);color:var(--av-ink);font-weight:600;font-size:1rem;letter-spacing:.02em;flex:none}
.ap-persona{display:flex;align-items:center;gap:var(--s3)}
.ap-persona .ap-fila-d{margin-top:0}

/* ── Pestañas (Próximas / Calendario) ───────────────────────────────── */
.ap-tabs{display:flex;gap:var(--s4);border-bottom:1px solid var(--border);margin-bottom:var(--s4)}
.ap-tab{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;background:transparent;border:0;
  font:inherit;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:color var(--t) var(--ease)}
.ap-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
/* Son enlaces que llevan a otra dirección, no pestañas de un panel: se
   marcan con aria-current, que es lo que un lector de pantalla entiende sin
   prometer un teclado de flechas que no existe. */
.ap-tab[aria-current="page"]{color:var(--ink)}
.ap-tab[aria-current="page"]::after{transform:scaleX(1)}

/* Semana: flecha, rótulo, flecha. */
.ap-semana{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.ap-semana p{margin:0;font-weight:500;text-align:center}
.ap-semana small{display:block;color:var(--ink-muted);font-weight:400;font-size:.9rem}

/* Calendario mensual: siete columnas, un punto por sesión. */
.ap-cal{margin-top:var(--s2)}
.ap-cal-cab{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;color:var(--ink-muted);padding-bottom:6px;border-bottom:1px solid var(--border)}
.ap-cal-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px 0;padding-top:6px}
.ap-cal-dia{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-height:52px;padding:6px 0;
  background:transparent;border:0;font:inherit;color:var(--ink);cursor:pointer;border-radius:var(--r-sm)}
.ap-cal-dia:disabled{color:var(--ink-muted);cursor:default}
.ap-cal-dia i{width:5px;height:5px;border-radius:50%;background:var(--ink-muted)}
.ap-cal-dia i.ok{background:var(--ink)}
.ap-cal-dia i.warn{background:var(--warn)}
.ap-cal-dia i.bad{background:var(--bad)}
.ap-cal-dia i.hueco{background:transparent}
.ap-cal-dia b{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-weight:500;
  font-variant-numeric:tabular-nums}
.ap-cal-dia.hoy b{border:1px solid var(--ink)}
.ap-cal-dia[aria-pressed="true"] b{background:var(--ink);color:var(--bg)}
.ap-cal-dia.otro-mes{visibility:hidden}

/* ── Formularios ────────────────────────────────────────────────────── */
.ap-form{display:flex;flex-direction:column;gap:var(--s4)}
.ap-campo{display:flex;flex-direction:column;gap:6px}
.ap-campo>label,.ap-campo>legend{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--ink-soft)}
.ap-campo>label small,.ap-campo>legend small{text-transform:none;letter-spacing:0;font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:400;
  color:var(--ink-muted);font-size:.85rem;margin-left:6px}
.ap-campo input:not([type="checkbox"]):not([type="radio"]),.ap-campo select,.ap-campo textarea{
  width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:1.4;
  transition:border-color var(--t) var(--ease)}
.ap-campo textarea{min-height:104px;resize:vertical}
.ap-campo select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6760' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.ap-campo input::placeholder,.ap-campo textarea::placeholder{color:var(--ink-muted);opacity:1}
.ap-campo input:focus-visible,.ap-campo select:focus-visible,.ap-campo textarea:focus-visible{border-color:var(--ink);outline-offset:2px}
.ap-campo .ap-ayuda{font-size:.9rem;color:var(--ink-muted);margin:0}
.ap-campo.error input,.ap-campo.error textarea{border-color:var(--bad)}
/* Mientras hay una hoja abierta la página se queda donde estaba: position
   fixed con el desplazamiento guardado, que es lo único que funciona en iOS. */
/* Sin el retardo de trescientos milisegundos ni el zoom por doble toque en
   los controles: en la sala la marca de una serie se pulsa cuarenta veces
   por entreno y el segundo toque llegaba como un intento de acercar. */
button,a,label,select,input[type="checkbox"],input[type="radio"],summary{touch-action:manipulation}
body.ap-fijo{position:fixed;left:0;right:0;width:100%;overflow-y:scroll}
/* Cambio de pantalla que tarda: la vista se apaga y una línea recorre la
   parte de arriba. Una sola pasada, no un bucle, y nada por debajo de 140 ms.
   Es lo único de la aplicación que informa de una espera, porque es lo único
   que espera por una respuesta que no controlamos. */
body.ap-cargando-ruta .ap-vista{opacity:.45;transition:opacity 120ms var(--ease)}
body.ap-cargando-ruta::after{content:'';position:fixed;top:0;left:0;width:100%;height:2px;
  background:var(--accent);transform-origin:0 50%;transform:scaleX(0);
  animation:ap-carga 900ms var(--ease) forwards;z-index:calc(var(--z-nav) + 2);pointer-events:none}
@keyframes ap-carga{from{transform:scaleX(0)}to{transform:scaleX(.9)}}
@media(prefers-reduced-motion:reduce){
  body.ap-cargando-ruta .ap-vista{transition:none}
  body.ap-cargando-ruta::after{animation:none;transform:scaleX(1);opacity:.55}
}
/* Que el teclado del móvil no deje el campo enfocado debajo de una barra. */
.ap-campo,.en-serie,.en-bloque{scroll-margin-top:calc(var(--ap-top-h) + 88px)}
.ap-hoja,.ap-hoja *{overscroll-behavior:contain}
.ap-error{color:var(--bad);font-size:.94rem;margin:0}
.ap-error:empty{display:none}
fieldset.ap-campo{border:0;padding:0;margin:0;min-width:0}
.ap-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;cursor:pointer;color:var(--ink-soft);line-height:1.45}
.ap-check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--ink);cursor:pointer}
.ap-radios{display:flex;flex-direction:column;gap:2px}
.ap-radio{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;color:var(--ink)}
.ap-radio input{width:20px;height:20px;margin:0;accent-color:var(--ink);cursor:pointer;flex:none}
.ap-form-acciones{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.ap-form-acciones .bg,.ap-form-acciones .bo{width:100%}
/* Los botones de la web se reutilizan tal cual; aquí solo su anchura y su
   variante en tinta para la acción principal del área privada. */
.ap-acciones{display:flex;flex-direction:column;gap:var(--s2)}
.ap-acciones .bg,.ap-acciones .bo{width:100%}
.ap-btn-ancho{width:100%}
.ap-enlace{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);font-weight:500;
  border-bottom:0;background:transparent;border:0;padding:0;font:inherit;cursor:pointer}
.ap-enlace span{border-bottom:1px solid var(--border-strong);transition:border-color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.ap-enlace:hover span{border-bottom-color:var(--ink)}}
.ap-enlace svg{width:16px;height:16px}
.ap-enlace.suave{color:var(--ink-soft);font-weight:400}
.ap-enlace.centrado{justify-content:center;width:100%}
/* Volver: flecha y texto, arriba de cada subpantalla. */
.ap-volver{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-6px 0 var(--s3) -6px;padding:0 6px;
  color:var(--ink-soft);font-size:.95rem;border-radius:var(--r-sm)}
.ap-volver svg{width:18px;height:18px}
@media(hover:hover) and (pointer:fine){.ap-volver:hover{color:var(--ink)}}

/* ── Confirmaciones: una marca, un titular, los datos ───────────────── */
.ap-confirmacion{text-align:center;padding:var(--s6) 0 var(--s4)}
.ap-marca{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:var(--ink);color:var(--bg);margin-bottom:var(--s4);animation:ap-marca .42s var(--spring)}
.ap-marca svg{width:28px;height:28px}
@keyframes ap-marca{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.ap-confirmacion .ap-h1{margin-bottom:var(--s5)}
.ap-confirmacion .ap-datos-centro{display:flex;flex-direction:column;gap:4px;align-items:center;color:var(--ink-soft)}
.ap-confirmacion .ap-datos-centro b{font-weight:600;color:var(--ink);font-size:1.15rem}
.ap-confirmacion .ap-acciones{margin-top:var(--s6)}

/* ── Hoja inferior y diálogo ────────────────────────────────────────── */
/* Un <dialog> nativo: foco atrapado, Escape cierra, fondo inerte. En móvil
   sube desde abajo; en escritorio se centra. Solo transform y opacidad. */
.ap-hoja{width:100%;max-width:100%;margin:auto 0 0;border:0;padding:0;background:transparent;color:var(--ink);
  max-height:92svh;overflow:visible}
.ap-hoja::backdrop{background:rgba(21,21,21,.5)}
.ap-hoja-in{background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;border:1px solid var(--border);border-bottom:0;
  padding:12px 20px 0;max-height:92svh;overflow-y:auto;overscroll-behavior:contain;
  animation:ap-sube .28s var(--ease)}
/* Asignar una rutina a doce clientes no cabe en una pantalla de móvil, y el
   botón se quedaba al final del desplazamiento, cortado por el borde. Las
   acciones se pegan al fondo de la hoja: lo que se mueve es el contenido, y
   lo que hay que pulsar está siempre a la vista. */
.ap-hoja-in > .ap-acciones,.ap-hoja-in .ap-form > .ap-acciones{
  position:sticky;bottom:0;z-index:1;margin-top:var(--s4);
  padding:12px 0 calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--surface);border-top:1px solid var(--border)}
@keyframes ap-sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.ap-hoja-asa{width:36px;height:4px;border-radius:99px;background:var(--border-strong);margin:0 auto var(--s4)}
.ap-hoja .ap-h2{margin-bottom:var(--s2)}
.ap-hoja .ap-acciones{margin-top:var(--s5)}
.ap-hoja .ap-lista{margin-top:var(--s3)}

/* Región en directo para lo que cambia sin recargar. */
.ap-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Estado vacío y carga. */
.ap-vacio{padding:var(--s6) 0;text-align:center;color:var(--ink-muted)}
.ap-vacio svg{width:28px;height:28px;color:var(--ink-muted);margin-bottom:var(--s2)}
.ap-cargando{padding:var(--s7) 0;text-align:center;color:var(--ink-muted)}

/* Modo demostración: una línea, solo en el acceso. */
.ap-demo{margin-top:var(--s6);padding-top:var(--s4);border-top:1px dashed var(--border-strong)}
.ap-demo .ap-eb{color:var(--ink-muted)}
.ap-demo .ap-lista{border-top:0}
.ap-demo .ap-fila{min-height:52px;padding:8px 0}

/* ── Acceso ─────────────────────────────────────────────────────────── */
/* La barra de desplazamiento siempre reservada: cuando el formulario crece
   (un mensaje, la lista de demostración) la columna no salta 15px hacia la
   izquierda en los navegadores con barra clásica. */
.lg-html{overflow-y:scroll}
/* Sin foto: la marca, el título y el formulario sobre el fondo marfil, en
   una sola columna estrecha. Es la pantalla más limpia del área: aire,
   tipografía y nada más. En escritorio, la misma columna, más abajo. */
.lg{min-height:100svh;display:grid;align-content:start}
.lg-form{width:100%;max-width:440px;margin:0 auto;padding:var(--s5) 20px var(--s7)}
/* El mismo 202 negro que encabeza el área y el panel, como enlace a la web. */
.lg-form .ap-form-acciones{justify-content:center}
.lg-marca{display:inline-flex;align-items:center;min-height:48px;margin-bottom:var(--s6);color:var(--ink)}
.lg-marca img{width:48px;height:48px;border-radius:var(--r-sm);object-fit:contain;background:#000;display:block}
.lg-form .ap-h1{font-size:1.9rem}
.lg-form .ap-form{margin-top:var(--s4)}
.lg-pie{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s6);font-size:.9rem;color:var(--ink-muted)}
.lg-pie a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-muted)}
@media(hover:hover) and (pointer:fine){.lg-pie a:hover{color:var(--ink)}}
.lg-form .ap-enlace.centrado{margin-top:var(--s2)}

/* ── Panel de gestión ───────────────────────────────────────────────── */
body.gs{font-size:15px}
.gs-shell{display:grid;grid-template-columns:var(--gs-side) minmax(0,1fr);min-height:100svh}
.gs-side{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;gap:var(--s4);
  padding:20px 16px;background:var(--surface);border-right:1px solid var(--border)}
.gs-side .ap-logo{padding:0 8px}
.gs-side .ap-logo img{width:40px;height:40px}
.gs-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.gs-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);color:var(--ink-soft);
  font-weight:500;position:relative;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.gs-nav a svg{width:20px;height:20px;flex:none}
@media(hover:hover) and (pointer:fine){.gs-nav a:hover{background:var(--hover-wash);color:var(--ink)}}
.gs-nav a[aria-current="page"]{background:var(--bg-alt);color:var(--ink)}
.gs-nav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--accent);border-radius:2px}
.gs-nav .gs-cuenta{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--ink);color:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:12px}
.gs-side-pie{display:flex;align-items:center;gap:12px;padding:12px 8px 0;border-top:1px solid var(--border)}
.gs-side-pie .ap-av{width:36px;height:36px;font-size:.85rem}
.gs-side-pie b{display:block;font-weight:500;line-height:1.2}
.gs-side-pie button{display:inline-flex;align-items:center;background:transparent;border:0;padding:0;font:inherit;font-size:.9rem;color:var(--ink-muted);cursor:pointer;min-height:44px;margin:-10px 0}
@media(hover:hover) and (pointer:fine){.gs-side-pie button:hover{color:var(--ink)}}
.gs-main{padding:var(--s5) clamp(20px,8px + 3.333vw,56px) var(--s8);min-width:0}
.gs-main:focus{outline:none}
.gs-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.gs-cab .ap-h1{margin-bottom:0}
.gs-cab .ap-sub{margin:4px 0 0}
.gs-centro{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink-soft);font-size:.92rem}
/* Cifras del día: cuatro columnas separadas por filete, no cuatro cajas. */
.gs-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.gs-kpi{display:block;padding:var(--s4) var(--s4) var(--s4) 0;color:var(--ink);position:relative}
.gs-kpi+.gs-kpi{padding-left:var(--s4);border-left:1px solid var(--border)}
.gs-kpi .ap-eb{margin-bottom:8px}
.gs-kpi .ap-num{display:block;font-size:2.6rem;color:var(--ink)}
.gs-kpi .ap-num small{font-size:1.2rem;color:var(--ink-muted);margin-left:4px}
.gs-kpi .gs-kpi-pie{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:.9rem;color:var(--ink-soft)}
.gs-kpi .gs-kpi-pie svg{width:14px;height:14px}
@media(hover:hover) and (pointer:fine){a.gs-kpi:hover .gs-kpi-pie{color:var(--ink)}}
.gs-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s7)}
.gs-cols .ap-fila{min-height:60px;padding:10px 0}
.gs-plazas{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;font-size:1.35rem;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;color:var(--ink)}
.gs-plazas.lleno{color:var(--bad)}
.gs-topbar{display:none}

/* ── Responsive ─────────────────────────────────────────────────────── */
/* Escritorio del cliente: la navegación pasa a la izquierda, el contenido
   se queda en su columna de 720px. Mismo modelo mental. */
@media(min-width:900px){
  .ap-nav{top:0;bottom:0;right:auto;width:220px;height:auto;padding:calc(var(--ap-top-h) + var(--s4)) 12px 0;
    display:flex;flex-direction:column;gap:2px;border-top:0;border-right:1px solid var(--border)}
  .ap-nav a{flex-direction:row;justify-content:flex-start;gap:12px;min-height:46px;padding:0 12px;border-radius:var(--r-sm);
    font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:500;text-transform:none;letter-spacing:0;font-size:15px}
  .ap-nav a::before{top:12px;bottom:12px;left:0;width:2px;height:auto;margin:0;transform:scaleY(0)}
  .ap-nav a[aria-current="page"]::before{transform:scaleY(1)}
  .ap-nav a[aria-current="page"]{background:var(--bg-alt)}
  .ap-top{padding-left:calc(220px + 40px);padding-right:40px}
  .ap-main{margin-left:220px;width:auto;max-width:calc(220px + var(--ap-ancho));padding:var(--s6) 40px var(--s8)}
  .ap-hoja{max-width:480px;margin:auto}
  .ap-hoja-in{border-radius:var(--r-lg);border-bottom:1px solid var(--border)}
  .ap-hoja-in > .ap-acciones,.ap-hoja-in .ap-form > .ap-acciones{padding-bottom:24px}
  .ap-form-acciones,.ap-acciones{flex-direction:row;flex-wrap:wrap}
  .ap-form-acciones .bg,.ap-form-acciones .bo,.ap-acciones .bg,.ap-acciones .bo{width:auto;min-width:200px}
  .ap-acciones.apilada{flex-direction:column}
  .ap-acciones.apilada .bg,.ap-acciones.apilada .bo{width:100%}
  /* Arriba y no centrado en vertical: si el contenido crece al cargar (la
     lista de demostración, un mensaje), nada de lo que ya se veía se mueve. */
  .lg-form{padding:clamp(64px,10vh + 16px,140px) 24px var(--s8)}
  .lg-marca{margin-bottom:var(--s7)}
}
@media(min-width:1440px){
  .ap-top{padding-left:calc(220px + (100% - 220px - var(--ap-ancho))/2)}
  .ap-main{margin-left:220px;width:auto;max-width:none;padding-left:calc((100% - 220px - var(--ap-ancho))/2);padding-right:calc((100% - 220px - var(--ap-ancho))/2)}
}
/* Panel en tableta y móvil: la barra lateral se convierte en barra superior
   con menú; las cifras a dos columnas; las tres columnas se apilan. */
@media(max-width:1024px){
  .gs-cols{grid-template-columns:1fr 1fr}
  .gs-cols>:last-child{grid-column:1 / -1}
}
/* En el panel ancho no hay barra superior, así que la tira se pega arriba. */
@media(min-width:901px){ .gs-main .en-vivo{top:0} }
@media(max-width:900px){
  /* minmax(0,1fr), no 1fr: con 1fr la columna crece hasta el contenido menos
     encogible (una tira de pestañas que se desplaza) y arrastra toda la
     pantalla, barra incluida, fuera del móvil. */
  .gs-shell{grid-template-columns:minmax(0,1fr)}
  .gs-side{display:none}
  .gs-topbar{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    height:var(--ap-top-h);padding:0 20px;background:var(--bg);border-bottom:1px solid var(--border)}
  .gs-main{padding:var(--s4) 20px var(--s8)}
  .gs-cab{flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5)}
  .gs-kpis{grid-template-columns:1fr 1fr}
  .gs-kpi{padding:var(--s3) var(--s3) var(--s3) 0}
  .gs-kpi+.gs-kpi{padding-left:var(--s3)}
  .gs-kpi:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--border)}
  .gs-kpi:nth-child(4){border-top:1px solid var(--border)}
  .gs-kpi .ap-num{font-size:2.2rem}
  .gs-cols{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s6)}
  .gs-cols>:last-child{grid-column:auto}
  /* El menú del panel en móvil reutiliza la hoja: lista de secciones. */
  .gs-menu .gs-nav a{min-height:48px}
}
@media(max-width:600px){
  .ap-datos{grid-template-columns:1fr;gap:12px}
  .ap-datos dt{padding-top:0;margin-bottom:-8px}
}

/* ── Piezas sueltas que las vistas componen ─────────────────────────── */
/* Bloque editorial con una foto real del centro a la derecha. */
.ap-foto-bloque{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:var(--s3);align-items:center}
.ap-foto-bloque img{width:112px;height:84px;object-fit:cover;border-radius:var(--r-sm)}
.ap-foto-bloque .ap-p{margin-bottom:var(--s2)}
.ap-mt0{margin-top:0}
.ap-mt1{margin-top:8px}
.ap-mt2{margin-top:12px}
.ap-mb0{margin-bottom:0}
.ap-fila.corta{min-height:48px;padding:8px 0}
.ap-fila.media{min-height:56px;padding:8px 0}
.ap-fila.apagada{opacity:.55}
.ap-fila-t.normal{font-weight:400}
.ap-cifra{font-size:1.5rem;min-width:36px;text-align:center}
.ap-dato-num{font-size:1.25rem}
.ap-iban{letter-spacing:.04em}
.ap-h1.menor{font-size:1.8rem}
.ap-marca.suave{background:var(--surface);color:var(--ink);border:1px solid var(--border)}
.ap-confirmacion.corta{padding-top:8px}
.ap-confirmacion.pegada{padding-top:0}
.ap-hist-fecha{color:var(--ink-muted);font-size:.9rem;white-space:nowrap}
.ap-hist-texto{color:var(--ink)}
.ap-fila-ic.nuevo{border-color:var(--accent);color:var(--accent-ink)}
.ap-sub-ok{margin-top:var(--s2)}
.ap-lista.sin-filete{border-top:0}
.ap-sub.pegado{margin:0}
.ap-eb.espaciado{margin-top:20px}
.ap-detalle-cab .ap-est-linea{margin-top:6px}

/* ── Panel de gestión: piezas de las secciones ─────────────────────── */
/* Barra de acciones de una sección: título a la izquierda, botones a la derecha. */
.gs-cab-acciones{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
/* Filtros: controles de 44px en fila, que se apilan en móvil. */
.gs-filtros{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s4)}
.gs-filtros select,.gs-filtros input{min-height:44px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  font:inherit;font-size:16px;padding:0 12px}
.gs-filtros select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6760' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px}
.gs-filtros label{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--ink-muted)}
.gs-filtros .gs-filtro{display:flex;flex-direction:column;gap:4px}
.gs-filtros .gs-filtro input{min-width:220px}
/* Botón pequeño: control de 44px, borde fino. El activo, en tinta. */
.gs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:transparent;color:var(--ink);font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.gs-btn svg{width:16px;height:16px;flex:none}
@media(hover:hover) and (pointer:fine){.gs-btn:hover{border-color:var(--ink)}}
.gs-btn:active{transform:scale(.97)}
.gs-btn.activo{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gs-btn.peligro{color:var(--bad)}
.gs-btn[disabled]{opacity:.5;cursor:default}
.gs-acciones-fila{display:flex;flex-wrap:wrap;gap:6px;justify-self:end}
/* La hora en el día, como la fecha en la agenda del cliente. */
.gs-hora{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;padding:6px 0;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border)}
.gs-hora b{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;font-size:1.35rem;line-height:1;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;color:var(--ink)}
.gs-hora span{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--ink-muted);margin-top:3px}
.gs-hora.grupo{border-color:var(--accent-soft)}
/* Semana: siete columnas en escritorio, una lista por día en móvil. */
.gs-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:start}
.gs-dia{min-width:0}
.gs-dia-cab{display:flex;align-items:baseline;gap:6px;padding:6px 0;border-bottom:1px solid var(--border);margin-bottom:8px;
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--ink-muted)}
.gs-dia-cab b{font-family:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,serif;font-weight:600;font-size:1.4rem;letter-spacing:0;text-transform:none;color:var(--ink);
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.gs-dia.hoy .gs-dia-cab b{color:var(--accent-ink)}
.gs-evento{display:block;width:100%;text-align:left;padding:8px 10px;margin-bottom:6px;border:1px solid var(--border);border-left:2px solid var(--ink);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.85rem;line-height:1.3;cursor:pointer;min-height:44px;transition:border-color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.gs-evento:hover{border-color:var(--border-strong);border-left-color:var(--ink)}}
.gs-evento.grupo{border-left-color:var(--accent)}
.gs-evento.duo{border-left-color:var(--ink-muted)}
/* Lo pasado y lo cancelado se atenúan con color, nunca con opacidad: el texto
   sigue cumpliendo AA sobre la superficie. */
.gs-evento.pasada{border-left-color:var(--border-strong);background:var(--bg)}
.gs-evento.pasada b{color:var(--ink-soft)}
.gs-evento.cancelada{text-decoration:line-through;border-left-color:var(--bad)}
.gs-evento.cancelada b,.gs-evento.cancelada span{color:var(--ink-muted)}
.gs-evento b{display:block;font-weight:600;font-variant-numeric:tabular-nums}
.gs-evento span{display:block;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-vacio-dia{font-size:.85rem;color:var(--ink-muted);padding:6px 0}
/* Ficha: dos columnas en escritorio. */
.gs-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s7);align-items:start}
.gs-dos>section{min-width:0}
.gs-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:99px;border:1px solid var(--border);font-size:.85rem;color:var(--ink-soft);background:var(--surface)}
.gs-chip.ok{color:var(--ok);border-color:var(--ok)}
.gs-chip.warn{color:var(--warn);border-color:var(--warn)}
.gs-lista-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:var(--s5) 0 var(--s2)}
.gs-lista-cab .ap-eb{margin:0}
.gs-lista-cab:first-child{margin-top:0}
.gs-resp{margin-top:6px}
.gs-resp dt{font-weight:500;color:var(--ink)}
.gs-resp dd{margin:0 0 8px;color:var(--ink-soft)}
.gs-nota{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;margin-top:8px;font-size:.95rem}
.gs-nota small{display:block;color:var(--ink-muted);margin-top:4px}
.gs-ajuste{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:var(--s3);align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.gs-ajuste input{min-height:44px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;padding:0 12px;text-align:right}
.gs-ajuste input:disabled{background:transparent;border-color:transparent;color:var(--ink);font-weight:500}
.gs-ajuste .ap-fila-d{margin-top:2px}
.gs-doc-contenido{white-space:pre-line;color:var(--ink-soft);max-height:40vh;overflow:auto;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.gs-dosCampos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:900px){
  .gs-semana{grid-template-columns:1fr}
  .gs-evento{font-size:.95rem}
  .gs-dos{grid-template-columns:1fr}
  .gs-cab-acciones{width:100%}
  .gs-cab-acciones .gs-btn,.gs-cab-acciones .bg,.gs-cab-acciones .bo{flex:1 1 auto}
  .gs-ajuste{grid-template-columns:minmax(0,1fr) 110px}
}
@media(max-width:600px){
  .gs-dosCampos{grid-template-columns:1fr}
}

/* La puerta de Sala 202 desde el acceso: una línea centrada bajo el
   formulario, separada de los enlaces legales del pie. */
.lg-alta{margin-top:var(--s4);text-align:center}

/* El comentario del entrenador sobre un entreno: es de otra voz que el resto
   de la pantalla, y el filete ocre a la izquierda es lo que lo dice. */
.en-respuesta{border-left:3px solid var(--accent)}

/* Un contador dentro de una pestaña necesita aire y menos peso: sin esto se
   lee «Todos12». */
.ap-tab small{margin-left:6px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.ap-tab[aria-current="page"] small{color:var(--ink-soft)}
/* Una tarjeta seguida de texto suelto se quedaba pegada al párrafo. */
.ap-card+.ap-p,.ap-card+.ap-nota{margin-top:var(--s3)}

/* Catálogo de programas. Tarjetas y no filas: aquí no se escanea una lista
   buscando un nombre, se comparan tres o cuatro cosas para decidir, y cada
   una necesita sitio para su descripción. El que ya sigues se marca con el
   filete ocre, el mismo recurso que en el resto de Sala 202. */
.pg-filtros .gs-filtro{flex:1 1 170px}
.pg-lista{display:grid;gap:var(--s3)}
@media(min-width:760px){.pg-lista{grid-template-columns:1fr 1fr}}
.pg-prog{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:20px}
.pg-prog.mio{border-left:3px solid var(--accent)}
.pg-prog .ap-h3{margin:2px 0 6px}
/* El nombre es el enlace al programa, y a 20px de alto no se acierta con el
   dedo. El relleno lo sube a 28; el margen negativo deja la caja donde estaba. */
.pg-prog .ap-h3 a{display:inline-block;padding:4px 0;margin:-4px 0}
.pg-prog .ap-p{flex:1}
.pg-datos{display:block;margin-top:var(--s2)}
.pg-accion{margin-top:var(--s3)}

/* ── Cuadro de precios de Sala 202 online ────────────────────────────
   Las reglas de por qué está así, en DESIGN.md §25. Aquí, lo justo para que
   se cumplan: los dos planes dicen lo mismo en el mismo orden (consistencia),
   el destacado se distingue por borde y rótulo y no por un color chillón
   (jerarquía sin ruido), y lo que no entra se ve tachado pero legible, no
   escondido. Sin degradados ni sombras: §2. */
.pr-periodo{display:flex;gap:var(--s4);align-items:center;justify-content:center;
  border-bottom:1px solid var(--border);margin-bottom:var(--s4)}
.pr-periodo .ap-tab{padding:0 2px}
.pr-periodo .ap-tab small{color:var(--accent-ink);font-size:13px}
.pr-periodo .ap-tab[aria-current="page"] small{color:var(--accent-ink)}

.pr-planes{display:grid;gap:var(--s3)}
/* Una columna por plan, y el número lo pone la plantilla (--planes). Con
   auto-fit el reparto depende del ancho disponible y el tercer plan acababa
   descolgado solo en la fila de abajo. */
@media(min-width:760px){.pr-planes{grid-template-columns:repeat(var(--planes,2),minmax(0,1fr));align-items:stretch}}

.pr-plan{position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:20px}
/* El destacado: borde ocre y rótulo. Nada más. */
.pr-plan.destacado{border-color:var(--accent)}
.pr-insignia{position:absolute;top:-1px;right:16px;transform:translateY(-50%);
  padding:2px 10px;border-radius:999px;background:var(--accent);color:#14120F;
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:11px;line-height:1.6;white-space:nowrap}
.pr-nombre{margin:0}
.pr-quien{display:block;margin:2px 0 var(--s3);min-height:2.6em}
.pr-precio{margin:0;display:flex;align-items:baseline;gap:4px}
.pr-cifra{font-size:2.4rem}
.pr-unidad{color:var(--ink-soft)}
.pr-letra{margin:2px 0 var(--s3)}

.pr-lista{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:10px;flex:1}
.pr-lista li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.pr-lista svg{flex:none;width:18px;height:18px;margin-top:3px}
.pr-si svg{color:var(--ok)}
/* Lo que no entra se lee, pero se lee distinto: apagado, nunca escondido. */
.pr-no{color:var(--ink-muted)}
.pr-no svg{color:var(--ink-muted)}
.pr-accion{margin:0}

/* ── Sala 202 ────────────────────────────────────────────────────────
   La aplicación de entrenamiento es otra aplicación, no otra sección: para
   que al cruzar se note, su cabecera lleva el rótulo en ocre y un filete del
   mismo color. Nada más: misma retícula, misma tipografía, mismos tokens,
   porque siguen siendo la misma casa. */
.sala .ap-top{border-bottom-color:var(--accent)}
.sala .ap-logo span{color:var(--accent-ink)}
/* Y en el área de cliente, la tarjeta que lleva hasta allí: el mismo ocre en
   el rótulo, para que la puerta y lo que hay detrás se reconozcan. */
.ap-puerta{border-color:var(--border-strong)}
.ap-puerta .ap-eb{color:var(--accent-ink)}

/* ── Módulo de entrenamiento ─────────────────────────────────────────
   Biblioteca, rutinas, sesión en vivo y seguimiento. Mismo lenguaje que el
   resto del área: filetes, tipografía, tokens. Lo único nuevo es la fila de
   serie de la sesión en vivo (inputs grandes, una marca) y la barra de
   descanso, pensadas para el móvil en la mano. */
.en-mini{display:inline-flex;align-items:center;justify-content:center;width:64px;height:48px;flex:none;border-radius:var(--r-sm);
  background:var(--bg-alt);color:var(--ink-muted);overflow:hidden}
.en-mini img{width:100%;height:100%;object-fit:cover;display:block}
.en-mini svg{width:22px;height:22px}
.en-tabs{overflow-x:auto;scrollbar-width:none}
.en-tabs::-webkit-scrollbar{display:none}
.en-tabs .ap-tab{white-space:nowrap;flex:none}
.en-acciones-cab{margin-bottom:var(--s4)}
.en-filtros{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}
.en-filtros-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.en-filtro-q input{min-height:52px}
.en-cuenta{margin:0 0 var(--s2);font-size:.9rem;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s3)}
.en-pick-filtros{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:var(--s2)}
.en-pick{max-height:52vh;overflow-y:auto}
.en-pick .ap-fila{min-height:60px}

/* Ficha: vídeo en bucle o las dos fotos alternando. */
.en-video{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--dark);margin-bottom:var(--s4)}
.en-video video{width:100%;height:100%;display:block;object-fit:cover}
.ej-anim{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--bg-alt);margin-bottom:var(--s4)}
.ej-anim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ej-anim img:last-child{animation:ej-rep 1.8s ease-in-out infinite alternate}
@keyframes ej-rep{0%,35%{opacity:0}65%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ej-anim img:last-child{animation:none;opacity:0}}
.ej-anim img:only-child{animation:none;opacity:1}
.ej-anim.en-sin-foto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-muted)}
.ej-anim.en-sin-foto svg{width:28px;height:28px}
/* El mapa de músculos. Dibujo propio (assets/js/app/musculos.js): trazo
   plano, sin degradados ni renders, como el resto del sistema. El músculo
   principal lleva el ocre de la marca y los secundarios el mismo color a
   media tinta: la jerarquía se lee sin leyenda. */
.mm{display:block;width:100%;max-width:340px;height:auto;margin:0 auto var(--s3)}
/* La opacidad va en el GRUPO y no en el relleno de cada forma. Con un color
   translúcido —y --border lo es— cada solape suma alfa, y la silueta salía a
   parches: el brazo más claro donde monta sobre el torso. Compuesto de una
   vez, el cuerpo es una sola mancha plana. */
.mm-base{fill:var(--ink);opacity:.14;stroke:none}
/* Y lo que no se trabaja no se pinta. Enseñar todas las regiones apagadas
   convierte la silueta en un robot por piezas y quita del medio lo único que
   hay que mirar. */
.mm-reg [id]{fill:none;stroke:none}
.mm-reg .mm-p{fill:var(--accent)}
.mm-reg .mm-s{fill:var(--accent);opacity:.42}
.mm-cara{fill:var(--ink-muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.en-musculos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:var(--s4)}
.en-musculos .ap-eb{display:inline-flex;align-items:center;gap:6px;margin:0}
.en-musculos i{width:10px;height:10px;border-radius:3px;background:var(--accent);flex:none}
.en-musculos .sec i{opacity:.42}
.en-datos{margin-bottom:var(--s3)}
.en-pasos{margin:0;padding-left:1.4em;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
.en-pasos li::marker{color:var(--ink-muted);font-variant-numeric:tabular-nums}
.en-record{padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--s3)}
.en-record .ap-eb{margin-bottom:8px}
.en-record-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.en-cifra{display:block;font-size:1.7rem;color:var(--ink)}
.en-cifra small{font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:400;font-size:.8rem;color:var(--ink-muted);margin-left:4px}

/* Formularios del módulo: chips de 44px para elegir varios, días de la semana. */
.en-form .gs-dosCampos{gap:var(--s3)}
.en-chips{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.en-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;cursor:pointer;position:relative}
.en-chip input,.en-dia input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.en-chip span{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--border-strong);border-radius:99px;font-size:.92rem;color:var(--ink-soft);
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.en-chip input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.en-chip input:focus-visible+span,.en-dia input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.en-dias{display:flex;gap:6px}
.en-dia{flex:1;display:flex;cursor:pointer;position:relative}
.en-dia span{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--border-strong);border-radius:var(--r-sm);font-weight:500;color:var(--ink-soft)}
.en-dia input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.en-ss{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:99px;border:1px solid var(--accent);color:var(--accent-ink);
  font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;vertical-align:middle}

/* Programas de varias sesiones: el día A, el día B… Cada uno en un
   <details>, con el que toca abierto. La cabecera es un objetivo táctil
   entero (44px) porque en el móvil se pulsa con el pulgar y de pie. */
.en-sesion{margin-top:var(--s3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.en-sesion>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  min-height:44px;padding:10px 16px;font-weight:500}
.en-sesion>summary::-webkit-details-marker{display:none}
.en-sesion-t{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;
  font-weight:700;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase}
.en-sesion-d{flex:none;font-size:.9rem;color:var(--ink-muted)}
.en-sesion>summary::after{content:"";flex:none;width:13px;height:13px;margin-left:2px;
  border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);transform:rotate(-45deg);
  transition:transform var(--t) var(--ease)}
.en-sesion[open]>summary::after{transform:rotate(45deg)}
.en-sesion>summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.en-sesion .ap-lista{margin:0;border-top:1px solid var(--border)}
.en-sesion .ap-acciones{padding:0 16px 16px}

/* Cómo seguir el programa: se lee cada vez que se entrena, así que va a la
   vista y no plegado. */
.en-guia{margin-top:var(--s3);padding:14px 16px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0}
.en-guia .ap-p{margin:4px 0 0}

/* Las normas comunes a todos los programas, plegadas: hacen falta la primera
   vez y estorban a partir de la segunda. */
.en-normas{margin-top:var(--s3)}
.en-normas>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink-soft)}
.en-normas>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.en-normas dl{margin:4px 0 0;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.en-normas dt{font-weight:600;font-size:.94rem}
.en-normas dd{margin:2px 0 12px;font-size:.94rem;color:var(--ink-muted);line-height:1.5}
.en-normas dd:last-child{margin-bottom:0}

/* Constructor de rutinas: una tarjeta por ejercicio con sus campos. */
/* Publicar una rutina en el catálogo: los campos solo aparecen al marcarla. */
.en-cat{margin:0;padding:20px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.en-cat legend{padding:0 6px}
.en-cat-campos{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--s3)}
.en-cat-campos[hidden]{display:none}
.en-cat-campos .ap-nota{margin-bottom:0}
.en-b{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.en-b-ej{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:14px 16px}
.en-b-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;margin-bottom:12px}
.en-b-botones{display:flex;gap:4px}
.en-b-campos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.en-b-campos label{display:flex;flex-direction:column;gap:4px}
.en-b-campos label span{font-family:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--ink-muted)}
.en-b-campos input{min-height:44px;width:100%;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.en-b-campos input:focus-visible{border-color:var(--ink);outline-offset:2px}
.en-b-notas{grid-column:1 / -1}

/* Sesión en vivo: un bloque por ejercicio; cada serie es una fila con el
   tipo, los campos, la marca de completar y lo que se hizo la última vez. */
.en-bloque{padding:var(--s4) 0;border-top:1px solid var(--border)}
.en-bloque:first-child{border-top:0;padding-top:0}
.en-bloque-cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:center;margin-bottom:var(--s3)}
.en-nota-pauta{color:var(--ink-muted)}
.en-series{display:flex;flex-direction:column;gap:8px}
.en-serie{display:grid;grid-template-columns:44px minmax(0,1fr) 48px;grid-template-areas:"tipo campos ok" "ult ult ult";gap:4px 10px;align-items:center;padding:6px 0}
.en-serie.hecha .en-ok{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.en-serie.hecha input{background:var(--ok-soft);border-color:transparent}
/* Guardada en el móvil pero todavía sin salir: hecha para ti —la marca está
   en verde, el entreno sigue— pero se dice que falta enviarla, con el borde
   discontinuo. Mentir aquí sería peor que el fallo de red. */
.en-serie.en-cola .en-ok{background:transparent;border:1px dashed var(--ok);color:var(--ok)}
.en-cola-aviso{margin:0 0 var(--s3);border-style:dashed}
.en-cola-aviso p{color:var(--ink-soft)}
.en-tipo{grid-area:tipo;display:inline-flex;align-items:center;justify-content:center;width:44px;height:48px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.en-tipo.otro{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.en-campos{grid-area:campos;display:flex;align-items:center;gap:6px;min-width:0}
.en-campos label{flex:1;min-width:0}
.en-campos input{width:100%;min-height:48px;padding:0 8px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  font:inherit;font-size:18px;text-align:center;font-variant-numeric:tabular-nums}
.en-campos input:focus-visible{border-color:var(--ink);outline-offset:2px}
.en-campos input::placeholder{color:var(--ink-muted);opacity:1;font-size:15px}
.en-x{color:var(--ink-muted);flex:none}
.en-unidad{color:var(--ink-muted);font-size:.9rem;flex:none}
.en-rpe{flex:0 0 60px}
/* 16px o más: por debajo, Safari acerca la página al enfocar el campo. */
.en-rpe input{font-size:16px}
.en-ok{grid-area:ok;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:transparent;color:var(--ink-muted);cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.en-ok svg{width:22px;height:22px}
.en-ok:active{transform:scale(.94)}
.en-ult{grid-area:ult;font-size:.85rem;color:var(--ink-muted);padding-left:54px}
.en-bloque-pie{display:flex;gap:8px;margin-top:12px}
.en-centrado{text-align:center}

/* Entreno leído: las series como texto. */
.en-bloque.leido{padding:var(--s3) 0}
.en-series-leidas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.en-series-leidas li{display:flex;align-items:center;gap:12px;min-height:36px}
.en-series-leidas .en-tipo{width:36px;height:36px;font-size:.9rem;cursor:default}
.en-serie-tx{font-weight:500}
.en-resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0 auto var(--s4);max-width:420px}
/* La tira de la sesión en vivo se queda pegada bajo la barra superior:
   con el móvil en la mano y la lista larga, lo que llevas de entreno
   tiene que estar siempre a la vista. */
/* En la sesión en vivo el titular baja de tamaño y la cabecera se aprieta:
   lo que importa es la primera serie, no el nombre de la rutina. */
.en-cab{margin-bottom:var(--s3)}
.en-titulo{font-size:clamp(1.7rem,1.567rem + 0.5926vw,2.1rem);margin-bottom:0}
.en-pista{margin:calc(-1 * var(--s2)) 0 var(--s4)}
.en-pista[hidden]{display:none}
.en-vivo{position:sticky;top:var(--ap-top-h);z-index:calc(var(--z-nav) - 1);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);
  padding:10px 0 12px;margin:0 0 var(--s4);background:var(--bg);border-bottom:1px solid var(--border)}
.en-vivo>div{min-width:0}
.en-vivo-c{display:block;font-size:1.3rem;line-height:1.15;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-vivo-c small{font-family:'Barlow','Barlow Fallback',sans-serif;font-weight:400;font-size:.75rem;color:var(--ink-muted);margin-left:3px}
.en-vivo .ap-fila-d{margin-top:0}
.en-records{text-align:left;margin-top:var(--s2)}

/* Descanso: una barra fija encima de la navegación, con el reloj y ±15 s. */
.en-descanso{position:fixed;left:16px;right:16px;bottom:calc(var(--ap-nav-h) + 12px + env(safe-area-inset-bottom,0px));z-index:calc(var(--z-nav) + 1);
  display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:var(--s3);padding:10px 16px;
  border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.en-descanso[hidden]{display:none}
.en-descanso .ap-eb{margin:0}
.en-descanso-t{font-size:1.8rem;min-width:64px}
.en-descanso.fin .en-descanso-t{color:var(--ok)}
.en-descanso-b{display:flex;gap:6px;justify-content:flex-end}
.en-descanso-b .gs-btn{padding:0 10px;font-size:.85rem}
body.gs .en-descanso{bottom:16px}

/* Gráficas en SVG: línea con puntos y barras por semana. */
.en-grafica{display:block;width:100%;height:auto;margin:var(--s2) 0}
.en-grafica.corta{margin-top:0}
.en-grafica-vacia{padding:var(--s4) 0;color:var(--ink-muted);margin:0}
.en-g-eje{stroke:var(--border);stroke-width:1}
.en-g-et{fill:var(--ink-muted);font-family:'Barlow','Barlow Fallback',sans-serif;font-size:10px}
.en-g-linea{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.en-g-punto{fill:var(--surface);stroke:var(--ink);stroke-width:1.25}
.en-g-punto.ultimo{fill:var(--accent);stroke:var(--accent)}
.en-g-barra{fill:var(--border-strong)}
.en-g-barra.actual{fill:var(--accent)}
.en-selectores{display:flex;flex-direction:column;margin-top:var(--s3)}
.en-selectores .ap-tabs{margin-bottom:var(--s2)}

/* Créditos: la licencia, plegada. */
.en-licencia{margin-top:var(--s3)}
.en-licencia summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink-soft)}
.en-licencia pre{white-space:pre-wrap;font-size:.8rem;color:var(--ink-muted);padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);margin:8px 0 0}

@media(min-width:900px){
  .en-descanso{left:calc(220px + 40px);right:auto;width:min(560px,calc(100% - 300px));bottom:16px}
  body.gs .en-descanso{left:auto;right:24px;width:min(560px,60%)}
}
@media(max-width:600px){
  .en-filtros-fila{grid-template-columns:1fr}
  .en-b-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .en-record-cifras{grid-template-columns:1fr 1fr}
  .en-pick-filtros{grid-template-columns:1fr}
  .en-resumen{gap:var(--s2)}
}