/* style.css */

.redirect-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}

.redirect-button:hover {
  background-color: #0056b3;
  color: #fff;
}

/* Estilos para la tarjeta */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 100%;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
}

/* Estilos para la tabla */
table {
  width: 80%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

/* Estilos para los radiobuttons */
input[type="radio"] {
  margin-right: 5px;
}

/*https://grid.layoutit.com/*/
.container-x {
  display: grid;
  grid-template-columns: 1.4fr 0.1fr 1.4fr;
  grid-template-rows: 1fr 0.2fr auto 0.2fr auto 0.2fr auto 0.2fr auto 0.2fr auto 0.2fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "ExplicaGeneral ExplicaGeneral ExplicaGeneral"
    ". . ."
    "ChartPie . ExplicaPie"
    ". . ."
    "ExplicaRadar1 . ChartRadar1"
    ". . ."
    "ChartRadar2 . ExplicaRadar2"
    ". . ."
    "ExplicaRadar3 . ChartRadar3"
    ". . ."
    "ChartRadar4 . ExplicaRadar4"
    ". . ."
    "Creditos Creditos Creditos"
    ". . .";
}

.ChartPie {
  grid-area: ChartPie;
}

.ExplicaPie {
  grid-area: ExplicaPie;
}

.ExplicaGeneral {
  grid-area: ExplicaGeneral;
}

.ChartRadar1 {
  grid-area: ChartRadar1;
}

.ExplicaRadar1 {
  grid-area: ExplicaRadar1;
}

.ChartRadar2 {
  grid-area: ChartRadar2;
}

.ExplicaRadar2 {
  grid-area: ExplicaRadar2;
}

.ExplicaRadar3 {
  grid-area: ExplicaRadar3;
}

.ChartRadar3 {
  grid-area: ChartRadar3;
}

.ChartRadar4 {
  grid-area: ChartRadar4;
}

.ExplicaRadar4 {
  grid-area: ExplicaRadar4;
}

.Creditos {
  grid-area: Creditos;
}

html,
body,
.container-x {
  height: 100%;
  margin: 0;
}

.container-z {
  display: grid;
  grid-template-columns: 0.7fr 0.1fr 0.5fr 0.1fr 4.2fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "nombre . color . descripcion";
}

.nombre {
  justify-self: center;
  align-self: center;
  font-weight: bold;
  grid-area: nombre;
}

.color {
  align-self: center;
  grid-area: color;
}

.descripcion {
  align-self: center;
  grid-area: descripcion;
}

.titulo_virtud {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.titulo_virtud tit {
  font-weight: bold;
  font-size: 24px; /* Tamaño de fuente más grande */
}

.titulo_virtud sub {
  font-weight: bold;
  font-size: 18px; /* Tamaño de fuente más grande */
  padding: 20px;
}

.container-instruc {
  display: grid;
  grid-template-columns: 0.1fr 4fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: ". desc . menos . balance . mas .";
}

.desc {
  grid-area: desc;
}

.menos {
  grid-area: menos;
}

.balance {
  grid-area: balance;
}

.mas {
  grid-area: mas;
}

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.spinner {
  border: 8px solid #eee;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}
.fade-in.visible {
  opacity: 1;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* For presentation only, no need to copy the code below */

/* .container-x * {
  border: 1px solid red;
  position: relative;
} */

/* .container-x *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
} */