/* ======================================================
   INGCO – Search (BASE COMPARTIDA)
   v2.0 – tokens, utilidades y estilos mínimos del widget
   Capas específicas:
   - Modal móvil  → assets/css/ingco-modal.css
   - Desktop UI   → assets/css/ingco-search-desktop.css
   ====================================================== */

/* ---------- Tokens globales (colores INGCO) ---------- */
:root {
  --ingco-yellow: #ffcc00;
  --ingco-black:  #111111;
  --ingco-gray-0: #0d0d0d;
  --ingco-gray-1: #1a1a1a;
  --ingco-gray-2: #2a2a2a;
  --ingco-white:  #f5f5f5;
  --ingco-shadow-soft: 0 8px 20px rgba(0,0,0,.25);
}

/* Respeto a preferencias de movimiento */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Utilidad común (usada también por el modal) */
.ingco-no-scroll { overflow: hidden; }

/* ---------- Accesibilidad ---------- */
.ingco-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ======================================================
   Widget base del shortcode [ingco_search]
   (Estilos mínimos, NO incluye lista ni modal)
   ====================================================== */

.ingco-search[data-ingco-search] {
  position: relative;
  display: block;
}

/* Formulario base: deja que el CSS de desktop defina “look & feel” */
.ingco-search__form {
  display: block; /* desktop puede redefinir a grid/flex */
}

/* Input base: estilizado mínimo para no pelear con desktop */
.ingco-search__input,
.ingco-search__form input[type="search"] {
  display: block;
  width: 100%;
  font: inherit;
  line-height: 1.2;
  color: var(--ingco-black);
  background: #fff;
  border: 1px solid var(--ingco-gray-2);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.ingco-search__form input[type="search"]::placeholder,
.ingco-search__input::placeholder {
  color: #6b6b6b;
}

/* Estado focus accesible (amarillo INGCO) – suave y genérico */
.ingco-search__input:focus,
.ingco-search__form input[type="search"]:focus {
  border-color: var(--ingco-yellow);
  box-shadow: 0 0 0 2px var(--ingco-yellow), var(--ingco-shadow-soft);
}

/* Deshabilitado */
.ingco-search__input:disabled,
.ingco-search__form input[type="search"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ======================================================
   “Skins” opcionales para habilitar branding rápido
   (Se activan agregando la clase al contenedor del widget)
   ====================================================== */

/* Skin brand: amarillo/negro (opcional) */
.ingco-search--brand .ingco-search__input,
.ingco-search--brand .ingco-search__form input[type="search"] {
  background: var(--ingco-yellow);
  color: var(--ingco-black);
  border-color: #000;
  box-shadow: inset 0 0 0 2px #000;
}
.ingco-search--brand .ingco-search__input:focus,
.ingco-search--brand .ingco-search__form input[type="search"]:focus {
  box-shadow: 0 8px 18px rgba(255,204,0,.25), inset 0 0 0 2px #000;
  border-color: #000;
}

/* Skin dark: útil sobre headers oscuros */
.ingco-search--dark .ingco-search__input,
.ingco-search--dark .ingco-search__form input[type="search"] {
  background: var(--ingco-gray-0);
  color: var(--ingco-white);
  border-color: var(--ingco-gray-2);
}
.ingco-search--dark .ingco-search__input::placeholder,
.ingco-search--dark .ingco-search__form input[type="search"]::placeholder {
  color: #9a9a9a;
}
.ingco-search--dark .ingco-search__input:focus,
.ingco-search--dark .ingco-search__form input[type="search"]:focus {
  border-color: var(--ingco-yellow);
  box-shadow: 0 0 0 2px var(--ingco-yellow);
}

/* ======================================================
   Helpers de layout (opcionales)
   ====================================================== */

/* Limitar ancho de la caja del buscador en zonas muy amplias */
.ingco-search--max-600 { max-width: 600px; }
.ingco-search--max-720 { max-width: 720px; }
.ingco-search--center  { margin-inline: auto; }

/* Margen vertical rápido */
.ingco-search--mv-8  { margin-block: 8px; }
.ingco-search--mv-12 { margin-block: 12px; }
.ingco-search--mv-16 { margin-block: 16px; }

/* ======================================================
   Nota:
   - La lista de resultados (autosuggest) para desktop
     se estiliza en assets/css/ingco-search-desktop.css
   - El modal móvil y su lista viven en assets/css/ingco-modal.css
   ====================================================== */