body {
  background-color: #050505 !important;
  background-image: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)),
    linear-gradient(rgba(5, 5, 5, 0.7), rgba(5, 5, 5, 0.7)),
    url('../img/fondo1.webp') !important;
  background-size: 100% 4px, 3px 100%, cover, cover !important;
  background-attachment: fixed !important; 
  background-position: center !important;
  background-repeat: no-repeat !important;
  font-family: "Consolas", "Courier New", monospace !important;
  color: #e0e0e0 !important;
}

.md-content {
  background: transparent !important;
  font-family: "Consolas", "Courier New", monospace !important;
  color: #e0e0e0 !important;
}

.md-header {
  background-color: #0a0a0f !important;
  border-bottom: 2px solid #ff003c;
}

.md-content b, 
.md-content strong {
  color: #ff003c !important;
  font-weight: normal;
  text-shadow: 0 0 5px rgba(255, 0, 60, 0.5);
}

.md-content h1, .md-content h2, .md-content h3 {
  color: #ff003c !important; 
  text-transform: uppercase;
  letter-spacing: 2px; 
  text-shadow: 0 0 5px #ff003c;
  border-bottom: 1px dashed #ff003c; 
  padding-bottom: 10px; 
}

.cyber-container {
  display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 40px;
}

.cyber-img-panel {
  flex: 1; min-width: 300px; background: rgba(0, 20, 40, 0.6);
  padding: 15px; border: 1px solid #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2) inset;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
  position: relative;
}

.cyber-img {
  width: 100%; margin-top: 15px;
  filter: contrast(1.1) drop-shadow(0 0 5px rgba(0, 240, 255, 0.3));
}

.cyber-data-panel {
  flex: 1; min-width: 300px; background: rgba(40, 5, 5, 0.6);
  padding: 20px; border: 1px solid #ff003c;
  box-shadow: 0 0 15px rgba(255, 0, 60, 0.2) inset;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  position: relative;
}

.cyber-title {
  color: #ff003c !important; text-transform: uppercase;
  letter-spacing: 2px; text-shadow: 0 0 5px #ff003c;
  border-bottom: 1px dashed #ff003c; padding-bottom: 10px; margin-top: 0 !important;
}

.cyber-text {
  color: #e0e0e0; font-size: 0.95em; margin-bottom: 12px; line-height: 1.5;
}

.cyber-text b, .cyber-text strong {
  color: #ff003c !important; 
  text-shadow: 0 0 5px rgba(255, 0, 60, 0.5);
}

.cyber-hr { border-color: #ff003c; opacity: 0.3; margin: 40px 0; }

body::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="1"/%3E%3C/svg%3E');
  opacity: 0.04; 
  pointer-events: none; 
  z-index: 9999; 
  animation: static-flicker 0.2s infinite steps(2);
}

@keyframes static-flicker {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 2%); }
  40% { transform: translate(1%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}

.md-header__title .md-header__topic:first-child {
  display: none !important;
}

.md-nav--primary > .md-nav__title {
  font-size: 0 !important; 
}

.md-nav--primary > .md-nav__title::after {
  content: "CONTENIDOS:"; 
  font-size: 0.7rem !important; 
  color: rgba(255, 255, 255, 0.5) !important; 
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  text-shadow: none; 
  display: inline-block;
  margin-top: 5px;
}

html[lang="en"] .md-nav--primary > .md-nav__title::after {
  content: "CONTENTS:";
}

.md-nav--primary > .md-nav__title .md-logo {
  font-size: 1rem !important;
  margin-right: 10px;
}
/* ------------------------------------------------------------------
   EL SECRETO DEL JEFE ("The Boss")

   La ficha del ??? muestra su imagen TAPADA EN NEGRO, con un boton que la
   revela. Funciona sin JavaScript: el boton es un <label> atado a un
   checkbox escondido, asi que anda aunque el visitante tenga el JS trabado.

   Como se tapa: NO se cambia de imagen, se le aplica un filtro a la MISMA.
   brightness(0) pinta de negro todo lo visible, pero el canal alfa sigue
   estando: por eso se ve la SILUETA del Jefe y no un rectangulo negro. Los
   drop-shadow celestes le dibujan el borde encendido, asi que lo que queda a
   la vista es el contorno, sin un solo detalle del modelo.

   IMPORTANTE: la imagen TIENE QUE tener fondo transparente. Si se reemplaza
   por una con fondo opaco, el filtro tapa todo el rectangulo, se pierde el
   contorno y ademas desaparece el aura celeste de las demas fichas (ese aura
   es el drop-shadow de .cyber-img siguiendo el borde del personaje).

   AVISO: esto oculta la imagen a la vista, no la esconde del que sepa mirar
   el codigo de la pagina. Para un secreto de juego alcanza; si tiene que ser
   inviolable, la imagen no puede estar en el sitio hasta que se revele.
   ------------------------------------------------------------------ */
.cyber-secreto { position: relative; display: block; line-height: 0; }

/* el checkbox no se ve ni se puede tabular: el que maneja es el label */
.cyber-secreto-check {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.cyber-secreto .cyber-img {
  filter:
    brightness(0)
    drop-shadow(0 0 3px rgba(0, 240, 255, .95))
    drop-shadow(0 0 10px rgba(0, 240, 255, .55))
    drop-shadow(0 0 22px rgba(0, 240, 255, .3));
  transition: filter .5s ease;
}
/* al destaparse vuelve al filtro normal de las demas fichas */
.cyber-secreto-check:checked ~ .cyber-img {
  filter: contrast(1.1) drop-shadow(0 0 5px rgba(0, 240, 255, 0.3));
}

.cyber-secreto-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; cursor: pointer; line-height: 1;
  font-family: "Roboto Mono", "Consolas", monospace;
  font-size: .95em; font-weight: bold; letter-spacing: 2px; text-transform: uppercase;
  color: #ff003c; background: rgba(0, 0, 0, .75);
  border: 1px solid #ff003c; padding: 10px 22px;
  text-shadow: 0 0 5px #ff003c; box-shadow: 0 0 12px rgba(255, 0, 60, .25);
  transition: all .3s ease;
}
.cyber-secreto-btn:hover {
  color: #050505; background: #ff003c; box-shadow: 0 0 14px #ff003c; text-shadow: none;
}
/* el foco tiene que verse: al label se llega con el teclado */
.cyber-secreto-check:focus-visible ~ .cyber-secreto-btn { outline: 2px solid #00f0ff; outline-offset: 3px; }
/* una vez revelado el boton se va y deja ver la ficha entera */
.cyber-secreto-check:checked ~ .cyber-secreto-btn { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------
   "TODAVIA NO HAY PATROCINADORES"

   El mensaje vive arriba de todo en patrons.md, en la unica zona de esa
   pagina que el bot de Patreon NO reescribe (todo lo que esta antes del
   primer <div class="cyber-container">). Por eso no hay que tocarlo desde
   el bot ni preocuparse de que lo pise.

   Se esconde solo en cuanto aparece el primer patrocinador: el bot le pone
   la clase "patron" a cada nombre que escribe en las listas (ver
   patreon_bot.py). Si alla se cambia esa clase, hay que cambiarla aca.
   ------------------------------------------------------------------ */
.md-typeset:has(li.patron) .sin-patrocinadores { display: none; }