/** * Selector de idiomas — Veracruz Select. */ /* Contenedor oculto que requiere Google Translate */ .bcl-google-hidden { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0 !important; width: 0 !important; overflow: hidden !important; } /* Ocultar por completo la barra superior, el menú y los tooltips de Google. Se cubren tanto las versiones antiguas (.goog-te-banner-frame) como las nuevas (.skiptranslate iframe, VIpgJd...). Al ocultar la barra no hay botón «×» que cierre y revierta la traducción: el idioma se mantiene. */ iframe.goog-te-banner-frame, .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.skiptranslate, .skiptranslate iframe, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-ORHb-OEVmcd, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover { display: none !important; visibility: hidden !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* Google añade la clase translated-ltr / translated-rtl a y empuja el body con «top». Lo forzamos siempre a 0. */ body, .translated-ltr body, .translated-rtl body { top: 0 !important; position: static !important; } html.translated-ltr, html.translated-rtl { margin-top: 0 !important; } /* ==================================================================== Selector flotante ==================================================================== */ .bcl { --bcl-primary: #0e6e5c; --bcl-accent: #e8a33d; --bcl-text: #1f2a26; --bcl-surface: #ffffff; --bcl-border: #d7e0db; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; z-index: 99999; } .bcl--flotante { position: fixed; } .bcl--bottom-right { right: 18px; bottom: 18px; } .bcl--bottom-left { left: 18px; bottom: 18px; } .bcl--top-right { right: 18px; top: 18px; } .bcl--top-left { left: 18px; top: 18px; } /* Botón principal */ .bcl__toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .85rem; background: var(--bcl-primary); color: #fff; border: 0; border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 600; line-height: 1; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease; } .bcl__toggle:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.22); } .bcl__globo { font-size: 1.1rem; } .bcl__actual-bandera { font-size: 1.05rem; } .bcl__actual-texto { white-space: nowrap; } .bcl__chevron { font-size: .8rem; opacity: .85; transition: transform .15s ease; } .bcl.is-open .bcl__chevron { transform: rotate(180deg); } /* Menú desplegable */ .bcl__menu { list-style: none; margin: 0; padding: .35rem; position: absolute; min-width: 220px; background: var(--bcl-surface); border: 1px solid var(--bcl-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } .bcl--bottom-right .bcl__menu, .bcl--bottom-left .bcl__menu { bottom: calc(100% + 10px); } .bcl--top-right .bcl__menu, .bcl--top-left .bcl__menu { top: calc(100% + 10px); } .bcl--bottom-right .bcl__menu, .bcl--top-right .bcl__menu { right: 0; } .bcl--bottom-left .bcl__menu, .bcl--top-left .bcl__menu { left: 0; } .bcl.is-open .bcl__menu { opacity: 1; visibility: visible; transform: translateY(0); } .bcl__opcion { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .6rem .7rem; background: transparent; border: 0; border-radius: 10px; cursor: pointer; font-size: .92rem; color: var(--bcl-text); text-align: left; } .bcl__opcion:hover { background: rgba(14,110,92,.08); } .bcl__bandera { font-size: 1.15rem; line-height: 1; } .bcl__nombre { flex: 1; } .bcl__check { color: var(--bcl-primary); font-weight: 800; opacity: 0; } .bcl__opcion.is-actual { background: rgba(14,110,92,.1); font-weight: 700; } .bcl__opcion.is-actual .bcl__check { opacity: 1; } /* Versión en línea (shortcode) */ .bcl--inline { position: relative; display: inline-block; } /* Soporte RTL (árabe) para el propio selector */ .bcl-rtl .bcl__opcion { text-align: right; } /* Móvil */ @media (max-width: 480px) { .bcl__actual-texto { display: none; } .bcl__toggle { padding: .6rem .7rem; } .bcl__menu { min-width: 200px; } }