.home-boton {
  border: 1px solid var(--border); border-radius: 16px; padding: 24px 20px;
  margin-bottom: 14px; cursor: pointer; transition: all 0.3s var(--ease-sheet);
  text-align: center; background: var(--surface-2);
}
.home-boton:hover { transform: translateY(-4px); box-shadow: 0 10px 24px var(--black-sm); border-color: var(--border-mid); }
.home-boton.principal { border-color: var(--brand); background: var(--brand-lighter); }
.home-boton.principal:hover { background: var(--brand-warm-3); border-color: var(--brand-dk); transform: translateY(-4px); }
.home-boton .hb-icon { font-size: 2.2rem; margin-bottom: 10px; transition: transform 0.3s; }
.home-boton:hover .hb-icon { transform: scale(1.1); }
.home-boton .hb-titulo { font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.home-boton.principal .hb-titulo { color: var(--brand); }
.home-boton .hb-sub { font-size: 0.85rem; color: var(--neutral-gray); line-height: 1.4; }

.btn-accion-home {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; border: 1px solid var(--border-light); border-radius: 14px;
  background: var(--surface-light); cursor: pointer; font-family: inherit;
  font-size: 0.75rem; font-weight: 700; color: var(--neutral-dark);
  text-transform: uppercase; letter-spacing: 0.5px;
  transition: all 0.3s var(--ease-sheet);
}
.btn-accion-home:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--black-md); border-color: var(--brand); background: var(--brand-warm); }
.btn-accion-home:active { transform: translateY(0) scale(0.97); }

.btn-home-sub {
  flex: 1; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: all 0.3s ease; font-family: inherit; text-align: center;
}
.btn-home-sub:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-warm); }
.btn-home-sub:disabled { opacity: 0.32; cursor: not-allowed; }

.res-card-home {
  border: 1px solid var(--border); border-radius: 14px; padding: 6px 0px;
  margin-bottom: 10px; background: var(--surface-2); text-align: left;
  animation: smoothSlideUp 0.4s var(--ease-sheet) both;
}
.res-card-home.vigente       { border-color: var(--success-bdr); background: var(--success-bg); }
.res-card-home.vencimiento   { border-color: var(--warning-bdr); background: var(--warning-bg); }
.res-card-home.vencida       { border-color: var(--danger-bdr); background: var(--danger-bg); }
.res-card-home.futura        { border-color: var(--border); background: var(--surface-3); opacity: 0.7; }
.res-card-home.pendiente-mens{ border-color: var(--warning-bdr); background: var(--warning-bg); }
.res-card-home.confirmada-clase { border-color:var(--border-light); background:var(--surface-2); }
.res-card-home.pendiente-clase  { border-color:var(--border-light); background:var(--surface-2); }
.res-card-home.reagendar-clase  { border-color:var(--border-light); background:var(--surface-2); }
.res-card-equip { color: var(--neutral-mid); }

.home-top-mobile { display: none; }
.home-emoji-desktop { display: block; }
.home-mobile-actions { display: none; }
.hmr { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--gray-divider); }
.hmr-texto { text-align: left; }
.hmr-texto .hmr-titulo { font-size: 0.8rem; font-weight: 800; color: var(--brand); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 3px; }
.hmr-texto .hmr-sub { font-size: 0.77rem; color: var(--muted); }
.hmr-btn-round { width: 44px; height: 44px; flex-shrink: 0; background: var(--brand-light); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.hmr-btn-round .material-symbols-outlined { font-size: 1.2rem; color: var(--brand); }
.btn-logout-mobile { background: var(--brand-light); border: 0px solid var(--brand-glow); cursor: pointer; color: var(--brand); padding: 8px; border-radius: 10px; font-family: inherit; line-height: 1; }
.btn-logout-mobile .material-symbols-outlined { font-size: 1.5rem; vertical-align: middle; }
#btn-logout-desktop { display: block; }

@media (max-width: 600px) {
  .home-top-mobile { display: flex !important; position: relative; align-items: center; justify-content: center; padding: 10px 0 6px; margin-bottom: 4px; }
  .home-emoji-mobile { font-size: 2.8rem; animation: popBounce 0.6s var(--ease-sheet); }
  .home-emoji-desktop { display: none !important; }
  .home-top-acciones { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; }
  .btn-logout-mobile { position: static; }
  #btn-editar-desktop { display: none; }
  #btn-logout-desktop { display: none; }
  .home-mobile-actions { display: block !important; margin-top: 8px; border-top: 1px solid var(--gray-divider); }
}

@media (prefers-color-scheme: dark) {
  #btn-meses-pasados, #btn-meses-actuales { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--muted) !important; }
  #pwa-banner { border-color: var(--brand) !important; }
  #pwa-banner div { color: var(--muted); }
  #pwa-banner div[style*="font-weight:800"] { color: var(--text) !important; }
  #pwa-instrucciones { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
}

/* ── Profile row ─────────────────────────────────────── */
.home-profile-row { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.home-profile-name { flex:1; }
.home-saludo-small { font-size:0.72rem; color:var(--muted); font-weight:500; text-align:left; margin-top: 15px; }
.home-nombre { font-size:1.05rem; font-weight:800; margin:0; line-height:1.2; text-align:left; }
.home-icon-btns { display:flex; gap:6px; }
.home-icon-btn { width:38px; height:38px; border-radius:10px; background:var(--brand-light); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--brand); transition:background 0.15s; }
.home-icon-btn:hover { background:var(--brand-lightest); }
.home-icon-btn .material-symbols-outlined { font-size:18px; }
.home-subtitulo { margin-bottom:20px; font-weight:500; font-size:0.88rem; color:var(--muted); }

/* ── Cards rediseñadas ───────────────────────────────── */
.res-card-nueva { background:var(--surface-2); border:1.5px solid var(--border-light); border-radius:14px; margin-bottom:10px; overflow:hidden; }
.res-card-nueva .rn-header { padding:13px 14px 11px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.res-card-nueva .rn-top { width:100%; }
.res-card-nueva .rn-header .fi-pills { margin:0; }
.res-card-nueva .rn-equip-estado { width:100%; margin:0; }
/* justify-content:flex-start (ver "Cambios recientes" -- antes space-between,
   pill de ubicación pegado al extremo derecho de la fila en vez de agrupado
   junto al título). Con flex-start el pill queda inmediatamente después del
   texto, separado solo por el `gap` -- si no entran los 2 en una línea,
   `flex-wrap:wrap` lo manda entero a una 2da línea (ver nota de
   `.fi-pill-lugar` más abajo), nunca lo empuja artificialmente a la derecha. */
.res-card-nueva .rn-top { display:flex; align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; gap:6px 8px; margin-bottom:5px; }
.res-card-nueva .rn-date { font-size:0.9rem; font-weight:800; flex-shrink:0; white-space:nowrap; }
.res-card-nueva .rn-header .rn-top-extra { margin-top:4px; }
/* Pill de ubicación al lado del título (ver "Cambios recientes" -- antes en
   su propia fila de pills debajo). Probado con `text-overflow:ellipsis` +
   `min-width:0` primero (pill shrinkeable) -- descartado: un `.fi-pill`
   (ícono + texto en un solo `inline-flex`) no trunca limpio con elipsis, el
   texto quedaba directamente cortado sin "…" o el pill colapsaba al ícono
   solo, ilegible (verificado con Playwright, capturas a 320-428px). En vez
   de eso, ninguno de los 2 se encoge (`flex-shrink:0` en ambos): si no entran
   juntos en una línea, `flex-wrap:wrap` manda el pill completo a una 2da
   línea (nunca lo corta a la mitad) -- el título nunca se trunca. */
.res-card-nueva .rn-top .fi-pill-lugar { flex-shrink:0; }
/* Color cyan (ver "Cambios recientes" -- antes azul/--info por una
   instrucción previa, y antes de eso heredaba `.fi-pill-lugar` base de
   css/reservas.css, tinte de marca/naranja-rojizo). Unificado con la base
   compartida en la misma tanda: `.fi-pill-lugar`/`.fi-pill-maps`
   (css/reservas.css) pasan a este mismo `--cyan`/`--cyan-20`/`--cyan-border`
   (css/colors.css) -- mismas variables en los 2 lugares, "información de
   ubicación" queda con un solo color en toda la app. Override SCOPEADO
   igual que antes (no se eliminó ni se dejó de depender de la base) --
   `.fi-pill-lugar` sigue siendo una clase compartida (reservas.js/eventos.js,
   ver comentario de esa clase en css/eventos.css) y esta card sigue siendo
   un pill fusionado (lugar+link a Maps en uno solo), a diferencia de esas
   otras pantallas. A diferencia de `--info` (nunca tuvo override oscuro
   propio, necesitaba `--dk-info-text` aparte para el texto), `--cyan` SÍ
   tiene su propio valor en el bloque dark de colors.css -- sin necesidad de
   ningún override de color acá. */
.res-card-nueva .rn-top .fi-pill-lugar { background:var(--cyan-20); color:var(--cyan); border-color:var(--cyan-border); }
.badge-pendiente { font-size:0.71rem; font-weight:600; padding:4px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; background:var(--warning-bg); color:var(--amber-dark); white-space:nowrap; }
.badge-confirmada { font-size:0.71rem; font-weight:600; padding:4px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; background:var(--green-light); color:var(--green-dark); white-space:nowrap; }
.badge-reagendar { font-size:0.71rem; font-weight:600; padding:4px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; background:var(--purple-lightest); color:var(--dk-purple-mid); border:1px solid var(--purple-border-soft); white-space:nowrap; }
.badge-cancelada { font-size:0.71rem; font-weight:600; padding:4px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; background:var(--danger-bg); color:var(--danger); white-space:nowrap; }
.badge .material-symbols-outlined { font-size:13px; }
.res-card-nueva .rn-divider { height:1px; background:var(--border-light); }
/* Fila que agrupa "Más información" (izquierda) + botón "Re-agendar o
   cancelar reserva" (derecha), vertical-centrados entre sí (ver "Cambios
   recientes" -- antes el botón vivía en su propia fila, `.rn-cancel-wrap`,
   arriba de esta). `.rn-mas-info` deja de usar `justify-content:space-between`
   a lo ancho de toda la fila (ya no está solo ahí) y pasa a tamaño de
   contenido (`flex-shrink:0`) con su propio gap chico entre texto y chevron. */
.res-card-nueva .rn-footer-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:9px 14px; }
.res-card-nueva .rn-mas-info { display:flex; align-items:center; gap:4px; flex-shrink:0; white-space:nowrap; cursor:pointer; color:var(--muted); font-size:0.77rem; font-weight:600; user-select:none; transition:color 0.15s; }
.res-card-nueva .rn-mas-info:hover { color:var(--brand); }
.res-card-nueva .rn-mas-info .rn-chevron { font-size:16px; transition:transform 0.3s; }
.res-card-nueva .rn-mas-info.open .rn-chevron { transform:rotate(180deg); }
/* max-height animado -- el techo real lo fija `_toggleCardBody()` (js/home.js)
   con `scrollHeight` medido, no un valor fijo acá (ver esa función, mismo
   mecanismo que `_evAbrirPanel()`/`_evCerrarPanel()` en js/eventos.js).
   **Bug real corregido:** antes `.rn-body.open` fijaba un techo parejo de
   `600px` sin importar el contenido real (~100-150px). `--ease-sheet` es
   `cubic-bezier(0.16,1,0.3,1)`, una curva adelantada (sube muy rápido al
   principio, se aplana después) -- en la APERTURA (0→600) esa subida rápida
   ya superaba la altura real del contenido dentro de los primeros ~50ms de
   los 500ms totales, así que la tarjeta se veía "abrirse de golpe" (el resto
   de la animación seguía corriendo pero por encima del contenido, invisible
   tras el `overflow:hidden`). En el CIERRE (600→0) el mismo tramo relevante
   (altura real→0) caía en la cola lenta de la curva, por eso sí se veía
   suave. Con el techo real medido por JS, ambas direcciones recorren
   exactamente el rango visible del contenido -- misma curva, ahora simétrica
   en las 2 direcciones. */
.res-card-nueva .rn-body { max-height:0; overflow:hidden; transition:max-height 0.5s var(--ease-sheet); background:transparent; }
.res-card-nueva .rn-body-inner { padding:12px 14px 14px; font-size:0.77rem; color:var(--muted); line-height:1.65; }
.res-card-nueva .rn-body-inner .fi-pills { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.res-card-nueva .rn-body-inner .fi-pill { font-size:0.71rem; font-weight:600; padding:4px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; background:var(--surface-2); color:var(--muted); border:1px solid var(--border-light); }
.res-card-nueva .rn-body-inner .fi-pill-maps { color:var(--brand); border-color:var(--brand); background:var(--brand-lightest); }
.res-card-nueva .rn-cancel-wrap { text-align:center; padding: 8px 14px 8px; }
.btn-cancel-text { background:none; border:none; color:var(--danger); font-size:0.74rem; font-weight:600; cursor:pointer; font-family:inherit; text-decoration:underline; text-underline-offset:3px; }
.btn-cancel-text:hover { opacity:0.8; }
/* "Re-agendar o cancelar reserva" -- outline real (borde, sin relleno),
   mismo criterio que `.ev-ant-btn-restablecer` (css/eventos.css): `.btn-outline`
   (css/ui.css) pese al nombre es un fill tenue sin borde, no sirve acá, así
   que este modificador se scopea al único botón que lo necesita. `flex-shrink:0`
   + `white-space:nowrap` para que ni el botón ni "Más información" partan su
   texto en 2 líneas dentro de `.rn-footer-row`.
   Texto corto por media query (medido con Playwright/harness aislado, no a
   ojo): el texto completo ("Re-agendar o cancelar reserva") solo entra junto
   a "Más información" en una sola línea desde ~440px de ancho de contenido
   real -- por debajo de eso `.rn-btn-reagendar-full` se esconde y
   `.rn-btn-reagendar-corto` ("Re-agendar/cancelar") toma su lugar, en vez de
   reducir el tamaño de fuente. Breakpoint elegido en 480px (el `max-width`
   de `.contenedor`, ya usado en el resto de la app) en vez de un número
   mágico. **Aun el texto corto queda ~15px corto para entrar junto a "Más
   información" al ancho mínimo soportado por la app (360px, ver
   `@media (max-width:360px)` de `nav.css`)** -- "Más información" + ícono ya
   ocupan 122px fijos, sin margen para acortar más sin tocar esas palabras
   (fuera de alcance acá). Mismo caso límite que ya tiene `.ev-ant-btn-restablecer`
   (css/eventos.css): `flex-wrap:wrap` en `.rn-footer-row` es la red de
   seguridad -- a 360px el botón cae a su propia 2da línea (mismo look que el
   diseño anterior) en vez de desbordar recortado fuera de la tarjeta.
   Verificado con Playwright: sin overflow horizontal en 320/360/375/390/
   412/428px; una sola línea a partir de 375px con el texto corto, ambos
   elementos vertical-centrados entre sí. */
.rn-btn-reagendar { background:none; border:1.5px solid var(--danger); color:var(--danger); padding:6px 8px; border-radius:10px; font-size:0.74rem; font-weight:600; font-family:inherit; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.rn-btn-reagendar:hover { background:var(--danger-bg); }
.rn-btn-reagendar:active { transform:scale(0.97); }
.rn-btn-reagendar-corto { display:none; }
@media (max-width:479px) {
  .rn-btn-reagendar-full { display:none; }
  .rn-btn-reagendar-corto { display:inline; }
}

/* ── Pantalla gestionar ──────────────────────────────── */
.sg-toggle-row { display:flex; gap:8px; margin-bottom:16px; }
.sg-toggle-opt { flex:1; padding:9px; border-radius:10px; border:1.5px solid var(--border-light); background:var(--surface-2); color:var(--muted); font-size:0.77rem; font-weight:700; cursor:pointer; font-family:inherit; text-align:center; transition:all 0.15s; }
.sg-toggle-opt.active { border-color:var(--brand); color:var(--brand); background:var(--brand-lightest); }
.sg-seccion { transition: opacity 0.2s ease; }
.sg-fecha-item { background:var(--surface-2); border:1.5px solid var(--border-light); border-radius:12px; margin-bottom:8px; overflow:hidden; cursor:pointer; transition:border-color 0.15s; }
.sg-fecha-item:hover { border-color:var(--brand); }
.sg-fecha-item.sel { border-color:var(--brand); background:var(--brand-lightest); }
.sg-fecha-item .sfi-header { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; }
.sg-fecha-item .sfi-title { font-size:0.88rem; font-weight:700; margin-bottom:6px; }
.sg-fecha-item .sfi-circle { width:24px; height:24px; border-radius:50%; border:2px solid var(--border-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; }
.sg-fecha-item .sfi-circle .material-symbols-outlined { font-size:14px; color:transparent; }
.sg-fecha-item.sel .sfi-circle { background:var(--brand); border-color:var(--brand); }
.sg-fecha-item.sel .sfi-circle .material-symbols-outlined { color:var(--white); }
.sg-no-fechas { background:var(--surface-2); border:1.5px solid var(--border-light); border-radius:12px; padding:16px; text-align:center; font-size:0.8rem; color:var(--muted); line-height:1.6; }
.sg-no-fechas .material-symbols-outlined { font-size:2rem; display:block; margin-bottom:8px; color:var(--brand); }
.rn-equip-estado { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.rn-estado-txt { font-size:0.71rem; font-weight:600; display:inline-flex; align-items:center; gap:3px; }
/* ── Status row (ver "Cambios recientes" -- reemplaza la barra de fondo
   sólido a todo el ancho, `.rn-status-bar`/`.rn-status-*`, quitada de acá).
   Nuevo pill de ancho automático reusando el componente `.badge`/`.badge-*`
   (`css/home.css`, más arriba -- tinte+borde por estado, ya usado en
   admin.js/eventos.js) en vez de un sistema de color paralelo: se buscó
   explícitamente antes de escribir CSS nueva y esas 4 clases YA cubrían los
   4 estados reales de una reserva (pendiente/confirmada/cancelada/reagendar
   -- "Reagendar"/"Clase a favor" es un 4to estado real que el pedido
   original no mencionaba, confirmado leyendo el código antes de asumir que
   eran 3; se le aplicó el mismo tratamiento con su color morado ya
   existente, `.badge-reagendar`, para no dejar un estado con un estilo
   viejo mientras los otros 3 se actualizan). "¿Qué significa esto?" pasa de
   link destacado (subrayado, fondo de color) a texto tenue al lado del pill,
   en la misma fila -- ya no ocupa su propio ancho completo. */
.rn-status-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:8px 14px 5px; }
.rn-status-info { font-size:0.72rem; color:var(--muted); cursor:pointer; white-space:nowrap; }
.rn-status-info:hover { color:var(--brand); }


/* ── Empty state home ────────────────────────────────────
   .empty-state-topbar ("¿Dudas? Contáctanos") vive ahora como elemento
   persistente FUERA de #home-reservas-lista (index.html), nunca como
   wrapper de .empty-state-body — ver "Cambios recientes" (bug del
   loader/re-render genérico tapando el contacto durante el refresh de "Mis
   reservas"). Por eso .empty-state-body ya no depende de un padre flex
   (antes .empty-state-home) para su alto/centrado: trae su propio
   min-height y se centra sola. justify-content:flex-end (antes
   space-between, cuando también vivía acá el avatar clickeable a Ajustes —
   ver "Cambios recientes", nav inferior) mantiene a "Contáctanos" en el
   mismo lugar visual de siempre ahora que es el único hijo. */
.empty-state-topbar { display:flex; align-items:center; justify-content:flex-end; padding:4px 0 16px; }
.empty-state-contacto { display:flex; align-items:center; gap:5px; padding:7px 12px; background:var(--surface-2); border:1.5px solid var(--border-light); border-radius:20px; cursor:pointer; color:var(--muted); font-size:0.7rem; font-weight:700; font-family:inherit; transition:all 0.15s; }
.empty-state-contacto:hover { border-color:var(--brand); color:var(--brand); }
.empty-state-contacto .material-symbols-outlined { font-size:14px; }
.empty-state-body { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 12px 32px; }
/* Clickeable (ver "Cambios recientes" — rediseño del empty-state): dispara
   irNuevaReserva(), mismo handler que ya usa el botón "Hacer una reserva" del
   footer — el ícono deja de ser puramente decorativo. position:relative para
   anclar .empty-state-icon-badge (el "+" circular, ver esa regla abajo). */
.empty-state-icon { width:96px; height:96px; border-radius:28px; background:var(--surface-2); border:1.5px solid var(--border-light); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; position:relative; cursor:pointer; transition:background 0.15s, border-color 0.15s; }
.empty-state-icon:hover { background:var(--brand-20); border-color:var(--brand); }
.empty-state-icon .material-symbols-outlined { font-size:3rem; color:var(--brand); }
/* Badge "+" tipo FAB, superpuesto sobre el borde inferior del recuadro (mitad
   adentro/mitad afuera, patrón estándar de badge) — puramente visual, el
   área clickeable sigue siendo todo .empty-state-icon (pointer-events:none
   para que el click siempre resuelva sobre el padre). border:3px solid
   var(--bg) simula el "corte"/halo típico de un FAB superpuesto sobre otro
   fondo, tanto contra --surface-2 (mitad de arriba) como contra --bg (mitad
   de abajo, fuera del recuadro). */
.empty-state-icon-badge { position:absolute; left:50%; bottom:0; transform:translate(-50%, 50%); width:28px; height:28px; border-radius:50%; background:var(--brand); border:3px solid var(--bg); color:var(--white); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.empty-state-icon-badge .material-symbols-outlined { font-size:16px; color:var(--white); font-weight:700; }
.empty-state-saludo { font-size:1rem; font-weight:800; color:var(--text); margin-bottom:6px; }
.empty-state-msg { font-size:0.82rem; color:var(--muted); line-height:1.65; margin-bottom:28px; }
/* "Ver historial de reservas"/"Editar mi perfil" pasaron de links de texto
   subrayado a pills (.aj-pill.aj-pill-link, css/perfil.css) — más visibles sin
   perder sutileza, reusando el sistema de pills ya existente en vez de un
   componente nuevo. Fila en vez de columna (antes .empty-state-link, ver
   changelog) para que se vean como el resto de las filas de pills de la app. */
.empty-state-links { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }

.historial-pill { flex-shrink:0; padding:8px 16px; border-radius:99px; border:none; background:var(--brand-20); color:var(--muted); font-size:0.82rem; font-weight:700; cursor:pointer; transition:all 0.2s; white-space:nowrap; font-family:inherit; }
.historial-pill.activa { background:var(--brand); border-color:var(--brand); color:var(--white); }