/*
||----------------------------------------------------------
|| VARIABLES CSS PARA MODO DÍA/NOCHE
||----------------------------------------------------------
*/
:root {
  /* MODO CLARO (Valores por defecto) */
  --color-fondo-pagina: #f4f4f4; /* Un gris muy claro */
  --color-fondo-principal: white;
  --color-sombra: rgba(0, 0, 0, 0.15);
  --color-texto-enlace: #2980b9;
  --color-texto-contenido: #2c3e50; /* Texto del contenido */
  --color-enlace-hover: #1e6093;
  --color-fondo-hover: #e0e0e0;
  --color-separador: #ccc;

  /* Agregamos una transición suave a la raíz para el cambio de modo */
  transition: background-color 0.3s, color 0.3s;
}

/* ------------------------------------ */
/* ESTILOS PARA EL MODO NOCHE */
/* ------------------------------------ */
body.modo-noche {
  --color-fondo-pagina: #111;
  --color-fondo-principal: #1f2838;
  --color-sombra: rgba(255, 255, 255, 0.1);
  --color-texto-enlace: #64b5f6;
  --color-texto-contenido: #f4f4f4;
  --color-enlace-hover: #0087c5;
  --color-fondo-hover: #2c3648;
  --color-separador: #444;
}

/*
||----------------------------------------------------------
|| ESTILOS GLOBALES Y APLICACIÓN DE VARIABLES
||----------------------------------------------------------
*/
* {
  /* Box Sizing para facilitar el diseño (incluir padding y border en el ancho) */
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  /* Fuente principal: Inter (moderna y legible para portafolios) */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Usa la variable para el fondo de la página */
  background-color: var(--color-fondo-pagina);
  /* Mejora la renderización de fuentes */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Clase para elementos de código (si necesitas usar JetBrains Mono) */
code, .codigo, pre {
  font-family: "JetBrains Mono", "Menlo", "Monaco", "Lucida Console", "Courier New", "Courier", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

/*
||----------------------------------------------------------
|| CONTENEDOR PRINCIPAL DE LA WEB (Contiene toda la estructura)
||----------------------------------------------------------
*/
.contenedor-principal-web {
  /* Aplica la variable para el fondo del contenedor */
  background-color: var(--color-fondo-principal);

  width: 90%; /* Ajustado ligeramente */
  max-width: 1100px; /* Ancho máximo para pantallas grandes */
  margin: 20px auto;

  border-radius: 30px;
  /* Aplica la variable para la sombra (cambia con el modo) */
  box-shadow: 0 4px 12px var(--color-sombra);

  /* Removido position: sticky de aquí ya que la barra de navegación debe ser fija, no todo el contenedor */
}

/*
||----------------------------------------------------------
|| SECCIÓN DE PERFIL E IMAGEN (INICIO)
||----------------------------------------------------------
*/
.contenedor-perfil {
  /* Estas propiedades ya son correctas para centrar horizontal y verticalmente */
  display: flex;
  align-items: center; /* Centra verticalmente los hijos directos (Imagen y info-perfil) */
  justify-content: center; /* Centra horizontalmente los hijos directos */
  flex-direction: row;
  gap: 30px;
  padding: 40px;
  text-align: center;
}

.Nombre p {
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--color-texto-enlace); /* Aplica el color de texto */
}

.Profesion p {
  font-size: 1.2em;
  font-weight: 300;
  margin-top: 0;
  color: var(--color-texto-contenido); /* Aplica el color de texto */
}

.Imagen img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-texto-enlace);
  box-shadow: 0 4px 8px var(--color-sombra);
}

/*
||----------------------------------------------------------
|| SECCIÓN DESCRIPCIÓN (ACERCA DE)
||----------------------------------------------------------
*/
.contenedor-descripcion {
  /* Conversión de 20px 40px a 1.25em 4em */
  padding: 1.5em 9em;
  /* La línea de borde (1px) se suele dejar en px o en rem si es muy pequeña */
  border-top: 1px solid var(--color-separador);
}

.contenedor-descripcion h2 {
  font-size: 1.8em;
  color: var(--color-texto-contenido);
  /* Conversión de 15px a ~0.94em */
  margin-bottom: 0.94em;
  /* El borde (2px) se suele dejar en px por su delgadez o usar 0.125rem */
  border-bottom: 2px solid var(--color-texto-enlace);
  display: inline-block;
  /* Conversión de 5px a ~0.31em */
  padding-bottom: 0.31em;
}

.Descripcion p {
  font-size: 1em;
  line-height: 1.6;
  color: var(--color-texto-contenido);
  margin-top: 0;
  font-style: italic;
  text-align: center;
}

/*
||----------------------------------------------------------
|| SECCIÓN LENGUAJES (SERVICIOS)
||----------------------------------------------------------
*/
.contenedor-lenguajes {
  padding: 20px 40px 40px;
  border-top: 1px solid var(--color-separador);
}

.Lenguajes p {
  font-size: 1em;
  line-height: 1.6;
  color: var(--color-texto-contenido); /* Aplica el color de texto */
  /* Aquí podrías añadir estilos para una lista de lenguajes si la incluyes */
}

/*
||----------------------------------------------------------
|| BOTÓN FLOTANTE MODO DÍA/NOCHE
||----------------------------------------------------------
*/
#toggle-modo {
  background: none;
  border: none;
  cursor: pointer;
  /* Usa la variable de color del texto para los iconos */
  color: var(--color-texto-enlace);
  padding: 10px;
  border-radius: 50%;
  transition: background-color 0.3s;
  box-shadow: 0 2px 5px var(--color-sombra);

  /* Posición fija en la esquina superior derecha */
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000; /* Alto z-index para que esté sobre todo */
}

#toggle-modo:hover {
  background-color: var(--color-fondo-hover);
}

#toggle-modo svg {
  display: block; /* Asegura que el SVG se muestre correctamente */
}

/*
||----------------------------------------------------------
|| MOSTRADOR ALEATORIO DE HABILIDADES (con parpadeo)
||----------------------------------------------------------
*/
.habilidades-display {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  transition: opacity 0.3s ease;
  /* Completamente estático - sin movimiento */
  position: static;
  transform: none !important;
  animation: none !important;
}

.habilidad-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 15px;
  background-color: var(--color-fondo-principal);
  border: 1px solid var(--color-separador);
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.habilidad-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px var(--color-sombra);
}

.habilidad-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.habilidad-icon img,
.habilidad-icon svg {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Solo para los paths que SÍ quieras heredar el color del texto */
.habilidad-icon svg { color: initial !important; }
.habilidad-icon svg path[fill="currentColor"] { fill: initial; }

.habilidad-nombre {
  margin: 0;
  font-size: 0.9em;
  color: var(--color-texto-contenido);
  text-align: center;
  font-weight: 500;
}

/* ✨ Animaciones de parpadeo */
.habilidades-display.blinking-out {
  opacity: 0;
  animation: fadeOut 1s ease-out;
}

.habilidades-display.blinking-in {
  opacity: 1;
  animation: fadeIn 1s ease-in;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*
||----------------------------------------------------------
|| MEDIA QUERY PARA PANTALLAS PEQUEÑAS (Responsive Design)
||----------------------------------------------------------
*/
@media screen and (max-width: 768px) {
  .contenedor-principal-web {
    width: 95%; /* Más ancho en móviles */
    margin: 10px auto;
  }

  .barra-enlaces {
    flex-direction: column; /* Apila los elementos en vertical */
    width: 100%;
    padding: 15px 0;
  }

  /* Ocultamos el botón fijo en móviles si ya tienes uno en la barra de navegación */
  /* Si el botón flotante se mantiene, ajusta su posición: */
  #toggle-modo {
    top: 10px;
    right: 10px;
    padding: 8px;
  }

  .barra-enlaces ul {
    text-align: center;
    width: 100%;
  }

  .barra-enlaces li {
    display: block;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid var(--color-separador);
  }

  .barra-enlaces li:last-child {
    border-bottom: none;
  }

  .barra-enlaces a {
    text-align: center;
    padding: 12px 15px;
  }

  .contenedor-perfil,
  .contenedor-descripcion,
  .contenedor-lenguajes {
    padding: 20px;
  }

  .Nombre p {
    font-size: 2em;
  }
  .Profesion p {
    font-size: 1em;
  }
}