/* ============================================================ Nexode · AdminLTE 3 — TOKENS & THEMES ------------------------------------------------------------ Capa 1 de 3. Define: · Fuentes (Geist / Geist Mono / Fraunces) · Tokens base (superficies, tinta, líneas, sombras, radios) · Dos modos: .theme-noche (oscuro, por defecto) y .theme-papel (claro) · 8 paletas por aplicación — UNA sola variable por app: --accent-base El modo claro/oscuro se calcula solo a partir de ella. Cómo se usa (en ): → oscuro, miel → claro, mar ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..600&family=Geist+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@1,9..144,300..500&display=swap'); /* ──────────────────────────────────────────────────────────── PALETAS POR APLICACIÓN · una variable: --accent-base Funciona de DOS formas (elige la que te encaje): · atributo: · clase: (útil con el paquete jeroennoten/laravel-adminlte, que solo deja añadir clases al body vía config 'classes_body') (color vibrante pensado para modo oscuro; el modo claro lo oscurece automáticamente más abajo) --on-accent = color del texto/icono SOBRE el acento (botones) ──────────────────────────────────────────────────────────── */ :root { --accent-base: #2563FF; --on-accent: #ffffff; } /* Nexode (por defecto) */ [data-app="deporte"], .app-deporte { --accent-base: #F2552C; --on-accent: #ffffff; } /* energía · rojo-naranja */ [data-app="apiruta"], .app-apiruta { --accent-base: #E9A21B; --on-accent: #1A1206; } /* miel · ámbar dorado */ [data-app="hosteleria"], .app-hosteleria { --accent-base: #D9484A; --on-accent: #ffffff; } /* terracota · granate */ [data-app="expedienta"], .app-expedienta { --accent-base: #4F6FF5; --on-accent: #ffffff; } /* documental · índigo */ [data-app="bateaflow"], .app-bateaflow { --accent-base: #16B6C9; --on-accent: #06181B; } /* mar · teal */ [data-app="cuadraflow"], .app-cuadraflow { --accent-base: #9B7CF0; --on-accent: #ffffff; } /* calendario · violeta */ [data-app="tallerflow"], .app-tallerflow { --accent-base: #EE7A22; --on-accent: #1A0F03; } /* taller · naranja */ [data-app="agriparcela"],.app-agriparcela{ --accent-base: #3DA65A; --on-accent: #06160B; } /* campo · verde */ [data-app="agroparcela"],.app-agroparcela{ --accent-base: #3DA65A; --on-accent: #06160B; } /* agrario · verde */ /* ════════════════════════════════════════════════════════════ MODO OSCURO — noche (por defecto) ════════════════════════════════════════════════════════════ */ :root, .theme-noche { /* Superficies */ --bg: #0A0D14; --bg-2: #121620; --bg-3: #1A1F2B; --bg-soft: #0E121A; --surface-glass: rgba(18, 22, 32, 0.78); --surface-sheen: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 38%); /* Tinta (rampa fría 6 pasos) */ --ink-100: #EEF2F8; --ink-80: #AEB8CA; --ink-60: #717E94; --ink-40: #4A5468; --ink-20: #262D3B; --ink-10: #141A24; --ink: var(--ink-100); --ink-2: var(--ink-80); --ink-3: var(--ink-60); /* Líneas (tinte azul frío, nunca gris neutro) */ --hair: rgba(140, 165, 255, 0.06); --line: rgba(140, 165, 255, 0.10); --line-2: rgba(140, 165, 255, 0.18); --fill-soft: rgba(140, 165, 255, 0.04); --fill-hover:rgba(140, 165, 255, 0.08); /* Acento — derivado de --accent-base (modo oscuro = tal cual) */ --accent: var(--accent-base); --accent-soft: color-mix(in oklch, var(--accent-base) 16%, transparent); --accent-tint: color-mix(in oklch, var(--accent-base) 24%, transparent); --accent-glow: color-mix(in oklch, var(--accent-base) 45%, transparent); --accent-ink: color-mix(in oklch, var(--accent-base), white 26%); /* texto de acento sobre fondo oscuro */ --accent-2: #FF7A59; /* coral editorial (Fraunces) — continuidad de marca */ /* Estados (solo UI de producto) */ --ok: #42d392; --ok-bg: rgba(66, 211, 146, 0.15); --warn: #EAB308; --warn-bg: rgba(234, 179, 8, 0.15); --err: #ef4444; --err-bg: rgba(239, 68, 68, 0.15); --info: #60a5fa; --info-bg: rgba(96, 165, 250, 0.15); /* Sombras */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.28); --shadow-sm: 0 2px 6px -1px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.24); --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.40), 0 2px 8px -2px rgba(0,0,0,0.28); --shadow-lg: 0 20px 48px -16px rgba(0,0,0,0.52), 0 6px 16px -8px rgba(0,0,0,0.34); --shadow-glow: 0 4px 18px -2px var(--accent-glow); --amb-1: color-mix(in oklch, var(--accent-base) 12%, transparent); --amb-2: color-mix(in oklch, var(--accent-base) 8%, transparent); } /* ════════════════════════════════════════════════════════════ MODO CLARO — papel El acento se OSCURECE automáticamente para contraste AA. ════════════════════════════════════════════════════════════ */ .theme-papel { --bg: #F7F9FC; --bg-2: #FFFFFF; --bg-3: #EDF1F8; --bg-soft: #F1F4FA; --surface-glass: rgba(247, 249, 252, 0.82); --surface-sheen: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 42%); --ink-100: #0B1220; --ink-80: #2A3550; --ink-60: #45526E; --ink-40: #6E7A92; --ink-20: #B7C1D4; --ink-10: #DCE3EF; --ink: var(--ink-100); --ink-2: var(--ink-80); --ink-3: var(--ink-60); --hair: rgba(40, 70, 160, 0.07); --line: rgba(40, 70, 160, 0.13); --line-2: rgba(40, 70, 160, 0.22); --fill-soft: rgba(40, 70, 160, 0.045); --fill-hover:rgba(40, 70, 160, 0.09); /* Acento oscurecido para papel (una sola fórmula, válida para las 8 apps) */ --accent: color-mix(in oklch, var(--accent-base), #0B1220 18%); --accent-soft: color-mix(in oklch, var(--accent-base) 12%, transparent); --accent-tint: color-mix(in oklch, var(--accent-base) 18%, transparent); --accent-glow: color-mix(in oklch, var(--accent-base) 30%, transparent); --accent-ink: color-mix(in oklch, var(--accent-base), #0B1220 26%); --accent-2: #E0552F; --ok: #1a9d63; --ok-bg: rgba(26, 157, 99, 0.14); --warn: #b5840a; --warn-bg: rgba(181, 132, 10, 0.14); --err: #d23b3b; --err-bg: rgba(210, 59, 59, 0.12); --info: #2c6fd6; --info-bg: rgba(44, 111, 214, 0.12); --shadow-xs: 0 1px 2px rgba(40,70,160,0.07); --shadow-sm: 0 2px 6px -1px rgba(40,70,160,0.10), 0 1px 2px rgba(40,70,160,0.08); --shadow-md: 0 8px 24px -8px rgba(40,70,160,0.14), 0 2px 8px -2px rgba(40,70,160,0.10); --shadow-lg: 0 20px 48px -16px rgba(40,70,160,0.18), 0 6px 16px -8px rgba(40,70,160,0.12); --shadow-glow: 0 4px 18px -2px var(--accent-glow); --amb-1: color-mix(in oklch, var(--accent-base) 9%, transparent); --amb-2: color-mix(in oklch, var(--accent-base) 6%, transparent); } /* ──────────────────────────────────────────────────────────── Familias y escala tipográfica ──────────────────────────────────────────────────────────── */ :root { --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --font-serif: 'Fraunces', 'Times New Roman', serif; --tracking-mono: 0.08em; --tracking-eye: 0.10em; /* Radios */ --r-chip: 8px; --r-ctrl: 10px; --r-card: 14px; --r-card-l: 22px; --r-pill: 100px; /* Motion */ --ease: cubic-bezier(.22, .61, .26, 1); --t-fast: .16s; --t-base: .24s; }