/**
 * CGCM — Exámenes oficiales · estilos del menú, del modal y del cierre del examen.
 * Verde corporativo #004f2f, el mismo de los tests de la plataforma.
 */

.cgcm-panel,
.cgcm-final,
.cgcm-anteriores,
.cgcm-test,
.cgcm-aviso-acceso {
    --cgcm-verde: #004f2f;
    --cgcm-verde-claro: #e7f1ec;
    --cgcm-borde: #d4ddd8;
    --cgcm-texto: #26322c;
    --cgcm-gris: #5d6b64;
    --cgcm-error: #b3261e;
    box-sizing: border-box;
    color: var(--cgcm-texto);
    font-size: 16px;
    line-height: 1.5;
}

.cgcm-panel *,
.cgcm-final * {
    box-sizing: border-box;
}

.cgcm-panel__titulo {
    color: var(--cgcm-verde);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 .5rem;
    text-transform: uppercase;
}

.cgcm-panel__intro {
    color: var(--cgcm-gris);
    font-size: .95rem;
    margin: 0 0 1.25rem;
}

/* --- Lista de opciones --------------------------------------------------- */

.cgcm-opciones {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cgcm-opcion {
    align-items: center;
    background: #fff;
    border: 1px solid var(--cgcm-borde);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    justify-content: space-between;
    margin: 0;
    padding: 1rem;
}

/* La tarjeta con selector se apila: en flex con `wrap` las columnas se parten. */
.cgcm-opcion--elegible {
    background: var(--cgcm-verde-claro);
    border-color: var(--cgcm-verde);
    display: grid;
    gap: .9rem;
    grid-template-columns: 1fr;
}

.cgcm-opcion--elegible > .cgcm-btn {
    justify-self: start;
}

.cgcm-opcion__cabecera {
    flex: 1 1 14rem;
    min-width: 0;
}

.cgcm-opcion__titulo {
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0;
}

.cgcm-opcion__tiempo {
    color: var(--cgcm-gris);
    font-size: .9rem;
    margin: .15rem 0 0;
}

.cgcm-opcion__tiempo strong {
    color: var(--cgcm-verde);
}

.cgcm-opcion__selector {
    flex: 1 1 100%;
}

.cgcm-opcion__selector label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.cgcm-opcion__controles {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.cgcm-opcion__rango {
    accent-color: var(--cgcm-verde);
    flex: 1 1 auto;
    min-width: 0;
}

.cgcm-opcion__numero {
    border: 1px solid var(--cgcm-borde);
    border-radius: 8px;
    flex: 0 0 5rem;
    font-size: 1rem;
    padding: .4rem .5rem;
    text-align: center;
}

/* --- Botones ------------------------------------------------------------- */

.cgcm-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    padding: .7rem 1.2rem;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.cgcm-btn--pri,
.cgcm-btn--pri:visited {
    background: var(--cgcm-verde, #004f2f);
    color: #fff;
}

.cgcm-btn--pri:hover,
.cgcm-btn--pri:focus {
    background: #013a22;
    color: #fff;
}

.cgcm-btn--sec,
.cgcm-btn--sec:visited {
    background: #fff;
    border-color: var(--cgcm-verde, #004f2f);
    color: var(--cgcm-verde, #004f2f);
}

.cgcm-btn--sec:hover,
.cgcm-btn--sec:focus {
    background: var(--cgcm-verde-claro, #e7f1ec);
    color: var(--cgcm-verde, #004f2f);
}

.cgcm-btn--txt {
    background: none;
    color: var(--cgcm-gris, #5d6b64);
    padding: .7rem .4rem;
    text-decoration: underline;
}

.cgcm-btn[disabled] {
    cursor: progress;
    opacity: .7;
}

/* --- Paso de datos ------------------------------------------------------- */

.cgcm-datos__titulo {
    color: var(--cgcm-verde);
    font-size: 1.2rem;
    margin: 0 0 .4rem;
}

.cgcm-datos__intro {
    margin: 0 0 1rem;
}

.cgcm-campo {
    margin: 0 0 .9rem;
}

.cgcm-campo label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.cgcm-campo input {
    border: 1px solid var(--cgcm-borde);
    border-radius: 8px;
    font-size: 1rem;
    padding: .6rem .7rem;
    width: 100%;
}

.cgcm-campo input:focus {
    border-color: var(--cgcm-verde);
    outline: 2px solid rgba(0, 79, 47, .25);
    outline-offset: 1px;
}

.cgcm-campo__error:not(:empty) {
    color: var(--cgcm-error);
    display: block;
    font-size: .85rem;
    margin-top: .25rem;
}

.cgcm-datos__aviso {
    color: var(--cgcm-gris);
    font-size: .8rem;
    margin: 0 0 1rem;
}

.cgcm-datos__acciones {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
}

.cgcm-datos__fallo:not([hidden]) {
    background: #fdecea;
    border-radius: 8px;
    color: var(--cgcm-error);
    font-size: .9rem;
    margin: .9rem 0 0;
    padding: .6rem .8rem;
}

/* --- Modal --------------------------------------------------------------- */

.cgcm-modal[hidden] {
    display: none;
}

.cgcm-modal {
    inset: 0;
    position: fixed;
    z-index: 100000;
}

.cgcm-modal__fondo {
    background: rgba(13, 26, 20, .6);
    inset: 0;
    position: absolute;
}

.cgcm-modal__caja {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
    left: 50%;
    max-height: calc(100vh - 2rem);
    max-width: 44rem;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 2rem);
}

.cgcm-modal__cuerpo {
    padding: 1.5rem;
}

.cgcm-modal__cerrar {
    background: none;
    border: 0;
    color: var(--cgcm-gris, #5d6b64);
    cursor: pointer;
    font-size: 1.9rem;
    line-height: 1;
    padding: .25rem .6rem;
    position: absolute;
    right: .4rem;
    top: .4rem;
    z-index: 1;
}

body.cgcm-modal-abierto {
    overflow: hidden;
}

/* --- Cabecera del test y años anteriores --------------------------------- */

.cgcm-test__meta {
    color: #5d6b64;
    font-size: .9rem;
    font-weight: 600;
    margin: 0 0 .75rem;
    text-transform: uppercase;
}

.cgcm-aviso-acceso {
    background: #e7f1ec;
    border-left: 4px solid #004f2f;
    border-radius: 6px;
    margin: 0 0 1.25rem;
    padding: .8rem 1rem;
}

.cgcm-aviso-acceso p {
    margin: 0;
}

.cgcm-anteriores {
    margin: 2.5rem 0 0;
}

.cgcm-anteriores__titulo {
    color: #004f2f;
    font-size: 1.25rem;
    margin: 0 0 .75rem;
}

.cgcm-anteriores__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cgcm-anteriores__item {
    align-items: center;
    border-bottom: 1px solid #d4ddd8;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: 0;
    padding: .8rem 0;
}

.cgcm-anteriores__nombre {
    flex: 1 1 16rem;
    font-weight: 600;
}

.cgcm-anteriores__dato {
    color: #5d6b64;
    font-size: .85rem;
}

/* --- Cierre del examen --------------------------------------------------- */

.cgcm-final {
    margin: 1.5rem auto 0;
    max-width: 44rem;
    text-align: left;
}

.cgcm-final__siguiente {
    background: #f4f8f6;
    border: 1px solid #d4ddd8;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
}

.cgcm-final__titulo {
    color: #004f2f;
    font-size: 1.15rem;
    margin: 0 0 .4rem;
}

.cgcm-final__texto {
    color: #5d6b64;
    font-size: .9rem;
    margin: 0 0 .9rem;
}

.cgcm-final__otras {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
}

.cgcm-final__otras li {
    margin: 0;
}

.cgcm-final__dato {
    display: block;
    font-size: .75rem;
    font-weight: 400;
    opacity: .8;
}

.cgcm-final__volver {
    margin: 0;
}

.cgcm-final__volver a {
    color: #5d6b64;
    font-size: .9rem;
}

.cgcm-cta {
    background: #004f2f;
    border-radius: 12px;
    color: #fff;
    margin-top: 1rem;
    padding: 1.4rem 1.2rem;
    text-align: center;
}

/* El CSS del test usa selectores de id (#ays-quiz-container-N p { color }) y pisa
   el color heredado: aquí hace falta forzarlo para que el texto no quede verde
   sobre verde. */
.cgcm-cta,
.cgcm-cta p,
.cgcm-cta__reclamo {
    color: #fff !important;
}

.cgcm-cta__reclamo {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 1rem;
}

.cgcm-cta .cgcm-btn--pri,
.cgcm-cta .cgcm-btn--pri:visited,
.cgcm-cta .cgcm-btn--pri:hover,
.cgcm-cta .cgcm-btn--pri:focus {
    color: #004f2f !important;
}

.cgcm-cta__acciones {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin: 0;
}

.cgcm-cta .cgcm-btn--pri,
.cgcm-cta .cgcm-btn--pri:visited {
    background: #fff;
    color: #004f2f;
}

.cgcm-cta .cgcm-btn--pri:hover,
.cgcm-cta .cgcm-btn--pri:focus {
    background: #e7f1ec;
    color: #004f2f;
}

.cgcm-cta .cgcm-btn--sec,
.cgcm-cta .cgcm-btn--sec:visited {
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.cgcm-cta .cgcm-btn--sec:hover,
.cgcm-cta .cgcm-btn--sec:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* --- Pantallas pequeñas -------------------------------------------------- */

@media (max-width: 600px) {
    .cgcm-modal__cuerpo {
        padding: 1.1rem 1rem;
    }

    .cgcm-panel__titulo {
        font-size: 1.25rem;
    }

    .cgcm-opcion {
        align-items: stretch;
        flex-direction: column;
    }

    .cgcm-opcion .cgcm-btn,
    .cgcm-final__otras .cgcm-btn,
    .cgcm-cta .cgcm-btn {
        width: 100%;
    }

    .cgcm-datos__acciones .cgcm-btn--pri {
        width: 100%;
    }
}

@media (min-width: 46rem) {
    .cgcm-opciones {
        grid-template-columns: 1fr 1fr;
    }

    .cgcm-opcion--elegible {
        grid-column: 1 / -1;
    }
}