@charset "utf-8";

/* tipografía disponible desde Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@500&family=Noto+Sans+Display:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');


/*
================================
  orden de las reglas de estilo:
  de lo general a lo particular,
  de arriba hacia abajo,
  de celular a tablet,
  de tablet a escritorio
================================
*/



/* "reset" selector universal */
*,
*::after,
*::before
 {
  /* para que el ancho de las cajas
     se calcule hasta los bordes y NO
     sólo por sus contenidos */
  box-sizing: border-box;

  margin: 0;
  padding: 0;
  border: 0;
  outline-color: transparent;
}


/* ----------------
   reglas generales
   ---------------- */

html {
  /* scroll suave */
  scroll-behavior: smooth;
  /* para que elementos ":target" no sean ocultados por el header */
  scroll-padding-block-start: 5em;
}

body {
  /* tipografía general del proyecto */
  font-family: 'Noto Sans Display', sans-serif;
}

/* selector múltiple */
h1,
h2,
h3,
h4,
h5,
h6,
p { /* redefine los márgenes inferiores para que midan el tamaño de la tipografía */
  margin-block-end: 1em;
}

/* TODOS los vínculos */
a {
  /* elimina los subrayados */
  text-decoration: none;
}

/* TODAS las listas */
ul,
ol {
  list-style: none; /* elimina bullets, números etc. */
  padding: 0; /* retira el relleno izquierdo predeterminado */
}

/* TODAS las imágenes */
img {
  /* para que NO midan más que la etiqueta que las contiene */
  max-width: 100%;
  /* opcional, evita deformaciones en navegadores antiguos */
  height: auto;
}

/* selector de clase:
   grupo de elementos con características comunes...
   esta clase "contenedora" centra contenidos
   y limita su ancho
*/
.contenedora {
  width: min(50rem, 100%); /* limita el ancho a 800px */
  margin-inline: auto; /* centra "la caja" horizontalmente */
  padding: 1rem; /* relleno igual a un renglón */
}

/* lo que tienen en común el encabezado y el pie */
header,
footer {
  background-color: hsl(210 92% 36%);
  color: white;
}

/* ----------
   encabezado
   ---------- */

header {
  box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25); /* sombra difusa  */

  /* "pegado" al borde superior de la ventana */
  position: sticky;  
  /* distancia 0 del borde */
  top: 0;
  /* capa superior arriba de casi todo */
  z-index: 80;
}

/* caja que "limita" al logo y al menu */
header .contenedora {
  display: flex; /* caja flexible */
  /* si los elementos "hijos" no caben en una fila,
     van a la fila siguiente */
  flex-wrap: wrap;
  
  /* elementos "hijos" separados en la horizontal */
  justify-content: space-between;
  
  /* elementos "hijos" centrados en la vertical */
  align-items: center;
}

#logo {
  display: flex; /* caja flexible */
  align-items: center; /* hijos centrados en la vertical */
  /* sale del fondo pero no parece */
  position: relative;
  /* capa superior, arriba de todo */
  z-index: 90;
}

/* etiqueta img, pero SÓLO el logo */
#logo img {
  width: 4em;
  margin: -1em .75em -1em 0;
}

#logo h3 { /* tipografía del logo */
  font-family: 'Fira Sans Extra Condensed', sans-serif;
  font-weight: 500;
  line-height: 1em;
  margin: 0;
}

#logo h3 span {
  display: block;
  letter-spacing: .05em;
}


/* ----
   menu
   ---- */


/* botón "hamburguesa" */
.menu-btn {
  background: hsl(0 0% 100% / 0.25);
  border-radius: 50%;
  box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
  padding: .75rem;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "hover" */

  /* fijo, no "scrolea", no genera scroll */
  position: relative;
  /* emplazamiento 1 renglón del borde superior */
  
  /* emplazamiento 1 renglón del borde derecho */
  
  /* en capa superior, casi arriba de todo */
  z-index: 90;
}

/* cada barra de la "hamburguesa" */
.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: hsl(0 0% 90%);
  transition: all 0.3s ease-out;
  /* capa superior, pero no parece */
  position: relative;
  /* capa superior, casi arriba de todo */
  z-index: 9000;
}

/* cada barra, transformación para formar la "X" */
/* Las tres barras para formar la "X" */
.menuVisible .menu-btn .btn-linea:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
  opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* menú propiamente dicho */
nav ul {
  background-color: hsl(210 92% 10% / 95%);
  display: grid;
  place-items: center;
  place-content: center;

  /* sale del fondo, queda fijo */
  position: fixed;
  /* emplazamiento,
  estirado en toda la ventana */
  inset: 0;
  /* escondido "a la derecha" */
  translate: 100%;
  
  transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}

/* el menu cuando "nav" tiene la clase "menuVisible" */
.menuVisible ul {
  background-color: hsl(210 92% 30% / 95%);
  transition: all .3s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra "deshaciendo" la transformación */
  translate: 0;
}

/* cada vínculo del menu */
nav ul li a {
  border-bottom: solid 3px hsl(0 0% 100% / 0.1);
  color: white;
  display: block;
  font-size: 1.5rem;
  margin-block-end: .5rem;
  width: min(70vw, 20rem); /* el valor menor entre el 70% del ancho de la ventana del navegador y 320px */
  text-align: center;
  
  padding: .5rem;
  text-decoration: none;
}

nav ul li a:hover {
  border-bottom: solid 3px hsl(0 0% 100% / 0.5);
  transition: all .3s;
}


/* ----------------
   cuerpo principal
   ---------------- */

main h3 {
  background-color: hsl(198 100% 43% / 0.1);
}

/* clase para diferentes títulos */
.titulo {
    border-block-end: 4px solid hsl(38, 100%, 47%); /* "subrayado" a todo lo ancho */
    padding-block-end: .35em; /* separa el "subrayado" del texto */
}

/*
  galería de imágenes
*/

.galeria {
  padding: 0 1em 2em 1em;
  width: min(75em, 100%);
  margin-inline: auto;
}

/* Estilos del slider */
.slider {
  width: 100%;
  height: max(400px, 50vh);
  position: relative;
  overflow: hidden;
}

/* Contenedor de slides */
.slider .slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

/* Slide activo */
.slider .slide.active {
  opacity: 1;
  z-index: 2;
}

/* Botones de navegación */
.slider .btn {
  position: absolute;
  z-index: 10;
  top: 2em;
  transform: translateY(-50%);
  width: 2.5em;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background-color: hsl(210 29% 30% / 0.75);
  color: white;
  font-size: 1.1em;
  opacity: .75;
  transition: opacity 0.3s, background-color 0.3s;
}

.slider .btn:active,
.slider .btn:hover,
.slider .btn:focus {
  opacity: .9;
  border: solid 1px white;
  outline: none;
}

.btn-prev {
  right: 4em;
}

.btn-next {
  right: 1em;
}

/* Indicadores de slide generados dinámicamente */
.slider-indicators {
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5em;
  z-index: 10;
}

.indicator {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: hsl(0 0% 100% / 0.5);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.indicator.active {
  background-color: hsl(198 100% 43%);
}

.indicator:hover,
.indicator:focus {
  background-color: hsl(198 100% 43% / 0.7);
  outline: none;
}

/* Aseguramos que todas las imágenes tengan la misma altura */
.slide img {
  border-radius: .25em;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top 25%;
  display: block;
}

/* Media queries para responsividad */


@media (max-width: 480px) {
  .slider {
    height: max(300px, 40vh);
  }
  
  .btn {
    font-size: 0.8em;
  }
}



.slide figcaption {
  background-color: hsl(210 29% 30% / 0.75);
  border-radius: .5em;
  color: white;
  padding: 1em;
  text-transform: uppercase;
  font-weight: 700;
  /* se coloca arriba de la imagen */
  position: absolute;
  /* a un renglón de abajo y en la horizontal, el espacio que resta queda arriba */
  inset: auto 1em 1em 1em;

  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .5em;
}

.slide figcaption span {
  display: block;
  font-size: .85em;
  color: #ddd;
  text-transform: none;
}

.slide a {
  background-color: hsl(209 100% 35% / 0.5);
  color: hsl(0 0% 90% / 0.85);
  padding: .25em 1em;
  border-radius: 2em;
  text-decoration: none;
  justify-self: end;
  margin-block-start: 1em;
}

.slide a::after {
  content: " →";
}

.slide a:hover {
  background-color: hsl(209 100% 35% / 0.95);
  box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
  color: hsl(0 0% 90%);
}

/* a partir de los 480px */
@media (width>= 30em) {
  .slide figcaption {
    font-size: 1.1em;
    /* distancia a los bordes de la imagen: 2 renglones arriba, abajo y a la izquierda, 50% a la derecha */
    inset: 2em 50% 2em 2em;
    
    gap: 1em;
    padding: 1.5em;
    transition: .5s;
  }
}
/* a partir de los 640px */
@media (min-width: 40em) {
  .slide figcaption {
    font-size: 1.25em;
    /* distancia a los bordes de la imagen: arriba el espacio que sobre, el resto igual */
    inset: auto 50% 2em 2em;
  }
}



/* sección textos */

.textos {
  padding-block-start: 2em;
}

.textos h3 {
  padding: .5em 1em;
}

.textos > *,
.textos p:not(:last-child) {
  margin-block-end: 1em;
}

/* textos > artículos */

.articulos,
#final {
  padding-block-start: 2em;
}

.textos article {
  border: solid 1px hsl(198 100% 43%);
  border-radius: 4px;
  padding: 1em;
  padding-block-start: 0;
  margin-block-end: 1em;
}

.textos article h4 {
  background-color: hsla(0 0% 100% / 0.85);
  padding: 1em 0 .5em 0;
  margin-block-end: 1em;
  
  /* para salir del "flujo de información" del fondo 
  y colocase en una capa superior "pegajosa" */
  position: sticky;
  /* emplazamiento a 5 renglones del borde superior */
  top: 5em;
}

/* footer */

footer > p:last-child {
  margin-block-end: 0;
}


/*
----------------
"botón" explorar
----------------
*/

.explorar {
  background-color: hsl(38 100% 47% / 0.85);
  border: 4px solid hsl(198 100% 43%);
  border-radius: 50%;
  box-shadow: 0 .15em .1em hsla(0 0% 0% / 0.215);
  color: white;
  cursor: pointer;
  font-size: 1.75em;
  font-weight: bold;
  width: 4rem;
  aspect-ratio: 1;

  display: grid;
  place-items: center;
  
  /* para salir del "flujo de información" del fondo 
  y colocase en una capa superior fija */
  position: fixed;
  /* emplazamiento a 1 r-renglón del borde inferior */
  
  /* emplazamiento a 1 r-renglón del borde derecho */
  inset: auto 1rem 1rem auto;
  /* capa superior, encima de casi todo */
  z-index: 90;
}


/* --------------------------
   media queries,
   para cambiar la apariencia
   en la medida en que el
   navegador se ensancha
   (mobile first)
   -------------------------- */



/* cambios a partir de los 640px */
@media(min-width: 40em) {

    
  /* botón "hamburguesa" oculto */
  .menu-btn {
    display: none;
  }

  /* menu visible */
  header nav ul,
  header .menuVisible ul {
    /* caja flexible para menu horizontal*/
    display: flex;
    /* separación entre sus elementos */
    gap: .25em;

    /* para que esté en capa superior pero que no parezca */
    position: relative;

    /* elimina desplazamiento */
    translate: 0;

    /* elimina fondo */
    background-color: unset;
  }
    
  /* items de lista  que contienen los vínculos del menu */
  header nav ul li {
    min-width: 4em; /* que no midan menos de: */
  }

  /* vínculos del menu principal */
  header nav ul li a {
    background-color: hsl(198 100% 44%);
    border-radius: .25em ;
    color: white;
    font-size: 1rem;
    width: auto;
    padding: .25em 1em;
    text-align: center;
    display: block; /* para que sean "cajas" */
    margin-block-end: unset;
    border-block-end: unset;
  }
  
  /* cuando el cursor se posiciona sobre los vínculos */
  header nav ul li a:hover {
    background-color: white;
    color: hsl(198 100% 44%);
    border-block-end: unset;
  }
  

  /* para que "artículo 1" y "artículo 2"
  queden uno al lado del otro */
  .textos > .articulos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }

}

/* cambios a partir de los 800px */
@media(min-width: 50em) {

  .galeria {
    padding: 1em;
  }

  .textos h3 {
    padding: 1em;
  }

}

/* cambios a partir de los 1200px */
@media(min-width: 75em) {

  .galeria {
    
    margin-block-start: 4em;
    margin-block-end: 3em;
  }

}


/* -------------
   accesibilidad
   ------------- */

/* clase para contenidos que SOLO sean leídos por lectores de pantalla
y no mostrados visualmente */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.los-menus {
  display: flex;
  gap: .5em;
  align-items: center;
}
.usuario {
  background-color: transparent;
  border: none;
  border-radius: 50%;

  position: relative;
  z-index: 90;
}
.usuario img {
  display: block;
  height: clamp(3rem, 2.8466rem + 0.6818vw, 3.375rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: solid 4px hsl(198 100% 43%);
  cursor: pointer; /* Añadido para indicar que es clickeable */
}

/* Estilos para el Dialog */
dialog {
  border: solid 2px hsl(198, 100%, 43%);
  border-radius: .5em;
  padding: 2em;
  background-color: hsl(210, 92%, 10%);
  color: white;
  box-shadow: 0 0 2em hsl(0 0% 0% / 0.5);
  width: min(90vw, 40em);
  margin: auto;
}

dialog::backdrop {
  background-color: hsl(210 92% 10% / 75%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

dialog .hidden {
    display: none;
}

dialog h4 {
    margin-bottom: 1em;
    color: hsl(38, 100%, 47%);
}

/* Formulario de Login */
#login-form .form-group {
  margin-bottom: 1.5em;
}

#login-form label, #login-form p {
  display: block;
  margin-bottom: .5em;
}

#login-form input[type="text"] {
  width: 100%;
  padding: .5em;
  border-radius: .25em;
  border: 1px solid hsl(198, 100%, 43%);
  background-color: hsl(210, 29%, 30%);
  color: white;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4em, 1fr));
  gap: .5em;
  max-height: 50vh;
  overflow-y: auto;
  padding: .5em;
  background-color: hsl(210 29% 20% / 50%);
  border-radius: .25em;
}

.avatar-option {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  border: 5px solid transparent;
  transition: border-color .3s;
}

.avatar-option.selected {
  border-color: hsl(38, 100%, 47%);
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1em;
    margin-top: 1.5em;
}

/* Vista de Información de Usuario */
#user-info-view .user-details {
  display: flex;
  align-items: center;
  gap: 1.5em;
  margin-bottom: 1.5em;
}

#user-info-view #dialog-avatar {
  height: 5em;
  aspect-ratio: 1;
  border-radius: 50%;
  border: solid 4px hsl(198 100% 43%);
}

#user-info-view p {
    font-size: 1.25em;
}

/* Estilos para los botones dentro del dialog */
dialog .btn {
    padding: .5em 1.5em; /* Ajuste de padding para todos los botones del dialog */
    border-radius: .25em; /* Bordes ligeramente redondeados */
    font-size: 1em; /* Tamaño de fuente consistente */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Estilos específicos para el botón de submit */
#login-form .btn[type="submit"] {
    background-color: hsl(198, 100%, 43%); /* Color de fondo para el botón de enviar */
    color: white;
    border: 1px solid hsl(198, 100%, 43%);
}

#login-form .btn[type="submit"]:hover {
    background-color: hsl(198, 100%, 30%);
    border-color: hsl(198, 100%, 30%);
}

/* Estilos para los botones de cerrar (sin fondo, con outline) */
#close-dialog-btn-login,
#close-dialog-btn-info,
#logout-btn {
    background-color: transparent; /* Sin fondo */
    color: hsl(198, 100%, 43%); /* Color del texto */
    border: 1px solid hsl(198, 100%, 43%); /* Borde como outline */
}

#close-dialog-btn-login:hover,
#close-dialog-btn-info:hover,
#logout-btn:hover {
    background-color: hsl(198, 100%, 43%); /* Fondo al pasar el ratón */
    color: white;
}



/* instrucciones  para estudiantes */


.instrucciones {
  color: hsl(210 50% 50%);
  font-family: monospace;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.5;

  li {
    display: flex;
    align-items: center;
    gap: .5em;
  }

  ::before {
    content: "▶";
    color: hsl(38, 100%, 47%);
    font-weight: bold;
    font-size: larger;
  }
}