/* =====================================================================
   DARTEL THEME — capa de diseño sobre WowDash (se carga DESPUÉS de style.min.css)
   Marca: magenta Dartel (#8D0E58) + acento naranja (#F26522).
   Todo usa variables, así funciona en modo claro y oscuro.
   ===================================================================== */

:root {
    --primary-50: #FDF1F8;
    --primary-100: #FADFEF;
    --primary-200: #F4BCDD;
    --primary-300: #EA8DC3;
    --primary-400: #DC57A3;
    --primary-500: #C42D85;
    --primary-600: #A8186F;
    --primary-700: #8D0E58;
    --primary-800: #6F0B46;
    --primary-900: #520835;

    --dt-brand: #8D0E58;
    --dt-brand-2: #C42D85;
    --dt-accent: #F26522;
    --dt-grad: linear-gradient(135deg, #6F0B46 0%, #A8186F 55%, #D6428F 100%);
    --dt-grad-soft: linear-gradient(135deg, #FDF1F8 0%, #FFF4EC 100%);
    --dt-surface: #FFFFFF;
    --dt-page: #F6F2F6;
    --dt-line: #ECE5EB;
    --dt-ring: rgba(168, 24, 111, .22);
    --dt-shadow: 0 1px 2px rgba(60, 20, 50, .05), 0 8px 24px rgba(60, 20, 50, .06);
    --dt-shadow-hover: 0 2px 4px rgba(60, 20, 50, .06), 0 16px 36px rgba(141, 14, 88, .16);
    --dt-ok: #12A150;
    --dt-warn: #E89A0C;
    --dt-bad: #DC3545;
    --dt-info: #0E8FD6;
    --dt-radius: 14px;
}

[data-theme="dark"] {
    --primary-50: rgba(214, 66, 143, .10);
    --primary-100: rgba(214, 66, 143, .18);
    --dt-surface: #1E2733;
    --dt-page: #121820;
    --dt-line: #2C3745;
    --dt-grad-soft: linear-gradient(135deg, rgba(168, 24, 111, .18) 0%, rgba(242, 101, 34, .10) 100%);
    --dt-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

/* ---------- Base ---------- */
html { scroll-behavior: auto; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--dt-page) !important;
    -webkit-font-smoothing: antialiased;
}
.dashboard-main { background: transparent; }
::selection { background: var(--primary-200); color: var(--primary-900); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

/* scrollbars finos */
* { scrollbar-width: thin; scrollbar-color: var(--primary-200) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--primary-200); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Barra superior y menú lateral ---------- */
.navbar-header {
    background: var(--dt-surface) !important;   /* sin backdrop-filter: parpadea con los combos nativos abiertos */
    border-bottom: 1px solid var(--dt-line);
    box-shadow: 0 4px 18px rgba(60, 20, 50, .05);
    position: sticky; top: 0; z-index: 20;
}
.sidebar {
    background: var(--dt-surface) !important;
    border-right: 1px solid var(--dt-line);
    box-shadow: 6px 0 28px rgba(60, 20, 50, .05);
}
.sidebar-logo, .sidebar-menu-area { border-inline-end: 0 !important; }
.sidebar-logo { border-block-end: 1px solid var(--dt-line) !important; }
.sidebar-menu-group-title {
    font-size: .68rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary-400) !important; padding: 1rem .75rem .35rem !important;
}
.sidebar-menu > li > a, .sidebar-menu li a {
    border-radius: 12px !important; font-weight: 500; transition: all .18s ease;
}
.sidebar-menu > li > a:hover { background: var(--primary-50) !important; color: var(--primary-700) !important; }
.sidebar-menu > li > a.active-page, .sidebar-menu li > a.active-page {
    background: var(--dt-grad) !important; color: #fff !important; font-weight: 600;
    box-shadow: 0 8px 18px rgba(141, 14, 88, .30);
}
.sidebar-menu li > a.active-page .menu-icon, .sidebar-menu li > a.active-page span { color: #fff !important; }
.sidebar-menu li > a .menu-icon { font-size: 1.25rem; }

/* ---------- Encabezado de página (se agrega por JS: .dartel-page-head) ---------- */
.dartel-page-head {
    background: var(--dt-grad); color: #fff;
    border-radius: var(--dt-radius); padding: 1.25rem 1.5rem !important;
    box-shadow: 0 14px 34px rgba(141, 14, 88, .28);
    position: relative; overflow: hidden;
}
.dartel-page-head::after {
    content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 68%); pointer-events: none;
}
.dartel-page-head::before {
    content: ''; position: absolute; right: 120px; bottom: -80px; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, .35), transparent 70%); pointer-events: none;
}
.dartel-page-head h1, .dartel-page-head h2, .dartel-page-head h3, .dartel-page-head h4, .dartel-page-head h5, .dartel-page-head h6 {
    color: #fff !important; font-weight: 700 !important; font-size: 1.35rem; position: relative; z-index: 1;
}
.dartel-page-head p, .dartel-page-head div, .dartel-page-head span, .dartel-page-head .text-secondary-light {
    color: rgba(255, 255, 255, .86) !important; position: relative; z-index: 1;
}
.dartel-page-head .btn { position: relative; z-index: 1; }
.dartel-page-head .btn-primary-600, .dartel-page-head .btn-primary {
    background: #fff !important; color: var(--primary-700) !important; border-color: #fff !important; box-shadow: none;
}
.dartel-page-head .btn-outline-secondary, .dartel-page-head .btn-outline-primary-600 {
    color: #fff !important; border-color: rgba(255, 255, 255, .6) !important; background: rgba(255, 255, 255, .08) !important;
}

/* ---------- Tarjetas ---------- */
.card {
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-line) !important;
    border-radius: var(--dt-radius) !important;
    box-shadow: var(--dt-shadow) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: visible;
}
.card .card-header { background: transparent; border-bottom: 1px solid var(--dt-line); font-weight: 600; padding: 1rem 1.25rem; }
a.card:hover, .card.rg-kpi:hover, .card.wms-kpi:hover, .card.hover-shadow:hover, .card.card-hover:hover {
    box-shadow: var(--dt-shadow-hover) !important; border-color: var(--primary-200) !important;
}
.hover-shadow { transition: transform .18s ease, box-shadow .18s ease; }

/* KPIs: banda de color superior + cifra grande */
.card.rg-kpi, .card.wms-kpi, .card.kpi {
    position: relative; overflow: hidden; border-top: 0 !important;
}
.card.rg-kpi::before, .card.wms-kpi::before, .card.kpi::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--kpi, var(--dt-grad));
}
.row > :nth-child(1) > .card.rg-kpi, .row > :nth-child(1) > .card.wms-kpi { --kpi: linear-gradient(90deg, #A8186F, #D6428F); }
.row > :nth-child(2) > .card.rg-kpi, .row > :nth-child(2) > .card.wms-kpi { --kpi: linear-gradient(90deg, #0E8FD6, #4CC3F5); }
.row > :nth-child(3) > .card.rg-kpi, .row > :nth-child(3) > .card.wms-kpi { --kpi: linear-gradient(90deg, #E89A0C, #F7C85A); }
.row > :nth-child(4) > .card.rg-kpi, .row > :nth-child(4) > .card.wms-kpi { --kpi: linear-gradient(90deg, #12A150, #4CD08A); }
.row > :nth-child(5) > .card.wms-kpi { --kpi: linear-gradient(90deg, #F26522, #FF9A5C); }
.row > :nth-child(6) > .card.wms-kpi { --kpi: linear-gradient(90deg, #6F42C1, #A37BE8); }
.card.rg-kpi .fw-bold, .card.wms-kpi .fw-bold { font-size: 1.9rem; line-height: 1.1; color: var(--text-primary-light); }
.card.wms-kpi.activo { outline: 0 !important; border-color: var(--dt-brand) !important; box-shadow: 0 0 0 3px var(--dt-ring), var(--dt-shadow-hover) !important; }

/* Tarjetas del dashboard con degradado suave */
.card.bg-gradient-start-1, .card.bg-gradient-start-2, .card.bg-gradient-start-3, .card.bg-gradient-start-4, .card.bg-gradient-start-5 {
    border-width: 1px !important;
}
.card .w-50-px.rounded-circle { box-shadow: 0 8px 18px rgba(0, 0, 0, .14); transition: transform .2s; }
a:hover > .card .w-50-px.rounded-circle { transform: scale(1.1) rotate(-6deg); }

/* ---------- Pestañas / pills de módulo ---------- */
.nav-pills { background: var(--dt-surface); border: 1px solid var(--dt-line); border-radius: 16px; padding: .4rem; box-shadow: var(--dt-shadow); display: inline-flex; flex-wrap: wrap; }
.nav-pills .nav-link {
    border-radius: 12px; font-weight: 600; color: var(--text-secondary-light); padding: .6rem 1.05rem;
    display: inline-flex; align-items: center; gap: .45rem; transition: all .18s ease; border: 0; background: transparent;
}
.nav-pills .nav-link:hover { background: var(--primary-50); color: var(--primary-700); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: var(--dt-grad) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(141, 14, 88, .30);
}
.nav-tabs { border-bottom: 2px solid var(--dt-line); }
.nav-tabs .nav-link { font-weight: 600; color: var(--text-secondary-light); border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.nav-tabs .nav-link.active { color: var(--dt-brand); border-bottom-color: var(--dt-brand); background: transparent; }

/* ---------- Botones ---------- */
.btn { border-radius: 10px; font-weight: 600; transition: transform .12s ease, box-shadow .18s ease, background .18s ease; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary-600, .btn-primary {
    background: var(--dt-grad) !important; border: 0 !important; color: #fff !important;
    box-shadow: 0 6px 14px rgba(141, 14, 88, .28);
}
.btn-primary-600:hover, .btn-primary:hover { filter: brightness(1.07); box-shadow: 0 10px 22px rgba(141, 14, 88, .36); color: #fff !important; }
.btn-success-600, .btn-success { background: linear-gradient(135deg, #0E8A44, #25C06D) !important; border: 0 !important; color: #fff !important; box-shadow: 0 6px 14px rgba(18, 161, 80, .28); }
.btn-danger, .btn-danger-600 { background: linear-gradient(135deg, #C62A3A, #F0566A) !important; border: 0 !important; color: #fff !important; }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-primary-600 {
    border: 1.5px solid var(--primary-300) !important; color: var(--primary-700) !important; background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-primary-600:hover {
    background: var(--primary-50) !important; border-color: var(--primary-600) !important; color: var(--primary-800) !important;
}
.btn-outline-success, .btn-outline-success-600 { border: 1.5px solid #8AD9AE !important; color: #0E7A3E !important; }
.btn-outline-success:hover, .btn-outline-success-600:hover { background: #E6F8EE !important; color: #0A5E2F !important; }
.btn-outline-danger, .btn-outline-danger-600 { border: 1.5px solid #F2A3AC !important; color: #B4232F !important; }
.btn-outline-danger:hover, .btn-outline-danger-600:hover { background: #FDECEE !important; color: #8E1620 !important; }
.btn-sm { border-radius: 9px; padding: .35rem .7rem; font-size: .8rem; }
.btn:disabled, .btn.disabled { opacity: .55; box-shadow: none; transform: none; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--dt-ring) !important; }

/* ---------- Formularios ---------- */
.form-label { font-weight: 600; font-size: .8rem; letter-spacing: .01em; color: var(--text-primary-light); margin-bottom: .35rem; }
.form-control, .form-select {
    background-color: var(--dt-surface); border: 1.5px solid #E1D8E0; border-radius: 10px;
    color: var(--text-primary-light); transition: border-color .15s, box-shadow .15s, background .15s;
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { border-color: #3A4757; }
.form-control:hover, .form-select:hover { border-color: var(--primary-300); }
.form-control:focus, .form-select:focus {
    border-color: var(--primary-600) !important; box-shadow: 0 0 0 4px var(--dt-ring) !important; background-color: var(--dt-surface);
}
.form-control::placeholder { color: #A99FA8 !important; font-size: .92rem !important; font-weight: 400; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: color-mix(in srgb, var(--dt-line) 55%, transparent); color: var(--text-secondary-light); cursor: not-allowed; }
.form-check-input { width: 1.1em; height: 1.1em; border: 1.5px solid #C9BDC8; }
.form-check-input:checked { background-color: var(--dt-brand); border-color: var(--dt-brand); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--dt-ring); border-color: var(--primary-600); }
textarea.form-control { min-height: 5.5rem; }

/* Asterisco automático en campos obligatorios */
.form-label:has(+ [required])::after, .form-label:has(+ .input-group [required])::after,
.form-label.req::after { content: ' *'; color: var(--dt-bad); font-weight: 700; }

/* Validación */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--dt-bad) !important; background-color: color-mix(in srgb, var(--dt-bad) 5%, var(--dt-surface));
    background-image: none; padding-right: .75rem;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 53, 69, .18) !important; }
.form-control.is-valid, .form-select.is-valid { border-color: var(--dt-ok) !important; background-image: none; }
.invalid-feedback, .dt-field-error {
    display: block; width: 100%; margin-top: .3rem; font-size: .76rem; font-weight: 600; color: var(--dt-bad);
    animation: dt-shake .28s ease;
}
.dt-field-error::before { content: '\26A0\FE0E '; }
@keyframes dt-shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }

/* ---------- Tablas ---------- */
.table-responsive { border-radius: 12px; border: 1px solid var(--dt-line); background: var(--dt-surface); }
.table { --bs-table-bg: transparent; margin-bottom: 0; color: var(--text-primary-light); }
.table > :not(caption) > * > * { border-color: var(--dt-line); vertical-align: middle; padding: .7rem .9rem; }
.table thead th, .table.bordered-table thead th, .table.sm-table thead th {
    background: var(--dt-grad-soft) !important;
    color: var(--primary-800) !important; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 2px solid var(--primary-200) !important; white-space: nowrap;
}
[data-theme="dark"] .table thead th { color: var(--primary-300) !important; }
.table tbody tr { transition: background .12s ease, box-shadow .12s ease; }
.table tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--primary-50) 38%, transparent); }
.table tbody tr:hover > * { background: var(--primary-50) !important; }
.table tbody tr[data-abrir], .table tbody tr[data-i] { cursor: pointer; }
.table tbody tr:hover { box-shadow: inset 3px 0 0 var(--dt-brand); }
.table td[colspan] { padding: 2rem 1rem !important; text-align: center; color: var(--text-secondary-light); font-style: italic; }
.table td[colspan].text-danger { font-style: normal; font-weight: 600; background: color-mix(in srgb, var(--dt-bad) 6%, transparent) !important; }
.table td .btn-sm { white-space: nowrap; }
.table.bordered-table { border-radius: 12px; overflow: hidden; }

/* ---------- DataTables ---------- */
div.dt-container.basic-data-table { padding: 0; }
div.dt-container.basic-data-table .dt-layout-row { padding: .75rem 1rem; gap: .75rem; align-items: center; flex-wrap: wrap; }
div.dt-container.basic-data-table .dt-layout-row:has(.dt-search) { background: var(--dt-grad-soft); border-bottom: 1px solid var(--dt-line); border-radius: 12px 12px 0 0; }
div.dt-container.basic-data-table .dt-layout-row:has(.dt-paging) { border-top: 1px solid var(--dt-line); background: color-mix(in srgb, var(--primary-50) 40%, var(--dt-surface)); border-radius: 0 0 12px 12px; }
div.dt-container.basic-data-table .dt-search { display: flex; align-items: center; }
div.dt-container.basic-data-table .dt-search input {
    width: min(320px, 70vw); height: 2.5rem; padding: 0 1rem 0 2.5rem !important; border-radius: 999px !important;
    border: 1.5px solid var(--primary-200) !important; background: var(--dt-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A8186F' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center !important;
    margin: 0 !important; font-size: .9rem; text-align: left !important; box-shadow: 0 2px 8px rgba(141, 14, 88, .06);
}
div.dt-container.basic-data-table .dt-search input:focus { border-color: var(--primary-600) !important; box-shadow: 0 0 0 4px var(--dt-ring) !important; outline: 0; }
div.dt-container.basic-data-table .dt-info { font-size: .8rem; font-weight: 600; color: var(--text-secondary-light); }
div.dt-container.basic-data-table .dt-paging { display: flex; gap: .3rem; align-items: center; }
div.dt-container.basic-data-table .dt-paging .dt-paging-button {
    min-width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .5rem !important;
    border: 1.5px solid var(--primary-100) !important; border-radius: 999px !important; background: var(--dt-surface) !important;
    color: var(--primary-700) !important; font-weight: 700; font-size: .85rem; transition: all .15s ease; margin: 0 !important;
}
div.dt-container.basic-data-table .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
    background: var(--primary-50) !important; border-color: var(--primary-400) !important;
}
div.dt-container.basic-data-table .dt-paging .dt-paging-button.current, div.dt-container.basic-data-table .dt-paging .dt-paging-button.current:hover {
    background: var(--dt-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 14px rgba(141, 14, 88, .32);
}
div.dt-container.basic-data-table .dt-paging .dt-paging-button.disabled { opacity: .4; cursor: not-allowed; }
div.dt-container.basic-data-table table.dataTable thead th { cursor: pointer; }
div.dt-container.basic-data-table table.dataTable thead th.dt-orderable-none { cursor: default; }
div.dt-container.basic-data-table table.dataTable thead th .dt-column-order { color: var(--primary-500); }
div.dt-container.basic-data-table table.dataTable thead th.dt-ordering-asc, div.dt-container.basic-data-table table.dataTable thead th.dt-ordering-desc { background: var(--primary-100) !important; }
div.dt-container.basic-data-table table.dataTable { margin: 0 !important; width: 100% !important; }
div.dt-container.basic-data-table .dt-scroll-body, div.dt-container.basic-data-table > .dt-layout-row > .dt-layout-cell { width: 100%; }

/* ---------- Badges, progreso, spinner ---------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.rg-badge, .pro-badge, .wms-badge { display: inline-flex; align-items: center; gap: .3rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.rg-badge::before, .pro-badge::before, .wms-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pro-progress, .wms-progress { height: 9px !important; border-radius: 99px !important; background: var(--dt-line) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); }
.pro-progress > div, .wms-progress > div { background: linear-gradient(90deg, #12A150, #4CD08A) !important; border-radius: 99px; transition: width .6s ease; }
.spinner-border { color: var(--dt-brand); }
.progress { height: 9px; border-radius: 99px; background: var(--dt-line); }
.progress-bar { background: var(--dt-grad); }

/* ---------- Modales ---------- */
.modal-backdrop.show { opacity: .55; }
.modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(40, 10, 30, .35); background: var(--dt-surface); }
.modal-header { background: var(--dt-grad); color: #fff; border: 0; padding: 1rem 1.4rem; }
.modal-header .modal-title, .modal-header h5, .modal-header h6 { color: #fff !important; font-weight: 700; }
.modal-header .btn-close { filter: brightness(0) invert(1); opacity: .85; }
.modal-body { padding: 1.4rem; }
.modal-footer { background: color-mix(in srgb, var(--primary-50) 55%, var(--dt-surface)); border-top: 1px solid var(--dt-line); gap: .5rem; }
.modal.fade .modal-dialog { transform: translateY(24px) scale(.98); transition: transform .25s ease, opacity .2s; }
.modal.show .modal-dialog { transform: none; }

/* ---------- Alertas / SweetAlert ---------- */
.alert { border: 0; border-radius: 12px; font-weight: 500; border-left: 5px solid currentColor; }
.alert-warning { background: #FFF6E0; color: #8A5A00; }
.alert-danger { background: #FDECEE; color: #A11B28; }
.alert-info { background: #E6F4FD; color: #0B6AA0; }
.alert-success { background: #E6F8EE; color: #0B6B36; }
.swal2-popup { font-family: 'Inter', sans-serif !important; }
.swal2-popup:not(.swal2-toast) { border-radius: 20px !important; padding: 1.6rem !important; }
.swal2-toast { padding: .7rem 1rem !important; width: auto !important; max-width: 92vw; }
.swal2-toast .swal2-title { font-size: .92rem !important; font-weight: 600 !important; margin: 0 .6rem !important; text-align: left; }
.swal2-title { font-weight: 800 !important; letter-spacing: -.01em; }
.swal2-styled.swal2-confirm { background: var(--dt-grad) !important; border-radius: 10px !important; font-weight: 700 !important; box-shadow: 0 8px 18px rgba(141, 14, 88, .3) !important; }
.swal2-styled.swal2-cancel { border-radius: 10px !important; font-weight: 700 !important; }
.swal2-styled:focus { box-shadow: 0 0 0 4px var(--dt-ring) !important; }
.swal2-toast { border-radius: 14px !important; box-shadow: var(--dt-shadow-hover) !important; }

/* ---------- Estados vacíos / carga ---------- */
.dt-loading { position: relative; pointer-events: none; }
.dt-loading::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--primary-100) 70%, transparent) 50%, transparent 80%);
    background-size: 200% 100%; animation: dt-shimmer 1.2s infinite;
}
@keyframes dt-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* Aparición suave de secciones */
section[data-seccion]:not(.d-none), .dashboard-main-body > .row > .col, .dashboard-main-body > .card { animation: dt-rise .35s ease backwards; }
@keyframes dt-rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Dropzone / timeline ---------- */
.rg-drop { border: 2px dashed var(--primary-300) !important; background: var(--dt-grad-soft); border-radius: 16px; transition: all .18s; }
.rg-drop:hover, .rg-drop.dragover { border-color: var(--dt-brand) !important; background: var(--primary-50); }
.rg-timeline li, .wms-timeline li { border-left: 2px solid var(--primary-200) !important; }
.rg-timeline li::before, .wms-timeline li::before { background: var(--dt-brand) !important; box-shadow: 0 0 0 4px var(--dt-ring); }

/* tamaños de texto que faltaban en la plantilla */
.text-3xl { font-size: 1.875rem !important; }
.text-4xl { font-size: 2.25rem !important; }
.bg-primary-focus { background-color: var(--primary-100) !important; }

/* ---------- Footer ---------- */
.d-footer { background: transparent !important; border-top: 1px solid var(--dt-line); }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    .dartel-page-head { padding: 1rem !important; }
    .nav-pills { display: flex; overflow-x: auto; flex-wrap: nowrap; }
    .nav-pills .nav-link { white-space: nowrap; }
    div.dt-container.basic-data-table .dt-layout-row { justify-content: center; }
    div.dt-container.basic-data-table .dt-search input { width: 100%; }
}


/* ---------- Ancho estable del contenido (aunque haya pocos elementos) ---------- */
.dashboard-main { display: flex; flex-direction: column; min-height: 100vh; }
.dashboard-main > .navbar-header, .dashboard-main > .d-footer { width: 100%; }
.dashboard-main-body { width: 100%; flex: 1 1 auto; box-sizing: border-box; }
.dashboard-main-body > * { max-width: 100%; }

/* Cuadrícula de módulos del panel: se adapta a 1, 2, 3... tarjetas sin dejar huecos raros */
.dt-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.dt-card-grid > .col { width: auto; max-width: none; padding: 0; margin: 0; flex: none; }
.dt-card-grid > .col > a, .dt-card-grid > .col > a > .card { height: 100%; }
.dt-card-grid .card-body p, .dt-card-grid .card-body h6 { word-break: normal; overflow-wrap: anywhere; }
@media (min-width: 1600px) { .dt-card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }


/* ---------- Todo se ajusta al ancho disponible, siempre ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.dashboard-main { max-width: none !important; min-width: 0; }
.dashboard-main-body { width: 100%; max-width: none !important; min-width: 0; margin-inline: 0; }
.dashboard-main-body > *, .dashboard-main-body [id$="-app"], .dashboard-main-body section,
.dashboard-main-body .card, .dashboard-main-body .card-body, .dashboard-main-body .row, .dashboard-main-body form { width: 100%; max-width: 100%; min-width: 0; }
.dashboard-main-body .row { margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); width: auto; }
.dashboard-main-body .row > * { min-width: 0; }
.dartel-page-head { width: 100%; }
/* Pestañas: ocupan todo el ancho y se reparten parejo */
.nav-pills { display: flex !important; width: 100%; flex-wrap: wrap; }
.nav-pills .nav-item { flex: 1 1 auto; }
.nav-pills .nav-link { width: 100%; justify-content: center; }
.nav-tabs { width: 100%; }
/* Tablas y DataTables al 100% del contenedor */
.table-responsive, div.dt-container, div.dt-container.basic-data-table { width: 100%; max-width: 100%; }
table.dataTable, .table { width: 100% !important; }
/* Barras de filtros: los campos crecen para llenar la fila */
.card-body > .d-flex.flex-wrap.align-items-end > div:not(.ms-auto) { flex: 1 1 200px; min-width: 0; }
.card-body > .d-flex.flex-wrap.align-items-end > div:not(.ms-auto) .form-control,
.card-body > .d-flex.flex-wrap.align-items-end > div:not(.ms-auto) .form-select { width: 100%; }
.dt-card-grid { width: 100%; }
/* Modales grandes usan todo el ancho en pantallas chicas */
@media (max-width: 767.98px) { .modal-dialog { margin: .5rem; max-width: none; } }

/* ---------- Submenú del menú lateral (Ventas: Cotizaciones / Órdenes de venta) ---------- */
.sidebar-menu li.dropdown > a { justify-content: flex-start; }
.sidebar-menu li.dropdown.dropdown-open > a, .sidebar-menu li.dropdown.open > a { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.sidebar-menu li.dropdown > a.active-page { background: var(--dt-grad) !important; color: #fff !important; }
.sidebar-menu .sidebar-submenu { padding-inline-start: 1.1rem !important; padding-block: .35rem .1rem; list-style: none; margin: 0; }
.sidebar-menu .sidebar-submenu li a { border-radius: 10px !important; padding: .5rem .75rem !important; display: flex; align-items: center; gap: .5rem; font-size: .9rem; position: relative; }
.sidebar-menu .sidebar-submenu li a .menu-icon { font-size: 1.05rem; }
.sidebar-menu .sidebar-submenu li.active-page a { background: var(--primary-100) !important; color: var(--primary-800) !important; font-weight: 700; }
.sidebar-menu .sidebar-submenu li:not(.active-page) a:hover { background: var(--primary-50); color: var(--primary-700); }


/* Campos numéricos de tablas: que siempre se vea el número completo */
input.vf-num, table input[type=number].form-control-sm { min-width: 84px; text-align: right; padding-left: .5rem; padding-right: .35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
table input[type=number]::-webkit-inner-spin-button { opacity: .6; margin-left: 2px; }
#vf-tbl-lineas { min-width: 980px; }
.vf-precio { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; padding: .4rem .25rem; white-space: nowrap; color: var(--text-primary-light); }

/* Pestañas del formulario de cotización (estilo SAP) */
#vf-tabs{border-bottom:2px solid var(--dt-border,#e5e7eb);gap:.25rem}
#vf-tabs .nav-link{border:0;border-bottom:3px solid transparent;margin-bottom:-2px;font-weight:600;color:var(--text-secondary-light,#6b7280);padding:.6rem 1.1rem;background:transparent}
#vf-tabs .nav-link:hover{color:var(--dt-brand,#487fff)}
#vf-tabs .nav-link.active{color:var(--dt-brand,#487fff);border-bottom-color:var(--dt-brand,#487fff);background:transparent}
#vf-tab-logistica textarea[readonly],#vf-tab-finanzas input[readonly]{background:var(--dt-surface-2,#f5f7fb)}
#vf-tbl-anexos td{vertical-align:middle}

/* Formulario de órdenes de venta (mismo patrón SAP que cotizaciones) */
#of-tabs{border-bottom:2px solid var(--dt-border,#e5e7eb);gap:.25rem;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
#of-tabs .nav-link{border:0;border-bottom:3px solid transparent;margin-bottom:-2px;font-weight:600;color:var(--text-secondary-light,#6b7280);padding:.6rem 1.1rem;background:transparent;white-space:nowrap}
#of-tabs .nav-link:hover{color:var(--dt-brand,#487fff)}
#of-tabs .nav-link.active{color:var(--dt-brand,#487fff);border-bottom-color:var(--dt-brand,#487fff);background:transparent}
#of-tabs .nav-link.of-tab-err{color:var(--danger-600,#dc3545)}
#of-tabs .nav-link.of-tab-err::after{content:' \25CF';font-size:.7em;vertical-align:middle}
#of-tab-logistica textarea[readonly],#of-tab-finanzas input[readonly],#od-form input[readonly]{background:var(--dt-surface-2,#f5f7fb)}
#of-tbl-lineas{min-width:980px}
#of-tbl-lineas td{vertical-align:middle}
#of-tbl-lineas .dt-field-error{white-space:normal;font-size:.72rem;margin-top:.15rem}
#of-tbl-anexos td{vertical-align:middle}
#od-form .of-udf-wrap .form-label{margin-bottom:.5rem}
#modalDetalleOrden .od-sec-title{font-size:.95rem}

/* ===== Escala del portal al 80% (pantallas de escritorio) =====
   WowDash/Bootstrap dimensionan en rem: bajar la base a 80% reduce textos, botones, campos y espacios
   a la vez, igual que el zoom 80% del navegador, sin tocar cada pantalla. En celular/tablet se deja
   al 100% (los controles de 16px evitan el zoom automatico de iOS). */
@media (min-width: 992px) {
    html { font-size: 80%; }
}

/* Anti-temblor: (1) la barra de scroll vertical reserva su espacio siempre, asi la pagina no se mueve de lado
   cuando aparece/desaparece al abrir combos o cambiar el alto del formulario; (2) sin elevaciones al pasar el
   mouse (translate/scale): cuando el mouse queda en el borde del elemento este sube, deja de estar bajo el
   mouse, baja y vuelve a subir, y se ve como una vibracion (tarjetas con imagen, botones, menu lateral). */
html { scrollbar-gutter: stable; }