/* =================================================================== * FENIX Prospector — estilos base (extraidos de base.html en Fase 4) * Tokens de marca + tema claro/oscuro. Tailwind (CDN) hace el resto. * =================================================================== */ /* ---- Tokens: TEMA CLARO (default) ---- */ :root { --brand: #1d4ed8; /* azul registro */ --brand-dark: #14328f; --brand-soft: #eaf0ff; --brand-line: #cdddff; --signal: #b45309; /* ambar oportunidad */ --signal-soft: #fdf3e3; --ok: #15803d; --ok-soft: #e7f4ec; --warn: #a16207; --warn-soft: #fbf3dd; --bad: #b91c1c; --bad-soft: #fbeaea; /* Superficies / texto (frios, elegidos no heredados) */ --page: #FBFCFE; --surface: #ffffff; --surface-2: #f5f8fc; --border: rgba(15,23,42,.07); --border-strong: #e2e8f0; --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; --nav-active-bg: var(--brand-soft); --nav-active-fg: var(--brand); --card-shadow: 0 1px 3px rgba(15,23,42,.03); --card-shadow-hover: 0 4px 20px rgba(15,23,42,.05); } /* ---- Tokens: TEMA OSCURO ---- * Se aplica de dos formas: por preferencia del SO (prefers-color-scheme) * y por toggle explicito del usuario (data-theme="dark" en ). * El toggle SIEMPRE gana sobre la preferencia del SO. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #5b8bff; --brand-dark: #7ea3ff; --brand-soft: #16233f; --brand-line: #264066; --signal: #e6a84e; --signal-soft: #2a2110; --ok: #4ec27e; --ok-soft: #12271b; --warn: #dcb64a; --warn-soft: #282010; --bad: #f0736f; --bad-soft: #2a1414; --page: #0a1120; --surface: #111b2e; --surface-2: #16223a; --border: rgba(148,163,184,.14); --border-strong: #26344a; --text: #f1f5fb; --text-2: #a7b4c8; --text-3: #7f8da6; --nav-active-fg: #9db9ff; --card-shadow: 0 1px 2px rgba(0,0,0,.4); --card-shadow-hover: 0 12px 40px -14px rgba(0,0,0,.6); } } :root[data-theme="dark"] { --brand: #5b8bff; --brand-dark: #7ea3ff; --brand-soft: #16233f; --brand-line: #264066; --signal: #e6a84e; --signal-soft: #2a2110; --ok: #4ec27e; --ok-soft: #12271b; --warn: #dcb64a; --warn-soft: #282010; --bad: #f0736f; --bad-soft: #2a1414; --page: #0a1120; --surface: #111b2e; --surface-2: #16223a; --border: rgba(148,163,184,.14); --border-strong: #26344a; --text: #f1f5fb; --text-2: #a7b4c8; --text-3: #7f8da6; --nav-active-fg: #9db9ff; --card-shadow: 0 1px 2px rgba(0,0,0,.4); --card-shadow-hover: 0 12px 40px -14px rgba(0,0,0,.6); } /* ---- Base ---- */ body { background: var(--page); color: var(--text-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -.01em; font-feature-settings: 'kern' 1, 'liga' 1; } h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; text-wrap: balance; letter-spacing: -.02em; } .font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.02em; } ::selection { background: var(--brand); color: #fff; } /* ---- Componentes ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--card-shadow); transition: box-shadow .3s, border-color .3s, background .3s; } .card:hover { box-shadow: var(--card-shadow-hover); } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 12px rgba(29,78,216,.2); } .btn-primary:hover { background: var(--brand-dark); box-shadow: 0 6px 24px rgba(29,78,216,.28); transform: translateY(-1px); } .nav-link { position: relative; transition: color .15s, background .15s; } .nav-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); padding: 14px 12px 5px; } /* ---- Animaciones ---- */ main { animation: pageIn .22s ease-out; } @keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline-flex; animation: pulse 1s ease-in-out infinite; } .htmx-request.htmx-indicator { display: inline-flex; } /* ---- Boton con spinner de carga (acciones que disparan un fetch largo) ---- * Uso: * Mientras la peticion esta en vuelo, HTMX pone .htmx-request en el boton: * aparece el spinner, el label baja de opacidad y el boton se atenua. */ .fx-load-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; } .fx-load-btn[disabled] { opacity: .7; cursor: progress; } .fx-load-spinner { display: none; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: fxspin .6s linear infinite; } .fx-load-btn.htmx-request .fx-load-spinner { display: inline-block; } .fx-load-btn.htmx-request .fx-load-label { opacity: .85; } @keyframes fxspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .fx-load-spinner { animation-duration: 1.4s; } } .htmx-swapping { opacity: 0; transition: opacity .12s ease-out; } .htmx-settling { transition: opacity .18s ease-in; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } tbody tr { transition: background .12s; } @keyframes fxModalIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* =================================================================== * Puente de modo oscuro para clases Tailwind hardcoded. * La app tiene cientos de utilidades de color fijas (text-gray-900, * bg-white...) que no responden a data-theme. En vez de reescribir * todo el markup, remapeamos las mas comunes cuando el tema es oscuro. * Solo aplica bajo [data-theme="dark"] o SO oscuro sin override claro. * =================================================================== */ :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* Reglas de remapeo — se activan con la clase .fx-dark en (la pone app.js), * asi el toggle y el SO comparten la misma logica de "gana el override". */ html.fx-dark body { background: var(--page); color: var(--text-2); } /* Superficies */ html.fx-dark .bg-white { background-color: var(--surface) !important; } html.fx-dark .bg-gray-50 { background-color: var(--surface-2) !important; } html.fx-dark .bg-gray-100 { background-color: var(--surface-2) !important; } html.fx-dark .bg-gray-100\/50, html.fx-dark .bg-brand-50\/40, html.fx-dark .bg-brand-50\/30 { background-color: rgba(91,139,255,.08) !important; } /* Textos */ html.fx-dark .text-gray-900, html.fx-dark .text-gray-800 { color: var(--text) !important; } html.fx-dark .text-gray-700, html.fx-dark .text-gray-600, html.fx-dark .text-gray-500 { color: var(--text-2) !important; } html.fx-dark .text-gray-400, html.fx-dark .text-gray-300 { color: var(--text-3) !important; } /* Bordes */ html.fx-dark .border-gray-100, html.fx-dark .border-gray-200, html.fx-dark .border-gray-300 { border-color: var(--border-strong) !important; } /* Marca (nav activo, badges azules suaves) */ html.fx-dark .bg-brand-50 { background-color: var(--brand-soft) !important; } html.fx-dark .text-brand-500, html.fx-dark .text-brand-600, html.fx-dark .text-brand-700 { color: var(--brand) !important; } /* Badges de estado con fondo -50 y texto -700: subir contraste en dark */ html.fx-dark .bg-green-50 { background-color: var(--ok-soft) !important; } html.fx-dark .text-green-700 { color: var(--ok) !important; } html.fx-dark .bg-amber-50 { background-color: var(--warn-soft) !important; } html.fx-dark .text-amber-700 { color: var(--warn) !important; } html.fx-dark .bg-red-50 { background-color: var(--bad-soft) !important; } html.fx-dark .text-red-700 { color: var(--bad) !important; } /* Inputs */ html.fx-dark input, html.fx-dark select, html.fx-dark textarea { background-color: var(--surface-2); color: var(--text); border-color: var(--border-strong); } html.fx-dark input::placeholder, html.fx-dark textarea::placeholder { color: var(--text-3); } @media (prefers-reduced-motion: reduce) { main, .card, .btn-primary { animation: none !important; transition: none !important; } }