/* Estilos generales, compartidos por todas las secciones */

/* ---------- Letras ----------
   Nunito para el texto y Baloo 2 para títulos, pestañas y números grandes. Las dos son
   variables (un archivo vale para todos los gruesos), solo con el alfabeto latino, y van en
   la propia web (fuentes/, con su licencia SIL OFL) para no pedir nada a Google. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fuentes/nunito.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fuentes/nunito-cursiva.woff2") format("woff2");
}

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fuentes/baloo2.woff2") format("woff2");
}

:root {
  --letra: "Nunito", Arial, sans-serif;
  --letra-titulos: "Baloo 2", "Nunito", Arial, sans-serif;
}

/* ---------- Colores del tema ----------
   Tres temas (los pone js/comun/ajustes.js en <html data-tema>):
   · Atardecer, el de por defecto, en :root sin más: un negro carbón, un pelín cálido en lo
     más oscuro y cada vez más neutro según se aclara, porque en los grises claros el mismo
     tono ya se ve marrón (sepia). La letra y sus grises, neutros.
   · Oscuro, [data-tema="oscuro"]: el azul marino de siempre. Solo cambia lo que es distinto.
   · Claro, [data-tema="claro"].
   Los colores vivos (rojo, amarillo, el de cada sección...) son los mismos en todos.
   Lo que lleva un fondo con dibujo (.con-fondo: la tarjeta de «Amigos», tu ficha del perfil, las
   muestras de la Tienda...) se ve igual con cualquier tema, como los títulos y los marcos: el fondo
   es opaco y lo de encima va siempre con los colores de Atardecer (letra clara con sombra). */
:root,
.con-fondo {
  color-scheme: dark;
  --t-hundido: #1c1a19;
  --t-fondo: #22201f;
  --t-fondo-2: #2a2827;
  --t-panel: #32302f;
  --t-panel-2: #363332;
  --t-panel-3: #3b3837;
  --t-panel-4: #3c3a38;
  --t-panel-5: #3e3b39;
  --t-control: #423f3e;
  --t-control-2: #545250;
  --t-control-3: #706d6b;
  --t-texto: #f2f2f2;
  --t-texto-rgb: 242, 242, 242;
  --t-texto-fuerte: #fff;
  --t-gris: #a19d9b;
  --t-gris-2: #b5b2b0;
  --t-gris-3: #cbc9c8;
  --t-gris-4: #928e8b;
  --t-azulado: #6a7bb0;
  --t-azulado-2: #7f8bb0;
  /* La letra oscura encima de los colores vivos (botones, pestañas, etiquetas...) */
  --t-tinta: #22201f;
  --t-tinta-2: #32302f;
  /* Brillos (blanco) y sombras de los huecos (negro), en rgb para usarlos con rgba() */
  --t-tinte: 255, 255, 255;
  --t-oscurecer: 0, 0, 0;
  /* Cuánto color le queda a la letra de color vivo (en claro se oscurece para leerse) */
  --t-vivo: 100%;
  --t-icono-fecha: invert(0.8);
}

:root[data-tema="oscuro"] {
  --t-hundido: #171822;
  --t-fondo: #1e1f2b;
  --t-fondo-2: #252735;
  --t-panel: #2c2e3e;
  --t-panel-2: #2f3142;
  --t-panel-3: #32354a;
  --t-panel-4: #34364a;
  --t-panel-5: #363949;
  --t-control: #3a3d52;
  --t-control-2: #4a4e68;
  --t-control-3: #60658a;
  --t-gris: #9a9cb0;
  --t-gris-2: #aab0c8;
  --t-gris-3: #c3cad6;
  --t-gris-4: #8a8fa8;
  --t-tinta: #1e1f2b;
  --t-tinta-2: #2b2d3a;
}

:root[data-tema="claro"] {
  color-scheme: light;
  --t-hundido: #dde0ea;
  --t-fondo: #eef0f5;
  --t-fondo-2: #f6f7fa;
  --t-panel: #ffffff;
  --t-panel-2: #f7f8fb;
  --t-panel-3: #f1f3f8;
  --t-panel-4: #eceef4;
  --t-panel-5: #e9ebf2;
  --t-control: #e1e4ed;
  --t-control-2: #cdd1df;
  --t-control-3: #b3b8cc;
  --t-texto: #1e1f2b;
  --t-texto-rgb: 30, 31, 43;
  --t-texto-fuerte: #000;
  --t-gris: #5f6278;
  --t-gris-2: #585e7c;
  --t-gris-3: #4a5062;
  --t-gris-4: #6a6f88;
  --t-azulado: #47579a;
  --t-azulado-2: #56639a;
  --t-tinta: #1e1f2b;
  --t-tinta-2: #2b2d3a;
  --t-tinte: 0, 0, 0;
  --t-oscurecer: 70, 80, 120;
  --t-vivo: 62%;
  --t-icono-fecha: none;
}

/* ---------- Bien y mal ----------
   Los verdes y rojos que dicen si algo es bueno o malo, en toda la web: acierto y fallo,
   conectado, aceptar y guardar, borrar y eliminar, caídos, errores... Iguales en los tres
   temas. Con el modo daltónico (Ajustes: <html data-colores="daltonicos">,
   js/comun/ajustes.js) el verde pasa a azul y el rojo a naranja, que se distinguen con casi
   cualquier daltonismo. Los rojos que son de identidad (el logo, el color de Lockes o de
   Inicio, los corazones de las vidas, el aro de tu foto) no van aquí: no cambian.
   Para algo nuevo que esté bien o mal, estos, no un color escrito a mano. */
:root {
  --t-bien: #2ecc71;
  --t-bien-rgb: 46, 204, 113;
  --t-bien-oscuro: #27ae60; /* botones de aceptar o guardar */
  --t-bien-oscuro-rgb: 39, 174, 96;
  --t-casi: #e6b422;
  --t-mal: #e0574a;
  --t-mal-rgb: 224, 87, 74;
  --t-rojo: #e74c3c; /* errores, caídos, eliminados */
  --t-rojo-rgb: 231, 76, 60;
  --t-rojo-oscuro: #c0392b; /* botones de borrar */
  --t-rojo-oscuro-rgb: 192, 57, 43;
}

:root[data-colores="daltonicos"] {
  --t-bien: #4aa3e8;
  --t-bien-rgb: 74, 163, 232;
  --t-bien-oscuro: #2f7fc4;
  --t-bien-oscuro-rgb: 47, 127, 196;
  --t-casi: #f0d64a;
  --t-mal: #ea7a26;
  --t-mal-rgb: 234, 122, 38;
  --t-rojo: #ea7a26;
  --t-rojo-rgb: 234, 122, 38;
  --t-rojo-oscuro: #c25e10;
  --t-rojo-oscuro-rgb: 194, 94, 16;
}

html {
  /* Tamaño base: crece o se encoge según la ventana. (NO TOCAR el 1.72vh) */
  font-size: clamp(12px, min(1.72vh, 1.3vw), 24px);
  /* Los controles del navegador (listas de los desplegables, calendario, selector de color...)
     con el tema (color-scheme, arriba), y las casillas y barras en el color de la sección */
  accent-color: rgb(var(--color-vista));
}

/* ---------- Controles del navegador, con los colores de la web ---------- */

select option,
select optgroup {
  background: var(--t-fondo);
  color: var(--t-texto);
}

/* La ✕ de las casillas de buscar */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--t-gris-4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

input[type="search"]::-webkit-search-cancel-button:hover {
  background: rgb(var(--color-vista));
}

/* El icono del calendario de las fechas */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: var(--t-icono-fecha);
  cursor: pointer;
}

/* Flechas de los números: fuera en todas (las propias están en .numero) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Texto seleccionado y el contorno al moverse con el teclado */
::selection {
  background: rgba(var(--color-vista), 0.35);
  color: var(--t-texto-fuerte);
}

:focus-visible {
  outline: 2px solid rgb(var(--color-vista));
  outline-offset: 2px;
}

body {
  font-family: var(--letra);
  background: var(--t-fondo);
  color: var(--t-texto);
  margin: 0;
  font-size: 1rem;
}

/* Los controles no heredan la letra por su cuenta */
button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3,
.logo {
  font-family: var(--letra-titulos);
  line-height: 1.15;
}

[hidden] {
  display: none !important;
}

/* ---------- Barras de scroll (las de toda la web) ---------- */

/* Chrome, Edge, Safari: finas, redondeadas, de los colores de la web y rojas al cogerlas */
::-webkit-scrollbar {
  width: 0.7rem;
  height: 0.7rem;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 0.2rem solid transparent;
  border-radius: 1rem;
  background: var(--t-control-2) padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--t-control-3);
}

::-webkit-scrollbar-thumb:active {
  background-color: #c0392b;
}

::-webkit-scrollbar-button {
  display: none;
}

/* Firefox (no tiene lo de arriba). Solo ahí: en Chrome esto anularía lo de arriba */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--t-control-2) transparent;
  }
}

/* ---------- Casillas de número con flechas propias (js/comun/numero.js) ---------- */

.numero {
  position: relative;
  display: inline-flex;
}

.numero input {
  flex: 1;
  min-width: 0;
  padding-right: 1.45rem !important; /* sitio para las flechas */
  -moz-appearance: textfield;
  appearance: textfield;
}

.numero input::-webkit-inner-spin-button,
.numero input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.numero-pasos {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  display: flex;
  flex-direction: column;
  width: 1.05rem;
  gap: 1px;
}

.numero-pasos button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0.2rem;
  background: var(--t-control);
  color: var(--t-gris-3);
  cursor: pointer;
}

.numero-pasos button:hover {
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
}

/* La flechita: un pico hecho con dos bordes */
.numero-pasos button::before {
  content: "";
  width: 0.28rem;
  height: 0.28rem;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(0.07rem) rotate(45deg);
}

.numero-pasos .numero-menos::before {
  transform: translateY(-0.07rem) rotate(225deg);
}

.numero:has(input:disabled) .numero-pasos {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Fotos de jugador que abren su perfil (js/main.js) ---------- */

[data-perfil] {
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}

[data-perfil]:hover {
  transform: scale(1.06);
  filter: brightness(1.12);
}

/* ---------- Desplegable de sugerencias ---------- */

/* La lista que sale al escribir (js/comun/autocompletado.js): oscura como el resto, con la
   marcada (ratón o flechas del teclado) en amarillo */
.sugerencias {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: min(22rem, 55vh);
  overflow-y: auto;
  background: var(--t-fondo);
  color: var(--t-texto);
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
  font-size: 0.92rem;
  font-weight: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.sugerencias:not(:empty) {
  padding: 0.25rem;
  border: 1px solid rgba(var(--color-vista), 0.4);
}

.sugerencias .opcion {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.35rem;
  cursor: pointer;
}

.sugerencias .opcion.marcada {
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
}

.sugerencias .opcion-nombre {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
}

/* El nombre en inglés, flojito a la derecha */
.sugerencias .opcion small {
  flex: none;
  margin-left: auto;
  font-size: 0.78rem;
  opacity: 0.55;
}

.sugerencias .opcion-icono {
  display: flex;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
}

/* Retratos de Mundo Misterioso, redondos (los objetos, tal cual) */
.sugerencias .opcion-icono img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--t-panel);
  object-fit: cover;
  image-rendering: pixelated;
}

.sugerencias .opcion-icono img.objeto {
  border-radius: 0;
  background: none;
  object-fit: contain;
  image-rendering: auto;
}

.sugerencias .opcion.marcada .opcion-icono img:not(.objeto) {
  box-shadow: 0 0 0 2px var(--t-fondo);
}

/* ---------- Iconos de tipo ---------- */

.icono-tipo {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  background: #fff;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

/* ---------- Diálogos ---------- */

dialog {
  width: min(42rem, 92vw);
  padding: 1.15rem;
  border: none;
  border-radius: 0.7rem;
  background: var(--t-panel);
  color: var(--t-texto);
}

dialog::backdrop {
  background: rgba(var(--t-oscurecer), 0.65);
}

dialog h2 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
}

dialog p {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

dialog textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem;
  border: none;
  border-radius: 0.45rem;
  font-family: Consolas, monospace;
  font-size: 0.85rem;
  resize: vertical;
}

.dialogo-botones {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.dialogo-botones button {
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 0.45rem;
  font-weight: bold;
  cursor: pointer;
}

/* ---------- Fichas al pasar el ratón (js/comun/tooltip.js) ---------- */

.tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none; /* que no tape al ratón */
}

.ficha {
  width: 16rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.7rem;
  background: var(--t-panel);
  color: var(--t-texto);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-size: 0.85rem;
}

.ficha p {
  margin: 0.4rem 0 0;
  line-height: 1.35;
}

.ficha-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: bold;
  font-size: 0.95rem;
}

.ficha-titulo small {
  font-weight: normal;
  opacity: 0.75;
}

/* Al arrastrar algo para cambiarlo de sitio: dónde va a caer (js/comun/arrastrar.js) */
.marca-soltar {
  position: fixed;
  z-index: 1000;
  border-radius: 2px;
  background: rgb(var(--color-vista));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 10px rgba(var(--color-vista), 0.75);
  pointer-events: none;
}

.marca-soltar.marco {
  border: 3px solid rgb(var(--color-vista));
  border-radius: 0.6rem;
  background: rgba(var(--color-vista), 0.12);
}

.marca-soltar[hidden] {
  display: none;
}

.arrastrando {
  opacity: 0.35;
}

/* ---------- Equipos en pequeño y elegir uno (js/comun/elegir-equipo.js) ---------- */

.caras-equipo {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.cara-equipo {
  position: relative;
  display: inline-flex;
}

.cara-equipo img {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgba(var(--t-tinte), 0.06);
  image-rendering: pixelated;
}

.cara-equipo.mvp img {
  box-shadow: 0 0 0 2px #f1c40f;
}

.cara-equipo.mvp::after {
  content: "MVP";
  position: absolute;
  bottom: -0.35rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.2rem;
  border-radius: 0.25rem;
  background: #f1c40f;
  color: var(--t-tinta-2);
  font-size: 0.5rem;
  font-weight: bold;
  line-height: 1.2;
}

.elegir-equipo {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: max-content;
  min-width: 15rem;
  max-width: min(26rem, calc(100vw - 16px));
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  border: 1px solid rgba(var(--t-tinte), 0.1);
  border-radius: 0.6rem;
  background: var(--t-fondo-2);
  color: var(--t-texto);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.elegir-equipo-opcion,
.elegir-equipo-quitar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.4rem 0.55rem;
  border: none;
  border-radius: 0.45rem;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.elegir-equipo-quitar {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  color: #ff8a80;
}

.elegir-equipo-quitar .icono {
  width: 1rem;
  height: 1rem;
}

.elegir-equipo-opcion:hover,
.elegir-equipo-quitar:hover {
  background: var(--t-control);
}

.elegir-equipo-opcion .cara-equipo img {
  width: 1.6rem;
  height: 1.6rem;
}

.elegir-equipo-grupo > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.45rem;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  font-weight: bold;
  font-size: 0.85rem;
  cursor: pointer;
  list-style: none;
}

.elegir-equipo-grupo > summary::-webkit-details-marker {
  display: none;
}

.elegir-equipo-grupo > summary:hover {
  background: var(--t-control);
}

.elegir-equipo-grupo > summary .icono {
  width: 1rem;
  height: 1rem;
}

.elegir-equipo-grupo > summary small {
  color: var(--t-gris);
}

.elegir-equipo-grupo[open] {
  padding-left: 0.6rem;
  border-left: 2px solid rgba(var(--color-vista), 0.35);
}

.elegir-equipo-vacio {
  margin: 0;
  padding: 0.6rem;
  opacity: 0.7;
  font-size: 0.85rem;
}

.elegir-equipo-destacado {
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(var(--t-tinte), 0.1);
}

/* ---------- Avisos y preguntas (js/comun/ventanas.js) ---------- */

.ventana-web {
  width: min(26rem, 92vw);
  padding: 1.15rem 1.2rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 3px 0 rgb(var(--color-vista));
}

.ventana-texto p {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 1;
}

.ventana-texto p:first-child {
  font-weight: bold;
}

.ventana-texto p:last-child {
  margin-bottom: 0;
}

.ventana-campo {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.7rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.95rem;
}

.ventana-campo:focus {
  outline: none;
  border-color: rgb(var(--color-vista));
}

.ventana-web .dialogo-botones button {
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.ventana-cancelar {
  background: var(--t-control);
  color: var(--t-texto);
}

.ventana-cancelar:hover {
  background: var(--t-control-2);
}

.ventana-aceptar {
  background: rgb(var(--color-vista));
  color: #fff;
}

.ventana-aceptar:hover {
  background: color-mix(in srgb, rgb(var(--color-vista)) 85%, white);
}

.ventana-peligro {
  background: var(--t-rojo-oscuro);
  color: #fff;
}

.ventana-peligro:hover {
  background: var(--t-rojo);
}
/* ---------- Desplegables (<select>) con el estilo de la web ----------
   La lista que se abre, como la de las sugerencias al escribir. Solo en los navegadores que
   dejan cambiarla (Chrome y Edge recientes); en los demás sale la del sistema, como antes. */

@supports (appearance: base-select) {
  select,
  ::picker(select) {
    appearance: base-select;
  }

  select {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-color: transparent;
    cursor: pointer;
  }

  select::picker-icon {
    color: rgba(var(--t-texto-rgb), 0.6);
    transition: rotate 0.15s;
  }

  select:open::picker-icon {
    rotate: 180deg;
  }

  ::picker(select) {
    margin-top: 0.25rem;
    max-height: min(22rem, 55vh);
    padding: 0.25rem;
    border: 1px solid rgba(var(--color-vista), 0.4);
    border-radius: 0.5rem;
    background: var(--t-fondo);
    color: var(--t-texto);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
    font-size: 0.92rem;
  }

  select option {
    padding: 0.4rem 0.55rem;
    border-radius: 0.35rem;
    font-weight: bold;
    cursor: pointer;
  }

  select option::checkmark {
    display: none;
  }

  select option:checked {
    color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  }

  select option:hover,
  select option:focus-visible {
    outline: none;
    background: rgb(var(--color-vista));
    color: var(--t-tinta);
  }

  select optgroup {
    padding-top: 0.2rem;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--t-texto-rgb), 0.55);
  }

  select optgroup option {
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--t-texto);
  }
}