:root {
    /* Color Palette - Nixmar Executive Premium (oscuro, apenas mas claro que el original) */
    --bg-main: #15151c;
    --bg-sidebar: #1c1c26;

    /* Executive Accents: Emerald & Royal Blue */
    --accent-primary: #10b981;
    /* Emerald Green */
    --accent-secondary: #3b82f6;
    /* Royal Blue */
    --accent-tertiary: #6366f1;
    /* indigo */

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;

    /* High-End Glassmorphism */
    --glass-bg: rgba(28, 28, 37, 0.75);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
    --glass-reflection: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);

    --card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);

    /* Animations - Fluid & Natural */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-mid: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Animations */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes slideLeftFade {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

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

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.stagger-item {
    opacity: 0;
    animation: slideUpFade 0.5s ease forwards;
}

/* TACTICAL THEME OVERRIDES */
body.tactical-theme {
    --bg-main: #060608;
    --accent-primary: #ffaa00;
    /* Electrical Amber */
    --accent-secondary: #00f2ff;
    /* Neo Cyan */
    --glass-border: rgba(255, 170, 0, 0.2);
}

body.tactical-theme #app {
    background-image:
        linear-gradient(rgba(6, 6, 8, 0.9), rgba(6, 6, 8, 0.95)),
        url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    background-color: #060608;
}

body.tactical-theme .sidebar {
    background-color: #0a0a0f;
    border-color: rgba(255, 170, 0, 0.1);
}

/* Main App Layout (Hidden by default, shown via JS) */
#app {
    display: flex;
    height: 100vh;
    overflow: hidden;
    /* Prevents global scroll */
    background-color: var(--bg-main);
    background-image:
        linear-gradient(rgba(21, 21, 28, 0.85), rgba(21, 21, 28, 0.95)),
        url('assets/fletes_bg_elegant_1768850171867.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 100;
}

/* Hub / Landing Page Styles */
#hub-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-main);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Permite scroll desde el inicio */
    align-items: center;
    overflow-y: auto;
    padding: 2rem 0 8rem 0;
    /* Increased bottom padding to 8rem */
}

/* Background Art & Curves */
#hub-bg-art {
    position: fixed;
    /* Fixed to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/nixmar_raisin_concept_art_1768585222600.png');
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    filter: contrast(1.1) saturate(1.1);
    z-index: 0;
}

#hub-overlay-gradient {
    position: fixed;
    /* Fixed to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(21, 21, 28, 0.4) 0%, rgba(21, 21, 28, 0.95) 100%);
    z-index: 1;
}

/* Green Curves using pseudo-elements */
#hub-screen::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    border: 1px solid rgba(16, 185, 129, 0.15);
    /* Green Curve */
    filter: blur(2px);
    z-index: 2;
    pointer-events: none;
}

#hub-screen::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -5%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    border: 1px solid rgba(139, 92, 246, 0.1);
    /* Violet Curve */
    z-index: 2;
    pointer-events: none;
}

.hub-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 960px;
    padding: 2rem;
    animation: fadeIn 1.5s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hub-title {
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.hub-subtitle {
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--accent-secondary);
    margin-bottom: clamp(1.5rem, 5vh, 4rem);
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 920px;
}

.module-card {
    background: var(--glass-bg);
    background-image: var(--glass-reflection);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 1.4rem 1rem;
    border-radius: 16px;
    width: 100%;
    height: 150px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    position: relative;
}

.module-img-icon {
    width: 44px !important;
    height: 44px !important;
}

.module-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent);
    pointer-events: none;
}

.module-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--accent-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(16, 185, 129, 0.15);
}

.module-icon {
    width: 140px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 0;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
    transition: transform 0.4s ease;
}

.module-card:hover .module-icon {
    transform: scale(1.1) perspective(500px) translateZ(20px);
}

/* Specific Icons */
#icon-fletes {
    background-image: url('assets/modern_truck_icon_1768849276862.png');
}

#icon-produccion {
    background-image: url('assets/raisins_bowl_icon_1768849321273.png');
    height: 120px;
    /* Taller for bowl */
    opacity: 0.7;
}

.module-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    letter-spacing: 0.3px;
    text-align: center;
    line-height: 1.25;
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow: hidden;
    /* No more global body scroll */
    height: 100vh;
}

/* Duplicate #app definition removed as it was consolidated above */

/* Sidebar Styling REFINED */
.sidebar {
    width: 280px;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1.2rem;
    z-index: 100;
}

.logo-container {
    margin-bottom: 4rem;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    font-weight: 700;
}

.logo-img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(16, 185, 129, 0.3));
}

.logo-text {
    font-size: 1.15rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 800;
}

.nav-links {
    list-style: none;
    flex-grow: 1;
}

.nav-links li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    border: 1px solid transparent;
}

.nav-links li:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    transform: translateX(4px);
}

.nav-links li.active {
    background: rgba(16, 185, 129, 0.08);
    color: var(--accent-primary);
    border: 1px solid rgba(16, 185, 129, 0.15);
    font-weight: 600;
}

.nav-links li .icon {
    font-size: 1.25rem;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.nav-links li.active .icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
}

.user-profile {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
}

.avatar {
    width: 40px;
    height: 40px;
    background: var(--accent-primary);
    color: var(--bg-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

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

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

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

/* Main Content Styling */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 2.5rem 3.5rem;
    position: relative;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.5rem;
    animation: slideLeftFade 0.8s ease;
}

.top-bar h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

/* Base generic fade in */
.content-fade-in {
    animation: slideUpFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

/* Specific component placeholders for next steps */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--card-gradient);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.stat-card .label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.stat-card .value {
    font-size: 1.75rem;
    font-weight: 700;
}

/* Auth Overlay */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.auth-card {
    background: var(--card-gradient);
    border: 1px solid var(--glass-border);
    padding: 3rem;
    border-radius: 24px;
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(20px);
    text-align: center;
}

.auth-card .logo {
    justify-content: center;
    margin-bottom: 2rem;
}

.auth-card h2 {
    margin-bottom: 2rem;
    font-size: 1.75rem;
}

.form-group {
    text-align: left;
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea,
.qa-input {
    width: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: white;
    font-family: inherit;
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.qa-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* Fix for Select elements to have dark background on options */
select.qa-input option {
    background-color: #22222e;
    color: white;
}

/* Modulo Produccion (legacy): mismas reglas que .form-group label / .qa-input,
   estas clases se usaban en el formulario sin tener CSS propio definido. */
.prod-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.prod-input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.prod-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(0, 0, 0, 0.4);
}

/* Clases usadas en muchas pantallas sin tener CSS global — solo estaban
   definidas de forma local (y duplicada) dentro de algunos renders puntuales,
   asi que quedaban sin estilo en el resto. Se toman los mismos valores que
   ya se repetian localmente para no inventar una estetica nueva. */
.qa-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    display: block;
}

.qa-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

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

.tab-btn:hover {
    color: white;
}

.text-red {
    color: #ef4444;
}

.text-secondary {
    color: var(--text-secondary);
}

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

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loader {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

/* Tarjetas de metricas (paralelo a .stats-grid / .stat-card) */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card {
    background: var(--card-gradient);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.5rem;
}

.metric-title {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
}

.btn-primary {
    width: 100%;
    padding: 1rem;
    background: var(--accent-primary);
    color: var(--bg-main);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

.auth-toggle {
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Responsive Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-container {
    width: 100%;
    margin-bottom: 5rem;
    /* Extra space at bottom to ensure button visibility */
}

@media (max-width: 600px) {

    .form-grid,
    .form-grid-3 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-container {
        padding: 1.2rem !important;
        margin-bottom: 4rem;
    }
}


.auth-toggle a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}

/* Admin Styles */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.action-btns {
    display: flex;
    gap: 0.5rem;
}

.btn-icon {
    background: none;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 0.4rem;
    border-radius: 6px;
    cursor: pointer;
}

.btn-icon:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Mobile Responsiveness Enhanced */
@media (max-width: 992px) {
    .sidebar {
        width: 80px;
        padding: 1.5rem 0.5rem;
    }

    .logo-text,
    .label,
    .user-info {
        display: none;
    }

    .main-content {
        padding: 1.5rem 1rem;
    }
}

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

    .sidebar {
        width: 100%;
        height: auto;
        min-height: 60px;
        padding: 0.8rem 1rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
        overflow-y: visible;
        position: sticky;
        top: 0;
    }

    .logo-container {
        margin-bottom: 0;
    }

    .logo-img {
        width: 40px;
        height: 40px;
    }

    .nav-links {
        display: none;
        /* Keep hidden on default header, we'll use a specific mobile navigation or FAB */
    }

    /* FAB - Floating Action Button for Mobile */
    .fab-mobile {
        position: fixed;
        bottom: 2rem;
        right: 1.5rem;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: var(--accent-primary);
        color: var(--bg-main);
        display: none;
        /* Hidden by default, shown via media query or JS */
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
        z-index: 9999;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .fab-mobile:active {
        transform: scale(0.9) rotate(90deg);
        background: white;
    }

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

        /* Ensure the top header on mobile doesn't overlap or hide content too much */
        .sidebar {
            padding: 0.5rem 1rem !important;
            gap: 1rem;
        }

        .logo-img {
            width: 35px;
            height: 35px;
        }

        /* Hide 'Volver al inicio' text to save space, use icon instead */
        /*.btn-secondary.btn-small { padding: 0.5rem; width: auto !important; }*/
    }


    .user-profile {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .main-content {
        padding: 1rem;
    }

    .top-bar {
        margin-bottom: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .top-bar h1 {
        font-size: 1.5rem;
    }

    /* Stack grid elements on mobile */
    .metrics-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .glass-card {
        padding: 1.2rem;
    }

    /* Modal adjustments */
    .modal-card {
        padding: 1.2rem;
        margin-top: 1rem;
    }
}

/* Map & Modal Styles */
#finca-map-picker {
    height: 350px;
    width: 100%;
    border-radius: 12px;
    margin: 1rem 0;
    z-index: 10;
    border: 1px solid var(--glass-border);
}

@media (max-height: 800px) {
    #finca-map-picker {
        height: 250px;
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Change to flex-start for scrolling */
    z-index: 3000;
    padding: 20px;
    overflow-y: auto;
    /* Enable vertical scroll if content overflows */
}

.modal-card {
    background: var(--bg-main);
    background-image: var(--card-gradient);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2rem;
    width: 100%;
    max-width: 550px;
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    margin-top: 2rem;
    /* Add some space from the top */
    margin-bottom: 2rem;
    /* Add some space at the bottom */
    position: relative;
}

.modal-header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-footer {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
}

/* Glass Components REFINED */
.glass-card {
    background: var(--glass-bg);
    background-image: var(--glass-reflection);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(25px);
    box-shadow: var(--glass-shadow);
}

.glass-section {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.glass-table-container {
    background: transparent;
    /* Let the row cards be the focus */
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    overflow: visible;
    /* Allow shadows and gaps to show */
    padding: 0.5rem 0.2rem;
}

/* Skeleton Loading State */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 8px;
    min-height: 20px;
}

/* Mobile Table Card Layout */
@media (max-width: 768px) {
    .glass-table-container {
        background: transparent;
        border: none;
    }

    .glass-table-container table {
        display: block;
        min-width: 0 !important;
        /* Reset min-width */
    }

    .glass-table-container thead {
        display: none;
    }

    .glass-table-container tbody {
        display: block;
    }

    .glass-table-container tr {
        display: block;
        margin-bottom: 1.5rem;
        background: var(--card-gradient);
        border: 1px solid var(--glass-border);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem;
    }

    .glass-table-container td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        text-align: right;
    }

    .glass-table-container td:last-child {
        border-bottom: none;
    }

    .glass-table-container td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.65rem;
        color: var(--accent-primary);
        opacity: 0.8;
        margin-right: 1.5rem;
        text-align: left;
        min-width: 100px;
    }

    .data-table tr.stock-row {
        margin-bottom: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .data-table td:last-child {
        justify-content: center;
        background: rgba(255, 255, 255, 0.02);
        margin-top: 0.5rem;
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* Tracking & Status */
.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.en_camino {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-badge.finalizado {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.status-badge.cerrado {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.truck-icon.moving {
    animation: truckShake 0.5s infinite alternate ease-in-out;
}

@keyframes truckShake {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-3px);
    }
}

.tracking-visual {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--glass-border);
}

/* Premium Data Table Styling - Nixmar Style */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    /* Breathing room between rows */
    margin-top: 1rem;
}

.data-table th {
    padding: 0.5rem 1.5rem;
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    opacity: 0.8;
}

.data-table tr.stock-row {
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.data-table tr.stock-row:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    /* Lift effect instead of slide */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
    z-index: 10;
    position: relative;
}

.data-table td {
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Row-as-card edge styling */
.data-table tr td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.data-table tr td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* History Table (Kardex) */
.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.history-table th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid var(--glass-border);
    color: var(--text-secondary);
}

.history-table td {
    padding: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.mov-in {
    color: #10b981;
    font-weight: 600;
}

.mov-out {
    color: #ef4444;
    font-weight: 600;
}

.content-tag {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--accent-primary);
}

/* Reports & Audit Section */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.report-card {
    background: var(--card-gradient);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.report-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
}

.remito-preview {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
    cursor: pointer;
}

.remito-preview::after {
    content: '🔍 Ampliar Remito';
    position: absolute;
    inset: 0;
    background: rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    font-weight: 600;
}

.remito-preview:hover::after {
    opacity: 1;
}

.badge-audit {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-audit.ok {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

/* Transitions */
.content-fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* Custom Checkbox Styles */
.checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color 0.2s;
}

.checkbox-container:hover {
    color: white;
}

.checkbox-container input[type='checkbox'] {
    accent-color: var(--accent-primary);
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
}

/* Commercial Management Calendar */
.commercial-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--glass-border);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
}

.calendar-header {
    background: rgba(0, 0, 0, 0.35);
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    color: var(--accent-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.calendar-day {
    min-height: 120px;
    background: var(--bg-main);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.calendar-day.today {
    background: rgba(16, 185, 129, 0.05);
}

.calendar-day.other-month {
    opacity: 0.3;
}

.calendar-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: bold;
}

.calendar-event {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.2);
    border-left: 3px solid var(--accent-primary);
    color: white;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event.urgent {
    background: rgba(239, 68, 68, 0.2);
    border-left-color: #ef4444;
}

/* Nixmar Intelligence Widget */
.ai-widget-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    pointer-events: none;
    /* KEY FIX: Allows clicks to pass through empty space */
}

.ai-widget-container>* {
    pointer-events: auto;
    /* Re-enable clicks for the button and chat window */
}

.ai-trigger {
    width: 65px;
    height: 65px;
    background: var(--glass-bg);
    background-image: var(--glass-reflection);
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), var(--glass-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

.ai-trigger:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
    background: var(--accent-primary);
    color: var(--bg-main);
}

.ai-chat-window {
    width: min(460px, calc(100vw - 2rem));
    height: min(620px, calc(100vh - 145px));
    background: linear-gradient(160deg, rgba(22, 27, 38, 0.98), rgba(12, 14, 22, 0.98));
    background-image: var(--glass-reflection);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(30px);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(16, 185, 129, 0.08);
    overflow: hidden;
    transform-origin: bottom right;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    pointer-events: none;
}

.ai-chat-window.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}

.ai-header {
    padding: 1rem 1.2rem;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(59, 130, 246, 0.08));
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.055), transparent 34%), rgba(0, 0, 0, 0.08);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) transparent;
}

.msg {
    max-width: 92%;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.55;
    animation: slideUpFade 0.3s ease forwards;
}

.msg-ai {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.msg-user {
    background: linear-gradient(135deg, #10b981, #14c99a);
    color: var(--bg-main);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

.ai-input-area {
    padding: 1rem;
    background: rgba(5, 8, 13, 0.72);
    display: flex;
    gap: 0.8rem;
    border-top: 1px solid var(--glass-border);
}

.ai-input {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    color: white;
    font-family: inherit;
    font-size: 0.9rem;
}

.ai-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.ai-message-title {
    margin: 0 0 0.65rem;
    color: #f8fafc;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.ai-message-paragraph {
    margin: 0.4rem 0 0;
}

.ai-message-paragraph:first-child {
    margin-top: 0;
}

.msg-ai strong {
    color: #6ee7b7;
    font-weight: 800;
}

.msg-ai code {
    padding: 0.08rem 0.35rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.7);
    color: #93c5fd;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.ai-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.45rem;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(16, 185, 129, 0.14);
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.055);
}

.ai-metric-label {
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.ai-metric-value {
    color: #f8fafc;
    font-size: 0.94rem;
    font-weight: 800;
    text-align: right;
}

.ai-message-list {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}

.ai-message-list li {
    margin: 0.28rem 0;
}

.typing-indicator {
    color: #94a3b8;
    font-size: 0.8rem;
    font-style: italic;
}

.ai-quick-actions {
    display: flex;
    gap: 0.45rem;
    padding: 0.7rem 1rem 0;
    overflow-x: auto;
    background: rgba(5, 8, 13, 0.72);
    scrollbar-width: none;
}

.ai-quick-actions::-webkit-scrollbar {
    display: none;
}

.ai-quick-actions button {
    flex: 0 0 auto;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.07);
    color: #a7f3d0;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ai-quick-actions button:hover {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.15);
}

@media (max-width: 480px) {
    .ai-chat-window {
        width: calc(100vw - 2rem);
        height: calc(100vh - 130px);
        right: 1rem;
        bottom: 6rem;
    }
}

/* Enhanced Auth Styles */
.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-container input {
    padding-right: 3.5rem !important;
}

.toggle-password {
    position: absolute;
    right: 1.2rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    user-select: none;
    z-index: 10;
    opacity: 0.7;
}

.toggle-password:hover {
    color: var(--accent-primary);
    opacity: 1;
    transform: scale(1.1);
}

.verification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1c1c26 0%, #15151c 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    text-align: center;
    padding: 2rem;
}

.check-icon {
    width: 80px;
    height: 80px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 2rem;
    color: var(--accent-primary);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Premium Loaders */
.loader-ring {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent-primary);
    animation: ring-spin 1s ease-in-out infinite;
    margin: 2rem auto;
}

.loader-small {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent-primary);
    animation: ring-spin 0.8s linear infinite;
}

@keyframes ring-spin {
    to { transform: rotate(360deg); }
}