.alingText {
    text-align: left !important; 
   /* color: #fff; */
   /* font-weight: bold;*/
}


.alingTextPregunta {
    text-align: left !important; 
    color: #000000; 
    font-weight: bold;
}

 body {
        /* background:  #eaeaea; */
        font-family: 'Open Sans', sans-serif;
        background-image: url('/images/porLaPaz/fondoForm.png');
        background-size: cover;           /* Abarca todo el fondo */
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;  
      }
       .fondo-modal {
        background-image: url('/images/porLaPaz/fondoForm.png');
        background-size: cover;           /* Abarca todo el fondo */
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;     /* (opcional) si quieres que no se mueva al hacer scroll */
        font-family: 'Open Sans', sans-serif;
      }

      .form-label {
        font-weight: bold;
        font-family: 'Open Sans', sans-serif;
        color: #669999;
      }

      /* alternar colores con js */
      /* .form-label.alt-color-1 {
        color: #669999;
      } */

      /* .form-label.alt-color-2 {
        color: #999999;
      } */

      .form-control,
      .form-select {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        color: #333;
      }
      .form-container {
          background: #fff;               /* Fondo blanco */
          padding: 40px;                  /* Espacio interior como hoja */
          border-radius: 8px;             /* Bordes suaves */
          box-shadow: 0 0 20px rgba(0,0,0,0.1); /* Sombra ligera */
          margin-top: 40px;
          margin-bottom: 40px;
          max-width: 900px;               /* Ancho como hoja */
          margin-left: auto;
          margin-right: auto;
        }
    .img-banner {
    max-width: 550px;
    width: 100%;
    height: auto;
    object-fit: contain;
    }
    @media (max-width: 576px) {
        .img-banner {
            max-width: 100%;
        }
    }

    /* loader */
    #loaderOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* oscurece fondo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* encima de todo */
    }

    .spinner {
        width: 80px;
        height: 80px;
        border: 10px solid #999999;         /* Base color */
        border-top: 10px solid #669999;     /* Alternado */
        border-right: 10px solid #999999;   /* Alternado */
        border-bottom: 10px solid #669999;  /* Alternado */
        border-left: 10px solid #999999;    /* Alternado */
        border-radius: 50%;
        animation: spin 1.5s linear infinite;
        box-shadow: 0 0 10px #669999, 0 0 10px #999999;
    }

    /* .spinner {
    width: 80px;
    height: 80px;
    border: 10px solid #eee;
    border-top: 10px solid #3498db;
    border-right: 10px solid #e74c3c;
    border-bottom: 10px solid #f1c40f;
    border-left: 10px solid #2ecc71;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    box-shadow: 0 0 15px #3498db, 0 0 15px #e74c3c, 0 0 15px #f1c40f, 0 0 15px #2ecc71;
    } */

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

    #chartBar {
      width: 100%;
      height: 380px; /* o la altura que necesites */
    }

    #chartDonut {
      width: 100%;
      height: 380px; /* o la altura que necesites */
    }

     .charts-container {
      display: flex;
      gap: 20px; /* espacio entre los gráficos */
      justify-content: center; /* centra horizontalmente */
      align-items: flex-start; /* alineados arriba */
    }

    /* Estilo común para cada gráfico */
    .chart-box {
      background: white;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      border-radius: 8px;
      padding: 15px;
      width: calc(50% - 10px);
      height: 400px;
      box-sizing: border-box;
      overflow: hidden; /* recorta contenido extra fuera del cuadro */
    }

    .chart-inner {
      width: 100%;
      height: 100%;
      overflow: visible; /* permite que el gráfico se "expanda" un poco */
      position: relative;
    }

      .alert-warning {
          background-color: #d4edda !important; /* verde claro */
          color: #155724 !important;
          border-color: #c3e6cb !important;
      }

      /* Verde fuerte para alert-success (57-84 puntos) */
      .alert-success {
          background-color: #28a745 !important; /* verde fuerte */
          color: #fff !important;
          border-color: #1e7e34 !important;
      }




      /* En pantallas pequeñas, un cuadro por fila */
    @media (max-width: 768px) {
      .chart-box {
        width: 100%;
        height: 400px;
      }
  }

  html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      scroll-behavior: smooth;
    }

    .carousel-item {
      height: 100vh;
      min-height: 100vh;
      background-size: cover;
      background-position: center;
    }

    .overlay-content {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-75%);
      text-align: center;
      z-index: 10;
      width: 100%;
      padding: 0 15px;
    }

    .overlay-content img {
      width: 100%;
      max-width: 500px;
      height: auto;
      margin-bottom: 20px;
    }

    .overlay-button {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      text-align: center;
      width: 100%;
      padding: 0 15px;
    }

    .overlay-button .btn {
      font-size: 1rem;
      padding: 10px 20px;
    }

     #contenido {
       height: 100vh;
       background-color: #f8f9fa;
       display: flex;
       justify-content: center;
       align-items: center;
     }

     @media (max-width: 576px) {
       .overlay-content img {
         max-width: 500px;
       }

      .overlay-button .btn {
        font-size: 0.9rem;
        padding: 8px 16px;
      }

      .carousel-item {
        background-position: center center;
      }
    }

    /* diseño de respuestas */
    .btn-check:checked + .btn,
    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background-color: #669999 !important; /* Mismo azul que el ícono */
        color: #ffffff !important;
        border-color: #669999 !important;
    }

    /* Asegura que el texto no cambie a otro color */
    .btn-outline-primary {
        color: #669999;
        border-color: #669999;
    }

    .btn-outline-primary:hover {
        color: #ffffff;
    }

    /* Opcional: mejorar contraste y estética en hover */
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        box-shadow: 0 0 5px rgba(29, 142, 223, 0.5);
    }
    /* pintar numeros del li 1,2,3... etc */
    .list-group-item::before {
    content: attr(data-pregunta-id) ". ";
    color: #669999;
    font-weight: bold;
    }

  #tablaCalificaciones th, 
  #tablaCalificaciones td {
    text-align: center;
     border: 1px solid #dee2e6; /* borde gris como en Bootstrap */
  }
  #tablaCalificaciones.table-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff; /* fondo blanco */
  }

  #tablaCalificaciones.table-striped tbody tr:nth-of-type(even) {
    background-color: #f2f2f2; /* gris claro */
  }

  #tablaCalificaciones tbody tr:hover {
    background-color: #cce5ff; /* azul claro al pasar mouse */
  }