@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

/* Modificacion campo Reeadonly */
/* input[readonly] {
    background-color: white !important;
}

textarea[readonly] {
    background-color: white !important;
}

select[disabled] {
	background-color: white !important;
}


body {
	font-size: 0.75rem;
	font-family: 'Lato', sans-serif;
} */


/* Cambio de padding en el header de los modales */
/* .modal-header {
    padding: 0.5rem 1rem; 
} */


.error-campo { color: #842029!important; background-color: #f8d7da!important; border-color: #f5c2c7!important;}


.w-label-70 { width: 70px;}
.w-label-80 { width: 80px;}
.w-label-90 { width: 90px;}
.w-label-100 { width: 100px;}
.w-label-110 { width: 110px;}
.w-label-120 { width: 120px;}
.w-label-130 { width: 130px;}
.w-label-140 { width: 140px;}
.w-label-150 { width: 150px;}
.w-label-160 { width: 160px;}
.w-label-170 { width: 170px;}
.w-label-180 { width: 180px;}
.w-label-190 { width: 190px;}
.w-label-200 { width: 200px;}

.h-100-tabla {height: 100% !important}

.menorEspaciado {margin-bottom: -4px !important;}

.tabla {
	width: 97%;
	height: 320px;
}


.table { font-size: 0.75rem; }
.sinEspacio { white-space: nowrap; }
.table .thead-light th { color: #5A5A5A !important; }
.table .thead-light th { border-color: #DDD !important; background: #F2F2F2 !important; }
.table-bordered thead td, .table-bordered thead th { border-bottom-width: 1px !important; }
.table-sm th { padding: .17rem .5rem; }

.line-height-1 { line-height: 1 !important; }
.btn-sm { font-size: .75rem; }

.tamanoBoton {
	min-width: 6rem !important;
}

.text-center-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 150px; /* Ajusta este valor según tus necesidades */
  }
 

.fondoModalHeader {
	background-color: red !important;
}

.botonHover {
	background-color: #08c8a0;
}

.botonHover:hover{
	background-color: yellow;
}

.th-size-300 { width: 300px !important}
.th-size-200 { width: 200px !important}
.th-size-150 { width: 150px !important}
.th-size-100 { width: 100px !important}
.th-size-75 { width: 75px !important}
.th-size-50 { width: 50px !important}

.ajustarContendoTd1 { max-height: 1rem; line-height: 1.5; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; white-space: normal; }
.ajustarContendoTd15 { max-height: 1.5rem; line-height: 1.5; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
.ajustarContendoTd25 { max-height: 2.5rem; line-height: 1.5; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal; }
.ajustarContendoTd35 { max-height: 3.5rem; line-height: 1.5; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal; }
.ajustarContenidoTd35 { max-height: 3.5rem; line-height: 1.5; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal; }
.ajustarContendoTd50 { max-height: 5.0rem; line-height: 1.5; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; white-space: normal; }

	
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #623ddb;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
  
@keyframes rotation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}


/* Anchura de modal productos */
#modalProductos .modal-dialog {
    max-width: 57% !important;
}

@media (max-width: 600px) {
    #modalProductos .modal-dialog {
        max-width: 100% !important;
    }
}


#modalProductos .modal-header {
	padding: 0.5rem 1rem !important;
}


.chart-container {
    width: 100%;
    height: 200px;
}

#card-productos .card-header {
	padding: 0 !important; /* Para eliminar el padding */
}

#tableCarritoProductos td, #tableCarritoProductos th {
    padding: .75rem;
    vertical-align: middle; 
    border-top: 1px solid #dee2e6;
}

#customizacionPedido .modal-dialog {
    max-height: 80% !important;
}


.modal-xxlSize {
	max-width: 100%;
	height: 100vh;
	margin: 0px;
}

.modal-xxlSize>.modal-content {
    max-height: 100vh;
    height: 100vh;
}


.w-input-clientes {width: 80% !important;}
.w-input-clientes-link {width: 76% !important;}

@media (max-width: 992px) {
	.w-input-clientes {width: 67% !important;}
}

@media (max-width: 498px) {
	.w-input-clientes {width: 55% !important;}
	.font-size-responsive {font-size: 16px;}
	.font-size-responsive-modalExcel {font-size: 11px;}
	.w-input-clientes-link {width: 63% !important;}
}

@media (max-width: 400px) {
	.w-input-clientes {width: 47% !important;}
}




/* Clases para el catalogo */

/* Tipografia y fuentes para el catalogo */

@font-face {
	font-family: 'Ubuntu';
	src: url(../fonts/Ubuntu-Regular.ttf);
}

@font-face {
	font-family: 'Lato';
	src: url(../fonts/Lato-Regular.ttf);
}


@font-face {
	font-family: 'Lato-Bold';
	src: url(../fonts/Lato-Bold.ttf);
}

@font-face {
	font-family: 'Ubuntu-Bold';
	src: url(../fonts/Ubuntu-Bold.ttf);
}

@font-face {
	font-family: 'Slabo';
	src: url(../fonts/Slabo13px-Regular.ttf);
}

.font-ubuntu {font-family: 'Ubuntu';}
.font-lato {font-family: 'Lato';}
.font-lato-bold {font-family: 'Lato-Bold';}
.font-ubuntu-bold {font-family: 'Ubuntu-Bold';}
.font-slabo {font-family: 'Slabo';}


.text-end {text-align: end;}
/* Clases para cambiar diseño de scroll */
.scroll-categorias {
    overflow-x: auto;
    white-space: nowrap;
}

.scroll-categorias::-webkit-scrollbar {
    height: 8px; 
    background-color: #f1f1f1; 
}

.scroll-categorias::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 10px; 
}

.scroll-categorias::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
/* -------------------------------------------- */

/* Cambio en el modal catalogo */
#card-productos-catalogo > .card-body {padding: 0px;}
#card-productos-catalogo > .card-footer {padding: 0px;}
#modalPrevisualizarProducto___BV_modal_content_ { border-radius: 35px;}z

/* ------------------------------*/


/* Quitar efecto de click en el boton para elegir la imagen del carrusel de previsualizar */

.boton-no-efecto-click {
	background-color: transparent;
	border: none;
	box-shadow: none;
}
  
.boton-no-efecto-click:focus,
.boton-no-efecto-click:active,
.boton-no-efecto-click:hover {
outline: none;
	box-shadow: none;
	background-color: transparent
}




.input-select-opciones {
    border: 1px solid grey; 
    border-radius: -5px; 
    overflow: hidden; 
}

.input-select-opciones .input-opciones-custom,
.input-select-opciones .b-input-group-prepend {
    border: none; 
}
.input-select-opciones .b-input-group-prepend {
    background-color: #1c77d3b2; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;  
}

/* Color de la imagen elegida */
.imagenCarruselElegida {border: 2px solid greenyellow;}

@media (max-width: 500px) {
	.texto-responsive-titulo-catalogo {font-size: 25px !important;}
	.texto-responsive-descripcion-catalogo  {font-size: 18px !important;}
}

/* Seccion de customizacion de estilo basado en si un producto posee una promocion */
.bordes-promocion-activa {
    position: relative;
    border-radius: 15px;
    z-index: 1;
    overflow: hidden;
}

.bordes-promocion-activa::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 3px;
    background: linear-gradient(90deg, #8FBC8F, #4CAF50, #006400, #003300, #000000);
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    background-clip: border-box;
    background-size: 600% 600%; 
    animation: movimientoBorde 4s linear infinite; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); 
}

@keyframes movimientoBorde {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.bordes-promocion-activa .card-content {
    position: relative;
    z-index: 2;
    background-color: white;
    border-radius: 15px;
    padding: 20px; 
}

/* ----------------------------------- */

/* Seccion para la animacion de PROMOCIONES */
.contenedor-slider {
	width: 100%;
	overflow: hidden;
	position: relative;
}
  
.slider-izquierda {
	display: flex;
	flex-wrap: nowrap;
	animation: slide-izquierda 9s linear infinite;
}
  
.slide-item {
	flex: 0 0 auto;  
	box-sizing: border-box; 
}
  
  .slide-img {
	width: 95%;
	height: 23vh;
	display: block;
}
   
/* Izquierda a derecha */
@keyframes slide-izquierda {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(0); }
} 

/* Derecha a izquierda */
@keyframes slide-derecha {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
} 

/* ----------------------- */


/* Seccion de decoracion en funcion a si esta en el modo de promociones  */
.border-custom {
	border: 2px solid #3b6b38; 
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
	position: relative; 
	padding-left: 20px; 
	padding-right: 20px; 
    box-sizing: border-box;
}

.etiqueta-promocion {
    position: absolute;
    top: 50px; 
    right: 10px; 
    background-color: #006400; 
    color: white; 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-weight: bold; 
    z-index: 2;
}
.etiqueta-cantidad {
    position: absolute;
    top: 10px; 
    right: 10px; 
    background-color: #ffffff; 
    color: black; 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-weight: bold; 
    z-index: 2;
}


/* Animacion de carrito cuando algo es agregado */
@keyframes agitar {
    0% { transform: translateX(0); }
    20% { transform: translateX(-15px); } 
    40% { transform: translateX(15px); }  
    60% { transform: translateX(-15px); } 
    80% { transform: translateX(15px); }  
    100% { transform: translateX(0); }
}
  
.agitar-carrito {
    animation: agitar 1.2s ease; 
}


#card-productos-catalogo:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


.producto-card {
    margin: 1rem; 
    border: none; 
    border-radius: 12px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s; 
}
  
.producto-card:hover {
    transform: translateY(-4px); 
}
  
.producto-nombre {
    margin: 0.5rem 0; 
    font-weight: bold; 
    color: #333; 
}
  
.producto-boton {
    margin-top: 10px; 
}

.elipsis-promocion {
    font-family: Ubuntu-Bold;
    margin: 0;
    color: #0a3428;
    font-size: 1.3rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3; 
    line-clamp: 3; 
    height: 3rem; 
}


.botones-sobrepuestos {
    top: 50%; /* Posiciona los botones a la mitad verticalmente */
    right: 40px; /* Ajusta la distancia desde la derecha */
    transform: translateY(-50%); 
}

.lineas-suaves {
    width: 100%;
    height: 2px;
    background: #949c98; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    margin: 20px 0; 
      
}

.linea-vertical-suave {
    width: 2px; 
    height: 330px; 
    background: #949c98; 
    box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1); 
    margin-left: 38px;
    margin-right: 50px;
}

.linea-vertical-suave-min {
    width: 2px; 
    height: 70px; 
    margin-left: 46px;
    background: #949c98; 
    box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1); 
}
.linea-vertical-suave-min-segunda-etapa {
    width: 2px; 
    height: 120px; 
    margin-left: 10px;
    background: #949c98; 
    box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1); 
}

#calendarioReserva > .b-calendar > .b-calendar-inner {width: 300 !important; height: 100px;}


#cardInicioReserva > .card-body {
    padding: 0px;
} 


.opacity-03{ opacity: 0.3; }

.info-box {
    background-color: #f9f9f9;
    padding: 2px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.romper-texto {word-wrap: break-word; word-break: break-word; white-space: normal;}

/* Diseño del calendario */
.calendar-container {
    width: 100%;
    max-width: 300px;  
    padding: 7px; 
    font-family: Arial, sans-serif;
    background-color: #686767;
    color: #333;
}
  
  
.calendar-title {
    font-size: 1.1em; 
    font-weight: bold;
    color: #333;
}
  
.calendar-table { 
    width: 100%;
    padding: 7px;
    border-collapse: collapse;
}
  
.calendar-table th,

.calendar-table td {      
    text-align: center;
    font-size: 1.4em; 
    font-weight: bolder;
    border: none;
} 

.calendar-table th {
    background-color: #f8f9fa;
    color: #333;
}
  
.calendar-table td {
    background-color: #f9f9f9;
    height: 38px;
}
  
.calendar-day {
    width: 35px; 
    height: 35px; 
    background-color: d0d0d0;
    color: #707070;
    font-size: 1.1em; 
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
    border: none;
    margin: 2px; 
}

.calendar-day:hover { 
    background-color: #565656;
    color: white;
}
  
.today {
    background-color: #343a40 !important;
    color: white;
    transform: scale(1.2);
}


.dia-desactivado {
    background-color: #dddcdc !important;
    color: rgb(179, 173, 173);
}
  

.calendar-table td span { 
    display: block;
    height: 25px; 
}
  
td.btn-cell {   
    padding: 0;
    margin: 0;
    text-align: center; 
}

.calendar-day {
    margin: 2px;
    padding: 2px;
    width: 36px; 
    height: 36px; 
    text-align: center;
    background: none;
    background-color: #bebebe;
    color: #ffffff;
}


.bola-informacion {
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    background-color: #ADABAB; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff; 
}

.bola-texto {
    font-size: 18px; 
}

.mt-1-5-prop {
    margin-top: 0.35rem;
}

.informacion-texto {
    font-weight: 600; 
    font-family: 'Ubuntu', sans-serif; 
    font-size: 1.1rem; 
    color: #333;
    text-align: center;
}

.btn-horas {  background-color: #bdb8b8;}
.btn-hora-elegida { background-color: #000000 !important;}


.limitacion-titulos {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.no-borde-focus:focus,
.no-borde-focus:active {
    outline: none;
    box-shadow: none;
}