/* Definir el nuevo color base */
:root {
    --btn-light-bg: #e2e3e5; /* Color de fondo m�s oscuro que el original (#f8f9fa) */
    --btn-light-border: #d3d4d6; /* Color de borde m�s oscuro */
    --btn-light-hover-bg: #d6d7d9; /* Color de fondo al hacer hover */
    --btn-light-hover-border: #c8c9cb; /* Color de borde al hacer hover */
    --btn-light-active-bg: #c8c9cb; /* Color de fondo al hacer click */
    --btn-light-active-border: #babbbc; /* Color de borde al hacer click */
    --btn-light-focus-shadow: rgba(108, 117, 125, 0.5); /* Sombra del bot�n en foco */
}

/* Modificar el color de fondo, borde y texto de btn-light */
.btn-light {
    background-color: var(--btn-light-bg) !important; /* Cambiar color de fondo */
    border-color: var(--btn-light-border) !important; /* Cambiar color de borde */
    color: #212529 !important; /* Cambiar color de texto */
}

/* Modificar el color de btn-light en estado hover */
.btn-light:hover {
    background-color: var(--btn-light-hover-bg) !important; /* Color de fondo en hover */
    border-color: var(--btn-light-hover-border) !important; /* Color de borde en hover */
    color: #212529 !important; /* Mantener color de texto en hover */
}

/* Modificar el color de btn-light en estado activo */
.btn-light:active, .btn-light.active {
    background-color: var(--btn-light-active-bg) !important; /* Color de fondo en estado activo */
    border-color: var(--btn-light-active-border) !important; /* Color de borde en estado activo */
    color: #212529 !important; /* Mantener color de texto */
}

/* Modificar el color de btn-light en estado focus */
.btn-light:focus, .btn-light.focus {
    background-color: var(--btn-light-bg) !important; /* Mantener color de fondo en focus */
    border-color: var(--btn-light-border) !important; /* Mantener color de borde en focus */
    box-shadow: 0 0 0 0.2rem var(--btn-light-focus-shadow) !important; /* Sombra en foco */
}

/* Variantes de btn-light-outline */
.btn-outline-light {
    color: var(--btn-light-bg) !important; /* Cambiar color de texto */
    border-color: var(--btn-light-border) !important; /* Cambiar color de borde */
}

.btn-outline-light:hover {
    background-color: var(--btn-light-hover-bg) !important; /* Fondo en hover */
    border-color: var(--btn-light-hover-border) !important; /* Borde en hover */
    color: #212529 !important; /* Cambiar color de texto en hover */
}

.btn-outline-light:focus, .btn-outline-light.focus {
    background-color: var(--btn-light-bg) !important; /* Fondo en focus */
    border-color: var(--btn-light-border) !important; /* Borde en focus */
    box-shadow: 0 0 0 0.2rem var(--btn-light-focus-shadow) !important; /* Sombra en focus */
    color: #212529 !important; /* Color de texto */
}

.btn-outline-light:active, .btn-outline-light.active {
    background-color: var(--btn-light-active-bg) !important; /* Fondo en estado activo */
    border-color: var(--btn-light-active-border) !important; /* Borde en estado activo */
    color: #212529 !important; /* Color de texto */
}

/* Deshabilitar los botones light */
.btn-light.disabled, .btn-light:disabled {
    background-color: var(--btn-light-bg) !important; /* Fondo deshabilitado */
    border-color: var(--btn-light-border) !important; /* Borde deshabilitado */
}

.btn-outline-light.disabled, .btn-outline-light:disabled {
    background-color: transparent !important; /* Fondo transparente */
    border-color: var(--btn-light-border) !important; /* Borde deshabilitado */
    color: var(--btn-light-border) !important; /* Texto deshabilitado */
}




.description {
    opacity: 0.8;
    font-size: 0.8em;
}

.corp-head {
    display: inline-block;
    width: 1em;  /* Tama�o proporcional al texto */
    height: 1em; /* Tama�o proporcional al texto */
    background-color: currentColor; /* El color ser� heredado del contenedor */
    -webkit-mask-image: url('/images/corp_head.svg'); /* Usar el SVG como m�scara */
    mask-image: url('/images/corp_head.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    vertical-align: middle; /* Para alinear como FontAwesome */
    margin-bottom: 5px;
}

empty {
    font-size: 0.8em !important;
    opacity: 0.8 !important;
}

optionTag {
    font-size: 0.8em !important;
    opacity: 0.8 !important;
    float: right;
    margin-left: 10px;
}

required {
    font-weight: bold;
    color: #dc3545;
}

required::after {
    content: '*';
}

/* INTERNAL ASYNCHRONOUS LOADING BAR */
#loading-progress-bar {
    width: 0;
    height: 3px !important;
    background-color: #D3A645;
    visibility: hidden;
    margin-top: 0px;
    z-index: 9999;
    position: relative;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

#loading-page-blur {
    display: flex;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 9999;
    background: rgba(244,246,249, 0.5);
    backdrop-filter: blur(5px);
    transition: all 1s ease-in-out;
}

.fakeLink {
    cursor: pointer !important;
}


.nav-link {
    margin-bottom: 5px;
}

*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

input:focus,
button:focus,
textarea:focus,
a:focus, a:link:focus {
    box-shadow: none !important;
}

navigation_id { /* Se usa como metatag solo */
    display: none !important;
}

/* Selecciona todos los elementos que tengan onclick con la funci�n manualLink */
[onclick^="manualLink("] {
    cursor: pointer;
}

/* Estilo base para las cards con la clase manualLink */
.card[onclick^="manualLink("] {
    cursor: pointer;
    transition: all 0.3s ease; /* Transici�n suave */
}

/* Efecto hover cuando la card tiene manualLink */
.card[onclick^="manualLink("]:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
    background-color: #f1f3f5; /*  Ligero cambio de fondo (tono claro)  */
    transform: translateY(-2px); /* Leve desplazamiento hacia arriba */
}

footer {
    margin-top: 20px;
    text-align: right;
    font-size: 0.8em;
}

footer {
    position: relative; /* Mantener el footer dentro del flujo del documento */
    bottom: 0; /* Asegurar que est� alineado en la parte inferior */
    width: 100%; /* Asegurar que ocupe todo el ancho de la p�gina */
    background-color: #f8f9fa; /* Color de fondo */
    padding: 10px 0; /* Espaciado interno */
    margin-top: auto; /* Empujar el footer al final de su contenedor */
    z-index: 1; /* Asegurar que el footer est� encima de cualquier contenido oculto */
}


#page_content {
    margin-left: 0;
}

@media (min-width: 768px) {
    #page_content {
        margin-left: 280px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
}

@media (max-width: 768px) { /* VERSION TELEFONO */
    #page_content {
      margin-top: 120px; /* Ajustar seg�n el tama�o del navbar */
    }
    
    #user_button {
        display: none !important;
    }
    
  }
  
.spinner-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
}
.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--btn-primary-bg, #007bff); /* color primario */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1.5s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner-text {
    margin-top: 10px;
    font-size: 1.5rem;
    /*color: var(--btn-primary-bg, #007bff);  color primario */
    max-width: 90%;
}

/* Eliminar box-shadow de todos los inputs y selects en cualquier estado */
input, select, textarea, button {
    box-shadow: none !important;
}

/* Eliminar box-shadow específicamente en el estado de foco */
input:focus, select:focus, textarea:focus, button:focus {
    box-shadow: none !important;
    outline: none !important; /* También elimina el outline si es necesario */
}
/* Eliminar box-shadow específicamente en el estado de foco */
input:active, select:active, textarea:active, button:active {
    box-shadow: none !important;
    outline: none !important; /* También elimina el outline si es necesario */
}