body{
	background: #fbf6f0;
}
body.mobiled{
	background: #fbf6f0;
}
#deliver input{
	font-size: 14px;
	border-radius: 6px;
	-webkit-box-shadow: 0px 1px 7px 4px rgba(242,243,246,1);
-moz-box-shadow: 0px 1px 7px 4px rgba(242,243,246,1);
box-shadow: 0px 1px 7px 4px rgba(242,243,246,1);
}
.btn-co{
	font-size: 16px;
	padding: 7px 10px;
	border-radius: 3px;
	margin-left: 15px;
}
.verify, #empezar{
	display: none;
}
.hugo{
	font-weight:bold;}
.btnd{
	width: 45px;
	text-align: center;
}
.loader {
    display: none;
    border: 16px solid #f3f3f3;
        border-top-color: rgb(243, 243, 243);
        border-top-style: solid;
        border-top-width: 16px;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
button.btn-ag, #confirmar button, button.btn-uedit{
	background: none;
	border:none;
}
a.disabled{
	background: red;
  	color: gray;
  	pointer-events: none;
}
.per{
	padding: 0 .4em;
    font-weight: normal;
    background: #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    border-radius: .5em;
    font-size: 14px !important;
    width: 40px;
    margin: 0 auto;
    color: #444;
}
.cont-logo{
	padding: 30px;
	margin:0 auto;
	background: white;
	margin-bottom: 20px;
}
.btn-group .btn{
	font-size: 18px;
	padding: 9px 15px;
}
.t-warning{
	border-left-color: #f0ad4e;
	border-left-width: 5px;
	border-left-style: solid;
	border-collapse: separate;
}
.t-warning .text{
	color: #f0ad4e;
}
.t-success{
	border-left-color: #5cb85c;
	border-left-width: 5px;
	border-left-style: solid;
	border-collapse: separate;
}
.t-success .text{
	color: #5cb85c;
}

#right-top{
	position: absolute;
	right: 20px;
	top:15px;
}
#right-top li{
	list-style: none;
	font-size: 20px;
	display: inline-block;
	margin-left:20px;
}
.navbar-inverse .navbar-nav > li > a:hover {
    color: #ff5023;
    text-shadow: 0 0 5px #fec;
}
.nav-c-p li a{
	color: white;
}
.btn-success {
  color: #fff;
  background-color: #79df9d;
  border-color: #79df9d; }
.btn-danger {
  color: #fff;
  background-color: #e55;
  border-color: #e55; }
.btn-primary {
  color: #fff;
  background-color: #428df1;
  border-color: #428df1; }
  
.btn-success:hover {
    color: #fff;
    background-color: #2ca189;
    border-color: #299781; }

.wizard .btn-success {
  color: #fff;
  background-color: #34bfa3;
  border-color: #34bfa3; }
  .wizard .btn-success:hover {
    color: #fff;
    background-color: #2ca189;
    border-color: #299781; }
  .wizard .btn-success:focus, .wizard .btn-success.focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 191, 163, 0.5); }
  .wizard .btn-success.disabled, .wizard .btn-success:disabled {
    background-color: #34bfa3;
    border-color: #34bfa3; }
  .wizard .btn-success:not([disabled]):not(.disabled):active, .wizard .btn-success:not([disabled]):not(.disabled).active,
  .wizard .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #299781;
    border-color: #268d78;
    box-shadow: 0 0 0 0.2rem rgba(52, 191, 163, 0.5); }
.login{
	padding: 10% 2rem 1rem 2rem;
	margin: 0 auto 2rem auto;
	overflow: hidden;
	background:url('../img/login-bg.png') #e9e9e9;
}
.login-content{
	background: #f9f9f9;
	border: 1px solid #d8d8d8;
	margin: -1rem 0 3rem;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	overflow: hidden;
	box-sizing: border-box;
}
.login input{
	background-color: #e9e9e9;
	padding: 15px;
	border:none;
	box-shadow: none;
	color:#555;
	border-radius: 8px;
	font-size: 18px;
	height: 50px;
}
.login-content h3{
	font-size: 2rem;
	color: white;
	text-align: center;
	font-weight: 500;
	padding-bottom: 20px;
}
.logo{
	max-width: 250px;
	text-align: center;
	margin: 0 auto;
	display: block;


}
.btn-pri{
	background: #ff5023;
	color: white;
	border-color: #ff5023;
	display: block;
	margin: 0 auto;
	padding:10px 20px;
}
input.error{
	border-color: red;
}
.bg-red{
	background: #CF5A4D;
	color: white;
}
.bg-blue{
	background: #5C9BD1;
	color: white;
}
.bg-green{
	background: #2ab4c0;
	color: white;
}
.menu-block .item{
	padding: 25px;
	text-align: center;
	font-size: 20px;
	border-radius: 10px;

}
.menu-block a{
	text-decoration: none;
}
.menu-block .bg-red:hover{
	background: #b53e30;
}
.menu-block .bg-blue:hover{
	background: #4f8bbc;
}
body.sistema{
	margin-top: 4%;
	background: #F2F3F8;
	/*background-image:url('../img/bg-2.jpg');*/
}
.tab-content > form > div.active{
	display: block;
}
.tab-content > form > .tab-pane{
	display: none;
}
.mesas .btn{
	padding: 25px 25px;
	width: 14.28%;
	text-align:center;
}
.mesas .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){
	border-bottom-left-radius: 0;
}
.mesas .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child){
	border-top-right-radius: 0;
}
.mesas .btn-group > .btn{
	border-radius: 8px;
}
.mesas .btn-group > .btn:nth-child(7){
	border-top-right-radius: 8px !important;
}
.mesas .btn-group > .btn:nth-child(17){
	border-bottom-left-radius: 8px !important;
}
.tab-content{
	background: white;
	padding: 20px;
	border-radius: 8px;
	margin-top: 0;
}
.platos .btn{
	padding: 8px;
	text-align: center;
	width: auto;
}
#items input{
	border: none;
	background: none;
}
.opciones a{
	color: gray;
	padding:0 6px;
}
.borradoi{
	background-image: repeating-linear-gradient(135deg, #f3f3f3, #f3f3f3 25%, #f9f9f9 25%, #f9f9f9 50%);
	background-size: 12px 12px;
}
.borradob{
	background-image: repeating-linear-gradient(135deg, #db9d58, #f3f3f3 25%, #f9f9f9 25%, #f9f9f9 50%);
	background-size: 12px 12px;
}
.borrado #btn-borrar{
	display:none;
}
.tableh,table *{
	/*border:none !important;*/
}
.tableh thead th{
	background: #f4f3fb;
	border:none;
}
.table tbody tr:nth-child(even){
	background-color: #fff;
}
.table tbody tr:nth-child(odd){
	background-color: #f7f7f7;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover{
	color: #fff;
    background-color: #384AD7;
    border-color: #384AD7; 
}
.mesas .btn-primary, .mesas .btn-primary:focus, .mesas .btn-primary:hover{
	background: #384AD7;
	border-color: #2e40d4;
}

.platos .btn-primary, .platos .btn-primary:focus, .platos .btn-primary:hover{
	background: #384AD7;
	border-color: #2e40d4;
}
.platos .btn-primary.active, .mesas .btn-primary.active{
	background: #333e93;
}
.progress-bar-striped, .progress-striped .progress-bar{
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-size: 2rem 2rem;
	animation: progress-bar-stripes 1s linear infinite;
}
.progress-bar{
	background-color: #384AD7; 
}
.carousel-inner .row > div{
	
}
.carousel-control.left, .carousel-control.right{
	background: none;
	background-color: transparent;
}
.carousel-control i {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -10px;
    color: #FF9500;
    opacity: 1;
    font-size: 30px;
}
.carousel-control{
	width: auto;
}
.panel-success .panel-heading{
	background-color: #79df9d;
  	border-color: #79df9d;
  	color: white;
}
.panel-danger .panel-heading{
	background-color: #e55;
  	border-color: #e55;
  	color: white;
}
.panel-primary .panel-heading{
	background-color: #428df1;
  	border-color: #428df1;
  	color: white;
}

.carousel-indicators{
	bottom: -10px;
}
.carousel-indicators .active{
	background-color: #FF9500;
	border: 1px solid #FF9500;
	width: 30px;
	height: 30px;
	border-radius: 20px;
}
.carousel-indicators li{
	border: 1px solid #FF9500;
	width: 30px;
	height: 30px;
	border-radius: 20px;
}
.deta_venta ul{
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.deta_venta li{
	font-size: 14px;
	list-style: none;
	margin-left: 0;
	text-align: left;
}
.deta_venta li i{
	color: #FF9400;
}
.deta_venta span{
	font-weight: bold;
	text-align: center;
	font-size: 15px;
	color: #FF5023;
}
.panel-heading span{
	font-size: 18px;
	color: white;
}
.panel-warning .panel-heading{
	color: #333;
}
.tab-content{
	/*background: url(../img/fondo_carta.jpg);*/
}
.platos .nav > li > a{
	padding: 0;
	color:white;
}
.platos .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{
	background: transparent;
	border: transparent;
	color: white;
}
.mobile .nav-tabs{
	border-bottom: none;
}
.mobile .nav-tabs > li a{
	border-radius: 4px !important;
}
.mobile .nav-tabs > li.active > a,.mobile .nav-tabs > li.active > a:focus,.mobile .nav-tabs > li.active > a:hover{
	color: #fff;
	background-color: rgba(33, 17, 2, .95);
	border-color: rgba(33, 17, 2, .95);

}
.tabs-left li a{
	color: #2ca189;
}
.mobile .bg-b{
	background: #fff;
	margin-right: -15px;
	margin-left: -15px;
	padding-left: 15px;
	padding-right: 15px;
}
.text-ag .fa{
	background: #34bfa3;
	border-radius: 4px;
	color: white;
	font-size: 16px;
	padding: 4px 6px;
}

.text-ag1 .fa{
	background: #e55;
	border-radius: 4px;
	color: white;
	font-size: 16px;
	padding: 4px 6px;
}
.platos li > a:hover{
	background: transparent;
	border: transparent;
	border-bottom: transparent;
}
.platos .nav-tabs{
	border-bottom: transparent;
}
.platos .nav-tabs > li > a{
	border:none;
}
.listado-platos{
	font-size: 16px;
	font-weight: bold;
	color: white;
}
.canti_pro{
	width: 50px;
	display: inline;
	color:black;
}
.carousel-indicators{
	width: 100%;
	position: relative;
	margin-left: 0;
	left: auto;
	bottom: auto;
}
.carousel-inner > div.item > div.row > div{
	padding-right:5px;
	padding-left: 5px;
} 
div.precio{
	color: #FF9500;
	border-radius: 25px;
	padding: 5px;
	margin-left: 15px;
	display: inline-block;
}
.disabled{
	background: rgba(197, 224, 235,.9);
}
.mobile .btn{
	border-radius: 4px !important;
	margin-left:0px !important;
	margin-bottom: 8px;
}
.confirmar{
	position: absolute;
	bottom: 20px;
	right: 20px;
	display:none;
}
.confirmar i{
	background: #34bfa3;
	color: white;
	font-size: 20px;
	border-radius: 20px;
	padding: 10px;
}
.confirmar i:hover{
	background: #299781;
}

.factura input{
	border: 2px solid #2C1D0E;
}

/*custom tabs vertical*/
/* custom inclusion of right, left and below tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 10px;
  /*border-right: 1px solid #ddd;*/
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}
.i-mesa h2{
	color: white;
	padding: 0 !important;
	margin: 0;
	
}
.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:50%;
}
#agasto .modal-dialog {
  position:absolute;
  top:40% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 25%;
  width:50%;
  height:52%;
}
#agasto .modal-body{
	bottom: 10px;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding: 15px; 
}
.modal-body {
  position:absolute;
  top:45px;
  bottom:45px;
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}
.input-number{
	border: none;
	box-shadow: none;
	text-align: center;
	height: auto;
	font-size: 14px;
}
.p-input-number{
	
	font-size: 70px;
	
}
.btn-number{
	background: none;
	border: none;
	color: #333;
	font-size: 20px;
}
.p-btn-number{
	
	font-size: 70px;
}
.abrir-mesa{
	text-align: center;
	margin:0 auto;
	margin-top: 10px;
}
.comentario{
	border: none;
	box-shadow: none;
	border-bottom: 1px #333 solid;
	width: 100%;
}
.btn-1{
	width: 49%;
	margin-top: 20px;
}
#list-p .bg-success{
	margin-bottom: 8px;
	padding: 6px 0;
}
.pt-r input{
	border:none;
	background: none;
}
.p-item{
	text-align: left;
}
span.precio{
	position: absolute;
	float: right;
	right: 6px;
}
.btn .badge{
	right: 15px;
	top:2px;
}
input#mimesa{
	border:none;
	background: none;
	width: 50%;
}
.tabs-left .tab-content{
	background: none;
	padding: 20px 0;
}
.tab-c-p{
	background: none;
    padding: 5px 8px;
    margin-top: 15px;
}
.mesas-e .btn{
	background-position: 0 0;
	border-style: solid;
	border-color: #fafafa;
	border-width: 16px 18px;
	height: 100px;
	vertical-align: middle;
	width: 12%;
	float: left;
	margin-top: 15px;
	margin-left: 20px !important;	
	border-style: solid;
	border-width: 0.015em;
	cursor: pointer;
	border-radius: 4px;
	box-shadow: 0 5px 5px rgba(0,0,0,0.1),0 -3px 0 rgba(0,0,0,0.1) inset;
	box-sizing: border-box;
	transition: background 0.1s,margin 0.2s,border-radius 0.2s;
}
.mesas-e .ct{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
	-webkit-justify-content: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: -3px;
	font-size: 0.2em;
	text-align: center;
	white-space: nowrap;
}
.mesas-e span{
	font-size: calc(1.5em + 20px);

}
.cantidad-c{
	font-size: 14px;
	padding-right: 0;
	color:#FF9B12;
	padding-left: 0;

}
.product-c{
	font-size: 16px;
	padding-left: 5px;
	padding-right: 0;
	font-weight: bold;
	cursor:pointer;
}
.precio-c{
	color:#FF9B12;
	font-size: 14px;
}
.marcar{
	font-size: 18px;
}
.marcar:hover{
	text-decoration: none;
	color:#337ab7;
}
.text-under{
	text-decoration: line-through !important;
	color: black;
}
#otros{
	position: absolute;
	width: 300px;
}
#otros select{
	width: 80px;
}
.navbar{
	min-height: 60px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover{
	background-color: #ff5023;
	box-shadow: 0 0 15px rgba(255,80,35,0.3);
	transition: background .5s;
}
.navbar-nav > li > a{
	font-size: 3rem;
}
.navbar-inverse{
	border-bottom:3px solid #ff5023;
	background-color: #fff;
}
.navbar-brand{
	padding: 5px 20px;
}
.m-widget24{
	border-right: 1px solid #ebedf2;
	background: white;
}
.row.m-row--no-padding > div {
    padding-left: 0;
    padding-right: 0;
}
.m-widget24 .m-widget24__item .m-widget24__title {
 margin-left:1.8rem;
 margin-top:3.21rem;
 display:inline-block;
 font-size:2rem;
 font-weight:600
}
.m-widget24 .m-widget24__item .m-widget24__desc {
 margin-left:1.8rem;
 font-size:1rem;
 font-weight:300
}
.m-widget24 .m-widget24__item .m-widget24__stats {
 float:right;
 margin-right:1.8rem;
 margin-top:-1.43rem;
 font-size:1.75rem;
 font-weight:600
}
.m-widget24 .m-widget24__item .progress {
 margin-top:2.14rem;
 margin-left:1.8rem;
 margin-right:1.8rem;
 margin-bottom:0.5rem;
 height:0.5rem
}
.m-widget24 .m-widget24__item .m-widget24__change {
 margin-left:1.8rem;
 display:inline-block;
 margin-bottom:2.86rem;
 font-size:1rem;
 font-weight:300
}
.m-widget24 .m-widget24__item .m-widget24__number {
 float:right;
 margin-right:1.8rem;
 display:inline-block;
 margin-bottom:2.86rem;
 font-size:1rem;
 font-weight:300
}
.m-widget24 .m-widget24__item .m-widget24__title {
 color:#575962
}
.m-widget24 .m-widget24__item .m-widget24__desc {
 color:#9699a2
}
.m-widget24 .m-widget24__item .m-widget24__change {
 color:#9699a2
}
.m-widget24 .m-widget24__item .m-widget24__number {
 color:#9699a2
}

.m-widget24 .m-widget24__item .m-widget24__stats {
    float: right;
    margin-right: 1.8rem;
    margin-top: -1.43rem;
    font-size: 2.5rem;
    font-weight: 600;
}
.m--font-brand {
    color: #716aca !important;
}
.m--font-info {
    color: #36a3f7 !important;
}
.m--font-danger {
    color: #f4516c !important;
}
.m--font-success {
    color: #34bfa3 !important;
}
.t-gastos{
	border-radius: 8px;
}
.t-gastos thead, #list_ventas thead,#list_ventas thead th {
	background-color: #9d9d9d;
	color: white;
	border:1px solid #9d9d9d !important;
	text-align: center;
}
#list_ventas tbody td{
	font-weight: bold;
}
#list_ventas tbody .opciones i{
	color: #2C1D0E;
	font-size: 17px;
} 
.btn-ag:hover{
	cursor: pointer;
}
@media (max-width:400px){
	.mesas .btn{
		padding: 6px 12px;
	}
}

/* Formas de mesas */
.mesas-e .btn.mesa-circular {
	border-radius: 50% !important;
}

.mesas-e .btn.mesa-cuadrada {
	border-radius: 8px !important;
}

.mesas-e .btn.mesa-rectangular {
	border-radius: 8px !important;
	width: 16%;
}

.mesas-e .btn.mesa-barra {
	border-radius: 25px !important;
	width: 18%;
	height: 60px;
}

/* Estilos para tabs de zonas en cajero */
.nav-zonas {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.nav-zonas > li {
	margin-bottom: 0;
}

.nav-zonas > li > a {
	transition: all 0.2s ease;
	font-weight: 500;
}

.nav-zonas > li > a:hover {
	background: rgba(255,255,255,0.3) !important;
}

.nav-zonas > li.active > a,
.nav-zonas > li.active > a:hover,
.nav-zonas > li.active > a:focus {
	background: #fff !important;
	color: #333 !important;
	border: none;
}

.zona-count {
	font-size: 10px;
	padding: 2px 6px;
	min-width: 18px;
}

/* Mesas en cajero con zonas */
.mesas-zona {
	padding: 10px 0;
}

/* Canvas de mesas en cajero - igual que editor */
.canvas-mesas-view {
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Mesas en cajero - estilo similar al editor */
.mesa-cajero {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 3px solid #333;
	transition: all 0.2s;
	user-select: none;
	z-index: 10;
}

.mesa-cajero:hover {
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
	z-index: 20;
	transform: scale(1.05);
}

.mesa-cajero.selected,
.mesa-cajero:has(input:checked) {
	border-color: #ff5023;
	box-shadow: 0 0 0 4px rgba(255,80,35,0.3), 0 4px 15px rgba(0,0,0,0.25);
	z-index: 30;
}

/* Formas */
.mesa-cajero.circular {
	border-radius: 50%;
}

.mesa-cajero.cuadrada {
	border-radius: 8px;
}

.mesa-cajero.rectangular {
	border-radius: 8px;
}

.mesa-cajero.barra {
	border-radius: 25px;
}

/* Estados - colores */
.mesa-cajero.estado-libre {
	background: #79df9d;
}

.mesa-cajero.estado-ocupada {
	background: #e55;
}

.mesa-cajero.estado-reservada {
	background: #428df1;
}

.mesa-cajero.estado-inactiva {
	background: #999;
	opacity: 0.6;
}

/* Contenido de mesa */
.mesa-cajero .mesa-num {
	font-weight: bold;
	font-size: 18px;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.mesa-cajero .mesa-cap {
	font-size: 11px;
	color: #fff;
	opacity: 0.9;
	margin-top: 2px;
}

.mesa-cajero .mesa-cap i {
	margin-right: 2px;
}

/* ========================================
   TABS DE ZONAS EN CAJERO - Estilo fu.do
   ======================================== */
.nav-zonas-cajero {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	border-bottom: none !important;
	margin: 0;
	padding: 0;
}

.nav-zonas-cajero > li {
	margin: 0;
	float: none;
}

.nav-zonas-cajero > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: none !important;
	border-radius: 8px 8px 0 0;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.2s ease;
	text-decoration: none;
}

.nav-zonas-cajero > li > a:hover {
	background: rgba(255,255,255,0.25);
	color: #fff;
}

.nav-zonas-cajero > li.active > a,
.nav-zonas-cajero > li.active > a:hover,
.nav-zonas-cajero > li.active > a:focus {
	background: #fff !important;
	color: #333 !important;
	border: none !important;
	box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

.zona-color-indicator {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Contenedor del canvas en cajero */
.cajero-canvas-container {
	background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%) !important;
	box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}

.cajero-canvas-container .tab-pane {
	background: transparent;
}

/* Leyenda de estados */
.leyenda-estados {
	display: flex;
	gap: 20px;
	justify-content: center;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	margin-bottom: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.leyenda-estados .leyenda-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #666;
}

.leyenda-estados .leyenda-color {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}

/* ========================================
   INTERFAZ POS CAJERO - Estilo fu.do
   ======================================== */

/* Contenedor principal */
.pos-container {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	overflow: hidden;
	max-width: 100%;
}

/* Header */
.pos-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	color: #fff;
}

.pos-header-libre { background: #79df9d; }
.pos-header-ocupada { background: #e55; }
.pos-header-activa { background: #e55; }
.pos-header-conpedido { background: #428df1; }
.pos-header-inactiva { background: #999; }

.pos-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pos-header-left h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.pos-mesa-icon {
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.2);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.pos-header-right {
	display: flex;
	gap: 8px;
}

.pos-header-btn {
	width: 40px;
	height: 40px;
	background: rgba(0,0,0,0.2);
	border: none;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	transition: background 0.2s;
}

.pos-header-btn:hover {
	background: rgba(0,0,0,0.3);
}

.pos-estado-badge {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
}

.pos-estado-badge.estado-libre { background: #fff; color: #27ae60; }
.pos-estado-badge.estado-ocupada { background: #fff; color: #e55; }
.pos-estado-badge.estado-inactiva { background: #fff; color: #999; }

/* Info bar */
.pos-info-bar {
	display: flex;
	gap: 20px;
	padding: 12px 20px;
	background: #f8f9fa;
	border-bottom: 1px solid #eee;
	font-size: 14px;
	color: #666;
}

.pos-info-bar i {
	margin-right: 5px;
	color: #999;
}

/* Body */
.pos-body {
	padding: 20px;
}

/* Form sections */
.pos-form-section {
	margin-bottom: 20px;
}

.pos-form-section label {
	display: block;
	font-weight: 500;
	margin-bottom: 8px;
	color: #333;
}

.pos-input {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.2s;
}

.pos-input:focus {
	border-color: #ff5023;
	outline: none;
}

/* Quantity control */
.pos-quantity-control {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pos-qty-btn {
	width: 40px;
	height: 40px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
	font-size: 16px;
	color: #666;
	transition: all 0.2s;
}

.pos-qty-btn:hover {
	background: #f5f5f5;
	border-color: #ccc;
}

.pos-qty-input {
	width: 60px;
	text-align: center;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
}

/* Buttons */
.pos-btn {
	padding: 12px 24px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

.pos-btn-lg {
	padding: 15px 30px;
	font-size: 16px;
}

.pos-btn-success {
	background: #27ae60;
	color: #fff;
}

.pos-btn-success:hover {
	background: #219a52;
}

.pos-btn-warning {
	background: #ff9800;
	color: #fff;
}

.pos-btn-warning:hover {
	background: #f57c00;
}

.pos-btn-dark {
	background: #333;
	color: #fff;
}

.pos-btn-dark:hover {
	background: #222;
}

.pos-btn-outline {
	background: #fff;
	border: 1px solid #ddd;
	color: #666;
}

.pos-btn-outline:hover {
	background: #f5f5f5;
}

.pos-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pos-actions {
	text-align: center;
	margin-top: 30px;
}

/* Section */
.pos-section {
	margin-bottom: 20px;
}

.pos-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background: #666;
	color: #fff;
	border-radius: 6px 6px 0 0;
}

.pos-section-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.pos-config-btn {
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
}

.pos-config-btn:hover {
	background: rgba(255,255,255,0.2);
}

/* Search row */
.pos-search-row {
	display: flex;
	gap: 10px;
	padding: 15px;
	background: #f8f9fa;
}

.pos-add-btn {
	width: 50px;
	height: 50px;
	background: #ff5023;
	border: none;
	border-radius: 6px;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	transition: background 0.2s;
}

.pos-add-btn:hover {
	background: #e04520;
}

.pos-search-input {
	flex: 1;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
}

.pos-search-input:focus {
	border-color: #ff5023;
	outline: none;
}

/* Productos rápidos - Compacto 2 columnas */
.pos-productos-rapidos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	padding: 10px;
	background: #fff;
	border: 1px solid #eee;
	border-top: none;
	border-radius: 0 0 6px 6px;
}

.pos-producto-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

.pos-producto-btn:hover {
	border-color: #ff5023;
	background: #fff5f2;
}

.pos-producto-btn .prod-id {
	font-size: 10px;
	color: #999;
	background: #f0f0f0;
	padding: 2px 5px;
	border-radius: 3px;
}

.pos-producto-btn .prod-nombre {
	font-size: 12px;
	font-weight: 500;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Items del pedido - Compacto */
.pos-items-container {
	margin: 10px 0;
}

.pos-item {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	background: #fff8e1;
	border-left: 3px solid #ff9800;
	margin-bottom: 6px;
	border-radius: 0 4px 4px 0;
	gap: 8px;
}

.pos-item .item-qty-control {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.pos-item .item-qty-btn {
	width: 26px;
	height: 26px;
	background: #ff9800;
	border: none;
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
	font-size: 12px;
}

.pos-item .item-qty-input {
	width: 32px;
	text-align: center;
	padding: 4px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-weight: 600;
	font-size: 12px;
}

.pos-item .item-nombre {
	flex: 1;
	font-weight: 500;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.pos-item .item-precio-label {
	color: #999;
	font-size: 12px;
	flex-shrink: 0;
}

.pos-item .item-precio-input {
	width: 60px;
	text-align: right;
	padding: 4px 6px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-weight: 600;
	font-size: 12px;
	flex-shrink: 0;
}

.pos-item .item-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.pos-item .item-comment-btn,
.pos-item .item-delete-btn {
	width: 26px;
	height: 26px;
	background: #f5f5f5;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	color: #666;
	font-size: 12px;
}

.pos-item .item-delete-btn {
	color: #e55;
}

/* Items existentes - Compacto */
.pos-items-existentes {
	margin: 10px 0;
}

.pos-item-existente {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	background: #f8f9fa;
	border-bottom: 1px solid #eee;
	gap: 10px;
}

.pos-item-existente.item-anulado {
	background: repeating-linear-gradient(135deg, #f8f8f8, #f8f8f8 10px, #fff 10px, #fff 20px);
	opacity: 0.6;
}

.pos-item-existente .item-cantidad {
	width: 24px;
	height: 24px;
	background: #e0e0e0;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 12px;
	flex-shrink: 0;
}

.pos-item-existente .item-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pos-item-existente .item-nombre {
	font-weight: 500;
	color: #333;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pos-item-existente .item-comentario {
	font-size: 11px;
	color: #666;
	font-style: italic;
}

.pos-item-existente .item-anulado-motivo {
	font-size: 11px;
	color: #e55;
}

.pos-item-existente .item-precio {
	font-weight: 600;
	color: #333;
	font-size: 13px;
	flex-shrink: 0;
}

.pos-item-existente .item-delete-btn {
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: #999;
	transition: all 0.2s;
	flex-shrink: 0;
}

.pos-item-existente .item-delete-btn:hover {
	background: #fee;
	color: #e55;
}

/* Confirmar section */
.pos-confirmar-section {
	padding: 15px;
	background: #fff8e1;
	border-radius: 6px;
	margin: 15px 0;
}

.pos-confirmar-total {
	font-size: 16px;
	margin-bottom: 15px;
}

.pos-confirmar-total span {
	font-weight: 600;
}

.pos-confirmar-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

/* Footer */
.pos-footer {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 2px solid #eee;
}

.pos-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	background: #666;
	color: #fff;
	border-radius: 6px;
	margin-bottom: 15px;
}

.pos-total-label {
	font-size: 18px;
	font-weight: 500;
}

.pos-total-value {
	font-size: 28px;
	font-weight: 700;
}

.pos-footer-actions {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.pos-footer-actions .pos-btn {
	flex: 1;
}

.pos-btn-descuento {
	max-width: 200px;
}

/* Ajustes para sidebar más ancho */
#mostrarmesa {
	background: #fff;
	border-radius: 8px;
	min-height: calc(100vh - 200px);
}

#mostrarmesa .pos-container {
	height: 100%;
}

/* Footer compacto */
.pos-footer-actions {
	flex-wrap: wrap;
}

.pos-footer-actions .pos-btn {
	min-width: 120px;
}

/* ========================================
   MODAL DE PRODUCTOS ESTILO FU.DO
   ======================================== */

#modal-productos .modal-dialog {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	margin: 50px auto !important;
	width: 700px;
	height: auto;
}

#modal-productos .modal-content {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	min-height: auto;
	height: auto;
}

#modal-productos .modal-body {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
}

#modal-productos .modal-footer {
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
}

/* Categorías del modal */
.modal-cat-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	cursor: pointer;
	border-bottom: 1px solid #e0e0e0;
	transition: all 0.2s;
	font-size: 14px;
	color: #333;
}

.modal-cat-item:hover {
	background: #eee;
}

.modal-cat-item.active {
	background: #ff5023;
	color: #fff;
}

.modal-cat-item .cat-nombre {
	flex: 1;
}

.modal-cat-item .cat-badge {
	width: 10px;
	height: 10px;
	background: #ff5023;
	border-radius: 50%;
}

.modal-cat-item.active .cat-badge {
	background: #fff;
}

/* Productos del modal */
.modal-prod-item {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
	transition: background 0.2s;
	gap: 15px;
}

.modal-prod-item:hover {
	background: #fafafa;
}

.modal-prod-item .prod-radio {
	width: 20px;
	height: 20px;
	border: 2px solid #ccc;
	border-radius: 50%;
	flex-shrink: 0;
	transition: all 0.2s;
}

.modal-prod-item .prod-radio.selected {
	border-color: #ff5023;
	background: #ff5023;
	position: relative;
}

.modal-prod-item .prod-radio.selected::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
}

.modal-prod-item .prod-nombre {
	flex: 1;
	font-size: 14px;
	color: #333;
}

.modal-prod-item .prod-cant-badge {
	width: 24px;
	height: 24px;
	background: #ff5023;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
}

.modal-prod-item .prod-precio {
	font-weight: 600;
	color: #333;
	font-size: 14px;
	min-width: 70px;
	text-align: right;
}

/* Resultados de búsqueda vacíos */
.no-results {
	text-align: center;
	padding: 30px;
	color: #999;
}

.no-results i {
	font-size: 40px;
	margin-bottom: 10px;
	display: block;
}

/* Dropdown de búsqueda en sidebar */
.search-dropdown {
	position: absolute;
	left: 60px;
	right: 0;
	top: 100%;
	z-index: 1000;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	max-height: 200px;
	overflow-y: auto;
}

.search-result-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
	transition: background 0.2s;
}

.search-result-item:hover {
	background: #fff5f2;
}

.search-result-item:last-child {
	border-bottom: none;
}

.search-result-item .prod-id {
	font-size: 12px;
	font-weight: 600;
	color: #666;
	background: #f0f0f0;
	padding: 3px 8px;
	border-radius: 3px;
	min-width: 35px;
	text-align: center;
}

.search-result-item .prod-nombre {
	flex: 1;
	font-weight: 500;
	color: #333;
}

.search-result-item .prod-precio {
	color: #ff5023;
	font-weight: 600;
}

/* Posicionamiento relativo para el contenedor de búsqueda */
.pos-search-row {
	position: relative;
}