/* ── Scrollbar ────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: #00b1ec transparent;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #00b1ec, #00538a);
    border-radius: 999px;
    border: 2px solid #ebebeb;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #fe6e1e, #ffaa14);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

#resultado-mensaje {
    position: relative;
    overflow: hidden;
}

#resultado-mensaje::before {
    content: 'Interpretación del diagnóstico';
    display: block;
    width: fit-content;
    margin-bottom: 14px;
    padding: 6px 16px;
    border-radius: 999px;
    background: linear-gradient(to right, #fe6e1e, #ffaa14);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(254, 110, 30, .35);
}

#resultado-mensaje::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 140px;
    height: 140px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(0, 177, 236, .18), transparent 70%);
    pointer-events: none;
}

/* ── Validación paso 3 ────────────────────────── */
.error-icono {
    display: none;
    color: #ef4444;
}

.error-icono.visible {
    display: block;
}

.error-mensaje {
    display: none;
    color: #ef4444;
}

.error-mensaje.visible {
    display: flex;
}

.campo-error,
.campo-error:focus {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, .16) !important;
}

.contenedor-error,
.contenedor-error:hover {
    border-color: #fca5a5 !important;
    background-color: #fef2f2 !important;
}

.aviso-error {
    display: flex;
}

#aviso-datos {
    display: none;
}

@keyframes sacudir {

    10%,
    90% {
        transform: translateX(-1px);
    }

    20%,
    80% {
        transform: translateX(2px);
    }

    30%,
    50%,
    70% {
        transform: translateX(-4px);
    }

    40%,
    60% {
        transform: translateX(4px);
    }
}

.sacudir {
    animation: sacudir .45s cubic-bezier(.36, .07, .19, .97) both;
}