/**
 * Adaptación a pantallas grandes.
 *
 * El diseño base es el de móvil (PLAN.md §52): aquí solo se ensancha y se
 * reacomoda. No se diseña para escritorio y luego se encoge.
 */

/* --- Tablet --------------------------------------------------------------- */

@media (min-width: 640px) {
  :root {
    --content-max: 40rem;
  }

  .view {
    gap: var(--space-5);
    padding-inline: var(--space-5);
  }

  .hero__title {
    font-size: var(--text-3xl);
  }
}

/* --- Escritorio ------------------------------------------------------------
   Con ratón el pulgar deja de mandar, así que la barra pasa a ser una isla
   centrada en lugar de ocupar todo el ancho. */

@media (min-width: 900px) {
  :root {
    --content-max: 46rem;
  }

  .tabbar {
    right: auto;
    bottom: var(--space-5);
    left: 50%;
    width: min(28rem, calc(100% - var(--space-6)));
    height: var(--tabbar-height);
    padding-bottom: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    transform: translateX(-50%);
    box-shadow: var(--shadow);
  }

  .tabbar__item--primary .tabbar__icon {
    top: -14px;
    width: 48px;
    height: 48px;
  }

  .tabbar__item--primary .tabbar__label {
    margin-top: 26px;
  }
}

/* --- Pantallas muy bajas ---------------------------------------------------
   Con el teclado del sistema abierto o en móviles pequeños en horizontal, el
   teclado numérico del PIN debe encoger antes que desbordar. */

@media (max-height: 700px) {
  .keypad {
    gap: var(--space-3);
    max-width: 13.5rem;
    margin-top: var(--space-4);
  }

  .keypad__key {
    font-size: var(--text-lg);
  }

  .lock__dots {
    margin: var(--space-4) 0 var(--space-2);
  }
}