/* Parte 3 de 5 de lo que era styles.css (dividida el 2026-11-06 sin cambiar
   el orden de las reglas): portada pública, filtros y tarjetas del directorio, panel (estilos anteriores al rediseño), paginación y vista de tabla.
   base.html carga las cinco en orden (styles.css, sitio-navegacion.css, sitio-directorio.css, sitio-componentes.css, sitio-convocatorias.css);
   ese orden importa: a igual especificidad gana la regla que viene después.
   Los tokens (--primary-*, --fs-*…) y los componentes base están en styles.css. */

/* ── 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: var(--radius-pill);
  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: var(--radius-md);
}
.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: var(--radius-lg);
  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: var(--radius-lg);
  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: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-heading);
  margin: 0 0 6px;
}
.directory-teaser-text {
  font-size: var(--fs-md);
  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: var(--fs-md); }
.teaser-login .auth-btn { margin-top: 2px; }
.teaser-login-links {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-sm); 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: var(--fs-sm); 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: var(--radius-lg);
  }
  .directory-teaser-title { font-size: var(--fs-lg); }
  .directory-teaser-text { font-size: var(--fs-sm); }
}

/* 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-text { font-size: var(--fs-base); color: var(--text-paragraph); margin: 0 0 18px; max-width: 520px; line-height: 1.6; }
.join-door-text { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.45; }

/* ── Filter Bar (directorio) ──
   Una sola fila de píldoras (ícono + rótulo + select); 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: var(--radius-md);
  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: var(--fs-xs); 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: var(--radius-pill);
  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: var(--focus-ring); }
.filter-field > .icon { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.filter-field-label { font-size: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-sm); 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: var(--focus-ring); }
.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: var(--radius-lg);
  box-shadow: var(--shadow-md);
  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: var(--radius-md); background: var(--gray-bg);
}
.filter-menu-search:focus-within { border-color: var(--navy-light); background: #fff; box-shadow: 0 0 0 3px rgba(11, 45, 99, .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: var(--fs-sm); 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: var(--radius-md); background: transparent;
  font-family: inherit; font-size: var(--fs-md); 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); }
.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: var(--fs-sm); 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; }
}

/* 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-bar-end { margin-left: auto; }
/* 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: var(--radius-md); font-size: var(--fs-sm); 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) {
  /* Con nowrap, las «Etiquetas para esta búsqueda» y los avisos (que
     también van en la barra) quedaban en el mismo renglón y la estiraban
     fuera de la pantalla (2026-10-08). Ahora sí se parte: el select (base
     0) y Limpiar siguen juntos, y cada aviso va en su renglón. */
  .filter-bar { flex-wrap: wrap; padding: 10px; gap: 8px; border-radius: var(--radius-lg); }
  .filter-bar .alert, .filter-bar .dir-etiquetas { flex: 0 0 100%; min-width: 0; }
  .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 0; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--radius-md); }
  .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-bar-end { display: none; }
  /* La misma condición, para las páginas sin barra de filtros (la de
     categoría, M-01 2026-11-02): su script lee esta variable en vez de
     repetir la media query. */
  .suppliers-grid { --solo-tarjetas: 1; }
}


/* ── Filter Sidebar ── */
.filter-item {
  display: flex;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  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: var(--success-bg);
  color: var(--success-fg);
  border: 1px solid var(--success-border);
  border-radius: var(--tag-radius);
  padding: 3px 10px;
  font-size: var(--tag-fs);
  font-weight: var(--tag-fw);
  white-space: nowrap;
}


/* Experience timeline */
.docs-label { font-size: var(--fs-xs); color: var(--text-body); display: block; margin-bottom: 4px; }
.doc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  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; }

/* ═══════════════════════════════════════════════════════════════════
   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: var(--fs-md); 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; }


.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; max-width: 100%; }
.profile-actions form { margin: 0; }


/* Grilla 2×2: una tarjeta por cuadrante */

.sub-label {
  font-size: var(--fs-xs); 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: var(--fs-md); padding: 3px 19px; border-radius: var(--radius-md);
  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. */

.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-year {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); background: #e2e8f0; color: var(--text-body);
  padding: 4px 12px; border-radius: var(--radius-sm); 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: var(--radius-md);
  font-size: var(--fs-sm); 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: var(--success-bg); color: var(--success-fg); }
.sunat-chip.is-warn { background: var(--warning-bg); color: var(--warning-fg); }
.sunat-chip.is-danger  { background: var(--danger-bg); color: var(--danger-fg); }
.sunat-chip.is-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
/* Información crediticia (Experian) en la ficha: tira de semáforos
   mensuales y tablas de deuda. */
:root { --exp-ok: #12B76A; --exp-warn: #F79009; --exp-danger: #F04438; --exp-neutral: #98A2B3; }
/* Semáforo actual: una luz grande con el color, el nombre y qué significa. */
.exp-sem {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #fff;
}
.exp-sem-luz { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--exp-neutral); box-shadow: inset 0 -3px 6px rgba(0,0,0,.15), 0 0 0 4px rgba(0,0,0,.05); }
.exp-sem.is-ok .exp-sem-luz      { background: var(--exp-ok); }
.exp-sem.is-warn .exp-sem-luz    { background: var(--exp-warn); }
.exp-sem.is-danger .exp-sem-luz  { background: var(--exp-danger); }
.exp-sem-nombre { font-size: var(--fs-lg); font-weight: 700; color: var(--text-title); line-height: 1.2; }
.exp-sem-desc { font-size: var(--fs-sm); color: var(--text-body); margin-top: 2px; }
.exp-sem-otros { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-sm); color: var(--text-body); }
.exp-sem-otros li { display: flex; align-items: center; gap: 6px; }
.exp-punto { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--exp-neutral); flex: none; }
.exp-punto.is-ok     { background: var(--exp-ok); }
.exp-punto.is-warn   { background: var(--exp-warn); }
.exp-punto.is-danger { background: var(--exp-danger); }
.exp-punto + .exp-punto { margin-left: -4px; }
/* Tira mes a mes: una barra por mes que ocupa todo el ancho. */
.exp-tira-titulo { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; margin: 16px 0 6px; }
.exp-tira { display: flex; gap: 2px; }
.exp-tira-mes { flex: 1; min-width: 6px; height: 26px; border-radius: 3px; background: var(--neutral-bg); }
.exp-tira-mes:first-child { border-radius: 6px 3px 3px 6px; }
.exp-tira-mes:last-child  { border-radius: 3px 6px 6px 3px; }
.exp-tira-mes.is-ok      { background: var(--exp-ok); }
.exp-tira-mes.is-warn    { background: var(--exp-warn); }
.exp-tira-mes.is-danger  { background: var(--exp-danger); }
.exp-tira-mes.is-neutral { background: var(--exp-neutral); }
.exp-tira-ejes { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.exp-leyenda { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; font-size: var(--fs-xs); color: var(--text-body); }
.exp-leyenda li { display: flex; align-items: flex-start; gap: 6px; line-height: 1.45; }
.exp-leyenda .exp-punto { margin-top: 3px; }
.exp-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); color: var(--text-body); }
.exp-tabla th { font-weight: 600; color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .02em; }
.exp-tabla th, .exp-tabla td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--card-border); vertical-align: top; text-align: left; }
.exp-tabla tr:last-child td { border-bottom: 0; }
.exp-tabla .exp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-tabla .exp-num-deuda { color: var(--danger-fg); font-weight: 600; }
.exp-historial summary { cursor: pointer; font-weight: 600; }
/* En la tarjeta el estado va al costado del RUC, en la misma línea (y
   baja a la siguiente si no entra). */
.card-ruc { flex-wrap: wrap; }
.card-sunat { font-size: var(--fs-xs); font-weight: 600; margin-left: 4px; white-space: nowrap; }
.card-sunat.is-ok   { color: var(--success-fg); }
.card-sunat.is-warn { color: var(--warning-fg); }
.card-sunat.is-ok .icon, .card-sunat.is-warn .icon { color: currentColor; }
.sunat-fuente { font-size: var(--fs-xs); color: var(--text-muted); margin: 14px 0 0; }

.certs-line { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-sm); 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: var(--fs-sm);
}
.cert .icon { color: var(--success-fg); 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". */

.contacts-copy-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: #fff;
  color: var(--text-title); font-size: var(--fs-sm); 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: var(--success-fg); color: var(--success-fg); background: var(--success-bg); }
.contact-list { display: flex; flex-direction: column; }
/* 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: var(--radius-pill); background: #fff;
  color: var(--text-body); font-size: var(--fs-xs); 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: var(--fs-xs); font-weight: 600; color: #C2410C;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: var(--radius-sm); 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: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--text-body); flex-shrink: 0;
}
.person-row .p-name { font-size: var(--fs-md); font-weight: 600; color: var(--text-title); line-height: 1.25; }

.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: var(--radius-sm);
  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: var(--fs-sm); line-height: 1.3; word-break: break-word;
}
.contact-line .v:hover { text-decoration: underline; }


.profile-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-sm); 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: var(--success-fg); }

/* 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. */


@media (max-width: 600px) {
  .docs-row { flex-direction: column; }
  .doc-btn { white-space: normal; }
  .person-row { flex-wrap: wrap; }
  .contact-line { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* ── 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;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
  color: inherit;
  text-decoration: none;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-destacados      { border-top-color: var(--star); }

.stat-icon { font-size: var(--fs-3xl); margin-bottom: .4rem; opacity: .65; }
.stat-value { font-size: var(--fs-5xl); font-weight: var(--fw-bold); color: var(--navy); line-height: 1; margin-bottom: .3rem; }
.stat-label { font-size: var(--fs-xs); 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;
  box-shadow: var(--shadow-sm);
}
.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;
}


/* ── Analíticas de Búsqueda ── */
.filter-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter-pill {
  padding: .3rem .75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--text-body);
  font-size: var(--fs-sm);
  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: var(--fs-xl); font-weight: 700; color: var(--navy); line-height: 1.3; }
.mini-stat-label { font-size: var(--fs-xs); 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: var(--fs-sm);
  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: var(--fs-sm);
  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: var(--fs-md); color: var(--text-title); }
.activity-event-text a { color: var(--navy); }
.activity-event-detail {
  font-size: var(--fs-xs);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-event-date {
  font-size: var(--fs-xs);
  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: var(--radius-md);
}
.results-count { font-size: var(--fs-md); 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: var(--btn-radius);
  background: #fff; border: 1px solid var(--card-border); color: var(--text-title);
  font-size: var(--fs-md); 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(--btn-primary-bg);
  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: var(--fs-md); font-weight: 600;
  text-align: center;
  border-radius: var(--btn-radius) !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: var(--focus-ring); }
.page-item.active .page-link {
  background: var(--btn-primary-bg);
  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: var(--radius-md);
  color: var(--text-title);
  transition: border-color .15s ease;
  overflow: hidden;
  font-size: var(--fs-md);
}
.supplier-card:hover { border-color: var(--text-muted); }
/* Verificado (Membresía Estándar vigente): sello con check (sin barra de
   color en el borde: se probó y no quedaba bien). Sin membresía: "Por
   confirmar" gris, chico, que no pese. */
.card-status {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-xl); line-height: 1.2;
}
.card-status .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.card-status.is-verified { background: #e8f8f2; color: var(--success-fg); }
.card-status.is-pending { background: transparent; color: var(--text-muted); border: 1px dashed var(--card-border); font-weight: 600; }

.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: var(--radius-md);
}
.supplier-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.supplier-card-initials {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--gray-bg); color: var(--text-body);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl); 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: var(--fs-2xl); font-weight: 600; 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: var(--fs-sm); 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: var(--fs-sm); 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; }
/* En cuadrícula los 4 botones no entran en tarjetas angostas: «Seleccionar» se cortaba. */
.suppliers-grid:not(.list-view) .supplier-card-footer { flex-wrap: wrap; }

.btn-card {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h-sm); padding: 0 10px; border-radius: var(--btn-radius); border: 1px solid transparent;
  font-size: var(--fs-xs); 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; }
/* Mensaje directo (antes "Llamar"): cuadrado de solo ícono; en la vista
   de lista lleva su texto. Abre el modal de consulta a esa sola empresa. */
.btn-card-msg { flex: 0 0 var(--btn-h-sm); padding: 0; background: #fff; border-color: var(--card-border); color: var(--text-title); }
.btn-card-msg:hover { border-color: var(--navy-light); color: var(--navy); }
.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; }
/* «Invitar» (2026-10-08, donde estaba «Seleccionar»): el mismo botón blanco, con su texto. */
.suppliers-grid .btn-card-invitar .btn-card-label { display: inline; }
.btn-card.btn-card-invitar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 1.5px solid #C3D3EC; color: var(--text-heading); font-weight: 700;
  box-shadow: 0 1px 2px rgba(1, 37, 110, .06), 0 2px 6px rgba(1, 37, 110, .06); cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s;
}
.btn-card.btn-card-invitar .bi { font-size: 1.05em; line-height: 1; }
.btn-card.btn-card-invitar:hover { background: #fff; border-color: var(--text-heading); color: var(--text-heading); box-shadow: 0 4px 12px rgba(1, 37, 110, .14); transform: translateY(-1px); }
.btn-card.btn-card-invitar:focus-visible { outline: 2px solid var(--text-heading); outline-offset: 2px; }
.pp-guardar-form { display: contents; }
/* «Tu participación»: quién la envió (2026-10-08). */
.conv-part-quien { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: var(--fs-md); color: var(--text-muted); }
.conv-part-quien strong { color: var(--text-title); }
/* 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; }

/* ── Modal de consulta ── */
.contact-modal { border: 0; border-radius: var(--radius-lg); }
.contact-modal .modal-header { border-bottom: 1px solid var(--card-border); padding: 1rem 1.25rem; }
.contact-modal .modal-title { font-size: var(--fs-lg); 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: var(--fs-sm);
  color: var(--text-muted);
  background: var(--gray-bg);
  border-radius: var(--radius-md);
  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: var(--radius-md); padding: 3px;
}
.view-switch-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-body);
  font-size: var(--fs-sm); 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; }
}

/* 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:767.98px) 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: var(--fs-base); }
.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-msg { width: 100%; }
.suppliers-grid.list-view .btn-card-label { display: inline; }
/* Las dos columnas de datos lado a lado necesitan ~1200px: de 992 a 1199
   (o con el menú lateral del comprador) «SUNAT: Activo / Habido» pisaba la
   segunda columna (M-05, 2026-11-02). Se apilan desde ahí; el logo y el pie
   recién se achican por debajo de 992. */
@media (max-width: 1199.98px) {
  .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; }
}
@media (max-width: 991px) {
  .suppliers-grid.list-view .supplier-card-logo { width: 150px; min-width: 150px; }
  /* Con el menú lateral del comprador (601-767px) la grilla queda en ~520px:
     el cuerpo de la tarjeta no cedía ancho («SUNAT: Activo / Habido» sin
     partir) y empujaba el pie fuera de la tarjeta (QA 2026-11-02). */
  .suppliers-grid.list-view .supplier-card-link { flex: 1 1 auto; min-width: 0; }
  .suppliers-grid.list-view .supplier-card-meta { min-width: 0; }
  .suppliers-grid.list-view .card-sunat { white-space: normal; }
  .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: var(--radius-md);
  /* 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: var(--fs-md);
  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: var(--fs-xs); 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: var(--radius-md);
  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: var(--radius-md);
  background: var(--gray-bg); color: var(--text-body); font-weight: 700; font-size: var(--fs-sm);
  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: var(--fs-md); 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: var(--fs-xs); font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-xl); background: #e8f8f2; color: var(--success-fg);
}
.table-verified .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.table-pending {
  display: inline-flex; align-items: center; margin-top: 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-xl); color: var(--text-muted); border: 1px dashed var(--card-border);
}

.table-desc-cell { min-width: 220px; max-width: 360px; }
.table-clients-cell { min-width: 170px; max-width: 280px; font-size: var(--fs-sm); }
.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-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: var(--fs-sm); }
  .suppliers-table thead th { padding: 12px 12px; font-size: var(--fs-xs); }
  .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: var(--fs-sm); }
}

/* 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. */
/* Hasta 767px (antes 600): entre 601 y 767 el contenedor mide 540px y la
   fila de logo, texto, datos y botones no entraba (QA 2026-11-02). */
@media (max-width: 767.98px) {
  /* La tarjeta pasa a columna: el cuerpo (logo + nombre + datos) arriba y
     el pie de botones debajo, a todo el ancho. Con la tarjeta en fila el
     pie quedaba al costado del nombre y se salía de la pantalla (M-01,
     2026-11-02). */
  .suppliers-grid.list-view .supplier-card { flex-direction: column; }
  .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: var(--fs-md); }
  .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: var(--tag-radius);
  padding: 2px 8px;
  font-size: var(--tag-fs);
  font-weight: 700;
}

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

.panel-table-header, .supplier-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
}
/* .supplier-card-name va aparte: 20px / 600 (ver .supplier-card-name arriba). */

/* ── 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: var(--fs-4xl); }
  .footer-main { padding: 2rem 0 1.5rem; }
  .footer-cols { gap: 1.35rem; }
  .footer-categories { padding: 1.15rem 0; }
}