body{background-color: #fafafa;}
body.navbar-side-open { overflow: hidden;}
.container-fluid { max-width: 1600px;}

/*MARGINS*/
.margin-top-45{margin-top: 45px;}
.margin-right-10{margin-right: 10px;}
.margin-left-10{margin-right: 10px;}
.margin-left-30{margin-right: 30px;}

/*NAVBAR*/
.navbar { height: 60px; margin-bottom: 15px}
.navbar .navbar-toggler{margin-right: 15px;}
.navbar .linia { border-right: 1px solid #fff;}
#navbar-side { position: fixed; top: 60px; left: 0; height: calc(100vh - 60px); z-index: 1040; background-color: #fff; width: 225px;
	transform: translateX(-225px); transition: transform 0.5s ease-in-out; color: #757473;}
.wrapper { position: fixed; height: 100%; width: 100%; z-index: 99; top: 60px; left: 0; visibility: hidden;}
.wrapper:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, .6); z-index: 1035; opacity: 0; visibility: hidden; transition: all 0.5s ease-in-out;}
.navbar-side-open{overflow: hidden;}
.navbar-side-open .wrapper { visibility: visible;}
.navbar-side-open .wrapper:before { opacity: 1; visibility: visible;}
.navbar-side-open #navbar-side { transform: translateX(0);}
#navbar-side .navbar-close { background-color: transparent; border: none; position: absolute; top: 15px; right: 15px;}
#navbar-side .menu { list-style: none; padding: 15px 0; margin-bottom: 0; margin-left: auto; margin-right: auto;}
#navbar-side .menu li { border-bottom: 1px solid #e5e5e5;}
#navbar-side .menu a{ padding: 10px 15px; display: block;}
#navbar-side .menu i { width: 25px; font-size: 1.13rem;}

.formulari-cercador { margin-right: 0; margin-top: 5px;}
.formulari-cercador button { top: 12px; left: 5px;}
.formulari-cercador .form-control { background-color: #ededed!important; border-radius: 15px; width: 300px; max-width: 100%; 
	height: 50px; padding-left: 40px;}

@media (min-width: 576px){
	#navbar-side { width: 470px; transform: translateX(-470px);}
}

@media (min-width: 992px){
	.navbar { padding: 0.5rem 60px; margin-bottom: 0}
	#navbar-side { position: fixed; left: 0; top: 60px; height: auto; background-color: #fff;  width: 100%!important; transform: none;
	transition: none; color: #000; }
	#navbar-side .menu{padding: 0 50px; height: 60px;}
	#navbar-side .menu li { border-bottom: none; float: left; margin-right: 15px;}
	#navbar-side .menu a { padding: 18px 10px; }
	.margin-navbar{margin-top: 180px;}
	.margin-navbar-home{margin-top: 135px;}
}

/*SLIDER*/
.slider-areaclient { margin-bottom: 30px;}
.slider-areaclient .slick-prev,
.slider-areaclient .slick-next { top: -45px; -webkit-transform: none; -ms-transform: none; transform: none; border-radius: 5px;}
.slider-areaclient .slick-prev { right: 50px; left: auto;}
.slider-areaclient .slick-next { right: 0;}
.slider-areaclient .item{border-radius: 5px;}
.slider-areaclient .container-fluid{ top: auto; bottom: 15px; -webkit-transform: none; -o-transform: none; transform: none;}

@media (min-width: 576px){
	.slider-areaclient .nom { margin-bottom: 15px;}
	.slider-areaclient .txt { margin-bottom: 15px;}
}

/*HOME*/
.titol-home { font-weight: 500; text-transform: uppercase; font-size: 1.13rem;}
.img-block { background-color: #eaeaea; border-radius: 5px;}
.img-block img, .img-block i{font-size: 50px;}

/*SECCIO*/
.titol-seccio { padding-top: 15px; padding-bottom: 15px; margin-bottom: 15px;}

/*NOTICIES*/
.noticia-block{border: none; padding: 0;}

/*DOCUMENTS*/
.document-block{border: 1px solid #f3f3f3; padding: 10px; margin-bottom: 15px; position: relative;}
.document-block .ico-left-txt{padding-right: 25px;}
.document-block .fa-chevron-down { position: absolute; top: 15px; right: 15px; color: #4a4a4a;}
.document-block .data{font-size: .88rem;}
.document-block .firmat{font-size: .88rem; color: #878787; font-style: italic;}
.document-block .icos{ margin-top: 15px; margin-left: auto;}
.document-block .icos .cercle, .document-block .cercle.descarrega { background-color: #cccdcd; color: #fff; height: 70px; line-height: 70px; 
	width: 70px; border-radius: 50%; display: inline-block; text-align: center; margin-bottom: 5px; font-size: 30px; }
.document-block .cercle.descarrega { position: absolute; top: 15px; right: 15px; height: 25px; line-height: 25px; width: 25px; font-size: 15px;}
.document-block .icos span{ font-size: .88rem; display: block; text-align: center;}
.modal-content { border-radius: 0;}
.categoria-block { margin-bottom: 30px; border: none; padding: 0; font-size: .88rem; text-align: center;}
.categoria-block img{margin-bottom: 15px;}

@media (min-width: 576px){
	.document-block{ padding: 15px;}
	.document-block .ico-left-txt{padding-right: 50px;}
	.document-block .cercle.descarrega { height: 50px; line-height: 50px; width: 50px; font-size: 30px;}
}

@media (min-width: 1200px){
	.documents-block{padding: 15px; background-color: #ffffff; padding: 15px; border-radius: 5px; border: 1px solid #e6e6e6; color: #5c757d;
		margin-bottom: 30px;}
	.documents-block .titol{color: #4d4d4d; margin-bottom: 5px;}
	.documents-block .linia{border-bottom: 1px solid #b2b2b2; margin-top: 5px; margin-bottom: 5px;}
	.documents-block .firmat{font-size: .88em; color: #878787; font-style: italic;}
	.document-block-xl .cercle{ background-color: #cccdcd; color: #fff; height: 28px; line-height: 28px; width: 28px; border-radius: 50%;
	display: inline-block; text-align: center; margin-bottom: 5px; font-size: 10px; margin-left: auto; margin-right: auto;}
	.document-block-xl .data, .document-block-xl .nom{font-size: .88em;}
	.document-block-xl .tamany{font-size: .88em;}
}

/*FIRMA*/
#firma_container canvas { border: 1px solid #000; width: 100%; height: calc(100vh - 250px); min-height: 200px; max-height: 350px;}
#aviso_pantalla { max-width: 100%;}

@media (min-width: 576px){
	#firma_container canvas { height: 150px; min-height: 150px;}
}

/*.portrait { position: relative; width: 150px; height: 100px; margin-left: auto; margin-right: auto;}
.portrait .portrait-1, .portrait .portrait-2{position: absolute; top: 0; left: 0; width: 100%;}
.portrait  .portrait-1 { animation: portrait1 2s infinite; opacity: 1;}
.portrait  .portrait-2 { animation: portrait2 2s infinite; opacity: 0;}

@media (orientation: portrait) and (max-width: 767px){
	.d-portrait-none{display: none!important;}
	.d-portrait-block{display: block!important;}
}

@media (orientation: landscape) and (max-width: 767px){
	.d-landscape-none{display: none!important;}
	.d-landscape-block{display: block!important;}
	.d-landscape-inline-block{display: inline-block!important;}
}

@keyframes portrait1 { 50% { opacity: 0;}}
@keyframes portrait2 { 50% { opacity: 1;}}*/

tr:not(.active) td.tdColorInnactiva { background-color: #e9ecef!important; opacity: 0.5; }
tr:not(.active) td.costosTdInnactiva { opacity: 0.5; pointer-events: none;
	/* Opcional: Cambiar el cursor para indicar que el elemento está deshabilitado */
	cursor: default; background-color: #e9ecef!important;}

.sync-plazas{ position: absolute; left: -16%; top: -26%; font-size: 12px; }

#tablePrendas input[type="number"].form-control-sm {
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el ancho total */
    padding: .25rem .25rem;
    overflow: hidden; /* Oculta el desbordamiento del contenido */
    text-overflow: ellipsis; /* Muestra puntos suspensivos si el contenido se desborda */
    white-space: nowrap; /* Evita que el contenido se divida en varias líneas */
}

/* Ocultar las flechas de los inputs de tipo number cuando están en modo readonly */
#tablePrendas input[type="number"][readonly]::-webkit-inner-spin-button,
#tablePrendas input[type="number"][readonly]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#tablePrendas input[type="number"][readonly] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield; /* Estándar */
    padding-right: 0; /* Elimina el espacio reservado para las flechas */
}

/* Mostrar el valor completo del número al hacer hover */
#tablePrendas input[type="number"].form-control-sm:hover::after {
    content: attr(value); /* Muestra el valor del input */
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* estudio */
.input-container{ 
	display: inline-block;
	position: relative;
	width: 100%;
}
.input-container span{ 
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 30%;
}