*, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: none; word-break: break-word; }
*:focus { outline: none; }
a { text-decoration: none; color: inherit }
body { font-family: 'Nunito', sans-serif; color: #757575; font-weight: 400; line-height: 140%; font-size: 14px; min-width: 300px; background: #ffff;}
li { list-style: none;}
img{width:100%;display:block}
input:not([type=radio]) { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }
input,textarea,button,select,a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.link{text-decoration:underline;margin:0 4px}
.-hidden {display: none !important; }

/*preloader*/
.calendario,.bloque-hora { position: relative; }
#calendar.loading .caja-preloader, #calendar_mobile.loading .caja-preloader, #horarios.loading + .caja-preloader { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2 }
#calendar.loading .caja-preloader, #calendar_mobile.loading .caja-preloader { background: rgba(255,255,255,.9); }
#horarios.loading + .caja-preloader { background: rgba(241, 241, 241, .9); }
#calendar.loading .caja-preloader .preloader, #calendar_mobile.loading .caja-preloader .preloader { border: 10px solid #eee; }
#horarios.loading + .caja-preloader .preloader { border: 10px solid #d4d3d3; }
#calendar.loading .caja-preloader .preloader, #calendar_mobile.loading .caja-preloader .preloader,
#horarios.loading + .caja-preloader .preloader { width: 70px; height: 70px; border-top: 10px solid; border-radius: 50%; animation-name: girar; animation-duration: 2s; animation-iteration-count: infinite; }


#calendar .caja-preloader .titulo2, #calendar_mobile .caja-preloader .titulo2,
#horarios + .caja-preloader .titulo2 { display: none; }
#calendar.loading .caja-preloader .titulo2, #calendar_mobile.loading .caja-preloader .titulo2,
#horarios.loading + .caja-preloader .titulo2 { display: block; margin-top: 20px; animation-name: intermitente; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate }

@keyframes girar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes intermitente{
    from { opacity:0; }
    to { opacity:.6; }
}

/*header*/
header{padding: 8px;justify-content:space-between;align-items:center; border-bottom: 1px solid #eee;z-index:2;background:#fff;position:relative; max-width: 1200px; margin: 0 auto;}
header .logo img{width:auto;max-width:120px;max-height:80px}
header .dch{align-items:center;flex-shrink:0}
header .dch .telefono{border-radius:56px}
header .dch .telefono i{margin:12px}
header .dch .entrar{padding: 0 20px;}
header .dch .entrar a:not(:hover){color:#000}
header .usuario{margin-right:16px; padding: 12px 0;}
header .usuario i{font-size:16px;margin-right:8px}
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltip-txt { visibility: hidden; width: 120px; background-color: #fff; text-align: left; position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px;border:1px solid rgba(0,0,0,.2) }
.tooltip .tooltip-txt div{padding:12px;border-bottom:1px solid rgba(0,0,0,.2)}
.tooltip .tooltip-txt div:last-child{border-bottom:none}
.tooltip:hover .tooltip-txt { visibility: visible; }
header .telefono .numero{display:none}
header .tooltip.usuario{display:flex;align-items:center}
header .tooltip.usuario .titulo2 { max-width: 80px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block }


/*escritorio*/
.escritorio { padding: 12px; }
.container.body-content{min-height:calc(100vh - 58px);display:flex;flex-direction:column; max-width:1200px;margin: auto;width:100%; background-color: #fff;}
.container.body-content .escritorio{flex-grow:8;}
    /*.container.body-content > string > div { padding: 12px;}*/
        .container.body-content string > div .enc { font-size:140%; font-weight: bold; }
            .container.body-content string > div .enc:not(:first-child) { margin-top:24px;}
            /*colores*/
            .color1 { color: #930A65; background: transparent; }/*TODO: Adrián: Este color tendrá que cambiarlo el editor*/
.color2 { color: #fff; background: #930A65; }/*TODO: Adrián: Este color tendrá que cambiarlo el editor*/
.grisOscuro { color: #353535 }


/*comunes*/
.flex{display:flex}
.flex-row{display:flex;flex-flow:row wrap}
.flex-col{display:flex;flex-direction:column}
.w50,.w100,.w50SinMrg{width:100%}

/*Textos*/
.titulo1 { font-family: 'Nunito', sans-serif; color: #353535; font-weight: 800; line-height: 140%; font-size: 18px; margin: 0; }
.titulo2 { font-family: 'Nunito', sans-serif; font-weight: 800; line-height: 140%; font-size: 16px; margin: 0; }
.titulo3 { font-family: 'Nunito', sans-serif; font-weight: 700; line-height: 140%; font-size: 12px; margin: 0; }
.titulo4 { font-family: 'Nunito', sans-serif; font-weight: 700; line-height: 140%; font-size: 14px; margin: 0; }
.anotacion {font-size:14px;line-height:120%  }
.may { text-transform: uppercase }

p{margin-bottom:12px}
div p:last-child{margin-bottom:0;}

/*iconos*/
.izq{margin-right:4px}
.dch{margin-left:4px}

/*botones*/
.btn{display:flex;align-items:center;border-radius:24px;font-weight:700;justify-content:center;box-shadow:0 0 0px rgba(0,0,0,0);line-height:140%;max-width: 200px;}
.btn.conBorde{border:2px solid;padding: 2px 12px; }
.btn.sinBorde{border:none;padding:4px 14px}
.btn i { transition: transform .4s; -ms-transition: transform .4s; -webkit-transition: transform .4s;  }
.btn { transition: box-shadow .2s,transform .2s; -ms-transition: box-shadow .2s,transform .2s; -webkit-transition: box-shadow .2s,transform .2s; height: 38px }
/*.tarjeta .btn{height:auto}*/
.btn:hover i { transform: translateX(8px); -ms-transform: translateX(8px); -webkit-transform: translateX(8px); }
.btn:hover { box-shadow: 0 0 4px rgba(0,0,0,.4); transform: scale(1.04); -ms-transform: scale(1.04); -webkit-transform: scale(1.04); }

/*tarjetas*/
.tarjeta {
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    margin-top: 12px;
    transition: box-shadow .4s, transform .4s;
    /* @alternate */
    -ms-transition: box-shadow .4s, transform .4s;
    /* @alternate */
    -webkit-transition: box-shadow .4s, transform .4s;
    /* @alternate */
    -webkit-transition: box-shadow .4s, transform .4s;
}
.tarjeta .info { padding: 8px; display: flex; flex-direction: column; justify-content: space-between; height:calc(100% - 180px)}
.tarjeta .img{position:relative;overflow:hidden}
.tarjeta .img .duracion{position:absolute;bottom:4px;right:4px;background:#fff;padding:2px 8px;border-radius:12px}
.tarjeta .img .bk-img { height: 100%; width: 100%; transition: transform .8s ease-out }
.escritorio:not(.inactivo) .tarjeta:hover .img .bk-img { transform: scale(1.12) }

.cabecera-info { margin-bottom: 8px }
.texto-info { margin-bottom: 8px }
.cierre-info { justify-content: space-between; align-items: center }
.cierre-info .pvp{margin-right:8px;margin-bottom:8px}
.tarjeta .cierre-info .btn { width:100%; }
.tarjeta-v .info .texto-info{flex:1;}
  
.tarjeta-v a {  height: 100%;display:flex; flex-direction:column }
.tarjeta-v a .info{flex-grow:8}
.tarjeta-v .img { height: 120px;}

.escritorio:not(.inactivo) .tarjeta:hover { box-shadow: 0 0 8px rgba(0, 0, 0, .3); transform: scale(1.02); -ms-transform: scale(1.02); -webkit-transform: scale(1.02);  }
.escritorio:not(.inactivo) .tarjeta:hover .btn { box-shadow: 0 0 4px rgba(0,0,0,.4);transform: scale(1.04);-ms-transform: scale(1.04);-webkit-transform:scale(1.04);transition: .2s;-ms-transition: .2s;-webkit-transition:.2s; transition-timing-function: cubic-bezier(0.54, 0.08, 0.93, 0.6);-webkit-transition-timing-function: cubic-bezier(0.54, 0.08, 0.93, 0.6) }
.tarjeta .btn i { transition: transform .4s; -ms-transition: transform .4s; -webkit-transition: transform .4s; }
.escritorio:not(.inactivo) .tarjeta:hover .btn i { transform: translateX(8px);-ms-transform: translateX(8px);-webkit-transform:translateX(8px); }

.tarjeta-h{width:100%}
.tarjeta-h a{display:flex;flex-direction:row;min-height:120px;height:100%}
.tarjeta-h .img{width:50%;}
.tarjeta-h .img .bk-img{}
.tarjeta-h .info { max-width: 50%; padding: 8px;display:flex; flex-direction: column; justify-content: space-between; width: 100%;height:100% }
.tarjeta-h .info .datos{flex-grow:8}
.tarjeta-h .info .cierre-info{display:flex;justify-content:flex-end;width:100%}
.tarjeta-h .info .cierre-info .texto-info{width:auto}

/*servicios*/
.servicios_filtro { margin: 12px 0 16px; text-align: left;  }
.servicios_filtro > div { position: relative; width:100%;}
.servicios_filtro > div:after { content: '\f002'; font-family: 'Font Awesome 5 Pro'; font-weight: 900; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); line-height: 100%; font-size: 24px; color: #999; }
.servicios_filtro #servFilter { width: 100%; padding: 10px 38px 10px 16px; font-size: 16px; line-height: 100%; border-radius: 24px; border: solid 2px #ddd; }
.servicios_filtro-eliminar { display: block; cursor:pointer; font-weight:600; margin-top:8px;}
.listado-servicios { padding: 4px 0 12px 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; }

#dvCatsDesc li { display: none; }

/* ModoListadoServicios: 1 */
.swiper-cats.swiper-container {
    padding-bottom: 16px;
    width: calc(100% + 12px);
}
.swiper-cats.swiper-container > .swiper-scrollbar { width: calc(100% - 12px); left: 0; }
.catsCont .label {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #930A65;
    color: white;
    display: none;
}

.catsCont .label > i {
    font-size: 18px;
}
.catsCont #dvCatsDesc { 
    padding: 8px 0;
}

#catsFilter { }
#catsFilter > li {
    cursor: pointer;
    
    border-radius:20px;
    display:inline-block;
    width:auto;
    background:#ddd;
    color:#333;
    text-transform:uppercase;
     font-weight:700;
    font-size:15px;
    line-height:120%;
    padding:8px 16px;
}

#catsFilter > li.selected {
    background: #777;
    color:#fff;
}


#catsFilter > li img {
    width:50%;
    height:90px;
    object-fit:cover;
    display:none;
}

/* ModoListadoServicios: 2 */
.listado-categorias .item{ }
.listado-categorias .item:first-child .categoria { border-top: 1px solid #ddd; }
.listado-categorias .categoria {cursor:pointer; padding: 12px 50px 12px 8px; border-bottom: 1px solid #ddd; position: relative; background:#f5f5f5;}
.listado-categorias .categoria:after { content: '\f078'; font-family: 'Font Awesome 5 Pro'; display: block; font-weight:400;position:absolute;top:50%;right:8px;transform:translateY(-50%);font-size:22px;}
.listado-categorias .item.active .categoria { background: #777; color: #fff; }
.listado-categorias .item.active .categoria .titulo1 { color: #fff; }
.listado-categorias .item.active .categoria:after { content: '\f077'; }
.listado-categorias .categoria { display: flex;flex-direction: row-reverse;}
    .listado-categorias .categoria .categoria-image { max-width: 100%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;  border-radius: 8px; margin-right: 8px; flex-shrink: 0; background-image:var(--bg-cat); background-position: center; background-size: cover;position: relative; overflow: hidden; }
        .listado-categorias .categoria .categoria-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.6); backdrop-filter: blur(4px);}
        .listado-categorias .categoria .categoria-image img { display: block; width: 100%; height: 100%; position: relative; z-index: 1; object-fit: cover;}
        .listado-categorias .categoria .categoria-info { width: 100%; align-self: center; }
    .listado-categorias .categoria .titulo1 { color: #757575; text-transform: uppercase; }
.listado-categorias .categoria .catdesc{margin-top:4px;}
.listado-categorias .listado-servicios { display: none; }

/*empleados*/
.listado-empleados { padding: 0 0 12px 0; justify-content: space-between }
.listado-empleados .tarjeta { min-height: 160px; }
.sin-preferencia{margin:16px 0 0 0;width:100%;background:#f1f1f1}
.sin-preferencia a { padding:8px; width: 100%; justify-content: space-between;min-height:auto;flex-direction:column }
.sin-preferencia .txt{margin-right:8px;margin-bottom:8px}
.sin-preferencia .btn{width:calc(50% - 8px)}
.sin-preferencia .btn-sin-preferencias{flex-shrink:0;display:flex;width:100%;justify-content:flex-end}

/*menu inferior*/
.menu-inf { background: rgba(241, 241, 241, .5); width: 100%; padding: 12px 12px 4px 12px; border-bottom: 2px solid #eee; animation: up 1s; -webkit-animation: up 1s;z-index:1 }
.menu-inf .info{max-width:1200px;margin: 0 auto;}
.etiqueta{background:#666;padding:2px 8px; border-radius:20px;color:#fff}
.menu-inf .item { padding: 8px 0; align-items: center; }
.menu-inf .item .flex{align-items:center}
.menu-inf .item .titulo2 { flex-grow: 8; margin-right: 8px }
.menu-inf .item:not(:last-child) { border-bottom: 1px solid #e2d9d9; }
.menu-inf .item .titulo3{flex-shrink:0}

/*formulario login*/
.escritorio.loguear { display: flex; flex-direction: column; justify-content: center }
.login { font-size: 16px; line-height: 140%;  margin: 0 auto;max-width:800px;}
.login h1 { text-align: center; margin-bottom: 12px }
.login .formulario {  margin: 0 0 20px 0;padding:0 20px;justify-content:space-between}
.login .formulario .item { display: flex; flex-direction: column; margin: 12px 0;align-items:center }
.login .formulario .item:last-child{margin-bottom:0}
.login .formulario input:not([type=radio]) { border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid #333; width: 100%; height: 40px; }
.cierre { text-align: center;background:#f1f1f1;padding:20px; }
.login .cierre .nuevo-cliente { margin: 16px 0 }
.form-check-label input.form-check-input[type="checkbox"] { border-top: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; width: 16px;height:16px;margin:0 8px 0 0; flex-shrink: 0; position: relative; z-index:1;}
    .form-check-label input.form-check-input[type="checkbox"] + a + span.anim, .form-check-label input.form-check-input[type="checkbox"] + span.anim, .opcion input.form-check-input[type="checkbox"] + label + span.anim { position: absolute }
    .form-check-label input.form-check-input[type="checkbox"]:checked + a + span.anim:before, .form-check-label input.form-check-input[type="checkbox"]:checked + span.anim:before, .opcion input.form-check-input[type="checkbox"]:checked + label + span.anim:before { content: '\f00c'; font-family: "Font Awesome 5 Pro"; font-weight: 800; margin: 2px; font-size: 12px; color: #000 }
.login .formulario .form-group .form-check-input + a{margin-left:4px;text-decoration:underline}
.form-check-label { display: flex; align-items: center }
.login .btn.sinBorde{padding:6px 14px}
.login .btn.conBorde{padding:4px 14px}
.login .centrar{display:flex;justify-content:center}
.anotacion{margin-bottom:20px;text-align:center}
.anotacion p{margin-bottom:8px}
.anotacion p:last-child{margin-bottom:0}
.login .formulario input.btn.sinBorde{border:none}
.login .legal { width: 100%; justify-content: center; margin-top: 20px; margin-bottom: 0; }


/*Area interna*/
.escritorio.area-interna{display:flex;flex-direction:column;justify-content:center}
.area-interna .titulo1{text-align:center;margin-bottom:24px; padding-bottom: 12px; border-bottom: 1px solid #ccc;}
.area-interna .radio-group { display: flex; justify-content: flex-start; flex-flow: row wrap; gap: 20px 40px; margin: 0 0 32px;}
.area-interna .radio-group .radio-item{ display: flex; align-items: center; font-size: 1.1em; line-height: 1em; cursor: pointer; color: #333;}
.area-interna .radio-group .radio-item:hover {color: #111;}
.area-interna .radio-group .radio-item input{ width: 20px; height: 20px; cursor: pointer;}
.area-interna .radio-group .radio-item label{ padding-left: 8px; cursor: pointer; font-weight: bold;}

.area-interna .reservas-proximas > span, 
.area-interna .reservas-anteriores > span{ font-size: 1.4em; font-weight: bold; display: flex; height: 160px; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,0.05); border-radius: 8px;}
.area-interna .reservas-anteriores {}

.area-interna .tarjeta-h .info { max-width: 100%; position: relative}

.area-interna .tarjeta-h { margin: 4px 0 20px 0 }
.area-interna .tarjeta-item { }
.area-interna .tarjeta-item.out {opacity: 0.8; filter: grayscale(1);}
/*.area-interna .tarjeta-item.out:nth-child(2) { margin-top: 16px; padding-top: 8px; border-top: 4px dashed #ccc;}*/
/*.area-interna .tarjeta-item.out:nth-child(2):before { content: "Reservas anteriores"; font-size: 18px; display: block; text-transform: uppercase; padding: 8px; font-family: 'Nunito', sans-serif; color: #353535; font-weight: 800; line-height: 140%; margin: 0 0 8px; text-align: center;}*/
.area-interna .pre-tarjeta { display: flex; justify-content: space-between; width: 100%; }
.area-interna .tarjeta-h a { min-height: auto }
.area-interna .tarjeta-h .cancelar { margin: 8px auto 0 auto;width:100% }
.area-interna .tarjeta-h .cancelar .btn{max-width:inherit}
.area-interna .listado-tarjetas{ max-width: 800px; width: 100%; margin: 0 auto; display: flex; flex-direction: column;}
.area-interna .tarjeta-h { width: 100%; }
.area-interna .volver-cierre .btn{margin: 0 auto}
.area-interna .info .item-resumen{ margin-bottom: 4px }
 .botones{margin-top:12px}
.area-interna .volver-cierre{text-align:center;margin-top:40px; order: 3;}
.area-interna .etiqueta-estado { background: rgb(150, 150, 150); color: #fff; padding: 2px 8px; border-radius: 4px; }
.area-interna .duracion-anade{color:#353535;margin-left:12px}

.solicitud-alta .formulario .legal{margin:12px 0}

/*cancelar reserva*/
.cancelar-reserva { max-width: 800px; margin: 0 auto; }
.cancelar-reserva .tarjeta:hover { transform: none; -webkit-transform: none; box-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.cancelar-reserva .cabecera-info { text-align: center;margin-bottom:20px }
.cancelar-reserva .formulario form { width: 100%; font-size: 16px }
.cancelar-reserva .formulario textarea { width: 100%; margin-left: 0; min-height: 80px; resize: vertical; margin-bottom: 0; border: 1px solid #333; border-top: 0; border-left: 0; border-right: 0;}
.cancelar-reserva .formulario .item{display: flex;  margin: 12px 0; align-items: center;flex-direction:column}
.cancelar-reserva .formulario .item .btn{width:100%}
.cancelar-reserva .formulario .item a.btn { margin-bottom:12px }
.cancelar-reserva .anotacion{margin-top:20px}


/*reserva cancelada*/
.cancelar-reserva .item { display: flex; justify-content: center; padding: 20px }
.reserva-cancelada .item.centrar a{margin: 0 auto}


/*selector fechas*/
#calendar { display: none }
.cajas { margin-top: 12px; }
.caja-invers { border: 1px solid #f1f1f1; padding: 12px }
.caja { background: #f1f1f1; padding: 12px }
.calendario { margin: 0 auto !important; min-height:140px }
.ui-datepicker-inline {width:100%!important}
.ui-widget {font-family: 'Nunito', sans-serif !important; color: #353535 !important; font-size: 16px !important; }
.bloque-hora .titulo1{text-align:center;}
.calendario,.bloque-hora {margin: 0 auto!important; max-width:600px!important; }
#selectedDay { text-align: center !important; padding: 20px 0 0 0 !important;}
#selectedDay:empty {padding: 0 !important; }
.ui-widget-header {border-top:none!important; border-left: none !important; border-right: none !important;background: transparent !important }
.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important; }
.ui-datepicker td span, .ui-datepicker td a {height: 36px !important; border-radius: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size:14px!important; position:relative;}
.ui-state-default, .ui-widget-content, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 0 !important; background: transparent !important; }
td.ui-datepicker-current-day{position:relative}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui
button.ui-state-active:hover { color: #fff !important; z-index: 2 }
.ui-datepicker-today{position:relative}
.ui-datepicker-today:before { position: absolute; height: 36px; width: 36px; background: none; top: 0; left: 0; content: ''; border-radius: 32px; right: 0; margin: auto; z-index: -1; border:1px solid #bdb6b6 }
a.ui-state-default.ui-state-active:before { position: absolute; height: 36px; width: 36px; background: #930A65; top: 0; left: 0; content: ''; border-radius: 32px; right: 0; margin: auto; z-index: -1; animation: pop .5s; -webkit-animation: pop .5s; }/*TODO: Adrián: Este color tendrá que cambiarlo el editor*/
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .3 !important; }
.ui-widget-header .ui-icon { background: url(../images/chevron-right-solid.svg)no-repeat !important;background-position:center }
.ui-widget-header .ui-datepicker-prev .ui-icon { transform: scaleX(-1); }
.ui-state-hover{background:transparent!important;border:0!important;top:2px!important;transition:200ms ease}

/*calendario movil*/
 #calendar_mobile .cabecera-calendario-movil { display: flex; justify-content: space-between; padding: 12px; border-bottom: 1px solid #aaaaaa; }
#calendar_mobile .prevWeek, #calendar_mobile .nextWeek { width: 16px; height: 16px; background: url(../images/chevron-right-solid.svg)no-repeat !important; background-position: center; }
#calendar_mobile .prevWeek { transform: scaleX(-1); }

#calendar_mobile .prevWeek.disabled,
#calendar_mobile .nextWeek.disabled { opacity: .4;}

.calendar_mobile,
#calendar_mobile .days { display: flex }
#calendar_mobile .days span {  width: 14.29%; height: 40px; display: inline-flex;justify-content:center;align-items:center; }
.calendar_mobile .day { width: 14.29%; text-align: center; height: 40px; display: flex; justify-content: center; align-items: center;position:relative }
.calendar_mobile .day.selected:before { position: absolute; height: 36px; width: 36px; background: #930A65; top: 0;bottom:0; left: 0; content: ''; border-radius: 32px; right: 0; margin: auto; z-index: -1; animation: pop .5s; -webkit-animation: pop .5s; }
.calendar_mobile .day.selected{color:#fff;position:relative;z-index: 1;}
.calendar_mobile .day.current:before { position: absolute; height: 36px; width: 36px; border: 1px solid #bdb6b6; top: 0; bottom: 0; left: 0; content: ''; border-radius: 32px; right: 0; margin: auto; z-index: -1;}
.calendar_mobile .day.invalid{opacity:.4}


/*selector de horario*/
.bloque-hora { font-size: 14px !important;min-height:140px }
#horarios { border: none !important; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-end; position:relative}
#horarios li { width: 25%;text-align: center; }
#horarios li span { padding: 8px; display: block; cursor: pointer; border: 1px solid #dde0e6;margin:4px }
#horarios li.selected span { background: #930A65; color: #fff; animation: pop-peq .5s; -webkit-animation: pop-peq .5s; border: 1px solid #930A65; }/*TODO: Adrián: Este color tendrá que cambiarlo el editor*/

#horarios li.hueco-titulo { width: 100%; text-align: center; margin-top:12px }
#horarios li:first-child{margin-top:0}
.fecha-hora .btn{max-width:200px;padding: 6px 14px;margin:20px auto 0 auto;font-size:16px;}
.fecha-hora .caja, .fecha-hora .caja-invers { padding: 12px }

.fecha-hora .bloque-hora .titulo1.ocultar{display:none}

/*Borrar precios vacíos*/
.pvp0 { display: none; }

/*confirmar reserva*/
.info-formulario { margin-top: 20px }
.login .formulario textarea { width: 100%; margin-left: 0; /*height: calc(100% - 40px); min-height: 120px;*/ resize: vertical; margin-bottom: 0; border: 1px solid #333; border-top: 0; border-left: 0; border-right: 0;min-height:40px; transition: .2s }
.confirm-reserva .login .formulario textarea:not(.filled):focus { min-height: 120px; }
.confirm-reserva .login .formulario textarea.filled { min-height: 120px; }
.login .formulario input.legal { border: 1px solid #333; width: 12px; height: 12px; }
.confirm-reserva .item > .flex{ align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #c3c3c3; cursor:pointer}
.confirm-reserva .precio{padding:8px 0;display:block}
.confirm-reserva .item > .flex:hover .modificar { transform: translateX(4px); -ms-transform: translateX(4px); -webkit-transform: translateX(4px); transition: .2s; -ms-transition: .2s; -webkit-transition: .2s; transition-timing-function: cubic-bezier(0.54, 0.08, 0.93, 0.6); -webkit-transition-timing-function: cubic-bezier(0.54, 0.08, 0.93, 0.6); }
.confirm-reserva .item > .flex:hover .modificar i{ transform: translateX(8px); -ms-transform: translateX(8px); -webkit-transform: translateX(8px); transition: .2s; -ms-transition: .2s; -webkit-transition: .2s; transition-timing-function: cubic-bezier(0.54, 0.08, 0.93, 0.6); -webkit-transition-timing-function: cubic-bezier(0.54, 0.08, 0.93, 0.6); }
.confirm-reserva .item:last-child > .flex { border-bottom: none; padding-bottom: 0 }
.confirm-reserva .info .item .titulo { margin-right:8px; }
.confirm-reserva .info .item .flex > .titulo3{ align-items: center;flex-shrink: 0;}
.confirm-reserva .cierre { padding: 12px; text-align: left; max-width: 800px;  }
.confirm-reserva .cierre div.titulo2{margin-bottom:4px}
.confirm-reserva .anotacion { width: 100%; display: flex; flex-direction: column; align-items: center;margin:12px 0;text-align:center }
.item-anotacion{padding:8px 0}
.confirm-reserva .login .formulario { padding: 0; }
.confirm-reserva .cajas .caja .dch.resumen { margin-left: 0;flex-grow:8 }
    .confirm-reserva .cajas .caja .izq { display: none }
.confirm-reserva .caja-opcional{width:100%}
.confirm-reserva .caja-opcional .hideShowPassword-wrapper { width: 100% }
.confirm-reserva .caja-opcional input{background-color:transparent}
.confirm-reserva .opcion { flex-flow: row wrap; position: relative; margin-bottom: 12px; margin-top: 48px; }
.confirm-reserva .opcion input.form-check-input[type="checkbox"] + span + label + .caja-opcional { display: none }
.confirm-reserva .opcion input.form-check-input[type="checkbox"]:checked + span + label + .caja-opcional { display: block; background: rgba(241, 241, 241, .4); padding: 16px 12px; }
.confirm-reserva .form-check-label.opcion .anim { width: 20px; height: 20px;top:-1px;left:0 }
.confirm-reserva .form-check-label.opcion .anim:before {position: absolute;margin:auto}
.confirm-reserva .form-check-label.opcion label[for="okpass"] { font-size: 14px; margin-bottom: 12px; }
.confirm-reserva .form-check-label.opcion input{margin-bottom: 12px;}
.confirm-reserva .form-check-label.opcion .caja-opcional .form-group { margin-top: 4px; }
.confirm-reserva .form-check-label.opcion .caja-opcional span { font-size: 14px; display: block; line-height: 16px;opacity:.8}
    .confirm-reserva .form-check-label.opcion .caja-opcional span:empty { display: none; }
    .confirm-reserva .form-check-label.opcion .caja-opcional span strong { font-size: 16px; margin-bottom: 4px; display: block }
.confirm-reserva input[type="email"] + span.field-validation-valid span.senal { font-size: 14px; font-weight: 700; padding-top: 12px; line-height: 16px; color: #DD2645; display: flex }
.confirm-reserva input[type="email"] + span.field-validation-valid span.senal.green { color: #558e13; }
.confirm-reserva input[type="email"] + span.field-validation-valid span.senal:before { content: '\f06a'; font-family: "Font Awesome 5 Pro"; font-weight: 800; margin-right: 4px }
.confirm-reserva input[type="email"] + span.field-validation-valid span a {color: #DD2645; font-weight: 800; border-bottom: 1px solid; text-decoration:none;display:inline-block}

.confirm-reserva input[type="email"] + span.field-validation-valid span .txt{margin-right:4px}
.confirm-reserva input[type="email"] + span.field-validation-valid span a:after { content: '\f2f6'; font-family: "Font Awesome 5 Pro"; font-weight: 800; padding-left: 4px; }
.confirm-reserva input[type="email"] + span.field-validation-error span a { color: #DD2645; font-weight: 800; border-bottom: 1px solid; text-decoration: none; display: inline-block;}
.confirm-reserva .field-validation-error { opacity: 0; animation: parpadeo 1s forwards; -webkit-animation: parpadeo 2s forwards }
@keyframes parpadeo{
    0%{opacity:0}
    20%{opacity:1}
    40% { opacity: 0 }
    60% { opacity: 1 }
    80% { opacity: 0 }
    100%{opacity:1}
}
.confirm-reserva input[type="email"] + span.field-validation-error span a:after { content: '\f2f6'; font-family: "Font Awesome 5 Pro"; font-weight: 800; padding-left: 4px; }

.confirm-reserva .form-check-label.opcion .caja-opcional .field-validation-error { padding-top: 0; margin-top: 0; font-weight: 700; display: flex; }
.confirm-reserva .login .formulario .item.email { align-items: flex-start; }

.login .formulario input:not(.btn) { color: #353535 }
.aclaracion{font-size:14px}
.aclarar{font-size:20px;}
.anotacion-confirm{margin-top:12px;margin-bottom:20px}
.pago-redirect { text-align: center; justify-content: center; display: flex; flex-direction: column; align-items: center; margin-top: 12px; font: 600 16px/120% 'Nunito', sans-serif; }
    .pago-redirect > p { color: #333; margin: 0 0 16px; }
.pago-opcional-salir { font: 600 16px/120% 'Nunito', sans-serif; color: #333; margin: -8px 0; text-align: center;}
    .pago-opcional-salir > span { margin: 0 0 4px; }    
.pago-opcional-salir > div{ margin: 0; }
    .pago-opcional-salir > .pago-opcional-botones { display: flex; align-items: center; justify-content: center; }
    .btn-lite { color: #333; display: inline-block; padding: 4px 12px; text-decoration: underline; }
.encajar { margin-bottom: 20px; text-align: center }
 input::placeholder, textarea::placeholder { font-style: italic; opacity: .6 }
/*.formulario input:not([name=legal]):required:valid { background-image: url(../images/check.svg); background-size: contain; background-position: right; background-repeat: no-repeat; }*/
.hideShowPassword-toggle {
    background-color: transparent;
    /* @alternate */
    background-image: url(../images/ojos-01.png);
    /* @alternate */
    background-image: url(../images/ojos.svg), none;
    background-position: 0 center;
    background-repeat: no-repeat;
    border: 2px solid transparent;
    border-radius: 0.25em;
    cursor: pointer;
    font-size: 100%;
    height: 44px;
    margin: 0;
    max-height: 100%;
    padding: 0;
    overflow: hidden;
    text-indent: -999em;
    width: 46px;
    -moz-appearance: none;
    -webkit-appearance: none;
    opacity: .5
}
.hideShowPassword-toggle-hide { background-position: -44px center; }
.hideShowPassword-toggle, .my-toggle { z-index: 3; }
.confirm-reserva .formulario input[placeholder=Contraseña]:required:valid { background-position-x: calc(100% - 44px); }
.hideShowPassword-toggle:hover, .hideShowPassword-toggle:focus {  outline: transparent; }
.registro-hecho{width:100%}
    .registro-hecho .btn { height: auto; border-bottom: 1px solid; border-radius: 0; padding:0;margin: 0 14px; }
.registro-hecho .btn:hover { box-shadow:none }
.registro-hecho .flex-row{align-items:center;justify-content:center}
input:-internal-autofill-selected { background-color: transparent !important }
.confirm-reserva .eror{text-align:center;align-items:center;justify-content:center;height:100%}
.confirm-reserva .eror i{margin-bottom:20px;font-size:20px}
.confirm-reserva .formulario-fin .login .formulario .anotacion{margin-bottom:8px;}
.confirm-reserva .formulario-fin .login .formulario .item-anotacion { padding-top:0}
.confirm-reserva .formulario-fin .login .formulario .cont-modo-pago { text-align: center; width: 100%;}
.confirm-reserva .formulario-fin .login .formulario .cont-modo-pago .rb-modo-pago { display: inline-block; margin: 0 8px 8px; display: flex; align-items: center; }
    .confirm-reserva .formulario-fin .login .formulario .cont-modo-pago label { margin-left: 6px; align-items: flex-start; }
.confirm-reserva .formulario-fin .login .formulario .cont-modo-pago label i { margin-right: 4px; width:18px;text-align:center}
        .confirm-reserva .formulario-fin .login .formulario .cont-modo-pago label > span:not(.anim) { text-align: left; }
        .confirm-reserva .formulario-fin .login .formulario .cont-modo-pago label a { text-decoration: underline; }
    .confirm-reserva .formulario-fin .login .formulario .cont-modo-pago .btn { margin: 12px auto; }
.confirm-reserva .cont-modo-pago .select-pago { background: rgba(241, 241, 241, .4); text-align: left; padding: 16px 12px; margin-bottom: 20px; color: #353535; }
    .confirm-reserva .cont-modo-pago .select-pago > div:first-child{ font-weight: bold; margin-bottom: 8px;}
    .confirm-reserva .cont-modo-pago .select-pago .aclaracion { line-height: 120%; padding: 0 0 0 8px;}
        .confirm-reserva .cont-modo-pago .select-pago .aclaracion > p:not(.color1){ color: #999; }
        .confirm-reserva .cont-modo-pago .select-pago .aclaracion strong { display: block; margin-bottom: 4px; font-size: 16px; }
        .confirm-reserva .cont-modo-pago .select-pago .aclaracion .aclaracion-total { font-size: 16px; font-weight: bold; }
.confirm-reserva .cont-modo-pago .select-pago .rb-modo-pago input { border: 1px solid #000; width: 16px; height: 16px; margin: 0 4px 0 0; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border-radius: 16px;}
.input-pago{z-index:1}
.input-pago + span.anim { position: absolute; height: 16px; width: 16px; z-index: 0; }

.input-pago[type="radio"]:checked + span.anim:before {
    content: '';
    height: 10px;
    width: 10px;
    background: #000;
    top: 0;
    left: 0;
    border-radius: 10px;
    position: absolute;
    margin: 3px;
}

/*reserva confirmada*/
/*TODO: Adrián: Esos 50px que se le restan tienen que ser en realidad la altura del header*/
.reserva-confirmada { /*height: calc(100vh - 50px);*/ justify-content: center }
.reserva-confirmada .spot { text-align: center;margin:0 auto; animation: pop .8s; -webkit-animation: pop .8s; }
.reserva-confirmada .spot i{margin-bottom:8px}
.reserva-confirmada .spot .titulo1{font-size:24px;}
.reserva-confirmada .caja { margin: 0 auto; text-align: left; width: 100%; max-width: 600px; }
.reserva-confirmada .caja-invers { border: none; margin: 0 auto; padding-top: 20px; width: 100%; max-width: 600px; }
.reserva-confirmada .caja-invers .flex-col{text-align:center;margin-bottom:12px;line-height:120%;margin-top:12px}
.reserva-confirmada .caja-invers .flex{justify-content:center;flex-direction:column;align-items:center}
.reserva-confirmada .caja-invers .btn{font-size:16px;}
.reserva-confirmada .caja-invers .btn:first-child{margin:0 12px 6px 12px}
.reserva-confirmada .caja-invers .btn:last-child { margin: 6px 12px 0 12px }
.reserva-confirmada .caja-invers .btn.sinBorde { padding: 6px 14px }
.reserva-confirmada .caja-invers .btn.conBorde{padding: 4px 14px;}
.reserva-confirmada .resumen{width:100%}
.reserva-confirmada .item  { align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #c3c3c3; width:100% }
.reserva-confirmada .item:last-child { border-bottom:none;padding-bottom:0 }
    .reserva-confirmada .item .precio-pagado { display: block; color: #333; font-size: 1rem;}

/*aviso error*/ 
.field-validation-error,
.field-validation-warning { font-size: 14px; font-weight: 700; color: #DD2645; line-height: 110%; display: flex; margin: 8px 0 12px 0 }
.field-validation-warning { color: #dd6b18; }
.field-validation-error:before,
.field-validation-warning:before {content:'\f06a';font-family: "Font Awesome 5 Pro";margin-right:4px}
.field-validation-warning:before { content: '\f05a'; }
.formulario-fin .error{text-align:center;height:100%;display:flex;flex-direction:column;justify-content:center;}

/*recuperar-pass*/
.recuperar-pass p{text-align:center}
.recuperar-pass .btn{margin-top:20px}
.recup-contra .titulo1{margin-bottom:12px}
.recup-contra .texto.anotacion{max-width:600px}
.recup-contra .item { margin-top: 12px }

/*inactivo*/
.loguear.inactivo { text-align: center }
.loguear.inactivo .login {
    background: #fff3cd;
    padding: 20px;
    border-radius: 8px;
}
.inactivo .cierre{margin-top:12px; background: #fff; border-radius: 4px;}
.inactivo .cierre .titulo2{margin-bottom:12px}

.escritorio.inactivo {}
.escritorio.inactivo > .may,
.escritorio.inactivo > .titulo1 {
    display: none;
}

.escritorio.inactivo .tarjeta .cierre-info .btn {
    text-decoration: line-through;
    filter: grayscale(1);
    opacity: 0.5
}
.escritorio.inactivo .tarjeta {
    cursor: not-allowed;
}

/*infoabout*/
.infoabout { margin:32px;}
.infoabout span { margin:8px; }

/*footer*/
footer { border-top: 1px solid #eee; padding: 12px 8px;text-align:center; margin: auto 0 0;}
footer .content-footer.flex { flex-direction: column; align-items: center; }
footer .flex > div:last-child { flex-shrink: 0; }
    footer .flex > div:last-child a { display: block; color: #000; font: normal 12px/16px Arial; text-transform: uppercase; opacity: 0.3; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)); }
    footer .flex > div:last-child a { margin: 20px auto 0;}
        footer .flex > div:last-child a span { flex-shrink: 0; }
footer img.logo-paxinas { height: 24px; width: auto; margin-left: 4px }
footer .item-footer { padding: 4px 8px;display:inline-block; line-height: 140%; }

/*Legal*/
.legal .titulo1 { margin-bottom: 20px; font-size: 24px; }


@keyframes up { from { transform: translateY(-100%) }to { transform: translateY(0) }    }
    @-webkit-keyframes up {from { transform: translateY(-100%) }to { transform: translateY(0) }    }

    @keyframes pop {0% { transform: scale(0) }40% { transform:scale(1.1)}100% { transform: scale(1) }    }
    @-webkit-keyframes pop {0% { transform: scale(0) }  40% { transform: scale(1.1) }100% { transform: scale(1); }    }

    @keyframes pop-peq {0% { transform: scale(0) }40% { transform: scale(1.05) }100% { transform: scale(1) }    }
    @-webkit-keyframes pop-peq {0% { transform: scale(0) } 40% { transform: scale(1.05) }100% { transform: scale(1); }    }

    @media screen and (min-width: 420px) {

        /*tarjetas*/
        .tarjeta .cierre-info .pvp { margin-bottom: 0 }
        .tarjeta .cierre-info .btn { width: auto; padding: 4px 16px; margin: 0 0 0 auto;}
        .tarjeta-v .img { height: 160px; }

        /*empleado*/
        .tarjeta .btn-sin-preferencias .btn { width: auto; }

        /*fecha y hora*/
        .caja, .caja-invers { padding: 20px !important; }
        #horarios li { width: 20%; }
        #horarios li.hueco-titulo { margin-top: 20px }

        /*area interna, cancelar reserva*/
        .area-interna .tarjeta-h .cancelar .btn { max-width: 200px; margin: 0 auto; }

        .servicios_filtro > div{  max-width: 360px; }
    }

    @media screen and (min-width: 768px) {
        /*textos*/
        .titulo1{font-size:20px}
        .titulo2{font-size:18px}
        .titulo3{font-size:14px}
        .titulo4 { font-size: 16px }
        /*header*/
        header {
            padding: 12px 20px;
        }
        header .logo img { max-width: 200px }
        header .telefono .numero{display:inline-block;margin-right:20px}
        header .dch .telefono i{margin:12px 12px 12px 20px}
        header .tooltip.usuario .titulo2 { max-width: 120px; }

        /*escritorio*/
        .escritorio { padding: 40px }
        /*.container.body-content > string > div { padding: 40px; }*/

        /*botones*/
        .btn.conBorde { padding: 4px 16px; }
        .btn.sinBorde { padding: 6px 18px }

        /*tarjetas*/
        .tarjeta { margin-top: 20px }
        .tarjeta .info { padding: 12px }
        .tarjeta .img .duracion { position: absolute; bottom: 8px; right: 8px; padding: 4px 16px; }
        .texto-info { margin-bottom: 20px }
        .tarjeta-v .img { height: 180px; }

        .tarjeta-h { width: calc(50% - 10px) }

        /*comunes*/
        .w50 { width: calc(50% - 20px); }
        .w50SinMrg{width:50%}

        /*servicios*/
        .listado-servicios { padding: 0 0 20px 0 }
        .listado-servicios { grid-template-columns: 1fr 1fr 1fr; grid-gap: 16px; }
        

        /*empleados*/
        .listado-empleados { padding: 0px 0 0 0; }
        .sin-preferencia .btn { padding: 4px 16px; margin-right: 12px }
        .sin-preferencia { margin: 20px 0 0 0;width:100%}
        .sin-preferencia a{padding:12px}

        /*confirmación reserva*/
        .confirm-reserva .titulo-opcional { font-size: 14px;order:2 }
        .confirm-reserva .titulo-opcional:after { content: ''; width: 20px; height: 20px; background: #fff; border-top: 1px solid #f1f1f1; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0 auto -10px; transform: rotate(-45deg); border-left: 1px solid #f1f1f1; }

        /*area interna*/
        .area-interna .formulario{display:flex}
        #modificar { width: 200px; margin-right: 20px }
        #lista-reservas { width: 200px }
        .cancelar-reserva .info .item-resumen { margin-bottom: 8px }
        .cancelar-reserva .info .item-resumen:last-child { margin-bottom: 0 }
        .botones{display:flex; justify-content:center;margin-top:20px;}
        .botones .item { width: 200px }
        .botones .item:first-child{margin-right:20px}
        .area-interna .tarjeta-item.out:nth-child(2):before {font-size: 20px;}

        /*fecha y hora*/
        .cajas { margin-top: 20px;min-height:420px }
       
        #calendar { display: block }
        #calendar_mobile{display:none}
        .fecha-hora .bloque-hora .titulo1.ocultar { display: block;margin-bottom:20px }

        /*reserva confirmada*/
        .reserva-confirmada .caja-invers .flex { flex-direction: row;align-items:center }
        .reserva-confirmada .caja-invers .btn, .reserva-confirmada .caja-invers .btn:first-child, .reserva-confirmada .caja-invers .btn:last-child { margin: 20px 10px 20px }
        .reserva-confirmada .caja-invers .flex-col {  margin-bottom: 0 }
        /*area interna, cancelar reserva*/
        .area-interna .tarjeta-h .cancelar { position: absolute; bottom: 8px; right: 8px }
        .area-interna .tarjeta-h .cancelar .btn {  position: absolute; bottom: 0px; right: 0px; }
        .cancelar-reserva .formulario .item { flex-direction: row }
        .cancelar-reserva .formulario .item a.btn { margin-bottom: 0;margin-right:20px }

        /*menu-inf*/
        .menu-inf { padding: 12px 12px 0 12px; }
        .menu-inf .encabezado { font-size: 16px; border-bottom: 2px dotted;margin-left:20px }
        .menu-inf .item{padding:12px 0;margin:0 20px}

        .servicios_filtro .servicios_filtro-eliminar { margin: 0 0 0 12px; }

        .swiper-cats.swiper-container { width: calc(100% + 20px); }
        .swiper-cats.swiper-container > .swiper-scrollbar { width: calc(100% - 20px); }
        .listado-categorias .categoria {padding: 16px 50px 16px 16px;}
        .listado-categorias .categoria:after { right: 16px;  }
            .listado-categorias .categoria .categoria-image { width: 120px; height: 120px; margin-right: 16px;}
    }
    @media screen and (min-width: 1024px) {
        /*header*/
        header .tooltip.usuario .titulo2 { max-width: 180px; }

        /*servicios*/
        .listado-servicios { grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; }

        /*resumen reserva*/
        .confirm-reserva .cajas .caja .dch.resumen { flex-grow: 8; margin-left: 12px }
        .confirm-reserva .cajas .caja .izq { position: relative; width: 30%; min-width: 120px;display:block; margin-top:12px}
        .confirm-reserva .cajas .caja .izq .img { width: 100%; height: 120px; border-radius: 8px }
        .confirm-reserva .cajas .caja .izq .img.empleado { width: 60px; height: 60px; border-radius: 60px; position: absolute; top: 90px; right: 8%; border: 2px solid #f1f1f1 }

        /*fecha y hora*/
        .caja, .caja-invers { padding: 40px !important; }

        /*footer*/
        footer { padding: 20px; text-align: left; }
            footer .content-footer.flex { flex-direction: row; justify-content: space-between; }
            footer .flex > div:last-child a { margin-top: 0px; }
            .servicios_filtro { display: flex; align-items: center; }
    }