/* =====================================================
   MINDER — redmin.pe — Custom Styles
   ===================================================== */

/* Alibaba Sans (fuente oficial de Alibaba, gratis para uso comercial),
   servida desde static/fonts: la CDN de Alibaba bloquea el enlace directo
   desde otros dominios. No hay peso 600 ni cursiva: el navegador usa Bold
   para 600 y sintetiza la cursiva. */
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Regular.559293ed8e40.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Medium.562758f91b19.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Bold.aec1d85346ed.woff2") format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Heavy.97deed845e28.woff2") format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alibaba Sans'; src: url("../fonts/alibaba-sans/AlibabaSans-Black.f4f35015787c.woff2") format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --font-sans:    'Alibaba Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bs-body-font-family: var(--font-sans);
  --bs-font-sans-serif: var(--font-sans);
  --navy:         #0A2647;
  --navy-dark:    #061428;
  --navy-light:   #0D3575;
  --navy-mid:     #1A4A9C;
  /* Degradado de los botones principales (azul medio -> navy claro). */
  --grad-navy:    linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-light) 100%);
  /* Estrella de "destacado". */
  --star:         #f5a623;
  --gold:         #85AAD6;
  --gold-light:   #A8C4E3;
  --gold-pale:    #EAF1F9;
  --gold-ink:     var(--navy-dark);
  /* --gold da ~2.4:1 de contraste sobre blanco (falla WCAG AA para texto,
     que pide 4.5:1) -- se usa igual para íconos/insignias decorativos,
     pero para texto real (links, títulos) hay que usar esta variante más
     oscura. Misma familia de color, legible. */
  --gold-dark:    #3D6EA8;
  --accent-blue:  #6d87b9;
  --gray-bg:      #F7F8FA;
  --card-border:  #E5E7EB;
  --text-title:   #101828;
  --text-body:    #667085;
  --text-dark:    #101828;
  --text-muted:   #667085;
  /* Paleta tipográfica del sitio: títulos y subtítulos (h1-h6) y párrafos. */
  --text-heading:   #012C81;
  --text-paragraph: #232A3B;
  /* Bootstrap pinta con esta variable los h1-h6 y las clases .h1-.h6. */
  --bs-heading-color: var(--text-heading);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --radius-card:  8px;
  --radius-btn:   6px;
}

/* ── Ancho del sitio ──
   El .container de Bootstrap se queda en 1140px (xl) / 1320px (xxl) y en
   monitores anchos deja franjas vacías a los costados. Se estira un poco en
   cada escalón; el navbar y el footer usan el mismo .container, así que
   siguen alineados con el contenido. */
@media (min-width: 1200px) { .container { max-width: 1240px; } }
@media (min-width: 1400px) { .container { max-width: 1400px; } }
@media (min-width: 1700px) { .container { max-width: 1560px; } }

/* ── Base ── */
/* overflow-x: clip y no hidden: `hidden` convierte a html/body en
   contenedor de scroll y anula el position: sticky del navbar; `clip`
   recorta el desborde horizontal igual pero deja al navbar pegado arriba. */
html {
  overflow-x: clip;
  /* Reserva siempre el espacio de la barra de scroll vertical: si no, al
     pasar de una página corta a una larga el contenido (y el logo) se
     corren unos píxeles cuando la barra aparece. */
  scrollbar-gutter: stable;
}
body {
  background-color: var(--gray-bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 15px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  max-width: 100vw;
}

/* ── Formularios ──
   El placeholder de Bootstrap usa casi el mismo tono que el texto
   tipeado (rgba negro al 75%); se aclara para que se note que es un
   ejemplo y no algo que el usuario ya escribió. */
/* Una regla por prefijo: juntos en una sola lista, cada navegador
   descartaba la regla entera por no reconocer el prefijo del otro. */
.form-control::placeholder { color: rgba(16, 24, 40, 0.45); opacity: 1; }
.form-control::-webkit-input-placeholder { color: rgba(16, 24, 40, 0.45); }
.form-control::-moz-placeholder { color: rgba(16, 24, 40, 0.45); opacity: 1; }
input[type="date"].form-control:required:invalid {
  color: rgba(16, 24, 40, 0.35);
}
/* Los <select> no tienen ::placeholder — mientras siga elegida la
   opción vacía ("Selecciona un rango...") se aclara igual que un
   placeholder, para que no parezca una opción ya seleccionada. */
.form-select:required:invalid {
  color: rgba(16, 24, 40, 0.35);
}
.form-select option {
  color: var(--text-dark);
}

/* Errores y advertencias del sitio (base.html): fijos arriba del
   contenido, no flotantes. */
.page-alert-wrap { padding-top: 14px; }
.page-alert { display: flex; align-items: center; gap: .65rem; margin: 0; border-radius: 10px; font-size: .92rem; }
.page-alert > .bi { flex-shrink: 0; font-size: 1.05rem; }
.page-alert > span { flex: 1; }
/* Aviso junto al botón Cotizar cuando no se pudo marcar (quote-toggle.js). */
.quote-inline-error { display: block; flex-basis: 100%; margin-top: 6px; color: #B42318; font-size: 12.5px; font-weight: 600; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-heading);
  font-weight: 800;
}
/* Las utilidades de color de Bootstrap/del sitio en un título (h1 con
   text-navy, subtítulos con text-gold-dark) no le cambian el color. */
:is(h1, h2, h3, h4, h5, h6):is(.text-navy, .text-gold-dark, .text-dark) { color: var(--text-heading) !important; }
p { color: var(--text-paragraph); }

/* ── Colors ── */
.text-navy  { color: var(--navy) !important; }
.text-gold  { color: var(--gold) !important; }
/* Para texto real (links, encabezados) en vez de íconos/insignias: ver el
   comentario de --gold-dark arriba. */
.text-gold-dark  { color: var(--gold-dark) !important; }
.text-gold-dark:hover  { color: var(--navy) !important; }
.bg-navy    { background-color: var(--navy) !important; }

/* ── Navbar ──
   Navy sólido de siempre en TODO el sitio -- es "sticky-top" en todas las
   páginas, y ese mismo tono semitransparente que se ve bien encima de la
   foto oscura del hero del directorio se lava a gris apenas hay una
   página blanca detrás (formularios, panel, Convocatorias, etc.). */
.minder-navbar {
  /* Misma barra en todo el sitio: navy translúcido con desenfoque, de modo
     que el contenido que pasa por debajo al hacer scroll se insinúe a
     través suyo. Sin foto detrás el tono va más opaco (.82) para que el
     texto blanco conserve contraste sobre páginas claras. */
  background: linear-gradient(135deg, rgba(13, 53, 117, .92) 0%, rgba(10, 38, 71, .92) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(133, 170, 214, .3);
  box-shadow: 0 2px 12px rgba(10, 38, 71, .18);
  padding-top: 14px;
  padding-bottom: 14px;
}
.navbar-brand {
  flex: 0 0 auto;
  margin-right: 0;
}
.navbar-brand-logo {
  display: block;
  width: auto;
  height: 46px;
  object-fit: contain;
}
/* En el directorio, la búsqueda toma el lugar del antiguo botón de acceso.
   Se mantiene compacta para dejar aire al logo y a las acciones de cuenta. */
.navbar-search {
  flex: 1 1 420px;
  min-width: 240px;
  max-width: 560px;
  margin: 0 clamp(18px, 3vw, 46px);
}
.navbar-search .search-bar {
  height: 44px;
  padding: 0 5px 0 17px;
  gap: 10px;
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 5px 16px rgba(4, 24, 54, .18);
}
.navbar-search .search-bar-input {
  height: 42px;
  font-size: 14px;
}
.navbar-search .search-bar-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}
.navbar-search .search-bar-btn .icon { width: 16px; height: 16px; }
.navbar-search [data-autocomplete-dropdown] {
  min-width: min(390px, 80vw);
  text-align: left;
}
/* En escritorio, logo, búsqueda y navegación comparten una sola fila. Los
   enlaces de trabajo (Registro, Panel Admin, etc.) quedan en el bloque de la
   derecha junto a la cuenta, nunca debajo del buscador. */
@media (min-width: 992px) {
  .directory-navbar .container {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    column-gap: clamp(12px, 1.6vw, 24px);
    align-items: center;
  }
  .directory-navbar .navbar-brand-logo { height: 40px; }
  .directory-navbar .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .directory-navbar .navbar-search {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 520px;
    margin: 0;
    justify-self: center;
  }
  .directory-navbar .navbar-right {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-self: end;
    width: max-content;
  }
  .directory-navbar .navbar-collapse {
    display: flex !important;
    align-items: center;
  }
  .directory-navbar .navbar-primary-links {
    flex-direction: row;
    margin: 0 !important;
    align-items: center;
  }
  .directory-navbar .navbar-account-links {
    flex-direction: row;
    margin-left: 8px !important;
  }
  .directory-navbar .navbar-primary-links .nav-link {
    padding-inline: .72rem;
    font-size: .82rem;
  }
  /* En una sesión de comprador, las columnas laterales pesan lo mismo: el
     buscador queda centrado respecto al viewport aunque logo y cuenta tengan
     anchos distintos. Las acciones propias del comprador siguen a la derecha. */
  .directory-navbar.buyer-navbar .container {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) minmax(0, 1fr);
  }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
  .directory-navbar .navbar-brand-logo { height: 36px; }
  .directory-navbar .navbar-search { max-width: 400px; }
  .directory-navbar .navbar-primary-links .nav-link { padding-inline: .55rem; }
  .directory-navbar .navbar-user-pill > span:last-child { display: none !important; }
  .directory-navbar.buyer-navbar .container {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 400px) minmax(0, 1fr);
  }
}
@media (max-width: 991.98px) {
  .minder-navbar { padding-block: 10px; }
  /* La grilla hace determinista el encabezado móvil: el logo y el botón de
     opciones siempre comparten la primera fila; búsqueda y menú usan todo
     el ancho debajo, sin depender del wrapping interno de Bootstrap. */
  .minder-navbar .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 10px;
    width: 100%;
  }
  /* Sus hijos se ubican directo en la grilla del encabezado. */
  .minder-navbar .navbar-right { display: contents; }
  .minder-navbar .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    justify-self: start;
  }
  .navbar-brand-logo {
    width: auto;
    max-width: 100%;
    height: 40px;
  }
  .minder-navbar .navbar-toggler {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  }
  .minder-navbar .navbar-toggler:focus {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 0 0 3px rgba(133,170,214,.22);
  }
  .navbar-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    flex: none;
    min-width: 0;
    max-width: none;
    margin: 9px 0 0;
  }
  .minder-navbar .navbar-collapse {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
  }
  .minder-navbar .navbar-collapse.show,
  .minder-navbar .navbar-collapse.collapsing {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  /* Enlaces de trabajo dentro del ☰: filas a todo el ancho. */
  .minder-navbar .navbar-primary-links {
    width: 100%;
    margin: 0 !important;
    align-items: stretch !important;
    gap: 4px;
  }
  .minder-navbar .navbar-primary-links .nav-item,
  .minder-navbar .navbar-primary-links .nav-link { width: 100%; }
  .minder-navbar .navbar-primary-links .nav-link {
    min-height: 44px;
    justify-content: flex-start;
    margin: 0 !important;
    padding-inline: 14px;
    border-radius: 10px;
  }
  .minder-navbar .navbar-primary-links .dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 5px !important;
  }
  /* Botones de cuenta: arriba a la derecha, igual que en la PC. */
  .minder-navbar .navbar-account-links {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
  }
  .minder-navbar .navbar-account-links > .nav-item { margin: 0 !important; }
  .minder-navbar .navbar-account-links .navbar-cta,
  .minder-navbar .navbar-account-links .navbar-register {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    margin: 0 !important;
  }
  .minder-navbar .navbar-account-links .navbar-user-pill {
    padding: 2px !important;
    margin: 0 !important;
  }
  .minder-navbar .navbar-account-links .navbar-user-pill.dropdown-toggle::after { display: none; }
  /* Los menús de cuenta (Registrarse, campanita, avatar) se abren bajo la
     cabecera y a lo ancho de la pantalla: anclados al botón se salían por
     el costado izquierdo en un celular. El .sticky-top es su referencia. */
  .minder-navbar .navbar-account-links .dropdown { position: static; }
  .minder-navbar .navbar-account-links .dropdown-menu {
    position: absolute;
    top: calc(100% - 4px);
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0 !important;
    margin: 0 !important;
  }
}
/* Celular angosto: los dos botones de visitante siguen con texto, solo sin
   el ícono, y el logo se achica para que todo entre en una fila. */
@media (max-width: 575.98px) {
  .minder-navbar .navbar-guest-links .navbar-cta > .icon,
  .minder-navbar .navbar-guest-links .navbar-register > .icon { display: none; }
  .minder-navbar .navbar-account-links .navbar-cta,
  .minder-navbar .navbar-account-links .navbar-register {
    height: 34px;
    padding: 0 10px;
    font-size: 12.5px;
  }
  .minder-navbar .navbar-account-links .navbar-register.dropdown-toggle::after { margin-left: .1rem; }
}
@media (max-width: 480px) {
  .minder-navbar { padding-block: 8px; }
  .minder-navbar .container { column-gap: 8px; }
  .navbar-brand-logo { height: 34px; }
  .minder-navbar .navbar-toggler { width: 40px; height: 40px; }
  .navbar-search { margin-top: 8px; }
  .navbar-search .search-bar { height: 42px; padding: 0 4px 0 13px; gap: 7px; }
  .navbar-search .search-bar-input { height: 40px; font-size: 13px; }
  .navbar-search .search-bar-btn { width: 32px; height: 32px; flex-basis: 32px; }
  .navbar-search .search-bar { padding-left: 14px; }
  .navbar-search .search-bar > .icon { display: none; }
  .navbar-search [data-autocomplete-dropdown] {
    left: -14px;
    width: calc(100vw - 24px);
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
}
.brand-name {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: #fff;
}
.brand-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 4px rgba(109,135,185,.6));
}
.brand-sub {
  font-size: .7rem;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}
.minder-navbar .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.72);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .01em;
  padding: .5rem 1.1rem;
  margin: 0 .15rem;
  border-radius: 50px;
  border: 1px solid transparent;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.minder-navbar .nav-link i,
.minder-navbar .nav-link .icon { color: var(--gold); font-size: .95rem; }
.minder-navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
/* La página actual usa la misma píldora con borde que "Ingresar", para
   que los enlaces del menú y los botones de la derecha hablen igual. */
.minder-navbar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
}

/* "Registrarse" (btn-gold) al mismo alto/redondez que "Ingresar"
   (.navbar-cta) -- afuera del navbar btn-gold sigue con su radio chico
   de siempre, esto solo aplica acá. */
.minder-navbar .btn-gold {
  border-radius: 50px;
  padding: .5rem 1.1rem;
}

/* "Registrarse" del navbar: la acción principal, en blanco con texto navy
   -- la misma píldora blanca del buscador de la portada --, para que se
   destaque sobre la barra navy (en navy sobre navy se perdía). Abre un
   menú claro con las dos puertas. */
.navbar-register {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .5rem 1.15rem; border-radius: 50px;
  background: #fff;
  border: 1px solid #fff;
  color: var(--navy) !important; font-weight: 700; font-size: .9rem; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.navbar-register .icon { width: 16px; height: 16px; stroke-width: 2.2; color: var(--navy-mid); }
.navbar-register:hover,
.navbar-register[aria-expanded="true"] {
  background: var(--gold-pale); border-color: var(--gold-pale);
  box-shadow: 0 0 0 3px rgba(133, 170, 214, .35), 0 6px 18px rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}
.navbar-register.dropdown-toggle::after { margin-left: .15rem; opacity: .7; }
.navbar-guest-links { gap: 8px; }
.navbar-register-menu {
  min-width: 300px; padding: 6px; margin-top: 10px !important;
  border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
}
.navbar-register-menu .dropdown-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  white-space: normal; color: var(--text-title);
}
.navbar-register-menu .dropdown-item:hover, .navbar-register-menu .dropdown-item:focus { background: var(--gray-bg); color: var(--text-title); }
.navbar-register-menu .dropdown-item strong { display: block; font-size: 13.5px; font-weight: 600; }
.navbar-register-menu .dropdown-item small { display: block; font-size: 12px; color: var(--text-body); }
.navbar-register-ico {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
  background: var(--gold-pale); color: var(--navy-light);
  display: inline-flex; align-items: center; justify-content: center;
}
.navbar-register-ico .icon { width: 17px; height: 17px; }

/* Mismo lenguaje que los íconos del hero (círculo, borde tenue, dorado):
   así el "Ingresar" del navbar y las tarjetas de abajo se leen como parte
   del mismo sistema, en vez de un componente de Bootstrap sin retocar. */
.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  border-radius: 50px;
  /* Vidrio translúcido, como las pastillas de la banda de los registros. */
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff !important;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.navbar-cta:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(168, 196, 227, .6);
  transform: translateY(-1px);
}
.navbar-cta .icon { width: 16px; height: 16px; stroke-width: 2; color: var(--gold); }

.navbar-user-pill {
  padding: .3rem .8rem .3rem .3rem !important;
  border-radius: 50px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  margin: 0 !important;
}
.navbar-user-pill:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(168, 196, 227, .6);
}

.navbar-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Vidrio translúcido con borde claro, igual que "Ingresar" y la
     píldora del usuario: todos los botones de la barra hablan igual. */
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 1.05rem;
  margin-inline: 3px;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.navbar-icon-btn:hover,
.navbar-icon-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); border-color: rgba(168, 196, 227, .6); color: #fff; transform: translateY(-1px); }
.dropdown-menu.show {
  animation: dropdown-in .18s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.navbar-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 50px;
  /* Rojo y no dorado: el dorado es el color de marca y se usa en botones y
     acentos por toda la interfaz, así que el badge se confundía con el
     resto. El rojo dice "hay algo nuevo sin leer" y no compite con nada. */
  background: #d92d20;
  color: #fff;
  /* Aro navy: separa el badge del círculo blanco del botón. */
  box-shadow: 0 0 0 2px var(--navy-light);
  font-size: .65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.buyer-notif-badge { animation: buyer-notif-pulse 1.8s ease-in-out infinite; }
@keyframes buyer-notif-pulse {
  0%, 55%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--navy-light), 0 0 0 0 rgba(217, 45, 32, .5); }
  72% { transform: scale(1.08); box-shadow: 0 0 0 2px var(--navy-light), 0 0 0 7px rgba(217, 45, 32, 0); }
}

/* Comunicado de la campana (base.html). Tarjeta blanca y centrada: con
   imagen, la imagen es la protagonista; sin imagen (.is-texto) queda una
   tarjeta angosta de lectura. */
.buyer-notification-modal { --bs-modal-width: 760px; }
.buyer-notification-modal.is-texto { --bs-modal-width: 480px; }
.buyer-notification-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(4, 24, 54, .3);
}
.buyer-notification-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--card-border);
}
.buyer-notification-ico {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--gold-pale);
  color: var(--navy-light);
  font-size: 1.15rem;
}
.buyer-notification-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.buyer-notification-meta strong { color: var(--text-title); font-size: 15px; }
.buyer-notification-meta time { color: var(--text-muted); font-size: 12.5px; }
.buyer-notification-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  transition: background-color .15s ease, color .15s ease;
}
.buyer-notification-close:hover { background: var(--gray-bg); color: var(--text-title); }
.buyer-notification-visual {
  display: grid;
  place-items: center;
  background: var(--gray-bg);
}
.buyer-notification-visual img { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.buyer-notification-text {
  margin: 0;
  padding: 16px 20px 0;
  color: var(--text-body);
  font-size: 14.5px;
  line-height: 1.55;
}
.buyer-notification-text-lg { padding-top: 22px; color: var(--text-title); font-size: 16px; line-height: 1.6; }
.buyer-notification-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 20px 20px;
}
.buyer-notification-footer .buyer-notification-btn { border-radius: 999px; padding: 8px 20px; font-weight: 600; font-size: 14px; }
.buyer-notification-footer .btn-light { background: var(--gray-bg); border-color: var(--card-border); color: var(--text-title); }
.buyer-notification-thumb {
  width: 76px;
  height: 52px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background: var(--gray-bg);
}

@media (max-width: 576px) {
  .buyer-notification-modal .modal-dialog { margin: .75rem; }
  .buyer-notification-modal .modal-content { border-radius: 16px; }
  .buyer-notification-visual img { max-height: 58vh; }
  .buyer-notification-footer .buyer-notification-btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .buyer-notif-badge { animation: none; }
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: .7rem;
  font-weight: 700;
}
/* Foto de perfil: ocupa el mismo lugar que las iniciales, recortada en círculo. */
.user-avatar-img {
  object-fit: cover;
  padding: 0;
  background: none;
}
.avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.9rem;
  font-weight: 700;
  border: 2px solid var(--card-border);
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Buttons ──
   Los botones principales usan el azul de la barra superior (--navy-light,
   más vivo) y no el navy oscuro de fondo: es el mismo tono que los botones
   del login y los registros, para que todo el sitio hable un solo idioma. */
.btn { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.btn:active { transform: scale(.97); }

.btn-navy {
  background: var(--grad-navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
}
.btn-navy:hover { background: var(--grad-navy); filter: brightness(1.08); color: #fff; }

.btn-outline-navy {
  color: var(--navy-light);
  border-color: var(--navy-light);
  border-radius: var(--radius-btn);
}
.btn-outline-navy:hover { background-color: var(--navy-light); color: #fff; }

.btn-gold {
  background-color: var(--gold);
  color: var(--gold-ink);
  border: none;
  font-weight: 600;
  border-radius: var(--radius-btn);
}
.btn-gold:hover { background-color: var(--gold-light); color: var(--gold-ink); }

.btn-outline-gold {
  color: var(--gold);
  border-color: var(--gold);
}
.btn-outline-gold:hover { background-color: var(--gold); color: var(--gold-ink); }

/* ── Footer ── */
/* Mismo acabado que la barra superior: degradado azul translúcido con
   desenfoque y borde celeste tenue (sin la franja gruesa de antes). */
.minder-footer {
  background: linear-gradient(135deg, rgba(13, 53, 117, .92) 0%, rgba(10, 38, 71, .92) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(133, 170, 214, .3);
  box-shadow: 0 -2px 12px rgba(10, 38, 71, .18);
  margin-top: auto;
}

/* Stats bar */
.footer-stats {
  padding: 2rem 0 1rem;
}
.footer-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.footer-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .75rem 1rem;
}
.footer-stat-num {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .4rem;
}
.footer-stat-label {
  font-size: .78rem;
  color: #B0BEC8;
  letter-spacing: .02em;
}

/* Main footer columns */
.footer-main {
  padding: 3rem 0 2rem;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-logo {
  height: 36px;
  object-fit: contain;
  display: block;
}
.footer-brand-text {
  font-size: .85rem;
  color: #B0BEC8;
  line-height: 1.65;
  margin: 0;
}
.footer-col-title {
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: .5rem; }
.footer-links a {
  font-size: .85rem;
  color: #B0BEC8;
  text-decoration: none;
  transition: color .15s;
}
.footer-links a:hover { color: var(--gold); }

/* Categorías del pie: una fila de píldoras, no una quinta columna, para no
   apretar la grilla de arriba. El título reusa .footer-col-title. */
.footer-categories {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.5rem 0;
}
.footer-categories .footer-col-title { margin-bottom: .75rem; }
.footer-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-categories-list a {
  display: inline-block;
  font-size: .8rem;
  color: #B0BEC8;
  text-decoration: none;
  padding: .3rem .75rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  transition: color .15s, border-color .15s;
}
.footer-categories-list a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Bottom bar */
.footer-bottom {
  padding: 1rem 0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .78rem;
  color: rgba(176,190,200,.6);
}

/* ── Auth Pages ── */
.auth-wrapper { min-height: calc(100vh - 120px); }
.brand-hero { font-size: 3rem; }
.minder-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: #fff;
  opacity: 0;
  animation: minder-card-in .4s cubic-bezier(.2,.8,.2,1) both;
}
.minder-card:nth-of-type(2) { animation-delay: .08s; }
.minder-card:nth-of-type(3) { animation-delay: .16s; }
.minder-card:nth-of-type(4) { animation-delay: .24s; }

@keyframes minder-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Inicio de sesión y registros (rediseño) ──
   Mismo lenguaje que la ficha y el directorio: tarjetas blancas con borde
   tenue y radio 10px, títulos Inter con letter-spacing negativo, etiquetas
   en mayúsculas pequeñas y botones navy en degradado (igual que el botón
   del buscador). Los estilos son compartidos por la tarjeta de inicio de
   sesión (includes/_login_gate.html), register_buyer.html y
   suppliers/register.html para que las pantallas se lean como una sola. */

/* Campos: foco navy suave en vez del azul de Bootstrap. */
.teaser-login .form-control,
.teaser-login .form-select,
.reg-page .form-control,
.reg-page .form-select {
  border-color: var(--card-border);
  border-radius: 10px;
  min-height: 44px;
  padding: .55rem .9rem;
  font-size: 14.5px;
  color: var(--text-title);
  transition: border-color .15s, box-shadow .15s;
}
.teaser-login .form-control:focus,
.teaser-login .form-select:focus,
.reg-page .form-control:focus,
.reg-page .form-select:focus {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 4px rgba(13, 53, 117, .10);
}
.reg-page textarea.form-control { min-height: 110px; }
.reg-page .form-control:not(:focus):not(.is-invalid),
.reg-page .form-select:not(:focus):not(.is-invalid) { background-color: #FAFBFD; }
.reg-page .form-control:hover:not(:focus),
.reg-page .form-select:hover:not(:focus) { border-color: #C7D3E3; }
.teaser-login .form-label,
.reg-page .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-title);
  margin-bottom: .35rem;
}
.reg-page .form-label .text-danger { font-weight: 600; }
/* Registros: el nombre de cada campo va como texto gris dentro de la
   casilla y desaparece al escribir (static/js/reg-placeholders.js lo copia
   de la etiqueta). La etiqueta queda solo para lectores de pantalla; sin
   JavaScript no está la clase .reg-placeholders y se ve arriba como
   siempre. */
.reg-page.reg-placeholders .reg-label-oculta {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* En los desplegables, la opción vacía (el nombre del campo) va en gris
   como un placeholder hasta que se elige algo. */
.reg-page .reg-section-body .form-select:has(option[value=""]:checked) { color: rgba(16, 24, 40, 0.45); }
.reg-page .reg-section-body .form-select option { color: var(--text-title); }
.teaser-login .form-text,
.reg-page .form-text { font-size: 12.5px; color: var(--text-muted); }
.teaser-login .invalid-msg,
.reg-page .invalid-msg { color: #dc3545; font-size: 12.5px; margin-top: .3rem; font-weight: 500; }
.teaser-login .form-check-input:checked,
.reg-page .form-check-input:checked { background-color: var(--navy-light); border-color: var(--navy-light); }
.teaser-login .form-check-input:focus,
.reg-page .form-check-input:focus { border-color: var(--navy-light); box-shadow: 0 0 0 4px rgba(13, 53, 117, .10); }

/* Botón principal: degradado navy, mismo acabado que .search-bar-btn. */
.auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; padding: 0 22px; border: none; border-radius: 8px;
  background: var(--grad-navy);
  color: #fff; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: .01em; cursor: pointer; text-decoration: none;
  transition: filter .15s;
}
.auth-btn:hover { color: #fff; filter: brightness(1.1); }
.auth-btn:active { filter: brightness(.95); }
.auth-btn .icon { width: 17px; height: 17px; stroke-width: 2; }
.auth-btn-auto { width: auto; min-width: 220px; }
.auth-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 8px; background: #fff;
  border: 1px solid var(--card-border); color: var(--text-title);
  font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.auth-btn-ghost:hover { border-color: var(--text-muted); color: var(--text-title); background: #fff; }
.auth-btn-ghost .icon { width: 16px; height: 16px; }
.auth-btn-sm { height: 38px; padding: 0 14px; font-size: 13px; }
.auth-btn-sm .bi { font-size: 14px; }
#regStepNext.auth-btn-auto { min-width: 160px; }

/* ── Login ── */
.auth-shell { width: 100%; max-width: 440px; }
.auth-input { position: relative; }
.auth-input > .icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; transition: color .15s;
}
.auth-input:focus-within > .icon { color: var(--navy); }
.auth-input .form-control { padding-left: 42px; }
.auth-input .form-control[type="password"],
.auth-input .form-control[data-password] { padding-right: 44px; }
.auth-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: 8px; background: transparent;
  color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.auth-eye:hover { background: var(--gray-bg); color: var(--navy); }
.auth-eye .icon { width: 17px; height: 17px; }
.auth-alert {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff5f5; border: 1px solid #fecaca; color: #b42318;
  border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 500; margin-bottom: 16px;
}
.auth-alert .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 14px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted); font-weight: 600;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--card-border); }
.auth-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-alt-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 12px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--card-border); background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.auth-alt-card:hover { border-color: var(--navy-light); background: var(--gold-pale); }
.auth-alt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 6px;
  background: var(--gold-pale); color: var(--gold-dark);
}
.auth-alt-icon .icon { width: 17px; height: 17px; }
.auth-alt-title { font-size: 13.5px; font-weight: 600; color: var(--text-title); display: flex; align-items: center; gap: 4px; }
.auth-alt-title .icon { width: 13px; height: 13px; color: var(--text-muted); transition: transform .15s, color .15s; }
.auth-alt-card:hover .auth-alt-title .icon { transform: translateX(2px); color: var(--navy); }
.auth-alt-text { font-size: 12px; color: var(--text-body); line-height: 1.45; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--text-muted); }
.auth-foot a { color: var(--gold-dark); text-decoration: none; font-weight: 500; }
.auth-foot a:hover { color: var(--navy); text-decoration: underline; }
@media (max-width: 480px) {
  .auth-alt { grid-template-columns: 1fr; }
}

/* ── Registros (comprador y proveedor) ──
   Arriba, una banda navy con cerros (el mismo fondo que el buscador de la
   portada, .hero-directorio) con el título y los requisitos; debajo, el
   formulario en tarjetas blancas con sombra suave que suben y se montan
   sobre el borde de la banda. */
.reg-hero {
  position: relative; color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 170 L140 110 L260 150 L420 70 L560 140 L700 95 L860 160 L1010 80 L1160 140 L1300 100 L1440 150 L1440 220 L0 220Z' fill='%23ffffff' fill-opacity='.05'/%3E%3Cpath d='M0 200 L180 150 L330 185 L500 125 L650 180 L820 140 L980 190 L1150 130 L1300 175 L1440 150 L1440 220 L0 220Z' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E") bottom / 100% 55% no-repeat,
    radial-gradient(900px 380px at 15% -10%, rgba(133, 170, 214, .28), transparent 70%),
    radial-gradient(700px 320px at 95% 110%, rgba(26, 74, 156, .55), transparent 70%),
    linear-gradient(135deg, #0D3575 0%, #0A2647 55%, #061428 100%);
}
.reg-hero-inner {
  max-width: 980px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px; align-items: center; padding: 44px 16px 108px;
}
.reg-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--gold-dark); background: var(--gold-pale);
  padding: 5px 11px; border-radius: 20px; margin-bottom: 14px;
}
.reg-kicker .icon { width: 13px; height: 13px; }
/* Dentro de la banda navy, el kicker va translúcido. */
.reg-hero .reg-kicker {
  color: #dbe6f5; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  padding: 5px 12px; margin-bottom: 16px;
}
.reg-hero .reg-kicker .icon { color: var(--gold); }
.reg-title {
  font-family: var(--font-sans); font-size: clamp(26px, 3.2vw, 36px); font-weight: 700;
  letter-spacing: -0.03em; color: #fff; line-height: 1.12; margin: 0 0 12px;
}
.reg-lead { font-size: 15px; color: #c9d7ea; line-height: 1.65; margin: 0; max-width: 560px; }
.reg-hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; }
.reg-hero-facts li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: #e2e8f0;
  background: rgba(6, 20, 40, .45); border: 1px solid rgba(255, 255, 255, .12);
}
.reg-hero-facts .icon { width: 14px; height: 14px; color: var(--gold); }
/* Requisitos: tarjeta translúcida dentro de la banda. */
.reg-reqs {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px; padding: 22px 24px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.reg-reqs-title {
  font-family: var(--font-sans); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .8px; color: #9fb3cf; font-weight: 600; margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.reg-reqs-title .icon { color: var(--gold); }
.reg-reqs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reg-reqs-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: #e2e8f0; line-height: 1.5; }
.reg-reqs-list .reg-tick {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  background: rgba(133, 170, 214, .22); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.reg-reqs-list .reg-tick .icon { width: 12px; height: 12px; stroke-width: 2.6; }
@media (max-width: 860px) {
  .reg-hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 30px 16px 92px; }
}
@media (max-width: 576px) {
  .reg-lead { font-size: 14px; }
  .reg-reqs { padding: 18px; }
  .reg-hero-facts li { font-size: 12.5px; padding: 6px 11px; }
}

/* Formulario: sube sobre el borde de la banda. */
.reg-page {
  position: relative; z-index: 2; max-width: 980px; margin-top: -68px;
  font-size: 14px; color: var(--text-title);
}
.reg-page .breadcrumb { font-size: 12.5px; margin-bottom: 0; }
.reg-page .breadcrumb a { color: var(--text-muted); text-decoration: none; }
.reg-page .breadcrumb a:hover { color: var(--navy); }
.reg-page .breadcrumb-item.active { color: var(--text-title); font-weight: 500; }
/* Sombra común de las tarjetas del registro. */
.reg-section, .reg-stepper, .reg-consent {
  box-shadow: 0 12px 32px rgba(10, 38, 71, .08), 0 1px 2px rgba(16, 24, 40, .04);
}
/* Secciones del formulario: tarjeta con cabecera numerada. */
.reg-section {
  background: #fff; border: 1px solid #E6ECF4; border-radius: 16px;
  overflow: hidden; margin-bottom: 20px;
}
.reg-section-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px; border-bottom: 1px solid #EEF2F7;
  background: linear-gradient(180deg, #FAFCFF 0%, #fff 100%);
  font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  letter-spacing: -0.2px; color: var(--text-title);
}
.reg-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--grad-navy); color: #fff; font-size: 13.5px; font-weight: 700;
  box-shadow: 0 4px 10px rgba(13, 53, 117, .25);
}
.reg-section-hint {
  margin-left: auto; font-size: 12px; font-weight: 500; color: var(--gold-dark); white-space: nowrap;
  background: var(--gold-pale); padding: 4px 10px; border-radius: 999px;
}
.reg-section-body { padding: 24px 26px 26px; }
@media (max-width: 576px) {
  .reg-page { margin-top: -60px; }
  .reg-section { border-radius: 14px; }
  .reg-section-header { padding: 14px 16px; font-size: 15px; }
  .reg-section-body { padding: 18px 16px; }
  .reg-section-hint { display: none; }
}
/* Cabecera de un grupo de campos dentro de una sección. */
.reg-contact-subtitle {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted); font-weight: 600; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--gray-bg);
}
.reg-optional { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.reg-extra-contact { position: relative; padding-top: 16px; margin-top: 16px; border-top: 1px dashed var(--card-border); }
.reg-extra-contact-remove {
  position: absolute; top: 12px; right: 0; border: none; background: none;
  color: #dc3545; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: .25rem; padding: 0;
}
.reg-extra-contact-remove:hover { text-decoration: underline; }

/* Ayudas didácticas (registro de proveedor). */
.reg-help-intro { font-size: 13.5px; color: var(--text-body); line-height: 1.65; margin-bottom: 16px; }
.reg-help-note { font-size: 12px; font-style: italic; color: var(--text-muted); margin-bottom: 14px; }
/* Casilla "No tengo experiencia directa": tarjeta clara para que no pase
   desapercibida entre el texto y los campos. */
.reg-indirect-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px 12px 40px; margin-bottom: 18px;
  background: var(--gold-pale); border: 1px solid var(--card-border); border-radius: 10px;
  font-size: 13.5px; color: var(--text-title);
}
.reg-indirect-check .form-check-input { margin-top: .2rem; cursor: pointer; }
.reg-indirect-check .form-check-label { cursor: pointer; }
.reg-divider { border-color: var(--card-border); margin: 0 0 18px; }

/* Grilla de rubros */
.reg-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; }
.reg-categories ul { list-style: none; padding: 0; margin: 0; display: contents; }
.reg-categories li { margin: 0; }
.reg-categories label {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-title);
  cursor: pointer; padding: 6px 8px; border-radius: 6px; transition: background .12s;
}
.reg-categories label:hover { background: var(--gray-bg); }
.reg-categories input[type="checkbox"] { flex-shrink: 0; margin: 0; }
.reg-categories input[type="checkbox"]:checked { background-color: var(--navy-light); border-color: var(--navy-light); }

/* Los tres selects de la fecha; el año se lleva más ancho. */
.reg-date-parts { display: flex; gap: 8px; }
.reg-date-parts select { flex: 1 1 0; min-width: 0; }
.reg-date-parts select:last-child { flex: 1.3 1 0; }
.reg-counter { color: var(--text-muted); white-space: nowrap; }
.reg-counter.is-over { color: #dc3545; font-weight: 700; }

/* Consentimiento y envío */
.reg-consent {
  background: #fff; border: 1px solid #E6ECF4; border-radius: 16px;
  padding: 18px 26px; margin-bottom: 22px;
}
.reg-consent .form-check { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; margin-bottom: 8px; }
.reg-consent .form-check:last-child { margin-bottom: 0; }
.reg-consent .form-check-input { flex-shrink: 0; margin: 2px 0 0; width: 17px; height: 17px; }
.reg-consent .form-check-label { font-size: 13px; color: var(--text-body); line-height: 1.5; }
.reg-consent .form-check-label a { color: var(--gold-dark); text-decoration: none; font-weight: 500; }
.reg-consent .form-check-label a:hover { color: var(--navy); text-decoration: underline; }
.reg-submit { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; }
.reg-submit-note { font-size: 12.5px; color: var(--text-muted); text-align: center; }
.reg-submit-note a { color: var(--gold-dark); text-decoration: none; font-weight: 500; }
.reg-submit-note a:hover { color: var(--navy); text-decoration: underline; }

/* Bloque legal: más discreto, como pie de la página. */
.reg-legal {
  background: rgba(255, 255, 255, .6); border: 1px dashed var(--card-border); border-radius: 14px;
  padding: 18px 22px; margin: 8px 0 48px;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.7;
}
.reg-legal p { margin: 0 0 10px; }
.reg-legal strong { color: var(--text-title); font-weight: 600; }
.reg-legal ol { padding-left: 18px; margin: 0; }
.reg-legal li { margin-bottom: 6px; }
.reg-legal a { color: var(--gold-dark); text-decoration: underline; }
.reg-legal a:hover { color: var(--navy); }

/* Paso a paso (registro de proveedor) */
.reg-stepper {
  display: flex; align-items: center; background: #fff;
  border: 1px solid #E6ECF4; border-radius: 16px; padding: 16px 22px; margin-bottom: 20px;
}
.reg-stepper-item { display: flex; align-items: center; gap: 8px; }
.reg-stepper-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--gray-bg); border: 1px solid var(--card-border); color: var(--text-muted);
  font-size: 12.5px; font-weight: 700; transition: background .15s, color .15s, border-color .15s;
}
.reg-stepper-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.reg-stepper-item { border-radius: 999px; padding: 3px 12px 3px 3px; transition: background .15s; }
.reg-stepper-item:hover { background: var(--gray-bg); }
.reg-stepper-item.is-active { background: var(--gold-pale); }
.reg-stepper-item.is-active .reg-stepper-dot { background: var(--grad-navy); border-color: var(--navy-light); color: #fff; box-shadow: 0 4px 10px rgba(13, 53, 117, .28); }
.reg-stepper-item.is-active .reg-stepper-label { color: var(--text-title); font-weight: 600; }
.reg-stepper-item.is-done .reg-stepper-dot { background: var(--gold-pale); border-color: var(--gold-light); color: var(--gold-dark); }
.reg-stepper-item.is-done .reg-stepper-label { color: var(--text-body); }
.reg-stepper-line { flex: 1 1 24px; min-width: 10px; height: 2px; background: var(--card-border); margin: 0 6px; border-radius: 2px; }
.reg-stepper-item.is-done + .reg-stepper-line { background: var(--gold-light); }
.reg-step-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
/* "Siguiente" siempre a la derecha, aunque "Atrás" esté oculto. */
.reg-step-nav #regStepNext { margin-left: auto; }
/* "Hay campos que faltan completar", a la izquierda de Siguiente/Registrar. */
.reg-step-alert {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #b42318;
}
.reg-step-alert[hidden] { display: none; }
.reg-step-alert .icon { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 575.98px) {
  .reg-step-nav { flex-wrap: wrap; }
  .reg-step-nav .reg-step-alert { order: -1; width: 100%; justify-content: flex-end; }
}
@media (max-width: 576px) {
  .reg-stepper { padding: 12px; }
  .reg-stepper-item { padding: 3px; }
  .reg-stepper-label { display: none; }
  .reg-stepper-line { margin: 0 4px; }
}

/* Separación entre el navbar y el primer bloque del directorio: evita que la
   primera tarjeta parezca pegada o fusionada con la barra superior. */
.directory-top-gap { height: 18px; }
@media (max-width: 576px) { .directory-top-gap { height: 12px; } }

/* Buscador: una sola pieza, redondeada (píldora), para el directorio y la
   ficha de proveedor. Sombra suave que se acentúa al enfocar. */
.search-bar {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 999px;
  padding: 0 7px 0 22px; height: 56px;
  box-shadow: 0 6px 20px rgba(10, 38, 71, .07), 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.search-bar:hover { box-shadow: 0 8px 26px rgba(10, 38, 71, .10), 0 1px 2px rgba(16, 24, 40, .04); }
.search-bar:focus-within {
  border-color: var(--navy);
  box-shadow: 0 8px 26px rgba(10, 38, 71, .12), 0 0 0 4px rgba(10, 38, 71, .07);
}
.search-bar > .icon { color: var(--text-muted); width: 19px; height: 19px; stroke-width: 1.9; transition: color .18s; }
.search-bar:focus-within > .icon { color: var(--navy); }
.search-bar-wrap { position: relative; flex: 1; min-width: 0; }
.search-bar-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--text-title); height: 54px;
}
.search-bar-input::placeholder { color: var(--text-muted); }
.search-bar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: none;
  background: var(--grad-navy);
  color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(13, 53, 117, .30);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.search-bar-btn .icon { width: 19px; height: 19px; stroke-width: 2.2; }
.search-bar-btn:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(13, 53, 117, .40); }
.search-bar-btn:active { transform: scale(.95); }
.search-bar-btn.is-loading .icon { animation: search-spin .6s linear infinite; }
@media (max-width: 576px) {
  .search-bar { height: 50px; padding-left: 16px; gap: 8px; }
  .search-bar-input { font-size: 14px; height: 48px; }
  .search-bar-btn { width: 38px; height: 38px; }
}
@keyframes search-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .suggest-item,
  [data-autocomplete-dropdown].active,
  #searchSuggestions.active {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ── Aliados Estratégicos: tira de logos con scroll continuo (marquee) ──
   Antes era un Bootstrap Carousel que armaba páginas de 6 logos y las
   pasaba cada 3.5s con un slide de 0.6s: ~2.9s de cada ciclo la tira
   quedaba completamente quieta y después saltaba de golpe, lo que se
   percibía como "lento"/entrecortado en vez de vivo. Este marquee mueve
   la tira todo el tiempo a velocidad constante -- sin pausas ni saltos.
   El movimiento lo hace static/js/logo-marquee.js corriendo el scroll de
   .allies-marquee (no una animación CSS): así en celular también se
   arrastra con el dedo. */
.allies-strip {
  background: linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 100%);
  border-top: 1px solid var(--card-border);
  padding: 22px 0 28px;
  margin-top: 8px;
}
/* Título y bajada en una sola línea, pegados arriba: el protagonismo es
   de los logos. */
.allies-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.allies-title {
  font-family: var(--font-sans); font-size: 18px; font-weight: 700;
  letter-spacing: -0.3px; color: var(--text-title); line-height: 1.2;
}
.allies-sub { font-size: 13px; color: var(--text-muted); }
.allies-sub::before { content: "·"; margin-right: 10px; color: var(--card-border); }
.allies-marquee {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: auto;
  /* Que arrastrar la tira hasta el borde no dispare el "atrás" del
     navegador ni mueva la página de costado. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.allies-marquee::-webkit-scrollbar { display: none; }
/* En escritorio la tira también se arrastra con el mouse. */
@media (hover: hover) and (pointer: fine) {
  .allies-marquee[data-marquee] { cursor: grab; }
  .allies-marquee[data-marquee] .allies-logo { cursor: inherit; }
}
.allies-marquee.is-dragging { cursor: grabbing; user-select: none; }
.allies-track {
  display: flex;
  align-items: center;
  width: max-content;
}
/* La separación va como margen de cada logo y no como `gap` del track:
   con gap, el ancho de las dos copias juntas es 2N logos + (2N-1) huecos,
   así que -50% no cae exactamente en el borde de la copia 1 y el loop
   daba un saltito en cada vuelta. Con el margen dentro de cada ítem, la
   mitad del track mide exactamente una copia completa. */
.allies-track .allies-logo { margin-right: 16px; }
/* Con pocos logos (ej. recién se marcaron destacados) no hay copia
   duplicada -- ver directory.html -- así que no hay nada que recorrer
   en loop: se centran quietos para no dejar huecos vacíos a los costados. */
.allies-track-static {
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 0;
}
/* Cada logo va en una "loseta" blanca del mismo tamaño, como las tarjetas
   del resto del sitio; al pasar el mouse se levanta y marca el borde. */
.allies-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 224px;
  height: 116px;
  padding: 16px 22px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.allies-logo:hover,
.allies-logo:focus-visible {
  border-color: var(--navy-light);
  background: #FBFCFE;
  outline: none;
}
.allies-logo img {
  /* height:100% (no max-height): todos los logos deben llenar el mismo
     alto de caja sin importar su resolución de origen -- con max-height
     un archivo chico (ej. un logo bajado a 140x60px) se quedaba en su
     tamaño real, mucho más chico que uno que sí llegaba a los 60px.
     max-width + object-fit mantienen dentro de la loseta a los logos
     muy apaisados. */
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 576px) {
  .allies-strip { padding: 18px 0 22px; }
  .allies-title { font-size: 16px; }
  .allies-logo { width: 170px; height: 90px; padding: 12px 16px; }
  .allies-track .allies-logo { margin-right: 12px; }
}
/* Empresa sin logo (solo en "empresas nuevas", si con logo no alcanzan):
   iniciales y nombre en la misma loseta. */
.allies-logo:has(.allies-initials) { flex-direction: column; gap: 8px; text-decoration: none; }
.allies-initials {
  width: 44px; height: 44px; border-radius: 10px; background: var(--gray-bg); color: var(--text-body);
  font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.allies-name {
  font-size: 12.5px; font-weight: 600; color: var(--text-title); line-height: 1.25; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.allies-strip-first { margin-top: 0; border-top: none; }

/* ── Ruta de navegación de las páginas internas (estilo Alibaba):
   texto chico y gris, separada por ›, la página actual en oscuro y sin
   enlace. En celular queda en una sola línea y se desliza de costado. ── */
.minder-crumbs { padding-top: 14px; }
.minder-crumbs-list {
  display: flex; align-items: center; flex-wrap: nowrap;
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; line-height: 1.4; color: var(--text-muted);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.minder-crumbs-list::-webkit-scrollbar { display: none; }
.minder-crumbs-item { display: inline-flex; align-items: center; min-width: 0; }
.minder-crumbs-item + .minder-crumbs-item::before {
  content: "›"; margin: 0 8px; color: #98a2b3; font-size: 15px; line-height: 1;
}
.minder-crumbs-item a { color: var(--text-muted); text-decoration: none; }
.minder-crumbs-item a:hover { color: var(--navy-light); text-decoration: underline; }
.minder-crumbs-item [aria-current="page"] {
  color: var(--text-title); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
}
/* Con la ruta arriba, la página no necesita su margen superior completo. */
.minder-crumbs + [class*="container"],
.minder-crumbs + div > [class*="container"]:first-child { padding-top: 1rem !important; }

/* ── Portada pública (visitante sin cuenta) ── */
/* ── Vista protegida detrás del aviso de resultados (visitante sin cuenta).
   Es un esqueleto estático: NO contiene información de proveedores. El blur
   es solo decorativo; quitarlo desde DevTools no revela datos. ── */
.directory-teaser { position: relative; margin-bottom: 8px; display: grid; grid-template-columns: minmax(0, 1fr); }
/* Esqueleto y cuadro comparten la misma celda: el contenedor crece al más
   alto de los dos, así el cuadro con el login rápido nunca queda cortado. */
.directory-teaser > .directory-teaser-preview,
.directory-teaser > .directory-teaser-gate { grid-area: 1 / 1; }
.directory-teaser-preview {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
  opacity: .72;
}
.directory-teaser-placeholder-row { height: 92px; }
.directory-teaser-skeleton {
  display: block;
  height: 11px;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #E8EDF4 0%, #DCE4EE 52%, #E8EDF4 100%);
}
.directory-teaser-skeleton.is-short { width: 66%; }
.directory-teaser-skeleton-logo {
  width: 104px;
  height: 62px;
  border-radius: 8px;
}
.directory-teaser-skeleton-name { width: 154px; height: 14px; }
.directory-teaser-skeleton-wide { width: 250px; }
.directory-teaser-skeleton-medium { width: 150px; }
.directory-teaser-skeleton-number { width: 92px; }
.directory-teaser-skeleton-year { width: 54px; }
.directory-teaser-skeleton-region { width: 88px; }
.directory-teaser-skeleton-action { width: 76px; height: 30px; }
.directory-teaser-preview .suppliers-table tbody tr:hover { background: transparent; }
.directory-teaser-preview .suppliers-table-wrap {
  box-shadow: inset 0 0 70px rgba(10, 38, 71, .03);
}
.directory-teaser-gate {
  position: relative;
  align-self: center;
  justify-self: center;
  margin: 20px 0;
  width: min(400px, calc(100% - 2rem));
  z-index: 2;
  text-align: center;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(10, 38, 71, .18);
  background-image: radial-gradient(420px 160px at 50% -40px, rgba(133, 170, 214, .18), transparent 70%);
}
.directory-teaser-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--gold-pale); color: var(--navy-light);
  margin-bottom: 12px;
}
.directory-teaser-icon .icon { width: 20px; height: 20px; }
.directory-teaser-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-heading);
  margin: 0 0 6px;
}
.directory-teaser-text {
  font-size: 13.5px;
  color: var(--text-paragraph);
  line-height: 1.5;
  margin: 0 0 16px;
}
.directory-teaser-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.directory-teaser-actions .auth-btn-auto { width: 100%; }
/* Login rápido dentro del cuadro. */
.teaser-login { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.teaser-login .form-control { height: 44px; font-size: 14px; }
.teaser-login .auth-btn { margin-top: 2px; }
.teaser-login-links {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 500; margin-top: 2px;
}
.teaser-login-links a { color: var(--gold-dark); text-decoration: none; }
.teaser-login-links a:hover { color: var(--navy); text-decoration: underline; }
.directory-teaser-link { font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: underline; }
.directory-teaser-link:hover { color: var(--gold-dark); }
@media (max-width: 576px) {
  .teaser-login-links { justify-content: center; }
  .directory-teaser-gate {
    width: calc(100% - 20px);
    padding: 22px 18px;
    border-radius: 14px;
  }
  .directory-teaser-title { font-size: 16px; }
  .directory-teaser-text { font-size: 13px; }
}

/* Carrusel de tarjetas (empresas nuevas) */
/* Banda de cierre: crear cuenta. Tarjeta clara partida en dos: a la
   izquierda qué se desbloquea, a la derecha las dos puertas de registro
   (mismo lenguaje que las tarjetas "Soy proveedor / Soy comprador" del
   login). */
.join-band { padding: 16px 0 44px; }
.join-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
  background: #fff; border: 1px solid var(--card-border); border-radius: 16px; padding: 36px 40px;
  background-image:
    radial-gradient(640px 320px at 0% 0%, rgba(133, 170, 214, .22), transparent 70%),
    radial-gradient(520px 300px at 100% 100%, rgba(133, 170, 214, .14), transparent 70%);
}
.join-copy .reg-kicker { margin-bottom: 12px; }
.join-title { font-family: var(--font-sans); font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-heading); margin: 0 0 8px; line-height: 1.15; }
.join-text { font-size: 14.5px; color: var(--text-paragraph); margin: 0 0 18px; max-width: 520px; line-height: 1.6; }
.join-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.join-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-title); line-height: 1.5; }
.join-tick {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  background: var(--gold-pale); color: var(--navy-light); display: inline-flex; align-items: center; justify-content: center;
}
.join-tick .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.join-doors { display: flex; flex-direction: column; gap: 10px; }
.join-door {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 12px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--card-border);
  transition: border-color .18s, background .18s;
}
.join-door:hover { border-color: var(--navy-light); background: #FBFCFE; color: inherit; }
.join-door-icon {
  width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-pale); color: var(--navy-light);
}
.join-door-icon .icon { width: 21px; height: 21px; }
.join-door-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.join-door-title { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-title); }
.join-door-text { font-size: 12.5px; color: var(--text-body); line-height: 1.45; }
.join-door-cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--navy-light);
}
.join-door-cta .icon { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .18s; }
.join-door:hover .join-door-cta .icon { transform: translateX(3px); }
.join-login { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-top: 2px; }
.join-login a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.join-login a:hover { color: var(--navy); text-decoration: underline; }
@media (max-width: 992px) {
  .join-card { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
}
@media (max-width: 576px) {
  .join-title { font-size: 22px; }
  .join-door { grid-template-columns: auto 1fr; }
  .join-door-cta { grid-column: 2; }
}

/* ── Filter Bar (directorio) ──
   Una sola fila de píldoras (ícono + rótulo + select) y un interruptor
   para "Solo verificados"; el selector de vista va al extremo derecho.
   Las píldoras con un valor elegido se pintan en azul pálido. */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 16px;
}
.filter-bar-compact .filter-field { min-width: 210px; }
.filter-lead {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .7px; text-transform: uppercase; color: var(--text-muted);
  padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--card-border);
  height: 24px;
}
.filter-lead .icon { width: 15px; height: 15px; color: var(--text-body); }
.filter-field {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 12px 0 14px; margin: 0;
  background: #fff; border: 1px solid var(--card-border); border-radius: 999px;
  color: var(--text-title); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-field:hover { border-color: var(--text-muted); }
.filter-field:focus-within { border-color: var(--navy-light); box-shadow: 0 0 0 4px rgba(13, 53, 117, .10); }
.filter-field > .icon { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.filter-field-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.filter-field select {
  appearance: none; -webkit-appearance: none;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-title);
  padding: 0 2px; margin: 0; height: 100%; cursor: pointer;
  max-width: 170px; text-overflow: ellipsis;
}
.filter-field-caret { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; stroke-width: 2.2; }
.filter-field.is-active { background: var(--gold-pale); border-color: #B9CFEA; }
.filter-field.is-active > .icon, .filter-field.is-active .filter-field-caret { color: var(--navy-light); }
.filter-field.is-active .filter-field-label { color: var(--gold-dark); }
.filter-field.is-active select { color: var(--navy); }

/* Menú desplegable propio (static/js/filter-dropdown.js): el select
   nativo queda oculto y en su lugar va un botón con el valor + un panel
   con las opciones, en el mismo lenguaje que las tarjetas del sitio. */
.filter-field select.is-enhanced { display: none; }
.filter-field-btn {
  display: inline-flex; align-items: center; height: 100%;
  border: none; background: transparent; padding: 0 2px; margin: 0;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-title);
  cursor: pointer; white-space: nowrap; max-width: 190px;
}
.filter-field-value { overflow: hidden; text-overflow: ellipsis; }
.filter-field.is-active .filter-field-btn { color: var(--navy); }
.filter-field.is-open { border-color: var(--navy-light); box-shadow: 0 0 0 4px rgba(13, 53, 117, .10); }
.filter-field.is-open .filter-field-caret { transform: rotate(180deg); }
.filter-field-caret { transition: transform .18s; }
.filter-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1050;
  min-width: 240px; max-width: 320px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
  padding: 6px; display: none;
  cursor: default; text-align: left;
}
.filter-menu.is-right { left: auto; right: 0; }
.filter-field.is-open .filter-menu { display: block; animation: suggest-dropdown-in .16s ease-out; }
.filter-menu-search {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 2px 6px; padding: 0 10px; height: 36px;
  border: 1px solid var(--card-border); border-radius: 8px; background: var(--gray-bg);
}
.filter-menu-search:focus-within { border-color: var(--navy-light); background: #fff; box-shadow: 0 0 0 3px rgba(13, 53, 117, .08); }
.filter-menu-search input:focus, .filter-menu-search input:focus-visible { outline: none; box-shadow: none; }
.filter-menu-search .icon { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.filter-menu-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--text-title);
}
.filter-menu-list { max-height: 300px; overflow-y: auto; padding-right: 2px; }
.filter-menu-list::-webkit-scrollbar { width: 6px; }
.filter-menu-list::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }
.filter-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; border: none; border-radius: 8px; background: transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-title);
  text-align: left; cursor: pointer; transition: background .12s, color .12s;
}
.filter-menu-item:hover, .filter-menu-item:focus-visible { background: var(--gray-bg); outline: none; }
.filter-menu-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-menu-check { width: 15px; height: 15px; stroke-width: 2.4; color: var(--navy-light); flex-shrink: 0; opacity: 0; }
.filter-menu-item.is-selected { background: var(--gold-pale); color: var(--navy); font-weight: 600; }
.filter-menu-item.is-selected .filter-menu-check { opacity: 1; }
.filter-menu-empty { padding: 12px; font-size: 13px; color: var(--text-muted); text-align: center; }
@media (max-width: 576px) {
  .filter-field-btn { flex: 1; max-width: none; justify-content: flex-start; }
  .filter-menu { left: 0; right: 0; max-width: none; }
}

/* Interruptor "Solo verificados" */
.filter-toggle {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 12px; margin: 0;
  background: #fff; border: 1px solid var(--card-border); border-radius: 999px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.filter-toggle:hover { border-color: var(--text-muted); }
.filter-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.filter-toggle-track {
  position: relative; width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0;
  background: #D0D5DD; transition: background .18s;
}
.filter-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: transform .18s;
}
.filter-toggle-input:checked + .filter-toggle-track { background: #0d9f6e; }
.filter-toggle-input:checked + .filter-toggle-track::after { transform: translateX(14px); }
.filter-toggle-input:focus-visible + .filter-toggle-track { box-shadow: 0 0 0 4px rgba(13, 159, 110, .18); }
.filter-toggle-text { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-title); white-space: nowrap; }
.filter-toggle-text .icon { width: 13px; height: 13px; color: #0d9f6e; stroke-width: 2.4; }
.filter-toggle.is-active { background: #ECFDF3; border-color: #ABEFC6; }

.filter-clear {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border: 1px dashed var(--card-border); border-radius: 999px; background: #fff;
  color: var(--text-body); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.filter-clear:hover { border-color: #dc3545; color: #dc3545; }
.filter-clear .icon { width: 13px; height: 13px; stroke-width: 2.4; }
/* Sin búsqueda ni filtro activo la barra entera se oculta y la lista sube. */
.filter-bar.is-collapsed { display: none; }
/* Sin filtros activos el botón sigue en su lugar, apagado: desaparecer
   movía de lugar todo lo que tiene al costado, y en celular --donde
   comparte el único renglón con el select-- parecía que faltaba. */
.filter-clear.is-disabled {
  opacity: .45; cursor: default; pointer-events: none;
}
.filter-bar-end { margin-left: auto; }
/* Con "Limpiar" visible la fila iba justa: los rótulos se ocultan y las
   píldoras muestran solo ícono + valor por debajo de 1400px. */
@media (max-width: 1399px) {
  .filter-field-label { display: none; }
  .filter-field { padding: 0 10px 0 12px; }
}
.filter-bar .alert { border-radius: 8px; font-size: 13px; width: 100%; margin: 0; }
@media (max-width: 1500px) { .filter-lead { display: none; } }
@media (max-width: 992px) {
  .filter-bar-end { margin-left: 0; width: 100%; display: flex; justify-content: flex-end; }
}
/* En celular la barra entra en UN renglón: el select de región y
   "Limpiar" lado a lado.

   Antes cada píldora ocupaba la fila entera y recuperaba su rótulo, con
   el criterio de que "Todas" sin "Categoría" al lado no dice nada. Con
   una sola píldora ese criterio ya no paga lo que cuesta: entre el
   rótulo "Filtrar", el select y el botón Limpiar se iban tres renglones
   de alto antes de mostrar un solo proveedor. El ícono de pin y el
   propio valor del select alcanzan para saber qué es.

   El selector de vista se esconde: en esta pantalla las tres vistas no
   son tres opciones reales -- la tabla no entra de ancho y la lista y
   las tarjetas casi no se distinguen. Queda solo tarjetas.

   La segunda condición es el celular DE COSTADO: girarlo lo lleva a
   667-932px de ancho, así que un corte solo por ancho dejaba volver el
   selector de vista y los filtros en tres renglones apenas rotabas el
   teléfono. Se mira el alto, que de costado le queda en 400px y pico; un
   tablet apaisado pasa de 700px, así que no entra.

   Este bloque es la ÚNICA definición del corte: el JS de directory.html
   no repite la media query, pregunta si el selector de vista quedó
   escondido. Cambiar el ancho acá lo cambia en los dos lados. */
@media (max-width: 576px), (orientation: landscape) and (max-height: 500px) {
  .filter-bar { flex-wrap: nowrap; padding: 10px; gap: 8px; border-radius: 12px; }
  .filter-lead { display: none; }
  /* El select se estira con lo que quede; Limpiar no se deja aplastar. */
  .filter-field,
  .filter-bar-compact .filter-field { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px; }
  .filter-field select { flex: 1; min-width: 0; max-width: none; width: auto !important; }
  .filter-field-label { display: none; }
  .filter-field-btn { min-width: 0; }
  .filter-field-value { flex: 1; min-width: 0; }
  .filter-toggle { flex: 0 0 auto; height: 44px; justify-content: center; border-radius: 10px; }
  .filter-clear { flex: 0 0 auto; height: 42px; white-space: nowrap; border-radius: 10px; }
  .filter-bar-end { display: none; }
}

.results-count-bottom { font-size: .95rem; }
.results-count-bottom .fw-semibold { color: var(--navy); font-size: 1.05rem; }

/* ── Filter Sidebar ── */
.filter-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.filter-card-header {
  background: var(--navy);
  color: #fff;
  padding: .6rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.filter-card-body {
  padding: .5rem;
}
.filter-item {
  display: flex;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: 6px;
  font-size: .82rem;
  color: var(--text-body);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.filter-item:hover { background: var(--gray-bg); color: var(--navy); }
.filter-item.active { background: var(--navy); color: #fff; font-weight: 600; }

/* ── Badges (tarjeta del directorio, _supplier_card.html) ── */
.badge-standard {
  display: inline-flex;
  align-items: center;
  background: #ECFDF3;
  color: #067647;
  border: 1px solid #ABEFC6;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Empty State ── */
.empty-state .empty-icon { font-size: 3rem; opacity: .3; }

/* ── Edición inline en el panel (rubros, experiencias) ── */
.panel-inline-edit > summary {
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-blue);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.panel-inline-edit > summary::-webkit-details-marker { display: none; }
.panel-inline-edit > summary::before {
  content: "\203A";
  display: inline-block;
  transition: transform .15s ease;
  font-size: 1rem;
  line-height: 1;
}
.panel-inline-edit[open] > summary::before { transform: rotate(90deg); }
.panel-inline-edit > summary:hover { text-decoration: underline; }
.panel-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .2rem .8rem;
}
.panel-cat-grid ul { list-style: none; padding: 0; margin: 0; display: contents; }
.panel-cat-grid li { margin: 0; }
.panel-cat-grid label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-dark);
  cursor: pointer;
  padding: .15rem 0;
}

/* ── Clientes mineros declarados por la empresa (ficha) ──
   Los nombres sueltos van como .chip (misma tarjeta de la ficha); esto solo
   cubre la variante en varias líneas, en vez de solo los nombres. */
.client-lines {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.client-line {
  padding: .5rem .85rem;
  border-left: 3px solid var(--gold-light);
  background: var(--gray-bg);
  border-radius: 0 6px 6px 0;
  font-size: .85rem;
  color: var(--text-body);
  line-height: 1.5;
}

.detail-section-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.supplier-attachment-thumb {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
}
.supplier-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}
.supplier-attachment-thumb:hover img { transform: scale(1.06); }

.detail-section-body { padding: 1.25rem; }

/* Experience timeline */
.experience-item { padding: 1rem 1.25rem; }
.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .5rem;
}
.experience-company { font-weight: 700; color: var(--navy); font-size: .9rem; }
.experience-service { font-size: .82rem; color: var(--text-body); margin-top: 2px; }
.experience-desc { font-size: .8rem; color: var(--text-body); margin-bottom: .5rem; }
.year-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.experience-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
.docs-label { font-size: .75rem; color: var(--text-body); display: block; margin-bottom: 4px; }
.doc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid;
}
.doc-OC { background:#fef9c3; color:#854d0e; border-color:#fef08a; }
.doc-OS { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.doc-CS { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.doc-GR { background:#fce7f3; color:#9d174d; border-color:#fbcfe8; }
.doc-desc { font-weight: 400; opacity: .85; }

/* ── Convocatorias (feed tipo red social en "Mi Perfil") ── */
.announcements-feed {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.announcement-post {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.announcement-post:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.announcement-post-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.1rem .7rem;
}
.announcement-post-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  font-family: var(--font-sans);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold-light);
}
.announcement-post-meta { min-width: 0; line-height: 1.3; }
.announcement-post-name {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
  font-family: var(--font-sans);
}
.announcement-post-verified {
  color: var(--gold);
  font-size: .8rem;
}
.announcement-post-time {
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.announcement-post-body { padding: 0 1.1rem; }
.announcement-post-title {
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: .25rem;
}
.announcement-post-text {
  font-size: .9rem;
  color: var(--text-body);
  line-height: 1.55;
  word-break: break-word;
  margin-bottom: .9rem;
}
.announcement-post-media {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  background: var(--gray-bg);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.announcement-post-media img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
.announcement-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .85rem 1.1rem;
}
.announcement-post-action {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 50px;
  background: var(--gold-pale);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}
.announcement-post-action:hover { background: var(--gold-light); color: var(--navy-dark); }
.announcement-post-action-whatsapp { background: #25D366; color: #fff; }
.announcement-post-action-whatsapp:hover { background: #1ebe57; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   Ficha de proveedor (detail.html): medidas en px copiadas del diseño
   original para que se vea idéntico. Tipografía: la del sitio (Alibaba
   Sans).
   ═══════════════════════════════════════════════════════════════════ */
.profile-page { font-size: 14px; line-height: 1.5; color: var(--text-title); }

.icon {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; display: inline-block; vertical-align: middle;
}
.icon-sm { width: 13px; height: 13px; stroke-width: 1.8; }
.icon-fill { fill: currentColor; stroke: none; }


.pill {
  font-size: 10.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
  letter-spacing: 0.6px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gold-pale); color: var(--gold-dark);
}

.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; max-width: 100%; }
.profile-actions form { margin: 0; }
/* Los tres acabados de botón del header, calcados del diseño: primario
   (relleno), contorno y cuadrado de ícono. Misma altura para que alineen. */
.btn-primary-profile,
.btn-outline-profile,
.btn-icon-profile {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
}
.btn-primary-profile { padding: 0 22px; border: none; background: var(--grad-navy); color: #fff; }
.btn-primary-profile:hover { filter: brightness(1.08); color: #fff; }
.btn-outline-profile { padding: 0 18px; background: #fff; color: var(--text-title); border: 1px solid var(--card-border); }
.btn-outline-profile:hover { border-color: var(--text-muted); color: var(--text-title); }
.btn-icon-profile { width: 42px; padding: 0; background: #fff; color: var(--text-title); border: 1px solid var(--card-border); }
.btn-icon-profile:hover { border-color: var(--text-muted); color: var(--text-title); }
.btn-icon-profile.is-active { color: var(--navy); border-color: var(--navy); }
.btn-primary-profile .icon, .btn-outline-profile .icon { width: 16px; height: 16px; }
.btn-icon-profile .icon { width: 17px; height: 17px; }

/* Quick facts */
.quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; }
.qf-cell { padding: 16px 22px; border-right: 1px solid var(--gray-bg); min-width: 0; }
.qf-cell:last-child { border-right: none; }
.qf-label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-muted); font-weight: 600; margin-bottom: 6px;
}
.qf-value { font-size: 15px; font-weight: 600; color: var(--text-title); overflow-wrap: break-word; }
.qf-value a { color: var(--gold-dark); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.qf-value a:hover { text-decoration: underline; }
.qf-value a .icon { width: 12px; height: 12px; }
@media (max-width: 860px) {
  .quick-facts { grid-template-columns: repeat(2, 1fr); }
  .qf-cell { border-bottom: 1px solid var(--gray-bg); }
  .qf-cell:nth-child(2n) { border-right: none; }
}

/* Grilla 2×2: una tarjeta por cuadrante */
.grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.grid-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 860px) {
  /* Una sola columna: perfil, contacto, trayectoria, videos. */
  .grid-4 { display: flex; flex-direction: column; }
  .grid-col { display: contents; }
  .box-tecnico { order: 1; }
  .box-contacto { order: 2; }
  .box-trayectoria { order: 3; }
  .box-videos { order: 4; }
}
.box { background: #fff; border: 1px solid var(--card-border); border-radius: 10px; padding: 22px 24px; }

.sub-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted); font-weight: 600; margin-bottom: 12px;
}

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  font-size: 14px; padding: 3px 19px; border-radius: 8px;
  background: var(--gray-bg); color: var(--text-title); font-weight: 500; line-height: 1.6;
  text-decoration: none;
}
a.chip:hover { color: var(--navy); }

/* Listas largas se desplazan dentro de su tarjeta en vez de estirar la grilla. */
.scroll-list { max-height: 26rem; overflow-y: auto; padding-right: 6px; }
.scroll-list::-webkit-scrollbar { width: 6px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }

.exp-list { display: flex; flex-direction: column; }
.exp-item {
  padding: 16px 0; border-bottom: 1px solid var(--gray-bg);
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start;
}
.exp-item:first-child { padding-top: 0; }
.exp-item:last-child { border-bottom: none; padding-bottom: 0; }
.exp-title { font-size: 14.5px; font-weight: 600; color: var(--text-title); letter-spacing: -0.2px; margin-bottom: 4px; line-height: 1.3; }
.exp-desc { font-size: 13px; color: var(--text-body); line-height: 1.55; }
.exp-year {
  font-size: 12px; font-weight: 800; background: #e2e8f0; color: var(--text-body);
  padding: 4px 12px; border-radius: 6px; letter-spacing: 0.3px; white-space: nowrap;
}

.docs-row { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: #fff; border: 1px solid var(--card-border); border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-title); text-decoration: none;
  cursor: pointer; transition: border-color .15s; flex: 1; min-width: 0; white-space: nowrap;
}
.doc-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.doc-btn .icon { color: var(--text-body); }
.doc-btn .icon.pdf-icon { color: #e5484d; }

/* Información SUNAT en la ficha (ver detail.html). */
.sunat-chip.is-ok   { background: #ECFDF3; color: #067647; }
.sunat-chip.is-warn { background: #FFFAEB; color: #B54708; }
.card-sunat.is-ok   { color: #067647; }
.card-sunat.is-warn { color: #B54708; }
.card-sunat.is-ok .icon, .card-sunat.is-warn .icon { color: currentColor; }
.sunat-list { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--text-body); line-height: 1.7; }
.sunat-fuente { font-size: 11.5px; color: var(--text-muted); margin: 14px 0 0; }
.dist-box {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px; background: #fff; border: 1px solid var(--card-border); border-radius: 8px;
  font-size: 14px; color: var(--text-title); line-height: 1.55; font-weight: 500;
}
.dist-box .icon { color: var(--text-body); width: 16px; height: 16px; margin-top: 3px; }

.certs-line { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; align-items: center; }
.cert {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-title); font-weight: 600;
  background: transparent; border: none; padding: 0; cursor: pointer; font-size: 13px;
}
.cert .icon { color: #0d9f6e; width: 15px; height: 15px; stroke-width: 2.2; }
.cert.is-legacy { cursor: default; }
/* Homologaciones: escudo azul en vez del check verde de una norma. */
.cert.is-homologation .icon { color: var(--navy-light); }

/* Contacto comercial */

/* Cabecera de la tarjeta de contacto: título + "Copiar contactos". */
.box-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

.contacts-copy-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--card-border); border-radius: 8px; background: #fff;
  color: var(--text-title); font-size: 12.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.contacts-copy-btn:hover { border-color: var(--text-muted); }
.contacts-copy-btn .icon { width: 14px; height: 14px; }
.contacts-copy-btn.is-copied { border-color: #0d9f6e; color: #0d9f6e; background: #ECFDF3; }
.contact-list { display: flex; flex-direction: column; }
.person-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; flex-shrink: 0; }
/* Ocultar/mostrar (solo staff) */
.contact-visibility-form { margin: 0; }
.contact-visibility-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border: 1px solid var(--card-border); border-radius: 999px; background: #fff;
  color: var(--text-body); font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.contact-visibility-btn .icon { width: 13px; height: 13px; }
.contact-visibility-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.contact-visibility-btn[data-visible="0"] { background: #FFF7ED; border-color: #FED7AA; color: #C2410C; }
.contact-group.is-hidden { opacity: .8; }
.contact-group.is-hidden .person-row .ico { background: #FFF7ED; color: #C2410C; }
.contact-hidden-note {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 4px;
  font-size: 11.5px; font-weight: 600; color: #C2410C;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 6px; padding: 3px 8px;
}
.contact-hidden-note .icon { width: 12px; height: 12px; }
.contact-group + .contact-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-bg); }
.person-row { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--gray-bg); }
.person-row .ico {
  width: 30px; height: 30px; background: var(--gray-bg); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--text-body); flex-shrink: 0;
}
.person-info { flex: 1; min-width: 0; }
.person-row .p-name { font-size: 14px; font-weight: 600; color: var(--text-title); line-height: 1.25; }
.person-row .p-role { font-size: 12px; color: var(--text-muted); margin-top: 1px; line-height: 1.25; }
.person-row .p-updated { font-size: 11px; color: var(--text-muted); font-weight: 500; white-space: nowrap; flex-shrink: 0; }

.contact-line { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--gray-bg); }
.contact-line:last-of-type { border-bottom: none; }
.contact-line .info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.contact-line .ico {
  width: 24px; height: 24px; background: var(--gray-bg); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--text-body); flex-shrink: 0;
}
.contact-line .ico .icon { width: 13px; height: 13px; }
.contact-line .v {
  flex: 1; min-width: 0; color: var(--gold-dark); text-decoration: none; font-weight: 600;
  font-size: 13px; line-height: 1.3; word-break: break-word;
}
.contact-line .v:hover { text-decoration: underline; }

.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap; flex-shrink: 0; border: none; cursor: pointer;
}
.pill-btn .icon { width: 13px; height: 13px; }
.pill-btn.email { background: var(--text-title); color: #fff; }
.pill-btn.email:hover { background: #1e2a3a; color: #fff; }
.pill-btn.wa { background: #25d366; color: #fff; }
.pill-btn.wa:hover { background: #1eb958; color: #fff; }

.outline-btn {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; width: 100%;
  padding: 8px 14px; border-radius: 7px; border: 1px solid var(--card-border);
  background: #ECFDF3; color: var(--text-title); font-size: 12.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: border-color .15s;
}
.outline-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.outline-btn .icon { color: var(--text-body); }

.profile-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; background: transparent; border: none;
  cursor: pointer; color: var(--text-muted); flex-shrink: 0; padding: 0; transition: background .15s, color .15s;
}
.profile-copy-btn .icon { width: 12px; height: 12px; }
.profile-copy-btn:hover { background: var(--gray-bg); color: var(--text-body); }
.profile-copy-btn.is-copied { color: #0d9f6e; }

/* Videos institucionales + fotos */
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.video-card { min-width: 0; }
.video-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: none;
  aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--text-title); cursor: pointer;
}
/* La imagen va absoluta al contenedor y no con height: 100%: dentro de un
   <button> los porcentajes de alto no se resuelven en todos los motores. */
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%); }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform .15s;
}
.video-thumb:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-play .icon { width: 16px; height: 16px; color: var(--text-title); stroke: none; fill: currentColor; margin-left: 2px; }
.video-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--gold-dark); text-decoration: none; }
.video-link:hover { text-decoration: underline; }
.video-link .icon { width: 12px; height: 12px; }

.photo-thumb { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--card-border); cursor: pointer; transition: opacity .15s; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb:hover { opacity: .85; }

@media (max-width: 600px) {
  .docs-row { flex-direction: column; }
  .doc-btn { white-space: normal; }
  .person-row { flex-wrap: wrap; }
  .person-row .p-updated { flex-basis: 100%; margin-left: 40px; margin-top: 2px; }
  .contact-line { flex-direction: column; align-items: stretch; gap: 6px; }
  .pill-btn { margin-left: 32px; width: calc(100% - 32px); }
  .video-grid { grid-template-columns: 1fr; }
}

/* Lightbox */
.profile-lightbox {
  display: none; position: fixed; inset: 0; z-index: 1080;
  background: rgba(6, 10, 16, .92); align-items: center; justify-content: center;
}
.profile-lightbox.is-open { display: flex; }
.profile-lightbox-content { max-width: 88vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.profile-lightbox-content img { max-width: 88vw; max-height: 82vh; border-radius: 8px; object-fit: contain; }
.profile-lightbox-content iframe { width: min(88vw, 960px); height: min(82vh, 540px); border: none; border-radius: 8px; background: #000; }
.profile-lightbox-close,
.profile-lightbox-nav {
  position: absolute; border: none; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.profile-lightbox-close:hover, .profile-lightbox-nav:hover { background: rgba(255,255,255,.2); }
.profile-lightbox-close { top: 20px; right: 24px; width: 38px; height: 38px; }
.profile-lightbox-close .icon { width: 16px; height: 16px; }
.profile-lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.profile-lightbox-nav .icon { width: 18px; height: 18px; }
.profile-lightbox-nav.prev { left: 20px; }
.profile-lightbox-nav.next { right: 20px; }

/* ── Admin Panel ── */
.stat-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 4px solid;
  transition: transform .15s, box-shadow .15s;
  color: inherit;
  text-decoration: none;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-total     { border-top-color: var(--navy); }
.stat-published { border-top-color: #16a34a; }
.stat-pending   { border-top-color: #d97706; }
.stat-review    { border-top-color: #ea580c; }
.stat-buyers    { border-top-color: #7c3aed; }
.stat-standard  { border-top-color: var(--gold); }
.stat-verified  { border-top-color: #0891b2; }
.stat-validated { border-top-color: #0369a1; }
.stat-destacados      { border-top-color: var(--star); }
.stat-buyers-rejected { border-top-color: #dc2626; }
.stat-changes         { border-top-color: #4f46e5; }
.stat-attachments     { border-top-color: #0d9488; }
.stat-certifications { border-top-color: #b45309; }
.stat-reclamaciones { border-top-color: #dc2626; }

.stat-icon { font-size: 1.5rem; margin-bottom: .4rem; opacity: .65; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: .3rem; }
.stat-label { font-size: .75rem; color: var(--text-body); font-weight: 500; }

.panel-table-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.panel-table-header {
  padding: .85rem 1.25rem;
  background: var(--gray-bg);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}

.panel-quick-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--text-body);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.panel-quick-link:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--navy);
}

/* ── Analíticas de Búsqueda ── */
.filter-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter-pill {
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--text-body);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-pill:hover { border-color: var(--gold); color: var(--navy); }
.filter-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.mini-stat {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: .85rem 1rem;
  text-align: center;
}
.mini-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.mini-stat-label { font-size: .72rem; color: var(--text-body); font-weight: 500; margin-top: .15rem; }

.chart-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chart-canvas-wrap { position: relative; height: 280px; padding: 1rem 1.25rem; }

/* ── Módulo de Actividad ── */
/* Pestañas entre Resumen / Compradores / Proveedores. El panel no tiene
   sidebar, así que sin esto habría que volver al navbar para saltar entre
   secciones hermanas. */
.activity-tabs {
  display: flex;
  gap: .35rem;
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
}
.activity-tab {
  padding: .5rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.activity-tab:hover { color: var(--navy); }
.activity-tab.active { color: var(--navy); border-bottom-color: var(--gold); }

/* Línea de tiempo de un comprador. Los eventos son de tipos distintos
   (sesión, búsqueda, ficha, consulta) y el color del ícono es lo que
   permite barrerla de un vistazo sin leer cada renglón. */
.activity-event {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--card-border);
}
.activity-event:last-child { border-bottom: none; }
.activity-event-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  background: var(--gray-bg);
  color: var(--text-body);
}
.activity-event-sesion .activity-event-icon { background: #e8eef7; color: var(--navy); }
.activity-event-busqueda .activity-event-icon { background: #e0f2fe; color: #0891b2; }
.activity-event-vista .activity-event-icon { background: #ede9fe; color: #7c3aed; }
.activity-event-consulta .activity-event-icon { background: #dcfce7; color: #15803d; }
.activity-event-body { flex: 1; min-width: 0; }
.activity-event-text { font-size: .83rem; color: var(--text-title); }
.activity-event-text a { color: var(--navy); }
.activity-event-detail {
  font-size: .74rem;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-event-date {
  font-size: .72rem;
  color: var(--text-body);
  white-space: nowrap;
}

/* ── Pagination ──
   Pie de resultados del directorio (.results-footer / .pager) y, para las
   demás páginas que siguen usando .pagination de Bootstrap, el mismo
   acabado: botones blancos con borde, el activo relleno en azul. */
.results-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding: 14px 20px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 10px;
}
.results-count { font-size: 13.5px; color: var(--text-body); display: flex; align-items: center; gap: 10px; }
.results-count strong { color: var(--text-title); font-weight: 700; }
.results-count-sep { width: 1px; height: 14px; background: var(--card-border); }
.pager { display: flex; align-items: center; gap: 6px; }
.pager-pages { display: flex; align-items: center; gap: 6px; margin: 0 4px; }
.pager-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 8px;
  background: #fff; border: 1px solid var(--card-border); color: var(--text-title);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.pager-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.pager-btn.active {
  background: var(--grad-navy);
  border-color: transparent; color: #fff;
}
.pager-btn .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.pager-nav { padding: 0 14px; }
.pager-btn.is-disabled { color: #C4CAD3; pointer-events: none; background: var(--gray-bg); }
.pager-gap { color: var(--text-muted); padding: 0 2px; font-weight: 600; }
@media (max-width: 640px) {
  .results-footer { justify-content: center; text-align: center; padding: 12px; }
  .results-count { justify-content: center; flex-wrap: wrap; gap: 6px 9px; }
  .pager { width: 100%; justify-content: space-between; }
  .pager-pages {
    min-width: 0;
    max-width: calc(100vw - 132px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pager-pages::-webkit-scrollbar { display: none; }
  .pager-nav span { display: none; }
  .pager-nav { padding: 0; width: 38px; }
}

/* Bootstrap .pagination (paneles y demás listados) con el mismo acabado. */
.pagination { gap: 6px; }
.page-link {
  color: var(--text-title);
  border: 1px solid var(--card-border);
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  font-size: 13.5px; font-weight: 600;
  text-align: center;
  border-radius: 8px !important;
  transition: border-color .15s, color .15s, background .15s;
}
.page-link:hover { color: var(--text-title); background-color: #fff; border-color: var(--text-muted); }
.page-link:focus { box-shadow: 0 0 0 4px rgba(13, 53, 117, .10); }
.page-item.active .page-link {
  background: var(--grad-navy);
  border-color: transparent;
  color: #fff;
}
.page-item.disabled .page-link { color: #C4CAD3; background: var(--gray-bg); }

/* ── Suppliers Grid (directory cards view) ──
   Mismo lenguaje que la ficha: tarjeta blanca con borde fino y radio 10,
   sin sombras; Inter para el nombre; pill, chips e íconos de línea. */
.suppliers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  transition: opacity .15s ease;
}
.supplier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  color: var(--text-title);
  transition: border-color .15s ease;
  overflow: hidden;
  font-size: 14px;
}
.supplier-card:hover { border-color: var(--text-muted); }

.supplier-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.supplier-card-link:hover { color: inherit; text-decoration: none; }

.supplier-card-logo {
  height: 132px; margin: 16px 16px 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px; background: #fff;
  border: 1px solid var(--card-border); border-radius: 10px;
}
.supplier-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.supplier-card-initials {
  width: 56px; height: 56px; border-radius: 10px;
  background: var(--gray-bg); color: var(--text-body);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; font-family: var(--font-sans);
}

.supplier-card-info { padding: 14px 16px 10px; flex: 1; }
.supplier-card-name {
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--text-heading); margin-bottom: 6px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
.supplier-card-desc {
  font-size: 13px; color: var(--text-paragraph); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.5em;
}

.supplier-card-meta { padding: 0 16px 14px; display: flex; gap: 8px 16px; flex-wrap: wrap; }
.supplier-card-meta span { font-size: 13px; color: var(--text-body); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.supplier-card-meta .icon { width: 13px; height: 13px; stroke-width: 1.8; color: var(--text-muted); }
.supplier-card-meta b { color: var(--text-title); font-weight: 600; }
/* En cuadrícula los dos grupos (.meta-col) son transparentes al layout. */
.meta-col { display: contents; }

.supplier-card-footer { padding: 12px 16px; border-top: 1px solid var(--gray-bg); display: flex; gap: 8px; align-items: center; }
.btn-card-empty-hint { flex: 1; display: flex; align-items: center; font-size: 12px; color: var(--text-muted); font-style: italic; }

.btn-card {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 10px; border-radius: 7px; border: 1px solid transparent;
  font-size: 12px; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.btn-card .icon { width: 13px; height: 13px; }
/* Llamar es la acción más secundaria: cuadrado de solo ícono. */
.btn-card-phone { flex: 0 0 34px; padding: 0; background: #fff; border-color: var(--card-border); color: var(--text-title); }
.btn-card-phone:hover { border-color: var(--text-muted); color: var(--text-title); }
.btn-card-label { display: none; }
/* Cotizar lleva siempre su texto: su ícono es un casillero y solo no se entiende. */
.suppliers-grid .btn-card-quote .btn-card-label { display: inline; }
/* Verde de WhatsApp: color de marca, solo acá para que se reconozca. */
.btn-card-wa { background: #25d366; color: #fff; }
.btn-card-wa:hover { background: #1eb958; color: #fff; }
.btn-card-contact { background: var(--grad-navy); color: #fff; }
.btn-card-contact:hover { filter: brightness(1.08); color: #fff; }

/* ── Modal de consulta ── */
.contact-modal { border: 0; border-radius: 14px; }
.contact-modal .modal-header { border-bottom: 1px solid var(--card-border); padding: 1rem 1.25rem; }
.contact-modal .modal-title { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.35; }
.contact-modal .modal-body { padding: 1.25rem; }
.contact-modal .modal-footer { border-top: 1px solid var(--card-border); padding: .85rem 1.25rem; }
.contact-modal-from {
  font-size: .78rem;
  color: var(--text-muted);
  background: var(--gray-bg);
  border-radius: 8px;
  padding: .5rem .7rem;
  margin-bottom: 1rem;
}

@media (max-width: 1200px) { .suppliers-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .suppliers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) {
  .suppliers-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
  .supplier-card-logo { height: 116px; margin: 12px 12px 0; }
  .supplier-card-info { padding: 12px 14px 9px; }
  .supplier-card-desc { -webkit-line-clamp: 3; min-height: 0; }
  .supplier-card-meta { padding: 0 14px 12px; }
  .supplier-card-footer { padding: 10px 14px; }
}

/* ── Toggle de vista (cuadrícula / tabla) ── */
/* Selector de vista: control segmentado con un botón por vista
   (Tarjetas / Lista / Tabla), el activo relleno en azul. */
.view-switch {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--gray-bg); border: 1px solid var(--card-border);
  border-radius: 9px; padding: 3px;
}
.view-switch-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border: none; border-radius: 7px;
  background: transparent; color: var(--text-body);
  font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.view-switch-btn .icon { width: 15px; height: 15px; }
.view-switch-btn:hover { color: var(--text-title); background: rgba(255,255,255,.7); }
.view-switch-btn.active {
  background: var(--grad-navy);
  color: #fff;
}
.view-switch-btn.active:hover { color: #fff; }
@media (max-width: 576px) {
  .view-switch-btn span { display: none; }
  .view-switch-btn { padding: 0 10px; }
}
.view-toggle { display: flex; align-items: center; gap: 6px; }
.view-toggle-btn {
  background: #fff; border: 1px solid var(--card-border); border-radius: 8px;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--text-body); cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.view-toggle-btn .icon { width: 16px; height: 16px; transition: transform .18s ease; }
.view-toggle-btn:hover { border-color: var(--text-muted); color: var(--text-title); }
.view-toggle-btn:active .icon { transform: scale(.8); }
.view-toggle-btn.active { background: var(--gray-bg); border-color: var(--navy); color: var(--navy); }

/* Vista en lista: cada proveedor es una fila, en todos los tamaños. Abajo
   hay dos ajustes progresivos -- ni bien no entran las dos columnas de
   datos lado a lado (@media max-width:991px) se apilan una sobre otra
   pero la fila sigue siendo fila; recién en celular angosto
   (@media max-width:600px) el logo se achica del todo. Nunca vuelve al
   formato apilado de tarjeta, que es justo lo que la distingue de
   "Tarjetas". */
.suppliers-grid.list-view { display: flex; flex-direction: column; gap: 12px; }
.suppliers-grid.list-view .supplier-card { flex-direction: row; align-items: stretch; }
.suppliers-grid.list-view .supplier-card-link { flex-direction: row; align-items: center; gap: 4px; }
.suppliers-grid.list-view .supplier-card-logo {
  width: 190px; min-width: 190px; height: 110px; margin: 16px 0 16px 16px; padding: 12px 16px;
}
.suppliers-grid.list-view .supplier-card-info { padding: 16px; flex: 1.3; min-width: 0; }
.suppliers-grid.list-view .supplier-card-name { -webkit-line-clamp: 1; min-height: auto; margin-bottom: 4px; font-size: 15px; }
.suppliers-grid.list-view .supplier-card-desc { display: block; overflow: visible; min-height: auto; }
.suppliers-grid.list-view .supplier-card-meta { flex: 1.7; display: flex; align-items: center; padding: 16px 20px; gap: 24px; }
.suppliers-grid.list-view .meta-col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.suppliers-grid.list-view .meta-col + .meta-col { padding-left: 24px; border-left: 1px solid var(--gray-bg); }
.suppliers-grid.list-view .supplier-card-footer {
  flex-direction: column; justify-content: center; align-items: stretch;
  border-top: none; border-left: 1px solid var(--gray-bg); width: 160px; gap: 8px; padding: 16px;
}
.suppliers-grid.list-view .btn-card { flex: 0 0 auto; width: 100%; }
.suppliers-grid.list-view .btn-card-phone { width: 100%; }
.suppliers-grid.list-view .btn-card-label { display: inline; }
@media (max-width: 991px) {
  .suppliers-grid.list-view .supplier-card-logo { width: 150px; min-width: 150px; }
  .suppliers-grid.list-view .supplier-card-meta { flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 6px; }
  .suppliers-grid.list-view .meta-col { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .suppliers-grid.list-view .meta-col + .meta-col { padding-left: 0; border-left: none; }
  .suppliers-grid.list-view .supplier-card-footer { width: 120px; }
}

/* ── Vista tabla (admin-style, con encabezados ordenables) ──
   Mismo lenguaje que las tarjetas de la vista lista: sombra pareja en vez
   de un borde marcado, esquinas redondeadas, recuadro de iniciales gris
   plano. Las filas alternan blanco/gris clarito (antes solo lo hacía --de
   pura casualidad-- el fondo dorado de "destacado" cuando la mitad de una
   página resultaba estar destacada: no era un zebrado real, y con TODA la
   página destacada (o ninguna) el efecto directamente desaparecía). La
   estrella junto al nombre ya alcanza para marcar un destacado, así que
   se saca el fondo dorado de la fila entera -- competía con el zebrado. */
.suppliers-table-wrap {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  /* overflow-x auto y no hidden: son nueve columnas, y styles.css carga
     despues de Bootstrap, asi que un `hidden` aca le gana al overflow-x del
     .table-responsive del mismo div y deja la tabla recortada en movil. */
  overflow-x: auto;
}
.suppliers-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 13.5px;
  color: var(--text-title);
}
/* Cabecera: mismas mayúsculas chicas que los títulos de las tarjetas
   (.box-title / .filter-bar .form-label). */
.suppliers-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-muted);
}
.suppliers-table thead th:first-child { border-top-left-radius: 10px; padding-left: 20px; }
.suppliers-table thead th:last-child { border-top-right-radius: 10px; padding-right: 20px; }
.suppliers-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--gray-bg);
  vertical-align: middle;
  color: var(--text-body);
  line-height: 1.5;
}
.suppliers-table tbody td:first-child { padding-left: 20px; }
.suppliers-table tbody td:last-child { padding-right: 20px; }
.suppliers-table tbody tr:last-child td { border-bottom: none; }
.suppliers-table tbody tr { transition: background .12s; }
.suppliers-table tbody tr:hover { background: #F9FAFC; }

/* Logo: misma caja con borde que en las tarjetas, solo que más chica. */
.table-logo-cell { width: 124px; }
.table-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 64px; padding: 6px 10px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.table-logo-wrap:hover { border-color: var(--navy-light); }
.table-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.table-logo-initials {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--gray-bg); color: var(--text-body); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

.table-name-cell { min-width: 180px; max-width: 250px; }
.table-supplier-name {
  display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--text-title); text-decoration: none; line-height: 1.35;
}
.table-supplier-name:hover { color: var(--navy-light); }
.table-verified {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; background: var(--gold-pale); color: var(--gold-dark);
}
.table-verified .icon { width: 11px; height: 11px; stroke-width: 2.4; }

.table-desc-cell { min-width: 220px; max-width: 360px; }
.table-clients-cell { min-width: 170px; max-width: 280px; font-size: 13px; }
.table-clamp {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.table-empty { color: #C4CAD3; }
.table-num { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-title); }
.table-region { white-space: nowrap; color: var(--text-title); font-weight: 500; }
.table-region .icon { color: var(--text-muted); margin-right: 5px; vertical-align: -2px; }
.table-workers { white-space: nowrap; }
.table-action-head { width: 120px; }
.table-view-btn { white-space: nowrap; }
.table-view-btn .icon { width: 14px; height: 14px; transition: transform .15s; }
.table-view-btn:hover .icon { transform: translateX(2px); }

.table-sort-link {
  color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.table-sort-link:hover { color: var(--navy-light); }
.table-sort-icons { display: inline-flex; flex-direction: column; gap: 0; }
.table-sort-icons .icon { width: 11px; height: 11px; stroke-width: 2.6; color: #C4CAD3; margin: -2px 0; }
.table-sort-icons .icon.active { color: var(--navy-light); }
/* Hasta ~1500px el contenedor mide 1240px: se aprietan paddings y logo
   para que las nueve columnas entren sin scroll horizontal. */
@media (max-width: 1499px) {
  .suppliers-table { font-size: 13px; }
  .suppliers-table thead th { padding: 12px 12px; font-size: 11px; }
  .suppliers-table tbody td { padding: 14px 12px; }
  .table-logo-cell { width: 100px; }
  .table-logo-wrap { width: 88px; height: 56px; padding: 5px 8px; }
  .table-desc-cell { min-width: 200px; max-width: 280px; }
  .table-clients-cell { min-width: 150px; max-width: 220px; }
  .table-name-cell { min-width: 160px; max-width: 210px; }
  .table-action-head { width: 100px; }
}

@media (max-width: 900px) {
  .suppliers-table { font-size: 0.82rem; }
}

/* Lista en celular: sigue siendo una fila (logo chico a la izquierda,
   nombre a la derecha) -- no vuelve a apilarse como tarjeta, que es
   justamente lo que la distingue de "Tarjetas". La descripción y el
   detalle no entran de costado, así que bajan como su propia franja
   debajo, angosta y de ancho completo. */
@media (max-width: 600px) {
  .suppliers-grid.list-view .supplier-card-link {
    flex-wrap: wrap; align-items: flex-start; gap: 0;
  }
  .suppliers-grid.list-view .supplier-card-logo {
    width: 76px; min-width: 76px; height: 76px; margin: 10px; padding: 6px;
  }
  .suppliers-grid.list-view .supplier-card-info { flex: 1; min-width: 0; padding: 10px 10px 10px 0; }
  .suppliers-grid.list-view .supplier-card-name { font-size: 14px; }
  .suppliers-grid.list-view .supplier-card-desc { display: none; }
  .suppliers-grid.list-view .supplier-card-meta {
    flex-basis: 100%; flex-direction: column; padding: 0 10px 10px; gap: 6px;
  }
  .suppliers-grid.list-view .meta-col { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .suppliers-grid.list-view .meta-col + .meta-col { padding-left: 0; border-left: none; }
  .suppliers-grid.list-view .supplier-card-footer {
    flex-direction: row; width: auto; border-left: none; border-top: 1px solid var(--gray-bg);
  }
  .suppliers-grid.list-view .btn-card { flex: 1; width: auto; }
  .suppliers-grid.list-view .btn-card-label { display: none; }
}

.badge-destacado {
  display: inline-flex;
  align-items: center;
  background: var(--star);
  color: #fff;
  border: 1px solid #dd9515;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
}

/* ── Inter en títulos de sección y componente ── */

.filter-card-header,
.panel-table-header,
.supplier-card-name,
.supplier-name,
.experience-company {
  font-family: var(--font-sans);
  font-weight: 800;
}

/* ── Responsive ── */
@media (max-width: 768px) {

  .footer-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 576px) {
  .footer-stats { padding: 1.35rem 0 .65rem; }
  .footer-stat-item { padding: .65rem .4rem; }
  .footer-stat-num { font-size: 1.7rem; }
  .footer-main { padding: 2rem 0 1.5rem; }
  .footer-cols { gap: 1.35rem; }
  .footer-categories { padding: 1.15rem 0; }
}

/* ── 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%;
}
[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); }
}

.suggest-section-label {
  padding: .5rem 1.25rem .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
  border-top: 1px solid var(--card-border);
}
[data-autocomplete-dropdown] .suggest-section-label:first-child,
#searchSuggestions .suggest-section-label:first-child {
  border-top: none;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .3rem 1.25rem;
  font-size: .85rem;
  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; }

.suggest-icon {
  font-size: .85rem;
  color: var(--text-body);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  transition: transform .15s ease;
}
.suggest-item:hover .suggest-icon { transform: scale(1.12); }
.suggest-item-category .suggest-icon { color: var(--gold); }
.suggest-item-supplier .suggest-icon { color: var(--navy); }
.suggest-item-popular .suggest-icon { color: var(--gold); }
.suggest-item-spelling .suggest-icon { color: var(--navy); }
.suggest-item-spelling { border-bottom: 1px solid rgba(0, 0, 0, .06); }

/* ── 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: 800;
  font-size: 1.02rem;
}
.chatbot-header-sub {
  font-size: .78rem;
  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: .9rem;
  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: 16px;
  font-family: var(--font-sans);
  font-size: .95rem;
  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: 10px;
  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: .94rem; }
.chatbot-supplier-card span { color: var(--text-muted); font-size: .82rem; }
.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: 999px;
  padding: .18rem .6rem;
  font-size: .76rem;
  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: 20px;
  padding: .6rem 1.1rem;
  font-size: .95rem;
  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: 1rem;
}
.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: 1.35rem;
}
.libro-reclamaciones-texto { display: flex; flex-direction: column; font-size: .78rem; letter-spacing: .02em; }
.libro-reclamaciones-texto small { font-size: .66rem; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
.intro-block .libro-reclamaciones-badge { width: 3.2rem; height: 3.2rem; font-size: 1.8rem; background: var(--navy); color: #fff; }

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

/* Boton "Cotizar" del pie de la tarjeta. Vive dentro de un <form> propio
   (necesita POST con CSRF), asi que el form tiene que estirarse igual que
   los demas botones o la fila queda despareja. */
.quote-toggle-form { display: contents; }

/* Botón "Cotizar": blanco, el mismo en la tarjeta, la tabla y la ficha
   (ahí va con .pp-btn, por eso el selector doble le gana a sus colores).
   Marcado, se rellena en azul con el check. */
.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, 44, 129, .06), 0 2px 6px rgba(1, 44, 129, .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, 44, 129, .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, 44, 129, .22);
}
:is(.btn-card, .pp-btn).btn-card-quote.is-selected:hover { background: #0A3AA0; border-color: #0A3AA0; color: #fff; }
:is(.btn-card, .pp-btn).btn-card-quote:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Proveedor marcado para cotizar: la tarjeta entera se sombrea en celeste
   con borde navy y un check en la esquina, para distinguir de un vistazo
   los elegidos de los que no (la clase la ponen la plantilla al cargar y
   quote-toggle.js al marcar/desmarcar). */
.supplier-card.is-quote-selected {
  background: #EAF1FB;
  border-color: var(--navy-light);
  box-shadow: 0 0 0 1px var(--navy-light), 0 10px 24px rgba(13, 53, 117, .16);
}
.supplier-card.is-quote-selected:hover { border-color: var(--navy-light); }
.supplier-card.is-quote-selected .supplier-card-footer { border-top-color: #D3E1F3; }
.supplier-card.is-quote-selected::before {
  content: ""; position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 2px 6px rgba(13, 53, 117, .35);
}
/* En la tabla, la fila marcada se sombrea y lleva una barra navy a la
   izquierda. */
.suppliers-table tbody tr.is-quote-selected,
.suppliers-table tbody tr.is-quote-selected:hover { background: #EAF1FB; }
.suppliers-table tbody tr.is-quote-selected > td:first-child { box-shadow: inset 4px 0 0 var(--navy-light); }

/* En la ficha y en la tabla 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; }
.table-quote-cell .quote-toggle-form { display: block; }
.table-quote-cell .btn-card-quote { width: 100%; white-space: nowrap; }

/* Contador del navbar. El [hidden] necesita !important propio porque
   display:inline-flex le gana al display:none que trae el atributo. */
.nav-quote-badge[hidden] { display: none; }
.nav-quote-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}

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

.quote-selection-list { display: flex; flex-direction: column; gap: 10px; }
.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-logo { flex: 0 0 auto; }
.quote-selection-logo img,
.quote-selection-initials {
  width: 44px; height: 44px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--card-border);
}
.quote-selection-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: .85rem;
  border-color: var(--navy);
}
.quote-selection-info { flex: 1 1 auto; min-width: 0; }
.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-desc { color: var(--text-body); font-size: .84rem; margin-top: 2px; }
.quote-selection-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 4px; font-size: .78rem; color: var(--text-body);
}
.quote-selection-warn { color: #B54708; }
.quote-selection-remove { flex: 0 0 auto; }

.quote-form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 20px;
}
.quote-form-from {
  font-size: .84rem;
  color: var(--text-body);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}

@media (max-width: 576px) {
  .quote-selection-item { flex-wrap: wrap; }
  .quote-selection-info { flex-basis: 100%; order: 3; }
}

/* ── 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: 8px; 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: 10.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; 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: #b42318;
  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: 12px;
  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: 2rem; color: var(--gold-dark); }
.status-card-title { color: var(--text-heading); font-family: var(--font-sans); }
.status-card-text { font-size: .88rem; 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: .95rem; 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: 8px; object-fit: cover; }
.directory-teaser-img-nombre { display: block; width: 180px; max-width: 100%; height: 22px; opacity: .85; }

/* ─── Cotización grupal: burbuja y pop-up (_cotizacion_modal.html) ───
   La burbuja es una pestaña pegada al borde derecho, arriba (bajo el
   navbar). Con mouse queda escondida -- asoma solo una franja -- y sale al
   pasar el puntero por esa zona del borde (el ::before agranda el área que
   la despierta), con el teclado, o unos segundos al marcar un proveedor
   (.is-peek, quote-toggle.js). En pantallas táctiles, sin hover, se ve
   siempre. */
.quote-fab {
  position: fixed; right: 0; top: 96px; z-index: 1050;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 96px; padding: 14px 8px 12px; border: none;
  border-radius: 16px 0 0 16px;
  background: var(--grad-navy); color: #fff;
  box-shadow: -6px 10px 28px rgba(6, 20, 40, .28);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), width .2s ease, box-shadow .2s ease, background .2s ease;
  animation: quote-fab-in .3s ease both;
}
.quote-fab[hidden] { display: none; }
.quote-fab:hover, .quote-fab:focus-visible {
  width: 104px; box-shadow: -8px 12px 32px rgba(6, 20, 40, .36); outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .quote-fab { transform: translateX(calc(100% - 6px)); box-shadow: none; }
  .quote-fab::before { content: ""; position: absolute; top: -12px; bottom: -12px; left: -40px; width: 40px; }
  .quote-fab .quote-fab-count { opacity: 0; transition: opacity .15s; }
  .quote-fab:hover, .quote-fab:focus-visible, .quote-fab.is-peek { transform: translateX(0); box-shadow: -8px 12px 32px rgba(6, 20, 40, .36); }
  .quote-fab:hover .quote-fab-count, .quote-fab:focus-visible .quote-fab-count, .quote-fab.is-peek .quote-fab-count { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .quote-fab { transition: none; }
}
.quote-fab .bi { font-size: 22px; line-height: 1; }
.quote-fab-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  line-height: 1.25; opacity: .9;
}
.quote-fab-count {
  position: absolute; top: -8px; left: -8px;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--star); color: #1f1300; font-size: 13px; font-weight: 800;
  border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
@keyframes quote-fab-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 576px) {
  .quote-fab { width: 84px; padding: 11px 6px 9px; }
  .quote-fab:hover, .quote-fab:focus-visible { width: 90px; }
  .quote-fab .bi { font-size: 19px; }
  .quote-fab-label { font-size: 9.5px; }
}

.quote-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.quote-chip {
  display: inline-flex; align-items: center; gap: 4px; margin: 0;
  padding: 4px 4px 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--gold-pale); color: var(--navy); border: 1px solid var(--gold-light);
}
.quote-chip button {
  border: none; background: transparent; color: var(--navy); width: 24px; height: 24px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.quote-chip button:hover { background: rgba(10, 38, 71, .1); }
.quote-modal-nota { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 6px; align-items: flex-start; margin-bottom: 14px; }

.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: 12px;
  background: var(--gray-bg); text-align: center; cursor: pointer; font-size: 13.5px; 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: 26px; color: #d0342c; }
.quote-drop strong { color: var(--navy); }
.quote-drop small { color: var(--text-muted); font-size: 12px; }
.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: 8px; font-size: 13px;
}
.quote-files li .bi-file-earmark-pdf { color: #d0342c; font-size: 16px; }
.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: 6px; }
.quote-files button:hover { background: #fdecec; color: #b42318; }
#cotizacionModal .invalid-msg { color: #dc3545; font-size: 12.5px; margin-top: .3rem; font-weight: 500; }
#cotizacionModal .invalid-msg:empty { display: none; }
.quote-exito { text-align: center; padding: 2rem 1.5rem; }
.quote-exito .bi { font-size: 3rem; color: #12b76a; display: block; margin-bottom: .5rem; }

/* ─── Portada sin cuenta: buscador grande (_hero_buscador.html) ───
   Mismo lenguaje que la barra (azul navy en degradado). El fondo es propio
   (degradado + siluetas de cerros en SVG): la foto del diseño de referencia
   era de un medio y no se puede usar sin licencia. Para cambiarla por una
   foto propia basta con sumar la imagen como última capa de `background`. */
.hero-directorio {
  /* Sin overflow: hidden: el desplegable del autocompletado tiene que poder
     salir por debajo del bloque. */
  position: relative; z-index: 5; color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 170 L140 110 L260 150 L420 70 L560 140 L700 95 L860 160 L1010 80 L1160 140 L1300 100 L1440 150 L1440 220 L0 220Z' fill='%23ffffff' fill-opacity='.05'/%3E%3Cpath d='M0 200 L180 150 L330 185 L500 125 L650 180 L820 140 L980 190 L1150 130 L1300 175 L1440 150 L1440 220 L0 220Z' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E") bottom / 100% 55% no-repeat,
    radial-gradient(900px 380px at 15% -10%, rgba(133, 170, 214, .28), transparent 70%),
    radial-gradient(700px 320px at 95% 110%, rgba(26, 74, 156, .55), transparent 70%),
    linear-gradient(135deg, #0D3575 0%, #0A2647 55%, #061428 100%);
}
.hero-directorio-inner { position: relative; padding: 2.2rem 1rem 3.2rem; text-align: center; }
.hero-directorio-title {
  font-family: var(--font-sans); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 .5rem; color: #fff;
}
.hero-directorio-sub { font-size: .9rem; color: #dbe6f5; margin: 0 auto 1.6rem; max-width: 760px; }

.hero-search {
  /* Píldora con el botón adentro, como el resto de los buscadores del sitio. */
  display: flex; align-items: center; gap: 6px; max-width: 900px; margin: 0 auto 1.5rem;
  padding: 6px; border-radius: 999px; background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  transition: box-shadow .18s;
}
.hero-search:focus-within { box-shadow: 0 0 0 4px rgba(133, 170, 214, .45), 0 14px 34px rgba(0, 0, 0, .28); }
.hero-search-field { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.hero-search-field > .icon {
  position: absolute; left: 20px; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
.hero-search-input {
  width: 100%; height: 50px; padding: 0 1rem 0 50px; border: none; outline: none;
  border-radius: 999px; font-size: 1rem; color: var(--text-title); background: transparent;
}
.hero-search-input::placeholder { color: #94a3b8; }
.hero-search-btn {
  display: inline-flex; align-items: center; gap: .5rem; height: 50px; padding: 0 1.9rem; border: none;
  border-radius: 999px; background: var(--grad-navy); color: #fff; flex-shrink: 0;
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: filter .15s;
}
.hero-search-btn:hover { filter: brightness(1.12); }
.hero-search-btn .icon { width: 18px; height: 18px; }
/* 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: .85rem; color: #9fb3cf; margin: 0 0 .8rem; }
.hero-populares-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 1000px; margin: 0 auto; }
.hero-popular {
  display: inline-flex; align-items: center; gap: .45rem; max-width: 320px;
  padding: .45rem .95rem; border-radius: 999px; font-size: .82rem; text-decoration: none;
  color: #e2e8f0; background: rgba(6, 20, 40, .55); border: 1px solid rgba(255, 255, 255, .12);
  transition: background .15s, border-color .15s;
}
.hero-popular span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-popular .icon { width: 12px; height: 12px; color: #9fb3cf; flex-shrink: 0; }
.hero-popular:hover { background: rgba(26, 74, 156, .6); border-color: rgba(255, 255, 255, .3); color: #fff; }

@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 { padding: 5px; }
  .hero-search-input { height: 46px; padding-left: 44px; font-size: .95rem; }
  .hero-search-field > .icon { left: 16px; }
  .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: 16px;
  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: 999px;
}
#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: 11px; 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: 14px; 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: 13.5px; }
#searchSuggestions .suggest-item-spelling { border-bottom: 1px solid var(--gray-bg); color: var(--text-body); }

/* ── 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);
  --nav-h: 72px;
}
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: 1.5rem;
  transition: background-color .15s ease;
}
.sb-toggle:hover,
.sb-toggle:focus-visible { background: rgba(255,255,255,.12); outline: none; }

.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;
  scrollbar-width: thin;
}
.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-group { margin-top: 6px; padding-top: 6px; 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: 21px;
  background: transparent;
  color: var(--text-title);
  font-size: 14px;
  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: 1.15rem; text-align: center; 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: 10px;
  background: var(--navy-mid);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.sb-badge-danger { background: #d92d20; }
.sb-caret { font-size: .75rem; color: var(--text-muted); transition: transform .2s ease, opacity .16s ease .04s; }
.sb-group-toggle[aria-expanded="true"] .sb-caret { transform: rotate(180deg); }
.sb-sub .sb-link { min-height: 36px; font-size: 13.5px; }
.sb-sub .sb-link > .bi:first-child { font-size: 1rem; }

/* 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: 16px;
  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: 16px; font-weight: 700; }
.sb-pop-sub { margin: 2px 0 0; color: var(--text-muted); font-size: 12.5px; }
.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: 12px;
  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); outline: none; }
.sb-pop-ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--gold-pale);
  color: var(--navy-light);
  font-size: 1.05rem;
}
.sb-pop-ico-buyer { background: #ECFDF3; color: #067647; }
.sb-pop-ico-reclamacion { background: #FEF3F2; color: #B42318; }
.sb-pop-ico-attachment,
.sb-pop-ico-certification { background: #FFFAEB; color: #B54708; }
.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: 14px; font-weight: 600; }
.sb-pop-body small { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.sb-pop-arrow { flex: 0 0 auto; color: #c0c7d2; font-size: .8rem; }
.sb-pop-empty { padding: 28px 20px; text-align: center; color: var(--text-muted); }
.sb-pop-empty .sb-pop-ico { margin: 0 auto 10px; background: #ECFDF3; color: #067647; }
.sb-pop-empty p { margin: 0; font-size: 14px; }
.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: 13.5px; 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,
  html.sb-collapsed .minder-sidebar .sb-caret { 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: 10px; 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,
  html:not(.sb-open) .minder-sidebar .sb-caret { 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: 10px; 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: 10px;
    background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 1.35rem; }
}
@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; }
}

/* ── Convocatorias (templates/suppliers/convocatorias/) ── */
.conv-page { padding-top: 26px; padding-bottom: 48px; max-width: 900px; }
.conv-page-narrow { max-width: 820px; }
.conv-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.conv-page-title { margin: 0 0 4px; color: var(--text-heading); font-size: 1.75rem; font-weight: 700; }
.conv-page-sub { margin: 0; color: var(--text-paragraph); font-size: 14.5px; max-width: 560px; }
.conv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 600; }
.conv-btn-lg { padding: 12px 28px; font-size: 15px; }
.conv-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--text-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.conv-back:hover { color: var(--navy); }

.conv-list { display: flex; flex-direction: column; gap: 14px; }
.conv-card,
.conv-panel {
  display: block;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.conv-panel + .conv-panel { margin-top: 16px; }
.conv-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.conv-card:hover { border-color: var(--gold); box-shadow: 0 10px 28px rgba(10, 38, 71, .09); color: inherit; transform: translateY(-1px); }
.conv-card.is-closed { background: #fbfcfd; }
.conv-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.conv-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; background: var(--grad-navy); color: #fff; font-weight: 800; font-size: 1.05rem;
}
.conv-author { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: var(--text-title); font-size: 14px; font-weight: 700; line-height: 1.3; }
.conv-author small { color: var(--text-muted); font-size: 12.5px; font-weight: 500; }
.conv-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px; background: #F2F4F7; color: #475467; font-size: 12px; font-weight: 700;
}
.conv-chip.is-open { background: #ECFDF3; color: #067647; }
.conv-chip.is-done { background: var(--gold-pale); color: var(--navy-light); }
.conv-card-title { margin: 0 0 6px; color: var(--text-heading); font-size: 1.12rem; font-weight: 800; }
.conv-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.conv-facts span { display: inline-flex; align-items: center; gap: 6px; }
.conv-facts .is-past { color: #B42318; }
.conv-title + .conv-facts { margin-bottom: 14px; }
.conv-card-text { margin: 0; color: var(--text-body); font-size: 14px; line-height: 1.55; }
.conv-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F2F4F7; }
.conv-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.conv-card-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); font-size: 13.5px; font-weight: 700; }

.conv-title { margin: 4px 0 10px; color: var(--text-heading); font-size: 1.5rem; font-weight: 800; }
.conv-text { color: var(--text-body); font-size: 14.5px; line-height: 1.65; }
.conv-text p:last-child { margin-bottom: 0; }
.conv-media { margin-top: 16px; overflow: hidden; border-radius: 12px; background: var(--gray-bg); }
.conv-media img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.conv-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.conv-contact a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--card-border); border-radius: 999px; background: #fff;
  color: var(--navy); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.conv-contact a:hover { border-color: var(--gold); background: var(--gold-pale); }
.conv-contact a.is-whatsapp { border-color: #b7ebc6; color: #067647; }
.conv-contact a.is-whatsapp:hover { background: #ECFDF3; border-color: #25D366; }
.conv-contact-sm a { padding: 5px 12px; font-size: 13px; }
.conv-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #F2F4F7; }
.conv-owner-actions form { margin: 0; }
.conv-owner-actions .btn-light { background: var(--gray-bg); border-color: var(--card-border); color: var(--text-title); }

.conv-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.conv-section-head small { color: var(--text-muted); font-size: 12.5px; }
.conv-section-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-heading); font-size: 1.1rem; font-weight: 800; }
.conv-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--gold-pale); color: var(--navy-light); font-size: 12.5px; }
.conv-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.conv-cta p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.conv-closed-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: 14px; }

.conv-form { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 12px; }
.conv-form-part { margin-top: 18px; padding-top: 18px; border-top: 1px solid #F2F4F7; }
.conv-field { flex: 1 1 100%; margin-bottom: 14px; }
.conv-field.is-half { flex: 1 1 calc(50% - 8px); min-width: 220px; }
.conv-field .form-label { color: var(--text-title); font-size: 13.5px; font-weight: 600; }
.conv-form-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; }

.conv-files { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.conv-files li { display: flex; align-items: center; gap: 6px; }
.conv-files li > a {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--card-border); border-radius: 10px;
  color: var(--text-title); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.conv-files li > a:hover { border-color: var(--gold); background: var(--gold-pale); }
.conv-files li > a .bi { color: var(--navy-light); font-size: 1.05rem; }
.conv-files small { margin-left: auto; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.conv-files form { margin: 0; }
.conv-docs { margin: 16px 0 0; }
.conv-file-del { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); }
.conv-file-del:hover { background: #FEF3F2; color: #B42318; }

.conv-part { padding: 16px 0; border-top: 1px solid #F2F4F7; }
.conv-part:first-of-type { border-top: 0; padding-top: 4px; }
.conv-part-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.conv-part-head small { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.conv-part-name { color: var(--navy); font-size: 15px; font-weight: 800; text-decoration: none; }
.conv-part-name .bi { font-size: .75rem; opacity: .6; }
.conv-part-name:hover { color: var(--gold-dark); }

.conv-empty { padding: 40px 20px; text-align: center; background: #fff; border: 1px dashed var(--card-border); border-radius: 16px; color: var(--text-muted); }
.conv-empty-sm { padding: 24px 16px; border: 0; }
.conv-empty p { margin: 0 0 14px; }
.conv-empty-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 14px; background: var(--gold-pale); color: var(--navy-light); font-size: 1.3rem; }

@media (max-width: 576px) {
  .conv-page { padding-top: 16px; }
  .conv-card, .conv-panel { padding: 16px; border-radius: 14px; }
  .conv-page-head .conv-btn, .conv-cta .conv-btn { width: 100%; }
  .conv-title { font-size: 1.3rem; }
  .conv-form-actions .conv-btn { width: 100%; }
}

/* ── Convocatorias para visitantes sin sesión (portada y /convocatorias/) ── */
.convp-band { background: var(--grad-navy); color: #fff; padding: 30px 0 34px; margin-top: 8px; position: relative; overflow: hidden; }
.convp-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 260px at 100% 0%, rgba(133, 170, 214, .35), transparent 70%);
}
.convp-band .container { position: relative; }
.convp-band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.convp-band-title { margin: 8px 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.4px; color: #fff; }
.convp-band-sub { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14px; max-width: 560px; }
.convp-band-all { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.convp-band-all:hover { background: var(--gold-pale); color: var(--navy); }
.convp-live { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.convp-live.is-claro { background: #ECFDF3; color: #067647; margin-bottom: 8px; }
.convp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #32D583; box-shadow: 0 0 0 0 rgba(50, 213, 131, .7); animation: convp-pulso 1.8s ease-out infinite; }
@keyframes convp-pulso { 70% { box-shadow: 0 0 0 8px rgba(50, 213, 131, 0); } 100% { box-shadow: 0 0 0 0 rgba(50, 213, 131, 0); } }
@media (prefers-reduced-motion: reduce) { .convp-live-dot { animation: none; } }
.convp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.convp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.convp-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; min-width: 0;
  background: #fff; border: 1px solid var(--card-border); border-radius: 14px;
  color: var(--text-title); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.convp-card:hover { color: var(--text-title); border-color: var(--gold); box-shadow: 0 12px 28px rgba(10, 38, 71, .16); transform: translateY(-2px); }
.convp-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.convp-avatar { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--grad-navy); color: #fff; font-weight: 800; font-size: .9rem; }
.convp-author-name { font-size: 13px; font-weight: 700; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convp-title { font-size: 16px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.convp-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.convp-facts span { display: inline-flex; align-items: center; gap: 5px; }
.convp-facts .is-urgente { color: #B54708; }
.convp-cta { margin-top: auto; padding-top: 10px; border-top: 1px solid #F2F4F7; display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); font-size: 13.5px; font-weight: 700; }
.convp-card.is-grande { padding: 24px; margin-bottom: 16px; }
.convp-card.is-grande .convp-title { font-size: 1.5rem; -webkit-line-clamp: unset; }
.convp-card.is-grande .convp-facts { font-size: 13.5px; }
.convp-list-title { margin: 28px 0 12px; font-size: 1.1rem; font-weight: 800; color: var(--text-heading); }
@media (max-width: 991.98px) {
  .convp-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .convp-band { padding: 24px 0 26px; }
  .convp-band-head { flex-direction: column; align-items: flex-start; }
  .convp-band-title { font-size: 20px; }
  /* En celular, fila que se desliza con el dedo, asomando la siguiente. */
  .convp-row {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) 4px;
    scroll-padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  }
  .convp-row::-webkit-scrollbar { display: none; }
  .convp-row .convp-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ── Seguimiento de correos de cotización (Mis cotizaciones y panel) ── */
.segui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.segui-kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
}
.segui-kpi-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.segui-kpi-val { font-size: 26px; font-weight: 800; color: var(--text-title); line-height: 1.15; }
.segui-kpi-sub { font-size: 12.5px; color: var(--text-muted); }
.segui-kpi.is-abierto .segui-kpi-lbl .bi { color: var(--navy-light); }
.segui-kpi.is-clic .segui-kpi-lbl .bi, .segui-kpi.is-clic .segui-kpi-val { color: #067647; }
.segui-kpi.is-rebote .segui-kpi-lbl .bi { color: #B42318; }
.segui-nota { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--text-muted); margin: 0 0 20px; }
.segui-sol { background: #fff; border: 1px solid var(--card-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.segui-sol-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.segui-sol-fecha { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.segui-sol-msg { font-size: 14px; color: var(--text-body); margin-top: 2px; }
.segui-sol-adj { flex-shrink: 0; font-size: 13px; color: var(--text-muted); }
.segui-envios { list-style: none; margin: 0; padding: 0; border-top: 1px solid #F2F4F7; }
.segui-envios li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 9px 0; border-bottom: 1px solid #F2F4F7; }
.segui-envios li:last-child { border-bottom: 0; }
.segui-prov { font-weight: 700; font-size: 14px; color: var(--text-title); }
.segui-estado { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.segui-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; background: #f2f5f8; color: #4a5568; white-space: nowrap; }
.segui-chip .bi { font-size: 12px; }
.segui-chip.is-clic { background: #ECFDF3; color: #067647; }
.segui-chip.is-abierto { background: var(--gold-pale); color: var(--navy-light); }
.segui-chip.is-rebotado { background: #FEF3F2; color: #B42318; }
.segui-chip.is-no_enviado { background: #FFFAEB; color: #B54708; }
.segui-when { font-size: 12px; color: #8896a8; }
.segui-historial { margin-top: 8px; font-size: 12.5px; }
.segui-historial summary { cursor: pointer; color: var(--gold-dark); font-weight: 600; }
.segui-historial ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 4px; }
.segui-historial li { padding: 2px 0; }
.segui-historial li.is-robot { opacity: .6; }
@media (max-width: 767.98px) {
  .segui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segui-kpi-val { font-size: 22px; }
  .segui-estado { justify-content: flex-start; }
}

/* ── Cotizaciones del comprador: Cotizar (templates/suppliers/quote_list.html)
   y Mis solicitudes (templates/suppliers/mis_cotizaciones.html; el staff ve la
   misma página por empresa desde el panel).
   Mismo lenguaje que la ficha del proveedor (profile.css): cajas blancas con
   borde fino y radio de 10px, títulos de sección en versalitas, botones de
   40px y una sola familia (Alibaba Sans) en tres pesos: 400, 500 y 700. Sin
   degradados, sin pesos 800/900 y sin glifos que la fuente no tenga (las
   flechas de ordenar son SVG). Las piezas comunes a las dos páginas llevan
   prefijo co-; lo propio de cada una, qz- (Cotizar) y cz- (Mis solicitudes).
   Colores de estado validados con el validador de dataviz: clic verde,
   abierto azul, sin correo ámbar, rebote rojo; "sin abrir" es el fondo vacío
   de la barra. Siempre con su nombre al lado: nunca el color solo. El embudo
   usa una rampa ordinal de un solo azul. ── */
.qz, .cz {
  --co-ink: #0f1720; --co-soft: #4a5568; --co-mute: #8896a8;
  --co-line: #e8ecf1; --co-line-soft: #f2f5f8; --co-bg-soft: #f8fafb;
  --co-accent: #1e2f8f; --co-accent-hover: #16246e;
  --co-blue: #1e5fa8; --co-blue-soft: #eef4fc;
  --co-green: #0d9f6e; --co-red: #b42318; --co-red-soft: #fdf0ee; --co-amber: #b54708;
  --co-radius: 10px;
  --cz-clic: #079455; --cz-abierto: #2a78d6; --cz-no_enviado: #eda100; --cz-rebotado: #e34948; --cz-vacio: #eef1f5;
  --cz-f1: #86b6ef; --cz-f2: #3987e5; --cz-f3: #256abf; --cz-f4: #104281;
  max-width: 1180px; color: var(--co-ink); font-size: 14px; line-height: 1.5;
}

/* Cabecera de página: título, bajada y acciones a la derecha. */
.co-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.co-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--text-heading); }
.co-sub { margin: 0; max-width: 640px; font-size: 13.5px; color: var(--co-soft); }
.co-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Botones: los mismos de la ficha (.pp-btn). */
.co-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.co-btn .bi { font-size: 15px; line-height: 1; }
.co-btn-primary { background: var(--co-accent); border-color: var(--co-accent); color: #fff; }
.co-btn-primary:hover { background: var(--co-accent-hover); border-color: var(--co-accent-hover); color: #fff; }
.co-btn-outline { background: #fff; border-color: var(--co-line); color: var(--co-ink); }
.co-btn-outline:hover { border-color: var(--co-mute); color: var(--co-ink); }
.co-btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.co-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--co-blue); text-decoration: none; cursor: pointer; }
.co-link:hover { color: var(--co-blue); text-decoration: underline; }
.co-link .bi { font-size: 13px; }

/* Cajas y títulos de sección: los mismos de la ficha (.pp-box). */
.co-card { background: #fff; border: 1px solid var(--co-line); border-radius: var(--co-radius); padding: 20px 24px; }
.co-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.co-card-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text-heading); }
.co-card-head h2 .bi { font-size: 14px; color: var(--co-soft); }
.co-card-note { font-size: 12.5px; color: var(--co-mute); }
.co-note { display: flex; gap: 6px; margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--co-mute); }
.co-note .bi { flex-shrink: 0; margin-top: 2px; }
/* Selector tipo pestañas (período, vistas): el mismo toggle Fotos/Video de la ficha. */
.co-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: #f3f4f6; }
.co-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #6b7280; text-decoration: none; transition: color .15s, background .15s; }
.co-seg a:hover { color: var(--co-ink); }
.co-seg a.is-active { background: #fff; color: var(--co-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); }
/* Vacíos: el grande (página sin nada) y el chico (una caja sin datos). */
.co-empty { text-align: center; padding: 40px 24px; }
.co-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--co-blue-soft); color: var(--co-blue); font-size: 20px; }
.co-empty h2 { margin: 12px 0 6px; font-size: 17px; font-weight: 700; color: var(--text-heading); }
.co-empty p { max-width: 460px; margin: 0 auto 16px; font-size: 13.5px; color: var(--co-soft); }
.co-empty-mini { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--co-line-soft); border-radius: 8px; background: var(--co-bg-soft); font-size: 13px; color: var(--co-soft); }
.co-empty-mini .bi { font-size: 18px; color: var(--co-blue); }
.co-empty-mini p { margin: 0; }

/* ── Cotizar: la solicitud en curso ── */
/* Aquí la burbuja "Haz tu cotización" sobra (ya estás en la cotización) y
   tapaba la vista previa. */
body:has(.qz) .quote-fab { display: none !important; }
.qz-grid { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
/* Pasos: círculo numerado; el actual en azul, el hecho en verde con check. */
.qz-steps { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 14px 0 0; padding: 0; }
.qz-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--co-mute); }
.qz-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--co-line); border-radius: 50%; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--co-mute); }
.qz-steps li span .bi { font-size: 12px; }
.qz-steps li.is-now { color: var(--co-ink); font-weight: 700; }
.qz-steps li.is-now span { background: var(--co-accent); border-color: var(--co-accent); color: #fff; }
.qz-steps li.is-done { color: var(--co-soft); }
.qz-steps li.is-done span { background: var(--co-green); border-color: var(--co-green); color: #fff; }
.qz-cupo { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--co-mute); }
.qz-cupo strong { font-weight: 700; color: var(--co-ink); }
.qz-cupo-bar { display: inline-flex; gap: 3px; }
.qz-cupo-bar span { width: 16px; height: 5px; border-radius: 3px; background: var(--co-line); }
.qz-cupo-bar span.is-on { background: var(--co-blue); }
.qz-dest { list-style: none; margin: 0; padding: 0; }
.qz-dest li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--co-line-soft); }
.qz-dest li:first-child { border-top: 0; padding-top: 0; }
.qz-dest-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--co-line); border-radius: 8px; background: #fff; overflow: hidden; font-size: 13px; font-weight: 700; color: var(--co-blue); }
.qz-dest-logo img { width: 100%; height: 100%; object-fit: contain; }
.qz-dest-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qz-dest-name { font-size: 14px; font-weight: 700; color: var(--co-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-dest-name:hover { color: var(--co-blue); }
.qz-dest-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--co-mute); }
.qz-dest-to { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--co-amber); }
.qz-dest-contactos { margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.qz-dest-contactos legend { float: none; width: auto; margin: 0 0 4px; padding: 0; font-size: 12.5px; font-weight: 500; color: var(--co-mute); }
.qz-contacto { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 13px; color: var(--co-mute); cursor: pointer; }
.qz-contacto strong { font-weight: 500; color: var(--co-ink); }
.qz-contacto input { width: 15px; height: 15px; margin: 0; accent-color: var(--co-accent); }
.qz-contacto:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.qz-dest-quitar { margin: 0; }
.qz-dest-quitar button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--co-mute); transition: background .15s, color .15s; }
.qz-dest-quitar button:hover { background: var(--co-red-soft); color: var(--co-red); }
.qz-add { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; padding: 11px; border: 1px dashed var(--co-line); border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--co-blue); text-decoration: none; transition: background .15s, border-color .15s; }
.qz-add:hover { border-color: var(--co-blue); background: var(--co-blue-soft); color: var(--co-blue); }
/* Formulario del requerimiento. */
.qz-field { margin-bottom: 16px; }
.qz-field > label:not(.quote-drop) { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--co-ink); }
.qz-field .form-control { font-size: 14px; border-color: var(--co-line); border-radius: 8px; }
.qz-field .form-control:focus { border-color: var(--co-blue); box-shadow: 0 0 0 3px var(--co-blue-soft); }
.qz-field textarea.form-control { min-height: 150px; }
.qz-help { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 12.5px; color: var(--co-mute); }
.qz-count { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.qz-error { margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--co-red); }
.qz-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
/* Zona de PDF: la misma del pop-up (.quote-drop), con el borde fino de estas páginas. */
.qz .quote-drop { padding: 16px 14px; border: 1px dashed var(--co-line); border-radius: 8px; background: var(--co-bg-soft); font-size: 13px; color: var(--co-soft); }
.qz .quote-drop .bi { font-size: 22px; color: var(--co-soft); }
.qz .quote-drop strong { font-weight: 700; color: var(--co-blue); }
.qz .quote-drop small { font-size: 12px; color: var(--co-mute); }
.qz .quote-drop:hover, .qz .quote-drop.is-encima { border-color: var(--co-blue); background: var(--co-blue-soft); }
.qz .quote-files li { border-color: var(--co-line); }
.qz .form-check-label { font-size: 12.5px; color: var(--co-soft); }
.qz .form-check-input:checked { background-color: var(--co-accent); border-color: var(--co-accent); }
.qz .form-check-input:focus { border-color: var(--co-blue); box-shadow: 0 0 0 3px var(--co-blue-soft); }
.qz-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--co-line-soft); }
.qz-empty { max-width: 640px; margin: 8px auto; }
.qz-empty-pasos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.qz-empty-pasos li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--co-line); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--co-soft); }
.qz-empty-pasos .bi { color: var(--co-blue); }

/* ── Mis solicitudes: seguimiento ── */
.cz-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.cz-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cz-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--co-line); border-radius: var(--co-radius); }
.cz-kpi-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--co-mute); }
.cz-kpi-val { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--co-ink); font-variant-numeric: tabular-nums; }
.cz-kpi-val small { margin-left: 1px; font-size: 14px; font-weight: 500; color: var(--co-mute); }
.cz-kpi-sub { font-size: 12.5px; color: var(--co-mute); }
.cz-kpi.is-hero .cz-kpi-lbl, .cz-kpi.is-hero .cz-kpi-val { color: var(--cz-clic); }
.cz-kpi.is-alerta .cz-kpi-val { color: var(--co-red); }

.cz-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.cz-funnel { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.cz-funnel-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 78px; align-items: center; gap: 12px; }
.cz-funnel-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--co-ink); }
.cz-funnel-lbl .bi { color: var(--co-mute); }
.cz-funnel-track { height: 18px; border-radius: 4px; background: var(--cz-vacio); overflow: hidden; }
.cz-funnel-bar { display: block; height: 100%; min-width: 2px; border-radius: 4px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.cz-funnel-bar.is-paso1 { background: var(--cz-f1); }
.cz-funnel-bar.is-paso2 { background: var(--cz-f2); }
.cz-funnel-bar.is-paso3 { background: var(--cz-f3); }
.cz-funnel-bar.is-paso4 { background: var(--cz-f4); }
.cz-funnel-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font-variant-numeric: tabular-nums; }
.cz-funnel-val strong { font-size: 14px; font-weight: 700; color: var(--co-ink); }
.cz-funnel-val span { font-size: 12.5px; color: var(--co-mute); }
.cz-rank { list-style: none; margin: 0; padding: 0; }
.cz-rank li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--co-line-soft); }
.cz-rank li:first-child { border-top: 0; padding-top: 0; }
.cz-rank-pos { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--co-blue-soft); font-size: 12px; font-weight: 700; color: var(--co-blue); }
.cz-rank li:first-child .cz-rank-pos { background: var(--co-accent); color: #fff; }
.cz-rank-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cz-rank-name { font-size: 13.5px; font-weight: 700; color: var(--co-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-rank-name:hover { color: var(--co-blue); }
.cz-rank-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; color: var(--co-mute); }
.cz-meter { display: block; height: 4px; border-radius: 4px; background: var(--cz-vacio); overflow: hidden; }
.cz-meter span { display: block; height: 100%; border-radius: 4px; background: var(--cz-f2); }
.cz-rank-pct { font-size: 14px; font-weight: 700; color: var(--co-ink); font-variant-numeric: tabular-nums; }
.cz-dot { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 3px; }
.cz-dot.is-clic { background: var(--cz-clic); }
.cz-dot.is-abierto { background: var(--cz-abierto); }
.cz-dot.is-no_enviado { background: var(--cz-no_enviado); }
.cz-dot.is-rebotado { background: var(--cz-rebotado); }
.cz-dot.is-vacio { background: var(--cz-vacio); box-shadow: inset 0 0 0 1px #d5dce6; }
.cz-txt-clic { color: var(--cz-clic); }

/* Una solicitud: encabezado en versalitas (número, fecha, proveedores), el
   mensaje, la barra de estados con su leyenda y un envío por línea. */
.cz-sol { margin-bottom: 12px; }
.cz-sol-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--co-mute); }
.cz-sol-top a { color: var(--co-blue); text-decoration: none; }
.cz-sol-top a:hover { text-decoration: underline; }
.cz-sol-top .bi { margin-right: 3px; }
.cz-sol-msg { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--co-ink); }
.cz-stack { display: flex; gap: 2px; height: 8px; border-radius: 4px; background: var(--cz-vacio); overflow: hidden; }
.cz-stack-seg { display: block; height: 100%; }
.cz-stack-seg.is-clic { background: var(--cz-clic); }
.cz-stack-seg.is-abierto { background: var(--cz-abierto); }
.cz-stack-seg.is-no_enviado { background: var(--cz-no_enviado); }
.cz-stack-seg.is-rebotado { background: var(--cz-rebotado); }
.cz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 6px; font-size: 12.5px; color: var(--co-mute); }
.cz-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cz-legend strong { font-weight: 700; color: var(--co-ink); }
.cz-envios { list-style: none; margin: 0; padding: 0; }
.cz-envios li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--co-line-soft); }
.cz-prov { font-size: 13.5px; font-weight: 700; color: var(--co-ink); text-decoration: none; }
.cz-prov:hover { color: var(--co-blue); }
.cz-prov-contacto { font-size: 12.5px; color: var(--co-mute); }
.cz-envio-estado { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
/* "Ver estadísticas por proveedor": la tabla de cada solicitud, plegada. */
.cz-sol-stats { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--co-line-soft); }
.cz-sol-stats > summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--co-blue); cursor: pointer; list-style: none; user-select: none; }
.cz-sol-stats > summary::-webkit-details-marker { display: none; }
.cz-sol-stats > summary:hover { text-decoration: underline; }
.cz-sol-stats > summary:focus-visible { outline: 2px solid var(--co-blue); outline-offset: 3px; border-radius: 4px; }
.cz-sol-stats-chev { font-size: 12px; transition: transform .15s; }
.cz-sol-stats[open] .cz-sol-stats-chev { transform: rotate(180deg); }
.cz-sol-stats .cz-sol-stats-cerrar, .cz-sol-stats[open] .cz-sol-stats-abrir { display: none; }
.cz-sol-stats[open] .cz-sol-stats-cerrar { display: inline; }
.cz-sol-stats .cz-table-wrap { margin-top: 12px; border: 1px solid var(--co-line); border-radius: 8px; }
.cz-sol-stats .cz-table th, .cz-sol-stats .cz-table td { padding-left: 12px; padding-right: 12px; }
.cz-sol-stats .co-note { margin-top: 10px; }
.cz-resp { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.cz-resp.is-si { color: var(--cz-clic); }
.cz-resp.is-no { font-weight: 500; color: var(--co-mute); }
/* Staff: proveedores que no respondieron, con sus datos para llamarlos. */
.cz-sinresp { margin-bottom: 16px; }
.cz-wa { margin-left: 8px; color: #1a9e4b; }
.cz-wa:hover { color: #067647; }

/* Tablas (informe, sin respuesta, estadísticas por proveedor). */
.cz-table-card { padding: 0; overflow: hidden; }
.cz-table-card > .co-card-head { padding: 18px 24px 0; }
.cz-table-card > .co-empty-mini { margin: 0 24px 20px; }
.cz-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--co-line); background: var(--co-bg-soft); }
.cz-filtros .form-select { width: auto; min-width: 190px; height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13px; border-color: var(--co-line); border-radius: 8px; }
.cz-search { display: flex; flex: 1 1 220px; align-items: center; gap: 8px; max-width: 320px; height: 34px; padding: 0 12px; border: 1px solid var(--co-line); border-radius: 8px; background: #fff; color: var(--co-mute); }
.cz-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--co-ink); }
.cz-filtros-total { margin-left: auto; font-size: 12.5px; color: var(--co-mute); }
.cz-table-wrap { overflow-x: auto; }
.cz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cz-table th { position: sticky; top: 0; z-index: 1; padding: 10px 14px; border-bottom: 1px solid var(--co-line); background: var(--co-bg-soft); font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; text-align: left; white-space: nowrap; color: var(--co-mute); cursor: pointer; user-select: none; }
/* Flecha de orden en SVG (Alibaba Sans no trae ↕ y caía a otra fuente). */
.cz-table th::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 5px; vertical-align: -1px; background: currentColor; opacity: .4; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 11.5 6h-7zM8 14.5 11.5 10h-7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 11.5 6h-7zM8 14.5 11.5 10h-7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cz-table th[aria-sort="ascending"]::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3l4.5 6h-9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3l4.5 6h-9z'/%3E%3C/svg%3E"); }
.cz-table th[aria-sort="descending"]::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13l4.5-6h-9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13l4.5-6h-9z'/%3E%3C/svg%3E"); }
.cz-table th.is-num { text-align: right; }
.cz-table td { padding: 11px 14px; border-bottom: 1px solid var(--co-line-soft); color: var(--co-ink); white-space: nowrap; vertical-align: middle; }
.cz-table tbody tr:last-child td { border-bottom: 0; }
.cz-table tbody tr:hover td { background: var(--co-bg-soft); }
.cz-table td a { color: var(--co-ink); }
.cz-table td a:hover { color: var(--co-blue); }
.cz-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.cz-cell-main { display: block; font-weight: 700; color: var(--co-ink); text-decoration: none; }
.cz-cell-sub { display: block; font-size: 12px; color: var(--co-mute); }

@media (max-width: 991.98px) {
  .cz-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cz-grid, .qz-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .co-title { font-size: 20px; }
  .co-card { padding: 16px; }
  .co-head-actions .co-btn { flex: 1 1 auto; }
  .co-seg { display: flex; overflow-x: auto; }
  .cz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-kpi.is-hero { grid-column: 1 / -1; }
  .cz-kpi-val { font-size: 22px; }
  .cz-funnel-row { grid-template-columns: 96px minmax(0, 1fr) 64px; gap: 8px; }
  .cz-envio-estado { justify-content: flex-start; }
  .cz-filtros-total { margin-left: 0; }
  .cz-table-card > .co-card-head { padding: 16px 16px 0; }
  .cz-table-card > .co-empty-mini { margin: 0 16px 16px; }
  .qz-row { grid-template-columns: minmax(0, 1fr); }
  .qz-dest li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .qz-dest-logo { width: 40px; height: 40px; }
  .qz-actions .co-btn { flex: 1 1 auto; }
}