/******************
    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
*/
/* ========================================================= */
/* 1. AJUSTES GLOBALES Y CONTENEDORES DE LA ENCUESTA */
/* ========================================================= */

/* Fondo de la página: Gris muy claro para contraste */
body {
    background-color: #f8f8f8;
}

/* Contenedor de la encuesta: Aspecto de 'papel' */
.survey-content {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    /* Sombra elegante y sutil */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Contenedor principal de cada pregunta (el panel con efecto 3D) */
.survey-content .question-container {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    /* Efecto 3D/Elevado */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    padding: 25px 30px;
    margin-bottom: 30px;
}


/* ========================================================= */
/* 2. TÍTULO DEL GRUPO (F-SA-01...) - Fondo Naranja/Negro, Texto Centrado */
/* ========================================================= */

.group-title {
    /* Fondo Negro Sólido */
    background-color: #ff8508  !important;
    /* Letras Blancas */
    color: white !important;
    
    padding: 15px 25px;
    border-radius: 6px;
    font-size: 1.8em;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 20px;
    /* Alineación al centro */
    text-align: center;
    
    /* Asegurar que use el 100% del ancho del contenedor */
    width: 100%;
    /* Eliminar cualquier margen lateral que lo impida */
    margin-left: 0;
    margin-right: 0;
}

/* ========================================================= */
/* 3. ESTILO Y ALINEACIÓN DEL TEXTO DE PREGUNTA */
/* ========================================================= */

/* Texto en general más oscuro */
.ls-label-question, 
.ls-answers td,
.ls-answers th,
.ls-answers label {
    color: #333333 !important;
    font-weight: 400; 
}

/* Contenedor de texto: Alinea el asterisco y texto */
.question-text {
    display: inline-flex;
    align-items: flex-start;
    margin: 0; 
    padding: 0;
}

/* Asterisco (Rojo) */
.asterisk {
    color: #e74c3c !important; 
    font-size: 1.2em; 
    padding-right: 2px !important; 
    margin-right: 2px;
}

/* Texto de la pregunta (LIDERAZGO) */
.ls-label-question {
    font-size: 1.2em; /* Ligeramente más grande */
    font-weight: 600; /* En negrita para destacar el tema */
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Mensaje de ayuda (e.g., Por favor seleccione 7 respuestas) */
.ls-questionhelp {
    color: #666666; /* Gris oscuro para ser sutil */
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 10px;
}


/* ========================================================= */
/* 4. ESTILO DE LA MATRIZ (Limpieza, Bordes y Centrado) */
/* ========================================================= */
/* Contenedor de la matriz: Sombra sutil y ancho limitado */
.ls-table-wrapper {
    border: 0px solid #e0e0e0 !important;
    border-radius: 8px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden; 
    width: 100%;
    
    /* Importante: Ajustamos el borde del contenedor. La matriz no debe tener bordes externos */
    border-collapse: collapse; 
}

/* Estilo del Encabezado (MB, B, R, M, P) */
.ls-answers thead {
    background-color: #ff8508 ; /* FONDO NEGRO */
    color: white !important; /* LETRAS BLANCAS */
    font-weight: 600;
}

/* Celdas del encabezado (MB, B, R, M, P) */
.ls-answers th.answer-text {
    text-align: center;
    padding: 12px 8px;
    color: white !important; /* LETRAS BLANCAS */
    /* Aseguramos que las celdas de encabezado no tengan bordes laterales */
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Primera celda vacía del encabezado (donde no hay texto) */
.ls-answers thead tr th:first-child,
.ls-answers thead tr td:first-child {
    background-color: #ff8508  !important; /* Asegurar que la esquina superior izquierda también sea negra */
    border: none !important;
}

/* Quitar bordes predeterminados de la tabla y celdas */
.ls-answers.table,
.ls-answers.table td,
.ls-answers.table th {
    border: none !important;
}

/* Aplicar bordes delgados solo dentro del cuerpo de la matriz */
.ls-answers td, 
.ls-answers th.answertext {
    border-right: 1px solid #f0f0f0 !important; 
    padding: 12px 8px;
}
.ls-answers tr:not(:last-child) td {
    border-bottom: 1px solid #f0f0f0 !important; 
}

/* Bordes limpios y delgados en las celdas */
.ls-answers td, 
.ls-answers th {
    border-right: 1px solid #f0f0f0 !important; 
}
.ls-answers tr:not(:last-child) td {
    border-bottom: 1px solid #f0f0f0 !important; 
}

/* Filas Alternadas y Hover */
.ls-answers tr.ls-even {
    background-color: #ffffff;
}
.ls-answers tr.ls-odd {
    background-color: #fafafa;
}
.ls-answers tr:hover {
    background-color: #eaf6ff !important;
}
/* El texto de las subpreguntas debe ser negro */
.ls-answers td,
.ls-answers th.answertext { /* <- Asegurar que las subpreguntas sigan en negro */
    color: #333333 !important; 
}
/* ========================================================= */
/* 5. ESTILO DE BOTONES DE OPCIÓN (RADIO BUTTONS) */
/* ========================================================= */

.radio-item input[type="radio"] {
    transform: scale(1.3);
    border: 2px solid #cccccc; 
    transition: all 0.2s;
}
.radio-item input[type="radio"]:checked {
    border-color: #007bff; /* Azul de acento (cambiar a Naranja si prefieres) */
    background-color: #007bff; 
}
.radio-item input[type="radio"]:hover {
    cursor: pointer;
    border-color: #007bff;
}

/* Estilo para el título de la matriz insertado directamente en el TWIG */
.matriz-titulo-twig {
    /* Mantenemos un estilo similar al encabezado de la matriz */
    background-color: #000000; 
    color: white; 
    font-size: 1.2em;
    font-weight: 600;
    text-align: left;
    padding: 10px 15px;
    margin-bottom: 0px; 
    width: 100%; 
    
    /* Para que se alinee con los bordes redondeados del contenedor de la matriz */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}