/* MODAL DE LA PRUEBA DE CÁMARA — Solo en calma
   La ventana que envuelve el cuestionario cuando se abre desde la cabecera o
   desde el «Empezar» de la página de la prueba.

   Aquí solo está la ventana. Lo de dentro lo sigue vistiendo prueba.css, que se
   carga bajo demanda: así el cuestionario se ve igual en la página y en la modal
   sin dos hojas que puedan divergir.

   Cero valores de marca a mano: todo sale de tokens.css. */

.sc-modal {
  /* El diálogo nativo trae margen automático y borde; los dos estorban. */
  margin: auto;
  padding: 0;
  border: 0;
  max-width: min(680px, calc(100vw - var(--sc-espacio-8)));
  width: 100%;
  max-height: calc(100vh - var(--sc-espacio-12));
  background: transparent;
  overflow: visible;
  color: var(--sc-color-tinta);
}

.sc-modal::backdrop {
  background: var(--sc-color-superficie-velo);
}

.sc-modal__caja {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--sc-espacio-12));
  background: var(--sc-color-superficie);
  border-radius: var(--sc-radio-xl);
  box-shadow: var(--sc-sombra-4);
  overflow: hidden;
}

.sc-modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-espacio-4);
  padding: var(--sc-espacio-5) var(--sc-espacio-6);
  border-bottom: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
  /* La cabecera no se va con el scroll: el botón de cerrar tiene que estar siempre. */
  flex: 0 0 auto;
}

.sc-modal__titulo {
  margin: 0;
  font-family: var(--sc-fuente-display);
  font-size: var(--sc-tipo-titulo-2);
  line-height: var(--sc-linea-titulo);
  color: var(--sc-color-tinta);
}

.sc-modal__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: el mínimo táctil del sistema, ya declarado como token. */
  min-width: var(--sc-toque-minimo);
  min-height: var(--sc-toque-minimo);
  padding: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--sc-color-tinta-tenue);
  background: transparent;
  border: 0;
  border-radius: var(--sc-radio-pildora);
  cursor: pointer;
}

.sc-modal__cerrar:hover {
  color: var(--sc-color-tinta);
  background: var(--sc-color-superficie-hundida);
}

.sc-modal__cuerpo {
  /* El scroll vive aquí dentro, nunca en la página de debajo. */
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sc-espacio-6);
}

/* La página de debajo no se mueve mientras la ventana está abierta: en móvil,
   arrastrar dentro del cuestionario arrastraba el fondo y se perdía el sitio. */
.sc-modal-abierta,
.sc-modal-abierta body {
  overflow: hidden;
}

/* Dentro de la modal el cuestionario ya está encuadrado por la caja, así que su
   propio margen exterior sobra. */
.sc-modal__cuerpo .sc-prueba {
  margin: 0;
}

/* ── Móvil ──────────────────────────────────────────────────────────────────
   Hoja casi a pantalla completa, anclada abajo: es donde llega el pulgar. Las
   esquinas de arriba siguen redondeadas para que se lea como una hoja que sube,
   no como una pantalla nueva. */
@media (max-width: 640px) {
  .sc-modal {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .sc-modal__caja {
    max-height: 100%;
    height: 100%;
    border-radius: var(--sc-radio-xl) var(--sc-radio-xl) 0 0;
  }

  .sc-modal__cabecera {
    padding: var(--sc-espacio-4) var(--sc-espacio-5);
  }

  .sc-modal__cuerpo {
    padding: var(--sc-espacio-5) var(--sc-espacio-4);
    /* Aire por debajo del último botón, por encima de la barra del navegador. */
    padding-bottom: calc(var(--sc-espacio-8) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sc-modal[open] {
    animation: sc-modal-entra 180ms ease-out;
  }

  @keyframes sc-modal-entra {
    from {
      opacity: 0;
      transform: translateY(var(--sc-espacio-3));
    }
  }
}