/* SINERGIA — capa de identidad sobre Tailwind (Fase 1 UX + sistema glass) */ body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ══ Fondo ambiental "aurora" ══ El color base vive en ; el body queda transparente y un ::before fijo pinta tres luces de marca (indigo/ámbar/esmeralda) muy suaves. Es lo que el glass difumina — fijo, así el blur no se recalcula al hacer scroll. */ html { background-color: #F7F7FB; } html.dark { background-color: #101120; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42rem 30rem at 12% -8%, rgba(109, 110, 236, 0.16), transparent 62%), radial-gradient(36rem 26rem at 92% 8%, rgba(233, 104, 59, 0.10), transparent 62%), radial-gradient(44rem 32rem at 45% 112%, rgba(57, 164, 102, 0.10), transparent 62%); } .dark body::before { background: radial-gradient(42rem 30rem at 12% -8%, rgba(109, 110, 236, 0.20), transparent 62%), radial-gradient(36rem 26rem at 92% 8%, rgba(233, 104, 59, 0.10), transparent 62%), radial-gradient(44rem 32rem at 45% 112%, rgba(57, 164, 102, 0.10), transparent 62%); } /* ══ Sistema glass (intensidad media: texto siempre sobre ≥70% de opacidad) ══ */ /* Barra de navegación: sticky, translúcida, con blur */ .glass-nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid rgba(109, 110, 236, 0.14); box-shadow: 0 1px 12px rgba(29, 29, 78, 0.05); } .dark .glass-nav { background: rgba(16, 17, 32, 0.66); border-bottom-color: rgba(175, 175, 246, 0.10); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); } /* Tarjeta: la superficie de contenido estándar. El borde va con :where() (especificidad 0) para que los estados de selección de Tailwind (border-indigo-300, ring…) siempre puedan ganarle. */ .glass-card { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 2px rgba(29, 29, 78, 0.04), 0 8px 24px -12px rgba(29, 29, 78, 0.12); } :where(.glass-card) { border: 1px solid rgba(255, 255, 255, 0.65); } :where(.dark .glass-card) { border-color: rgba(175, 175, 246, 0.10); } .dark .glass-card { background: rgba(25, 26, 43, 0.62); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.45); } /* Panel fuerte: modales y superficies flotantes sobre contenido */ .glass-panel { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 20px 50px -12px rgba(29, 29, 78, 0.25); } .dark .glass-panel { background: rgba(25, 26, 43, 0.80); border-color: rgba(175, 175, 246, 0.12); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6); } /* Elevación al pasar el cursor — solo para tarjetas interactivas */ .lift { transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out; } .lift:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(29, 29, 78, 0.05), 0 14px 32px -12px rgba(84, 84, 233, 0.22); } .dark .lift:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 32px -12px rgba(109, 110, 236, 0.35); } /* Feedback de presión en botones y tarjetas clicables */ .press { transition: transform 0.12s ease-out; } .press:active { transform: scale(0.98); } /* Sin soporte de backdrop-filter, o con transparencia reducida: las superficies se vuelven casi opacas — se pierde el efecto, no la legibilidad */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-nav, .glass-card, .glass-panel { background: rgba(255, 255, 255, 0.97); } .dark .glass-nav, .dark .glass-card, .dark .glass-panel { background: rgba(25, 26, 43, 0.97); } } @media (prefers-reduced-transparency: reduce) { .glass-nav, .glass-card, .glass-panel { background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; } .dark .glass-nav, .dark .glass-card, .dark .glass-panel { background: rgba(25, 26, 43, 0.97); } } h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; letter-spacing: -0.015em; } /* Wordmark de la marca */ .wordmark { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; color: #4444C4; text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; } .wordmark .chispa { width: 7px; height: 7px; border-radius: 9999px; background: #E9683B; display: inline-block; transform: translateY(-0.72em); } .wordmark:hover { color: #5454E9; } /* Foco visible y consistente (WCAG 2.4.7) */ :focus-visible { outline: 2px solid #5454E9; outline-offset: 2px; border-radius: 4px; } /* El documento del lienzo respira mejor */ .prose { line-height: 1.7; } .prose table { font-size: 0.8rem; } .prose :first-child { margin-top: 0; } .prose :last-child { margin-bottom: 0; } /* Scrollbars discretos (WebKit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #CBCDDD; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: #6E7188; } ::-webkit-scrollbar-track { background: transparent; } /* Movimiento reducido: se respeta la preferencia del sistema */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } [x-cloak] { display: none !important; } /* Markdown dentro de las burbujas del diálogo (negritas, listas, código) */ .msg-md p { margin: 0 0 0.5rem; } .msg-md p:last-child { margin-bottom: 0; } .msg-md ul, .msg-md ol { margin: 0.25rem 0 0.5rem; padding-left: 1.15rem; } .msg-md ul:last-child, .msg-md ol:last-child { margin-bottom: 0; } .msg-md ul { list-style: disc; } .msg-md ol { list-style: decimal; } .msg-md li { margin: 0.15rem 0; } .msg-md strong { font-weight: 600; } .msg-md code { background: rgba(109, 110, 236, 0.10); border-radius: 4px; padding: 0 4px; font-size: 0.85em; } .dark .msg-md code { background: rgba(175, 175, 246, 0.15); } /* Los mensajes del diálogo entran con suavidad */ .msg-in { animation: msgIn 0.22s ease-out; } @keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Indicador "pensando" con tres puntos */ .dots { display: inline-flex; align-items: center; } .dots span { width: 6px; height: 6px; border-radius: 9999px; background: #6E7188; display: inline-block; margin-right: 3px; animation: dotBounce 1.2s infinite ease-in-out; } .dots span:nth-child(2) { animation-delay: 0.15s; } .dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes dotBounce { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Botón flotante al seleccionar texto en el documento */ .sel-btn { position: fixed; z-index: 50; } /* ── Modo oscuro (clase .dark en , ver _head.htm) ── */ .dark { color-scheme: dark; } .dark .wordmark { color: #AFAFF6; } .dark .wordmark:hover { color: #CFCFFA; } .dark :focus-visible { outline-color: #8C8DF0; } .dark ::-webkit-scrollbar-thumb { background: #383A4C; background-clip: content-box; border: 2px solid transparent; } .dark ::-webkit-scrollbar-thumb:hover { background-color: #585B70; } .dark .dots span { background: #9CA0B8; }