/* --- 🎨 PALETA DE COLORES MODULAR 🎨 --- */
:root {
  /* Fondo (el gradiente de la habitación) */
  --color-bg-start: #E77452;
  --color-bg-mid:   #6B4E99;
  --color-bg-end:   #2A1A40;

  /* Marco de la TV (carcasa) */
  --color-bezel: #3D3350;

  /* Controles */
  --color-controls-bg: rgba(40, 40, 40, 0.8);
  --color-controls-border: #5A4A70;

  /* Botones */
  --color-btn-bg: #6B4E99;
  --color-btn-text: #E0D9EB;
  --color-btn-hover-bg: #7DE2C9; /* Celeste */
  --color-btn-hover-text: #2A1A40;

  /* Botón Power */
  --color-btn-power-bg: #E77452; /* Naranja */
  --color-btn-power-text: #fff;
  --color-btn-power-hover-bg: #f08e70;

  /* Hoja del Cuento */
  --color-paper-bg: #E0D9EB;
  --color-paper-title: #3D3350;
  --color-paper-text: #1f1f1f; /* Texto negro legible */

  /* Comentarios */
  --color-comments-bg: #E0D9EB;
  --color-comments-title: #3D3350;
}

/* 1. Resetear el body */
body {
  
  background: linear-gradient(180deg, var(--color-bg-start) 0%, var(--color-bg-mid) 40%, var(--color-bg-end) 100%);
  background-attachment: fixed;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  overflow: hidden; 
}

/* 2. Contenedor Fijo */
.tv-set-frame {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 10;
  transform: translateZ(0); 
}

/* 3. Marco Visual (¡EL RECTÁNGULO SIMPLE!) */
.tv-bezel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  /* Borde simple y sólido */
  border-top: 40px solid var(--color-bezel);
  border-left: 40px solid var(--color-bezel);
  border-right: 40px solid var(--color-bezel);
  
  /* El "piso" para los botones, más grueso */
  border-bottom: 110px solid var(--color-bezel); 
  
  /* Sin border-radius */
  border-radius: 0; 
  
  /* Mantenemos la viñeta interna para dar profundidad */
  box-shadow: inset 0 0 60px 20px rgba(0,0,0,0.7);
  
  pointer-events: none; 
}

/* 4. El "Mentón" (AHORA ES UN CONTENEDOR INVISIBLE) */
.tv-chin-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* Se pega abajo */
  
  /* Altura igual al "piso" del borde */
  height: 110px; 
  
  background: transparent; /* No se ve */
  
  /* Centramos los controles */
  display: flex;
  justify-content: center;
  align-items: center;
  
  pointer-events: auto; /* SÍ recibe clicks */
}

/* 5. Panel de Controles (Centrado dentro del mentón) */
.tv-controls {
  display: flex; 
  gap: 12px;
  background: var(--color-controls-bg);
  border: 1px solid var(--color-controls-border);
  border-radius: 15px;
  padding: 10px 15px;
  pointer-events: auto; 
}

/* 6. Botones (sin cambios) */
.tv-button {
  font-family: 'Arial', sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--color-btn-text); 
  background: var(--color-btn-bg);
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-decoration: none; 
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.tv-button:hover {
  background: var(--color-btn-hover-bg);
  color: var(--color-btn-hover-text);
  box-shadow: 0 0 10px var(--color-btn-hover-bg);
}
.tv-button.power {
  color: var(--color-btn-power-text);
  background-color: var(--color-btn-power-bg);
}
.tv-button.power:hover {
  background: var(--color-btn-power-hover-bg);
  color: var(--color-btn-power-text);
  box-shadow: 0 0 15px var(--color-btn-power-bg);
}


/* 7. Contenido Scrolleable (Padding ajustado) */
.scrollable-content {
  height: 100vh;
  overflow-y: auto;
  
  /* Padding para que el texto no toque el borde */
  padding: 80px 80px 150px 80px; 
    
  box-sizing: border-box; 
  position: relative;
  z-index: 5;
}

/* 8. Estilos del Cuento y Comentarios (sin cambios) */
.cuento {
  font-family: 'Times New Roman', serif;
  max-width: 800px;
  margin: 220px;
  padding: 2.5rem 3rem;
  background-color: var(--color-paper-bg);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  border-radius: 8px;
  transition: font-size 0.3s ease;
  font-size: 20px; 
}
.cuento h1 {
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  color: var(--color-paper-title);
  font-size: 3.2rem;
  margin-bottom: 1.5rem;
  margin-top: 0;
}
.cuento p {
  color: var(--color-paper-text); 
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.comment-form {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1.5rem 2rem;
  background: var(--color-comments-bg);
  border-radius: 8px;
}
.comment-form h2 {
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  color: var(--color-comments-title);
  margin-top: 0;
}


/* --- 📱 ESTILOS PARA CELULAR 📱 (Lógica V5, ¡que funcionaba!) --- */
@media (max-width: 768px) {

  /* 1. Ocultamos el marco (el bezel rectangular) */
  .tv-bezel {
    display: none;
  }

  /* 2. El "mentón" se convierte en la barra de botones flotante */
  .tv-chin-bar {
    position: fixed; /* Se pega a la ventana */
    left: 0;
    right: 0;
    bottom: 0;
    height: auto; /* Altura automática */
    background: transparent; /* Sin fondo */
    
    /* Centramos */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Le damos un padding para que no pegue en el borde */
    padding: 0 0 15px 0;
  }

  /* 3. Los controles SÍ se ven */
  .tv-controls {
    background: var(--color-controls-bg);
    border: 1px solid var(--color-controls-border);
    border-radius: 15px;
    gap: 10px;
    padding: 8px 12px;
  }
  
  .tv-button {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }

  /* 4. Ajustamos el padding del contenido */
  .scrollable-content {
    /* Padding simple + espacio abajo para los botones flotantes (100px) */
    padding: 20px 20px 100px 20px; 
  }
  
  /* 5. Ajustes de fuente para celular (sin cambios) */
  .cuento {
    font-size: 18px; 
    padding: 1.5rem 1.5rem;
  }
  .cuento h1 {
    font-size: 2.2rem; 
  }
}