body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.header-logo {
    max-height: 30px;
}

@media (max-width: 768px) {
    .header-logo {
        max-height: 20px;
    }
}

/* estilos para el enlace para "cerrar sesión" en desktop */
header a {
    font-size: 1rem;
}

@media (max-width: 768px) {
    header a {
        font-size: 0.9rem;
    }
}

/* ajuste para la alineación del enlace para "cerrar sesión" en mobile */
@media (max-width: 576px) {
    header {
        text-align: center;
    }

    header a {
        display: block;
        margin-top: 10px;
    }
}

/* estilos para el ícono del menú hamburguesa */
.navbar-toggler {
    border-color: white;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* estilos para el submenú que se desplaza del ícono hamburguesa */
/* asegura que el fondo del menú desplegable ocupe todo el ancho en mobile */
.navbar-collapse {
    background-color: #00A0A0 ;
    width: 100%;
    padding: 1rem 0;
}

/*__________________________________________________

Colores:
blanco: #ffffff
verde institucional: #00A0A0
gris topo: #343A40
___________________________________________________*/


/* estilos para alinear el texto de los enlaces */
.nav-link {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* estilos para alinear el ícono del menú hamburguesa */
.navbar-toggler {
    position: relative;
    z-index: 1050;
    margin-left: auto;
    margin-right: 0;
}

/* estilos para eliminar el borde o el contorno del botón al hacer clic */
.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

/* estilo para darle más espacio entre la palabra y el borde del botón del link del menú de navegación */
.nav-link {
    padding: 10px !important;
}

/* estilos para colocar color de fondo al botón del menú hamburguesa que esté activo */
.nav-link.active {
    background-color: #ffffff;
    color: #00A0A0 !important;
    border-radius: 5px;
}

/* estilos para asegurar un diseño limpio en tamaños más grandes */
@media (min-width: 768px) {
    .navbar-collapse {
        background-color: transparent;
        padding: 0;
    }

 /* estilo para evitar que el contenido desplace al botón del menú hamburguesa hacia la izquierda */
    .collapse.navbar-collapse {
        position: relative;
    }

    .navbar-nav {
        flex-direction: row;
        gap: 1rem;
    }
}

.card {
    border-radius: 0.5rem;
}

.card-header {
    font-size: 1.25rem;
}

.btn-primary {
    background-color: #343A40;
    border-color: #343A40;
}

.btn-primary:hover {
    background-color: #0c494399;
    border-color: #0c494399;
}

.btn-primary:active {
    background-color: #0c494399 !important;
    border-color: #0c494399 !important;
}

/* estilos para el botón para descargar el archivo */
.download-url {
    background-color: #00A0A0 !important;
    border-color: #00A0A0 !important;
}

.download-url:hover {
    background-color: #0c494399 !important;
    border-color: #0c494399 !important;
}

footer {
    background-color: #00A0A0;
    color: #ffffff;
}

/* estilos para el ícono que muestra/oculta el password en el form de login */
#togglePassword {
    background-color: #fbf1ff;
    --bs-btn-border-color: #d7e0e7
}

#togglePassword:hover {
    background-color: #adb5bd;
}

/* estilos para el select de Tipo de Consulta*/
.tipoConsulta, .modelType {
    margin-bottom: .1rem !important;
}


select.form-control {
    appearance: auto; /* Forzar la apariencia nativa */
    -moz-appearance: auto; /* Para Firefox */
    -webkit-appearance: auto; /* Para Safari/Chrome */
}

/* estilos para mensaje de ayuda que se muestra junto al label del campo de los foms */
.form-text-help {
    font-size: .75rem;
    color: #8a98a6;
}

/* estilos para los bordes del campo de número de celular */
#mobileNumber {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}


/* estilos del header y del encabezado de los forms */
.bg-primary {
    background-color: #00A0A0 !important;
}

/* estilos del texto marketinero que está en el footer */
.text-primary {
    color: #00a0a0 !important;
    font-size: 0.85rem;
}

/* estilos del texto "derechos reservados" que está en el footer */
.textFooter {
    font-size: 0.75rem;
}


/* estilos del loader */
#loadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.63);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-text {
    margin-top: 10px; /* espacio entre el spinner y el texto */
    font-size: 1.2rem; /* tamaño de la fuente */
}

/* estilos para la tabla que muestra los resultados */
.tableStyle {
    color: #003D3D;
}

.tableThead {
    background-color: #00A0A0;
    color: white;
}

.badge.spanTd {
    background-color: #00A0A0 !important;
    color: white !important;
}


.btnDetails {
    background-color: #00A0A0;
    color: white;
}

.table-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.btn-table-pending, .btn-table-failure {
    background-color: #c6cbcb !important;
    border-color: #c6cbcb !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    th, td {
        font-size: 0.9rem;
    }
}


/* centrar títulos de la tabla */
.tableThead th {
    text-align: center;
    vertical-align: middle; /* Asegura que el texto se alinee verticalmente en el centro */
}

/* centrar información de las filas */
.table tbody td {
    text-align: center;
    vertical-align: middle; /* Asegura el centrado vertical */
}

/* estilos para la modal que muestra los detalles */
.modal-header {
    background-color: #00A0A0;
    color: white;
}

.modal-body {
    color: #003D3D;
}

.btn-modal-footer {
    background-color: #007575;
    color: white;
}

.btn-table-details {
    background-color: #00A0A0;
    color: white;
}

.btnClose {
    background-color: #00A0A0;
    color: white;
}

/* estilos para las "líneas(<hr>)" de los carteles de error */
.hrAlert {
    margin-top: 2px;
}