/* ==========================================
   Dashboard (pantalla principal tras la intro)
   Qué cubre: Cabecera, columna lateral (crisis, recursos, insignias, recompensas), banner del mapa, empresas, herramientas, Social Lounge y la compactación sin scroll.
   La parte final («DASHBOARD COMPACTO») redefine tamaños de las reglas anteriores a propósito: debe ir al final de este archivo.
   Orden de carga: ver ESTRUCTURA.md (este archivo es el nº 3 de 12).
   Secciones:
     · DASHBOARD COMPACTO — TODO VISIBLE SIN SCROLL DE PÁGINA
   ========================================== */

/* Layout Principal de la Sección */
.pantalla-dashboard {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: var(--atx-bg-app);
  color: var(--atx-text-dark);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1.5rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-y: auto;
}

/* 1. HEADER SUPERIOR */
.header-dashboard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--atx-panel-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 25px var(--atx-sombra);
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-dashboard {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.titulo-proyecto {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--atx-accent-teal-dark);
}

.subtitulo-proyecto {
  margin: 0;
  font-size: 0.75rem;
  color: var(--atx-text-muted);
  letter-spacing: 1px;
}

.mision-banner {
  text-align: center;
  max-width: 500px;
}

.mision-banner h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--atx-accent-amber-dark);
  letter-spacing: 1px;
}

.mision-banner p {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  color: var(--atx-text-muted);
}

.perfil-equipo {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--atx-panel-bg-suave);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--atx-panel-border);
}

.info-perfil {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.nombre-equipo {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--atx-text-dark);
}

/* Título honorífico comprado en la Tienda (itemsOpcionalesTiendaEtapa1,
   tipo 'titulo') — solo visible si el estudiante lo compró, ver
   actualizarInsigniaTituloDashboard() en dashboard.js. */
.insignia-titulo-comprado {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--atx-accent-amber);
  color: var(--atx-accent-amber-dark);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.nivel-usuario {
  font-size: 0.75rem;
  color: var(--atx-text-muted);
  display: inline-block;
}

.nivel-usuario.subio-nivel {
  animation: atxNivelSubio 1.3s ease-out;
}

.xp-mini-bar {
  width: 100px;
  height: 8px;
  background: var(--atx-track-bg);
  border-radius: 4px;
  margin: 4px 0;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(30, 27, 58, 0.12);
}

.xp-mini-fill {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, var(--atx-accent-pink), var(--atx-accent-teal), var(--atx-accent-cyan), var(--atx-accent-pink));
  background-size: 300% 100%;
  animation: atxXpFluir 4s linear infinite;
  transition: width 0.5s ease-in-out;
}

.xp-mini-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  filter: blur(2px);
  animation: atxXpDestello 2.2s ease-in-out infinite;
}

.xp-mini-fill.xp-pulso {
  animation: atxXpFluir 4s linear infinite, atxXpPulso 0.9s ease-out;
}

@keyframes atxXpFluir {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes atxXpDestello {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}

@keyframes atxXpPulso {
  0% { box-shadow: 0 0 0 rgba(236, 72, 153, 0); }
  35% { box-shadow: 0 0 14px 4px rgba(236, 72, 153, 0.65); }
  100% { box-shadow: 0 0 0 rgba(236, 72, 153, 0); }
}

@keyframes atxNivelSubio {
  0% { color: var(--atx-text-muted); transform: scale(1); text-shadow: none; }
  20% { color: var(--atx-accent-pink); transform: scale(1.18); text-shadow: 0 0 10px rgba(236, 72, 153, 0.7); }
  55% { color: var(--atx-accent-teal); transform: scale(1.1); text-shadow: 0 0 8px rgba(139, 92, 246, 0.6); }
  100% { color: var(--atx-text-muted); transform: scale(1); text-shadow: none; }
}

.xp-texto-mini {
  font-size: 0.7rem;
  color: var(--atx-text-muted);
  font-variant-numeric: tabular-nums;
}

.avatar-equipo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--atx-accent-teal);
}

/* 2. GRID PRINCIPAL */
.grid-dashboard {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto auto auto;
  gap: 1.5rem;
}

/* Tarjetas Generales */
.card-panel {
  background: var(--atx-panel-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 8px 20px var(--atx-sombra);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.titulo-seccion-panel {
  margin: 0 0 1rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--atx-accent-teal-dark);
  letter-spacing: 1px;
}

/* PANEL LATERAL (IZQUIERDA) */
.panel-lateral {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.item-crisis {
  margin-bottom: 0.8rem;
}

.encabezado-crisis {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: var(--atx-text-dark);
}

.barra-progreso-bg {
  width: 100%;
  height: 8px;
  background: var(--atx-track-bg);
  border-radius: 4px;
  overflow: hidden;
}

.barra-progreso-fill {
  height: 100%;
  transition: width 0.5s ease-in-out;
}

.bg-rojo { background: #ef4444; }
.bg-naranja { background: var(--atx-accent-amber); }
.bg-azul { background: var(--atx-accent-teal); }

/* Recuadros Recurso (ATOMICASH / XP) */
.card-recurso {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--atx-panel-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  padding: 1rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-recurso:hover {
  transform: translateY(-2px);
  border-color: var(--atx-accent-amber);
  box-shadow: 0 10px 22px var(--atx-sombra);
}

.icon-recurso {
  font-size: 2rem;
}

.datos-recurso {
  display: flex;
  flex-direction: column;
}

.label-recurso {
  font-size: 0.75rem;
  color: var(--atx-text-muted);
  font-weight: 700;
}

.valor-recurso {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--atx-text-dark);
}

.subtext-recurso {
  font-size: 0.7rem;
  color: var(--atx-text-muted-suave);
}

/* Insignias */
.grid-insignias {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.tabla-recompensas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fila-recompensa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--atx-panel-bg-suave);
  border: 1px solid var(--atx-panel-border);
  border-radius: 8px;
  font-size: 0.76rem;
}

.fila-recompensa span {
  color: var(--atx-text-muted);
}

.fila-recompensa strong {
  color: var(--atx-accent-amber-dark);
  white-space: nowrap;
  font-size: 0.74rem;
}

.insignia-item {
  width: 100%;
  aspect-ratio: 1;
  background: var(--atx-panel-bg-suave);
  border: 1px solid var(--atx-panel-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.insignia-item:hover {
  transform: translateY(-2px);
  border-color: var(--atx-accent-teal);
}

.insignia-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.insignia-item.bloqueada img {
  filter: grayscale(100%) opacity(0.3);
}

.insignia-item.activa {
  border-color: var(--atx-accent-amber);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}

.insignia-item.activa:hover {
  transform: translateY(-2px) scale(1.03);
}

/* 3. ÁREA DEL MAPA DE LA CIUDAD (CENTRO SUPERIOR) */
.area-mapa {
  background: var(--atx-panel-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 20px var(--atx-sombra);
}

.modal-footer .btn-principal:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(40%);
  transform: none;
  box-shadow: none;
}

/* 4. ÁREA INFERIOR (EMPRESAS Y HERRAMIENTAS) */
.area-inferior {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Panel Empresas */
.grid-empresas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.card-empresa {
  background: var(--atx-panel-bg-suave);
  border: 1px solid var(--atx-panel-border);
  border-radius: 8px;
  padding: 0.8rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-empresa:hover {
  border-color: var(--atx-accent-teal);
  transform: translateY(-2px);
}

.card-empresa.seleccionada {
  border: 2px solid var(--atx-accent-green);
  background: rgba(16, 185, 129, 0.08);
}

.logo-empresa {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-bottom: 4px;
}

.card-empresa h5 {
  margin: 4px 0;
  font-size: 0.8rem;
  color: var(--atx-text-dark);
}

.card-empresa p {
  margin: 0 0 8px 0;
  font-size: 0.68rem;
  color: var(--atx-text-muted);
  line-height: 1.2;
}

.img-equipo-mini {
  display: block;
  width: 60px;
  height: 60px;
  margin: 8px auto 0;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--atx-panel-border);
}

/* Panel Herramientas (ahora .panel-herramientas y .panel-simuladores-futuro, ver el bloque compacto del final) */
.grid-herramientas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.btn-herramienta {
  background: var(--atx-panel-bg-suave);
  border: 1px solid var(--atx-panel-border);
  border-radius: 8px;
  padding: 0.6rem;
  color: var(--atx-text-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-herramienta:hover {
  background: var(--atx-accent-teal);
  color: #ffffff;
  border-color: var(--atx-accent-teal);
  transform: translateY(-2px);
}

.btn-herramienta img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.btn-herramienta span {
  font-size: 0.72rem;
  font-weight: 600;
}

.subtitulo-simuladores {
  margin: 0 0 0.6rem 0;
  font-size: 0.75rem;
  color: var(--atx-text-muted);
  letter-spacing: 0.5px;
}

.grid-cards-futuro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.card-futuro {
  background: var(--atx-panel-bg-suave);
  border: 1px solid var(--atx-panel-border);
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card-futuro:hover {
  border-color: var(--atx-accent-amber);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px var(--atx-sombra);
}

.card-futuro img {
  width: 100%;
  height: 45px;
  object-fit: cover;
}

.card-futuro p {
  margin: 4px 0;
  font-size: 0.65rem;
  color: var(--atx-text-muted);
}

/* 5. FOOTER DASHBOARD */
.footer-dashboard {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.card-footer-item {
  background: var(--atx-panel-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 8px 20px var(--atx-sombra);
}

.social-lounge {
  border-left: 4px solid var(--atx-accent-teal);
}

.icon-social {
  font-size: 1.8rem;
}

.textos-social strong, .textos-objetivo strong {
  font-size: 0.8rem;
  color: var(--atx-accent-teal-dark);
  letter-spacing: 0.5px;
}

.textos-social p, .textos-objetivo p {
  margin: 4px 0 0 0;
  font-size: 0.75rem;
  color: var(--atx-text-muted);
}

.btn-padlet {
  background: var(--atx-accent-teal);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-padlet:hover {
  background: var(--atx-accent-teal-dark);
  transform: translateY(-1px);
}

.img-planeta-objetivo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* ==========================================
   DASHBOARD COMPACTO — TODO VISIBLE SIN SCROLL DE PÁGINA
   Este bloque va al final a propósito: sobrescribe por cascada los
   tamaños de arriba para que el dashboard quepa en la pantalla (a partir
   de 1100 px de ancho y 640 px de alto). Distribución:
     · columna izquierda: recursos, crisis, insignias y escala de recompensas
       (ocupa todo el alto);
     · columna derecha: banner del mapa (arriba), empresas y herramientas
       (centro, ocupa el alto sobrante) y barra del Social Lounge (abajo).
   Los tamaños usan clamp() con vh/vw para escalar entre 1366×768 y
   1920×1080. En pantallas pequeñas se devuelve el scroll normal (ver el
   @media del final). Letra mínima 0.75rem.
   ========================================== */

.pantalla-dashboard {
  padding: clamp(0.5rem, 1.4vh, 1rem) clamp(0.6rem, 1.2vw, 1rem);
  gap: clamp(0.4rem, 1vh, 0.75rem);
  overflow: hidden;
}

/* Cabecera */
.header-dashboard {
  flex: 0 0 auto;
  padding: clamp(0.35rem, 0.9vh, 0.7rem) 1rem;
  margin-bottom: 0;
  border-radius: 10px;
}

.logo-area { gap: 0.7rem; }
.logo-dashboard { width: 38px; height: 38px; }
.titulo-proyecto { font-size: 1.3rem; }
.mision-banner { max-width: 640px; }
.mision-banner h2 { font-size: 1rem; }
.mision-banner p { margin-top: 2px; font-size: 0.75rem; line-height: 1.25; }
.perfil-equipo { padding: 0.35rem 0.7rem; gap: 0.7rem; }
.avatar-equipo-img { width: 38px; height: 38px; }
.xp-mini-bar { margin: 2px 0; }

/* Cuadrícula principal: columna izquierda a todo el alto y columna derecha en 3 filas */
.grid-dashboard {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: clamp(250px, 21vw, 320px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    'lateral mapa'
    'lateral inferior'
    'lateral pie';
  gap: clamp(0.5rem, 1.2vh, 0.9rem);
}

.panel-lateral {
  grid-area: lateral;
  min-height: 0;
  gap: clamp(0.4rem, 0.9vh, 0.7rem);
  overflow-y: auto;            /* red de seguridad: si no cabe, scroll solo aquí, no en la página */
  scrollbar-width: thin;
}

/* Las 5 tarjetas se reparten el alto de la columna (con pesos): así su borde
   inferior queda alineado con la barra del Social Lounge de la derecha y la
   columna se ve parte del dashboard, no un índice aparte. */
.panel-lateral > .card-panel,
.panel-lateral > .card-recurso { flex: 1 1 auto; }
.panel-lateral > :nth-child(1) { flex-grow: 1.3; }
.panel-lateral > :nth-child(2),
.panel-lateral > :nth-child(3) { flex-grow: 0.9; }
.panel-lateral > :nth-child(4) { flex-grow: 1; }
.panel-lateral > :nth-child(5) { flex-grow: 1.4; }
.panel-lateral > .card-panel { display: flex; flex-direction: column; }
.panel-lateral .titulo-seccion-panel { flex: 0 0 auto; }
.panel-lateral > .card-panel .item-crisis { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; }
.panel-lateral .grid-insignias { flex: 1; align-content: center; }
.panel-lateral .tabla-recompensas { flex: 1; justify-content: space-evenly; }

.area-mapa { grid-area: mapa; padding: 0.4rem; border-radius: 10px; }
.area-inferior {
  grid-area: inferior;
  min-height: 0;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    'herr herr'
    'emp fut';
  gap: clamp(0.5rem, 1.2vh, 0.9rem);
}
.panel-herramientas { grid-area: herr; }
.panel-empresas { grid-area: emp; }
.panel-simuladores-futuro { grid-area: fut; }
.footer-dashboard { grid-area: pie; gap: clamp(0.5rem, 1.2vh, 0.9rem); }

/* Tarjetas generales */
.card-panel {
  padding: clamp(0.5rem, 1.1vh, 0.85rem) clamp(0.6rem, 1vw, 0.9rem);
  border-radius: 10px;
}

.titulo-seccion-panel {
  margin-bottom: clamp(0.3rem, 0.8vh, 0.55rem);
  font-size: 0.78rem;
}

/* Solución a crisis */
.item-crisis { margin-bottom: clamp(0.3rem, 0.8vh, 0.6rem); }
.item-crisis:last-child { margin-bottom: 0; }
.encabezado-crisis { font-size: 0.78rem; margin-bottom: 2px; }
.barra-progreso-bg { height: 7px; }

/* ATOMICASH y XP */
.card-recurso { padding: clamp(0.4rem, 0.9vh, 0.7rem) 0.8rem; gap: 0.6rem; border-radius: 10px; }
.icon-recurso { font-size: clamp(1.4rem, 3vh, 1.9rem); }
.label-recurso { font-size: 0.75rem; }
.valor-recurso { font-size: clamp(1.15rem, 2.8vh, 1.5rem); line-height: 1.15; }
.subtext-recurso { font-size: 0.75rem; line-height: 1.15; }

/* Insignias y escala de recompensas */
.grid-insignias { gap: 0.4rem; }
.insignia-item {
  padding: 3px;
  max-width: clamp(44px, 8.5vh, 84px);
  justify-self: center;
}
.tabla-recompensas { gap: clamp(0.25rem, 0.6vh, 0.45rem); }
.fila-recompensa { padding: 0.28rem 0.5rem; gap: 0.4rem; font-size: 0.75rem; line-height: 1.2; }
.fila-recompensa strong { font-size: 0.75rem; }

/* Herramientas de ingeniería: panel compacto de una fila (el protagonista del
   dashboard es el banner del mapa de la ciudad). */
.panel-herramientas { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.grid-herramientas { gap: 0.5rem; }
.btn-herramienta { padding: 0.35rem; gap: 3px; border-radius: 10px; }
.btn-herramienta img { width: clamp(26px, 3.8vh, 38px); height: clamp(26px, 3.8vh, 38px); }
.btn-herramienta span { font-size: 0.78rem; font-weight: 700; }

/* Empresas de ingeniería: compactas (no se estiran con el alto sobrante) */
.panel-empresas { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.panel-empresas .grid-empresas { gap: 0.4rem; }
.card-empresa { padding: clamp(0.3rem, 0.7vh, 0.5rem) 0.4rem; }
.logo-empresa { width: clamp(22px, 3.6vh, 36px); height: clamp(22px, 3.6vh, 36px); margin-bottom: 2px; }
.card-empresa h5 { margin: 2px 0; font-size: 0.78rem; }
.card-empresa p { margin: 0 0 2px; font-size: 0.75rem; line-height: 1.2; }
.img-equipo-mini { width: clamp(26px, 4vh, 44px); height: clamp(26px, 4vh, 44px); margin: 2px auto 0; border-width: 1px; }

/* IA & Simuladores para el futuro: el recuadro mide lo mismo que el de empresas
   (misma fila) y sus 4 tarjetas se estiran en vertical, imagen incluida. */
.panel-simuladores-futuro { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.subtitulo-simuladores { margin: 0 0 0.35rem; font-size: 0.75rem; }
.grid-cards-futuro { flex: 1; min-height: 0; gap: 0.4rem; }
.card-futuro { display: flex; flex-direction: column; min-height: 0; }
.card-futuro img { flex: 1 1 0; min-height: 26px; height: auto; }
.card-futuro p { margin: 3px 0; font-size: 0.75rem; line-height: 1.15; }

/* Barra inferior: Social Lounge y objetivo final */
.card-footer-item { padding: clamp(0.35rem, 0.9vh, 0.7rem) 0.9rem; gap: 0.7rem; border-radius: 10px; }
.icon-social { font-size: 1.4rem; }
.textos-social strong, .textos-objetivo strong { font-size: 0.78rem; }
.textos-social p, .textos-objetivo p { margin-top: 2px; font-size: 0.75rem; line-height: 1.2; }
.btn-padlet { padding: 0.45rem 0.9rem; font-size: 0.75rem; }
.img-planeta-objetivo { width: clamp(32px, 5vh, 46px); height: clamp(32px, 5vh, 46px); }

/* Pantallas pequeñas: se devuelve el scroll normal de la página y la
   distribución original (columna lateral + contenido, bloques a todo el ancho). */
@media (max-width: 1100px), (max-height: 640px) {
  .pantalla-dashboard { overflow-y: auto; }
  .grid-dashboard {
    flex: 0 0 auto;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: none;
  }
  .panel-lateral, .area-mapa { grid-area: auto; }
  .panel-lateral { overflow-y: visible; justify-content: flex-start; }
  .panel-lateral > .card-panel,
  .panel-lateral > .card-recurso { flex: 0 0 auto; }
  .panel-lateral > .card-panel .item-crisis { flex: 0 0 auto; margin-bottom: 0.5rem; }
  .panel-lateral .grid-insignias,
  .panel-lateral .tabla-recompensas { flex: 0 0 auto; }
  .area-mapa { align-self: start; }
  .banner-mapa-ciudad { flex: 0 0 auto; }
  .area-inferior, .footer-dashboard { grid-area: auto; grid-column: 1 / -1; }
  .card-futuro img { flex: 0 0 auto; height: 45px; }
  .panel-empresas, .panel-herramientas, .panel-simuladores-futuro { overflow-y: visible; }
}

/* Pantallas altas (1080p o más): se agrandan un poco la letra del lateral y de
   la barra inferior; empresas e IA & Simuladores se quedan compactas. */
@media (min-height: 900px) {
  .encabezado-crisis { font-size: 0.88rem; }
  .barra-progreso-bg { height: 9px; }
  .fila-recompensa, .fila-recompensa strong { font-size: 0.82rem; }
  .label-recurso, .subtext-recurso { font-size: 0.8rem; }
  .valor-recurso { font-size: clamp(1.5rem, 3vh, 2rem); }
  .textos-social p, .textos-objetivo p { font-size: 0.82rem; }
}