@media print {
    a[href]:after {
        content: none !important;
    }
}

/* ESTILOS GENERALES */

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 10px;
}

label {
    font-weight: normal !important;
}

.radio label.iv::before {
    display: none !important;
}

.seccion-entidad input[type='text'],
.seccion-entidad input[type='password'],
.seccion-entidad input[type='email'],
.seccion-entidad select,
.seccion-entidad textarea,
.modal-entidad input[type='text'],
.modal-entidad input[type='password'],
.modal-entidad input[type='email'],
.modal-entidad select,
.modal-entidad textarea {
    height: auto;
    padding: 7px;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
}

.seccion-principal.new {
    border: none !important;
}

.div-sin-marco {
    height: 180px !important;
    width: 100%;
    padding-top: 0 !important;
    position: relative;
}

.truncate-multiline {
    min-height: 52px;
}

#lista-idiomas li,
#lista-idiomas-descripcion li {
    border: 1px solid #f2f2f2;
    border-radius: 5px 5px 0px 0px;
}

#lista-idiomas li.active,
#lista-idiomas-descripcion li.active {
    border: 2px solid #f2f2f2;
    border-radius: 5px 5px 0px 0px;
    font-weight: bold;
}

.v-middle {
    vertical-align: middle;
}

.negrita {
    font-weight: bold;
}

.content-img {
    margin: 0px auto;
    text-align: center;
}

.content-img img {
    vertical-align: middle;
}

@media (min-width:992px) {
    .col-5-md {
        width: 20% !important;
    }
}

@media (min-width:992px) {
    .col-7-md {
        width: 14.2% !important;
    }
}


.relative {
    position: relative !important;
}

.m-t-0 {
    margin-top: 0 !important;
}

.m-t-1 {
    margin-top: 1px !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-6 {
    margin-top: 6px !important;
}

.m-t-5-inverse {
    margin-top: -5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-10-inverse {
    margin-top: -10px !important;
}

.m-t-15-inverse {
    margin-top: -15px !important;
}

.m-t-20-inverse {
    margin-top: -20px !important;
}

.m-t-30 {
    margin-top: 30px !important;
}

.m-t-30-inverse {
    margin-top: -30px !important;
}

.m-t-34-inverse {
    margin-top: -34px !important;
}

.m-t-40-inverse {
    margin-top: -40px !important;
}

.m-t-70-inverse {
    margin-top: -70px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-t-30 {
    margin-top: 30px !important;
}

.m-t-40 {
    margin-top: 40px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

@media (max-width:767px) {
    .m-t-50-xs {
        margin-top: 50px;
    }
}

.m-t-60 {
    margin-top: 60px !important;
}

.m-l-0 {
    margin-left: 0 !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-l-40 {
    margin-left: 40px !important;
}

.m-l-50 {
    margin-left: 50px !important;
}

.m-l-inverse-15 {
    margin-left: -15px !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-b-40 {
    margin-bottom: 40px !important;
}

.m-b-50 {
    margin-bottom: 50px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-r-15 {
    margin-right: 15px !important;
}

.m-r-20 {
    margin-right: 20px !important;
}

.m-r-30 {
    margin-right: 30px !important;
}

.m-r-40 {
    margin-right: 40px !important;
}

.m-r-50 {
    margin-right: 50px !important;
}

.p-5 {
    padding: 5px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-0 {
    padding: 0 !important;
}

.p-l-30 {
    padding-left: 30px !important;
}

.p-b-50 {
    padding-bottom: 50px;
}

@media (max-width:767px) {
    .p-b-50-xs {
        padding-bottom: 50px;
    }
}


.p-r-30 {
    padding-right: 30px !important;
}

.p-absolute {
    position: absolute;
}

.p-relative {
    position: relative !important;
}

/* POP-UPS */

.modal-entidad .close,
.seccion-entidad .close {
    float: right;
    font-size: 26px !important;
    font-weight: normal;
    line-height: 1.428571429;
    color: #fff;
    text-shadow: none;
    opacity: 1;
    margin-top: -10px;
}

.modal-entidad .seccion-principal .seccion-titulo {
    border-bottom: none !important;
}

.modal-entidad .seccion-principal h1 {
    text-transform: none !important;
}

.modal-entidad .new-form-control {
    font-size: 14px !important;
    margin: 5px 0 !important;
    padding: 5px 0 2px 0;
    color: #333333;
    font-weight: normal !important;
}

.modal-entidad .new-form-control.titulo {
    margin-top: 15px;
}

/* GESTOR */

.bg-color-gris-claro {
    background-color: #F7F7F7;
}

.fondo-gris-medium {
    background-color: #EFEFEF;
}

.btn-close-modal {
    color: black !important;
    font-size: 20px !important;
    border: 1px solid #e7e7e7 !important;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
}

.separador-papelera {
    padding-top: 11px;
    padding-bottom: 11px;
    margin: 0;
}

.btn-gestor {
    padding: 10px 5px;
    color: #fff !important;
    font-size: 20px !important;
}

/* MAQUETACIÓN SECCIONES */

/*div[class^="col-"]:first-child {
    padding-left: 0;
}

div[class^="col-"]:last-child {
    padding-right: 0;
}*/

.acciones span {
    margin-top: 0 !important;
    opacity: 1 !important;
}

.acciones .comentarios,
.acciones .megusta,
.acciones .miembros,
.acciones .unirme {
    opacity: 1 !important;
}

.megusta:hover {
    opacity: 0.5 !important;
}

.miembros:hover {
    opacity: 0.5 !important;
}

.text-num-comentarios {
    margin-top: 2px !important;
}

.ico-like-megusta {
    margin-top: 2px !important;
}

.texto-megusta {
    margin-top: 2px !important;
}

.seccion-caja-galerias {
    margin: 5px;
}

.seccion-caja-galerias img {
    max-height: 260px;
    width: auto;
    max-width: 100%;
    /*overflow: hidden;
        z-index: 98;
        object-fit: cover;*/
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
}

.seccion-caja {
    margin: 5px;
    border-radius: 5px !important;
}

.seccion-caja img {
    height: 361px;
    width: 100%;
    overflow: hidden;
    z-index: 98;
    object-fit: cover;
}

.seccion-caja.equipos img {
    height: 150px;
    width: 100%;
    overflow: hidden;
    z-index: 98;
    object-fit: contain;
}

.seccion-caja iframe,
.seccion-caja .cajadevideo {
    height: 290px !important;
}

.seccion-caja-galerias iframe,
.seccion-caja-galerias .cajadevideo {
    height: 361px !important;
}

.seccion-caja.galerias img {
    /*height: 260px !important;*/
}

.seccion-caja.galerias iframe {
    height: 254px !important;
}

.seccion-caja-galerias.galerias iframe {
    height: 254px !important;
}
.seccion-caja.borde {
    border: 1px solid #EEEEEE;
    min-height: 355px !important;
}


.seccion-caja-galerias.borde {
    border: 1px solid #EEEEEE;
}

.seccion-caja .titulo {
    font-size: 21px;
    font-weight: bold;
    margin: 10px 0px;
    height: 60px;
    overflow: hidden;
}

.seccion-caja-galerias .titulo {
    font-size: 21px;
    font-weight: bold;
    margin: 10px 0px;
    height: 60px;
    overflow: hidden;
}

.seccion-caja .titulo.sub {
    font-size: 16px;
}

.seccion-caja-galerias .titulo.sub {
    font-size: 16px;
}

.seccion-caja .descripcion {
    font-size: 16px;
    opacity: 1;
    letter-spacing: 0px;
    margin-bottom: 10px;
    height: 65px;
    overflow: hidden;
}

.seccion-caja-galerias .descripcion {
    font-size: 16px;
    opacity: 1;
    letter-spacing: 0px;
    margin-bottom: 10px;
    height: 100px;
    overflow: hidden;
}

.seccion-caja .descripcion.sub {
    font-size: 12px;
}

.seccion-caja-galerias .descripcion.sub {
    font-size: 12px;
}

.seccion-caja .descripcion.corto {
    height: 50px;
}

.seccion-caja-galerias .descripcion.corto {
    height: 50px;
}

.seccion-caja .descripcion.corto.sub {
    height: 30px;
}

.seccion-caja-galerias .descripcion.corto.sub {
    height: 30px;
}

.seccion-caja .fecha {
    font-size: 14px;
    letter-spacing: 0px;
    opacity: 1;
    font-weight: bold;
}

.seccion-caja-galerias .fecha {
    font-size: 14px;
    letter-spacing: 0px;
    opacity: 1;
    font-weight: bold;
}

.seccion-caja .precio-caja {
    font-size: 15px;
}

.seccion-caja-galerias .precio-caja {
    font-size: 15px;
}

.seccion-caja .tag {
    position: absolute;
    top: 10px;
    right: 0;
}

.seccion-caja-galerias .tag {
    position: absolute;
    top: 10px;
    right: 0;
}

.seccion-caja .tag .option {
    background-color: #fff;
    padding: 5px 15px;
    margin-bottom: 10px;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px 0 0 10px;
    border-right: none;
    font-size: 16px;
}

.seccion-caja-galerias .tag .option {
    background-color: #fff;
    padding: 5px 15px;
    margin-bottom: 10px;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px 0 0 10px;
    border-right: none;
    font-size: 16px;
}

.seccion-caja-grupo img {
    height: 145px !important;
}

.seccion-caja .titulo-grupo {
    font-size: 14px;
    margin-bottom: 0;
}

.seccion-caja .descripcion-grupo {
    font-size: 12px;
}

.seccion-caja .miembros-grupos {
    margin-top: 5px;
    height: 75px;
}

.fecha-info-evento {
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 7px;
    left: 7px;
    border-radius: 12%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
    z-index: 0;
}

.fecha-info-evento-completa {
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 7px;
    left: 7px;
    border-radius: 12%;
    padding-left: 0;
    padding-right: 18px;
    padding-top: 5px;
    padding-bottom: 0;
    height: 52px;
    z-index: 0;
}

.texto-dia-fecha-evento {
    color: #000 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.texto-mes-fecha-evento {
    color: #363636 !important;
    font-weight: 700;
    font-size: 12px !important;
    margin-top: -17px !important;
    margin-left: 1px !important;
}

.separador-fechas {
    font-size: 40px;
    margin-top: -7px;
}

@media (max-width: 992px) {
    .seccion-caja .titulo {
        height: auto;
        overflow: auto;
    }

    .seccion-caja-galerias .titulo {
        height: auto;
        overflow: auto;
    }

    .seccion-caja .descripcion {
        height: auto;
        overflow: auto;
    }

    .seccion-caja-galerias .descripcion {
        height: auto;
        overflow: auto;
    }
}

/* GALERÍAS */
.big .anterior-siguiente .fa-arrow-left {
    left: 2% !important;
    font-size: 16px !important;
    padding: 7px 7px !important;
}

.big .anterior-siguiente .fa-arrow-right {
    right: 2% !important;
    font-size: 16px !important;
    padding: 7px 9px !important;
}

.contenido .slider_galeria .small {
    padding-left: 8px !important;
}

.contenido .slider_galeria .small ul li {
    height: 85px !important;
}

.contenido .slider_galeria .big .big-img-wrapper,
.contenido .slider_galeria .small .fondo-blanco {
    border-radius: 5px !important;
}

/* COMENTARIOS */
.hilo-comentarios {
    border: 1px solid #f2f2f2;
    padding: 25px !important;
}

.hilo-comentarios h1 {
    font-size: 22px !important;
}

.hilo-comentarios h2 {
    font-size: 18px !important;
}

/* LISTAS DRAG AND DROP */

.facet-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    min-height: 1.5em;
    font-size: 10px;
    height: 150px;
    overflow-y: auto;
}

.facet-list li {
    margin-bottom: 1px;
    padding: 1px 3px;
    font-size: 1.2em;
    border-radius: 2px;
}

.facet-list li.placeholder {
    height: 1.2em;
}

.facet {
    border: 1px solid #bbb;
    background-color: #fafafa;
    cursor: move;
}

.facet.ui-sortable-helper {
    opacity: 0.5;
}

.placeholder {
    border: none;
    background-color: #fffffd;
}

/* MENU IB */
#ib-header.mobile-navigation .ib-mobile-nav .ib-navmenu .background .user-menu * {
    background: transparent;
}

/*
    GESTOR
*/

.f-size-12 {
    font-size: 12px !important;
}

.f-size-14 {
    font-size: 14px !important;
}

.f-size-16 {
    font-size: 16px !important;
}

.f-size-17 {
    font-size: 17px !important;
}

.f-size-18 {
    font-size: 18px !important;
}

.f-size-20 {
    font-size: 20px !important;
}

.f-size-22 {
    font-size: 22px !important;
}

@media (max-width:991px) {
    .alpha-sm {
        padding-left: 0 !important;
    }

    .omega-sm {
        padding-right: 0 !important;
    }
}

@media (min-width:768px) {

    .img-slider {
        min-height: 92px;
    }
}

@media (max-width:767px) {
    .alpha-xs {
        padding-left: 0 !important;
    }

    .omega-xs {
        padding-right: 0 !important;
    }

    .box-slider {
        height: auto !important;
    }

    .img-slider {
        min-height: 100px;
    }
}

.border-slider {
    padding-top: 15px;
    padding-bottom: 15px;
    border-right: 3px solid #E8E8EC;
    border-bottom: 3px solid #E8E8EC;
    border-top: 1px solid #E8E8EC;
    border-left: 1px solid #E8E8EC;
    margin: 0;
}

.box-slider {
    overflow: hidden;
    height: 150px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.input-text-slider {
    height: 30px !important;
    border: 2px solid #C1C1C1 !important;
}

.textarea-slider {
    border: 2px solid #C1C1C1 !important;
}

.ico-arrow {
    font-size: 30px;
}

.close-modal-slider {
    color: #9B9B9B !important;
    font-size: 35px !important;
}

.btn-gestor-slider {
    padding-left: 50px !important;
    padding-right: 50px !important;
}

.btn-guardar-cambios-slider {
    border-bottom: 3px solid #E8E8EC;
    padding-bottom: 20px;
}

.mensaje-validacion {
    background-color: #F2DEDE !important;
    color: #a94442 !important;
    margin-top: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.mensaje-validacion-newslider {
    background-color: #F2DEDE !important;
    color: #a94442 !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

.preloader {
    width: 70px;
    height: 70px;
    border: 10px solid #eee;
    border-top: 10px solid #666;
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.element-preloader {
    height: 158px;
    margin-top: 100px;
}

.imgGaleria {
    height: 260px !important;
}

.fieldset-gestor {
    /* padding: 8px; */
    margin: 0 !important;
    /* border: 1px solid; */
    min-width: 0 !important;
    padding-left: 15px !important;
    /* padding-right: 100%; */
    /* width: 100%; */
    border: 1px solid #c0c0c0 !important;
    margin: 0 2px !important;
    padding: 0.35em 0.625em 0.75em !important;
}

.legend-gestor {
    width: auto !important;
    padding: 5px !important;
    border: none !important;
    margin-bottom: 5px !important;
}

.title-entidad {
    font-size: 28px !important;
}

@media(max-width:991px) {
    .alpha-xs {
        padding-left: 15px;
    }

    .omega-xs {
        padding-right: 15px;
    }
}

@media(max-width:991px) {
    .height-xs {
        margin-top: 10px;
    }
}

/* MOBILE */

.slick-track {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

button.navbar-toggle {
    margin-top: -5px !important;
}

.mobile {
    font-size: 14px !important;
}

.mobile .py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.mobile .pt-10 {
    padding-top: 10px;
}

.mobile .pb-10 {
    padding-bottom: 10px;
}

.mobile select {
    border: none !important;
    border-radius: 0 !important;
}

.mobile .seccion-principal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.mobile .seccion-principal h3 {
    display: inline-block;
    font-weight: bold;
}

.mobile .btn-default-xl.botonCrear .fa-plus {
    display: block;
}

.mobile .line-bottom {
    border-bottom: 1px solid #f4f4f4;
}

.mobile .fa-plus,
.mobile .fa-minus {
    background-color: transparent;
    margin-right: 0 !important;
    padding: 0 5px;
    font-size: 14px;
    font-weight: bold;
}

.mobile .fa-plus,
.mobile .fa-minus,
.mobile .fa-pencil,
.mobile .fa-download {
    padding: 0 !important;
    border-radius: 5px;
    margin-right: 0;
}

.mobile .titulo {
    font-size: 16px;
    margin-bottom: 5px;
}

.mobile .action-user a:hover {
    text-decoration: none !important;
}

.mobile .action-user .fa,
.mobile .action-user .far,
.mobile .action-user .fas,
.mobile .action-user .fal {
    font-size: 20px !important;
}

.mobile .action-user .text-num {
    font-size: 10px !important;
}

.mobile .caja-titulo {
    position: absolute;
    left: 10px;
    background: #fff;
    bottom: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px;
    opacity: 0.9;
    width: 90%;
    margin-left: 10px;
}

.mobile .caja-titulo-webinar {
    position: absolute;
    left: 10px;
    background: #fff;
    bottom: -10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px;
    opacity: 0.9;
    width: 90%;
    margin-left: 10px;
}

.mobile .caja-titulo-widget-generico {
    position: absolute;
    left: 25px;
    background: #fff;
    bottom: 10%;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px;
    opacity: 0.9;
    width: 90%;
    z-index: 999999999999999999999;
}

.mobile .fecha-info-evento {
    height: auto !important;
    padding: 10px !important;
    line-height: 17px;
    box-shadow: 2px 2px 5px 0px;
    top: 15px;
    left: 20px;
}

.mobile .fecha-info-evento p {
    margin: 0 !important;
}

.mobile .seccion-caja {
    margin: 0 !important;
}

.mobile .botonera {
    position: absolute;
    height: auto !important;
    top: 10px;
    right: 20px;
}

.mobile .botonera .btn-primary,
.mobile .botonera .btn-default {
    box-shadow: 2px 2px 5px 0px;
}

.mobile .slick-dots {
    margin-left: -15px !important;
}

.mobile .descripcion,
.mobile .descripcion span {
    font-size: 12px !important;
}

.mobile .descripcion p {
    margin-top: 5px !important;
}

.mobile .descripcion img {
    max-width: 100% !important;
    height: auto !important;
}

.mobile .hilo-comentarios {
    padding: 15px !important;
    border: none !important;
    margin-top: 10px;
}

.mobile .hilo-comentarios .comentario-padre {
    padding-top: 10px !important;
    font-size: 12px !important;
}

.mobile .hilo-comentarios .fa {
    font-size: 14px !important;
}

.mobile .hilo-comentarios .bocadillo {
    padding-top: 10px;
    padding-bottom: 10px;
}

.mobile .hilo-comentarios .compartir {
    margin-top: -10px;
    margin-bottom: 10px;
}

.mobile .creator {
    margin-top: 0px;
}

.mobile .ver-mas {
    margin-top: 10px !important;
}

.mobile .botonEventos {
    width: auto !important;
}

.mobile .botonEventos.publicado {
    color: #ffffff !important;
    background-color: #5cb85c !important;
    border-color: #4cae4c !important;
}

.mobile .botonEventos.publicado .fa-check {
    color: #fff !important;
    margin-right: 0 !important;
}

.mobile .botonEventos.borrador {
    color: #ffffff !important;
    background-color: #f0ad4e !important;
    border-color: #eea236 !important;
}

/* corrige error en summernote al seleccionar abrir link en nueva pestaña */

.sn-checkbox-open-in-new-window label::before {
    display: none !important;
}

.sn-checkbox-use-protocol label::before {
    display: none !important;
}

.sn-checkbox-open-in-new-window input {
    opacity: 1 !important;
    margin-top: 4px !important;
}

.sn-checkbox-use-protocol input {
    opacity: 1 !important;
    margin-top: 4px !important;
}

/* end corrección summernote */


/* radio-button conflicto con ib */

.radio input[type="radio"]:checked+label::after {
    /* -webkit-transform: scale(1, 1); */
    transform: none !important;
}

.radio input[type="radio"] {
    opacity: 1 !important;
}

.radio label::after {
    content: none !important;
}

/**/



/* WEBINARS */




@media(min-width:768px) {

    .lockedVideo {
        height: 132px !important;
        object-fit: cover !important;
    }

    .lockedVideoContenidos {
        height: 420px !important;
        object-fit: cover !important;
    }

    .seccion-webinar iframe,
    .seccion-webinar .cajadevideo {
        height: 132px !important;
    }

    .caja-descripcion-webinar {
        height: 125px;
    }

    .ico-editar-webinar {
        right: 22%;
    }

    .ico-participacion-webinar {
        right: 29%;
    }
}

@media(min-width:992px) {

    .lockedVideo {
        height: 173px !important;
        object-fit: cover !important;
    }

    .lockedVideoContenidos {
        height: 223px !important;
        object-fit: cover !important;
    }

    .seccion-webinar iframe,
    .seccion-webinar .cajadevideo {
        height: 173px !important;
    }

    .caja-descripcion-webinar {
        height: 120px;
    }

    .ico-participacion-webinar {
        right: 22%;
    }
}

@media(min-width:1200px) {

    .lockedVideo {
        height: 214px !important;
        object-fit: cover !important;
    }

    .lockedVideoContenidos {
        height: 323px !important;
        object-fit: cover !important;
    }

    .seccion-webinar iframe,
    .seccion-webinar .cajadevideo {
        height: 214px !important;
    }

    .caja-descripcion-webinar {
        height: 100px;
    }

    .ico-participacion-webinar {
        right: 21%;
    }
}

.ico-participacion-webinar {
    position: absolute;
    width: 45px;
    z-index: 99;
    top: 5%;
    box-shadow: 2px 2px 5px 0px;
}

.ico-editar-webinar {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 45px;
    z-index: 99;
    box-shadow: 2px 2px 5px 0px;
}



.seccion-webinar.borde {
    border: 1px solid #EEEEEE;
}

.titulo-visto {
    font-size: 22px;
}



/** END WEBINARS **/


/**ENCUESTAS**/
.rate {
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate:hover label {
    color: #deb217;
}

.rate:not(:checked)>label:hover~label {
    color: #ccc;
}

.depende-de {
    /*display:none;*/
}

/**FIN ENCUESTAS**/

/** SUMMERNOTE FIX **/

.note-editing-area {
    max-height: 400px !important;
    overflow: hidden !important;
    overflow-y: auto !important;
}

.note-statusbar {
    display: none !important;
}

/** FIN SUMMERNOTE FIX **/

@media (min-width: 768px) {
    .box-video-widget {
        padding-bottom: 10px;
        height: 136px;
        margin-top: 96px;
    }
}

@media (min-width: 992px) {
    .box-video-widget {
        padding-bottom: 10px;
        height: 102px;
        margin-top: 54px;
    }
}

@media (min-width: 1200px) {
    .box-video-widget {
        padding-bottom: 10px;
        height: 110px;
        margin-top: 17px;
    }
}


/* QUIZ */
.lista-preguntas-quiz {
    margin-left: 30px;
    margin-top: 5px;
    padding-left: 20px !important;
    padding-right: 45px !important;
}

/* end quiz */


/* sección recetas */
.img-recetas {
    width: 100% !important;
    object-fit: cover !important;
    max-height: 100% !important;
    position: initial !important;
    -webkit-transform: none !important;
}

@media (min-width:768px) {
    .img-recetas {
        height: 350px;
    }
}

@media (max-width:767px) {
    .img-recetas {
        height: 500px;
    }

    .box-recetas {
        height: 380px;
    }

    .box-descripcion-recetas {
        height: 60px !important;
        overflow: hidden !important;
    }
}


@media (min-width:768px) {
    .box-recetas {
        height: 455px;
    }

    .box-descripcion-recetas {
        height: 115px !important;
        overflow: hidden !important;
    }
}

@media (min-width:992px) {
    .box-recetas {
        height: 400px;
    }

    .box-descripcion-recetas {
        height: 80px !important;
        overflow: hidden !important;
    }
}

@media (min-width:1200px) {
    .box-recetas {
        height: 380px;
    }

    .box-descripcion-recetas {
        height: 60px !important;
        overflow: hidden !important;
    }
}

/* end recetas */

.box-aviso-notificacion {
    background-color: #DE3831 !important;
    border: 1px solid #DE3831 !important;
    padding: 10px;
    color: #fff !important;
    cursor: pointer;
}

/*.box-aviso-notificacion:hover {
        opacity: 0.5;
    }*/

.box-aviso-notificacion p {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
}

.seccion-caja .titulo {
    width: 97% !important;
}

@media (max-width:767px) {
    .seccion-caja img {
        object-fit: cover !important;
    }
}

.scroll-img {
    width: 25px !important;
    height: 25px !important;
}

.div-scroll {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 106px;
    left: 65px;
    background-color: #fff;
    z-index: 999999999999999999 !important;
    border-radius: 15%;
}

.div-scroll-eventos {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 106px;
    right: 10px;
    background-color: #fff;
    z-index: 999999999999999999 !important;
    border-radius: 15%;
}

.div-scroll-right {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 106px;
    right: 20px;
    background-color: transparent;
    z-index: 999999999999999999 !important;
    border-radius: 15%;
}


.div-scroll-left {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 106px;
    left: 20px;
    background-color: transparent;
    z-index: 999999999999999999 !important;
    border-radius: 15%;
}

.div-scroll-right-noticias {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 106px;
    right: 15px;
    background-color: #fff;
    z-index: 999999999999999999 !important;
    border-radius: 15%;
}

.div-scroll-left-noticias {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 106px;
    left: 20px;
    background-color: #fff;
    z-index: 999999999999999999 !important;
    border-radius: 15%;
}

.div-scroll-eventos-right {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 106px;
    right: 10px;
    background-color: #fff;
    z-index: 999999999999999999 !important;
    border-radius: 15%;
}

.div-scroll-eventos-left {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 106px;
    right: 10px;
    background-color: #fff;
    z-index: 999999999999999999 !important;
    border-radius: 15%;
}

@media (min-width:992px) {
    .alpha-md {
        padding-left: 0 !important;
    }

    .omega-md {
        padding-right: 0 !important;
    }
}

/* ESTILO GENÉRICO DE ENCUESTA */

.obligatorio-check-radio {
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 0px;
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.pregunta-obligatoria {
    background-color: #F2DEDE !important;
    opacity: 1 !important;
}

.pregunta-requerida {
    font-weight: 700 !important;
    position: absolute;
}


/* FIN ESTILO GENÉRICO ENCUESTA */

/* ESTILO GENÉRICO PORTADA GALERIAS */


.img-galeria-portada {
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
}

.img-fotogaleria-portada {
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
}

.titulo-galeria {
    position: absolute !important;
    top: 1%;
    left: 2%;
    color: #fff !important;
    font-weight: 700 !important;
    width: 355px;
}

.acciones-galeria {
    position: absolute !important;
    left: 28%;
    top: 40%;
    width: 175px !important;
}

.acciones-fotogaleria {
    position: absolute !important;
    left: 20%;
    top: 40%;
    width: 175px !important;
}

.items-galerias {
    color: #fff !important;
    font-size: 22px !important;
}

.texto-items-galerias {
    color: #fff !important;
    font-size: 20px !important;
}

.div-compartir-galerias {
    position: absolute !important;
    bottom: 18%;
    left: 7%;
    cursor: pointer !important;
}

.item-compartir-galerias {
    font-size: 31px !important;
    color: #fff !important;
    margin-right: 5px;
}

.text-compartir-galerias {
    color: #fff !important;
    font-size: 20px !important;
}

@media (min-width:768px) {
    .img-galeria-portada {
        height: 345px;
    }

    .img-fotogaleria-portada {
        height: 265px;
    }
}

@media (min-width:992px) {
    .titulo-galeria {
        font-size: 19px !important;
    }

    .acciones span {
        margin-left: 6px !important;
    }
}

.seccion-galeria-listado .tag {
    position: absolute;
    bottom: 15%;
    right: 15px;
}

.seccion-galeria-listado .tag .option {
    background-color: #fff;
    padding: 5px 15px;
    margin-bottom: 10px;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px 0 0 10px;
    border-right: none;
    font-size: 16px;
}

.seccion-galeria-listado .tag .option {
    background-color: #fff;
    padding: 5px 15px;
    margin-bottom: 10px;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px 0 0 10px;
    border-right: none;
    font-size: 16px;
}


.hide {
    display: none;
}

.img-galeria-portada:hover {
    filter: brightness(50%);
}

.seccion-galeria-listado:hover>.hide {
    display: block !important;
}

.seccion-fotogaleria-listado:hover>.hide {
    display: block !important;
}

.foto-detalle-modal {
    padding: 0 !important;
    width: 67% !important;
}

.img-foto-detalle {
    width: 100%;
    object-fit: cover;
    height: 890px !important;
}

.contenedor-imagen-fotogaleria {
    height: 890px !important;
}

.img-background-autor {
    height: 33px !important;
    width: 33px !important;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    margin-left: 5px;
}

.hilo-comentarios-popup {
    height: 75%;
    border-bottom: 1px solid #EFEFEF;
    overflow: auto;
    padding-bottom: 30px;
}

.comentario-fotografia-popup {
    margin-left: 7px;
}

.info-comentario {
    font-size: 10px;
    margin-left: 7px;
    line-height: 0px;
}

.items-foto-seleccionada {
    height: 5.5%;
    border-bottom: 1px solid #EFEFEF;
}

.items-foto-seleccionada span {
    font-size: 30px !important;
}

.numlikes-fotografia {
    font-size: 32px !important;
}

.insert-comment p {
    font-size: 32px !important;
    margin-top: 6px;
    margin-left: 2px;
}

.input-comentario-foto {
    width: 100%;
    border: none;
    padding-top: 11px;
}

.input-comentario-foto:focus {
    outline: none;
}

.img-autor {
    max-width: 35px;
}

@media(max-width:1485px) {
    .hilo-comentarios-popup {
        height: 73% !important;
    }

    .foto-detalle-modal {
        width: 88% !important;
    }
}

@media (max-width:1199px) {
    .foto-detalle-modal {
        width: 94% !important;
    }
}

.img-portada-galeria {
    height: 100%;
    object-fit: cover !important;
    width: 100%;
    border-top-left-radius: 1.5%;
    border-bottom-left-radius: 1.5%;
}

.loading-gif {
    position: absolute !important;
    top: 50% !important;
}

.flex {
    display: flex !important;
}

.comentarios-galerias {
    /*height:73%;*/
    height: 84.5%;
    overflow: scroll;
    border-bottom: 1px solid #EFEFEF;
}

.input-comentario-foto-galeria {
    height: 45px !important;
}

.div-item-galerias {
    border: 1px solid #EFEFEF;
    border-radius: 1.5%;
    padding: 0 !important;
    height: 420px;
}

/*::-webkit-scrollbar {
    display: none;
}*/

.bloque-autor-creador {
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 20px;
    height: 61px;
    overflow: hidden;
}

.format-rbutton {
    margin-top: 3px;
}

.c-pointer {
    cursor: pointer !important;
}

.c-default {
    cursor: default !important;
}

/* FIN PORTADA GALERÍAS */

.disabled-action {
    color: rgba(0, 0, 0, 0.5) !important;
}

.img-ranking-trivial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* CLASES DATECPICKER */
.reserva-clase {
    background-color: var(--color-principal) !important;
    color: #fff !important;
}

.reserva-clase,
.ui-widget-content .reserva-clase a.ui-state-default,
.ui-widget-header .reserva-clase a.ui-state-default {
    background-color: var(--color-principal);
    color: #fff !important;
}

.ui-widget-content .reserva-clase a.ui-state-default.ui-state-hover {
    color: white !important;
}

.reserva-clase>.ui-state-default.ui-state-hover {
    background: var(--color-principal) !important;
}

/* END DATEPICKER */

.anotacion {
    color: darkred;
    font-size: 12px;
}

/* CALENDARIO ADVIENTO */
.listado-casilla {
    width: 100%;
    object-fit: cover;
    border-radius: 5%;
}

@media (min-width: 1200px) {
    .col-lg-2-5 {
        width: 20% !important;
    }
}

@media (min-width:768px) {
    .listado-casilla {
        height: 175px;
    }

    .modal-pregunta-casilla {
        width: 760px !important;
    }
}

.o-f-cover {
    object-fit: cover !important;
}

.d-flex {
    display: flex;
}

@media (min-width: 768px) {
    .flex-sm {
        display: flex;
    }
}

.button-responder-calendario {
    padding: 7px 75px;
    font-size: 16px !important;
}

.fecha-calendario-apertura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*padding: 7px;*/
    color: var(--color-principal);
    font-weight: 900;
    font-size: 21px;
    background-color: #E2E3E3;
}


/* END CALENDARIO */


/* RECORRIDOS */


.info-recorrido {
    background-color: rgb(255, 255, 255);
    position: absolute;
    bottom: 3px;
    left: 7px;
    border-radius: 12%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
    z-index: 999999999999999999999999;
}

.tachado {
    text-decoration: line-through !important;
}

.borde-notificacion {
    border: 1px solid #C9C9C9;
    border-radius: 5%;
}


/* modal editor popup */

@media (max-width:539px) {
    #editor-popup {
        height: 1080px;
    }
}

@media (min-width:540px) {
    #editor-popup {
        height: 1160px;
    }
}

@media (min-width:768px) {
    #editor-popup {
        height: 960px;
    }

    .imagen-gestor-popup {
        height: 200px;
    }
}

/*@media (min-width:992px) {
    #editor-popup {
        height: 950px;
    }
}*/

.imagen-gestor-popup {
    object-fit: cover;
}

.body-modal-popup {
    position: relative;
    min-height: 100%;
    padding: 0 !important;
}

.close-modal-popup {
    position: absolute;
    right: 2%;
    top: 2%;
    z-index: 9;
    /*  color: white !important;*/
    /*border: 1px solid white !important;*/
    border-radius: 50% !important;
    padding: 5px 9px !important;
    opacity: 1 !important;
}

.modal-content-popup {
    border-radius: 3% !important;
}

.img-popup {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 3%;
    border-top-right-radius: 3%;
}

.titulo-modal-popup {
    color: #555555 !important;
    font-weight: 700 !important;
}

.texto-modal-popup {
    color: #555555 !important;
}

.btn-modal-popup {
    color: white;
    font-size: 14px !important;
    margin: 1px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    border-radius: 4px;
}

@media (min-width:992px) {
    .modal-content-popup {
        width: 960px;
        right: 28%;
    }
}

/* fin editor popup */

/* postit */

@media(min-width:992px) {
    .modal-postit {
        width: 50% !important;
        left: 25% !important;
    }

    .pull-right-md {
        float: right !important;
    }
}

.textarea-postit {
    border: 2px solid #394f62 !important;
    border-radius: 1% !important;
}

#color-postit option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#color-postit option[value="0"] {
    background: rgba(0, 0, 0, 0.3) !important;
}

#color-postit option[value="1"] {
    background: #FDED6A !important;
}

#color-postit option[value="2"] {
    background: #A3EA9A !important;
}

#color-postit option[value="3"] {
    background: #FEB6B5 !important;
}

#color-postit option[value="4"] {
    background: #009BAB !important;
}

#color-postit option[value="5"] {
    background: #5EB344 !important;
}

#color-postit option[value="6"] {
    background: #FFCA38 !important;
}

#color-postit option[value="7"] {
    background: #FE7900 !important;
}

#color-postit option[value="8"] {
    background: #B41983 !important;
}

#color-postit option {
    zoom: 1.5
}


.fondo-corcho {
    min-height: 108vh !important;
    /*background-image: url('/im/fondo-corcho.svg');*/
    width: 100%;
}

.img-postit {
    /*height:290px;*/
    width: 100%;
    /*object-fit: cover;*/
}

.text-postit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.color-postit {
    font-weight: 700 !important;
    color: #fff !important;
}

.color-postit-contrast {
    font-weight: 700 !important;
}

.postit-autor {
    position: absolute;
    bottom: -2%;
    left: 6%;
}

.postit-like {
    position: absolute;
    bottom: 1%;
    right: 1%;
}

.postit-like-img {
    position: absolute;
    bottom: 1%;
    right: 1%;
}

.borrar-postit-img {
    position: absolute;
    right: 6%;
    top: 0;
    cursor: pointer;
}

.borrar-postit {
    position: absolute;
    right: 8%;
    top: 12%;
    cursor: pointer;
}

@media(max-width:767px) {
    .img-postit {
        height: auto;
    }

    .btn-download-postit {
        float: left !important;
        margin-top: 5px;
    }
}

@media(min-width:768px) {
    .img-postit {
        height: 382px;
    }

    .btn-download-postit {
        float: right !important;
        margin-top: -5px;
    }
}

@media(min-width:992px) {
    .img-postit {
        height: 323px;
    }
}


@media(min-width:1200px) {
    .img-postit {
        height: 290px;
    }
}


.comunidad-caja {
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: rgb(0 0 0 / 13%) 0px 1.6px 3.6px 0px, rgb(0 0 0 / 11%) 0px 0.3px 0.9px 0px;
}

@media (min-width:768px) {
    .listado-seccion-equipos {
        height: 370px;
    }
}

@media (min-width:992px) {
    .listado-seccion-equipos {
        height: 320px;
    }
}

@media (min-width:1200px) {
    #img-fondo-custom {
        height: 1060px;
    }
}

.container-postit {
    top: 0 !important;
    position: absolute !important;
}

.postit-like-custom {
    right: 3% !important;
}

.color-postit-custom {
    left: 40% !important;
    top: 70px !important;
}

.borrar-postit-img-custom {
    left: 48.5% !important;
    top: 9px;
}

.text-postit-custom {
    left: 51% !important;
    top: 53% !important;
}


/* end postit */

/* icos notificacion */
.ico-sprite.Anadir {
    background-image: url(/im/icoadd.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Contenido {
    background-image: url(/im/icocontent.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Blog {
    background-image: url(/im/icocontent.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Post {
    background-image: url(/im/icocontent.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Evento {
    background-image: url('/im/icocalendar.png');
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Grupo {
    background-image: url('/im/icogroups.png');
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Noticia {
    background-image: url('/im/iconews.png');
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Webinar {
    background-image: url('/im/icowebinar.png');
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.FotoConcurso {
    background-image: url('/im/camera-icon4png.png');
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Clases {
    background-image: url(/im/icoclases.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Galeria {
    background-image: url(/im/icogallery.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.UsuarioWeb {
    background-image: url(/im/icouser.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.Meta {
    background-image: url(/im/icometa.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}


.ico-sprite.AgregoElemento {
    /*background-image: url(/im/icorun.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;*/
}

.ico-sprite.Comentar {
    background-image: url(/im/icocomment.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

.ico-sprite.HacerLike {
    background-image: url(/im/icolike.png);
    background-repeat: no-repeat;
    margin-top: -1px;
    margin-left: 0px;
    margin-right: 0px;
}

/*.btn-notificaciones-buzon {
    top: 5%;
    right: 25%;
}

.btn-notificaciones-buzon {*/
/*display: none;*/
/* Hidden by default */
/*position: absolute;
    top: 10px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    opacity: 0.8;
    width: 55px;
    cursor: pointer !important;
    z-index: 999999;
}

.btn-notificaciones-buzon-integracion {*/
/*display: none;*/
/* Hidden by default */
/*position: absolute;
    top: 10px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    opacity: 0.8;
    width: 55px;
    cursor: pointer !important;
    z-index: 999999;
}*/

/*@media (min-width:991px) {*/
/*.btn-notificaciones-buzon {
        right: -50px;
        top: -12px;
    }

    .btn-notificaciones-buzon-open {
        top: -15px;
    }

    .btn-notificaciones-buzon-integracion {
        right: 4px;
        top: -8px;
    }

    .btn-notificaciones-buzon-open-integracion {
        top: -13px;
    }*/

#notificacion-buzon {
    /*z-index:9999999999999999999999;*/
}

.div-notificacion-buzon {
    position: absolute;
    cursor: pointer;
}

.arrow_box {
    position: absolute;
    top: -21px;
    left: calc(137%);
    background: #ffffff;
    border: 1px solid #797F86;
    transform: rotate(180deg);
    width: 160px;
    cursor: default;
    z-index: 999
}

.arrow_box:after,
.arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    /*transform: rotate(180deg)*/
}

.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #ffffff;
    border-width: 12px;
    margin-top: -12px;
}

.arrow_box:before {
    border-color: rgba(121, 127, 134, 0);
    border-left-color: #797F86;
    border-width: 14px;
    margin-top: -14px;
}

.arrow_box p {
    padding: 11px;
    margin: 0 0 -2px;
    color: #797F86 !important;
    transform: rotate(180deg);
}

div .ico-notificacion-remitente {
    margin-top: -7px;
}

/*}*/

.ico-notificacion-remitente {
    width: 35px;
    border-radius: 50%;
    height: 35px;
    object-fit: cover;
}

.content-notificacion {
    border-bottom: 1px solid #EFEFEF;
}

.thrash-notif {
    cursor: pointer;
    font-size: 20px !important;
    margin-top: -2px;
    opacity: 0.6;
}

.thrash-notif:hover {
    opacity: 0.3;
}

.ico-flecha-vermas {
    cursor: pointer;
    margin-right: 10px;
    margin-top: -2px;
}

.navbar-right {
    margin-right: 37px !important;
}

.usu-ib {
    margin-right: 37px !important;
}

@media(max-width:767px) {
    .col-img-usuario-notif {
        margin-left: -30px !important;
    }
}

/* fin notificaciones */
.text-enfasis {
    font-weight: bold !important;
}

@media (min-width:1200px) {
    .listado-seccion-equipos {
        height: 300px;
    }
}

#modal-popup .close-modal-popup {
    color: #000 !important;
    border-color: #000 !important;
    background-color: #fff !important;
}

/* Tooltips */



/* End tooltips */

/* MAPA INGTERACTIVO */
/* CSS Document */
/**, *::after, *::before {
    margin: 0rem;
    padding: 0rem;
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
}

body {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    line-height: 1.7rem;
    color: #fff;
    background-color: #c1ade0;
    background-size: cover;
}

a {
    text-decoration: none;
    color: #fff;
    transition: all 0.5s ease-out;
}

ul, ol {
    list-style: none;
    margin: 0;
}

.clear {
    clear: both;
}

.bg {
    width: 90rem;
    height: 67rem;
    background-image: url(../img/bg.svg);
    margin: 2rem auto;*/
/*position: relative;*/
/*box-shadow: 0 1rem 3rem -.4rem rgba(88,67,128,0.6);
    border-radius: 1rem;*/
/*margin-bottom: 5rem;
}

.point {
    position: absolute;
    width: 3rem;
    height: 3rem;
    background-color: #009AD8;
    border-radius: 50%;
    cursor: pointer;
    background-image: url(../img/cross.svg);
    transition: .5s ease-in-out;
}

    .point:hover {
        transform: rotate(90deg);
    }

    .point::after {
        width: 3.9rem;
        height: 3.9rem;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background-color: #6b2fdd;
        border-radius: 50%;
        opacity: 0;
        margin: -1.3rem 0 0 -1.3rem;
        animation: waves 20s infinite;
    }

@keyframes waves {
    0% {
        transform: scale(0);
    }

    1% {
        opacity: .7;
    }

    5% {
        opacity: 0;
        transform: scale(1);
    }
}

.info-mapa {
    width: 25rem;
    height: 20rem;
    position: absolute;
    top: 5rem;
    left: -8rem;
    transform: rotate(-90deg);
    display: none;
}

.point:hover .info {
    display: block;
}

.content_container {
    background-color: #dfdce3;
    box-shadow: 0 1rem 3.1rem -.4rem rgba(88,67,128,0.6);
    border-radius: .7rem;
    position: absolute;
    animation: appear 1s;
    transition: 1s;
}

    .content_container:before {
        content: '';
        height: 0;
        width: 0;
        position: absolute;
        top: 5.5rem;
        left: 99%;
        border-style: solid;
        border-width: .75rem 0 .75rem .8rem;
        border-color: transparent transparent transparent #dfdce3;
    }

@keyframes appear {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        opacity: 0;
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.title {
    width: 25rem;
    height: 4rem;
    background-color: #a58fdb;
    border-radius: .7rem .7rem 0 0;
    font-weight: 700;
    font-size: 1.5rem;
    padding: 1rem;
    text-align: center;
}

.text {
    padding: 2rem;
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: #777;
}

#madrid {
    top: 26rem;
    left: 47.5rem;
}

#andalucia {
    top: 45rem;
    left: 36.5rem;
}

    #andalucia::after {
        animation-delay: 1s;
    }

#asturias {
    top: 4.5rem;
    left: 36.5rem;
}

    #asturias::after {
        animation-delay: 2s;
    }

#aragon {
    top: 18rem;
    left: 61.5rem;
}

    #aragon::after {
        animation-delay: 3s;
    }

#cantabria {
    top: 4.8rem;
    left: 46.3rem;
}

    #cantabria::after {
        animation-delay: 4s;
    }

#catalunia {
    top: 17rem;
    left: 77rem;
}

    #catalunia::after {
        animation-delay: 5s;
    }

#valencia {
    top: 31.5rem;
    left: 64rem;
}

    #valencia::after {
        animation-delay: 6s;
    }

#murcia {
    top: 41rem;
    left: 60rem;
}

    #murcia::after {
        animation-delay: 7s;
    }

#galicia {
    top: 8.5rem;
    left: 22.5rem;
}

    #galicia::after {
        animation-delay: 8s;
    }

#pais_vasco {
    top: 8.5rem;
    left: 52.3rem;
}

    #pais_vasco::after {
        animation-delay: 9s;
    }

#navarra {
    top: 9.5rem;
    left: 57rem;
}

    #navarra::after {
        animation-delay: 10s;
    }

#extremadura {
    top: 36rem;
    left: 33.5rem;
}

    #extremadura::after {
        animation-delay: 11s;
    }

#rioja {
    top: 11.5rem;
    left: 53rem;
}

    #rioja::after {
        animation-delay: 12s;
    }

#ceuta {
    top: 56.5rem;
    left: 38rem;
}

    #ceuta::after {
        animation-delay: 13s;
    }

#melilla {
    top: 60.2rem;
    left: 51.5rem;
}

    #melilla::after {
        animation-delay: 14s;
    }

#canarias {
    top: 59.5rem;
    left: 13rem;
}

    #canarias::after {
        animation-delay: 15s;
    }

#baleares {
    top: 29.5rem;
    left: 81rem;
}

    #baleares::after {
        animation-delay: 16s;
    }

#castilla-la_mancha {
    top: 30.5rem;
    left: 44rem;
}

    #castilla-la_mancha::after {
        animation-delay: 17s;
    }

#castilla_leon {
    top: 16.5rem;
    left: 40.5rem;
}

    #castilla_leon::after {
        animation-delay: 18s;
    }*/


/* MAPA INTERACTIVO */

/* TINDER */



/* END TINDER */


.thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
}

@media (max-width:767px) {
    #ui-datepicker-div {
        width: 75% !important;
    }
}

@media (min-width:991px) {
    .pull-right-sm {
        float: right;
    }
}


/* emojis*/
span.emoji {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: baseline;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    width: 1em;
    height: 1em;
    background-size: 1em;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

span.emoji-sizer {
    line-height: 0.81em;
    font-size: 1em;
    margin: -2px 0;
}

span.emoji-outer {
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    height: 1em;
    width: 1em;
}

span.emoji-inner {
    display: -moz-inline-box;
    display: inline-block;
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    vertical-align: baseline;
    *vertical-align: auto;
    *zoom: 1;
}

img.emoji {
    width: 1em;
    height: 1em;
}

.emoji-wysiwyg-editor:empty:before {
    content: attr(placeholder);
    color: #9aa2ab;
}

.emoji-picker-container {
    position: relative;
}

.emoji-picker-icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 20px;
    opacity: 0.7;
    z-index: 100;
    transition: none;
    color: black;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.emoji-picker-icon.parent-has-scroll {
    right: 28px;
}

.emoji-picker-icon:hover {
    opacity: 1;
}

/* Emoji area */
.emoji-wysiwyg-editor:empty:before {
    content: attr(placeholder);
    color: #9aa2ab;
}

.emoji-wysiwyg-editor:active:before,
.emoji-wysiwyg-editor:focus:before {
    content: none;
}

.emoji-wysiwyg-editor {
    padding: 6px;
    padding-right: 35px;
    margin-bottom: 0px;
    min-height: 35px;
    /* 35 */
    height: 30px;
    max-height: 284px;
    overflow: auto;
    line-height: 17px;
    border: 1px solid #d2dbe3;
    border-radius: 2px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -webkit-user-select: text;
    word-wrap: break-word;
}

.emoji-wysiwyg-editor.parent-has-scroll {
    padding-right: 40px;
}

.emoji-wysiwyg-editor.single-line-editor {
    min-height: 35px;
    height: inherit;
}

.emoji-wysiwyg-editor img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: -3px 0 0 0;
}

.emoji-menu {
    position: absolute;
    right: 0;
    z-index: 999;
    width: 225px;
    overflow: hidden;
    border: 1px #dfdfdf solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.emoji-items-wrap1 {
    background: #ffffff;
    padding: 5px 2px 5px 5px;
}

.emoji-items-wrap1 .emoji-menu-tabs {
    width: 100%;
    margin-bottom: 8px;
    margin-top: 3px;
}

.emoji-items-wrap1 .emoji-menu-tabs td {
    text-align: center;
    color: white;
    line-height: 0;
}

.emoji-menu-tabs .emoji-menu-tab {
    display: inline-block;
    width: 24px;
    height: 29px;
    background: url('/im/emojis/IconsetSmiles.png') no-repeat;
    background-size: 42px 350px;
    border: 0;
}

.is_1x .emoji-menu-tabs .emoji-menu-tab {
    background-image: url('/im/emojis/IconsetSmiles_1x.png');
}

.emoji-menu-tabs .icon-recent {
    background-position: -9px -306px;
}

.emoji-menu-tabs .icon-recent-selected {
    background-position: -9px -277px;
}

.emoji-menu-tabs .icon-smile {
    background-position: -9px -34px;
}

.emoji-menu-tabs .icon-smile-selected {
    background-position: -9px -5px;
}

.emoji-menu-tabs .icon-flower {
    background-position: -9px -145px;
}

.emoji-menu-tabs .icon-flower-selected {
    background-position: -9px -118px;
}

.emoji-menu-tabs .icon-bell {
    background-position: -9px -89px;
}

.emoji-menu-tabs .icon-bell-selected {
    background-position: -9px -61px;
}

.emoji-menu-tabs .icon-car {
    background-position: -9px -196px;
}

.emoji-menu-tabs .icon-car-selected {
    background-position: -9px -170px;
}

.emoji-menu-tabs .icon-grid {
    background-position: -9px -248px;
}

.emoji-menu-tabs .icon-grid-selected {
    background-position: -9px -222px;
}

.emoji-menu-tabs .icon-smile,
.emoji-menu-tabs .icon-flower,
.emoji-menu-tabs .icon-bell,
.emoji-menu-tabs .icon-car,
.emoji-menu-tabs .icon-grid {
    opacity: 0.7;
}

.emoji-menu-tabs .icon-smile:hover,
.emoji-menu-tabs .icon-flower:hover,
.emoji-menu-tabs .icon-bell:hover,
.emoji-menu-tabs .icon-car:hover,
.emoji-menu-tabs .icon-grid:hover {
    opacity: 1;
}

.emoji-menu .emoji-items-wrap {
    position: relative;
    height: 174px;
    overflow: scroll;
}

.emoji-menu .emoji-items {
    padding-right: 8px;
    outline: 0 !important;
}

.emoji-menu img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 0 none;
}

.emoji-menu .emoji-items a {
    margin: -1px 0 0 -1px;
    padding: 5px;
    display: block;
    float: left;
    border-radius: 2px;
    border: 0;
}

.emoji-menu .emoji-items a:hover {
    background-color: #edf2f5;
}

.emoji-menu:after {
    content: ' ';
    display: block;
    clear: left;
}

.emoji-menu a .label {
    display: none;
}

/* end emojis*/


/* Match */
.close-cerrar-match {
    position: absolute;
    cursor: pointer;
    right: 0;
    right: 22px;
    top: 10px;
    z-index: 999;
}

/*@media(min-width:768px) {
    #modal-match {
        margin-top: 145px;
    }
    #modal-finalizar-encuesta {
        margin-top: 145px;
    }
}*/

/*end match*/


.height-titulo {
    height: 60px !important;
}


@media (max-width:700px) {
    #cconsent-bar .ccb__wrapper {
        width: 90%;
    }

    #cconsent-bar .ccb__right>div {
        display: grid !important;
    }

    .ccb__edit {
        text-align: center;
        margin: 0 !important;
        margin-bottom: 5px !important;
    }

    .ccm__footer__consent-modal-submit {
        margin: 0 !important;
        margin-bottom: 5px !important;
    }
}

.pagina-comic {
    width: 100%;
    object-fit: cover;
}

.info-pagina-comic {
    border: 1px solid #9A9A9A;
    height: 40px;
}

/* ESTILOS COMIC GESTOR */
@media (min-width:768px) {
    .pagina-comic {
        height: 130px;
    }

    .info-pagina-comic {
        border: 1px solid #9A9A9A;
        border-bottom-left-radius: 5%;
        border-bottom-right-radius: 5%;
        height: 40px;
    }
}

/* END COMIC GESTOR */

/* BUSCADOR */

.titulo-buscador {
    font-size: 20px !important;
}

.descripcion-buscador {
    font-size: 14px !important;
}

.sep-busq {
    margin-right: 10px;
}

.siguiente-busq {
    margin-right: 10px;
}

@media (max-width:991px) {
    #buscador-global-mobile input {
        margin-left: 20px;
        width: 101%;
        right: -21px;
    }

    .btn-default.cargar-lupa {
        background-color: transparent;
    }

    .cont-ico {
        position: absolute;
        right: 19px;
        top: 14px;
    }

    .seccion-lupa {
        position: absolute !important;
        right: 45px;
        top: 4px;
    }

    .sep-menu-lat-buscador {
        margin-top: 242px !important;
    }
}

@media (min-width:992px) {
    /*#input-buscar {
        width: 113%;
    }*/

    .input-buscador-ib {
        width: 220px;
        height: 27px;
        color: var(--color-principal) !important;
    }

    .search-ib {
        position: absolute;
        right: 2px;
        background-color: transparent !important;
    }
}

.search-mv-ib {
    width: 28px;
    position: absolute !important;
    top: 9px;
    right: 28px;
}

/* FIN BUSCADOR */

/* ICO BUZON NOTIFICACIONES */
@media (max-width:991px) {
    .div-notificacion-buzon {
        right: calc(14%) !important;
        top: 9px !important;
    }

    .ico-open-notificaciones {
        fill: #fff !important;
    }

    .info-n-notif {
        color: #fff;
    }
}

/* END COMIC */


.box-widget {
    border: 1px solid #eee;
    overflow: hidden;
}

.bloque-titulo-widget {
    margin-top: -15px;
}

.img-widget {
    object-fit: cover;
}

@media (max-width:767px) {
    .bloque-titulo-widget {
        height: 95px;
    }

    .img-widget {
        height: 250px;
    }
}

@media (min-width:768px) {
    .box-widget {
        height: 280px;
    }

    .bloque-titulo-widget {
        height: 110px;
    }

    .img-widget {
        height: 135px;
    }
}

@media (min-width:992px) {
    .box-widget {
        height: 290px;
    }

    .bloque-titulo-widget {
        height: 100px;
    }

    .img-widget {
        height: 165px;
    }
}

@media (min-width:1200px) {
    .box-widget {
        height: 310px;
    }

    .bloque-titulo-widget {
        height: 100px;
    }

    .img-widget {
        height: 223px;
    }
}



/* FIN NOTIF */

/*QUIZ*/
.respuestas-trivial-fail:checked::before {
    content: 'x' !important;
}

.respuestas-trivial-success:checked::before {
    content: '✓' !important;
}

.bloque-categorias:hover {
    cursor: pointer;
    transition: all 0.7s;
    opacity: 0.7;
}

@media (min-width:768px) {
    .modal-categoria-respuesta {
        width: auto !important;
    }
}

@media (min-width:768px) {
    .modal-categoria-respuesta {
        width: 75% !important;
    }
}

@media (min-width:992px) {
    .modal-categoria-respuesta {
        width: 50% !important;
    }
}

@media (min-width:1200px) {
    .modal-categoria-respuesta {
        width: 35% !important;
    }
}

.modal-categoria-respuesta {}

/* END QUIZ */
@media (min-width:992px) {
    .limite-subidas {
        max-width: 350px;
        height: 35px;
    }
}

@media (max-width:1199px) {
    .btn-concursos {
        padding: 10px 50px !important;
        font-size: medium !important;
    }
}

@media (min-width:1200px) {
    .btn-concursos {
        padding: 10px 75px !important;
        font-size: medium !important;
    }
}

@media (max-width:991px) {
    .btn-concursos {
        padding: 12px !important;
        width: 100%;
        font-size: medium !important;
    }
}

.a-mover-to {
    margin-left: 3px;
    vertical-align: sub;
}

.thumb-uploads {
    margin-left: 75px;
    width: 125px;
    cursor: pointer;
}

#overlay-detail {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.row-img-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    /* Añade esto para centrar contenido horizontalmente */
    box-sizing: border-box;
}

.img-detail {
    max-width: 100%;
    /* Ajusta el ancho según tus preferencias */
    max-height: 100%;
    /* Ajusta la altura según tus preferencias */
    overflow: auto;
    /* Para permitir desplazamiento si la imagen es más grande */
    padding: 20px;
    /* Ajusta el espaciado interno según tus preferencias */
}

/* Estilos para la imagen en el modal */
#overlay-detail img {
    max-width: 80%;
    max-height: 80%;
}

/* Estilos fotografías */
.grid {
    margin: 0 auto;
}

.grid-item {
    width: 31.33%;
    min-width: 300px;
    min-height: 300px;
    margin: 10px;
    float: left;
    background-color: #ccc;
    border-radius: 5px;
    padding: 7px;
    box-sizing: border-box;
}

@media(max-width:1199px) {
    .grid-item {
        width: 30%;
    }
}

@media(max-width:991px) {
    .grid-item {
        width: 95%;
        min-width: 0;
        float: none;
        margin: 10px auto;
    }
}


.grid-item img {
    width: 100%;
}

.info-grid {
    color: #fff !important;
    z-index: 9;
}

.info-grid h4 {
    position: absolute;
    top: 10%;
    left: 12%;
    color: #fff;
}

.title-info-grid {
    position: absolute;
    top: 10.5%;
    left: 23%;
    color: #fff;
    z-index: 99;
}

.info-concurso-completo {
    position: absolute;
    bottom: 3%;
    right: 6%;
    z-index: 99;
    color: #fff;
    cursor: pointer;
}

.edit-foto-concurso {
    position: absolute;
    top: 6%;
    right: 4%;
    z-index: 99;
    color: var(--color-principal) !important;
    cursor: pointer;
    font-size: 19px !important;
}

.camera-info-grid {
    position: absolute;
    top: 14%;
    left: 15%;
    color: #fff;
    z-index: 99;
    font-size: 20px !important;
}

.info-comment {
    position: absolute;
    bottom: 15%;
    right: 10%;
}

.info-comment img {
    margin-left: 20px;
    width: 30px;
}

.info-user-grid {
    position: absolute;
    top: 35%;
    left: 12%;
    width: 100%;
}

.info-user-grid img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    display: inline-block !important;
}

.item-concurso {
    object-fit: cover;
    min-height: 300px;
}

.info-num-votaciones {
    position: absolute;
    top: 16%;
    right: 8%;
    color: #fff;
    cursor: pointer;
}

.info-num-votaciones-10 {
    position: absolute;
    top: 16%;
    right: 6%;
    color: #fff;
    cursor: pointer;
}

.btn-filter {
    border-radius: 5% !important;
    padding: 6px 30px !important;
    border-radius: 5% !important;
    font-size: 16px !important;
    width: 145px !important;
    color: #333333;
    border-color: #CCCCCC !important;
}

.btn-filter:hover {
    opacity: 0.8 !important;
}

.cancel-foto {
    text-decoration: underline;
    color: #F74C4C;
}

.cancel-foto:hover {
    opacity: 0.7;
    color: #F74C4C;
}

.btn-subir-foto-concurso {
    padding: 8px 25px !important;
    border-radius: 7% !important;
}

.btn-elegir-archivo {
    position: absolute;
    top: calc(69%);
    left: calc(38%);
}

.info-elegir-archivo {
    position: absolute;
    top: calc(55%);
    left: calc(29%);
}

@media (max-width:767px) {
    .info-elegir-archivo {
        position: absolute;
        top: calc(60%);
        left: calc(7%);
    }
}

@media (min-width:992px) {
    .modal-nueva-fotografia .modal-content {
        max-width: 600px !important;
        left: calc(20%);
        /*top: calc(20%);*/
        border-radius: 3%;
    }
}

.titulo-concurso-foto {
    color: #979797 !important;
    font-weight: 700 !important;
    height: 40px;
    font-size: 15px;
    overflow: hidden;
}

.descripcion-concurso-foto {
    color: #979797 !important;
    overflow: hidden;
}

.descripcion-concurso {
    color: #979797 !important;
    max-height: 74px;
    overflow-x: auto;
}

.bloque-izquierdo-comentarios {
    min-height: 838px;
}

@media (max-width:767px) {
    .bloque-izquierdo-comentarios {
        min-height: 720px;
    }
}

.container-detalle {
    border-radius: 5%;
}

/* Rediseño modal detalle foto: layout en columna con imagen completa */
/* IMPORTANTE: aplicar layout flex solo cuando el modal está abierto (Bootstrap: .in) */
#detalle-foto.modal.in {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 8px 8px 8px !important;
}

#detalle-foto.modal.in .modal-dialog {
    margin: 0 auto !important;
    width: fit-content !important;
    max-width: calc(100vw - 16px) !important;
}

@media (min-width: 768px) {
    #detalle-foto.modal.in .modal-dialog {
        width: fit-content !important;
        max-width: calc(100vw - 16px) !important;
    }

    #detalle-foto .modal-dialog.modal-dialog-detalle,
    #detalle-foto .modal-dialog.modal-dialog-detalle-sin-comentarios {
        width: fit-content !important;
        max-width: calc(100vw - 16px) !important;
    }
}

#detalle-foto .container-detalle {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    max-height: calc(100vh - 16px);
}

#detalle-foto .detalle-foto-body {
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
}

#detalle-foto .modal-content {
    min-height: 0;
    border-radius: 16px;
    top: 0;
    border: 0;
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
    width: fit-content !important;
    max-width: calc(100vw - 16px) !important;
    display: inline-block;
}

#detalle-foto .comentarios-detalle,
#detalle-foto .detalle-foto-comments {
    width: 100%;
    box-sizing: border-box;
}

#detalle-foto .modal-dialog-detalle,
#detalle-foto .modal-dialog-detalle-sin-comentarios {
    width: fit-content;
    min-width: 350px;
    max-width: calc(100vw - 16px);
}

#detalle-foto .detalle-foto-image {
    position: relative;
    background: #fff;
    display: block;
}

#detalle-foto .detalle-foto-img {
    width: auto;
    height: auto;
    min-width: 350px;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    background: transparent;
    position: relative;
    z-index: 1;
}

#detalle-foto .detalle-foto-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.1);
}

#detalle-foto .detalle-foto-close i {
    color: #333;
}

#detalle-foto .detalle-foto-close:hover {
    background: rgba(255,255,255,1);
}

#detalle-foto .ico-borrar-concurso {
    top: 10px;
    right: 52px;
    color: #666 !important;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 999px;
    padding: 6px 8px;
}

#detalle-foto .detalle-foto-body {
    padding: 12px 0 12px 0;
    background: #fff;
    max-height: 30vh;
    overflow-y: auto;
}

/* Mantener separación lateral del texto sin ensanchar el modal (equivalente al gutter bootstrap) */
#detalle-foto .detalle-foto-author,
#detalle-foto .detalle-foto-title {
    padding-left: 15px;
    padding-right: 15px;
}

#detalle-foto .detalle-foto-author {
    /*display: flex;*/
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

#detalle-foto .detalle-foto-author .descripcion-concurso-foto {
    display: inline-block;
    flex: 0 1 auto;
    margin-left: 0;
    text-align: left;
}

#detalle-foto .detalle-foto-title .titulo-concurso-foto {
    margin-top: 0;
    margin-bottom: 6px;
}

#detalle-foto .detalle-foto-title .descripcion-concurso {
    max-height: none;
}

#detalle-foto .bloque-comentar-concursos {
    position: relative;
}

.like-detalle-foto {
    cursor: pointer;
    width: 35px;
    height: 35px;
    position: absolute;
    top: -5px !important;
    right: 15px !important;
}

.like-detalle-foto:hover {
    opacity: 0.7;
}

.info-nlikes-detalle {
    position: absolute;
    top: 1px;
    right: 28px;
    color: #fff;
    cursor: pointer;
}

.info-nlikes-detalle-10 {
    position: absolute;
    top: 1px;
    right: 28px;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 767px) {
    #detalle-foto .modal-dialog-detalle,
    #detalle-foto .modal-dialog-detalle-sin-comentarios {
        max-width: calc(100vw - 16px);
    }

    #detalle-foto .detalle-foto-img {
        min-width: 350px;
        width: auto;
        max-height: 60vh;
    }

    #detalle-foto .detalle-foto-body {
        padding: 12px;
        max-height: 100%;
    }
}

@media (min-width:992px) {
    .fondo-detalle {
        min-height: 838px !important;
        border-radius: inherit;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #eeeeee
    }

    #detalle-foto .modal-dialog-detalle,
    #detalle-foto .modal-dialog-detalle-sin-comentarios {
        min-width: 450px;
    }

    #detalle-foto .detalle-foto-img {
        min-width: 450px;
    }
}

/* Compatibilidad: el layout antiguo usaba min-height fijo y fondo por background; ahora lo neutralizamos */
#detalle-foto .fondo-detalle {
    min-height: 0 !important;
    background-image: none !important;
}

@media (max-width:991px) {
    #detalle-foto .modal-content-sin-comentarios {
        min-height: 0 !important;
    }
}

/*@media (min-width: 768px) and (max-width: 991px) {
    #detalle-foto .modal-content {
        min-height: 1100px;
        border-radius: 5%;
        top: 0;
    }
}

@media (min-width: 565px) and (max-width: 767px) {
    #detalle-foto .modal-content {
        min-height: 1100px;
        border-radius: 5%;
        top: 0;
    }
}*/

.detalle-concurso-foto {
    width: 100%;
    object-fit: cover;
}

.img-detalle-usuario {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    display: inline;
}

.img-detalle-usuario-comment {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    margin-top: -3px;
}

.bloque-comentar-concursos {
    border-top: 1px solid #979797;
}

@media (max-width:991px) {
    .bloque-comentarios-concursos {
        height: auto;
        overflow-x: auto;
    }

    .bloque-comentarios-concursos-chritsmas {
        height: auto;
        overflow-x: auto;
    }

    .wrap-text-area {
        padding-left: 15px !important;
    }

    .note-editable {
        height: 180px !important;
        min-height: 180px !important;
    }
}

@media (min-width:992px) {
    .bloque-comentarios-concursos {
        height: 100px;
        overflow-x: auto;
    }

    .bloque-comentarios-concursos-chritsmas {
        height: 350px;
        overflow-x: auto;
    }

    .note-editing-area {
        height: 100px !important;
    }

    /* No forzar anchos fijos: el detalle debe ajustar a la imagen */
    #detalle-foto .modal-dialog-detalle {
        width: fit-content;
        max-width: calc(100vw - 16px);
    }

    /* .note-editor {
        width:96% !important;
    }*/
}

@media (min-width:992px) {

    /* No forzar anchos fijos: el detalle debe ajustar a la imagen */
    #detalle-foto .modal-dialog-detalle-sin-comentarios {
        width: fit-content;
        max-width: calc(100vw - 16px);
    }
}


.comentar-detalle button {
    padding: 2px 5px !important;
    font-size: 12px;
}

.comentar-detalle img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.comentar-detalle input {
    background-color: #A8A8A8;
    border-radius: 7%;
    height: 27px;
}

.like-detalle-foto {
    cursor: pointer;
    width: 35px;
    height: 35px;
    position: absolute;
    top: -5px !important;
    right: 15px !important;
}

.like-detalle-foto:hover {
    opacity: 0.7;
}

.info-nlikes-detalle {
    position: absolute;
    top: 1px;
    right: 28px;
    color: #fff;
    cursor: pointer;
}

.info-nlikes-detalle-10 {
    position: absolute;
    top: 1px;
    right: 28px;
    color: #fff;
    cursor: pointer;
}

.double-arrow {
    font-size: 27px;
    cursor: pointer;
    color: #A8A8A8;
}

.bloque-comentarios-concursos .fa-trash {
    color: #A8A8A8;
    cursor: pointer;
}

.container-detalle textarea {
    color: #A8A8A8;
}

.ico-borrar-concurso {
    position: absolute;
    top: 40px;
    right: 15px;
    color: #A8A8A8 !important;
    cursor: pointer;
}

.swal2-popup {
    position: fixed;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grid {
    grid-template-columns: repeat(4, 1fr);
    /* Muestra 4 elementos por fila */
}

/* Estilo para pantallas más pequeñas, como dispositivos móviles */
@media screen and (max-width: 767px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        /* Muestra 2 elementos por fila en dispositivos móviles */
    }
}

/* Estilo específico para navegadores basados en WebKit, como Chrome y Safari */
.bloque-comentarios-concursos::-webkit-scrollbar {
    width: 4px !important;
    /* Ancho de la barra de desplazamiento */
}

.bloque-comentarios-concursos::-webkit-scrollbar-thumb {
    background-color: transparent !important;
    /* Color transparente por defecto */
}

.bloque-comentarios-concursos:hover::-webkit-scrollbar-thumb {
    background-color: #888 !important;
    /* Color del "pulgón" de la barra de desplazamiento al pasar el ratón sobre ella */
}

/* Estilo específico para navegadores Firefox */
.bloque-comentarios-concursos {
    scrollbar-width: thin !important;
    /* Establece el grosor de la barra de desplazamiento en Firefox */
    overflow-y: scroll !important;
    /* Muestra la barra de desplazamiento siempre, pero será invisible por defecto */
    overflow-x: hidden !important;
    /* Oculta la barra de desplazamiento horizontal */
    min-height: 250px;
}

.bloque-comentarios-concursos::-moz-scrollbar-thumb {
    background-color: transparent !important;
    /* Color transparente por defecto en Firefox */
}

.bloque-comentarios-concursos:hover::-moz-scrollbar-thumb {
    background-color: #888 !important;
    /* Color del "pulgón" de la barra de desplazamiento en Firefox al pasar el ratón sobre ella */
}

/* End fotografias */

/* Otros estilos personalizados grupos */

.multiselect-container.dropdown-menu {
    height: 300px;
    overflow: auto;
}

/* end grupos */


/*  TINDER */
.img-productos-tinder {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    object-fit: cover;
    margin-top: -10px;
}

.img-listado-complementos {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    object-fit: cover;
    margin-top: -5px;
}

/* END TINDER */


/* MAQUETACIÓN TINDER */

#ib-header.mobile-navigation.ib-navmenu-oncanvas .mobile-nav .ib-navmenu {
    right: 0px;
    z-index: 999999;
}

.container-carrousel {
    background-color: transparent !important;
}

.fondo-carrousel-complementos {
    background-color: transparent !important;
    /*margin-top:20px;*/
}

.mensaje-final {
    position: absolute !important;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
}

@media (max-width:768px) {
    #tiempo_restante {
        font-size: 18px;
    }
}

@media (min-width: 351px) and (max-width: 767px) {
    .fondo-relacionar {
        background-image: url('/im/tinder/fondo-relacionar-movil.png');
        background-size: auto 100%;
        /* Cover horizontalmente, contain verticalmente */
        background-position: center center;
        /* Opcional: centrar la imagen */
        background-repeat: no-repeat;
    }
}

@media (max-width:350px) {
    .fondo-relacionar-mini {
        background-image: url('/im/tinder/fondo-relacionar-movil.png');
        background-size: auto 100%;
        /* Cover horizontalmente, contain verticalmente */
        background-position: center center;
        /* Opcional: centrar la imagen */
        background-repeat: no-repeat;
    }
}

@media (min-width: 768px) {
    .fondo-relacionar-tablet {
        background-image: url('/im/tinder/fondo-relacionar-tablet.png');
        background-size: auto 100%;
        /* Cover horizontalmente, contain verticalmente */
        background-position: center center;
        /* Opcional: centrar la imagen */
        background-repeat: no-repeat;
    }

    .btn-respuesta {
        margin-bottom: 50px;
    }
}

@media (min-width:768px) {
    .slick-carousel-principal {
        margin-left: -22px !important;
    }

    .container-carrousel-complementos {
        margin-left: -13px !important;
    }

    .botonera {
        margin-left: 0 !important;
    }

    .slick-next {
        right: 45px !important;
        z-index: 999;
    }

    .slick-list {
        margin-top: 12px !important;
    }

    .slick-prev {
        left: 67px !important;
    }
}

/*@media(max-width:375px) {*/
.botonera {
    margin-top: -20px !important;
}

/*}*/

.fondo-match-principal {
    background-image: url('/App_Themes/leroy_merlin/im/tinder/fondo-match-center.png');
    background-size: cover;
    background-position: center;
}

.fondo-bottom {
    /*background-image: url('/App_Themes/leroy_merlin/im/tinder/fondo-match-bottom.png');
    height: 70px;
    margin-top: 20px;
    background-size: cover;*/
}

.container-carrousel {
    /*border: 1px solid #cccccc;
            border-radius: 1%;*/
    height: 255px;
}

/*.container-carrousel-complementos {
            border: 1px solid #cccccc;
            border-bottom: none;
            border-radius: 1%;
        }*/

.img-producto {
    height: 200px !important;
    /*max-width: 450px !important;*/
    width: 100%;
    object-fit: contain;
    margin-bottom: 60px;
    padding-bottom: 30px;
    padding-top: 30px;
}

.seccion-slider {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-bottom: 65px;
}

.seccion-slider img {
    object-fit: contain !important;
    height: 250px !important;
    width: 100%;
}

@media (max-width:710px) {
    .seccion-slider img {
        height: 125px !important;
    }
}

.producto {
    border: 1px solid #cccccc;
    border-radius: 1%;
}

a:focus-visible {
    border: 2px solid var(--color-principal) !important;
}

.slick-next {
    right: 15px;
    z-index: 999;
}

.slick-prev {
    left: 0;
    z-index: 999;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'slick';
    font-size: 34px;
    color: var(--color-principal);
    z-index: 999;
}

.img:focus-visible {
    border: 3px solid var(--color-principal);
}

.slick-slide:focus-within {
    outline: none !important
}

.slick-slide:focus {
    outline: none !important;
}

.slick-slide:focus {
    outline: none !important;
}

.mobile .titulo {
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: 500;
    max-width: 80%;
}

.botonera {
    padding-top: 20px;
    padding-bottom: 20px;
    /*border: 1px solid #CCCCCC;
            border-radius: 1%;
            border-top: none;*/
}

.ico-tinder-accion {
    width: 65px;
    cursor: pointer;
}

@media (max-width:767px) {
    .ico-tinder-accion {
        width: 50px;
    }
}

.slick-current.slick-center>a {
    border: 2px solid var(--color-principal);
    border-radius: 3%;
}

.slick-slide:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.disabled-image {
    opacity: 0.3;
    filter: grayscale(100%);
    pointer-events: none !important;
    cursor: default !important;
    display: none;
}

.cursor-default {
    cursor: default !important;
}

.seccion-mobile {
    padding-left: 15px;
    padding-right: 15px;
}

.modal-content {
    /*top: 100px;*/
}

.modal-match {
    border-radius: 5%;
}

.mobile .titulo {
    max-width: 100% !important;
}

#tiempo_restante {
    font-weight: 700 !important;
}

.fondo-logo {
    width: 267px;
    height: 241px;
    position: absolute;
    z-index: 99999999;
}

.fondo-carrousel-complementos {
    min-height: 400px;
}

@media (max-width:767px) {
    .fondo-carrousel-complementos {
        margin-top: -40px;
    }
}

/*.slick-next {
    display:none !important;
}
.slick-prev {
    display:none !important;
}*/

@media (max-width:767px) {
    .btn-respuesta {
        padding-bottom: 15px !important;
    }

    .fondo-logo {
        width: 174px;
        height: 146px;
        position: absolute;
        z-index: 99999999;
        left: -51px;
        top: -30px;
    }
}

@media (min-width:768px) {
    .fondo-logo {
        top: 170px;
        left: -75px;
    }
}

@media (min-width:992px) {
    .mobile .caja-titulo {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 45% !important;
    }

    .botonera {
        margin-left: 55px;
    }

    .slick-carousel-principal {
        margin-left: 75px;
    }

    .container-carrousel-complementos {
        margin-left: 55px;
    }

    .img-producto {
        margin-left: 20px;
    }

    .img-complementos {
        margin-left: 10px;
    }

    .fondo-logo {
        position: absolute;
        bottom: -135px;
        left: -50px;
    }
}

@media (min-width:1200px) {
    .fondo-logo {
        bottom: -135px;
        left: 0px;
    }
}

#tinder {
    margin-top: 30px;
}

/*@media (min-width:992px) {*/
.match-principal {
    bottom: 36px !important;
}

/*}*/

/* END MAQUETACIÓN TINDER */

/* AGENDA*/

.agenda-noticia {
    background-color: red !important;
    color: white !important;
    border: none !important;
}

.agenda-evento {
    background-color: #ffda9e !important;
    color: black !important;
    border: none !important;
}

.agenda-evento span {
    color: black !important;
}

.agenda-webinar {
    background-color: #b2e2f2 !important;
    color: black !important;
    border: none !important;
}

.agenda-webinar span {
    color: black !important;
}

.agenda-concurso {
    background-color: yellow !important;
    color: white !important;
    border: none !important;
}

.agenda-concurso span {
    color: black !important;
}

.agenda-landing {
    background-color: #c7f6d4 !important;
    color: black !important;
    border: none !important;
}

.agenda-landing span {
    color: black !important;
}

.agenda-quiz {
    background-color: #fabfb7 !important;
    color: black !important;
    border: none !important;
}

.agenda-quiz span {
    color: black !important;
}

.agenda-contenido {
    background-color: #fdf9c4 !important;
    color: black !important;
    border: none !important;
}

.agenda-contenido span {
    color: black !important;
}

.agenda-relacionar {
    background-color: #c030f2 !important;
    color: white !important;
    border: none !important;
}

.agenda-wefitter {
    background-color: #48bf09 !important;
    color: white !important;
    border: none !important;
}

.agenda-match {
    background-color: #43a9ed !important;
    color: white !important;
    border: none !important;
}

.agenda-postit {
    background-color: #f2d872 !important;
    color: white !important;
    border: none !important;
}

.agenda-adviento {
    background-color: #F2DEDE !important;
    color: black !important;
    border: none !important;
}

.agenda-adviento span {
    color: black !important;
}

.agenda-comic {
    background-color: #faadd0 !important;
    color: white !important;
    border: none !important;
}

.agenda-quiniela {
    background-color: #adf8fa !important;
    color: black !important;
    border: none !important;
}

.agenda-quiniela span {
    color: black !important;
}

.agenda-slider {
    background-color: #9bd3ae !important;
    color: black !important;
    border: none !important;
}

.agenda-slider span {
    color: black !important;
}

.agenda-manual {
    background-color: #c5c6c8 !important;
    color: black !important;
    border: none !important;
}

.agenda-manual span {
    color: black !important;
}

.agenda-popup {
    background-color: #dbc19d !important;
    color: black !important;
    border: none !important;
}

.agenda-popup span {
    color: black !important;
}


.agenda-metas {
    background-color: #dfc4f5 !important;
    color: black !important;
    border: none !important;
}

.agenda-metas span {
    color: black !important;
}


.fc-content {
    text-overflow: ellipsis !important;
    color: #000 !important;
}

.img-listado-memory-imagenes {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

@media (min-width:992px) {
    .cta-memory {
        float: right !important;
    }

    .cta-memory-top {
        margin-top: -10px !important;
    }
}

@media (max-width:991px) {
    .cta-memory {
        float: left !important;
    }

    .cta-memory-top {
        margin-top: 25px !important;
    }
}

.btn-secondary {
    margin-top: 0 !important;
}

@media(min-width:550px) {
    .swal2-popup {
        min-width: 500px;
    }
}

.swal2-container {
    z-index: 10000000 !important;
}


.gestor-cajetin-opcion {
    background-color: var(--color-principal);
    /* padding: 27px 5px; */
    border-radius: 5px !important;
    height: 90px !important;
    padding: 11px 0px !important;
}


/* TOQUE */
.borde-principal {
    border: 4px solid var(--color-principal);
    border-radius: 23px;
    opacity: 1;
}

/* END TOQUE */


/* Comentarios */
.comentario-padre {
    padding-bottom: 10px;
}



/* End comentarios */


.tablinks {
    overflow-x: auto;
}

.caja-height {
    height: 570px;
}

.swal2-html-container {
    height: auto;
}

.hora-alta {
    margin-top: -35px;
}

/* EDITOR GRAPES JS */
.gjs-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 10px;
}

.gjs-cell {
    min-height: 75px;
    flex-grow: 1;
    flex-basis: 100%;
}

@media (max-width: 768px) {
    .gjs-row {
        flex-wrap: wrap;
    }
}

.gjs-pn-btn {
    font-size: 18px !important;
}

.gjs-pn-commands {
    height: 45px;
}

.cv-canvas-bg {
    display: block !important;
    height: 120vh;
}

.fa-redo {
    font-size: 16px !important;
    margin-top: -3px;
}

.gjs-block-label {
    font-size: 1em !important;
}

.gjs-device-label {
    font-size: 2em;
}

.gjs-title {
    font-size: 2em !important;
}

.gjs-layer-name {
    font-size: 1.5em !important;
}

.gjs-clm-header-label {
    font-size: 2em !important;
}

.gjs-clm-sels-info {
    font-size: 1.7em !important;
}

.gjs-sm-sector-title {
    font-size: 1.6em !important;
}

.gjs-sm-properties {
    font-size: 1.3em !important;
}

.gjs-clm-sel {
    font-size: 1em !important;
}

.gjs-trt-header {
    font-size: 1.6em !important;
}

.gjs-input-holder {
    font-size: 1.3em !important;
}

.gjs-field-color {
    font-size: 1.3em !important;
}

.gjs-radio-items {
    font-size: 1.1em;
}

.gjs-traits-label {
    font-size: 1.6em !important;
}

.gjs-trt-trait--text {
    font-size: 1.4em !important;
}

.m-l-50 {
    margin-left: 50px !important;
}

/* END EDITOR GRAPESJS */


.tag-container {
    border-radius: 5px;
    margin: 5px;
    background-color: #efefef;
    font-size: 14px;
    padding: 5px;
}

/* MANAGER EVENTOS */

.estado-publicado {
    background-color: var(--color-principal);
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    float: right;
}

.estado-borrador {
    background-color: #DE3733;
    padding: 5px;
    border-radius: 10px;
    float: right;
    color: #fff;
}

/* FIN EDITOR EVENTOS */

/* TOQUE */
.btn-toque {
    background-color: var(--color-principal) !important;
    color: #fff;
    border-radius: 5px !important;
    padding: 6px 85px !important;
    font-size: 16px !important;
}

/* END TOQUE */
.note-editable {
    color: inherit !important;
}


/* MANAGER INFORMES */

.fecha-encuestas {
    position: absolute;
    top: -77px;
    right: 10px;
    width: 150px !important;
}

/* FIN EDITOR INFORMES */

.backbutton {
    margin-top: 20px !important;
    min-width: 50px;
}



/* AGENDA USUARIOS (iframe) */

#iframeAgendaUsuarios {
    width: 100%;
}

@media(min-width:768px) {
    #iframeAgendaUsuarios {
        height: 800px;
    }
}

@media(max-width:767px) {
    #iframeAgendaUsuarios {
        height: 680px;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .bloque-principal {
        border: none;
    }
}

/* END AGENDA USUARIOS */

/* VARIOS */

.validate-error {
    background-color: #F7E4E8 !important;
}

@media (min-width:768px) {
    .select-img {
        height: 150px;
        width: 100% !important;
        object-fit: cover !important;
    }
}


/* MODAL TORNEOS */
@media(min-width:992px) {
    .modal-torneos {
        min-width: 800px;
    }
}

/* END MODAL */


div.SelOrigen {
    background-color: #f0fad7;
}

div.SelDestino {
    background-color: antiquewhite;
}

.fc-view-container {
    height: 80vh;
    overflow: auto;
}


.fc-day-header.fc-widget-header.fc-mon.fc-today span {
    background-color: var(--color-principal);
    border-radius: 5%;
    color: #fff;
    padding: 1px 5%;
}

.fc-today {
    background-color: rgba(255, 220, 40, .15);
}

/* EVENTOS SOLIDARIOS */
.clonar-evento {
    position: absolute;
    top: 100px;
    left: 0;
    color: #fff;
    background-color: var(--color-principal) !important;
    padding: 10px 15px;
    opacity: 0.8;
}

/* END EVENTOS SOLIDARIOS */

/* EDITOR QUILLJS */

.ql-container {
    min-height: 190px !important;
}

/* FIN EDITOR QUILLJS */

@media (min-width:768px) {
    .dialog-subasta {
        min-width: 750px;
    }
}

@media (min-width:992px) {
    .dialog-subasta {
        min-width: 850px;
    }
}

.dialog-content {
    border-radius: 10px !important;
}

.close-detalle-subasta,
.close-confirmacion {
    position: absolute;
    top: 10px !important;
    right: 15px;
    z-index: 99999999999;
    font-size: 45px !important;
    top: -3px;
    color: var(--color-principal) !important;
    opacity: 1 !important;
    border: none;
}

.btn-comprar {
    padding: 10px 50px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
}

.img-detalle-subasta {
    width: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.img-detalle-subasta {
    border-radius: 5px !important;
}

.dialog-body {
    padding: 0 !important;
}

.dialog-content {
    top: auto !important;
}

.comentarios-subasta {
    border-radius: 10px;
    border: 1px solid #EEDEDD;
}

.avatar-subasta {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.input-enviar-mensaje {
    border: 1px solid #EEDEDD;
    border-radius: 10px;
    padding: 10px;
}

.input-enviar-mensaje:focus {
    border: 1px solid #EEDEDD !important;
    box-shadow: none !important;
}

.bloque-comentarios-subasta {
    height: 112px;
    overflow: auto;
}

.bloque-comentarios-subasta {
    overflow-y: auto;
    max-height: 300px;
    scrollbar-width: none;
}

.info-detalle {
    overflow-y: auto;
    max-height: 400px;
    scrollbar-width: none;
}

.bloque-comentarios-subasta,
.info-detalle {
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox: ocultar por defecto */
}

/* WebKit - Ocultar por defecto */
.bloque-comentarios-subasta::-webkit-scrollbar,
.info-detalle::-webkit-scrollbar {
    width: 0;
    transition: width 0.3s ease;
}

/* WebKit - Mostrar barra al hacer hover */
.bloque-comentarios-subasta:hover::-webkit-scrollbar,
.info-detalle:hover::-webkit-scrollbar {
    width: 6px;
}

.bloque-comentarios-subasta::-webkit-scrollbar-track,
.info-detalle::-webkit-scrollbar-track {
    background: transparent;
}

.bloque-comentarios-subasta::-webkit-scrollbar-thumb,
.info-detalle::-webkit-scrollbar-thumb {
    background-color: var(--color-principal);
    border-radius: 4px;
}

/* Firefox - Mostrar barra al hacer hover */
.bloque-comentarios-subasta:hover,
.info-detalle:hover {
    scrollbar-width: thin;
    scrollbar-color: var(--color-principal) transparent;
}


.subasta-envio-mensaje {
    font-size: 25px !important;
    margin-top: 25px !important;
    margin-left: -10px !important;
    cursor: pointer !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    /* top: 16px !important; */
    top: 34%;
    width: 20px;
    height: 89px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 24px;
}

.tag-price {
    width: 100px;
    border-radius: 10px;
}

.sin-comentarios-subasta {
    position: absolute !important;
    top: 90px;
    left: 0px;
}

/* Estilos exclusivos del modal de cancelación */

.modal-cancelacion-content {
    border-radius: 10px !important;
    overflow: hidden;
    top: 250px !important;
}

.modal-cancelacion-body {
    padding: 30px 20px !important;
}

.modal-cancelacion-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.modal-cancelacion-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.modal-cancelacion-text {
    margin-bottom: 20px;
}

.modal-cancelacion-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.modal-cancelacion-buttons .btn {
    min-width: 100px;
}

.btn-confirmar {
    border-radius: 4px !important;
}

.btn-confirmar-cancelacion {
    height: 33px !important;
}

.d-vendido {
    margin-top: -24px;
}

.vendido {
    font-family: 'Roboto', 'RobotoLight', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #009AD8;
    padding: 12px 0;
    margin: 10px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-top: 3px solid #009AD8;
    border-bottom: 3px solid #009AD8;
    border-left: none;
    border-right: none;
    background-color: rgba(0, 154, 216, 0.08);
    position: relative;
}

.vendido:before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background-color: #009AD8;
}

.vendido:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background-color: #009AD8;
}

.event-list {
    background: white;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.event-list li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.event-list li:last-child {
    border-bottom: none;
}

.pagination-wrapper {
    margin-top: 20px;
    text-align: center;
}

.btn-cancelar:hover {
    color: var(--color-principal) !important;
    opacity: 0.8 !important;
    text-decoration: underline !important;
}

@media (max-width:767px) {
    .info-paginacion {
        margin-left: 5px;
    }

    .caja-subasta {
        height: 575px;
    }

    .pag-anterior,
    .pag-siguiente {
        font-size: 16px;
    }
}

@media (min-width:768px) {
    .info-paginacion {
        margin-left: -10px;
    }

    .caja-subasta {
        height: 570px !important;
    }

    .pag-anterior,
    .pag-siguiente {
        font-size: 21px;
    }
}

@media (min-width:992px) {
    .info-paginacion {
        margin-left: -10px;
    }

    .caja-subasta {
        height: 600px !important;
    }

    .pag-anterior,
    .pag-siguiente {
        font-size: 21px;
    }
}

@media (min-width:1200px) {
    .info-paginacion {
        margin-left: -10px;
    }

    .caja-subasta {
        height: 570px !important;
    }

    .pag-anterior,
    .pag-siguiente {
        font-size: 21px;
    }
}

.pag-anterior {
    float: left;
}

.pag-siguiente {
    float: right;
}

.img-listado-subasta {
    border-radius: 5px;
}

/* Overlay con fondo oscuro */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Fondo oscuro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none !important;
    /* Oculto por defecto */
}

/* Spinner de carga */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



/* EDITOR SUBASTA */

/* BUTTONBACK */

#back-left {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    left: 5px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    border-radius: 10px;
    /* Rounded corners */
    opacity: 0.8;
}

#back-left:hover {
    opacity: 1;
}

#back-left a {
    width: 70px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

#back-left span {
    color: white;
    text-align: center;
    font-size: 50px;
    width: 70px;
    height: 70px;
    display: block;
    margin-bottom: 7px;
    /* background: #ddd url(../im/layout/top4.jpg) no-repeat center center; */
    background: #bbb no-repeat center center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

#back-left span i {
    top: 7px;
    left: -2px;
}

.backbutton {
    margin-top: 20px !important;
}

#back-top {
    right: 5px !important;
}

/* END BUTTONBACK */


/* PLAY BUTTON VIMEO */

.play-button-vimeo {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pause-icon-vimeo {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* END PLAY BUTTON VIMEO */


.swal2-styled {
    background-color: var(--color-principal) !important;
}

.ui-dialog .ui-dialog-titlebar-close::before {
    content: "\00d7";
}

#cat-widget {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    cursor: pointer;
    transition: opacity 0.5s ease;
}

#cat-widget img {
    width: 150px;
    height: 150px;
    opacity: 1;
    border-radius: 20px;
}

#cat-popup {
    position: fixed;
    z-index: 10000;
    display: none;
    animation: fadeIn 0.4s ease;
    bottom: calc(50vh - 150px);
    right: calc(50vw - 150px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

#cat-popup img {
    width: 300px;
}

#cat-popup span {
    display: block;
    text-align: center;
    font-size: 24px;
    padding: 10px;
    width: 300px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mapa-emocional-section {
    padding: 40px 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
}

.page-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    color: var(--color-principal);
    margin-bottom: 10px;
}

.page-subtitle {
    font-size: 18px;
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.section-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: var(--color-principal);
    margin-bottom: 15px;
}

.section-description {
    font-size: 16px;
    text-align: center;
    color: #666;
    margin-bottom: 20px;
}

.cuadrantes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.cuadrante-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 3px solid transparent;
    min-height: 220px;
    display: flex;
    align-items: center;
}

.cuadrante-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.cuadrante-card.selected {
    border-color: var(--color-principal);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

.cuadrante-rojo {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
}

.cuadrante-amarillo {
    background: linear-gradient(135deg, #ffd93d 0%, #ffb700 100%);
    color: #333;
}

.cuadrante-azul {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.cuadrante-verde {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #333;
}

.cuadrante-content {
    width: 100%;
}

.cuadrante-nombre {
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.cuadrante-descripcion {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    opacity: 0.9;
}

.voto-resumen {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.voto-resumen h4 {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-principal);
}

.voto-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.voto-info .badge {
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
}

.badge-rojo {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
}

.badge-amarillo {
    background: linear-gradient(135deg, #ffd93d 0%, #ffb700 100%);
    color: #333;
}

.badge-azul {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.badge-verde {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #333;
}

.voto-info .arrow {
    font-size: 24px;
    color: var(--color-principal);
    font-weight: bold;
}

.recomendaciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.recomendacion-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.recomendacion-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.recomendacion-titulo {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-principal);
    margin-bottom: 10px;
}

.recomendacion-descripcion {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 15px;
}

.recomendacion-tipo {
    display: inline-block;
    background: #f0f0f0;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 12px;
    color: #666;
    text-transform: capitalize;
}

@media (max-width: 992px) {
    .cuadrantes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 32px;
    }

    .section-title {
        font-size: 24px;
    }

    .cuadrantes-grid {
        grid-template-columns: 1fr;
    }

    .recomendaciones-grid {
        grid-template-columns: 1fr;
    }

    .voto-info {
        flex-direction: column;
    }
}

.mapa-emocional-section {
    padding: 40px 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
}

.page-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    color: var(--color-principal);
    margin-bottom: 10px;
}

.page-subtitle {
    font-size: 18px;
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.section-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: var(--color-principal);
    margin-bottom: 15px;
}

.section-description {
    font-size: 16px;
    text-align: center;
    color: #666;
    margin-bottom: 20px;
}

.cuadrantes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.cuadrante-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 3px solid transparent;
    min-height: 220px;
    display: flex;
    align-items: center;
}

.cuadrante-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.cuadrante-card.selected {
    border-color: var(--color-principal);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

.cuadrante-rojo {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
}

.cuadrante-amarillo {
    background: linear-gradient(135deg, #ffd93d 0%, #ffb700 100%);
    color: #333;
}

.cuadrante-azul {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.cuadrante-verde {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #333;
}

.cuadrante-content {
    width: 100%;
}

.cuadrante-nombre {
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.cuadrante-descripcion {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    opacity: 0.9;
}

.voto-resumen {
    background: white;
    border-radius: 12px;
    padding: 35px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
    border: 1px solid #e8e8e8;
}

.voto-resumen h4 {
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #333;
    text-transform: none;
    letter-spacing: 0.3px;
}

.voto-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.voto-info .badge {
    font-size: 16px;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border: none;
}

.badge-rojo {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
}

.badge-amarillo {
    background: linear-gradient(135deg, #ffd93d 0%, #ffb700 100%);
    color: #333;
}

.badge-azul {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.badge-verde {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #333;
}

.voto-info .arrow {
    font-size: 28px;
    color: #999;
    font-weight: 300;
    margin: 0 5px;
}

.recomendaciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.recomendacion-card {
    background: white;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
}

.recomendacion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: var(--color-principal);
}

.recomendacion-titulo {
    font-family: 'Quicksand', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.4;
}

.recomendacion-descripcion {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 18px;
    flex-grow: 1;
}

.recomendacion-tipo {
    display: inline-block;
    background: #f5f5f5;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    color: #666;
    text-transform: capitalize;
    font-weight: 500;
    margin-bottom: 12px;
}

/* Estilos profesionales para botones */
.btn-mapa-primary {
    background: linear-gradient(135deg, var(--color-principal) 0%, var(--color-secundario, #667eea) 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-transform: none;
    letter-spacing: 0.3px;
}

.btn-mapa-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: white;
}

.btn-mapa-primary:active {
    transform: translateY(0);
}

.btn-mapa-secondary {
    background: white;
    color: var(--color-principal);
    border: 2px solid var(--color-principal);
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.3px;
}

.btn-mapa-secondary:hover {
    background: var(--color-principal);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-mapa-link {
    background: transparent;
    color: #666;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    text-transform: none;
}

.btn-mapa-link:hover {
    color: var(--color-principal);
    text-decoration: none;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
}

.btn-mapa-small {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    background: var(--color-principal);
    color: white;
    border: none;
    transition: all 0.3s ease;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-mapa-small:hover {
    background: var(--color-secundario, #667eea);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.btn-mapa-small::after {
    content: '→';
    transition: transform 0.2s ease;
}

.btn-mapa-small:hover::after {
    transform: translateX(3px);
}

@media (max-width: 992px) {
    .cuadrantes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 32px;
    }

    .section-title {
        font-size: 24px;
    }

    .cuadrantes-grid {
        grid-template-columns: 1fr;
    }

    .recomendaciones-grid {
        grid-template-columns: 1fr;
    }

    .voto-info {
        flex-direction: column;
    }
}

/* ============================================
   ESTILOS PARA REDISEÑO
   ============================================ */

/* SECCIÓN 1: PRESENTACIÓN */
.presentacion-section {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
}

.presentacion-titulo {
    color: var(--color-principal);
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}

.presentacion-texto {
    padding: 20px 0;
}

.presentacion-subtitulo {
    color: var(--color-principal);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

.presentacion-descripcion {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}

.presentacion-imagen {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* SECCIÓN 2: CÓMO TE SIENTES (4 círculos pequeños con iconos) */
.seccion-como-te-sientes,
.seccion-como-quieres,
.seccion-grafica,
.seccion-recomendaciones {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
}

.seccion-titulo {
    color: var(--color-principal);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
}

.seccion-descripcion {
    color: #666;
    font-size: 16px;
    text-align: center;
    margin-bottom: 30px;
}

.cuadrantes-emociones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

.cuadrante-emocion {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 20px;
    border-radius: 12px;
    background: white;
}

.cuadrante-emocion:hover {
    transform: translateY(-5px);
}

.cuadrante-emocion.selected {
    background: #E3F2FD;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
}

.emocion-circulo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.emocion-circulo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.emocion-nombre {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.emocion-descripcion {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

/* SECCIÓN 3: CÓMO TE GUSTARÍA SENTIRTE (4 círculos grandes con fotos) */
.cuadrantes-emociones-deseado {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 0 auto;
    max-width: 1000px;
}

.cuadrante-emocion-grande {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 30px 20px;
    border-radius: 16px;
    background: white;
    border: 3px solid transparent;
}

.cuadrante-emocion-grande:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cuadrante-emocion-grande.selected {
    background: #E3F2FD;
    border-color: #00BCD4;
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.4);
}

.emocion-circulo-grande {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* INFO BOX */
.info-box {
    background: #FF4081;
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    margin-top: 30px;
}

.info-box p {
    margin: 0;
}

/* SECCIÓN 4: GRÃFICA */
.grafica-container {
    background: white;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#graficaMapaEmocional {
    max-width: 100%;
    height: auto !important;
}

/* SECCIÓN 5: RECOMENDACIONES (3 por fila) */
.recomendaciones-grid-rediseno {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.recomendacion-card-rediseno {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recomendacion-card-rediseno:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.recomendacion-imagen {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px;
}

.recomendacion-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    border: none;
    transition: transform 0.3s ease;
}

.recomendacion-card-rediseno:hover .recomendacion-imagen img {
    transform: scale(1.05);
}

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

.recomendacion-texto {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
}

.btn-saber-mas {
    display: inline-block;
    background: var(--color-principal);
    color: white !important;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-saber-mas:hover {
    background: var(--color-principal);
    filter: brightness(0.9);
    color: white !important;
    text-decoration: none !important;
    transform: scale(1.05);
}

/* BOTONES REDISEÑO */
.btn-primary-mapa {
    background: var(--color-principal);
    color: white;
    border: none;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary-mapa:hover {
    background: var(--color-principal);
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    color: white;
}

.btn-secondary-mapa {
    background: #E0E0E0;
    color: #333;
    border: none;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary-mapa:hover {
    background: #BDBDBD;
}

.btn-link-mapa {
    background: transparent;
    color: #00BCD4;
    border: none;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.btn-link-mapa:hover {
    color: #0097A7;
}

/* UTILIDADES */
.m-t-40 {
    margin-top: 40px;
}

.m-t-60 {
    margin-top: 60px;
}

.m-r-10 {
    margin-right: 10px;
}

.text-center {
    text-align: center;
}

/* RESPONSIVE REDISEÑO */
@media (max-width: 992px) {

    .cuadrantes-emociones,
    .cuadrantes-emociones-deseado {
        grid-template-columns: repeat(2, 1fr);
    }

    .recomendaciones-grid-rediseno {
        grid-template-columns: repeat(2, 1fr);
    }

    .presentacion-titulo {
        font-size: 28px;
    }

    .seccion-titulo {
        font-size: 24px;
    }
}

@media (max-width: 576px) {

    .cuadrantes-emociones,
    .cuadrantes-emociones-deseado {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .recomendaciones-grid-rediseno {
        grid-template-columns: 1fr;
    }

    .presentacion-section,
    .seccion-como-te-sientes,
    .seccion-como-quieres,
    .seccion-grafica,
    .seccion-recomendaciones {
        padding: 20px;
    }

    .presentacion-titulo {
        font-size: 24px;
    }

    .seccion-titulo {
        font-size: 20px;
    }

    .emocion-circulo {
        width: 100px;
        height: 100px;
    }

    .emocion-circulo img {
        width: 100%;
        height: 100%;
    }

    .emocion-circulo-grande {
        width: 120px;
        height: 120px;
    }

    .btn-primary-mapa,
    .btn-secondary-mapa {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* ============================================
   TOOLTIP BOCADILLO PARA CUADRANTES
   ============================================ */
.cuadrantes-emociones-wrapper {
    position: relative;
}

.tooltip-cuadrante {
    position: relative;
    margin-top: 30px;
    padding: 25px 30px;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.tooltip-cuadrante.visible {
    opacity: 1;
    visibility: visible;
}

/* Flecha del tooltip */
.tooltip-cuadrante::before {
    content: '';
    position: absolute;
    top: -15px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid currentColor;
    transition: left 0.3s ease;
}

/* Colores del tooltip por cuadrante */
.tooltip-cuadrante.tooltip-rojo {
    background-color: #D32F2F;
}
.tooltip-cuadrante.tooltip-rojo::before {
    border-bottom-color: #D32F2F;
}

.tooltip-cuadrante.tooltip-azul {
    background-color: #0097A7;
}
.tooltip-cuadrante.tooltip-azul::before {
    border-bottom-color: #0097A7;
}

.tooltip-cuadrante.tooltip-amarillo {
    background-color: #F9A825;
    color: #333;
}
.tooltip-cuadrante.tooltip-amarillo::before {
    border-bottom-color: #F9A825;
}

.tooltip-cuadrante.tooltip-verde {
    background-color: #00897B;
}
.tooltip-cuadrante.tooltip-verde::before {
    border-bottom-color: #00897B;
}

/* Posición de la flecha según el cuadrante */
.tooltip-cuadrante[data-position="0"]::before {
    left: 12.5%;
    transform: translateX(-50%);
}
.tooltip-cuadrante[data-position="1"]::before {
    left: 37.5%;
    transform: translateX(-50%);
}
.tooltip-cuadrante[data-position="2"]::before {
    left: 62.5%;
    transform: translateX(-50%);
}
.tooltip-cuadrante[data-position="3"]::before {
    left: 87.5%;
    transform: translateX(-50%);
}

/* Responsive para tooltip */
@media (max-width: 992px) {
    .tooltip-cuadrante[data-position="0"]::before,
    .tooltip-cuadrante[data-position="2"]::before {
        left: 25%;
    }
    .tooltip-cuadrante[data-position="1"]::before,
    .tooltip-cuadrante[data-position="3"]::before {
        left: 75%;
    }
}

@media (max-width: 576px) {
    .tooltip-cuadrante {
        padding: 20px;
        font-size: 14px;
    }
}

/* Botones bonitos para Volver y Guardar */
.btn-volver-mapa {
    background: transparent;
    color: #666;
    border: 2px solid #ddd;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 15px;
}

.btn-volver-mapa:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #333;
}

.btn-volver-mapa i {
    margin-right: 8px;
}

.btn-guardar-mapa {
    background: var(--color-principal) !important;
    color: white !important;
    border: none !important;
    padding: 14px 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4) !important;
}

.btn-guardar-mapa:hover,
.btn-guardar-mapa:focus,
.btn-guardar-mapa:active {
    background: var(--color-principal) !important;
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    color: white !important;
}

.btn-guardar-mapa i {
    margin-right: 8px;
}

@media (max-width: 576px) {
    .btn-volver-mapa,
    .btn-guardar-mapa {
        display: block;
        width: 100%;
        margin: 10px 0;
    }
    
    .btn-volver-mapa {
        margin-right: 0;
    }
}

/* Ocultar nombre por defecto en paso 1, mostrar solo al hover/click */
.emocion-nombre-hover {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.emocion-nombre-hover.visible {
    opacity: 1;
    visibility: visible;
    height: auto;
    margin-top: 15px;
}

/* ============================================
   MENSAJE SIN CAMPAÑA ACTIVA
   ============================================ */
.sin-campana-container {
    text-align: center;
    padding: 80px 40px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    border-radius: 20px;
    margin: 60px 0;
}

.sin-campana-icono {
    font-size: 80px;
    color: var(--color-principal);
    margin-bottom: 30px;
    opacity: 0.7;
}

.sin-campana-icono i {
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.sin-campana-titulo {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.sin-campana-descripcion {
    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 576px) {
    .sin-campana-container {
        padding: 50px 20px;
        margin: 30px 0;
    }
    
    .sin-campana-icono {
        font-size: 60px;
    }
    
    .sin-campana-titulo {
        font-size: 22px;
    }
    
    .sin-campana-descripcion {
        font-size: 16px;
    }
}

.input-symbol-euro {
    position: relative;
}

    .input-symbol-euro input {
        padding-left: 18px;
    }

    .input-symbol-euro:before {
        position: absolute;
        bottom: 1px;
        content: "€";
        right: 5px;
        float: right;
        font-size: 14px;
        padding: 6px 12px;
        color: #555555;
    }