/* Estilos personalizados */
.translucent {
    background     : rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.codigo-input {
    width        : 50px;
    height       : 50px;
    text-align   : center;
    margin       : 0 5px;
    border       : 2px solid #ddd;
    border-radius: 8px;
    font-size    : 18px;
    font-weight  : bold;
}

.codigo-input:focus {
    border-color: #007bff;
    box-shadow  : 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.modal-xl .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Estilos específicos para el modal de editar texto */
#modalEditarTexto .modal-dialog {
    max-height : 90vh;
    margin     : 5vh auto;
    display    : flex;
    align-items: center;
}

#modalEditarTexto .modal-content {
    max-height    : 90vh;
    display       : flex;
    flex-direction: column;
}

#modalEditarTexto .modal-body {
    flex      : 1;
    overflow-y: auto;
    max-height: calc(90vh - 120px);
    /* Restamos espacio para header y footer */
}

#editorTexto {
    min-height    : 400px;
    /* font-family: 'Courier New', monospace; */
    font-size     : 14px;
    line-height   : 1.5;
    white-space   : pre-wrap;
    resize        : vertical;
}

.btn-group-actions {
    gap: 8px;
}

.progress-container {
    transition: all 0.3s ease;
}

.acciones-documento {
    border-top      : 1px solid #e9ecef;
    padding-top     : 10px;
    background-color: #f8f9fa;
    border-radius   : 0 0 8px 8px;
    margin-top      : 8px;
}

.documento-completado {
    border          : 2px solid #28a745;
    border-radius   : 8px;
    padding         : 10px;
    background-color: #f8fff9;
}

/* Estilos para los iconos de acción */
.iconos-accion {
    display       : flex;
    gap           : 6px;
    align-items   : center;
    flex-direction: row;
}

.archivo-pesado {
    border      : 3px solid !important;
    border-image: linear-gradient(45deg, #8B4513, #D2691E, #CD853F, #F4A460) 1 !important;
    background  : linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(210, 105, 30, 0.1)) !important;
    box-shadow  : 0 0 15px rgba(139, 69, 19, 0.3) !important;
    animation   : pulseWarning 2s infinite alternate !important;
}

@keyframes pulseWarning {
    from {
        box-shadow: 0 0 15px rgba(139, 69, 19, 0.3);
    }

    to {
        box-shadow: 0 0 25px rgba(139, 69, 19, 0.5);
    }
}

.tamano-archivo {
    font-size: 0.85rem;
    color    : #6c757d;
}

.tamano-final {
    font-weight: 600;
    color      : #495057;
}

.tamano-pesado {
    color      : #8B4513 !important;
    font-weight: bold !important;
}

.archivo-pesado {
    border      : 3px solid !important;
    border-image: linear-gradient(45deg, #8B4513, #D2691E, #CD853F, #F4A460) 1 !important;
    background  : linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(210, 105, 30, 0.1)) !important;
    box-shadow  : 0 0 15px rgba(139, 69, 19, 0.3) !important;
    animation   : pulseWarning 2s infinite alternate !important;
}

@keyframes pulseWarning {
    from {
        box-shadow: 0 0 15px rgba(139, 69, 19, 0.3);
    }

    to {
        box-shadow: 0 0 25px rgba(139, 69, 19, 0.5);
    }
}

.tamano-archivo {
    font-size: 0.85rem;
    color    : #6c757d;
}

.tamano-final {
    font-weight: 600;
    color      : #495057;
}

.tamano-pesado {
    color      : #8B4513 !important;
    font-weight: bold !important;
}

/* Estilos para los iconos de acción */
.icono-accion {
    width          : 35px;
    height         : 35px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 0 2px;
    cursor         : pointer;
    transition     : all 0.3s ease;
    font-size      : 14px;
}

/* Estilo específico para el botón de reprocesar */
.icono-reprocesar {
    background: linear-gradient(135deg, #ff8c00, #ff7f00, #ff6600) !important;
    color     : white !important;
    border    : 2px solid #ff6600 !important;
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
}

.icono-reprocesar:hover {
    background: linear-gradient(135deg, #ff7f00, #ff6600, #ff5500) !important;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.5) !important;
    transform : translateY(-2px) !important;
}

.icono-reprocesar.habilitado {
    cursor : pointer !important;
    opacity: 1 !important;
}

.icono-reprocesar:not(.habilitado) {
    opacity     : 0.4 !important;
    cursor      : not-allowed !important;
    background  : #ccc !important;
    border-color: #999 !important;
    box-shadow  : none !important;
}

.icono-reprocesar.error {
    background  : linear-gradient(135deg, #dc3545, #c82333) !important;
    border-color: #dc3545 !important;
    box-shadow  : 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

/* Estilos para otros iconos de acción */
.icono-descargar {
    background: linear-gradient(135deg, #28a745, #20c997);
    color     : white;
    border    : 2px solid #28a745;
}

.icono-descargar:hover {
    background: linear-gradient(135deg, #218838, #1a9e78);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    transform : translateY(-2px);
}

.icono-editar {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color     : white;
    border    : 2px solid #007bff;
}

.icono-editar:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    transform : translateY(-2px);
}

.icono-accion:not(.habilitado) {
    opacity     : 0.4;
    cursor      : not-allowed;
    background  : #ccc !important;
    border-color: #999 !important;
}

.icono-accion.error {
    background  : linear-gradient(135deg, #dc3545, #c82333) !important;
    border-color: #dc3545 !important;
}


/* 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 {
    min-width : 52px;
    transition: all 0.3s ease;
    border    : 2px solid rgba(108, 117, 125, 0.3);
}

#btnConfigPrompt:hover {
    background-color: #6c757d;
    border-color    : #6c757d;
    color           : white;
    transform       : scale(1.05);
}

#btnConfigPrompt:active {
    transform: scale(0.98);
}

/* Asegurar que los botones tengan la misma altura */
.btn-group-custom .btn {
    height: 58px;
}