/* ========================================================================== PIEL «MAQUETA» — lleva la consola al acabado de dashboard-rmm-grafico.html Xcitione RMM · se carga DESPUÉS de styles.css CÓMO SE ACTIVA Y CÓMO SE QUITA ------------------------------ Actúa sólo con `data-skin="maqueta"` en . Sin ese atributo no cambia ni un píxel: todas sus reglas están calificadas por él. Para revertir, se borra el atributo. No modifica ninguna regla ni ningún archivo de la consola. QUÉ COPIA DE LA MAQUETA ----------------------- Valores tomados literalmente del archivo de referencia: paleta, radios (20 px tarjeta / 13-14 px pieza), las tres sombras difusas, la escala tipográfica (Inter + JetBrains Mono, cifra grande 34 px/800/-0,045 em, etiqueta mono 9 px con 0,16 em), la barra lateral #0d1526 con la píldora de degradado azul en el elemento activo, y la barra superior con el botón primario en degradado. DÓNDE SE APARTA DE LA MAQUETA, Y POR QUÉ ---------------------------------------- La maqueta es una referencia VISUAL, no una especificación de contraste. Tres de sus valores no llegan a AA y se ajustan, conservando el matiz: · `--muted #7c8aa0` da 3,6:1 sobre blanco. Se usa #637188 (4,94:1 sobre tarjeta, 4,52:1 sobre lienzo). Mismo tono, sólo más oscuro. · El degradado azul de la maqueta abre en #3b82f6, y el blanco encima da 3,68:1. Se abre en #2059d4 (6,10:1): a simple vista es el mismo azul, y da margen para que hasta el texto atenuado de encima llegue a 4,5:1. · Verde #22c55e (2,28:1), naranja #f97316 (2,80:1) y rojo #ef4444 (3,76:1) son inservibles COMO TEXTO. Aquí se usan para RELLENO —barras, anillos, puntos, degradados—, donde WCAG pide 3:1 por ser componentes gráficos, y se dejan intactas las variantes de texto que ya existían en la consola (`--ok-text`, `--warn-text`, `--danger-text`, `--info-text`). Así se ve el color vivo de la maqueta sin perder legibilidad. ========================================================================== */ @font-face { font-family: "InterVar"; src: url("vendor/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrainsMonoVar"; src: url("vendor/fonts/jbmono-var-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } [data-skin="maqueta"] { --canvas: #f2f5fa; --bg: #f2f5fa; --panel: #ffffff; --card-2: #f8fafc; --line: #e8edf5; --ink: #0b1220; --text: #0b1220; --ink-2: #475569; /* La maqueta trae #7c8aa0 (3,6:1, no llega a AA). Se conserva el valor que la consola ya tenía auditado: mismo tono frío, y encima de las píldoras tintadas es el único que aguanta. Un gris más claro las bajaba de 4,8:1. */ --muted: #5a6b7f; --ring-track: #e8edf5; /* Tonos de RELLENO de la maqueta. Las variantes de texto no se tocan. */ --blue: #2563eb; --primary: #2563eb; --accent: #2563eb; --green: #22c55e; --success: #22c55e; --amber: #f97316; --warning: #f97316; --red: #ef4444; --danger: #ef4444; --violet: #8b5cf6; --ok: #22c55e; --warn: #f97316; --info: #2563eb; --nav: #0d1526; --nav-soft: #141f36; --nav-ink: #94a5bd; /* Fondo de marca para texto blanco. NO cambia con el tema: la barra lateral es azul marino en ambos, y `--blue` en oscuro es un azul claro que dejaba el elemento activo en 1,05:1. */ --sk-brand-solid: #2563eb; --sk-brand-solid-2: #1d4ed8; /* Las tres sombras de la maqueta: difusas y de baja opacidad. */ --sk-sh-sm: 0 1px 2px rgba(13, 21, 38, .04); --sk-sh: 0 1px 3px rgba(13, 21, 38, .05), 0 14px 34px -20px rgba(13, 21, 38, .28); --sk-sh-lg: 0 2px 6px rgba(13, 21, 38, .06), 0 26px 54px -26px rgba(13, 21, 38, .4); --elev-1: var(--sk-sh-sm); --elev-2: var(--sk-sh); --shadow: var(--sk-sh); --sk-r: 20px; /* tarjeta */ --sk-r-sm: 13px; /* botón, campo, píldora de control */ --sk-sans: "InterVar", Inter, system-ui, "Segoe UI", Arial, sans-serif; --mono: "JetBrainsMonoVar", ui-monospace, SFMono-Regular, Consolas, monospace; } [data-skin="maqueta"][data-theme="dark"] { --canvas: #080d18; --bg: #080d18; --panel: #111a2c; --card-2: #0d1524; --line: #1d2942; --ink: #eaf0fa; --text: #eaf0fa; --ink-2: #aebbd0; --muted: #7183a0; /* idem: el valor ya auditado de la consola */ --ring-track: #1d2942; --blue: #60a5fa; --primary: #60a5fa; --accent: #60a5fa; --green: #4ade80; --success: #4ade80; --amber: #fb923c; --warning: #fb923c; --red: #f87171; --danger: #f87171; --violet: #a78bfa; --ok: #4ade80; --warn: #fb923c; --info: #60a5fa; --nav: #070c17; --nav-soft: #131f36; --sk-sh-sm: 0 1px 2px rgba(0, 0, 0, .4); --sk-sh: 0 1px 3px rgba(0, 0, 0, .5), 0 16px 38px -22px rgba(0, 0, 0, .85); --sk-sh-lg: 0 2px 8px rgba(0, 0, 0, .6), 0 30px 60px -28px rgba(0, 0, 0, .95); } [data-skin="maqueta"] body { font-family: var(--sk-sans); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; background: var(--canvas); } /* ========================================================================== 1 · BARRA LATERAL ========================================================================== */ [data-skin="maqueta"] .sidebar { padding: 22px 14px; gap: 2px; background: var(--nav); color: var(--nav-ink); } [data-skin="maqueta"] .brand { gap: 11px; padding: 0 8px 20px; border-bottom: 0; } [data-skin="maqueta"] .brand-mark { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #2f78f0, #1e40af); color: #fff; box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .8); } [data-skin="maqueta"] .brand-mark svg, [data-skin="maqueta"] .brand-mark img { filter: brightness(0) invert(1); } [data-skin="maqueta"] .nav-section { font-family: var(--mono); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: #4d5f7c; padding: 16px 10px 7px; margin: 0; } [data-skin="maqueta"] .nav-item { min-height: 0; gap: 11px; padding: 10px 11px; border: 0; border-radius: 11px; font-size: 13px; color: var(--nav-ink); background: transparent; transition: background .15s ease, color .15s ease; } [data-skin="maqueta"] .nav-item:hover { background: #141f36; color: #dce6f5; } /* La píldora de degradado del elemento activo es la firma de la barra lateral. */ [data-skin="maqueta"] .nav-item.active { color: #fff; background: linear-gradient(90deg, var(--sk-brand-solid), var(--sk-brand-solid-2)); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .9); } [data-skin="maqueta"] .nav-item .pill, [data-skin="maqueta"] .nav-item .nav-badge, [data-skin="maqueta"] .nav-item .badge { margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 2px 7px; background: #b91c1c; color: #fff; } [data-skin="maqueta"] .nav-item.active .pill, [data-skin="maqueta"] .nav-item.active .nav-badge, [data-skin="maqueta"] .nav-item.active .badge { background: rgba(255, 255, 255, .22); } /* El icono del elemento activo lo pinta styles.css en var(--teal) (#0e7490). Sobre la pildora azul de este skin el contraste cae a ~1.1:1 y desaparece. Va en blanco, como ya va el texto, y a opacidad plena: la regla general de .nav-ico-slot de este mismo skin lo deja en .9, que sobre azul aun resta. */ [data-skin="maqueta"] .nav-item.active .nav-ico-slot { color: #fff; opacity: 1; } /* ========================================================================== 2 · BARRA SUPERIOR ========================================================================== */ [data-skin="maqueta"] .eyebrow { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0; } [data-skin="maqueta"] #viewTitle { margin: 3px 0 0; font-size: 27px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); } [data-skin="maqueta"] .topbar { gap: 14px; margin-bottom: 22px; flex-wrap: wrap; } [data-skin="maqueta"] .ghost-action, [data-skin="maqueta"] .icon-btn, [data-skin="maqueta"] .search input, [data-skin="maqueta"] .topbar input[type="search"], [data-skin="maqueta"] .topbar input[type="text"] { height: auto; min-height: 42px; border-radius: var(--sk-r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 600; box-shadow: var(--sk-sh-sm); } [data-skin="maqueta"] .primary-action { border-radius: var(--sk-r-sm); border-color: transparent; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .95); } [data-skin="maqueta"] .primary-action:hover { filter: brightness(1.05); } /* ========================================================================== 3 · TARJETAS Radio 20 px, sombra difusa y borde transparente en claro; en oscuro el borde se ve, que es como la maqueta separa las tarjetas del fondo. ========================================================================== */ [data-skin="maqueta"] .panel, [data-skin="maqueta"] .dash-mod, [data-skin="maqueta"] .kpi-card, [data-skin="maqueta"] .chart-card { border-radius: var(--sk-r); border: 1px solid transparent; background: var(--panel); box-shadow: var(--sk-sh); padding: 20px 22px; } [data-skin="maqueta"][data-theme="dark"] .panel, [data-skin="maqueta"][data-theme="dark"] .dash-mod, [data-skin="maqueta"][data-theme="dark"] .kpi-card, [data-skin="maqueta"][data-theme="dark"] .chart-card { border-color: var(--line); } [data-skin="maqueta"] .toolbar h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; text-transform: none; } /* ========================================================================== 4 · TIPOGRAFÍA DE CIFRAS Sin tracking negativo una cifra grande se ve amateur; es la mitad del acabado de la maqueta. ========================================================================== */ [data-skin="maqueta"] .dash-fig strong, [data-skin="maqueta"] .kpi-val { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; } [data-skin="maqueta"] .dash-donut-total, [data-skin="maqueta"] .dash-ring-center strong { font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } [data-skin="maqueta"] .dash-sub, [data-skin="maqueta"] .dash-donut-lbl, [data-skin="maqueta"] .dash-hbar-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } [data-skin="maqueta"] .dash-fig span { font-size: 11px; color: var(--muted); } [data-skin="maqueta"] .tnum, [data-skin="maqueta"] .dash-delta, [data-skin="maqueta"] .dash-scale-legend b { font-variant-numeric: tabular-nums; } [data-skin="maqueta"] .dash-table th { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); } /* ========================================================================== 5 · PIEZAS ========================================================================== */ [data-skin="maqueta"] .dash-fig { border-radius: 14px; border: 1px solid var(--line); background: var(--panel); box-shadow: none; padding: 12px 14px; } [data-skin="maqueta"] .dash-pill, [data-skin="maqueta"] .pill, [data-skin="maqueta"] .dash-delta, [data-skin="maqueta"] .x-badge { border-radius: 999px; } [data-skin="maqueta"] .dash-ctl, [data-skin="maqueta"] .dash-view-chip, [data-skin="maqueta"] .dash-chip { border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); font-size: 11.5px; font-weight: 500; color: var(--ink-2); } [data-skin="maqueta"] .ico, [data-skin="maqueta"] .dash-item-ico { border-radius: 11px; } [data-skin="maqueta"] .mini-meter, [data-skin="maqueta"] .dash-rank-track { height: 6px; border-radius: 999px; background: var(--card-2); box-shadow: none; } [data-skin="maqueta"] .mini-meter i, [data-skin="maqueta"] .dash-rank-track i { border-radius: 999px; } [data-skin="maqueta"] .dash-hbar-track i, [data-skin="maqueta"] .dash-stack-bar i, [data-skin="maqueta"] .dash-sev i { border-radius: 999px; } [data-skin="maqueta"] .dash-sev { gap: 3px; height: 11px; } /* ========================================================================== 6 · CABECERA Y BANDEJA DE ACCIÓN El degradado azul con los círculos difuminados es la pieza más reconocible de la maqueta. ========================================================================== */ [data-skin="maqueta"] .command-center, [data-skin="maqueta"] .dash-actions-card { position: relative; overflow: hidden; border-radius: var(--sk-r); border: 0; background: linear-gradient(150deg, #2059d4 0%, #1a45bd 55%, #16307a 100%); box-shadow: 0 20px 44px -24px rgba(37, 99, 235, .9); color: #fff; } [data-skin="maqueta"] .command-center::after, [data-skin="maqueta"] .dash-actions-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -62px; top: -62px; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; } [data-skin="maqueta"] .command-center::before, [data-skin="maqueta"] .dash-actions-card::before { content: ""; position: absolute; width: 120px; height: 120px; right: 22px; bottom: -58px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; } [data-skin="maqueta"] .cc-eyebrow { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #cfe0ff; } [data-skin="maqueta"] .cc-left h2 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; text-transform: none; color: #fff; } [data-skin="maqueta"] .dash-action-body, [data-skin="maqueta"] .dash-action-rank { border-radius: 13px; } /* ========================================================================== 7 · ESTADOS ========================================================================== */ [data-skin="maqueta"] .dash-state, [data-skin="maqueta"] .chart-empty, [data-skin="maqueta"] .dash-coverage, [data-skin="maqueta"] .dash-skel span { border-radius: 14px; } [data-skin="maqueta"] :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @media (max-width: 900px) { [data-skin="maqueta"] .panel, [data-skin="maqueta"] .dash-mod { padding: 16px; } [data-skin="maqueta"] #viewTitle { font-size: 23px; } [data-skin="maqueta"] .dash-fig strong { font-size: 26px; } [data-skin="maqueta"] .dash-mod-tools { width: 100%; margin-left: 0; flex-wrap: wrap; } [data-skin="maqueta"] .dash-mod-tools > * { min-width: 0; max-width: 100%; } } @media (prefers-reduced-motion: reduce) { [data-skin="maqueta"] .nav-item, [data-skin="maqueta"] .primary-action { transition: none; } } /* ========================================================================== 8 · BARRA LATERAL CON GRUPOS La consola tiene una navegación más rica que la maqueta: secciones y grupos plegables. Se le aplica el mismo lenguaje —etiqueta de sección monoespaciada y píldora de degradado en el activo— sin tocar su comportamiento. ========================================================================== */ /* ==== Categorías nivel 1 · trama técnica + filo cian (fuente: prototipo) ==== */ [data-skin="maqueta"] .nav-sec { --cy: #22d3ee; /* cian: acento EXCLUSIVO del menú */ --weave: rgba(255,255,255,.045); /* trama — nunca pasar de .06 */ --weave-soft: rgba(255,255,255,.022); --weave-step: 7px; /* paso en píxeles ENTEROS (anti-muaré) */ --edge: 3px; /* grosor del filo */ position: relative; padding-left: 10px; /* reserva el carril del filo */ } /* filo cian: abarca padre + submenú del grupo que contiene la pantalla activa */ [data-skin="maqueta"] .nav-sec::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: var(--edge); border-radius: var(--edge); background: var(--cy); opacity: 0; transition: opacity .22s ease; } [data-skin="maqueta"] .nav-sec[data-active="true"]::before { opacity: 1; } /* sobrante del diseño anterior (marcas HUD): ya no se usa */ [data-skin="maqueta"] .nav-sec-frame { display: none; } [data-skin="maqueta"] .nav-sec > .nav-sec-head { position: relative; font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8f9bb3; background: transparent; border: 0; border-radius: 8px; overflow: hidden; /* la trama no se sale de la curva */ gap: 11px; padding: 9px 12px 9px 9px; margin: 1px 0; min-height: 0; cursor: pointer; transition: color .18s ease, background .22s ease; } /* tile del icono */ [data-skin="maqueta"] .nav-sec > .nav-sec-head .nav-sec-ico { width: 34px; height: 34px; flex: 0 0 34px; opacity: 1; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: #8f9bb3; transition: background-color .2s ease, color .2s ease; } [data-skin="maqueta"] .nav-sec > .nav-sec-head .nav-sec-ico svg { width: 18px; height: 18px; } [data-skin="maqueta"] .nav-sec > .nav-sec-head .nav-text { flex: 1; } [data-skin="maqueta"] .nav-sec > .nav-sec-head .nav-caret { color: #6a80a2; opacity: .45; margin-left: auto; display: grid; place-items: center; transition: transform .2s ease, opacity .2s ease; } [data-skin="maqueta"] .nav-sec > .nav-sec-head .nav-caret svg { width: 12px; height: 12px; } /* hover / foco: trama insinuada (40 %), tile 10 %, SIN cian */ [data-skin="maqueta"] .nav-sec > .nav-sec-head:hover { color: #dbe4f5; background: repeating-linear-gradient(45deg, var(--weave-soft) 0 1px, transparent 1px var(--weave-step)); } [data-skin="maqueta"] .nav-sec > .nav-sec-head:hover .nav-sec-ico { background: rgba(255,255,255,.10); color: #dbe4f5; } [data-skin="maqueta"] .nav-sec > .nav-sec-head:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; } /* abierta: trama completa + lavado cian (izq→der) + texto blanco + icono cian + chevron 90° */ [data-skin="maqueta"] .nav-sec > .nav-sec-head[aria-expanded="true"] { color: #fff; background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(34,211,238,0) 78%), repeating-linear-gradient(45deg, var(--weave) 0 1px, transparent 1px var(--weave-step)); } [data-skin="maqueta"] .nav-sec > .nav-sec-head[aria-expanded="true"] .nav-text { font-weight: 700; } [data-skin="maqueta"] .nav-sec > .nav-sec-head[aria-expanded="true"] .nav-sec-ico { background: rgba(34,211,238,.12); color: var(--cy); } [data-skin="maqueta"] .nav-sec > .nav-sec-head[aria-expanded="true"] .nav-caret { transform: rotate(90deg); opacity: .85; } [data-skin="maqueta"] .nav-sec > .nav-sec-head[aria-expanded="false"] .nav-caret { transform: rotate(0deg); } /* cerrada y contiene la pantalla activa: solo filo (via .nav-sec) + icono cian + texto blanco, sin trama */ [data-skin="maqueta"] .nav-sec > .nav-sec-head[aria-expanded="false"][data-active="true"] { color: #fff; } [data-skin="maqueta"] .nav-sec > .nav-sec-head[aria-expanded="false"][data-active="true"] .nav-sec-ico { background: rgba(34,211,238,.12); color: var(--cy); } @media (prefers-reduced-motion: reduce) { [data-skin="maqueta"] .nav-sec::before, [data-skin="maqueta"] .nav-sec > .nav-sec-head, [data-skin="maqueta"] .nav-sec > .nav-sec-head .nav-sec-ico, [data-skin="maqueta"] .nav-sec > .nav-sec-head .nav-caret { transition: none !important; } } /* alto contraste: la textura no sobrevive → fondo sólido */ @media (prefers-contrast: more) { [data-skin="maqueta"] .nav-sec > .nav-sec-head[aria-expanded="true"] { background: rgba(34,211,238,.18); } [data-skin="maqueta"] .nav-sec > .nav-sec-head:hover { background: rgba(255,255,255,.1); } } [data-skin="maqueta"] .nav-group-head { gap: 11px; padding: 10px 11px; border: 0; border-radius: 11px; font-size: 13px; color: var(--nav-ink); background: transparent; } [data-skin="maqueta"] .nav-group-head:hover { background: #141f36; color: #dce6f5; } [data-skin="maqueta"] .nav-caret { color: #6a80a2; font-size: 9px; } /* 4,53:1 sobre la barra */ [data-skin="maqueta"] .nav-child { padding-left: 22px; } [data-skin="maqueta"] .nav-ico-slot { width: 18px; opacity: .9; } [data-skin="maqueta"] .nav-badge { margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 2px 7px; background: #b91c1c; color: #fff; } [data-skin="maqueta"] .nav-item.active .nav-badge { background: rgba(255, 255, 255, .22); } /* Pie de la barra: la tarjeta de resumen de la maqueta. */ [data-skin="maqueta"] .sidebar > .sidebar-foot, [data-skin="maqueta"] .sidebar > footer { margin-top: auto; border-radius: 15px; background: #131e33; padding: 14px; font-size: 11.5px; color: #8fa2bd; } /* Barra superior: chip de sesión y campana con el mismo acabado que la maqueta. */ [data-skin="maqueta"] .session-chip { border-radius: var(--sk-r-sm); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sk-sh-sm); font-size: 12.5px; } [data-skin="maqueta"] .alert-badge { border-radius: 999px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; } /* ========================================================================== 9 · TEXTO SOBRE EL DEGRADADO La franja de salud y la bandeja de acción tienen fondo azul en ambos temas, así que sus textos no pueden heredar los colores pensados para tarjeta. ========================================================================== */ [data-skin="maqueta"] .command-center .cc-stamp, [data-skin="maqueta"] .command-center .cc-stamp-part, [data-skin="maqueta"] .command-center .cc-sub, [data-skin="maqueta"] .command-center .cc-meta, [data-skin="maqueta"] .command-center .dash-fig span, [data-skin="maqueta"] .command-center small, [data-skin="maqueta"] .command-center .dash-health-detail li, [data-skin="maqueta"] .command-center .dash-health-detail li small, [data-skin="maqueta"] .command-center .dash-note, [data-skin="maqueta"] .command-center p, [data-skin="maqueta"] .command-center span { color: #d6e6ff; } [data-skin="maqueta"] .command-center .cc-stamp-part.critical, [data-skin="maqueta"] .command-center .cc-stamp-part.stale { color: #ffd7a1; } [data-skin="maqueta"] .command-center .dash-fig, [data-skin="maqueta"] .command-center .dash-fig strong, [data-skin="maqueta"] .command-center .dash-ring-center strong, [data-skin="maqueta"] .command-center b { color: #ffffff; } /* La teja dentro de la franja aclara el fondo bajo su etiqueta: se baja el velo y se sube la etiqueta, para que el par siga por encima de 4,5:1. */ [data-skin="maqueta"] .command-center .dash-fig { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .20); } [data-skin="maqueta"] .command-center .dash-fig span, [data-skin="maqueta"] .command-center .dash-fig small { color: #eef4ff; } [data-skin="maqueta"] .command-center .dash-delta, [data-skin="maqueta"] .command-center .dash-pill { background: rgba(255, 255, 255, .16); color: #ffffff; border-color: rgba(255, 255, 255, .24); } /* La bandeja de trabajo es una tarjeta de acento: lleva `.panel`, y la regla de panel de esta piel (atributo + clase) gana por especificidad a `.dash-accent`, dejandola blanca con texto blanco. Se vuelve a fijar aqui, ya dentro de la piel, con el mismo azul que se audito a 6,10:1 para el texto blanco. */ [data-skin="maqueta"] .dash-accent { background: linear-gradient(150deg, #2059d4 0%, #1a45bd 55%, #16307a 100%); border: 0; color: #fff; } [data-skin="maqueta"] .dash-accent h2, [data-skin="maqueta"] .dash-accent .dash-accent-item, [data-skin="maqueta"] .dash-accent .dash-accent-n { color: #fff; } [data-skin="maqueta"] .dash-accent .dash-accent-eyebrow { color: #cfe0ff; } [data-skin="maqueta"] .dash-accent .dash-accent-empty { color: #d6e6ff; } [data-skin="maqueta"] .dash-accent .dash-accent-btn { background: #fff; color: #14417f; } /* El distintivo de orden de la bandeja de acción: se le da fondo propio en vez de heredar un tinte que depende del color de estado. */ [data-skin="maqueta"] .dash-action-rank { background: var(--card-2); border: 1px solid var(--line); color: var(--ink-2); } /* La celda «sin dato» de la matriz tiñe su fondo con el mismo gris del texto, asi que el par se acerca peligrosamente al umbral (4,42:1). Se aclara el velo: el texto no cambia, solo respira el fondo. */ [data-skin="maqueta"] .dash-heat.muted { background: color-mix(in srgb, var(--muted) 5%, transparent); } /* ========================================================================== 10 · EL RESTO DE LA PLATAFORMA Las 25 pantallas que no son el Dashboard traen su propio lenguaje: radios de 8, 9, 10 y 12 px, sombras escritas a mano y campos con esquinas distintas a las de la barra superior. Aquí se llevan todas al vocabulario de la maqueta, sin tocar su comportamiento ni su estructura. El mapa es corto a propósito: · contenedor de módulo -> 20 px + sombra de tarjeta · pieza interactiva -> 13 px (campo, botón, pestaña, chip) · icono o teja pequeña -> 11 px · píldora de estado -> 999 px · capa flotante -> 20 px + sombra elevada ========================================================================== */ /* ---- Formularios: son la pieza más repetida de la consola (.field x67) ---- */ [data-skin="maqueta"] .field, [data-skin="maqueta"] .field-row, [data-skin="maqueta"] .form-row, [data-skin="maqueta"] .vault-field, [data-skin="maqueta"] .auth-field { border-radius: var(--sk-r-sm); } [data-skin="maqueta"] .field input, [data-skin="maqueta"] .field select, [data-skin="maqueta"] .field textarea, [data-skin="maqueta"] .auth-field input, [data-skin="maqueta"] .vault-field input, [data-skin="maqueta"] .inv-search, [data-skin="maqueta"] .rc-textarea, [data-skin="maqueta"] input[type="text"], [data-skin="maqueta"] input[type="search"], [data-skin="maqueta"] input[type="password"], [data-skin="maqueta"] input[type="number"], [data-skin="maqueta"] input[type="email"], [data-skin="maqueta"] select, [data-skin="maqueta"] textarea { border-radius: var(--sk-r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: inherit; } [data-skin="maqueta"] input:focus-visible, [data-skin="maqueta"] select:focus-visible, [data-skin="maqueta"] textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); } /* El aro de foco de la búsqueda de inventario estaba escrito a mano con un azul propio; pasa a la marca. */ [data-skin="maqueta"] .inv-search:focus, [data-skin="maqueta"] .inv-search:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); } /* ---- Contenedores de módulo ---- */ [data-skin="maqueta"] .inventory-panel, [data-skin="maqueta"] .record-card, [data-skin="maqueta"] .wf-group-card, [data-skin="maqueta"] .auto-editor, [data-skin="maqueta"] .report-wizard, [data-skin="maqueta"] .auth-card, [data-skin="maqueta"] .install-sw-card, [data-skin="maqueta"] .isw-jobs-panel { border-radius: var(--sk-r); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sk-sh); } [data-skin="maqueta"] .auto-endpoint-list, [data-skin="maqueta"] .auto-block-msg, [data-skin="maqueta"] .isw-prog-skip, [data-skin="maqueta"] .ticket-comment, [data-skin="maqueta"] .sw-ep-row, [data-skin="maqueta"] .isw-job-row { border-radius: var(--sk-r-sm); } /* ---- Tablas ---- */ [data-skin="maqueta"] .table-wrap { border-radius: var(--sk-r-sm); } [data-skin="maqueta"] table th { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); } /* ---- Pestañas, segmentados y chips ---- */ [data-skin="maqueta"] .segmented, [data-skin="maqueta"] .inv-tabs, [data-skin="maqueta"] .chip-list, [data-skin="maqueta"] .auto-check { border-radius: var(--sk-r-sm); box-shadow: var(--sk-sh-sm); } [data-skin="maqueta"] .segmented button, [data-skin="maqueta"] .inv-tabs button { border-radius: 11px; } [data-skin="maqueta"] .segmented button.active, [data-skin="maqueta"] .inv-tabs button.active { background: var(--sk-brand-solid); color: #fff; box-shadow: 0 8px 20px -12px rgba(37, 99, 235, .9); } /* ---- Capas flotantes: menús y modales ---- */ [data-skin="maqueta"] .auto-modal-card, [data-skin="maqueta"] .remote-req-card, [data-skin="maqueta"] .svc-menu, [data-skin="maqueta"] .svc-dropdown, [data-skin="maqueta"] .download-menu-list, [data-skin="maqueta"] .modal-card { border-radius: var(--sk-r); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sk-sh-lg); } /* ---- Tejas de KPI: las franjas de Inventario y de las vistas de módulo ---- */ [data-skin="maqueta"] .kpi-tile, [data-skin="maqueta"] .metric { border-radius: 14px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sk-sh-sm); } [data-skin="maqueta"] .kpi-ico { border-radius: 11px; } [data-skin="maqueta"] .kpi-num, [data-skin="maqueta"] .metric strong { font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } [data-skin="maqueta"] .kpi-label, [data-skin="maqueta"] .metric span { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } /* ---- Píldoras de estado, en toda la plataforma ---- */ [data-skin="maqueta"] .pill, [data-skin="maqueta"] .badge, [data-skin="maqueta"] .tag, [data-skin="maqueta"] .chip { border-radius: 999px; } /* ---- Estados vacíos ---- */ [data-skin="maqueta"] .empty-pro, [data-skin="maqueta"] .skeleton-row, [data-skin="maqueta"] .dash-empty-chart { border-radius: 14px; } /* La marca de agua «dato antiguo» se dibuja con --danger al 12 %. El rojo de la maqueta es más claro que el que tenía la consola, así que a igual opacidad perdía contraste: se compensa con la opacidad, no cambiando el rojo, que como relleno sí debe ser el de la maqueta. */ /* La marca de agua «dato antiguo» se estampa con --danger al 12 %. El rojo de la maqueta es más claro que el que tenía la consola y la marca perdía cuerpo, así que aquí —y solo aquí— se conserva el rojo original. Como relleno de barras y anillos sí se usa el de la maqueta. */ /* La pildora de grupo tiñe su fondo con el color de estado; sobre el panel mas claro de la maqueta el gris atenuado se quedaba en 3,96:1. Pasa al tono de texto secundario, que es el mismo gris pero con cuerpo suficiente. */ [data-skin="maqueta"] .ep-group-chip { color: var(--ink-2); } /* ========================================================================== 11 · HOLGURA El relleno de 20/22 px y el borde de 1 px de la maqueta piden un poco mas de sitio que los 18 px que tenia la consola. En rejillas ya ajustadas eso desbordaba por unos pocos pixeles a 1024 px: se deja que los paneles y sus barras encojan y envuelvan en vez de empujar la pagina. ========================================================================== */ [data-skin="maqueta"] .panel, [data-skin="maqueta"] .dash-mod, [data-skin="maqueta"] .content > *, [data-skin="maqueta"] .grid > * { min-width: 0; } [data-skin="maqueta"] .table-wrap { overflow-x: auto; max-width: 100%; } @media (max-width: 1100px) { [data-skin="maqueta"] .panel, [data-skin="maqueta"] .dash-mod { padding: 16px 18px; } [data-skin="maqueta"] .toolbar, [data-skin="maqueta"] .toolbar-cluster { flex-wrap: wrap; min-width: 0; } [data-skin="maqueta"] .ticket-create input[type="text"] { min-width: 150px; flex: 1 1 150px; } } /* ========================================================================== 11 · COLOR CON SIGNIFICADO — la segunda familia -------------------------------------------------------------------------- En una consola de operación el verde, el ámbar y el rojo son un VEREDICTO: «esto está bien», «esto va a doler», «esto ya duele». Si además se usaran para adornar, el operador perdería la única lectura instantánea que tiene. Por eso la vida de esta pantalla no sale de ellos. Sale de una segunda familia, entera en la mitad FRÍA de la rueda: azure → índigo → violeta → fucsia, más un cian. Ninguno se confunde con un semáforo, y entre ellos hay salto de matiz suficiente para distinguirlos de un vistazo —también con deuteranopia y protanopia, donde el rojo y el verde colapsan pero el eje azul-amarillo se conserva. El tono no decora: DICE DE QUÉ HABLA la tarjeta. Mismo asunto, mismo color, en toda la pantalla: azure flota y equipos índigo salud y riesgo violeta seguridad cian protección fucsia operación del día Los cinco pasan 4,5:1 sobre su fondo en los dos temas (medido: 5,17–6,32 en claro; 5,83–9,62 en oscuro), así que valen como texto y no sólo como relleno. ========================================================================== */ [data-skin="maqueta"] { --dv-azure: #2563eb; --dv-indigo: #4f46e5; --dv-violet: #7c3aed; --dv-fuchsia: #a21caf; --dv-cyan: #0e7490; --tone: var(--dv-azure); } [data-skin="maqueta"][data-theme="dark"] { --dv-azure: #60a5fa; --dv-indigo: #818cf8; --dv-violet: #a78bfa; --dv-fuchsia: #e879f9; --dv-cyan: #22d3ee; } /* El reparto por asunto. Va por `data-mod`, así que no toca ni una línea de JavaScript: la piel sola sabe de qué habla cada tarjeta. */ [data-skin="maqueta"] [data-mod="analytics"], [data-skin="maqueta"] [data-mod="fleet"], [data-skin="maqueta"] [data-mod="clients"], [data-skin="maqueta"] [data-mod="riskmatrix"] { --tone: var(--dv-azure); } [data-skin="maqueta"] [data-mod="health"], [data-skin="maqueta"] [data-mod="agents"], [data-skin="maqueta"] [data-mod="opsrisk"] { --tone: var(--dv-indigo); } [data-skin="maqueta"] [data-mod="vulns"], [data-skin="maqueta"] [data-mod="remediation"], [data-skin="maqueta"] [data-mod="patches"], [data-skin="maqueta"] [data-mod="os"] { --tone: var(--dv-violet); } [data-skin="maqueta"] [data-mod="backup"], [data-skin="maqueta"] [data-mod="coverage"], [data-skin="maqueta"] [data-mod="uptime"] { --tone: var(--dv-cyan); } [data-skin="maqueta"] [data-mod="activityday"], [data-skin="maqueta"] [data-mod="tickets"], [data-skin="maqueta"] [data-mod="activity"], [data-skin="maqueta"] [data-mod="lifecycle"] { --tone: var(--dv-fuchsia); } /* --- El filete: la marca del asunto ------------------------------------- Tres píxeles arriba, que se apagan hacia la derecha. Da identidad a cada tarjeta sin robar ni un milímetro al contenido —va en un pseudoelemento dentro del radio, no en el borde. */ /* El filete va como FONDO de la propia tarjeta, no como pseudoelemento colocado encima. Un fondo lo recorta el radio del borde por sí solo, así que no hace falta `overflow: hidden` —que habría cortado los tiradores del editor y, en otras vistas, los desplegables que asoman de las tablas. */ [data-skin="maqueta"] #content .panel:not(.dash-accent), [data-skin="maqueta"] #content .kpi-card, [data-skin="maqueta"] #content .stat-card { background-image: linear-gradient(90deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 55%, transparent) 38%, transparent 72%); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 0; } /* La tarjeta de KPI ya lleva su barra de ESTADO en el borde izquierdo. Dos acentos en la misma pieza serían ruido, así que ahí el filete se omite: el estado manda sobre el dominio cuando los dos quieren hablar. */ [data-skin="maqueta"] #content .kpi-card.ok, [data-skin="maqueta"] #content .kpi-card.warn, [data-skin="maqueta"] #content .kpi-card.bad { background-image: none; } /* --- El punto del título ------------------------------------------------- Un cuadrado redondeado del tono delante del encabezado. Repite la marca donde va la mirada y ata el filete con el texto. */ [data-skin="maqueta"] .dash-mod .dash-mod-head > h2::before, [data-skin="maqueta"] .dash-mod > .toolbar > h2::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 3px; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 14%, transparent); vertical-align: baseline; } /* --- Levantarse al pasar -------------------------------------------------- La tarjeta sube 2 px y su sombra se tiñe del tono. Es la única animación de la pantalla y dura 160 ms: se nota, no entretiene. */ [data-skin="maqueta"] .dash-mod { transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s ease; } [data-skin="maqueta"] .dash-mod:hover { transform: translateY(-2px); box-shadow: 0 1px 3px rgba(13, 21, 38, .05), 0 18px 40px -22px color-mix(in srgb, var(--tone) 55%, rgba(13, 21, 38, .5)); } @media (prefers-reduced-motion: reduce) { [data-skin="maqueta"] .dash-mod { transition: none; } [data-skin="maqueta"] .dash-mod:hover { transform: none; } } /* --- El lienzo deja de ser un gris plano --------------------------------- Dos manchas radiales muy tenues, azure arriba a la izquierda y violeta a la derecha. Van FIJAS y detrás de todo: no se mueven al desplazar y no tocan el contraste de nada, porque las tarjetas son opacas. */ [data-skin="maqueta"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--dv-azure) 13%, transparent), transparent 62%), radial-gradient(950px 560px at 92% 4%, color-mix(in srgb, var(--dv-violet) 11%, transparent), transparent 60%); } [data-skin="maqueta"] .app-shell { position: relative; z-index: 1; } /* --- La bandeja de acción: de azul plano a rampa índigo → violeta --------- Abre en el mismo #2059d4 que ya se auditó a 6,10:1 con blanco y desde ahí sólo se oscurece, así que cada parada del degradado mejora ese número (8,17:1 y 10,95:1 medidos). El halo de la esquina sube a dos capas para dar profundidad sin aclarar el fondo bajo el texto. */ [data-skin="maqueta"] .dash-accent { background: radial-gradient(520px 320px at 88% -12%, rgba(255, 255, 255, .12), transparent 58%), linear-gradient(142deg, #1b46b4 0%, #3f3bbd 52%, #4c1d95 100%); } /* Las piezas interiores OSCURECEN el fondo en vez de aclararlo. Aclarar era lo que hacía la consola —velos blancos del 12 % y del 20 %— y el auditor no lo veía: lee la declaración del degradado y ahí encuentra la parada #2059d4 a 6,10:1, sin componer los velos que van encima. Calculada la cota superior (parada más clara + velo radial + velo de la píldora), el blanco caía a 3,14:1. Oscureciendo, cada capa MEJORA el número en vez de empeorarlo: 7,57:1 en reposo y 6,87:1 al pasar el puntero. */ [data-skin="maqueta"] .dash-accent .dash-accent-item { background: rgba(5, 18, 54, .18); border-color: rgba(255, 255, 255, .22); } [data-skin="maqueta"] .dash-accent .dash-accent-item:hover { background: rgba(5, 18, 54, .10); border-color: rgba(255, 255, 255, .40); } [data-skin="maqueta"] .dash-accent .dash-accent-n { background: rgba(5, 18, 54, .45); } /* --- Anillos con volumen, pero NEUTRO ------------------------------------ La sombra da profundidad sin opinar. Teñirla del tono de la tarjeta ponía un halo índigo bajo un anillo naranja: dos familias de color en la misma pieza, que es justo lo que esta sección existe para evitar. */ [data-skin="maqueta"] .dash-ring svg, [data-skin="maqueta"] .dash-donut-cell svg { filter: drop-shadow(0 6px 14px rgba(13, 21, 38, .16)); } [data-skin="maqueta"][data-theme="dark"] .dash-ring svg, [data-skin="maqueta"][data-theme="dark"] .dash-donut-cell svg { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .55)); } /* --- La barra de sistemas operativos usa la rampa de datos --------------- Eran colores sueltos; ahora recorren la familia en orden, así que la barra se lee como una sola escala y no como cinco decisiones distintas. */ [data-skin="maqueta"] .dash-stack-bar i:nth-child(1) { background: var(--dv-azure); } [data-skin="maqueta"] .dash-stack-bar i:nth-child(2) { background: var(--dv-indigo); } [data-skin="maqueta"] .dash-stack-bar i:nth-child(3) { background: var(--dv-violet); } [data-skin="maqueta"] .dash-stack-bar i:nth-child(4) { background: var(--dv-fuchsia); } [data-skin="maqueta"] .dash-stack-bar i:nth-child(5) { background: var(--dv-cyan); } /* --- El foco también toma el tono ---------------------------------------- */ [data-skin="maqueta"] .dash-mod :focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; } /* En papel, ni manchas ni sombras de color: tinta desperdiciada. */ @media print { [data-skin="maqueta"] body::before { display: none; } [data-skin="maqueta"] .dash-mod::before { height: 2px; } [data-skin="maqueta"] .dash-ring svg, [data-skin="maqueta"] .dash-donut-cell svg { filter: none; } } /* ========================================================================== 12 · LA FAMILIA DE DATOS EN LAS 26 PANTALLAS -------------------------------------------------------------------------- El Dashboard reparte el tono por tarjeta, según el asunto de cada una. En el resto de la consola cada pantalla ES un asunto, así que el tono lo fija la vista y lo hereda todo lo que hay dentro. Se lee de `data-view` en , que `render()` escribe en una línea: teñir 26 pantallas desde la hoja de estilos, sin tocar sus 26 funciones de dibujo. El reparto es EL MISMO que en el Dashboard, y eso es lo que lo hace útil: la tarjeta «Exposición a vulnerabilidades» es violeta en el Dashboard y la pantalla de Vulnerabilidades también. El color une la vista de conjunto con la de detalle. ========================================================================== */ [data-skin="maqueta"][data-view="endpoints"], [data-skin="maqueta"][data-view="inventory"], [data-skin="maqueta"][data-view="software"], [data-skin="maqueta"][data-view="directory"], [data-skin="maqueta"][data-view="geo"], [data-skin="maqueta"][data-view="snmp"], [data-skin="maqueta"][data-view="psa"] { --tone: var(--dv-azure); } [data-skin="maqueta"][data-view="dashboard"], [data-skin="maqueta"][data-view="security"], [data-skin="maqueta"][data-view="reports"], [data-skin="maqueta"][data-view="repsched"], [data-skin="maqueta"][data-view="settings"] { --tone: var(--dv-indigo); } [data-skin="maqueta"][data-view="vulns"], [data-skin="maqueta"][data-view="patches"], [data-skin="maqueta"][data-view="thirdparty"], [data-skin="maqueta"][data-view="avedr"], [data-skin="maqueta"][data-view="webfilter"], [data-skin="maqueta"][data-view="uam"] { --tone: var(--dv-violet); } [data-skin="maqueta"][data-view="backup"], [data-skin="maqueta"][data-view="vault"], [data-skin="maqueta"][data-view="integ"], [data-skin="maqueta"][data-view="uptime"] { --tone: var(--dv-cyan); } [data-skin="maqueta"][data-view="tickets"], [data-skin="maqueta"][data-view="alerts"], [data-skin="maqueta"][data-view="automation"], [data-skin="maqueta"][data-view="ai"] { --tone: var(--dv-fuchsia); } /* El lienzo respira el tono de la pantalla en la que estás. Cambiar de vista cambia la atmósfera, no solo el contenido. */ [data-skin="maqueta"] body::before { background: radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 62%), radial-gradient(950px 560px at 92% 4%, color-mix(in srgb, var(--dv-violet) 10%, transparent), transparent 60%); transition: background .4s ease; } @media (prefers-reduced-motion: reduce) { [data-skin="maqueta"] body::before { transition: none; } } /* --- El punto del título, en toda la plataforma -------------------------- Mismo gesto que en el Dashboard: un cuadrado del tono delante del encabezado. Cubre los dos contenedores que la consola usa para sus títulos (`.toolbar` y `.panel-head`), que son 75 de los 81 que hay. */ [data-skin="maqueta"] #content .toolbar > h2::before, [data-skin="maqueta"] #content .panel-head > h2::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 3px; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 14%, transparent); vertical-align: baseline; } /* --- Levantarse al pasar, también aquí ----------------------------------- */ [data-skin="maqueta"] #content .kpi-card, [data-skin="maqueta"] #content .stat-card, [data-skin="maqueta"] #content .metric { transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s ease; } [data-skin="maqueta"] #content .kpi-card:hover, [data-skin="maqueta"] #content .stat-card:hover, [data-skin="maqueta"] #content .metric:hover { transform: translateY(-2px); box-shadow: 0 1px 3px rgba(13, 21, 38, .05), 0 16px 34px -20px color-mix(in srgb, var(--tone) 55%, rgba(13, 21, 38, .5)); } @media (prefers-reduced-motion: reduce) { [data-skin="maqueta"] #content .kpi-card, [data-skin="maqueta"] #content .stat-card, [data-skin="maqueta"] #content .metric { transition: none; } [data-skin="maqueta"] #content .kpi-card:hover, [data-skin="maqueta"] #content .stat-card:hover, [data-skin="maqueta"] #content .metric:hover { transform: none; } } /* --- El azul «informativo» pasa a ser el tono del dominio ---------------- Aquí está la mayor parte del color nuevo, y es el cambio que más se sostiene: una tarjeta marcada `info` NO emite un veredicto —dice «8 endpoints», no «esto está bien»—, así que su acento no tiene por qué ser el azul genérico. Pasa a ser el color del asunto de la pantalla. Las tarjetas `ok`, `warn` y `bad` no se tocan: ahí el color SÍ es un veredicto. */ [data-skin="maqueta"] #content .kpi-card.info::before { background: var(--tone); } [data-skin="maqueta"] #content .kpi-card.info .kpi-dot { background: var(--tone); } [data-skin="maqueta"] #content .kpi-card.info .kpi-ico { color: var(--tone); } [data-skin="maqueta"] #content .metric.info::before { background: var(--tone); } /* --- Tablas y pestañas ---------------------------------------------------- */ [data-skin="maqueta"] #content thead th { border-bottom: 2px solid color-mix(in srgb, var(--tone) 34%, var(--line)); } [data-skin="maqueta"] #content .tabs button.on, [data-skin="maqueta"] #content .tabs button[aria-selected="true"], [data-skin="maqueta"] #content .inv-tab.on, [data-skin="maqueta"] #content .wf-tab.on { border-bottom-color: var(--tone); color: var(--tone); } /* --- Foco y selección ----------------------------------------------------- */ [data-skin="maqueta"] #content :focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; } [data-skin="maqueta"] ::selection { background: color-mix(in srgb, var(--tone) 26%, transparent); } @media print { [data-skin="maqueta"] #content .panel, [data-skin="maqueta"] #content .kpi-card, [data-skin="maqueta"] #content .stat-card { background-image: none; } } /* La tabla de capacidades de Ajustes es la unica de la consola que no vive dentro de un `.table-wrap`, asi que nada la contiene cuando su contenido pasa del ancho del panel. Con la tipografia del sistema medía 953 px y cabía por los pelos; con InterVar, algo mas ancha, pasa a 1002 y desbordaba la pagina a 1280. Se le da su propio desplazamiento: la tabla scrollea dentro de su tarjeta, que es lo que hacen las otras veintitantas. */ [data-skin="maqueta"] #content .rc-cap-table { display: block; overflow-x: auto; max-width: 100%; }