/* =========================================
   DOLLY BEATRIZ | LUXURY REAL ESTATE
   SELECTOR ES / EN PARA RESIDENCIAS
   ========================================= */

body.detalle-residencia {
  position: relative;
}

/* CONTENEDOR DEL SELECTOR */

.detalle-residencia > .selector-idioma {
  position: absolute;

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

  z-index: 1000;

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

  width: max-content;
  padding: 4px;

  background: rgba(36, 33, 31, 0.82);

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

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);

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

  pointer-events: auto;
}

/* BOTONES */

.detalle-residencia > .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: 0;
  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;
  pointer-events: auto;
  touch-action: manipulation;

  transition:
    background-color 250ms ease,
    color 250ms ease;
}

/* IDIOMA ACTIVO */

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

/* INTERACCIÓN */

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

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

}

/* ACCESIBILIDAD */

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

/* TABLET */

@media (max-width: 1024px) {

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

}

/* CELULARES */

@media (max-width: 640px) {

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

    padding: 3px;
  }

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

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

  /* Evita que "Volver" quede debajo del selector */

  .detalle-residencia .residencia-volver {
    max-width: calc(100% - 130px);
  }

}

/* MOVIMIENTO REDUCIDO */

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

  .detalle-residencia > .selector-idioma .idioma-boton {
    transition: none;
  }

}