.radar-panel{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

/* Caja izquierda: radar + métricas */
.radar-visual{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FBFDFF;
  padding: 14px;
}

/* Canvas wrapper: CLAVE para responsive */
.radar-canvas-wrapper{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 1 / 1; /* mantiene cuadrado */
}

/* Canvas */
.radar-canvas-wrapper canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Resumen (puntaje / nivel) */
.radar-summary{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.radar-chip{
  flex: 1 1 160px;
  border: 1px solid #CDE6F6;
  background: var(--iecs-celeste);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.radar-chip span{
  display: block;
  color: var(--iecs-azul);
  font-weight: 700;
  font-size: 0.75rem;
}

.radar-chip b{
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}

/* Botonera */
.radar-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Caja derecha: informe */
.radar-right{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FBFDFF;
  padding: 14px;
}

.radar-right textarea{
  width: 100%;
  min-height: 420px;
  resize: vertical;
  line-height: 1.4;
  resize: none;
}

.radar-legend{
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;

  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
}

.radar-legend ul{
  margin: 0;
  padding-left: 18px;
}

.radar-legend li{
  margin-bottom: 2px;
}

.radar-legend li:last-child{
  margin-bottom: 0;
}

/* RESPONSIVE */

/* Tablets / mobile grande */
@media (max-width: 900px){
  .radar-panel{
    grid-template-columns: 1fr;
  }

  .radar-right textarea{
    min-height: 320px;
    resize: none;
  }
}

/* Mobile chico */
@media (max-width: 560px){
  .radar-canvas-wrapper{
    max-width: 100%;
  }

  .radar-chip{
    flex: 1 1 100%;
  }

  .radar-actions{
    gap: 8px;
  }
}