/* ====== IMPORTS DE OTROS BLOQUES ====== */
/* Importa los estilos de cada sección usando BEM */
@import url(header.css);
@import url(projects.css);
@import url(skills.css);
@import url(about.css);
@import url(citas.css);
@import url(contact.css);
@import url(footer.css);
@import url(responsive.css);

/* ================= VARIABLES MODO OSCURO ================= */
:root {
  /* Colores principales */
  --color-texto: #ffffff;
  --color-fondo: #000000;
  --color-primario: #8a63d2;
  --color-secundario: #ffffff;
  --color-destacado: #b58aff;
  --color-hover: #d3c9f9;
  --color-hover-acento: #b58aff;

  /* Tipografía */
  --fuente-titulo: 'Cherry Cream Soda', cursive;
  --fuente-cuerpo: "SUSE Mono", sans-serif;

  --espaciado: 1rem;

  /* Sombras */
  --sombra: rgba(107, 84, 201, 0.149);
  --sombra-hover: rgba(107, 84, 201, 0.349);

  /* Nav */
  --nav-bg: #000000;
  --nav-link: #ffffff;
  --nav-link-hover: #d3c9f9;
}

/* ================== RESET ================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

html, body {
  min-height: 100vh;
  overflow-x: hidden; /* Evita scroll horizontal no deseado */
  width: 100%; /* Asegura que el body ocupe el 100% del ancho de la pantalla para una correcta adaptabilidad */
}

body {
  background: linear-gradient(180deg, #0d001a, #1a0033); /* Fondo degradado */
  background-repeat: no-repeat;
  background-size: cover;
  /* background-attachment: fixed; */ /* Comentado para evitar que el fondo se "corte" en dispositivos móviles */
}

/* ================== TEXTO ================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo); /* Fuente títulos */
  color: var(--color-primario);
  margin-bottom: 0.5rem;
}

p {
  color: var(--color-texto);
  margin-bottom: 1rem;
}

/* ================== CONTENEDOR ================== */
.container {
  width: 90%; /* Ancho del contenedor */
  max-width: 1200px; /* Máximo ancho */
  margin: 0 auto; /* Centrado horizontal */
  padding: 0 1rem; /* Añade un padding para evitar que los elementos toquen los bordes de la pantalla */
}

/* ================== BOTÓN ================== */
.button {
  background-color: var(--color-primario);
  color: var(--color-secundario);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover,
.button:focus {
  outline: 2px solid #ffffff; /* Destaca botón al hover/focus */
}

/* ================== ACCESIBILIDAD ================== */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* Oculta visualmente, sigue accesible */
  white-space: nowrap;
  border: 0;
}

/* ================== CAMBIO DE TEMA ================== */
/* Checkbox oculto para toggle de tema */
#theme-toggle {
  display: none;
}

/* Contenedor del switch */
.switch {
  position: relative;
  top: 1rem;
  left: 1rem;
  width: 80px;
  margin-left: 1rem;
  height: 40px;
  background-color: #d9534f; /* Rojo OFF */
  border-radius: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  font-family: sans-serif;
  font-weight: bold;
  z-index: 1000;
}

/* Bolita que se mueve */
.slider {
  position: absolute;
  left: 5px;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Texto OFF */
.switch::after {
  content: "OFF";
  color: white;
  position: absolute;
  right: 10px;
  font-size: 14px;
}

/* Cuando está activado (ON) */
#theme-toggle:checked + .switch {
  background-color: #5cb85c; /* Verde ON */
}

#theme-toggle:checked + .switch::after {
  content: "ON";
  left: 12px;
  right: auto;
  color: white;
}

#theme-toggle:checked + .switch .slider {
  transform: translateX(40px); /* Mueve la bolita */
}

/* ================== VARIABLES MODO CLARO ================== */
body:has(#theme-toggle:checked) {
  --color-texto: #222222;
  --color-texto-secundario: #ffffff;
  --color-fondo: #ffffff;
  --color-primario: #6e32c9;
  --color-secundario: #000000;
  --color-destacado: #7a3ed8;
  --color-hover: #a288e3;
  --color-hover-acento: #005799;

  --sombra: rgba(0, 0, 0, 0.1);
  --sombra-hover: rgba(0, 0, 0, 0.2);

  --nav-bg: #ffffff;
  --nav-link: #6a0dad;
  --nav-link-hover: #8a2be2;
}

/* ================== MAIN modo claro ================== */
body:has(#theme-toggle:checked) main {
  background: var(--color-fondo); /* Fondo principal cambia a blanco */
}