/* ═══════════════════════════════════════════════════════════════
   ProteoERP — Unified Design System (Safari/Opera Compatible)
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root,
[data-theme="dark"] {
    --bg-main: #0b1120;
    --bg-card: #151d31;
    --bg-card-hover: #1c2742;
    --bg-input: #1e293b;
    --bg-navbar: rgba(11, 17, 32, 0.85);
    --bg-body-gradient: radial-gradient(circle at top right, #131b30, #0b1120);
    --bg-login-gradient: radial-gradient(circle at center, #1c2742 0%, #0b1120 100%);
    --border: #2d3a4f;
    --border-light: rgba(255, 255, 255, 0.08);
    --primary: #38bdf8;
    --primary-alt: #0ea5e9;
    --primary-glow: rgba(56, 189, 248, 0.3);
    --accent-red: #f87171;
    --accent-yellow: #fbbf24;
    --accent-green: #34d399;
    --accent-orange: #fb923c;
    --text-main: #e2e8f0;
    --text-muted: #a3b3c7;
    --title-gradient-from: #ffffff;
    --surface-tint: rgba(255, 255, 255, 0.05);
    --surface-tint-light: rgba(255, 255, 255, 0.02);
    --tint-red: rgba(248, 113, 113, 0.15);
    --tint-yellow: rgba(251, 191, 36, 0.15);
    --tint-green: rgba(52, 211, 153, 0.15);
    --tint-orange: rgba(251, 146, 60, 0.15);
    --tint-primary: rgba(56, 189, 248, 0.15);
    --tint-red-strong: rgba(248, 113, 113, 0.22);
    --tint-yellow-strong: rgba(251, 191, 36, 0.22);
    --tint-green-strong: rgba(52, 211, 153, 0.22);
    --tint-primary-strong: rgba(56, 189, 248, 0.22);
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Tema claro ─────────────────────────────────────────────── */
[data-theme="light"] {
    --bg-main: #eef2f7;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-input: #ffffff;
    --bg-navbar: rgba(255, 255, 255, 0.9);
    --bg-body-gradient: linear-gradient(135deg, #eef2f7, #e2e8f0);
    --bg-login-gradient: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    --border: #cbd5e1;
    --border-light: rgba(15, 23, 42, 0.08);
    --primary: #0284c7;
    --primary-alt: #0369a1;
    --primary-glow: rgba(2, 132, 199, 0.15);
    --accent-red: #dc2626;
    --accent-yellow: #d97706;
    --accent-green: #059669;
    --accent-orange: #ea580c;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --title-gradient-from: #0f172a;
    --surface-tint: rgba(15, 23, 42, 0.04);
    --surface-tint-light: rgba(15, 23, 42, 0.02);
    --tint-red: rgba(220, 38, 38, 0.12);
    --tint-yellow: rgba(217, 119, 6, 0.14);
    --tint-green: rgba(5, 150, 105, 0.12);
    --tint-orange: rgba(234, 88, 12, 0.13);
    --tint-primary: rgba(2, 132, 199, 0.12);
    --tint-red-strong: rgba(220, 38, 38, 0.2);
    --tint-yellow-strong: rgba(217, 119, 6, 0.22);
    --tint-green-strong: rgba(5, 150, 105, 0.2);
    --tint-primary-strong: rgba(2, 132, 199, 0.2);
    --shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-card: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
}

/* ── Reset & Base ──────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background: var(--bg-body-gradient);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-animation: fadeIn 0.8s ease-out;
    animation: fadeIn 0.8s ease-out;
    transition: background 0.3s ease, color 0.3s ease;
}

body.login-bg {
    background: var(--bg-login-gradient);
    overflow: hidden;
}

/* ── Toggle de tema (botón en el sidebar) ───────────────────── */
.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-footer a { flex: 1; }
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.6;
    transition: var(--transition);
    flex-shrink: 0;
}
.theme-toggle:hover {
    opacity: 1;
    background: var(--surface-tint);
    color: var(--primary);
}
.theme-toggle [class*="icon-"] { line-height: 1; }
[data-theme="dark"]  .theme-toggle .icon-sun  { display: inline; }
[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: inline; }

@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.app-container {
    display: -webkit-flex;
    display: flex;
    min-height: 100vh;
    max-width: 100%;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
    width: 280px;
    background: var(--bg-card);
    border-right: 1px solid var(--border-light);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 1200;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-container.sidebar-collapsed .sidebar {
    -webkit-transform: translateX(-280px);
    transform: translateX(-280px);
}

.sidebar-header {
    padding: 30px 24px;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-header h2 {
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--title-gradient-from), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-menu {
    -webkit-flex: 1;
    flex: 1;
    padding: 20px 12px;
    list-style: none;
}

.sidebar-menu li {
    margin-bottom: 8px;
}

.sidebar-menu a {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    padding: 14px 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.sidebar-menu a i {
    font-size: 1.1rem;
    width: 20px;
    margin-right: 12px;
}

.sidebar-menu a:hover {
    background: var(--surface-tint);
    color: var(--text-main);
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}

.sidebar-menu a.active {
    background: rgba(0, 180, 255, 0.1);
    color: var(--primary);
    box-shadow: inset 4px 0 0 var(--primary);
}

/* ── Main Content ──────────────────────────────────────────── */
.main-content {
    -webkit-flex: 1;
    flex: 1;
    margin-left: 280px;
    padding: 40px;
    max-width: calc(100% - 280px);
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-container.sidebar-collapsed .main-content {
    margin-left: 0;
    max-width: 100%;
}

.content-wrapper {
    max-width: 1650px;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.content-wrapper > * + * {
    margin-top: 22px;
}

/* ── Sidebar Overlay for Mobile ────────────────────────────── */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1150;
    display: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.sidebar-overlay.active {
    display: block;
}

/* ── Mobile Responsiveness ─────────────────────────────────── */
@media (max-width: 991px) {
    .sidebar {
        -webkit-transform: translateX(-280px);
        transform: translateX(-280px);
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
    }

    .app-container.sidebar-mobile-active .sidebar {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        max-width: 100%;
        padding: 20px;
    }

    .top-navbar {
        padding: 15px 20px;
    }

    .metrics-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .filters-row {
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .warehouse-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.sidebar-toggle-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    margin-right: 20px;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.sidebar-toggle-btn:hover {
    color: var(--primary);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════
   TOP NAVBAR
   ═══════════════════════════════════════════════════════════════ */
.top-navbar {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: center;
    align-items: center;
    padding: 15px 40px;
    background: var(--bg-navbar);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 30px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1100;
    max-width: 1650px;
  margin-left: auto;
  margin-right: auto;
}

.user-profile {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

.user-profile > * + * {
    margin-left: 12px;
}

.user-profile:hover {
    background: var(--surface-tint);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-alt));
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.user-info {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 700;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 8px;
    width: 200px;
    z-index: 1000;
    display: none;
    -webkit-animation: dropdownSlide 0.3s ease;
    animation: dropdownSlide 0.3s ease;
}

@-webkit-keyframes dropdownSlide {
    from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-profile.active .dropdown-menu {
    display: block;
}

.dropdown-item {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    text-decoration: none;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 0.9rem;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.dropdown-item > * + * {
    margin-left: 10px;
}

.dropdown-item:hover {
    background: var(--surface-tint);
    color: var(--primary);
}

.dropdown-item.logout {
    color: var(--accent-red);
}

.dropdown-item.logout:hover {
    background: rgba(255, 82, 82, 0.1);
    color: var(--accent-red);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE TITLE
   ═══════════════════════════════════════════════════════════════ */
.page-title {
    margin-bottom: 10px;
    padding: 0 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0;
    background: linear-gradient(135deg, var(--title-gradient-from), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-title h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.page-title h2 span {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-green);
    margin: 0 2px;
}

.page-title p {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
}

/* ── Dashboard date filter (compact) ───────────────────────── */
.dash-date-filter {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.dash-date-field {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 5px 10px;
    transition: border-color 0.2s;
}

.dash-date-field:focus-within {
    border-color: var(--primary);
}

.dash-date-field i {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dash-date-field input[type="date"] {
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
    width: 160px;
    cursor: pointer;
}

.dash-date-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

.dash-date-sep {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-weight: 600;
}

.dash-date-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.dash-date-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    padding: 24px;
    box-shadow: var(--shadow);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.card:hover {
    border-color: rgba(0, 180, 255, 0.3);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════
   METRIC CARDS
   ═══════════════════════════════════════════════════════════════ */
.metrics-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 10px;
}

.metric-card {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.metric-card > * + * {
    margin-left: 24px;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 0.06;
    pointer-events: none;
}

.metric-card.alert {
    border-left: 4px solid var(--accent-red);
    background: var(--bg-card);
}
.metric-card.alert::before { background: var(--accent-red); opacity: 0.14; }
.metric-card.alert .metric-icon {
    color: var(--accent-red);
    background: var(--tint-red-strong);
}

.metric-card.warning {
    border-left: 4px solid var(--accent-yellow);
    background: var(--bg-card);
}
.metric-card.warning::before { background: var(--accent-yellow); opacity: 0.14; }
.metric-card.warning .metric-icon {
    color: var(--accent-yellow);
    background: var(--tint-yellow-strong);
}

.metric-card.success {
    border-left: 4px solid var(--accent-green);
    background: var(--bg-card);
   
}
.metric-card.success::before { background: var(--accent-green); opacity: 0.14; }
.metric-card.success .metric-icon {
    color: var(--accent-green);
    background: var(--tint-green-strong);
}

.metric-card.primary {
    border-left: 4px solid var(--primary);
    background: var(--bg-card);
}
.metric-card.primary::before { background: var(--primary); opacity: 0.14; }
.metric-card.primary .metric-icon {
    color: var(--primary);
    background: var(--tint-primary-strong);
}

.metric-card.info {
    border-left: 4px solid var(--primary);
    background: var(--bg-card);
}
.metric-card.info::before { background: var(--primary); opacity: 0.14; }
.metric-card.info .metric-icon {
    color: var(--primary);
    background: var(--tint-primary-strong);
}

.metric-icon {
    font-size: 1.75rem;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: var(--surface-tint);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.metric-card:hover .metric-icon {
    -webkit-transform: scale(1.1) rotate(5deg);
    transform: scale(1.1) rotate(5deg);
}

.metric-content {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;


}

.metric-value {
    font-size: 2.1rem;
    font-weight: 800;
    margin: 2px 0;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
[data-theme="dark"] .metric-value {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.metric-label-margin-bottom {
 margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   KPI CARDS (Cobranzas / Summary)
   ═══════════════════════════════════════════════════════════════ */
.kpi-row {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 10px;
}

.kpi-card {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    border-left: 5px solid var(--primary);
    box-shadow: var(--shadow);
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.kpi-card:hover {
    border-color: rgba(0, 180, 255, 0.3);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.kpi-card.usd { border-left-color: var(--accent-green); }
.kpi-card.ops { border-left-color: var(--accent-yellow); }

.kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-val {
    font-size: 2rem;
    font-weight: 800;
    margin-top: 8px;
    display: block;
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
}

/* ═══════════════════════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════════════════════ */
.filters-card {
    margin-bottom: 0;
}

.filters-header {
    margin-bottom: 24px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    color: var(--primary);
}

.filters-header > * + * {
    margin-left: 12px;
}

.filters-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

.filters-header i {
    font-size: 1rem;
    background: rgba(0, 180, 255, 0.1);
    padding: 8px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 10px rgba(0, 180, 255, 0.1);
}

.filters-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.filters-row > * + * {
    margin-left: 20px;
}

.filter-group {
    -webkit-flex: 1;
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select,
.filter-group input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    outline: none;
    font-size: 0.95rem;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.filter-group input[type="text"],
.filter-group input[type="password"],
.filter-group input[type="date"],
.filter-group input[type="number"] {
    background-color: var(--bg-input);
    color: var(--text-main);
}

.filter-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 48px;
}

.filter-group select:focus,
.filter-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow), 0 0 15px var(--primary-glow);
    background-color: var(--bg-card-hover);
    transform: translateY(-1px);
}

/* ── Autofill Fix ─────────────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.filter-group select option {
    background: var(--bg-input);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-neon {
    background: linear-gradient(135deg, var(--primary), var(--primary-alt));
    color: #000;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    border: none;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    box-shadow: 0 4px 15px var(--primary-glow);
    height: 48px;
    white-space: nowrap;
}

.btn-neon > * + * {
    margin-left: 12px;
}

.btn-neon:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-glow);
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}

.btn-neon:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.btn-neon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    -webkit-transform: none;
    transform: none;
}

.btn-group {
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.btn-group > * + * {
    margin-left: 10px;
}

.btn-cyan {
    background: var(--primary);
    color: #000;
    box-shadow: 0 0 18px var(--primary-glow);
}

.btn-green {
    background: var(--accent-green);
    color: #000;
    box-shadow: 0 0 18px rgba(0, 230, 118, 0.3);
}

.btn-search {
    background: linear-gradient(135deg, var(--primary), var(--primary-alt));
    color: #fff;
    border: none;
    padding: 0 24px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    height: 48px;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    box-shadow: 0 4px 15px var(--primary-glow);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-search i {
    margin-right: 10px;
    font-size: 1rem;
    opacity: 0.9;
}

.btn-search:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-glow);
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}

.btn-csv {
    background: rgba(0, 180, 255, 0.1);
    color: var(--primary);
    border: 1px solid rgba(0, 180, 255, 0.2);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    font-size: 0.8rem;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
}

.btn-csv > * + * {
    margin-left: 6px;
}

.btn-csv:hover {
    background: var(--primary);
    color: #000;
}

/* ═══════════════════════════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════════════════════════ */
.table-card {
    overflow: hidden;
    padding: 0;
}

.table-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.t-header {
    padding: 20px 24px;
    background: var(--surface-tint-light);
    border-bottom: 1px solid var(--border);
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.t-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 700;
}

.chart-toggle-group {
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 3px;
}

.chart-toggle-btn {
    padding: 5px 14px;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.chart-toggle-btn:hover {
    color: var(--text-main);
    background: var(--surface-tint);
}

.chart-toggle-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.tabs {
    display: -webkit-flex;
    display: flex;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-btn:hover {
    color: var(--text-main);
    background: var(--surface-tint);
}

.tab-btn.active {
    color: var(--primary);
    background: rgba(0, 180, 255, 0.05);
    border-bottom-color: var(--primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 18px 24px;
    background: var(--surface-tint-light);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid var(--border);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    white-space: nowrap;
}

th:hover {
    background: var(--surface-tint);
    color: var(--primary);
}

th .sort-icon {
    margin-left: 10px;
    font-size: 0.75rem;
    opacity: 0.4;
}

th:hover .sort-icon {
    opacity: 1;
}

th.active-sort {
    color: var(--primary);
    background: rgba(0, 180, 255, 0.05);
}

th.active-sort .sort-icon {
    opacity: 1;
}

td {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.95rem;
    vertical-align: middle;
    color: var(--text-main);
}

code {
    background: var(--surface-tint);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
    border: 1px solid var(--border-light);
}

/* ── Zebra Rows & Hover ────────────────────────────────────── */
tbody tr {
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

tbody tr:nth-child(even) {
    background: var(--surface-tint-light);
}

tbody tr:hover {
    background: rgba(0, 180, 255, 0.06);
    box-shadow: inset 4px 0 0 var(--primary);
}

/* ── Code Badge ────────────────────────────────────────────── */
.code-badge {
    display: inline-block;
    background: rgba(0, 180, 255, 0.08);
    color: var(--primary);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
}

/* ── Product Name Cell ─────────────────────────────────────── */
td.product-name {
    color: var(--text-main);
    font-weight: 500;
    min-width: 250px;
    white-space: normal;
    font-size: 0.8rem;
    line-height: 1.3;
    word-break: break-word;
}

/* ── Row Total ─────────────────────────────────────────────── */
.row-total {
    background: rgba(0, 230, 118, 0.03);
}

.row-total td {
    color: var(--accent-green) !important;
    font-weight: 800;
    border-top: 2px solid var(--accent-green);
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */
.badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    white-space: nowrap;
}

.badge > * + * {
    margin-left: 6px;
}

.badge-critical {
    background: rgba(255, 82, 82, 0.12);
    color: var(--accent-red);
    border: 1px solid rgba(255, 82, 82, 0.2);
}

.badge-low {
    background: rgba(255, 193, 7, 0.12);
    color: var(--accent-yellow);
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.badge-ok {
    background: rgba(0, 230, 118, 0.12);
    color: var(--accent-green);
    border: 1px solid rgba(0, 230, 118, 0.2);
}

/* ── Pill Banco (Cobranzas) ────────────────────────────────── */
.pill-banco {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.pagination-wrapper {
    padding: 24px;
    border-top: 1px solid var(--border);
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    background: var(--surface-tint-light);
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.pagination-wrapper > * + * {
    margin-left: 12px;
}

.pager-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.pager-container > * + * {
    margin-left: 6px;
}

.pager-group {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    padding: 4px;
}

.pager-group > * + * {
    margin-left: 4px;
}

.pager-btn {
    background: transparent;
    border: none;
    color: var(--text-main);
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 6px;
    cursor: pointer;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    font-weight: 600;
    font-size: 0.8rem;
}

.pager-btn:hover:not(:disabled):not(.disabled) {
    background: rgba(0, 180, 255, 0.1);
    color: var(--primary);
}

.pager-btn.active {
    background: var(--primary);
    color: #000;
    font-weight: 800;
}

.pager-btn:disabled,
.pager-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.page-ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
    font-size: 0.85rem;
    line-height: 36px;
}

.page-input-group {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.page-input-group > * + * {
    margin-left: 8px;
}

.page-input {
    width: 60px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-main);
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    outline: none;
    font-weight: 700;
    -webkit-appearance: none;
    -moz-appearance: textfield !important;
    appearance: textfield;
}

.page-input::-webkit-outer-spin-button,
.page-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

.page-input:focus {
    border-color: var(--primary);
}

.page-info-bubble {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.page-info-bubble strong {
    color: var(--primary);
}

.per-page-group {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.per-page-group > * + * {
    margin-left: 10px;
}

.per-page-select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
}

.per-page-select:focus {
    border-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
.login-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: radial-gradient(circle at center, #1a2440 0%, #0a0f1d 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 180, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-animation: loginFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: loginFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@-webkit-keyframes loginFadeIn {
    from { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes loginFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.login-card h1 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 2.2rem;
    background: linear-gradient(135deg, #fff 30%, var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.login-form .filter-group {
    margin-bottom: 0;
}

.login-form input {
    font-size: 1rem;
    padding: 16px 20px;
}

.login-error {
    background: rgba(255, 82, 82, 0.1);
    border: 1px solid rgba(255, 82, 82, 0.3);
    color: var(--accent-red);
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 20px;
}

.login-footer {
    margin-top: 35px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD CARDS (Departments)
   ═══════════════════════════════════════════════════════════════ */
.warehouse-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 10px;
}

.dept-card {
    cursor: pointer;
    text-decoration: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-height: 200px;
}

.dept-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: var(--surface-tint);
    width: 70px;
    height: 70px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: var(--radius-md);
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.dept-card:hover .dept-icon {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background: rgba(0, 180, 255, 0.1);
    color: var(--primary);
}

.dept-status {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 15px;
}

.dept-status > * + * {
    margin-left: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 10px var(--accent-green);
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */
.text-right { text-align: right; }
.text-center { text-align: center; }
.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .filters-row { -webkit-flex-direction: column; flex-direction: column; }
    .filters-row > * + * { margin-left: 0; margin-top: 20px; }
    .pagination-wrapper { -webkit-flex-direction: column; flex-direction: column; }
    .pagination-wrapper > * + * { margin-left: 0; margin-top: 16px; }
    .kpi-row { -webkit-grid-template-columns: 1fr; grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .content-wrapper > * + * { margin-top: 14px; }
    .metrics-grid { -webkit-grid-template-columns: 1fr; grid-template-columns: 1fr; }
    .filters-row { -webkit-flex-direction: column; flex-direction: column; }
    .btn-group { width: 100%; }
    .btn-neon { -webkit-flex: 1; flex: 1; -webkit-justify-content: center; justify-content: center; }
    .pagination-wrapper { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }
    .page-title h1 { font-size: 1.4rem; }
}

@media (max-width: 900px) {
    .metrics-grid { -webkit-grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); }
    .metric-value { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED DASHBOARD TABLES & SHARED COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Uniform Tables ---------- */
.table-container { 
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); 
    overflow-x: auto; 
    border: 1px solid var(--border-light);
    background: var(--surface-tint-light);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

thead th {
    background: var(--bg-card);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 18px 24px;
    text-align: left;
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}

tbody tr:last-child { border-bottom: none; }

tbody td {
    padding: 18px 24px;
    color: var(--text-main);
    vertical-align: middle;
}

tbody tr.clickable:hover {
    cursor: pointer;
    background: rgba(0, 180, 255, 0.08) !important;
}

/* ---------- Uniform Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.badge-ok { background: rgba(0, 230, 118, 0.15); color: var(--accent-green); border: 1px solid rgba(0, 230, 118, 0.2); }
.badge-low { background: rgba(255, 193, 7, 0.15); color: var(--accent-yellow); border: 1px solid rgba(255, 193, 7, 0.2); }
.badge-critical { background: rgba(255, 82, 82, 0.15); color: var(--accent-red); border: 1px solid rgba(255, 82, 82, 0.2); }

.code-badge {
    background: var(--surface-tint-light);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Inter', monospace;
    font-size: 0.8rem;
    color: var(--primary);
    border: 1px solid var(--border);
}

/* ---------- Shared Modals ---------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.open { display: flex; }

.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    animation: modalIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.modal-hd {
    padding: 24px 30px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
}

.modal-hd h3 { font-size: 1.25rem; font-weight: 800; margin: 0; color: var(--primary); }
.modal-hd .mref { font-size: 0.85rem; color: var(--text-muted); margin-top: 5px; font-weight: 600; }

.modal-close {
    background: var(--surface-tint);
    border: none;
    color: var(--text-main);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}

.modal-close:hover { background: var(--accent-red); color: #fff; }
.modal-body { overflow-y: auto; padding: 25px 30px; flex: 1; }

.modal-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.mic {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 14px 20px;
}

.mic .lbl { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.mic .val { font-size: 1.15rem; font-weight: 700; color: var(--text-main); font-family: 'Outfit', sans-serif; }
.mic .val.gr { color: var(--accent-green); }
.mic .val.bl { color: var(--primary); }

.modal-sec-ttl {
    font-size: 0.9rem; font-weight: 800; text-transform: uppercase; color: var(--primary);
    margin: 30px 0 15px;
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border-light);
}

.modal-ft { border-top: 1px solid var(--border-light); padding: 15px 30px; display: flex; justify-content: flex-end; background: rgba(255, 255, 255, 0.01); }

/* ---------- Televentas Specific Items ---------- */
.chart-wrapper { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; padding: 10px 0 20px; }
.chart-canvas-wrap { flex: 0 0 auto; width: 320px; height: 320px; position: relative; }

.chart-legend {
    flex: 1 1 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.02);
}

.legend-item:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(5px); }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.legend-name { flex: 1; color: var(--text-main); font-weight: 600; }
.legend-val { color: var(--accent-green); font-weight: 700; }

.rank-num { 
    display: inline-flex; align-items: center; justify-content: center; 
    width: 28px; height: 28px; border-radius: 50%; 
    background: rgba(255, 255, 255, 0.07); 
    font-weight: 800; font-size: 0.8rem; color: var(--text-muted); 
}
.rank-num.gold { background: rgba(255, 193, 7, 0.2); color: #ffc107; box-shadow: 0 0 15px rgba(255, 193, 7, 0.1); }
.rank-num.silver { background: rgba(192, 192, 192, 0.2); color: #c0c0c0; }
.rank-num.bronze { background: rgba(205, 127, 50, 0.2); color: #cd7f32; }

.progress-bar-wrap { position: relative; background: rgba(255, 255, 255, 0.06); border-radius: 10px; overflow: hidden; height: 6px; min-width: 100px; margin-top: 5px; }
.progress-bar-fill { height: 100%; border-radius: 10px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

.sw { display: flex; gap: 10px; }
.sw input { flex: 1; }

.btn-csv {
    background: rgba(0, 230, 118, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(0, 230, 118, 0.2);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-csv:hover { background: var(--accent-green); color: #000; }

.click-tip { 
    font-size: 0.85rem; color: var(--text-muted); 
    padding: 15px 0; display: flex; align-items: center; gap: 10px; 
    font-weight: 500; border-top: 1px solid var(--border-light);
    margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   MODULE NAVIGATION (Sub-menus)
   ═══════════════════════════════════════════════════════════════ */
.module-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(20, 28, 47, 0.6);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
    backdrop-filter: blur(8px);
}

.nav-item i {
    font-size: 1.1rem;
    color: var(--primary);
    opacity: 0.8;
}

.nav-item:hover {
    background: rgba(0, 180, 255, 0.1);
    border-color: var(--primary);
    color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 180, 255, 0.1);
}

.nav-item:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.2), rgba(0, 136, 204, 0.1));
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 180, 255, 0.15);
}

.nav-item.active i {
    color: var(--primary);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   REPORTING & ANALYSIS COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
.chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    min-height: 400px;

}

.donut-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.chart-legend {
    margin-top: 25px;
    max-height: 300px;
    overflow-y: auto;
}
.chart-legend-width-max {
max-width: 500px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.legend-item:hover {
    background: rgba(0, 180, 255, 0.1);
    border-color: var(--primary);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-text {
    flex: 1;
}

.legend-value {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.85rem;
}

.tab-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0;
}

.tab-btn {
    padding: 12px 20px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: var(--transition);
    font-size: 0.95rem;
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.chart-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 1200px) {
    .chart-section {
        grid-template-columns: 1fr;
    }
}

.stat-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
    padding: 15px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL SYSTEM (Unified)
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.open { display: flex; }

.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    animation: mIn 0.3s cubic-bezier(0.4,0,0.2,1);
}

@keyframes mIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

.modal-hd {
    padding: 24px 30px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: rgba(255,255,255,0.02);
}

.modal-hd h3 { font-size:1.25rem; font-weight:800; margin:0; color:var(--primary); }
.modal-hd .mref { font-size:0.85rem; color:var(--text-muted); margin-top:5px; font-weight:600; }

.modal-close {
    background: rgba(255,255,255,0.05);
    border: none;
    color: var(--text-main);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}

.modal-close:hover { background: var(--accent-red); color:#fff; }

.modal-body { overflow-y:auto; padding:25px 30px; flex:1; }

.modal-ft { border-top:1px solid var(--border-light); padding:15px 30px; display:flex; justify-content:flex-end; background:rgba(255,255,255,0.01); }

.btn-cerrar {
    background: var(--bg-input); color:var(--text-main);
    border:1px solid var(--border); padding:10px 24px;
    border-radius:var(--radius-sm); font-weight:700; cursor:pointer; transition:var(--transition);
}
.btn-cerrar:hover { background:var(--border); }

.code-badge {
    background: rgba(0, 180, 255, 0.1);
    color: var(--primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
    ALERTS & SEARCH NOTIFICATIONS
    ═══════════════════════════════════════════════════════════════ */
.search-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 15px;
    background: rgba(255, 87, 34, 0.15);
    border: 1px solid var(--accent-red);
    border-radius: 6px;
    color: var(--accent-red);
    font-weight: 600;
    animation: slideDown 0.3s ease;
}
.search-alert i:first-child {
    font-size: 1.2rem;
}
.search-alert button {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--accent-red);
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.7;
}
.search-alert button:hover {
    opacity: 1;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
    PAGE LAYOUT & UTILITIES
    ═══════════════════════════════════════════════════════════════ */
.erp-page {
    min-height: 100vh;
    padding-bottom: 40px;
}
.click-tip {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    border-top: 1px solid var(--border-light);
    margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════
    TABLE ALIGNMENT & INTERACTIVE STYLES
    ═══════════════════════════════════════════════════════════════ */
th.c, td.c { text-align: center !important; }
th.r, td.r { text-align: right !important; }
#table-audit th:first-child { width: 1%; white-space: nowrap; }
#table-audit td:nth-child(4) { min-width: 320px; white-space: normal; }
#table-audit td.product-name { white-space: normal !important; max-width: none !important; }
#table-audit th:last-child { min-width: 150px; }
#table-audit thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
    box-shadow: inset 0 -2px 0 var(--border);
}
tbody tr.clickable:hover {
    cursor: pointer;
    background: rgba(0, 180, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════
    TELEVENTAS & UI COMPONENTS
    ═══════════════════════════════════════════════════════════════ */
.modal-no-ped { text-align: center; padding: 40px; opacity: 0.5; font-size: 0.95rem; }
.chart-hidden { display: none !important; }


.btn-ver-usr {
    background: rgba(0,180,255,0.1);
    border: 1px solid rgba(0,180,255,0.25);
    color: var(--primary);
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 6px;
    transition: var(--transition);
}
.btn-ver-usr:hover { background: rgba(0,180,255,0.3); }

.chart-canvas-wrap {
    flex: 0 0 auto;
    width: 300px;
    height: 300px;
    position: relative;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-name {
    flex: 1;
    color: var(--text-main);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.legend-val {
    color: var(--accent-green);
    font-weight: 700;
    white-space: nowrap;
}

.btn-dona-tab {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.btn-dona-tab:hover { background: rgba(255,255,255,0.08); color: var(--text-main); }
.btn-dona-tab.active {
    background: rgba(0,180,255,0.15);
    border-color: rgba(0,180,255,0.4);
    color: var(--primary);
}

#table-ranking thead th,
#table-detalle thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
    box-shadow: inset 0 -2px 0 var(--border);
}

.rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.rank-num.gold   { background: rgba(255,193,7,0.2);  color: #ffc107; }
.rank-num.silver { background: rgba(192,192,192,0.2); color: #c0c0c0; }
.rank-num.bronze { background: rgba(205,127,50,0.2);  color: #cd7f32; }

.progress-bar-wrap {
    position: relative;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    height: 6px;
    min-width: 80px;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* ═══════════════════════════════════════════════════════════════
    COBRANZAS SPECIFIC COMPONENTS
    ═══════════════════════════════════════════════════════════════ */
.badge-info {
    background: rgba(0, 180, 255, 0.12);
    color: var(--primary);
    border: 1px solid rgba(0, 180, 255, 0.25);
}

.badge-muted {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

tr.cob-group-header td {
    padding: 10px 24px;
    background: rgba(0, 180, 255, 0.07);
    border-top: 2px solid rgba(0, 180, 255, 0.2);
    border-bottom: 1px solid rgba(0, 180, 255, 0.1);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    cursor: default;
}

tr.cob-group-header td .cob-group-count {
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 10px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

tr.cob-group-header:hover {
    background: rgba(0, 180, 255, 0.07) !important;
    box-shadow: none !important;
}

tr.cob-row-hidden {
    display: none;
}

.cob-vendor-id {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.cob-banco-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--surface-tint);
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}

#cob-no-results {
    display: none;
    text-align: center;
    padding: 50px 24px;
    color: var(--text-muted);
}
#cob-no-results i {
    font-size: 2.5rem;
    margin-bottom: 16px;
    color: var(--border);
    display: block;
}

@media (max-width: 768px) {
    .cob-col-id, .cob-col-vendedor { display: none; }
}

/* ============================================================ */
/* REFACTORIZACIÓN TELEVENTAS - CLASES EXTRAÍDAS                */
/* ============================================================ */

/* Badges */
.badge-neutral {
    background: var(--surface-tint);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.user-filter-badge {
    background: rgba(0, 180, 255, 0.15);
    color: var(--primary);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.82rem;
    font-weight: 700;
}
.user-btn-badge {
    background: rgba(0, 180, 255, 0.3);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.72rem;
    margin-left: 4px;
}
.badge-user {
    background: rgba(0, 180, 255, 0.08);
    color: var(--primary);
    border-color: rgba(0, 180, 255, 0.2);
}

/* Modificadores de texto */
.text-main-bold {
    font-weight: 700;
    color: var(--text-main);
}
.text-muted-sm {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.text-muted-md {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.text-primary {
    color: var(--primary);
}
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fs-095 { font-size: 0.95rem; }

/* Especiales para montos e importes */
.amount-usd {
    color: var(--accent-green);
    font-weight: 700;
}
.total-amount {
    font-weight: 800;
}
.total-usd {
    font-weight: 800;
    color: var(--accent-green);
}

/* Utilidades de espaciado (Margen & Padding) */
.mt-10 { margin-top: 10px; }
.mt-25 { margin-top: 25px; }
.mt-28 { margin-top: 28px; }
.ml-15 { margin-left: 15px; }
.mr-5  { margin-right: 5px; }
.icon-mr { margin-right: 5px; }
.icon-primary-mr {
    color: var(--primary);
    margin-right: 6px;
}

/* Tablas y estados vacíos */
.empty-data-msg {
    opacity: 0.5;
    text-align: center;
    padding: 40px 0;
}
.empty-table-cell {
    padding: 48px;
    opacity: 0.5;
}

/* Elementos de contenedores & Layouts */
.chart-area-pd {
    padding: 20px 25px 10px;
}
.chart-mode-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.min-w-150 {
    min-width: 150px;
}
.progress-pct {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 5px;
}

/* Botones y paginación */
.btn-sm-export {
    height: 38px;
    font-size: 0.75rem;
    padding: 0 15px;
}
.pager-current-page {
    margin: 0 15px;
    font-weight: 700;
    color: var(--primary);
}
.pager-btn-submit {
    background: var(--surface-tint);
}

/* Iconos */
.icon-user-sm {
    font-size: 0.65rem;
    margin-right: 3px;
}

/* Opacidad */
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }

/* Ocultar/mostrar gráficas vía JS sin inline style */
.chart-hidden { display: none !important; }

/* Botones de navegación de módulo (.module-nav ya definido arriba) */
.module-nav { margin: 20px 0; }
.btn-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--primary);           /* #00b4ff — fondo sólido, visible */
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    color: #000;                           /* texto negro para contraste máximo */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    transition: var(--transition);
    cursor: pointer;
}
.btn-nav:hover {
    background: #00cfff;
    border-color: #00cfff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 180, 255, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   TELEVENTAS — HERO KPI DASHBOARD (redesign)
   ═══════════════════════════════════════════════════════════════ */

/* --- Header row: título + filtro compacto --- */
.tv-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.tv-title-block { flex: 1 1 300px; }

.tv-module-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(0, 180, 255, 0.12);
    border: 1px solid rgba(0, 180, 255, 0.3);
    color: var(--primary);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.tv-title-block h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--text-main);
}

.tv-period {
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Filtro compacto --- */
.tv-filter-compact {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    backdrop-filter: blur(8px);
}

.tv-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tv-input-wrap label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tv-input-wrap input,
.tv-input-wrap select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 8px 12px;
    font-size: 0.88rem;
    outline: none;
    transition: var(--transition);
}

.tv-input-wrap input:focus,
.tv-input-wrap select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.1);
}

.tv-btn-apply {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: #000;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    align-self: flex-end;
}

.tv-btn-apply:hover {
    background: #00cfff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 180, 255, 0.35);
}

/* --- HERO KPI card --- */
.tv-hero-kpi {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    gap: 36px;
    overflow: hidden;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.tv-hero-glow {
    position: absolute;
    top: -60px;
    left: -40px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 180, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.tv-hero-icon {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.3), rgba(0, 100, 200, 0.2));
    border: 2px solid rgba(0, 180, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--primary);
    box-shadow: 0 0 40px rgba(0, 180, 255, 0.2);
    position: relative;
}

.tv-hero-content { flex: 1 1 auto; }

.tv-hero-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 8px;
}

.tv-hero-value {
    font-family: 'Outfit', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tv-hero-currency {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0.8;
}

.tv-hero-bs {
    margin-top: 8px;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Métricas secundarias del hero */
.tv-hero-trend {
    display: flex;
    align-items: center;
    gap: 0;
    border-left: 1px solid var(--border-light);
    padding-left: 36px;
    flex-shrink: 0;
}

.tv-trend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 24px;
    text-align: center;
}

.tv-trend-item i {
    font-size: 1.1rem;
    color: var(--primary);
    opacity: 0.7;
    margin-bottom: 4px;
}

.tv-trend-val {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}

.tv-trend-lbl {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.tv-trend-sep {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.08);
}

/* --- Panel de análisis: grid 2 columnas --- */
.tv-analysis-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1100px) {
    .tv-analysis-grid { grid-template-columns: 1fr; }
    .tv-hero-trend { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; width: 100%; }
    .tv-hero-kpi { flex-direction: column; align-items: flex-start; }
}

/* Card headers unificados para el panel */
.tv-card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-light);
}

.tv-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px;
}

.tv-card-title i { color: var(--primary); }

.tv-dona-tabs {
    display: flex;
    gap: 6px;
}

/* Cards contenedoras */
.tv-chart-card,
.tv-ranking-card {
    overflow: hidden;
}

.tv-chart-card .chart-wrapper {
    padding: 20px;
}

/* ============================================================
   Inventario Hardware — antes inline en vista_inventario_hardware.php
   ============================================================ */
#table-inventario th,
#table-inventario td {
    white-space: nowrap;
}

/* ============================================================
   Páginas de error — antes inline en errors/_error_layout.php
   Color dinámico vía CSS var --err-color en el <body>.
   ============================================================ */
body.err-body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    transition: background 0.3s ease, color 0.3s ease;
}
.err-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 40px 20px;
}
.err-code {
    font-family: 'Outfit', sans-serif;
    font-size: 7rem;
    font-weight: 800;
    margin: 0;
    color: var(--err-color, #e74c3c);
    line-height: 1;
}
.err-icon {
    font-size: 72px;
    color: var(--err-color, #e74c3c);
    margin-bottom: 20px;
}
.err-title { font-size: 2rem; margin: 8px 0 12px; }
.err-msg {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 0 28px;
    line-height: 1.5;
}
.err-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.err-actions .btn {
    padding: 11px 22px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.err-actions .btn-primary { background: var(--primary); color: #fff; }
.err-actions .btn-danger  { background: var(--accent-red); color: #fff; }
.err-actions .btn-ghost   { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD GENERAL — GRID LAYOUT & CHART COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

.dash-grid {
    display: grid;
  
    grid-template-columns: 2.2fr 0.9fr;
    gap: 20px;
    margin-top: 10px;
}

.dash-grid > .dash-bottom-row {
    grid-column: 1 / -1;
}

/* ── Columna izquierda: KPIs apiladas + chart clientes ─────── */
.dash-left-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kpi-stack {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.kpi-stack .metric-card {
    position: relative;
    margin: 0;
    padding: 10px 20px;
    max-width: 430px;
}

.kpi-stack .metric-card:hover {
    transform: translateY(-2px);
}

.kpi-stack .metric-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.kpi-stack .metric-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 56px;
}

.kpi-stack .metric-label {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 10px;
}

.kpi-stack .metric-value {
    font-size: 2.5em !important;
    font-weight: 700;
    margin-top: 4px;
    margin-bottom: 5px;
}

.kpi-stack .metric-sub {
    margin-top: 4px;
}

.kpi-stack .metric-sub-label {
    font-size: 0.75rem;
    opacity: 0.7;
    display: block;
}

.kpi-stack .metric-sub .metric-value {
    font-size: 1.7rem !important;
    margin-top: 0;
}

.kpi-stack .metric-cobrar .metric-value {
    color: #22c55e;
}

.kpi-stack .metric-pagar .metric-value {
    color: #ef4444;
}

.kpi-stack.metric-card {
    margin-left: 13px !important;
}

/* ── Columna derecha: chart vendedor (altura completa) ──────── */
.dash-right-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.dash-right-col .dash-chart-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Cards de gráficos ─────────────────────────────────────── */
.dash-chart-card {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dash-chart-body {
    padding: 20px 24px 24px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 300px;
}

.dash-chart-with-legend {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}

.dash-chart-with-legend .dash-chart-canvas-wrap {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

.dash-chart-with-legend canvas {
    max-height: 380px;
}

.dash-custom-legend {
    flex: 0 0 200px;
    max-height: 380px;
    overflow-y: auto;
    padding: 8px 0 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 1px solid var(--border-light);
    margin-left: 12px;
}

.dash-custom-legend::-webkit-scrollbar { width: 4px; }
.dash-custom-legend::-webkit-scrollbar-track { background: transparent; }
.dash-custom-legend::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.dash-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s, opacity 0.2s;
    cursor: pointer;
    user-select: none;
}

.dash-legend-item:hover {
    background: var(--surface-tint);
}

.dash-legend-item--off {
    opacity: 0.3;
}

.dash-legend-item--off .dash-legend-dot {
    background: var(--text-muted) !important;
}

.dash-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.dash-legend-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-legend-val {
    color: var(--accent-green);
    font-weight: 700;
    font-size: 0.72rem;
    white-space: nowrap;
}

.dash-chart-full {
    flex: 1 1 auto;
    min-height: 0;
}

.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.dash-empty i {
    font-size: 1.8rem;
    opacity: 0.4;
}

.dash-chart-body canvas {
    width: 100%;
      max-width: 99%;
    max-height: 400px;
}

.dash-chart-bodyManual canvas{
     width: 100% ;
    max-height: 400px;
    max-width: 99%;
    padding: 10px;
       
}



.dash-right-col .dash-chart-body {
    min-height: 0;
}

.dash-right-col .dash-chart-body canvas {
    max-height: 100%;
}

/* ── Pie chart: wrap vertical ────────────────────────────────── */
.dash-pie-wrap {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 24px 24px;
}

.dash-pie-wrap canvas {
    max-height: 260px !important;
    max-width: 260px !important;
}

.pedidos-legend {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pedidos-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    transition: background 0.2s;
}

.pedidos-legend-item:hover {
    background: var(--surface-tint);
}

.pedidos-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.pedidos-legend-name {
    flex: 1;
    min-width: 100px;
}

.pedidos-legend-val {
    font-weight: 800;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    white-space: nowrap;
    text-align: right;
    min-width: 180px;
}

.pedidos-legend-total {
    border-top: 1px solid var(--border-light);
    margin-top: 2px;
    padding-top: 8px;
}

.pedidos-legend-total .pedidos-legend-name {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.pedidos-legend-total .pedidos-legend-val {
    font-size: 0.95rem;
    color: var(--text-main);
}

.pedidos-legend-note {
    margin: 6px 12px 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: right;
}

/* ── Fila inferior ──────────────────────────────────────────── */
.dash-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── Metas + Ranking Productos ──────────────────────────────── */
.dash-goals-row {
    display: grid;
    grid-template-columns: 2.4fr 1.6fr;
    gap: 20px;
    align-items: start;
    grid-column: 1 / -1;
}

.dash-goals-card {
    min-height: 0;
      height: 100%;
}

.t-header-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

.dash-goals-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 60px 24px 24px;
}

.dash-goal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dash-goal-subtitle {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 5px;
}

.dash-goal-subtitle i {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dash-goal-donut {
    position: relative;
    width: 180px;
    height: 180px;
}

.dash-goal-donut canvas {
    width: 180px !important;
    height: 180px !important;
}

.dash-goal-pct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    pointer-events: none;
}

.dash-goal-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 240px;
}

.dash-goal-legend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
}

.dash-goal-label {
    color: var(--text-muted);
    font-weight: 600;
}

.dash-goal-val {
    font-weight: 800;
    color: var(--text-main);
}

.dash-goal-val--prog {
    color: var(--primary);
}

/* ── Medallas Ranking Proveedor ─────────────────────────────── */
.medal-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.medal-oro {
    color: #ffc107;
    filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.5));
    animation: medalGlow 2s ease-in-out infinite alternate;
}

.medal-plata {
    color: #c0c0c0;
    filter: drop-shadow(0 0 4px rgba(192, 192, 192, 0.4));
}

.medal-bronce {
    color: #cd7f32;
    filter: drop-shadow(0 0 4px rgba(205, 127, 50, 0.4));
}

.medal-rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-tint);
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--text-muted);
}

@keyframes medalGlow {
    from { filter: drop-shadow(0 0 4px rgba(255, 193, 7, 0.3)); }
    to   { filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.7)); }
}

/* ── Flujo de fases del pedido (clip-path arrows) ─────────── */
.fases-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}

.fase-arrow {
    flex: 1 1 0;
    min-width: 120px;
    padding: 1.5px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.15);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}

.fase-arrow:not(:first-child) {
    margin-left: -14px;
}

.fase-arrow:first-child,
.fase-arrow:first-child .fase-arrow__inner {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.fase-arrow__inner {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 20px 12px 22px;
    text-align: center;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}

.fase-arrow__titulo {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-muted);
}

.fase-arrow__fecha {
    font-size: .85rem;
    margin-top: 4px;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
}

.fase-arrow--hecho {
    background: rgba(0, 180, 255, 0.55);
}

.fase-arrow--hecho .fase-arrow__inner {
    background: rgba(0, 180, 255, 0.12);
}

.fase-arrow--hecho .fase-arrow__titulo {
    color: var(--accent-cyan);
}

.fase-arrow--hecho .fase-arrow__fecha {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Responsive Dashboard ───────────────────────────────────── */
@media (max-width: 1200px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }
    .dash-bottom-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .kpi-stack {
        grid-template-columns: 1fr;
    }
}