/* 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"],
.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="actions"],
.dropdown[data-dialog*="-actions"],
.dropdown[data-dialog*="-filters"],
.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,
.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,
.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;
}
.items-by-category > li > button > .item-concept{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px;
	background-color: rgba(0,0,0,0.5);
	color:var(--light);
}
.items-by-category > li > button > .item-concept > p:first-child{
	font-size: 1.2rem;
}
.items-by-category > li > button > img{

}
/* 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{
	display: flex;
	align-items: center;	
	justify-content: center;
	flex:1;
	padding:6.5px 5px;
}
.ticket .footer > button > p,
.document .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 {
  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) {
  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) {
  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;
	height: 100%;
}
/*
.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;
	height: 100%;
	overflow: auto;
}
.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: 5px 5px 2.5px 5px;
}
.widget-tab .tab-bar > li > button > p{
	font-size: 14px;
}
.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;
	padding-top: 5px;
	margin: 0 auto;
    text-align: center;
}
/* 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: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;
}
/*Widget Gallery*/
.widget-gallery .gallery-items{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 20px;
	padding: 10px;
}
.widget-gallery .upload-image,
.widget-gallery .gallery-image {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	aspect-ratio: 1 / 1;
	border: 4px solid transparent; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
}
.widget-gallery .upload-image {
	align-items: center;
	justify-content: center;
	border: 4px dashed var(--primary);
	border-radius: 20px; 
}
.widget-gallery .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
/* --- Efectos Hover en la Tarjeta --- */
.widget-gallery .upload-image:hover,
.widget-gallery .gallery-image:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px); /* Pequeño efecto de "elevación" */
}
.widget-gallery .gallery-image .delete-image {
	display: flex;
    border-radius: 100px;
    position: absolute;
    right: 5px;
    z-index: 2;
    top: 5px;
}.widget-gallery .gallery-image .delete-image .icon{
    padding: 10px 10px !important;
}
.widget-gallery .gallery-image .checked-image > span {
	position: absolute;
    top: 15px;
    left: 10px;
}
.widget-gallery .gallery-image:has(input[type="radio"]:checked) {
    border-color: var(--primary); /* Borde azul brillante */
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4); /* Sombra azulada */
    transform: scale(1.02); /* Un poco más grande para destacarlo */
}
/**IMAGE CROPPER**/
/* --- ESTILOS DEL FORMULARIO --- */


#fileInputLabel {
	display: block;
	padding: 12px 20px;
	border-radius: 6px;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s;
}


/* Ocultamos el input de archivo real */
#fileInput {
	display: none;
}

/* --- ESTILOS DEL EDITOR/RECORTADOR --- */
#cropperContainer {
	display: none; /* Oculto hasta que se carga una imagen */
	position: relative;
	width: 100%;
	max-width: 100%;
	background-color: #eee;
	border-radius: 8px;
	overflow: hidden; /* Para contener la imagen */
}

#imageToCrop {
	display: block;
	max-width: 100%;
	height: auto;
	/* Evita que el usuario arrastre la imagen (conflicto con el recorte) */
	pointer-events: none; 
	user-select: none;
}

/* --- ESTILOS DEL CUADRO DE RECORTE --- */
#cropBox {
	position: absolute;
	box-sizing: border-box; /* Importante para que el borde no sume al tamaño */
	border: 2px dashed #ffffff;
	cursor: move;
	/* Sombra exterior que crea el efecto de superposición oscura */
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
	user-select: none;
}

/* OPCIONAL: Para un recortador circular */
/*
#cropBox {
	border-radius: 50%;
}
*/

/* --- Asa de redimensionamiento (esquina inferior derecha) --- */
#resizeHandle {
	position: absolute;
	bottom: -7px;
	right: -7px;
	width: 14px;
	height: 14px;
	background-color: #ffffff;
	border: 1px solid #333;
	border-radius: 50%;
	cursor: se-resize;
}

/* --- BOTONES DE ACCIÓN --- */
.button-container {
	display: flex;
	gap: 10px;
	margin-top: 15px;
}


#submitButton {
	display: none; /* Oculto al inicio */
}

#submitButton:disabled {
	background-color: #ccc;
	opacity: 0.7;
	cursor: not-allowed;
}

/* --- VISTA PREVIA DEL RESULTADO --- */
#resultContainer {
	margin-bottom: 20px;
	text-align: center;
}

#croppedResultImage {
	max-width: 200px;
	height: auto;
	border-radius: 8px;
}