/* ============================================================
   TEMA "VIOLETA NOCTURNO" — sistema de diseño global del POS
   ------------------------------------------------------------
   Identidad: consola oscura premium tipo plataforma AI (referencia
   del usuario, estilo "Aivora"). Base carbón casi negro con brillo
   ambiental violeta/indigo, paneles de vidrio oscuro, texto blanco
   frío, acento violeta. Botones sólidos = violeta profundo con
   texto blanco. Cian = info, esmeralda = dinero/éxito, rojo =
   peligro (semánticos). Tipos: Outfit (títulos), DM Sans (UI,
   tabular-nums), mono para micro-etiquetas y encabezados de tabla.
   Se carga DESPUÉS de Bootstrap desde includes/header.php; las
   páginas standalone (POS, tickets de impresión) no lo cargan.
   ============================================================ */

:root{
    --pv-bg:#0B0B0F;             /* fondo página (bajo el brillo) */
    --pv-panel:#16161C;          /* superficie de tarjetas */
    --pv-panel-2:#1E1E27;        /* superficie elevada / inputs */
    --pv-tinta:#101014;          /* carbón profundo (gradientes) */
    --pv-tinta-2:#27303F;        /* violeta profundo (gradientes) */
    --pv-acento:#94A3B8;         /* violeta brillante (bordes/acentos sobre oscuro) */
    --pv-acento-2:#64748B;
    --pv-acento-txt:#C3CCDA;     /* violeta claro para texto/links sobre oscuro */
    --pv-cian:#67D3E8;           /* información */
    --pv-exito:#34D399;          /* dinero / éxito (semántico) */
    --pv-hairline:#2A2A33;
    --pv-hairline-2:rgba(255,255,255,.08);
    --pv-texto:#ECECF2;
    --pv-texto-2:#9A9AAB;
    --pv-texto-3:#6B6B7B;
    --pv-ambar-suave:#26262F;
    --pv-rojo:#FF8A75;
    --pv-rojo-suave:#3A1D24;
    --pv-f-display:"Outfit", "Segoe UI", system-ui, sans-serif;
    --pv-f-ui:"DM Sans", "Segoe UI", system-ui, Arial, sans-serif;
    --pv-f-mono:ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    /* Enlaces de Bootstrap al dorado claro (legible sobre oscuro) */
    --bs-link-color:var(--pv-acento-txt);
    --bs-link-hover-color:#D7DDE7;
    --bs-link-color-rgb:195,204,218;
    --bs-link-hover-color-rgb:215,221,231;
    --bs-body-color:var(--pv-texto);
    --bs-border-color:var(--pv-hairline);
}

body{
    background:
        radial-gradient(900px 520px at 88% -12%, rgba(148, 163, 184, .14), transparent 62%),
        radial-gradient(820px 560px at -8% 112%, rgba(59, 130, 246, .10), transparent 62%),
        var(--pv-bg);
    font-family:var(--pv-f-ui);
    color:var(--pv-texto);
}

/* ---- Títulos de página ---- */
h1, h2, h3, h4{
    font-family:var(--pv-f-display);
    font-weight:700;
    letter-spacing:-.02em;
    color:var(--pv-texto);
}
h2 .bi, h3 .bi{ color:var(--pv-acento); font-size:.85em; }
h5, h6{ font-weight:700; color:var(--pv-texto); }

/* ---- Utilidades Bootstrap re-ancladas al tema oscuro ---- */
.text-dark{ color:var(--pv-texto) !important; }
.text-muted{ color:var(--pv-texto-2) !important; }
.text-secondary{ color:var(--pv-texto-2) !important; }
.form-text, .text-body-secondary{ color:var(--pv-texto-2) !important; }
.text-primary{ color:var(--pv-acento-txt) !important; }
.text-success{ color:var(--pv-exito) !important; }
.text-body, .text-black{ color:var(--pv-texto) !important; }
.bg-light{ background-color:var(--pv-panel-2) !important; }
.bg-white{ background-color:var(--pv-panel) !important; }
.bg-primary{ background-color:var(--pv-acento) !important; color:#101014 !important; }
.border, .border-top, .border-bottom, .border-start, .border-end{ border-color:var(--pv-hairline) !important; }

/* ---- Tarjetas / paneles: vidrio oscuro ---- */
.card{
    background:var(--pv-panel);
    border:1px solid var(--pv-hairline-2);
    border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.25);
    color:var(--pv-texto);
}
.card-header{
    background:rgba(255,255,255,.03);
    border-bottom:1px solid var(--pv-hairline);
    font-weight:700;
    color:var(--pv-texto);
    border-radius:14px 14px 0 0 !important;
}
.card-footer{ background:rgba(255,255,255,.02); border-top:1px solid var(--pv-hairline); }

/* ---- Botones ---- */
.btn{ border-radius:10px; font-weight:600; }
.btn:focus-visible{ outline:3px solid rgba(148, 163, 184,.4); outline-offset:1px; }

/* Primario: violeta profundo con texto blanco (como la referencia) */
.btn-primary{
    --bs-btn-bg:#475569;
    --bs-btn-border-color:#475569;
    --bs-btn-color:#FFFFFF;
    --bs-btn-hover-bg:#334155;
    --bs-btn-hover-border-color:#334155;
    --bs-btn-hover-color:#FFFFFF;
    --bs-btn-active-bg:#27303F;
    --bs-btn-active-border-color:#27303F;
    --bs-btn-active-color:#FFFFFF;
    --bs-btn-disabled-bg:#39424F;
    --bs-btn-disabled-border-color:#39424F;
    --bs-btn-disabled-color:#9A9AAB;
    --bs-btn-focus-shadow-rgb:148,163,184;
}
.btn-success{
    --bs-btn-bg:#2BC48A;
    --bs-btn-border-color:#2BC48A;
    --bs-btn-color:#14261D;
    --bs-btn-hover-bg:#25AD79;
    --bs-btn-hover-border-color:#25AD79;
    --bs-btn-hover-color:#14261D;
    --bs-btn-active-bg:#1F9868;
    --bs-btn-active-border-color:#1F9868;
    --bs-btn-active-color:#14261D;
    --bs-btn-focus-shadow-rgb:43,196,138;
}
.btn-outline-primary{
    --bs-btn-color:var(--pv-acento-txt);
    --bs-btn-border-color:#39424F;
    --bs-btn-hover-bg:var(--pv-acento);
    --bs-btn-hover-border-color:var(--pv-acento);
    --bs-btn-hover-color:#101014;
    --bs-btn-active-bg:var(--pv-acento-2);
    --bs-btn-active-border-color:var(--pv-acento-2);
    --bs-btn-active-color:#101014;
    --bs-btn-focus-shadow-rgb:148,163,184;
}
.btn-outline-success{
    --bs-btn-color:var(--pv-exito);
    --bs-btn-border-color:#1F4A30;
    --bs-btn-hover-bg:#2BC48A;
    --bs-btn-hover-border-color:#2BC48A;
    --bs-btn-hover-color:#14261D;
    --bs-btn-focus-shadow-rgb:43,196,138;
}
/* "Oscuro" sobre fondo oscuro = chip elevado con borde */
.btn-dark{
    --bs-btn-bg:#26262F;
    --bs-btn-border-color:#33334A;
    --bs-btn-color:var(--pv-texto);
    --bs-btn-hover-bg:#2E2E38;
    --bs-btn-hover-border-color:#39424F;
    --bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#33334A;
    --bs-btn-active-border-color:#39424F;
}
.btn-outline-dark{
    --bs-btn-color:var(--pv-texto);
    --bs-btn-border-color:#33334A;
    --bs-btn-hover-bg:#26262F;
    --bs-btn-hover-border-color:#39424F;
    --bs-btn-hover-color:#fff;
}
.btn-secondary{
    --bs-btn-bg:#2E2E38;
    --bs-btn-border-color:#2E2E38;
    --bs-btn-color:var(--pv-texto);
    --bs-btn-hover-bg:#33333F;
    --bs-btn-hover-border-color:#33333F;
    --bs-btn-hover-color:#fff;
}
.btn-outline-secondary{
    --bs-btn-color:var(--pv-texto-2);
    --bs-btn-border-color:#33333F;
    --bs-btn-hover-bg:#2E2E38;
    --bs-btn-hover-border-color:#33333F;
    --bs-btn-hover-color:#fff;
}
.btn-light{
    --bs-btn-bg:var(--pv-panel-2);
    --bs-btn-border-color:var(--pv-hairline);
    --bs-btn-color:var(--pv-texto);
    --bs-btn-hover-bg:#24242D;
    --bs-btn-hover-border-color:#2E2E38;
    --bs-btn-hover-color:#fff;
}

/* ---- Tablas oscuras: renglones de libro contable ---- */
.table{
    --bs-table-bg:transparent;
    --bs-table-color:var(--pv-texto);
    --bs-table-border-color:var(--pv-hairline);
    --bs-table-striped-bg:rgba(255,255,255,.025);
    --bs-table-striped-color:var(--pv-texto);
    --bs-table-hover-bg:rgba(255,255,255,.05);
    --bs-table-hover-color:var(--pv-texto);
    color:var(--pv-texto);
}
.table thead th{
    font-family:var(--pv-f-mono);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--pv-texto-2);
    border-bottom:2px solid var(--pv-hairline);
    white-space:nowrap;
}
.table td, .table th{ font-variant-numeric:tabular-nums; }
.table tfoot th{ font-weight:800; border-top:2px solid var(--pv-hairline); }
/* Variantes de tabla de Bootstrap re-ancladas al oscuro */
.table-light{
    --bs-table-bg:var(--pv-panel-2);
    --bs-table-color:var(--pv-texto-2);
    --bs-table-border-color:var(--pv-hairline);
    --bs-table-striped-bg:var(--pv-panel-2);
    --bs-table-hover-bg:#24242D;
}
.table-success{ --bs-table-bg:#14331F; --bs-table-color:#B7EED6; --bs-table-border-color:#1F4A30; }
.table-warning{ --bs-table-bg:#26262F; --bs-table-color:#D7DDE7; --bs-table-border-color:#39424F; }
.table-danger{ --bs-table-bg:#3A1D24; --bs-table-color:#FFC9BC; --bs-table-border-color:#4A2530; }
.table-secondary{ --bs-table-bg:#2A251A; --bs-table-color:var(--pv-texto-2); --bs-table-border-color:var(--pv-hairline); }

/* ---- Badges: tintes oscuros con texto brillante ---- */
.badge{ font-weight:600; letter-spacing:.02em; border-radius:6px; }
.badge.bg-success{ background:#14331F !important; color:#6EE7B7 !important; border:1px solid #1F4A30; }
.badge.bg-warning{ background:var(--pv-ambar-suave) !important; color:#D7DDE7 !important; border:1px solid #39424F; }
.badge.bg-danger{ background:var(--pv-rojo-suave) !important; color:var(--pv-rojo) !important; border:1px solid #4A2530; }
.badge.bg-info{ background:#12333B !important; color:var(--pv-cian) !important; border:1px solid #1D5561; }
.badge.bg-secondary{ background:#2A251A !important; color:var(--pv-texto-2) !important; border:1px solid var(--pv-hairline); }
.badge.bg-primary{ background:var(--pv-ambar-suave) !important; color:var(--pv-acento-txt) !important; border:1px solid #39424F; }
.badge.bg-light{ background:var(--pv-panel-2) !important; color:var(--pv-texto-2) !important; border:1px solid var(--pv-hairline); }

/* ---- Formularios oscuros ---- */
/* OJO: background-color (NUNCA el shorthand "background": resetea
   background-repeat/position/size y la flecha del select se azulejaba) */
.form-control, .form-select{
    border-radius:10px;
    background-color:var(--pv-panel-2);
    border-color:#2E2E38;
    color:var(--pv-texto);
}
.form-control:focus, .form-select:focus{
    background-color:var(--pv-panel-2);
    color:var(--pv-texto);
    border-color:var(--pv-acento);
    box-shadow:0 0 0 .2rem rgba(148, 163, 184,.18);
}
.form-control::placeholder{ color:var(--pv-texto-3); }
.form-control:disabled, .form-select:disabled{ background-color:#1F1910; color:var(--pv-texto-3); }
/* Flecha del select en claro (la de Bootstrap es oscura), con sus
   longhands explícitos para no depender de la cascada */
.form-select{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23B3A78C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right .75rem center;
    background-size:16px 12px;
}
.form-label{
    font-size:.8rem;
    font-weight:600;
    color:var(--pv-texto-2);
    margin-bottom:.3rem;
}
.form-check-input{ background-color:var(--pv-panel-2); border-color:#33334A; }
.form-check-input:checked{
    background-color:var(--pv-acento);
    border-color:var(--pv-acento);
}
.form-check-input:focus{
    border-color:var(--pv-acento);
    box-shadow:0 0 0 .2rem rgba(148, 163, 184,.18);
}
.input-group-text{
    border-radius:10px;
    border-color:#2E2E38;
    background:#24242D;
    color:var(--pv-texto-2);
    font-size:.85rem;
}

/* ---- Alertas: tintes oscuros ---- */
.alert{ border-radius:12px; }
.alert-success{ background:#14331F; border-color:#1F4A30; color:#6EE7B7; }
.alert-warning{ background:var(--pv-ambar-suave); border-color:#39424F; color:#D7DDE7; }
.alert-danger{ background:var(--pv-rojo-suave); border-color:#4A2530; color:var(--pv-rojo); }
.alert-info{ background:#12333B; border-color:#1D5561; color:var(--pv-cian); }
/* Variantes neutras: Bootstrap las trae CLARAS y rompían el tema oscuro
   (p. ej. el recuadro explicativo de compras usa alert-light). */
.alert-light, .alert-secondary{ background:var(--pv-panel-2); border-color:var(--pv-hairline); color:var(--pv-texto-2); }
.alert-light strong, .alert-secondary strong{ color:var(--pv-texto); }
.alert-primary{ background:#232936; border-color:#39424F; color:#C3CCDA; }
.alert-dark{ background:var(--pv-panel); border-color:var(--pv-hairline); color:var(--pv-texto); }

/* Botón "Seleccionar archivo" de los inputs de archivo: el gris claro por
   defecto de Bootstrap dejaba el texto casi invisible sobre el tema oscuro. */
.form-control::file-selector-button{
    background-color:#33333F;
    color:var(--pv-texto);
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button{
    background-color:#3B3B49;
}

/* ---- Modales y dropdowns oscuros ---- */
.modal-content{
    background:var(--pv-panel);
    color:var(--pv-texto);
    border:1px solid var(--pv-hairline-2);
    border-radius:16px;
    box-shadow:0 18px 60px rgba(0,0,0,.6);
}
.modal-header{ border-bottom:1px solid var(--pv-hairline); }
.modal-footer{ border-top:1px solid var(--pv-hairline); }
.btn-close{ filter:invert(1) grayscale(100%) brightness(160%); }
.dropdown-menu{
    background:var(--pv-panel-2);
    border:1px solid var(--pv-hairline);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.dropdown-item{ color:var(--pv-texto); }
.dropdown-item:hover, .dropdown-item:focus{ background:rgba(255,255,255,.06); color:#fff; }
.dropdown-item.active, .dropdown-item:active{ background:var(--pv-acento); color:#101014; }
.dropdown-divider{ border-color:var(--pv-hairline); }

/* ---- Paginación y pestañas ---- */
.pagination{
    --bs-pagination-bg:var(--pv-panel-2);
    --bs-pagination-border-color:var(--pv-hairline);
    --bs-pagination-color:var(--pv-acento-txt);
    --bs-pagination-hover-bg:#24242D;
    --bs-pagination-hover-color:#D7DDE7;
    --bs-pagination-hover-border-color:var(--pv-hairline);
    --bs-pagination-focus-bg:#24242D;
    --bs-pagination-focus-color:#D7DDE7;
    --bs-pagination-active-bg:var(--pv-acento);
    --bs-pagination-active-border-color:var(--pv-acento);
    --bs-pagination-active-color:#101014;
    --bs-pagination-disabled-bg:#1F1910;
    --bs-pagination-disabled-color:var(--pv-texto-3);
    --bs-pagination-disabled-border-color:var(--pv-hairline);
}
.nav-tabs{ --bs-nav-tabs-border-color:var(--pv-hairline); --bs-nav-tabs-link-active-bg:var(--pv-panel); --bs-nav-tabs-link-active-border-color:var(--pv-hairline) var(--pv-hairline) var(--pv-panel); }
.nav-tabs .nav-link{ color:var(--pv-texto-2); font-weight:600; }
.nav-tabs .nav-link:hover{ border-color:var(--pv-hairline); }
.nav-tabs .nav-link.active{ color:var(--pv-acento-txt); background:var(--pv-panel); }
.nav-pills .nav-link{ color:var(--pv-texto-2); }
.nav-pills .nav-link.active{ background:var(--pv-acento); color:#101014; }

/* ---- Barra de progreso, spinners, list groups ---- */
.progress{ background-color:var(--pv-panel-2); }
.progress-bar{ background-color:var(--pv-acento); color:#101014; }
.spinner-border.text-primary{ color:var(--pv-acento) !important; }
.list-group-item{
    background:var(--pv-panel);
    color:var(--pv-texto);
    border-color:var(--pv-hairline);
}
.list-group-item-action:hover{ background:rgba(255,255,255,.05); color:#fff; }

/* ---- Cabecera de módulo (estilo "Productos": línea dorada) ---- */
.pv-cab{
    background:var(--pv-panel);
    border:1px solid var(--pv-hairline-2);
    border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.25);
    overflow:hidden;
}
.pv-cab-head{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:10px 16px;
    padding:16px 18px;
    background:var(--pv-ambar-suave);
    border-bottom:3px solid #64748B;
}
.pv-cab-izq{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.pv-cab-regresar{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:10px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:var(--pv-texto-2);
    font-size:1.05rem;
    text-decoration:none;
    transition:background .15s ease-out, color .15s ease-out, transform .12s ease-out;
}
.pv-cab-regresar:hover{ background:rgba(255,255,255,.12); color:#fff; transform:translateX(-2px); }
.pv-cab-titulo{
    margin:0;
    font-size:1.45rem;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.pv-cab-titulo .bi{ color:var(--pv-acento); }
.pv-cab-seccion{ color:var(--pv-texto-2); font-weight:500; }
.pv-cab-sub{
    font-size:.85rem;
    color:var(--pv-texto-2);
    margin-top:2px;
}

/* ---- Detalles finos ---- */
::selection{ background:rgba(148, 163, 184,.35); }
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(148, 163, 184,.45); }
hr{ border-color:var(--pv-hairline); opacity:1; }

/* ============================================================
   CAPA DE FLUIDEZ (reglas ui-ux-pro-max)
   - Micro-interacciones 150-300ms, ease-out entra / ease-in sale
   - Animación infinita SOLO en loaders
   - prefers-reduced-motion respetado al final
   ============================================================ */

html{ scroll-behavior:smooth; }

@view-transition{ navigation: auto; }
::view-transition-old(root){ animation-duration:.14s; animation-timing-function:ease-in; }
::view-transition-new(root){ animation-duration:.2s; animation-timing-function:ease-out; }

@keyframes pvPageIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
body > .container-fluid, .content > .container-fluid{
    animation:pvPageIn .24s ease-out backwards;
}

body.pv-saliendo > .container-fluid, body.pv-saliendo .content > .container-fluid{
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .12s ease-in, transform .12s ease-in;
    animation:none;
}

.btn{
    transition:background-color .18s ease-out, border-color .18s ease-out,
               color .18s ease-out, box-shadow .18s ease-out, transform .12s ease-out;
}
.btn:active{ transform:scale(.97); }
.btn:hover{ box-shadow:0 3px 12px rgba(0,0,0,.35); }
.btn-link:hover, .btn-sm:hover{ box-shadow:none; }

.card{ transition:box-shadow .2s ease-out, border-color .2s ease-out; }

.form-control, .form-select{ transition:border-color .18s ease-out, box-shadow .18s ease-out; }

.table tbody tr{ transition:background-color .14s ease-out; }

a{ transition:color .15s ease-out; }

.badge{ transition:background-color .15s ease-out; }

.nav-tabs .nav-link, .nav-pills .nav-link{
    transition:color .18s ease-out, background-color .18s ease-out, border-color .18s ease-out;
}

/* Sidebar: página actual marcada (regla nav Active State) */
.sidebar-menu a.pv-activo{
    background:rgba(148, 163, 184,.22);
    color:#fff;
}
.sidebar-menu a.pv-activo i{ color:var(--pv-acento-txt); }

/* Botón enviando: feedback inmediato + anti doble clic */
.btn.pv-cargando{ pointer-events:none; opacity:.75; }
.btn.pv-cargando .pv-spin{
    display:inline-block;
    width:1em; height:1em;
    margin-right:.45em;
    vertical-align:-.12em;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:pvGiro .6s linear infinite;   /* infinita: es un loader */
}
@keyframes pvGiro{ to{ transform:rotate(360deg); } }

/* Skeleton para cargas asíncronas */
.pv-skeleton{
    background:linear-gradient(90deg, #1E1E27 25%, #24242D 45%, #1E1E27 65%);
    background-size:200% 100%;
    animation:pvShimmer 1.1s linear infinite;
    border-radius:8px;
    color:transparent !important;
    pointer-events:none;
    user-select:none;
}
@keyframes pvShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    body > .container-fluid, .content > .container-fluid{ animation:none; }
    body.pv-saliendo > .container-fluid, body.pv-saliendo .content > .container-fluid{ transition:none; opacity:1; transform:none; }
    ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
    .btn, .card, .form-control, .form-select, .table tbody tr, a, .badge,
    .nav-tabs .nav-link, .nav-pills .nav-link{ transition:none; }
    .btn:active{ transform:none; }
}

/* ============================================================
   FX GLOBAL — efectos del sistema para TODAS las páginas de módulo
   ------------------------------------------------------------
   Reglas estrictas (mismas del POS): solo se animan transform y
   opacity (hilo compositor/GPU), animaciones de UNA pasada, stagger
   con tope, y prefers-reduced-motion apaga todo. Las entradas se
   anclan a .content, así las páginas standalone (POS, tickets,
   pantalla de cliente) NO las heredan: cada una tiene su propia capa.
   ============================================================ */

/* --- Tarjetas: entran en ola siguiendo el orden del grid --- */
@keyframes pvCardUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.container-fluid .card{ animation:pvCardUp .3s ease-out both; }
.container-fluid .row > div:nth-child(1) .card{ animation-delay:.03s; }
.container-fluid .row > div:nth-child(2) .card{ animation-delay:.07s; }
.container-fluid .row > div:nth-child(3) .card{ animation-delay:.11s; }
.container-fluid .row > div:nth-child(4) .card{ animation-delay:.15s; }
.container-fluid .row > div:nth-child(5) .card{ animation-delay:.19s; }
.container-fluid .row > div:nth-child(6) .card{ animation-delay:.23s; }
.container-fluid .row > div:nth-child(n+7) .card{ animation-delay:.26s; }

/* --- Filas de tabla: cascada breve en orden de lectura ---
   Tope en la fila 10: las tablas largas no hacen esperar. Las filas
   que un módulo agrega por JS (p. ej. captura de compras) también
   entran con este deslizamiento: feedback de "quedó agregado". */
@keyframes pvRowIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
.container-fluid .table tbody tr{ animation:pvRowIn .22s ease-out both; }
.container-fluid .table tbody tr:nth-child(1){ animation-delay:.05s; }
.container-fluid .table tbody tr:nth-child(2){ animation-delay:.08s; }
.container-fluid .table tbody tr:nth-child(3){ animation-delay:.11s; }
.container-fluid .table tbody tr:nth-child(4){ animation-delay:.14s; }
.container-fluid .table tbody tr:nth-child(5){ animation-delay:.17s; }
.container-fluid .table tbody tr:nth-child(6){ animation-delay:.20s; }
.container-fluid .table tbody tr:nth-child(7){ animation-delay:.23s; }
.container-fluid .table tbody tr:nth-child(8){ animation-delay:.26s; }
.container-fluid .table tbody tr:nth-child(9){ animation-delay:.29s; }
.container-fluid .table tbody tr:nth-child(n+10){ animation-delay:.32s; }

/* --- Alertas: pop sutil para que el aviso se note al llegar --- */
@keyframes pvAlertIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
.container-fluid .alert{ animation:pvAlertIn .26s ease-out both .1s; }

/* --- Modales: pop de apertura (Bootstrap alterna .show) --- */
.container-fluid .modal.fade .modal-dialog{
    transform:scale(.96) translateY(10px);
    transition:transform .18s ease-out;
}
.container-fluid .modal.show .modal-dialog{ transform:none; }

/* --- Menús desplegables: aparición con caída corta --- */
@keyframes pvMenuIn{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
.container-fluid .dropdown-menu.show{ animation:pvMenuIn .15s ease-out; }

/* --- Tarjeta bajo el cursor: elevación + línea de acento que se
       traza en el borde superior (señala QUÉ panel estás leyendo) --- */
.card{ position:relative; }
.card::before{
    content:"";
    position:absolute;
    top:0; left:16px; right:16px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--pv-acento), transparent);
    opacity:0;
    transform:scaleX(.35);
    transition:opacity .22s ease-out, transform .3s ease-out;
    pointer-events:none;
}
@media (hover: hover){
    .container-fluid .card{ transition:box-shadow .2s ease-out, border-color .2s ease-out, transform .18s ease-out; }
    .container-fluid .card:hover{ transform:translateY(-2px); }
    .container-fluid .card:hover::before{ opacity:.9; transform:scaleX(1); }
}

/* La tarjeta ACTIVA (cursor encima o foco en un campo interno) se eleva
   también en el eje Z. Sin esto, el transform del hover crea un contexto
   de apilamiento y sus desplegables (autocomplete del kardex, buscador de
   compras) quedaban DEBAJO de las tarjetas siguientes del DOM. */
.container-fluid .card:hover,
.container-fluid .card:focus-within{ z-index:10; }

/* --- Botón primario: destello de luz al pasar (una pasada) --- */
.container-fluid .btn-primary{ position:relative; overflow:hidden; }
.container-fluid .btn-primary::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:40%;
    left:-55%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform:skewX(-18deg);
    opacity:0;
    pointer-events:none;
    transition:transform .5s ease-out, opacity .15s ease-out;
}
@media (hover: hover){
    .container-fluid .btn-primary:hover::after{
        opacity:1;
        transform:translateX(340%) skewX(-18deg);
    }
}

/* --- Sidebar: micro-deslizamiento del enlace bajo el cursor --- */
@media (hover: hover){
    .sidebar a{ transition:background-color .15s ease-out, color .15s ease-out, transform .12s ease-out; }
    .sidebar a:hover{ transform:translateX(3px); }
}

/* --- Accesibilidad e impresión: sin movimiento --- */
@media (prefers-reduced-motion: reduce){
    .container-fluid .card, .container-fluid .table tbody tr, .container-fluid .alert,
    .container-fluid .dropdown-menu.show{ animation:none; }
    .container-fluid .modal.fade .modal-dialog{ transform:none; transition:none; }
    .container-fluid .card:hover{ transform:none; }
    .card::before{ display:none; }
    .container-fluid .btn-primary::after{ display:none; }
    .sidebar a:hover{ transform:none; }
}
@media print{
    .container-fluid .card, .container-fluid .table tbody tr, .container-fluid .alert{ animation:none; }
    .card::before, .container-fluid .btn-primary::after{ display:none; }
}

/* ============================================================
   Autocompletado universal de buscadores (tema.js, sección 4).
   Caja oscura bajo el input; z-index alto para pintar sobre las
   tarjetas (que al hacer hover crean contexto de apilamiento).
   ============================================================ */
.pv-ac-box{
    position:absolute;
    top:calc(100% + 4px);
    left:0; right:0;
    z-index:1060;
    max-height:300px;
    overflow-y:auto;
    background:var(--pv-panel-2);
    border:1px solid #33333F;
    border-radius:10px;
    box-shadow:0 14px 34px rgba(0,0,0,.5);
    animation:pvMenuIn .14s ease-out;
}
.pv-ac-item{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    padding:.55rem .8rem;
    cursor:pointer;
    border-bottom:1px solid var(--pv-hairline);
}
.pv-ac-item:last-child{ border-bottom:none; }
.pv-ac-item strong{
    color:var(--pv-texto);
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.pv-ac-item span{
    color:var(--pv-texto-2);
    font-size:.78rem;
    font-family:var(--pv-f-mono);
    white-space:nowrap;
    flex:0 0 auto;
}
.pv-ac-item:hover, .pv-ac-item.activo{ background:#2A2A33; }
@media (prefers-reduced-motion: reduce){
    .pv-ac-box{ animation:none; }
}

/* ============================================================
   Ticket flotante universal (tema.js, sección 5).
   El modal lo construye el JS; aquí solo el vestido oscuro.
   ============================================================ */
.pv-modal-ticket-dialog{ max-width:560px; }
.pv-modal-ticket .modal-content{
    background:var(--pv-panel);
    border:1px solid var(--pv-hairline);
    border-radius:14px;
    overflow:hidden;
}
.pv-modal-ticket .modal-header{
    background:rgba(255,255,255,.03);
    border-bottom:1px solid var(--pv-hairline);
    color:var(--pv-texto);
}
.pv-ticket-frame{
    display:block;
    width:100%;
    height:72vh;
    border:0;
    background:#0B0B0F;
}