/**
 * Searchable Select — Humanitas UC
 * Estilos para el select híbrido con búsqueda.
 *
 * IMPORTANTE: Este archivo debe cargarse ANTES que searchable-select.js
 * para evitar el flash de estilos sin aplicar (FOUC).
 * En WordPress: wp_enqueue_style() en functions.php, sin dependencia del JS.
 *
 * ESPECIFICIDAD:
 * Todos los selectores están anclados a .ss-wrapper y descienden nivel a nivel
 * para superar las reglas de Search & Filter Pro, que aplica estilos genéricos
 * sobre ul, li e input dentro de .searchandfilter.
 */

/* ── Contenedor raíz ────────────────────────────────────────────────────── */
.ss-wrapper {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
  font-family: inherit !important;
  font-size: inherit !important;
  /* Aislar del flex/grid del parent (.searchandfilter ul puede ser flex row) */
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Trigger: botón que reemplaza visualmente al <select> ───────────────── */
.ss-wrapper .ss-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 12px 10px 12px 12px !important;
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  transition: border-color 0.15s !important;
  color: inherit !important;
  text-align: left !important;
  /* Neutralizar herencias de botones del tema */
  margin: 0 !important;
  line-height: normal !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.ss-wrapper .ss-trigger:hover,
.ss-wrapper .ss-trigger:focus {
  border-color: #888 !important;
  outline: none !important;
  box-shadow: none !important;
}

.ss-wrapper .ss-trigger.ss-open {
  border-color: #555 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ── Etiqueta de texto dentro del trigger ───────────────────────────────── */
.ss-wrapper .ss-trigger .ss-trigger-label {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 1em !important;
  color: #333 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ss-wrapper .ss-trigger .ss-trigger-label.ss-placeholder {
  color: #888 !important;
}

/* ── Flecha del trigger ─────────────────────────────────────────────────── */
.ss-wrapper .ss-trigger .ss-arrow {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  transition: transform 0.18s !important;
  opacity: 0.5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ss-wrapper .ss-trigger.ss-open .ss-arrow {
  transform: rotate(180deg) !important;
}

/* ── Panel desplegable ──────────────────────────────────────────────────── */
.ss-wrapper .ss-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid #555 !important;
  border-top: none !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  display: none !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.ss-wrapper .ss-dropdown.ss-open {
  display: flex !important;
}

/* ── Wrap del input de búsqueda ─────────────────────────────────────────── */
.ss-wrapper .ss-dropdown .ss-search-wrap {
  display: block !important;
  padding: 8px 8px 4px !important;
  border-bottom: 1px solid #eee !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* ── Input de búsqueda ──────────────────────────────────────────────────── */
.ss-wrapper .ss-dropdown .ss-search-wrap .ss-search {
  display: block !important;
  width: 100% !important;
  padding: 6px 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
  font-size: 0.85em !important;
  box-sizing: border-box !important;
  outline: none !important;
  color: #333 !important;
  font-family: inherit !important;
  background: #fafafa !important;
  transition: border-color 0.15s !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  line-height: normal !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.ss-wrapper .ss-dropdown .ss-search-wrap .ss-search:focus {
  border-color: #888 !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

.ss-wrapper .ss-dropdown .ss-search-wrap .ss-search::placeholder {
  color: #aaa !important;
  opacity: 1 !important;
}

/* ── Lista de opciones (ul) ─────────────────────────────────────────────── */
.ss-wrapper .ss-dropdown .ss-list {
  display: block !important;
  overflow-y: auto !important;
  /* --ss-max-visible se inyecta inline por JS en el elemento; fallback: 10 */
  max-height: calc(34px * 10) !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Neutralizar flex del plugin sobre ul */
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ── Ítems de la lista (li) ─────────────────────────────────────────────── */
.ss-wrapper .ss-dropdown .ss-list .ss-option {
  display: block !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  font-size: 0.875em !important;
  color: #333 !important;
  transition: background 0.1s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  /* Neutralizar estilos de li del plugin */
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  list-style: none !important;
  float: none !important;
  flex-shrink: 0 !important;
  align-items: unset !important;
  justify-content: unset !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border-radius: 0 !important;
}

.ss-wrapper .ss-dropdown .ss-list .ss-option:hover,
.ss-wrapper .ss-dropdown .ss-list .ss-option.ss-focused {
  background: #f0f0f0 !important;
  color: #111 !important;
}

.ss-wrapper .ss-dropdown .ss-list .ss-option.ss-selected {
  font-weight: 600 !important;
  color: #111 !important;
  background: #f5f5f5 !important;
}

.ss-wrapper .ss-dropdown .ss-list .ss-option.ss-hidden {
  display: none !important;
}

/* Opción vacía: placeholder tipo "Todos los autores" */
.ss-wrapper .ss-dropdown .ss-list .ss-option[data-value=""] {
  color: #888 !important;
  font-style: italic !important;
}

/* ── Highlight del texto buscado ────────────────────────────────────────── */
.ss-wrapper .ss-dropdown .ss-list .ss-option mark.ss-highlight {
  background: #fff3cd !important;
  border-radius: 2px !important;
  padding: 0 1px !important;
  color: inherit !important;
}

/* ── Mensaje "sin resultados" ───────────────────────────────────────────── */
.ss-wrapper .ss-dropdown .ss-list .ss-no-results {
  display: none !important;
  padding: 10px 14px !important;
  font-size: 0.85em !important;
  color: #999 !important;
  font-style: italic !important;
  list-style: none !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: default !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Select original: oculto pero funcional para el plugin ──────────────── */
.ss-wrapper .ss-original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
}





 
/* ══════════════════════════════════════════════════════════════════════════
   Year Select — selector de año para el campo post_date de S&F Pro
   ══════════════════════════════════════════════════════════════════════════ */
 
.searchandfilter .sf-year-select,
[id^="searchandfilter"] .sf-year-select {
  display: block !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 12px 28px 12px 12px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: normal !important;
  color: #333 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
  margin: 0 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
}
 
.searchandfilter .sf-year-select:hover,
.searchandfilter .sf-year-select:focus,
[id^="searchandfilter"] .sf-year-select:hover,
[id^="searchandfilter"] .sf-year-select:focus {
  border-color: #888 !important;
  outline: none !important;
  box-shadow: none !important;
}
 
/* Opción vacía (placeholder) */
.searchandfilter .sf-year-select option[value=""],
[id^="searchandfilter"] .sf-year-select option[value=""] {
  color: #888 !important;
}
 
.ss-wrapper .ss-original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
}








/**
 * Search Summary — Humanitas UC
 * Estilos para el resumen de filtros activos en la página de resultados.
 * Agregar a la hoja de estilos del tema o encolar por separado.
 */

/* ── Contenedor ─────────────────────────────────────────────────────────── */
.search-summary {
    margin-bottom: 2rem;
}

/* ── Lista de filtros ───────────────────────────────────────────────────── */
.search-summary__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Ítem individual ────────────────────────────────────────────────────── */
.search-summary__item {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 1em;
    line-height: 1.4;
    padding: 8px;
    background-color: #F6F6F6;
    border-radius: 6px;
}

/* ── Label (Autor:, Año:, etc.) ─────────────────────────────────────────── */
.search-summary__label {
    font-weight: 600;
    color: #888;
    white-space: nowrap;
}

/* ── Valor ──────────────────────────────────────────────────────────────── */
.search-summary__value {
    color: #222;
    font-weight: 500;
}

/* ── Separador visual entre ítems ───────────────────────────────────────── */
.search-summary__item + .search-summary__item::before {
    content: '·';
    color: #ccc;
    margin-right: 10px;
    font-weight: normal;
    display: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .search-summary__filters {
        flex-direction: column;
        gap: 4px;
    }

    .search-summary__item + .search-summary__item::before {
        display: none;
    }
}