/* ============================================================
   Evaluaciones — diseño de captura fiel a las hojas de Excel:
   la categoría (área / rasgo) va a la izquierda abarcando todas
   sus preguntas, y las preguntas a la derecha.
   Usado por: Evaluar servicio y Evaluación del Personal.
   ============================================================ */

.eval-tabla {
    --w-area: 190px;
    --w-eval: 300px;
    border: 1px solid #b5b5c3;
    background: #fff;
}

.eval-head-bar {
    background: #a1a5b7;
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: .4rem;
    letter-spacing: .3px;
}

.eval-legend {
    background: #fff;
    border-bottom: 1px solid #b5b5c3;
    padding: .5rem .75rem;
    font-size: .85rem;
}

.eval-head-cols {
    display: flex;
    background: #a1a5b7;
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
}

    .eval-head-cols > div {
        padding: .4rem;
        text-align: center;
        border-right: 1px solid #fff;
    }

        .eval-head-cols > div:last-child {
            border-right: 0;
        }

.eval-area-row {
    display: flex;
    border-top: 1px solid #b5b5c3;
}

.eval-area-cell {
    width: var(--w-area);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .5rem;
    font-weight: 700;
    color: #3f4254;
    background: #f9f9f9;
    border-right: 1px solid #b5b5c3;
}

.eval-pregs {
    flex-grow: 1;
    min-width: 0;
}

.eval-preg-row {
    display: flex;
    align-items: stretch;
}

    .eval-preg-row + .eval-preg-row {
        border-top: 1px solid #e4e6ef;
    }

.eval-preg-texto {
    flex-grow: 1;
    min-width: 0;
    padding: .5rem .75rem;
    border-right: 1px solid #b5b5c3;
    font-size: .9rem;
}

.eval-preg-opts {
    width: var(--w-eval);
    flex-shrink: 0;
    padding: .25rem .4rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: .25rem;
}

.eval-preg-row.is-answered .eval-preg-texto {
    background: #f7fdf9;
}

/* ---- Iconos de evaluación (mismo control en ambas pantallas) ---- */

.eval-face-emoji-head {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 2px;
}

.eval-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .4;
    transition: opacity .15s ease, transform .15s ease;
    user-select: none;
    margin: 0;
}

    .eval-face input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .eval-face .eval-face-emoji {
        font-size: 2.1rem;
        line-height: 1;
        filter: grayscale(70%);
        transition: filter .15s ease, transform .15s ease;
    }

    .eval-face:hover {
        opacity: .8;
    }

        .eval-face:hover .eval-face-emoji {
            transform: scale(1.12);
        }

    .eval-face.is-selected,
    .eval-face:has(input:checked) {
        opacity: 1;
    }

        .eval-face.is-selected .eval-face-emoji,
        .eval-face:has(input:checked) .eval-face-emoji {
            filter: grayscale(0);
            transform: scale(1.3);
        }

/* Dentro de la tabla estilo Excel los iconos van más compactos. */
.eval-preg-opts .eval-face .eval-face-emoji {
    font-size: 1.5rem;
}

.eval-preg-opts .eval-face.is-selected .eval-face-emoji,
.eval-preg-opts .eval-face:has(input:checked) .eval-face-emoji {
    transform: scale(1.2);
}

@media (max-width: 991px) {
    .eval-tabla {
        --w-area: 120px;
        --w-eval: 190px;
    }

    .eval-preg-opts .eval-face .eval-face-emoji {
        font-size: 1.25rem;
    }
}