:root { --accent: #005a6d; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(97, 180, 175, 1), -10px 10px rgba(97, 180, 175, 0.2), -10px -10px rgba(97, 180, 175, 1), 10px -10px rgba(97, 180, 175, 0.2); } 25% { box-shadow: -10px 10px rgba(97, 180, 175, 0.2), -10px -10px rgba(97, 180, 175, 1), 10px -10px rgba(97, 180, 175, 0.2), 10px 10px rgba(97, 180, 175, 1); } 50% { box-shadow: -10px -10px rgba(97, 180, 175, 1), 10px -10px rgba(97, 180, 175, 0.2), 10px 10px rgba(97, 180, 175, 1), -10px 10px rgba(97, 180, 175, 0.2); } 75% { box-shadow: 10px -10px rgba(97, 180, 175, 0.2), 10px 10px rgba(97, 180, 175, 1), -10px 10px rgba(97, 180, 175, 0.2), -10px -10px rgba(97, 180, 175, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f4f4f4 }/*poner de negrita a regular items seleccionados de un select del formulario de carga */ .select2-container--default .select2-selection--single .select2-selection__rendered{ font-weight:400!important; } /* ========================================================================== Equipment blocks | 2 columnas SIEMPRE + badge original (tamaño/colores) - Mantiene tu círculo 18px + fondo #e2f7f5 + icono #217B76 + font-size 12px - En móvil también queda en 2 columnas ========================================================================== */ /* SOLO bloques de equipamiento (los que marca el JS) */ .bbz-equip-block .outlined-list.details-block-content{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 2 columnas siempre */ gap: 8px 14px; /* igual a tu estilo original */ margin: 0; padding: 0; list-style: none; } /* Item */ .bbz-equip-block .outlined-list.details-block-content > li{ display: inline-flex; align-items: center; margin: 0; padding: 0; min-width: 0; /* evita overflow raro */ } /* Badge/círculo del ícono (✅ vuelve a tu tamaño/colores) */ .bbz-equip-block .outlined-list.details-block-content > li > i.mi{ width: 18px; height: 18px; min-width: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e2f7f5; margin-right: 6px; padding: 0; line-height: 1; color: #217B76; font-size: 12px; } /* Texto (✅ mantiene tu line-height 2 y margin 0) */ .bbz-equip-block .outlined-list.details-block-content > li > .wp-editor-content{ line-height: 2; margin: 0 !important; display: inline-block; min-width: 0; } /* Refuerzo adicional */ .bbz-equip-block .details-block-content .wp-editor-content{ margin: 0 !important; } /* ========================================================================== Tecnesio Theme Gallery (Owl Carousel) - Normalización PRO de tamaños Objetivo UX: - Preview principal: todas las slides mismo tamaño, sin distorsión, recorte suave centrado (cover + center). - Thumbs: miniaturas uniformes, sin deformar, centradas. - Mantener imagen original para el lightbox (PhotoSwipe) al hacer click. ========================================================================== */ /* 0) Variables de diseño (ajustás acá y se aplica a todo) */ :root{ /* Ratio del slider principal (16/9 es estándar para listings). Podés probar 4/3 si querés menos “panorámico”. */ --bbz-gallery-main-ratio: 16 / 9; /* Ratio de miniaturas */ --bbz-gallery-thumb-ratio: 4 / 3; /* Altura máxima “real” implícita por ratio (si tu contenedor es gigante, igual queda consistente). */ --bbz-gallery-radius: 14px; /* Fondo mientras carga (y para que el recorte se vea prolijo) */ --bbz-gallery-bg: rgba(17, 19, 23, 0.06); } /* 1) Evitá que Owl fuerce alturas gigantes por imágenes verticales (te está pasando: inline height enorme) */ .element.gallery-block .galleryPreview.owl-carousel .owl-stage-outer, .element.gallery-block .galleryPreview.owl-carousel .owl-stage-outer.owl-height{ height: auto !important; /* clave: ignora el alto calculado por Owl */ } /* 2) Slide principal: definimos un “marco” fijo por ratio */ .element.gallery-block .galleryPreview .owl-item > a.item{ display: block; width: 100%; /* Esto asegura que TODAS las imágenes se vean en el mismo “marco” */ aspect-ratio: var(--bbz-gallery-main-ratio); /* Recorte prolijo sin deformar */ overflow: hidden; border-radius: var(--bbz-gallery-radius); background: var(--bbz-gallery-bg); /* Por si el tema mete line-height raro */ line-height: 0; } /* 3) La imagen ocupa todo el marco, sin distorsionar, centrada */ .element.gallery-block .galleryPreview .owl-item > a.item > img{ width: 100% !important; height: 100% !important; /* “cover” = llena el marco y recorta lo que sobra (sin deformar) */ object-fit: cover; object-position: center; display: block; /* evita espacios fantasma */ } /* 4) Thumbnails (usan background-image inline): uniformes, cover y center */ .element.gallery-block .gallery-thumb .slide-thumb{ display: block; width: 100%; /* Marco consistente */ aspect-ratio: var(--bbz-gallery-thumb-ratio); /* Fondo inline -> forzamos a comportarse como “cover centrado” */ background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: calc(var(--bbz-gallery-radius) - 4px); overflow: hidden; background-color: var(--bbz-gallery-bg); } /* 5) Feedback visual UX: hover/focus sutil (sin romper estética del tema) */ .element.gallery-block .gallery-thumb .slide-thumb:focus, .element.gallery-block .gallery-thumb .slide-thumb:hover{ outline: none; filter: brightness(1.03); } /* 6) Responsive: en mobile suele convenir un ratio un poco menos panorámico */ @media (max-width: 768px){ :root{ --bbz-gallery-main-ratio: 4 / 3; } } /* ============================================================ Sticky Tabs (Tecnesio Theme) - .profile-header - Aparece fijo al scrollear hacia abajo - Se oculta al scrollear hacia arriba (para que se vea el header) ============================================================ */ /* Estado sticky (fijo arriba) */ .profile-header.bbzph-sticky{ position: fixed; left: 0; right: 0; top: 0; /* se ajusta con admin-bar más abajo */ z-index: 999; background: #fff; border-bottom: 1px solid rgba(17, 19, 23, 0.08); box-shadow: 0 6px 18px rgba(17, 19, 23, 0.06); /* Animación suave */ transform: translateY(0); transition: transform 180ms ease; } /* Oculto cuando el usuario scrollea hacia arriba */ .profile-header.bbzph-sticky.bbzph-hidden{ transform: translateY(-120%); pointer-events: none; } /* Spacer para evitar “saltos” cuando pasa a fixed */ .bbzph-spacer{ height: 0; } /* Ajuste por admin bar (WP) */ body.admin-bar .profile-header.bbzph-sticky{ top: 32px; } @media (max-width: 782px){ body.admin-bar .profile-header.bbzph-sticky{ top: 46px; } } /* ========================================= MyListing | Grid estable (no depende de :last-child) - 3 cols desktop / 2 cols tablet / 1 col mobile - El "Search" siempre queda en la última columna - No se rompe si TranslatePress inyecta nodos extra ========================================= */ .mylisting-basic-form .featured-search .tab-pane form{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 35px !important; row-gap: 10px !important; margin: 0 !important; padding: 0 !important; } /* Reset de celdas */ .mylisting-basic-form .featured-search .tab-pane form > .form-group, .mylisting-basic-form .featured-search .tab-pane form > .cts-term-hierarchy.form-group{ width: auto !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; } /* ✅ El contenedor del botón: detectar por el botón interno (idioma-proof) */ .mylisting-basic-form .featured-search .tab-pane form > .form-group:has(> button.buttons.button-2.search){ grid-column: 3 !important; justify-self: stretch !important; align-self: end !important; } /* ✅ Botón: full width dentro de su columna */ .mylisting-basic-form .featured-search .tab-pane form button.buttons.button-2.search{ width: 100% !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; /* por si el idioma es más largo */ } /* Select2 full width */ .mylisting-basic-form .featured-search .tab-pane form .select2, .mylisting-basic-form .featured-search .tab-pane form .select2-container{ width: 100% !important; } /* Tablet: 2 columnas */ @media (max-width: 1024px){ .mylisting-basic-form .featured-search .tab-pane form{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .mylisting-basic-form .featured-search .tab-pane form > .form-group:has(> button.buttons.button-2.search){ grid-column: 2 !important; } } /* Mobile: 1 columna */ @media (max-width: 768px){ .mylisting-basic-form .featured-search .tab-pane form{ grid-template-columns: 1fr !important; } .mylisting-basic-form .featured-search .tab-pane form > .form-group:has(> button.buttons.button-2.search){ grid-column: 1 !important; } } /* Ocultar descripción/tagline */ .lf-item-container[data-template="alternate"] .lf-item-info-2 h6{ display:none!important; margin:0!important; padding:0!important; } /* Quitar el espacio que suele quedar por márgenes/padding/min-height */ .lf-item-container[data-template="alternate"] .lf-item-info-2{ padding-top:10!important; padding-bottom:0!important; min-height:unset!important; /* o: auto!important; */ } /* Normalmente el hueco viene del margen del título */ .lf-item-container[data-template="alternate"] .lf-item-info-2 h4{ margin-bottom:0!important; } /* ✅ Tecnesio Theme Add Listing: borde completo + padding prolijo (mismo tono “underline”) */ form.job-manager-form .field input[type="text"], form.job-manager-form .field input[type="number"], form.job-manager-form .field input[type="email"], form.job-manager-form .field input[type="tel"], form.job-manager-form .field input[type="url"], form.job-manager-form .field input[type="search"], form.job-manager-form .field textarea{ box-sizing: border-box; border: 1px solid rgba(17,19,23,.22) !important; border-bottom-width: 1px !important; /* ✅ evita “doble grosor” abajo */ box-shadow: none !important; /* ✅ mata el underline inset del theme */ padding: 12px 14px !important; border-radius: 10px; background: #fff; } /* Focus más fino y profesional */ form.job-manager-form .field input:focus, form.job-manager-form .field textarea:focus{ border-color: rgba(17,19,23,.38) !important; box-shadow: none !important; /* ✅ por si el focus agrega otra línea */ outline: none !important; } /* Si hay toggle de unidades, deja espacio a la derecha */ form.job-manager-form .bbz-has-unit-toggle .field input[type="number"], form.job-manager-form .bbz-has-unit-toggle .field input[type="text"]{ padding-right: 96px !important; } /* Más aire entre el label y el borde del input */ form.job-manager-form .form-group .field{ padding-top: 8px !important; padding-bottom: 8px !important; } /* Un poquito más de separación extra si aún lo ves pegado */ form.job-manager-form .form-group .field input, form.job-manager-form .form-group .field textarea{ margin-top: 6px !important; } /* Selector de unidades abajo a la izquierda */ #bbzUnits{ left: 18px !important; right: auto !important; bottom: 18px !important; } @media (max-width: 768px){ #bbzUnits{ bottom: 78px !important; } } /* ========================================================================== BBZ | Add Listing - Unit toggle (estética igual a #bbzUnits) Reemplaza/override del estilo actual del toggle en el formulario ========================================================================== */ /* layout del head: label + toggle */ .bbz-has-unit-toggle > .field-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } /* el contenedor del toggle: igual que #bbzUnits .bbzU-toggle */ .bbz-unit-toggle{ display:inline-flex; padding:2px; /* 👈 igual */ border-radius:999px; /* 👈 pill */ border:1px solid rgba(17,19,23,.14); background: rgba(17,19,23,.04); overflow:hidden; flex:0 0 auto; } /* botones: igual que #bbzUnits .bbzU-opt */ .bbz-unit-btn{ border:0; background:transparent; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; cursor:pointer; color: rgba(17,19,23,.55); line-height:1; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } /* activo: igual que #bbzUnits .bbzU-opt.is-active */ .bbz-unit-btn.is-active{ background:#fff; color: rgba(17,19,23,.95); box-shadow: 0 1px 1px rgba(17,19,23,.12); } /* hover suave */ .bbz-unit-btn:not(.is-active):hover{ color: rgba(17,19,23,.75); } /* mobile: mismo comportamiento */ @media (max-width: 520px){ .bbz-has-unit-toggle > .field-head{ flex-wrap:wrap; } .bbz-unit-toggle{ margin-left:auto; } } /* Tecnesio Theme Preview Card (alternate) — overlay más claro */ .lf-item-container.listing-preview .lf-item a .overlay{ background-color: #000 !important; opacity: 0 !important; /* antes ~0.30 */ transition: opacity .18s ease; } /* Hover: apenas más oscuro, pero suave */ .lf-item-container.listing-preview .lf-item a:hover .overlay{ opacity: 0.14 !important; /* ajustá entre 0.18 y 0.26 */ } /* ================================ BBZ | Badges en Preview Card Paleta: #005A6D #61B4AF #EFE57A ================================ */ /* Contenedor general (por si hace falta elevar capa) */ .lf-item-container.listing-preview .lf-head{ z-index: 5; } /* 1) Precio */ .lf-item-container.listing-preview .lf-head .lf-head-btn.formatted{ background: rgba(0, 90, 109, .88); /* #005A6D */ border: 1px solid rgba(255, 255, 255, .20); border-radius: 10px; padding: 6px 10px; box-shadow: 0 10px 22px rgba(0,0,0,.22); backdrop-filter: blur(2px); /* si el navegador lo soporta */ } /* Texto del precio */ .lf-item-container.listing-preview .lf-head .rent-price .value{ color: #fff !important; font-weight: 900; letter-spacing: .2px; font-size: 13px; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.25); } /* Símbolo $ */ .lf-item-container.listing-preview .lf-head .rent-price .value .format-prefix{ color: rgba(255,255,255,.85) !important; font-weight: 800; margin-right: 2px; } /* 2) Badge "Featured" (flash) */ .lf-item-container.listing-preview .lf-head .lf-head-btn.ad-badge{ background: rgba(239, 229, 122, .95); /* #EFE57A */ border: 1px solid rgba(0, 90, 109, .25); /* #005A6D */ border-radius: 10px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(0,0,0,.18); } /* Icono flash */ .lf-item-container.listing-preview .lf-head .lf-head-btn.ad-badge i{ color: #005A6D !important; font-size: 16px; } /* Estado hover de la card: un toque más brillante */ .lf-item-container.listing-preview:hover .lf-head .lf-head-btn.formatted{ background: rgba(0, 90, 109, .94); } /* Badge hover (sutil) */ .lf-item-container.listing-preview:hover .lf-head .lf-head-btn.ad-badge{ background: rgba(239, 229, 122, 1); } .price-or-date .value{ text-transform: capitalize; } /* ========================================================= NUEVO: Padding del "card" + separación (para que no quede pegado) ========================================================= */ /* Contenedor blanco del featured search */ .mylisting-basic-form .featured-search .tab-content{ padding: 28px !important; /* 👈 aire interno */ border-radius: 12px !important; } /* Separación entre columnas/filas del form */ .mylisting-basic-form .featured-search .tab-pane form.bbz-square-form{ column-gap: 28px !important; row-gap: 18px !important; } /* Mobile */ @media (max-width: 992px){ .mylisting-basic-form .featured-search .tab-content{ padding: 18px !important; } } /* ========================================================= FIX PRO Select2 (Featured Search) - Caja completa cuando está cerrado - Sin borde abajo SOLO cuando está abierto (se une al dropdown) ========================================================= */ /* 0) (IMPORTANTE) anulamos cualquier borde raro en el UL interno */ .mylisting-basic-form .featured-search .select2-container--default .select2-selection--multiple > .select2-selection__rendered{ border: 0 !important; border-radius: 0 !important; } /* 1) MULTI: caja completa */ .mylisting-basic-form .featured-search .select2-container--default .select2-selection--multiple{ border: 1px solid rgba(17,19,23,.18) !important; border-radius: 10px !important; background: #fff !important; min-height: 54px !important; padding: 8px 12px !important; box-shadow: 0 1px 0 rgba(0,0,0,.02) !important; box-sizing: border-box !important; } /* 2) SINGLE: caja completa (por si también querés uniformidad) */ .mylisting-basic-form .featured-search .select2-container--default .select2-selection--single{ border: 1px solid rgba(17,19,23,.18) !important; border-radius: 10px !important; background: #fff !important; min-height: 54px !important; padding: 12px 14px !important; box-shadow: 0 1px 0 rgba(0,0,0,.02) !important; box-sizing: border-box !important; } /* 3) Alineación/UX: que el input del search no “rompa” el padding */ .mylisting-basic-form .featured-search .select2-container--default .select2-selection--multiple .select2-search__field{ margin-top: 6px !important; height: 28px !important; line-height: 28px !important; } /* 4) Pills más limpias (opcional, queda más pro) */ .mylisting-basic-form .featured-search .select2-container--default .select2-selection--multiple .select2-selection__choice{ border: 0 !important; border-radius: 999px !important; padding: 5px 10px !important; margin-top: 6px !important; background: rgba(17,19,23,.08) !important; } .mylisting-basic-form .featured-search .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{ margin-right: 8px !important; opacity: .65 !important; } /* 5) FOCUS: aro suave */ .mylisting-basic-form .featured-search .select2-container--default.select2-container--focus .select2-selection--multiple, .mylisting-basic-form .featured-search .select2-container--default.select2-container--focus .select2-selection--single{ border-color: rgba(17,19,23,.32) !important; box-shadow: 0 0 0 4px rgba(17,19,23,.08) !important; } /* 6) OPEN: SOLO acá quitamos el borde inferior y redondeamos solo arriba */ .mylisting-basic-form .featured-search .select2-container--default.select2-container--open .select2-selection--multiple, .mylisting-basic-form .featured-search .select2-container--default.select2-container--open .select2-selection--single{ border-bottom: 0 !important; border-radius: 10px 10px 0 0 !important; } /* 7) Dropdown: encaja con la caja (sin borde arriba) */ .mylisting-basic-form .featured-search .select2-container--default.select2-container--open .select2-dropdown{ border: 1px solid rgba(17,19,23,.32) !important; border-top: 0 !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 12px 24px rgba(0,0,0,.14) !important; overflow: hidden !important; } .md-group label{ padding-left:10px; padding-bottom:5px; } .ml-basicform-summary{ padding-top:15px; }