/* ctxd · Sistema visual «Perfect Day» de ctxplorer (A2, 2-oct-2026)
   Fichero NUEVO (p. ej. static/chunks/ctxd-v1.css), enlazado en el layout raíz DESPUÉS de c-ux-v1.css, h-movil-v1.css y ctxf-v2.css.
   - Prefijo propio: clases .ctxd-*, variables --ctxd-*. No pisa ninguna clase de Tailwind ni de c-ux/ctxf.
   - Modo oscuro igual que el sitio: clase en <html> (:root.dark, ver commit 3af3bdf). Los tokens base se apoyan en los del sitio
     (--bg, --fg, --card, --surface, --border, --text-*), así que siguen el modo oscuro solos; aquí solo se redefinen los propios.
   - Contrastes medidos (WCAG 2.2 AA): rojo de acción #dc2f3e con texto blanco 4,65:1; rojo en TEXTO #bf2533 5,95:1 (claro) y
     #ff6b75 6,4-7,2:1 (oscuro, sobre #09090b/#111113/#18181b); gris secundario #63636c 5,95:1; verde #15803d 5,02:1 / #4ade80 10,8:1.
   - Fuente: Libre Franklin autoalojada (ya declarada en c-ux-v1.css). Pesos 400/600/700/800; nunca 900.
   - Sin píldoras (radio máx. 16 px salvo puntos/avatares), sin degradados en texto, sin cristal/blur, sin mayúsculas espaciadas,
     sin emojis como iconos (iconos = SVG inline con currentColor), sin monospace, sin fondo crema. */

/* ============ 1. Tokens ============ */
:root{
  /* superficie y tinta (heredan del sitio) */
  --ctxd-bg:var(--bg,#fff);
  --ctxd-fg:var(--fg,#18181b);
  --ctxd-card:var(--card,#fff);
  --ctxd-surface:var(--surface,#f5f5f6);
  --ctxd-surface-2:var(--surface-2,#ececee);
  --ctxd-border:var(--border,#e4e4e7);
  --ctxd-border-strong:var(--input-border,#d4d4d8);
  --ctxd-text-2:var(--text-secondary,#4f4f58);
  --ctxd-text-3:var(--text-tertiary,#63636c);

  /* marca: UN rojo de relleno y UN rojo de texto (hoy conviven #e63946, #dc2f3e y #bf2533) */
  --ctxd-accent:#dc2f3e;          /* relleno de la acción principal = «Agregar a mi día» */
  --ctxd-accent-hover:#bf2533;
  --ctxd-on-accent:#fff;
  --ctxd-accent-text:#bf2533;     /* enlaces/acento en texto */
  --ctxd-accent-tint:#dc2f3e14;   /* fondo de seleccionado */
  --ctxd-accent-line:#dc2f3e59;

  /* estados (siempre con icono o texto, nunca solo color) */
  --ctxd-ok:#15803d;  --ctxd-ok-tint:#15803d14;
  --ctxd-warn:#b45309; --ctxd-warn-tint:#b4530914;
  --ctxd-info:#1d4ed8;

  /* foco */
  --ctxd-focus:#bf2533;
  --ctxd-focus-ring:0 0 0 2px var(--ctxd-bg),0 0 0 4px var(--ctxd-focus);

  /* tipografía: 8 tamaños (hoy hay 22 distintos, de 9 a 72 px) */
  --ctxd-font:var(--font-inter,"Libre Franklin","LF Fallback",system-ui,sans-serif);
  --ctxd-fs-12:.75rem;   /* meta mínima (nunca menos de 12 px) */
  --ctxd-fs-13:.8125rem; /* meta de tarjeta */
  --ctxd-fs-14:.875rem;  /* cuerpo compacto, botones */
  --ctxd-fs-16:1rem;     /* cuerpo */
  --ctxd-fs-18:1.125rem; /* título de tarjeta grande */
  --ctxd-fs-22:1.375rem; /* H3 / título de sección en móvil */
  --ctxd-fs-28:1.75rem;  /* H2 / H1 en móvil */
  --ctxd-fs-36:clamp(1.75rem,1.2rem + 2.2vw,2.25rem); /* H1 */
  --ctxd-lh-tight:1.2; --ctxd-lh:1.45;
  --ctxd-fw-r:400; --ctxd-fw-m:600; --ctxd-fw-b:700; --ctxd-fw-x:800;

  /* espaciado (base 4) */
  --ctxd-s1:4px; --ctxd-s2:8px; --ctxd-s3:12px; --ctxd-s4:16px; --ctxd-s5:20px; --ctxd-s6:24px; --ctxd-s8:32px; --ctxd-s10:40px; --ctxd-s14:56px;

  /* radios: 3 valores (hoy 9: 6/8/10/12/14/16/18/24/9999) */
  --ctxd-r-ctl:8px;    /* botones, chips, inputs */
  --ctxd-r-card:12px;  /* tarjetas, avisos */
  --ctxd-r-sheet:16px; /* hoja inferior / drawer (solo esquinas superiores en móvil) */

  /* elevación: 3 niveles (hoy 8 sombras distintas, 3 de ellas con resplandor rojo) */
  --ctxd-e0:none;                                         /* tarjeta: borde, sin sombra */
  --ctxd-e1:0 1px 0 var(--ctxd-border),0 -6px 16px -10px #18181b33; /* barra fija */
  --ctxd-e2:0 12px 32px #18181b2e;                        /* drawer, hoja, aviso flotante */
  --ctxd-scrim:#09090b80;

  /* táctil y layout */
  --ctxd-hit:44px;
  --ctxd-nav-h:72px;   /* barra inferior del sitio (Inicio/Explorar/Perfect Day/Amigos/Perfil) en <1024 px; verificar en el build */
  --ctxd-safe-b:env(safe-area-inset-bottom,0px);
  --ctxd-dur:160ms; --ctxd-ease:cubic-bezier(.2,.7,.2,1);
  --ctxd-z-bar:45; --ctxd-z-drawer:60; /* .ctxf = 40; por encima del filtro, por debajo de cookies si las hubiera */
}
:root.dark{
  --ctxd-accent:#dc2f3e;          /* blanco sobre #dc2f3e = 4,65:1 también en oscuro */
  --ctxd-accent-hover:#e8495a;
  --ctxd-accent-text:#ff6b75;     /* #e63946 sobre #18181b da 4,25:1 (falla); #ff6b75 da 6,4:1 */
  --ctxd-accent-tint:#ff6b751f;
  --ctxd-accent-line:#ff6b7566;
  --ctxd-ok:#4ade80;  --ctxd-ok-tint:#4ade801f;
  --ctxd-warn:#fbbf24; --ctxd-warn-tint:#fbbf241f;
  --ctxd-info:#93c5fd;
  --ctxd-focus:#ff6b75;
  --ctxd-e1:0 1px 0 var(--ctxd-border),0 -8px 20px -10px #000c;
  --ctxd-e2:0 16px 40px #000000b3;
  --ctxd-scrim:#000000a6;
}
@media (min-width:1024px){:root{--ctxd-nav-h:0px}}

/* ============ 2. Base común ============ */
[class^="ctxd-"],[class*=" ctxd-"]{box-sizing:border-box}
.ctxd-root,.ctxd-bar,.ctxd-drawer,.ctxd-tl,.ctxd-card,.ctxd-combo,.ctxd-vote,.ctxd-toast{font-family:var(--ctxd-font);color:var(--ctxd-fg);-webkit-tap-highlight-color:transparent}
.ctxd-ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ctxd-ico--sm{width:16px;height:16px}
.ctxd-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where([class^="ctxd-"],[class*=" ctxd-"]):focus-visible{outline:none;box-shadow:var(--ctxd-focus-ring);border-radius:var(--ctxd-r-ctl)}
:where([class^="ctxd-"],[class*=" ctxd-"]) [hidden]{display:none!important}

/* Botones genéricos */
.ctxd-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ctxd-s2);min-height:var(--ctxd-hit);padding:0 var(--ctxd-s4);border-radius:var(--ctxd-r-ctl);border:1px solid var(--ctxd-border-strong);background:var(--ctxd-card);color:var(--ctxd-fg);font:var(--ctxd-fw-b) var(--ctxd-fs-14)/1 var(--ctxd-font);text-decoration:none;cursor:pointer;transition:background-color var(--ctxd-dur) var(--ctxd-ease),border-color var(--ctxd-dur) var(--ctxd-ease)}
.ctxd-btn:hover{background:var(--ctxd-surface)}
.ctxd-btn--pri{background:var(--ctxd-accent);border-color:var(--ctxd-accent);color:var(--ctxd-on-accent)}
.ctxd-btn--pri:hover{background:var(--ctxd-accent-hover);border-color:var(--ctxd-accent-hover)}
.ctxd-btn--ghost{border-color:transparent;background:transparent;color:var(--ctxd-text-2)}
.ctxd-btn--block{width:100%}
.ctxd-btn[disabled],.ctxd-btn[aria-disabled="true"]{opacity:1;background:var(--ctxd-surface-2);border-color:var(--ctxd-surface-2);color:var(--ctxd-text-3);cursor:not-allowed}

/* Chips de filtro / refinado («Más relajado», «Más económico»…): radio 8, nunca píldora */
.ctxd-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--ctxd-s3);border-radius:var(--ctxd-r-ctl);border:1px solid var(--ctxd-border);background:var(--ctxd-card);color:var(--ctxd-fg);font:var(--ctxd-fw-m) var(--ctxd-fs-14)/1 var(--ctxd-font);cursor:pointer;position:relative}
.ctxd-chip::after{content:"";position:absolute;inset:-2px 0}/* zona de toque 44 px */
.ctxd-chip[aria-pressed="true"]{border-color:var(--ctxd-accent);background:var(--ctxd-accent-tint);color:var(--ctxd-fg)}
.ctxd-chips{display:flex;flex-wrap:wrap;gap:var(--ctxd-s2)}

/* ============ 3. AddToDayButton ============
   <button class="ctxd-add" type="button" aria-pressed="false" data-ctxd-id="ev:123">
     <svg class="ctxd-ico" aria-hidden="true">…plus…</svg><span class="ctxd-add__t">Agregar a mi día</span></button>
   Estados: aria-pressed="true" → «En tu día» (con check); aria-busy="true" → cargando; data-state="conflict" → solapa.
   El texto cambia (no solo el color) y el resultado se anuncia en .ctxd-toast (aria-live). */
.ctxd-add{display:inline-flex;align-items:center;justify-content:center;gap:var(--ctxd-s2);min-height:var(--ctxd-hit);padding:0 var(--ctxd-s4);border-radius:var(--ctxd-r-ctl);border:1px solid var(--ctxd-accent);background:var(--ctxd-accent);color:var(--ctxd-on-accent);font:var(--ctxd-fw-b) var(--ctxd-fs-14)/1 var(--ctxd-font);cursor:pointer;white-space:nowrap;transition:background-color var(--ctxd-dur) var(--ctxd-ease),color var(--ctxd-dur) var(--ctxd-ease),border-color var(--ctxd-dur) var(--ctxd-ease)}
.ctxd-add:hover{background:var(--ctxd-accent-hover);border-color:var(--ctxd-accent-hover)}
.ctxd-add[aria-pressed="true"]{background:var(--ctxd-ok-tint);border-color:var(--ctxd-ok);color:var(--ctxd-fg)}
.ctxd-add[aria-pressed="true"] .ctxd-ico{color:var(--ctxd-ok)}
.ctxd-add[aria-busy="true"]{cursor:progress;opacity:.75}
.ctxd-add[data-state="conflict"]{background:var(--ctxd-warn-tint);border-color:var(--ctxd-warn);color:var(--ctxd-fg)}
.ctxd-add--sec{background:var(--ctxd-card);color:var(--ctxd-fg);border-color:var(--ctxd-border-strong)}/* cuando la ficha ya tiene un primario */
.ctxd-add--sec:hover{background:var(--ctxd-surface);border-color:var(--ctxd-fg)}
.ctxd-add--icon{width:var(--ctxd-hit);padding:0}/* solo icono: exige aria-label="Agregar «X» a mi día" */
.ctxd-add--block{width:100%}

/* ============ 4. MiDía: barra fija + drawer ============
   Barra: <div class="ctxd-bar" role="region" aria-label="Mi día"> visible solo con ≥1 actividad.
   Va encima de la barra inferior del sitio (no la tapa) y debajo del drawer. En escritorio, abajo a la derecha. */
.ctxd-bar{position:fixed;left:0;right:0;bottom:calc(var(--ctxd-nav-h) + var(--ctxd-safe-b));z-index:var(--ctxd-z-bar);display:flex;align-items:center;gap:var(--ctxd-s3);min-height:60px;padding:var(--ctxd-s2) var(--ctxd-s4);background:var(--ctxd-card);border-top:1px solid var(--ctxd-border);box-shadow:var(--ctxd-e1)}
.ctxd-bar__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ctxd-bar__t{font:var(--ctxd-fw-b) var(--ctxd-fs-14)/1.2 var(--ctxd-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxd-bar__s{font:var(--ctxd-fw-r) var(--ctxd-fs-12)/1.2 var(--ctxd-font);color:var(--ctxd-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxd-bar__n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;background:var(--ctxd-fg);color:var(--ctxd-bg);font:var(--ctxd-fw-x) var(--ctxd-fs-12)/1 var(--ctxd-font)}
@media (min-width:1024px){.ctxd-bar{left:auto;right:var(--ctxd-s6);bottom:var(--ctxd-s6);width:380px;border:1px solid var(--ctxd-border);border-radius:var(--ctxd-r-card);box-shadow:var(--ctxd-e2)}}
/* deja sitio al final del contenido para que la barra no tape el pie */
body.ctxd-has-bar main{padding-bottom:calc(60px + var(--ctxd-s4))}
/* la barra fija de compra de la ficha (G) y la del asistente de Perfect Day no deben apilarse con esta: se oculta la de MiDía */
body.ctxd-has-sticky .ctxd-bar{display:none}

/* Drawer: mismo patrón que .ctxf-hoja (role=dialog, aria-modal, aria-labelledby, foco al abrir, Escape cierra, foco vuelve al botón) */
.ctxd-scrim{position:fixed;inset:0;z-index:calc(var(--ctxd-z-drawer) - 1);background:var(--ctxd-scrim)}
.ctxd-drawer{position:fixed;left:0;right:0;bottom:0;z-index:var(--ctxd-z-drawer);display:flex;flex-direction:column;max-height:88dvh;background:var(--ctxd-bg);border-radius:var(--ctxd-r-sheet) var(--ctxd-r-sheet) 0 0;box-shadow:var(--ctxd-e2);padding-bottom:var(--ctxd-safe-b);overscroll-behavior:contain;transform:translateY(0);transition:transform 220ms var(--ctxd-ease)}
.ctxd-drawer[data-open="false"]{transform:translateY(100%)}
.ctxd-drawer__cab{display:flex;align-items:center;gap:var(--ctxd-s3);padding:var(--ctxd-s3) var(--ctxd-s4);border-bottom:1px solid var(--ctxd-border)}
.ctxd-drawer__cab h2{flex:1;margin:0;font:var(--ctxd-fw-x) var(--ctxd-fs-18)/1.2 var(--ctxd-font)}
.ctxd-drawer__asa{position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--ctxd-border-strong)}
.ctxd-drawer__cuerpo{flex:1 1 auto;overflow-y:auto;padding:var(--ctxd-s4)}
.ctxd-drawer__pie{display:flex;gap:var(--ctxd-s2);padding:var(--ctxd-s3) var(--ctxd-s4);border-top:1px solid var(--ctxd-border);background:var(--ctxd-bg)}
.ctxd-drawer__pie>*{flex:1}
@media (min-width:1024px){.ctxd-drawer{left:auto;top:0;width:440px;max-height:none;border-radius:0;transform:translateX(0)}.ctxd-drawer[data-open="false"]{transform:translateX(100%)}.ctxd-drawer__asa{display:none}}

/* ============ 5. Timeline + RouteSegment ============
   <ol class="ctxd-tl" aria-label="Tu Perfect Day del sábado 4 de octubre">
     <li class="ctxd-tl__stop"><time class="ctxd-tl__h" datetime="11:00">11:00</time><div class="ctxd-tl__body">…ActivityCard compacta…</div></li>
     <li class="ctxd-seg" aria-label="8 minutos a pie, 650 metros"><svg class="ctxd-ico ctxd-ico--sm" aria-hidden="true">…walk…</svg><span>8 min a pie · 650 m</span></li>
     …</ol>
   El RouteSegment es texto real (no emoji): icono SVG por modo (a pie / taxi / metro / bus) + «8 min a pie · 650 m». */
.ctxd-tl{list-style:none;margin:0;padding:0;--ctxd-tl-col:52px;--ctxd-tl-gap:var(--ctxd-s6)}
.ctxd-tl__stop{position:relative;display:grid;grid-template-columns:var(--ctxd-tl-col) 1fr;gap:var(--ctxd-tl-gap);align-items:start}
.ctxd-tl__h{padding-top:var(--ctxd-s3);font:var(--ctxd-fw-x) var(--ctxd-fs-14)/1 var(--ctxd-font);font-variant-numeric:tabular-nums;color:var(--ctxd-fg);text-align:right}
.ctxd-tl__fin{display:block;margin-top:4px;font-weight:var(--ctxd-fw-r);font-size:var(--ctxd-fs-12);color:var(--ctxd-text-3)}
.ctxd-tl__body{position:relative;min-width:0}
.ctxd-tl__body::before{content:"";position:absolute;left:calc(var(--ctxd-tl-gap) / -2 - 5px);top:calc(var(--ctxd-s3) + 2px);width:10px;height:10px;border-radius:50%;background:var(--ctxd-bg);border:2px solid var(--ctxd-fg)}
.ctxd-tl__stop[data-fijo="true"] .ctxd-tl__body::before{background:var(--ctxd-accent);border-color:var(--ctxd-accent)}/* evento con hora fija */
.ctxd-tl__acc{display:flex;flex-wrap:wrap;gap:var(--ctxd-s2);margin-top:var(--ctxd-s2)}/* Cambiar · Quitar · Mover */
.ctxd-seg{display:grid;grid-template-columns:var(--ctxd-tl-col) 1fr;gap:var(--ctxd-tl-gap);align-items:center;min-height:40px;color:var(--ctxd-text-2);font:var(--ctxd-fw-m) var(--ctxd-fs-13)/1.2 var(--ctxd-font)}
.ctxd-seg>.ctxd-ico{justify-self:end;color:var(--ctxd-text-3)}
.ctxd-seg>span{position:relative;padding-left:var(--ctxd-s3)}
.ctxd-seg>span::before{content:"";position:absolute;left:calc(var(--ctxd-tl-gap) / -2 - 1px);top:-14px;bottom:-14px;border-left:2px dashed var(--ctxd-border-strong)}
.ctxd-seg--libre{color:var(--ctxd-text-3)}/* «1 h 30 libre · ¿Te sugerimos algo cerca?» */
.ctxd-seg--libre button{margin-left:var(--ctxd-s2)}
.ctxd-seg--warn{color:var(--ctxd-warn)}/* «Llegas 10 min tarde» / traslado > 40 min: con texto, no solo color */
.ctxd-seg--warn>span::before{border-left-color:var(--ctxd-warn)}
/* arrastrar para reordenar: asa visible + alternativa con botones Subir/Bajar (WCAG 2.5.7) */
.ctxd-tl__asa{display:inline-grid;place-items:center;width:var(--ctxd-hit);height:var(--ctxd-hit);border:0;background:transparent;color:var(--ctxd-text-3);cursor:grab;touch-action:none}
.ctxd-tl__stop[aria-grabbed="true"],.ctxd-tl__stop.ctxd-arrastrando{opacity:.9}
.ctxd-tl__stop.ctxd-arrastrando .ctxd-card{box-shadow:var(--ctxd-e2);border-color:var(--ctxd-fg)}
@media (min-width:768px){.ctxd-tl{--ctxd-tl-col:64px;--ctxd-tl-gap:var(--ctxd-s8)}}

/* ============ 6. ActivityCard accionable ============
   <article class="ctxd-card" aria-labelledby="t-123">
     <a class="ctxd-card__media" href="/venues/museo-soumaya" tabindex="-1" aria-hidden="true"><img alt="" …></a>
     <div class="ctxd-card__body">
       <p class="ctxd-card__cat">Museo</p>
       <h3 class="ctxd-card__t" id="t-123"><a href="/venues/museo-soumaya">Museo Soumaya</a></h3>
       <ul class="ctxd-meta" aria-label="Datos"><li>1 h 30</li><li>a 8 min a pie</li><li>Gratis</li></ul>
       <p class="ctxd-card__why">Está a 8 min de tu concierto y abre hasta las 18:30.</p>
       <div class="ctxd-card__acc"><button class="ctxd-add">…Agregar a mi día…</button><a class="ctxd-btn ctxd-btn--ghost" href="…">Ver detalles</a></div>
     </div></article>
   Nada encima de la foto (regla de C). Un solo enlace al detalle por tarjeta (el título); la imagen no duplica el tabulado.
   Datos solo si existen en la BD: si no hay duración o precio, ese <li> no se pinta (nada de «—» ni inventados). */
.ctxd-card{display:flex;flex-direction:column;min-width:0;background:var(--ctxd-card);border:1px solid var(--ctxd-border);border-radius:var(--ctxd-r-card);overflow:hidden;box-shadow:var(--ctxd-e0);transition:border-color var(--ctxd-dur) var(--ctxd-ease)}
.ctxd-card:hover{border-color:var(--ctxd-border-strong)}
.ctxd-card__media{display:block;aspect-ratio:4/3;background:var(--ctxd-surface)}
.ctxd-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ctxd-card__body{display:flex;flex-direction:column;gap:6px;padding:var(--ctxd-s3) var(--ctxd-s3) var(--ctxd-s3)}
.ctxd-card__cat{margin:0;font:var(--ctxd-fw-m) var(--ctxd-fs-12)/1.2 var(--ctxd-font);color:var(--ctxd-text-3)}
.ctxd-card__t{margin:0;font:var(--ctxd-fw-b) var(--ctxd-fs-16)/1.25 var(--ctxd-font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctxd-card__t a{color:inherit;text-decoration:none}
.ctxd-card__t a:hover{text-decoration:underline;text-underline-offset:2px}
.ctxd-meta{display:flex;flex-wrap:wrap;gap:2px 0;margin:0;padding:0;list-style:none;font:var(--ctxd-fw-r) var(--ctxd-fs-13)/1.35 var(--ctxd-font);color:var(--ctxd-text-2)}
.ctxd-meta li{white-space:nowrap}
.ctxd-meta li+li::before{content:"·";margin:0 6px;color:var(--ctxd-text-3)}
.ctxd-meta li:first-child{font-weight:var(--ctxd-fw-b);color:var(--ctxd-fg)}
.ctxd-meta .ctxd-gratis{color:var(--ctxd-ok);font-weight:var(--ctxd-fw-b)}/* reemplaza el verde #2a9d8f (3,32:1) */
.ctxd-card__why{margin:0;font:var(--ctxd-fw-r) var(--ctxd-fs-13)/1.4 var(--ctxd-font);color:var(--ctxd-text-2)}
.ctxd-card__acc{display:flex;align-items:center;gap:var(--ctxd-s2);margin-top:auto;padding-top:var(--ctxd-s2)}
.ctxd-card__acc .ctxd-add{flex:1 1 auto}
/* variante horizontal (listas en móvil, timeline, drawer): miniatura 1:1 a la izquierda */
.ctxd-card--h{flex-direction:row}
.ctxd-card--h .ctxd-card__media{flex:0 0 96px;aspect-ratio:1/1}
.ctxd-card--h .ctxd-card__body{padding:var(--ctxd-s2) var(--ctxd-s3)}
.ctxd-card--h .ctxd-card__acc{padding-top:4px}
@media (min-width:768px){.ctxd-card--h .ctxd-card__media{flex-basis:128px}}

/* ============ 7. «Combina con…» (antes / después) ============
   <section class="ctxd-combo" aria-labelledby="cb-t">
     <div class="ctxd-combo__cab"><h2 id="cb-t">Completa tu día</h2>
       <div class="ctxd-seg-ctl" role="tablist" aria-label="Momento"><button role="tab" aria-selected="true" aria-controls="cb-antes">Antes</button><button role="tab" aria-selected="false" aria-controls="cb-desp">Después</button></div></div>
     <div class="ctxd-combo__fila" role="tabpanel" id="cb-antes">…ActivityCard--h × n…</div></section>
   Cada tarjeta lleva la razón en .ctxd-card__why («a 5 min a pie, abre hasta las 23:00»). Lista con scroll horizontal en móvil
   y rejilla en escritorio; flechas como las de C (fuera de las tarjetas, aria-label). */
.ctxd-combo{margin:var(--ctxd-s8) 0}
.ctxd-combo__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ctxd-s3);margin-bottom:var(--ctxd-s3)}
.ctxd-combo__cab h2{margin:0;font:var(--ctxd-fw-x) var(--ctxd-fs-22)/1.2 var(--ctxd-font);letter-spacing:-.012em}
.ctxd-combo__sub{width:100%;margin:-4px 0 0;font:var(--ctxd-fw-r) var(--ctxd-fs-14)/1.4 var(--ctxd-font);color:var(--ctxd-text-2)}
.ctxd-combo__fila{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,86%);gap:var(--ctxd-s3);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--ctxd-s4);margin:0 calc(var(--ctxd-s4) * -1);padding:2px var(--ctxd-s4) var(--ctxd-s2)}
.ctxd-combo__fila>*{scroll-snap-align:start}
@media (min-width:1024px){.ctxd-combo__fila{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0}}
/* control segmentado (Antes / Después; Hoy / Mañana / Finde; ritmo) */
.ctxd-seg-ctl{display:inline-flex;padding:3px;gap:3px;border-radius:calc(var(--ctxd-r-ctl) + 3px);background:var(--ctxd-surface)}
.ctxd-seg-ctl>button{min-height:38px;padding:0 var(--ctxd-s3);border:0;border-radius:var(--ctxd-r-ctl);background:transparent;color:var(--ctxd-text-2);font:var(--ctxd-fw-m) var(--ctxd-fs-14)/1 var(--ctxd-font);cursor:pointer}
.ctxd-seg-ctl>button[aria-selected="true"],.ctxd-seg-ctl>button[aria-pressed="true"]{background:var(--ctxd-card);color:var(--ctxd-fg);box-shadow:0 0 0 1px var(--ctxd-border)}

/* ============ 8. VoteCard (planes de grupo) ============
   <article class="ctxd-vote" aria-labelledby="v-t"><h3 id="v-t">¿Qué hacemos el sábado?</h3>
     <ul class="ctxd-vote__ops"><li><button class="ctxd-vote__op" aria-pressed="true" aria-describedby="v-1-n">
       <span class="ctxd-vote__lbl">Concierto</span><span class="ctxd-vote__n" id="v-1-n">5 votos</span>
       <span class="ctxd-vote__barra" style="--p:50%" aria-hidden="true"></span></button></li>…</ul>
     <p class="ctxd-vote__pie">8 de 10 votaron · cierra hoy 20:00</p></article>
   El recuento es texto (no solo la barra); el voto propio se marca con check + aria-pressed. */
.ctxd-vote{padding:var(--ctxd-s4);background:var(--ctxd-card);border:1px solid var(--ctxd-border);border-radius:var(--ctxd-r-card)}
.ctxd-vote h3{margin:0 0 var(--ctxd-s3);font:var(--ctxd-fw-x) var(--ctxd-fs-18)/1.25 var(--ctxd-font)}
.ctxd-vote__ops{display:flex;flex-direction:column;gap:var(--ctxd-s2);margin:0;padding:0;list-style:none}
.ctxd-vote__op{position:relative;display:flex;align-items:center;gap:var(--ctxd-s3);width:100%;min-height:var(--ctxd-hit);padding:var(--ctxd-s2) var(--ctxd-s3);border:1px solid var(--ctxd-border);border-radius:var(--ctxd-r-ctl);background:var(--ctxd-card);color:var(--ctxd-fg);text-align:left;font:var(--ctxd-fw-m) var(--ctxd-fs-14)/1.2 var(--ctxd-font);cursor:pointer;overflow:hidden;isolation:isolate}
.ctxd-vote__barra{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--ctxd-surface-2);z-index:-1;transition:width 300ms var(--ctxd-ease)}
.ctxd-vote__lbl{flex:1;min-width:0}
.ctxd-vote__n{font-weight:var(--ctxd-fw-b);font-variant-numeric:tabular-nums;color:var(--ctxd-text-2)}
.ctxd-vote__op[aria-pressed="true"]{border-color:var(--ctxd-accent)}
.ctxd-vote__op[aria-pressed="true"] .ctxd-vote__barra{background:var(--ctxd-accent-tint)}
.ctxd-vote__op[aria-pressed="true"] .ctxd-vote__lbl::after{content:" · tu voto";font-weight:var(--ctxd-fw-r);color:var(--ctxd-text-3)}
.ctxd-vote__op[data-gana="true"] .ctxd-vote__n{color:var(--ctxd-fg)}
.ctxd-vote__pie{margin:var(--ctxd-s3) 0 0;font:var(--ctxd-fw-r) var(--ctxd-fs-13)/1.3 var(--ctxd-font);color:var(--ctxd-text-3)}
.ctxd-avatares{display:flex}
.ctxd-avatares>*{width:28px;height:28px;border-radius:50%;border:2px solid var(--ctxd-card);margin-left:-8px;background:var(--ctxd-surface-2);font:var(--ctxd-fw-b) var(--ctxd-fs-12)/24px var(--ctxd-font);text-align:center}
.ctxd-avatares>*:first-child{margin-left:0}

/* ============ 9. Avisos: toast de «agregado», conflicto, vacío ============
   <div class="ctxd-toast" role="status" aria-live="polite">Agregado de 16:00 a 18:00. Tienes 2 h libres antes. <button class="ctxd-btn ctxd-btn--ghost">Ver sugerencias</button></div> */
.ctxd-toast{position:fixed;left:var(--ctxd-s4);right:var(--ctxd-s4);bottom:calc(var(--ctxd-nav-h) + 60px + var(--ctxd-s3) + var(--ctxd-safe-b));z-index:calc(var(--ctxd-z-drawer) + 1);display:flex;align-items:center;gap:var(--ctxd-s3);padding:var(--ctxd-s3) var(--ctxd-s4);border-radius:var(--ctxd-r-card);background:var(--ctxd-fg);color:var(--ctxd-bg);box-shadow:var(--ctxd-e2);font:var(--ctxd-fw-m) var(--ctxd-fs-14)/1.35 var(--ctxd-font)}
.ctxd-toast .ctxd-btn--ghost{color:inherit;text-decoration:underline;text-underline-offset:2px;padding:0 var(--ctxd-s2);flex:0 0 auto}
@media (min-width:1024px){.ctxd-toast{left:auto;right:var(--ctxd-s6);bottom:calc(var(--ctxd-s6) + 76px);width:380px}}
.ctxd-note{display:flex;gap:var(--ctxd-s2);padding:var(--ctxd-s3);border-radius:var(--ctxd-r-ctl);border:1px solid var(--ctxd-border);background:var(--ctxd-surface);font:var(--ctxd-fw-r) var(--ctxd-fs-14)/1.4 var(--ctxd-font);color:var(--ctxd-fg)}
.ctxd-note--warn{border-color:var(--ctxd-warn);background:var(--ctxd-warn-tint)}
.ctxd-note--warn .ctxd-ico{color:var(--ctxd-warn)}
.ctxd-vacio{padding:var(--ctxd-s8) var(--ctxd-s4);text-align:center;border:1px dashed var(--ctxd-border-strong);border-radius:var(--ctxd-r-card);color:var(--ctxd-text-2);font:var(--ctxd-fw-r) var(--ctxd-fs-14)/1.45 var(--ctxd-font)}
.ctxd-vacio strong{display:block;margin-bottom:var(--ctxd-s1);color:var(--ctxd-fg);font-size:var(--ctxd-fs-16)}
/* skeleton sin brillo animado (estático; respeta reduced motion por diseño) */
.ctxd-skel{background:var(--ctxd-surface-2);border-radius:var(--ctxd-r-ctl);color:transparent!important}

/* ============ 10. Táctil y movimiento ============ */
@media (pointer:coarse){.ctxd-chip{min-height:var(--ctxd-hit)}.ctxd-seg-ctl>button{min-height:var(--ctxd-hit)}}
@media (prefers-reduced-motion:reduce){
  .ctxd-bar,.ctxd-drawer,.ctxd-add,.ctxd-card,.ctxd-vote__barra,.ctxd-toast,.ctxd-chip,.ctxd-btn{transition:none!important;animation:none!important}
  .ctxd-combo__fila{scroll-behavior:auto}
}
@media (forced-colors:active){
  .ctxd-add,.ctxd-btn,.ctxd-chip,.ctxd-vote__op,.ctxd-card{border:1px solid CanvasText}
  .ctxd-add[aria-pressed="true"],.ctxd-chip[aria-pressed="true"],.ctxd-vote__op[aria-pressed="true"]{outline:2px solid Highlight}
}

/* =====================================================================================================
   L1 · capa «Mi día» (ctxd-v1.js): barra, cajón, timeline, botones en tarjetas/fichas, puente de agendas.
   Todo con prefijo ctxd. Lo único que toca clases del sitio va bajo html.ctxd-on (solo si el JS arrancó).
   ===================================================================================================== */
:root{--ctxd-z-drawer:70}
.ctxd-bar[hidden],.ctxd-drawer[hidden],.ctxd-scrim[hidden],.ctxd-toast[hidden]{display:none!important}
html.ctxd-lock,html.ctxd-lock body{overflow:hidden}
/* la barra se coloca encima de la barra inferior, la de boletos y el aviso de cookies (JS mide y fija --ctxd-bajo) */
.ctxd-bar{bottom:max(var(--ctxd-bajo,0px),var(--ctxd-safe-b))}
@media (min-width:1024px){.ctxd-bar{bottom:max(var(--ctxd-bajo,24px),24px)}}
.ctxd-toast{bottom:calc(var(--ctxd-bajo-t,76px) + var(--ctxd-safe-b))}
@media (min-width:1024px){.ctxd-toast{bottom:calc(var(--ctxd-bajo-t,100px) + 16px)}}
.ctxd-bar .ctxd-btn--pri{flex:0 0 auto}
.ctxd-bar__t{font-size:var(--ctxd-fs-16)}
.ctxd-pulso{animation:ctxd-pulso .34s var(--ctxd-ease)}
@keyframes ctxd-pulso{40%{transform:translateY(-3px)}}
.ctxd-root :focus-visible,.ctxd-ficha :focus-visible,.ctxd-puente :focus-visible,.ctxd-cadd:focus-visible,[data-ctxd-acc] .ctxd-add:focus-visible{outline:none;box-shadow:var(--ctxd-focus-ring)}
.ctxd-drawer h2:focus{outline:none}

/* botón en tarjetas (dentro del <a>, arriba a la izquierda de la imagen; el ♡ sigue arriba a la derecha) */
a[data-ctxd="1"]{position:relative}
.ctxd-cadd{position:absolute;top:8px;left:8px;z-index:11;display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px 0 8px;border:0;border-radius:var(--ctxd-r-ctl);background:var(--ctxd-accent);color:var(--ctxd-on-accent);font:var(--ctxd-fw-b) var(--ctxd-fs-13)/1 var(--ctxd-font);cursor:pointer;box-shadow:0 2px 8px #0000004d;-webkit-tap-highlight-color:transparent}
.ctxd-cadd::after{content:"";position:absolute;inset:-2px}
.ctxd-cadd .ctxd-ico{width:16px;height:16px;stroke-width:2.2}
.ctxd-cadd:hover{background:var(--ctxd-accent-hover)}
.ctxd-cadd[aria-pressed="true"]{background:#15803d}
.ctxd-cadd[aria-busy="true"],.ctxd-add[aria-busy="true"]{cursor:progress;opacity:.8}
.rxc .ctxd-cadd{top:10px;left:10px}
/* el icono-calendario heredado «Agregar a mi Perfect Day» de las tarjetas: lo sustituye «+ Mi día» (no se duplica la acción) */
html.ctxd-on a[data-ctxd="1"] button[title="Agregar a mi Perfect Day"]{display:none}

/* fichas: CTA principal «Agregar a mi día»; la compra queda como secundaria (sin borrarla) */
.ctxd-ficha{max-width:80rem;margin:0 auto var(--ctxd-s6);padding:0 var(--ctxd-s4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ctxd-s2) var(--ctxd-s3);font-family:var(--ctxd-font)}
.ctxd-ficha .ctxd-add{min-height:48px;padding:0 var(--ctxd-s5);font-size:var(--ctxd-fs-16)}
.ctxd-ficha .ctxd-btn{min-height:48px}
.ctxd-ficha__n{flex-basis:100%;margin:0;font:var(--ctxd-fw-r) var(--ctxd-fs-13)/1.4 var(--ctxd-font);color:var(--ctxd-text-2)}
@media (min-width:640px){.ctxd-ficha__n{flex-basis:auto;flex:1}}
@media (min-width:640px){.ctxd-ficha{padding:0 var(--ctxd-s8)}}
#g-precio .ctxd-add--block{min-height:48px;margin-bottom:var(--ctxd-s3);font-size:var(--ctxd-fs-16)}
html.ctxd-on [data-ctxd-legacy]{display:none!important}
html.ctxd-on [data-ctxd-sec]{background:transparent!important;color:var(--ctxd-fg)!important;border:1px solid var(--ctxd-border-strong)!important}
[data-ctxd-acc]>.ctxd-add{margin:0 var(--ctxd-s2) var(--ctxd-s2) 0}
html.ctxd-on [data-ctxd-acc] .rxf-b2{display:none}
html.ctxd-on [data-ctxd-acc] .rxf-b1{background:transparent!important;color:var(--ctxd-fg)!important;border:1px solid var(--ctxd-border-strong)!important}

/* puente en agendas y hubs (inyectado en cliente: no toca title/H1/intro del HTML) */
.ctxd-puente{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ctxd-s3) var(--ctxd-s6);margin:var(--ctxd-s2) 0;padding:var(--ctxd-s5);border:1px solid var(--ctxd-border);border-radius:var(--ctxd-r-card);background:var(--ctxd-surface);color:var(--ctxd-fg);font-family:var(--ctxd-font)}
.ctxd-puente h2{margin:0 0 var(--ctxd-s1);font:var(--ctxd-fw-x) var(--ctxd-fs-18)/1.25 var(--ctxd-font);color:var(--ctxd-fg)}
.ctxd-puente p{margin:0;max-width:60ch;font:var(--ctxd-fw-r) var(--ctxd-fs-14)/1.45 var(--ctxd-font);color:var(--ctxd-text-2)}
.ctxd-puente__b{display:flex;flex-wrap:wrap;gap:var(--ctxd-s2)}

/* cajón */
.ctxd-x,.ctxd-btn--ico{width:var(--ctxd-hit);padding:0}
.ctxd-dr-fecha{display:flex;gap:var(--ctxd-s3);margin-bottom:var(--ctxd-s4)}
.ctxd-dr-fecha label{flex:1;display:flex;flex-direction:column;gap:4px;font:var(--ctxd-fw-m) var(--ctxd-fs-13)/1.2 var(--ctxd-font);color:var(--ctxd-text-2)}
.ctxd-drawer input[type=date],.ctxd-drawer input[type=time],.ctxd-drawer input[readonly]{min-height:var(--ctxd-hit);padding:0 10px;border:1px solid var(--ctxd-border-strong);border-radius:var(--ctxd-r-ctl);background:var(--ctxd-card);color:var(--ctxd-fg);font:500 var(--ctxd-fs-16)/1 var(--ctxd-font);min-width:0}
:root.dark .ctxd-drawer input{color-scheme:dark}
.ctxd-hora input{width:118px}
.ctxd-tl__stop{margin:var(--ctxd-s1) 0}
.ctxd-stop .ctxd-card__body{padding:10px var(--ctxd-s3)}
.ctxd-stop .ctxd-card__t{font-size:var(--ctxd-fs-16)}
.ctxd-stop__w{display:flex;gap:6px;align-items:center;margin:4px 0 0;color:var(--ctxd-warn);font:var(--ctxd-fw-m) var(--ctxd-fs-13)/1.3 var(--ctxd-font)}
.ctxd-stop__w .ctxd-ico{width:16px;height:16px}
.ctxd-stop__n{margin:4px 0 0;font:var(--ctxd-fw-r) var(--ctxd-fs-12)/1.3 var(--ctxd-font);color:var(--ctxd-text-3)}
.ctxd-tl.ctxd-ordenando .ctxd-seg{display:none}
.ctxd-seg>.ctxd-ico{width:18px;height:18px}
.ctxd-ideas{margin-top:var(--ctxd-s3)}
.ctxd-ideas h3,.ctxd-share h3{margin:var(--ctxd-s4) 0 var(--ctxd-s2);font:var(--ctxd-fw-x) var(--ctxd-fs-16)/1.25 var(--ctxd-font)}
.ctxd-ideas__h{margin:0 0 var(--ctxd-s2);font:var(--ctxd-fw-b) var(--ctxd-fs-14)/1.2 var(--ctxd-font)}
.ctxd-ideas__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ctxd-s2)}
.ctxd-ideas__l li{display:flex;align-items:center;justify-content:space-between;gap:var(--ctxd-s3);padding:var(--ctxd-s2) var(--ctxd-s3);border:1px solid var(--ctxd-border);border-radius:var(--ctxd-r-ctl);background:var(--ctxd-card)}
.ctxd-ideas__t{display:flex;flex-direction:column;gap:2px;min-width:0;font:var(--ctxd-fw-b) var(--ctxd-fs-14)/1.3 var(--ctxd-font)}
.ctxd-ideas__t a{color:inherit}
.ctxd-ideas__t small{font-weight:var(--ctxd-fw-r);font-size:var(--ctxd-fs-12);color:var(--ctxd-text-2)}
.ctxd-osm{margin:var(--ctxd-s2) 0 0;font:var(--ctxd-fw-r) var(--ctxd-fs-12)/1.3 var(--ctxd-font);color:var(--ctxd-text-3)}
.ctxd-share{margin-top:var(--ctxd-s4);padding-top:var(--ctxd-s3);border-top:1px solid var(--ctxd-border)}
.ctxd-share p{margin:0 0 var(--ctxd-s2);font:var(--ctxd-fw-r) var(--ctxd-fs-14)/1.4 var(--ctxd-font);color:var(--ctxd-text-2)}
.ctxd-share input{width:100%;margin-bottom:var(--ctxd-s2);font-size:var(--ctxd-fs-13)!important}
.ctxd-share__b{display:flex;flex-wrap:wrap;gap:var(--ctxd-s2)}
.ctxd-vacio .ctxd-btn{margin-top:var(--ctxd-s4)}
.ctxd-drawer__pie .ctxd-btn{text-decoration:none}

/* bloque SSR «Planifica tu día / Combina con…» (L2 lo pinta con estas clases; botones data-ctxd-add los atiende ctxd-v1.js) */
.ctxd-plan{max-width:72rem;margin:0 auto;padding:var(--ctxd-s6) var(--ctxd-s4) var(--ctxd-s8);font-family:var(--ctxd-font);color:var(--ctxd-fg)}
.ctxd-plan h2{font:var(--ctxd-fw-x) var(--ctxd-fs-22)/1.2 var(--ctxd-font);margin:0 0 4px}.ctxd-plan>p{margin:0 0 14px;color:var(--ctxd-text-2)}
.ctxd-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ctxd-plan li{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--ctxd-border);border-radius:var(--ctxd-r-card);background:var(--ctxd-card)}
.ctxd-plan li a{font-weight:var(--ctxd-fw-b);color:inherit}.ctxd-plan li span{font-size:var(--ctxd-fs-14);color:var(--ctxd-text-2)}
.ctxd-plan li button{align-self:flex-start;min-height:var(--ctxd-hit);margin-top:4px;padding:0 12px;border-radius:var(--ctxd-r-ctl);border:1px solid var(--ctxd-accent);background:none;color:var(--ctxd-accent-text);font-weight:var(--ctxd-fw-m);cursor:pointer}
.ctxd-plan h3{font-size:var(--ctxd-fs-18);margin:18px 0 8px}
.ctxd-plan .ctxd-cta{display:inline-flex;align-items:center;min-height:var(--ctxd-hit);margin-top:14px;font-weight:var(--ctxd-fw-b);color:var(--ctxd-accent-text)}
@media (prefers-reduced-motion:reduce){.ctxd-pulso{animation:none}.ctxd-cadd,.ctxd-puente{transition:none}}
.ctxd-grupo:empty{display:none}.ctxd-grupo{margin-top:var(--ctxd-s4)}

/*INT-cookies-pd*/@media (max-width:767px){html:has(.cpd-bar) div.fixed[class*="bottom-[calc(4rem"]{bottom:calc(4rem + env(safe-area-inset-bottom,0px) + 5.25rem)!important}}@media (min-width:768px){html:has(.cpd-bar) div.fixed[class*="bottom-[calc(4rem"]{bottom:calc(5.25rem + env(safe-area-inset-bottom,0px))!important}}
/*INT-sec*/html.ctxd-on body a[data-ctxd-sec][data-ctxd-sec][data-ctxd-sec][data-ctxd-sec][data-ctxd-sec][data-ctxd-sec][data-ctxd-sec][data-ctxd-sec][data-ctxd-sec][data-ctxd-sec]{background:transparent!important;color:var(--ctxd-fg)!important;border:1px solid var(--ctxd-border-strong)!important;box-shadow:none!important}