/* ============================================================ sara-blue-default.css Tema por defecto del proyecto SARA Implementa el set mínimo obligatorio de tokens del lineamiento DUX universal Rev.270426-1430 + tokens específicos de SARA. ============================================================ */ :root { /* ============================================================ 1. TOKENS DEL SET MÍNIMO OBLIGATORIO (DUX 1.2) ============================================================ */ /* --- Tokens de marca --- */ --brand-primary: #009ADB; --brand-primary-dark: #006FA3; --brand-primary-darker: #004A6E; --brand-primary-darkest: #0A2540; --brand-primary-soft: #E5F4FB; --brand-primary-softer: #F0F9FE; /* --- Tokens semánticos --- */ --success: #22C55E; --success-dark: #15803D; --success-bg: #F0FDF4; --warning: #F59E0B; /* Variante oscura del ámbar. Texto sobre fondo claro: --warning sobre blanco da ~2.1:1 y no pasa contraste (DUX 1.3). Completa la tríada que --success-dark y --danger-dark ya establecen. */ --warning-dark: #B45309; --warning-bg: #FFFBEB; --danger: #EF4444; --danger-dark: #B91C1C; --danger-bg: #FEF2F2; /* --- Tokens de interfaz --- */ --bg: #F8F9FB; --card: #FFFFFF; --border: #E8ECF1; --border-soft: #F1F3F6; --text: #0F1729; --text-secondary: #3B4963; --text-muted: #7C8BA1; --text-light: #A3B1C6; --text-faint: #D1D5DB; /* --- Escala de grises neutros (Slate) --- */ --g50: #F8FAFC; --g100: #F1F5F9; --g200: #E2E8F0; --g300: #CBD5E1; --g400: #94A3B8; --g500: #64748B; --g600: #475569; --g700: #334155; --g900: #0F172A; /* ============================================================ 2. TOKENS OPCIONALES ESPECÍFICOS DE SARA (DUX 1.3) ============================================================ */ /* --- Accent secundario (módulo Establecimientos y Contactos) --- */ --accent-secondary: #8B5CF6; /* --- Accent terciario (timelines y secciones cronológicas) --- */ --accent-tertiary: #F59E0B; /* --- Accent CTA promocional (landing, prueba gratuita) --- */ --accent-cta-promo: #FF8B13; /* --- Glow / accent claro (gradientes radiales, highlights de marca) --- */ --accent-glow: #5CC8F0; /* --- Familia Premium / Highlight (badge "NUEVO" con shimmer) --- */ --premium: #D4A017; --premium-soft: #FDF4DC; --premium-shine: #F5D060; /* ============================================================ 3. TIPOGRAFÍA (DUX 2) ============================================================ */ --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* --- Escala tipográfica --- */ --fs-h1: 18px; --fs-h1-mobile: 16px; --fs-h2: 13px; --fs-card-title: 14px; --fs-body: 13px; --fs-label-uppercase: 10px; --fs-badge: 11px; --fs-mono-small: 10px; --fs-mono-medium: 12px; --fs-amount: 14px; --fs-timestamp: 11px; /* --- Pesos --- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ============================================================ 4. ICONOGRAFÍA (DUX 3) ============================================================ */ --stroke-width-default: 1.8; --icon-size-section: 16px; --icon-size-action: 14px; --icon-size-counter: 12px; --icon-size-mood: 20px; --icon-size-type: 26px; /* ============================================================ 5. RADIOS, SOMBRAS Y ESPACIADO ============================================================ */ --radius-sm: 4px; --radius-md: 7px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-pill: 9999px; --shadow-card-hover: 0 4px 16px rgba(0, 154, 219, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06); --shadow-button-primary: 0 2px 6px rgba(0, 154, 219, 0.30); --shadow-button-primary-hover: 0 4px 12px rgba(0, 154, 219, 0.40); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15); /* ============================================================ 6. INTERACCIONES (DUX 7) ============================================================ */ --transition-base: 0.2s ease; --transition-enter: 0.4s ease; /* ============================================================ 7. RESPONSIVE (DUX 8) ============================================================ */ --breakpoint-mobile: 640px; --breakpoint-tablet: 1023px; --breakpoint-desktop: 1024px; --breakpoint-min: 360px; --container-max: 1060px; } /* ============================================================ 8. ANIMACIÓN: SHIMMER PARA BADGE "NUEVO" (PREMIUM) ============================================================ */ @keyframes premium-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .premium-badge-shimmer { background: linear-gradient( 90deg, var(--premium) 0%, var(--premium-shine) 50%, var(--premium) 100% ); background-size: 200% 100%; animation: premium-shimmer 2.5s linear infinite; color: var(--card); font-weight: var(--fw-bold); font-family: var(--font-body); font-size: var(--fs-badge); padding: 3px 10px; border-radius: var(--radius-md); } /* ============================================================ 9. ANIMACIÓN: SHINE EN GRÁFICAS (DONUT, BARRAS) ============================================================ */ @keyframes graph-shine { 0% { transform: translateX(-100%); opacity: 0; } 20% { opacity: 0.35; } 80% { opacity: 0.35; } 100% { transform: translateX(200%); opacity: 0; } } .graph-shine-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100% ); pointer-events: none; animation: graph-shine 1.5s ease-in-out; animation-iteration-count: 1; } /* Aplicar cada 8s vía JS o animation-delay si es loop ambiental */ /* ============================================================ 10. ANIMACIÓN: LOADER DE REORDENAMIENTO ============================================================ */ @keyframes loader-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .reorder-loader-cube { width: 9px; height: 9px; border-radius: 2.5px; background: linear-gradient(135deg, var(--accent-cta-promo), var(--danger)); animation: loader-bounce 0.8s ease infinite; } .reorder-loader-cube:nth-child(1) { animation-delay: 0.0s; } .reorder-loader-cube:nth-child(2) { animation-delay: 0.1s; } .reorder-loader-cube:nth-child(3) { animation-delay: 0.2s; } .reorder-loader-cube:nth-child(4) { animation-delay: 0.3s; } .reorder-loader-cube:nth-child(5) { animation-delay: 0.4s; } /* ============================================================ 11. ANIMACIÓN: PÁNICO PULSE ============================================================ */ @keyframes panic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } } .panic-button-active { animation: panic-pulse 1.4s ease-in-out infinite; } /* ============================================================ 12. ICONOGRAFÍA DE ÁNIMOS DEL CLIENTE (4 ESTADOS) ============================================================ Inline SVG references — los SVG concretos viven en resources/svg/animos/ y se cargan vía @include en Blade. Esta sección define solo los colores de cada ánimo. ============================================================ */ .mood-contento { color: var(--success-dark); } .mood-enojado { color: var(--danger-dark); } .mood-dudoso { color: var(--accent-tertiary); } .mood-preocupado { color: var(--warning); } .mood-indiferente { color: var(--text-muted); } /* ============================================================ 13. ICONOGRAFÍA DE TIPOS DE INSTITUCIÓN ============================================================ Avatar 52x52, fondo brand-primary-softer, borde brand-primary con 20% opacity, ícono SVG outline en color brand-primary-darker. ============================================================ */ .institution-avatar { width: 52px; height: 52px; border-radius: var(--radius-2xl); background: var(--brand-primary-softer); border: 1px solid rgba(0, 154, 219, 0.20); display: flex; align-items: center; justify-content: center; color: var(--brand-primary-darker); } .institution-avatar svg { width: 26px; height: 26px; stroke-width: var(--stroke-width-default); fill: none; stroke: currentColor; } /* ============================================================ 14. CARGAS DE FUENTES (Google Fonts) ============================================================ Importar en el layout principal vía o @import. Pesos requeridos: - Sora: 600, 700, 800 - Plus Jakarta Sans: 400, 500, 600, 700, 800 - JetBrains Mono: 400, 500, 700 ============================================================ */ /* Recomendado en layouts/app.blade.php (NO en este CSS, para evitar bloquear el parser): */ /* ============================================================ 15. RESETS Y DEFAULTS GLOBALES ============================================================ */ body { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text); font-weight: var(--fw-bold); margin: 0; } code, pre, .mono { font-family: var(--font-mono); } /* Fin del tema sara-blue-default — Rev.270426-1430 */