/* El panel en el celular (documento "Roles, locales y celular", 7/10, parte C).

   Va ÚLTIMO, después de panel.css y consola.css: lo de acá pisa los tamaños de los dos sin
   pelear regla por regla. Cada cosa la mide `tools/medir_celular.py` a 360, 390 y 414 px:
   que nada se salga de costado, que nada que se toque mida menos que un dedo, y que nada se
   encime. */

/* --- Con el dedo, nada más chico que 44 px ---------------------------------------------
   Es el mínimo de Apple y de las pautas de accesibilidad: con menos, el dedo aprieta el de
   al lado. Va por `pointer: coarse` y no por el ancho: un celular acostado mide más de
   860 px y sigue siendo un dedo, y una compu con la ventana angosta sigue siendo un mouse.
   El `!important` es a propósito: es un piso, y ninguna regla de una pantalla puede bajarlo
   (las solapas de consola.css miden 42, los botones "chicos" 30, las pastillas 26). */
@media (pointer: coarse) {
  button,
  select,
  textarea,
  summary,
  input:not([type="checkbox"], [type="radio"], [type="hidden"], .solo-lectores),
  .casilla,
  .tilde-local {
    min-height: 44px !important;
  }

  /* De ancho, solo los que pueden quedar angostos: los de un ícono (el menú, la cuenta, la
     arroba), el "Sí" y el "No" del catálogo y los colores de una etiqueta. A TODOS los botones
     no: un ancho mínimo explícito le saca a un botón de una fila el mínimo automático (su
     texto), y las solapas de Pedidos se aplastaban hasta pisarse el texto. */
  .boton-icono,
  .boton-cuenta,
  .si-no button,
  .muestra,
  input[type="color"] {
    min-width: 44px;
  }

  /* "Esta respuesta del bot está mal": vive al costado de la burbuja, y con 28 px no se le
     emboca. Se agranda hacia afuera para que la burbuja no se mueva. */
  .marcar-respuesta {
    width: 44px;
    top: -4px;
    left: -46px;
  }
}

/* --- La barra de arriba -----------------------------------------------------------------
   En 360 px van el menú, el local, WhatsApp, las menciones y la cuenta, y con 44 px cada uno
   no entraban: "WhatsApp conectado" se encimaba con el local. En el celular la pastilla es
   el ícono de WhatsApp con su punto de color, y dice algo solo si hay un problema ("Caído",
   panel.js). Si igual no entra, la pastilla se achica con "…": nunca pisa al de al lado. */
@media (max-width: 860px) {
  .barra > :not(.separador) {
    flex: none;
  }

  .barra #estado-whatsapp {
    flex: 0 1 auto;
    min-width: 0;
  }

  .barra #estado-whatsapp .solo-celular {
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .barra #estado-whatsapp .corto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .barra #estado-whatsapp .corto:empty {
    display: none;
  }
}

/* --- Una charla abierta es la pantalla entera ------------------------------------------
   Como en WhatsApp: adentro de una charla el menú de abajo se va. Con el teclado abierto,
   la barra, la cabeza de la charla, la caja y el menú se comían todo el alto y no quedaba
   lugar para un solo mensaje. La flecha de la cabeza vuelve a la lista, y ahí vuelve el
   menú. */
@media (max-width: 860px) {
  .panel:has(#pantalla-bandeja.en-hilo:not(.oculto)) .menu-celular {
    display: none !important;
  }
}

/* --- El teclado no tapa la caja de responder --------------------------------------------
   En Android alcanza con `interactive-widget=resizes-content` (panel.html): el teclado
   achica la página y la caja sube con ella. Safari de iPhone no lo entiende: el teclado
   achica solo lo que se VE, y el panel seguía midiendo la pantalla entera, con la caja
   abajo del teclado. `--alto-visible` lo pone panel.js con lo que se ve (`visualViewport`). */
@media (max-width: 860px) {
  .panel {
    height: var(--alto-visible, 100dvh);
  }
}

/* --- Las solapas bajan de renglón ----------------------------------------------------------
   Configuración tiene cinco, "Tu agente" cuatro y Pedidos cuatro con su número: en 360 px
   se corrían de costado, y la que quedaba afuera no se veía. El documento lo pide sin
   scroll de costado en ninguna pantalla. */
@media (max-width: 860px) {
  .solapas {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* En la grilla de la página, la fila de las solapas medía lo de un renglón (el
     `min-height` de panel.css) y el segundo quedaba tapado por lo de abajo: "Respuestas
     rápidas" y "Equipo" no se podían tocar. Con el alto de su contenido, la fila crece. */
  .solapas-pagina {
    height: max-content;
  }
}