.utility-slot{display:flex;align-items:center;gap:8px;position:relative}
.utility-slot #rk-btn,.utility-slot .visual-quality{position:relative!important;inset:auto!important;margin:0!important;z-index:20!important;max-width:none!important;box-sizing:border-box;min-height:36px;padding:9px 12px!important;border:1px solid #49604b!important;border-radius:10px!important;background:#132820!important;color:#deead5!important;font:600 11px system-ui!important;white-space:nowrap}
.utility-slot .visual-quality[hidden]{display:block!important}.utility-slot .visual-quality summary{list-style:none;cursor:pointer}.utility-slot .visual-quality summary::-webkit-details-marker{display:none}
.utility-slot .visual-quality[open]{border-radius:10px 10px 0 0!important}
.utility-slot .visual-quality[open] label,.utility-slot .visual-quality[open] small{position:absolute;right:-1px;box-sizing:border-box;width:230px;margin:0;padding:16px;background:#132820;border:1px solid #49604b;white-space:normal}
.utility-slot .visual-quality[open] label{top:100%;border-bottom:0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.utility-slot .visual-quality[open] small{top:calc(100% + 58px);border-top:0;border-radius:0 0 12px 12px;font-size:11px;line-height:1.5}
.top-actions{align-items:center}.ticker>div{min-width:0;padding:0!important}.headline-track{display:flex;width:max-content;flex-shrink:0;animation:news-scroll 32s linear infinite;will-change:transform}.headline-track>span{display:block;flex-shrink:0;padding:0 32px;white-space:nowrap}.ticker:hover .headline-track{animation-play-state:paused}
@keyframes news-scroll{to{transform:translateX(-50%)}}
.design-credit{display:block;text-align:center;margin-top:18px;font:12px system-ui;color:#c7dfa5;text-decoration:none}.design-credit:hover{text-decoration:underline}.design-credit:focus-visible{outline:2px solid #d1eb9d;outline-offset:4px}
@media(max-width:760px){.utility-slot{gap:4px}.utility-slot #rk-btn,.utility-slot .visual-quality{min-height:30px;padding:7px 6px!important;font-size:9px!important;border-radius:8px!important}.top-actions{gap:4px!important}.headline-track{animation-duration:38s}.headline-track>span{padding:0 20px}.utility-slot .visual-quality[open] label,.utility-slot .visual-quality[open] small{width:210px}}
@media(prefers-reduced-motion:reduce){.headline-track{animation:none;will-change:auto}.ticker>div{overflow-x:auto}.headline-track>span[aria-hidden]{display:none}}

/* One readable news headline at a time; no endless horizontal marquee. */
.headline-track.rotating-bulletin{width:100%;min-width:0;animation:none;will-change:auto;display:block}
.rotating-bulletin>span:first-child{white-space:normal;padding:0 18px;line-height:1.3;animation:bulletin-fade 6s ease-in-out infinite}
.rotating-bulletin>span[aria-hidden]{display:none}
.ticker:has(.rotating-bulletin){height:auto;min-height:35px}.ticker>div:has(.rotating-bulletin){padding:7px 0!important;overflow:hidden}
@keyframes bulletin-fade{0%{opacity:.2;transform:translateY(4px)}8%,94%{opacity:1;transform:translateY(0)}100%{opacity:.2;transform:translateY(-4px)}}
.rotating-bulletin:hover>span{animation-play-state:paused}
.design-credit{display:block;width:fit-content;max-width:100%;box-sizing:border-box;margin:18px auto 0;padding:12px 22px;border:1px solid #d0ef85;border-radius:10px;background:#d0ef85;color:#172311;font:700 13px system-ui;text-align:center;text-decoration:none}
.design-credit:hover{background:#dafa9b;text-decoration:none}.design-credit:focus-visible{outline:2px solid #d0ef85;outline-offset:4px}
@media(max-width:760px){.rotating-bulletin>span:first-child{padding:0 10px;font-size:9px}.ticker:has(.rotating-bulletin){min-height:36px}}
@media(prefers-reduced-motion:reduce){.rotating-bulletin>span:first-child{animation:none;transform:none}}
.utility-slot #al-lang{position:relative!important;inset:auto!important;margin:0!important;z-index:20!important;min-height:36px;border:1px solid #49604b!important;border-radius:10px!important;background:#132820!important}
.utility-slot #al-lang button{padding:9px 11px!important;font:600 11px system-ui!important;color:#deead5}
.utility-slot #al-lang button[aria-pressed="true"]{background:#cdf06a!important;color:#0d1f14!important}

/* === Botón ONLINE en la barra superior (v30) === */
.utility-slot #on-btn{position:relative!important;inset:auto!important;margin:0!important;z-index:20!important;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:9px 13px!important;border:1px solid #cdf06a!important;border-radius:10px!important;background:linear-gradient(180deg,#d8f77b,#b6e04f)!important;color:#0d1f14!important;font:800 11px system-ui!important;letter-spacing:.07em;white-space:nowrap;cursor:pointer;box-shadow:0 0 0 0 rgba(205,240,106,.55);animation:onPulse 2.6s ease-out infinite}
.utility-slot #on-btn:hover{filter:brightness(1.06)}
.utility-slot #on-btn svg{flex:none}
@keyframes onPulse{0%{box-shadow:0 0 0 0 rgba(205,240,106,.5)}70%{box-shadow:0 0 0 9px rgba(205,240,106,0)}100%{box-shadow:0 0 0 0 rgba(205,240,106,0)}}
@media (prefers-reduced-motion:reduce){.utility-slot #on-btn{animation:none}}
/* En móvil, Gráficos ya no vive en la barra superior (v52). Se oculta por
   defecto y solo aparece como hermano real de "Design by Edu" (dentro de
   .vq-row-wrap, creado por layout-v29.js) mientras el Centro de control
   está abierto — sin cálculos de posición en JS, así no se desalinea con
   el scroll ni con animaciones de entrada del panel. */
@media(max-width:760px){
  .utility-slot #on-btn{min-height:30px;padding:7px 9px!important;font-size:9px!important;border-radius:8px!important}
  .utility-slot #on-btn svg{width:11px;height:11px}

  .visual-quality:not(.vq-mobile-settings){display:none!important}

  .vq-row-wrap{
    display:flex!important;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:10px;position:relative;width:fit-content;max-width:100%;
    box-sizing:border-box;margin:18px auto 0;
  }
  .vq-row-wrap .design-credit{margin:0!important}

  .visual-quality.vq-mobile-settings{
    display:inline-flex!important;position:relative!important;
    margin:0!important;width:auto!important;max-width:none!important;
    inset:auto!important;z-index:20!important;
  }
  .visual-quality.vq-mobile-settings summary{
    display:inline-block;list-style:none;cursor:pointer;
    padding:12px 16px;border:1px solid #ffd875;border-radius:10px;
    background:linear-gradient(180deg,#ffe9a8,#ffcf5c);color:#3a2600;
    font:800 12px system-ui;letter-spacing:.02em;white-space:nowrap;text-transform:uppercase;
    box-shadow:0 2px 8px rgba(255,207,92,.35);
  }
  .visual-quality.vq-mobile-settings summary:active{filter:brightness(.95)}
  .visual-quality.vq-mobile-settings summary::-webkit-details-marker{display:none}
  .visual-quality.vq-mobile-settings[open] summary{border-radius:10px 10px 0 0}
  .visual-quality.vq-mobile-settings[open] label,
  .visual-quality.vq-mobile-settings[open] small{
    position:absolute!important;left:0!important;right:auto!important;
    bottom:100%!important;top:auto!important;
    box-sizing:border-box;width:230px;max-width:calc(100vw - 32px);margin:0;padding:16px;
    background:#132820;border:1px solid #49604b;white-space:normal;
  }
  .visual-quality.vq-mobile-settings[open] label{border-bottom:0;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .visual-quality.vq-mobile-settings[open] small{bottom:calc(100% + 58px)!important;border-top:0;border-radius:12px 12px 0 0;font-size:11px;line-height:1.5}
  .visual-quality.vq-mobile-settings .vq-close{position:absolute!important;top:auto!important;bottom:100%!important;left:0!important;margin:0 0 8px!important}
}

/* Botón de cerrar del panel de Gráficos (v45) */
.visual-quality .vq-close{display:none}
.visual-quality[open] .vq-close{display:flex;position:absolute;top:100%;right:-1px;margin-top:8px;width:22px;height:22px;align-items:center;justify-content:center;border:1px solid #49604b;border-radius:6px;background:#1c352b;color:#deead5;font-size:14px;line-height:1;cursor:pointer;z-index:2}
