@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --color-bar: rgb(255, 255, 255);

    --color-jumbotron:rgb(217, 217, 217);
    --color-jumbotron-text:rgb(51, 51, 51);

    --color-text-menu: rgb(100, 100, 100);
    --color-text: rgb(51, 51, 51);

    --color-menu-hover: rgb(230, 230, 230);
    --color-menu-hover-text: rgb(20, 20, 20);

    --color-background-body: rgb(255, 255, 255);

    --color-background-table: rgb(255, 255, 255);
    --color-table-header-bg: rgb(230, 230, 230);

    --color-button: rgb(30, 144, 255);
    --color-button-hover: rgb(28, 126, 214);
    --color-border: rgb(220, 220, 220);
}

.dark-mode {
    --color-bar: rgb(78, 87, 96);

    --color-jumbotron:rgb(78, 87, 96);
    --color-jumbotron-text:rgb(200, 200, 205);

    --color-text-menu: rgb(200, 200, 205);
    --color-text: rgb(242, 242, 242);

    --color-menu-hover: rgb(60, 68, 75);
    --color-menu-hover-text: rgb(245, 245, 245);

    --color-background-body: rgb(30, 35, 40);

    --color-background-table: rgb(45, 51, 57);
    --color-table-header-bg: rgb(60, 68, 75);

    --color-button: rgb(59, 130, 246);
    --color-button-hover: rgb(37, 99, 235);
    --color-border: rgb(100, 100, 100);
}

body {
    background-color: var(--color-background-body);
    color: var(--color-text);
    font-family: "Outfit", sans-serif;
    height: 100%;
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.fakeimg {
    height: 200px;
    background: #aaa;
}
.label {
    font-family: "Outfit", sans-serif;
}

.bg-company-red {
    background-color: var(--color-bar);
    border-bottom: 0.5px solid var(--color-border);
}

.jumbotron {
    font-family: 'Comfortaa', cursive;
    background-color: var(--color-jumbotron);
    color: var(--color-jumbotron-text);
    border-radius: 10px;
}

#navbarSupportedContent {
    display: flex;
    color: var(--color-text-menu);
    align-items: center; /* Asegura que los elementos se alineen correctamente */
    justify-content: space-between;
}

.sp-img img {
    width: 40px;
    min-width: 40px;
    border-radius: 10px;
}

/* Asegura que el contenido del navbar se alinee de manera horizontal */
.navbar-nav {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos */
}

.nav-item {
    display: flex;
    align-items: center; /* Alinea el icono y el texto */
}

.nav-item span {
    margin-left: 10px; /* Espaciado entre el icono y el texto */
}

/* Ajustes cuando el modo oscuro está activado */
.dark-mode .navbar-nav {
    display: flex;
    align-items: center;
}

.dark-mode .nav-item {
    display: flex;
    align-items: center;
}

.dark-mode ion-icon {
    display: flex;
    min-width: 35px;
    font-size: 25px;
    margin-left: 15px;
    color: rgb(255, 153, 0);
}

.dark-mode ion-icon:hover {
    cursor: pointer;
    border-radius: 50px;
}

.logout ion-icon {
    display: flex;
    min-width: 35px;
    font-size: 25px;
    margin-left: 15px;
    margin-right: 15px;
    color: var(--color-text-menu);
}

.user-icon ion-icon {
    display: flex;
    min-width: 35px;
    font-size: 25px;
    color: var(--color-text-menu);
}

/* Centrar el texto de reports-call-center */
.reports-call-center {
    margin: 0 auto; /* Centrado horizontal */
    font-size: 25px;
}

.form-control {
    background-color: var(--color-background-table);
    color: var(--color-text);
    padding: 5px 10px;
    border: 2px solid #999;
    border-radius: 10px;
    transition: 0.3s ease all;
}

.form-control:hover {
    cursor: pointer;
}

h5 {
    color: var(--color-jumbotron-text);
}

/* Reports */
table {
    background-color: var(--color-background-table);
    border-radius: 8px;
    border: 0px;
    overflow: hidden; 
}

th {
    background-color: var(--color-table-header-bg);
    color: var(--color-jumbotron-text);
    border: 0px;
}

.table thead tr th {
    border: 0px;
}

.table thead tr th:first-child {
    border-top-left-radius: 8px;
}

.table thead tr th:last-child {
    border-top-right-radius: 8px;
}

td {
    color: var(--color-text);
    border: 0px;
}

/* .th1 {
    background: #909497;
    color: #fdfefe;
    font-size: 15px;
}

.th2 {
    background-color: var(--color-jumbotron);
    color: var(--color-jumbotron-text);
    font-size: 15px;
}

.th3 {
    background: #626567;
    color: #fdfefe;
    font-size: 13px;
}

.td1 {
    color: var(--color-text);
    font-size: 16px;
} */