/* ==== El corte del día: sistema de diseño portado 1:1 del legacy ==== */
.dx{
    --tinta:#101014;
    --tinta-2:#27303F;
    --verde:#94A3B8;
    --verde-suave:#26262F;
    --papel:#16161C;
    --hairline:#2A2A33;
    --texto:#ECECF2;
    --texto-2:#9A9AAB;
    --ambar:#D7DDE7;
    --ambar-suave:#26262F;
    --rojo:#FF8A75;
    --f-display:"Outfit", "Segoe UI", system-ui, sans-serif;
    --f-ui:"DM Sans", "Segoe UI", system-ui, Arial, sans-serif;
    --f-mono:ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    font-family:var(--f-ui);
    color:var(--texto);
}
.dx .dx-tag{
    font-family:var(--f-mono);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--texto-2);
}
.dx-hero{
    position:relative;
    background:linear-gradient(135deg, var(--tinta) 0%, var(--tinta-2) 100%);
    color:#f2f6f1;
    border-radius:16px;
    padding:26px 30px 24px;
    margin-bottom:14px;
    overflow:hidden;
}
.dx-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(520px 220px at 88% -30%, rgba(148, 163, 184,.22), transparent 70%);
    pointer-events:none;
}
.dx-hero .dx-tag{ color:#9A9AAB; }
.dx-hero-saludo{
    font-family:var(--f-display);
    font-weight:500;
    font-size:1.25rem;
    color:#C7C7D2;
    margin:10px 0 2px;
}
.dx-hero-cifra{
    font-family:var(--f-display);
    font-weight:600;
    font-variant-numeric:lining-nums;
    font-size:clamp(2.6rem, 6vw, 3.9rem);
    line-height:1.02;
    letter-spacing:-.015em;
    color:#fff;
}
.dx-hero-cifra .dx-cent{ font-size:.42em; font-weight:480; color:#B4B4C4; }
.dx-hero-sub{
    margin-top:8px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px;
    font-size:.86rem;
    color:#B4B4C4;
}
.dx-delta{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-weight:700;
    font-size:.8rem;
    padding:4px 10px;
    border-radius:999px;
    font-variant-numeric:tabular-nums;
}
.dx-delta.up{ background:rgba(52,211,153,.18); color:#6EE7B7; }
.dx-delta.down{ background:rgba(230,120,90,.16); color:#f2a58f; }
.dx-delta.neutro{ background:rgba(174,185,221,.12); color:#aeb9dd; }
.dx-btn-venta{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:#94A3B8;
    color:var(--tinta);
    font-weight:700;
    font-size:1rem;
    padding:13px 22px;
    border-radius:12px;
    text-decoration:none;
    transition:transform .12s ease, box-shadow .2s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.dx-btn-venta:hover{ transform:translateY(-2px); color:var(--tinta); box-shadow:0 10px 24px rgba(0,0,0,.3); }
.dx-hero-der{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.dx-filtro{ display:flex; align-items:center; gap:8px; }
.dx-filtro label{
    font-family:var(--f-mono);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#9A9AAB;
    margin:0;
}
.dx-filtro select{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-family:var(--f-ui);
    font-size:.85rem;
    font-weight:600;
    border-radius:10px;
    padding:7px 30px 7px 12px;
    cursor:pointer;
    appearance:none;
    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='%23C9B896' 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 10px center;
    background-size:13px 10px;
}
.dx-filtro select option{ background:#16161C; color:#ECECF2; }
.dx-alerta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    background:var(--ambar-suave);
    border:1px solid #39424F;
    border-radius:12px;
    padding:11px 16px;
    margin-bottom:14px;
    font-size:.87rem;
    color:#D7DDE7;
}
.dx-alerta i.bi-exclamation-triangle-fill{ color:var(--ambar); }
.dx-alerta a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#1E1E27;
    border:1px solid #39424F;
    color:#D7DDE7;
    font-weight:600;
    font-size:.8rem;
    padding:4px 11px;
    border-radius:999px;
    text-decoration:none;
    transition:border-color .15s, box-shadow .15s;
}
.dx-alerta a:hover{ border-color:var(--ambar); box-shadow:0 2px 8px rgba(100, 116, 139,.15); }
.dx-strip{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    background:var(--papel);
    border:1px solid var(--hairline);
    border-radius:14px;
    margin-bottom:16px;
    overflow:hidden;
}
.dx-cell{
    padding:16px 18px 14px;
    border-left:1px solid var(--hairline);
    min-width:0;
    container-type:inline-size;
    transition:background-color .15s ease-out;
}
.dx-cell:first-child{ border-left:none; }
.dx-cell:hover{ background:rgba(255,255,255,.03); }
.dx-cell .dx-tag{ display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; }
.dx-cell .dx-tag i{ font-size:.85rem; color:var(--verde); }
.dx-cell-num{
    font-size:clamp(1.05rem, 11cqi, 1.45rem);
    font-weight:800;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    color:var(--texto);
    margin-top:7px;
    line-height:1.15;
}
.dx-cell-num.neg{ color:var(--rojo); }
.dx-cell-sub{
    font-size:.75rem;
    color:var(--texto-2);
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media (max-width: 1199.98px){
    .dx-strip{ grid-template-columns:repeat(3, 1fr); }
    .dx-cell:nth-child(4){ border-left:none; }
    .dx-cell:nth-child(n+4){ border-top:1px solid var(--hairline); }
}
@media (max-width: 575.98px){
    .dx-strip{ grid-template-columns:repeat(2, 1fr); }
    .dx-cell{ border-left:none; }
    .dx-cell:nth-child(even){ border-left:1px solid var(--hairline); }
    .dx-cell:nth-child(n+3){ border-top:1px solid var(--hairline); }
}
.dx-panel{
    background:var(--papel);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:20px 22px;
}
.dx-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    margin-bottom:4px;
}
.dx-panel-head h6{ font-weight:800; font-size:.95rem; letter-spacing:-.01em; color:var(--texto); margin:0; }
.dx-panel-head a{ font-size:.78rem; font-weight:600; color:var(--verde); text-decoration:none; white-space:nowrap; }
.dx-panel-head a:hover{ text-decoration:underline; }
.dx-chart{
    position:relative;
    display:flex;
    align-items:flex-end;
    gap:12px;
    height:168px;
    margin-top:22px;
    padding-bottom:24px;
}
.dx-prom{ position:absolute; left:0; right:0; border-top:1.5px dashed #39424F; z-index:1; }
.dx-prom span{
    position:absolute;
    right:0;
    top:-19px;
    font-family:var(--f-mono);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.05em;
    color:#9A9AAB;
    background:var(--papel);
    padding:1px 4px;
}
.dx-col{
    position:relative;
    flex:1;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    gap:7px;
    z-index:2;
    min-width:0;
}
.dx-col-val{
    font-family:var(--f-mono);
    font-size:.64rem;
    font-weight:600;
    color:#9A9AAB;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.dx-col:hover .dx-col-val{ color:#ECECF2; }
.dx-col.hoy .dx-col-val{ color:var(--verde); font-weight:700; }
.dx-bar{
    width:100%;
    max-width:44px;
    min-height:3px;
    border-radius:7px 7px 3px 3px;
    background:#94A3B8;
    transform-origin:bottom;
    transition:background .15s;
}
.dx-col:hover .dx-bar{ background:#D7DDE7; }
.dx-col.hoy .dx-bar{ background:linear-gradient(180deg, #94A3B8, var(--verde)); }
.dx-col-dia{
    position:absolute;
    bottom:-24px;
    font-family:var(--f-mono);
    font-size:.66rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--texto-2);
}
.dx-col.hoy .dx-col-dia{ color:var(--verde); font-weight:700; }
.dx-venta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 2px;
    border-bottom:1px solid #2A2A33;
    text-decoration:none;
    transition:background .12s;
}
.dx-venta:last-child{ border-bottom:none; }
.dx-venta:hover{ background:rgba(255,255,255,.045); }
.dx-venta-id{ font-family:var(--f-mono); font-size:.8rem; font-weight:700; color:var(--texto); }
.dx-venta-meta{ font-size:.75rem; color:var(--texto-2); margin-top:1px; }
.dx-venta-metodo{
    font-family:var(--f-mono);
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.08em;
    color:var(--texto-2);
    border:1px solid var(--hairline);
    border-radius:5px;
    padding:2px 6px;
    margin-left:6px;
    vertical-align:1px;
}
.dx-venta-total{ font-weight:700; font-variant-numeric:tabular-nums; color:#34D399; white-space:nowrap; }
.dx-qa{
    display:flex;
    align-items:center;
    gap:13px;
    background:var(--papel);
    border:1px solid var(--hairline);
    border-radius:13px;
    padding:14px 16px;
    text-decoration:none;
    height:100%;
    transition:transform .13s ease, box-shadow .18s ease, border-color .15s;
}
.dx-qa:hover{ transform:translateY(-2px); border-color:#D7DDE7; box-shadow:0 8px 20px rgba(35,26,16,.08); }
.dx-qa-ico{
    width:42px; height:42px;
    flex:0 0 auto;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    background:var(--verde-suave);
    color:var(--verde);
    transition:background .15s, color .15s;
}
.dx-qa:hover .dx-qa-ico{ background:var(--verde); color:#fff; }
.dx-qa-txt{ min-width:0; }
.dx-qa-txt strong{ display:block; color:var(--texto); font-weight:700; font-size:.92rem; line-height:1.15; }
.dx-qa-txt span{
    font-size:.76rem;
    color:var(--texto-2);
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dx-qa .bi-chevron-right{ margin-left:auto; color:#6B6B7B; font-size:.8rem; }
@keyframes dxUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes dxGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes dxFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dxPop{
    0%   { opacity:0; transform:scale(.85); }
    60%  { transform:scale(1.06); }
    100% { opacity:1; transform:none; }
}
.dx-hero{ animation:dxUp .4s ease-out both; }
.dx-alerta{ animation:dxUp .4s ease-out .06s both; }
.dx-strip{ animation:dxUp .4s ease-out .12s both; }
.dx-row-media > div{ animation:dxUp .4s ease-out .18s both; }
.dx-qa-zone{ animation:dxUp .4s ease-out .24s both; }
.dx-bar{ animation:dxGrow .5s cubic-bezier(.2,.7,.3,1) both; }
.dx-col:nth-child(2) .dx-bar{ animation-delay:300ms; }
.dx-col:nth-child(2) .dx-col-val{ animation-delay:580ms; }
.dx-col:nth-child(3) .dx-bar{ animation-delay:355ms; }
.dx-col:nth-child(3) .dx-col-val{ animation-delay:635ms; }
.dx-col:nth-child(4) .dx-bar{ animation-delay:410ms; }
.dx-col:nth-child(4) .dx-col-val{ animation-delay:690ms; }
.dx-col:nth-child(5) .dx-bar{ animation-delay:465ms; }
.dx-col:nth-child(5) .dx-col-val{ animation-delay:745ms; }
.dx-col:nth-child(6) .dx-bar{ animation-delay:520ms; }
.dx-col:nth-child(6) .dx-col-val{ animation-delay:800ms; }
.dx-col:nth-child(7) .dx-bar{ animation-delay:575ms; }
.dx-col:nth-child(7) .dx-col-val{ animation-delay:855ms; }
.dx-col:nth-child(8) .dx-bar{ animation-delay:630ms; }
.dx-col:nth-child(8) .dx-col-val{ animation-delay:910ms; }

.dx-col-val{ animation:dxFade .25s ease-out both; }
.dx-prom{ animation:dxFade .35s ease-out .95s both; }
.dx-delta{ animation:dxPop .3s ease-out .75s both; }
.dx-venta{ animation:dxUp .3s ease-out both; }
.dx-venta:nth-child(1){ animation-delay:340ms; }
.dx-venta:nth-child(2){ animation-delay:385ms; }
.dx-venta:nth-child(3){ animation-delay:430ms; }
.dx-venta:nth-child(4){ animation-delay:475ms; }
.dx-venta:nth-child(5){ animation-delay:520ms; }
.dx-venta:nth-child(6){ animation-delay:565ms; }
.dx-venta:nth-child(7){ animation-delay:610ms; }
.dx-venta:nth-child(8){ animation-delay:655ms; }

.dx-venta:nth-child(n+9){ animation-delay:700ms; }
@media (prefers-reduced-motion: reduce){
    .dx-hero, .dx-alerta, .dx-strip, .dx-row-media > div, .dx-qa-zone, .dx-bar{ animation:none; }
    .dx-col-val, .dx-prom, .dx-delta, .dx-venta{ animation:none; }
    .dx-btn-venta, .dx-qa, .dx-cell{ transition:none; }
}

/* Gráfica interactiva (Chart.js) */
.dx-chart-js{ position:relative; height:200px; margin-top:16px; }

/* Componentes de páginas de módulo */
.dx-tabla{ width:100%; border-collapse:collapse; font-size:.85rem; }
.dx-tabla th{ font-family:var(--f-mono); font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-2); text-align:left; padding:8px 10px; border-bottom:1px solid var(--hairline); }
.dx-tabla td{ padding:9px 10px; border-bottom:1px solid #222229; color:var(--texto); }
.dx-tabla tr:last-child td{ border-bottom:none; }
.dx-tabla td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.dx-btn{ display:inline-flex; align-items:center; gap:8px; background:#26262F; border:1px solid var(--hairline); color:#ECECF2; font-weight:600; font-size:.85rem; padding:9px 16px; border-radius:10px; text-decoration:none; cursor:pointer; transition:border-color .15s; }
.dx-btn:hover{ border-color:#94A3B8; color:#fff; }
.dx-btn.exportar{ color:#6EE7B7; border-color:#1f3b31; }
.dx-filtros{ display:flex; flex-wrap:wrap; align-items:end; gap:10px; background:var(--papel); border:1px solid var(--hairline); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.dx-filtros label{ display:block; font-family:var(--f-mono); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-2); margin-bottom:4px; }
.dx-filtros input[type=date]{ background:#0F0F14; border:1px solid var(--hairline); color:#ECECF2; border-radius:9px; padding:8px 12px; font-size:.9rem; color-scheme:dark; }
.dx-seccion{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 10px; flex-wrap:wrap; }
.dx-seccion h5{ font-weight:800; font-size:1rem; color:var(--texto); margin:0; display:flex; align-items:center; gap:8px; }
.dx-seccion .acciones{ display:flex; gap:8px; flex-wrap:wrap; }
/* ====================================================================
   Utilidades mini-grid SCOPED a .dx — para renderizar el contenido dx
   dentro del panel Filament sin cargar Bootstrap (que reestilizaria la
   UI de Filament). Solo aplican dentro de .dx, no tocan el resto.
   ==================================================================== */
.dx.container-fluid, .dx .container-fluid{ width:100%; padding:0; }
.dx .row{ display:flex; flex-wrap:wrap; margin:0 -8px; }
.dx .row.g-3{ gap:16px 0; }
.dx .row > [class*="col-"]{ padding:0 8px; box-sizing:border-box; }
.dx .col-lg-7{ flex:0 0 100%; max-width:100%; }
.dx .col-lg-5{ flex:0 0 100%; max-width:100%; }
.dx .col-6{ flex:0 0 50%; max-width:50%; }
@media (min-width:768px){
    .dx .col-md-4{ flex:0 0 33.333%; max-width:33.333%; }
}
@media (min-width:992px){
    .dx .col-lg-7{ flex:0 0 58.333%; max-width:58.333%; }
    .dx .col-lg-5{ flex:0 0 41.666%; max-width:41.666%; }
}
@media (min-width:1200px){
    .dx .col-xl-3{ flex:0 0 25%; max-width:25%; }
}
.dx .d-flex{ display:flex; }
.dx .d-block{ display:block; }
.dx .flex-wrap{ flex-wrap:wrap; }
.dx .align-items-center{ align-items:center; }
.dx .align-items-end{ align-items:flex-end; }
.dx .align-items-baseline{ align-items:baseline; }
.dx .justify-content-between{ justify-content:space-between; }
.dx .justify-content-center{ justify-content:center; }
.dx .position-relative{ position:relative; }
.dx .text-center{ text-align:center; }
.dx .h-100{ height:100%; }
.dx .w-100{ width:100%; }
.dx .gap-2{ gap:8px; }
.dx .gap-3{ gap:16px; }
.dx .mb-2{ margin-bottom:8px; }
.dx .mb-3{ margin-bottom:16px; }
.dx .mt-2{ margin-top:8px; }
.dx .py-4{ padding-top:24px; padding-bottom:24px; }