/*
 * movil.css — solo teléfonos (pantalla táctil y estrecha). En el ordenador no
 * se aplica nada de esto, aunque la ventana sea pequeña o haya mucho zoom.
 */
@media (pointer: coarse) and (max-width: 820px) {
  html, body { font-size: 15px; }
  /* Evita que el teléfono amplíe la página al tocar un campo */
  input, select, textarea, .campo { font-size: 16px; }

  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "menu" "nav" "centro" "pie";
  }

  /* Menú: una sola fila que se desliza de lado */
  #menu { padding-right: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #menu::-webkit-scrollbar { display: none; }
  .menu-cab > button { padding: 9px 10px; white-space: nowrap; }
  #btn-resumen { display: inline-block; margin-left: auto; padding: 9px 12px; position: sticky; right: 0; background: var(--superficie); white-space: nowrap; box-shadow: -10px 0 10px var(--superficie); border: 0; border-left: 1px solid var(--borde); border-radius: 0; min-height: 0; }
  .menu-lista.menu-lista-suelta { display: block; z-index: 70; }
  .menu-lista { position: fixed; top: 42px; left: 8px; right: 8px; min-width: 0; max-height: 70vh; overflow-y: auto; }
  .menu-lista .item { padding: 11px 14px; white-space: normal; }

  /* Apartados: barra de botones arriba, que se desliza de lado */
  #nav {
    flex-direction: row; align-items: center; gap: 6px; padding: 8px 10px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    background: var(--fondo); border-bottom: 1px solid var(--borde);
  }
  #nav::-webkit-scrollbar { display: none; }
  .nav-boton { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; font-size: 12px; overflow-wrap: normal; hyphens: none; }
  .nav-boton.primario { order: -2; }           /* «Generar sentencia» siempre a mano, al principio */
  #nav .nav-hueco, #nav .escudo { display: none; }
  #nav .estado-motor { order: -1; flex: 0 0 auto; margin: 0; }
  #nav .estado-motor:empty { display: none; }

  #centro { padding: 10px 10px 16px; }
  .apartado { max-width: none; }
  fieldset.panel { padding: 8px 10px 10px; margin-bottom: 10px; }
  fieldset.panel fieldset.panel { padding: 6px 8px 8px; }

  /* Campos y botones del tamaño de un dedo */
  .campo { min-height: 38px; }
  .boton { min-height: 38px; padding: 6px 14px; }
  .casilla input { width: 20px; height: 20px; }
  .circulo { width: 36px; height: 36px; }
  .lista-fila { padding: 8px 10px; }
  .menu-item { padding: 10px 14px; }

  /* Resumen: panel que ocupa toda la pantalla */
  #derecha { top: 42px; width: 100vw; padding: 10px; }

  /* Pie: una línea pequeña */
  #pie { font-size: 10px; line-height: 1.25; padding: 3px 8px 5px; }

  /* Sin zoom: ni doble toque ni pellizco */
  html, body { touch-action: pan-x pan-y; }
  * { touch-action: manipulation; }

  /* Ventanas: todas a pantalla completa (las de cada apartado fijan su
     propio tamaño; aquí manda el de la pantalla) */
  .modal-fondo { padding: 0; align-items: stretch; justify-content: stretch; }
  .modal-fondo > .modal, .modal, .modal.ancho {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: 100% !important; max-height: 100% !important; border-radius: 0 !important; margin: 0 !important;
  }
  .modal .modal-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .modal input.campo, .modal select.campo, .modal textarea.campo, .modal .desplegable-envoltorio { max-width: 100% !important; }
  .modal img { max-width: 100%; height: auto; }
  .modal-pie { position: sticky; bottom: 0; background: var(--superficie); }
  .modal-pie .boton { flex: 1 1 auto; }
}