.jsud-agenda, .jsud-disciplinas, .jsud-sedes, .jsud-countdown-box {
  /* Header/accent background: a deep red drawn from the same #FF1A54 the
     accent gradient already uses, instead of navy — matches RedBoing's own
     red identity while staying inside the official Juegos Suramericanos
     gradient palette (still used as-is for the thin top accent bar). */
  --jsud-navy: #4A0E23;
  --jsud-navy-light: #C80708;
  --jsud-gradient: linear-gradient(100deg, #4C34DD 0%, #FF1A54 55%, #FF6900 100%);
  --jsud-text: #0D1B2A;
  --jsud-muted: #5C7089;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--jsud-text);
  box-sizing: border-box;
  width: 100%;
  /*
  padding-left: 24px;
  padding-right: 24px;
  */
  /* Layout breakpoints below respond to this box's own rendered width
     (container queries), not the browser viewport — the widget has to
     adapt to whatever column/cell the WordPress page builder puts it in,
     which can be far narrower than the viewport even on a desktop screen. */
  container-type: inline-size;
  container-name: jsud-widget;
}

@container jsud-widget (max-width: 600px) {
  /* Main boxes (header, section-box) sit almost flush with the screen edge on
     mobile — just a hairline gap, much smaller than the old 12px gutter. */
  .jsud-agenda, .jsud-disciplinas, .jsud-sedes, .jsud-countdown-box {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.jsud-agenda *, .jsud-disciplinas *, .jsud-sedes *, .jsud-countdown-box * { box-sizing: border-box; }

/* Shared "boxed" header used at the top of every section (Agenda, Disciplinas, Sedes, Countdown) */
.jsud-header {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 16px 16px 0 0;
  color: #fff;
  /* Solid RedBoing red; the Juegos Suramericanos purple/pink wedge is a
     separate shape (::before) clipped to a log(x)-like curve — steep drop
     right at the left edge, then flattening out for the rest of the width —
     which a circular radial-gradient can't produce (constant curvature). */
  background: var(--jsud-navy-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 0;
}
/* When a section box directly follows the navy header, connect them into one seamless card */
.jsud-header + .jsud-section-box { border-radius: 0 0 16px 16px; margin-top: 0; }
/* Countdown's header has no section-box after it, so it needs its own bottom radius back */
.jsud-countdown-box .jsud-header { border-radius: 16px; margin-bottom: 16px; }
/* Selector qualified with `.jsud-header >` (not just `.jsud-countdown-logos`)
   so its specificity clearly beats the wedge's `.jsud-header > * { position:
   relative }` rule below — equal specificity would fall to source order and
   the later wedge rule would silently win, leaving this only "relative"
   (offset from its in-flow position) instead of truly unpinned from flow. */
.jsud-header > .jsud-countdown-logos {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
}
.jsud-countdown-logos img { display: block; height: 40px; width: auto; }
@container jsud-widget (min-width: 1300px) {
  /* This absolute-centered treatment needs real room: the cells row
     (~730px at full size) centered on the box will collide with the
     right-pinned logos (~220px) unless the box itself is wide enough —
     below this threshold, the box falls through to the (originally
     "mobile") stacked treatment instead, which can't overlap because
     everything stays in normal flex flow. Only a genuinely wide
     placement (e.g. a full-width section, not a narrow builder column)
     gets this version.
     Cells are centered on the box itself (not the leftover space next to
     the label), via absolute positioning at the header's own midpoint —
     a grid's middle column centers relative to the space between its
     neighbors, which isn't the same thing once the label has any width. */
  /* Taking .jsud-countdown out of flow (below) means it no longer
     contributes its own height to the header — without this min-height,
     the box collapses down to just the label's height instead of staying
     as tall as it was when the cells still determined the flex row's height. */
  .jsud-countdown-box .jsud-header { display: flex; align-items: center; min-height: 155px; }
  .jsud-countdown-box .jsud-header > .jsud-countdown {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* The base rule allows wrapping (needed for other contexts); an
       absolutely positioned element with only `left` set still shrinks to
       fit within the container's available width, so on a narrower desktop
       viewport the 4 wider cells could wrap to a second row and get clipped
       by the header's own overflow:hidden. Force one row, always. */
    flex-wrap: nowrap;
  }
  .jsud-countdown-logos { top: 50%; right: 24px; transform: translateY(-50%); }
  /* The Suramericanos mark (icon-only, no wordmark) should read as the
     bigger of the two and use more of the header's vertical room; the
     RedBoing wordmark stays compact. align-items:center on the flex row
     (base rule) centers them against each other once heights differ. */
  .jsud-countdown-logos .jsud-logo-suda { height: 90px; }
}
@container jsud-widget (max-width: 1299px) {
  /* Covers real mobile AND every "desktop-ish" container too narrow for
     the fancy centered treatment above (see its comment) — stacked
     label-above-cells layout. Logos stay a normal (non-absolute) flex
     item here, on purpose: the header's own align-items:center then
     vertically centers it against the label automatically, on whatever
     row height the label's own line box ends up with. A fixed top:Npx
     offset (pinning it near the header's top edge instead) can't track
     that and drifts out of alignment with the label whenever the row's
     height isn't exactly what the offset assumed. justify-content:
     space-between (also on the header, base rule) pushes it to the
     right; .jsud-countdown's own width:100% (below) always forces it
     to wrap to its own full-width row, so it never shares a row with
     the logos — but DOM order is label, cells, logos, so without the
     `order` below the cells' forced wrap would land it BETWEEN the
     label and the logos in visual flow, pushing the logos to a third
     row of their own instead of row 1 alongside the label. */
  .jsud-header > .jsud-countdown-logos { position: static; }
  .jsud-countdown-logos img { height: 28px; }
  .jsud-countdown-box .jsud-header > .jsud-countdown { order: 1; }
}
@container jsud-widget (max-width: 400px) {
  /* On the smallest phones, "FALTAN:" plus both logos at 28px no longer
     reliably fit on one row without touching. Shrinking the logos further
     and tightening the gaps around them (rather than wrapping to a new
     row) keeps them next to the label on the same line. */
  .jsud-countdown-box .jsud-header { gap: 6px; }
  .jsud-countdown-logos { gap: 6px; }
  .jsud-countdown-logos img { height: 14px; }
}
/* The elaborate wedge shape only renders on desktop — on a narrow mobile
   header (short and much narrower) the same curve reads as a messy,
   cramped smear rather than a clean accent, so mobile gets a plain
   diagonal gradient instead (see the max-width block below). */
@container jsud-widget (min-width: 601px) {
  /* The wedge: full height at the left edge, then the boundary shoots up
     steeply in the first ~15% of the width and flattens out for the rest —
     a log(x)-shaped curve, approximated with enough polygon points to read
     as smooth. clip-path uses %, so this scales with the header's own width. */
  .jsud-header::before {
    content: '';
    position: absolute;
    inset: 0;
    /* The wedge's own fill fades all the way to the base red before it
       reaches its clipped edge, so the clip-path boundary is invisible —
       without this, the fill stays pink right up to the cut, showing a hard
       seam against the red background instead of a blend. */
    background: linear-gradient(100deg, #4C34DD 0%, #FF1A54 22%, var(--jsud-navy-light) 70%, var(--jsud-navy-light) 100%);
    /* Many closely-spaced points (every 2.5% of width) instead of a handful —
       a polygon with few points reads as visibly faceted/segmented; this many
       points, this close together, reads as a smooth curve. */
    clip-path: polygon(
      0% 0%, 0% 100%,
      10% 100%, 12.5% 96.4%, 15% 87%, 17.5% 74.8%, 20% 62.5%,
      22.5% 51.6%, 25% 42.6%, 27.5% 35.2%, 30% 29.4%, 32.5% 24.8%,
      35% 21.1%, 37.5% 18.1%, 40% 15.6%, 42.5% 13.6%, 45% 12%,
      47.5% 10.6%, 50% 9.4%, 52.5% 8.4%, 55% 7.6%, 57.5% 6.9%,
      60% 6.2%, 62.5% 5.7%, 65% 5.2%, 67.5% 4.8%, 70% 4.4%,
      72.5% 4.1%, 75% 3.8%, 77.5% 3.5%, 80% 3.3%, 82.5% 3.1%,
      85% 2.9%, 87.5% 2.7%, 90% 2.5%, 92.5% 2.4%, 95% 2.3%,
      97.5% 2.1%, 100% 2%,
      100% 0%
    );
    pointer-events: none;
  }
  /* Keep the header's real content above the wedge regardless of paint order. */
  .jsud-header > * { position: relative; z-index: 1; }
}

@container jsud-widget (max-width: 600px) {
  /* Simple diagonal gradient, same top-left-to-red idea, no clip-path shape
     — the elaborate curve doesn't have room to read cleanly on a short,
     narrow mobile header. */
  .jsud-header {
    background: linear-gradient(120deg, #4C34DD 0%, #FF1A54 25%, var(--jsud-navy-light) 60%, var(--jsud-navy-light) 100%);
  }
}
.jsud-header-title h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.jsud-header-title p { margin: 0; font-size: 13px; color: #93A6BF; }

/* Generic light "section" box — used to visually separate the day-selector, the filters
   and the results into their own cards, instead of one continuous block */
.jsud-section-box {
  background: #fff; border: 1px solid #e2e6ec; border-radius: 16px; padding: 20px; margin-bottom: 16px;
}
.jsud-box-divider { border: none; border-top: 1px solid #eef1f5; margin: 16px 0; }
.jsud-source { font-size: 11px; color: var(--jsud-muted); margin: 0; }

/* Generic venue/place card — used by Sedes' own grid AND by the Disciplinas modal's "Dónde se compite" box */
.jsud-sede-card { border: 1px solid #e2e6ec; border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; transition: box-shadow .15s ease; }
.jsud-sede-card:hover, .jsud-sede-card:focus-visible { box-shadow: 0 4px 16px rgba(13,27,42,.1); outline: none; }
.jsud-sede-photo { width: 100%; aspect-ratio: 3 / 2; background: #eef1f5; overflow: hidden; }
.jsud-sede-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jsud-sede-body { padding: 12px; }
.jsud-sede-body h4 { margin: 0 0 4px; font-size: 14px; }

/* Shared component patterns reused across all three sections */
.jsud-chip {
  border: 1px solid #e2e6ec; background: #fff; border-radius: 10px; padding: 6px 12px;
  font-size: 12px; white-space: nowrap; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.jsud-chip.is-active { background: var(--jsud-navy); color: #fff; border-color: var(--jsud-navy); }
.jsud-chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.jsud-search { border: 1px solid #e2e6ec; border-radius: 999px; padding: 8px 14px; font-size: 13px; min-width: 220px; }
.jsud-empty { color: var(--jsud-muted); font-size: 13px; }
.jsud-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Reusable "can scroll this way" affordance for every horizontal scroll area
   (city chips, card carousels). Wrap the scrollable element in
   .jsud-hscroll-wrap with these two buttons as siblings; JS toggles [hidden]
   based on actual scroll position so an arrow disappears once there's
   nothing left in that direction. Desktop never shows these (no horizontal
   scrolling happens there). */
.jsud-hscroll-wrap { position: relative; }
.jsud-hscroll-arrow { display: none; }

@container jsud-widget (max-width: 600px) {
  .jsud-hscroll-arrow {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    box-shadow: none;
    color: #b7c0cc;
    z-index: 3;
    padding: 0;
    pointer-events: none;
  }
  .jsud-hscroll-arrow[hidden] { display: none !important; }
  .jsud-hscroll-arrow--left { left: 2px; }
  .jsud-hscroll-arrow--right { right: 2px; }
}
.jsud-card-location { margin: 0; font-size: 12px; color: var(--jsud-muted); display: flex; align-items: center; gap: 4px; }
.jsud-pin-icon { flex: 0 0 auto; }
.jsud-jornada-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.jsud-jornada-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.jsud-modal-backdrop { position: fixed; inset: 0; background: rgba(13,27,42,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.jsud-modal-backdrop[hidden] { display: none !important; }
.jsud-modal {
  background: #fff; border-radius: 16px; padding: 24px; max-width: 640px; width: 100%; position: relative; max-height: 85vh; overflow-y: auto;
  scrollbar-width: none;
}
.jsud-modal::-webkit-scrollbar { display: none; }
.jsud-modal-header-band {
  display: flex; gap: 16px; align-items: center;
  margin: -24px -24px 16px; padding: 24px;
  border-radius: 16px 16px 0 0;
  position: sticky;
  top: -24px;
  z-index: 2;
}
.jsud-modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; border: none; background: none; font-size: 22px; cursor: pointer; color: var(--jsud-muted); }
.jsud-modal h3 { margin: 0 0 4px; }
.jsud-modal h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--jsud-muted); margin: 16px 0 8px; }
.jsud-modal-days { display: flex; gap: 8px; flex-wrap: wrap; }
.jsud-modal-day { background: #f7f9fb; border-radius: 8px; padding: 6px 10px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.jsud-btn-maps {
  display: inline-flex; align-items: center; gap: 6px; background: var(--jsud-gradient); color: #fff; text-decoration: none; border: none;
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; cursor: pointer;
}
.jsud-btn-secondary {
  display: inline-flex; align-items: center; gap: 6px; background: #F0F2F6; color: var(--jsud-navy); text-decoration: none; border: none;
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; cursor: pointer;
}
.jsud-btn-secondary:hover { background: #E4E8EF; }
.jsud-error { color: #B00020; }
.jsud-disc-description { font-size: 13px; line-height: 1.5; color: var(--jsud-text); text-align: left; }
.jsud-disc-modal-actions, .jsud-sede-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.jsud-disc-modal-actions .jsud-btn-maps, .jsud-sede-modal-actions .jsud-btn-maps { border: none; }
/* Sedes has no header band to move "Cómo llegar" into (unlike the discipline
   modals), so it always keeps its own button here, bottom-right. */
.jsud-sede-modal-actions { justify-content: flex-end; }

/* On mobile, "Cómo llegar" moves into the header band (top-right) instead of
   sitting in the bottom actions row, and that bottom row becomes a fixed
   footer for whatever secondary buttons remain (Manual técnico, Ver en la
   agenda). Desktop is untouched: this button stays hidden there and the
   original bottom row keeps its own "Cómo llegar" copy. */
.jsud-header-maps-btn { display: none; flex: 0 0 auto; white-space: nowrap; }
/* The label text only shows in the bottom row's copy; the header copy is
   icon-only, sized as a small round button, to keep the header compact. */
.jsud-header-maps-btn .jsud-btn-maps-label { display: none; }

/* Fixed footer for the modal's action buttons — desktop and mobile alike. */
.jsud-modal .jsud-disc-modal-actions, .jsud-modal .jsud-sede-modal-actions {
  position: sticky;
  bottom: -24px;
  margin: 16px -24px -24px;
  padding: 20px 24px;
  background: #fff;
  border-top: 1px solid #eef1f5;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}

@container jsud-widget (max-width: 600px) {
  .jsud-header-maps-btn {
    display: inline-flex;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-right: 30px; /* clears the close button, which floats in the true corner */
  }
  .jsud-modal-header-text { flex: 1 1 auto; min-width: 0; }

  .jsud-disc-modal-actions .jsud-btn-maps:not(.jsud-header-maps-btn) { display: none; }
  /* If the maps link was the only button in the bottom row, hide the row
     entirely instead of leaving an empty sticky bar. */
  .jsud-disc-modal-actions:has(> .jsud-btn-maps:only-child) { display: none; }
}

/* Chunk wrapper used to group cards into swipeable pages on mobile carousels
   (Agenda's per-city groups always render these; Disciplinas/Sedes only add
   them inside their own mobile branch). On desktop it's invisible (children
   flow directly into the parent's own flex/grid); each component's mobile
   media query turns it into a real flex page. */
.jsud-hcarousel-page { display: contents; }

/* Blue "info" tag/badge — used for sport tags on Sedes cards and anywhere else a related-item chip is needed */
.jsud-tag-blue { font-size: 10px; font-weight: 600; background: #E9EFFC; color: #2C4A8C; padding: 3px 10px; border-radius: 999px; }

/* "Ver más / Ver menos" toggle used under a truncated grid */
.jsud-btn-toggle-more {
  display: block; margin: 16px auto 0; background: none; border: 1px solid #e2e6ec; color: var(--jsud-navy);
  padding: 8px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.jsud-btn-toggle-more:hover { background: #f7f9fb; }
/* The unconditional `display: block` above beats the browser's default
   `[hidden] { display: none }` rule (same specificity, but this one is an
   author style), so the JS's `toggleMoreEl.hidden = ...` was silently being
   ignored — the button showed regardless of state. */
.jsud-btn-toggle-more[hidden] { display: none !important; }

/* Standalone countdown box (its own shortcode, independent from the Agenda box).
   Sizes use clamp() so they scale fluidly with the viewport instead of
   jumping between one fixed desktop size and one fixed (smaller) mobile
   size — the base (mobile) end of each clamp is bigger than the old fixed
   mobile size. */
.jsud-countdown { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.jsud-countdown-label { font-size: clamp(16px, 4.5vw, 18px); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #fff; margin-right: 6px; }
.jsud-countdown-cell {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.08); border-radius: 12px; padding: 14px 22px; min-width: 90px;
}
@container jsud-widget (min-width: 1300px) {
  /* Matches the fancy centered-cells threshold above — stays in lockstep
     with the fixed-size treatment those absolute-positioned cells need. */
  .jsud-countdown-cell { padding: 17px 48px; min-width: 150px; }
  .jsud-countdown { gap: 22px; }
}
.jsud-countdown-num { font-size: clamp(30px, 9vw, 53px); font-weight: 800; line-height: 1; }
.jsud-countdown-unit { font-size: clamp(9px, 2.4vw, 13px); text-transform: uppercase; letter-spacing: .5px; color: #93A6BF; margin-top: 4px; }
.jsud-countdown-started { font-weight: 700; color: #FF6900; font-size: 20px; }

@container jsud-widget (max-width: 1299px) {
  /* All 4 cells always share one row: shrink to fit instead of wrapping. */
  .jsud-countdown { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .jsud-countdown-cell { min-width: 0; flex: 1 1 0; padding: 8px 4px; }
}

@container jsud-widget (max-width: 600px) {
  .jsud-search { min-width: 0; }
  .jsud-header { flex-direction: column; align-items: flex-start; }
  /* Countdown's header needs to stay a row here (label + logos share
     row 1, cells wrap to their own row below via width:100% instead) —
     the column stack above is for the title+button headers of the other
     3 shortcodes. Selector needs the extra .jsud-countdown-box class to
     outrank `.jsud-header` above regardless of source order. */
  .jsud-countdown-box .jsud-header { flex-direction: row; align-items: center; }
}