/* Aprender: la página con el gimnasio mental y el cuadro de juego (juegos.js). Lo común está en base.css. */

.contenido-aprender {
    display: grid;
    gap: 1.4rem;
    max-width: 62rem;
    margin: 0 auto;
    padding: 1rem 1rem 7rem;
}

.zona-aprender {
    display: grid;
    gap: 0.8rem;
}

.zona-aprender h2 {
    margin: 0;
}

/* El título de cada zona (Libros, Recursos): grande, en negrita y apretado, como un titular; y su subtítulo, chico y apagado */
.zona-aprender > h2:not(.solo-lectores) {
    font-size: clamp(1.9rem, 7vw, 2.7rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-transform: none;
}

.zona-aprender > .ahora-detalle {
    max-width: 34rem;
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 0.86rem;
    line-height: 1.55;
    opacity: 0.72;
}

.zona-aprender.entra {
    animation: mov-sube-corto 0.55s var(--mov-expo, ease-out) both;
}

.zona-proxima {
    justify-items: start;
    padding: 1rem 1.2rem;
    border: 1px dashed color-mix(in srgb, var(--texto) 28%, transparent);
    border-radius: 18px;
}

.lista-juegos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Las pestañas: una bandeja de cristal con tres opciones; la activa lleva el color de acento */
.aprender-pestanas {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--texto) 16%, transparent);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--texto) 7%, transparent);
}

.aprender-pestana {
    flex: 1;
    padding: 0.6rem 0.4rem;
    color: var(--texto);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 999px;
    opacity: 0.85;
}

.aprender-pestana[aria-pressed="true"] {
    color: var(--activo-texto);
    font-weight: 700;
    background-color: var(--activo-fondo);
    opacity: 1;
}

.zona-aprender[hidden] {
    display: none;
}

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Las tarjetas del gimnasio (Entrenar hoy, perfil, cómo vas y cada juego) son de cristal, como todas las de VYDA: se ve lo que hay detrás */
.entrena-hoy,
.como-vas,
.repaso-hoy,
.cruces-dia,
.perfil-cerebral {
    display: grid;
    gap: 0.7rem;
    padding: 1.1rem 1.2rem;
    background: var(--vidrio-superficie);
    -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.6);
    backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    border-radius: 20px;
    box-shadow: var(--brillo-panel);
}

.como-vas {
    border-style: dashed;
}

.repaso-hoy h2,
.cruces-dia h2,
.perfil-cerebral h2 {
    margin: 0;
    font-size: 1rem;
}

.aprender-subtitulo {
    margin: 0.4rem 0 0;
    font-size: 1rem;
}

.entrena-hoy h2,
.como-vas h2 {
    margin: 0;
    font-size: 1rem;
}

.entrena-hoy-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.entrena-hoy-cabecera span {
    font-size: 0.85rem;
    opacity: 0.85;
}

.como-vas-linea {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 0.9rem;
    line-height: 1.5;
}

.como-vas-linea strong {
    color: var(--activo-fondo);
}

.tarjeta-juego-cabecera {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.tarjeta-juego-textos {
    flex: 1;
    min-width: 0;
}

.juego-icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--activo-fondo);
    border-radius: 14px;
    background-color: color-mix(in srgb, var(--activo-fondo) 18%, transparent);
}

.juego-icono svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.juego-niveles {
    display: flex;
    gap: 3px;
}

.juego-nivel {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--texto) 18%, transparent);
}

.juego-nivel.lleno {
    background-color: var(--activo-fondo);
}

.tarjeta-juego-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.tarjeta-juego-pie .item-meta {
    margin: 0;
}

.tarjeta-juego {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1rem 1.1rem;
    background: var(--vidrio-superficie);
    -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.6);
    backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    border-radius: 18px;
    box-shadow: var(--brillo-panel);
}

.tarjeta-juego h3 {
    margin: 0;
    font-size: 1.1rem;
}

.tarjeta-juego-texto {
    margin: 0;
    line-height: 1.45;
}

/* Los textos de las tarjetas (descripción, mejor nivel, «Pronto»…): el mismo tamaño y letra que los comentarios de Rachas (el cuerpo base es de 1.25rem y en el celular se veía enorme) */
.tarjeta-juego-texto,
.tarjeta-juego .item-meta,
.zona-proxima .ahora-detalle {
    font-family: var(--fuente-texto);
    font-size: 0.9rem;
}

.tarjeta-juego .btn {
    justify-self: start;
}

.entrena-hoy .ahora-detalle,
.perfil-cerebral .item-meta,
.como-vas .item-meta {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* ---------- El cuadro de juego ---------- */
.juego-dialogo {
    margin: auto;
    width: min(38rem, calc(100vw - 1.5rem));
    min-height: min(32rem, calc(100vh - 1.5rem));
    padding: 1rem;
    color: var(--texto);
    background: var(--vidrio-superficie), color-mix(in srgb, var(--fondo) 55%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 var(--vidrio-luz), 0 40px 90px -30px rgba(0, 0, 0, 0.75);
}

.juego-dialogo[open] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.8rem;
}

.juego-dialogo::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.juego-cabecera {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.juego-cabecera h2 {
    margin: 0;
    flex: 1;
    font-size: 1.05rem;
}

.juego-progreso {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.85;
}

.juego-area {
    display: grid;
    gap: 0.9rem;
    place-content: center;
    justify-items: center;
    padding: 1.2rem;
    text-align: center;
    border: 3px solid transparent;
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--texto) 6%, transparent);
    user-select: none;
    touch-action: manipulation;
}

.juego-area:focus {
    outline: none;
}

.juego-grande {
    margin: 0;
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
}

.juego-detalle {
    margin: 0;
    max-width: 34rem;
    line-height: 1.5;
}

.juego-feedback {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Reacción: espera (oscuro), «¡YA!» (verde, con texto: no solo color) y los resultados */
.juego-espera { background-color: #1b1f24; }
.juego-ya { background-color: #2ecc71; color: #06210f; }
.juego-bien { border-color: #2ecc71; }
.juego-mal { border-color: #ff5a5f; }

/* Stroop */
.juego-palabra {
    margin: 0;
    font-size: clamp(2.6rem, 12vw, 4.6rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}

.juego-opciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    width: min(100%, 24rem);
}

.juego-opcion {
    min-height: 3rem;
}

/* Toca o aguanta: la forma y el texto dicen qué hacer (verde y círculo = tocar; rojo y cuadrado = aguantar) */
.juego-figura {
    display: grid;
    place-items: center;
    width: 9rem;
    height: 9rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: #06210f;
}

.juego-go {
    background-color: #2ecc71;
    border-radius: 50%;
}

.juego-nogo {
    background-color: #ff5a5f;
    border-radius: 12px;
    color: #2a0507;
}

.juego-sonido {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.juego-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

/* ---------- Perfil cerebral: la araña de cinco ejes ---------- */
.radar {
    width: min(100%, 22rem);
    justify-self: center;
    overflow: visible;
    margin: 1.2rem auto 1.4rem;
    display: block;
}

.radar-anillo {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 1.2;
}

.radar-eje {
    stroke: rgba(255, 255, 255, 0.13);
    stroke-width: 1.2;
}

.radar-area {
    fill: color-mix(in srgb, var(--activo-fondo, #f97316) 24%, transparent);
    stroke: var(--activo-fondo, #f97316);
    stroke-width: 2.5;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--activo-fondo, #f97316) 60%, transparent));
}

.radar-punto {
    fill: var(--activo-fondo, #f97316);
    stroke: #ffffff;
    stroke-width: 2;
    filter: drop-shadow(0 0 6px var(--activo-fondo, #f97316));
}

.radar-etiqueta {
    fill: #f1f5f9;
    font-family: var(--fuente-texto, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.radar-etiqueta.vacio {
    opacity: 0.5;
}

.perfil-lista,
.entrena-hoy-lista {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.perfil-lista li,
.entrena-hoy-lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    font-family: var(--fuente-texto);
    font-size: 0.9rem;
}

.perfil-lista strong {
    flex: 1 1 10rem;
}

.perfil-puntos {
    font-variant-numeric: tabular-nums;
}

.perfil-tendencia {
    font-size: 0.8rem;
    opacity: 0.9;
}

.perfil-tendencia.sube {
    color: var(--activo-fondo);
}

.entrena-marca {
    width: 1.1rem;
    color: var(--activo-fondo);
    text-align: center;
}

.entrena-hoy-lista li.hecho strong {
    opacity: 0.7;
    text-decoration: line-through;
}

/* Las cartas de los juegos viven en un carrusel de profundidad (carrusel-profundidad.js) */
.juegos-carrusel {
    min-height: 0;
}

/* ---------- Los juegos de memoria y el cambio de regla ---------- */
.juego-regla {
    margin: 0;
    padding: 0.3rem 0.9rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid var(--vidrio-borde);
    border-radius: 999px;
    background: color-mix(in srgb, var(--texto) 10%, transparent);
}

.juego-figura-cambio {
    width: 7.5rem;
    height: 7.5rem;
}

.juego-cuadrada {
    border-radius: 14px;
}

.juego-digito {
    font-size: clamp(3.4rem, 16vw, 5.6rem);
    font-variant-numeric: tabular-nums;
}

.juego-escrito {
    margin: 0;
    min-height: 2.2rem;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    font-variant-numeric: tabular-nums;
}

.juego-teclado {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    width: min(100%, 17rem);
}

.juego-tecla {
    min-height: 3rem;
    font-size: 1.15rem;
}

.juego-borrar {
    grid-column: span 2;
    font-size: 0.9rem;
}

.juego-lista-pares {
    display: grid;
    gap: 0.4rem;
    padding: 0;
    margin: 0.5rem 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    list-style: none;
}

/* Parejas: el tablero de cartas (--columnas lo pone juegos.js según el tamaño) */
.juego-tablero {
    display: grid;
    grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
    gap: 0.6rem;
    width: min(100%, 22rem);
}

.juego-carta {
    aspect-ratio: 3 / 4;
    padding: 0;
    font-size: 1.8rem;
    cursor: pointer;
    background: color-mix(in srgb, var(--texto) 14%, transparent);
    border: 1px solid var(--vidrio-borde);
    border-radius: 12px;
}

.juego-carta-arriba {
    background: color-mix(in srgb, var(--activo-fondo) 35%, transparent);
}

.juego-carta-par {
    background: color-mix(in srgb, var(--activo-fondo) 55%, transparent);
    cursor: default;
}

.juego-corsi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    width: min(100%, 18rem);
}

.juego-celda {
    aspect-ratio: 1;
    color: color-mix(in srgb, var(--texto) 55%, transparent);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    background: color-mix(in srgb, var(--texto) 12%, transparent);
    border: 1px solid var(--vidrio-borde);
    border-radius: 14px;
    transition: background-color 0.08s ease;
}

.juego-celda:disabled {
    cursor: default;
}

.juego-celda.luz {
    color: var(--activo-texto);
    background-color: var(--activo-fondo);
    box-shadow: 0 0 18px color-mix(in srgb, var(--activo-fondo) 70%, transparent);
}

.juego-letra {
    font-size: clamp(4rem, 18vw, 6.5rem);
    letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
    .juego-celda {
        transition: none;
    }
}

.repaso-hoy .ahora-detalle {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 0.9rem;
    line-height: 1.45;
}

.repaso-hoy .btn {
    justify-self: start;
}

/* ---------- El cuadro de repaso (repaso.js) ---------- */
.repaso-frase {
    margin: 0;
    max-width: 34rem;
    font-size: 1.25rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.repaso-opciones {
    grid-template-columns: 1fr;
    width: min(100%, 26rem);
}

/* ---------- Tu día y tu mente ---------- */
.cruces-dia .ahora-detalle,
.cruces-dia .item-meta,
.cruces-lista {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 0.88rem;
    line-height: 1.5;
}

.cruces-lista {
    display: grid;
    gap: 0.5rem;
    padding-left: 1.1rem;
}

.cruces-dia .btn {
    justify-self: start;
}

/* Cálculo mental y secuencias: la operación o la serie en grande y cuatro opciones en dos columnas */
.juego-operacion {
    font-size: clamp(1.8rem, 8vw, 3rem);
    font-variant-numeric: tabular-nums;
}

.juego-opciones-cuatro {
    width: min(100%, 26rem);
}


/* ---------- Mejoras visuales del Gimnasio Cerebral y Medidores Académicos ---------- */
.perfil-lista li {
    grid-template-columns: 1fr auto auto;
    row-gap: 0.35rem;
}

.perfil-barra-pista {
    grid-column: 1 / -1;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--texto) 10%, transparent);
    overflow: hidden;
}

.perfil-barra-relleno {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--activo-fondo), color-mix(in srgb, var(--activo-fondo) 65%, #38bdf8));
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.medidores-academicos {
    display: grid;
    gap: 1.1rem;
    padding: 1.25rem;
    background: var(--vidrio-superficie);
    -webkit-backdrop-filter: var(--vidrio-filtro);
    backdrop-filter: var(--vidrio-filtro);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--vidrio-radio);
    box-shadow: var(--vidrio-sombra);
}

.medidores-acad-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.medidores-acad-cabecera h2 {
    margin: 0 0 0.2rem;
    font-family: var(--fuente-titulo);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.medidor-chip-destacado {
    padding: 0.16rem 0.52rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--texto);
    background: color-mix(in srgb, var(--color-area, var(--activo-fondo)) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-area, var(--activo-fondo)) 45%, transparent);
}

.medidor-acad-pista {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--texto) 11%, transparent);
    overflow: hidden;
}

.medidor-acad-relleno {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-area, var(--activo-fondo)), color-mix(in srgb, var(--color-area, var(--activo-fondo)) 65%, #fff));
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Tarjetas de Retos Académicos ---------- */
.retos-academicos-seccion {
    display: grid;
    gap: 0.95rem;
}

.retos-acad-encabezado {
    display: grid;
    gap: 0.25rem;
}

.retos-academicos-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
    gap: 1rem;
}

.tarjeta-academica {
    --color-area: var(--activo-fondo);
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--color-area) 30%, var(--vidrio-borde));
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.tarjeta-academica:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--color-area) 55%, var(--vidrio-borde));
}

.tarjeta-academica-destacada {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-area) 18%, transparent), var(--vidrio-superficie));
}

.tarjeta-acad-etiquetas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
}

.juego-chip-tema {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--color-area, var(--activo-fondo)) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-area, var(--activo-fondo)) 38%, transparent);
}

.tarjeta-acad-puntos {
    font-family: var(--fuente-titulo);
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0.9;
}

/* ---------- Diálogo de Reto Académico y Comprensión Lectora ---------- */
.juego-dialogo-academico[open] {
    width: min(44rem, calc(100vw - 1.25rem));
    grid-template-rows: auto auto 1fr;
}

.juego-barra-ronda {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--texto) 12%, transparent);
    overflow: hidden;
}

.juego-barra-relleno {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-area, var(--activo-fondo)), #38bdf8);
    transition: width 0.35s ease;
}

.juego-area-academica {
    align-content: start;
    justify-items: stretch;
    text-align: left;
    padding: 1.15rem;
    gap: 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 9rem);
}

.juego-bloque-acad {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.juego-lectura-pasaje {
    width: 100%;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--texto) 5%, transparent);
    border: 1px solid var(--vidrio-borde);
    border-left: 4px solid var(--color-area, var(--activo-fondo));
}

.juego-lectura-titulo {
    margin: 0 0 0.45rem;
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    font-weight: 800;
}

.juego-lectura-texto {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 0.96rem;
    line-height: 1.62;
    opacity: 0.94;
}

.juego-reto-pregunta {
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
}

.juego-opciones-academicas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    width: 100%;
}

.juego-opcion-acad {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.95rem;
    text-align: left;
    justify-content: flex-start;
    font-weight: 600;
    line-height: 1.38;
    border-radius: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.juego-opcion-letra {
    display: grid;
    place-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 9px;
    font-family: var(--fuente-titulo);
    font-size: 0.82rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--texto) 10%, transparent);
}

.juego-opcion-acad.juego-opcion-correcta {
    border-color: #2ecc71;
    background: color-mix(in srgb, #2ecc71 22%, transparent);
}

.juego-opcion-acad.juego-opcion-incorrecta {
    border-color: #ff5a5f;
    background: color-mix(in srgb, #ff5a5f 20%, transparent);
}

.juego-explicacion {
    display: grid;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--vidrio-borde);
    background: color-mix(in srgb, var(--texto) 6%, transparent);
}

.juego-explicacion.es-acierto {
    border-color: color-mix(in srgb, #2ecc71 55%, var(--vidrio-borde));
}

.juego-explicacion.es-fallo {
    border-color: color-mix(in srgb, #ff5a5f 55%, var(--vidrio-borde));
}

.juego-explicacion p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.48;
    opacity: 0.9;
}

.juego-btn-continuar {
    justify-self: end;
}

.juego-resumen-medidor {
    display: grid;
    gap: 0.5rem;
    width: min(24rem, 100%);
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--texto) 6%, transparent);
    border: 1px solid var(--vidrio-borde);
}

.juego-resumen-medidor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.juego-resumen-puntos {
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    font-weight: 800;
}

/* ---------- Jerarquía tipográfica VYDA (títulos grandes, enunciados pequeños) e iconos/botones animados ---------- */
.repaso-hoy h2,
.cruces-dia h2,
.perfil-cerebral h2,
.entrena-hoy h2,
.como-vas h2,
.aprender-subtitulo,
.medidores-acad-cabecera h2 {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.32rem, 2.6vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.tarjeta-juego h3 {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.18rem, 2.1vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.18;
}

.tarjeta-juego-texto,
.entrena-hoy .ahora-detalle,
.medidores-acad-cabecera .ahora-detalle,
.retos-acad-encabezado .ahora-detalle {
    font-family: var(--fuente-texto);
    font-size: 0.85rem;
    line-height: 1.46;
    opacity: 0.78;
}

.juego-cabecera h2 {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.22rem, 2.4vw, 1.48rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.juego-lectura-titulo {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.juego-lectura-texto {
    font-size: 0.9rem;
    line-height: 1.6;
}

.perfil-nombre-con-icono {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.perfil-nombre-con-icono .icono-academico {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 9px;
}

.perfil-nombre-con-icono .icono-academico svg {
    width: 1.1rem;
    height: 1.1rem;
}

.tarjeta-juego .juego-icono {
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.tarjeta-juego:hover .juego-icono {
    transform: translateY(-2px) scale(1.06);
}

.tarjeta-juego .btn-primario,
.entrena-hoy .btn-primario {
    transition: transform 0.2s ease, box-shadow 0.22s ease;
}

.tarjeta-juego .btn-primario:hover,
.entrena-hoy .btn-primario:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--activo-fondo) 30%, transparent);
}



/* ========================================================
   GIMNASIO MENTAL 2.0 & PERFIL CEREBRAL ANATÓMICO (Obsidian & Neon Glass)
   ======================================================== */


/* ========================================================
   CEREBRO ANATÓMICO 2.5D (Obsidian, Glass & Volumetric Neon)
   ======================================================== */

.perfil-anatomico-contenedor {
    margin: 1.5rem 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
}



.cerebro-svg-marco {
    width: 100%;
    max-width: 36rem;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.5rem 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cerebro-svg-marco::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22rem;
    height: 16rem;
    background: radial-gradient(ellipse, rgba(56, 189, 248, 0.12) 0%, rgba(192, 132, 252, 0.08) 45%, transparent 70%);
    pointer-events: none;
    filter: blur(28px);
}

.cerebro-anatomico-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.65));
    overflow: visible;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Zonas anatómicas y 2.5D */
.zona-cortical-3d {
    cursor: pointer;
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease, opacity 0.2s ease;
}

.zona-cortical-3d:hover,
.zona-cortical-3d.activo-hover {
    transform: translateY(-5px) scale(1.025);
}

.zona-frontal:hover,
.zona-frontal.activo-hover {
    filter: drop-shadow(0 0 20px #38bdf8) brightness(1.15);
}

.zona-parietal:hover,
.zona-parietal.activo-hover {
    filter: drop-shadow(0 0 20px #34d399) brightness(1.15);
}

.zona-temporal:hover,
.zona-temporal.activo-hover {
    filter: drop-shadow(0 0 20px #c084fc) brightness(1.15);
}

.zona-occipital:hover,
.zona-occipital.activo-hover {
    filter: drop-shadow(0 0 20px #fbbf24) brightness(1.15);
}

/* Nodos interactivos HUD en el SVG */
.nodo-indicador {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.nodo-indicador:hover {
    transform: scale(1.25);
}

.nodo-aura {
    animation: pulsoAura 2.4s infinite ease-in-out alternate;
    transform-origin: center;
}

@keyframes pulsoAura {
    0% { transform: scale(0.85); opacity: 0.15; }
    100% { transform: scale(1.35); opacity: 0.45; }
}

/* Rejilla de las 4 Tarjetas de Maestría Cerebral */
.rejilla-insignias-cerebrales {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 980px;
    box-sizing: border-box;
    margin-top: 0.5rem;
}

@media (max-width: 820px) {
    .rejilla-insignias-cerebrales {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 460px) {
    .rejilla-insignias-cerebrales {
        grid-template-columns: 1fr;
    }
}

.tarjeta-insignia-lobulo {
    background: rgba(13, 19, 33, 0.72);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.25s ease, 
                box-shadow 0.25s ease;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
}

.tarjeta-insignia-lobulo:hover,
.tarjeta-insignia-lobulo.resaltada {
    transform: translateY(-4px);
    border-color: var(--color-lobulo, #38bdf8);
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.65), 
                0 0 20px color-mix(in srgb, var(--color-lobulo, #38bdf8) 35%, transparent), 
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.insignia-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.insignia-medalla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.72rem;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 0.02em;
}

.insignia-puntos {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-lobulo, #38bdf8);
    text-shadow: 0 0 12px color-mix(in srgb, var(--color-lobulo, #38bdf8) 50%, transparent);
}

.insignia-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 4px;
    margin-bottom: 2px;
}

.insignia-desc {
    font-size: 0.74rem;
    color: #94a3b8;
    line-height: 1.35;
    margin-bottom: 12px;
}

.insignia-barra {
    height: 4px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.insignia-barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    box-shadow: 0 0 8px var(--color-lobulo, #38bdf8);
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Selector de Gráfica del Gimnasio (Agilidad / Clínico / Académico) ---------- */
.selector-graficas-cerebrales {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: rgba(13, 19, 33, 0.72);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    max-width: fit-content;
    margin: 1.8rem auto 1.2rem;
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-selector-grafica {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    font-family: var(--fuente-texto, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-selector-grafica:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-selector-grafica.activo {
    color: #ffffff;
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.panel-grafica-agilidad,
.panel-grafica-clinico,
.panel-grafica-academico {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    animation: entraPanelGrafica 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-grafica-agilidad[hidden],
.panel-grafica-clinico[hidden],
.panel-grafica-academico[hidden] {
    display: none !important;
}

@keyframes entraPanelGrafica {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 680px) {
    .selector-graficas-cerebrales {
        border-radius: 20px;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        padding: 6px;
    }
    .btn-selector-grafica {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.78rem;
    }
}

/* Modales flotantes de juegos clínicos */
.modal-juego-flotante {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(8, 10, 16, 0.82);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow-y: auto;
}

.caja-juego-obsidiana {
    background: rgba(18, 22, 34, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    width: 100%;
    max-width: 32rem;
    padding: 1.6rem;
    color: var(--texto, #f1f5f9);
    position: relative;
    box-sizing: border-box;
}

.caja-juego-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.caja-juego-cabecera h2 {
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.btn-cerrar-modal {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--texto);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.btn-cerrar-modal:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Rush Math */
.rush-estado-fila {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding: 0.6rem 0.9rem;
    background: rgba(10, 12, 18, 0.55);
    border-radius: 12px;
}

.rush-marcador strong {
    color: #38bdf8;
    font-size: 1.1rem;
}

.rush-area-pregunta {
    min-height: 5rem;
    display: grid;
    place-items: center;
    background: rgba(10, 12, 18, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 16px;
    margin-bottom: 1.2rem;
}

.rush-operacion-texto {
    font-size: 1.85rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: #38bdf8;
    text-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.rush-opciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.btn-rush-opcion {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--texto);
    cursor: pointer;
    transition: transform 0.12s, background-color 0.12s;
}

.btn-rush-opcion:active {
    transform: scale(0.96);
}

.btn-rush-opcion.correcto {
    background: rgba(16, 185, 129, 0.35);
    border-color: #10b981;
}

.btn-rush-opcion.incorrecto {
    background: rgba(239, 68, 68, 0.35);
    border-color: #ef4444;
}

.rush-pantalla-resumen {
    text-align: center;
    padding: 1.5rem 0;
}

.resumen-icono {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Memory Matrix */
.matrix-instruccion {
    margin: 0 0 0.8rem;
    font-size: 0.88rem;
    opacity: 0.78;
}

.matrix-info {
    margin-bottom: 0.9rem;
    text-align: center;
}

.matrix-nivel-val {
    color: #10b981;
    font-size: 1.15rem;
}

.matrix-rejilla {
    display: grid;
    gap: 0.5rem;
    max-width: 20rem;
    margin: 0 auto;
    aspect-ratio: 1;
}

.matrix-celda {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.18s, transform 0.15s;
}

.matrix-celda:active {
    transform: scale(0.94);
}

.matrix-celda.iluminada {
    background: #10b981;
    box-shadow: 0 0 16px #10b981;
    border-color: transparent;
}

.matrix-celda.acierto {
    background: rgba(16, 185, 129, 0.5);
    border-color: #10b981;
}

.matrix-celda.fallo {
    background: rgba(239, 68, 68, 0.5);
    border-color: #ef4444;
}

.matrix-celda.revelada {
    background: rgba(16, 185, 129, 0.25);
    border: 2px dashed #10b981;
}

/* The Brainstormer */
.brainstormer-desc {
    font-size: 0.86rem;
    opacity: 0.78;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.brainstormer-ruletas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.ruleta-columna {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ruleta-tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #a855f7;
    letter-spacing: 0.04em;
}

.ruleta-tarjeta {
    background: rgba(10, 12, 18, 0.6);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 2.2rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s;
}

.ruleta-tarjeta.girando {
    animation: giroRuleta 0.5s infinite linear;
    opacity: 0.6;
}

@keyframes giroRuleta {
    0% { transform: translateY(-4px); }
    50% { transform: translateY(4px); }
    100% { transform: translateY(-4px); }
}

.brainstormer-acciones {
    display: flex;
    justify-content: center;
}

.brainstormer-lienzo {
    margin-top: 1.1rem;
    background: rgba(10, 12, 18, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0.75rem;
}

.lienzo-cabecera {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
}

.sprint-timer {
    color: #f43f5e;
    font-weight: 700;
}

.lienzo-texto {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    color: var(--texto);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.45;
    resize: vertical;
}

.lienzo-texto:focus {
    outline: none;
}

/* Story Cubes */
.cubos-rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    max-width: 18rem;
    margin: 0 auto;
}

.cubo-dado {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: rodarDado 0.4s ease-out;
}

@keyframes rodarDado {
    0% { transform: scale(0.6) rotate(-20deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.cubo-numero {
    position: absolute;
    top: 0.3rem;
    left: 0.45rem;
    font-size: 0.65rem;
    opacity: 0.55;
    font-weight: 700;
}

.cubo-emoji {
    font-size: 1.8rem;
}

/* Sección Gimnasio Clínico 2.0 en Aprender */
.seccion-gimnasio-clinico-2 {
    margin: 1.75rem 0;
}

.rejilla-juegos-nuevos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.tarjeta-juego-nuevo {
    background: rgba(20, 24, 38, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 1.2rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.18s, border-color 0.18s;
}

.tarjeta-juego-nuevo:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.22);
}

.tarjeta-juego-nuevo h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.tarjeta-juego-nuevo p {
    margin: 0 0 auto;
    font-size: 0.82rem;
    opacity: 0.72;
    line-height: 1.4;
}

.tarjeta-juego-nuevo .btn {
    margin-top: 0.8rem;
    width: 100%;
}


/* ---------- Barra de botones y tendencias en Tu Día y Tu Mente ---------- */
.cruces-barra-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0.8rem 0 0.4rem;
}

.btn-ver-tendencias {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    font-weight: 600;
}

/* Cuadrícula de métricas recolectadas por el sistema */
.tendencias-metricas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.tendencia-metrica-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--texto) 5%, transparent);
    border: 1px solid var(--vidrio-borde);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tendencia-metrica-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--activo-fondo) 40%, var(--vidrio-borde));
}

.tendencia-metrica-card .metrica-icono {
    font-size: 1.35rem;
}

.tendencia-metrica-card .metrica-dato {
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--texto);
}

.tendencia-metrica-card .metrica-etiqueta {
    font-family: var(--fuente-texto);
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--texto) 65%, transparent);
}

/* Bloque de tendencias y hallazgos */
.tendencias-bloque-hallazgos {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--activo-fondo) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--activo-fondo) 20%, var(--vidrio-borde));
}

.tendencias-subtitulo {
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--activo-fondo);
}

.cruces-item-tendencia {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--texto) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--texto) 8%, transparent);
    font-size: 0.88rem;
    line-height: 1.45;
}

.cruces-icono-tema {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.cruces-texto-tema {
    flex: 1;
}

.cruces-estado-recoleccion {
    display: grid;
    gap: 0.4rem;
}

.tendencias-consejos-datos {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.45rem;
    border-top: 1px dashed color-mix(in srgb, var(--texto) 15%, transparent);
}

.cruces-descargo {
    font-size: 0.76rem !important;
    opacity: 0.7;
    margin: 0;
}

/* Avisos informativos y de éxito */
.cruces-aviso-borrado {
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    margin: 0.6rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.cruces-aviso-borrado.exito {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.cruces-aviso-borrado.error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.enlace-privacidad {
    color: var(--activo-fondo);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}