/* Reportes (núcleo): período, indicadores con su cambio, columnas y listas con barras. */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpis div { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--linea); border-radius: var(--r2); background: var(--capa); }
/* La cifra nunca se parte: baja de tamaño con el ancho de su tarjeta */
.kpis div { container-type: inline-size; }
.kpis b { font-size: min(38px, 12.5cqi); line-height: 1; white-space: nowrap; }
.grafico { width: 100%; height: auto; }
.grafico .col { fill: var(--linea-2); }
.grafico .col-ahora { fill: var(--acento); }
.grafico .eje { fill: var(--tinta-3); font: 700 13px var(--cifra); text-anchor: middle; }
.lista-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-barras li { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
.lista-barras .num { font-size: 18px; }
.lista-barras i { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: var(--capa-2); overflow: hidden; }
.lista-barras i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--a) * 100%); background: var(--tinta-3); }
.kpis .cambio { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }
.kpis .cambio.sube { color: var(--bien); }
.kpis .cambio.baja { color: var(--alerta, var(--acento)); }
.periodos { grid-template-columns: repeat(6, auto); }
.periodos button { padding: 0 14px; }
.rango { display: flex; gap: 10px; }
.rango .campo input { min-height: 38px; }
/* Meta del mes: el anillo con el avance, lo vendido, lo que falta y cuánto por día (igual en todos los sistemas) */
.meta-r { display: flex; align-items: center; gap: 16px; }
.meta-anillo { flex: none; } .meta-fondo { fill: none; stroke: var(--capa-2); stroke-width: 12; }
.meta-avance { fill: none; stroke: var(--acento); stroke-width: 12; stroke-linecap: round; }
.meta-pct { font: 700 26px var(--cifra, inherit); fill: var(--tinta); } .meta-de { font-size: 12px; fill: var(--tinta-2); }
.meta-n { font: 700 22px var(--cifra, inherit); font-variant-numeric: tabular-nums; } .meta-f { margin-top: 8px; font-size: 13px; }
/* Lo más vendido con su foto */
.rep-top { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rep-top li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.rep-top .foto-producto { display: block; width: 52px; height: 52px; overflow: hidden; border-radius: var(--r); }
.rep-top img { width: 100%; height: 100%; object-fit: contain; } .rep-top b { font-variant-numeric: tabular-nums; }