/* Central Pliego en el computador: la pantalla de la demo de iPhone, abierta a lo ancho de la ventana.
   El diseño viene en los estilos del marcado. Esta capa ocupa la ventana completa y, desde 900 px de ancho,
   reparte las tarjetas en columnas y centra la barra de pestañas, las hojas y los avisos. Lo marcado con
   data-pantalla y data-cp en index.html es lo único que toca. */

#app { height: 100dvh; }

/* En la hoja de cotizar, las tarjetas conservan su alto y la hoja se desplaza (antes se aplastaban). */
[data-cp="hoja"] [data-scroll] > * { flex-shrink: 0; }

@media (min-width: 900px) {
  /* Sin la barra de estado del teléfono arriba. */
  [data-cp="contenido"] { padding: 28px 32px 132px !important; }

  /* Cada pantalla: el encabezado a lo ancho y las tarjetas en dos columnas. */
  [data-pantalla] {
    display: block !important;
    columns: 2;
    column-gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
  }
  [data-pantalla] > * { break-inside: avoid; margin-bottom: 14px; }
  [data-pantalla="mas"] > * { margin-bottom: 8px; }
  /* Lo que no es tarjeta (portada, título, período, botones) va a lo ancho. */
  [data-pantalla] > :not([style*="border-radius: 22px"]), [data-cp="ancho"] { column-span: all; }
  /* Lo que en el teléfono estiraba la columna flexible: el botón a lo ancho, la etiqueta a su medida. */
  [data-pantalla] > button { display: flex; width: 100%; }
  [data-pantalla] > span { display: block; width: fit-content; }

  /* La barra de pestañas y el botón del tema, centrados abajo. */
  [data-cp="pestanas"] { left: calc(50% - 266px) !important; right: auto !important; width: 452px; }
  [data-cp="tema"] { left: calc(50% + 202px) !important; right: auto !important; }
  [data-cp="aviso"] { left: calc(50% - 266px) !important; right: auto !important; width: 532px; }
  [data-cp="contacto"] { left: calc(50% - 266px) !important; right: auto !important; width: 532px; border-radius: 99px; }

  /* Las hojas se abren al centro, como un panel. */
  [data-cp="hoja"], [data-cp="hoja-corta"] {
    left: calc(50% - 280px) !important;
    right: auto !important;
    width: 560px;
    border-radius: 28px !important;
    box-shadow: 0 24px 60px rgba(14, 27, 51, .22);
  }
  [data-cp="hoja"] { top: 40px !important; bottom: 40px !important; }
  [data-cp="hoja-corta"] { top: 50% !important; bottom: auto !important; transform: translateY(-50%); padding-bottom: 20px; }

  /* El inicio: la misma columna del teléfono, al centro de la ventana. */
  [data-cp="inicio-columna"] { max-width: 420px; margin: 0 auto; padding-top: 64px !important; }
}

/* Con el mouse se puede usar la barra de desplazamiento; en el teléfono sigue oculta. */
@media (hover: hover) and (pointer: fine) {
  [data-scroll] { scrollbar-width: thin !important; }
  [data-scroll]::-webkit-scrollbar { display: block; width: 8px; }
  [data-scroll]::-webkit-scrollbar-thumb { background: rgba(19, 38, 73, .18); border-radius: 8px; }
}