/* NUBE DE TEMAS - Estrategia Flexbox con color en el texto */
.simuland-topic-tagcloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center;    
    gap: 8px 10px;          
    padding: 15px;
}

.simuland-topic-tagcloud a {
    padding: 3px 5px; 
    border-radius: 4px; 
    text-decoration: none;
    /* Quitamos el color de texto y fondo por defecto de aquí */
    line-height: 1.5; 
    transition: transform 0.15s ease-out;
    /* Si el fondo de la página es blanco, y no se aplica ningún color de .simuland-score-X, el texto podría ser blanco sobre blanco si hubiera un color: #fff; heredado o aplicado por error */
}
.simuland-topic-tagcloud a:hover {
    text-decoration: underline; 
    transform: translateY(-1px); 
}

/* Clases de Color - Ahora aplicarán 'color' al texto */
.simuland-score-0 { color: #D32F2F !important; } /* Rojo Intenso */
.simuland-score-1 { color: #E53935 !important; } /* Rojo Normal+ */
.simuland-score-2 { color: #F44336 !important; } /* Rojo Normal */
.simuland-score-3 { color: #EF5350 !important; } /* Rojo Suave / Naranja-Rojo */
.simuland-score-4 { color: #FF9800 !important; } /* Naranja / Amarillo Intenso */
.simuland-score-5 { color: #FFC107 !important; } /* Amarillo Normal */
.simuland-score-6 { color: #D4AC0D !important; } /* Amarillo Suave - Oscurecido */
.simuland-score-7 { color: #66BB6A !important; } /* Verde-Azul Suave / Verde Lima */
.simuland-score-8 { color: #4CAF50 !important; } /* Verde Suave */
.simuland-score-9 { color: #388E3C !important; } /* Verde Normal */
.simuland-score-10 { color: #2E7D32 !important; } /* Verde Intenso */

.simuland-score-color-default { color: #757575 !important; } /* Gris por defecto */



/* === SIMULAND ESTILOS GLOBALES PIXEL ART === */

/* Fuentes Base */
body.simuland-landing-page,
body.simuland-page-crear-modo-inmersivo,
body.simuland-page-dashboard-modo-inmersivo,
body.simuland-examen-modo-inmersivo {
    font-family: 'Press Start 2P', cursive;
    background-color: #1A0A2F; /* Fondo oscuro principal */
    color: #FFD800; /* Color de texto principal (amarillo) */
    margin: 0;
    padding: 0;
    image-rendering: pixelated; /* Para que todo se vea más pixelado */
}

/* Contenedores Wrapper de Páginas Inmersivas */
#simuland-landing-wrapper,
#simuland-page-crear-wrapper,
#simuland-page-dashboard-wrapper,
#simuland-examen-wrapper {
    max-width: 960px; 
    margin: 0 auto; 
    padding: 20px; 
    width: 100%; 
    box-sizing: border-box;
    /* Para centrar verticalmente en páginas como la landing si es necesario */
    /* display: flex; flex-direction: column; justify-content: center; min-height: 95vh; */ /* El 95vh para dejar espacio al footer */
}


/* Títulos Generales (H1, H2, H3) dentro de las áreas del plugin */
.simuland-dashboard h1, .simuland-dashboard h2, .simuland-dashboard h3,
#simuland-crear-examen-container h2, /* Si decides volver a mostrarlo */
.simuland-tomar-examen-container h2, .simuland-tomar-examen-container h3,
#simuland-resultados-area h2, #simuland-resultados-area h3 {
    color: #FFEE70; /* Amarillo más pálido para títulos o blanco */
    text-shadow: 2px 2px 0px #000; /* Sombra pixelada para texto */
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 2px dashed #4A0F70; /* Borde inferior morado oscuro */
}

/* Párrafos y Labels */
.simuland-dashboard p, 
#simuland-crear-examen-form p, 
#simuland-crear-examen-form label,
.simuland-tomar-examen-container p, /* Si hay párrafos genéricos */
#simuland-resultados-area p {
    color: #FFD800; /* Amarillo */
    line-height: 1.6;
}
#simuland-crear-examen-form label {
    font-size: 0.9em; /* Un poco más pequeño para que el input destaque */
    text-shadow: 1px 1px 0px #000;
}


/* --- Estilos para la Landing Page de Simuland --- */

body.simuland-landing-page {
    /* ... (tus estilos existentes: font-family, background-color, color, margin, padding, image-rendering) ... */
    display: flex;
    flex-direction: column;
    align-items: center;     /* Centra los hijos del body horizontalmente */
    justify-content: center; /* Centra el contenido principal verticalmente */
    min-height: 100vh;
    text-align: center;      /* Para centrar texto dentro de los bloques si es necesario */
}

#simuland-landing-wrapper {
    /* Este wrapper ahora es un hijo directo del body flex.
       No necesita max-width ni margin: auto si el body ya centra. */
    width: 100%; /* Ocupar el espacio que le dé el body */
    display: flex; /* Usar flex para centrar su contenido interno */
    flex-direction: column;
    align-items: center; /* Centrar la imagen y el div de acción */
}

#simuland-landing-main {
    /* Puede que no necesite estilos específicos si el wrapper ya hace el trabajo */
}

.simuland-landing-content {
    padding: 20px;
    display: flex; /* Para organizar imagen y botón en columna y centrarlos */
    flex-direction: column;
    align-items: center;
}

.simuland-landing-image-container {
    margin-bottom: 40px; /* Aumentar espacio entre imagen y botón */
}

.simuland-monster-image {
    max-width: 90%; /* Permitir que sea un poco más grande si la pantalla es estrecha */
    width: 400px; /* Un ancho fijo máximo para la imagen, ajusta según tu imagen */
    max-height: 400px; 
    display: block; /* display: block y margin: 0 auto ya no son necesarios si el padre es flex y usa align-items: center */
    /* margin: 0 auto; */ 
}


/* Estilos para el body si usamos la plantilla inmersiva (ya los tenías) */
body.simuland-page-crear-modo-inmersivo,
body.simuland-page-dashboard-modo-inmersivo {
    background-color: #1A0A2F; 
    margin: 0;
    padding: 0; 
    font-family: 'Press Start 2P', cursive;
    color: #FFD800;
    image-rendering: pixelated;
    /* text-align: center; <-- QUITAR ESTO DEL BODY si causa problemas con elementos posicionados */
}

/* Contenedores Wrapper de Páginas Inmersivas */
#simuland-page-crear-wrapper,
#simuland-page-dashboard-wrapper {
    max-width: 960px; 
    margin-left: auto;  
    margin-right: auto; 
    padding-left: 20px; 
    padding-right: 20px;
    padding-top: 50px;   /* Aumentar padding superior para dejar espacio al icono */
    padding-bottom: 50px;
    width: 100%; 
    box-sizing: border-box;
    position: relative; /* ¡MUY IMPORTANTE! Para que los iconos se posicionen respecto a este wrapper */
    text-align: left;   /* Resetear text-align para el contenido dentro del wrapper */
}


/* Icono de Configuración de Perfil en Dashboard */
.simuland-dashboard-config-icon {
    position: absolute;
    top: 15px;       /* Distancia desde el borde superior DEL WRAPPER */
    right: 20px;      /* Distancia desde el borde derecho DEL WRAPPER */
    z-index: 10;      /* Para asegurar que esté por encima de otro contenido si es necesario */
}
.simuland-dashboard-config-icon a {
    text-decoration: none;
    color: #FFEE70; /* Amarillo pálido o blanco para el icono */
    font-size: 22px; 
    padding: 5px;
    display: inline-block;
}


/* Icono 'X' para cerrar/volver en Formulario de Creación */
.simuland-form-close-icon {
    position: absolute;
    top: 15px;       /* Distancia desde el borde superior DEL WRAPPER */
    right: 20px;      /* Distancia desde el borde derecho DEL WRAPPER */
    font-size: 28px; 
    line-height: 1;
    font-weight: normal; /* La 'X' (×) ya es gruesa, 'bold' puede hacerla demasiado */
    color: #FFEE70; /* Amarillo pálido o blanco */
    text-decoration: none;
    transition: color 0.2s ease;
    z-index: 10;
}
/* ... (estilos de hover para .simuland-form-close-icon como estaban) ... */


/* Centrar el contenido específico DENTRO de los wrappers si es necesario */
/* El formulario de creación ya tiene su propio max-width y margin: auto */
body.simuland-page-crear-modo-inmersivo #simuland-crear-examen-container {
    /* ... */
    text-align: left; /* Asegurar que los labels y inputs dentro del form se alineen a la izquierda */
}

/* El dashboard también puede necesitar text-align: left para sus secciones */
body.simuland-page-dashboard-modo-inmersivo .simuland-dashboard {
    text-align: left; /* Para que los H2, p, etc., se alineen a la izquierda */
}
/* La nube de tags ya tiene su propio text-align: center o justify-content: center (flex) */
.simuland-topic-tagcloud {
    /* ... (tus estilos flex con justify-content: center) ... */
}



/* --- BOTÓN PIXEL ART GENERAL --- */
.simuland-pixel-button {
    display: inline-block;
    background-color: #6A1B9A; /* Morado */
    color: #FFFFFF;            /* Texto blanco */
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    padding: 10px 20px;
    text-decoration: none;
    text-align: center;
    border: 3px solid #000000;
    box-shadow: 
        3px 3px 0 0 #000000,
        inset -2px -2px 0 0 rgba(255,255,255,0.2), /* Brillo más sutil */
        inset 2px 2px 0 0 rgba(0,0,0,0.3);
    position: relative;
    cursor: pointer;
    image-rendering: pixelated;
    transition: none; /* Quitar transiciones para un look más retro instantáneo */
    user-select: none;
}
.simuland-pixel-button:hover,
.simuland-pixel-button:focus {
    background-color: #8E24AA;
    color: #FFFFFF;
    outline: none;
    box-shadow: 
        2px 2px 0 0 #000000, 
        inset -2px -2px 0 0 rgba(255,255,255,0.2),
        inset 2px 2px 0 0 rgba(0,0,0,0.3);
    transform: translate(1px, 1px);
}
.simuland-pixel-button:active {
    background-color: #4A148C;
    box-shadow: 
        inset -1px -1px 0 0 rgba(255,255,255,0.15),
        inset 1px 1px 0 0 rgba(0,0,0,0.35);
    transform: translate(3px, 3px);
}

/* Tamaños de botón */
.simuland-pixel-button-large {
    font-size: 18px; /* Ajustar tamaños según la nueva fuente */
    padding: 12px 25px;
}
.simuland-pixel-button-small {
    font-size: 14px;
    padding: 8px 15px;
    border-width: 2px;
     box-shadow: 
        2px 2px 0 0 #000000,
        inset -1px -1px 0 0 rgba(255,255,255,0.2),
        inset 1px 1px 0 0 rgba(0,0,0,0.3);
}
.simuland-pixel-button-small:hover,
.simuland-pixel-button-small:focus {
    box-shadow: 1px 1px 0 0 #000000, inset -1px -1px 0 0 rgba(255,255,255,0.2), inset 1px 1px 0 0 rgba(0,0,0,0.3);
    transform: translate(0.5px, 0.5px);
}
.simuland-pixel-button-small:active {
    box-shadow: inset -1px -1px 0 0 rgba(255,255,255,0.15), inset 1px 1px 0 0 rgba(0,0,0,0.35);
    transform: translate(2px, 2px);
}


/* --- FORMULARIO DE CREACIÓN --- */
#simuland-crear-examen-container {
    background-color: rgba(44, 29, 62, 0.5); /* Fondo morado oscuro semi-transparente para el form */
    border: 2px solid #4A0F70; /* Borde morado oscuro */
    padding: 25px;
    box-shadow: 4px 4px 0 0 #000; /* Sombra pixel art para el contenedor */
    /* max-width, margin auto ya deberían estar */
}

#simuland-crear-examen-form input[type="text"],
#simuland-crear-examen-form input[type="number"],
#simuland-crear-examen-form textarea {
    padding: 8px 12px;
    border: 2px solid #000; /* Borde negro para inputs */
    border-radius: 0;      /* Sin border-radius para look pixel */
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;       /* O el tamaño que prefieras para los inputs */
    color: #FFD800;       /* Texto amarillo */
    background-color: #2c1d3e; /* Fondo morado oscuro para input */
    box-shadow: inset 2px 2px 0 0 rgba(0,0,0,0.3), inset -2px -2px 0 0 rgba(255,255,255,0.15); /* Efecto relieve */
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px; /* Espacio debajo del input antes del siguiente label */
}
#simuland-crear-examen-form input[type="text"]:focus,
#simuland-crear-examen-form input[type="number"]:focus,
#simuland-crear-examen-form textarea:focus {
    border-color: #FFEE70; /* Borde amarillo al enfocar */
    outline: none;
    box-shadow: inset 2px 2px 0 0 rgba(0,0,0,0.3), inset -2px -2px 0 0 rgba(255,255,255,0.15), 0 0 0 2px #FFEE70; /* Efecto de "glow" pixelado */
}

/* Sugerencias de Temas */
.simuland-sugerencias-temas {
    background-color: transparent;
    border: none;
    padding: 5px 0 15px 0; /* Ajustar padding */
    font-size: 0.8em; /* Más pequeño */
}
.simuland-sugerencias-temas strong {
    color: #FFEE70; /* Amarillo pálido */
    text-shadow: 1px 1px 0 #000;
}
.simuland-sugerencias-temas a {
    color: #FFD800; /* Amarillo */
}
.simuland-sugerencias-temas a:hover {
    color: #FFFFFF; /* Blanco al pasar el ratón */
}


/* --- PANTALLA DE TOMAR EXAMEN --- */
.simuland-tomar-examen-container {
    background-color: rgba(44, 29, 62, 0.5);
    border: 2px solid #4A0F70;
    padding: 20px;
    box-shadow: 4px 4px 0 0 #000;
}
#simuland-progress-bar-container {
    background-color: #4A0F70; /* Morado oscuro para el fondo de la barra */
    border: 2px solid #000;
    height: 12px; /* Un poco más gruesa */
    box-shadow: 2px 2px 0 0 #000;
}
#simuland-progress-bar {
    background-color: #FFEE70; /* Amarillo para el progreso */
    border-radius: 0;
}

/* Pregunta */
#simuland-pregunta-area h3 { 
    background-color: #4A0F70; /* Morado oscuro */
    color: #FFD800; /* Texto amarillo */
    padding: 15px 20px;
    border-radius: 0; 
    font-size: 1.1em; /* Ajustar según la fuente */
    border: 2px solid #000;
    box-shadow: 3px 3px 0 0 #000;
    min-height: auto;
}

/* Opciones */
.simuland-tomar-examen-container ul.simuland-options {
    grid-template-columns: 1fr; /* Siempre una columna para look más retro y mobile-first */
    gap: 10px;
}
.simuland-tomar-examen-container ul.simuland-options li {
    background-color: #6A1B9A; 
    color: #FFFFFF; 
    padding: 12px 15px;
    border-radius: 0; 
    border: 2px solid #000;
    box-shadow: 2px 2px 0 0 #000;
    transition: none;
    font-size: 0.9em;
}
.simuland-tomar-examen-container ul.simuland-options li:hover {
    background-color: #8E24AA;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 0 #000;
}
.simuland-tomar-examen-container ul.simuland-options li.selected-by-user {
    background-color: #4A148C;
    color: #FFEE70; /* Amarillo para texto seleccionado */
    border-color: #000;
}

/* --- RESULTADOS --- */

/* --- RESULTADOS --- */
#simuland-resultados-area {
    text-align: center; /* Centra el contenido de bloque y inline-block dentro de esta área */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Título "Tu puntuación:" */
#simuland-resultados-area h2 { 
    text-align: center; 
    margin-bottom: 10px;
    font-size: 1.6em; /* Reducir un poco si es muy grande para móviles */
    color: #FFEE70; 
    text-shadow: 2px 2px 0 #000;
    padding-bottom: 5px;
    border-bottom: 2px dashed #4A0F70;
    word-wrap: break-word; /* Para palabras largas */
    overflow-wrap: break-word; /* Estándar más nuevo para palabras largas */
}

/* La puntuación en sí (ej. "2 de 5") */
#simuland-resultados-area .simuland-puntuacion {
    font-size: 2.8em; /* Aún más grande para destacar */
    color: #FFD800;
    text-shadow: 3px 3px 0 #000; /* Sombra más pronunciada */
    margin-top: 0;
    margin-bottom: 30px; /* Espacio antes de los botones */
    line-height: 1.2;
    display: block; /* Asegurar que sea un bloque para centrarlo con text-align del padre */
}

/* Contenedor de los botones de acción en los resultados */
#simuland-resultados-area .simuland-acciones-resultados {
    text-align: center; /* Asegurar que los botones se centren */
    margin-top: 25px;   
    margin-bottom: 35px;
    padding-bottom: 20px; /* Espacio extra debajo de los botones */
    /* border-bottom: 2px dashed #4A0F70; */ /* Opcional: separador antes de las soluciones detalladas */
}

/* Aplicar a TODOS los botones/enlaces dentro de .simuland-acciones-resultados en los resultados */
#simuland-resultados-area .simuland-acciones-resultados .simuland-pixel-button,
#simuland-resultados-area .simuland-acciones-resultados .simuland-salir-link {
    margin-left: 8px;  /* Espacio a la izquierda de cada botón/enlace */
    margin-right: 8px; /* Espacio a la derecha */
    margin-bottom: 10px; /* Espacio abajo si se apilan en móviles */
    vertical-align: middle; /* Para que se alineen bien si tienen alturas ligeramente diferentes */
}

/* Título "Soluciones Detalladas" */
#simuland-resultados-area h3 {
    /* Ya debería estar estilizado por las reglas generales de H3, 
       pero si necesitas centrarlo y ya no lo está: */
    text-align: center; 
    margin-top: 30px; /* Espacio antes de las soluciones */
    margin-bottom: 20px;
}

/* Dentro de los estilos para #simuland-resultados-area */
#simuland-resultados-area h3 + ol, /* El <ol> que sigue a "Soluciones Detalladas" */
#simuland-resultados-area ol { /* Selector más general por si acaso */
    list-style-type: none; /* Quita los números (1., 2., 3.) */
    padding-left: 0;       /* Quita el padding por defecto que añade el navegador para los números */
    margin-left: 0;        /* Quita el margen por defecto */
}

/* Si quieres mantener un pequeño indentado para los items, puedes añadirlo al <li> */
#simuland-resultados-area .simuland-feedback-pregunta {
    /* ... tus estilos existentes (background, border, padding, margin-bottom) ... */
    /* padding-left: 10px;  /* Opcional: si quieres un pequeño indentado general para el contenido del item */
}

/* El resto de tus estilos para .simuland-feedback-pregunta, .simuland-explicacion, etc.,
   deberían estar bien, pero asegúrate de que su text-align sea 'left' si no quieres que
   el texto de las soluciones también esté centrado. */

#simuland-resultados-area .simuland-feedback-pregunta {
    /* ... tus estilos existentes ... */
    text-align: left; /* Asegurar que el contenido de cada feedback esté alineado a la izquierda */
}
#simuland-resultados-area .simuland-feedback-pregunta strong {
    /* ... tus estilos existentes ... */
    display: block; /* Para que ocupe su propia línea si es necesario */
    margin-bottom: 5px;
}
#simuland-resultados-area .simuland-explicacion {
    /* ... tus estilos existentes ... */
    text-align: left; /* Asegurar que la explicación esté alineada a la izquierda */
}


#simuland-resultados-area .simuland-puntuacion {
    font-size: 2em; /* Ajustar para fuente pixel */
    color: #FFD800;
    text-shadow: 2px 2px 0 #000;
}
#simuland-resultados-area .simuland-feedback-pregunta {
    border-radius: 0;
    border: 2px solid #4A0F70;
    background-color: rgba(44,29,62,0.3);
    padding: 10px;
    margin-bottom: 15px;
}
#simuland-resultados-area .simuland-feedback-pregunta.correcta {
    border-left: 4px solid #FFEE70; /* Borde izquierdo amarillo para correcta */
}
#simuland-resultados-area .simuland-feedback-pregunta.incorrecta {
    border-left: 4px solid #FF5722; /* Borde izquierdo naranja/rojo para incorrecta */
}
#simuland-resultados-area .simuland-feedback-pregunta strong {
    color: #FFEE70; /* Títulos de pregunta en amarillo pálido */
}
#simuland-resultados-area .simuland-explicacion {
    margin-top: 8px;
    padding: 8px;
    background-color: rgba(0,0,0,0.2);
    border: 1px dashed #4A0F70;
    font-size: 0.85em;
    color: #FFFACD; /* Amarillo muy pálido para explicaciones */
}
/* Enlace "Salir" en resultados */
#simuland-resultados-area .simuland-acciones-resultados .simuland-salir-link {
    color: #FFEE70;
    font-size: 0.9em;
    padding: 10px 10px;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: underline;
}
#simuland-resultados-area .simuland-acciones-resultados .simuland-salir-link:hover {
    color: #FFFFFF;
}


/* Footer de la Landing (si lo tienes) */
#simuland-landing-footer {
    background-color: #000000; 
    color: #6A1B9A; /* Morado para texto de footer */
    padding: 15px 0;
    font-size: 10px; /* Más pequeño */
    border-top: 2px solid #4A0F70;
}

/* En simuland-public-styles.css */

.simuland-dashboard-section.simuland-bienvenida-monstruo {
    display: flex; /* Para poner texto y monstruo lado a lado en desktop */
    flex-wrap: wrap; /* Permitir que el monstruo pase abajo en móvil */
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px dashed #4A0F70;
}

.simuland-bienvenida-texto {
    flex: 1; /* Ocupar el espacio disponible */
    min-width: 280px; /* Ancho mínimo antes de envolver */
    padding-right: 20px; /* Espacio si el monstruo está al lado */
}

.simuland-monstruo-display {
    flex-basis: 200px; /* Ancho base para el área del monstruo */
    text-align: center;
    padding: 10px;
    /* border: 2px dashed #4A0F70; */ /* Opcional */
    /* background-color: rgba(0,0,0,0.1); */ /* Opcional */
}

.simuland-monstruo-imagen,
.simuland-monstruo-silueta {
    max-width: 150px; /* Tamaño de la imagen del monstruo/silueta */
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
}
.simuland-monstruo-silueta.simuland-monstruo-clickable {
    cursor: pointer;
}

.simuland-monstruo-display .simuland-pixel-button {
    font-size: 14px; /* Botón de liberar un poco más pequeño */
    padding: 8px 15px;
}
.simuland-monstruo-nivel {
    font-size: 0.9em;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #FFEE70;
    text-shadow: 1px 1px 0 #000;
}
.simuland-progreso-siguiente-nivel {
    font-size: 0.8em;
    color: #FFFACD; /* Amarillo más pálido */
    margin-top: 5px;
}


/* Estilos para el Modal */
.simuland-modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); /* Fondo oscuro semitransparente */
}

.simuland-modal-content {
    background-color: #2c1d3e; /* Morado oscuro para el modal */
    color: #FFD800; /* Texto amarillo */
    font-family: 'Press Start 2P', cursive;
    margin: 15% auto; 
    padding: 30px;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 0 #000;
    width: 80%; 
    max-width: 500px;
    position: relative;
    text-align: center;
}
.simuland-modal-content h3 {
    color: #FFEE70;
    text-shadow: 2px 2px 0 #000;
    margin-top:0;
}
.simuland-modal-content p {
    line-height: 1.5;
    font-size: 0.9em;
}

.simuland-modal-close {
    color: #FFEE70;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 5px;
    right: 15px;
}

.simuland-modal-close:hover,
.simuland-modal-close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* ... estilos existentes ... */
.simuland-modal-content-large-image img {
    max-width: 100%;
    max-height: 80vh; /* Limitar altura para que quepa en la ventana */
    display: block;
    margin: 0 auto;
    border-radius: 8px; /* Opcional */
}
.simuland-monstruo-display .simuland-monstruo-imagen {
    cursor: pointer; /* Indicar que es clickeable */
}


/* --- Estilos para la Página de Perfil de Simuland --- */
body.simuland-page-perfil-modo-inmersivo { /* Si usas plantilla inmersiva para perfil */
    background-color: #f0f2f5;
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
#simuland-page-perfil-wrapper { /* Si usas plantilla inmersiva para perfil */
    max-width: 960px; margin: 30px auto; padding: 20px; width: 100%; box-sizing: border-box;
}

.simuland-perfil-container {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.simuland-perfil-container h1 {
    text-align: center;
    color: #333;
    font-family: 'Press Start 2P', cursive; /* Fuente pixel para el título principal */
    font-size: 1.8em; /* Ajusta */
    margin-bottom: 30px;
}

.simuland-perfil-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.simuland-perfil-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.simuland-perfil-section h2 {
    font-family: 'Press Start 2P', cursive; /* Fuente pixel */
    font-size: 1.3em;
    color: #444;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Formulario de Mis Datos */
#simuland-datos-personales form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
#simuland-datos-personales form input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 350px; /* Limitar ancho del input de nombre */
    box-sizing: border-box;
}
#simuland-datos-personales form input[type="submit"] {
    /* Usará la clase .simuland-pixel-button .simuland-pixel-button-small */
}
#simuland-datos-personales p > a { /* Para el enlace de cambiar contraseña */
    font-size: 0.9em;
}


/* Grid de Monstruos */
.simuland-monstruos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Columnas responsivas */
    gap: 20px;
    text-align: center;
}
.simuland-monstruo-item {
    border: 1px solid #e0e0e0;
    padding: 10px;
    border-radius: 6px;
    background-color: #f9f9f9;
}
.simuland-monstruo-item img {
    max-width: 100px;
    max-height: 100px;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 4px; /* Opcional */
}
.simuland-monstruo-item img.simuland-monstruo-silueta-coleccion {
    opacity: 0.5; /* Hacer las siluetas un poco transparentes */
}
.simuland-monstruo-item .monstruo-nombre {
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 3px;
}
.simuland-monstruo-item .monstruo-nivel-tag {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 5px;
}
.simuland-monstruo-item .monstruo-nivel-tag .desbloqueado { color: green; font-weight:bold; }
.simuland-monstruo-item .monstruo-nivel-tag .bloqueado { color: #999; }
.simuland-monstruo-item .monstruo-requisito {
    font-size: 0.75em;
    color: #777;
    margin-top: 0;
    display: block; /* Para que el <br> tenga efecto y aparezca debajo */
    margin-top: 2px; 
}


/* Botón de Donar y Enlace de Borrar Cuenta */
#simuland-apoyar .simuland-pixel-button { /* Reutilizar estilo pixel */
    /* Puede necesitar ajustes de tamaño específicos si quieres */
}
.simuland-delete-account-link {
    color: #d32f2f; /* Rojo para acción destructiva */
    text-decoration: underline;
    font-size: 0.9em;
}
.simuland-delete-account-link:hover {
    color: #b71c1c;
}
#simuland-cuenta-acciones small {
    display: block;
    margin-top: 8px;
    font-size: 0.8em;
    color: #777;
}

/* Notices */
.simuland-notice {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
}
.simuland-notice.success {
    background-color: #E8F5E9; color: #2E7D32; border-color: #A5D6A7;
}
.simuland-notice.error {
    background-color: #FFEBEE; color: #C62828; border-color: #EF9A9A;
}


/* --- Estilos Comunes para Páginas Inmersivas Simuland --- */
body.simuland-page-crear-modo-inmersivo,
body.simuland-page-dashboard-modo-inmersivo,
body.simuland-page-perfil-modo-inmersivo { /* Añadida clase de perfil */
    background-color: #1A0A2F; /* Fondo oscuro general */
    color: #E0E0E0; /* Color de texto base claro */
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P', cursive; /* Fuente pixel art por defecto */
}

/* Wrappers de contenido para centrar */
#simuland-page-crear-wrapper,
#simuland-page-dashboard-wrapper,
#simuland-page-perfil-wrapper { /* Añadido wrapper de perfil */
    max-width: 960px; 
    margin-left: auto;  
    margin-right: auto; 
    padding: 40px 20px 50px 20px; /* Aumentar padding superior para el botón X */
    width: 100%; 
    box-sizing: border-box;
    position: relative; /* Para el botón 'X' que estará dentro del wrapper */
}


/* Botón 'X' para cerrar/volver (reutilizable) */
.simuland-form-close-icon { /* Ya tenías esta clase, la hacemos más genérica */
    position: absolute;
    top: 20px; /* Ajusta según la nueva posición dentro del wrapper */
    right: 25px;
    font-size: 32px; 
    line-height: 1;
    font-weight: bold;
    color: #A0A0A0; /* Un gris claro */
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 100; /* Para asegurar que esté encima */
}
.simuland-form-close-icon:hover {
    color: #FFFFFF;
    transform: scale(1.1);
}

/* Ajustes específicos para el contenedor del formulario de creación (ya los tienes) */
body.simuland-page-crear-modo-inmersivo #simuland-crear-examen-container {
    max-width: 550px; 
    margin: 0 auto;
    padding: 30px 25px; /* Ajusta padding si es necesario */
    background-color: rgba(255,255,255, 0.05); /* Fondo muy sutil si el body es oscuro */
    border-radius: 8px;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.05); */ /* Sombra más sutil */
    color: #E0E0E0; /* Asegurar que el texto dentro del form sea legible */
}
body.simuland-page-crear-modo-inmersivo #simuland-crear-examen-container label {
    color: #C0C0C0; /* Labels un poco más claros */
}
body.simuland-page-crear-modo-inmersivo #simuland-crear-examen-container input[type="text"],
body.simuland-page-crear-modo-inmersivo #simuland-crear-examen-container input[type="number"] {
    background-color: rgba(0,0,0,0.2);
    border-color: #555;
    color: #FFF;
    border-radius: 15px; /* Un poco menos redondeado que el estilo píldora */
}
body.simuland-page-crear-modo-inmersivo #simuland-crear-examen-container input::placeholder {
    color: #888;
}


/* Ajustes específicos para el contenedor del Dashboard (ya los tienes) */
body.simuland-page-dashboard-modo-inmersivo .simuland-dashboard {
    background-color: rgba(0,0,0,0.1); /* Fondo muy sutil para el contenido del dashboard */
    padding: 20px;
    border-radius: 8px;
}
body.simuland-page-dashboard-modo-inmersivo .simuland-dashboard h1,
body.simuland-page-dashboard-modo-inmersivo .simuland-dashboard h2,
body.simuland-page-dashboard-modo-inmersivo .simuland-dashboard p {
    color: inherit; /* Heredar el color claro del body */
}


/* Estilos para el contenedor del Perfil */
body.simuland-page-perfil-modo-inmersivo .simuland-perfil-container {
    background-color: rgba(0,0,0,0.1); /* Fondo sutil similar al dashboard */
    padding: 30px 25px;
    border-radius: 8px;
    max-width: 700px; /* Ancho del contenido del perfil */
    margin: 0 auto; /* Centrar DENTRO del wrapper */
}
body.simuland-page-perfil-modo-inmersivo .simuland-perfil-container h1,
body.simuland-page-perfil-modo-inmersivo .simuland-perfil-container h2 {
    color: #FFEE58; /* Color de acento para títulos en perfil */
    text-shadow: 1px 1px 0 #000; /* Sombra para texto pixel */
}
body.simuland-page-perfil-modo-inmersivo .simuland-perfil-container label {
    color: #C0C0C0;
}
body.simuland-page-perfil-modo-inmersivo .simuland-perfil-container input[type="text"] {
    background-color: rgba(0,0,0,0.2);
    border-color: #555;
    color: #FFF;
    border-radius: 15px;
}
body.simuland-page-perfil-modo-inmersivo .simuland-perfil-container .simuland-pixel-button {
    /* Los estilos de .simuland-pixel-button ya deberían aplicarse */
}
body.simuland-page-perfil-modo-inmersivo .simuland-delete-account-link {
    color: #FF8A80; /* Un rojo más brillante para el tema oscuro */
}
body.simuland-page-perfil-modo-inmersivo .simuland-delete-account-link:hover {
    color: #FF5252;
}
body.simuland-page-perfil-modo-inmersivo #simuland-cuenta-acciones small {
    color: #aaa;
}
/* --- FIN Estilos Comunes --- */


/* Grid de Monstruos en Perfil */
.simuland-monstruos-grid {
    display: grid;
    /* Cambiar de repeat(auto-fill, minmax(130px, 1fr)) a esto: */
    grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
    gap: 20px;
    text-align: center;
    max-width: 400px; /* Opcional: Limitar el ancho máximo del grid para que no se estire demasiado */
    margin-left: auto; /* Centrar el grid si tiene max-width */
    margin-right: auto;/* Centrar el grid si tiene max-width */
}

/* Para pantallas más pequeñas, podrías querer que vuelva a ser 1 columna */
@media (max-width: 480px) { /* Ajusta este breakpoint según necesites */
    .simuland-monstruos-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
        max-width: 200px; /* Ajustar max-width para una columna */
    }
}
.simuland-monstruo-item {
    background-color: rgba(255,255,255, 0.05); /* Fondo muy sutil para cada item */
    padding: 15px 10px;
    border-radius: 8px;
    border: 1px solid #444; /* Borde sutil */
}
.simuland-monstruo-item img {
    max-width: 100px;
    max-height: 100px;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 4px; 
    image-rendering: pixelated; /* Para que las imágenes se vean pixeladas */
}
.simuland-monstruo-item img.simuland-monstruo-coleccion-imagen { /* Nueva clase para las imágenes desbloqueadas */
    cursor: pointer; /* Indicar que es clickeable */
    transition: transform 0.2s ease;
}
.simuland-monstruo-item img.simuland-monstruo-coleccion-imagen:hover {
    transform: scale(1.1);
}

.simuland-monstruo-item img.simuland-monstruo-silueta-coleccion {
    opacity: 0.4; 
    filter: grayscale(50%); /* Hacerla un poco grisácea */
}
.simuland-monstruo-item .monstruo-nombre {
    font-weight: normal; /* Fuente pixel ya es bold */
    font-size: 0.9em;
    margin-bottom: 3px;
    color: #FFF;
    min-height: 1.8em; /* Espacio para dos líneas de nombre */
    line-height: 0.9em;
}
.simuland-monstruo-item .monstruo-nivel-tag {
    font-size: 0.8em;
    color: #ccc;
    margin-bottom: 5px;
}
.simuland-monstruo-item .monstruo-nivel-tag .desbloqueado { color: #76FF03; /* Verde brillante */ }
.simuland-monstruo-item .monstruo-nivel-tag .bloqueado { color: #9E9E9E; }
.simuland-monstruo-item .monstruo-requisito {
    font-size: 0.7em;
    color: #aaa;
    margin-top: 0;
}

/* En simuland-public-styles.css */
.simuland-sugerencias-temas a {
    text-decoration: none;
    color: #0073aa; /* O el color que uses para enlaces en tema oscuro */
    margin-right: 3px; 
}
.simuland-sugerencias-temas a:not(:last-child):after {
    content: ", "; 
    color: #C0C0C0; /* Color de la coma (claro para fondo oscuro) */
    /* Quitar el margin-right del 'a' si la coma ya da espacio, o ajustar */
    /* margin-right: 0; */ 
}
.simuland-sugerencias-temas a:hover {
    text-decoration: underline;
}

/* --- Estilos para la Página de Aviso de Privacidad Inmersiva --- */

body.simuland-page-contenido-inmersivo.simuland-aviso-privacidad {
    background-color: #1A0A2F; /* Fondo oscuro general */
    color: #E0E0E0; /* Color de texto base claro */
    margin: 0;
    padding: 0;
    /* La fuente pixel art podría ser demasiado para texto largo, considera una fuente legible */
    /* font-family: 'Press Start 2P', cursive; */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Fuente estándar legible */
    line-height: 1.7; /* Mejor interlineado para texto largo */
}

/* Wrapper para la página de contenido */
#simuland-page-contenido-wrapper {
    max-width: 800px; /* Un ancho cómodo para leer texto */
    margin: 0 auto;  
    padding: 60px 30px 40px 30px; /* Más padding superior para el botón de volver */
    width: 100%; 
    box-sizing: border-box;
    position: relative; /* Para el botón 'X' o 'Volver' */
}

/* Botón 'X' o 'Volver' (reutilizar clase .simuland-form-close-icon o crear una nueva) */
.simuland-contenido-volver-icon {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px; 
    line-height: 1;
    font-weight: normal; /* Puede ser normal para una flecha */
    color: #A0A0A0; 
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 100; 
}
.simuland-contenido-volver-icon:hover {
    color: #FFFFFF;
    transform: scale(1.1);
}
.simuland-contenido-volver-icon .dashicons { /* Si usas un Dashicon */
    font-size: inherit;
    line-height: inherit;
}


/* Estilos para el contenido principal del aviso */
#simuland-page-contenido-main {
    background-color: rgba(255,255,255, 0.03); /* Un fondo muy sutil para el bloque de texto si el body es oscuro */
    padding: 25px 30px;
    border-radius: 8px;
    border: 1px solid #332842; /* Borde sutil */
}

#simuland-page-contenido-main h1, 
#simuland-page-contenido-main h2, 
#simuland-page-contenido-main h3 {
    color: #FFEE58; /* Color de acento para títulos */
    font-family: 'Press Start 2P', cursive; /* Fuente pixel para títulos si quieres */
    text-shadow: 1px 1px 0 #000;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}
#simuland-page-contenido-main h1 { font-size: 1.8em; }
#simuland-page-contenido-main h2 { font-size: 1.4em; }
#simuland-page-contenido-main h3 { font-size: 1.2em; }


#simuland-page-contenido-main p {
    margin-bottom: 1em;
    color: #D0D0D0; /* Un poco menos brillante que el blanco puro para el cuerpo del texto */
}
#simuland-page-contenido-main a {
    color: #90CAF9; /* Un azul claro para enlaces */
    text-decoration: underline;
}
#simuland-page-contenido-main a:hover {
    color: #BBDEFB;
    text-decoration: none;
}
#simuland-page-contenido-main ul, 
#simuland-page-contenido-main ol {
    margin-left: 20px;
    margin-bottom: 1em;
    padding-left: 15px;
}
#simuland-page-contenido-main li {
    margin-bottom: 0.5em;
}


/* ... (tus estilos existentes) ... */

/* --- RESULTADOS (Ajustes de Legibilidad) --- */

/* Título "Soluciones Detalladas" */
#simuland-resultados-area h3 {
    color: #FFEE70; /* Mantener amarillo para el título de la sección */
    text-shadow: 2px 2px 0 #000;
    text-align: center; 
    margin-top: 40px; /* Más espacio antes de las soluciones */
    margin-bottom: 25px;
    padding-bottom: 10px; /* Añadir padding inferior si el borde es visible */
    border-bottom: 2px dashed #4A0F70; /* Mantener borde o quitarlo si prefieres */
}

/* Contenedor de cada item de pregunta/respuesta en los resultados */
#simuland-resultados-area .simuland-feedback-pregunta {
    background-color: rgba(0,0,0,0.15); /* Fondo ligeramente más oscuro para cada bloque de solución */
    border: 2px solid #3c2a51;       /* Borde sutil un poco más claro que el fondo del form */
    border-radius: 4px;               /* Quitar bordes rectos si no encajan con el look general */
    padding: 15px;
    margin-bottom: 20px;
    text-align: left; 
    color: #E0E0E0; /* COLOR DE TEXTO PRINCIPAL PARA LAS SOLUCIONES (GRIS CLARO) */
}

/* Texto de la pregunta dentro del feedback */
#simuland-resultados-area .simuland-feedback-pregunta strong {
    color: #FFF; /* Blanco para el texto de la pregunta para más énfasis */
    display: block; 
    margin-bottom: 8px;
    font-size: 1.05em; /* Ligeramente más grande */
}

/* "Tu respuesta:" y "Respuesta correcta:" */
#simuland-resultados-area .simuland-feedback-pregunta span { /* Para los (Correcta) o (Incorrecta) */
    font-weight: bold; /* Hacerlos bold */
}
/* No es necesario cambiar el color aquí si ya lo haces con .correcta y .incorrecta,
   pero puedes si quieres un color base para estos textos. */


/* Explicación */
#simuland-resultados-area .simuland-explicacion {
    margin-top: 12px;
    padding: 10px;
    background-color: rgba(0,0,0,0.25); /* Fondo aún más oscuro para la explicación */
    border: 1px dashed #4A0F70; /* Borde de la explicación */
    border-radius: 3px;
    font-size: 0.9em;
    color: #D0D0D0; /* Color de texto para la explicación, un poco más tenue */
    line-height: 1.6;
}

/* Colores para los bordes de Correcta/Incorrecta (ya los tenías, pueden quedarse) */
#simuland-resultados-area .simuland-feedback-pregunta.correcta {
    border-left: 5px solid #76FF03; /* Verde brillante */
}
#simuland-resultados-area .simuland-feedback-pregunta.incorrecta {
    border-left: 5px solid #FF5252; /* Rojo brillante */
}

/** #simuland-resultados-area .simuland-feedback-pregunta,
#simuland-resultados-area .simuland-explicacion {
    font-family: Arial, Helvetica, sans-serif;
}
**/

/* --- Estilos para la Página de Stats Inmersiva --- */

body.simuland-page-contenido-inmersivo.page-child.page-template-default, /* Ajusta si tu tema añade clases específicas */
body.simuland-page-contenido-inmersivo.page-slug-stats, /* Si tu plantilla añade una clase con el slug */
body.simuland-page-contenido-inmersivo.page-id-XXX { /* Reemplaza XXX con el ID de tu página de stats si es necesario */
    /* Heredará los estilos de .simuland-page-contenido-inmersivo (fondo oscuro, etc.) */
    /* Puedes anular la fuente del cuerpo si quieres que el texto de atribución use sans-serif */
    /* font-family: Arial, Helvetica, sans-serif; */
}

/* Wrapper para la página de contenido (ya lo tienes) */
/* #simuland-page-contenido-wrapper { ... } */

/* Contenido principal de la página de Stats */
.simuland-stats-page #simuland-page-contenido-main { /* Añade la clase 'simuland-stats-page' al body en la plantilla si es necesario */
    background-color: transparent; /* El fondo del iframe ya es transparente y el body oscuro */
    padding: 10px 0; /* Menos padding si el iframe ocupa todo */
    border: none; /* Sin borde alrededor del contenido del iframe */
    box-shadow: none;
}

/* Título de la página "Stats" (si lo muestras desde la plantilla page-template-aviso-privacidad.php) */
.simuland-stats-page .simuland-page-title,
body.page-slug-stats .entry-title { /* Selector común si WordPress lo genera */
    color: #FFEE58; 
    font-family: 'Press Start 2P', cursive;
    text-shadow: 2px 2px 0 #000;
    text-align: center;
    margin-bottom: 20px; /* Espacio antes del iframe */
    font-size: 2em;
}

/* Estilos para el iframe de Plausible y el div de atribución */
/* El iframe ya tiene estilos en línea, pero podemos intentar asegurar algunas cosas */
#simuland-page-contenido-main iframe[plausible-embed] {
    display: block; /* Asegurar que sea un bloque */
    margin: 0 auto; /* Centrar si tiene un ancho menor al 100% (no debería con min-width: 100%) */
    max-width: 100%; /* Para que no se desborde en contenedores más estrechos */
    border-radius: 6px; /* Opcional: redondear un poco el iframe */
    overflow: hidden; /* Para que el borde redondeado funcione */
}

/* El div de atribución ya tiene estilos en línea, pero puedes sobrescribirlos o complementarlos */
#simuland-page-contenido-main div[style*="Plausible Analytics"] {
    font-family: Arial, Helvetica, sans-serif; /* Fuente legible para la atribución */
    /* Los colores y text-align ya están en línea, pero puedes forzarlos aquí si es necesario */
    /* color: #BEBFC5 !important; */
    /* text-align: center !important; */
    margin-top: 15px !important; /* Asegurar espacio después del iframe */
}
#simuland-page-contenido-main div[style*="Plausible Analytics"] a {
    /* color: #A162F7 !important; */
}