:root {
    --degradado-1: #ff416c;
    --degradado-2: #ff4b2b;
    --degradado-3: #9b59b6;
    --degradado-4: #3b2667;
  
    --texto-principal: #ffffff;
    --texto-secundario: #d1d5db;
    --acento: #00d1ff;
    --acento-suave: #ffc107;
    --rojo: #ff0000;
  
    --fuente-titulos: 'DM Sans', sans-serif;
    --fuente-texto: 'Inter', sans-serif;
}
  
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    to bottom right,
    var(--degradado-1),
    var(--degradado-2),
    var(--degradado-3),
    var(--degradado-4)
  );
  color: var(--texto-principal);
  font-family: var(--fuente-texto);
  font-size: 1em;
}

#error{
  font-weight: bolder;
  color:black;
  display: none;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 2em 1em;
}

/*Navegacion*/

nav {
  display: flex;
  justify-content: center;
  padding: 0.5em 0;
  background-color: rgba(0, 0, 0, 0.1);
}

nav a {
  color: var(--texto-principal);
  margin: 0 0.6em;
  padding: 0.75em 1.25em;
  font-size: 1em;
  font-family: var(--fuente-titulos);
  text-decoration: none;
  transition: text-shadow 0.2s ease;
}

nav a:hover {
  text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.2);
}



/*Títulos*/

.encabezado {
  width: 100%;
  max-width: 1000px;
  margin-bottom: 1.5em;
  box-sizing: border-box;
  text-align: center; 
}  

h1 {
  font-family: 'Sora', sans-serif;
  font-size: 3.5em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(to right, #fff, var(--acento));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0.2em 0.7em rgba(0, 0, 0, 0.25);
}

.subintro {
  font-size: 1.75em;
  font-weight: 500;
  color: var(--texto-principal);
  margin-top: 0.3em;
  margin-bottom: 0;
  text-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.1);
  text-align: left;
}

/*Tabla*/

.tabla {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 1em;
  box-sizing: border-box;
}

.tabla-contenido {
  width: 100%;
  max-width: 1000px;
}

table {
  width: 100%;
  table-layout: fixed;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  border-radius: 0.5em;
  padding: 1em;
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.1);
  border-collapse: collapse;
}

th {
  padding-bottom: 1em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
}

td, th {
  padding: 0.5em 1em;
  color: var(--texto-principal);
  font-family: var(--fuente-texto);
}

tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.06);
  transition: background-color 0.3s ease;
}

tr:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
  
/*Footer*/

footer {
  text-align: center;
  font-size: 0.9em;
  padding: 1em;
  color: var(--texto-secundario);
}
  
/*Menu*/

#menu-toggle {
    display: none;
}
  
.menu-icono {
    display: none;
    font-size: 2em;
    color: var(--texto-principal);
    cursor: pointer;
    margin-left: 1em;
    user-select: none;
}

.nav-links {
    display: flex;
    gap: 1em;
}

/*Lista Contenedor*/

.contenedor-lista {
    width: 100%;
    max-width: 1000px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    border-radius: 0.5em;
    padding: 2em;
    padding-top: 0.5em;
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }
  
.lista-contenido {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 1.1em;
    line-height: 1.6;
}

.importante {
    color: var(--acento-suave);
    font-weight: bold;
    padding: 0.7em 1.2em 0.7em 1.2em;
    border-radius: 0.3em;
    text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.2);
  }
  
  
.lista-contenido li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0.7em 0;
}

li:hover {
    background-color: rgba(255, 255, 255, 0.06);
    transition: background-color 0.3s ease;
}

.lista-contenido a{
  color: var(--texto-principal);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0.7em 1.2em 0.7em 1.2em;
  border-radius: 0.3em;
  text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.2);
}

.lista-contenido a:hover{
  color: var(--acento-suave);
  text-decoration: underline;
}

  /*Sobre Mi*/

.sobre-mi-contenido{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2em;
  max-width: 1000px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  padding: 2em;
  border-radius: 0.7em;
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.contenedor-foto {
  flex-shrink: 0;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foto-perfil {
  width: 300px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.3);
  transition: transform 1s ease, box-shadow 0.4s ease;
}

.foto-perfil:hover{
  box-shadow: 0 0.7em 1.2em rgba(0, 0, 0, 0.3);
}

.bio {
  flex: 1;
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--texto-principal);
}

/*Formulario*/
#formulario {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  padding: 2em;
  border-radius: 0.5em;
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

#formulario label {
  font-weight: bold;
  margin-bottom: 0.2em;
}

#formulario input[type="text"],
#formulario input[type="email"],
#formulario textarea {
  padding: 0.8em;
  border: none;
  border-radius: 0.4em;
  font-family: var(--fuente-texto);
  width: 100%;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--texto-principal);
}

#formulario input[type="submit"] {
  padding: 0.8em 1.5em;
  background-color: var(--acento);
  color: black;
  font-weight: bold;
  border: none;
  border-radius: 0.4em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#formulario input[type="submit"]:hover {
  background-color: var(--acento-suave);
}

#formulario input[type="text"],
#formulario input[type="email"],
#formulario textarea,
#formulario input[type="submit"] {
  box-sizing: border-box;
  width: 100%;
}

/* BOTON MODO OSCURO */
#modoOscuro {
  padding: 0.6em 1.2em;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--texto-principal);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
  font-family: var(--fuente-titulos);
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
  margin-left: auto;
}

#modoOscuro:hover {
  color: black;
  box-shadow: 0 0 20px 6px rgba(0, 209, 255, 0.2);
}

/* Redes Sociales */

.redes-sociales {
  display: flex;
  justify-content: center;
  gap: 1.5em;
  margin-bottom: 2em;
}

.redes-sociales img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.redes-sociales img:hover {
  transform: scale(1.15);
  filter: brightness(1.1); /* efecto glow */
}

.github-personal {
  filter: brightness(0) invert(1); /* blanco */
}

.github-uade {
  filter: invert(49%) sepia(78%) saturate(430%) hue-rotate(180deg); /* azul institucional */
}

/* ----------- Responsive ----------- */
@media (max-width: 768px) {
  nav {
      flex-direction: column;
      align-items: flex-start;
      padding: 1em;
  }

  .menu-icono {
      display: block;
  }

  .nav-links {
      display: none;
      flex-direction: column;
      width: 100%;
      margin-top: 1em;
  }

  #menu-toggle:checked + .menu-icono + .nav-links {
      display: flex;
  }

  .nav-links a {
      padding: 0.5em 0;
  }

  .encabezado h1 {
    font-size: 2.2em;
    padding: 0.3em 0;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
  }

  .contenedor-lista {
    padding: 1.2em 1em;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
  
  .sobre-mi-contenido {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5em 1em;
  }

  .tabla-contenido {
    overflow-x: auto;
  }
  
  table {
    width: 100%;
    table-layout: fixed; 
    word-wrap: break-word;
    border-collapse: collapse;
  }

  th {
    font-size: 0.75em;
    padding: 0.4em;
  }

  td {
    font-size: 0.85em;
    padding: 0.4em;
  }
  
  .sobre-mi-contenido {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contenedor-foto {
    width: auto;
    height: auto;
  }

  .foto-perfil {
    width: 250px;
    height: 200px;
  }

  .lista-contenido a {
    display: block;
    padding: 1em;
    font-size: 1.1em;
    margin-bottom: 0.6em;
    text-align: center;
  }

  #formulario input[type="submit"] {
    align-self: center;
    width: auto;
  }

}

/* MODO OSCURO */
body.dark {
  --degradado-1: #3b2667;
  --degradado-2: #2c1a47;
  --degradado-3: #1a1a2e;
  --degradado-4: #0f0c29;

  --texto-principal: #f1f1f1;
  --texto-secundario: #a3a3a3;
  --acento: #00d1ff;
  --acento-suave: #fca311;
  --rojo: #ff4b5c;
}

body.dark h1 {
  background: linear-gradient(
    to bottom right,
    #ff416c,  /* degradado-1 */
    #ff4b2b,  /* degradado-2 */
    #9b59b6,  /* degradado-3 */
    #3b2667   /* degradado-4 */
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.dark #error{
  color:red;
}