/* User custom CSS
   ---------------
   In this file you can add your own custom CSS
   It will be loaded last, so you can override any other property.
   Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

.table-bordered > thead > tr > th {
    border: 1px solid #dadada;
}
.table-bordered > thead > tr > td {
    border: 1px solid #dadada;
}

.custom-header-index {
    z-index: 9999;
    padding: 0;
}

body { margin-top: 50px; }

@media only screen and (max-width: 800px) {
    body { margin-top: 40px; }
}

@media only screen and (max-width: 640px) {
    body { margin-top: 20px; }
}

@media only screen and (max-width: 380px) {
    body { margin-top: 0px; }
}

/* 1. Fondo exterior descansado (sin blanco puro) */
body,
.outerframe,
#outerframeContainer,
.survey-container {
    background-color: #e9eef4 !important;
}

/* 2. Cajas de preguntas en tono mate con acento azul SERNAC */
.question-container {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-top: 3px solid #0f69b4 !important; /* Azul Gobierno/SERNAC */
    border-radius: 6px !important;
    padding: 22px !important;
    margin-bottom: 25px !important;
    box-shadow: none !important;
}

/* Neutralizar fondos internos de tarjetas y tablas en escritorio */
.question-container .card,
.question-container .card-body,
.question-container [class*="col-"],
.question-container table,
.question-container table.table,
.question-container thead,
.question-container tbody,
.question-container tr,
.question-container td,
.question-container th {
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. Título principal de portada: Jerarquía y bicromía institucional */
.survey-name,
h1.survey-name,
.survey-title {
    color: #0f69b4 !important;            /* Azul institucional */
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    text-align: left !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
    /* Franja institucional Gobierno: Azul a la izquierda, Rojo a la derecha */
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(to right, #0f69b4 60%, #eb3c46 60%) 1 !important;
}

@media only screen and (max-width: 640px) {
    .survey-name,
    h1.survey-name,
    .survey-title {
        font-size: 1.45rem !important;
        line-height: 1.3 !important;
    }
}

/* 4. Enunciados de pregunta: Lectura regular con negritas controladas */
.question-title-container,
.question-text,
.question-text *,
.question-title-container *,
.question-container legend {
    color: #17365d !important;
    font-weight: 400 !important;
}

/* Permitir negritas para resaltar conceptos clave sin fatiga visual */
.question-container strong,
.question-container b {
    color: #17365d !important;
    font-weight: 700 !important;
}

/* Acento rojo Gobierno en asteriscos de campos obligatorios */
.question-container .text-danger,
.question-container .asterisk,
.question-container .mandatory {
    color: #eb3c46 !important;
    font-weight: 700 !important;
}

/* 5. Opciones de respuesta, matrices y textos generales */
.answer-container,
.answer-container label,
.answer-container td,
.answer-container th,
.ls-answers,
.subquestions-list,
.answertext {
    color: #334155 !important;
    font-weight: 400 !important;
}

/* 6. Textos de ayuda: Neutros, sin fondos fosforescentes ni alertas brillantes */
.ls-questionhelp,
.question-help,
.question-help-container,
.help-block,
.ls-questionhelp *,
.question-help * {
    color: #475569 !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* Neutralizar si LimeSurvey envuelve la ayuda en contenedores de alerta */
.question-container .alert,
.question-container .alert-info,
.question-container .well {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #475569 !important;
}

/* Negritas dentro del bloque de ayuda en tono azul formal */
.ls-questionhelp strong,
.ls-questionhelp b,
.question-help strong,
.question-help b {
    color: #17365d !important;
    font-weight: 600 !important;
}

/* 7. Amplitud y espaciado para columnas de matrices (Array) */
@media (min-width: 768px) {
    .question-container table.ls-answers th.answertext,
    .question-container table.ls-answers td.answertext,
    .question-container table.ls-answers .subquestion-text,
    .question-container .ls-answers thead th:first-child,
    .question-container .ls-answers tbody th:first-child {
        width: 42% !important;
        min-width: 260px !important;
        text-align: left !important;
        padding: 12px 16px !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .question-container table.ls-answers td.answer-item,
    .question-container table.ls-answers th.answer-item {
        padding: 10px 6px !important;
        vertical-align: middle !important;
    }
}

/* Espacio interno general en las filas de matrices */
.question-container table.ls-answers tr {
    border-bottom: 1px solid #e2e8f0 !important;
}

.question-container table.ls-answers td,
.question-container table.ls-answers th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 8. Botones de navegación con armonía institucional */
#ls-button-submit,
.btn-primary {
    background-color: #0f69b4 !important;
    border-color: #0f69b4 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

#ls-button-submit:hover,
.btn-primary:hover {
    background-color: #0b4f8a !important;
    border-color: #0b4f8a !important;
}
}