/* Simple Language Selector - estilos del widget flotante Todo va bajo el prefijo .sls- para no chocar con estilos del tema u otros plugins */ .sls-widget { position: fixed; top: 16px; z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4; } .sls-top-right { top: 16px; right: 16px; } .sls-top-left { top: 16px; left: 16px; } .sls-bottom-right { bottom: 16px; right: 16px; top: auto; } .sls-bottom-left { bottom: 16px; left: 16px; top: auto; } /* Cuando el botón está abajo, el menú se abre hacia arriba en vez de hacia abajo */ .sls-bottom-right .sls-menu, .sls-bottom-left .sls-menu { margin: 0 0 8px 0; position: absolute; bottom: 100%; } .sls-toggle { display: flex; align-items: center; gap: 6px; background: #ffffff; color: #222222; border: 1px solid #dddddd; border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: box-shadow 0.15s ease; } .sls-toggle:hover, .sls-toggle:focus { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } .sls-globe { font-size: 16px; } .sls-current-label { font-weight: 600; letter-spacing: 0.02em; } .sls-menu { list-style: none; margin: 8px 0 0 0; padding: 6px; background: #ffffff; border: 1px solid #dddddd; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); min-width: 160px; max-height: 320px; overflow-y: auto; } .sls-top-left .sls-menu, .sls-bottom-left .sls-menu { right: auto; left: 0; } .sls-top-right .sls-menu, .sls-bottom-right .sls-menu { right: 0; } .sls-menu[hidden] { display: none; } .sls-menu li { margin: 0; } .sls-lang-link { display: block; padding: 8px 10px; color: #222222; text-decoration: none; border-radius: 6px; white-space: nowrap; } .sls-lang-link:hover, .sls-lang-link:focus { background: #f2f2f2; color: #000000; } .sls-lang-link.sls-active { font-weight: 700; background: #eef4ff; } .sls-original { font-size: 12px; color: #888888; margin-left: 4px; } /* Oculta por completo el widget nativo de Google que normalmente se inserta arriba de la web y desplaza el diseño */ .sls-hidden-google-widget { display: none !important; } /* Google añade un margen/desplazamiento arriba del o para dejar sitio a su barra superior. Lo forzamos siempre a 0. */ html, body { top: 0 !important; margin-top: 0 !important; position: static !important; } /* Cualquier iframe o barra que Google inserte arriba de la web, sea cual sea el nombre exacto de la clase que use. */ .goog-te-banner-frame, .goog-te-balloon-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, iframe.skiptranslate, iframe[id^="goog-gt"], iframe[src*="translate.google"], #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-text-highlight, body > .skiptranslate:not(#google_translate_element) { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; background-color: transparent !important; box-shadow: none !important; } .goog-te-gadget { height: 0; overflow: hidden; } @media (max-width: 480px) { .sls-toggle { padding: 6px 10px; } .sls-menu { min-width: 140px; } .sls-top-right, .sls-top-left { top: 10px; } .sls-bottom-right, .sls-bottom-left { bottom: 10px; } }