/* ============================================ VARIABLES PREMIUM - TEMA OSCURO (Default) ============================================ */ :root { /* Face360 New Color Palette */ --terracotta: #db9877; --navy-deep: #103754; --blue-gray: #a4bbc4; --cream: #eeded3; --gold: var(--terracotta); --gold-bright: #e5a88a; --gold-light: #f0c4b0; --gold-glow: rgba(219, 152, 119, 0.2); --gold-glow-strong: rgba(219, 152, 119, 0.35); --navy: var(--navy-deep); --navy-dark: #0a2335; --navy-mid: #154260; --navy-light: var(--blue-gray); --white: #ffffff; --text-primary: #ffffff; --text-secondary: #e8d5c5; --text-muted: rgba(238, 222, 211, 0.6); /* Glassmorphism */ --glass-bg: rgba(238, 222, 211, 0.05); --glass-bg-light: rgba(238, 222, 211, 0.03); --glass-bg-strong: rgba(238, 222, 211, 0.08); --glass-border: rgba(238, 222, 211, 0.1); --glass-border-hover: rgba(219, 152, 119, 0.4); --glass-shadow: 0 8px 32px rgba(16, 55, 84, 0.4); --glass-shadow-hover: 0 12px 48px rgba(16, 55, 84, 0.5); --card-bg: rgba(238, 222, 211, 0.03); --input-bg: rgba(238, 222, 211, 0.06); --input-border: rgba(238, 222, 211, 0.15); --hover-bg: rgba(219, 152, 119, 0.1); --danger: #ef4444; --success: #22c55e; --warning: #f59e0b; --info: #3b82f6; --purple: #a855f7; --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); --sidebar-width: 280px; --body-bg: var(--navy-dark); --sidebar-bg: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-mid) 100%); --topbar-bg: var(--navy-dark); --modal-bg: var(--navy-deep); --table-bg: transparent; --table-row-hover: rgba(238, 222, 211, 0.03); /* Border Radius */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 9999px; } /* ============================================ TEMA CLARO - OPTIMIZADO ============================================ */ body.light-theme { --navy: var(--cream); --navy-dark: #ffffff; --navy-mid: var(--cream); --navy-light: var(--blue-gray); --white: var(--navy-deep); --text-primary: #103754; --text-secondary: #1a4a6e; --text-muted: rgba(16, 55, 84, 0.6); --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-light: rgba(255, 255, 255, 0.5); --glass-bg-strong: rgba(255, 255, 255, 0.9); --glass-border: rgba(16, 55, 84, 0.1); --glass-border-hover: var(--terracotta); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --glass-shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12); --card-bg: rgba(255, 255, 255, 0.6); --input-bg: rgba(16, 55, 84, 0.04); --input-border: rgba(16, 55, 84, 0.1); --hover-bg: rgba(219, 152, 119, 0.1); --body-bg: #faf8f6; --sidebar-bg: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%); --topbar-bg: #ffffff; --modal-bg: #ffffff; --table-bg: #ffffff; --table-row-hover: rgba(16, 55, 84, 0.02); --pipeline-bg: rgba(255, 255, 255, 0.5); } /* ============================================ BASE & RESET ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Outfit', sans-serif; background: var(--body-bg); color: #ffffff; min-height: 100vh; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Ensure all text is visible on dark background */ h1, h2, h3, h4, h5, h6 { color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } p, span, label, a, li, td, th { color: #e8d5c5 !important; } .nav-link, .sidebar * { color: #ffffff !important; } .section-header p { color: rgba(232, 213, 197, 0.8) !important; } /* KPI and data visibility */ .kpi-value, .kpi-label { color: #ffffff !important; } /* Form elements */ input, textarea, select { color: #ffffff !important; } body.light-theme input, body.light-theme textarea, body.light-theme select { color: var(--text-primary) !important; } select option { background-color: var(--navy-deep) !important; color: #ffffff !important; } body.light-theme select option { background-color: var(--cream) !important; color: var(--navy-deep) !important; } input::placeholder, textarea::placeholder { color: rgba(232, 213, 197, 0.5) !important; } /* Scrollbar Premium */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold), rgba(199, 162, 82, 0.4)); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); } /* ============================================ SIDEBAR PREMIUM ============================================ */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--glass-border); padding: 2.5rem 1.5rem; display: flex; flex-direction: column; position: fixed; height: 100vh; overflow-y: auto; z-index: 200; transition: var(--transition); backdrop-filter: blur(20px); } .logo-area { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--glass-border); } /* White pill container for logo — visible in dark/blue theme */ .logo-img-wrap { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border-radius: var(--radius-lg); padding: 10px 18px; margin-bottom: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.08); transition: var(--transition); } .logo-img-wrap:hover { box-shadow: 0 8px 30px rgba(219, 152, 119, 0.3), 0 0 0 1px rgba(219,152,119,0.2); transform: translateY(-1px); } /* In light theme: sidebar is white, no white box needed */ body.light-theme .logo-img-wrap { background: transparent; box-shadow: none; padding: 0; border-radius: 0; } .logo-area h2 { font-family: 'Outfit', sans-serif; font-size: 1.8rem; letter-spacing: 4px; background: linear-gradient(135deg, var(--terracotta) 0%, var(--gold-bright) 50%, var(--cream) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(219, 152, 119, 0.3); } .logo-area p { font-size: 0.6rem; letter-spacing: 5px; color: var(--cream); opacity: 0.7; text-transform: uppercase; margin-top: 6px; font-weight: 400; } .nav-menu { list-style: none; flex-grow: 1; } .nav-item { margin-bottom: 6px; } .nav-link { text-decoration: none; color: var(--text-primary); opacity: 0.75; padding: 1rem 1.2rem; border-radius: var(--radius-md); display: flex; align-items: center; gap: 16px; font-size: 0.85rem; font-weight: 500; transition: var(--transition); position: relative; overflow: hidden; } .nav-link::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: linear-gradient(90deg, rgba(199, 162, 82, 0.15), transparent); transition: var(--transition); } .nav-link:hover { opacity: 1; background: var(--hover-bg); transform: translateX(4px); } .nav-link:hover::before { width: 100%; } .nav-link.active { opacity: 1; background: linear-gradient(135deg, rgba(219, 152, 119, 0.15), rgba(219, 152, 119, 0.05)); color: var(--terracotta); box-shadow: inset 4px 0 0 var(--terracotta); transform: translateX(4px); } .nav-link i { font-size: 1.1rem; width: 22px; text-align: center; transition: var(--transition); } .nav-link:hover i { transform: scale(1.1); } .nav-badge { position: absolute; right: 14px; background: linear-gradient(135deg, var(--danger), #dc2626); color: white; font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); min-width: 20px; text-align: center; box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4); } /* Submenu */ .has-submenu>.nav-link { justify-content: space-between; } .has-submenu.open>.nav-link .submenu-arrow { transform: rotate(180deg); } .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; visibility: hidden; transition: var(--transition); background: rgba(0, 0, 0, 0.1); border-radius: var(--radius-md); margin: 4px 8px; } body.light-theme .submenu { background: rgba(0, 0, 0, 0.04); } body.light-theme .sidebar { background: linear-gradient(180deg, #ffffff 0%, #f5f0eb 100%); } body.light-theme .sidebar .nav-link { color: #103754 !important; opacity: 0.8; } body.light-theme .sidebar .nav-link.active { color: #103754 !important; opacity: 1; background: linear-gradient(135deg, rgba(199, 162, 82, 0.2), rgba(199, 162, 82, 0.1)); } body.light-theme .sidebar .nav-link:hover { opacity: 1; } body.light-theme .sidebar * { color: #103754 !important; } body.light-theme .logo-area { color: #103754 !important; } body.light-theme .logout-area .nav-link { color: #dc2626 !important; } body.light-theme .ranking-name { color: #103754 !important; } body.light-theme .ranking-count { color: #103754 !important; } body.light-theme .ranking-status { color: #103754 !important; } body.light-theme .progress-bar { background: rgba(16, 55, 84, 0.1); } body.light-theme .face-one-search-result { color: #103754 !important; } body.light-theme .referral-status-nuevo, body.light-theme .referral-status-contactado, body.light-theme .referral-status-cita_agendada, body.light-theme .referral-status-presupuestado, body.light-theme .referral-status-facturado, body.light-theme .referral-status-convertido, body.light-theme .referral-status-perdido { color: #103754 !important; } .submenu.open { max-height: 400px; visibility: visible; } .submenu li { position: relative; padding: 3px 0; } .submenu li::before { content: ''; position: absolute; left: 1.8rem; top: 50%; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; opacity: 0.6; box-shadow: 0 0 8px var(--gold); } .submenu li a { text-decoration: none; color: var(--text-primary); opacity: 0.6; padding: 0.7rem 1rem 0.7rem 3rem; display: block; font-size: 0.78rem; transition: var(--transition); border-radius: var(--radius-sm); margin: 2px 12px; } .submenu li a:hover { opacity: 1; background: rgba(199, 162, 82, 0.1); color: var(--gold); } .submenu li a.active { opacity: 1; color: var(--gold); background: rgba(199, 162, 82, 0.15); } .logout-area { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--glass-border); } /* ============================================ HAMBURGER & OVERLAY ============================================ */ .hamburger { display: none; position: fixed; top: 20px; left: 20px; z-index: 300; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--gold); font-size: 1.3rem; width: 48px; height: 48px; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); align-items: center; justify-content: center; backdrop-filter: blur(10px); box-shadow: var(--glass-shadow); } .hamburger:hover { background: var(--gold); color: var(--navy-dark); transform: scale(1.05); } /* Sidebar Toggle Button */ .sidebar-toggle-btn { position: absolute !important; top: 100px !important; right: -16px !important; width: 36px !important; height: 36px !important; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%) !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; border-radius: 50% !important; color: var(--navy-dark) !important; font-size: 1rem !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: var(--transition) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(199, 162, 82, 0.3) !important; z-index: 9999 !important; } .sidebar-toggle-btn:hover { transform: scale(1.2); box-shadow: 0 6px 20px rgba(199, 162, 82, 0.5), 0 0 30px rgba(199, 162, 82, 0.4); } body.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-width) - 20px)); } body.sidebar-collapsed .main-container { margin-left: 20px; } body.sidebar-collapsed .sidebar-toggle-btn i { transform: rotate(180deg); } /* When collapsed: show hamburger as the reopen button */ body.sidebar-collapsed .hamburger { left: 12px; display: flex !important; opacity: 1; visibility: visible; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--navy-dark); border-color: transparent; box-shadow: 0 4px 20px rgba(219,152,119,0.4); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 199; } /* ============================================ TOPBAR PREMIUM ============================================ */ .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; padding: 20px 24px; border: 1px solid rgba(219, 152, 119, 0.15); background: linear-gradient(135deg, rgba(219, 152, 119, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); border-radius: var(--radius-lg); box-shadow: 0 4px 20px rgba(199, 162, 82, 0.05); backdrop-filter: blur(10px); transition: var(--transition); position: relative; z-index: 9000; } .welcome-text h1 { font-family: 'Outfit', sans-serif; font-size: 2rem; margin-bottom: 4px; color: var(--text-primary); letter-spacing: 1px; } .welcome-text p { opacity: 0.5; font-weight: 300; font-size: 0.9rem; color: var(--text-secondary); } .top-actions { display: flex; gap: 14px; align-items: center; } .topbar-logo { display: flex; align-items: center; } .topbar-logo img { height: 45px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2)); transition: transform 0.3s ease; } .topbar-logo img:hover { transform: scale(1.05); } .search-box { position: relative; } .search-box input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-full); padding: 12px 18px 12px 45px; color: var(--text-primary); width: 280px; font-family: inherit; font-size: 0.85rem; outline: none; transition: var(--transition); } .search-box input:focus { border-color: var(--gold); width: 340px; background: var(--glass-bg-strong); box-shadow: 0 0 0 4px rgba(199, 162, 82, 0.1); } .search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: 0.4; font-size: 0.9rem; color: var(--gold); transition: var(--transition); } .search-box input:focus+i { opacity: 1; } .theme-toggle-btn, .notif-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); width: 46px; height: 46px; border-radius: var(--radius-md); cursor: pointer; font-size: 1.1rem; transition: var(--transition); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); } .theme-toggle-btn:hover, .notif-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--hover-bg); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(199, 162, 82, 0.2); } .notif-badge { position: absolute; top: -5px; right: -5px; background: linear-gradient(135deg, var(--danger), #dc2626); color: white; font-size: 0.6rem; font-weight: 700; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: var(--radius-full); border: 2px solid var(--navy-dark); animation: pulse-badge 2s infinite; box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4); } @keyframes pulse-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .notif-dropdown { display: none; position: absolute; top: 58px; right: 0; width: 380px; max-height: 450px; overflow-y: auto; background: var(--modal-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 0; box-shadow: var(--glass-shadow-hover); z-index: 9999; backdrop-filter: blur(20px); } .notif-dropdown.show { display: block; } .notif-dropdown-header { padding: 18px 22px; border-bottom: 1px solid var(--glass-border); font-weight: 700; font-size: 0.9rem; color: var(--gold); display: flex; align-items: center; gap: 10px; } .notif-item { padding: 16px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.03); cursor: pointer; transition: var(--transition); display: flex; gap: 14px; align-items: flex-start; } body.light-theme .notif-item { border-bottom-color: rgba(0, 0, 0, 0.05); } .notif-item:hover { background: rgba(199, 162, 82, 0.06); } .notif-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 10px var(--gold); } .notif-text { font-size: 0.82rem; line-height: 1.5; color: var(--text-primary); } .notif-time { font-size: 0.7rem; opacity: 0.4; margin-top: 4px; } .notif-empty { padding: 40px; text-align: center; opacity: 0.5; font-size: 0.9rem; color: var(--text-muted); } .live-clock { font-size: 0.8rem; opacity: 0.5; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text-secondary); padding: 8px 14px; background: var(--glass-bg); border-radius: var(--radius-full); border: 1px solid var(--glass-border); } /* ============================================ MAIN CONTAINER ============================================ */ .main-container { margin-left: var(--sidebar-width); padding: 2.5rem 3rem; background: radial-gradient(ellipse at 20% 0%, rgba(199, 162, 82, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, 0.04) 0%, transparent 50%), var(--body-bg); min-height: 100vh; transition: var(--transition); } body.light-theme .main-container { background: radial-gradient(ellipse at 20% 0%, rgba(199, 162, 82, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, 0.06) 0%, transparent 50%), #f5f6f8; } /* ============================================ KPI GRID PREMIUM ============================================ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 2.5rem; } .kpi-card { background: linear-gradient(135deg, rgba(238, 222, 211, 0.05) 0%, rgba(238, 222, 211, 0.02) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 1.8rem 2rem; position: relative; overflow: hidden; transition: var(--transition); backdrop-filter: blur(15px); box-shadow: var(--glass-shadow); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, var(--gold) 0%, rgba(199, 162, 82, 0.1) 100%); } .kpi-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(199, 162, 82, 0.05) 0%, transparent 70%); opacity: 0; transition: var(--transition); pointer-events: none; } .kpi-card:hover { transform: translateY(-5px); border-color: var(--terracotta); box-shadow: 0 20px 60px rgba(16, 55, 84, 0.4); } body.light-theme .kpi-card:hover { box-shadow: 0 20px 60px rgba(16, 55, 84, 0.2); } .kpi-card:hover::after { opacity: 1; } .kpi-value { font-family: 'Outfit', sans-serif; font-size: 2.2rem; color: var(--terracotta); margin-bottom: 4px; line-height: 1; text-shadow: 0 0 20px rgba(199, 162, 82, 0.3); } .kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.5; font-weight: 500; } .kpi-icon { position: absolute; right: 24px; top: 24px; font-size: 1.5rem; opacity: 0.15; color: var(--gold); } .kpi-trend { font-size: 0.68rem; margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-full); font-weight: 600; } .kpi-trend.up { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .kpi-trend.down { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .kpi-trend.neutral { background: rgba(164, 187, 196, 0.15); color: var(--blue-gray); } body.light-theme .kpi-trend.neutral { background: rgba(164, 187, 196, 0.2); } /* ============================================ CHART CONTAINER ============================================ */ .chart-container { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 2.5rem; backdrop-filter: blur(10px); } .chart-container h3 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; margin-bottom: 1.2rem; color: var(--text-primary); display: flex; align-items: center; gap: 12px; } .chart-canvas { width: 100%; height: 200px; } /* ============================================ DATA SECTION PREMIUM ============================================ */ .data-section { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--glass-shadow); transition: var(--transition); backdrop-filter: blur(15px); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; flex-wrap: wrap; gap: 12px; background: linear-gradient(135deg, rgba(199, 162, 82, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); padding: 20px 24px; border-radius: var(--radius-lg); border: 1px solid rgba(199, 162, 82, 0.15); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(199, 162, 82, 0.05); } .section-header h2 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; color: var(--text-primary); display: flex; align-items: center; gap: 12px; } .section-subtitle { font-size: 0.85rem; color: var(--text-secondary); opacity: 0.7; margin-top: 4px; font-weight: 300; } .header-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================ TABLES PREMIUM ============================================ */ table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--table-bg); transition: var(--transition); border-radius: var(--radius-lg); overflow: hidden; } th { text-align: left; padding: 1rem 1.2rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.6; color: var(--text-secondary); border-bottom: 2px solid var(--glass-border); font-weight: 700; background: rgba(255, 255, 255, 0.02); } th:first-child { border-top-left-radius: var(--radius-lg); } th:last-child { border-top-right-radius: var(--radius-lg); } td { padding: 1rem 1.2rem; font-size: 0.85rem; border-bottom: 1px solid var(--glass-border); color: var(--text-primary); vertical-align: middle; } body.light-theme td { color: var(--text-primary); } tr:hover { background: var(--table-row-hover); } /* ============================================ BUTTONS PREMIUM ============================================ */ .btn-login { width: 100%; padding: 1.1rem; background: linear-gradient(135deg, var(--terracotta) 0%, var(--gold-bright) 100%); color: var(--navy-dark); border: none; border-radius: var(--radius-md); font-weight: 700; cursor: pointer; transition: var(--transition); font-size: 0.95rem; box-shadow: 0 4px 20px rgba(219, 152, 119, 0.3); } .btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(219, 152, 119, 0.4); } .btn-action { background: transparent; border: 1px solid rgba(219, 152, 119, 0.3); color: var(--terracotta); padding: 10px 18px; border-radius: var(--radius-full); cursor: pointer; transition: var(--transition); font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(5px); } .btn-action:hover { background: linear-gradient(135deg, rgba(219, 152, 119, 0.2) 0%, rgba(219, 152, 119, 0.1) 100%); border-color: var(--terracotta); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(219, 152, 119, 0.3); } .btn-filter { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 10px 18px; border-radius: var(--radius-full); cursor: pointer; transition: var(--transition); font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(5px); } .btn-filter:hover { background: var(--gold); color: var(--navy-dark); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(199, 162, 82, 0.25); } .btn-export { background: var(--gold); color: var(--navy-dark); border: none; padding: 10px 18px; border-radius: var(--radius-full); cursor: pointer; transition: var(--transition); font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(199, 162, 82, 0.25); } .btn-export:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(199, 162, 82, 0.35); } .btn-primary { background: linear-gradient(135deg, var(--terracotta), var(--gold-bright)); color: var(--navy-dark); border: none; padding: 12px 24px; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; transition: var(--transition); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(219, 152, 119, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(219, 152, 119, 0.4); } /* Agenda Filters */ .agenda-filters { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; } .agenda-filter-select { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 10px 16px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; font-family: 'Outfit', sans-serif; cursor: pointer; transition: var(--transition); backdrop-filter: blur(5px); outline: none; } .agenda-filter-select:hover { border-color: rgba(199, 162, 82, 0.4); background: rgba(199, 162, 82, 0.08); } .agenda-filter-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199, 162, 82, 0.15); } .agenda-filter-select option { background: var(--navy); color: var(--text-primary); padding: 10px; } /* ============================================ LEAD SOURCES & BADGES ============================================ */ .lead-source { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; } .source-wp { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); } .source-meta { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); } .source-diag { background: rgba(199, 162, 82, 0.15); color: var(--gold); border: 1px solid rgba(199, 162, 82, 0.2); } .source-whatsapp { background: rgba(37, 211, 102, 0.15); color: #25d366; border: 1px solid rgba(37, 211, 102, 0.2); } .source-faceone { background: rgba(219, 152, 119, 0.15); color: var(--gold); border: 1px solid rgba(219, 152, 119, 0.25); } .source-manual { background: rgba(236, 72, 153, 0.15); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.25); } /* ============================================ PIPELINE KANBAN PREMIUM ============================================ */ .pipeline-board { display: flex; gap: 16px; overflow-x: scroll; padding-bottom: 12px; min-height: 550px; scroll-behavior: smooth; scrollbar-width: none; /* hide native scrollbar */ } .pipeline-board::-webkit-scrollbar { display: none; } /* --- Custom Pipeline Scrollbar --- */ .pipeline-scrollbar-wrap { position: relative; width: 100%; margin-bottom: 18px; padding: 0 2px; } .pipeline-scrollbar-labels { display: flex; justify-content: space-between; margin-bottom: 6px; } .pipeline-scrollbar-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; text-align: center; transition: color 0.25s; } .pipeline-scrollbar-label.active { color: var(--gold); } .pipeline-scrollbar-label .lbl-emoji { font-size: 0.85rem; } .pipeline-scrollbar-track { position: relative; width: 100%; height: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-full); cursor: pointer; overflow: hidden; } .pipeline-scrollbar-track::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent, transparent calc(100% / 7 - 1px), var(--glass-border) calc(100% / 7 - 1px), var(--glass-border) calc(100% / 7) ); pointer-events: none; } .pipeline-scrollbar-thumb { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--terracotta), var(--gold)); border-radius: var(--radius-full); box-shadow: 0 2px 10px rgba(219, 152, 119, 0.5); cursor: grab; transition: box-shadow 0.2s, background 0.2s; min-width: 40px; } .pipeline-scrollbar-thumb:active { cursor: grabbing; box-shadow: 0 4px 18px rgba(219, 152, 119, 0.7); background: linear-gradient(90deg, var(--gold), var(--terracotta)); } .pipeline-scrollbar-thumb:hover { box-shadow: 0 4px 16px rgba(219, 152, 119, 0.6); } body.light-theme .pipeline-scrollbar-track { background: rgba(16,55,84,0.05); border-color: rgba(16,55,84,0.12); } body.light-theme .pipeline-scrollbar-label { color: rgba(16,55,84,0.45); } body.light-theme .pipeline-scrollbar-label.active { color: var(--terracotta); } .pipeline-column { min-width: 280px; flex: 1; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 16px; display: flex; flex-direction: column; backdrop-filter: blur(15px); box-shadow: var(--glass-shadow); } .pipeline-column-header { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; } .pipeline-count { background: rgba(199, 162, 82, 0.2); color: var(--gold); padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 700; } .pipeline-cards { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 50px; } .pipeline-cards.drag-over { background: rgba(199, 162, 82, 0.08); border-radius: var(--radius-md); } .pipeline-card { background: linear-gradient(135deg, rgba(238, 222, 211, 0.06) 0%, rgba(238, 222, 211, 0.02) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 14px; cursor: grab; transition: var(--transition); backdrop-filter: blur(10px); } .pipeline-card:hover { border-color: var(--terracotta); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(16, 55, 84, 0.3), 0 0 20px rgba(219, 152, 119, 0.15); } .pipeline-card:active { cursor: grabbing; } /* Lead creado hoy - identificador visual */ .pipeline-card-today { border-left: 4px solid var(--success); background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(238, 222, 211, 0.02) 100%); position: relative; } .pipeline-card-today::before { content: '🆕'; position: absolute; top: 8px; right: 8px; font-size: 0.7rem; background: rgba(34, 197, 94, 0.2); padding: 2px 6px; border-radius: 4px; } .pipeline-card-name { font-weight: 600; margin-bottom: 6px; color: var(--text-primary); } .pipeline-card-service { font-size: 0.72rem; opacity: 0.6; margin-bottom: 8px; color: var(--text-secondary); } .pipeline-card-contact-count { font-size: 0.68rem; opacity: 0.5; margin-bottom: 8px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; } .pipeline-card-footer { display: flex; justify-content: space-between; align-items: center; } .pipeline-card-date { font-size: 0.62rem; opacity: 0.4; color: var(--text-muted); } /* ============================================ MODAL PREMIUM ============================================ */ .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); z-index: 11000; justify-content: center; align-items: center; } body.light-theme .modal { background: rgba(0, 0, 0, 0.65); } .modal-content { background: var(--modal-bg); width: 92%; max-width: 1000px; border-radius: var(--radius-xl); padding: 3rem; position: relative; border: 1px solid rgba(199, 162, 82, 0.2); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6); overflow-y: auto; max-height: 92vh; transition: var(--transition); backdrop-filter: blur(20px); } .close-btn { position: absolute; top: 24px; right: 32px; font-size: 1.8rem; color: var(--gold); cursor: pointer; opacity: 0.7; transition: var(--transition); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 10; user-select: none; line-height: 1; } .close-btn:hover { opacity: 1; background: rgba(199, 162, 82, 0.1); transform: rotate(90deg); } /* Modal overlay para configuración de recompensas */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; } .modal-overlay .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; z-index: 10; } .modal-overlay .modal-close:hover { background: var(--glass-border); color: var(--text-primary); } .modal-overlay .modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--glass-border); margin-bottom: 20px; } .modal-overlay .modal-header h3 { color: var(--gold); font-size: 1.2rem; margin: 0; } .modal-overlay .modal-body { padding: 0; } /* ============================================ EMAIL MODULE PREMIUM ============================================ */ .email-layout { display: grid; grid-template-columns: 340px 1fr; gap: 28px; } .email-sidebar-panel { display: flex; flex-direction: column; gap: 20px; } .email-config-card, .email-templates-card, .email-history-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.5rem; backdrop-filter: blur(10px); } .email-config-card h4, .email-templates-card h4, .email-history-card h4 { color: var(--gold); font-size: 0.88rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; } .email-input { width: 100%; padding: 12px 16px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.85rem; margin-bottom: 12px; outline: none; transition: var(--transition); } .email-input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(219, 152, 119, 0.1); transition: var(--transition); } .email-input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(199, 162, 82, 0.1); } .email-textarea { width: 100%; min-height: 240px; padding: 16px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.88rem; resize: vertical; outline: none; transition: var(--transition); line-height: 1.7; } .email-textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(199, 162, 82, 0.1); } .email-composer-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 2rem; backdrop-filter: blur(10px); } .template-btn { width: 100%; text-align: left; padding: 12px 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; transition: var(--transition); font-size: 0.8rem; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .template-btn:hover { border-color: var(--gold); background: rgba(199, 162, 82, 0.08); color: var(--gold); transform: translateX(4px); } .btn-send-email { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--navy-dark); border: none; padding: 14px 28px; border-radius: var(--radius-md); font-weight: 700; cursor: pointer; transition: var(--transition); font-size: 0.88rem; display: flex; align-items: center; gap: 10px; justify-content: center; box-shadow: 0 4px 20px rgba(199, 162, 82, 0.3); } .btn-send-email:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(199, 162, 82, 0.4); } /* ============================================ CONTACTS GRID PREMIUM ============================================ */ .contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .contact-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 1.4rem; display: flex; gap: 16px; align-items: flex-start; cursor: pointer; transition: var(--transition); backdrop-filter: blur(15px); box-shadow: var(--glass-shadow); } .contact-card:hover { border-color: rgba(199, 162, 82, 0.5); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 0 24px rgba(199, 162, 82, 0.12); } .contact-avatar { width: 50px; height: 50px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--gold), rgba(199, 162, 82, 0.5)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: var(--navy-dark); flex-shrink: 0; box-shadow: 0 4px 15px rgba(199, 162, 82, 0.3); } .contact-info { flex: 1; min-width: 0; } .contact-name { font-weight: 600; font-size: 1rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); } .contact-detail { font-size: 0.78rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); } .contact-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .contact-chip { font-size: 0.68rem; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(199, 162, 82, 0.1); color: var(--gold); border: 1px solid rgba(199, 162, 82, 0.2); } /* ============================================ ANIMATIONS ============================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .fade-in { animation: fadeIn 0.5s ease-out; } .slide-in { animation: slideInRight 0.45s ease-out; } .content-section { display: none; } .content-section.active { display: block; animation: fadeIn 0.45s ease-out; } #section-whatsapp.active { display: flex; } /* ============================================ FACE ONE - SISTEMA DE REFERIDOS ============================================ */ .face-one-ranking { display: grid; gap: 12px; } .ranking-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); transition: var(--transition); position: relative; overflow: hidden; cursor: pointer; } .ranking-item::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--gold), transparent); } .ranking-item:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(199, 162, 82, 0.2); } .ranking-item.top-3 { border-color: var(--gold); background: linear-gradient(135deg, rgba(219, 152, 119, 0.1), rgba(255, 255, 255, 0.02)); } .ranking-item.top-3::before { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); } .ranking-position { width: 45px; height: 45px; border-radius: 50%; background: var(--glass-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: var(--gold); flex-shrink: 0; } .ranking-item.top-3 .ranking-position { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--navy-dark); box-shadow: 0 4px 15px rgba(199, 162, 82, 0.4); } .ranking-item.reward-earned { background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(255, 255, 255, 0.02)); border-color: var(--success); } .ranking-item.reward-earned::before { background: linear-gradient(180deg, var(--success), transparent); } .ranking-info { flex: 1; min-width: 0; } .ranking-name { font-weight: 600; font-size: 1rem; color: var(--text-primary); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ranking-progress { display: flex; align-items: center; gap: 12px; } .progress-bar { flex: 1; height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); overflow: hidden; position: relative; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width 0.5s ease; border-radius: var(--radius-full); } .progress-fill.complete { background: linear-gradient(90deg, var(--success), #4ade80); } .ranking-count { font-size: 0.75rem; font-weight: 700; color: var(--gold); min-width: 45px; text-align: right; } .ranking-status { padding: 6px 12px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600; background: rgba(255, 255, 255, 0.05); color: var(--text-muted); } .ranking-status.earned { background: rgba(34, 197, 94, 0.2); color: var(--success); } .ranking-status.near { background: rgba(245, 158, 11, 0.2); color: var(--warning); } /* Search Results */ .face-one-search-result { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--glass-border); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); } .face-one-search-result:hover { background: rgba(199, 162, 82, 0.08); border-color: var(--gold); } .face-one-search-result.selected { background: rgba(199, 162, 82, 0.15); border-color: var(--gold); } .face-one-result-info { display: flex; flex-direction: column; gap: 4px; } .face-one-result-name { font-weight: 600; color: var(--text-primary); } .face-one-result-detail { font-size: 0.75rem; color: var(--text-muted); } .face-one-badge-active { background: var(--success); color: white; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.65rem; font-weight: 700; } /* Referral Status Colors */ .referral-status-nuevo { color: #3b82f6; background: rgba(59, 130, 246, 0.15); } .referral-status-contactado { color: #f59e0b; background: rgba(245, 158, 11, 0.15); } .referral-status-cita_agendada { color: #8b5cf6; background: rgba(139, 92, 246, 0.15); } .referral-status-presupuestado { color: #ec4899; background: rgba(236, 72, 153, 0.15); } .referral-status-facturado, .referral-status-convertido { color: #22c55e; background: rgba(34, 197, 94, 0.15); font-weight: 600; } .referral-status-perdido { color: #ef4444; background: rgba(239, 68, 68, 0.15); } .referral-card { cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .referral-card:hover { transform: translateY(-2px); border-color: var(--gold) !important; box-shadow: 0 4px 15px rgba(219, 152, 119, 0.15); background: rgba(255, 255, 255, 0.05) !important; } .referral-qualified { border-color: var(--success) !important; box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); } .referral-qualified::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: var(--success); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .main-container { padding: 1.8rem; } .search-box input { width: 200px; } #section-settings>div, #form-editor>div>div { grid-template-columns: 1fr !important; } .email-layout { grid-template-columns: 1fr; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .hamburger { display: flex !important; visibility: visible; opacity: 1; } .sidebar-overlay.show { display: block; } .main-container { margin-left: 0; padding: 1rem; } .topbar { flex-direction: column; gap: 15px; align-items: flex-start; } .top-actions { width: 100%; justify-content: space-between; } .search-box input { width: 100%; } .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .modal-content { width: 96%; padding: 1.8rem; } .pipeline-board { flex-direction: column; } .pipeline-column { min-width: 100%; } table { display: block; overflow-x: auto; } .contacts-grid { grid-template-columns: 1fr; } /* Responsive Adjustments for Face One & Contacts */ .section-header .header-actions { flex-wrap: wrap; gap: 10px; width: 100%; } .section-header .search-box { width: 100% !important; } .section-header .search-box input { width: 100% !important; } .header-actions button { flex: 1; min-width: 140px; text-align: center; justify-content: center; } /* Responsive Filters Bar */ div[style*="display: flex; gap: 15px; flex-wrap: wrap;"] { flex-direction: column; align-items: stretch !important; gap: 10px !important; } div[style*="display: flex; gap: 15px; flex-wrap: wrap;"] > div { width: 100%; justify-content: space-between; } #contactos-filter-pipeline-container, #contactos-filter-pipeline-btn { width: 100%; } #contactos-filter-pipeline-dropdown { width: 100%; } } @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } .welcome-text h1 { font-size: 1.4rem; } .section-header { flex-direction: column; gap: 12px; align-items: flex-start; } .notif-dropdown { right: -80px; width: 300px; } /* Modal Adjustments */ .modal-content { width: 98% !important; padding: 1.2rem !important; margin: 10px !important; max-height: 90vh !important; overflow-y: auto !important; } /* Face One KPIs */ .kpi-grid { grid-template-columns: 1fr !important; } /* Adjust Topbar logo and welcome text spacing */ .topbar { padding: 10px 15px; } .welcome-text h1 { font-size: 1.2rem; } .welcome-text p { font-size: 0.8rem; } } /* ============================================ PUBLIC MODE & NINJA FORMS ============================================ */ body.public-mode { background: transparent; padding: 0; margin: 0; display: block; min-height: auto; } body.public-mode .sidebar, body.public-mode header, body.public-mode .topbar, body.public-mode .hamburger, body.public-mode .main-container>*:not(#public-form-renderer) { display: none !important; } body.public-mode .main-container { display: block !important; margin-left: 0; padding: 0; background: transparent; } #public-form-renderer { display: none; padding: 20px; } body.public-mode #public-form-renderer { display: block; } .render-container { margin: auto; width: 100%; transition: var(--transition); } #success-msg-public { text-align: center; padding: 50px; display: none; } /* Ninja Forms Overrides */ .ninja-forms-field { border-radius: var(--radius-full) !important; border: 1px solid #ccc !important; box-sizing: border-box !important; height: 21px !important; padding: 30px 16px !important; padding-bottom: 30px !important; } .ninja-forms-field::placeholder { color: #c7a252 !important; font-size: 16px !important; } .ninja-forms-field { font-size: 18px !important; } .nf-field-container.checkbox-container label { display: inline-block !important; font-size: 14px !important; color: white !important; } #nf-field-35, #nf-field-41, #public-submit-btn { background-color: #c7a252 !important; color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-size: 20px !important; border-radius: var(--radius-full) !important; padding: 25px 45px !important; border: none !important; cursor: pointer !important; line-height: 1px !important; display: inline-block !important; text-align: right !important; transition: var(--transition) !important; } #nf-field-35:hover, #nf-field-41:hover, #public-submit-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 30px rgba(199, 162, 82, 0.4) !important; } /* Additional Light Theme Fixes */ body.light-theme .kpi-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid rgba(16, 55, 84, 0.1); } body.light-theme .kpi-value { color: #103754 !important; } body.light-theme .kpi-label { color: #64748b !important; } body.light-theme .data-section { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } body.light-theme .topbar { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } body.light-theme .sidebar { box-shadow: 2px 0 10px rgba(0, 0, 0, 0.06); } body.light-theme .modal-content { box-shadow: 0 50px 120px rgba(0, 0, 0, 0.3); background: #ffffff; border-color: rgba(0, 0, 0, 0.1); } body.light-theme .section-header { background: linear-gradient(135deg, rgba(199, 162, 82, 0.1) 0%, rgba(199, 162, 82, 0.03) 100%); border-color: rgba(199, 162, 82, 0.2); box-shadow: 0 4px 20px rgba(199, 162, 82, 0.1); } body.light-theme .chart-container { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(16, 55, 84, 0.1); } body.light-theme .chart-container h3 { color: #103754 !important; } body.light-theme table { background: rgba(255, 255, 255, 0.8); } body.light-theme table thead tr { background: rgba(199, 162, 82, 0.1); } body.light-theme table tbody tr { border-bottom: 1px solid rgba(16, 55, 84, 0.05); } body.light-theme table tbody tr:hover { background: rgba(199, 162, 82, 0.05); } body.light-theme .email-input, body.light-theme .email-textarea, body.light-theme select.email-input, body.light-theme textarea.email-textarea { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); color: #1a1a2e; } body.light-theme .email-input::placeholder, body.light-theme .email-textarea::placeholder { color: rgba(0, 0, 0, 0.4); } body.light-theme label { color: #1a1a2e; } body.light-theme .modal h2, body.light-theme .modal h3 { color: #1a1a2e; } body.light-theme .btn-login { background: linear-gradient(135deg, var(--terracotta) 0%, var(--gold-bright) 100%); color: var(--navy-dark); } body.light-theme .topbar { background: linear-gradient(135deg, rgba(219, 152, 119, 0.1) 0%, rgba(219, 152, 119, 0.03) 100%); border-color: rgba(219, 152, 119, 0.2); box-shadow: 0 4px 20px rgba(219, 152, 119, 0.1); } body.light-theme .btn-action { border-color: rgba(219, 152, 119, 0.4); color: #103754; } body.light-theme .feed-item, body.light-theme .contact-card, body.light-theme .pipeline-card { color: #103754 !important; } body.light-theme .feed-item *, body.light-theme .contact-card *, body.light-theme .pipeline-card * { color: #103754 !important; } body.light-theme table td, body.light-theme table th { color: #103754 !important; } body.light-theme .lead-source { color: #103754 !important; } body.light-theme .close-btn { color: var(--terracotta); } body.light-theme .pipeline-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } /* Lead creado hoy - tema claro */ body.light-theme .pipeline-card-today { border-left: 4px solid var(--success); background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(255, 255, 255, 0.9) 100%); } body.light-theme .pipeline-card-today::before { background: rgba(34, 197, 94, 0.25); } body.light-theme .contact-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } body.light-theme .email-config-card, body.light-theme .email-templates-card, body.light-theme .email-history-card, body.light-theme .email-composer-card { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } body.light-theme .workflow-builder-card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } body.light-theme .rule-item { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } /* Ensure all text is visible in light mode */ body.light-theme h1, body.light-theme h2, body.light-theme h3, body.light-theme h4, body.light-theme h5, body.light-theme h6 { color: #103754 !important; text-shadow: none !important; } body.light-theme p, body.light-theme span, body.light-theme div:not(.kpi-value):not(.ranking-name), body.light-theme label, body.light-theme td, body.light-theme th, body.light-theme a, body.light-theme li { color: #103754 !important; } body.light-theme .kpi-value { color: #103754 !important; } body.light-theme .kpi-label, body.light-theme .text-muted, body.light-theme .text-secondary, body.light-theme .ranking-name { color: #1a4a6e !important; } body.light-theme .welcome-text h1 { color: #103754 !important; } body.light-theme .welcome-text p { color: #1a4a6e !important; } body.light-theme .section-header h2 { color: #103754 !important; } body.light-theme .section-header p { color: #1a4a6e !important; } body.light-theme .contact-detail, body.light-theme .pipeline-card-service, body.light-theme .pipeline-card-contact-count, body.light-theme .pipeline-card-date, body.light-theme .notif-time, body.light-theme .notif-empty { color: #64748b !important; } body.light-theme .notif-text { color: #103754 !important; } /* WhatsApp Module Styles */ .whatsapp-container { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 160px); background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); overflow: hidden; margin-top: 20px; backdrop-filter: blur(10px); } .whatsapp-sidebar { border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.01); } .whatsapp-search { padding: 20px; border-bottom: 1px solid var(--glass-border); background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%); border-radius: var(--radius-lg); margin: 10px; } .whatsapp-search .search-box input { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-full); padding: 12px 18px 12px 45px; color: var(--text-primary); width: 100%; font-family: inherit; font-size: 0.85rem; outline: none; transition: var(--transition); backdrop-filter: blur(5px); } .whatsapp-search .search-box input:focus { border-color: var(--gold); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 3px rgba(199, 162, 82, 0.1); } .chat-list { flex: 1; overflow-y: auto; } .chat-item { padding: 15px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: var(--transition); border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .chat-item:hover { background: var(--hover-bg); } .chat-item.active { background: rgba(199, 162, 82, 0.1); border-left: 3px solid var(--gold); } .chat-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--gold-glow); display: flex; align-items: center; justify-content: center; color: var(--gold); font-weight: 700; font-size: 1.2rem; flex-shrink: 0; } .chat-info { flex: 1; min-width: 0; } .chat-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); } .chat-last-msg { font-size: 0.8rem; opacity: 0.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); } .chat-time { font-size: 0.7rem; opacity: 0.3; align-self: flex-start; padding-top: 4px; } .chat-window { display: flex; flex-direction: column; background: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); background-blend-mode: overlay; background-color: var(--navy-dark); } .chat-header { padding: 15px 25px; background: var(--topbar-bg); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; } .chat-messages { flex: 1; padding: 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; } .msg-bubble { max-width: 70%; padding: 12px 16px; border-radius: 18px; font-size: 0.9rem; line-height: 1.5; position: relative; } .msg-received { align-self: flex-start; background: var(--navy-mid); color: var(--white); border-bottom-left-radius: 4px; } .msg-sent { align-self: flex-end; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--navy-dark); border-bottom-right-radius: 4px; box-shadow: 0 4px 15px rgba(199, 162, 82, 0.3); } .msg-time { font-size: 0.65rem; opacity: 0.5; margin-top: 5px; display: block; text-align: right; } .chat-footer { padding: 20px 25px; background: var(--topbar-bg); border-top: 1px solid var(--glass-border); display: flex; gap: 15px; align-items: center; } .bot-qr-container { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); padding: 30px; border-radius: 32px; width: 260px; height: 260px; margin: 25px auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .bot-qr-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(199, 162, 82, 0.1) 0%, transparent 70%); animation: qr-glow 4s ease-in-out infinite; pointer-events: none; } @keyframes qr-glow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } } .bot-qr-container:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(199, 162, 82, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); border-color: rgba(199, 162, 82, 0.4); } .bot-qr-container>* { position: relative; z-index: 1; } .bot-qr-container canvas, .bot-qr-container img { border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(199, 162, 82, 0.1); transition: transform 0.3s ease; } .bot-qr-container canvas:hover, .bot-qr-container img:hover { transform: scale(1.02); } /* Placeholder QR styles */ .bot-qr-container .qr-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: qr-pulse 2s ease-in-out infinite; } @keyframes qr-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.02); } } .bot-qr-container .qr-placeholder i { font-size: 3.5rem; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 4px 12px rgba(199, 162, 82, 0.3)); margin-bottom: 12px; } .bot-qr-container .qr-placeholder p { font-size: 0.75rem; color: var(--text-secondary); text-align: center; max-width: 180px; line-height: 1.4; } /* Bot Connection Card */ .bot-connection-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); position: relative; overflow: hidden; } .bot-connection-card::after { content: ''; position: absolute; top: -100px; right: -100px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(37, 211, 102, 0.08) 0%, transparent 70%); pointer-events: none; } .bot-header-glow { position: relative; z-index: 1; } .bot-buttons-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 20px; } /* Premium Gold Button */ .btn-gold-gradient { width: 100%; padding: 14px 24px; border: none; border-radius: var(--radius-full); background: linear-gradient(135deg, #c7a252 0%, #e0c080 50%, #c7a252 100%); background-size: 200% auto; color: #0d1321; font-weight: 700; font-size: 0.9rem; font-family: 'Outfit', sans-serif; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 24px rgba(199, 162, 82, 0.3); display: flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .btn-gold-gradient:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 12px 35px rgba(199, 162, 82, 0.45); } .btn-gold-gradient:active { transform: translateY(0); } .btn-gold-gradient i { transition: transform 0.4s ease; } .btn-gold-gradient:hover i { transform: rotate(180deg); } /* Danger Ghost Button */ .btn-danger-ghost { width: 100%; padding: 14px 24px; border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-full); background: transparent; color: #f87171; font-weight: 600; font-size: 0.85rem; font-family: 'Outfit', sans-serif; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 10px; } .btn-danger-ghost:hover { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%); border-color: rgba(239, 68, 68, 0.5); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2); } .btn-danger-ghost:active { transform: translateY(0); } .bot-status-badge { padding: 10px 20px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; transition: all 0.3s ease; letter-spacing: 0.3px; text-transform: uppercase; } .status-online { background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.1) 100%); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2); } .status-offline { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.1) 100%); color: #f87171; border-color: rgba(239, 68, 68, 0.3); box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15); } .bot-status-badge i { font-size: 0.65rem; animation: status-pulse 2s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.95); } } .auto-response-item { background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--glass-border); padding: 18px 20px; border-radius: var(--radius-lg); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); } .auto-response-item:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border-color: rgba(199, 162, 82, 0.3); transform: translateX(4px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } /* Facturacion Tabs */ .facturacion-tabs { display: flex; gap: 0; margin-bottom: 2rem; background: var(--glass-bg); border-radius: var(--radius-md); border: 1px solid var(--glass-border); overflow: hidden; } .facturacion-tab { flex: 1; padding: 14px 20px; text-align: center; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; background: transparent; color: var(--text-secondary); } .facturacion-tab.active { background: rgba(199, 162, 82, 0.15); color: var(--gold); } .facturacion-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.04); } body.light-theme .facturacion-tab { color: var(--text-secondary); } body.light-theme .facturacion-tab:hover:not(.active) { background: rgba(0, 0, 0, 0.03); } /* Agenda Styles */ .agenda-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; flex-wrap: wrap; } .agenda-nav-title { font-family: 'Outfit', sans-serif; font-size: 1.1rem; min-width: 160px; text-align: center; color: var(--text-primary); } .agenda-view-toggle { display: flex; gap: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; margin-left: auto; } .agenda-view-btn { padding: 10px 20px; font-size: 0.8rem; cursor: pointer; border: 1px solid transparent; background: var(--glass-bg); color: var(--text-secondary); opacity: 0.7; transition: var(--transition); font-weight: 600; border-radius: var(--radius-full); backdrop-filter: blur(5px); } .agenda-view-btn.active { background: rgba(199, 162, 82, 0.15); color: var(--gold); opacity: 1; border-color: rgba(199, 162, 82, 0.3); box-shadow: 0 4px 15px rgba(199, 162, 82, 0.2); } .agenda-view-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.06); opacity: 1; transform: translateY(-1px); } .agenda-daily-grid { display: grid; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); transition: var(--transition); padding: 1rem; backdrop-filter: blur(10px); box-shadow: var(--glass-shadow); } .agenda-daily-grid::-webkit-scrollbar { height: 8px; } .agenda-daily-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-full); } .agenda-daily-grid::-webkit-scrollbar-thumb { background: rgba(199, 162, 82, 0.3); border-radius: var(--radius-full); } .agenda-daily-grid::-webkit-scrollbar-thumb:hover { background: rgba(199, 162, 82, 0.5); } .agenda-week-grid, .agenda-month-grid { display: grid; gap: 1rem; padding: 1rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); backdrop-filter: blur(10px); box-shadow: var(--glass-shadow); } .agenda-week-grid { grid-template-columns: repeat(7, 1fr); } .agenda-month-grid { grid-template-columns: repeat(7, 1fr); } .agenda-day-col { background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-md); padding: 10px; min-height: 200px; } .agenda-day-header { font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: var(--gold); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(199, 162, 82, 0.2); } .agenda-month-dayheader { font-size: 0.7rem; opacity: 0.5; text-align: center; padding: 8px; font-weight: 600; } .agenda-month-cell { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-sm); padding: 8px; min-height: 100px; cursor: pointer; transition: var(--transition); } .agenda-month-cell:hover { background: rgba(199, 162, 82, 0.08); border-color: rgba(199, 162, 82, 0.3); } .agenda-month-cell.today { background: rgba(199, 162, 82, 0.15); border-color: var(--gold); } .agenda-month-daynum { font-size: 0.75rem; font-weight: 600; margin-bottom: 6px; } .agenda-month-dot { height: 6px; width: 6px; border-radius: 50%; display: inline-block; margin: 2px; } .agenda-month-dot.confirmada { background: #3b82f6; } .agenda-month-dot.pendiente { background: #f59e0b; } .agenda-month-dot.completada { background: #22c55e; } .agenda-month-dot.cancelada { background: #ef4444; } .agenda-month-dot.no_show { background: #a855f7; } .agenda-time-row { display: grid; border-bottom: 1px solid rgba(255, 255, 255, 0.03); min-height: 48px; background: transparent; } .agenda-time-label { padding: 8px 10px; font-size: 0.7rem; opacity: 0.4; text-align: right; min-width: 60px; border-right: 1px solid rgba(255, 255, 255, 0.05); color: var(--text-primary); } .agenda-slot { padding: 4px 6px; border-right: 1px solid rgba(255, 255, 255, 0.03); cursor: pointer; transition: var(--transition); position: relative; background: transparent; color: var(--text-primary); } .agenda-slot:hover { background: rgba(199, 162, 82, 0.06); } .agenda-slot.cabina-header { padding: 12px 8px; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--gold); background: linear-gradient(135deg, rgba(199, 162, 82, 0.12) 0%, rgba(199, 162, 82, 0.05) 100%); border-bottom: 1px solid rgba(199, 162, 82, 0.15); cursor: default; border-radius: var(--radius-md); margin: 4px; } .agenda-cita { background: linear-gradient(135deg, rgba(199, 162, 82, 0.15) 0%, rgba(199, 162, 82, 0.08) 100%); border: 1px solid rgba(199, 162, 82, 0.3); border-radius: var(--radius-md); padding: 8px 12px; font-size: 0.72rem; cursor: pointer; transition: var(--transition); overflow: hidden; backdrop-filter: blur(5px); margin: 4px; } .agenda-cita:hover { border-color: var(--gold); transform: scale(1.03); box-shadow: 0 8px 25px rgba(199, 162, 82, 0.35); } .agenda-cita.pendiente { border-left: 3px solid var(--warning); } .agenda-cita.confirmada { border-left: 3px solid var(--info); } .agenda-cita.completada { border-left: 3px solid var(--success); } .agenda-cita.cancelada { border-left: 3px solid var(--danger); opacity: 0.5; } .agenda-cita.no_show { border-left: 3px solid var(--purple); opacity: 0.6; } .cita-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; } .cita-status.pendiente { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .cita-status.confirmada { background: rgba(59, 130, 246, 0.15); color: #3b82f6; } .cita-status.completada { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .cita-status.cancelada { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .cita-status.no_show { background: rgba(168, 85, 247, 0.15); color: #a855f7; } /* Venta Status */ .venta-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; } .venta-status.pagado { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .venta-status.pendiente { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .venta-status.anulado { background: rgba(239, 68, 68, 0.15); color: #ef4444; } /* Additional Status Badges */ .trat-activo { background: rgba(34, 197, 94, 0.15); color: #22c55e; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; } .trat-inactivo { background: rgba(239, 68, 68, 0.15); color: #ef4444; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; } .trat-category-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; } .trat-cat-estetica { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } .trat-cat-capilar { background: rgba(199, 162, 82, 0.15); color: var(--gold); } .trat-cat-corporal { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .trat-cat-facial { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .trat-cat-otros { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); } /* Cabina & Empresa Cards */ .cabina-card, .empresa-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.6rem; transition: var(--transition); backdrop-filter: blur(10px); } .cabina-card:hover, .empresa-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2); } .cabina-type-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; } .cabina-type-cabina { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .cabina-type-sala { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .cabina-type-consultorio { background: rgba(139, 92, 246, 0.15); color: #a855f7; } .empresa-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; background: rgba(199, 162, 82, 0.15); color: var(--gold); border: 1px solid rgba(199, 162, 82, 0.2); } .cabina-prof-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.72rem; background: rgba(199, 162, 82, 0.1); color: var(--gold); border: 1px solid rgba(199, 162, 82, 0.15); } /* Notes Timeline */ .notes-timeline { position: relative; padding-left: 28px; } .notes-timeline::before { content: ''; position: absolute; left: 9px; top: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--gold), transparent); } .note-item { position: relative; margin-bottom: 18px; background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-md); padding: 14px 18px; border: 1px solid var(--glass-border); transition: var(--transition); } .note-item:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--gold); } .note-item::before { content: ''; position: absolute; left: -24px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); border: 3px solid var(--navy-dark); box-shadow: 0 0 10px var(--gold); } .note-meta { font-size: 0.68rem; opacity: 0.5; margin-bottom: 6px; color: var(--text-muted); } .note-text { font-size: 0.85rem; line-height: 1.6; color: var(--text-primary); } /* Sub Modal */ .sub-modal { display: none; position: fixed; inset: 0; background: rgba(13, 19, 33, 0.95); backdrop-filter: blur(12px); z-index: 12000; justify-content: center; align-items: center; } .sub-modal-content { background: var(--navy); width: 92%; max-width: 500px; border-radius: var(--radius-xl); padding: 2.5rem; border: 1px solid rgba(199, 162, 82, 0.2); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6); } body.light-theme .sub-modal-content { background: var(--modal-bg); } /* Login Modal Styles */ #login-form .email-input:focus { border-color: var(--terracotta); outline: none; box-shadow: 0 0 20px rgba(219, 152, 119, 0.2); } #login-form .btn-login:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(219, 152, 119, 0.4); } /* Pipeline Dropdown en Contactos - Soporte Tema Claro/Oscuro */ .pipeline-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 5px; background: rgba(30, 30, 30, 0.95); border: 1px solid var(--input-border); border-radius: var(--radius-md); box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 1000; min-width: 200px; padding: 8px 0; backdrop-filter: blur(10px); } body.light-theme .pipeline-dropdown-menu { background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 25px rgba(0,0,0,0.15); border: 1px solid var(--glass-border); } .pipeline-dropdown-menu label { color: var(--text-primary); } .pipeline-dropdown-menu hr { border-top: 1px solid rgba(255,255,255,0.05); } body.light-theme .pipeline-dropdown-menu hr { border-top: 1px solid rgba(0,0,0,0.05); } .pipeline-dropdown-menu label:hover { background: rgba(255,255,255,0.05); } body.light-theme .pipeline-dropdown-menu label:hover { background: rgba(0,0,0,0.03); } /* ============================================ MOBILE BOTTOM NAV (V3) ============================================ */ .mobile-bottom-nav { display: none; } @media (max-width: 768px) { .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(16, 55, 84, 0.85); /* Navy transparent */ backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid var(--glass-border); z-index: 1000; justify-content: space-around; padding: 10px 5px 25px 5px; /* Extra bottom padding for iOS safe area */ box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); } body.light-theme .mobile-bottom-nav { background: rgba(255, 255, 255, 0.9); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05); } .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-primary); opacity: 0.6; text-decoration: none; font-size: 0.7rem; gap: 4px; transition: var(--transition); width: 20%; } .mobile-nav-item i { font-size: 1.2rem; margin-bottom: 2px; } .mobile-nav-item.active { opacity: 1; color: var(--gold); } .mobile-nav-item.active i { transform: translateY(-2px); } body.light-theme .mobile-nav-item { color: var(--navy-deep); } body.light-theme .mobile-nav-item.active { color: var(--terracotta); } .main-container { padding-bottom: 90px !important; /* Make room for bottom nav */ } /* Adjust sidebar for mobile Menu button toggle */ .sidebar { z-index: 1001; /* Above bottom nav */ } } /* Custom scrollbar for WhatsApp Labels */ #wa-labels-container { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--gold) rgba(255, 255, 255, 0.1); } #wa-labels-container::-webkit-scrollbar { height: 6px; } #wa-labels-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } #wa-labels-container::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; } #wa-labels-container::-webkit-scrollbar-thumb:hover { background: #d4af37; /* Lighter gold */ }