/* ============================================================
   ProyectoWebApp — Estilos base + Login + Shell (responsive)
   ============================================================ */

:root {
    --pw-primary: #4f46e5;
    --pw-primary-d: #4338ca;
    --pw-primary-l: #6366f1;
    --pw-text: #e2e8f0;
    --pw-muted: #94a3b8;
    --pw-bg: #f8fafc;
    --pw-bg-soft: #f8fafc;
    --pw-border: #e5e7eb;
    --pw-ink: #0f172a;
    --pw-radius: 14px;
    --pw-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);

    /* ---- sidebar claro (estilo Stripe/Linear) — por defecto ---- */
    --pw-sb-bg: #ffffff;
    --pw-sb-border: #e5e7eb;
    --pw-sb-text: #475569;
    --pw-sb-text-strong: #0f172a;
    --pw-sb-text-soft: #94a3b8;
    --pw-sb-hover: #f1f5f9;
    --pw-sb-active-bg: #eef2ff;
    --pw-sb-active-text: var(--pw-primary-d);
    --pw-sb-scroll: rgba(15,23,42,.15);
}

/* ---- sidebar oscuro — cuando el tema general está en modo oscuro ---- */
:root[data-theme="dark"] {
    --pw-sb-bg: #0f172a;
    --pw-sb-border: #1e293b;
    --pw-sb-text: #cbd5e1;
    --pw-sb-text-strong: #ffffff;
    --pw-sb-text-soft: #64748b;
    --pw-sb-hover: rgba(255,255,255,.07);
    --pw-sb-active-bg: rgba(99,102,241,.18);
    --pw-sb-active-text: #a5b4fc;
    --pw-sb-scroll: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background: var(--pw-bg);
    color: var(--pw-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .login-brand-txt strong, .app-brand, .card-stat-val, .perfil-val {
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -.015em;
}

/* Blazor enfoca el primer <h1> al navegar (accesibilidad, FocusOnNavigate);
   sin esta regla el navegador dibuja un recuadro de foco encima del título. */
h1:focus, h2:focus { outline: none; }

.app-boot {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    color: var(--pw-muted); font-size: .9rem;
}

/* ---- Ícono de línea (componente Icono.razor): sin relleno, hereda el color del texto ---- */
.ico {
    width: 17px; height: 17px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    display: block;
}

a { color: var(--pw-primary); text-decoration: none; }

.app-brand-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pw-primary-l), var(--pw-primary));
    margin-right: 8px; box-shadow: 0 0 0 4px rgba(99,102,241,.18);
}

/* ---------- errores Blazor (base template) ---------- */
.validation-message { color: #e11d48; }
.blazor-error-boundary {
    background: #b91c1c; padding: 1rem; color: #fff; border-radius: 10px;
}
.blazor-error-boundary::after { content: "Ha ocurrido un error."; }

/* ============================================================
   LOGIN — tarjeta centrada sobre fondo degradado
   ============================================================ */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #3730a3 100%);
    padding: 20px;
}
.login-card {
    width: 100%; max-width: 380px;
    background: #fff; border-radius: 20px; padding: 34px 32px;
    box-shadow: 0 30px 80px rgba(30,27,75,.35);
    animation: loginIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes loginIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-brand-logo {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--pw-primary-l), var(--pw-primary));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; box-shadow: 0 6px 16px rgba(79,70,229,.35);
}
.login-brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.login-brand-txt strong { color: var(--pw-ink); font-size: 1.02rem; font-weight: 800; }
.login-brand-txt span { color: var(--pw-primary); font-size: .78rem; font-weight: 600; }

.login-h1 { font-size: 1.4rem; font-weight: 800; color: var(--pw-ink); margin: 0 0 4px; letter-spacing: -.01em; }
.login-sub { color: #64748b; font-size: .88rem; margin: 0 0 22px; }

.login-field { margin-bottom: 16px; }
.login-field label { display: block; font-size: .76rem; font-weight: 700; color: #334155; margin-bottom: 6px; }
.login-input-wrap {
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid #e2e8f0; border-radius: 12px; background: #f8fafc;
    padding: 0 12px; transition: all .15s;
}
.login-input-wrap:focus-within { border-color: var(--pw-primary); background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.14); }
.login-input-icon { display: flex; color: #94a3b8; flex-shrink: 0; }
.login-input-wrap input {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    padding: 12px 0; font-size: .95rem; color: var(--pw-ink);
}
.login-toggle-clave {
    display: flex; border: none; background: none; cursor: pointer; color: #94a3b8; padding: 4px; flex-shrink: 0;
    transition: color .15s;
}
.login-toggle-clave:hover { color: var(--pw-ink); }

.login-btn {
    width: 100%; padding: 13px; border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--pw-primary-l), var(--pw-primary));
    color: #fff; font-size: .96rem; font-weight: 700; letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(79,70,229,.3); transition: transform .12s, box-shadow .12s;
    display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 6px;
}
.login-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(79,70,229,.4); }
.login-btn:disabled { opacity: .65; cursor: default; box-shadow: none; transform: none; }
.login-spinner {
    width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-error {
    display: flex; align-items: center; gap: 8px;
    background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
    padding: 10px 13px; border-radius: 10px; font-size: .84rem; margin-bottom: 16px;
}
.login-foot { text-align: center; color: #94a3b8; font-size: .74rem; margin: 22px 0 0; }

/* ============================================================
   SHELL (sidebar + topbar + content)
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; background: var(--pw-bg); }

/* ---- overlay (solo móvil, cuando el menú está abierto) ---- */
.app-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 40;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}

/* ---- sidebar (claro por defecto / oscuro si el tema general lo está) ---- */
.app-sidebar {
    width: 264px; flex-shrink: 0; z-index: 50;
    background: var(--pw-sb-bg); border-right: 1px solid var(--pw-sb-border);
    color: var(--pw-sb-text); display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
    transition: background .2s, border-color .2s, width .2s ease;
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--pw-sb-scroll); border-radius: 10px; }

.app-brand {
    padding: 8px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    border-bottom: 1px solid var(--pw-sb-border); box-sizing: border-box;
    text-decoration: none; cursor: pointer;
}
/* Tarjeta blanca redondeada con sombra detrás del logo — réplica de picLogo_Paint en
   frmMDIModerno.cs (proporción real del escritorio: 104x47 ≈ 2.2:1, aquí a 88x40). */
.app-brand-logo-card {
    width: 92px; height: 46px; border-radius: 6px; flex-shrink: 0;
    background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.18), 0 1px 2px rgba(15,23,42,.1);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.app-brand-logo { max-width: 100%; max-height: 100%; object-fit: contain; padding: 1px; box-sizing: border-box; }
.app-brand-logo-fallback {
    display: flex; align-items: center; justify-content: center;
    color: var(--pw-sb-text-soft); width: 100%; height: 100%;
}
.app-brand-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.app-brand-nombre {
    font-weight: 800; font-size: 1rem; color: var(--pw-sb-text-strong); letter-spacing: -.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-brand-sede { font-size: .74rem; font-weight: 600; color: var(--pw-sb-text-soft); }
/* El colapso a riel de íconos (sidebar-colapsado) SOLO existe en escritorio — en móvil el
   mismo botón hamburguesa abre/cierra el cajón (menu-movil-abierto), no colapsa a riel. Estas
   reglas van dentro del @media (min-width: 901px) de más abajo para no aplicarse ahí también
   (si no, el logo/nombre se ven rotos en el cajón móvil). */

.app-menu { padding: 14px 12px 20px; flex: 1; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-icono {
    width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    opacity: .85; transition: opacity .14s;
}
.menu-link.activo .menu-icono, .menu-grupo-btn.abierto .menu-icono { opacity: 1; }

.menu-grupo-label {
    display: flex; align-items: center; gap: 9px;
    color: var(--pw-sb-text-soft); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    padding: 16px 12px 8px;
}

/* botón de grupo (padre con hijos) — acordeón */
.menu-grupo-btn {
    all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    color: var(--pw-sb-text); font-size: .86rem; font-weight: 600; font-family: inherit;
    padding: 9px 11px; border-radius: 9px; transition: background .14s, color .14s;
}
.menu-grupo-btn:hover { background: var(--pw-sb-hover); color: var(--pw-sb-text-strong); }
.menu-grupo-btn.abierto { color: var(--pw-sb-text-strong); background: var(--pw-sb-hover); }
.menu-chevron {
    margin-left: auto; font-size: .78rem; color: var(--pw-sb-text-soft); transition: transform .22s ease, color .22s;
    transform: rotate(0deg);
}
.menu-grupo-btn.abierto .menu-chevron { transform: rotate(90deg); color: var(--pw-primary); }

/* contenedor de hijos con animación de alto (CSS grid trick, sin JS) */
.menu-hijos {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease;
}
.menu-hijos.abierto { grid-template-rows: 1fr; }
.menu-hijos > .menu-list {
    overflow: hidden; min-height: 0; gap: 1px;
    margin: 2px 0 6px 22px; padding-left: 12px;
    border-left: 1.5px solid var(--pw-sb-border);
}

.menu-link {
    display: flex; align-items: center; gap: 10px; color: var(--pw-sb-text); text-decoration: none;
    padding: 8px 11px; border-radius: 9px; font-size: .85rem; font-weight: 500;
    transition: all .14s;
}
.menu-link:hover { background: var(--pw-sb-hover); color: var(--pw-sb-text-strong); }
.menu-link.activo {
    background: var(--pw-sb-active-bg); color: var(--pw-sb-active-text); font-weight: 700;
}

.app-sidebar-foot { padding: 12px; border-top: 1px solid var(--pw-sb-border); flex-shrink: 0; }
.app-user-mini { display: flex; align-items: center; gap: 10px; }
.avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--pw-primary-l), var(--pw-primary));
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
    box-shadow: 0 4px 12px rgba(79,70,229,.35);
}
.app-user-mini-txt { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
.app-user-mini-txt strong { color: #fff; font-size: .85rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.app-user-mini-txt span { color: var(--pw-muted); font-size: .72rem; }

/* ---- main + topbar ---- */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    position: sticky; top: 0; z-index: 30;
    min-height: 68px; background: rgba(255,255,255,.82); backdrop-filter: blur(12px) saturate(1.2);
    border-bottom: 1px solid var(--pw-border); display: flex; align-items: center;
    justify-content: space-between; gap: 12px; padding: 10px 24px; flex-wrap: wrap;
    box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 6px 20px rgba(15,23,42,.04);
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Combo único global de Empresa en el header — cambia el contexto Y el menú (ver AppLayout.razor).
   El logo/nombre/sede de la empresa viven en .app-brand (sidebar), no aquí. */
.topbar-empresa { width: 220px; max-width: 45vw; }

/* Buscador global (Ctrl+K) — INLINE en el header, con dropdown propio pegado abajo del input
   (no un modal centrado). */
.topbar-buscar-wrap { position: relative; flex-shrink: 0; width: 200px; }
.topbar-buscar-input-wrap {
    display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px;
    border: 1px solid var(--pw-border); border-radius: 10px; background: #fff;
    color: var(--pw-muted); transition: border-color .15s;
}
.topbar-buscar-input-wrap:focus-within { border-color: var(--pw-ink); }
.topbar-buscar-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    color: var(--pw-ink); font-size: .84rem;
}
.topbar-buscar-atajo {
    font-size: .68rem; font-weight: 700; padding: 2px 6px; border-radius: 5px;
    background: var(--pw-bg); border: 1px solid var(--pw-border); color: var(--pw-muted); flex-shrink: 0;
}
.topbar-buscar-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-width: 80vw;
    max-height: 60vh; overflow-y: auto; z-index: 70; padding: 6px;
    background: #fff; border: 1px solid var(--pw-border); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.16);
}
.buscador-vacio { padding: 16px 12px; text-align: center; color: var(--pw-muted); font-size: .86rem; }
.buscador-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
    color: var(--pw-ink); text-decoration: none; font-size: .86rem; font-weight: 600;
}
.buscador-item.sel, .buscador-item:hover { background: var(--pw-bg); }
.buscador-item-icono { width: 20px; display: flex; align-items: center; justify-content: center; opacity: .8; flex-shrink: 0; }
@media (max-width: 700px) {
    .topbar-buscar-wrap { width: 120px; }
    .topbar-buscar-atajo { display: none; }
}
@media (max-width: 460px) {
    .topbar-buscar-wrap { width: 90px; }
}

/* hamburguesa — SIEMPRE visible: en escritorio colapsa el sidebar a íconos,
   en celular abre/cierra el cajón (ver media queries más abajo) */
.hamburguesa {
    display: flex; flex-direction: column; justify-content: center; gap: 4px; flex-shrink: 0;
    width: 38px; height: 38px; border: 1px solid var(--pw-border); border-radius: 10px;
    background: #fff; cursor: pointer; padding: 0 8px; transition: background .15s;
}
.hamburguesa:hover { background: var(--pw-bg); }
.hamburguesa span { display: block; height: 2px; background: var(--pw-ink); border-radius: 2px; }

/* combos */
.app-combos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.combo-wrap { display: flex; flex-direction: column; gap: 3px; }
.combo-wrap label {
    font-size: .64rem; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
}
.combo {
    border: 1.5px solid var(--pw-border); border-radius: 10px; padding: 8px 12px; font-size: .85rem;
    background: #fff; color: var(--pw-ink); width: 100%; cursor: pointer; transition: all .15s;
}
.combo:disabled { background: #f1f5f9; color: #94a3b8; cursor: default; }
.combo:focus { outline: none; border-color: var(--pw-primary); box-shadow: 0 0 0 4px rgba(79,70,229,.14); }
textarea.combo { font-family: inherit; resize: vertical; cursor: text; min-height:220px }

/* ---- combo con autocompletado (ComboBuscable) ---- */
.cb-wrap { position: relative; }
.cb-input-wrap { position: relative; }
.cb-input {
    width: 100%; cursor: pointer; padding-right: 32px;
    background: #fff; text-overflow: ellipsis;
}
.cb-input:focus { cursor: text; }
.cb-chevron {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    display: flex; color: var(--pw-muted); pointer-events: none; transition: transform .15s;
}
.cb-input:focus ~ .cb-chevron { transform: translateY(-50%) rotate(180deg); }
.cb-drop {
    /* Alto del listado de resultados (Buscador Cliente/Proveedor/Producto) — a ~36px por fila
       esto cabe ~14 filas visibles antes de hacer scroll. Para mostrar más o menos, ajustar solo
       este max-height. */
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 70;
    background: #fff; border: 1px solid var(--pw-border); border-radius: 10px;
    box-shadow: 0 16px 36px rgba(15,23,42,.16); max-height: 520px; overflow-y: auto;
    animation: popIn .12s ease-out;
}
.cb-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; font-size: .84rem; color: var(--pw-ink); cursor: pointer;
}
.cb-opt:hover, .cb-opt.sel { background: var(--pw-bg); }
.cb-opt.sel { color: var(--pw-primary-d); font-weight: 600; }
.cb-check { display: flex; color: #16a34a; flex-shrink: 0; }
.cb-check .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.cb-empty { padding: 10px 12px; font-size: .82rem; color: var(--pw-muted); text-align: center; }

/* Producto con comisión (azul) / con promoción (verde) en el buscador — réplica de
   lst_productosfiltrados_DrawItem en frmMovimientoAlmacen.cs (Navy/Green). */
.cb-opt-comision { color: #1d4ed8; font-weight: 600; }
.cb-opt-comision:hover { background: #eff6ff; }
.cb-opt-promocion { color: #15803d; font-weight: 600; }
.cb-opt-promocion:hover { background: #f0fdf4; }

/* ---- fila de búsqueda con botón de alta rápida (BuscadorCliente/BuscadorProveedor + "+") ---- */
.mform-busqueda-fila { display: flex; gap: 8px; align-items: flex-start; }
.mform-busqueda-fila > .cb-wrap { flex: 1 1 auto; min-width: 0; }
.mform-busqueda-fila > .mant-btn-icono { flex: 0 0 auto; margin-top: 0; }

/* ---- cliente/proveedor ya elegido dentro del mismo input (BuscadorCliente/BuscadorProveedor) ----
   Solo se puede tener un cliente/proveedor por movimiento — al seleccionar uno el input muestra
   su nombre en vez de quedar vacío, y el botón "x" lo quita para poder buscar otro. */
.cb-seleccionado { display: flex; align-items: center; gap: 8px; }
.cb-seleccionado .cb-input { flex: 1 1 auto; padding-right: 12px; font-weight: 600; }
.cb-clear {
    flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--pw-border); border-radius: 10px; background: #fff; color: var(--pw-muted);
    cursor: pointer; transition: all .15s;
}
.cb-clear:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.cb-clear:disabled { cursor: default; opacity: .5; }
:root[data-theme="dark"] .cb-clear { background: #1e293b; border-color: #334155; }

/* ---- toggle Nombre/Documento dentro del buscador (mismo cb-input-wrap) ---- */
.cb-input-wrap.con-toggle .cb-input { padding-right: 92px; }
.cb-toggle {
    position: absolute; top: 50%; right: 30px; transform: translateY(-50%);
    display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
    font-size: .68rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
}
.cb-toggle input { width: 26px; height: 15px; accent-color: var(--pw-primary); cursor: pointer; margin: 0; }
.cb-toggle span { white-space: nowrap; }

/* ---- switch chico de PM/Mayoreo en la tabla de detalle ---- */
/* Antes era un <input type=checkbox> nativo forzado a 32x18 vía width/height — los navegadores no
   escalan checkboxes nativos así, quedaba un cuadro deforme. Mismo patrón pill que
   .mant-switch-grande (Cobranza), solo que más chico para caber en la celda de la tabla. */
.mform-switch {  }
.mform-switch input {
    appearance: none; -webkit-appearance: none; width: 30px; height: 17px; border-radius: 999px;
    background: var(--pw-border); position: relative; cursor: pointer; transition: background .18s;
    margin: 0; flex-shrink: 0;
}
.mform-switch input::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s;
}
.mform-switch input:checked { background: var(--pw-primary); }
.mform-switch input:checked::before { transform: translateX(13px); }

/* ---- fila clickeable (modal de Precios por escala) ---- */
.mant-fila-clic { cursor: pointer; transition: background .12s; }
.mant-fila-clic:hover { background: var(--pw-bg); }

/* ---- checkbox + botón en la misma fila (Cobranza: "Es Crédito" + "Información Crédito") ---- */
.input-group-con-boton { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }

/* ---- toggle tipo switch/pill (Cobranza: "Es Crédito") — más grande y visible que un checkbox suelto ---- */
.mant-switch-grande { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--pw-ink); }
.mant-switch-grande input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 999px;
    background: var(--pw-border); position: relative; cursor: pointer; transition: background .18s; flex-shrink: 0;
}
.mant-switch-grande input[type="checkbox"]::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s;
}
.mant-switch-grande input[type="checkbox"]:checked { background: var(--pw-primary); }
.mant-switch-grande input[type="checkbox"]:checked::before { transform: translateX(18px); }
.mant-switch-grande input[type="checkbox"]:disabled { opacity: .5; cursor: default; }

.mant-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.mant-grid-3 .mant-campo { margin-bottom: 14px; }
@media (max-width: 720px) {
    .mant-grid-3 { grid-template-columns: 1fr; }
}

/* ---- página /imprimir/{id} (ImprimirComprobante.razor) — solo la barra con el botón "Imprimir";
   el recibo en sí (ReciboImprimible.razor) usa el markup/clases IDÉNTICAS a
   webventasapp/Web.App/Views/Venta/frmImpresion.cshtml y su propio wwwroot/css/Impresion.css
   (copiado tal cual, ver ese archivo — pedido explícito del usuario), no estas reglas. ---- */
.imprimir-barra { display: flex; justify-content: flex-end; max-width: 820px; margin: 24px auto 16px; padding: 0 16px; }

/* Datos adicionales del comprobante: cronograma de crédito y detracción. Impresion.css se
   conserva como copia del sistema anterior; estos estilos pertenecen solo a esta aplicación. */
.GrupoResultados { align-items: stretch; }
.GrupoResultados > .col-7,
.GrupoResultados > .col-5 { display: flex; flex-direction: column; }
.GrupoResultados > .col-5 > .resultados { height: 100%; }
.recibo-qr-representacion { min-height: 130px; flex: 1 1 auto; border-top: 0 !important; }
.recibo-qr { width: 105px; display: flex; align-items: center; justify-content: center; flex: 0 0 105px; }
.recibo-representacion { flex: 1 1 auto; text-align: center; align-items: stretch; }
.recibo-representacion p { max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; }
.recibo-documentos-relacionados { margin: 0 0 10px; text-align: left; font-weight: 700; }
#RepresentacionImpresion { align-self: center; }
.recibo-observacion-cotped { flex: 1 1 auto; min-height: 145px; border-top: 0 !important; text-align: left !important; }
/* Impresion.css centra todos los párrafos dentro de .border; este bloque debe
   conservar la posición del formato RDLC: texto pegado al margen izquierdo. */
.recibo-observacion-cotped p { margin: 0 0 8px; text-align: left !important; }
.recibo-etiqueta-observacion { font-weight: 700; }
.recibo-cotped-qr { margin-top: 4px !important; }
.recibo-cotped-qr-contenido { min-height: 145px; }
.recibo-cotped-qr-contenido .recibo-qr { width: 155px; flex-basis: 155px; }
.recibo-cotped-qr-contenido .recibo-representacion { min-width: 0; }
.recibo-pie-cotped { margin: 14px 0 0; white-space: pre-line; text-align: left; }
/* Separación entre QR/totales y el bloque de crédito o detracción, como en el formato A4. */
.recibo-info-adicional { margin-top: 4px !important; font-size: 12px; }
.recibo-info-contenido { width: 100%; }
.recibo-info-seccion + .recibo-info-seccion { margin-top: 10px; padding-top: 8px; border-top: 1px solid #000; }
.recibo-info-seccion h6 { margin: 0 0 5px; font-size: 14px; font-weight: 700; }
.recibo-info-seccion p { margin: 0 0 3px; text-align: left; }
.recibo-tabla-cuotas { width: 50%; margin: 6px 0 0; }
.recibo-tabla-cuotas th, .recibo-tabla-cuotas td { padding: 3px 6px !important; }
.recibo-detraccion-datos { display: flex; flex-wrap: wrap; column-gap: 18px; }
.recibo-pie-pagina { margin-top: 10px; padding-top: 8px; border-top: 0; text-align: center; }
.recibo-pie-pagina p { margin: 0; white-space: pre-line; text-align: center; }

@media print {
    .recibo-info-adicional { font-size: 10px; }
    .recibo-info-seccion h6 { font-size: 11px; }
    .recibo-tabla-cuotas { width: 50%; }
    .recibo-qr-representacion { min-height: 130px; }
    .recibo-representacion p { max-width: 100%; }
}

@media (max-width: 750px) {
    .GrupoResultados > .col-7,
    .GrupoResultados > .col-5 { display: block; }
    .recibo-qr { width: 100%; flex-basis: auto; justify-content: center; }
    .recibo-cotped-qr-contenido .recibo-qr { width: 100%; flex-basis: auto; }
    .recibo-representacion { width: 100%; }
    .recibo-documentos-relacionados { text-align: center; }
    .recibo-tabla-cuotas { width: 100%; }
}

@media print {
    .imprimir-barra { display: none; }
}

/* ---- topbar derecha: tema / notificaciones / usuario ---- */
.topbar-right { display: flex; align-items: center; gap: 8px; }

.icon-btn {
    position: relative; width: 38px; height: 38px; border-radius: 50%; border: none;
    background: none; cursor: pointer; color: var(--pw-muted); display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--pw-bg); color: var(--pw-ink); }
.icon-badge {
    position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px;
    background: #ef4444; color: #fff; border-radius: 999px; font-size: .6rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
    filter: none;                                                    /* el badge de conteo sí mantiene su color */
}

.user-chip {
    display: flex; align-items: center; gap: 8px; border: none; background: none;
    border-radius: 10px; padding: 4px 8px 4px 4px; cursor: pointer; transition: background .15s;
}
.user-chip:hover { background: var(--pw-bg); }
.user-chip-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.user-chip-txt strong { font-size: .82rem; color: var(--pw-ink); }
.user-chip-txt span { font-size: .68rem; color: var(--pw-muted); }
.chip-caret { font-size: .7rem; color: var(--pw-muted); }

.btn-salir {
    display: flex; align-items: center; gap: 6px;
    background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 7px 15px;
    border-radius: 9px; cursor: pointer; font-size: .82rem; font-weight: 700; transition: all .15s;
}
.btn-salir:hover { background: #fee2e2; border-color: #fca5a5; }

/* indicador "Sistema activo" al pie del sidebar */
.sistema-activo {
    display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--pw-sb-text-soft); font-weight: 600;
}
.dot-verde {
    width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

/* ---- popovers (notificaciones / usuario) ---- */
.popover-anchor { position: relative; outline: none; }
.popover {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--pw-border); border-radius: 14px;
    box-shadow: 0 20px 48px rgba(15,23,42,.18); overflow: hidden;
    animation: popIn .15s ease-out;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.popover-notif { width: 300px; max-height: 70vh; display: flex; flex-direction: column; }
.popover-notif-lista { overflow-y: auto; flex: 1; min-height: 0; }
.popover-head { padding: 12px 16px; font-weight: 700; font-size: .85rem; border-bottom: 1px solid var(--pw-border); flex-shrink: 0; }
.popover-empty { padding: 22px 16px; text-align: center; color: var(--pw-muted); font-size: .84rem; }
.popover-item { padding: 11px 16px; font-size: .85rem; color: var(--pw-ink); border-bottom: 1px solid #f1f5f9; }
button.popover-item { width: 100%; background: none; border: none; border-bottom: 1px solid #f1f5f9; font-family: inherit; text-align: left; cursor: pointer; }
:root[data-theme="dark"] button.popover-item { border-bottom-color: #1e293b; }
button.popover-item:hover { background: var(--pw-bg); }
:root[data-theme="dark"] button.popover-item:hover { background: #1e293b; }
.popover-item:last-child { border-bottom: none; }

.popover-user { width: 240px; padding: 6px 0; }
.popover-user-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.popover-user-head strong { display: block; font-size: .88rem; color: var(--pw-ink); }
.popover-user-rol { font-size: .72rem; color: var(--pw-muted); }
.popover-sep { height: 1px; background: var(--pw-border); margin: 4px 0; }
.popover-btn {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: .84rem; color: var(--pw-ink); display: flex; align-items: center; gap: 8px;
}
.popover-btn:hover { background: #f1f5f9; }
.popover-btn-danger { color: #dc2626; }
.popover-btn-danger:hover { background: #fef2f2; }

.avatar-lg { width: 44px; height: 44px; font-size: 1.05rem; }
.avatar-xl { width: 64px; height: 64px; font-size: 1.5rem; }

/* ---- página "Mi Usuario" ---- */
.perfil-card {
    background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius);
    padding: 24px; box-shadow: var(--pw-shadow); max-width: 640px;
}
.perfil-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.perfil-head h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--pw-ink); }
.perfil-rol-badge {
    background: #eef2ff; color: var(--pw-primary-d); font-size: .72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
}
.perfil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.perfil-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--pw-bg); border-radius: 10px; }
.perfil-lbl { font-size: .68rem; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.perfil-val { font-size: .92rem; color: var(--pw-ink); font-weight: 600; }

.app-content { padding: 28px; flex: 1; }

/* ---- contenido / dashboard ---- */
.page-title { font-size: 1.6rem; color: var(--pw-ink); margin: 0 0 4px; font-weight: 800; letter-spacing: -.02em; }
.page-sub { color: #64748b; margin: 0 0 24px; font-size: .95rem; }
.page-hint {
    color: #475569; font-size: .88rem; margin-top: 24px; background: #fff; border: 1px solid var(--pw-border);
    border-radius: 12px; padding: 14px 16px; line-height: 1.5;
}
.page-hint code { background: #eef2ff; color: var(--pw-primary-d); padding: 1px 6px; border-radius: 6px; font-size: .85em; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.card-stat {
    position: relative;
    background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius); padding: 18px 20px;
    display: flex; flex-direction: column; gap: 8px; box-shadow: var(--pw-shadow); transition: transform .18s, box-shadow .18s;
}
.card-stat:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15,23,42,.13); }
.card-stat-lbl { color: var(--pw-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.card-stat-val { color: var(--pw-ink); font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }

/* badge circular pastel con icono de línea, esquina superior derecha (estilo referencia) */
.card-icon-badge {
    position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.card-icon-badge .ico { width: 16px; height: 16px; stroke-width: 2; }
.badge-indigo { background: #eef2ff; color: #4f46e5; }
.badge-blue   { background: #e0f2fe; color: #0284c7; }
.badge-amber  { background: #fef3c7; color: #b45309; }
.badge-green  { background: #dcfce7; color: #16a34a; }

/* ---- KPI "rico": ícono temático + franja de color + subtexto Mes/Año (frmDashboardModerno) ---- */
.card-stat-rico {
    gap: 8px; padding: 16px 18px 14px; position: relative; overflow: hidden;
    border-top: 3px solid transparent; border-radius: 12px;
}
.card-stat-top { display: flex; align-items: center; gap: 10px; }
.card-stat-icono {
    width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform .2s ease;
}
.card-stat-icono .ico { width: 18px; height: 18px; stroke-width: 2.3; }
.card-stat-rico:hover .card-stat-icono { transform: scale(1.08) rotate(-4deg); }
.card-stat-icono-fondo {
    position: absolute; right: 8px; bottom: 8px; opacity: .05; pointer-events: none;
    transition: opacity .2s ease, transform .3s ease;
}
.card-stat-icono-fondo .ico { width: 52px; height: 52px; stroke-width: 1.3; }
.card-stat-rico:hover .card-stat-icono-fondo { opacity: .09; transform: scale(1.08); }
.card-stat-detalles { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.card-stat-detalles span { font-size: .72rem; color: var(--pw-muted); }
.card-stat-detalles strong { color: var(--pw-ink); font-weight: 700; }

/* ============================================================
   COLAPSO DE SIDEBAR EN ESCRITORIO (icon-rail) — botón hamburguesa
   ============================================================ */
@media (min-width: 901px) {
    .app-shell.sidebar-colapsado .app-sidebar { width: 76px; }
    .app-shell.sidebar-colapsado .app-brand-txt,
    .app-shell.sidebar-colapsado .app-brand-texto,
    .app-shell.sidebar-colapsado .menu-texto,
    .app-shell.sidebar-colapsado .menu-chevron {
        display: none;
    }
    .app-shell.sidebar-colapsado .app-brand { justify-content: center; padding: 8px 4px; }
    /* Riel colapsado mide 76px — la tarjeta de 92px no entra, se achica a un ícono cuadrado
       chico para que quede centrada sin desbordar. */
    .app-shell.sidebar-colapsado .app-brand-logo-card { width: 44px; height: 44px; }
    .app-shell.sidebar-colapsado .menu-grupo-btn,
    .app-shell.sidebar-colapsado .menu-link,
    .app-shell.sidebar-colapsado .menu-grupo-label {
        justify-content: center; padding-left: 0; padding-right: 0;
    }
    .app-shell.sidebar-colapsado .menu-hijos > .menu-list { margin-left: 0; padding-left: 0; border-left: none; }
    .app-shell.sidebar-colapsado .sistema-activo { justify-content: center; }
}

/* ============================================================
   RESPONSIVE (tablet / celular) — el mismo botón abre/cierra el cajón
   ============================================================ */
@media (max-width: 900px) {
    .app-overlay { z-index: 10040; }
    .app-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: 264px !important;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.35);
        z-index: 10050;
    }
    .app-shell.menu-movil-abierto .app-sidebar { transform: translateX(0); }
    .app-shell.menu-movil-abierto .app-overlay { opacity: 1; pointer-events: auto; }
    .app-content { padding: 18px; }
    .user-chip-txt { display: none; }          /* ahorra espacio en móvil, queda solo el avatar */
    .app-topbar { padding: 10px 14px; }
    /* Alineados al botón que los abre (derecha), no estirados a lo ancho — igual que en
       escritorio, solo que "fixed" para no quedar recortados por el scroll del contenido. */
    .popover-notif, .popover-user, .popover-ayuda {
        position: fixed; top: 62px; right: 10px; left: auto; width: min(88vw, 300px);
    }
}

@media (max-width: 520px) {
    .combo { font-size: .8rem; padding: 7px 9px; }
    .page-title { font-size: 1.3rem; }
    .cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}

/* ---- login responsive: la tarjeta ocupa casi todo el ancho en móvil ---- */
@media (max-width: 480px) {
    .login-card { padding: 28px 22px; border-radius: 16px; }
}

/* ============================================================
   TEMA OSCURO — se activa con <html data-theme="dark">
   (ver wwwroot/js/theme.js — toggle en la topbar del dashboard)
   ============================================================ */
:root[data-theme="dark"] {
    --pw-bg: #0b1120;
    --pw-bg-soft: #111827;
    --pw-ink: #e2e8f0;
    --pw-border: #1e293b;
    --pw-muted: #64748b;
    --pw-shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);

    /* Radzen (RadzenDatePicker y cualquier otro control Radzen que se agregue) usa su propio
       set de variables --rz-base-N para fondos/bordes/texto. "standard.css" solo trae la
       paleta clara — en vez de cargar la hoja "standard-dark.css" del paquete (tiene un negro
       casi puro que no combina con el resto de la app), se remapean esas variables a los MISMOS
       tokens --pw-* que ya usa todo el shell, para que quede un solo tema real, no dos que
       coinciden por casualidad. */
    --rz-base-50: #111827;    /* fondo de inputs/tarjetas Radzen — igual que .combo/.dash-panel */
    --rz-base-100: #1e293b;   /* hover/bordes suaves — igual que --pw-border */
    --rz-base-200: #1e293b;
    --rz-base-300: #334155;
    --rz-base-400: #475569;
    --rz-base-500: #64748b;   /* igual que --pw-muted */
    --rz-base-600: #94a3b8;
    --rz-base-700: #cbd5e1;
    --rz-base-800: #e2e8f0;   /* texto principal — igual que --pw-ink */
    --rz-base-900: #ffffff;
    --rz-text-color: var(--pw-ink);
    --rz-input-background-color: #111827;
    /* La variable raíz que de verdad alimenta la mayoría de fondos "de panel" de Radzen (input en
       hover/focus, el panel del calendario emergente, y cualquier otro popup que se agregue después)
       es --rz-base-background-color, que por defecto apunta a --rz-white — NO a --rz-base-50/100/etc
       que ya remapeé arriba. Sin esto, esos paneles quedaban blancos aunque el input "en reposo" ya
       se viera bien. --rz-white queda sin tocar a propósito: la usan como color de TEXTO sobre
       fondos de color (ej. el número del día seleccionado, blanco sobre el círculo azul) — si se
       oscurece también, ese texto se vuelve ilegible. */
    --rz-base-background-color: #111827;
    --rz-input-hover-background-color: #111827;
    --rz-input-focus-background-color: #111827;
}

:root[data-theme="dark"] .app-topbar { background: rgba(15,23,42,.85); border-bottom-color: #1e293b; }
:root[data-theme="dark"] .btn-salir { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.35); color: #fca5a5; }
:root[data-theme="dark"] .btn-salir:hover { background: rgba(220,38,38,.2); }
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .combo,
:root[data-theme="dark"] .user-chip,
:root[data-theme="dark"] .hamburguesa,
:root[data-theme="dark"] .topbar-buscar-input-wrap,
:root[data-theme="dark"] .topbar-buscar-dropdown,
:root[data-theme="dark"] .dash-btn-exportar,
:root[data-theme="dark"] .popover,
:root[data-theme="dark"] .card-stat,
:root[data-theme="dark"] .perfil-card,
:root[data-theme="dark"] .page-hint {
    background: #111827; border-color: #1e293b;
}
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .user-chip:hover,
:root[data-theme="dark"] .combo:disabled { background: #1e293b; }
:root[data-theme="dark"] .cb-drop { background: #111827; border-color: #1e293b; }
:root[data-theme="dark"] .cb-opt:hover, :root[data-theme="dark"] .cb-opt.sel { background: #1e293b; }
:root[data-theme="dark"] .cb-opt-comision { color: #60a5fa; }
:root[data-theme="dark"] .cb-opt-comision:hover { background: #1e293b; }
:root[data-theme="dark"] .cb-opt-promocion { color: #4ade80; }
:root[data-theme="dark"] .cb-opt-promocion:hover { background: #1e293b; }
:root[data-theme="dark"] .cb-input { background: #111827; }
:root[data-theme="dark"] .perfil-item { background: #0b1120; }
:root[data-theme="dark"] .popover-item { border-bottom-color: #1e293b; }
:root[data-theme="dark"] .popover-btn:hover { background: #1e293b; }
:root[data-theme="dark"] .popover-btn-danger:hover { background: rgba(220,38,38,.12); }
:root[data-theme="dark"] .popover-sep,
:root[data-theme="dark"] .popover-head { border-color: #1e293b; }
:root[data-theme="dark"] .page-hint code { background: rgba(99,102,241,.18); }
:root[data-theme="dark"] .perfil-rol-badge { background: rgba(99,102,241,.18); }
:root[data-theme="dark"] .hamburguesa span { background: var(--pw-ink); }

/* ============================================================
   MODAL — "Enviar comentarios" / "Reportar problema"
   (réplica de frmAyudaComentario / frmAyudaProblema del escritorio)
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: popIn .15s ease-out;
}
.modal-card {
    width: 100%; max-width: 420px; background: #fff; border-radius: 16px;
    padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.modal-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: #eef2ff; color: var(--pw-primary); display: flex; align-items: center; justify-content: center;
}
.modal-head h3 { margin: 0 0 2px; font-size: 1.05rem; color: var(--pw-ink); }
.modal-head p { margin: 0; font-size: .84rem; color: var(--pw-muted); }
/* Réplica de labelX3.ForeColor = Red en frmMotivoEstadoProducto.cs ("Esta acción es irreversible"). */
.pform-nota-irreversible { color: #dc2626 !important; font-weight: 700; margin-top: 4px !important; }
.modal-textarea {
    width: 100%; border: 1.5px solid var(--pw-border); border-radius: 10px; padding: 10px 12px;
    font-family: inherit; font-size: .9rem; resize: vertical; min-height: 90px; color: var(--pw-ink);
    background: #fff; transition: all .15s;
}
.modal-textarea:focus { outline: none; border-color: var(--pw-primary); box-shadow: 0 0 0 4px rgba(79,70,229,.14); }
.modal-msg {
    display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px;
    border-radius: 9px; font-size: .84rem;
}
.modal-msg-ok { background: #dcfce7; color: #15803d; }
.modal-msg-error { background: #fef2f2; color: #b91c1c; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.btn-modal-secundario {
    background: #fff; border: 1.5px solid var(--pw-border); color: #334155; padding: 9px 16px;
    border-radius: 9px; cursor: pointer; font-size: .86rem; font-weight: 600;
}
.btn-modal-secundario:hover { background: var(--pw-bg); }
.btn-modal-primario {
    background: linear-gradient(135deg, var(--pw-primary-l), var(--pw-primary)); color: #fff; border: none;
    padding: 9px 18px; border-radius: 9px; cursor: pointer; font-size: .86rem; font-weight: 700;
}
.btn-modal-primario:disabled { opacity: .55; cursor: default; }

:root[data-theme="dark"] .modal-card { background: #111827; }
:root[data-theme="dark"] .modal-textarea { background: #0b1120; border-color: #1e293b; }
:root[data-theme="dark"] .btn-modal-secundario { background: #0b1120; border-color: #1e293b; color: var(--pw-ink); }

/* ---- confirmación (eliminar) y variante peligro ---- */
.modal-card-sm { max-width: 380px; }
.modal-icon-peligro { background: #fee2e2; color: #dc2626; }
.modal-icon-exito { background: #dcfce7; color: #16a34a; }
.btn-modal-peligro {
    background: #dc2626; color: #fff; border: none; padding: 9px 18px; border-radius: 9px;
    cursor: pointer; font-size: .86rem; font-weight: 700;
}
.btn-modal-peligro:hover:not(:disabled) { background: #b91c1c; }
.btn-modal-peligro:disabled { opacity: .6; cursor: default; }

/* ---- toasts ---- */
.toast-host {
    position: fixed; bottom: 22px; right: 22px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.toast {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px;
    background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.18); font-size: .86rem; font-weight: 600;
    animation: toastIn .18s ease-out;
}
.toast-ok { color: #15803d; }
.toast-ok .ico { color: #16a34a; }
.toast-error { color: #b91c1c; }
.toast-error .ico { color: #dc2626; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

:root[data-theme="dark"] .toast { background: #111827; }

/* ============================================================
   Panel de Ayuda (AYUDA / NOVEDADES) — mismos tokens del resto del shell
   ============================================================ */
.popover-ayuda { width: 280px; padding: 8px 0; }
.popover-seccion {
    padding: 10px 16px 6px; font-size: .68rem; font-weight: 800; color: var(--pw-muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.popover-btn-doble {
    width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
    background: none; border: none; cursor: pointer; padding: 9px 16px; text-decoration: none;
    font-family: inherit; color: var(--pw-ink);
}
.popover-btn-doble:hover { background: var(--pw-bg); }
.popover-btn-doble strong { display: block; font-size: .85rem; color: var(--pw-ink); }
.popover-btn-doble span span { font-size: .74rem; color: var(--pw-muted); }
.popover-icon-box {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: #eef2ff; color: var(--pw-primary); display: flex; align-items: center; justify-content: center;
}

/* ---- notificaciones reales ---- */
.popover-notif-item { display: flex; align-items: flex-start; gap: 10px; }
.popover-notif-icon { color: #f59e0b; flex-shrink: 0; margin-top: 1px; }
.popover-notif-txt { display: flex; flex-direction: column; gap: 2px; }
.popover-notif-txt strong { font-size: .84rem; color: var(--pw-ink); font-weight: 600; }
.popover-notif-txt span { font-size: .72rem; color: var(--pw-muted); }
.popover-ver-todas {
    width: 100%; background: none; border: none; border-top: 1px solid var(--pw-border);
    font-family: inherit; text-align: center; padding: 11px 16px; font-size: .82rem; color: var(--pw-primary);
    font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.popover-ver-todas:hover { background: var(--pw-bg); }

/* ---- usuario: avatar degradado + badge de rol ---- */
.popover-rol-badge {
    display: inline-block; background: #eef2ff; color: var(--pw-primary-d); font-size: .68rem;
    font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-bottom: 3px;
}

:root[data-theme="dark"] .popover-icon-box { background: rgba(99,102,241,.18); }
:root[data-theme="dark"] .popover-rol-badge { background: rgba(99,102,241,.18); }

/* ============================================================
   DASHBOARD — filtros LOCALES a la vista (no en la barra superior)
   ============================================================ */
.dash-filtros {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
    background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius);
    padding: 14px 16px; margin-bottom: 20px; box-shadow: var(--pw-shadow);
}
.dash-filtro { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.dash-filtro label { font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em; }
.dash-filtro input[type="date"] {
    height: 38px; border: 1px solid var(--pw-border); border-radius: 10px; padding: 0 8px;
    font-family: inherit; font-size: .84rem; background: #fff; color: var(--pw-ink);
}
.dash-filtro-btn { margin-left: auto; }
.dash-rango-rapido { display: flex; gap: 3px; align-items: flex-end; padding-bottom: 0; }
.dash-btn-rango {
    height: 38px; padding: 0 10px; border: 1px solid var(--pw-border); border-radius: 10px; cursor: pointer;
    background: #fff; color: var(--pw-ink); font-size: .78rem; font-weight: 600; transition: all .12s;
}
.dash-btn-rango:hover { background: var(--pw-bg); border-color: var(--pw-primary); color: var(--pw-primary); }
.dash-btn-rango.sel { border-color: var(--pw-primary); background: var(--pw-primary); color: #fff; }
.dash-btn-actualizar {
    height: 38px; padding: 0 16px; border: none; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, var(--pw-primary-l), var(--pw-primary));
    color: #fff; font-size: .84rem; font-weight: 700; display: flex; align-items: center; gap: 7px;
    box-shadow: 0 8px 18px rgba(79,70,229,.28); transition: transform .12s, box-shadow .12s;
}
.dash-btn-actualizar:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(79,70,229,.35); }
.dash-btn-actualizar:disabled { opacity: .6; cursor: default; }

.dash-seccion { margin-bottom: 26px; }
.dash-seccion-titulo {
    font-size: 1rem; font-weight: 800; color: var(--pw-ink); margin: 0 0 12px;
    display: flex; align-items: center; gap: 8px;
}

.dash-panel {
    background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow);
}
/* El panel ya NO recorta overflow (eso clipeaba los tooltips de las gráficas) — el scroll
   horizontal en móvil ahora es responsabilidad de este wrapper alrededor de la tabla. */
.dash-tabla-wrap { overflow-x: auto; }
.dash-tabla { min-width: 560px; }   /* fuerza scroll horizontal en vez de aplastar/ocultar columnas en móvil */
.dash-panel-titulo {
    padding: 12px 16px; font-size: .82rem; font-weight: 700; color: var(--pw-ink);
    border-bottom: 1px solid var(--pw-border);
}
.dash-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dash-tabla th {
    text-align: left; padding: 9px 16px; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .03em; color: var(--pw-muted); font-weight: 700; border-bottom: 1px solid var(--pw-border);
}
.dash-tabla td { padding: 9px 16px; border-bottom: 1px solid var(--pw-border); color: var(--pw-ink); }
.dash-tabla tr:last-child td { border-bottom: none; }
.dash-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-vacio { padding: 22px 16px; text-align: center; color: var(--pw-muted); font-size: .85rem; }

/* Columna de acciones "pegada" a la derecha — para tablas anchas (ej. Producto con ~20 columnas)
   así el usuario nunca tiene que hacer scroll horizontal hasta el final para editar/eliminar. */
.dash-tabla th.mant-th-acciones,
.dash-tabla td.mant-td-acciones {
    position: sticky; right: 0; background: #fff;
    box-shadow: -6px 0 8px -6px rgba(15, 23, 42, .12);
}
:root[data-theme="dark"] .dash-tabla th.mant-th-acciones,
:root[data-theme="dark"] .dash-tabla td.mant-td-acciones { background: #111827; }

/* minmax(0, Xfr) en vez de "Xfr" a secas — evita que las columnas se dimensionen por su
   contenido en el primer paint (grid blowout). Sin esto, ApexCharts mide el ancho del
   contenedor al montar y a veces se topa con 0/auto todavía sin resolver, y el chart no
   dibuja nada (bug real visto en "Ventas vs Compras" — el donut de al lado no lo sufría
   porque no depende tanto del ancho exacto para dibujarse). */
.dash-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.dash-grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.dash-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }
.dash-col-2 { grid-column: span 2; }
.dash-kpis { margin-bottom: 18px; grid-template-columns: repeat(6, 1fr); gap: 12px; }
/* Paneles apilados en una sola columna, cada uno a ancho completo (ej. tab Caja) — a diferencia
   de .dash-grid-2/3 que reparten el ancho en columnas. */
.dash-filas { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
@media (max-width: 1300px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---- tabs del Dashboard (Resumen/Ventas/Finanzas/Caja/Gestión) ---- */
.dash-tabs {
    display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--pw-border);
    overflow-x: auto;
}
.dash-tabs-fila {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--pw-border); margin-bottom: 18px;
}
.dash-tabs-fila .dash-tabs.dash-tabs-sinborde { border-bottom: none; margin-bottom: 0; }
.dash-btn-exportar {
    display: flex; align-items: center; gap: 7px; padding: 8px 14px; margin-top: 6px;
    border: 1px solid var(--pw-border); border-radius: 9px; background: #fff; color: var(--pw-ink);
    font-size: .84rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.dash-btn-exportar:hover { background: var(--pw-bg); }
.dash-btn-exportar:disabled { opacity: .6; cursor: default; }
.dash-tab {
    display: flex; align-items: center; gap: 7px; padding: 10px 16px; border: none; background: none;
    cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--pw-muted); white-space: nowrap;
    border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.dash-tab:hover { color: var(--pw-ink); }
.dash-tab.activo { color: var(--pw-primary); border-bottom-color: var(--pw-primary); }

/* ---- pestañas del modal "Gestionar Producto Movimiento" (Compra) — mismo patrón que .dash-tab,
   antes quedaban como texto plano sin estilo alguno. ---- */
.mform-tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--pw-border); margin-bottom: 18px; }
.mform-tab {
    display: flex; align-items: center; gap: 7px; padding: 10px 16px; border: none; background: none;
    cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--pw-muted); white-space: nowrap;
    border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.mform-tab:hover { color: var(--pw-ink); }
.mform-tab.activo { color: var(--pw-primary); border-bottom-color: var(--pw-primary); }
.mform-tab-panel { min-height: 220px; }
.mform-tab-columna-titulo {
    font-size: .72rem; font-weight: 800; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--pw-border);
}
.mform-escala-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; align-items: center;
}
.mform-escala-grid span { font-weight: 700; font-size: .7rem; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Tab "Detalle de Compra" del modal Gestionar Producto Movimiento — réplica visual del
   escritorio (frmProductoMovimiento.cs): muchos campos en poco espacio, filas bajas en vez del
   espaciado de un formulario normal de mantenedor. */
.mform-detalle-compacto .mant-campo { margin-bottom: 8px; }
.mform-detalle-compacto .mant-campo label { font-size: .68rem; margin-bottom: 0; }
.mform-detalle-compacto .mant-campo input,
.mform-detalle-compacto .mant-campo select { height: 32px; padding: 0 8px; font-size: .84rem; }
.mform-detalle-compacto .mant-checkbox { margin-bottom: 8px; font-size: .8rem; }

/* Campo + checkbox que lo habilita, en la misma celda (ej. "Precio sin Igv"/"P.C sin Igv",
   "Precio Venta"/"Pvv") — evita que el checkbox rompa el balance de la grilla ocupando su propia
   fila/columna, como pasaba antes. */
.mform-campo-con-check { display: flex; flex-direction: column; gap: 4px; }
.mform-check-inline {
    display: flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700;
    color: var(--pw-muted); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; white-space: nowrap;
}
.mform-check-inline input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--pw-primary); cursor: pointer; }

.mform-escala-head {
    margin-top: 14px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; padding-bottom: 0;
}
.mform-btn-preciosanteriores {
    height: 32px; padding: 0 12px; font-size: .78rem; display: inline-flex; align-items: center; gap: 6px;
}
.mform-btn-preciosanteriores .ico { width: 14px; height: 14px; flex: none; }

/* ---- Modal "Editar precios de la línea" / "Gestionar Producto Movimiento" simplificado
   (CompraFormulario.razor) — reemplaza las 4 pestañas por una vista única: lo esencial siempre
   visible (Cantidad/Precio Costo/Margen↔Venta/Ubicación) y lo poco usado (Precio sin IGV,
   mayoreo, Shop) detrás de "Más opciones". Mockup aprobado por el usuario. ---- */
.cfg-referencia {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--pw-bg);
    border: 1px solid var(--pw-border); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
}
.cfg-referencia-item { display: flex; flex-direction: column; gap: 2px; }
.cfg-referencia-item span { font-size: .68rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .02em; }
.cfg-referencia-item strong { font-size: .88rem; color: var(--pw-ink); }
.cfg-esencial { display: flex; flex-direction: column; gap: 14px; }
.cfg-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cfg-margen-venta {
    display: flex; align-items: flex-end; gap: 10px; border: 1.5px solid var(--pw-primary-l, #818cf8);
    background: #fafaff; border-radius: 12px; padding: 12px 14px;
}
.cfg-margen-venta .mant-campo { flex: 1; margin-bottom: 0; }
.cfg-margen-venta .mant-campo label { color: var(--pw-primary); }
.cfg-margen-venta > .ico { width: 16px; height: 16px; color: var(--pw-muted); flex: none; margin-bottom: 10px; }
.cfg-input-venta { font-weight: 800; color: var(--pw-primary); background: #eef2ff; border-color: var(--pw-primary) !important; }
.cfg-pvv { flex-direction: column; align-items: center; gap: 3px; margin-bottom: 10px; text-transform: none; }
.cfg-btn-masopciones {
    height: 38px; border: 1px solid var(--pw-border); border-radius: 10px; background: #fff; color: var(--pw-ink);
    font-size: .82rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.cfg-btn-masopciones:hover { background: var(--pw-bg); }
.cfg-btn-masopciones .ico { width: 14px; height: 14px; }
.cfg-masopciones { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.cfg-masopciones-divisor { height: 1px; background: var(--pw-border); margin: 2px 0; }
.cfg-shop-check { text-transform: none; font-size: .82rem; margin-bottom: 8px; }

/* ---- ticket promedio (tarjeta destacada, tab Finanzas) ---- */
.dash-ticket { padding: 16px; text-align: center; }
.dash-ticket-valor { font-size: 2rem; font-weight: 800; color: #16a34a; margin: 6px 0 2px; }
.dash-ticket-sub { color: var(--pw-muted); font-size: .78rem; margin: 0 0 14px; }
.dash-ticket .dash-cuenta { text-align: left; }

/* ============================================================
   GRÁFICAS del Dashboard — mismo tipo por sección que frmDashboardModerno.cs,
   dibujadas solo con CSS/SVG (sin librerías JS de charts).
   ============================================================ */

/* ---- barras verticales (Ventas/Compras por mes, Caja diaria) ---- */
.graf-barras { padding: 18px 16px 14px; }
/* Sin scroll horizontal: las columnas se comprimen (flex-shrink) para caber todas en el ancho
   del panel, igual que el escritorio — así no hay contenedor con overflow-x que recorte el
   tooltip absoluto ni que le haga crecer su propio scrollWidth al mostrarse. */
.graf-barras-track { display: flex; align-items: flex-end; gap: 4px; height: 160px; }
.graf-barra-col {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; height: 100%;
}
.graf-barra {
    width: 100%; max-width: 26px; border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--pw-primary-l), var(--pw-primary));
    transition: height .25s ease;
}
.graf-barra-valor { font-size: .6rem; color: var(--pw-muted); margin-bottom: 4px; white-space: nowrap; }
.graf-barra-label {
    font-size: .64rem; color: var(--pw-muted); margin-top: 6px; white-space: nowrap;
    writing-mode: horizontal-tb;
}

/* ---- barras horizontales (Productos, Comprobantes, Tipo pago, Cajero, Vendedores, Clientes) ---- */
.graf-hbarras { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.graf-hbarra-fila { display: grid; grid-template-columns: minmax(70px, 130px) minmax(40px, 1fr) auto; align-items: center; gap: 10px; }
.graf-hbarra-label {
    font-size: .8rem; color: var(--pw-ink); line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; text-overflow: ellipsis; white-space: normal;
}
.graf-hbarra-track { background: var(--pw-bg); border-radius: 6px; height: 18px; min-width: 0; width: 100%; }
.graf-hbarra {
    height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--pw-primary-l), var(--pw-primary));
    transition: width .3s ease; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px;
    min-width: 0;
}
.graf-hbarra-texto-dentro { font-size: .68rem; font-weight: 700; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.graf-hbarra-valor { font-size: .78rem; color: var(--pw-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- modo "sin barra" (Top Clientes en el escritorio: solo número + nombre + monto) ---- */
.graf-hbarra-fila-simple { grid-template-columns: 1fr 100px !important; }

/* ---- medallero (Top clientes / vendedores) ---- */
.graf-rank-badge {
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.graf-rank-oro { background: linear-gradient(135deg, #fde68a, #d97706); }
.graf-rank-plata { background: linear-gradient(135deg, #e5e7eb, #94a3b8); }
.graf-rank-bronce { background: linear-gradient(135deg, #fdba74, #c2410c); }
.graf-rank-neutro { background: var(--pw-muted); }
.graf-hbarra-fila:has(.graf-rank-badge) { grid-template-columns: 22px minmax(70px, 130px) minmax(40px, 1fr) auto; }
.graf-hbarra-fila:has(.graf-rank-badge).graf-hbarra-fila-simple { grid-template-columns: 22px 1fr auto !important; }

/* ---- título de panel + leyenda al costado (gráficas con 2+ series) ---- */
.dash-panel-titulo-row {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 12px 16px; border-bottom: 1px solid var(--pw-border);
}
.dash-panel-titulo-row .dash-panel-titulo { padding: 0; border: none; }
.graf-leyenda { display: flex; gap: 14px; flex-wrap: wrap; }
.graf-leyenda-item { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--pw-muted); font-weight: 600; }
.graf-leyenda-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

/* ---- Alertas de stock bajo — lista con acento rojo, réplica de PintarStockBajo de
   frmDashboardModerno.cs (no es una gráfica, es una lista de alerta compacta).
   overflow-x:hidden es necesario junto a overflow-y:auto: si solo se define un eje, el otro se
   computa automáticamente a "auto" (regla del spec CSS) y aparece un scroll horizontal
   fantasma al pasar el mouse. El tooltip usa la variante .graf-tooltip-abajo (abre hacia abajo)
   para no recortarse contra el borde superior de este contenedor con scroll. ---- */
.graf-alertas { display: flex; flex-direction: column; padding: 8px; gap: 4px; max-height: 420px; overflow-y: auto; overflow-x: hidden; }
.graf-alerta-item {
    border-left: 3px solid #ef4444; border-radius: 6px; padding: 8px 10px;
    background: transparent; transition: background .12s;
}
.graf-alerta-item:nth-child(even) { background: var(--pw-bg); }
.graf-alerta-nombre {
    font-size: .8rem; font-weight: 600; color: var(--pw-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.graf-alerta-detalle { font-size: .74rem; color: #dc2626; font-weight: 600; margin-top: 2px; }
:root[data-theme="dark"] .graf-alerta-item:nth-child(even) { background: rgba(255,255,255,.04); }

/* ---- Tooltip NATIVO de ApexCharts (todas las gráficas del Dashboard) en modo oscuro ----
   Todas las gráficas usan el tema claro por defecto de ApexCharts (fondo blanco, texto oscuro).
   En modo oscuro, nuestro CSS global de texto claro (var(--pw-text)) se filtraba dentro del
   tooltip (es un <div> que Apex agrega como hijo de <body>, hereda el color de texto general),
   dejando texto claro sobre fondo blanco — casi invisible. Se fuerza fondo/texto oscuros acordes
   al resto de la UI en dark, en vez de cambiar el tema de cada gráfica una por una. */
:root[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light {
    background: #1e293b !important; border-color: #334155 !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .apexcharts-tooltip-title {
    background: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important;
}
:root[data-theme="dark"] .apexcharts-tooltip-text-y-label,
:root[data-theme="dark"] .apexcharts-tooltip-text-y-value,
:root[data-theme="dark"] .apexcharts-tooltip-text-z-value,
:root[data-theme="dark"] .apexcharts-tooltip-text-goals-label,
:root[data-theme="dark"] .apexcharts-tooltip-text-goals-value { color: #f1f5f9 !important; }

/* ---- tooltip estilo ApexCharts (hoy solo lo usa "Alertas de stock bajo" — GraficaBarras y
   GraficaBarrasHorizontales quedaron sin uso, migradas a ApexChart) ----
   Réplica visual del tooltip NATIVO de ApexCharts (.apexcharts-tooltip.apexcharts-theme-light):
   esquinas de 5px, sombra suave, header gris claro (#ECEFF1) con línea inferior, filas con
   marcador circular en vez de barra de color sólida. El marcado se renderiza SIEMPRE en el DOM
   (sin @onmouseenter/@if de Blazor) y la visibilidad la controla 100% CSS vía ":hover" — así no
   depende de un round-trip al servidor y no puede "parpadear" entre ítems vecinos. */
.graf-tooltip-anchor { position: relative; }
.graf-tooltip-rico {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px;
    background: rgba(255,255,255,.96); border: 1px solid #e3e3e3; border-radius: 5px; overflow: hidden;
    min-width: 160px; z-index: 50; pointer-events: none; font-size: .78rem;
    box-shadow: 2px 2px 10px -4px rgba(0,0,0,.35);
}
.graf-tooltip-hover { opacity: 0; visibility: hidden; transition: opacity .12s ease; }
.graf-tooltip-anchor:hover .graf-tooltip-hover { opacity: 1; visibility: visible; }
.graf-tooltip-header {
    background: #ECEFF1; color: #1f2937; font-weight: 700; font-size: .78rem;
    padding: 6px 10px; border-bottom: 1px solid #ddd;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.graf-tooltip-fila {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px; font-size: .78rem;
}
.graf-tooltip-fila::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: #dc2626;
}
.graf-tooltip-fila span { color: #1f2937; white-space: nowrap; }
.graf-tooltip-fila strong { margin-left: auto; color: #1f2937; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-theme="dark"] .graf-tooltip-rico { background: rgba(30,30,30,.9); border-color: #333; }
:root[data-theme="dark"] .graf-tooltip-header { background: rgba(0,0,0,.5); color: #fff; border-color: #333; }
:root[data-theme="dark"] .graf-tooltip-fila span,
:root[data-theme="dark"] .graf-tooltip-fila strong { color: #fff; }

/* Variante que abre hacia ABAJO en vez de arriba — para listas con su propio scroll vertical
   (ej. Alertas de stock bajo), donde un tooltip hacia arriba se recorta contra el borde
   superior del contenedor con overflow-y. */
.graf-tooltip-rico.graf-tooltip-abajo { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 6px; }

/* Tooltip NATIVO de Radzen (RadzenChart) — mismas variables, mismo look claro en TODAS las
   gráficas Radzen (Ventas vs Compras, Ventas y compras diarias, etc.), sin tocar cada una. */
:root {
    --rz-tooltip-background-color: #fff;
    --rz-tooltip-color: var(--pw-ink);
    --rz-tooltip-shadow: 0 14px 32px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.08);
    --rz-tooltip-padding: 7px 13px;
    --rz-tooltip-border-radius: 9px;
    --rz-tooltip-font-size: .76rem;
}
.rz-tooltip-content { font-weight: 700; border: 1px solid var(--pw-border); }

/* Cuando el contenido es nuestra plantilla propia (TooltipTemplate), el tooltip nativo de
   Radzen debe quedar sin su padding/borde por defecto — la plantilla ya trae su propio
   encabezado de color + filas (mismo look que GraficaBarras/GraficaBarrasHorizontales). */
.rz-tooltip-content:has(.graf-tooltip-plantilla) { padding: 0; border: none; overflow: hidden; font-weight: normal; }
.graf-tooltip-plantilla { min-width: 150px; }
.graf-tooltip-plantilla .graf-tooltip-fila:first-of-type { border-top: none; }

/* Tooltip del menú lateral COLAPSADO (icon-rail) — ver wwwroot/js/menutooltip.js. Es "fixed"
   posicionado por JS (no CSS ::after) porque .app-sidebar tiene overflow-y:auto y eso recorta
   cualquier tooltip absoluto sin importar el overflow-x del contenedor. */
.menu-tooltip-flotante {
    display: none; position: fixed; transform: translateY(-50%);
    background: #1e293b; color: #fff; font-size: .78rem; font-weight: 600;
    padding: 6px 11px; border-radius: 7px; white-space: nowrap; z-index: 200;
    box-shadow: 0 8px 20px rgba(15,23,42,.28); pointer-events: none;
}
.menu-tooltip-flotante::before {
    content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: #1e293b;
}

:root[data-theme="dark"] { --rz-tooltip-background-color: #1e293b; --rz-tooltip-color: #fff; }
:root[data-theme="dark"] .rz-tooltip-content { border-color: #334155; }

/* ---- barras agrupadas (Ventas vs Compras por período) ---- */
.graf-barra-grupo { flex: 1 0 26px; min-width: 26px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.graf-barra-par { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.graf-barra-par .graf-barra { max-width: 13px; }

/* ---- línea de promedio punteada (Caja diaria) + barra destacada (pico/hoy) ---- */
.graf-barras-track { position: relative; }
.graf-barra-promedio { position: absolute; left: 0; right: 0; border-top: 2px dashed #f59e0b; z-index: 2; }
.graf-barra-promedio span {
    position: absolute; right: 2px; top: -19px; font-size: .62rem; font-weight: 700; color: #b45309;
    background: #fff7ed; padding: 1px 7px; border-radius: 8px; white-space: nowrap;
}
.graf-barra-pico { background: linear-gradient(180deg, #fbbf24, #f59e0b) !important; }

/* ---- línea / área (Ganancias por mes, Ventas y Compras diarias) ---- */
.graf-linea-wrap { padding: 16px; }
.graf-linea-plot { position: relative; width: 100%; height: 140px; }
.graf-linea-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.graf-linea-area { stroke: none; }
.graf-linea-trazo { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.graf-linea-punto {
    position: absolute; width: 8px; height: 8px; margin-left: -4px; margin-bottom: -4px;
    border-radius: 50%; background: #fff; border: 2px solid var(--pw-primary); cursor: pointer;
    transition: transform .12s ease;
}
.graf-linea-punto:hover { transform: scale(1.7); z-index: 10; }
.graf-linea-labels {
    display: flex; justify-content: space-between; font-size: .64rem; color: var(--pw-muted);
    padding: 6px 2px 0; overflow-x: auto; gap: 4px;
}

/* ---- dona / pie con total al centro (Ventas por tipo de documento) ---- */
.graf-dona-wrap { display: flex; align-items: center; gap: 22px; padding: 18px 16px; flex-wrap: wrap; }
.graf-dona-circulo { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.graf-dona {
    width: 100%; height: 100%; border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 26px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 26px));
}
.graf-dona-total {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; font-weight: 800; color: var(--pw-ink);
}
.graf-dona-leyenda { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 160px; }
.graf-dona-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--pw-ink); }
.graf-dona-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.graf-dona-etiqueta { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graf-dona-item strong { font-variant-numeric: tabular-nums; }

.dash-cuenta {
    display: flex; justify-content: space-between; padding: 10px 16px; font-size: .85rem;
    border-bottom: 1px solid var(--pw-border);
}
.dash-cuenta:last-child { border-bottom: none; }
.dash-cuenta span:first-child { color: var(--pw-muted); }
.dash-cuenta span:last-child { font-weight: 700; color: var(--pw-ink); }

/* ---- mini barra de progreso (% cobrado/pagado) bajo Cuentas por Cobrar/Pagar ---- */
.dash-cuenta-barra { height: 6px; background: var(--pw-bg); border-radius: 4px; margin: 4px 16px 8px; overflow: hidden; }
.dash-cuenta-barra-relleno { height: 100%; background: linear-gradient(90deg, #4ade80, #16a34a); border-radius: 4px; transition: width .3s ease; }

@media (max-width: 900px) {
    .dash-grid-2, .dash-grid-2-1, .dash-grid-3 { grid-template-columns: 1fr; }
    .dash-filtro { min-width: 140px; }
}

:root[data-theme="dark"] .dash-filtros,
:root[data-theme="dark"] .dash-panel { background: #111827; border-color: #1e293b; }
:root[data-theme="dark"] .dash-filtro input[type="date"] { background: #0b1120; border-color: #1e293b; color: var(--pw-text); }
:root[data-theme="dark"] .dash-panel-titulo,
:root[data-theme="dark"] .dash-panel-titulo-row,
:root[data-theme="dark"] .dash-tabla th,
:root[data-theme="dark"] .dash-tabla td,
:root[data-theme="dark"] .dash-cuenta,
:root[data-theme="dark"] .dash-tabs { border-color: #1e293b; }
:root[data-theme="dark"] .dash-btn-rango { background: #111827; border-color: #1e293b; color: var(--pw-text); }

/* ============================================================
   MANTENEDOR — CRUD genérico (Presentación y futuros catálogos)
   ============================================================ */
.mant-toolbar { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.mant-toolbar .dash-filtro { min-width: 220px; }
.mant-toolbar .dash-filtro-ancho { min-width: 280px; flex: 1 1 280px; }
/* Segunda fila de acciones secundarias (ej. Stock a Cero/Exportar/Importar en Ajuste de
   Inventario) — separada de la fila de filtros+Nuevo para no verse apretada contra ella. */
.mant-toolbar-secundaria { margin-top: -8px; }
/* .mant-btn-nuevo trae margin-left:auto (para pegarse a la derecha en la fila de filtros) — acá
   son varios botones seguidos (Stock a Cero/Exportar/Importar) que deben quedar juntos a la
   izquierda, no cada uno empujado por separado. */
.mant-toolbar-secundaria .mant-btn-nuevo { margin-left: 0; }
.mant-btn-nuevo {
    height: 40px; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer; margin-left: auto;
    background: linear-gradient(135deg, var(--pw-primary-l), var(--pw-primary)); color: #fff;
    font-size: .86rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
    box-shadow: 0 8px 18px rgba(79,70,229,.28); transition: transform .12s;
}
.mant-btn-nuevo:hover { transform: translateY(-1px); }

.mant-tabla-acciones { display: flex; gap: 6px; justify-content: flex-end; }
.mant-btn-icono {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pw-border); border-radius: 8px; background: #fff; cursor: pointer;
    color: var(--pw-muted); transition: all .12s;
}
.mant-btn-icono:hover { background: var(--pw-bg); color: var(--pw-ink); }
.mant-btn-icono.peligro:hover { background: rgba(220,38,38,.1); color: #dc2626; border-color: rgba(220,38,38,.3); }

.mant-form {
    background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow); padding: 20px; margin-bottom: 20px; max-width: 520px;
}
.mant-form-titulo { font-size: .95rem; font-weight: 800; color: var(--pw-ink); margin: 0 0 16px; }
.mant-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.mant-campo label { font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em; }
.mant-campo input[type="text"],
.mant-campo input[type="date"] { height: 40px; }

/* Checkbox suelto fuera de .mant-campo (ej. pestañas de Configuración) — reemplaza el hack de
   <br/> entre labels con separación real y alineación vertical del check con el texto. */
.mant-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .88rem; color: var(--pw-ink); cursor: pointer; }
.mant-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pw-primary); cursor: pointer; }

/* Celda de tabla con un campo + su checkbox "Actualizar en destino" (Transferencia) — en una fila
   angosta de tabla, .combo:100% empuja el checkbox a otra línea si van sueltos; este wrapper los
   pone lado a lado (input encoge, checkbox queda fijo a la derecha), réplica del "SI" al lado del
   campo en frmTransferencia.cs del escritorio. */
.mform-td-conmarca { display: flex; align-items: center; gap: 6px; }
.mform-td-conmarca .combo { width: auto; min-width: 0; }
.mform-td-conmarca > :first-child { flex: 1 1 auto; min-width: 0; }
.mform-td-conmarca .mant-checkbox { margin-bottom: 0; gap: 4px; flex: 0 0 auto; }
/* Dentro del modal el combo debe ocupar todo el ancho disponible, no el max-width fijo (260px)
   pensado para la barra superior — si no, queda un hueco muerto a la derecha del campo. */
.mant-campo .combo,
.mant-campo .cb-wrap,
.mant-campo .cb-input-wrap { width: 100%; max-width: 100%; }

/* ---- campo con un control chico "acompañante" al lado (checkbox Auto/Pvv, botón buscar) ----
   Antes esto se armaba con style="display:flex" inline y sin flex-basis: el input, al tener
   width:100% (regla de .combo de arriba) y compartir fila con un label de ancho fijo, se pisaban
   en pantallas angostas (el checkbox/label quedaba recortado o el input se salía del contenedor).
   Con flex:1 + min-width:0 el input se encoge de verdad dentro del espacio disponible y el
   acompañante (flex-shrink:0) nunca pierde su ancho natural. Usar en formularios NUEVOS
   (ProductoM/ProductoR) — no se tocó el markup de ProductoF, que sigue con el patrón inline viejo. */
.mant-campo-inline { display: flex; gap: 8px; align-items: center; }
.mant-campo-inline > input.combo,
.mant-campo-inline > .cb-wrap { flex: 1 1 auto; min-width: 0; }
.mant-campo-inline > label { flex: 0 0 auto; white-space: nowrap; }
.mant-form-botones { display: flex; gap: 10px; margin-top: 4px; }
.mant-btn-secundario {
    height: 40px; padding: 0 18px; border: 1px solid var(--pw-border); border-radius: 10px; cursor: pointer;
    background: #fff; color: var(--pw-ink); font-size: .86rem; font-weight: 600;
}
.mant-btn-secundario:hover { background: var(--pw-bg); }
.mant-msg { padding: 10px 14px; border-radius: 10px; font-size: .84rem; margin-bottom: 14px; }
.mant-msg-ok { background: #dcfce7; color: #16a34a; }
.mant-msg-error { background: #fee2e2; color: #dc2626; }

:root[data-theme="dark"] .mant-form { background: #111827; border-color: #1e293b; }
:root[data-theme="dark"] .mant-btn-icono { background: #0b1120; border-color: #1e293b; color: var(--pw-text); }
:root[data-theme="dark"] .mant-btn-secundario { background: #0b1120; border-color: #1e293b; color: var(--pw-text); }

/* ---- encabezados ordenables + paginación (patrón para cualquier mantenedor) ---- */
.mant-th-ord { cursor: pointer; user-select: none; white-space: nowrap; }
.mant-th-ord:hover { color: var(--pw-ink); }
.mant-paginacion {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding: 12px 16px; border-top: 1px solid var(--pw-border);
}
.mant-paginacion-info { font-size: .8rem; color: var(--pw-muted); }
.mant-paginacion-botones { display: flex; align-items: center; gap: 10px; }
.mant-paginacion-num { font-size: .82rem; color: var(--pw-ink); font-weight: 600; white-space: nowrap; }
.mant-btn-icono:disabled { opacity: .4; cursor: default; }
.mant-btn-icono:disabled:hover { background: #fff; color: var(--pw-muted); }

:root[data-theme="dark"] .mant-paginacion { border-color: #1e293b; }
:root[data-theme="dark"] .mant-btn-icono:disabled:hover { background: #0b1120; }
:root[data-theme="dark"] .popover-ver-todas { border-top-color: #1e293b; }

/* ---- mantenedores con muchos campos (ej. Producto): modal ancho, agrupado en secciones ----
   Ver ARQUITECTURA-WEB.md, "Tablas anchas": en vez de una lista larga de inputs, se agrupan
   en bloques con título (Datos generales / Datos de Farmacia / Stock y precios). */
.modal-card-lg { max-width: 720px; max-height: 88vh; overflow-y: auto; }
.modal-card-xl { max-width: 1100px; max-height: 88vh; overflow-y: auto; }
.modal-tabs.dash-tabs { margin: 0 0 16px; }

/* ---- página propia de Nuevo/Editar (Producto) — reemplaza el modal para mantenedores grandes ----
   Ver ARQUITECTURA-WEB.md, "Tablas anchas": un modal con alto acotado (max-height + scroll interno)
   deja de tener sentido a partir de ~20-30 campos; con página propia no hay límite de alto, hay URL
   dedicada para volver/recargar/compartir, y en celular no depende del truco de bottom-sheet. */
.pform-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pform-volver { width: 38px; height: 38px; font-size: 1.2rem; flex-shrink: 0; }
.pform-header .page-title { margin-bottom: 2px; }
.pform-header .page-sub { margin: 0; }
.pform-panel { padding: 18px 20px 20px; }
.pform-acciones { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pw-border); }

/* Aviso fijo de empresa en ProductoFormulario — no cambia con el combo global del header */
.pform-aviso-empresa {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px;
    border-radius: 10px; background: #eef2ff; color: #4338ca; font-size: .9rem;
}
@media (prefers-color-scheme: dark) {
    .pform-aviso-empresa { background: rgba(99,102,241,.15); color: #a5b4fc; }
}
:root[data-theme="dark"] .pform-aviso-empresa { background: rgba(99,102,241,.15); color: #a5b4fc; }

@media (max-width: 640px) {
    .pform-panel { padding: 14px; }
    .pform-acciones { flex-direction: column-reverse; }
    .pform-acciones button { width: 100%; justify-content: center; }
}

/* ---- tabla de precios por volumen (Producto, tab Configuración) ---- */
.mant-tabla-precios td:first-child { font-size: .78rem; font-weight: 600; color: var(--pw-muted); white-space: nowrap; }
.mant-tabla-precios td { padding: 8px 10px; }
.mant-tabla-precios input { height: 34px; min-width: 90px; }
.mant-seccion-titulo {
    font-size: .74rem; font-weight: 800; color: var(--pw-primary); text-transform: uppercase;
    letter-spacing: .04em; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--pw-border);
}
.mant-seccion-titulo:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.mant-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.mant-grid-2 .mant-campo { margin-bottom: 14px; }

/* Campo de texto + botón de acción pegado a la derecha (ej. "Buscar por RUC/DNI",
   "Buscar tipo de cambio") — el input ocupa el espacio sobrante, el botón queda fijo. */
.mant-campo-con-boton { display: flex; gap: 6px; align-items: stretch; }
.mant-campo-con-boton input { flex: 1 1 auto; min-width: 0; }
.mant-campo-con-boton .mant-btn-icono { flex: 0 0 auto; width: 40px; height: 40px; }

/* Texto de ayuda bajo un campo (ej. producto ya seleccionado en Comisión/Promoción). */
.mant-hint { display: block; margin-top: 4px; font-size: .82rem; color: var(--pw-muted); }
.mant-hint-error { color: #b91c1c; }

/* ---- botón "link" dentro de un hint (ej. "Registrarlo aquí" junto al aviso de tipo de cambio
   faltante) — mismo tamaño de fuente que el hint, subrayado, sin fondo de botón. ---- */
.mant-link-btn {
    background: none; border: none; padding: 0; margin-left: 4px; color: inherit; font: inherit;
    font-weight: 700; text-decoration: underline; cursor: pointer;
}

/* Grupo de radios en línea (ej. tipo de promoción: Descuento % / Producto 2x1). */
.mant-radio-grupo { display: flex; gap: 20px; align-items: center; margin-bottom: 12px; }

/* Vista previa de logo (Empresa/Sede) — sin esto el <img> se renderiza a su tamaño nativo (a
   veces miles de px) y se sale del modal. Se limita a una miniatura contenida. */
.mant-logo-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mant-logo-preview img {
    width: 96px; height: 96px; object-fit: contain; border-radius: 10px;
    border: 1px solid var(--pw-border); background: #fff; padding: 4px;
}

/* Fila clickeable seleccionada (ej. elegir punto de atención al abrir caja). */
.fila-seleccionada { background: var(--pw-primary-l, #eef2ff); }

/* Input numérico angosto dentro de una fila de carrito (cantidad/precio/descuento). */
.mant-input-chico { width: 90px; padding: 6px 8px; }

/* Textarea expandible de una fila para comentarios en tablas de detalle. */
.mant-textarea-fila {
    resize: vertical;
    min-height: 32px;
    max-height: 120px;
    font-family: inherit;
}

/* Panel de totales del carrito (Subtotal/IGV/Total) — réplica de lbl_subtotal/lbl_igv/lbl_total
   del escritorio, alineados a la derecha. */
.mant-totales {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
    margin: 12px 0; padding: 12px 16px; background: var(--pw-bg-soft, #f8fafc);
    border-radius: 10px; border: 1px solid var(--pw-border);
}
.mant-totales > div { display: flex; gap: 16px; min-width: 220px; justify-content: space-between; font-size: .88rem; }
.mant-totales-final { font-size: 1.05rem; padding-top: 6px; border-top: 1px solid var(--pw-border); }
.mant-totales-final strong { color: var(--pw-primary); }

/* ---- Rediseño de "Registrar Cobranza" — EXCLUSIVO de CobranzaModalVenta.razor (Venta). El
   CobranzaModal.razor compartido con Compra sigue con sus clases .mant-totales de siempre. ---- */
.vcob-card {
    max-width: 880px; display: flex; flex-direction: column; overflow: hidden;
}
.vcob-card .modal-head { flex: 0 0 auto; }
.vcob-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.vcob-card .modal-actions {
    flex: 0 0 auto; margin-top: 0; padding-top: 14px; border-top: 1px solid var(--pw-border);
}

.vcob-card .vcob-totales { flex: 0 0 auto; margin-top: 4px; }

.vcob-tipopago { margin-bottom: 14px; }
.vcob-tipopago > label {
    font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .03em; display: block; margin-bottom: 8px;
}
.vcob-tipopago-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.vcob-chip {
    height: 40px; border: 1.5px solid var(--pw-border); border-radius: 10px; background: #fff;
    color: var(--pw-ink); font-size: .78rem; font-weight: 700; cursor: pointer;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; transition: all .12s;
}
.vcob-chip:hover { border-color: var(--pw-primary-l); }
.vcob-chip.sel { border-color: var(--pw-primary); background: #eef2ff; color: var(--pw-primary); }

.vcob-monto-fila { display: flex; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.vcob-monto-campo { flex: 1; min-width: 160px; }
.vcob-rapidos-campo { flex: 1.3; min-width: 240px; }
.vcob-monto-fila > div > label {
    font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .03em; display: block; margin-bottom: 8px;
}
.vcob-monto-input-wrap { position: relative; }
.vcob-monto-input-wrap span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 1rem; font-weight: 800; color: var(--pw-muted); }
.vcob-monto-input-wrap input { height: 48px; padding-left: 38px; font-size: 1.15rem; font-weight: 800; }
.vcob-rapidos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vcob-rapidos-grid.vcob-rapidos-fila { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vcob-btn-rapido {
    height: 48px; border: 1.5px solid var(--pw-border); border-radius: 9px; background: #fff;
    color: var(--pw-ink); font-weight: 700; font-size: .8rem; cursor: pointer; transition: all .12s;
}
.vcob-rapidos-fila .vcob-btn-rapido { height: 46px; font-size: .8rem; padding: 0 4px; }
.vcob-btn-rapido:hover { border-color: var(--pw-primary-l); }
.vcob-btn-rapido.destacado { border-color: var(--pw-primary); background: #eef2ff; color: var(--pw-primary); }

.vcob-btn-agregar {
    flex: 0 0 auto; padding: 0 16px; border: none; border-radius: 10px; cursor: pointer; white-space: nowrap;
    background: linear-gradient(135deg, var(--pw-primary-l), var(--pw-primary)); color: #fff;
    font-size: .84rem; font-weight: 700; display: flex; align-items: center; gap: 6px;
    box-shadow: 0 6px 14px rgba(79,70,229,.25); transition: transform .12s;
}
.vcob-btn-agregar:hover { transform: translateY(-1px); }

.vcob-pagos-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.vcob-pago-chip {
    display: flex; align-items: center; gap: 8px; background: var(--pw-bg); border: 1px solid var(--pw-border);
    border-radius: 9px; padding: 7px 10px; font-size: .8rem; color: var(--pw-ink);
}
.vcob-pago-chip svg { color: var(--pw-primary); }
.vcob-pago-tipo { font-weight: 700; }
.vcob-pago-monto { font-weight: 800; }
.vcob-pago-ref { color: var(--pw-muted); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcob-pago-chip button { border: none; background: transparent; color: var(--pw-muted); cursor: pointer; display: flex; padding: 2px; }
.vcob-pago-chip button:hover { color: #dc2626; }

.vcob-totales {
    display: flex; background: var(--pw-bg); border: 1px solid var(--pw-border); border-radius: 12px;
    padding: 14px 4px; margin-bottom: 16px;
}
.vcob-total-item { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.vcob-total-item:not(:first-child) { border-left: 1px solid var(--pw-border); }
.vcob-total-item span { font-size: .7rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em; }
.vcob-total-item strong { font-size: 1.15rem; font-weight: 800; color: var(--pw-ink); }
.vcob-total-cobrar strong { color: var(--pw-ink); }
.vcob-total-recibido {
    flex: 1.3; background: #f0fdf4; border-radius: 10px; padding: 4px 0; margin: -14px 4px; border-left: none !important;
}
.vcob-total-recibido span, .vcob-total-recibido strong { color: #16a34a; }
.vcob-total-recibido strong { font-size: 1.55rem; }
.vcob-total-recibido + .vcob-total-item { border-left: none; }
.vcob-total-faltante span, .vcob-total-faltante strong { color: #dc2626; }
.vcob-total-vuelto span { color: #2563eb; }
.vcob-total-vuelto strong { color: #2563eb; }

/* ---- badge de estado (Activo/Anulado) — reutilizable en cualquier mantenedor con soft-delete ---- */
.mant-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700;
}
.mant-badge-ok { background: #dcfce7; color: #15803d; }
.mant-badge-anulado { background: #fee2e2; color: #b91c1c; }
.badge-poca   { background: #fee2e2; color: #b91c1c; }
.badge-media  { background: #fef3c7; color: #b45309; }
.badge-otro   { background: #e2e8f0; color: #475569; }
.mant-badge-baja { background: #fef3c7; color: #b45309; }

/* ---- Rediseño de filtros de listado (Ventas y reutilizable en otros listados): punto de estado
   junto al documento, chips toggle para checkboxes, resumen de resultados, filtros avanzados
   colapsables. Clases NUEVAS — no pisan ninguna regla existente, así que no afectan otros
   listados que sigan usando checkboxes/columna Estado tradicional. ---- */
.dash-doc-estado { display: flex; align-items: center; gap: 8px; }
.dash-estado-punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dash-estado-punto.activo { background: #16a34a; }
.dash-estado-punto.anulado { background: #dc2626; }
.dash-texto-tenue { color: var(--pw-border); }

.dash-chip-toggle {
    height: 38px; padding: 0 14px; border: 1.5px solid var(--pw-border); border-radius: 10px;
    background: #fff; color: var(--pw-ink); font-size: .78rem; font-weight: 700; cursor: pointer;
    transition: all .12s;
}
.dash-chip-toggle:hover { border-color: var(--pw-primary-l); }
.dash-chip-toggle.sel { border-color: var(--pw-primary); background: var(--pw-primary); color: #fff; }

.dash-resumen-resultados { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; font-size: .9rem; }
.dash-resumen-resultados strong { color: var(--pw-ink); font-weight: 800; }
.dash-resumen-resultados strong.monto { color: var(--pw-primary); }
.dash-resumen-resultados .separador { color: var(--pw-border); }

/* ---- Modal "Abrir caja" rediseñado (mockup aprobado): tarjetas por punto de atención agrupadas
   por empresa en vez de tabla+radio, y saldo inicial protagonista con montos rápidos. ---- */
.acaja-card { max-width: 560px; }
.acaja-lista-scroll { max-height: 360px; overflow-y: auto; margin-bottom: 4px; }
.acaja-grupo-titulo {
    font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .03em; margin: 12px 0 6px;
}
.acaja-grupo-titulo:first-child { margin-top: 0; }
.acaja-tarjetas { display: flex; flex-direction: column; gap: 8px; }
.acaja-tarjeta {
    display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--pw-border); border-radius: 12px;
    padding: 12px 14px; cursor: pointer; transition: all .12s;
}
.acaja-tarjeta:hover { border-color: var(--pw-primary-l); background: #fafaff; }
.acaja-tarjeta-icono {
    width: 34px; height: 34px; border-radius: 9px; background: var(--pw-bg); border: 1px solid var(--pw-border);
    display: flex; align-items: center; justify-content: center; color: var(--pw-muted); flex-shrink: 0;
}
.acaja-tarjeta-nombre { font-size: .9rem; font-weight: 700; color: var(--pw-ink); }
.acaja-tarjeta-meta { font-size: .76rem; color: var(--pw-muted); }

.acaja-contexto {
    display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--pw-border); border-radius: 12px;
    padding: 10px 14px; background: var(--pw-bg); margin-bottom: 14px;
}
.acaja-contexto-icono {
    width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--pw-border);
    display: flex; align-items: center; justify-content: center; color: var(--pw-primary); flex-shrink: 0;
}
.acaja-contexto-nombre { font-size: .86rem; font-weight: 700; color: var(--pw-ink); }
.acaja-contexto-meta { font-size: .74rem; color: var(--pw-muted); }

.acaja-saldo { margin-bottom: 12px; }
.acaja-saldo > label {
    display: block; font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: 8px;
}
.acaja-saldo-input-wrap { position: relative; }
.acaja-saldo-input-wrap span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; font-weight: 800; color: var(--pw-muted); }
.acaja-saldo-input-wrap input { height: 52px; padding-left: 40px; font-size: 1.35rem; font-weight: 800; }

.acaja-rapidos { margin-bottom: 14px; }
.acaja-rapidos > label {
    display: block; font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: 8px;
}
.acaja-rapidos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.acaja-btn-rapido {
    height: 42px; border-radius: 10px; border: 1.5px solid var(--pw-border); background: #fff; color: var(--pw-ink);
    font-weight: 700; font-size: .84rem; cursor: pointer; transition: all .12s;
}
.acaja-btn-rapido:hover { border-color: var(--pw-primary-l); background: #eef2ff; color: var(--pw-primary); }

/* ---- Modal "Nuevo movimiento de caja" rediseñado: contexto de solo lectura (Empresa/Sede/Punto
   de Atención/N° Caja/Fecha) consolidado en una línea en vez de 5 campos apilados, tipo de
   movimiento como toggle de 2 (verde/rojo, igual que Detalle de Caja) y monto protagonista. ---- */
.acmov-contexto {
    display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--pw-border); border-radius: 12px;
    padding: 10px 14px; background: var(--pw-bg); margin-bottom: 14px;
}
.acmov-contexto-icono {
    width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--pw-border);
    display: flex; align-items: center; justify-content: center; color: var(--pw-primary); flex-shrink: 0;
}
.acmov-contexto-nombre { font-size: .86rem; font-weight: 700; color: var(--pw-ink); }
.acmov-contexto-caja { font-weight: 600; color: var(--pw-muted); }
.acmov-contexto-meta { font-size: .74rem; color: var(--pw-muted); }

.acmov-tipo { margin-bottom: 14px; }
.acmov-tipo > label {
    display: block; font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: 8px;
}
.acmov-tipo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.acmov-tipo-btn {
    height: 44px; border-radius: 10px; border: 1.5px solid var(--pw-border); background: #fff; color: var(--pw-ink);
    font-weight: 700; font-size: .86rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .12s;
}
.acmov-tipo-btn.entrada.sel { border-color: #16a34a; background: #f0fdf4; color: #16a34a; }
.acmov-tipo-btn.salida.sel { border-color: #dc2626; background: #fef2f2; color: #dc2626; }

.acmov-monto { margin-bottom: 14px; }
.acmov-monto > label {
    display: block; font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: 8px;
}
.acmov-monto-input-wrap { position: relative; }
.acmov-monto-input-wrap span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; font-weight: 800; color: var(--pw-muted); }
.acmov-monto-input-wrap input { height: 52px; padding-left: 40px; font-size: 1.35rem; font-weight: 800; }

/* ---- Modal "Detalle de Caja" rediseñado: KPIs de cuadre + movimientos como filas legibles en
   vez de una tabla de 9 columnas con un string crudo "Tipo Monto|Tipo Monto" en "Pagos". Clases
   exclusivas (vcaja-*) — no se toca .dash-tabla ni ningún otro modal. ---- */
.vcaja-card { max-width: 980px; display: flex; flex-direction: column; overflow: hidden; }
.vcaja-card .modal-head { flex: 0 0 auto; }
.vcaja-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.vcaja-card .modal-actions { flex: 0 0 auto; margin-top: 0; padding-top: 14px; border-top: 1px solid var(--pw-border); }

.vcaja-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vcaja-kpi { border: 1px solid var(--pw-border); border-radius: 12px; padding: 10px 14px; }
.vcaja-kpi-label { font-size: .68rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em; }
.vcaja-punto-tipo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 2px; }
.vcaja-kpi-valor { font-size: 1.05rem; font-weight: 800; margin-top: 3px; }
.vcaja-kpi-valor .ok { color: #16a34a; }
.vcaja-kpi-valor .bad { color: #dc2626; }
.vcaja-kpi-valor .sep { color: var(--pw-border); }
.vcaja-kpi.destacado { border: 1.5px solid var(--pw-primary); background: #eef2ff; }
.vcaja-kpi.destacado .vcaja-kpi-label { color: var(--pw-primary); }
.vcaja-kpi.destacado .vcaja-kpi-valor { color: var(--pw-primary); }
.vcaja-kpi.ok-fuerte { border: 1.5px solid #16a34a; background: #f0fdf4; }
.vcaja-kpi.ok-fuerte .vcaja-kpi-label { color: #16a34a; }
.vcaja-kpi.ok-fuerte .vcaja-kpi-valor { color: #16a34a; }

.vcaja-mov-titulo { font-size: .88rem; font-weight: 800; margin: 4px 0 8px; }
.vcaja-lista { border: 1px solid var(--pw-border); border-radius: 12px; overflow: hidden; }
.vcaja-mov { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #f1f5f9; }
.vcaja-mov:last-child { border-bottom: none; }
.vcaja-mov-icono {
    width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vcaja-mov-icono.entrada { background: #f0fdf4; color: #16a34a; }
.vcaja-mov-icono.salida { background: #fef2f2; color: #dc2626; }
.vcaja-mov-info { flex: 1; min-width: 0; }
.vcaja-mov-doc { font-size: .84rem; font-weight: 700; color: var(--pw-ink); }
.vcaja-mov-meta { font-size: .72rem; color: var(--pw-muted); }
.vcaja-mov-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 320px; }
.vcaja-chip {
    font-size: .7rem; font-weight: 700; color: var(--pw-ink); background: var(--pw-bg);
    border: 1px solid var(--pw-border); border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.vcaja-chip.credito { color: #b45309; background: #fef3c7; border-color: transparent; }
.vcaja-mov-monto { width: 90px; text-align: right; font-weight: 800; flex-shrink: 0; }
.vcaja-mov-monto.entrada { color: #16a34a; }
.vcaja-mov-monto.salida { color: #dc2626; }

/* ---- Cabecera de listado con acción principal separada de los filtros — reutilizable en
   cualquier listado (Ventas, Caja, etc.): título+subtítulo a la izquierda, botón principal a la
   derecha, nunca compitiendo con la fila de filtros de abajo. ---- */
.dash-cabecera-accion { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.dash-cabecera-accion .page-title, .dash-cabecera-accion .page-sub { margin-bottom: 0; }
.dash-cabecera-accion .mant-btn-nuevo { margin-left: 0; }

/* ---- "Más filtros" colapsable (reutilizable en cualquier listado) ---- */
.dash-btn-filtros-avanzados {
    height: 40px; padding: 0 12px; border: 1px solid var(--pw-border); border-radius: 10px;
    background: #fff; color: var(--pw-muted); font-size: .8rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 6px; transition: all .12s;
}
.dash-btn-filtros-avanzados.abierto { border-color: var(--pw-primary); background: #eef2ff; color: var(--pw-primary); }
.dash-btn-filtros-avanzados.abierto .ico { transform: rotate(180deg); }
.dash-panel-filtros-avanzados {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; padding: 14px 16px; margin: -6px 0 16px;
    background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius); box-shadow: var(--pw-shadow);
}

/* ---- Botón "Periodo" con popover (reemplaza 6 elementos sueltos de rango de fecha) ---- */
.dash-periodo-wrap { position: relative; }
.dash-periodo-overlay { position: fixed; inset: 0; z-index: 15; background: transparent; }
.dash-btn-periodo {
    height: 38px; padding: 0 12px; border: 1.5px solid var(--pw-border); border-radius: 10px;
    background: #fff; color: var(--pw-ink); font-size: .84rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: all .12s;
}
.dash-btn-periodo:hover { border-color: var(--pw-primary-l); }
.dash-btn-periodo.abierto { border-color: var(--pw-primary); background: #eef2ff; color: var(--pw-primary); }
.dash-btn-periodo .ico:last-child { margin-left: 2px; }
.dash-periodo-popover {
    position: absolute; top: 46px; left: 0; width: 360px; z-index: 20;
    background: #fff; border: 1px solid var(--pw-border); border-radius: 12px;
    box-shadow: 0 20px 40px rgba(15,23,42,.18); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.dash-periodo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dash-periodo-grid .dash-btn-rango { height: 36px; width: 100%; }
.dash-periodo-divider { height: 1px; background: var(--pw-border); }
.dash-periodo-popover > label {
    font-size: .7rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em;
}
.dash-periodo-rango { display: flex; align-items: center; gap: 8px; }
.dash-periodo-rango > span { color: var(--pw-muted); flex-shrink: 0; }
.dash-periodo-rango .rz-campo-fecha { width: 100%; min-width: 0; }
.dash-periodo-rango > div { flex: 1 1 0; min-width: 0; }


/* ---- "Más opciones" (Producto.razor) — RadzenSplitButton reestilado para verse como un
   .mant-btn-icono más (mismo gris/borde que "Editar"), no el celeste por defecto de Radzen.
   AlwaysOpenPopup=true hace que el botón principal YA abra el menú — el caret que Radzen agrega
   aparte queda redundante (mismo click), se oculta. ---- */
.prod-row-menu { display: inline-block; }
.prod-row-menu .rz-splitbutton-menubutton { display: none; }
.prod-row-menu .rz-splitbutton { border-radius: 10px; }
.prod-row-menu .rz-button {
    background: #fff !important; color: var(--pw-muted) !important;
    border: 1px solid var(--pw-border) !important; border-radius: 10px !important;
    width: 34px; height: 34px; box-shadow: none !important;
}
.prod-row-menu .rz-button:hover { background: var(--pw-bg) !important; color: var(--pw-primary) !important; }
:root[data-theme="dark"] .prod-row-menu .rz-button { background: #111827 !important; border-color: #1e293b !important; }

/* El primer ítem del menú queda pintado como "seleccionado" al abrir (Radzen le da foco de
   teclado por defecto) — se fuerza el color neutro en el elemento base (no una pseudo-clase
   puntual, porque no es :focus real ni una clase de estado fácil de adivinar) y se deja el
   resaltado SOLO para :hover real. */
.rz-splitbutton-menu .rz-menuitem,
.rz-splitbutton-menu .rz-menuitem-link {
    background: transparent !important; color: var(--pw-ink) !important; box-shadow: none !important;
}
.rz-splitbutton-menu .rz-menuitem:hover,
.rz-splitbutton-menu .rz-menuitem-link:hover {
    background: var(--pw-bg) !important; color: var(--pw-primary) !important;
}
:root[data-theme="dark"] .rz-splitbutton-menu .rz-menuitem,
:root[data-theme="dark"] .rz-splitbutton-menu .rz-menuitem-link { color: var(--pw-text) !important; }

.row-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
    border: none; background: none; text-align: left; cursor: pointer; border-radius: 8px;
    font-size: .84rem; font-weight: 600; color: var(--pw-ink);
}
.row-menu-item:hover { background: var(--pw-bg); }
.row-menu-item.peligro { color: #dc2626; }
.row-menu-sep { height: 1px; background: var(--pw-border); margin: 6px 2px; }
:root[data-theme="dark"] .row-menu-drop { background: #1e293b; border-color: #334155; }

/* ---- Kardex (modal en Producto.razor) ---- */
.kdx-th-fecha, .kdx-td-fecha { white-space: nowrap; }
.col-nowrap { white-space: nowrap; }
.kdx-tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.kdx-tag-venta { background: #dbeafe; color: #1d4ed8; }
.kdx-tag-compra { background: #dcfce7; color: #15803d; }
.kdx-tag-devolucion { background: #fee2e2; color: #b91c1c; }
.kdx-tag-ajuste { background: #fef3c7; color: #b45309; }
.kdx-tag-inventario { background: #ede9fe; color: #6d28d9; }
.kdx-tag-otro { background: #e5e7eb; color: #374151; }

/* ---- Unidad Medida (Producto): filas sueltas en flexbox, SIN tabla ----
   La versión anterior usaba <table> dentro de .dash-tabla-wrap (overflow-x:auto), y eso recortaba
   el desplegable del ComboBuscable: overflow-x:auto en un eje hace que el navegador compute
   overflow-y:auto en el otro (regla del spec CSS), así que el popup de opciones, que es
   position:absolute y se sale del alto de la fila, quedaba clipeado/invisible. Sin tabla no hay
   ningún contenedor con overflow que pueda recortar el popup. */
.udm-lista { display: flex; flex-direction: column; gap: 8px; }
.udm-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--pw-border); border-radius: 10px; background: #fff;
}
.udm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.udm-info strong { font-size: .86rem; color: var(--pw-ink); }
.udm-info span { font-size: .76rem; color: var(--pw-muted); }
.udm-fila-nueva { flex-wrap: wrap; background: rgba(79,70,229,.05); border-color: var(--pw-primary); }
.udm-combo { flex: 1 1 180px; min-width: 160px; }
.udm-input-precio { flex: 0 1 140px; min-width: 120px; }
.udm-acciones-nueva { display: flex; gap: 6px; flex-shrink: 0; }

/* ---- fila "Agregar" del tab Serie/Lote/Talla — 4 campos con label + input, misma línea base
   (antes: código/cantidad sin label desalineados contra las 2 fechas con label arriba). ---- */
.sl-fila-nueva { align-items: flex-end; }
.sl-campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 130px; }
.sl-campo-cantidad { flex: 0 1 110px; min-width: 90px; }
.sl-campo label { font-size: .68rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.sl-campo .combo { width: 100%; }
:root[data-theme="dark"] .udm-fila { background: #111827; border-color: #1e293b; }
:root[data-theme="dark"] .udm-fila-nueva { background: rgba(99,102,241,.1); }

/* ============================================================
   RESPONSIVE de mantenedores (Presentación, Producto, y futuros) — celular.
   Antes solo .mant-grid-2 colapsaba a 1 columna; el resto (toolbar de filtros,
   modal ancho, tabs del modal, tablas editables) se quedaba con medidas de escritorio,
   que en una pantalla de ~360-400px se ve apretado/"chico" aunque el viewport esté bien
   configurado — no es un problema de zoom, es que ningún elemento se adapta.
   ============================================================ */
@media (max-width: 640px) {
    .mant-grid-2 { grid-template-columns: 1fr; }

    /* Toolbar: cada filtro y botón pasa a ocupar toda la fila — mucho más fácil de tocar
       que 6-7 combos de 220px apretados en varias líneas cortas. */
    .mant-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .mant-toolbar .dash-filtro { min-width: 0; width: 100%; }
    .mant-toolbar .mant-btn-nuevo,
    .mant-toolbar .dash-btn-actualizar { width: 100%; justify-content: center; margin-left: 0; }
    .mant-toolbar .combo, .mant-toolbar .cb-input { min-height: 44px; font-size: .92rem; }

    /* Modal: menos padding para aprovechar el ancho real de la pantalla, tabs y campos más
       grandes al tacto (44px es el mínimo recomendado de área táctil). */
    .modal-card { padding: 16px; border-radius: 14px; }
    .modal-card-lg { max-height: 92vh; }
    .modal-card-xl { max-height: 92vh; max-width: 100%; }
    .dash-tabs.modal-tabs { gap: 2px; margin-bottom: 12px; }
    .dash-tab { padding: 10px 12px; font-size: .82rem; }
    .mant-campo label { font-size: .74rem; }
    .mant-campo input, .mant-campo select, .mant-campo textarea,
    .mant-campo .combo, .mant-campo .cb-input { min-height: 44px; font-size: .92rem; }
    .mant-seccion-titulo { font-size: .78rem; }

    /* Tabla de precios por nivel (Producto, tab Configuración): los inputs quedaban muy angostos
       al heredar el ancho de escritorio — se agrandan para no obligar a hacer zoom, y la tabla
       sigue scrolleando horizontal vía .dash-tabla-wrap. */
    .mant-tabla-precios input { min-height: 42px; min-width: 110px; font-size: .92rem; }
    .dash-tabla { font-size: .88rem; }

    /* Unidad Medida: filas sueltas ya son responsive por flex-wrap, solo se agranda el combo y el
       precio para que ocupen su propia línea completa en vez de quedar apretados uno al lado del otro. */
    .udm-fila-nueva { flex-direction: column; align-items: stretch; }
    .udm-combo, .udm-input-precio { flex: 1 1 auto; width: 100%; }
    .udm-input-precio { min-height: 44px; }
    .udm-acciones-nueva { justify-content: flex-end; }
}

/* ---- popups de Nuevo/Editar (y cualquier modal): pantallas muy chicas ---- */
@media (max-width: 480px) {
    .modal-overlay { padding: 8px; align-items: flex-end; }
    .modal-card {
        padding: 14px; border-radius: 16px 16px 0 0; max-height: 94vh;
        animation: modalSubirMovil .18s ease-out;
    }
    .modal-card-lg { max-height: 94vh; }
    .modal-card-xl { max-height: 94vh; }
    .modal-card-sm { max-width: none; }
    .modal-head { gap: 10px; margin-bottom: 12px; }
    .modal-icon { width: 34px; height: 34px; }
    .modal-head h3 { font-size: 1rem; }
    .modal-head p { font-size: .8rem; }
    /* Botones apilados a todo el ancho: más fácil de tocar que dos botones chicos lado a lado,
       y evita que "Cancelar"/"Guardar" queden apretados en ~340px de ancho útil. */
    .modal-actions { flex-direction: column-reverse; gap: 8px; }
    .modal-actions button { width: 100%; justify-content: center; }
    .dash-tab { padding: 9px 10px; font-size: .78rem; }
}
/* El modal "sube desde abajo" en vez de aparecer centrado — patrón de hoja/bottom-sheet, más
   natural en celular que un cuadro flotando a media pantalla. */
@keyframes modalSubirMovil { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ============================================================================================
   Formularios de Movimiento (Venta/Compra/Pedido/Cotización) — layout de 2 columnas con sidebar
   fijo, inspirado en el frmMovimientoAlmacen.cs de escritorio y en AgregarVenta.cshtml del otro
   proyecto web de referencia (webventasapp), pero construido con los tokens propios del proyecto
   (--pw-*) en vez de copiar Bootstrap/KTUI literal. Contenido principal = búsqueda de cliente/
   proveedor + producto + tabla de carrito; sidebar = datos del comprobante + totales + botón de
   acción, con scroll propio para que no se pierda de vista al bajar por un carrito largo.
   ============================================================================================ */
.mform-layout { display: flex; align-items: flex-start; gap: 20px; }
.mform-main { flex: 1 1 auto; min-width: 0; }
.mform-sidebar { flex: 0 0 340px; width: 340px; position: sticky; top: 20px; }

/* Antes tenía overflow:hidden para recortar las esquinas cuadradas del header contra el borde
   redondeado del panel — mismo problema que ya se había resuelto en .dash-panel (ver comentario
   arriba): recortaba el dropdown de resultados de Cliente/Proveedor/Producto (position:absolute,
   se sale del borde del card al escribir), mostrando solo 2-3 filas antes de un scroll falso. El
   header ahora se redondea a sí mismo en las esquinas superiores en vez de depender del overflow
   del contenedor. */
.mform-card { padding: 0; }
.mform-card-head {
    display: flex; align-items: center; gap: 12px; padding: 18px 20px; flex-wrap: wrap;
    border-bottom: 1px solid var(--pw-border);
    border-radius: var(--pw-radius) var(--pw-radius) 0 0;
}
/* ---- botón "Copia" (y hermanos futuros: Cotización/Pedido, Puntos, Detracción, Promoción,
   Datos — réplica del toolbar de frmMovimientoAlmacen.cs) alineado a la derecha del header. ---- */
.mform-btn-copia { margin-left: auto; flex-shrink: 0; }
.mform-card-icon {
    width: 42px; height: 42px; border-radius: 12px; background: #eef2ff; color: var(--pw-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
:root[data-theme="dark"] .mform-card-icon { background: rgba(99,102,241,.15); color: #a5b4fc; }
.mform-card-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--pw-ink); }
.mform-card-head p { margin: 2px 0 0; font-size: .82rem; color: var(--pw-muted); }
.mform-card-body { padding: 18px 20px 20px; }

.mform-search-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 16px; }
.mform-search-grid .mant-campo { margin-bottom: 0; }
@media (max-width: 900px) {
    .mform-search-grid { grid-template-columns: 1fr; }
}

/* ---- AjusteInventarioFormulario: item del carrito (mismo vform-item de Venta) — Actual/Nueva
   cantidad lado a lado (mismo tamaño, para comparar de un vistazo mientras se cuenta físicamente),
   diferencia + impacto en costo coloreados. ---- */
.ai-item-cantidades { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ai-item-cantidad { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.ai-item-cantidad label { font-size: .66rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em; }
.ai-item-cantidad input {
    width: 88px; height: 40px; border-radius: 8px; border: 1.5px solid var(--pw-border); padding: 0 10px;
    font-size: 1rem; font-family: inherit; font-weight: 700; text-align: right; color: var(--pw-ink);
}
.ai-item-cantidad input:focus { outline: none; border-color: var(--pw-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.ai-item-actual {
    width: 88px; height: 40px; border-radius: 8px; background: var(--pw-bg); border: 1.5px solid var(--pw-border);
    display: flex; align-items: center; justify-content: flex-end; padding: 0 10px;
    font-size: 1rem; font-weight: 700; color: var(--pw-muted);
}
.ai-item-flecha { color: var(--pw-muted); flex-shrink: 0; margin-top: 16px; }
.ai-item-diferencia { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 80px; flex-shrink: 0; }
.ai-item-diferencia .ai-dif { font-weight: 800; font-size: .94rem; color: var(--pw-muted); }
.ai-item-diferencia .ai-costo { font-size: .72rem; font-weight: 700; color: var(--pw-muted); }
.ai-resumen-sube { color: #15803d !important; }
.ai-resumen-baja { color: #c62828 !important; }

/* ---- AjusteInventarioFormulario: toggle "Modo escáner" junto al buscador ---- */
.ai-buscador-fila { display: flex; align-items: center; gap: 10px; }
.ai-buscador-fila > .cb-wrap { flex: 1; }
.ai-modo-escaner {
    display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 46px; border-radius: 9px;
    background: #f1f5f9; border: 1px solid var(--pw-border); flex-shrink: 0; cursor: pointer; white-space: nowrap;
    transition: all .12s;
}
.ai-modo-escaner.activo { background: #eef2ff; border-color: var(--pw-primary-l); }
.ai-switch { width: 34px; height: 20px; border-radius: 999px; background: var(--pw-border); position: relative; flex-shrink: 0; transition: background .15s; }
.ai-switch.on { background: var(--pw-primary); }
.ai-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ai-switch.on .ai-switch-knob { left: 16px; }
.ai-modo-escaner-txt { font-size: .78rem; font-weight: 700; color: var(--pw-ink); }
.ai-modo-escaner-hint { font-size: .66rem; color: var(--pw-muted); font-weight: 500; }

/* ---- AjusteInventario (listado): badge de color por Tipo de Ajuste + comentario recortado ---- */
.ai-badge-tipo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.ai-badge-conteo { background: #eef2ff; color: var(--pw-primary-d); }
.ai-badge-importado { background: #ecfdf5; color: #047857; }
.ai-badge-cero { background: #fef2f2; color: #c62828; }
.ai-celda-coment { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-acciones { display: flex; gap: 6px; }

/* ---- Transferencia/Guía (tg-*): ruta Origen->Destino, badges de estado, bloques numerados ---- */
.tg-ruta { display: flex; align-items: center; gap: 6px; font-size: .84rem; }
.tg-ruta .tg-sede { font-weight: 700; }
.tg-ruta svg { color: var(--pw-muted); flex-shrink: 0; }

.tg-badge-estado { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.tg-badge-pendiente { background: #fff7ed; color: #c2410c; }
.tg-badge-confirmado { background: #f0fdf4; color: #15803d; }
.tg-badge-anulado { background: #fef2f2; color: #c62828; }

/* Formulario Transferencia: flujo Origen -> Destino, dos cajas + flecha, en vez de dos secciones
   apiladas en el sidebar. */
.tg-flujo-od { display: flex; align-items: stretch; gap: 14px; padding: 18px; }
.tg-flujo-caja { flex: 1; border-radius: 12px; padding: 16px; border: 1.5px solid var(--pw-border); background: #fafbfe; }
.tg-flujo-caja.origen { border-color: #fed7aa; background: #fff7ed; }
.tg-flujo-caja.destino { border-color: #bbf7d0; background: #f0fdf4; }
.tg-flujo-caja-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pw-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tg-flujo-caja.origen .tg-flujo-caja-lbl { color: #c2410c; }
.tg-flujo-caja.destino .tg-flujo-caja-lbl { color: #15803d; }
.tg-flujo-caja .cb-wrap { margin-bottom: 8px; }
.tg-flujo-caja .cb-wrap:last-child { margin-bottom: 0; }
.tg-flujo-flecha { display: flex; align-items: center; justify-content: center; color: var(--pw-primary); flex-shrink: 0; width: 40px; }
.tg-flujo-nota { display: flex; gap: 10px; padding: 12px 18px; background: #eef2ff; color: var(--pw-primary-d); font-size: .78rem; align-items: flex-start; border-top: 1px solid var(--pw-border); }
.tg-flujo-nota svg { flex-shrink: 0; margin-top: 1px; }
@media (max-width: 780px) {
    .tg-flujo-od { flex-direction: column; }
    .tg-flujo-flecha { transform: rotate(90deg); width: auto; padding: 4px 0; }
}

/* Formulario Guía: 3 bloques numerados (Documento y motivo / Transportista / Partida y llegada). */
.tg-bloque-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--pw-border); }
.tg-bloque-num { width: 26px; height: 26px; border-radius: 50%; background: var(--pw-primary); color: #fff; font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tg-bloque-head h2 { margin: 0; font-size: .94rem; font-weight: 800; }
.tg-bloque-head p { margin: 2px 0 0; font-size: .76rem; color: var(--pw-muted); }
.tg-bloque-body { padding: 16px 18px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.tg-bloque-body.col3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tg-bloque-body.col2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tg-bloque-body .mant-campo.span2 { grid-column: span 2; }
@media (max-width: 900px) {
    .tg-bloque-body, .tg-bloque-body.col3, .tg-bloque-body.col2 { grid-template-columns: 1fr 1fr; }
}

/* Listado Guía: documento/motivo/transportista */
.tg-doc-mini { font-weight: 700; font-variant-numeric: tabular-nums; }
.tg-motivo-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; background: #eef2ff; color: var(--pw-primary-d); }
.tg-transportista { font-size: .78rem; color: var(--pw-muted); }
.tg-transportista strong { color: var(--pw-ink); font-weight: 700; }

/* ---- AjusteInventarioFormulario: mini-resumen (productos / suben / bajan) sobre el carrito ---- */
.ai-resumen { display: flex; gap: 10px; margin: 4px 0 12px; }
.ai-resumen-chip { flex: 1; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--pw-border); background: #fafbfe; }
.ai-resumen-chip.ai-impacto { background: #fff7ed; border-color: #fed7aa; }
.ai-resumen-n { font-size: 1.1rem; font-weight: 800; color: var(--pw-ink); }
.ai-resumen-n.ai-resumen-sube { color: #15803d; }
.ai-resumen-n.ai-resumen-baja { color: #c62828; }
.ai-resumen-l { font-size: .68rem; color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
:root[data-theme="dark"] .ai-resumen-chip { background: #111827; border-color: #1e293b; }

.mform-tabla-wrap { max-height: 440px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--pw-border); border-radius: 10px; }
.mform-tabla-wrap .dash-tabla { min-width: 780px; }
.mform-tabla-wrap .dash-tabla thead th {
    position: sticky; top: 0; background: var(--pw-bg); z-index: 1;
}
/* Sin esto las celdas usan el default del navegador (vertical-align: baseline) — la celda "PM"
   (solo el switch, sin texto) queda pegada arriba de la fila en vez de centrada con los inputs de
   las demás columnas. */
.mform-tabla-wrap .dash-tabla td { vertical-align: middle; }
:root[data-theme="dark"] .mform-tabla-wrap .dash-tabla thead th { background: #111827; }

/* Nombres de producto muy largos: se recortan con "..." y el nombre completo aparece con el
   title del navegador (tooltip) al pasar el mouse. */
.mform-tabla-wrap .dash-tabla td.mform-td-desc {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Fila con producto en promoción (verde) / con comisión (azul) — réplica de ColorearGrilla() en
   frmMovimientoAlmacen.cs, extendida acá también a comisión (el escritorio solo pinta promoción
   en la grilla principal; comisión solo se veía en el dropdown de búsqueda). */
.mform-tabla-wrap .dash-tabla tr.fila-promocion td { color: #15803d; }
.mform-tabla-wrap .dash-tabla tr.fila-comision td { color: #1d4ed8; }
.mform-btn-promocion { color: #15803d; }
:root[data-theme="dark"] .mform-tabla-wrap .dash-tabla tr.fila-promocion td { color: #4ade80; }
:root[data-theme="dark"] .mform-tabla-wrap .dash-tabla tr.fila-comision td { color: #60a5fa; }
:root[data-theme="dark"] .mform-btn-promocion { color: #4ade80; }

.mform-sidebar-panel {
    display: flex; flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden;
}
.mform-sidebar-head {
    display: flex; align-items: center; gap: 10px; padding: 16px 18px;
    border-bottom: 1px solid var(--pw-border); flex-shrink: 0;
}
.mform-sidebar-head h3 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--pw-ink); }
.mform-sidebar-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }

.mform-sidebar-section { margin-bottom: 18px; }
.mform-sidebar-section:last-child { margin-bottom: 0; }
.mform-sidebar-title {
    font-size: .68rem; font-weight: 800; color: var(--pw-primary); text-transform: uppercase;
    letter-spacing: .06em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--pw-border);
}
.mform-sidebar-section .mant-campo { margin-bottom: 12px; }
.mform-sidebar-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.mform-sidebar-grid2 .mant-campo { margin-bottom: 12px; }

.mform-totales-fila {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .82rem; color: var(--pw-muted); padding: 4px 0;
}
.mform-totales-fila strong { color: var(--pw-ink); font-variant-numeric: tabular-nums; }
.mform-totales-fila.total {
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--pw-border);
    font-size: 1rem; font-weight: 800; color: var(--pw-ink);
}
.mform-totales-fila.total strong { font-size: 1.15rem; color: var(--pw-primary-d); }

.mform-sidebar-foot { padding: 14px 18px; border-top: 1px solid var(--pw-border); flex-shrink: 0; }
.mform-sidebar-foot button { width: 100%; justify-content: center; }

@media (max-width: 1100px) {
    .mform-layout { flex-direction: column; }
    .mform-sidebar { position: static; width: 100%; flex: 1 1 auto; }
    .mform-sidebar-panel { max-height: none; }
}

@media (max-width: 480px) {
    .mform-sidebar-grid2 { grid-template-columns: 1fr; }
    .mform-card-head { padding: 14px 16px; }
    .mform-card-body { padding: 14px 16px 16px; }
}

/* ---- Rediseño de Nueva Venta (VentaFormulario.razor) — clases EXCLUSIVAS de esta pantalla.
   Compra/Cotización/Pedido siguen usando las clases .mform-* de arriba tal cual, sin tocar. ---- */
.vform-layout { display: flex; flex-direction: column; gap: 14px; }

/* ---- CobranzaModalCompra: toggle "Es crédito" con más peso visual — en Compra comprar al
   crédito es el caso más frecuente, no la excepción (a diferencia de Venta). ---- */
.vcompra-credito-card {
    display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--pw-border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 14px; cursor: pointer; transition: all .12s;
}
.vcompra-credito-card:hover { border-color: var(--pw-primary-l); }
.vcompra-credito-card.sel { border-color: var(--pw-primary); background: #eef2ff; }
.vcompra-credito-card input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--pw-primary); flex-shrink: 0; cursor: pointer; }
.vcompra-credito-info { display: flex; flex-direction: column; gap: 2px; }
.vcompra-credito-info strong { font-size: .88rem; color: var(--pw-ink); }
.vcompra-credito-info span { font-size: .76rem; color: var(--pw-muted); }

.vform-topbar { display: flex; align-items: flex-end; gap: 14px; padding: 12px 16px; flex-wrap: wrap; }
.vform-topbar-doc { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; flex: 0 1 auto; }
.vform-campo-chico { width: 150px; flex: 0 0 auto; }
.vform-campo-chico label { white-space: nowrap; }

.vform-doc-chips label {
    font-size: .72rem; font-weight: 700; color: var(--pw-muted); text-transform: uppercase;
    letter-spacing: .03em; display: block; margin-bottom: 6px;
}
.vform-doc-chips-row { display: flex; gap: 6px; }
.vform-doc-chip {
    height: 38px; padding: 0 14px; border: 1.5px solid var(--pw-border); border-radius: 8px;
    background: #fff; color: var(--pw-ink); font-size: .82rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: all .12s;
}
.vform-doc-chip:hover { border-color: var(--pw-primary-l); }
.vform-doc-chip.sel { border-color: var(--pw-primary); background: var(--pw-primary); color: #fff; }
.vform-doc-chip-otro { color: var(--pw-muted); }
.vform-doc-chip-otro.sel { background: #eef2ff; border-color: var(--pw-primary); color: var(--pw-primary); }
.vform-doc-chip-otro svg { width: 13px; height: 13px; }
.vform-doc-chips .cb-wrap { margin-top: 8px; min-width: 220px; }
.vform-topbar-info { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; margin-left: auto; }
.vform-chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
    color: var(--pw-ink); background: var(--pw-bg); border: 1px solid var(--pw-border);
    border-radius: 8px; padding: 6px 10px; white-space: nowrap;
}
.vform-btn-masdatos { margin-bottom: 2px; white-space: nowrap; }

.vform-masdatos {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 16px 18px;
}

.vform-buscador { position: relative; padding: 6px; border: 1.5px solid var(--pw-primary-l); box-shadow: 0 0 0 4px rgba(79,70,229,.08), var(--pw-shadow); }
.vform-buscador input { font-size: 1rem; padding-top: 12px; padding-bottom: 12px; padding-left: 44px; padding-right: 46px; }
.vform-buscador .cb-chevron { display: none; }
.vform-buscador-icono {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--pw-primary);
    display: flex; pointer-events: none; z-index: 1;
}
.vform-buscador-atajo {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1;
    font-size: .72rem; font-weight: 700; color: var(--pw-muted); background: var(--pw-bg);
    border: 1px solid var(--pw-border); border-radius: 6px; padding: 3px 8px;
}

.vform-body { display: flex; align-items: flex-start; gap: 14px; }

.vform-cart { flex: 1.7; display: flex; flex-direction: column; min-width: 0; }
.vform-cart-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--pw-border); }
.vform-cart-head h2 { margin: 0; font-size: .98rem; font-weight: 800; color: var(--pw-ink); }
.vform-cart-head p { margin: 2px 0 0; font-size: .74rem; color: var(--pw-muted); }
.vform-cart-head-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.vform-btn-vaciar, .vform-btn-promocion {
    height: 32px; padding: 0 12px; border: 1px solid var(--pw-border); border-radius: 8px;
    background: #fff; font-size: .76rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 6px; transition: all .12s;
}
.vform-btn-vaciar { color: #dc2626; }
.vform-btn-vaciar:hover:not(:disabled) { background: #fef2f2; border-color: #fecaca; }
.vform-btn-vaciar:disabled { opacity: .45; cursor: not-allowed; }

.vform-btn-promocion { color: var(--pw-primary); }
.vform-btn-promocion:hover { background: #eef2ff; border-color: var(--pw-primary-l); }
.vform-cart-tabla-wrap { padding: 8px 10px; flex: 1; }

/* ---- filas del carrito estilo tarjeta (reemplaza la tabla densa por un layout más legible) ---- */
.vform-cart-lista { flex: 1; overflow-y: auto; padding: 6px 10px; display: flex; flex-direction: column; }
.vform-item {
    display: flex; align-items: center; gap: 14px; padding: 14px 8px; border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.vform-item:last-child { border-bottom: none; }
.vform-item.fila-promocion .vform-item-desc { color: #15803d; }
.vform-item.fila-comision .vform-item-desc { color: #1d4ed8; }
:root[data-theme="dark"] .vform-item.fila-promocion .vform-item-desc { color: #4ade80; }
:root[data-theme="dark"] .vform-item.fila-comision .vform-item-desc { color: #60a5fa; }

.vform-item-icono {
    width: 42px; height: 42px; border-radius: 8px; background: var(--pw-bg); border: 1px solid var(--pw-border);
    display: flex; align-items: center; justify-content: center; color: var(--pw-muted); flex-shrink: 0;
}
.vform-item-info { flex: 1; min-width: 220px; }
.vform-item-desc { font-size: .9rem; font-weight: 700; color: var(--pw-ink); }
.vform-item-meta { font-size: .74rem; color: var(--pw-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.vform-item-und {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: 1px solid var(--pw-border); background-color: var(--pw-bg); color: var(--pw-ink);
    font-size: .72rem; font-weight: 700; cursor: pointer; padding: 3px 22px 3px 9px;
    border-radius: 20px; transition: all .12s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center; background-size: 14px;
}
.vform-item-und:hover { border-color: var(--pw-primary-l); background-color: #eef2ff; color: var(--pw-primary); }
.vform-item-und:focus { outline: none; border-color: var(--pw-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.vform-item-promo { color: var(--pw-primary); font-weight: 700; }

.vform-stepper {
    display: flex; align-items: center; gap: 8px; background: var(--pw-bg); border: 1px solid var(--pw-border);
    border-radius: 8px; padding: 4px; flex-shrink: 0;
}
.vform-stepper button {
    width: 26px; height: 26px; border: none; background: #fff; border-radius: 6px; color: var(--pw-ink);
    font-weight: 800; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.vform-stepper button:disabled { opacity: .4; cursor: default; }
.vform-stepper input {
    width: 32px; text-align: center; font-weight: 700; font-size: .88rem; border: none; background: transparent;
    color: var(--pw-ink); -moz-appearance: textfield;
}
.vform-stepper input::-webkit-outer-spin-button, .vform-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.vform-item-total { width: 96px; text-align: right; font-weight: 800; font-size: .94rem; color: var(--pw-ink); flex-shrink: 0; }
.vform-item-quitar { flex-shrink: 0; }

.vform-item-detalle {
    flex-basis: 100%; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 0 0 56px; margin-top: 2px;
}
.vform-item-detalle label {
    display: flex; flex-direction: column; gap: 3px; font-size: .68rem; font-weight: 700;
    color: var(--pw-muted); text-transform: uppercase; letter-spacing: .03em;
}
.vform-item-detalle input.combo { width: 90px; height: 32px; padding: 4px 8px; }
.vform-item-pm { flex-direction: row !important; align-items: center; gap: 6px !important; text-transform: none !important; font-size: .78rem !important; cursor: pointer; }
.vform-item-pm input { width: 15px; height: 15px; accent-color: var(--pw-primary); cursor: pointer; }
.vform-item-precios { font-size: .76rem; font-weight: 700; }

.vform-cart-foot {
    border-top: 1px solid var(--pw-border); background: #fbfbfe; padding: 14px 18px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.vform-totales-filas { display: flex; gap: 16px; flex-wrap: wrap; }
.vform-totales-filas .mform-totales-fila { display: flex; gap: 6px; font-size: .8rem; margin: 0; }
.vform-total-grande { display: flex; align-items: baseline; gap: 10px; margin-left: auto; }
.vform-total-grande span { font-size: .88rem; font-weight: 700; color: var(--pw-ink); }
.vform-total-grande strong { font-size: 1.5rem; font-weight: 800; color: var(--pw-primary); letter-spacing: -.02em; }
.vform-btn-pagar { height: 48px; padding: 0 26px; font-size: .95rem; }

.vform-side { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 260px; }
.vform-side-card { padding: 16px 18px; }
.vform-side-titulo { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 800; color: var(--pw-ink); margin-bottom: 12px; }
.vform-badge-opcional {
    font-size: .68rem; font-weight: 700; color: var(--pw-muted); background: var(--pw-bg);
    border: 1px solid var(--pw-border); border-radius: 6px; padding: 2px 7px;
}
.vform-busqueda-fila { display: flex; gap: 8px; align-items: flex-start; }
.vform-busqueda-fila > *:first-child { flex: 1; min-width: 0; }
.vform-accesos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vform-acceso-btn {
    height: 64px; border: 1px solid var(--pw-border); border-radius: 10px; background: var(--pw-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; color: var(--pw-ink); font-size: .74rem; font-weight: 700; transition: all .12s;
}
.vform-acceso-btn:hover:not(:disabled) { background: #eef2ff; border-color: var(--pw-primary-l); }
.vform-acceso-btn:disabled { opacity: .5; cursor: default; }
.vform-side-comentario { flex: 1; }
.vform-side-comentario textarea { width: 100%; }

@media (max-width: 1100px) {
    .vform-body { flex-direction: column; }
    .vform-side { width: 100%; }
    .vform-masdatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .vform-masdatos { grid-template-columns: 1fr; }
    .vform-accesos-grid { grid-template-columns: 1fr; }
    .vform-total-grande { margin-left: 0; }
}

/* ---- Permisos AddOn (/empresa/permisos/{id}) — dual-list de permisos disponibles/agregados,
   réplica funcional (no visual) de GestionarPermiso.cshtml + DualListBox.js de webventasapp ---- */
.addon-dual-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.addon-columna { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.addon-columna-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.addon-columna-head h3 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--pw-ink); }
.addon-lista {
    display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto;
    border: 1px solid var(--pw-border); border-radius: 10px; padding: 6px;
}
.addon-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: 8px; border: none; background: transparent;
    text-align: left; font-size: .84rem; color: var(--pw-ink); cursor: pointer;
}
.addon-item:hover { background: var(--pw-bg); }
.addon-item-agregado { flex-direction: row-reverse; justify-content: flex-end; }
.addon-item-agregado span { flex: 1 1 auto; }

@media (max-width: 720px) {
    .addon-dual-list { grid-template-columns: 1fr; }
}