/* VARIABLES GLOBALES */
:root {
  --fondo-body: #4B4A55;
  --fondo-contenido: #2B2A33;
  --texto-principal: darkkhaki;
  --titulos: white;
  --enlaces: silver;
  --enlaces-p: yellow;
  --borde-color: white;
  --hover-enlaces: #8a7f8d33;
}

body {
  width: 100%; 
  max-width: 888px;
  background: var(--fondo-body);
  margin: auto;
  color: var(--texto-principal);
  font-family: FreqMod Dear Book, monospace; 
  font-size: medium;
  overflow-x: hidden; /* Evita scroll lateral por el 100vw */
}

/* 1. ENCABEZADO FIJO (STICKY) */
.fijado {
  position: -webkit-sticky; 
  position: sticky; 
  top: 0;
  background: var(--fondo-body);
  z-index: 1000;
  padding-bottom: 5px;
}

/* 2. ENLACES CON SCROLL HORIZONTAL */
.enlaces {
  display: flex;
  margin-left: 1%;
  gap: 15px;
  overflow-x: auto;         
  white-space: nowrap;      
  padding-bottom: 10px;
  background: var(--fondo-body);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-overflow-scrolling: touch;
}

.enlaces::-webkit-scrollbar { height: 4px; }
.enlaces::-webkit-scrollbar-thumb { background: var(--enlaces); border-radius: 10px; }

.enlaces a { 
  font-size: large; 
  font-weight: bold; 
  color: var(--enlaces); 
  text-decoration: underline; /* Sin subrayado aquí */
}

.enlaces a:hover { background-color: var(--hover-enlaces); }

/* 3. CUERPO DE CONTENIDO */
.contenido {
  background: var(--fondo-contenido);
  width: 88%;
  margin: auto;
  padding: 1%;
  position: relative;
  z-index: 1;
}

.comillas {
  position: relative;
  top: 33px;
  left: -33px;
  font-size: xxx-large; color:white;
  z-index: 0;
}

/*PONER dentro de un span > como viñeta, ! final de comillas*/
.vineta{color:white; font-size:x-large; animation: bounceRight 2s infinite; display: inline-block;}

  @keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
  }

.exclamacion{font-size:xxx-large; vertical-align: text-top; font-family:monospace; color:white;}

.etiquetas{color:silver; text-decoration:none;}

blockquote { font-style: oblique; }

/* ENLACES DENTRO DE PÁRRAFOS (Subrayado amarillo) */
p a { 
  color: var(--enlaces-p); 
  text-decoration: underline; 
}

.centrado { text-align: center; }

h1, h2, h3 { color: var(--titulos); text-shadow: -1px -1px black; }

h2 a { color: var(--titulos); text-decoration: underline; }

/* 4. IMÁGENES Y MULTIMEDIA */
img { width: 100%; height: auto; border: 1px solid var(--borde-color); box-sizing:border-box; }

#img { filter: blur(24px); clip-path: inset(-2px); transition: filter 0.3s ease; }
#img:hover { filter: none; }

video { width: 100%; height: auto; border: 1px solid var(--borde-color); box-sizing:border-box; }

embed, iframe, object {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    display: block;
    border: none;
}

#contentFrame {
    aspect-ratio: auto !important;
    height: 100vh !important;
    width: 100vw !important;
    display: block;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border: none;
}

/* 5. ESTILO DE HISTORIAL (PYTHON) */
.contenido ul {
    list-style-type: none; 
    padding-left: 5%;      
    margin-top: 3%;        
}

.contenido li {
    margin-bottom: 1.5%;   
    color: var(--enlaces-p); 
    display: flex;         
    align-items: flex-start;
}

.contenido li::before {
    content: "> ";         
    color: var(--enlaces-p);
    font-weight: bold;
    margin-right: 2%;      
    flex-shrink: 0;        
}

.contenido li a {
    color: var(--enlaces-p); 
    text-decoration: underline; /* RECUPERADO: Subrayado amarillo */
    font-size: medium;
}

.contenido li a:hover {
    color: white;
}

/* 6. PIE DE PÁGINA Y BOTONES */
#creditos { 
  font-family: monospace; 
  color: var(--enlaces); 
  font-size: small; 
  margin: 2%; 
}

#creditos a { 
  color: var(--titulos); 
  text-decoration: underline; /* Subrayado para el nombre en créditos */
}

/* CLASE PARA AUTOR Y FECHA (ESTILO REVISTA) */
#autor {
    color: white; 
    font-size: x-small; /* Letra muy pequeña y consistente */
    font-family: monospace;
    text-align: right;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 3%;
  right: 3%;
  z-index: 1001;
  font-size: x-large;
  border: none;
  background-color: var(--fondo-body);
  color: var(--titulos);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px; 
  font-family: monospace;
}