/* JOSE LUIS MORENO LLAMAS */
* {
  box-sizing: border-box;
  /* El box-sizzing lo que hace es asegurar que el ancho del elemento
        en cuestión ocupe el ancho que tenga incluyendo padding y border
        sin tener que preocuparte de sumar el ancho más el padding y el borde
        pero el margin no se suma habría que sumarlo a parte */
}
html,
body {
  margin: 0;
  padding: 0;
}
/*********************** FUENTES ***********************/
@font-face {
  font-family: "fuenteDungeon";
  src: url("../fuentes/DUNGRG__.TTF") format("truetype");
}

/*********************** SELECTORES GLOBALES ***********************/
h1 {
  -webkit-text-stroke: 1px black; /* Borde negro del texto */
  text-shadow: 1px 1px 1px black; /* Sombra negra suave */
  font-family: "Cinzel", serif;
  font-size: 2rem;
  color: #4a0000;
  font-weight: bold;
}

main select{
  font-family: "EB Garamond", serif;
  font-size: 1.1rem;
  margin: 1px;
  padding: 1px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

main figure {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente si hace falta */
    width: 100%;
    margin: 1rem 0;
    text-align: center;
}

main button {
  cursor: pointer;
}


/*********************** BODY ***********************/
body {
  font-family: "EB Garamond", sans-serif;
  background-image: url("../img/pergamino.png");
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
}
/*********************** HEADER ***********************/
header {
  grid-area: header;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mundo-header {
  border: 2px #2b2b2b solid;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);/* sombra para dar efecto de relieve */
  /* Cambiamos un poco el tono del header para diferenciarlo del main*/
  background-color: rgba(243, 221, 199, 0.518);
}

/* Logo en en el header */
.navbar-brand img {
  height: 7rem;
  width: auto;
  display: block;
}

/* Menú central: usamos las clases de Bootstrap, pero forzamos mis fuentes */
.header-nav .nav-link {
  text-decoration: none;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: black;
}

/* Hover del menú central */
.header-nav .nav-link:hover {
  text-decoration: underline;
}

/* Ligero espacio entre elementos del menú (Bootstrap ya los pone en fila) */
.header-nav {
  column-gap: 1rem;
}

/* Enlace "Iniciar sesión" (cuando no está logueado) */
#login-link {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: black;
  text-decoration: none;
}

/* Contenedor del menú usuario (nick + flecha / icono login) */
.menu-usuario {
  position: relative;
  margin-right: 1rem;
  font-family: "Cinzel", serif;
}

/* Botón con el nick */
.boton-usuario {
  background: none;
  border: none;
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: black;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Flechita hacia abajo */
.simbolo-flecha {
  display: inline-block; /* importante para que el rotate funcione bien */
  font-size: 0.8rem;
  transition: transform 0.2s ease;
  font-family: system-ui, sans-serif;
}

/* Icono usuario (Font Awesome) */
.icono-usuario {
    font-size: 22px;
    margin-right: 6px;
    vertical-align: middle;
}


/* Cuando el contenedor tiene la clase 'abierto', giramos la flecha */
.menu-usuario.abierto .simbolo-flecha {
  transform: rotate(180deg);
}


/* oculto al inicio */
.opciones-perfil {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.3rem;
  background-color: rgba(243, 221, 199, 0.97);
  border: 1px solid #000;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
  padding: 0.5rem;
  display: none;
  min-width: 160px;
  z-index: 10;
}

/* Enlaces / botones dentro del desplegable */
.opciones-perfil a,
.opciones-perfil button {
  display: block;
  width: 100%;
  text-align: left;
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0.3rem 0;
  cursor: pointer;
  color: black;
  text-decoration: none;
}

.opciones-perfil a:hover,
.opciones-perfil button:hover {
  text-decoration: underline;
}

.boton-hamburguesa {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #3b2518; 
    background-color: rgba(243, 221, 199, 0.85); 
    border-radius: 10px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
}

/************************ MAIN *****************************************/
main {
  grid-area: main;
  background-color: bisque;
  font-size: 1rem;
  border: 1px solid;
  border-radius: 3px;
  margin: 0.5rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente */
  background: url('../img/un-primer-plano-detallado-de-la-textura-arrugada-del-papel.jpg');
  background-size: 100% auto; /* Ajusta el ancho a main */
  background-repeat: repeat-y; /* Repite hacia abajo */
  background-position: top center; /* Centrado */
}

/*CARACTERÍSTICAS*/
#fig-dados {
  -webkit-text-stroke: 1px black; /* Borde negro del texto */
  text-shadow: 1px 1px 1px black; /* Sombra negra suave */
  font-family: "Cinzel", serif;
  font-size: 2rem;
  color: #4a0000;
  font-weight: bold;
}

.carac {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
  background-color: rgba(119, 100, 77, 0.736);
  padding: 0.5rem;
  width: 180px;
  text-align: center;
  font-size: 1rem;
  font-family: "Oswald", sans-serif;
}

.carac select {
  margin-top: 0.5rem;
}

/* Imagen dados */
#dados {
  height: auto;
  width: 10rem;
  cursor: pointer;
  display: inline-block;
}

/* OCULTAMOS el bloque de características desde el inicio */
#todasLasCarac {
  display: none;
  gap: 1rem; /* espacio entre elementos */
  justify-content: center; /* centrado opcional */
  flex-wrap: wrap; /* permite que salten de línea en pantallas pequeñas */
  margin-top: 2rem;
}

/* Estilo de los resultados distintos de las tiradas */
.resultado-bajo {
  font-size: 3.5rem;
  color: #B33939;
  font-weight: bold;
  text-shadow: 2px 2px 4px black; /* Sombra negra suave */
  -webkit-text-stroke: 1px black; /* Borde negro del texto */
}

.resultado-medio {
  font-size: 3.5rem;
  color: #4C9A62;
  font-weight: bold;
  text-shadow: 2px 2px 4px black; /* Sombra negra suave */
  -webkit-text-stroke: 0.5px black; /* Borde negro del texto */
}

.resultado-maximo {
  font-size: 3.5rem;
  text-shadow: 2px 2px 4px black; /* Sombra negra suave */
  -webkit-text-stroke: 1px black; /* Borde negro del texto */
}


/************ PASOS ******************/
.panel-pasos {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.paso {
  width: min(800px, 95%);
}
/* Cuando el paso 3 esté en "modo ancho" */
.paso.paso-ancho {
  width: min(1200px, 98%);
}
/* aseguramos que el contenido del paso 3 use todo el ancho disponible al clicar en tirar dados*/
.paso.paso-ancho #guia3 {
  width: 100%;
}
/* Para que los puntos de la lista queden dentro del div*/
.paso ul {
  list-style-position: inside;
  padding-left: 0;
}
/* Dar color solo al punto de la lista y ponerle borde */
.paso ul {
  list-style: none;
  padding-left: 1.2em;
}

.paso ul li {
  position: relative;
  margin-bottom: 0.5em;
}

.paso ul li img {
 width: 10rem;
 height: auto;
}

.paso ul li::before {
  content: "●";
  position: absolute;
  left: -1.2em;
  color: rgb(50, 190, 197);
  -webkit-text-stroke: 1px black;
}

#guia2 span{
  color: rgb(44, 75, 108);
  -webkit-text-stroke: 0.8px black;
}

.btn-paso {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: "Cinzel", serif;
  font-weight: 800;
  font-size: 1.1rem;
  background: rgba(74, 168, 197, 0.426);
  border: 2px solid #3b2518;
  border-radius: 10px;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.35);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

#boton-generar-ficha{
  margin: 1rem auto 0;
  display: block;
  font-family: "Cinzel", serif;   
  font-weight: 700;
  font-size: 1.1rem;
  background-color: rgba(217, 41, 41, 0.819);
  border-radius: 5px;
  color: white 
}

.flecha {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* cuando el paso está abierto, gira la flecha */
.flecha.girada {
  transform: rotate(180deg);
}

.contenido-paso {
  padding: 1rem;
  font-size: 1.5rem;
  border-radius: 10px;
  margin-top: 0.5rem;
  font-weight: bold;
  background: url('../img/pergamino.png');
  border: 1px solid;
}

/* excluye los labels de competencias y el subtítulo */
.contenido-paso label:not(.competencia-label):not(.subtitulo-campetencias){
  color: rgb(50, 190, 197);
  -webkit-text-stroke: 0.8px black;
}

/* Subtítulo "Competencias de habilidad" */
.subtitulo-campetencias{
  color: rgb(50, 190, 197);
  -webkit-text-stroke: 0.8px black;
}

/* Opciones (labels creados por JS) */
#listaCompetenciasClase .competencia-label{
  color: rgb(44, 75, 108);
  -webkit-text-stroke: 0.8px black;
}

/* Cuando el checkbox dentro del label está marcado -> color más oscuro */
#listaCompetenciasClase .competencia-label:has(.competencia-clase:checked){
  color: rgb(214, 62, 45);
}

.campo {
  width: 100%;
  margin: 0.35rem 0 0.8rem;
  padding: 0.45rem;
}

.zona-dados {
  text-align: center;
}


/************** EXTRAS CLASE MAGO  *****************/

/* Para que se vea en 2 columnas */
#contenedorMago{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 12px;
}
/* Centrar los bloques de hechizos y trucos */
#listaHechizosClase label,
#bloqueTrucosMago label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

/* Clase creada dinamicamente en home.js para las competencias */
.competencia-label {
  display: block;
  margin: 4px 0;
}

/* títulos (Hechizos / Trucos) */
#bloqueHechizosClase > label,
#bloqueTrucosMago > label{
  color: rgb(50, 190, 197);        /* título en tono distinto */
  -webkit-text-stroke: 0.8px black;
}

/* opciones (labels de cada checkbox) */
#listaHechizosClase label{
  color: rgb(44, 75, 108);       
  -webkit-text-stroke: 0.8px black;
}

#bloqueTrucosMago p ~ label{  
  color: rgb(44, 75, 108);       
  -webkit-text-stroke: 0.8px black;
}


/* opciones marcadas (más oscuro) */
#listaHechizosClase label:has(.hechizo-clase:checked),
#bloqueTrucosMago label:has(.truco-mago:checked){
  color: rgb(214, 62, 45);
}

/* En móvil para que se ponga uno debajo del otro */
@media (max-width: 768px){
  #contenedorMago{
    grid-template-columns: 1fr;
  }
}

/************************ FOOTER *****************************************/
footer{
  grid-area: footer;
  border-top: 0.15em solid #2b2b2b;
  background-color: rgba(243, 221, 199, 0.518);
  box-shadow: 0 -0.35em 0.9em rgba(0, 0, 0, 0.25);
  padding: clamp(1em, 2vw, 2.2em) 0 0;
}

.footer-contenedor{
  width: min(92%, 70em);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(0.8em, 1.5vw, 1.4em);
  padding-bottom: clamp(0.8em, 1.6vw, 1.4em);
}

.footer-bloque{
  border: 0.08em solid rgba(0,0,0,0.35);
  background-color: rgba(216, 171, 80, 0.18);
  border-radius: 0.8em;
  padding: clamp(0.8em, 1.6vw, 1.2em);
  box-shadow: 0.15em 0.15em 0.45em rgba(0,0,0,0.2);
}

.footer-titulo{
  margin: 0 0 0.8em 0;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(1em, 1.1vw + 0.6em, 1.25em);
  color: #4a0000;
}

.footer-logo img{
  height: 7rem;
  width: auto;
  display: block;
}

.footer-texto{
  font-size: 1rem;
  font-weight: bold;
}

.footer-lista{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-lista li{
  margin: 0.45em 0;
}

.footer-enlace{
  text-decoration: none;
  font-family: "Cinzel", serif;
  color: black;
  font-size: 1rem;
  font-weight: bold;
}

.footer-enlace:hover{
  text-decoration: underline;
}

.footer-enlace--destacado{
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.45em 0.75em;
  border: 0.12em solid #3b2518;
  border-radius: 0.7em;
  background-color: rgba(74, 168, 197, 0.35);
  box-shadow: 0.15em 0.15em 0.45em rgba(0,0,0,0.25);
}

.footer-redes{
  display: flex;
  gap: clamp(0.6em, 1vw, 1em);
  margin-top: 0.9em;
  font-size: clamp(0.95em, 0.6vw + 0.5em, 1.15em);
}

.footer-icono{
  color: black;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;

  transition: transform 0.12s ease;
}

.footer-icono:hover{
  transform: translateY(-0.08em);
}

.footer-barra{
  border-top: 0.08em solid rgba(0,0,0,0.35);
  padding: 0.9em 0;
  width: min(92%, 70em);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: clamp(0.9em, 0.5vw + 0.6em, 1.05em);
}

.footer-copyright{
  margin: 0;
}

.legal{
  font-size: 0.7rem;
}

/* Responsive */
@media (max-width: 62em){
  .footer-contenedor{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 35em){
  .footer-contenedor{
    grid-template-columns: 1fr;
  }
  .footer-barra{
    flex-direction: column;
    align-items: flex-start;
  }
}


/************ ANIMACIONES ******************/

/********* 1. Animación lanzar dados (sacudir) *********/
@keyframes sacudir {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}

/* Clase que usa la animación */
.sacudir {
  animation: sacudir 0.3s ease;
}


/* Ocultamos botón de mostrar asignaciones hasta que se tire el dado */
.centrado {
  display: block;
  margin: 20px auto;
}
/* Ocultamos elementos con esta clase y los desbloqueamos con js cuando toca */
.oculto {
  display: none;
}