﻿/*Estilos de la Pagina*/
body {
    background-color:lightgray;
}

.link-manual {
    color: white;
    font-weight:bold;
    text-decoration: none;
}

.bg-consulta1 {
    background-color: #4d556b;
}

.bg-consulta2 {
    background-color: #001a3e;
}

.bg-columna-label {
    background-color: #4d556b;
}

.bg-columna-dato {
    background-color: #c5c7ca;
}

.border-consulta {
    border-color: #c5c7ca !important;
}

.img-consulta {
    color: #c5c7ca;
}

.alert-consulta {
    --bs-alert-color: white;
    --bs-alert-bg: #4d556b;
    --bs-alert-border-color: #4d556b;
}

.bg-body-consulta {
    --bs-bg-opacity: 1;
    --bs-secondary-bg-rgb: 197, 199, 202;
    background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.btn-consulta {
    --bs-btn-color: #fff;
    --bs-btn-bg: #001a3e;
    --bs-btn-border-color: #001a3e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #001a3e;
    --bs-btn-disabled-border-color: #001a3e;
}

.table-consulta {
    --bs-table-color: #fff;
    --bs-table-bg: #001a3e;
    --bs-table-border-color: #4d5154;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: white;
    font-weight: bold;
}

.text-justify {
    text-align:justify;
}

/*Estilos del Loading*/
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: none; /* Hidden by default */
}

.spinner-loader {
    --primary-color: #2980b9;
    --secondary-color: #3498db;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .spinner-loader::before,
    .spinner-loader::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 4px solid transparent;
    }

    .spinner-loader::before {
        width: 100%;
        height: 100%;
        border-top-color: var(--primary-color);
        border-left-color: var(--primary-color);
        animation: spin 1.5s linear infinite;
    }

    .spinner-loader::after {
        width: 70%;
        height: 70%;
        border-bottom-color: var(--secondary-color);
        border-right-color: var(--secondary-color);
        animation: spin 1.2s linear reverse infinite;
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spinner-loader .text {
    position: absolute;
    bottom: -30px;
    font-size: 16px;
    color: var(--primary-color);
    white-space: nowrap;
}



/*Estilo del datepicker*/
.datepicker {
    padding: 0;
}

    .datepicker td, .datepicker th {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.85rem;
    }

.datepicker-days .table-condensed thead tr:nth-child(2), .datepicker-months .table-condensed thead tr:nth-child(2),
.datepicker-years .table-condensed thead tr:nth-child(2), .datepicker-decades .table-condensed thead tr:nth-child(2),
.datepicker-centuries .table-condensed thead tr:nth-child(2) {
    background: linear-gradient(to bottom, #001a3e,#4d556b);
    color: #fff;
}

    .datepicker-days .table-condensed thead tr:nth-child(2) th:hover, .datepicker-months .table-condensed thead tr:nth-child(2) th:hover,
    .datepicker-years .table-condensed thead tr:nth-child(2) th:hover, .datepicker-decades .table-condensed thead tr:nth-child(2) th:hover,
    .datepicker-centuries .table-condensed thead tr:nth-child(2) th:hover {
        background: linear-gradient(to bottom, #001a3e,#4d556b);
        color: #fff;
    }

.datepicker-days .table-condensed tfoot, .datepicker-months .table-condensed tfoot, .datepicker-years .table-condensed tfoot,
.datepicker-decades .table-condensed tfoot, .datepicker-centuries .table-condensed tfoot {
    border-top: solid 1px rgba(0,0,0,.15);
}

.highlighted {
    background-color: #99ccff;
}


