/* RefLab — design tokens & shared styles */ :root { /* Base palette — warm light */ --bg: #f6f4ee; --surface: #ffffff; --surface-2: #fbfaf6; --ink: #14161a; --ink-2: #2a2c33; --muted: #4a4d55; --muted-2: #7e818a; --line: #e6e3d8; --line-2: #efece2; /* Accents — default: periwinkle + lime */ --primary: #5b5cff; --primary-ink: #ffffff; --primary-soft: #ebebff; --accent: #d7ff4f; --accent-ink: #14161a; --warm: #ff8b6b; /* Type */ --font-sans: "Geist", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Newsreader", "Source Serif Pro", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Spacing */ --radius: 14px; --radius-lg: 22px; --radius-sm: 8px; --shadow-card: 0 1px 0 rgba(20,22,26,.04), 0 2px 8px -2px rgba(20,22,26,.06); --shadow-pop: 0 12px 36px -8px rgba(20,22,26,.18), 0 2px 6px rgba(20,22,26,.06); } /* Palette variants applied via [data-palette] on */ html[data-palette="forest"] { --primary: #2f7a5b; --primary-soft: #e5f3ec; --accent: #ffd166; --warm: #e07a5f; } html[data-palette="cobalt"] { --primary: #1f5fff; --primary-soft: #e6efff; --accent: #ff8b6b; --warm: #d7ff4f; } html[data-palette="lavender"] { --primary: #7a5af0; --primary-soft: #efebff; --accent: #ffc870; --warm: #ff97c1; } html[data-mode="dark"] { --bg: #09090e; --surface: #111118; --surface-2: #17171f; --ink: #f0eff8; --ink-2: #cccad8; --muted: #9896a8; --muted-2: #5e5c6e; --line: #1f1f2e; --line-2: #18182a; --primary: #7b7cff; --primary-soft: #16163a; --accent: #ffd166; --warm: #ff9f6b; --shadow-card: 0 1px 0 rgba(255,255,255,.03), 0 2px 12px rgba(0,0,0,.55); --shadow-pop: 0 12px 40px rgba(0,0,0,.65); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); } body { background-color: transparent; color: var(--ink); font-family: var(--font-sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: 16px; line-height: 1.5; overflow-x: hidden; isolation: isolate; } /* ============================================================ DYNAMIC BACKGROUND — capa transversal Renderizada con dos
reales como primeras hijas del body: Gracias al `isolation: isolate` en body, los z-index negativos funcionan: la capa queda detrás del contenido pero sobre el bg. ============================================================ */ html { --bg-intensity: 0.8; } .rl-bg, .rl-bg-noise { position: fixed; inset: 0; z-index: -2; pointer-events: none; will-change: transform; } .rl-bg-noise { z-index: -1; opacity: 0.16; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } html[data-mode="dark"] .rl-bg-noise { mix-blend-mode: screen; opacity: 0.08; } /* ---------- AURORA (default) ---------- */ html[data-bg="aurora"] .rl-bg, html:not([data-bg]) .rl-bg { background: radial-gradient(900px 700px at 12% 15%, var(--primary) 0%, transparent 55%), radial-gradient(800px 650px at 88% 70%, var(--accent) 0%, transparent 55%), radial-gradient(700px 600px at 50% 100%, var(--warm) 0%, transparent 55%), radial-gradient(500px 450px at 95% 5%, var(--primary) 0%, transparent 60%); filter: saturate(115%); opacity: var(--bg-intensity); animation: aurora-drift 38s ease-in-out infinite alternate; } html[data-mode="dark"][data-bg="aurora"] .rl-bg, html[data-mode="dark"]:not([data-bg]) .rl-bg { filter: saturate(220%) brightness(1.05); opacity: calc(var(--bg-intensity) * 0.65); } @keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 33% { transform: translate3d(3%, -2%, 0) scale(1.06) rotate(2deg); } 66% { transform: translate3d(-2%, 3%, 0) scale(0.98) rotate(-1.5deg); } 100% { transform: translate3d(2%, 1%, 0) scale(1.03) rotate(1deg); } } /* ---------- MESH (estático) ---------- */ html[data-bg="mesh"] .rl-bg { background: radial-gradient(800px 600px at 18% 22%, var(--primary), transparent 55%), radial-gradient(700px 550px at 82% 35%, var(--accent), transparent 55%), radial-gradient(600px 500px at 50% 92%, var(--warm), transparent 55%); filter: saturate(110%); opacity: var(--bg-intensity); } /* ---------- GRID ---------- */ html[data-bg="grid"] .rl-bg { background-image: linear-gradient(to right, color-mix(in oklab, var(--ink) 8%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--ink) 8%, transparent) 1px, transparent 1px), radial-gradient(600px 500px at 30% 40%, var(--primary), transparent 50%), radial-gradient(600px 500px at 70% 60%, var(--accent), transparent 50%); background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%; animation: grid-drift 60s linear infinite; opacity: calc(var(--bg-intensity) * 0.85); } @keyframes grid-drift { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 48px 48px, 48px 48px, 0 0, 0 0; } } /* ---------- NONE ---------- */ html[data-bg="none"] .rl-bg, html[data-bg="none"] .rl-bg-noise { display: none; } @media (prefers-reduced-motion: reduce) { .rl-bg { animation: none !important; } } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } .italic-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } /* Layout */ .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; } .container-narrow { max-width: 980px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; text-decoration: none; transition: transform .08s ease, opacity .15s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 16px rgba(91,92,255,.28), 0 1px 3px rgba(91,92,255,.15); } .btn-primary:hover { opacity: .9; box-shadow: 0 6px 22px rgba(91,92,255,.42), 0 2px 6px rgba(91,92,255,.2); } .btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } .btn-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px rgba(255,209,102,.3); } .btn-accent:hover { filter: brightness(0.97); box-shadow: 0 6px 20px rgba(255,209,102,.45); } .btn-sm { height: 36px; padding: 0 15px; font-size: 13.5px; } .btn-lg { height: 52px; padding: 0 26px; font-size: 15.5px; } /* Chips / Pills */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: 0.01em; } .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); display: inline-block; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } /* Eyebrows */ .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* Section spacing */ section.section { padding: 96px 0; } @media (max-width: 720px) { section.section { padding: 64px 0; } .container { padding: 0 20px; } } /* Headlines */ h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink) !important; } h1 { font-size: clamp(40px, 6.2vw, 76px); } h2 { font-size: clamp(32px, 4.4vw, 52px); } h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.01em; } p { margin: 0; } /* Mode toggle — shared across pages */ .mode-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; flex-shrink: 0; } .mode-toggle:hover { color: var(--primary); border-color: var(--primary); } .mode-toggle svg { width: 15px; height: 15px; } .mode-toggle .ic-sun { display: block; } .mode-toggle .ic-moon { display: none; } html[data-mode="dark"] .mode-toggle .ic-sun { display: none; } html[data-mode="dark"] .mode-toggle .ic-moon { display: block; } .text-muted { color: var(--muted); } .text-mono { font-family: var(--font-mono); } .divider { height: 1px; background: var(--line); width: 100%; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } /* ============================================================ APP SHELL — compartido entre todas las páginas custom psicopausa_header() usa estas clases; antes venían de psicopausa_css_vars(). Al definirlas aquí quedan disponibles en cualquier página que cargue reflab.css. ============================================================ */ #wpadminbar { display: none !important; } html { margin-top: 0 !important; } .header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-card); } .logo { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); letter-spacing: -.01em; } .logo span { color: var(--primary); } .logo-icon { width: 28px; height: 28px; background: var(--primary); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 900; color: var(--primary-ink); flex-shrink: 0; } .card-title { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1.25rem; } /* ============================================================ REPORT — clases para alert cards y elementos semánticos Definidos aquí para poder tener overrides dark mode limpios. ============================================================ */ /* Observaciones críticas / Inconsistencias críticas */ .card-obs-criticas { border-color: rgba(220,38,38,.3) !important; background: rgba(255,241,241,.88) !important; border-width: 1.5px !important; } .card-obs-criticas h2 { color: #b91c1c !important; } .card-obs-criticas .obs-arrow { color: #ef4444; flex-shrink: 0; margin-top: .15rem; font-size: .75rem; } .card-obs-criticas .obs-text { font-size: .875rem; color: #7f1d1d; line-height: 1.65; } html[data-mode="dark"] .card-obs-criticas { background: rgba(69,10,10,.4) !important; border-color: rgba(239,68,68,.22) !important; } html[data-mode="dark"] .card-obs-criticas h2 { color: #fca5a5 !important; } html[data-mode="dark"] .card-obs-criticas .obs-arrow { color: #f87171 !important; } html[data-mode="dark"] .card-obs-criticas .obs-text { color: #fecaca !important; } /* Tags de fortalezas y áreas de mejora */ .tag-strength { background: rgba(31,138,91,.08); color: #1a7a50; border-color: rgba(31,138,91,.2); } .tag-area { background: rgba(245,158,11,.08); color: #b45309; border-color: rgba(245,158,11,.22); } .tag-alert { background: rgba(239,68,68,.08); color: #dc2626; border-color: rgba(239,68,68,.2); } html[data-mode="dark"] .tag-strength { background: rgba(31,138,91,.14); color: #4ade80; border-color: rgba(74,222,128,.2); } html[data-mode="dark"] .tag-area { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(251,191,36,.2); } html[data-mode="dark"] .tag-alert { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(248,113,113,.2); } /* Zonas del score bar */ .score-zone { padding: .4rem .5rem; border-radius: 7px; text-align: center; } .score-zone-bajo { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.18); } .score-zone-medio { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.18); } .score-zone-alto { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.18); } .score-zone-muy-alto { background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.22); } .score-zone-bajo .zone-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #dc2626; } .score-zone-medio .zone-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b45309; } .score-zone-alto .zone-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #16a34a; } .score-zone-muy-alto .zone-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #15803d; } .score-zone .zone-range { font-size: .72rem; color: var(--muted); margin-top: .1rem; } html[data-mode="dark"] .score-zone-bajo { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.22); } html[data-mode="dark"] .score-zone-medio { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); } html[data-mode="dark"] .score-zone-alto { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); } html[data-mode="dark"] .score-zone-muy-alto { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.24); } html[data-mode="dark"] .score-zone-bajo .zone-label { color: #f87171; } html[data-mode="dark"] .score-zone-medio .zone-label { color: #fbbf24; } html[data-mode="dark"] .score-zone-alto .zone-label { color: #4ade80; } html[data-mode="dark"] .score-zone-muy-alto .zone-label { color: #34d399; } /* Evaluación del referente — sub-blocks */ .eval-ref-block { padding: .75rem; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); } .eval-ref-label { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* Competency match chips */ .comp-match { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); } .comp-gap { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); } .comp-neutral { background: var(--surface-2); border: 1px solid var(--line); } .comp-match .comp-icon { color: #16a34a; } .comp-gap .comp-icon { color: #b45309; } .comp-neutral .comp-icon { color: var(--muted); } .comp-match .comp-name { color: var(--ink-2); } .comp-gap .comp-name { color: var(--ink-2); } .comp-neutral .comp-name { color: var(--muted-2); } html[data-mode="dark"] .comp-match { background: rgba(34,197,94,.12); border-color: rgba(74,222,128,.25); } html[data-mode="dark"] .comp-gap { background: rgba(245,158,11,.12); border-color: rgba(251,191,36,.25); } html[data-mode="dark"] .comp-match .comp-icon { color: #4ade80; } html[data-mode="dark"] .comp-gap .comp-icon { color: #fbbf24; } /* Duración de la relación — barra */ .dur-bar-labels { display: flex; justify-content: space-between; font-size: .62rem; color: var(--muted); margin-top: .25rem; } html[data-mode="dark"] .dur-bar-labels { color: var(--muted-2); }