/* Contenedor para centrar la sección de la puntuación */
          .score-container {
            display: flex;
            flex-direction: column; /* Colocar el título y el círculo uno debajo del otro */
            align-items: center;    /* Centrar horizontalmente */
            margin: 1em auto;
          }
        
          /* Ajustes al círculo y el texto interno (si quieres centrarlo perfectamente) */
          .circle-wrapper {
            margin: 0 auto;
          }
        .circle-wrapper {
          display: inline-block;
          width: 120px; 
          height: 120px;
          margin: 1em auto;
          position: relative;
          text-align: center;
        }
        .circular-chart {
          max-width: 100%;
          max-height: 100%;
          display: block;
          margin: 0 auto;
        }
        .circle-bg {
          fill: none;
          stroke: #eee;
          stroke-width: 3.8;
        }
        .circle {
          fill: none;
          stroke-width: 2.8;
          stroke-linecap: round;
          stroke: #4caf50; /* Color del trazo del progreso */
          transform: rotate(-90deg);
          transform-origin: 50% 50%;
          transition: stroke-dasharray 1s ease-out;
        }
        .percentage {
          font-size: 0.7em;
          text-anchor: middle;
          fill: #333;
          font-weight: bold;
          dominant-baseline: middle;
        }
          /* Contenedor para los botones centrados */
          .buttons-container {
            text-align: center; 
            margin-top: 1em; 
          }
        
          /* Botones de “Ver Ranking” y “Retar a un amigo” con esquinas redondeadas */
          .button-rounded {
            display: inline-block;
            background-color: #ff9800; /* Ajusta al color que quieras */
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 0.6em 1.2em;
            margin: 0.3em;
            text-decoration: none; /* Quitar subrayado en enlaces */
            font-weight: 500;
            cursor: pointer;
          }
          .button-rounded:hover {
            background-color: #ffa733; /* Efecto hover */
          }
        
          /* Botón (enlace) de “Salir” con subrayado */
          .exit-link {
            display: inline-block;
            margin: 0.3em;
            color: #333;
            text-decoration: underline;
            cursor: pointer;
            font-weight: 500;
          }
          .exit-link:hover {
            color: #000;
          }
        
        
      .score-cards {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        max-width: 350px; /* Ajusta según tu gusto o diseño */
        margin: 1em auto; /* Centrar horizontalmente */
      }
    
      /* Cada tarjeta individual */
      .score-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 0.8em 1em;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Sombra suave */
      }
    
      .score-label {
        font-weight: 500; /* Un poco más destacada */
        color: #444;
      }
    
      .score-value {
        font-weight: 600; /* Más énfasis en el valor */
        color: #555;
      }
    
      /* Ejemplo: Colorear números correctos/incorrectos si quieres un matiz de color extra */
      .score-value.correctas {
        color: green;
      }
      .score-value.incorrectas {
        color: red;
      }
      
      /* Contenedor principal de cada pregunta/respuesta */
      .enarmango-pregunta {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 1em;
        margin-bottom: 1em; /* Espacio entre preguntas */
      }
    
      /* Texto truncado y texto completo oculto por defecto */
      .caso-truncado, .explicacion-truncada {
        margin: 0.5em 0;
      }
      .caso-completo, .explicacion-completa {
        display: none; /* Se oculta inicialmente */
        margin: 0.5em 0;
      }
    
      /* Enlaces tipo texto subrayado */
      .toggle-link {
        color: #ff6700; /* Ajusta color */
        text-decoration: underline;
        cursor: pointer;
        font-weight: 500;
      }
      

        .guia-modal {
          display: none; 
          position: fixed;
          z-index: 9999; 
          left: 0;
          top: 0;
          width: 100%; 
          height: 100%; 
          overflow: auto;
          background-color: rgba(0,0,0,0.7); /* semi-transparente */
        }
        .guia-modal-content {
          background-color: #fefefe;
          margin: 5% auto;
          max-width: 800px; /* Ajusta tamaño max del contenido */
          padding: 1em;
          border-radius: 8px;
          position: relative;
          text-align: center;
        }
        .guia-close {
          position: absolute;
          top: 8px;
          right: 16px;
          color: #333;
          font-size: 24px;
          font-weight: bold;
          cursor: pointer;
        }
        .guia-nav {
          margin-top: 1em;
        }
        .guia-nav button {
          margin: 0 0.5em;
          padding: 0.5em 1em;
          cursor: pointer;
        }
        #guiaImg {
          max-width: 100%;
          height: auto;
        }
        
        .enarmango-resultado-titulo {
          margin-top: 2em;  /* Ajusta el espacio que quieras */
          display: block;
        }


    .enarmango-pregunta {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 1em;
      margin-bottom: 1em;
    }
    .caso-truncado, .caso-completo {
      margin: 0.5em 0;
    }
    .caso-completo {
      display: none; /* Oculto inicialmente */
    }
    /* Toggle link para ambos métodos */
    .toggle-link {
      color: #ff6700;
      text-decoration: underline;
      cursor: pointer;
      font-weight: 500;
    }
    
    /* Contenedor de la explicación con altura limitada */
    .explicacion-container {
      max-height: 200px; /* Alto colapsado */
      overflow: hidden;
      position: relative;
      transition: max-height 0.4s ease;
    }
    /* Degradado opcional que indica más contenido */
    .explicacion-container::after {
      content: "";
      position: absolute;
      bottom: 0; 
      left: 0; 
      width: 100%;
      height: 2em;
      background: linear-gradient(transparent, #fff);
    }
    
    /* --- Estilos para el Modal de Crear Desafío --- */
      #crear-desafio-modal {
        display: none; /* Oculto por defecto */
        position: fixed;
        z-index: 1001; /* Encima del overlay de login si existe */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.6);
        align-items: center;
        justify-content: center;
      }
      #crear-desafio-modal .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 25px 30px;
        border: 1px solid #888;
        width: 90%;
        max-width: 600px; /* Un poco más ancho para el form */
        border-radius: 8px;
        position: relative;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      }
      #crear-desafio-modal .modal-close {
         color: #aaa;
         position: absolute;
         top: 10px;
         right: 15px;
         font-size: 28px;
         font-weight: bold;
         line-height: 1;
         cursor: pointer;
      }
       #crear-desafio-modal .modal-close:hover { color: #333; }
      #crear-desafio-modal h3 { margin-top: 0; margin-bottom: 20px; }
      #crear-desafio-form label { display: block; margin-bottom: 5px; font-weight: 600; }
      #crear-desafio-form input[type="text"],
      #crear-desafio-form textarea,
      #crear-desafio-form input[type="date"] {
        width: 100%;
        padding: 8px 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      #crear-desafio-form textarea { min-height: 80px; }
      #crear-desafio-form button { /* Estilo botón naranja */
         background-color: #ff9800; color: white !important; border: none;
         padding: 10px 25px; border-radius: 25px; cursor: pointer;
         font-size: 1em; font-weight: 500; margin-right: 10px;
      }
       #crear-desafio-form button:hover { background-color: #fb8c00; }
       #crear-desafio-form button:disabled { background-color: #bdbdbd; cursor: not-allowed; }
       #crear-desafio-form .cancel-button { background-color: #ccc; color: #333 !important; }
       #crear-desafio-form .cancel-button:hover { background-color: #bbb; }
       #challenge-response { margin-top: 15px; padding: 10px; border-radius: 4px; display: none; }
       #challenge-response.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
       #challenge-response.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.challenge-visibility-option {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    
}
.challenge-visibility-option label {
    margin-left: 5px;
    font-weight: normal;
    display: inline;
    
}
.challenge-visibility-option .description {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
    margin-bottom: 0;
    
}