/* ═══════════════════════════════════════════════════════════════════════════
   JGF Suite Comercial — Tokens de diseño
   ───────────────────────────────────────────────────────────────────────────
   Todos los valores de diseño viven aquí como CSS custom properties.
   El equivalente en C# está en Theming/CommercialTheme.cs.

   Personalización por tenant (futura): inyectar un <style> con :root overrides
   desde la configuración del tenant antes de que cargue la app.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Colores de marca (JFG Design System — esmeralda + slate) ─────────── */
    --jgf-primary:            #10b981;       /* emerald-500 */
    --jgf-primary-rgb:        16, 185, 129;  /* para rgba(var(--jgf-primary-rgb), .x) */
    --jgf-primary-dark:       #059669;       /* emerald-600 */
    --jgf-primary-light:      #34d399;       /* emerald-400 */
    --jgf-secondary:          #2563eb;       /* azul — links / info */
    --jgf-success:            #10b981;
    --jgf-info:               #3b82f6;
    --jgf-warning:            #f59e0b;
    --jgf-error:              #ef4444;

    /* ── Superficies ─────────────────────────────────────────────────────── */
    --jgf-bg:                 #f8fafc;       /* slate-50 */
    --jgf-surface:            #ffffff;

    /* ── Drawer / navegación lateral (chrome oscuro slate) ───────────────── */
    --jgf-drawer-bg:          #0f172a;       /* slate-900 */
    --jgf-drawer-text:        #cbd5e1;       /* slate-300 */
    --jgf-drawer-text-rgb:    203, 213, 225;
    --jgf-drawer-icon:        #94a3b8;       /* slate-400 */
    --jgf-drawer-width:       220px;
    --jgf-drawer-width-admin: 240px;

    /* ── Texto ───────────────────────────────────────────────────────────── */
    --jgf-text-primary:       #0f172a;       /* slate-900 */
    --jgf-text-secondary:     #64748b;       /* slate-500 */

    /* ── Tipografía ──────────────────────────────────────────────────────── */
    --jgf-font:               'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --jgf-font-size:          14px;   /* base — sube para menos densidad, baja para más */
    --jgf-font-size-xs:       10px;
    --jgf-font-size-sm:       11px;
    --jgf-font-size-md:       13px;
    --jgf-font-size-lg:       15px;
    --jgf-font-size-xl:       17px;

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --jgf-appbar-height:      48px;   /* sincronizado con CommercialTheme.AppbarHeight */
    --jgf-radius:             4px;
    --jgf-radius-lg:          8px;

    /* ── Objetivos táctiles ──────────────────────────────────────────────── */
    --jgf-touch-min:          40px;   /* mouse / stylus */
    --jgf-touch-min-coarse:   44px;   /* touch (pantallas táctiles) */
}


/* ─── Base ──────────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--jgf-font);
    font-size:   var(--jgf-font-size);
    background:  var(--jgf-bg);
}


/* ─── Blazor error overlay ──────────────────────────────────────────────── */
#blazor-error-ui {
    display:    none;
    position:   fixed;
    bottom: 0; left: 0; right: 0;
    z-index:    9999;
    background: var(--jgf-error);
    color:      #fff;
    padding:    .75rem 1.25rem;
    font-size:  .875rem;
    box-shadow: 0 -2px 8px rgba(0,0,0,.25);
}
#blazor-error-ui .reload   { color: #ffeb3b; font-weight: 600; margin-left: .5rem; }
#blazor-error-ui .dismiss  { float: right; cursor: pointer; }
.blazor-error-boundary     { display: none; }


/* ─── POS — navegación ──────────────────────────────────────────────────── */

/* Touch-friendly nav links */
.pos-nav .mud-nav-link {
    min-height:  var(--jgf-touch-min-coarse);
    padding:     0 12px;
    font-size:   .9375rem;
    font-weight: 500;
}
.pos-nav .mud-nav-link:hover,
.pos-nav .mud-nav-link.active {
    background:    rgba(255,255,255,.1) !important;
    border-radius: var(--jgf-radius-lg);
}

/* Nav item: texto a la izquierda, atajo de teclado a la derecha */
.pos-nav-item        { display: flex; align-items: center; width: 100%; gap: 8px; }
.pos-nav-item span   { flex: 1; }

/* Badge de atajo de teclado */
.pos-kbd {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Consolas', 'Courier New', monospace;
    font-size:       .65rem;
    font-weight:     600;
    font-style:      normal;
    color:           rgba(255,255,255,.55);
    background:      rgba(255,255,255,.1);
    border:          1px solid rgba(255,255,255,.2);
    border-radius:   var(--jgf-radius);
    padding:         1px 5px;
    min-width:       24px;
    line-height:     1.5;
    white-space:     nowrap;
    flex-shrink:     0;
}


/* ─── Drawer personalizado (POS) ────────────────────────────────────────── */
.pos-nav-drawer {
    position:   fixed;
    top:        var(--mud-appbar-height, var(--jgf-appbar-height));
    left:       0;
    width:      var(--jgf-drawer-width);  /* 220px */
    height:     calc(100vh - var(--mud-appbar-height, var(--jgf-appbar-height)));
    background: var(--jgf-drawer-bg);
    z-index:    1200;
    transform:  translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255,255,255,.08);
    --mud-palette-text-primary:    var(--jgf-drawer-text);
    --mud-palette-action-default:  var(--jgf-drawer-icon);
}
.pos-nav-drawer--open { transform: translateX(0); }

/* Semáforo de validación de la línea del carrito (revisión pre-facturación).
   Rojo = no facturable (bloquea); ámbar = advertencia (permite). */
.pos-linea-error {
    border-color: #d32f2f !important;
    border-left: 4px solid #d32f2f !important;
    background: #fdecea !important;
}
.pos-linea-warn {
    border-color: #ed6c02 !important;
    border-left: 4px solid #ed6c02 !important;
    background: #fff4e5 !important;
}

/* Estado "sin caja" del POS: tarjeta centrada. Cuando el menú queda ANCLADO (docked),
   el contenido se corre a la derecha del drawer para que la tarjeta se centre en el
   espacio visible y no quede tapada. */
.pos-sin-caja {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--mud-appbar-height, var(--jgf-appbar-height)) - 5rem);
    transition: padding-left .25s cubic-bezier(.4,0,.2,1);
}
body.pos-drawer-docked .pos-sin-caja { padding-left: var(--jgf-drawer-width); }

.pos-sin-caja-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    max-width: 440px;
    padding: 40px 32px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}
.pos-sin-caja-card .pos-sin-caja-icon {
    font-size: 3.4rem;
    color: var(--jgf-primary, var(--mud-palette-primary));
    opacity: .9;
}

/* Overlay del drawer */
.pos-nav-overlay {
    display:    none;
    position:   fixed;
    top:        var(--mud-appbar-height, var(--jgf-appbar-height));
    right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.5);
    z-index:    1199;
    cursor:     default;
}

/* Header del drawer */
.pos-nav-drawer-header {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        12px 14px;
}
.pos-nav-drawer-label {
    color:          rgba(var(--jgf-drawer-text-rgb), .65);
    font-size:      var(--jgf-font-size-sm);
    text-transform: uppercase;
    letter-spacing: .8px;
}
.pos-nav-drawer-name {
    color:       var(--jgf-drawer-text);
    font-weight: 600;
    line-height: 1.2;
}
.pos-nav-drawer-divider {
    border:     none;
    border-top: 1px solid rgba(255,255,255,.12);
    margin:     0;
}

/* MudNavMenu dentro del drawer POS — item activo con acento esmeralda (DS) */
.pos-nav-drawer .mud-nav-link          { color: var(--jgf-drawer-text) !important; }
.pos-nav-drawer .mud-icon-root         { color: var(--jgf-drawer-icon) !important; }
.pos-nav-drawer .mud-nav-link.active {
    background:    rgba(var(--jgf-primary-rgb), .15) !important;
    color:         var(--jgf-primary-light) !important;
    border-right:  2px solid var(--jgf-primary);
}
.pos-nav-drawer .mud-nav-link.active .mud-icon-root { color: var(--jgf-primary-light) !important; }


/* ─── AppBar ────────────────────────────────────────────────────────────── */
.mud-appbar .mud-chip { cursor: default; }

/* Botón hamburguesa */
.pos-menu-btn {
    background:    transparent;
    border:        none;
    color:         white;
    cursor:        pointer;
    width:         var(--jgf-touch-min);
    height:        var(--jgf-touch-min);
    min-width:     var(--jgf-touch-min);
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-left:   -8px;
    margin-right:  4px;
    transition:    background-color .15s;
    padding:       0;
}
.pos-menu-btn:hover  { background: rgba(255,255,255,.15); }
.pos-menu-btn:active { background: rgba(255,255,255,.25); }


/* ─── Área de contenido ─────────────────────────────────────────────────── */
.mud-main-content { min-height: 100vh; }


/* ─── Objetivos táctiles ────────────────────────────────────────────────── */
.mud-button-root          { min-height: var(--jgf-touch-min); }
.mud-appbar .mud-icon-button { width: var(--jgf-touch-min); height: var(--jgf-touch-min); }

/* En pantallas táctiles aumentamos solo la altura mínima — sin agrandar la fuente */
@media (pointer: coarse) {
    .mud-input-root  { min-height: var(--jgf-touch-min-coarse); }
    .mud-button-root { min-height: var(--jgf-touch-min-coarse); }
}


/* ─── Compacto global — densidad de componentes MudBlazor ──────────────── */

/* Tabs: reducir altura */
.mud-tab { min-height: 40px !important; padding: 6px 14px !important; }
.mud-tabs-header { min-height: 40px !important; }

/* Chips: más pequeños globalmente */
.mud-chip { height: 22px !important; }
.mud-chip .mud-chip-content { padding: 0 8px !important; font-size: var(--jgf-font-size-sm) !important; }

/* DataGrid / MudTable: filas más densas */
.mud-table-cell             { padding: 4px 12px !important; }
.mud-table-head-cell-content{ padding: 6px 0    !important; }

/* Alertas: menos padding vertical */
.mud-alert { padding: 4px 12px !important; }

/* MudExpansionPanel: cabecera más ajustada */
.mud-expand-panel-header { min-height: 44px !important; padding: 0 16px !important; }

/* Breadcrumb: texto más chico */
.mud-breadcrumb-item { font-size: var(--jgf-font-size-md) !important; }

/* Snackbar: más compacto */
.mud-snackbar { font-size: var(--jgf-font-size-md) !important; }


/* ─── Validación MudBlazor ──────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--jgf-primary); }
.invalid                             { outline: 1px solid var(--jgf-error); }
.validation-message                  { color: var(--jgf-error); font-size: .8125rem; }


/* ─── Scrollbar (webkit) ────────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: rgba(0,0,0,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.35); }


/* ─── Layout POS responsivo ─────────────────────────────────────────────── */
/* Móvil (base): la página fluye/scrollea normal y las pestañas alternan catálogo/carrito. */
.pos-carrito-view       { display: flex; flex-direction: column; height: auto; }
.pos-grid               { height: auto; }
.pos-panel              { display: flex; flex-direction: column; gap: 8px; overflow: visible; height: auto; }
/* Sección propia SOLO para los resultados de búsqueda: caja con scroll acotado, de modo que el
   cliente y el buscador quedan visibles arriba (no los tapa el scroll). Los artículos se apilan de
   ARRIBA hacia abajo. En escritorio el media-query la convierte en flex:1 (llena el panel). */
.pos-scrollable-container { margin-top: 6px; display: flex; flex-direction: column;
                            justify-content: flex-start; align-content: flex-start;
                            max-height: 55vh; overflow-y: auto; }
.pos-scrollable-container > * { flex: 0 0 auto; }
.pos-card-panel         { display: flex; flex-direction: column; height: auto; overflow: visible; flex: none; }
.pos-cart-items         { min-height: 80px; height: auto; overflow-y: visible; flex: none; }

@media (min-width: 960px) {
    /* Escritorio: la vista de carrito ocupa EXACTO el viewport bajo el appbar (menos el padding
       vertical del contenedor pa-md-6 = 24px arriba + 24px abajo). Sin scroll de PÁGINA: el scroll
       vive dentro de la lista del carrito y del panel izquierdo (búsqueda de artículos). */
    .pos-carrito-view         { height: calc(100dvh - var(--mud-appbar-height, 48px) - 48px); overflow: hidden; }
    .pos-carrito-view > .pos-draft-tabs,
    .pos-carrito-view > .pos-mobile-tabs,
    .pos-carrito-view > .mud-alert { flex: 0 0 auto; }

    .pos-grid                 { flex: 1 1 auto; min-height: 0; height: auto; align-items: stretch; overflow: hidden; }
    .pos-grid > .pos-panel    { height: 100%; min-height: 0; overflow: hidden; }

    /* Panel izquierdo: NO scrollea entero. La tarjeta de cliente queda fija arriba (con su propio
       scroll si el formulario de nuevo cliente es alto) y el buscador llena el resto; la única zona
       que desborda son los RESULTADOS (.pos-scrollable-container). */
    .pos-grid > .pos-panel:first-of-type > .mud-paper:not(.pos-card-panel) {
        flex: 0 1 auto; min-height: 0; overflow-y: auto;
    }
    /* El buscador (panel izquierdo) se ajusta a su contenido (no se estira a llenar el panel):
       la lista de resultados queda pegada al input y el resto del panel queda libre. */
    .pos-grid > .pos-panel:first-of-type > .pos-card-panel { height: auto; flex: 0 1 auto; min-height: 0; }

    /* Carrito (derecha): llena el alto del panel; header/totales/botones fijos, lista con scroll. */
    .pos-card-panel           { height: 100%; overflow: hidden; flex: 1; }
    /* Resultados de búsqueda: crecen con el contenido (pegados al input) y scrollean al superar el tope. */
    .pos-scrollable-container { flex: 0 1 auto; min-height: 0; max-height: 60vh; overflow-y: auto; }
    .pos-cart-items           { flex: 1 1 0; min-height: 0; overflow-y: auto; }
}


/* ─── Drawer Admin ──────────────────────────────────────────────────────── */
.admin-nav-drawer {
    position:   fixed;
    top:        var(--mud-appbar-height, var(--jgf-appbar-height));
    left:       0;
    width:      var(--jgf-drawer-width-admin);
    height:     calc(100vh - var(--mud-appbar-height, var(--jgf-appbar-height)));
    background: var(--jgf-drawer-bg);
    z-index:    1200;
    transform:  translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255,255,255,.08);
    --mud-palette-text-primary:   var(--jgf-drawer-text);
    --mud-palette-action-default: var(--jgf-drawer-icon);
}
.admin-nav-drawer--open { transform: translateX(0); }

.admin-nav-overlay--open { display: block; }
@media (min-width: 960px) {
    .admin-nav-overlay--open { display: none !important; }
}

/* Desktop: el contenido se desplaza al abrir el drawer */
@media (min-width: 960px) {
    .admin-drawer-open .mud-main-content {
        margin-left: var(--jgf-drawer-width-admin);
        transition:  margin .225s cubic-bezier(0, 0, 0.2, 1) 0ms;
    }
}

/* Header del drawer admin */
.admin-drawer-header {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        12px 14px;
}
.admin-drawer-section-label {
    color:          rgba(var(--jgf-drawer-text-rgb), .6);
    font-size:      .68rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight:    600;
}

/* MudNavMenu dentro del drawer Admin */
.admin-nav-drawer .mud-nav-link         { color: var(--jgf-drawer-text) !important; }
.admin-nav-drawer .mud-icon-root        { color: var(--jgf-drawer-icon) !important; }
.admin-nav-drawer .mud-nav-link.active {
    background:    rgba(var(--jgf-primary-rgb), .15) !important;
    color:         var(--jgf-primary-light) !important;
    border-right:  2px solid var(--jgf-primary);
}
.admin-nav-drawer .mud-nav-link.active .mud-icon-root { color: var(--jgf-primary-light) !important; }
.admin-nav-drawer .mud-nav-group-title,
.admin-nav-drawer .mud-nav-group-header { color: var(--jgf-drawer-text) !important; }
.admin-nav-drawer .mud-divider          { border-color: rgba(255,255,255,.12) !important; }

.admin-nav .mud-nav-link         { min-height: var(--jgf-touch-min); font-size: var(--jgf-font-size-md); font-weight: 500; }
.admin-nav .mud-nav-group-header { font-size: var(--jgf-font-size-md); font-weight: 600; }

/* Breadcrumbs */
.admin-breadcrumb { font-size: .8125rem; }
.admin-breadcrumb .mud-breadcrumb-item a       { color: var(--jgf-primary); text-decoration: none; }
.admin-breadcrumb .mud-breadcrumb-item a:hover { text-decoration: underline; }
.admin-breadcrumb .mud-breadcrumb-separator    { color: rgba(0,0,0,.38); margin: 0 4px; }


/* ─── Tabla de compras / OC — inputs compactos ──────────────────────────── */
.tabla-compras .mud-input,
.tabla-compras .mud-input.mud-input-outlined,
.tabla-compras .mud-input-root { font-size: var(--jgf-font-size-md) !important; }

.tabla-compras .mud-input input,
.tabla-compras .mud-input.mud-input-outlined input,
.tabla-compras .mud-input textarea {
    font-size:      var(--jgf-font-size-md) !important;
    padding-top:    6px !important;
    padding-bottom: 6px !important;
    height:         auto !important;
    min-height:     unset !important;
}
.tabla-compras .mud-select-input,
.tabla-compras .mud-input.mud-input-outlined .mud-select-input {
    font-size:      var(--jgf-font-size-md) !important;
    padding-top:    6px !important;
    padding-bottom: 6px !important;
    min-height:     unset !important;
    height:         auto !important;
    line-height:    1.2 !important;
}
.tabla-compras .mud-input.mud-select .mud-input-adornment .mud-icon-root {
    font-size: 16px !important; width: 16px !important; height: 16px !important;
}
.tabla-compras .mud-input-adornment span,
.tabla-compras .mud-input-adornment .mud-icon-root { font-size: var(--jgf-font-size-sm) !important; }
.tabla-compras .mud-input-root,
.tabla-compras .mud-input-root-outlined {
    min-height: unset !important; padding-top: 8px !important; padding-bottom: 8px !important;
}


/* ─── POS mobile tab bar ────────────────────────────────────────────────── */
.pos-mobile-tabs {
    display:       flex;
    border-radius: var(--jgf-radius-lg);
    overflow:      hidden;
    border:        1px solid rgba(var(--jgf-primary-rgb), .25);
    background:    var(--jgf-surface);
}
.pos-tab-btn {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         9px 12px;
    border:          none;
    background:      transparent;
    cursor:          pointer;
    font-size:       var(--jgf-font-size-md);
    font-weight:     500;
    color:           var(--jgf-text-secondary);
    font-family:     var(--jgf-font);
    transition:      background .15s, color .15s;
}
.pos-tab-btn + .pos-tab-btn { border-left: 1px solid rgba(var(--jgf-primary-rgb), .25); }
.pos-tab-btn.active         { background: var(--jgf-primary); color: white; }
.pos-tab-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       18px;
    height:          18px;
    padding:         0 5px;
    border-radius:   9px;
    font-size:       var(--jgf-font-size-xs);
    font-weight:     700;
    line-height:     1;
    background:      rgba(var(--jgf-primary-rgb), .15);
    color:           var(--jgf-primary);
}
.pos-tab-btn.active .pos-tab-badge {
    background: rgba(255,255,255,.25);
    color:      white;
}


/* ─── POS — pestañas de facturas en borrador (estilo navegador) ─────────── */
.pos-draft-tabs {
    display:     flex;
    align-items: flex-end;
    gap:         4px;
    flex-wrap:   wrap;
}
.pos-draft-tab {
    display:       flex;
    align-items:   center;
    gap:           6px;
    max-width:     220px;
    padding:       7px 10px;
    border:        1px solid rgba(var(--jgf-primary-rgb), .22);
    border-bottom: none;
    border-radius: var(--jgf-radius-md) var(--jgf-radius-md) 0 0;
    background:    var(--jgf-surface);
    color:         var(--jgf-text-secondary);
    cursor:        pointer;
    font-family:   var(--jgf-font);
    font-size:     var(--jgf-font-size-sm);
    font-weight:   500;
    line-height:   1;
    transition:    background .15s, color .15s, border-color .15s;
}
.pos-draft-tab:hover      { background: rgba(var(--jgf-primary-rgb), .06); }
.pos-draft-tab.active {
    background:    var(--jgf-primary);
    border-color:  var(--jgf-primary);
    color:         white;
    font-weight:   600;
}
.pos-draft-tab-ico    { flex: 0 0 auto; opacity: .85; }
.pos-draft-tab-label  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-draft-tab-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       18px;
    height:          18px;
    padding:         0 5px;
    border-radius:   9px;
    font-size:       var(--jgf-font-size-xs);
    font-weight:     700;
    background:      rgba(var(--jgf-primary-rgb), .15);
    color:           var(--jgf-primary);
}
.pos-draft-tab.active .pos-draft-tab-badge { background: rgba(255,255,255,.25); color: white; }
.pos-draft-tab-close {
    display:       flex;
    align-items:   center;
    justify-content:center;
    width:         18px;
    height:        18px;
    padding:       0;
    border:        none;
    border-radius: 50%;
    background:    transparent;
    color:         inherit;
    opacity:       .6;
    font-size:     16px;
    line-height:   1;
    cursor:        pointer;
    transition:    background .15s, opacity .15s;
}
.pos-draft-tab-close:hover        { opacity: 1; background: rgba(0,0,0,.12); }
.pos-draft-tab.active .pos-draft-tab-close:hover { background: rgba(255,255,255,.28); }
.pos-draft-tab-new {
    display:       flex;
    align-items:   center;
    justify-content:center;
    width:         34px;
    height:        34px;
    border:        1px dashed rgba(var(--jgf-primary-rgb), .35);
    border-radius: var(--jgf-radius-md);
    background:    transparent;
    color:         var(--jgf-primary);
    cursor:        pointer;
    transition:    background .15s;
}
.pos-draft-tab-new:hover { background: rgba(var(--jgf-primary-rgb), .1); }


/* ─── POS — pantalla de pago táctil ─────────────────────────────────────── */

/* Grupo de opciones táctil (condición de venta, medio de pago). Tarjetas grandes,
   bien separadas para evitar toques accidentales con el dedo. */
.pos-choice-group {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   12px;
}
.pos-choice-btn {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    min-height:      var(--jgf-touch-min-coarse);   /* 44px */
    padding:         12px 14px;
    border:          1.5px solid rgba(0,0,0,.10);
    border-radius:   14px;
    background:      var(--jgf-surface);
    color:           var(--jgf-text-primary);
    font-family:     var(--jgf-font);
    font-size:       var(--jgf-font-size-lg);
    font-weight:     600;
    cursor:          pointer;
    box-shadow:      0 1px 2px rgba(0,0,0,.04);
    transition:      border-color .15s, background .15s, color .15s, box-shadow .15s, transform .06s;
    -webkit-tap-highlight-color: transparent;
}
.pos-choice-btn .mud-icon-root { color: var(--jgf-primary); transition: color .15s; }

/* Hover solo en las NO seleccionadas — evita que el texto blanco del activo
   quede sobre un fondo claro. */
.pos-choice-btn:hover:not(:disabled):not(.active) {
    border-color: var(--jgf-primary);
    box-shadow:   0 3px 10px rgba(var(--jgf-primary-rgb), .16);
}
.pos-choice-btn:active:not(:disabled) { transform: scale(.97); }

/* Seleccionado: relleno de marca, texto e ícono blancos, sombra suave. */
.pos-choice-btn.active,
.pos-choice-btn.active:hover {
    background:    var(--jgf-primary);
    border-color:  var(--jgf-primary);
    color:         #fff;
    box-shadow:    0 4px 14px rgba(var(--jgf-primary-rgb), .38);
}
.pos-choice-btn.active .mud-icon-root { color: #fff; }

.pos-choice-btn:disabled {
    opacity:      .55;
    cursor:       not-allowed;
    background:    rgba(0,0,0,.03);
    border-color:  rgba(0,0,0,.08);
    box-shadow:    none;
}
.pos-choice-btn:disabled .mud-icon-root { color: rgba(0,0,0,.35); }

/* Medio de pago: tiles con ícono arriba + etiqueta, adaptables (fluyen 2-4
   por fila según el ancho, sin dejar huecos raros). */
.pos-pay-methods {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.pos-pay-methods .pos-choice-btn {
    flex-direction: column;
    gap:            6px;
    min-height:     86px;
    font-size:      var(--jgf-font-size-md);
}
.pos-pay-methods .pos-choice-btn .mud-icon-root { font-size: 30px; width: 30px; height: 30px; }

/* Atajo de teclado (tecla F) para estaciones sin táctil: badge discreto en la
   esquina del botón. Se oculta en dispositivos puramente táctiles (sin teclado). */
.pos-key-hint {
    position:      absolute;
    top:           4px;
    right:         6px;
    font-size:     0.6rem;
    font-weight:   800;
    line-height:   1;
    padding:       1px 4px;
    border-radius: 5px;
    background:    rgba(0,0,0,.06);
    color:         var(--jgf-text-secondary, rgba(0,0,0,.55));
    letter-spacing:.3px;
    pointer-events:none;
}
.pos-choice-btn.active .pos-key-hint { background: rgba(255,255,255,.22); color: #fff; }

/* Hint inline para los botones de acción (Agregar / Confirmar). */
.pos-key-hint-inline {
    font-size:     .62rem;
    font-weight:   800;
    opacity:       .75;
    margin-left:   6px;
    border:        1px solid currentColor;
    border-radius: 5px;
    padding:       0 4px;
    letter-spacing:.3px;
}
@media (hover: none) and (pointer: coarse) {
    .pos-key-hint, .pos-key-hint-inline { display: none; }
}

/* ══ Pantalla de cobro full-width (vista Pago, rediseño) ═══════════════════════ */
.pos-cobro {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          100%;
    max-width:      1400px;
    margin:         0 auto;
    padding:        16px;
}

/* Encabezado: TOTAL A COBRAR grande + métricas (PAGADO / FALTA / VUELTO) */
.pos-cobro-header {
    display:       flex;
    align-items:   stretch;
    gap:           16px;
    flex-wrap:     wrap;
    background:    var(--jgf-surface);
    border:        1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    padding:       18px 22px;
    box-shadow:    0 1px 3px rgba(0,0,0,.05);
}
.pos-cobro-total { flex: 1 1 260px; min-width: 220px; }
.pos-cobro-total .lbl {
    display:        block;
    font-size:      .8rem;
    font-weight:    700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color:          var(--jgf-text-secondary, rgba(0,0,0,.55));
}
.pos-cobro-total .val {
    display:     block;
    font-size:   clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.05;
    color:       var(--jgf-primary);
}
.pos-cobro-metrics { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.pos-metric {
    flex:            1 1 130px;
    min-width:       128px;
    padding:         8px 16px;
    border-left:     1px solid rgba(0,0,0,.08);
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}
.pos-metric span {
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color:          var(--jgf-text-secondary, rgba(0,0,0,.5));
}
.pos-metric b { font-size: 1.4rem; font-weight: 800; white-space: nowrap; }
.pos-metric.pagado b { color: #2563eb; }
.pos-metric.falta  b { color: #ea580c; }
.pos-metric.vuelto b { color: #059669; }

/* Cuerpo: dos columnas (medios+monto | pagos registrados) */
.pos-cobro-body {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    align-items:           start;
}
.pos-cobro-col {
    background:    var(--jgf-surface);
    border:        1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    padding:       18px 20px;
    box-shadow:    0 1px 3px rgba(0,0,0,.05);
}
.pos-cobro-section + .pos-cobro-section { margin-top: 18px; }
.pos-cobro-section-title {
    font-size:     .95rem;
    font-weight:   700;
    margin-bottom: 10px;
    color:         var(--jgf-text-primary);
}

/* Badge "Pronto" para tiles de medio de pago no soportados aún */
.pos-soon {
    position:       absolute;
    top:            4px;
    right:          6px;
    font-size:      .52rem;
    font-weight:    800;
    line-height:    1;
    padding:        2px 5px;
    border-radius:  5px;
    background:     rgba(0,0,0,.08);
    color:          var(--jgf-text-secondary, rgba(0,0,0,.5));
    letter-spacing: .3px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Monto recibido: input grande */
.pos-monto-big .mud-input-slot input { font-size: 1.6rem; font-weight: 800; }

/* Tabla de pagos registrados */
.pos-pay-table { width: 100%; border-collapse: collapse; }
.pos-pay-table th {
    text-align:     left;
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color:          var(--jgf-text-secondary, rgba(0,0,0,.5));
    padding:        8px 10px;
    border-bottom:  1px solid rgba(0,0,0,.08);
}
.pos-pay-table td {
    padding:       10px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size:     .9rem;
    vertical-align: middle;
}
.pos-pay-table td.amount { text-align: right; font-weight: 700; white-space: nowrap; }
.pos-pay-table .empty {
    text-align: center;
    color:      var(--jgf-text-secondary, rgba(0,0,0,.45));
    padding:    28px 10px;
    font-size:  .9rem;
}

/* Resumen (columna derecha): TOTAL / PAGADO / VUELTO */
.pos-cobro-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pos-cobro-summary .box {
    flex:          1 1 120px;
    min-width:     108px;
    border:        1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding:       10px 14px;
}
.pos-cobro-summary .box span {
    display:        block;
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--jgf-text-secondary, rgba(0,0,0,.5));
}
.pos-cobro-summary .box b { font-size: 1.15rem; font-weight: 800; }

/* Pie: observación + CONFIRMAR VENTA grande */
.pos-cobro-footer {
    display:       flex;
    gap:           16px;
    flex-wrap:     wrap;
    align-items:   stretch;
    background:    var(--jgf-surface);
    border:        1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    padding:       16px 20px;
    box-shadow:    0 1px 3px rgba(0,0,0,.05);
}
.pos-cobro-footer .obs { flex: 1 1 340px; min-width: 240px; }
.pos-cobro-confirm { flex: 1 1 300px; min-width: 240px; display: flex; align-items: stretch; }
.pos-cobro-confirm .mud-button-root { width: 100%; min-height: 74px; font-size: 1.2rem; font-weight: 800; }

/* Responsive: apilar columnas en pantallas angostas */
@media (max-width: 900px) {
    .pos-cobro-body   { grid-template-columns: 1fr; }
    .pos-cobro-header { flex-direction: column; }
    .pos-metric       { border-left: none; border-top: 1px solid rgba(0,0,0,.08); padding: 8px 0; }
}

/* Escritorio: la pantalla de COBRO ocupa EXACTO el viewport bajo el appbar (sin scroll de PÁGINA).
   El encabezado (TOTAL) y el pie (CONFIRMAR VENTA) quedan SIEMPRE visibles; el scroll, si el
   contenido es alto (multimoneda / muchos medios), vive DENTRO de cada columna. Espaciado compacto
   para que todo entre en una sola pantalla. */
@media (min-width: 960px) {
    .pos-cobro {
        height:     calc(100dvh - var(--mud-appbar-height, 48px) - 48px);
        overflow:   hidden;
        gap:        10px;
        padding:    0;
    }
    /* Todos los hijos directos son de alto fijo salvo el cuerpo (que llena el resto). */
    .pos-cobro > *          { flex: 0 0 auto; }
    .pos-cobro-body {
        flex:        1 1 auto;
        min-height:  0;
        overflow:    hidden;
        align-items: stretch;   /* las columnas toman todo el alto para poder scrollear adentro */
    }
    .pos-cobro-col {
        min-height:  0;
        max-height:  100%;
        overflow-y:  auto;
    }

    /* Encabezado: TOTAL a la izquierda + métricas SIEMPRE en línea a la derecha (como el diseño). */
    .pos-cobro-header  { flex-wrap: nowrap; align-items: center; }
    .pos-cobro-total   { flex: 0 1 auto; min-width: 0; }
    .pos-cobro-metrics { flex: 0 0 auto; margin-left: auto; flex-wrap: nowrap; }

    /* Compactar para ganar altura */
    .pos-cobro-header { padding: 12px 20px; border-radius: 14px; }
    .pos-cobro-footer { padding: 12px 16px; border-radius: 14px; }
    .pos-cobro-col    { padding: 14px 16px; border-radius: 14px; }
    .pos-cobro-total .val { font-size: clamp(1.8rem, 3vw, 2.6rem); }
    .pos-metric b     { font-size: 1.25rem; }
    .pos-cobro-section + .pos-cobro-section { margin-top: 12px; }
    .pos-cobro-section-title { margin-bottom: 8px; }
    .pos-pay-methods .pos-choice-btn { min-height: 76px; }
    .pos-cobro-confirm .mud-button-root { min-height: 60px; }

    /* Medios de pago en UNA SOLA FILA en escritorio (se reparten el ancho por igual). */
    .pos-pay-methods {
        grid-template-columns: none;
        grid-auto-flow:   column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

/* Controles de cantidad en el carrito: +/- grandes para el dedo. */
.pos-qty-btn.mud-icon-button {
    min-width:     var(--jgf-touch-min-coarse);
    min-height:    var(--jgf-touch-min-coarse);
    border:        1.5px solid rgba(var(--jgf-primary-rgb), .3);
    border-radius: 12px;
}

/* En pantallas táctiles, agrandar los íconos de acción (borrar, etc.) del
   carrito y de la lista de pagos para que no colisionen al tocar. */
@media (pointer: coarse) {
    .pos-cart-items .mud-icon-button,
    .pos-pay-list   .mud-icon-button {
        min-width:  var(--jgf-touch-min-coarse);
        min-height: var(--jgf-touch-min-coarse);
    }
}

/* Resultados de búsqueda de producto: filas tipo "tile" grandes y tocables. */
.pos-result-item.mud-paper {
    min-height:    56px;
    margin-bottom: 8px;
    border:        1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    transition:    background .12s, border-color .12s, box-shadow .12s, transform .05s;
    -webkit-tap-highlight-color: transparent;
}
.pos-result-item.mud-paper:hover {
    border-color: var(--jgf-primary);
    background:   rgba(var(--jgf-primary-rgb), .05);
    box-shadow:   0 3px 10px rgba(var(--jgf-primary-rgb), .12);
}
.pos-result-item.mud-paper:active { transform: scale(.99); }
/* Fila resaltada por navegación con flechas (↑/↓): claramente visible cuál está seleccionada. */
.pos-result-item.mud-paper.pos-result-selected {
    border-color: var(--jgf-primary);
    background:   rgba(var(--jgf-primary-rgb), .16);
    box-shadow:   inset 4px 0 0 var(--jgf-primary), 0 4px 14px rgba(var(--jgf-primary-rgb), .22);
}
@media (pointer: coarse) {
    .pos-result-item.mud-paper   { min-height: 64px; }
    .pos-result-item .mud-icon-button {
        min-width:  var(--jgf-touch-min-coarse);
        min-height: var(--jgf-touch-min-coarse);
    }
}


/* ─── Inventario / tablas admin — lista compacta móvil ─────────────────── */
.inv-mobile-row {
    display:        flex;
    flex-direction: column;
    padding:        8px 12px;
    border-bottom:  1px solid rgba(0,0,0,.07);
    gap:            2px;
}
.inv-mobile-row:last-child   { border-bottom: none; }
.inv-mobile-row--inactivo    { opacity: .6; }
.inv-mobile-main {
    display:     flex;
    align-items: center;
    gap:         4px;
}
.inv-mobile-nombre {
    flex:          1;
    min-width:     0;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    font-size:     var(--jgf-font-size-md);
    font-weight:   600;
}
.inv-mobile-precio {
    font-size:    var(--jgf-font-size-md);
    font-weight:  600;
    color:        var(--jgf-primary);
    white-space:  nowrap;
    margin-right: 2px;
}
.inv-mobile-sub {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   var(--jgf-font-size-xs);
    color:       var(--jgf-text-secondary);
}


/* ─── Catálogo — vista móvil ────────────────────────────────────────────── */
.catalogo-mobile-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         10px 12px;
    border-bottom:   1px solid rgba(0,0,0,.07);
    font-size:       var(--jgf-font-size-md);
    gap:             8px;
}
.catalogo-mobile-item:last-child { border-bottom: none; }
.catalogo-mobile-item span:first-child {
    flex:         1;
    min-width:    0;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}
.catalogo-mobile-item span:last-child {
    font-weight: 600;
    white-space: nowrap;
    color:       var(--jgf-primary);
}


/* ─── Module cards (dashboard admin) ───────────────────────────────────── */
.admin-module-card {
    cursor:     pointer;
    transition: box-shadow .2s, transform .15s;
    border:     1px solid rgba(0,0,0,.06);
    height:     100%;
}
.admin-module-card:hover {
    box-shadow:   0 4px 20px rgba(var(--jgf-primary-rgb), .18) !important;
    transform:    translateY(-2px);
    border-color: rgba(var(--jgf-primary-rgb), .3);
}

/* En móvil (2 cols) las cards son más angostas — reducir padding e icono */
@media (max-width: 599px) {
    .admin-module-card .mud-card-content { padding: 12px !important; gap: 8px !important; }
    .admin-module-card .mud-icon-root    { font-size: 1.75rem !important; }
}

/* ── Banner "nueva versión disponible" (PWA) ──────────────────────────────── */
.jgf-pwa-update {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 16px;
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid #1e293b;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    animation: jgf-pwa-update-in .25s ease-out;
}
.jgf-pwa-update__icon { color: #34d399; }
.jgf-pwa-update__text { font-size: .9rem; font-weight: 500; }
.jgf-pwa-update__btn  { flex: none; }

@keyframes jgf-pwa-update-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Input grande y prominente para los diálogos del POS que piden un solo dato
   (precio de producto genérico, peso). Hace el campo llamativo y fácil de leer/digitar. */
.pos-input-grande input {
    font-size: 2.1rem;
    font-weight: 700;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
}
.pos-input-grande .mud-input-adornment-text {
    font-size: 1.5rem;
    font-weight: 700;
}