/*
 * Otochi · sitio · estilos propios de caseta.html (Consola de caseta y lobby).
 *
 * Se carga después de estilos.css y solo en esta página. No redefine ningún token: usa los del DS
 * (assets/ds/) y los del sitio (estilos.css, sección 2) con var(). Nada de colores, radios ni
 * espacios nuevos. Si el paso de integración sube estas piezas a estilos.css, este archivo se borra
 * y caseta.html deja de enlazarlo.
 *
 *  (El índice de la página es la pieza compartida .indice-pagina de estilos.css.)
 *  2. Figura con pie (las capturas que van juntas en los tres bloques de abajo)
 *  3. Dúo: una tableta y un escritorio lado a lado (bitácora)
 *  4. Trío: dos tabletas y un escritorio (alertas de emergencia)
 *  5. Pila: una escena y una captura, una sobre otra (paquetería)
 *  6. Recorte: solo una parte de una captura real (deshacer) y la tarjeta que la acompaña
 *  7. Cierre de la página
 */

/* 2. Figura con pie: cada captura de los bloques 3 a 6, con su pie centrado y apagado
 * (el mismo estilo que .modulo__visual > figcaption de estilos.css). */
.caseta-figura { display: grid; gap: var(--space-3); justify-items: center; align-content: start; width: 100%; margin: 0; }
.caseta-figura > figcaption, .caseta-figura > .modulo__pie { font-size: var(--fs-meta); color: var(--texto-2); text-align: center; max-width: 48ch; }

/* 3. Dúo: tableta (estrecha) y escritorio (ancho). En el teléfono, una debajo de la otra. */
.caseta-duo { display: grid; gap: var(--space-8); width: 100%; align-items: center; }
.caseta-duo .pantalla--tableta { width: min(360px, 100%); }
.caseta-duo .pantalla--escritorio { width: 100%; }
@media (min-width: 960px) {
  .caseta-duo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .caseta-duo .pantalla--tableta { width: 100%; }
}

/* 4. Trío: dos tabletas lado a lado y el escritorio debajo; desde 960 px, los tres en una fila
 * (las tabletas 3:4 y el escritorio 16:10 quedan casi del mismo alto). */
.caseta-trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); width: 100%; align-items: start; }
.caseta-trio > .caseta-figura:last-child { grid-column: 1 / -1; }
.caseta-trio .pantalla--tableta, .caseta-trio .pantalla--escritorio { width: 100%; }
@media (min-width: 960px) {
  .caseta-trio { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); gap: var(--space-5); }
  .caseta-trio > .caseta-figura:last-child { grid-column: auto; }
}

/* 5. Pila: una escena (foto con su tarjeta) y, debajo, una captura del backoffice */
.caseta-pila { display: grid; gap: var(--space-8); width: 100%; }
.caseta-pila .pantalla--escritorio { width: 100%; }

/* 6. Recorte de una captura: una franja de la pantalla real (el botón «Listo» y «Deshacer ·
 * 30 s»), ampliada una vez y media. Sin transform ni anchos mayores que la caja (no se sale de la
 * ventana): la imagen se pinta a su tamaño natural (object-fit: none), que el navegador toma de
 * sizes. Por eso, en caseta.html, sizes vale 1.5 × el ancho de la caja: 660 px cuando la caja mide
 * 440 (desde 500 px de ventana) y 150vw cuando mide la ventana menos los márgenes. */
.caseta-recorte { aspect-ratio: 405 / 170; }
/* 91 %: el borde inferior del recorte cae justo arriba de la barra de pestañas de la consola */
.caseta-recorte img { width: 100%; height: 100%; object-fit: none; object-position: center 91%; }
.caseta-tarjeta { width: min(440px, 100%); }

/* 7. Cierre: la nota de módulos por condominio, antes de «Sigue recorriendo» */
.caseta-cierre { padding-block: var(--space-4) var(--space-4); }
.caseta-cierre .nota a { font-weight: var(--fw-semibold); }

/* El mensaje que recibe la visita (pase del visitante): una tarjeta del DS con el texto del mensaje */
.mensaje-pase { gap: var(--space-3); width: 100%; }
.mensaje-pase__texto {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--relleno-neutro);
  color: var(--texto);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}
.mensaje-pase__codigo { white-space: nowrap; font-weight: var(--fw-semibold); }
.mensaje-pase__enlace { color: var(--enlace); text-decoration: underline; }
/* En el teléfono, el pase y el mensaje van uno sobre otro: lado a lado, el mensaje no cabe */
@media (max-width: 559px) {
  .modulo__par--apilar { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .modulo__par--apilar .pantalla--telefono { width: min(300px, 78%); justify-self: center; }
}