/* === DASHBOARD SCREEN — CINEMATIC DARK PREMIUM v4 === */ #dashboardScreen { --blue-core: #0E56D8; --blue-glow: #4B8CF5; --orange-fire: #FF5B1A; --orange-glow: #FF7A1A; --text-bright: #ffffff; --text-primary: #e8eef8; --text-secondary: rgba(210,225,245,0.92); --text-muted: rgba(195,215,240,0.82); --br: 16px; } /* === APP FRAME === */ #dashboardScreen .app-frame { position: relative; width: 100%; max-width: 480px; min-height: 100%; overflow: hidden; } #dashboardScreen .app-frame::before, #dashboardScreen .app-frame::after { display: none !important; } @media (min-width: 768px) { #dashboardScreen .app-frame { max-width: 100%; border-radius: 0; } } /* === APP INNER — Cinematic dark + radial lighting === */ #dashboardScreen .app-inner { position: relative; background: #040d1a; min-height: 100vh; margin: 0; overflow: visible; z-index: 1; padding: 0 0 20px; } /* HVAC tools background pattern */ #dashboardScreen .app-inner::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.035)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- AC Unit --%3E%3Cg transform='translate(20,20) rotate(-10,30,20)'%3E%3Crect x='5' y='5' width='50' height='35' rx='4'/%3E%3Ccircle cx='30' cy='22' r='10'/%3E%3Cpath d='M24,16 L36,28 M36,16 L24,28'/%3E%3Cline x1='12' y1='40' x2='12' y2='48'/%3E%3Cline x1='48' y1='40' x2='48' y2='48'/%3E%3C/g%3E%3C!-- Multimeter --%3E%3Cg transform='translate(160,30) rotate(8,20,28)'%3E%3Crect x='2' y='2' width='36' height='54' rx='5'/%3E%3Ccircle cx='20' cy='22' r='12'/%3E%3Cline x1='20' y1='10' x2='20' y2='22'/%3E%3Cline x1='20' y1='22' x2='28' y2='16'/%3E%3Ccircle cx='11' cy='44' r='3'/%3E%3Ccircle cx='29' cy='44' r='3'/%3E%3C/g%3E%3C!-- Hard Hat --%3E%3Cg transform='translate(330,15)'%3E%3Cpath d='M5,30 C5,10 20,0 30,0 C40,0 55,10 55,30'/%3E%3Cline x1='0' y1='30' x2='60' y2='30'/%3E%3Cline x1='3' y1='30' x2='3' y2='36'/%3E%3Cline x1='57' y1='30' x2='57' y2='36'/%3E%3Cline x1='0' y1='36' x2='60' y2='36'/%3E%3C/g%3E%3C!-- Manifold Gauges --%3E%3Cg transform='translate(40,130) rotate(5,40,25)'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='60' cy='20' r='18'/%3E%3Cline x1='20' y1='38' x2='20' y2='55'/%3E%3Cline x1='60' y1='38' x2='60' y2='55'/%3E%3Cline x1='40' y1='30' x2='40' y2='55'/%3E%3Cpath d='M20,10 L20,20 L28,14'/%3E%3Cpath d='M60,10 L60,20 L68,14'/%3E%3C/g%3E%3C!-- Wire Strippers / Pliers --%3E%3Cg transform='translate(230,110) rotate(-20,20,35)'%3E%3Cpath d='M15,0 C10,12 5,20 12,28 L8,60'/%3E%3Cpath d='M25,0 C30,12 35,20 28,28 L32,60'/%3E%3Ccircle cx='20' cy='26' r='4'/%3E%3C/g%3E%3C!-- Safety Glasses --%3E%3Cg transform='translate(370,120)'%3E%3Ccircle cx='15' cy='15' r='13'/%3E%3Ccircle cx='50' cy='15' r='13'/%3E%3Cpath d='M28,15 L37,15'/%3E%3Cline x1='2' y1='10' x2='-8' y2='5'/%3E%3Cline x1='63' y1='10' x2='73' y2='5'/%3E%3C/g%3E%3C!-- Refrigerant Tank --%3E%3Cg transform='translate(140,220) rotate(5,22,35)'%3E%3Crect x='5' y='15' width='35' height='50' rx='6'/%3E%3Cpath d='M10,15 C10,5 35,5 35,15'/%3E%3Cline x1='22' y1='5' x2='22' y2='0'/%3E%3Ccircle cx='22' cy='0' r='3'/%3E%3Cline x1='12' y1='30' x2='32' y2='30'/%3E%3Cline x1='12' y1='45' x2='32' y2='45'/%3E%3C/g%3E%3C!-- Wrench --%3E%3Cg transform='translate(330,230) rotate(30,20,30)'%3E%3Cpath d='M8,0 C0,5 0,18 8,22 L6,55 L14,55 L12,22 C20,18 20,5 12,0'/%3E%3C/g%3E%3C!-- Thermometer --%3E%3Cg transform='translate(30,310) rotate(-10,8,30)'%3E%3Crect x='3' y='0' width='10' height='42' rx='5'/%3E%3Ccircle cx='8' cy='50' r='8'/%3E%3Cline x1='8' y1='35' x2='8' y2='46'/%3E%3C/g%3E%3C!-- Ductwork --%3E%3Cg transform='translate(200,300)'%3E%3Crect x='0' y='5' width='60' height='25' rx='3'/%3E%3Cline x1='10' y1='5' x2='10' y2='30'/%3E%3Cline x1='25' y1='5' x2='25' y2='30'/%3E%3Cline x1='40' y1='5' x2='40' y2='30'/%3E%3Cline x1='55' y1='5' x2='55' y2='30'/%3E%3C/g%3E%3C!-- Voltage Tester --%3E%3Cg transform='translate(380,320) rotate(15,12,30)'%3E%3Crect x='2' y='0' width='20' height='35' rx='3'/%3E%3Cline x1='12' y1='35' x2='12' y2='60'/%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M10,12 L14,18'/%3E%3C/g%3E%3C!-- Compressor --%3E%3Cg transform='translate(70,420)'%3E%3Ccircle cx='25' cy='25' r='23'/%3E%3Ccircle cx='25' cy='25' r='10'/%3E%3Cline x1='25' y1='2' x2='25' y2='0'/%3E%3Cline x1='35' y1='2' x2='38' y2='0'/%3E%3Cpath d='M20,15 L30,25 L20,35'/%3E%3C/g%3E%3C!-- Copper Pipe Cutter --%3E%3Cg transform='translate(280,410) rotate(-5,20,20)'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Crect x='15' y='8' width='10' height='6' rx='1'/%3E%3C/g%3E%3C!-- Capacitor --%3E%3Cg transform='translate(440,430)'%3E%3Crect x='5' y='10' width='30' height='35' rx='4'/%3E%3Cline x1='15' y1='10' x2='15' y2='2'/%3E%3Cline x1='25' y1='10' x2='25' y2='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 500px 500px; background-repeat: repeat; } #dashboardScreen .app-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 8%, rgba(75,140,245,0.28) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(14,86,216,0.1) 0%, transparent 55%), radial-gradient(circle at 80% 80%, rgba(255,91,26,0.12) 0%, transparent 35%), radial-gradient(circle at 20% 70%, rgba(14,86,216,0.08) 0%, transparent 40%), radial-gradient(ellipse at 50% 90%, rgba(75,140,245,0.06) 0%, transparent 40%); pointer-events: none; z-index: 0; } /* === HEADER === */ #dashboardScreen .header { position: relative; text-align: center; padding: 16px 20px 0; padding-top: calc(16px + env(safe-area-inset-top, 0px)); background: transparent; z-index: 1; } /* Logo wrapper with glow halo */ #dashboardScreen .logo-wrapper { position: relative; display: inline-block; margin-bottom: -80px; } #dashboardScreen .logo-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(14,86,216,0.3) 0%, rgba(75,140,245,0.15) 30%, rgba(14,86,216,0.05) 55%, transparent 70%); pointer-events: none; animation: logoBreath 4s ease-in-out infinite; } @keyframes logoBreath { 0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } #dashboardScreen .header-logo { position: relative; width: 220px; height: 220px; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 0 40px rgba(14,86,216,0.4)) drop-shadow(0 0 80px rgba(14,86,216,0.15)) drop-shadow(0 10px 25px rgba(0,0,0,0.8)); background: transparent; z-index: 1; } #dashboardScreen .header h1 { font-size: 26px; font-weight: 900; color: #ffffff !important; letter-spacing: 4px; margin-bottom: 2px; margin-top: -22px; text-transform: uppercase; text-shadow: 0 0 30px rgba(14,86,216,0.3), 0 2px 10px rgba(0,0,0,0.6); opacity: 1 !important; } #dashboardScreen .header .greeting { font-size: 13px; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.5px; } /* Streak badge */ #dashboardScreen #streakBadge { background: linear-gradient(135deg, rgba(255,91,26,0.2), rgba(255,122,26,0.1)) !important; border: 1px solid rgba(255,91,26,0.35) !important; color: var(--orange-glow) !important; box-shadow: 0 0 20px rgba(255,91,26,0.12); } #dashboardScreen #streakBadge span { color: var(--orange-glow) !important; } /* === SOCIAL ROW === */ #dashboardScreen .social-row { display: flex; justify-content: center; gap: 8px; padding: 0 20px 6px; position: relative; z-index: 1; } #dashboardScreen .social-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid rgba(255,255,255,0.06) !important; background: rgba(255,255,255,0.03) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #dashboardScreen .social-icon:active { transform: scale(0.88); } #dashboardScreen .social-icon:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); } #dashboardScreen .social-icon svg { width: 14px; height: 14px; } #dashboardScreen .si-yt { border-color: rgba(255,68,68,0.2) !important; background: rgba(255,68,68,0.08) !important; } #dashboardScreen .si-yt svg { fill: #ff4444 !important; } #dashboardScreen .si-fb { border-color: rgba(75,140,245,0.2) !important; background: rgba(75,140,245,0.08) !important; } #dashboardScreen .si-fb svg { fill: #4B8CF5 !important; } #dashboardScreen .si-ig { border-color: rgba(232,67,147,0.2) !important; background: rgba(232,67,147,0.08) !important; } #dashboardScreen .si-ig svg { fill: #e84393 !important; } #dashboardScreen .si-tk { background: rgba(255,255,255,0.03) !important; } #dashboardScreen .si-tk svg { fill: rgba(255,255,255,0.5) !important; } #dashboardScreen .si-gl { border-color: rgba(75,140,245,0.2) !important; background: rgba(75,140,245,0.08) !important; } #dashboardScreen .si-gl svg path { /* multicolor Google G — do not override fill */ } /* === CARDS GRID === */ #dashboardScreen .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 12px; overflow: visible; position: relative; z-index: 1; } /* === GLASS CARDS === */ #dashboardScreen .card { position: relative; border-radius: var(--br); cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; background: rgba(30,80,160,0.15) !important; border: 1px solid rgba(120,180,255,0.18) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease, border-color 0.3s ease; } #dashboardScreen .card::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15) 50%, transparent); z-index: 2; } #dashboardScreen .card:active { transform: scale(0.97); } #dashboardScreen .card:hover { transform: translateY(-3px); border-color: rgba(75,140,245,0.2) !important; box-shadow: 0 25px 70px rgba(0,0,0,0.5), 0 0 30px rgba(14,86,216,0.1) !important; } #dashboardScreen .card-inner { position: relative; z-index: 3; border-radius: var(--br); padding: 8px 6px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; text-align: center; gap: 3px; background: transparent !important; } /* === ICON CONTAINERS === */ #dashboardScreen .card-ic { width: 72px; height: 72px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(145deg, rgba(100,170,255,0.25) 0%, rgba(50,120,220,0.12) 100%) !important; border: 1px solid rgba(120,180,255,0.3) !important; box-shadow: 0 0 14px rgba(75,140,245,0.2), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15); position: relative; overflow: hidden; } /* Glossy highlight */ #dashboardScreen .card-ic::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%); border-radius: 16px 16px 0 0; pointer-events: none; } #dashboardScreen .card-ic svg { width: 36px; height: 36px; stroke: #7dc0ff !important; stroke-width: 2; fill: none; filter: drop-shadow(0 0 6px rgba(125,192,255,0.5)); position: relative; z-index: 1; } #dashboardScreen .card:hover .card-ic { background: linear-gradient(145deg, rgba(100,170,255,0.35) 0%, rgba(50,120,220,0.18) 100%) !important; box-shadow: 0 0 20px rgba(75,140,245,0.3), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15); } /* === PER-ICON ACCENT COLORS === */ /* Radio — warm amber */ #dashboardScreen .ic-radio { background: linear-gradient(145deg, rgba(245,180,60,0.22), rgba(200,140,30,0.10)) !important; border-color: rgba(245,190,80,0.3) !important; box-shadow: 0 0 14px rgba(245,180,60,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-radio svg { stroke: #f0c060 !important; filter: drop-shadow(0 0 6px rgba(240,192,96,0.4)) !important; } /* Exams (ic-exam not used, kept for safety) — cool teal */ #dashboardScreen .ic-exam { background: linear-gradient(145deg, rgba(60,200,180,0.22), rgba(30,160,140,0.10)) !important; border-color: rgba(80,210,190,0.3) !important; box-shadow: 0 0 14px rgba(60,200,180,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-exam svg { stroke: #6edcd0 !important; filter: drop-shadow(0 0 6px rgba(110,220,208,0.4)) !important; } /* Clases / Classes — indigo */ #dashboardScreen .ic-clases, #dashboardScreen .ic-classes { background: linear-gradient(145deg, rgba(120,100,240,0.22), rgba(90,70,200,0.10)) !important; border-color: rgba(140,120,250,0.3) !important; box-shadow: 0 0 14px rgba(120,100,240,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-clases svg, #dashboardScreen .ic-classes svg { stroke: #a99cff !important; filter: drop-shadow(0 0 6px rgba(169,156,255,0.4)) !important; } /* Skills — emerald */ #dashboardScreen .ic-skills { background: linear-gradient(145deg, rgba(60,190,120,0.22), rgba(30,150,90,0.10)) !important; border-color: rgba(80,200,140,0.3) !important; box-shadow: 0 0 14px rgba(60,190,120,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-skills svg { stroke: #6ee0a0 !important; filter: drop-shadow(0 0 6px rgba(110,224,160,0.4)) !important; } /* Tutorials / Certification — bright cyan with glow pulse */ #dashboardScreen .ic-tutorials { background: linear-gradient(145deg, rgba(50,200,240,0.30), rgba(30,160,200,0.15)) !important; border-color: rgba(80,220,255,0.45) !important; box-shadow: 0 0 20px rgba(50,200,240,0.35), 0 0 40px rgba(50,200,240,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15) !important; animation: icCertGlow 2s ease-in-out infinite; } #dashboardScreen .ic-tutorials svg { stroke: #50e0ff !important; filter: drop-shadow(0 0 10px rgba(80,224,255,0.7)) !important; } @keyframes icCertGlow { 0%,100%{box-shadow:0 0 20px rgba(50,200,240,0.35),0 0 40px rgba(50,200,240,0.15),0 2px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.25)} 50%{box-shadow:0 0 28px rgba(50,200,240,0.5),0 0 60px rgba(50,200,240,0.25),0 2px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3)} } /* Suggest — soft lavender */ #dashboardScreen .ic-suggest { background: linear-gradient(145deg, rgba(180,130,240,0.22), rgba(140,90,200,0.10)) !important; border-color: rgba(190,150,250,0.3) !important; box-shadow: 0 0 14px rgba(180,130,240,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-suggest svg { stroke: #c8a8ff !important; filter: drop-shadow(0 0 6px rgba(200,168,255,0.4)) !important; } /* Chat — green with typing pulse */ #dashboardScreen .ic-chat { background: linear-gradient(145deg, rgba(34,197,94,0.25), rgba(22,163,74,0.12)) !important; border-color: rgba(74,222,128,0.35) !important; box-shadow: 0 0 16px rgba(34,197,94,0.2), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; animation: icChatPulse 2.5s ease-in-out infinite; } #dashboardScreen .ic-chat svg { stroke: #4ade80 !important; filter: drop-shadow(0 0 8px rgba(74,222,128,0.5)) !important; } @keyframes icChatPulse { 0%,100%{box-shadow:0 0 16px rgba(34,197,94,0.2),0 2px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2)} 50%{box-shadow:0 0 24px rgba(34,197,94,0.4),0 0 40px rgba(34,197,94,0.15),0 2px 6px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.25)} } /* Game / Gana Dinero — gold with coin float */ #dashboardScreen .ic-game { background: linear-gradient(145deg, rgba(255,200,50,0.30), rgba(220,170,20,0.15)) !important; border-color: rgba(255,215,80,0.4) !important; box-shadow: 0 0 18px rgba(255,200,50,0.3), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-game svg { stroke: #ffd54f !important; filter: drop-shadow(0 0 8px rgba(255,213,79,0.6)) !important; } #dashboardScreen .card-game { position: relative; overflow: hidden; } #dashboardScreen .card-game::before { content: '💰'; position: absolute; font-size: 14px; opacity: 0; animation: coinFloat1 4s ease-in-out 0s infinite; top: 80%; left: 30%; z-index: 2; pointer-events: none; } #dashboardScreen .card-game::after { content: '🪙'; position: absolute; font-size: 12px; opacity: 0; animation: coinFloat2 4s ease-in-out 1.5s infinite; top: 80%; left: 65%; z-index: 2; pointer-events: none; } @keyframes coinFloat1 { 0%{opacity:0;transform:translateY(0) rotate(0deg)} 15%{opacity:0.8} 80%{opacity:0.6} 100%{opacity:0;transform:translateY(-80px) rotate(25deg)} } @keyframes coinFloat2 { 0%{opacity:0;transform:translateY(0) rotate(0deg)} 15%{opacity:0.7} 80%{opacity:0.5} 100%{opacity:0;transform:translateY(-70px) rotate(-20deg)} } /* HVAC Sizing — red/orange glow */ #dashboardScreen .ic-hvac-sizing { border-color: rgba(239,68,68,0.4) !important; box-shadow: 0 0 18px rgba(239,68,68,0.3), 0 0 40px rgba(251,146,60,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-hvac-sizing::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(239,68,68,0.08) 100%) !important; z-index: 2; } /* Electrical Load — amber glow */ #dashboardScreen .ic-elec-load { border-color: rgba(251,191,36,0.45) !important; box-shadow: 0 0 18px rgba(251,191,36,0.3), 0 0 40px rgba(245,158,11,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-elec-load::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(251,191,36,0.08) 100%) !important; z-index: 2; } /* Mi Perfil — indigo glow */ #dashboardScreen .ic-mi-perfil { border-color: rgba(140,120,250,0.45) !important; box-shadow: 0 0 18px rgba(120,100,240,0.3), 0 0 40px rgba(90,70,200,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-mi-perfil::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(120,100,240,0.08) 100%) !important; z-index: 2; } /* Chiller & Cooling Tower — teal glow */ #dashboardScreen .ic-chiller-tower { border-color: rgba(20,184,166,0.45) !important; box-shadow: 0 0 18px rgba(20,184,166,0.3), 0 0 40px rgba(6,182,212,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-chiller-tower::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(20,184,166,0.08) 100%) !important; z-index: 2; } /* TAB Testing — sky blue glow */ #dashboardScreen .ic-tab-testing { border-color: rgba(56,189,248,0.45) !important; box-shadow: 0 0 18px rgba(56,189,248,0.3), 0 0 40px rgba(14,165,233,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-tab-testing::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(56,189,248,0.08) 100%) !important; z-index: 2; } /* Commercial Heat Diagnostics — deep orange glow */ #dashboardScreen .ic-commercial-heat { border-color: rgba(249,115,22,0.45) !important; box-shadow: 0 0 18px rgba(249,115,22,0.3), 0 0 40px rgba(234,88,12,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-commercial-heat::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(249,115,22,0.08) 100%) !important; z-index: 2; } /* Gas Heat Diagnostics — orange glow */ #dashboardScreen .ic-gas-heat { border-color: rgba(255,107,53,0.45) !important; box-shadow: 0 0 18px rgba(255,107,53,0.3), 0 0 40px rgba(245,158,11,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-gas-heat::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,107,53,0.08) 100%) !important; z-index: 2; } /* SC680 Multimeter — emerald/amber glow */ #dashboardScreen .ic-sc680 { border-color: rgba(52,211,153,0.45) !important; box-shadow: 0 0 18px rgba(52,211,153,0.3), 0 0 40px rgba(251,191,36,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-sc680::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(52,211,153,0.08) 100%) !important; z-index: 2; } /* HVACR Diagnostics — purple/red glow */ #dashboardScreen .ic-hvacr-diag { border-color: rgba(168,85,247,0.45) !important; box-shadow: 0 0 18px rgba(168,85,247,0.3), 0 0 40px rgba(239,68,68,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-hvacr-diag::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(168,85,247,0.08) 100%) !important; z-index: 2; } /* HVAC Tools — blue/indigo glow */ #dashboardScreen .ic-hvac-tools { border-color: rgba(56,189,248,0.45) !important; box-shadow: 0 0 18px rgba(56,189,248,0.3), 0 0 40px rgba(99,102,241,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-hvac-tools::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(56,189,248,0.08) 100%) !important; z-index: 2; } /* Parts Search — green glow */ #dashboardScreen .ic-parts-search { border-color: rgba(74,222,128,0.45) !important; box-shadow: 0 0 18px rgba(34,197,94,0.3), 0 0 40px rgba(16,185,129,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-parts-search::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(34,197,94,0.08) 100%) !important; z-index: 2; } /* Videos Instruccionales — sky blue glow */ #dashboardScreen .ic-videos-instr { border-color: rgba(56,189,248,0.45) !important; box-shadow: 0 0 18px rgba(56,189,248,0.3), 0 0 40px rgba(14,165,233,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-videos-instr::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(56,189,248,0.08) 100%) !important; z-index: 2; } /* Maestro Videos — red/YouTube glow */ #dashboardScreen .ic-maestro-videos { border-color: rgba(239,68,68,0.45) !important; box-shadow: 0 0 18px rgba(239,68,68,0.3), 0 0 40px rgba(220,38,38,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-maestro-videos::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(239,68,68,0.08) 100%) !important; z-index: 2; } /* Chat Groups — indigo/violet glow */ #dashboardScreen .ic-chat-groups { border-color: rgba(129,140,248,0.45) !important; box-shadow: 0 0 18px rgba(99,102,241,0.3), 0 0 40px rgba(79,70,229,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-chat-groups::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(99,102,241,0.08) 100%) !important; z-index: 2; } /* Mis Clases — emerald glow */ #dashboardScreen .ic-mis-clases { border-color: rgba(74,222,128,0.45) !important; box-shadow: 0 0 18px rgba(34,197,94,0.3), 0 0 40px rgba(22,163,74,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-mis-clases::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(34,197,94,0.08) 100%) !important; z-index: 2; } /* Walk-in Sizing — cyan/teal glow */ #dashboardScreen .ic-walkin-sizing { border-color: rgba(56,189,248,0.45) !important; box-shadow: 0 0 18px rgba(56,189,248,0.3), 0 0 40px rgba(6,182,212,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-walkin-sizing::after { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(56,189,248,0.08) 100%) !important; z-index: 2; } /* Money / Referidos — warm gold */ #dashboardScreen .ic-money { background: linear-gradient(145deg, rgba(255,200,50,0.22), rgba(220,170,30,0.10)) !important; border-color: rgba(255,210,80,0.3) !important; box-shadow: 0 0 14px rgba(255,200,50,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-money svg { stroke: #ffd666 !important; filter: drop-shadow(0 0 6px rgba(255,214,102,0.4)) !important; } /* Certs — warm rose */ #dashboardScreen .ic-certs { background: linear-gradient(145deg, rgba(240,120,140,0.22), rgba(200,80,100,0.10)) !important; border-color: rgba(245,140,160,0.3) !important; box-shadow: 0 0 14px rgba(240,120,140,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-certs svg { stroke: #f0a0b0 !important; filter: drop-shadow(0 0 6px rgba(240,160,176,0.4)) !important; } /* Live — soft red */ #dashboardScreen .ic-live { background: linear-gradient(145deg, rgba(240,80,80,0.22), rgba(200,50,50,0.10)) !important; border-color: rgba(245,100,100,0.3) !important; box-shadow: 0 0 14px rgba(240,80,80,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-live svg { stroke: #f08080 !important; filter: drop-shadow(0 0 6px rgba(240,128,128,0.4)) !important; } /* Schedule / Recorded — slate blue */ #dashboardScreen .ic-schedule, #dashboardScreen .ic-recorded { background: linear-gradient(145deg, rgba(100,140,200,0.22), rgba(60,100,160,0.10)) !important; border-color: rgba(120,160,220,0.3) !important; box-shadow: 0 0 14px rgba(100,140,200,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-schedule svg, #dashboardScreen .ic-recorded svg { stroke: #90b8e0 !important; filter: drop-shadow(0 0 6px rgba(144,184,224,0.4)) !important; } /* Herramientas HVAC — blue-cyan */ #dashboardScreen .ic-herramientas { background: linear-gradient(145deg, rgba(56,189,248,0.25), rgba(14,165,233,0.12)) !important; border-color: rgba(56,189,248,0.35) !important; box-shadow: 0 0 14px rgba(56,189,248,0.2), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-herramientas svg { stroke: #38bdf8 !important; filter: drop-shadow(0 0 6px rgba(56,189,248,0.5)) !important; } /* CRM / Store — steel */ #dashboardScreen .ic-crm, #dashboardScreen .ic-store { background: linear-gradient(145deg, rgba(140,160,190,0.22), rgba(100,120,150,0.10)) !important; border-color: rgba(160,180,210,0.3) !important; box-shadow: 0 0 14px rgba(140,160,190,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-crm svg, #dashboardScreen .ic-store svg { stroke: #b0c4de !important; filter: drop-shadow(0 0 6px rgba(176,196,222,0.4)) !important; } /* Podcast (Exámenes) — teal */ #dashboardScreen .ic-podcast { background: linear-gradient(145deg, rgba(60,200,180,0.22), rgba(30,160,140,0.10)) !important; border-color: rgba(80,210,190,0.3) !important; box-shadow: 0 0 14px rgba(60,200,180,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-podcast svg { stroke: #6edcd0 !important; filter: drop-shadow(0 0 6px rgba(110,220,208,0.4)) !important; } /* Train — fallback blue */ #dashboardScreen .ic-train { background: linear-gradient(145deg, rgba(100,170,255,0.25), rgba(50,120,220,0.12)) !important; border-color: rgba(120,180,255,0.3) !important; box-shadow: 0 0 14px rgba(75,140,245,0.15), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15) !important; } #dashboardScreen .ic-train svg { stroke: #7dc0ff !important; filter: drop-shadow(0 0 6px rgba(125,192,255,0.4)) !important; } /* Per-card border overrides — all unified glass */ #dashboardScreen .card.card-radio, #dashboardScreen .card.card-podcast, #dashboardScreen .card.card-train, #dashboardScreen .card.card-classes, #dashboardScreen .card.card-skills, #dashboardScreen .card.card-recorded, #dashboardScreen .card.card-certs, #dashboardScreen .card.card-live, #dashboardScreen .card.card-money, #dashboardScreen .card.card-game, #dashboardScreen .card.card-crm, #dashboardScreen .card.card-clases, #dashboardScreen .card.card-tutorials, #dashboardScreen .card.card-acvolt-cert, #dashboardScreen .card.card-suggest, #dashboardScreen .card.card-chat, #dashboardScreen .card.card-progress, #dashboardScreen .card.card-schedule, #dashboardScreen .card.card-tienda { border: 1px solid rgba(120,180,255,0.15) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important; } /* === ACVOLT CERTIFICATION RESPONSIVE === */ .acvolt-wrap { padding: 16px 16px 100px; max-width: 600px; margin: 0 auto; width: 100%; box-sizing: border-box; } @media (min-width: 768px) { .acvolt-wrap { max-width: 720px; padding: 20px 24px 100px; } } @media (min-width: 1024px) { .acvolt-wrap { max-width: 800px; padding: 24px 32px 100px; } } @media (max-width: 380px) { .acvolt-wrap { padding: 12px 12px 100px; } } /* === CARD TEXT === */ #dashboardScreen .card-title { font-size: 14px; font-weight: 900; color: #ffffff !important; line-height: 1.2; display: flex; align-items: center; gap: 4px; text-shadow: 0 1px 3px rgba(0,0,0,0.7); } #dashboardScreen .card-subtitle { font-size: 12px; color: #FFFFFF !important; font-weight: 700; margin-top: 2px; letter-spacing: 0.2px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); } /* === SUBLINKS — white for accessibility === */ #dashboardScreen .card-sublink { display:flex;align-items:center;gap:3px;margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,0.18);font-size:11px;font-weight:800;color:#FFFFFF !important;cursor:pointer;transition:color 0.2s;text-shadow:0 1px 2px rgba(0,0,0,0.6); } #dashboardScreen .card-sublink:hover { color: #FDBA74 !important; } #dashboardScreen .card-sublink svg { width:10px;height:10px;stroke:currentColor;stroke-width:2.5;fill:none;flex-shrink:0; } /* === LIVE DOT === */ #dashboardScreen .live-dot { display: inline-block; width: 6px; height: 6px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 8px rgba(34,197,94,0.6), 0 0 20px rgba(34,197,94,0.2); animation: livePulse 2s ease-in-out infinite; margin-right: 2px; vertical-align: middle; flex-shrink: 0; } @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} } /* === LIVE BADGE (EN VIVO) === */ #dashboardScreen .live-badge { display: none; font-size: 11px; font-weight: 900; color: #fff; background: #dc2626; padding: 2px 8px; border-radius: 8px; letter-spacing: 0.8px; line-height: 1.4; vertical-align: middle; text-shadow: 0 1px 1px rgba(0,0,0,0.3); } #dashboardScreen .live-badge.active { display: inline-block; animation: dashLiveHeartbeat 1.5s ease-in-out infinite; } @keyframes dashLiveHeartbeat { 0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(220,38,38,0); } 50% { transform: scale(1.15); box-shadow: 0 0 10px rgba(220,38,38,0.5); } } /* === DASH SCHEDULE LIST === */ #dashboardScreen .dash-schedule-list { margin-top: 4px; font-size: 12px; color: #FFFFFF; line-height: 1.5; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } #dashboardScreen .dash-schedule-list .dash-sched-item { display: flex; align-items: center; gap: 4px; } #dashboardScreen .dash-schedule-list .dash-sched-day { font-weight: 900; color: #FDBA74; min-width: 28px; } /* === SECTION LABEL === */ #dashboardScreen .section-label { padding: 18px 20px 8px; font-size: 13px; font-weight: 900; color: #FFFFFF; text-transform: uppercase; letter-spacing: 2px; position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.7); } /* === TIENDA — Glass card === */ #dashboardScreen .tienda-section { margin: 4px 16px 14px; border-radius: var(--br); overflow: hidden; position: relative; z-index: 1; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #dashboardScreen .tienda-section::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 50%, transparent); } #dashboardScreen .tienda-inner { background: transparent !important; border-radius: var(--br); padding: 14px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } #dashboardScreen .tienda-inner h3 { font-size: 14px; font-weight: 800; color: var(--text-bright) !important; margin: 0; } #dashboardScreen .tienda-inner p { font-size: 10px; color: var(--text-secondary) !important; margin: 0; } /* === PROGRESS BAR === */ #dashboardScreen .progress-section { padding: 0 16px 16px; position: relative; z-index: 1; } #dashboardScreen .progress-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px 20px; } #dashboardScreen .progress-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; } #dashboardScreen .progress-bar-wrap { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 6px; } #dashboardScreen .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue-core), var(--blue-glow)); border-radius: 4px; transition: width 1s ease; } #dashboardScreen .progress-pct { font-size: 13px; font-weight: 700; color: var(--blue-glow); text-align: right; } /* === STATS GRID === */ #dashboardScreen .stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 0 16px 18px; position: relative; z-index: 1; } #dashboardScreen .stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; text-align: center; } #dashboardScreen .stat-value { font-size: 22px; font-weight: 800; color: #ffffff; line-height: 1; margin-bottom: 4px; } #dashboardScreen .stat-label { font-size: 10.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.3; } /* === RESUME QUIZ CARD — Dark glass (override inline purple) === */ #dashboardScreen #resumeQuizCard { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(75,140,245,0.15) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin: 0 16px 10px !important; border-radius: 16px !important; } #dashboardScreen #resumeQuizCard div[style*="background:rgba(255,255,255,0.2)"] { background: rgba(75,140,245,0.15) !important; border: 1px solid rgba(75,140,245,0.2); } /* === HVAC FEED BUBBLE — Dark glass (override inline cyan) === */ #dashboardScreen #hvacFeedBubble { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(75,140,245,0.15) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin: 0 16px 10px !important; border-radius: 14px !important; } #dashboardScreen #hvacFeedBubble div[style*="background:rgba(255,255,255,0.2)"] { background: rgba(75,140,245,0.15) !important; border: 1px solid rgba(75,140,245,0.2); } #dashboardScreen #hvacFeedBubble span[style*="background:rgba(255,255,255,0.2)"] { background: rgba(75,140,245,0.2) !important; } /* === PUSH/INSTALL BANNERS — Dark glass === */ #dashboardScreen #pushOptinBanner, #dashboardScreen #installAppBanner { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.35) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px !important; margin: 0 16px 10px !important; } /* === GOOGLE ICON — multicolor G, no fill override === */ /* === FOOTER === */ #dashboardScreen .footer-links { text-align: center; padding: 14px 20px calc(36px + env(safe-area-inset-bottom,0px)); display: flex; flex-direction: column; gap: 2px; align-items: center; position: relative; z-index: 1; } #dashboardScreen .footer-link { font-size: 12px; color: var(--text-secondary); font-weight: 600; text-decoration: none; padding: 10px 20px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color 0.2s, background 0.2s; border-radius: 10px; } #dashboardScreen .footer-link:hover { color: rgba(220,230,245,0.8); background: rgba(255,255,255,0.04); } #dashboardScreen .footer-link svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; } #dashboardScreen .footer-link.danger { color: rgba(255,91,26,0.5); } #dashboardScreen .footer-link.danger:hover { color: var(--orange-fire); } /* === TOP NAV === */ #dashboardScreen .top-avatar { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(75,140,245,0.25); background: linear-gradient(145deg, var(--blue-core), #0a3f9e); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 13px; cursor: pointer; z-index: 10; box-shadow: 0 0 20px rgba(14,86,216,0.3), 0 4px 12px rgba(0,0,0,0.4); transition: transform 0.2s, box-shadow 0.2s; } #dashboardScreen .top-avatar:hover { transform: scale(1.08); box-shadow: 0 0 30px rgba(14,86,216,0.4), 0 4px 15px rgba(0,0,0,0.5); } /* === CARD ANIMATIONS === */ #dashboardScreen .card { opacity: 0; animation: cardIn 0.5s ease forwards; } #dashboardScreen .card:nth-child(1) { animation-delay: 0.04s; } #dashboardScreen .card:nth-child(2) { animation-delay: 0.08s; } #dashboardScreen .card:nth-child(3) { animation-delay: 0.12s; } #dashboardScreen .card:nth-child(4) { animation-delay: 0.16s; } #dashboardScreen .card:nth-child(5) { animation-delay: 0.20s; } #dashboardScreen .card:nth-child(6) { animation-delay: 0.24s; } #dashboardScreen .card:nth-child(7) { animation-delay: 0.28s; } #dashboardScreen .card:nth-child(8) { animation-delay: 0.32s; } #dashboardScreen .card:nth-child(9) { animation-delay: 0.36s; } #dashboardScreen .card:nth-child(10) { animation-delay: 0.40s; } @keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* === RESPONSIVE === */ @media (max-width: 380px) { #dashboardScreen .header { padding: 12px 16px 0; } #dashboardScreen .header-logo { width: 230px; height: 230px; } #dashboardScreen .logo-wrapper::before { width: 310px; height: 310px; } #dashboardScreen .logo-wrapper { margin-bottom: -90px; } #dashboardScreen .header h1 { font-size: 22px; letter-spacing: 3px; } #dashboardScreen .cards-grid { gap: 8px; padding: 0 12px 12px; } #dashboardScreen .card-inner { padding: 6px 5px 5px; min-height: 48px; } #dashboardScreen .card-title { font-size: 10.5px; } #dashboardScreen .card-subtitle { font-size: 8px; } #dashboardScreen .card-ic { width: 60px; height: 60px; border-radius: 14px; } #dashboardScreen .card-ic svg { width: 30px; height: 30px; } } #dashboardScreen { display: none; justify-content: center; align-items: flex-start; padding: 6px; background: #040d1a !important; min-height: 100vh; overflow-x: hidden; overflow-y: auto; } #dashboardScreen.active { display: flex !important; flex-direction: row !important; } #dashboardScreen.active ~ #mainAppFrame { display: none !important; } #dashboardScreen:not(.active) { display: none; } /* === UNIFIED DESIGN SYSTEM — DARK CINEMATIC PREMIUM === */ /* ================================================================ All internal screens — same palette as dashboard & login Background: #040d1a | Cards: glass | Text: light | Accents: blue ================================================================ */ /* --- Kill animated spinning border on all screens --- */ .app-frame::before, .app-frame::after { display: none !important; content: none !important; } #mainAppFrame::before, #mainAppFrame::after { display: none !important; content: none !important; } /* --- HVAC FEED SCREEN: dark theme --- */ #hvacFeedFrame .app-inner { background: #040d1a !important; } #hvacFeedScreen { background: #040d1a !important; } /* --- GLOBAL: Dark cinematic background + iOS safe areas --- */ #mainAppFrame .app-inner { background: #040d1a !important; position: relative; margin: 0 !important; border-radius: 0 !important; padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } #mainAppFrame .app-inner::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 8%, rgba(75,140,245,0.18) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(14,86,216,0.06) 0%, transparent 55%), radial-gradient(circle at 80% 85%, rgba(255,91,26,0.08) 0%, transparent 35%), radial-gradient(circle at 20% 70%, rgba(14,86,216,0.05) 0%, transparent 40%); } #mainAppFrame .container { padding: 0 !important; background: transparent !important; position: relative; z-index: 1; } /* --- UNIFIED TOP NAV BAR --- */ #mainAppFrame .screen > .header:first-child, #mainAppFrame .screen > div:first-child > .header:first-child { background: transparent; padding: 20px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); } #mainAppFrame .header .logo-img { width: 60px !important; max-width: 60px !important; height: 60px; border-radius: 16px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(14,86,216,0.3)); margin-bottom: 8px; } #mainAppFrame .header .logo { font-size: 36px; margin-bottom: 6px; } #mainAppFrame .header h1 { font-size: 20px; font-weight: 800; color: #f0f4fa !important; letter-spacing: -0.3px; margin-bottom: 2px; } #mainAppFrame .header h2 { font-size: 16px; color: #f0f4fa !important; font-weight: 700; } #mainAppFrame .header .subtitle { font-size: 13px; color: rgba(180,200,230,0.5) !important; font-weight: 500; } #mainAppFrame .header .greeting { font-size: 13px; color: rgba(180,200,230,0.5) !important; font-weight: 500; } /* --- SCREEN LAYOUT --- */ #mainAppFrame .screen.active { padding: 0 14px calc(20px + env(safe-area-inset-bottom,0px)); background: #040d1a !important; position: relative; z-index: 1; } #videoLessonsScreen.active, #zoomClassesScreen.active { padding: 0 0 20px !important; } #groupChatRoomScreen.active { padding: 0 !important; } #videoLessonsScreen .header, #zoomClassesScreen .header { padding-left: 14px; padding-right: 14px; } /* --- BACK / SECONDARY BUTTONS — glass --- */ #mainAppFrame .back-btn, #mainAppFrame .btn.btn-secondary[onclick*="showScreen('dashboardScreen')"], #mainAppFrame .btn.btn-secondary[onclick*="showScreen('levelsScreen')"], #mainAppFrame .btn.btn-secondary[onclick*="Volver"] { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #d0d8e8; padding: 10px 18px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 15px rgba(0,0,0,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.2s; } #mainAppFrame .back-btn:hover, #mainAppFrame .btn.btn-secondary[onclick*="showScreen('dashboardScreen')"]:hover { background: rgba(255,255,255,0.08); border-color: rgba(75,140,245,0.3); box-shadow: 0 6px 20px rgba(0,0,0,0.4); } /* --- GLASS CARDS --- */ #mainAppFrame .card { background: rgba(255,255,255,0.04) !important; border-radius: var(--br) !important; padding: 16px; margin: 8px 0; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.15s; } #mainAppFrame .card:hover { transform: translateY(-1px); box-shadow: 0 16px 50px rgba(0,0,0,0.45) !important; border-color: rgba(75,140,245,0.15) !important; } /* --- LEVEL CARDS --- */ #mainAppFrame .level-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--br) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; padding: 16px 18px; transition: all 0.2s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #mainAppFrame .level-card:hover { border-color: rgba(75,140,245,0.2) !important; box-shadow: 0 16px 50px rgba(0,0,0,0.45) !important; transform: translateX(4px) !important; } /* --- STUDY CATEGORY CARDS --- */ #mainAppFrame .study-category-card { border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; border-radius: var(--br) !important; background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #mainAppFrame .study-category-card:hover { border-color: rgba(75,140,245,0.2) !important; box-shadow: 0 16px 50px rgba(0,0,0,0.45) !important; } /* --- VIDEO CARDS --- */ #mainAppFrame .video-card { border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #mainAppFrame .video-card:hover { border-color: rgba(75,140,245,0.2) !important; } #mainAppFrame .video-lesson-card { border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; background: rgba(255,255,255,0.04) !important; } /* --- PRIMARY BUTTONS — Blue gradient --- */ #mainAppFrame .btn-primary { background: linear-gradient(135deg, #0E56D8, #4B8CF5); color: white; border-radius: 14px; font-weight: 700; box-shadow: 0 4px 20px rgba(14,86,216,0.4); letter-spacing: 0.3px; border: none; } #mainAppFrame .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(14,86,216,0.55); } /* --- SECONDARY BUTTONS --- */ #mainAppFrame .btn-secondary { background: #F3F1EA !important; border: 1px solid #E7E5DE !important; color: #0F0F0F !important; font-weight: 600 !important; font-size: 14px !important; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; } #mainAppFrame .btn-secondary:hover { background: #E7E5DE !important; border-color: #D4D1C8 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; } /* --- QUIZ SCREEN --- */ #quizScreen .quiz-header { padding: 14px 14px 10px; background: transparent; border-bottom: 1px solid rgba(255,255,255,0.06); margin: 0 -14px 16px; border-radius: 0; } #quizScreen .question-text { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--br) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; color: #f0f4fa !important; } #quizScreen .option { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.25); color: #d0d8e8; } #quizScreen .option:hover:not(.disabled) { border-color: rgba(75,140,245,0.25); box-shadow: 0 6px 20px rgba(14,86,216,0.15); background: rgba(255,255,255,0.06); } /* --- RESULTS SCREEN --- */ #resultsScreen .card, #resultsScreen .stat { border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.35); background: rgba(255,255,255,0.04); } /* --- CERTIFICATE CARDS --- */ #mainAppFrame .certificate-card { border: 1px solid rgba(255,215,0,0.25) !important; box-shadow: 0 4px 20px rgba(243,156,18,0.1) !important; background: rgba(255,255,255,0.04) !important; } /* --- MEMBERSHIP CARDS --- */ #mainAppFrame .membership-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; border-radius: 16px !important; } #mainAppFrame .membership-card:hover { border-color: rgba(75,140,245,0.2) !important; box-shadow: 0 16px 50px rgba(0,0,0,0.45) !important; } /* --- TIMELINE TABS --- */ #mainAppFrame .timeline-tab.active { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; color: #fff !important; box-shadow: 0 4px 15px rgba(14,86,216,0.35) !important; } /* --- VIDEO STATUS / VIDEO SECONDARY BTN --- */ #mainAppFrame .video-status { background: rgba(255,255,255,0.06) !important; color: rgba(180,200,230,0.6) !important; } #mainAppFrame .btn-video-secondary { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #d0d8e8 !important; } /* --- LEVEL BADGE ICONS — dark glass overrides --- */ #mainAppFrame .badge-principiante, #mainAppFrame .level-card:nth-child(1) .level-icon { background: rgba(16,185,129,0.2) !important; border-color: rgba(16,185,129,0.4) !important; } #mainAppFrame .badge-intermedio, #mainAppFrame .level-card:nth-child(2) .level-icon { background: rgba(59,130,246,0.2) !important; border-color: rgba(59,130,246,0.4) !important; } #mainAppFrame .badge-avanzado, #mainAppFrame .level-card:nth-child(3) .level-icon { background: rgba(245,158,11,0.2) !important; border-color: rgba(245,158,11,0.4) !important; } #mainAppFrame .badge-elite, #mainAppFrame .level-card:nth-child(4) .level-icon { background: rgba(196,32,50,0.2) !important; border-color: rgba(196,32,50,0.4) !important; } #mainAppFrame .badge-platino, #mainAppFrame .level-card:nth-child(5) .level-icon { background: rgba(99,102,241,0.2) !important; border-color: rgba(99,102,241,0.4) !important; } /* --- MOBILE BOTTOM NAV — dark --- */ .mobile-bottom-nav { background: #0a1628 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; color: rgba(180,200,230,0.75) !important; } .mobile-bottom-nav .nav-item.active { color: #E8591C !important; } .mobile-bottom-nav .nav-item { color: #8B8A82 !important; } /* --- PROFILE DIVIDERS --- */ #mainAppFrame .profile-section { border-bottom-color: rgba(255,255,255,0.06) !important; } #mainAppFrame .profile-field { border-bottom-color: rgba(255,255,255,0.06) !important; } /* --- PROGRESS BARS --- */ #mainAppFrame .progress-bar { background: rgba(255,255,255,0.08) !important; border-radius: 8px; overflow: hidden; height: 6px; } #mainAppFrame .progress-fill { background: linear-gradient(90deg, #0E56D8, #4B8CF5) !important; border-radius: 8px; } /* --- TABS — light premium, blue active --- */ #mainAppFrame .study-level-tab, #mainAppFrame .video-level-tab { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 20px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; font-weight: 700; color: #111111 !important; font-size: 13px !important; padding: 8px 14px !important; } #mainAppFrame .study-level-tab:hover, #mainAppFrame .video-level-tab:hover { border-color: rgba(0,122,255,0.35) !important; background: rgba(0,122,255,0.06) !important; color: #111111 !important; } #mainAppFrame .study-level-tab.active, #mainAppFrame .video-level-tab.active { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 15px rgba(14,86,216,0.35) !important; } /* --- SPECIALTY GRID --- */ #mainAppFrame #specialtyGrid > div { border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 25px rgba(0,0,0,0.3); border-radius: var(--br) !important; background: rgba(255,255,255,0.04); } /* --- PROFILE SCREEN --- */ #miPerfilScreen .card { border: 1px solid rgba(255,255,255,0.08); padding: 20px; } #miPerfilScreen .profile-field { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } #miPerfilScreen .technician-number-card { border: 1px solid rgba(75,140,245,0.25); background: linear-gradient(135deg, rgba(14,86,216,0.12), rgba(75,140,245,0.06)); } #miPerfilScreen .profile-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 14px; } #miPerfilScreen .profile-nav-card { border-radius: var(--br); background: rgba(255,255,255,0.04); cursor: pointer; transition: transform 0.15s; -webkit-tap-highlight-color: transparent; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; animation: cardIn 0.4s ease forwards; } #miPerfilScreen .profile-nav-card:active { transform: scale(0.96); } #miPerfilScreen .profile-nav-card .pnc-inner { background: transparent; border-radius: var(--br); padding: 20px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100px; text-align: center; gap: 8px; } #miPerfilScreen .profile-nav-card .pnc-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 24px; } #miPerfilScreen .profile-nav-card .pnc-title { font-size: 14px; font-weight: 800; color: #f0f4fa; line-height: 1.3; } #miPerfilScreen .profile-nav-card .pnc-subtitle { font-size: 12px; color: rgba(240,244,250,0.85); font-weight: 600; margin-top: -4px; } #miPerfilScreen .profile-nav-card:nth-child(1){animation-delay:0.05s} #miPerfilScreen .profile-nav-card:nth-child(2){animation-delay:0.1s} #miPerfilScreen .profile-nav-card:nth-child(3){animation-delay:0.15s} #miPerfilScreen .profile-nav-card:nth-child(4){animation-delay:0.2s} #miPerfilScreen .profile-nav-card:nth-child(5){animation-delay:0.25s} #miPerfilScreen .profile-nav-card:nth-child(6){animation-delay:0.3s} #miPerfilScreen .profile-nav-card:nth-child(7){animation-delay:0.35s} #miPerfilScreen .profile-nav-card:nth-child(8){animation-delay:0.4s} #miPerfilScreen .profile-nav-card:nth-child(9){animation-delay:0.45s} #miPerfilScreen .profile-nav-card:nth-child(10){animation-delay:0.5s} /* When restoring scroll on back navigation, kill every descendant animation so cards appear instantly in place instead of staggering in. The parent fade is handled via inline opacity transition in navigation.js. */ #mainAppFrame .screen.no-child-anim *, #mainAppFrame .screen.no-child-anim *::before, #mainAppFrame .screen.no-child-anim *::after { animation-name: none !important; animation-delay: 0s !important; animation-duration: 0s !important; animation-play-state: paused !important; } /* Force cards that start at opacity:0 (waiting for cardIn forwards) to be visible when their animation is killed. */ #mainAppFrame .screen.no-child-anim .profile-nav-card, #mainAppFrame .screen.no-child-anim [style*="opacity:0"], #mainAppFrame .screen.no-child-anim [style*="opacity: 0"] { opacity: 1 !important; } /* --- ATTENDANCE SCREEN --- */ #attendanceScreen .card { border: 1px solid rgba(255,255,255,0.08); } /* --- STICKY NAV BARS --- */ #videoLessonsScreen > div[style*="position:sticky"], #zoomClassesScreen > div[style*="position:sticky"] { border-bottom: 1px solid rgba(255,255,255,0.06) !important; background: rgba(4,13,26,0.9) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* --- RADIO PODCAST SCREEN --- */ #radioPodcastScreen .card { border: 1px solid rgba(255,255,255,0.08); } #radioPodcastScreen .podcast-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 14px; } #radioPodcastScreen .podcast-nav-card { border-radius: var(--br); background: rgba(255,255,255,0.04); cursor: pointer; transition: transform 0.15s; -webkit-tap-highlight-color: transparent; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; animation: cardIn 0.4s ease forwards; } #radioPodcastScreen .podcast-nav-card:active { transform: scale(0.96); } #radioPodcastScreen .podcast-nav-card .pnc-inner { background: transparent; border-radius: var(--br); padding: 20px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100px; text-align: center; gap: 8px; } #radioPodcastScreen .podcast-nav-card .pnc-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 24px; } #radioPodcastScreen .podcast-nav-card .pnc-title { font-size: 13px; font-weight: 700; color: #f0f4fa; line-height: 1.3; } #radioPodcastScreen .podcast-nav-card .pnc-subtitle { font-size: 11px; color: rgba(180,200,230,0.5); font-weight: 500; margin-top: -4px; } #radioPodcastScreen .podcast-nav-card:nth-child(1){animation-delay:0.05s} #radioPodcastScreen .podcast-nav-card:nth-child(2){animation-delay:0.1s} #radioPodcastScreen .podcast-nav-card:nth-child(3){animation-delay:0.15s} #radioPodcastScreen .ep-card { margin-bottom: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); padding: 12px; transition: border-color 0.3s; background: rgba(255,255,255,0.04); } #radioPodcastScreen .ep-card.completed { border-color: rgba(34,197,94,0.4); } #radioPodcastScreen .ep-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } #radioPodcastScreen .ep-header span { font-size: 14px; font-weight: 700; color: #f0f4fa; } #radioPodcastScreen .ep-progress-btn { border: none; border-radius: 20px; padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s; background: rgba(255,255,255,0.06); color: rgba(180,200,230,0.5); } #radioPodcastScreen .ep-progress-btn.done { background: rgba(34,197,94,0.15); color: #4ade80; } /* --- REFERIDOS --- */ #referidosScreen .card { border: 1px solid rgba(255,255,255,0.08); } /* --- CERTIFICADOS OFICIALES --- */ #certOficialesScreen .card { border: 1px solid rgba(255,255,255,0.08); } /* --- MEMBERSHIP ZONE --- */ #membershipZoneScreen .card { border: 1px solid rgba(255,255,255,0.08); } /* --- CALENDAR --- */ #studentCalendarScreen .card { border: 1px solid rgba(255,255,255,0.08); } /* --- STUDY QUESTION CARDS --- */ #mainAppFrame .study-question-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-left: 4px solid #4B8CF5; box-shadow: 0 12px 40px rgba(0,0,0,0.35); border-radius: var(--br); color: #d0d8e8; } /* --- SECTION LABELS --- */ #mainAppFrame .header + .btn.btn-secondary { margin: 8px 0; } /* --- FORM INPUTS — dark glass --- */ #mainAppFrame .form-group input { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(255,255,255,0.06); font-size: 16px; padding: 14px 16px; color: #f0f4fa; } #mainAppFrame .form-group input:focus { border-color: rgba(75,140,245,0.4) !important; box-shadow: 0 0 0 3px rgba(75,140,245,0.1) !important; background: rgba(255,255,255,0.08) !important; } #mainAppFrame .form-group label { color: rgba(180,200,230,0.5); } /* --- WELCOME SCREEN --- */ #welcomeScreen.active { padding: 0 !important; } #welcomeScreen > .header { background: transparent !important; padding: 12px 20px 8px !important; } #welcomeScreen > .card { margin: 0 10px 10px; border: 1px solid rgba(255,255,255,0.08); } #welcomeScreen .menu-btn-v2 { border-radius: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } /* --- LEVELS SCREEN --- */ #levelsScreen.active { padding-top: 0 !important; } #levelsScreen > .header { padding: 16px 14px 12px !important; margin: 0 -14px; background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.06); } /* --- MEMBERSHIPS SCREEN --- */ #membresiasScreen > .header { background: transparent !important; } /* --- CERT COURSE --- */ #certCourseScreen .card { border: 1px solid rgba(255,255,255,0.08); } /* --- ZOOM CLASSES SCREEN --- */ #zoomClassesScreen .card { border: 1px solid rgba(255,255,255,0.08); } #zoomClassesScreen .zoom-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 14px; } #zoomClassesScreen .zoom-nav-card { border-radius: var(--br); background: rgba(255,255,255,0.04); cursor: pointer; transition: transform 0.15s; -webkit-tap-highlight-color: transparent; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; animation: cardIn 0.4s ease forwards; } #zoomClassesScreen .zoom-nav-card:active { transform: scale(0.96); } #zoomClassesScreen .zoom-nav-card.active { border-color: rgba(75,140,245,0.3); box-shadow: 0 4px 20px rgba(14,86,216,0.2); } #zoomClassesScreen .zoom-nav-card .znc-inner { background: transparent; border-radius: var(--br); padding: 20px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100px; text-align: center; gap: 8px; } #zoomClassesScreen .zoom-nav-card .znc-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 24px; } #zoomClassesScreen .zoom-nav-card .znc-title { font-size: 13px; font-weight: 700; color: #f0f4fa; line-height: 1.3; } #zoomClassesScreen .zoom-nav-card .znc-subtitle { font-size: 11px; color: rgba(180,200,230,0.5); font-weight: 500; margin-top: -4px; } #zoomClassesScreen .zoom-nav-card:nth-child(1){animation-delay:0.05s} #zoomClassesScreen .zoom-nav-card:nth-child(2){animation-delay:0.1s} #zoomClassesScreen .zoom-nav-card:nth-child(3){animation-delay:0.15s} #zoomClassesScreen .zoom-nav-card:nth-child(4){animation-delay:0.2s} #zoomClassesScreen .zoom-nav-card:nth-child(5){animation-delay:0.25s} #zoomClassesScreen .zoom-nav-card:nth-child(6){animation-delay:0.3s} /* --- VIDEO PLAYER --- */ #videoPlayerScreen .video-player-container { border-radius: var(--br); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } #videoPlayerScreen .card { border: 1px solid rgba(255,255,255,0.08); } /* --- GLOBAL TEXT COLORS for internal screens — LIGHT CANVAS INK --- Flipped from pale dark-mode whites to crisp premium dark ink so every label / span / p / td renders with strong contrast on the warm #FAFAF7 canvas. Chat/feed screens that stay dark have their own .screen scoped overrides below. */ #mainAppFrame .screen h1:not([style*="color"]), #mainAppFrame .screen h2:not([style*="color"]), #mainAppFrame .screen h3:not([style*="color"]) { color: #0F0F0F !important; } #mainAppFrame .screen p:not([style*="color"]) { color: #111 !important; } #mainAppFrame .screen label:not([style*="color"]) { color: #6B6B66 !important; } #mainAppFrame .screen .text-muted:not([style*="color"]), #mainAppFrame .screen small:not([style*="color"]) { color: #6B6B66 !important; } #mainAppFrame .screen .subtitle:not([style*="color"]) { color: #6B6B66 !important; } #mainAppFrame .screen .score-label:not([style*="color"]) { color: #6B6B66 !important; } #mainAppFrame .screen .stat-label:not([style*="color"]) { color: #6B6B66 !important; } #mainAppFrame .screen .profile-label:not([style*="color"]) { color: #6B6B66 !important; font-weight: 500 !important; } #mainAppFrame .screen .profile-value:not([style*="color"]) { color: #0F0F0F !important; font-weight: 600 !important; } #mainAppFrame .screen .stat-value:not([style*="color"]) { color: #0F0F0F !important; font-weight: 800 !important; } #mainAppFrame .screen .option-text:not([style*="color"]) { color: #0F0F0F !important; } /* Catch-all for spans, divs, table cells, links */ #mainAppFrame .screen span:not([style*="color"]) { color: #0F0F0F; } #mainAppFrame .screen td:not([style*="color"]) { color: #0F0F0F !important; } #mainAppFrame .screen th:not([style*="color"]) { color: #0F0F0F !important; font-weight: 700 !important; } #mainAppFrame .screen a:not(.btn):not([style*="color"]) { color: #E8591C !important; } #mainAppFrame .screen .mc-loading-text:not([style*="color"]) { color: #6B6B66 !important; } /* Restore dark-mode text for the chat/feed screens that stay dark */ #mainAppFrame #hvacFeedScreen span:not([style*="color"]), #mainAppFrame #techChatScreen span:not([style*="color"]), #mainAppFrame #sugerenciasScreen span:not([style*="color"]), #mainAppFrame #groupChatRoomScreen span:not([style*="color"]) { color: #E6EAF2 !important; } #mainAppFrame #hvacFeedScreen p:not([style*="color"]), #mainAppFrame #techChatScreen p:not([style*="color"]), #mainAppFrame #sugerenciasScreen p:not([style*="color"]), #mainAppFrame #groupChatRoomScreen p:not([style*="color"]) { color: #D1D8E6 !important; } /* NOTE: removed the `color: inherit !important` escape rules — they were resolving to the parent ink color and blanking out white titles on dark video cards (acvoltCertScreen). Inline `style="color:#fff"` already wins vs the :not([style*="color"]) rules above, so no escape is needed. */ #mainAppFrame .screen .badge, #mainAppFrame .screen [class*="status"] { color: inherit !important; } /* --- LEVEL CARDS dark --- */ #mainAppFrame .level-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } #mainAppFrame .level-card .level-info h3 { color: #f0f4fa !important; } #mainAppFrame .level-card .level-info p { color: rgba(180,200,230,0.5) !important; } #mainAppFrame .level-icon { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } /* --- CERT CARDS premium --- */ #mainAppFrame .cert-card { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 6px 18px -8px rgba(17,17,17,0.08) !important; } #mainAppFrame .cert-card .cert-icon { width: 56px !important; height: 56px !important; margin: 0 auto 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; background: linear-gradient(180deg, #FAFAF7 0%, #F3F1EA 100%) !important; border: 1px solid #E7E5DE !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 4px rgba(17,17,17,0.04) !important; } #mainAppFrame .cert-card .cert-name { color: #0F0F0F !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } #mainAppFrame .cert-card .cert-price, #mainAppFrame .cert-card .cert-status { color: #E8591C !important; font-weight: 700 !important; } /* --- PROGRESS SCREEN dark --- */ #mainAppFrame .progress-stat-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; } #mainAppFrame .progress-chart-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; color: #f0f4fa !important; } #mainAppFrame .progress-chart-card h3 { color: #f0f4fa !important; } /* --- STUDENT EXAMS SCREEN: override inline white backgrounds --- */ #studentExamsScreen div[style*="background:#fff"], #studentExamsScreen div[style*="background: #fff"], #studentExamsScreen div[style*="background:white"], #studentExamsScreen div[style*="background: white"] { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; } #studentExamsScreen div[style*="background:#f0fdf4"] { background: rgba(22,163,106,0.12) !important; } #studentExamsScreen div[style*="background:#eff6ff"] { background: rgba(37,99,235,0.12) !important; } #studentExamsScreen div[style*="background:#fefce8"] { background: rgba(202,138,4,0.12) !important; } #studentExamsScreen h3[style*="color:#1a1a2e"] { color: #f0f4fa !important; } #studentExamsScreen div[style*="color:#64748b"] { color: rgba(140,170,210,0.5) !important; } /* --- STUDENT PROGRESS green header → dark glass --- */ #studentProgressScreen > div[style*="background:linear-gradient(135deg,#10b981"] { background: rgba(16,185,129,0.15) !important; border-bottom: 1px solid rgba(16,185,129,0.3) !important; } /* --- BTN-PRIMARY blue override (beat theme-wow red) --- */ #mainAppFrame .btn-primary { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; box-shadow: 0 4px 15px rgba(14,86,216,0.3) !important; } /* --- CERT COURSE SCREEN: inline dark text overrides --- */ #certCourseScreen h2[style*="color:#1e293b"] { color: #f0f4fa !important; } #certCourseScreen p[style*="color:#64748b"] { color: rgba(180,200,230,0.5) !important; } /* --- SPECIALTY SUBCATEGORIES: back button + heading --- */ #specialtySubcategories button[style*="background:#e2e8f0"] { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #d0d8e8 !important; } #specialtySubcategories h3[style*="color:#1e293b"] { color: #f0f4fa !important; } /* --- VIDEO LESSONS SCREEN: back button + YouTube header --- */ #videoLessonsScreen button[style*="background:#e2e8f0"] { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #d0d8e8 !important; } #videoLessonsScreen div[style*="color:#1e293b"] { color: #f0f4fa !important; } /* --- ZOOM VERIFY GATE: headers + dark text --- */ #zoomVerifyGate h2[style*="color:#1e293b"] { color: #f0f4fa !important; } #zoomVerifyGate div[style*="color:#1e293b"] { color: #f0f4fa !important; } #zoomVerifyGate div[style*="color:#64748b"] { color: rgba(160,185,220,0.65) !important; } #zoomVerifyGate p[style*="color:#64748b"] { color: rgba(160,185,220,0.65) !important; } #zoomVerifyGate div[style*="background:#fef2f2"] { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.3) !important; color: #f87171 !important; } /* --- ZOOM RECORDINGS: welcome name + stats + search + logout --- */ #zoomRecordingsList div[style*="color:#1e293b"] { color: #f0f4fa !important; } #zoomRecordingsList div[style*="color:#64748b"] { color: rgba(160,185,220,0.65) !important; } #zoomRecordingsList button[style*="background:#f1f5f9"] { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; color: #d0d8e8 !important; } #zoomRecordingsList div[style*="background:#eff6ff"] { background: rgba(45,140,255,0.12) !important; border-color: rgba(45,140,255,0.3) !important; } #zoomRecordingsList div[style*="background:#f0fdf4"] { background: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.3) !important; } #zoomRecordingsList div[style*="background:#fefce8"] { background: rgba(245,158,11,0.12) !important; border-color: rgba(245,158,11,0.3) !important; } #zoomClassesScreen input[style*="background:#f8fafc"] { background: rgba(255,255,255,0.06) !important; color: #f0f4fa !important; border-color: rgba(255,255,255,0.1) !important; } /* --- STUDENT PROGRESS SCREEN: additional inline overrides --- */ #studentProgressScreen div[style*="background:#f1f5f9"], #studentProgressScreen div[style*="background:#dcfce7"], #studentProgressScreen div[style*="background:#86efac"], #studentProgressScreen div[style*="background:#22c55e"], #studentProgressScreen div[style*="background:#15803d"] { /* heatmap legend — keep original colors, just need to be visible */ } #studentProgressScreen span[style*="color:#94a3b8"] { color: rgba(160,185,220,0.65) !important; } /* --- HISTORY ITEMS (attendance/quiz history) --- */ #mainAppFrame .history-item { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important; } #mainAppFrame .history-date { color: rgba(180,200,230,0.6) !important; } #mainAppFrame .history-hours { color: #7dc0ff !important; } #mainAppFrame .type-presencial { background: rgba(14,86,216,0.15) !important; color: #7dc0ff !important; border-color: rgba(75,140,245,0.3) !important; } #mainAppFrame .type-zoom { background: rgba(75,140,245,0.12) !important; color: #7dc0ff !important; border-color: rgba(75,140,245,0.25) !important; } /* --- VIDEO PROGRESS SUMMARY --- */ #mainAppFrame .video-progress-summary { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.08) !important; color: #111111 !important; font-weight: 600; font-size: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } #mainAppFrame .video-status { color: #111111 !important; font-weight: 600; } #mainAppFrame .video-status.completed { color: #22c55e !important; } /* --- STUDY OPTIONS --- */ #mainAppFrame .study-option { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.08) !important; color: #111111 !important; font-weight: 600; } #mainAppFrame .study-option:hover { border-color: rgba(0,122,255,0.35) !important; background: rgba(0,122,255,0.04) !important; } #mainAppFrame .study-question-text { color: #111111 !important; font-weight: 600; } /* --- CERTIFICATE DETAIL --- */ #mainAppFrame .certificate-detail { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important; } #mainAppFrame .certificate-detail-value { color: #f0f4fa !important; } /* --- PROFILE AVATAR border --- */ #mainAppFrame .profile-avatar { border-color: rgba(75,140,245,0.3) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; } /* --- SELECT/TEXTAREA inputs dark --- */ #mainAppFrame .screen select, #mainAppFrame .screen textarea { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #f0f4fa !important; border-radius: 12px !important; } /* --- SMOOTH TRANSITIONS --- */ #mainAppFrame .screen { animation: screenFadeIn 280ms cubic-bezier(0.32, 0.72, 0, 1); } @keyframes screenFadeIn { from { opacity: 0; transform: translateY(6px) scale(0.992); } to { opacity: 1; transform: translateY(0) scale(1); } } /* iOS-style horizontal push/pop — applied inline by showScreen() */ @keyframes iosSlideInRight { from { transform: translateX(100%); opacity: 0.85; } to { transform: translateX(0); opacity: 1; } } @keyframes iosSlideInLeft { from { transform: translateX(-24%); opacity: 0.7; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #mainAppFrame .screen { animation: none !important; } } /* --- Floating Home button — dark glass --- */ .home-fab { top: calc(16px + env(safe-area-inset-top, 0px)) !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #7dc0ff !important; box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .home-fab:hover { border-color: rgba(75,140,245,0.3) !important; box-shadow: 0 10px 30px rgba(14,86,216,0.25) !important; } /* ================================================================ LOGIN SCREEN — Dark Premium Cinematic ================================================================ */ #mainAppFrame #loginScreen.active { background: #040d1a !important; position: relative; } /* Hide animated border on login screen */ #mainAppFrame:has(#loginScreen.active) > .app-inner::before, #mainAppFrame:has(#loginScreen.active) > .app-inner::after, #mainAppFrame:has(#loginScreen.active)::before, #mainAppFrame:has(#loginScreen.active)::after { display: none !important; } #mainAppFrame #loginScreen::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 8%, rgba(75,140,245,0.22) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(14,86,216,0.08) 0%, transparent 55%), radial-gradient(circle at 80% 85%, rgba(255,91,26,0.1) 0%, transparent 35%), radial-gradient(circle at 20% 70%, rgba(14,86,216,0.06) 0%, transparent 40%); } /* --- Login header section (override inline bg) --- */ #mainAppFrame #loginScreen > div:first-child { background: transparent !important; position: relative; z-index: 1; } /* --- Login logo styling --- */ #mainAppFrame #loginScreen .login-logo-wrap { position: relative; display: inline-block; margin-bottom: -30px; } #mainAppFrame #loginScreen .login-logo-wrap::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(14,86,216,0.3) 0%, rgba(75,140,245,0.15) 30%, rgba(14,86,216,0.05) 55%, transparent 70%); animation: logoBreath 4s ease-in-out infinite; pointer-events: none; } /* --- Content wrapper z-index --- */ #mainAppFrame #loginScreen > div:first-child ~ div { position: relative; z-index: 1; } /* --- Glass cards (login + register) --- */ #mainAppFrame #loginScreen .card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 20px !important; } #mainAppFrame #loginScreen .card::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 50%, transparent); } /* --- All text overrides inside login --- */ #mainAppFrame #loginScreen p { color: rgba(180,200,230,0.6) !important; } #mainAppFrame #loginScreen .card p:first-child { color: var(--text-bright, #f0f4fa) !important; } #mainAppFrame #loginScreen h1 { color: #ffffff !important; font-size: 30px !important; font-weight: 900 !important; letter-spacing: 3px !important; text-shadow: 0 0 20px rgba(75,140,245,0.5), 0 0 60px rgba(14,86,216,0.3), 0 2px 4px rgba(0,0,0,0.5) !important; margin-top: 16px !important; } #mainAppFrame #loginScreen h2 { color: #ffffff !important; } /* --- Form labels --- */ #mainAppFrame #loginScreen .form-group label { color: rgba(180,200,230,0.5) !important; } /* --- Form inputs dark glass --- */ #mainAppFrame #loginScreen .form-group input, #mainAppFrame #loginScreen input[type="email"], #mainAppFrame #loginScreen input[type="password"], #mainAppFrame #loginScreen input[type="text"] { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #f0f4fa !important; border-radius: 12px !important; } #mainAppFrame #loginScreen .form-group input::placeholder, #mainAppFrame #loginScreen input::placeholder { color: rgba(140,170,210,0.35) !important; } #mainAppFrame #loginScreen .form-group input:focus, #mainAppFrame #loginScreen input:focus { border-color: rgba(75,140,245,0.4) !important; box-shadow: 0 0 0 3px rgba(75,140,245,0.1) !important; background: rgba(255,255,255,0.08) !important; } /* --- Primary button → blue gradient --- */ #mainAppFrame #loginScreen .btn-primary, #mainAppFrame #loginScreen .btn[style*="btn-primary"], #mainAppFrame #loginScreen button[type="submit"] { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important; border-radius: 14px !important; } #mainAppFrame #loginScreen .btn-primary:hover, #mainAppFrame #loginScreen button[type="submit"]:hover { box-shadow: 0 6px 28px rgba(14,86,216,0.55) !important; transform: translateY(-2px); } /* --- Magic link / purple button → glass blue --- */ #mainAppFrame #loginScreen .btn[style*="7c3aed"], #mainAppFrame #loginScreen button[onclick*="showMagicLink"] { background: rgba(75,140,245,0.12) !important; border: 1px solid rgba(75,140,245,0.25) !important; color: #7dc0ff !important; box-shadow: none !important; } /* --- Register button → subtle green glass --- */ #mainAppFrame #loginScreen .btn[style*="27ae60"], #mainAppFrame #loginScreen button[onclick*="registerScreen"] { background: linear-gradient(135deg, rgba(39,174,96,0.25), rgba(16,163,74,0.15)) !important; border: 1px solid rgba(39,174,96,0.3) !important; color: #4ade80 !important; box-shadow: 0 4px 15px rgba(39,174,96,0.2) !important; } /* --- Password recovery button → glass blue --- */ #mainAppFrame #loginScreen button[onclick*="sendPasswordReset"], #mainAppFrame #loginScreen button[onclick*="sendMagicLink"] { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; border: none !important; color: #fff !important; } /* --- Forgot password / link text --- */ #mainAppFrame #loginScreen span[onclick*="showForgot"] { color: #7dc0ff !important; } /* --- Separator "ó" --- */ #mainAppFrame #loginScreen div[style*="border-top:1px solid"] { border-color: rgba(255,255,255,0.08) !important; } #mainAppFrame #loginScreen span[style*="background:#f8fafc"] { background: #0a1628 !important; color: rgba(180,200,230,0.65) !important; border-color: rgba(255,255,255,0.1) !important; } /* --- Password eye toggle --- */ #mainAppFrame #loginScreen button[onclick*="_togglePassVis"] { color: rgba(180,200,230,0.65) !important; } /* --- Forgot password / magic link expansion boxes --- */ #mainAppFrame #loginScreen #forgotPasswordBox { background: rgba(75,140,245,0.06) !important; border: 1px solid rgba(75,140,245,0.15) !important; border-radius: 14px !important; } #mainAppFrame #loginScreen #forgotPasswordBox p { color: #7dc0ff !important; } #mainAppFrame #loginScreen #forgotPasswordBox input { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(75,140,245,0.2) !important; color: #f0f4fa !important; } #mainAppFrame #loginScreen #magicLinkBox { background: rgba(75,140,245,0.06) !important; border: 1px solid rgba(75,140,245,0.15) !important; border-radius: 14px !important; } #mainAppFrame #loginScreen #magicLinkBox p { color: #7dc0ff !important; } #mainAppFrame #loginScreen #magicLinkBox input { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(75,140,245,0.2) !important; color: #f0f4fa !important; } /* --- Reset password card --- */ #mainAppFrame #loginScreen #resetPasswordBox .card { border-color: rgba(39,174,96,0.2) !important; background: rgba(39,174,96,0.04) !important; } #mainAppFrame #loginScreen #resetPasswordBox h2 { color: #4ade80 !important; } #mainAppFrame #loginScreen #resetPasswordBox input { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #f0f4fa !important; } #mainAppFrame #loginScreen #resetPasswordBox button[onclick*="submitNewPassword"] { background: linear-gradient(135deg, rgba(39,174,96,0.4), rgba(16,163,74,0.3)) !important; border: 1px solid rgba(39,174,96,0.3) !important; color: #4ade80 !important; } /* --- Section divider line inside card --- */ #mainAppFrame #loginScreen div[style*="border-top:1px solid #e2e8f0"] { border-color: rgba(255,255,255,0.06) !important; } /* --- "Conoce más" button --- */ #mainAppFrame #loginScreen button[onclick*="landingPage"] { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #7dc0ff !important; } /* --- Admin link --- */ #mainAppFrame #loginScreen .admin-link { color: rgba(180,200,230,0.65) !important; } /* --- Login error message --- */ #mainAppFrame #loginScreen .login-error { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.2) !important; color: #f87171 !important; } /* ================================================================ ATTENDANCE SCREEN — Dark overrides ================================================================ */ #attendanceScreen .attendance-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #attendanceScreen .attendance-timer { color: #4B8CF5 !important; } #attendanceScreen .type-option { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(180,200,230,0.6) !important; } #attendanceScreen .type-option.selected { border-color: rgba(75,140,245,0.4) !important; background: rgba(75,140,245,0.12) !important; color: #7dc0ff !important; } #attendanceScreen .btn-checkin-in { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important; } #attendanceScreen .btn-checkin-out { background: linear-gradient(135deg, rgba(239,68,68,0.3), rgba(220,38,38,0.2)) !important; border: 1px solid rgba(239,68,68,0.3) !important; box-shadow: 0 4px 20px rgba(239,68,68,0.2) !important; color: #f87171 !important; } #attendanceScreen .att-summary-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; } #attendanceScreen .att-summary-number { color: #4B8CF5 !important; } #attendanceScreen .att-summary-text { color: rgba(180,200,230,0.5) !important; } #attendanceScreen h2 { color: #f0f4fa !important; } #attendanceScreen .attendance-status { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; } #attendanceScreen .status-active { background: rgba(34,197,94,0.12) !important; color: #4ade80 !important; border-color: rgba(34,197,94,0.3) !important; } #attendanceScreen .status-inactive { background: rgba(239,68,68,0.08) !important; color: #f87171 !important; border-color: rgba(239,68,68,0.2) !important; } #attendanceScreen p { color: #3D3D3A !important; font-weight: 500 !important; } /* --- PROFILE floating back button — dark glass --- */ #miPerfilScreen #floatingBackBtn button { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important; } /* --- RADIO/PODCAST SCREEN: dark theme inline overrides --- */ #radioPodcastScreen .pnc-ic { background: rgba(255,255,255,0.08) !important; } #podcastFloatingBtn button { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important; } #sectionRadio .card { border-color: rgba(14,86,216,0.3) !important; } #sectionRadio .card > div[style*="background:linear-gradient"] { background: linear-gradient(135deg, rgba(14,86,216,0.5), rgba(75,140,245,0.3)) !important; } #sectionRadio .card > div[style*="background:#fff"] { background: rgba(255,255,255,0.04) !important; } #radioPlayerOff button { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; box-shadow: 0 4px 20px rgba(14,86,216,0.4) !important; } #radioPlayerOn > div:first-child span[style*="background:#dcfce7"] { background: rgba(34,197,94,0.15) !important; color: #4ade80 !important; } #radioPlayerOn button { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #d0d8e8 !important; } #sectionEpisodios > .card { border-color: rgba(29,185,84,0.3) !important; background: rgba(255,255,255,0.04) !important; } #sectionEpisodios h3 { color: #f0f4fa !important; } #sectionTipsHVAC > .card { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; } /* --- PROFILE SCREEN: section dark overrides --- */ #miPerfilScreen .pnc-ic { background: rgba(255,255,255,0.08) !important; } #miPerfilScreen [style*="background:#fff"], #miPerfilScreen [style*="background: #fff"] { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important; } #miPerfilScreen [style*="color:#f39c12"] { color: #4B8CF5 !important; } #miPerfilScreen [style*="color: #1a1a2e"], #miPerfilScreen [style*="color:#1a1a2e"] { color: #f0f4fa !important; } #miPerfilScreen #sectionProgreso button[style*="background: #6c3ce0"], #miPerfilScreen #sectionProgreso button[style*="background:#6c3ce0"] { background: linear-gradient(135deg, #0E56D8, #4B8CF5) !important; } /* --- RESULTS/EXAM SCREEN: premium light stat containers --- */ #mainAppFrame .stat { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #mainAppFrame .stat-value { color: #0F0F0F !important; text-shadow: none !important; font-weight: 800 !important; } #mainAppFrame .stat.correct .stat-value { color: #059669 !important; } #mainAppFrame .stat.incorrect .stat-value { color: #DC2626 !important; } #mainAppFrame .stat.time .stat-value { color: #E8591C !important; } #mainAppFrame .stat-label { color: #6B6B66 !important; font-weight: 500 !important; } #mainAppFrame .score-bg { stroke: #E7E5DE !important; } #mainAppFrame .score-label { color: #3D3D3A !important; font-weight: 600 !important; } #mainAppFrame .score-value { color: #0F0F0F !important; font-weight: 800 !important; } #mainAppFrame .score-fill { filter: drop-shadow(0 0 6px rgba(232,89,28,0.35)) !important; } /* --- SUBTITLE/LABEL premium light palette --- */ #mainAppFrame .subtitle, #mainAppFrame .profile-level-subtitle, #mainAppFrame .study-breadcrumb, #mainAppFrame .certificate-title, #mainAppFrame .video-progress-text, #mainAppFrame .progress-text, #mainAppFrame .timeline-date { color: #3D3D3A !important; font-weight: 500 !important; } #mainAppFrame .profile-label, #mainAppFrame .certificate-detail-label, #mainAppFrame .cert-detail-label, #mainAppFrame .stat-label, #mainAppFrame .video-card-info p, #mainAppFrame .technician-meta { color: #6B6B66 !important; font-weight: 500 !important; } /* --- QUIZ REVIEW: question badges + explanation (premium light) --- */ #mainAppFrame .study-question-number, #mainAppFrame .question-number { background: linear-gradient(135deg, #E8591C, #F39C12) !important; color: #FFFFFF !important; box-shadow: 0 2px 10px rgba(232,89,28,0.25) !important; font-weight: 800 !important; } #mainAppFrame .study-explanation { background: #FFF7ED !important; border: 1px solid #FED7AA !important; border-left: 3px solid #E8591C !important; border-radius: 10px !important; } #mainAppFrame .study-explanation-title { color: #C2410C !important; font-weight: 800 !important; } #mainAppFrame .study-explanation-text { color: #0F0F0F !important; font-weight: 500 !important; } /* --- QUIZ/STUDY OPTIONS: premium light --- */ #mainAppFrame .option { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; color: #0F0F0F !important; font-weight: 500 !important; } #mainAppFrame .option:hover:not(.disabled) { border-color: #E8591C !important; background: #FFF7ED !important; box-shadow: 0 6px 20px rgba(232,89,28,0.12) !important; } #mainAppFrame .option-letter { background: #FAFAF7 !important; color: #0F0F0F !important; border: 1px solid #E7E5DE !important; font-weight: 700 !important; } #mainAppFrame .option.correct { background: rgba(39,174,96,0.15) !important; border-color: #27ae60 !important; } #mainAppFrame .option.incorrect { background: rgba(231,76,60,0.15) !important; border-color: #e74c3c !important; } #mainAppFrame .option.correct .option-letter { background: linear-gradient(135deg, #27ae60, #2ecc71) !important; color: #fff !important; } #mainAppFrame .option.incorrect .option-letter { background: linear-gradient(135deg, #e74c3c, #c0392b) !important; color: #fff !important; } /* ================================================================ CRM / ADMIN PROTECTION — restore light CRM theme MUST use #mainAppFrame #adminXxx (specificity 2-1-0+) to beat #mainAppFrame .screen.active (specificity 1-2-0) ================================================================ */ #mainAppFrame #adminDashboardScreen.active, #mainAppFrame #adminTechnicianProfileScreen.active { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 400 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; padding: 0 !important; overflow-y: auto !important; background: linear-gradient(135deg,#fef9f0,#fff7ed) !important; color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen .card, #mainAppFrame #adminDashboardScreen .admin-section, #mainAppFrame #adminDashboardScreen .admin-stat-card, #mainAppFrame #adminTechnicianProfileScreen .card { background: #ffffff !important; border: 1px solid #e3e7ee !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen .stat { background: #ffffff !important; border: 1px solid #e3e7ee !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #mainAppFrame #adminDashboardScreen .stat-value { color: #1a1d21 !important; text-shadow: none !important; } #mainAppFrame #adminDashboardScreen .stat-label { color: #4b5563 !important; } #mainAppFrame #adminDashboardScreen h1, #mainAppFrame #adminDashboardScreen h2, #mainAppFrame #adminDashboardScreen h3, #mainAppFrame #adminTechnicianProfileScreen h1, #mainAppFrame #adminTechnicianProfileScreen h2, #mainAppFrame #adminTechnicianProfileScreen h3 { color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen p, #mainAppFrame #adminTechnicianProfileScreen p { color: #4b5563 !important; } #mainAppFrame #adminDashboardScreen .back-btn, #mainAppFrame #adminTechnicianProfileScreen .back-btn { background: #f8f9fb !important; border: 1px solid #e3e7ee !important; color: #1a1d21 !important; backdrop-filter: none !important; box-shadow: none !important; } #mainAppFrame #adminDashboardScreen .btn-primary { background: #22c55e !important; color: #fff !important; border: none !important; } #mainAppFrame #adminDashboardScreen .btn-secondary { background: #f8f9fb !important; border: 1px solid #e3e7ee !important; color: #1a1d21 !important; backdrop-filter: none !important; } #mainAppFrame #adminDashboardScreen input, #mainAppFrame #adminDashboardScreen select, #mainAppFrame #adminDashboardScreen textarea { background: #f8f9fb !important; border: 1px solid #e3e7ee !important; color: #1a1d21 !important; backdrop-filter: none !important; } #mainAppFrame #adminDashboardScreen .option { background: #f8f9fb !important; border: 1px solid #e3e7ee !important; color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen .option-letter { background: #e2e8f0 !important; color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen .progress-bar { background: #e3e7ee !important; } #mainAppFrame #adminDashboardScreen .progress-fill { background: #22c55e !important; } #mainAppFrame #adminDashboardScreen .subtitle, #mainAppFrame #adminDashboardScreen .profile-label { color: #4b5563 !important; } #mainAppFrame #adminDashboardScreen .study-level-tab { background: #f8f9fb !important; border: 1px solid #e3e7ee !important; color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen .study-level-tab.active { background: #22c55e !important; color: #fff !important; } #mainAppFrame #adminDashboardScreen .header { background: #ffffff !important; border-bottom: 1px solid #e3e7ee !important; } /* Reset ALL dark text/color overrides inside CRM */ #mainAppFrame #adminDashboardScreen label, #mainAppFrame #adminDashboardScreen small, #mainAppFrame #adminDashboardScreen .text-muted, #mainAppFrame #adminDashboardScreen span, #mainAppFrame #adminTechnicianProfileScreen label, #mainAppFrame #adminTechnicianProfileScreen small, #mainAppFrame #adminTechnicianProfileScreen span { color: inherit !important; } #mainAppFrame #adminDashboardScreen a { color: #2563eb !important; } #mainAppFrame #adminDashboardScreen td { color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen th { color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen .stat-value { color: #1a1d21 !important; } #mainAppFrame #adminDashboardScreen .stat-label { color: #4b5563 !important; } /* Ensure CRM container has no dark inner bg */ #mainAppFrame #adminDashboardScreen .app-inner, #mainAppFrame #adminDashboardScreen .container { background: transparent !important; } #mainAppFrame #adminDashboardScreen .score-bg { stroke: #e2e8f0 !important; } #mainAppFrame #adminDashboardScreen .score-label { color: #4b5563 !important; } #mainAppFrame #adminDashboardScreen .score-value { color: #1a1d21 !important; } /* --- WHITE-BACKGROUND MODAL FIX: Override dark-theme text inside light modals --- */ /* Fixed overlays with white modal bodies need dark text to be readable */ #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] h1, #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] h2, #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] h3, #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] h4 { color: #1a1d21 !important; } #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] label { color: #4b5563 !important; } #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] p { color: #4b5563 !important; } #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] span { color: #1e293b !important; } #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] td { color: #1e293b !important; } #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] th { color: #1e293b !important; } #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] a:not(.btn) { color: #2563eb !important; } #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] input, #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] select, #mainAppFrame [style*="position:fixed"] [style*="background:#fff"] textarea { color: #1a1d21 !important; } /* Also handle background: #fff with space and background:white, #FFFFFF, #ffffff */ #mainAppFrame [style*="background: #fff"] h1, #mainAppFrame [style*="background:#fff"] h1, #mainAppFrame [style*="background: #FFFFFF"] h1, #mainAppFrame [style*="background:#FFFFFF"] h1, #mainAppFrame [style*="background: #ffffff"] h1, #mainAppFrame [style*="background:#ffffff"] h1, #mainAppFrame [style*="background: white"] h1, #mainAppFrame [style*="background:white"] h1, #mainAppFrame [style*="background: #fff"] h2, #mainAppFrame [style*="background:#fff"] h2, #mainAppFrame [style*="background: #FFFFFF"] h2, #mainAppFrame [style*="background:#FFFFFF"] h2, #mainAppFrame [style*="background: #ffffff"] h2, #mainAppFrame [style*="background:#ffffff"] h2, #mainAppFrame [style*="background: white"] h2, #mainAppFrame [style*="background:white"] h2, #mainAppFrame [style*="background: #fff"] h3, #mainAppFrame [style*="background:#fff"] h3, #mainAppFrame [style*="background: #FFFFFF"] h3, #mainAppFrame [style*="background:#FFFFFF"] h3, #mainAppFrame [style*="background: #ffffff"] h3, #mainAppFrame [style*="background:#ffffff"] h3, #mainAppFrame [style*="background: white"] h3, #mainAppFrame [style*="background:white"] h3, #mainAppFrame [style*="background: #fff"] h4, #mainAppFrame [style*="background:#fff"] h4, #mainAppFrame [style*="background: #FFFFFF"] h4, #mainAppFrame [style*="background:#FFFFFF"] h4, #mainAppFrame [style*="background: #ffffff"] h4, #mainAppFrame [style*="background:#ffffff"] h4, #mainAppFrame [style*="background: white"] h4, #mainAppFrame [style*="background:white"] h4 { color: #111111 !important; } #mainAppFrame [style*="background: #fff"] label, #mainAppFrame [style*="background:#fff"] label, #mainAppFrame [style*="background: #FFFFFF"] label, #mainAppFrame [style*="background:#FFFFFF"] label, #mainAppFrame [style*="background: #ffffff"] label, #mainAppFrame [style*="background:#ffffff"] label, #mainAppFrame [style*="background: white"] label, #mainAppFrame [style*="background:white"] label { color: #111111 !important; font-weight:600 !important; } #mainAppFrame [style*="background: #fff"] span:not([style*="color"]), #mainAppFrame [style*="background:#fff"] span:not([style*="color"]), #mainAppFrame [style*="background: #FFFFFF"] span:not([style*="color"]), #mainAppFrame [style*="background:#FFFFFF"] span:not([style*="color"]), #mainAppFrame [style*="background: #ffffff"] span:not([style*="color"]), #mainAppFrame [style*="background:#ffffff"] span:not([style*="color"]), #mainAppFrame [style*="background: white"] span:not([style*="color"]), #mainAppFrame [style*="background:white"] span:not([style*="color"]) { color: #111111 !important; } #mainAppFrame [style*="background: #fff"] p, #mainAppFrame [style*="background:#fff"] p, #mainAppFrame [style*="background: #FFFFFF"] p, #mainAppFrame [style*="background:#FFFFFF"] p, #mainAppFrame [style*="background: #ffffff"] p, #mainAppFrame [style*="background:#ffffff"] p, #mainAppFrame [style*="background: white"] p, #mainAppFrame [style*="background:white"] p { color: #111111 !important; } #mainAppFrame [style*="background: #fff"] input, #mainAppFrame [style*="background:#fff"] input, #mainAppFrame [style*="background: #FFFFFF"] input, #mainAppFrame [style*="background:#FFFFFF"] input, #mainAppFrame [style*="background: #ffffff"] input, #mainAppFrame [style*="background:#ffffff"] input, #mainAppFrame [style*="background: white"] input, #mainAppFrame [style*="background:white"] input { color: #111111 !important; } /* Global placeholder fix — default iOS renders placeholders at ~40% opacity, unreadable */ #mainAppFrame input::placeholder, #mainAppFrame textarea::placeholder, #mainAppFrame select::placeholder { color: #374151 !important; opacity: 1 !important; font-weight: 500 !important; } /* Global fix for div text inside white cards — a huge swath of our UI */ #mainAppFrame [style*="background: #FFFFFF"] div:not([style*="color"]):not([class]), #mainAppFrame [style*="background:#FFFFFF"] div:not([style*="color"]):not([class]), #mainAppFrame [style*="background: #ffffff"] div:not([style*="color"]):not([class]), #mainAppFrame [style*="background:#ffffff"] div:not([style*="color"]):not([class]) { color: #111111; } /* --- MOBILE RESPONSIVENESS refinements --- */ @media (max-width: 380px) { #mainAppFrame .header h1 { font-size: 18px; } #mainAppFrame .card { padding: 12px; margin: 6px 0; } #mainAppFrame .btn { padding: 11px; font-size: 13px; } #mainAppFrame .level-card { padding: 14px; } #mainAppFrame .option { padding: 12px; gap: 10px; } } /* ================================================================ END STYLE MIGRATION ================================================================ */ /* === AMBASSADOR ANIMATIONS === */ @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); } /* === Clases en Vivo Floating Button Pulse === */ @keyframes pulseClasesVivo { 0%,100%{transform:scale(1);box-shadow:0 4px 20px rgba(139,92,246,0.5);} 50%{transform:scale(1.08);box-shadow:0 6px 30px rgba(139,92,246,0.7);} } /* === HVAC Pulse === */ @keyframes hvacPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.3);}} /* === MENU BTN V2 === */ .menu-btn-v2 { display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border:none;border-radius:12px; cursor:pointer;text-decoration:none;color:white;font-size:14px;font-weight:700; margin-bottom:6px;transition:all 0.2s ease;position:relative;overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.12);letter-spacing:0.2px; } .menu-btn-v2:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,0.2); } .menu-btn-v2:active { transform:translateY(0); } .menu-btn-v2 .btn-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:18px;background:rgba(255,255,255,0.15);flex-shrink:0; } .menu-btn-v2 .btn-text { flex:1; } .menu-btn-v2 .btn-arrow { font-size:14px;opacity:0.5; } /* === VEGAS/CRM ANIMATIONS === */ @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)}} /* === TECH CHAT === */ /* === iOS SAFE AREA INSETS === */ #techChatScreen #chatHeader { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); } .notif-bell-container { top: calc(70px + env(safe-area-inset-top, 0px)) !important; right: calc(15px + env(safe-area-inset-right, 0px)) !important; } .notif-panel { top: calc(70px + env(safe-area-inset-top, 0px)) !important; right: calc(10px + env(safe-area-inset-right, 0px)) !important; } #techChatScreen { background:#0f172a;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;box-sizing:border-box; } #techChatScreen.active { padding:0 !important;background:#0f172a !important; } @media(max-width:768px){ #techChatScreen.active { padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)) !important; } } #techChatScreen #chatTextInput:focus { border-color:#0ea5e9;box-shadow:0 0 0 2px rgba(14,165,233,0.2); } #techChatScreen #chatSendBtn:active { transform:scale(0.9); } #techChatScreen #chatSendBtn:disabled { opacity:0.5; } #sugerenciasScreen { background:#0f172a;flex-direction:column;height:100vh;overflow:hidden; } #sugerenciasScreen.active { padding:0 !important;background:#0f172a !important; } #sugerenciasScreen #sugerenciaText:focus { border-color:#8b5cf6;box-shadow:0 0 0 2px rgba(139,92,246,0.2); } /* === VIDEO TUTORIALES — Student Library + Paywall === */ #videoTutorialesScreen { background:#0f172a;min-height:100vh; } #videoTutorialesScreen.active { padding:0 !important; } /* Back button */ .vt-back-btn { position:absolute;top:12px;left:12px;width:40px;height:40px;background:#E8591C;border:none;color:#fff;font-size:22px;font-weight:800;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(232,89,28,0.35);-webkit-tap-highlight-color:transparent;z-index:5; } .vt-back-btn:hover { background:#D14F18; } /* Library */ .vt-library { padding:16px;max-width:800px;margin:0 auto; } .vt-lib-header { display:flex;align-items:center;gap:12px;margin-bottom:16px; } .vt-lib-header .vt-back-btn { position:static;flex-shrink:0; } .vt-lib-title { font-size:20px;font-weight:800;color:#0F0F0F;margin:0; } .vt-search-wrap { margin-bottom:14px; } .vt-search { width:100%;padding:10px 14px;border-radius:10px;border:1px solid #E7E5DE;background:#FFFFFF;color:#0F0F0F;font-size:14px;outline:none;box-sizing:border-box; } .vt-search:focus { border-color:#E8591C;box-shadow:0 0 0 2px rgba(232,89,28,0.15); } .vt-search::placeholder { color:#6B6B66; } /* Category tabs */ .vt-cat-tabs { display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:16px;-webkit-overflow-scrolling:touch; } .vt-cat-tabs::-webkit-scrollbar { height:0; } .vt-cat-tab { white-space:nowrap;padding:7px 14px;border-radius:20px;border:1px solid #E7E5DE;background:#FFFFFF;color:#6B6B66;font-size:13px;font-weight:500;cursor:pointer;flex-shrink:0;transition:all .2s; } .vt-cat-tab.active { background:#E8591C;color:#fff;border-color:#E8591C; } .vt-cat-tab:hover { color:#0F0F0F; } /* Video grid */ .vt-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px; } /* Video card */ .vt-card { background:#FFFFFF;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid #E7E5DE;box-shadow:0 1px 2px rgba(17,17,17,0.04),0 8px 24px -8px rgba(17,17,17,0.08); } .vt-card:hover { transform:translateY(-3px);box-shadow:0 2px 4px rgba(17,17,17,0.06),0 12px 28px -8px rgba(17,17,17,0.12); } .vt-card-thumb { height:130px;background:#FAFAF7;background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center; } .vt-card-play-icon { font-size:32px;color:rgba(255,255,255,0.9);text-shadow:0 2px 8px rgba(0,0,0,0.4); } .vt-card-dur { position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.7);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px; } .vt-card-body { padding:12px; } .vt-card-title { font-size:14px;font-weight:700;color:#0F0F0F;margin-bottom:6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .vt-card-badge { display:inline-block;font-size:11px;color:#6B6B66;background:#FAFAF7;padding:2px 8px;border-radius:6px; } .vt-card-progress { height:3px;background:#E7E5DE;border-radius:2px;margin-top:8px;overflow:hidden; } .vt-card-progress-fill { height:100%;background:#E8591C;border-radius:2px;transition:width .3s; } /* Player overlay */ .vt-player-overlay { position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center; } .vt-player-container { width:100%;max-width:900px;padding:20px;position:relative; } .vt-player-close { position:absolute;top:-10px;right:0;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;z-index:2;padding:8px; } .vt-player-close:hover { color:#f87171; } .vt-player-wrap { position:relative;border-radius:12px;overflow:hidden;background:#000; } .vt-player-wrap video { width:100%;display:block;border-radius:12px; } .vt-player-title { color:#e2e8f0;font-size:16px;font-weight:700;margin-top:14px;text-align:center; } /* Watermarks */ .vt-watermark-br { position:absolute;bottom:42px;right:14px;color:rgba(255,255,255,0.35);font-size:18px;font-weight:900;letter-spacing:3px;pointer-events:none;user-select:none;z-index:3;text-shadow:1px 1px 2px rgba(0,0,0,0.3); } .vt-watermark-center { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-25deg);color:rgba(255,255,255,0.06);font-size:80px;font-weight:900;letter-spacing:12px;pointer-events:none;user-select:none;z-index:3;white-space:nowrap; } /* Mobile */ @media(max-width:600px) { .vt-grid { grid-template-columns:1fr; } .vt-price-amount { font-size:34px; } .vt-watermark-center { font-size:50px;letter-spacing:8px; } .vt-player-container { padding:10px; } .vt-bubble-grid { grid-template-columns:repeat(2,1fr) !important; } .vt-series-header { flex-wrap:wrap; } } @media(max-width:380px) { .vt-bubble-grid { grid-template-columns:1fr !important; } } /* === VIDEO TUTORIAL BUBBLE SYSTEM === */ .vt-series-stats { display:flex;gap:10px;padding:0 16px 12px;justify-content:center; } .vt-global-stat { flex:1;background:#FFFFFF;border:1px solid #E7E5DE;border-radius:12px;padding:14px 10px;text-align:center;box-shadow:0 1px 2px rgba(17,17,17,0.04),0 8px 24px -8px rgba(17,17,17,0.08); } .vt-global-stat-val { color:#E8591C;font-size:20px;font-weight:800; } .vt-global-stat-label { color:#6B6B66;font-size:11px;font-weight:500;margin-top:2px; } .vt-bubble-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:0 16px 20px; } .vt-bubble-card { background:#FFFFFF;border-radius:14px;padding:20px;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid #E7E5DE;box-shadow:0 1px 2px rgba(17,17,17,0.04),0 8px 24px -8px rgba(17,17,17,0.08); } .vt-bubble-card:hover { transform:translateY(-3px);box-shadow:0 2px 4px rgba(17,17,17,0.06),0 12px 28px -8px rgba(17,17,17,0.12);border-color:#E8591C; } .vt-bubble-emoji { font-size:36px;margin-bottom:8px; } .vt-bubble-name { color:#0F0F0F;font-size:16px;font-weight:700;margin-bottom:4px; } .vt-bubble-meta { color:#6B6B66;font-size:13px;font-weight:500;margin-bottom:10px; } .vt-bubble-progress-bar { background:#E7E5DE;border-radius:4px;height:6px;overflow:hidden; } .vt-bubble-progress-fill { height:100%;border-radius:4px;background:linear-gradient(90deg,#E8591C,#D14F18);transition:width .3s; } .vt-bubble-cert { font-size:12px;font-weight:600;margin-top:10px;padding:4px 0; } .vt-bubble-cert--earned { color:#059669; } .vt-bubble-cert--progress { color:#E8591C; } .vt-bubble-cert--locked { color:#6B6B66; } .vt-series-header { display:flex;align-items:center;gap:10px;padding:0 16px 14px; } .vt-series-progress-card { background:#FFFFFF;border-radius:14px;padding:18px;margin:0 16px 16px;border:1px solid #E7E5DE;box-shadow:0 1px 2px rgba(17,17,17,0.04),0 8px 24px -8px rgba(17,17,17,0.08); } .vt-series-list { padding:0 16px 16px; } .vt-list-item { display:flex;align-items:flex-start;gap:12px;background:#FFFFFF;border-radius:12px;padding:14px;margin-bottom:8px;border:1px solid #E7E5DE;transition:border-color .2s; } .vt-list-item:hover { border-color:#E8591C; } .vt-list-status { min-width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold;flex-shrink:0; } .vt-list-status--pending { background:#FAFAF7;border:2px solid #E7E5DE;color:#6B6B66; } .vt-list-status--done { background:#D1FAE5;border:2px solid #059669;color:#059669; } .vt-list-status--locked { background:#FAFAF7;border:2px solid #E7E5DE;color:#6B6B66;font-size:14px; } .vt-list-item-body { flex:1;min-width:0; } .vt-list-item-title { color:#0F0F0F;font-size:14px;font-weight:600;margin-bottom:4px; } .vt-list-quiz { padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600; } .vt-list-quiz--passed { background:#D1FAE5;color:#065F46; } .vt-list-quiz--pending { background:#DBEAFE;color:#1E40AF; } .vt-series-cert { text-align:center;padding:24px 16px;margin:0 16px 20px;border-radius:14px; } .vt-series-cert--earned { background:linear-gradient(135deg,#FFF7ED,#FEF3C7);border:2px solid #FFD700; } .vt-series-cert--locked { background:#FAFAF7;border:1px solid #E7E5DE; } /* === STICKY NAV BARS === */ .sticky-nav-bar { position: sticky; top: 0; z-index: 50; padding: 10px 16px; display: flex; align-items: center; min-height: 44px; /* Apple translucent bar — saturate boosts color behind, blur diffuses */ backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .sticky-nav-bar--light { background: rgba(250,250,247,0.78); border-bottom: 1px solid rgba(17,17,17,0.06); } .sticky-nav-bar--light .nav-bar-title { margin-left: 12px; font-weight: 600; color: #111111; font-size: 17px; letter-spacing: -0.2px; } .sticky-nav-bar--dark { background: rgba(10,22,40,0.72); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 10px 16px; } .sticky-nav-bar--dark .nav-bar-title { margin-left: 12px; font-weight: 600; color: #f0f4fa; font-size: 17px; letter-spacing: -0.2px; } .sticky-nav-bar--gradient { justify-content: space-between; border-bottom: 2px solid rgba(255,255,255,0.2); } .sticky-nav-bar--gradient .nav-bar-title { color: #fff; font-weight: bold; font-size: 14px; } .btn-nav-back { background: #F3F1EA; border: 1px solid #E7E5DE; color: #0F0F0F; padding: 8px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; font-weight: 600; letter-spacing: -0.005em; transition: background 140ms ease, transform 90ms cubic-bezier(0.32,0.72,0,1); } .btn-nav-back:active { transform: scale(0.97); background: #E7E5DE; } .btn-nav-back--dark { background: rgba(255,255,255,0.15); color: #f0f4fa; } .btn-nav-back--transparent { background: rgba(255,255,255,0.2); color: #fff; } /* ====== SOPORTE TÉCNICO ====== */ #soporteTecnicoScreen{--bg-card:rgba(255,255,255,0.08);--border-color:rgba(255,255,255,0.18);--accent-color:#FF6B35;--text-primary:#e8eef8;--text-secondary:rgba(210,225,245,0.92);--text-muted:rgba(195,215,240,0.82)} #soporteTecnicoScreen{overflow-x:hidden} .soporte-container{padding:0 16px 100px;max-width:700px;margin:0 auto;width:100%;min-width:0} .soporte-search-box{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:12px 16px;margin-bottom:16px} .soporte-search-input{flex:1;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:14px} .soporte-search-input::placeholder{color:var(--text-muted)} .soporte-tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .soporte-tabs::-webkit-scrollbar{display:none} .soporte-tab{flex-shrink:0;padding:8px 16px;border-radius:20px;border:1px solid var(--border-color);background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;transition:all 0.2s;white-space:nowrap} .soporte-tab.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff;font-weight:600} .soporte-cases-grid{display:flex;flex-direction:column;gap:16px} .soporte-case-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:16px;position:relative} .soporte-case-card.coming-soon{border-style:dashed;opacity:.7} .case-brand-badge{position:absolute;top:12px;right:12px;background:var(--accent-color);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:1px} .case-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px} .case-icon{font-size:28px;line-height:1} .case-title{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 4px} .case-model{font-size:12px;color:var(--text-muted);margin:0} .case-difficulty{margin-left:auto;font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600} .case-difficulty.expert{background:rgba(255,59,48,.15);color:#ff3b30} .case-symptom,.case-cause,.case-part{font-size:13px;color:var(--text-secondary);margin-bottom:8px;line-height:1.5} .case-symptom .label,.case-cause .label,.case-part .label{font-weight:700;color:var(--text-primary)} .case-lesson{background:rgba(255,107,53,.08);border-left:3px solid var(--accent-color);border-radius:0 8px 8px 0;padding:10px 12px;font-size:13px;color:var(--text-secondary);margin:12px 0;line-height:1.5} .case-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap;gap:8px} .case-btn-quiz{background:var(--accent-color);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .2s} .case-btn-quiz:hover{opacity:.85} .case-source{font-size:11px;color:var(--text-muted)} .soporte-coming-soon{text-align:center;padding:60px 20px;color:var(--text-muted)} .coming-icon{font-size:48px;margin-bottom:16px} .soporte-coming-soon h3{color:var(--text-primary);margin-bottom:8px} .soporte-coming-soon p{font-size:14px;margin-bottom:20px} .coming-brands{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .coming-brands span{padding:4px 12px;border:1px solid var(--border-color);border-radius:20px;font-size:12px} /* --- Student Soporte Tabs & Forms --- */ .sop-tabs-bar{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .sop-tabs-bar::-webkit-scrollbar{display:none} .sop-tab{flex-shrink:0;padding:8px 16px;border-radius:20px;border:1px solid var(--border-color);background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;transition:all 0.2s;white-space:nowrap} .sop-tab.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff;font-weight:600} .sop-section-title{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 12px} .sop-premium-card{background:linear-gradient(135deg,rgba(255,180,0,.12),rgba(255,107,53,.12));border:2px solid rgba(255,180,0,.35);border-radius:16px;padding:20px;margin-bottom:24px} .sop-premium-header{display:flex;align-items:center;gap:12px;margin-bottom:8px} .sop-premium-price{font-size:28px;font-weight:800;color:#fbbf24} .sop-premium-label{font-size:15px;font-weight:700;color:var(--text-primary)} .sop-premium-desc{font-size:13px;color:var(--text-secondary);margin-bottom:14px;line-height:1.5} .sop-premium-btn{display:inline-block;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-weight:700;font-size:14px;padding:10px 24px;border-radius:10px;text-decoration:none;transition:opacity .2s} .sop-premium-btn:hover{opacity:.85} .sop-ticket-form{display:flex;flex-direction:column;gap:12px} .sop-field{display:flex;flex-direction:column;gap:4px} .sop-field label{font-size:12px;font-weight:600;color:var(--text-secondary)} .sop-field input,.sop-field select,.sop-field textarea{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:10px 12px;color:var(--text-primary);font-size:14px;outline:none;transition:border-color .2s} .sop-field input:focus,.sop-field select:focus,.sop-field textarea:focus{border-color:var(--accent-color)} .sop-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .sop-req{color:#f87171} .sop-submit-btn{background:var(--accent-color);color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s} .sop-submit-btn:hover{opacity:.85} .sop-submit-btn:disabled{opacity:.5;cursor:not-allowed} .sop-form-msg{font-size:13px;text-align:center;margin-top:4px} .sop-diag-toggle{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(243,156,18,.1),rgba(243,156,18,.05));border:1px solid rgba(243,156,18,.3);border-radius:10px;padding:12px 16px;cursor:pointer;transition:background .2s;user-select:none} .sop-diag-toggle:hover{background:linear-gradient(135deg,rgba(243,156,18,.18),rgba(243,156,18,.1))} .sop-diag-toggle span:first-child{font-size:14px;font-weight:700;color:#f39c12} .sop-diag-arrow{font-size:12px;color:#f39c12;transition:transform .2s} .sop-diag-fields{display:flex;flex-direction:column;gap:12px;padding:16px;background:rgba(243,156,18,.04);border:1px solid rgba(243,156,18,.15);border-radius:0 0 10px 10px;margin-top:-2px} .sop-diag-subtitle{font-size:12px;font-weight:800;color:#f39c12;text-transform:uppercase;letter-spacing:1px;margin-top:8px;padding-bottom:4px;border-bottom:1px solid rgba(243,156,18,.2)} .sop-loading{text-align:center;color:var(--text-muted);padding:30px 0} .sop-tickets-list{display:flex;flex-direction:column;gap:12px} .sop-ticket-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:14px} .sop-ticket-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .sop-ticket-subject{font-size:14px;font-weight:700;color:var(--text-primary)} .sop-ticket-meta{font-size:12px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center} .sop-brand-pill{background:rgba(255,107,53,.15);color:var(--accent-color);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600} .sop-ticket-date{color:var(--text-muted)} .sop-ticket-desc{font-size:13px;color:var(--text-secondary);line-height:1.5;margin:6px 0} .sop-ticket-attachments{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0} .sop-attachment-link{color:var(--accent-color);font-size:12px;text-decoration:none} .sop-attachment-link:hover{text-decoration:underline} .sop-admin-response{background:rgba(34,197,94,.08);border-left:3px solid #22c55e;border-radius:0 8px 8px 0;padding:10px 12px;margin-top:8px} .sop-admin-response-label{font-size:11px;font-weight:700;color:#22c55e;margin-bottom:4px} .sop-admin-response-text{font-size:13px;color:var(--text-secondary);line-height:1.5} .sop-admin-response-date{font-size:11px;color:var(--text-muted);margin-top:4px} .sop-status-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:700} .sop-empty-state{text-align:center;padding:40px 16px;color:var(--text-muted)} /* --- Video Cards --- */ .sop-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center} .sop-filter-bar input,.sop-filter-bar select{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:7px 12px;color:var(--text-primary);font-size:13px;outline:none} .sop-filter-pill{padding:5px 14px;border-radius:20px;border:1px solid var(--border-color);background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer;transition:all .2s} .sop-filter-pill.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff} .sop-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} .sop-video-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .2s} .sop-video-card:hover{border-color:var(--accent-color)} .sop-video-thumb{position:relative;width:100%;padding-top:56.25%;background:#0a0e14;overflow:hidden} .sop-video-thumb-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} .sop-video-thumb-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)} .sop-video-duration{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.75);color:#fff;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:600} .sop-gated-badge{position:absolute;top:6px;left:6px;background:rgba(245,158,11,.9);color:#fff;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700} .sop-video-info{padding:10px 12px} .sop-video-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sop-video-brand{font-size:11px;color:var(--accent-color);font-weight:600} .sop-video-desc{font-size:12px;color:var(--text-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* --- Filter Bar --- */ .sop-filter-pills{display:flex;gap:6px;flex-wrap:wrap} .sop-pill{flex-shrink:0;padding:5px 14px;border-radius:20px;border:1px solid var(--border-color);background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer;transition:all .2s} .sop-pill.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff} .sop-filter-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .sop-filter-search{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:7px 12px;color:var(--text-primary);font-size:13px;outline:none;min-width:140px} .sop-filter-search::placeholder{color:var(--text-muted)} .sop-filter-cat{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:7px 12px;color:var(--text-primary);font-size:13px;outline:none} /* --- Cases Search --- */ .sop-cases-search{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:10px 14px;margin-bottom:16px} .sop-cases-search-input{flex:1;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:14px} .sop-cases-search-input::placeholder{color:var(--text-muted)} /* --- Manual Cards --- */ .sop-manual-group{margin-bottom:24px} .sop-manual-brand-group{margin-bottom:20px} .sop-manual-brand-header{font-size:14px;font-weight:700;color:var(--accent-color);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border-color)} .sop-manual-group-title{font-size:14px;font-weight:700;color:var(--accent-color);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border-color)} .sop-manual-card{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .2s;margin-bottom:8px} .sop-manual-card:hover{border-color:var(--accent-color)} .sop-manual-icon{font-size:28px;flex-shrink:0} .sop-manual-info{flex:1;min-width:0} .sop-manual-title{font-size:14px;font-weight:700;color:var(--text-primary)} .sop-manual-desc{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sop-manual-badges{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap} .sop-manual-badges span{font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--text-muted);border:1px solid var(--border-color)} .sop-cat-badge{font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--text-muted);border:1px solid var(--border-color)} .sop-gated-badge-sm{font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3)} .sop-manual-arrow{flex-shrink:0;color:var(--text-muted);font-size:16px;opacity:.5} .case-info{flex:1;min-width:0} /* --- CRM Soporte Admin --- */ .sa-container{padding:16px} .sa-header{margin-bottom:16px} .sa-title{font-size:20px;font-weight:800;color:#1a1d21;margin:0} .sa-tabs{display:flex;gap:8px;margin-bottom:20px} .sa-tab{padding:8px 20px;border-radius:8px;border:1px solid #e3e7ee;background:#fff;color:#6b7280;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s} .sa-tab.active{background:#16803c;border-color:#16803c;color:#fff} .sa-stats{display:flex;gap:12px;margin-bottom:16px} .sa-stat{background:#f7f7f5;border:1px solid #e3e7ee;border-radius:10px;padding:12px 16px;text-align:center;flex:1} .sa-stat-val{font-size:22px;font-weight:800} .sa-stat-label{font-size:11px;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.5px} .sa-ticket-list{display:flex;flex-direction:column;gap:10px} .sa-ticket-card{background:#fff;border:1px solid #e3e7ee;border-radius:10px;overflow:hidden} .sa-ticket-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;cursor:pointer;transition:background .15s} .sa-ticket-header:hover{background:#f7f7f5} .sa-ticket-left{flex:1;min-width:0} .sa-ticket-right{display:flex;align-items:center;gap:8px} .sa-badge{display:inline-block;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700;text-transform:capitalize} .sa-ticket-body{padding:16px;border-top:1px solid #e3e7ee;background:#fafaf9} .sa-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .sa-upload-btn{background:#16803c;color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer} .sa-upload-btn:hover{background:#15703a} .sa-grid-table{border:1px solid #e3e7ee;border-radius:10px;overflow:hidden} .sa-grid-row{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid #f0f0ee} .sa-grid-row:last-child{border-bottom:none} .sa-grid-header{background:#f7f7f5;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px} .sa-grid-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#1a1d21} .sa-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px} .sa-modal{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15)} .sa-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e3e7ee} .sa-modal-body{padding:20px} .sa-modal-footer{padding:16px 20px;border-top:1px solid #e3e7ee;display:flex;justify-content:flex-end;gap:8px} .sa-label{font-size:12px;font-weight:600;color:#6b7280;margin-bottom:4px;display:block;margin-top:10px} .sa-input{width:100%;background:#fff;border:1px solid #e3e7ee;border-radius:8px;padding:9px 12px;font-size:13px;color:#1a1d21;outline:none;box-sizing:border-box;transition:border-color .2s} .sa-input:focus{border-color:#16803c} .sa-dropzone{border:2px dashed #e3e7ee;border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s;color:#94a3b8;font-size:13px} .sa-dropzone.sa-dragover,.sa-dropzone:hover{border-color:#16803c;color:#16803c} .sa-progress-wrap{margin-top:10px;display:none} .sa-progress-bar{height:6px;border-radius:3px;background:#e3e7ee;overflow:hidden} .sa-progress-fill{height:100%;background:#16803c;border-radius:3px;width:0;transition:width .3s} .sa-action-btn{border:none;background:none;cursor:pointer;font-size:14px;padding:4px;border-radius:4px;transition:background .15s} .sa-action-btn:hover{background:#f0f0ee} .sa-empty{text-align:center;color:#94a3b8;padding:40px 16px} .sa-expanded .sa-ticket-header{background:#f7f7f5} .sa-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:12px} .sa-video-card{background:#fff;border:1px solid #e3e7ee;border-radius:10px;overflow:hidden;transition:box-shadow .15s} .sa-video-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)} .sa-video-thumb{position:relative;width:100%;padding-top:56.25%;background:#f0f0ee;overflow:hidden} .sa-video-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} .sa-thumb-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:32px;color:#94a3b8} .sa-video-duration{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.7);color:#fff;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:600} .sa-video-info{padding:10px 12px} .sa-video-info h4{font-size:13px;font-weight:700;color:#1a1d21;margin:0 0 4px} .sa-video-info p{font-size:12px;color:#6b7280;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sa-video-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px} .sa-video-badges .sa-badge{font-size:10px;padding:2px 6px} .sa-video-actions{display:flex;gap:4px;padding:8px 12px;border-top:1px solid #f0f0ee} .sa-video-actions button{flex:1;border:1px solid #e3e7ee;background:#fff;border-radius:6px;padding:5px 0;font-size:11px;cursor:pointer;transition:background .15s} .sa-video-actions button:hover{background:#f7f7f5} @media(max-width:600px){.sop-field-row{grid-template-columns:1fr}.sop-video-grid{grid-template-columns:1fr 1fr}.sa-stats{flex-wrap:wrap}.sa-grid-table{font-size:12px}} @media(max-width:400px){.sop-video-grid{grid-template-columns:1fr}} /* ====== /SOPORTE TÉCNICO ====== */ /* ====== SOPORTE AI MARIO MINI-CHAT ====== */ .sop-ai-circle-header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px;padding:20px 0} .sop-ai-circle-avatar{position:relative;width:90px;height:90px;border-radius:50%;overflow:visible;animation:sopAiFloat 3s ease-in-out infinite} @keyframes sopAiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .sop-ai-circle-avatar::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;border-top-color:#f39c12;border-right-color:#f39c12;animation:sopAiSpin 2s linear infinite;pointer-events:none} @keyframes sopAiSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} .sop-ai-circle-avatar img{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #f39c12;box-shadow:0 0 20px rgba(243,156,18,0.4),0 0 0 6px rgba(243,156,18,0.12)} .sop-ai-circle-ai-badge{position:absolute;bottom:2px;right:2px;background:#6366f1;color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:8px;border:2px solid #0f172a;z-index:1} .sop-ai-circle-name{font-size:18px;font-weight:800;color:var(--text-primary);text-align:center} .sop-ai-header{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12));border:1px solid rgba(99,102,241,.3);border-radius:16px;padding:16px;margin-bottom:16px} .sop-ai-avatar{width:56px;height:56px;border-radius:14px;object-fit:cover;border:2px solid rgba(99,102,241,.4);flex-shrink:0} .sop-ai-info{flex:1;min-width:0} .sop-ai-name{font-size:16px;font-weight:800;color:var(--text-primary);margin:0 0 2px} .sop-ai-subtitle{font-size:12px;color:var(--text-secondary);margin:0} .sop-ai-badge{display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700;margin-top:4px} .sop-ai-badge.unlimited{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)} .sop-ai-badge.limited{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3)} .sop-ai-chat-wrap{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;overflow:hidden;margin-bottom:16px;min-width:0;max-width:100%} .sop-ai-messages{min-height:300px;max-height:400px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px} .sop-ai-msg{display:flex;gap:8px;align-items:flex-start;max-width:90%} .sop-ai-msg.user{align-self:flex-end;flex-direction:row-reverse} .sop-ai-msg-avatar{width:28px;height:28px;border-radius:8px;flex-shrink:0;overflow:hidden} .sop-ai-msg-avatar img{width:100%;height:100%;object-fit:cover} .sop-ai-msg-bubble{padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.55;color:var(--text-primary);word-break:break-word} .sop-ai-msg.assistant .sop-ai-msg-bubble{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2)} .sop-ai-msg.user .sop-ai-msg-bubble{background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.25)} .sop-ai-msg-bubble strong{color:var(--accent-color)} .sop-ai-msg-bubble code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-size:12px} .sop-ai-typing{display:flex;gap:4px;align-items:center;padding:10px 14px} .sop-ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:sopAiDot 1.2s infinite} .sop-ai-typing span:nth-child(2){animation-delay:.2s} .sop-ai-typing span:nth-child(3){animation-delay:.4s} @keyframes sopAiDot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}} .sop-ai-input-bar{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border-color);background:rgba(0,0,0,.15)} .sop-ai-input{flex:1;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:10px 14px;color:var(--text-primary);font-size:14px;outline:none;resize:none;min-height:40px;max-height:80px;font-family:inherit} .sop-ai-input::placeholder{color:var(--text-muted)} .sop-ai-input:focus{border-color:rgba(99,102,241,.5)} .sop-ai-send-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s;flex-shrink:0} .sop-ai-send-btn:hover{opacity:.85} .sop-ai-send-btn:disabled{opacity:.4;cursor:not-allowed} .sop-ai-actions{display:flex;gap:10px;margin-bottom:16px} .sop-ai-fullscreen-btn{background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.15));border:1px solid rgba(99,102,241,.3);color:var(--text-primary);padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;flex:1;text-align:center} .sop-ai-fullscreen-btn:hover{background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(139,92,246,.25))} /* ====== SOPORTE TIMER MODAL ====== */ .sop-timer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px} .sop-timer-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #22c55e;border-radius:20px;padding:32px;max-width:400px;width:100%;text-align:center} .sop-timer-display{font-size:56px;font-weight:800;font-variant-numeric:tabular-nums;color:#22c55e;margin:16px 0;font-family:'SF Mono',Consolas,monospace;text-shadow:0 0 20px rgba(34,197,94,.3)} .sop-timer-min{font-size:13px;color:#94a3b8;margin-bottom:20px} .sop-timer-wa-btn{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;border:none;border-radius:12px;padding:14px 28px;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:12px;transition:opacity .2s;text-decoration:none} .sop-timer-wa-btn:hover{opacity:.85} .sop-timer-end-btn{display:block;margin:0 auto;background:transparent;color:#f87171;border:1px solid #f87171;border-radius:10px;padding:10px 24px;font-size:13px;cursor:pointer;transition:all .2s} .sop-timer-end-btn:hover{background:rgba(248,113,113,.1)} /* ====== SOPORTE LIVE CARD ($300) ====== */ .sop-live-card{background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(16,185,129,.08));border:2px solid rgba(34,197,94,.3);border-radius:16px;padding:20px;margin-bottom:24px} .sop-live-header{display:flex;align-items:center;gap:14px;margin-bottom:10px} .sop-live-price{font-size:32px;font-weight:800;color:#22c55e} .sop-live-info h4{font-size:15px;font-weight:700;color:var(--text-primary);margin:0 0 2px} .sop-live-info p{font-size:13px;color:var(--text-secondary);margin:0} .sop-live-btn{display:block;width:100%;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s;text-align:center} .sop-live-btn:hover{opacity:.85} /* ====== SOPORTE CONFIRM MODAL ====== */ .sop-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px} .sop-confirm-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(34,197,94,.4);border-radius:20px;padding:28px;max-width:400px;width:100%;text-align:center} .sop-confirm-modal h3{color:var(--text-primary);margin:0 0 12px;font-size:18px} .sop-confirm-modal p{color:#94a3b8;font-size:13px;margin:0 0 20px;line-height:1.6} .sop-confirm-modal .sop-live-btn{margin-bottom:10px} .sop-confirm-yapague{display:block;width:100%;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:10px;padding:12px;font-size:13px;cursor:pointer;transition:all .2s;margin-bottom:8px} .sop-confirm-yapague:hover{border-color:#22c55e;color:#22c55e} .sop-confirm-cancel{display:block;width:100%;background:transparent;color:var(--text-muted);border:none;padding:8px;font-size:12px;cursor:pointer} @media(max-width:600px){.sop-timer-display{font-size:42px}.sop-ai-messages{min-height:240px;max-height:340px}} /* ====== SOPORTE DROPZONE + UPLOAD PREVIEWS ====== */ #soporteTecnicoScreen .sop-section-toggle{display:flex !important;align-items:center;gap:10px;width:100%;background:linear-gradient(135deg,rgba(255,107,53,.15),rgba(255,122,26,.10));border:1px solid rgba(255,107,53,.35) !important;border-radius:12px;padding:14px 18px !important;cursor:pointer;transition:all .2s;margin-bottom:16px;min-height:50px;box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit} #soporteTecnicoScreen .sop-section-toggle:hover{border-color:rgba(255,107,53,.55) !important;background:linear-gradient(135deg,rgba(255,107,53,.22),rgba(255,122,26,.15))} #soporteTecnicoScreen .sop-section-toggle .sop-toggle-icon{font-size:20px;flex-shrink:0;line-height:1} #soporteTecnicoScreen .sop-section-toggle .sop-toggle-label{font-size:15px;font-weight:700;color:#f0f4fa;flex:1;text-align:left} #soporteTecnicoScreen .sop-section-toggle .sop-toggle-arrow{color:rgba(180,200,230,0.5);transition:transform .2s;font-size:12px} #soporteTecnicoScreen .sop-section-toggle.open .sop-toggle-arrow{transform:rotate(180deg)} #soporteTecnicoScreen .sop-collapse-body{max-height:0;overflow:hidden;transition:max-height .35s ease} #soporteTecnicoScreen .sop-collapse-body.open{max-height:2000px} #soporteTecnicoScreen .sop-form-group{margin-bottom:14px} #soporteTecnicoScreen .sop-form-group label{display:block !important;font-size:12px;font-weight:600;color:rgba(180,200,230,0.75);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px} #soporteTecnicoScreen .sop-form-group input,#soporteTecnicoScreen .sop-form-group textarea{width:100%;background:rgba(255,255,255,0.06) !important;border:1px solid rgba(255,255,255,0.1) !important;border-radius:10px;padding:10px 14px;color:#d0d8e8 !important;font-size:14px;outline:none;font-family:inherit;box-sizing:border-box} #soporteTecnicoScreen .sop-form-group input::placeholder,#soporteTecnicoScreen .sop-form-group textarea::placeholder{color:rgba(140,170,210,0.35)} #soporteTecnicoScreen .sop-form-group input:focus,#soporteTecnicoScreen .sop-form-group textarea:focus{border-color:rgba(255,107,53,.5) !important} #soporteTecnicoScreen .sop-form-group textarea{min-height:70px;resize:vertical} #soporteTecnicoScreen .sop-form-row{display:flex;gap:12px} #soporteTecnicoScreen .sop-form-row .sop-form-group{flex:1} @media(max-width:500px){#soporteTecnicoScreen .sop-form-row{flex-direction:column}} #soporteTecnicoScreen .sop-dropzone{border:2px dashed rgba(255,107,53,.3);border-radius:12px;padding:28px 16px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(255,107,53,.03)} #soporteTecnicoScreen .sop-dropzone:hover,#soporteTecnicoScreen .sop-dropzone.dragover{border-color:rgba(255,107,53,.6);background:rgba(255,107,53,.08)} #soporteTecnicoScreen .sop-dropzone-icon{font-size:28px;margin-bottom:6px} #soporteTecnicoScreen .sop-dropzone-text{font-size:13px;color:rgba(180,200,230,0.75)} #soporteTecnicoScreen .sop-dropzone-hint{font-size:11px;color:rgba(160,185,220,0.55);margin-top:4px} .sop-file-previews{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .sop-file-preview{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.06)} .sop-file-preview img{width:100%;height:100%;object-fit:cover} .sop-file-preview .sop-fp-name{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:#fff;font-size:9px;padding:2px 4px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap} .sop-file-preview .sop-fp-remove{position:absolute;top:2px;right:2px;width:18px;height:18px;background:rgba(220,53,69,.9);color:#fff;border:none;border-radius:50%;font-size:11px;line-height:18px;text-align:center;cursor:pointer;padding:0} #soporteTecnicoScreen .sop-form-submit{width:100%;background:linear-gradient(135deg,#FF5B1A,#FF7A1A) !important;color:#fff !important;border:none !important;border-radius:12px;padding:14px !important;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s;margin-top:8px;-webkit-appearance:none;appearance:none;font-family:inherit} #soporteTecnicoScreen .sop-form-submit:hover{opacity:.88} #soporteTecnicoScreen .sop-form-submit:disabled{opacity:.4;cursor:not-allowed} .sop-success-msg{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:10px;padding:12px 16px;color:#22c55e;font-size:13px;font-weight:600;text-align:center;margin-top:12px} /* ====== SOPORTE DIAGRAMAS GRID ====== */ .sop-diagrama-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} @media(max-width:500px){.sop-diagrama-grid{grid-template-columns:1fr 1fr}} .sop-diagrama-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .2s} .sop-diagrama-card:hover{border-color:rgba(255,107,53,.4);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.2)} .sop-diagrama-thumb{width:100%;height:120px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden} .sop-diagrama-thumb img{width:100%;height:100%;object-fit:cover} .sop-diagrama-thumb svg{opacity:.4} .sop-diagrama-body{padding:10px 12px 12px} .sop-diagrama-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:4px;line-height:1.3} .sop-diagrama-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} .sop-diagrama-cat{font-size:10px;font-weight:600;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px} .sop-diagrama-cat.wiring{background:rgba(99,102,241,.15);color:#818cf8} .sop-diagrama-cat.control{background:rgba(245,158,11,.15);color:#fbbf24} .sop-diagrama-cat.power{background:rgba(239,68,68,.15);color:#f87171} /* ====== /SOPORTE DROPZONE + DIAGRAMAS ====== */ /* ====== /SOPORTE AI + TIMER ====== */ /* ============================================================ OLA 1 — PREMIUM TYPOGRAPHY & COLOR BASELINE (v6.07+) SF Pro + warm canvas + tabular numerals + legibility floor ============================================================ */ /* Apple-native font everywhere in the app, overriding legacy Plus Jakarta */ #mainAppFrame, #mainAppFrame * { font-family: var(--font-system, -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif); } /* Premium system defaults — kick in when no override wins */ #mainAppFrame { font-feature-settings: "tnum" on, "ss01" on; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; } /* Screen titles: SF Pro Display cadence */ #mainAppFrame .screen h1:not([style*="font-size"]) { font-size: 28px; line-height: 34px; letter-spacing: -0.4px; font-weight: 700; } #mainAppFrame .screen h2:not([style*="font-size"]) { font-size: 22px; line-height: 28px; letter-spacing: -0.3px; font-weight: 700; } #mainAppFrame .screen h3:not([style*="font-size"]) { font-size: 17px; line-height: 22px; letter-spacing: -0.2px; font-weight: 600; } /* Body — never below 14px */ #mainAppFrame .screen p:not([style*="font-size"]), #mainAppFrame .screen li:not([style*="font-size"]) { font-size: 15px; line-height: 22px; letter-spacing: -0.15px; } /* Every numeric value/metric/sensor reading gets tabular-nums + SF Rounded */ #mainAppFrame .tnum, #mainAppFrame .sensor-value, #mainAppFrame .metric-value, #mainAppFrame .stat-value, #mainAppFrame [class*="-value"], #mainAppFrame .gauge-value, #mainAppFrame [class*="reading"] .value, #mainAppFrame [class*="technician-number"] { font-family: var(--font-rounded, -apple-system-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif) !important; font-feature-settings: "tnum" on !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.02em; } /* Buttons — premium tap target + press feedback */ #mainAppFrame button, #mainAppFrame .btn, #mainAppFrame .menu-btn-v2 { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; transition: transform 0.12s var(--ease-tap, cubic-bezier(0.2,0,0,1)), opacity 0.12s ease; } #mainAppFrame button:active:not(:disabled), #mainAppFrame .btn:active:not(:disabled), #mainAppFrame .menu-btn-v2:active { transform: scale(0.97); opacity: 0.92; } /* Kill double-tap zoom + stray selection on chrome elements */ #mainAppFrame button, #mainAppFrame .btn, #mainAppFrame .menu-btn-v2, #mainAppFrame .profile-nav-card, #mainAppFrame [role="button"] { touch-action: manipulation; -webkit-user-select: none; user-select: none; } /* Hairline borders use warm neutral instead of cold slate */ #mainAppFrame [style*="border:1px solid #e2e8f0"], #mainAppFrame [style*="border:1px solid #eee"], #mainAppFrame [style*="border:1px solid #ddd"] { border-color: var(--hairline, #E7E5DE) !important; } /* ============================================================ OLA 2 — SPACING + RADIUS LADDER + PREMIUM SHADOWS (v6.08) ============================================================ */ /* Universal card upgrade — any white/surface card picks up the premium shadow + 14px radius automatically. Inline styles win over this. */ #mainAppFrame .card, #mainAppFrame [class*="card"]:not(.menu-btn-v2):not(.profile-nav-card) { border-radius: var(--br-card, 14px); } /* Sheet modals get 20px + top-only radius (iOS bottom-sheet pattern) */ #mainAppFrame [class*="sheet"], #mainAppFrame [class*="modal-sheet"] { border-radius: var(--br-sheet, 20px) var(--br-sheet, 20px) 0 0; } /* Hero cards (dashboard featured, big result screens) get 28px + elev shadow */ #mainAppFrame [class*="hero-card"], #mainAppFrame [class*="result-card"], #mainAppFrame [class*="primary-card"] { border-radius: var(--br-hero, 28px); box-shadow: var(--shadow-elev, 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08), 0 2px 4px rgba(17,17,17,0.06)); } /* Chips / pills / badges: 6px radius and 4/10 padding */ #mainAppFrame .chip, #mainAppFrame .pill, #mainAppFrame .badge-chip { border-radius: var(--br-chip, 6px); padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: -0.1px; } /* Inputs: 10px radius, 12px padding, warm border, never below 15px font */ #mainAppFrame input:not([type="checkbox"]):not([type="radio"]):not([style*="border-radius"]), #mainAppFrame textarea:not([style*="border-radius"]), #mainAppFrame select:not([style*="border-radius"]) { border-radius: var(--br-input, 10px); font-size: 15px; } /* Premium shadow on white surface cards that don't already define a shadow */ #mainAppFrame [style*="background:#FFFFFF"]:not([style*="box-shadow"]):not(button):not(a), #mainAppFrame [style*="background: #FFFFFF"]:not([style*="box-shadow"]):not(button):not(a), #mainAppFrame [style*="background:#ffffff"]:not([style*="box-shadow"]):not(button):not(a), #mainAppFrame [style*="background: #ffffff"]:not([style*="box-shadow"]):not(button):not(a) { box-shadow: var(--shadow-card, 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08)); } /* Primary CTA — 56px tap target, full-width with 16px gutter, 14px radius */ #mainAppFrame .btn-primary, #mainAppFrame .btn[style*="background:linear-gradient"]:not([style*="padding"]) { min-height: 52px; border-radius: var(--br-card, 14px); font-size: 16px; font-weight: 700; letter-spacing: -0.1px; } /* ============================================================ OLA 3 — APPLE DECEL EASING + LIST STAGGER (v6.08) Swap symmetric ease-in-out for Apple's deceleration curve ============================================================ */ /* Normalize transition timing everywhere — decelerate, never symmetric */ #mainAppFrame *[style*="transition"], #mainAppFrame .card, #mainAppFrame .btn, #mainAppFrame button, #mainAppFrame a, #mainAppFrame .menu-btn-v2, #mainAppFrame .profile-nav-card, #mainAppFrame input, #mainAppFrame select, #mainAppFrame textarea { transition-timing-function: var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)); } /* iOS sheet-present animation for any element flagged .ios-sheet */ @keyframes iosSheetIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes iosSheetOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } } #mainAppFrame .ios-sheet { animation: iosSheetIn 0.4s var(--ease-out, cubic-bezier(0.32,0.72,0,1)) forwards; } #mainAppFrame .ios-sheet.dismissing { animation: iosSheetOut 0.25s var(--ease-out, cubic-bezier(0.32,0.72,0,1)) forwards; } /* Staggered list reveal — add .stagger-in to any list container to get row-by-row appearance at 30ms apart, 240ms per row */ @keyframes listRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } #mainAppFrame .stagger-in > * { opacity: 0; animation: listRowIn 0.24s var(--ease-out, cubic-bezier(0.32,0.72,0,1)) forwards; } #mainAppFrame .stagger-in > *:nth-child(1) { animation-delay: 0.03s; } #mainAppFrame .stagger-in > *:nth-child(2) { animation-delay: 0.06s; } #mainAppFrame .stagger-in > *:nth-child(3) { animation-delay: 0.09s; } #mainAppFrame .stagger-in > *:nth-child(4) { animation-delay: 0.12s; } #mainAppFrame .stagger-in > *:nth-child(5) { animation-delay: 0.15s; } #mainAppFrame .stagger-in > *:nth-child(6) { animation-delay: 0.18s; } #mainAppFrame .stagger-in > *:nth-child(7) { animation-delay: 0.21s; } #mainAppFrame .stagger-in > *:nth-child(8) { animation-delay: 0.24s; } #mainAppFrame .stagger-in > *:nth-child(9) { animation-delay: 0.27s; } #mainAppFrame .stagger-in > *:nth-child(10) { animation-delay: 0.30s; } #mainAppFrame .stagger-in > *:nth-child(n+11) { animation-delay: 0.33s; } /* When scroll is being restored, stagger must also be suppressed */ #mainAppFrame .screen.no-child-anim .stagger-in > * { animation: none !important; opacity: 1 !important; transform: none !important; } /* ============================================================ OLA 5 — WKWEBVIEW NATIVE POLISH (v6.08) Kill browser-y chrome: overscroll glow, tap highlight, double-tap zoom, text selection on chrome, iOS callouts. ============================================================ */ html, body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; } /* Text is still selectable in content areas, but never on chrome/buttons */ #mainAppFrame button, #mainAppFrame .btn, #mainAppFrame .menu-btn-v2, #mainAppFrame .profile-nav-card, #mainAppFrame [role="button"], #mainAppFrame .sticky-nav-bar, #mainAppFrame .btn-nav-back, #mainAppFrame .nav-bar-title { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Allow text selection inside fields and article content */ #mainAppFrame input, #mainAppFrame textarea, #mainAppFrame [contenteditable="true"], #mainAppFrame .allow-select { -webkit-user-select: text !important; user-select: text !important; } /* Safe area padding tokens */ #mainAppFrame { --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); --safe-left: env(safe-area-inset-left); --safe-right: env(safe-area-inset-right); } /* Tab bar / bottom nav respects home indicator */ #bottomNav, .tab-bar, [class*="bottom-nav"] { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } /* Minimum tap target 44x44 pt */ #mainAppFrame button, #mainAppFrame [role="button"], #mainAppFrame .btn, #mainAppFrame a[onclick] { min-height: 44px; min-width: 44px; } /* Exceptions for icon-only mini chevrons / closes that we know are tiny */ #mainAppFrame button[class*="close"], #mainAppFrame button[class*="chevron"], #mainAppFrame .btn-tiny { min-height: auto; min-width: auto; } /* Disable double-tap zoom everywhere inside the app frame */ #mainAppFrame { touch-action: manipulation; } /* Kill the last remnant of browser focus ring — we render our own */ #mainAppFrame button:focus, #mainAppFrame .btn:focus, #mainAppFrame a:focus { outline: none; } #mainAppFrame button:focus-visible, #mainAppFrame .btn:focus-visible { outline: 2px solid rgba(232,89,28,0.5); outline-offset: 2px; } /* Respect reduce-motion for users who set it */ @media (prefers-reduced-motion: reduce) { #mainAppFrame *, #mainAppFrame *::before, #mainAppFrame *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== PREMIUM CARD SYSTEM — universal polish for every card surface Warm canvas, hairline border, two-layer warm shadow, 14px radius, crisp #111 typography. Applies everywhere without per-card overrides. ========================================================================== */ #mainAppFrame .card, #mainAppFrame .profile-nav-card, #mainAppFrame .zoom-nav-card, #mainAppFrame .podcast-nav-card, #mainAppFrame .cert-card, #mainAppFrame .ep-card, #mainAppFrame .specialty-card, #mainAppFrame .technician-number-card, #mainAppFrame .reminder-stat-card, #mainAppFrame .admin-att-card, #mainAppFrame .admin-profile-card, #mainAppFrame .admin-stat-card, #mainAppFrame .att-summary-card, #mainAppFrame .attendance-card, #mainAppFrame .pay-kpi-card, #mainAppFrame .ble-gauge-card, #mainAppFrame .ble-device-card, #mainAppFrame .job-card, #mainAppFrame .marketplace-card, #mainAppFrame .tool-card, #mainAppFrame .stat-card, #mainAppFrame .info-card, #mainAppFrame .result-card, #mainAppFrame .panel, #mainAppFrame [class$="-card"]:not(.card-ic):not(.card-inner), #mainAppFrame [class$="-panel"]:not([class*="ai-panel-"]), #mainAppFrame [class$="-box"]:not([class*="search"]), #mainAppFrame .info-box, #mainAppFrame .acv-welcome-card, #mainAppFrame .acvolt-q-card, #mainAppFrame .vt-card, #mainAppFrame .vt-welcome-card, #mainAppFrame .vt-series-progress-card, #mainAppFrame .ht-ref-card, #mainAppFrame .sop-diagrama-card, #mainAppFrame .sop-manual-card, #mainAppFrame .sop-ticket-card, #mainAppFrame .sop-video-card, #mainAppFrame .soporte-case-card, #mainAppFrame .technician-number-card { background: #FFFFFF; border: 1px solid #E7E5DE; border-radius: 14px; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08); transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1); color: #111; } #mainAppFrame .card:active:not(:disabled), #mainAppFrame .profile-nav-card:active, #mainAppFrame .zoom-nav-card:active, #mainAppFrame .podcast-nav-card:active, #mainAppFrame .cert-card:active, #mainAppFrame .specialty-card:active, #mainAppFrame .job-card:active, #mainAppFrame .marketplace-card:active, #mainAppFrame .tool-card:active, #mainAppFrame [class$="-card"]:active:not(.card-ic):not(.card-inner) { transform: scale(0.985); box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 4px 12px -6px rgba(17,17,17,0.10); } /* Card titles / subtitles — unified premium type */ #mainAppFrame .card-title, #mainAppFrame [class$="-card"] .title, #mainAppFrame [class$="-card"] h3, #mainAppFrame [class$="-card"] h4 { color: #111 !important; font-weight: 700; letter-spacing: -0.01em; } #mainAppFrame .card-subtitle, #mainAppFrame [class$="-card"] .subtitle, #mainAppFrame [class$="-card"] .meta { color: #6B6B66 !important; font-weight: 500; } /* ----- UNIFIED IN-CARD TYPOGRAPHY ----- */ /* Any text inside any card gets readable #111 by default; labels go to #6B6B66. */ #mainAppFrame .card :where(p, span, li, strong, b, em, td, th), #mainAppFrame [class$="-card"]:not(.card-ic) :where(p, span, li, strong, b, em, td, th), #mainAppFrame [class$="-panel"] :where(p, span, li, strong, b, em, td, th), #mainAppFrame [class$="-box"] :where(p, span, li, strong, b, em, td, th), #mainAppFrame .info-box :where(p, span, li, strong, b, em, td, th) { color: #111; } #mainAppFrame .card :where(h1, h2, h3, h4, h5, h6), #mainAppFrame [class$="-card"]:not(.card-ic) :where(h1, h2, h3, h4, h5, h6), #mainAppFrame [class$="-panel"] :where(h1, h2, h3, h4, h5, h6), #mainAppFrame [class$="-box"] :where(h1, h2, h3, h4, h5, h6) { color: #111; font-weight: 700; letter-spacing: -0.015em; } #mainAppFrame .card :where(.label, [class$="-label"], .muted, .hint, .caption, small, time), #mainAppFrame [class$="-card"]:not(.card-ic) :where(.label, [class$="-label"], .muted, .hint, .caption, small, time), #mainAppFrame [class$="-panel"] :where(.label, [class$="-label"], .muted, .hint, .caption, small, time), #mainAppFrame [class$="-box"] :where(.label, [class$="-label"], .muted, .hint, .caption, small, time), #mainAppFrame .info-box :where(.label, [class$="-label"], .muted, .hint, .caption, small, time) { color: #6B6B66; font-weight: 500; } /* Numeric / metric values inside cards — rounded SF, tabular */ #mainAppFrame .card :where(.value, [class$="-value"], [class$="-val"], .number, .amount, .count, .price), #mainAppFrame [class$="-card"]:not(.card-ic) :where(.value, [class$="-value"], [class$="-val"], .number, .amount, .count, .price), #mainAppFrame [class$="-panel"] :where(.value, [class$="-value"], [class$="-val"], .number, .amount, .count, .price) { color: #111; font-family: var(--font-rounded, -apple-system-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, sans-serif); font-feature-settings: "tnum" on; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; } /* Inline-styled text inside cards still wins via :not([style*="color"]) pattern */ #mainAppFrame .card *:not([style*="color"]), #mainAppFrame [class$="-card"]:not(.card-ic) *:not([style*="color"]), #mainAppFrame [class$="-panel"] *:not([style*="color"]) { /* noop — just ensures the cascade has a stable anchor */ } /* Padding floor so cards don't look cramped when authored inline without padding */ #mainAppFrame .card:not(.card-inner):not(.card-ic), #mainAppFrame [class$="-card"]:not(.card-ic):not(.card-inner):not([style*="padding"]), #mainAppFrame [class$="-panel"]:not([class*="ai-panel-"]):not([style*="padding"]), #mainAppFrame .info-box:not([style*="padding"]) { padding: 16px; } /* Tour FAB — keep it tucked and only on dashboard (JS toggles display) */ #floatingTourBtn { bottom: calc(96px + env(safe-area-inset-bottom)) !important; } /* ========================================================================== BOTTOM SAFE PADDING for tool / scrollable screens iPhone was cutting off the last CTA (Diagnóstico IA, Save, Generar Reportes) because content ended flush with the bottom nav + home indicator. Add generous breathing room so every last button is tappable. ========================================================================== */ #mainAppFrame .premium-screen, #mainAppFrame #chillerScreen, #mainAppFrame #commercialHvacScreen, #mainAppFrame #anemometerHvacScreen, #mainAppFrame #manometerHvacScreen, #mainAppFrame #heatingScreen, #mainAppFrame #manifoldScreen, #mainAppFrame #multimeterScreen, #mainAppFrame #cargaTermicaScreen, #mainAppFrame #walkinScreen, #mainAppFrame #elecloadScreen, #mainAppFrame #elecLoadScreen, #mainAppFrame #partsFinderScreen { padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important; } #mainAppFrame .premium-screen > *:last-child, #mainAppFrame #chillerScreen > *:last-child, #mainAppFrame #commercialHvacScreen > *:last-child, #mainAppFrame #anemometerHvacScreen > *:last-child, #mainAppFrame #manometerHvacScreen > *:last-child, #mainAppFrame #heatingScreen > *:last-child, #mainAppFrame #manifoldScreen > *:last-child, #mainAppFrame #multimeterScreen > *:last-child { margin-bottom: 24px; } /* ========================================================================== MAESTRO TOOL DESIGN SYSTEM · v1 One look for every tool screen. Inspired by Apple Health, Linear, Superhuman, Things 3 — clean canvas, single warm accent, crisp SF Pro typography, generous breathing room, consistent cards + tabs + inputs + CTAs. This block is authoritative: anything inside a .premium-screen adopts these styles regardless of inline overrides baked into the JS tool renderers. ========================================================================== */ #mainAppFrame .premium-screen, #mainAppFrame #chillerScreen, #mainAppFrame #commercialHvacScreen, #mainAppFrame #anemometerHvacScreen, #mainAppFrame #manometerHvacScreen, #mainAppFrame #heatingScreen, #mainAppFrame #manifoldScreen, #mainAppFrame #multimeterScreen { background: #FAFAF7 !important; color: #0F0F0F; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; } /* Any solid-white wrapper inside a tool screen → canvas warm */ #mainAppFrame .premium-screen > div[style*="background:#FFFFFF"], #mainAppFrame .premium-screen > div[style*="background:#ffffff"], #mainAppFrame .premium-screen > div[style*="background: #FFFFFF"], #mainAppFrame .premium-screen > div[style*="background: #ffffff"] { background: #FAFAF7 !important; } /* Sticky tool header — one translucent blurred bar everywhere */ #mainAppFrame .premium-screen > div > div[style*="position:sticky"], #mainAppFrame .premium-screen > div > div[style*="position: sticky"] { background: rgba(250, 250, 247, 0.82) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid #E7E5DE !important; padding-top: calc(10px + env(safe-area-inset-top)) !important; } /* Back ‹ arrow in every tool header */ #mainAppFrame .premium-screen button[onclick*="_toolBack"], #mainAppFrame .premium-screen button[onclick*="herramientasScreen"], #mainAppFrame .premium-screen button[onclick*="dashboardScreen"] { background: rgba(17, 17, 17, 0.04) !important; color: #0F0F0F !important; border: 1px solid #E7E5DE !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; font-weight: 600 !important; } /* Tool title + subtitle — unified scale */ #mainAppFrame .premium-screen [style*="font-size:17px"][style*="font-weight:800"], #mainAppFrame .premium-screen [style*="font-size: 17px"][style*="font-weight: 800"] { color: #0F0F0F !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } #mainAppFrame .premium-screen [style*="font-size:13px"][style*="font-weight:500"] { color: #6B6B66 !important; font-weight: 500 !important; letter-spacing: -0.005em !important; } /* Tool TAB ROW — unified pill-tab bar */ #mainAppFrame .premium-screen [style*="display:flex"][style*="overflow-x:auto"] > button, #mainAppFrame .premium-screen [style*="display: flex"][style*="overflow-x: auto"] > button { border-radius: 10px !important; padding: 9px 12px !important; font-size: 12.5px !important; letter-spacing: -0.005em !important; margin: 2px 2px !important; border: 1px solid transparent !important; transition: background 160ms ease, color 160ms ease !important; } /* Active tab */ #mainAppFrame .premium-screen [style*="overflow-x:auto"] > button[style*="rgba(255,107,53,0.18)"], #mainAppFrame .premium-screen [style*="overflow-x:auto"] > button[style*="rgba(232,89,28"] { background: #0F0F0F !important; color: #FFFFFF !important; border-color: #0F0F0F !important; font-weight: 700 !important; } /* Inactive tab */ #mainAppFrame .premium-screen [style*="overflow-x:auto"] > button[style*="background:transparent"], #mainAppFrame .premium-screen [style*="overflow-x:auto"] > button[style*="background: transparent"] { background: transparent !important; color: #6B6B66 !important; font-weight: 500 !important; } /* Sub-panels inside tools — white cards, hairline border, two-layer shadow */ #mainAppFrame .premium-screen [style*="background:#fff"]:not([style*="sticky"]):not(button), #mainAppFrame .premium-screen [style*="background: #fff"]:not([style*="sticky"]):not(button), #mainAppFrame .premium-screen [style*="background:#ffffff"]:not([style*="sticky"]):not(button), #mainAppFrame .premium-screen [style*="background: #ffffff"]:not([style*="sticky"]):not(button), #mainAppFrame .premium-screen [style*="background:#FFFFFF"]:not([style*="sticky"]):not(button) { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08); } /* Inputs inside tools — one style */ #mainAppFrame .premium-screen input[type="text"], #mainAppFrame .premium-screen input[type="number"], #mainAppFrame .premium-screen input[type="email"], #mainAppFrame .premium-screen input:not([type]), #mainAppFrame .premium-screen select, #mainAppFrame .premium-screen textarea { background: #FFFFFF !important; color: #0F0F0F !important; border: 1px solid #E7E5DE !important; border-radius: 10px !important; padding: 10px 12px !important; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; font-feature-settings: "tnum" on !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.005em !important; box-shadow: none !important; transition: border-color 160ms ease, box-shadow 160ms ease !important; } #mainAppFrame .premium-screen input:focus, #mainAppFrame .premium-screen select:focus, #mainAppFrame .premium-screen textarea:focus { border-color: #E8591C !important; box-shadow: 0 0 0 4px rgba(232, 89, 28, 0.12) !important; outline: none !important; } #mainAppFrame .premium-screen input::placeholder { color: #9A9A94 !important; font-weight: 500 !important; } /* Field labels inside tools */ #mainAppFrame .premium-screen label, #mainAppFrame .premium-screen [style*="font-size:12px"][style*="font-weight:700"], #mainAppFrame .premium-screen [style*="font-size: 12px"][style*="font-weight: 700"] { color: #6B6B66 !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } /* CTA Buttons inside tools — primary (gradient orange) and neutral */ #mainAppFrame .premium-screen button[style*="linear-gradient"][style*="FF6B35"], #mainAppFrame .premium-screen button[style*="linear-gradient"][style*="ff6b35"], #mainAppFrame .premium-screen button[style*="linear-gradient"][style*="E8591C"], #mainAppFrame .premium-screen button[style*="linear-gradient"][style*="f39c12"], #mainAppFrame .premium-screen button[style*="linear-gradient"][style*="e67e22"] { background: #E8591C !important; color: #FFFFFF !important; border: none !important; border-radius: 12px !important; padding: 14px 18px !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: -0.005em !important; box-shadow: 0 4px 14px rgba(232, 89, 28, 0.25) !important; min-height: 48px !important; } /* Large numeric value displays inside tools — rounded SF, tabular */ #mainAppFrame .premium-screen [style*="font-family:'Courier New'"], #mainAppFrame .premium-screen [style*="font-family: 'Courier New'"], #mainAppFrame .premium-screen [class$="-value"], #mainAppFrame .premium-screen [class$="-val"] { font-family: -apple-system-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-feature-settings: "tnum" on !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.015em !important; color: #0F0F0F !important; } /* Force the off-palette pale-blue TEXT (#e2e8f0) used by older tool renderers to become proper #0F0F0F — kill the last ghostly text. */ #mainAppFrame .premium-screen [style*="color:#e2e8f0"], #mainAppFrame .premium-screen [style*="color: #e2e8f0"], #mainAppFrame .premium-screen [style*="color:#E2E8F0"], #mainAppFrame .premium-screen [style*="color: #E2E8F0"] { color: #0F0F0F !important; } /* Muted slate (#64748b) used inconsistently → warm secondary */ #mainAppFrame .premium-screen [style*="color:#64748b"], #mainAppFrame .premium-screen [style*="color: #64748b"] { color: #6B6B66 !important; } /* Off-palette accents in chrome (#FF6B35 / #f39c12 / #e67e22) → one accent */ #mainAppFrame .premium-screen [style*="color:#FF6B35"], #mainAppFrame .premium-screen [style*="color: #FF6B35"], #mainAppFrame .premium-screen [style*="color:#ff6b35"], #mainAppFrame .premium-screen [style*="color: #ff6b35"], #mainAppFrame .premium-screen [style*="color:#f39c12"], #mainAppFrame .premium-screen [style*="color: #f39c12"], #mainAppFrame .premium-screen [style*="color:#e67e22"], #mainAppFrame .premium-screen [style*="color: #e67e22"] { color: #E8591C !important; } /* Spacing inside every tool content area */ #mainAppFrame .premium-screen #anContent, #mainAppFrame .premium-screen #chContent, #mainAppFrame .premium-screen #mnContent, #mainAppFrame .premium-screen [id$="Content"] { padding: 16px !important; gap: 12px; } /* ========================================================================== LEGACY DARK → PREMIUM LIGHT MIGRATION Screens that were built in the old dark-cinematic palette and never migrated: miPerfilScreen, radioPodcastScreen, attendanceScreen, and any screen that inherits the global #040d1a forcing rule above. These rules come LAST so they override the legacy dark block. Specific chat / feed experiences (hvacFeed, techChat, sugerencias, groupChatRoom) intentionally stay dark and are excluded. ========================================================================== */ #mainAppFrame .screen.active { background: #FAFAF7 !important; } /* Keep the small set of truly dark experiences dark */ #mainAppFrame #hvacFeedScreen.active, #mainAppFrame #techChatScreen.active, #mainAppFrame #sugerenciasScreen.active, #mainAppFrame #groupChatRoomScreen.active, #mainAppFrame #desafioScreen.active, #mainAppFrame #desafioQuizScreen.active { background: #040d1a !important; } /* App-inner canvas also goes warm light (was #040d1a) */ #mainAppFrame .app-inner { background: #FAFAF7 !important; } #mainAppFrame .app-inner::before { display: none !important; content: none !important; } /* Unified screen headers — dark text on warm canvas */ #mainAppFrame .screen > .header:first-child, #mainAppFrame .screen > div:first-child > .header:first-child { border-bottom: 1px solid #E7E5DE !important; } #mainAppFrame .header h1 { color: #0F0F0F !important; letter-spacing: -0.02em !important; } #mainAppFrame .header h2 { color: #0F0F0F !important; } #mainAppFrame .header .subtitle, #mainAppFrame .header .greeting { color: #6B6B66 !important; font-weight: 500 !important; } /* ─── Mi Perfil: full light migration ─── */ #miPerfilScreen { background: #FAFAF7 !important; } #miPerfilScreen .card { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; color: #0F0F0F !important; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08) !important; padding: 20px !important; } #miPerfilScreen .profile-field { border-bottom: 1px solid #E7E5DE !important; color: #0F0F0F !important; } #miPerfilScreen .technician-number-card { background: linear-gradient(135deg, #FFF7ED, #FFEDD5) !important; border: 1px solid #FED7AA !important; color: #7C2D12 !important; } #miPerfilScreen .profile-nav-card { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #miPerfilScreen .profile-nav-card .pnc-title { color: #0F0F0F !important; letter-spacing: -0.01em !important; } #miPerfilScreen .profile-nav-card .pnc-subtitle { color: #6B6B66 !important; font-weight: 500 !important; } /* Any inline text inside Mi Perfil that's light-on-dark becomes dark-on-light */ #miPerfilScreen [style*="color:#f0f4fa"], #miPerfilScreen [style*="color: #f0f4fa"], #miPerfilScreen [style*="color:rgba(240,244,250"], #miPerfilScreen [style*="color: rgba(240,244,250"] { color: #0F0F0F !important; } #miPerfilScreen [style*="color:rgba(255,255,255"], #miPerfilScreen [style*="color: rgba(255,255,255"] { color: #0F0F0F !important; } #miPerfilScreen [style*="background:rgba(255,255,255,0.04)"], #miPerfilScreen [style*="background: rgba(255,255,255,0.04)"], #miPerfilScreen [style*="background:rgba(255,255,255,0.05)"], #miPerfilScreen [style*="background: rgba(255,255,255,0.05)"] { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; } #miPerfilScreen [style*="border:1px solid rgba(255,255,255"], #miPerfilScreen [style*="border: 1px solid rgba(255,255,255"] { border-color: #E7E5DE !important; } /* ─── Radio / Podcast: full light migration ─── */ #radioPodcastScreen { background: #FAFAF7 !important; } #radioPodcastScreen .card { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; color: #0F0F0F !important; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08) !important; } #radioPodcastScreen .podcast-nav-card { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #radioPodcastScreen .podcast-nav-card .pnc-title { color: #0F0F0F !important; } #radioPodcastScreen .podcast-nav-card .pnc-subtitle { color: #6B6B66 !important; } /* ─── Zoom / Video Lessons / Attendance sticky bars ─── */ #videoLessonsScreen > div[style*="position:sticky"], #zoomClassesScreen > div[style*="position:sticky"] { background: rgba(250,250,247,0.82) !important; border-bottom: 1px solid #E7E5DE !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; } #attendanceScreen .card, #videoLessonsScreen .card, #zoomClassesScreen .card { background: #FFFFFF !important; border: 1px solid #E7E5DE !important; color: #0F0F0F !important; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px -8px rgba(17,17,17,0.08) !important; } /* Sticky nav bar — light variant is the default now */ #mainAppFrame .sticky-nav-bar:not(.sticky-nav-bar--dark) { background: rgba(250,250,247,0.82) !important; border-bottom: 1px solid #E7E5DE !important; color: #0F0F0F !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; } #mainAppFrame .sticky-nav-bar .nav-bar-title { color: #0F0F0F !important; font-weight: 700 !important; } #mainAppFrame .sticky-nav-bar .btn-nav-back { background: rgba(17,17,17,0.04) !important; border: 1px solid #E7E5DE !important; color: #0F0F0F !important; border-radius: 10px !important; padding: 7px 12px !important; font-weight: 600 !important; } /* ======================================================================== SKELETON LOADERS — shimmer templates for lists, cards, circles Use with:
,
or: window.Skeleton.listCard(container, count) ======================================================================== */ .sk { position: relative; overflow: hidden; background: #EDECE6; border-radius: var(--r-sm, 12px); } .sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%); transform: translateX(-100%); animation: sk-shimmer 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; } .sk-line { height: 12px; border-radius: 6px; margin: 6px 0; } .sk-line.sm { height: 10px; width: 50%; } .sk-line.md { height: 14px; width: 75%; } .sk-line.lg { height: 18px; width: 85%; } .sk-circle { width: 44px; height: 44px; border-radius: 50%; } .sk-circle.lg{ width: 64px; height: 64px; } .sk-card { height: 88px; border-radius: var(--r-md, 16px); margin-bottom: 10px; } .sk-card.lg { height: 140px; } .sk-row { display: flex; gap: 12px; align-items: center; padding: 12px; background: #FFFFFF; border: 1px solid #E7E5DE; border-radius: var(--r-md, 16px); margin-bottom: 8px; box-shadow: 0 1px 2px rgba(17,17,17,0.04); } .sk-row .sk-body { flex: 1; } @keyframes sk-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .sk::after { animation: none; opacity: 0.35; transform: none; } } /* ======================================================================== EMPTY STATE — reusable zero-data block Use:
📭
Sin notificaciones
Te avisaremos aquí cuando tengas algo nuevo.
======================================================================== */ #mainAppFrame .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; min-height: 240px; } #mainAppFrame .empty-state .empty-icon { font-size: 56px; line-height: 1; margin-bottom: 14px; opacity: 0.92; filter: drop-shadow(0 4px 12px rgba(17,17,17,0.08)); } #mainAppFrame .empty-state .empty-title { font-size: 17px; font-weight: 800; color: #0F0F0F; margin-bottom: 6px; letter-spacing: -0.2px; } #mainAppFrame .empty-state .empty-desc { font-size: 13px; font-weight: 500; color: #6B6B66; line-height: 1.5; max-width: 280px; margin-bottom: 18px; } #mainAppFrame .empty-state .empty-cta { margin-top: 6px; min-width: 180px; } /* ======================================================================== PREMIUM TOAST — bottom entry, blur, auto-dismiss, swipe-down-to-close Rendered by window.showToast() helper (defined in notifications.js) ======================================================================== */ .mx-toast-wrap { position: fixed; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 10001; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; } .mx-toast { pointer-events: auto; background: rgba(17,17,17,0.92); color: #FFFFFF; font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: var(--r-pill, 999px); min-height: 44px; display: flex; align-items: center; gap: 10px; max-width: 420px; box-shadow: 0 10px 30px -8px rgba(17,17,17,0.35), 0 2px 6px rgba(17,17,17,0.12); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); transform: translateY(140%); opacity: 0; transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms cubic-bezier(0.4, 0, 1, 1); touch-action: pan-y; letter-spacing: -0.01em; will-change: transform, opacity; } .mx-toast.in { transform: translateY(0); opacity: 1; } .mx-toast.out { transform: translateY(140%); opacity: 0; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } .mx-toast.success { background: rgba(5, 105, 56, 0.94); } .mx-toast.error { background: rgba(185, 28, 28, 0.94); } .mx-toast.warning { background: rgba(180, 83, 9, 0.94); } .mx-toast .mx-toast-ic { font-size: 18px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .mx-toast { transition: opacity 0.01ms; transform: none; } .mx-toast.in, .mx-toast.out { transform: none; } } /* ======================================================================== SCREEN TRANSITIONS — iOS-style push / pop Applied by navigation.js when it adds .screen-enter-push / .screen-leave-push (and -pop variants) to the outgoing + incoming screens. ======================================================================== */ #mainAppFrame .screen.screen-enter-push { animation: screen-push-in 360ms cubic-bezier(0.32, 0.72, 0, 1) both; } #mainAppFrame .screen.screen-leave-push { animation: screen-push-out 360ms cubic-bezier(0.32, 0.72, 0, 1) both; } #mainAppFrame .screen.screen-enter-pop { animation: screen-pop-in 320ms cubic-bezier(0.32, 0.72, 0, 1) both; } #mainAppFrame .screen.screen-leave-pop { animation: screen-pop-out 320ms cubic-bezier(0.32, 0.72, 0, 1) both; } @keyframes screen-push-in { from { transform: translateX(100%); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } @keyframes screen-push-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-28%); opacity: 0.55; } } @keyframes screen-pop-in { from { transform: translateX(-28%); opacity: 0.55; } to { transform: translateX(0); opacity: 1; } } @keyframes screen-pop-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0.6; } } @media (prefers-reduced-motion: reduce) { #mainAppFrame .screen.screen-enter-push, #mainAppFrame .screen.screen-leave-push, #mainAppFrame .screen.screen-enter-pop, #mainAppFrame .screen.screen-leave-pop { animation-duration: 0.01ms !important; } } /* ========== PREMIUM DIALOG (MaestroDialog) ========== */ .mx-dlg-overlay { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17,17,17,0.42); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); opacity: 0; transition: opacity 180ms cubic-bezier(0.32,0.72,0,1); -webkit-tap-highlight-color: transparent; } .mx-dlg-overlay.in { opacity: 1; } .mx-dlg-overlay.out { opacity: 0; } .mx-dlg-card { width: 100%; max-width: 340px; background: #FFFFFF; border-radius: 20px; padding: 22px 20px 16px; text-align: center; box-shadow: 0 1px 2px rgba(17,17,17,0.06), 0 24px 48px -12px rgba(17,17,17,0.32); transform: scale(0.92); opacity: 0; transition: transform 280ms cubic-bezier(0.34,1.56,0.64,1), opacity 180ms cubic-bezier(0.32,0.72,0,1); } .mx-dlg-overlay.in .mx-dlg-card { transform: scale(1); opacity: 1; } .mx-dlg-overlay.out .mx-dlg-card { transform: scale(0.96); opacity: 0; } .mx-dlg-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 26px; line-height: 1; background: #F3F1EA; border: 1px solid #E7E5DE; } .mx-dlg-success .mx-dlg-ic { background: #ECFDF5; border-color: #BBF7D0; } .mx-dlg-warning .mx-dlg-ic { background: #FEF3C7; border-color: #FCD34D; } .mx-dlg-error .mx-dlg-ic { background: #FEE2E2; border-color: #FCA5A5; } .mx-dlg-title { color: #0F0F0F; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; } .mx-dlg-msg { color: #3D3D3A; font-size: 14px; line-height: 1.45; margin-bottom: 18px; white-space: pre-line; } .mx-dlg-btns { display: flex; gap: 10px; padding-top: 4px; } .mx-dlg-btn { flex: 1; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; transition: transform 90ms cubic-bezier(0.32,0.72,0,1), background 120ms ease, border-color 120ms ease; -webkit-tap-highlight-color: transparent; } .mx-dlg-btn:active { transform: scale(0.97); } .mx-dlg-btn-primary { background: #E8591C; color: #FFFFFF; box-shadow: 0 2px 6px rgba(232,89,28,0.28); } .mx-dlg-btn-primary:hover { background: #D44E14; } .mx-dlg-btn-secondary { background: #FFFFFF; border-color: #E7E5DE; color: #0F0F0F; } .mx-dlg-btn-secondary:hover { background: #FAFAF7; border-color: #D1D0C9; } .mx-dlg-btn-destructive { background: #DC2626; box-shadow: 0 2px 6px rgba(220,38,38,0.3); } .mx-dlg-btn-destructive:hover { background: #B91C1C; } /* ========== BUTTON INLINE SPINNER (BtnLoading) ========== */ .mx-btn-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: mxBtnSpin 700ms linear infinite; vertical-align: -3px; } button.is-loading { opacity: 0.85; cursor: progress; } @keyframes mxBtnSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mx-btn-spin { animation-duration: 1.4s; } } /* ========== PREMIUM EMPTY STATE (mx-empty) ========== */ .mx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 24px; box-sizing: border-box; width: 100%; } .mx-empty-icon { width: 72px; height: 72px; border-radius: 50%; background: #F3F1EA; border: 1px solid #E7E5DE; display: flex; align-items: center; justify-content: center; font-size: 36px; line-height: 1; box-shadow: inset 0 1px 2px rgba(17,17,17,0.04); color: #3D3D3A; } .mx-empty-icon svg { width: 36px; height: 36px; display: block; } .mx-empty-title { margin: 18px 0 0; font-size: 17px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.01em; line-height: 1.3; } .mx-empty-desc { margin: 6px 0 0; font-size: 14px; color: #57574F; line-height: 1.45; max-width: 280px; text-align: center; } .mx-empty-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; padding: 10px 18px; background: #E8591C; color: #FFFFFF; font-size: 14px; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 180ms cubic-bezier(0.32,0.72,0,1), background 180ms cubic-bezier(0.32,0.72,0,1), box-shadow 180ms cubic-bezier(0.32,0.72,0,1); box-shadow: 0 1px 2px rgba(17,17,17,0.06), 0 4px 12px -4px rgba(232,89,28,0.35); } .mx-empty-cta:hover { background: #D44E14; } .mx-empty-cta:active { transform: scale(0.96); } @media (prefers-reduced-motion: reduce) { .mx-empty-cta { transition: none; } .mx-empty-cta:active { transform: none; } } /* ========================================================================== DESAFÍO — restore light text on dark bg Global .screen overrides above force spans/headings to #0F0F0F. The Desafío screens are explicitly dark (#040d1a) so that override leaves the quiz text invisible. Re-apply the original light-theme colors with high specificity. ========================================================================== */ #mainAppFrame #desafioScreen, #mainAppFrame #desafioQuizScreen { color: #f0f4fa !important; } #mainAppFrame #desafioScreen h1:not([style*="color"]), #mainAppFrame #desafioScreen h2:not([style*="color"]), #mainAppFrame #desafioScreen h3:not([style*="color"]), #mainAppFrame #desafioQuizScreen h1:not([style*="color"]), #mainAppFrame #desafioQuizScreen h2:not([style*="color"]), #mainAppFrame #desafioQuizScreen h3:not([style*="color"]) { color: #f0f4fa !important; } #mainAppFrame #desafioScreen p:not([style*="color"]), #mainAppFrame #desafioScreen span:not([style*="color"]), #mainAppFrame #desafioScreen label:not([style*="color"]), #mainAppFrame #desafioQuizScreen p:not([style*="color"]), #mainAppFrame #desafioQuizScreen span:not([style*="color"]), #mainAppFrame #desafioQuizScreen label:not([style*="color"]) { color: inherit !important; } /* Restore the explicit Desafío palette where the module set it */ #mainAppFrame #desafioQuizScreen .ds-q-text { color: #f0f4fa !important; } #mainAppFrame #desafioQuizScreen .ds-q-count { color: #cbd5e1 !important; } #mainAppFrame #desafioQuizScreen .ds-q-category { color: #8b5cf6 !important; } #mainAppFrame #desafioQuizScreen .ds-option, #mainAppFrame #desafioQuizScreen .ds-opt-text { color: #e2e8f0 !important; } #mainAppFrame #desafioQuizScreen .ds-opt-letter { color: #ffffff !important; } #mainAppFrame #desafioQuizScreen #dsMarioBubble { color: #fde68a !important; } #mainAppFrame #desafioQuizScreen .ds-mario-bubble { color: #fde68a !important; } #mainAppFrame #desafioQuizScreen .ds-fb-explain { color: #e2e8f0 !important; } #mainAppFrame #desafioQuizScreen .ds-fb-correct .ds-fb-phrase { color: #22c55e !important; } #mainAppFrame #desafioQuizScreen .ds-fb-wrong .ds-fb-phrase { color: #f59e0b !important; } #mainAppFrame #desafioQuizScreen .ds-stat-label { color: #cbd5e1 !important; } #mainAppFrame #desafioQuizScreen .ds-welcome-sub, #mainAppFrame #desafioQuizScreen .ds-study-subtitle { color: #cbd5e1 !important; } #mainAppFrame #desafioQuizScreen .ds-welcome-bubble { color: #f0f4fa !important; } #mainAppFrame #desafioQuizScreen .ds-welcome-quote, #mainAppFrame #desafioQuizScreen .ds-quote-text { color: #e2e8f0 !important; } #mainAppFrame #desafioQuizScreen .ds-study-title, #mainAppFrame #desafioQuizScreen .ds-study-cat-name, #mainAppFrame #desafioQuizScreen .ds-exit-title { color: #f0f4fa !important; } #mainAppFrame #desafioQuizScreen .ds-study-q-text { color: #e2e8f0 !important; } #mainAppFrame #desafioQuizScreen .ds-study-q-opt { color: #e2e8f0 !important; } #mainAppFrame #desafioQuizScreen .ds-study-q-explain { color: #a78bfa !important; } #mainAppFrame #desafioQuizScreen .ds-milestone-text { color: #fde68a !important; } #mainAppFrame #desafioQuizScreen .ds-exit-text { color: #e2e8f0 !important; } /* ========================================================================== HVAC FEED — restore light text on dark bg Same pattern as Desafío: the screen stays dark (#040d1a), but the global .screen text rules forced dark ink on div/p/span children, making article titles and descriptions invisible. ========================================================================== */ #mainAppFrame #hvacFeedScreen { color: #f0f4fa !important; } #mainAppFrame #hvacFeedScreen h1:not([style*="color"]), #mainAppFrame #hvacFeedScreen h2:not([style*="color"]), #mainAppFrame #hvacFeedScreen h3:not([style*="color"]), #mainAppFrame #hvacFeedScreen h4:not([style*="color"]) { color: #f0f4fa !important; } #mainAppFrame #hvacFeedScreen p:not([style*="color"]) { color: #d1d8e6 !important; } #mainAppFrame #hvacFeedScreen label:not([style*="color"]) { color: #cbd5e1 !important; } /* Article cards — catch-all for divs inside feed items so titles/descriptions stay light even if the build strips their inline color */ #mainAppFrame #hvacFeedScreen .hvac-feed-item { color: #f0f4fa !important; } #mainAppFrame #hvacFeedScreen .hvac-feed-item div:not([style*="color"]) { color: inherit !important; } #mainAppFrame #hvacFeedScreen .hvac-feed-item a:not([style*="color"]) { color: #ffffff !important; } /* Force the known inline colors to stick (inline style already wins, but belt-and-suspenders in case a higher-specificity rule slipped in) */ #mainAppFrame #hvacFeedScreen [style*="color:#ffffff"], #mainAppFrame #hvacFeedScreen [style*="color: #ffffff"] { color: #ffffff !important; } #mainAppFrame #hvacFeedScreen [style*="color:#e2e8f0"], #mainAppFrame #hvacFeedScreen [style*="color: #e2e8f0"] { color: #e2e8f0 !important; } #mainAppFrame #hvacFeedScreen [style*="color:#cbd5e1"], #mainAppFrame #hvacFeedScreen [style*="color: #cbd5e1"] { color: #cbd5e1 !important; }