/*
 * Tablero interactivo — estructura de informe, colores de Tradex.
 *
 * Se toma de Power BI la disposición: lienzo gris, cada visual en su tarjeta
 * blanca con el título a la izquierda, KPI con número grande y variación,
 * segmentadores arriba y filtrado cruzado al hacer clic. Los colores y las
 * tipografías siguen siendo los de la marca.
 */

.at-informe {
	--lienzo:#F3F2F1;
	--tarjeta:#FFFFFF;
	--tinta:#0B1B3A;
	--tinta-suave:#4A5A78;
	--linea:#DCE6F4;
	--azul:#2553CB;
	--cielo:#2F95EF;
	--ambar:#E8922B;
	--verde:#12844C;
	--rojo:#B4452F;
	--radio:10px;
	--sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
	background:var(--lienzo);
	margin:16px 0 0 -20px;
	padding:20px;
	font-family:var(--sans);
	color:var(--tinta);
}
.at-informe *{box-sizing:border-box}

/* --- segmentadores ------------------------------------------------------ */
.at-segmentadores{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.at-seg{display:flex;flex-direction:column;gap:4px;min-width:180px}
.at-seg label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-suave)}
.at-seg select,.at-seg input{border:1px solid var(--linea);border-radius:7px;padding:7px 10px;
	font:inherit;font-size:.9rem;background:var(--tarjeta);color:var(--tinta);min-height:36px}
.at-cinta{display:none;align-items:center;gap:12px;background:#EAF1FF;border:1px solid #C9DCFF;
	border-radius:8px;padding:9px 14px;margin-bottom:14px;font-size:.88rem}
.at-cinta.es-visible{display:flex}
.at-cinta strong{font-weight:600}
.at-limpiar{margin-left:auto;background:none;border:0;color:var(--azul);font:inherit;
	font-weight:600;cursor:pointer;padding:6px 8px;border-radius:6px;min-height:36px}
.at-limpiar:hover{background:#DCE8FF}

/* --- rejilla y tarjetas ------------------------------------------------- */
.at-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:14px}
.at-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:14px}
.at-visual{background:var(--tarjeta);border:1px solid #EDEBE9;border-radius:var(--radio);
	padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.at-visual-cabeza{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.at-visual-titulo{font-size:.95rem;font-weight:600;margin:0}
.at-visual-nota{font-size:.78rem;color:var(--tinta-suave);margin-left:auto}
.at-visual-migas{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--tinta-suave)}
.at-visual-migas button{background:none;border:0;color:var(--azul);font:inherit;cursor:pointer;
	padding:2px 4px;border-radius:4px}
.at-visual-migas button:hover{text-decoration:underline}
.at-visual-cuerpo{min-height:60px}
.at-vacio-visual{color:var(--tinta-suave);font-size:.88rem;padding:18px 0}

/* --- KPI ---------------------------------------------------------------- */
.at-kpi{background:var(--tarjeta);border:1px solid #EDEBE9;border-radius:var(--radio);
	padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:2px}
.at-kpi-etiqueta{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-suave)}
.at-kpi-valor{font-size:2rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.at-kpi-variacion{font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:5px}
.at-kpi-variacion.sube{color:var(--verde)}
.at-kpi-variacion.baja{color:var(--rojo)}
.at-kpi-variacion.igual{color:var(--tinta-suave)}
.at-kpi-pie{font-size:.78rem;color:var(--tinta-suave)}

/* --- gráficos ----------------------------------------------------------- */
.at-grafico{margin:0}
.at-grafico figcaption{font-size:.92rem;font-weight:600;margin-bottom:10px}
.at-grafico-lienzo{overflow-x:auto}
.at-solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
	clip-path:inset(50%);white-space:nowrap}
.at-marca-dato{cursor:pointer;transition:opacity .18s ease}
.at-marca-dato:focus-visible{outline:2px solid var(--cielo);outline-offset:2px}
.at-atenuada{opacity:.28}
.at-leyenda{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:10px;font-size:.82rem;
	color:var(--tinta-suave)}
.at-leyenda span{display:inline-flex;align-items:center;gap:6px}
.at-leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* --- tooltip ------------------------------------------------------------ */
.at-tooltip{position:fixed;z-index:9999;background:var(--tarjeta);border:1px solid var(--linea);
	border-radius:8px;box-shadow:0 6px 20px rgba(11,27,58,.18);padding:10px 12px;font-size:.82rem;
	color:var(--tinta);pointer-events:none;opacity:0;transition:opacity .12s ease;max-width:260px}
.at-tooltip.es-visible{opacity:1}
.at-tooltip .t-titulo{font-weight:600;margin-bottom:4px;display:block}
.at-tooltip .t-fila{display:flex;justify-content:space-between;gap:16px}
.at-tooltip .t-fila b{font-variant-numeric:tabular-nums}

/* --- tabla de detalle --------------------------------------------------- */
.at-tabla-detalle{width:100%;border-collapse:collapse;font-size:.86rem}
.at-tabla-detalle th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--linea);
	color:var(--tinta-suave);font-weight:600}
.at-tabla-detalle td{padding:8px 10px;border-bottom:1px solid #F1F4F9}
.at-tabla-detalle tr:hover td{background:#FAFCFF}

@media (prefers-reduced-motion:reduce){
	.at-informe *{transition:none !important}
}
@media (max-width:782px){
	.at-informe{margin-left:-10px;padding:14px}
	.at-rejilla{grid-template-columns:1fr}
}