/* Capa común de las pantallas Horno (docs/arquitectura/integracion-front.md §5).
   Solo lo que horno.css no trae y comparten varias pantallas. Los colores siempre
   salen de los tokens: aquí no hay colores sueltos. */

/* Entre páginas del mismo sitio, una transición del navegador en lugar de un
   salto en blanco (sin JavaScript; los navegadores que no la tienen la ignoran). */
@view-transition { navigation: auto; }

.h-admin { min-height: 100vh; }

/* Anchos que vienen de datos, sin estilos en línea: el código pone --p con
   el.style.setProperty('--p', '78%') después de insertar (§5.7). */
.h-meter > i { width: var(--p, 0%); }

/* Donde van las bandas que duran (pedidos pausados, WhatsApp desconectado). */
[data-bandas]:empty { display: none; }
[data-bandas] { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }

/* «Más» del teléfono usa la hoja de toda ventana (horno.css, «Modo celular»); sus piezas
   (.h-mas__*) están en Horno. Aquí, solo las filas de la cuenta. */
.h-mas .h-lista > a,
.h-mas .h-lista > button { min-height: var(--tap); font-weight: 600; }

/* Hoja lateral (App.modal({ hoja: true })): un .h-modal pegado a la derecha, de alto
   completo y con el pie siempre a la vista. Horno no la dibuja: pedida a diseño. */
.h-overlay--hoja { justify-content: flex-end; align-items: stretch; padding: 0; }
/* Sin relleno abajo: el pie pegajoso queda al ras del borde, sin texto que asome debajo. */
.h-modal--hoja { max-width: 560px; height: 100%; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; padding-bottom: 0; }
.h-modal--hoja > div:not(.h-modal__acciones):not(.h-modal__cab) { flex: 1; }
.h-modal--hoja .h-modal__acciones { position: sticky; bottom: 0; margin: var(--space-6) calc(-1 * var(--space-6)) 0; padding: var(--space-3) var(--space-6) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }
@media (max-width: 760px) { .h-modal--hoja { max-width: none; } }
/* Con la hoja abierta, el aviso no tapa su título ni sus botones (28-09, Pedidos
   «Deshacer»). En pantallas anchas va arriba, al centro del espacio que deja la hoja. En
   las angostas, donde la hoja ocupa casi todo, va abajo, justo encima de su pie
   (--hoja-pie lo mide App.modal). Con un diálogo encima de la hoja vale la regla de
   Horno: arriba al centro (H-5). Sigue encima del fondo. */
@media (min-width: 1000px) {
  body:has(.h-overlay--hoja.is-on) .h-toast { left: calc((100% - 560px) / 2); max-width: min(560px, calc(100% - 560px - 2 * var(--space-4))); }
}
@media (max-width: 999.98px) {
  body:has(.h-overlay--hoja.is-on):not(:has(.h-overlay.is-on:not(.h-overlay--hoja))) .h-toast { top: auto; bottom: calc(var(--hoja-pie, 72px) + var(--space-3)); transform: translate(-50%, 16px); }
  body:has(.h-overlay--hoja.is-on):not(:has(.h-overlay.is-on:not(.h-overlay--hoja))) .h-toast.is-on { transform: translate(-50%, 0); }
}

/* En el teléfono, lo que se toca en el panel mide 48 px y los campos van a 16 px (RU-20,
   RV-10): es el «Modo celular» de Horno (body.h-celular, hasta 760 px), que llega también
   a las hojas, que cuelgan del body y no de .h-admin. */

/* En caja, cocina y reparto el nombre del negocio va en la fuente de trabajo: la de marca
   es de la página del cliente, y bajarla aquí pasa el presupuesto de fuentes (RU-45). */
.h-op .h-marca__nombre { font-family: var(--font-ui); }

/* La conexión: dentro de un encabezado no empuja ni se parte. */
.h-conn { flex: none; }

/* Esqueletos de carga con alto fijo (sin saltos cuando llega el dato). */
.h-skel--linea { display: block; height: 20px; margin: 6px 0; }
.h-skel--fila { display: block; height: 56px; }
.h-skel--kpi { display: block; height: 86px; border-radius: var(--radius-lg); }
.h-skel--panel { display: block; height: 180px; border-radius: var(--radius-lg); }

/* Lo que solo se ve impreso (hojas del día) y lo que nunca se imprime. */
.h-solo-imprimir { display: none; }
@media print {
  .h-solo-imprimir { display: block; }
  .h-no-imprimir, .h-toast, .h-overlay, .h-conn { display: none !important; }
  body { background: #ffffff; color: #000000; }
}

/* P-48 (UXE-20): Edge pone su propio ojo en las claves; Horno ya trae el suyo (Mostrar). */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }