/* RGB Arcade — Noticias PRO
   Estilo pensado para verse "pro" sin romper themes: todo va bajo .rgban-skin
*/
:root{
  --rgban-bg:#05070a;
  --rgban-panel:rgba(10,18,28,.78);
  --rgban-accent:#5cffd1;
  --rgban-danger:#ff4f7a;
  --rgban-warm:#ffd15c;
  --rgban-glow:.85;
  --rgban-rainbow:1;
  --rgban-scan:1;
  --rgban-pixel:0;
}

/* Base */
html, body.rgban-skin{
  background: var(--rgban-bg) !important;
}

body.rgban-skin{
  /* Fondo negro real: evita fondos blancos del theme y mantiene el “toque arcade” muy sutil */
  background:
    radial-gradient(1100px 700px at 18% -10%, rgba(92,255,209,.07), transparent 58%),
    radial-gradient(900px 640px at 88% 0%, rgba(255,79,122,.06), transparent 60%),
    var(--rgban-bg) !important;
  color: #d7f6ff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.rgban-skin a{ color: var(--rgban-accent); }
.rgban-skin a:hover{ color: #fff; text-shadow: 0 0 10px rgba(92,255,209,.35); }

.rgban-skin :where(h1,h2,h3,h4){
  letter-spacing: .2px;
  text-wrap: balance;
}
.rgban-skin :where(p,li){ line-height: 1.55; }

/* Make the main content breathe */
/* Algunos themes meten fondos blancos en wrappers y bloques: los apagamos dentro del scope */
body.rgban-skin :is(.site, .site-content, .content-area, .site-main, main, .wp-site-blocks, #page, #content){
  background: transparent !important;
  background-color: transparent !important;
}

/* Bloques con "has-background" suelen forzar blanco: los convertimos en panel oscuro */
body.rgban-skin :is(.site-main, main, .content-area) :is(.has-background, .wp-block-group.has-background, .wp-block-cover.has-background){
  background: var(--rgban-panel) !important;
  background-color: var(--rgban-panel) !important;
  border-radius: 16px;
}

/* Card styling for archives + singles (common WP structures) */
/* Cards / posts: más especificidad + !important para ganar a themes que fuerzan fondos claros */
body.rgban-skin :is(article.post, article.hentry, article, .wp-block-post, .rgban-card){
  background: var(--rgban-panel) !important;
  background-color: var(--rgban-panel) !important;
  color: #d7f6ff !important;
  border: 1px solid rgba(92,255,209,.16) !important;
  border-radius: 16px !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
  padding: 18px 18px 14px;
  margin: 18px 0;
  position: relative;
  overflow: hidden;
}

/* Subtle neon edge */
body.rgban-skin :is(article.post, article.hentry, article, .wp-block-post, .rgban-card)::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(900px 260px at 15% -10%,
    rgba(92,255,209,.22), transparent 55%),
    radial-gradient(700px 240px at 85% 0%,
    rgba(255,79,122,.16), transparent 55%);
  pointer-events:none;
  filter: blur(10px);
  opacity: calc(.55 * var(--rgban-glow));
}

/* Header de archivo/página (evita el bloque blanco enorme) */
body.rgban-skin :is(.page-header, .archive-header, header.page-header){
  background: var(--rgban-panel) !important;
  border: 1px solid rgba(92,255,209,.14) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin: 18px 0 22px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.62) !important;
}

body.rgban-skin :is(.page-header *, .archive-header *){
  color: inherit;
}

/* Excerpt / texto de tarjetas: que no se quede “lavado” */
body.rgban-skin :is(.entry-summary, .entry-content, .wp-block-post-excerpt, .wp-block-post-content){
  color: rgba(215,246,255,.88) !important;
}

/* Títulos arcoíris (si está activado) */
.rgban-skin :where(.entry-title, .page-title, .archive-title, h1.wp-block-post-title){
  margin: 8px 0 10px;
  font-weight: 800;
}

@supports (-webkit-background-clip:text){
  .rgban-skin :where(.entry-title a, .entry-title, .page-title, .archive-title, h1.wp-block-post-title){
    background: linear-gradient(90deg,
      #ff4f7a 0%,
      #ffd15c 18%,
      #5cffd1 38%,
      #5c7cff 62%,
      #d95cff 82%,
      #ff4f7a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .rgban-skin.rgban-rainbow-off :where(.entry-title a, .entry-title, .page-title, .archive-title, h1.wp-block-post-title){
    background:none;
    color:#eafcff;
  }
}

.rgban-skin :where(.entry-title a, .page-title, .archive-title){
  text-decoration: none;
}
.rgban-skin :where(.entry-title a:hover){
  text-decoration: none;
  filter: drop-shadow(0 0 14px rgba(92,255,209,.30));
}

/* Animated hue for titles (tiny, classy) */
.rgban-skin :where(.entry-title a, .entry-title, .page-title, .archive-title, h1.wp-block-post-title){
  filter:
    drop-shadow(0 0 calc(14px * var(--rgban-glow)) rgba(92,255,209,.18))
    drop-shadow(0 0 calc(18px * var(--rgban-glow)) rgba(255,79,122,.12));
}
.rgban-skin :where(.entry-title a, .entry-title){
  animation: rgbanHue 10s linear infinite;
}
.rgban-skin.rgban-rainbow-off :where(.entry-title a, .entry-title){
  animation:none;
}

@keyframes rgbanHue{
  from{ filter:hue-rotate(0deg) drop-shadow(0 0 calc(14px * var(--rgban-glow)) rgba(92,255,209,.18)); }
  to  { filter:hue-rotate(360deg) drop-shadow(0 0 calc(14px * var(--rgban-glow)) rgba(92,255,209,.18)); }
}

/* Meta */
.rgban-skin :where(.entry-meta, .post-meta, .entry-footer, .wp-block-post-date){
  color: rgba(215,246,255,.72);
  font-size: .92rem;
}
.rgban-skin :where(.entry-meta a, .entry-footer a){
  color: rgba(215,246,255,.9);
}
.rgban-skin :where(.entry-meta a:hover, .entry-footer a:hover){
  color: #fff;
}

/* Capturas completas */
.rgban-skin :where(img){
  max-width: 100%;
  height: auto;
}

/* Where themes crop: object-fit cover on thumbnails */
.rgban-skin :where(.post-thumbnail img, img.wp-post-image, .wp-block-post-featured-image img, .wp-post-image){
  object-fit: contain !important;
  object-position: center center !important;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* If theme sets fixed height containers, soften it */
.rgban-skin :where(.post-thumbnail, .wp-block-post-featured-image){
  overflow: visible !important;
}

/* Content images */
.rgban-skin :where(.entry-content img, .wp-block-image img){
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
}

/* Optional pixelate */
.rgban-skin.rgban-pixel-on :where(.entry-content img, .post-thumbnail img, img.wp-post-image){
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Buttons (common) */
.rgban-skin :where(button, .button, input[type="submit"], .wp-element-button){
  border-radius: 14px !important;
  border: 1px solid rgba(92,255,209,.25) !important;
  background: rgba(10,18,28,.9) !important;
  color: #eafcff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.55);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.rgban-skin :where(button:hover, .button:hover, input[type="submit"]:hover, .wp-element-button:hover){
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 16px 40px rgba(0,0,0,.65);
  filter: drop-shadow(0 0 16px rgba(92,255,209,.22));
}

/* Scanlines / CRT overlay (subtle, optional) */
.rgban-skin :where(.site, .site-content, .content-area, .site-main){
  position: relative;
}
.rgban-skin.rgban-scan-on :where(.site, .site-content, .content-area, .site-main)::after{
  content:"";
  pointer-events:none;
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 5px);
  opacity: .09;
  mix-blend-mode: overlay;
  z-index: 9999;
}

/* Lightbox */
.rgban-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.78);
  z-index: 100000;
  backdrop-filter: blur(6px);
}
.rgban-lightbox.is-open{ display: flex; }
.rgban-lightbox__inner{
  width: min(1200px, 92vw);
  height: min(86vh, 860px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 18px;
  border: 1px solid rgba(92,255,209,.22);
  background: rgba(8,14,22,.78);
  box-shadow: 0 30px 90px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.05) inset;
  overflow: hidden;
  position: relative;
}
.rgban-lightbox__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.rgban-lightbox__close{
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(92,255,209,.25);
  background: rgba(10,18,28,.9);
  color: #eafcff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.rgban-lightbox__close:hover{
  filter: drop-shadow(0 0 18px rgba(92,255,209,.25));
}

/* Automatic toggles via root vars */
.rgban-skin{
  /* class toggles are added by JS below based on inline root vars */
}