@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
@import url(tables.css);
@import url(manifest.css);
@import url(link-back.css);
@import url(not-found.css);
@import url(modales.css);
@import url(forms.css);
@import url(search.css);

.blockDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    z-index: 10;
    background:url(../img/loader.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: #FFF;
}

:root {
    --dtroy-red: #b72029;
    --primary: #810000;
    --primary-dark: #320000;
    --bs-gray-500: #adb5bd;
    --bs-gray-300: #dee2e6;
    --secondary-light: #ABB5BE;
    --bs-gray-700: #495057;
    --desktop-size: 1366px;
}

body {
    /* overflow: hidden; */
    background-color: white;
}

/* -------------contenedor principal sin iframe---------- */

#app{
    display: flex;
}

.main {
    padding: 40px;
    position: absolute;
    right: 0px;
    left: 230px;
    width: calc(100vw - 230px);
    max-width: calc(100vw - 230px);
}

@media only screen and (max-width: 1366px) {
    .main {
        width: 100%;
        max-width: 100%;
        left: 0px;
    }

    #app{
        display: block;
    }
  }

.container-blank{
    /* width: 100%; sin iframe */
    /* min-height: 100%; sin iframe */
    width: calc(100% - 40px);
    min-height: calc(100% - 40px);

    position: absolute;
    /* top: 0px; sin iframe */
    /* left: 0px; sin iframe */
    top: 20px;
    left: 20px;
}

/* -------------Card de Cuerpo--------------- */

.content-card{
    padding: 24px;
}

/*---------------Menu principal----------------*/

.bg-dtroy {
    /* background-color: var(--dtroy-red); */
    background: radial-gradient(
        circle at 50% 37%,
        #b72029,
        rgba(131, 0, 15, 1)
    );
}

.shadow-menu {
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.27);
}

#sidebar-container {
    min-height: 100vh;
    position: fixed;
}

#sidebar-container .menu {
    width: 230px;
}

.user-box {
    background-color: black;
    padding: 8px;
}

.user-box p {
    font-style: italic;
    margin: 0px;
}

#sidebar-container .logo {
    display: flex;
    padding-top: 40px;
    padding-bottom: 32px;
    align-items: center;
    justify-content: center;
}

.icon {
    padding: 0px 8px 0px 0px;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
}

/* .document-tracker{
    text-align: center;
    padding: 16px;
} */

.menu .nav-link {
    padding: 8px 10px;
    display: flex !important;
    align-items: center;
}

.menu .active {
    /* background-color: #A32525; */
    background-color: #0000001e;
    font-weight: bolder;
}

/* Responsive */
#mobile-nav{
    display: none;
    padding: 8px;
}

@media only screen and (max-width: 1366px) {
    #sidebar-container {
      display: none;
    }
    #mobile-nav{
        display: flex;
    }
  }

.nav-mobile-right-container{
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-mobile-right-container p{
    margin: auto;
}

.mobile-menu a{
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.mobile-menu .active {
    font-weight: 900;
    /* border-bottom: 1px solid white; */
}

.mobile-menu .active span{
    font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 20;
}

.navbar-collapse{
    padding-top: 8px;
}

.mobile-user{
    font-style: oblique;
}

/*-----------Headers---------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    letter-spacing: -0.01em;
    color: var(--dtroy-red);
}

.header--line {
    border-bottom: 1px solid #f1e6e6;
    margin-bottom: 16px;
    width: 100%;
}
.header-filter-container{
    display: flex;gap:8px;
    flex-direction: row;
    align-items: baseline;    
}
.header-filter-indicator {
    font-weight: 700;
    color: #54595E; 
}


/* -------------Código para tablas naturales------------- */
/* Estas clases no se utilizaron en el dashboard porque
dieron problemas para estilizar el hover y el border 
radius */
/* ------------------------------------------------------- */
/* table {
    border-collapse: separate;
    border-spacing: 0 10px;
    width: 100%;
}

tbody tr {
    background-color: #ffffff;
    border-bottom-width: 0px;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

thead tr {
    background-color: transparent;
} */

/* tabla de dashboard de documentador */
.dashboard-table tr td {
    height: 4.6rem;
}

.dashboard-table td:first-child {
    padding: 16px 0.5rem 16px 16px !important;
}

.dashboard-table td {
    padding: 16px 0.5rem;
}

.dashboard-table td:last-child {
    padding: 16px 16px 16px 0.5rem;
}

.dashboard-table tr:hover {
    background-color: #333333;
}

/* ------------------------------------------------ */
/* -----------------LogIn----------------------- */

.bg-index {
    background-image: url(../img/bg-index.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: fixed;
    top: 0px;
    left: 0px;
}

#login-card {
    margin: auto;
    display: flex;
    flex-direction: column;
    width: 500px;
    position: static;
}