:root {
    --primary: #0052CC;
    --accent: #FF8A00;
    --bg: #F4F5F7;
    --text: #172B4D;
    --white: #ffffff;
    --sidebar-width: 260px;
}

body { background: var(--bg); color: var(--text); overflow-x: hidden; font-family: 'Public Sans', sans-serif; }

/* Sidebar Responsive */
.sidebar {
    width: var(--sidebar-width); height: 100vh; background: var(--white);
    position: fixed; border-right: 1px solid #DFE1E6; z-index: 1050;
    transition: transform 0.3s ease;
}

.main-content { margin-left: var(--sidebar-width); padding: 2rem; transition: 0.3s; }

.mobile-nav-toggle {
    position: fixed; top: 15px; left: 15px; z-index: 1100;
    background: var(--primary); color: white; border: none;
    padding: 10px 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.active { transform: translateX(0); box-shadow: 10px 0 30px rgba(0,0,0,0.1); }
    .main-content { margin-left: 0; padding: 1.5rem; padding-top: 5rem; }
}

/* Nav Links */
.nav-link-custom {
    padding: 14px 20px; color: #42526E; text-decoration: none;
    display: flex; align-items: center; border-radius: 10px;
    margin: 5px 10px; transition: 0.2s;
}
.nav-link-custom.active { background: #EBECF0; color: var(--primary); font-weight: 700; }

/* Cards */
.card-glass { background: var(--white); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: none; }

.camera-container {
    background: #000; border-radius: 15px; overflow: hidden;
    position: relative; width: 100%; max-width: 640px; margin: auto;
}

video { width: 100%; border-radius: 15px; display: block; }

.scan-animation {
    position: absolute; width: 100%; height: 4px; background: var(--accent);
    z-index: 10; top: 0; animation: moveLine 2s infinite linear;
}

@keyframes moveLine { 0% { top: 0; } 100% { top: 100%; } }

/* Modales */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center;
    z-index: 2000; padding: 1rem;
}

.signature-card { background: white; padding: 2rem; border-radius: 20px; width: 100%; max-width: 500px; }
.signature-pad-wrapper { border: 2px dashed #ccc; border-radius: 10px; background: #f9f9f9; touch-action: none; }
#signature-pad { width: 100%; height: 200px; display: block; }

.hidden { display: none !important; }