/* Estilos para procesos estancados */
.destacado-estancado {
    background-color: #ff9800 !important;
    color           : white !important;
    animation       : pulso-estancado 2s infinite;
    box-shadow      : 0 0 10px rgba(255, 152, 0, 0.5);
}

@keyframes pulso-estancado {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.deshabilitado {
    opacity       : 0.3 !important;
    cursor        : not-allowed !important;
    pointer-events: none !important;
}

/* Mejorar la visualización de las barras de progreso estancadas */
.bg-warning.progress-bar {
    background: linear-gradient(45deg, #ff9800, #ffc107) !important;
}

/* Tooltip mejorado para iconos estancados */
.destacado-estancado:hover::after {
    content      : attr(title);
    position     : absolute;
    background   : #333;
    color        : white;
    padding      : 5px 10px;
    border-radius: 4px;
    font-size    : 12px;
    white-space  : nowrap;
    z-index      : 1000;
    top          : -35px;
    left         : 50%;
    transform    : translateX(-50%);
}

/* Estilos para validación de límite de caracteres */
.textarea-limite-alcanzado {
    border    : 2px solid #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.textarea-limite-cerca {
    border    : 2px solid #ffc107 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

/* Animación sutil para el mensaje de límite */
#mensajeLimiteReglas {
    animation: slideIn 0.3s ease-in-out;
}

@keyframes slideIn {
    from {
        opacity  : 0;
        transform: translateY(-10px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

/* Animación shake para feedback visual */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Estilos para el botón de configuración */
#btnConfigPrompt {
    transition: all 0.3s ease;
    border    : 2px solid #6c757d;
}

#btnConfigPrompt:hover {
    background-color: #6c757d;
    color           : white;
    border-color    : #6c757d;
    transform       : rotate(90deg);
}

#btnConfigPrompt:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}