/* ===========================================================================
   Mi Negocio de Raspao — capa compacta para celular
   IIAA, octubre de 2026.

   El juego está escrito con tipografía y aire generosos, pensados para una
   pantalla grande. En un celular eso obligaba a desplazar en 27 de las 39
   pantallas: la compra de insumos medía 1526 px contra los 844 de alto útil
   de un teléfono corriente, y el cierre del día quedaba cortado justo en la
   cifra de ganancia, que es lo único que el alumno necesita leer ahí.

   Esta hoja no toca ni un número, ni un texto, ni una regla del juego. Sólo
   achica tipos, recorta espacios y junta en una línea lo que estaba en tres,
   para que cada pantalla entre completa. Va aparte y no dentro del archivo
   original a propósito: así, cuando llegue una versión nueva del juego, se
   vuelve a enlazar esta hoja y listo, sin rehacer el parche.

   Se activa sólo en pantallas angostas. En computadora el juego se sigue
   viendo exactamente como lo diseñó su autor.
   =========================================================================== */

@media (max-width: 700px) {

  /* --- base ------------------------------------------------------------- */
  body { font-size: 15px; line-height: 1.36; }
  p { margin: 0 0 7px; }
  .lead { font-size: 1rem; }
  h1 { font-size: 1.42rem; margin-bottom: 6px; }
  h2 { font-size: 1.08rem; margin-bottom: 6px; }
  .kicker { font-size: 12px; margin-bottom: 3px; letter-spacing: .07em; }
  .content { padding: 6px 12px 12px; }

  /* --- barra superior --------------------------------------------------- */
  .top { padding: 6px 12px 5px; gap: 8px; }
  .logo-sm img { height: 30px; }
  .day-label { font-size: 13px; }
  .dots { gap: 3px; margin-top: 3px; }
  .dots i { width: 11px; height: 6px; }
  .cash span { font-size: 11.5px; }
  .cash strong { font-size: 1rem; }

  /* --- tarjetas y avisos ------------------------------------------------ */
  .card { padding: 10px; margin-bottom: 8px; border-radius: 14px; }
  .callout { padding: 8px 10px; margin-bottom: 8px; border-left-width: 5px; border-radius: 12px; }
  .callout .label { margin-bottom: 1px; }
  .tag { font-size: 12px; padding: 1px 7px; }
  .tiny-title { font-size: 12px; margin-top: 8px; }

  /* El clima y la competencia no necesitan un icono de 52 px para leerse. */
  .wx { gap: 8px; }
  .wx svg { width: 34px; height: 34px; }
  .row-2 { gap: 8px; }

  /* --- compra de insumos ------------------------------------------------ */
  .assemble { padding: 8px 10px; margin-bottom: 8px; border-radius: 12px; }
  .assemble strong { font-size: 1.35rem; }
  .assemble span { font-size: 12.5px; }

  /* Cada insumo traía su descripción en tres renglones. Puestos en línea
     dicen lo mismo y la lista entera pasa de cuatro pantallazos a uno. */
  .item { padding: 7px 0; gap: 8px; }
  .item h3 { font-size: .98rem; }
  .item p { display: inline; font-size: 12.5px; line-height: 1.3; margin: 0; }
  .item p + p::before { content: " "; }
  .stepper { gap: 4px; }
  .stepper button { width: 38px; height: 38px; border-radius: 10px; font-size: 1.3rem; }
  .stepper b { min-width: 1.2rem; font-size: 1.1rem; }

  /* --- precio y respuestas ---------------------------------------------- */
  .chips { gap: 6px; }
  .chip { min-height: 46px; padding: 6px; font-size: .95rem; border-radius: 12px; }
  .chip .tick { font-size: 11px; }
  .opt { min-height: 44px; margin-bottom: 6px; padding: 9px 12px; font-size: .95rem; border-radius: 12px; }

  /* --- cierre del día --------------------------------------------------- */
  .receipt { padding: 9px 11px; border-radius: 14px; }
  .line, .kv { padding: 3px 0; }
  .line.total { font-size: 1.05rem; }

  /* --- simulación de la fila -------------------------------------------- */
  .sim-num { font-size: 2.2rem; }
  .people { min-height: 34px; gap: 5px; margin: 6px 0; }
  .people i { width: 14px; height: 26px; }
  .people i::before { width: 11px; height: 11px; top: -8px; left: 1.5px; }

  /* --- mejoras ---------------------------------------------------------- */
  .up { padding: 9px; margin-bottom: 8px; border-radius: 14px; }
  .up h3 { font-size: 1rem; }

  /* --- portada ---------------------------------------------------------- */
  .hero { padding-top: 10px; }
  .hero .logo-wrap { margin-bottom: 4px; }
  .logo-lg img { width: min(100%, 210px); }
  .hero-art { width: min(100%, 210px); margin: 4px auto 8px; }
  .slogan { margin-bottom: 8px; }

  /* --- resultado final -------------------------------------------------- */
  .score-wrap { grid-template-columns: 96px 1fr; gap: 10px; margin-bottom: 8px; }
  .score-num { font-size: 1.9rem; }
  .chart { height: 64px; gap: 4px; margin: 6px 0 2px; }
  .days li { padding: 3px 0; font-size: 13px; }
  .learn { padding-left: 1rem; margin-bottom: 8px; }
  .learn li { margin-bottom: 5px; }

  /* --- botonera --------------------------------------------------------- */
  .dock { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
  .btn { min-height: 44px; padding: 9px 14px; font-size: .98rem; border-radius: 12px; }
  .btn-ghost { min-height: 34px; font-size: .88rem; }
}

/* ---------------------------------------------------------------------------
   Segundo ajuste: la pantalla de compra seguía 121 px por encima del alto de
   un teléfono corriente, y es la pantalla donde más falta hace ver todo junto
   (lo que se compra, lo que alcanza a armar y lo que queda en caja). Se
   recorta de donde sobra —espacios y texto secundario— sin sacar ni una línea.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .content { padding: 6px 12px 7px; }
  .card { padding: 8px; margin-bottom: 7px; }
  .callout { padding: 7px 9px; margin-bottom: 7px; }
  .assemble { padding: 7px 9px; margin-bottom: 7px; }
  .assemble strong { font-size: 1.25rem; }

  /* El clima y la competencia caben de a dos: son dos datos de una ojeada,
     no dos párrafos. Puestos lado a lado ahorran una fila entera. */
  .row-2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wx { gap: 7px; align-items: start; }
  .wx svg { width: 28px; height: 28px; margin-top: 2px; }
  .wx p { font-size: 12.5px; line-height: 1.25; }
  .wx .tag { margin-bottom: 2px; }

  .item { padding: 5px 0; }
  .item p { font-size: 12px; line-height: 1.25; }
  .stepper button { width: 36px; height: 36px; }

  /* Las aclaraciones sueltas del cuerpo (la fila estimada, lo guardado de
     ayer) son apoyo, no instrucción: pueden ir un punto más chicas. */
  .content > p.muted { font-size: 13px; line-height: 1.3; }

  .dock { padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); gap: 5px; }
  .btn-ghost { min-height: 30px; }
}

/* ---------------------------------------------------------------------------
   Ajuste final. Con esto la compra de insumos entra completa en un teléfono
   de 844 px, que es el alto útil más común. La pantalla de resultado es otra
   cosa: es un informe (puntaje, de dónde sale, la feria día por día y las
   ideas para llevarse) y no cabe entera sin esconder algo que el alumno sí
   tiene que leer. Ahí se recorta lo que es aire y se acepta un desplazamiento,
   que es el gesto natural para leer un informe.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .top { padding: 5px 12px 4px; }
  .card { margin-bottom: 6px; }
  .callout { margin-bottom: 6px; }
  .item { padding: 4px 0; }
  .btn { min-height: 42px; }
  .btn-ghost { min-height: 28px; }

  /* La última aclaración del cuerpo no necesita separarse de la botonera. */
  .content > p.muted:last-child { margin-bottom: 0; }

  /* En el resultado, el gráfico de los siete días era casi todo aire: las
     barras valen por su altura relativa, no por el espacio que las rodea. */
  .chart { height: 46px; }
  .score-wrap { grid-template-columns: 84px 1fr; gap: 9px; }
  .days li { padding: 2px 0; }
  .learn li { margin-bottom: 4px; }
  .receipt { padding: 8px 10px; }
}

/* ---------------------------------------------------------------------------
   Teléfonos de pantalla corta (iPhone SE y buena parte de los Android de
   gama media), y también el visor a pantalla completa, que se queda con unos
   38 px para la barra de salir. Ahí ni la versión compacta alcanza,
   así que se aprieta un punto más. Va limitado a 480 px de ancho a propósito:
   un marco angosto pero no estrecho —el del campus en una computadora— tiene
   sitio de sobra para el tamaño cómodo, y achicarlo ahí sólo lo haría más
   difícil de leer sin ganar nada. Se cambia también el tamaño base de la
   raíz, con lo cual todo lo que el autor dejó en «rem» —títulos, botones,
   cifras— baja en proporción y el juego no se desarma.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) and (max-height: 820px) {
  html { font-size: 14px; }
  body { font-size: 13.5px; }

  .content { padding: 4px 10px 8px; }
  .top { padding: 4px 10px 3px; }
  .logo-sm img { height: 26px; }

  .card { padding: 7px; margin-bottom: 5px; }
  .callout { padding: 6px 8px; margin-bottom: 5px; }
  .assemble { padding: 6px 8px; margin-bottom: 5px; }

  .wx svg { width: 24px; height: 24px; }
  .wx p { font-size: 11.5px; }

  .item { padding: 3px 0; }
  .item p { font-size: 11.5px; }
  .stepper button { width: 33px; height: 33px; }

  .chip { min-height: 40px; }
  .opt { min-height: 38px; margin-bottom: 5px; padding: 7px 10px; }
  .up { padding: 7px; margin-bottom: 6px; }

  .people { min-height: 28px; }
  .people i { width: 12px; height: 22px; }
  .people i::before { width: 9px; height: 9px; top: -7px; }
  .chart { height: 40px; }

  .dock { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
  .btn { min-height: 38px; padding: 7px 12px; }
  .btn-ghost { min-height: 26px; }
}

/* Último apretón para las pantallas cortas. Más abajo de aquí ya no se gana
   espacio sin dejar el texto demasiado chico para leerlo en la mano, así que
   es donde se para. */
@media (max-width: 480px) and (max-height: 820px) {
  .card { padding: 6px; margin-bottom: 4px; }
  .callout { padding: 5px 7px; margin-bottom: 4px; }
  .assemble { padding: 5px 7px; margin-bottom: 4px; }
  .assemble strong { font-size: 1.15rem; }
  .item { padding: 2px 0; }
  .item p { font-size: 11px; line-height: 1.22; }
  .content > p.muted { font-size: 12px; }
  .dots i { width: 9px; height: 5px; }
  .btn { min-height: 36px; }
  .up h3 { font-size: .95rem; }
  .up { padding: 6px; margin-bottom: 5px; }
}