  /* Colores base de la paleta */
  :root {
    --color-primario: rgb(52, 152, 219);     /* Para encabezados y acentos */
    --color-secundario: rgba(244, 237, 234, 0.6);  /* Como fondo sutil o resaltados */
    --color-terciario: rgb(133, 193, 233);   /* Para hover o botones */
    --color-acento: rgb(169, 50, 38);        /* Para llamados de atención */
    --color-warning: rgb(236, 112, 99);      /* Para alertas o detalles */
    --color-texto: rgb(52, 73, 94);          /* Color principal de texto */
    --color-fondo: #FCFCFC;                  /* Fondo predominante blanco */
    --color-grafico: rgba(174, 214, 241, 0.02); /* Fondo seccion graficos */
    --color-grafico-detalle: rgba(236, 112, 99, 0.1);
    --total-orbs: 5; /* Número total de orbes */
    --radius: 350px;      /* Radio de la órbita */
    --active-scale: 1.3;  /* Escala al activarse */
  }

  /* Ajustes globales */
  body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    /* font-family: "Helvetica Neue", Arial, sans-serif; */
    line-height: 1.6;
  }

  .container-fluid {
    background-color: var(--color-fondo);
  }
  .container-fluid-graficos {
    background-color: var(--color-grafico);
  }

  .card .card-body {
    padding: 2rem;
  }

.card-principal {
  border-radius: 1rem !important; /* rounded-4 equivalente */
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
  width: 100%;
  padding: 1rem;
  /* transition: all 0.3s ease; */
  border: none;
  /* background-color: var(--color-secundario); */
}

 .card-secundario {
  margin-bottom: 1.3rem; /* Equivalente a mb-4 (1rem = 16px) */
  border-radius: 0.25rem; /* Equivalente a rounded */
} 

.card-ensecundario{
  margin-bottom: 1.3rem; /* Equivalente a mb-4 (1rem = 16px) */
  border-radius: 0.25rem; /* Equivalente a rounded */
  background-color: rgba(244, 249, 233, 0.3)
}

.card-ensecundario:hover {
  transform: translateY(-5px);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.2) !important;
}

@media (min-width: 992px) { /* Equivalente a lg breakpoint de Bootstrap */
  .card-secundario {
      flex: 0 0 33.333333%; /* Equivalente a col-lg-4 (4/12 ≈ 33.33%) */
      max-width: 33.333333%;
  }
}


.form-select {
  background-color: #f8f9fa; /* Fondo gris claro */
  color: #333; /* Color de texto */
}

.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Sombra al enfocar (como Bootstrap) */
  border-color: #86b7fe; /* Borde más claro al enfocar */
}

.form-select option {
  background-color: #eef0eb; /* Fondo gris claro */
  font-size: 14px;
}

/* Para mantener consistencia con Bootstrap */
.rounded-4 {
  border-radius: 1rem !important;
}

  /* Encabezados y párrafos */
  h1.text-primary {
    color: var(--color-primario);
    /* font-weight: bold; */
  }
  p.lead.text-muted {
    color: var(--color-texto);
  }

  hr {
    border-top: 1px solid var(--color-terciario);
  }

  /* Tabla y sus componentes */
  .table-responsive {
    margin-top: 1rem;
  }
  .table-dark {
    background-color: var(--color-primario) !important;
    color: #fff;
  }
  .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(174, 214, 241, 0.3);
  }
  .table-hover tbody tr:hover {
    background-color: rgba(133, 193, 233, 0.3);
  }
  .datatable {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
  }

  /* Botones personalizados */
  .btn-info {
    background-color: var(--color-secundario);
    border: none;
    color: var(--color-texto);
    transition: background-color 0.3s ease;
  }
  .btn-info:hover {
    background-color: var(--color-primario);
  }

  .btn-dark {
    background-color: var(--color-texto);
    border: none;
    color: #fff;
    transition: background-color 0.3s ease;
  }
  .btn-dark:hover {
    background-color: var(--color-primario);
  }

  /* Aseguramos que los botones centrados se vean bien */
  .btn.btn-dark.w-50 {
    display: block;
    margin: 20px auto;
  }

  .vertical-hr {
    
    width: 0.1px; /* Define el ancho del separador */
    height: auto; /* Altura completa o ajustable */
    border-left: 0.5px solid #00000059; /* Color del separador */
    margin: 0 0.1px; /* Espaciado opcional */
  }

  #estadisticaPrueba {
    background-color: rgba(174, 214, 241, 0.14); /* Cambia este color por el que desees */
    border: 1px solid rgba(52, 73, 94, 0.2); /* Agrega un borde si lo necesitas */
    transition: background-color 0.3s ease; /* Transición para cambios suaves */
    }

  #estadisticaPruebaIndividual {
    background-color: rgba(174, 214, 241, 0.14); /* Cambia este color por el que desees */
    border: 1px solid rgba(52, 73, 94, 0.2); /* Agrega un borde si lo necesitas */
    transition: background-color 0.3s ease; /* Transición para cambios suaves */
    }

  #detallePrueba h2 {
    color: var(--color-primario);
    font-weight: bold;
  }
  #detallePrueba p {
    color: var(--color-texto);
  }
  .grafico {
    width: 100% !important;
    height: 400px !important;
    position: relative;
  }
  .card-grafico {
    background-color: var(--color-fondo);
    border: 4px solid rgba(52, 73, 94, 0.096);
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    width: 100% !important;
    height: 350px !important;
  }
  .card-grafico-detalle {
    background-color: var(--color-grafico-detalle);
    /* border: 4px solid rgba(52,73,94,0.3);
    border-radius: 10px; */
    align-items: center;
    width: auto ; /* Asegura que el ancho sea igual al ancho de la ventana */
    height: auto ;
    margin: 0; /* Elimina márgenes externos */
    padding: 30px; /* Elimina cualquier relleno */
    
  }
    /* Estilos de las tarjetas (cards) */
    .card-resgrafico {
      border: 4px solid rgba(52, 73, 94, 0.3); /* Borde personalizado */
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
      padding: 1rem; /* Espaciado interno */
      border-radius: 0.75rem; /* Bordes redondeados */

      }
  .card-grafico h5 {
    color: var(--color-grafico);
    margin-bottom: 1rem;
  }
  /* Ajustes en el botón de retorno */
  .btn-secondary {
    background-color: var(--color-secundario);
    border: none;
    color: var(--color-texto);
    transition: background-color 0.3s ease;
  }
  .btn-secondary:hover {
    background-color: var(--color-primario);
  }

  /* Ajustes generales */
.section-title {
    color: rgb(52, 73, 94) !important; /* Color del título */
    /* font-size: 1,5rem; */ /* Tamaño moderno */
    /* font-weight: bold; */
    margin-bottom: 1rem;
}

.description {
    color: rgb(133, 193, 233); /* Color de texto */
    /* font-size: 1.5rem; */ /* Tamaño adecuado para contenido descriptivo */
    /* line-height: 1.8; */ /* Espaciado para legibilidad */
}

.highlight-success {
    color: rgb(52, 152, 219); /* Éxito en azul brillante */
    font-weight: bold;
}

.highlight-danger {
    color: rgb(169, 50, 38); /* Éxito en rojo vibrante */
    font-weight: bold;
}

.content-wrapper {
    background-color: rgba(174, 214, 241, 0.14); /* Fondo ligero */
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.fondo-imagen {
    background-image: url('/static/imgs/fondoGrafico3.jpg'); /* Ruta de la imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.chart-container {
  display: flex;
  flex-direction: row; /* Por defecto, leyendas al costado */
  align-items: center; /* Asegura alineación vertical */
}

@media (max-width: 768px) {
  .chart-container {
      flex-direction: column; /* Cambia leyendas hacia arriba */
  }
}

canvas {
  display: block; /* Elimina espacios fantasma */
}


/* Estilos personalizados para el footer */
.footer-custom {
  background-color: #153243;
  color: white;
  position: relative;
}

/* Asegúrate de que el wave SVG se muestre correctamente */
.footer-wave {
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: 80px;
  transform: rotate(180deg); /* Opcional: si quieres que la wave "suba" en lugar de "bajar" */
}

/* Efectos hover para los links */
.footer-custom a {
  transition: all 0.3s ease;
}

.footer-custom a:hover {
  color: #B4D4E7 !important;
  transform: translateY(-2px);
}

/* Responsividad para móviles */
@media (max-width: 768px) {
  
  .footer-wave {
    top: -60px;
    height: 60px;
  }
}
