/* Reproductor público de video Radar (RADAR-126). Disparadores + modal <dialog>.
   Owner 2026-10-21: el video es una acción secundaria. Portada = enlace de texto con play
   (como «Leer historia»); detalle = botón de contorno fino. La hoja del modal es oscura en ambos temas. */
.radar-video-trigger{--rv-accent:var(--portal-signal,var(--blue,#294fa7));display:inline-flex;align-items:center;gap:7px;
  font:600 13px/1.2 var(--portal-font,var(--sans,system-ui,sans-serif));text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
/* Las reglas de enlaces de cada página (p. ej. .radar-brief a) no deben subrayar ni recolorear el disparador. */
.radar-video-trigger.radar-video-trigger,.radar-video-trigger.radar-video-trigger:visited{color:var(--rv-accent);text-decoration:none}
.radar-video-trigger:focus-visible{outline:2px solid var(--rv-accent);outline-offset:3px;border-radius:4px}
/* Icono: círculo de contorno con play, del color del texto. */
.radar-video-trigger-icon{position:relative;display:inline-block;flex:none;width:17px;height:17px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box}
.radar-video-trigger-icon::before{content:"";position:absolute;left:5px;top:3.5px;border-style:solid;border-width:3.5px 0 3.5px 5.5px;border-color:transparent transparent transparent currentColor}
/* Texto (portada): mismo peso visual que «Leer historia». */
.radar-video-trigger--text:hover .radar-video-trigger-label{text-decoration:underline;text-underline-offset:3px}
/* Contorno (páginas de detalle): se distingue sin competir con el contenido. */
.radar-video-trigger--outline{min-height:32px;padding:5px 12px 5px 9px;border:1px solid color-mix(in srgb,var(--rv-accent) 55%,transparent);border-radius:999px;transition:background-color .15s ease}
.radar-video-trigger--outline:hover{background:color-mix(in srgb,var(--rv-accent) 12%,transparent)}
/* Tarjeta Deep Signal: línea discreta bajo el pie, en el tono del pie; azul solo al pasar. Fuera de su <a>. */
body .radar-intel-slide[data-has-video]{flex-direction:column;align-items:flex-start}
body .radar-intel-slide[data-has-video]>.radar-intel-item{align-self:stretch}
.radar-intel-video{flex:none;margin-top:8px;font-size:12.5px}
.radar-intel-video.radar-video-trigger.radar-video-trigger{color:var(--portal-muted,var(--muted,#8a93a3))}
.radar-intel-video.radar-video-trigger.radar-video-trigger:hover{color:var(--rv-accent)}
/* Hero: encima del enlace estirado de la tarjeta, en la fila de «Leer historia»; el tema ya le da su estilo de enlace. */
.is-card-hit .radar-video-trigger{position:relative;z-index:2}
.home-v2-hero-footer .home-hero-video{margin-left:20px;vertical-align:middle}
/* El tema de portada fija margin:0 !important en los <a> del pie; la clase repetida solo gana esa separación. */
body[data-portal-ui] .home-v2-hero-footer a.home-hero-video.home-hero-video.home-hero-video.home-hero-video{margin-left:20px!important}
.runtime-story-video{margin:16px 0 0}
/* Táctil: objetivo de 44 px sin agrandar lo visible. */
@media (pointer:coarse){.radar-video-trigger{position:relative}.radar-video-trigger::after{content:"";position:absolute;inset:-8px -4px}}

.radar-video-dialog{--rv-w:9;--rv-h:16;--rv-chrome:176px;--rv-gutter:16px;
  --rv-stage-w:min(calc(100vw - 2*var(--rv-gutter) - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px),calc((100dvh - var(--rv-chrome) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--rv-w) / var(--rv-h)),1040px);
  box-sizing:border-box;width:calc(var(--rv-stage-w) + 24px);max-width:calc(100vw - 2*var(--rv-gutter));max-height:calc(100dvh - 16px);margin:auto;padding:0;border:0;border-radius:16px;
  background:#10141b;color:#f2f4f8;overflow:visible;box-shadow:0 24px 80px #000a;--rv-font:var(--portal-font,var(--sans,system-ui,sans-serif));font-family:var(--rv-font)}
.radar-video-dialog[data-orientation="portrait"]{--rv-stage-w:min(calc(100vw - 2*var(--rv-gutter) - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px),calc((100dvh - var(--rv-chrome) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--rv-w) / var(--rv-h)),520px)}
.radar-video-dialog::backdrop{background:#05080dcc;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.radar-video-dialog[open]{animation:rv-in .18s ease-out}
@keyframes rv-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.rv-sheet{box-sizing:border-box;padding:12px;display:flex;flex-direction:column;gap:10px;max-height:calc(100dvh - 16px);overflow:auto}
.rv-sheet>*{flex:none}
.rv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 2px 0 4px}
.rv-heading{min-width:0}
.rv-eyebrow{margin:0 0 3px;font:600 11px/1.4 var(--rv-font);letter-spacing:.1em;text-transform:uppercase;color:#9fb4ff}
.rv-eyebrow[hidden]{display:none}
.rv-title{margin:0;font:500 17px/1.3 Georgia,"Times New Roman",serif;color:#f6f7fa;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-close{flex:none;display:grid;place-content:center;width:44px;height:44px;margin:-6px -6px 0 0;border:0;border-radius:50%;background:#ffffff14;color:#fff;cursor:pointer}
.rv-close:hover{background:#ffffff26}
.rv-close svg{width:20px;height:20px}
.rv-stage{--rv-w:9;--rv-h:16;position:relative;width:var(--rv-stage-w);max-width:100%;aspect-ratio:var(--rv-w)/var(--rv-h);margin:0 auto;border-radius:12px;overflow:hidden;background:#000;outline:none;isolation:isolate}
.rv-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.rv-bigplay{position:absolute;inset:0;margin:auto;display:grid;place-content:center;width:76px;height:76px;border:0;border-radius:50%;background:#ffffffe8;color:#0d1320;cursor:pointer;box-shadow:0 6px 28px #0008;z-index:2;transition:transform .15s ease,opacity .15s ease}
.rv-bigplay:hover{transform:scale(1.05)}
.rv-bigplay svg{width:34px;height:34px;margin-left:4px}
.rv-stage:is([data-state="playing"],[data-state="error"]) .rv-bigplay{opacity:0;pointer-events:none}
/* Dos filas: progreso a todo el ancho (útil también en 9:16 estrecho) y botones debajo. */
.rv-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;padding:36px 6px 4px;
  background:linear-gradient(transparent,#000b 55%);transition:opacity .2s ease}
.rv-stage.rv-idle-ui .rv-bar{opacity:0;pointer-events:none}
.rv-stage.rv-idle-ui{cursor:none}
.rv-bar[hidden],.rv-error[hidden],.rv-bigplay[hidden],.rv-cc[hidden]{display:none}
.rv-btn{flex:none;display:grid;place-content:center;min-width:44px;height:44px;padding:0 6px;border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer;font:700 12px/1 var(--rv-font);letter-spacing:.04em}
.rv-btn:hover{background:#ffffff1f}
.rv-btn svg{width:22px;height:22px}
.rv-cc[aria-pressed="true"]{background:#fff;color:#0d1320}
.rv-time{flex:none;margin-right:auto;padding:0 6px;font:500 12px/1 var(--rv-font);font-variant-numeric:tabular-nums;color:#e8ebf2}
.rv-seek{--rv-progress:0%;order:-1;flex:1 0 100%;box-sizing:border-box;height:30px;margin:0;padding:0 8px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.rv-seek::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#fff var(--rv-progress),#ffffff4d var(--rv-progress))}
.rv-seek::-moz-range-track{height:4px;border-radius:4px;background:#ffffff4d}
.rv-seek::-moz-range-progress{height:4px;border-radius:4px;background:#fff}
.rv-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #ffffff33}
.rv-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
.radar-video-dialog :is(button,a,input):focus-visible{outline:2px solid #9fb4ff;outline-offset:2px}
.rv-stage.rv-buffering::after{content:"";position:absolute;inset:0;margin:auto;width:40px;height:40px;border:3px solid #fff5;border-top-color:#fff;border-radius:50%;animation:rv-spin .8s linear infinite;z-index:1}
@keyframes rv-spin{to{transform:rotate(1turn)}}
.rv-error{position:absolute;inset:0;z-index:4;display:grid;place-content:center;gap:10px;padding:24px;text-align:center;background:#10141bf2;font:15px/1.5 var(--rv-font)}
.rv-error p{margin:0}
.rv-error a,.rv-read,.rv-fallback a{color:#b8c7ff;font-weight:600}
.rv-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;margin:0;padding:0 4px 2px;font:13px/1.45 var(--rv-font);color:#aeb6c5}
.rv-read[hidden],.rv-fallback[hidden]{display:none}
.rv-read::after{content:" \2192"}
.rv-fallback{margin:0;padding:10px 12px;border-radius:10px;background:#ffffff12;font:13px/1.45 var(--rv-font);color:#d7dce6}
/* Pantalla completa del escenario (desktop/Android/iPad): video entero, controles encima. */
.rv-stage.rv-fullscreen,.rv-stage:fullscreen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border-radius:0}
.rv-stage:-webkit-full-screen{width:100vw;height:100vh;max-width:none;border-radius:0}
@media (max-width:600px){
  .radar-video-dialog{--rv-gutter:8px;--rv-chrome:150px;border-radius:14px}
  .rv-sheet{padding:10px;gap:8px}
  .rv-title{font-size:16px}
  .rv-bar{padding-inline:2px}
}
/* Teléfono en horizontal: menos cabecera para que el video no quede diminuto. */
@media (max-height:500px) and (orientation:landscape){
  .radar-video-dialog{--rv-chrome:84px}
  .rv-sheet{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"stage head" "stage meta" "stage fallback";align-content:start;column-gap:14px}
  .rv-stage{grid-area:stage}.rv-head{grid-area:head}.rv-meta{grid-area:meta;justify-content:flex-start}.rv-fallback{grid-area:fallback}
  .radar-video-dialog[data-orientation="portrait"]{width:auto;max-width:calc(100vw - 16px)}
}
@media (prefers-reduced-motion:reduce){
  .radar-video-dialog[open],.rv-stage.rv-buffering::after{animation:none}
  .radar-video-trigger,.rv-bar,.rv-bigplay{transition:none}
}
