/* Font: Ubuntu (Bold for Headings) */
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: bold;
    src: url("fonts/Ubuntu-Bold.ttf") format("truetype");
    font-display: swap;
}

/* Font: Montserrat (Regular for Body) */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/Montserrat-Regular.ttf") format("truetype");
    font-display: swap;
}

/* Font: Montserrat (Bold for emphasis) */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: bold;
    src: url("fonts/Montserrat-Bold.ttf") format("truetype");
    font-display: swap;
}

:root {
    /* Colores corporativos */
    --primary-color: #499cdb;
    --primary-color-hover: #338fd3;
    --secondary-color: #e2e3e5;
    --secondary-color-hover: #cfcfd1;
    --info-color: #50C3F2;
    --info-color-hover: #3ab6ea;
    --danger-color: #df3c48;
    --danger-color-hover: #c2323d;
    --warning-color: #FFC107;
    --warning-color-hover: #d39e00;
    /* Fonts configuration */
    --cassiopeia-font-family-body: "Montserrat", sans-serif;
    --cassiopeia-font-family-headings: "Ubuntu", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
}


/* Colores */

/* Sidebar customization */
#sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    width: 300px;
    min-width: 300px;
    overflow-y: auto;      /* scroll enable */
    overflow-x: hidden;    /* sin scroll horizontal */
    scrollbar-width: none;
    -ms-overflow-style: none; /* IE / Edge */
}

#sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Fix for flexbox overflow with wide tables */
.flex-grow-1 {
    min-width: 0; /* Crucial: allows flex child to shrink below content width */
}


/* Active link style (Bootstrap-based) */
/*#sidebar a {
    background-color: rgba(255, 255, 255, .15);
    color: white;
    font-weight: 600;
}*/

/* Optional: collapse behavior for mobile */
@media (max-width: 991px) {
    #sidebar {
        position: fixed;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .3s ease;
    }
    #sidebar.open {
        transform: translateX(0);
    }
    /* Keep footer at the bottom when the sidebar is fixed on mobile */
    body.site.admin-dashboard > .d-flex > .flex-grow-1.d-flex.flex-column {
        min-height: 100vh;
    }
}

/* screen changesmall */
@media (min-width: 993px) {
  main > .container {
    max-width: 85%;
    /* padding-left: 2rem; */
    /* padding-right: 2rem; */
  }
}



/* Extras */
.metismenu.mod-menu .metismenu-item {
    display: block !important;
    padding: 0;
    font-size: 1rem;
    line-height: 1rem;
}

.metismenu.mod-menu .metismenu-item > ul {
    background-color: transparent;
}

/* Menu Header/Footer Lines */
.metismenu.mod-menu > .metismenu-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 10px; /* Space from top */
    padding-top: 10px;
}

.metismenu.mod-menu > .metismenu-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
    padding-bottom: 45%;
    /* padding-bottom: 100%; */ 
}
/* END Menu Header/Footer Lines */


.metismenu.mod-menu .mm-toggler-sublink {
    color: var(--link-color);
}
/* Menu Link/Button: Expand to fill sidebar spacing */
.metismenu.mod-menu a,
.metismenu.mod-menu button {
    color: white;
    display: flex;
    align-items: center;
    
    /* Full Width Technique */
    width: calc(100% + 2rem) !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    
    /* Maintain Content Position */
    padding: 14px 1.5rem !important;
    border: none;
}

/* Submenu layout correction (Indent Level 2+) */
.metismenu.mod-menu .metismenu-item ul a {
    padding-left: 3.4rem !important; /* Restore hierarchy indentation for sub-items */
}

.metismenu.mod-menu a:focus,
.metismenu.mod-menu button:focus {
    outline: none !important;
}

.metismenu.mod-menu .metismenu-item > a:hover,
.metismenu.mod-menu .metismenu-item > button:hover {
    text-decoration: none;
    border: none;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white hover */
}

.metismenu.mod-menu .metismenu-item.active > a,
.metismenu.mod-menu .metismenu-item.active > button {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white active */
}

/* Fixed width for all icons */
.metismenu.mod-menu .metismenu-item > a > span:first-child, 
.metismenu.mod-menu .metismenu-item > button > span:first-child {
    display: inline-block;
    min-width: 30px !important;
    letter-spacing: 40px;
}

/* Custom Arrow Icon (Chevron) - Only for items with submenus */
.metismenu.mod-menu button.mm-toggler {
    position: relative;
    display: flex;
    align-items: center;
}
/* Chevron icon svg */
.metismenu.mod-menu button.mm-toggler::after {
    content: "";
    /* width: 14px; */
    height: 24px;
    margin-left: auto;
    background-color: #ffffff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M64 448c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L146.7 288 41.4 182.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3l-128 128c-6.3 6.3-14.5 9.4-22.7 9.4z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M64 448c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L146.7 288 41.4 182.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3l-128 128c-6.3 6.3-14.5 9.4-22.7 9.4z'/%3E%3C/svg%3E") no-repeat center / contain;

    transition: transform 0.25s ease;
}
.metismenu.mod-menu .mm-active > button.mm-toggler::after {
    transform: rotate(90deg);
}

.bg-primary{
    background-color: var(--primary-color) !important;
}
.bg-danger{
    background-color: var(--danger-color) !important;
}
.bg-secondary{
    background-color: var(--secondary-color) !important;
}
.bg-warning{
    background-color: var(--warning-color) !important;
}
/* End Menu */

/* Login Page / Remind / Reset / Profile */
.login-page {
    max-width: 25rem;
    margin-top: 7rem;
    margin-bottom: 2rem;
}

.login-page .card {
    box-shadow: 8px 10px 10px -10px rgba(0,0,0,0.78);
    -webkit-box-shadow: 8px 10px 10px -10px rgba(0,0,0,0.78);
    -moz-box-shadow: 8px 10px 10px -10px rgba(0,0,0,0.78);
}

.com-users-login__options {
    margin-top: -2em;
}

.com-users-remind__form legend {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.com-users-reset__form legend {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.com-users-reset-confirm__form legend {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.com-users-reset-complete__form legend {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.card-header {
    background-color: white; /*var(--cassiopeia-color-hover);*/
}

.view-login #system-message-container {
    max-width: 33rem;
}

/* Split login layout: full height split, 50/50 on desktop, stacked on mobile */
.view-login .login-left > div {
    max-width: 40rem; /* limit form width */
    margin: 0 auto;
}
.view-login .login-right .login-right-content,
.view-remind .login-right .login-right-content,
.view-reset .login-right .login-right-content {
    max-width: 32rem;
    margin: 0 auto;
}
/* Clean login (form) */
.view-login .login-clean,
.view-remind .login-clean,
.view-reset .login-clean {
    max-width: 36rem;
    margin: 170px auto 15px auto;
    padding: 3rem 2rem;
    background: transparent;
    box-shadow: none;
}


/* User Profile */
.navbar-user {
  display: flex;
  justify-content: flex-end;
  padding-top: 0;
}

.dropdown-menu {
  width: 250px;
}

.dropdown-header {
  display: flex;
  align-items: center;
}

.dropdown-header img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.navbar-user .dropdown-item:hover, .dropdown-item:focus {
    color: var(--dropdown-link-hover-color)!important;
    background-color: var(--dropdown-link-hover-bg);
}

.dropdown-toggle:after { 
    border-top-color: white;
}

div.mod-languages {
    padding-left: 0.5rem;
}

div.mod-languages li {
    margin: 0 0.1rem;
}

/*Oculto el modulo idiomas en el footer y solo dejo el output en el user menu*/
footer > div > div.mod-languages {
    display: none;
}

/*Modal File upload maximize button */
#toggleFullscreenBtn {
    opacity: .5;
}
#toggleFullscreenBtn:hover {
    opacity: .75;
}

/*Forms*/
fieldset {
  margin-bottom: .5em;
}

fieldset + fieldset {
  margin-top: .5em;
}

.metismenu-header {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0px -4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-sizing: border-box;
    line-height: 1.5rem;
}

.notification-dropdown {
    width: 375px;
    max-height: 400px;
    overflow-y: auto;
}

.notification-time {
    font-size: 0.75rem;
}

#notifications.dropdown-toggle:after { 
    border-top-color: transparent;
}

.footer {
    color: #B6B6B6;
    background-color: var(--white);
    background-image: none;
    margin-top: 1em;
}
.footer .grid-child {
    padding: 0; 
}

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

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

/* Override Buttons primary/secondary */
.btn-primary,
.btn.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
  font-weight: bold;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--primary-color-hover) !important;
  border-color: var(--primary-color-hover) !important;
}

.btn-secondary,
.btn.btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  font-weight: bold;
}
.btn-secondary:hover,
.btn-secondary:active {
  background-color: var(--secondary-color-hover) !important;
  border-color: var(--secondary-color-hover) !important;
  color: var(--black) !important;
}

.btn-info,
.btn.btn-info {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
  font-weight: bold;
}

.btn-info:hover,
.btn-info:active {
  background-color: var(--info-color-hover) !important;
  border-color: var(--info-color-hover) !important;
}

.btn-danger,
.btn.btn-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
}

.btn-danger:hover,
.btn-danger:active {
  background-color: var(--danger-color-hover) !important;
  border-color: var(--danger-color-hover) !important;
}

.btn-warning,
.btn.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: var(--black) !important;
}

.btn-warning:hover,
.btn.btn-outline-warning:hover {
    background-color: var(--warning-color-hover) !important;
    border-color: var(--warning-color-hover) !important;
}

.btn.btn-outline-primary {
    border-color: var(--primary-color-hover) !important;
    color: var(--primary-color-hover);
}

.btn.btn-primary:hover,
.btn.btn-outline-primary:hover {
    background-color: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
    color: var(--white);
}
/* Button logout en sidebar */
.sidebar-logout {
  padding-left: 2.5rem;
}
.sidebar-logout a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.sidebar-logout a::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M3 12h12'/%3E%3Cpath d='M13 5h5a2 2 0 012 2v10a2 2 0 01-2 2h-5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M3 12h12'/%3E%3Cpath d='M13 5h5a2 2 0 012 2v10a2 2 0 01-2 2h-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* style table */
.tabulator {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #ddd !important;
}

.select2-container--bootstrap-5 .select2-selection--single {
padding: .6rem 3rem .6rem 1rem;
}

.select2-container .select2-selection--single {
height: inherit; 
}

/* Reserva espacio para aprox 2 líneas para labels - responsive*/
.form-label {
    min-height: 46px;
    display: flex;
    align-items: end;
}
/* Global toolbar + selector field styling */
.qs-toolbar {
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 60%, #f9fafb 100%);
    border: 1px solid #d9e2ee;
    box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.35);
}

.qs-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--info-color);
    box-shadow: 0 8px 16px -16px rgba(15, 23, 42, 0.25);
    width: 100%;
}

.qs-field-label {
    letter-spacing: 0.08em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--primary-color) !important;
}

/* Estilos para el modal de workflow firmas */
#modalFirmasBody ol {
    list-style-position: inside;
    padding-left: 0;
}

#modalFirmasBody li {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
}

#modalFirmasBody li.approved {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
}

#modalFirmasBody li.rejected {
    background-color: #f8d7da;
    border-left: 4px solid #dc3545;
}

#modalFirmasBody li.pending {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
}

#modalFirmasBody li.waiting {
    background-color: #e7f3ff;
    border-left: 4px solid #17a2b8;
}

#modalFirmasBody li.cancel {
    background-color: #f8d7da;
    border-left: 4px solid #dc3545;
}