/* ============================================================ Sistema de diseño — Plataforma de Proyectos ------------------------------------------------------------ Un solo lugar define color, espaciado, tipografía, radios y sombras; pm.css y pm-backlog.css solo consumen estas variables y nunca escriben un color literal. Así el tema claro/oscuro es un cambio de tokens, no un repaso de cada hoja. El tema se elige con data-tema en ("oscuro" | "claro" | "sistema"); pm.js lo aplica antes de pintar. "sistema" sigue al prefers-color-scheme del navegador. ============================================================ */ :root { /* ---------- Escala de espaciado (múltiplos de 4) ---------- */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; /* ---------- Tipografía ---------- */ /* Hanken Grotesk + JetBrains Mono (Google Fonts, enlazadas en pm.html); los stacks de sistema quedan de respaldo si la red no las trae. */ --fuente: "Hanken Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fuente-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --texto-xs: 0.72rem; --texto-sm: 0.8rem; --texto-base: 0.875rem; --texto-md: 1rem; --texto-lg: 1.125rem; --texto-xl: 1.375rem; --texto-2xl: 1.75rem; --peso-medio: 600; --peso-fuerte: 700; /* ---------- Radios (escala del rediseño: chips/botones 9, tarjetas 13, contenedores grandes y modales 16) ---------- */ --radius-sm: 9px; --radius: 13px; --radius-lg: 16px; --radius-full: 999px; /* ---------- Layout ---------- */ --lateral-w: 224px; --lateral-w-min: 68px; --topbar-h: 60px; --contenido-max: 1500px; /* ---------- Movimiento ---------- */ --transicion: 0.15s ease; font-family: var(--fuente); color-scheme: dark; } /* ---------- Paleta: oscuro (por defecto) ---------- Variante oscura derivada del rediseño "Orbe": neutros casi negros con sesgo violeta y el acento morado aclarado para conservar contraste. */ :root, :root[data-tema="oscuro"] { --bg: #111118; --bg-2: #15151d; --panel: #191924; --panel-2: #20202d; --panel-3: #282837; --border: #2a2a38; --border-fuerte: #3a3a4c; --text: #e8e8ee; --text-suave: #c6c6d2; --muted: #9494a2; --accent: #8b86f2; --accent-hover: #a29ef6; --accent-suave: rgba(139, 134, 242, 0.16); --on-accent: #ffffff; --accent-2: #38bdf8; --green: #34d399; --green-suave: rgba(52, 211, 153, 0.16); --amber: #fbbf24; --amber-suave: rgba(251, 191, 36, 0.16); --red: #f87171; --red-suave: rgba(248, 113, 113, 0.16); --soporte: #38bdf8; --nuevo: #a78bfa; --rosa: #fb7185; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow: 0 6px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.45); --chart-grid: rgba(58, 58, 76, 0.5); /* Series categóricas de gráficas, en orden fijo de asignación. Cada tema trae su juego: validadas (daltonismo + contraste ≥3:1) contra el --panel del tema; no intercambiar sueltas ni reordenar. (El panel oscuro pasó de #16223f a #191924 — misma luminancia, el contraste se conserva.) */ --viz-1: #4f8cff; --viz-2: #2e9e8f; --viz-3: #b08420; --viz-4: #c2547a; --viz-5: #7668d6; --viz-6: #c77630; --topbar-bg: rgba(17, 17, 24, 0.85); --lateral-bg: #14141c; --overlay: rgba(8, 8, 14, 0.6); /* Tintes por persona (avatares): índice estable que asigna PM.clasePersona a partir del nombre. Versión aclarada para fondo oscuro. */ --persona-0: #8b86f2; --persona-1: #f0a95a; --persona-2: #4ade80; --persona-3: #38cfe0; --persona-4: #c084fc; --persona-5: #f87171; --persona-6: #6ea1f7; color-scheme: dark; } /* ---------- Paleta: claro (la del handoff "Smart Projects AI") ---------- */ :root[data-tema="claro"] { --bg: #fafafa; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #f4f4f6; --panel-3: #ececef; --border: #ececef; --border-fuerte: #d8d8de; --text: #1c1c22; --text-suave: #54545e; --muted: #6c6c76; --accent: #5a54e8; --accent-hover: #4842d4; --accent-suave: rgba(90, 84, 232, 0.12); --on-accent: #ffffff; --accent-2: #0e8a98; --green: #15803d; --green-suave: rgba(31, 157, 85, 0.12); --amber: #c2680a; --amber-suave: rgba(224, 138, 30, 0.14); --red: #d0342c; --red-suave: rgba(208, 52, 44, 0.1); --soporte: #0e8a98; --nuevo: #9333ea; --rosa: #e11d48; --shadow-sm: 0 1px 3px rgba(28, 28, 34, 0.06); --shadow: 0 6px 20px rgba(28, 28, 34, 0.07); --shadow-lg: 0 24px 70px rgba(28, 28, 34, 0.16); --chart-grid: rgba(138, 138, 146, 0.18); --viz-1: #2563eb; --viz-2: #0e8570; --viz-3: #9a6f0a; --viz-4: #a83a60; --viz-5: #5b4bc4; --viz-6: #a85a1e; --topbar-bg: rgba(255, 255, 255, 0.9); --lateral-bg: #fbfbfc; --overlay: rgba(22, 22, 30, 0.42); --persona-0: #5a54e8; --persona-1: #e08a1e; --persona-2: #1f9d55; --persona-3: #0ea5b5; --persona-4: #9333ea; --persona-5: #d0342c; --persona-6: #2563eb; color-scheme: light; } /* "sistema": el navegador decide. Repite la paleta clara porque una variable solo puede definirse una vez por selector; el bloque de arriba sigue siendo la fuente si el usuario eligió claro a mano. */ @media (prefers-color-scheme: light) { :root[data-tema="sistema"] { --bg: #fafafa; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #f4f4f6; --panel-3: #ececef; --border: #ececef; --border-fuerte: #d8d8de; --text: #1c1c22; --text-suave: #54545e; --muted: #6c6c76; --accent: #5a54e8; --accent-hover: #4842d4; --accent-suave: rgba(90, 84, 232, 0.12); --accent-2: #0e8a98; --green: #15803d; --green-suave: rgba(31, 157, 85, 0.12); --amber: #c2680a; --amber-suave: rgba(224, 138, 30, 0.14); --red: #d0342c; --red-suave: rgba(208, 52, 44, 0.1); --soporte: #0e8a98; --nuevo: #9333ea; --rosa: #e11d48; --shadow-sm: 0 1px 3px rgba(28, 28, 34, 0.06); --shadow: 0 6px 20px rgba(28, 28, 34, 0.07); --shadow-lg: 0 24px 70px rgba(28, 28, 34, 0.16); --chart-grid: rgba(138, 138, 146, 0.18); --viz-1: #2563eb; --viz-2: #0e8570; --viz-3: #9a6f0a; --viz-4: #a83a60; --viz-5: #5b4bc4; --viz-6: #a85a1e; --topbar-bg: rgba(255, 255, 255, 0.9); --lateral-bg: #fbfbfc; --overlay: rgba(22, 22, 30, 0.42); --persona-0: #5a54e8; --persona-1: #e08a1e; --persona-2: #1f9d55; --persona-3: #0ea5b5; --persona-4: #9333ea; --persona-5: #d0342c; --persona-6: #2563eb; color-scheme: light; } } /* Clases que fija PM.clasePersona: los avatares consumen --persona y, sin clase (o sin responsable), caen al acento. */ .persona-0 { --persona: var(--persona-0); } .persona-1 { --persona: var(--persona-1); } .persona-2 { --persona: var(--persona-2); } .persona-3 { --persona: var(--persona-3); } .persona-4 { --persona: var(--persona-4); } .persona-5 { --persona: var(--persona-5); } .persona-6 { --persona: var(--persona-6); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; font-size: var(--texto-base); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* El cambio de tema no debe verse como un parpadeo por elemento. */ body, .pm-card, .card, .topbar, .pm-lateral { transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .hidden { display: none !important; } .muted { color: var(--muted); font-weight: 400; font-size: var(--texto-sm); } /* Foco visible y consistente en toda la app (antes solo se veía el del navegador, que en fondo oscuro casi no se distinguía). */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* Anillo de foco del rediseño para los controles de formulario: borde acento + halo suave, en vez del outline genérico (que se conserva para lo demás). */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-suave); } /* Solo para lectores de pantalla (etiquetas de iconos). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-fuerte); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); height: var(--topbar-h); padding: 0 var(--esp-5); background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); } .brand { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; } .brand h1 { margin: 0; font-size: var(--texto-md); font-weight: var(--peso-fuerte); letter-spacing: -0.2px; white-space: nowrap; } .brand .subtitle { color: var(--muted); font-size: var(--texto-xs); } .topbar-actions { display: flex; align-items: center; gap: var(--esp-2); } .file-info { color: var(--muted); font-size: var(--texto-sm); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Botones ---------- */ .btn { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--texto-base); font-family: inherit; transition: background var(--transicion), border-color var(--transicion), color var(--transicion); } .btn:hover { border-color: var(--border-fuerte); background: var(--panel-3); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--peso-medio); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--panel-2); border-color: transparent; } code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-family: var(--fuente-mono); font-size: 0.92em; } /* ============================================================ Sección Ejecutivo y tablas heredadas del dashboard anterior. Los nombres de clase los produce pm-ejecutivo.js: se conservan. ============================================================ */ .dashboard { padding: var(--esp-5) clamp(16px, 3vw, 36px) var(--esp-10); max-width: var(--contenido-max); margin: 0 auto; } .filters { display: flex; flex-wrap: wrap; gap: var(--esp-3); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); } .filter { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 150px; } .filter label { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: var(--peso-medio); } .filter select { background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: var(--texto-sm); font-family: inherit; } .filter select[multiple] { min-height: 70px; } .filter-actions { justify-content: flex-end; } .tabs { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-4); flex-wrap: wrap; } .tab { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 7px 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--texto-base); font-family: inherit; transition: var(--transicion); } .tab:hover { color: var(--text); border-color: var(--border-fuerte); } .tab.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--peso-medio); } /* ---------- Cards ---------- */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--esp-4); box-shadow: var(--shadow-sm); } .card-title { margin: 0 0 var(--esp-3); font-size: var(--texto-md); font-weight: var(--peso-medio); } .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--esp-3); gap: var(--esp-3); flex-wrap: wrap; } .card-head .card-title { margin: 0; } .grid-top { display: grid; grid-template-columns: minmax(240px, 1fr) 2.4fr; gap: var(--esp-4); margin-bottom: var(--esp-4); } .card-total { display: flex; flex-direction: column; } .kpi-money { font-size: var(--texto-2xl); font-weight: 800; color: var(--green); line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi-hours { font-size: var(--texto-lg); color: var(--accent-2); margin-top: var(--esp-1); } .kpi-sub { margin-top: auto; padding-top: var(--esp-4); display: flex; gap: var(--esp-5); } .kpi-sub > div { display: flex; flex-direction: column; } .kpi-sub .lbl { font-size: var(--texto-xs); text-transform: uppercase; color: var(--muted); } .kpi-sub span:last-child { font-size: var(--texto-md); font-weight: var(--peso-medio); } .chart-wrap { position: relative; height: 240px; } .chart-wrap-lg { height: 300px; } .metric-toggle, .infra-totals { display: flex; gap: var(--esp-1); align-items: center; } .mt { background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--texto-xs); font-family: inherit; } .mt.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .infra-totals { font-size: var(--texto-sm); color: var(--muted); gap: var(--esp-4); } .infra-totals b { color: var(--text); } .grid-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--esp-4); margin-bottom: var(--esp-4); } .client-card .cc-head { display: flex; align-items: baseline; justify-content: space-between; } .client-card .cc-name { font-size: var(--texto-md); font-weight: var(--peso-fuerte); } .client-card .cc-pct { font-size: var(--texto-md); font-weight: var(--peso-fuerte); color: var(--accent-2); } .client-card .cc-total { font-size: 1.5rem; font-weight: 800; color: var(--green); margin: 6px 0 4px; font-variant-numeric: tabular-nums; } .client-card .cc-hours { font-size: var(--texto-sm); color: var(--muted); margin-bottom: var(--esp-3); } .cc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--esp-2); } .cc-cell { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--esp-2) var(--esp-3); } .cc-cell .t { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } .cc-cell .t.sop { color: var(--soporte); } .cc-cell .t.nvo { color: var(--nuevo); } .cc-cell .t.tnl { color: var(--rosa); } .cc-cell .pct { font-size: 1.25rem; font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; } .cc-cell .val { font-size: var(--texto-sm); color: var(--muted); } .cc-bar { height: 6px; border-radius: 4px; background: var(--border); margin-top: var(--esp-2); overflow: hidden; } .cc-bar > span { display: block; height: 100%; } .cc-bar.sop > span { background: var(--soporte); } .cc-bar.nvo > span { background: var(--nuevo); } .cc-bar.int > span { background: var(--muted); } .cc-bar.tnl > span { background: var(--rosa); } .card-infra { margin-bottom: var(--esp-2); } .grid-lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); margin-bottom: var(--esp-4); } .list { display: flex; flex-direction: column; gap: var(--esp-2); max-height: 360px; overflow-y: auto; } .list-item { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; } .list-item .li-name { font-size: var(--texto-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-item .li-sub { font-size: var(--texto-xs); color: var(--muted); } .list-item .li-val { text-align: right; font-weight: var(--peso-medio); font-size: var(--texto-sm); white-space: nowrap; font-variant-numeric: tabular-nums; } .list-item .li-val small { display: block; color: var(--muted); font-weight: 400; } .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); } .data-table th, .data-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); } .data-table th { color: var(--muted); font-weight: var(--peso-medio); cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; background: var(--panel); } .data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .data-table tbody tr:hover { background: var(--panel-2); } .tag { font-size: var(--texto-xs); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; } .tag.sop { background: color-mix(in srgb, var(--soporte) 16%, transparent); color: var(--soporte); } .tag.nvo { background: color-mix(in srgb, var(--nuevo) 16%, transparent); color: var(--nuevo); } .tag.int { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); } .tag.tnl { background: color-mix(in srgb, var(--rosa) 18%, transparent); color: var(--rosa); } .tag.cli-psa { background: var(--accent-suave); color: var(--accent); } .tag.cli-ga { background: var(--amber-suave); color: var(--amber); } .tag.cli-otros { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); } .list-group + .list-group { margin-top: var(--esp-1); } .lg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin: var(--esp-2) 0 6px; } .lg-head .lg-sub { font-size: var(--texto-xs); color: var(--muted); } .bar-cell { display: flex; align-items: center; gap: var(--esp-2); justify-content: flex-end; } .bar-mini { width: 60px; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; } .bar-mini > span { display: block; height: 100%; background: var(--green); } .bar-mini > span.over { background: var(--red); } @media (max-width: 860px) { .grid-top { grid-template-columns: 1fr; } .grid-lists { grid-template-columns: 1fr; } } /* ============================================================ Vista Ejecutivo (#view-ejecutivo) — Costos y Recursos ============================================================ */ .ej-toolbar { display: flex; flex-direction: column; gap: var(--esp-2); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); box-shadow: var(--shadow-sm); } .ej-filters { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; } .ej-fg { display: flex; flex-direction: column; gap: var(--esp-1); } .ej-fg label { font-size: var(--texto-xs); font-weight: var(--peso-medio); color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; } .ej-fg select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: var(--texto-sm); background: var(--panel-2); color: var(--text); min-width: 130px; cursor: pointer; font-family: inherit; } .ej-filters .btn { margin-left: auto; } .ej-actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; } .ej-badge { font-size: var(--texto-xs); font-weight: var(--peso-fuerte); padding: 4px 10px; border-radius: var(--radius-full); background: var(--amber-suave); color: var(--amber); border: 1px solid var(--amber); } .ej-period { color: var(--muted); font-size: var(--texto-sm); margin-left: auto; } .ej-period b { color: var(--text); } .ej-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--esp-3); margin-bottom: var(--esp-4); } .ej-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--esp-3) var(--esp-4); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .ej-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); } .ej-kpi:nth-child(2)::before { background: var(--green); } .ej-kpi:nth-child(3)::before { background: var(--accent-2); } .ej-kpi:nth-child(4)::before { background: var(--amber); } .ej-kpi:nth-child(5)::before { background: var(--nuevo); } .ej-kpi:nth-child(6)::before { background: var(--red); } .ej-kpi .lab { font-size: var(--texto-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: var(--peso-medio); } .ej-kpi .val { font-size: 1.5rem; font-weight: 750; margin-top: 6px; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } .ej-kpi .un { font-size: var(--texto-xs); color: var(--muted); margin-top: 2px; } .ej-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--esp-4); } .ej-grid .c4 { grid-column: span 4; } .ej-grid .c6 { grid-column: span 6; } .ej-grid .c8 { grid-column: span 8; } .ej-grid .c12 { grid-column: span 12; } .ej-cs { font-size: var(--texto-xs); color: var(--muted); margin: -8px 0 var(--esp-3); } .ej-chwrap { position: relative; height: 260px; } .ej-chwrap.tall { height: 300px; } .ej-table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); } .ej-table th { text-align: left; color: var(--muted); font-weight: var(--peso-medio); font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.3px; padding: 7px 8px; border-bottom: 1px solid var(--border); } .ej-table td { padding: var(--esp-2); border-bottom: 1px solid var(--border); } .ej-table tr:last-child td { border-bottom: none; } .ej-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--peso-medio); } .ej-table .rk { display: inline-flex; width: 20px; height: 20px; border-radius: 6px; background: var(--panel-2); color: var(--text); font-weight: var(--peso-fuerte); font-size: var(--texto-xs); align-items: center; justify-content: center; margin-right: 6px; } .ej-table .bar { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); display: inline-block; vertical-align: middle; } @media (max-width: 1100px) { .ej-kpis { grid-template-columns: repeat(3, 1fr); } .ej-grid .c4, .ej-grid .c6, .ej-grid .c8 { grid-column: span 12; } } @media (max-width: 640px) { .ej-kpis { grid-template-columns: repeat(2, 1fr); } } #consolidadoTable tfoot td { font-weight: var(--peso-fuerte); border-top: 2px solid var(--border); border-bottom: none; }