/* ============================================================================
   FESv diseño v2 — capa MÓDULOS OPERATIVOS (frente C)
   Restaurante (POS mesas, comanda, KDS), CallCenter, Retail, PosCombustible,
   Producción, AppMotorista, Contabilidad y Reportes.
   · Todo acotado a :root.fesv-v2:not(#_) → con v2 apagado no aplica nada.
   · Solo tokens --v2-* (fesv-v2.css). Sin colores sueltos salvo las tintas del
     KDS/POS, que usan la paleta "ink" del POS de escritorio (Tema.cs).
   · Las reglas de <style> por página y los style="" en línea se neutralizan
     aquí; donde el v1 usa style inline se usa [style*=…] + !important.
   ============================================================================ */

/* ───────────── 0. Utilidades transversales ───────────── */
:root.fesv-v2:not(#_) .table td.text-end,
:root.fesv-v2:not(#_) .table th.text-end,
:root.fesv-v2:not(#_) .kds-time,
:root.fesv-v2:not(#_) .kds-cant,
:root.fesv-v2:not(#_) .pos-prod-price,
:root.fesv-v2:not(#_) .cola-reloj,
:root.fesv-v2:not(#_) .cola-card-num,
:root.fesv-v2:not(#_) .kpi-card h3,
:root.fesv-v2:not(#_) .kpi-card h4 { font-variant-numeric: tabular-nums; }

/* Filas de sección de estados financieros / libros (table-success, table-danger…) */
:root.fesv-v2:not(#_) .table > :not(caption) > tr.table-success > * { --bs-table-bg: var(--v2-ok-soft); --bs-table-color: var(--v2-ok); background-color: var(--v2-ok-soft); color: var(--v2-ok); box-shadow: none; }
:root.fesv-v2:not(#_) .table > :not(caption) > tr.table-danger > * { --bs-table-bg: var(--v2-err-soft); --bs-table-color: var(--v2-err); background-color: var(--v2-err-soft); color: var(--v2-err); box-shadow: none; }
:root.fesv-v2:not(#_) .table > :not(caption) > tr.table-warning > * { --bs-table-bg: var(--v2-warn-soft); --bs-table-color: var(--v2-warn); background-color: var(--v2-warn-soft); color: var(--v2-warn); box-shadow: none; }
:root.fesv-v2:not(#_) .table > :not(caption) > tr.table-info > * { --bs-table-bg: var(--v2-info-soft); --bs-table-color: var(--v2-info); background-color: var(--v2-info-soft); color: var(--v2-info); box-shadow: none; }
:root.fesv-v2:not(#_) .table > :not(caption) > tr.table-primary > * { --bs-table-bg: var(--v2-accent-soft); --bs-table-color: var(--v2-accent-text); background-color: var(--v2-accent-soft); color: var(--v2-accent-text); box-shadow: none; }
:root.fesv-v2:not(#_) .table > :not(caption) > tr.table-secondary > *,
:root.fesv-v2:not(#_) .table > :not(caption) > tr.table-light > * { --bs-table-bg: var(--v2-surface-alt); --bs-table-color: var(--v2-text); background-color: var(--v2-surface-alt); color: var(--v2-text); box-shadow: none; }
:root.fesv-v2:not(#_) .table > :not(caption) > tr.table-dark > * { --bs-table-bg: var(--v2-sunk); --bs-table-color: var(--v2-text); background-color: var(--v2-sunk); color: var(--v2-text); font-weight: 600; box-shadow: none; }

/* Tablas con fondo fijo en línea (Restaurante/Reportes) */
:root.fesv-v2:not(#_) table[style*="#fafbff"] { background: var(--v2-surface-alt) !important; }

/* Separadores punteados de los acordeones de cuentas divididas (Comanda, TomarPedido, RetailVenta) */
:root.fesv-v2:not(#_) [style*="border-bottom:2px dashed #cbd5e1"] { border-bottom-color: var(--v2-border-strong) !important; }

/* ───────────── 1. Pantallas de login táctiles (POS, Retail, Combustible, Motorista) ───────────── */
:root.fesv-v2:not(#_) .pos-login-bg,
:root.fesv-v2:not(#_) .retail-login-bg,
:root.fesv-v2:not(#_) .cmb-login-bg,
:root.fesv-v2:not(#_) [class*="login-bg"] {
    background:
        radial-gradient(circle at 18% 12%, rgba(var(--v2-accent-rgb), .22), transparent 55%),
        var(--v2-ink) !important;
}

/* ───────────── 2. Restaurante · POS (layout .pos-shell) ───────────── */
:root.fesv-v2:not(#_) .pos-shell {
    --pos-bg: var(--v2-bg);
    --pos-surface: var(--v2-surface);
    --pos-text: var(--v2-text);
    --pos-muted: var(--v2-text-3);
    --pos-border: var(--v2-border);
    --pos-canvas-bg: var(--v2-surface-alt);
    --pos-canvas-grid: rgba(16, 24, 40, .05);
    --pos-mesa-libre-bg: var(--v2-surface);
    --pos-mesa-libre-border: var(--v2-border-strong);
    --pos-mesa-mia-bg: var(--v2-err-soft);
    --pos-mesa-mia-border: var(--v2-err-solid);
    --pos-mesa-otro-bg: var(--v2-warn-soft);
    --pos-mesa-otro-border: var(--v2-warn-solid);
    --pos-mesa-bloqueada-bg: var(--v2-sunk);
    --pos-mesa-text: var(--v2-text);
    font-family: var(--v2-font);
}
:root.fesv-v2[data-bs-theme="dark"]:not(#_) .pos-shell {
    --pos-canvas-grid: rgba(255, 255, 255, .05);
    --pos-mesa-mia-bg: rgba(201, 46, 66, .30);
    --pos-mesa-otro-bg: rgba(224, 138, 0, .26);
}
/* el número de mesa tenía sombra para fondos saturados: con fondos suaves sobra */
:root.fesv-v2:not(#_) .mesa-touch strong { text-shadow: none !important; }

/* Mesas — barra, franja sin mesa, leyenda */
:root.fesv-v2:not(#_) .mesas-fs-toolbar { background: var(--v2-surface); border-bottom-color: var(--v2-border); }
:root.fesv-v2:not(#_) .mesas-fs-toolbar .btn { min-height: 44px; }
:root.fesv-v2:not(#_) .mesas-fs-noMesa { background: var(--v2-warn-soft); border-bottom-color: var(--v2-warn-bd); }
:root.fesv-v2:not(#_) .mesas-fs-noMesa-chip { min-height: 44px; }
:root.fesv-v2:not(#_) .mesas-fs-legend { background: var(--v2-surface); border-top-color: var(--v2-border); color: var(--v2-text-2); font-size: var(--v2-fs-caption); }
:root.fesv-v2:not(#_) .mesas-legend-swatch { border-radius: 4px; }
:root.fesv-v2:not(#_) .mesas-fs-legend > span:nth-child(1) .mesas-legend-swatch { background: var(--pos-mesa-libre-bg) !important; border-color: var(--pos-mesa-libre-border) !important; }
:root.fesv-v2:not(#_) .mesas-fs-legend > span:nth-child(2) .mesas-legend-swatch { background: var(--pos-mesa-mia-bg) !important; border-color: var(--pos-mesa-mia-border) !important; }
:root.fesv-v2:not(#_) .mesas-fs-legend > span:nth-child(3) .mesas-legend-swatch { background: var(--pos-mesa-otro-bg) !important; border-color: var(--pos-mesa-otro-border) !important; }
:root.fesv-v2:not(#_) .mesas-fs-legend > span:nth-child(4) .mesas-legend-swatch { background: var(--pos-mesa-bloqueada-bg) !important; border-color: var(--pos-mesa-libre-border) !important; }
/* elementos decorativos del plano (pared, barra…) en línea */
:root.fesv-v2:not(#_) [style*="border:2px dashed #94a3b8"],
:root.fesv-v2:not(#_) [style*="border:2px dashed #64748b"] { border-color: var(--v2-border-strong) !important; color: var(--v2-text-3) !important; }

/* Comanda — encabezado del panel derecho y franja de asiento */
:root.fesv-v2:not(#_) .comanda-right-card { background: var(--v2-surface); color: var(--v2-text); border: 1px solid var(--v2-border) !important; border-radius: var(--v2-r); }
:root.fesv-v2:not(#_) .comanda-right-head {
    background: var(--v2-ink) !important;
    color: var(--v2-ink-text) !important;
    border-bottom: 0;
}
:root.fesv-v2:not(#_) .comanda-right-card [style*="#fef3c7"] { background: var(--v2-warn-soft) !important; border-bottom-color: var(--v2-warn-bd) !important; }
:root.fesv-v2:not(#_) .comanda-right-card [style*="#fef3c7"] .text-dark { color: var(--v2-warn) !important; }
:root.fesv-v2:not(#_) .comanda-right-foot { background: var(--v2-surface-alt) !important; border-top-color: var(--v2-border); }
:root.fesv-v2:not(#_) .item-row { border-bottom-color: var(--v2-border-subtle); }
:root.fesv-v2:not(#_) .item-row:hover { background-color: var(--v2-row-hover); }
:root.fesv-v2:not(#_) .item-cancelado { background-color: var(--v2-err-soft); }
:root.fesv-v2:not(#_) .item-cancelado .fw-semibold,
:root.fesv-v2:not(#_) .item-cancelado .fw-bold,
:root.fesv-v2:not(#_) .item-cancelado small { text-decoration-color: var(--v2-err); }

/* Comanda — catálogo táctil */
:root.fesv-v2:not(#_) .pos-cat-pill { min-height: 48px; border-width: 1px; border-color: var(--v2-border); box-shadow: var(--v2-shadow-1); }
:root.fesv-v2:not(#_) .pos-cat-pill.active { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-on-accent); box-shadow: 0 4px 12px rgba(var(--v2-accent-rgb), .30); }
:root.fesv-v2:not(#_) .pos-cat-count { background: var(--v2-sunk); }
:root.fesv-v2:not(#_) .pos-cat-pill.active .pos-cat-count { background: rgba(255, 255, 255, .22); }
:root.fesv-v2:not(#_) .pos-prod-tile { border-width: 1px; border-color: var(--v2-border); border-radius: var(--v2-r); box-shadow: var(--v2-shadow-1); }
:root.fesv-v2:not(#_) .pos-prod-tile:hover { border-color: var(--v2-accent); }
:root.fesv-v2:not(#_) .pos-prod-img { background: var(--v2-sunk); border-radius: var(--v2-r-sm); }
:root.fesv-v2:not(#_) .pos-prod-name { color: var(--v2-text); font-weight: 600; }
:root.fesv-v2:not(#_) .pos-prod-price { color: var(--v2-ok); font-weight: 700; }
:root.fesv-v2:not(#_) .pos-modal-touch .btn { min-height: 48px; }
:root.fesv-v2:not(#_) .pos-mesa-btn.mesa-ocupada { background: var(--v2-err-soft); border-color: var(--v2-err-bd); color: var(--v2-err); }
:root.fesv-v2:not(#_) .pos-actionsheet-list button { min-height: 48px; }
:root.fesv-v2:not(#_) .pos-actionsheet-list button.danger { color: var(--v2-err); }
:root.fesv-v2:not(#_) .combo-opcion-card.combo-opcion-elegida { border-color: var(--v2-ok-solid); background: var(--v2-ok-soft); }
:root.fesv-v2:not(#_) .combo-grupo-head,
:root.fesv-v2:not(#_) .combo-hijo { border-color: var(--v2-accent) !important; }

/* KOT en pantalla (ticket papel: se mantiene blanco, solo borde) */
:root.fesv-v2:not(#_) .kot-ticket { border-color: var(--v2-border-strong); box-shadow: var(--v2-shadow-1); }

/* ───────────── 3. Restaurante · KDS (Cocina) ─────────────
   Siempre en tinta oscura (claro y oscuro): legible a distancia y a la
   identidad del POS. Semáforo con semánticos: fresco=ok, cálido=aviso, urgente=error. */
:root.fesv-v2:not(#_) body:has(.kds-wrap),
:root.fesv-v2:not(#_):has(.kds-wrap) { background: var(--v2-ink) !important; }
:root.fesv-v2:not(#_) .kds-wrap {
    --kds-bg: #0B1018;
    --kds-surface: #182030;
    --kds-surface-2: #222B3B;
    --kds-line: #2E3747;
    --kds-text: #EEF2F7;
    --kds-text-2: #B4BDCB;
    --kds-ok: #4CC38A;
    --kds-warn: #F2B35B;
    --kds-err: #F4828F;
    --kds-err-solid: #C92E42;
    background: var(--kds-bg);
    font-family: var(--v2-font);
    color: var(--kds-text);
}
:root.fesv-v2:not(#_) .kds-header { background: var(--v2-ink); border-bottom: 1px solid var(--kds-line); padding: 10px 16px; }
:root.fesv-v2:not(#_) .kds-header .btn { min-height: 44px; min-width: 44px; border-radius: var(--v2-r-sm); }
:root.fesv-v2:not(#_) .kds-header .btn-outline-light { color: var(--kds-text); border-color: var(--kds-line); background: var(--kds-surface); }
:root.fesv-v2:not(#_) .kds-header .btn-outline-light:hover { background: var(--kds-surface-2); }
:root.fesv-v2:not(#_) .kds-header .form-select { min-height: 44px; background-color: var(--kds-surface); color: var(--kds-text); border-color: var(--kds-line); }
:root.fesv-v2:not(#_) .kds-header .badge.bg-info { background: rgba(var(--v2-accent-rgb), .22) !important; color: #B5CFFF !important; font-weight: 600; }
:root.fesv-v2:not(#_) .kds-resumen { background: var(--v2-ink); border-bottom: 1px solid var(--kds-line); color: var(--kds-text-2); }
:root.fesv-v2:not(#_) .kds-resumen-chip { background: var(--kds-surface); border: 1px solid var(--kds-line); color: var(--kds-text); border-radius: var(--v2-r-pill); }
:root.fesv-v2:not(#_) .kds-resumen-chip strong { color: var(--kds-warn); }

:root.fesv-v2:not(#_) .kds-card { background: var(--kds-surface); border: 1px solid var(--kds-line); border-top: 4px solid var(--kds-line); border-radius: var(--v2-r); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
:root.fesv-v2:not(#_) .kds-card.kds-fresh { border-top-color: var(--kds-ok); }
:root.fesv-v2:not(#_) .kds-card.kds-warm { border-top-color: var(--kds-warn); }
:root.fesv-v2:not(#_) .kds-card.kds-hot { border-top-color: var(--kds-err); }
:root.fesv-v2:not(#_) .kds-card.kds-done { border-top-color: var(--kds-ok); }
:root.fesv-v2:not(#_) .kds-card-head { background: transparent; color: var(--kds-text); border-bottom: 1px solid var(--kds-line); }
:root.fesv-v2:not(#_) .kds-card-actions { background: transparent; border-bottom: 1px solid var(--kds-line); }
:root.fesv-v2:not(#_) .kds-card-actions .btn { min-height: 44px; }
:root.fesv-v2:not(#_) .kds-mesero { color: var(--kds-text-2); }
:root.fesv-v2:not(#_) .kds-time { color: var(--kds-text); font-weight: 700; }
:root.fesv-v2:not(#_) .kds-warm .kds-time { color: var(--kds-warn); }
:root.fesv-v2:not(#_) .kds-hot .kds-time { color: var(--kds-err); }
:root.fesv-v2:not(#_) .kds-fresh .kds-time { color: var(--kds-ok); }

:root.fesv-v2:not(#_) .kds-item { background: var(--kds-surface-2); color: var(--kds-text); border-radius: var(--v2-r-sm); min-height: 48px; }
:root.fesv-v2:not(#_) .kds-pedido { border-left-color: var(--kds-text-2); }
:root.fesv-v2:not(#_) .kds-preparando { border-left-color: var(--kds-warn); background: rgba(240, 168, 71, .14); }
:root.fesv-v2:not(#_) .kds-servido { border-left-color: var(--kds-ok); }
:root.fesv-v2:not(#_) .kds-cancelado { border-left-color: var(--kds-err); background: rgba(242, 112, 127, .16); animation: none; }
:root.fesv-v2:not(#_) .kds-banner-cancel,
:root.fesv-v2:not(#_) .kds-urgente-banner { background: var(--kds-err-solid); color: #fff; border-radius: 4px; }
:root.fesv-v2:not(#_) .kds-tachado { color: var(--kds-err) !important; }
:root.fesv-v2:not(#_) .kds-motivo { background: rgba(0, 0, 0, .25); color: var(--kds-warn); }
:root.fesv-v2:not(#_) .kds-urgente { box-shadow: 0 0 0 2px var(--kds-err); }
:root.fesv-v2:not(#_) .kds-cant { color: var(--kds-warn); }
:root.fesv-v2:not(#_) .kds-nota { color: var(--kds-warn); }
:root.fesv-v2:not(#_) .kds-recall { min-height: 36px; min-width: 36px; }
:root.fesv-v2:not(#_) .kds-empty { color: var(--kds-text-2); }
:root.fesv-v2:not(#_) .kds-empty i { color: var(--kds-ok); }
:root.fesv-v2:not(#_) .kds-wrap .badge.bg-dark { background: var(--v2-ink) !important; border: 1px solid var(--kds-line); }
:root.fesv-v2:not(#_) .kds-wrap .badge.bg-secondary { background: var(--kds-line) !important; }
@media (prefers-reduced-motion: no-preference) {
    :root.fesv-v2:not(#_) .kds-card.kds-hot { animation: none; }
}

/* ───────────── 4. CallCenter · Cola de sucursal ───────────── */
:root.fesv-v2:not(#_) .cola-wrap { background: var(--v2-bg); }
:root.fesv-v2:not(#_) .cola-header { background: var(--v2-ink); color: var(--v2-ink-text); border-radius: var(--v2-r); }
:root.fesv-v2:not(#_) .cola-kpis .kpi { background: rgba(255, 255, 255, .06); color: var(--v2-ink-text); border: 1px solid rgba(255, 255, 255, .08); font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) .cola-kpis .kpi-warn { background: rgba(224, 138, 0, .22); color: #F9CF8E; border-color: rgba(242, 179, 91, .35); }
:root.fesv-v2:not(#_) .cola-kpis .kpi-ok { background: rgba(76, 195, 138, .18); color: #9BE3BD; border-color: rgba(92, 203, 147, .35); }
:root.fesv-v2:not(#_) .cola-kpis .kpi-info,
:root.fesv-v2:not(#_) .cola-kpis .kpi-blue { background: rgba(var(--v2-accent-rgb), .24); color: #B5CFFF; border-color: rgba(141, 183, 255, .35); }
:root.fesv-v2:not(#_) .cola-reloj { color: var(--v2-ink-text); }
:root.fesv-v2:not(#_) .cola-ruteros { border-top-color: var(--v2-accent); background: var(--v2-surface); }
:root.fesv-v2:not(#_) .cola-section-title { color: var(--v2-text); border-bottom: 1px solid var(--v2-border); font-size: var(--v2-fs-sub); }
:root.fesv-v2:not(#_) .cola-wrap .cola-header .text-white-50 { color: var(--v2-ink-text-2) !important; }
:root.fesv-v2:not(#_) .cola-col-title,
:root.fesv-v2:not(#_) [class*="cola-"] h5,
:root.fesv-v2:not(#_) [class*="cola-"] h6 { color: var(--v2-text); border-bottom-color: var(--v2-border); }
:root.fesv-v2:not(#_) .cola-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-left: 4px solid var(--v2-border-strong); border-radius: var(--v2-r); box-shadow: var(--v2-shadow-1); color: var(--v2-text); }
:root.fesv-v2:not(#_) .cola-card.cola-en_preparacion { border-left-color: var(--v2-warn-solid); background: var(--v2-surface); }
:root.fesv-v2:not(#_) .cola-card.cola-listo_para_entrega { border-left-color: var(--v2-ok-solid); background: var(--v2-surface); }
:root.fesv-v2:not(#_) .cola-card.cola-entregando { border-left-color: var(--v2-accent); background: var(--v2-surface); }
:root.fesv-v2:not(#_) .cola-card.cola-entregado { border-left-color: var(--v2-text-4); }
:root.fesv-v2:not(#_) .cola-card .btn { min-height: 40px; }
:root.fesv-v2:not(#_) .cola-card-num { color: var(--v2-text); font-weight: 700; }
:root.fesv-v2:not(#_) .cola-card-tiempo,
:root.fesv-v2:not(#_) .cola-card-items { color: var(--v2-text-2); }
:root.fesv-v2:not(#_) .cola-badge { border-radius: var(--v2-r-pill); font-weight: 600; }
:root.fesv-v2:not(#_) .cola-badge.badge-warn { background: var(--v2-warn-soft); color: var(--v2-warn); border: 1px solid var(--v2-warn-bd); }
:root.fesv-v2:not(#_) .cola-badge.badge-ok { background: var(--v2-ok-soft); color: var(--v2-ok); border: 1px solid var(--v2-ok-bd); }
:root.fesv-v2:not(#_) .cola-badge.badge-blue { background: var(--v2-info-soft); color: var(--v2-info); border: 1px solid var(--v2-info-bd); }
:root.fesv-v2:not(#_) .cola-badge.badge-gray { background: var(--v2-sunk); color: var(--v2-text-2); border: 1px solid var(--v2-border); }
:root.fesv-v2:not(#_) .cola-motorista { background: var(--v2-accent-soft); color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .cola-tabla th { background: var(--v2-surface-alt); color: var(--v2-text-2); font-weight: 600; }
:root.fesv-v2:not(#_) .cola-empty { color: var(--v2-text-3); }
:root.fesv-v2:not(#_) .cc-map-box { background: var(--v2-sunk) !important; border-radius: var(--v2-r); }

/* ───────────── 5. AppMotorista (táctil, legible al sol) ─────────────
   Estilos base viven en Shared/AppMotoristaLayout.razor (frente A);
   se sobrescriben aquí con más contraste y objetivos ≥52px. */
:root.fesv-v2:not(#_) .mot-app { background: var(--v2-bg); font-family: var(--v2-font); color: var(--v2-text); }
:root.fesv-v2:not(#_) .mot-splash { background: var(--v2-surface); }
:root.fesv-v2:not(#_) .mot-header { background: var(--v2-ink); color: var(--v2-ink-text); }
:root.fesv-v2:not(#_) .mot-card:not([class*="accent-"]) { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-r); box-shadow: var(--v2-shadow-1); color: var(--v2-text); }
:root.fesv-v2:not(#_) .mot-title { font-weight: 700; color: var(--v2-text); }
:root.fesv-v2:not(#_) [class*="mot-btn"] { min-height: 52px; border-radius: var(--v2-r); font-weight: 600; font-size: 1.05rem; }
:root.fesv-v2:not(#_) .mot-btn-primary { background: var(--v2-accent); color: var(--v2-on-accent); }
:root.fesv-v2:not(#_) .mot-btn-success { background: var(--v2-ok-solid); color: #fff; }
:root.fesv-v2:not(#_) .mot-btn-danger { background: var(--v2-err-solid); color: #fff; }
:root.fesv-v2:not(#_) .mot-btn-outline { color: var(--v2-accent-text); border: 1.5px solid var(--v2-accent); background: var(--v2-surface); }
:root.fesv-v2:not(#_) .mot-btn-ghost { color: var(--v2-text-2); border: 1px dashed var(--v2-border-strong); }
:root.fesv-v2:not(#_) .mot-list-item { border-bottom: 1px solid var(--v2-border-subtle); color: var(--v2-text); }
:root.fesv-v2:not(#_) .mot-list-item .val { font-weight: 600; }
:root.fesv-v2:not(#_) .mot-error { color: var(--v2-err); font-weight: 600; }
:root.fesv-v2:not(#_) .mot-link { color: var(--v2-accent-text); font-weight: 600; }
:root.fesv-v2:not(#_) .mot-app [style*="color:#0d6efd"] { color: var(--v2-accent-text) !important; }
:root.fesv-v2:not(#_) .mot-app [style*="color:#64748b"] { color: var(--v2-text-3) !important; }
:root.fesv-v2:not(#_) .mot-app input.form-control,
:root.fesv-v2:not(#_) .mot-app .form-control { min-height: 48px; font-size: 1rem; }

/* ───────────── 6. Retail / PosCombustible (layouts .retail-shell / .cmb) ───────────── */
:root.fesv-v2:not(#_) .retail-shell {
    --retail-bg: var(--v2-bg);
    --retail-surface: var(--v2-surface);
    --retail-text: var(--v2-text);
    --retail-muted: var(--v2-text-3);
    --retail-border: var(--v2-border);
}
:root.fesv-v2:not(#_) .retail-main .btn-lg,
:root.fesv-v2:not(#_) .retail-main .list-group-item-action { min-height: 44px; }
:root.fesv-v2:not(#_) tr[style*="inset 3px 0 0 #dc3545"] { box-shadow: inset 3px 0 0 var(--v2-err-solid) !important; }

/* ───────────── 7. Contabilidad ───────────── */
:root.fesv-v2:not(#_) .asientos-grid thead th,
:root.fesv-v2:not(#_) .partida-grid thead th { background: var(--v2-surface-alt); color: var(--v2-text-2); border-bottom: 1px solid var(--v2-border); }
:root.fesv-v2:not(#_) .card .table code { background: transparent; padding: 0; color: var(--v2-text-2); font-family: var(--v2-mono); }

/* ───────────── 8. Reportes ───────────── */
:root.fesv-v2:not(#_) .kpi-card { border: 1px solid var(--v2-border) !important; border-left-width: 3px !important; box-shadow: var(--v2-shadow-1); }
:root.fesv-v2:not(#_) .kpi-card:hover { transform: none; }
:root.fesv-v2:not(#_) .kpi-card.kpi-info { border-left-color: var(--v2-info-solid) !important; }
:root.fesv-v2:not(#_) .kpi-card.kpi-success { border-left-color: var(--v2-ok-solid) !important; }
:root.fesv-v2:not(#_) .kpi-card.kpi-warning { border-left-color: var(--v2-warn-solid) !important; }
:root.fesv-v2:not(#_) .kpi-card.kpi-danger { border-left-color: var(--v2-err-solid) !important; }
:root.fesv-v2:not(#_) .resumen-imp .row-total-iva td { background: var(--v2-warn-soft) !important; border-color: var(--v2-warn-bd); color: var(--v2-text); }
:root.fesv-v2:not(#_) .resumen-imp .row-total-final td,
:root.fesv-v2:not(#_) .resumen-imp .row-total-final td:first-child { background: var(--v2-err-soft) !important; color: var(--v2-err) !important; border-top: 2px solid var(--v2-err-solid); }
:root.fesv-v2:not(#_) .resumen-imp .mes-actual { background: var(--v2-accent-soft) !important; color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .resumen-imp .mes-th-link:hover { background: var(--v2-accent-soft-2) !important; color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .resumen-imp td { font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) .casilla-badge { background: var(--v2-accent-soft); color: var(--v2-accent-text); border-color: var(--v2-accent-soft-2); font-family: var(--v2-mono); }
:root.fesv-v2:not(#_) .simf-calc { background: var(--v2-surface-alt); font-family: var(--v2-mono); }
:root.fesv-v2:not(#_) .simf-manual { background: var(--v2-warn-soft); }
:root.fesv-v2:not(#_) .simf-input-wrap .simf-pencil { color: var(--v2-warn); }
/* Marco de visores FastReport/PDF: solo el contenedor, nunca el interior */
:root.fesv-v2:not(#_) iframe[src*="pdf"],
:root.fesv-v2:not(#_) .frx-visor,
:root.fesv-v2:not(#_) .fr-webreport-container { border: 1px solid var(--v2-border) !important; border-radius: var(--v2-r); background: var(--v2-surface); }

/* ───────────── 9. Ajustes ronda 1 (revisión de capturas) ───────────── */
/* KDS: etiquetas de switches y chips de reloj legibles sobre tinta */
:root.fesv-v2:not(#_) .kds-header .form-check-label,
:root.fesv-v2:not(#_) .kds-header .text-white-50 { color: var(--kds-text-2) !important; }
:root.fesv-v2:not(#_) .kds-header h4 { color: var(--kds-text) !important; }
:root.fesv-v2:not(#_) .kds-wrap .kds-item .badge { color: var(--kds-text-2) !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--kds-line) !important; }
:root.fesv-v2:not(#_) .kds-wrap .kds-item .badge.text-warning { color: var(--kds-warn) !important; }
:root.fesv-v2:not(#_) .kds-wrap .kds-item .badge.text-danger { color: var(--kds-err) !important; }
:root.fesv-v2:not(#_) .kds-wrap .form-check-input:not(:checked) { background-color: var(--kds-surface-2); border-color: var(--kds-line); }

/* POS: encabezado del panel de comanda (card-header de v2 recolorea hijos) */
:root.fesv-v2:not(#_) .card > .card-header.comanda-right-head,
:root.fesv-v2:not(#_) .card > .card-header.comanda-right-head strong,
:root.fesv-v2:not(#_) .card > .card-header.comanda-right-head .bi { color: var(--v2-ink-text) !important; }

/* POS: barra superior del layout (frente A) — enlaces sobre tinta.
   La regla global v2 de <a> los pinta de acento y se pierden sobre el azul. */
:root.fesv-v2:not(#_) .pos-header a.pos-nav-link,
:root.fesv-v2:not(#_) .retail-header a,
:root.fesv-v2:not(#_) .posc-header a { color: rgba(255, 255, 255, .86); }
:root.fesv-v2:not(#_) .pos-header a.pos-nav-link:hover,
:root.fesv-v2:not(#_) .pos-header a.pos-nav-link.active { color: #fff; }
/* KDS: utilidades de texto semánticas de Bootstrap sobre tinta */
:root.fesv-v2:not(#_) .kds-wrap .text-danger { color: var(--kds-err) !important; }
:root.fesv-v2:not(#_) .kds-wrap .text-warning { color: var(--kds-warn) !important; }
:root.fesv-v2:not(#_) .kds-wrap .text-success { color: var(--kds-ok) !important; }
/* POS: placeholder de producto sin imagen ni color propio */
:root.fesv-v2:not(#_) .pos-prod-img-empty[style*="#cbd5e1"] { background: var(--v2-sunk) !important; color: var(--v2-text-4); }
:root.fesv-v2:not(#_) .pos-cat-pill.active .pos-cat-count { color: #fff; }
/* Iconos dentro de botones de card-header: la regla v2 `.card-header .bi` los atenúa (anotado a frente A) */
:root.fesv-v2:not(#_) .card > .card-header .btn .bi { color: inherit; }
/* Barras de filtros en card-header: en móvil el grupo interno debe envolver (Asientos, Estados, Producción…) */
@media (max-width: 575.98px) {
    :root.fesv-v2:not(#_) .card > .card-header.flex-wrap > .d-flex { flex-wrap: wrap; }
    :root.fesv-v2:not(#_) .card > .card-header.flex-wrap > .d-flex > .form-control[type="date"] { flex: 1 1 120px; }
}

/* ── Horario de delivery de la sucursal ────────────────────────────────────
   Siete filas de «día + dos horas». El nombre del día y las horas llevan ancho
   propio para que las filas queden alineadas entre sí sin necesitar una tabla:
   en el teléfono cada fila se apila sola, cosa que una tabla de dos columnas no
   hace sin apretarse. */
:root.fesv-v2:not(#_) .cc-dia { width: 9.5rem; }
:root.fesv-v2:not(#_) .cc-hora { width: 7.5rem; }

/* ════════════════════════════════════════════════════════════
   Botonera del menú POS — `Shared/Pos/SelectorMenuPos.razor`
   ─────────────────────────────────────────────────────────────
   Estas clases vivían en un bloque <style> dentro de Pages/Restaurante/Comanda.razor.
   Al pedirse la misma botonera para «Tomar pedido» del call center se extrajeron acá:
   si quedaban en la página, la segunda pantalla tenía que copiarlas y a los dos meses
   los dos POS se veían distintos.

   Van SIN el prefijo `:root.fesv-v2` a propósito: son clases nuevas y propias, no
   pisan nada de Bootstrap, y la comanda del POS se usa también fuera del tema v2.
   Por lo mismo los valores se declaran como variables acá y no se toman de `--v2-*`:
   si el tema v2 no está puesto esas variables no existen, y la botonera quedaría sin
   tamaños de letra.
   ═════════════════════════════════════════════════════════════ */
:root {
    --pos-menu-acento: #1e40af;
    --pos-menu-acento-sombra: rgba(30, 64, 175, .4);
    --pos-menu-superficie: #fff;
    --pos-menu-tinta: #0f172a;
    --pos-menu-borde: #cbd5e1;
    --pos-menu-borde-suave: #e2e8f0;
    --pos-menu-marcador: #cbd5e1;
    --pos-menu-barra: rgba(148, 163, 184, .5);
    --pos-menu-cuenta-bg: rgba(15, 23, 42, .15);
    --pos-menu-cuenta-bg-activa: rgba(255, 255, 255, .25);
    --pos-menu-icono-vacio: rgba(255, 255, 255, .7);
    --pos-menu-blanco: #fff;
    --pos-menu-precio: #16a34a;
    --pos-menu-precio-oscuro: #4ade80;
    --pos-menu-sombra: rgba(0, 0, 0, .12);
    --pos-menu-fs-pastilla: .95rem;
    --pos-menu-fs-icono: 1.15rem;
    --pos-menu-fs-cuenta: .75rem;
    --pos-menu-fs-nombre: .82rem;
    --pos-menu-fs-precio: 1rem;
    --pos-menu-fs-marcador: 1.9rem;
}

/* El componente es una columna flexible: el encabezado (buscador + categorías) queda
   fijo y sólo el grid de productos tiene scroll. Si hiciera scroll todo el bloque, el
   operador perdería de vista las categorías justo cuando las necesita. */
.pos-menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.pos-menu-head { flex: 0 0 auto; }
.pos-menu-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pos-menu-body-inner {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: .75rem !important;
}

/* Pastillas horizontales de categorías */
.pos-cat-pills {
    display: flex; gap: .5rem; overflow-x: auto; overflow-y: hidden;
    padding: .25rem .25rem .5rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.pos-cat-pills::-webkit-scrollbar { height: 4px; }
.pos-cat-pills::-webkit-scrollbar-thumb { background: var(--pos-menu-barra); border-radius: 2px; }
.pos-cat-pill {
    --pill-bg: var(--pos-surface, var(--pos-menu-superficie));
    --pill-fg: var(--pos-text, var(--pos-menu-tinta));
    flex: 0 0 auto; scroll-snap-align: start;
    min-height: 52px; padding: .5rem 1rem;
    border: 2px solid var(--pos-border, var(--pos-menu-borde)); border-radius: 26px;
    background: var(--pill-bg); color: var(--pill-fg);
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
    font-size: var(--pos-menu-fs-pastilla);
    white-space: nowrap; transition: transform .1s, box-shadow .1s;
    cursor: pointer;
}
.pos-cat-pill i { font-size: var(--pos-menu-fs-icono); }
.pos-cat-pill:active { transform: scale(.97); }
.pos-cat-pill.active {
    background: var(--pos-menu-acento); color: var(--pos-menu-blanco);
    border-color: var(--pos-menu-acento);
    box-shadow: 0 4px 12px var(--pos-menu-acento-sombra);
}
.pos-cat-count {
    background: var(--pos-menu-cuenta-bg); color: inherit; border-radius: 12px;
    padding: 1px 8px; font-size: var(--pos-menu-fs-cuenta); font-weight: 700;
}
.pos-cat-pill.active .pos-cat-count { background: var(--pos-menu-cuenta-bg-activa); }

/* Grid de productos */
.pos-prod-grid {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 1200px) {
    .pos-prod-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
.pos-prod-tile {
    background: var(--pos-surface, var(--pos-menu-superficie));
    color: var(--pos-text, var(--pos-menu-tinta));
    border: 2px solid var(--pos-border, var(--pos-menu-borde-suave)); border-radius: 12px;
    padding: .4rem; height: 165px;
    display: flex; flex-direction: column; align-items: stretch;
    transition: transform .08s, box-shadow .12s, border-color .12s;
    cursor: pointer; overflow: hidden; position: relative;
}
.pos-prod-tile:active {
    transform: scale(.96);
    box-shadow: 0 4px 12px var(--pos-menu-sombra);
}
.pos-prod-tile:hover { border-color: var(--pos-menu-acento); }
.pos-prod-tile:disabled { opacity: .5; cursor: not-allowed; }
.pos-prod-img {
    height: 90px; width: 100%; object-fit: cover;
    border-radius: 6px; background: var(--pos-menu-marcador);
    /* Contiene a la foto, que se superpone al marcador de color. */
    position: relative; overflow: hidden;
}
/* La foto del producto, encima del marcador. Si no carga se quita sola (onerror) y
   abajo queda el color de la categoria en vez del icono de imagen rota. */
.pos-prod-foto {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 6px;
}
.pos-prod-img-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--pos-menu-icono-vacio); font-size: var(--pos-menu-fs-marcador);
}
.pos-prod-name {
    font-weight: 700; font-size: var(--pos-menu-fs-nombre); line-height: 1.15;
    margin-top: .3rem;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.pos-prod-price {
    font-weight: 800; font-size: var(--pos-menu-fs-precio); color: var(--pos-menu-precio);
    margin-top: auto;
}
:root[data-bs-theme="dark"] .pos-prod-price,
[data-bs-theme="dark"] .pos-prod-price { color: var(--pos-menu-precio-oscuro); }

/* ════════════════════════════════════════════════════════════
   Call center · Tomar pedido por pasos — `Pages/CallCenter/TomarPedido.razor`
   ═════════════════════════════════════════════════════════════ */
:root {
    --cc-paso-num-bg: #e2e8f0;
    --cc-paso-num-fg: #475569;
    --cc-paso-fg: #475569;
    --cc-paso-fg-activo: #0f172a;
    --cc-fs-paso-num: .78rem;
}

/* Las pestañas de los pasos. El número va en un círculo porque el operador los nombra
   por número («anda al paso 2»), igual que los nombra el usuario al pedirlos. */
.cc-pasos .nav-link {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 0; border-bottom: 3px solid transparent;
    color: var(--v2-text-2, var(--cc-paso-fg)); font-weight: 600;
}
.cc-pasos .nav-link.active {
    border-bottom-color: var(--v2-accent, var(--pos-menu-acento));
    background: transparent; color: var(--v2-text, var(--cc-paso-fg-activo));
}
.cc-paso-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--v2-surface-alt, var(--cc-paso-num-bg));
    color: var(--v2-text-2, var(--cc-paso-num-fg));
    font-size: var(--cc-fs-paso-num); font-weight: 700;
}
.cc-pasos .nav-link.active .cc-paso-num {
    background: var(--v2-accent, var(--pos-menu-acento)); color: var(--pos-menu-blanco);
}
@media (max-width: 575.98px) {
    /* En el teléfono sólo el número y el estado: cinco títulos no entran y se parten. */
    .cc-paso-txt { display: none; }
}

/* El paso del pedido ocupa todo el alto disponible: la botonera scrollea sola y la barra
   del total queda siempre a la vista, que es la razón de ser de las pestañas. */
.cc-pedido-cuerpo { min-height: 60vh; }
.cc-menu-wrap {
    display: flex; gap: .75rem;
    height: calc(100vh - 20rem); min-height: 24rem;
}
.cc-detalle { flex: 0 0 22rem; max-width: 45vw; min-height: 0; }
.cc-detalle-cuerpo { overflow-y: auto; }
.cc-cant { width: 4.5rem; }

@media (max-width: 991.98px) {
    /* Sin ancho para dos columnas, el detalle va abajo y el bloque entero scrollea. */
    .cc-menu-wrap { flex-direction: column; height: auto; }
    .cc-detalle { flex: 1 1 auto; max-width: none; }
    .cc-detalle-cuerpo { max-height: 50vh; }
}

/* La barra del total se queda pegada al pie del panel: el operador le va diciendo el total
   al cliente mientras sigue tocando productos, y perderlo de vista era el motivo por el que
   la pantalla de una sola columna no servía. */
.cc-barra { position: sticky; bottom: 0; z-index: var(--fesv-z-barra-pegajosa); }

/* Los botones de «qué documento quiere» llevan título y explicación, uno debajo del otro.
   El tema v2 pone `display: inline-flex` en todo `.btn`, así que sin esto los dos textos
   quedaban en la misma línea, pegados: «Factura de consumidor finalLa venta de mostrador…». */
.cc-doc-btn {
    flex-direction: column;
    align-items: flex-start !important;
    gap: .1rem;
    flex: 1 1 18rem;
    max-width: 26rem;
    white-space: normal;
}

/* ── La botonera en modo denso (escritorio con teclado y mouse) ────────────────
   El tamaño por omisión es el del POS de restaurante, que se usa con el dedo. El call
   center no es táctil y además acá la botonera es la AYUDA: el camino principal es
   teclear el código. Así que se achica para que entren más productos a la vista, sin
   tocar las medidas del POS. */
:root {
    --pos-menu-fs-pastilla-cp: .8rem;
    --pos-menu-fs-nombre-cp: .75rem;
    --pos-menu-fs-precio-cp: .85rem;
    --pos-menu-fs-cuenta-cp: .68rem;
    --pos-menu-fs-icono-cp: .9rem;
    --cc-kbd-bg: rgba(15, 23, 42, .08);
    --cc-kbd-bg-sobre-acento: rgba(255, 255, 255, .22);
}

/* Una sola fila de pastillas con scroll horizontal. Iban envolviéndose en varias filas y
   empujaban los productos fuera de la pantalla: cinco renglones de categorías es justo lo
   que hacía ver la pantalla desordenada. */
.pos-cat-pills { flex-wrap: nowrap; }

.pos-menu-compacto .pos-cat-pills { gap: .3rem; padding: .15rem .15rem .3rem; }
.pos-menu-compacto .pos-cat-pill {
    min-height: 30px; padding: .2rem .6rem; border-radius: 16px; border-width: 1px;
    gap: .3rem; font-size: var(--pos-menu-fs-pastilla-cp);
}
.pos-menu-compacto .pos-cat-pill i { font-size: var(--pos-menu-fs-icono-cp); }
.pos-menu-compacto .pos-cat-count { padding: 0 5px; font-size: var(--pos-menu-fs-cuenta-cp); }

.pos-menu-compacto .pos-prod-grid {
    gap: .3rem;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.pos-menu-compacto .pos-prod-tile {
    height: auto; min-height: 0; padding: .3rem .35rem; border-width: 1px; border-radius: 8px;
}
/* Sin foto: en modo denso la imagen ocupa el lugar que necesitan los nombres, y el operador
   que mira acá está buscando un nombre, no reconociendo un plato por la foto. */
.pos-menu-compacto .pos-prod-img { display: none; }
.pos-menu-compacto .pos-prod-name {
    margin-top: 0; font-size: var(--pos-menu-fs-nombre-cp); font-weight: 600;
    -webkit-line-clamp: 2; line-clamp: 2; min-height: 2.1em;
}
.pos-menu-compacto .pos-prod-price { font-size: var(--pos-menu-fs-precio-cp); font-weight: 700; }
.pos-menu-compacto .pos-menu-body-inner { padding: .4rem !important; }
.pos-menu-compacto .card { border-radius: 0; }
.pos-menu-compacto .pos-menu-head .card-body { padding: .35rem !important; }

/* ── Paso 2 del call center: capturar tecleando ────────────────────────────────
   El operador teclea mientras habla por teléfono. El renglón de captura va arriba de todo
   y el foco vuelve solo al código después de cada línea: soltar el teclado para tocar algo
   con el mouse es lo que demora el pedido. */
.cc-captura { display: flex; gap: .4rem; align-items: flex-end; flex-wrap: wrap; }
.cc-captura-cod { flex: 1 1 16rem; min-width: 0; }
.cc-captura-cant { flex: 0 0 6.5rem; }

/* La grilla de líneas: densa, para que entren diez sin bajar. */
.cc-lineas { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cc-lineas table { margin-bottom: 0; }
.cc-lineas td, .cc-lineas th { padding: .2rem .4rem; }
.cc-lineas .form-control { min-height: 0; padding: .1rem .35rem; }
.cc-lineas-cant { width: 4rem; }

/* El pedido manda y ocupa el ancho; el menú es la ayuda y va al costado. */
/* ── Los paneles de acceso rápido: Promos, Últimos, Observaciones ───────────
   Eran bloques insertados en el flujo: al abrirlos, toda la pantalla se corría hacia abajo y
   el operador perdía de vista la grilla justo cuando estaba comparando lo que el cliente pidió
   con lo que ve en la promo. Ahora flotan anclados bajo la barra de accesos, con su propio
   alto y su propio scroll, así nada de lo que hay debajo se mueve.

   En pantalla angosta se vuelven una hoja al pie, que es donde el pulgar llega y donde no
   tapan el campo que se está completando. */
.cc-panel {
    position: absolute; z-index: var(--fesv-z-desplegable, 1060);
    top: 100%; right: 0; margin-top: .35rem;
    width: min(38rem, calc(100vw - 2rem));
    max-height: min(60vh, 28rem); overflow-y: auto;
    background: var(--v2-surface, #fff);
    border: 1px solid var(--v2-border, #dee2e6); border-radius: .5rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
    padding: .6rem;
}

/* El ancla. Sin esto el panel se posiciona contra la página y queda en cualquier lado. */
.cc-accesos { position: relative; }

@media (max-width: 767.98px) {
    .cc-panel {
        position: fixed; inset: auto 0 0 0;
        width: auto; margin: 0;
        max-height: 70vh;
        border-radius: .75rem .75rem 0 0;
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    }
}

.cc-paso2 { display: flex; gap: .6rem; height: calc(100vh - 19rem); min-height: 22rem; }
.cc-paso2-pedido { flex: 1 1 60%; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cc-paso2-menu { flex: 0 0 34%; max-width: 30rem; display: flex; min-height: 0; }

@media (max-width: 1199.98px) {
    .cc-paso2 { flex-direction: column; height: auto; }
    .cc-paso2-menu { flex: 1 1 auto; max-width: none; }
    .cc-lineas { max-height: 40vh; }
}

/* El tema v2 fija `min-height: 48px` para la pastilla de categoría (bloque «Comanda —
   catálogo táctil», más arriba en este archivo) con una especificidad que el modo denso no
   alcanzaba: la pastilla seguía midiendo 48 px en vez de 30. Se repite el prefijo del tema
   para poder ganarle sólo en el modo denso, sin tocar el táctil. */
:root.fesv-v2:not(#_) .pos-menu-compacto .pos-cat-pill {
    min-height: 30px; padding: .2rem .6rem; border-radius: 16px;
    font-size: var(--pos-menu-fs-pastilla-cp); box-shadow: none;
}
:root.fesv-v2:not(#_) .pos-menu-compacto .pos-prod-tile {
    border-radius: 8px; box-shadow: none;
}

/* El buscador de la ayuda quedaba del alto normal al lado de pastillas de 30 px y tiles de
   60: era lo más grande del panel secundario, que es justo al revés de lo que importa. */
:root.fesv-v2:not(#_) .pos-menu-compacto .pos-menu-head .form-control,
:root.fesv-v2:not(#_) .pos-menu-compacto .pos-menu-head .input-group-text,
.pos-menu-compacto .pos-menu-head .form-control,
.pos-menu-compacto .pos-menu-head .input-group-text {
    min-height: 28px; padding: .15rem .45rem; font-size: var(--pos-menu-fs-pastilla-cp);
}

/* La fila de categorías se cortaba en seco contra el borde y no se notaba que seguía: el
   degradado dice «hay más» sin ocupar lugar ni sumar un botón. */
.pos-cat-pills { position: relative; }
.pos-menu-compacto .pos-menu-head .card-body { position: relative; }
.pos-menu-compacto .pos-menu-head .card-body::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1.5rem;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--v2-surface, var(--pos-menu-superficie)));
}

/* El atajo escrito en el propio botón: el que no lo sabe lo aprende sin que nadie se lo
   enseñe, y el que lo sabe no lo mira. Discreto a propósito, no compite con la etiqueta. */
.cc-kbd {
    font-size: var(--pos-menu-fs-cuenta-cp);
    padding: 0 .3rem;
    /* Con `opacity` sobre un botón de contorno el atajo quedaba casi invisible: el borde toma
       currentColor, que ahí es gris claro sobre blanco. Se marca con el fondo hundido del tema,
       que se lee en los dos casos sin gritar. */
    opacity: .85;
    background: var(--v2-sunk, var(--cc-kbd-bg));
    border: 0;
    border-radius: 3px;
    vertical-align: baseline;
    font-weight: 600;
}
.btn-primary .cc-kbd { background: var(--cc-kbd-bg-sobre-acento); }
.cc-accesos .btn { white-space: nowrap; }

/* El ícono del paso, entre el número y el título: se reconoce el paso de un vistazo sin leer. */
.cc-paso-ico { opacity: .75; }
.cc-pasos .nav-link.active .cc-paso-ico { opacity: 1; }

/* Los opcionales debajo del nombre del plato, sangrados: el operador se los lee al cliente
   para confirmar, así que tienen que leerse como parte de la línea y no como otra línea. */
.cc-linea-ops { padding-left: 1rem; line-height: 1.2; }


/* ── Elección de sucursal en el call center ────────────────────────────────
   La que eligió el algoritmo lleva «Sugerida» con marco claro, y si el operador cambia a otra,
   ésa lleva «Seleccionada». Las dos etiquetas conviven: saber cuál habría sido la sugerida
   después de haber cambiado es lo que permite volver atrás sin recalcular nada en la cabeza. */
:root.fesv-v2:not(#_) .cc-sucursales { max-height: 20rem; overflow-y: auto; }
:root.fesv-v2:not(#_) .cc-tag-sugerida {
    background: var(--v2-ok-soft); color: var(--v2-ok);
    border: 1px solid var(--v2-ok-bd); font-weight: 600;
}
:root.fesv-v2:not(#_) .cc-tag-elegida {
    background: var(--v2-accent-soft); color: var(--v2-accent);
    border: 1px solid var(--v2-accent-bd); font-weight: 600;
}


/* ── Mantenimiento de opcionales (modificadores) del PdV ───────────────────
   El buscador para agregar artículos al grupo vive en la cabecera de la sección, al lado del
   título: sin ancho propio el desplegable se estira a toda la fila y empuja el título fuera. */
:root.fesv-v2:not(#_) .fesv-mod-buscador { min-width: 18rem; max-width: 26rem; }


/* ── Selección de opcionales (ComboOpcionesModal) ──────────────────────────
   El fondo del modal sale de la variable del tema, igual que el del buscador de entidades: antes
   estaba escrito a mano en el .razor y en el tema oscuro quedaba más claro que el contenido.
   La cuenta entre los botones −/+ necesita ancho fijo o la fila salta de tamaño al pasar de 9 a 10. */
/* --v2-backdrop sólo está definido bajo :root.fesv-v2; el modal también se abre en pantallas
   que no migraron al tema, y sin respaldo el fondo quedaba transparente. El respaldo se declara
   como variable para que el valor viva donde corresponde y no como color suelto en la regla. */
:root { --fesv-combo-backdrop: rgba(0, 0, 0, .55); }
.combo-modal { background: var(--v2-backdrop, var(--fesv-combo-backdrop)); overflow-y: auto; }
/* Sin el prefijo del tema v2: el modal también se abre en pantallas que todavía no migraron. */
.fesv-combo-cuenta { min-width: 2.5rem; }