/* ============================================================
   TEMA "NOCTURNO DORADO" — sistema de diseño global del POS
   ------------------------------------------------------------
   Identidad: dashboard oscuro premium (referencia del usuario).
   Base café-negro con brillo ambiental ámbar, paneles de vidrio
   oscuro, texto crema, acento dorado con texto oscuro (como los
   pills de la referencia). SIN rosa ni morado. Cian = info,
   esmeralda = dinero/éxito, rojo = peligro (semánticos).
   Tipos: Space Grotesk (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:#17120C;             /* fondo página (bajo el brillo) */
    --pv-panel:#241C12;          /* superficie de tarjetas */
    --pv-panel-2:#2A2113;        /* superficie elevada / inputs */
    --pv-tinta:#231A10;          /* café profundo (gradientes) */
    --pv-tinta-2:#7C4A03;        /* dorado oscuro (gradientes) */
    --pv-acento:#ECA02B;         /* dorado primario (texto oscuro encima) */
    --pv-acento-2:#D98A16;
    --pv-acento-txt:#F0B85C;     /* dorado para texto/links sobre oscuro */
    --pv-cian:#67D3E8;           /* información */
    --pv-exito:#34D399;          /* dinero / éxito (semántico) */
    --pv-hairline:#3A3220;
    --pv-hairline-2:rgba(255,255,255,.08);
    --pv-texto:#F0EAD9;
    --pv-texto-2:#B3A78C;
    --pv-texto-3:#857A5F;
    --pv-ambar-suave:#3B2F12;
    --pv-rojo:#FF8A75;
    --pv-rojo-suave:#3D211D;
    --pv-f-display:"Space Grotesk", "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:#F5C878;
    --bs-link-color-rgb:240,184,92;
    --bs-link-hover-color-rgb:245,200,120;
    --bs-body-color:var(--pv-texto);
    --bs-border-color:var(--pv-hairline);
}

body{
    background:
        radial-gradient(900px 520px at 88% -12%, rgba(245, 166, 35, .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; }
.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:#231A10 !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(236,160,43,.4); outline-offset:1px; }

/* Primario: pill dorado con texto oscuro (como la referencia) */
.btn-primary{
    --bs-btn-bg:var(--pv-acento);
    --bs-btn-border-color:var(--pv-acento);
    --bs-btn-color:#231A10;
    --bs-btn-hover-bg:var(--pv-acento-2);
    --bs-btn-hover-border-color:var(--pv-acento-2);
    --bs-btn-hover-color:#231A10;
    --bs-btn-active-bg:#C67C10;
    --bs-btn-active-border-color:#C67C10;
    --bs-btn-active-color:#231A10;
    --bs-btn-disabled-bg:#6B5A33;
    --bs-btn-disabled-border-color:#6B5A33;
    --bs-btn-disabled-color:#2A2113;
    --bs-btn-focus-shadow-rgb:236,160,43;
}
.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:#6B5316;
    --bs-btn-hover-bg:var(--pv-acento);
    --bs-btn-hover-border-color:var(--pv-acento);
    --bs-btn-hover-color:#231A10;
    --bs-btn-active-bg:var(--pv-acento-2);
    --bs-btn-active-border-color:var(--pv-acento-2);
    --bs-btn-active-color:#231A10;
    --bs-btn-focus-shadow-rgb:236,160,43;
}
.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:#3A2F16;
    --bs-btn-border-color:#57451D;
    --bs-btn-color:var(--pv-texto);
    --bs-btn-hover-bg:#4A3B1A;
    --bs-btn-hover-border-color:#6B5316;
    --bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#57451D;
    --bs-btn-active-border-color:#6B5316;
}
.btn-outline-dark{
    --bs-btn-color:var(--pv-texto);
    --bs-btn-border-color:#57451D;
    --bs-btn-hover-bg:#3A2F16;
    --bs-btn-hover-border-color:#6B5316;
    --bs-btn-hover-color:#fff;
}
.btn-secondary{
    --bs-btn-bg:#4A4232;
    --bs-btn-border-color:#4A4232;
    --bs-btn-color:var(--pv-texto);
    --bs-btn-hover-bg:#5A5140;
    --bs-btn-hover-border-color:#5A5140;
    --bs-btn-hover-color:#fff;
}
.btn-outline-secondary{
    --bs-btn-color:var(--pv-texto-2);
    --bs-btn-border-color:#57503C;
    --bs-btn-hover-bg:#4A4232;
    --bs-btn-hover-border-color:#57503C;
    --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:#332A15;
    --bs-btn-hover-border-color:#4A3E22;
    --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:#332A15;
}
.table-success{ --bs-table-bg:#14331F; --bs-table-color:#B7EED6; --bs-table-border-color:#1F4A30; }
.table-warning{ --bs-table-bg:#3B2F12; --bs-table-color:#F5DFA8; --bs-table-border-color:#6B5316; }
.table-danger{ --bs-table-bg:#3D211D; --bs-table-color:#FFC9BC; --bs-table-border-color:#6E4038; }
.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:#F5C15C !important; border:1px solid #6B5316; }
.badge.bg-danger{ background:var(--pv-rojo-suave) !important; color:var(--pv-rojo) !important; border:1px solid #6E4038; }
.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 #6B5316; }
.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:#4A3E22;
    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(236,160,43,.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:#57451D; }
.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(236,160,43,.18);
}
.input-group-text{
    border-radius:10px;
    border-color:#4A3E22;
    background:#332A15;
    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:#6B5316; color:#F5C15C; }
.alert-danger{ background:var(--pv-rojo-suave); border-color:#6E4038; color:var(--pv-rojo); }
.alert-info{ background:#12333B; border-color:#1D5561; color:var(--pv-cian); }

/* ---- 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:#231A10; }
.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:#332A15;
    --bs-pagination-hover-color:#F5C878;
    --bs-pagination-hover-border-color:var(--pv-hairline);
    --bs-pagination-focus-bg:#332A15;
    --bs-pagination-focus-color:#F5C878;
    --bs-pagination-active-bg:var(--pv-acento);
    --bs-pagination-active-border-color:var(--pv-acento);
    --bs-pagination-active-color:#231A10;
    --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:#231A10; }

/* ---- Barra de progreso, spinners, list groups ---- */
.progress{ background-color:var(--pv-panel-2); }
.progress-bar{ background-color:var(--pv-acento); color:#231A10; }
.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 #E0A83F;
}
.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(245,166,35,.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(245,166,35,.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(236,160,43,.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, #2A2113 25%, #332A15 45%, #2A2113 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; }
}