@import "custom.css";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primario: #0a637c;
    --primario_flojito: #dbedf6;
    --primario_transparente: #e8f0f2;
    --primario_oscuro: rgb(9, 5, 44);
    --secundario: #4f7e8b;
    --iconos: #333;
    --iconos_secundario: #ffffff;
    --color_titulos: #333333;
    --color_subtitulos: #042e3a;
    --titulo: 'Poppins', sans-serif;
    --texto: 'Poppins', sans-serif;
    --extra_text: 'Poppins', sans-serif;
    --bs-body-font-family: 'Poppins', sans-serif;
}

.nav {
    --bs-nav-link-color: #0a637c;
}

a {
    color: var(--primario);
}

a:hover {
    color: var(--primario_oscuro);
}

#sidebar ul ul {
    border: 0;
}

#sidebar ul li.active {
    background-color: inherit;
}

.sidebar-header a:hover {
    color: #FFFFFF;
}

#sidebar ul ul a {
    padding-left: 20px;
}

.text-info {
    color: var(--primario) !important;
}

.imagen-fondo {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    
    display: flex;
    justify-content: center;
    
    padding-top: 18vh;
}

.navbar-custom {
    background-color: var(--primario);
}
#sidebar .rounded.mb-2 {
    max-width: 85%;
    padding: 20px 0;
}
.sidebar-header p, #sidebar ul li a {
    color: #FFFFFF;
}
#sidebar {
    background-color: var(--primario) !important;
    background: var(--primario) !important;
}
.sidebar-header form * {
    border: none;
}
.sidebar-header .form-control {
    background-color: #FFFFFF60;
    color: #FFFFFF;
}
.sidebar-header .form-control::placeholder {
    color: #FFFFFF60;
}
#sidebar ul li.active {
    background-color: #FFFFFF20;
    border-color: var(--secundario);
}
#sidebar ul ul {
    border-color: #00000020;
}
#sidebar ul li:not(.active) a:hover {
    background-color: #FFFFFF20;
}
#sidebar ul li.active a:hover {
    background-color: #FFFFFF20;
}
.sidebar-header .btn {
    background-color: #00000060;
    color: #FFFFFF;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--primario);
}

.btn-primary {
    background-color: var(--primario);
    border-color: var(--primario);
}
.btn-primary:hover {
    background-color: var(--primario_oscuro);
    border-color: var(--primario_oscuro);
}

input[required].form-control:not(:read-only) {
  background-image: none;
}

.separador-menu {
    position: relative;
    display: inline-block;
    width: 8px;
    text-align: center;
}

.separador-menu img {
    position: absolute;
    top: -4px;
    left: 0;

    height: 8px;
    filter: brightness(0) invert(1);
    transform: rotate(270deg);
}

.bars-menu img {
    height: 20px;
    filter: brightness(0) invert(1);
}

.navbar-expand .navbar-nav .nav-link  {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.navbar-expand .navbar-nav .active .nav-link  {
    padding-left: 8px;
}

.navbar-nav strong {
    font-weight: 500;
}

.nav-item .fa-bars {
    height: 20px;
    border: 1px solid #FFFFFF;
    border-radius: 100%;
    padding: 10px;
}

.btn-group {
    display: inline-flex;
    gap: 10px;
    margin-right: 5px;
}

.btn-group .btn-sm {
    background-color: #FFFFFF;
    height: 50px;
    min-width: 50px;
    border: none;
    border-radius: 20px !important;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    color: var(--primario);
}

.btn-group .btn-sm img {
    max-height: 25px;
    max-width: 25px;
}

.btn-group .btn-sm img.flechita {
    max-height: 8px;
    max-width: 8px;
}

.refresh-bar .btn-group .dropdown-toggle {
    color: #000000;
    padding: 0 20px;
}

.refresh-bar .btn-group .dropdown-toggle::after {
    display: none;
}

.iconos-menu-derecha .nav-link {
    border: 1px solid #FFFFFF;
    border-radius: 100%;
}

.iconos-menu-derecha img {
    height: 28px;
    max-height: 30px !important;
    filter: brightness(0) invert(1);
    padding: 7px;
}

h1.h4 {
    font-weight: 700;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}

h1.h4 .contenedor-icono {
    border-radius: 100%;
    background-color: var(--primario);

    height: 40px;
    width: 40px;

    display: flex;
    justify-content: center;
    align-items: center;
}

h1.h4 .contenedor-icono svg, h1.h4 .contenedor-icono img {
    max-height: 16px;
    filter: brightness(0) invert(1);
    margin: 0 !important;
}

.nav.nav-tabs {
    padding-left: 15px;
}

.nav.nav-tabs .nav-link {
    height: 50px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-right: 25px;
    padding-left: 25px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.nav.nav-tabs .nav-link svg {
    margin: 0 !important;
}

.nav-item img {
    max-height: 15px;
    margin: 0 !important;
}

.badge.bg-secondary {
    background-color: var(--primario) !important;
    border-radius: 10px;
    height: 24px;
    width: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    font-size: 14px;
    height: 50px;
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.fs-line .btn {
    height: 30px;
    padding: 8px;
}

.input-group .btn {
    min-height: 100%;
    height: auto;
}

.input-group-apend:not(:last-child) .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-apend:last-child .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-success img, .btn-danger img, .btn-light img {
    height: 20px;
}

.btn-success *:not(:first-child), .btn-danger *:not(:first-child), .btn-light *:not(:first-child) {
    margin-left: 5px;
}

.btn-success {
    background-color: #2fa301;
}

.btn-danger {
    background-color: #e74330;
}

.btn-light {
    background-color: #f6f6f6;
}

.btn-success img {
    height: 15px;
}

.btn-light.dropdown-toggle::after {
    border-top-color: var(--primario);
    margin-left: 10px;
}

.search-bar input, .search-bar .btn {
    height: 50px;
    border-radius: 20px;
    background: transparent;
    border-color: var(--primario_flojito);
}

.search-bar input {
    border-left: 0;
}

.search-bar .btn {
    position: relative;
    border-right: 0;
    width: 50px;
}

.search-bar .btn img {
    height: 20px;
}

.search-bar .btn::after {
    content: "";
    background-color: var(--primario_flojito);
    position: absolute;
    top: 15%;
    right: 0;
    height: 70%;
    width: 1px;
}

.nav.nav-tabs .nav-link {
    color: var(--primario);
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.dropdown-item img {
    height: 20px;
}

.nav.nav-pills .nav-link img {
    max-height: 16px;
}

.nav.nav-pills .nav-link.active img {
    filter: brightness(0) invert(1);
}

#sidebar ul li.active {
    background-color: transparent;
    border: 0;
}

#sidebar .sidebar-menu-item-active {
    background-color: #FFFFFF20;
}

.table-danger {
  --bs-table-bg: #f8d7da44;
  --bs-table-border-color: #c6acae44;
}

.table-dark {
  --bs-table-color: #000;
  --bs-table-bg: #21252944;
  --bs-table-border-color: #4d515444;
}

.table-success {
  --bs-table-bg: #d1e7dd44;
  --bs-table-border-color: #a7b9b144;
}

.table-info {
  --bs-table-bg: #cff4fc44;
  --bs-table-border-color: #a6c3ca44;
}