/* ============================================================
   Nodos Culturales - Buscador overlay
   Subir este archivo a la raiz del tema activo (junto a functions.php):
   wp-content/themes/Avada/nc-search-overlay.css
   ============================================================ */

:root{
  --nc-paper-raised:#ffffff;
  --nc-brown:#503d2d;
  --nc-fuchsia:#cb318b;
  --nc-yellow:#f8be05;
  --nc-celeste:#00a9e7;
  --nc-purple:#8057a3;
  --nc-green:#5d9069;
  --nc-beige:#9b8472;
  --nc-line: rgba(80,61,45,.16);
  --nc-overlay-bg: rgba(28,20,15,.97);
  --nc-overlay-ink:#f4ece1;
  --nc-overlay-taupe:#c9b8a6;
  --nc-overlay-line: rgba(244,236,225,.16);
  --nc-shadow: 0 24px 70px -24px rgba(42,31,24,.4);
}

/* -------- icono lupa (colocalo en el Header Builder, elemento Code Block) -------- */
.nc-search-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1.5px solid var(--nc-fuchsia);
  background:transparent;
  color:var(--nc-fuchsia);
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
  font:inherit;
}
.nc-search-trigger:hover{background:rgba(203,49,139,.12);}
.nc-search-trigger:active{transform:scale(.94);}
.nc-search-trigger:focus-visible{outline:2px solid var(--nc-fuchsia);outline-offset:3px;}
.nc-search-trigger svg{width:18px;height:18px;}

/* Posicion del icono respecto al menu (viven en la misma columna del Header
   Builder): en desktop, a la derecha del menu; en mobile (hamburguesa), a la
   izquierda. `order` reordena visualmente sin tocar el HTML - pero solo
   funciona si .nc-search-trigger es HIJO DIRECTO de un contenedor con
   display:flex (la columna del Header Builder). Si el Header Builder Code
   Block envuelve el boton en un <div> propio, hay que aplicar el `order` a
   ese div en vez de a .nc-search-trigger directamente - revisar con el
   inspector cual es el hijo directo real de la columna flex.
   800px es el mismo breakpoint donde Avada colapsa el menu a hamburguesa. */
@media (min-width: 801px){
  .nc-search-trigger{ order:2; margin-left:20px; }
}
@media (max-width: 800px){
  .nc-search-trigger{ order:-1; margin-right:12px; }
}

/* -------- overlay -------- */
.nc-search-overlay{
  position:fixed;
  inset:0;
  z-index:99999; /* por encima del header sticky de Avada */
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--nc-overlay-bg);
  color:var(--nc-overlay-ink);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
  overflow:hidden; /* el scroll ahora vive adentro, en #ncResultsList - ver mas abajo */
  font-family:'Montserrat', sans-serif;
}
.nc-search-overlay.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .32s ease, transform .32s ease;
}
@media (prefers-reduced-motion: reduce){
  .nc-search-overlay{transition:opacity .01s linear, visibility 0s linear;}
}

/* Textura "nodos": mismo motivo de puntos-conectados-por-lineas que la
   constelacion animada de template-cartografia-lima.php (clase .nc-scene),
   pasado a SVGs estaticos embebidos como fondo. Se mantienen los mismos dos
   focos de la textura anterior (14%/20% arriba-izq. y 88%/78% abajo-der.)
   pero ahora son un pequeno grafo de nodos conectados en vez de anillos
   concentricos - coherente con el isotipo de Nodos Culturales.
   Importante: cada cumulo de nodos va en su propio SVG cuadrado con
   background-size en px fijos (no en %), para que los circulos no se
   estiren y se deformen en ovalos al escalar con el overlay (que es un
   rectangulo ancho, no cuadrado). Solo la linea diagonal que los conecta
   usa background-size:100% 100%, porque una linea recta si puede estirarse
   sin verse distorsionada. */
.nc-search-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='rgba(244,236,225,0.4)' stroke-width='2.2'%3E%3Cpath d='M30 38 L52 24 M52 24 L68 52 M68 52 L40 66 M40 66 L18 58 M18 58 L30 38 M30 38 L68 52'/%3E%3C/g%3E%3Cg fill='rgba(244,236,225,0.5)'%3E%3Ccircle cx='30' cy='38' r='4.5'/%3E%3Ccircle cx='52' cy='24' r='3.4'/%3E%3Ccircle cx='68' cy='52' r='5.2'/%3E%3Ccircle cx='40' cy='66' r='3.4'/%3E%3Ccircle cx='18' cy='58' r='3.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='rgba(244,236,225,0.4)' stroke-width='2.2'%3E%3Cpath d='M30 38 L52 24 M52 24 L68 52 M68 52 L40 66 M40 66 L18 58 M18 58 L30 38 M30 38 L68 52'/%3E%3C/g%3E%3Cg fill='rgba(244,236,225,0.5)'%3E%3Ccircle cx='30' cy='38' r='4.5'/%3E%3Ccircle cx='52' cy='24' r='3.4'/%3E%3Ccircle cx='68' cy='52' r='5.2'/%3E%3Ccircle cx='40' cy='66' r='3.4'/%3E%3Ccircle cx='18' cy='58' r='3.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='24' y1='22' x2='84' y2='72' stroke='rgba(244,236,225,0.22)' stroke-width='0.12' stroke-dasharray='0.6 1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-position:14% 20%, 88% 78%, center;
  background-size:260px 260px, 220px 220px, 100% 100%;
}

.nc-overlay-inner{
  position:relative;
  width:100%;
  max-width:780px;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:clamp(64px,10vh,110px) 22px 0;
  margin:0 auto;
}

.nc-overlay-close{
  position:fixed;
  top:22px;
  right:clamp(18px,4vw,40px);
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--nc-overlay-line);
  background:transparent;
  color:var(--nc-overlay-ink);
  cursor:pointer;
}
.nc-overlay-close:hover{border-color:var(--nc-fuchsia);color:var(--nc-fuchsia);}
.nc-overlay-close:focus-visible{outline:2px solid var(--nc-fuchsia);outline-offset:3px;}
.nc-overlay-close svg{width:16px;height:16px;}

.nc-field-kicker{
  flex:none;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--nc-overlay-taupe);
  margin:0 0 18px;
}

.nc-field{
  flex:none;
  display:flex;
  align-items:center;
  gap:20px;
  padding-bottom:22px;
  border-bottom:2px solid var(--nc-overlay-line);
  background:transparent !important;
}
.nc-field svg{flex:none;width:32px;height:32px;color:var(--nc-overlay-taupe);}
/* !important en todo lo siguiente: el CSS global de formularios de Avada le
   pone fondo blanco + borde + esquinas redondeadas a los inputs del sitio y
   puede ganarle por especificidad a un estilo normal - aca lo forzamos a
   perder para que quede el campo transparente sobre el overlay oscuro. */
.nc-field input{
  flex:1;
  min-width:0;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  padding:0 !important;
  margin:0 !important;
  height:auto !important;
  width:auto !important;
  box-sizing:content-box !important;
  color:var(--nc-overlay-ink) !important;
  font-family:'Montserrat', sans-serif !important;
  font-weight:700 !important;
  font-size:clamp(1.9rem,6.2vw,3.4rem) !important;
  line-height:1.1 !important;
  caret-color:var(--nc-fuchsia);
}
.nc-field input::placeholder{color:var(--nc-overlay-taupe) !important;opacity:.6;font-weight:600 !important;}
.nc-field .nc-clear{
  flex:none;
  background:transparent;
  border:0;
  color:var(--nc-overlay-taupe);
  cursor:pointer;
  display:none;
  padding:4px;
}
.nc-field .nc-clear.show{display:inline-flex;}
.nc-field .nc-clear:hover{color:var(--nc-fuchsia);}

.nc-field-underline{
  flex:none;
  height:2px;
  margin-top:-1.5px;
  width:0;
  background:var(--nc-fuchsia);
  transition:width .28s ease;
}
.nc-field.is-focused + .nc-field-underline{width:100%;}

.nc-legend{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:24px 0 6px;
}
.nc-legend button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px 6px 10px;
  border-radius:999px;
  border:1px solid var(--nc-overlay-line);
  background:transparent;
  color:var(--nc-overlay-taupe);
  font-size:.78rem;
  font-weight:600;
  font-family:'Montserrat', sans-serif;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.nc-legend button .nc-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.nc-legend button:hover{color:var(--nc-overlay-ink);}
.nc-legend button.active{
  border-color:var(--nc-legend-color, var(--nc-fuchsia));
  color:var(--nc-overlay-ink);
  background:rgba(203,49,139,.14);
}

.nc-results{
  margin-top:22px;
  flex:1 1 auto;
  min-height:0; /* imprescindible: sin esto un hijo flex no deja que su scroll interno funcione */
  display:flex;
  flex-direction:column;
}
.nc-results-status{
  flex:none;
  font-size:.78rem;
  font-weight:600;
  color:var(--nc-overlay-taupe);
  margin:0 0 6px;
  min-height:1.2em;
}

/* Solo esta lista scrollea - el campo de busqueda y la leyenda de arriba
   quedan fijos siempre visibles. */
#ncResultsList{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-bottom:60px;
  scrollbar-width:thin;
  scrollbar-color:var(--nc-overlay-line) transparent;
}
#ncResultsList::-webkit-scrollbar{width:8px;}
#ncResultsList::-webkit-scrollbar-track{background:transparent;}
#ncResultsList::-webkit-scrollbar-thumb{
  background:var(--nc-overlay-line);
  border-radius:4px;
}
#ncResultsList::-webkit-scrollbar-thumb:hover{background:var(--nc-fuchsia);}
.nc-result{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 4px;
  border-bottom:1px solid var(--nc-overlay-line);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  border-left:2px solid transparent;
  transition:border-color .15s ease, padding-left .15s ease, background .15s ease;
  border-radius:4px;
}
.nc-result:hover, .nc-result.is-active{
  border-left-color: var(--nc-result-color, var(--nc-fuchsia));
  padding-left:12px;
  background: rgba(244,236,225,.05);
}
.nc-result .nc-dot{
  flex:none;
  width:9px;
  height:9px;
  border-radius:50%;
  margin-top:8px;
  background:var(--nc-result-color, var(--nc-fuchsia));
}
.nc-result .nc-body{min-width:0;flex:1;}
.nc-result .nc-tag{
  display:block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--nc-result-color, var(--nc-fuchsia));
  margin-bottom:3px;
}
.nc-result h3{
  font-family:'Made Tommy Soft', 'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:.005em;
  margin:0 0 4px;
  color:var(--nc-overlay-ink);
  line-height:1.4;
}
.nc-result h3 mark,
.nc-result p mark{
  background:rgba(248,190,5,.55);
  color:var(--nc-brown);
  border-radius:3px;
  padding:0 2px;
}
.nc-result p{
  margin:0;
  font-size:.86rem;
  line-height:1.55;
  color:var(--nc-overlay-taupe);
  max-width:60ch;
}
.nc-result .nc-arrow{
  flex:none;
  width:16px;
  height:16px;
  margin-top:9px;
  color:var(--nc-overlay-taupe);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .15s ease, transform .15s ease;
}
.nc-result:hover .nc-arrow{opacity:1;transform:translateX(0);}

.nc-empty-state{
  padding:34px 4px;
  color:var(--nc-overlay-taupe);
  font-size:.92rem;
  line-height:1.6;
}
.nc-empty-state strong{color:var(--nc-overlay-ink);}

.nc-loading-state{
  display:flex;
  align-items:center;
  gap:12px;
  padding:34px 4px;
  color:var(--nc-overlay-taupe);
  font-size:.92rem;
}
.nc-spinner{
  flex:none;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid var(--nc-overlay-line);
  border-top-color:var(--nc-fuchsia);
  animation:nc-spin .7s linear infinite;
}
@keyframes nc-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  .nc-spinner{animation-duration:1.6s;}
}

@media (max-width:560px){
  .nc-overlay-inner{padding-top:56px;}
}