@import url('https://db.onlinewebfonts.com/c/c8c687cbf9cb8e31684d6bc0317c9380?family=Old+London');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

body {
  background-image: url("images/fondo1.jpg");
  background-color: #221429;
  color: #fdf6e2; 
  font-family: "Times New Roman", Times, serif; /* Fuente por defecto noventera */
  font-size: 18px;
  margin: 10px;
}

body, a, button {
  cursor: url("images/raton.gif"), auto;
}

/* Enlaces Web 1.0 (Amarillos y rojos al pasar) */
a {
  color: #ffd700;
  text-decoration: underline;
  font-weight: bold;
}

a:hover {
  color: #ff0000;
  background-color: #000000;
}

.center-content {
  text-align: center;
}

/* --- TEXTO QUE SE MUEVE --- */
.marquee-retro {
  background-color: #7a0016; /* Rojo Burdeos */
  border-top: 4px ridge #d4af37;
  border-bottom: 4px ridge #d4af37;
  color: #ffffff;
  font-family: "Courier New", Courier, monospace; /* Letra de máquina de escribir */
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  margin: 15px 0;
}

/* --- CAJAS ESTILO GEOCITIES (BORDES DUROS, SOMBRAS PLANAS) --- */
.box-retro {
  background-color: #1a0d20;
  /* Un borde en relieve súper grueso que grita 1998 */
  border: 8px ridge #d4af37; 
  /* Sombra completamente dura, cero difuminado */
  box-shadow: 6px 6px 0px #000000; 
  padding: 15px;
  margin-bottom: 20px;
}

.profile-box {
  width: 70%;
  margin: 0 auto;
}

.portal-box {
  background-color: #2b0010;
  border-color: #7a0016;
}

/* Títulos dentro de las cajas */
.retro-title {
  background-color: #000000;
  border: 2px solid #d4af37;
  color: #ffd700;
  margin-top: 0;
  padding: 5px;
  font-family: "Book Antiqua", Georgia, serif;
}

.info-table td {
  padding: 5px 15px;
  font-size: 18px;
}

/* Imágenes que sirven de enlace */
.retro-link-img {
  border: 4px solid transparent;
}
.retro-link-img:hover {
  border: 4px solid #ff0000; /* Borde rojo duro al pasar el ratón */
}

/* --- FOOTER Y BOTONES 88x31 --- */
.footer-90s {
  margin-top: 40px;
  border-top: 5px double #d4af37;
  padding-top: 20px;
}

.badges img {
  border: 0px solid #d4af37;
  margin: 2px;
}

/* ==========================================
   CODEX (EL MANUSCRITO PLANO Y DURO)
   ========================================== */

.retro-back {
  background-color: #000000;
  border: 3px outset #d4af37;
  padding: 5px 15px;
  font-size: 20px;
  text-decoration: none !important;
}

.retro-back:active {
  border: 3px inset #d4af37; /* Efecto de botón presionado clásico */
}

.manuscrito-duro {
  background-image: url('images/tilepaper.jpg'); /* papirofondo */
  background-repeat: repeat;
  border: 6px solid #4a2e15; /* Borde madera oscuro plano */
  box-shadow: 10px 10px 0px #000000; /* Sombra dura de bloque */
  color: #1a0f00; /* Tinta negra medieval */
  padding: 30px;
  
  /* --- ALINEACIÓN DE CÓDICE --- */
  text-align: justify;
  text-justify: inter-word; /* Ajuste limpio de espacios entre palabras */
  
  /* --- TIPOGRAFÍA GÓTICA OLD LONDON --- */
  font-family: 'Old London', 'UnifrakturMaguntia', 'Garamond', 'Georgia', 'Times New Roman', serif;
  font-size: 26px; /* Tamaño ideal para que lucen los detalles de Old London */
  line-height: 1.5; /* Interlineado denso estilo pergamino */
  letter-spacing: 0.8px; /* Espaciado sutil para resaltar las capitulares */
  
  /* --- GUIONIZADO AUTOMÁTICO --- */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.manuscrito-duro h1 {
  font-family: "UnifrakturMaguntia", serif;
  color: #7a0016; /* Tinta burdeos */
  font-size: 40px;
  margin: 10px 0;
  text-shadow: 2px 2px 0px #ffffff; /* Sombra de texto dura */
  text-align: center;
}

.manuscrito-duro h2 {
  font-family: "UnifrakturMaguntia", serif;
  color: #2F4FA3; /* Tinta burdeos */
  font-size: 35px;
  margin: 5px 0;
  text-shadow: 2px 2px 0px #ffffff; /* Sombra de texto dura */
  text-align: center;
}

.manuscrito-duro h3 {
  font-family: "Old London", serif;
  color: #000000; /* Tinta burdeos */
  font-size: 20px;
  margin: 10px 0;
  text-shadow: 2px 2px 0px #ffffff; /* Sombra de texto dura */
}

.linea-dura {
  border: 0;
  border-top: 4px double #4a2e15;
  border-bottom: 2px solid #7a0016;
  height: 6px;
  margin: 20px 0;
}

/* Tabla del índice manuscrito */
.tabla-indice td {
  padding: 10px;
  border-bottom: 2px dotted #4a2e15; /* Línea de puntos de libro viejo */
}

.tabla-indice h2 {
  color: #7a0016;
  margin: 0;
}

.tabla-indice a {
  color: #1a0f00;
  font-size: 24px;
  font-family: "Old London", Times, serif;
}

.tabla-indice a:hover {
  background-color: #7a0016;
  color: #ffffff;
}

/* Scrollbar estilo barroco noventero (Se queda porque es genial) */
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: #1a0d20; border-left: 2px solid #d4af37; }
::-webkit-scrollbar-thumb { background-color: #4a2057; border: 2px solid #d4af37; }
::-webkit-scrollbar-thumb:hover { background-color: #7a0016; }

/* ==========================================
   ACTUALIZACIONES ESTILO BARROCO-DURO 1995
   ========================================== */

/* 1. Animación Multicolor para la Marquesina */
@keyframes rainbow {
  0% { color: #ff0000; }
  16% { color: #ff7f00; }
  32% { color: #ffff00; }
  48% { color: #00ff00; }
  64% { color: #00bbff; }
  80% { color: #ff00ff; }
  100% { color: #ff0000; }
}
.rainbow-text {
  animation: rainbow 1.5s linear infinite;
  font-weight: bold;
  text-shadow: 2px 2px 0px #000000; /* Sombra dura para que resalte */
}
.center-rainbow-text {
  animation: rainbow 1.5s linear infinite;
  font-weight: bold;
  text-shadow: 2px 2px 0px #000000;
  text-align: center; /* Centra el texto */
  display: block;     /* Asegura que ocupe todo el ancho para poder centrarse */
  font-family: "Times New Roman", serif;
}


/* 2. Recuadro Unificado de los Portales (Codex y Música) */
.portal-unified {
  background-image: url('images/backstar.gif'); /* El fondo de estrellas */
  background-repeat: repeat;
  border: 8px ridge #d4af37;
  box-shadow: 6px 6px 0px #000000;
  padding: 20px;
  margin: 20px auto;
  width: 95%; /* Ocupa casi todo el ancho */
}

/* 3. Texto Medieval bajo los títulos de los portales */
.medieval-text {
  font-family: 'MedievalSharp', "Times New Roman", serif;
  font-size: 22px;
  color: #fce6a8;
  background-color: rgba(0, 0, 0, 0.7); /* Fonde negro duro para que se lea bien sobre las estrellas */
  border: 2px solid #7a0016;
  padding: 15px;
  margin: 10px 20px;
  text-align: center;
  box-shadow: 4px 4px 0px #000000;
}

/* 4. Marco Cuadrado de Ratones para las imágenes gigantes */
.raton-frame {
  display: inline-block;
  background-image: url('images/raton.gif');
  background-repeat: repeat;
  padding: 20px; /* Esto hace el grosor del marco de ratones */
  border: 0px solid #7a0016; /* Borde rojo externo */
  box-shadow: 0px 0px 0px #000000;
}

.raton-frame img {
  display: block;
  width: 100%;
  max-width: 320px; /* ESTO HACE QUE LAS DOS IMÁGENES SE VEAN DEL MISMO TAMAÑO GIGANTE */
  height: auto;
  border: 0px solid #d4af37; /* Borde dorado interno */
}

.raton-frame:hover {
  border-color: #ff0000; /* Cambia a rojo brillante al pasar el ratón */
  cursor: pointer;
}

.raton-frame-codex {
  display: inline-block;
  background-image: url('images/raton.gif');
  background-repeat: repeat;
  padding: 20px; /* Esto hace el grosor del marco de ratones */
  border: 0px solid #7a0016; /* Borde rojo externo */
  box-shadow: 0px 0px 0px #000000;
}

.raton-frame-codex img {
  display: block;
  width: 100%;
  max-width: 550px; /* ESTO HACE QUE LAS DOS IMÁGENES SE VEAN DEL MISMO TAMAÑO GIGANTE */
  height: auto;
  border: 0px solid #d4af37; /* Borde dorado interno */
}

.raton-frame-codex:hover {
  border-color: #ff0000; /* Cambia a rojo brillante al pasar el ratón */
  cursor: pointer;
}

/*MUSIC PLAYER*/

.player-table {
  background-image:; /* papirofondo */
  background-repeat: repeat;
  border: 0px solid #000000; /* Borde madera oscuro plano */
  box-shadow: 0px 0px 0px #000000; /* Sombra dura de bloque */
  color: #FFB300; /* Tinta blanco */
  padding: 30px;
  text-align: center;
}

.player-table h1 {
  font-family: "Georgia", serif;
  color: #FFB300; /* Tinta burdeos */
  font-size: 40px;
  margin: 10px 0;
  text-shadow: 2px 2px 0px #ffffff; /* Sombra de texto dura */
}

/* ==========================================
   REPRODUCTOR CD DE COCHE ESTILO 90s/2000s
   ========================================== */

.car-cd-player {
  background: linear-gradient(145deg, #2b2e36, #18191d);
  border: 6px outset #5a5e6b;
  box-shadow: inset 2px 2px 6px #000, 8px 8px 0px #000000;
  border-radius: 8px;
  padding: 15px;
  margin: 15px auto;
  max-width: 800px;
  box-sizing: border-box;
}

.car-brand {
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #88909e;
  letter-spacing: 2px;
  margin-bottom: 10px;
  text-align: left;
  border-bottom: 1px solid #3a3d47;
  padding-bottom: 4px;
}

/* Panel Superior Dividido */
.cd-main-panel {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

/* Lista de Canciones */
.cd-playlist {
  flex: 1;
  min-width: 220px;
  background: #000000;
  border: 4px inset #2a2c33;
  padding: 10px;
  border-radius: 4px;
  text-align: left;
}

.panel-label {
  font-size: 14px;
  color: #ffd700;
  font-weight: bold;
  margin-bottom: 8px;
  border-bottom: 1px dashed #444;
  padding-bottom: 4px;
}

.playlist-scroll {
  max-height: 180px;
  overflow-y: auto;
}

.track-btn {
  width: 100%;
  text-align: left;
  background: #252830;
  color: #ffd700;
  border: 2px outset #4a4e5a;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

.track-btn:hover {
  background: #3b3f4c;
  color: #ffffff;
}

.track-btn.active {
  background: #7a0016;
  color: #00ff66;
  border: 2px inset #d4af37;
}

/* Pantalla LCD Verde */
.cd-display-screen {
  flex: 2;
  min-width: 260px;
  background-image: url("https://static.vecteezy.com/system/resources/thumbnails/042/872/607/small/ai-generated-a-dark-background-with-green-and-blue-gradient-lines-generated-by-artificial-intelligence-photo.jpeg");
  background-size: cover;
  background-position: center;
  border: 4px inset #1e2024;
  padding: 12px;
  border-radius: 4px;
  color: #00ff66;
  font-family: "Courier New", monospace;
  text-align: left;
  box-shadow: inset 0 0 12px #000000;
}

.screen-header {
  font-size: 14px;
  font-weight: bold;
  color: #00ff66;
  border-bottom: 1px solid #005522;
  padding-bottom: 5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.screen-lyrics {
  height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.4;
  color: #66ff99;
  text-shadow: 0 0 4px rgba(0, 255, 102, 0.4);
}

/* Botones de Control de Coche */
.cd-controls-bar {
  background: #141518;
  border: 3px inset #2a2c33;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.car-btn {
  background: linear-gradient(180deg, #484d58 0%, #22252c 100%);
  color: #ffffff;
  border: 3px outset #686e7d;
  padding: 8px 14px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  text-shadow: 1px 1px 0px #000;
}

.car-btn:active {
  border-style: inset;
  background: linear-gradient(180deg, #18191d 0%, #383c45 100%);
  color: #00ff66;
}

.play-btn { border-color: #2e7d32; color: #81c784; }
.pause-btn { border-color: #f57f17; color: #fff59d; }
.stop-btn { border-color: #c62828; color: #ef9a9a; }

/* LED de Estado */
.led-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.led-label {
  font-size: 10px;
  font-family: sans-serif;
  color: #777;
}

.status-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #330000;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 2px #000;
}

.status-led.playing {
  background-color: #00ff00;
  box-shadow: 0 0 8px #00ff00;
}

/* ==========================================
   SIDEBARS DE GIFS REPETITIVOS AUTOMÁTICOS
   ========================================== */

/* Columna Izquierda: Fuego a la izq + Línea Gótica a la der */
.sidebarcod-gifs-izq {
  background-image: 
    url("images/fuego.gif"),
    url("images/linea-gotica.gif");
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 55px auto, 55px auto; /* Ancho de cada GIF */
  min-width: 105px; /* Espacio para que quepan ambos GIFs lado a lado */
}

/* Columna Derecha: Línea Gótica a la izq + Fuego a la der */
.sidebarcod-gifs-der {
  background-image: 
    url("images/linea-gotica.gif"),
    url("images/fuego.gif");
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 55px auto, 55px auto;
  min-width: 105px;
}

.sidebarmus-gifs-izq {
  background-image: 
    url("https://blob.gifcities.org/gifcities/3KLQTXLXNRXO5YIH3KPQVIHZAF66YP3I.gif"),
    url("https://blob.gifcities.org/gifcities/KMCUJSKAHQTP6P64KUFQ7GLNF67F2SA4.gif");
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 50px auto, 50px auto; /* Ancho de cada GIF */
  min-width: 105px; /* Espacio para que quepan ambos GIFs lado a lado */
}

/* Columna Derecha: Línea Gótica a la izq + Fuego a la der */
.sidebarmus-gifs-der {
  background-image: 
    url("https://i.pinimg.com/originals/63/17/31/63173162a98b20f741f434b2ee1b5de4.gif"),
    url("https://blob.gifcities.org/gifcities/KMCUJSKAHQTP6P64KUFQ7GLNF67F2SA4.gif");
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 50px auto, 50px auto;
  min-width: 105px;
}