/* ============================================
   ACVOLT MaestroAC - styles.css
   Extracted from monolithic index.html
   Generated: 2026-02-25
   ============================================ */

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

    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f2f5; min-height: 100vh; color: #1e293b; }

    .container { max-width: 600px; margin: 0 auto; padding: 20px; min-height: 100vh; }

    .screen { display: none; }

    .screen.active { display: flex !important; flex-direction: column; }

    .header { text-align: center; padding: 8px 0 4px; }

    .logo { font-size: 50px; margin-bottom: 10px; }

    .logo-img { max-width: 140px; height: auto; margin-bottom: 5px; }

    h1 { font-size: 28px; margin-bottom: 5px; }

    h2 { font-size: 22px; color: #E31937; margin-bottom: 10px; }

    .subtitle { color: #64748b; font-size: 16px; }

    .card { background: #ffffff; border-radius: 15px; padding: 12px; margin: 6px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; }

    .form-group { margin-bottom: 20px; }

    .form-group label { display: block; margin-bottom: 8px; color: #64748b; font-size: 14px; }

    .form-group input { width: 100%; padding: 15px; border: 2px solid #e2e8f0; border-radius: 10px; background: #f8fafc; color: #1e293b; font-size: 16px; }

    .form-group input::placeholder { color: #94a3b8; }

    .form-group input:focus { outline: none; border-color: #f39c12; background: #fff; }

    .btn { width: 100%; padding: 10px; border: none; border-radius: 12px; font-size: 14px; font-weight: bold; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }

    .btn-primary { background: linear-gradient(135deg, #E31937, #C62828); color: white; }

    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(227,25,55,0.3); }

    .btn-secondary { background: #f0f2f5; color: #1e293b; margin-top: 6px; border: 1px solid #e2e8f0; }

    .btn-secondary:hover { background: #e2e8f0; }

    .level-card { background: #ffffff; border-radius: 12px; padding: 15px 18px; margin: 8px 0; cursor: pointer; transition: all 0.3s; display: flex; justify-content: space-between; align-items: center; }

    .level-card:hover { background: #f8fafc; transform: translateX(5px); border-color: #f39c12; }

    .level-info h3 { font-size: 18px; margin-bottom: 5px; }

    .level-icon { font-size: 30px; }

    .progress-bar { height: 8px; background: #e2e8f0; border-radius: 4px; margin-top: 10px; overflow: hidden; }

    .progress-fill { height: 100%; background: #f39c12; border-radius: 4px; transition: width 0.5s; }

    .progress-text { font-size: 12px; color: #64748b; margin-top: 5px; }

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

    .question-count { background: #e2e8f0; padding: 8px 15px; border-radius: 20px; font-size: 14px; color: #1e293b; }

    .question-category { background: #f39c12; padding: 5px 12px; border-radius: 15px; font-size: 12px; color: #000; }

    .question-text { font-size: 20px; line-height: 1.5; margin-bottom: 25px; padding: 20px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; }

    .options { display: flex; flex-direction: column; gap: 12px; }

    .option { padding: 18px; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 15px; }

    .option:hover:not(.disabled) { background: #fff; border-color: #f39c12; }

    .option.correct { background: rgba(39,174,96,0.3); border-color: #27ae60; }

    .option.incorrect { background: rgba(231,76,60,0.3); border-color: #e74c3c; }

    .option.disabled { cursor: not-allowed; opacity: 0.7; }

    .option-letter { width: 35px; height: 35px; background: #e2e8f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }

    .option.correct .option-letter { background: #27ae60; }

    .option.incorrect .option-letter { background: #e74c3c; }

    .feedback { margin-top: 20px; padding: 15px; border-radius: 12px; display: none; }

    .feedback.show { display: block; }

    .feedback.correct { background: rgba(39,174,96,0.2); border: 1px solid #27ae60; }

    .feedback.incorrect { background: rgba(231,76,60,0.2); border: 1px solid #e74c3c; }

    .results { text-align: center; }

    .score-circle { width: 180px; height: 180px; margin: 30px auto; position: relative; }

    .score-circle svg { transform: rotate(-90deg); }

    .score-bg { fill: none; stroke: #e2e8f0; stroke-width: 12; }

    .score-fill { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s ease-out; }

    .score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

    .score-value { font-size: 48px; font-weight: bold; }

    .score-label { font-size: 14px; color: #64748b; }

    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 25px 0; }

    .stat { background: #f8fafc; padding: 20px 10px; border-radius: 12px; text-align: center; }

    .stat-value { font-size: 28px; font-weight: bold; }

    .stat-label { font-size: 12px; color: #64748b; margin-top: 5px; }

    .stat.correct .stat-value { color: #27ae60; }

    .stat.incorrect .stat-value { color: #e74c3c; }

    .stat.time .stat-value { color: #3498db; }

    .greeting { font-size: 18px; color: #f39c12; margin-bottom: 5px; }

    .back-btn { background: #e2e8f0; border: none; color: #1e293b; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; }

    .back-btn:hover { background: #cbd5e1; }

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

    /* Study Sections Styles */

    .study-category-card { background: #ffffff; border-radius: 15px; padding: 20px; margin: 12px 0; cursor: pointer; transition: all 0.3s; display: flex; justify-content: space-between; align-items: center; }

    .study-category-card:hover { background: #f8fafc; transform: translateX(5px); }

    .study-category-info h3 { font-size: 18px; margin-bottom: 5px; }

    .study-category-info p { font-size: 14px; color: #64748b; }

    .study-category-icon { font-size: 30px; }

    .study-question-card { background: #f8fafc; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #f39c12; }

    .study-question-text { font-size: 18px; line-height: 1.5; margin-bottom: 15px; color: #1e293b; }

    .study-options { margin-bottom: 15px; }

    .study-option { padding: 12px 15px; margin: 8px 0; background: #ffffff; border-radius: 8px; display: flex; align-items: center; gap: 12px; }

    .study-option.correct-answer { background: rgba(39,174,96,0.2); border: 1px solid #27ae60; }

    .study-option-letter { width: 28px; height: 28px; background: #e2e8f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; flex-shrink: 0; }

    .study-option.correct-answer .study-option-letter { background: #27ae60; }

    .study-explanation { background: #fff8e7; border-radius: 8px; padding: 15px; margin-top: 10px; border-left: 3px solid #f39c12; }

    .study-explanation-title { font-weight: bold; color: #f39c12; margin-bottom: 5px; font-size: 14px; }

    .study-explanation-text { color: #64748b; font-size: 14px; line-height: 1.5; }

    .study-question-number { background: #f39c12; color: #000; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; display: inline-block; margin-bottom: 10px; }

    .study-level-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

    .study-level-tab { padding: 10px 20px; background: #e2e8f0; border: none; border-radius: 20px; color: #1e293b; cursor: pointer; transition: all 0.3s; font-size: 14px; }

    .study-level-tab:hover { background: #cbd5e1; }

    .study-level-tab.active { background: #f39c12; color: #000; }

    .study-back-nav { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }

    .study-breadcrumb { color: #64748b; font-size: 14px; }

    /* Video Lesson Styles */

    .video-lesson-card { background: #ffffff; border-radius: 15px; padding: 20px; margin: 12px 0; cursor: pointer; transition: all 0.3s; display: flex; justify-content: space-between; align-items: center; }

    .video-lesson-card:hover { background: #f8fafc; transform: translateX(5px); }

    .video-lesson-info h3 { font-size: 18px; margin-bottom: 5px; }

    .video-lesson-info p { font-size: 14px; color: #64748b; }

    .video-lesson-icon { font-size: 30px; }

    .video-lesson-progress { margin-top: 8px; }

    .video-progress-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }

    .video-progress-fill { height: 100%; background: #27ae60; border-radius: 3px; transition: width 0.3s; }

    .video-progress-text { font-size: 11px; color: #64748b; margin-top: 4px; }

    .video-player-container { background: #000; border-radius: 12px; overflow: hidden; margin-bottom: 20px; position: relative; }

    .video-player-container video { width: 100%; display: block; }

    .video-player-container iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }

    .video-info { margin-bottom: 20px; }

    .video-title { font-size: 20px; margin-bottom: 8px; }

    .video-description { color: #64748b; font-size: 14px; line-height: 1.5; }

    .video-controls { display: flex; flex-direction: column; gap: 10px; }

    .video-status { display: flex; align-items: center; gap: 10px; padding: 15px; background: #f8fafc; border-radius: 12px; margin-bottom: 15px; }

    .video-status-icon { font-size: 24px; }

    .video-status-text { flex: 1; }

    .video-status-title { font-weight: bold; }

    .video-status-detail { font-size: 12px; color: #64748b; }

    .video-completed-badge { background: rgba(39,174,96,0.2); border: 1px solid #27ae60; }

    .video-in-progress-badge { background: rgba(243,156,18,0.2); border: 1px solid #f39c12; }

    .btn-video-primary { background: linear-gradient(135deg, #27ae60, #2ecc71); }

    .btn-video-primary:hover { box-shadow: 0 10px 30px rgba(39,174,96,0.3); }

    .btn-video-completed { background: rgba(39,174,96,0.3); border: 2px solid #27ae60; cursor: default; }

    .btn-video-secondary { background: #f0f2f5; border: 1px solid #e2e8f0; color: #1e293b; }

    .btn-video-secondary:hover { background: #e2e8f0; }

    .video-lesson-completed { border-left: 4px solid #27ae60; }

    /* YouTube Video Integration Styles */

    .video-level-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; justify-content: center; }

    .video-level-tab { padding: 10px 16px; background: #e2e8f0; border: none; border-radius: 20px; color: #1e293b; cursor: pointer; transition: all 0.3s; font-size: 13px; }

    .video-level-tab:hover { background: #cbd5e1; }

    .video-level-tab.active { background: #f39c12; color: #000; font-weight: bold; }

    .video-progress-summary { display: flex; justify-content: space-between; padding: 12px 15px; background: #f8fafc; border-radius: 10px; margin-bottom: 15px; font-size: 14px; }

    .video-category-section { margin-bottom: 20px; }

    .video-category-header { background: rgba(243,156,18,0.2); padding: 12px 15px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }

    .video-category-header h3 { font-size: 16px; color: #f39c12; margin: 0; }

    .video-card { background: #ffffff; border-radius: 12px; padding: 12px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s; display: flex; gap: 12px; align-items: center; }

    .video-card:hover { background: #f8fafc; transform: translateX(5px); }

    .video-thumbnail { width: 120px; height: 68px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(0,0,0,0.3); }

    .video-card-info { flex: 1; min-width: 0; }

    .video-card-info h4 { font-size: 14px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .video-card-info p { font-size: 12px; color: #64748b; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    .video-card-meta { font-size: 11px; color: #888; display: flex; gap: 10px; }

    .video-card.completed { border-left: 3px solid #27ae60; }

    .video-card.in-progress { border-left: 3px solid #f39c12; }

    .youtube-embed { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 12px; }

    .video-lesson-in-progress { border-left: 4px solid #f39c12; }

    /* Certificates Styles */

    .cert-qr-code { margin: 8px auto 0; }

    .cert-qr-code svg { display: block; margin: 0 auto; }

    .share-cert-btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

    .share-cert-btn { padding: 8px 14px; border: none; border-radius: 8px; font-size: 12px; font-weight: bold; cursor: pointer; color: white; display: flex; align-items: center; gap: 5px; }

    .share-cert-btn.whatsapp { background: #25D366; }

    .share-cert-btn.facebook { background: #1877F2; }

    .share-cert-btn.twitter { background: #1DA1F2; }

    .share-cert-btn.linkedin { background: #0A66C2; }

    .share-cert-btn.copy-link { background: #64748b; }

    .cert-congrats-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; animation: fadeIn 0.3s; }

    @keyframes confettiFall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

    .confetti-piece { position: fixed; width: 10px; height: 10px; top: -10px; animation: confettiFall 3s ease-in forwards; z-index: 10000; }



    /* Onboarding Styles */

    .onboarding-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; }

    .onboarding-card { background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 20px; padding: 30px; max-width: 420px; width: 100%; text-align: center; border: 2px solid #f39c12; max-height: 90vh; overflow-y: auto; }

    .onboarding-step { display: none; }

    .onboarding-step.active { display: block; }

    .onboarding-dots { display: flex; justify-content: center; gap: 8px; margin: 20px 0 15px; }

    .onboarding-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.3s; }

    .onboarding-dot.active { background: #f39c12; transform: scale(1.3); }

    .onboarding-dot.completed { background: #27ae60; }

    .certificates-header { text-align: center; padding: 20px 0; }

    .certificate-card { background: #ffffff; border-radius: 15px; padding: 25px; margin: 15px 0; border: 2px solid rgba(255,215,0,0.3); position: relative; overflow: hidden; }

    .certificate-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #f39c12, #ffd700, #f39c12); }

    .certificate-badge { width: 70px; height: 70px; background: linear-gradient(135deg, #ffd700, #f39c12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 35px; margin: 0 auto 15px; box-shadow: 0 4px 15px rgba(243,156,18,0.4); }

    .certificate-level { font-size: 22px; font-weight: bold; color: #ffd700; margin-bottom: 5px; text-align: center; }

    .certificate-title { font-size: 14px; color: #64748b; text-align: center; margin-bottom: 15px; }

    .certificate-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }

    .certificate-detail { background: #f8fafc; padding: 12px; border-radius: 8px; text-align: center; }

    .certificate-detail-label { font-size: 11px; color: #64748b; margin-bottom: 3px; }

    .certificate-detail-value { font-size: 16px; font-weight: bold; color: #1e293b; }

    .certificate-id { font-size: 10px; color: #94a3b8; text-align: center; margin-top: 15px; font-family: monospace; }

    .btn-print-cert { margin-top: 15px; background: linear-gradient(135deg, #3498db, #2980b9); font-size: 14px; padding: 12px; }

    .btn-print-cert:hover { background: linear-gradient(135deg, #2980b9, #1f6dad); }

    

    /* Print Certificate Styles */

    @media print {

      body * { visibility: hidden; }

      #printableCertificate, #printableCertificate * { visibility: visible; }

      #printableCertificate { position: absolute; left: 0; top: 0; width: 100%; }

    }

    

    .printable-certificate {

      display: none;

      width: 800px;

      min-height: 600px;

      margin: 0 auto;

      background: white;

      padding: 40px;

      font-family: 'Georgia', serif;

      color: #333;

      position: relative;

      border: 15px solid #16803c;

      box-shadow: inset 0 0 0 5px #E31937, inset 0 0 0 10px #FFD700;

    }

    

    .cert-header { text-align: center; margin-bottom: 30px; }

    .cert-logo { max-width: 200px; height: auto; margin-bottom: 15px; }

    .cert-school-name { font-size: 28px; font-weight: bold; color: #16803c; margin: 10px 0; letter-spacing: 2px; }

    .cert-subtitle { font-size: 14px; color: #666; letter-spacing: 1px; }

    

    .cert-body { text-align: center; margin: 30px 0; }

    .cert-title { font-size: 36px; color: #E31937; font-weight: bold; margin-bottom: 20px; letter-spacing: 3px; }

    .cert-level-badge { display: inline-block; background: linear-gradient(135deg, #FFD700, #FFA500); color: #333; padding: 10px 30px; border-radius: 25px; font-size: 20px; font-weight: bold; margin-bottom: 25px; }

    .cert-recipient { font-size: 16px; color: #666; margin-bottom: 10px; }

    .cert-recipient-name { font-size: 32px; color: #16803c; font-weight: bold; border-bottom: 2px solid #16803c; display: inline-block; padding-bottom: 5px; margin-bottom: 20px; }

    .cert-description { font-size: 14px; color: #555; line-height: 1.6; max-width: 600px; margin: 0 auto 25px; }

    

    .cert-details { display: flex; justify-content: space-around; margin: 30px 0; padding: 20px; background: #f9f9f9; border-radius: 10px; }

    .cert-detail-item { text-align: center; }

    .cert-detail-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; }

    .cert-detail-value { font-size: 18px; color: #333; font-weight: bold; margin-top: 5px; }

    

    .cert-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; }

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

    .cert-signature-line { width: 200px; border-bottom: 1px solid #333; margin-bottom: 5px; }

    .cert-signature-name { font-size: 14px; font-weight: bold; }

    .cert-signature-title { font-size: 11px; color: #666; }

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

    .cert-id-text { font-size: 10px; color: #888; margin-top: 10px; font-family: monospace; }

    

    .cert-seal { position: absolute; bottom: 30px; right: 140px; width: 80px; height: 80px; border: 3px solid #FFD700; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,165,0,0.1)); }

    .cert-seal-text { font-size: 10px; text-align: center; color: #B8860B; font-weight: bold; text-transform: uppercase; }

    .no-certificates { text-align: center; padding: 40px 20px; }

    .no-certificates-icon { font-size: 60px; margin-bottom: 20px; opacity: 0.5; }

    .no-certificates-text { color: #64748b; font-size: 16px; line-height: 1.6; }

    .certificates-nav-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(243,156,18,0.2)); border: 1px solid rgba(255,215,0,0.3); }

    .certificates-nav-btn:hover { background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(243,156,18,0.3)); }

    .certificate-earned-badge { position: absolute; top: 15px; right: 15px; background: #27ae60; color: white; padding: 5px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; }

    /* Mi Perfil Styles */

    .profile-section { border-bottom: 1px solid #e2e8f0; padding-bottom: 20px; }

    .profile-section:last-of-type { border-bottom: none; }

    .profile-field { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f2f5; }

    .profile-field:last-child { border-bottom: none; }

    

    /* Avatar and Badge System */

    .profile-avatar-section { text-align: center; padding: 20px 0 30px; }

    .profile-avatar-container { position: relative; display: inline-block; }

    .profile-avatar { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 60px; margin: 0 auto 15px; position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.15); border: 4px solid #e2e8f0; }

    .profile-avatar.nivel-nuevo { background: linear-gradient(135deg, #607D8B, #455A64); }

    .profile-avatar.nivel-principiante { background: linear-gradient(135deg, #4CAF50, #2E7D32); }

    .profile-avatar.nivel-intermedio { background: linear-gradient(135deg, #2196F3, #16803c); }

    .profile-avatar.nivel-avanzado { background: linear-gradient(135deg, #9C27B0, #6A1B9A); }

    .profile-avatar.nivel-elite { background: linear-gradient(135deg, #FF9800, #E65100); }

    .profile-avatar.nivel-platino { background: linear-gradient(135deg, #FFD700, #FFA000); border-color: #FFD700; }

    .profile-badge { position: absolute; bottom: -5px; right: -5px; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 3px solid #e2e8f0; }

    .profile-badge.badge-nuevo { background: linear-gradient(135deg, #607D8B, #455A64); }

    .profile-badge.badge-principiante { background: linear-gradient(135deg, #4CAF50, #2E7D32); }

    .profile-badge.badge-intermedio { background: linear-gradient(135deg, #2196F3, #16803c); }

    .profile-badge.badge-avanzado { background: linear-gradient(135deg, #9C27B0, #6A1B9A); }

    .profile-badge.badge-elite { background: linear-gradient(135deg, #FF9800, #E65100); }

    .profile-badge.badge-platino { background: linear-gradient(135deg, #FFD700, #FFA000); }

    .profile-level-title { font-size: 22px; font-weight: bold; margin-bottom: 5px; }

    .profile-level-title.titulo-nuevo { color: #90A4AE; }

    .profile-level-title.titulo-principiante { color: #81C784; }

    .profile-level-title.titulo-intermedio { color: #64B5F6; }

    .profile-level-title.titulo-avanzado { color: #BA68C8; }

    .profile-level-title.titulo-elite { color: #FFB74D; }

    .profile-level-title.titulo-platino { color: #FFD700; text-shadow: 0 0 10px rgba(255,215,0,0.5); }

    .profile-level-subtitle { color: #64748b; font-size: 14px; }

    .profile-progress-bar { width: 80%; max-width: 250px; height: 8px; background: #e2e8f0; border-radius: 4px; margin: 15px auto 5px; overflow: hidden; }

    .profile-progress-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

    .profile-progress-fill.progress-nuevo { background: #607D8B; }

    .profile-progress-fill.progress-principiante { background: linear-gradient(90deg, #4CAF50, #81C784); }

    .profile-progress-fill.progress-intermedio { background: linear-gradient(90deg, #2196F3, #64B5F6); }

    .profile-progress-fill.progress-avanzado { background: linear-gradient(90deg, #9C27B0, #BA68C8); }

    .profile-progress-fill.progress-elite { background: linear-gradient(90deg, #FF9800, #FFB74D); }

    .profile-progress-fill.progress-platino { background: linear-gradient(90deg, #FFD700, #FFEB3B); }

    .profile-progress-text { color: #64748b; font-size: 12px; }

    .profile-badges-earned { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

    .mini-badge { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0.3; transition: all 0.3s; }

    .mini-badge.earned { opacity: 1; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transform: scale(1.1); }

    .mini-badge.badge-principiante { background: linear-gradient(135deg, #4CAF50, #2E7D32); }

    .mini-badge.badge-intermedio { background: linear-gradient(135deg, #2196F3, #16803c); }

    .mini-badge.badge-avanzado { background: linear-gradient(135deg, #9C27B0, #6A1B9A); }

    .mini-badge.badge-elite { background: linear-gradient(135deg, #FF9800, #E65100); }

    .mini-badge.badge-platino { background: linear-gradient(135deg, #FFD700, #FFA000); }

    .profile-label { color: #64748b; font-size: 14px; }

    .profile-value { color: #1e293b; font-size: 14px; font-weight: 500; text-align: right; max-width: 60%; word-break: break-word; }

    .technician-number-card { background: linear-gradient(135deg, rgba(243,156,18,0.2) 0%, rgba(230,126,34,0.2) 100%); border: 2px solid rgba(243,156,18,0.5); border-radius: 15px; padding: 25px; text-align: center; margin-top: 10px; }

    .technician-number-value { font-size: 24px; font-weight: bold; color: #f39c12; font-family: monospace; letter-spacing: 2px; margin-bottom: 10px; word-break: break-all; }

    .technician-number-date { font-size: 12px; color: #64748b; }

    .profile-nav-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, rgba(52,152,219,0.2), rgba(41,128,185,0.2)); border: 1px solid rgba(52,152,219,0.3); }

    .profile-nav-btn:hover { background: linear-gradient(135deg, rgba(52,152,219,0.3), rgba(41,128,185,0.3)); }

    /* Login Screen Styles */

    /* ========== MAINTENANCE BANNER ========== */

    .maintenance-overlay {

      position: fixed; top: 0; left: 0; right: 0; bottom: 0;

      background: rgba(15, 23, 42, 0.85);

      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);

      z-index: 9999; display: flex; align-items: center; justify-content: center;

      padding: 20px;

    }

    .maintenance-card {

      background: #ffffff; border-radius: 20px; padding: 40px 30px;

      max-width: 420px; width: 100%; text-align: center;

      box-shadow: 0 20px 60px rgba(0,0,0,0.3);

      position: relative; overflow: hidden;

      animation: maintSlideUp 0.6s ease;

    }

    @keyframes maintSlideUp {

      from { opacity: 0; transform: translateY(40px); }

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

    }

    .maintenance-card::before {

      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;

      background: linear-gradient(90deg, #E31937, #f39c12, #E31937);

      background-size: 200% 100%;

      animation: maintShimmer 2s ease-in-out infinite;

    }

    @keyframes maintShimmer {

      0%, 100% { background-position: 0% 50%; }

      50% { background-position: 100% 50%; }

    }

    .maint-icon {

      width: 80px; height: 80px; margin: 0 auto 20px;

      background: linear-gradient(135deg, #E31937, #f39c12);

      border-radius: 50%; display: flex; align-items: center; justify-content: center;

      font-size: 40px;

      animation: maintPulse 2s ease-in-out infinite;

      box-shadow: 0 8px 30px rgba(227, 25, 55, 0.3);

    }

    @keyframes maintPulse {

      0%, 100% { transform: scale(1); box-shadow: 0 8px 30px rgba(227,25,55,0.3); }

      50% { transform: scale(1.08); box-shadow: 0 12px 40px rgba(227,25,55,0.5); }

    }

    .maint-status {

      display: inline-flex; align-items: center; gap: 8px;

      background: rgba(227,25,55,0.1); border: 1px solid rgba(227,25,55,0.3);

      border-radius: 50px; padding: 6px 16px; margin-bottom: 16px;

      font-size: 11px; font-weight: 700; color: #E31937;

      text-transform: uppercase; letter-spacing: 1.5px;

    }

    .maint-dot {

      width: 8px; height: 8px; background: #E31937; border-radius: 50%;

      animation: maintBlink 1.2s ease-in-out infinite;

    }

    @keyframes maintBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

    .maintenance-card h2 {

      font-size: 24px; color: #1e293b; margin-bottom: 12px; line-height: 1.3;

    }

    .maintenance-card h2 span { color: #E31937; }

    .maintenance-card .maint-msg {

      font-size: 15px; color: #64748b; line-height: 1.7; margin-bottom: 24px;

    }

    .maintenance-card .maint-msg strong { color: #1e293b; }

    .maint-progress {

      margin-bottom: 20px;

    }

    .maint-progress-label {

      display: flex; justify-content: space-between;

      font-size: 11px; color: #94a3b8; font-weight: 600; margin-bottom: 6px;

    }

    .maint-progress-bar {

      height: 6px; background: #e2e8f0; border-radius: 50px; overflow: hidden;

    }

    .maint-progress-fill {

      height: 100%; width: 30%;

      background: linear-gradient(90deg, #E31937, #f39c12);

      border-radius: 50px;

      animation: maintProgress 3s ease-in-out infinite;

    }

    @keyframes maintProgress {

      0% { width: 20%; } 50% { width: 60%; } 100% { width: 20%; }

    }

    .maint-gears {

      display: flex; justify-content: center; gap: 2px; margin-bottom: 8px;

    }

    .maint-gear { font-size: 22px; display: inline-block; }

    .maint-gear-1 { animation: spin 3s linear infinite; }

    .maint-gear-2 { animation: spin 3s linear infinite reverse; margin-top: 6px; font-size: 18px; }

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

    .maint-footer {

      font-size: 11px; color: #94a3b8; padding-top: 16px;

      border-top: 1px solid #e2e8f0;

    }

    .maint-footer strong { color: #64748b; }

    .maint-brand {

      font-size: 12px; color: #94a3b8; letter-spacing: 2px;

      text-transform: uppercase; margin-bottom: 4px; font-weight: 600;

    }

    /* ========== END MAINTENANCE ========== */



    /* FLOATING HOME BUTTON */

    .home-fab{position:fixed;top:16px;right:16px;z-index:800;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(243,156,18,0.4);color:#f39c12;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.3);transition:all 0.3s}

    .home-fab:hover{transform:scale(1.1);border-color:#f39c12;box-shadow:0 4px 20px rgba(243,156,18,0.3)}



    /* AI PAYWALL MODAL */

    .paywall-overlay{position:fixed;inset:0;z-index:10000;background:rgba(10,10,20,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}

    .paywall-overlay.active{display:flex}

    .paywall-card{background:#fff;border-radius:20px;max-width:400px;width:100%;padding:36px 28px;text-align:center;position:relative;overflow:hidden;animation:pwSlide 0.4s ease}

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

    .paywall-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#E31937,#f39c12)}

    .pw-icon{font-size:50px;margin-bottom:12px}

    .pw-title{font-size:22px;font-weight:800;color:#1e293b;margin-bottom:6px}

    .pw-subtitle{font-size:14px;color:#64748b;margin-bottom:20px}

    .pw-features{text-align:left;margin-bottom:24px}

    .pw-feature{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:#334155}

    .pw-feature span{color:#27ae60;font-size:16px}

    .pw-price{font-size:32px;font-weight:800;color:#E31937;margin-bottom:4px}

    .pw-period{font-size:13px;color:#94a3b8;margin-bottom:20px}

    .pw-btn{width:100%;padding:16px;border:none;border-radius:12px;background:linear-gradient(135deg,#E31937,#C62828);color:#fff;font-size:17px;font-weight:700;cursor:pointer;transition:all 0.2s}

    .pw-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(227,25,55,0.3)}

    .pw-close{margin-top:14px;background:none;border:none;color:#94a3b8;font-size:14px;cursor:pointer;padding:8px}

    .pw-close:hover{color:#64748b}



    /* AI CHARACTER COUNTER */

    .ai-chars-banner{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:799;background:rgba(26,26,46,0.95);border:1px solid rgba(243,156,18,0.3);border-radius:50px;padding:6px 16px;font-size:12px;color:#f39c12;font-weight:600;display:none;align-items:center;gap:6px;box-shadow:0 4px 15px rgba(0,0,0,0.3);white-space:nowrap}

    .ai-chars-banner.show{display:inline-flex}



    .login-error { color: #e74c3c; background: rgba(231,76,60,0.2); padding: 12px; border-radius: 8px; margin-bottom: 15px; text-align: center; display: none; }

    .login-error.show { display: block; }

    .form-group input[type="password"] { width: 100%; padding: 15px; border: 2px solid #e2e8f0; border-radius: 10px; background: #f8fafc; color: #1e293b; font-size: 16px; }

    /* Admin Section Styles */

    .admin-link { color: #f39c12; text-decoration: underline; cursor: pointer; font-size: 14px; margin-top: 15px; display: inline-block; }

    .admin-link:hover { color: #ffd700; }

    .admin-container { max-width: 1400px !important; width:100% !important; margin:0 auto; padding:15px 25px !important; min-height:100vh; }

    /* When admin dashboard is active, expand the parent container */

    #adminDashboardScreen.active { position:fixed; top:0; left:0; right:0; bottom:0; z-index:400; overflow-y:auto; background:linear-gradient(135deg,#fef9f0,#fff7ed); width:100vw !important; max-width:100vw !important; padding:0; }

    #adminTechnicianProfileScreen.active { position:fixed; top:0; left:0; right:0; bottom:0; z-index:400; overflow-y:auto; background:linear-gradient(135deg,#fef9f0,#fff7ed); width:100vw !important; max-width:100vw !important; padding:0; }

    .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }

    .admin-title { display: flex; align-items: center; gap: 10px; }

    .admin-title h1 { font-size: 24px; margin: 0; }

    .admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; }

    .admin-stat-card { background: #f8fafc; border-radius: 12px; padding: 20px; text-align: center; transition: transform 0.2s, background 0.2s; }

    .admin-stat-card:hover { background: #ffffff; transform: translateY(-2px); }

    .admin-stat-value { font-size: 32px; font-weight: bold; color: #f39c12; }

    .admin-stat-label { font-size: 12px; color: #64748b; margin-top: 5px; }

    .admin-section { background: #f8fafc; border-radius: 15px; padding: 20px; margin-bottom: 20px; }

    .admin-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; color: #1e293b; }

    .admin-section-title { font-size: 15px; font-weight: 700; color: #1e293b; letter-spacing:0.3px; }

    .admin-nav-btn { background:#ffffff;border:1px solid #e2e8f0;color:#64748b;padding:6px 12px;border-radius:8px;font-size:10px;cursor:pointer;transition:all 0.2s;font-weight:500; }

    .admin-nav-btn:hover { background:#f39c12;color:#ffffff;border-color:#f39c12;box-shadow:0 2px 8px rgba(243,156,18,0.3); }

    /* Admin 2-column layout for wide screens */

    .admin-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

    .admin-grid-full { grid-column: 1 / -1; }

    /* Force landscape message on mobile portrait */

    .admin-landscape-msg { display:none; text-align:center; padding:60px 20px; }

    .admin-landscape-msg .icon { font-size:60px; margin-bottom:15px; }

    .admin-landscape-msg p { color:#64748b; font-size:16px; line-height:1.6; }

    .admin-main-content { display:block; }

    @media (max-width: 768px) and (orientation: portrait) {

      .admin-landscape-msg { display:block; }

      .admin-main-content { display:none; }

    }

    @media (max-width: 900px) {

      .admin-grid-2col { grid-template-columns: 1fr; }

      .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }

    }

    .technician-list { max-height: 400px; overflow-y: auto; }

    .technician-card { background: #ffffff; border-radius: 10px; padding: 15px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s; border-left: 4px solid #3498db; }

    .technician-card:hover { background: #f8fafc; transform: translateX(5px); }

    .technician-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

    .technician-name { font-size: 16px; font-weight: bold; color: #1e293b; }

    .technician-id { font-size: 11px; color: #64748b; font-family: monospace; }

    .technician-meta { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; color: #64748b; }

    .technician-meta-item { display: flex; align-items: center; gap: 5px; }

    .admin-filter-bar { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }

    .admin-filter-input { padding: 10px 15px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; color: #1e293b; font-size: 14px; flex: 1; min-width: 200px; }

    .admin-filter-input::placeholder { color: #94a3b8; }

    .admin-filter-select { padding: 10px 15px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; color: #1e293b; font-size: 14px; cursor: pointer; }

    .admin-filter-select option { background: #ffffff; color: #1e293b; }

    /* Admin Profile Detail */

    .admin-profile-card { background: #ffffff; border-radius: 15px; padding: 25px; margin-bottom: 20px; }

    .admin-profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }

    .admin-profile-avatar { width: 80px; height: 80px; background: linear-gradient(135deg, #f39c12, #e67e22); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; }

    .admin-profile-info h2 { margin: 0 0 5px 0; font-size: 22px; }

    .admin-profile-info p { margin: 0; color: #64748b; font-size: 14px; }

    .admin-profile-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }

    .admin-detail-item { background: #f8fafc; padding: 12px; border-radius: 8px; }

    .admin-detail-label { font-size: 11px; color: #64748b; margin-bottom: 3px; text-transform: uppercase; }

    .admin-detail-value { font-size: 14px; color: #1e293b; font-weight: 500; }

    /* Progress Timeline */

    .progress-timeline { margin-top: 20px; }

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

    .timeline-tabs { display: flex; gap: 8px; }

    .timeline-tab { padding: 8px 16px; border: none; border-radius: 20px; background: #e2e8f0; color: #1e293b; cursor: pointer; font-size: 13px; transition: all 0.3s; }

    .timeline-tab:hover { background: #cbd5e1; }

    .timeline-tab.active { background: #f39c12; color: #000; }

    .timeline-content { background: #f8fafc; border-radius: 12px; padding: 20px; }

    .timeline-entry { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid #e2e8f0; }

    .timeline-entry:last-child { border-bottom: none; }

    .timeline-date { min-width: 100px; color: #64748b; font-size: 13px; }

    .timeline-event { flex: 1; }

    .timeline-event-title { font-weight: bold; color: #1e293b; margin-bottom: 3px; }

    .timeline-event-detail { font-size: 13px; color: #64748b; }

    .timeline-empty { text-align: center; padding: 30px; color: #64748b; }

    /* Admin Charts */

    .admin-chart { background: #f8fafc; border-radius: 12px; padding: 20px; margin-bottom: 15px; }

    .admin-chart-title { font-size: 14px; color: #64748b; margin-bottom: 15px; }

    .admin-bar-chart { display: flex; flex-direction: column; gap: 10px; }

    .admin-bar-item { display: flex; align-items: center; gap: 10px; }

    .admin-bar-label { min-width: 100px; font-size: 13px; color: #1e293b; }

    .admin-bar-container { flex: 1; height: 24px; background: #e2e8f0; border-radius: 12px; overflow: hidden; }

    .admin-bar-fill { height: 100%; border-radius: 12px; transition: width 0.5s; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 11px; color: white; font-weight: bold; }

    .no-data-message { text-align: center; padding: 40px 20px; color: #64748b; }

    .no-data-icon { font-size: 50px; margin-bottom: 15px; opacity: 0.5; }

    /* Lock System Styles */

    .level-card.locked { opacity: 0.6; cursor: not-allowed; position: relative; border: 2px solid #fecaca; }

    .level-card.locked:hover { transform: none; background: #fff; }

    .cert-card, .membership-card { background: #ffffff; border-radius:12px; padding:10px 6px; text-align:center; cursor:pointer; transition: all 0.3s; border: 1px solid #e2e8f0; position:relative; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

    .cert-card:hover, .membership-card:hover { transform: translateY(-2px); background: #f8fafc; border-color: #f39c12; }

    .cert-icon { font-size:28px; margin-bottom:4px; }

    .cert-name { color:#1e293b; font-size:11px; font-weight:bold; line-height:1.2; margin-bottom:3px; }

    .cert-price { color:#f39c12; font-size:11px; font-weight:bold; }

    .cert-lock { position:absolute; top:4px; right:4px; font-size:10px; opacity:0.7; }

    .membership-card.bronze { border-color: rgba(205,127,50,0.5); background: linear-gradient(135deg, rgba(205,127,50,0.15), rgba(139,90,43,0.15)); }

    .membership-card.silver { border-color: rgba(192,192,192,0.5); background: linear-gradient(135deg, rgba(192,192,192,0.15), rgba(150,150,150,0.15)); }

    .membership-card.gold { border-color: rgba(255,215,0,0.5); background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(218,165,32,0.15)); }

    .level-locked-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); border-radius: 15px; display: flex; align-items: center; justify-content: center; }

    .level-locked-icon { font-size: 40px; }

    .matrix-unlock-modal { 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; }

    .matrix-unlock-content { background: linear-gradient(135deg, #1a5276 0%, #154360 100%); border-radius: 20px; padding: 30px; max-width: 400px; width: 90%; text-align: center; border: 2px solid #f39c12; }

    .matrix-unlock-content h3 { color: #f39c12; margin-bottom: 20px; font-size: 20px; }

    .matrix-unlock-content p { color: #64748b; margin-bottom: 20px; font-size: 14px; }

    .matrix-unlock-input { width: 100%; padding: 15px; border: 2px solid #e2e8f0; border-radius: 10px; background: #f8fafc; color: #1e293b; font-size: 16px; text-align: center; letter-spacing: 2px; font-family: monospace; margin-bottom: 15px; }

    .matrix-unlock-input:focus { outline: none; border-color: #f39c12; }

    .matrix-unlock-input::placeholder { color: #94a3b8; letter-spacing: normal; }

    .matrix-unlock-error { color: #e74c3c; background: rgba(231,76,60,0.2); padding: 10px; border-radius: 8px; margin-bottom: 15px; display: none; font-size: 14px; }

    .matrix-unlock-error.show { display: block; }

    .matrix-unlock-buttons { display: flex; gap: 10px; }

    .matrix-unlock-buttons .btn { flex: 1; padding: 15px; font-size: 14px; }

    .admin-lock-section { background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.3); border-radius: 12px; padding: 20px; margin-top: 20px; }

    .admin-lock-title { color: #e74c3c; font-size: 16px; font-weight: bold; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }

    .admin-lock-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e2e8f0; }

    .admin-lock-status:last-child { border-bottom: none; }

    .admin-lock-toggle { padding: 8px 16px; border-radius: 20px; border: none; cursor: pointer; font-size: 12px; font-weight: bold; transition: all 0.3s; }

    .admin-lock-toggle.locked { background: #e74c3c; color: white; }

    .admin-lock-toggle.unlocked { background: #27ae60; color: white; }

    .matrix-id-display { font-family: monospace; background: rgba(243,156,18,0.2); padding: 5px 10px; border-radius: 5px; color: #f39c12; font-size: 12px; }

    .admin-lock-disabled-notice { background: rgba(243,156,18,0.1); border: 1px solid rgba(243,156,18,0.3); border-radius: 8px; padding: 15px; margin-top: 15px; color: #f39c12; font-size: 13px; text-align: center; }


/* --- WOW Theme --- */
/* WOW THEME - Vibrant overrides */

body { background: linear-gradient(180deg, #f0f4ff 0%, #faf8ff 50%, #f0f4ff 100%) !important; }

.card { box-shadow: 0 4px 24px rgba(99,102,241,0.10), 0 1px 4px rgba(0,0,0,0.05) !important; border: 1px solid rgba(99,102,241,0.08) !important; border-radius: 20px !important; }

.form-group input:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 4px rgba(99,102,241,0.15) !important; }

.btn { border-radius: 14px !important; font-weight: 700 !important; transition: all 0.3s !important; }

.btn-primary { box-shadow: 0 4px 15px rgba(227,25,55,0.35) !important; }

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(227,25,55,0.45) !important; }

.btn-secondary { border: 2px solid #e0e7ff !important; }

.btn-secondary:hover { border-color: #6366f1 !important; box-shadow: 0 4px 16px rgba(99,102,241,0.15) !important; transform: translateY(-1px); }

.level-card { border: 2px solid #eef2ff !important; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(99,102,241,0.08) !important; transition: all 0.3s !important; }

.level-card:hover { transform: translateX(5px) !important; border-color: #6366f1 !important; box-shadow: 0 4px 20px rgba(99,102,241,0.2) !important; }

.progress-fill { background: linear-gradient(90deg, #6366f1, #8b5cf6) !important; }

.progress-text { color: #6366f1 !important; font-weight: 600 !important; }

.question-number { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: white !important; box-shadow: 0 2px 10px rgba(99,102,241,0.3) !important; }

.question-text { background: linear-gradient(135deg, #fafbff, #f0f4ff) !important; border: 1px solid #e0e7ff !important; border-radius: 16px !important; }

.option { border: 2px solid #eef2ff !important; border-radius: 14px !important; transition: all 0.3s !important; }

.option:hover:not(.disabled) { border-color: #6366f1 !important; box-shadow: 0 4px 16px rgba(99,102,241,0.15) !important; transform: translateY(-2px); }

.option.correct { border-color: #10b981 !important; background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important; box-shadow: 0 4px 16px rgba(16,185,129,0.2) !important; }

.option.incorrect { border-color: #ef4444 !important; background: linear-gradient(135deg, #fef2f2, #fee2e2) !important; }

.option-letter { background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important; color: #6366f1 !important; font-weight: 700 !important; border-radius: 12px !important; }

.score-fill { filter: drop-shadow(0 0 6px rgba(99,102,241,0.4)) !important; }

.stat { background: linear-gradient(135deg, #fafbff, #f0f4ff) !important; border: 1px solid #e0e7ff !important; border-radius: 16px !important; }

.stat-value { color: #6366f1 !important; font-weight: 800 !important; }

.video-lesson-card, .video-card { border: 2px solid #eef2ff !important; border-radius: 16px !important; box-shadow: 0 2px 10px rgba(99,102,241,0.06) !important; transition: all 0.3s !important; }

.video-lesson-card:hover, .video-card:hover { border-color: #6366f1 !important; box-shadow: 0 4px 20px rgba(99,102,241,0.15) !important; transform: translateY(-2px) !important; }

.video-level-tab, .study-level-tab { border: 2px solid #eef2ff !important; border-radius: 25px !important; transition: all 0.3s !important; }

.video-level-tab:hover, .study-level-tab:hover { border-color: #6366f1 !important; color: #6366f1 !important; }

.video-level-tab.active, .study-level-tab.active { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: white !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(99,102,241,0.35) !important; }

.study-category-card { border: 2px solid #eef2ff !important; border-radius: 16px !important; box-shadow: 0 2px 10px rgba(99,102,241,0.06) !important; transition: all 0.3s !important; }

.study-category-card:hover { border-color: #6366f1 !important; box-shadow: 0 4px 20px rgba(99,102,241,0.15) !important; transform: translateY(-2px) !important; }

.specialty-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important; }

.specialty-card:active { transform: scale(0.96); }

.cert-card, .membership-card { border: 2px solid #eef2ff !important; border-radius: 16px !important; box-shadow: 0 2px 10px rgba(99,102,241,0.08) !important; transition: all 0.3s !important; }

.cert-card:hover, .membership-card:hover { transform: translateY(-3px) !important; border-color: #6366f1 !important; box-shadow: 0 8px 25px rgba(99,102,241,0.2) !important; }

.certificate-card { box-shadow: 0 4px 20px rgba(255,215,0,0.15) !important; border-radius: 20px !important; }

.certificate-earned-badge { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important; }

.profile-avatar { box-shadow: 0 8px 30px rgba(99,102,241,0.2) !important; border: 4px solid #e0e7ff !important; }

.admin-stat-card { 

      background: #ffffff !important; 

      border: 1px solid #e2e8f0 !important; 

      border-radius: 12px !important; 

      box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; 

      transition: all 0.2s !important;

      color: #1e293b !important;

    }

    .admin-stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }

.admin-stat-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(99,102,241,0.15) !important; border-color: #6366f1 !important; }

.admin-section { 

      background: #ffffff !important; 

      border: 1px solid #e2e8f0 !important; 

      border-radius: 16px !important; 

      box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;

      padding: 20px !important;

    }

.technician-card { border-left: 4px solid #6366f1 !important; transition: all 0.3s !important; }

.technician-card:hover { box-shadow: 0 4px 16px rgba(99,102,241,0.12) !important; transform: translateX(5px) !important; }

.admin-lock-toggle.locked { background: linear-gradient(135deg, #ef4444, #dc2626) !important; box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important; }

.admin-lock-toggle.unlocked { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important; }

.timeline-tab.active { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: white !important; }



/* TEXT BRILLO */

h1, h2, h3, .level-info h3, .technician-name, .cert-name, .video-lesson-info h3, .study-category-info h3 { color: #000000 !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; }

.subtitle, .profile-level-subtitle, .study-breadcrumb, .certificate-title, .admin-chart-title, .video-progress-text, .progress-text, .timeline-date, .score-label { color: #4f46e5 !important; font-weight: 700 !important; }

.stat-value, .admin-stat-value { color: #4338ca !important; font-weight: 900 !important; text-shadow: 0 1px 3px rgba(67,56,202,0.15) !important; }

.btn-primary { background: linear-gradient(135deg, #E31937, #b91c1c) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; }

.option-text, .question-text, .profile-value, .admin-detail-value, .certificate-detail-value, .cert-detail-value, .admin-bar-label { color: #0f172a !important; font-weight: 600 !important; }

.profile-label, .certificate-detail-label, .cert-detail-label, .admin-detail-label, .stat-label, .admin-stat-label, .video-card-info p, .technician-meta, .technician-id { color: #475569 !important; }



/* PREMIUM BADGE ICONS - Metallic circles behind emojis */

.level-icon {

  font-size: 32px !important;

  width: 56px !important; height: 56px !important;

  display: flex !important; align-items: center !important; justify-content: center !important;

  border-radius: 50% !important;

  background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.12), inset 0 2px 4px rgba(255,255,255,0.8), inset 0 -2px 4px rgba(0,0,0,0.06) !important;

  border: 2px solid rgba(0,0,0,0.08) !important;

  position: relative !important;

}

.level-icon::after {

  content: '' !important;

  position: absolute !important;

  top: 3px !important; left: 3px !important; right: 3px !important; bottom: 3px !important;

  border-radius: 50% !important;

  border: 1.5px solid rgba(255,255,255,0.6) !important;

  pointer-events: none !important;

}

.cert-icon {

  font-size: 32px !important;

  width: 52px !important; height: 52px !important;

  display: inline-flex !important; align-items: center !important; justify-content: center !important;

  border-radius: 50% !important;

  background: linear-gradient(145deg, #fffbeb, #fde68a) !important;

  box-shadow: 0 4px 12px rgba(245,158,11,0.25), inset 0 2px 4px rgba(255,255,255,0.8) !important;

  border: 2px solid rgba(245,158,11,0.3) !important;

}

.mini-badge {

  font-size: 16px !important;

  width: 32px !important; height: 32px !important;

  display: inline-flex !important; align-items: center !important; justify-content: center !important;

  border-radius: 50% !important;

  background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;

  box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.8) !important;

  border: 1.5px solid rgba(0,0,0,0.08) !important;

}



/* Per-level badge colors */

.badge-principiante, .level-card:nth-child(1) .level-icon { background: linear-gradient(145deg, #d1fae5, #6ee7b7) !important; border-color: rgba(16,185,129,0.3) !important; box-shadow: 0 4px 12px rgba(16,185,129,0.2), inset 0 2px 4px rgba(255,255,255,0.6) !important; }

.badge-intermedio, .level-card:nth-child(2) .level-icon { background: linear-gradient(145deg, #dbeafe, #93c5fd) !important; border-color: rgba(59,130,246,0.3) !important; box-shadow: 0 4px 12px rgba(59,130,246,0.2), inset 0 2px 4px rgba(255,255,255,0.6) !important; }

.badge-avanzado, .level-card:nth-child(3) .level-icon { background: linear-gradient(145deg, #fef3c7, #fcd34d) !important; border-color: rgba(245,158,11,0.3) !important; box-shadow: 0 4px 12px rgba(245,158,11,0.25), inset 0 2px 4px rgba(255,255,255,0.6) !important; }

.badge-elite, .level-card:nth-child(4) .level-icon { background: linear-gradient(145deg, #ede9fe, #c4b5fd) !important; border-color: rgba(139,92,246,0.3) !important; box-shadow: 0 4px 12px rgba(139,92,246,0.2), inset 0 2px 4px rgba(255,255,255,0.6) !important; }

.badge-platino, .level-card:nth-child(5) .level-icon { background: linear-gradient(145deg, #ccfbf1, #5eead4) !important; border-color: rgba(20,184,166,0.3) !important; box-shadow: 0 4px 12px rgba(20,184,166,0.2), inset 0 2px 4px rgba(255,255,255,0.6) !important; }



/* Study category icons */

.study-category-card .level-icon { width: 48px !important; height: 48px !important; font-size: 28px !important; }



/* CERT COURSE CARDS - Bigger, 3-column grid */

div[style*="grid-template-columns: repeat(4, 1fr)"] {

  grid-template-columns: repeat(3, 1fr) !important;

  gap: 12px !important;

}

.cert-card {

  padding: 16px 10px !important;

  border-radius: 16px !important;

  min-height: 110px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

}

.cert-card .cert-icon {

  width: 60px !important; height: 60px !important;

  display: flex !important; align-items: center !important; justify-content: center !important;

  border-radius: 16px !important;

  background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 2px 4px rgba(255,255,255,0.9) !important;

  margin-bottom: 8px !important;

  font-size: 32px !important;

}

.cert-card .cert-icon svg {

  width: 38px !important; height: 38px !important;

}

.cert-card .cert-name {

  font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important;

  margin-bottom: 2px !important;

}

.cert-card .cert-price, .cert-card .cert-status {

  font-size: 11px !important; font-weight: 600 !important;

}

    /* ============================================ */

    /* SISTEMA DE ASISTENCIA */

    /* ============================================ */

    .attendance-card {

      background: #ffffff;

      border-radius: 15px;

      padding: 25px;

      margin: 15px 0;

      text-align: center;

      box-shadow: 0 2px 12px rgba(0,0,0,0.08);

      border: 1px solid #e2e8f0;

    }

    .attendance-timer {

      font-size: 48px;

      font-weight: bold;

      color: #E31937;

      margin: 20px 0;

      font-family: 'Courier New', monospace;

    }

    .attendance-status {

      display: inline-block;

      padding: 8px 20px;

      border-radius: 20px;

      font-weight: bold;

      font-size: 14px;

      margin: 10px 0;

    }

    .status-active { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }

    .status-inactive { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }

    .btn-checkin {

      width: 100%;

      padding: 18px;

      border: none;

      border-radius: 12px;

      font-size: 20px;

      font-weight: bold;

      cursor: pointer;

      transition: all 0.3s;

      margin: 10px 0;

    }

    .btn-checkin-in { background: linear-gradient(135deg, #27ae60, #2ecc71); color: white; box-shadow: 0 4px 15px rgba(46,204,113,0.3); }

    .btn-checkin-in:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(46,204,113,0.4); }

    .btn-checkin-out { background: linear-gradient(135deg, #E31937, #C62828); color: white; box-shadow: 0 4px 15px rgba(227,25,55,0.3); }

    .btn-checkin-out:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(227,25,55,0.4); }

    .attendance-type-selector { display: flex; gap: 10px; margin: 15px 0; }

    .type-option {

      flex: 1; padding: 12px; border-radius: 10px; border: 2px solid #e2e8f0;

      background: #f8fafc; color: #1e293b; cursor: pointer; text-align: center; transition: all 0.3s;

    }

    .type-option.selected { border-color: #E31937; background: #fce4ec; color: #E31937; font-weight: bold; }

    .attendance-history { margin-top: 20px; }

    .history-item {

      display: flex; justify-content: space-between; align-items: center;

      padding: 12px 15px; background: #f8fafc; border-radius: 10px; margin: 8px 0; font-size: 14px; border: 1px solid #e2e8f0;

    }

    .history-date { color: #64748b; }

    .history-hours { color: #E31937; font-weight: bold; }

    .history-type { padding: 3px 10px; border-radius: 10px; font-size: 12px; }

    .type-presencial { background: #e8f5e9; color: #2e7d32; }

    .type-zoom { background: #e3f2fd; color: #1565c0; }

    .admin-attendance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin: 15px 0; }

    .admin-att-card { background: #ffffff; border-radius: 12px; padding: 15px; border-left: 4px solid #f39c12; border:1px solid #e2e8f0; }

    .admin-att-card h4 { margin: 0 0 5px 0; color: #f39c12; font-size: 13px; }

    .admin-att-stat { font-size: 28px; font-weight: bold; color: white; }

    .admin-att-label { font-size: 12px; color: #ccc; }

    .live-indicator { display: inline-block; width: 8px; height: 8px; background: #2ecc71; border-radius: 50%; margin-right: 5px; animation: pulse-dot 1.5s infinite; }

    @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

    .attendance-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }

    .attendance-table th { background: rgba(243,156,18,0.2); padding: 10px 8px; text-align: left; color: #f39c12; border-bottom: 1px solid rgba(255,255,255,0.15); }

    .attendance-table td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); color: #ddd; }

    .attendance-table tr:hover td { background: rgba(255,255,255,0.05); }

    .attendance-summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 15px 0; }

    .att-summary-card { background: #f8fafc; border-radius: 10px; padding: 15px; text-align: center; border: 1px solid #e2e8f0; }

    .att-summary-number { font-size: 24px; font-weight: bold; color: #E31937; }

    .att-summary-text { font-size: 11px; color: #64748b; margin-top: 5px; }

    .filter-bar { display: flex; gap: 10px; margin: 15px 0; flex-wrap: wrap; }

    .filter-bar select { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); color: white; font-size: 13px; }



/* ===== NOTIFICATION BELL SYSTEM ===== */

.notif-bell-container { position: fixed; top: 70px; right: 15px; z-index: 500; }

.notif-bell-btn { background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; cursor: pointer; position: relative; box-shadow: 0 4px 15px rgba(99,102,241,0.4); transition: transform 0.2s; display: flex; align-items: center; justify-content: center; }

.notif-bell-btn:hover { transform: scale(1.1); }

.notif-badge { position: absolute; top: -2px; right: -2px; background: #ef4444; color: white; font-size: 11px; font-weight: bold; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid white; }

.notif-badge.hidden { display: none; }

.notif-panel { position: fixed; top: 70px; right: 10px; width: 340px; max-width: calc(100vw - 20px); max-height: 70vh; background: linear-gradient(135deg, #1e293b, #0f172a); border: 1px solid rgba(99,102,241,0.3); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; display: none; z-index: 501; }

.notif-panel.open { display: block; }

.notif-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); }

.notif-panel-title { color: white; font-size: 16px; font-weight: bold; }

.notif-clear-btn { background: none; border: none; color: #64748b; font-size: 12px; cursor: pointer; padding: 5px 10px; border-radius: 8px; }

.notif-clear-btn:hover { background: rgba(255,255,255,0.1); color: #94a3b8; }

.notif-list { overflow-y: auto; max-height: calc(70vh - 55px); padding: 8px; }

.notif-item { display: flex; gap: 12px; padding: 12px; border-radius: 12px; margin-bottom: 4px; transition: background 0.2s; }

.notif-item:hover { background: rgba(255,255,255,0.05); }

.notif-item.unread { background: rgba(99,102,241,0.1); border-left: 3px solid #6366f1; }

.notif-icon { font-size: 24px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }

.notif-icon.checkin { background: rgba(39,174,96,0.2); }

.notif-icon.quiz { background: rgba(243,156,18,0.2); }

.notif-icon.payment { background: rgba(46,204,113,0.2); }

.notif-icon.register { background: rgba(52,152,219,0.2); }

.notif-content { flex: 1; min-width: 0; }

.notif-text { color: #e2e8f0; font-size: 13px; line-height: 1.4; }

.notif-time { color: #64748b; font-size: 11px; margin-top: 3px; }

.notif-empty { text-align: center; padding: 40px 20px; color: #64748b; }

.notif-empty-icon { font-size: 40px; margin-bottom: 10px; opacity: 0.5; }

@keyframes bounceArrow { 0%,100%{transform:translateY(-50%);} 50%{transform:translateY(calc(-50% - 6px));} }


/* --- Extra Styles --- */
    #launcherOverlay .lo-bg{position:absolute;width:350px;height:350px;border-radius:50%;filter:blur(100px);opacity:0.15}

    #launcherOverlay .lo-bg1{background:#0066ff;top:-100px;left:-80px;animation:loBgA 8s ease-in-out infinite}

    #launcherOverlay .lo-bg2{background:#ff6b2b;bottom:-100px;right:-80px;animation:loBgB 8s ease-in-out infinite}

    @keyframes loBgA{0%,100%{transform:translate(0,0);opacity:0.12}50%{transform:translate(30px,20px);opacity:0.2}}

    @keyframes loBgB{0%,100%{transform:translate(0,0);opacity:0.12}50%{transform:translate(-30px,-20px);opacity:0.2}}



    #launcherOverlay .lo-wrap{position:relative;z-index:2;text-align:center;padding:20px;width:100%;max-width:400px}



    /* LOGO */

    #launcherOverlay .lo-logo-wrap{margin:0 auto 20px;width:100px;height:100px;position:relative;animation:loLogoFloat 4s ease-in-out infinite}

    #launcherOverlay .lo-logo-wrap img{width:100%;height:100%;border-radius:20px;object-fit:contain;position:relative;z-index:2}

    #launcherOverlay .lo-logo-glow{position:absolute;inset:-8px;border-radius:24px;background:linear-gradient(135deg,rgba(0,170,255,0.25),rgba(255,107,43,0.25));filter:blur(12px);z-index:1;animation:loGlowPulse 3s ease-in-out infinite}

    @keyframes loLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

    @keyframes loGlowPulse{0%,100%{opacity:0.5}50%{opacity:0.9}}



    #launcherOverlay .lo-brand{font-size:11px;letter-spacing:4px;color:rgba(255,255,255,0.45);text-transform:uppercase;margin-bottom:4px;font-weight:600}

    #launcherOverlay .lo-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:4px}

    #launcherOverlay .lo-sub{font-size:13px;color:rgba(255,255,255,0.35);margin-bottom:28px}

    #launcherOverlay .lo-greeting{color:#f39c12;font-size:15px;margin-bottom:20px;display:none}



    /* CIRCLES AREA */

    #launcherOverlay .lo-circles{display:flex;gap:32px;justify-content:center;align-items:center;margin-bottom:28px}

    #launcherOverlay .lo-circle{cursor:pointer;text-align:center;transition:transform 0.3s ease}

    #launcherOverlay .lo-circle:hover{transform:scale(1.05)}

    #launcherOverlay .lo-circle:active{transform:scale(0.95)}



    /* ORB CONTAINER */

    #launcherOverlay .lo-orb{position:relative;width:115px;height:115px;margin:0 auto}

    #launcherOverlay .lo-img-wrap{width:96px;height:96px;border-radius:50%;overflow:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:3px solid;z-index:2}

    #launcherOverlay .lo-img-wrap img{width:100%;height:100%;object-fit:cover}



    /* BLUE ACVOLT */

    #launcherOverlay .lo-blue .lo-img-wrap{border-color:#00aaff;box-shadow:0 0 18px rgba(0,170,255,0.3)}

    #launcherOverlay .lo-blue .lo-orb{animation:loFloatA 5s ease-in-out infinite}

    #launcherOverlay .lo-blue .lo-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:rgba(0,170,255,0.5);border-right-color:rgba(0,120,255,0.2);animation:loSpin 6s linear infinite;z-index:1}

    #launcherOverlay .lo-blue .lo-ring2{position:absolute;inset:-6px;border-radius:50%;border:1px solid transparent;border-bottom-color:rgba(0,212,255,0.2);animation:loSpin 10s linear infinite reverse;z-index:0}

    #launcherOverlay .lo-blue .lo-pulse{position:absolute;inset:2px;border-radius:50%;border:1px solid rgba(0,170,255,0.15);animation:loPulseRing 3s ease-in-out infinite;z-index:0}



    /* ORANGE Mario AI */

    #launcherOverlay .lo-orange .lo-img-wrap{border-color:#ff6b2b;box-shadow:0 0 18px rgba(255,107,43,0.3)}

    #launcherOverlay .lo-orange .lo-orb{animation:loFloatB 5s ease-in-out infinite}

    #launcherOverlay .lo-orange .lo-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:rgba(255,107,43,0.5);border-left-color:rgba(255,69,0,0.2);animation:loSpin 5s linear infinite reverse;z-index:1}

    #launcherOverlay .lo-orange .lo-ring2{position:absolute;inset:-6px;border-radius:50%;border:1px solid transparent;border-bottom-color:rgba(255,170,0,0.2);animation:loSpin 9s linear infinite;z-index:0}

    #launcherOverlay .lo-orange .lo-pulse{position:absolute;inset:2px;border-radius:50%;border:1px solid rgba(255,107,43,0.15);animation:loPulseRing 3s ease-in-out infinite 1.5s;z-index:0}



    #launcherOverlay .lo-ai{position:absolute;top:2px;right:2px;background:linear-gradient(135deg,#ff6b2b,#e84500);color:#fff;font-size:10px;font-weight:800;padding:3px 7px;border-radius:8px;z-index:4;box-shadow:0 0 8px rgba(255,107,43,0.4)}

    #launcherOverlay .lo-label{color:#fff;font-size:14px;font-weight:700;margin-top:8px}

    #launcherOverlay .lo-sublabel{color:rgba(255,255,255,0.35);font-size:11px;margin-top:3px}

    #launcherOverlay .lo-divider{width:1px;height:70px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,0.1),transparent)}



    /* SMOOTH ANIMATIONS */

    @keyframes loFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

    @keyframes loFloatB{0%,100%{transform:translateY(0)}60%{transform:translateY(-7px)}}

    @keyframes loSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

    @keyframes loPulseRing{0%,100%{transform:scale(1);opacity:0.4}50%{transform:scale(1.08);opacity:0.8}}



    #launcherOverlay .lo-footer{font-size:10px;color:rgba(255,255,255,0.15);margin-top:10px}

    #launcherOverlay .lo-footer b{color:rgba(255,255,255,0.3);font-size:11px;letter-spacing:2px}


/* --- Referidos Styles --- */
          @keyframes floatMoney { 0%,100%{transform:translateY(0) rotate(0deg);} 25%{transform:translateY(-15px) rotate(5deg);} 50%{transform:translateY(-8px) rotate(-3deg);} 75%{transform:translateY(-20px) rotate(3deg);} }

          @keyframes pulseCash { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }

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

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

          @keyframes rainMoney { 0%{transform:translateY(-100%) rotate(0deg);opacity:1;} 100%{transform:translateY(100vh) rotate(720deg);opacity:0;} }

          @keyframes glowPulse { 0%,100%{box-shadow:0 0 10px rgba(243,156,18,0.3);} 50%{box-shadow:0 0 30px rgba(243,156,18,0.6),0 0 60px rgba(39,174,96,0.3);} }

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

          @keyframes countUp { 0%{transform:scale(0.5);opacity:0;} 50%{transform:scale(1.2);} 100%{transform:scale(1);opacity:1;} }

          .amb-float { animation: floatMoney 3s ease-in-out infinite; display:inline-block; }

          .amb-float-delay1 { animation-delay: 0.3s; }

          .amb-float-delay2 { animation-delay: 0.6s; }

          .amb-float-delay3 { animation-delay: 0.9s; }

          .amb-pulse { animation: pulseCash 2s ease-in-out infinite; }

          .amb-shimmer { background:linear-gradient(90deg,#f39c12 0%,#ffd700 25%,#f39c12 50%,#2ecc71 75%,#f39c12 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 3s linear infinite; }

          .amb-bounce { animation: bounceArrow 1.5s ease-in-out infinite; }

          .amb-glow { animation: glowPulse 2s ease-in-out infinite; }

          .amb-slide { animation: slideUp 0.6s ease-out forwards; opacity:0; }

          .amb-slide-d1 { animation-delay:0.1s; }

          .amb-slide-d2 { animation-delay:0.2s; }

          .amb-slide-d3 { animation-delay:0.3s; }

          .amb-slide-d4 { animation-delay:0.4s; }

          .amb-rain { position:absolute; animation: rainMoney linear infinite; pointer-events:none; font-size:20px; opacity:0.6; }

          .amb-share-btn { padding:12px 18px; border:none; border-radius:12px; font-weight:bold; font-size:14px; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:8px; justify-content:center; }

          .amb-share-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.2); }

          .amb-share-btn:active { transform:scale(0.95); }

          .amb-step { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; margin-bottom:6px; transition:all 0.3s; }

          .amb-step:hover { background:rgba(243,156,18,0.08); transform:translateX(5px); }


/* --- Inline Styles 1 --- */
        @keyframes bannerPulse { 0%,100%{box-shadow:0 0 8px rgba(220,38,38,0.3);} 50%{box-shadow:0 0 20px rgba(220,38,38,0.6);} }

        @keyframes bannerSpin { 0%{transform:rotate(-10deg);} 100%{transform:rotate(10deg);} }


/* --- Inline Styles 2 --- */
            @keyframes vegasLights{0%{background-position:0% 50%}100%{background-position:400% 50%}}

            @keyframes vegasBlink{0%,100%{opacity:1;filter:brightness(1.5);}50%{opacity:0.3;filter:brightness(0.5);}}

            @keyframes vegasBounce{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

            @keyframes crmTextPop{0%,100%{transform:scale(1);opacity:1;}15%{transform:scale(0) translateY(20px);opacity:0;}30%{transform:scale(1.2) translateY(-5px);opacity:1;}40%{transform:scale(1);}}

            @keyframes crmShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

            @keyframes crmPulse{0%,100%{transform:scale(1);box-shadow:0 2px 12px rgba(34,197,94,.4)}50%{transform:scale(1.03);box-shadow:0 4px 20px rgba(34,197,94,.6)}}

            @keyframes crmBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}


/* --- AI Tutor / Books Styles --- */
#maestroFloat{display:none}

.maestro-q-btn{display:block;margin:14px auto 0;cursor:pointer;position:relative;width:55px;height:55px}

.maestro-q-btn .mf-ring{position:absolute;inset:-4px;border-radius:50%;border:3px solid transparent;border-top:3px solid #f97316;border-right:3px solid #f97316;animation:mfSpin 1.5s linear infinite}

.maestro-q-btn .mf-ring2{position:absolute;inset:-8px;border-radius:50%;border:2px solid transparent;border-bottom:2px solid #fb923c;border-left:2px solid #fb923c;animation:mfSpin 2.5s linear infinite reverse}

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

.maestro-q-btn .mf-photo{width:55px;height:55px;border-radius:50%;overflow:hidden;box-shadow:0 4px 20px rgba(249,115,22,0.5)}

.maestro-q-btn .mf-photo img{width:100%;height:100%;object-fit:cover}

.maestro-q-btn .mf-play{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;background:linear-gradient(135deg,#f97316,#ea580c);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(249,115,22,0.5);border:2px solid #f8fafc}

.maestro-q-btn .mf-play svg{width:12px;height:12px;fill:white;margin-left:1px}

.maestro-q-btn .mf-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;color:#f97316;font-weight:bold;letter-spacing:0.5px}

.maestro-q-btn .mf-pulse{position:absolute;inset:-12px;border-radius:50%;background:rgba(249,115,22,0.15);animation:mfPulse 2s ease-in-out infinite}

@keyframes mfPulse{0%,100%{transform:scale(1);opacity:0.4}50%{transform:scale(1.15);opacity:0}}

.m-flash{position:fixed;inset:0;background:white;z-index:1001;opacity:0;pointer-events:none}

.m-flash.active{animation:mFlash .8s ease-out}

@keyframes mFlash{0%{opacity:0}15%{opacity:1}30%{opacity:0}45%{opacity:.7}60%{opacity:0}75%{opacity:.3}100%{opacity:0}}

.m-battle{position:fixed;inset:0;z-index:1002;display:none;flex-direction:column;background:linear-gradient(180deg,#0d1117,#161b28 40%,#1e2640);overflow:hidden;height:100vh;height:100dvh}

.m-battle.active{display:flex}

.m-banner{text-align:center;padding:10px 20px 0;opacity:0}

.m-banner.show{animation:mBanIn .5s ease forwards}

@keyframes mBanIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

.m-banner-label{font-family:'Press Start 2P',monospace;font-size:7px;color:#f97316;letter-spacing:2px;text-shadow:0 0 20px rgba(249,115,22,.5)}

.m-banner-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:4px;color:#fff}

.m-banner-title span{color:#f97316}

.m-stage{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:5px 20px;height:130px;position:relative}

.m-avatar-wrap{position:relative;transform:translateX(120vw)}

.m-avatar-wrap.slide-in{animation:mSlide .8s cubic-bezier(.2,.8,.2,1) forwards}

@keyframes mSlide{0%{transform:translateX(120vw) scale(.5)}60%{transform:translateX(-10px) scale(1.05)}80%{transform:translateX(5px) scale(.98)}100%{transform:translateX(0) scale(1)}}

.m-avatar-wrap.idle{animation:mBr 3s ease-in-out infinite}

@keyframes mBr{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.m-avatar-wrap.talking{animation:mTk .4s ease-in-out infinite}

@keyframes mTk{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-.5deg)}75%{transform:translateY(-2px) rotate(.5deg)}}

.m-avatar-img{width:90px;height:90px;border-radius:50%;overflow:hidden;border:3px solid #f97316;box-shadow:0 0 40px rgba(249,115,22,.3)}

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

.m-avatar-img.speaking{box-shadow:0 0 40px rgba(249,115,22,.3),0 0 0 6px rgba(249,115,22,.2)}

.m-nametag{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);border:1.5px solid #f97316;border-radius:6px;padding:3px 10px;white-space:nowrap;font-family:'Press Start 2P',monospace;font-size:7px;color:#f97316}

.m-waves{position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);display:none;gap:3px;align-items:flex-end;height:16px}

.m-waves.active{display:flex}

.m-wave-bar{width:3px;background:#f97316;border-radius:2px;animation:mW .8s ease-in-out infinite}

.m-wave-bar:nth-child(1){height:5px}.m-wave-bar:nth-child(2){height:10px;animation-delay:.1s}.m-wave-bar:nth-child(3){height:16px;animation-delay:.2s}.m-wave-bar:nth-child(4){height:10px;animation-delay:.3s}.m-wave-bar:nth-child(5){height:5px;animation-delay:.4s}

@keyframes mW{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.m-chat-area{flex:1;overflow-y:auto;padding:10px 16px;display:flex;flex-direction:column;gap:10px}

.m-msg{display:flex;gap:8px;max-width:90%;animation:mMI .3s ease}

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

.m-msg.user{align-self:flex-end;flex-direction:row-reverse}

.m-msg-avatar{width:28px;height:28px;border-radius:8px;flex-shrink:0;overflow:hidden}

.m-msg-avatar img{width:100%;height:100%;object-fit:cover}

.m-msg-bubble{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5}

.m-msg.assistant .m-msg-bubble{background:#1a1a2e;border:1px solid rgba(249,115,22,.3);color:#f1f3f7;border-bottom-left-radius:4px}

.m-msg.user .m-msg-bubble{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border-bottom-right-radius:4px}

.m-msg-bubble strong{color:#f97316}

.m-msg-bubble code{background:rgba(249,115,22,.15);color:#f97316;padding:1px 5px;border-radius:3px;font-size:12px;font-family:monospace}

.m-typing{display:flex;gap:8px;max-width:90%}

.m-typing-dots{background:#1a1a2e;border:1px solid rgba(249,115,22,.3);border-radius:14px;padding:12px 18px;display:flex;gap:4px}

.m-typing-dots span{width:6px;height:6px;border-radius:50%;background:#f97316;animation:mTy 1.4s ease-in-out infinite}

.m-typing-dots span:nth-child(2){animation-delay:.2s}.m-typing-dots span:nth-child(3){animation-delay:.4s}

@keyframes mTy{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-5px);opacity:1}}

.m-input-area{padding:10px 16px 16px;background:rgba(10,12,16,.95);border-top:1px solid rgba(249,115,22,.2);position:sticky;bottom:0;z-index:10}

.m-input-wrap{display:flex;gap:8px;align-items:center}

.m-input{flex:1;background:#1c2130;border:1.5px solid rgba(249,115,22,.3);border-radius:12px;padding:10px 14px;color:#f1f3f7;font-size:14px;resize:none;outline:none;min-height:42px;max-height:100px;line-height:1.4}

.m-input::placeholder{color:#5a6478}

.m-input:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15)}

.m-send{width:42px;height:42px;border-radius:12px;border:none;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.m-send:disabled{opacity:.4}

.m-close-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:rgba(10,12,16,.95)}

.m-close-btn{background:none;border:1px solid rgba(255,255,255,.2);color:#ccc;padding:6px 16px;border-radius:8px;font-size:13px;cursor:pointer}

.m-close-btn:hover{border-color:#f97316;color:#f97316}

.m-powered{font-size:9px;color:#5a6478}.m-powered span{color:#f97316}

@media(max-width:600px){.m-avatar-img{width:70px;height:70px}.m-banner-title{font-size:20px}.m-banner-label{font-size:6px}.m-stage{height:100px;padding:2px 10px}.m-banner{padding:6px 10px 0}.m-close-bar{padding:4px 10px}.maestro-q-btn{width:48px;height:48px}.maestro-q-btn .mf-photo{width:48px;height:48px}.mf-play{width:20px!important;height:20px!important}.mf-play svg{width:10px!important;height:10px!important}.mf-label{font-size:7px!important}.m-input{font-size:16px}}


/* --- Chatbot Styles --- */
#acvoltAI{position:fixed;top:180px;right:15px;z-index:960;display:none;flex-direction:column;align-items:flex-end;gap:8px;width:340px;animation:aiIn .4s ease}

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

#acvoltAI .ai-panel{background:linear-gradient(135deg,#0d1117,#161b22);border:1.5px solid rgba(243,156,18,0.3);border-radius:18px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.5);display:flex;flex-direction:column;max-height:440px}

#acvoltAI .ai-head{background:linear-gradient(135deg,#f39c12,#e67e22);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}

#acvoltAI .ai-head-left{display:flex;align-items:center;gap:10px;color:white}

#acvoltAI .ai-head-left .ai-avatar-sm{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:18px}

#acvoltAI .ai-head-left div:last-child{line-height:1.3}

#acvoltAI .ai-title{font-size:13px;font-weight:bold}

#acvoltAI .ai-subtitle{font-size:10px;opacity:0.85}

#acvoltAI .ai-close{background:none;border:none;color:rgba(255,255,255,0.7);font-size:20px;cursor:pointer;padding:4px 8px;line-height:1}

#acvoltAI .ai-close:hover{color:white}

.ai-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:280px;min-height:60px}

.ai-m{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;max-width:88%;animation:aiIn .3s ease;word-wrap:break-word}

.ai-m.b{background:rgba(243,156,18,0.08);color:#e2e8f0;border:1px solid rgba(243,156,18,0.15);align-self:flex-start;border-bottom-left-radius:4px}

.ai-m.u{background:linear-gradient(135deg,#f39c12,#e67e22);color:white;align-self:flex-end;border-bottom-right-radius:4px}

.ai-m strong{color:#f39c12}

.ai-qk{display:flex;flex-wrap:wrap;gap:5px;padding:4px 12px 8px}

.ai-qk button{background:rgba(243,156,18,0.1);border:1px solid rgba(243,156,18,0.25);color:#f39c12;padding:6px 11px;border-radius:20px;font-size:11px;cursor:pointer;transition:all .2s;white-space:nowrap}

.ai-qk button:hover{background:rgba(243,156,18,0.25)}

.ai-inp{padding:10px 12px;border-top:1px solid rgba(243,156,18,0.15);display:flex;gap:8px;background:rgba(13,17,23,0.5)}

.ai-inp input{flex:1;background:#1c2130;border:1px solid rgba(243,156,18,0.2);border-radius:12px;padding:10px 14px;color:#f1f3f7;font-size:13px;outline:none}

.ai-inp input:focus{border-color:#f39c12}

.ai-inp button{width:38px;height:38px;border-radius:12px;border:none;background:linear-gradient(135deg,#f39c12,#e67e22);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}

.ai-dots{display:flex;gap:4px;padding:10px 14px;align-self:flex-start}

.ai-dots span{width:5px;height:5px;border-radius:50%;background:#f39c12;animation:mTy 1.4s ease-in-out infinite}

.ai-dots span:nth-child(2){animation-delay:.2s}

.ai-dots span:nth-child(3){animation-delay:.4s}

#acvoltBtn{position:fixed;top:135px;right:12px;z-index:961;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#16803c,#22c55e);border:3px solid rgba(22,128,60,0.8);display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;box-shadow:0 0 0 0 rgba(243,156,18,0.5);animation:aiRingPulse 2s ease infinite;transition:all .3s}

#acvoltBtn:hover{transform:scale(1.1)}

#acvoltBtn.speaking{animation:aiPulse 1.5s ease-in-out infinite}

@keyframes aiRingPulse{0%{box-shadow:0 0 0 0 rgba(243,156,18,0.6);}70%{box-shadow:0 0 0 12px rgba(243,156,18,0);}100%{box-shadow:0 0 0 0 rgba(243,156,18,0);}}

@keyframes aiPulse{0%,100%{box-shadow:0 4px 24px rgba(243,156,18,0.5)}50%{box-shadow:0 4px 35px rgba(243,156,18,0.7),0 0 0 10px rgba(243,156,18,0.12)}}

.ai-bdg{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;background:#dc2626;border-radius:10px;color:white;font-size:10px;display:none;align-items:center;justify-content:center;font-weight:bold;border:2px solid #0f3640;padding:0 4px}

@media(max-width:600px){#acvoltAI{left:10px;right:10px;width:auto;top:190px;bottom:auto}#acvoltBtn{top:130px;right:10px;width:46px;height:46px}}





/* ================================================ */
/* ACVOLT CRM Styles                                */
/* ================================================ */

    /* ═══════════════════════════════════════════════
       ACVOLT CRM — Premium Design System
       Brand: Blue #16803c · Red #d32f2f · Gold #f39c12
    ═══════════════════════════════════════════════ */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

    :root {
      /* Brand Palette */
      --brand: #16803c;
      --brand-dark: #15803d;
      --brand-light: #22c55e;
      --brand-50: rgba(22,128,60,0.08);
      --brand-100: #bbdefb;
      --accent: #f39c12;
      --accent-dark: #e67e22;
      --accent-50: #fef9ee;
      --danger: #d32f2f;
      --danger-light: #ef5350;
      --danger-50: #fef2f2;
      --success: #16a34a;
      --success-light: #22c55e;
      --success-50: #f0fdf4;
      --purple: #7c3aed;
      --purple-50: #f5f3ff;
      --stripe: #635bff;
      /* Surfaces */
      --bg: #0f3640;
      --bg-page: #f7f7f5;
      --bg-card: #ffffff;
      --bg-subtle: #f8fafc;
      --bg-hover: #f1f5f9;
      --bg-blue-tint: #f0f6ff;
      /* Borders & Shadows */
      --border: rgba(255,255,255,0.08);
      --border-light: #f0f3f7;
      --border-blue: rgba(22,128,60,0.15);
      --sh-xs: 0 1px 2px rgba(0,0,0,0.03);
      --sh-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
      --sh-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
      --sh-lg: 0 10px 40px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
      --sh-brand: 0 4px 14px rgba(15,54,64,0.2);
      /* Text */
      --text-1: #1a1d21;
      --text-2: #4b5563;
      --text-3: #8993a4;
      --text-on-brand: #ffffff;
      /* Type */
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
      --radius: 8px;
      --radius-sm: 6px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      /* Compatibility */
      --bg-surface: var(--bg-subtle);
      --bg-elevated: var(--bg-hover);
      --cyan: var(--brand);
      --cyan-dim: var(--brand-50);
      --green-dim: var(--success-50);
      --red-dim: var(--danger-50);
      --purple-dim: var(--purple-50);
      --orange-dim: var(--accent-50);
      --border-accent: var(--border-blue);
    }

    *{box-sizing:border-box;margin:0;padding:0;}
    body{font-family:var(--font);background:var(--bg-page);color:var(--text-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
    ::selection{background:rgba(22,128,60,0.15);color:var(--brand-dark);}
    ::-webkit-scrollbar{width:6px;height:6px;}
    ::-webkit-scrollbar-track{background:transparent;}
    ::-webkit-scrollbar-thumb{background:#c8cfd8;border-radius:3px;}
    ::-webkit-scrollbar-thumb:hover{background:#a0aab8;}
    .screen{display:none;min-height:100vh;}
    .screen.active{display:flex!important;}

    /* ═══════════ LOGIN ═══════════ */
    #adminLoginScreen{
      justify-content:center!important;align-items:center!important;flex-direction:column!important;
      background:var(--brand);
      background:linear-gradient(160deg,#0a252d 0%,#0f3640 35%,#17505e 65%,#16803c 100%);
      position:relative;overflow:hidden;width:100%;
    }
    #adminLoginScreen::before{
      content:'';position:absolute;inset:0;
      background:
        radial-gradient(ellipse 600px 400px at 15% 20%,rgba(22,128,60,0.10),transparent),
        radial-gradient(ellipse 500px 500px at 85% 80%,rgba(255,255,255,0.05),transparent);
      pointer-events:none;
    }
    #adminLoginScreen::after{
      content:'';position:absolute;bottom:-2px;left:0;right:0;height:180px;
      background:linear-gradient(to top,rgba(0,0,0,0.08),transparent);
      pointer-events:none;
    }
    .login-box{
      background:#ffffff;border-radius:var(--radius-xl);padding:44px 40px;width:410px;max-width:90vw;
      position:relative;z-index:1;
      box-shadow:0 25px 80px rgba(0,0,0,0.2),0 8px 20px rgba(0,0,0,0.1);
      margin:auto;
    }
    .login-logo{
      width:60px;height:60px;
      background:linear-gradient(140deg,var(--brand),#22c55e);
      border-radius:14px;display:flex;align-items:center;justify-content:center;
      font-size:28px;margin:0 auto 18px;
      box-shadow:0 6px 24px rgba(22,128,60,0.25);
      animation:logoFloat 5s ease-in-out infinite;
    }
    @keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(1deg)}}
    .login-title{text-align:center;font-size:22px;font-weight:800;color:var(--text-1);letter-spacing:-0.3px;}
    .login-subtitle{text-align:center;color:var(--text-3);font-size:12px;margin:3px 0 28px;font-weight:500;}
    .login-field{margin-bottom:14px;}
    .login-field label{display:block;font-size:10.5px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;}
    .login-field input{width:100%;padding:12px 15px;background:#f8fafc!important;border:1.5px solid #e3e7ee!important;border-radius:6px!important;color:#1a1d21!important;font-family:var(--font);font-size:14px;transition:all 0.25s;outline:none;}
    .login-field input:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(22,128,60,0.1)!important;background:#ffffff!important;}
    .login-field input::placeholder{color:#b8c4d4!important;}
    .login-btn{
      width:100%;padding:13px;background:var(--brand);color:var(--text-on-brand);border:none;
      border-radius:8px;font-family:var(--font);font-size:14px;font-weight:700;
      cursor:pointer;transition:all 0.3s;margin-top:4px;letter-spacing:0.2px;
    }
    .login-btn:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:var(--sh-brand);}
    .login-error{display:none;background:var(--danger-50);border:1px solid rgba(211,47,47,0.2);color:var(--danger);padding:10px 14px;border-radius:var(--radius-sm);font-size:12px;margin-bottom:12px;text-align:center;font-weight:500;}
    .login-error.show{display:block;}

    /* ═══════════ DASHBOARD LAYOUT ═══════════ */
    #adminDashboardScreen{flex-direction:row;height:100vh;overflow:hidden;}

    /* ═══════════ SIDEBAR ═══════════ */
    .crm-sidebar{
      width:220px;min-width:220px;background:#0f3640;
      border-right:none;
      height:100vh;display:flex;flex-direction:column;overflow:hidden;z-index:100;position:sticky;top:0;
    }
    .sidebar-brand{padding:20px 16px 12px;border-bottom:1px solid rgba(255,255,255,0.08);}
    .sidebar-brand-row{display:flex;align-items:center;gap:10px;}
    .sidebar-brand-icon{
      width:34px;height:34px;background:var(--brand);border-radius:10px;
      display:flex;align-items:center;justify-content:center;font-size:16px;
      flex-shrink:0;color:white;box-shadow:0 2px 8px rgba(22,128,60,0.3);
    }
    .sidebar-brand h2{font-size:15px;font-weight:800;color:#ffffff;letter-spacing:0.8px;}
    .sidebar-brand p{font-size:9px;color:rgba(255,255,255,0.45);margin-left:44px;margin-top:-1px;font-weight:600;letter-spacing:0.3px;}

    /* Portal Tabs */
    .portal-tabs{display:flex;gap:4px;padding:8px 10px;background:rgba(255,255,255,0.05);margin:0;border-bottom:1px solid rgba(255,255,255,0.08);}
    .portal-tab{
      flex:1;padding:7px 4px;border:1.5px solid transparent;border-radius:7px;
      background:transparent;color:rgba(255,255,255,0.5);font-family:var(--font);font-size:11px;
      font-weight:600;cursor:pointer;transition:all 0.2s;text-align:center;
    }
    .portal-tab.active{background:var(--brand);border-color:var(--brand);color:white;box-shadow:0 2px 8px rgba(22,128,60,0.2);}
    .portal-tab:hover:not(.active){color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.05);}

    .sidebar-nav{flex:1;overflow-y:auto;padding:4px 0;}
    .nav-group{margin-bottom:0;}
    .nav-group-label{font-size:10px;font-weight:700;color:rgba(255,255,255,0.28);text-transform:uppercase;letter-spacing:1px;padding:14px 12px 4px;}
    .crm-nav-item{
      display:flex;align-items:center;gap:9px;padding:8px 12px;margin:1px 8px;
      color:rgba(255,255,255,0.55);font-size:13px;font-weight:500;cursor:pointer;
      transition:all 0.15s;border-radius:6px;position:relative;
    }
    .crm-nav-item:hover{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.85);}
    .crm-nav-item.active-nav{background:rgba(255,255,255,0.1);color:#ffffff;font-weight:600;}
    .crm-nav-item.active-nav::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--brand);border-radius:0 3px 3px 0;}
    .nav-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0;opacity:0.7;}

    .sidebar-user{padding:10px 14px;border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.03);}
    .sidebar-user-avatar{width:30px;height:30px;background:var(--brand);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:white;}
    .sidebar-user-name{font-size:12px;font-weight:600;color:#ffffff;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .sidebar-user-role{font-size:9px;color:rgba(255,255,255,0.45);font-weight:500;}
    .sidebar-logout-btn{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.2);color:#ef4444;padding:4px 9px;border-radius:6px;font-family:var(--font);font-size:11px;cursor:pointer;transition:all 0.2s;flex-shrink:0;}
    .sidebar-logout-btn:hover{background:rgba(220,38,38,0.2);border-color:rgba(220,38,38,0.35);}

    /* ═══════════ CONTENT AREA ═══════════ */
    .crm-content{flex:1;overflow-y:auto;height:100vh;background:var(--bg-page);padding:0;}
    .content-topbar{
      position:sticky;top:0;z-index:50;
      background:#ffffff;backdrop-filter:none;-webkit-backdrop-filter:none;
      border-bottom:1px solid #e3e7ee;padding:0px 28px;
      display:flex;justify-content:space-between;align-items:center;height:56px;
    }
    .content-topbar h1{font-size:16px;font-weight:700;color:#1a1d21;letter-spacing:-0.2px;}
    .content-body{padding:18px 24px 40px;}

    /* ═══════════ SECTION CARDS ═══════════ */
    .admin-section{
      background:var(--bg-card);border:1px solid #e3e7ee;border-radius:8px;
      padding:20px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,0.04);transition:all 0.25s;
    }
    .admin-section:hover{box-shadow:var(--sh-sm);}
    .admin-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
    .admin-section-title{font-size:14px;font-weight:700;color:#1a1d21;letter-spacing:-0.1px;}
    .admin-grid-full{grid-column:1/-1;}

    /* ═══════════ STAT CARDS ═══════════ */
    .admin-stats-grid,#adminStatsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px;margin-bottom:18px;}
    .admin-stat-card{
      background:var(--bg-card);border:1px solid #e3e7ee;border-radius:0 0 8px 8px;
      padding:16px;text-align:center;cursor:pointer;transition:all 0.25s;
      position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04);
      border-top:3px solid var(--brand);
    }
    .admin-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:0px;background:none;transform:scaleX(0);transition:transform 0.3s;transform-origin:left;}
    .admin-stat-card:hover{transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,0.06);border-color:#e3e7ee;}
    .admin-stat-card:hover::before{transform:scaleX(1);}
    .admin-stat-value{font-size:30px;font-weight:800;color:#1a1d21;font-family:var(--mono);letter-spacing:-1px;line-height:1.1;}
    .admin-stat-label{font-size:11px;color:var(--text-3);font-weight:600;margin-top:3px;text-transform:uppercase;letter-spacing:0.5px;}

    /* ═══════════ BUTTONS ═══════════ */
    .btn{padding:8px 16px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);font-weight:600;font-size:12px;transition:all 0.2s;}
    .btn-primary{background:var(--brand);color:white;}
    .btn-primary:hover{background:var(--brand-dark);box-shadow:var(--sh-brand);}
    .btn-secondary{background:var(--bg-subtle);color:var(--text-2);border:1px solid var(--border);}
    .admin-nav-btn{
      padding:6px 13px;background:#ffffff;color:#4b5563;border:1.5px solid #e3e7ee;
      border-radius:20px;font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s;
    }
    .admin-nav-btn:hover{background:rgba(22,128,60,0.08);color:var(--brand);border-color:rgba(22,128,60,0.15);}

    /* ═══════════ FORMS ═══════════ */
    .admin-filter-bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
    .admin-filter-input,input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="date"],textarea,select{
      padding:9px 13px;background:var(--bg)!important;border:1.5px solid var(--border)!important;
      border-radius:var(--radius-sm)!important;color:var(--text-1)!important;
      font-family:var(--font);font-size:13px;outline:none;transition:all 0.2s;
    }
    input:focus,textarea:focus,select:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-50)!important;}
    input::placeholder,textarea::placeholder{color:#b0bac8!important;}
    .admin-filter-input{flex:1;min-width:180px;}
    select option{background:var(--bg);color:var(--text-1);}

    /* ═══════════ TABLE ═══════════ */
    .attendance-table{width:100%;border-collapse:collapse;font-size:12.5px;}
    .attendance-table th{padding:9px 12px;text-align:left;color:var(--text-3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;border-bottom:2px solid var(--border);background:var(--bg-subtle);}
    .attendance-table td{padding:9px 12px;border-bottom:1px solid var(--border-light);color:var(--text-2);}
    .attendance-table tr:hover td{background:var(--brand-50);}

    /* ═══════════ ATTENDANCE ═══════════ */
    .admin-attendance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin-bottom:12px;}
    .admin-att-card{background:#ffffff;border:1px solid #e3e7ee;border-radius:8px;padding:14px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,0.04);}
    .admin-att-card h4{font-size:10px;color:#8993a4;font-weight:700;margin-bottom:3px;display:flex;align-items:center;justify-content:center;gap:5px;text-transform:uppercase;letter-spacing:0.5px;}
    .admin-att-stat{font-size:26px;font-weight:800;color:#1a1d21;font-family:var(--mono);}
    .admin-att-label{font-size:9px;color:var(--text-3);font-weight:500;}
    .live-indicator{width:7px;height:7px;background:var(--success-light);border-radius:50%;display:inline-block;animation:livePulse 2s infinite;}
    @keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4);}50%{box-shadow:0 0 0 5px transparent;}}

    /* ═══════════ CHART ═══════════ */
    .admin-chart{background:var(--bg-subtle);border-radius:8px;padding:14px;border:1px solid #f0f3f7;}
    .admin-bar-chart{display:flex;align-items:flex-end;gap:10px;height:160px;padding:8px 0;}

    /* ═══════════ FILTER PILLS ═══════════ */
    .filter-bar{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
    .inbox-filter-btn{
      padding:6px 14px;border:1.5px solid #e3e7ee!important;border-radius:20px;
      cursor:pointer;font-size:11px;font-family:var(--font);font-weight:600;
      background:#ffffff!important;color:#4b5563!important;transition:all 0.2s;
    }
    .inbox-filter-btn.active,.inbox-filter-btn:hover{background:rgba(22,128,60,0.08)!important;color:var(--brand)!important;border-color:rgba(22,128,60,0.15)!important;}

    /* ═══════════ GRID ═══════════ */
    .admin-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    .technician-list{max-height:500px;overflow-y:auto;}
    .no-data-message{text-align:center;padding:36px;color:var(--text-3);}
    .no-data-icon{font-size:40px;margin-bottom:10px;opacity:0.35;}

    /* ═══════════ PROFILE ═══════════ */
    .admin-profile-card{background:var(--bg-card);border:1px solid #e3e7ee;border-radius:8px;padding:22px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);}
    .admin-profile-header{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
    .admin-profile-info h2{font-size:18px;font-weight:700;color:var(--text-1);}
    .admin-profile-info p{font-size:12px;color:var(--accent);font-family:var(--mono);font-weight:600;}
    .admin-detail-label{font-size:9px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:0.8px;}
    .admin-detail-value{font-size:13px;color:var(--text-2);}
    .admin-container{padding:0;}
    .admin-header{display:none;}
    .back-btn{padding:8px 16px;background:var(--bg);color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);font-size:12px;font-weight:600;transition:all 0.2s;}
    .back-btn:hover{background:var(--brand-50);color:var(--brand);}

    /* ═══════════ LANDSCAPE ═══════════ */
    .admin-landscape-msg{display:none;}
    @media(max-width:768px) and (orientation:portrait){
      .admin-landscape-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;color:var(--text-2);}
      .admin-main-content{display:none!important;}
    }

    /* ═══════════ LMS PORTAL ═══════════ */
    .portal-view{display:none;}
    .portal-view.active{display:block;}
    .lms-hero{
      background:linear-gradient(135deg,var(--brand-50) 0%,var(--accent-50) 100%);
      border:1px solid var(--brand-100);border-radius:var(--radius-lg);
      padding:26px;margin-bottom:18px;position:relative;overflow:hidden;
    }
    .lms-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(243,156,18,0.08),transparent 70%);pointer-events:none;}
    .lms-hero h2{font-size:20px;font-weight:800;color:var(--brand-dark);margin-bottom:3px;}
    .lms-hero p{color:var(--text-2);font-size:12px;}
    .lms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:18px;}
    .lms-card{
      background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
      padding:16px;cursor:pointer;transition:all 0.25s;box-shadow:var(--sh-xs);
    }
    .lms-card:hover{transform:translateY(-2px);border-color:var(--border-blue);box-shadow:var(--sh-md);}
    .lms-card-icon{font-size:22px;margin-bottom:5px;}
    .lms-card h3{font-size:13px;font-weight:700;color:var(--text-1);margin-bottom:2px;}
    .lms-card p{font-size:10px;color:var(--text-3);}

    /* ═══════════ MODAL ═══════════ */
    #ssDetailModal>div{background:var(--bg-card)!important;border:1px solid var(--brand)!important;border-radius:var(--radius-lg)!important;}

    /* ═══════════ INLINE STYLE OVERRIDES ═══════════ 
       These override the 700+ hardcoded inline styles from the original HTML
       to match the white premium theme */

    /* Dark backgrounds → Light */
    [style*="background:#0f172a"],[style*="background: #0f172a"],
    [style*="background:#1a1a2e"],[style*="background: #1a1a2e"],
    [style*="background:#1e293b"],[style*="background: #1e293b"],
    [style*="background:linear-gradient(135deg,#1e293b"],[style*="background:linear-gradient(135deg, #1e293b"],
    [style*="background:linear-gradient(135deg,#0f172a"]{
      background:var(--bg-subtle)!important;color:var(--text-1)!important;
    }

    /* Stripe banner special */
    [style*="background:linear-gradient(135deg,#635bff"]{
      background:linear-gradient(135deg,#635bff,#7c3aed)!important;
    }

    /* Fix text colors on light backgrounds */
    [style*="color:rgba(255,255,255,0.7)"]{color:var(--text-2)!important;}
    [style*="color:rgba(255,255,255,0.5)"]{color:var(--text-3)!important;}
    [style*="color:rgba(255,255,255,0.6)"]{color:var(--text-3)!important;}
    [style*="color:white"][style*="font-size:10px"],
    [style*="color:white"][style*="font-size:11px"],
    [style*="color:white"][style*="font-size:12px"]{color:var(--text-2)!important;}

    /* Fix the status indicator colors to be visible on white */
    [style*="color:#e74c3c"],[style*="color: #e74c3c"]{color:var(--danger)!important;}
    [style*="color:#27ae60"],[style*="color: #27ae60"]{color:var(--success)!important;}
    [style*="color:#2ecc71"],[style*="color: #2ecc71"]{color:var(--success-light)!important;}
    [style*="color:#f39c12"],[style*="color: #f39c12"]{color:var(--accent)!important;}
    [style*="color:#3498db"],[style*="color: #3498db"]{color:var(--brand)!important;}
    [style*="color:#9b59b6"],[style*="color: #9b59b6"]{color:var(--purple)!important;}
    [style*="color:#635bff"],[style*="color: #635bff"]{color:var(--stripe)!important;}

    /* Gray text → our text scale */
    [style*="color:#64748b"]{color:var(--text-2)!important;}
    [style*="color:#94a3b8"]{color:var(--text-3)!important;}
    [style*="color:#1e293b"]{color:var(--text-1)!important;}

    /* White bg boxes that had border issues */
    [style*="background:#f8fafc"],[style*="background: #f8fafc"]{background:var(--bg-subtle)!important;}
    [style*="background:#f1f5f9"],[style*="background: #f1f5f9"]{background:var(--bg-hover)!important;}
    [style*="background:#f8f9fa"],[style*="background: #f8f9fa"]{background:var(--bg-subtle)!important;}

    /* KPI colored backgrounds - keep but lighter */
    [style*="background:rgba(46,204,113,0.05)"]{background:var(--success-50)!important;}
    [style*="background:rgba(52,152,219,0.05)"]{background:var(--brand-50)!important;}
    [style*="background:rgba(243,156,18,0.1)"]{background:var(--accent-50)!important;}
    [style*="background:rgba(231,76,60,0.1)"]{background:var(--danger-50)!important;}
    [style*="background:rgba(52,152,219,0.1)"]{background:var(--brand-50)!important;}
    [style*="background:rgba(155,89,182"]{background:var(--purple-50)!important;}
    [style*="background:rgba(39,174,96,0.1)"]{background:var(--success-50)!important;}

    /* Fix borders */
    [style*="border:1px solid #334155"],[style*="border: 1px solid #334155"],
    [style*="border:1px solid #444"],[style*="border: 1px solid #444"]{
      border-color:var(--border)!important;
    }
    [style*="border-bottom:1px solid rgba(255,255,255,0.1)"]{border-bottom-color:var(--border-light)!important;}
    [style*="border-bottom:1px solid #334155"]{border-bottom-color:var(--border)!important;}
    [style*="border:2px solid #fecaca"]{border-color:rgba(211,47,47,0.2)!important;}

    /* Buttons inside sections */
    [style*="background:#3498db"][onclick],[style*="background: #3498db"][onclick]{
      background:var(--brand)!important;color:white!important;border-radius:var(--radius-sm)!important;
    }
    [style*="background:#e74c3c"][onclick],[style*="background: #e74c3c"][onclick]{
      background:var(--danger)!important;color:white!important;border-radius:var(--radius-sm)!important;
    }
    [style*="background:#27ae60"][onclick],[style*="background: #27ae60"][onclick]{
      background:var(--success)!important;color:white!important;border-radius:var(--radius-sm)!important;
    }
    [style*="background:#f39c12"][onclick],[style*="background: #f39c12"][onclick]{
      background:var(--accent)!important;color:white!important;border-radius:var(--radius-sm)!important;
    }

    /* Fix gradient chart backgrounds */
    [style*="background:rgba(0,212,255"]{background:var(--brand-50)!important;}

    /* ═══════════ SALES PIPELINE ═══════════ */
    .pl-col{min-width:200px;max-width:240px;flex:1;background:var(--bg-subtle);border-radius:12px;padding:8px;border:1px solid var(--border-light);}
    .pl-col-hd{padding:7px 10px;border-radius:8px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
    .pl-col-t{font-size:11px;font-weight:700;letter-spacing:0.2px;}
    .pl-col-c{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,0.6);}
    .pl-card{background:white;border-radius:10px;padding:10px;margin-bottom:6px;border:1.5px solid var(--border-light);cursor:grab;transition:all 0.15s;box-shadow:var(--sh-xs);}
    .pl-card:hover{border-color:var(--brand-light);box-shadow:var(--sh-sm);transform:translateY(-1px);}
    .pl-card.dragging{opacity:0.4;transform:rotate(2deg);}
    .pl-card-nm{font-size:12px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .pl-card-meta{font-size:9px;color:var(--text-3);display:flex;gap:5px;flex-wrap:wrap;margin-top:2px;}
    .pl-card-val{font-size:11px;font-weight:800;color:var(--success);margin-top:3px;}
    .pl-card-tags{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px;}
    .pl-tag{font-size:8px;padding:2px 5px;border-radius:4px;font-weight:600;}
    .pl-drop{min-height:50px;border:2px dashed transparent;border-radius:8px;transition:all 0.15s;}
    .pl-drop.drag-over{border-color:var(--brand-light);background:var(--brand-50);}
    .pl-stat{background:white;border-radius:10px;padding:12px;border:1px solid var(--border-light);box-shadow:var(--sh-xs);}
    .pl-stat-label{font-size:9px;color:var(--text-3);font-weight:600;margin-bottom:3px;}
    .pl-stat-val{font-size:20px;font-weight:800;}
    .vd-card{background:white;border-radius:14px;padding:14px;border:1.5px solid var(--border);box-shadow:var(--sh-xs);transition:all 0.2s;}
    .vd-card:hover{box-shadow:var(--sh-md);border-color:var(--brand-light);}
    .tl-line{border-left:2px solid var(--border);margin-left:10px;padding-left:14px;}
    .tl-item{position:relative;padding-bottom:12px;}
    .tl-item::before{content:'';position:absolute;left:-19px;top:3px;width:8px;height:8px;border-radius:50%;border:2px solid var(--brand);background:white;}
    .tl-item.t-llamada::before{background:#22c55e;border-color:#22c55e;}
    .tl-item.t-cobro::before{background:#f39c12;border-color:#f39c12;}
    .tl-item.t-mensaje::before{background:#3b82f6;border-color:#3b82f6;}
    .tl-item.t-email::before{background:#8b5cf6;border-color:#8b5cf6;}
    .tl-item.t-reunion::before{background:#ec4899;border-color:#ec4899;}
    .tl-item.t-cotizacion::before{background:#eab308;border-color:#eab308;}
    .tl-item.t-seguimiento::before{background:#06b6d4;border-color:#06b6d4;}
    .call-timer{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--brand);letter-spacing:1px;}
    .call-timer.active{color:#dc2626;animation:callPulse 1s ease infinite;}
    @keyframes callPulse{0%,100%{opacity:1}50%{opacity:0.6}}
    .funnel-bar{height:32px;border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:11px;font-weight:700;color:white;margin-bottom:4px;transition:width 0.6s ease;min-width:60px;}
    .lb-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border-light);transition:background 0.15s;}
    .lb-row:hover{background:var(--bg-subtle);}
    .lb-rank{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;}
    .cal-day{border:1px solid var(--border-light);border-radius:8px;min-height:70px;padding:4px;font-size:10px;cursor:pointer;transition:all 0.15s;}
    .cal-day:hover{background:var(--brand-50);border-color:var(--brand-light);}
    .cal-day.today{background:var(--brand-50);border-color:var(--brand);font-weight:700;}
    .cal-event{background:var(--brand);color:white;padding:1px 4px;border-radius:3px;font-size:8px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}

    /* ═══════════ RESPONSIVE ═══════════ */
    @media(max-width:768px){
      .crm-sidebar{width:54px;min-width:54px;}
      .crm-sidebar span:not(.nav-icon),.crm-sidebar .sidebar-brand h2,.crm-sidebar .sidebar-brand p,.crm-sidebar .nav-group-label,.crm-sidebar .sidebar-user-name,.crm-sidebar .sidebar-user-role,.crm-sidebar .sidebar-logout-btn,.crm-sidebar .portal-tabs{display:none;}
      .crm-sidebar .sidebar-brand{padding:10px 10px;}
      .crm-sidebar .sidebar-brand-row{justify-content:center;}
      .crm-sidebar .crm-nav-item{justify-content:center;padding:10px;margin:1px 4px;}
      .crm-sidebar .crm-nav-item.active-nav::before{display:none;}
      .crm-sidebar .sidebar-user{justify-content:center;padding:8px;}
      .content-body{padding:10px;}
      .admin-grid-2col{grid-template-columns:1fr;}
      .admin-stats-grid,#adminStatsGrid{grid-template-columns:1fr 1fr;}
    }

    @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
    .admin-section{animation:fadeUp 0.3s ease-out;}
    .psd-item:hover{background:rgba(22,128,60,0.08)!important;}
          .fl{display:block;font-size:10px;font-weight:600;color:var(--text-3);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.3px;}
          .fi{width:100%;padding:9px 11px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-family:inherit;background:white;color:var(--text-1);box-sizing:border-box;}
          .fi:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50);}
          textarea.fi{resize:vertical;}



/* =====================================================
   TRADEMASTER CRM STYLE OVERRIDE
   Dark teal sidebar, green accent, Inter font
   ===================================================== */
:root {
  --brand: #16803c;
  --brand-50: rgba(22,128,60,0.08);
  --brand-dark: #15703a;
  --bg: #0f3640;
  --bg-page: #f7f7f5;
  --border: rgba(255,255,255,0.08);
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --text-2: rgba(255,255,255,0.55);
  --text-3: rgba(255,255,255,0.35);
}
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f7f7f5; }
.crm-sidebar { background: #0f3640; border-right: none; width: 220px; min-width: 220px; box-shadow: 2px 0 8px rgba(0,0,0,0.15); }
.crm-sidebar .sidebar-brand h2, .crm-sidebar .sidebar-brand h3, .crm-sidebar .sidebar-brand .brand-name { color: #fff; font-weight: 800; }
.crm-sidebar .sidebar-brand small, .crm-sidebar .sidebar-brand .brand-subtitle { color: rgba(255,255,255,0.45); }
.crm-sidebar .nav-group-label { color: rgba(255,255,255,0.35); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; }
.crm-nav-item { color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 500; padding: 8px 12px; margin: 1px 8px; border-radius: 6px; }
.crm-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.crm-nav-item.active-nav { background: rgba(255,255,255,0.12); color: #fff; font-weight: 600; }
.crm-nav-item.active-nav::before { background: #fff; }
.crm-sidebar .sidebar-user, .crm-sidebar .user-section { border-top: 1px solid rgba(255,255,255,0.08); }
.crm-sidebar .sidebar-user-name { color: #fff; font-weight: 600; }
.crm-sidebar .sidebar-user-role { color: rgba(255,255,255,0.45); }
.crm-sidebar .sidebar-logout-btn { background: rgba(239,68,68,0.15); color: #ef4444; }
.admin-main-content, .crm-content { background: #f7f7f5; }
.admin-stat-card { background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; box-shadow: none; border-top: 3px solid transparent; transition: all 0.2s ease; }
.admin-stat-card:nth-child(1) { border-top-color: #f59e0b; }
.admin-stat-card:nth-child(2) { border-top-color: #ef4444; }
.admin-stat-card:nth-child(3) { border-top-color: #16803c; }
.admin-stat-card:nth-child(4) { border-top-color: #2563eb; }
.admin-stat-card:nth-child(5) { border-top-color: #8b5cf6; }
.admin-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.admin-stat-value { font-size: 28px; font-weight: 800; color: #1a1d21; }
.admin-stat-label { font-size: 12px; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-section { background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; box-shadow: none; }
.admin-section-title { font-size: 16px; font-weight: 700; color: #1a1d21; }
.admin-nav-btn { background: #16803c; color: #fff; border: none; border-radius: 6px; font-weight: 600; }
.admin-nav-btn:hover { background: #15703a; }
.admin-filter-input, .admin-filter-select { background: #fff; border: 1px solid #e3e7ee; border-radius: 6px; color: #1a1d21; }
.admin-section table th { background: #f7f7f5; color: #6b7280; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #e3e7ee; }
.admin-section table td { border-bottom: 1px solid #f0f0ee; font-size: 13px; color: #1a1d21; }
.admin-section table tr:hover td { background: #f7f7f5; }
.portal-tabs .portal-tab.active { background: #16803c; color: #fff; }
.portal-tabs .portal-tab:not(.active) { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.1); }
.crm-sidebar::-webkit-scrollbar { width: 4px; }
.crm-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.crm-sidebar::-webkit-scrollbar-track { background: transparent; }