/* ==================== RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: #0a0a0f;
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

:root {
    --primary: #00d4ff;
    --secondary: #7b2cbf;
    --accent: #ff006e;
    --success: #00ff88;
    --warning: #ffaa00;
    --dark: #0a0a0f;
    --darker: #050508;
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* ==================== NOISE OVERLAY ==================== */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
}

/* ==================== ANIMATIONS ==================== */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ==================== BUTTONS ==================== */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    padding: 16px 48px;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 212, 255, 0.3);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--glass-border);
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 500;
    color: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-secondary:hover {
    border-color: var(--primary);
    background: rgba(0, 212, 255, 0.1);
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

.btn-icon.add {
    background: var(--primary);
    color: var(--dark);
}

.btn-icon.remove {
    background: var(--accent);
    color: white;
}

.btn-icon:disabled {
    background: rgba(255,255,255,0.1);
    cursor: not-allowed;
}

/* ==================== GLASS CARD ==================== */
.glass-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(20px);
}

/* ==================== INPUTS ==================== */
input, select, textarea {
    font-family: 'Montserrat', sans-serif;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    padding: 12px 16px;
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    width: 100%;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

input::placeholder, textarea::placeholder {
    color: rgba(255,255,255,0.4);
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--darker);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ==================== WELCOME SCREEN ==================== */

/* ==================== NIVENTORY HERO (WELCOME) ==================== */
.nv-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: #eef1ff;
    padding: 52px 6vw;
}

.nv-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(1200px 700px at 20% 10%, rgba(37,215,255,0.22), transparent 60%),
                radial-gradient(900px 600px at 80% 20%, rgba(139,92,255,0.20), transparent 60%),
                radial-gradient(900px 700px at 50% 110%, rgba(37,215,255,0.10), transparent 55%),
                linear-gradient(120deg, #05070f 0%, #070a16 40%, #060712 100%);
}

.nv-glow {
    position: absolute;
    filter: blur(50px);
    opacity: .75;
}
.nv-glow-a { left: -120px; top: -140px; width: 520px; height: 520px; background: rgba(37,215,255,0.35); border-radius: 50%; }
.nv-glow-b { right: -160px; top: -120px; width: 560px; height: 560px; background: rgba(139,92,255,0.32); border-radius: 50%; }

.nv-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.18;
    mask-image: radial-gradient(500px 500px at 30% 30%, rgba(0,0,0,1), transparent 70%);
}

.nv-pixels {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.10;
    mix-blend-mode: screen;
    mask-image: radial-gradient(800px 500px at 70% 30%, rgba(0,0,0,1), transparent 70%);
}

.nv-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1250px;
    margin: 0 auto;
}

.nv-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.nv-logo {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    display: grid;
    place-items: center;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.nv-logo svg { width: 38px; height: 38px; }

.nv-name {
    font-size: 2.2rem;
    letter-spacing: 0.12em;
    font-weight: 800;
    background: linear-gradient(90deg, #25D7FF 0%, #8B5CFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}

.nv-tag {
    margin-top: 6px;
    font-size: 0.95rem;
    color: rgba(232,236,255,0.75);
}

.nv-copy h1 {
    font-size: 2.1rem;
    line-height: 1.12;
    margin: 10px 0 10px;
}

.nv-copy p {
    margin: 0 0 18px;
    color: rgba(232,236,255,0.78);
    font-size: 1.05rem;
    max-width: 560px;
}

.nv-features {
    display: grid;
    gap: 10px;
    margin: 16px 0 22px;
}

.nv-feature {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nv-dot {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(37,215,255,0.25), rgba(139,92,255,0.25));
    border: 1px solid rgba(255,255,255,0.12);
    color: #e9ecff;
    font-weight: 800;
}

.nv-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nv-footnote {
    margin-top: 18px;
    color: rgba(232,236,255,0.55);
    font-size: 0.9rem;
}

/* ==================== NIVENTORY MODALS (LOGIN / USERS) ==================== */
.nv-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    padding: 22px;
}

.nv-modal {
    width: min(520px, 96vw);
    border-radius: 22px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 30px 90px rgba(0,0,0,0.55);
    overflow: hidden;
}

.nv-modal-wide { width: min(860px, 96vw); }

.nv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.nv-modal-title {
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(240,243,255,0.95);
}

.nv-modal-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.15);
    color: rgba(240,243,255,0.90);
    cursor: pointer;
}

.nv-modal-close:hover { background: rgba(255,255,255,0.08); }

.nv-modal-body {
    padding: 18px;
}

.nv-login-brand {
    margin-bottom: 16px;
}

.nv-login-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.14em;
    background: linear-gradient(90deg, rgba(37,215,255,0.22), rgba(139,92,255,0.22));
    border: 1px solid rgba(255,255,255,0.14);
}

.nv-login-sub {
    margin-top: 8px;
    color: rgba(232,236,255,0.70);
}

.nv-form { display: grid; gap: 10px; }
.nv-label { font-size: 0.9rem; color: rgba(232,236,255,0.80); }

.nv-input, .nv-select {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.18);
    color: rgba(244,246,255,0.96);
    outline: none;
}

.nv-input:focus, .nv-select:focus {
    border-color: rgba(37,215,255,0.45);
    box-shadow: 0 0 0 4px rgba(37,215,255,0.12);
}

.nv-btn-primary {
    margin-top: 4px;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 800;
    color: #0a0a0f;
    background: linear-gradient(90deg, #25D7FF 0%, #8B5CFF 100%);
}

.nv-login-hint {
    margin-top: 10px;
    color: rgba(232,236,255,0.58);
    font-size: 0.88rem;
    line-height: 1.3;
}

.user-badge {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(240,243,255,0.88);
    font-size: 0.85rem;
    white-space: nowrap;
}

.nv-users-note {
    color: rgba(232,236,255,0.72);
    margin-bottom: 12px;
}

.nv-users-list {
    display: grid;
    gap: 10px;
    max-height: 340px;
    overflow: auto;
    padding-right: 6px;
}

.nv-user-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
}

.nv-user-id .u { font-weight: 800; }
.nv-user-id .r { color: rgba(232,236,255,0.65); font-size: 0.9rem; margin-top: 2px; }

.nv-user-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.nv-btn {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.12);
    color: rgba(240,243,255,0.92);
    cursor: pointer;
}

.nv-btn:hover { background: rgba(255,255,255,0.08); }
.nv-btn.danger { border-color: rgba(255,80,80,0.35); }
.nv-btn.danger:hover { background: rgba(255,80,80,0.12); }

.nv-divider {
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: 16px 0;
}

.nv-create-title { font-weight: 800; margin-bottom: 10px; }
.nv-grid-3 { display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; }
.nv-actions-right { display: flex; justify-content: flex-end; margin-top: 10px; }

@media (max-width: 780px) {
    .nv-grid-3 { grid-template-columns: 1fr; }
}

.nv-hero-right {
    position: relative;
    min-height: 520px;
}

.nv-laptop {
    width: min(560px, 100%);
    margin-left: auto;
    transform: translateY(6px);
    filter: drop-shadow(0 40px 60px rgba(0,0,0,0.45));
}

.nv-laptop-lid {
    border-radius: 26px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nv-laptop-screen {
    border-radius: 18px;
    background: radial-gradient(900px 500px at 30% 20%, rgba(37,215,255,0.20), transparent 55%),
                radial-gradient(700px 450px at 70% 30%, rgba(139,92,255,0.18), transparent 60%),
                linear-gradient(180deg, #0b1022, #0a0d1b);
    border: 1px solid rgba(255,255,255,0.10);
    height: 330px;
    overflow: hidden;
    position: relative;
}

.nv-ui {
    position: absolute;
    inset: 14px;
    border-radius: 14px;
    background: rgba(8,10,20,0.65);
    border: 1px solid rgba(255,255,255,0.08);
}

.nv-ui-top {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.nv-ui-pill {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
}

.nv-ui-body {
    display: grid;
    grid-template-columns: 0.38fr 0.62fr;
    height: calc(100% - 41px);
}

.nv-ui-sidebar {
    padding: 14px;
    border-right: 1px solid rgba(255,255,255,0.07);
    display: grid;
    gap: 10px;
    align-content: start;
}

.nv-ui-nav {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
}

.nv-ui-main {
    padding: 14px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.nv-ui-title { height: 14px; width: 70%; border-radius: 999px; background: rgba(37,215,255,0.25); }
.nv-ui-row { height: 11px; width: 100%; border-radius: 999px; background: rgba(255,255,255,0.10); }

.nv-ui-card {
    margin-top: 6px;
    border-radius: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    display: grid;
    gap: 10px;
}

.nv-ui-doc { height: 10px; width: 86%; border-radius: 999px; background: rgba(139,92,255,0.22); }

.nv-laptop-base {
    height: 26px;
    margin: 12px auto 0;
    width: 92%;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.12);
    position: relative;
}

.nv-laptop-base:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.25);
}

.nv-float {
    position: absolute;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px rgba(0,0,0,0.35);
    animation: nvFloat 5.2s ease-in-out infinite;
}

.nv-float-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(37,215,255,0.22), rgba(139,92,255,0.22));
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 18px;
}

.nv-float-text .t { font-weight: 800; font-size: 0.95rem; }
.nv-float-text .s { font-size: 0.85rem; color: rgba(232,236,255,0.75); margin-top: 2px; }

.nv-float-1 { left: 0; top: 70px; }
.nv-float-2 { right: 20px; top: 20px; animation-duration: 6.1s; }
.nv-float-3 { left: 40px; bottom: 92px; animation-duration: 6.6s; }

@keyframes nvFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 980px) {
    .nv-hero { padding: 42px 5vw; }
    .nv-hero-content { grid-template-columns: 1fr; }
    .nv-hero-right { min-height: 440px; }
    .nv-laptop { margin: 10px auto 0; }
    .nv-float-1 { left: 10px; top: 30px; }
    .nv-float-2 { right: 10px; top: 10px; }
    .nv-float-3 { left: 10px; bottom: 40px; }
}
.welcome-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0f 50%), 
                radial-gradient(ellipse at bottom right, #16213e 0%, transparent 50%);
    position: relative;
    overflow: hidden;
}

.welcome-bg-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.welcome-bg-element.top {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0,212,255,0.1) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    animation: float 8s ease-in-out infinite;
}

.welcome-bg-element.bottom {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(123,44,191,0.1) 0%, transparent 70%);
    bottom: -100px;
    left: -100px;
    animation: float 6s ease-in-out infinite reverse;
}

.welcome-title {
    text-align: center;
    margin-bottom: 20px;
}

.welcome-title h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 300;
    letter-spacing: 8px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 10px;
}

.welcome-title h2 {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
    letter-spacing: 4px;
}

.team-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

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

.photo-upload {
    cursor: pointer;
    display: block;
}

.photo-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;
    transition: transform 0.3s ease;
}

.photo-circle:hover {
    transform: scale(1.05);
}

.photo-circle.nicolas {
    border: 3px solid var(--primary);
    box-shadow: 0 0 30px rgba(0,212,255,0.3);
}

.photo-circle.agustin {
    border: 3px solid var(--accent);
    box-shadow: 0 0 30px rgba(255,0,110,0.3);
}

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

.photo-placeholder {
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
}

.photo-placeholder .icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.team-member h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.team-member h3.nicolas { color: var(--primary); }
.team-member h3.agustin { color: var(--accent); }

.team-member p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
}

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

.logo-box {
    width: 220px;
    height: 160px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--secondary);
    box-shadow: 0 0 40px rgba(123,44,191,0.3);
    margin-bottom: 15px;
    cursor: pointer;
    transition: transform 0.3s ease;
    background: linear-gradient(145deg, #e8e8e8, #f5f5f5);
}

.logo-box:hover {
    transform: scale(1.05);
}

.logo-box img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.company-name {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #fff, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.company-name.secondary {
    background: linear-gradient(90deg, #fff, #0891b2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-box.secondary {
    border-color: #0891b2;
    box-shadow: 0 0 40px rgba(8, 145, 178, 0.3);
}

.it-design {
    margin-bottom: 40px;
    text-align: center;
}

.emoji-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

.emoji-row span {
    font-size: 2rem;
}

.it-tagline {
    font-family: 'Roboto Mono', monospace;
    color: var(--primary);
    font-size: 0.9rem;
    letter-spacing: 2px;
}

/* ==================== INVENTORY SCREEN ==================== */
.inventory-screen {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
    padding-bottom: 40px;
}

.inventory-header {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    background: rgba(10,10,15,0.95);
    backdrop-filter: blur(20px);
    z-index: 200;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-title p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

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

.search-input {
    width: 280px;
    padding: 12px 20px;
    padding-left: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 15px center;
}

.inventory-main {
    padding: 30px;
    padding-right: 400px;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.4);
}

.empty-state .icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.empty-state p {
    font-size: 1.2rem;
}

.empty-state .hint {
    margin-top: 10px;
    font-size: 1rem;
}

/* ==================== ITEM CARD ==================== */
.item-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.5s ease forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,212,255,0.15);
}

.item-delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(255,0,110,0.8);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.item-card:hover .item-delete-btn {
    opacity: 0.7;
}

.item-delete-btn:hover {
    opacity: 1 !important;
}

.item-image {
    width: 100%;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-image .placeholder {
    font-size: 3rem;
    opacity: 0.3;
}

.item-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--primary);
}

.item-detail {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 2px;
}

.item-serial {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 10px;
    font-family: 'Roboto Mono', monospace;
}

.item-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--glass-border);
}

.item-stock {
    font-size: 0.85rem;
    font-weight: 600;
}

.item-stock.in-stock { color: var(--primary); }
.item-stock.out-of-stock { color: var(--accent); }

.item-controls {
    display: flex;
    gap: 8px;
}

/* ==================== CART SIDEBAR ==================== */
.cart-sidebar {
    position: fixed;
    right: 20px;
    top: 100px;
    width: 350px;
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.cart-header {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
}

.cart-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-count {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.cart-empty {
    text-align: center;
    color: rgba(255,255,255,0.4);
    padding: 30px 0;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    margin-bottom: 10px;
}

.cart-item-image {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-image .placeholder {
    font-size: 1.5rem;
    opacity: 0.3;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-qty {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.cart-item-serial {
    font-size: 0.7rem;
    color: var(--primary);
    font-family: 'Roboto Mono', monospace;
}

.cart-item-remove {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
    transition: transform 0.2s;
}

.cart-item-remove:hover {
    transform: scale(1.2);
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid var(--glass-border);
}

.cart-footer input {
    margin-bottom: 10px;
}

.cart-footer .btn-primary {
    width: 100%;
    padding: 14px;
    font-size: 0.9rem;
}

/* Company Selector */
.company-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.company-option {
    flex: 1;
    cursor: pointer;
}

.company-option input {
    display: none;
}

.company-badge {
    display: block;
    padding: 10px 8px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--glass-border);
    transition: all 0.3s ease;
}

.company-badge.bm {
    color: rgba(255,255,255,0.6);
}

.company-badge.ian {
    color: rgba(255,255,255,0.6);
}

.company-option input:checked + .company-badge.bm {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
}

.company-option input:checked + .company-badge.ian {
    border-color: #0891b2;
    background: rgba(8, 145, 178, 0.2);
    color: #0891b2;
    box-shadow: 0 0 15px rgba(8, 145, 178, 0.3);
}

/* ==================== MODAL ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: scaleIn 0.3s ease;
}

.modal-content {
    width: 100%;
    max-width: 500px;
    padding: 30px;
    max-height: 90vh;
    overflow-y: auto;
}

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

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s;
}

.modal-close:hover {
    color: white;
}

.image-upload-area {
    width: 100%;
    height: 150px;
    border-radius: 12px;
    border: 2px dashed var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s ease;
    margin-bottom: 20px;
}

.image-upload-area:hover {
    border-color: var(--primary);
}

.image-upload-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-upload-placeholder {
    text-align: center;
    color: rgba(255,255,255,0.4);
}

.image-upload-placeholder .icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.form-grid {
    display: grid;
    gap: 15px;
}

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

textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
    font-family: 'Montserrat', sans-serif;
}

.item-observations {
    margin-top: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    max-height: 150px;
    overflow-y: auto;
}

.modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.modal-buttons button {
    flex: 1;
}

/* ==================== LOADING ==================== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid var(--glass-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ==================== NOTIFICATION ==================== */
.notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 500;
    z-index: 10000;
    animation: slideUp 0.3s ease;
}

.notification.success {
    background: var(--success);
    color: var(--dark);
}

.notification.error {
    background: var(--accent);
    color: white;
}

/* ==================== IMAGE COUNT BADGE ==================== */
.image-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.item-image {
    position: relative;
}

/* ==================== MULTI IMAGE UPLOAD ==================== */
.multi-image-upload {
    margin-bottom: 20px;
}

.image-previews {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.image-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-preview {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== ITEM DETAIL MODAL ==================== */
.item-detail-modal {
    width: 100%;
    max-width: 600px;
    padding: 30px;
    max-height: 90vh;
    overflow-y: auto;
}

.item-detail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.item-detail-info {
    text-align: center;
    width: 100%;
}

.item-detail-info p {
    margin: 8px 0;
    font-size: 1rem;
}

.add-more-photos-btn {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 25px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.add-more-photos-btn:hover {
    transform: scale(1.05);
}

.max-photos-msg {
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
}

.delete-photos-btn {
    margin-top: 10px;
}

.fan-hint {
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    margin-top: 15px;
    text-align: center;
}

/* ==================== FAN GALLERY ==================== */
.fan-gallery {
    position: relative;
    width: 100%;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    margin: 20px 0;
}

.no-images {
    text-align: center;
    color: rgba(255,255,255,0.4);
}

.no-images .placeholder {
    font-size: 4rem;
    display: block;
    margin-bottom: 10px;
}

.fan-image {
    position: absolute;
    width: 180px;
    height: 220px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    transform-origin: bottom center;
    border: 3px solid rgba(255,255,255,0.1);
}

.fan-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Cuando hover en la galería, bajar opacidad de todas las imágenes */
.fan-gallery:hover .fan-image {
    opacity: 0.7;
}

/* La imagen con hover directo se destaca */
.fan-gallery .fan-image:hover {
    opacity: 1;
    z-index: 100 !important;
    box-shadow: 0 25px 60px rgba(0, 212, 255, 0.5);
    border-color: var(--primary);
}

/* 1 imagen - centrada */
.fan-total-1.fan-image-0 {
    transform: rotate(0deg);
    z-index: 3;
}

.fan-total-1.fan-image-0:hover {
    transform: scale(1.1);
}

/* 2 imágenes - abanico más separado */
.fan-total-2.fan-image-0 {
    transform: rotate(-12deg) translateX(-120px);
    z-index: 2;
}

.fan-total-2.fan-image-1 {
    transform: rotate(12deg) translateX(120px);
    z-index: 2;
}

.fan-total-2.fan-image-0:hover {
    transform: rotate(-6deg) translateX(-100px) scale(1.1);
}

.fan-total-2.fan-image-1:hover {
    transform: rotate(6deg) translateX(100px) scale(1.1);
}

/* 3 imágenes - abanico más abierto */
.fan-total-3.fan-image-0 {
    transform: rotate(-20deg) translateX(-160px);
    z-index: 1;
}

.fan-total-3.fan-image-1 {
    transform: rotate(0deg) translateY(-10px);
    z-index: 3;
}

.fan-total-3.fan-image-2 {
    transform: rotate(20deg) translateX(160px);
    z-index: 1;
}

.fan-total-3.fan-image-0:hover {
    transform: rotate(-10deg) translateX(-140px) scale(1.1);
}

.fan-total-3.fan-image-1:hover {
    transform: rotate(0deg) translateY(-20px) scale(1.1);
}

.fan-total-3.fan-image-2:hover {
    transform: rotate(10deg) translateX(140px) scale(1.1);
}

/* ==================== RESTITUTION MODAL ==================== */
.restitution-modal {
    width: 100%;
    max-width: 550px;
    padding: 30px;
    max-height: 90vh;
    overflow-y: auto;
}

.restitution-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.restitution-info {
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 12px;
}

.restitution-info p {
    margin: 5px 0;
}

.restitution-items-list {
    margin: 10px 0 0 20px;
    padding: 0;
}

.restitution-items-list li {
    margin: 5px 0;
    color: rgba(255,255,255,0.8);
}

.restitution-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-label {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 5px;
}

.state-selector {
    display: flex;
    gap: 15px;
}

.state-option {
    flex: 1;
    cursor: pointer;
}

.state-option input {
    display: none;
}

.state-badge {
    display: block;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid var(--glass-border);
    transition: all 0.3s ease;
}

.state-badge.good {
    color: rgba(255,255,255,0.5);
}

.state-badge.bad {
    color: rgba(255,255,255,0.5);
}

.state-option input:checked + .state-badge.good {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.state-option input:checked + .state-badge.bad {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.restitution-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.restitution-actions button {
    flex: 1;
}

/* ==================== DELIVERY DETAIL IMPROVEMENTS ==================== */
.documents-section {
    margin-top: 20px;
}

.documents-section h3 {
    color: var(--primary);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.document-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.document-item {
    flex: 1;
    min-width: 200px;
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 12px;
}

.document-item h4 {
    margin-bottom: 12px;
    color: rgba(255,255,255,0.9);
}

.restitution-info-box {
    margin-top: 15px;
    padding: 15px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
}

.restitution-info-box h4 {
    margin-bottom: 10px;
    color: #ef4444;
}

.return-state {
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
}

.return-state.bueno {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.return-state.malo {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.signed-doc-preview.has-return {
    opacity: 0.7;
}

.pdf-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.2));
    border-radius: 12px;
    border: 2px dashed rgba(239, 68, 68, 0.4);
    cursor: pointer;
    transition: all 0.3s;
}

.pdf-preview:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.3));
    border-color: rgba(239, 68, 68, 0.6);
}

.pdf-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.pdf-hint {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 5px;
}

/* ==================== ZOOM MODAL ==================== */
.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: scaleIn 0.3s ease;
    flex-direction: column;
}

.zoom-controls {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(255,255,255,0.1);
    padding: 10px 20px;
    border-radius: 30px;
    z-index: 2001;
}

.zoom-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

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

.zoom-level {
    color: white;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

.zoom-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2001;
}

.zoom-close:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.zoom-container {
    max-width: 90vw;
    max-height: 85vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
    cursor: grab;
}

.zoom-image:active {
    cursor: grabbing;
}

/* ==================== TABS ==================== */
.tabs-container {
    display: flex;
    gap: 10px;
    padding: 0 30px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 12px 24px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-color: transparent;
    color: white;
}

.tab-count {
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

/* ==================== DELIVERIES LIST ==================== */
.deliveries-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 20px;
}

.delivery-card {
    padding: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.delivery-card:hover {
    transform: translateX(5px);
    border-color: var(--primary);
}

.delivery-card.restituted {
    opacity: 0.6;
    border-color: #666;
}

.restituted-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ef4444;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
}

.delivery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.delivery-recipient h3 {
    color: var(--primary);
    margin-bottom: 5px;
}

.delivery-recipient p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

.delivery-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.delivery-company {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
}

.delivery-company.bm {
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.delivery-company.ian {
    background: rgba(8, 145, 178, 0.2);
    color: #0891b2;
}

.delivery-date {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.delivery-items-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.delivery-item-mini {
    background: rgba(255,255,255,0.05);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.delivery-item-mini .qty {
    color: var(--primary);
    font-weight: 600;
    margin-right: 5px;
}

.more-items {
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    padding: 6px 12px;
}

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

.btn-small {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(245, 158, 11, 0.4);
}

/* ==================== DELIVERY DETAIL MODAL ==================== */
.delivery-detail-modal {
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
}

.delivery-detail-modal.restituted {
    border-color: #ef4444;
}

.restituted-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 3rem;
    font-weight: 900;
    color: rgba(239, 68, 68, 0.15);
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

.delivery-detail-content {
    position: relative;
    z-index: 2;
}

.delivery-info-section,
.delivery-items-section,
.signed-document-section {
    margin-bottom: 25px;
}

.delivery-info-section h3,
.delivery-items-section h3,
.signed-document-section h3 {
    color: var(--primary);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.delivered-item-card {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    margin-bottom: 10px;
}

.delivered-item-images {
    display: flex;
    gap: 5px;
}

.delivered-item-thumb {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
}

.delivered-item-thumb:hover {
    transform: scale(1.1);
}

.delivered-item-info {
    flex: 1;
}

.delivered-item-info .item-name {
    color: white;
    margin-bottom: 5px;
}

.delivered-item-info p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin: 2px 0;
}

.delivered-item-info .obs {
    font-style: italic;
    color: rgba(255,255,255,0.4);
}

.no-img {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    font-size: 1.5rem;
}

.signed-doc-preview {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.signed-doc-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    cursor: pointer;
}

.signed-doc-preview.invalid img {
    opacity: 0.5;
}

.invalid-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    background: rgba(239, 68, 68, 0.9);
    color: white;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 900;
    text-align: center;
    border: 4px solid white;
    border-radius: 10px;
}

.upload-signed-btn {
    display: inline-block;
    padding: 15px 25px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s;
}

.upload-signed-btn:hover {
    transform: scale(1.02);
}

.doc-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
}

.btn-danger:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
}

/* ==================== DOWNLOAD PHOTO BTN ==================== */
.download-photo-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 2px solid white;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s;
}

.fan-image:hover .download-photo-btn {
    opacity: 1;
}

.download-photo-btn:hover {
    background: var(--primary);
    transform: scale(1.1);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .inventory-main {
        padding-right: 30px;
    }
    
    .cart-sidebar {
        position: fixed;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 20px 20px 0 0;
    }
}

@media (max-width: 768px) {
    .team-container {
        flex-direction: column;
    }
    
    .header-right {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input {
        width: 100%;
    }
    
    .tabs-container {
        padding: 0 15px;
    }
    
    .tab-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 15px;
        font-size: 0.85rem;
    }
}

/* ==================== NIVENTORY: Empresas / Logos ==================== */
.nv-companies-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-company-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.55);
}

.nv-company-id .u {
  font-weight: 700;
  font-size: 0.98rem;
}

.nv-company-id .r {
  margin-top: 2px;
  opacity: 0.75;
  font-size: 0.82rem;
}

.nv-company-preview {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
}

.nv-company-preview img {
  max-height: 46px;
  max-width: 100%;
  display: block;
}

.nv-company-empty {
  opacity: 0.6;
  font-size: 0.85rem;
}

/* ==================== NIVENTORY: Empresas / Logos ==================== */
.nv-companies-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-company-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.55);
}

.nv-company-id .u {
  font-weight: 700;
  font-size: 0.98rem;
}

.nv-company-id .r {
  opacity: 0.75;
  font-size: 0.78rem;
  margin-top: 4px;
}

.nv-company-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.nv-company-preview img {
  max-height: 56px;
  max-width: 100%;
  object-fit: contain;
  padding: 6px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.nv-company-empty {
  font-size: 0.85rem;
  opacity: 0.75;
}

.nv-company-actions {
  display: flex;
  justify-content: flex-end;
}

/* ==================== NIVENTORY: Empresas / Logos ==================== */
.nv-companies-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-company-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.55);
}

.nv-company-id .u {
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}

.nv-company-id .r {
  opacity: 0.65;
  font-size: 0.85rem;
}

.nv-company-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 72px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.nv-company-preview img {
  max-height: 62px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.nv-company-empty {
  opacity: 0.55;
  font-size: 0.9rem;
}

.nv-company-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .nv-company-row {
    grid-template-columns: 1fr;
  }
  .nv-company-actions {
    justify-content: flex-start;
  }
}

/* ==================== NIVENTORY: Empresas / Logos ==================== */
.nv-companies-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-company-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.55);
}

.nv-company-id .u {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.nv-company-id .r {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.75;
}

.nv-company-preview {
  height: 72px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.nv-company-preview img {
  max-height: 64px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.nv-company-empty {
  font-size: 12px;
  opacity: 0.7;
}

.nv-company-actions {
  display: flex;
  justify-content: flex-end;
}

/* ==================== NIVENTORY: Empresas / Logos ==================== */
.nv-companies-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-company-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.55);
}

.nv-company-id .u {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.nv-company-id .r {
  margin-top: 4px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.60);
}

.nv-company-preview {
  height: 72px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nv-company-preview img {
  max-height: 56px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

.nv-company-empty {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
}

.nv-company-actions {
  display: flex;
  justify-content: flex-end;
}

/* ==================== NIVENTORY: Empresas / Logos ==================== */
.nv-companies-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-company-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.55);
}

.nv-company-id .u {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.nv-company-id .r {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.nv-company-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.nv-company-preview img {
  max-width: 220px;
  max-height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.nv-company-empty {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
}

.nv-company-actions {
  display: flex;
  justify-content: flex-end;
}