/* Pieles de las ventanas de los bloques del CMS (src/lib/ventanas.js). Las de gel siguen en bbclub.css.
   Cada piel es .bb-window--<clave> y viste la misma estructura (partials/wbar.eta):
   .bb-window > .bb-window__bar (h2) > .bb-window__title + .bb-wbtns (_ □ ×), y .bb-window__body.
   Las de cuerpo claro llevan también .bb-window--claro (abajo): texto oscuro y colores de BBCode oscuros. */

/* Fuentes de los sistemas: primero la de verdad (Windows, macOS e iOS traen casi todas) y, si el visitante no la
   tiene (Android, Linux), una suplente libre autoalojada, con las métricas del original para que la línea base no
   se mueva: Selawik (SIL OFL, Microsoft) por Trebuchet MS y Segoe UI, Wine Tahoma (LGPL) y DejaVu Sans Condensed
   Bold por Tahoma, DejaVu Sans Mono por Lucida Console, Go (BSD) por Lucida Grande y ChicagoFLF (dominio público)
   por Charcoal. Licencias junto a cada una en assets/fonts/ y public/fonts/. Solo se descargan si hacen falta. */
@font-face { font-family: "BB Trebuchet"; font-weight: 700; src: url(/s/fonts/selawik-bold.e8e9896309.woff2) format("woff2"); font-display: swap; ascent-override: 93.9%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: "BB Trebuchet"; font-weight: 400; src: url(/s/fonts/selawik-regular.0f11afe1e8.woff2) format("woff2"); font-display: swap; ascent-override: 93.9%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: "BB Segoe"; font-weight: 400; src: url(/s/fonts/selawik-regular.0f11afe1e8.woff2) format("woff2"); font-display: swap; ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%; }
@font-face { font-family: "BB Segoe"; font-weight: 700; src: url(/s/fonts/selawik-bold.e8e9896309.woff2) format("woff2"); font-display: swap; ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%; }
@font-face { font-family: "BB Tahoma"; font-weight: 400; src: url(/s/fonts/bb-tahoma.b89595fdf9.woff2) format("woff2"); font-display: swap; ascent-override: 100%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "BB Tahoma"; font-weight: 700; src: url(/s/fonts/bb-tahoma-bold.f9f93ea731.woff2) format("woff2"); font-display: swap; ascent-override: 100%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "BB Lucida Console"; src: url(/s/fonts/bb-lucida-console.042f3953c4.woff2) format("woff2"); font-display: swap; ascent-override: 78.9%; descent-override: 21.1%; line-gap-override: 0%; }
@font-face { font-family: "BB Lucida Grande"; src: url(/s/fonts/bb-lucida-grande.d4aba02045.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "BB Chicago"; src: url(/s/fonts/chicagoflf.5d25dcec1f.woff2) format("woff2"); font-display: swap; }
:root {
  --vt-font-98: "Microsoft Sans Serif", "MS Sans Serif", Tahoma, "BB Tahoma", sans-serif;
  --vt-font-xp: Tahoma, "BB Tahoma", Verdana, sans-serif;
  --vt-font-xp-titulo: "Trebuchet MS", "BB Trebuchet", sans-serif;
  --vt-font-segoe: "Segoe UI", "BB Segoe", Tahoma, sans-serif;
  --vt-font-consola: "Lucida Console", "BB Lucida Console", "Courier New", monospace;
  --vt-font-mac9: Charcoal, "BB Chicago", Chicago, sans-serif;
  --vt-font-aqua: "Lucida Grande", "Lucida Sans Unicode", "BB Lucida Grande", sans-serif;
}

/* ---------- selector del editor de bloques ---------- */
.vt-picker { margin: 8px 0 0; padding: 6px 8px 8px; border: 1px dotted #aca899; }
.vt-picker legend { padding: 0 4px; }
.vt-picker__grupo { margin: 6px 0 0; }
.vt-picker__grupo > summary { padding: 3px 4px; font: var(--font-ui); text-transform: uppercase; color: #0a246a; }
.vt-picker__grupo > summary small { font-weight: normal; color: #555; }
.vt-picker__grupo[open] > summary { margin-bottom: 4px; border-bottom: 1px dotted #aca899; }
.vt-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vt-picker label { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 4px; font-size: 10px; line-height: 1.15; text-align: center; color: #111; background: #fff url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png) 0 0 / 32px; border: 1px solid #d4d0c8; }
.vt-picker label:hover { border-color: #316ac5; }
.vt-picker label:has(input:checked) { background-color: #316ac5; border: 2px solid #0a246a; padding: 5px 5px 3px; }
.vt-picker label:has(input:checked) .vt-picker__name { color: #fff; background: #0a246a; font-weight: bold; }
.vt-picker label:has(input:focus-visible) { outline: 1px dotted #000; outline-offset: 2px; }
.vt-picker input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; }
.vt-picker__name { display: block; padding: 1px 3px; color: #111; background: #ece9d8; }
/* La ventanita de muestra: la piel de verdad, a menos tamaño y sin poder recibir clics. La caja de fuera es la
   que recorta (en la ventanita, overflow cortaría el título de las recortadas, que va encima de su borde). */
.vt-mini-caja { display: block; height: 72px; overflow: hidden; pointer-events: none; }
.vt-mini { zoom: .75; display: block; min-height: 96px; text-align: left; }
.vt-mini.bb-window .bb-window__bar { font-size: 16px; }
.vt-mini .bb-window__body { display: flex; flex-direction: column; gap: 5px; min-height: 60px; color: #fff; }
.vt-mini .bb-window__body b { font: 18px/1 var(--font-display); text-transform: uppercase; }
.vt-mini .bb-window__body i { display: block; height: 5px; width: 92%; background: currentColor; opacity: .35; }
.vt-mini .bb-window__body i + i { width: 64%; }

/* ---------- cuerpo claro ----------
   Cada piel clara pone --vt-fondo (y si quiere --vt-tinta, --vt-enlace...). Los colores de la web, que están
   pensados para fondo negro, se redefinen dentro del cuerpo en su versión oscura (4,5:1 hasta sobre #c0c0c0);
   los componentes que llevan su propio fondo oscuro (cuenta atrás, flyer, código...) recuperan los de siempre. */
.bb-window--claro { --vt-tinta: #000; --vt-enlace: #0033aa; --vt-visitado: #551a8b; --vt-apagado: #4a4a4a; --vt-linea: rgba(0, 0, 0, .2); --vt-par: rgba(0, 0, 0, .05); --vt-h1: #000; --vt-h1-sombra: #b48cff; }
.bb-window--claro .bb-window__body {
  color: var(--vt-tinta); background: var(--vt-fondo, #fff);
  --bb-cyan: var(--vt-enlace); --bb-cyan-deep: var(--vt-visitado); --bb-cyan-edge: var(--vt-enlace);
  --bb-pink: #8c1052; --bb-lime: #325000; --bb-purple: #5b2bb5; --warn-yellow: #584a00;
  --bb-muted: var(--vt-apagado); --bb-cream: var(--vt-tinta); --bb-panel-2: var(--vt-par);
}
.bb-window--claro .bb-window__body a:hover { text-decoration: underline; }
.bb-window--claro .bb-window__body :is(.bb-countdown, .bb-flyer, .bbc-code, .bb-pill, .bb-event__flyer, .bb-release__cover, .bb-btn, .bb-flash, .bb-polaroid, .cms-figure, .art-card, .mk) {
  --bb-cyan: #03f7fe; --bb-cyan-deep: #0fb5b5; --bb-cyan-edge: #0a8c99; --bb-pink: #ff2e9a; --bb-lime: #b6ff3b; --bb-purple: #7a2cff; --warn-yellow: #ffe600;
  --bb-muted: #9a9a9a; --bb-cream: #fbf5e9; --bb-panel-2: #1c1c1c;
}
.bb-window--claro .bb-h1, .bb-window--claro .bbc-h2 { color: var(--vt-h1); text-shadow: 2px 2px 0 var(--vt-h1-sombra); }
.bb-window--claro .bb-event { color: var(--vt-tinta); border-bottom-color: var(--vt-linea); }
.bb-window--claro .bb-event--past .bb-event__name { color: var(--vt-apagado); }
.bb-window--claro .bb-list li { border-bottom-color: var(--vt-linea); }
.bb-window--claro .cms-faq { border-bottom-color: var(--vt-linea); }
.bb-window--claro .cms-faq > summary { color: var(--vt-tinta); }
.bb-window--claro .cms-countdown__label { text-shadow: 2px 2px 0 rgba(0, 0, 0, .15); }
.bb-window--claro .bb-usercard { border-color: var(--vt-linea); }
.bb-window--claro :is(.bbc-quote, .bb-quote) { color: inherit; background: var(--vt-par); border-color: var(--vt-linea); border-left-color: var(--vt-enlace); }
.bb-window--claro .bbc-spoiler { border-color: var(--vt-linea); }
.bb-window--claro .bbc-spoiler > summary { color: #8c1052; background: var(--vt-par); }
.bb-window--claro .c-red { color: #8f140a; } .bb-window--claro .c-orange { color: #743a00; } .bb-window--claro .c-yellow { color: #584a00; } .bb-window--claro .c-lime { color: #325000; }
.bb-window--claro .c-green { color: #07562a; } .bb-window--claro .c-cyan { color: #004e55; } .bb-window--claro .c-blue { color: #1b4497; } .bb-window--claro .c-purple { color: #5b2bb5; }
.bb-window--claro .c-pink { color: #8c1052; } .bb-window--claro .c-white { color: #222; } .bb-window--claro .c-cream { color: #4a4030; } .bb-window--claro .c-gray { color: #444; }
.bb-window--claro .c-gold { color: #5a4200; } .bb-window--claro .c-magenta { color: #8a1a85; } .bb-window--claro .c-teal { color: #005050; } .bb-window--claro .c-brown { color: #6b4022; }

/* ========== pieles ========== */

/* ---------- pixel: RPG de 16 bits ----------
   Sin ventana de Windows: el título va en una placa con el guante que señala, montada sobre la caja de
   diálogo azul. Marco 9-slice propio (assets/_generators/ventanas.cjs) y el azul en bandas, sin suavizar. */
.bb-window--rpg { display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; filter: drop-shadow(3px 3px 0 #000); }
.bb-window--rpg .bb-window__bar,
.bb-window--rpg .bb-window__body {
  border: 15px solid transparent; border-image: url(/s/assets/ventanas/rpg-marco.b12468c3bc.png) 15 / 15px stretch;
  background: linear-gradient(#3a52d0 0 14%, #3249c4 14% 28%, #2a40b4 28% 42%, #2337a2 42% 57%, #1d2e8f 57% 71%, #17257b 71% 85%, #111c66 85%) padding-box;
}
.bb-window--rpg .bb-window__bar {
  align-self: flex-start; max-width: calc(100% - 16px); z-index: 1; min-height: 0; margin: 0 0 -12px 8px; padding: 2px 8px 1px 2px;
  font: 16px/1.1 var(--font-8bit); color: #fff; text-shadow: 2px 2px 0 #000;
}
.bb-window--rpg .bb-window__bar::before { content: none; }
.bb-window--rpg .bb-window__title::before { content: ""; flex: none; width: 34px; height: 20px; background: url(/s/assets/ventanas/rpg-mano.be3f4d2b86.png); animation: vt-rpg-mano .8s steps(2) infinite; }
.bb-window--rpg .bb-wbtns { display: none; }
.bb-window--rpg .bb-window__body { padding: 12px 6px 4px; color: #fff; text-shadow: 1px 1px 0 #000; --bb-muted: #d6dcff; --bb-pink: #ffb0dc; }
.bb-window--rpg .bb-window__body--flush { padding: 10px 0 0; }
.bb-window--rpg .bb-window__body :is(.bb-list li:nth-child(even)) { background: rgba(0, 0, 0, .18); }
.bb-window--rpg .bb-window__body :is(.bb-list li, .bb-event, .cms-faq) { border-bottom-color: rgba(255, 255, 255, .25); }
.bb-window--rpg :is(.bbc-quote, .bb-quote) { color: #fff; background: rgba(0, 0, 20, .35); border-color: rgba(255, 255, 255, .35); }
@keyframes vt-rpg-mano { to { transform: translateX(-3px); } }

/* ---------- pixel: caja de texto de los juegos de bolsillo de 1996 ----------
   Doble línea negra sobre blanco, el título dentro de la caja y la flechita ▼ que parpadea abajo. */
.bb-window--dialogo { background: #f8f8f8 padding-box; border: 18px solid transparent; border-image: url(/s/assets/ventanas/dialogo-marco.101f21f4f0.png) 18 / 18px stretch; box-shadow: none; filter: drop-shadow(3px 3px 0 #000); --vt-fondo: transparent; --vt-tinta: #181818; --vt-h1: #181818; --vt-h1-sombra: #c8c8c8; }
.bb-window--dialogo .bb-window__bar { min-height: 0; padding: 0 2px 2px; background: none; border: 0; font: 16px/1.2 var(--font-8bit); color: #181818; text-shadow: none; }
.bb-window--dialogo .bb-window__bar::before { content: none; }
.bb-window--dialogo .bb-wbtns { display: none; }
.bb-window--dialogo .bb-window__body { position: relative; padding: 6px 2px 14px; font-size: 13px; line-height: 1.6; }
.bb-window--dialogo .bb-window__body::after {
  content: ""; position: absolute; right: 4px; bottom: 2px; width: 14px; height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'><path d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z' fill='%23181818'/></svg>") 0 0 / 100% 100%;
  animation: vt-parpadeo 1s steps(1) infinite;
}
@keyframes vt-parpadeo { 50% { visibility: hidden; } }

/* ---------- pixel: pantalla de Game Boy (1989) ----------
   Los cuatro verdes del LCD, su rejilla de puntos y el título en negativo. */
.bb-window--gameboy {
  border: 10px solid transparent; border-image: url(/s/assets/ventanas/gameboy-marco.4bfb15a6d6.png) 10 / 10px stretch; background: #9bbc0f url(/s/assets/ventanas/gameboy-lcd.6029e15b89.png) padding-box;
  box-shadow: none; filter: drop-shadow(3px 3px 0 #000);
  --vt-fondo: transparent; --vt-tinta: #0f380f; --vt-enlace: #0f380f; --vt-visitado: #0f380f; --vt-apagado: #0f380f; --vt-linea: rgba(15, 56, 15, .4); --vt-par: rgba(15, 56, 15, .08); --vt-h1: #0f380f; --vt-h1-sombra: #8bac0f;
}
.bb-window--gameboy .bb-window__bar { margin: 0 0 2px; min-height: 26px; padding: 0 4px 0 8px; background: #0f380f; border-bottom: 2px solid #306230; font: 16px/26px var(--font-8bit); color: #9bbc0f; text-shadow: none; }
.bb-window--gameboy .bb-window__bar::before { content: none; }
.bb-window--gameboy .bb-wbtns span { width: 16px; height: 16px; font: 10px/1 var(--font-8bit); color: #0f380f; background: #8bac0f; border: 2px solid #0f380f; border-radius: 0; }
.bb-window--gameboy .bb-window__body a { text-decoration: underline; }
.bb-window--gameboy .bb-window__body :is(img, .bb-polaroid, .mk) { filter: sepia(1) hue-rotate(40deg) saturate(1.6) brightness(.9); }

/* Móvil: las fuentes de 8 bits son muy anchas; el título de la RPG y el del diálogo, a 12 px. */
@media (max-width: 760px) {
  .bb-window--rpg .bb-window__bar, .bb-window--dialogo .bb-window__bar, .bb-window--gameboy .bb-window__bar { font-size: 12px; }
}

/* ---------- Winamp 2 (la piel clásica) ----------
   Marco gris azulado con bisel, barra con las estrías doradas a los lados del título y el cuerpo como la
   lista de reproducción: fondo negro, texto verde, enlaces en blanco y la fila "seleccionada" en azul. */
.bb-window--winamp { padding: 0 4px 4px; background: linear-gradient(90deg, #232331, #3a3a52 50%, #232331); border: 2px solid; border-color: #74749a #14141c #14141c #74749a; box-shadow: var(--hard-shadow); }
.bb-window--winamp .bb-window__bar {
  justify-content: center; min-height: 22px; padding: 0 2px; margin: 0 -2px 3px; border: 0;
  background: repeating-linear-gradient(#e6c862 0 1px, #6d5a1c 1px 2px) 0 50% / 100% 8px no-repeat, #2a2a3a;
  font: 16px/22px var(--font-pixel); color: #f2f2ff; text-shadow: 1px 1px 0 #000;
}
.bb-window--winamp .bb-window__bar::before { content: none; }
.bb-window--winamp .bb-window__title { padding: 0 8px; background: #2a2a3a; letter-spacing: 2px; }
.bb-window--winamp .bb-wbtns { position: absolute; right: 4px; top: 5px; padding-left: 4px; background: #2a2a3a; }
.bb-window--winamp .bb-wbtns span { width: 12px; height: 12px; font: bold 8px/1 var(--font-body); color: #1a1a24; background: linear-gradient(#e1e1ef, #9a9ab5); border: 1px solid #0c0c12; border-radius: 0; }
.bb-window--winamp .bb-window__body {
  color: #39ff14; background: #000; border: 1px solid; border-color: #14141c #74749a #74749a #14141c;
  --bb-cyan: #ffffff; --bb-cyan-deep: #c8c8ff; --bb-cream: #ffffff; --bb-panel-2: #000; --bb-muted: #2fbf2f;
}
.bb-window--winamp .bb-window__body a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); }
.bb-window--winamp .bb-window__body a:hover { color: #fff; background: #0000c6; text-decoration: none; }
.bb-window--winamp .bb-h1, .bb-window--winamp .bbc-h2 { color: #fff; text-shadow: 2px 2px 0 #0000c6, 4px 4px 0 #000; }
.bb-window--winamp .bb-list li:hover, .bb-window--winamp .cms-faq > summary:hover { background: #0000c6; color: #fff; }
.bb-window--winamp .bb-list li, .bb-window--winamp .bb-event, .bb-window--winamp .cms-faq { border-bottom-color: #0f3a0f; }
.bb-window--winamp :is(.bbc-quote, .bb-quote) { color: #39ff14; background: #001a00; border-color: #0f3a0f; border-left-color: #fff; }

/* ---------- Windows 98 / 2000 (clásico) ----------
   Bisel de cuatro tonos (#0a0a0a, #808080 | #dfdfdf, #fff), barra navy → #1084d0 con el título en negrita
   de 11 px y los botones de 16×14 con sus glifos de un bit. Cuerpo gris "silver". */
.bb-window--win98 {
  padding: 3px; background: #c0c0c0; border: 0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, var(--hard-shadow);
  --vt-fondo: transparent; --vt-enlace: #0000a8; --vt-visitado: #551a8b; --vt-apagado: #404040; --vt-par: rgba(255, 255, 255, .35); --vt-h1: #000080; --vt-h1-sombra: #fff;
}
.bb-window--win98 .bb-window__bar {
  min-height: 18px; padding: 2px 2px 2px 3px; border: 0; background: linear-gradient(90deg, #000080, #1084d0);
  font: bold 11px/14px var(--vt-font-98); color: #fff; text-transform: none; text-shadow: none; letter-spacing: 0;
}
.bb-window--win98 .bb-window__bar::before { content: none; }
.bb-window--win98 .bb-window__title { gap: 3px; }
.bb-window--win98 .bb-window__title::before { content: ""; flex: none; width: 16px; height: 16px; margin: -1px 0; background: url(/s/assets/icons/heart-pixel-16.cec35bc98f.png); }
.bb-window--win98 .bb-wbtns { gap: 0; }
.bb-window--win98 .bb-wbtns span {
  width: 16px; height: 14px; font-size: 0; color: transparent; background: #c0c0c0 no-repeat; border: 0; border-radius: 0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.bb-window--win98 .bb-wbtns span:first-child:not(:last-child) { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='2'><path d='M0 0h6v2H0z'/></svg>"); background-position: left 4px bottom 3px; }
.bb-window--win98 .bb-wbtns span:nth-child(2):not(:last-child) { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path fill-rule='evenodd' d='M0 0h9v9H0zM1 2v6h7V2z'/></svg>"); background-position: left 3px top 2px; }
.bb-window--win98 .bb-wbtns span:last-child { margin-left: 2px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='7'><path d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0z'/></svg>"); background-position: left 4px top 3px; }
.bb-window--win98 .bb-window__body { padding: 8px 6px 4px; font: 12px/1.45 var(--font-body); }
.bb-window--win98 :is(.bbc-quote, .bb-quote) { background: #fff; border: 0; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; padding: 8px 10px; }

/* ---------- caja de perfil de MySpace (2006) ----------
   La tabla de "Detalles" e "Intereses": cabecera #6698CB con la negrita blanca en Verdana 10 pt, borde de 1 px
   del mismo azul, fondo azul clarito y enlaces #003399. Los titulares en el naranja de "Acerca de mí". La
   cabecera va un pelín más oscura que la original (#4677ae) para llegar a 4,5:1. */
.bb-window--myspace { padding: 2px; background: #fff; border: 1px solid #6698cb; box-shadow: var(--hard-shadow); --vt-fondo: #d5e8fb; --vt-enlace: #003399; --vt-apagado: #3d4f66; --vt-par: #e8f2fd; --vt-linea: #b1d0f0; --vt-h1: #ff6600; --vt-h1-sombra: transparent; }
.bb-window--myspace .bb-window__bar { min-height: 0; padding: 3px 6px; background: #4677ae; border: 0; font: bold 13px/1.3 Verdana, Geneva, sans-serif; color: #fff; text-transform: none; text-shadow: none; }
.bb-window--myspace .bb-window__bar::before { content: none; }
.bb-window--myspace .bb-wbtns { display: none; }
.bb-window--myspace .bb-window__body { margin-top: 2px; font: 12px/1.45 Verdana, Geneva, sans-serif; }
.bb-window--myspace .bb-h1 { font: bold 20px/1.2 Verdana, Geneva, sans-serif; color: #cc5200; text-transform: none; text-shadow: none; letter-spacing: 0; }
.bb-window--myspace .bbc-h2 { font: bold 15px/1.2 Verdana, Geneva, sans-serif; color: #a84300; text-transform: none; text-shadow: none; }
.bb-window--myspace .bb-window__body a { text-decoration: underline; }
.bb-window--myspace :is(.bbc-quote, .bb-quote) { background: #fff; border: 1px solid #b1d0f0; border-left: 3px solid #6698cb; }

/* ---------- Windows XP (Luna) ----------
   Medido al píxel sobre capturas reales a 1:1 (Bloc de notas, Ejecutar y Fuente de XP): barra de 30 px pintada
   fila a fila, con el brillo en las filas 1-2 y las dos oscuras abajo; marco de 4 px en cuatro azules (3 px en
   los diálogos); esquinas de arriba de 8 px; título en Trebuchet MS negrita 13 px con su sombra dura #0a1883 (no
   la #0f1089 de XP.css); icono de 16 px y el texto a 3 px; botones de 21 px con borde blanco, 2 px entre ellos y
   el de cerrar en rojo; y la cara #ece9d8 con Tahoma. Verde oliva (Homestead) y plata (Metallic) solo cambian
   las variables, sacadas de los mapas de bits de esos esquemas. */
.bb-window--luna {
  --xp-barra: linear-gradient(#0058ee 0 1px, #3d95ff 1px 2px, #2b90ff 2px 3px, #0372ff 3px 4px, #0365f1 4px 5px,
      #005ce9 5px 6px, #0058e6 6px 7px, #0054e3 7px 10px, #0055e5 10px 15px, #0055ea 15px 17px,
      #0058ee 17px 18px, #005bf2 18px 19px, #005df5 19px 20px, #0060f9 20px 21px, #0164f9 21px 22px,
      #026afe 22px 26px, #0368fa 26px 27px, #0060f9 27px 28px, #004de3 28px 29px, #0144d0 29px 30px);
  --xp-bordes: inset 1px 0 #0020c8, inset 2px 0 #0038d8, inset 3px 0 #0046e4, inset 4px 0 #0051e5,
      inset -1px 0 #00138b, inset -2px 0 #0026ac, inset -3px 0 #0029d0, inset -4px 0 #0035d8, inset -5px 0 #003ad9, inset -6px 0 #003ddc;
  --xp-marco: inset 1px 0 #0019cf, inset 2px 0 #0734da, inset 3px 0 #166aee, inset 4px 0 #0855dd,
      inset -1px 0 #00138c, inset -2px 0 #0021a9, inset -3px 0 #003bda, inset -4px 0 #0048f1,
      inset 0 -1px #00138c, inset 0 -2px #001ea0, inset 0 -3px #003ddd, inset 0 -4px #0048f1;
  --xp-titulo: #fff; --xp-titulo-sombra: 1px 1px #0a1883;
  --xp-boton-borde: #fff;
  --xp-boton: linear-gradient(rgba(0, 35, 146, .05) 0 1px, transparent 1px 16px, rgba(0, 35, 146, .07) 16px 17px, rgba(0, 35, 146, .23) 17px 18px, rgba(0, 35, 146, .57) 18px),
      linear-gradient(to right, rgba(0, 35, 146, .08) 0 1px, transparent 1px 17px, rgba(0, 35, 146, .15) 17px 18px, rgba(0, 35, 146, .55) 18px),
      radial-gradient(13px 27px at 3px 4px, rgba(200, 190, 253, .45), rgba(200, 190, 253, 0)),
      linear-gradient(#004efc, #4981f6 6%, #1e65f3 29%, #0968f8);
  --xp-cerrar: linear-gradient(rgba(166, 42, 13, .37) 0 1px, transparent 1px 16px, rgba(166, 42, 13, .12) 16px 17px, rgba(166, 42, 13, .37) 17px 18px, rgba(166, 42, 13, .87) 18px),
      linear-gradient(to right, rgba(166, 42, 13, .25) 0 1px, transparent 1px 17px, rgba(166, 42, 13, .21) 17px 18px, rgba(166, 42, 13, .83) 18px),
      radial-gradient(19px 24px at 2px 2px, rgba(241, 178, 175, .7), rgba(241, 178, 175, 0)),
      linear-gradient(#e45931, #dc3401 33%, #e93e01);
  --xp-glifo-min: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M4 12h7v3H4z'/%3E%3C/svg%3E");
  --xp-glifo-max: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M4 4h11v11H4zm1 3v7h9V7z'/%3E%3C/svg%3E");
  --xp-glifo-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M4 4h2v1H4zm9 0h2v1h-2zM4 5h3v1H4zm8 0h3v1h-3zM5 6h3v1H5zm6 0h3v1h-3zM6 7h3v1H6zm4 0h3v1h-3zM7 8h5v1H7zm1 1h3v1H8zm-1 1h5v1H7zm-1 1h3v1H6zm4 0h3v1h-3zm-5 1h3v1H5zm6 0h3v1h-3zm-7 1h3v1H4zm8 0h3v1h-3zM4 14h2v1H4zm9 0h2v1h-2z'/%3E%3C/svg%3E");
  padding: 0 4px 4px; background: #ece9d8; border: 0; border-radius: 8px 8px 0 0;
  box-shadow: var(--xp-marco), var(--hard-shadow); font-synthesis: none;
  --vt-fondo: transparent; --vt-enlace: #0033aa; --vt-h1: #0a246a; --vt-h1-sombra: #a8c4ff;
}
.bb-window--luna .bb-window__bar {
  align-items: flex-start; min-height: 0; height: 30px; margin: 0 -4px; padding: 0 6px; border: 0; border-radius: 8px 8px 0 0;
  background: var(--xp-barra); box-shadow: var(--xp-bordes);
  font: bold 13px/15px var(--vt-font-xp-titulo); color: var(--xp-titulo); text-transform: none; text-shadow: var(--xp-titulo-sombra); letter-spacing: 0;
}
.bb-window--luna .bb-window__bar::before { content: none; }
/* El icono, a 8 px de arriba; la línea base del título, en la fila 22. */
.bb-window--luna .bb-window__title { align-items: flex-start; gap: 3px; padding-top: 10px; }
.bb-window--luna .bb-window__title::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: -2px; background: url(/s/assets/icons/heart-pixel-16.cec35bc98f.png); image-rendering: pixelated; }
.bb-window--luna .bb-wbtns { gap: 2px; margin-top: 6px; }
.bb-window--luna .bb-wbtns span { box-sizing: border-box; width: 21px; height: 21px; font-size: 0; color: transparent; border: 1px solid var(--xp-boton-borde); border-radius: 3px; background: var(--xp-glifo, none) 0 0 / 19px 19px no-repeat, var(--xp-boton); }
.bb-window--luna .bb-wbtns span:first-child:not(:last-child) { --xp-glifo: var(--xp-glifo-min); }
.bb-window--luna .bb-wbtns span:nth-child(2):not(:last-child) { --xp-glifo: var(--xp-glifo-max); }
.bb-window--luna .bb-wbtns span:last-child { background: var(--xp-glifo-x) 0 0 / 19px 19px no-repeat, var(--xp-cerrar); }
.bb-window--luna .bb-window__body { padding: 8px 10px; font: 12px/1.45 var(--vt-font-xp); }
.bb-window--xp .bb-window__body { background: #ece9d8; }

/* XP verde oliva (Homestead). */
.bb-window--xp-olive {
  --xp-barra: linear-gradient(#8ba169 0 1px, #eaf5c9 1px 2px, #e0e7b8 2px 3px, #bec98f 3px 4px, #bac78e 4px 5px,
      #b3c088 5px 6px, #afbc84 6px 7px, #abba83 7px 8px, #aab883 8px 13px, #afbc84 13px 15px,
      #afbd85 15px 16px, #b1c088 16px 17px, #b4c48b 17px 18px, #b5c68d 18px 19px, #b7c78e 19px 20px,
      #bbc88f 20px 21px, #bdc88f 21px 22px, #bfcb92 22px 23px, #c2cd95 23px 26px, #becb92 26px 27px,
      #bdc88f 27px 28px, #a7b580 28px 29px, #96a867 29px 30px);
  --xp-bordes: inset 1px 0 #758d5e, inset 2px 0 #8ba169, inset 3px 0 #a5b680, inset -1px 0 #5e764f, inset -2px 0 #7a8962, inset -3px 0 #92a879, inset -4px 0 #99ad7c;
  --xp-marco: inset 1px 0 #758d5e, inset 2px 0 #8ba169, inset 3px 0 #abbd85, inset 4px 0 #a4b27f,
      inset -1px 0 #5e764f, inset -2px 0 #899b6d, inset -3px 0 #bac891, inset -4px 0 #cbd798,
      inset 0 -1px #5e764f, inset 0 -2px #899b6d, inset 0 -3px #bdc891, inset 0 -4px #cbd798;
  --xp-titulo-sombra: 1px 1px rgba(60, 76, 34, .55);
  --xp-boton: linear-gradient(rgba(118, 135, 83, .32) 0 1px, transparent 1px 16px, rgba(118, 135, 83, .03) 16px 17px, rgba(118, 135, 83, .56) 17px 18px, #768753 18px),
      linear-gradient(to right, rgba(118, 135, 83, .35) 0 1px, transparent 1px 17px, rgba(118, 135, 83, .47) 17px 18px, #768753 18px),
      radial-gradient(15px 28px at 2px -1px, rgba(245, 255, 253, .44), rgba(245, 255, 253, 0)),
      linear-gradient(#98a677, #83925a 90%, #aeb46d);
  --xp-cerrar: linear-gradient(rgba(150, 55, 25, .33) 0 1px, transparent 1px 16px, rgba(150, 55, 25, .11) 16px 17px, rgba(150, 55, 25, .36) 17px 18px, rgba(150, 55, 25, .84) 18px),
      linear-gradient(to right, rgba(150, 55, 25, .27) 0 1px, transparent 1px 17px, rgba(150, 55, 25, .18) 17px 18px, rgba(150, 55, 25, .8) 18px),
      radial-gradient(23px 24px at 1px 1px, rgba(240, 202, 201, .7), rgba(240, 202, 201, 0)),
      linear-gradient(#d05c2f, #c43e0a 32%, #d45219);
}
/* El título blanco sobre el oliva claro no llega a 4,5:1: va en un verde muy oscuro con brillo blanco. */
.bb-window--xp-olive .bb-window__bar { color: #26330f; text-shadow: 1px 1px rgba(255, 255, 255, .45); }

/* XP plata (Metallic): título negro con sombra blanca y glifos oscuros en relieve. */
.bb-window--xp-silver {
  --xp-barra: linear-gradient(#66667e 0 1px, #a8a7bf 1px 2px, #fff 2px 3px, #d7d8e2 3px 4px, #bcbccf 4px 5px,
      #a8a7bf 5px 6px, #a4a3be 6px 7px, #acabc4 7px 8px, #afaec7 8px 9px, #b1b3c8 9px 10px,
      #b4b6c7 10px 12px, #b7b8c9 12px 13px, #b9bccc 13px 14px, #bec0ce 14px 15px, #c1c4d1 15px 16px,
      #c4c7d5 16px 17px, #cbcdd9 17px 18px, #d0d2dc 18px 19px, #d6d7e0 19px 20px, #dcdee5 20px 21px,
      #e3e5eb 21px 22px, #eaebf0 22px 23px, #f0f1f5 23px 24px, #f7f7f9 24px 25px, #fcfbfc 25px 26px,
      #fff 26px 27px, #e4e3e3 27px 28px, #bcbdcd 28px 29px, #777792 29px 30px);
  --xp-bordes: inset 1px 0 #66667e, inset 2px 0 #cfcfda, inset -1px 0 #66667e, inset -2px 0 #cfcfda;
  --xp-marco: inset 1px 0 #66667e, inset 2px 0 #fbfcfd, inset 3px 0 #a8a9bb, inset 4px 0 #66667e,
      inset -1px 0 #66667e, inset -2px 0 #fbfcfd, inset -3px 0 #a8a9bb, inset -4px 0 #66667e,
      inset 0 -1px #66667e, inset 0 -2px #fbfcfd, inset 0 -3px #a8a9bb, inset 0 -4px #66667e;
  --xp-titulo: #000; --xp-titulo-sombra: 1px 1px #fff;
  --xp-boton-borde: #6b758f;
  --xp-boton: linear-gradient(#fff 0 1px, #f2f1f7 1px 2px, #e9e8f1 2px 3px, #dcdbe7 23%, #cbcbdc 50%, #b8b9ce 70%, #b2b2ca 76%, #9c9ebe 92%, #8589b0 calc(100% - 1px));
  --xp-cerrar: radial-gradient(9px 4px at 50% 1px, rgba(250, 235, 183, .9), rgba(250, 235, 183, 0)),
      linear-gradient(#ffa898 0 1px, #f48a7d 1px 2px, #f18075 2px 3px, #e77572 23%, #db6464 50%, #cd595e 76%, #c6555c 92%, #aa3c55 calc(100% - 1px));
  --xp-glifo-min: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M3 12h1v4H3zm1 3h7v1H4z'/%3E%3Cpath fill='%23252536' d='M4 12h7v1H4zm6 1h1v2h-1z'/%3E%3Cpath fill='%236E6D8F' d='M4 13h6v2H4z'/%3E%3C/svg%3E");
  --xp-glifo-max: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M3 5h1v11H3zm1 10h11v1H4zM5 7h9v1H5zm8 1h1v6h-1z'/%3E%3Cpath fill='%23252536' fill-rule='evenodd' d='M4 4h11v11H4zm1 4v6h8V8z'/%3E%3Cpath fill='%236E6D8F' d='M5 5h9v2H5z'/%3E%3C/svg%3E");
  --xp-glifo-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' shape-rendering='crispEdges'%3E%3Cg fill='%23461E1A' transform='translate(0 -1)'%3E%3Cpath d='M4 4h2v1H4zm9 0h2v1h-2zM4 5h3v1H4zm8 0h3v1h-3zM5 6h3v1H5zm6 0h3v1h-3zM6 7h3v1H6zm4 0h3v1h-3zM7 8h5v1H7zm1 1h3v1H8zm-1 1h5v1H7zm-1 1h3v1H6zm4 0h3v1h-3zm-5 1h3v1H5zm6 0h3v1h-3zm-7 1h3v1H4zm8 0h3v1h-3z'/%3E%3C/g%3E%3Cpath fill='%23fff' d='M4 4h2v1H4zm9 0h2v1h-2zM4 5h3v1H4zm8 0h3v1h-3zM5 6h3v1H5zm6 0h3v1h-3zM6 7h3v1H6zm4 0h3v1h-3zM7 8h5v1H7zm1 1h3v1H8zm-1 1h5v1H7zm-1 1h3v1H6zm4 0h3v1h-3zm-5 1h3v1H5zm6 0h3v1h-3zm-7 1h3v1H4zm8 0h3v1h-3zM4 14h2v1H4zm9 0h2v1h-2z'/%3E%3C/svg%3E");
  background: #e0dfe3;
}
.bb-window--xp-silver .bb-wbtns span:last-child { border-color: #a63944; }

/* Mensaje de error de XP: marco de diálogo (3 px, barra de 29 px) y solo el ×; márgenes de 11 px, el icono de
   32 px y el texto a 18 px de él, y el botón "Aceptar" (75×23, el de por defecto, con su anillo azul) 18 px
   por debajo. El icono es un dibujo propio, no el de Microsoft. */
.bb-window--xp-error {
  --xp-marco: inset 1px 0 #0831d9, inset 2px 0 #166aee, inset 3px 0 #0855dd, inset -1px 0 #00138c, inset -2px 0 #001ea1, inset -3px 0 #003edc,
      inset 0 -1px #00138c, inset 0 -2px #001ea1, inset 0 -3px #0048f1;
  --xp-barra: linear-gradient(#0058ee 0 1px, #3f97ff 1px 2px, #2b90ff 2px 3px, #0372ff 3px 4px, #0365f1 4px 5px,
      #005ce9 5px 6px, #0058e6 6px 7px, #0054e3 7px 10px, #0055e5 10px 14px, #0055ea 14px 16px,
      #0058ee 16px 17px, #005bf2 17px 18px, #005af5 18px 19px, #0060f9 19px 20px, #0164f9 20px 21px,
      #026afe 21px 25px, #0065fd 25px 26px, #0060fc 26px 27px, #004de3 27px 28px, #0043cf 28px 29px);
  padding: 0 3px 3px;
}
.bb-window--xp-error .bb-window__bar { height: 29px; margin: 0 -3px; padding: 0 5px; }
.bb-window--xp-error .bb-window__title { padding-top: 9px; }
.bb-window--xp-error .bb-wbtns { margin-top: 5px; }
.bb-window--xp-error .bb-wbtns span:not(:last-child) { display: none; }
.bb-window--xp-error .bb-window__body { padding: 11px; }
.bb-window--xp-error .bb-window__body::before {
  content: ""; float: left; width: 32px; height: 32px; margin: 0 18px 8px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23FF9A8C'/%3E%3Cstop offset='.45' stop-color='%23E5281C'/%3E%3Cstop offset='1' stop-color='%238A0000'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='17.5' cy='18' rx='13' ry='13' fill='%23000' opacity='.3'/%3E%3Ccircle cx='15.5' cy='15.5' r='13.5' fill='url%28%23g%29' stroke='%23930B05'/%3E%3Cellipse cx='15.5' cy='9' rx='9' ry='5' fill='%23fff' opacity='.28'/%3E%3Cpath d='M10 10l11 11M21 10L10 21' stroke='%23fff' stroke-width='3.4' stroke-linecap='square'/%3E%3C/svg%3E");
}
.bb-window--xp-error .bb-window__body > :not(.bb-clear) { margin-left: 50px; }
.bb-window--xp-error .bb-window__body::after {
  content: "Aceptar"; content: "Aceptar" / ""; display: block; clear: both; box-sizing: border-box; width: 75px; height: 23px; margin: 18px auto 0;
  font: 11px/21px var(--vt-font-xp); text-align: center; color: #000; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(#cee7ff 0 1px, #bcd4f6 1px 2px, transparent 2px calc(100% - 2px), #89ade4 calc(100% - 2px) calc(100% - 1px), #6982ee calc(100% - 1px)),
    linear-gradient(#bad3f5, #89ade4) 0 0 / 2px 100% no-repeat, linear-gradient(#bad3f5, #89ade4) 100% 0 / 2px 100% no-repeat,
    linear-gradient(#fff, #f6f6f3 28%, #f0f0ea 84%, #ecebe6 89%, #e2dfd6 95%, #d6d0c5);
}
:lang(eu) .bb-window--xp-error .bb-window__body::after { content: "Ados"; content: "Ados" / ""; }

/* Bloc de notas: "- Bloc de notas" detrás del título y su icono; la barra de menús de 19 px (Tahoma 11 px)
   con su línea blanca, y el campo blanco con el borde #7f9db9 y Lucida Console 10 pt. */
.bb-window--notepad { --vt-fondo: #fff; --vt-h1: #000; --vt-h1-sombra: transparent; }
.bb-window--notepad .bb-window__title::before { background-image: url(/s/assets/ventanas/notepad-icono.7d54963b99.png); }
.bb-window--notepad .bb-window__title::after { content: "- Bloc de notas"; content: "- Bloc de notas" / ""; }
:lang(eu) .bb-window--notepad .bb-window__title::after { content: "- Ohar-blokea"; content: "- Ohar-blokea" / ""; }
.bb-window--notepad .bb-window__body { position: relative; margin-top: 20px; padding: 1px 4px 6px; font: 13px/15px var(--vt-font-consola); border: 1px solid #7f9db9; }
.bb-window--notepad .bb-window__body::before {
  content: "Archivo Edición Formato Ver Ayuda"; content: "Archivo Edición Formato Ver Ayuda" / "";
  position: absolute; left: -1px; right: -1px; top: -21px; height: 19px; padding-left: 6px; overflow: hidden; white-space: nowrap;
  font: 11px/19px var(--vt-font-xp); word-spacing: 12px; color: #000; background: #ece9d8; border-bottom: 1px solid #fff;
}
:lang(eu) .bb-window--notepad .bb-window__body::before { content: "Fitxategia Edizioa Formatua Ikusi Laguntza"; content: "Fitxategia Edizioa Formatua Ikusi Laguntza" / ""; }
.bb-window--notepad :is(.bb-h1, .bbc-h2) { font: bold 17px/1.3 var(--vt-font-consola); text-transform: none; text-shadow: none; letter-spacing: 0; }
.bb-window--notepad :is(.bbc-quote, .bb-quote) { background: none; border: 0; padding: 0 0 0 2ch; font-size: 13px; }
.bb-window--notepad .bbc-quote::before { content: ">"; float: left; margin-left: -2ch; }

/* XP Royale Noir y Zune: los temas negros de XP (2005-2006), con el esqueleto de Luna y el cuerpo oscuro. */
.bb-window--royale-noir {
  --xp-barra: linear-gradient(#000 0 1px, #7a7a7a 1px 2px, #5a5a5a 2px 3px, #3a3a3a 3px 6px, #262626 6px 14px, #0a0a0a 14px 16px, #000 16px 26px, #1a1a1a 26px 28px, #333 28px 29px, #000 29px 30px);
  --xp-bordes: inset 1px 0 #000, inset 2px 0 #4a4a4a, inset -1px 0 #000, inset -2px 0 #3a3a3a;
  --xp-marco: inset 1px 0 #000, inset 2px 0 #4a4a4a, inset 3px 0 #2a2a2a, inset 4px 0 #111,
      inset -1px 0 #000, inset -2px 0 #3a3a3a, inset -3px 0 #222, inset -4px 0 #111,
      inset 0 -1px #000, inset 0 -2px #3a3a3a, inset 0 -3px #222, inset 0 -4px #111;
  --xp-titulo-sombra: 1px 1px #000; --xp-boton-borde: #8a8a8a;
  --xp-boton: linear-gradient(#5d5d5d, #2b2b2b 48%, #000 52%, #1f1f1f);
  --xp-cerrar: linear-gradient(#e88b7e, #b8321f 48%, #8a1a0c 52%, #c0402b);
  background: #141414;
}
.bb-window--zune {
  --xp-barra: linear-gradient(#000 0 1px, #ff9a4d 1px 2px, #f26722 2px 3px, #3b3b3b 3px 4px, #2a2a2a 4px 14px, #121212 14px 16px, #050505 16px 27px, #f26722 27px 29px, #b4430c 29px 30px);
  --xp-bordes: inset 1px 0 #000, inset 2px 0 #3d3d3d, inset -1px 0 #000, inset -2px 0 #2c2c2c;
  --xp-marco: inset 1px 0 #000, inset 2px 0 #3d3d3d, inset 3px 0 #262626, inset 4px 0 #101010,
      inset -1px 0 #000, inset -2px 0 #2c2c2c, inset -3px 0 #1c1c1c, inset -4px 0 #101010,
      inset 0 -1px #000, inset 0 -2px #f26722, inset 0 -3px #1c1c1c, inset 0 -4px #101010;
  --xp-titulo-sombra: 1px 1px #000; --xp-boton-borde: #6a6a6a;
  --xp-boton: linear-gradient(#4a4a4a, #1f1f1f 50%, #000 51%, #191919);
  --xp-cerrar: linear-gradient(#ffb27a, #f26722 48%, #c94a0b 52%, #ef7a35);
  background: #101010;
}
.bb-window--zune .bb-window__body { --bb-cyan: #ff9a4d; --bb-cyan-deep: #f26722; }

/* ---------- Windows Vista / 7 (Aero) ----------
   Medido sobre un diálogo real de Windows 7: marco de cristal de 8 px (filo oscuro, brillo, 4 px de cristal
   translúcido con el desenfoque de lo que hay detrás y el filo del papel), título en Segoe UI 12 px negro con su
   halo blanco, el grupo de botones colgando del borde de arriba (26 y 27 × 19, y el × rojo de 47 × 19) y los
   reflejos en diagonal. Sobre el fondo oscuro de la web el cristal se ve azul oscuro, como en Vista. */
.bb-window--vista {
  padding: 0 7px 7px; border: 1px solid rgba(0, 0, 0, .86); border-radius: 6px 6px 5px 5px;
  background:
    linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, .3) 20%, transparent 27%, transparent 55%, rgba(255, 255, 255, .2) 57%, transparent 66%),
    linear-gradient(rgba(116, 184, 252, .5), rgba(116, 184, 252, .38) 40%, rgba(80, 140, 200, .5));
  box-shadow: inset 0 0 0 1px rgba(243, 248, 253, .75), var(--hard-shadow);
  -webkit-backdrop-filter: blur(5px) saturate(1.3); backdrop-filter: blur(5px) saturate(1.3);
  --vt-fondo: #fff; --vt-enlace: #0645ad; --vt-h1: #1b3f6e; --vt-h1-sombra: #b7d3f2;
}
.bb-window--vista .bb-window__bar {
  align-items: flex-start; min-height: 0; height: 28px; padding: 0 0 0 2px; background: none; border: 0;
  font: 12px/28px var(--vt-font-segoe); color: #000; text-transform: none; letter-spacing: 0;
  text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 6px #fff, 0 0 2px #fff;
}
.bb-window--vista .bb-window__bar::before { content: none; }
.bb-window--vista .bb-window__title { gap: 6px; }
.bb-window--vista .bb-window__title::before { content: ""; flex: none; width: 16px; height: 16px; background: url(/s/assets/icons/heart-pixel-16.cec35bc98f.png); image-rendering: pixelated; }
.bb-window--vista .bb-wbtns {
  align-self: flex-start; gap: 0; margin-top: -1px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .55); border-top: 0; border-radius: 0 0 5px 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .66), 1px 0 0 rgba(255, 255, 255, .66), -1px 0 0 rgba(255, 255, 255, .66);
}
.bb-window--vista .bb-wbtns span {
  width: 26px; height: 19px; font-size: 0; color: transparent; border: 0; border-right: 1px solid rgba(0, 0, 0, .3); border-radius: 0;
  background: var(--vt-glifo, none) center / 12px 10px no-repeat, linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .3) 45%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, rgba(255, 255, 255, .5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.bb-window--vista .bb-wbtns span:first-child:not(:last-child) { --vt-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Crect x='2.5' y='6.5' width='7' height='2.5' fill='%23fff' stroke='%23535666'/%3E%3C/svg%3E"); }
.bb-window--vista .bb-wbtns span:nth-child(2):not(:last-child) { width: 27px; --vt-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath fill='%23fff' stroke='%23535666' fill-rule='evenodd' d='M1.5 .5h9v9h-9zM3.5 3.5v4h5v-4z'/%3E%3C/svg%3E"); }
.bb-window--vista .bb-wbtns span:last-child {
  width: 47px; border-right: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M2 1l8 8M10 1L2 9' stroke='%23535666' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M2 1l8 8M10 1L2 9' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat,
    radial-gradient(60% 50% at 50% 100%, rgba(255, 190, 140, .65), transparent), linear-gradient(#eab4ae, #d78579 50%, #c04b3a 50%, #cf8373);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 0 0 2px rgba(82, 43, 35, .15);
}
.bb-window--vista .bb-window__body { padding: 8px 10px; border: 1px solid #5a6977; box-shadow: 0 0 0 1px rgba(228, 238, 248, .8); font: 12px/1.45 var(--vt-font-segoe); }

/* ---------- Mac OS 9 (Platinum) ----------
   Medido sobre SimpleText de Mac OS 9 a 1:1: contorno negro, relieve de 1 px y cara #cccccc; barra de 19 px con
   seis pares de rayas (#fff y #777, de y=4 a y=15) que se cortan 4 px antes del título centrado (Charcoal, o su
   primo libre ChicagoFLF); la casilla de cerrar a la izquierda y las de zoom y persiana a la derecha, de 11 px con
   borde #222 y su degradado en diagonal; y el papel hundido. */
.bb-window--os9 {
  padding: 0 4px 4px; background: #ccc; border: 1px solid #000;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #999, var(--hard-shadow);
  --vt-fondo: #fff; --vt-enlace: #0000cc; --vt-h1: #000; --vt-h1-sombra: #ccc;
}
.bb-window--os9 .bb-window__bar {
  position: relative; justify-content: center; min-height: 0; height: 19px; margin: 1px 0 1px; padding: 0 44px 0 21px; border: 0;
  background: repeating-linear-gradient(#fff 0 1px, #777 1px 2px) 0 3px / 100% 12px no-repeat content-box;
  font: 12px/19px var(--vt-font-mac9); color: #000; text-transform: none; text-shadow: none; letter-spacing: 0;
}
.bb-window--os9 .bb-window__bar::before { content: none; }
.bb-window--os9 .bb-window__title { padding: 0 4px; background: #ccc; }
.bb-window--os9 .bb-wbtns { position: static; }
.bb-window--os9 .bb-wbtns span {
  position: absolute; top: 4px; width: 11px; height: 11px; font-size: 0; color: transparent; border: 1px solid #222; border-radius: 0;
  background: linear-gradient(135deg, #999, #fff); box-shadow: inset 1px 1px #ccc, inset -1px -1px #888, -1px -1px 0 #888, 1px 1px 0 #fff, 0 0 0 3px #ccc;
}
.bb-window--os9 .bb-wbtns span:last-child { left: 5px; }
.bb-window--os9 .bb-wbtns span:first-child:not(:last-child) { right: 5px; background: linear-gradient(#222, #222) 1px 3px / 7px 1px no-repeat, linear-gradient(#222, #222) 1px 5px / 7px 1px no-repeat, linear-gradient(135deg, #999, #fff); }
.bb-window--os9 .bb-wbtns span:nth-child(2):not(:last-child) { right: 21px; background: linear-gradient(transparent, transparent) 1px 1px / 4px 4px no-repeat, linear-gradient(#222, #222) 0 0 / 6px 6px no-repeat, linear-gradient(135deg, #999, #fff); }
.bb-window--os9 .bb-window__body { padding: 8px 10px; border: 1px solid #000; box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; font: 12px/1.45 var(--font-body); }

/* ---------- Mac OS X Aqua (2002-2005) ----------
   Medido sobre TextEdit (10.2) y el Finder (10.3): barra de 22 px con las rayas de 4 px (#fff, #f0f0f0, #eaeaea,
   #f0f0f0) que se oscurecen hacia abajo y su línea #7f7f7f, título centrado en Lucida Grande 13 px normal, y el
   semáforo de 14 px de gel (aro oscuro, reflejo de cristal arriba y luz que rebota abajo) a 21 px de paso, que
   enseña su símbolo al pasar por encima. Esquinas de arriba redondeadas. */
.bb-window--aqua {
  padding: 0 0 6px; border: 1px solid rgba(0, 0, 0, .35); border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(#fff 0 1px, #f0f0f0 1px 2px, #eaeaea 2px 3px, #f0f0f0 3px 4px);
  box-shadow: var(--hard-shadow);
  --vt-fondo: #fff; --vt-enlace: #0a3fa8; --vt-h1: #000; --vt-h1-sombra: #b9d4f7;
}
.bb-window--aqua .bb-window__bar {
  position: relative; justify-content: center; min-height: 0; height: 22px; padding: 0 70px; border: 0; border-bottom: 1px solid #7f7f7f; border-radius: 5px 5px 0 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .075)), repeating-linear-gradient(#fff 0 1px, #f0f0f0 1px 2px, #eaeaea 2px 3px, #f0f0f0 3px 4px);
  font: 13px/21px var(--vt-font-aqua); color: #000; text-transform: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); letter-spacing: 0;
}
.bb-window--aqua .bb-window__bar::before { content: none; }
.bb-window--aqua .bb-wbtns { position: absolute; left: 7px; top: 3px; gap: 7px; }
.bb-window--aqua .bb-wbtns span {
  position: relative; width: 14px; height: 14px; font-size: 0; color: transparent; border: 0; border-radius: 50%;
  --tl-ring: #680707; --tl-base: #b8342a; --tl-mid: #d25043; --tl-glow: #feb8ab;
  background: radial-gradient(70% 55% at 50% 92%, var(--tl-glow) 0, transparent 100%), radial-gradient(circle at 50% 40%, var(--tl-mid) 0, var(--tl-base) 70%);
  box-shadow: inset 0 0 0 1px var(--tl-ring), 0 1px 1.5px rgba(0, 0, 0, .35);
}
.bb-window--aqua .bb-wbtns span::before { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 6px; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .15)); }
.bb-window--aqua .bb-wbtns span::after { content: ""; position: absolute; inset: 0; background: var(--tl-glifo) center / 8px 8px no-repeat; opacity: 0; }
.bb-window--aqua:hover .bb-wbtns span::after { opacity: 1; }
.bb-window--aqua .bb-wbtns span:last-child { order: -1; --tl-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='%234D0000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.bb-window--aqua .bb-wbtns span:first-child:not(:last-child) { --tl-ring: #9e2b07; --tl-base: #e5961a; --tl-mid: #f8b43f; --tl-glow: #ffe38a; --tl-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M.5 4h7' stroke='%23733C00' stroke-width='1.6'/%3E%3C/svg%3E"); }
.bb-window--aqua .bb-wbtns span:nth-child(2):not(:last-child) { order: 1; --tl-ring: #074007; --tl-base: #4d9a34; --tl-mid: #7fc343; --tl-glow: #c9f28e; --tl-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M.5 4h7M4 .5v7' stroke='%23004000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.bb-window--aqua .bb-window__body { margin: 0 6px; padding: 8px 10px; border: 1px solid #9a9a9a; font: 12px/1.45 var(--vt-font-aqua); }

/* ---------- MSN Messenger (2005) ----------
   La ventana de conversación: marco azul claro de mensajería, el título en azul marino con el icono de
   contactos (dibujo propio) y el papel blanco con las esquinas redondeadas. */
.bb-window--msn {
  padding: 0 6px 6px; border: 1px solid #5f84bf; border-radius: 6px;
  background: linear-gradient(#f4f8fe, #dce8f8 30%, #c3d6f0 70%, #b4cbeb);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), var(--hard-shadow);
  --vt-fondo: #fff; --vt-enlace: #0b4fb0; --vt-h1: #1c3a70; --vt-h1-sombra: #c6dcf7;
}
.bb-window--msn .bb-window__bar { min-height: 28px; padding: 0 2px 0 4px; background: none; border: 0; font: bold 12px/28px var(--vt-font-xp); color: #1c3a70; text-transform: none; text-shadow: 0 1px 0 #fff; letter-spacing: 0; }
.bb-window--msn .bb-window__bar::before { content: none; }
.bb-window--msn .bb-window__title { gap: 6px; }
.bb-window--msn .bb-window__title::before { content: ""; flex: none; width: 16px; height: 13px; background: url(/s/assets/ventanas/msn-icono.f3f4fcc5f4.png); }
.bb-window--msn .bb-wbtns span { width: 19px; height: 17px; font: bold 10px/1 Tahoma, sans-serif; color: #2b4f86; background: linear-gradient(#ffffff, #dbe7f7 50%, #c9daf2 51%, #e4eefb); border: 1px solid #7d9bcb; border-radius: 3px; }
.bb-window--msn .bb-wbtns span:last-child { color: #fff; background: linear-gradient(#f6a294, #e0533b 50%, #c93a22 51%, #e6765a); border-color: #a5321f; }
.bb-window--msn .bb-window__body { padding: 8px 10px; border: 1px solid #8aa8d6; border-radius: 5px; box-shadow: inset 0 18px 18px -18px #c9dbf4; font: 12px/1.45 var(--vt-font-xp); }

/* ========== webs personales (Neocities, Tumblr, 2010-2025) ========== */

/* ---------- blinkie + libreta ----------
   Como las de luvstarkei.com: marco blanco de 3 px, la barra es un "blinkie" (azul, letra pixel con
   contorno y borde de hormiguitas que se mueven) con su [X] de bisel, y el cuerpo es una hoja de libreta
   rosa con renglones y margen. */
.bb-window--blinkie { padding: 0; background: #fff6fa; border: 3px solid #fff; box-shadow: var(--hard-shadow); --vt-fondo: transparent; --vt-tinta: #3a1030; --vt-enlace: #b0005c; --vt-visitado: #7a1fa0; --vt-apagado: #6b3a5c; --vt-linea: #f2a7c9; --vt-par: rgba(255, 111, 168, .08); --vt-h1: #3a1030; --vt-h1-sombra: #ffb3d6; }
.bb-window--blinkie .bb-window__bar {
  min-height: 0; height: 30px; padding: 0 3px 0 8px; border: 2px dashed #fff;
  background: linear-gradient(#3b3bff, #0000c8 55%, #00008a) padding-box, #000 border-box;
  font: 16px/26px var(--font-pixel); color: #fff; text-transform: none; letter-spacing: 1px;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 2px 2px 0 #000;
  animation: vt-hormigas .5s steps(1) infinite;
}
.bb-window--blinkie .bb-window__bar::before { content: none; }
.bb-window--blinkie .bb-wbtns span:not(:last-child) { display: none; }
.bb-window--blinkie .bb-wbtns span { width: 20px; height: 18px; font: bold 13px/1 var(--font-body); color: #000; text-shadow: none; background: #c0c0c0; border: 0; border-radius: 0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.bb-window--blinkie .bb-window__body {
  padding: 11px 12px 12px 46px; line-height: 22px;
  background: linear-gradient(90deg, transparent 34px, #ff8fbf 34px 35px, transparent 35px 37px, #ff8fbf 37px 38px, transparent 38px), repeating-linear-gradient(transparent 0 21px, #f6bcd6 21px 22px), #fff6fa;
  background-position: 0 0, 0 11px, 0 0;
}
.bb-window--blinkie .bbc p { margin: 0 0 22px; }
@keyframes vt-hormigas { 50% { border-color: #000; background: linear-gradient(#3b3bff, #0000c8 55%, #00008a) padding-box, #fff border-box; } }

/* ---------- collage de Tumblr ----------
   El panel de luvstarkei: marco blanco de 3 px y un mosaico pixel (calaveras y gatos sobre lila, dibujo
   propio) que asoma alrededor; el título es una pegatina con contorno blanco y el texto va en una tarjeta. */
.bb-window--tumblr { padding: 8px 10px 10px; background: #cdb6f7 url(/s/assets/ventanas/collage-mosaico.643000a36d.png); border: 3px solid #fff; box-shadow: var(--hard-shadow); --vt-fondo: #fffafd; --vt-tinta: #24123d; --vt-enlace: #6a1fc2; --vt-visitado: #8a1a85; --vt-apagado: #4d3b66; --vt-h1: #24123d; --vt-h1-sombra: #d9c4ff; }
.bb-window--tumblr .bb-window__bar {
  justify-content: center; min-height: 0; margin: 0 0 6px; padding: 0; background: none; border: 0;
  font: 26px/1.15 var(--font-display); color: #7a2cff; letter-spacing: .5px;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff, 4px 4px 0 #24123d;
}
.bb-window--tumblr .bb-window__bar::before { content: none; }
.bb-window--tumblr .bb-wbtns { display: none; }
.bb-window--tumblr .bb-window__title { white-space: normal; text-align: center; }
.bb-window--tumblr .bb-window__body { padding: 10px 12px; border: 2px solid #24123d; box-shadow: 3px 3px 0 #24123d; }

/* ---------- kawaii pixel ----------
   Ventana de escritorio de juego indie (como la de lilithdev.neocities.org): tinta índigo de 2 px, barra con
   su icono, botones de un píxel de grosor, sombra lila dura y la pestaña de abajo. Al pasar por encima se
   "activa": el marco se vuelve menta y la barra rosa. */
.bb-window--kawaii { padding: 4px 4px 0; background: #e6e2f2; border: 2px solid #4932c9; box-shadow: 4px 4px 0 rgba(80, 20, 255, .35); --vt-fondo: #f9eff9; --vt-tinta: #2a1d7a; --vt-enlace: #4932c9; --vt-visitado: #7a1fa0; --vt-apagado: #4d4380; --vt-linea: #c9b8f2; --vt-par: rgba(73, 50, 201, .06); --vt-h1: #4932c9; --vt-h1-sombra: #f4b6e8; }
.bb-window--kawaii::after {
  content: ""; display: block; height: 12px; margin: 2px 0 2px;
  background: linear-gradient(#4932c9, #4932c9) 0 2px / 36px 2px no-repeat, linear-gradient(#4932c9, #4932c9) 0 10px / 36px 2px no-repeat, linear-gradient(#4932c9, #4932c9) 0 2px / 2px 10px no-repeat, linear-gradient(#4932c9, #4932c9) 34px 2px / 2px 10px no-repeat,
    linear-gradient(#4932c9, #4932c9) 42px 4px / 6px 6px no-repeat, linear-gradient(#4932c9, #4932c9) 51px 4px / 6px 6px no-repeat, linear-gradient(#4932c9, #4932c9) 60px 4px / 6px 6px no-repeat;
}
.bb-window--kawaii .bb-window__bar { min-height: 0; height: 26px; padding: 0 2px 0 4px; background: #fff; border: 2px solid #4932c9; font: bold 16px/22px var(--font-pixel); color: #4932c9; text-transform: none; text-shadow: none; }
.bb-window--kawaii .bb-window__bar::before { content: none; }
.bb-window--kawaii .bb-window__title::before { content: ""; flex: none; width: 16px; height: 16px; background: url(/s/assets/icons/heart-pixel-pink-16.35403d68a0.png); }
.bb-window--kawaii .bb-wbtns { gap: 3px; }
.bb-window--kawaii .bb-wbtns span { width: 18px; height: 18px; font-size: 0; color: transparent; background: #fff no-repeat center; border: 2px solid #4932c9; border-radius: 0; }
.bb-window--kawaii .bb-wbtns span:first-child:not(:last-child) { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'><path d='M0 6h8v2H0z' fill='%234932c9'/></svg>"); }
.bb-window--kawaii .bb-wbtns span:nth-child(2):not(:last-child) { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M0 0h8v8H0zM2 2v4h4V2z' fill='%234932c9'/></svg>"); }
.bb-window--kawaii .bb-wbtns span:last-child { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'><path d='M0 0h2v1h1v1h2V1h1V0h2v2H7v1H6v2h1v1h1v2H6V7H5V6H3v1H2v1H0V6h1V5h1V3H1V2H0z' fill='%234932c9'/></svg>"); }
.bb-window--kawaii .bb-window__body { margin-top: 4px; padding: 6px 8px; border: 2px solid #4932c9; }
.bb-window--kawaii:is(:hover, :focus-within) { background: #94f1e1; }
.bb-window--kawaii:is(:hover, :focus-within) .bb-window__bar { background: #edd0ee; }

/* ---------- CRT ----------
   La caja de dimden.dev: negro translúcido con borde gris de 2 px, el texto que brilla en blanco y menta, el
   título pixel en verde agua y las líneas de barrido bajando por encima. */
.bb-window--crt { position: relative; overflow: hidden; background: rgba(0, 0, 0, .78); border: 2px solid #383838; border-radius: 4px; box-shadow: var(--hard-shadow); }
.bb-window--crt::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); opacity: .3; box-shadow: inset 0 0 5em rgba(0, 0, 0, .55); animation: vt-crt 1.2s steps(4) infinite; }
@keyframes vt-crt { to { background-position: 0 4px; } }
.bb-window--crt .bb-window__bar { min-height: 0; padding: 8px 6px 4px 12px; background: none; border: 0; font: 16px/1.2 var(--font-8bit); color: #3fd9b4; text-transform: uppercase; text-shadow: 0 0 12px rgba(8, 189, 152, .75); }
.bb-window--crt .bb-window__bar::before { content: none; }
.bb-window--crt .bb-window__title::before { content: ""; flex: none; width: 16px; height: 16px; background: url(/s/assets/icons/heart-pixel-16.cec35bc98f.png); filter: drop-shadow(0 0 6px rgba(20, 220, 187, .6)); }
.bb-window--crt .bb-wbtns span { display: flex; width: auto; height: auto; padding: 0 2px; font: 14px/1 var(--font-term); color: #3fd9b4; background: none; border: 0; }
.bb-window--crt .bb-wbtns span::before { content: "["; } .bb-window--crt .bb-wbtns span::after { content: "]"; }
.bb-window--crt .bb-window__body { padding: 6px 15px 12px; color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .3), 0 0 16px rgba(0, 255, 171, .27); --bb-cyan: #3fd9b4; --bb-cyan-deep: #2fb595; }
.bb-window--crt .bb-h1 { text-shadow: 0 0 14px rgba(20, 220, 187, .55), 3px 3px 0 #0b3d33; }

/* ---------- Aero negro ----------
   El cristal oscuro de frutigeraeroarchive.org: panel translúcido con doble filo fino, barra con el brillo
   cortado a la mitad y el título centrado, los botones de gel (el de cerrar rojo) y el verde de Vista. */
.bb-window--aero-negro {
  padding: 5px; background: linear-gradient(rgba(70, 70, 70, .45), rgba(25, 25, 25, .6)); border: 1px solid rgba(236, 242, 249, .5); border-radius: 6px;
  outline: 1px solid rgba(28, 49, 39, .6); box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .2), var(--hard-shadow);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bb-window--aero-negro .bb-window__bar {
  justify-content: center; min-height: 0; height: 26px; padding: 0 70px; border: 1px solid #000; border-radius: 4px 4px 0 0;
  background: linear-gradient(#bebebe 0, #777 3%, #232323 55%, #000 55%, #161616 98%, #000 100%);
  font: 13px/24px var(--vt-font-segoe); color: #f7f4f4; text-transform: none; letter-spacing: 0; text-shadow: 0 0 6px rgba(0, 0, 0, .9);
}
.bb-window--aero-negro .bb-window__bar::before { content: none; }
.bb-window--aero-negro .bb-wbtns { position: absolute; right: 4px; top: 3px; gap: 2px; }
.bb-window--aero-negro .bb-wbtns span { width: 22px; height: 17px; font: bold 10px/1 var(--vt-font-segoe); color: #fff; border: 1px solid #000; border-radius: 3px; background: linear-gradient(#fff 0, #9a9a9a 3%, #4a4a4a 55%, #1c1c1c 55%, #3a3a3a 100%); }
.bb-window--aero-negro .bb-wbtns span:last-child { width: 34px; background: linear-gradient(#ffebeb 0, #fa8c8c 3%, #f31414 55%, #a30909 55%, #eb1717 100%); }
.bb-window--aero-negro .bb-window__body { margin-top: 5px; padding: 8px 10px; color: #dadada; background: rgba(27, 27, 27, .85); border: 1px solid #707070; border-radius: 0 0 4px 4px; text-shadow: 0 0 3px #000; --bb-cyan: #3cda56; --bb-cyan-deep: #35c24d; --bb-cream: #f2f2f2; }

/* ========== recortadas de imágenes de la época (Pinterest, Tumblr, rentry) ==========
   Marcos 9-slice: la ventana entera es una imagen (assets/_generators/ventanas-manifiesto.cjs dice de dónde
   sale cada una y qué se le ha tapado) y el título va en HTML encima de su barra. Lo de cada una (anchos del
   borde y sitio del título) está en la parte generada, al final de esta hoja; aquí, letras y colores. */
.bb-window--recorte { border-style: solid; border-color: transparent; background: none; box-shadow: none; filter: drop-shadow(3px 3px 0 #000); }
.bb-window--recorte .bb-window__bar { min-height: 0; padding: 0 4px; background: none; border: 0; font: bold 13px var(--vt-font-xp-titulo); text-transform: none; text-shadow: none; letter-spacing: 0; }
.bb-window--recorte .bb-window__bar::before { content: none; }
.bb-window--recorte .bb-wbtns { display: none; }
.bb-window--recorte .bb-window__body { padding: 6px 6px 4px; background-color: var(--vt-fondo, transparent); }
.bb-window--recorte .bb-window__body--flush { padding: 0; }

/* XP rosa (luvpngs): la barra rosa clarito pide el título en granate. */
.bb-window--xp-rosa { --vt-enlace: #a3004f; --vt-visitado: #7a1fa0; --vt-h1: #7a1d3f; --vt-h1-sombra: #ffc2d6; }
.bb-window--xp-rosa .bb-window__bar { color: #7a1d3f; text-shadow: 1px 1px 0 rgba(255, 255, 255, .6); }
.bb-window--xp-rosa .bb-window__body { font: 12px/1.45 var(--vt-font-xp); }

/* Windows 7 Basic (luvpngs): título negro en Segoe UI con su halo blanco; el arcoíris, en blanco con contorno. */
.bb-window--win7-arcoiris, .bb-window--win7-rosa, .bb-window--win7-lila, .bb-window--win7-menta { --vt-enlace: #0645ad; --vt-h1: #1e1e1e; }
:is(.bb-window--win7-arcoiris, .bb-window--win7-rosa, .bb-window--win7-lila, .bb-window--win7-menta) .bb-window__bar { font: 12px var(--vt-font-segoe); color: #000; text-shadow: 0 0 8px #fff, 0 0 4px #fff; }
:is(.bb-window--win7-arcoiris, .bb-window--win7-rosa, .bb-window--win7-lila, .bb-window--win7-menta) .bb-window__body { font: 12px/1.45 var(--vt-font-segoe); }
.bb-window--win7-arcoiris .bb-window__bar { font-weight: bold; color: #fff; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px 0 #000; }
.bb-window--win7-arcoiris .bb-window__title { padding: 0 6px; background: rgba(0, 0, 0, .62); border-radius: 3px; }
.bb-window--win7-arcoiris { --vt-h1-sombra: #ffd23f; }
.bb-window--win7-rosa { --vt-h1-sombra: #f7b6cf; }
.bb-window--win7-lila { --vt-h1-sombra: #d4b8f2; }
.bb-window--win7-menta { --vt-h1-sombra: #a6ead8; }

/* Corazones pixel (miomiau y el de gel): título pixel en blanco; el azul marino, con el cuerpo oscuro. */
.bb-window--corazon-pixel .bb-window__bar, .bb-window--corazon-gel .bb-window__bar { font: 16px var(--font-pixel); color: #fff; text-transform: uppercase; }
.bb-window--corazon-gel .bb-window__bar { text-shadow: 2px 2px 0 #0f2a9a; }
.bb-window--corazon-pixel .bb-window__body { color: #fff; }
.bb-window--corazon-gel { --vt-enlace: #1a3ad0; --vt-h1: #0f2a9a; --vt-h1-sombra: #9ec2ff; }

/* Paint pixel rosa: título pixel en ciruela y el menú, en castellano o en euskera, en su fila. */
.bb-window--paint-pixel { --vt-enlace: #8a1f6a; --vt-h1: #52275b; --vt-h1-sombra: #f5a5c6; }
.bb-window--paint-pixel .bb-window__bar { font: 16px var(--font-pixel); color: #52275b; }
.bb-window--paint-pixel .bb-window__body { position: relative; }
.bb-window--paint-pixel .bb-window__body::before { content: "Archivo   Edición   Ver   Imagen"; content: "Archivo   Edición   Ver   Imagen" / ""; position: absolute; left: 10px; right: 8px; top: -27px; overflow: hidden; font: 16px/21px var(--font-pixel); color: #52275b; white-space: pre; }
:lang(eu) .bb-window--paint-pixel .bb-window__body::before { content: "Fitxategia   Edizioa   Ikusi   Irudia"; content: "Fitxategia   Edizioa   Ikusi   Irudia" / ""; }

/* Pastel con corazones y luna. */
.bb-window--pastel-luna { --vt-tinta: #3a2350; --vt-enlace: #8a2a8a; --vt-h1: #6a3a8a; --vt-h1-sombra: #fbdbe4; }
.bb-window--pastel-luna .bb-window__bar { font: bold 14px Verdana, Geneva, sans-serif; color: #6a2f7a; }

/* Rosa 3D y rosa plano (este, con el cuerpo oscuro). */
.bb-window--rosa-3d { --vt-tinta: #3a1220; --vt-enlace: #9c1040; --vt-h1: #5a1a2a; --vt-h1-sombra: #f2b3bf; }
.bb-window--rosa-3d .bb-window__bar { font: bold 15px var(--vt-font-xp-titulo); color: #4a1222; }
.bb-window--rosa-plano .bb-window__bar { font: bold 15px Verdana, Geneva, sans-serif; color: #5a1f3a; }
.bb-window--rosa-plano .bb-window__body { color: #ffe3ec; --bb-cyan: #ff9eb2; --bb-cyan-deep: #f58aa4; --bb-muted: #d9a8b8; }
.bb-window--rosa-plano .bb-h1 { text-shadow: 2px 2px 0 #c2146f, 4px 4px 0 #000; }

/* Notas: la hoja con sus renglones de guiones (en CSS, para que siempre vayan con el texto). */
.bb-window--notas { --vt-tinta: #4a3210; --vt-enlace: #8a2a00; --vt-apagado: #6b5530; --vt-h1: #3d2a10; --vt-h1-sombra: #f3d48a; }
.bb-window--notas .bb-window__bar { font: bold 14px var(--vt-font-xp); color: #23175e; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.bb-window--notas .bb-window__body { line-height: 22px; background: linear-gradient(90deg, #fef5d8 50%, transparent 50%) 0 0 / 8px 22px, repeating-linear-gradient(transparent 0 21px, #d9cfa8 21px 22px) #fef5d8; }
.bb-window--notas .bbc p { margin: 0 0 22px; }

/* Kawaii plano. */
.bb-window--kawaii-plano { --vt-tinta: #2b1040; --vt-enlace: #6a1fc2; --vt-h1: #3a0c52; --vt-h1-sombra: #ffb7e5; }
.bb-window--kawaii-plano .bb-window__bar { font: bold 14px var(--vt-font-xp-titulo); color: #3a0c52; }

/* 98 neón: título negro, el menú en su fila y el cuerpo de terminal verde. */
.bb-window--neon-98 .bb-window__bar { font: bold 13px var(--vt-font-98); color: #000; }
.bb-window--neon-98 .bb-window__body { position: relative; color: #5ce500; font: 13px/1.45 var(--vt-font-consola); --bb-cyan: #fff; --bb-cyan-deep: #d8ffc8; --bb-muted: #8be86a; --bb-cream: #b8ff8a; }
.bb-window--neon-98 .bb-window__body::before { content: "Archivo   Edición   Buscar   Ayuda"; content: "Archivo   Edición   Buscar   Ayuda" / ""; position: absolute; left: 6px; right: 6px; top: -41px; overflow: hidden; font: 13px/24px var(--vt-font-xp); color: #000; white-space: pre; }
:lang(eu) .bb-window--neon-98 .bb-window__body::before { content: "Fitxategia   Edizioa   Bilatu   Laguntza"; content: "Fitxategia   Edizioa   Bilatu   Laguntza" / ""; }
.bb-window--neon-98 .bb-h1 { color: #5ce500; text-shadow: 3px 3px 0 #0b3d00; }

/* Note Pad de Mac en negro: el título centrado sobre las rayas, con su parche gris. */
.bb-window--notepad-mac .bb-window__bar { justify-content: center; font: bold 12px var(--vt-font-mac9); color: #000; }
.bb-window--notepad-mac .bb-window__title { padding: 0 8px; background: #d6d6d6; }
.bb-window--notepad-mac .bb-window__body { color: #f2f2f2; font: 12px/1.45 Geneva, Verdana, sans-serif; }

/* Marcos sin barra: strass, tachuelas y lentejuelas. El título va dentro, como un rótulo. */
.bb-window--strass .bb-window__bar, .bb-window--tachuelas .bb-window__bar, .bb-window--lentejuelas .bb-window__bar { justify-content: center; margin: 4px 0 6px; font: 28px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .5px; }
:is(.bb-window--strass, .bb-window--tachuelas, .bb-window--lentejuelas) .bb-window__title { white-space: normal; text-align: center; }
.bb-window--strass .bb-window__bar { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .85), 0 0 22px rgba(190, 220, 255, .6); }
.bb-window--tachuelas .bb-window__bar { color: #fff; text-shadow: 3px 3px 0 var(--bb-pink), 5px 5px 0 #000; }
.bb-window--lentejuelas .bb-window__bar { color: #c8006f; text-shadow: 2px 2px 0 #ffd1e8; }
.bb-window--lentejuelas { --vt-tinta: #3a0a24; --vt-enlace: #a3004f; --vt-h1: #3a0a24; --vt-h1-sombra: #ffb3d6; }

/* ---------- movimiento ----------
   Con reduced-motion o el modo tranquilo, quietos: el guante de la RPG, la ▼ del diálogo, las hormiguitas
   del blinkie y las líneas del CRT. */
@media (prefers-reduced-motion: reduce) {
  .bb-window--rpg .bb-window__title::before, .bb-window--dialogo .bb-window__body::after, .bb-window--blinkie .bb-window__bar, .bb-window--crt::after { animation: none; }
}
html.is-quiet .bb-window--rpg .bb-window__title::before, html.is-quiet .bb-window--dialogo .bb-window__body::after,
html.is-quiet .bb-window--blinkie .bb-window__bar, html.is-quiet .bb-window--crt::after { animation: none; }

/* ---------- GENERADO por assets/_generators/ventanas.cjs (ventanas recortadas): no editar a mano ---------- */
.bb-window--xp-rosa { border-width: 31px 80px 3.5px 22.5px; border-image: url(/s/assets/ventanas/xp-rosa.1c4b20b186.webp) 62 160 7 45 fill / 31px 80px 3.5px 22.5px stretch; --vt-fondo: #ffffff; }
.bb-window--xp-rosa .bb-window__body { margin-left: -18.8px; margin-right: -76.4px; }
.bb-window--xp-rosa .bb-window__bar { height: 28px; margin: -29.4px 0 1.4px 1.5px; width: calc(100% + 1.3px); line-height: 28px; }
.bb-window--win7-arcoiris { border-width: 29.5px 116px 8px 20.5px; border-image: url(/s/assets/ventanas/win7-arcoiris.65e9ada98a.webp) 59 232 16 41 fill / 29.5px 116px 8px 20.5px stretch; --vt-fondo: #f0f0f0; }
.bb-window--win7-arcoiris .bb-window__body { margin-left: -11.81px; margin-right: -108px; }
.bb-window--win7-arcoiris .bb-window__bar { height: 23.06px; margin: -26.69px 0 3.63px 0.31px; width: calc(100% + -1.31px); line-height: 23.06px; }
.bb-window--win7-rosa { border-width: 29.5px 116px 8px 20px; border-image: url(/s/assets/ventanas/win7-rosa.d22358e3d1.webp) 59 232 16 40 fill / 29.5px 116px 8px 20px stretch; --vt-fondo: #f0f0f0; }
.bb-window--win7-rosa .bb-window__body { margin-left: -11.5px; margin-right: -108px; }
.bb-window--win7-rosa .bb-window__bar { height: 23px; margin: -26.5px 0 3.5px 1px; width: calc(100% + -1.5px); line-height: 23px; }
.bb-window--win7-lila { border-width: 29.5px 116px 8px 20.5px; border-image: url(/s/assets/ventanas/win7-lila.0a95079243.webp) 59 232 16 41 fill / 29.5px 116px 8px 20.5px stretch; --vt-fondo: #f0f0f0; }
.bb-window--win7-lila .bb-window__body { margin-left: -11.81px; margin-right: -108px; }
.bb-window--win7-lila .bb-window__bar { height: 23.06px; margin: -26.69px 0 3.63px 0.31px; width: calc(100% + -1.31px); line-height: 23.06px; }
.bb-window--win7-menta { border-width: 29.5px 116px 8px 20.5px; border-image: url(/s/assets/ventanas/win7-menta.eb6b151729.webp) 59 232 16 41 fill / 29.5px 116px 8px 20.5px stretch; --vt-fondo: #f0f0f0; }
.bb-window--win7-menta .bb-window__body { margin-left: -11.81px; margin-right: -108px; }
.bb-window--win7-menta .bb-window__bar { height: 23.06px; margin: -26.69px 0 3.63px 0.31px; width: calc(100% + -1.31px); line-height: 23.06px; }
.bb-window--corazon-pixel { border-width: 30px 24px 8px 26px; border-image: url(/s/assets/ventanas/corazon-pixel.13bd0bb280.png) 60 48 16 52 fill / 30px 24px 8px 26px stretch; image-rendering: pixelated; --vt-fondo: #0e0c33; }
.bb-window--corazon-pixel .bb-window__body { margin-left: -18px; margin-right: -16px; }
.bb-window--corazon-pixel .bb-window__bar { height: 22px; margin: -26px 0 4px 2px; width: calc(100% + -4px); line-height: 22px; }
.bb-window--corazon-gel { border-width: 28px 27px 6px 24px; border-image: url(/s/assets/ventanas/corazon-gel.339925f815.png) 56 54 12 48 fill / 28px 27px 6px 24px stretch; image-rendering: pixelated; --vt-fondo: #ffffff; }
.bb-window--corazon-gel .bb-window__body { margin-left: -19px; margin-right: -22px; }
.bb-window--corazon-gel .bb-window__bar { height: 19px; margin: -23px 0 4px 1px; width: calc(100% + -2px); line-height: 19px; }
.bb-window--paint-pixel { border-width: 64px 78px 12.5px 33px; border-image: url(/s/assets/ventanas/paint-pixel.1da8289c93.webp) 128 156 25 66 fill / 64px 78px 12.5px 33px stretch; --vt-fondo: #ffffff; }
.bb-window--paint-pixel .bb-window__body { margin-left: -20.4px; margin-right: -65.4px; }
.bb-window--paint-pixel .bb-window__bar { height: 27.6px; margin: -59.8px 0 32.2px 0.6px; width: calc(100% + -1.2px); line-height: 27.6px; }
.bb-window--pastel-luna { border-width: 60px 34px 34px 81.5px; border-image: url(/s/assets/ventanas/pastel-luna.90ebb1b765.webp) 120 68 68 163 fill / 60px 34px 34px 81.5px stretch; --vt-fondo: #ffffff; }
.bb-window--pastel-luna .bb-window__body { margin-left: -64.8px; margin-right: 0px; }
.bb-window--pastel-luna .bb-window__bar { height: 27px; margin: -57.6px 0 30.6px 2.5px; width: calc(100% + 8.7px); line-height: 27px; }
.bb-window--rosa-3d { border-width: 48.5px 36px 22px 22px; border-image: url(/s/assets/ventanas/rosa-3d.1184768c0c.webp) 97 72 44 44 fill / 48.5px 36px 22px 22px stretch; --vt-fondo: #f1e9ea; }
.bb-window--rosa-3d .bb-window__body { margin-left: -13.8px; margin-right: -27.6px; }
.bb-window--rosa-3d .bb-window__bar { height: 34px; margin: -42.5px 0 8.5px -4px; width: calc(100% + -4px); line-height: 34px; }
.bb-window--rosa-plano { border-width: 33px 74.5px 4px 4.5px; border-image: url(/s/assets/ventanas/rosa-plano.927618fda2.webp) 66 149 8 9 fill / 33px 74.5px 4px 4.5px stretch; --vt-fondo: #1c0d16; }
.bb-window--rosa-plano .bb-window__body { margin-left: 0px; margin-right: -69.24px; }
.bb-window--rosa-plano .bb-window__bar { height: 27.6px; margin: -30.6px 0 3px 3.9px; width: calc(100% + -9.2px); line-height: 27.6px; }
.bb-window--notas { border-width: 37.5px 104px 30px 35px; border-image: url(/s/assets/ventanas/notas.0a3c30a97c.webp) 75 208 60 70 fill / 37.5px 104px 30px 35px stretch; --vt-fondo: #fef5d8; }
.bb-window--notas .bb-window__body { margin-left: -27px; margin-right: -78.8px; }
.bb-window--notas .bb-window__bar { height: 30px; margin: -33.5px 0 3.5px 0px; width: calc(100% + -1.2px); line-height: 30px; }
.bb-window--kawaii-plano { border-width: 39.5px 32px 43px 55px; border-image: url(/s/assets/ventanas/kawaii-plano.66c92411af.webp) 79 64 86 110 fill / 39.5px 32px 43px 55px stretch; --vt-fondo: #ffffff; }
.bb-window--kawaii-plano .bb-window__body { margin-left: -41.5px; margin-right: -13.5px; }
.bb-window--kawaii-plano .bb-window__bar { height: 30px; margin: -36.5px 0 6.5px -3px; width: calc(100% + 2px); line-height: 30px; }
.bb-window--neon-98 { border-width: 75px 77.5px 47.5px 20px; border-image: url(/s/assets/ventanas/neon-98.edf13fc891.webp) 150 155 95 40 fill / 75px 77.5px 47.5px 20px stretch; --vt-fondo: #000000; }
.bb-window--neon-98 .bb-window__body { margin-left: -13px; margin-right: 0px; }
.bb-window--neon-98 .bb-window__bar { height: 22px; margin: -73px 0 51px -13px; width: calc(100% + 10.5px); line-height: 22px; }
.bb-window--notepad-mac { border-width: 27.5px 25.5px 28px 28px; border-image: url(/s/assets/ventanas/notepad-mac.2ceb9f6818.webp) 55 51 56 56 fill / 27.5px 25.5px 28px 28px stretch; --vt-fondo: #000000; }
.bb-window--notepad-mac .bb-window__body { margin-left: -21.7px; margin-right: 0px; }
.bb-window--notepad-mac .bb-window__bar { height: 21px; margin: -25.4px 0 4.4px 14px; width: calc(100% + -43.45px); line-height: 21px; }
.bb-window--strass { border-width: 78px 78px 78px 78px; border-image: url(/s/assets/ventanas/strass.6299253f2a.webp) 156 156 156 156 fill / 78px 78px 78px 78px round; --vt-fondo: #000000; }
.bb-window--strass .bb-window__body { margin-left: -33px; margin-right: -33px; }
.bb-window--tachuelas { border-width: 39.5px 36.5px 39.5px 36.5px; border-image: url(/s/assets/ventanas/tachuelas.5b4f3a8b47.webp) 79 73 79 73 fill / 39.5px 36.5px 39.5px 36.5px round; --vt-fondo: #000000; }
.bb-window--lentejuelas { border-width: 50px 27.5px 52.5px 27.5px; border-image: url(/s/assets/ventanas/lentejuelas.2d340c87ab.webp) 100 55 105 55 fill / 50px 27.5px 52.5px 27.5px round; --vt-fondo: #ffffff; }
/* ---------- fin de lo generado ---------- */