/* =============================================================================
   FILE: /app/ps_panel.css
   -----------------------------------------------------------------------------
   UTILIDADES DEL PANEL (paso 3 del front, 01/10/2026).

   Lo que antes iba repetido en atributos style= por todo el panel (ocultar,
   tamanos de letra, margenes chicos, anchos...) vive aca con un nombre. La carga
   header.php en TODAS las paginas del panel, despues de ps_tokens.css. Cada
   pagina tiene ademas su propia hoja en css/paginas/<pagina>.css, que header.php
   carga sola si existe: ahi va lo que es solo de esa pantalla.

   Regla: una clase de aca dice QUE hace (ps-oculto, ps-fs-12), no donde se usa.
   Igual que las utilidades de Bootstrap, llevan !important: una utilidad puesta a
   proposito le gana a la regla general. La unica sin !important es .ps-oculto,
   porque el JS la da vuelta con style.display.
   Si algo pinta color, lleva el :is() con el id inexistente: la barrida del tema
   oscuro (admin_theme_include.php) pinta con !important y peso (0,4,3) a todo
   hijo de cualquier *card*, y solo un peso de id le gana desde una hoja.
   ============================================================================= */

/* ── Mostrar / ocultar: el JS lo da vuelta con style.display ─────────────────
   Con peso de id (el :is() con un id que no existe) y SIN !important: asi le
   gana a cualquier regla de clase que ponga display (como hacia el style= en
   linea) y el JS lo sigue pudiendo mostrar con style.display = 'block'. */
:is(#ps-pos-prioridad, .ps-oculto) { display: none; }

/* ── Letra ───────────────────────────────────────────────────────────────────── */
.ps-fs-8  { font-size: 8px !important; }   .ps-fs-9  { font-size: 9px !important; }   .ps-fs-10 { font-size: 10px !important; }
.ps-fs-11 { font-size: 11px !important; }  .ps-fs-12 { font-size: 12px !important; }  .ps-fs-13 { font-size: 13px !important; }
.ps-fs-14 { font-size: 14px !important; }  .ps-fs-15 { font-size: 15px !important; }  .ps-fs-16 { font-size: 16px !important; }
.ps-fs-17 { font-size: 17px !important; }  .ps-fs-18 { font-size: 18px !important; }  .ps-fs-20 { font-size: 20px !important; }
.ps-fs-22 { font-size: 22px !important; }  .ps-fs-24 { font-size: 24px !important; }  .ps-fs-26 { font-size: 26px !important; }
.ps-fs-r65 { font-size: .65rem !important; } .ps-fs-r7 { font-size: .7rem !important; }   .ps-fs-r75 { font-size: .75rem !important; }
.ps-fs-r8  { font-size: .8rem !important; }  .ps-fs-r85 { font-size: .85rem !important; } .ps-fs-r9  { font-size: .9rem !important; }
.ps-fs-r95 { font-size: .95rem !important; } .ps-fs-r11 { font-size: 1.1rem !important; } .ps-fs-r12 { font-size: 1.2rem !important; }
.ps-fs-r125 { font-size: 1.25rem !important; } .ps-fs-r15 { font-size: 1.5rem !important; }
.ps-fs-90 { font-size: 90% !important; } .ps-fs-110 { font-size: 110% !important; }
.ps-fw-800 { font-weight: 800 !important; } .ps-fw-900 { font-weight: 900 !important; }
.ps-lh-1 { line-height: 1 !important; } .ps-lh-11 { line-height: 1.1 !important; } .ps-lh-12 { line-height: 1.2 !important; }
.ps-pre-line { white-space: pre-line !important; } .ps-pre-wrap { white-space: pre-wrap !important; }

/* ── Espacios chicos que Bootstrap no tiene ─────────────────────────────────── */
.ps-mt-2 { margin-top: 2px !important; } .ps-mt-3 { margin-top: 3px !important; } .ps-mt-4 { margin-top: 4px !important; } .ps-mt-8 { margin-top: 8px !important; }
.ps-mt-10 { margin-top: 10px !important; } .ps-mt-15 { margin-top: 15px !important; } .ps-mt-20 { margin-top: 20px !important; }
.ps-mb-8 { margin-bottom: 8px !important; } .ps-mb-10 { margin-bottom: 10px !important; } .ps-mb-15 { margin-bottom: 15px !important; } .ps-mb-20 { margin-bottom: 20px !important; }
.ps-my-12 { margin: 12px 0 !important; }
.ps-p-10 { padding: 10px !important; } .ps-p-15 { padding: 15px !important; } .ps-p-20 { padding: 20px !important; } .ps-p-25 { padding: 25px !important; }
.ps-gap-4 { gap: 4px !important; } .ps-gap-6 { gap: 6px !important; } .ps-gap-8 { gap: 8px !important; } .ps-gap-10 { gap: 10px !important; } .ps-gap-12 { gap: 12px !important; }
.ps-r-8 { border-radius: 8px !important; } .ps-r-10 { border-radius: 10px !important; } .ps-r-12 { border-radius: 12px !important; }
.ps-op-60 { opacity: .6 !important; } .ps-op-70 { opacity: .7 !important; } .ps-op-80 { opacity: .8 !important; } .ps-op-90 { opacity: .9 !important; }
.ps-cursor { cursor: pointer !important; } .ps-cursor-ayuda { cursor: help !important; }

/* ── Anchos y altos fijos ───────────────────────────────────────────────────── */
.ps-w-40 { width: 40px !important; } .ps-w-50 { width: 50px !important; } .ps-w-60 { width: 60px !important; } .ps-w-70 { width: 70px !important; } .ps-w-80 { width: 80px !important; }
.ps-w-90 { width: 90px !important; } .ps-w-100 { width: 100px !important; } .ps-w-110 { width: 110px !important; } .ps-w-120 { width: 120px !important; } .ps-w-150 { width: 150px !important; }
.ps-w-180 { width: 180px !important; } .ps-w-200 { width: 200px !important; } .ps-w-220 { width: 220px !important; } .ps-w-250 { width: 250px !important; } .ps-w-280 { width: 280px !important; }
.ps-w-300 { width: 300px !important; } .ps-w-320 { width: 320px !important; } .ps-w-400 { width: 400px !important; } .ps-w-420 { width: 420px !important; }
.ps-maxw-40 { max-width: 40px !important; } .ps-maxw-50 { max-width: 50px !important; } .ps-maxw-60 { max-width: 60px !important; } .ps-maxw-70 { max-width: 70px !important; }
.ps-maxw-80 { max-width: 80px !important; } .ps-maxw-90 { max-width: 90px !important; } .ps-maxw-100 { max-width: 100px !important; } .ps-maxw-110 { max-width: 110px !important; }
.ps-maxw-120 { max-width: 120px !important; } .ps-maxw-150 { max-width: 150px !important; } .ps-maxw-180 { max-width: 180px !important; } .ps-maxw-200 { max-width: 200px !important; }
.ps-maxw-220 { max-width: 220px !important; } .ps-maxw-250 { max-width: 250px !important; } .ps-maxw-280 { max-width: 280px !important; } .ps-maxw-300 { max-width: 300px !important; }
.ps-maxw-320 { max-width: 320px !important; } .ps-maxw-400 { max-width: 400px !important; } .ps-maxw-420 { max-width: 420px !important; }
.ps-minw-40 { min-width: 40px !important; } .ps-minw-50 { min-width: 50px !important; } .ps-minw-60 { min-width: 60px !important; } .ps-minw-70 { min-width: 70px !important; }
.ps-minw-80 { min-width: 80px !important; } .ps-minw-90 { min-width: 90px !important; } .ps-minw-100 { min-width: 100px !important; } .ps-minw-110 { min-width: 110px !important; }
.ps-minw-120 { min-width: 120px !important; } .ps-minw-150 { min-width: 150px !important; } .ps-minw-180 { min-width: 180px !important; } .ps-minw-200 { min-width: 200px !important; }
.ps-minw-220 { min-width: 220px !important; } .ps-minw-250 { min-width: 250px !important; } .ps-minw-280 { min-width: 280px !important; } .ps-minw-300 { min-width: 300px !important; }
.ps-minw-320 { min-width: 320px !important; } .ps-minw-400 { min-width: 400px !important; } .ps-minw-420 { min-width: 420px !important; }
.ps-maxh-40 { max-height: 40px !important; } .ps-maxh-50 { max-height: 50px !important; } .ps-maxh-60 { max-height: 60px !important; } .ps-maxh-70 { max-height: 70px !important; }
.ps-maxh-80 { max-height: 80px !important; } .ps-maxh-90 { max-height: 90px !important; } .ps-maxh-100 { max-height: 100px !important; } .ps-maxh-110 { max-height: 110px !important; }
.ps-maxh-120 { max-height: 120px !important; } .ps-maxh-150 { max-height: 150px !important; } .ps-maxh-180 { max-height: 180px !important; } .ps-maxh-200 { max-height: 200px !important; }
.ps-maxh-220 { max-height: 220px !important; } .ps-maxh-250 { max-height: 250px !important; } .ps-maxh-280 { max-height: 280px !important; } .ps-maxh-300 { max-height: 300px !important; }
.ps-maxh-320 { max-height: 320px !important; } .ps-maxh-400 { max-height: 400px !important; } .ps-maxh-420 { max-height: 420px !important; }
.ps-cuadro-24 { width: 24px !important; height: 24px !important; } .ps-cuadro-26 { width: 26px !important; height: 26px !important; } .ps-cuadro-28 { width: 28px !important; height: 28px !important; }
.ps-cuadro-30 { width: 30px !important; height: 30px !important; } .ps-cuadro-32 { width: 32px !important; height: 32px !important; } .ps-cuadro-34 { width: 34px !important; height: 34px !important; }
.ps-cuadro-36 { width: 36px !important; height: 36px !important; } .ps-cuadro-40 { width: 40px !important; height: 40px !important; } .ps-cuadro-44 { width: 44px !important; height: 44px !important; }
.ps-cuadro-48 { width: 48px !important; height: 48px !important; }

/* ── Piezas que se repiten en varias pantallas ─────────────────────────────── */
/* La vista previa del ticket en el modal de impresion (mesas, cocina, ventas, pedidos) */
.ps-ticket-preview { background: #fff; font-family: 'Courier New', monospace; font-size: 12px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.ps-ticket-preview pre { white-space: pre-wrap; }
/* Cantidad por medida (⚖️ 250 g): el violeta que ya usa la venta */
:is(#ps-pos-prioridad, .text-medida) { color: #6f42c1 !important; }
html[data-ps-theme="dark"] :is(#ps-pos-prioridad, .text-medida) { color: #c4b5fd !important; }

/* text-white de Bootstrap, con peso de id: un texto blanco a proposito (sobre una
   cabecera de color) tiene que seguir blanco en oscuro, no del gris general. */
:is(#ps-pos-prioridad, .text-white) { color: #fff !important; }

/* ── Pestañas con aire (15/10/2026): las .nav-tabs de Bootstrap venían pegadas una a otra
   (p. ej. inventario de insumos); un gap chico y las esquinas de arriba redondeadas. ── */
.nav-tabs { gap: 6px; }
.nav-tabs .nav-link { border-radius: 12px 12px 0 0; }