/* ============================================================
   SERENZA · vendor-list.css
   Directorio de proveedores: tarjetas horizontales compactas,
   contenedor de vista previa de nota privada y spinner pequeño.
   ============================================================ */

/* ---------- Lista vertical de tarjetas horizontales ---------- */
.sz-vendor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Fila compacta (card horizontal) ---------- */
/* Sobreescribimos `overflow:hidden` de `.sz-card` para que los tooltips
   `sz-tip` de la fila meta (eventos, confirmados…) no se recorten al
   desbordar por arriba del borde superior de la tarjeta. Las vendor-row
   no contienen medios que necesiten el recorte de border-radius. */
.sz-vendor-row {
  overflow: visible;
}

.sz-vendor-row .sz-card__body.sz-vendor-row__body {
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.sz-vendor-row__main {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sz-vendor-row__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sz-vendor-row__name {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--forest);
  line-height: 1.2;
}

.sz-vendor-row__rating {
  font-size: .7rem;
  padding: 3px 8px;
  flex-shrink: 0;
}

.sz-vendor-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sz-vendor-row__tags .sz-badge {
  font-size: .7rem;
  padding: 3px 8px;
}

.sz-vendor-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.sz-vendor-row__meta-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32ch;
}

/* Cuando un meta-item es también tooltip, desactivamos el truncamiento
   para que el bubble (position:absolute) no se recorte. */
.sz-vendor-row__meta-item.sz-tip {
  overflow: visible;
  text-overflow: clip;
}

.sz-vendor-row__meta-sep {
  color: var(--ink-faint);
}

/* ---------- Tooltips inline en meta ---------- */
/* `sz-tip` (definido en serenza-ui.css) sólo se muestra en :hover;
   aquí añadimos el comportamiento para :focus (teclado) y refs. específicas. */
.sz-vendor-row__meta .sz-tip,
.sz-vendor-row__title .sz-tip {
  position: relative;
  outline-offset: 2px;
}

.sz-vendor-row__meta .sz-tip .sz-tip__bubble,
.sz-vendor-row__title .sz-tip .sz-tip__bubble {
  bottom: calc(100% + 6px);
  white-space: normal;
  min-width: 160px;
  max-width: 240px;
  text-align: left;
  transform: translateX(-50%) translateY(4px);
}

.sz-vendor-row__meta .sz-tip .sz-tip__bubble::after,
.sz-vendor-row__title .sz-tip .sz-tip__bubble::after {
  left: 50%;
}

.sz-vendor-row__meta .sz-tip:focus-visible .sz-tip__bubble,
.sz-vendor-row__meta .sz-tip:focus-within .sz-tip__bubble,
.sz-vendor-row__meta .sz-tip:hover .sz-tip__bubble,
.sz-vendor-row__title .sz-tip:focus-visible .sz-tip__bubble,
.sz-vendor-row__title .sz-tip:focus-within .sz-tip__bubble,
.sz-vendor-row__title .sz-tip:hover .sz-tip__bubble {
  opacity: 1;
  transform: translateX(-50%);
}

/* ---------- Acciones ---------- */
.sz-vendor-row__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.sz-vendor-row__delete {
  color: var(--status-urgent);
}

.sz-vendor-row__delete:hover {
  background: rgba(156, 75, 63, .12);
  color: var(--status-urgent);
}

/* ---------- Botón de nota privada: estado activo ---------- */
.sz-vendor-row__note-btn[aria-expanded="true"] {
  background: var(--paper-deep);
  color: var(--forest);
}

/* ---------- Vista previa inline de nota privada ---------- */
.sz-vendor-note-preview {
  flex: 1 0 100%;
  margin-top: 4px;
}

.sz-vendor-note-preview:empty {
  display: none;
}

.sz-vendor-note-preview__text {
  margin: 0;
  padding: 10px 14px;
  background: var(--paper-deep);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ---------- Spinner pequeño para filter bar ---------- */
.sz-spinner--xs {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .sz-vendor-row .sz-card__body.sz-vendor-row__body {
    padding: 12px 14px;
    flex-direction: column;
    align-items: stretch;
  }

  .sz-vendor-row__actions {
    justify-content: flex-end;
  }

  .sz-vendor-row__meta-item {
    max-width: 100%;
  }
}