/* iPhone/iPad instalada: la barra de estado queda sobre una franja oscura (sin el borde blanco) */
body { border-top: env(safe-area-inset-top, 0px) solid #16161A; box-sizing: border-box; }
/* En el teléfono los campos van a 16 px: así el iPhone no hace zoom al escribir */
.telefono input, .telefono select, .telefono textarea { font-size: 16px !important; }
/* App web en el teléfono (clase .telefono que pone movil.js): menú arriba con desplazamiento, sin panel lateral */
.telefono body { flex-direction: column; height: 100dvh; }
/* Inicio de sesión */
.telefono body > .marca { width: auto; min-width: 0; padding: 18px 20px; flex: 0 0 auto; }
.telefono body > .marca h1 { font-size: 22px; margin-top: 10px; }
.telefono body > .marca ul, .telefono body > .marca .pie, .telefono body > .marca p { display: none; }
.telefono body > .marca img { width: 40px; height: 44px; }
.telefono .panel { padding: 18px 16px; align-items: flex-start; }
/* App principal */
.telefono .lateral { width: auto; flex-direction: row; align-items: center; padding: 6px 8px; gap: 6px; overflow-x: auto; }
.telefono .lateral .marca { display: none; }
.telefono .menu, .telefono .lateral-pie { flex-direction: row; flex: 0 0 auto; overflow: visible; border: 0; padding: 0; gap: 4px; }
.telefono .lateral .item { width: auto; flex-direction: column; gap: 2px; padding: 6px 10px; font-size: 11px; white-space: nowrap; }
.telefono .lateral .item .i { font-size: 18px; }
.telefono .lateral .item .cnt { margin: 0; position: absolute; transform: translate(14px, -4px); }
.telefono #btnCocina, .telefono #btnCliente { display: none !important; }
.telefono .barra { padding: 8px 12px; flex-wrap: wrap; }
.telefono .vista { padding: 12px; }
.telefono .rejilla.c2, .telefono .rejilla.c3, .telefono .rejilla.c4, .telefono .pedidos-tablero { grid-template-columns: 1fr !important; }
.telefono .pos-prods { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.telefono .xk-grilla { grid-template-columns: 1fr; }
.telefono table { display: block; overflow-x: auto; }
.telefono .fila { flex-wrap: wrap; }
/* Caja: productos arriba y el ticket abajo */
.telefono .vista:has(.pos) { overflow: auto; }
.telefono .pos { flex-direction: column; height: auto; }
.telefono .pos-izq { padding: 12px; overflow: visible; }
.telefono .pos-prods { overflow: visible; }
.telefono .pos-der { width: auto; min-height: 60vh; }
.telefono .prod .foto { height: 72px; }
/* Parte de arriba negra en el iPhone (Safari y app instalada toman el color de fondo de la página): la página es negra y
   las zonas claras se pintan dentro */
.telefono, .telefono body { background: #16161A !important; }
.telefono .panel { background: #fff; }
.telefono .principal { background: var(--fondo); }
/* Comandas (inicio de sesión): tarjeta blanca sobre el fondo negro */
.telefono body > .caja { background: #fff; border-radius: 22px; padding: 22px 18px; }
/* Menú de arriba más abajo: fuera del difuminado de la barra de estado del iPhone */
.telefono .lateral { padding-top: 22px; }
.telefono body > .marca { padding-top: 26px; }
/* Desplazamiento en el teléfono: la zona de contenido ocupa lo que queda y es la que se desplaza (antes no se podía bajar) */
.telefono body { overflow: hidden; }
.telefono .principal { flex: 1 1 auto; min-height: 0; }
.telefono .vista { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.telefono .panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Menú de arriba: todos los botones del mismo tamaño (el texto largo se parte en dos líneas) y el logo al inicio */
.telefono .lateral .marca { display: flex; flex: 0 0 auto; padding: 0 6px 0 2px; }
.telefono .lateral .marca img { width: 30px; height: 30px; }
.telefono .lateral .marca .fuerte { display: none; }
.telefono .lateral .item { width: 74px; min-width: 74px; max-width: 74px; height: 58px; justify-content: center; align-items: center; text-align: center; white-space: normal; line-height: 1.1; font-size: 10.5px; padding: 4px 4px; position: relative; overflow: hidden; }
.telefono .lateral .item > span:not(.i):not(.cnt):not(.candado) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.telefono .lateral .item .candado { position: absolute; top: 3px; right: 4px; margin: 0; }
.telefono .lateral .item .cnt { position: absolute; top: 3px; right: 4px; transform: none; }
.telefono .scroll { min-height: 0; }
/* Ventanas (formularios) en el teléfono: ocupan el alto visible real y se desplazan dentro */
.telefono .modal-fondo { padding: 10px; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.telefono .modal { max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 16px; border-radius: 18px; }
.telefono .modal .cuerpo > div[style*="min-width"] { min-width: 0 !important; }
.telefono .modal-pie { bottom: -16px; }
/* Espacio al final de cada pantalla para poder subir el contenido por encima de los botones flotantes
   («Activar avisos», aviso para instalar): sin esto, lo último quedaba tapado y no se podía desplazar */
.vista { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
.vista:has(.pos) { padding-bottom: 0 !important; }
.telefono .panel { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }