:root {
    --primary: #00c1b6;
    /* Main Logo Teal */
    --primary-dark: #00a49b;
    --secondary: #1b406c;
    /* Main Logo Navy */
    --bg-dark: #0e2036;
    /* Dark BG requested */
    --bg-card: rgba(255, 255, 255, 0.05);
    --text-main: #fdfffc;
    --text-muted: #aab3c6;
    --border: rgba(102, 218, 211, 0.2);
    /* #66dad3 with opacity */
    --success: #00c1b6;
    --warning: #ff9f1c;
    --danger: #e71d36;
    --radius: 16px;
    --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --font-main: 'Outfit', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: auto;
    min-height: 100dvh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: auto;
    position: relative;
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-main);
    /* Prevent iOS rubber-banding effect from showing white */
    min-height: 100%;
}

/* Fix for iOS Safari: background-attachment: fixed is buggy */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-dark);
    z-index: -1;
    pointer-events: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Hide scrollbars on mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }
}

/* Layout */
/* Layout (Desktop Default) */
.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: transparent;
    padding-bottom: env(safe-area-inset-bottom);
}

.sidebar {
    width: 260px;
    /*background: rgba(1, 22, 39, 0.98);*/
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    z-index: 100;
}

.main-content {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 40px;
    width: 100%;
    position: relative;
    background-color: var(--bg-dark);
}

.main-content::before {
    display: none;
    /* No background logo on desktop or mobile v209 */
}

/* Hide Mobile Top Bar by default */
.app-container>.top-bar {
    display: none;
}

/* Show Desktop Brand */
.brand.desktop-only {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
}

.brand .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.brand .logo img {
    display: block;
    margin: 0 auto;
}

.brand .app-title {
    font-size: 24px;
    margin-left: 0;
}

/* Navigation Links (Desktop Default) */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    width: 100%;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.nav-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.03);
}

.nav-btn.active {
    background: linear-gradient(90deg, rgba(0, 194, 255, 0.15), transparent);
    color: var(--primary);
    border-left: 3px solid var(--primary);
    border-radius: 4px 12px 12px 4px;
}

.nav-footer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* Header inside Main Content (Desktop) */
.main-content .top-bar {
    position: relative;
    background: transparent;
    box-shadow: none;
    border-bottom: none;
    padding: 0 0 20px 0;
    height: auto;
    backdrop-filter: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

/* Desktop Media Query Removed - Now Default */

/* Sidebar Elements */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0px;
    padding: 0 12px;
}

.logo-icon {
    font-size: 24px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-align: left;
}

.nav-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.03);
}

.nav-btn.active {
    background: linear-gradient(90deg, rgba(0, 194, 255, 0.15), transparent);
    color: var(--primary);
    border-left: 3px solid var(--primary);
    border-radius: 4px 12px 12px 4px;
}

.nav-footer {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.btn-icon {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.btn-icon.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* Header */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.top-bar h2 {
    font-size: 28px;
    font-weight: 600;
}

.date-display {
    color: var(--text-muted);
    font-weight: 500;
}

/* Cards & Sections */
.section-card {
    background: rgba(30, 41, 59, 0.7);
    /* Semi-transparent for blur */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}

/* Full Width Tables for History & Production (Desktop & Mobile) */
#view-historial .section-card,
#view-produccion .section-card {
    padding-left: 0;
    padding-right: 0;
}

#view-historial .section-card .card-header,
#view-produccion .section-card .card-header,
#view-produccion .section-card .quick-actions {
    padding-left: 20px;
    padding-right: 20px;
}

#tablaRegistros,
#tablaProduccion {
    width: 100%;
}

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

/* Full Width Tables for History & Production (Desktop & Mobile) */
#view-historial .section-card,
#view-produccion .section-card {
    padding-left: 0;
    padding-right: 0;
}

#view-historial .section-card .card-header,
#view-produccion .section-card .card-header,
#view-produccion .section-card .quick-actions {
    padding-left: 20px;
    padding-right: 20px;
}

#tablaRegistros,
#tablaProduccion {
    width: 100%;
}

.table-container {
    width: 100%;
    margin: 0;
}

/* Specific adjustment for chart cards */

.section-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dashboard Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* Force 2 columns on Mobile */
    gap: 15px;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        /* Force 3 columns on Desktop */
    }
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.stat-card.primary::before {
    background: var(--primary);
}

.stat-card.success::before {
    background: var(--success);
}

.stat-card.warning::before {
    background: var(--warning);
}

.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.05);
}

.stat-card.primary .icon-box {
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.stat-card.success .icon-box {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.stat-card.warning .icon-box {
    color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-info .label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-info .value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 4px;
}

/* Forms & Inputs */
input,
select,
textarea {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    width: 100%;
    transition: all 0.2s;
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aab3c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(15, 23, 42, 0.8);
}

label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Route Card Extras */
.btn-icon-danger {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 29, 54, 0.1);
    color: #e71d36;
    border: 1px solid rgba(231, 29, 54, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
}

.btn-icon-danger:hover {
    background: #e71d36;
    color: white;
    transform: scale(1.05);
}

.btn-route-location {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 193, 182, 0.1);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 20px;
}

.btn-route-location:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 193, 182, 0.3);
}

.btn-route-location:active {
    transform: scale(0.95);
}

/* Buttons */
.btn {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-warning {
    background: var(--warning);
    color: #1a1a1a;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--text-muted);
}

.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

.full-width {
    width: 100%;
}

/* Sales Grid */
.sales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.action-group .input-group {
    display: flex;
    gap: 8px;
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}

.input-row {
    display: flex;
    gap: 8px;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

/* Delivery */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header h3 {
    margin-bottom: 0;
}

.repartidores-list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.emp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emp-header {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.emp-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

/* Tables */
.table-responsive {
    overflow-x: auto;
}

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

.modern-table th {
    text-align: left;
    padding: 16px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.modern-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

/* Ensure our specific tables are full width */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 16px;
    /* Matched padding for alignment */
    text-align: left;
    /* Ensure left align by default */
    border-bottom: 1px solid var(--border);
}

.data-table th {
    color: var(--text-muted);
    font-weight: 500;
    text-align: left;
}

/* Desktop Stability Rules */
@media (min-width: 769px) {
    .data-table {
        min-width: 850px;
    }

    .data-table th,
    .data-table td {
        white-space: nowrap;
    }

    .data-table .col-detail {
        white-space: normal !important;
        min-width: 250px;
        line-height: 1.4;
    }
}

/* Force right align only on specific columns via helper class */
.text-right {
    text-align: right !important;
    /* Force override */
}

.text-right {
    text-align: right;
}

/* Views Management */
.view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.view.active {
    display: block;
}

@keyframes pulse-dot {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

/* Pull to Refresh Indicator */
#ptr-loader {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* transition: top handled by JS for drag, CSS for release */
}

#ptr-loader .bi {
    color: var(--primary);
    font-size: 20px;
    transition: transform 0.2s;
}

#ptr-loader.refreshing .bi {
    animation: spin-ptr 1s linear infinite;
}

@keyframes spin-ptr {
    100% {
        transform: rotate(360deg);
    }
}



/* Mobile Actions */
.mobile-actions {
    display: none;
    gap: 8px;
}

/* Mobile Responsive */

/* Modern Radio Cards (Global) */
.radio-card {
    display: block;
    position: relative;
    cursor: pointer;
    margin: 0;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* WORK CALENDAR STYLES */

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 10px;
}

.calendar-header div {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 5px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.calendar-day {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s;
}

.calendar-day:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
}

.calendar-day.empty {
    background: transparent;
    border: none;
    cursor: default;
}

.day-number {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.day-icons {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.icon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 6px;
    transition: all 0.2s;
}

.icon-dot i {
    display: none;
}

/* Active States */
.icon-dot.active-truck {
    background: #2ecc71;
    /* Green */
    box-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
}

.icon-dot.active-delivery {
    background: #f1c40f;
    /* Yellow */
    box-shadow: 0 0 5px rgba(241, 196, 15, 0.5);
}

.icon-dot.active-emp {
    background: #3498db;
    /* Blue */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* Stat Badges */
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}

.stat-badge.success {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.3);
}

.stat-badge.warning {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
    border-color: rgba(241, 196, 15, 0.3);
}

.stat-badge.info {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.3);
}

/* Modal Check Cards */
.check-card {
    display: block;
    cursor: pointer;
    margin: 0;
}

.check-card input {
    display: none;
}

.check-content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.check-content i {
    font-size: 24px;
}

.check-card input:checked+.check-content {
    background: rgba(0, 194, 255, 0.1);
    border-color: var(--primary);
}

.check-card input:checked+.check-content strong {
    color: var(--primary);
}


.radio-card input:checked~.radio-label {
    background: rgba(37, 99, 235, 0.15);
    /* Primary color low opacity */
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    /* Simulate thick border */
}

.radio-card:hover .radio-label {
    background: rgba(255, 255, 255, 0.06);
}

.radio-label i {
    font-size: 18px;
}

@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }

    /* Responsive Table for Registros (History) */
    #tablaRegistros thead {
        display: none;
    }

    #tablaRegistros tbody,
    #tablaRegistros tr,
    #tablaRegistros td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #tablaRegistros tr {
        margin-bottom: 15px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        padding: 10px;
        margin-left: 10px;
        margin-right: 10px;
        width: auto;
        /* Allow full width within its container */
    }

    #tablaRegistros td {
        text-align: right;
        padding: 8px 10px;
        padding-left: 40%;
        /* Make space for the label */
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    #tablaRegistros td:last-child {
        border-bottom: none;
    }

    #tablaRegistros td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 8px;
        width: 40%;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: var(--text-muted);
    }

    /* Responsive Table for Produccion (Stacked Cards) */
    /* Target generic data-table inside produccion view OR specific ID */
    #view-produccion .data-table,
    #view-produccion .data-table tbody,
    #view-produccion .data-table tr,
    #view-produccion .data-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #view-produccion .data-table thead {
        display: none !important;
    }

    #view-produccion .data-table tr {
        margin-bottom: 15px !important;
        border: 1px solid var(--border);
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 10px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: auto !important;
    }

    #view-produccion .data-table td {
        text-align: right !important;
        padding: 8px 10px !important;
        padding-left: 40% !important;
        position: relative !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    #view-produccion .data-table td:last-child {
        border-bottom: none;
    }

    #view-produccion .data-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 8px;
        width: 40%;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: var(--text-muted);
    }

    /* Full Width History Card Fix */
    /* Bottom Navigation */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 0 0;
        /* As requested */
        /*background: rgba(15, 23, 42, 0.98);*/
        border-right: none;
        border-top: 1px solid var(--border);
        z-index: 1000;
        justify-content: space-between;
        overflow-y: visible;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        padding-bottom: env(safe-area-inset-bottom);
        /* Handle iPhone X notch */
    }


    .app-title {
        display: none;
    }

    .brand,
    .nav-footer {
        display: none;
    }

    .nav-links {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        gap: 0;
        padding: 4px 8px;
        /* As requested */
    }

    .nav-btn {
        flex-direction: column;
        gap: 4px;
        padding: 8px 4px;
        font-size: 10px;
        border-radius: 8px;
        text-align: center;
        flex: 1;
        justify-content: center;
    }

    .nav-btn i {
        font-size: 20px;
        margin-bottom: 2px;
    }

    .nav-btn.active {
        border-left: none;
        border-top: 3px solid var(--primary);
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.1), transparent);
        border-radius: 0;
        color: var(--primary);
    }

    /* Main Content */
    /* Main Content */
    /* Main Content */
    .main-content {
        order: 1;
        width: 100%;
        /* Top: 8px, Right: 16px, Bottom: 80px, Left: 16px */
        padding: 0px 18px 70px 18px;
        margin: 0;
        position: relative;
        z-index: 1;
    }

    /* Background Logo Watermark REMOVED v209 */
    /*
    .main-content::before {
        content: '';
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 60%;
        background-image: url('../img/logo.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.05;
        z-index: 0;
        pointer-events: none;
    }
    */

    /* Header */
    .top-bar {
        display: flex;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
        z-index: 1000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        height: 110px;
        margin-bottom: 20px;
    }

    .header-actions {
        display: flex;
        gap: 10px;
    }


    #btnMobileLogout {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: var(--text-muted);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #btnMobileLogout:active {
        background: rgba(239, 68, 68, 0.2);
        color: var(--danger);
        transform: scale(0.95);
    }

    .top-bar h2 {
        font-size: 20px;
    }

    .date-display {
        font-size: 12px;
    }

    .mobile-actions {
        display: flex;
        margin-right: 8px;
    }

    /* Grid & Layouts */
    .sales-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .input-row {
        flex-direction: column;
    }

    .input-row .flex-1,
    .input-row .flex-2 {
        width: 100%;
    }

    .quick-actions .action-group {
        flex-direction: column;
    }

    .quick-actions .input-group {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        /* 2 Columns on mobile FORCE */
        gap: 12px;
    }

    .stat-card {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .stat-card .icon-box {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .stat-info .value {
        font-size: 18px;
    }

    /* Tables */
    .modern-table th,
    .modern-table td {
        padding: 10px;
        font-size: 12px;
    }
}

/* Reports Grid & Spacing */
.report-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.section-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}

.filters-bar {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 150px;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.chart-card {
    min-height: 400px;
    position: relative;
}

.summary-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.big-stat {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.big-stat .currency {
    font-size: 16px;
    margin-top: 8px;
    color: var(--text-muted);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.stat-row:last-child {
    border-bottom: none;
}

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

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-actions {
        margin-top: 8px;
    }

    /* History View Mobile Fixes */
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .card-header h3 {
        width: 100%;
        margin-bottom: 4px;
    }

    .card-header>div {
        width: 100%;
        flex-wrap: wrap;
    }

    #historyDateInput {
        flex: 1;
        min-width: 150px;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 9999;
    /* Extremely high z-index */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--bg-card);
    width: 100%;
    max-width: 600px;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    /* Improved mobile height */
    overflow: hidden;
    /* Ensure rounded corners */
}

.modal-header {
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    /* Keep header fixed */
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    /* Enable scrolling for body */
    flex: 1;
    /* Take remaining space */
}

/* Suggestions List */
#suggestionsList {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    z-index: 10000;
    /* Higher than everything else */
    top: 100%;
    left: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    display: none;
    /* Hidden by default */
}

.suggestion-item {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted);
    transition: background 0.2s;
}

.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}

.suggestion-item:last-child {
    border-bottom: none;
}

/* SWEETALERT2 Z-INDEX FIX */
.swal2-container {
    z-index: 20000 !important;
}

/* --- Modern Reports Filters (Step 4357) --- */
.filter-pills-row {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 5px;
    /* Space for scrollbar if any */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    flex-wrap: nowrap;
    /* Force single line */
}

.filter-pills-row::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.filter-pill {
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-pill:hover {
    background: var(--bg-lighter);
    color: var(--text-main);
    border-color: var(--text-muted);
}

.filter-pill.active {
    background: linear-gradient(135deg, var(--primary) 0%, #0099cc 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(0, 194, 255, 0.3);
}

.date-range-picker {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Mobile History Cards (Responsive Table) --- */
@media (max-width: 768px) {

    /* Hide Table Header */
    #tablaRegistros thead {
        display: none;
    }

    /* Card Style for Rows */
    #tablaRegistros tbody tr {
        display: block;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 12px;
        position: relative;
    }

    /* Flex Layout for Cells */
    #tablaRegistros td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border: none !important;
        font-size: 14px;
        color: var(--text-muted);
    }

    #tablaRegistros td strong {
        color: var(--text-main);
    }

    /* Identifying Cells */
    /* Assumes order: ID, User, Type, Detail, Qty, Total, Actions */
    /* We need to use nth-child or classes. We will add classes in JS renderTableRows */

    /* COLLAPSED STATE (Default) */
    /* Hide: ID, User, Qty, Actions */
    /* Show: Type (Icon), Detail, Total, Date (if added) */

    .history-card .col-id,
    .history-card .col-user,
    .history-card .col-qty,
    .history-card .col-actions,
    .history-card .col-delete {
        display: none !important;
    }

    /* Special Layout for Header Row in Card (Type + Date + Total) */
    .history-card .col-type {
        order: 1;
        width: 100%;
        margin-bottom: 8px;
        font-weight: 600;
        color: var(--text-main);
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .history-card .col-detail {
        order: 2;
        width: 100%;
        margin-bottom: 8px;
        color: var(--text-muted);
        display: block !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .history-card .col-total {
        order: 3;
        font-size: 1.1em;
        font-weight: bold;
        color: var(--success);
        display: block !important;
    }

    .history-card .col-date {
        order: 4;
        font-size: 0.85em;
        display: block !important;
    }

    /* Trigger Button */
    .card-expand-btn {
        display: block !important;
        /* Show only on mobile */
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: var(--text-main);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s;
    }

    /* EXPANDED STATE */
    .history-card.expanded .col-id,
    .history-card.expanded .col-user,
    .history-card.expanded .col-qty,
    .history-card.expanded .col-actions,
    .history-card.expanded .col-delete {
        display: flex !important;
        order: 10;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding-top: 8px !important;
        margin-top: 4px;
    }

    .history-card.expanded .col-detail {
        white-space: normal;
        /* Wrap text */
    }

    .history-card.expanded .card-expand-btn {
        transform: rotate(180deg);
        background: var(--primary);
    }
}

.card-expand-btn {
    display: none;
}

/* Hide on Desktop */

/* --- Fix Mobile History Visibility (Step 4528) --- */
@media (max-width: 768px) {

    /* Explicitly hide extra columns on mobile default view */
    .history-card .col-time,
    .history-card .col-price,
    .history-card .col-qty {
        display: none !important;
    }

    /* Handle Actions Column: visible container, but hide delete button by default */
    .history-card .col-actions {
        display: block !important;
        /* Must be visible for absolute button */
        padding: 0 !important;
        /* Reset padding to avoid spacing issues */
        height: 0;
        /* Minimal height */
        overflow: visible;
        /* Allow button to overflow */
    }

    .history-card .col-actions .delete-btn {
        display: none !important;
        /* Hide Delete Button */
    }

    /* EXPANDED STATE overrides */
    .history-card.expanded .col-time,
    .history-card.expanded .col-price,
    .history-card.expanded .col-qty {
        display: flex !important;
        order: 10;
        width: 100%;
        justify-content: space-between;
        margin-top: 4px;
        color: var(--text-muted);
    }

    .history-card.expanded .col-actions {
        height: auto !important;
        padding: 12px !important;
        margin-top: 8px;
        order: 12;
        display: flex !important;
        justify-content: flex-end;
        /* Align delete button */
    }

    .history-card.expanded .col-actions .delete-btn {
        display: inline-block !important;
        /* Show Delete Button */
        background: rgba(231, 76, 60, 0.1) !important;
        color: #e74c3c !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
    }

    /* Ensure Expand Button stays visible */
    .history-card .card-expand-btn {
        z-index: 10;
    }
}

/* --- Force Mobile History Visibility (Stronger Selector) --- */
@media (max-width: 768px) {

    /* Target via TR ID or specific class to override any flex rules */
    table#tablaRegistros tr.history-card td.col-time,
    table#tablaRegistros tr.history-card td.col-price,
    table#tablaRegistros tr.history-card td.col-qty {
        display: none !important;
    }

    /* Actions Column needs to be 'visible' but empty/hidden content */
    table#tablaRegistros tr.history-card td.col-actions {
        display: block !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        position: static;
        /* Let the absolute button work relative to TR */
    }

    /* Hide the Delete Button specifically inside the collapsed state */
    table#tablaRegistros tr.history-card:not(.expanded) td.col-actions .delete-btn {
        display: none !important;
    }
}

/* --- FINAL FIX Mobile History (Step 4552) --- */
@media (max-width: 768px) {

    /* Ensure the table cell ITSELF is hidden, not just content */
    #tablaRegistros tr.history-card .col-time,
    #tablaRegistros tr.history-card .col-price,
    #tablaRegistros tr.history-card .col-qty {
        display: none !important;
    }

    /* Actions Column: Hide container completely in collapsed state */
    /* Wait, if we hide the container, we hide the expand button if it is inside? */
    /* Yes. We moved the expand button inside .col-actions in JS. */
    /* So .col-actions MUST be visible. */

    #tablaRegistros tr.history-card .col-actions {
        display: block !important;
        position: absolute;
        bottom: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        pointer-events: none;
        /* Let clicks pass through if needed, but button needs events */
    }

    /* Re-enable pointer events for the buttons inside */
    #tablaRegistros tr.history-card .col-actions button {
        pointer-events: auto;
    }

    /* Hide Delete Button explicitly in collapsed state */
    #tablaRegistros tr.history-card:not(.expanded) .col-actions .delete-btn {
        display: none !important;
    }

    /* Style the Expand Button to appear correctly */
    #tablaRegistros tr.history-card .card-expand-btn {
        display: flex !important;
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: var(--text-main);
        cursor: pointer;
    }

    /* EXPANDED STATE Overrides */
    #tablaRegistros tr.history-card.expanded {
        padding-bottom: 50px;
        /* Make room for actions at bottom */
    }

    #tablaRegistros tr.history-card.expanded .col-actions {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        height: auto !important;
        display: flex !important;
        justify-content: flex-end;
        gap: 10px;
        padding-top: 10px !important;
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #tablaRegistros tr.history-card.expanded .col-actions .delete-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: rgba(231, 76, 60, 0.2) !important;
        color: #e74c3c !important;
        padding: 8px 16px !important;
        border-radius: 8px;
        height: 36px;
    }
}

/* --- ULTIMATE FIX for Mobile History (Step 4574) --- */
@media (max-width: 768px) {

    /* 1. Remove pseudo-element CONTENT for Actions column to hide "Acción" text */
    #tablaRegistros tr.history-card td.col-actions:before {
        content: none !important;
        display: none !important;
    }

    /* 2. Positioning: Reset Actions Column to be a clickable overlay or contained box */
    #tablaRegistros tr.history-card .col-actions {
        display: flex !important;
        position: absolute;
        bottom: 8px;
        /* Slightly higher from bottom edge */
        right: 8px;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 5;
    }

    /* 3. Expand Button Styling */
    .history-card .card-expand-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--text-main);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* 4. EXPANDED LOGIC - Force display of hidden columns */
    /* Using generic sibling selector or precise targeting */

    tr.history-card.expanded td.col-time,
    tr.history-card.expanded td.col-price,
    tr.history-card.expanded td.col-qty {
        display: flex !important;
        /* Make them visible */
        width: 100%;
        margin-top: 8px;
        border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
        padding-top: 8px !important;
        color: var(--text-muted);
        font-size: 0.9em;
        /* Order them at the bottom */
        order: 100;
    }

    tr.history-card.expanded .col-actions {
        /* When expanded, move delete button to a visible spot */
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        width: 100% !important;
        justify-content: space-between !important;
        /* Spacing */
        padding-top: 15px !important;
        margin-top: 10px;
        order: 200;
        /* At very bottom */
    }

    /* Hide Delete Button when NOT expanded */
    tr.history-card:not(.expanded) .delete-btn {
        display: none !important;
    }

    /* Show Delete Button when Expanded */
    tr.history-card.expanded .delete-btn {
        display: inline-flex !important;
        padding: 6px 12px;
        background: rgba(231, 76, 60, 0.2);
        color: #e74c3c;
        border-radius: 6px;
        font-size: 14px;
        align-items: center;
        gap: 5px;
    }
}

/* --- FIX EXPAND VISIBILITY (Step 4584) --- */
@media (max-width: 768px) {
    /* WE MUST BEAT THE SPECIFICITY of the previous hide rule (table#tablaRegistros ...) */

    table#tablaRegistros tr.history-card.expanded td.col-time,
    table#tablaRegistros tr.history-card.expanded td.col-price,
    table#tablaRegistros tr.history-card.expanded td.col-qty {
        display: flex !important;
        width: 100%;
        justify-content: space-between;
        /* Label left, value right */
        margin-top: 4px;
        padding: 8px 0 !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
        color: var(--text-muted);
        font-size: 0.9em;
        order: 50;
        /* Ensure order */
    }

    /* Add pseudo-label if missing (optional, but data-label is there) */
    table#tablaRegistros tr.history-card.expanded td.col-time:before,
    table#tablaRegistros tr.history-card.expanded td.col-price:before,
    table#tablaRegistros tr.history-card.expanded td.col-qty:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        margin-right: 10px;
    }
}

/* --- Fix Expanded Layout (Side by Side) (Step 4592) --- */
@media (max-width: 768px) {
    /* Target the expanded rows specifically */

    table#tablaRegistros tr.history-card.expanded td.col-time,
    table#tablaRegistros tr.history-card.expanded td.col-price,
    table#tablaRegistros tr.history-card.expanded td.col-qty {
        display: flex !important;
        flex-direction: row !important;
        /* Force Horizontal */
        justify-content: space-between !important;
        /* Label Left, Value Right */
        align-items: center !important;
        width: 100% !important;
        text-align: right !important;
        /* Align content properly */
    }

    /* Ensure label is on left */
    table#tablaRegistros tr.history-card.expanded td.col-time:before,
    table#tablaRegistros tr.history-card.expanded td.col-price:before,
    table#tablaRegistros tr.history-card.expanded td.col-qty:before {
        /* Ensure content is treated as block/inline-block */
        display: inline-block;
        text-align: left;
        margin-right: auto;
        /* Push label to far left */
    }
}

/* --- ULTIMATE ALIGNMENT FIX (Step 4600) --- */
.mobile-label {
    display: none;
}

/* Hide on Desktop */

@media (max-width: 768px) {

    /* 1. Force the cells to be BLOCK containers (or Flex Row) */
    table#tablaRegistros tr.history-card.expanded td.col-time,
    table#tablaRegistros tr.history-card.expanded td.col-price,
    table#tablaRegistros tr.history-card.expanded td.col-qty,
    table#tablaRegistros tr.history-card.expanded td.col-modalidad-mobile {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        text-align: left !important;
        padding: 8px 0 !important;
    }

    /* Explicitly style the new Modality Mobile Row */
    table#tablaRegistros tr.history-card.expanded td.col-modalidad-mobile {
        border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
        margin-top: 4px;
        order: 51;
        /* After Time (50) */
    }

    /* Hide Modalidad Mobile Row when collapsed */
    table#tablaRegistros tr.history-card:not(.expanded) td.col-modalidad-mobile {
        display: none !important;
    }

    /* 2. Style the Label (Left) */
    .history-card.expanded .mobile-label {
        display: inline-block !important;
        font-weight: 600;
        color: var(--text-muted);
        min-width: 80px;
        /* Consisten width */
    }

    /* 3. Style the Value (Right) */
    .history-card.expanded .cell-value {
        display: inline-block;
        text-align: right;
        margin-left: auto;
        /* Push to right */
        color: var(--text-main);
    }

    /* Remove pseudo-elements to prevent duplication/overlapping */
    table#tablaRegistros tr.history-card.expanded td:before {
        display: none !important;
        content: none !important;
    }
}

/* --- CLICKABLE CARD & DISAPPEAR FIX (Step 4611) --- */
@media (max-width: 768px) {

    /* 1. Ensure MAIN fields (Date, Type, Detail, Total) NEVER disappear */
    /* They should be visible in both default and expanded states */
    table#tablaRegistros tr.history-card td.col-date,
    table#tablaRegistros tr.history-card td.col-type,
    table#tablaRegistros tr.history-card td.col-detail,
    table#tablaRegistros tr.history-card td.col-total {
        display: flex !important;
        /* or block depending on layout */
        /* keep existing order or layout */
    }

    /* 2. Style the Hidden Fields (Time, Qty, Price) */
    /* Default: Hidden */
    table#tablaRegistros tr.history-card:not(.expanded) td.col-time,
    table#tablaRegistros tr.history-card:not(.expanded) td.col-qty,
    table#tablaRegistros tr.history-card:not(.expanded) td.col-price {
        display: none !important;
    }

    /* Expanded: Visible & Styled as rows */
    table#tablaRegistros tr.history-card.expanded td.col-time,
    table#tablaRegistros tr.history-card.expanded td.col-qty,
    table#tablaRegistros tr.history-card.expanded td.col-price {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px 0 !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.05) !important;
        margin-top: 4px;
        order: 50;
        /* Ensure they appear BELOW the main content */
    }

    /* 3. Actions Column (Delete button) */
    table#tablaRegistros tr.history-card .col-actions {
        display: none !important;
        /* Hide normally */
    }

    table#tablaRegistros tr.history-card.expanded .col-actions {
        display: flex !important;
        justify-content: flex-end;
        width: 100%;
        margin-top: 15px;
        order: 100;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    table#tablaRegistros tr.history-card.expanded .delete-btn {
        display: inline-flex !important;
        background: rgba(231, 76, 60, 0.15) !important;
        color: #e74c3c !important;
        padding: 8px 16px;
        border-radius: 8px;
        border: 1px solid rgba(231, 76, 60, 0.3) !important;
        font-weight: 500;
        font-size: 14px;
        gap: 8px;
    }

    /* Add text "Eliminar" to button when expanded */
    table#tablaRegistros tr.history-card.expanded .delete-btn:after {
        content: "Eliminar Venta";
    }

    /* Active State indicator */
    table#tablaRegistros tr.history-card.expanded {
        background: rgba(255, 255, 255, 0.08) !important;
        /* Highlight expanded */
        border: 1px solid var(--primary) !important;
    }
}

/* --- FINAL FORCE CSS (Buttons & Layout) --- */
@media (max-width: 768px) {

    /* FORCE BUTTON VISIBILITY & STYLE */
    html body table#tablaRegistros tr.history-card.expanded td.col-actions .edit-btn,
    html body table#tablaRegistros tr.history-card.expanded td.col-actions .delete-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
        min-width: 100px !important;
        height: 40px !important;
    }

    /* EDIT BUTTON COLOR */
    html body table#tablaRegistros tr.history-card.expanded td.col-actions .edit-btn {
        background: #0984e3 !important;
        /* Solid Blue */
        color: white !important;
        border: none !important;
    }

    /* DELETE BUTTON COLOR */
    html body table#tablaRegistros tr.history-card.expanded td.col-actions .delete-btn {
        background: #d63031 !important;
        /* Solid Red */
        color: white !important;
        border: none !important;
    }

    /* ICONS */
    html body table#tablaRegistros tr.history-card.expanded .edit-btn i,
    html body table#tablaRegistros tr.history-card.expanded .delete-btn i {
        font-size: 1.2em !important;
        margin-right: 5px !important;
    }

    /* TEXT LABELS (Ensure they appear) */
    html body table#tablaRegistros tr.history-card.expanded .edit-btn:after {
        content: " EDITAR " !important;
    }

    html body table#tablaRegistros tr.history-card.expanded .delete-btn:after {
        content: " ELIMINAR " !important;
    }

    /* HIDE when NOT expanded (Crucial) */
    html body table#tablaRegistros tr.history-card:not(.expanded) .edit-btn,
    html body table#tablaRegistros tr.history-card:not(.expanded) .delete-btn {
        display: none !important;
    }

    /* FIX LAYOUT ALIGNMENT */
    html body table#tablaRegistros tr.history-card td.col-detail {
        text-align: left !important;
        padding-left: 0 !important;
    }
}

/* --- ULTIMATE REFACTOR: Mobile History Card (Step 4792) --- */
@media (max-width: 768px) {

    /* 1. KILL ALL DATA-LABEL PSEUDO ELEMENTS */
    /* This overrides any previous rule adding content: attr(data-label) */
    #tablaRegistros td:before,
    #tablaRegistros td::before {
        content: none !important;
        display: none !important;
    }

    /* 2. RESET TABLE DISPLAY TO BLOCK/FLEX */
    table#tablaRegistros,
    table#tablaRegistros tbody,
    table#tablaRegistros tr.history-card {
        display: block !important;
        width: 100% !important;
    }

    /* 3. CARD CONTAINER STYLE */
    table#tablaRegistros tr.history-card {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        padding: 16px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

        /* Flex Column Layout */
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        position: relative;
    }

    /* 4. RESET CELLS */
    table#tablaRegistros tr.history-card td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        text-align: left !important;
        background: transparent !important;
    }

    /* --- LAYOUT ORDERING & STYLING --- */

    /* ROW 1: HEADER (Type + Date) */
    /* We'll float Type Left and Date Right using a hacks or absolute? 
       Better: Use Flex order and sizing */

    /* TYPE: Order 1 */
    table#tablaRegistros tr.history-card td.col-type {
        order: 1;
        display: flex !important;
        align-items: center;
        margin-bottom: 4px !important;
    }

    .service-type {
        font-size: 0.9em;
        padding: 4px 10px;
        border-radius: 20px;
    }

    /* DATE: Order 2 - Position Absolute Top Right for perfect alignment */
    table#tablaRegistros tr.history-card td.col-date {
        position: absolute;
        top: 16px;
        right: 16px;
        width: auto !important;
        font-size: 0.85em;
        color: var(--text-muted);
        font-weight: 500;
    }

    /* ROW 2: DETAIL (Order 3) */
    table#tablaRegistros tr.history-card td.col-detail {
        order: 3;
        font-size: 1.1em;
        font-weight: 500;
        color: #fff;
        margin-bottom: 8px !important;
        line-height: 1.4;
    }

    /* ROW 3: HIDDEN INFO (Time, Qty, Price) - Order 4 */
    /* Only visible when expanded */

    /* Container for these stats */
    table#tablaRegistros tr.history-card td.col-time,
    table#tablaRegistros tr.history-card td.col-qty,
    table#tablaRegistros tr.history-card td.col-price {
        order: 4;
        font-size: 0.9em;
        color: var(--text-muted);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        /* Separator lines */
        padding: 6px 0 !important;
    }

    /* Hide by default */
    table#tablaRegistros tr.history-card:not(.expanded) td.col-time,
    table#tablaRegistros tr.history-card:not(.expanded) td.col-qty,
    table#tablaRegistros tr.history-card:not(.expanded) td.col-price {
        display: none !important;
    }

    /* Make them look good when expanded */
    table#tablaRegistros tr.history-card.expanded td.col-time,
    table#tablaRegistros tr.history-card.expanded td.col-qty,
    table#tablaRegistros tr.history-card.expanded td.col-price {
        display: flex !important;
        justify-content: space-between;
    }

    /* Ensure internal spans (label/value) work */
    .mobile-label {
        color: var(--text-muted);
    }

    .cell-value {
        color: var(--text-main);
        font-weight: 600;
    }


    /* ROW 4: TOTAL (Order 5) - Always visible at bottom of content */
    table#tablaRegistros tr.history-card td.col-total {
        order: 5;
        margin-top: 4px !important;
        text-align: right !important;
        /* Right aligned */
        font-size: 1.4em !important;
        font-weight: 800;
        color: var(--success);
        /* Add a top border if expanded to separate from details */
    }

    table#tablaRegistros tr.history-card.expanded td.col-total {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 8px !important;
        margin-top: 8px !important;
    }

    /* ROW 5: ACTIONS (Order 6) */
    table#tablaRegistros tr.history-card td.col-actions {
        order: 6;
        width: 100% !important;
        margin-top: 12px;
    }

    /* Hide actions container if closed */
    table#tablaRegistros tr.history-card:not(.expanded) td.col-actions {
        display: none !important;
    }

    /* Show flex row if expanded */
    table#tablaRegistros tr.history-card.expanded td.col-actions {
        display: flex !important;
        gap: 12px;
        justify-content: space-between;
    }

    /* Force Buttons to Fill width */
    table#tablaRegistros tr.history-card.expanded .edit-btn,
    table#tablaRegistros tr.history-card.expanded .delete-btn {
        flex: 1;
        justify-content: center;
    }
}

/* --- ULTIMATE REFACTOR v2: Centering & Cleanup (Step 4858) --- */
@media (max-width: 768px) {

    /* 1. FORCE KILL ALL LABELS AGAIN (Specific to #tablaRegistros) */
    html body #tablaRegistros td:before,
    html body #tablaRegistros td::before,
    html body #tablaRegistros tr.history-card td:before {
        content: "" !important;
        display: none !important;
    }

    /* 2. CENTER ALIGNMENT FOR DETAIL & TOTAL & TYPE */
    /* Type (Icon + Text) -> Center explicitly */
    table#tablaRegistros tr.history-card td.col-type {
        justify-content: flex-start;
        /* Keep Type on Left as per image, or Center? Img showed Gasto Left. */
        /* User said "la otra informacion no está sentrada" in expanded view.
           In expanded view img: "Camión" was centered. "Fatima" was passed left.
           If user wants "Fatima" centered: */
    }

    /* CENTER DETAIL TEXT */
    table#tablaRegistros tr.history-card td.col-detail {
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        width: 100%;
    }

    /* CENTER TOTAL TEXT */
    table#tablaRegistros tr.history-card td.col-total {
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        width: 100%;
        margin-top: 8px !important;
    }

    /* COLLAPSED STATE FIXES */
    /* Ensure clean single line for Type/Date */
    table#tablaRegistros tr.history-card td.col-date {
        /* Keep Absolute Right */
        top: 16px;
        right: 16px;
    }
}

/* --- FINAL CENTERING (Type & Date) Step 4889 --- */
@media (max-width: 768px) {

    /* 1. TYPE (Icon): Center It */
    table#tablaRegistros tr.history-card td.col-type {
        order: 1 !important;
        width: 100% !important;
        justify-content: center !important;
        /* CENTERED */
        margin-bottom: 4px !important;
        display: flex !important;
    }

    /* 2. DATE: Remove Absolute, Center It */
    table#tablaRegistros tr.history-card td.col-date {
        position: relative !important;
        /* No longer absolute */
        top: auto !important;
        right: auto !important;
        order: 2 !important;
        /* Below Type */
        width: 100% !important;
        text-align: center !important;
        /* CENTERED */
        display: block !important;
        margin-bottom: 8px !important;
        color: var(--text-muted);
        font-size: 0.85em;
    }

    /* 3. DETAIL: Keep Centered (Order 3) */
    /* Already done in previous step */
}

/* --- ULTIMATE REFACTOR v3: Styling & Overflow (Step 4911) --- */
@media (max-width: 768px) {

    /* 1. OVERFLOW FIX: Ensure box-sizing and control width */
    html body table#tablaRegistros tr.history-card {
        width: calc(95% - 2px) !important;
        /* Subtract potential borders */
        margin-left: 8px !important;
        margin-right: 8px !important;
        box-sizing: border-box !important;
    }

    /* 2. COLOR CODING (Borders & Tints) */

    /* CAMION: Blue/Cyan */
    table#tablaRegistros tr.history-card.venta-camion {
        border-left: 4px solid #0984e3 !important;
        background: rgba(9, 132, 227, 0.05) !important;
    }

    /* GASTO: Red */
    table#tablaRegistros tr.history-card.venta-gasto {
        border-left: 4px solid #d63031 !important;
        background: rgba(214, 48, 49, 0.05) !important;
    }

    /* LOCAL: Green */
    table#tablaRegistros tr.history-card.venta-local {
        border-left: 4px solid #00b894 !important;
        background: rgba(0, 184, 148, 0.05) !important;
    }

    /* --- (Premium Client Styles removed from here and moved to bottom) --- */
}

/* DELIVERY: Orange */
table#tablaRegistros tr.history-card.venta-delivery {
    border-left: 4px solid #e17055 !important;
    background: rgba(225, 112, 85, 0.05) !important;
}

/* MIXTO: Purple */
table#tablaRegistros tr.history-card.venta-mixto {
    border-left: 4px solid #6c5ce7 !important;
    background: rgba(108, 92, 231, 0.05) !important;
}


/* 3. RED TOTAL FOR GASTOS (As requested) */
table#tablaRegistros tr.history-card.venta-gasto td.col-total {
    color: #ff7675 !important;
    /* Lighter Red for dark theme readability */
    font-weight: 900 !important;
}


/* --- DESKTOP TABLE & BUTTON FIXES (Step 4937) --- */

/* 1. Global Edit/Delete Button Styles (Desktop + Mobile Base) */
.edit-btn,
.delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

/* Specific Colors */
.edit-btn {
    background: rgba(0, 194, 255, 0.1);
    color: var(--primary);
    border: 1px solid transparent;
}

.edit-btn:hover {
    background: var(--primary);
    color: white;
}

.delete-btn {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid transparent;
}

.delete-btn:hover {
    background: #e74c3c;
    color: white;
}

/* 2. Text Alignment Fix for Table Headers */
/* Ensure header alignment matches body alignment (Left by default, Right for numbers) */
#tablaRegistros th:nth-child(5),
/* Cant */
#tablaRegistros th:nth-child(6),
/* Precio */
#tablaRegistros th:nth-child(7)

/* Total */
    {
    text-align: right !important;
}

/* Ensure body matches (renderTableRows uses .text-right class, but just in case) */
#tablaRegistros td:nth-child(5),
#tablaRegistros td:nth-child(6),
#tablaRegistros td:nth-child(7) {
    text-align: right !important;
}

/* 3. Action Column Center */
#tablaRegistros th:nth-child(8),
#tablaRegistros td:nth-child(8) {
    text-align: center !important;
}

/* --- BUTTON UPGRADE: Modern Edit Button (Step 5038) --- */
@media (min-width: 769px) {

    /* Only Desktop for "más bonito" request on web version */
    .edit-btn {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
        color: white !important;
        border: none !important;
        padding: 8px 16px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 15px rgba(0, 194, 255, 0.3);
        transition: transform 0.2s, box-shadow 0.2s;
        text-transform: uppercase;
        font-size: 12px !important;
        letter-spacing: 0.5px;
    }

    .edit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 194, 255, 0.5);
    }

    .edit-btn i {
        margin-right: 5px;
    }

    .edit-btn:after {
        content: " Editar";
        /* Add label */
    }
}

/* --- BUTTON UPGRADE: Modern Delete Button (Step 5062) --- */
@media (min-width: 769px) {
    .delete-btn {
        background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%) !important;
        /* Or a solid red gradient */
        background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%) !important;
        color: white !important;
        border: none !important;
        padding: 8px 16px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3);
        transition: transform 0.2s, box-shadow 0.2s;
        text-transform: uppercase;
        font-size: 12px !important;
        letter-spacing: 0.5px;
        margin-left: 8px;
        /* Spacing from edit button */
    }

    .delete-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 75, 43, 0.5);
    }

    .delete-btn i {
        margin-right: 5px;
    }

    /* Add label text? Let's add it for consistency with Edit */
    .delete-btn:after {
        content: " Eliminar";
    }
}

/* --- FINAL BUTTON POLISH: Size & Spacing (Retry Step 5074) --- */
@media (min-width: 769px) {

    /* SHARED STYLES FOR CONSISTENCY */
    .edit-btn,
    .delete-btn {
        width: 100px !important;
        /* Fixed width for uniformity */
        justify-content: center !important;
        margin: 0 8px !important;
        /* Increased spacing between buttons */
        display: inline-flex !important;
        /* Ensure flex behavior */
    }
}

/* --- Mobile Fine-tuning --- */
/* --- Modalidad Column & Badge --- */
.modalidad-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
}

.modalidad-badge.solo {
    background: rgba(46, 134, 222, 0.15);
    /* Blue tint */
    color: #2e86de;
    border: 1px solid rgba(46, 134, 222, 0.3);
}

.modalidad-badge.ayudante {
    background: rgba(255, 159, 67, 0.15);
    /* Orange tint */
    color: #ff9f43;
    border: 1px solid rgba(255, 159, 67, 0.3);
}

/* --- Mobile/Tablet Layout ( < 1024px ) --- */
@media (max-width: 1023px) {

    /* Hide the Modalidad header column on mobile */
    .data-table th:nth-child(4) {
        display: none !important;
    }

    /* Override for Modalidad Cell to become a floating badge */
    .data-table td.col-modalidad {
        display: block !important;
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        padding: 0 !important;
        border: none !important;
        width: auto !important;
        z-index: 10;
        background: transparent !important;
    }

    /* Modify badge style specifically for mobile 'floating' look */
    .data-table td.col-modalidad .modalidad-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
        background: #2e86de !important;
        /* Solid Blue background as requested */
        color: white !important;
        border: none !important;
    }

    /* Ensure other cards keep rendering correctly */
    .history-card {
        position: relative;
        /* Context for absolute positioning */
    }

    /* Force 2 Columns for all mobile/tablet devices */
    #view-dashboard .stats-grid,
    #view-reportes .stats-grid,
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ensure cards fit in the grid columns */
    .stat-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Font sizing for tight spaces */
    .stat-info .label {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stat-info .value {
        font-size: 15px !important;
    }
}

/* --- MOBILE CALENDAR FIX --- */
@media (max-width: 480px) {
    .calendar-grid {
        gap: 2px !important;
    }

    .calendar-day {
        padding: 2px !important;
        border-radius: 4px !important;
        min-height: 40px !important;
    }

    .day-number {
        font-size: 10px !important;
        margin-bottom: 2px;
    }

    .day-icons {
        gap: 1px !important;
        flex-wrap: wrap;
        /* Allow wrap if needed, or just shrink */
    }

    .icon-dot {
        width: 6px !important;
        height: 6px !important;
    }

    .calendar-header {
        margin-bottom: 5px !important;
    }

    .calendar-header div {
        font-size: 10px !important;
        padding: 2px !important;
    }

    /* Mobile Modal Tweaks */
    .small-modal {
        max-width: 90% !important;
        padding: 15px !important;
    }

    .check-content {
        padding: 10px !important;
        gap: 10px !important;
    }

    .check-content i {
        font-size: 18px !important;
    }

    .check-content strong {
        font-size: 14px;
    }

    .check-content small {
        font-size: 11px;
    }
}

/* Small Modal Desktop */
.small-modal {
    max-width: 400px;
}

/* --- MOBILE DRAWER & NAVIGATION REFACTOR --- */

.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }

    .mobile-only {
        display: flex !important;
    }

    /* Fix Bottom Bar Item Sizing */
    .sidebar .nav-btn {
        min-width: 0;
        /* Allow shrinking */
        padding: 6px 2px;
    }

    .sidebar .nav-btn span {
        font-size: 9px;
        /* Smaller text for compact fit */
    }
}

/* Drawer Styles */
/* Drawer Styles - Flattened & Cleaned */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0);
    z-index: 99999999 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: background 0.3s ease, opacity 0.3s ease;
}

.mobile-drawer.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.50);
    pointer-events: auto;
}

.drawer-content {
    width: 100%;
    /*background: #1e293b;*/
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(50px + env(safe-area-inset-bottom)) 20px;
    max-height: 85dvh;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 100000 !important;
}

.mobile-drawer.active .drawer-content {
    transform: translateY(0);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.drawer-header h3 {
    font-size: 18px;
    color: var(--text-main);
    margin: 0;
}

/* RESTORING PRODUCTION STYLES with LAYOUT GUARDS */
.drawer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px !important;
}

.drawer-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    height: 90px !important;
    /* Reduced from 100px */
    width: 100% !important;
    position: relative !important;
    z-index: 2000 !important;
}

.drawer-btn .icon-box {
    background: rgba(0, 194, 255, 0.1) !important;
    color: var(--primary) !important;
    width: 36px !important;
    height: 36px !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
}

.drawer-btn i {
    color: var(--primary) !important;
    font-size: 18px !important;
}

.drawer-btn span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: white !important;

}

/* --- PREMIUM UI: GLASSMORPHISM & EMPLOYEES --- */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.employee-card-premium {
    padding: 24px;
    border-radius: 24px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.employee-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 194, 255, 0.3);
}

.emp-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.emp-avatar-container {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.emp-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emp-avatar-container i {
    font-size: 32px;
    color: var(--text-muted);
}

.emp-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.emp-stat-box {
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.emp-stat-box .label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.emp-stat-box .value {
    font-size: 15px;
    font-weight: 700;
}

/* Photo Upload Styles */
.photo-upload-zone {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed var(--border);
    margin: 0 auto 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
}

.photo-upload-zone:hover {
    background: rgba(0, 194, 255, 0.05);
    border-color: var(--primary);
}

.photo-upload-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload-zone .bi-camera {
    font-size: 24px;
    color: var(--text-muted);
}

.photo-upload-zone span {
    font-size: 10px;
    color: var(--text-muted);
}

/* Subtle Icon Buttons for Card Actions */
.btn-icon-subtle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-subtle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.btn-icon-subtle.danger:hover {
    background: rgba(231, 29, 54, 0.1);
    color: #e71d36;
    border-color: rgba(231, 29, 54, 0.2);
}

.btn-icon-subtle.success:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.2);
}

.emp-header-actions {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.employee-card-premium:hover .emp-header-actions {
    opacity: 1;
}

/* --- PREMIUM CLIENTS UI (Responsive & Global) --- */
.view-header-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    /*background: rgba(14, 32, 54, 0.8);*/
    /* Matching --bg-dark with transparency */
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.view-title-premium {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0;
    letter-spacing: -0.5px;
}

@media (max-width: 480px) {
    .view-title-premium {
        font-size: 22px;
    }
}

.search-container-premium {
    margin: 0 24px 20px;
    position: relative;
}

.search-input-premium {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important;
    padding: 14px 20px 14px 50px !important;
    color: white !important;
    font-size: 16px !important;
    transition: all 0.3s ease;
}

.search-input-premium:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(0, 194, 255, 0.2);
    outline: none;
}

.search-icon-premium {
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
}

/* Responsive Grid for Client List */
.client-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 20px 24px;
}

@media (min-width: 900px) {
    .client-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .client-list-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.client-card-premium {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.client-card-premium:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.client-info-premium {
    flex: 1;
    min-width: 0;
}

.client-info-premium h3 {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-address-premium {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-badges-premium {
    display: flex;
    gap: 8px;
}

.premium-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.premium-badge.price {
    background: rgba(0, 194, 255, 0.1);
    color: var(--primary);
    border: 1px solid rgba(0, 194, 255, 0.2);
}

.premium-badge.stock {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.client-actions-premium {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-left: 15px;
}

.btn-circle-premium {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 18px;
}

.btn-circle-premium:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-circle-premium.primary {
    background: rgba(0, 194, 255, 0.1);
    border-color: rgba(0, 194, 255, 0.3);
    color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 194, 255, 0.1);
}

.btn-circle-premium.primary:hover {
    background: var(--primary);
    color: black;
    box-shadow: 0 0 25px rgba(0, 194, 255, 0.4);
}

.btn-glow-premium {
    background: rgba(0, 194, 255, 0.2);
    color: white;
    border: 1px solid var(--primary);
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 20px rgba(0, 194, 255, 0.2);
}

.btn-glow-premium:hover {
    background: var(--primary);
    color: black;
    box-shadow: 0 0 30px rgba(0, 194, 255, 0.5);
    transform: scale(1.05);
}

.actions-column-premium {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.secondary-actions-premium {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-small-premium {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-small-premium:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-small-premium.danger:hover {
    color: var(--danger);
    border-color: var(--danger);
}

/* Premium Logout Button (inspired by image) */
.btn-premium-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);
    /* Warm Pink/Coral Gradient */
    color: white;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(255, 95, 109, 0.3);
}

.btn-premium-logout:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 95, 109, 0.5);
    filter: brightness(1.1);
}

.btn-premium-logout:active {
    transform: translateY(0);
    filter: brightness(0.9);
}

.btn-premium-logout i {
    font-size: 18px;
}

/* Perfil Nav Button specific styling */
#nav-perfil {
    margin-bottom: 5px;
}

/* --- Premium Profile View Styles --- */
.profile-container-premium {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    animation: fadeIn 0.4s ease-out;
}

.profile-header-premium {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: var(--bg-card);
    border-radius: 24px;
    border: 1px solid var(--border);
}

.profile-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
    border: 4px solid var(--bg-dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
    transition: background 0.3s ease;
}

.profile-avatar.has-image {
    background: white !important;
}

.profile-avatar img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 10px;
    /* Bit more padding for clarity */
    object-fit: contain;
    display: block;
    box-sizing: border-box;
}

.btn-avatar-edit {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: none;
    color: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.btn-avatar-edit:hover {
    transform: scale(1.1);
    background: var(--primary);
    color: white;
}

.profile-header-premium h2 {
    font-size: 28px;
    margin-bottom: 5px;
}

.profile-header-premium p {
    color: var(--text-muted);
}

.profile-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.section-card-premium {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(10px);
}

.card-title-premium {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
}

.profile-field-group {
    margin-bottom: 20px;
}

.profile-field-group label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-value-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.field-value-wrapper:focus-within {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
}

.field-value-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    outline: none;
}

.btn-field-save {
    background: transparent;
    border: none;
    color: var(--success);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-field-save:hover {
    opacity: 1;
}

.premium-badge {
    background: var(--primary);
    color: black;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-actions-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* --- PREMIUM TOP BAR --- */
.top-bar-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 0 5px;
}

.bar-left {
    display: flex;
    align-items: center;
}

.mobile-head-logo {
    display: none;
    /* Hidden on desktop by default */
    height: 100px;
    /* Increased from 45px */
    width: auto;
    max-width: 160px;
    object-fit: contain;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Notification Bell */
.notif-icon-wrapper {
    position: relative;
    width: 33px;
    /* Reduced from 42px */
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.notif-icon-wrapper i {
    font-size: 16px;
    /* Reduced from 20px */
}

.notif-icon-wrapper:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary);
}

.notification-dot-red {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #FF5F6D;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 10px rgba(255, 95, 109, 0.5);
}

/* User Profile Group */
.user-profile-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-trigger {
    cursor: pointer;
}

.avatar-mini-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.avatar-mini-circle.has-image {
    background: white !important;
}

.avatar-mini-circle img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 4px;
    /* Padding for mini circle */
    object-fit: contain;
    display: block;
    box-sizing: border-box;
}

.avatar-mini-circle i {
    font-size: 18px;
    color: white;
}

.mobile-logout-section {
    display: none;
    /* Hidden on desktop */
}

/* MOBILE OVERRIDES */
@media (max-width: 768px) {
    .top-bar-premium {
        position: sticky;
        top: 0;
        z-index: 1000;
        /*background: rgba(15, 23, 42, 0.95);*/
        backdrop-filter: blur(10px);
        margin: 0px -18px 20px -18px;
        /* Removed 20px bottom margin */
        padding: 15px 20px;
        border-bottom: none;
        height: 60px;
    }

    .view-header-premium {
        position: static;
        top: 60px;
        /* Below Top Bar */
        z-index: 999;
        padding: 12px 18px;
        margin: -20px -18px;
        /*background: rgba(15, 23, 42, 0.98);*/
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .search-container-premium {
        position: sticky;
        top: 58px;
        /* Below View Header */
        z-index: 998;
        /*background: rgba(15, 23, 42, 0.98);*/
        backdrop-filter: blur(10px);
        margin: 16px -18px 20px -18px;
        padding: 10px 30px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .search-input-premium {
        font-size: 15px !important;
        padding: 12px 20px 12px 45px !important;
    }

    .desktop-header-info {
        display: none;
    }

    .mobile-head-logo {
        display: block;
        margin-left: -15px;
    }

    .bar-right {
        gap: 12px;
    }

    .mobile-logout-section {
        display: block;
        /* Show on mobile */
    }

    /* Profile View Mobile Refinements */
    .profile-container-premium {
        padding: 5px 0;
    }

    .profile-header-premium {
        padding: 20px 15px;
        margin-bottom: 20px;
        border-radius: 16px;
    }

    .profile-header-premium h2 {
        font-size: 22px;
    }

    .profile-grid-premium {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .section-card-premium {
        padding: 20px 15px;
        border-radius: 16px;
    }

    .profile-avatar-container {
        width: 100px;
        height: 100px;
    }

    .profile-avatar {
        font-size: 36px;
    }
}

/* --- CONFIGURATION SECTION PREMIUM STYLES --- */
.config-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px 0;
}

.config-group {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
}

.group-title {
    font-size: 16px;
    color: var(--primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.input-modern-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.input-modern-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-modern-field label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 16px;
}

.input-with-icon input {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px 12px 40px;
    color: white;
    font-size: 15px;
    transition: all 0.3s ease;
}

.input-with-icon input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 194, 255, 0.1);
    outline: none;
}

.info-modern-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    font-size: 14px;
}

.info-item span {
    color: var(--text-muted);
}

.info-item strong {
    color: var(--text-main);
}

.config-actions {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .input-modern-row {
        grid-template-columns: 1fr;
    }
}

/* Premium Confirm Button (Golden Gradient) */
.btn-confirm-premium {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-confirm-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.4);
    filter: brightness(1.1);
}

.btn-confirm-premium:active {
    transform: translateY(0);
}


/* --- RECENT ACTIVITY v208 (Horizontal Layout) --- */
.activity-item {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-align: left !important;
}

.activity-item:last-child {
    border-bottom: none !important;
}

.activity-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    font-size: 18px !important;
}

.activity-content {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.activity-name {
    font-weight: 600 !important;
    color: var(--text-main) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.activity-status-badge {
    font-size: 0.85em !important;
    opacity: 0.75 !important;
    margin-left: 4px !important;
    font-weight: 400 !important;
}

.activity-time {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
}

.activity-value {
    font-weight: 700 !important;
    font-size: 15px !important;
    text-align: right !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
    justify-self: end !important;
}

.activity-value.success {
    color: #2ecc71 !important;
}

.activity-value.danger {
    color: #e74c3c !important;
}

@media (max-width: 480px) {
    .activity-name {
        font-size: 14px !important;
    }

    .activity-value {
        font-size: 14px !important;
    }
}

/* --- PREMIUM MASTER ADMIN STYLES (v227) --- */
.modal-premium {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content-premium {
    background: rgba(14, 32, 54, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    color: #fff;
    animation: premiumFadeIn 0.3s ease-out;
}

@keyframes premiumFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.modal-header-premium h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-close-modal {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group-full {
    grid-column: span 2;
}

.form-group label,
.form-group-full label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.modal-content-premium input,
.modal-content-premium select {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 15px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s;
}

.modal-content-premium input:focus,
.modal-content-premium select:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.modal-footer-premium {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-secondary-premium {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-secondary-premium:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}