/* =========================================
   DOLLY BEATRIZ | LUXURY REAL ESTATE
   SELECTOR ES / EN
   DISEÑO EDITORIAL RESPONSIVE
   ========================================= */

/* CONTENEDOR */

body > .selector-idioma {
  position: absolute;

  top: calc(22px + env(safe-area-inset-top, 0px));
  right: calc(26px + env(safe-area-inset-right, 0px));

  z-index: 100;

  display: inline-flex;
  align-items: center;
  gap: 3px;

  width: max-content;
  padding: 4px;

  background: rgba(51, 37, 31, 0.91);

  border: 1px solid rgba(215, 194, 161, 0.35);
  border-radius: 3px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* BOTONES */

body > .selector-idioma .idioma-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  min-height: 36px;

  padding: 7px 10px;

  appearance: none;
  border: none;
  border-radius: 2px;

  background: transparent;
  color: #eee9df;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.09em;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

/* IDIOMA SELECCIONADO */

body > .selector-idioma .idioma-boton.is-active {
  background: #d7c2a1;
  color: #33251f;
}

/* INTERACCIÓN */

@media (hover: hover) and (pointer: fine) {

  body > .selector-idioma
  .idioma-boton:not(.is-active):hover {
    background: rgba(215, 194, 161, 0.15);
  }

}

/* ACCESIBILIDAD */

body > .selector-idioma .idioma-boton:focus-visible {
  outline: 2px solid #f7f4ee;
  outline-offset: 3px;
}

/* TABLET */

@media (max-width: 1024px) {

  body > .selector-idioma {
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: 20px;
  }

}

/* IPHONE Y ANDROID */

@media (max-width: 640px) {

  body > .selector-idioma {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));

    padding: 3px;
  }

  body > .selector-idioma .idioma-boton {
    min-width: 36px;
    min-height: 34px;

    padding: 6px 8px;
    font-size: 10px;
  }

}

/* MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {

  body > .selector-idioma .idioma-boton {
    transition: none;
    transform: none;
  }

}

/* =========================================
   CORRECCIÓN DE INTERACCIÓN ES / EN
   ========================================= */

body > .selector-idioma {
  position: absolute;
  z-index: 9999;

  pointer-events: auto;
  isolation: isolate;
}

body > .selector-idioma .idioma-boton {
  position: relative;
  z-index: 1;

  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}