/* --- Reset Básico y Body --- */
body.page-template-default { /* Ajusta si usas otro template */
    background-color: #f4f7f6; /* Gris muy claro del fondo */
}

.one-container .site-content {
    padding: 0px;
}

#simulador-pregunta-outer-container {
    /* Otros estilos que tengas... */
    margin-top: 0;
    padding-bottom: 10px; /* Empieza con 80px o incluso más */
}

#simulador-container {
    max-width: 850px;
    margin: 30px auto;
    background-color: #ffffff;
    padding: 25px 35px 35px 35px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    position: relative; /* Para posicionar elementos internos */
    color: #333;
}

/* --- Barra de Progreso --- */
#barra-progreso-container {
    width: 100%;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px; /* Espacio antes de los iconos */
}
#barra-progreso {
    height: 100%;
    background-color: #28a745; /* Verde éxito */
    transition: width 0.4s ease-in-out;
    border-radius: 5px;
}

/* --- Controles Header (Índice, Timer, Música) --- */
.simulador-header-controls { /* Reemplaza .simulador-header-icons */
    display: flex;
    justify-content: flex-start; /* Alinea el grupo a la izquierda */
    align-items: center;
    margin-bottom: 5px;
    padding-top: 0px;
    position: relative; /* Resetear por si acaso */
}

.header-left-group {
    display: flex;
    align-items: center; /* Centra verticalmente los items del grupo */
    gap: 12px; /* Espacio entre índice, timer y música */
    padding-bottom: 10px;
}

#icono-indice, #icono-musica {
    margin: 0; /* Quitar márgenes individuales */
}

#icono-indice button, #icono-musica button {
    /* Mantener estilos de botón redondo */
    background: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 32px;   /* Ligeramente más pequeño? */
    height: 32px;  /* Ligeramente más pequeño? */
    cursor: pointer;
    font-size: 16px; /* Ligeramente más pequeño? */
    line-height: 30px; /* Ajustar si tamaño cambió */
    text-align: center;
    color: #555;
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
}
#icono-indice button:hover, #icono-musica button:hover {
    background-color: #f0f0f0;
    color: #333;
}

.header-left-group #text-exit {
    color: #555;
}

.header-left-group #icono-indice button, /* Selector más específico */
.header-left-group #icono-musica button { /* Aplicar a ambos por consistencia */
    /* Mantener estilos de botón redondo */
    background: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: #555;
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
    /* --- Añade esto para forzar la posición --- */
    position: static !important; /* Fuerza la posición normal dentro del flex container */
    top: auto !important;        /* Resetea 'top' por si acaso */
    right: auto !important;       /* Resetea 'right' por si acaso */
    left: auto !important;        /* Resetea 'left' por si acaso */
    /* ----------------------------------------- */
}

#icono-indice{
    position: unset;
}

#simulador-temporizador {
    font-size: 1.1em; /* Reducir tamaño para menor protagonismo */
    font-weight: 400; /* Menos grueso */
    color: #666;      /* Un gris más suave */
    margin: 0;        /* Quitar márgenes previos */
    padding: 0 5px;   /* Un poco de aire */
    position: static; /* Asegurar que no sea absoluto */
    flex-grow: 0;     /* No permitir que crezca */
    text-align: left; /* Ya no necesita centrarse */
    line-height: 32px; /* Alinear con la altura de los botones */
}

/* --- Menú Lateral (Índice) --- */
#menu-lateral {
    position: fixed;
    top: 0;
    left: -300px; /* Oculto fuera de la pantalla */
    width: 280px; /* Ancho del menú */
    height: 100%;
    background-color: #fff;
    box-shadow: 4px 0 10px rgba(0,0,0,0.1);
    padding: 20px;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición suave */
    z-index: 1002; /* Por encima del overlay */
    overflow-y: auto; /* Scroll si hay muchas preguntas */
     display: flex;
     flex-direction: column;
}
#menu-lateral.menu-lateral-visible {
    left: 0; /* Visible */
}
#menu-lateral h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.3em;
     border-bottom: 1px solid #eee;
     padding-bottom: 10px;
}
#menu-lateral p {
     font-size: 0.9em;
     color: #666;
     margin-bottom: 15px;
}
#menu-lateral ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0; /* Espacio antes del botón cerrar */
     flex-grow: 1; /* Ocupa espacio disponible */
     overflow-y: auto; /* Scroll interno si es necesario */
}
#menu-lateral ul#lista-preguntas-no-respondidas {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0; /* Espacio antes del botón cerrar */
    flex-grow: 1; /* Ocupa espacio disponible */
    overflow-y: auto; /* Scroll interno si es necesario */
    display: grid; /* <<--- USAR GRID --- */
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); /* <<--- Define columnas automáticas */
    gap: 8px; /* <<--- Espacio entre los cuadros */
    align-content: start; /* Alinea los items al inicio si no llenan todo */
}

#menu-lateral li {
    margin-bottom: 0; /* Quitar margen, el 'gap' del grid lo maneja */
    /* Opcional: Forzar que sean cuadrados */
    aspect-ratio: 1 / 1; /* Mantiene la proporción 1:1 */
    display: flex; /* Para que el 'a' pueda llenar el 'li' */
}

#menu-lateral li a {
    display: flex; /* <<--- Centrar el número dentro del cuadro */
    align-items: center;
    justify-content: center;
    width: 100%; /* <<--- Ocupa todo el 'li' */
    height: 100%; /* <<--- Ocupa todo el 'li' */
    padding: 5px; /* Padding interno del cuadro */
    text-decoration: none;
    color: #0073aa; /* Azul WP */
    border: 1px solid #ccc; /* <<--- Borde del cuadro */
    border-radius: 4px; /* Esquinas redondeadas */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    font-size: 0.9em; /* Ajustar tamaño del número si es necesario */
    box-sizing: border-box; /* Padding/border no aumentan el tamaño total */
    text-align: center; /* Asegurar centrado */
    line-height: 1.2; /* Ajustar si el número es muy alto */
}

/* Estilo al pasar el ratón sobre un cuadro */
#menu-lateral li a:hover {
    background-color: #f0f8ff; /* Azul muy claro hover */
    color: #005075;
    border-color: #a6cfff; /* Borde azul claro hover */
}

/* Estilo para el cuadro de la pregunta actual (si está sin responder) */
#menu-lateral li.indice-actual a {
    font-weight: bold;
    color: #fff; /* Texto blanco */
    background-color: #ff9800; /* Fondo Naranja */
    border-color: #fb8c00; /* Borde Naranja oscuro */
}

/* Estilo para el mensaje "¡Todas respondidas!" si es el único elemento */
#menu-lateral ul li:only-child { /* Selecciona el LI si es el único hijo de la UL */
    grid-column: 1 / -1; /* Ocupa todo el ancho del grid */
    text-align: center;
    color: #666;
    padding: 10px 0;
    aspect-ratio: auto; /* Quitar forzado de cuadrado */
    border: none; /* Sin borde para el mensaje */
    display: block; /* Resetear flex */
}

/* --- Botón Cerrar Índice --- */
#cerrar-indice-btn {
    /* ... (mantener otros estilos: margin-top, padding, background, border, etc.) ... */
    color: #333; /* <<< --- Color de texto oscuro */
    font-weight: 500;
}
#cerrar-indice-btn:hover {
    /* ... (mantener otros estilos hover) ... */
    color: #000; /* Opcional: Texto más oscuro al pasar */
}


/* --- Overlay para Menú Lateral --- */
#menu-lateral-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 1001; /* Detrás del menú, por encima del contenido */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#menu-lateral-overlay.menu-lateral-overlay-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}


#simulador-pregunta-container {
    background-color: #fff; /* Fondo blanco por si tiene borde/padding */
    padding: 25px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin-bottom: 30px; /* Espacio antes de navegación */
     min-height: 200px; /* Evita saltos mientras carga */
     position: relative; /* Para mensajes de carga/error */
}
 /* Mensajes dentro del contenedor */
 #simulador-pregunta-container .loading-message,
 #simulador-pregunta-container .error-message {
     text-align: center;
     color: #777;
     font-size: 1.1em;
     padding: 40px 20px;
 }
 #simulador-pregunta-container .error-message {
     color: #dc3545; /* Rojo error */
 }


/* --- Caso Clínico y Pregunta --- */
.simulador-caso-clinico {
    font-style: normal; /* No itálica */
    color: #555;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
    line-height: 1.6;
}
.simulador-caso-clinico:empty {
    display: none; /* No ocupa espacio si está vacío */
}
.simulador-pregunta {
    font-weight: 600; /* Más grueso */
    font-size: 1.15em;
    margin-bottom: 25px;
    color: #333;
    line-height: 1.5;
}
 /* Estilo para subpreguntas en modo serie */
 .simulador-subpregunta {
     border-top: 1px solid #eee;
     margin-top: 20px;
     padding-top: 20px;
 }
 .simulador-subpregunta:first-of-type {
     border-top: none;
     margin-top: 0;
     padding-top: 0;
 }


/* --- Respuestas --- */
.simulador-respuestas {
    list-style: none;
    padding: 0;
    margin: 0;
}
.simulador-respuestas li {
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
     position: relative; /* Para el :hover */
}
 /* Efecto sutil al pasar el ratón */
 .simulador-respuestas li:hover {
     background-color: #f9f9f9;
     border-color: #bbb;
 }
.simulador-respuestas label {
    display: block;
    padding: 12px 15px 12px 40px; /* Espacio para el radio */
    cursor: pointer;
    color: #444;
    line-height: 1.5;
     position: relative;
     z-index: 1; /* Asegura que label esté sobre input */
}
.simulador-respuestas input[type="radio"] {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
     margin: 0;
     cursor: pointer;
     /* Opcional: hacerlos más grandes */
     width: 16px;
     height: 16px;
     z-index: 0; /* Detrás del label */
}
/* Estilo cuando una opción está seleccionada */
.simulador-respuestas li:has(input[type="radio"]:checked) {
    background-color: #e7f3fe; /* Azul claro seleccionado */
    border-color: #a6cfff;
}
.simulador-respuestas input[type="radio"]:checked + label {
     /* No es necesario estilo extra fuerte, el fondo ya indica selección */
}

/* --- Navegación (Botones) --- */
#simulador-navegacion {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
     display: flex; /* Flexbox para alinear botones */
     justify-content: space-between; /* Separa Anterior y Siguiente/Finalizar */
     align-items: center;
}
 #simulador-navegacion > div { /* Para el contenedor del botón global */
      display: inline-block;
 }
#simulador-navegacion .button,
#finalizar-global-container .button {
    background-color: #ff9800; /* Naranja */
    color: white !important; /* Forzar color blanco */
    border: none;
    padding: 10px 25px;
    border-radius: 25px; /* Muy redondeado */
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    margin: 10px 5px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     line-height: normal;
     text-transform: none; /* Evitar mayúsculas forzadas por el tema */
}
#simulador-navegacion .button:hover,
#finalizar-global-container .button:hover {
    background-color: #fb8c00; /* Naranja más oscuro */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
#simulador-navegacion .button:disabled {
    background-color: #bdbdbd; /* Gris claro deshabilitado */
    color: #777 !important;
    cursor: not-allowed;
    box-shadow: none;
}
 /* Estilo específico para botón Anterior */
 #simulador-anterior-button {
     background-color: #f0f0f0; /* Gris claro */
     color: #555 !important;
     box-shadow: none;
     border: 1px solid #ccc;
 }
  #simulador-anterior-button:not(:disabled):hover {
      background-color: #e0e0e0;
      border-color: #bbb;
      color: #333 !important;
  }
  #simulador-anterior-button:disabled {
      background-color: #f5f5f5;
      color: #aaa !important;
      border-color: #ddd;
  }

/* Botón Finalizar Global (cuando todas están respondidas) */
#finalizar-global-container {
     margin-left: 10px; /* Espacio respecto a Siguiente */
}
#finalizar-global-button {
    background-color: #4CAF50; /* Verde */
}
#finalizar-global-button:hover {
    background-color: #45a049; /* Verde oscuro */
}


/* --- Área Botón Reportar (Debajo de Navegación) --- */
 .report-button-area {
     text-align: center; /* Centrar el botón */
     margin-top: 25px; /* Espacio después de la navegación */
     padding-top: 15px;
     border-top: 1px solid #eee;
 }

/* --- Botón Reportar Pregunta (Estilo General) --- */
.report-flag {
    background: none;
    border: none;
    color: #888; /* Un poco más visible */
    cursor: pointer;
    font-size: 0.95em;
    padding: 8px 12px;
    transition: color 0.2s, text-decoration 0.2s;
    text-decoration: none; /* Sin subrayado por defecto */
    display: inline-block; /* Para padding */
    margin: 0 auto; /* Centrado si el contenedor es block */
}
.report-flag:hover {
    color: #dc3545; /* Rojo al pasar */
    text-decoration: underline; /* Subrayado al pasar */
    background-color: transparent !important; /* Forzar sin fondo naranja */
}

/* --- Estilos Modales --- */
.enarmango-modal {
    display: none; /* Oculto por defecto */
    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 */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
}
.enarmango-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 25px 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px; /* Ancho máximo */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    color: #333; /* Asegurar color de texto */
}
.enarmango-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}
.enarmango-modal-close:hover,
.enarmango-modal-close:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}
 .enarmango-modal h2, .enarmango-modal h3 {
     margin-top: 0;
     color: #333;
     margin-bottom: 15px;
 }
 .enarmango-modal p {
     margin-bottom: 15px;
     line-height: 1.6;
      color: #555;
 }
 .enarmango-modal form textarea {
     width: 100%;
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #ccc;
     border-radius: 4px;
     min-height: 100px;
     box-sizing: border-box; /* Incluye padding/border en el width */
 }
 .enarmango-modal form button {
      /* Usar el mismo estilo de botón naranja */
      background-color: #ff9800;
      color: white !important;
      border: none;
      padding: 10px 25px;
      border-radius: 25px;
      cursor: pointer;
      font-size: 1em;
      font-weight: 500;
      transition: background-color 0.2s ease;
 }
 .enarmango-modal form button:hover {
     background-color: #fb8c00;
 }
  .enarmango-modal form button:disabled {
      background-color: #bdbdbd;
      cursor: not-allowed;
  }
  .enarmango-modal small {
       color: #777;
       font-size: 0.85em;
  }
 /* Específico para Nextend Social Login */
 .enarmango-modal .nsl-container {
     /* Ajusta si es necesario */
     margin-top: 20px;
 }
 
/* --- Estilos Específicos para Modal de Reporte --- */
#report-modal .enarmango-modal-content h3 { /* Estilo del título */
     margin-top: 0;
     margin-bottom: 10px;
     color: #333;
     font-size: 1.4em; /* Un poco más grande */
     font-weight: 600;
     text-align: center;
}
#report-modal .enarmango-modal-content p { /* Estilo del párrafo descriptivo */
     margin-bottom: 20px; /* Más espacio antes del textarea */
     color: #555;
     text-align: center;
     line-height: 1.6;
}

/* Estilo del Textarea */
#report-form #report-message {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px; /* Espacio antes del botón */
    border: 1px solid #ccc;
    border-radius: 5px;
    min-height: 120px;
    box-sizing: border-box;
    font-family: inherit; /* Usar la misma fuente */
    font-size: 0.95em;
    line-height: 1.5;
    transition: border-color 0.2s ease;
}
#report-form #report-message:focus {
    border-color: #ff9800; /* Borde naranja al enfocar */
    outline: none; /* Quitar outline por defecto */
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2); /* Sombra suave naranja */
}

/* Estilo del Botón "Enviar reporte" */
#report-form button[type="submit"] {
    /* Heredar estilo de botón principal */
    background-color: #ff9800;
    color: white !important;
    border: none;
    padding: 12px 30px; /* Ligeramente más grande */
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    line-height: normal;
    display: block; /* Hacerlo bloque */
    width: auto; /* Ancho automático */
    min-width: 180px; /* Ancho mínimo */
    margin: 15px auto 10px auto; /* Centrar y dar espacio */
    text-transform: none;
}
#report-form button[type="submit"]:hover {
    background-color: #fb8c00;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
#report-form button[type="submit"]:disabled {
    background-color: #bdbdbd;
    color: #777 !important;
    cursor: not-allowed;
    box-shadow: none;
}

/* Estilo del texto pequeño final */
 #report-modal .enarmango-modal-content p small {
      display: block; /* En su propia línea */
      text-align: center;
      margin-top: 15px;
      color: #888;
 }


/* Estilo del Botón de Cierre (X) */
/* Sobreescribir el estilo general .enarmango-modal-close para ESTE modal */
#report-modal .enarmango-modal-close {
    position: absolute;
    top: 10px; /* Ajustar posición */
    right: 10px; /* Ajustar posición */
    width: 30px;
    height: 30px;
    background-color: #ff9800; /* Naranja */
    border: none;
    border-radius: 4px; /* Ligeramente redondeado */
    color: white;
    font-size: 18px; /* Tamaño de la 'x' */
    font-weight: bold;
    line-height: 30px; /* Centrar 'x' verticalmente */
    text-align: center;
    cursor: pointer;
    padding: 0; /* Reset padding */
    transition: background-color 0.2s ease;
    opacity: 0.9;
}
#report-modal .enarmango-modal-close:hover {
    background-color: #fb8c00; /* Naranja oscuro */
    opacity: 1;
}


/* --- Clases Utilitarias --- */
.enarmango-error {
     border: 1px solid #dc3545;
     background-color: #f8d7da;
     color: #721c24;
     padding: 15px;
     border-radius: 5px;
     margin: 20px;
}


/* --- Responsividad (Ejemplo Básico) --- */
@media (max-width: 768px) {
    #simulador-container {
        margin: 15px;
        padding: 15px 20px 25px 20px;
    }
    .simulador-header-icons {
         position: static; /* Vuelven al flujo normal */
         justify-content: flex-end;
         margin-bottom: 15px;
    }
     #simulador-temporizador {
          position: static;
          margin-right: auto; /* Mantiene a la izquierda */
          font-size: 1.2em;
     }
    #simulador-pregunta-outer-container {
         margin-top: 20px;
    }
     #simulador-pregunta-container {
         padding: 15px;
     }
     .simulador-pregunta {
         font-size: 1.05em;
     }
     .simulador-respuestas label {
         padding: 10px 15px 10px 35px; /* Ajustar padding para radio */
     }
     .simulador-respuestas input[type="radio"] {
         left: 10px;
     }
     #simulador-navegacion {
         flex-direction: column-reverse;
         align-items: center;/* Botones uno debajo del otro */
     }
     #simulador-anterior-button {
         margin-bottom: 15px !important; /* Espacio entre botones */
         width: 80%; /* Hacerlos más anchos */
         max-width: 250px;
     }
     #simulador-siguiente-button,
     #finalizar-global-container {
          width: 80%; /* Hacerlos más anchos */
          max-width: 250px;
          display: block; /* Asegurar que ocupen su espacio */
          margin-left: auto; /* Centrar */
          margin-right: auto; /* Centrar */
          /* Eliminar márgenes verticales específicos anteriores */
          margin-top: 0;
          margin-bottom: 0;
     }
     #finalizar-global-container button {
         width: 100%; /* El botón dentro ocupa todo el contenedor */
     }

    .enarmango-modal-content {
        width: 90%;
        padding: 20px;
    }
     #menu-lateral {
         width: 250px; /* Ajustar si es necesario */
         left: -260px; /* Asegurar que esté oculto */
     }
     
    #simulador-fixed-footer {
        /* Volver a dirección de fila, pero permitir wrap */
        flex-direction: row; /* <<--- Volver a row */
        flex-wrap: wrap;     /* <<--- PERMITIR QUE LOS ELEMENTOS BAJEN */
        justify-content: center; /* Centrar los items/grupos horizontalmente */
        align-items: center;
        padding: 10px 10px; /* Padding ajustado */
        gap: 8px; /* Espacio vertical Y horizontal entre elementos/líneas */
    }

    /* Grupo Anterior/Siguiente: ocupa el ancho necesario */
    #simulador-navegacion {
        display: flex;
        justify-content: center; /* Centrar Ant/Sig dentro de su propio grupo */
        width: 100%; /* <<--- Que ocupe el ancho para centrar bien Ant/Sig */
        gap: 10px;
        order: 1; /* <<--- Asegurar que este grupo vaya primero */
        align-items: baseline;
        flex-direction: row;
    }

    /* Contenedor del botón Finalizar: ocupa todo el ancho para forzar salto */
    #finalizar-global-container {
        width: 100%; /* <<--- OCUPAR TODO EL ANCHO */
        text-align: center;
        order: 2; /* <<--- Asegurar que este grupo vaya después */
        margin-top: 5px; /* Pequeño espacio extra arriba cuando aparece */
        /* display: none/block controlado por JS */
    }

    /* Ajustar botones dentro del footer */
    #simulador-fixed-footer .button {
        padding: 8px 15px;
        font-size: 0.9em;
        flex-grow: 0; /* <<--- NO permitir que crezcan por defecto */
        flex-shrink: 0;
        min-width: 110px; /* Ancho mínimo razonable */
        box-sizing: border-box;
    }

    /* Específico para Ant/Sig DENTRO de su contenedor flex */
    #simulador-navegacion #simulador-anterior-button,
    #simulador-navegacion #simulador-siguiente-button {
         flex-grow: 1; /* <<--- PERMITIR que Ant/Sig SÍ crezcan para llenar su espacio */
         max-width: calc(50% - 5px); /* Evitar que sean gigantes, ajusta el gap/2 */
    }


    /* Botón Finalizar: hacerlo destacar */
    #finalizar-global-button {
        width: 90%; /* Bastante ancho */
        max-width: 300px;
        display: inline-block; /* Para que el text-align del contenedor funcione */
    }

    /* --- ¡¡AJUSTAR PADDING OTRA VEZ!! --- */
    /* La altura cambiará si 'Finalizar' es visible o no. */
    /* Usar una altura que funcione para AMBOS casos, probablemente basado en cuando es más alto */
    #simulador-pregunta-outer-container {
        /* Prueba un valor intermedio o basado en el estado más alto */
        padding-bottom: 10px; /* >>> AJUSTA ESTE VALOR <<< */
    }
}


/* === ESTILOS PARA FOOTER FIJO DE NAVEGACIÓN === */

#simulador-fixed-footer {
    position: fixed; /* Fija el elemento relativo al viewport */
    bottom: 0;       /* Lo pega al borde inferior */
    left: 0;         /* Lo pega al borde izquierdo */
    width: 100%;     /* Ocupa todo el ancho */
    background-color: #f8f9fa; /* Color de fondo (elige el que prefieras) */
    padding: 8px 15px;       /* Espaciado interno */
    border-top: 1px solid #dee2e6; /* Borde superior sutil */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); /* Sombra superior sutil */
    z-index: 100;       /* Asegura que esté por encima de otro contenido */
    box-sizing: border-box; /* Incluye padding y borde en el width/height */

    /* Usar Flexbox para alinear los botones */
    display: flex;
    justify-content: center; /* Empuja Anterior a la izq y el resto a la der */
    align-items: center;       /* Centra verticalmente los elementos */
    gap: 10px; /* Espacio entre grupos si se acercan */
}

/* Ajustar los contenedores internos si es necesario */
/* #simulador-navegacion ahora solo contiene Anterior/Siguiente */
#simulador-navegacion {
    /* Quitar márgenes o paddings si los tenía antes */
    /* margin: 0; padding: 0; */
    display: flex; /* Hacerlo flex para alinear Anterior y Siguiente */
    gap: 10px;    /* Espacio entre Anterior y Siguiente */
    align-items: baseline;
    margin: 0;
    padding: 0;
}

/* Contenedor del botón global de finalizar */
#finalizar-global-container {
    /* Quitar márgenes si los tenía */
    margin: 0;
    /* El display: none/block se controla con JS */
}

/* Ajustes a los botones si es necesario */
#simulador-fixed-footer .button {
    margin: 0;
    /* <<< TAMAÑO MÁS GRANDE PARA DESKTOP >>> */
    padding: 8px 48px; /* Más padding horizontal */
    font-size: 1em;     /* Tamaño de fuente normal */
    border-radius: 25px;/* Redondeado */
    /* --- Otros estilos base --- */
    background-color: #ff9800; /* Naranja Siguiente */
    color: white !important;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    line-height: normal;
    text-transform: none;
    flex-grow: 0; /* No crecer por defecto */
    flex-shrink: 0;
    min-width: 130px; /* Ancho mínimo para desktop */
    text-align: center;
}

#finalizar-global-button {
    background-color: #28a745; /* Verde para finalizar */
    border-color: #28a745;
    color: white;
}
#finalizar-global-button:hover {
    background-color: #218838;
    border-color: #1e7e34;
}



/* --- Recordatorio: Ajustar padding-bottom del contenido --- */
/* Asegúrate de que #simulador-pregunta-outer-container tenga suficiente */
/* padding-bottom para que el contenido no quede oculto */
/* #simulador-pregunta-outer-container {
    padding-bottom: 80px; /* ¡AJUSTA ESTE VALOR!
} */