:root {
    --bs-blue: #0C2340;
    --bs-fondo: #0C2340;
    --bs-fondo-claro: #dee2e6;
    --bs-primary: #00CC4E;
    --bs-secondary: #0032F0;
}

.bg-azul {
    background-color: var(--bs-blue);    
}

.bg-claro {
    background-color: var(--bs-fondo-claro);
}

.bg-verde {
    background-color: #009340;
}

.btn-secondary {
    background-color: #0432F0;
}

.text-gris {
    color:#777;
}

label {
    color: var(--bs-blue);
}

.form-label {
    font-weight:bold;
    font-size:18px;
}

.custom-form-label {
    color: #fff;
}

.requerido {
    border: 1px solid #fe6a01;
}

.iq-breadcrumb {
    background-color: transparent !important;
}

.transparente {
    background-color:#00000000;
}

.card-header {
    /*background-color: #0c234000;*/
    border-bottom:none;
    padding: 5px;
}

h2,h3,h4 {
    color: var(--bs-blue);
}


table.custom-table {
    border-radius: 10px;
}

table.custom-table thead th {
    color: var(--bs-white);
    background: var(--bs-fondo);    
}

table.custom-table tbody td {
    
    color: var(--bs-white);
    background: var(--bs-gray-700);
    border-bottom: 0.625em solid var(--bs-body-bg);
}

table.table-border thead tr {
    background: var(--bs-gray-900);
}

table.table-border tfoot tr td {
    padding: 1rem;
    border-top: 1px solid rgba(var(--bs-black-rgb), 0.1);
}

.modal-header {
    padding: 10px !important;
    border-bottom: none !important;
}

.modal-content {
    background: #0628a1;
}

.modal-content .btn-close {
    position: initial;
    color: #fff;
    padding-right: 45px;
}
.modal-content .modal-body {
     padding: 10px; 
}

/*.form-control {
    background-color: var(--bs-fondo-claro);
}*/

.dropzone {
    border: 1px solid #000 !important;
    background-color: var(--bs-blue) !important;    
}

    .dropzone .dz-custom-message {
        text-align: center;
        color: var(--bs-primary);
    }

    .dropzone .dz-preview {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin: 10px;
        min-height: 100px;
        max-width:100%;
        width:94% !important;
    }

    .dropzone .dz-preview .dz-image {
        width: 100% !important;
    }

    .dropzone .dz-preview .dz-progress {
        top: 66% !important;
    }

.dropzone .dz-remove {
    color:#f00;
}


.mi-thumb {
    display: inline-block;
}

.video-wrapper {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 34px;
    z-index: 2;
    transition: all 0.2s ease;
}

.video-poster:hover .video-play-icon {
    background: rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(1.08);
}

.profile-user-info {
    background: #01737b;
    border-color: #fff;
}

.custom-accordion-btn::after {
    display: none !important;
}

/* Transición suave para el icono de Font Awesome */
.custom-accordion-btn .accordion-icon {
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg); /* Posición base: apunta hacia abajo */
}

/* Rota el icono 180 grados (apunta hacia arriba) cuando el acordeón se ABRE */
/* Es decir, cuando NO tiene la clase .collapsed */
.custom-accordion-btn:not(.collapsed) .accordion-icon {
    transform: rotate(-180deg);
}

input[type="file"]::file-selector-button {
    background: #0432F0;
    color: #fff;
    border: 0;
   /* padding: 8px 14px;*/
    /*border-radius: 6px;*/
    cursor: pointer;
}

input[type="file"]:hover::file-selector-button {
    background: #1d2127 !important;    
}

input[type="file"]:hover::-webkit-file-upload-button {
    background: #1d2127;
}