/* *** graficas *** */

@font-face {
  font-family: "graf_fontGMX";
  src: url(./fonts/NotoSans-Regular.ttf) format("truetype");
}

.grafBox *{
  box-sizing: border-box !important;
}

.grafBox_load{
  width: 100%;
  text-align: center;
  background: #fee;
  border-radius: 5px;
}

.grafBox_grafica .ratio{
  min-height: 250px !important;
  max-height: 300px !important;
  width: 100% !important;
  height: 100% !important;
}

.grafBox div:nth-child(1){
  margin-bottom: 5px;
}

.grafBox_zebra{
  /*
  background: #f6f6f6;
  */
  background: #fff;
}

.grafBox_tab{
  width: 100% !important;
}

.grafBox_tab *{
  color: #000;
  font-size: 10pt !important;
  font-family: "graf_fontGMX";
}

.grafBox_tab
,.grafBox_tab *{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.grafBox_tab .grafBox_tab_pun div
,.grafBox_tab .grafBox_tab_cve
,.grafBox_tab .grafBox_tab_tex{
  line-height: 1.2 !important;
}

.grafBox_tab .grafBox_tab_pun
,.grafBox_tab .grafBox_tab_cve{
  vertical-align: top;
  text-align: left;
}

.grafBox_tab .grafBox_tab_tex{
  vertical-align: top;
  text-align: left;
  padding: 0 3px !important;
}

.grafBox_tab .grafBox_tab_pun div{
  position: relative;
  display: block;

  top: 3px;
  background-color: var(--color-opc);
  /*
  width: 10px !important;
  height: 12px;
  border-radius: 0 50% 50% 0;
  */
  margin-right: 5px !important;
  padding: 0 !important;
}

/* Viñeta de forma individual por tipo de grafica */
.grafBox_tab .grafBox_tab_pun .grafBox_tab_barra{
  /*  border-radius: 0 50% 50% 0; */
  width: 18px !important;
  height: 12px;
  border-radius: 3px;
}

.grafBox_tab .grafBox_tab_pun .grafBox_tab_pastel{
  width: 12px !important;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.grafBox_tab_pun
,.grafBox_tab_cve{
  width: 1% !important;
}

.grafBox_cve{
  position: relative;
  display: inline-block;

  width: 30px !important;
  font-weight: bold;
}

.grafBox_cve
,.grafBox_tab th{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  text-align: left;
}

.grafBox_tex{
  position: relative;
  display: inline-block;
  padding: 0 3px !important;
  margin: 0 !important;
  border: 0 !important;
  text-align: left;
}

/*
 - ya no se ocupa
 - caambio a table->tr->td->div
*/

.grafBox ul{
  padding: 0;
  margin: 0;
  border:0;
}

.grafBox ul li{
  list-style: none;
  position: relative;
  /*list-style-type: square;*/
  padding: 0;
  padding-left: 18px;
  line-height: 1.2;
}

.grafBox ul li *{
  color: #000;
  font-size: 10pt !important;
  font-family: "graf_fontGMX";
}

.grafBox ul li pre{
  white-space: pre-line !important;
  word-wrap: break-word; /* Extra seguridad para palabras larguísimas sin espacios */
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.grafBox ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0; /* Ajusta según el tamaño de tu fuente */
  width: 14px !important;
  aspect-ratio: 1/1;
  /*background-color: var(--color-opc); /* Leemos la variable */
  margin-top: 2px;

  background-color: var(--color-opc);
  border-radius: 50%;
}

/* *** sobre las tarjetas de las graficas *** */

.grafCard *{
  box-sizing: border-box;
}

.grafCard .card .card-body .card{
  border: 0;
  border: 1px solid #0302;
  height: 100%;
  padding: 0;
  margin: 0;
  padding-bottom: 5px;
}

.grafCard .card .card-body .card .card-header{
  background: none;
  border: 0;
}

.grafCard .card .card-body .card .card-body{
  padding-bottom: 0 !important;
  margin: 0;
}