/* Parte 4 de 5 de lo que era styles.css (dividida el 2026-11-06 sin cambiar
   el orden de las reglas): autocompletado y sugerencias de los buscadores, asistente, Libro de Reclamaciones, galería de fotos, páginas de estado y legales, buscador de la portada y menú lateral.
   base.html carga las cinco en orden (styles.css, sitio-navegacion.css, sitio-directorio.css, sitio-componentes.css, sitio-convocatorias.css);
   ese orden importa: a igual especificidad gana la regla que viene después.
   Los tokens (--primary-*, --fs-*…) y los componentes base están en styles.css. */

/* ── Search Autocomplete Dropdown ── */
[data-autocomplete-dropdown],
#searchSuggestions,
.mining-suggest-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  max-height: 480px;
  overflow-y: auto;
  z-index: 1050;
  width: fit-content;
  min-width: 320px;
  max-width: 100%;
}
/* En el popup «Historial» de la ficha (celular) los 320px no entran. */
.mining-suggest-dropdown { min-width: 0; width: 100%; }
[data-autocomplete-dropdown].active,
#searchSuggestions.active,
.mining-suggest-dropdown.active {
  display: block;
  animation: suggest-dropdown-in .18s ease-out;
}

@keyframes suggest-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Título de cada grupo (Búsquedas populares, Clasificación por categorías,
   Proveedores): con una línea debajo que lo separa de sus resultados y,
   cuando viene después de otro grupo, aire y otra línea arriba para que
   se note dónde termina un grupo y empieza el siguiente. */
.suggest-section-label {
  margin: 0 .75rem .25rem;
  padding: .55rem .5rem .4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom: 1px solid var(--card-border);
}
.suggest-item + .suggest-section-label,
.suggest-item-spelling + .suggest-section-label {
  margin-top: .6rem;
  padding-top: .8rem;
  border-top: 1px solid var(--card-border);
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .3rem 1.25rem;
  font-size: var(--fs-md);
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  opacity: 0;
  animation: suggest-item-in .22s ease-out forwards;
  transition: background .15s ease, color .15s ease, border-color .15s ease, padding-left .15s ease;
}
.suggest-item:nth-child(1) { animation-delay: .01s; }
.suggest-item:nth-child(2) { animation-delay: .03s; }
.suggest-item:nth-child(3) { animation-delay: .05s; }
.suggest-item:nth-child(4) { animation-delay: .07s; }
.suggest-item:nth-child(5) { animation-delay: .09s; }
.suggest-item:nth-child(6) { animation-delay: .11s; }
.suggest-item:nth-child(n+7) { animation-delay: .12s; }

@keyframes suggest-item-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.suggest-item:hover,
.suggest-item.is-active {
  background: var(--gold-pale);
  color: var(--navy);
  border-left-color: var(--gold);
  padding-left: 1.45rem;
}
.suggest-item strong { color: var(--navy); font-weight: 700; }

/* Etiqueta en el desplegable: a la derecha, cuántas fichas la tienen. */
.suggest-item-tag { justify-content: space-between; }
.suggest-count {
  flex-shrink: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  background: var(--gray-bg); border-radius: var(--radius-pill); padding: 0 .5rem; line-height: 1.5;
}

/* Etiquetas que nombran lo buscado, arriba del listado del directorio. */
.dir-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-sm); }
.dir-etiquetas-titulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-title); margin-right: 2px; }
.dir-etiquetas-titulo .bi { color: var(--gold-dark); }
.dir-etiqueta {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 11px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--card-border); color: var(--text-title);
  text-decoration: none; font-weight: 500; transition: border-color .15s, background .15s;
}
.dir-etiqueta:hover { border-color: var(--navy-light); background: var(--gold-pale); color: var(--navy); }
.dir-etiqueta span {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  background: var(--gray-bg); border-radius: var(--radius-pill); padding: 0 7px; line-height: 1.6;
}
.dir-etiquetas-nota { flex: 0 0 100%; font-size: var(--fs-xs); color: var(--text-muted); }
.suggest-item-spelling { border-bottom: 1px solid rgba(0, 0, 0, .06); }
/* La separación entre grupos la pone el título siguiente (ver .suggest-section-label). */

/* ── Chatbot asistente (compradores/admin) ── */
.chatbot-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1055;
}

.chatbot-bubble {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: var(--navy-dark);
  padding: 0;
  box-shadow: 0 6px 20px rgba(6,20,40,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chatbot-bubble:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(6,20,40,.45); }
.chatbot-bubble:active { transform: scale(.94); }
.chatbot-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.chatbot-bubble.active img { transform: scale(.88) rotate(-8deg); }

.chatbot-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 88px;
  width: min(420px, calc(100vw - 40px));
  height: min(600px, calc(100vh - 120px));
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.96);
  transition: opacity .22s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility .22s;
}
.chatbot-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.chatbot-panel-header {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: #fff;
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-shrink: 0;
}
.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.chatbot-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}
.chatbot-header-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.chatbot-header-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
}
.chatbot-header-sub {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.65);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatbot-panel-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  font-size: var(--fs-base);
  cursor: pointer;
  flex-shrink: 0;
}
.chatbot-panel-close:hover { color: #fff; }

.chatbot-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gray-bg) 140px);
}

.chatbot-message-row {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  max-width: 90%;
  animation: chatbot-msg-in .25s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chatbot-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chatbot-message-row-assistant { align-self: flex-start; }
.chatbot-message-row-user { align-self: flex-end; }
.chatbot-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.chatbot-message {
  padding: .7rem .95rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  text-align: center;
  white-space: pre-wrap;
  min-width: 0;
}
.chatbot-message-user {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chatbot-message-assistant {
  background: #fff;
  color: var(--text-title);
  box-shadow: 0 1px 4px rgba(10,38,71,.08);
  border-bottom-left-radius: 4px;
}
.chatbot-message-row.chatbot-typing .chatbot-message { opacity: .6; font-style: italic; }

.chatbot-suppliers {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-self: stretch;
  animation: chatbot-msg-in .3s cubic-bezier(.2,.8,.2,1) both;
}
.chatbot-supplier-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.chatbot-supplier-card:hover { border-color: var(--gold); transform: translateX(2px); }
.chatbot-supplier-card strong { color: var(--navy); font-size: var(--fs-base); }
.chatbot-supplier-card span { color: var(--text-muted); font-size: var(--fs-sm); }
.chatbot-supplier-desc {
  line-height: 1.4;
  margin-top: .15rem;
}
.chatbot-supplier-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}
.chatbot-supplier-tag {
  background: var(--gold-pale);
  color: var(--navy);
  border-radius: var(--radius-pill);
  padding: .18rem .6rem;
  font-size: var(--fs-xs);
  font-weight: 500;
}

.chatbot-panel-footer {
  display: flex;
  gap: .5rem;
  padding: .75rem;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
  background: #fff;
}
.chatbot-panel-footer input {
  flex: 1;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: .6rem 1.1rem;
  font-size: var(--fs-base);
  outline: none;
}
.chatbot-panel-footer input:focus { border-color: var(--gold); }
.chatbot-panel-footer button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--navy-light);
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  font-size: var(--fs-lg);
}
.chatbot-panel-footer button:hover { background: var(--navy-dark); }

@media (max-width: 480px) {
  .chatbot-widget { right: 12px; bottom: 12px; }
  .chatbot-panel { right: -8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOVIMIENTO — transiciones de página, scroll reveal y reduced motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── Scroll reveal ──
   Las tarjetas aparecen cuando entran en pantalla, no todas de golpe al
   cargar (antes las de abajo del fold gastaban su animación sin que
   nadie las viera). El escalonado lo calcula main.js según el orden en
   que entran, así funciona con cualquier cantidad de resultados.

   El estado oculto cuelga de .reveal-ready, una clase que main.js pone
   en <html>: sin JS, o con reduced motion, el contenido se ve siempre. */
[data-reveal] {
  transition: opacity .45s cubic-bezier(.2,.8,.2,1),
              transform .45s cubic-bezier(.2,.8,.2,1);
}
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ── Menos movimiento ──
   Para quien lo pide a nivel sistema: nada de animaciones, sin excepción.
   El movimiento le puede provocar mareo real, así que esto va al final
   del archivo para ganarle en cascada a cualquier regla de arriba. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Libro de Reclamaciones (distintivo del pie y cabecera del formulario) ── */
.libro-reclamaciones-link {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem .8rem .45rem .5rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: .5rem;
  color: #fff; text-decoration: none; line-height: 1.1;
  transition: background .15s, border-color .15s;
}
.libro-reclamaciones-link:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }
.libro-reclamaciones-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: .4rem;
  background: #fff; color: var(--navy); font-size: var(--fs-3xl);
}
.libro-reclamaciones-texto { display: flex; flex-direction: column; font-size: var(--fs-sm); letter-spacing: .02em; }
.libro-reclamaciones-texto small { font-size: var(--fs-xs); opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
/* Libro de reclamaciones: opciones y casilla de autorización con el tamaño
   de Bootstrap y una etiqueta de 32px o más para el dedo (M-09, 2026-11-02). */
.reclamo-form .form-check { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding-left: 0; margin-bottom: 0; }
.reclamo-form .form-check-input { float: none; flex: none; width: 20px; height: 20px; margin: 6px 0 0; }
.reclamo-form .form-check-label { padding-block: 4px; cursor: pointer; }
.intro-block .libro-reclamaciones-badge { width: 3.2rem; height: 3.2rem; font-size: var(--fs-4xl); background: var(--navy); color: #fff; }

/* ── Cotización grupal ───────────────────────────────────────────────── */

/* Botón «Guardar» de la ficha (.pp-btn.btn-card-quote, el nombre viene del
   antiguo botón «Cotizar», retirado el 2026-10-12): blanco; guardado, se
   rellena en azul con el marcador. El selector doble le gana a los colores
   de .pp-btn. */
.btn-card-quote,
:is(.btn-card, .pp-btn).btn-card-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #C3D3EC;
  color: var(--text-heading);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(1, 37, 110, .06), 0 2px 6px rgba(1, 37, 110, .06);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s;
}
:is(.btn-card, .pp-btn).btn-card-quote .bi { font-size: 1.05em; line-height: 1; }
:is(.btn-card, .pp-btn).btn-card-quote:hover:not(:disabled) {
  background: #fff; border-color: var(--text-heading); color: var(--text-heading);
  box-shadow: 0 4px 12px rgba(1, 37, 110, .14); transform: translateY(-1px);
}
:is(.btn-card, .pp-btn).btn-card-quote:focus-visible { outline: 2px solid var(--text-heading); outline-offset: 2px; }
:is(.btn-card, .pp-btn).btn-card-quote.is-selected {
  background: var(--text-heading); border-color: var(--text-heading); color: #fff;
  box-shadow: 0 4px 12px rgba(1, 37, 110, .22);
}
:is(.btn-card, .pp-btn).btn-card-quote.is-selected:hover { background: #083188; border-color: #083188; color: #fff; }
:is(.btn-card, .pp-btn).btn-card-quote:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* En la ficha el boton usa clases de Bootstrap, no btn-card: ahi el <span>
   del texto no debe heredar el tamano chico de la tarjeta. */
.btn .btn-card-label { font-size: inherit; }


/* Pagina /cotizacion/ */
.quote-page { max-width: 860px; }

.quote-selection-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
}
.quote-selection-name {
  color: var(--text-title); font-weight: 600; text-decoration: none;
}
.quote-selection-name:hover { color: var(--gold-dark); text-decoration: underline; }
.quote-selection-warn { color: var(--warning-fg); }


@media (max-width: 576px) {
  .quote-selection-item { flex-wrap: wrap; }
}

/* ── Fotos de la galería de una ficha ("Editar mi perfil" y el panel) ── */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.photo-grid-item {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .1); background: #f3f4f6;
}
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid-item form { margin: 0; }
.photo-grid-status {
  position: absolute; left: 6px; bottom: 6px; font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-xs); line-height: 1.3;
}
.photo-grid-delete {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--danger-fg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.photo-grid-delete:hover { background: #fff; }

/* ─── Tarjeta de estado (403, 404, ficha bloqueada) ─────────────── */
.status-card {
  text-align: center; padding: 3rem 1.5rem;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  border-top: 4px solid var(--gold);
}
.status-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--gold-pale); border: 2px solid var(--gold-light);
}
.status-card-icon .bi { font-size: var(--fs-5xl); color: var(--gold-dark); }
.status-card-title { color: var(--text-heading); font-family: var(--font-sans); }
.status-card-text { font-size: var(--fs-md); max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.65; }
.status-card-actions { max-width: 280px; margin: 0 auto; }
.status-card-link { color: var(--navy); }

/* ─── Página de categoría ───────────────────────────────────────── */
.category-hero { background: var(--gray-bg); border: 1px solid var(--card-border); }
.category-hero-title { color: var(--text-heading); letter-spacing: -.01em; }
.category-hero-text { color: var(--text-body); line-height: 1.7; }
.category-others { border-top: 1px solid var(--card-border); }
.category-others-title { color: var(--text-title); }
.category-chip { background: var(--gold-pale); color: var(--navy); padding: .5rem .9rem; font-weight: 500; }

/* ─── Páginas legales ───────────────────────────────────────────── */
.legal-content { font-size: var(--fs-base); line-height: 1.7; }
/* Logos y nombres ya difuminados en el servidor (suppliers/difuminado.py). */
.directory-teaser-img-logo { display: block; width: 104px; height: 62px; border-radius: var(--radius-md); object-fit: cover; }
.directory-teaser-img-nombre { display: block; width: 180px; max-width: 100%; height: 22px; opacity: .85; }

/* ─── Zona de adjuntos del mensaje directo (_contact_modal.html). Los
   nombres quote-* vienen del pop-up de cotización, retirado. ─── */

.quote-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 14px; border: 2px dashed var(--card-border); border-radius: var(--radius-lg);
  background: var(--gray-bg); text-align: center; cursor: pointer; font-size: var(--fs-md); color: var(--text-body);
  transition: border-color .15s, background .15s;
}
.quote-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.quote-drop .bi { font-size: var(--fs-4xl); color: #d0342c; }
.quote-drop strong { color: var(--navy); }
.quote-drop small { color: var(--text-muted); font-size: var(--fs-xs); }
.quote-drop:hover, .quote-drop.is-encima { border-color: var(--navy-light); background: var(--gold-pale); }
.quote-drop.is-lleno { opacity: .55; pointer-events: none; }
.quote-files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quote-files li {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); font-size: var(--fs-sm);
}
.quote-files li .bi-file-earmark-pdf { color: #d0342c; font-size: var(--fs-lg); }
.quote-file-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-title); }
.quote-files small { color: var(--text-muted); white-space: nowrap; }
.quote-files button { border: none; background: transparent; color: var(--text-muted); width: 26px; height: 26px; border-radius: var(--radius-sm); }
.quote-files button:hover { background: #fdecec; color: var(--danger-fg); }
#contactModal .invalid-msg { color: var(--danger-solid); font-size: var(--fs-sm); margin-top: .3rem; font-weight: 500; }
#contactModal .invalid-msg:empty { display: none; }
/* Mensaje directo: la misma zona de archivos, pero acepta imágenes además de PDF. */
#contactModal .quote-drop .bi-paperclip { color: var(--navy); }
.quote-files li .bi-file-earmark-image { color: var(--navy); font-size: var(--fs-lg); }
.staff-consulta-archivos { list-style: none; padding: 0; }

/* ─── Portada sin cuenta: buscador grande (_hero_buscador.html) ───
   Buscador de 920px con botón azul sólido, sobre un azul entero del mismo
   tono que la barra superior (pedido 2026-10-07; antes un degradado vertical
   que se aclaraba hasta un azul medio, antes blanco liso, antes el azul de
   la marca en diagonal, y antes una foto).
   Todo el bloque queda azul: título, subtítulo y «Búsquedas populares» van
   en blanco; las etiquetas son píldoras blancas opacas. */
.hero-directorio {
  /* Sin overflow: hidden: el desplegable del autocompletado tiene que poder
     salir por debajo del bloque. */
  position: relative; z-index: 5; color: #fff;
  /* El tono con que se VE .minder-navbar: sus dos azules al 92% sobre el
     fondo claro de la página (#1E3D6F y #1D3755). Con los azules puros el
     buscador quedaba más oscuro que la barra. */
  background: linear-gradient(135deg, var(--primary-700) 0%, #1D3755 100%);
}
.hero-directorio-inner { position: relative; z-index: 1; padding: 3rem 1rem 3.5rem; text-align: center; }
.hero-directorio-title {
  font-family: var(--font-sans); font-size: var(--fs-3xl); font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 .5rem; color: #fff;
}
.hero-directorio-sub { font-size: var(--fs-sm); color: #dbe6f5; margin: 0 auto 2rem; max-width: 800px; }

/* Caja de búsqueda (diseño pasado el 2026-10-01): píldora blanca con el botón
   adentro y, alrededor, un borde luminoso que va cambiando de color (ámbar,
   azul, celeste). El halo es un elemento aparte detrás del formulario: el
   desplegable de sugerencias sigue anclado a la píldora. */
.hero-search-wrap { position: relative; max-width: 920px; margin: 0 auto 2rem; }
.hero-search-beam {
  position: absolute; inset: -2px; border-radius: var(--radius-pill); pointer-events: none;
  background: linear-gradient(90deg, rgba(245, 158, 11, .4), rgba(59, 130, 246, .9), rgba(56, 189, 248, .4), rgba(245, 158, 11, .6));
  background-size: 300% 300%; opacity: .75; filter: blur(2px);
  animation: hero-search-beam 4s linear infinite; transition: opacity .3s, filter .3s;
}
.hero-search-wrap:hover .hero-search-beam, .hero-search-wrap:focus-within .hero-search-beam { opacity: 1; filter: blur(3px); }
@keyframes hero-search-beam { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-search {
  display: flex; align-items: center; gap: 6px;
  padding: 8px; border-radius: var(--radius-pill); background: #fff;
  box-shadow: 0 25px 50px -12px rgba(10, 38, 71, .25);
  transition: box-shadow .3s;
}
.hero-search:focus-within { box-shadow: 0 0 25px rgba(59, 130, 246, .35); }
.hero-search-field { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.hero-search-field > .icon {
  position: absolute; left: 22px; width: 22px; height: 22px; color: #94a3b8; pointer-events: none; transition: color .2s;
}
.hero-search:focus-within .hero-search-field > .icon { color: var(--primary-700); }
.hero-search-input {
  width: 100%; height: 56px; padding: 0 1rem 0 58px; border: none; outline: none;
  border-radius: var(--radius-pill); font-size: var(--fs-lg); color: #1e293b; background: transparent;
}
.hero-search-input::placeholder { color: var(--text-muted); }
.hero-search-btn {
  display: inline-flex; align-items: center; gap: .5rem; height: 56px; padding: 0 2rem; border: none;
  /* El mismo azul del navbar y del fondo del buscador (2026-10-07). */
  border-radius: var(--btn-radius); background: var(--primary-700); color: #fff; flex-shrink: 0;
  font-size: var(--fs-lg); font-weight: 600; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(10, 38, 71, .2);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.hero-search-btn:hover { background: var(--btn-primary-bg-hover); transform: scale(1.02); box-shadow: 0 10px 15px -3px rgba(10, 38, 71, .25); }
.hero-search-btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .hero-search-beam { animation: none; }
  .hero-search-btn:hover, .hero-search-btn:active { transform: none; }
}
.hero-search-btn .icon { width: 17px; height: 17px; }
/* El desplegable del autocompletado, debajo del campo grande. */
.hero-search-field [data-autocomplete-dropdown] { top: calc(100% + 6px); left: 0; right: 0; text-align: left; }

.hero-populares-title { font-size: var(--fs-md); color: #fff; margin: 0 0 1rem; }
/* Del mismo ancho que el buscador (920px): las etiquetas no sobresalen por
   los costados de la barra. */
.hero-populares-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 920px; margin: 0 auto; }
.hero-popular {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 300px;
  padding: .35rem .8rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); text-decoration: none;
  color: var(--navy-light); background: #fff; border: 1px solid rgba(11, 45, 99, .14);
  box-shadow: 0 2px 6px rgba(10, 38, 71, .12);
  transition: background .2s, border-color .2s;
}
.hero-popular span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-popular .icon { width: 11px; height: 11px; color: var(--text-muted); flex-shrink: 0; }
.hero-popular-todas { font-weight: var(--fw-semibold); }
.footer-categories-list .footer-categories-todas { font-weight: var(--fw-semibold); }
.hero-popular:hover { background: var(--gold-pale); border-color: var(--gold); color: var(--navy-light); }

@media (max-width: 768px) {
  .hero-directorio-inner { padding: 1.6rem 1rem 2.4rem; }
  /* En celular sigue siendo una píldora; el botón queda solo con la lupa. */
  .hero-search-wrap { margin-bottom: 1.5rem; }
  .hero-search { padding: 5px; }
  /* 16px para que iPhone no acerque la página al tocar el campo; el
     relleno se achica un poco para que el ejemplo siga entrando entero. */
  .hero-search-input { height: 46px; padding-left: 40px; padding-right: 4px; font-size: var(--fs-lg); }
  .hero-search-field > .icon { left: 14px; width: 18px; height: 18px; }
  .hero-search-btn { height: 46px; width: 46px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .hero-search-btn .icon { width: 19px; height: 19px; }
}
@media (max-width: 576px) {
  .hero-popular:nth-child(n+6) { display: none; }  /* en celular, solo las 5 primeras */
  /* En celular el buscador va arriba de todo: título y subtítulo empujaban
     el campo a media pantalla y, con el teclado abierto, las sugerencias
     quedaban tapadas. */
  .hero-directorio-title,
  .hero-directorio-sub { display: none; }
  .hero-directorio-inner { padding-top: .6rem; }
}

/* ─── Cuadro de sugerencias de los buscadores (search-autocomplete.js) ───
   Diseño sobrio y del mismo ancho que el buscador donde aparece: se ancla a
   la píldora completa (barra superior o buscador grande de la portada), no
   al campo de texto de adentro, así ocupa exactamente su ancho. */
.navbar-search .search-bar,
.hero-search { position: relative; }
.navbar-search .search-bar-wrap,
.hero-search-field { position: static; }

/* Con el id en el selector: la regla general de más arriba usa
   #searchSuggestions (width: fit-content; min-width: 320px) y le ganaba. */
.navbar-search #searchSuggestions,
.hero-search #searchSuggestions,
.navbar-search [data-autocomplete-dropdown],
.hero-search [data-autocomplete-dropdown] {
  left: 0; right: 0; width: auto; min-width: 0; max-width: none;
  top: calc(100% + 8px);
  text-align: left;
}
.navbar-search [data-autocomplete-dropdown],
.hero-search [data-autocomplete-dropdown],
#searchSuggestions {
  padding: 6px 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(10, 38, 71, .16), 0 2px 6px rgba(10, 38, 71, .06);
  max-height: min(460px, 70vh);
  /* La lista puede ser larga: el scroll queda contenido acá y su canal
     conserva un espacio estable para que los textos no salten al aparecer. */
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

/* Scrollbar del buscador: una guía azul fina que acompaña la paleta del sitio
   y deja aire contra las esquinas redondeadas del cuadro de sugerencias. */
#searchSuggestions::-webkit-scrollbar { width: 11px; }
#searchSuggestions::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 10px;
}
#searchSuggestions::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: var(--gold);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
}
#searchSuggestions::-webkit-scrollbar-thumb:hover { background-color: var(--gold-dark); }
#searchSuggestions::-webkit-scrollbar-thumb:active { background-color: var(--navy-light); }
#searchSuggestions::-webkit-scrollbar-corner { background: transparent; }
#searchSuggestions.active { animation: suggest-dropdown-in .14s ease-out; }

#searchSuggestions .suggest-section-label {
  padding: 12px 20px 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
  color: var(--text-muted);
  border-top: 1px solid var(--gray-bg);
}
#searchSuggestions .suggest-section-label:first-child { border-top: none; padding-top: 8px; }

#searchSuggestions .suggest-item {
  gap: .6rem;
  padding: 9px 20px;
  font-size: var(--fs-md); line-height: 1.35;
  color: var(--text-title);
  border-left: none;
  opacity: 1; animation: none;
  transition: background .12s ease;
}
#searchSuggestions .suggest-item:hover,
#searchSuggestions .suggest-item.is-active {
  background: var(--gray-bg);
  color: var(--text-title);
  padding-left: 20px;
}
#searchSuggestions .suggest-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#searchSuggestions .suggest-item strong { color: var(--navy); font-weight: 700; }
/* Proveedores en mayúscula sostenida (razón social): un poco más chicos. */
#searchSuggestions .suggest-item-supplier { font-size: var(--fs-md); }
#searchSuggestions .suggest-item-spelling { border-bottom: 1px solid var(--gray-bg); color: var(--text-body); }
/* Historial de búsquedas (sin sesión, al tocar la barra vacía): cada una con
   su × para quitarla y "Borrar" para vaciarlo. */
#searchSuggestions .suggest-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#searchSuggestions .suggest-clear { padding: 0; border: 0; background: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gold-dark); }
#searchSuggestions .suggest-clear:hover { text-decoration: underline; }
#searchSuggestions .suggest-recent { display: flex; align-items: center; }
#searchSuggestions .suggest-recent .suggest-item { flex: 1; min-width: 0; }
#searchSuggestions .suggest-item-recent .icon { color: var(--text-muted); }
#searchSuggestions .suggest-remove { flex-shrink: 0; width: 28px; height: 28px; margin-right: 12px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: var(--fs-xl); line-height: 1; }
#searchSuggestions .suggest-remove:hover { background: var(--gray-bg); color: var(--text-title); }

/* ── Menú lateral (includes/_sidebar.html, static/js/sidebar.js) ──
   Solo con sesión iniciada. En PC ocupa una columna fija bajo la barra de
   arriba y el body le deja el espacio con padding; la barra lo recupera con
   margen negativo para seguir a todo el ancho, como en Gmail. Contraído
   (html.sb-collapsed) queda en íconos. En celular es un cajón. */
:root {
  --sb-w-open: 244px;
  --sb-w-closed: 72px;
  --sb-w: var(--sb-w-open);
  /* Altura de la barra de arriba en PC; base.html la corrige con la real
     apenas se pinta la barra, y sidebar.js la sigue al cambiar de ancho. */
  --nav-h: 79px;
}
html.sb-collapsed { --sb-w: var(--sb-w-closed); }

.sb-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: var(--fs-3xl);
  transition: background-color .15s ease;
}
.sb-toggle:hover,
.sb-toggle:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }

.minder-sidebar {
  position: fixed;
  left: 0;
  top: var(--nav-h);
  bottom: 0;
  z-index: 1020;
  width: var(--sb-w);
  background: #fff;
  border-right: 1px solid var(--card-border);
  transition: width .2s ease, transform .22s ease;
}
.sb-scroll {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 10px 14px;
  /* Barra de desplazamiento discreta (2026-10-13): la gris de siempre no
     iba con el menú. Fina, sin carril y transparente; aparece suave solo
     con el mouse encima o al navegar con teclado. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sb-scroll:hover,
.sb-scroll:focus-within { scrollbar-color: rgba(16, 24, 40, .16) transparent; }
.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-track { background: transparent; }
.sb-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.sb-scroll:hover::-webkit-scrollbar-thumb,
.sb-scroll:focus-within::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .16); }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list > li { margin-bottom: 2px; }
.sb-bottom { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--card-border); }

.sb-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px 0 15px;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-title);
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.sb-link > .bi:first-child { flex: 0 0 20px; font-size: var(--fs-xl); text-align: center; color: var(--navy-light); }
/* Ícono de línea del sitio (sprite _line_icons.html), del mismo tamaño que los .bi. */
.sb-link > .sb-icon:first-child { flex: 0 0 20px; width: 20px; height: 20px; stroke-width: 1.6; color: var(--navy-light); }
.sb-link:hover { background: var(--gray-bg); color: var(--navy); }
.sb-link:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: -2px; }
.sb-link.active { background: var(--gold-pale); color: var(--navy); font-weight: 700; }
.sb-link:disabled { opacity: .5; cursor: default; background: transparent; }
.sb-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; transition: opacity .16s ease .04s; }
.sb-badge {
  flex: 0 0 auto;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-md);
  background: var(--navy-mid);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.sb-badge-danger { background: var(--danger-solid); }
.sb-sub .sb-link { min-height: 36px; font-size: var(--fs-md); }
.sb-sub .sb-link > .bi:first-child { font-size: var(--fs-lg); }

/* Panel de Pendientes (junto al menú; en celular, centrado bajo la barra). */
.sb-pop {
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  left: calc(var(--sb-w) + 10px);
  z-index: 1050;
  width: 380px;
  max-height: calc(100vh - var(--nav-h) - 20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(4, 24, 54, .22);
  animation: sb-pop-in .16s ease-out;
}
.sb-pop[hidden] { display: none; }
@keyframes sb-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sb-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 12px 18px;
  border-bottom: 1px solid var(--card-border);
}
.sb-pop-title { margin: 0; color: var(--text-heading); font-size: var(--fs-lg); font-weight: 700; }
.sb-pop-sub { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.sb-pop-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
}
.sb-pop-close:hover { background: var(--gray-bg); color: var(--text-title); }
.sb-pop-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.sb-pop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--radius-lg);
  color: var(--text-title);
  text-decoration: none;
  transition: background-color .15s ease;
}
.sb-pop-item:hover,
.sb-pop-item:focus-visible { background: var(--gray-bg); color: var(--navy); }
.sb-pop-ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--gold-pale);
  color: var(--navy-light);
  font-size: var(--fs-lg);
}
.sb-pop-ico-buyer { background: var(--success-bg); color: var(--success-fg); }
.sb-pop-ico-reclamacion { background: var(--danger-bg); color: var(--danger-fg); }
.sb-pop-ico-attachment,
.sb-pop-ico-certification { background: var(--warning-bg); color: var(--warning-fg); }
.sb-pop-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sb-pop-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: 600; }
.sb-pop-body small { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }
.sb-pop-arrow { flex: 0 0 auto; color: #c0c7d2; font-size: var(--fs-sm); }
.sb-pop-empty { padding: 28px 20px; text-align: center; color: var(--text-muted); }
.sb-pop-empty .sb-pop-ico { margin: 0 auto 10px; background: var(--success-bg); color: var(--success-fg); }
.sb-pop-empty p { margin: 0; font-size: var(--fs-md); }
.sb-pop-foot { padding: 10px 18px 14px; border-top: 1px solid var(--card-border); }
.sb-pop-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.sb-pop-foot a:hover { color: var(--navy); }
@media (min-width: 992px) and (max-width: 1279.98px) {
  .sb-pop { left: calc(var(--sb-w-closed) + 10px); }
}
@media (max-width: 991.98px) {
  .sb-pop { left: 12px; right: 12px; width: auto; max-width: 440px; margin-inline: auto; }
}

.sb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(6, 20, 40, .45);
}
.sb-backdrop[hidden] { display: none; }

@media (min-width: 992px) {
  body.has-sidebar { padding-left: var(--sb-w); transition: padding-left .2s ease; }
  /* La barra de arriba ocupa todo el ancho y el ☰ queda sobre los íconos. */
  body.has-sidebar .minder-navbar { margin-left: calc(-1 * var(--sb-w)); transition: margin-left .2s ease; }
  body.has-sidebar .minder-navbar > .container,
  body.has-sidebar .directory-navbar.buyer-navbar > .container {
    max-width: none;
    padding-left: 14px;
    padding-right: 24px;
    grid-template-columns: auto auto minmax(220px, 1fr) auto;
  }
  body.has-sidebar .sb-toggle { grid-column: 1; grid-row: 1; margin-right: 6px; }
  body.has-sidebar .directory-navbar .navbar-brand { grid-column: 2; }
  body.has-sidebar .directory-navbar .navbar-search { grid-column: 3; }
  body.has-sidebar .directory-navbar .navbar-right { grid-column: 4; }
}

/* Contraído: solo íconos. En pantallas anchas lo decide la persona con el ☰
   (html.sb-collapsed); entre 992 y 1279px, con el menú abierto las tarjetas
   quedaban muy apretadas, así que ahí va siempre en íconos y el ☰ lo abre
   por encima del contenido.
   Sin saltos al plegar/desplegar: los íconos NO se mueven (con el padding de
   siempre ya quedan en el centro de la columna de 72px) y los textos se
   desvanecen en vez de desaparecer de golpe; el ancho del menú los recorta.
   Antes se centraban con justify-content y, mientras el ancho se animaba,
   saltaban ~50px a la derecha y volvían. */
@media (min-width: 1280px) {
  html.sb-collapsed .minder-sidebar .sb-text { opacity: 0; transition-delay: 0s; }
  html.sb-collapsed .minder-sidebar .sb-sub { display: none; }
  html.sb-collapsed .minder-sidebar .sb-badge {
    position: absolute; top: 3px; left: 30px;
    min-width: 17px; height: 17px; padding: 0 4px; font-size: var(--fs-xs); line-height: 17px;
  }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  :root, html.sb-collapsed { --sb-w: var(--sb-w-closed); }
  html.sb-open .minder-sidebar { width: var(--sb-w-open); z-index: 1045; box-shadow: 0 0 30px rgba(6, 20, 40, .25); }
  html:not(.sb-open) .minder-sidebar .sb-text { opacity: 0; transition-delay: 0s; }
  html:not(.sb-open) .minder-sidebar .sb-sub { display: none; }
  html:not(.sb-open) .minder-sidebar .sb-badge {
    position: absolute; top: 3px; left: 30px;
    min-width: 17px; height: 17px; padding: 0 4px; font-size: var(--fs-xs); line-height: 17px;
  }
}

@media (max-width: 991.98px) {
  .minder-sidebar {
    top: 0;
    z-index: 1045;
    width: min(290px, 85vw);
    transform: translateX(-100%);
    box-shadow: 0 0 30px rgba(6, 20, 40, .25);
  }
  html.sb-open .minder-sidebar { transform: none; }
  html.sb-open body { overflow: hidden; }
  /* ☰ a la derecha, donde estaba el menú de siempre en celular. */
  .minder-navbar .sb-toggle { grid-column: 3; grid-row: 1; width: 44px; height: 44px; border-radius: var(--radius-md);
    background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: var(--fs-3xl); }
}
@media (max-width: 480px) {
  .minder-navbar .sb-toggle { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .minder-sidebar, body.has-sidebar, body.has-sidebar .minder-navbar { transition: none; }
}