/* Widget list */
.widget-list{
	margin: 0;
	padding: 0;
	list-style: none;
}
/*WIDGETS MISCELANEA*/
.widget-dropdown {
	overflow:hidden;
}
.dropdown[data-dialog="showhide"],
.dropdown[data-dialog="actions"]{
	max-width:320px;  
	max-height: calc(100% - 95px);
}
.dropdown[data-dialog="showhide"] > li:last-child{
	position: sticky;
	bottom:0;
	z-index: 2;
	border-top:1px solid rgba(0,0,0,0.1);
	background-color: inherit;
}.dropdown[data-dialog="showhide"] > li:last-child > label {
	padding: 5px;
}
.dropdown[data-dialog="graphic-filters"],
.dropdown[data-dialog="actions"],
.dropdown[data-dialog="filters"]{
	right: 0;
	left:unset;
	width: 260px;
	max-height: calc(100% - 50px);
}
.dropdown {
	background-color: var(--light);
	position: absolute;
	display:none;
	z-index: 4;
	-webkit-box-shadow: 0 1.6px 3.6px 0 rgb(0 0 0 / 13%), 0 0.3px 0.9px 0 rgb(0 0 0 / 11%);
	box-shadow: 0 1.6px 3.6px 0 rgb(0 0 0 / 13%), 0 0.3px 0.9px 0 rgb(0 0 0 / 11%);
	overflow: auto;
	margin: 0 5px;
	padding:0px;
	list-style: none;
	border-radius: 5px;
	top: 45px;
	left: 0;
	right: 0;
}
.dropdown[data-dialog="groupsby"]
{
	max-height: calc(100% - 50px);
}.dropdown[data-dialog*="options"]{
	position: relative;
	top:0;
}
.widget-calendar.minimonth .list-day-events li .event,
.dropdown li button,
.dropdown[data-dialog="filters"] .filter button,
.sortable > li > div {
	box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}
.widget-calendar.minimonth .list-schedules li button > div.icon:first-child,
.dropdown li button > div.icon:first-child,
.list-calendars > li > button:first-child,
.sortable > li > div > button:first-child{
	box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
}
.dropdown[data-dialog*="filters"] .filter > p {
	font-weight: bold;
	box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
	margin: 0;
	padding:7px 5px;
}
button[data-dropdown="groupsby"]{
	overflow:unset;
}
/*Lists*/
/*Forms*/
/*Inputs*/
.widget-check{
	z-index:2;
}
.widget-check > input[type=checkbox] {
	position: absolute;	
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity:0;
	z-index:1;
}
.widget-check > input[type=checkbox]:checked ~ div.icon > span {
	color:var(--dark);
}
.widget-check > input[type=checkbox]:checked ~ div.icon {
	background-color: var(--tertiary);
}
/*Switch*/
.widget-switch{
	width:100% !important;
	display:flex;
	align-items:center;
	padding:0px 5px !important;
	
}
.widget-switch > p {
	margin:7.5px 5px;
}
.widget-switch > input {
	opacity:0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	cursor:pointer;
	padding:0;
	margin:0;
	z-index: 2;
}
/* Normal Track */
.widget-switch > input + span {
	width: 30px;
	min-width: 30px;	
	height: 15px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 999px;
	background-color:var(--cuaternary);
	box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
	position: relative;
	z-index: 1;
}
/* Checked Track (Blue) */
.widget-switch > input:checked + span {
	background-position: 0 0;
	background-color:var(--primary);
}
/* Normal Knob */
.widget-switch > input + span > span{
	float: left;
	width: 13px; height: 13px;
	border-radius: inherit;
	background: #ffffff;
	-webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
	-webkit-transition-duration: 0.4s;
	-webkit-transition-property: transform, background-color, box-shadow;
	/*-moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);*/
	transition-timing-function: cubic-bezier(.54,1.85,.5,1);
	/*-moz-transition-duration: 0.4s;*/
	transition-duration: 0.4s;
	/*-moz-transition-property: transform, background-color;*/
	transition-property: transform, background-color;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

/* Checked Knob (Blue Style) */
.widget-switch > input:checked + span > span {
	-webkit-transform: translate3d(15px, 0, 0);
	/*-moz-transform: translate3d(20px, 0, 0);*/
	transform: translate3d(15px, 0, 0);
	background-color: #ffffff;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}
/*Search*/
.widget-search{
	display: flex;
	align-items: center;
	justify-content: start;
}
.widget-search button[data-erase]{
	border-radius: 0px 5px 5px 0px;
	overflow: hidden;
	padding: 1.5px 0px;
}
.widget-search button[data-back]{
	border-radius: 5px;
	overflow: hidden;
	border-radius:  5px 0px 0px 5px;
}
.widget-search:has(button[data-back]) input {
	border-radius: 0px !important;
}
/*
.widget-search button > .icon{
	color:var(--light);
	background-color: var(--primary);
}
*/
.widget-search input[type="search"] {
	border: 1px solid #D1D1D6 !important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
	outline: none;
	background-color: white !important;
	padding: 0 5px !important;
	border-radius: 5px 0px 0px 5px !important;
	font-size: 16px !important;
	color: var(--primary);
	width: 100% !important;
	min-height: 40px;
	flex:1;
	margin:0;
}
.widget-search input[type="search"]:focus {
	border-color: var(--dark)!important;
	outline: none;
}
.widget-card{
	padding: 10px;
}
.widget-card > p,
.widget-card h1,
.widget-card h2,
.widget-card h3,
.widget-card h4{
	font-weight: normal;
	margin:5px 0px;
}
.widget-card > p{
	font-size: 16px;
	font-weight: normal;
}
/*Widget table*/
.widget-table{
}
.widget-table .thead *{
	font-weight: 600;
}.widget-table .thead{
	border-radius: 5px 5px 0px 0px;
}
.widget-table .tbody{
	border-radius: 0px 0px 5px 5px;
}
.widget-table .thead{
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	box-shadow: 0px 1px 0px rgba(0,0,0,0.2);
}
.widget-table .thead .headers > li,
.widget-table .tbody .entities > li > div > *:not(:last-child) {
	flex:1;
	box-shadow: 1px 0px 0px rgba(0,0,0,0.2);
}
.table .thead {
	background-color: var(--primary);
	color:var(--light);
}
.widget-table .thead .headers > li > div > p,
.widget-table .tbody .entities > li > div > div > *{
	margin:5px;
}
/*Tabla detalles*/
.table-details .entities button {
	font-size: 18px;
}
.table-details .tbody .concept > :not(:first-child) {
	font-size: 14px !important;
}
.table-details .thead button{
	width: 100%;
	font-weight: 600;
}
.table-details .thead .discount,
.table-details .tbody .discount{
	display: none;
}
.table-details .thead .headers > li.concept,
.table-details .tbody .concept{
	min-width: 45%;
	text-align: left;
}
.table-details .tbody .concept > .modifiers-details{
	margin:5px;
	padding-left: 30px;
}
.table-details .tbody .concept > .notes, 
.table-details .tbody .concept > .bookings{
	margin-left: 10px;
}
.table-details .tbody .concept > .notes > h4,
.table-details .tbody .concept > .bookings > h4{
	font-size: 14px !important;
	font-weight: 600;
}
.table-details .tbody .concept > .notes > p{
	font-size: 16px !important;
	white-space:normal;
	padding-left: 12.5px;
}
.table-details .tbody .entities button.bookings > div,
.table-details .tbody .entities button.details > div{
	flex:1;
	margin:0;
	box-shadow: var(--box-shadow-dark);
}
.table-details .tbody button > div > p{
	margin:5px;
	text-align: left;
}
.summary-document{
	padding: 0px 7px 0px 7px;
}
.summary-document .total{
	margin-top: 5px;
	padding-bottom:0 !important;
	border-top: 1px dashed rgba(0,0,0,0.3);
}
.summary-document .taxes,
.summary-document .subtotal{
	padding: 5px 0px;
	border-bottom: 1px dashed rgba(0,0,0,0.5);
}
.summary-document > div .amount{
	font-size: 18px;
}
.summary-document .taxes > h4{
	padding-bottom: 5px;
}
.summary-document .taxes .list-taxes{
	margin: 5px 0;
}
.summary-document .taxes .list-taxes > li{
	border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
  	padding-bottom: 5px;
}
.summary-document .total .amount {
	font-size: 36px;
}
/*Widget items*/

.items-by-category{
	display: flex;
	align-items: center;
	justify-content: start;
	flex-wrap: wrap;
}
.items-by-category > li{
	width: 140px;
	height: 140px;
	min-width: 140px;
	margin:5px;
	border-radius: 10px;
	overflow: hidden;
}
.items-by-category > li > button{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat; 
	background-size: cover;
	background-position: center center;
	text-align: left;
}
.items-by-category > li.product-card {
	border: 1px solid var(--tertiary);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--box-shadow-light);
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	cursor: pointer;
	background-color: var(--white);
	display: flex;
	flex-direction: column;
	position: relative; /* Para posicionar el label */
}

/* Efecto al pasar el mouse (hover) */
.items-by-category > li.product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
	border-color: var(--primary);
}
.items-by-category > li.product-card > button  > .product-image-container {
	width: 100%;
	height: 100%;
	background-size: cover; /* Asegura que la imagen cubra el área */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita repeticiones */
	background-color: var(--light); /* Fondo por si la imagen no carga */
	border-bottom: 1px solid var(--tertiary); /* Separador visual */
}
.items-by-category > li.product-card > button  > .product-image-container > .product-label {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: var(--red);
	color: var(--white);
	padding: 4px 8px;
	border-radius: 5px;
	font-size: 0.85em;
	font-weight: bold;
	z-index: 10; /* Asegura que esté por encima de la imagen */
}
.items-by-category > li.product-card > button > .product-info {
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--primary);
	color: var(--white);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
.items-by-category > li.product-card > button  > .product-info > .product-name {
	font-size: 1em;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 5px;
}
.items-by-category > li.product-card > button  > .product-info > .product-price {
	font-size: 1.5em;
	font-weight: bold;
	color: var(--lam);
	text-align: right;
}
/* Details Widget */
.detail-bookings,
.detail-modifiers,
.detail-notes,
.detail-price,
.detail-optional{
	padding:10px;
}
.detail-price button > p {
	text-transform: uppercase;
	font-weight: 600;
	margin-left: 0px;
}
.concept-content .img {
	width: 40px;
	height: 40px;
	border:2px solid;
	border-radius: 100px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-right: 10px;
}
.detail-concept,
.detail-discount,
.detail-quantity { 
	margin: 25px 10px 0px 10px;
}
.detail-discount label,
.detail-quantity label { 
	margin-right: 5px;
	flex:1;
	min-width: 200px;
}
.detail-discount input,
.detail-quantity input {
	text-align: center;
	font-size: 20px !important;
	font-weight: bold;
	padding:8.5px 0px !important;
	width: 100% !important;
}
.detail-discount button > p{
	font-size: 24px;
	width: 30px;
	height: 30px;
	padding: 6.5px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}
.detail-discount button > input[type="radio"]{
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	cursor: pointer;
}
.detail-notes > label,
.detail-discount .discount-input > label,
.detail-quantity .quantity-input > label {
	margin-left: 0 !important;
}
.detail-notes > label{
	margin-right: 0 !important;
}
.payment-save input[type=submit],
.detail-update input[type=submit]{
	border-radius: unset !important;
}
.payment-save label,
.detail-update label{
	margin:0 !important;
}
/* Reservas detalle */
.booking-startmode > label{
	margin:25px 10px 10px 10px;
}
button.booking{
	margin: 2.5px 0px 2.5px 10px;
}
button.booking > .concept > p:first-child {
	font-size: 16px;
	font-weight: 600;
}
button.booking > .concept > .finish-date {
	font-size: 14px;
}
.document .footer{
}
.ticket .footer > button,
.document .footer > button,
.registration .footer > button{
	display: flex;
	align-items: center;	
	justify-content: center;
	flex:1;
	padding:6.5px 5px;
}
.ticket .footer > button > p,
.document .footer > button > p,
.registration .footer > button > p{
	font-size: 22px;
	/*text-transform: uppercase;*/
	font-weight: 600;
	flex:unset;
}
/* Cuando el botón es el único en .ticket o .document */
.ticket .footer > button:only-child,
.document .footer > button:only-child,
.registration .footer > button:only-child {
  border-radius: 5px;
  flex: unset;
}

/* Cuando hay varios botones, el primero obtiene borde redondeado a la izquierda */
.ticket .footer > button:first-child:not(:only-child),
.document .footer > button:first-child:not(:only-child),
.registration .footer > button:first-child:not(:only-child) {
  border-radius: 5px 0 0 5px;
  flex: unset;
}

/* Cuando hay varios botones, el último obtiene borde redondeado a la derecha */
.ticket .footer > button:last-child:not(:only-child),
.document .footer > button:last-child:not(:only-child), 
.registration .footer > button:last-child:not(:only-child) {
  border-radius: 0 5px 5px 0;
}
.form-entity > .form-widget > .inputs-entity {
	/*margin-top: 15px;*/
}
.form-entity{
	/*display: grid;
	grid-template-columns: 1fr 2fr;*/
}
.form-entity,
.form-entity > form{
	height: 100%;
}
.form-entity > form{
	overflow: auto;
}
.widget-slide{
	position: absolute;
	display: flex;
	justify-content: center;
	flex-direction: column;
	bottom:0;
	left: 0;
	overflow: hidden;
	height:0%;
	right: 0;
	opacity: 0;
	transition: all 0.5s ease-out;
	border-radius: 10px 10px 0px 0px;
	box-shadow: 0px -1px 0px #e1e1e1;
	z-index: -1;
	background-color: var(--smoke);
}
.widget-slide.active{
	height:92%;
	opacity: 1;
	z-index: 5;
}
.widget-slide > .body-slide{
	
}
.widget-slide > .header-slide{
	position: sticky;
	top:0;
}
.widget-slide > .header-slide.slide-line{
	cursor:pointer;
	padding: 10px 10px 0px 10px;
}
.widget-slide > .body-slide{
	flex:1;
	overflow: auto;
	padding: 0px 10px 10px 10px;
}
.widget-slide > .body-slide > .list > li{
	border:1px solid var(--primary);
	background-color: var(--light);
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	margin:5px 0px;
}.widget-slide > .body-slide > .list > li:nth-child(odd) {
	background-color: var(--white);
}
.widget-slide > .body-slide > .list > li.active,
.widget-slide > .body-slide > .list > li:hover > button{
	background-color:var(--dark);
	color:var(--light);
}
.widget-slide > .body-slide > .list > li p{
	margin: 0;
}
.widget-slide > .footer-slide{
	position: sticky;
	bottom:0;
}


/* Widget tab*/
.widget-tab{
	display: flex;
	flex-direction: column;
	flex: 1;
}
/*
.widget-tab .tab-contents{
	display: flex;
	overflow: hidden;
	width: 100%;
}
.widget-tab .tab-contents > * {
	flex: 0 0 100%; 
	width: 100%;
}
*/
.widget-tab .tab-contents{
	flex:1;
}
.widget-entity .widget-tab .tab-contents > *{
	display: grid;
}
.widget-tab .tab-bar {
	z-index:3;
}
.widget-tab .tab-bar > li{
}
.widget-tab .tab-bar .icon{
	padding: 10px 5px 2.5px 5px;
}
.widget-tab .tab-bar > li > button.active,
.widget-tab .tab-bar > li > button:hover{
	background-color: var(--primary);
	color:var(--light);
}
.widget-tab .tab-bar > li > button{
	background-color: var(--tertiary);
	color:var(--dark);
	padding-bottom: 5px;
	margin: 0 auto;
    text-align: center;
}
.widget-tab .tab-bar > li > button > p {
  font-size: 14px;
}
/* KEYBOARD */
.widget-keyboard{
	display: flex;
  	flex-direction: column;
  	height: 100%;
	padding:10px 0px;
}
.widget-keyboard .screen{
	display: flex;
	align-items: center;
	justify-content: space-between;
}.widget-keyboard .screen > label{
	flex:1;
	margin:0px;
}.widget-keyboard .screen > label > input{
	width: calc(100% - 32px);
	border-radius: 10px 0px 0px 0px !important;
	font-size: 28px !important;
	font-weight: 600;
	text-align: right;
	color:var(--dark);
}.widget-keyboard .screen > label > b{
	display: none;
}
.widget-keyboard .screen > button{
	padding: 3.5px;
	border-radius: 0px 10px 0px 0px;
	margin: 0px;
	width: 63px;
	height: 63px;
	display: flex;
	justify-content: center;
	align-items: center;
	color:var(--light);
	background-color: var(--primary);
}.widget-keyboard .screen > button:hover{
	background-color: var(--hover);
}
.widget-keyboard .screen > button .icon > span{
	--ggs:1.6 !important;
}
.widget-keyboard .keyboard{
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	border-radius: 0px 0px 10px 10px;
	overflow: hidden;
	margin-right: 1px;
	margin-top: -1px;
}
.widget-keyboard .keyboard > button{
	width: 33.33%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}.widget-keyboard .keyboard > button:hover{
	background-color: currentColor;
}.widget-keyboard .keyboard > button:hover > p{
	color:var(--light);
}
.widget-keyboard .keyboard > button > p{
	text-align: center;
	font-weight: 600;
	font-size: 28px;
}
input[name=page]{
	width: 45px;
	border: unset;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	background-color: inherit;
}
/*Pagination*/
.widget-pagination{
	background-color: var(--light);
}
.input-page{
	font-size: 12px;
	padding-right: 10px;
	font-weight: bold;
}
.navigate-pages > li > button > div{
	padding:7.5px 7.5px !important;
}
.navigate-pages > li > button:hover{
	color:var(--dark);
}
/*SlideLine*/
.widget-slideline{
}
.widget-slideline.hide{
}
.widget-slideline .slide-line{
	position: sticky;
	top:5px;
	z-index: 2;
	cursor: pointer;
}
.widget-slideline .slide-content{
	transition: all 0.5s ease-in-out;
	overflow: auto; 
	padding: 0 7.5px;
}
.widget-slideline.displayed .slide-content{
}
.widget-slideline .slide-content.up{

}
.widget-slideline .slide-content.left{

}
.widget-slideline .slide-content.right{

}
.widget-slideline.show .slide-content.down{
	max-height: 315px;
	height: auto;
}
.widget-slideline.hide .slide-content.down{
	height: auto;
	max-height: 0;
}

.widget-chat{}

.messages{}
.handle-sender{
	border-top: 1px solid rgba(0, 0, 0, 0.3);
	background-color: white;
}
textarea.input-message {
	font-size: 16px;
	border:1px solid rgba(0,0,0,0.3);
	padding: 5px 10px;
	resize: none;
	min-height: 30px;
	border-radius:5px;
	margin: 5px 2.5px;
	box-shadow: unset;
}
textarea.input-message:focus {
	outline: none;
	box-shadow: none;
}
.btn-send > .icon {
	border-radius: 100px;
	overflow: hidden;
	background-color: var(--secondary);
	padding: 5px 5px 2.5px 2.5px;
	transform: rotate(45deg);
	margin: 5px;
}

/*CHARTS*/
.charts-content > div {
	min-width: 260px;
}
.chart-container {
	position: relative;
	height: 100%;
	width: 100%;
}
.pie-charts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.pie-chart-wrapper {
    width: 300px; /* o el tamaño que prefieras */
    height: 300px;
}
/*
@media (min-width: 768px) {
	.chart-container {
		height: 350px; 
	}
}*/