/* =========================================================================
   nuevas-funciones.css
   =========================================================================
   Estilos de las funciones añadidas: favoritas, tamaño de letra, racha,
   modo inteligente, plan de estudio y análisis personal.

   Todo usa las variables de color que ya tenías (--color-primary,
   --color-border, etc.), así que respeta el modo claro y el oscuro sin
   necesidad de mantener dos versiones. No se toca ninguna regla existente.
   ========================================================================= */

/* ====== TAMAÑO DE LETRA AJUSTABLE ====================================== */
/* El usuario elige la escala en los ajustes. Solo crece el texto de estudio
   (enunciado y respuestas), no la interfaz, para que nada se descoloque. */

.question-text {
    font-size: calc(1rem * var(--escala-lectura, 1));
}

.option-text {
    font-size: calc(0.95rem * var(--escala-lectura, 1));
}

.selector-letra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.selector-letra input[type="range"] {
    flex: 1;
    accent-color: var(--color-primary);
    height: 22px;
}

.selector-letra .muestra-a {
    color: var(--color-text-light);
    font-weight: 700;
}

.selector-letra .muestra-a.pequena { font-size: 13px; }
.selector-letra .muestra-a.grande { font-size: 21px; }

/* ====== PREGUNTAS FAVORITAS ============================================ */

/* La estrella acompaña a los botones "A" y "?" de la esquina superior
   derecha: mismo cuadro de 32x32 y misma separación de 2,5 rem entre ellos.
   Las puntas de la estrella llegan al borde de ese cuadro, de modo que ocupa
   exactamente el mismo círculo que el botón "A".
   La posición horizontal la ajusta favoritos.js, porque "A" no siempre está
   visible y entonces la estrella ocupa su sitio. */
.btn-favorita {
    position: absolute;
    top: 1rem;
    right: 6rem;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: #A0AEC0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
    transition: all 0.3s ease;
}

.btn-favorita svg {
    display: block;
    width: 32px;
    height: 32px;
}

.btn-favorita:hover {
    color: var(--color-warning);
    transform: scale(1.1);
}

.btn-favorita.activa {
    color: var(--color-warning);
}

.btn-favorita.activa svg path {
    fill: var(--color-warning);
}

.btn-favorita:active {
    transform: scale(0.92);
}

.btn-favorita:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 50%;
}

.tarjeta-favoritas .topic-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tarjeta-favoritas .topic-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icono-favoritas {
    color: var(--color-warning);
    line-height: 0;
}

.icono-favoritas svg {
    width: 18px;
    height: 18px;
}

.icono-favoritas svg path {
    fill: var(--color-warning);
}

.subtexto-favoritas {
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: 500;
}

/* ====== AVISO BREVE (aparece y se va solo) ============================= */

.aviso-breve {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px);
    background: var(--color-dark);
    color: var(--color-bg);
    padding: 10px 18px;
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    z-index: 100001;
    transition: opacity .2s ease, transform .2s ease;
    max-width: calc(100vw - 40px);
    text-align: center;
}

.aviso-breve.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .aviso-breve,
    .btn-favorita {
        transition: none;
    }
}

/* ====== RACHA DIARIA =================================================== */

.chip-racha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 1rem;
    padding: 8px 16px;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    width: fit-content;
    max-width: 100%;
}

.chip-racha.apagada {
    color: var(--color-text-light);
}

.llama-racha {
    font-size: 17px;
    line-height: 1;
}

.texto-racha {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== ETIQUETA DE VALOR EN LOS AJUSTES =============================== */

.valor-ajuste {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

/* ====== BOTÓN DEL MODO INTELIGENTE ===================================== */
/* Mismo formato que los demás botones del menú (.btn), con un color propio
   que lo distingue de Elegir Tema, Todos los Temas y Modo Examen. */

/* Relleno de malla, tipo terminal de consola, en el rojo de la app.
   Son dos rejillas de líneas finas (una vertical y otra horizontal) sobre
   un fondo casi negro, más un leve resplandor en el texto. */
.btn-inteligente {
    position: relative;
    background-color: #0D1117;
    background-image:
        repeating-linear-gradient(0deg,
            rgba(196, 30, 58, .34) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(90deg,
            rgba(196, 30, 58, .22) 0 1px, transparent 1px 6px);
    color: #FFFFFF;
    border: 1px solid rgba(196, 30, 58, .55);
    text-shadow: 0 0 7px rgba(196, 30, 58, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}

/* Un degradado por encima para que la malla no quede plana */
.btn-inteligente::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 150% at 50% 0%,
                rgba(196, 30, 58, .16) 0%, transparent 70%);
    pointer-events: none;
}

.btn-inteligente > * {
    position: relative;
}

.btn-inteligente:hover {
    background-color: #12181F;
    border-color: rgba(196, 30, 58, .85);
    box-shadow: 0 0 14px rgba(196, 30, 58, .3);
}

/* En modo oscuro los botones del menú son transparentes con borde, así que
   este se iguala a ellos: gris y negro, con la malla apenas insinuada para
   que se siga distinguiendo de los demás. */
[data-theme="dark"] .btn-inteligente {
    background-color: transparent;
    background-image:
        repeating-linear-gradient(0deg,
            rgba(160, 174, 192, .20) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(90deg,
            rgba(160, 174, 192, .13) 0 1px, transparent 1px 6px);
    border: 2px solid #A0AEC0;
    color: #FFFFFF;
    text-shadow: none;
}

[data-theme="dark"] .btn-inteligente::before {
    background: none;
}

[data-theme="dark"] .btn-inteligente:hover {
    background-color: rgba(160, 174, 192, .14);
    border-color: #CBD5E0;
    box-shadow: none;
}

.icono-inteligente {
    font-size: 17px;
    line-height: 1;
}

/* ====== PLAN DE ESTUDIO: aviso del menú =============================== */

.chip-plan {
    margin: 0 auto 1rem;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    width: 100%;
}

.chip-plan.completado {
    border-color: var(--color-success);
}

.chip-plan.simulacros {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    border-color: var(--color-warning);
}

.linea-plan {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.texto-plan {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.dias-examen {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chip-plan.simulacros .dias-examen {
    font-size: 22px;
    color: var(--color-warning);
}

.barra-plan {
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
    overflow: hidden;
}

.relleno-plan {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width .4s ease;
}

.chip-plan.completado .relleno-plan {
    background: var(--color-success);
}

/* ====== PLAN DE ESTUDIO: ajustes ====================================== */

.bloque-plan {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border);
}

.etiqueta-plan {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 6px;
}

.campo-fecha {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 15px;
}

.campo-fecha:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.resumen-plan {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-light);
}

/* ====== ANÁLISIS PERSONAL ============================================= */

/* Va arriba del todo en Estadísticas, justo debajo del nombre del perfil */
.analisis-personal {
    margin-top: 1.5rem;
}

.analisis-resumen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 1.5rem;
}

/* En el móvil, las cuatro cifras en dos filas para que las etiquetas quepan */
@media (max-width: 480px) {
    .analisis-resumen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dato-analisis {
    flex: 1;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 10px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.valor-analisis {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.etiqueta-analisis {
    display: block;
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.titulo-analisis {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 1.75rem 0 .5rem;
}

.consejo-analisis {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0 0 1rem;
}

.consejo-analisis strong {
    color: var(--color-text);
}

.vacio-analisis {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0 0 1rem;
}

.lista-temas {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tema-analisis {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.cabecera-tema {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.nombre-tema {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.porcentaje-tema {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.barra-tema {
    height: 8px;
    border-radius: 4px;
    background: var(--color-border);
    overflow: hidden;
}

.relleno-tema {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease;
}

.detalle-tema {
    display: block;
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 6px;
}

/* ====== CURVA DE MEJORA =============================================== */

.controles-curva {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.selector-periodo {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.opcion-periodo {
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-light);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.opcion-periodo.activa {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.opcion-periodo:focus-visible,
.selector-temario:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.selector-temario {
    flex: 1 1 180px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
}

/* Selector de qué gráfica ver: arriba y a todo el ancho */
.selector-grafica {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
}

.selector-grafica:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Gráfica de líneas (la dibuja analisis.js en SVG) */
.marco-grafica {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 6px 4px;
}

.grafica-lineas {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.grafica-lineas .rejilla {
    stroke: var(--color-border);
    stroke-width: 1;
}

.grafica-lineas .eje {
    fill: var(--color-text-light);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.grafica-lineas .valor {
    fill: var(--color-text);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.grafica-lineas .linea {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.grafica-lineas .area {
    opacity: .08;
}

.grafica-lineas .punto {
    stroke: var(--color-white);
    stroke-width: 1.5;
}

.leyenda-grafica {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    padding: 6px 4px 4px;
    font-size: 12px;
    color: var(--color-text-light);
}

.elemento-leyenda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.muestra-leyenda {
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.pie-curva {
    font-size: 12px;
    color: var(--color-text-light);
    margin: 8px 0 0;
}

/* ====== EXPLICACIÓN DEL MODO INTELIGENTE ============================== */

.intro-inteligente {
    font-size: 15px;
    line-height: 1.6;
}

.lista-inteligente {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lista-inteligente li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.55;
}

.punto-inteligente {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.punto-inteligente.fallo { background: var(--color-error); }
.punto-inteligente.repaso { background: var(--color-warning); }
.punto-inteligente.nuevo { background: #0F7B6C; }

.situacion-inteligente {
    display: flex;
    gap: 8px;
    margin: 1.25rem 0;
}

.dato-inteligente {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.dato-inteligente .numero {
    display: block;
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dato-inteligente .numero.fallo { color: var(--color-error); }
.dato-inteligente .numero.repaso { color: var(--color-warning); }
.dato-inteligente .numero.nuevo { color: #0F7B6C; }

.dato-inteligente .etiqueta {
    display: block;
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 3px;
}

.sesion-inteligente {
    font-size: 14px;
    text-align: center;
    margin: 0 0 1rem;
}

.no-repetir-inteligente {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 1rem;
    cursor: pointer;
}

.botones-inteligente {
    display: flex;
    gap: 10px;
}

.botones-inteligente .btn {
    flex: 1;
}

/* ====== PLAN DE ESTUDIO: la casilla del examen en el menú ============== */
/* Aparece la primera vez, antes de que el usuario haya puesto su fecha.
   Está en el menú a propósito: en los ajustes no la encontraría nadie. */

.chip-plan.invitacion {
    border-color: var(--color-primary);
    text-align: left;
    padding: 14px 16px;
}

.cabecera-invitacion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.icono-invitacion {
    font-size: 22px;
    line-height: 1.1;
    flex-shrink: 0;
}

.texto-invitacion {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.texto-invitacion strong {
    font-size: 15px;
    color: var(--color-text);
}

.texto-invitacion span {
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-light);
}

.chip-plan.invitacion .campo-fecha {
    margin-bottom: 8px;
}

.ahora-no {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.ahora-no:hover {
    color: var(--color-text);
    background: var(--color-bg);
}

.ahora-no:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ====== CAMBIAR LA FECHA DEL EXAMEN =================================== */

.grupo-dias {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Botón de cambiar la fecha. Antes era un lápiz diminuto que pasaba
   desapercibido: ahora tiene tamaño de botón y borde propio. */
.editar-fecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s ease;
}

.editar-fecha:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.08);
}

.editar-fecha:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.chip-plan.simulacros .editar-fecha {
    margin-left: 4px;
}

/* ====== TEST A LA CARTA =============================================== */

.tarjeta-a-la-carta .topic-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subtexto-a-la-carta {
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: 500;
}

/* La ventana NO se desplaza entera: la cabecera y el pie se quedan fijos y
   solo rueda la lista del medio. Así la barra de desplazamiento queda por
   dentro y los cuatro bordes redondeados se ven iguales; antes la barra se
   pegaba al borde derecho y parecía que esas esquinas estaban en pico. */
.contenido-grupos,
.contenido-inteligente {
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    overflow: hidden;
    padding-top: 2rem;
}

.contenido-grupos h2,
.contenido-grupos .disclaimer-icon,
.contenido-inteligente h2,
.contenido-inteligente .disclaimer-icon {
    text-align: center;
}

.cabecera-modal {
    flex-shrink: 0;
}

.pie-modal {
    flex-shrink: 0;
    padding-top: 12px;
}

/* Aspa de cerrar, arriba a la derecha */
.cerrar-ventana {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    font-family: inherit;
    color: var(--color-text-light);
    cursor: pointer;
    z-index: 3;
    transition: all .2s ease;
}

.cerrar-ventana:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.cerrar-ventana:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.intro-grupos {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.acciones-grupos {
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
}

.enlace-grupos {
    background: none;
    border: none;
    padding: 4px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.enlace-grupos:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.lista-grupos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.grupo-elegible {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text);
}

.grupo-elegible:hover {
    background: var(--color-bg);
}

.grupo-elegible.marcado {
    background: rgba(196, 30, 58, .07);
}

.grupo-elegible input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.nombre-grupo {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.cuenta-grupo {
    font-size: 12px;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.total-grupos {
    text-align: center;
    font-size: 14px;
    margin: 12px 0;
    color: var(--color-text-light);
}

.total-grupos strong {
    color: var(--color-primary);
    font-size: 17px;
}

.botones-grupos {
    display: flex;
    gap: 10px;
}

.botones-grupos .btn {
    flex: 1;
}

.botones-grupos .btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

[data-theme="dark"] .grupo-elegible.marcado {
    background: rgba(196, 30, 58, .18);
}

/* La zona central de las ventanas, que es la única que se desplaza */
.cuerpo-modal {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ====== CONTRASEÑAS (administrador y perfiles protegidos) ============= */
/* El formulario solo está para que el gestor de contraseñas del móvil
   reconozca la casilla: no debe cambiar nada del aspecto de la tarjeta. */
.formulario-contrasena {
    display: contents;
}

/* El usuario fijo que acompaña a la contraseña: el gestor lo necesita,
   pero no hace falta verlo. No se usa display:none porque entonces
   algunos gestores lo ignoran. */
.usuario-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    pointer-events: none;
}

/* ====== RESPUESTAS CAMBIADAS POR EL USUARIO ============================ */
/* Debajo de las opciones, solo después de responder. Un enlace de texto
   discreto, sin iconos, para no cambiar el aspecto de la pantalla. */
.respuesta-propia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 12px;
    margin-top: 12px;
    font-size: 13px;
}

.marca-respuesta-propia {
    color: var(--color-text-light);
    font-weight: 600;
}

.enlace-respuesta-propia {
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.enlace-respuesta-propia:focus-visible,
.opcion-respuesta-propia:focus-visible,
.boton-restablecer-propias:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* La ventana para elegir: mismas opciones que en el test */
.selector-respuesta-propia h2 {
    margin-bottom: 0.5rem;
}

.explicacion-respuesta-propia {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

.opciones-respuesta-propia {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
    text-align: left;
}

.opcion-respuesta-propia {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--color-bg);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.opcion-respuesta-propia:hover {
    border-color: var(--color-primary);
    background: var(--color-white);
}

.letra-respuesta-propia {
    font-weight: 700;
    min-width: 22px;
}

.texto-respuesta-propia {
    flex: 1;
}

.nota-respuesta-propia {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--color-text-light);
    padding-top: 2px;
}

.cancelar-respuesta-propia {
    width: 100%;
}

/* En Ajustes: botón pequeño con el estilo de los demás */
.boton-restablecer-propias {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Panel de administración: respuestas discutidas */
.tarjeta-discutida {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    text-align: left;
}

.cabecera-discutida {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 6px;
}

.usuarios-discutida {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--color-primary);
}

.enunciado-discutida {
    font-size: 14px;
    color: var(--color-text);
    margin: 0 0 8px;
    line-height: 1.45;
}

.oficial-discutida,
.titulo-elegidas-discutida {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px;
}

.elegidas-discutida {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--color-text);
}

.vacio-discutidas {
    text-align: center;
    color: var(--color-text-light);
    margin-top: 15px;
}

/* ====== VENTANAS DE AVISO ============================================== */
/* El texto centrado, igual que el título (dialogos.js) */
/* Con .disclaimer-content delante para ganar a ".disclaimer-content p",
   que alinea a la izquierda los textos largos del aviso legal */
.disclaimer-content .texto-dialogo {
    text-align: center;
}

/* ====== AJUSTES CENTRADOS CON EL MENÚ ================================== */
/* Cerrados: los iconos (descargar y engranaje) centrados, como siempre.
   Abiertos: el panel se queda en el eje del menú y los iconos se apartan a
   su izquierda. En pantallas estrechas no caben al lado: van encima, a la
   izquierda, y el panel ocupa el ancho del menú.
   Se usa :has() para no depender de quién abre o cierra el panel; en un
   navegador antiguo que no lo entienda se queda como estaba. */
.botones-ajustes {
    display: flex;
    align-items: center;
    gap: 5px;
}

.settings-section:has(> .settings-panel:not([style*="none"])) {
    display: grid;
    grid-template-columns: 1fr minmax(0, 400px) 1fr;
    align-items: center;
    column-gap: 12px;
}

.settings-section:has(> .settings-panel:not([style*="none"])) > .botones-ajustes {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}

.settings-section:has(> .settings-panel:not([style*="none"])) > .settings-panel {
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 700px) {
    .settings-section:has(> .settings-panel:not([style*="none"])) {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .settings-section:has(> .settings-panel:not([style*="none"])) > .botones-ajustes {
        justify-self: start;
    }

    .settings-section:has(> .settings-panel:not([style*="none"])) > .settings-panel {
        grid-column: 1;
        grid-row: 2;
        max-width: none;
    }
}

/* ====== ANUNCIO DE GOOGLE PLAY (solo web) ============================== */
/* Una cinta de texto que corre de derecha a izquierda, con una etiqueta fija
   a la izquierda. Mismos colores, bordes y radios que el resto del menú, así
   que funciona en modo claro y oscuro sin reglas propias. */
.anuncio-play {
    display: flex;
    align-items: stretch;
    margin: 0 auto 1rem;
    max-width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* Toda la cinta es un enlace a la ficha de Google Play */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.etiqueta-anuncio {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ventana-anuncio {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 9px 0;
    /* Los bordes se difuminan para que el texto entre y salga suave. A la
       izquierda deja un hueco antes de la etiqueta: el texto se desvanece
       antes de tocarla, en vez de meterse por detrás. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 12px, #000 44px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 12px, #000 44px, #000 calc(100% - 28px), transparent 100%);
}

.cinta-anuncio {
    display: inline-flex;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    /* El texto va dos veces: al llegar a la mitad vuelve al principio sin que se note */
    animation: correr-anuncio 26s linear infinite;
    will-change: transform;
}

.cinta-anuncio > span {
    padding-right: 8px;
}

.separador-anuncio {
    color: var(--color-primary);
    font-weight: 800;
    margin: 0 14px;
}

.anuncio-play:hover .cinta-anuncio {
    animation-play-state: paused;
}

@keyframes correr-anuncio {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Quien prefiere menos movimiento ve el texto quieto */
@media (prefers-reduced-motion: reduce) {
    .cinta-anuncio {
        animation: none;
        white-space: normal;
    }
    .cinta-anuncio > span + span {
        display: none;
    }
    .ventana-anuncio {
        padding: 9px 12px;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* =========================================================================
   TARJETA QUE GIRA (tarjeta-giro.js)
   Por delante la pregunta, por detrás la respuesta y la justificación.
   Mientras está de frente y quieta no lleva perspectiva ni transform: así
   la pregunta se pinta exactamente igual que antes.
   ========================================================================= */
.tarjeta-giro {
    position: relative;
    margin-bottom: 1.5rem;
    /* El desplazamiento vertical lo sigue haciendo el navegador; el
       horizontal lo recoge la tarjeta para girar */
    touch-action: pan-y;
}

.tarjeta-giro .question-container {
    margin-bottom: 0;
}

.tarjeta-dorso {
    display: none;
}

.tarjeta-giro.en-giro {
    perspective: 1400px;
}

.tarjeta-giro.en-giro .tarjeta-giro-interior {
    transform-style: preserve-3d;
    will-change: transform;
}

.tarjeta-giro.en-giro .question-container {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tarjeta-giro.en-giro .tarjeta-dorso {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: rotateY(180deg);
}

.tarjeta-giro.arrastrando {
    user-select: none;
    -webkit-user-select: none;
    cursor: grabbing;
}

.tarjeta-dorso-titulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0.35rem 3rem 1rem 0;
}

.tarjeta-dorso-respuesta {
    background: #DCFCE7;
    border: 2px solid var(--color-success);
    color: #065F46;
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.tarjeta-dorso-respuesta strong {
    font-weight: 700;
}

.tarjeta-dorso-texto {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    white-space: pre-line;
}

.tarjeta-dorso-texto.sin-justificacion {
    color: var(--color-text-light);
    font-style: italic;
}

.tarjeta-dorso-pista {
    font-size: 12px;
    color: var(--color-text-light);
    text-align: center;
    margin-top: 1.25rem;
}

[data-theme="dark"] .tarjeta-dorso-respuesta {
    background: rgba(72, 187, 120, 0.15);
    border-color: #48BB78;
    color: #9AE6B4;
}

/* Modo examen: sin pistas. Ni número de pregunta (deja intuir el tema),
   ni tema, ni estrella de favorita. Al repetir las falladas el test ya
   no está en modo examen y todo vuelve a salir. */
#quiz-page.exam-mode #question-number,
#quiz-page.exam-mode #quiz-topic-title,
#quiz-page.exam-mode #btn-favorita {
    display: none !important;
}

/* Aviso de la primera vez que se pulsa ? */
.aviso-giro {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    max-width: 420px;
    margin: 0 auto;
    z-index: 99998;
    background: #2D3748;
    color: #FFFFFF;
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font-size: 15px;
    line-height: 1.45;
}

.aviso-giro p {
    margin: 0 0 0.8rem;
}

.aviso-giro-ok {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
}

/* =========================================================================
   BOTONERA DEL TEST: VALIDAR arriba, ANTERIOR y SALTAR gemelos debajo.
   Los tres con el mismo borde rojo.
   ========================================================================= */
.quiz-actions.botonera-test {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.botonera-test .btn {
    border: 2px solid var(--color-primary);
}

.botonera-test .btn-validate {
    grid-column: 1 / -1;
    order: 0;
}

.botonera-test .btn-anterior,
.botonera-test .btn-saltar {
    order: 1;
    background: var(--color-white);
    color: var(--color-primary);
    padding: 0.9rem 0.5rem;
    font-size: 15px;
}

.botonera-test .btn-anterior span,
.botonera-test .btn-saltar span {
    font-size: 1.3em;
    line-height: 0;
}

.botonera-test .btn-anterior:hover,
.botonera-test .btn-saltar:hover {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* =========================================================================
   PLAN DE ESTUDIO: fase de repaso (temario completo, plan-estudio.js)
   ========================================================================= */
.chip-plan.fase-repaso {
    border-color: var(--color-success);
}

.chip-plan.fase-repaso .texto-plan strong {
    color: var(--color-text);
}

.accion-plan {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.accion-plan.suave {
    background: var(--color-white);
    color: var(--color-primary);
}

/* =========================================================================
   TEST A MEDIAS: aviso en el menú (tests-guardados.js)
   ========================================================================= */
.aviso-test-guardado {
    margin: 0 auto 1rem;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
    width: 100%;
}

.aviso-test-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--color-text-light);
}

.aviso-test-texto strong {
    color: var(--color-text);
    font-size: 15px;
}

.aviso-test-mas {
    font-size: 12px;
}

.aviso-test-botones {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 8px;
}

.aviso-test-botones .btn {
    padding: 10px 8px;
    font-size: 14px;
}