/* Definición de variables de color */
:root {
    --fuente-titulos-test: 'Montserrat', sans-serif;
    --fuente-cuerpo-test: 'Roboto', sans-serif;
    
    /* Aprovechamos para definir unos colores más elegantes */
    --color-texto-test: #2c3e50;
    --color-pregunta-test: #34495e;

    -color-normal-test: black;
    -color-fondo-boton-test: #eee;

    /* --color-fondo:#f4f4f9; */ 
    --color-fondo-test: white;
    --color-borde-test: black;

    --color-hover-test: #f1f3f5; 
    --color-borde-suave-test: #dee2e6;

    --color-fondo-seleccion-test: #e9ecef;

    --fondo-disabled-test:#e9ecef; 

    /* Verdes: Acierto */
    --verde-fondo-test: #d4edda;
    --verde-texto-test: #155724;
    --verde-borde-test: #c3e6cb;

    /* Rojos: Error */
    --rojo-fondo-test: #f8d7da;
    --rojo-texto-test: #721c24;
    --rojo-borde-test: #f5c6cb;

    /* Grises: No contestada / Neutral */
    --gris-fondo-test: #e2e3e5;
    --gris-texto-test: #383d41;
    --gris-borde-test: #d6d8db;

}

/*
button {
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: #007bff;
    color: white;
    transition: 0.3s;
}
*/

.boton-test{
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: #007bff;
    color: white;
    transition: 0.3s;
}

/* =========================================================================== */
/* Pantalla de configuración del test  */
/* =========================================================================== */

/* Contenedor de configuración */
.contenedor-parent-config-test {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    /*min-height: 100vh;    */   /* Ocupa el 100% de la altura de la pantalla */
    margin: 10px;
    background-color:var(--color-fondo-test); /* Color de fondo suave para que destaque la card */
}

.config-container {
    width: 90%;
    max-width: 500px;        /* Para que no se estire demasiado en PC */
    padding: 30px;
    background: var(--color-fondo-test);
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Estilo para los grupos de puntos */
.config-puntos {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.punto-item input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid var(--color-borde-test);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.config-group input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #eee;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.btn-config-test{
    display: block;
    width: 100%;
    padding: 8px 5px;
    margin-bottom: 8px;
    border: thin solid black;
    border-radius: 50px;
        /*box-shadow: 0 4px 10px rgba(0,0,0,0.3);*/
    background-color: var(--color-fondo-test);    
    color:var var(--color-texto-test);
    cursor: pointer;
}

.btn-config-test:hover{
    background-color: #eee;
}

/* Aplicación test, contenedores */

/* Ajustar html para la aplicación */
.ajuste-app-test{
    font-family: var(--fuente-cuerpo-test);
    color: var(--color-texto-test);
    line-height: 1.6;     
    background-color: var(--color-fondo-test); 
    display: flex; 
    justify-content: center; 
    align-items: center;
    min-height: 100vh;  
    flex-direction: row; /* (Opcional, es el valor por defecto) */
    align-items: flex-start; /* Alinea los elementos arriba */      
}

.app-container-test {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 5px;
}


/* 2. Controles  y Puntuación */
.controls-zone {
    display: flex;
    flex-wrap: wrap; /* Para que en móvil salte de línea */
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--color-fondo);
    padding: 15px;
    border-bottom: var(--color-borde) solid;
    border-width: 2px;
    font-family: var(--fuente-titulos);
}

/* Zona de navegación */
.navigation-zone {
    display: flex;             /* Activa el modelo flexible */
    justify-content: flex-start; /* Alinea todo el contenido a la izquierda */
    gap: 15px;                 /* Crea un espacio uniforme entre cada botón */
    padding: 10px 0;           /* Opcional: espacio vertical */
}

/* Botones de navegación */
.navigation-zone button {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem; /* Ajusta el tamaño del icono */
    background-color: gray;
}

.navigation-zone .disabled{
    background-color: var(--fondo-disabled);
}


.header-resultados-test{
    font-family: var(--fuente-cuerpo-test);;
}


/* Nota final del test. Una vez se finaliza */
.nota-grande-test {
    font-size: 1.3rem;
    font-weight: 900;
    margin: 20px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* Dinamismo para la nota */
.aprobado { color: #28a745; }
.suspenso { color: #dc3545; }

.oculto {display: none;}

/* Clases para el marcador*/
.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.stat-card-test {
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}


.stat-card.test .label { font-size: 0.8rem; font-weight: bold; text-transform: uppercase; }
.stat-card-test .valor { font-size: 1.2rem; font-weight: bold; margin: 2px 0; }
.stat-card-test .puntos { font-size: 0.9rem; opacity: 0.8; }

/* Colores por estado una vez revisadas las preguntas */
.aciertos { background-color: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.errores { background-color: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }
.blancos { background-color: #fff3cd; color: #856404; border: 2px solid #ffeeba; }

/* ============================================================== */
/* ============================================================== */
/*   Clases para tipos de pregunta */
/* ============================================================== */
/* ============================================================== */

/* Área de las preguntas */
.question-zone {
    flex-grow: 1; /* Ocupa el espacio sobrante */
    background: #fff;
    padding: 10px 10px 10px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: black thin solid;
}

.question-zone h2{
    font-size: 1rem;
}

/* Preguntas tipo opción una o varias */
.options {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto */
    gap: 10px;
    margin-top: 20px;
}

.options-error{
    border: red thin solid !important;
    box-shadow: 0 4px 6px red;
}

.options-ok{
    border: green thin solid !important;
    box-shadow: 0 4px 6px green;
}

.options-no-contestada{
    border: orange thin solid !important;
    box-shadow: 0 4px 6px   orange;
}


/* ============================================================== */
/* Tipo de pregunta: seleccionar una */
/* ============================================================== */

.option-una-btn{
    /*color:white;*/
    color: var(--color-texto-test);
    border-radius: 18px;
    background-color: white;
    border: var(--color-borde-suave-test) thin solid;
    border-width: 2px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.option-una-btn:hover{
    background-color: var(--color-hover-test);
    border: var(--color-borde-test) thin solid;
    border-width: 2px;
}

.option-una-btn-seleccionada{
    background-color: var(--color-fondo-seleccion-test);
    border-left: 4px solid #6c757d;
}

.option-una-btn-ok{
    background-color: var(--verde-fondo-test);
    color: var(--verde-texto);
    border-left: 4px solid green;
}

.option-una-btn-error{
    background-color: var(--rojo-fondo-test);
    color: var(--rojo-texto-test);
    border-left: 4px solid red;
}

/* Imagenes de las preguntas*/
.option-una-btn > img{
    max-width: 98px;
    height: auto;
}

/* ============================================================== */
/* Tipo de pregunta: seleccionar varias */
/* ============================================================== */
.option-varias-btn{
    /*color:white;*/
    color: var(--color-texto-test);
    background-color: white;
    border: var(--color-borde-suave-test) thin solid;
    border-width: 2px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.option-varias-btn:hover{
    background-color: var(--color-hover-test);
    border: var(--color-borde-test) thin solid;
    border-width: 2px;
    border-radius: 0px;
}

.option-varias-btn-seleccionada{
    background-color: var(--color-fondo-seleccion-test);
    border-left: 4px solid #6c757d;
}

/* Opción correcta y seleccionada */
.option-varias-btn-ok-seleccionada{
    background-color: var(--verde-fondo-test);
    color: var(--verde-texto-test);
    border-left: 4px solid green;
}

/* Opción correcta y no seleccionada */
.option-varias-btn-ok-seleccionada-error{
    background-color: var(--rojo-fondo-test);
    color: var(--rojo-texto);
    border-left: 4px solid red;
}
/* Opcion seleccionada peró incorrecta */
.option-varias-btn-error-seleccionada{
    text-decoration:line-through  3px;
    background-color: var(--rojo-fondo-test);
    color: var(--rojo-texto-test);
    border-left: 4px solid red;
}


/* ============================================================== */
/* Tipo de pregunta ordenar */
/* ============================================================== */

.item-ordenable{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    color: var(--color-texto-test);
    border-radius: 8px;
    background-color: white;
    border: var(--color-borde-suave-test) thin solid;
    border-width: 2px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.item-ordenable:hover{
    background-color: var(--color-hover-test);
    border: var(--color-borde-test) thin solid;
    border-width: 2px;
}


.item-ordenable span{
    width: 80%;
}

.controles-orden button{
    margin-right: 10px;
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Este es el valor clave */
    border: var(--color-borde-test) thin solid;
    color:black;   
/* Para centrar el contenido (icono o letra) */
    align-items: center;
    justify-content: center;
    padding: 0; /* Evita que el padding deforme el círculo */
}

.controles-orden button:hover{
    background-color: gray;
}


.item-ordenable-ok{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;

    background-color: var(--verde-fondo-test);
    color: var(--verde-texto-test);
    border-left: 4px solid green;    
}

.item-ordenable-error{
    display:block;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background-color: var(--rojo-fondo-test);
    color: var(--rojo-texto-test);
    border-left: 4px solid red;    
}

.texto-tachar{
    text-decoration: line-through 3px;
    display: block;
}

/* ============================================================== */
/* Tipo de pregunta relacionar */
/* ============================================================== */

.tarjeta-clasificacion {
    background: var(--color-fondo-test);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tarjeta-clasificacion-ok {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tarjeta-clasificacion-error {
    background: red;
    border: 1px solid red;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.titulo-destino {
    margin-top: 0;
    color: #333;
    font-size: 1.1rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

.opciones-origen {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Importante para móviles */
    margin-top: 10px;
}


.btn-origen{
    /*color:white;*/
    flex:1;
    color: var(--color-texto-test);
    border-radius: 8px;
    background-color: white;
    border: var(--color-borde-suave-test) thin solid;
    border-width: 2px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.btn-origen:hover{
    background-color: var(--color-hover-test);
    border: var(--color-borde-test) thin solid;
    border-width: 2px;
}

.btn-origen.seleccionado{
    background-color: var(--color-fondo-seleccion-test);
    border-left: 4px solid #6c757d;
}

/* Boton ok */
.btn-relacionar-ok {
    flex: 1; /* Hace que todos los botones midan lo mismo */
    background-color: var(--verde-fondo-test);
    color: var(--verde-texto-test);
    border-left: 4px solid green;
    font-size: 1.1rem;
    line-height: 1.6;    
}


/* Opción correcta que el usuario no seleccionó */
.btn-relacionar-error-no-seleccion {
    flex: 1; /* Hace que todos los botones midan lo mismo */
    background-color: var(--rojo-fondo-test);
    color: var(--rojo-texto-test);
    border-left: 4px solid red;
    font-size: 1.1rem;
    line-height: 1.6;    
}

/* Opción incorrecta que el usuario seleccionó */
.btn-relacionar-error-seleccion {
    flex: 1; /* Hace que todos los botones midan lo mismo */
    background-color: var(--rojo-fondo-test);
    color: var(--rojo-texto-test);
    border-left: 4px solid red;
    font-size: 1.1rem;
    line-height: 1.6;   
    text-decoration: line-through 3px;
}

/* ============================================================== */
/* Tipo de pregunta huecos */
/* ============================================================== */
/* 4. Contenedor de las palabras para los huecos */
.texto-zone {
    background: var(--color-fondo-test);
    border: 1px solid var(--color-borde-test);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    line-height: 1.8em;
    min-width: 0; /* Permite que el div se encoja en pantallas pequeñas */
    overflow-wrap: break-word; /* Asegura que palabras o URLs muy largas se dividan */
}


.palabras-zone {
    display: flex;             /* Activa el modelo flexible */
    justify-content: flex-start; /* Alinea todo el contenido a la izquierda */
    gap: 15px;                 /* Crea un espacio uniforme entre cada botón */
    padding: 10px 0;           /* Opcional: espacio vertical */
}

.hueco-vacio {
    display: inline-block;
    min-width: 80px;
    border-bottom: 2px dashed var(--color-borde-test);
    margin: 0 5px;
    text-align: center;
    cursor: pointer;
    color: #007bff;
    font-weight: bold;
    transition: all 0.2s;
}

.hueco-vacio.ocupado {
    border-bottom: 2px solid var(--color-borde-test);
    background: var(--color-fondo-test);
    padding: 2px 8px;
    border-radius: 4px;
}

.hueco-ok {
    border-bottom: 2px solid var(--verde-texto-test);
    padding: 2px 8px;
    border-radius: 4px;
    background-color: var(--verde-fondo-test);
    color: var(--verde-texto-test);
}

.hueco-error {
    border-bottom: 2px solid var(--rojo-texto-test);;
    color: var(--rojo-texto-test);
    background-color: var(--rojo-fondo-test);
    padding: 2px 8px;
    border-radius: 4px;  
}

.hueco-correccion {
    border-bottom: 2px solid var(--rojo-texto-test);;
    color: var(--rojo-texto-test);
    background-color: var(--rojo-fondo-test);
    padding: 2px 8px;
    border-radius: 4px;  
    text-decoration: line-through 3px;
    margin-right: 2px;
}
.palabra-opcion.seleccionada {
    background-color: var(--color-fondo-seleccion-test);
   /* border-left: 4px solid #6c757d;*/
}


.option-una-btn-error{
    background-color: var(--rojo-fondo-test);
    color: var(--rojo-texto);
    border-left: 4px solid red;
}




.palabra-opcion{
    /*color:white;*/
    color: var(--color-texto-test);
    border-radius: 8px;
    background-color: white;
    border: var(--color-borde-suave-test) thin solid;
    border-width: 2px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.palabra-opcion:hover{
    background-color: var(--color-hover-test);
    border: var(--color-borde-test) thin solid;
    border-width: 2px;
}