/* Estilos propios de la sección «numeros» de la maqueta. */
.num-mes-elegir { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.num-nota { background: var(--ojo-suave); border-color: transparent; color: var(--ojo); }
.num-ventana { width: min(640px, 100%); }
.num-texto { margin: 0; white-space: pre-wrap; font: inherit; background: var(--fondo); border-radius: 8px; padding: 12px; }
.num-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.num-destacadas { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.num-cifras-chicas { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.num-cifras-chicas .cifra b { font-size: 19px; }
.num-nota-upsell { display: block; }
.de-numeros-kpis, .de-numeros-reportes, .de-numeros-dinero { grid-template-columns: minmax(0, 1fr); }
.de-numeros .pestanas button { white-space: nowrap; }

/* La tabla de KPI: los días en columnas, los KPI en filas. */
.kpi-rangos { display: flex; gap: 6px; flex-wrap: wrap; }
.kpi-rangos button { padding: 5px 11px; font-size: 13.5px; border-radius: 999px; }
.kpi-rangos button.activo { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
.kpi-leyenda { font-size: 13px; }
.kpi-caja { background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio); overflow: auto; max-height: calc(100vh - 240px); min-height: 460px; max-width: 100%; min-width: 0; }
.kpi-tabla { width: max-content; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.kpi-tabla th, .kpi-tabla td { border-bottom: 1px solid var(--borde); border-right: 1px solid #eef1f6; padding: 0 6px; height: 34px; white-space: nowrap; background: var(--caja); }
.kpi-tabla thead th { position: sticky; background: #fafbfd; text-align: center; font-weight: 600; z-index: 3; height: 32px; }
.kpi-tabla thead tr:nth-child(1) th { top: 0; }
.kpi-tabla thead tr:nth-child(2) th { top: 32px; }
.kpi-tabla thead tr:nth-child(3) th { top: 64px; height: 38px; }
.kpi-nombre { position: sticky; left: 0; z-index: 2; min-width: 190px; max-width: 190px; text-align: left; font-weight: 600; background: var(--caja); border-right: 2px solid var(--borde) !important; }
.kpi-tabla thead .kpi-esquina { top: 0; z-index: 5; background: #fafbfd; }
.kpi-tabla td.kpi-c { text-align: right; min-width: 50px; }
.kpi-c.kpi-finde, th.kpi-finde { background: #f6f7fa; color: var(--suave); }
.kpi-tabla th.kpi-hoy, .kpi-tabla td.kpi-hoy { box-shadow: inset 0 -2px 0 var(--marca); }
.kpi-tabla thead th.kpi-res, .kpi-tabla td.kpi-res { min-width: 104px; }
.kpi-tabla thead th.kpi-res.mes, .kpi-tabla td.kpi-res.mes { background: var(--marca-suave); font-weight: 600; }
.kpi-tabla thead th.kpi-res.anio, .kpi-tabla td.kpi-res.anio { background: #d9e4fb; font-weight: 700; }
.kpi-h3 small { display: block; font-weight: 400; color: var(--suave); line-height: 1; font-size: 11px; }
.kpi-h3 b { display: block; line-height: 1.2; }
.kpi-plegar { border: 0; background: none; padding: 2px 6px; font-weight: 600; color: inherit; }
.kpi-plegar span { display: inline-block; width: 14px; color: var(--marca); }
.kpi-plegar:hover { color: var(--marca); }
.kpi-h1, .kpi-h2 { text-align: left !important; }
.kpi-h1 .kpi-plegar, .kpi-h2 .kpi-plegar { position: sticky; left: 198px; }
.kpi-fila-pct th, .kpi-fila-pct td { color: var(--suave); font-style: italic; }
.kpi-num { border: 0; background: none; padding: 2px 4px; border-radius: 6px; color: var(--marca); font-weight: 600; }
.kpi-num:hover { background: var(--marca-suave); text-decoration: underline; }
.kpi-flecha { font-size: 10px; margin-left: 3px; }
.kpi-flecha.bien { color: var(--bien); }
.kpi-flecha.mal { color: var(--mal); }
.kpi-fila-objetivo td, .kpi-fila-objetivo th { height: 56px; }
.kpi-objetivo { text-align: center !important; white-space: normal !important; }
.kpi-objetivo input { width: 54px; padding: 2px 4px; text-align: center; }
.kpi-barra { display: block; height: 6px; background: #d5dded; border-radius: 999px; overflow: hidden; margin: 4px 4px 2px; }
.kpi-barra-llena { display: block; height: 100%; background: var(--bien); }
.kpi-objetivo small { color: var(--suave); }

@media (max-width: 860px) {
  .kpi-h1 .kpi-plegar, .kpi-h2 .kpi-plegar { left: 112px; }
  .kpi-caja { max-height: 68vh; min-height: 300px; }
  .kpi-nombre { min-width: 104px; max-width: 104px; white-space: normal !important; font-size: 12.5px; line-height: 1.2; }
  .kpi-tabla td.kpi-c { min-width: 44px; }
  .de-numeros .barra-de-acciones select { flex: 1 1 150px; }
  .kpi-rangos { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .kpi-rangos button { white-space: nowrap; }
}
.kpi-ayuda { display: inline-block; margin-left: 6px; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 11px; font-weight: 700; color: var(--suave); border: 1px solid var(--borde); border-radius: 999px; cursor: help; }
.kpi-vistas { display: flex; gap: 6px; }
.kpi-vistas button { border-radius: 999px; padding: 5px 14px; color: var(--suave); }
.kpi-vistas button[aria-selected="true"] { background: var(--marca-suave); border-color: transparent; color: var(--marca); font-weight: 600; }
.num-cambio { font-size: 12.5px; }
.num-cambio.bien { color: var(--bien); }
.num-cambio.mal { color: var(--mal); }
.num-cambio.igual { color: var(--suave); }
.num-graficas { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.num-barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; }
.num-barra { display: grid; gap: 4px; justify-items: center; border: 0; background: none; padding: 2px; border-radius: 8px; min-width: 0; }
.num-barra:hover { background: var(--fondo); }
.num-valor { font-size: 12px; color: var(--suave); white-space: nowrap; }
.num-hueco { display: flex; align-items: flex-end; width: 100%; height: 130px; }
.num-columna { display: block; width: 100%; background: #b8c8f0; border-radius: 5px 5px 0 0; }
.num-barra.activa .num-columna { background: var(--marca); }
.num-barra.activa .num-valor, .num-barra.activa .num-mes { color: var(--texto); font-weight: 700; }
.num-mes { font-size: 12.5px; color: var(--suave); }
.num-comi { display: grid; gap: 4px; min-width: 150px; }
.num-comi .botones button { padding: 3px 9px; font-size: 13px; }
.num-casillas { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 8px; padding: 8px; }
.num-casilla { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--texto); }
.num-casilla input { width: 16px; height: 16px; margin-top: 2px; flex: none; }
@media (max-width: 860px) {
  .num-graficas { grid-template-columns: minmax(0, 1fr); }
  .num-barras { gap: 4px; }
}
.formulario .num-casilla { display: flex; }
.num-comi { min-width: 170px; }
.kpi-filtros, .kpi-orden { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.kpi-filtro-contenido, .kpi-orden-lista { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--caja); }
.kpi-orden-lista { flex-direction: column; align-items: stretch; max-height: 280px; overflow: auto; }
.kpi-orden-fila { display: flex; gap: 5px; align-items: center; }
.kpi-orden-fila label { flex: 1; min-width: 190px; }
.kpi-orden-fila button { padding: 2px 7px; }
.kpi-tabla tbody th, .kpi-tabla tbody td { height: 28px; border-right-color: #dfe5ee; }
.num-tabla-dinero > button { margin-bottom: 8px; }
.num-tabla-dinero .tabla { width: max-content; min-width: 0; }
.num-tabla-dinero .tabla th, .num-tabla-dinero .tabla td { white-space: normal; }
.num-tabla-dinero .tabla th.num, .num-tabla-dinero .tabla td.num { white-space: nowrap; }