:root{--primary:#2563eb;--primary-dark:#1d4ed8;--primary-light:#dbeafe;--success:#16a34a;--success-light:#dcfce7;--warning:#f59e0b;--warning-light:#fef3c7;--danger:#dc2626;--danger-light:#fee2e2;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--radius:8px;--shadow:0 1px 3px #0000001a, 0 1px 2px #0000000f;--shadow-md:0 4px 6px #00000012, 0 2px 4px #0000000f;--shadow-lg:0 10px 15px #0000001a, 0 4px 6px #0000000d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--gray-50);color:var(--gray-800);min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.6}.loading-screen{justify-content:center;align-items:center;min-height:100vh;display:flex}.spinner{border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-container{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 50%,#1d4ed8 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{width:100%;max-width:420px;box-shadow:var(--shadow-lg);background:#fff;border-radius:12px;padding:40px}.login-card h1{color:var(--gray-900);text-align:center;margin-bottom:8px;font-size:1.5rem}.login-card .subtitle{color:var(--gray-500);text-align:center;margin-bottom:32px;font-size:.9rem}.form-group{margin-bottom:20px}.form-group label{color:var(--gray-700);margin-bottom:6px;font-size:.875rem;font-weight:600;display:block}.form-group input,.form-group select{border:1px solid var(--gray-300);border-radius:var(--radius);background:#fff;outline:none;width:100%;padding:10px 12px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.btn{border-radius:var(--radius);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#15803d}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#b91c1c}.btn-outline{color:var(--gray-700);border:1px solid var(--gray-300);background:#fff}.btn-outline:hover{background:var(--gray-100)}.btn-warning{background:var(--warning);color:#fff}.btn-warning:hover{background:#d97706}.btn-sm{padding:6px 12px;font-size:.8rem}.btn-lg{padding:14px 28px;font-size:1rem}.btn-block{width:100%}.navbar{border-bottom:1px solid var(--gray-200);height:60px;box-shadow:var(--shadow);z-index:100;background:#fff;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.navbar-brand{color:var(--primary);align-items:center;gap:10px;font-size:1.1rem;font-weight:700;display:flex}.navbar-brand .icon{font-size:1.5rem}.navbar-nav{gap:4px;list-style:none;display:flex}.navbar-nav a{border-radius:var(--radius);color:var(--gray-600);padding:8px 16px;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .15s}.navbar-nav a:hover{background:var(--gray-100);color:var(--gray-900)}.navbar-nav a.active{background:var(--primary-light);color:var(--primary)}.navbar-user{align-items:center;gap:12px;display:flex}.navbar-user span{color:var(--gray-500);font-size:.85rem}.page-container{max-width:1300px;margin:0 auto;padding:24px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;display:flex}.page-header h2{color:var(--gray-900);font-size:1.4rem}.card{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;margin-bottom:24px;padding:24px}.card-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.card-header h3{color:var(--gray-800);font-size:1.05rem}.table-container{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{text-align:left;border-bottom:1px solid var(--gray-200);padding:10px 14px}th{background:var(--gray-50);color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:600}tr:hover td{background:var(--gray-50)}.badge{border-radius:99px;padding:2px 10px;font-size:.75rem;font-weight:600;display:inline-block}.badge-success{background:var(--success-light);color:var(--success)}.badge-danger{background:var(--danger-light);color:var(--danger)}.badge-warning{background:var(--warning-light);color:var(--warning)}.form-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.modal-overlay{z-index:200;background:#00000080;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:600px;max-height:90vh;box-shadow:var(--shadow-lg);background:#fff;border-radius:12px;padding:32px;animation:.25s slideUp;overflow-y:auto}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal h3{color:var(--gray-900);margin-bottom:24px;font-size:1.15rem}.modal-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.alert{border-radius:var(--radius);margin-bottom:16px;padding:12px 16px;font-size:.875rem}.alert-error{background:var(--danger-light);color:var(--danger)}.alert-success{background:var(--success-light);color:var(--success)}.alert-info{background:var(--primary-light);color:var(--primary)}.alert-warning{background:var(--warning-light);color:#92400e}.empty-state{text-align:center;color:var(--gray-400);padding:48px 24px}.empty-state .icon{margin-bottom:12px;font-size:3rem}.kiosko-container{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 50%,#1d4ed8 100%);flex-direction:column;align-items:center;min-height:100vh;padding:20px;display:flex}.kiosko-header{color:#fff;text-align:center;margin-bottom:24px}.kiosko-header h1{margin-bottom:8px;font-size:2rem;font-weight:700}.kiosko-header .fecha{opacity:.85;font-size:1.1rem}.kiosko-main{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;width:100%;max-width:1200px;display:flex}.kiosko-camara{box-shadow:var(--shadow-lg);background:#fff;border-radius:12px;flex:1;min-width:400px;max-width:640px;padding:20px}.kiosko-camara h3{text-align:center;color:var(--gray-700);margin-bottom:12px}.video-wrapper{aspect-ratio:4/3;background:#000;border-radius:8px;position:relative;overflow:hidden}.video-wrapper video{object-fit:cover;width:100%;height:100%}.video-wrapper canvas{width:100%;height:100%;position:absolute;top:0;left:0}.kiosko-info{box-shadow:var(--shadow-lg);background:#fff;border-radius:12px;width:340px;padding:24px}.kiosko-info h3{color:var(--gray-700);text-align:center;margin-bottom:16px}.empleado-detectado{text-align:center;padding:20px 0}.empleado-detectado .nombre{color:var(--gray-900);margin-bottom:4px;font-size:1.3rem;font-weight:700}.empleado-detectado .codigo{color:var(--gray-500);margin-bottom:16px;font-size:.9rem}.marcas-hoy{border-top:1px solid var(--gray-200);margin-top:16px;padding-top:16px}.marcas-hoy h4{color:var(--gray-600);margin-bottom:12px;font-size:.85rem}.marca-item{background:var(--gray-50);border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:6px;padding:8px 10px;font-size:.85rem;display:flex}.marca-item .tipo{color:var(--gray-700);font-weight:600}.marca-item .hora{color:var(--primary);font-weight:600}.reconocimiento-status{text-align:center;color:var(--gray-500);margin-top:12px;font-size:.85rem}.reconocimiento-status.success{color:var(--success)}.reconocimiento-status.error{color:var(--danger)}.acciones-rapidas{gap:8px;margin-top:12px;display:flex}.tabs{border-bottom:2px solid var(--gray-200);gap:2px;margin-bottom:24px;display:flex}.tab{cursor:pointer;color:var(--gray-500);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:10px 20px;font-size:.9rem;font-weight:500;transition:all .15s}.tab:hover{color:var(--gray-700)}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}@media (width<=768px){.navbar{flex-wrap:wrap;height:auto;padding:8px 12px}.navbar-nav{gap:0}.navbar-nav a{padding:6px 10px;font-size:.8rem}.kiosko-main{flex-direction:column;align-items:center}.kiosko-camara{min-width:100%}.kiosko-info{width:100%}.form-row{grid-template-columns:1fr}}