:root {
  --bg-color: #0d1117; /* Fondo oscuro ciberpunk */
  --panel-bg: #c0c0c0; /* Gris base retro */
  --text-main: #000000;
  --accent-green: #00ff00; /* Neón fósforo */
  --accent-blue: #00ffff; /* Cian eléctrico */
  /* Bordes biselados 3D más pronunciados */
  --border-3d-outset: 4px outset #ffffff;
  --border-3d-inset: 3px inset #ffffff;
  --font-mono: 'Courier New', monospace;
}

body {
  background-color: var(--bg-color);
  /* Patrón de fondo más denso y visible */
  background-image: 
    linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
  background-size: 15px 15px;
  font-family: var(--font-mono);
  font-size: 11px; /* MUY COMPACTO */
  color: var(--text-main);
  margin: 10px;
  padding: 0;
  line-height: 1.2;
  overflow-x: hidden; /* Evita scroll horizontal por GIFs */
}

/* === EFECTOS DE PANTALLA CRT === */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Scanlines */
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
  background-size: 100% 4px;
  z-index: 9999; /* Por encima de todo */
  pointer-events: none;
  opacity: 0.6;
}

/* === EL CONTENEDOR MAESTRO (PANEL UNIFICADO) === */
.mainframe {
  background: var(--panel-bg);
  border: var(--border-3d-outset);
  box-shadow: 8px 8px 0px #000000;
  max-width: 1200px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  grid-template-rows: auto auto 1fr auto; /* Fila extra para info header */
  gap: 4px;
  padding: 4px;
  position: relative; /* Para GIFs flotantes */
}

/* === DETALLES FUTURISTAS DE CABECERA Y PIE === */
.title-bar {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, #000080, #1084d0, #000080);
  color: white;
  padding: 3px 8px;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000000;
}

.header-info {
  grid-column: 1 / -1;
  background: #000;
  color: var(--accent-green);
  padding: 2px 10px;
  text-align: right;
  font-size: 10px;
  border: var(--border-3d-inset);
  border-color: #555;
  margin-bottom: 2px;
}

.footer {
  grid-column: 1 / -1;
  background: #808080;
  border-top: 2px ridge #ffffff;
  color: #000;
  padding: 3px 10px;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}

/* === ESTILO MODULAR DE LAS COLUMNAS (PANEL NODES) === */
.panel-node {
  border: 2px ridge #ffffff;
  background: #b0b0b0;
  display: flex;
  flex-direction: column;
  position: relative; /* Para decoración interna */
}

/* Cinta de peligro (Warning Tape) en los bordes internos */
.panel-node::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border: 4px solid;
  border-image: repeating-linear-gradient(45deg, #000, #000 5px, #ff0 5px, #ff0 10px) 4;
  pointer-events: none;
  opacity: 0.7;
}

.panel-header {
  background: #909090;
  color: #000;
  font-weight: bold;
  padding: 2px 5px;
  border-bottom: 1px solid #000;
  font-size: 11px;
  text-transform: uppercase;
  position: relative; /* Sobre la cinta de peligro */
  z-index: 1;
}

.panel-content {
  padding: 10px;
  flex-grow: 1;
  background-color: #d0d0d0;
  border: var(--border-3d-inset);
  margin: 6px; /* Más espacio para la cinta */
  position: relative;
  z-index: 1;
}

/* === SECCIÓN CENTRAL: DENSE INFO & CAOS === */
.main-center {
  grid-column: 2 / 3;
  background-color: #fff;
  color: #000;
  /* Fondo de Matriz Binaria (sutil en CSS) */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48Zz48dGV4dCB4PSIxMCIgeT0iMjAiIGZvbnQtZmFtaWx5PSJDb3VyaWVyIE5ldywgbW9ub3NwYWNlIiBmb250LXNpemU9IjEwIiBmaWxsPSJyZ2JhKDAsIDI1NSwgMCwgMC4wNSkiPMDEwMTAxMDEwMTwvdGV4dD48dGV4dCB4PSIyMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJDb3VyaWVyIE5ldywgbW9ub3NwYWNlIiBmb250LXNpemU9IjEwIiBmaWxsPSJyZ2JhKDAsIDI1NSwgMCwgMC4wNSkiPMTAxMDExMDEwMTwvdGV4dD48L2c+PC9zdmc+');
}

.marquee-terminal {
  background: #000000;
  color: var(--accent-green);
  font-family: var(--font-mono);
  padding: 4px;
  border: 3px inset #555;
  margin-bottom: 10px;
  font-weight: bold;
}

/* === COMPONENTES DE TEXTO Y ENLACES === */
h1 { margin-top:0; font-size: 18px; text-transform: uppercase; color: #000; }
h3 { font-size:13px; margin-bottom: 5px;}
 
a { color: #0000ee; font-weight: bold; text-decoration: none; position: relative;}
a:hover { text-decoration: underline; background: #ffff00; color: #000; }
a:visited { color: #551a8b; }

ul.nav-list { list-style: none; padding: 0; margin: 0; }
ul.nav-list li { margin-bottom: 4px; border-bottom: 1px dashed #999; padding-left: 5px;}
ul.nav-list a::before { content: "► "; font-size: 8px; color: var(--accent-blue); }

hr.retro-hr { border: 0; border-top: 1px solid #000; border-bottom: 1px solid #fff; margin: 12px 0; }

.stat-led {
  display: inline-block;
  width: 9px; height: 9px;
  background-color: var(--accent-green);
  border-radius: 50%;
  border: 1px solid #000;
  margin-right: 5px;
  box-shadow: 0 0 5px var(--accent-green);
}

/* === ESTILOS COMPACTOS DE PORTADAS (DERECHA) === */
.album-module {
  border: var(--border-3d-inset);
  border-color: #999;
  padding: 6px;
  margin-bottom: 10px;
  background: #b0b0b0;
  text-align: center;
  position: relative;
}

.album-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid #000;
  image-rendering: pixelated; /* Efecto retro */
  margin-bottom: 4px;
}

/* Adornos de álbum: Parental Advisory */
.album-module::after {
  content: "PARENTAL ADVISORY";
  position: absolute;
  bottom: 30px; right: 8px;
  background: #000; color: #fff;
  font-size: 7px; padding: 1px 3px;
  font-family: sans-serif; font-weight: bold;
}

.album-info { font-size: 10px; margin-top: 3px; line-height: 1.2; background: rgba(255,255,255,0.7); padding: 2px;}
.album-title { font-weight: bold; color: #000; }
.album-artist { color: #333; }

/* === CLASES PARA GIFS Y ELEMENTOS DE CAOS === */
.gif-deco {
  position: absolute;
  pointer-events: none;
  image-rendering: pixelated;
}

/* Animación de parpadeo */
@keyframes blink { 50% { opacity: 0; } }
.blink { animation: blink 0.5s step-end infinite; }