/* ============================================================
   SOCIOS ECOM — Miembros (assets/js/vistas/miembros.js)
   ============================================================ */

.mb { display: flex; flex-direction: column; gap: var(--se-sp-4); }

.mb-invitacion {
  display: flex; align-items: center; justify-content: space-between; gap: var(--se-sp-3);
  flex-wrap: wrap;
  padding: var(--se-sp-3) var(--se-sp-4);
  border: 1px solid rgba(var(--se-verde-rgb), .45);
  border-radius: var(--se-r-card);
  background: var(--se-verde-tint);
}
.mb-invitacion b { display: block; color: var(--se-tinta); }
.mb-invitacion small { font-size: var(--se-fs-label); color: var(--se-tinta-2); }

.mb-btn {
  padding: 8px 14px;
  border: 1px solid var(--se-linea-fuerte);
  border-radius: 10px;
  background: var(--se-papel);
  color: var(--se-tinta);
  font: 500 13px var(--se-fuente);
  cursor: pointer;
}
.mb-btn:hover { border-color: var(--se-verde); }
.mb-btn--primario { border-color: var(--se-verde); background: var(--se-verde); color: #fff; font-weight: 600; }
.mb-btn:disabled { opacity: .6; cursor: default; }

/* Invitar por correo (2026-11-11): el correo y el botón, en una fila; en el móvil, uno debajo de otro. */
.mb-invitar { display: flex; gap: var(--se-sp-2); flex: 1 1 360px; max-width: 520px; }
.mb-invitar .mb-buscar { flex: 1 1 auto; min-width: 0; }
.mb-invitar__estado { flex-basis: 100%; margin: 0; font-size: var(--se-fs-label); color: var(--se-ok); }
.mb-invitar__estado.es-error { color: var(--se-error); }

.mb-nota { margin: 0; font-size: 13px; color: var(--se-tinta-2); }
.mb-error { margin: 0; font-size: 13px; color: var(--se-error); }

.mb-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--se-sp-2); }
.mb-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-filtro {
  padding: 6px 12px;
  border: 1px solid var(--se-linea);
  border-radius: 999px;
  background: var(--se-papel);
  color: var(--se-tinta-2);
  font: 500 13px var(--se-fuente);
  cursor: pointer;
}
.mb-filtro span { margin-left: 4px; font-family: var(--se-fuente-mono); opacity: .7; }
.mb-filtro.es-activo { border-color: var(--se-verde); background: var(--se-verde-tint); color: var(--se-tinta); }
.mb-buscar {
  min-width: 240px; flex: 0 1 320px;
  padding: 8px 12px;
  border: 1px solid var(--se-linea);
  border-radius: 10px;
  background: var(--se-papel);
  color: var(--se-tinta);
  font: 13px var(--se-fuente);
}

.mb-tabla {
  border: 1px solid var(--se-linea);
  border-radius: var(--se-r-card);
  background: var(--se-papel);
  overflow: hidden;
}
.mb-fila {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) 120px minmax(200px, 1.4fr) minmax(170px, 1.1fr) 100px 110px;
  align-items: center;
  gap: var(--se-sp-3);
  padding: 12px var(--se-sp-4);
  border-top: 1px solid var(--se-linea-suave);
  font-size: 13px;
  color: var(--se-tinta);
}
.mb-fila--cabeza {
  border-top: 0;
  background: var(--se-papel-hundido);
  font-size: var(--se-fs-label);
  font-weight: 600;
  color: var(--se-tinta-2);
}
.mb-quien { display: flex; flex-direction: column; min-width: 0; }
.mb-quien b, .mb-quien small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-quien small { color: var(--se-tinta-2); }

.mb-rol {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--se-papel-hundido);
  color: var(--se-tinta-2);
}
.mb-rol--admin { background: var(--se-verde-tint); color: var(--se-verde-tinta); }
.mb-rol--propietario { background: var(--se-dorado-tint); color: var(--se-dorado-tinta); }
.mb-rol--moderador { background: var(--se-violeta-tint); color: var(--se-violeta); }

.mb-select {
  padding: 5px 8px;
  border: 1px solid var(--se-linea-fuerte);
  border-radius: 8px;
  background: var(--se-papel);
  color: var(--se-tinta);
  font: 13px var(--se-fuente);
}

.mb-celda-busq { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mb-busq b { font-family: var(--se-fuente-mono); }
.mb-busq small { color: var(--se-tinta-2); }
.mb-busq.es-agotado b { color: var(--se-error); }
.mb-sumar { display: inline-flex; gap: 4px; }
.mb-sumar button {
  min-width: 34px;
  padding: 3px 6px;
  border: 1px solid var(--se-linea-fuerte);
  border-radius: 7px;
  background: var(--se-papel);
  color: var(--se-tinta);
  font: 600 12px var(--se-fuente-mono);
  cursor: pointer;
}
.mb-sumar button:hover:not(:disabled) { border-color: var(--se-verde); background: var(--se-verde-tint); }
.mb-sumar button:disabled { opacity: .4; cursor: default; }

/* Móvil: cada miembro, una tarjeta. */
@media (max-width: 820px) {
  .mb-fila--cabeza { display: none; }
  .mb-fila { grid-template-columns: 1fr; gap: 6px; }
  .mb-fila > [data-etiqueta] { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .mb-fila > [data-etiqueta]::before { content: attr(data-etiqueta); margin-right: auto; font-size: 13px; color: var(--se-tinta-2); }
  .mb-buscar { flex: 1 1 100%; min-width: 0; }
  .mb-invitar { flex-direction: column; max-width: none; }
}

/* ---------- Reservas de referentes (assets/js/vistas/reservasAdmin.js, 2026-11-05) ---------- */
/* Lo que pinta reservasAdmin.js va dentro de #rs-cuerpo: el mismo respiro que el resto de .mb */
#rs-cuerpo { display: flex; flex-direction: column; gap: var(--se-sp-4); }
.rs-fila { grid-template-columns: minmax(220px, 2fr) minmax(200px, 1.6fr) 120px 100px 100px 90px; }
.rs-tienda { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rs-tienda img, .rs-tienda i { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--se-papel-hundido); }
.rs-tienda a { color: inherit; text-decoration: none; }
.rs-tienda a:hover { text-decoration: underline; }
.rs-acciones { display: flex; justify-content: flex-end; }
.rs-quitar:hover:not(:disabled) { border-color: var(--se-error); color: var(--se-error); }
.rs-quitar:disabled { opacity: .5; cursor: default; }
.rs-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 820px) {
  .rs-fila { grid-template-columns: 1fr; }
  .rs-acciones { justify-content: stretch; }
  .rs-acciones .rs-quitar { flex: 1; }
  .rs-fila > .mb-quien[data-etiqueta] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; text-align: right; }
  .rs-fila > .mb-quien[data-etiqueta]::before { grid-row: span 2; align-self: center; text-align: left; }
}