/* KPI cards - Viáticos + Dashboard de Gastos (estructura unificada) */ .kpi-row{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 12px; position: static !important; top: auto !important; z-index: auto !important; } .kpi{ border: 1px solid var(--grid); border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); } .kpi-ico{ flex: 0 0 auto; width: 34px; height: 34px; border-radius: 12px; border: 1px solid var(--grid); background: color-mix(in srgb, var(--row-bg) 76%, transparent); display: grid; place-items: center; } .kpi-ico img{ width: 20px; height: 20px; display: block; object-fit: contain; opacity: 0.92; } :root:not([data-theme="light"]) .kpi-ico img{ filter: brightness(0) invert(1); } .kpi-body{ min-width: 0; flex: 1 1 auto; } .kpi-label, .kpi-value, .kpi-sub{ min-width: 0; } .kpi-label{ line-height: 1.2; font-size: 12px; color: var(--muted); font-weight: 700; } .kpi-value{ line-height: 1.15; font-size: 18px; font-weight: 800; margin-top: 4px; } .kpi-sub{ margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--muted); display: block; } :root[data-theme="light"] .kpi{ background: #ffffff; border-color: #d7dee8; box-shadow: none; } :root[data-theme="light"] .kpi-ico img{ filter: none; } @media (max-width: 680px){ .kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi{ padding: 8px 10px; } .kpi-ico{ width: 32px; height: 32px; border-radius: 12px; } .kpi-ico img{ width: 18px; height: 18px; } .kpi-value{ font-size: 16px; } } @media (max-width: 560px){ .kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi{ justify-content: flex-start; gap: 10px; padding: 8px 10px; } .kpi-label{ font-size: 11px; } .kpi-value{ font-size: 16px; margin-top: 0; } .kpi-sub{ font-size: 11px; } .kpi-ico{ width: 30px; height: 30px; border-radius: 11px; } .kpi-ico img{ width: 18px; height: 18px; } } /* Sin columna de icono (p. ej. dashboard principal) */ .kpi-row.kpi-row--no-ico .kpi{ align-items: stretch; } .kpi-row.kpi-row--no-ico .kpi-body{ width: 100%; } #kpiRow.kpi-row{ position: static !important; top: auto !important; bottom: auto !important; z-index: auto !important; } /* Entrada escalonada (respetar accesibilidad) */ @media (prefers-reduced-motion: no-preference) { @keyframes kpi-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .kpi-row > .kpi { animation: kpi-enter 0.48s cubic-bezier(0.22, 1, 0.36, 1) both; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .kpi-row > .kpi:nth-child(1) { animation-delay: 0s; } .kpi-row > .kpi:nth-child(2) { animation-delay: 0.05s; } .kpi-row > .kpi:nth-child(3) { animation-delay: 0.1s; } .kpi-row > .kpi:nth-child(4) { animation-delay: 0.15s; } .kpi-row > .kpi:nth-child(5) { animation-delay: 0.2s; } .kpi-row > .kpi:nth-child(6) { animation-delay: 0.25s; } .kpi-row > .kpi:nth-child(7) { animation-delay: 0.3s; } .kpi-row > .kpi:nth-child(8) { animation-delay: 0.35s; } /* * Viáticos (pages/viaticos.html): script pone data-via-ready en . * Si la entrada corre al cargar, termina bajo el skeleton y no se ve. * Mantener los KPI ocultos hasta data-via-ready=1; al cambiar el atributo * la regla generica .kpi-row > .kpi vuelve a aplicar y la animacion arranca. */ html[data-via-ready="0"] #kpiRow.kpi-row > .kpi { animation: none !important; opacity: 0; transform: translateY(10px); transition: none; } /* * Gastos (pages/gastos.html): skeleton fixed hasta data-gastos-ready=1 en . * main.dash-wrap = contenido real (#gastosWrap); el skeleton usa div.dash-wrap.gs-dash-proxy. */ html:not([data-gastos-ready="1"]) body.gastos-page main.dash-wrap .kpi-row > .kpi { animation: none !important; opacity: 0; transform: translateY(10px); transition: none; } /* * Dashboard (pages/dashboard.html): KPI reales ocultos hasta data-dash-ready=1. * No usar solo .dash-kpis (el skeleton tambien usa esa clase y quedaria invisible). */ html:not([data-dash-ready="1"]) body.dash-scope main.dash-wrap .dash-kpis > .kpi { animation: none !important; opacity: 0; transform: translateY(10px); transition: none; } .kpi-row > .kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .kpi-row > .kpi:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04); } } /* Sin animación en placeholders de carga */ .gastos-skeleton .kpi-row > .kpi, .dash-skeleton .kpi-row > .kpi, .inst-skeleton .kpi-row > .kpi { animation: none !important; transition: none !important; } .gastos-skeleton .kpi-row > .kpi:hover, .dash-skeleton .kpi-row > .kpi:hover, .inst-skeleton .kpi-row > .kpi:hover { transform: none !important; box-shadow: none !important; }