/* Central Radio — widgets del header. Todo parametrizado con variables (el diseñador las cambia en vivo). */
:root{
  --crtb-accent:#FCD015;        /* amarillo de marca */
  --crtb-btc:#F7931A;
  --crtb-live:#FF3B30;          /* punto rojo */
  --crtb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Botones Radio/TV */
  --crtb-btn-bg:14,18,26;       /* RGB */
  --crtb-btn-opacity:.60;
  --crtb-btn-text:#f3f6fa;
  --crtb-btn-radius:11px;
  --crtb-btn-fs:12px;
  --crtb-btn-padx:14px;
  --crtb-btn-pady:7px;
  --crtb-btn-gap:9px;
  --crtb-btn-offset:14px;       /* separación al borde derecho del menú */
  --crtb-btn-offset-sticky:26px;/* separación en el header sticky (más a la derecha) */

  /* Cambio */
  --crtb-fx-val:#16181d;
  --crtb-fx-fs:13px;
  --crtb-fx-badge-fs:10.5px;
  --crtb-fx-offset:14px;        /* margen izquierdo respecto al clima */
  --crtb-fx-radius:9px;
}

/* ══════════ COTIZACIÓN ══════════ */
#crtb-fx.crtb-fx{ display:inline-flex; align-items:center; gap:8px; vertical-align:middle; font-family:var(--crtb-font); line-height:1.1; margin-left:var(--crtb-fx-offset); }
#crtb-fx .crtb-fx-main{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.10); border-radius:var(--crtb-fx-radius); padding:4px 9px; margin:0; transition:background .18s,border-color .18s; }
#crtb-fx .crtb-fx-main:hover{ background:rgba(0,0,0,.07); border-color:rgba(0,0,0,.18); }
#crtb-fx .crtb-fx-badge{ width:22px; height:22px; border-radius:6px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:var(--crtb-fx-badge-fs); font-weight:800; color:#3b2f00; background:var(--crtb-accent); letter-spacing:.2px; }
#crtb-fx .crtb-fx-badge.crtb-b-btc{ background:var(--crtb-btc); color:#3a2400; }
#crtb-fx .crtb-fx-meta{ display:flex; flex-direction:column; gap:0; text-align:left; min-width:0; }
#crtb-fx .crtb-fx-pair{ font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:#8a8f98; }
#crtb-fx .crtb-fx-row{ display:flex; align-items:baseline; gap:6px; }
#crtb-fx .crtb-fx-val{ font-size:var(--crtb-fx-fs); font-weight:700; color:var(--crtb-fx-val); font-variant-numeric:tabular-nums; white-space:nowrap; transition:opacity .16s; }
#crtb-fx .crtb-fx-delta{ font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
#crtb-fx .crtb-fx-delta.crtb-up{ color:#0a9d54; } #crtb-fx .crtb-fx-delta.crtb-down{ color:#d32f2f; }
#crtb-fx .crtb-fx-chips{ display:inline-flex; gap:4px; }
#crtb-fx .crtb-chip{ border:1px solid rgba(0,0,0,.12); background:transparent; color:#6b7280; border-radius:7px; padding:4px 7px; font-size:10px; font-weight:700; letter-spacing:.3px; cursor:pointer; margin:0; line-height:1; transition:all .15s; position:relative; overflow:hidden; }
#crtb-fx .crtb-chip:hover{ color:#16181d; border-color:rgba(0,0,0,.28); }
#crtb-fx .crtb-chip.crtb-on{ color:#3b2f00; background:var(--crtb-accent); border-color:var(--crtb-accent); }
#crtb-fx .crtb-chip.crtb-btc.crtb-on{ background:var(--crtb-btc); border-color:var(--crtb-btc); color:#2a1a00; }
#crtb-fx .crtb-chip.crtb-btc.crtb-on::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.6),transparent 55%); animation:crtb-shine 2.4s ease-in-out infinite; }
@keyframes crtb-shine{ 0%,100%{ opacity:.25; transform:translateX(-30%);} 50%{ opacity:.7; transform:translateX(30%);} }

/* ══════════ RADIO / TV ══════════ */
.crtb-player{ display:inline-flex; align-items:center; gap:var(--crtb-btn-gap); vertical-align:middle; font-family:var(--crtb-font); }
.crtb-player.crtb-in-menu{ position:absolute; right:var(--crtb-btn-offset); top:50%; transform:translateY(-50%); z-index:50; }
.crtb-player.crtb-in-sticky{ right:var(--crtb-btn-offset-sticky); }
.crtb-pbtn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0; background:rgba(var(--crtb-btn-bg),var(--crtb-btn-opacity)); color:var(--crtb-btn-text); border:1px solid rgba(255,255,255,.16); border-radius:var(--crtb-btn-radius); padding:var(--crtb-btn-pady) var(--crtb-btn-padx) var(--crtb-btn-pady) 11px; font-size:var(--crtb-btn-fs); font-weight:700; letter-spacing:.6px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.18); transition:background .2s,border-color .2s,transform .12s,box-shadow .25s; }
.crtb-pbtn:hover{ background:rgba(var(--crtb-btn-bg),calc(var(--crtb-btn-opacity) + .2)); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.28); }
.crtb-pbtn.crtb-on{ border-color:color-mix(in srgb,var(--crtb-accent) 60%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--crtb-accent) 28%,transparent),0 6px 18px rgba(0,0,0,.28); }
.crtb-dot{ width:8px; height:8px; border-radius:50%; background:var(--crtb-live); flex:0 0 auto; box-shadow:0 0 8px color-mix(in srgb,var(--crtb-live) 90%,transparent); animation:crtb-pulse 1.5s ease infinite; }
@keyframes crtb-pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.45);} }
.crtb-ico{ width:15px; height:15px; flex:0 0 auto; }
.crtb-eq{ display:none; align-items:flex-end; gap:2px; height:14px; width:16px; }
.crtb-pbtn.crtb-on .crtb-eq{ display:inline-flex; }
.crtb-pbtn.crtb-on .crtb-ico{ display:none; }
.crtb-eq i{ width:3px; background:var(--crtb-accent); border-radius:2px; animation:crtb-bar .9s ease-in-out infinite; }
.crtb-eq i:nth-child(1){ animation-delay:-.2s;} .crtb-eq i:nth-child(2){ animation-delay:-.5s;} .crtb-eq i:nth-child(3){ animation-delay:-.35s;} .crtb-eq i:nth-child(4){ animation-delay:-.65s;}
@keyframes crtb-bar{ 0%,100%{ height:4px;} 50%{ height:14px;} }

/* ══════════ Panel TV ══════════ */
.crtb-tv-panel{ display:none; position:fixed; top:64px; right:20px; z-index:2147483000; width:340px; border-radius:16px; overflow:hidden; background:rgba(9,13,20,.95); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px); box-shadow:0 22px 60px rgba(0,0,0,.6); }
.crtb-tv-panel.crtb-open{ display:block; animation:crtb-pop .28s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes crtb-pop{ from{ opacity:0; transform:scale(.92) translateY(-8px);} to{ opacity:1; transform:none;} }
.crtb-tv-screen{ position:relative; aspect-ratio:16/9; background:radial-gradient(120% 120% at 50% 0%,#1b2a44,#070b12); display:flex; align-items:center; justify-content:center; }
.crtb-video{ width:100%; height:100%; object-fit:cover; background:#000; display:block; }
.crtb-tv-live{ position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; background:rgba(255,59,48,.16); border:1px solid rgba(255,59,48,.5); color:#ff8f88; font-size:10px; font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:6px; }
.crtb-tv-bigplay{ position:absolute; z-index:2; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.crtb-tv-bigplay.crtb-hide{ display:none; }
.crtb-tv-foot{ display:flex; align-items:center; justify-content:space-between; padding:10px 13px; }
.crtb-tv-foot b{ color:#eaf0f6; font-size:13px; display:block; } .crtb-tv-foot span{ color:#8a97a6; font-size:11px; }
.crtb-tv-x{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#8a97a6; border-radius:8px; width:26px; height:26px; cursor:pointer; }
.crtb-tv-x:hover{ color:#fff; }

@media (prefers-reduced-motion:reduce){ #crtb-fx *,.crtb-player *{ animation:none!important; } }
@media (max-width:1018px){ #crtb-fx .crtb-fx-chips{ display:none; } #crtb-fx.crtb-fx{ margin-left:8px; } }
@media (max-width:600px){ .crtb-tv-panel{ right:8px; width:min(340px,92vw); } }

/* Barra fija inferior con Radio/TV — solo móvil (el header móvil no las muestra) */
#crtb-mbar{ display:none; }
@media (max-width:782px){
  #crtb-mbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:2147483000; justify-content:center; align-items:center; gap:10px; padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); background:rgba(10,13,18,.96); border-top:1px solid rgba(255,255,255,.14); box-shadow:0 -4px 18px rgba(0,0,0,.25); }
  #crtb-mbar .crtb-player{ display:flex; gap:10px; width:100%; max-width:420px; }
  #crtb-mbar .crtb-pbtn{ flex:1 1 0; justify-content:center; }
  body{ padding-bottom:62px; }
}