/* Encuesta SEC — identidad visual del área de socios (ver CLAUDE.md §8).
   Solo sobrescribe Bootstrap 3; no se modifica su CSS. */

/* --- Base ------------------------------------------------------------- */
body {
    font-family: "frutiger", "Cabin", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    background: #f6f6f6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
}

a { color: #9D142E; }
a:hover, a:focus { color: #7E1025; }

.text-muted { color: #666; } /* contraste AA sobre blanco */

/* Foco visible en todos los elementos interactivos */
a:focus, button:focus, .btn:focus, .close:focus, [tabindex]:focus,
.opcion-input:focus + .opcion {
    outline: 3px solid rgba(157, 20, 46, .45);
    outline-offset: 2px;
}

/* --- Contenedor ------------------------------------------------------- */
.encuesta-wrap { padding: 20px 15px; }

.encuesta-card {
    display: block;
    max-width: 960px;
    margin: 0 auto;
    padding: 32px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.cabecera-logo { margin: -8px 0 20px; }
.cabecera-logo img { display: block; max-width: 100%; height: auto; }

.encuesta-titulo { margin-top: 0; font-size: 30px; }
.encuesta-descripcion { font-size: 16px; color: #555; }
.saludo { font-size: 18px; margin: 20px 0; }
.seccion-titulo { font-size: 22px; margin: 32px 0 16px; }

/* --- Botones y barras ------------------------------------------------- */
.btn-primary {
    color: #fff;
    background-color: #9D142E;
    border-color: #9D142E;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #7E1025;
    border-color: #7E1025;
}
.btn-primary[disabled], .btn-primary.disabled {
    background-color: #9D142E;
    border-color: #9D142E;
}

.progress { height: 24px; margin-top: 8px; box-shadow: none; background-color: #ececec; }
.progress-bar { background-color: #9D142E; box-shadow: none; }

/* --- Mensajes de estado ---------------------------------------------- */
.alert { border-radius: 6px; }
.estado-mensaje { display: flex; align-items: flex-start; padding: 20px; margin-bottom: 0; }
.estado-icono { flex: 0 0 auto; font-size: 32px; line-height: 1; margin-right: 16px; }
.estado-texto { flex: 1 1 auto; font-size: 16px; }
.estado-texto p { margin: 3px 0 8px; }
.estado-texto p:last-child { margin-bottom: 0; }
.estado-texto a:not(.btn) { font-weight: 600; text-decoration: underline; }

/* --- Formulario ------------------------------------------------------- */
fieldset.pregunta { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
fieldset.pregunta legend {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.35;
    color: #333;
}
.pregunta-num { color: #9D142E; }

/* Asistente: con JS se muestra una sola pregunta cada vez; sin JS, todas. */
.wizard-only { display: none; }
.js-wizard .wizard-only { display: inline-block; }
.js-wizard .paso-indicador.wizard-only { display: block; }
.js-wizard .pregunta { display: none; }
.js-wizard .pregunta.activa { display: block; }
.pregunta:focus { outline: none; }

.paso-indicador { margin-bottom: 20px; }
.paso-texto { margin: 0 0 6px; font-size: 14px; color: #555; }
.progress-paso { height: 8px; margin: 0; }
.acciones .btn:not(.hidden) ~ .btn:not(.hidden) { margin-left: 8px; }

/* Respuestas: una por fila y a todo el ancho, para admitir textos largos y cualquier número de opciones */
.opciones { display: block; }

/* El radio real queda oculto pero operable con teclado */
.opcion-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.opcion {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-height: 56px;
    margin: 0 0 10px;
    padding: 14px 16px;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
    color: #333;
    background: #fff;
    border: 2px solid #d4d4d4;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.opcion:hover { border-color: #9D142E; }
/* El hueco del icono se reserva siempre para que el texto no se desplace al seleccionar */
.opcion-check { flex: 0 0 22px; margin: 4px 12px 0 0; visibility: hidden; }
.opcion-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.opcion-input:checked + .opcion {
    color: #fff;
    background: #9D142E;
    border-color: #9D142E;
}
.opcion-input:checked + .opcion .opcion-check { visibility: visible; }

.pregunta.tiene-error legend { color: #a94442; }
.pregunta.tiene-error .opcion { border-color: #a94442; }

.acciones { margin-top: 8px; }

.resumen-respuestas li { padding: 8px 0; border-bottom: 1px solid #e5e5e5; }
.resumen-respuestas li:last-child { border-bottom: 0; }
.resumen-pregunta { display: block; color: #555; }
.resumen-respuesta { color: #9D142E; }

/* --- Justificante ----------------------------------------------------- */
.justificante-titulo { font-size: 22px; margin-top: 28px; }
.justificante li { padding: 12px 0; border-bottom: 1px solid #e5e5e5; }
.justificante-pregunta { display: block; color: #555; }
.justificante-respuesta { font-size: 18px; color: #9D142E; }

/* --- Resultados ------------------------------------------------------- */
.kpi {
    margin-bottom: 12px;
    padding: 16px;
    text-align: center;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}
.kpi-valor {
    display: block;
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 34px;
    line-height: 1.2;
    color: #9D142E;
}
.kpi-etiqueta { color: #555; }

.grafica-tarjeta {
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}
/* Tarjetas de altura desigual sin huecos: cada fila del grid toma la altura de su tarjeta más alta */
.filas-iguales { display: flex; flex-wrap: wrap; }
.filas-iguales:before, .filas-iguales:after { display: none; }
.filas-iguales > [class*="col-"] { float: none; display: flex; }
.filas-iguales .grafica-tarjeta { flex: 1 1 auto; width: 100%; }
.grafica-titulo { margin: 0 0 12px; font-size: 17px; line-height: 1.35; }
.grafica-donut { position: relative; height: 300px; }
.grafica-barras { position: relative; height: 240px; }
.sin-datos { margin: 12px 0; }

.tabla-resultados th, .tabla-resultados td { vertical-align: middle; }
.tabla-resultados { margin-bottom: 24px; }
.tabla-resultados caption { padding: 8px 0; font-size: 16px; color: #333; }

/* Leyendas HTML de las gráficas (los textos pueden ser largos y ocupar varias líneas) */
.leyenda { margin: 12px 0 0; }
.leyenda li { display: flex; align-items: flex-start; margin-bottom: 6px; }
.leyenda-color { flex: 0 0 14px; width: 14px; height: 14px; margin: 3px 8px 0 0; border-radius: 2px; }
.leyenda-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.leyenda-horizontal { display: flex; flex-wrap: wrap; }
.leyenda-horizontal li { margin-right: 20px; }

/* --- Modal ------------------------------------------------------------ */
.modal-title { font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* --- Móvil ------------------------------------------------------------ */
@media (max-width: 767px) {
    .encuesta-wrap { padding: 10px; }
    .encuesta-card { padding: 20px 16px; }
    .encuesta-titulo { font-size: 24px; }
    .cabecera-logo img { width: 140px; }
    .estado-icono { font-size: 26px; margin-right: 12px; }
}