/* 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");
}

body{
  font-family: "EB Garamond", sans-serif;
  background-image: url("../img/pergamino.webp");
}

.contenedor{
  background-color: rgba(255, 228, 196, 0.563);
  width: min(920px, 92%);
  margin: 32px auto;
  border-radius: 3.5px;
  border: solid 1px black;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.tarjeta-dados{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 22px;
}

.cabecera{
  margin-bottom: 14px;
}

.titulo{
  font-size: 1.35rem;
  margin: 0;
}

.subtitulo{
  margin: 6px 0 0;
  color: #0f6aab;
  font-size: .95rem;
}

.bloque-dados{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 18px;
}

.boton-dado{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: white;
  cursor: pointer;
  user-select: none;
}

.boton-dado:hover{
  background: rgb(116, 194, 225);
}

.imagen-dado{
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.texto-dado{
  font-weight: 700;
}

.bloque-resultado{
  border-top: 1px solid black;
  padding-top: 14px;
  margin-top: 6px;
}

.resultado{
  font-size: 2rem;
  font-weight: 800;
}

.detalle{
  color: #0f6aab;
  font-size: 1rem;
}

.bloque-historial{
  margin-top: 18px;
}

.historial-cabecera{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.historial-titulo{
  font-size: 1.05rem;
  margin: 0;
}

.historial-lista{
  max-height: 260px;
  overflow: auto;
}

#botonLimpiar{
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  border: 1px solid black;
  background: aliceblue;
  cursor: pointer;
  user-select: none;
}