/* ==========================================================================
   Cuestionador — estilos
   Interfaz limpia, profesional, minimalista y responsiva.
   Tipografias base: cuerpo 14px, subtitulos 18px, titulos 24px.
   ========================================================================== */

:root {
    --color-fondo:        #f4f6f8;
    --color-superficie:   #ffffff;
    --color-borde:        #d9dee3;
    --color-texto:        #1f2933;
    --color-texto-suave:  #6b7682;
    --color-primario:     #1d6fb8;
    --color-primario-osc: #155a95;
    --color-seccion:      #e8edf2;
    --color-activo:       #e53935; /* borde rojo de la pregunta activa */
    --radio:             8px;
    --sombra:            0 1px 3px rgba(16, 24, 32, .08), 0 1px 2px rgba(16, 24, 32, .06);
    --ancho-max:         860px;
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-texto);
    background: var(--color-fondo);
}

/* --- Barra superior -------------------------------------------------------- */
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: var(--sombra);
}

.barra__fila {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
}

/* Nombre de la ENCUESTA: parte del encabezado pegajoso, centrado. */
.barra__encuesta {
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-texto);
    background: var(--color-seccion);
    border-top: 1px solid var(--color-borde);
    line-height: 1.3;
    text-align: center;
}

.barra__marca {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primario);
    letter-spacing: .2px;
}

.barra__grupo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
}

.barra__label {
    font-weight: 600;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.barra__select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 14px;
    color: var(--color-texto);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    cursor: pointer;
}

.barra__select:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }

.barra__acciones { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.barra__autoguardado { font-size: 12px; color: var(--color-texto-suave); white-space: nowrap; font-style: italic; }

/* --- Menu desplegable ------------------------------------------------------ */
.menu { position: relative; }
.menu__lista {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 25;
    min-width: 220px;
    padding: 6px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 6px 18px rgba(16, 24, 32, .14);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.menu__lista[hidden] { display: none; }
.menu__item {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--color-texto);
    text-decoration: none;
    border-radius: 6px;
}
.menu__item:hover { background: var(--color-seccion); color: var(--color-primario); }

/* --- Botones --------------------------------------------------------------- */
.boton {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radio);
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}

.boton--primario { background: var(--color-primario); color: #fff; }
.boton--primario:hover { background: var(--color-primario-osc); }
.boton--secundario {
    background: var(--color-superficie);
    color: var(--color-primario);
    border-color: var(--color-borde);
}
.boton--secundario:hover { background: var(--color-seccion); }
.boton:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }

/* --- Contenido ------------------------------------------------------------- */
.contenido {
    max-width: var(--ancho-max);
    margin: 24px auto;
    padding: 0 16px 80px;
}

.c-encuesta__cabecera {
    position: sticky;
    top: var(--alto-barra, 56px);
    z-index: 8;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 22px 24px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: var(--sombra);
    transition: padding .15s ease, box-shadow .15s ease;
}
/* Al pegarse al tope, el titulo del instrumento se compacta (menos alto). */
.c-encuesta__cabecera.esta-compacto {
    padding: 9px 24px;
    box-shadow: 0 3px 8px rgba(16, 24, 32, .12);
}
.c-encuesta__cabecera.esta-compacto .c-titulo--instrumento {
    font-size: 16px;
}

.c-titulo { margin: 0; }
.c-titulo--principal { font-size: 24px; font-weight: 700; line-height: 1.25; }
.c-titulo--instrumento {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primario);
    line-height: 1.25;
    transition: font-size .15s ease;
}

.c-encuesta__cuerpo { display: flex; flex-direction: column; gap: 10px; }

/* --- Secciones con encabezado pegajoso ------------------------------------ */
.c-seccion,
.c-subseccion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Subtitulos / secciones ----------------------------------------------- */
.c-subtitulo {
    position: sticky;
    top: calc(var(--alto-barra, 56px) + var(--alto-instrumento, 0px));
    z-index: 6;
    margin: 0;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    background: var(--color-seccion);
    border-left: 4px solid var(--color-primario);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(16, 24, 32, .06);
}
.c-subtitulo__num { color: var(--color-primario); margin-right: 4px; }
.c-subtitulo__aclaracion {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-texto-suave);
}

/* Subtitulo menor: mas pequeño que el mayor pero con la misma intensidad. */
.c-subtitulo--menor {
    top: calc(var(--alto-barra, 56px) + var(--alto-instrumento, 0px) + var(--alto-sub-mayor, 46px));
    z-index: 5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 6px 14px;
    margin-left: 12px;
    background: #e3e9ef;
    border-left: 3px solid var(--color-primario);
    color: var(--color-texto);
    box-shadow: 0 1px 3px rgba(16, 24, 32, .05);
}

/* --- Notas / texto libre --------------------------------------------------- */
.c-nota {
    margin: 2px 0;
    padding: 2px 16px;
    color: var(--color-texto-suave);
}
.c-nota__num { font-weight: 600; color: var(--color-texto); }

/* --- Grupos anidados ------------------------------------------------------- */
.c-grupo {
    padding-left: 12px;
    border-left: 2px dashed var(--color-borde);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.c-grupo__titulo { font-weight: 600; margin: 4px 0; }

/* --- Preguntas ------------------------------------------------------------- */
.c-pregunta {
    position: relative;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 14px 16px;
    box-shadow: var(--sombra);
    transition: border-color .12s, box-shadow .12s;
    scroll-margin-top: 90px;
}
.c-pregunta:focus { outline: none; }

/* Boton "X" para resetear la respuesta (vuelve al estado NULO). */
.c-pregunta__reset {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--color-activo);
    background: #fff;
    border: 1px solid var(--color-activo);
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.c-pregunta__reset:hover { background: var(--color-activo); color: #fff; }
/* Solo se muestra cuando la pregunta tiene alguna respuesta. */
.c-pregunta.tiene-respuesta .c-pregunta__reset { display: inline-flex; }
/* Deja espacio para que la X no pise el enunciado. */
.c-pregunta.tiene-respuesta .c-pregunta__enunciado { padding-right: 30px; }

/* Pregunta activa: marco rojo delgado */
.c-pregunta.esta-activa {
    border-color: var(--color-activo);
    box-shadow: 0 0 0 1px var(--color-activo);
}

/* Pregunta omitida por un salto condicional */
.c-pregunta.esta-saltada {
    opacity: .45;
    filter: grayscale(.4);
}
.c-pregunta.esta-saltada input { pointer-events: none; }

/* Pregunta deshabilitada: depende de una pregunta previa aun sin responder */
.c-pregunta.esta-deshabilitada {
    opacity: .55;
    background: #f7f8fa;
}
.c-pregunta.esta-deshabilitada::after {
    content: "Responda antes la pregunta de la que depende.";
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-style: italic;
    color: var(--color-texto-suave);
}
.c-pregunta.esta-deshabilitada .c-opcion { cursor: not-allowed; }

/* Pregunta dentro de un bloque desactivado por una respuesta anterior */
.c-pregunta.esta-bloqueada {
    opacity: .5;
    background: #f7f8fa;
}
.c-pregunta.esta-bloqueada .c-opcion { cursor: not-allowed; }

/* Aviso en el encabezado de un bloque (apartado o sub-apartado) desactivado */
.bloque-inactivo > .c-subtitulo::after {
    content: " — sección deshabilitada por una respuesta anterior";
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    color: var(--color-texto-suave);
}

.c-pregunta__enunciado {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}
.c-pregunta__num { color: var(--color-primario); margin-right: 2px; }
.c-pregunta__pista { font-weight: 400; font-size: 13px; color: var(--color-texto-suave); }
.c-pregunta__aclaracion {
    margin: -4px 0 8px;
    font-size: 13px;
    color: var(--color-texto-suave);
}

/* --- Campos de dato -------------------------------------------------------- */
.c-campo { margin-top: 2px; }
.c-campo__input {
    padding: 8px 10px;
    font-size: 14px;
    color: var(--color-texto);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    width: 220px;
    max-width: 100%;
}
.c-campo__input--ancho { width: 100%; }
.c-campo__input--fecha { width: 180px; }
.c-campo__input:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 2px rgba(29, 111, 184, .18);
}

/* --- Opciones -------------------------------------------------------------- */
.c-opciones { display: flex; flex-direction: column; gap: 6px; }
.c-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}
.c-opcion:hover { background: var(--color-seccion); }
.c-opcion__control { width: 17px; height: 17px; accent-color: var(--color-primario); cursor: pointer; }
.c-opcion__texto { flex: 1 1 auto; }
.c-opcion__complemento {
    flex: 1 1 200px;
    padding: 6px 9px;
    font-size: 13px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
}
.c-opcion__complemento:disabled { background: #f0f2f4; color: var(--color-texto-suave); }

/* --- Panel JSON ------------------------------------------------------------ */
.panel-json {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(480px, 92vw);
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: #0f1b24;
    color: #d6e2ea;
    box-shadow: -4px 0 20px rgba(0, 0, 0, .25);
}
.panel-json[hidden] { display: none; }
.panel-json__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 600;
    background: #12222d;
    border-bottom: 1px solid #1d3340;
}
.panel-json__cerrar {
    background: none; border: none; color: #d6e2ea;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.panel-json__codigo {
    flex: 1 1 auto;
    margin: 0;
    padding: 16px;
    overflow: auto;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Estado (avisos) ------------------------------------------------------- */
.estado {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 18px;
    background: var(--color-texto);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    box-shadow: var(--sombra);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.estado.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.estado--error { background: var(--color-activo); }

/* --- Responsivo ------------------------------------------------------------ */
@media (max-width: 600px) {
    .barra { padding: 10px 14px; }
    .barra__marca { flex-basis: 100%; }
    .barra__acciones { margin-left: 0; }
    .boton { flex: 1 1 auto; }
    .c-titulo--principal { font-size: 20px; }
    .c-campo__input { width: 100%; }
}

/* ==========================================================================
   Paginas web (portada, login, panel de inicio)
   ========================================================================== */
.pagina--portada { min-height: 100vh; display: flex; }

.portada {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(160deg, #eef2f6 0%, #dde6ee 100%);
}
.portada__caja {
    max-width: 520px;
    width: 100%;
    text-align: center;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 48px 36px;
    box-shadow: 0 10px 30px rgba(16, 24, 32, .10);
}
.portada__titulo { margin: 0; font-size: 34px; font-weight: 800; color: var(--color-primario); }
.portada__bajada { margin: 12px 0 28px; font-size: 16px; color: var(--color-texto-suave); }
.portada__acciones { display: flex; justify-content: center; gap: 12px; }

/* --- Contenedor centrado (login, avisos) ---------------------------------- */
.centrado {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.tarjeta {
    width: 100%;
    max-width: 400px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 8px 24px rgba(16, 24, 32, .10);
}

/* --- Formularios ----------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form__titulo { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--color-texto); }
.form__campo { display: flex; flex-direction: column; gap: 6px; }
.form__etiqueta { font-size: 13px; font-weight: 600; color: var(--color-texto-suave); }
.form__input {
    padding: 10px 12px;
    font-size: 15px;
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
}
.form__input:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(29, 111, 184, .18);
}
.form__error {
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    color: #a4161a;
    background: #fde8e8;
    border: 1px solid #f5c2c2;
    border-radius: 8px;
}
.form__acciones { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }

.boton--grande { padding: 12px 28px; font-size: 16px; }

/* --- Panel de inicio ------------------------------------------------------- */
.barra__usuario { font-weight: 600; color: var(--color-texto-suave); white-space: nowrap; }

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.tarjeta--opcion {
    display: block;
    text-decoration: none;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: var(--sombra);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tarjeta--opcion:hover {
    border-color: var(--color-primario);
    box-shadow: 0 6px 16px rgba(16, 24, 32, .12);
    transform: translateY(-2px);
}
.tarjeta__titulo { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--color-primario); }
.tarjeta__texto { margin: 0; font-size: 13px; color: var(--color-texto-suave); }

/* ==========================================================================
   Gestion de usuarios / cuenta
   ========================================================================== */

.barra__marca--enlace { text-decoration: none; }

/* --- Avisos (mensajes flash) ---------------------------------------------- */
.avisos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.aviso {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid transparent;
}
.aviso--ok    { background: #e6f4ea; color: #1e5631; border-color: #bfe3c8; }
.aviso--error { background: #fde8e8; color: #a4161a; border-color: #f5c2c2; }
.aviso--info  { background: #e8f0fb; color: #1d4e89; border-color: #c5d9f3; }

/* --- Encabezado de seccion con accion a la derecha ------------------------ */
.seccion__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* --- Seccion "Mi cuenta" (distinta de las tarjetas de opciones) ----------- */
.micuenta {
    margin: 10px 0 22px;
    border: 1px solid #cfe0d6;
    border-left: 5px solid #2e9e5b;
    border-radius: 10px;
    background: #f3faf5;
    overflow: hidden;
}
.micuenta__cab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #e6f4ea;
    border-bottom: 1px solid #cfe0d6;
    color: #1e5631;
    font-weight: 700;
}
.micuenta__cab .fa-solid { color: #2e9e5b; }
.micuenta__titulo { font-size: 15px; }
.micuenta__sub { margin-left: auto; font-weight: 500; font-size: 13px; color: var(--color-texto-suave); }
.micuenta__acciones { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 18px; }
.micuenta__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--color-texto);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-weight: 600;
    transition: border-color .12s, box-shadow .12s;
}
.micuenta__item:hover { border-color: #2e9e5b; box-shadow: 0 2px 8px rgba(46,158,91,.18); }
.micuenta__item .fa-solid { color: #2e9e5b; }

/* --- Iconos en tarjetas de opciones --------------------------------------- */
.tarjeta__icono { font-size: 22px; color: var(--color-primario); margin-bottom: 8px; }

/* --- Tabla ----------------------------------------------------------------- */
.tabla-contenedor {
    overflow-x: auto;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    box-shadow: var(--sombra);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--color-borde); }
.tabla thead th { background: var(--color-seccion); font-weight: 700; color: var(--color-texto); white-space: nowrap; }
.tabla tbody tr:hover { background: #f7f9fb; }
.tabla tr.fila--bloqueado td { color: var(--color-texto-suave); }
.tabla__acciones { white-space: nowrap; width: 1%; }

/* --- Etiquetas de estado --------------------------------------------------- */
.etiqueta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.etiqueta--activo    { background: #e6f4ea; color: #1e5631; }
.etiqueta--bloqueado { background: #fde8e8; color: #a4161a; }

/* --- Acciones por icono ---------------------------------------------------- */
.accion-form { display: inline; margin: 0; }
.accion {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: 0 2px;
    border: 1px solid var(--color-borde); border-radius: 7px;
    background: var(--color-superficie); color: var(--color-texto-suave);
    cursor: pointer; text-decoration: none; font-size: 14px;
    transition: background .12s, color .12s, border-color .12s;
}
.accion:hover { background: var(--color-seccion); }
.accion--editar:hover      { color: var(--color-primario); border-color: var(--color-primario); }
.accion--bloquear:hover    { color: #b45309; border-color: #b45309; }
.accion--desbloquear:hover { color: #1e5631; border-color: #2e9e5b; }
.accion--eliminar:hover    { color: #a4161a; border-color: #a4161a; }
.accion--inactiva { cursor: default; opacity: .5; }

/* --- Modal de confirmacion (Aceptar / Cancelar) --------------------------- */
.modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(16, 24, 32, .45);
}
.modal[hidden] { display: none; }
.modal__caja {
    width: 100%; max-width: 420px;
    background: var(--color-superficie);
    border-radius: 12px; padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.modal__mensaje { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--color-texto); }
.modal__acciones { display: flex; justify-content: flex-end; gap: 10px; }

/* --- Columnas numericas y notas de formulario ----------------------------- */
.tabla .num { text-align: center; width: 1%; white-space: nowrap; }
.form__nota {
    margin: 0;
    font-size: 13px;
    color: var(--color-texto-suave);
    background: var(--color-seccion);
    border-radius: 8px;
    padding: 10px 12px;
}

/* --- Campo de texto multilinea (autocrecimiento + redimensionable) -------- */
.form__area {
    min-height: 44px;
    line-height: 1.45;
    resize: vertical;
    overflow: hidden;
    font-family: inherit;
}

/* ==========================================================================
   Cuestionarios: filtros, avance, paginacion, solo lectura
   ========================================================================== */
.contenido--ancho { max-width: 1120px; }

.filtros {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
    margin-bottom: 14px; padding: 12px 16px;
    background: var(--color-superficie); border: 1px solid var(--color-borde);
    border-radius: 10px; box-shadow: var(--sombra);
}
.filtros__campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; min-width: 200px; }
.filtros .barra__label { font-weight: 600; }

.avance { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.avance__barra { flex: 1 1 auto; min-width: 70px; height: 8px; background: var(--color-seccion); border-radius: 999px; overflow: hidden; }
.avance__relleno { height: 100%; background: var(--color-primario); border-radius: 999px; }
.avance__txt { font-size: 12px; color: var(--color-texto-suave); white-space: nowrap; }

.tabla__vacio { text-align: center; color: var(--color-texto-suave); padding: 24px; }

.pag { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pag__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border: 1px solid var(--color-borde); border-radius: 7px;
    background: var(--color-superficie); color: var(--color-texto);
    text-decoration: none; cursor: pointer;
}
.pag__btn:hover { background: var(--color-seccion); }
.pag__btn--off { opacity: .4; pointer-events: none; }
.pag__info { margin: 0 10px; font-size: 13px; color: var(--color-texto-suave); }
.pag__ir { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.pag__num { width: 72px; padding: 7px 8px; border: 1px solid var(--color-borde); border-radius: 7px; font-size: 14px; }

/* Modo solo lectura: oculta el reseteo y neutraliza el resalte activo. */
.solo-lectura .c-pregunta__reset { display: none !important; }
.solo-lectura .c-pregunta.esta-activa { border-color: var(--color-borde); box-shadow: var(--sombra); }