/* La piel de todo lo de `instalar.js` (D-34): la pantalla /instalar, la ayuda
   con los pasos y la tarjeta de la portada. Hoja aparte, como `entrada.css`:
   las de la portada estaban a 42 bytes del presupuesto de §7, y esta tiene
   línea propia. Los colores son los de `tokens.css`; aquí no hay ni un
   hexadecimal. Ninguna letra baja de 1rem (D-25). */

/* La ayuda: los pasos de cada aparato en su caja de papel. Llegó sin piel
   desde Asociaciones y se vio en el navegador el 2026-09-07: la lista se
   pintaba suelta sobre la capa oscura. */
.ayuda-instalar {
  width: min(100%, 24rem);
  padding: var(--s-5) var(--s-4);
  background: var(--papel); color: var(--tinta);
  border-radius: var(--r-lg);
  box-shadow: var(--relieve-alto);
}
.ayuda-instalar ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.ayuda-instalar li { margin-bottom: var(--s-3); font-size: 1.1rem; line-height: 1.4; }
.ayuda-instalar-fin { margin: 0; color: var(--tinta-suave); }

/* La tarjeta de la entrada de la portada: en grande y ARRIBA DEL TODO, por
   decisión del director, y en el flujo de la página, no fija al pie. Viene
   con `.oculto` del servidor y `instalar.js` lo quita si toca. */
.tarjeta-instalar {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  margin: var(--s-4) var(--s-4) 0; padding: var(--s-5) var(--s-4);
  background: var(--papel); border: 3px solid var(--casa); border-radius: var(--r-lg);
  box-shadow: var(--relieve-alto);
  text-align: center;
}
.tarjeta-instalar.oculto { display: none; }
/* El icono va como fondo y no como <img>: en la portada TODA <img> es de un
   cartel y lleva su alt con el comercio y la fecha (criterio nº 8), y hay
   pruebas que cuentan con eso. */
.icono-app-mini { width: 64px; height: 64px; border-radius: 22%; background: url("/icons/icon-192.png") center / cover; }
.tarjeta-instalar h2 { margin: 0; font-size: 1.6rem; line-height: 1.15; color: var(--casa); }
.tarjeta-instalar p { margin: 0; font-size: 1.1rem; }
.tarjeta-instalar .btn-ancho { align-self: stretch; display: flex; }

/* La pantalla /instalar: una sola pantalla en un móvil de 390 px, con el botón
   a la vista sin desplazar. */

.instalar {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  max-width: 30rem; margin: 0 auto;
  padding: var(--s-5) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.instalar h1, .instalar h2, .instalar p { margin: 0; }
.instalar h1 { font-size: 1.75rem; line-height: 1.15; color: var(--casa); text-wrap: balance; }
.instalar .lema { font-size: 1.1rem; line-height: 1.4; }

/* El icono como en la pantalla de inicio: esquinas del 22 % y el nombre corto
   debajo, para que sepan qué buscar. */
.icono-app { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.icono-app img { width: 96px; height: 96px; border-radius: 22%; box-shadow: var(--relieve-alto); }
.icono-nombre { font-size: 1rem; font-weight: 600; }

/* El botón, a todo lo ancho. `min-height` de `.btn` es `--tap`, que es 44 px o
   más: el objetivo táctil no se negocia. */
.instalar .btn-ancho { align-self: stretch; display: flex; }
.instalar .aviso { font-size: 1.1rem; font-weight: 600; color: var(--valido); }
.instalar .aviso a { color: var(--casa); }

/* El QR: solo en pantallas anchas, que es donde no hay móvil que instalar. */
.escritorio { display: none; flex-direction: column; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--linea); }
.escritorio h2 { font-size: 1.25rem; }
.escritorio img { width: 240px; height: 240px; image-rendering: pixelated; }
.enlace-escrito { font-family: var(--maquina); font-size: 1rem; }
@media (min-width: 700px) {
  .escritorio { display: flex; }
}

.pie-instalar { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); align-self: stretch; padding-top: var(--s-4); border-top: 1px solid var(--linea); }

#detalles-tecnicos { align-self: stretch; text-align: left; color: var(--tinta-suave); font-size: 1rem; }
#detalles-tecnicos summary { cursor: pointer; }
#detalles-tecnicos pre { white-space: pre-wrap; word-break: break-all; font-family: var(--maquina); font-size: 1rem; }

/* Lo que solo existe en el papel (D-67). */
.solo-papel { display: none; }

/* EL CARTEL DEL CRISTAL: Ctrl+P desde el ordenador (D-67, que enmienda D-34).
   Un A5, porque un A4 en el escaparate de una tienda pequeña es un cartelón y
   compite con el horario. El orden es el de quien lo mira desde la acera:
   friso, titular, QR y, debajo, qué hacer. Se va el lema —a dos metros sobran
   palabras— y se va el icono de la app, que arriba ya están el friso y el
   titular y el ojo tiene que llegar al QR.

   Los 60 mm del QR no se tocan: un QR se lee desde unas diez veces su lado, y
   60 cm es lo que hay del cristal a la acera. Acotado a la pantalla de
   instalar: la portada también carga esta hoja. */
@media print {
  @page { size: A5; margin: 16mm 14mm 18mm; }
  [data-pantalla="instalar"] body { background: #fff; }
  [data-pantalla="instalar"] .barra, .icono-app, .instalar .solo-pantalla, .instalar .btn, .instalar .aviso, .pie-instalar, #detalles-tecnicos { display: none !important; }
  /* El alto de la caja de la página, para que el pie caiga abajo del todo. */
  .instalar { max-width: none; min-height: 176mm; padding: 0; gap: 0; }
  .solo-papel { display: block; }
  .friso-papel { width: 26mm; height: auto; margin-bottom: 9mm; }
  .instalar h1 { font-size: 26pt; margin-bottom: 4mm; }
  .instalar .lema { font-size: 14pt; margin-bottom: 10mm; }
  .escritorio { display: flex; gap: 4.5mm; padding: 0; border: 0; }
  .escritorio img { width: 60mm; height: 60mm; order: -1; margin-bottom: 4.5mm; }
  .escritorio h2 { font-size: 13pt; }
  .enlace-escrito { font-size: 11pt; }
  /* `.instalar .pie-papel` y no `.pie-papel`: arriba hay un `.instalar p` con
     `margin: 0` que gana por especificidad y se comía el `auto`. */
  .instalar .pie-papel { margin-top: auto; font-size: 10pt; color: var(--tinta-suave); }
}