/* ═══ Estándar del POS ═══════════════════════════════════════════════════════════════════════════
   El POS se ve igual en todos los verticales y la referencia es el del restaurante (Sabor Porteño): se
   pidió el 30/10 al ver Comprobantes del restaurante y del comercial lado a lado, con otra barra, otro menú
   y otra letra. Lo usan los layouts del POS (BarraPos + MenuLateralPos), que marcan su MudLayout con
   «jfg-pos». Un vertical nuevo con POS monta lo mismo y sale igual sin tocar su CSS.

   1. Escala: raíz de 16px y la letra del tema del restaurante.
   2. Barra de arriba (BarraPos).
   3. Menú lateral (MenuLateralPos, SeccionMenuPos).

   Subir el ?v= del link en los index.html de los DOS verticales al tocarlo. */

:root {
    --pos-menu-ancho: 260px;
    --pos-menu-fondo: #0f172a;
    --pos-menu-texto: #cbd5e1;
    --pos-menu-icono: #94a3b8;
    --pos-acento:     #10b981;
    --pos-acento-claro: #34d399;
}


/* ── 1. Escala ─────────────────────────────────────────────────────────────────────────────────────
   Con :has() se cambia la raíz —de ella cuelgan los rem de MudBlazor— y alcanza también lo que MudBlazor
   dibuja fuera del layout (diálogos, popovers, snackbars). Gana al :root que emite MudThemeProvider porque
   es más específico. Son los valores del RestaurantTheme y, lo que ese tema no define, los de MudBlazor 9:
   en el restaurante no cambia nada; en el comercial pisa su escala de back-office (14px, botones sin
   mayúsculas, H5/H6 chicos y en negrita, esquinas de 4px). */
html:has(.jfg-pos) {
    font-size: 16px;
    --mud-typography-default-size:          .9375rem;
    --mud-typography-default-lineheight:    1.5;
    --mud-typography-body1-size:            .9375rem;
    --mud-typography-body1-lineheight:      1.5;
    --mud-typography-body2-size:            .875rem;
    --mud-typography-body2-lineheight:      1.43;
    --mud-typography-caption-size:          .75rem;
    --mud-typography-caption-lineheight:    1.66;
    --mud-typography-subtitle1-size:        1rem;
    --mud-typography-subtitle1-lineheight:  1.75;
    --mud-typography-subtitle2-size:        .9375rem;
    --mud-typography-subtitle2-lineheight:  1.57;
    --mud-typography-subtitle2-weight:      600;
    --mud-typography-button-size:           .875rem;
    --mud-typography-button-weight:         500;
    --mud-typography-button-lineheight:     1.75;
    --mud-typography-button-text-transform: uppercase;
    --mud-typography-h5-size:               1.5rem;
    --mud-typography-h5-weight:             400;
    --mud-typography-h5-lineheight:         1.334;
    --mud-typography-h6-size:               1.25rem;
    --mud-typography-h6-weight:             500;
    --mud-typography-h6-lineheight:         1.6;
    --mud-default-borderradius:             10px;
    /* La barra es densa: MudBlazor la dibuja a 3/4 de esto = 48px, la del restaurante. El tema del comercial ponía 48
       (barra de 36). */
    --mud-appbar-height:                    64px;
}
html:has(.jfg-pos) body { font-size: var(--mud-typography-default-size); }

.pos-main {
    background: #f8fafc;
    min-height: 100vh;
}


/* ── 2. Barra de arriba ────────────────────────────────────────────────────────────────────────────── */

/* La marca (MarcaJgf) a la izquierda, siempre: hay que darla a conocer (30/10). Más chica que arriba del menú del
   back-office para caber en 48px; después, una raya y el ícono y el título del vertical. */
.pos-barra__marca {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    color: #fff;
}
.pos-barra .pos-barra__marca .jfg-marca__nube { color: #4fc3f7; font-size: 2rem; }
.pos-barra__marca .jfg-marca__txt b     { font-size: 1.15rem; }
.pos-barra__marca .jfg-marca__txt small { font-size: .55rem; color: #cbd5e1; }

.pos-barra__raya {
    width: 1px;
    height: 24px;
    margin: 0 14px;
    background: rgba(255, 255, 255, .25);
}

/* En el teléfono no cabe todo: queda la marca y se va el título del vertical. */
@media (max-width: 599.98px) {
    .pos-barra__raya, .pos-barra__vertical { display: none !important; }
}

/* La sucursal activa: contorno blanco. */
.pos-barra .mud-chip.pos-barra__sucursal {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    font-size: .75rem;
    height: 28px;
}

/* Lo propio de cada vertical (conexión, pendientes, soporte, estación): mismo alto y letra. */
.pos-barra .mud-chip.pos-barra__chip {
    font-size: .75rem;
    font-weight: 700;
    height: 28px;
}
.pos-barra .mud-chip.pos-barra__chip--accion { cursor: pointer; }


/* ── 3. Menú lateral ───────────────────────────────────────────────────────────────────────────────
   Se abre sobre el contenido desde la hamburguesa: la sucursal arriba, las pantallas con su tecla y, abajo,
   lo propio de cada vertical. El restaurante lo abre con Blazor (pos-menu--on); el comercial, con
   js/pos-layout.js, que pone las mismas clases y además lo ancla (sin fondo) cuando no hay caja abierta. */

.pos-menu-fondo {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.pos-menu-fondo--on { opacity: 1; pointer-events: auto; }

.pos-menu {
    position: fixed;
    /* Justo debajo de la barra densa (3/4 de --mud-appbar-height). Con la altura entera quedaba una franja entre la
       barra y el menú (16px en el restaurante, 12 en el comercial; pedido 30/10). */
    top: calc(var(--mud-appbar-height, 64px) * .75);
    left: 0;
    bottom: 0;
    z-index: 1300;
    width: var(--pos-menu-ancho);
    display: flex;
    flex-direction: column;
    background: var(--pos-menu-fondo);
    color: var(--pos-menu-texto);
    /* Cerrado no proyecta sombra: con translateX(-100%) la sombra quedaba asomada en el borde. */
    box-shadow: none;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .22s, box-shadow .22s;
    overflow-y: auto;
}

.pos-menu--on {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 8px 0 24px rgba(15, 23, 42, .25);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s, box-shadow .22s;
}

.pos-menu__sucursal {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 16px 14px;
}

.pos-menu__etiqueta {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(203, 213, 225, .6);
}

.pos-menu__nombre { font-size: .95rem; font-weight: 700; color: #f1f5f9; }

/* Quién entró y con qué rol («Gerardo · Administrador»), o que es una estación compartida. */
.pos-menu__quien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 8px;
    padding: 3px 10px 3px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--pos-menu-texto);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-menu__quien .mud-icon-root { color: var(--pos-menu-icono); font-size: 1rem; }

.pos-menu__divisor { height: 1px; margin: 0 12px; background: rgba(255, 255, 255, .1); }

.pos-menu__items { display: flex; flex-direction: column; padding: 12px 0 8px; }

/* Igual sea enlace (una pantalla) o botón (algo que hace la pantalla de venta). */
.pos-menu__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-right: 2px solid transparent;
    background: transparent;
    color: var(--pos-menu-texto);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}

.pos-menu__item .mud-icon-root { color: var(--pos-menu-icono); }
.pos-menu__item:hover { background: rgba(255, 255, 255, .05); }

.pos-menu__item--on {
    background: rgba(16, 185, 129, .15);
    color: var(--pos-acento-claro);
    border-right-color: var(--pos-acento);
}

.pos-menu__item--on .mud-icon-root { color: var(--pos-acento-claro); }

.pos-menu__item--off { opacity: .5; cursor: default; }
.pos-menu__item--off:hover { background: transparent; }

.pos-menu__texto { flex: 1; min-width: 0; }

/* Segunda línea de una opción («Con el equipo central del local»). */
.pos-menu__detalle {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.25;
    opacity: .75;
}

.pos-menu__kbd {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 1px 6px;
    border-radius: 5px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: .65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
}

/* Lo que espera (pedidos por cobrar, pedidos en línea nuevos): ámbar. Lo que tiene un problema: rojo. */
.pos-menu__contador {
    flex-shrink: 0;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f59e0b;
    color: #0f172a;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}
.pos-menu__contador--alerta { background: #ef4444; color: #fff; }

/* Secciones de abajo (cambiar de sucursal, este equipo). */
.pos-menu__seccion { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }
.pos-menu__seccion .mud-switch .mud-typography { font-size: .82rem; color: inherit; }

.pos-menu__boton {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: transparent;
    color: var(--pos-menu-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pos-menu__boton:hover { background: rgba(255, 255, 255, .06); }
.pos-menu__boton .mud-icon-root { color: var(--pos-menu-icono); }