/* =========================================================================
   LCOS Premodern - piel Windows 95/98
   Cargado el ultimo (site-css en _config.yml) para ganar a Bootstrap y a
   beautifuljekyll.css sin necesidad de !important.

   REGLA DE ORO: la tipografia de 11px (--font-ui) y el aliasing desactivado
   son SOLO para el "chrome" (barras de titulo, menus, botones, barras de
   estado, pies de foto). El texto de los articulos vive en el panel blanco
   a 14px/1.7 con antialiasing normal. Las cronicas son largas y en castellano.
   ========================================================================= */

/* --- Tipografias servidas por nosotros ----------------------------------
   Verdana (1996) y Tahoma son LAS fuentes de la epoca y estan instaladas en
   Windows, macOS e iOS, pero no en Android ni en la mayoria de Linux. Para
   que la web se vea igual en cualquier maquina servimos DejaVu Sans como
   respaldo: viene de Bitstream Vera y comparte proporciones con Verdana
   (Condensed hace lo propio con Tahoma).

   Los ficheros estan recortados a Latin-1 + puntuacion (16-26 KB cada uno) y
   solo se descargan si el sistema no trae la fuente nativa.
   DejaVu Fonts, licencia Bitstream Vera (libre, permite redistribucion). */

@font-face {
  font-family: "DejaVu Sans";
  src: local("DejaVu Sans"), url("fonts/dejavu-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DejaVu Sans";
  src: local("DejaVu Sans Bold"), url("fonts/dejavu-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DejaVu Sans";
  src: local("DejaVu Sans Oblique"), url("fonts/dejavu-sans-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DejaVu Sans Condensed";
  src: local("DejaVu Sans Condensed"), url("fonts/dejavu-sans-condensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DejaVu Sans Condensed";
  src: local("DejaVu Sans Condensed Bold"), url("fonts/dejavu-sans-condensed-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Superficies y biseles */
  --surface: #c0c0c0;
  --face: #dfdfdf;
  --hi: #ffffff;
  --shadow: #808080;
  --frame: #0a0a0a;
  --desktop: #008080;

  /* Barra de titulo */
  --title-a-from: #000080;
  --title-a-to: #1084d0;
  --title-i-from: #808080;
  --title-i-to: #b5b5b5;

  /* Seleccion (estilo Explorador) */
  --sel: #000080;
  --sel-text: #ffffff;

  /* Texto y enlaces */
  --text: #222222;
  --text-dim: #555555;
  --link: #0000ff;
  --link-visited: #800080;

  /* Tipografia: Tahoma para el cromo (la fuente de interfaz de Windows 98) y
     Verdana para la prosa (la fuente de la web de los 90). DejaVu detras como
     respaldo servido por nosotros. */
  --font-ui: Tahoma, "DejaVu Sans Condensed", Geneva, Verdana, sans-serif;
  --font-body: Verdana, "DejaVu Sans", Geneva, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --ui-size: 11px;

  /* Altos del cromo fijo: el body reserva estos huecos arriba y abajo para que
     la página no pase por debajo (ver nav.navbar-custom y .win-taskbar-strip).
     Medidos: 51.09px con el menú plegado, 48.28px con la barra de menú. */
  --navbar-h: 52px;
  --taskbar-h: 30px;
}

/* --- Primitivas de bisel -------------------------------------------------
   Todo el estilo se sostiene sobre estas cuatro sombras. Fuente de luz fija
   arriba-izquierda: relieve = claro arriba/izq, oscuro abajo/der. Hundido es
   exactamente el inverso. Un solo elemento, sin marcado extra. */

.win-raised,
.win-window,
.win-btn,
.win-menubar,
.win-statusbar,
.win-titlebar-controls button,
.win-titlebar-controls a {
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-sunken,
.win-window-body,
.win-statusbar-field,
.win-photo,
pre,
.win-lightbox-stage {
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.win-btn:active,
.win-btn[aria-expanded="true"],
.win-titlebar-controls button:active,
.win-titlebar-controls a:active {
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

/* --- Escritorio ---------------------------------------------------------- */

body {
  background-color: var(--desktop);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  padding-top: var(--navbar-h);
  padding-bottom: var(--taskbar-h);
}

/* Que los enlaces internos no dejen el título debajo de la barra */
html {
  scroll-padding-top: var(--navbar-h);
}

/* Con la barra de menú desplegada (>=1200px) el cromo es un poco más bajo */
@media (min-width: 1200px) {
  :root {
    --navbar-h: 49px;
  }
}

/* El punteado del escritorio de Win95: dos gradientes diminutos en damero. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.35) 1px, transparent 0);
  background-size: 4px 4px;
}

/* Las filas de Bootstrap traen margenes negativos de -15px que aqui no
   compensa nadie y sacan 15px de scroll horizontal en pantallas estrechas.
   Como todas las plantillas son de una sola columna, se anulan. */
.container-md > .row,
.container-fluid > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Nada redondeado: es lo que mas delata la epoca, mas que cualquier color.
   Unica excepcion, al final del fichero: el globo del Ayudante de Office, que
   en 1997 ya era redondo (por eso desentonaba tanto). */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

a {
  color: var(--link);
  transition: none;
}

a:visited {
  color: var(--link-visited);
}

a:hover,
a:focus {
  color: var(--link);
  text-decoration: underline;
}

:focus-visible {
  outline: 1px dotted var(--frame);
  outline-offset: 1px;
}

/* Chrome: 11px, sin suavizado. Solo aqui. */
.win-titlebar-text,
.win-menubar,
.win-btn,
.win-statusbar,
.win-caption,
.win-lightbox-titlebar,
.win-lightbox-status,
.blog-tags,
.post-meta {
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* --- Barra superior: titulo + menu ---------------------------------------
   Se conserva el marcado de la navbar de Bootstrap (collapse, toggler,
   busqueda) para no romper beautifuljekyll.js; solo cambia el aspecto. */

nav.navbar-custom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  background-color: var(--surface);
  border-bottom: 1px solid var(--frame);
  display: block;
  z-index: 1030;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.win-titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px 2px 3px;
  background: linear-gradient(90deg, var(--title-a-from), var(--title-a-to));
  color: #fff;
}

.win-titlebar-icon img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.win-titlebar-text {
  flex: 1;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-titlebar-brand {
  font-family: "magicthe_gatheringregular", var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.5px;
}

.win-titlebar-controls {
  display: flex;
  gap: 2px;
}

.win-titlebar-controls button,
.win-titlebar-controls a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 15px;
  padding: 0 0 2px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  cursor: default;
}

.win-titlebar-controls a:visited,
.win-titlebar-controls a:hover,
.win-titlebar-controls a:focus {
  color: var(--text);
  text-decoration: none;
}

/* Barra de menu (Archivo Edicion Ver...) = navegacion del sitio */
.win-menubar {
  padding: 1px 2px;
  background: var(--surface);
}

.navbar-custom .navbar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
}

.navbar-custom .navbar-nav .nav-item {
  text-transform: none;
  font-size: var(--ui-size);
  letter-spacing: 0;
}

.navbar-custom .navbar-nav .nav-link {
  padding: 3px 8px;
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  font-weight: normal;
  line-height: 1.2;
  color: var(--text);
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus {
  background: var(--sel);
  color: var(--sel-text);
  text-decoration: none;
}

/* Primera letra subrayada, como las teclas de acceso de Windows */
.navbar-custom .navbar-nav .nav-link::first-letter {
  text-decoration: underline;
}

/* En una barra de menu de Windows la opcion es una palabra, no un icono:
   el tema esconde el texto en escritorio y muestra la lupa; lo invertimos. */
#nav-search-icon {
  display: none;
}

#nav-search-text {
  display: inline-block;
}

/* Boton Inicio (solo movil; sustituye a la hamburguesa de Bootstrap) */
/* Título de la barra de menú plegada. La bandera y el relieve son del botón
   Inicio de la barra de tareas; este es un menú de aplicación y se comporta
   como tal: plano, y en azul cuando está desplegado. */
.navbar-custom .win-menu-toggler {
  margin: 0;
  padding: 3px 8px;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  color: var(--text);
  -webkit-font-smoothing: none;
}

/* La tecla de acceso subrayada, como en cualquier menú de Windows */
.navbar-custom .win-menu-toggler::first-letter {
  text-decoration: underline;
}

.navbar-custom .win-menu-toggler[aria-expanded="true"] {
  background: var(--sel);
  color: var(--sel-text);
}

/* --- Iconos del escritorio -----------------------------------------------
   Van en los márgenes de teal, a los lados de la ventana. Se ocultan por
   debajo de 1200px: ahí el contenido ya ocupa todo y no hay escritorio que
   valga. Fijos, para que se queden quietos mientras la página se desplaza. */

.win-desktop-icons {
  display: none;
  position: fixed;
  top: calc(var(--navbar-h) + 14px);
  z-index: 1;
  width: 96px;
  flex-direction: column;
  gap: 16px;
}

.win-desktop-icons--left {
  left: 14px;
}

.win-desktop-icons--right {
  right: 14px;
}

@media (min-width: 1200px) {
  .win-desktop-icons {
    display: flex;
  }
}

.win-desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px;
  text-decoration: none;
}

/* Los iconos son de 48x48 nativos: se muestran a tamaño real y sin suavizar
   para que se vean tal cual, pixel a pixel. */
.win-desktop-glyph {
  display: block;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35));
}

.win-desktop-label {
  padding: 1px 3px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
  -webkit-font-smoothing: none;
}

/* Seleccionado, como en el escritorio de verdad */
.win-desktop-icon:hover .win-desktop-label,
.win-desktop-icon:focus .win-desktop-label,
.win-desktop-icon:focus-visible .win-desktop-label {
  background: var(--sel);
  color: var(--sel-text);
  text-shadow: none;
  outline: 1px dotted rgba(255, 255, 255, 0.7);
  outline-offset: -1px;
}

/* Al pasar por encima, el icono se tiñe de azul como el del escritorio */
.win-desktop-icon:hover .win-desktop-glyph,
.win-desktop-icon:focus .win-desktop-glyph {
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35))
          drop-shadow(0 0 0 var(--sel)) brightness(0.92) saturate(1.3);
}

/* --- Ventana de contenido ------------------------------------------------ */

.win-window {
  margin: 14px 0 18px;
  padding: 3px;
  background: var(--surface);
}

.win-window-titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px 2px 4px;
  background: linear-gradient(90deg, var(--title-a-from), var(--title-a-to));
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  font-weight: bold;
  -webkit-font-smoothing: none;
}

.win-window-titlebar-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-window-titlebar-controls {
  display: flex;
  gap: 2px;
}

.win-window-titlebar-controls button,
.win-window-titlebar-controls span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 15px;
  padding-bottom: 2px;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  line-height: 1;
  border: 0;
  font-family: var(--font-ui);
  font-weight: bold;
  cursor: pointer;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-window-titlebar-controls button:active {
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

/* El panel blanco: aqui vive la prosa, a tamano legible */
.win-window-body {
  margin-top: 3px;
  padding: 22px 24px 26px;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: auto;
}

.win-window-body > *:first-child {
  margin-top: 0;
}

/* Banner de cabecera (cover-img) enmarcado y hundido, no a sangre */
.intro-header {
  margin: 0;
}

.intro-header.big-img {
  height: 190px;
  margin: 3px 0 0;
  background-position: center;
  background-size: cover;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.intro-header.big-img .big-img-transition {
  inset: 0;
}

.header-section.has-img .no-img {
  display: none;
}

/* --- Cabecera del documento (dentro del panel blanco) -------------------- */

.win-dochead {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--shadow);
}

.win-window-body .win-dochead h1 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: bold;
  line-height: 1.15;
  color: var(--text);
}

.win-dochead .win-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-style: italic;
  color: var(--text-dim);
}

.win-dochead .post-meta {
  display: block;
  margin-top: 8px;
  font-style: normal;
  color: var(--text-dim);
}

/* --- Tipografia de contenido --------------------------------------------- */

.win-window-body p {
  margin: 0 0 1em;
  line-height: 1.65;
}

.win-window-body h1,
.win-window-body h2,
.win-window-body h3,
.win-window-body h4,
.win-window-body h5,
.win-window-body h6 {
  font-family: var(--font-ui);
  font-weight: bold;
  line-height: 1.2;
  color: var(--text);
  margin: 1.6em 0 0.5em;
}

.win-window-body h1 { font-size: 24px; }
.win-window-body h2 { font-size: 19px; }
.win-window-body h3 { font-size: 16px; }
.win-window-body h4,
.win-window-body h5,
.win-window-body h6 { font-size: 14px; }

/* Titulo de seccion con barra, como un group box de Windows */
.win-window-body h2 {
  padding: 3px 6px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--shadow),
    inset 1px 1px var(--hi);
}

.win-window-body ul,
.win-window-body ol {
  margin: 0 0 1em;
  padding-left: 24px;
}

.win-window-body li {
  margin-bottom: 0.25em;
}

.win-window-body hr {
  height: 2px;
  margin: 1.5em 0;
  border: 0;
  background: transparent;
  box-shadow:
    inset 0 1px var(--shadow),
    inset 0 -1px var(--hi);
}

.win-window-body blockquote {
  margin: 1.2em 0;
  padding: 10px 14px;
  background: var(--surface);
  color: var(--text);
  font-style: normal;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow);
}

code {
  padding: 0 2px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
}

pre {
  padding: 8px 10px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Tablas como un list view del Explorador */
.win-window-body table {
  width: 100%;
  margin: 1.2em 0;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

.win-window-body table th {
  padding: 3px 8px;
  border: 0;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  font-weight: bold;
  text-align: left;
  box-shadow:
    inset -1px -1px var(--shadow),
    inset 1px 1px var(--hi);
}

.win-window-body table td {
  padding: 3px 8px;
  border: 0;
  border-bottom: 1px solid #e0e0e0;
}

.win-window-body table tr:nth-child(2n) {
  background: #fff;
}

.win-window-body table tr:hover td {
  background: var(--sel);
  color: var(--sel-text);
}

/* --- Barra de estado ----------------------------------------------------- */

.win-statusbar {
  display: flex;
  gap: 3px;
  margin-top: 3px;
  padding: 2px 3px;
  background: var(--surface);
  box-shadow: none;
}

.win-statusbar-field {
  padding: 2px 6px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:
    inset -1px -1px var(--face),
    inset 1px 1px var(--shadow);
}

.win-statusbar-field:first-child {
  flex: 1;
}

/* --- Botones ------------------------------------------------------------- */

.win-btn,
.pagination .page-item .page-link,
.blog-tags a,
.post-read-more {
  display: inline-block;
  padding: 4px 12px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus,
.blog-tags a:hover,
.blog-tags a:focus,
.post-read-more:hover,
.post-read-more:focus {
  background: var(--surface);
  border: 0;
  color: var(--text);
  text-decoration: none;
}

.pagination .page-item .page-link:active,
.blog-tags a:active {
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

.pagination {
  margin: 18px 0 0;
}

.blog-tags {
  margin: 20px 0 0;
}

.blog-tags span {
  color: var(--text-dim);
  opacity: 1;
}

.blog-tags a {
  padding: 2px 8px;
  margin: 0 2px;
}

/* --- Portada: lista de entradas como un list view ------------------------ */

.posts-list {
  margin: 0;
}

.post-preview {
  padding: 0;
  margin: 0 0 3px;
  border-bottom: 0;
  overflow: visible;
}

.post-preview > article {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px dotted #c8c8c8;
}

/* Iconito de documento de cada entrada, como en la vista de lista del
   Explorador. Va como SVG en un data URI: 16x16, sin descargar nada. */
.post-preview > article::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h9l4 4v12H2z' fill='%23808080'/%3E%3Cpath d='M3 1h7l3 3v11H3z' fill='%23ffffff'/%3E%3Cpath d='M10 1l3 3h-3z' fill='%23c0c0c0'/%3E%3Cpath d='M10 1v3h3' fill='none' stroke='%23808080'/%3E%3Cpath d='M5 6h6M5 8h6M5 10h6M5 12h4' stroke='%23000080'/%3E%3C/svg%3E") no-repeat center;
  image-rendering: pixelated;
}

.post-preview:last-child > article {
  border-bottom: 0;
}

.post-preview a {
  font-family: var(--font-body);
  color: var(--link);
  text-decoration: none;
}

.post-preview a:hover,
.post-preview a:focus {
  color: var(--link);
  text-decoration: underline;
}

/* El titulo del listado es un <h2>, pero no queremos la barra de seccion */
.post-preview .post-title {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: bold;
}

.post-preview .post-subtitle {
  margin: 2px 0 4px;
  font-size: 14px;
  font-style: italic;
  color: var(--text-dim);
  font-weight: normal;
}

.post-preview .post-meta,
.win-dochead .post-meta {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: normal;
  color: var(--text-dim);
}

.post-preview .post-entry {
  font-size: 14px;
}

.post-preview .post-image img {
  padding: 2px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.post-preview .post-image {
  filter: none;
}

/* --- Fotos y galeria ------------------------------------------------------
   Marco hundido tipo Paint. El enlace es real (href a la imagen), asi que
   sin JavaScript sigue funcionando; el visor solo intercepta el click. */

.win-photo {
  display: inline-block;
  max-width: 100%;
  padding: 3px;
  background: var(--surface);
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
}

.win-photo:hover,
.win-photo:focus {
  background: var(--sel);
  text-decoration: none;
}

.win-photo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.win-window-body p > .win-photo {
  margin: 0.5em 0;
}

.win-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  margin: 1.4em 0;
  padding: 6px;
  background: #fff;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.win-gallery .win-photo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px;
  background: transparent;
}

.win-gallery .win-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.win-gallery .win-caption {
  padding: 1px 3px;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-gallery .win-photo:hover,
.win-gallery .win-photo:focus {
  background: transparent;
}

.win-gallery .win-photo:hover .win-caption,
.win-gallery .win-photo:focus .win-caption {
  background: var(--sel);
  color: var(--sel-text);
}

.win-gallery .win-photo:hover img,
.win-gallery .win-photo:focus img {
  outline: 1px dotted var(--shadow);
}

/* --- Visor de imagenes (lightbox) ---------------------------------------- */

.win-lightbox-scrim {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.win-lightbox-scrim[hidden] {
  display: none;
}

.win-lightbox {
  display: flex;
  flex-direction: column;
  max-width: min(1000px, 100%);
  max-height: 100%;
  padding: 3px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-lightbox-titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px 2px 4px;
  background: linear-gradient(90deg, var(--title-a-from), var(--title-a-to));
  color: #fff;
  font-weight: bold;
}

.win-lightbox-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-lightbox-titlebar .win-titlebar-controls button[disabled] {
  color: var(--shadow);
  text-shadow: 1px 1px 0 var(--hi);
}

.win-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin-top: 3px;
  padding: 6px;
  background: #fff;
  overflow: auto;
}

.win-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 130px);
  object-fit: contain;
}

.win-lightbox-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0 1px;
}

.win-lightbox-toolbar .win-spacer {
  flex: 1;
}

.win-lightbox-status {
  display: flex;
  gap: 3px;
  padding: 2px 0 0;
}

.win-lightbox-status .win-statusbar-field {
  padding: 2px 6px;
}

.win-lightbox-status .win-statusbar-field:first-child {
  flex: 1;
}

body.win-lightbox-open {
  overflow: hidden;
}

/* --- Buscador como cuadro de dialogo ------------------------------------- */

/* El buscador pasa a ser un cuadro de diálogo: campo hundido arriba y una
   lista tipo Explorador debajo, con la selección en azul. */

#beautifuljekyll-search-overlay {
  padding: 60px 16px 16px;
  background: rgba(0, 0, 0, 0.55);
}

#nav-search-input {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 5px 8px;
  border: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  text-align: left;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

#nav-search-input:focus {
  background: #fff;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

#nav-search-exit {
  top: 12px;
  right: auto;
  left: 50%;
  margin: 0 0 0 268px;
  width: 28px;
  height: 24px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 24px;
  text-align: center;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

#nav-search-exit:hover {
  color: var(--text);
}

#search-results-container {
  width: 100%;
  max-width: 520px;
  margin: 4px auto 0;
  padding: 3px;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

#search-results-container li a {
  display: block;
  padding: 3px 6px;
  color: var(--link);
}

#search-results-container li a:hover,
#search-results-container li a:focus {
  background: var(--sel);
  color: var(--sel-text);
  text-decoration: none;
}

@media (max-width: 620px) {
  #nav-search-exit {
    left: auto;
    right: 16px;
    margin: 0;
  }
}

/* --- Pie: barra de tareas + guinos de epoca ------------------------------ */

footer {
  margin-top: 20px;
  padding: 0;
  background: transparent;
  border: 0;
}

footer .beautiful-jekyll-footer {
  padding: 0;
}

.win-taskbar {
  padding: 3px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

footer .footer-links {
  margin: 0 0 6px;
}

footer .footer-links a {
  color: var(--text);
}

/* Los iconos redondos de Font Awesome desentonan: los convertimos en
   botones de barra de herramientas. El circulo de fondo sobra. */
footer .footer-links .fa-stack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  font-size: 1em;
  line-height: 1;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

footer .footer-links .fa-stack .fa-circle {
  display: none;
}

footer .footer-links .fa-stack .fa-stack-1x {
  position: static;
  width: auto;
  line-height: 1;
  font-size: 13px;
  color: var(--text);
}

footer .footer-links a:active .fa-stack {
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

footer .copyright,
footer .disclaimer {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  line-height: 1.5;
  color: var(--text-dim);
}

footer .disclaimer {
  margin-top: 4px;
}

.win-footer-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  box-shadow: inset 0 1px var(--shadow), inset 0 2px var(--hi);
}

/* Contador de visitas: puramente decorativo, un guino a la epoca.
   No cuenta nada; las estadisticas reales van por gtag. */
.win-counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
}

.win-counter-digits {
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  background: #000;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.win-counter-digits span {
  display: inline-block;
  min-width: 9px;
  background: #101010;
  color: #33ff33;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
}

/* Placa 88x31 de "best viewed in..." */
.win-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
  padding: 2px;
  background: linear-gradient(180deg, var(--title-a-from), var(--title-a-to));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 8px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi);
}

.win-badge:hover,
.win-badge:focus {
  color: #fff;
  text-decoration: none;
}

.win-badge b {
  font-size: 9px;
  letter-spacing: 0.3px;
}

/* --- Comentarios --------------------------------------------------------- */

#disqus_thread,
.win-comments {
  margin-top: 3px;
  padding: 12px;
  background: #fff;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

/* --- Pagina de tags ------------------------------------------------------ */

#full-tags-list {
  font-family: var(--font-body);
}

.tag-btn {
  display: inline-block;
  margin: 3px;
  padding: 3px 10px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  text-decoration: none;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

/* --- Barra de menu plegada (<1200px) --------------------------------------
   Debajo de 1200px la barra de menu cabe detras de un solo titulo, y se abre
   como un menu desplegable de Windows: panel gris en relieve, anclado bajo el
   titulo, del ancho de sus entradas. El menu Inicio, con su lomo azul, es otra
   cosa y vive en la barra de tareas. */

@media (max-width: 1199.98px) {
  .navbar-custom .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 2px;
    /* El tema le mete margin: 0 -1rem por debajo de 1200px (beautifuljekyll.css)
       y el panel se salia 14px por la izquierda, comiendose la primera letra de
       cada entrada. */
    margin: 0;
    border-top: 0;
    width: max-content;
    min-width: 170px;
    max-width: calc(100vw - 8px);
    max-height: calc(100vh - var(--navbar-h) - 8px);
    overflow-y: auto;
    padding: 2px;
    background: var(--surface);
    box-shadow:
      inset -1px -1px var(--frame),
      inset 1px 1px var(--hi),
      inset -2px -2px var(--shadow),
      inset 2px 2px var(--face);
  }

  .navbar-custom .navbar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .navbar-custom .navbar-nav .nav-link {
    padding: 6px 10px;
  }
}

/* --- Movil ---------------------------------------------------------------
   La metafora de ventana no cae bien en un movil: los biseles adelgazan, la
   barra de menu se pliega tras el boton Inicio y el visor ocupa casi todo. */

@media (max-width: 620px) {
  .win-window {
    margin: 8px 0 12px;
    padding: 2px;
  }

  .win-window-body {
    padding: 14px 14px 18px;
  }

  /* Se van los controles decorativos (_ y □), nunca el de cerrar: en el
     visor es la unica forma de salir a toque en un movil. */
  .win-window-titlebar-controls span:not(:last-child),
  .win-titlebar-controls button[disabled] {
    display: none;
  }

  /* Las dimensiones no caben en una pantalla estrecha */
  .win-lightbox-status .win-statusbar-field:last-child {
    display: none;
  }

  /* Los 17x15 px de Windows son imposibles de acertar con el dedo */
  .win-lightbox-titlebar .win-titlebar-controls button {
    width: 32px;
    height: 26px;
    font-size: 14px;
  }

  .win-lightbox-toolbar .win-btn {
    padding: 9px 14px;
  }

  .win-dochead h1 {
    font-size: 21px;
  }

  .intro-header.big-img {
    height: 130px;
  }

  .win-gallery {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  }

  .win-lightbox-scrim {
    padding: 6px;
  }

  .win-lightbox {
    max-width: 100%;
    width: 100%;
  }

  .win-lightbox-stage img {
    max-height: calc(85vh - 120px);
  }

  .win-footer-extras {
    flex-direction: column;
  }
}

/* --- Impresion -----------------------------------------------------------
   Las reglas se imprimen para llevarlas al torneo: fuera cromo. */

@media print {
  body {
    background: #fff;
    padding-top: 0;
    padding-bottom: 0;
  }

  body::before,
  nav.navbar-custom,
  footer,
  .win-window-titlebar,
  .win-statusbar,
  .intro-header,
  .pagination,
  .win-clippy,
  .win-taskbar-strip,
  .win-saver,
  #disqus_thread {
    display: none !important;
  }

  .win-window,
  .win-window-body {
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: none;
  }

  .win-photo {
    background: #fff;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Aviso de documento sin traducir -------------------------------------
   Franja de diálogo informativo de Windows: fondo gris, bisel hundido y la
   "i" en un círculo azul. */

.win-untranslated {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 10px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  color: var(--text);
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.win-untranslated-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50% !important;
  background: var(--title-a-from);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
}

/* --- Selector de idioma ---------------------------------------------------
   Al fondo de la barra de menú, como el "Ayuda" de Windows. En móvil la barra
   es una columna dentro del menú Inicio, así que vuelve a su sitio y se
   separa con una línea. */

.navbar-custom .navbar-nav .win-lang-item {
  margin-left: auto;
}

.navbar-custom .navbar-nav .win-lang-item .nav-link {
  font-weight: bold;
}

@media (max-width: 1199px) {
  .navbar-custom .navbar-nav .win-lang-item {
    margin-left: 0;
    margin-top: 3px;
    padding-top: 3px;
    box-shadow: inset 0 1px var(--shadow), inset 0 2px var(--hi);
  }
}

/* --- Reproductor multimedia (Windows Media Player 6.4) --------------------
   Envuelve los vídeos de YouTube; los mapas usan la variante --map, que es la
   misma ventana sin transporte. Lo monta assets/js/win95-media.js. */

.win-media {
  margin: 1.6em 0;
  padding: 3px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-media-titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px 2px 4px;
  background: linear-gradient(90deg, var(--title-a-from), var(--title-a-to));
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  font-weight: bold;
  -webkit-font-smoothing: none;
}

.win-media-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-media-menubar {
  display: flex;
  gap: 2px;
  padding: 2px 3px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  -webkit-font-smoothing: none;
}

.win-media-menu-item {
  padding: 1px 6px;
  color: var(--text);
}

.win-media-menu-item::first-letter {
  text-decoration: underline;
}

/* La pantalla: negra y hundida, con el .container de siempre dentro */
.win-media-screen {
  margin-top: 2px;
  padding: 2px;
  background: #000;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.win-media-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 2px 2px;
}

.win-media-spacer {
  flex: 1;
}

.win-media-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  padding: 0;
  border: 0;
  background: var(--surface);
  cursor: pointer;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-media-btn:active {
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

/* Los iconos son formas CSS, no texto: así son nítidos a cualquier tamaño */
.win-media-glyph {
  display: block;
  width: 8px;
  height: 8px;
}

.win-media-play .win-media-glyph {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--text);
  margin-left: 2px;
}

.win-media-pause .win-media-glyph {
  width: 8px;
  height: 9px;
  background: linear-gradient(90deg,
    var(--text) 0 3px, transparent 3px 5px, var(--text) 5px 8px);
}

.win-media-stop .win-media-glyph {
  width: 8px;
  height: 8px;
  background: var(--text);
}

/* Deslizador de volumen: decorativo, como el de verdad cuando no había sonido */
.win-media-volume {
  position: relative;
  width: 62px;
  height: 4px;
  margin-right: 4px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow);
}

.win-media-volume-thumb {
  position: absolute;
  top: -5px;
  right: 6px;
  width: 7px;
  height: 14px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-media-statusbar {
  display: flex;
  gap: 3px;
  padding: 2px 0 0;
}

.win-media-status {
  flex: 1;
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  color: var(--text-dim);
  -webkit-font-smoothing: none;
}

/* Los mapas no llevan transporte, así que la pantalla no va pegada al negro */
.win-media--map .win-media-screen {
  background: var(--surface);
}

@media (max-width: 620px) {
  /* En el móvil la barra de menú sobra y los botones tienen que poder tocarse */
  .win-media-menubar {
    display: none;
  }

  .win-media-btn {
    width: 40px;
    height: 34px;
  }

  .win-media-volume {
    width: 46px;
  }
}

/* --- Ayudante de Office (Clippy) ------------------------------------------
   Esquina inferior derecha, fijo. Dos piezas: el globo amarillo y la ventana
   del muñeco, con el rabito del globo apuntando a la ventana. Lo monta
   assets/js/win95-clippy.js; sin JavaScript no existe. */

.win-clippy {
  position: fixed;
  right: 14px;
  bottom: calc(var(--taskbar-h) + 10px);
  z-index: 1500;              /* por encima del contenido, por debajo del visor */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  -webkit-font-smoothing: none;
  animation: win-clippy-in 180ms ease-out;
}

@keyframes win-clippy-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* El globo: amarillo pálido, borde negro fino y esquinas redondeadas, tal
   cual el de Office 97. Es lo único de la web que no es un rectángulo. */
.win-clippy-balloon {
  position: relative;
  width: 250px;
  padding: 10px 12px;
  background: #ffffe1;
  border: 1px solid #000;
  border-radius: 7px !important;  /* excepcion a la regla de arriba */
  color: #000;
  line-height: 1.45;
}

/* Rabito: dos triángulos, el negro un pelo mayor para hacer de borde */
.win-clippy-balloon::before,
.win-clippy-balloon::after {
  content: "";
  position: absolute;
  right: 34px;
  width: 0;
  height: 0;
  border-style: solid;
}

.win-clippy-balloon::before {
  bottom: -13px;
  border-width: 13px 11px 0 0;
  border-color: #000 transparent transparent transparent;
}

.win-clippy-balloon::after {
  bottom: -11px;
  right: 35px;
  border-width: 11px 9px 0 0;
  border-color: #ffffe1 transparent transparent transparent;
}

.win-clippy-heading {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: bold;
}

.win-clippy-body {
  margin: 0 0 10px;
  padding: 6px 7px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.win-clippy-tip-title {
  margin: 0;
  font-weight: bold;
}

.win-clippy-tip-text {
  margin: 3px 0 0;
}

.win-clippy-tip-text:empty {
  display: none;
}

.win-clippy-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Cápsulas grises con bolita azul: los botones del ayudante no llevaban bisel */
.win-clippy-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  padding: 4px 10px;
  background: #efefef;
  border: 1px solid #9a9a9a;
  border-radius: 999px !important;
  font-family: inherit;
  font-size: var(--ui-size);
  color: #000;
  cursor: pointer;
}

.win-clippy-pill:hover {
  background: #f7f7f7;
}

.win-clippy-pill:active {
  background: #d8d8d8;
}

.win-clippy-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #6ab0ff, #1a4fa0 70%);
  flex: none;
}

.win-clippy-pill--close .win-clippy-bullet {
  background: radial-gradient(circle at 35% 30%, #d0d0d0, #7a7a7a 70%);
}

/* La ventana del muñeco: la misma chapa que las demás, pero en pequeño */
.win-clippy-window {
  width: 132px;              /* 124 del mapa de bits + los biseles */
  padding: 2px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-clippy-titlebar {
  display: flex;
  justify-content: flex-end;
  padding: 2px;
  background: linear-gradient(90deg, var(--title-a-from), var(--title-a-to));
}

/* El botón de cerrar hereda tamaño y bisel de .win-titlebar-controls button;
   aquí solo se le pone el cursor, porque este sí hace algo. */
.win-clippy-titlebar .win-clippy-close {
  cursor: pointer;
}

/* El recuadro del ayudante. El degradado azulado no se pinta aqui: viene
   dentro del propio mapa de bits. */
.win-clippy-stage {
  display: block;
  width: 100%;
  padding: 2px;
  border: 0;
  background: none;
  cursor: pointer;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

/* A tamaño real y sin interpolar, como los iconos del escritorio */
.win-clippy-art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

@media (max-width: 620px) {
  /* En el móvil el globo se estrecha y el clip encoge, para tapar lo justo */
  .win-clippy {
    right: 8px;
    bottom: calc(var(--taskbar-h) + 6px);
    gap: 9px;
  }

  .win-clippy-balloon {
    width: min(74vw, 230px);
  }

  /* Los 17x15 px de Windows no se aciertan con el dedo */
  .win-clippy-titlebar .win-clippy-close {
    width: 32px;
    height: 26px;
    font-size: 13px;
  }

  .win-clippy-pill {
    padding: 7px 10px;
  }
}

/* --- Pantallazo azul (el 404) --------------------------------------------
   Página completa, sin cromo. El azul y el gris son los de verdad: #0000AA
   sobre texto plata, con el nombre del equipo en vídeo inverso. */

.win-bsod-body {
  margin: 0;
  background: #0000aa;
  color: #aaaaaa;
  font-family: Consolas, "Lucida Console", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5;
}

/* El punteado del escritorio no pinta nada encima de un error fatal */
.win-bsod-body::before {
  display: none;
}

.win-bsod {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.win-bsod-screen[hidden] {
  display: none;
}

.win-bsod-screen {
  max-width: 62ch;
  margin: 0 auto;
}

/* Vídeo inverso, como el nombre del sistema en el mensaje original */
.win-bsod-title {
  margin: 0 0 1.5em;
  text-align: center;
}

.win-bsod-title span {
  background: #aaaaaa;
  color: #0000aa;
  padding: 0 1ch;
}

.win-bsod-p {
  margin: 0 0 1em;
}

.win-bsod-list {
  margin: 0 0 2em;
  padding: 0;
  list-style: none;
}

.win-bsod-list li {
  margin-bottom: 0.6em;
  padding-left: 4ch;
  text-indent: -4ch;
}

.win-bsod-list li::before {
  content: "*   ";
  white-space: pre;
}

.win-bsod-continue {
  margin: 0;
  text-align: center;
}

.win-bsod-caret {
  animation: win-bsod-blink 1s steps(1) infinite;
}

@keyframes win-bsod-blink {
  50% { opacity: 0; }
}

@media (max-width: 620px) {
  .win-bsod-body {
    font-size: 13px;
  }
}

/* --- Barra de tareas, menú Inicio y diálogos ------------------------------
   La barra va al final del pie, dentro del flujo. El menú se despliega hacia
   arriba desde el botón Inicio, como es debido. Lo maneja win95-shell.js. */

.win-taskbar-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;              /* sobre la página, bajo el visor y los diálogos */
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--taskbar-h);
  padding: 2px 3px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  -webkit-font-smoothing: none;
  box-shadow:
    inset 0 1px var(--hi),
    inset 0 2px var(--surface),
    0 -1px 0 var(--frame);
}

.win-start-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px 7px 3px 4px;
  border: 0;
  background: var(--surface);
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  color: var(--text);
  cursor: pointer;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-start-btn img {
  image-rendering: pixelated;
}

.win-start-btn:active,
.win-start-btn[aria-expanded="true"] {
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

/* Las ventanas minimizadas */
.win-taskbar-windows {
  display: flex;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.win-taskbar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 190px;
  padding: 3px 8px;
  border: 0;
  background: var(--surface);
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

.win-taskbar-btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.win-taskbar-btn img {
  flex: none;
  image-rendering: pixelated;
}

/* Minimizada = botón en relieve (no es la ventana activa) */
.win-taskbar-btn--min {
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-taskbar-tray {
  flex: none;
  padding: 2px 6px;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow);
}

.win-clock {
  display: inline-block;
  min-width: 5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.win-clock:empty::before {
  content: "--:--";
}

/* --- El menú --------------------------------------------------------------
   Con su lomo degradado a la izquierda y el texto en vertical, como el de
   Windows 95. */

.win-start-menu {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 0;
  z-index: 2500;
  display: flex;
  min-width: 210px;
  padding: 3px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-start-menu[hidden] {
  display: none;
}

.win-start-spine {
  flex: none;
  width: 22px;
  margin-right: 3px;
  background: linear-gradient(180deg, var(--title-a-to), var(--title-a-from));
  position: relative;
}

.win-start-spine span {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.win-start-list,
.win-start-sub {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.win-start-entry {
  position: relative;
}

.win-start-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 22px 4px 5px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

a.win-start-item:visited {
  color: var(--text);
}

.win-start-item img {
  flex: none;
  image-rendering: pixelated;
}

.win-start-item > span:first-of-type {
  flex: 1;
  white-space: nowrap;
}

.win-start-item:hover,
.win-start-item:focus,
.win-start-item[aria-expanded="true"] {
  background: var(--sel);
  color: var(--sel-text);
  text-decoration: none;
  outline: none;
}

.win-start-item--small {
  font-size: var(--ui-size);
  padding: 3px 22px 3px 5px;
}

.win-start-arrow {
  position: absolute;
  right: 6px;
  font-size: 8px;
}

.win-start-sep {
  height: 0;
  margin: 3px 2px;
  box-shadow: 0 1px var(--shadow), 0 2px var(--hi);
}

/* Submenús: salen a la derecha y solo cuando el padre está abierto */
.win-start-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: -3px;
  min-width: 180px;
  padding: 3px;
  background: var(--surface);
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-has-sub > button[aria-expanded="true"] + .win-start-sub {
  display: block;
}

/* --- Diálogos modales ----------------------------------------------------- */

.win-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.win-dialog {
  width: min(340px, 100%);
  padding: 3px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  -webkit-font-smoothing: none;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-dialog-titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px 2px 4px;
  background: linear-gradient(90deg, var(--title-a-from), var(--title-a-to));
  color: #fff;
  font-weight: bold;
}

.win-dialog-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-dialog-body {
  display: flex;
  gap: 12px;
  padding: 16px 12px 12px;
}

.win-dialog-icon {
  flex: none;
  image-rendering: pixelated;
}

.win-dialog-content {
  flex: 1;
  line-height: 1.5;
}

.win-dialog-content p {
  margin: 0 0 8px;
}

.win-dialog-content p:last-child {
  margin-bottom: 0;
}

.win-about-title {
  font-weight: bold;
}

.win-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 14px;
}

.win-dialog-actions .win-btn {
  min-width: 78px;
  padding: 5px 10px;
  text-align: center;
}

/* El botón por defecto de Windows llevaba un marco negro extra */
.win-dialog-actions .win-btn--default {
  outline: 1px solid var(--frame);
  outline-offset: 1px;
}

.win-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  cursor: pointer;
}

/* --- Ventana minimizada y maximizada -------------------------------------- */

.win-window--min > .win-window-body,
.win-window--min > .win-statusbar,
.win-window--min > .intro-header,
.win-window--min > #header-big-imgs {
  display: none;
}

/* A todo el ancho de la ventana del navegador, saliéndose de la columna */
.win-window--max {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* --- Apagar el equipo ------------------------------------------------------
   La pantalla negra con el mensaje en ámbar, que en 1995 salía después de
   "Apagar el sistema" y ya no se iba. */

.win-shutdown-on {
  overflow: hidden;
}

.win-shutdown-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000;
  cursor: pointer;
}

.win-shutdown-text {
  margin: 0;
  max-width: 30ch;
  color: #ffa000;
  font-family: Consolas, "Lucida Console", "Courier New", monospace;
  font-size: clamp(16px, 3.4vw, 30px);
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 620px) {
  /* En el móvil el menú necesita casi todo el ancho y los submenús no caben
     a la derecha: se despliegan debajo, sangrados. */
  .win-start-menu {
    min-width: min(280px, calc(100vw - 40px));
  }

  .win-start-sub {
    position: static;
    min-width: 0;
    padding: 0 0 0 14px;
    box-shadow: none;
  }

  .win-has-sub > button[aria-expanded="true"] + .win-start-sub {
    display: block;
  }

  .win-taskbar-btn {
    max-width: 130px;
  }
}

/* --- Combinación Hot Dog Stand --------------------------------------------
   La combinación de colores de Windows 3.1 que venía de fábrica y que nadie
   entendió nunca: amarillo, rojo y a correr. Todo el tema cabe aquí porque el
   resto del CSS solo usa los tokens de :root.
   Se activa desde el Panel de control o con el código Konami. */

:root[data-scheme="hotdog"] {
  --surface: #ffff00;
  --face: #ffff80;
  --hi: #ffffff;
  --shadow: #808000;
  --frame: #000000;
  --desktop: #ff0000;

  --title-a-from: #ff0000;
  --title-a-to: #ff0000;
  --title-i-from: #808000;
  --title-i-to: #c0c000;

  --sel: #ff0000;
  --sel-text: #ffffff;

  --text: #000000;
  --text-dim: #404000;
  --link: #0000ff;
  --link-visited: #800080;
}

/* El punteado blanco del escritorio no se ve sobre el rojo */
:root[data-scheme="hotdog"] body::before {
  opacity: 0.12;
}

/* --- Lista tipo Windows (Propiedades de Pantalla) ------------------------- */

.win-listbox {
  margin: 6px 0 0;
  padding: 2px;
  background: #fff;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.win-listbox-item {
  display: block;
  width: 100%;
  padding: 3px 6px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.win-listbox-item[aria-selected="true"] {
  background: var(--sel);
  color: var(--sel-text);
}

/* --- Salvapantallas -------------------------------------------------------
   Un lienzo a pantalla completa por encima de todo menos del apagado. Lo
   monta y lo quita assets/js/win95-screensaver.js. */

.win-saver {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: block;
  background: #000;
  cursor: none;
}

/* --- Anillo web -----------------------------------------------------------
   Las webs amigas van en chapas de 88x31 hechas con CSS (no tienen chapa
   propia); debajo, las chapas de época de verdad, en GIF. */

.win-webring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  box-shadow: inset 0 1px var(--shadow), inset 0 2px var(--hi);
}

.win-webring-sites {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.win-webring-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
  padding: 0 4px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 9px;
  line-height: 1.15;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: none;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-webring-btn:visited {
  color: var(--text);
}

.win-webring-btn:hover,
.win-webring-btn:focus {
  color: var(--text);
  text-decoration: none;
}

.win-webring-btn:active {
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

.win-webring-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.win-webring-badges img {
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
}

/* --- Buscaminas -----------------------------------------------------------
   Los gráficos son los originales (assets/img/minesweeper/), a tamaño real y
   sin interpolar. El resto -- marcos, biseles -- sale de los tokens de arriba.
   Lo monta assets/js/win95-minesweeper.js, solo en /buscaminas/. */

.win-mine {
  display: inline-block;
  margin: 1.4em 0;
  padding: 6px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  -webkit-font-smoothing: none;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-mine-menubar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding-bottom: 4px;
}

.win-mine-menu-label {
  margin-right: 4px;
  font-weight: bold;
}

.win-mine-level {
  padding: 3px 8px;
  border: 0;
  background: var(--surface);
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  cursor: pointer;
  box-shadow:
    inset -1px -1px var(--frame),
    inset 1px 1px var(--hi),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--face);
}

.win-mine-level[aria-pressed="true"],
.win-mine-level:active {
  box-shadow:
    inset 1px 1px var(--frame),
    inset -1px -1px var(--hi);
}

/* Marcador: contador, carita y reloj en un panel hundido */
.win-mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 4px 6px;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
}

.win-mine-digits {
  display: flex;
  gap: 0;
  line-height: 0;
}

.win-mine-digits img {
  display: block;
  image-rendering: pixelated;
}

.win-mine-face {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent no-repeat center / 26px 26px;
  image-rendering: pixelated;
  cursor: pointer;
}

.win-mine-scroller {
  overflow-x: auto;
  padding-bottom: 2px;
}

.win-mine-grid {
  display: grid;
  width: max-content;
  box-shadow:
    inset -1px -1px var(--hi),
    inset 1px 1px var(--shadow),
    inset -2px -2px var(--face),
    inset 2px 2px var(--frame);
  padding: 3px;
}

.win-mine-cell {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent no-repeat center / 16px 16px;
  image-rendering: pixelated;
  cursor: pointer;
  /* Sin resaltados del navegador al tocar: rompen el dibujo */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.win-mine-cell:focus-visible {
  outline: 1px dotted var(--frame);
  outline-offset: -2px;
}