/* Comunidad – estilos base */
#comunidad .text-gradient-gold {
   background: linear-gradient(135deg, #FFD700 0%, #FDB931 25%, #FF8C00 50%, #DAA520 75%, #FFD700 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Hero: capa translúcida profesional */
#comunidad .hero-surface {
   width: 100%;
   padding: 1.5rem 1.75rem;
   border-radius: .875rem;
   background: rgba(0, 0, 0, 0.75);
   backdrop-filter: saturate(140%) blur(12px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 215, 0, 0.15);
}

body[data-bs-theme="light"] #comunidad .hero-surface {
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: saturate(140%) blur(12px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
   border: 1px solid rgba(218, 165, 32, 0.25);
}

/* Título dorado con brillo MUY SUTIL en DARK */
#comunidad .title-hero,
#comunidad h1.text-gradient-gold {
   font-weight: 800;
   letter-spacing: 0.5px;
   line-height: 1.2;
   background: linear-gradient(135deg, #FFE57F 0%, #FFD700 20%, #FDB931 40%, #FF8C00 60%, #DAA520 80%, #FFD700 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 3px rgba(255, 215, 0, 0.15));
   -webkit-text-stroke: 0.3px rgba(139, 69, 19, 0.2);
}

/* Título dorado optimizado para LIGHT */
body[data-bs-theme="light"] #comunidad .title-hero,
body[data-bs-theme="light"] #comunidad h1.text-gradient-gold {
   background: linear-gradient(135deg, #B8860B 0%, #DAA520 20%, #CD853F 40%, #B8860B 60%, #8B6914 80%, #6B5416 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
   -webkit-text-stroke: 0.5px rgba(107, 84, 22, 0.3);
}

/* Subtítulo con mejor contraste en DARK */
#comunidad .hero-subtitle {
   margin: 0;
   color: rgba(255, 255, 255, 0.92);
   font-weight: 500;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8),
      0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Subtítulo optimizado para LIGHT */
body[data-bs-theme="light"] #comunidad .hero-subtitle {
   color: rgba(0, 0, 0, 0.85);
   font-weight: 500;
   text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8),
      0 0 4px rgba(255, 255, 255, 0.6);
}

/* Tom Select con tema BS */
#frmComunidad .ts-wrapper.form-select {
   --ts-control-border: var(--bs-border-color)
}

/* Tarjeta de negocio */
.card-negocio .card-img-top img.object-cover,
.card-negocio .card-img-top.object-fit-cover {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.card-negocio .card-footer {
   background: rgba(255, 255, 255, .03);
   border-top: 1px solid var(--bs-border-color);
   padding: .6rem .75rem
}

.card-negocio .btn-icon {
   width: 40px;
   height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: .5rem
}

/* Rubro/carrusel */
.rubro .swiper-wrap {
   padding: 0 42px
}

.rubro .swiper {
   overflow: hidden
}

.rubro .swiper-button-prev,
.rubro .swiper-button-next {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, .06);
   backdrop-filter: saturate(120%) blur(2px);
   border: 1px solid rgba(255, 255, 255, .1);
   color: var(--bs-body-color)
}

.rubro .swiper-button-prev::after,
.rubro .swiper-button-next::after {
   font-size: 16px
}

/* Paginación: íconos centrados */
#paginacionComunidad .pagination .page-link i {
   width: 1.25rem;
   text-align: center
}

/* Responsive */
@media (max-width:576px) {
   .rubro .swiper-wrap {
      padding: 0 12px
   }

   #comunidad .hero-surface {
      padding: 1.25rem 1.5rem;
   }
}

/* Cursor de zoom en los flyers */
.zoomable {
   cursor: zoom-in;
}

/* Título y subtítulo: mejora de legibilidad sobre fondos con patrón */
.comunidad-hero {
   position: relative;
}

.comunidad-hero .hero-overlay {
   display: inline-block;
   padding: .75rem 1rem;
   border-radius: .75rem;
   backdrop-filter: blur(2px);
   background: rgba(0, 0, 0, .45);
}

html[data-bs-theme="light"] .comunidad-hero .hero-overlay {
   background: rgba(255, 255, 255, .55);
}

/* ----- HERO / encabezado de la sección ----- */
.section-comunidad-hero .hero-glass {
   display: block;
   width: 100%;
   padding: 12px 16px;
   border-radius: 18px;
   background: rgba(0, 0, 0, .55);
   border: 1px solid rgba(255, 255, 255, .08);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

[data-bs-theme="light"] .section-comunidad-hero .hero-glass {
   background: rgba(0, 0, 0, .35);
   border-color: rgba(0, 0, 0, .06);
}

/* Dorado brillante (legible) */
.section-comunidad-hero .hero-title {
   font-weight: 800;
   letter-spacing: .2px;
   line-height: 1.1;
   background: linear-gradient(180deg, #FFF3B0 0%, #F2C84B 45%, #B17B0F 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow:
      0 1px 2px rgba(0, 0, 0, .35),
      0 0 18px rgba(242, 200, 75, .28);
}

/* en light, un dorado un poco más "oscuro" para contraste */
[data-bs-theme="light"] .section-comunidad-hero .hero-title {
   background: linear-gradient(180deg, #E5C873 0%, #C7981F 48%, #8D6409 100%);
}

/* Subtítulo ligeramente más claro y legible */
.section-comunidad-hero .hero-subtitle {
   color: rgba(255, 255, 255, .85);
}

[data-bs-theme="light"] .section-comunidad-hero .hero-subtitle {
   color: rgba(255, 255, 255, .9);
}

/* ----- Lightbox: fit to image, sin márgenes extras ----- */
.modal-lightbox .modal-dialog {
   width: fit-content;
   max-width: 95vw;
   margin: auto;
}

.modal-lightbox .modal-body {
   padding: 0;
}

.modal-lightbox img {
   display: block;
   width: auto;
   height: auto;
   max-width: 95vw;
   max-height: 92vh;
   border-radius: .5rem;
}

/* ----- Z-INDEX FIX FOR TOM SELECT DROPDOWNS ----- */
#frmComunidad .ts-wrapper {
   position: relative;
   z-index: 100;
}

#frmComunidad .ts-dropdown {
   z-index: 1060 !important;
   position: absolute !important;
}

/* Card containing the form should not clip overflow */
#frmComunidad .card-body {
   overflow: visible !important;
}

#frmComunidad .input-group {
   position: relative;
   z-index: auto;
}

/* Ensure dropdown doesn't get cut off */
#frmComunidad {
   overflow: visible;
}

#frmComunidad .card-body.bg-body-tertiary {
   overflow: visible !important;
}