/* Estilo general de la página */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0a0a0a; /* Fondo oscuro */
  overflow: hidden; /* Evita scrolls innecesarios */
  font-family: 'Courier New', monospace;
  color: white; /* Texto blanco */
}

/* Título principal (Página en Construcción) */
.page-title {
  position: absolute;
  top: 10vh; /* Ajustamos la posición para pantallas pequeñas */
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem; /* Reducimos el tamaño en pantallas pequeñas */
  font-family: 'Press Start 2P', cursive; /* Fuente retro estilo arcade */
  color: #00ff00; /* Verde retro, estilo neón */
  text-align: center;
  z-index: 2; /* Aseguramos que el título se quede encima de la terminal */
  letter-spacing: 0.5px; /* Espaciado reducido */
  font-weight: normal; /* Menos grosor en la fuente */
  margin-bottom: 20px; /* Espacio entre el título y la terminal */
}

/* Estilo del contenedor de la terminal */
.terminal-container {
  display: flex;
  justify-content: center;
  align-items: center; /* Centramos el contenido verticalmente */
  height: 100vh; /* Ocupa el 100% de la altura de la pantalla */
  width: 100vw; /* Ocupa el 100% del ancho de la pantalla */
  background: linear-gradient(45deg, #1fb7d3, #440066, #0080aa, #800020);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  overflow: hidden;
  position: relative; /* Posicionamiento relativo para controlar elementos hijos */
  z-index: 1; /* Aseguramos que el contenedor de la terminal esté debajo del título */
}

/* Eliminamos la capa negra oscura que se añadía con ::before */
.terminal-container::before {
  content: ""; /* Eliminado */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* Fondo transparente */
  z-index: -1;
}

/* Ventana de la terminal */
.terminal-window {
  width: 100%; /* Hace que la ventana ocupe el 100% del contenedor */
  max-width: 900px;
  background-color: rgba(0, 0, 0, 0.3); /* 30% opacidad, puedes ajustarlo si quieres más o menos transparencia */
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3); /* Resplandor suave azul */
  position: relative;
  color: white;
  z-index: 1;
  padding: 10px;
  text-align: left;
  border: none; /* Eliminar borde sólido */
}

/* Cabecera de la ventana de terminal */
.terminal-header {
  background-color: rgba(0, 0, 0, 0.4); /* Opacidad reducida para no oscurecer tanto */
  color: #00e5ff; /* Azul neón */
  padding: 5px;
  font-size: 1.2rem; /* Ajustamos el tamaño de fuente */
  font-weight: bold;
  text-align: left;
  letter-spacing: 0.1em;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between; /* Alinea el contenido en ambos extremos */
  align-items: center; /* Centra verticalmente el contenido */
}

/* Estilo del título dentro de la terminal */
.terminal-title {
  display: flex;
  justify-content: flex-start; /* Alinea el texto a la izquierda */
  align-items: center; /* Centra el contenido verticalmente */
  gap: 10px; /* Espacio entre el texto y el icono */
  width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
  padding: 0;
}

/* Estilo del icono de usuario */
.user-icon {
  width: 35px; /* Reducimos el tamaño del icono */
  height: auto;
  margin-left: 10px;
  border-radius: 50%;
  padding: 0;
  margin-left: auto;
}

/* Cuerpo de la terminal */
.terminal-body {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.4); /* 50% opacidad */
  color: #33ff99; /* Verde brillante para texto */
  font-family: 'Courier New', monospace;
  font-size: 1rem; /* Ajustamos el tamaño de la fuente */
  line-height: 1.5;
  height: 250px;
  overflow-y: scroll;
  white-space: pre-wrap;
  word-wrap: break-word;
  position: relative;
  text-align: left;
  padding-bottom: 10px;
}

/* Estilo del cursor */
.terminal-body .cursor {
  display: none;
  width: 8px;
  height: 20px;
  background-color: #33ff99;
  animation: blink 1s step-end infinite;
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes blink {
  50% {
    background-color: transparent;
  }
}

/* Animación de fondo psicodélico */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Estilo del comando y el mensaje */
.command, .message {
  text-align: left;
  font-size: 1.2rem; /* Ajustamos el tamaño */
  color: #33ff99; /* Mismo verde brillante para el texto */
  font-weight: normal;
  line-height: 1.4;
}

/* Media queries para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem; /* Reducimos más el tamaño del título */
    top: 5vh; /* Ajustamos la posición para mayor separación en móviles */
  }

  .terminal-container {
    width: 100vw; /* Mayor espacio en pantallas pequeñas */
    height: 100vh; /* Aseguramos que ocupe toda la altura de la pantalla */
    align-items: center; /* Centramos el contenedor verticalmente */
  }

  .terminal-window {
    width: 100%; /* Se adapta al tamaño del contenedor */
    padding: 8px;
  }

  .terminal-header {
    font-size: 1rem; /* Reducimos el tamaño del texto */
  }

  .terminal-body {
    font-size: 1rem; /* Ajustamos el tamaño de la fuente */
    height: 180px; /* Reducimos la altura */
  }

  .command, .message {
    font-size: 1rem; /* Ajustamos el tamaño */
  }

  .user-icon {
    width: 30px; /* Reducimos el tamaño del icono */
  }
}