/* /comite/ · Comité creativo: «ruleta» vertical tipo Reels/TikTok. Mobile-first. Tokens de /tools/theme.css.
   Móvil: una publicación a pantalla completa (alto del viewport menos el header) con scroll-snap vertical.
   Escritorio (≥761 px): columna 9:16 centrada + carril de botones + fila horizontal de miniaturas. */
:root { --cm-head: 58px; }   /* comite.js lo ajusta al alto real del header fijo */

/* ---- cabecera (banner con el arte de Terry) ---- */
.cm-hero {
  position: relative; overflow: hidden; border-radius: var(--r); margin: 0 0 1.2rem;
  border: 1px solid var(--c-line-2); box-shadow: var(--shadow);
  min-height: 300px; display: flex; align-items: flex-end; background: #05070a; isolation: isolate;
}
.cm-hero::after { content: ""; position: absolute; left: 14px; top: -1px; width: 28px; height: 3px; background: var(--c-red); border-radius: 0 0 2px 2px; }
.cm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 0%; z-index: -2; }
.cm-hero::before {   /* sombreado + retícula HUD */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, rgba(13,17,23,.15) 0%, rgba(13,17,23,.6) 45%, rgba(13,17,23,.96) 100%);
}
.cm-hero__txt { padding: 1rem 1.1rem 1rem; }
.cm-hero__kicker { margin: 0 0 .5rem; font: 600 .7rem/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-red-txt); }
.cm-hero h1 {
  margin: 0 0 .5rem; font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 800; line-height: 1.02;
  text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 3px 18px rgba(0,0,0,.8);
}
.cm-hero h1 em { font-style: normal; color: var(--c-red-txt); }
.cm-hero p { margin: 0 0 .35rem; color: #cfd8e3; max-width: 52ch; }
.cm-hero__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text); font-weight: 600; text-decoration-color: var(--c-red); }
.cm-hero__links a:hover { color: var(--c-red-txt); }
.cm-ai {
  display: inline-block; padding: .05rem .4rem; border-radius: 3px; font: 600 .64rem/1.4 var(--f-mono); letter-spacing: .08em;
  background: rgba(13,17,23,.85); color: var(--c-muted); border: 1px solid var(--c-line-2);
}
.cm-ai--hero { position: absolute; top: .6rem; right: .6rem; font-weight: 500; }

/* ---- ruleta ---- */
.cm-stage { position: relative; margin-inline: calc(50% - 50vw); }   /* móvil: a sangre, de borde a borde */
.cm-reel {
  position: relative; height: calc(100svh - var(--cm-head)); overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scroll-margin-top: var(--cm-head); scroll-snap-align: start;
  background: #05070a; scrollbar-width: none; outline: none;
}
.cm-reel::-webkit-scrollbar { display: none; }
.cm-reel:focus-visible { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px rgba(209,52,56,.7); }
@media (prefers-reduced-motion: no-preference) { .cm-reel { scroll-behavior: smooth; } }

.cm-slide {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  scroll-snap-align: start; scroll-snap-stop: always; background: #05070a;
}
.cm-media { position: absolute; inset: 0; overflow: hidden; }
.cm-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(22px) brightness(.45) saturate(1.2); z-index: 0; }
.cm-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; z-index: 1; }
.cm-slide--youtube .cm-poster { object-fit: cover; }   /* hqdefault de un Short: 4:3 con bandas; «cover» deja el cuadro 9:16 */
.cm-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: #000; }
.cm-media--ext { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #1b2331, #05070a 70%); }
.cm-ext__logo { position: relative; z-index: 1; color: var(--c-text); }

.cm-zoombtn { position: absolute; inset: 0; z-index: 1; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; color: inherit; }
.cm-zoombtn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 6px rgba(209,52,56,.6); }
.cm-zoom { position: absolute; right: .6rem; top: .6rem; z-index: 2; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: var(--r-sm); background: rgba(13,17,23,.75); border: 1px solid var(--c-line-2); color: #fff; }

.cm-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: var(--c-red); border: 0; box-shadow: 0 0 0 6px rgba(209,52,56,.25), 0 8px 24px rgba(0,0,0,.6);
  transition: opacity .2s ease; pointer-events: none;
}
.cm-play::after { content: ""; position: absolute; left: 25px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.cm-slide.is-live .cm-play, .cm-slide.is-playing .cm-play { opacity: 0; }
.cm-media[data-kind="video"] video { cursor: pointer; }
.cm-sound { position: absolute; right: .6rem; top: .6rem; z-index: 4; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--c-line-2); background: rgba(13,17,23,.8); cursor: pointer; }
.cm-sound:focus-visible, .cm-nav:focus-visible, .cm-thumb:focus-visible, .cm-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(209,52,56,.55); }

/* capa de texto estilo Reels (no bloquea los clics al vídeo) */
.cm-over {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
  padding: 3.5rem 4.4rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem;
  background: linear-gradient(180deg, transparent, rgba(13,17,23,.72) 45%, rgba(13,17,23,.94));
  transition: opacity .2s ease;
}
/* con el embed vivo (YouTube/TikTok/Instagram ya ponen su título y controles) el texto se aparta */
.cm-slide.is-live:not(.cm-slide--video) .cm-over { display: none; }
.cm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.cm-num { font: 600 .72rem/1 var(--f-mono); letter-spacing: .1em; color: var(--c-red-txt); }
.cm-tag { font: 600 .62rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; padding: .25rem .45rem; border-radius: 3px; background: var(--c-red); color: #fff; }
/* colores de marca de cada red: solo identifican el origen (el nombre va escrito) */
.cm-tag--youtube { background: var(--c-red); color: #fff; }
.cm-tag--tiktok { background: #0b0f14; color: #fff; box-shadow: inset 2px 0 0 #25f4ee, inset -2px 0 0 #fe2c55; }
.cm-tag--instagram { background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af); color: #fff; }
.cm-tag--video { background: var(--c-card-2); color: var(--c-text); border: 1px solid var(--c-line-2); }
.cm-title {
  margin: 0; font-size: clamp(1.2rem, 5.5vw, 1.55rem); font-weight: 800; line-height: 1.08;
  text-transform: uppercase; letter-spacing: -.005em; text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.cm-cap { margin: 0; font-size: .9rem; line-height: 1.35; color: #cfd8e3; max-width: 46ch; }
.cm-open { pointer-events: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; font-weight: 700; color: var(--c-red-txt); }

/* carril prev/siguiente: en móvil flota a la derecha de la publicación */
.cm-rail { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cm-rail[hidden] { display: none; }
.cm-nav {
  width: 46px; height: 46px; border-radius: var(--r-sm); cursor: pointer; line-height: 1;
  color: #fff; background: rgba(13,17,23,.8); border: 1px solid var(--c-line-2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cm-nav:hover { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.cm-nav:disabled { opacity: .35; cursor: default; background: rgba(13,17,23,.8); border-color: var(--c-line-2); }
.cm-count { margin: 0; font: 600 .72rem/1 var(--f-mono); color: var(--c-muted); text-shadow: 0 1px 4px #000; text-align: center; font-variant-numeric: tabular-nums; }
.cm-count b { display: block; font-size: 1.05rem; color: var(--c-text); }

.cm-help { margin: .7rem 0 0; font-size: .84rem; color: var(--c-muted); }
.cm-help kbd { font: 700 .75rem var(--f-mono); padding: .05rem .35rem; border: 1px solid var(--c-line-2); border-radius: 3px; background: var(--c-bg-2); color: var(--c-text); }
.cm-skip { white-space: nowrap; }
.cm-note { margin: 1.2rem 0 0; font-size: .82rem; color: var(--c-muted); max-width: 80ch; }

/* fila horizontal de miniaturas (solo escritorio) */
.cm-strip { margin: 1.2rem 0 0; }
.cm-strip[hidden] { display: none; }
.cm-strip ul {
  position: relative; list-style: none; margin: 0; padding: .4rem .3rem .7rem; display: flex; gap: .9rem; overflow-x: auto;
  scroll-snap-type: x mandatory; justify-content: safe center; scrollbar-color: var(--c-line-2) transparent;
}
.cm-strip li { scroll-snap-align: center; flex: none; }
.cm-thumb {
  position: relative; display: flex; flex-direction: column; width: 128px; padding: 0; border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  background: var(--c-card); color: var(--c-text); font: inherit; text-align: left;
  border: 1px solid var(--c-line); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cm-thumb img, .cm-thumb .cm-ext__logo { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: grid; place-items: center; background: #05070a; }
.cm-thumb__t { display: flex; flex-direction: column; gap: .25rem; padding: .4rem .45rem .5rem; font-size: .74rem; font-weight: 700; line-height: 1.2; }
.cm-thumb__t .cm-tag { align-self: flex-start; }
.cm-thumb:hover { border-color: var(--c-line-2); }
.cm-thumb[aria-current="true"] { border-color: var(--c-red); box-shadow: var(--glow); }

/* visor de imágenes */
.cm-lightbox { max-width: min(96vw, 1280px); padding: 0; border: 1px solid var(--c-line-2); border-radius: var(--r); background: #05070a; color: var(--c-text); box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.cm-lightbox::backdrop { background: rgba(0,0,0,.82); }
.cm-lightbox img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; }
.cm-lightbox__cap { margin: 0; padding: .6rem .9rem; font-weight: 700; }
.cm-lightbox__close { position: absolute; top: .4rem; right: .4rem; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--c-line-2); background: rgba(13,17,23,.85); color: #fff; cursor: pointer; }
.cm-lightbox__close:hover { background: var(--c-red); border-color: var(--c-red); }

@media (max-width: 760px) {
  .cm-help { padding: 0 .2rem; }
  .cm-over { padding-bottom: 4.2rem; }            /* deja sitio al interruptor de modo fijo abajo a la derecha */
  .cm-rail { top: auto; bottom: 10.5rem; transform: none; }
  .cm-strip { display: none; }                   /* en móvil la ruleta va sola, a pantalla completa */
}
@media (min-width: 761px) {
  .cm-hero { min-height: 300px; align-items: center; }
  .cm-hero__img { object-position: 50% 20%; left: 18%; width: 82%; }
  .cm-hero::before {   /* en escritorio el texto va a la izquierda: sombreado lateral para que se lea */
    background:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(90deg, #0d1117 0%, #0d1117 18%, rgba(13,17,23,.78) 38%, rgba(13,17,23,.1) 65%, transparent 100%);
  }
  .cm-hero__txt { padding: 1.6rem 2.2rem; max-width: 560px; }

  .cm-stage { margin-inline: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.4rem; }
  .cm-reel {
    --h: min(calc(100svh - var(--cm-head) - 2.5rem), 760px);
    grid-column: 2; height: var(--h); width: calc(var(--h) * 9 / 16);
    border: 1px solid var(--c-line-2); border-radius: var(--r); box-shadow: 0 0 0 1px rgba(209,52,56,.25), var(--shadow);
    scroll-margin-top: calc(var(--cm-head) + 1.25rem);
  }
  .cm-reel:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(209,52,56,.6); }
  .cm-rail { position: static; transform: none; grid-column: 3; justify-self: start; gap: .8rem; }
  .cm-nav { width: 52px; height: 52px; }
  .cm-help { text-align: center; }
  .cm-title { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-play, .cm-over, .cm-thumb, .cm-nav { transition: none; }
  .cm-strip ul { scroll-behavior: auto; }
}

/* iconos SVG (src/Icon.php): sonido con dos iconos que se alternan según aria-pressed (comite.js) */
.cm-sound, .cm-lightbox__close, .cm-nav { display: grid; place-items: center; color: #fff; }
.cm-sound .bx-ico { width: 18px; height: 18px; }
.cm-sound .cm-sound__on { display: none; }
.cm-sound[aria-pressed="true"] .cm-sound__on { display: block; }
.cm-sound[aria-pressed="true"] .cm-sound__off { display: none; }
.cm-lightbox__close .bx-ico { width: 18px; height: 18px; }
.cm-nav .bx-ico { width: 22px; height: 22px; }
.cm-zoom .bx-ico { width: 16px; height: 16px; }
.cm-ext__logo .bx-ico { width: 3.2rem; height: 3.2rem; opacity: .9; filter: drop-shadow(0 0 10px rgba(209,52,56,.35)); }
.cm-thumb .cm-ext__logo .bx-ico { width: 1.8rem; height: 1.8rem; }
.cm-media--ext > .cm-ext__logo { transform: translateY(-5.5rem); }   /* que no quede tapado por el botón de play */