/*@import url('https://fonts.googleapis.com/css?family=Nunito:400,600&display=swap');*/
@font-face {
       font-family: 'segoe';
       src: url('fonts/segoe-ui.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
}
body{padding:0; margin:0; padding-bottom: 100px; }
*{box-sizing: border-box; font-family:"segoe"; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
::selection{color:#3483fa; background:#DCF2FF; }
:root {
  --color1: #60097b;
  --colorBtn1: #a722d1;
  --color2: #3483fa;
}
input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

.container{width: 100%; padding:0px }
.header{width: 100%; background-color: var(--color1); z-index: 555; position: relative; border-radius: 0 0 12px 12px; }
@keyframes gradient{0%{background-position:17% 0%}50%{background-position:84% 100%}100%{background-position:17% 0%}}

.header .logoHeader{float: left; width: 50%; text-align: center}
.header .logoHeader a{display: block; }
.header h5{float: left; width: 40%; font-size: 20px; text-align: center; margin:10px 0 10px 0}
.header .leyendaHeader{float: left; width: 40%; text-align: center; margin-top:0px; font-size: 20px; font-weight: 600; background:linear-gradient(121deg, #3790e6, #268910, #e43096, #3539ea); animation:gradient 10s ease infinite; background-size:800% 800%; border-radius:10px; color: white}
.header .leyendaHeader a{text-decoration: none; color: white; display: block; padding: 12px}
.header .leyendaHeader a:active, .header .leyendaHeader a:hover{text-decoration: underline}
.header .logoHeader img{max-height: 115px; height: 80px;}
.empresas{width: 100%; }


.granLayoutEmpresas{padding:20px 0 75px; max-width: 800px; margin: auto;}

.itemEmp{width: 100%; padding:10px 3px; position: relative; border-bottom: solid 1px #ccc; cursor: pointer; }
.itemEmp:active{background-color: rgba(0,0,0,.2); }

.itemEmpMain{position: relative; width: 100%; display: block; }

.prodOculto{display: none}

.itemEmpMainOculto{background-color: #DFDCDC !important;}
.itemEmpMainOculto .imgLogo, .itemEmpMainOculto .card-actions{filter: grayscale(100%);}
.itemEmpMainOculto{background-color: #DFDCDC;}

.itemCatalogoOculto{background-color: #DFDCDC;}
.itemCatalogoOculto .empLeft img{filter: grayscale(70%);}
.itemCatalogoOculto .btnCant1, .itemCatalogoOculto .btnCant3{background-color: #ccc !important;}

.itemCatalogoOculto .prodOculto, .itemEmpMainOculto .prodOculto {
    background-color: #E4650F !important;
    border-radius: 10px;
    padding: 4px 7px;
    color: white;
    font-size: 12px;
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 6px;
}


.estadoOculto{
	background-color: #E4650F;
	border-radius: 10px;
	padding: 4px 8px;
	color: white;
	font-size: 12px;
	display: inline-block;
	position: absolute;
    width: max-content;
    right: -35px;
    top: -11px;
}


.estadoActivo{
	background-color: #00a650;
}


.separadorHorario{
	margin-top: 3px;
	border-top: 1px solid #bbb;
	clear: both;
	padding-bottom: 3px;
}

.columnaRight {
    position: relative; float: left; width: calc(100% - 140px) !important; 
}

.columnaRightTop {
    left: 0px;
    top: 5px;
}

.divShareEmp{position: relative;
    top: 0;
    left: 0;
    z-index: 5445454545454;
    display: block;
    height: 52px;
    margin-top: 29px;
    border-top: solid 1px #e99999;}
.shareLabel{font-size: 13px; color: #333; position: absolute; bottom: 10px; right: 120px;}
.shareEmp{background-image: linear-gradient(to top, #15672e 0%, #06bf7b 100%); border-radius: 100px;
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: -1px;
    right: 8px;}
.shareEmp img{width: 26px;
    height: 26px;
    position: absolute;
    top: 7px;
    left: 7px;}

.shareFEmp{background-image: linear-gradient(to top, #01448a 0%, #248cd6 100%); right:70px }

.logoEmp{width: 66px; height: 66px; border-radius: 100%; position: relative; text-align: center; float: left; padding: 3px; margin-right: 10px; }


.logoEmpActivo{background: linear-gradient(90deg, rgba(119,63,251,1) 0%, rgba(252,70,107,1) 100%);}

.logoEmp .imgLogo{width: 60px; height: 60px; object-fit: cover; border-radius: 100%; border: 3px solid transparent; background-color: transparent; }


.logoEmpTop {
    width: 43px;
    height: 43px;
    margin-left: 10px;
    margin-top: 20px;
    padding: 0;
}

.circle1, .circle2{display: none}


.logoEmpTop .imgLogo{width: 43px; height: 43px;}


.nombreEmp{font-size: 15px; color: #333; padding: 5px 12px; font-weight: lighter; text-align: center; top: 7px; position: relative; }

.nombreEmpIndex{text-align: left; }
.nombreEmpIndex *{user-select: none; }


.nombreEmpTop{font-size: 19px; color: #fff; cursor: pointer; top: 0; text-align: left; }

.nombreEmpTop a{text-decoration: none; color: #fff; }

.horaEstadoTop{font-size: 15px;
    text-align: left;
    top: -10px;
    position: relative; }

.nombreEstado{font-size: 16px; color: #555; padding: 5px 12px 5px 0;  /*overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/ text-transform: capitalize; }

.nombreEstadoTxt1, .nombreEstadoTxt2{font-size: 14px; color: #777; font-weight: lighter; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-transform: none; }

.nombreEstadoTxt2{
	text-align: left; margin-top: 3px; font-size: 13px;
}


.telefEmp{cursor: pointer; display: block; color: #888; font-size: 20px; text-transform: none;}
.direcEmp{font-size: 17px;}

.rubroEmp{font-size: 14px;
    color: #777;
    padding: 0 12px;
    height: 40px;
    overflow: hidden;}
.direccionEmp{font-size: 16px; color:#555; padding:0px 12px; height: 28px; overflow: hidden; }
.direccionEmp img{vertical-align: sub;}
a.direccionEmp{color: #1e479b; padding: 0px 12px; text-decoration: none;}


.map_empresa{width: 100%; }
.map_empresa img{width: 90%; margin-left: 5%; border-radius: 7px; transition: .2s; }
.map_empresa img:hover{transform: scale(1.1); }

.divEnvios{color: #00a650;
    font-size: 14px;
    text-align: left;
    bottom: 0px;
    right: 0;
    width: 100%;
    padding: 3px 0px;
    background-color: #ffffff; text-transform: none; }
.divEnvios img {width: 22px; vertical-align: sub; margin-right: 5px; }

.horarioEmp{font-size: 14px;
    color: #28326e;
    padding: 0px 12px;
    word-break: break-word;
    height: 35px;
    overflow: hidden; }
.pagosEmp{padding:2px 12px; }
.pagosEmp span{font-size: 15px; color:#555; padding:5px 12px; border-radius: 50px; background-color: #ebebeb;  margin: 3px; white-space: pre; display: inline-block;}
.contactoEmp{padding: 7px; background-image: linear-gradient(to top, #1E479B 0%, #4681C7 100%); width: 90%; margin: 9px 5%; border-radius: 7px; text-align: center;}
.contactoEmp a{font-size: 18px; color:#fff; display: block; text-decoration: none;}
.contactoEmp a img{width:15px; height: 15px; vertical-align: text-top; margin-right: 10px; margin-top: 5px;}

b, h1, h2, h3, h4, h5, h6{font-weight:500}

input,textarea, select{ border-radius:15px; outline:none; border: solid 1px #baaacd; box-shadow:0 2px 2px 0 rgba(0,40,0,.4); padding:12px 10px; width:100%; margin:10px 0; color:#444; font-size:17px; display:inline-block; background-color:white}
input[type="checkbox"]{width: auto; margin-right: 10px;}
input:focus,textarea:focus, select:focus{border:solid 1px #705590; box-shadow:0 4px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.12);}
textarea{box-sizing: border-box; resize:none;}
input::placeholder,textarea::placeholder, select::placeholder{color:#ccc}


.formData {
    width: 50%;
    margin: 0 25%;
    padding: 30px;
}

#loading, #loadingModal{display: none; text-align: center; padding:40px 0}
.toast{color:white; padding:20px 25px; display:none; position:fixed; bottom:20px; box-shadow:0 5px 10px 5px rgba(0,0,0,.4); 
	
	max-width: 80%;
    left: 0;
    width: max-content;
    margin: auto;
    z-index: 9300544;
    right: 0;
	
	text-align: center; border-radius: 7px; text-transform: uppercase}
.divInput{ position:relative; padding:10px 7px; float: left; width:100%}
#DivBotonOk{width:100% !important}
.divInput>label{color:#1F3F6C; position:absolute; top:5px; left:20px; font-size:12px; }
.divInput>div>label{color:#1F3F6C; font-size:12px; display: block}

.divInput .btnMas{position: absolute; right:25px; top:28px; width: 35px; height: 35px; background-color: white}
.divInput .btnMas img{width: 30px; height: 30px; filter: grayscale(100%); cursor: pointer; user-select: none; transition: .2s; border-radius: 100%;}
.divInput .btnMas img:hover{filter: grayscale(0%); box-shadow: 0 2px 4px 2px rgba(0,0,0,.17)}

.btnEnviar{background-color:var(--colorBtn1); color: white; box-shadow: 0 2px 4px 2px rgba(0,0,0,.1); padding:17px 14px; font-size:17px; text-align:center; text-transform: uppercase; border-radius:5px; cursor: pointer; user-select: none !important; width:100%; float: right}

.btnVolver{
	background-color:white; color:var(--color1); border: solid 1px var(--color1); box-shadow: none; text-transform: none;
}

.btnVolver:focus,.btnVolver:active{
	background-color: #BA15ED; color: white;
}

.btnSalir{
	color:#E93333; border: solid 1px #E93333; 
}

.btnSalir:focus,.btnSalir:active{
	background-color:#E93333; 
}

.ContainerImg{width:90%; margin:10px 5% 30px 5%; display:block; position:relative; text-align: center; }
.ContainerImg>img{width:25%; border-radius:5px; margin:10px 20%}
.containerButtonImg{ user-select: none}
.labelButtonImg{background-color:var(--color1); border-radius:50%; height:56px; margin:auto; min-width:56px; width:56px; padding:0; overflow:hidden; box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24); position:relative; outline:none; cursor:pointer; text-decoration:none; text-align:center; font-weight:500; display:inline-block; border:none;}

.labelButtonImg .material-icons{vertical-align:middle; position:absolute; top:50%; left:50%; transform: translate(-12px,-12px); line-height:24px; width:24px; font-style:normal; font-size:24px; display:inline-block; direction:ltr;}

.NombreFile{margin:10px 5%; width: max-content; background-color:#e5e5e5; border-radius:3px; padding:4px 22px; display:none; word-wrap: break-word}

.imgABM{
	width: 40% !important;
    margin: 0 30% !important;
}



.divCheckbox{margin-top: 5px}
.divCheckbox > label{font-size: 16px !important}


.registroAdmin{width: 50%; margin: 40px 25%}

.btnNuevo{background-color:#1F3F6C; color: white; box-shadow: 0 2px 4px 2px rgba(0,0,0,.1); padding:10px 14px; font-size:15px; text-align: center; position:absolute; z-index:9; text-transform: uppercase; top: 130px; right: 5%; border-radius:5px; cursor: pointer; user-select: none}

.buscar{width:100%; display:block; margin:7px 0}

.containerLista{width: 90%; margin: 20px 5%}


.divBuscarIndex{
	padding: 0px;
    margin: auto;
	max-width: 800px;
}


.divBuscarMisEmpresas{
	width: 100%; margin: 10px 0; padding: 20px;
}


.itemListaHead{background-color:#1F3F6C;}
.itemListaHead>div{color:white}
.itemLista{border-top: solid 1px #1F3F6C; cursor:pointer; display: block; transition: .4s}
.itemLista:last-child{border-bottom: solid 1px #1F3F6C}
.itemLista:hover{background-color: #DCE6F4}
.col5,.col10,.col15,.col20,.col25,.col30,.col35,.col40,.col45,.col50{padding: 10px 5px; float: left; color: #333; text-align: left; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.col5{width:5%}
.col10{width:10%}
.col15{width:15%}
.col20{width:20%}
.col25{width:25%}
.col30{width:30%}
.col35{width:35%}
.col40{width:40%}
.col45{width:45%}
.col50{width:50%}
.iconLista{width:28px; height:28px; position: absolute; top:6px; left:40%}

.infoEmp{display: none}
.divHidden{display: block}

.flechaArriba{transform: rotate(-180deg);}



.rubros{
	display: none;
	margin-top: 50px;
	padding: 20px 20px 0 20px;
}

.itemRubro{
	
}



.rubrosHidden{display:none}

.arrowMenuRubros{width:60%;
    background-color: #ccc;
    text-align: center;
    padding: 5px;
    margin-top: 50px;
    margin-left:20%;
    border-radius: 20px;}

.flechaMenuRubro{width:40px; height: 40px; transition:.3s}

.itemRubro:active , .itemRubro:hover {background-image: linear-gradient(to bottom, #6e0491 0%, #c979e3 100%);}

.itemRubro {
	text-decoration: none;
	display: block;
    color: white;
    text-align: left;
    font-size: 18px;
    background-image: linear-gradient(to top, #152474 0%, #59becb 100%);
    float: left;
	position: relative;
      padding: 12px 5px 14px 20px;
      width: 19%;
      border-radius: 20px;
      margin: 8px .5%;
}


.itemRubro .flechaRubro{transform: rotate(-90deg); vertical-align: middle; margin-top: 0px; filter: brightness(5.5); position: absolute; top: 13px; right: 10px;}


.titleRubros{
    text-align: center;
    margin-top: 40px;
    font-size: 30px;
    text-decoration: underline;
    color: #1e479b;
}


.itemEmpIndex {
    min-height: 175px;
    margin: 9px 0.5%;
    background-image: none;
    border-bottom: 3px solid #248cd6;
    background-color: #efefef;
}

.itemEmpIndex .logoEmp{display:none}
.itemEmpIndex .logoEmp img{}
.itemEmpIndex .deliveryEmp{display:none}
.itemEmpIndex .columnaRight{min-height: 0; padding-bottom: 0; width:100%;}
.itemEmpIndex .nombreEmp{margin-bottom: 5px;}
.itemEmpIndex .rubroEmp{max-height: 60px; overflow: hidden}
.itemEmpIndex .shareEmp{display:none}
.itemEmpIndex .shareLabel{display:none}
.itemEmpIndex .separadorHorario{display:none}
.itemEmpIndex .horarioEmp{display:none}
.itemEmpIndex .contactoEmp{display:none}
.itemEmpIndex .infoEmp{display:none}
.itemEmpIndex .divHidden{display:none}
.itemEmpIndex .pagosEmp{}
.itemEmpIndex .direccionEmp{}




.acciones{
	width: 100%;
}
.divBtnAccion:hover{background-color: #F5F5F5;}
.divBtnAccion{
	width: 85px;
    float: left;
    padding: 5px;
    border-right: 1px solid #ccc;
}

.btnAccion{
    font-size: 12px;
    text-decoration: none;
    width: 100%;
    display: block;
    height: 50px;
    position: relative;
	cursor: pointer;
}

.btnAccion span{
	display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    bottom: 2px;
    width: 100%;
    left: 0;
    text-align: center;
	color: #777;
}

.btnAccion img{
	width: 24px;
    height: 24px;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -12px;
}






.btnEmpresas{
	background-color: var(--color1);
    color: white;
    box-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);
    padding: 10px;
    font-size: 15px;
    text-align: center;
    position: relative;
    z-index: 9;
    text-transform: uppercase;
    top: 20px;
    right: 18%;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
	float: right;
    margin-left: 10px;
}

.btnEmpresas img{
	position: absolute;
    top: 10px;
    left: 9px;
    width: 20px;
	display: none;
}


.itemEmp100{
    width: 100%;
}



.deleteEstado, .hideEstado, .editEstado{
    position: absolute;
    right: 15px;
    top: 37px;
	z-index: 1400;
	cursor: pointer;
}

.hideEstado{
    right: 70px;
}

.editEstado{
    right:125px;
}


.loadingItemEstado{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	z-index: 121212121212;
	text-align: center;
	background-color: rgba(255,255,255,0.6);
}



.loadingItemEstado img{
	width:50px;
}


.contEmpEstados{
	position: absolute; width: 100%; height: 100%; top: 0;
    left: 0;
	display: none;
}



.topEmpEstados{
	position: absolute; z-index: 11500; top: 0; left: 0; width: 100%; padding-top: 7px; padding-left: 1%; padding-bottom: 15px; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, #000000a3 51%);
}

.barraProgreso{
	float: left; margin-right: 1%; height: 4px; background-color: #a7a7a7ad; border-radius: 25px; text-align: left;
}

.barraProgresoBlanca{
	background-color: white;
}

.divEstado{
	width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1400; background-color: black; display: 
none;
}


.imgEstado{
	width: 100%; height: 100%; object-fit: contain; 
}


.txtEstado{
	font-size: 15px;
    color: white;
    text-align: left;
    padding: 5px 80px 40px 20%;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #000000a3;
}

.estados, .modalEmpresa{
	position: fixed;
	z-index: 18000;
    width: 100%;
    height: 100vh;
    margin: 0;
	background-color: #fff;
	display: none;
	top:0;
	left: 0;
}


.modalEmpresa {
	overflow-y: scroll;
}


.modalEmpresa .logoEmp{
	width: 100%;
    height: 170px;
    position: relative;
    float: none;
	left: 0;
    padding: 10px;
    top: 10px;
	margin-right: 0;
}


.modalEmpresa .logoEmp .imgLogo{
	width: auto;
    height: 150px;
	object-fit: contain;
    border-radius: 10px;
}

.modalEmpresa .nombreEmp{
	font-size: 25px; margin-top: 10px; text-align: center; font-weight: bolder; color: black; padding: 4px; top: 0; 
	overflow: auto;
    text-overflow: inherit;
    white-space: normal;
}

.modalEmpresa .rubroEmp{
	font-size: 18px; color: #555; text-align: center; padding: 6px; height: auto;
}

.modalEmpresa .contactoEmp{
	font-size: 19px;
    color: white;
    background-image: linear-gradient(to bottom, #31a82a 0%, #199612 100%);
    border-radius: 10px;
    text-align: center;
    width: fit-content;
    position: relative;
    margin: 19px auto;
    padding: 12px 23px;
	cursor: pointer;
}

.modalEmpresa .contactoEmp a{
	text-decoration: none; color: white;
}



.modalEmpresa .direccionEmp{
	font-size: 22px; text-align: center; color: black;
}

.modalEmpresa .mapaEmp{
	width: 100%; height: 300px; background-color: white; margin-bottom: 120px; position: relative; 
}


.modalEmpresa .cardPlace{

	position: absolute; top: 15px; right: 15px; border-radius: 20px; background-color: white; padding: 12px 15px;
    box-shadow: 2px 2px 10px 1px #ccc; border: solid 2px #1a73e8;
}

.modalEmpresa .cardPlace .datosCard{
	float: left; display: none;
}

.modalEmpresa .cardPlace .assisCard{
	float: left; margin-left: 0px; 
}

.modalEmpresa .nombreEmpModal{
	font-size: 17px; color: black; font-weight: bold;
}

.modalEmpresa .direccionEmpModal{
	font-size: 15px; color: #5b5b5b; margin-top: 4px;
}

.modalEmpresa .btnLlegarEmpModal{
	text-align: center; text-decoration: none; color: #1a73e8; font-size: 13px;
}


.modalEmpresa .btnLlegarEmpModal img{
	width: 24px;
	display: block;
	position: relative;
    left: 50%;
    margin-left: -12px;
	margin-bottom: 4px;
}


.modalEmpresa .btnPerfilEmp{
	float: none;
    width: 120px;
    margin: 40px 1%;
    padding: 12px 5px;
    border-radius: 12px;
    border: solid 2px var(--color2);
    text-align: center;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

.modalEmpresa .btnPerfilEmp span{
	width: 100%; display: block; color: black; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding-top: 7px;
}

.modalEmpresa .btnPerfilEmp img{
	width: 25px; height: 25px; display: inline-block; vertical-align: bottom;
}


.modalEmpresa .btnPerfilEmp b{
	font-weight: bolder; display: inline-block; color: var(--color2);
	font-size: 18px;
}






.btnEstado{
	height: 100vh;
	position: absolute;
	z-index: 1450;
	display: none;
	
}

.btnEstadoPrev{
	/*background-color: rgba(180,10,200,.4);*/
	width: 40%;
	top:0;
	left: 0;
}


.btnEstadoNext{
	/*background-color: rgba(25,180,200,.4);*/
	width: 60%;
	top: 0;
	right: 0;
}



.btnEstadoClose{
	z-index: 1700;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	top: 20px;
	right: 15px;
	position: absolute;
	background-color: rgba(0,0,0,.4);
	cursor: pointer;
	padding: 8px;
}

.btnEstadoClose img{
	width: 24px;
	height: 24px;
}

.btnEstadoWh{
	z-index: 9000;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	top: calc(100vh - 220px);
	right: 12px;
	position: absolute;
	background-color: #ffffffde;
	cursor: pointer;
	padding: 10px;
	box-shadow: 0px 2px 11px 3px #00000078;
}

.btnEstadoWh img{
	width: 40px;
	height: 40px;
	filter: invert(43%) sepia(97%) saturate(3170%) hue-rotate(254deg) brightness(75%) contrast(101%);
}




.noClick{
	pointer-events: none;
}



.vencimiento{
	display: block;
	width: 100%;
	padding: 11px;
    font-size: 16px;
    text-align: center;
    background-color: #00a650;
    color: white;
	line-height: 30px;
}

.vencimiento .btnEmpresas{
	float: none;
    position: static;
    padding: 5px 14px;
    font-size: 13px;
    background-color: #176a3f;
	white-space: nowrap;
}


.alerta {
	background-color: #f73;
}


.alerta2 {
	bottom: 0px; position: fixed; z-index: 1;
}

.alerta .btnEmpresas {
    background-color: #a93c05;
}


.vencido {
	background-color: #FF770E;
}

.vencido .btnEmpresas {
    background-color: #ab3510;
}


.prueba {
	background-color: #00a650;
}

.prueba .btnEmpresas {
    background-color: #006E35;
}


.contTxtEdit{
	display: none;
	width: 100%;
	padding-top: 5px;
}


.contEdit2{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 70%;
}

.inputEdit{
	padding: 7px 9px;
    float: left;
    width: -webkit-fill-available;
    border-radius: 5px;
    margin-right: 10px;
}



.btnEdit{
	background-color: var(--color2);
    padding: 10px 13px;
    float: none;
    white-space: nowrap;
    margin-left: 0;
    top: 9px;
    margin-bottom: 0;
	right: 0;
}

.btnDescartar{
	background-color: #F56669 !important;
	margin-right: 4px !important;
}
	

.editando{
	margin: 18px 0;
    background-color: #cfffcf;
}

.editando .itemEmp, .editando img{

}



.editando .contTxtEdit{
	display: flex;
}

.itemMisEstados{
	border-bottom: none;
	width: calc(100% - 30px);
    margin: 15px;
    padding: 10px;
	border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
	background-color: white;
}


.itemMisEstados .nombreEstadoTxt1{
	font-size: 14px;
    margin-top: 7px;
}

.itemMisEstados .nombreEstado{
	padding: 0;
}

.itemMisEstados .itemEmp{
	border-bottom: none !important;
}


.itemMisEstados .logoEmp{
	top: 0px;
	width: 100px;
    height: 100px;
    border-radius: 0;
    padding: 0;
}


.itemMisEstados .logoEmp .imgLogo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: none;
}



.btnDenunciar{
	display: none;
	padding: 2px 7px;
	border-radius: 5px;
	position: absolute;
    bottom: 20px;
    right: 20px;
    color: white;
    background-color: black;
    cursor: pointer;
    font-size: 14px;
}




.itemEmpresa{
	width: 100%;
	padding: 30px 7px 15px;
	border-bottom: solid 1px #ccc;
	position: relative;
}


.itemEmpresa2{
	padding: 18px 7px;
	/*background: linear-gradient(to top, #d2e6ff 3%, #ebefff73 15%);
	border-radius: 10px;*/
	border-bottom: solid 1px #c1c1c1;
	margin: 15px 0;
}


.itemEmpresa2 .txtItemEmp1{
	font-size: 19px;
	font-weight: bolder;
	margin-bottom: 4px;
}

.itemEmpresa2 .iconoItemEmp{
	width: 20px;
    vertical-align: bottom;
    margin-right: 4px;
}

.txtItemEmp2 span{
	padding: 4px 0; display: block;
}

.itemEmpresa2 .txtItemEmp2{
	padding: 0;
}

.empLeft{
	float: left;
	width:20%;
	aspect-ratio: 1 / 1;
	padding: 0 10px 0 0;
}

.empLeft2 {
    width: 90px !important;
	padding: 0;
	margin-right: 14px;
	max-height: 90px;
}

.empLeft img{
	width:100%;
	height: 100%;
	object-fit: cover;
}

.empLeft .imgMisEmpresas{
	object-position: top;
	width:90%;
	height: 90%;
	object-fit: cover;
	margin: 5%;
    border-radius: 50%;
}

.empRight{
	float: left;
	width:80%;
}


.itemEmpresa .prueba, .itemEmpresa .vencido{
	color: #00a650;
	background-color: transparent;
	text-align: left;
	padding-left: 0;
}
.itemEmpresa .prueba img, .itemEmpresa .vencido img{
	width: 22px; vertical-align: text-top; margin-right: 10px;
}
.itemEmpresa .prueba a, .itemEmpresa .vencido a{
	background-color: var(--color2);
	color: white;
	padding: 2px 10px;
	border-radius: 5px;
	text-decoration: none;
	margin-left: 8px;
}
.itemEmpresa .vencido{
	color: #FF770E; line-height: initial;
}

.detalleEmp img{
	width: 20px;
    vertical-align: sub;
    margin-right: 14px;
}

.txtItemEmp1{
	font-size: 24px;width: 80%;
}


.editEmpresa .prueba, .editEmpresa .vencido{
	text-align: center;
}


.menuEmp{
	margin-top: 15px;
}

.itemMenuEmp{
	background-color: #D0E3FD;
	border-radius: 6px;
	margin-right: 8px;
	float: left;
	width: 100%;
    font-size: 18px;
}
.itemMenuEmp a{
	color: var(--color2);
	text-decoration: none;
	display: block;
	text-align: center;
	padding: 8px 15px;
}

.itemMenuEmpInvertido{
	background-color: var(--color2);
}
.itemMenuEmpInvertido a{
	color: #FFF;
}
.itemMenuEmp img{
	vertical-align: bottom;
	margin-right: 10px;
	width: 20px;
	height: 20px;
}


.itemMisEmpresas{
	text-decoration: none;
	color: #333;
	display: flex;
}


.itemMisEmpresas .empRight {
    width: 80%;
}


.perfilMiEmpresa{
	
}

.perfilMiEmpresa .logoEmp{
	float: none;
	margin: 20px auto;
	width: 90px;
    height: 90px;
	padding: 0;
}

.perfilMiEmpresa .imgLogo{
	width: 90px;
    height: 90px;
    border: none;
}

.perfilMiEmpresa .nombreEmpPerfil{
	margin: 30px auto;
	font-size: 26px;
	text-transform: none;
}


/* ESTILOS DE LA LISTA DE OPCIONES DE EMPRESAS*/

.settings-list {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	width: 100%;
	margin: 0 auto;
	font-family: 'Segoe UI', sans-serif;
	color: #333;
}

.settings-list .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.13);
	cursor: pointer;
	transition: background 0.2s;
	text-decoration: none;
	min-height: 85px;
}

.settings-list .item:hover {
	background: #f9f9f9;
}

.settings-list .icon {
	margin-right: 1rem;
	text-align: center;
}

.settings-list .icon img {
	width: 24px;
	height: 24px;
	filter: invert(43%) sepia(97%) saturate(3170%) hue-rotate(254deg) brightness(75%) contrast(101%);
}

.settings-list .text {
	flex: 1;
}

.settings-list .title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 2px;
	color: #3F3F3F;
}

.settings-list .subtitle {
	font-size: 0.85rem;
	color: #636363;
}

.settings-list .arrow {
	font-size: 1.5rem;
	color: #aaa;
	margin-left: 0.5rem;
}


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




.divAvisoImportante{
	text-align: center;
    border: solid 2px var(--color1);
    border-radius: 15px;
    padding: 10px;
	text-decoration: none;
	display: block;
    margin-top: 17px;
    margin-bottom: 10px;
}



.divCodigos{
	text-align: center;
    border: solid 2px var(--color1);
    border-radius: 15px;
    padding: 10px;
    margin-top: 25px;
}


.divCodigosTitulo{
	font-size: 20px;
	font-weight: bold;
}

.divCodigosNumero{
	font-size: 35px;
    font-weight: bolder;
	letter-spacing: 5PX;
}



.titulo100{
	text-align: center;
	padding: 20px;
    color: var(--color1);
    font-size: 21px;
	margin-bottom: 30px;
}


.titulo200{
	text-align: center;
    background-color: var(--color1);
    width: 100%;
    color: white;
    position: relative;
    z-index: -1;
    padding: 18px 7px;
    font-size: 22px;
	text-transform: uppercase;
}



.itemEmp400{
	float: left; width: 30%; padding: 20px; margin: 20px 1%; border: solid 1px #ccc; border-radius: 12px; color: black; text-decoration: none; height: 300px;
}
.itemEmp400:hover{
	background-color: aliceblue;
}
.itemEmp400 img{
	width: 50%; margin: 10px 25%; border-radius: 100%; aspect-ratio: 1/1;
    object-fit: cover;
}
.nombreItemEmp400{
	font-size: 20px; text-align: center; min-height: 60px;
}



.containerDetalleEstado .estados{
	height: 100%; top: auto; left: 0px; display: block;
}

.containerDetalleEstado .contEmpEstados{
	top: 0px; left: 0px; display: block;
}

.containerDetalleEstado .btnChat{
	padding: 15px 25px; font-size: 20px;
}

.containerDetalleEstado .contactoEmp{
	width: max-content; padding: 0; margin: auto; margin-top: -53px; margin-right: 24px;
}

.containerDetalleEstado .divEstado {
    background-color: white; text-align: center; height: auto;
}

.containerDetalleEstado .topEmpEstados {
    position: relative; background-color: white; background: none;
	
}

.containerDetalleEstado .columnaRight * {
    color: black;
}

.containerDetalleEstado .imgEstado {
    width: 40%;
}



.divFaqs{
	padding: 20px;
	width: 100%;
	margin: 20px auto;
	max-width: 800px;

}
.parrafoFaq{
	font-size: 16px; text-align: justify; color: #555; line-height: 30px; float: left; width: 40%; padding: 40px 0;
}
.tituloFaq{
	font-size: 30px; font-weight: bolder; text-align: center; text-decoration: underline;
}
.videoFaq{
	float: left; width: 60%; padding: 50px 0px 50px 50px;
}


.headAviso{
	background-color: #e6efff;
    color: #370697;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 8px;
    margin: 15px 3%;
    width: 94%;
	text-align: center;
}


.divFooter{
	background-color: #3483fa; padding:10px 0; color:white; font-size: 18px; width: auto; border-radius: 10px; text-align: center;
}

.divFooter a{
	display: inline-block; width: 30%; padding: 10px; text-decoration: none; color: white; border-radius: 10px; transition: .3s;
}

.divFooter a:hover{
	background-color: rgba(255,255,255,.3);
}
.divFooter a img{
	vertical-align: middle; width: 30px; height: 30px; margin-right: 5px; margin-bottom: 3px; 
}


.btnSeguir{
	background-color: black;
    color: white;
    box-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);
    padding: 3px 15px;
    font-size: 15px;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 67px;
    left: 10px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.siguiendo{
	background-color: #4caf50;
}


.siguiendo img{
	display: inline-block;
	vertical-align: sub;
    width: 17px;
    height: 17px;
    user-select: none;
    margin-left: 5px;
}


.disabled{
	pointer-events: none;
	background-image: url("images/loading.svg");
	background-position: center center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-color: rgba(0,0,0,.3);
	color: transparent;
}

.disabled img{
	opacity: 0;
}





.seguidoresEstado{
	position: absolute;
    top: 60px;
    right: 10px;
}

.countSeguidores{
	margin-left: 20px;
    font-size: 14px;
    opacity: .6;
}




.seguidoresEstado .countSeguidores{
	margin-left: 0;
    font-size: 16px;
    opacity: 1;
	color: white;
    background-color: var(--color1);
    border-radius: 4px;
    padding: 2px 7px;
}






/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/

.topEmpEstados .btnSeguir {
    padding: 5px;
	top: 20px;
    right: 0px; left: initial;
	width: 90px;
    height: 60px;
}


.menuFooter{
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3100;
	background-color: white;
	height: 60px;
	
}


.menuFooter .btnEmpresas{
	float: left;
    width: 20%;
    background-color: white;
    font-size: 12px;
	text-transform: none;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	right: 0;
	top: 0;
	color: #767575;
    border-top: solid 2px #b5b5b5;
}



.menuFooter .btnEmpresas:hover{
	background-color: #DCDCDC;
}


.menuFooter .btnEmpresas img{
	display: block;
	width: 24px;
	height: 24px;
	position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
	filter: invert(1%) sepia(4%) saturate(3170%) hue-rotate(253deg) brightness(75%) contrast(24%);
}


.menuFooter .btnEmpresas span{
	display: block;
	width: 100%;
}


.menuFooter .btnEmpresasSelected{
	background-color: white;
    border-top: solid 2px #b746c0;
}

.menuFooter .btnEmpresasSelected img{
	filter: invert(43%) sepia(97%) saturate(3170%) hue-rotate(254deg) brightness(75%) contrast(101%);
}

.menuFooter .btnEmpresasSelected span{
	color: #b746c0;
}

.menuFooter .btnEmpresasSelectedRndLf{
	border-radius: 0;
}

.menuFooter .btnEmpresasSelectedRndRt{
	border-radius: 0;
}

.menuFooter .btn33-100{
	width: 33.3%;
}

.menuFooter .btn20-100{
	width: 21.5%;
}

.menuFooter .btn25-100{
	width: 25%;
}


.menuPub1{
	position: fixed;
    bottom: 59px;
    width: 100%;
    padding: 15px 0 25px 0;
    z-index: 3050;
    background-color: #4444448f;
    margin: 0 auto;
    display: block;
	text-align: center;
}

.menuPub1 .tipoPub{
	display: inline-block;
    margin: 0 15px;
    background-color: #066aa5;
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    min-width: 100px;
	cursor: pointer;
	user-select: none;
	transition: .2s;
}

.menuPub1 .tipoPubActive{
	transform: scale(1.2);
    box-shadow: 0 3px 4px 2px rgb(0 0 0 / 30%);
    background-color: var(--color2);
}


.menuPub2{
	display: flex;
	justify-content: center; /* Centra horizontalmente */
	align-items: center;     /* Centra verticalmente */
	gap: 10px;
	bottom: 140px;
	flex-wrap: wrap;
}


.empPub{
	width: 100px;
	flex: 0 0 calc(33.33% - 10px);
	cursor: pointer;
}

.empPub img{
	width: 60px;
	height: 60px;
	object-fit: cover;
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	user-select: none;
}

.empPub .nombreEmpPub{
	text-align: center;
	font-size: 12px;
	color: white;
	user-select: none;
	height: 35px;
}



.btnCata25{
	width: 25%;
	float: left;
	padding: 2px !important;
    margin-bottom: 13px;
}

.btnCata25 a span{
	font-size: 13px !important;
	text-align: center;
	line-height: 15px;
}

.btnCata25 a{
	padding: 10px 2px !important;
	height: auto;
}

.btnCata25 a img{
	width: 30px;
	margin: auto;
	display: inline-block;
	margin-bottom: 0px;
	vertical-align: text-top;
    margin-right: 7px;
}

.btnCata50{
	width: 50%;
}

.divBuscarIndex .imgCloseSearch{
	display: none;
}

.btnSearch{
	display: none;
}


.nuevoEstado .itemEmp400 {
	float: left;
	width: 18%;
	padding: 12px;
	margin: 10px 1%;
	border: solid 1px #ccc;
	border-radius: 7px;
	color: black;
	text-decoration: none;
	height: 230px;
}
.nuevoEstado .itemEmp400:hover{
	background-color: aliceblue;
}
.nuevoEstado .itemEmp400 img{
	width: 90%; margin: 5px 5%; border-radius: 100%;
}
.nuevoEstado .nombreItemEmp400{
	font-size: 18px; font-weight: bolder; text-align: center; min-height: 60px;
}

.closeModalEmp{
	position: absolute;
	top: 8px;
    left: 15px;
    width: 35px;
    height: 35px;
    filter: contrast(0.5);
}


.imgEstadoMini{
	margin: 4px 1% !important;
	float: left;
	border-radius: 7px;
	object-fit: contain;
	width: 70px;
	height: 70px;
	background-color: white;
}



.contImgCatalogo .imgEstadoMini{
	margin-left: 50% !important;
    margin-right: 0% !important;
	float: none;
	width: 200px;
    height: 200px;
    background-color: transparent;
    left: -100px;
    position: relative;
}


/**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.btnCatalogo{
	position: absolute;
	z-index: 1200;
	right: 12px;
	top: 16px;
	width: auto; cursor: pointer;
}


.btnCatalogo img{
	width: 45px;
	height: 45px;
	border-radius: 100%;
	padding: 8px;
	pointer-events: none;
}

.btnCatalogo img:active{
	background-color: #ddd;
}


.itemCatalogo{border: none; border-top: solid 1px #ccc;  }
.itemCatalogo:last-child{border-bottom: solid 1px #ccc;  }
.itemCatalogo .empLeft img{width: 100px; height: 100px; object-fit: cover; border-radius: 10px; }
.itemCatalogo .txtItemEmp1, .itemCatalogo .txtItemEmp2{text-align: left; padding-left: 10px; width: 100%;}
.itemCatalogo .txtItemEmp2{color: #555; height: auto; font-size: 16px !important; }
.itemCatalogo .txtItemEmp3{font-size: 20px !important; font-weight: bolder; padding-top: 10px; float: left; width: 50%; }
.itemCatalogo .txtItemEmp3 .btnCant{float: left; width: 50px; padding: 5px 0; cursor: pointer; text-align: center; font-size: 22px; user-select: none; }
.itemCatalogo .txtItemEmp3 .btnCant1{background-color: var(--color2); color: white; border-radius: 5px 0 0 5px; padding-bottom: 7px; }
.itemCatalogo .txtItemEmp3 .btnCant3{background-color: var(--color2); color: white; border-radius: 0 5px 5px 0; padding-bottom: 7px; }
.itemCatalogo .txtItemEmp3 .btnCant2{background-color: #fdf3ff; border: solid 1px var(--color2); }
.itemCatalogo .btnEdit{position: absolute; width: 46px; height: 46px; top: 20px; right: 5px; border-radius: 50%; background-color: var(--color1); }
.itemCatalogo .btnEdit img{position: absolute; top: 11px; left: 11px;}

.contTotalCart img{vertical-align: bottom; filter: brightness(50); margin-right: 10px; }


.contTotalCart {
	position: fixed;
	right: 20%;
	border-radius: 15px;
	bottom: 10px;
	background: linear-gradient(270deg, var(--color1), var(--color2));
	background-size: 400% 400%;
	animation: gradienteAnimado 10s ease infinite;
	padding: 15px 18px;
	font-weight: bolder;
	font-size: 22px;
	cursor: pointer;
	z-index: 15000;
	width: 60%;
	height: 62px;
	text-align: center;
	color: white;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

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




.contTotalCart i{
	font-size: 18px;
    margin-right: 20px;
}

.contItemsCatalogo{
	text-align: center; margin-top: 25px; position: relative; 
}


.menuInDatos{
	padding: 20px;
	text-align: center;
}

.menuInDatos .btnMenu{
	width: 33%; text-decoration: underline;
	color: var(--color1);
	font-size: 15px;
	float: left;
	font-weight: bolder;
	cursor: pointer;
}


.fondoNegro, .fondoNegro2{background-color: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; display: none; height: 100vh; width: 100%; z-index:3000; }

.fondoBlanco{background-color: rgba(255,255,255,.5); position: fixed; top: 0; left: 0; display: none; height: 100vh; width: 100%; z-index:3000123; text-align: center; }

.fondoBlanco img{position: absolute; top: 50%; margin-top: -30px; width: 60px; height: 60px; left: 50%; margin-left: -30px; }


.contMenuModalEmp{
	position: fixed;
    display: none;
    z-index: 3001;
    height: 100vh;
    width: 100%;
	top: 0;
	left: 0;
}

.menuModalEmp {
    background-color: #E9E9E9;
    position: absolute;
    width: 60%;
    border-radius: 8px;
    max-width: 500px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    margin-left: -250px;
}


.itemMenuModalEmp{
	width: 100%; border-top: solid #ccc 1px; font-size: 20px; padding: 20px 50px; color: #555; user-select: none; 
}


.itemMenuModalEmp:active{
	background-color: #E3E3E3;
}


.itemMenuModalEmp:first-child{
	border-top: none;
}

.itemMenuModalEmp img{
	width: 24px; height: 24px; display: inline-block; vertical-align: bottom; margin-right: 15px;
}



.contMenuMisEmpresas .itemMenuModalEmp{
	padding: 0px;
}


.contMenuMisEmpresas .itemMenuModalEmp a{
	padding: 20px 50px; color: #555; user-select: none; display: block; text-decoration: none;
}


.empOculta{
	filter: grayscale(70%); display: none;
}


.logoEmp .imgEditEstado {
    object-fit: cover;
    border-radius: 15px;
}


.contCatalogo{
	width: 60%;
    margin: 0 20%;
}

.contCatalogo .itemEmpresa{
	border-bottom: none;
}

.cuadroDezpla{ position: fixed; top: 90px; right: 0; width: 49.5%; background-color: transparent; z-index: 8000;}
.cuadroDezplaLeft{left: 0;}

.chipsIndex{
    padding: 20px 10px;
    text-align: center;
    height: auto;
    overflow: hidden;
    overflow-x: scroll;
    width: 100%;
    white-space: nowrap;
}

.itemChipIndex{
	border-radius: 20px; background-color: #f4dcff;
    color: var(--color1); font-size: 13px; display: inline-block; margin: 1px; padding: 8px 16px; cursor: pointer; transition: .2s; user-select: none; text-decoration: none;
}

.itemChipIndexSelected{
	background-color: var(--color1); color: white;
}

.itemChipIndex:hover{
	transform: scale(1.1);
}



.chipsIndex::-webkit-scrollbar {display: none;}

#contImgs::-webkit-scrollbar{height: 5px;
    background: #f1f1f1;
    border-radius: 13px;}

#contImgs::-webkit-scrollbar-thumb {
  background: #888;
    border-radius: 13px;
}

#detalleEstado .topEmpEstados {position: static;background: none;}
#detalleEstado .imgEstado{width: auto;
    height: auto;
    border-radius: 15px;
    max-height: 300px;}
#detalleEstado .nombreEmpTop{color:black}
#detalleEstado .contImgEstado{text-align: center; margin-top: 20px;}
#detalleEstado .itemMenuEmp a{padding: 11px 15px 14px; }
#detalleEstado .itemMenuEmp img {vertical-align: sub; margin-bottom: -2px;}


.gmnoprint, .gm-style-cc, .gm-ui-hover-effect{
	
}
.gm-ui-hover-effect{
	display: none !important;
}



#map {
  height: 100%;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  background-color: transparent;
  border: 0;
  border-radius: 2px;
  margin-bottom: 10px;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  font-family: Roboto;
  padding: 0;
}

#pac-container {
  background-color: transparent;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-weight: 300;
  text-overflow: ellipsis;
  width: 100%;
	margin-top: 10px;
}


#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}

.conDireccion {
    width: 160% !important;
    border: 3px solid var(--color1);
    padding: 10px;
    border-radius: 20px;
    margin-left: -30%;
}


.contCodigo{display: none; text-align: center}
.contCodInput{display: inline-block; width: 60px; margin: 5px; }
.contCodInput input{font-size: 30px; text-align: center; font-weight: bolder; padding: 20px 0; }
.contCodigo .btnEnviar{width: fit-content; float: none; padding: 17px 65px;}
.contCodigo input::-webkit-outer-spin-button,.contCodigo input::-webkit-inner-spin-button{-webkit-appearance: none;}


#contImgs{
	overflow: hidden;
	overflow-x: scroll;
	height: auto;
	white-space: nowrap;
	display: inline-block;
	width: 88%;
	
}
.borraImg{
	position: relative;
	margin: 4px 1px;
	display: inline-block;
}

.borraImgSelected .imgEstadoMini{
	filter: brightness(0.5);
}


.containerNuevoEstado .imgEstadoMini{
	float: none;
	width: 60px;
	height: 60px;
	object-fit: cover;
	margin: 4px 1px !important;
}

.borraImg span{
	position: absolute;
	cursor: pointer;
	right: 8px;
	top: 13px;
	border-radius: 100%;
	display: none;
	z-index: 11;
}

.borraImgSelected span{
	display: block;
}

.borraImg span img{
	width: 42px;
	height: 42px;
}

#contCurrent {
	height: 350px;
	position: relative;
}

#contCurrent input{
	display: none;
	position: absolute;
	bottom: 4px;
	border-radius: 8px;
	padding: 15px 10px;
}

.divEnviarEstado {
	position: fixed;
	left: 2%;
	bottom: 15px;
	width: 96%;
	float: none;
	text-align: right;
	padding-right: 10px;
}

.txt_enviar_estado{
	display: inline-block;
	color: white;
	right: 35px;
	position: relative;
	top: -22px;
	text-transform: uppercase;
}

.txt_enviar_estado img{
	border-radius: 50%;
	height: 40px;
	width: 40px;
	vertical-align: middle;
	margin-right: 5px;
}

.btnEnviarEstado{
	display: inline-block;
	border-radius: 100%;
	height: 55px;
	width: 55px;
	background-color: #00a884;
	position: relative;
}

.btnEnviarEstado img{
	position: absolute;
	top: 15px;
	left: 15px;
	width: 26px;
	height: 26px;
}

.divImgCurrent{
	text-align: center;
	position: relative;
	top: -55px;
}

.divImgCurrent img{
	width: auto;
	margin: 10px 0;
	height: 80%;
	object-fit: contain;
	object-position: bottom;
	border-radius: 5px;
	max-width: 100%;
}

.labelButtonImg2{
	border-radius: 10px;
	height: 60px;
	margin: 8px 0;
	width: 60px; border: solid 2px white;
	transition: .3s;
	position: relataive;
	top: -5px;
	left: 0;
	overflow: hidden;
	
}


/* Shine efecto solo cuando tiene bigBtn */
.labelButtonImg2.bigBtn::after {
	content: "";
	position: absolute;
	top: -100%;
	left: -100%;
	width: 150%;
	height: 300%;
	background: linear-gradient(
	  90deg,
	  rgba(255, 255, 255, 0) 20%,
	  rgba(255, 255, 255, 0.2) 50%,
	  rgba(255, 255, 255, 0) 80%);
	transform: rotate(20deg);
	animation: shineMove 2s infinite;
	animation-direction: alternate; /* ← ESTA ES LA CLAVE */
}


/* Animación del shine */
@keyframes shineMove {
	0% {
		transform: translateX(-150%) rotate(20deg);
	}
	60% {
		transform: translateX(110%) rotate(20deg);
	}
	100% {
		transform: translateX(150%) rotate(20deg);
	}
}


.labelButtonImg2 img{
	position: absolute;
    width: 34px;
    height: 34px;
    top: 13px;
    left: 50%;
    margin-left: -17px;
}


.containerNuevoEstado {
	width: 100%;
	position: relative;
	bottom: -84px;
}
	
.bigBtn{
	transform: scale(3);
    top: -259px;
    left: 50%;
}



.input-container {
	position: relative;
	margin: 20px 0;
}

.input-field {
	width: 100%;
	font-size: 19px;
	border-radius: 0;
	border: none;
	box-shadow: none;
	border-bottom: 2px solid #777;
	padding: 15px 10px;
	background-color: #f4f4f4;
	transition: 0.2s ease all;
	color: #000;
}

.placeholder {
	position: absolute;
	left: 10px;
	top: 25px;
	transition: 0.2s ease all;
	color: #777;
	pointer-events: none;
	font-size: 17px;
}


.input-field:not(:placeholder-shown){
	background-color: white;
	border-bottom-color: #999999;
}

.input-field:focus{
	border: none;
	box-shadow: none;
	border-bottom: 2px solid #A521D7;
	background-color: #fff;
}


.input-field:not(:placeholder-shown) + .placeholder {
	top: -3px;
	font-size: 13px;
	color: #999999; /* Color del placeholder cuando está arriba */
}

.input-field:focus + .placeholder {
	top: -3px;
	font-size: 13px;
	color: #A521D7; /* Color del placeholder cuando está arriba */
}



.dropdown-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 27px;
  color: #777;
}


.ContainerImg2{
	padding: 20px;
	border: solid 3px var(--color1);
	border-radius: 15px;
	width: 96%;
	margin: 45px 2% 30px;
	display: block;
	position: relative;
	text-align: center;
}

.labelBtn2{
	border-radius: 15px;
	height: 70px;
	margin: auto;
	width: 70px;
	transition: .2s;
	position: relative;
	top: -20px;
}


.labelBtn2Sel{
	top: -40px;
	transform: scale(.7);
}

.labelBtn2 img{
	position: absolute;
	height: 40px;
	width: 40px;
	top: 15px;
	left: 15px;
}

.labelBtn4{
	margin: auto 15px;
}

.labelBtn4 div{
	font-size: 13px;
    text-align: center;
    top: 47px;
    position: relative;
    bottom: auto;
    color: white;
}

.labelBtn4 img{
	top: 10px;
}



.leyendaSet{
	position: relative;
	top: -42px;
	background-color: white;
	padding: 5px 20px;
	font-size: 20px;
}

.ContainerImg2 #contImgs .imgEstadoMini{
	width: 200px;
	height: 200px;
}

.ContainerImg2 #contImgs{
	position: relative;
	top: -35px;
}

.ContainerImg2 #contImgs::-webkit-scrollbar {display: none;}


.nuevoCatalogo{
	padding: 15px !important;
}


.nuevoCatalogo #contImgs {
	width: calc(100% - 0px) !important;
	top: 0px !important;
	margin-top: 0 !important;
}

.nuevoCatalogo .borraImg {
    margin: 0 !important;
}

.nuevoCatalogo .imgCatalogo{
	margin: 0% !important;
	width: 100% !important;
    height: auto !important;
	max-height: 400px;
}






.ui-autocomplete {
    position: absolute;
    cursor: default;
    background: #E7E7E7;
}


.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    float: left;
}

.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
    background-color: #E7E7E7;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper{
	padding: 20px 0;
}


.ui-helper-hidden-accessible {
    display: none;
}

.ui-menu-item-wrapper.ui-state-active {
    background-color: #ECCFFF;
}


.containerEmpresas{
	width: 70%;
    margin: 20px 15%;
}


.card-actions {
	display: flex;
	gap: 18px;
	justify-content: flex-end;
	margin-top: 5px;
}


.card-actions .btn {
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
	font-size: 0.9rem;
	transition: background 0.3s;
	background-color: var(--color2);
	color: white; margin-top: auto;
}

.card-actions .btn img{
	filter: brightness(5);
	padding: 12px 16px;
}

.tituloEstado{
	font-size: 20px;
	width: 85%;
	display: block;
}

.itemMisEstados .columnaRight {
	padding-top: 0px;
	width: calc(100% - 110px);
}




.divBtnTabs{
	width: 100%;
	background-color: var(--color1);
	box-shadow: 0 4px 8px 4px rgba(0,0,0,.3);
}
.btnTab{
	padding: 17px 5px;
	font-size: 15px;
	width: 50%;
	float: left;
	border-bottom: 3px solid transparent;
	color: rgba(255,255,255,.7);
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;

}
.btnTab:hover{
	background-color: #781597;
}

.btnTabSelected{
	color: white;
	border-bottom-color: white;
}
.contTabs{

}


#contTab2{
	display: none;
}





.card2 {
  background-color: #fff;
border-radius: 0;
overflow: hidden;
width: 49%;
margin: 10px .5%;
padding: 2px;
float: left;
height: 380px;
}

.card2 img {
  width: 100%;
height: 100%;
object-fit: cover;
border-radius: 7px;
}

.card2-content {
  padding: 2px;
height: 75px;
}

.card2-title {
  font-size: 16px;
  margin: 0;
  color: #333;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bolder;
}

.card2-price {
  font-size: 16px;
  margin: 0;
	text-align: left;
	overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
	font-weight: bolder;
}

.card2-description {
  flex: 1;
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 16px;
	text-align: left;
	display: -webkit-box;
-webkit-line-clamp: 3;        /* Máximo de líneas */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.card2-titulo2 {
  font-size: 15px;
  color: #888;
  margin-bottom: 3px;
	text-align: left;
overflow: hidden;
text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 2px;

}

.card2-actions {
  display: flex;
  gap: 12px;
	justify-content: flex-end;
}


.divImgMkt{
	height: 290px;
	border-radius: 7px;
}




.btn2 {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.3s;
	background-color: #6200ea;
  color: white;
}







.itemEmpresa .txtItemEmp2{
	font-size: 15px;
}



#modalMarket .modalEmpresa .countSeguidores {
	margin-left: 0px;
}
#modalMarket .modalEmpresa .btnSeguir{
	position: relative;
	top: 0;
	margin: auto;
	left: 0;
	width: max-content;
}

.mk_imagen{
	width: 100%;
	height: auto;
	background-color: white;
}

.mk_imagen img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-height: 600px;
	min-height: 300px;

}

.mk_nombre{
	padding: 10px;
	font-size: 22px;
	text-align: left;
	font-weight: bolder;
	line-height: 25px;
}

.mk_precio{
	padding: 0 10px 10px;
	font-size: 22px;
	text-align: left;
	font-weight: bolder;
}

.mk_desc{
	padding: 0 10px 10px;
	font-size: 18px;
	text-align: left;
}

.mk_date_edit{
	font-style: italic;
	color: #777;
	font-size: 14px;
	text-align: left;
	padding-left: 10px;
}

.titleEmpMk{
	border-top: solid 2px var(--color2);
	font-size: 19px;
	font-weight: bolder;
	text-align: left;
	padding: 20px 9px;
	color: var(--color2);
}


.mk_container_2{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.mk_container_emp .logoEmp{
	height: auto;
	position: relative;
	float: none;
	white-space: nowrap;
	width: 25%;
	left: 0;
	padding: 0;
	top: 0;
	margin-right: 0;
	aspect-ratio: 1 / 1;
}

.mk_container_emp .logoEmp .imgLogo {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.mk_emp_datos{
	float: none;
	flex: 1;
}

.mk_emp_datos .nombreEmp{
	font-size: 20px;
	text-align: left;
}

.mk_emp_datos .rubroEmp {
	font-size: 18px;
	text-align: left;
}

.mk_container_emp .btnPerfilEmp img {
	filter: brightness(5);
}

.mk_container_emp .btnPerfilEmp {
	background-color: var(--color2);
}

.mk_container_emp .btnPerfilEmp span {
	color: white;
}
.mk_container_emp .btnPerfilEmp b {
	color: white;
}




#contProds{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.card-skeleton {
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;
width: 100%;
}

.card-skeleton50 {
    width: 50%;
    float: left; padding: 10px;
}

.card-skeletonMarket {
    width: 33%;
    padding: 10px;
}

.card-skeletonMarket .title-skeleton {
    margin-bottom: 0;
}

.card-skeleton25 {
    width: 25%;
}

.skeleton {
position: relative;
overflow: hidden;
background: #e0e0e0;
border-radius: 8px;
}

.image-skeleton-full {
  width: 100%;
  border-radius: 8px; height: 120px;
}

.skeleton::after {
content: "";
position: absolute;
top: 0;
left: -150px;
height: 100%;
width: 150px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}

.title-skeleton {
height: 25px;
margin-bottom: 20px;
}

.content {
display: flex;
gap: 20px;
}

.image-skeleton {
width: 80px;
height: 80px;
flex-shrink: 0;
}

.image-skeleton-emp {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 100%;
}


.text-group {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}

.text-line {
height: 15px;
}


.text-line-small {
height: 10px;
}


.text-line-big {
height: 20px;
}


.card-skeleton50 .text-group {
    gap: 8px;
}


.card-skeleton50 .title-skeleton {
    height: 27px; margin-bottom: 8px;
 }




.containerNuevoEstado{
	height: 100dvh;
	bottom: 0;
}

.descImg{
	position: absolute;
	top: 80px;
	z-index: 25000;
	background-color: #222;
	padding: 14px 10px;
	border: none;
	width: 96%;
	margin-left: 2%;
	border-radius: 30px;
	bottom: auto;
	color: white;
}

#contCurrent {
	top: 150px;
}

.inputBottom{
	top: 40%;
}

.imgBottom{
	top: calc(100dvh - 150px);
}

#labelBtnNew, #contImgs{
	top: 10px; bottom: auto;
}

.bigBtn {
	top: 50% !important;
}



.divEnviarEstado {
	display: none;
}


.vistasCata{
	background-color: transparent;
    padding: 3px 6px;
    margin: 4px 0 0;
    display: block;
    width: 100%;
    font-weight: bolder;
    border-radius: 7px;
}


.btnEditCata{
	background-color: var(--color2);
    color: white;
    padding: 6px 10px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 5px;
    display: block;
    font-size: 17px;
    cursor: pointer;
}



textarea {
  overflow: hidden;
  resize: none; /* Opcional: evita que el usuario cambie el tamaño manualmente */
  min-height: 65px;
	max-height: 160px;
	padding-bottom: 20px !important;
}


.itemMisProductos{
	border: solid 2px var(--color1) !important;
}


.pac-container {
  font-family: Arial, sans-serif;
  border: 1px solid #ccc !important;
  z-index: 9999 !important;
}

.pac-item {
  padding: 8px 12px;
  cursor: pointer;
	font-size: 16px;
}

.pac-item:hover {
  background-color: #f0f0f0;
}

.pac-icon {
  display: none; /* Oculta el ícono del pin si querés */
}
.pac-logo:after{
	display: none
}

.pac-item-query {
    font-size: 16px;
    padding-right: 3px;
    color: #000;
}
.pac-matched {
    font-size: 16px;
}


.setLocalidad{
	max-width: 800px;
    margin: 0 auto;
	display: flex;
    justify-content: center;
}


.setLocalidad .titleL{display: block; font-size: 14px; margin-left: 10px; color: var(--color1); white-space: nowrap; }

.setLocalidad .input-container {margin: 0;  flex: 1; padding-right: 7px;}

.setLocalidad .input-field:not(:placeholder-shown) {
	border-bottom-color: transparent;
	margin: 0; text-decoration: underline; width: 100%;
    padding: 6px 3px;
}

.setLocalidad .input-field:focus {
	text-decoration: none; border-bottom: 2px solid #A521D7;
}

.input-row {
	display: flex;
	align-items: center;
	gap: 5px; margin-top: 5px;
}


.legendMap{
	position: absolute;
	z-index: 1;
	padding: 5px 10px;
	text-align: center;
	font-size: 15px;
	background-color: #355cd9;
	width: fit-content;
	margin: 0;
	left: 10%;
	right: 10%;
	border-radius: 10px;
	color: #ffffff;
	top: -10px;
}


.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
    top: 10px !important;
}

.cropper-bg {
    background-image: none !important;
	background-color: white !important;
}

.cropper-modal {
    background-color: white !important;
}
#modalCropper{
	display: none; position: fixed; top: 10%; left: 5%; width: 90%; height: 80%; background: white; z-index: 99999; box-shadow: 0 0 20px black; padding: 15px; overflow: auto;
}

.divBtnCortar{
	margin-top: 10px; margin-top: 40px; text-align: center;
}

.btnCortar{
	background-color: var(--color2); padding: 8px 23px;
}


.cropper-point {
	  background-color: white !important;  /* color del cuadrado */
	  border: 3px solid #60097b !important; /* borde morado opcional */
	  width: 20px !important;              /* ancho personalizado */
	  height: 20px !important;             /* alto personalizado */
	  border-radius: 20px !important;       /* bordes rectos, poné 50% para círculos */
}

.cropper-point.point-nw {
    left: -11px !important;
    top: -11px !important;
}

.cropper-point.point-ne {
    right: -11px !important;
    top: -11px !important;
}
.cropper-point.point-sw {
    bottom: -11px !important;
    left: -11px !important;
}
.cropper-point.point-se {
    bottom: -11px !important;
    right: -11px !important;
}
.cropper-point.point-n {
    top: -11px !important;
	margin-left: -10px !important;
}
.cropper-point.point-e {
    right: -11px !important;
	margin-top: -10px !important;
}
.cropper-point.point-w {
    left: -11px !important;
    margin-top: -10px !important;
}
.cropper-point.point-s {
    bottom: -11px !important;
	margin-left: -10px !important;
}





.btnCrop{
	position: absolute;
    top: 30px;
    right: 20px;
    background-color: black;
    border-radius: 50%;
    padding: 10px; border: solid 2px white;
    width: 55px;
    height: 55px;
}

.btnCrop img{width: 30px;
	height: 30px;
}


.legendMap{
	user-select: none;
	position: relative;
    width: 90%;
    left: 5%;
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}
.modalCatalogo .modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  max-width: 90%;
  width: 400px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  margin-top: 15%;
}
.modalCatalogo .modal-content input {
  width: 90%;
  padding: 10px;
  font-size: 16px;
  text-transform: capitalize;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.modalCatalogo .modal-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}
.modalCatalogo .modal-buttons button {
  padding: 10px 20px;
  border: none;
  background: #3483fa;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
}
.modalCatalogo .modal-buttons button:first-child {
  background: #ccc;
  color: #000;
}



input[type=password]{ padding-right: 40px; }

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #888;
}



.leyenda433{
	display: block;
	font-size: 13px;
}


.img_main_seguir{
	vertical-align: sub;
}




.datosListIndex{
	position: relative;
    float: left;
    width: calc(100% - 140px) !important;
}

.btnCatalogoIndex{
	display: block;
}


.modalEmpresa{
	z-index: 190000; text-align: center;
}


.input-field.error {
    border-bottom: 2px solid #d32f2f;
    background-color: #fce4ec;
}

.error-message {
    color: #d32f2f;
    font-size: 14px;
    display: none;
    position: absolute;
    bottom: -18px;
    left: 0;
}

.char-counter {
	position: absolute;
	bottom: 11px;
	right: 10px;
	font-size: 14px;
	color: #777;
}

.input-field[maxlength] {
	resize: none; /* Opcional: evita redimensionar */
}



/*intro.js*/

.introjs-tooltipReferenceLayer * {
    font-family: Nunito;
}

.introjs-button {
    border: none !important;
    text-shadow: none !important;
	font-weight: bolder !important;
    font-size: 14px !important;
    color: white !important;
    background-color: var(--color2) !important;
    text-transform: uppercase !important;
}

.introjs-button:focus {
    background-color: var(--color2) !important;
    border: none !important;
    color: white !important;
}

.introjs-tooltip {
    border-radius: 10px !important;
}


.introjs-helperLayer{
	box-shadow: rgb(33 33 33 / 90%) 0px 0px 1px 2px, rgb(33 33 33 / 80%) 0px 0px 0px 5000px !important;
}

.introjs-tooltip-title{
	color: var(--color2) !important;
    font-size: 22px !important;
    font-weight: bolder !important;
}


.itemColaborador{
	width: 98%;
	margin: 5px 1%;
	border-radius: 10px;
	border: solid 1px #919191;
}


.landing-share {
	position: static;
    width: 100%;
	height: auto;
	overflow-y: auto;
}


.sloganIndex{
	display: none;
	color: #026c31;
	text-align: center;
	padding: 8px 3px;
	width: 94%;
	margin: 10px 3%;
	border-radius: 10px;
}


.logoHeaderCenter{
    float: none !important;
    width: auto !important;
    text-align: center !important;
}


.descrEstado{
	font-size: 15px;
}

.txtDescEstadoIndex{
	font-size: 17px;
    margin-top: 12px;
}

.countLikesEstado{
	color: #b746c0;
    margin-top: -7px;
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: bolder;
}


/*CATALOGO SMALL - INICIO*/

.productosSmall .card2{
	width: 15.5% !important;
    margin: 10px .5% !important;
    height: 260px !important;
}

.productosSmall .divImgMkt {
    height: auto !important;
    border-radius: 5px !important;
    aspect-ratio: 1 / 1 !important;
	border: none !important;
}

.productosSmall .card2 img {
    border-radius: 5px !important;
}

.productosSmall .card2-titulo2 {
    font-size: 13px;
}



/*CATALOGO SMALL - FINAL*/




.lowercase{
	text-transform: lowercase;
}


.granLayoutFixed{
	position: fixed;
    z-index: 111111;
}



.divEnviarEstado {
	position: fixed;
	left: 2%;
	bottom: 15px;
	width: 96%;
	padding-right: 10px;
	align-items: center;
	justify-content: space-between;
}

.infoEstado {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0; /* NECESARIO para truncar texto */
	color: white;
	padding-right: 10px;
    font-size: 18px;
}

.infoEstado img {
	border-radius: 50%;
	height: 40px;
	width: 40px;
	flex-shrink: 0;
}


.tituloEnviarEstado {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	max-width: 100%;
	min-width: 0;
}

.tituloEnviarEstado .linea1 {
	font-size: 16px;
	white-space: nowrap;
	color: white;
	text-align: left;
}

.tituloEnviarEstado .linea2 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: white;
	font-size: 16px;
	max-width: 100%;
	text-transform: uppercase;
}


#txt_enviar_estado {
	white-space: nowrap;
	font-size: 23px;
}


.btnEnviarEstado {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	height: 55px;
	width: 55px;
	background-color: #00a884;
	flex-shrink: 0;
}

.btnEnviarEstado img {
	width: 26px;
	height: 26px;
}






@media (min-width: 750px) {

.videosIndex {
    border-radius: 20px;
}


#menuInferior {
    width: 40% !important;
}

#menuInferior.activo {
    bottom: 59px !important;
}



.video-card {
	width: 100px !important;
}

.video-title {
    font-size: 12px !important;
	padding: 6px 3px !important;
	text-align: center !important;
}

.settings-list {
	max-width: 400px;
}

	
.barraProgreso{
	height: 6px;
}

.contBarras{
	width: 60%;
}

.mk_container_emp{
	padding: 15px;
}

.mk_container_emp .logoEmp{
	width: 15%;
}

.mk_imagen{
	width: 60%; float: left;
}

.mk_datos_prod{
	width: 40%; float: left; padding: 20px;
}

.mk_datos_prod .btnPerfilEmp {
    width: 80%;
    margin: 0 20% 10px 0;
    background-color: var(--color2);
	padding: 6px;
    border-radius: 7px;
}

.mk_datos_prod .btnPerfilEmp img {
    display: inline-block;
    vertical-align: top;
    filter: brightness(10);
}

.mk_datos_prod .btnPerfilEmp span {
    display: inline;
    color: white;
    line-height: 26px;
    margin-left: 9px;
    font-size: 15px;
}

.mk_precio {
    padding: 0 10px;
    font-size: 19px;
}

.mk_desc {
    padding: 0 10px;
    font-size: 15px;
    color: #777;
}


.menuEmp {
    width: max-content;
}


#modalCropper{
	left: 25%; width: 50%;
}

.legendMap{
	left: 0;
	right: 0;
	top: 0px;
	margin: 0 auto;
}




	
.setLocalidad .titleL {
    margin-left: 0px;
}


.setLocalidad .input-field:not(:placeholder-shown) {
    max-width: 500px;
}

.descImg {
    top: auto;
    width: 54%;
    margin-left: 23%;
    bottom: 165px;
}

.btn3000 {
	float: none;
	width: fit-content;
	margin: auto;
}

.btnLeft{
	margin-left: 0;
}

.containerNuevoEstado .formData {
    height: calc(100vh - 80px);
	width: 60%;
    margin: 0 20%;
}


.divEnviarEstado {
	left: 20%;
	width: 60%;
}

#contCurrent {
    top: 0;
    height: 70%;
}

.divImgCurrent {
    height: 100%;
	top: 0;
}

.divImgCurrent img {
    margin: 0;
    height: 100%;
}

.bigBtn {
    top: -25% !important;
	translate: -50%;
}


#contImgs::-webkit-scrollbar {
    display: none
}

#labelBtnNew, #contImgs {
    top: 90px;
    bottom: auto;
}

#contImgs {
    position: relative;
}



.card2 {
    width: 32%;
}

.mk_imagen img {
    max-height: 500px;
}


.modalMarket {
    width: 90%;
    height: calc(100vh - 40px);
    margin: 20px 5%;
}






}









@media (max-width: 750px) {


.video-card{
	width:140px !important;
}

	

.card-skeletonMarket {
    width: 50%;
}

.contEdit2 {
    width: 100%;
}
	
.menuFooter{
    height: 62px;
}

.datosListIndex{
    width: calc(100% - 90px) !important;
}

.btnCatalogoIndex{
	display: none;
}
	
.itemCatalogo .empLeft img{
	width: 100%;
	aspect-ratio: 1/1;
	height: auto;
}

.card2 {
    height: 310px;
}

.divImgMkt {
    height: 220px;
}

.itemEmpresa .txtItemEmp1 {
	font-size: 20px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
	
	
.itemEmpresa .txtItemEmp2{
	font-size: 13px;
}

.itemEmpresa .vencimiento {
    font-size: 14px;
	padding: 5px 0 0;
    line-height: 1.5;
}


.menuModalFooter{
    width: 100%;
    border-radius: 0;
    max-width: 100%;
    top: auto;
    left: 50%;
    transform: initial;
    margin-left: -50%;
    bottom: 0;
}







#contImgs::-webkit-scrollbar {display: none;}


.containerEmpresas{
	width: 100%;
    margin: 0;
}

.containerEmpresas .inputSearch {
	border: solid 1px #baaacd !important;
	box-shadow: 0 2px 2px 0 rgb(0 40 0 / 40%) !important;
	border-radius: 15px !important;
	width: 96% !important;
    margin: 0 2% !important;
}
	
.containerNuevoEstado .inputSearch {
	border: solid 1px #baaacd !important;
	box-shadow: 0 2px 2px 0 rgb(0 40 0 / 40%) !important;
	border-radius: 15px !important;
	width: 96% !important;
    margin: 0 2% !important;
}
	
.containerNuevoEstado .empresas{
	height: calc(100svh - 85px);
}


.containerNuevoEstado .formData{
	height: 100%; position: relative; padding: 0;
}
	
	
	
#contImgs{
	overflow: hidden;
	overflow-x: scroll;
	height: auto;
	white-space: nowrap;
	display: inline-block;
	width: calc(100% - 70px);
    position: absolute;
}

.containerNuevoEstado #contImgs{
    left: 65px;
}

.borraImg{
	position: relative;
	margin: 4px 1px;
	display: inline-block;
}

.borraImgSelected .imgEstadoMini{
	filter: brightness(0.5);
}


.containerNuevoEstado .imgEstadoMini{
	float: none;
	width: 60px;
	height: 60px;
	object-fit: cover;
	margin: 4px 1px !important;
}

.borraImg span{
	position: absolute;
	cursor: pointer;
	right: 13px;
	top: 15px;
	border-radius: 100%;
	display: none;
	z-index: 11;
}

.borraImgSelected span{
	display: block;
}

.borraImg span img{
	width: 36px;
	height: 36px;
}

#contCurrent {
	height: calc(100svh - 160px);
	position: relative;
}

#contCurrent input{
	display: none;
	position: absolute;
	bottom: 4px;
	border-radius: 8px;
	padding: 15px 10px;
}


.divImgCurrent{
	text-align: center;
	position: relative;
	top: 0;
	height: calc(100dvh - 240px);
	transition: .3s;
	
}

.divImgCurrent img{
	width: auto;
    margin: 0;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 5px;
    max-width: 100%;
}

.labelButtonImg2{
	border-radius: 10px;
	height: 60px;
	margin: 8px 0;
	width: 60px; border: solid 2px white;
	transition: .3s;
	position: absolute;
    top: auto;
    left: 4px;
    bottom: 0;
}
.labelButtonImg2 img{
	position: absolute;
	width: 33px;
	height: 33px;
	top: 13px;
	left: 50%;
}

.containerNuevoEstado {
	width: 100%;
	position: relative;
}

.bigBtn{
	transform: scale(3);
	top: 50%;
	left: 50%;
    translate: -30px;
}

.pac-item{
	padding: 15px 7px; font-size: 16px;
}


.pac-matched{
	font-size: 16px;
}


.contCatalogo{
	width: 100%;
    margin: 0;
}

	
	
.conDireccion {
    width: 100% !important;
    margin-left: 0;
}

	
	
	
.contCodInput {
    width: 12%;
    margin: 5px 2px;
}
	
.contCodInput input {
    font-size: 26px;
    padding: 16px 0;
}
	
	
.modalEmpresa .btnPerfilEmp {
    float: left;
    width: 23%;
    display: block;
}


.modalEmpresa .btnPerfilMarket {
	width: 90%;
    margin: 10px 5%;
	padding: 12px 0;
	background-color: var(--color2);
}

.modalEmpresa .btnPerfilMarket span {
	display: inline;
    color: white;
    line-height: 26px;
    margin-left: 9px;
    font-weight: bolder;
    font-size: 17px;
}


.modalEmpresa .btnPerfilMarket img {
	width: 27px;
    height: 27px;
    display: inline-block;
    vertical-align: top;
	filter: brightness(10);
}


#detalleEstado .imgEstado{width: 90%; }
#detalleEstado .itemMenuEmp {float: none; margin-top: 30px;  }


#detalleEstado .logoEmpTop .imgLogo {width: 50px; height: 50px; margin-top: 4px;}
#detalleEstado .logoEmpTop {margin-right: 19px;}
	
	
.itemMisEmpresas .empRight {
    width: 72%;
}

	
.indexCuadrado{
	
}

.indexCuadrado .columnaRight{
	display: none;
}

.indexCuadrado .btnCatalogo{
	display: none;
}

.indexCuadrado .itemEmp100 {
    width: 20% !important;
    float: left;
	border-bottom: none;
}
	
	
	
	
	
.menuModalEmp {
    width: 90%;
    border-radius: 8px;
    max-width: 90%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    margin-left: -45%;
}
	
	
.itemChipIndex {
    font-size: 14px;
    padding: 10px 15px;
}


.contItemsCatalogo{
	margin-top: -10px; 
}


.empLeft {
    width: 27%;
}


.empRight {
    width: 100%;
}

.contCatalogo .txtItemEmp1 {
   font-size: 20px;
}

.itemCatalogo .txtItemEmp3 {
    width: 100%;
}

.contTotalCart {
    font-size: 27px;
    height: auto;
    width: 96%;
    right: 2%;
}

.contTotalCart i{
	display: block;
    margin-bottom: 4px;
    font-size: 20px;
}


.nuevoEstado .itemEmp400 {
	width: 31%;
	padding: 15px;
	height: 170px;
}

.nuevoEstado .itemEmp400 img{
	width: 76%; margin: 5px 12%; 
}
.nuevoEstado .nombreItemEmp400{
	font-size: 14px; 
}


.itemEmp500{
	height: 115px !important;
}



.menuFooter .btnEmpresas{
	padding: 11px 5px;
}
	
	
	
	.btnSearch{
		border-radius: 100%;
		background-color: var(--color1);
		height: 40px;
		width: 40px;
		position: absolute;
		top: 15px;
		right: 10px;
		cursor: pointer;
		display: block;
	}
	.btnSearch img{
		width: 36px;
		height: 36px;
		padding: 7px;
		margin-left: 2px;
		margin-top: 2px;
	}


.header .logoHeader{text-align: left}

.btnEstadoWh{
	display: block;
}

.countSeguidores {
    font-size: 19px;
}


.btnSeguir {
    padding: 10px;
}

.topEmpEstados .btnSeguir {
    padding: 8px 10px;
}

.divFaqs {
    padding: 5px;
    padding-bottom: 0;
    width: 96%;
    margin: 20px 2%;
	margin-top: 0;
}
	
.parrafoFaq {
    width: 100%;
    padding: 40px 0;
}

.videoFaq {
    width: 100%;
    padding: 0;
}


.containerDetalleEstado .divEstado {
    height: auto;
    position: relative;
	top: 30px;
}

.containerDetalleEstado .logoEmpTop {
    width: 45px;
    height: 45px;
	margin-top: 4px;
}

.containerDetalleEstado .logoEmpTop .imgLogo {
    width: 45px;
    height: 45px;
}



.containerDetalleEstado .contactoEmp {
    margin-top: 10px; float: none; margin-right: auto;
}

.containerDetalleEstado .estados {
    position: relative;
}

.containerDetalleEstado .btnChat{
	font-size: 15px;
}


.containerDetalleEstado .divEstado .imgEstado {
    width: 50%; 
}

.containerDetalleEstado .columnaRight {
    padding-top: 0;
}

.containerDetalleEstado .itemMenuEmpInvertido {
    width: 90%; margin: 20px 5%;
}


.containerDetalleEstado .btnCenter{
	float: none;
    display: inline-block;
	width: 98%; margin: 0px 1%;
}



.itemEmpresa {
    padding: 10px;
}

.itemMenuEmp a {
	width: 100%;
    padding: 17px 0;
    font-size: 16px;
}

.divInput>label {
    bottom: 64px;
    left: 18px;
    top: auto;
    font-size: 14px;
}




.titulo200 {
    font-size: 17px;
}


.menuEmp .itemMenuEmp{
	width: 96%;
    margin: 10px 2%;
}


	.menuEmp2{
		margin-top: 0;
		
	}
	
	.menuEmp2 .itemMenuEmp{
		width: 19%;
    margin: 5px .5% 20px .5%;
	}
	.menuEmp2 .itemMenuEmp a{
		padding: 14px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}
	.menuEmp2 .itemMenuEmp img{
		width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto;
	}

.itemEmp400 {
    width: calc(50% - 20px);
    padding: 10px;
    margin: 10px;
    border-radius: 8px;
	height: 210px;
	border: solid 1px #888;
}

.nombreItemEmp400 {
    font-size: 18px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


.txtEstado {
	padding: 5px 80px 40px 5%;
}


.header{
	box-shadow: none;
}

.empresas {
    width: 100%;
}

.granLayoutEmpresas{
    padding: 0px;
	padding-bottom: 75px;
}


.divBuscarIndex{
	padding: 0;
    margin-bottom: 0;
    position: fixed;
    top: 0;
	right: -2px;
    z-index: 1111;
    background-color: white;
	transition: .15s;
	transform: scaleX(0);
	margin-left: 100%;
	opacity: 0;
	width: calc(100% + 2px);
    height: 71px;
	margin-top: 0;
}

.divBuscarIndexExpanded{
	transform: scaleX(1);
	margin-left: 0;
	opacity: 1;
	z-index: 6000;
}



.divBuscarIndex .imgCloseSearch{
	position: absolute;
    right: 12px;
    top: 18px;
    width: 28px;
    height: 28px;
    filter: contrast(0.4);
    cursor: pointer;
	display: block;
}

.divBuscarIndex .imgArrowCloseSearch{
    left: 12px;
}

.divBuscarIndex .inputSearch{
	width: 100%;
    padding: 20px 16px 20px 50px;
    border: none;
    box-shadow: 0 2px 17px -3px rgb(0 40 0 / 40%);
    font-size: 18px;
    margin: 0;
    border-radius: 0;
}

	
.divBuscarMisEmpresas {
    padding: 0;
    margin-bottom: 0;
    position: static;
    z-index: 1111;
    background-color: white;
    width: 100%;
    height: 70px;
    margin-top: 0;
	transform: none;
    margin-left: 0;
    opacity: 1;
}

	

.header .logoHeader {
    width: 100%; height: 70px;
}
.header .logoHeader img {
    max-height: 54px;
    height: 50px;
    margin-top: 12px;
    margin-left: 12px;
}

.header h5{
	width:100%; font-size: 15px; margin:15px 0 10px 0;
}

.header .leyendaHeader {
    width: 90%;
    margin-left: 5%;
    font-size: 17px;
}

.header .leyendaHeader a {
    padding: 15px
}


.itemEmp {
    width: 100%;
    margin:0;
	min-height: 84px;
	border-radius: 0px;
	box-shadow: none;
	padding: 10px 3px;
}

	
.deleteEstado, .hideEstado, .editEstado {
    top: 20px;
    bottom: auto;
}


.itemEmp100{
	width: 100%;
}

.itemEmpresa .imgLogo{
	height: 118px;
}

.itemEmpresa .logoEmp {
    height: 120px;
}


.btnAccion img {
    width: 28px;
    height: 28px;
    margin-left: -14px;
}

.btnAccion span {
    bottom: -3px;
}

.columnaRight{
	float: left;
	width: 50%;
	min-height: 55px;
	padding-bottom: 0px;
	padding-left: 0;
	padding-top: 10px;
	
}

.itemEmp .columnaRight{
	width: 70%;
}

.itemMisEstados .itemEmp .columnaRight{
	width: calc(100% - 110px);
}

.columnaRightEstado{
    width: 80%;
}




.nombreEmp {
    font-size: 17px;
    color: #555;
    padding: 0;
    font-weight: 600;
    margin-top: 0;
    width: 100%;
	line-height: normal;
	text-align: left;
	top: 0;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deliveryEmp{
	margin-left: 10px;
    margin-top: 10px;
    top: -5px;
    right: 5px;
	left: auto;
	bottom: auto;
}

.rubroEmp {
    font-size: 18px;
    color: #555;
    font-weight: 600;
    width: 100%;
	padding: 0 0 0 15px;
    height: auto;
}

.divEnvios{
	left: 100%;
    bottom: -18px;
	
}


.horarioEmp {
	height: auto;
	font-size: 16px;
	padding: 14px;
}

.pagosEmp {
	height: auto;
	padding: 10px 12px 15px;
}

.formData {
    width: 100%;
    margin: 0;
    padding: 7px;
}

.containerButtonImg {
    right: 10%; left: auto
}

.btnEnviar {
    padding:14px;
    font-size: 15px;
    width: 100%;
}


.contactoEmp {
    padding:0px;
    width:51%;
	float: left;
    margin: 17px 2% 9px 3%;
}

.contactoEmp a {
	padding:8px 7px 10px 7px;
	font-size: 20px;
	letter-spacing: 1px; 
	user-select: none
}

.contactoEmp a img {
    width: 23px;
    height: 23px;
	margin-top: 1px;
}

.infoEmp{
	display: block;
	padding: 14px 7px 0px 7px;
	width: 41%;
    margin: 17px 3% 9px 0%;
	border-radius: 7px;
	text-align: center;
	float: left;
	user-select: none;
}

.infoEmp a{
	font-size: 16px;
    font-weight: 600;
	user-select: none;
	color: #333;
}

.infoEmp img{
	vertical-align: middle;
	margin-top: -4px;
	transition: .3s
}

.divHidden{
	padding: 3px 0 10px 0;
	display: none
}

.direccionEmp {
	padding: 7px 12px;
}


.direccionEmp img{
	vertical-align: middle;
	margin-top: -2px;
    margin-right: 5px;
}

.btnNuevo {
    top: 180px;
}


.clearMovil{
	clear: both
}


.rubros{
	margin-top: 50px;
	padding: 20px 20px 0 20px;
}

.itemRubro {
    padding: 14px 5px 16px 20px;
    width: 48%;
    border-radius: 11px;
    margin: 11px 1%;
}

.itemRubro .flechaRubro{top: 15px; }



.superContainer{
	overflow-x: scroll; width: 800px;
}


.titleRubros{
    font-size: 35px;
}

.itemEmpIndex{min-height: 80px; margin: 9px 0; background-image: none; border-bottom: 3px solid #248cd6; background-color: #efefef;
}


.menuMain{
	text-align: center;
}



.btnEmpresas {
    top: 0px;
    margin: 10px 1%;
    margin-bottom: 20px;
    width: 31.3%;
    right: 0;
    font-size: 13px;
    padding: 15px 5px;
}

	.btnHeader2{
		width: 48%;
	}

.header .logoHeader a {
    display: inline-block;
}


.registroAdmin{width: 90%; margin: 40px 5%}


	
.nombreEmpTop{font-size: 19px; color: #fff; font-weight: bolder; cursor: pointer; }

.horaEstadoTop{
	font-size: 15px;
	text-align: left;
	top: 0px;
}


	
.modalEmpresa .rubroEmp {
    font-size: 18px;
}





.modalEmpresa .contactoEmp {
    font-size: 17px;
    float: none;
    padding: 10px 23px
}



.modalEmpresa .direccionEmp {
    font-size: 19px;
	height: auto;
}


	
	
	
.contTxtEdit{
	
}

.inputEdit{
	padding: 6px 8px;
    border-radius: 5px;
    margin-bottom: 0;
	float: none;
    flex: 1;
    margin-right: 5px;
}


.btnEdit{
	background-color: var(--color2);
    padding: 10px 9px;
    float: none;
	white-space: nowrap;
    width: max-content;
    top: 10px;
    margin: 0;
}
	
	







}







@media (max-width: 360px){
	#contCurrent {
		height: calc(100% - 70px);
	}
	
	
	.contTotalCart i {
		font-size: 18px;
		margin-right: 0px;
	}
	
	.itemEmp400 {
    	height: 190px;
	}
	
	
	
	
	
	
	
}






.itemMedioPago {
margin: 0;
width: max-content;
border-bottom: 1px solid #E1E1E1;
padding: 5px 0 12px 20px;
min-width: 95%;
}
.itemMedioPago span {
width: 80%;
display: inline-block;
}
.itemMedioPago .switchBox {
display: inline-block;
}
.switchBox {
display: block;
margin-right: 20px;
position: relative;
}
input[type=radio], input[type=checkbox] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type=checkbox], input[type=radio] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
.cbx {
display: none;
}

.cbx:checked ~ label {
background: #9FD7FC;
}
.form-signin .input-group label {
margin: 7px 0 0 4px;
}
.itemMedioPago .lbl {
margin: 0px 0 7px 5px !important;
}
.lbl {
position: relative;
display: block;
height: 16px;
width: 35px;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
top: 10px !important;
left: 5px !important;
}

label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
}


.cbx:checked ~ label:after {
left: 16px;
background: #0686DD;
}

.lbl:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 22px;
height: 22px;
border-radius: 100px;
background: #fff;
box-shadow: 0px 0px 3px 3px rgb(0 0 0 / 10%);
content: '';
transition: all 0.3s ease;
}




/* //// HORARIO DE ATENCION /////// */
.form-signin .divHorariosMain {width: 50% !important; margin-bottom: 40px}
.itemHorario{width: 100%; position: relative; padding:15px 20px; border-bottom: 1px solid #ccc; }
.itemHorario *{user-select: none}
.diaHorario{float:left; margin: 0 5px; width: 80px;}
.chkHorario{float:left; margin: 3px 15px 0 5px }
.chkHorario input{width: 20px; height: 20px}
.divHorarios{float:left; display: block}
.tHorario{float:left; display: none}
.tHorario .form-control{width: auto; margin: 2px;}
.tHorario *{float:left}
.deleteHorario{margin: 19px 0 0 7px;}
.deleteHorario i{color:#777; cursor: pointer}
.deleteHorario i:hover{color:#333;}
.agregarHorario{cursor: pointer; text-align: center; margin-top: 15px; }
.agregarHorario span:hover{text-decoration: underline}
.agregarHorario span{color: #26A4F9; }
.switchBox{display:block; margin-right:20px; position:relative}

.nombreDia{display: block; border-top: solid 1px #ddd; padding-top:5px; margin-top: 2px; font-size: 13px;}
.timeHorario{float: left; display: block; padding:3px 15px 3px 0; font-size: 12px}
.itemHorario .lbl {top: 3px !important;}


/* //// HORARIO DE ATENCION /////// */

/* //// HORARIO DE ATENCION vista clientes /////// */

.horarios-box {
	background: #f8f9fa;
	border-radius: 10px;
	padding: 12px 16px;
	max-width: 400px;
	margin: 0 auto 30px;
	padding-top: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	font-family: Arial, sans-serif;
}

.titulo-horario {
	font-size: 1.1rem;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #0d6efd;
}

.fila-horario {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid #e9ecef;
}

.fila-horario:last-child {
	border-bottom: none;
}

.nombre-dia {
	font-weight: 600;
	color: #343a40;
}

.tramos-dia {
	font-size: 0.9rem;
	color: #495057;
	background: #e9f5ff;
	padding: 2px 6px;
	border-radius: 5px;
}

.cerrado {
	font-size: 0.9rem;
	color: #dc3545;
	font-weight: bold;
}

.horarios-vacios {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.95rem;
	color: #6c757d;
	background: #fff3cd;
	border: 1px solid #ffeeba;
	padding: 10px 12px;
	border-radius: 8px;
}


/* Estado del local */
.estado-horario {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 10px;
	padding: 6px 10px;
	border-radius: 8px;
	display: inline-block;
}

/* Estado: Abierto ahora */
.estado-horario.abierto {
	background-color: #d1e7dd;
	color: #0f5132;
	border: 1px solid #badbcc;
}

/* Estado: Abierto, cierra pronto */
.estado-horario.cierra-pronto {
	background-color: #fff3cd;
	color: #664d03;
	border: 1px solid #ffecb5;
}

/* Estado: Cerrado */
.estado-horario.cerrado {
	background-color: #f8d7da;
	color: #842029;
	border: 1px solid #f5c2c7;
}

/* //// HORARIO DE ATENCION vista clientes /////// */


.barraProgresoTransparente {
	background-color: #a7a7a7ad;
}

/* Animación para llenar la barra de progreso */
@keyframes fillBar {
    from { width: 0%; }
    to { width: 100%; }
}

.barraProgresoAnimada {
    height: 100%;
    background-color: white;
    border-radius: 25px;
    width: 0%; /* Inicialmente vacío */
    animation: fillBar 5s linear forwards running; /* Duración inicial 5s, pausada por defecto */
}


/*VIDEOS TUTORIALES INDEX*/



/* Contenedor del carrusel */
#ytPlayer iframe {
	width: 100%;
	height: 100%;
}

#carruselVideos {
	overflow-x: auto;
	white-space: nowrap;
	padding: 20px 0;
}


.tituloVideosIndex{
	text-align: center; font-weight: bolder; font-size: 25px; padding-top: 10px; margin: 0; color: darkblue;
}

.subtituloVideosIndex{
	font-size: 18px; padding-top: 4px;
}
.videosIndex{
	background: linear-gradient(-45deg, #FBD6B0, #F4C3D2, #B0DAF5, #B1EEDD);
	background-size: 400% 400%;
	animation: gradientFondo 7s ease infinite;
	max-width: 800px;
    margin: 20px auto 0;
}


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


#carruselVideos::-webkit-scrollbar{height: 3px;
	background: #fff;
	border-radius: 13px;}

#carruselVideos::-webkit-scrollbar-thumb {
  background: var(--color1);
	border-radius: 13px;
}

/* Flex row para alinear los items uno al lado del otro */
.carrusel-row {
	display: flex;
	gap: 12px;
	padding: 0 20px;
	align-items:flex-start;
}
/* Cada tarjeta que contiene el iframe (miniatura vertical) */
.video-card {
	position: relative;
	width: auto;
	width:220px; /* ancho miniatura; ajustá si querés */
	aspect-ratio: 946 / 2104;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	box-shadow:0 2px 10px rgba(0,0,0,0.12);
	flex-shrink: 0;
}
.video-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-title {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 6px 8px;
	font-size: 14px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	text-shadow: 0 0 3px rgba(0,0,0,0.8);
	/* --- Importante para permitir 2 líneas --- */
	white-space: normal;      /* permite salto de línea */
	word-wrap: break-word;    /* corta palabras largas si hacen overflow */
	line-height: 1.2;         /* más compacto y elegante */
	height: 3.4em;        /* limita visualmente a 2 líneas */
	overflow: hidden;         /* evita que sobresalga */
	display: flex;
	justify-content: center;  /* Centra horizontalmente */
	align-items: center;  
}

.play-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	transition: .2s;
}


.play-overlay .triangle {
	width: 0;
	height: 0;
	border-left: 30px solid white;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.8));
}
/* Modal / overlay para reproducción ampliada */
#overlay{
	position:fixed;
	inset:0;
	display:none;
	justify-content:center;
	align-items:center;
	background:rgba(0,0,0,0.7); /* fondo negro alpha */
	z-index:9999;
}

/* Caja central donde se reproduce el video grande */
#cajaParaReproducir{
	position:relative;
	height:80vh;
	/* ancho adaptativo según aspecto */
	aspect-ratio: 946 / 2104; /* mantiene el mismo aspecto vertical */
	max-width:90vw;
	background:#000;
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 12px 40px rgba(0,0,0,0.6);
}

/* iframe grande ocupa toda la caja */
#cajaParaReproducir iframe{
	width:100%;
	height:100%;
	border:0;
	display:block;
}

/* Botón cerrar */
#btnCerrar{
	position:absolute;
	right:8px;
	top:8px;
	z-index:5;
	background:rgba(0,0,0,0.6);
	color:#fff;
	border:0;
	padding:6px 10px;
	border-radius:6px;
	cursor:pointer;
	font-size:16px;
}


.caja-mini-loading {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: #000;
}

.mini-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.loading-video {
	position: absolute;
	width: 60px;
	height: 60px;
}


/*VIDEOS TUTORIALES INDEX*/




/*MENU INFERIOR*/
/* Overlay oscuro */
#overlayMenu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	z-index: 90;
}

/* Menú inferior */
#menuInferior {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100%;
	max-height: 80vh;
	background: #fff;
	border-radius: 15px 15px 0 0;
	box-shadow: 0 -3px 15px rgba(0,0,0,0.15);
	overflow-y: auto;
	transform: translateY(100%);
	transition: transform .2s ease-out;
	z-index: 2400;
	padding: 3px 0 0;
}

/* Items */
.menuItem {
	height: 68px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	border-bottom: 1px solid #e5e5e5;
}

.menuItem img {
	width: 24px;
	height: 24px;
	margin-right: 12px;
	opacity: 0.8;
	filter: invert(71%) sepia(4%) saturate(3170%) hue-rotate(253deg) brightness(75%) contrast(24%);
}

.menuItem a {
	color: #333;
	font-size: 16px;
	text-decoration: none;
	flex-grow: 1;
}

/* Estado visible del menú */
#overlayMenu.activo {
	visibility: visible;
	opacity: 1;
}

#menuInferior.activo {
	transform: translateY(0%);
	bottom: 62px;
}


/*MENU INFERIOR*/




/*ESTILOS DE LAS NOTIFICACIONES*/
.listaNotificaciones {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 10px;
	max-width: 700px !important;
	margin: 0 auto !important;
}

.notItem {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1);
	text-decoration: none;
    color: inherit;
}

.notItem:hover {
	background: #f9f9f9;
}

.notItem a {
	text-decoration: none;
	color: #2b58c7;
	font-size: 16px;
	font-weight: bold;
	display: block;
	margin-bottom: 6px;
}

.notItem .desc {
	color: #444;
	font-size: 14px;
	margin-bottom: 4px;
	line-height: 1.4;
}

.notItem .meta {
	color: #777;
	font-size: 12px;
}



.alertPush {
	background: #D88100;
	color: #fff;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	margin: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.alertPush .btnPush {
	background: #fff;
	color: #D88100;
	border: none;
	padding: 10px 15px;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
	transition: 0.2s;
}
.alertPush .btnPush:hover {
	background: #A96500;
}


.notImg {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
	background: #ddd;
}

.notContent {
	flex: 1;
}

.notTitle {
	font-size: 15px;
	margin: 0;
}


.notDesc {
	color: #555;
	font-size: 13px;
	margin: 2px 0;
}

.notMeta {
	color: #777;
	font-size: 12px;
}

.unread {
    background: #f9d6ff;
}

.unread .notTitle {
    font-weight: 700;
}

/* Cuando pasan 2 segundos y queremos quitar estilo */
.leidaAuto {
    background: #fff !important;
}

.leidaAuto .notTitle {
    font-weight: 400 !important;
}


/*ESTILOS DE LAS NOTIFICACIONES*/


.video-player {
	width: 100%;
	height: auto;
	background: #000;
	border-radius: 10px;
	display: block;
}

.caja-mini-loading {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mini-video {
	width: 100%;
	border-radius: 10px;
}

.loading-video {
	position: absolute;
	width: 60px;
	opacity: 0.7;
}