/* Q-KPI v3 — token-only (sin colores hardcoded) Depende de _globales.css para todos los tokens. Cárgalo después de _globales.css. Mantiene: grid, variantes, progress, spark y leyenda. */ /* === Variables del componente (100% tokens globales) === */ .q_kpi, .q_kpi-mix, .q_kpi-grid, .q_kpi-page { /* Superficies / texto / bordes */ --qkpi-bg: var(--q_color-bg); --qkpi-surface: var(--q_color-bg-soft); --qkpi-border: var(--q_color-border); --qkpi-border-muted: var(--q_color-border-muted); --qkpi-text: var(--q_color-text); --qkpi-text-2: var(--q_color-text-muted); /* Paleta semántica */ --qkpi-primary: var(--q_color-primary); --qkpi-success: var(--q_color-success); --qkpi-warning: var(--q_color-warning); --qkpi-danger: var(--q_color-danger); --qkpi-info: var(--q_color-info); --qkpi-accent: var(--q_color-accent); --qkpi-neutral: var(--q_color-neutral); /* Sombras (se ajustan por modo desde _globales.css) */ --qkpi-shadow-xs: var(--q_shadow-xs); --qkpi-shadow-sm: var(--q_shadow-sm); --qkpi-shadow-md: var(--q_shadow-md); --qkpi-shadow-lg: var(--q_shadow-lg); } /* Wrapper con fondo KPI sin tocar el */ .q_kpi-page { background: var(--qkpi-bg); padding: 0.01px; } /* Grid responsivo */ .q_kpi-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Card base */ .q_kpi, .q_kpi-mix { background: var(--qkpi-surface); color: var(--qkpi-text); border: 1px solid var(--qkpi-border); border-radius: 16px; padding: 14px 16px; box-shadow: var(--qkpi-shadow-md); position: relative; overflow: hidden; transition: transform .2s ease-out, box-shadow .2s ease-out; } .q_kpi:hover, .q_kpi-mix:hover { transform: translateY(-2px); box-shadow: var(--qkpi-shadow-lg); } /* Head */ .q_kpi .head, .q_kpi-mix .head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .q_kpi .icon, .q_kpi-mix .icon { width: 22px; height: 22px; opacity: .92; flex-shrink: 0; } .q_kpi .title, .q_kpi-mix .title { font-size: 13px; text-transform: uppercase; letter-spacing: .2px; color: var(--qkpi-text-2); } /* Valores y tendencia */ .q_kpi .value, .q_kpi-mix .value { font-size: 28px; font-weight: 800; line-height: 1.1; display: flex; gap: 10px; align-items: baseline; } .q_kpi .trend, .q_kpi-mix .trend { font-size: 12px; margin-top: 2px; color: var(--qkpi-text-2); } .up { color: var(--qkpi-success); font-weight: 600; } .down { color: var(--qkpi-danger); font-weight: 600; } /* Variantes visuales */ .q_kpi[data-variant="soft"], .q_kpi-mix[data-variant="soft"] { background: color-mix(in srgb, var(--qkpi-surface) 85%, transparent); } .q_kpi[data-variant="outline"], .q_kpi-mix[data-variant="outline"] { background: transparent; border-color: var(--qkpi-border); } .q_kpi[data-variant="glass"], .q_kpi-mix[data-variant="glass"] { background: color-mix(in srgb, var(--qkpi-surface) 60%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Progress */ .progress { height: 8px; border-radius: 999px; margin-top: 10px; background: color-mix(in srgb, var(--qkpi-border-muted) 70%, transparent); overflow: hidden; } .progress > i { display: block; height: 100%; width: 0%; transition: width .6s cubic-bezier(.22,1,.36,1); } .q_kpi[data-theme="primary"] .progress > i, .q_kpi-mix[data-theme="primary"] .progress > i { background: linear-gradient(90deg, var(--qkpi-primary), color-mix(in srgb, var(--qkpi-primary) 40%, var(--q_global-color-white))); } .q_kpi[data-theme="success"] .progress > i, .q_kpi-mix[data-theme="success"] .progress > i { background: linear-gradient(90deg, var(--qkpi-success), color-mix(in srgb, var(--qkpi-success) 40%, var(--q_global-color-white))); } .q_kpi[data-theme="warning"] .progress > i, .q_kpi-mix[data-theme="warning"] .progress > i { background: linear-gradient(90deg, var(--qkpi-warning), color-mix(in srgb, var(--qkpi-warning) 40%, var(--q_global-color-white))); } .q_kpi[data-theme="danger"] .progress > i, .q_kpi-mix[data-theme="danger"] .progress > i { background: linear-gradient(90deg, var(--qkpi-danger), color-mix(in srgb, var(--qkpi-danger) 40%, var(--q_global-color-white))); } .q_kpi[data-theme="info"] .progress > i, .q_kpi-mix[data-theme="info"] .progress > i { background: linear-gradient(90deg, var(--qkpi-info), color-mix(in srgb, var(--qkpi-info) 40%, var(--q_global-color-white))); } .q_kpi[data-theme="accent"] .progress > i, .q_kpi-mix[data-theme="accent"] .progress > i { background: linear-gradient(90deg, var(--qkpi-accent), color-mix(in srgb, var(--qkpi-accent) 40%, var(--q_global-color-white))); } .q_kpi[data-theme="neutral"] .progress > i, .q_kpi-mix[data-theme="neutral"] .progress > i { background: linear-gradient(90deg, var(--qkpi-neutral), color-mix(in srgb, var(--qkpi-neutral) 40%, var(--q_global-color-white))); } /* Sparkline */ .spark { margin-top: 8px; } .spark svg { width: 100%; height: 58px; display: block; } .spark path { stroke: currentColor; stroke-width: 2; fill: none; opacity: .95; } .spark path.fill { stroke-width: 0; fill: currentColor; opacity: .10; } .spark .cmp { opacity: .75; } .spark .cmp.fill { opacity: .06; } /* Leyenda */ .q_kpi-mix .legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 2px; font-size: 12px; color: var(--qkpi-text-2); } .q_kpi-mix .legend .item { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .q_kpi-mix .legend .item[data-hidden="1"] { opacity: .45; text-decoration: line-through; } .q_kpi-mix .legend .dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q_global-color-black) 15%, transparent); } .q_kpi-mix .spark [data-ser-hidden="1"] { opacity: .08; } /* Tamaños */ .q_kpi[data-size="sm"] .value, .q_kpi-mix[data-size="sm"] .value { font-size: 22px; } .q_kpi[data-size="lg"] .value, .q_kpi-mix[data-size="lg"] .value { font-size: 34px; } .q_kpi[data-size="sm"], .q_kpi-mix[data-size="sm"] { padding: 10px 12px; } .q_kpi[data-size="lg"], .q_kpi-mix[data-size="lg"] { padding: 18px 20px; } /* === PRO Extras (v3.0) === */ .qkpi .spacer{flex:1} /* Barra lateral de estado (accent) */ .q_kpi::before, .q_kpi-mix::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--qkpi-accent-color, var(--qkpi-border-muted)); opacity:.9; } .q_kpi[data-theme="primary"], .q_kpi-mix[data-theme="primary"] { --qkpi-accent-color: var(--qkpi-primary); } .q_kpi[data-theme="success"], .q_kpi-mix[data-theme="success"] { --qkpi-accent-color: var(--qkpi-success); } .q_kpi[data-theme="warning"], .q_kpi-mix[data-theme="warning"] { --qkpi-accent-color: var(--qkpi-warning); } .q_kpi[data-theme="danger"], .q_kpi-mix[data-theme="danger"] { --qkpi-accent-color: var(--qkpi-danger); } .q_kpi[data-theme="info"], .q_kpi-mix[data-theme="info"] { --qkpi-accent-color: var(--qkpi-info); } .q_kpi[data-theme="accent"], .q_kpi-mix[data-theme="accent"] { --qkpi-accent-color: var(--qkpi-accent); } .q_kpi[data-theme="neutral"], .q_kpi-mix[data-theme="neutral"] { --qkpi-accent-color: var(--qkpi-neutral); } /* Prioridad: data-state por thresholds */ .q_kpi[data-state="success"], .q_kpi-mix[data-state="success"] { --qkpi-accent-color: var(--qkpi-success); } .q_kpi[data-state="warning"], .q_kpi-mix[data-state="warning"] { --qkpi-accent-color: var(--qkpi-warning); } .q_kpi[data-state="danger"], .q_kpi-mix[data-state="danger"] { --qkpi-accent-color: var(--qkpi-danger); } .q_kpi[data-state="info"], .q_kpi-mix[data-state="info"] { --qkpi-accent-color: var(--qkpi-info); } /* Badge */ .qkpi-badge{ font-size:11px; font-weight:700; letter-spacing:.2px; padding:3px 8px; border-radius:999px; border:1px solid var(--qkpi-border-muted); background: color-mix(in srgb, var(--qkpi-surface) 75%, transparent); color: var(--qkpi-text); user-select:none; } .qkpi-badge[data-kind="danger"]{ border-color: color-mix(in srgb, var(--qkpi-danger) 40%, var(--qkpi-border)); } .qkpi-badge[data-kind="warning"]{ border-color: color-mix(in srgb, var(--qkpi-warning) 40%, var(--qkpi-border)); } .qkpi-badge[data-kind="success"]{ border-color: color-mix(in srgb, var(--qkpi-success) 40%, var(--qkpi-border)); } .qkpi-badge[data-kind="info"]{ border-color: color-mix(in srgb, var(--qkpi-info) 40%, var(--qkpi-border)); } /* Footer */ .qkpi-footer{ margin-top:10px; font-size:12px; color: var(--qkpi-text-2); } /* Loading skeleton */ .qkpi-loading .value, .qkpi-loading .trend, .qkpi-loading .progress, .qkpi-loading .spark{ opacity:.55; filter:saturate(.6); } .qkpi-loading .value::after{ content:""; display:block; height: 14px; margin-top:6px; border-radius:999px; background: linear-gradient(90deg, color-mix(in srgb, var(--qkpi-border-muted) 55%, transparent), color-mix(in srgb, var(--qkpi-border-muted) 20%, transparent), color-mix(in srgb, var(--qkpi-border-muted) 55%, transparent) ); background-size: 220% 100%; animation: qkpi_shimmer 1.2s linear infinite; } @keyframes qkpi_shimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: 0% 0; } } /* Error */ .qkpi-error{ margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in srgb, var(--qkpi-danger) 40%, var(--qkpi-border)); background: color-mix(in srgb, var(--qkpi-danger) 10%, var(--qkpi-surface)); color: var(--qkpi-text); font-size:12px; } .qkpi-erroring{ outline: 2px solid color-mix(in srgb, var(--qkpi-danger) 30%, transparent); outline-offset: 2px; } /* Stale */ .qkpi-stale{ opacity:.78; } .qkpi-stale .qkpi-footer::after{ content:" · desactualizado"; color: var(--qkpi-warning); font-weight:600; } /* Breakdown list */ .qkpi-breakdown{ margin-top:10px; display:flex; flex-direction:column; gap:8px; } .qkpi-breakdown .row{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; } .qkpi-breakdown .l{ color: var(--qkpi-text); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .qkpi-breakdown .r{ color: var(--qkpi-text-2); font-size:12px; font-variant-numeric: tabular-nums; } .qkpi-breakdown .bar{ grid-column:1 / -1; height:6px; border-radius:999px; overflow:hidden; background: color-mix(in srgb, var(--qkpi-border-muted) 70%, transparent); } .qkpi-breakdown .bar > i{ display:block; height:100%; background: linear-gradient(90deg, var(--qkpi-accent-color, var(--qkpi-primary)), color-mix(in srgb, var(--qkpi-accent-color, var(--qkpi-primary)) 55%, transparent)); } /* Spark tooltip */ .qkpi-tooltip{ position:absolute; top:6px; left:10px; min-width: 180px; max-width: 260px; padding:10px 10px; border-radius:12px; border:1px solid var(--qkpi-border); background: color-mix(in srgb, var(--qkpi-surface) 75%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--qkpi-shadow-md); color: var(--qkpi-text); font-size:12px; pointer-events:none; } .qkpi-tooltip .t{ font-weight:800; margin-bottom:6px; color: var(--qkpi-text); } .qkpi-tooltip .t .m{ font-weight:600; color: var(--qkpi-text-2); } .qkpi-tooltip .r{ display:grid; grid-template-columns: 12px 1fr auto; gap:8px; align-items:center; margin-top:4px; } .qkpi-tooltip .dot{ width:10px; height:10px; border-radius:50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q_global-color-black) 15%, transparent); } .qkpi-tooltip .k{ color: var(--qkpi-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .qkpi-tooltip .v{ font-variant-numeric: tabular-nums; font-weight:700; } /* Crosshair + dots */ .spark svg [data-role="cross"]{ stroke: currentColor; stroke-width:1; opacity:.35; } .spark svg [data-role="dots"] circle{ fill: currentColor; stroke: color-mix(in srgb, var(--qkpi-surface) 80%, transparent); stroke-width:2; }