/* === FAB (botón lupa) arriba derecha === */
.search-fab{
  position: fixed;
  top: 23px;
  right: clamp(10px, 2vw, 24px);
  z-index: 10000;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: #150542d1;
  border: 1px solid #fff;
  display:flex;align-items:center;justify-content:center;
  color:#01efc1; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .15s ease, opacity .15s ease;
}
.search-fab:hover{ transform: scale(1.05); }
.search-fab.is-hidden{ opacity:0; pointer-events:none; }

/* ——— Overlay de página completa ——— */
.search-dim-overlay{
  position: fixed; inset: 0; z-index: 9998;
  background: #15054285; backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.search-dim-overlay.is-visible{ opacity: 1; pointer-events: auto; }
.search-dim-overlay.is-loading::after{
  content:""; position:absolute; left:50%; top:50%;
  width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%;
  border:3px solid rgba(255,255,255,.6); border-top-color:transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to{ transform: rotate(360deg); } }

/* ====== Formulario ====== */
/* Oculto por defecto */
#pronosticos-search-form{ display:none; }

/* Visible cuando está flotante (overlay) o cuando queda fijo tras la 1ª búsqueda */
#pronosticos-search-form.is-overlay,
#pronosticos-search-form.is-persist{ display:flex; }

/* Base en su lugar natural (flujo normal) */
.pronosticos-search{
  position: static;
  z-index: auto;
  transform: none;
}

/* Modo overlay (flotante al abrir con la lupa) */
#pronosticos-search-form.is-overlay{
  position: fixed; z-index: 9999;
  left: 50%;
  /* top: clamp(16px, 4vh, 56px); */
  top: 20%;
  transform: translateX(-50%);
  width: min(960px, 94vw);
}

/* ——— Tus estilos existentes ——— */
form#pronosticos-search-form {
  background: #01efc1;
  padding: .8rem; border-radius: 4px; gap: .9rem;
}
form#pronosticos-search-form input[type="text"]{
  width:80%; background:#15054273!important; color:#01efc1!important;
  font-size:20px; font-weight:bold; padding:6px 1rem!important;
  border:2px solid #150542!important; border-radius:6px;
}
form#pronosticos-search-form button{ width:8%; border-radius:6px; }
@media (max-width: 60.99em){
  form#pronosticos-search-form button{ width:16%; }
  .search-fab{top: 10px;}
}

.pronosticos-search input::placeholder{ color:#01efc1!important; }
.pronosticos-search input{ caret-color:#150542; }
.pronosticos-search input::-webkit-input-caret{ width:3px; }

/* Halo cuando activo/cargando */
.pronosticos-search:focus-within,
.pronosticos-search.is-active,
.pronosticos-search.is-loading{
  box-shadow: 0 0 0 2px rgba(0,221,153,.55), 0 12px 28px rgba(0,0,0,.28);
  border-radius:10px;
}
/* Fuerza a que el icono del FAB sea visible aunque el tema ponga font-size:0 */
.search-fab{
  font-size: 20px !important;   /* 1em del SVG = 20px */
  line-height: 1;
}

/* Font Awesome (webfont o SVG inline) */
.search-fab .fa-solid,
.search-fab .fas{
  font-size: 1em !important;    /* asegura tamaño relativo al FAB */
  line-height: 1;
}

/* Si tu tema trae "svg:not(:root){overflow:hidden}" puede recortar el icono */
.search-fab svg{
  width: 1em; height: 1em;
  overflow: visible !important;
  display: inline-block;
  max-width: 1em;
}