/* ============================================================================ * axui.css — Sistema de componentes del rediseño "clean" (Axis UI). * Fiel a la referencia (axis-demo.tomesieira.chatgpt.site): valores MEDIDOS con * getComputedStyle, no aproximados. CSS PLANO (sin build, sin Tailwind) para * evitar choques con el style.css actual de Axis. * NO INVASIVO: solo define tokens + clases .axn-*. No toca body/a/button globales * (salvo dentro de .axn-root). Se carga en el shell real SOLO cuando design_new. * ==========================================================================*/ /* ---- Fuentes self-hosted (la referencia usa DM Sans para texto, Geist para nº) ---- */ @font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('/assets/fonts/dm-sans.woff2') format('woff2'); } @font-face { font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/assets/fonts/geist.woff2') format('woff2'); } /* ---- Tokens (tema activo de la referencia). En :root para que resuelvan en TODA la página (sidebar, módulos re-skineados), no solo dentro de .axn-root. Solo se carga con design_new. ---- */ :root { /* SÍNTESIS DS Ola3: --axn-* son ALIAS del set canónico --axis-* / --r-* — un color/radio por concepto vive en * axui-tokens.css; aquí solo se referencia (los cientos de var(--axn-*) heredan sin tocarse). */ --axn-bg:#fff; --axn-surface:var(--axis-surface); /* fondo sidebar / secondary */ --axn-soft:var(--axis-soft); /* borde suave / muted bg */ --axn-line:var(--axis-line); /* borde de controles/cards */ --axn-ink:var(--axis-ink); /* texto principal */ --axn-muted:var(--axis-muted); /* texto secundario */ --axn-mint:var(--axis-mint); /* accent suave */ --axn-mint-strong:#c5f2e2; --axn-green-ink:var(--axis-green-ink); /* texto sobre mint */ --axn-green:#34d399; /* verde vivo de marca: En curso / activo */ --axn-chip:var(--axis-soft); /* chip pill */ --axn-search:var(--axis-surface); /* buscador */ --axn-warn-bg:#fdf0e1; /* badge alerta (lesión) */ --axn-warn-ink:#b45309; --axn-ok-bg:var(--axis-mint); --axn-ok-ink:var(--axis-green-ink); --axn-r:var(--r-card); /* radio card */ --axn-r-sm:var(--r-ctl); /* radio control */ --axn-r-lg:var(--r-card); /* radio card */ --axn-inset:32px; /* padding lateral del contenido */ --axn-gap:2.5rem; /* separación entre secciones */ --axn-width:1320px; } .axn-root { font-family:'DM Sans', system-ui, -apple-system, sans-serif; color:var(--axn-ink); background:var(--axn-bg); line-height:1.5; -webkit-font-smoothing:antialiased; } .axn-root *, .axn-root *::before, .axn-root *::after { box-sizing:border-box; } /* ---- Layout ---- */ .axn-page { max-width:var(--axn-width); margin-inline:auto; padding:var(--axn-inset); } .axn-section { margin-top:var(--axn-gap); } .axn-section:first-child { margin-top:0; } .axn-divider { height:1px; background:var(--axn-line); border:0; margin:0; } .axn-row-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; } .axn-stack { display:flex; flex-direction:column; } .axn-cluster { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } /* ---- Tipografía ---- */ .axn-h1 { font-size:40px; font-weight:600; letter-spacing:-1.4px; line-height:1.1; margin:0; } .axn-h2 { font-size:24px; font-weight:600; letter-spacing:-.84px; line-height:1.15; margin:0; } .axn-title { font-size:18px; font-weight:600; letter-spacing:-.3px; margin:0; } .axn-sub { font-size:14px; color:var(--axn-muted); margin:0; } .axn-muted { color:var(--axn-muted); } .axn-num { font-family:'Geist', system-ui, sans-serif; font-weight:600; letter-spacing:-.04em; line-height:1; } /* ---- Botones ---- */ .axn-btn { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-family:inherit; font-size:14px; font-weight:500; line-height:1; padding:.6rem .9rem; border-radius:var(--axn-r-sm); border:1px solid transparent; background:var(--axn-ink); color:#fff; text-decoration:none; white-space:nowrap; transition:opacity .15s, background .15s, border-color .15s; } .axn-btn:hover { opacity:.9; } .axn-btn svg { width:16px; height:16px; } .axn-btn--ghost { background:transparent; color:var(--axn-ink); border-color:var(--axn-line); } .axn-btn--ghost:hover { background:var(--axn-surface); opacity:1; } .axn-btn--pill { border-radius:999px; } .axn-btn--sm { padding:.4rem .7rem; font-size:13px; } /* ---- Chip (pill gris claro) ---- */ .axn-chip { display:inline-flex; align-items:center; gap:.35rem; background:var(--axn-chip); color:var(--axn-green-ink); border-radius:999px; padding:.35rem .7rem; font-size:14px; line-height:1; border:0; cursor:pointer; text-decoration:none; white-space:nowrap; } .axn-chip svg { width:15px; height:15px; } /* ---- Badges de estado ---- */ .axn-badge { display:inline-flex; align-items:center; gap:.3rem; border-radius:999px; padding:.25rem .6rem; font-size:13px; font-weight:500; line-height:1; background:var(--axn-soft); color:var(--axn-muted); } .axn-badge--warn { background:var(--axn-warn-bg); color:var(--axn-warn-ink); } .axn-badge--ok { background:var(--axn-ok-bg); color:var(--axn-ok-ink); } .axn-badge--live { background:var(--axn-green); color:#0b3a2a; } .axn-badge-dot { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; } /* ---- Inputs ---- */ .axn-input { font-family:inherit; font-size:14px; color:var(--axn-ink); background:var(--axn-search); border:0; border-radius:999px; padding:.5rem .9rem; width:100%; } .axn-input::placeholder { color:var(--axn-muted); } .axn-search { position:relative; display:inline-flex; align-items:center; width:100%; } .axn-search svg { position:absolute; left:12px; width:16px; height:16px; color:var(--axn-muted); pointer-events:none; } .axn-search .axn-input { padding-left:35px; } /* ---- Cards ---- */ .axn-card { background:var(--axn-bg); border:1px solid var(--axn-line); border-radius:var(--axn-r-lg); padding:24px; } .axn-card--flat { border:0; padding:0; background:transparent; } /* ---- KPI — CANÓNICO DEL DS (icono desnudo + número Geist + label + nota) ---- * Espejo EXACTO de `.axh-stat` (axhome.css), que es el KPI de "Tu panel de control" de la home y la * referencia visual del sistema. Este look es el POR DEFECTO a propósito: antes la base pintaba el * icono en círculo relleno y el aspecto correcto solo llegaba si el HTML se acordaba de envolver el * KPI en `.axn-fkpis` — una clase opcional que solo ponían 5 de los 18 ficheros que usan dash_kpi, así * que los otros 13 salían con el look viejo. Acertar no puede depender de recordar una clase. * El espaciado va en margin-top de cada hijo (no en gap) para poder calcarlo de .axh-stat. */ .axn-kpi { display:flex; flex-direction:column; gap:0; } .axn-kpi-ic { display:grid; place-items:center; width:2rem; height:2rem; color:var(--axis-ink); background:transparent; border-radius:0; } .axn-kpi-ic svg { width:1.85rem; height:1.85rem; } .axn-kpi-val { margin-top:1rem; font-family:'Geist','DM Sans',system-ui,sans-serif; font-weight:600; font-size:2rem; letter-spacing:-.035em; line-height:1.15; color:var(--axis-ink); } .axn-kpi-val small { font-size:1rem; font-weight:500; color:var(--axis-muted); letter-spacing:0; margin-left:2px; } .axn-kpi-label { margin-top:.7rem; font-size:.875rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--axis-ink); } .axn-kpi-note { margin-top:.25rem; font-size:.75rem; color:var(--axis-muted); } /* TONO SEMÁNTICO del número. El KPI plano deja el valor en tinta a propósito —el color no decora— pero hay métricas donde el color ES el dato: un RPE de 9, un dolor de 8 o unas sesiones canceladas no significan lo mismo que sus opuestos, y dejarlas en tinta las vuelve indistinguibles del resto. Se tiñe SOLO el número: el icono sigue desnudo y la tarjeta sin caja, así que el lenguaje del DS no cambia. Usar únicamente cuando el color aporta significado; si es adorno, no se usa. */ .axn-kpi-val--success { color:hsl(var(--success)); } .axn-kpi-val--warning { color:hsl(var(--warning)); } .axn-kpi-val--danger { color:hsl(var(--destructive)); } /* ---- Banner (sesión en curso / destacado) ---- */ .axn-banner { display:flex; align-items:center; gap:.75rem; border-radius:var(--axn-r); padding:.85rem 1rem; background:var(--axn-mint); color:var(--axn-green-ink); } .axn-banner--live { background:var(--axn-green); color:#0b3a2a; } /* ---- Avatar ---- */ .axn-av { width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--axn-soft); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--axn-muted); overflow:hidden; } .axn-av img { width:100%; height:100%; object-fit:cover; } .axn-av--sm { width:32px; height:32px; font-size:12px; } .axn-av--lg { width:56px; height:56px; font-size:18px; } /* ---- Fila de lista (sin caja, separada por línea) ---- */ .axn-row { display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--axn-line); } .axn-row:last-child { border-bottom:0; } .axn-row-main { flex:1; min-width:0; } .axn-row-name { font-weight:600; } .axn-row-sub { font-size:14px; color:var(--axn-muted); } /* ---- Score (número + subrayado por umbral) ---- */ .axn-score { display:inline-flex; flex-direction:column; align-items:flex-start; } .axn-score-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--axn-muted); } .axn-score-val { font-family:'Geist', system-ui, sans-serif; font-weight:600; font-size:20px; line-height:1.1; } .axn-score-val small { font-size:12px; color:var(--axn-muted); font-weight:500; } .axn-score-bar { height:3px; width:44px; border-radius:2px; margin-top:3px; background:currentColor; } /* Barra de progreso bajo el número de cada KPI del panel de rendimiento (clean): sustituye al anillo/donut y * usa el mismo lenguaje que el score de la lista. Ancho fijo centrado (por el flex-col del wrapper); relleno * por valor con color de semáforo (inline). */ .axn-kpi-bar { width:96px; max-width:100%; height:4px; margin-top:10px; border-radius:var(--r-ctl); background:var(--axis-soft); overflow:hidden; } .axn-kpi-bar > i { display:block; height:100%; border-radius:inherit; } /* ---- Tabs (subrayadas) ---- */ .axn-tabs { display:flex; gap:1.25rem; border-bottom:1px solid var(--axn-line); } .axn-tab { appearance:none; background:0; border:0; cursor:pointer; font-family:inherit; font-size:15px; color:var(--axn-muted); padding:.6rem 0; margin-bottom:-1px; border-bottom:2px solid transparent; text-decoration:none; } .axn-tab.is-active { color:var(--axn-ink); font-weight:600; border-bottom-color:var(--axn-ink); } /* ---- Link con flecha ---- */ .axn-link { display:inline-flex; align-items:center; gap:.25rem; font-size:14px; color:var(--axn-ink); text-decoration:none; } .axn-link:hover { color:var(--axn-green-ink); } .axn-link svg { width:15px; height:15px; } /* ---- Progreso ---- */ .axn-progress { height:6px; border-radius:999px; background:var(--axn-soft); overflow:hidden; } .axn-progress > i { display:block; height:100%; border-radius:999px; background:var(--axn-ink); } /* ============================================================================ * SIDEBAR del rediseño (estructura de la referencia, cableado a datos reales). * Va dentro del