/* Buscador del sitio: <dialog> y página /buscar/ (_includes/buscador-*.html, buscar.html,
   assets/js/buscador.js). Kit de metodo-web con los tokens de critical.css. La lupa del menú
   y .visualmente-oculto van en critical.css. Capa "componentes": el orden de capas está al
   inicio de critical.css. */
@layer componentes {
  html:has(.buscador[open]) { overflow: hidden; }

  .buscador {
    width: min(720px, 100% - 32px);
    max-height: min(680px, 100dvh - 96px);
    margin: 72px auto auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    background: var(--white);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    &[open] { display: flex; flex-direction: column; }
    &::backdrop { background: rgba(18, 18, 18, 0.45); backdrop-filter: blur(4px); }
    @media (max-width: 768px) {
      width: 100%;
      max-width: 100%;
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      border: 0;
      border-radius: 0;
    }
    .buscador-panel { overflow-y: auto; padding: 8px 20px 24px; }
  }

  .buscador-form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 20px;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--secondary-color);
    input {
      flex: 1;
      min-width: 0;
      padding: 6px 0;
      border: 0;
      background: none;
      font: inherit;
      font-size: 1.15rem;
      line-height: 1.4;
      color: var(--text-color);
      &:focus,
      &:focus-visible { outline: none; }
      &::-webkit-search-cancel-button { cursor: pointer; }
    }
    &:has(input:focus-visible) { box-shadow: inset 0 -2px 0 var(--primary-color); }
  }

  .buscador-form__cerrar {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--secondary-color);
    cursor: pointer;
    &:hover { color: var(--text-color); border-color: var(--text-color); }
  }

  .buscador-panel__etiqueta {
    margin: 20px 0 10px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary-color);
  }

  .buscador-panel__estado {
    margin: 16px 0 8px;
    font-size: 0.85rem;
    color: var(--secondary-color);
    &:empty { display: none; }
  }

  .buscador-chips,
  .buscador-enlaces,
  .buscador-resultados {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .buscador-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    a {
      display: inline-block;
      padding: 6px 14px;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 0.95rem;
      line-height: 1.4;
      color: var(--text-color);
      text-decoration: none;
      &:hover { border-color: var(--primary-color); color: var(--primary-dark); }
    }
  }

  .buscador-enlaces {
    display: grid;
    gap: 6px;
    a {
      color: var(--primary-dark);
      font-weight: 500;
      text-decoration: none;
      &::after { content: " →"; }
      &:hover { text-decoration: underline; }
    }
  }

  /* Filtros por tipo: radios; assets/js/buscador.js oculta los resultados de otros tipos. */
  .buscador-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    &[hidden] { display: none; }
    label {
      padding: 4px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 0.85rem;
      cursor: pointer;
      &[hidden] { display: none; }
      &:has(:checked) { background: var(--text-color); border-color: var(--text-color); color: var(--white); }
      &:has(:focus-visible) { outline: 2px solid var(--primary-color); outline-offset: 2px; }
    }
    input { position: absolute; opacity: 0; pointer-events: none; }
    span { opacity: 0.7; }
  }

  .buscador-resultados {
    display: grid;
    gap: 4px;
    [hidden] { display: none; }
  }

  :is(.buscador-resultado, .buscador-promo) a {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    margin-inline: -14px;
    border-radius: var(--border-radius-md);
    color: var(--text-color);
    text-decoration: none;
    &:hover,
    &:focus-visible { background: var(--surface-cream); }
  }

  .buscador-resultado__tipo {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-dark);
  }

  .buscador-resultado__titulo {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .buscador-resultado__extracto {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--secondary-color);
    mark { background: color-mix(in srgb, var(--primary-color) 25%, transparent); color: inherit; padding: 0 2px; border-radius: 2px; }
  }

  .buscador-promo {
    margin-bottom: 8px;
    a {
      margin-inline: 0;
      border: 1px solid var(--border);
      background: var(--surface-cream);
      &:hover, &:focus-visible { border-color: var(--primary-color); }
      .buscador-resultado__titulo::after { content: " →"; color: var(--primary-dark); }
    }
  }

  :is(.buscador-cta, .buscador-vacio) {
    padding: 16px 18px;
    border-radius: var(--border-radius-md);
    background: var(--surface-cream);
  }

  .buscador-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
    p { flex: 1 1 260px; margin: 0; font-size: 0.95rem; }
    .btn { white-space: nowrap; }
  }

  .buscador-vacio {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    &[hidden] { display: none; }
    p { margin: 0; }
    .btn { justify-self: start; }
  }

  .buscador-vacio__titulo {
    font-size: 1.15rem;
    font-weight: 700;
  }

  .buscador-todos-envoltura {
    margin: 12px 0 0;
    &:has(> [hidden]) { display: none; }
  }

  .buscador-todos {
    color: var(--primary-dark);
    font-weight: 500;
    text-decoration: none;
    &::after { content: " →"; }
    &:hover { text-decoration: underline; }
  }

  /* /buscar/: bajo la cabecera fija */
  .buscador-pagina {
    width: min(840px, 100% - 30px);
    margin: calc(var(--header-height) + var(--spacing-lg)) auto var(--spacing-xl);
    h1 { margin: 0 0 24px; }
    .buscador-form {
      border: 1px solid var(--border);
      border-radius: var(--border-radius-md);
      background: var(--white);
    }
  }

  .buscador-pagina__sin-js { margin-top: 16px; }
}