/* --- Selector de idioma --- Globo + código del idioma actual, que despliega los nombres nativos. Sin banderas a propósito: una bandera es un país, no una lengua. Discreto y arriba a la derecha para no competir con la invitación. */ .selector-idioma { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 10; font-family: var(--fuente-cuerpo); font-size: var(--texto-sm); } .selector-idioma-boton { list-style: none; display: flex; align-items: center; gap: 0.35rem; /* 44px de alto para que sea un objetivo cómodo con el dedo */ min-height: 44px; padding: 0 0.75rem; font-weight: var(--peso-semibold); color: var(--color-tinta); background: var(--color-papel); border: 1px solid rgba(58, 42, 51, 0.18); border-radius: var(--radio-pill); box-shadow: var(--sombra-sm); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .selector-idioma-boton::-webkit-details-marker { display: none; } .selector-idioma-codigo { letter-spacing: 0.04em; } .selector-idioma-flecha { font-size: 0.7em; opacity: 0.6; transition: transform 0.15s ease; } .selector-idioma[open] .selector-idioma-flecha { transform: rotate(180deg); } .selector-idioma-lista { position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 10rem; margin: 0; padding: 0.3rem; list-style: none; background: var(--color-papel); border: 1px solid rgba(58, 42, 51, 0.18); border-radius: var(--radio-md); box-shadow: var(--sombra-md); } .selector-idioma-lista button { display: block; width: 100%; min-height: 40px; padding: 0 0.75rem; text-align: left; font: inherit; color: inherit; background: none; border: none; border-radius: var(--radio-sm); cursor: pointer; white-space: nowrap; } .selector-idioma-lista button:hover, .selector-idioma-lista button:focus-visible { background: rgba(58, 42, 51, 0.07); } .selector-idioma-lista button.activo { font-weight: var(--peso-semibold); color: var(--acento-travieso); } /* En la página del creador el selector va en el flujo, dentro de la barra de arriba: ahí ya vive la barra de cuenta y dos elementos flotantes en la misma esquina se taparían. */ .selector-idioma-en-flujo { /* relative, NO static: la lista de abajo es absolute y necesita que su ancestro esté posicionado. Con static se anclaba al documento entero y caía fuera de la pantalla. */ position: relative; } .barra-superior { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .barra-superior .barra-cuenta { margin-bottom: 0; } /* Oculta la página mientras se traduce (ver el script en el de index.html). Solo se activa cuando el idioma NO es español. */ .traduciendo body { visibility: hidden; }