*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--PRIMARY_COLOR);
}

:root {
  /* Variables Colores */
  --PRIMARY_COLOR: #171717;
  --SECONDARY_COLOR: #000000;
  --BACKGROUND_COLOR: #f7f7f7;

  --TEXT_COLOR: #f5fec4;
  --TEXT_MUTED_COLOR: #fdffef;
  --ACCENT_COLOR: #f0ff82;
  --LINK_COLOR: #007bff;
  --INFOR-COLOR: #17a2b8;
  --HOVER_COLOR: #0056b3;

  --SUCCESS_COLOR: #28a745;
  --DANGER_COLOR: #dc3545;
  --WARNING_COLOR: #ffc107;

  /* Variables Tipografía */
  --FONT_FAMILY: "Kelson Sans", sans-serif;

  /* Tamaños de Fuente */
  --FONT_SIZE_SMALL: 0.875rem;
  --FONT_SIZE_MEDIUM: 1rem;
  --FONT_SIZE_LARGE: 1.5rem;
  --FONT_SIZE_TITLE: 2rem;

  /* Espaciado */
  --SPACING_XSMALL: 0.25rem;
  --SPACING_SMALL: 0.5rem;
  --SPACING_MEDIUM: 1rem;
  --SPACING_LARGE: 1.5rem;
  --SPACING_XLARGE: 2rem;
  --SPACING_XXLARGE: 64px;

  /* Border Radius */
  --BORDER_RADIUS_SMALL: 0.25rem;
  --BORDER_RADIUS_MEDIUM: 0.5rem;
  --BORDER_RADIUS_LARGE: 1rem;

  /* Sombras */
  --SHADOW_SMALL: 0 2px 4px rgba(0, 0, 0, 0.4);
  --SHADOW_MEDIUM: 0 4px 8px rgba(0, 0, 0, 0.4);
  --SHADOW_LARGE: 0 8px 16px rgba(0, 0, 0, 0.4);

  /* Ancho Columnas*/
  --LEFT_COLUMN_WIDTH: 80%;
  --RIGHT_COLUMN_WIDTH: 20%;
  --CENTER_COLUMN_WIDTH: 60%;

  /* Variables carrusel */
  --CAROUSEL_WIDTH: 90%;
  --CAROUSEL_HEIGHT: 70%;
  --CAROUSEL_GAP: 1rem;
  --CAROUSEL_HERO_WIDTH: 9%;
}

.main_body {
  width: 100%;
  height: 100dvh;

  display: grid;
  grid-template-rows: 10% minmax(0, 80%) 10%;

  font-family: var(--FONT_FAMILY);
  font-size: var(--FONT_SIZE_MEDIUM);
  color: var(--TEXT_COLOR);

  overflow: hidden;
}

.header {
  width: 100%;
  height: 100%;

  background-color: var(--PRIMARY_COLOR);

  display: flex;
  align-items: center;
  justify-content: left;

  box-shadow: var(--SHADOW_MEDIUM);

  position: relative;
  z-index: 10;

  overflow: hidden;
}

.logo {
  width: 10%;
  height: 80%;

  margin: 0 1rem;
  padding: 0.2rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  max-width: 100%;
  max-height: 100%;
}

.nav {
  width: 90%;
  height: 80%;

  margin: 0 1rem;
  padding: 0.2rem;
  padding-right: 2rem;

  display: flex;
  align-items: center;
  justify-content: right;
}

.content-landing-page {
  width: 100%;
  height: 100%;
  min-height: 0;

  background-color: var(--BACKGROUND_COLOR);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.left-column {
  width: var(--LEFT_COLUMN_WIDTH);
  height: 100%;
  background-color: var(--BACKGROUND_COLOR);

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
}

.right-column {
  width: var(--RIGHT_COLUMN_WIDTH);
  height: 100%;
  background-color: var(--BACKGROUND_COLOR);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  gap: var(--SPACING_MEDIUM);

  border-left: 1px solid var(--TEXT_MUTED_COLOR);

  padding: var(--SPACING_MEDIUM);
  box-sizing: border-box;
}

.center-column {
  width: var(--CENTER_COLUMN_WIDTH);
  height: 100%;
  background-color: var(--ACCENT_COLOR);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer {
  width: 100%;
  height: 100%;
  min-height: 0;

  background-color: var(--PRIMARY_COLOR);

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 2;
}

.footer-content {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: var(--TEXT_COLOR);
}

.footer-content h2 {
  margin: 0;
  font-size: var(--FONT_SIZE_LARGE);
  color: var(--TEXT_COLOR);
}

/* Contenedor principal del carrusel */
.carousel {
  width: var(--CAROUSEL_WIDTH);
  height: var(--CAROUSEL_HEIGHT);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

/* Pista donde se colocan los heroes */
.carousel-track {
  display: flex;
  align-items: center;
  gap: var(--CAROUSEL_GAP);

  /* Permitimos mover la pista mediante JavaScript */
  transform: translateX(0);

  /* El movimiento se controla desde JavaScript */
  will-change: transform;
}

/* Cada heroe del carrusel */
.carousel-hero {
  flex: 0 0 var(--CAROUSEL_HERO_WIDTH);
  aspect-ratio: 3 / 5;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--PRIMARY_COLOR);

  border-radius: var(--BORDER_RADIUS_LARGE);

  overflow: hidden;

  box-shadow: var(--SHADOW_MEDIUM);
}

/* Imagen del heroe */
.carousel-hero img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: var(--BORDER_RADIUS_LARGE);
}
/* Estilo del heroe seleccionado */
.carousel-hero.selected {
  position: relative;
  transform: scale(1.25);
  z-index: 10;
  overflow: visible;
}

/* Nombre del heroe seleccionado */
.carousel-hero.selected::before {
  content: attr(data-hero-name);

  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;

  transform: translateX(-50%);

  white-space: nowrap;

  color: var(--PRIMARY_COLOR);
  background-color: var(--TEXT_COLOR);

  padding: var(--SPACING_XSMALL) var(--SPACING_SMALL);

  border-radius: var(--BORDER_RADIUS_SMALL);

  font-size: var(--FONT_SIZE_MEDIUM);
  font-weight: bold;

  box-shadow: var(--SHADOW_SMALL);
}

/* Indicador que marca el heroe seleccionado */
.carousel-indicator {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 0.4rem;

  background-color: var(--TEXT_COLOR);

  transform: translateX(-50%);

  z-index: 5;

  box-shadow: 0 0 10px var(--TEXT_COLOR);
}

/* Boton para iniciar el carrusel */
.spin-button {
  margin-top: 2rem;
  padding: 1rem 2rem;

  font-family: var(--FONT_FAMILY);
  font-size: var(--FONT_SIZE_LARGE);
  font-weight: bold;

  color: var(--ACCENT_COLOR);
  background-color: var(--PRIMARY_COLOR);

  border: none;
  border-radius: var(--BORDER_RADIUS_MEDIUM);

  box-shadow: var(--SHADOW_MEDIUM);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Efecto al pasar el raton */
.spin-button:hover {
  transform: scale(1.05);
  box-shadow: var(--SHADOW_LARGE);
}

/* Efecto al pulsar */
.spin-button:active {
  transform: scale(0.98);
}

/* Contenedor de gestion de heroes */
.hero-management {
  width: 80%;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Boton para gestionar heroes */
.manage-heroes-button {
  padding: 0.8rem 1.5rem;

  font-family: var(--FONT_FAMILY);
  font-size: var(--FONT_SIZE_SMALL);
  font-weight: bold;

  color: var(--TEXT_COLOR);
  background-color: var(--PRIMARY_COLOR);

  border: none;
  border-radius: var(--BORDER_RADIUS_MEDIUM);

  box-shadow: var(--SHADOW_SMALL);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Efecto al pasar el raton */
.manage-heroes-button:hover {
  transform: scale(1.05);
  box-shadow: var(--SHADOW_MEDIUM);
}

/* Efecto al pulsar */
.manage-heroes-button:active {
  transform: scale(0.98);
}

/* Fondo del modal */
.hero-modal {
  position: fixed;

  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  background-color: rgba(0, 0, 0, 0.7);

  z-index: 100;
}

/* Modal visible */
.hero-modal.active {
  display: flex;
}

/* Contenido del modal */
.hero-modal-content {
  width: 70%;
  height: 70%;

  padding: 2rem;

  background-color: var(--PRIMARY_COLOR);

  border-radius: var(--BORDER_RADIUS_LARGE);

  box-shadow: var(--SHADOW_LARGE);

  display: flex;
  flex-direction: column;

  gap: 1.5rem;
}

/* Cabecera del modal */
.hero-modal-header {
  display: flex;

  align-items: center;
  justify-content: space-between;
}

/* Boton cerrar */
.close-modal-button {
  padding: 0.5rem;

  color: var(--TEXT_COLOR);
  background: none;

  border: none;

  font-size: var(--FONT_SIZE_LARGE);

  cursor: pointer;
}

/* Lista de heroes */
.hero-list {
  flex: 1;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;

  overflow-y: auto;
}

/* Cada heroe */
.hero-option {
  padding: 0.8rem;

  display: flex;
  align-items: center;
  gap: 0.5rem;

  background-color: var(--SECONDARY_COLOR);

  border-radius: var(--BORDER_RADIUS_MEDIUM);
}

/* Checkbox */
.hero-option input {
  accent-color: var(--TEXT_COLOR);
}

/* Boton guardar */
.save-heroes-button {
  align-self: center;

  padding: 0.8rem 2rem;

  font-family: var(--FONT_FAMILY);
  font-weight: bold;

  color: var(--TEXT_COLOR);
  background-color: var(--SECONDARY_COLOR);

  border: none;
  border-radius: var(--BORDER_RADIUS_MEDIUM);

  cursor: pointer;
}

.carousel-empty-message {
  color: var(--PRIMARY_COLOR);

  font-size: var(--FONT_SIZE_LARGE);

  text-align: center;
}

.current-result {
  width: 80%;
  padding: var(--SPACING_SMALL);
  text-align: center;
}

.current-result h3 {
  margin-bottom: var(--SPACING_SMALL);
}

.current-result p {
  color: var(--TEXT_MUTED_COLOR);
  font-size: var(--FONT_SIZE_SMALL);
}

.hero-history {
  width: 80%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--SPACING_SMALL);
}

.hero-history h3 {
  text-align: center;
}

.history-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--SPACING_SMALL);
}

.history-item {
  padding: var(--SPACING_SMALL);
  background-color: var(--SECONDARY_COLOR);
  border-radius: var(--BORDER_RADIUS_MEDIUM);
  box-shadow: var(--SHADOW_SMALL);
}

.history-item h4 {
  margin-bottom: var(--SPACING_XSMALL);
}

.history-item p {
  color: var(--TEXT_COLOR);
  font-size: var(--FONT_SIZE_SMALL);
}

.history-empty {
  color: var(--PRIMARY_COLOR);
  text-align: center;
}