/* ============================================================= ClickPalm Design System — Utilidades y Animaciones Requiere: cp-design-tokens.css cargado antes ============================================================= */ /* ============================================================= GLASSMORPHISM ============================================================= */ .cp-glass { background: var(--color-cp-glass-bg); border: 1px solid var(--color-cp-glass-border); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: 14px; box-shadow: var(--color-panel-shadow); } /* ============================================================= FONDO DE PÁGINA — capas decorativas Aplica .cp-page-bg-grad al o wrapper raíz. .cp-page-grid agrega la cuadrícula fija encima. ============================================================= */ .cp-page-bg-grad { background: radial-gradient(ellipse 80% 50% at 20% 0%, var(--color-cp-page-grad-1), transparent), radial-gradient(ellipse 60% 40% at 80% 100%, var(--color-cp-page-grad-2), transparent), var(--color-cp-forest-root); min-height: 100vh; } .cp-page-grid::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--color-cp-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-cp-grid-line) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } .cp-page-grid::after { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--color-cp-topo-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-cp-topo-line) 1px, transparent 1px); background-size: 120px 120px; pointer-events: none; z-index: 0; } /* ============================================================= CUADRÍCULA DE LOGIN ============================================================= */ .cp-login-grid { background-image: linear-gradient(to right, rgba(0, 80, 40, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 80, 40, 0.035) 1px, transparent 1px); background-size: 100px 100px; } .dark .cp-login-grid { background-image: linear-gradient(to right, rgba(76, 175, 80, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(76, 175, 80, 0.055) 1px, transparent 1px); background-size: 100px 100px; } /* ============================================================= FORMULARIOS — .cp-input ============================================================= */ .cp-input { width: 100%; padding: 8px 12px; background: var(--color-widget-bg); border: 1px solid var(--color-widget-border-strong); border-radius: 8px; color: var(--color-widget-text); font-family: var(--font-cp-body); font-size: 13px; line-height: 1.5; transition: border-color 0.2s, box-shadow 0.2s; } .cp-input:focus { outline: none; border-color: var(--color-widget-primary-lighter); box-shadow: 0 0 0 3px var(--color-widget-primary-bg); } .dark .cp-input { background: rgba(10, 28, 18, 0.55); border-color: var(--color-widget-border); color: var(--color-widget-text); } .dark .cp-input:focus { background: rgba(10, 28, 18, 0.75); border-color: var(--color-cp-lime); box-shadow: 0 0 0 3px rgba(157, 215, 97, 0.12), 0 0 12px rgba(157, 215, 97, 0.08); } /* ============================================================= SCROLLBAR ============================================================= */ .cp-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; } .cp-scrollbar::-webkit-scrollbar-track { background: transparent; } .cp-scrollbar::-webkit-scrollbar-thumb { background: var(--color-widget-border-strong); border-radius: 4px; } .cp-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--color-widget-primary-lighter); } /* ============================================================= TIPOGRAFÍA — escala ============================================================= */ .text-display-large { font-family: var(--font-cp-display); font-size: 4rem; font-weight: 800; line-height: 1.1; } .text-display-medium { font-family: var(--font-cp-display); font-size: 2.75rem; font-weight: 700; line-height: 1.15; } .text-display-small { font-family: var(--font-cp-display); font-size: 2.25rem; font-weight: 700; line-height: 1.2; } .text-headline-large { font-family: var(--font-cp-heading); font-size: 2rem; font-weight: 700; line-height: 1.25; } .text-headline-medium { font-family: var(--font-cp-heading); font-size: 1.5rem; font-weight: 600; line-height: 1.3; } .text-headline-small { font-family: var(--font-cp-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.35; } .text-title-large { font-family: var(--font-cp-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.4; } .text-title-medium { font-family: var(--font-cp-body); font-size: 1rem; font-weight: 500; line-height: 1.45; } .text-title-small { font-family: var(--font-cp-body); font-size: 0.875rem; font-weight: 500; line-height: 1.45; } .text-body-large { font-family: var(--font-cp-body); font-size: 1rem; font-weight: 400; line-height: 1.6; } .text-body-medium { font-family: var(--font-cp-body); font-size: 0.875rem; font-weight: 400; line-height: 1.55; } .text-body-small { font-family: var(--font-cp-body); font-size: 0.75rem; font-weight: 400; line-height: 1.5; } .text-label-large { font-family: var(--font-cp-data); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; } .text-label-medium { font-family: var(--font-cp-data); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .text-label-small { font-family: var(--font-cp-data); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .text-data { font-family: var(--font-cp-data); } /* ============================================================= ANIMACIONES — @keyframes ============================================================= */ @keyframes dashboardFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes radarPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.15; } } @keyframes radarPing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.8); opacity: 0; } } @keyframes cpSpin { to { transform: rotate(360deg); } } @keyframes auroraShift { 0%,100% { transform: translateX(-8%) scale(1); opacity: 0.6; } 50% { transform: translateX(8%) scale(1.15); opacity: 1; } } @keyframes waveFlow { from { background-position: 0 0; } to { background-position: 100px 0; } } @keyframes waveFlowReverse { from { background-position: 100px 0; } to { background-position: 0 0; } } @keyframes dashLoadPulse { 0%,100% { opacity: 0.6; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1); } } @keyframes robotFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes robotBlink { 0%,90%,100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } } @keyframes antennaGlow { 0%,100% { filter: drop-shadow(0 0 4px rgba(157, 215, 97, 0.4)); } 50% { filter: drop-shadow(0 0 12px rgba(157, 215, 97, 0.8)); } } @keyframes signalWave { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes progressShimmer { from { transform: translateX(-100%); } to { transform: translateX(200%); } } @keyframes dotBounce { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } } @keyframes exportModalSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mediaPreviewFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes pinColumn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }