/* =========================================================
   LA CAPILLA - IDIOMAS COMPACTO V3
   ========================================================= */

:root{
  --lci-night:#080D16;
  --lci-night2:#101824;
  --lci-red:#E43C27;
  --lci-orange:#E56B2E;
  --lci-cyan:#43A6B8;
  --lci-gold:#E3A13A;
  --lci-white:#FFFFFF;
}

.lciv3-root,
.lciv3-root *{
  box-sizing:border-box;
}

.lciv3-root{
  position:fixed;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:999999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  font-family:"Montserrat",Arial,Helvetica,sans-serif;
}

/* CONTENEDOR DE BANDERAS */
.lciv3-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px) scale(.94);

  transition:
    opacity .22s ease,
    transform .24s cubic-bezier(.22,1,.36,1),
    visibility .22s ease;
}

.lciv3-root.is-open .lciv3-list{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

/* BOTONES DE BANDERA */
.lciv3-lang{
  position:relative;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    var(--lci-night2);

  display:grid;
  place-items:center;
  cursor:pointer;

  box-shadow:
    0 10px 25px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.015);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.lciv3-lang:hover{
  transform:translateX(-4px) scale(1.03);
  border-color:rgba(67,166,184,.55);
  box-shadow:
    0 12px 28px rgba(0,0,0,.33),
    0 0 18px rgba(67,166,184,.10);
}

.lciv3-lang.is-active{
  border-color:rgba(228,60,39,.75);
  background:
    linear-gradient(145deg, rgba(228,60,39,.14), rgba(67,166,184,.06)),
    var(--lci-night2);
}

.lciv3-flag{
  font-size:23px;
  line-height:1;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));
}

/* TOOLTIP */
.lciv3-tip{
  position:absolute;
  right:54px;
  top:50%;
  transform:translateY(-50%) translateX(6px);

  background:var(--lci-night);
  color:#fff;

  border:1px solid rgba(67,166,184,.28);
  border-radius:9px;

  padding:6px 9px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

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

  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.lciv3-lang:hover .lciv3-tip{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}

/* BOTÓN PRINCIPAL */
.lciv3-toggle{
  width:48px;
  height:58px;
  padding:5px 0 4px;

  border-radius:16px;
  border:1px solid rgba(67,166,184,.36);

  background:
    radial-gradient(circle at 50% 18%, rgba(67,166,184,.13), transparent 42%),
    linear-gradient(180deg, var(--lci-night2), var(--lci-night));

  color:var(--lci-white);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;

  cursor:pointer;

  box-shadow:
    0 12px 30px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.018);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.lciv3-toggle:hover{
  transform:translateX(-4px);
  border-color:rgba(67,166,184,.66);
  box-shadow:
    0 14px 32px rgba(0,0,0,.36),
    0 0 18px rgba(67,166,184,.10);
}

.lciv3-globe{
  color:var(--lci-cyan);
  display:grid;
  place-items:center;
}

.lciv3-code{
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:1px;
  color:var(--lci-white);
}

/* LINEA DE IDENTIDAD */
.lciv3-colorbar{
  width:45px;
  height:3px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:2px;
}

.lciv3-colorbar span{
  display:block;
  border-radius:6px;
}

.lciv3-colorbar span:nth-child(1){background:var(--lci-red);}
.lciv3-colorbar span:nth-child(2){background:var(--lci-gold);}
.lciv3-colorbar span:nth-child(3){background:var(--lci-cyan);}
.lciv3-colorbar span:nth-child(4){background:var(--lci-orange);}

/* GOOGLE TRANSLATE: OCULTO */
.lciv3-google-translate{
  position:fixed!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  left:-99999px!important;
  top:-99999px!important;
}

.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.goog-te-gadget,
.goog-te-gadget-icon{
  display:none!important;
}

body{
  top:0!important;
}

/* TABLET */
@media(max-width:1024px){
  .lciv3-root{
    right:10px;
  }
}

/* CELULAR */
@media(max-width:767px){
  .lciv3-root{
    top:auto;
    right:10px;
    bottom:18px;
    transform:none;
  }

  .lciv3-list{
    order:1;
  }

  .lciv3-toggle{
    order:2;
    width:46px;
    height:54px;
    border-radius:15px;
  }

  .lciv3-colorbar{
    order:3;
    width:42px;
  }

  .lciv3-lang{
    width:42px;
    height:42px;
    border-radius:13px;
  }

  .lciv3-flag{
    font-size:21px;
  }

  .lciv3-tip{
    display:none;
  }
}

/* MUY PEQUEÑO */
@media(max-width:360px){
  .lciv3-root{
    right:7px;
    bottom:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .lciv3-root *,
  .lciv3-root *::before,
  .lciv3-root *::after{
    transition:none!important;
  }
}