/* [DASH] El lenguaje visual de un tablero. Una hoja, para que un tablero se vea igual
 * dondequiera que se monte: el chat, el panel o una pantalla nueva.
 *
 * NINGUN COLOR PROPIO. Se leen los tokens que el host ya declara —`--bm-accent`, `--bm-ok`,
 * `--bm-warn`, `--text`, `--border`, `--card`— y cada uno lleva su valor de reserva al lado:
 * una variable que no existe NO falla, hereda, y así fue como todas las barras salieron
 * azules sobre una marca granate.
 *
 * ── UN DEFECTO QUE ESTA HOJA TENIA, Y VALE DEJARLO ESCRITO ───────────────────────────────
 * Las superficies eran `#fff` literal. En modo oscuro eso da una tarjeta blanca con texto
 * claro encima: ilegible, y sólo para quien usa el tema oscuro — que es la clase de defecto
 * que no aparece en ninguna captura porque quien saca la captura usa el tema claro. Ahora
 * son `var(--card, #FFFFFF)`: el token cuando existe, el blanco cuando no.
 *
 * Marca buscable: dashboard_premium
 */

/* ── LOS CONTROLES ──────────────────────────────────────────────────────────────────────
   El período dice SIEMPRE contra qué compara: sin eso, una variación al lado es un número
   sin denominador. */
.dash-controles { margin-bottom: 18px; }
.dash-periodos { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-chip {
  font: inherit; font-size: 12.5px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, #E5E5E5); background: var(--card, #FFFFFF);
  color: var(--text, #1A1A1A); width: auto; margin: 0;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.dash-chip:hover { border-color: var(--bm-accent, #7A2C36); }
.dash-chip:focus-visible { outline: 2px solid var(--bm-accent, #7A2C36); outline-offset: 2px; }
.dash-chip-activo {
  background: var(--bm-accent, #7A2C36); border-color: var(--bm-accent, #7A2C36); color: #fff;
}
/*  UN BOTON APAGADO TIENE QUE VERSE APAGADO. Si el filtro no está conectado y el botón se ve
    igual que uno vivo, quien lo aprieta cree haber filtrado — y eso es peor que no ofrecerlo. */
.dash-chip[disabled] { cursor: not-allowed; opacity: .45; }
.dash-chip[disabled]:hover { border-color: var(--border, #E5E5E5); }
.dash-compara { font-size: 11.5px; color: var(--text-mute, #636A75); margin: 8px 0 0; }

/* ── QUE MIRAR HOY ──────────────────────────────────────────────────────────────────────
   Lo grave, arriba de todo y con la acción al lado. Quien abre esta pantalla tiene treinta
   segundos: si lo importante está entre el sexto y el séptimo gráfico, no lo va a ver. */
.dash-alertas {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
}
.dash-alertas-tit {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--text-mute, #636A75); margin: 0 0 2px;
}
.dash-alerta {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card, #FFFFFF); border: 1px solid var(--border, #E5E5E5);
  border-left: 4px solid var(--bm-muted, #636A75);
  border-radius: 10px; padding: 12px 15px;
}
.dash-alerta.t-falla { border-left-color: var(--bm-danger, #991B1B); }
.dash-alerta.t-aviso { border-left-color: var(--bm-warn, #B45309); }
.dash-alerta-sev {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  border: 1px solid currentColor; border-radius: 999px; padding: 3px 9px;
  white-space: nowrap; margin-top: 1px;
}
.dash-alerta.t-falla .dash-alerta-sev { color: var(--bm-danger, #991B1B); }
.dash-alerta.t-aviso .dash-alerta-sev { color: var(--bm-warn, #B45309); }
.dash-alerta-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-alerta-cuerpo b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.dash-alerta-accion { font-size: 12.5px; color: var(--text-soft, #525252); line-height: 1.45; }
/*  Sin acción propuesta se DICE, en vez de escribir «revisar»: eso no es una acción, es una
    palabra que llena el hueco donde iba una. */
.dash-alerta-sin {
  font-size: 11.5px; font-style: italic; color: var(--bm-warn, #B45309);
}

/* ── LOS INDICADORES ────────────────────────────────────────────────────────────────────
   `auto-fit` con un mínimo generoso: cuatro KPI apretados en un teléfono se leen peor que
   dos por fila, y una cifra que hay que descifrar no es un indicador. */
.dash-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.dash-kpi {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card, #FFFFFF); border: 1px solid var(--border, #E5E5E5);
  border-top: 3px solid var(--bm-accent, #7A2C36);
  border-radius: 12px; padding: 16px 18px 15px;
  /*  Elevación mínima y no decorativa: separa la tarjeta del fondo sin convertirla en un
      objeto flotante. Una sombra fuerte compite con la cifra, que es lo que hay que leer. */
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}
.dash-et {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute, #636A75); font-weight: 700;
}
.dash-valor {
  font-size: 30px; font-weight: 650; line-height: 1.05; letter-spacing: -.02em;
  /*  `tabular-nums` no es tipografía fina: sin él, dos cifras alineadas en columna bailan al
      refrescarse y el ojo cree que cambiaron cuando sólo cambió el ancho del glifo. */
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.dash-moneda {
  font-size: 13px; color: var(--text-mute, #636A75); margin-left: 5px; font-weight: 400;
}
.dash-ctx { font-size: 11.5px; color: var(--text-mute, #636A75); line-height: 1.4; margin-top: 4px; }

/* ── LA VARIACION ───────────────────────────────────────────────────────────────────────
   EL COLOR SOLO APARECE CUANDO EL CONTRATO DICE SI SUBIR ES BUENO. Para las ventas arriba es
   bueno; para la mora, arriba es malo. Sin esa declaración la cifra va en gris: un verde
   puesto por omisión es una opinión disfrazada de medición. */
.dash-var {
  display: flex; flex-direction: column; font-size: 13.5px; font-weight: 650;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.dash-var.t-ok { color: var(--bm-ok, #166534); }
.dash-var.t-falla { color: var(--bm-danger, #991B1B); }
.dash-var.t-pendiente, .dash-var-neutra { color: inherit; opacity: .8; }
.dash-contra { font-size: 10.5px; font-weight: 400; color: var(--text-mute, #636A75); }
/* Sin comparación: en cursiva y ámbar. Hay algo que pedirle al contrato, no algo que leer. */
.dash-sin { color: var(--bm-warn, #B45309); font-style: italic; font-weight: 500; font-size: 12px; }

/* ── UNA PIEZA ──────────────────────────────────────────────────────────────────────────
   Cada una dice qué PREGUNTA contesta. Sin eso, un tablero es un montón de gráficos bonitos
   que nadie sabe por qué están ahí. */
.dash-pieza {
  background: var(--card, #FFFFFF); border: 1px solid var(--border, #E5E5E5);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}
.dash-pieza-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft, #F5F5F5); padding-bottom: 10px;
}
.dash-pieza-cab h4 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.dash-pregunta {
  display: block; font-size: 11.5px; color: var(--text-mute, #636A75); margin-top: 3px;
}
.dash-sin-grafico {
  font-size: 12.5px; color: var(--text-soft, #525252); line-height: 1.5; margin: 8px 0;
}

/* El drill-down se OFRECE, no se esconde en un doble clic que nadie descubre. */
.dash-drill {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border-top: 1px solid var(--border-soft, #F5F5F5); margin-top: 12px; padding-top: 10px;
}

/* ── ▶ EXPLICAME ────────────────────────────────────────────────────────────────────────
   Cuando no hay explicación se ve DISTINTO, y no simplemente apagado: un botón gris invita a
   apretarlo y no dice por qué no puede. */
.dash-explicame {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  cursor: pointer; width: auto; margin: 0; white-space: nowrap;
  border: 1px solid var(--bm-accent, #7A2C36); background: transparent;
  color: var(--bm-accent, #7A2C36);
}
.dash-explicame:hover { background: var(--bm-accent, #7A2C36); color: #fff; }
.dash-explicame:focus-visible { outline: 2px solid var(--bm-accent, #7A2C36); outline-offset: 2px; }
.dash-sin-voz {
  border-style: dashed; border-color: var(--bm-warn, #B45309);
  color: var(--bm-warn, #B45309);
}
.dash-sin-voz:hover { background: transparent; color: var(--bm-warn, #B45309); }
/* Sin explicación ya no es un botón sino un `span`, y `.dash-explicame` le da
   `cursor: pointer`. Una manito sobre algo que no se aprieta es la misma invitación falsa que
   se acaba de quitar, con otro órgano. */
span.dash-explicame { cursor: default; }

/* El panel que abre «Explícame». No compite con el gráfico: va debajo de la cabecera, en el
   ancho de la pieza, y se cierra con el mismo botón que lo abrió. */
.dash-explicacion {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--card, #FFFFFF); color: var(--text, #2B2B2B);
  font-size: 13.5px; line-height: 1.45;
  border: 1px solid var(--border, #E5E5E5);
  border-left: 3px solid var(--bm-accent, #7A2C36);
}
.dash-explicacion[hidden] { display: none; }

/* ── LOS TRES ESTADOS ───────────────────────────────────────────────────────────────────
   Se ven DISTINTO entre sí a propósito. Fundirlos en «no hay datos» es la forma más barata
   de mentir en un tablero: quien mira decide como si hubiera mirado, y lo que pasó fue que
   la consulta falló. */
.dash-estado {
  border: 1px solid var(--border, #E5E5E5); border-radius: 12px; background: var(--card, #FFFFFF);
  padding: 24px 20px; text-align: center;
}
.dash-estado-tit { font-size: 15px; font-weight: 650; margin: 0 0 6px; }
.dash-estado-que {
  font-size: 12.5px; color: var(--text-soft, #525252); line-height: 1.55; margin: 0;
  max-width: 48ch; margin-left: auto; margin-right: auto;
}
.dash-cargando { border-style: dashed; }
.dash-vacio { border-left: 4px solid var(--border, #E5E5E5); text-align: left; }
/* El error NO se parece a un vacío: es la única de las tres donde lo que se ve no describe
   al negocio. */
.dash-error {
  border: 2px solid var(--bm-danger, #991B1B); text-align: left;
  background: var(--danger-surface, rgba(153, 27, 27, .04));
}
.dash-error .dash-estado-tit { color: var(--bm-danger, #991B1B); }
.dash-error .dash-estado-que { color: inherit; }
.dash-accion {
  font: inherit; font-size: 12.5px; font-weight: 600; margin-top: 12px; width: auto;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bm-danger, #991B1B); background: transparent;
  color: var(--bm-danger, #991B1B);
}

/*  ── LA ELEVACION NO SE HEREDA AL TEMA OSCURO ──────────────────────────────────────────
    Una sombra negra sobre un fondo casi negro no separa nada: sólo ensucia el borde. En
    oscuro el contraste lo da el borde, que ahí sí se ve.  */
body.theme-dark .dash-kpi,
body.theme-dark .dash-pieza { box-shadow: none; }

@media (max-width: 480px) {
  .dash-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .dash-valor { font-size: 24px; }
  .dash-pieza-cab { flex-direction: column; }
  .dash-explicame { width: 100%; text-align: center; }
  .dash-alerta { flex-direction: column; gap: 8px; }
  .dash-alerta-sev { align-self: flex-start; }
}


/* ── HASTA DONDE LLEGA EL FILTRO DE PERIODO ──────────────────────────────────────────────
   Va pegado a los controles y en tono de nota: no es un fallo —el panel esta bien y el filtro
   tambien—, es el alcance de uno sobre el otro. En rojo se leeria como un error que hay que
   arreglar. */
.dash-alcance-periodo {
  margin: -2px 0 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--card, #FFFFFF); color: var(--bm-muted, #636A75);
  border: 1px solid var(--border, #E5E5E5);
  border-left: 3px solid var(--bm-muted, #636A75);
  font-size: 12.5px; line-height: 1.45;
}