/* Zware Simple Translate — frontend */ .zwst-google-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; top: -9999px; left: -9999px; } /* Oculta artefactos que el widget de Google agrega al / */ .goog-tooltip, .goog-tooltip:hover { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } .zwst-widget { font-size: var( --zwst-fontsize, 14px ); line-height: 1.4; box-sizing: border-box; } .zwst-widget * { box-sizing: border-box; } /* --- Flotante --- */ .zwst-floating { position: fixed; z-index: var( --zwst-zindex, 9999 ); } .zwst-pos-bottom-right { right: var( --zwst-offset-x, 20px ); bottom: var( --zwst-offset-y, 20px ); } .zwst-pos-bottom-left { left: var( --zwst-offset-x, 20px ); bottom: var( --zwst-offset-y, 20px ); } .zwst-pos-top-right { right: var( --zwst-offset-x, 20px ); top: var( --zwst-offset-y, 20px ); } .zwst-pos-top-left { left: var( --zwst-offset-x, 20px ); top: var( --zwst-offset-y, 20px ); } /* --- Botón/pastilla que abre y cierra el panel (estilos "dropdown" y "button") --- */ .zwst-toggle-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var( --zwst-radius, 8px ); background: var( --zwst-bg, #1a1a1a ); color: var( --zwst-text, #fff ); border: none; cursor: pointer; box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 ); font-size: inherit; font-family: inherit; } .zwst-toggle-btn:hover { filter: brightness( 1.1 ); } .zwst-trigger-button { width: 44px; height: 44px; justify-content: center; font-size: 20px; } .zwst-trigger-dropdown { padding: 8px 12px; } .zwst-chevron { transition: transform 0.15s ease; font-size: 0.8em; } .zwst-widget.zwst-open .zwst-chevron { transform: rotate( 180deg ); } /* El panel está oculto por defecto SOLO cuando el estilo tiene un botón disparador (dropdown / button). El estilo "flags" no tiene disparador y el panel siempre está visible (más abajo se sobreescribe). */ .zwst-style-dropdown .zwst-panel, .zwst-style-button .zwst-panel { display: none; position: absolute; min-width: 180px; } .zwst-style-dropdown.zwst-open .zwst-panel, .zwst-style-button.zwst-open .zwst-panel { display: block; } /* Posición del panel respecto al disparador, según la esquina elegida */ .zwst-pos-bottom-right .zwst-panel, .zwst-pos-bottom-left .zwst-panel { bottom: calc( 100% + 8px ); } .zwst-pos-bottom-right .zwst-panel { right: 0; } .zwst-pos-bottom-left .zwst-panel { left: 0; } .zwst-pos-top-right .zwst-panel, .zwst-pos-top-left .zwst-panel { top: calc( 100% + 8px ); } .zwst-pos-top-right .zwst-panel { right: 0; } .zwst-pos-top-left .zwst-panel { left: 0; } /* Cuando se usa vía shortcode (sin posición fija), el panel se abre debajo */ .zwst-inline.zwst-style-dropdown .zwst-panel, .zwst-inline.zwst-style-button .zwst-panel { top: calc( 100% + 8px ); left: 0; } /* --- Panel / lista de idiomas --- */ .zwst-panel { background: var( --zwst-bg, #1a1a1a ); color: var( --zwst-text, #fff ); border-radius: var( --zwst-radius, 8px ); box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 ); overflow: hidden; padding: 4px; } .zwst-lang-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; } .zwst-lang-option { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; color: inherit; padding: 8px 12px; font-size: inherit; font-family: inherit; cursor: pointer; border-radius: calc( var( --zwst-radius, 8px ) - 4px ); white-space: nowrap; } .zwst-lang-option:hover, .zwst-lang-option:focus { background: var( --zwst-accent, #3182ce ); outline: none; } .zwst-flag { font-size: 1.1em; } .zwst-reset-lang { font-style: italic; opacity: 0.85; } /* --- Estilo "flags": fila horizontal siempre visible, sin disparador --- */ .zwst-style-flags .zwst-panel { padding: 6px; } .zwst-style-flags .zwst-lang-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: none; overflow: visible; } .zwst-style-flags .zwst-lang-option { width: auto; padding: 6px 10px; } /* --- Inline (shortcode, sin posición fija de pantalla) --- */ .zwst-inline { display: inline-block; position: relative; } .zwst-inline .zwst-panel { max-width: 260px; } .zwst-inline.zwst-style-flags .zwst-panel { position: static; max-width: none; } @media ( max-width: 480px ) { .zwst-floating { right: 10px !important; left: auto !important; bottom: 10px !important; } } /* ========================================================================= Elemento de menú de navegación (Apariencia → Menús) Es un nativo no tiene ese problema porque no hay nada que pueda chocar con el CSS del tema. Todo con !important porque este sitio reordena el CSS de forma poco predecible (confirmado varias veces a lo largo de este trabajo). ========================================================================= */ .zwst-select-wrap { position: relative !important; display: inline-flex !important; align-items: center !important; } .zwst-select-wrap::after { content: "▾" !important; position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY( -50% ) !important; pointer-events: none !important; font-size: 0.7em !important; color: inherit !important; opacity: 0.75 !important; } .zwst-menu-select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background: transparent !important; border: none !important; padding: 0 16px 0 0 !important; margin: 0 !important; cursor: pointer !important; max-width: 130px !important; /* Color/tipografía se copian del propio menú por JS (ver matchThemeMenuStyle en frontend.js) — así se adapta automáticamente a cualquier tema, en vez de que nosotros tengamos que adivinar sus reglas de CSS. Estos son solo valores de respaldo por si el JS no llegó a ejecutarse todavía. */ font: inherit; color: inherit; } .zwst-menu-select-styled { -webkit-appearance: menulist !important; -moz-appearance: menulist !important; appearance: menulist !important; background: var( --zwst-bg, #1a1a1a ) !important; color: var( --zwst-text, #fff ) !important; border: 1px solid var( --zwst-bg, #1a1a1a ) !important; border-radius: var( --zwst-radius, 8px ) !important; font-size: var( --zwst-fontsize, 14px ) !important; padding: 6px 10px !important; } .zwst-select-wrap:has( .zwst-menu-select-styled )::after { display: none !important; }