/* =====================================================
   🔵 1. GRID SOLO PARA HTML PRINCIPAL
   (debe estar dentro de .survey-grid-container)
===================================================== */
.survey-grid-container,
.survey-grid-container [data-toggle="buttons"].btn-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px !important;
    width: 100%;
    padding: 10px 0;
}

/* Botones estilo tarjeta (HTML principal) */
.survey-grid-container .btn,
.survey-grid-container [data-toggle="buttons"].btn-group > .btn {
    flex: none !important;
    margin: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #38503f !important;

    padding: 10px 5px;
    font-size: 0.9rem;
    min-height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;

    background-color: white;
    color: #38503f !important;

    transition: all 0.2s ease;
}

/* Hover */
.survey-grid-container .btn:hover,
.survey-grid-container [data-toggle="buttons"].btn-group > .btn:hover {
    background-color: #88d19d !important;
    color: white !important;
    cursor: pointer;
}

/* Activo */
.survey-grid-container .btn.active,
.survey-grid-container [data-toggle="buttons"].btn-group > .btn.active {
    background-color: #88d19d !important;
    border-color: #88d19d !important;
    color: white !important;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}


/* =====================================================
   🟢 2. BOTONES HTML (question_*) → MÁS GRANDES
===================================================== */
.optionQuestion[class*="question_"] {
    padding: 12px 18px !important;     /* más grandes */
    font-size: 17px !important;
    min-height: 50px !important;

    border-radius: 10px !important;
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 🔹 MÁS CONTRASTE */
    background-color: #e6f4ea !important;   /* verde suave */
    border: 2px solid #2f6f4f !important;   /* verde más oscuro */
    color: #1e4d36 !important;

    transition: all 0.2s ease;
}

/* 🔹 Hover más marcado */
.optionQuestion[class*="question_"]:hover {
    background-color: #88d19d !important;
    border-color: #2f6f4f !important;
    color: white !important;
}

/* 🔹 Activo (seleccionado) más fuerte */
.optionQuestion[class*="question_"].active {
    background-color: #2f6f4f !important;
    border-color: #2f6f4f !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 🔹 Íconos más visibles */
.optionQuestion[class*="question_"] i {
    font-size: 15px !important;
    margin-left: 6px;
}

/* =====================================================
   🔴 3. TABLA (LO QUE GENERA EL JS)
===================================================== */

/* Quitar grid dentro de tabla */
table [data-toggle="buttons"].btn-group {
    display: inline-flex !important;
    gap: 2px;
    padding: 0;
}

/* Botones compactos */
table .btn-group .btn {
    padding: 2px 6px !important;
    font-size: 11px !important;
    min-height: auto !important;
    border-radius: 3px !important;
    line-height: 1.2;
}

/* Íconos pequeños */
table .btn-group .btn i {
    font-size: 9px;
    margin-left: 2px;
}

/* Celdas compactas */
table td.celValue {
    padding: 4px !important;
}


/* =====================================================
   🟡 4. LIMPIEZA BOOTSTRAP
===================================================== */

/* Ocultar radios */
[data-toggle="buttons"].btn-group > .btn input {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

/* Bordes */
.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: 6px !important;
}


/* =====================================================
   📱 5. RESPONSIVE
===================================================== */
@media (max-width: 768px) {

    .survey-grid-container,
    .survey-grid-container [data-toggle="buttons"].btn-group {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 6px !important;
    }

    .survey-grid-container .btn {
        font-size: 0.85rem;
        min-height: 38px;
        padding: 6px;
    }

    /* Tabla sigue compacta */
    table .btn-group .btn {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }
}

/* =====================================================
   🟢 COLORES PARA SI / NO
===================================================== */

/* SI → VERDE */
.optionQuestion[data-val="Si"] {
    border: 2px solid #28a745 !important;
    color: #28a745 !important;
    background-color: #e9f7ef !important;
}

.optionQuestion[data-val="Si"].active {
    background-color: #28a745 !important;
    color: white !important;
}

/* NO → ROJO */
.optionQuestion[data-val="No"] {
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    background-color: #fdecea !important;
}

.optionQuestion[data-val="No"].active {
    background-color: #dc3545 !important;
    color: white !important;
}


 /* =====================================================
   🚦 COLORES SEMÁFORO (E / B / R / NA)
===================================================== */

/* E → VERDE */
.optionQuestion[data-val="E"] {
    border: 2px solid #28a745 !important;
    color: #28a745 !important;
    background-color: #e9f7ef !important;
}

.optionQuestion[data-val="E"].active {
    background-color: #28a745 !important;
    color: white !important;
}

/* B → AZUL (o amarillo si prefieres semáforo real) */
.optionQuestion[data-val="B"] {
    border: 2px solid #007bff !important;
    color: #007bff !important;
    background-color: #eaf3ff !important;
}

.optionQuestion[data-val="B"].active {
    background-color: #007bff !important;
    color: white !important;
}

/* R → ROJO */
.optionQuestion[data-val="R"] {
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    background-color: #fdecea !important;
}

.optionQuestion[data-val="R"].active {
    background-color: #dc3545 !important;
    color: white !important;
}

/* NA → GRIS */
.optionQuestion[data-val="NA"] {
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
    background-color: #f1f1f1 !important;
}

.optionQuestion[data-val="NA"].active {
    background-color: #6c757d !important;
    color: white !important;
}