/* web bbclub · "Bilbo Hustlers 2004"
   Diseño y desarrollo: Unai de León, 2026. Basado en docs/styleguide/styleguide.css.
   Reglas: 960 px fijo, cajas-ventana con barra gel, sombras duras, Verdana 11/12 px,
   Silkscreen 16 px en barras, Anton en titulares, VT323 en contadores. Sin style="" inline. */

@font-face { font-family: "Silkscreen"; src: url(/s/fonts/silkscreen-regular.3f56bc19d1.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Silkscreen"; font-weight: 700; src: url(/s/fonts/silkscreen-bold.87f43a7335.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url(/s/fonts/vt323-regular.fa5bddc8a7.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Anton"; src: url(/s/fonts/anton-regular.bc541f207d.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url(/s/fonts/pressstart2p-regular.6d41f6f81d.woff2) format("woff2"); font-display: swap; }

:root {
  --bb-black: #000000;
  --bb-panel: #111111;
  --bb-panel-2: #1c1c1c;
  --bb-line: #333333;
  --bb-white: #ffffff;
  --bb-cream: #fbf5e9;
  --bb-muted: #9a9a9a;
  --bb-cyan: #03f7fe;
  --bb-cyan-deep: #0fb5b5;
  --bb-cyan-edge: #0a8c99;
  --bb-pink: #ff2e9a;
  --bb-lime: #b6ff3b;
  --bb-purple: #7a2cff;
  --eh-red: #da291c;
  --eh-green: #009a44;
  --warn-yellow: #ffe600;
  --paper: #f2efe6;
  --ink: #111111;

  --gel-cyan: linear-gradient(#e6ffff 0%, #8ffbff 49%, #03f7fe 50%, #0fb5b5 100%);
  --gel-cyan-down: linear-gradient(#0fb5b5 0%, #03f7fe 50%, #8ffbff 51%, #e6ffff 100%);
  --gel-black: linear-gradient(#5a5a5a 0%, #2b2b2b 49%, #000 50%, #1a1a1a 100%);
  --gel-black-hover: linear-gradient(#6a6a6a, #3b3b3b 49%, #0a0a0a 50%, #2a2a2a);
  --gel-pink: linear-gradient(#ffe6f3 0%, #ffb8dc 40%, #ff8ac6 50%, #ff2e9a 100%);
  --gel-lime: linear-gradient(#f4ffd9 0%, #d6ff8a 49%, #b6ff3b 50%, #7fc414 100%);
  --gel-eh: linear-gradient(#5fd38f 0%, #19b35d 49%, #009a44 50%, #006b2f 100%);
  --gel-purple: linear-gradient(#e7d9ff 0%, #b48cff 49%, #7a2cff 50%, #4b12b8 100%);
  --gel-red: linear-gradient(#ffd3cf 0%, #ff7d70 49%, #da291c 50%, #8f150b 100%);
  --hard-shadow: 3px 3px 0 #000;

  --font-body: Verdana, Tahoma, Geneva, sans-serif;
  --font-pixel: "Silkscreen", "Press Start 2P", monospace;
  --font-display: "Anton", Impact, "Arial Black", sans-serif;
  --font-term: "VT323", "Courier New", monospace;
  --font-8bit: "Press Start 2P", "Silkscreen", monospace;
  --font-ui: bold 10px/1.2 Tahoma, Verdana, Geneva, sans-serif;

  --cur-arrow: url(/s/assets/cursors/arrow-cyan.a5e44fe578.png) 0 0, auto;
  --cur-hand: url(/s/assets/cursors/hand-cyan.6e6cbc2df3.png) 5 0, pointer;
}

* { box-sizing: border-box; }
html {
  background: #000 url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png);
  cursor: var(--cur-arrow);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; padding: 14px 0 24px; font: 12px/1.45 var(--font-body); color: var(--bb-white); }
a { color: var(--bb-cyan); text-decoration: none; cursor: var(--cur-hand); }
a:hover { text-decoration: underline; color: #fff; }
/* Enlaces dentro de texto corrido: subrayados como en 2004 y distinguibles sin depender del color (WCAG 1.4.1). */
:where(p, .bbc, .bb-help, .bb-small, .bb-whosonline, dd, label) a:not([class*="bb-btn"]):not(.report) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
:where(p, .bbc, .bb-whosonline, dd) a[class^="nick-"], :where(p, .bbc, .bb-whosonline, dd) a[href^="/u/"] { text-decoration-style: dotted; }
.bb-footer p.bb-credit a, .bb-footer p.bb-credit a:hover { text-decoration: none; }
a:visited { color: var(--bb-cyan-deep); }
button, summary, label[for], select, input[type="checkbox"], input[type="radio"] { cursor: var(--cur-hand); }
:focus-visible { outline: 1px dotted var(--bb-cyan); outline-offset: 2px; }
img { max-width: 100%; }
img.px, .px { image-rendering: pixelated; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 8px; }
hr { border: 0; border-top: 1px dotted #333; margin: 10px 0; }
code, pre { font: 14px/1.2 var(--font-term); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb-skip { position: absolute; left: 8px; top: -40px; z-index: 50; padding: 6px 10px; font: var(--font-ui); text-transform: uppercase; color: #000; background: var(--warn-yellow); border: 2px solid #000; }
.bb-skip:focus { top: 8px; }
.bb-muted { color: var(--bb-muted); }
.bb-small { font-size: 10px; }
.bb-center { text-align: center; }
.bb-right { text-align: right; }
.bb-nowrap { white-space: nowrap; }
.bb-hide { display: none !important; }
.bb-mt { margin-top: 8px; }
.bb-mb0 { margin-bottom: 0; }

/* ---------- page shell ---------- */
.bb-page {
  position: relative; width: 960px; margin: 0 auto; background: #000;
  border: 1px solid #000; outline: 2px solid var(--bb-cyan-edge);
  box-shadow: 8px 8px 0 rgba(3, 247, 254, .18);
}

.bb-header {
  position: relative; height: 178px; overflow: hidden;
  background: #000 url(/s/assets/textures/sparkle-tile-black.59acd57d9b.gif);
  border-bottom: 1px solid #222;
}
/* El logo entra entero en la cabecera (por alto); contorno y sombra morada vienen en el propio webp. */
.bb-header__logo-link { position: absolute; left: 22px; top: 7px; display: block; }
.bb-header__logo { display: block; width: auto; height: 164px; }
.bb-header__claim {
  position: absolute; left: 248px; top: 26px; margin: 0;
  font: 44px/0.95 var(--font-display); text-transform: uppercase; letter-spacing: 1px;
  color: #fff; -webkit-text-stroke: 1px #000;
  text-shadow: 3px 3px 0 var(--bb-purple), 6px 6px 0 #000;
}
.bb-header__claim small { display: block; font-size: 22px; color: var(--bb-lime); text-shadow: 2px 2px 0 #000; letter-spacing: 3px; }
.bb-header__meta { position: absolute; left: 252px; top: 128px; margin: 0; font: 20px/1 var(--font-term); color: var(--bb-cyan); }
.bb-header__meta .cursor { animation: bb-blink 1s steps(1) infinite; }
.bb-header__flag { position: absolute; right: 22px; top: 22px; }
.bb-header__gems { position: absolute; right: 150px; top: 34px; display: flex; gap: 8px; }
.bb-header__burst { position: absolute; right: 34px; top: 92px; width: 78px; height: 78px; transform: rotate(8deg); }

/* Variante de sección (foro, fiestas, blog...) y compacta (perfiles) */
.bb-header--section { height: 120px; }
.bb-header--section .bb-header__logo-link { top: 6px; }
.bb-header--section .bb-header__logo { height: 108px; }
.bb-header--section .bb-header__claim { left: 180px; top: 22px; font-size: 40px; }
.bb-header--compact { height: 70px; }
.bb-header--compact .bb-header__logo-link { left: 18px; top: 5px; }
.bb-header--compact .bb-header__logo { height: 60px; }
.bb-header--compact .bb-header__claim { left: 96px; top: 14px; font-size: 34px; }
.bb-header--compact .bb-header__flag { top: 6px; }

/* Selector ES | EU: dos botones gel pegados (el activo, en gel cian). */
.bb-lang { position: absolute; right: 12px; bottom: 8px; z-index: 1; margin: 0; }
.bb-header:not(.bb-header--section):not(.bb-header--compact) .bb-lang { right: 132px; }
.bb-lang form { display: flex; margin: 0; }
.bb-lang button {
  min-width: 30px; height: 20px; padding: 0 7px; font: var(--font-ui); letter-spacing: .5px; color: #fff; text-shadow: 0 -1px 0 #000;
  background: var(--gel-black); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 2px 2px 0 #000;
}
.bb-lang button:first-child { border-radius: 5px 0 0 5px; }
.bb-lang button:last-child { border-left: 0; border-radius: 0 5px 5px 0; }
.bb-lang button[aria-pressed="true"] { color: #002024; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); background: var(--gel-cyan); border-color: var(--bb-cyan-edge); }
.bb-lang button:hover { filter: brightness(1.25); }
.bb-lang button:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }

/* ---------- marquee pill ---------- */
.bb-marquee {
  position: relative; height: 24px; margin: 8px 10px; overflow: hidden;
  border-radius: 999px; border: 1px solid var(--bb-cyan-edge);
  background: var(--gel-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 4px rgba(0, 0, 0, .7);
}
.bb-marquee::after { content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.bb-marquee__track {
  display: inline-flex; white-space: nowrap;
  font: bold 12px/24px var(--font-body); color: #00262a; text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  animation: bb-marquee var(--marquee-speed, 60s) linear infinite;
}
.bb-marquee__track > span { padding: 0 24px 0 14px; }
.bb-marquee:hover .bb-marquee__track { animation-play-state: paused; }
@keyframes bb-marquee { to { transform: translateX(-50%); } }

/* ---------- nav (gel negro Vista) + barra del usuario ----------
   Escritorio: secciones a la izquierda y, a la derecha, las herramientas con icono pixel
   (perfil, MP, avisos y cuenta) o Entrar / Únete a la crew.
   Móvil (≤760 px): las secciones van en un menú Inicio de Win98 detrás del botón MENÚ, y las
   herramientas se quedan a la vista con su texto debajo, como una barra de Outlook Express. */
.bb-nav { position: relative; z-index: 20; display: flex; flex-wrap: wrap; min-height: 32px; background: var(--gel-black); border-top: 1px solid #777; border-bottom: 1px solid #000; }
.bb-nav__toggle, .bb-nav__banner { display: none; }
.bb-nav__panel { display: flex; flex: 1 1 auto; min-width: 0; }
.bb-nav__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.bb-nav__list > li { display: flex; }
.bb-nav__list a {
  display: flex; align-items: center; min-height: 32px; padding: 0 13px;
  font: bold 11px var(--font-body); color: #fff; text-shadow: 0 -1px 0 #000;
  border-right: 1px solid #000; box-shadow: 1px 0 0 #555;
}
.bb-nav__list a:visited { color: #fff; }
.bb-nav__list a:hover { color: #fff; text-decoration: none; background: var(--gel-black-hover); }
.bb-nav__list a[aria-current="page"] { color: var(--bb-cyan); box-shadow: 1px 0 0 #555, inset 0 -3px 0 var(--bb-cyan); }
.bb-nav__list .bb-ico { display: none; }
.bb-ico { display: block; flex: none; width: 24px; height: 24px; image-rendering: pixelated; }

.bb-nav__tools { display: flex; margin: 0 0 0 auto; padding: 0; list-style: none; }
.bb-nav__tools > li { position: relative; display: flex; }
.bb-nav__tools form { display: flex; margin: 0; }
.bb-tool {
  position: relative; display: flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 9px;
  font: bold 11px var(--font-body); color: #fff; text-shadow: 0 -1px 0 #000; white-space: nowrap;
  background: none; border: 0; border-left: 1px solid #000; box-shadow: inset 1px 0 0 #555; cursor: var(--cur-hand);
}
.bb-tool:visited { color: #fff; }
.bb-tool:hover { color: #fff; text-decoration: none; background: var(--gel-black-hover); }
.bb-tool[aria-current="page"] { color: var(--bb-cyan); box-shadow: inset 1px 0 0 #555, inset 0 -3px 0 var(--bb-cyan); }
.bb-tool__label { display: flex; align-items: center; }
.bb-tool__short { display: none; }
.bb-tool__nick { display: block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.bb-tool--cta, .bb-tool--cta:visited, .bb-tool--cta:hover { color: #1d3300; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); background: var(--gel-lime); }
.bb-tool--cta:hover { filter: brightness(1.08); }
.bb-tool--cta[aria-current="page"] { color: #1d3300; box-shadow: inset 0 -3px 0 #1d3300; }
summary.bb-tool { list-style: none; }
summary.bb-tool::-webkit-details-marker { display: none; }
.bb-nav__user details[open] > summary.bb-tool { background: var(--gel-black-hover); box-shadow: inset 1px 1px 3px #000; }
.bb-nav__count { display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px; font: bold 9px/14px Tahoma, sans-serif; text-align: center; color: #fff; text-shadow: none; background: var(--bb-pink); border: 1px solid #000; border-radius: 8px; }
.bb-tool .bb-nav__count { margin-left: 0; }

/* Menú de la cuenta: menú de Windows 98, con la cabecera azul de las ventanas activas. */
.bb-nav__menu {
  position: absolute; right: 0; top: 100%; z-index: 30; min-width: 240px; margin: 0; padding: 2px; list-style: none; color: #000;
  background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: var(--hard-shadow);
}
.bb-nav__menu-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; padding: 5px 8px; color: #fff; background: linear-gradient(90deg, #000080, #1084d0); }
.bb-nav__menu-head span { display: flex; flex-direction: column; min-width: 0; }
.bb-nav__menu-head small { font: 10px Tahoma, Verdana, sans-serif; color: #dfe9ff; }
.bb-nav__menu-head b { overflow: hidden; font: bold 13px Tahoma, Verdana, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.bb-nav__menu a, .bb-nav__menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 3px 10px 3px 6px;
  font: 11px Tahoma, Verdana, sans-serif; color: #000; text-align: left; text-shadow: none; background: none; border: 0; cursor: var(--cur-hand);
}
.bb-nav__menu a:visited { color: #000; }
.bb-nav__menu a:hover, .bb-nav__menu button:hover, .bb-nav__menu a:focus-visible, .bb-nav__menu button:focus-visible { color: #fff; text-decoration: none; background: #000080; }
.bb-nav__menu a:focus-visible, .bb-nav__menu button:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
.bb-nav__menu .bb-nav__count { margin-left: auto; }
.bb-nav__menu-out { margin-top: 3px; padding-top: 3px; border-top: 1px solid #808080; box-shadow: inset 0 1px 0 #fff; }
.bb-nav__menu form { margin: 0; }

@media (max-width: 760px) {
  .bb-nav { align-items: center; gap: 4px; min-height: 58px; padding: 5px 6px; }
  /* Sin JS: el panel se ve siempre, debajo de la barra. Con JS: se abre encima del contenido. */
  .bb-nav__panel { order: 3; flex-basis: 100%; padding: 2px; color: #000; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: var(--hard-shadow); }
  .js .bb-nav__panel { position: absolute; left: 6px; top: 100%; z-index: 30; display: none; width: min(340px, calc(100% - 12px)); margin-top: 2px; }
  .js .bb-nav__panel.is-open { display: flex; }
  .bb-nav__banner {
    display: block; flex: none; width: 32px; padding: 10px 0; overflow: hidden; white-space: nowrap;
    font: 26px/32px var(--font-display); letter-spacing: 1px; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 #000;
    background: linear-gradient(var(--bb-cyan-deep), #000 80%); writing-mode: vertical-rl; transform: rotate(180deg);
  }
  .bb-nav__banner b { font-weight: normal; color: var(--bb-cyan); }
  .bb-nav__list { flex: 1; flex-direction: column; flex-wrap: nowrap; min-width: 0; }
  .bb-nav__list > li + li { border-top: 1px dotted #808080; }
  .bb-nav__list a {
    flex: 1; gap: 10px; min-height: 46px; padding: 4px 10px 4px 8px;
    font: bold 13px Tahoma, Verdana, sans-serif; color: #000; text-shadow: none; border: 0; box-shadow: none;
  }
  .bb-nav__list a:visited { color: #000; }
  .bb-nav__list .bb-ico { display: block; }
  .bb-nav__list a:hover, .bb-nav__list a:focus-visible { color: #fff; background: #000080; }
  .bb-nav__list a:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }
  .bb-nav__list a[aria-current="page"] { color: #002024; background: var(--gel-cyan); box-shadow: inset 0 0 0 1px var(--bb-cyan-edge); }
  .bb-nav__list a[aria-current="page"]::after { content: ""; width: 15px; height: 12px; margin-left: auto; background: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png) no-repeat; image-rendering: pixelated; }

  /* Botón MENÚ: el "Inicio" de Win98 con el corazón BB. */
  .js .bb-nav__toggle {
    display: inline-flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 0 9px 0 8px;
    font: bold 13px Tahoma, Verdana, sans-serif; color: #000; background: #c0c0c0;
    border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: 1px 1px 0 #000;
  }
  .bb-nav__toggle img { image-rendering: pixelated; }
  .bb-nav__toggle[aria-expanded="true"] { border-style: inset; border-color: #404040 #fff #fff #404040; box-shadow: none; background: #d4d4d4; }
  .bb-nav__toggle[aria-expanded="true"] .bb-nav__caret { transform: rotate(180deg); }
  .bb-nav__toggle:focus-visible { outline: 1px dotted #000; outline-offset: -6px; }
  .bb-nav__caret { font-size: 11px; }

  /* Herramientas: icono con su nombre debajo y el contador en la esquina del icono. */
  .bb-nav__tools { gap: 2px; }
  .bb-tool {
    flex-direction: column; justify-content: center; gap: 3px; min-width: 52px; min-height: 48px; padding: 3px 5px;
    font: var(--font-ui); letter-spacing: .3px; text-transform: uppercase; border: 1px solid transparent; border-radius: 4px; box-shadow: none;
  }
  .bb-tool:hover, .bb-tool:active { border-color: #000; box-shadow: inset 0 1px 0 #6a6a6a; }
  .bb-tool[aria-current="page"] { color: var(--bb-cyan); border-color: #000; box-shadow: inset 0 -3px 0 var(--bb-cyan); }
  .bb-tool__nick, .bb-tool__caret { display: none; }
  .bb-tool__short { display: inline; }
  .bb-tool .bb-nav__count { position: absolute; top: 1px; left: calc(50% + 5px); }
  .bb-tool--cta { padding: 3px 9px; border-color: #6aa10c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 3px rgba(0, 0, 0, .7); }
  .bb-nav__tools > li.bb-nav__user { position: static; }
  .bb-nav__user details[open] > summary.bb-tool { border-color: #000; }
  .bb-nav__menu { left: 6px; right: 6px; min-width: 0; margin-top: 2px; }
  .bb-nav__menu a, .bb-nav__menu button { min-height: 44px; font-size: 13px; }
}
@media (max-width: 370px) {
  .bb-nav { padding: 5px 4px; }
  .js .bb-nav__toggle { gap: 4px; padding: 0 6px; }
  .bb-tool { min-width: 46px; padding: 3px 2px; font-size: 9px; letter-spacing: 0; }
  .bb-header__logo, .bb-header--section .bb-header__logo { width: 80px; height: auto; }
  .bb-header__claim, .bb-header--section .bb-header__claim, .bb-header--compact .bb-header__claim { font-size: 20px; }
  .bb-header__claim small { font-size: 11px; letter-spacing: 1px; }
}

/* ---------- columns ---------- */
.bb-cols { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; padding: 10px; }
.bb-side, .bb-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bb-single { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-width: 0; }

/* ---------- window box ---------- */
.bb-window { background: var(--bb-panel); border: 1px solid var(--bb-cyan-edge); box-shadow: var(--hard-shadow); min-width: 0; }
.bb-window__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 24px; padding: 0 4px 0 8px; margin: 0;
  background: var(--gel-cyan); border-bottom: 1px solid var(--bb-cyan-edge);
  font: 16px/24px var(--font-pixel); color: #002024; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.bb-window__bar::before { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .5); pointer-events: none; }
.bb-window__bar img { image-rendering: pixelated; vertical-align: -2px; }
.bb-window__bar a, .bb-window__bar a:visited { color: inherit; }
.bb-window__title { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-side .bb-window__bar { min-height: 20px; font: bold 10px/20px Tahoma, Verdana, sans-serif; letter-spacing: .6px; }
.bb-wbtns { display: flex; gap: 2px; position: relative; flex: none; }
.bb-wbtns span {
  width: 15px; height: 14px; display: grid; place-items: center;
  font: bold 9px/1 var(--font-body); color: #033; background: linear-gradient(#fff, #c8ffff);
  border: 1px solid var(--bb-cyan-edge); border-radius: 2px; text-shadow: none;
}
.bb-side .bb-wbtns span { width: 12px; height: 11px; font-size: 7px; }
.bb-window__body { padding: 8px; }
.bb-window__body--flush { padding: 0; }
.bb-window--black .bb-window__bar { background: var(--gel-black); color: #fff; text-shadow: 0 -1px 0 #000; border-bottom-color: #000; }
.bb-window--black { border-color: #555; }
.bb-window--black .bb-wbtns span { color: #fff; background: linear-gradient(#666, #222); border-color: #000; }
.bb-window--pink .bb-window__bar { background: var(--gel-pink); color: #4a0026; }
.bb-window--pink { border-color: #c2146f; }
.bb-window--pink .bb-wbtns span { color: #4a0026; background: linear-gradient(#fff, #ffd6eb); border-color: #c2146f; }
.bb-window--lime .bb-window__bar { background: var(--gel-lime); color: #1d3300; }
.bb-window--lime { border-color: #6aa10c; }
.bb-window--lime .bb-wbtns span { color: #1d3300; background: linear-gradient(#fff, #eaffc7); border-color: #6aa10c; }
.bb-window--eh .bb-window__bar { background: var(--gel-eh); color: #fff; text-shadow: 0 -1px 0 #003015; }
.bb-window--eh { border-color: var(--eh-green); }
.bb-window--eh .bb-wbtns span { color: #003015; background: linear-gradient(#fff, #c9f5da); border-color: #006b2f; }
.bb-window--purple .bb-window__bar { background: var(--gel-purple); color: #fff; text-shadow: 0 -1px 0 #2a0670; }
.bb-window--purple { border-color: var(--bb-purple); }
.bb-window--purple .bb-wbtns span { color: #2a0670; background: linear-gradient(#fff, #e3d4ff); border-color: #4b12b8; }
.bb-window--red .bb-window__bar { background: var(--gel-red); color: #fff; text-shadow: 0 -1px 0 #5a0d06; }
.bb-window--red { border-color: var(--eh-red); }
.bb-window--double { border: 3px double var(--bb-cyan-edge); }

/* ---------- sidebar widgets ---------- */
.bb-flyer {
  position: relative; display: block; min-height: 168px; overflow: hidden; border: 2px solid #000; outline: 1px solid var(--bb-purple);
  background:
    radial-gradient(circle at 70% 30%, rgba(182, 255, 59, .35), transparent 55%),
    linear-gradient(160deg, #1b0638, #000 70%);
  padding: 8px; color: #fff;
}
a.bb-flyer:hover { text-decoration: none; filter: brightness(1.1); }
.bb-flyer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.bb-flyer__title { display: block;
  position: relative; margin: 0; font: 28px/0.9 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere;
  background: linear-gradient(#fff 0%, #d9ffa0 45%, #7fc414 55%, #e9ffc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px #000; filter: drop-shadow(2px 2px 0 var(--bb-purple));
}
.bb-flyer__date { display: block; position: relative; font: 22px/1 var(--font-term); color: var(--bb-pink); margin: 6px 0 0; }
.bb-flyer__venue { display: block; position: relative; margin: 4px 60px 0 0; font: bold 9px/1.3 var(--font-body); color: #fff; text-transform: uppercase; }
.bb-flyer__burst { position: absolute; right: -6px; bottom: -8px; width: 70px; height: 70px; transform: rotate(-10deg); }
.bb-flyer__tape { position: absolute; left: -10px; top: 6px; width: 54px; height: 14px; background: rgba(255, 255, 230, .55); transform: rotate(-35deg); }

.bb-counter { display: flex; justify-content: center; gap: 2px; padding: 4px; background: #000; border: 2px inset #444; font-variant-numeric: tabular-nums; }
.bb-counter span {
  width: 18px; height: 28px; display: grid; place-items: center;
  font: 26px/1 var(--font-term); color: var(--bb-cyan); text-shadow: 0 0 6px rgba(3, 247, 254, .8);
  background: linear-gradient(#222 0 48%, #000 48% 52%, #1a1a1a 52%); border: 1px solid #333;
}
.bb-counter--pink span { color: var(--bb-pink); text-shadow: 0 0 6px rgba(255, 46, 154, .8); }
.bb-counter--lime span { color: var(--bb-lime); text-shadow: 0 0 6px rgba(182, 255, 59, .8); }
.bb-counter__label { margin: 4px 0 0; text-align: center; font: 8px var(--font-pixel); color: var(--bb-muted); }
.bb-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; text-align: center; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bb-countdown b { display: block; font: 24px/1 var(--font-term); color: var(--bb-lime); background: #000; border: 1px inset #444; }
.bb-countdown small { font: 8px var(--font-pixel); color: var(--bb-muted); text-transform: uppercase; }
.bb-countdown--big b { font-size: 40px; padding: 4px 0; }
.bb-countdown--big small { font-size: 8px; }

.bb-online { list-style: none; margin: 0; padding: 0; }
.bb-online li { display: flex; align-items: center; gap: 5px; padding: 2px 0; border-bottom: 1px dotted #2a2a2a; font-size: 11px; min-width: 0; }
.bb-online li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #00ff00; box-shadow: 0 0 4px #00ff00; flex: none; }
.bb-dot--off { background: #444; box-shadow: none; }

.bb-gb-entry { padding: 4px 0; border-bottom: 1px dotted #2a2a2a; font-size: 11px; overflow-wrap: anywhere; }
.bb-gb-entry b, .bb-gb-entry b a { color: var(--bb-pink); }
.bb-gb-entry time { display: block; font: 8px var(--font-pixel); color: var(--bb-muted); text-transform: uppercase; }

.bb-stack { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.bb-stack img { image-rendering: pixelated; display: block; }

/* ---------- player facade (mini-Winamp / WMP9) ---------- */
.bb-player {
  border: 1px solid #000; border-radius: 4px; padding: 4px;
  background: linear-gradient(#4a4f5a, #23262d 50%, #15171c); box-shadow: inset 0 1px 0 #7a808c, var(--hard-shadow);
}
.bb-player__lcd {
  min-height: 30px; padding: 3px 5px; background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png);
  border: 1px inset #555; font: 16px/12px var(--font-term); color: #39ff14; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase;
}
.bb-player__lcd small { display: block; color: #1f9e0c; font-size: 13px; text-transform: none; overflow: hidden; text-overflow: ellipsis; }
.bb-player__viz { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin: 4px 0; }
.bb-player__viz i { flex: 1; height: 50%; background: linear-gradient(#ff2e9a, #ffe600 50%, #39ff14); }
.bb-player__viz i:nth-child(10n+1) { height: 40%; } .bb-player__viz i:nth-child(10n+2) { height: 80%; }
.bb-player__viz i:nth-child(10n+3) { height: 55%; } .bb-player__viz i:nth-child(10n+4) { height: 95%; }
.bb-player__viz i:nth-child(10n+5) { height: 35%; } .bb-player__viz i:nth-child(10n+6) { height: 70%; }
.bb-player__viz i:nth-child(10n+7) { height: 50%; } .bb-player__viz i:nth-child(10n+8) { height: 85%; }
.bb-player__viz i:nth-child(10n+9) { height: 30%; } .bb-player__viz i:nth-child(10n) { height: 65%; }
.bb-player.is-loading .bb-player__viz i { animation: bb-viz .5s steps(4) infinite alternate; }
.bb-player__ctrl { display: flex; gap: 3px; align-items: center; }
.bb-player__ctrl button, .bb-player__ctrl .fake {
  display: inline-grid; place-items: center; width: 22px; height: 16px; padding: 0; font: 9px/1 var(--font-body); color: #ddd;
  background: linear-gradient(#6b7180, #2b2f38); border: 1px solid #000; border-radius: 2px;
}
.bb-player__ctrl button.play { width: 30px; color: #000; background: var(--gel-cyan); }
.bb-player__ctrl button.play:active { background: var(--gel-cyan-down); }
.bb-player__note { margin: 3px 0 0; font: 8px/1.3 var(--font-pixel); color: #8a8f99; text-transform: uppercase; }
.bb-player__frame { position: relative; width: 100%; border: 1px inset #555; background: #000; }
.bb-player__frame iframe { display: block; width: 100%; border: 0; }
.bb-player__frame--video { aspect-ratio: 16 / 9; }
.bb-player__frame--video iframe { height: 100%; }
.bb-player__frame--audio iframe { height: 152px; }
.bb-player__frame--soundcloud iframe { height: 166px; }
.bb-player__frame--bandcamp iframe { height: 120px; }
.bb-player--video .bb-player__screen {
  display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 4px;
  background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border: 1px inset #555;
}
.bb-player--video .bb-player__screen button {
  width: 64px; height: 44px; font: 24px/1 var(--font-body); color: #000; background: var(--gel-cyan);
  border: 1px solid var(--bb-cyan-edge); border-radius: 8px; box-shadow: inset 0 1px 0 #fff, var(--hard-shadow);
}
.bb-player--empty .bb-player__lcd { color: #1f9e0c; }

/* ---------- content atoms ---------- */
.bb-h1 { margin: 0 0 6px; font: 32px/1 var(--font-display); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 var(--bb-purple), 4px 4px 0 #000; letter-spacing: .5px; overflow-wrap: anywhere; }
.bb-h1--cyan { text-shadow: 2px 2px 0 var(--bb-cyan-deep), 4px 4px 0 #000; }
.bb-h2 { margin: 10px 0 6px; font: 22px/1.05 var(--font-display); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #000; }
.bb-h3 { margin: 8px 0 4px; font: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--bb-cyan); }
.bb-lead { font-size: 12px; color: var(--bb-cream); }
.bb-hl { background: var(--bb-cyan); color: #000; padding: 0 3px; }
.bb-polaroid { float: left; margin: 2px 12px 6px 0; padding: 6px 6px 22px; background: var(--paper); transform: rotate(-3deg); box-shadow: 3px 3px 0 #000; position: relative; }
.bb-polaroid img { display: block; width: 150px; height: 150px; object-fit: cover; }
.bb-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 8px var(--font-pixel); color: #111; text-transform: uppercase; }
.bb-polaroid::before, .bb-polaroid::after { content: ""; position: absolute; width: 46px; height: 14px; background: rgba(255, 255, 220, .6); top: -6px; }
.bb-polaroid::before { left: -12px; transform: rotate(-30deg); }
.bb-polaroid::after { right: -12px; transform: rotate(30deg); }
.bb-polaroid--right { float: right; margin: 2px 0 6px 12px; transform: rotate(3deg); }
.bb-clear { clear: both; }

.bb-list { list-style: none; margin: 0; padding: 0; }
.bb-list li { display: flex; gap: 6px; align-items: baseline; padding: 4px 6px; border-bottom: 1px dotted #2a2a2a; min-width: 0; }
.bb-list li:nth-child(even) { background: var(--bb-panel-2); }
.bb-list li > a { overflow-wrap: anywhere; }
.bb-list .meta { margin-left: auto; padding-left: 6px; color: var(--bb-muted); font-size: 10px; white-space: nowrap; }
.bb-list--empty { padding: 8px; color: var(--bb-muted); font-size: 11px; }
.bb-badge { vertical-align: middle; image-rendering: pixelated; }

.bb-event { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-bottom: 1px dotted #2a2a2a; color: #fff; }
a.bb-event:hover { text-decoration: none; background: #161616; }
a.bb-event:visited { color: #fff; }
.bb-event:last-child { border-bottom: 0; }
.bb-event__flyer { height: 96px; display: grid; place-items: center; overflow: hidden; text-align: center; font: 18px/0.9 var(--font-display); text-transform: uppercase; color: var(--bb-lime); background: linear-gradient(160deg, #1b0638, #000); border: 1px solid var(--bb-purple); -webkit-text-stroke: .5px #000; }
.bb-event__flyer img { width: 100%; height: 100%; object-fit: cover; }
.bb-event__ftext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 0 4px; overflow-wrap: anywhere; text-shadow: 2px 2px 0 var(--bb-purple); }
.bb-event__ftext--l { font-size: 22px; }
.bb-event__ftext--m { font-size: 18px; }
.bb-event__ftext--s { font-size: 14px; line-height: 1; }
.bb-event__date { font: 28px/1 var(--font-term); color: var(--bb-pink); }
.bb-event__name { font: 20px/1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.bb-event__where { color: var(--bb-muted); font-size: 11px; }
.bb-event__burst { width: 64px; height: 64px; }
/* Fiestas pasadas: apagadas en el flyer y el titular, pero con el texto legible (contraste AA). */
.bb-event--past .bb-event__flyer, .bb-event--past .bb-event__burst { opacity: .6; filter: grayscale(.6); }
.bb-event--past .bb-event__name { color: #c8c8c8; }
.bb-event--past .bb-event__date { color: var(--bb-muted); }

.bb-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bb-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.bb-release { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bb-release__item { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; }
.bb-release__cover { width: 70px; height: 70px; display: grid; place-items: center; overflow: hidden; font: 12px/1 var(--font-display); text-align: center; text-transform: uppercase; border: 1px solid #000; box-shadow: var(--hard-shadow); }
.bb-release__cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-black { background: #000; color: var(--bb-cyan); }
.cover-green { background: var(--eh-green); color: #000; }
.cover-pink { background: var(--bb-pink); color: #000; }
.cover-lime { background: var(--bb-lime); color: #000; }
.cover-purple { background: var(--bb-purple); color: #fff; }
.cover-cyan { background: var(--bb-cyan); color: #000; }

.bb-burst { display: inline-block; width: 80px; height: 80px; transform: rotate(-8deg); }
.bb-tape-divider { height: 26px; background: url(/s/assets/textures/caution-tape-kontuz.637afa364b.png) repeat-x; animation: bb-tape 20s linear infinite; }
.bb-gif-divider { display: flex; justify-content: center; gap: 10px; padding: 4px 0; }
.bb-gif-divider img { image-rendering: pixelated; }

/* ---------- buttons & forms ---------- */
.bb-btn {
  display: inline-block; position: relative; padding: 4px 14px; border-radius: 999px; cursor: var(--cur-hand);
  font: var(--font-ui); line-height: 14px; letter-spacing: .5px; text-transform: uppercase; color: #002024; text-decoration: none; text-align: center;
  background: var(--gel-cyan); border: 1px solid var(--bb-cyan-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 3px rgba(0, 0, 0, .7);
}
.bb-btn:visited { color: #002024; }
.bb-btn:hover { text-decoration: none; filter: brightness(1.08); color: #002024; }
.bb-btn:active { background: var(--gel-cyan-down); transform: translateY(1px); }
.bb-btn--pink, .bb-btn--pink:visited, .bb-btn--pink:hover { background: var(--gel-pink); border-color: #c2146f; color: #4a0026; }
.bb-btn--lime, .bb-btn--lime:visited, .bb-btn--lime:hover { background: var(--gel-lime); border-color: #6aa10c; color: #1d3300; }
.bb-btn--black, .bb-btn--black:visited, .bb-btn--black:hover { background: var(--gel-black); border-color: #000; color: #fff; text-shadow: 0 -1px 0 #000; }
.bb-btn--red, .bb-btn--red:visited, .bb-btn--red:hover { background: var(--gel-red); border-color: #8f150b; color: #fff; text-shadow: 0 -1px 0 #5a0d06; }
.bb-btn--small { padding: 2px 9px; }
.bb-btn[disabled], .bb-btn98[disabled] { opacity: .5; cursor: not-allowed; }
.bb-btn98 {
  display: inline-block; padding: 2px 8px; font: 11px var(--font-body); color: #000; cursor: var(--cur-hand); text-decoration: none;
  background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040;
}
.bb-btn98:visited, .bb-btn98:hover { color: #000; text-decoration: none; }
.bb-btn98:active { border-style: inset; }
.bb-btn98:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.bb-btn98--danger { color: #8f150b; font-weight: bold; }
.bb-input, .bb-textarea, .bb-select {
  width: 100%; padding: 4px 5px; font: 12px var(--font-body); color: #fff; background: #000;
  border: 2px inset #555; border-right-color: #888; border-bottom-color: #888; border-radius: 0;
}
.bb-select { padding: 3px 4px; }
.bb-input[type="color"] { width: 44px; height: 26px; padding: 1px; }
.bb-input--short { max-width: 120px; }
.bb-input--mid { max-width: 280px; }
.bb-textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.bb-textarea--short { min-height: 60px; }
.bb-textarea--tall { min-height: 220px; }
.bb-input:focus, .bb-textarea:focus, .bb-select:focus { outline: 1px dotted var(--bb-cyan); outline-offset: 1px; }
.bb-input[aria-invalid="true"], .bb-textarea[aria-invalid="true"] { border-color: var(--eh-red); }
.bb-label { display: block; margin: 8px 0 2px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-cyan); }
.bb-label small { font-weight: normal; text-transform: none; color: var(--bb-muted); }
.bb-help { margin: 2px 0 0; font-size: 10px; color: var(--bb-muted); }
.bb-field-error { margin: 2px 0 0; font-size: 11px; font-weight: bold; color: #ff6a5e; }
.bb-check { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; font-size: 11px; }
.bb-check input { margin: 2px 0 0; flex: none; accent-color: var(--bb-cyan); }
.bb-form-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.bb-form-actions--left { justify-content: flex-start; }
.bb-fieldset { margin: 10px 0 0; padding: 6px 8px 8px; border: 1px solid #333; }
.bb-fieldset legend { padding: 0 4px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-pink); }
.bb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.bb-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-form-narrow { max-width: 420px; }
.bb-pw { position: relative; display: flex; gap: 4px; }
.bb-pw .bb-input { flex: 1; }
.bb-meter { margin: 4px 0 0; font-size: 10px; color: var(--bb-muted); }
.bb-meter b { font-family: var(--font-term); font-size: 14px; letter-spacing: -1px; }
.bb-meter .lvl0 { color: #ff6a5e; } .bb-meter .lvl1 { color: #ffa53d; } .bb-meter .lvl2 { color: var(--warn-yellow); } .bb-meter .lvl3, .bb-meter .lvl4 { color: var(--bb-lime); }
.bb-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bb-inline-form { display: inline; margin: 0; }
.bb-linkbtn { padding: 0; font: inherit; color: var(--bb-cyan); background: none; border: 0; text-decoration: none; }
.bb-linkbtn:hover { text-decoration: underline; color: #fff; }

.bb-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; }
.bb-toolbar .bb-btn98 { padding: 0 6px; min-height: 20px; font-size: 11px; border-width: 1px; }
.bb-toolbar img { image-rendering: pixelated; display: block; }
.bb-toolbar__sep { width: 1px; background: #808080; box-shadow: 1px 0 0 #fff; margin: 0 3px; }
.bb-toolbar select { height: 20px; font: 11px var(--font-body); background: #fff; border: 1px inset #808080; }
.bb-pop { position: relative; display: inline-block; }
.bb-pop__panel { position: absolute; left: 0; top: 100%; z-index: 20; display: grid; gap: 2px; padding: 4px; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: var(--hard-shadow); }
.bb-pop__panel--smilies { grid-template-columns: repeat(7, 26px); left: auto; right: 0; }
/* Stickers: la ventanita cuelga de la barra entera (no del botón), para que en móvil no se salga */
.bb-toolbar { position: relative; }
.bb-pop--stickers { position: static; }
.bb-pop__panel--stickers { grid-template-columns: repeat(6, 62px); grid-auto-rows: 54px; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; left: auto; right: 0; font-size: 11px; }
.bb-toolbar .bb-pop__panel--stickers .bb-btn98 { display: grid; place-items: center; padding: 2px; min-height: 0; }
.bb-toolbar .bb-pop__panel--stickers img { image-rendering: auto; width: auto; height: auto; max-width: 56px; max-height: 46px; }
@media (max-width: 480px) { .bb-pop__panel--stickers { left: 0; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); } }
.bb-pop__panel--colors { grid-template-columns: repeat(4, 24px); }
.bb-pop__panel--colors button { width: 24px; height: 20px; padding: 0; border: 1px solid #000; }
.bb-pop__panel--sizes { grid-template-columns: 1fr; min-width: 110px; }
.bb-editor__preview { margin-top: 6px; padding: 8px 10px; background: var(--bb-panel-2); border: 1px dashed var(--bb-cyan-edge); min-height: 40px; }
.bb-editor__preview:empty { display: none; }
.bb-editor__count { font-size: 10px; color: var(--bb-muted); }

.bb-flash { margin: 0; padding: 8px 10px; font-weight: bold; color: #000; border: 2px solid #000; }
.bb-flash a, .bb-flash a:visited { color: #000; text-decoration: underline; }
.bb-flash--warn { background: var(--warn-yellow) url(/s/assets/textures/caution-tape-kontuz.637afa364b.png) repeat-x 0 100%; padding-bottom: 32px; }
.bb-flash--ok { background: #c9ffd9; border-color: var(--eh-green); box-shadow: inset 0 0 0 2px #fff; }
.bb-flash--err { background: #ffd6d2; border-color: var(--eh-red); box-shadow: inset 0 0 0 2px #fff; }
.bb-flash--info { background: #d9fdff; border-color: var(--bb-cyan-edge); box-shadow: inset 0 0 0 2px #fff; }
.bb-flash--blink { animation: bb-blink 1.2s steps(1) infinite; }
.bb-flashes { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 0; }

/* ---------- tablas genéricas ---------- */
.bb-table { width: 100%; border-collapse: collapse; background: var(--bb-panel); font-size: 11px; }
.bb-table th { height: 22px; padding: 0 6px; text-align: left; background: var(--gel-cyan); color: #002024; font: var(--font-ui); text-transform: uppercase; letter-spacing: .5px; border: 1px solid var(--bb-cyan-edge); }
.bb-table td { padding: 5px 6px; border: 1px solid #262626; vertical-align: top; overflow-wrap: anywhere; }
.bb-table tr:nth-child(even) td { background: var(--bb-panel-2); }
.bb-table--kv th { width: 34%; background: #1c1c1c; color: var(--bb-cyan); border-color: #262626; }
.bb-table .num { text-align: right; }
.bb-table td.num { font: 16px/1 var(--font-term); color: var(--bb-cream); }
.bb-table-wrap { overflow-x: auto; }

/* ---------- forum ---------- */
.bb-crumbs { font-size: 11px; color: var(--bb-muted); margin: 0; overflow-wrap: anywhere; }
.bb-crumbs a { font-weight: bold; }
.bb-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-bar__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-search { display: flex; gap: 4px; margin: 0; }
.bb-search .bb-input { width: 180px; }
.bb-forum { width: 100%; border-collapse: collapse; border: 1px solid var(--bb-cyan-edge); box-shadow: var(--hard-shadow); background: var(--bb-panel); }
.bb-forum th {
  height: 24px; padding: 0 6px; text-align: center; background: var(--gel-cyan); color: #002024;
  font: var(--font-ui); letter-spacing: .5px; text-transform: uppercase; border: 1px solid var(--bb-cyan-edge);
}
.bb-forum th:first-child { text-align: left; }
.bb-forum td { padding: 6px; border: 1px solid #262626; vertical-align: middle; font-size: 11px; }
.bb-forum tbody tr:nth-child(even) td { background: var(--bb-panel-2); }
.bb-forum tbody tr:hover td { background: #1f2a2a; }
.bb-forum .cat td { padding: 4px 6px; background: #000 !important; color: var(--bb-cyan); font: var(--font-ui); text-transform: uppercase; letter-spacing: 1.5px; border-top: 2px solid var(--bb-cyan-edge); }
.bb-forum .cat img { vertical-align: -1px; margin-right: 3px; }
.bb-forum .ico { width: 34px; text-align: center; }
.bb-forum .ico img { display: block; margin: 0 auto; }
.bb-forum .num { width: 64px; text-align: center; font: 18px/1 var(--font-term); color: var(--bb-cream); font-variant-numeric: tabular-nums; }
.bb-forum .last { width: 170px; font-size: 10px; color: var(--bb-muted); }
.bb-forum .fname { font-weight: bold; font-size: 12px; overflow-wrap: anywhere; }
.bb-forum .fdesc { display: block; color: var(--bb-muted); font-size: 11px; }
.bb-forum .tmeta { display: block; color: var(--bb-muted); font-size: 10px; }
.bb-forum .is-hidden td { opacity: .55; }
.bb-forum .bb-badge { margin-left: 3px; }
.bb-forum__sub { display: block; margin-top: 2px; font-size: 10px; color: var(--bb-muted); }

.bb-pager { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; font-size: 11px; }
.bb-pager a, .bb-pager b, .bb-pager span.gap { padding: 0 5px; border: 1px solid #333; background: #111; }
.bb-pager span.gap { border-color: transparent; background: none; }
.bb-pager b { color: #000; background: var(--bb-cyan); border-color: var(--bb-cyan-edge); }

.bb-post { display: grid; grid-template-columns: 150px minmax(0, 1fr); border: 1px solid var(--bb-cyan-edge); background: var(--bb-panel); box-shadow: var(--hard-shadow); scroll-margin-top: 10px; }
.bb-post:target { outline: 2px dotted var(--bb-pink); outline-offset: 2px; }
.bb-post + .bb-post { margin-top: 10px; }
.bb-post__author { padding: 8px; background: var(--bb-panel-2); border-right: 1px solid #262626; font-size: 10px; color: var(--bb-muted); overflow-wrap: anywhere; }
.bb-post__nick { display: block; font-weight: bold; font-size: 12px; }
.bb-post__nick.admin, .bb-post__nick.admin:visited, .nick-admin, .nick-admin:visited { color: #ff4a3d; text-shadow: 0 0 1px #000; }
.bb-post__nick.mod, .bb-post__nick.mod:visited, .nick-mod, .nick-mod:visited { color: #19d36a; }
.bb-post__avatar { display: block; width: 100px; height: 100px; margin: 6px 0; object-fit: cover; border: 2px solid #000; outline: 1px solid var(--bb-cyan-edge); }
.bb-post__rank { color: var(--bb-cream); font-weight: bold; }
.bb-stars { color: var(--warn-yellow); letter-spacing: 1px; font-size: 11px; }
.bb-post__meta { display: block; }
.bb-post__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; background: #000; border-bottom: 1px solid #262626; font-size: 10px; color: var(--bb-muted); }
.bb-post__head b { color: #fff; font-size: 11px; overflow-wrap: anywhere; }
.bb-post__head a { color: var(--bb-muted); }
.bb-post__main { display: flex; flex-direction: column; min-width: 0; }
.bb-post__body { flex: 1; padding: 10px 12px; font-size: 12px; min-height: 120px; overflow-wrap: anywhere; }
.bb-post__edited { margin: 8px 0 0; font-size: 10px; font-style: italic; color: var(--bb-muted); }
.bb-post__sig { margin: 10px 12px 10px; padding-top: 4px; border-top: 1px solid #333; font-size: 10px; color: var(--bb-muted); max-height: 4.5em; overflow: hidden; }
.bb-post__sig .bbc-img { max-height: 60px; }
.bb-post__foot { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; padding: 4px 8px; border-top: 1px solid #262626; background: #0a0a0a; }
.bb-post__foot .bb-btn { padding: 2px 9px; }
.bb-post__foot .report { margin-right: auto; }
.bb-post__foot form { margin: 0; }
.bb-post--hidden { opacity: .6; border-style: dashed; }
.bb-post--deleted .bb-post__body { color: var(--bb-muted); font-style: italic; min-height: 0; }
.bb-modbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 6px; background: #1a1400; border: 1px dashed var(--warn-yellow); font-size: 10px; }
.bb-modbar b { font: var(--font-ui); color: var(--warn-yellow); text-transform: uppercase; }
.bb-modbar form { display: flex; gap: 3px; align-items: center; margin: 0; }
.bb-modbar .bb-input, .bb-modbar .bb-select { width: auto; padding: 1px 3px; font-size: 10px; }

.bb-whosonline { font-size: 11px; color: var(--bb-muted); }
.bb-whosonline b { color: #fff; }

/* ---------- contenido BBCode ---------- */
.bbc { overflow-wrap: anywhere; }
.bbc p { margin: 0 0 8px; }
.bbc ul, .bbc ol { margin: 4px 0 8px; padding-left: 22px; }
.bbc .smiley { vertical-align: -4px; image-rendering: pixelated; }
/* Stickers (memes y emo): fotos originales recortadas, a 2×; nada de pixelado */
.bbc .sticker { vertical-align: middle; image-rendering: auto; margin: 2px 1px; }
.bb-post__sig .sticker, .bb-gb-entry .sticker { width: auto; height: 30px; margin: 0; }
.bbc-img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; border: 1px solid #000; }
.bbc-quote, .bb-quote { margin: 6px 0; padding: 6px 8px; background: #000; border: 1px solid #333; border-left: 3px solid var(--bb-cyan); font-size: 11px; color: #ccc; }
.bbc-quote__by, .bb-quote cite { display: block; font: var(--font-ui); color: var(--bb-cyan); font-style: normal; margin-bottom: 3px; text-transform: none; }
.bbc-code { margin: 6px 0; padding: 6px 8px; overflow-x: auto; white-space: pre-wrap; font: 15px/1.15 var(--font-term); color: #39ff14; background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border: 1px inset #555; }
.bbc-spoiler { margin: 6px 0; border: 1px dashed #555; }
.bbc-spoiler > summary { padding: 2px 6px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-pink); background: #0a0a0a; }
.bbc-spoiler > div { padding: 6px 8px; }
.bbc-h2 { margin: 10px 0 6px; font: 24px/1.05 var(--font-display); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 var(--bb-purple); }
.bbc-h3 { margin: 8px 0 4px; font: 16px/1.1 var(--font-pixel); text-transform: uppercase; color: var(--bb-cyan); }
.bbc-center { text-align: center; }
.bbc a { overflow-wrap: anywhere; }
.c-red { color: #ff4a3d; } .c-orange { color: #ff9a1f; } .c-yellow { color: var(--warn-yellow); } .c-lime { color: var(--bb-lime); }
.c-green { color: #19d36a; } .c-cyan { color: var(--bb-cyan); } .c-blue { color: #5aa9ff; } .c-purple { color: #b48cff; }
.c-pink { color: var(--bb-pink); } .c-white { color: #fff; } .c-cream { color: var(--bb-cream); } .c-gray { color: var(--bb-muted); }
.c-gold { color: #ffc93c; } .c-magenta { color: #ff5cf4; } .c-teal { color: var(--bb-cyan-deep); } .c-brown { color: #c98a5a; }
.s-small { font-size: 10px; } .s-big { font-size: 16px; } .s-huge { font-size: 22px; line-height: 1.1; }
.bb-facade { margin: 6px 0; max-width: 480px; }

/* ---------- fanzine xerox (blog y páginas largas) ---------- */
.bb-xerox {
  position: relative; padding: 16px 18px; color: var(--ink); background: var(--paper);
  border: 1px solid #000; box-shadow: 4px 4px 0 #000; overflow: hidden;
}
.bb-xerox::after { content: ""; position: absolute; inset: 0; background: url(/s/assets/textures/xerox-grain-256.54a924c17f.png); opacity: .4; mix-blend-mode: multiply; pointer-events: none; }
.bb-xerox > * { position: relative; }
.bb-xerox a, .bb-xerox a:visited { color: #b3150a; text-decoration: underline; }
.bb-xerox a:hover { color: #000; }
.bb-xerox .bbc-quote { color: #222; background: #fff; border-color: #111; border-left-color: var(--eh-red); }
.bb-xerox .bbc-quote__by { color: var(--eh-red); }
.bb-xerox .bbc-h2 { color: var(--ink); text-shadow: 2px 2px 0 var(--bb-pink); }
.bb-xerox .bbc-h3 { color: var(--eh-red); }
.bb-xerox .c-white, .bb-xerox .c-cream { color: var(--ink); background: #fff; }
.bb-xerox .c-cyan, .bb-xerox .c-lime, .bb-xerox .c-yellow { color: var(--ink); background: var(--bb-cyan); padding: 0 2px; }
.bb-xerox .bbc-img { border: 4px solid #fff; box-shadow: 2px 2px 0 #000; }
.bb-xerox__title { margin: 0 0 4px; font: 40px/1.12 var(--font-display); text-transform: uppercase; color: var(--ink); letter-spacing: .5px; }
.bb-xerox__title span { background: var(--bb-cyan); padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bb-xerox__meta { margin: 0 0 12px; font: 16px/1 var(--font-term); color: #555; }
.bb-xerox__stamp { display: inline-block; padding: 1px 6px; font: 18px/1.1 var(--font-display); text-transform: uppercase; color: var(--eh-green); border: 3px solid var(--eh-green); transform: rotate(-4deg); }
.bb-xerox__cover { position: relative; float: right; width: 46%; margin: 0 0 10px 14px; padding: 6px; background: #fff; box-shadow: 3px 3px 0 #000; transform: rotate(1.5deg); }
.bb-xerox__cover img { display: block; width: 100%; height: auto; filter: grayscale(.2) contrast(1.1); }
.bb-xerox__cover::before, .bb-xerox__cover::after { content: ""; position: absolute; width: 58px; height: 16px; background: rgba(255, 255, 220, .7); top: -7px; }
.bb-xerox__cover::before { left: -14px; transform: rotate(-32deg); }
.bb-xerox__cover::after { right: -14px; transform: rotate(32deg); }
.bb-xerox__body { font: 13px/1.6 var(--font-body); max-width: 75ch; }
.bb-xerox .bb-table td { border-color: #bbb; }
.bb-xerox .bb-table tr:nth-child(even) td { background: #e9e5da; }

/* ---------- cuenta, paneles ---------- */
.bb-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--bb-cyan-edge); }
.bb-tabs a { display: block; padding: 4px 10px; font: var(--font-ui); text-transform: uppercase; color: #ccc; background: #1c1c1c; border: 1px solid #333; border-bottom: 0; }
.bb-tabs a:visited { color: #ccc; }
.bb-tabs a:hover { color: #fff; text-decoration: none; background: #262626; }
.bb-tabs a[aria-current="page"] { color: #002024; background: var(--gel-cyan); border-color: var(--bb-cyan-edge); }
.bb-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 11px; }
.bb-kv dt { font: var(--font-ui); text-transform: uppercase; color: var(--bb-cyan); }
.bb-kv dd { margin: 0; overflow-wrap: anywhere; }
.bb-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 8px 0; padding: 8px; font: 20px/1.1 var(--font-term); color: var(--bb-lime); background: #000; border: 2px inset #444; list-style: none; }
.bb-qr { display: inline-block; padding: 8px; background: #fff; border: 2px solid #000; box-shadow: var(--hard-shadow); }
.bb-qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.bb-secret { font: 18px/1.2 var(--font-term); color: var(--bb-lime); letter-spacing: 1px; overflow-wrap: anywhere; }
.bb-usercell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bb-usercell img { width: 24px; height: 24px; object-fit: cover; border: 1px solid #000; }
.bb-avatar-sm { width: 48px; height: 48px; object-fit: cover; border: 2px solid #000; outline: 1px solid var(--bb-cyan-edge); }
.bb-grid-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.bb-usercard { display: block; padding: 6px; text-align: center; font-size: 11px; background: var(--bb-panel-2); border: 1px solid #333; overflow-wrap: anywhere; }
.bb-usercard:hover { border-color: var(--bb-cyan); text-decoration: none; }
/* Solo el avatar: con `img` a secas el diamante de crew se estiraba en una barra. */
.bb-usercard img:first-child { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 4px; border: 2px solid #000; }
.bb-usercard small { display: block; color: var(--bb-muted); }
.bb-pill { display: inline-block; padding: 0 6px; font: var(--font-ui); text-transform: uppercase; color: #000; background: var(--bb-cyan); border: 1px solid #000; }
.bb-pill--pink { background: var(--bb-pink); color: #fff; }
.bb-pill--lime { background: var(--bb-lime); }
.bb-pill--yellow { background: var(--warn-yellow); }
.bb-pill--red { background: var(--eh-red); color: #fff; }
.bb-pill--gray { background: #555; color: #fff; }
.bb-pill--orange { background: #ff7a00; }

/* ---------- mapa de Euskal Herria ---------- */
.bb-map { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.bb-map a path, .bb-map a polygon { fill: #111; stroke: var(--bb-cyan); stroke-width: 2; transition: fill .1s steps(1); }
.bb-map a:hover path, .bb-map a:focus path, .bb-map a:hover polygon, .bb-map a:focus polygon { fill: var(--eh-green); }
.bb-map a.has-artists path, .bb-map a.has-artists polygon { fill: #1b0638; }
.bb-map text { font: 10px var(--font-pixel); fill: #fff; text-transform: uppercase; pointer-events: none; }
.bb-map text.count { font: 18px var(--font-term); fill: var(--bb-lime); }
.bb-map .border-line { fill: none; stroke: var(--warn-yellow); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bb-map polygon { stroke-linejoin: round; }
.bb-map a.has-artists:hover polygon, .bb-map a.has-artists:focus polygon { fill: var(--eh-green); }
.bb-map a:focus { outline: none; }
.bb-map a:focus polygon { stroke: var(--warn-yellow); stroke-dasharray: 3 2; }
.bb-map text.sm { font-size: 8px; }
.bb-map text.count.sm { font-size: 15px; }
.bb-map .sea { font: 15px var(--font-term); fill: var(--bb-cyan-deep); letter-spacing: 1px; }
.bb-map .sea.wave { fill: #0a5560; }
.bb-map .compass polygon { fill: var(--bb-cyan); }
.bb-map .compass polygon.s { fill: #333; }
.bb-map .compass text { font: 10px var(--font-pixel); fill: var(--bb-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .bb-map .sea.wave { animation: bb-wave 2.4s steps(4) infinite; }
}
@keyframes bb-wave { 50% { transform: translateX(6px); } }

/* ---------- modal Win98/XP (CMS, confirmaciones) ---------- */
.bb-modal-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .6) url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); }
.bb-modal { position: fixed; left: 50%; top: 40px; z-index: 41; width: min(720px, calc(100vw - 16px)); max-height: calc(100vh - 60px); overflow: auto; transform: translateX(-50%); color: #000; background: #ece9d8; border: 2px solid #0a246a; box-shadow: 6px 6px 0 #000; }
.bb-modal__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 4px 3px 8px; font: bold 12px Tahoma, sans-serif; color: #fff; background: linear-gradient(#0a5fd8, #0a3fa6); text-shadow: 1px 1px 0 #000; }
.bb-modal__bar a.close, .bb-modal__bar a.close:visited { display: grid; place-items: center; width: 20px; height: 18px; font: bold 12px/1 Tahoma, sans-serif; color: #fff; background: linear-gradient(#e8664f, #c1300f); border: 1px solid #fff; border-radius: 3px; text-decoration: none; }
.bb-modal__body { padding: 10px; font: 11px Tahoma, Verdana, sans-serif; }
.bb-modal .bb-label { color: #0a246a; }
.bb-modal .bb-help { color: #555; }
.bb-modal .bb-input, .bb-modal .bb-textarea, .bb-modal .bb-select { color: #000; background: #fff; border-color: #7f9db9; border-style: solid; border-width: 1px; }
.bb-modal .bb-fieldset { border-color: #aca899; }
.bb-modal .bb-fieldset legend { color: #0a246a; }
.bb-modal .bb-editor__preview { color: #fff; background: #111; }

/* ---------- 404 / 500 ---------- */
.bb-error { padding: 20px; text-align: center; }
.bb-error__code { margin: 0; font: 120px/0.9 var(--font-display); color: var(--bb-pink); -webkit-text-stroke: 2px #000; text-shadow: 6px 6px 0 var(--bb-purple), 10px 10px 0 #000; }
.bb-error__msg { margin: 10px 0 14px; font: 26px/1.1 var(--font-term); color: var(--bb-lime); }
.bb-error__bsod { max-width: 520px; margin: 0 auto 14px; padding: 10px 14px; text-align: left; font: 16px/1.25 var(--font-term); color: #fff; background: #0000aa; border: 2px solid #fff; }

/* ---------- footer ---------- */
.bb-footer { border-top: 1px solid #222; }
.bb-footer__tape { height: 26px; background: url(/s/assets/textures/caution-tape-kontuz.637afa364b.png) repeat-x; animation: bb-tape 20s linear infinite; }
.bb-footer__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px; }
.bb-footer__buttons img { image-rendering: pixelated; display: block; }
.bb-footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 12px 10px; font-size: 10px; color: #666; }
.bb-footer__legal nav { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.bb-footer__legal nav a, .bb-footer__legal nav a:visited, .bb-footer__legal nav button { color: #888; }
.bb-footer__legal nav button { padding: 0; font: 10px var(--font-body); background: none; border: 0; }
.bb-footer__legal nav button:hover { color: #fff; text-decoration: underline; }
.bb-footer__legal form { display: inline; margin: 0; }
.bb-credit { margin: 0; font: 8px var(--font-pixel); color: #444; white-space: nowrap; }
.bb-credit a, .bb-credit a:visited { color: #444; }
.bb-credit a:hover { color: var(--bb-cyan); text-decoration: none; }
.bb-quiet { font: 8px var(--font-pixel); color: #666; }

/* ---------- efectos (estela del cursor, purpurina, nieve, corazones, burbujas) ---------- */
.fx-layer { position: fixed; inset: 0; z-index: 35; overflow: hidden; pointer-events: none; }
.fx-star { position: fixed; z-index: 36; width: 9px; height: 9px; pointer-events: none; background: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png) center / contain no-repeat; image-rendering: pixelated; animation: fx-star .7s linear forwards; }
.fx-flake, .fx-heart, .fx-bubble, .fx-glitter { position: absolute; top: -20px; pointer-events: none; animation: fx-fall linear infinite; }
.fx-flake { width: 6px; height: 6px; background: #fff; box-shadow: 0 0 3px #fff; }
.fx-heart { width: 16px; height: 16px; background: url(/s/assets/icons/heart-pixel-pink-16.35403d68a0.png) center / contain no-repeat; image-rendering: pixelated; animation-name: fx-rise; top: auto; bottom: -20px; }
.fx-bubble { width: 18px; height: 18px; border: 1px solid rgba(230, 255, 255, .8); border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(3, 247, 254, .15) 40%, transparent 70%); animation-name: fx-rise; top: auto; bottom: -24px; }
.fx-glitter { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 4px var(--bb-cyan); animation-name: fx-twinkle; }

/* ---------- animaciones ---------- */
@keyframes bb-tape { to { background-position: -322px 0; } }
@keyframes bb-blink { 50% { opacity: 0; } }
@keyframes bb-viz { to { transform: scaleY(.3); transform-origin: bottom; } }
@keyframes fx-star { to { opacity: 0; transform: translateY(14px) scale(.4); } }
@keyframes fx-fall { to { transform: translateY(110vh); } }
@keyframes fx-rise { to { transform: translateY(-110vh); } }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.blink { animation: bb-blink 1s steps(1) infinite; }

/* ---------- modo tranquilo (cookie) y reduced motion ---------- */
html.is-quiet .bb-header { background-image: url(/s/assets/textures/sparkle-tile-black.still.bb06af129b.png); }
html.is-quiet .bb-marquee__track, html.is-quiet .bb-footer__tape, html.is-quiet .bb-tape-divider,
html.is-quiet .blink, html.is-quiet .bb-header__meta .cursor, html.is-quiet .bb-flash--blink, html.is-quiet .bb-player.is-loading .bb-player__viz i { animation: none; }
html.is-quiet .fx-layer, html.is-quiet .fx-star { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bb-marquee__track, .bb-footer__tape, .bb-tape-divider, .blink, .bb-header__meta .cursor, .bb-flash--blink, .bb-player.is-loading .bb-player__viz i { animation: none; }
  .fx-layer, .fx-star { display: none; }
}

/* ---------- responsive (DESIGN.md §9) ---------- */
@media (max-width: 980px) {
  body { padding-top: 8px; }
  .bb-page { width: auto; max-width: 960px; margin-left: 8px; margin-right: 8px; }
}
@media (max-width: 760px) {
  /* Cabecera compacta: logo | lema | ikurriña e idioma, en rejilla (logo y bandera nunca se tocan). */
  .bb-header, .bb-header--section, .bb-header--compact {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 6px 10px;
    height: auto; min-height: 0; padding: 8px 8px 8px 10px;
  }
  .bb-header__logo-link { position: static; grid-column: 1; grid-row: 1 / span 2; }
  .bb-header__logo, .bb-header--section .bb-header__logo { width: 96px; height: auto; }
  .bb-header--compact .bb-header__logo { width: 60px; height: auto; }
  .bb-header__claim, .bb-header--section .bb-header__claim, .bb-header--compact .bb-header__claim { position: static; grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 24px; line-height: .95; overflow-wrap: anywhere; }
  .bb-header__claim small { margin-top: 4px; font-size: 13px; line-height: 1.05; letter-spacing: 1.5px; }
  .bb-header__meta, .bb-header__gems, .bb-header__burst { display: none; }
  .bb-header__flag, .bb-header--compact .bb-header__flag { position: static; grid-column: 3; grid-row: 1; justify-self: end; align-self: start; width: 54px; height: auto; }
  .bb-lang, .bb-header:not(.bb-header--section):not(.bb-header--compact) .bb-lang { position: static; grid-column: 3; grid-row: 2; justify-self: end; align-self: end; }
  .bb-lang button { min-width: 40px; height: 34px; padding: 0 8px; font-size: 11px; }

  .bb-cols { display: flex; flex-direction: column; }
  .bb-side { display: contents; }
  .bb-main { order: 1; }
  .bb-side > * { order: 2; }
  .bb-side > .bb-window--event { order: 0; }
  .bb-two, .bb-three, .bb-release, .bb-form-grid, .bb-form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .bb-event { grid-template-columns: 64px minmax(0, 1fr); }
  .bb-event__flyer { height: 64px; font-size: 13px; }
  .bb-event__ftext--l { font-size: 15px; }
  .bb-event__ftext--m { font-size: 12px; }
  .bb-event__ftext--s { font-size: 10px; }
  .bb-event__burst { grid-column: 2; width: 48px; height: 48px; }
  .bb-event__date { font-size: 22px; }

  /* Foro: filas apiladas, una tarjeta por subforo */
  .bb-forum thead, .bb-forum .num, .bb-forum .last { display: none; }
  .bb-forum .tmeta--mobile { display: block; }
  .bb-post { grid-template-columns: minmax(0, 1fr); }
  .bb-post__author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; border-right: 0; border-bottom: 1px solid #262626; }
  .bb-post__avatar { width: 48px; height: 48px; margin: 0; }
  .bb-post__meta { display: none; }
  .bb-post__foot .bb-btn { min-height: 40px; padding: 4px 12px; }

  .bb-kv { grid-template-columns: minmax(0, 1fr); }
  /* Listas con acciones (Top 8, peticiones...): si no caben, los botones bajan a su propia línea. */
  .bb-list li { flex-wrap: wrap; }
  .bb-list .meta { white-space: normal; }
  .bb-grid-users { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .bb-footer__legal { flex-direction: column; gap: 6px; align-items: flex-start; }
  /* Botones de 40 px de alto como mínimo (DESIGN.md §9), con el texto centrado. */
  .bb-btn, .bb-btn98 { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; }
  .bb-btn { padding-top: 4px; padding-bottom: 4px; }
  .bb-toolbar .bb-btn98 { min-height: 36px; padding: 0 9px; }
  /* 16 px para que el móvil no haga zoom al escribir. Los textarea conservan su alto (antes se quedaban en 36 px). */
  .bb-input, .bb-select { min-height: 40px; font-size: 16px; }
  .bb-textarea { font-size: 16px; }
  .bb-search .bb-input { width: 100%; }
  .bb-search { flex: 1; }
  .bb-xerox__cover { float: none; width: auto; margin: 0 0 12px; }
  .bb-xerox__title { font-size: 30px; }
  .bb-error__code { font-size: 80px; }
  .bb-tabs a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; }
  .bb-codes { grid-template-columns: minmax(0, 1fr); }

  /* La próxima fiesta sube arriba, pero compacta. Las cajas del sidebar que repiten la página (.is-here) no salen. */
  .bb-window--event .bb-flyer { min-height: 104px; }
  .bb-window--event .bb-flyer__title { font-size: 24px; }
  .bb-window--event .bb-flyer__burst { width: 58px; height: 58px; }
  .bb-window--event .bb-countdown b { font-size: 20px; }
  .bb-side .is-here { display: none; }
  /* Objetivos táctiles de 40 px: paginación, enlaces legales y webring. */
  .bb-pager { gap: 4px; font-size: 12px; }
  .bb-pager a, .bb-pager b, .bb-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 10px; }
  .bb-footer__legal nav { gap: 0 2px; }
  .bb-footer__legal nav a, .bb-footer__legal nav button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; font-size: 11px; }
  .bb-webring a { display: inline-flex; align-items: center; min-height: 40px; }
  .bb-post__body { min-height: 56px; }
}
@media (min-width: 761px) { .tmeta--mobile, .bb-forum .tmeta--mobile { display: none; } }
@media (hover: none) { .fx-star { display: none; } }

/* =====================================================================
   PERFILES MySpace (.pf-*). Solo consumen variables --pf-* generadas por
   el servidor desde tokens validados; nada de CSS del usuario.
   ===================================================================== */
body.is-profile .bb-page { background: transparent; }
body.is-profile .bb-footer { background: #000; }
.pf-wrap { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 0; }
/* Acciones de la WEB, fuera del contenedor del tema: siempre visibles y con estilo BB. */
.pf-safebar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0; }
.pf-safebar form { margin: 0; }
.pf-safebar a, .pf-safebar button, .pf-safe-actions a, .pf-safe-actions button {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font: var(--font-ui); text-transform: uppercase; text-decoration: none;
  color: #fff; background: #111; border: 1px solid #555; cursor: var(--cur-hand);
}
.pf-safebar a:visited, .pf-safe-actions a:visited { color: #fff; }
.pf-safebar .report, .pf-safe-actions .report { color: #000; background: var(--warn-yellow); border-color: #000; }
.pf-safebar a:hover, .pf-safebar button:hover, .pf-safe-actions a:hover, .pf-safe-actions button:hover { filter: brightness(1.2); text-decoration: none; }

.pf {
  contain: layout paint; isolation: isolate; position: relative; overflow: hidden; min-width: 0;
  font-family: var(--pf-font); font-size: var(--pf-size); color: var(--pf-text); cursor: var(--pf-cursor);
}
.pf a, .pf a:visited { color: var(--pf-link); cursor: var(--cur-hand); }
.pf a:hover { color: var(--pf-accent); }
.pf--scanlines::after { content: ""; position: absolute; inset: 0; background: url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); opacity: .35; pointer-events: none; }
.pf-banner {
  position: relative; display: flex; align-items: flex-end; gap: 10px; min-height: 170px; padding: 12px 16px; overflow: hidden;
  border: var(--pf-border-w) var(--pf-border-style) var(--pf-border); border-radius: var(--pf-radius);
  /* El lado oscuro es el color de las cajas con un 25 % de negro (no negro puro): así el nick se lee
     también en temas claros, y el aviso de contraste (theme-contrast.js, bannerDark) mide lo mismo. */
  background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--pf-accent) 55%, transparent), transparent 45%), radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--pf-link) 55%, transparent), transparent 50%), linear-gradient(120deg, var(--pf-box), color-mix(in srgb, var(--pf-box) 75%, #000) 70%);
}
/* Cajas claras sin foto de banner: nick oscuro sin contorno negro, con sombra dura del color de detalles. */
.pf--light:not(.pf--banner-transparente) .pf-banner:not(.pf-banner--img) h1 { -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--pf-accent); }
.pf-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-banner h1 { position: relative; margin: 0; font: 56px/0.9 var(--font-display); text-transform: uppercase; color: var(--pf-header); -webkit-text-stroke: 1px #000; text-shadow: 3px 3px 0 var(--pf-border), 6px 6px 0 #000; overflow-wrap: anywhere; }
.pf-mood { position: relative; margin-left: auto; max-width: 55%; padding: 2px 8px; font: 20px/1.1 var(--font-term); color: var(--pf-accent); background: rgba(0, 0, 0, .65); border: 1px solid var(--pf-accent); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-mood--marquee { text-overflow: clip; }
.pf-mood--marquee span { display: inline-block; padding-left: 100%; animation: pf-mood 14s linear infinite; }
@keyframes pf-mood { to { transform: translateX(-100%); } }
.pf-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.pf-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-box { background: color-mix(in srgb, var(--pf-box) calc(var(--pf-box-alpha) * 100%), transparent); border: var(--pf-border-w) var(--pf-border-style) var(--pf-border); border-radius: var(--pf-radius); overflow: hidden; min-width: 0; }
.pf-box > h2 { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0; padding: 0 8px; min-height: 24px; font: 16px/24px var(--font-pixel); text-transform: uppercase; color: var(--pf-title-fg); background: var(--pf-title-bg, var(--pf-title)); overflow: hidden; white-space: nowrap; }
.pf-box > h2::before { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.pf--title-flat .pf-box > h2::before { display: none; }
.pf-box > h2 small { position: relative; font: var(--font-ui); text-transform: none; }
.pf-box > div { padding: 8px; overflow-wrap: anywhere; }
.pf-box > div.pf-flush { padding: 0; }
/* Sin fondo propio: un avatar con transparencia (PNG, GIF, WebP con alfa) se ve sobre lo que tenga detrás. */
.pf-avatar { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid #000; outline: 2px solid var(--pf-border); }
.pf-facts { margin: 8px 0 0; line-height: 1.6; }
.pf-facts b { color: var(--pf-accent); }
/* "Detrás de tu foto: transparente" (tema, avatarBg): la caja de la foto no pinta fondo y se ve el de la
   página (textura, imagen subida o escena animada); los datos de debajo llevan el de las cajas para leerse. */
.pf--avatar-transparente .pf-id { background: none; }
.pf--avatar-transparente .pf-facts { padding: 6px 8px; background: color-mix(in srgb, var(--pf-box) calc(var(--pf-box-alpha) * 100%), transparent); }
/* Lo mismo detrás del banner (bannerBg): sin su degradado, se ve el fondo de la página donde la foto es
   transparente (o en todo el banner si no hay foto). El borde se queda y el nick conserva su contorno negro. */
.pf--banner-transparente .pf-banner { background: none; }
.pf-details { width: 100%; border-collapse: collapse; font-size: 11px; }
.pf-details th { width: 42%; text-align: left; padding: 3px 6px; font-weight: bold; color: var(--pf-text); background: color-mix(in srgb, var(--pf-title) 22%, var(--pf-box)); /* texto normal: su contraste con las cajas ya se vigila en el editor */ border: 1px solid var(--pf-border); vertical-align: top; }
.pf-details td { padding: 3px 6px; border: 1px solid var(--pf-border); overflow-wrap: anywhere; }
.pf-top8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 11px; }
.pf-top8 a { display: block; overflow-wrap: anywhere; }
.pf-top8 img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid #000; outline: 1px solid var(--pf-border); margin-bottom: 3px; }
.pf-top8__empty { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 3px; font: 28px var(--font-term); color: var(--pf-border); border: 2px dashed var(--pf-border); }
.pf-top8__slot { opacity: .7; }
.pf-top8__slot:hover, .pf-top8__slot:focus { opacity: 1; }
.pf-top8__none, .pf-top8__note { margin: 0; font-size: 11px; color: var(--pf-text); opacity: .8; }
.pf-top8__note { margin-top: 6px; text-align: right; }
.pf-comment { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 8px; border-bottom: 1px dotted var(--pf-border); }
.pf-comment > a > img { width: 80px; height: 80px; object-fit: cover; border: 2px solid #000; }
.pf-comment time { display: block; font-size: 10px; opacity: .75; margin-bottom: 4px; }
.pf-comment form { display: inline; margin: 0; }
.pf-comment .bb-linkbtn { font-size: 10px; color: var(--pf-link); }
.pf-wall-head { margin: 0; padding: 6px 8px; font-size: 11px; border-bottom: 1px dotted var(--pf-border); }
.pf-wall-form { padding: 8px; border-top: 1px dotted var(--pf-border); }
.pf-wall-form .bb-textarea { min-height: 70px; }
.pf-safe-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pf .pf-safe-actions a, .pf .pf-safe-actions a:visited, .pf .pf-safe-actions a:hover { color: #fff; } /* caja de la web: no hereda el color de enlaces del tema */
.pf-safe-actions form { margin: 0; }
.pf-safe-actions a, .pf-safe-actions button { width: 100%; }
.pf-blinkies { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pf-blinkies img { image-rendering: pixelated; display: block; }
.pf-online { display: inline-block; margin-top: 4px; }
.pf .bb-player { box-shadow: none; }
.pf .bbc-quote { color: inherit; background: rgba(0, 0, 0, .35); }
.pf .bb-list li:nth-child(even) { background: transparent; }
.pf .bb-list li { border-bottom-color: var(--pf-border); }
.pf .bb-list .meta { color: var(--pf-text); }

/* Perfil: barra del dueño (fuera del tema, con el estilo de la web) */
.pf-ownerbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 6px 8px; font-size: 11px; color: #fff; background: #000; border: 1px solid var(--bb-cyan-edge); box-shadow: var(--hard-shadow); }
.pf-ownerbar p { flex: 1 1 260px; margin: 0; }
.pf-ownerbar b { color: var(--bb-cyan); }
.pf-ownerbar__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-ownerbar--visitor { border: 2px solid var(--warn-yellow); }
.pf-ownerbar--visitor b { color: var(--warn-yellow); }
.pf-owner-hint { margin: 0; font-size: 11px; }
.pf-top8__count { margin: 0 0 6px; font-size: 11px; }

/* Editor de perfil y tema (/cuenta/perfil): asistente por pasos con vista previa en vivo */
#pe-theme, #pe-preset-form { display: none; } /* vacíos: sus campos van repartidos con form="..." */
.pe { display: flex; flex-direction: column; gap: 10px; }
.pe-steps ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.pe-steps a { display: flex; align-items: center; gap: 6px; height: 100%; padding: 4px 8px 4px 4px; font: var(--font-ui); text-transform: uppercase; color: #fff; background: var(--gel-black); border: 1px solid #000; box-shadow: var(--hard-shadow); text-decoration: none; }
.pe-steps a:visited { color: #fff; }
.pe-steps a:hover { color: var(--bb-cyan); text-decoration: none; }
.pe-steps b, .pe-num { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; font: 16px/1 var(--font-display); color: #000; text-shadow: none; background: var(--warn-yellow); border: 1px solid #000; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.pe-num { margin-right: 8px; }
.pe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start; }
.pe-main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pe-side { grid-column: 2; grid-row: 1; position: sticky; top: 10px; z-index: 7; min-width: 0; }
.pe-step { scroll-margin-top: calc(var(--pe-sticky, 0px) + 10px); }
.pe-lead { max-width: 75ch; margin: 0 0 8px; color: var(--bb-cream); }
.pe-saved { margin: 0 0 8px; }
.pe-sub { margin: 0; font: var(--font-ui); text-transform: uppercase; color: var(--bb-cyan); }
.pe-what { margin: 2px 0 6px; font-size: 11px; }

/* Vista previa: un mini-perfil que se pinta con las mismas variables --pf-* que el perfil de verdad */
.pe-preview > summary { list-style: none; cursor: var(--cur-hand); }
.pe-preview > summary::-webkit-details-marker { display: none; }
.pe-preview__toggle { position: relative; font: bold 10px var(--font-body); }
.pe-preview__toggle::before { content: "▲"; }
.pe-preview:not([open]) .pe-preview__toggle::before { content: "▼"; }
#pf-preview-bg { position: relative; padding: 8px; overflow: hidden; border: 2px inset #444; }
#pf-preview { font-family: var(--pf-font); font-size: var(--pf-size); color: var(--pf-text); }
#pf-preview a { color: var(--pf-link); }
#pf-preview .pf-banner { flex-wrap: wrap; gap: 4px; min-height: 64px; padding: 6px 8px; }
#pf-preview .pf-banner h1 { font-size: 26px; }
#pf-preview .pf-mood { margin-left: 0; max-width: 100%; font-size: 15px; }
.pe-pv { display: grid; gap: 6px; margin-top: 6px; }
.pe-pv .pf-box > div { padding: 6px; }
.pe-pv__avatar { float: left; width: 40px; height: 40px; margin: 0 6px 2px 0; object-fit: cover; border: 2px solid #000; }
.pe-pv__text { margin: 0; line-height: 1.35; }
.pe-pv__text b { color: var(--pf-accent); }
.pe-pv .pf-top8 { gap: 4px; }
.pe-pv .pf-top8__empty { margin: 0; font-size: 18px; }
/* Zona resaltada al pasar por un color: lo demás se oscurece y la zona sale con borde KONTUZ */
#pf-preview::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; }
#pf-preview-bg[data-hl]:not([data-hl="bg"]) #pf-preview::after { opacity: 1; }
#pf-preview-bg[data-hl="box"] [data-zone~="box"], #pf-preview-bg[data-hl="border"] [data-zone~="border"],
#pf-preview-bg[data-hl="title"] [data-zone~="title"], #pf-preview-bg[data-hl="titleText"] [data-zone~="titleText"],
#pf-preview-bg[data-hl="text"] [data-zone~="text"], #pf-preview-bg[data-hl="link"] [data-zone~="link"],
#pf-preview-bg[data-hl="accent"] [data-zone~="accent"], #pf-preview-bg[data-hl="headerText"] [data-zone~="headerText"] {
  position: relative; z-index: 4; outline: 2px dashed var(--warn-yellow); outline-offset: 1px;
}
#pf-preview-bg[data-hl="bg"] { outline: 3px dashed var(--warn-yellow); outline-offset: -5px; }
#pf-preview-bg[data-hl="bg"] #pf-preview { opacity: .3; }
.pe-preview__now { margin: 6px 0 0; font: var(--font-ui); text-transform: uppercase; color: var(--warn-yellow); }
.pe-preview__actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }

/* 1. Galería de temas: miniatura = barra con el nombre (b) + fondo (i) con una cajita dentro.
   Contrato: .pe-preset--<clave> b {...} y .pe-preset--<clave> i {...} a mano ganan a las muestras
   generadas (:where(), /tema-editor/<hash>.css), que salen solas para cualquier preset nuevo. */
.pe-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pe-preset { position: relative; display: block; width: 100%; padding: 0; font: inherit; text-align: left; color: #fff; background: #000; border: 2px solid #000; box-shadow: var(--hard-shadow); cursor: var(--cur-hand); }
.pe-preset b { display: block; height: 22px; padding: 0 6px; font: var(--font-ui); line-height: 22px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #000; }
.pe-preset i { position: relative; display: block; height: 84px; background-color: #111; image-rendering: pixelated; }
.pe-preset__win { position: absolute; inset: 14px 16px 12px; overflow: hidden; background: var(--pp-box, #111); border: 2px solid var(--pp-border, #333); border-radius: var(--pp-radius, 0); }
.pe-preset__win span { display: block; }
.pe-preset__win span:nth-child(1) { height: 10px; background: var(--pp-title-bg, #555); }
.pe-preset__win span:nth-child(2) { width: 70%; height: 3px; margin: 8px 8px 0; background: var(--pp-text, #fff); }
.pe-preset__win span:nth-child(3) { width: 40%; height: 3px; margin: 6px 8px 0; background: var(--pp-link, #03f7fe); }
.pe-preset:hover, .pe-preset:focus-visible { outline: 2px dotted var(--bb-cyan); outline-offset: 2px; }
.pe-preset[aria-current="true"] { border-color: var(--warn-yellow); }
.pe-preset[aria-current="true"]::after { content: "✓"; position: absolute; top: -9px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; font: bold 13px/1 var(--font-body); color: #000; background: var(--warn-yellow); border: 1px solid #000; border-radius: 50%; }
.pe-preset--ciber-cian b { background: var(--gel-cyan); color: #002024; } .pe-preset--ciber-cian i { background: url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); }
.pe-preset--ikurrina b { background: #009a44; color: #000; } .pe-preset--ikurrina i { background: #da291c url(/s/assets/flags/ikurrina-pixel-25x14.463d5a85d8.png) center / 50px 28px; }
.pe-preset--glitter-rosa b { background: var(--gel-pink); color: #4a0026; }
.pe-preset--fotocopia-punk b { background: #111; color: #fff; } .pe-preset--fotocopia-punk i { background: #f2efe6 url(/s/assets/textures/xerox-grain-256.54a924c17f.png); }
.pe-preset--frutiger-aero b { background: var(--gel-cyan); color: #002024; } .pe-preset--frutiger-aero i { background: linear-gradient(#050b14, #0b2a3a); }
.pe-preset--vista-glass b { background: var(--gel-black); color: #fff; } .pe-preset--vista-glass i { background: linear-gradient(#bfe6ff, #5aa9e6); }
.pe-preset--ajedrez-ska b { background: #fff; color: #000; } .pe-preset--ajedrez-ska i { background: url(/s/assets/textures/checker-punk-32.5de02816d5.png); }
.pe-preset--noche-de-bilbo b { background: #7a2cff; color: #fff; }
.pe-restart { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11px; color: var(--bb-muted); }

/* 2. Fotos */
.pe-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pe-img { display: flex; flex-direction: column; min-width: 0; padding: 8px; background: #0a0a0a; border: 1px solid #262626; }
.pe-img form { margin: 0; }
.pe-detras { margin: 8px 0 0; padding: 6px 8px; border: 1px dotted #444; }
.pe-detras legend { padding: 0 4px; }
.pe-detras .bb-check { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0; }
.pe-img figure { display: grid; place-items: center; height: 110px; margin: 0 0 4px; overflow: hidden; background: #000 url(/s/assets/textures/checker-punk-32.5de02816d5.png); border: 2px inset #444; }
.pe-img figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pe-img--avatar figure img { width: 100px; height: 100px; object-fit: cover; }
.pe-img .bb-label { margin-top: 4px; }
.pe-file { width: 100%; font-size: 11px; color: var(--bb-muted); }
.pe-file::file-selector-button { margin-right: 6px; padding: 3px 8px; font: 11px var(--font-body); color: #000; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; cursor: var(--cur-hand); }
.pe-img__actions, .pe-img__rm { margin-top: 6px; }
/* Con el editor de recorte el botón "Subir" sobra: al elegir la foto se abre la ventana. */
form.has-crop .pe-img__actions { display: none; }

/* Editor de recorte (image-crop.js): ventana gel rosa en un <dialog> modal. La foto se mueve por debajo
   de un marco fijo con hormigas en marcha, rejilla de tercios y esquinas de visor; lo de fuera se oscurece. */
html.bb-noscroll { overflow: hidden; }
.bb-crop { width: min(720px, calc(100vw - 16px)); max-width: none; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); margin: auto; padding: 0; overflow: auto; color: var(--bb-white); background: var(--bb-panel); border: 1px solid #c2146f; box-shadow: 6px 6px 0 #000; }
.bb-crop::backdrop { background: rgba(0, 0, 0, .72) url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); }
.bb-crop .bb-window__bar { position: sticky; top: 0; z-index: 2; }
.bb-crop__x {
  position: relative; display: grid; place-items: center; width: 20px; height: 18px; padding: 0;
  font: bold 12px/1 Tahoma, sans-serif; color: #fff; background: linear-gradient(#e8664f, #c1300f); border: 1px solid #fff; border-radius: 3px; cursor: var(--cur-hand);
}
.bb-crop__x:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
.bb-crop__body { display: grid; gap: 8px; }
.bb-crop__hint { margin: 0; font-size: 11px; color: var(--bb-cream); }
.bb-crop__main { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; align-items: start; }
.bb-crop--banner .bb-crop__main { grid-template-columns: minmax(0, 1fr); }
.bb-crop__stage {
  position: relative; height: min(360px, 56vh); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: grab; background: #000 url(/s/assets/textures/checker-punk-32.5de02816d5.png); border: 2px inset #444;
}
.bb-crop--banner .bb-crop__stage { height: min(250px, 42vh); }
.bb-crop__stage.is-dragging { cursor: grabbing; }
.bb-crop__stage:focus-visible { outline: 1px dotted var(--bb-cyan); outline-offset: 2px; }
.bb-crop__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.bb-crop__frame { position: absolute; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .62); pointer-events: none; }
.bb-crop__frame::before {
  content: ""; position: absolute; inset: -1px;
  background:
    linear-gradient(90deg, #fff 50%, #000 0) 0 0 / 8px 1px repeat-x, linear-gradient(90deg, #fff 50%, #000 0) 0 100% / 8px 1px repeat-x,
    linear-gradient(#fff 50%, #000 0) 0 0 / 1px 8px repeat-y, linear-gradient(#fff 50%, #000 0) 100% 0 / 1px 8px repeat-y;
}
.bb-crop__frame::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(3, 247, 254, .5) 0 33.33%, transparent 0 calc(66.67% - 1px), rgba(3, 247, 254, .5) 0 66.67%, transparent 0),
    linear-gradient(transparent calc(33.33% - 1px), rgba(3, 247, 254, .5) 0 33.33%, transparent 0 calc(66.67% - 1px), rgba(3, 247, 254, .5) 0 66.67%, transparent 0);
}
.bb-crop__frame i { position: absolute; z-index: 1; width: 14px; height: 14px; border: 3px solid var(--bb-cyan); filter: drop-shadow(1px 1px 0 #000); }
.bb-crop__frame i:nth-child(1) { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.bb-crop__frame i:nth-child(2) { right: -5px; top: -5px; border-left: 0; border-bottom: 0; }
.bb-crop__frame i:nth-child(3) { left: -5px; bottom: -5px; border-right: 0; border-top: 0; }
.bb-crop__frame i:nth-child(4) { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.bb-crop__msg:empty { display: none; }
.bb-crop__msg { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; margin: 0; padding: 4px 8px; font: 20px/1.1 var(--font-term); color: var(--bb-lime); background: #000; border: 1px solid var(--bb-lime); box-shadow: var(--hard-shadow); }
.bb-crop__msg--busy::after { content: "_"; }
.bb-crop__msg--err { font: 12px/1.45 var(--font-body); color: #000; background: var(--warn-yellow); border-color: #000; }
.bb-crop__result { display: grid; gap: 6px; margin: 0; padding: 6px; background: #0a0a0a; border: 1px solid #262626; }
.bb-crop__result figcaption { font: var(--font-ui); text-transform: uppercase; color: var(--bb-lime); }
.bb-crop__minis { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bb-crop__shot { display: grid; flex: none; gap: 4px; justify-items: start; }
.bb-crop__shot[hidden] { display: none; }
.bb-crop__shot small { font: var(--font-ui); text-transform: uppercase; color: var(--bb-muted); }
.bb-crop__shot--banner { width: min(100%, 480px); }
.bb-crop__mini { position: relative; display: block; overflow: hidden; background: #000 url(/s/assets/textures/checker-punk-32.5de02816d5.png); }
.bb-crop__mini img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.bb-crop__mini--avatar { width: 100px; height: 100px; border: 3px solid #000; outline: 2px solid var(--bb-pink); }
.bb-crop__mini--forum { width: 48px; height: 48px; border: 1px solid #000; outline: 1px solid var(--bb-line); }
.bb-crop__mini--banner { display: flex; align-items: flex-end; width: 100%; aspect-ratio: 3 / 1; padding: 6px 10px; border: 2px solid var(--bb-pink); }
.bb-crop__mini--banner b { position: relative; font: 32px/.9 var(--font-display); text-transform: uppercase; color: #fff; -webkit-text-stroke: 1px #000; text-shadow: 2px 2px 0 var(--bb-pink), 4px 4px 0 #000; overflow-wrap: anywhere; }
.bb-crop__tools { display: flex; align-items: center; gap: 6px; }
.bb-crop__tools .bb-btn98 { min-width: 28px; }
.bb-crop__tools input[type="range"] { flex: 1; min-width: 0; accent-color: var(--bb-pink); }
.bb-crop__zoom { min-width: 44px; font: 20px/1 var(--font-term); color: var(--bb-lime); text-align: right; }
/* Barra de estado de Win98: tamaño del recorte en px de la foto original y nombre del archivo. */
.bb-crop__status { display: flex; gap: 2px; margin: 0; font: 11px Tahoma, Verdana, sans-serif; color: #000; }
.bb-crop__status span { padding: 1px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #c0c0c0; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.bb-crop__status span:first-child { flex: none; min-width: 112px; }
.bb-crop__status span:last-child { flex: 1; min-width: 0; }
.bb-crop__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .bb-crop__frame::before { animation: bb-ants .6s steps(8) infinite; }
  .bb-crop__msg--busy::after { animation: bb-blink 1s steps(1) infinite; }
}
@keyframes bb-ants { to { background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px; } }
html.is-quiet .bb-crop__frame::before, html.is-quiet .bb-crop__msg--busy::after { animation: none; }
/* Lo que eliges es lo que se ve: el banner con foto se pinta siempre en 3:1, como sale del recorte. */
.pf-banner.pf-banner--img { min-height: 0; aspect-ratio: 3 / 1; }

/* 3. Colores: cada fila dice qué cambia, con un mini-diagrama de la zona (en amarillo KONTUZ) */
.pe-color { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin: 0 -4px; padding: 6px 4px; border: 1px dashed transparent; }
.pe-color + .pe-color { border-top-color: #262626; }
.pe-color:hover, .pe-color:focus-within { background: #161616; border-color: #555; }
.pe-color__txt { min-width: 0; }
.pe-color__txt label { display: block; font-weight: bold; color: #fff; }
.pe-color__txt small { display: block; font-size: 11px; line-height: 1.35; color: var(--bb-muted); }
.pe-color__in { display: flex; gap: 4px; align-items: center; }
.pe-swatch { width: 52px; height: 32px; padding: 2px; cursor: var(--cur-hand); background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; }
.pe-color .bb-input--hex { width: 92px; font-family: var(--font-term); font-size: 18px; text-transform: lowercase; }
.pe-dia {
  --d-page: #262626; --d-nick: #8a8a8a; --d-acc: #5a5a5a; --d-border: #6a6a6a; --d-box: #3c3c3c; --d-bar: #7a7a7a; --d-bartx: #bdbdbd; --d-txt: #9a9a9a; --d-lnk: #9a9a9a;
  display: block; width: 56px; height: 44px; border: 1px solid #000; background-color: var(--d-page); background-repeat: no-repeat;
  background-image: linear-gradient(var(--d-lnk), var(--d-lnk)), linear-gradient(var(--d-txt), var(--d-txt)), linear-gradient(var(--d-txt), var(--d-txt)),
    linear-gradient(var(--d-bartx), var(--d-bartx)), linear-gradient(var(--d-bar), var(--d-bar)), linear-gradient(var(--d-box), var(--d-box)),
    linear-gradient(var(--d-border), var(--d-border)), linear-gradient(var(--d-acc), var(--d-acc)), linear-gradient(var(--d-nick), var(--d-nick));
  background-position: 11px 36px, 11px 27px, 11px 31px, 10px 21px, 7px 19px, 7px 19px, 5px 17px, 38px 4px, 5px 4px;
  background-size: 16px 3px, 32px 3px, 26px 3px, 14px 3px, 42px 7px, 42px 22px, 46px 26px, 13px 8px, 28px 8px;
}
.pe-dia--bg { --d-page: var(--warn-yellow); }
.pe-dia--headerText { --d-nick: var(--warn-yellow); }
.pe-dia--accent { --d-acc: var(--warn-yellow); }
.pe-dia--title { --d-bar: var(--warn-yellow); --d-bartx: #7a7a7a; }
.pe-dia--titleText { --d-bartx: var(--warn-yellow); --d-bar: #4a4a4a; }
.pe-dia--box { --d-box: var(--warn-yellow); --d-txt: #7a6a00; --d-lnk: #7a6a00; }
.pe-dia--border { --d-border: var(--warn-yellow); }
.pe-dia--text { --d-txt: var(--warn-yellow); }
.pe-dia--link { --d-lnk: var(--warn-yellow); --d-txt: #5a5a5a; }
/* Fichas de elegir (estilo de barra, letra, borde, cursor): radio oculto, ficha entera clicable */
.pe-ts input, .pe-font input, .pe-bs input, .pe-cur input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pe-ts, .pe-font, .pe-bs, .pe-cur { position: relative; cursor: var(--cur-hand); background: #0a0a0a; border: 2px solid #262626; }
:is(.pe-ts, .pe-font, .pe-bs, .pe-cur):hover { border-color: #555; }
:is(.pe-ts, .pe-font, .pe-bs, .pe-cur):has(input:checked) { border-color: var(--bb-cyan); }
:is(.pe-ts, .pe-font, .pe-bs, .pe-cur):has(input:focus-visible) { outline: 2px dotted var(--bb-cyan); outline-offset: 2px; }
:is(.pe-ts, .pe-bs, .pe-cur) b, .pe-font span { font: var(--font-ui); text-transform: uppercase; color: #ccc; }
:is(.pe-ts, .pe-bs, .pe-cur):has(input:checked) b, .pe-font:has(input:checked) span { color: var(--bb-cyan); }
.pe-ts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 4px; }
.pe-ts i { display: block; height: 24px; padding: 0 6px; overflow: hidden; font: 12px/24px var(--font-pixel); font-style: normal; text-transform: uppercase; white-space: nowrap; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); border-bottom: 1px solid #000; }
.pe-ts b { display: block; padding: 3px 5px; font-size: 9px; }
.pe-ts--gel-cyan i { color: #002024; text-shadow: none; } .pe-ts--gel-pink i { color: #4a0026; text-shadow: none; } .pe-ts--gel-lime i { color: #1d3300; text-shadow: none; }
.pe-ts--flat i { color: var(--pe-flat-fg, #fff); text-shadow: none; }
.pe-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.pe-font { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; }
.pe-font b { font-size: 18px; font-weight: normal; line-height: 1.2; text-transform: none; color: #fff; white-space: nowrap; overflow: hidden; }
.pe-font--press-start b { font-size: 10px; line-height: 22px; }
.pe-font--vt323 b { font-size: 22px; line-height: 1; }
.pe-bs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-bottom: 4px; }
.pe-bs { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; }
.pe-bs i { display: block; width: 100%; height: 22px; background: #111; border: 4px solid var(--bb-cyan-deep); }
.pe-bs--dashed i { border-style: dashed; } .pe-bs--dotted i { border-style: dotted; } .pe-bs--double i { border-style: double; border-width: 6px; }
.pe-bs--ridge i { border-style: ridge; } .pe-bs--outset i { border-style: outset; }
.pe-cursors { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-cur { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.pe-cur img { image-rendering: pixelated; }
.pe-cur i { display: block; width: 14px; height: 14px; border: 1px dashed #777; }
.pe-checks { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.pe-checks .bb-check { margin: 2px 0; }
.pe-blinkies { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.pe-blinkies label { display: flex; align-items: center; gap: 6px; padding: 3px; background: #0a0a0a; border: 1px solid #262626; }
.pe-blinkies img { image-rendering: pixelated; max-width: 150px; }
.pe-blinkies--blinkies img { width: 150px; height: 20px; }
.pe-blinkies--buttons { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.pe-blinkies--buttons img { width: 88px; height: 31px; }
.pe-blinkies__group { margin: 10px 0 4px; font: 8px/1 var(--font-pixel); text-transform: uppercase; color: var(--bb-cyan); }
.pe-range { display: flex; align-items: center; gap: 6px; }
.pe-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--bb-cyan); }
.pe-range output { min-width: 44px; font: 16px var(--font-term); color: var(--bb-lime); }
.pe-warnbox { margin: 10px 0 0; }
.pe-warnbox .bb-flash { font-weight: normal; }
.pe-issues { margin: 4px 0 8px; padding: 0 0 0 18px; }
.pe-issues li { margin: 4px 0; }
.pe-issues small { font-size: 10px; }
.pe-issues .bb-btn98 { margin-left: 4px; padding: 0 6px; }

/* 5. Avanzado: plegado por defecto */
.pe-adv > summary { list-style: none; cursor: var(--cur-hand); }
.pe-adv > summary::-webkit-details-marker { display: none; }
.pe-adv__hint { position: relative; font: var(--font-ui); text-transform: uppercase; color: #ccc; text-shadow: none; }
.pe-adv__hint::after { content: " ▼"; }
.pe-adv[open] .pe-adv__hint::after { content: " ▲"; }
.pe-step--adv .pe-adv:not([open]) > summary { border-bottom: 0; }

/* Barra de "sin guardar": sale (con JS) en cuanto tocas el aspecto, con cinta KONTUZ */
.pe-savebar { position: sticky; bottom: 8px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 10px; background: #000; border: 6px solid; border-image: repeating-linear-gradient(45deg, #ffe600 0 8px, #000 8px 16px) 6; box-shadow: var(--hard-shadow); }
.pe-savebar p { flex: 1 1 200px; margin: 0; font-weight: bold; color: var(--warn-yellow); }

/* Cuenta (/cuenta/*): sesiones legibles */
.ac-ua { display: block; margin-top: 2px; font-size: 10px; color: var(--bb-muted); overflow-wrap: anywhere; }
.ac-sessions tr.is-current b { color: var(--bb-lime); }
.ac-closeall { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }

@media (max-width: 760px) {
  /* Perfil en una columna: cabecera (banner + foto con datos), contacto, detalles, canción, sobre mí,
     posts, Top 8 y muro; intereses, visitas y blinkies al final (no tienen nada que pulsar). */
  .pf-wrap { padding: 0; }
  .pf-ownerbar__actions { width: 100%; }
  .pf-ownerbar__actions .bb-btn { flex: 1 1 140px; }
  .pf-safebar a, .pf-safebar button { min-height: 36px; }
  .pf-banner { flex-wrap: wrap; gap: 6px; min-height: 104px; padding: 10px; }
  .pf-banner h1 { font-size: 38px; }
  .pf-mood { margin-left: 0; max-width: 100%; font-size: 18px; }
  .pf-cols { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .pf-col { display: contents; }
  .pf-sec--interests, .pf-sec--visits, .pf-blinkies { order: 1; }
  .pf-id > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; }
  .pf-avatar { width: 112px; }
  .pf-facts { margin: 0; font-size: 11px; line-height: 1.5; }
  .pf-online img { max-width: 100%; height: auto; }
  .pf-safe-actions a, .pf-safe-actions button { justify-content: center; min-height: 40px; }
  .pf-top8 { gap: 4px; }
  .pf-comment { grid-template-columns: 52px minmax(0, 1fr); }
  .pf-comment > a > img { width: 48px; height: 48px; }
  .pf-comment .bb-linkbtn, .pf-comment .bb-small { display: inline-block; padding: 6px 0; }

  /* Editor: vista previa arriba, pegada y plegable; controles grandes */
  .pe-steps a { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 4px 2px; font-size: 9px; text-align: center; }
  .pe-grid { grid-template-columns: minmax(0, 1fr); }
  .pe-side, .pe-main { grid-column: 1; grid-row: auto; }
  .pe-side { top: 0; }
  .pe-preview .bb-window__body { padding: 6px; }
  .pe-preview .bb-help { display: none; }
  #pf-preview-bg { padding: 6px; }
  #pf-preview .pf-banner { min-height: 44px; padding: 4px 6px; }
  #pf-preview .pf-banner h1 { font-size: 22px; }
  #pf-preview .pf-mood { font-size: 13px; }
  .pe-pv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pe-pv__avatar { width: 28px; height: 28px; }
  .pe-pv__text { font-size: 11px; }
  .pe-pv .pf-top8 { gap: 3px; }
  .pe-pv .pf-top8__empty { font-size: 14px; border-width: 1px; }
  .pe-preview__actions .bb-btn { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
  .pe-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-preset i { height: 70px; }
  .pe-images { grid-template-columns: minmax(0, 1fr); }
  .pe-color { grid-template-columns: 48px minmax(0, 1fr); }
  .pe-color__in { grid-column: 2; }
  .pe-dia { width: 48px; height: 40px; background-size: 14px 3px, 26px 3px, 20px 3px, 12px 3px, 36px 7px, 36px 20px, 40px 24px, 11px 8px, 24px 8px; background-position: 9px 33px, 9px 25px, 9px 29px, 8px 19px, 6px 17px, 6px 17px, 4px 15px, 32px 4px, 4px 4px; }
  .pe-swatch { width: 64px; height: 40px; }
  .pe-color .bb-input--hex { width: 110px; }
  .pe-ts-list, .pe-fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-bs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe-cur, .pe-checks .bb-check, .pe-blinkies label { min-height: 40px; align-items: center; }
  .pe-checks .bb-check input, .pe-blinkies input { width: 18px; height: 18px; }
  .pe-range input[type="range"] { height: 36px; }
  .pe-file { min-height: 40px; }
  .bb-crop { width: calc(100vw - 16px); }
  .bb-crop__main { grid-template-columns: minmax(0, 1fr); }
  .bb-crop__stage { height: min(300px, 46vh); }
  .bb-crop--banner .bb-crop__stage { height: min(200px, 34vh); }
  .bb-crop__tools .bb-btn98 { min-width: 40px; }
  .bb-crop__tools input[type="range"] { height: 36px; }
  .bb-crop__actions .bb-btn, .bb-crop__actions .bb-btn98 { flex: 1 1 130px; }
  .bb-crop__x { width: 32px; height: 26px; }
  .bb-crop__mini--banner b { font-size: 26px; }
  .pe-savebar { bottom: 0; }
  .pe-savebar .bb-btn, .pe-savebar .bb-btn98 { flex: 1 1 140px; min-height: 40px; }

  /* Cuenta: pestañas en rejilla de 3 y sesiones en fichas */
  .ac-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .ac-tabs a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px; text-align: center; border-bottom: 1px solid #333; }
  .ac-nav ~ * .bb-window__title { white-space: normal; line-height: 18px; padding: 3px 0; }
  .ac-sessions thead { display: none; }
  .ac-sessions, .ac-sessions tbody, .ac-sessions tr, .ac-sessions td { display: block; }
  .ac-sessions tr { padding: 8px; border-bottom: 1px solid #333; }
  .ac-sessions tr:nth-child(even) { background: var(--bb-panel-2); }
  .ac-sessions td, .ac-sessions tr:nth-child(even) td { padding: 2px 0; background: none; border: 0; }
  .ac-sessions td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; font: var(--font-ui); text-transform: uppercase; color: var(--bb-cyan); }
  .ac-sessions .bb-nowrap { white-space: normal; }
  .ac-sessions__act { margin-top: 6px; }
  .ac-sessions__act .bb-btn98 { width: 100%; min-height: 40px; }
  .ac-closeall .bb-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pf-mood--marquee span { animation: none; padding-left: 0; } }
html.is-quiet .pf-mood--marquee span { animation: none; padding-left: 0; }

/* ---------- foro: ajustes de la barra y búsqueda ---------- */
.bb-bar .bb-h2 { margin: 0; display: flex; align-items: center; gap: 6px; }
mark.bb-hl { color: #000; }

/* ---------- bloques del CMS ---------- */
.bb-lead-body { font-size: 12px; }
.bb-lead-body > :first-child { color: var(--bb-cream); }
.bb-polaroid--big img { width: auto; max-width: 100%; height: auto; max-height: 420px; }
.bb-polaroid--big { float: none; display: inline-block; }
.cms-figure { position: relative; display: inline-block; max-width: 100%; margin: 6px; padding: 6px; background: #fff; box-shadow: 3px 3px 0 #000; }
.cms-figure img { display: block; max-width: 100%; height: auto; }
.cms-figure figcaption { padding-top: 4px; font: 8px var(--font-pixel); text-align: center; color: #111; text-transform: uppercase; }
.cms-figure--tape::before, .cms-figure--tape::after { content: ""; position: absolute; width: 46px; height: 14px; background: rgba(255, 255, 220, .65); top: -6px; }
.cms-figure--tape::before { left: -10px; transform: rotate(-30deg); }
.cms-figure--tape::after { right: -10px; transform: rotate(30deg); }
.cms-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 6px; list-style: none; }
.cms-gallery li:nth-child(odd) .cms-figure { transform: rotate(-1.5deg); }
.cms-gallery li:nth-child(even) .cms-figure { transform: rotate(1.5deg); }
.cms-gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.cms-featured { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: center; }
.cms-starburst { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px; }
.cms-starburst__text { margin: 0; font: 26px/1 var(--font-display); text-transform: uppercase; color: var(--warn-yellow); text-shadow: 2px 2px 0 var(--bb-purple), 4px 4px 0 #000; }
.cms-marquee { margin: 0; }
.cms-buttons { padding: 4px 0; }
.cms-listen { margin-top: 4px; }
.cms-listen > summary { list-style: none; display: inline-block; }
.cms-listen > summary::-webkit-details-marker { display: none; }
.cms-listen[open] > summary { margin-bottom: 6px; }
.bb-window__body--paper { padding: 0; }
.bb-window__body--paper > .bb-xerox { border: 0; box-shadow: none; }
.bb-xerox-page .bb-window { max-width: 100%; }

/* ---------- blog ---------- */
.blog-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 14px; }
.blog-card:not(:has(.blog-card__cover)) { grid-template-columns: minmax(0, 1fr); }
.blog-card__cover { display: block; padding: 5px; background: #fff; box-shadow: 3px 3px 0 #000; transform: rotate(-2deg); }
.blog-card__cover img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.3) contrast(1.1); }
.blog-card__paper { padding: 10px 14px; }
.blog-card__title { font-size: 26px; }
.blog-card__title a, .blog-card__title a:visited { color: var(--ink); text-decoration: none; }
.blog-post { margin: 0 0 10px; }
.blog-post .bb-xerox__stamp { float: right; margin-left: 10px; }
.blog-comment { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 8px; border-bottom: 1px dotted #2a2a2a; }
.blog-comment form { margin: 0; }

/* ---------- fiestas ---------- */
.ev-detail { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.ev-flyer { float: none; width: auto; margin: 0; }
.ev-flyer-big { min-height: 320px; }
.ev-flyer-big .bb-flyer__title { font-size: 44px; }
.ev-going { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ev-going form { margin: 0; }
.ev-going__btn { padding: 8px 22px; font-size: 13px; }
.ev-going .bb-counter__label { width: 100%; margin: 0; text-align: left; }

/* ---------- lanzamientos, artistas ---------- */
.rel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rel-card { padding: 8px; background: var(--bb-panel-2); border: 1px solid #262626; }
.art-map { position: relative; padding: 6px; background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border: 2px inset #444; }
.art-map__flag { position: absolute; right: 8px; top: 8px; }
.bb-usercard.is-crew { border-color: var(--bb-cyan); box-shadow: 0 0 0 1px var(--bb-cyan-edge) inset; }
/* Fichas de artista: muro de polaroids un poco torcidas; la de la crew lleva celo cian. */
/* Polaroids de las fichas y tarjetas de miembros en la misma fila. */
.art-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 14px; padding: 6px 4px 2px; }
.art-row .art-card { width: 150px; }
.art-row .bb-usercard { width: 118px; }
/* Solo admins: debajo de cada tarjeta, "Editar ficha" o "Quitar" (a un miembro se le quitan los roles de artista). */
.art-admin { display: grid; gap: 4px; justify-items: stretch; }
.art-row .art-admin { width: 150px; }
.art-row .art-admin--member { width: 118px; }
.art-admin .art-card, .art-admin .bb-usercard { width: auto; }
.art-admin form { margin: 0; }
.art-admin .bb-btn98 { width: 100%; text-align: center; }
/* Panel: miembros que salen como artistas y los quitados. */
.art-members__help { margin: 0; padding: 6px 8px; }
.art-members__sub { margin: 10px 8px 4px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-pink); }
.art-members__blocked li { align-items: center; }
.art-members__blocked form { margin: 0 0 0 auto; }
.bb-table form { margin: 0; }
/* Editor del perfil: roles de artista bloqueados por un admin. */
.bb-check.is-locked { opacity: .55; cursor: not-allowed; }
.pe-locked { padding: 4px 6px; color: #000; background: var(--warn-yellow); border: 1px solid #000; }
.art-card, .art-card:visited { position: relative; display: block; padding: 6px 6px 8px; color: var(--ink); background: var(--paper); box-shadow: 3px 3px 0 #000; transform: rotate(-1.5deg); text-decoration: none; overflow-wrap: anywhere; }
.art-card:nth-child(even) { transform: rotate(1.5deg); }
.art-card:hover, .art-card:focus-visible { color: var(--ink); text-decoration: none; transform: rotate(0) scale(1.03); box-shadow: 3px 3px 0 #000, 0 0 0 2px var(--bb-cyan); z-index: 1; }
.art-card.is-crew::before { content: ""; position: absolute; top: -7px; left: 50%; width: 54px; height: 14px; margin-left: -27px; background: rgba(3, 247, 254, .55); transform: rotate(-4deg); }
.art-card__photo { position: relative; display: block; margin-bottom: 6px; background: #000; border: 1px solid #000; }
.art-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.art-card__spotify { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; font: var(--font-ui); font-size: 9px; text-transform: uppercase; color: #002b10; background: linear-gradient(#c8f7d8 0%, #6fe39a 49%, #1db954 50%, #12823a 100%); border: 1px solid #0b5a28; box-shadow: 2px 2px 0 #000; }
.art-card b { display: block; font: 17px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .3px; }
.art-card b .bb-badge { vertical-align: 2px; }
.art-card small { display: block; margin-top: 2px; font-size: 10px; color: #555; }
@media (prefers-reduced-motion: no-preference) { .art-card { transition: transform .12s steps(3); } }

.art-profile__grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; }
.art-profile__side { text-align: center; }
.art-profile__photo { float: none; display: inline-block; margin: 6px 0 4px; }
.art-profile__photo img { width: 200px; height: 200px; }
.art-profile__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 14px 0 6px; }
.art-profile__tags .px { vertical-align: -1px; }
.art-profile__where { margin: 4px 0 10px; font-size: 11px; color: var(--bb-muted); }
.art-profile__main .bbc { font-size: 12px; }
.art-links { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.art-links .bb-btn { display: block; }
.art-links__spotify, .art-links__spotify:visited, .art-links__spotify:hover { background: linear-gradient(#c8f7d8 0%, #6fe39a 49%, #1db954 50%, #12823a 100%); border-color: #0b5a28; color: #002b10; }
.art-links__instagram, .art-links__instagram:visited, .art-links__instagram:hover { background: linear-gradient(#f77ec4 0%, #e0479e 49%, #c1358a 50%, #6a26c9 100%); border-color: #4b1394; color: #fff; text-shadow: 0 1px 0 #3d0a40, 0 -1px 0 #3d0a40; }
.art-links__youtube, .art-links__youtube:visited, .art-links__youtube:hover { background: var(--gel-red); border-color: #8f150b; color: #fff; text-shadow: 0 -1px 0 #5a0d06; }
.art-links__soundcloud, .art-links__soundcloud:visited, .art-links__soundcloud:hover { background: linear-gradient(#ffe2c7 0%, #ffab66 49%, #ff5500 50%, #c03f00 100%); border-color: #8a2e00; color: #2b0d00; }
.art-links__bandcamp, .art-links__bandcamp:visited, .art-links__bandcamp:hover { background: linear-gradient(#d9f3f8 0%, #8fd0de 49%, #3a9db3 50%, #1d6676 100%); border-color: #154e5a; color: #00222a; }
.art-links__tiktok, .art-links__tiktok:visited, .art-links__tiktok:hover { background: var(--gel-black); border-color: #000; color: #fff; text-shadow: -1px 0 0 var(--bb-cyan), 1px 0 0 var(--bb-pink); }

@media (max-width: 760px) {
  /* En móvil el titular va debajo de la polaroid: al lado no cabe y partía palabras ("MOVIMIENT-O"). */
  .bb-polaroid + .bb-h1 { clear: both; padding-top: 4px; }
  .art-profile__grid { grid-template-columns: minmax(0, 1fr); }
  .art-row { gap: 16px 12px; }
  .art-row .art-card, .art-row .bb-usercard, .art-row .art-admin { width: calc(50% - 6px); }
  .art-admin .art-card, .art-admin .bb-usercard { width: auto; }
  .cms-featured, .ev-detail, .rel-list { grid-template-columns: minmax(0, 1fr); }
  .cms-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card { grid-template-columns: minmax(0, 1fr); }
  /* El sello OFICIAL BB va encima del título: flotando a su lado lo pisaba. */
  .blog-post .bb-xerox__stamp { float: none; margin: 0 0 10px; }
  .art-links .bb-btn { display: flex; }
  .cms-starburst__text { font-size: 20px; }
  .art-map__flag { width: 50px; height: auto; }
}

/* ======================================================================
   Extras Y2K (fase 8): scrollbars gel, selección, brillo de gel, starbursts
   que bailan, webring, barra de estado Win98 y el MODO BB (código Konami).
   Todo lo que se mueve se apaga con reduced-motion y con el modo tranquilo.
   ====================================================================== */
html { scrollbar-color: var(--bb-cyan-deep) #000; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border-left: 1px solid #222; }
::-webkit-scrollbar-thumb { background: var(--gel-cyan); border: 1px solid var(--bb-cyan-edge); border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
::-webkit-scrollbar-thumb:hover { background: var(--gel-pink); border-color: #c2146f; }
::-webkit-scrollbar-corner { background: #000; }
::selection { background: var(--bb-pink); color: #000; text-shadow: none; }

.bb-btn { overflow: hidden; }
.bb-btn::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: -45%; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-20deg);
}

.bb-webring { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; padding: 2px 10px 8px; font: var(--font-ui); text-transform: uppercase; }
.bb-webring a, .bb-webring a:visited { color: var(--bb-cyan); }
.bb-webring a:hover { color: var(--bb-pink); }
.bb-webring__name { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; color: #000; background: var(--gel-lime); border: 1px solid #6aa10c; border-radius: 999px; letter-spacing: 1px; }
.bb-webring__name img { image-rendering: pixelated; }

.bb-statusbar { display: flex; gap: 2px; margin: 0 6px 6px; padding: 2px; font: 11px var(--font-body); color: #000; background: #c0c0c0; border: 1px solid #fff; border-right-color: #404040; border-bottom-color: #404040; }
.bb-statusbar__cell { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; white-space: nowrap; border: 1px solid #808080; border-right-color: #fff; border-bottom-color: #fff; }
.bb-statusbar__cell--main { flex: 1; }
.bb-statusbar__cell img { image-rendering: pixelated; }
.bb-statusbar__led { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eaffd0, #4ad000 60%, #1d5a00); border: 1px solid #1d3300; }

.bb-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px; color: var(--bb-muted); }
.bb-empty img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.bb-empty b { color: var(--bb-white); }

.bb-konami { position: fixed; z-index: 60; left: 50%; top: 30%; width: min(320px, calc(100vw - 32px)); transform: translateX(-50%); }
.bb-konami .bb-window__body { text-align: center; }
.bb-konami__big { margin: 4px 0; font: 30px/1 var(--font-display); text-transform: uppercase; color: var(--warn-yellow); text-shadow: 2px 2px 0 var(--bb-purple), 4px 4px 0 #000; }
.bb-konami__small { margin: 0; font: 16px var(--font-term); color: var(--bb-cyan); }
.fx-diamond { position: absolute; top: -24px; width: 15px; height: 12px; pointer-events: none; background: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png) center / contain no-repeat; image-rendering: pixelated; animation: fx-fall linear forwards; }
.fx-heart--fall { top: -20px; bottom: auto; animation-name: fx-fall; animation-fill-mode: forwards; }

@media (prefers-reduced-motion: no-preference) {
  .bb-btn:hover::after, .bb-btn:focus-visible::after { opacity: 1; animation: bb-shine .7s steps(7) 1; }
  .bb-event__burst, .bb-flyer__burst, .bb-header__burst, .bb-burst, .cms-starburst img { animation: bb-wobble 1.6s steps(2) infinite; }
  .bb-statusbar__led { animation: bb-led 1.2s steps(1) infinite; }
  html.is-bbmode .bb-header__logo { animation: bb-hue 1s steps(6) infinite; }
  html.is-bbmode .bb-marquee__track { animation-duration: 6s; }
}
@keyframes bb-shine { from { left: -45%; } to { left: 125%; } }
@keyframes bb-wobble { 0% { transform: rotate(-6deg) scale(1); } 100% { transform: rotate(4deg) scale(1.05); } }
@keyframes bb-led { 50% { filter: brightness(.55); } }
@keyframes bb-hue { to { filter: hue-rotate(360deg); } }
html.is-quiet .bb-btn:hover::after, html.is-quiet .bb-event__burst, html.is-quiet .bb-flyer__burst, html.is-quiet .bb-header__burst,
html.is-quiet .bb-burst, html.is-quiet .cms-starburst img, html.is-quiet .bb-statusbar__led { animation: none; }

@media (max-width: 760px) {
  .bb-statusbar { flex-wrap: wrap; }
  .bb-statusbar__cell--wide, .bb-statusbar__cell--zone { display: none; }
}

/* Ficha de fiesta: calendario, cómo llegar y la crew que va (avatares) */
.ev-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.ev-crew { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.ev-crew li { position: relative; width: 64px; text-align: center; font-size: 10px; }
.ev-crew a { display: block; overflow-wrap: anywhere; }
.ev-crew a img { display: block; width: 48px; height: 48px; margin: 0 auto 2px; object-fit: cover; image-rendering: pixelated; border: 2px solid #000; outline: 1px solid var(--bb-lime); box-shadow: var(--hard-shadow); }
.ev-crew a:hover img, .ev-crew a:focus img { outline-color: var(--bb-pink); }
.ev-crew__gem { position: absolute; top: -4px; right: 4px; image-rendering: pixelated; }

/* Selector visual de fondos del editor de perfil (radios con muestra de la textura real) */
.pe-textures-wrap { grid-column: 1 / -1; }
.pe-textures { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-top: 2px; }
.pe-tex { position: relative; display: block; cursor: var(--cur-hand); background: #000; border: 2px solid #000; box-shadow: var(--hard-shadow); }
.pe-tex input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pe-tex i { display: block; height: 44px; background: #111 center; image-rendering: pixelated; }
.pe-tex b { display: block; padding: 2px 3px; font: var(--font-ui); font-size: 9px; line-height: 12px; text-transform: uppercase; color: #fff; background: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-tex:hover b { background: #333; }
.pe-tex:has(input:checked) { border-color: var(--bb-cyan); }
.pe-tex:has(input:checked) b { color: #002024; background: var(--gel-cyan); }
.pe-tex:has(input:focus-visible) { outline: 2px dotted var(--bb-cyan); outline-offset: 2px; }
.pe-tex--none i { background: repeating-linear-gradient(45deg, #111 0 6px, #1c1c1c 6px 12px); }
.pe-tex--scanlines i { background-color: #0b2a3a; }
.pe-tex--sparkle-transparent i { background-color: #000; }
.pe-tex--checker-cyan i { background-image: url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); }
.pe-tex--sparkle-black i { background-image: url(/s/assets/textures/sparkle-tile-black.59acd57d9b.gif); }
.pe-tex--sparkle-transparent i { background-image: url(/s/assets/textures/sparkle-tile-transparent.10a7985d1e.gif); }
.pe-tex--checker-punk i { background-image: url(/s/assets/textures/checker-punk-32.5de02816d5.png); }
.pe-tex--xerox i { background-image: url(/s/assets/textures/xerox-grain-256.54a924c17f.png); }
.pe-tex--ikurrina i { background-image: url(/s/assets/textures/bg-ikurrina.403ae55073.png); background-size: 60px 42px; }
.pe-tex--scanlines i { background-image: url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); }
.pe-tex--noche-estrellada i { background-image: url(/s/assets/textures/bg-noche-estrellada.7cca2e5f4c.gif); }
.pe-tex--purpurina-rosa i { background-image: url(/s/assets/textures/bg-purpurina-rosa.63155107fc.gif); }
.pe-tex--purpurina-cian i { background-image: url(/s/assets/textures/bg-purpurina-cian.438410d8b7.gif); }
.pe-tex--corazones i { background-image: url(/s/assets/textures/bg-corazones.6a64456bfa.gif); }
.pe-tex--burbujas i { background-image: url(/s/assets/textures/bg-burbujas.ed0dd21be8.gif); }
.pe-tex--nieve i { background-image: url(/s/assets/textures/bg-nieve.c9156491a1.gif); }
.pe-tex--ajedrez-movil i { background-image: url(/s/assets/textures/bg-ajedrez-movil.182fd2840b.gif); }
.pe-tex--kontuz i { background-image: url(/s/assets/textures/bg-kontuz.8fc5f0e7fa.gif); }
.pe-tex--disco i { background-image: url(/s/assets/textures/bg-disco.942b879f2d.gif); }
html.is-quiet .pe-textures i { animation: none; }
html.is-quiet .pe-tex--sparkle-black i { background-image: url(/s/assets/textures/sparkle-tile-black.still.bb06af129b.png); }
html.is-quiet .pe-tex--sparkle-transparent i { background-image: url(/s/assets/textures/sparkle-tile-transparent.still.f131ee23ce.png); }
html.is-quiet .pe-tex--noche-estrellada i { background-image: url(/s/assets/textures/bg-noche-estrellada.still.a27f29c558.png); }
html.is-quiet .pe-tex--purpurina-rosa i { background-image: url(/s/assets/textures/bg-purpurina-rosa.still.fb0edf8869.png); }
html.is-quiet .pe-tex--purpurina-cian i { background-image: url(/s/assets/textures/bg-purpurina-cian.still.e48b719142.png); }
html.is-quiet .pe-tex--corazones i { background-image: url(/s/assets/textures/bg-corazones.still.c78fe331e7.png); }
html.is-quiet .pe-tex--burbujas i { background-image: url(/s/assets/textures/bg-burbujas.still.57cce9f089.png); }
html.is-quiet .pe-tex--nieve i { background-image: url(/s/assets/textures/bg-nieve.still.f9d1f42399.png); }
html.is-quiet .pe-tex--ajedrez-movil i { background-image: url(/s/assets/textures/bg-ajedrez-movil.still.6964dd7222.png); }
html.is-quiet .pe-tex--kontuz i { background-image: url(/s/assets/textures/bg-kontuz.still.7cca306fe8.png); }
html.is-quiet .pe-tex--disco i { background-image: url(/s/assets/textures/bg-disco.still.3807745f0e.png); }
@media (prefers-reduced-motion: reduce) {
  .pe-tex--sparkle-black i { background-image: url(/s/assets/textures/sparkle-tile-black.still.bb06af129b.png); }
  .pe-tex--sparkle-transparent i { background-image: url(/s/assets/textures/sparkle-tile-transparent.still.f131ee23ce.png); }
  .pe-tex--noche-estrellada i { background-image: url(/s/assets/textures/bg-noche-estrellada.still.a27f29c558.png); }
  .pe-tex--purpurina-rosa i { background-image: url(/s/assets/textures/bg-purpurina-rosa.still.fb0edf8869.png); }
  .pe-tex--purpurina-cian i { background-image: url(/s/assets/textures/bg-purpurina-cian.still.e48b719142.png); }
  .pe-tex--corazones i { background-image: url(/s/assets/textures/bg-corazones.still.c78fe331e7.png); }
  .pe-tex--burbujas i { background-image: url(/s/assets/textures/bg-burbujas.still.57cce9f089.png); }
  .pe-tex--nieve i { background-image: url(/s/assets/textures/bg-nieve.still.f9d1f42399.png); }
  .pe-tex--ajedrez-movil i { background-image: url(/s/assets/textures/bg-ajedrez-movil.still.6964dd7222.png); }
  .pe-tex--kontuz i { background-image: url(/s/assets/textures/bg-kontuz.still.7cca306fe8.png); }
  .pe-tex--disco i { background-image: url(/s/assets/textures/bg-disco.still.3807745f0e.png); }
}
.pe-preset--glitter-rosa i { background: #1a0010 url(/s/assets/textures/bg-purpurina-rosa.63155107fc.gif); }
.pe-preset--noche-de-bilbo i { background: #05030f url(/s/assets/textures/bg-noche-estrellada.7cca2e5f4c.gif); }
html.is-quiet .pe-preset--glitter-rosa i { background-image: url(/s/assets/textures/bg-purpurina-rosa.still.fb0edf8869.png); }
html.is-quiet .pe-preset--noche-de-bilbo i { background-image: url(/s/assets/textures/bg-noche-estrellada.still.a27f29c558.png); }
/* Fondo de perfil animado (textura GIF o GIF subido): con reduced-motion se usa la versión congelada. */
@media (prefers-reduced-motion: reduce) {
  html.pf-anim { background-image: var(--pf-bg-still) !important; }
}

/* ======================================================================
   Bloques nuevos del CMS: cita, aviso, preguntas, botones, cuenta atrás y blinkies.
   ====================================================================== */
.cms-quote { margin: 14px 4px; padding: 6px 4px; text-align: center; }
.cms-quote blockquote { margin: 0; }
.cms-quote p { margin: 0; font: 34px/1.05 var(--font-display); text-transform: uppercase; color: #fff; white-space: pre-line; overflow-wrap: anywhere; text-shadow: 3px 3px 0 var(--q-shadow, var(--bb-purple)), 6px 6px 0 #000; }
.cms-quote figcaption { margin-top: 8px; font: 10px var(--font-pixel); color: var(--bb-cyan); text-transform: uppercase; letter-spacing: 1px; }
.cms-quote figcaption::before { content: "// "; color: var(--bb-pink); }
.cms-quote--cyan { --q-shadow: var(--bb-cyan-deep); }
.cms-quote--pink { --q-shadow: var(--bb-pink); }
.cms-notice { margin: 10px 0; font-weight: normal; }
.cms-notice .bbc { color: #000; }
.cms-notice .bbc a, .cms-notice .bbc a:visited { color: #000; }
.cms-faq { border-bottom: 1px dashed #333; }
.cms-faq > summary { position: relative; padding: 7px 4px 7px 22px; font-weight: bold; color: #fff; cursor: var(--cur-hand); list-style: none; }
.cms-faq > summary::-webkit-details-marker { display: none; }
.cms-faq > summary::before { content: "▶"; position: absolute; left: 4px; top: 9px; font-size: 10px; color: var(--bb-pink); }
.cms-faq[open] > summary::before { content: "▼"; color: var(--bb-cyan); }
.cms-faq > summary:hover { color: var(--bb-cyan); }
.cms-faq > .bbc { padding: 0 6px 10px 22px; }
.cms-btnrow { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 12px 0; }
.cms-btnrow--center { justify-content: center; }
.cms-btnrow--right { justify-content: flex-end; }
.bb-btn--big { padding: 9px 22px; font-size: 12px; letter-spacing: 1px; }
.bb-btn--purple, .bb-btn--purple:visited, .bb-btn--purple:hover { background: var(--gel-purple); border-color: #4b12b8; color: #fff; text-shadow: 0 -1px 0 #2a0670; }
.cms-countdown { text-align: center; }
.cms-countdown__label { margin: 0 0 4px; font: 22px/1.1 var(--font-display); text-transform: uppercase; color: var(--warn-yellow); text-shadow: 2px 2px 0 var(--bb-purple); }
.cms-countdown__label a, .cms-countdown__label a:visited { color: inherit; }
.cms-countdown__done { margin: 6px 0; font: 30px/1 var(--font-display); color: var(--bb-lime); text-transform: uppercase; }
.cms-blinkies { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 8px 0; }
.cms-blinkies img { image-rendering: pixelated; }

/* ======================================================================
   BB·AMP (Radio BB): reproductor con la piel "AIMP Modern" sin ecualizador. Arriba la ventana
   principal (menú, LCD azul acero con dígitos de 7 segmentos, lóbulo VISUAL, botones redondos
   de cara blanca) y pegado debajo el editor de la lista. Todo lo que se ve hace algo de verdad.
   Se usa en el sidebar, en el bloque del CMS, en /radio (ventanita) y en la ventana flotante, y se
   adapta al ancho que tiene (container query). Los dígitos e iconos son SVG en data URIs.
   ====================================================================== */
.bb-amp {
  --ico-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10L2 8zM14 3v10L8 8z'/%3E%3C/svg%3E");
  --ico-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3v10l6-5zM8 3v10l6-5z'/%3E%3C/svg%3E");
  --ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2v12l10-6z'/%3E%3C/svg%3E");
  --ico-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3h4v10H3zM9 3h4v10H9z'/%3E%3C/svg%3E");
  --ico-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3h10v10H3z'/%3E%3C/svg%3E");
  --ico-rep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h9V2l3 3-3 3V6H4v4h2v2H2z'/%3E%3Cpath d='M14 12H5v2l-3-3 3-3v2h7V6h-2V4h4z'/%3E%3C/svg%3E");
  --ico-vol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6h3l4-3v10L4 10H1z'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' d='M10 5.5a3.5 3.5 0 0 1 0 5M12 3.5a6 6 0 0 1 0 9'/%3E%3C/svg%3E");
  --ico-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6h3l4-3v10L4 10H1z'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M10 6l4 4M14 6l-4 4'/%3E%3C/svg%3E");
  --seg-0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3Cpolygon points='2.6,26 4,24.6 12,24.6 13.4,26 12,27.4 4,27.4'/%3E%3Cpolygon points='2,14.4 3.4,15.8 3.4,24 2,25.4 0.6,24 0.6,15.8'/%3E%3Cpolygon points='2,2.6 3.4,4 3.4,12.2 2,13.6 0.6,12.2 0.6,4'/%3E%3C/g%3E%3C/svg%3E");
  --seg-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3C/g%3E%3C/svg%3E");
  --seg-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3Cpolygon points='2,14.4 3.4,15.8 3.4,24 2,25.4 0.6,24 0.6,15.8'/%3E%3Cpolygon points='2.6,26 4,24.6 12,24.6 13.4,26 12,27.4 4,27.4'/%3E%3C/g%3E%3C/svg%3E");
  --seg-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3Cpolygon points='2.6,26 4,24.6 12,24.6 13.4,26 12,27.4 4,27.4'/%3E%3C/g%3E%3C/svg%3E");
  --seg-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2,2.6 3.4,4 3.4,12.2 2,13.6 0.6,12.2 0.6,4'/%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3C/g%3E%3C/svg%3E");
  --seg-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='2,2.6 3.4,4 3.4,12.2 2,13.6 0.6,12.2 0.6,4'/%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3Cpolygon points='2.6,26 4,24.6 12,24.6 13.4,26 12,27.4 4,27.4'/%3E%3C/g%3E%3C/svg%3E");
  --seg-6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='2,2.6 3.4,4 3.4,12.2 2,13.6 0.6,12.2 0.6,4'/%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3Cpolygon points='2,14.4 3.4,15.8 3.4,24 2,25.4 0.6,24 0.6,15.8'/%3E%3Cpolygon points='2.6,26 4,24.6 12,24.6 13.4,26 12,27.4 4,27.4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3C/g%3E%3C/svg%3E");
  --seg-7: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3C/g%3E%3C/svg%3E");
  --seg-8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3Cpolygon points='2.6,26 4,24.6 12,24.6 13.4,26 12,27.4 4,27.4'/%3E%3Cpolygon points='2,14.4 3.4,15.8 3.4,24 2,25.4 0.6,24 0.6,15.8'/%3E%3Cpolygon points='2,2.6 3.4,4 3.4,12.2 2,13.6 0.6,12.2 0.6,4'/%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3C/g%3E%3C/svg%3E");
  --seg-9: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3Cpolygon points='2.6,26 4,24.6 12,24.6 13.4,26 12,27.4 4,27.4'/%3E%3Cpolygon points='2,2.6 3.4,4 3.4,12.2 2,13.6 0.6,12.2 0.6,4'/%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3C/g%3E%3C/svg%3E");
  --seg-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3C/g%3E%3C/svg%3E");
  --seg-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='.8'%3E%3Cpolygon points='2.6,2 4,0.6 12,0.6 13.4,2 12,3.4 4,3.4'/%3E%3Cpolygon points='14,2.6 15.4,4 15.4,12.2 14,13.6 12.6,12.2 12.6,4'/%3E%3Cpolygon points='14,14.4 15.4,15.8 15.4,24 14,25.4 12.6,24 12.6,15.8'/%3E%3Cpolygon points='2.6,26 4,24.6 12,24.6 13.4,26 12,27.4 4,27.4'/%3E%3Cpolygon points='2,14.4 3.4,15.8 3.4,24 2,25.4 0.6,24 0.6,15.8'/%3E%3Cpolygon points='2,2.6 3.4,4 3.4,12.2 2,13.6 0.6,12.2 0.6,4'/%3E%3Cpolygon points='2.6,14 4,12.6 12,12.6 13.4,14 12,15.4 4,15.4'/%3E%3C/g%3E%3C/svg%3E");
  --seg-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 28'%3E%3Cg fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9'%3E%3Crect x='1.5' y='8' width='3' height='3'/%3E%3Crect x='1.5' y='17' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E");
  --seg-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 28'%3E%3Cpolygon fill='%23ffffff' fill-opacity='.22' stroke='%23ffffff' stroke-width='.9' points='7,2 9,2 3,26 1,26'/%3E%3C/svg%3E");
  --ico-shuf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7h1v5H2zM1 8h1v1H1zM1 11h3v1H1zM6 7h3v1H6zM8 8h1v1H8zM6 9h3v1H6zM6 10h1v1H6zM6 11h3v1H6zM11 7h3v1h-3zM13 8h1v1h-1zM12 9h2v1h-2zM13 10h1v1h-1zM11 11h3v1h-3z'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.2' d='M2.5 5.5Q7.5 0.8 12.2 4.6'/%3E%3Cpath d='M13.8 2.6 13.4 6.4 10.2 5.4z'/%3E%3C/svg%3E");
  --ico-eject: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3l5.5 6h-11z'/%3E%3Cpath d='M2.5 10.5h11v2.5h-11z'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 2.5h2.2v2.2H7zM5.8 6h3.4v5.8h1.3v1.7H5.8v-1.7h1.3V7.7H5.8z'/%3E%3C/svg%3E");
  --ico-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12v12H2zM3.5 3.5v2.5h2.5V3.5zm4 0v2.5h2.5V3.5zm4 0v2.5h1V3.5zM3.5 7.5v2.5h2.5V7.5zm4 0v2.5h2.5V7.5zm4 0v2.5h1V7.5zM3.5 11.5v1h2.5v-1zm4 0v1h2.5v-1zm4 0v1h1v-1z' fill-rule='evenodd'/%3E%3C/svg%3E");
  --ico-cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M8 2.6a5.4 5.4 0 1 0 0 10.8a5.4 5.4 0 1 0 0-10.8z'/%3E%3Cpath d='M6.3 6.3h3.4v3.4H6.3z'/%3E%3C/svg%3E");
  --ico-rand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v5.3l4.6-2.6 1 1.7L10 8l4.6 2.6-1 1.7L9 9.7V15H7V9.7l-4.6 2.6-1-1.7L6 8 1.4 5.4l1-1.7L7 6.3z'/%3E%3C/svg%3E");
  --ico-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 3h5.2l1.8 2H15v9H1zM2.6 6.6v5.8h10.8V6.6z'/%3E%3C/svg%3E");
  --ico-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8L3 8zM13.5 4v8L8.5 8z'/%3E%3C/svg%3E");
  --ico-fwd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4v8L7.5 8zM8 4v8l5-4z'/%3E%3C/svg%3E");
  --ico-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.5h10L8 11z'/%3E%3C/svg%3E");
  --ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4.4 4.4 3 8 6.6 11.6 3 13 4.4 9.4 8l3.6 3.6-1.4 1.4L8 9.4 4.4 13 3 11.6 6.6 8z'/%3E%3C/svg%3E");
  --amp-line: #1b1e26;
  --amp-ink: #15171c;
  --amp-blue: #1d4fae;
  --amp-face: linear-gradient(#ffffff, #f4f5f8 45%, #dfe2e8 100%);
  --amp-face-down: linear-gradient(#cfd3da, #eceef2);
  container-type: inline-size;
  position: relative;
  max-width: 100%;
  color: var(--amp-ink);
  /* Cromo claro de AIMP con un cepillado finísimo */
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .18) 0 1px, rgba(0, 0, 0, .018) 1px 2px), linear-gradient(#f2f3f6, #e4e7ed 40%, #d9dce3);
  border: 1px solid var(--amp-line);
  border-radius: 9px 9px 7px 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 -2px 0 1px rgba(120, 125, 136, .35), 3px 3px 0 #000;
  font: 11px/1.3 Tahoma, Verdana, sans-serif;
}
/* Iconos: máscaras SVG pintadas con currentColor (img-src permite data:). */
.bb-amp__b i, .bb-amp__rb i, .bb-amp__mute i, .bb-amp__ind, .bb-amp__state, .bb-amp__vis i, .bb-amp__pill i, .bb-amp__tab i, .bb-amp__pos i, .bb-amp__wb--info::after, .bb-amp__wb--close::after, .bb-dock__close::after { display: block; flex: none; width: 14px; height: 14px; margin: auto; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.bb-amp__b--prev { --ico: var(--ico-prev); }
.bb-amp__b--play { --ico: var(--ico-play); }
.bb-amp__b--pause { --ico: var(--ico-pause); }
.bb-amp__b--stop { --ico: var(--ico-stop); }
.bb-amp__b--next { --ico: var(--ico-next); }
.bb-amp__rb--rep, .bb-amp__ind--rep { --ico: var(--ico-rep); }
.bb-amp__rb--shuf, .bb-amp__ind--shuf { --ico: var(--ico-shuf); }
.bb-amp__rb--eject { --ico: var(--ico-eject); }
.bb-amp__mute { --ico: var(--ico-vol); }
.bb-amp__mute[aria-pressed="true"] { --ico: var(--ico-mute); }
.bb-amp__vis { --ico: var(--ico-down); }
.bb-amp__wb--info { --ico: var(--ico-info); }
.bb-amp__wb--close, .bb-dock__close { --ico: var(--ico-close); }
.bb-amp__ti--back { --ico: var(--ico-back); }
.bb-amp__ti--fwd { --ico: var(--ico-fwd); }
.bb-amp__pos i { --ico: var(--ico-grid); }
.bb-amp__pill--cur { --ico: var(--ico-cur); }
.bb-amp__pill--rand { --ico: var(--ico-rand); }
.bb-amp__pill--admin { --ico: var(--ico-folder); }

/* ---------- ventana principal ---------- */
.bb-amp__main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar bar" "menu menu" "lcd lcd" "seek seek" "ctrl ctrl" "vol side"; gap: 5px; padding: 0 6px 7px; }
/* Barra de título: pizarra con brillo arriba, ranuras-cápsula y botoncitos cuadrados */
.bb-amp__bar, .bb-amp__plbar { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 4px; color: #fff; border-bottom: 1px solid var(--amp-line); }
.bb-amp__bar { grid-area: bar; margin: 0 -6px; background: linear-gradient(#b4bac7 0, #7d8292 1px, #565b6d 3px, #3a4153 45%, #2a3347 70%, #2c364b); border-radius: 8px 8px 0 0; }
.bb-amp__plbar { background: linear-gradient(#bbbfca 0, #6f7688 1px, #3b465e 3px, #1b2740 45%, #0b1a31 65%, #222b3f 90%, #383e4f); border-top: 1px solid var(--amp-line); }
.bb-amp__ico { flex: none; width: 15px; height: 15px; padding: 1px; image-rendering: pixelated; background: var(--amp-face); border: 1px solid var(--amp-line); border-radius: 2px; }
.bb-amp__name { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.bb-amp__name > span { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: bold 12px/1 Tahoma, Verdana, sans-serif; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .6); }
/* Las ranuras de AIMP: una cápsula clara con perfil oscuro a cada lado del título */
.bb-amp__name::before, .bb-amp__name::after { content: ""; flex: 1 1 10px; min-width: 6px; height: 5px; background: linear-gradient(#fff, #c9cdd6); border: 1px solid #0d0f14; border-radius: 4px; box-shadow: 0 1px 0 rgba(255, 255, 255, .15); }
.bb-amp__wbtns { display: flex; flex: none; gap: 2px; }
.bb-amp__wb, a.bb-amp__wb:visited { position: relative; display: block; flex: none; width: 14px; height: 14px; padding: 0; color: var(--amp-ink); background: var(--amp-face); border: 1px solid #0d0f14; border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); cursor: var(--cur-hand); }
.bb-amp__wb::after { content: ""; position: absolute; }
.bb-amp__wb--shade::after { left: 3px; right: 3px; bottom: 3px; height: 3px; background: currentColor; }
.bb-amp__wb--shade[aria-pressed="true"]::after { top: 3px; bottom: auto; }
.bb-amp__wb--pop::after { inset: 2px; border: 1px solid currentColor; border-top-width: 3px; }
.bb-amp__wb--info::after, .bb-amp__wb--close::after { position: static; width: 10px; height: 10px; }
.bb-amp__wb[aria-expanded="true"], .bb-amp__wb[aria-pressed="true"] { background: var(--amp-face-down); }
.bb-amp__wb:hover { background: linear-gradient(#fff, #c9f7ff); }
.bb-amp__wb:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }
.bb-amp__mini { display: none; }

/* Menú de verdad (Archivo, Reproducir, Ver) y la etiqueta VISUAL del lóbulo derecho */
.bb-amp__menu { grid-area: menu; position: relative; z-index: 3; display: flex; align-items: center; height: 19px; margin: -5px -6px 0; padding: 0 4px; background: linear-gradient(#e2e4e8, #f9f9fb); border-bottom: 1px solid #b7bbc4; }
.bb-amp__mw { position: relative; }
.bb-amp__mi { padding: 1px 7px; font: 12px/16px Tahoma, Verdana, sans-serif; color: var(--amp-ink); background: none; border: 1px solid transparent; border-radius: 2px; cursor: var(--cur-hand); }
.bb-amp__mi::first-letter { text-decoration: underline; }
.bb-amp__mi:hover, .bb-amp__mi[aria-expanded="true"] { color: #fff; background: linear-gradient(#5677ad, #2c4a7c); border-color: #1a2d4f; }
.bb-amp__mi:focus-visible { outline: 1px dotted var(--amp-blue); outline-offset: -2px; }
.bb-amp__dd { position: absolute; top: calc(100% + 1px); left: 0; z-index: 950; min-width: 172px; margin: 0; padding: 3px; list-style: none; background: #f7f8fa; border: 1px solid var(--amp-line); border-radius: 0 4px 4px 4px; box-shadow: inset 0 0 0 1px #fff, 3px 3px 0 rgba(0, 0, 0, .55); }
.bb-amp__dd[hidden] { display: none; }
.bb-amp__dd [role^="menuitem"], .bb-amp__dd a[role^="menuitem"]:visited { display: block; width: 100%; padding: 3px 8px 3px 22px; font: 11px/1.35 Tahoma, Verdana, sans-serif; color: var(--amp-ink); text-align: left; text-decoration: none; white-space: nowrap; background: none; border: 0; border-radius: 2px; cursor: var(--cur-hand); }
.bb-amp__dd [role^="menuitem"]:hover, .bb-amp__dd [role^="menuitem"]:focus { color: #fff; text-decoration: none; background: linear-gradient(#5677ad, #2c4a7c); outline: none; }
.bb-amp__dd [aria-checked] { position: relative; }
.bb-amp__dd [role="menuitemcheckbox"][aria-checked="true"]::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 4px; margin-top: -4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.bb-amp__dd [role="menuitemradio"][aria-checked="true"]::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: currentColor; border-radius: 50%; }
.bb-amp__dd [role="separator"] { height: 0; margin: 3px 2px; border-top: 1px solid #a9aeb8; border-bottom: 1px solid #fff; }
.bb-amp__vislbl { margin-left: auto; padding-right: 6px; font: bold 8px/1 var(--font-pixel); letter-spacing: 1px; color: #1f2229; }

/* LCD azul acero de AIMP: brillo arriba, scanlines y perfil oscuro */
.bb-amp__lcd { grid-area: lcd; position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "state time viz" "info info info" "title title title"; align-items: center; gap: 3px 5px; min-width: 0; padding: 5px 7px 3px; overflow: hidden; color: #fff; background: repeating-linear-gradient(0deg, rgba(10, 20, 40, .16) 0 1px, transparent 1px 3px), linear-gradient(#4a5d7b, #5d6e88 35%, #61728c 62%, #3f506a 63%, #34445e); border: 1px solid #14171e; border-radius: 8px; box-shadow: 0 0 0 1px #9a9fa9, 0 0 0 2px #f4f5f8, inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 12px rgba(0, 0, 0, .35); }
.bb-amp__lcd::before { content: ""; position: absolute; inset: 0 0 auto; height: 45%; background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .04)); border-radius: 7px 7px 50% 50% / 7px 7px 10px 10px; pointer-events: none; }
.bb-amp__state { grid-area: state; width: 9px; height: 9px; --ico: var(--ico-stop); opacity: .9; }
.bb-amp.is-playing .bb-amp__state { --ico: var(--ico-play); }
.bb-amp.is-paused .bb-amp__state { --ico: var(--ico-pause); }
/* Dígitos de 7 segmentos huecos, con los segmentos apagados a la vista (CSS de abajo, data URIs) */
.bb-amp__time { grid-area: time; display: flex; gap: 2px; filter: drop-shadow(0 0 2px rgba(205, 240, 255, .75)); }
.bb-amp__time .g, .bb-amp__clock .g { display: block; flex: none; width: 13px; height: 23px; font-size: 0; color: transparent; background: var(--lit, none) center / 100% 100% no-repeat, var(--seg-ghost) center / 100% 100% no-repeat; }
.bb-amp .g0 { --lit: var(--seg-0); } .bb-amp .g1 { --lit: var(--seg-1); } .bb-amp .g2 { --lit: var(--seg-2); } .bb-amp .g3 { --lit: var(--seg-3); } .bb-amp .g4 { --lit: var(--seg-4); }
.bb-amp .g5 { --lit: var(--seg-5); } .bb-amp .g6 { --lit: var(--seg-6); } .bb-amp .g7 { --lit: var(--seg-7); } .bb-amp .g8 { --lit: var(--seg-8); } .bb-amp .g9 { --lit: var(--seg-9); } .bb-amp .gm { --lit: var(--seg-m); }
.bb-amp .bb-amp__time .gc, .bb-amp .bb-amp__clock .gc { width: 5px; background: var(--seg-c) center / 100% 100% no-repeat; }
.bb-amp .bb-amp__clock .gs { width: 4px; background: none; }
.bb-amp .bb-amp__clock .gl { width: 6px; background: var(--seg-l) center / 100% 100% no-repeat; }
.bb-amp.is-paused .bb-amp__time { animation: bb-amp-blink 1s steps(1) infinite; }
@keyframes bb-amp-blink { 50% { opacity: .2; } }
.bb-amp__info { grid-area: info; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; font: 8px/1 var(--font-pixel); text-transform: uppercase; }
.bb-amp__kv { display: inline-flex; align-items: center; gap: 2px; }
.bb-amp__kv b, .bb-amp__tag { display: inline-block; min-width: 18px; padding: 1px 3px; font-weight: normal; text-align: center; border-radius: 3px; }
.bb-amp__kv b { color: #1b2a47; background: #f2f6fb; box-shadow: inset 0 -1px 0 #b4c0d4; }
.bb-amp__tag { color: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .35); }
.bb-amp__tag.is-on { color: #1b2a47; background: #f2f6fb; border-color: #f2f6fb; box-shadow: inset 0 -1px 0 #b4c0d4; }
.bb-amp__inds { display: inline-flex; gap: 3px; }
.bb-amp__ind { width: 13px; height: 13px; margin: 0; opacity: .25; }
.bb-amp:has([data-radio-repeat][aria-pressed="true"]) .bb-amp__ind--rep, .bb-amp:has([data-radio-shuffle][aria-pressed="true"]) .bb-amp__ind--shuf { opacity: 1; }
/* Espectro de bloques LED: la rejilla apagada es el fondo y el lienzo pinta los bloques encendidos */
.bb-amp__vizbox { grid-area: viz; position: relative; align-self: stretch; display: flex; align-items: flex-end; min-width: 0; padding: 0 5px; }
.bb-amp__vizbox::before, .bb-amp__vizbox::after { content: ""; position: absolute; top: 2px; bottom: 1px; width: 3px; border: 1px solid rgba(255, 255, 255, .45); }
.bb-amp__vizbox::before { left: 0; border-right: 0; }
.bb-amp__vizbox::after { right: 0; border-left: 0; }
.bb-amp__viz { display: block; width: 100%; height: 27px; image-rendering: pixelated; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='3'%3E%3Crect y='1' width='3' height='2' fill='%23ffffff' fill-opacity='.09'/%3E%3C/svg%3E") left bottom / 4px 3px; }
.bb-amp__title { grid-area: title; position: relative; overflow: hidden; white-space: nowrap; font: 13px/1.3 Tahoma, Verdana, sans-serif; letter-spacing: .4px; color: #fff; text-shadow: 0 0 3px rgba(190, 230, 255, .6); }
.bb-amp__title > span { display: inline-block; }
.bb-amp__msg { margin: 6px 0; font: 16px/1.2 var(--font-term); color: #fff; }
.bb-amp--off .bb-amp__lcd { display: block; }

/* Lóbulo derecho: VISUAL (cambia el visual) y repetir/aleatorio con su lucecita */
.bb-amp__side { grid-area: side; display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.bb-amp__vis { display: none; width: 34px; height: 14px; padding: 0; color: var(--amp-ink); background: var(--amp-face); border: 1px solid var(--amp-line); border-radius: 8px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); cursor: var(--cur-hand); }
.bb-amp__vis i { width: 9px; height: 9px; }
.bb-amp__rb, .bb-amp__mute, a.bb-amp__rb:visited { position: relative; display: flex; flex: none; width: 22px; height: 22px; padding: 0; color: var(--amp-ink); background: radial-gradient(circle at 50% 35%, #fff, #f1f2f5 45%, #c9ccd3 85%); border: 1px solid var(--amp-line); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), inset 0 -1px 2px rgba(0, 0, 0, .2); cursor: var(--cur-hand); }
.bb-amp__rb i, .bb-amp__mute i { width: 12px; height: 12px; }
.bb-amp__rb:disabled { color: #9a9ea6; cursor: default; }
.bb-amp__side .bb-amp__rb::after { content: ""; position: absolute; top: 50%; right: -8px; width: 5px; height: 5px; margin-top: -3px; background: radial-gradient(circle at 40% 35%, #c5c9d0, #7d838c); border: 1px solid #5a5f68; border-radius: 50%; }
.bb-amp__side .bb-amp__rb[aria-pressed="true"]::after { background: radial-gradient(circle at 40% 35%, #e8f6ff, #3fa0ff 60%, #1b5fc4); border-color: #174a9a; box-shadow: 0 0 5px #49a8ff; }
.bb-amp__rb[aria-pressed="true"] { color: var(--amp-blue); }
.bb-amp__mute[aria-pressed="true"] { color: #b3121b; }

/* Barra de posición: ranura fina y cápsula blanca larga; a la derecha la bahía de ⏏ PL ML */
.bb-amp__seekrow { grid-area: seek; display: flex; align-items: center; gap: 6px; min-width: 0; }
.bb-amp__seek, .bb-amp__vol { -webkit-appearance: none; appearance: none; height: 16px; margin: 0; background: transparent; cursor: var(--cur-hand); }
.bb-amp__seek { flex: 1; min-width: 0; }
.bb-amp__seek::-webkit-slider-runnable-track, .bb-amp__vol::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #4f86d6 0 var(--p, 0%), transparent var(--p, 0%)), linear-gradient(#5d626b, #8f949c); border: 1px solid #2a2e36; border-radius: 3px; box-shadow: 0 1px 0 #fff; }
.bb-amp__seek::-moz-range-track, .bb-amp__vol::-moz-range-track { height: 4px; background: linear-gradient(90deg, #4f86d6 0 var(--p, 0%), transparent var(--p, 0%)), linear-gradient(#5d626b, #8f949c); border: 1px solid #2a2e36; border-radius: 3px; box-shadow: 0 1px 0 #fff; }
.bb-amp__seek::-webkit-slider-thumb, .bb-amp__vol::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 34px; height: 13px; margin-top: -5px; background: var(--amp-face); border: 1px solid var(--amp-line); border-radius: 7px; box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .35); }
.bb-amp__seek::-moz-range-thumb, .bb-amp__vol::-moz-range-thumb { box-sizing: border-box; width: 34px; height: 13px; background: var(--amp-face); border: 1px solid var(--amp-line); border-radius: 7px; box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .35); }
.bb-amp__vol::-webkit-slider-thumb { width: 22px; }
.bb-amp__vol::-moz-range-thumb { width: 22px; }
.bb-amp__seek:disabled { cursor: default; }
.bb-amp__seek:disabled::-webkit-slider-thumb { background: linear-gradient(#f2f3f5, #d7dae0); }
.bb-amp__bay { display: flex; flex: none; align-items: center; gap: 2px; padding: 2px 3px; background: linear-gradient(#c4c8cf, #e9ebef); border: 1px solid #6d727b; border-radius: 13px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 1px 0 #fff; }
.bb-amp__bay .bb-amp__rb { width: 20px; height: 20px; }
.bb-amp__pill, a.bb-amp__pill:visited { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; font: bold 12px/1 Tahoma, Verdana, sans-serif; color: var(--amp-ink); text-decoration: none; background: var(--amp-face); border: 1px solid var(--amp-line); border-radius: 10px; box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .8); cursor: var(--cur-hand); }
.bb-amp__pill i { width: 12px; height: 12px; }
.bb-amp__pill:hover { color: var(--amp-ink); text-decoration: none; background: linear-gradient(#ffffff, #dcfbff 50%, #a6eef6); }
.bb-amp__pill[aria-expanded="true"] { color: var(--amp-blue); background: var(--amp-face-down); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }

/* Los cinco botones: cara blanca con aro gris, metidos en su bahía oscura */
.bb-amp__ctrl { grid-area: ctrl; position: relative; z-index: 1; justify-self: center; display: flex; align-items: center; gap: 1px; padding: 3px 4px; background: linear-gradient(#aeb1b7, #a1a4ad 22%, #7b7e87 42%, #6e737a 80%, #7c7f84); border: 1px solid var(--amp-line); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 #fff; }
.bb-amp__b { display: flex; width: 28px; height: 28px; padding: 0; color: #0d0f14; background: radial-gradient(circle at 50% 38%, #fff 0, #fcfdfb 40%, #dfe2e7 70%, #b9bdc5 100%); border: 2px solid #5d6168; border-radius: 50%; box-shadow: 0 0 0 1px #2a2d33, inset 0 -2px 2px rgba(0, 0, 0, .14), inset 0 2px 1px #fff; cursor: var(--cur-hand); }
.bb-amp__b i { width: 11px; height: 11px; }
.bb-amp__b:active, .bb-amp__rb:active, .bb-amp__mute:active, .bb-amp__pill:active, .bb-amp__wb:active { background: radial-gradient(circle at 50% 60%, #f1f2f4, #c9cdd3 70%, #a7acb4); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.bb-amp__b[aria-pressed="true"] { color: #2f63c9; }
.bb-amp__b:focus-visible, .bb-amp__rb:focus-visible, .bb-amp__mute:focus-visible, .bb-amp__pill:focus-visible, .bb-amp__vis:focus-visible, .bb-amp__tab:focus-visible, .bb-amp__seek:focus-visible, .bb-amp__vol:focus-visible { outline: 1px dotted var(--amp-blue); outline-offset: 2px; }

/* Volumen: panel claro con altavoz, puntos que crecen con el volumen y el corazón donde AIMP pone su logo */
.bb-amp__volrow { grid-area: vol; position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px 3px 4px; background: linear-gradient(#fbfbfd, #eceef1 45%, #d6d8de); border: 1px solid #45484f; border-radius: 16px 6px 6px 16px; box-shadow: inset 0 1px 0 #fff; }
.bb-amp__volbox { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.bb-amp__dots { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; height: 8px; padding-right: 2px; }
.bb-amp__dots i { flex: none; width: var(--d); height: var(--d); background: #fff; border: 1px solid #a5aab3; border-radius: 50%; }
.bb-amp__dots i:nth-child(1) { --d: 3px; } .bb-amp__dots i:nth-child(2) { --d: 4px; } .bb-amp__dots i:nth-child(3) { --d: 5px; }
.bb-amp__dots i:nth-child(4) { --d: 6px; } .bb-amp__dots i:nth-child(5) { --d: 7px; } .bb-amp__dots i:nth-child(6) { --d: 8px; }
.bb-amp__dots i.on { background: radial-gradient(circle at 40% 35%, #e8f6ff, #4d9cf0 60%, #1d4fae); border-color: #183f8a; }
.bb-amp__vol { width: 100%; min-width: 40px; height: 13px; }
.bb-amp__brand { display: none; }
@container (max-width: 429px) {
  .bb-amp .bb-amp__brand b { display: none; }
}

/* Solo audio: el iframe de YouTube existe (si no, no suena) pero fuera de pantalla, sin vídeo. */
.bb-amp__video { position: fixed; top: 0; left: -400px; width: 200px; height: 200px; overflow: hidden; pointer-events: none; }
.bb-amp__video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- editor de la lista, pegado debajo ---------- */
.bb-amp__pl[hidden], .bb-amp__note[hidden] { display: none; }
.bb-amp__plbar .bb-amp__name > span { font-size: 11px; }
.bb-amp__note { margin: 0; padding: 4px 8px; font: 10px/1.35 Tahoma, Verdana, sans-serif; color: #1c2230; background: #fff8c4; border-bottom: 1px solid #b7bbc4; }
.bb-amp__tabs { display: flex; align-items: center; gap: 4px; height: 21px; padding: 0 6px; background: linear-gradient(#e6e8ec, #fbfbfd); border-bottom: 1px solid #b7bbc4; }
.bb-amp__tab { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 0 2px; font: 12px/1 Tahoma, Verdana, sans-serif; color: #5b5f68; background: none; border: 0; cursor: var(--cur-hand); }
.bb-amp__tab i { width: 9px; height: 9px; }
.bb-amp__tab:hover { color: var(--amp-blue); }
.bb-amp__tab:disabled { color: #9a9ea6; cursor: default; }
.bb-amp__plname { flex: 1; min-width: 0; overflow: hidden; padding: 0 6px; font: bold 12px/1 Tahoma, Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: #233e6c; }
.bb-amp__tabs .bb-amp__tab--fwd { margin-left: auto; }
.bb-amp__pos { display: inline-flex; flex: none; align-items: center; gap: 2px; margin-left: 6px; font: 12px/1 Tahoma, Verdana, sans-serif; color: var(--amp-ink); }
.bb-amp__pos i { width: 10px; height: 10px; }
.bb-amp__plbox { position: relative; margin: 5px 6px 0; background: #364967; border: 1px solid var(--amp-line); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.bb-amp__list { max-height: 170px; overflow: auto; margin: 0; padding: 1px 0; list-style: none; font: 11px/1.5 Tahoma, Verdana, sans-serif; background: #364967; scrollbar-width: thin; scrollbar-color: #e3e5ea #a3a7b0; }
.bb-amp__list::-webkit-scrollbar { width: 11px; }
.bb-amp__list::-webkit-scrollbar-track { background: linear-gradient(90deg, #9da1aa, #c4c7cd); border-left: 1px solid var(--amp-line); }
.bb-amp__list::-webkit-scrollbar-thumb { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .28) 2px 3px) center / 5px 9px no-repeat, var(--amp-face); border: 1px solid var(--amp-line); border-radius: 3px; }
.bb-amp__track, .bb-amp__track:visited { display: flex; gap: 5px; padding: 0 6px; color: #fff; text-decoration: none; white-space: nowrap; border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
.bb-amp__track:hover { color: #fff; background: #435a7c; text-decoration: none; }
.bb-amp__track:focus-visible { color: #fff; outline: 1px dotted #fff; outline-offset: -2px; }
.bb-amp__track.is-current { color: #fff; background: #5f7598; border-top-color: #4a5f80; border-bottom-color: #8296b6; }
.bb-amp__track .n { flex: none; color: #b4c2da; }
.bb-amp__track .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bb-amp__track .d { flex: none; font-variant-numeric: tabular-nums; }
.bb-amp__track.is-current .n { color: inherit; }
.bb-amp__plinfo { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0; padding: 2px 6px 3px; font: 11px/1.3 Tahoma, Verdana, sans-serif; letter-spacing: .4px; color: #e6ecf6; background: #2a3a5a; border-top: 1px solid #16223a; }
.bb-amp__plinfo b { font-weight: normal; color: #fff; }
.bb-amp__plfoot { position: relative; display: flex; align-items: center; gap: 4px; padding: 5px 16px 7px 6px; }
.bb-amp__clock { display: inline-flex; flex: none; align-items: center; height: 18px; margin: 0 auto; padding: 0 9px; background: linear-gradient(#2a3d60, #101b31); border: 1px solid var(--amp-line); border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .25); filter: drop-shadow(0 0 1px rgba(205, 240, 255, .5)); }
.bb-amp .bb-amp__clock .g { width: 7px; height: 11px; }
.bb-amp .bb-amp__clock .gc { width: 3px; }
.bb-amp__grip { position: absolute; right: 3px; bottom: 3px; width: 11px; height: 11px; background: linear-gradient(135deg, transparent 0 45%, #6d727b 45% 52%, transparent 52% 62%, #6d727b 62% 69%, transparent 69% 79%, #6d727b 79% 86%, transparent 86%); }

/* Con sitio (bloque del CMS, /radio, sidebar en el móvil, ventanita): como AIMP, con el lóbulo derecho. */
@container (min-width: 320px) {
  .bb-amp__main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "bar bar bar" "menu menu menu" "lcd lcd side" "seek seek seek" "ctrl vol vol"; gap: 6px 4px; }
  .bb-amp__menu { margin-right: -6px; }
  .bb-amp__side { flex-direction: column; justify-content: flex-start; gap: 6px; margin: -6px -6px 0 0; padding: 4px 13px 6px 5px; background: linear-gradient(90deg, #d5d8de, #eef0f3); border: 1px solid #6d727b; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; box-shadow: inset 1px 0 0 #fff; }
  .bb-amp__vis { display: flex; }
  .bb-amp__side .bb-amp__rb { width: 24px; height: 24px; }
  .bb-amp__lcd { grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "state time info viz" "title title title title"; gap: 3px 8px; padding: 7px 9px 3px; }
  .bb-amp__time .g { width: 17px; height: 30px; }
  .bb-amp .bb-amp__time .gc { width: 6px; }
  .bb-amp__info { display: grid; grid-template-columns: auto auto; gap: 4px 6px; }
  .bb-amp__inds { grid-column: 1 / -1; display: none; }
  .bb-amp__viz { height: 33px; }
  .bb-amp__title { font-size: 15px; }
  .bb-amp__ctrl { justify-self: start; }
  .bb-amp__b { width: 32px; height: 32px; }
  .bb-amp__b i { width: 12px; height: 12px; }
  .bb-amp__volrow { margin-left: -14px; padding-left: 16px; border-radius: 0 6px 6px 0; border-left: 0; }
  .bb-amp__brand { display: flex; flex: none; align-items: center; gap: 5px; padding-right: 8px; }
  .bb-amp__brand b { font: bold 8px/1 var(--font-pixel); letter-spacing: 1px; color: #23262d; }
  .bb-amp__brand img { width: 24px; height: 24px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #1d4fae); }
  .bb-amp__volrow::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; background: linear-gradient(135deg, transparent 0 45%, #6d727b 45% 52%, transparent 52% 62%, #6d727b 62% 69%, transparent 69% 79%, #6d727b 79% 86%, transparent 86%); }
  .bb-amp__list { max-height: 270px; font-size: 12px; }
}
/* Estrecho (sidebar de 200 px): textos de las píldoras y de Atrás/Adelante solo para el lector */
@container (max-width: 319px) {
  .bb-amp__pill .bb-amp__pt, .bb-amp__tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bb-amp__pill--i { padding: 0 5px; }
  .bb-amp__mi { padding: 1px 5px; font-size: 11px; }
  .bb-amp__vislbl { display: none; }
  .bb-amp__plbar .bb-amp__name > span { font-size: 10px; letter-spacing: 0; }
  .bb-amp__name::before, .bb-amp__name::after { min-width: 3px; }
  .bb-amp__dd { min-width: 150px; }
  .bb-amp__mw--view .bb-amp__dd { left: auto; right: 0; border-radius: 4px 0 4px 4px; }
}

/* Modo mini (el botón ▬ de la barra): solo la barra, con el tiempo y lo que suena */
.bb-amp.is-shade .bb-amp__main > :not(.bb-amp__bar), .bb-amp.is-shade .bb-amp__pl, .bb-amp.is-shade .bb-amp__note { display: none; }
.bb-amp.is-shade .bb-amp__main { display: block; padding: 0; }
.bb-amp.is-shade .bb-amp__bar { margin: 0; border-radius: 8px 8px 6px 6px; border-bottom: 0; }
.bb-amp.is-shade .bb-amp__name::before { display: none; }
.bb-amp.is-shade .bb-amp__mini { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 1px 6px; font: 15px/1 var(--font-term); white-space: nowrap; text-overflow: ellipsis; color: #e6f3ff; background: #1c2a45; border: 1px solid #0d0f14; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.bb-amp.is-shade .bb-amp__name { flex: none; }
.bb-amp.is-shade .bb-amp__name::after { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .bb-amp__title.is-long > span { animation: bb-amp-scroll var(--amp-scroll, 14s) linear infinite; }
  .bb-amp__title.is-long > span::after { content: "\00a0\00a0***\00a0\00a0" attr(data-loop) "\00a0\00a0***\00a0\00a0"; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-amp.is-paused .bb-amp__time { animation: none; }
}
@keyframes bb-amp-scroll { to { transform: translateX(-50%); } }
html.is-quiet .bb-amp__title.is-long > span { animation: none; }
html.is-quiet .bb-amp__title.is-long > span::after { content: none; }
html.is-quiet .bb-amp.is-paused .bb-amp__time { animation: none; }
.bb-side .bb-amp { margin-bottom: 12px; }
.bb-amp--block { max-width: 560px; margin: 2px auto 4px; }
.bb-statusbar__cell--radio, .bb-statusbar__cell--radio:visited { font-weight: bold; color: #000; text-decoration: none; }
.bb-statusbar__cell--radio:hover { color: #fff; background: #0a246a; text-decoration: none; }

/* Ventana flotante: aparece al cambiar de página mientras suena; la × de su barra la para */
.bb-amp--dock { position: fixed; right: 12px; bottom: 48px; z-index: 900; width: min(360px, calc(100vw - 24px)); }
.bb-amp--dock .bb-amp__wb--pop, .bb-amp--dock .bb-amp__note { display: none; }
.bb-amp--dock .bb-amp__list { max-height: max(80px, min(220px, calc(100vh - 430px))); }
.bb-amp__wb--close:hover, .bb-dock__close:hover { color: #fff; background: linear-gradient(#ff8a8a, #c8141c); }
/* Cambio de página sin recarga en curso: el reloj de arena de Win98. */
html.is-navigating, html.is-navigating * { cursor: url(/s/assets/cursors/arrow-busy.02276ff9ac.png) 0 0, progress !important; }
/* El contenido recibe el foco tras el cambio de página (para el lector de pantalla); no es un control. */
main[tabindex="-1"]:focus { outline: none; }

/* /radio: ventanita emergente */
body.bb-popup { padding: 8px; background: #000 url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); }
body.bb-popup .bb-amp { max-width: 420px; margin: 0 auto; }
body.bb-popup .bb-amp__list { max-height: 50vh; }
.bb-popup__credit { max-width: 420px; margin: 8px auto 0; text-align: right; }

/* ===== Temas v2: efectos, easter eggs y miniaturas de presets ===== */
/* Fondos pixel art de assets/_generators/backgrounds-v2.cjs; efectos de public/js/effects.js y
   easter eggs de public/js/eggs.js (docs/EASTER_EGGS.md). Todo lo que se mueve se apaga con
   reduced-motion y con el modo tranquilo, y nada de esto captura el puntero salvo los avisos. */
:root {
  --gel-gold: linear-gradient(#fff6c8 0%, #ffd95a 49%, #e6a817 50%, #a8740a 100%);
  --gel-chrome: linear-gradient(#ffffff 0%, #dfe3ea 49%, #9aa3b0 50%, #c9ced6 100%);
  --gel-sunset: linear-gradient(#fff3b0 0%, #ffd27a 45%, #ff8ac6 50%, #ff4fae 100%);
}

/* Miniaturas de la galería de presets (contrato .pe-preset--<clave>: b = barra, i = fondo). */
.pe-preset--ria-de-noche i, .pe-preset--iturribide-de-noche i, .pe-preset--somera i, .pe-preset--guggenheim i, .pe-preset--gaztetxe i, .pe-preset--trap-lila i, .pe-preset--arcade i, .pe-preset--mendiak i,
.pe-preset--hustler-dorado i, .pe-preset--club-laser i, .pe-preset--bola-disco i, .pe-preset--pantallazo-azul i, .pe-preset--mascota-pixel i,
.pe-preset--metro-vaporwave i { background-repeat: repeat; image-rendering: pixelated; }
.pe-preset--ria-de-noche b { background: var(--gel-gold); color: #1a1200; }
.pe-preset--ria-de-noche i { background-color: #070b1f; background-image: url(/s/assets/textures/bg-ria-noche.f1fa725c3b.gif); background-position: -8px -76px; }
.pe-preset--iturribide-de-noche b { background: linear-gradient(#ff7ac8 0%, #e8259a 49%, #b8007a 50%, #6a0050 100%); color: #fff; }
.pe-preset--iturribide-de-noche i { background-color: #0c0830; background-image: url(/s/assets/textures/bg-iturribide-noche.3b3687ab39.gif); background-position: 0 -84px; }
.pe-preset--somera b { background: var(--gel-sunset); color: #2a0040; }
.pe-preset--somera i { background-color: #2a1660; background-image: url(/s/assets/textures/bg-somera.7779639d70.gif); background-position: -2px -78px; }
.pe-preset--guggenheim b { background: var(--gel-chrome); color: #0a1e3c; }
.pe-preset--guggenheim i { background-color: #2f8ae8; background-image: url(/s/assets/textures/bg-guggenheim.9253e4ce19.gif); background-position: -70px -52px; }
.pe-preset--gaztetxe b { background: #b6ff3b; color: #141414; }
.pe-preset--gaztetxe i { background-color: #241915; background-image: url(/s/assets/textures/bg-gaztetxe.4696112ee4.gif); background-position: -44px -86px; }
.pe-preset--trap-lila b { background: var(--gel-purple); color: #fff; }
.pe-preset--trap-lila i { background-color: #14042e; background-image: url(/s/assets/textures/bg-trap-lila.ef150a1fcf.gif); background-position: -14px -14px; }
.pe-preset--arcade b { background: #d6006f; color: #fff; }
.pe-preset--arcade i { background-color: #000; background-image: url(/s/assets/textures/bg-arcade.128aa6b7c6.gif); background-position: -36px 0; }
.pe-preset--mendiak b { background: var(--gel-eh); color: #00230e; }
.pe-preset--mendiak i { background-color: #24184f; background-image: url(/s/assets/textures/bg-mendiak.c21ab0d950.gif); background-position: -16px -72px; }
.pe-preset--hustler-dorado b { background: var(--gel-gold); color: #2a1a00; }
.pe-preset--hustler-dorado i { background-color: #050400; background-image: url(/s/assets/textures/bg-oro.62e227ec2a.gif); background-position: -8px -12px; }
.pe-preset--club-laser b { background: var(--gel-lime); color: #0b2000; }
.pe-preset--club-laser i { background-color: #04000a; background-image: url(/s/assets/textures/bg-club-laser.9177d2a05f.gif); background-position: 0 -8px; }
.pe-preset--bola-disco b { background: var(--gel-chrome); color: #1a0626; }
.pe-preset--bola-disco i { background-color: #0a0012; background-image: url(/s/assets/textures/bg-bola-disco.d064a02cfe.gif); background-position: -14px -34px; }
.pe-preset--pantallazo-azul b { background: #000080; color: #fff; }
.pe-preset--pantallazo-azul i { background-color: #0000aa; background-image: url(/s/assets/textures/bg-bsod.1aae6d96fb.gif); background-position: 0 -2px; }
.pe-preset--mascota-pixel b { background: #306230; color: #e0f8a0; }
.pe-preset--mascota-pixel i { background-color: #9bbc0f; background-image: url(/s/assets/textures/bg-lcd-verde.ffc092edd2.gif); background-position: -10px -38px; }
.pe-preset--metro-vaporwave b { background: var(--gel-sunset); color: #2a0040; }
.pe-preset--metro-vaporwave i { background-color: #120326; background-image: url(/s/assets/textures/bg-vaporwave.147fff7ef3.gif); background-position: -40px -58px; }

/* Muestras del selector de fondos (contrato .pe-tex--<clave>). */
.pe-tex--ria-noche i { background-image: url(/s/assets/textures/bg-ria-noche.f1fa725c3b.gif); background-position: -8px -76px; }
.pe-tex--iturribide-noche i { background-image: url(/s/assets/textures/bg-iturribide-noche.3b3687ab39.gif); background-position: -118px -112px; }
.pe-tex--somera i { background-image: url(/s/assets/textures/bg-somera.7779639d70.gif); background-position: -46px -120px; }
.pe-tex--guggenheim i { background-image: url(/s/assets/textures/bg-guggenheim.9253e4ce19.gif); background-position: -110px -70px; }
.pe-tex--gaztetxe i { background-image: url(/s/assets/textures/bg-gaztetxe.4696112ee4.gif); background-position: -44px -84px; }
.pe-tex--trap-lila i { background-image: url(/s/assets/textures/bg-trap-lila.ef150a1fcf.gif); background-position: -14px -14px; }
.pe-tex--arcade i { background-image: url(/s/assets/textures/bg-arcade.128aa6b7c6.gif); background-position: -36px 0; }
.pe-tex--mendiak i { background-image: url(/s/assets/textures/bg-mendiak.c21ab0d950.gif); background-position: -16px -70px; }
.pe-tex--oro i { background-image: url(/s/assets/textures/bg-oro.62e227ec2a.gif); background-position: -8px -10px; }
.pe-tex--club-laser i { background-image: url(/s/assets/textures/bg-club-laser.9177d2a05f.gif); background-position: 0 -6px; }
.pe-tex--bola-disco i { background-image: url(/s/assets/textures/bg-bola-disco.d064a02cfe.gif); background-position: -14px -32px; }
.pe-tex--bsod i { background-image: url(/s/assets/textures/bg-bsod.1aae6d96fb.gif); background-position: 0 -2px; }
.pe-tex--lcd-verde i { background-image: url(/s/assets/textures/bg-lcd-verde.ffc092edd2.gif); background-position: -10px -36px; }
.pe-tex--vaporwave i { background-image: url(/s/assets/textures/bg-vaporwave.147fff7ef3.gif); background-position: -40px -56px; }
.pe-tex--cromo-bb i { background-image: url(/s/assets/textures/bg-cromo-bb.20d61b6ca7.gif); background-position: -14px -18px; }

/* Modo tranquilo y reduced-motion: la primera imagen congelada de cada fondo. */
html.is-quiet .pe-preset--ria-de-noche i, html.is-quiet .pe-tex--ria-noche i { background-image: url(/s/assets/textures/bg-ria-noche.still.a4b5fe9939.png); }
html.is-quiet .pe-preset--iturribide-de-noche i, html.is-quiet .pe-tex--iturribide-noche i { background-image: url(/s/assets/textures/bg-iturribide-noche.still.d95068a8d0.png); }
html.is-quiet .pe-preset--somera i, html.is-quiet .pe-tex--somera i { background-image: url(/s/assets/textures/bg-somera.still.bd0b7c34f2.png); }
html.is-quiet .pe-preset--guggenheim i, html.is-quiet .pe-tex--guggenheim i { background-image: url(/s/assets/textures/bg-guggenheim.still.d10096789d.png); }
html.is-quiet .pe-preset--gaztetxe i, html.is-quiet .pe-tex--gaztetxe i { background-image: url(/s/assets/textures/bg-gaztetxe.still.52d732b951.png); }
html.is-quiet .pe-preset--trap-lila i, html.is-quiet .pe-tex--trap-lila i { background-image: url(/s/assets/textures/bg-trap-lila.still.59bfb9422a.png); }
html.is-quiet .pe-preset--arcade i, html.is-quiet .pe-tex--arcade i { background-image: url(/s/assets/textures/bg-arcade.still.a5c6079216.png); }
html.is-quiet .pe-preset--mendiak i, html.is-quiet .pe-tex--mendiak i { background-image: url(/s/assets/textures/bg-mendiak.still.c95b26987a.png); }
html.is-quiet .pe-preset--hustler-dorado i, html.is-quiet .pe-tex--oro i { background-image: url(/s/assets/textures/bg-oro.still.45b586be2d.png); }
html.is-quiet .pe-preset--club-laser i, html.is-quiet .pe-tex--club-laser i { background-image: url(/s/assets/textures/bg-club-laser.still.c61c94ac9a.png); }
html.is-quiet .pe-preset--bola-disco i, html.is-quiet .pe-tex--bola-disco i { background-image: url(/s/assets/textures/bg-bola-disco.still.c67ced610a.png); }
html.is-quiet .pe-preset--pantallazo-azul i, html.is-quiet .pe-tex--bsod i { background-image: url(/s/assets/textures/bg-bsod.still.e80b9b36aa.png); }
html.is-quiet .pe-preset--mascota-pixel i, html.is-quiet .pe-tex--lcd-verde i { background-image: url(/s/assets/textures/bg-lcd-verde.still.44555f7274.png); }
html.is-quiet .pe-preset--metro-vaporwave i, html.is-quiet .pe-tex--vaporwave i { background-image: url(/s/assets/textures/bg-vaporwave.still.2b00bcfde2.png); }
html.is-quiet .pe-tex--cromo-bb i, html.is-quiet .bb-egg-dialog__preview { background-image: url(/s/assets/textures/bg-cromo-bb.still.ab8967b1aa.png); }
html.is-quiet .bb-egg__blinkie { background-image: url(/s/assets/textures/fx/blinkie-bb-secret.still.f7e528e0c3.png); }
@media (prefers-reduced-motion: reduce) {
  .pe-preset--ria-de-noche i, .pe-tex--ria-noche i { background-image: url(/s/assets/textures/bg-ria-noche.still.a4b5fe9939.png); }
  .pe-preset--iturribide-de-noche i, .pe-tex--iturribide-noche i { background-image: url(/s/assets/textures/bg-iturribide-noche.still.d95068a8d0.png); }
  .pe-preset--somera i, .pe-tex--somera i { background-image: url(/s/assets/textures/bg-somera.still.bd0b7c34f2.png); }
  .pe-preset--guggenheim i, .pe-tex--guggenheim i { background-image: url(/s/assets/textures/bg-guggenheim.still.d10096789d.png); }
  .pe-preset--gaztetxe i, .pe-tex--gaztetxe i { background-image: url(/s/assets/textures/bg-gaztetxe.still.52d732b951.png); }
  .pe-preset--trap-lila i, .pe-tex--trap-lila i { background-image: url(/s/assets/textures/bg-trap-lila.still.59bfb9422a.png); }
  .pe-preset--arcade i, .pe-tex--arcade i { background-image: url(/s/assets/textures/bg-arcade.still.a5c6079216.png); }
  .pe-preset--mendiak i, .pe-tex--mendiak i { background-image: url(/s/assets/textures/bg-mendiak.still.c95b26987a.png); }
  .pe-preset--hustler-dorado i, .pe-tex--oro i { background-image: url(/s/assets/textures/bg-oro.still.45b586be2d.png); }
  .pe-preset--club-laser i, .pe-tex--club-laser i { background-image: url(/s/assets/textures/bg-club-laser.still.c61c94ac9a.png); }
  .pe-preset--bola-disco i, .pe-tex--bola-disco i { background-image: url(/s/assets/textures/bg-bola-disco.still.c67ced610a.png); }
  .pe-preset--pantallazo-azul i, .pe-tex--bsod i { background-image: url(/s/assets/textures/bg-bsod.still.e80b9b36aa.png); }
  .pe-preset--mascota-pixel i, .pe-tex--lcd-verde i { background-image: url(/s/assets/textures/bg-lcd-verde.still.44555f7274.png); }
  .pe-preset--metro-vaporwave i, .pe-tex--vaporwave i { background-image: url(/s/assets/textures/bg-vaporwave.still.2b00bcfde2.png); }
  .pe-tex--cromo-bb i, .bb-egg-dialog__preview { background-image: url(/s/assets/textures/bg-cromo-bb.still.ab8967b1aa.png); }
  .bb-egg__blinkie { background-image: url(/s/assets/textures/fx/blinkie-bb-secret.still.f7e528e0c3.png); }
}

/* ---------- efectos v2 (capa delantera .fx-layer, ya definida arriba) ---------- */
.fx-drop, .fx-gem, .fx-confetti, .fx-firefly { position: absolute; pointer-events: none; }
/* Sirimiri: trazos finos y rápidos en diagonal. */
.fx-drop { top: -24px; width: 1px; height: 14px; background: linear-gradient(rgba(200, 225, 240, 0), rgba(200, 225, 240, .8)); animation: fx-rain linear infinite; }
@keyframes fx-rain { from { transform: translate(0, 0) rotate(14deg); } to { transform: translate(-28vh, 115vh) rotate(14deg); } }
/* Diamantes pixel que caen bamboleándose (el diamante de la identidad de BB, nunca un emoji). */
.fx-gem { top: -24px; width: 15px; height: 12px; background: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 3px rgba(143, 251, 255, .8)); animation: fx-gem linear infinite; }
.fx-gem--big { width: 30px; height: 24px; background-image: url(/s/assets/icons/brand/diamond-pixel-30.84ca225975.png); }
@keyframes fx-gem { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-8px, 28vh) rotate(-10deg); } 50% { transform: translate(0, 56vh) rotate(0); } 75% { transform: translate(8px, 84vh) rotate(10deg); } 100% { transform: translate(0, 115vh) rotate(0); } }
/* Confeti pixel en los colores de BB, girando a saltos. */
.fx-confetti { top: -12px; width: 6px; height: 4px; background: var(--fx-c, #03f7fe); animation: fx-confetti linear infinite; }
.fx-confetti:nth-child(6n + 2) { --fx-c: #ff2e9a; }
.fx-confetti:nth-child(6n + 3) { --fx-c: #b6ff3b; }
.fx-confetti:nth-child(6n + 4) { --fx-c: #ffe600; width: 4px; height: 6px; }
.fx-confetti:nth-child(6n + 5) { --fx-c: #7a2cff; }
.fx-confetti:nth-child(6n) { --fx-c: #fff; width: 4px; height: 4px; }
@keyframes fx-confetti { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--fx-dx, 20px), 115vh) rotate(720deg); } }
/* Luciérnagas: puntos cálidos que vagan y se encienden. */
.fx-firefly { width: 3px; height: 3px; background: #eaff7a; box-shadow: 0 0 6px 2px rgba(234, 255, 122, .7); opacity: 0; animation: fx-firefly ease-in-out infinite; }
@keyframes fx-firefly {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .95; }
  50% { transform: translate(var(--fx-dx, 30px), var(--fx-dy, -30px)); opacity: .25; }
  75% { opacity: .9; }
  100% { transform: translate(calc(var(--fx-dx, 30px) * -.6), calc(var(--fx-dy, -30px) * .8)); opacity: 0; }
}

/* Capa trasera: láseres y ecualizador DETRÁS de las cajas del perfil (no tapan el texto). */
.fx-back { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-laser { position: absolute; top: -8px; width: 3px; height: 160vh; margin-left: -1px; transform-origin: 50% 0; background: linear-gradient(var(--fx-c), rgba(0, 0, 0, 0) 80%); box-shadow: 0 0 8px var(--fx-c); opacity: .6; animation: fx-sweep ease-in-out infinite alternate; }
.fx-laser:nth-child(odd) { --fx-c: var(--fx-link, #03f7fe); }
.fx-laser:nth-child(even) { --fx-c: var(--fx-accent, #ff2e9a); }
@keyframes fx-sweep { from { transform: rotate(var(--fx-a0, -20deg)); } to { transform: rotate(var(--fx-a1, 20deg)); } }
.fx-eq { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 2px; height: 72px; padding: 0 2px; opacity: .7; }
.fx-eq i {
  flex: 1; height: 100%;
  background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0) 0 4px, rgba(0, 0, 0, .9) 4px 6px), linear-gradient(to top, #b6ff3b 0 55%, #ffe600 55% 80%, #ff3b30 80%);
  clip-path: inset(60% 0 0 0); animation: fx-eq steps(1) infinite;
}
@keyframes fx-eq {
  0% { clip-path: inset(70% 0 0 0); } 17% { clip-path: inset(30% 0 0 0); } 33% { clip-path: inset(52% 0 0 0); }
  50% { clip-path: inset(12% 0 0 0); } 67% { clip-path: inset(44% 0 0 0); } 83% { clip-path: inset(24% 0 0 0); } 100% { clip-path: inset(70% 0 0 0); }
}

/* Destellos en los bordes de las cajas y estela de neón (posición fija, puestos con CSSOM). */
.fx-spark, .fx-trail { position: fixed; z-index: 36; pointer-events: none; }
.fx-spark {
  width: 9px; height: 9px;
  background: linear-gradient(#fff, #fff) center / 1px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 1px no-repeat;
  filter: drop-shadow(0 0 2px var(--fx-accent, #03f7fe)); transform: scale(.2); animation: fx-spark .6s steps(4) forwards;
}
@keyframes fx-spark { 0% { transform: scale(.3); opacity: 1; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
.fx-trail { width: 4px; height: 4px; background: var(--fx-accent, #ff2e9a); box-shadow: 0 0 4px var(--fx-accent, #ff2e9a), 0 0 9px var(--fx-accent, #ff2e9a); animation: fx-trail .5s linear forwards; }
@keyframes fx-trail { to { opacity: 0; transform: translateY(10px) scale(.4); } }

/* El nombre del perfil hace glitch un instante (clase puesta por effects.js). */
.fx-glitch { animation: fx-glitch .5s steps(1) 1; }
@keyframes fx-glitch {
  0% { transform: translate(3px, 0) skewX(-10deg); text-shadow: -3px 0 #03f7fe, 3px 0 #ff2e9a, 6px 6px 0 #000; clip-path: inset(8% 0 48% 0); }
  20% { transform: translate(-4px, 1px); text-shadow: 4px 0 #03f7fe, -3px 0 #ff2e9a, 6px 6px 0 #000; clip-path: inset(52% 0 6% 0); }
  40% { transform: translate(2px, -1px) skewX(8deg); clip-path: inset(0 0 72% 0); }
  60% { transform: translate(-1px, 0); text-shadow: -2px 0 #b6ff3b, 2px 0 #ff2e9a, 6px 6px 0 #000; clip-path: inset(30% 0 28% 0); }
  80%, 100% { transform: none; clip-path: none; }
}

/* Pestaña oculta: todo en pausa. Tranquilo y reduced-motion: nada. */
html.fx-paused .fx-layer *, html.fx-paused .fx-back *, html.fx-paused .fx-glitch, html.fx-paused .bb-fiesta-lights i { animation-play-state: paused; }
html.is-quiet .fx-back, html.is-quiet .fx-spark, html.is-quiet .fx-trail, html.is-quiet .bb-fiesta-ball, html.is-quiet .bb-fiesta-lights { display: none; }
html.is-quiet .fx-glitch { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-back, .fx-spark, .fx-trail, .bb-fiesta-ball, .bb-fiesta-lights { display: none; }
  .fx-glitch { animation: none; }
}

/* ---------- easter eggs ---------- */
/* Aviso tipo globo de la bandeja de Windows XP, abajo a la derecha (lejos del logo y de la ikurriña). */
.bb-egg {
  position: fixed; z-index: 61; right: 16px; bottom: 18px; width: min(300px, calc(100vw - 32px)); margin: 0; padding: 8px 30px 10px 10px;
  font: 11px/1.4 Tahoma, Verdana, Geneva, sans-serif; color: #000; background: #ffffe1; border: 1px solid #000; border-radius: 8px; box-shadow: 3px 3px 0 #000;
}
.bb-egg::after { content: ""; position: absolute; right: 30px; bottom: -10px; border-style: solid; border-width: 10px 10px 0 0; border-color: #000 transparent transparent transparent; }
.bb-egg::before { content: ""; position: absolute; z-index: 1; right: 31px; bottom: -8px; border-style: solid; border-width: 8px 8px 0 0; border-color: #ffffe1 transparent transparent transparent; }
.bb-egg__title { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-weight: bold; font-size: 12px; }
.bb-egg__icon { flex: none; width: 16px; height: 16px; background: url(/s/assets/icons/heart-pixel-16.cec35bc98f.png) center / 16px 16px no-repeat; image-rendering: pixelated; }
.bb-egg__icon--gem { background-image: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png); background-size: 15px 12px; }
.bb-egg__big { margin: 2px 0 4px; font: 28px/1 var(--font-display); text-transform: uppercase; color: #000; text-shadow: 2px 2px 0 var(--bb-cyan); }
.bb-egg__text { margin: 0; }
.bb-egg__blinkie { display: block; width: 150px; height: 20px; margin-top: 6px; background: url(/s/assets/textures/fx/blinkie-bb-secret.60d96eb859.gif) no-repeat; image-rendering: pixelated; }
.bb-egg__close {
  position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
  font: bold 13px/1 Tahoma, sans-serif; color: #000; background: #ffffe1; border: 1px solid #a0a0a0; border-radius: 3px; cursor: var(--cur-hand);
}
.bb-egg__close:hover { color: #fff; background: linear-gradient(#e8664f, #c1300f); border-color: #000; }
.bb-egg__close:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
@media (max-width: 760px) { .bb-egg { right: 16px; bottom: 16px; } .bb-egg__close { width: 32px; height: 32px; } }

/* Diálogo Win98 del preset secreto. */
.bb-egg-dialog { position: fixed; z-index: 62; left: 50%; top: 28%; width: min(340px, calc(100vw - 32px)); transform: translateX(-50%); }
.bb-egg-dialog .bb-window__body { display: grid; gap: 8px; }
.bb-egg-dialog__preview { display: block; height: 72px; background: #07000f url(/s/assets/textures/bg-cromo-bb.20d61b6ca7.gif) -14px -14px; image-rendering: pixelated; border: 2px inset #444; }
.bb-egg-dialog__text { margin: 0; font-size: 12px; color: var(--bb-white); }
.bb-egg-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.bb-egg-dialog__actions form { margin: 0; }
@media (max-width: 760px) { .bb-egg-dialog__actions .bb-btn, .bb-egg-dialog__actions .bb-btn98 { min-height: 40px; } }

/* Modo fiesta: bola de espejos que baja y luces de colores que barren la página. */
.bb-fiesta-ball { position: fixed; z-index: 59; top: 0; left: 50%; width: 80px; height: 96px; margin-left: -40px; pointer-events: none; background: url(/s/assets/textures/fx/bola-disco.c1dc893e2f.gif) center / 80px 96px no-repeat; image-rendering: pixelated; animation: bb-ball-drop 1.2s steps(10) both; }
@keyframes bb-ball-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.bb-fiesta-lights { position: fixed; inset: 0; z-index: 58; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.bb-fiesta-lights i { position: absolute; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--fx-c, #03f7fe); box-shadow: 0 0 14px 5px var(--fx-c, #03f7fe); opacity: .45; animation: bb-spot linear infinite; }
.bb-fiesta-lights i:nth-child(4n + 2) { --fx-c: #ff2e9a; }
.bb-fiesta-lights i:nth-child(4n + 3) { --fx-c: #b6ff3b; }
.bb-fiesta-lights i:nth-child(4n) { --fx-c: #ffe600; }
@keyframes bb-spot { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@media (prefers-reduced-motion: no-preference) {
  html.is-josea .bb-marquee, html.is-fiesta .bb-marquee { --marquee-speed: 9s; }
}

/* =====================================================================
   "EL BOTXO": fondo que puede elegir cualquiera (theme.js, ESCENAS); el show del mordisco, solo @naisito.
   .escena es una capa fija detrás de todo con el mundo pixel art por capas (px de arte × --s):
   cielo 0–600, valle y montes 380–940, subsuelo y entrañas 940–1500, núcleo 1500–1700.
   Cámara: al bajar por la página el paisaje baja más despacio que ella (paralaje 0,4, lineal) y se para en
   el núcleo; en una página corta el subsuelo se queda oculto. Sin movimiento, quieta enfocando la ciudad.
   ===================================================================== */
.escena {
  --s: 3; --esc-espacio: #07041c; --esc-nucleo: #fff6d2;
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--esc-espacio);
}
.escena__mundo {
  position: absolute; left: 0; right: 0; top: 50%; height: calc(1700px * var(--s));
  image-rendering: pixelated; transform: translate3d(0, calc(-660px * var(--s)), 0); will-change: transform;
  background:
    url(/s/assets/textures/escena-botxo/cielo.6cae390a49.gif) 50% 0 / calc(320px * var(--s)) calc(600px * var(--s)) repeat-x,
    url(/s/assets/textures/escena-botxo/subsuelo.8cf146b72f.gif) 50% calc(940px * var(--s)) / calc(400px * var(--s)) calc(560px * var(--s)) repeat-x,
    url(/s/assets/textures/escena-botxo/nucleo.fdd1f64e12.gif) 50% calc(1500px * var(--s)) / calc(320px * var(--s)) calc(200px * var(--s)) repeat-x;
}
.escena__mundo::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 400vh; background: var(--esc-nucleo); }
/* Animación ligada al scroll del documento: la mueve el navegador, sin JS ni retraso. Rango = recorrido
   (1580 - 660 px de arte) / paralaje, para que cada px de scroll baje el fondo 0,4 px. Donde no hay
   soporte, escena-mordisco.js hace lo mismo (PARALAJE y focoCamara). */
@keyframes escena-camara {
  from { transform: translate3d(0, calc(-660px * var(--s)), 0); }
  to { transform: translate3d(0, calc(-1580px * var(--s)), 0); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not(.is-quiet) .escena__mundo {
      animation: escena-camara linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px calc(920px * var(--s) / 0.4);
    }
  }
}
.escena__mundo > i { position: absolute; top: calc(380px * var(--s)); height: calc(560px * var(--s)); }
.escena__valle, .escena__mundo > .escena__entranas { left: 50%; width: calc(800px * var(--s)); margin-left: calc(-400px * var(--s)); background: url(/s/assets/textures/escena-botxo/valle.6c0ebbb5b3.gif) 0 0 / 100% 100% no-repeat; }
.escena__mundo > .escena__entranas { top: calc(940px * var(--s)); background-image: url(/s/assets/textures/escena-botxo/entranas.f28003bb63.gif); }
.escena__montes { background: url(/s/assets/textures/escena-botxo/montes.c4e3c46ae1.gif) 0 0 / calc(400px * var(--s)) 100% repeat-x; }
.escena__montes--izq { left: 0; right: calc(50% + 400px * var(--s)); background-position: right top; }
.escena__montes--der { left: calc(50% + 400px * var(--s)); right: 0; }
@media (max-width: 760px) { .escena { --s: 2; } }
@media (prefers-reduced-motion: reduce) {
  .escena__mundo {
    background-image: url(/s/assets/textures/escena-botxo/cielo.still.1ee496c2eb.png), url(/s/assets/textures/escena-botxo/subsuelo.still.10d4481a3b.png), url(/s/assets/textures/escena-botxo/nucleo.still.b8f124d6e0.png);
  }
  .escena__valle { background-image: url(/s/assets/textures/escena-botxo/valle.still.69865a7c3a.png); }
  .escena__mundo > .escena__entranas { background-image: url(/s/assets/textures/escena-botxo/entranas.still.7ef36d8ec0.png); }
  .escena__montes { background-image: url(/s/assets/textures/escena-botxo/montes.still.47ae674c9d.png); }
}
html.is-quiet .escena__mundo { background-image: url(/s/assets/textures/escena-botxo/cielo.still.1ee496c2eb.png), url(/s/assets/textures/escena-botxo/subsuelo.still.10d4481a3b.png), url(/s/assets/textures/escena-botxo/nucleo.still.b8f124d6e0.png); }
html.is-quiet .escena__valle { background-image: url(/s/assets/textures/escena-botxo/valle.still.69865a7c3a.png); }
html.is-quiet .escena__mundo > .escena__entranas { background-image: url(/s/assets/textures/escena-botxo/entranas.still.7ef36d8ec0.png); }
html.is-quiet .escena__montes { background-image: url(/s/assets/textures/escena-botxo/montes.still.47ae674c9d.png); }

/* "El mordisco": escenario por encima de la página (sin capturar el puntero) con los lienzos de los
   actores, el trozo arrancado (clon del banner) y, dentro del perfil, el lienzo de detrás del banner
   (por el agujero se ve llegar a Luffy) y el canto mordido. Posiciones y recortes, por CSSOM. */
.mordisco { position: absolute; left: 0; right: 0; top: 0; z-index: 33; overflow: hidden; pointer-events: none; }
.mordisco__lienzo, .mordisco-tras, .mordisco-canto, .mordisco__canto { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; }
.mordisco-canto { z-index: 1; }
.mordisco .mordisco__trozo { position: absolute; overflow: visible; }
.mordisco__trozo > .pf-banner { margin: 0; }
.mordisco__trozo .pf-mood--marquee span { animation: none; }
.mordisco__recorte { position: absolute; inset: 0; }