@font-face {
    font-family: 'nunito-light';
    src: url('reports/nunito-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'nunito-light';
    src: url('reports/nunito-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'nunito-light';
    src: url('reports/nunito-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'nunito-light';
    src: url('reports/nunito-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

:root {
    --color-title: rgb(35, 135, 140);
    --color-label: #666;
}
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  padding-top:70px;
}

/* Bootstrap 5 */
.form-group
{
    padding-top:.2em;
    padding-bottom:.2em;
}
label.control-label {
    color: var(--color-label);
}
/* Custom */
h1,h2,h3,h4,h5 {
    color: var(--color-title);
}
.command-bar {

}
.required-label {
    font-weight: bold;
}
/* Ajuste de la barra de título de las ventanas modales de confirmación */
.modal-header {
    padding: 0.5rem 1rem; /* Reduce el padding */
    height: auto; /* Puedes ajustar la altura si es necesario */
}
.modal-header.bg-danger {
    color: var(--bs-light);
}
.modal-header.bg-info{
    color: var(--bs-light);
}
.modal-header.bg-warning{
    color: var(--bs-dark);
}
.modal-header.bg-success{
    color: var(--bs-light);
}

/* El control ligero de los estados en los listados*/
.badge {
    display: inline-block;
    padding: .5em .35em;
    font-size: 80%;
    font-weight: 700 !important;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(255,255,255,0);
    box-sizing: border-box;
    min-width: 7em;
    text-decoration: none;
}

.badge.Draft {
    color: #808080 !important;
    background-color: #ffffff !important;
    border-color: #808080;
}

.badge.Active {
    color: #F8F8FF !important;
    background-color: #008000 !important;
    border-color: #808080;
}

.badge.Inactive {
    color: #ffffff !important;
    background-color: #cc6633 !important;
    border-color: #000000;
}

.badge.Invalid {
    color: var(--bs-light);
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-light);
}

/* Grid */
.grid-widget {
    margin-top: 20px;
}

.grid-widget-header {
    border-bottom: 1px solid rgb(0 0 0 / .25);
    align-items: center;
    padding: 8px 12px;
    font-size: 17px;
    color: #fff;
    display: flex;
    background: rgb(108 99 221 );
}

.grid-widget-content {
    background: rgb(255 255 255 / .93);
}

.mvc-grid-table > table > thead > tr > th, .mvc-grid-table > table > tbody > tr > td, .mvc-grid-table > table > tfoot > tr > td {
    border-right: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
}

.mvc-grid-pager {
    text-align: left !important;
    padding-top: .5em !important;
}

.mvc-grid tbody tr:hover {
    background-color: #f0f0f0; 
}

label.mvc-grid-column span:first-child {
    display: block; /* Hace que el span se comporte como un bloque y ocupe todo el ancho disponible */
    width: 100%; /* Asegura que el span ocupe el 100% del ancho del contenedor */
    box-sizing: border-box; /* Incluye padding y border dentro del ancho total */
}

.mvc-grid-popup {
    min-width:18em !important;
}

.mvc-grid-headers {
    font-size:.9em;
}

.mvc-grid-pager button {
    border: 1px solid #dddddd;
    box-sizing: content-box;
    background: #ffffff;
    padding: 0 0.15em;
    line-height: 2;
    cursor: pointer;
    margin: 0.5em 0;
    min-width: 2em;
    color: #337ab7;
}

/* Toast 
 class="position-fixed top-0 end-0 p-3" style="z-index: 1050;margin-top:30px;"
*/
#user-notifications {
    position: fixed;
    top: 60px;
    right: 40px;
    z-index: 1050;
    width: 500px;
}

.toast {
    width: 100%; /* Hacer que el toast ocupe el ancho completo del contenedor */
    max-width:500px;
    margin-bottom: 10px; /* Espacio entre toasts */
}

.toast.bg-warning {
    color: var(--bs-dark);
}

.toast.bg-danger {
    color: var(--bs-light);
}

.toast.bg-success {
    color: var(--bs-light);
}

.toast.bg-info {
    color: var(--bs-light);
}

.toast.bg-primary {
    color: var(--bs-light);
}

.toast.bg-secondary {
    color: var(--bs-light);
}

.toast.bg-light {
    color: var(--bs-dark);
}

.toast.bg-dark {
    color: var(--bs-light);
}

/* Ficha de entidades*/
/* Cambia el orden de las columnas para mantener la apariencia en pantallas pequeñas */
.col-header-central {
    padding-top: 0;
    order: 1; 
    width: 100%;
}

.col-header-auto {
    order: 2;
}

.header-icon-container {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top:5px;
    background-color: transparent;
}

.header-icon-image {
    font-size:32px;
    color: var(--color-title);
}
/* Tabs */
.nav-link.active {
    background-color: var(--bs-light) !important;
    font-weight: bold !important;
    color: var(--bs-dark) !important;
}

/* Selecctor de etiquetas */
.selected-items {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.selected-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background-color: #e2e2e2;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    color: #333;
}

.selected-item .remove-item {
    margin-left: 8px;
    font-size: 1.2em;
    color: var(--bg-light);
    cursor: pointer;
}

.selected-item .remove-item:hover {
    color: #c9302c;
}

/* Estilos para la lista de sugerencias */
.suggestions-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ced4da;
    border-radius: 5px;
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    width: 100%;
}

.suggestions-list li {
    padding: 8px 12px;
    cursor: pointer;
}

.suggestions-list li:hover,
.suggestions-list li.active {
    background-color: #e9ecef;
}

.input-with-badges {
    border: 1px solid #ced4da;
    border-radius: .375rem;
    padding: .375rem .5rem;
    position: relative;
}

.input-with-badges input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0; /* Para evitar que el input crezca más que el contenedor */
}

.not-allowed {
    color: grey;
    cursor: not-allowed;
}

.hidden-until-init {
    visibility: hidden;
}

/*fuente por defecto en Summernote */
.note-editable {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight:500 !important;
    font-family: 'nunito' !important;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) { /* Extra small devices */
    .popover {
        max-width: 75%; /* Ocupa casi todo el ancho disponible */
        font-size: 0.875rem; /* Reduce ligeramente el tamaño de la fuente */
        padding: 0.5rem; /* Ajusta el relleno interno */
    }
}

/* Ajustes para pantallas medianas */
@media (min-width: 576px) and (max-width: 768px) { /* Small devices */
    .popover {
        max-width: 480px; /* Ancho moderado */
        font-size: 0.95rem; /* Tamaño de fuente moderado */
    }
}

/* Ajustes para pantallas grandes */
@media (min-width: 768px) and (max-width: 992px) { /* Medium devices */
    .popover {
        max-width: 550px; /* Ancho mayor */
        font-size: 1rem; /* Fuente más grande */
    }
}

/* Ajustes para pantallas extra grandes */
@media (min-width: 992px) { /* Large devices */
    .popover {
        max-width: 720px; /* Ancho mayor */
        font-size: 1rem; /* Fuente aún más grande */
    }
}

/* Menús seleccionados */
.nav-link.active, .dropdown-item.active {
/*    color: #fff !important;
    background-color: #0d6efd !important;*/
    font-weight: bold;
}

.nav-item.active > .nav-link {
/*    color: #fff !important;
    background-color: #0d6efd !important;*/
    font-weight: bold !important;
}

/* Título de las ventanas de confirmación*/
.confirm-header-primary {
    background-color: var(--bs-primary);
    color: var(--bs-light);
}

.confirm-header-secondary {
    background-color: var(--bs-secondary);
    color: var(--bs-dark);
}

.confirm-header-success {
    background-color: var(--bs-success);
}

.confirm-header-danger {
    background-color: var(--bs-danger);
}
.modal-header.confirm-header-danger {
    color: white;
}
.modal-header.confirm-header-danger h5,
.modal-header.confirm-header-dangerbutton {
    color: inherit !important;
}

.confirm-header-warning {
    background-color: var(--bs-warning);
}
.modal-header.confirm-header-warning {
    color: dark;
}
.modal-header.confirm-header-warning h5,
.modal-header.confirm-header-warning button {
    color: inherit !important;
}

.confirm-header-info {
    background-color: var(--bs-info);
}

.confirm-header-light {
    background-color: var(--bs-light);
}

.confirm-header-dark {
    background-color: var(--bs-dark);
}