/*FUENTES*/
@font-face {
    font-family: 'DINPro-Regular';
    src: url('/fonts/DINPro-Regular_13937.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINPro-Bold';
    src: url('/fonts/DINPro-Bold tr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/*quitar las ligaduras de la fuente*/
* {
    font-variant-ligatures: no-common-ligatures;
}


:root {
    --bs-font-sans-serif: 'DINPro-Regular', sans-serif;
    --bs-primary: #698EE2;
    --bs-primary-rgb: 105, 142, 226
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
        font-family: 'DINPro-Regular', sans-serif;
    }
}

.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;
}

html h1, html h2, html h3 {
    font-family: 'DINPro-Bold', sans-serif !important;
}

/*que los botones principales, los enlaces y las sombras cojan el color primario*/
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.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 var(--bs-primary);
}
a {
    color: var(--bs-primary) !important;
}

/*Menú usuario*/
@media (min-width: 576px) {
    .dropdown-menu {
        right: 0;
        left: auto !important; /* Asegura que el menú se alinee al lado derecho en pantalla normal sin salirse de la pantalla */
    }
}

/*GENERAL*/
.tituloColor {
    color: var(--bs-primary);
    text-align: center;
}

/* Reducir el margen en pantallas grandes */
@media (min-width: 1200px) {
    .container {
        max-width: 100%;
        padding-left: 100px;
        padding-right: 100px;
    }
}


/*GRIDS*/
.k-grid {
    border-radius: 5px;    
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-size: min(2vw,10px) !important;
    overflow: hidden; 
}
.k-table-md {
    font-size: max(0.8vw,10px) !important;
}

.k-grid-header {
    background-color: #4CAF50;
    color: white;
}

.k-grid-header th {
    border-color: #3E8E41;
    text-align: center;
}

.k-grid-footer {
    background-color: #333333;
    color: white;
    border-top: 2px solid #4CAF50;
}

.k-grid tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.k-grid tr:nth-child(even) {
    background-color: #ffffff;
}

.k-grid tr:hover {
    background-color: #f1f1f1;
}

.k-grid td {
    white-space: normal; /* Permite que el contenido se ajuste a varias líneas */
    word-wrap: break-word; /* Asegura que las palabras largas se dividan correctamente */
    padding: 10px; /* Ajusta el padding para darle espacio al contenido */
}
.k-grid .k-grid-content {
    overflow-x: auto; /* Permite el scroll horizontal si es necesario */
}
.k-grid tr {
    height: auto; /* Hace que la altura de las filas se ajuste al contenido */
}
.k-table-td .btn-sm {
    font-size: min(2vw,14px);
}

/*en pantallas de móvil, mínimo de ancho 600px */
@media (max-width: 768px) {
    .k-grid {
        width:600px;
    }
}

/*NOTIFICACIONES*/
.k-notification {
    background-color: var(--bs-primary) !important;
    width: 250px !important;
    height: 100px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9em !important; 
}

/*DIALOG*/
.k-dialog-actions {
    border-width: 0px;
    width: 100%;
    text-align: center;
    padding: 20px;
}
.k-dialog .k-button-solid{
    background-color: var(--bs-primary);
}

.k-progressbar-value{
    background-color: var(--bs-primary) !important;
}
#progressText {
    color: var(--bs-primary);
}
#progressBarContainer {
    min-width: 200px;
    width: 25%;
}
.k-progressbar {
    color: var(--bs-primary) !important;
}




.w-70 {
    width: 70%;
}

.w-30 {
    width: 30%;
}