/**
 * shell.css — el armazón: menú de pausa de Ocarina of Time.
 *
 * Tres franjas fijas y una zona central que se desplaza:
 *
 *   ┌─ cabecera ────────────────┐  corazones · rupias · racha
 *   │                           │
 *   │        pantalla           │  ← lo único que se desplaza
 *   │                           │
 *   ├─ pestañas ────────────────┤  L ◄  pestañas  ► R
 *   └───────────────────────────┘
 *
 * Las franjas van fijas para que la barra de corazones esté siempre a la
 * vista: es el marcador de su vida diaria y es lo que da sentido a marcar
 * una misión.
 */

.app {
  position: relative;
  z-index: var(--z-contenido);
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* La columna se fija al ancho del contenedor a propósito.
     Con la columna en 'auto', el grid la dimensiona al máximo contenido de
     TODAS sus filas: la tira de nueve pestañas pedía ~700px, la columna se
     anclaba ahí y .pantallas se llevaba ese ancho, así que las tarjetas se
     maquetaban a 676px dentro de una pantalla de 360. */
  grid-template-columns: minmax(0, 100%);
  /* Las dos líneas hacen falta, en este orden.
     dvh llegó a Chrome en la versión 108; en un navegador anterior la
     segunda línea es inválida y se ignora, así que queda la primera. Sin
     el respaldo, .app se quedaba en height:auto, las filas colapsaban y
     la app aparecía vacía con las pestañas pegadas a la cabecera. */
  height: 100vh;
  height: 100dvh;
  /* Red de seguridad: el armazón NUNCA se desplaza en horizontal. Lo único
     que puede hacerlo es la tira de pestañas, y solo por dentro. */
  overflow-x: hidden;
  /* Respeta el notch y la barra de gestos de Android/iOS. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.cabecera {
  z-index: var(--z-cabecera);
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--alto-cabecera);
  padding: var(--e2) var(--e3);
  background: linear-gradient(to bottom, rgba(10,12,24,.92), rgba(10,12,24,.72));
  border-bottom: 1px solid var(--oro-oscuro);
  backdrop-filter: blur(6px);
}

.cabecera-corazones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  max-width: 62%;
}
.cabecera-corazones .arte-corazon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }

/* Un corazón nuevo se anuncia solo. */
.arte-corazon.nuevo { animation: corazon-nuevo 700ms var(--curva); }
@keyframes corazon-nuevo {
  0%   { scale: 0; rotate: -25deg; }
  55%  { scale: 1.5; rotate: 8deg; }
  100% { scale: 1; rotate: 0deg; }
}

.cabecera-derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--fuente-numero);
  font-size: var(--t-sm);
}

.contador-rupias, .contador-racha {
  display: flex;
  align-items: center;
  gap: var(--e1);
  color: var(--oro-claro);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  font-variant-numeric: tabular-nums;
}
.contador-racha[data-encendida='true'] { color: #ff9d4a; }

/* ── Zona de pantallas ──────────────────────────────────────────────────── */

.pantallas {
  position: relative;
  overflow: hidden;
}

.pantalla {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  /* Franja de cielo arriba: el contenido empieza más abajo para dejar ver
     la luna y las fotos que flotan por el fondo. Sin esto las tarjetas
     arrancaban pegadas a la cabecera y tapaban justo la parte del cielo
     donde vive la luna, que es lo que cuenta la historia del mes. */
  padding: calc(var(--ventana-cielo) + var(--respiro-luna)) var(--e3) var(--e4);
  overflow-y: auto;
  /* Solo vertical. Con overflow-y:auto el navegador convierte la pantalla
     en contenedor desplazable en LOS DOS ejes, y cualquier cosa que le dé
     el foco a un elemento ancho (restaurar el foco al cerrar una modal,
     por ejemplo) la desplazaba de lado y descuadraba toda la interfaz. */
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.pantalla.activa {
  display: flex;
  animation: entrar-pantalla var(--normal) var(--curva);
}

@keyframes entrar-pantalla {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Al girar de pestaña con L/R, la pantalla entra por el lado correcto. */
.pantalla.activa[data-direccion='izquierda'] { animation-name: entrar-izquierda; }
.pantalla.activa[data-direccion='derecha']   { animation-name: entrar-derecha; }

@keyframes entrar-izquierda {
  from { opacity: 0; translate: -28px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes entrar-derecha {
  from { opacity: 0; translate: 28px 0; }
  to   { opacity: 1; translate: 0 0; }
}

.pantalla-titulo {
  margin-bottom: var(--e4);
  font-size: var(--t-lg);
  color: var(--oro-claro);
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Pestañas ───────────────────────────────────────────────────────────── */

.pestanas {
  z-index: var(--z-pestanas);
  display: flex;
  align-items: stretch;
  min-height: var(--alto-pestanas);
  background: linear-gradient(to top, rgba(10,12,24,.95), rgba(10,12,24,.78));
  border-top: 1px solid var(--oro-oscuro);
  backdrop-filter: blur(6px);
}

/* Los hombros L y R, como en el menú de pausa. */
.hombro {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  color: var(--oro);
  font-family: var(--fuente-titulo);
  font-size: var(--t-sm);
  transition: color var(--rapido), scale var(--rapido);
}
.hombro:active { scale: .88; color: var(--oro-claro); }

.pestanas-lista {
  flex: 1;
  /* min-width:0 es imprescindible: los ítems flex nacen con min-width:auto,
     así que esta tira se negaba a encoger por debajo del ancho de sus nueve
     pestañas (~612px). Eso empujaba a .pestanas, que empujaba al grid .app,
     y el armazón entero acababa midiendo 700px dentro de una pantalla de
     360. Con esto encoge hasta lo que haya y se desplaza por dentro. */
  min-width: 0;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.pestanas-lista::-webkit-scrollbar { display: none; }

.pestana {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 4.25rem;
  padding: var(--e1) var(--e2);
  color: #8b93b5;
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  scroll-snap-align: center;
  transition: color var(--rapido), scale var(--rapido);
}
/* Los iconos son SVG de trazo y heredan el color de la pestaña, así que
   se tiñen solos al activarse. Un emoji no podría hacer esto. */
.pestana-icono {
  display: grid;
  place-items: center;
  height: 22px;
  transition: scale var(--normal) var(--curva), filter var(--normal) var(--curva);
}
.pestana-icono svg { display: block; }

.pestana[aria-selected='true'] {
  color: var(--oro-claro);
  text-shadow: 0 0 10px rgba(217,180,74,.6);
}
.pestana[aria-selected='true'] .pestana-icono {
  scale: 1.16;
  filter: drop-shadow(0 0 7px rgba(217,180,74,.7));
}
.pestana:active { scale: .92; }

/* Marca dorada bajo la pestaña activa. */
.pestana[aria-selected='true']::after {
  content: '';
  width: 60%;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--oro);
  box-shadow: var(--brillo-oro);
}

/* Punto de aviso: hay algo pendiente en esa pestaña. */
.pestana[data-aviso='true'] .pestana-icono::after {
  content: '';
  position: absolute;
  margin: -2px 0 0 1.1rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--peligro);
  box-shadow: 0 0 6px var(--peligro);
}

/* ── Pantalla de carga ──────────────────────────────────────────────────── */

.cargando {
  position: fixed;
  inset: 0;
  z-index: var(--z-aviso);
  display: grid;
  place-items: center;
  gap: var(--e4);
  background: #0b0d18;
  transition: opacity var(--normal) var(--curva);
}
.cargando.fuera { opacity: 0; pointer-events: none; }

.cargando-texto {
  font-family: var(--fuente-titulo);
  font-size: var(--t-md);
  color: var(--oro);
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: respirar 2s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}