/* =========================================================
   Justina · vistas
   Solo layout de cada pantalla. Nada de colores ni formas
   nuevas acá: eso vive en tokens.css / componentes.css.
   ========================================================= */

/* ---------- Cargando / error inicial ---------- */

.cargando__ayuda {
  margin-top: var(--esp-4);
  color: var(--color-tinta-suave);
  opacity: 0;
  animation: aparecer var(--dur-media) ease 2.5s forwards;
}

@keyframes aparecer {
  to {
    opacity: 1;
  }
}

/* ---------- Inicio ---------- */

.inicio {
  display: grid;
  gap: var(--esp-7);
  margin-top: var(--esp-7);
}

@media (min-width: 960px) {
  .inicio {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
}

.grilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: start;
  gap: var(--esp-5);
}

.inicio__lateral {
  display: grid;
  gap: var(--esp-6);
  padding-top: var(--esp-3);
}

@media (min-width: 960px) {
  .inicio__lateral {
    position: sticky;
    top: var(--esp-5);
    padding-top: calc(var(--texto-xl) * 1.2 + var(--esp-5) + var(--esp-3));
  }
}

.mas {
  margin-top: var(--esp-3);
  font-size: var(--texto-s);
  color: var(--color-tinta-suave);
}

/* ---------- Ficha de planta ---------- */

.migas {
  margin-bottom: var(--esp-5);
}

.migas + .dialogo {
  margin-bottom: var(--esp-6);
}

.entrada.panel {
  display: grid;
  overflow: hidden;
  padding: 0;
}

.entrada__habitat {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: var(--esp-7) var(--esp-4) var(--esp-5);
  border-bottom: var(--trazo) solid var(--color-trazo);
}

.entrada__habitat--sin-foto {
  min-height: calc(var(--esp-8) * 3 + var(--esp-7));
}

.entrada__habitat--sin-foto .sprite {
  --tam: calc(var(--esp-7) * 3);
}

.entrada__habitat .numero {
  position: absolute;
  top: var(--esp-4);
  left: var(--esp-4);
  font-size: var(--texto-m);
}

.entrada__info {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-4);
}

@media (min-width: 600px) {
  .entrada__info {
    padding: var(--esp-6);
  }
}

@media (min-width: 800px) {
  .entrada.panel {
    grid-template-columns: minmax(300px, 0.85fr) 1.15fr;
  }

  .entrada__habitat {
    border-bottom: 0;
    border-right: var(--trazo) solid var(--color-trazo);
  }
}

.entrada__titulos {
  display: grid;
  gap: var(--esp-1);
}

.entrada__nombre {
  font-size: clamp(var(--texto-2xl), 1.2rem + 2.4vw, 2.625rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.entrada__cientifico {
  font-style: italic;
  color: var(--color-tinta-suave);
}

.entrada__categoria {
  font-family: var(--fuente-pixel);
  font-weight: 700;
  color: var(--color-acento-texto);
}

.entrada__estado {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--esp-3) var(--esp-5);
}

.entrada__estado .estado {
  flex: 1 1 200px;
}

.ficha__columnas {
  display: grid;
  gap: var(--esp-7);
  margin-top: var(--esp-8);
}

@media (min-width: 900px) {
  .ficha__columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--esp-6);
  }
}

.ficha__columna {
  display: grid;
  gap: var(--esp-7);
}