/* =====================
BUSCADOR SANBOSI
===================== */

.search-container{

position:fixed;

top:var(--search-top);
left:var(--search-left);
right:var(--search-right);

display:flex;
align-items:center;

z-index:200;

}

/* BOTON LUPA */

.search-btn{
  width:var(--search-btn-size);
  height:var(--search-btn-size);

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--search-btn-bg);
  border:var(--search-btn-border-width) solid var(--search-btn-border-color);
  border-radius:var(--search-btn-radius);

  box-shadow:var(--search-btn-shadow);
  backdrop-filter:blur(var(--search-btn-blur));

  cursor:pointer;
}

/* ICONO SVG */

.search-icon{
  width:var(--search-icon-size);
  height:var(--search-icon-size);

  stroke:var(--search-icon-color);
  stroke-width:var(--search-icon-stroke);
  fill:none;

  filter:drop-shadow(var(--search-icon-shadow));

  transition:0.3s;
}

.search-btn:hover .search-icon{

stroke:yellow;
transform:scale(1.2);

}

/* INPUT BUSQUEDA */

.search-input{

position: absolute;
left:60px;

width:0;

opacity:0;

margin:0;
transform-origin:right;

padding:8px 12px;

border-radius:20px;

border:none;

outline:none;

transition:0.4s;

font-size:14px;

}

/* INPUT ACTIVO */

.search-container.active .search-input{

width:180px;

opacity:1;

}

/* =====================
BUSCADOR MOVIL
===================== */
@media (max-width:768px){

  .search-container{
    top:160px;
    left:23px;
    right:auto;
    --search-btn-size:42px;
--search-btn-bg:rgba(5,15,35,0.45);
--search-btn-border-width:1px;
--search-btn-border-color:rgba(127,179,255,0.65);
--search-btn-radius:10px;
--search-btn-shadow:0 0 14px rgba(127,179,255,0.35);
--search-btn-blur:8px;

--search-icon-size:28px;
--search-icon-color:#ffffff;
--search-icon-stroke:2.2;
--search-icon-shadow:0 0 8px rgba(255,255,255,0.75);
  }

  .search-icon{
    width:42px;
    height:42px;
  }

  .search-input{
    left:52px;
    font-size:13px;
  }

  .search-container.active .search-input{
    width:150px;
  }
}

/* =====================
BUSCADOR ESCRITORIO
===================== */
@media (min-width:769px){

  .search-container{
--search-top:170px;
--search-left:35px;
--search-right:auto;
--search-btn-size:50px;
--search-btn-bg:rgba(5,15,35,0.45);
--search-btn-border-width:1px;
--search-btn-border-color:rgba(127,179,255,0.65);
--search-btn-radius:12px;
--search-btn-shadow:0 0 16px rgba(127,179,255,0.38);
--search-btn-blur:10px;

--search-icon-size:34px;
--search-icon-color:#ffffff;
--search-icon-stroke:2.2;
--search-icon-shadow:0 0 10px rgba(255,255,255,0.85);
  }

  .search-icon{
    width:50px;
    height:50px;
  }

  .search-input{
    left:60px;
    font-size:14px;
  }

  .search-container.active .search-input{
    width:180px;
  }
}