/* Sección «Equipos»: Crear equipo, Mis equipos e importar paste */

/* ---------- Barra de arriba: nombre + contador | buscador | ayudas, guardar y vaciar, «⋯» ---------- */

/* El buscador, centrado en la página; si a un lado no le cabe todo, en dos líneas */
.barra-superior {
  display: grid;
  grid-template-columns: 1fr minmax(0, 32rem) 1fr;
  align-items: center;
  gap: 0.6rem 0.85rem;
}

/* Si no cabe todo (nombre, Analizar, Buscar equipo y el contador), en dos líneas */
.lado-izq {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  justify-self: stretch;
  min-width: 0;
}

.lado-der {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
}

/* Cuántos lleva («3/6»), en una pastillita */
#contador {
  padding: 0.2rem 0.7rem;
  border-radius: 1rem;
  background: rgba(var(--t-tinte), 0.07);
  color: var(--t-gris-3);
  font-family: var(--letra-titulos);
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Ancha: se queda con todo el hueco de su lado (como mucho 26rem), y encoge si al lado no
   cabe el contador */
#nombre-equipo {
  flex: 1 1 26rem;
  min-width: 9rem;
  max-width: 26rem;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  font-size: 0.93rem;
}

/* El aviso («Equipo guardado ✔»...): una etiqueta flotante debajo del buscador, fuera del
   flujo (así ni el buscador encoge ni tapa los botones de al lado). Vacío, no se ve */
#aviso {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  background: var(--t-fondo-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: bold;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

#aviso:empty {
  display: none;
}

/* La casilla y «Añadir» pegados en una sola tarjetita, como los otros botones juntos */
.buscador {
  display: flex;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 32rem;
  border-radius: 0.45rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

#vista-crear .buscador :is(input, button) {
  box-shadow: none;
}

/* Sin el contorno de color al escribir: con «Añadir» pegado queda raro */
#nombre:focus-visible {
  outline: none;
}

.buscador input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  border-radius: 0.45rem 0 0 0.45rem;
  border: none;
  font-size: 1rem;
}

.buscador button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border: none;
  border-left: 1px solid rgba(var(--t-oscurecer), 0.35);
  border-radius: 0 0.45rem 0.45rem 0;
  background: var(--t-panel);
  color: var(--t-texto);
  cursor: pointer;
  font-weight: bold;
}

.buscador button:hover {
  background: var(--t-control);
}

.buscador button .icono {
  width: 1.05rem;
  height: 1.05rem;
}

.quitar-pokemon {
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-rojo-oscuro);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.quitar-pokemon:hover {
  background: var(--t-rojo);
}

/* ---------- Botones de las barras (Crear equipo y Mis equipos) ----------
   Neutros, cada uno en su tarjetita y con su icono. Del color de la sección, solo el
   principal de cada barra: «Guardar» aquí y «Crear equipo» en Mis equipos. */

:is(#analizar-equipo, #buscar-equipo, #guardar, #vaciar),
.menu-mas-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.3rem;
  box-sizing: border-box;
  padding: 0 0.85rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-panel);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

:is(#analizar-equipo, #buscar-equipo, #vaciar):hover,
.menu-mas-boton:hover,
.menu-mas-boton[aria-expanded="true"] {
  background: var(--t-control);
}

#guardar {
  background: rgb(var(--color-vista));
  color: #fff;
}

#guardar:hover {
  background: color-mix(in srgb, rgb(var(--color-vista)) 80%, white);
}

#vaciar:hover {
  background: var(--t-rojo-oscuro);
  color: #fff;
}

/* Solo con el icono: cuadrados */
#vaciar,
.menu-mas-boton {
  width: 2.3rem;
  padding: 0;
}

:is(#analizar-equipo, #buscar-equipo, #guardar, #vaciar) .icono,
.menu-mas-boton .icono {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

/* Dos botones pegados en una sola tarjetita, con una rayita entre los dos */
.botones-juntos {
  display: inline-flex;
  border-radius: 0.45rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

#vista-crear .botones-juntos button {
  border-radius: 0;
}

#vista-crear .botones-juntos button:first-child {
  border-radius: 0.45rem 0 0 0.45rem;
}

#vista-crear .botones-juntos button:last-child {
  border-radius: 0 0.45rem 0.45rem 0;
}

#vista-crear .botones-juntos button + button {
  border-left: 1px solid rgba(var(--t-oscurecer), 0.35);
}

/* El «⋯» y sus opciones (js/comun/menu-mas.js) */
.menu-mas {
  position: relative;
  display: inline-flex;
}

.menu-mas-lista {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: 0.3rem;
  border: 1px solid rgba(var(--t-tinte), 0.1);
  border-radius: 0.6rem;
  background: var(--t-fondo-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Al abrirse, aparece bajando un poco */
.menu-mas-lista:not([hidden]) {
  animation: menu-mas-aparece 0.15s ease-out;
}

@keyframes menu-mas-aparece {
  from {
    opacity: 0;
    transform: translateY(-0.3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-mas-lista:not([hidden]) {
    animation: none;
  }
}

.menu-mas-lista button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: 0.4rem;
  background: none;
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.menu-mas-lista button:hover:not(:disabled) {
  background: var(--t-control);
}

.menu-mas-lista button:disabled {
  cursor: default;
}

.menu-mas-lista .icono {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--t-gris-2);
}

/* La sombra de los botones de las barras (css/layout.css), aquí en su tarjetita común */
:is(#vista-crear, #vista-equipos) :is(.botones-juntos, .menu-mas-lista, .vista-equipos) button {
  box-shadow: none;
}

/* ---------- Cuadrícula de tarjetas ---------- */

/* La vista ocupa el alto de la pantalla (menos los márgenes de main) y la cuadrícula se
   queda con lo que sobra de la barra de arriba. Las tres filas se reparten ese alto a
   partes iguales, así no queda hueco abajo. Si el contenido de una tarjeta no cupiera,
   minmax(min-content, ...) deja que crezca en vez de recortarla. */
/* Crear equipo ocupa justo el alto de la ventana y nunca más: no hay scroll. Las tres
   filas se reparten el hueco a partes iguales (minmax(0, 1fr): pueden encogerse por debajo
   de su contenido) y lo que cede es el dibujo del Pokémon, que se hace más pequeño lo justo
   para que quepa todo lo demás. 1.7rem = el margen de arriba y abajo de <main>. */
#vista-crear {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 1.7rem);
}

#resultado {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
}

#resultado > p {
  grid-column: 1 / -1;
}

/* Un degradado del color del primer tipo del Pokémon, de izquierda (donde está su dibujo) a
   derecha (--color-tipo lo pone js/equipos/crear.js) */
#resultado > .tarjeta:not(.tarjeta-vacia) {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-tipo) 7%, transparent), transparent 60%);
}

.tarjeta {
  position: relative;
  display: flex;
  gap: 0.85rem;
  align-items: stretch;
  min-height: 0;
  background: var(--t-panel);
  border-radius: 0.7rem;
  padding: 0.85rem;
  text-align: left;
}

/* En columna, para que el dibujo pueda quedarse con el alto que sobre (ver .arte) */
.tarjeta-izq {
  flex: 0 0 12.5rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.tarjeta:hover {
  outline: 2px solid rgba(var(--color-vista), 0.5);
}

/* Hueco de un Pokémon que todavía no está. No lleva alto propio: lo da su fila. */
.tarjeta-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px dashed rgba(var(--t-tinte), 0.15);
  color: rgba(var(--t-tinte), 0.3);
  font-family: inherit;
  cursor: pointer;
}

.tarjeta-vacia:hover {
  border-color: rgb(var(--color-vista));
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  outline: none;
}

.tarjeta-vacia .mas {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

/* Tarjeta que se está arrastrando para cambiarla de sitio */
.tarjeta.arrastrando {
  opacity: 0.4;
  outline: 2px dashed rgb(var(--color-vista));
}

/* El dibujo se queda con el alto que dejan libre el nombre, la forma, los tipos y el botón
   de quitar, hasta un máximo de 8.6rem. Así, si la pantalla es baja, encoge el dibujo y no
   la página. aspect-ratio reserva el hueco cuadrado aunque la imagen aún no haya cargado. */
.tarjeta-izq img {
  flex: 1 1 0;
  min-height: 3rem;
  max-height: 8.6rem;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Lo que va debajo del dibujo no encoge nunca */
.tarjeta-izq > :not(img) {
  flex: none;
}

.tarjeta-izq h2 {
  font-size: 1.15rem;
  margin: 0.3rem 0 0;
}

/* El nombre se pulsa para poner o cambiar el mote: la casilla sale en su sitio, del mismo
   tamaño, para que la tarjeta no se mueva */
.nombre-editable {
  max-width: 100%;
  border-radius: 0.35rem;
  cursor: text;
}

.nombre-editable:hover {
  background: rgba(var(--t-tinte), 0.06);
}

.mote-campo {
  box-sizing: border-box;
  width: 100%;
  max-width: 12rem;
  margin: 0;
  padding: 0 0.3rem;
  border: none;
  border-bottom: 2px solid rgb(var(--color-vista));
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  outline: none;
}

.mote-campo::placeholder {
  color: inherit;
  opacity: 0.4;
}

/* Especie (cuando hay mote) y forma, en una sola línea que se dibuja siempre aunque esté
   vacía: así la tarjeta mide igual con mote y forma que sin ellos y la página no crece. */
/* Alto fijo, haya desplegable de forma o no: así todas las tarjetas miden lo mismo */
.forma-nombre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 1.4rem;
  font-size: 0.8rem;
  line-height: 1.15;
  margin: 0.25rem 0 0.45rem; /* un pelín separada del mote */
  overflow: hidden;
  white-space: nowrap;
}

.forma-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

.forma-texto:empty {
  display: none;
}

/* Desplegable para cambiar de forma sin rehacer el Pokémon */
.selector-forma {
  min-width: 0;
  max-width: 100%;
  height: 1.4rem;
  padding: 0 0.35rem;
  border: 1px solid rgba(var(--t-tinte), 0.15);
  border-radius: 0.35rem;
  background: var(--t-fondo-2);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.selector-forma:hover {
  border-color: rgba(var(--color-vista), 0.6);
}

.selector-forma:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Botón shiny (arriba a la izquierda de la tarjeta) */

.btn-shiny {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.btn-shiny:hover {
  background: rgba(var(--t-oscurecer), 0.5);
}

.btn-shiny.activo {
  background: #f1c40f;
  color: var(--t-tinta-2);
}

/* Género: debajo del shiny */
.btn-genero {
  position: absolute;
  top: 2.65rem;
  left: 0.5rem;
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(var(--t-oscurecer), 0.3);
  color: var(--t-gris);
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

.btn-genero:hover {
  background: rgba(var(--t-oscurecer), 0.5);
}

/* Mismo fondo que el del shiny; el color va en el icono */
.btn-genero.genero-M {
  color: #5aa2ff;
}

.btn-genero.genero-F {
  color: #ff6fb8;
}

.btn-genero.fijo {
  cursor: default;
  opacity: 0.75;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  padding: 0.12rem 0.5rem 0.12rem 0.4rem;
  border-radius: 0.7rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Estadísticas (abre el panel de abajo) y Quitar, en la misma fila */
.tarjeta-botones {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.tarjeta-botones .quitar-pokemon {
  flex: none;
}

.abrir-entreno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.abrir-entreno:hover {
  background: var(--t-control-2);
}

.abrir-entreno .icono {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

/* ---------- Ventana de nivel, naturaleza, EVs e IVs (js/equipos/entreno.js) ---------- */

#dialogo-entreno {
  width: min(58rem, 94vw);
  padding: 1rem 1.15rem;
  box-shadow: inset 0 0 0 2px rgba(var(--color-vista), 0.5);
}

.entreno-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 0.8rem;
  padding-right: 5rem; /* Deshacer y la ✕, en la esquina */
}

.entreno-cara {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.5rem;
  background: var(--t-fondo);
  image-rendering: pixelated;
}

.entreno-nombre {
  font-size: 1.15rem;
}

.entreno-campo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.entreno-campo input,
.entreno-campo select,
.entreno-fila input[type="number"] {
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(var(--t-tinte), 0.12);
  border-radius: 0.4rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
}

.entreno-campo input:focus,
.entreno-campo select:focus,
.entreno-fila input[type="number"]:focus {
  outline: none;
  border-color: rgb(var(--color-vista));
}

.entreno-nivel {
  width: 4.6rem;
}

.entreno-fila .numero {
  display: flex;
  width: 100%;
}

.entreno-restantes {
  margin-left: auto;
  font-size: 0.9rem;
  opacity: 0.85;
}

.entreno-restantes.lleno strong {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

/* Deshacer y la ✕, juntos en la esquina y a la altura de la primera fila de la cabecera (la
   cara mide 2,6rem y la ventana tiene 1rem de margen: su centro queda a 2,3rem) */
.entreno-botones {
  position: absolute;
  top: 1.3rem;
  right: 1rem;
  display: flex;
  gap: 0.4rem;
}

.entreno-deshacer,
.entreno-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.entreno-deshacer:hover:not(:disabled),
.entreno-cerrar:hover {
  background: var(--t-control-2);
}

.entreno-deshacer:disabled {
  opacity: 0.35;
  cursor: default;
}

.entreno-deshacer .icono,
.entreno-cerrar .icono {
  width: 0.9rem;
  height: 0.9rem;
}

/* Una fila por estadística: nombre, base, EVs (barra y número), IVs y la final con su barra */
.entreno-filas {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.entreno-fila {
  display: grid;
  grid-template-columns: 7rem 3rem minmax(6rem, 1fr) 4.2rem 4.2rem minmax(6rem, 1.2fr) 3rem;
  align-items: center;
  gap: 0.6rem;
}

.entreno-titulos {
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* «EVs» ocupa la columna de la barra y la del número */
.entreno-titulos .entreno-titulo-evs {
  grid-column: span 2;
}

/* El botón de al lado de «EVs» e «IVs»: todos al azar */
.entreno-azar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.3rem;
  padding: 0;
  border: none;
  border-radius: 0.3rem;
  background: var(--t-control);
  color: var(--t-texto);
  vertical-align: middle;
  cursor: pointer;
}

.entreno-azar:hover {
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
}

.entreno-azar .icono {
  width: 0.85rem;
  height: 0.85rem;
}

.entreno-titulos > span {
  display: inline-flex;
  align-items: center;
}

.entreno-stat {
  font-weight: bold;
}

.entreno-fila.sube .entreno-stat {
  color: #ff7a6b;
}

.entreno-fila.baja .entreno-stat {
  color: #6bb7ff;
}

.entreno-base {
  opacity: 0.7;
}

.entreno-fila input[type="number"] {
  width: 100%;
  box-sizing: border-box;
}

.entreno-ev-barra {
  width: 100%;
  accent-color: rgb(var(--color-vista));
  cursor: pointer;
}

.entreno-barra {
  height: 0.55rem;
  border-radius: 0.3rem;
  background: rgba(var(--t-oscurecer), 0.3);
  overflow: hidden;
}

.entreno-barra i {
  display: block;
  height: 100%;
  border-radius: 0.3rem;
  transition: width 0.15s;
}

.entreno-total {
  text-align: right;
  font-size: 1rem;
}

/* «Todas»: las seis a la vez */
.entreno-todas {
  margin-top: 0.2rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(var(--t-tinte), 0.15);
}

.entreno-todas .entreno-stat {
  opacity: 0.7;
}

@media (max-width: 760px) {
  .entreno-fila {
    grid-template-columns: 5.5rem 2.4rem minmax(4rem, 1fr) 3.6rem 3.4rem 2.6rem;
  }

  .entreno-fila .entreno-barra {
    display: none;
  }

  .entreno-titulos > :nth-child(5),
  .entreno-todas > :nth-child(6) {
    display: none;
  }
}

.tarjeta-der {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}

.fila-superior {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.ataques {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.campo,
.hueco {
  position: relative;
}

.campo input,
.hueco input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border-radius: 0.45rem;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  font-size: 0.93rem;
}

/* ---------- Tarjetas de ataque / habilidad / objeto ---------- */

.ataque {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.45rem;
  color: #fff;
  font-weight: bold;
  font-size: 0.93rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.ataque-nombre {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ataque-tipo {
  font-size: 0.7rem;
  text-transform: uppercase;
}

.pp {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* «−», «+» y la ✕: solo el símbolo, sin fondo; al pasar el ratón, un fondo suave (los PP) o
   rojo (la ✕) para que se vea que son botones */
.pp button {
  width: 1.5rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.85;
  cursor: pointer;
}

.pp button:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.pp-valor {
  display: inline-block;
  min-width: 3.15rem;
  text-align: center;
  font-size: 0.85rem;
}

.quitar {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  opacity: 0.8;
  cursor: pointer;
}

.quitar:hover {
  background: var(--t-rojo-oscuro);
  color: #fff;
  text-shadow: none;
  opacity: 1;
}

/* Habilidad y objeto: etiqueta arriba, nombre debajo */

.ataque.habilidad,
.ataque.objeto {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.45rem;
  color: var(--t-tinta-2);
  text-shadow: none;
}

.ataque.habilidad .ataque-tipo,
.ataque.objeto .ataque-tipo {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.65rem;
  text-align: left;
  opacity: 0.7;
}

.ataque.habilidad .ataque-nombre,
.ataque.objeto .ataque-nombre {
  grid-column: 1;
  grid-row: 2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.ataque.habilidad .quitar,
.ataque.objeto .quitar {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.ataque.habilidad {
  background: #c3d0e0;
}

.ataque.objeto {
  background: #d9dae0;
}

/* Icono de objeto */

.ataque.objeto {
  grid-template-columns: auto 1fr auto;
}

.ataque.objeto .icono-objeto {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 1.9rem;
  height: 1.9rem;
  object-fit: contain;
}

.ataque.objeto .ataque-tipo,
.ataque.objeto .ataque-nombre {
  grid-column: 2;
}

.ataque.objeto .quitar {
  grid-column: 3;
}

/* ---------- Mis equipos ---------- */

.barra-equipos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.barra-equipos {
  align-items: center;
}

/* Crear equipo: el primero y el único del color de la sección */
#crear-equipo-nuevo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.3rem;
  padding: 0 0.95rem;
  border: none;
  border-radius: 0.45rem;
  background: rgb(var(--color-vista));
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

#crear-equipo-nuevo:hover {
  background: color-mix(in srgb, rgb(var(--color-vista)) 80%, white);
}

#crear-equipo-nuevo .icono {
  width: 1.05rem;
  height: 1.05rem;
}

#nuevo-grupo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-panel);
  color: var(--t-texto);
  cursor: pointer;
}

#nuevo-grupo:hover {
  background: var(--t-control);
}

#nuevo-grupo .icono {
  width: 1.15rem;
  height: 1.15rem;
}



/* Las opciones del «⋯», hacia la derecha (el botón está a la izquierda de la barra) */
.barra-equipos .menu-mas-lista {
  left: 0;
  right: auto;
}

/* Ver en tarjetas o en lista: dos iconos en una tarjetita, a la derecha (también en «Amigos» y,
   detallados o resumidos, en «Lockes») */
:is(.vista-equipos, .amigos-vista, .lockes-vista) {
  position: relative;
  display: inline-flex;
  gap: 0.15rem;
  margin-left: auto;
  padding: 0.2rem;
  border-radius: 0.55rem;
  background: var(--t-panel);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* La sombra del elegido: una sola, que se desliza al otro botón al cambiar */
:is(.vista-equipos, .amigos-vista, .lockes-vista)::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 2.2rem;
  height: 1.9rem;
  border-radius: 0.4rem;
  background: var(--t-control);
  transition: transform 0.25s ease;
}

:is(.vista-equipos.en-lista, .amigos-vista.en-lista, .lockes-vista.resumidos)::before {
  transform: translateX(calc(2.2rem + 0.15rem));
}

@media (prefers-reduced-motion: reduce) {
  :is(.vista-equipos, .amigos-vista, .lockes-vista)::before {
    transition: none;
  }
}

:is(.vista-equipos, .amigos-vista, .lockes-vista) button {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--t-gris);
  cursor: pointer;
}

:is(.vista-equipos, .amigos-vista, .lockes-vista) button:hover {
  color: var(--t-texto);
}

:is(.vista-equipos, .amigos-vista, .lockes-vista) button.elegido {
  color: var(--t-texto);
  transition: color 0.25s;
}

:is(.vista-equipos, .amigos-vista, .lockes-vista) .icono {
  width: 1.1rem;
  height: 1.1rem;
}

#lista-equipos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Sin equipos guardados: un equipo «fantasma» con sus 6 huecos vacíos (js/equipos/mis-equipos.js) */
.equipos-vacio {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: min(34rem, 100%);
  box-sizing: border-box;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 0.7rem;
  background: var(--t-panel);
}

.equipos-vacio h3 {
  margin: 0;
  font-size: 1.35rem;
}

.equipos-vacio p {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--t-gris-2);
}

.equipos-vacio-huecos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
}

/* Como los huecos de «Crear equipo» (.tarjeta-vacia) */
.equipos-vacio-hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  border: 2px dashed rgba(var(--t-tinte), 0.15);
  border-radius: 0.6rem;
  background: transparent;
  color: rgba(var(--t-tinte), 0.3);
  cursor: pointer;
}

.equipos-vacio-hueco:hover {
  border-color: rgb(var(--color-vista));
  color: rgb(var(--color-vista));
}

.equipos-vacio-hueco .icono {
  width: 1.3rem;
  height: 1.3rem;
}

.equipos-vacio-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.equipos-vacio-botones button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}

.equipos-vacio-botones button:hover {
  background: var(--t-control-2);
}

.equipos-vacio-botones .equipos-vacio-crear {
  background: rgb(var(--color-vista));
  color: #fff;
}

.equipos-vacio-botones .equipos-vacio-crear:hover {
  background: color-mix(in srgb, rgb(var(--color-vista)) 80%, white);
}

.equipos-vacio-botones .icono {
  width: 1.05rem;
  height: 1.05rem;
}

/* Los equipos de un grupo (o los sueltos) */
.equipos-zona {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(34rem, 100%), 1fr));
  gap: 0.85rem;
}

/* Un grupo vacío: un hueco donde soltar equipos */
.equipos-zona:empty {
  min-height: 3.2rem;
  border: 2px dashed rgba(var(--t-tinte), 0.12);
  border-radius: 0.7rem;
}

.grupo-equipos.sueltos > .equipos-zona:empty {
  display: none;
}

.grupo-equipos.sueltos:has(> .grupo-cabecera) > .equipos-zona:empty {
  display: block;
}

/* ---------- Grupos ---------- */

.grupo-equipos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.grupo-equipos:not(.sueltos) {
  padding: 0.6rem;
  border-radius: 0.85rem;
  background: rgba(var(--t-tinte), 0.03);
  box-shadow: inset 0 0 0 1px rgba(var(--t-tinte), 0.06);
}

.grupo-equipos.plegado > .equipos-zona {
  display: none;
}

.grupo-cabecera {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.2rem;
  padding: 0 0.35rem;
  border-radius: 0.55rem;
  cursor: pointer;
  user-select: none;
}

.grupo-cabecera:not(.sin-grupo):hover {
  background: rgba(var(--t-tinte), 0.05);
}

.grupo-cabecera.sin-grupo {
  cursor: default;
  opacity: 0.75;
}

.grupo-flecha,
.grupo-icono {
  display: inline-flex;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.grupo-flecha .icono {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.15s;
}

.grupo-equipos.plegado .grupo-flecha .icono {
  transform: rotate(-90deg);
}

.grupo-icono .icono {
  width: 1.2rem;
  height: 1.2rem;
}

.grupo-nombre {
  margin: 0;
  min-width: 0;
  font-size: 1.05rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: text;
}

.grupo-cabecera.sin-grupo .grupo-nombre {
  cursor: default;
}

.grupo-nombre-campo {
  width: min(18rem, 60vw);
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(var(--color-vista), 0.6);
  border-radius: 0.4rem;
  background: var(--t-fondo-2);
  color: var(--t-texto);
  font: inherit;
}

.grupo-cuenta {
  flex: none;
  min-width: 1.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 1rem;
  background: rgba(var(--t-tinte), 0.08);
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
}

/* Plegado: el primer Pokémon de cada equipo, para reconocerlo */
.grupo-caras {
  display: none;
  flex: 1;
  min-width: 0;
  gap: 0.15rem;
  overflow: hidden;
}

.grupo-equipos.plegado .grupo-caras {
  display: flex;
}

.grupo-caras img {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(var(--t-tinte), 0.06);
  image-rendering: pixelated;
}

.grupo-botones {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.grupo-botones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.grupo-botones button:hover:not(:disabled) {
  background: var(--t-control-2);
}

.grupo-botones button:disabled {
  cursor: default;
  opacity: 0.4;
}

.grupo-botones .grupo-borrar:hover:not(:disabled) {
  background: var(--t-rojo-oscuro);
  color: #fff;
}

.grupo-botones .icono {
  width: 1.1rem;
  height: 1.1rem;
}

/* Mover un equipo a un grupo: el menú del botón de la carpeta */
.menu-grupos {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 16px));
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid rgba(var(--t-tinte), 0.1);
  border-radius: 0.6rem;
  background: var(--t-fondo-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.menu-grupos button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 0.4rem;
  background: none;
  color: var(--t-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-grupos button span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu-grupos button:hover {
  background: var(--t-control);
}

.menu-grupos button.actual {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  font-weight: bold;
}

.menu-grupos .icono {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.equipo-botones .mover {
  background: var(--t-control);
  color: var(--t-texto);
}

.equipo-botones .mover:hover {
  background: var(--t-control-2);
}

/* ---------- Modo lista: una fila por equipo, de lado a lado ---------- */

#lista-equipos.modo-lista .equipos-zona {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#lista-equipos.modo-lista .equipos-zona:empty {
  display: block;
}

#lista-equipos.modo-lista .grupo-equipos.sueltos:not(:has(> .grupo-cabecera)) > .equipos-zona:empty {
  display: none;
}

#lista-equipos.modo-lista .grupo-equipos.plegado > .equipos-zona {
  display: none;
}

#lista-equipos.modo-lista .equipo-guardado {
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.85rem;
}

#lista-equipos.modo-lista .miniatura-vacia {
  flex: none;
  width: 2.6rem;
}

/* Los iconos primero aunque en el HTML vayan detrás */
#lista-equipos.modo-lista .equipo-miniaturas {
  order: -1;
  flex: none;
}

#lista-equipos.modo-lista .equipo-miniaturas img {
  width: 2.6rem;
  max-width: none;
}

#lista-equipos.modo-lista .equipo-cabecera {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}

#lista-equipos.modo-lista .equipo-cabecera h3 {
  font-size: 1rem;
}

#lista-equipos.modo-lista .equipo-botones {
  margin-left: auto;
}

#lista-equipos > p {
  grid-column: 1 / -1;
}

.equipo-guardado {
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--t-panel);
  border-radius: 0.7rem;
  padding: 0.85rem;
}

/* Tarjeta que se está arrastrando para cambiarla de sitio */
.equipo-guardado.arrastrando {
  opacity: 0.4;
  outline: 2px dashed rgb(var(--color-vista));
}

.equipo-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
}

.equipo-cabecera h3 {
  margin: 0;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.fecha {
  font-size: 0.75rem;
  opacity: 0.7;
}

.equipo-botones {
  display: flex;
  gap: 0.45rem;
}

/* Cuadrados, que solo llevan un icono */
.equipo-botones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.45rem;
  cursor: pointer;
}

.equipo-botones .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.equipo-guardado:hover {
  outline: 2px solid rgba(var(--color-vista), 0.5);
}

/* Neutros, en su tarjetita; borrar se pone rojo al pasar el ratón */
.equipo-botones .exportar {
  background: var(--t-control);
  color: var(--t-texto);
}

.equipo-botones .exportar:hover {
  background: var(--t-control-2);
}

.equipo-botones .exportar:disabled {
  cursor: default;
}

.equipo-botones .borrar {
  background: var(--t-control);
  color: var(--t-texto);
}

.equipo-botones .borrar:hover {
  background: var(--t-rojo-oscuro);
  color: #fff;
}

.equipo-miniaturas {
  display: flex;
  gap: 0.3rem;
}

/* En tarjetas, una rejilla de 6 columnas que llena la tarjeta y que también ocupa la
   cabecera: así los botones acaban justo donde acaba el sexto Pokémon, sin hueco a la derecha */
#lista-equipos:not(.modo-lista) .equipo-guardado {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 0.3rem;
  row-gap: 0.6rem;
}

#lista-equipos:not(.modo-lista) .equipo-cabecera {
  grid-column: 1 / -1;
}

#lista-equipos:not(.modo-lista) .equipo-miniaturas {
  display: contents;
}

#lista-equipos:not(.modo-lista) :is(.equipo-miniaturas img, .miniatura-vacia) {
  width: 100%;
  max-width: none;
}

/* Los que faltan para los 6: como los huecos de «Crear equipo» */
.miniatura-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 5rem;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 2px dashed rgba(var(--t-tinte), 0.15);
  border-radius: 0.45rem;
  color: rgba(var(--t-tinte), 0.3);
}

.equipo-guardado:hover .miniatura-vacia {
  border-color: rgba(var(--color-vista), 0.6);
  color: rgb(var(--color-vista));
}

.miniatura-vacia .icono {
  width: 40%;
  height: 40%;
}

.equipo-miniaturas img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 5rem;
  background: rgba(var(--t-tinte), 0.05);
  border-radius: 0.45rem;
  padding: 0.2rem;
  box-sizing: border-box;
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.12s, background-color 0.12s, box-shadow 0.12s;
}

/* Al pasar por encima se resalta: pulsando cambia de cara (js/equipos/mis-equipos.js) */
.equipo-miniaturas img:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.12);
  background: rgba(var(--color-vista), 0.18);
  box-shadow: 0 0 0 2px rgba(var(--color-vista), 0.7), 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Pokémon con una sola cara: se sacude al pulsarlo */
.equipo-miniaturas img.sin-mas-caras {
  animation: sacudida 0.35s ease-in-out;
}

@keyframes sacudida {
  0%, 100% { translate: 0; }
  25% { translate: -0.2rem 0; }
  75% { translate: 0.2rem 0; }
}

/* Mientras mira qué caras tiene (solo la primera vez, un momento) */
.equipo-miniaturas img.cambiando-cara {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- Diálogos (importar paste y elegir forma) ---------- */

#importar-aceptar {
  background: var(--t-bien-oscuro);
  color: #fff;
}

#importar-cancelar,
#forma-cancelar {
  background: rgba(var(--t-tinte), 0.15);
  color: var(--t-texto-fuerte);
}

#importar-aceptar:disabled {
  opacity: 0.6;
  cursor: wait;
}

.forma-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.forma-opciones button {
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 0.45rem;
  background: rgb(var(--color-vista));
  color: var(--t-tinta-2);
  font-weight: bold;
  cursor: pointer;
}

.forma-opciones button:hover {
  background: #f7d44a;
}

/* La marcada con las flechas (Enter la elige) */
.forma-opciones button:focus {
  outline: 2px solid var(--t-texto);
  outline-offset: 2px;
  background: #f7d44a;
}
/* ---------- Pantallas estrechas (móvil) ---------- */

@media (max-width: 900px) {
  /* En una sola columna los seis no caben en una pantalla: aquí sí se deja bajar */
  #vista-crear {
    height: auto;
  }

  #resultado {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

}

@media (max-width: 760px) {
  .barra-superior {
    grid-template-columns: 1fr auto;
  }

  .buscador {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-wrap: wrap;
  }

  /* Sin hueco a la derecha: debajo del buscador */
  #aviso {
    position: static;
    transform: none;
    flex-basis: 100%;
  }
}

@media (max-width: 520px) {
  .tarjeta {
    flex-direction: column;
  }

  .tarjeta-izq {
    flex: none;
  }

  .tarjeta-izq img {
    max-width: 10rem;
    margin: 0 auto;
  }
}

/* ---------- Fichas de la tarjeta: stats base y ataques ---------- */

.tarjeta-izq img.arte {
  cursor: help;
}

.ficha-stats {
  /* algo más ancha que las demás fichas: ahora lleva también las debilidades */
  width: 19rem;
  background: var(--t-hundido);
  border: 1px solid rgba(var(--t-tinte), 0.12);
}

.ficha-stats .ficha-titulo {
  margin-bottom: 0.45rem;
}

.stat {
  display: grid;
  grid-template-columns: 4.6rem 2.2rem 1fr;
  align-items: center;
  gap: 0.45rem;
  padding: 0.12rem 0;
}

.stat-nombre {
  font-size: 0.8rem;
  opacity: 0.8;
}

.stat-valor {
  font-weight: bold;
  text-align: right;
}

.stat-barra {
  height: 0.55rem;
  border-radius: 0.3rem;
  background: rgba(var(--t-tinte), 0.1);
  overflow: hidden;
}

.stat-barra span {
  display: block;
  height: 100%;
  border-radius: 0.3rem;
}

.stat-total {
  margin-top: 0.3rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(var(--t-tinte), 0.12);
}

.stat-total .stat-nombre {
  font-weight: bold;
  opacity: 1;
}

/* Ficha de ataque: con el color de su tipo */
.ficha-ataque {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.ficha-ataque .ficha-tipo {
  margin-left: auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Categoría, potencia y precisión del ataque */
.ficha-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin-top: 0.45rem;
  font-size: 0.75rem;
  font-weight: bold;
  opacity: 0.9;
}

/* Ficha de habilidad u objeto */
.ficha-texto {
  background: var(--t-hundido);
  border: 1px solid rgba(var(--t-tinte), 0.12);
}

.ficha-texto .ficha-tipo {
  margin-left: auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.7;
}

.ficha-icono {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
}

/* ---------- Análisis del equipo (diálogo del botón «Analizar», js/equipos/analizar.js) ---------- */

/* Ancho, para verlo todo de golpe, y con aire arriba y abajo para que se vea que es una
   ventana. El título y «Cerrar» se quedan quietos: si algo no cabe, se desplaza el cuerpo. */
#dialogo-analisis {
  width: min(100rem, 96vw);
}

/* Lo mismo en «Buscar equipo» (js/equipos/buscar.js) */
#dialogo-buscar-equipo {
  width: min(80rem, 96vw);
}

:is(#dialogo-analisis, #dialogo-buscar-equipo) {
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
}

:is(#dialogo-analisis, #dialogo-buscar-equipo)[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:is(.analisis-cuerpo, .buscar-cuerpo) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

:is(#dialogo-analisis, #dialogo-buscar-equipo) h2 {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

/* El botón de una acción de la sección (como «Analizar»), junto a los grises de las ventanas
   (.boton-gris, en layout.css) */
.dialogo-sesion .boton-seccion {
  border: none;
  border-radius: 0.45rem;
  background: rgb(var(--color-vista));
  color: #fff;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}

.dialogo-sesion .boton-seccion:hover:not(:disabled) {
  background: color-mix(in srgb, rgb(var(--color-vista)) 80%, white);
}

.dialogo-sesion :is(.boton-seccion, .boton-gris):disabled {
  opacity: 0.6;
  cursor: default;
}

/* Los iconos de los botones de estas ventanas, del tamaño de la letra */
:is(#dialogo-analisis, #dialogo-buscar-equipo) button .icono {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
}

.analisis-mensaje {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

#dialogo-analisis .analisis-explica {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--t-gris);
  opacity: 1;
}

.analisis-bien {
  margin: 0;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

/* La nota grande del equipo y, al lado, lo que la forma */
.analisis-cabecera {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.analisis-nota {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 6rem;
}

.analisis-nota-numero {
  font-family: var(--letra-titulos);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
}

.analisis-nota-palabra {
  font-weight: bold;
  font-size: 0.9rem;
}

.analisis-cabecera .analisis-barras {
  flex: 1;
}

/* A la izquierda la nota, los avisos y los Pokémon; a la derecha, las tablas de cobertura y
   puntos débiles */
.analisis-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.6rem;
}

.analisis-principal {
  container-type: inline-size;
}

.analisis-arriba {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8rem;
  align-items: start;
}

/* Sin sitio para la nota y los avisos uno al lado del otro: uno debajo del otro */
@container (max-width: 42rem) {
  .analisis-arriba {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }
}

.analisis-seccion {
  margin-top: 1.2rem;
}

/* Lo que más conviene mirar, a la derecha de la nota, empieza a su altura */
.analisis-arriba > .analisis-seccion {
  margin-top: 0;
}

/* Para mejorarlo (a todo el ancho, entre la nota y los Pokémon): una tarjetita por cambio, en
   varias columnas como las de los Pokémon, con el retrato de quién, qué cambiar y lo que sube */
.analisis-mejoras-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 0.4rem 0.6rem;
}

.mejora {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  font-size: 0.82rem;
}

.mejora-retrato {
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  image-rendering: pixelated;
}

.mejora-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.mejora-quien {
  font-family: var(--letra-titulos);
  font-weight: 600;
  font-size: 0.9rem;
}

.mejora-texto b {
  white-space: nowrap;
}

.mejora-icono {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.2rem;
  vertical-align: -0.25rem;
  object-fit: contain;
}

.mejora-tipo .icono-tipo {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.2rem;
  vertical-align: -0.1rem;
  background: var(--color-tipo);
}

.mejora-sube {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  white-space: nowrap;
}

.mejora-sube b {
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.mejora-sube small {
  font-size: 0.72rem;
  color: var(--t-gris);
}

.analisis-seccion h3 {
  margin: 0 0 0.5rem;
  font-family: var(--letra-titulos);
  font-size: 1.15rem;
}

/* Barras de 0 a 100: nombre, barra y número */
.analisis-barras {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.analisis-barra {
  display: grid;
  grid-template-columns: 6.2rem 1fr 1.8rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.analisis-barra-nombre {
  color: var(--t-gris);
}

.analisis-barra-fondo {
  height: 0.45rem;
  border-radius: 0.25rem;
  background: rgba(var(--t-tinte), 0.1);
  overflow: hidden;
}

.analisis-barra-fondo i {
  display: block;
  height: 100%;
}

.analisis-barra-valor {
  font-family: var(--letra-titulos);
  font-weight: 600;
  text-align: right;
}

/* Lo que más conviene mirar: un punto naranja (rojo si es grave) delante */
.analisis-avisos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.analisis-avisos li {
  position: relative;
  padding-left: 1.1rem;
}

.analisis-avisos li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.5em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #e67e22;
}

.analisis-avisos li.grave::before {
  background: var(--t-rojo);
}

/* Cada Pokémon: retrato, nota, barras y el porqué */
.analisis-miembros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 0.6rem;
}

.analisis-miembro {
  display: flex;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--t-fondo-2);
}

/* En la tarjeta, la barra se lleva más sitio que el nombre */
.analisis-miembro .analisis-barra {
  grid-template-columns: 4.6rem 1fr 1.6rem;
  gap: 0.4rem;
}

.analisis-retrato {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.5rem;
  image-rendering: pixelated;
}

.analisis-miembro-datos {
  flex: 1;
  min-width: 0;
}

.analisis-miembro-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 0.6rem;
  margin-bottom: 0.3rem;
}

.analisis-miembro-cabeza strong {
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
}

.analisis-miembro-nota {
  font-weight: bold;
  font-size: 0.85rem;
}

.analisis-notas {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 0.82rem;
}

.analisis-notas li {
  position: relative;
  padding-left: 1rem;
}

.analisis-notas li::before {
  content: "·";
  position: absolute;
  left: 0.15rem;
  font-weight: bold;
  color: var(--t-gris);
}

.analisis-notas li.bien::before {
  content: "+";
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.analisis-notas li.mal::before {
  content: "−";
  color: var(--t-rojo);
}

/* Cobertura y puntos débiles: dos tablas con una fila por cada uno de los 18 tipos, en el
   mismo orden (cada tipo queda a la misma altura en las dos). A la derecha de los Pokémon,
   van desde arriba hasta donde acaban ellos: las filas «flotan» dentro de su caja (position:
   absolute) para no estirar la rejilla y se reparten el alto (con un mínimo, por si el equipo
   es corto). El título, la explicación y las filas de las dos comparten las filas de
   .analisis-tablas (subgrid): empiezan a la misma altura aunque una explicación sea más larga. */
.analisis-tablas {
  display: grid;
  grid-template-columns: repeat(2, 20.5rem);
  grid-template-rows: auto auto 1fr;
  column-gap: 1.2rem;
}

.analisis-tabla {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}

.analisis-tabla h3 {
  margin: 0 0 0.3rem;
  font-family: var(--letra-titulos);
  font-size: 1.15rem;
}

#dialogo-analisis .analisis-tabla .analisis-explica {
  margin: 0;
}

.analisis-tabla-caja {
  position: relative;
  min-height: 30rem;
  margin-top: 0.6rem;
}

.analisis-filas {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(18, minmax(0, 1fr));
  gap: 0.2rem;
}

/* Cada fila: la capa de color del tipo, su icono, su nombre, el detalle (quién le hace más
   daño, o cuántos son débiles y cuántos lo aguantan) y el valor (el % o la barra) */
.analisis-fila {
  display: grid;
  grid-template-columns: auto 4.6rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.45rem;
  padding: 0 0.55rem;
  border-left: 0.3rem solid var(--color-tipo);
  border-radius: 0.45rem;
  background: var(--t-fondo-2);
}

.analisis-fila .icono-tipo {
  width: 1.05rem;
  height: 1.05rem;
  background: var(--color-tipo);
}

.fila-tipo {
  font-weight: bold;
  font-size: 0.82rem;
}

.fila-detalle {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--t-gris);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fila-valor {
  font-family: var(--letra-titulos);
  font-weight: 600;
  font-size: 0.9rem;
}

.cobertura.fuerte .fila-valor {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.cobertura.flojo .fila-valor {
  color: var(--t-rojo);
}

/* Puntos débiles: cuántos son débiles, en negrita (naranja si son 2, rojo si son 3 o más, y
   apagado si no hay ninguno); cuántos lo aguantan, en rojo si nadie y hay débiles; y la barra
   de cuántos son débiles */
.defensa-debiles {
  color: var(--t-texto);
}

.defensa.sin-debiles .defensa-debiles {
  color: inherit;
  font-weight: normal;
}

.defensa.aviso .defensa-debiles {
  color: #e67e22;
}

.defensa.critico .defensa-debiles,
.defensa.sin-aguante .defensa-aguantan {
  color: var(--t-rojo);
}

.defensa-barra {
  width: 2.5rem;
  height: 0.45rem;
  border-radius: 0.25rem;
  background: rgba(var(--t-tinte), 0.1);
  overflow: hidden;
}

.defensa-barra i {
  display: block;
  height: 100%;
  background: var(--t-gris);
}

.defensa.aviso .defensa-barra i {
  background: #e67e22;
}

.defensa.critico .defensa-barra i {
  background: var(--t-rojo);
}

/* Sin sitio para las dos tablas al lado de los Pokémon: debajo, una junto a la otra */
@media (max-width: 1340px) {
  .analisis-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .analisis-tablas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analisis-tabla-caja {
    min-height: 0;
  }

  .analisis-filas {
    position: static;
    grid-template-rows: none;
    grid-auto-rows: 1.7rem;
  }
}

/* En el móvil, una tabla debajo de la otra */
@media (max-width: 640px) {
  .analisis-tablas {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 1.2rem;
  }

  .analisis-tabla {
    grid-row: auto;
    grid-template-rows: none;
  }
}

@media (max-width: 560px) {
  .analisis-cabecera {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .analisis-barra {
    grid-template-columns: 5.2rem 1fr 1.8rem;
  }
}

/* ---------- Buscar equipo (js/equipos/buscar.js) ---------- */

/* Con la caja, la ventana tiene un alto fijo (como la de la partida de un locke): a la
   izquierda la caja, que se desplaza sola, y a la derecha la ficha del Pokémon elegido */
#dialogo-buscar-equipo.con-caja {
  width: min(96rem, 96vw);
  height: calc(100vh - 4rem);
  height: calc(100dvh - 4rem);
}

#dialogo-buscar-equipo .buscar-cuerpo {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.buscar-rejilla {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25rem;
  gap: 1rem;
}

.buscar-principal {
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.4rem;
}

/* El panel de la derecha, como el del editor de la partida */
.buscar-lado {
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem;
  border-radius: 0.6rem;
  background: rgba(var(--t-oscurecer), 0.18);
}

.buscar-lado-reposo {
  margin: 0;
  font-size: 0.88rem;
  color: var(--t-gris);
}

/* La ✕ del panel: solo cuando va por encima de la caja (pantallas estrechas) */
.buscar-lado-cerrar {
  display: none;
}

/* Arriba: el locke (con su etiqueta encima, como en las demás ventanas) y de dónde sale la caja */
.buscar-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1.4rem;
}

#dialogo-buscar-equipo .buscar-elegir {
  margin-top: 0;
}

.buscar-elegir select {
  min-width: 12rem;
  max-width: 20rem;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: 0.45rem;
  color: var(--t-texto);
  font-size: 0.95rem;
  cursor: pointer;
}

#dialogo-buscar-equipo .buscar-fuente {
  flex: 1 1 20rem;
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: var(--t-gris);
  opacity: 1;
}

.buscar-fuente .boton-gris {
  margin-left: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
}

/* Lo que se puede dejar sin contar (EVs, IVs, naturaleza): en una fila, con su título al lado */
.buscar-ajustes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.2rem;
  margin: 0.7rem 0 0;
  padding: 0;
  border: none;
}

.buscar-ajustes legend {
  float: left;
  margin-right: 0.2rem;
  padding: 0;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t-gris);
}

#dialogo-buscar-equipo .buscar-ajustes label.casilla-sesion {
  margin-top: 0;
  font-size: 0.85rem;
}

/* La caja: cada Pokémon, con lo que se pulsa para ver su ficha y, en las esquinas de arriba,
   los botoncitos de dejarlo fuera (izquierda) y fijarlo (derecha) */
.buscar-caja {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.4rem;
}

.buscar-ficha {
  position: relative;
  display: flex;
  border: 2px solid transparent;
  border-radius: 0.6rem;
  background: var(--t-fondo-2);
}

.buscar-ficha:hover {
  border-color: rgba(var(--t-tinte), 0.18);
}

.buscar-ficha.elegida {
  border-color: rgba(var(--t-tinte), 0.55);
}

.buscar-ficha.fijo {
  border-color: rgb(var(--color-vista));
}

.buscar-ficha.fuera .buscar-ficha-ver {
  opacity: 0.4;
}

:is(.buscar-ficha-ver, .buscar-mini) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.35rem 0.35rem;
  border: none;
  background: none;
  color: var(--t-texto);
  font: inherit;
  cursor: pointer;
}

:is(.buscar-dejar, .buscar-fijar) {
  position: absolute;
  top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: var(--t-control);
  color: var(--t-gris);
  cursor: pointer;
}

.buscar-dejar {
  left: 0.25rem;
}

.buscar-fijar {
  right: 0.25rem;
}

:is(.buscar-dejar, .buscar-fijar) .icono {
  width: 0.8rem;
  height: 0.8rem;
}

:is(.buscar-dejar, .buscar-fijar):hover {
  background: var(--t-control-2);
  color: var(--t-texto);
}

.buscar-fijar.activo {
  background: rgb(var(--color-vista));
  color: #fff;
}

.buscar-dejar.activo {
  background: var(--t-rojo-oscuro);
  color: #fff;
}

.buscar-retrato {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.45rem;
  image-rendering: pixelated;
}

.buscar-ficha-nombre {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--letra-titulos);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.buscar-ficha-datos {
  font-size: 0.72rem;
  color: var(--t-gris);
}

.buscar-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

/* Del tamaño de «Analizar» y «Buscar equipo» de la barra de arriba */
#dialogo-buscar-equipo :is(.buscar-acciones, .buscar-propuesta-botones) button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.92rem;
  white-space: nowrap;
}

.buscar-cuenta {
  font-size: 0.85rem;
  color: var(--t-gris);
}

/* Los equipos propuestos: la nota, los seis (que también abren su ficha) y los botones */
.buscar-propuestas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.buscar-propuesta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.6rem;
  background: var(--t-fondo-2);
}

.buscar-propuesta .analisis-nota {
  min-width: 4.5rem;
}

.buscar-propuesta .analisis-nota-numero {
  font-size: 2.3rem;
}

.buscar-propuesta .analisis-nota-palabra {
  font-size: 0.8rem;
}

.buscar-propuesta-pokemon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.3rem;
}

.buscar-mini {
  position: relative;
  width: 100%;
  padding: 0.3rem 0.2rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
}

.buscar-mini:hover {
  border-color: rgba(var(--t-tinte), 0.18);
}

.buscar-mini.elegida {
  border-color: rgba(var(--t-tinte), 0.55);
}

.buscar-marca {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
  display: flex;
  color: rgb(var(--color-vista));
}

.buscar-marca .icono {
  width: 0.9rem;
  height: 0.9rem;
}

.buscar-propuesta-botones {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ---------- La ficha del Pokémon elegido (en el panel de la derecha) ---------- */

.buscar-lado-cabeza {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.buscar-lado-retrato {
  width: 4rem;
  height: 4rem;
  border-radius: 0.6rem;
  image-rendering: pixelated;
}

.buscar-lado-nombre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.buscar-lado-nombre h3 {
  margin: 0;
  overflow: hidden;
  max-width: 100%;
  font-size: 1.3rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.buscar-lado-nombre > span {
  font-size: 0.8rem;
  color: var(--t-gris);
}

.buscar-lado-nombre .chips {
  justify-content: flex-start;
}

.buscar-lado .analisis-nota {
  min-width: 0;
}

.buscar-lado .analisis-nota-numero {
  font-size: 2.2rem;
}

.buscar-lado .analisis-nota-palabra {
  font-size: 0.78rem;
}

.buscar-lado h4 {
  margin: 1rem 0 0.4rem;
  font-family: var(--letra-titulos);
  font-size: 1rem;
}

/* Habilidad y objeto, uno al lado del otro, y debajo los cuatro ataques (como en las tarjetas
   de «Crear equipo») */
.buscar-lado-cosas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.buscar-lado-ataques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.buscar-lado-ataques .ataque {
  font-size: 0.85rem;
}

.buscar-lado-ataques .ataque-tipo {
  font-size: 0.62rem;
  white-space: nowrap;
}

.buscar-ataque-sin-tipo,
.buscar-ataque-vacio {
  background: var(--t-control);
}

.buscar-ataque-vacio {
  justify-content: center;
  color: var(--t-gris);
  text-shadow: none;
}

/* Las estadísticas: la barra es la base (como en las fichas), el número la de verdad (con su
   nivel, naturaleza, IVs y EVs) */
.buscar-lado-stats {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.buscar-stat {
  display: grid;
  grid-template-columns: 5.6rem 1fr 2.2rem auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.buscar-stat-nombre {
  color: var(--t-gris);
  white-space: nowrap;
}

.buscar-stat-valor {
  font-family: var(--letra-titulos);
  font-weight: 600;
  text-align: right;
}

.buscar-stat-extra {
  min-width: 6.5rem;
  font-size: 0.72rem;
  color: var(--t-gris);
  white-space: nowrap;
}

/* En pantallas estrechas: la caja ocupa todo y la ficha sale por encima, con su ✕ */
@media (max-width: 900px) {
  .buscar-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .buscar-lado {
    display: none;
  }

  .buscar-rejilla.con-ficha .buscar-lado {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    background: var(--t-panel);
    box-shadow: 0 0 0 1px rgba(var(--t-tinte), 0.08);
  }

  .buscar-lado-cerrar {
    float: right;
    display: flex;
    padding: 0.35rem;
    border: none;
    border-radius: 0.4rem;
    background: var(--t-control);
    color: var(--t-texto);
    cursor: pointer;
  }

  .buscar-lado-cerrar .icono {
    width: 1rem;
    height: 1rem;
  }
}

@media (max-width: 760px) {
  .buscar-propuesta {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .buscar-propuesta-pokemon {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .buscar-propuesta-botones {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------- Debilidades en la ficha de cada Pokémon ---------- */

/* Las líneas que separan Total, Débil, Resiste e Inmune tienen el mismo hueco que la que
   separa las estadísticas del Total: 0.3rem por encima y 0.4rem por debajo. */
.ficha-tipos {
  margin-top: 0.3rem; /* + los 0.12rem de debajo del Total = igual que encima de su línea */
  border-top: 1px solid rgba(var(--t-tinte), 0.12);
  display: flex;
  flex-direction: column;
}

.ficha-tipos-fila {
  padding-top: 0.4rem;
}

/* 0.42rem = los 0.3rem de margen + los 0.12rem que deja debajo cada fila de estadística */
.ficha-tipos-fila + .ficha-tipos-fila {
  margin-top: 0.42rem;
  border-top: 1px solid rgba(var(--t-tinte), 0.12);
}

.ficha-tipos-fila {
  display: grid;
  grid-template-columns: 4.3rem 1fr;
  align-items: start;
  gap: 0.45rem;
}

.ficha-tipos-titulo {
  font-size: 0.78rem;
  opacity: 0.75;
}

.ficha-tipos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.marca-tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.16rem 0.4rem;
  border-radius: 0.35rem;
  font-size: 0.82rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.marca-tipo .icono-tipo {
  width: 0.82rem;
  height: 0.82rem;
}

/* Los iconos de macho y hembra, con trazo grueso para que se lean bien */
.btn-genero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-genero .icono {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2.8;
}

/* ---------- Sombras de la tarjeta de un Pokémon y de sus partes ---------- */

.tarjeta:not(.tarjeta-vacia) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.tarjeta .ataque,
.tarjeta .abrir-entreno,
.tarjeta .quitar-pokemon {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Las tarjetas de ataque, habilidad y objeto se pulsan para escribir otro encima */
.ataque.cambiable {
  cursor: pointer;
}