/* Estilos base */
html, body {
    margin: 0;
    padding: 0;
    height: 100% !important;
    overflow: hidden;
}

/* Estilos para el modo light */
[data-layout-mode="light"] .tr_hover {
    transition: background-color 0.2s ease; /* Transición suave para el color de fondo */
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .tr_hover {
    transition: background-color 0.2s ease; /* Transición suave para el color de fondo */
}

/* Al hacer hover, cambiamos el color de fondo */
[data-layout-mode="light"] .tr_hover:hover {
    background-color:  #E9E9EF; /* Color de fondo al hacer hover en modo light */
}

[data-layout-mode="dark"] .tr_hover:hover {
    background-color:  #3D4240; /* Color de fondo al hacer hover en modo dark */
}

.hover_rojo:hover{
    color: #F44336;
}

.hover_magenta:hover{
    color: #E91E63;
}

.hover_verde:hover{
    color: #4CAF50;
}

.hover_celeste:hover{
    color: #03A9F4;
}

.align-left{
    text-align: left !important;
}

.align-right{
    text-align: right !important;
}

/* Personaliza el tamaño del checkbox 1.3 veces más grande */
.form-check-input{
    transform: scale(1.3);
}

/* Personaliza el tamaño de la etiqueta del checkbox */
.custom-control-label::before {
  width: 1.5em;
  height: 1.5em;
}

.max-width-200{
    max-width: 200px;
    white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
    overflow: hidden; /* Oculta el contenido que desborda la celda */
    text-overflow: ellipsis; /* Agrega puntos suspensivos (...) al texto que desborda la celda */
}
/* Efecto cursor pointer */
.cursor-pointer {
  cursor: pointer;
}

.pagination{
    margin: 0 !important;
}

/* Mostrar tres puntos (...) al final */
.texto-limitado {
    white-space: nowrap;      /* Evitar el salto de línea */
    overflow: hidden;         /* Ocultar el texto que excede el contenedor */
    text-overflow: ellipsis;  /* Mostrar tres puntos (...) al final */
}

/* Efecto de luz al hacer hover btn input file remove */
.efecto-luz-roja-hover:hover {
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8); 
}
.efecto-luz-azul-hover:hover {
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.8); /* Cambiamos el color a azul */
}

.validation-error{
    min-height: 20px !important;
    font-size: 10px;
}

.div-scroll{
	overflow-y: auto;
	overflow-x: hidden;
}

.div-scroll-invisible{
	overflow-y:hidden;
	overflow-x: hidden;
}

.div-scroll-visible{
	overflow-y:scroll;
	overflow-x: hidden;
}

.scroll-2::-webkit-scrollbar{
    width: 2px;
} 

.scroll-2::-webkit-scrollbar-thumb{
    background: #5156BE;
}

.scroll-5::-webkit-scrollbar{
    width: 5px;
} 

.scroll-5::-webkit-scrollbar-thumb{
    background: #5156BE;
}

.scroll-8::-webkit-scrollbar{
    width: 8px;
} 

.scroll-8::-webkit-scrollbar-thumb{
    background: #5156BE;
}

/* Para dar color primario a los nav-items */
.nav-item .nav-link{
    border: 1px solid #5156be !important; /* Color del contorno primario */
}

.nav-item .nav-link:hover{
    border: 1px solid #5156be; /* Color del contorno primario */
    background-color: rgba(81,86,190,.3); /* Cambiar color de fondo al pasar el mouse */
}

.nav-item a.nav-link.disabled{
    border: 1px solid #3B403D !important;/* Color del contorno secundario */
}

.nav-item a.nav-link.disabled:hover{
    pointer-events: none !important;/* Evita que el enlace sea interactivo */
    cursor: not-allowed !important;/* Cambia el cursor a uno de "no permitido" */ 
}

/*Para dar estilos a los botones de fullCalendar*/
.fc-button-primary {
    color: #fff !important;
    background-color: #5156be !important;
    border-color: #5156be !important
}

.fc-button-primary:hover {
    color: #fff !important;
    background-color: #4549a2 !important;
    border-color: #414598 !important
}


/*Para estilo personalizado del datatable*/

/*Modificar estilo del texto del info registros*/
.dataTables_scrollHeadInner table.dataTable{
    margin:0 !important;
    vertical-align: middle;
}
.my-datatable-1 tbody td {
    vertical-align:middle;
    padding-left: 12px;
}
.table-fs12{
    font-size: 12px;
}

/* ------------------------------------ */
/*    Select Coices con buscador        */
/*--------------------------------------*/

/* Eliminar el contenedor de choise.js de Press to Select*/
.choices__list--dropdown .choices__item--selectable:after{ 
     display: none !important; 
} 
.choices__list--dropdown .choices__item--selectable {
    padding-right: 0 !important; 
}

.choices{
    margin: 0 !important;
}

.choices__inner{
    font-size: 12px !important;
    padding: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
}

.choices__list{
    z-index: 1;
}
.choices__list[role="listbox"]{
    max-height: 187px !important;
}

.choices__list.choices__list--single{
    font-size: 12px !important;
    padding: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
}
.choices__input{
    padding: 4px !important;
    font-size: 12px !important;
}
.choices__item{
    padding: 4px !important;
    padding-left: 8px !important;
    font-size: 12px !important;
}

/* Estilos para el modo light */
[data-layout-mode="light"] .choices__heading {
    border-bottom: 1px solid #E9E9EF !important;
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .choices__heading {
    border-bottom: 1px solid #3D4240 !important;
}

/* ------------------------------------ */
/*               MetisMenu              */
/*--------------------------------------*/

/* Estilo para el elemento activo - tema claro */
[data-layout-mode="light"] .metismenu li.mm-active > a {
    background-color: #E9E9EF;
    color: #FFFFFF;
}

/* Efecto de hover en los elementos del menú - tema claro */
[data-layout-mode="light"] .metismenu li:hover > a {
    background-color: #E9E9EF;
    color: #FFFFFF;
}

/* Estilo para el elemento activo - tema oscuro */
[data-layout-mode="dark"] .metismenu li.mm-active > a {
    background-color: #333333;
    color: #FFFFFF;
}

/* Efecto de hover en los elementos del menú - tema oscuro */
[data-layout-mode="dark"] .metismenu li:hover > a {
    background-color: #444444;
    color: #FFFFFF;
}


/* ------------------------------------ */
/*            Preload páginas           */
/*--------------------------------------*/

/* Estilos predeterminados (light) */
.preload {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* Color de fondo con opacidad */
  z-index: 9999; /* Asegúrate de que esté sobre todo el contenido */
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #333;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .preload {
  background-color: rgba(0, 0, 0, 0.2); /* Color de fondo oscuro con opacidad */
}

[data-layout-mode="dark"] .spinner {
  border-top: 4px solid #fff; /* Cambia el color del borde superior del spinner en modo dark */
}

/* ------------------------------------ */
/*          Preload contenedor          */
/*--------------------------------------*/

/* Estilos predeterminados (light) */
.preload-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute; /* Cambiado a absolute para posicionarlo con respecto al contenedor padre */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* Color de fondo con opacidad */
  z-index: 9999; /* Asegúrate de que esté sobre todo el contenido */
}

.spinner-container {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #333;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .preload-container {
  background-color: rgba(0, 0, 0, 0.1); /* Color de fondo oscuro con opacidad */
}

[data-layout-mode="dark"] .spinner-container {
  border-top: 4px solid #fff; /* Cambia el color del borde superior del spinner en modo dark */
}

/* Animación de giro */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ------------------------------------ */
/*        Inicio animación form         */
/*--------------------------------------*/

/* Estilos predeterminados (light) */
.confirm-ok-form, .confirm-error-form {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Cambiado a flex-end para alinear en la parte inferior */
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999; /* Asegúrate de que esté sobre todo el contenido */
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .confirm-ok-form, [data-layout-mode="dark"] .confirm-error-form {
  background-color: rgba(0, 0, 0, 0.2); /* Color de fondo oscuro con opacidad */
}

/* Estilos predeterminados (light) */
.confirm-form {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999; /* Asegúrate de que esté sobre todo el contenido */
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .confirm-form{
  background-color: rgba(0, 0, 0, 0.2); /* Color de fondo oscuro con opacidad */
}

/* ------------------------------------ */
/*          Fin animación form          */
/*--------------------------------------*/


/* ------------------------------------ */
/*            FullCalendar              */
/*--------------------------------------*/

.fc-list-table{
    border-bottom: 1px solid #E9E9EF !important;
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .fc-list-empty{
    background-color: #313533 !important;
}
[data-layout-mode="dark"] .fc-list-day-cushion{
    background-color: #2C302E !important;
}
[data-layout-mode="dark"] .fc-list-event{
    background-color: #313533 !important;
}
[data-layout-mode="dark"] .fc-event{
    background-color: #313533 !important;
    border: 1px solid #3B403D !important;
}
[data-layout-mode="dark"] .fc-event:hover{
    -webkit-box-shadow: inset 0px 0px 5px 1px rgba(100, 100, 100, 0.66) !important;
    box-shadow: inset 0px 0px 5px 1px rgba(100, 100, 100, 0.66) !important;
}

/* Estilos para el modo light */
[data-layout-mode="light"] .fc-list-empty{
    background-color: #FFFFFF !important;
}
[data-layout-mode="light"] .fc-list-day-cushion{
    background-color: #F5F5F5 !important;
}
[data-layout-mode="light"] .fc-list-event{
    background-color: #FFFFFF !important;
}
[data-layout-mode="light"] .fc-event:hover td{
    background-color: #E9E9EF !important;
}
[data-layout-mode="light"] .fc-event{
    background-color: #FFFFFF !important;
    border: 1px solid #E9E9EF !important;
}
[data-layout-mode="light"] .fc-event:hover{
    -webkit-box-shadow: inset 0px 0px 3px 1px rgba(200, 200, 200, 0.66) !important;
box-shadow: inset 0px 0px 3px 1px rgba(200, 200, 200, 0.66) !important;
}

/*Para poder aplicar scroll*/
.fc-popover-body.popover-body {
    height: 300px !important;
    overflow-y: auto !important;
	overflow-x: hidden !important;
}
.fc-popover-body.popover-body::-webkit-scrollbar{
    width: 5px !important;
} 

.fc-popover-body.popover-body::-webkit-scrollbar-thumb{
    background: #5156BE !important;
}


/* ------------------------------------ */
/*         Inicio Formato A4            */
/*--------------------------------------*/

/* Estilos generales */
.formatoA4 {
    position: relative;
    width: 100%;
    max-width: calc(297mm * 0.75);
    aspect-ratio: 0.75;
    margin: auto;
}

/* Estilos para el modo light */
[data-layout-mode="light"] .formatoA4 {
    background-color: #fff;
    border: 1px solid #F5F5F5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .formatoA4 {
    background-color: #464646;
    border: 1px solid #464646;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.headerA4 {
    padding: 1.2vh 4vw; /* Ajuste de padding */
    text-align: center;
    margin-bottom: 1vh; /* Ajuste de margen */
    opacity: 0.5;
}

.headerA4 .logoA4 {
    width: 30%;
    display: flex;
    justify-content: left; /* Ajuste de alineación */
}

.headerA4 .logoA4 img {
    width: 60%; /* Ajuste del ancho de la imagen */
}

.headerA4 .tituloA4 {
    width: 60%;
}

.headerA4 .tituloA4 h2 {
    font-size: clamp(2vw, 1vw, 4em); /* Rango de tamaño */
    line-height: 1.5;
    color: #FD4E00;
    display: flex;
    justify-content: center; /* Ajuste de alineación */
    vertical-align: middle;
}

.headerA4 .infoRightA4 {
    width: 30%;
    text-align: right;
}

.headerA4 .infoRightA4 h6 {
    margin: 0;
    font-size: clamp(0.6vw, 1vw, 0.6em); /* Rango de tamaño */
    line-height: 1.5;
}

.contenidoA4 {
    padding: 0 4vw; /* Ajuste de padding */
}

.infoPresupuestoA4{
    padding-right: 4vw;
}

.infoClienteA4{
    padding-left: 4vw;
    text-align: right;
}

.infoPresupuestoA4 h6, .infoClienteA4 h6{
    margin: 0;
    font-size: clamp(0.7vw, 1vw, 0.7em); /* Rango de tamaño */
    line-height: 1.5;
}

.infoPresupuestoA4 small, .infoClienteA4 small{
    display: block;
    font-size: clamp(0.6vw, 1vw, 0.6em);
    line-height: 1.5;
}

.tituloPresupuestoA4{
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
    text-align: center;
}
.tituloPresupuestoA4 h6{
    font-size: clamp(0.9vw, 1vw, 0.9em); ¡
    line-height: 1.5;
}

.footerA4 {
    padding: 1vh 4vw; /* Ajuste de padding */
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: 0.5;
}

.tablePresupuestoA4{
    margin:0;
    font-size: clamp(0.7vw, 1vw, 0.7em); 
    line-height: 1.5;
}

.tablePresupuestoA4 thead tr th, .tablePresupuestoA4 tbody tr td{
    padding: clamp(0.3vw, 1vw, 0.3em); 
}

.labelObservPresupuestoA4{
    margin: 0;
    padding:0;
    margin-top: 0.5vh;
    font-size: clamp(0.7vw, 1vw, 0.7em); ¡
}

.observPresupuestoA4{
    margin:0;
    padding: 0.2vw;
    height: 12vw;
    font-size: clamp(0.7vw, 1vw, 0.7em);
}

/* Estilos para el modo light */
[data-layout-mode="light"] .observPresupuestoA4 {
    border: 1px solid #E9E9EF;
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .observPresupuestoA4 {
    border: 1px solid #3D4240;
}

/* Estilos para el modo light */
[data-layout-mode="light"] .border-right {
    border-right: 1px solid #E9E9EF;
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .border-right {
    border-right: 1px solid #3D4240;
}

/* Estilos para el modo light */
[data-layout-mode="light"] .border-top {
    border-top: 1px solid #E9E9EF;
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .border-top {
    border-top: 1px solid #3D4240;
}

/* Estilos para el modo light */
[data-layout-mode="light"] .border-bottom {
    border-bottom: 1px solid #E9E9EF;
}

/* Estilos para el modo dark */
[data-layout-mode="dark"] .border-bottom {
    border-bottom: 1px solid #3D4240;
}

/* ------------------------------------ */
/*           Fin Formato A4             */
/*--------------------------------------*/


/* ------------------------------------ */
/*        Inicio Google Maps            */
/*--------------------------------------*/

.mapa-google{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

/* ------------------------------------ */
/*         Fin Google Maps              */
/*--------------------------------------*/


/* ------------------------------------ */
/*  inicio Eliminar spin input number   */
/*--------------------------------------*/

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* ------------------------------------ */
/*    Fin Eliminar spin input number    */
/*--------------------------------------*/