/*
 * ★★★ 2026-11-08 — G1: LA PANTALLA EN CASA PARA SAFARI 9.
 *
 * Reglas (docs/plan/GUIA-PANTALLA-EN-CASA.md §8 y CLAUDE.md §5): flexbox sin
 * `grid`, sin `gap` (no existe en flexbox de Safari 9: márgenes), sin fuentes web,
 * sin `object-fit` (la foto es un fondo `contain`), sin `min()`/`clamp()`/variables
 * CSS (no existen), sin animaciones NI transiciones, sin gestos, botones de al
 * menos 88 px, mayúsculas, nada truncado (`text-overflow` no se usa jamás).
 * Colores: los tokens de la nativa (`apps/mobile/src/core/design/tokens.ts`).
 * Cada propiedad de flexbox va también con prefijo -webkit- para Android 4.4/5.
 */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Sin zoom por doble toque ni pellizco en los navegadores que lo respetan. */
  touch-action: manipulation;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  background: #F5F1E8;
  color: #2C3639;
}
body.noche { background: #000; color: #969696; }

.oculto { display: none !important; }

.vista {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  box-sizing: border-box;
  padding: 24px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background: #F5F1E8;
  color: #2C3639;
}
#vista-fotos { background: #2C3639; color: #FFFFFF; }
/* De noche: fondo negro y el gris más oscuro que aún da 7:1 (text.night de la nativa). */
body.noche .vista, body.noche #vista-fotos { background: #000; color: #969696; }

/* ---- Botones ---- */
.botonera { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-top: 24px; }
.fila {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin: 0 -6px;
}
.fila + .fila { margin-top: 12px; }
.boton {
  -webkit-flex: 1 1 0px;
  flex: 1 1 0px;
  min-width: 0;
  min-height: 88px;
  margin: 0 6px;
  padding: 12px 8px;
  box-sizing: border-box;
  border: 3px solid #7E868E;
  border-radius: 12px;
  background: #FFFFFF;
  color: #2C3639;
  font-family: inherit;
  font-size: 34px;
  line-height: 1.15;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
/* De noche el botón NO puede ser blanco: sería la única luz de la habitación. */
body.noche .boton { background: #969696; border-color: #969696; color: #000; }

/* ---- Mensajes ---- */
.mensaje {
  margin: 0;
  font-size: 40px;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  word-wrap: break-word;
}

/* ---- Emparejar ---- */
#vista-codigo { -webkit-justify-content: center; justify-content: center; }
.cajas {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 20px 0;
}
.caja {
  -webkit-flex: 1 1 0px;
  flex: 1 1 0px;
  max-width: 110px;
  height: 100px;
  margin: 0 5px;
  box-sizing: border-box;
  border: 3px solid #7E868E;
  border-radius: 12px;
  background: #FFFFFF;
  color: #2C3639;
  font-size: 64px;
  line-height: 94px;
  font-weight: bold;
  text-align: center;
}
.teclado { width: 100%; max-width: 640px; margin: 0 auto; }
.tecla { font-size: 44px; }
.hueco { -webkit-flex: 1 1 0px; flex: 1 1 0px; margin: 0 6px; }
#tecla-borrar { font-size: 26px; }

/* ---- Reloj (G5.3, a la manera de Abilia): todo a la izquierda; la hora la dimensiona app.js (22 % del alto) ---- */
.reloj {
  -webkit-flex: 1 1 0px;
  flex: 1 1 0px;
  min-height: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  text-align: left;
}
/* Fila hora + esfera; las dos líneas van debajo, a todo el ancho. */
.reloj-fila {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reloj-dia, .reloj-momento {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 44px;
  line-height: 1.2;
  word-wrap: break-word;
  max-width: 100%;
}
.reloj-momento { font-weight: bold; }
.reloj-hora {
  font-size: 22vh; /* respaldo: app.js lo recalcula con innerHeight */
  line-height: 1;
  font-weight: bold;
  margin-bottom: 1.5vh;
  min-width: 0;
}
.reloj-esfera {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 40vh;
  height: 40vh;
  margin-left: 24px;
}

/* ---- La fecha señalada (G3.3): el hueco secundario bajo la hora. Foto cuadrada de 120 px (contain) a la izquierda ---- */
.linea-secundaria {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  margin-top: 16px;
}
.fecha-foto {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  margin-right: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: contain;
  background-size: contain;
}
body.noche .fecha-foto { opacity: 0.5; }
.fecha-texto {
  min-width: 0;
  font-size: 44px;
  line-height: 1.2;
  font-weight: bold;
  text-align: left;
  word-wrap: break-word;
}

/* ---- Fotos ---- */
.foto-quien {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-bottom: 16px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: bold;
}
/* Si no cabe en una línea, pasa a dos por el punto medio: nunca truncada. */
.foto-quien span { display: inline-block; margin-right: 10px; }
.foto-caja {
  -webkit-flex: 1 1 0px;
  flex: 1 1 0px;
  min-height: 0;
  position: relative;
}
.foto {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: contain;
  background-size: contain;
}
.video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.foto-caja .mensaje {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-size: 36px;
}

/* ---- Música: la franja del reloj en UNA línea, lo que suena en medio, la botonera abajo ---- */
.musica-reloj {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  font-size: 36px;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  word-wrap: break-word;
}
.musica-centro {
  -webkit-flex: 1 1 0px;
  flex: 1 1 0px;
  min-height: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}
.musica-titulo {
  font-size: 60px;
  line-height: 1.15;
  font-weight: bold;
  max-width: 100%;
  word-wrap: break-word;
}
.musica-quien, .musica-linea {
  margin-top: 16px;
  font-size: 36px;
  line-height: 1.2;
  max-width: 100%;
  word-wrap: break-word;
}
.musica-linea { min-height: 44px; }
.boton-musica { font-size: 30px; }

/* ---- Vertical: el reloj manda en el ancho; RELOJ arriba a todo lo ancho y ANTERIOR/SIGUIENTE debajo (SPEC §2.2) ---- */
@media (orientation: portrait) {
  .fila-fotos { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  #btn-reloj {
    -webkit-order: -1; order: -1;
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    width: calc(100% - 12px);
    margin: 0 6px 12px 6px;
  }
}

/* Aparatos bajitos (móvil apaisado): menos holgura, mismas reglas. */
@media (max-height: 520px) {
  .vista { padding: 12px; }
  .reloj-dia, .reloj-momento { font-size: 30px; }
  .fecha-texto { font-size: 30px; }
  .fecha-foto { width: 80px; height: 80px; margin-right: 12px; }
  .linea-secundaria { margin-top: 8px; }
  .musica-titulo { font-size: 38px; }
  .musica-reloj, .musica-quien, .musica-linea { font-size: 26px; }
  .musica-linea { min-height: 32px; }
  .botonera { margin-top: 12px; }
  .caja { height: 64px; line-height: 58px; font-size: 40px; }
  .mensaje { font-size: 28px; }
  .tecla { font-size: 30px; }
}