:root {
  --color-bg: #f0f2f5;
  --color-surface: #ffffff;
  --color-text: #1c1e21;
  --color-muted: #65676b;
  --color-border: #ced0d4;
  --color-border-soft: #e4e6eb;
  --color-primary: #1877f2;
  --color-primary-hover: #166fe5;
  --color-primary-soft: #e7f3ff;
  --color-accent: #42b72a;
  --color-accent-dark: #36a420;
  --color-danger: #fa383e;
  --color-danger-soft: #fdecec;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --max-width: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

/* ---------------- Ocultar secciones ---------------- */
/* Clase única para esconder contenedores principales. */
.hidden {
  display: none !important;
}

/* El atributo `hidden` siempre oculta: sin esto, cualquier regla con `display:` (como la de los botones del menú) lo pisa y,
   por ejemplo, un cliente vería los botones de Administrador y de Mis entregas aunque la app los marque como ocultos. */
[hidden] {
  display: none !important;
}


/* ---------------- Header ---------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.app-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 1.22rem;
  color: var(--color-primary);
  white-space: nowrap;
}

.brand__logo {
  font-size: 1.5rem;
}

/* El logo de Tratify (la marca y el nombre juntos) en la cabecera; el infinito dorado de Arica Smart sigue en la boleta de sus pedidos */
.brand__logo-img {
  display: block;
  height: 38px;
  width: auto;
}

.receipt__logo {
  display: block;
  height: 30px;
  width: auto;
  margin: 0 auto 4px;
}

.brand__badge {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* ---------------- Selector de panel ---------------- */
.panel-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  margin-left: 8px;
}

.panel-switch__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.panel-switch__btn:hover {
  color: var(--color-text);
}

.panel-switch__btn.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow);
}

.panel-switch__badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
}

.panel-switch__badge[hidden] {
  display: none;
}

.location-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.cart-indicator {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
  font-size: 1.3rem;
}

.cart-indicator[hidden] {
  display: none;
}

.cart-indicator__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-surface);
}

/* ---------------- Layout ---------------- */
.app-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 20px 60px;
}

/* Respaldo por atributo hidden (por si alguien lo setea directo). */
#shopView[hidden],
#ordersView[hidden],
#adminView[hidden],
#courierView[hidden],
#trackingSection[hidden] {
  display: none;
}

.notice {
  margin: 0 0 22px;
  padding: 12px 16px;
  background: var(--color-primary-soft);
  border: 1px solid #cce4fd;
  border-radius: var(--radius-sm);
  color: #0a5dc2;
  font-size: 0.88rem;
  font-weight: 500;
}

.notice code {
  background: rgba(255, 255, 255, 0.7);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.82rem;
}

.section {
  margin-bottom: 36px;
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.section__title {
  font-size: 1.2rem;
  margin: 0 0 14px;
  font-weight: 700;
}

.section__hint {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.section__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* ---------------- Buscador + categorías (comprador) ---------------- */
.market-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  height: 46px;
  padding: 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-bar:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15);
}

.search-bar__icon {
  font-size: 1rem;
  opacity: 0.65;
  flex: 0 0 auto;
}

.search-bar__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--color-text);
}

.search-bar__input::placeholder {
  color: var(--color-muted);
}

.search-bar__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-bar__clear {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.search-bar__clear:hover {
  background: var(--color-border-soft);
  color: var(--color-text);
}

.search-bar__clear[hidden] {
  display: none;
}

.category-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.category-chips::-webkit-scrollbar {
  height: 6px;
}

.category-chips::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---------------- Grid de productos ---------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.card__media {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  background: linear-gradient(135deg, #f0f2f5, #e7f3ff);
}

/* Productos "por encargo": foto del producto sobre fondo blanco, entera (sin recortar). */
.card__media--foto {
  background: #fff;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}

.card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.card__category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  font-weight: 600;
}

/* La foto y el nombre de la tarjeta abren la página del producto. */
a.card__media {
  color: inherit;
  text-decoration: none;
}

.card__link {
  color: inherit;
  text-decoration: none;
}

.card__link:hover,
.card__link:focus-visible {
  text-decoration: underline;
}

/* ---- Página de un producto ---- */
.pdetail__volver {
  display: inline-block;
  margin-bottom: 14px;
  text-decoration: none;
}

.pdetail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.pdetail__principal {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--color-border, #e4e6eb);
  border-radius: 14px;
  overflow: hidden;
}

.pdetail__principal--icono {
  background: linear-gradient(135deg, #f0f2f5, #e7f3ff);
}

.pdetail__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
}

.pdetail__icono {
  font-size: 6rem;
}

.pdetail__minis {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pdetail__mini {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 3px;
  background: #fff;
  border: 2px solid var(--color-border, #e4e6eb);
  border-radius: 10px;
  cursor: pointer;
}

.pdetail__mini.is-active {
  border-color: var(--color-primary, #1877f2);
}

.pdetail__mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdetail__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdetail__nombre {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.3;
}

.pdetail__marca {
  margin: 0;
  color: var(--color-muted);
}

.pdetail__precio {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pdetail__comprar {
  max-width: 340px;
}

.pdetail__bloque {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, #e4e6eb);
}

.pdetail__bloque h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.pdetail__texto {
  white-space: pre-line;
  line-height: 1.6;
  max-width: 78ch;
}

.pdetail__tabla {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pdetail__tabla th,
.pdetail__tabla td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border, #e4e6eb);
}

.pdetail__tabla th {
  width: 42%;
  font-weight: 600;
  color: var(--color-muted);
}

@media (max-width: 720px) {
  .pdetail__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .pdetail__nombre {
    font-size: 1.25rem;
  }

  .pdetail__precio {
    font-size: 1.7rem;
  }
}

.card__name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}

.card__location {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.card__price {
  margin-top: auto;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.card__actions {
  margin-top: 10px;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.qty-input {
  flex: 0 0 58px;
  width: 58px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
}

.qty-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15);
  background: var(--color-surface);
}

.card__add {
  flex: 1;
  white-space: nowrap;
}

.empty {
  color: var(--color-muted);
  text-align: center;
  padding: 26px 0;
  margin: 0;
}

/* ---------------- Botones ---------------- */
.btn {
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.btn--ghost {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--color-border-soft);
}

.btn--receipt {
  background: var(--color-accent);
  color: #fff;
}

.btn--receipt:hover {
  background: var(--color-accent-dark);
}

.btn--advance {
  background: var(--color-accent);
  color: #fff;
}

.btn--advance:hover:not(:disabled) {
  background: var(--color-accent-dark);
}

.btn--cta {
  padding: 15px 22px;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius);
}

.btn--sm {
  padding: 7px 12px;
  font-size: 0.82rem;
}

.btn--danger {
  color: var(--color-danger);
}

.btn--danger:hover:not(:disabled) {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15);
}

/* ---------------- Carrito ---------------- */
.cart {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart__delivery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-soft);
}

.cart__delivery-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.shipping__mode {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.segmented:hover {
  border-color: var(--color-primary);
}

.segmented input {
  accent-color: var(--color-primary);
  cursor: pointer;
  margin: 0;
}

.segmented:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.shipping__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 340px;
}

.shipping__field[hidden] {
  display: none;
}

.shipping__field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-muted);
}

.cart__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.cart-item__icon {
  font-size: 1.8rem;
}

.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cart-item__name {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
}

.cart-item__price {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.qty-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cart-item__count {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.cart-item__subtotal {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.95rem;
  text-align: right;
  min-width: 90px;
}

.cart-item__remove {
  padding: 6px 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.cart-item__remove:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.cart__totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}

.cart__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-muted);
}

.cart__line--total {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
}

.cart__value {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.cart__line--total .cart__value {
  color: var(--color-primary);
  font-size: 1.4rem;
}

.cart__formula {
  margin: 4px 0 0;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.cart__checkout {
  margin-top: 6px;
  width: 100%;
}

.cart__checkout-total {
  background: rgba(255, 255, 255, 0.22);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------------- Overlay / Checkout ---------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
}

.overlay[hidden] {
  display: none;
}

.checkout {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
}

.checkout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border-soft);
}

.checkout__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.checkout__close,
.receipt__close {
  border: none;
  background: var(--color-bg);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--color-muted);
  cursor: pointer;
  line-height: 1;
}

.checkout__close:hover,
.receipt__close:hover {
  color: var(--color-danger);
  background: var(--color-border-soft);
}

.checkout__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-muted);
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.field-group[hidden] {
  display: none;
}

.field-hint {
  margin: 0;
  font-size: 0.76rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.checkout__summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}

.checkout__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.checkout__line--total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.checkout__line--total span:last-child {
  color: var(--color-primary);
  font-size: 1.3rem;
}

.checkout__error {
  margin: 0;
  color: var(--color-danger);
  font-size: 0.82rem;
  font-weight: 600;
}

.checkout__error[hidden] {
  display: none;
}

.checkout__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--color-border-soft);
}

/* ---------------- Panel Administrador ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.stat__value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.admin-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-form__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.admin-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.admin-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-form__error {
  margin: 0;
  color: var(--color-danger);
  font-size: 0.84rem;
  font-weight: 600;
}

.admin-form__error[hidden] {
  display: none;
}

.admin-form.is-editing {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12);
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-empty {
  margin: 0;
  padding: 24px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.admin-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.admin-row__icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, #f0f2f5, #e7f3ff);
  border-radius: var(--radius-sm);
}

/* Con foto (libros, productos por encargo, anuncios de clientes): la miniatura entera, sobre fondo blanco */
.admin-row__icon--foto {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
}

.admin-row__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-row__title {
  font-size: 0.95rem;
  font-weight: 700;
  word-break: break-word;
}

.admin-row__meta {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.admin-row__price {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}

.admin-row__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-order {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-order__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-order__head strong {
  font-size: 0.98rem;
}

.admin-order__total {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}

.admin-order__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.admin-order__items {
  font-size: 0.84rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.admin-order__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ---------------- Mis Pedidos (comprador) ---------------- */
.order-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.order-card__head strong {
  font-size: 0.98rem;
}

.order-card__total {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}

.order-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.order-card__items {
  font-size: 0.84rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.order-card__waiting {
  font-size: 0.82rem;
  font-weight: 600;
  color: #8a6500;
  background: #fff8e1;
  border: 1px solid #f7b928;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.order-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------------- Rastreo ---------------- */
.tracking {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tracking__status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tracking__icon {
  font-size: 1.6rem;
}

.tracking__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tracking__info strong {
  font-size: 1rem;
}

.tracking__eta {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.tracking__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--color-danger);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.tracking__live[hidden] {
  display: none;
}

.tracking__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: live-pulse 1.2s ease-in-out infinite;
}

.tracking__notice {
  font-size: 0.86rem;
  font-weight: 600;
  color: #8a6500;
  background: #fff8e1;
  border: 1px solid #f7b928;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.tracking__notice[hidden] {
  display: none;
}

@keyframes live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.timeline__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  flex: 0 0 auto;
}

.timeline__item.is-active {
  color: var(--color-text);
  font-weight: 700;
}

.timeline__item.is-active .timeline__dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(24, 119, 242, 0.18);
}

.timeline__item.is-done {
  color: var(--color-accent);
  font-weight: 600;
}

.timeline__item.is-done .timeline__dot {
  background: var(--color-accent);
}

/* ---------------- Mapa ---------------- */
.map {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  background: #dbeafe;
}

.map[hidden] {
  display: none;
}

.map__canvas {
  width: 100%;
  height: 360px;
  min-height: 360px;
}

.map__legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 800;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 17px;
  line-height: 1;
}

.map-pin--start {
  border-color: #65676b;
}

.map-pin--end {
  border-color: var(--color-accent);
}

.map-pin--courier {
  width: 38px;
  height: 38px;
  border-color: var(--color-primary);
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.5);
  transition: transform 0.15s ease;
}

/* ---------------- Barra de simulación ---------------- */
.sim {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--color-primary-soft);
  border: 1px solid #cce4fd;
  border-radius: var(--radius-sm);
}

.sim[hidden] {
  display: none;
}

.sim__text {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sim__text::before {
  content: "🚗";
  font-size: 1rem;
}

.sim__track {
  width: 100%;
  height: 10px;
  background: #d0e4ff;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.sim__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #1877f2, #42b72a);
  border-radius: var(--radius-pill);
  transition: width 0.15s linear;
}

.sim__pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: right;
}

.tracking__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}

/* ---------------- Recibo ---------------- */
.receipt {
  width: min(460px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
}

.receipt__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
}

.receipt__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.receipt__email {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 20px 12px;
  padding: 10px 12px;
  background: var(--color-primary-soft);
  border: 1px solid #cce4fd;
  border-radius: var(--radius-sm);
  color: #0a5dc2;
  font-size: 0.8rem;
  font-weight: 600;
}

.receipt__body {
  padding: 0 20px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

.receipt__brand {
  text-align: center;
  padding: 8px 0 14px;
  border-bottom: 1px dashed var(--color-border);
  margin-bottom: 12px;
}

.receipt__brand strong {
  display: block;
  font-size: 1rem;
  font-family: var(--font);
}

.receipt__brand span {
  display: block;
  color: var(--color-muted);
  font-size: 0.76rem;
}

.receipt__meta {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.receipt__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.receipt__row span:first-child {
  color: var(--color-muted);
}

.receipt__row span:last-child {
  text-align: right;
}

.receipt__items {
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
  padding: 10px 0;
  margin-bottom: 12px;
  display: grid;
  gap: 6px;
}

.receipt__totals {
  display: grid;
  gap: 4px;
}

.receipt__row--grand {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
  font-size: 1rem;
  font-weight: 800;
}

.receipt__row--grand span:last-child {
  color: var(--color-primary);
}

.receipt__thanks {
  text-align: center;
  margin-top: 14px;
  color: var(--color-muted);
  font-size: 0.76rem;
}

.receipt__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--color-border-soft);
}

/* ---------------- Notificaciones ---------------- */
.notifications {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 40px));
  pointer-events: none;
}

.notification {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  animation: notif-in 0.25s ease;
}

.notification--success {
  border-left-color: var(--color-accent);
}

.notification--warning {
  border-left-color: #f7b928;
}

.notification--map {
  border-left-color: var(--color-primary);
}

.notification__icon {
  font-size: 1.1rem;
  line-height: 1.3;
}

.notification__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.notification__title {
  font-size: 0.88rem;
  font-weight: 700;
}

.notification__message {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.notification__close {
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.notification__close:hover {
  color: var(--color-danger);
}

@keyframes notif-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------- Footer ---------------- */
.app-footer {
  text-align: center;
  padding: 24px 20px;
  color: var(--color-muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.app-footer p {
  margin: 0;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .app-header__inner {
    flex-wrap: wrap;
  }

  .panel-switch {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .panel-switch__btn {
    flex: 1;
    justify-content: center;
  }

  .location-pill {
    display: none;
  }
}

@media (max-width: 560px) {
  .app-header__inner {
    padding: 10px 16px;
    gap: 10px;
  }

  .brand__badge {
    display: none;
  }

  .panel-switch__btn {
    padding: 8px 6px;
    font-size: 0.72rem;
  }

  .search-bar {
    height: 42px;
    padding: 0 14px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .card__media {
    height: 140px;
    font-size: 2.8rem;
  }

  .cart {
    padding: 16px;
  }

  .cart-item {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon info remove"
      "icon qty subtotal";
    row-gap: 10px;
  }

  .cart-item__icon {
    grid-area: icon;
  }

  .cart-item__info {
    grid-area: info;
  }

  .cart-item__qty {
    grid-area: qty;
  }

  .cart-item__subtotal {
    grid-area: subtotal;
  }

  .cart-item__remove {
    grid-area: remove;
    justify-self: end;
  }

  .admin-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon info"
      "price actions";
    row-gap: 10px;
  }

  .admin-row__icon {
    grid-area: icon;
  }

  .admin-row__info {
    grid-area: info;
  }

  .admin-row__price {
    grid-area: price;
  }

  .admin-row__actions {
    grid-area: actions;
    justify-content: flex-end;
  }

  .map__canvas {
    height: 280px;
    min-height: 280px;
  }

  .notifications {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }
}

/* ---------------- Stock y almacenaje ---------------- */
.btn[hidden] {
  display: none;
}

.stock-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.stock-pill--ok {
  color: #1b6e10;
  background: #e6f6e3;
}

.stock-pill--low {
  color: #8a6500;
  background: #fff8e1;
}

.stock-pill--out {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.card--agotado .card__media {
  opacity: 0.45;
  filter: grayscale(1);
}

.card--agotado .card__price {
  color: var(--color-muted);
}

.table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th,
.data-table td {
  padding: 10px 14px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-soft);
}

.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
}

.data-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table__empty {
  text-align: center !important;
  color: var(--color-muted);
  padding: 22px 14px;
}

.subsection-title {
  margin: 20px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.movements {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.movements__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}

.movements__qty {
  font-weight: 800;
}

.movements__qty--in {
  color: #1b6e10;
}

.movements__qty--out {
  color: var(--color-danger);
}

.movements__meta {
  margin-left: auto;
  font-size: 0.76rem;
  color: var(--color-muted);
}

.movements__empty {
  padding: 14px 0;
  text-align: center;
  color: var(--color-muted);
}

@media (max-width: 560px) {
  .movements__meta {
    margin-left: 0;
    width: 100%;
  }

  /* En celular la grilla es de 2 columnas y "cantidad + Agregar" no caben en una fila. */
  .card__actions {
    flex-direction: column;
  }

  /* En columna, el "flex: 0 0 58px" del campo pasaría a ser su alto: se anula. */
  .qty-input {
    flex: 0 0 auto;
    width: 100%;
  }

  .card__add {
    flex: 0 0 auto;
  }
}
/* ---------------- Estados de pedido, clientes y notas ---------------- */
.tag[data-estado="recibido"] {
  color: #5b6470;
  background: #eceff3;
}

.tag[data-estado="preparando"] {
  color: #8a6500;
  background: #fff8e1;
}

.tag[data-estado="enRuta"] {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.tag[data-estado="retiro"] {
  color: #6b3fa0;
  background: #f0e9fb;
}

.tag[data-estado="entregado"] {
  color: #1b6e10;
  background: #e6f6e3;
}

.tag[data-estado="cancelado"] {
  color: #a32a24;
  background: #fdeceb;
}

/* ---------------- Conexión con el servidor y acceso del administrador ---------------- */
.conn-banner {
  padding: 10px 16px;
  background: #fff8e1;
  border-bottom: 1px solid #f1d98a;
  color: #7a5a00;
  font-size: 0.86rem;
  font-weight: 500;
  text-align: center;
}

.conn-banner[hidden] {
  display: none;
}

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 22px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #dddfe2);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.admin-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkout--small {
  width: min(380px, 100%);
}

/* ---------------- Cuentas: ingresar, crear cuenta, repartidor ---------------- */
.checkout__body[hidden] {
  display: none;
}

.btn--block {
  display: block;
  width: 100%;
}

.user-btn.is-logged {
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 700;
}

.auth-tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--color-border-soft);
}

.auth-tab {
  flex: 1;
  padding: 11px 8px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--color-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auth-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.auth-motivo {
  margin: 14px 20px 0;
  padding: 10px 12px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  color: #0a5dc2;
  font-size: 0.85rem;
  font-weight: 500;
}

.auth-motivo[hidden] {
  display: none;
}

.checkout__error--dialog {
  margin: 0 20px 18px;
}

.input--inline {
  width: auto;
  min-width: 150px;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.admin-order__meta--rep {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------------- Pago en línea (Mercado Pago) ---------------- */
.pay-group {
  margin: 12px 0 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pay-group legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 0.9rem;
}

.pay-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pay-option:hover {
  background: var(--color-primary-soft);
}

.pay-option input {
  margin-top: 4px;
  flex: none;
}

.pay-option small {
  display: block;
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.pay-test {
  margin: 6px 0 0;
  font-weight: 600;
  color: #8a5a00;
}

.pago-icono {
  margin: 0;
  font-size: 2.6rem;
  text-align: center;
}

.pago-texto {
  margin: 8px 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
}

.pago-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.pago-tag--pagado {
  background: #e6f6e2;
  color: #2a7a16;
}

.pago-tag--alerta {
  background: var(--color-danger-soft);
  color: #b3262b;
}

.pago-tag--espera {
  background: #fff3d6;
  color: #8a5a00;
}

.order-card__pay,
.admin-order__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 0.85rem;
}

.admin-order__alerta {
  margin: 4px 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b3262b;
}

.cred-clave {

  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  user-select: all;
}

.sim--live .sim__text::before {
  content: none;
}



.data-table__sub {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-muted);
}

.section__note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* Celulares angostos: la barra de navegación debe caber (con el contador de pedidos) sin cortar botones. */
@media (max-width: 400px) {
  .panel-switch__btn {
    font-size: 0.7rem;
  }
}

@media (max-width: 360px) {

  .panel-switch {
    gap: 2px;
    padding: 3px;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .panel-switch::-webkit-scrollbar {
    display: none;
  }

  .panel-switch__btn {
    padding: 8px 3px;
    font-size: 0.64rem;
    gap: 2px;
  }
}

@media (max-width: 340px) {
  .panel-switch__btn {
    font-size: 0.6rem;
  }
}

/* ---------------- Ganancias, liquidación y resumen ---------------- */
.stat[hidden] {
  display: none;
}

.data-table__neg {
  color: var(--color-danger);
}
/* Celular: las tablas del administrador pasan a tarjetas (una fila = una tarjeta) para que ningún dato
   ni botón, como "Registrar pago", quede fuera de pantalla; y los resúmenes van de a dos por fila. */
@media (max-width: 560px) {
  .data-table thead {
    display: none;
  }

  .data-table tr {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-soft);
  }

  .data-table tbody tr:last-child {
    border-bottom: none;
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    border: none;
    text-align: right;
    white-space: normal;
  }

  .data-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    text-align: left;
  }

  .data-table td:first-child {
    display: block;
    padding-bottom: 6px;
    text-align: left;
    font-size: 1rem;
  }

  .data-table td:first-child::before,
  .data-table td.data-table__empty::before {
    content: none;
  }

  .data-table td.data-table__empty {
    display: block;
    text-align: center;
  }

  .data-table td:empty {
    display: none;
  }

  .data-table__valor {
    text-align: right;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat {
    padding: 14px;
  }

  .stat__value {
    font-size: 1.25rem;
  }
}

/* ---------------- Geolocalización: punto de entrega, bodega y retiro ---------------- */
.geo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.geo-status {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: #0b4fb3;
  background: var(--color-primary-soft);
}

.geo-status[hidden] {
  display: none;
}

.geo-status--ok {
  color: #1b6e10;
  background: #e6f6e3;
}

.geo-status--warn {
  color: #8a6500;
  background: #fff8e1;
}

.geo-status--error {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.map--mini {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.map__canvas--mini {
  height: 240px;
  min-height: 240px;
}

.bodega-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.geo-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-muted);
}

.geo-radio .input {
  width: 84px;
}

.tracking__notice--info {
  color: #0b4fb3;
  background: var(--color-primary-soft);
  border-color: #b9d8fb;
}

.tracking__notice--info a {
  color: inherit;
  text-decoration: underline;
}

/* Los mapas de Leaflet usan z-index de 400 a 1000 (capas y controles). Sin aislarlos, se pintan por encima
   de los diálogos (recibo y checkout, z-index 50) y del encabezado fijo (z-index 10) al hacer scroll. */
.map {
  isolation: isolate;
}

/* ---------------- Búsqueda de dirección: lista de lugares para elegir ---------------- */
.geo-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.geo-options[hidden] {
  display: none;
}

.geo-option {
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.geo-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* ---------------- Confirmar el punto de entrega ---------------- */
.geo-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.geo-confirm[hidden] {
  display: none;
}

/* =====================================================================
   Comunidad: estrellas, reputación del vendedor, preguntas y opiniones
   ===================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Estrellas: cinco ★ pintadas con un degradado según el promedio (--rel = % relleno). */
.estrellas {
  --rel: 0%;
  display: inline-block;
  font-size: 1em;
  letter-spacing: 1px;
  line-height: 1;
  background: linear-gradient(90deg, #f5a623 var(--rel), #cfd2d8 var(--rel));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  vertical-align: -1px;
}

.card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.panel-switch__badge--pregunta {
  background: var(--color-primary);
  margin-left: 4px;
}

/* ---- Ficha del producto: valoración y tarjeta del vendedor ---- */
.pdetail__reputacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 0 8px;
  font-size: 0.92rem;
  color: var(--color-muted);
}

.pdetail__valoracion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button.pdetail__valoracion:hover span:last-child {
  color: var(--color-primary);
  text-decoration: underline;
}

.pdetail__valoracion--vacia {
  cursor: default;
}

.pdetail__vendidos {
  font-weight: 600;
}

.vendedor-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding: 14px 16px;
  max-width: 340px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.vendedor-card:hover {
  border-color: var(--color-primary);
}

.vendedor-card__etiqueta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.vendedor-card__nombre {
  font-size: 1.05rem;
}

.vendedor-card__linea {
  font-size: 0.86rem;
  color: var(--color-muted);
}

.vendedor-card__ver {
  margin-top: 2px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Termómetro del vendedor: 5 tramos de rojo a verde; solo se enciende el de su nivel. */
.termo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.termo__barra {
  display: flex;
  gap: 3px;
}

.termo__seg {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #dfe2e7;
}

.termo__seg--1.is-on { background: #e5484d; }
.termo__seg--2.is-on { background: #f5822a; }
.termo__seg--3.is-on { background: #f5c518; }
.termo__seg--4.is-on { background: #8ac926; }
.termo__seg--5.is-on { background: #1fa855; }

.termo__etiqueta {
  font-size: 0.84rem;
  font-weight: 700;
}

.termo__etiqueta--0 { color: var(--color-muted); }
.termo__etiqueta--1 { color: #c0262b; }
.termo__etiqueta--2 { color: #c4620f; }
.termo__etiqueta--3 { color: #a3800a; }
.termo__etiqueta--4 { color: #5b8a12; }
.termo__etiqueta--5 { color: #178243; }

/* ---- Preguntas y respuestas ---- */
.pregunta-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  max-width: 720px;
}

.pregunta-form textarea,
#opinionComentario {
  resize: vertical;
  font: inherit;
}

.pregunta-form__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pregunta-ingresar {
  margin: 0 0 14px;
}

.qa-lista,
.op-lista {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-width: 780px;
}

.qa {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.qa__q {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.qa__meta,
.op__meta {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.qa__a {
  margin: 6px 0 0 14px;
  padding-left: 10px;
  border-left: 3px solid var(--color-primary-soft);
  font-size: 0.92rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.qa__a--espera {
  color: var(--color-muted);
  font-style: italic;
}

.qa__fecha {
  margin-left: 6px;
  font-size: 0.76rem;
  color: var(--color-muted);
}

/* ---- Opiniones ---- */
.op-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  align-items: center;
  margin-bottom: 14px;
}

.op-resumen__nota {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.op-resumen__nota strong {
  font-size: 2.6rem;
  line-height: 1;
}

.op-resumen__nota .estrellas {
  font-size: 1.2rem;
}

.op-resumen__nota span:last-child {
  font-size: 0.84rem;
  color: var(--color-muted);
}

.op-barras {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

.op-barra {
  display: grid;
  grid-template-columns: 34px 1fr 30px;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.op-barra__fondo {
  height: 7px;
  border-radius: 4px;
  background: #e4e6eb;
  overflow: hidden;
}

.op-barra__lleno {
  display: block;
  height: 100%;
  background: #f5a623;
}

.op-barra__c {
  text-align: right;
}

.op-destacadas h4,
.spage__dist h4 {
  margin: 14px 0 8px;
  font-size: 0.95rem;
}

.op {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.op__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.op__verificada {
  font-size: 0.78rem;
  font-weight: 600;
  color: #178243;
}

.op__producto {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.op__texto {
  margin: 6px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.op__texto--oculta {
  color: var(--color-muted);
  font-style: italic;
}

.op__fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.op-foto {
  width: 84px;
  height: 84px;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg);
  cursor: zoom-in;
}

.op-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Foto de un comprador en grande */
.overlay--foto {
  flex-direction: column;
  cursor: zoom-out;
  z-index: 60;
}

.overlay--foto img {
  max-width: min(96vw, 900px);
  max-height: 88vh;
  border-radius: var(--radius-sm);
  background: #fff;
}

.overlay--foto .checkout__close {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* ---- Página de un vendedor ---- */
.spage__cab {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 14px;
}

.spage__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
}

.spage__nombre {
  margin: 0;
  font-size: 1.5rem;
}

.spage__sub {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.spage__reputacion {
  max-width: 420px;
}

.spage__nota {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.spage__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.spage__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 0.8rem;
  color: var(--color-muted);
}

.spage__stat strong {
  font-size: 1.4rem;
  color: var(--color-text);
}

.spage__dist {
  max-width: 420px;
}

/* ---- «Opinar» en Mis pedidos ---- */
.order-card__opinar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #fff8e6;
  border: 1px solid #f3dfa2;
  font-size: 0.88rem;
}

.order-card__opinar--lista {
  background: #eaf8ee;
  border-color: #bfe6cb;
  color: #178243;
  font-weight: 600;
}

.order-card__opinar-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- Diálogo de opinión ---- */
.opinion-producto {
  margin: 0;
  font-weight: 600;
}

.field__label {
  font-size: 0.82rem;
  font-weight: 600;
}

.stars-input {
  display: flex;
  gap: 4px;
}

.stars-input__btn {
  padding: 0 2px;
  border: none;
  background: none;
  font-size: 2rem;
  line-height: 1;
  color: #cfd2d8;
  cursor: pointer;
}

.stars-input__btn.is-on {
  color: #f5a623;
}

.stars-input__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  border-radius: 4px;
}

.foto-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.foto-picker:empty {
  display: none;
}

.foto-prev {
  position: relative;
  width: 76px;
  height: 76px;
}

.foto-prev img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-soft);
}

.foto-prev__quitar {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
}

/* ---- Administrador: preguntas y opiniones ---- */
.com-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.com-card--pendiente {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.com-card__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 0.84rem;
  color: var(--color-muted);
}

.com-card__cab strong {
  color: var(--color-text);
}

.com-card__estrellas {
  margin: 0;
  font-size: 0.86rem;
}

.com-card__acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.com-card__acciones textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
}

@media (max-width: 640px) {
  .spage__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vendedor-card {
    max-width: none;
  }
}

/* Precio y stock verificados al abrir el producto */
.pdetail__vigencia {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.pdetail__vigencia--ok {
  color: #178243;
  font-weight: 600;
}

/* Insignia «Popular» (ranking de lo que se mueve bien) */
.insignia-popular {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: #fff1e0;
  color: #b45309;
  border: 1px solid #f7d3a6;
  font-size: 0.74rem;
  font-weight: 700;
}

/* SKU de tienda (solo el administrador): se toca para copiarlo */
.sku {
  padding: 1px 7px;
  border-radius: 6px;
  background: #eef2ff;
  color: #3730a3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  font-weight: 700;
  cursor: copy;
}

.pdetail__sku {
  margin: 2px 0 6px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* Ofertas de socios (afiliados): no se compran en MiTienda, el botón lleva al sitio de la plataforma */
.ofertas {
  margin-top: 28px;
  padding: 16px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.ofertas__titulo {
  margin: 0 0 6px;
  font-size: 1.1rem;
}



.card--oferta {
  border-color: #cfe0ff;
}

/* «Vendido por Hotmart»: igual que «Vende …» en los productos propios */
.oferta__vendido {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.oferta__vendido strong {
  color: var(--color-text);
}

.oferta__desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oferta__boton {
  display: block;
  text-align: center;
  text-decoration: none;
}



.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 0.92rem;
}

.admin-row--oculta {
  opacity: 0.6;
}

/* Aviso en «Gestión de productos»: lo de afiliados va en otra sección */
.aviso-afiliados {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #cfe0ff;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}

.aviso-afiliados .btn {
  margin-left: 6px;
  vertical-align: baseline;
}

/* =============================================================
   Barra de mercado (2026-10-21): categorías, ofertas, ayuda, vender, favoritos, notificaciones y cuenta;
   tarjetas con reputación, descuento y medios de pago; envío gratis en Arica desde $29.990.
   ============================================================= */
.promo-strip {
  padding: 6px 14px;
  background: linear-gradient(90deg, #0a5dc2, #1877f2);
  color: #fff;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
}

.promo-strip strong {
  font-weight: 800;
}

.market-nav {
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.market-nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.market-nav__inner::-webkit-scrollbar {
  display: none;
}

.market-nav__espacio {
  flex: 1 1 auto;
}

.market-nav__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.market-nav__btn:hover,
.market-nav__btn[aria-expanded="true"],
.market-nav__btn.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.market-nav__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
}

.user-btn.is-logged::after {
  content: " ▾";
}

/* ---- Menús desplegables (van fijos bajo su botón: ninguna barra con scroll los recorta) ---- */
.mmenu-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.mmenu {
  position: fixed;
  z-index: 40;
  width: min(320px, calc(100vw - 16px));
  overflow-y: auto;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
}

.mmenu--ancho {
  width: min(380px, calc(100vw - 16px));
}

.mmenu__titulo {
  padding: 8px 10px;
  font-size: 0.92rem;
  font-weight: 800;
}

.mmenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mmenu__item:hover {
  background: var(--color-bg);
}

.mmenu__item.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.mmenu__n {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.mmenu__sep {
  height: 1px;
  margin: 6px 0;
  background: var(--color-border-soft);
}

.mmenu__perfil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border-soft);
}

.mmenu__perfil span:not(.tag) {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.mmenu__vacio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 14px;
  color: var(--color-muted);
  font-size: 0.88rem;
}

.mmenu__vacio strong {
  color: var(--color-text);
}

.mmenu__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fav-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
}

.fav-item:hover {
  background: var(--color-bg);
}

.fav-item__media {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-bg);
  font-size: 1.6rem;
  text-decoration: none;
}

.fav-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.fav-item__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.fav-item__nombre {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.fav-item__nombre:hover {
  text-decoration: underline;
}

.fav-item__precio {
  font-size: 0.85rem;
}

.fav-item__precio s {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.fav-item__estado {
  color: var(--color-accent-dark);
  font-size: 0.74rem;
  font-weight: 700;
}

.fav-item__estado--agotado {
  color: var(--color-danger);
}

.fav-item__quitar {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.fav-item__quitar:hover {
  text-decoration: underline;
}

.notif {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.notif:hover {
  background: var(--color-bg);
}

.notif--nueva {
  background: var(--color-primary-soft);
}

.notif__icono {
  font-size: 1.3rem;
}

.notif__texto {
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  font-weight: 600;
}

.notif__texto time {
  color: var(--color-muted);
  font-size: 0.74rem;
  font-weight: 500;
}

/* ---- Tarjetas de producto estilo mercado ---- */
.card {
  position: relative;
}

.card__fav,
.pdetail__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-muted);
  line-height: 1;
  cursor: pointer;
}

.card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 34px;
  height: 34px;
  font-size: 1.15rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.pdetail__fav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-soft);
  font-size: 1.3rem;
}

.card__fav:hover,
.pdetail__fav:hover {
  color: var(--color-danger);
}

.card__fav.is-fav,
.pdetail__fav.is-fav {
  color: var(--color-danger);
}

.pdetail__cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card__estrellas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card__rating {
  flex-wrap: wrap;
  gap: 2px 4px;
}

.card__vendidos {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.card__vendedor {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.card__vendedor:hover,
.card__vendedor:focus-visible {
  text-decoration: underline;
}

.precio-bloque {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.card .precio-bloque {
  margin-top: auto;
}

.card .precio-bloque .card__price {
  margin-top: 0;
}

.precio-bloque__antes {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.precio-bloque__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.precio-bloque__off {
  color: #00a650;
  font-size: 0.82rem;
  font-weight: 800;
}

.card__envio {
  margin: 0;
  color: #00a650;
  font-size: 0.78rem;
  font-weight: 700;
}

.card__envio--desde {
  font-weight: 600;
}

.card__pagos {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.72rem;
}

/* ---- Carrito: cuánto falta para el envío gratis ---- */
.envio-progreso {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #bfe7cb;
  border-radius: var(--radius-sm);
  background: #eaf8ee;
  color: #0b6b2e;
  font-size: 0.85rem;
  font-weight: 600;
}

.envio-progreso--falta {
  border-color: #cce4fd;
  background: var(--color-primary-soft);
  color: #0a5dc2;
}

.envio-progreso__barra {
  display: block;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.1);
}

.envio-progreso__lleno {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

/* ---- Ventana de Ayuda / Vender ---- */
.info p {
  margin: 0;
  font-size: 0.9rem;
}

.info__lista {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}

.info__lista li {
  margin-bottom: 6px;
}

.info__contacto {
  color: var(--color-muted);
}

.faq {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

.faq summary {
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.faq__texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}

@media (max-width: 560px) {
  .promo-strip {
    padding: 5px 10px;
    font-size: 0.76rem;
  }

  .market-nav__inner {
    padding: 0 2px;
    gap: 0;
  }

  .market-nav__btn {
    padding: 9px 6px;
    font-size: 0.78rem;
    gap: 3px;
  }

  /* En el teléfono Favoritos y la campana van solo con su ícono: así caben todos los botones sin tener que deslizar la barra. */
  .market-nav__txt,
  .market-nav__flecha {
    display: none;
  }

  .market-nav__btn .market-nav__count {
    position: absolute;
    top: 2px;
    right: 0;
  }
}

/* ---- Transferencia bancaria: datos para transferir ---- */
.transf__datos {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.transf__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

.transf__fila:last-child {
  border-bottom: none;
}

.transf__fila dt {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.transf__fila dd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.transf__copiar {
  padding: 3px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.transf__copiar:hover {
  background: var(--color-primary-soft);
}

/* =============================================================
   2026-10-22: botón del carrito, panel del administrador en pestañas, búsqueda de productos del administrador
   ============================================================= */
button.cart-indicator {
  padding: 0;
  border: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

button.cart-indicator:hover,
button.cart-indicator:focus-visible {
  background: var(--color-primary-soft);
}

#cartEmpty p {
  margin: 0 0 14px;
}

#catalogSection {
  scroll-margin-top: 150px; /* la cabecera queda fija arriba: sin esto tapa el título al saltar a la sección */
}

.admin-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  scrollbar-width: thin;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-tab:hover {
  background: var(--color-bg);
}

.admin-tab.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.admin-tab__badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
}

.admin-pendientes {
  margin-top: 18px;
}

.pendientes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pendientes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
}

.admin-details {
  margin: 0 0 18px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.admin-details > summary {
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
}

.admin-details[open] > summary {
  border-bottom: 1px solid var(--color-border-soft);
}

.admin-details > .admin-form {
  margin: 0;
  border: none;
  box-shadow: none;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-toolbar .search-bar {
  flex: 1 1 280px;
  min-width: 0;
  height: 42px;
}

.admin-toolbar .input--inline {
  flex: 0 1 auto;
  max-width: 100%;
}

.admin-mas {
  display: block;
  margin: 14px auto 0;
}

/* ---------------- Vender: publicar gratis y administrar mis publicaciones (2026-10-25) ---------------- */
.field-label {
  font-size: 0.82rem;
  font-weight: 600;
}

/* Tarjeta de un anuncio con variantes */
.card__opciones {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.card__desde {
  font-size: 0.74rem;
  color: var(--color-muted);
  margin-bottom: -4px;
}

.card__ver {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

/* Elegir talla, color… en la página del producto */
.opciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 4px;
}

.opciones__nombre {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  color: var(--color-muted);
}

.opciones__nombre strong {
  color: var(--color-text);
}

.opciones__valores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opcion {
  min-width: 44px;
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.opcion:hover {
  border-color: var(--color-primary);
}

.opcion.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.opcion--agotada {
  color: var(--color-muted);
  text-decoration: line-through;
  background: #f5f6f7;
}

/* Lista de publicaciones (la del vendedor y la del administrador) */
.pub-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pub-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  grid-template-areas:
    "foto info precio"
    "acciones acciones acciones";
  gap: 10px 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.pub-row__foto {
  grid-area: foto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: linear-gradient(135deg, #f0f2f5, #e7f3ff);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.pub-row__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pub-row__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.pub-row__titulo {
  overflow-wrap: anywhere;
}

.pub-row__meta {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.pub-row__motivo {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--color-danger);
}

.pub-row__precio {
  grid-area: precio;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.pub-row__oferta {
  font-size: 0.74rem;
  color: var(--color-accent-dark);
  font-weight: 700;
}

.pub-row__acciones {
  grid-area: acciones;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pub-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: #f0f2f5;
  color: var(--color-muted);
}

.pub-estado--activa {
  background: #e6f6e1;
  color: var(--color-accent-dark);
}

.pub-estado--revision {
  background: #fff4d6;
  color: #8a6100;
}

.pub-estado--rechazada {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* El asistente de 3 pasos */
.pub-pasos {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.pub-pasos li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: #f0f2f5;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.pub-pasos li span {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-border);
  color: #fff;
  font-size: 0.78rem;
}

.pub-pasos li.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.pub-pasos li.is-active span,
.pub-pasos li.is-hecho span {
  background: var(--color-primary);
}

.pub-condicion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pub-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 6px 0 10px;
}

.pub-foto {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #f5f6f7;
}

.pub-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pub-foto.is-principal {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.pub-foto--cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.pub-foto__tag {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.pub-foto__btn,
.pub-foto__quitar {
  position: absolute;
  top: 4px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.pub-foto__quitar {
  right: 4px;
}

.pub-foto__btn {
  left: 4px;
}

.pub-variantes {
  padding: 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: #fafbfc;
}

.pub-opcion {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 2.4fr) auto;
  gap: 8px;
  margin-bottom: 8px;
}

.pub-variantes__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}

.pub-tabla input {
  min-width: 80px;
}

.pub-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 560px) {
  .pub-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "foto info"
      "precio precio"
      "acciones acciones";
  }

  .pub-row__foto {
    width: 56px;
    height: 56px;
  }

  .pub-row__precio {
    align-items: flex-start;
    text-align: left;
  }

  .pub-pasos li {
    font-size: 0.75rem;
    padding: 6px;
  }

  .pub-opcion {
    grid-template-columns: 1fr auto;
  }

  .pub-opcion input[data-campo="valores"] {
    grid-column: 1 / -1;
    order: 3;
  }
}

#pubFotoBtn {
  align-self: flex-start;
}

.pub-comision {
  margin: 8px 0 14px;
  max-width: 520px;
}

.pub-comision__fila {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pub-comision__fila input {
  width: 110px;
}

/* Vista previa de una publicación que todavía no es pública (dueño y administrador) */
.vista-previa {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #f1c761;
  border-radius: var(--radius-sm);
  background: #fff8e1;
  font-size: 0.9rem;
}

.vista-previa p {
  margin: 0 0 10px;
}

.vista-previa__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* «Continuar con Google» en Ingresar / Crear cuenta */
.google-box {
  padding: 14px 16px 0;
}

.google-box__btn {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.google-box__o {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.google-box__o::before,
.google-box__o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-soft);
}

#adminGoogleId {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 460px;
}

/* Venta directa: sin carrito, se contacta al vendedor */
.card__directo {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.contacto-vendedor {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #f7fbff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contacto-vendedor p {
  margin: 0;
  font-size: 0.9rem;
}

.contacto-datos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contacto-datos a:not(.btn) {
  font-weight: 700;
}

.contacto-vendedor .btn {
  text-decoration: none;
  text-align: center;
}

/* Mensajes: el chat de cada compra directa (comprador ↔ vendedor) */
.tratos__cols {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.tratos__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.tratos__tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.tratos__tab.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tratos__n,
.trato-item__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.tratos__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
}

.trato-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.trato-item:hover {
  border-color: var(--color-primary);
}

.trato-item.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.trato-item__img,
.trato__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 1.4rem;
  overflow: hidden;
}

.trato-item__img img,
.trato__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trato-item__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.trato-item__txt strong,
.trato-item__otro,
.trato-item__ultimo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trato-item__txt strong {
  font-size: 0.9rem;
}

.trato-item__otro {
  font-size: 0.76rem;
  color: var(--color-muted);
}

.trato-item__ultimo {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.trato-item__lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.tratos__elige {
  padding: 40px 12px;
}

.trato {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.trato__cab {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.trato__volver {
  display: none;
  grid-column: 1 / -1;
  justify-self: start;
}

.trato__titulos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trato__titulo a {
  color: inherit;
  text-decoration: none;
}

.trato__titulo a:hover {
  text-decoration: underline;
}

.trato__meta {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.trato__contacto {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: #f7fbff;
  border: 1px solid var(--color-border-soft);
  font-size: 0.86rem;
}

.trato__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.trato__acciones:empty {
  display: none;
}

.trato__gracias {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.trato__mensajes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 46vh;
  min-height: 240px;
  overflow-y: auto;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.msg {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.msg p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}

.msg time {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--color-muted);
  text-align: right;
}

.msg--mio {
  align-self: flex-end;
  background: var(--color-primary-soft);
  border-bottom-right-radius: 4px;
}

.msg--otro {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.msg--sistema {
  align-self: center;
  max-width: 94%;
  background: transparent;
  box-shadow: none;
  text-align: center;
  color: var(--color-muted);
}

.msg--sistema time {
  text-align: center;
}

.trato__form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.trato__texto {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 140px;
  resize: vertical;
}

@media (max-width: 760px) {
  .tratos__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En el celular se ve una cosa a la vez: la lista, o la conversación con un botón para volver. */
  .tratos--abierto .tratos__lista-col {
    display: none;
  }

  .tratos:not(.tratos--abierto) .tratos__chat-col {
    display: none;
  }

  .trato__volver {
    display: inline-flex;
  }

  .trato__mensajes {
    height: 52vh;
  }

  .msg {
    max-width: 90%;
  }
}

/* Visitas y ventas de un anuncio: solo las ve su dueño y el administrador */
.pdetail__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 8px 0;
  padding: 8px 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: #fafbfc;
  font-size: 0.86rem;
}

/* Insignia «Usuario verificado» */
.insignia-verificado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: #e6f6e1;
  color: var(--color-accent-dark);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: help;
}

.mmenu__perfil .insignia-verificado {
  margin-top: 4px;
}

.vendedor-card .insignia-verificado,
.spage__cab .insignia-verificado {
  margin: 2px 0;
}

/* Mi perfil */
.perfil__card {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.perfil__card .section__head {
  margin-bottom: 4px;
}

.perfil__titulo {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.perfil__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.perfil__verif {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #f7f9fb;
  font-size: 0.9rem;
}

.perfil__verif p {
  margin: 0 0 4px;
}

.perfil__ok {
  color: var(--color-accent-dark);
}

.perfil__reqs {
  margin: 6px 0;
  padding-left: 0;
  list-style: none;
}

.perfil__req--ok {
  color: var(--color-accent-dark);
  font-weight: 700;
}

.perfil__req--falta {
  color: var(--color-muted);
}

.perfil__check {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.9rem;
}

.perfil__dirform {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-soft);
}

.dir-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.dir-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

.dir-item--pred {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dir-item__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dir-item__calle {
  overflow-wrap: anywhere;
}

.dir-item__meta {
  font-size: 0.82rem;
  color: var(--color-muted);
}

.dir-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.dir-tag {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: #eef0f3;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted);
}

.dir-tag--pred {
  background: var(--color-primary);
  color: #fff;
}

.dir-item__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

/* Página del producto: ventas, vendedor y más anuncios suyos */
.pdetail__vendidos--cero {
  color: var(--color-muted);
}

.pdetail__info .card__location a.card__vendedor {
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.pdetail__info .card__location a.card__vendedor:hover {
  text-decoration: underline;
}

.pdetail__mas-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 10px;
}

.pdetail__mas-cab h3 {
  margin: 0;
}

.pdetail__mas-ver {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

/* =============================================================
   Pulido visual (2026-10-26): banner de bienvenida, cabecera más compacta en el celular, tarjetas más densas y legibles,
   barra de compra fija en la ficha del producto y detalles de interacción. Solo estilos: no cambia ninguna función.
   ============================================================= */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card,
  .chip,
  .btn {
    transition: none !important;
  }
}

::selection {
  background: var(--color-primary-soft);
}

:focus-visible {
  outline: 3px solid rgba(24, 119, 242, 0.45);
  outline-offset: 2px;
}

/* --- Banner de bienvenida de la tienda --- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: center;
  margin: 0 0 22px;
  padding: 22px 26px;
  border-radius: 16px;
  color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 196, 0, 0.32) 0%, rgba(255, 196, 0, 0) 55%), linear-gradient(120deg, #0a5dc2 0%, #1877f2 100%);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.22);
  overflow: hidden;
}

.hero__titulo {
  margin: 0 0 4px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero__sub {
  margin: 0;
  max-width: 46ch;
  font-size: 0.97rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero .btn--primary {
  background: #ffc400;
  border-color: #ffc400;
  color: #1c1e21;
}

.hero .btn--primary:hover:not(:disabled) {
  background: #ffd23d;
  border-color: #ffd23d;
}

.hero .btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.hero .btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.24);
}

.hero__ventajas {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__ventajas li {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Tarjetas de producto --- */
.card {
  border-radius: 14px;
}

.card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card__price {
  font-size: 1.4rem;
  color: var(--color-text);
}

/* «N disponibles» deja de ser una píldora verde en cada tarjeta: solo llama la atención cuando quedan pocos o no hay. */
.stock-pill--ok {
  padding: 0;
  background: transparent;
  color: #3f7d34;
  font-weight: 600;
}

.card__pagos {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-muted);
}

.card__envio {
  font-weight: 700;
}

.card__add {
  border-radius: 10px;
}

@media (max-width: 860px) {
  /* Quien solo ve «Comprador» (un visitante) no necesita una fila entera con ese único botón. */
  .panel-switch--solo {
    display: none;
  }
}

@media (max-width: 560px) {
  .promo-strip {
    padding: 5px 10px;
    font-size: 0.76rem;
  }

  .app-header__inner {
    padding: 8px 14px;
    gap: 8px;
  }

  .brand {
    font-size: 1.12rem;
  }

  .brand__logo-img {
    height: 32px;
  }

  .market-nav__btn {
    padding: 9px 10px;
  }

  #shopView .section__head {
    flex-wrap: nowrap;
    align-items: baseline;
  }

  #shopView .section__title {
    margin-bottom: 8px;
    font-size: 1.1rem;
  }

  #shopView .section__hint {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .market-toolbar {
    gap: 10px;
    margin-bottom: 14px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 14px;
  }

  .hero__titulo {
    font-size: 1.25rem;
  }

  .hero__sub {
    font-size: 0.88rem;
  }

  .hero__acciones .btn {
    flex: 1 1 auto;
  }

  .hero__ventajas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -2px;
    padding: 0 2px 2px;
  }

  .hero__ventajas::-webkit-scrollbar {
    display: none;
  }

  .card__body {
    padding: 10px 11px 12px;
    gap: 5px;
  }

  .card__name {
    font-size: 0.9rem;
    line-height: 1.28;
  }

  .card__category {
    font-size: 0.66rem;
  }

  .card__price {
    font-size: 1.25rem;
  }

  .card__actions {
    margin-top: 6px;
  }

  /* Ficha del producto: la compra queda fija abajo mientras se lee la página (como en Mercado Libre). */
  .pdetail__comprar {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin: 12px -16px 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-soft);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
  }
}

@media (max-width: 560px) {
  .hero {
    gap: 10px;
    padding: 14px;
  }

  .hero__titulo {
    font-size: 1.15rem;
  }

  .hero__sub {
    font-size: 0.84rem;
    line-height: 1.4;
  }

  .hero__acciones .btn {
    padding: 9px 14px;
    font-size: 0.9rem;
  }

  .hero__ventajas li {
    padding: 4px 10px;
    font-size: 0.74rem;
  }
}

@media (max-width: 560px) {
  /* La barra de compra fija: cantidad y botón en la misma fila. */
  .card__actions.pdetail__comprar {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }

  .pdetail__comprar .qty-input {
    flex: 0 0 64px;
    width: 64px;
  }

  .pdetail__comprar .card__add {
    flex: 1;
    min-height: 46px;
    font-size: 1rem;
  }
}

/* Fotos del anuncio: zona para arrastrar y soltar (PC) y botón «Tomar foto» (celular) */
.pub-zona-fotos {
  position: relative;
  margin-top: 6px;
  padding: 12px;
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  background: #fafbfc;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pub-zona-fotos .pub-fotos {
  margin: 0 0 8px;
}

.pub-zona-fotos__ayuda {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.pub-zona-fotos__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pub-zona-fotos__soltar {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(231, 243, 255, 0.94);
  color: var(--color-primary);
  font-size: 1.05rem;
  font-weight: 800;
  pointer-events: none;
}

.pub-zona-fotos.is-arrastrando {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.pub-zona-fotos.is-arrastrando .pub-zona-fotos__soltar {
  display: flex;
}

/* En un dispositivo táctil no se arrastra ni se pega con Ctrl + V: esas pistas sobran. */
@media (pointer: coarse) {
  .pub-zona-fotos__pc {
    display: none;
  }
}

@media (max-width: 560px) {
  .pub-zona-fotos__botones .btn {
    flex: 1 1 100%;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ===== Tiendas personalizadas (2026-10-26): portada, logo, contactos, redes, galería, directorio y editor ===== */
.spage__portada {
  width: 100%;
  aspect-ratio: 4 / 1;
  margin-top: 8px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #cfe3ff, #e9f1fc 55%, #d9f2d3);
}

.spage__portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spage__portada--vacia {
  aspect-ratio: 6 / 1;
}

.spage__cab--tienda {
  position: relative;
  margin-top: -34px;
  padding: 0 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.spage__cab--tienda .spage__avatar {
  width: 84px;
  height: 84px;
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow);
  font-size: 1.7rem;
}

.spage__avatar--logo {
  object-fit: cover;
  background: var(--color-surface);
}

.spage__titulo {
  flex: 1 1 200px;
  min-width: 0;
  padding-bottom: 4px;
}

.spage__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 6px;
}

.spage__tienda {
  margin: 6px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.spage__descripcion {
  margin: 0 0 12px;
  font-size: 0.98rem;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.spage__contactos,
.spage__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.spage__contactos .btn {
  text-decoration: none;
}

.spage__datos a {
  color: var(--color-primary);
}

.spage__datos {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.spage__red {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.spage__red:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.spage__galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.spage__galeria-foto {
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  background: #f5f6f7;
  cursor: zoom-in;
}

.spage__galeria-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.spage__galeria-foto:hover img {
  transform: scale(1.04);
}

/* Directorio de tiendas */
.dir__cab {
  margin: 12px 0;
}

.dir__titulo {
  margin: 0;
  font-size: 1.5rem;
}

.dir__sub {
  margin: 4px 0 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.dir__herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.dir__herramientas .search-bar {
  flex: 1 1 260px;
}

.tiendas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.tiendas-grid .empty {
  grid-column: 1 / -1;
}

.tienda-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tienda-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.tienda-card__portada {
  display: block;
  height: 92px;
  background: linear-gradient(135deg, #cfe3ff, #e9f1fc 55%, #d9f2d3);
}

.tienda-card__portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tienda-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: -29px 0 2px 14px;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.tienda-card__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tienda-card__nombre,
.tienda-card__rubro,
.tienda-card__desc,
.tienda-card__meta {
  padding: 0 14px;
}

.tienda-card__nombre {
  font-size: 1.05rem;
}

.tienda-card__rubro {
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.tienda-card__desc {
  color: var(--color-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tienda-card__meta {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 0.8rem;
}

/* Invitación a armar la tienda (en «Vender» y al pie del directorio) */
.tienda-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #cce4fd;
  border-radius: var(--radius);
  background: var(--color-primary-soft);
}

.tienda-promo > div {
  flex: 1 1 260px;
}

.tienda-promo p {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #0a5dc2;
}

.dir__cta {
  margin: 22px 0 0;
}

.notice--aviso {
  background: #fff6e0;
  border-color: #f3dc9b;
  color: #7a5a00;
}

/* Editor «Mi tienda» */
.tienda-compartir {
  margin: 12px 0 16px;
}

.tienda-compartir .pub-comision__fila {
  flex-wrap: wrap;
}

.tienda-compartir .pub-comision__fila input {
  flex: 1 1 240px;
  width: auto;
  min-width: 0;
}

.tienda-portada {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 1;
  margin: 6px 0 8px;
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fafbfc;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.tienda-portada--con {
  border-style: solid;
  border-color: var(--color-border-soft);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.tienda-portada--con.is-arrastrando {
  cursor: grabbing;
}

.tienda-portada img {
  -webkit-user-drag: none;
  user-select: none;
}

.tienda-ajuste {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
}

.tienda-ajuste .field-hint {
  margin: 0;
}

.tienda-ajuste__fila {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.tienda-ajuste__fila span {
  flex: 0 0 150px;
}

.tienda-ajuste__fila input {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--color-primary);
}

.tienda-portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tienda-logo-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.tienda-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border: 2px dashed var(--color-border);
  border-radius: 50%;
  overflow: hidden;
  background: #fafbfc;
  color: var(--color-muted);
  font-size: 1.6rem;
}

.tienda-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tienda-grupo {
  margin: 6px 0 14px;
  padding: 12px 14px 4px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
}

.tienda-grupo legend {
  padding: 0 6px;
  font-weight: 700;
}

.tienda-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 14px;
}

.admin-tiendas__cab {
  margin-top: 26px;
}

@media (max-width: 560px) {
  .spage__portada {
    aspect-ratio: 2 / 1;
  }

  .spage__cab--tienda {
    margin-top: -28px;
  }

  .spage__cab--tienda .spage__avatar {
    width: 72px;
    height: 72px;
  }

  .tienda-portada {
    aspect-ratio: 2 / 1;
  }

  .tiendas-grid {
    grid-template-columns: 1fr;
  }

  .tienda-logo-fila .btn,
  .tienda-promo .btn {
    flex: 1 1 100%;
  }
}

/* ===== Plantillas y estilos de la página de la tienda (2026-10-26) =====
   Cada plantilla vuelve a definir las variables de color del sitio DENTRO de la página de la tienda (.spage-tema): así todo lo de adentro (botones, tarjetas,
   opiniones…) se viste solo. El color de acento y la letra van después para ganarle a la plantilla cuando el dueño los elige. */
.spage-tema {
  --acento-rgb: 24, 119, 242;
  --color-primary-soft: rgba(var(--acento-rgb), 0.12);
}

.spage-tema--moderna,
.spage-tema--oscura,
.spage-tema--boutique,
.spage-tema--fresca,
.spage-tema--minimal {
  padding: 14px;
  border-radius: 18px;
  background: var(--color-bg);
  color: var(--color-text);
}

.spage-tema--moderna {
  --color-bg: #eef1fb;
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --acento-rgb: 79, 70, 229;
  --radius: 16px;
  --radius-sm: 12px;
}

.spage-tema--oscura {
  --color-bg: #0b1220;
  --color-surface: #162033;
  --color-text: #e8eef9;
  --color-muted: #9aa8c0;
  --color-border: #2c3a55;
  --color-border-soft: #233048;
  --color-primary: #2f81f7;
  --color-primary-hover: #1f6feb;
  --acento-rgb: 47, 129, 247;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.spage-tema--boutique {
  --color-bg: #f7efe3;
  --color-surface: #fffaf2;
  --color-text: #3a2d28;
  --color-muted: #7d6b5d;
  --color-border: #dccbb6;
  --color-border-soft: #e8dac8;
  --color-primary: #a4472a;
  --color-primary-hover: #8a3a21;
  --acento-rgb: 164, 71, 42;
  --radius: 6px;
  --radius-sm: 4px;
  font-family: Georgia, "Times New Roman", Cambria, serif;
}

.spage-tema--fresca {
  --color-bg: #e7f6ec;
  --color-text: #143428;
  --color-muted: #4f7566;
  --color-border: #bfe3cd;
  --color-border-soft: #d3eddd;
  --color-primary: #198754;
  --color-primary-hover: #157347;
  --acento-rgb: 25, 135, 84;
  --radius: 20px;
  --radius-sm: 14px;
  font-family: "Trebuchet MS", "Segoe UI", ui-rounded, "Nunito", system-ui, sans-serif;
}

.spage-tema--minimal {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-muted: #6b6b6b;
  --color-border: #111111;
  --color-border-soft: #111111;
  --color-primary: #111111;
  --color-primary-hover: #000000;
  --acento-rgb: 17, 17, 17;
  --radius: 2px;
  --radius-sm: 0;
  --shadow: none;
  border: 2px solid #111111;
  border-radius: 0;
}

.spage-tema--minimal .pdetail__bloque > h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.spage-tema--minimal .spage__portada {
  border-radius: 0;
}

.spage-tema--minimal .spage__avatar,
.spage-tema--minimal .spage__avatar--logo {
  border-radius: 0;
}

.spage-tema--minimal .spage__nombre {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Moderna: todo centrado, con el logo grande */
.spage-tema--moderna .spage__cab--tienda {
  flex-direction: column;
  align-items: center;
  margin-top: -52px;
  text-align: center;
}

.spage-tema--moderna .spage__cab--tienda .spage__avatar {
  width: 108px;
  height: 108px;
}

.spage-tema--moderna .spage__titulo {
  flex: none;
}

.spage-tema--moderna .spage__acciones,
.spage-tema--moderna .spage__contactos,
.spage-tema--moderna .spage__redes {
  justify-content: center;
}

.spage-tema--moderna .spage__tienda {
  text-align: center;
}

.spage-tema--moderna .spage__datos {
  justify-items: center;
}

/* Color de acento elegido por el dueño (le gana al de la plantilla) */
.spage-tema.spage-tema--color-azul {
  --color-primary: #1877f2;
  --color-primary-hover: #166fe5;
  --acento-rgb: 24, 119, 242;
}

.spage-tema.spage-tema--color-verde {
  --color-primary: #198754;
  --color-primary-hover: #157347;
  --acento-rgb: 25, 135, 84;
}

.spage-tema.spage-tema--color-rojo {
  --color-primary: #e03131;
  --color-primary-hover: #c92a2a;
  --acento-rgb: 224, 49, 49;
}

.spage-tema.spage-tema--color-naranja {
  --color-primary: #c9460c; /* un naranja más oscuro que el de antes (#e8590c) para que el texto blanco se lea bien */
  --color-primary-hover: #ad3b0a;
  --acento-rgb: 201, 70, 12;
}

.spage-tema.spage-tema--color-morado {
  --color-primary: #7048e8;
  --color-primary-hover: #5f3dc4;
  --acento-rgb: 112, 72, 232;
}

.spage-tema.spage-tema--color-rosado {
  --color-primary: #d6336c;
  --color-primary-hover: #c2255c;
  --acento-rgb: 214, 51, 108;
}

.spage-tema.spage-tema--color-turquesa {
  --color-primary: #0c8599;
  --color-primary-hover: #0b7285;
  --acento-rgb: 12, 133, 153;
}

.spage-tema.spage-tema--color-grafito {
  --color-primary: #343a40;
  --color-primary-hover: #212529;
  --acento-rgb: 52, 58, 64;
}

.spage-tema--oscura .spage__datos a,
.spage-tema--oscura .card__vendedor {
  color: #8ab4ff;
}

.spage-tema--oscura.spage-tema--color-grafito {
  --color-primary: #64748b; /* el grafito de verdad se pierde sobre el fondo oscuro */
  --color-primary-hover: #475569;
  --acento-rgb: 100, 116, 139;
}

/* Tipo de letra elegido por el dueño */
.spage-tema.spage-tema--fuente-sans {
  font-family: var(--font);
}

.spage-tema.spage-tema--fuente-serif {
  font-family: Georgia, "Times New Roman", Cambria, serif;
}

.spage-tema.spage-tema--fuente-redondeada {
  font-family: "Trebuchet MS", "Segoe UI", ui-rounded, "Nunito", system-ui, sans-serif;
}

/* Editor: tarjetas de plantilla, colores y vista previa */
.tienda-plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}

.tienda-plantilla {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 2px solid var(--color-border-soft);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tienda-plantilla:hover {
  border-color: var(--color-border);
}

.tienda-plantilla.is-activa {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.tienda-plantilla strong {
  font-size: 0.92rem;
}

.tienda-plantilla small {
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.tienda-plantilla .tienda-plantilla__mini.spage-tema {
  position: relative;
  display: block;
  height: 78px;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  overflow: hidden;
}

.tienda-plantilla__mini i {
  position: absolute;
  display: block;
}

.tienda-plantilla__portada {
  inset: 0 0 auto 0;
  height: 28px;
  background: var(--color-primary);
  opacity: 0.85;
}

.tienda-plantilla__logo {
  left: 10px;
  top: 17px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
}

.tienda-plantilla__linea {
  left: 10px;
  top: 46px;
  width: 58%;
  height: 5px;
  border-radius: 3px;
  background: var(--color-muted);
  opacity: 0.5;
}

.tienda-plantilla__linea--corta {
  top: 56px;
  width: 36%;
}

.tienda-plantilla__boton {
  right: 10px;
  bottom: 8px;
  width: 26px;
  height: 9px;
  border-radius: 6px;
  background: var(--color-primary);
}

.tienda-plantilla .spage-tema--moderna .tienda-plantilla__logo,
.tienda-plantilla__mini.spage-tema--moderna .tienda-plantilla__logo {
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  top: 14px;
}

.tienda-plantilla__mini.spage-tema--moderna .tienda-plantilla__linea {
  left: 21%;
}

.tienda-plantilla__mini.spage-tema--minimal .tienda-plantilla__logo {
  border-radius: 0;
}

.tienda-colores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.tienda-color {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-border);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.tienda-color.is-activa {
  box-shadow: 0 0 0 3px var(--color-primary);
}

.tienda-color--auto {
  background: conic-gradient(#1877f2, #198754, #e8590c, #d6336c, #7048e8, #1877f2);
}

.tienda-color--azul {
  background: #1877f2;
}

.tienda-color--verde {
  background: #198754;
}

.tienda-color--rojo {
  background: #e03131;
}

.tienda-color--naranja {
  background: #e8590c;
}

.tienda-color--morado {
  background: #7048e8;
}

.tienda-color--rosado {
  background: #d6336c;
}

.tienda-color--turquesa {
  background: #0c8599;
}

.tienda-color--grafito {
  background: #343a40;
}

.tienda-vista {
  margin: 6px 0 12px;
  padding: 10px;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  pointer-events: none;
  overflow: hidden;
}

@media (max-width: 560px) {
  .tienda-plantillas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spage-tema--moderna .spage__cab--tienda {
    margin-top: -40px;
  }
}

/* Aplicar el estilo y vista previa completa de la tienda (sin guardar) */
.tienda-estilo__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 6px;
}

.tienda-vista-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--color-bg);
}

.tienda-vista-overlay[hidden] {
  display: none;
}

.tienda-vista-overlay__barra {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1c761;
  background: #fff6e0;
}

.tienda-vista-overlay__barra p {
  flex: 1 1 260px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #7a5a00;
}

.tienda-vista-overlay__pagina {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 16px 48px;
  pointer-events: none; /* es solo para mirar: nada de lo que se ve se puede tocar */
}

@media (max-width: 560px) {
  .tienda-estilo__acciones .btn,
  .tienda-vista-overlay__barra .btn {
    flex: 1 1 100%;
  }
}

/* ===== Plantillas nuevas (2026-10-26), con ideas de los estilos que usan las tiendas en línea: banner de foto con el texto encima, colores fuertes con sombras
   marcadas y negro de alto contraste ===== */

/* Portada completa: la foto es el fondo de toda la cabecera y el nombre va encima, sobre un degradado oscuro */
.spage__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  margin-top: 8px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), #0b1220);
}

.spage__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spage__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.05) 100%);
}

.spage__cab.spage__cab--hero {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 20px;
  color: #ffffff;
  align-items: flex-end;
}

.spage__cab--hero .spage__nombre {
  color: #ffffff;
  font-size: 1.9rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.spage__cab--hero .spage__sub {
  color: rgba(255, 255, 255, 0.9);
}

.spage__cab--hero .spage__avatar {
  border-color: #ffffff;
}

/* Vibrante: colores fuertes, bordes marcados y sombras duras */
.spage-tema--vibrante {
  --color-bg: #fff1d0;
  --color-surface: #ffffff;
  --color-text: #1b1b1b;
  --color-muted: #545454;
  --color-border: #1b1b1b;
  --color-border-soft: #1b1b1b;
  --color-primary: #e5482d;
  --color-primary-hover: #c93a20;
  --acento-rgb: 229, 72, 45;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 4px 4px 0 #1b1b1b;
  border: 2px solid #1b1b1b;
  font-family: "Trebuchet MS", "Segoe UI", ui-rounded, system-ui, sans-serif;
}

.spage-tema--vibrante .spage__portada {
  border: 2px solid #1b1b1b;
  box-shadow: 4px 4px 0 #1b1b1b;
}

.spage-tema--vibrante .spage__cab--tienda {
  margin-top: 16px;
  padding: 14px 16px;
  border: 2px solid #1b1b1b;
  border-radius: var(--radius);
  background: var(--color-primary);
  box-shadow: 4px 4px 0 #1b1b1b;
}

.spage-tema--vibrante .spage__cab--tienda .spage__avatar {
  width: 76px;
  height: 76px;
  border-color: #1b1b1b;
}

.spage-tema--vibrante .spage__nombre {
  color: #ffffff;
  font-weight: 900;
}

.spage-tema--vibrante .spage__sub {
  color: rgba(255, 255, 255, 0.94);
}

.spage-tema--vibrante .spage__cab--tienda .btn--primary {
  border-color: #1b1b1b;
  background: #1b1b1b;
  color: #ffffff;
}

.spage-tema--vibrante .spage__tienda,
.spage-tema--vibrante .spage__stat {
  box-shadow: 4px 4px 0 #1b1b1b;
}

/* Urbana: negro y amarillo, letras fuertes y esquinas rectas */
.spage-tema--urbana {
  --color-bg: #0a0a0a;
  --color-surface: #161616;
  --color-text: #f5f5f5;
  --color-muted: #a8a8a8;
  --color-border: #3a3a3a;
  --color-border-soft: #2a2a2a;
  --color-primary: #ffd60a;
  --color-primary-hover: #e6c109;
  --acento-rgb: 255, 214, 10;
  --radius: 2px;
  --radius-sm: 0;
  --shadow: none;
  padding: 14px;
  border-top: 6px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}

.spage-tema--urbana.spage-tema--color-auto .btn--primary {
  color: #111111; /* letra negra sobre el amarillo */
}

.spage-tema--urbana .spage__nombre,
.spage-tema--urbana .pdetail__bloque > h3 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 900;
}

.spage-tema--urbana .spage__avatar,
.spage-tema--urbana .spage__portada {
  border-radius: 0;
}

.spage-tema--urbana .spage__datos a,
.spage-tema--urbana .card__vendedor {
  color: #ffd60a; /* el enlace se lee sobre el fondo negro sea cual sea el color de acento elegido */
}

/* Miniaturas de las plantillas nuevas */
.tienda-plantilla__mini.spage-tema--hero .tienda-plantilla__portada {
  height: 100%;
  background: linear-gradient(to top, #0b1220, var(--color-primary));
  opacity: 1;
}

.tienda-plantilla__mini.spage-tema--hero .tienda-plantilla__logo {
  top: auto;
  bottom: 12px;
}

.tienda-plantilla__mini.spage-tema--hero .tienda-plantilla__linea {
  top: auto;
  bottom: 22px;
  left: 40px;
  background: #ffffff;
  opacity: 0.9;
}

.tienda-plantilla__mini.spage-tema--hero .tienda-plantilla__linea--corta {
  bottom: 12px;
}

.tienda-plantilla__mini.spage-tema--hero .tienda-plantilla__boton {
  display: none;
}

.tienda-plantilla__mini.spage-tema--vibrante .tienda-plantilla__portada {
  border-bottom: 2px solid #1b1b1b;
  opacity: 1;
}

.tienda-plantilla__mini.spage-tema--vibrante .tienda-plantilla__boton {
  background: #1b1b1b;
}

.tienda-plantilla__mini.spage-tema--urbana .tienda-plantilla__portada {
  height: 12px;
  opacity: 1;
}

.tienda-plantilla__mini.spage-tema--urbana .tienda-plantilla__logo {
  top: 22px;
  border-radius: 0;
}

@media (max-width: 560px) {
  .spage__hero {
    min-height: 260px;
  }

  .spage__cab--hero .spage__nombre {
    font-size: 1.5rem;
  }
}

/* ===== Secciones personalizables de la tienda (2026-10-27): anuncio, preguntas frecuentes, botón flotante y editor ===== */
.spage__promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 8px 0 4px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
}

.spage__promo-texto {
  flex: 1 1 240px;
  overflow-wrap: anywhere;
}

.spage__promo-texto small {
  display: inline-block;
  margin-left: 6px;
  font-weight: 600;
  opacity: 0.9;
}

.spage__promo-btn {
  flex: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--color-primary-hover);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.spage-tema--urbana.spage-tema--color-auto .spage__promo {
  color: #111111;
}

.spage-tema--urbana.spage-tema--color-auto .spage__promo-btn {
  background: #111111;
  color: #ffd60a;
}

.spage-tema--vibrante .spage__promo {
  border: 2px solid #1b1b1b;
  box-shadow: 4px 4px 0 #1b1b1b;
}

.spage__faq {
  display: grid;
  gap: 8px;
}

.spage__faq-item {
  padding: 0 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.spage__faq-item summary {
  padding: 12px 0;
  font-weight: 700;
  cursor: pointer;
}

.spage__faq-item p {
  margin: 0 0 12px;
  color: var(--color-muted);
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.spage__flotante {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: #25d366;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  color: #0b3d1d;
  font-weight: 800;
  text-decoration: none;
}

.spage__flotante:hover {
  background: #20bd5a;
}

/* Editor de las secciones */
.tienda-secciones .check {
  margin: 4px 0;
}

.tienda-destacados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.tienda-destacado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
}

.tienda-destacado.is-activo {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.tienda-destacado img,
.tienda-destacado__ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: #f0f2f5;
  text-align: center;
  line-height: 40px;
}

.tienda-destacado span:last-child {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 600;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tienda-faq {
  display: grid;
  gap: 10px;
  margin: 6px 0 8px;
}

.tienda-faq-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
}

.tienda-faq-fila [data-faq] {
  grid-column: 1;
}

.tienda-faq-fila button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.tienda-orden {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.tienda-orden__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-surface);
  font-weight: 600;
}

.tienda-orden__botones {
  display: flex;
  gap: 6px;
}

@media (max-width: 560px) {
  .spage__promo-btn {
    flex: 1 1 100%;
    text-align: center;
  }

  .spage__flotante {
    left: 12px;
    bottom: 12px;
  }
}

/* ===== Plantillas Editorial y Kawaii (2026-10-27) =====
   Rehechas desde cero con nuestro CSS a partir de la IDEA de dos plantillas descargadas (una galería oscura de fotos grandes numeradas y una sala 3D en pasteles):
   no se copió su código ni sus imágenes ni se cargan sus fuentes (la política de seguridad solo deja las del sistema). */

/* Editorial: galería oscura, fotos grandes numeradas, letra con serifa y rótulos en mayúsculas */
.spage-tema--editorial {
  --color-bg: #0d0d0d;
  --color-surface: #161616;
  --color-text: #f2f0eb;
  --color-muted: #a29e96;
  --color-border: #3a3a3a;
  --color-border-soft: #262626;
  --color-primary: #f2f0eb;
  --color-primary-hover: #ffffff;
  --acento-rgb: 242, 240, 235;
  --radius: 0;
  --radius-sm: 0;
  --radius-pill: 0;
  --shadow: none;
  padding: 18px;
  border: 1px solid #2a2a2a;
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  counter-reset: seccion;
}

.spage-tema--editorial.spage-tema--color-auto .btn--primary,
.spage-tema--editorial.spage-tema--color-auto .spage__promo {
  color: #0d0d0d; /* letra oscura sobre el color claro de la plantilla */
}

.spage-tema--editorial.spage-tema--color-auto .spage__promo-btn {
  background: #0d0d0d;
  color: #f2f0eb;
}

.spage-tema--editorial .spage__hero {
  min-height: 440px;
  border-radius: 0;
}

.spage-tema--editorial .spage__hero::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.12) 100%);
}

.spage-tema--editorial .spage__cab--hero {
  padding: 26px;
}

.spage-tema--editorial .spage__cab--hero .spage__avatar {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
}

.spage-tema--editorial .spage__nombre {
  font-size: clamp(2.3rem, 8vw, 4.4rem);
  font-weight: 300;
  line-height: 0.98;
}

.spage-tema--editorial .spage__sub,
.spage-tema--editorial .pdetail__bloque > h3,
.spage-tema--editorial .spage__datos {
  font-family: "Roboto Mono", "Courier New", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spage-tema--editorial .spage__sub {
  font-size: 0.74rem;
}

.spage-tema--editorial .pdetail__bloque > h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-muted);
}

.spage-tema--editorial .pdetail__bloque > h3::before {
  counter-increment: seccion;
  content: counter(seccion, decimal-leading-zero);
  color: var(--color-text);
}

.spage-tema--editorial .pdetail__bloque > h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.spage-tema--editorial .spage__datos {
  font-size: 0.74rem;
}

.spage-tema--editorial .spage__descripcion {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.55;
}

.spage-tema--editorial .spage__galeria {
  grid-template-columns: 1fr;
  gap: 26px;
  counter-reset: placa;
}

.spage-tema--editorial .spage__galeria-foto {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 0;
  counter-increment: placa;
}

.spage-tema--editorial .spage__galeria-foto::after {
  content: counter(placa, decimal-leading-zero);
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: #ffffff;
  font-family: "Roboto Mono", "Courier New", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.spage-tema--editorial .spage__flotante {
  border-radius: 999px;
}

.spage-tema--editorial .spage__datos a,
.spage-tema--editorial .card__vendedor {
  color: #f2f0eb; /* los enlaces se leen sobre el fondo negro sea cual sea el color de acento elegido */
}

/* Kawaii: pastel, redondo y simpático */
.spage-tema--kawaii {
  --color-bg: #fff4f8;
  --color-surface: #ffffff;
  --color-text: #1f1b24;
  --color-muted: #6a6273;
  --color-border: #1f1b24;
  --color-border-soft: #e9dcf0;
  --color-primary: #d94c8c;
  --color-primary-hover: #c23a77;
  --acento-rgb: 217, 76, 140;
  --radius: 24px;
  --radius-sm: 16px;
  --shadow: 0 5px 0 rgba(31, 27, 36, 0.1);
  padding: 14px;
  border-radius: 30px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Trebuchet MS", "Segoe UI", ui-rounded, "Nunito", system-ui, sans-serif;
}

.spage-tema--kawaii .spage__portada {
  border: 3px solid #1f1b24;
  border-radius: 28px;
  background: linear-gradient(135deg, #ffd1dc, #dedafb 50%, #b4e8bd);
}

.spage-tema--kawaii .spage__cab--tienda .spage__avatar {
  border: 4px solid #1f1b24;
  background: #ffd1dc;
}

.spage-tema--kawaii .spage__nombre {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.spage-tema--kawaii .spage__tienda {
  border: 2px solid #1f1b24;
  background: #ffffff;
  box-shadow: 0 5px 0 #ffd1dc;
}

.spage-tema--kawaii .spage__stat {
  border: 2px solid #1f1b24;
  border-radius: 18px;
}

.spage-tema--kawaii .spage__stat:nth-child(1) {
  background: #ffe3ec;
}

.spage-tema--kawaii .spage__stat:nth-child(2) {
  background: #e3f7e8;
}

.spage-tema--kawaii .spage__stat:nth-child(3) {
  background: #ebe8fd;
}

.spage-tema--kawaii .spage__stat:nth-child(4) {
  background: #fff2cf;
}

.spage-tema--kawaii .spage__red {
  border: 2px solid #1f1b24;
  color: #1f1b24;
}

.spage-tema--kawaii .spage__red:nth-child(odd) {
  background: #ffe3ec;
}

.spage-tema--kawaii .spage__red:nth-child(even) {
  background: #e3f7e8;
}

.spage-tema--kawaii .spage__promo {
  border: 2px solid #1f1b24;
  background: #ebe8fd;
  box-shadow: 0 5px 0 #1f1b24;
  color: #1f1b24;
}

.spage-tema--kawaii .spage__promo-btn {
  background: #1f1b24;
  color: #ffffff;
}

.spage-tema--kawaii .spage__faq-item {
  border: 2px solid #1f1b24;
  border-radius: 18px;
}

.spage-tema--kawaii .pdetail__bloque > h3::before {
  content: "✿ ";
  color: var(--color-primary);
}

/* Miniaturas */
.tienda-plantilla__mini.spage-tema--editorial .tienda-plantilla__portada {
  height: 100%;
  background: linear-gradient(to top, #0d0d0d, #4a4a4a);
  opacity: 1;
}

.tienda-plantilla__mini.spage-tema--editorial .tienda-plantilla__logo,
.tienda-plantilla__mini.spage-tema--editorial .tienda-plantilla__boton {
  display: none;
}

.tienda-plantilla__mini.spage-tema--editorial .tienda-plantilla__linea {
  top: auto;
  bottom: 24px;
  left: 10px;
  height: 4px;
  background: #f2f0eb;
  opacity: 0.95;
}

.tienda-plantilla__mini.spage-tema--editorial .tienda-plantilla__linea--corta {
  bottom: 14px;
  height: 2px;
  opacity: 0.6;
}

.tienda-plantilla__mini.spage-tema--kawaii .tienda-plantilla__portada {
  background: linear-gradient(135deg, #ffd1dc, #dedafb 50%, #b4e8bd);
  opacity: 1;
}

.tienda-plantilla__mini.spage-tema--kawaii .tienda-plantilla__logo {
  border-color: #1f1b24;
  background: #ffd1dc;
}

.tienda-plantilla__mini.spage-tema--kawaii .tienda-plantilla__boton {
  background: #1f1b24;
}

@media (max-width: 560px) {
  .spage-tema--editorial {
    padding: 12px;
  }

  .spage-tema--editorial .spage__hero {
    min-height: 360px;
  }
}

/* ===== Ideas de las tiendas en línea (2026-10-27): ventajas, ofertas, botones de categoría, tamaño de tarjetas, alto de portada y estilo sugerido por rubro ===== */
.spage__ventajas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}

/* 4 ventajas: dos por fila en pantallas medianas y las cuatro juntas en las grandes (nunca 3 y una sola abajo) */
@media (min-width: 561px) {
  .spage__ventajas--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .spage__ventajas--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.spage__ventaja {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.spage__ventaja-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-primary-soft, rgba(var(--acento-rgb), 0.12));
  font-size: 1.3rem;
}

.spage__ventaja > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.spage__ventaja strong {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.spage__ventaja span:not(.spage__ventaja-ico) {
  font-size: 0.85rem;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.spage-tema--vibrante .spage__ventaja {
  border: 2px solid #1b1b1b;
  box-shadow: 4px 4px 0 #1b1b1b;
}

.spage-tema--kawaii .spage__ventaja {
  border: 2px solid #1f1b24;
  border-radius: 18px;
}

.spage-tema--kawaii .spage__ventaja:nth-child(4n + 1) {
  background: #ffe3ec;
}

.spage-tema--kawaii .spage__ventaja:nth-child(4n + 2) {
  background: #e3f7e8;
}

.spage-tema--kawaii .spage__ventaja:nth-child(4n + 3) {
  background: #ebe8fd;
}

.spage-tema--kawaii .spage__ventaja:nth-child(4n) {
  background: #fff2cf;
}

.spage-tema--kawaii .spage__ventaja-ico {
  background: #ffffff;
}

.spage-tema--kawaii .spage__ventaja strong {
  color: #1f1b24;
}

.spage-tema--kawaii .spage__ventaja span:not(.spage__ventaja-ico) {
  color: #4a4352;
}

.spage-tema--urbana .spage__ventaja,
.spage-tema--editorial .spage__ventaja {
  border-radius: 0;
}

/* Botones para ver los productos por categoría */
.spage__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.spage__cat {
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.spage__cat small {
  color: var(--color-muted);
  font-weight: 500;
}

.spage__cat:hover {
  border-color: var(--color-primary);
}

.spage__cat.is-activa {
  border-color: var(--color-primary);
  background: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 86%, #000);
  color: #ffffff;
}

.spage__cat.is-activa small {
  color: inherit;
  opacity: 0.85;
}

.spage-tema--urbana.spage-tema--color-auto .spage__cat.is-activa,
.spage-tema--editorial.spage-tema--color-auto .spage__cat.is-activa {
  color: #111111;
}

.spage-tema--editorial .spage__cat,
.spage-tema--urbana .spage__cat,
.spage-tema--minimal .spage__cat {
  border-radius: 0;
}

.spage-tema--kawaii .spage__cat {
  border: 2px solid #1f1b24;
}

.spage__prod {
  display: contents;
}

.spage__prod[hidden] {
  display: none;
}

/* Tamaño de las tarjetas de producto */
.spage-dens--compacta .grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.spage-dens--grande .grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}

/* Alto de la portada (la «media» es la de siempre) */
.spage-alto--baja .spage__portada {
  aspect-ratio: 7 / 1;
}

.spage-alto--alta .spage__portada {
  aspect-ratio: 5 / 2;
}

.spage-alto--baja .spage__hero {
  min-height: 190px;
}

.spage-alto--alta .spage__hero {
  min-height: 420px;
}

.spage-tema--editorial.spage-alto--baja .spage__hero {
  min-height: 280px;
}

.spage-tema--editorial.spage-alto--alta .spage__hero {
  min-height: 580px;
}

@media (max-width: 560px) {
  .spage-alto--baja .spage__portada {
    aspect-ratio: 3 / 1;
  }

  .spage-alto--alta .spage__portada {
    aspect-ratio: 4 / 3;
  }

  .spage-alto--baja .spage__hero {
    min-height: 170px;
  }

  .spage-alto--alta .spage__hero {
    min-height: 360px;
  }

  .spage-tema--editorial.spage-alto--baja .spage__hero {
    min-height: 240px;
  }

  .spage-tema--editorial.spage-alto--alta .spage__hero {
    min-height: 460px;
  }
}

/* Editor: ventajas y estilo sugerido */
.tienda-estilo .tienda-grilla {
  margin-top: 12px;
}

.tienda-ben {
  display: grid;
  gap: 10px;
  margin: 6px 0 8px;
}

.tienda-ben-fila {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
}

.tienda-ben-fila [data-ben="d"] {
  grid-column: 1 / 3;
}

.tienda-ben-fila button {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.tienda-sugerencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  background: var(--color-primary-soft, rgba(37, 99, 235, 0.08));
  font-size: 0.92rem;
}

.tienda-sugerencia[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .tienda-ben-fila {
    grid-template-columns: 1fr auto;
  }

  .tienda-ben-fila [data-ben="i"],
  .tienda-ben-fila [data-ben="t"],
  .tienda-ben-fila [data-ben="d"] {
    grid-column: 1;
  }

  .tienda-ben-fila button {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* =====================================================================================================================================
   TIENDA «VITRINA» (2026-10-27): barra de la tienda, portada con eslogan, secciones con antetítulo, mosaico de categorías, banner, «sobre nosotros»,
   galería en mosaico, pie de contacto, letras y íconos propios. Todo se viste con las variables de cada plantilla (--color-*, --radius…).
   Letras: Fontsource (licencia OFL), archivos en /fonts/. Íconos: Lucide (ISC) y Simple Icons (CC0), sprite al principio de index.html.
   ===================================================================================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/playfair-display-600.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/playfair-display-700.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cormorant-garamond-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fredoka-500.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/fredoka-700.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/oswald-500.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/oswald-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/nunito-700.woff2") format("woff2"); }

/* Íconos */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.ico--marca {
  fill: currentColor;
  stroke: none;
}

/* Letra de cada plantilla (--ft-titulo: títulos · --ft-cuerpo: el resto); la que elige el dueño manda sobre la de la plantilla */
.spage-tema {
  --ft-cuerpo: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --ft-titulo: var(--ft-cuerpo);
  --on-primary: #ffffff;
}

.spage-tema--moderna,
.spage-tema--hero,
.spage-tema--vibrante {
  --ft-cuerpo: "Poppins", "Inter", system-ui, sans-serif;
}

.spage-tema--editorial {
  --ft-titulo: "Cormorant Garamond", "Playfair Display", Georgia, serif;
}

.spage-tema--boutique {
  --ft-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
}

.spage-tema--kawaii {
  --ft-titulo: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --ft-cuerpo: "Nunito", ui-rounded, system-ui, sans-serif;
}

.spage-tema--fresca {
  --ft-cuerpo: "Nunito", ui-rounded, system-ui, sans-serif;
}

.spage-tema--urbana {
  --ft-titulo: "Oswald", "Arial Narrow", Impact, sans-serif;
}

.spage-tema--urbana.spage-tema--color-auto,
.spage-tema--editorial.spage-tema--color-auto {
  --on-primary: #111111; /* el acento de estas dos plantillas es claro: el texto sobre él va oscuro */
}

.spage-tema.spage-tema--fuente-sans {
  --ft-cuerpo: "Inter", system-ui, sans-serif;
  --ft-titulo: "Inter", system-ui, sans-serif;
}

.spage-tema.spage-tema--fuente-serif {
  --ft-titulo: "Playfair Display", Georgia, serif;
  --ft-cuerpo: Georgia, "Times New Roman", serif;
}

.spage-tema.spage-tema--fuente-redondeada {
  --ft-cuerpo: "Nunito", ui-rounded, system-ui, sans-serif;
  --ft-titulo: "Nunito", ui-rounded, system-ui, sans-serif;
}

.spage-tema.spage-tema--fuente-elegante {
  --ft-titulo: "Cormorant Garamond", Georgia, serif;
  --ft-cuerpo: "Inter", system-ui, sans-serif;
}

.spage-tema.spage-tema--fuente-geometrica {
  --ft-cuerpo: "Poppins", system-ui, sans-serif;
  --ft-titulo: "Poppins", system-ui, sans-serif;
}

.spage-tema.spage-tema--fuente-condensada {
  --ft-titulo: "Oswald", "Arial Narrow", Impact, sans-serif;
  --ft-cuerpo: "Inter", system-ui, sans-serif;
}

.spage-tema,
.spage-tema[class*="spage-tema--fuente-"] {
  font-family: var(--ft-cuerpo);
}

.vt-hero__titulo,
.vt-sec__titulo,
.vt-banner__titulo,
.vt-col__texto strong,
.vt-nav__nombre,
.vt-pie h4,
.vt-pie__logo strong,
.spage-tema .card__name,
.spage-tema .spage__stat strong {
  font-family: var(--ft-titulo);
}

/* ---- Barra de la tienda ---- */
.vt-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 6px 0 12px;
  padding: 6px 2px;
}

.vt-nav__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
}

.vt-logo {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}

.vt-logo--letras {
  display: grid;
  place-items: center;
  border: 0;
  background: var(--color-primary);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 0.95rem;
}

.vt-nav__marca {
  flex: 1 1 auto;
}

.vt-nav .spage__acciones {
  flex: none;
}

.vt-nav__nombre {
  color: var(--color-text);
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.vt-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.vt-nav__link {
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.vt-nav__link:hover,
.vt-nav__link:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.vt-nav .spage__acciones {
  padding: 0;
}

/* ---- Portada ---- */
.vt-hero {
  --vel: 0.5;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  border-radius: calc(var(--radius) + 8px);
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
}

.vt-oscuro--suave {
  --vel: 0.28;
}

.vt-oscuro--fuerte {
  --vel: 0.7;
}

.spage-alto--baja .vt-hero {
  min-height: 330px;
}

.spage-alto--alta .vt-hero {
  min-height: 600px;
}

.vt-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.vt-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, calc(var(--vel) + 0.2)) 0%, rgba(0, 0, 0, calc(var(--vel) - 0.22)) 80%);
}

.vt-hero--centro::after {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, calc(var(--vel) - 0.1)), rgba(0, 0, 0, calc(var(--vel) + 0.15)));
}

.vt-hero__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 700px;
  padding: clamp(28px, 6vw, 68px);
}

.vt-hero--centro {
  justify-content: center;
  text-align: center;
}

.vt-hero--centro .vt-hero__cuerpo {
  align-items: center;
  margin: 0 auto;
}

.vt-hero__kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.92;
}

.vt-hero__titulo {
  margin: 0;
  font-size: clamp(2.05rem, 5.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.07;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.vt-hero__texto {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  line-height: 1.6;
  opacity: 0.95;
}

.vt-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.vt-hero--centro .vt-hero__ctas,
.vt-hero--centro .vt-hero__datos {
  justify-content: center;
}

.vt-hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.vt-hero__datos li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Texto en un panel con la foto al lado */
.vt-hero--dividido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text);
}

.vt-hero--dividido {
  align-items: stretch;
}

.spage-tema .vt-hero--dividido .vt-hero__titulo {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
}

.vt-hero--dividido::after {
  display: none;
}

.vt-hero--dividido .vt-hero__fondo {
  position: relative;
  inset: auto;
  z-index: 0;
  order: 2;
  min-height: 100%;
}

.vt-hero--dividido .vt-hero__cuerpo {
  order: 1;
  justify-content: center;
  max-width: none;
}

.vt-hero--dividido .vt-hero__kicker {
  color: var(--color-primary);
  color: color-mix(in srgb, var(--color-primary) 55%, var(--color-text));
  opacity: 1;
}

.vt-hero--dividido .vt-hero__datos li {
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.vt-hero--dividido .vt-btn--sec {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Botones de la vitrina */
.vt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.vt-btn:hover,
.vt-btn:focus-visible {
  transform: translateY(-2px);
}

.vt-btn--principal {
  background: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 86%, #000);
  color: var(--on-primary);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
}

.vt-btn--principal:hover,
.vt-btn--principal:focus-visible {
  background: var(--color-primary-hover);
  background: color-mix(in srgb, var(--color-primary) 72%, #000);
}

.vt-btn--sec {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.vt-btn--sec:hover,
.vt-btn--sec:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

/* Fondos prediseñados de la portada (si no hay foto) */
.vt-fondo {
  background: radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.2), transparent 42%), linear-gradient(135deg, var(--color-primary), #0b1220);
}

.vt-fondo--aurora {
  background: radial-gradient(circle at 18% 22%, rgba(94, 234, 212, 0.5), transparent 45%), radial-gradient(circle at 82% 30%, rgba(167, 139, 250, 0.55), transparent 50%), linear-gradient(135deg, #0f172a, #1e3a5f);
}

.vt-fondo--atardecer {
  background: radial-gradient(circle at 86% 14%, rgba(255, 214, 102, 0.6), transparent 40%), linear-gradient(135deg, #ff7e5f, #e8467c 55%, #6a3093);
}

.vt-fondo--oceano {
  background: radial-gradient(circle at 14% 86%, rgba(255, 255, 255, 0.22), transparent 45%), linear-gradient(135deg, #0b5e86, #1388b3 55%, #3fb6d6);
}

.vt-fondo--bosque {
  background: radial-gradient(circle at 82% 18%, rgba(190, 242, 100, 0.35), transparent 45%), linear-gradient(135deg, #0f3d2e, #1c6b50 60%, #3a9a77);
}

.vt-fondo--uva {
  background: radial-gradient(circle at 20% 14%, rgba(244, 114, 182, 0.5), transparent 45%), linear-gradient(135deg, #2e1065, #6d28d9 62%, #9a4ee8);
}

.vt-fondo--grafito {
  background: radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.14), transparent 42%), linear-gradient(135deg, #111827, #374151);
}

.vt-fondo--arena {
  background: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.28), transparent 45%), linear-gradient(135deg, #7d5233, #a97649 60%, #c9966a);
}

.vt-fondo--neon {
  background: radial-gradient(circle at 14% 26%, rgba(34, 211, 238, 0.5), transparent 40%), radial-gradient(circle at 86% 72%, rgba(236, 72, 153, 0.5), transparent 45%), linear-gradient(135deg, #0b0b1f, #1a1a3a);
}

/* ---- Secciones ---- */
.vt-sec {
  margin-top: clamp(42px, 6vw, 76px);
}

.vt-sec__cab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}

.vt-sec__kicker {
  color: var(--color-primary);
  color: color-mix(in srgb, var(--color-primary) 55%, var(--color-text)); /* el acento se acerca al color del texto para que se lea con cualquier combinación */
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vt-sec__titulo {
  position: relative;
  margin: 0;
  padding-bottom: 14px;
  font-size: clamp(1.5rem, 3.1vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.vt-sec__titulo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 4px;
  border-radius: 4px;
  background: var(--color-primary);
}

.spage-tema .spage__ventajas {
  margin: 28px 0 0;
}

/* Etiqueta sobre una tarjeta de producto */
.spage__prod {
  position: relative;
  display: flex;
}

.spage__prod > .card {
  flex: 1;
  width: 100%;
}

.vt-etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--on-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6);
}

/* Tarjetas de producto de la vitrina */
.spage-tema .card {
  border-radius: var(--radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.spage-tema .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}

.spage-tema .card__media {
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.spage-tema .card__media--foto img {
  padding: 0;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.spage-tema .card:hover .card__media--foto img {
  transform: scale(1.06);
}

.spage-tarjeta--sombra .card {
  border-color: transparent;
  box-shadow: 0 8px 26px -14px rgba(0, 0, 0, 0.35);
}

.spage-tarjeta--borde .card {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.spage-tarjeta--borde .card:hover {
  border-color: var(--color-primary);
  box-shadow: none;
}

.spage-tarjeta--plana .card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.spage-tarjeta--plana .card:hover {
  box-shadow: none;
}

.spage-tarjeta--plana .card__media {
  border-radius: var(--radius);
}

.spage-tarjeta--plana .card__body {
  padding-left: 2px;
  padding-right: 2px;
}

/* ---- Mosaico «Compra por categoría» ---- */
.vt-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.vt-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 190px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--color-primary), #0b1220);
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vt-col--1 {
  background: linear-gradient(200deg, var(--color-primary), #1a1230);
}

.vt-col--2 {
  background: linear-gradient(160deg, var(--color-primary), #102a2b);
}

.vt-col--3 {
  background: linear-gradient(120deg, var(--color-primary), #2a1010);
}

.vt-col--4 {
  background: linear-gradient(235deg, var(--color-primary), #101a2e);
}

.vt-col--5 {
  background: linear-gradient(180deg, var(--color-primary), #1b1b1b);
}

.vt-col img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.vt-col::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.05) 65%);
}

.vt-col:hover,
.vt-col:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.vt-col:hover img {
  transform: scale(1.08);
}

.vt-col__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
}

.vt-col__texto strong {
  font-size: 1.25rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.vt-col__texto small {
  opacity: 0.88;
  font-size: 0.85rem;
}

.vt-col__flecha {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #111111;
  transition: transform 0.2s ease;
}

.vt-col:hover .vt-col__flecha {
  transform: translateX(3px);
}

/* ---- Banner con imagen propia ---- */
.vt-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 260px;
  margin-top: clamp(42px, 6vw, 76px);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.22), transparent 40%), var(--color-primary);
  color: var(--on-primary);
}

.vt-banner--foto {
  background: #111111;
  color: #ffffff;
}

.vt-banner__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-banner--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.12));
}

.vt-banner__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 580px;
  padding: clamp(26px, 5vw, 52px);
}

.vt-banner__titulo {
  margin: 0;
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.vt-banner__cuerpo p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: 0.95;
}

.vt-banner:not(.vt-banner--foto) .vt-btn--principal {
  background: var(--on-primary);
  color: var(--color-primary);
  color: color-mix(in srgb, var(--color-primary) 86%, #000);
}

/* ---- Sobre nosotros ---- */
.vt-sobre {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
}

.vt-sobre__texto .spage__descripcion {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.75;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.vt-sobre__datos .spage__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.vt-sobre__datos .spage__stat {
  padding: 16px;
}

/* ---- Galería en mosaico ---- */
.vt-mosaico {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 170px;
  grid-auto-flow: dense;
  gap: 12px;
}

.vt-mosaico .spage__galeria-foto {
  aspect-ratio: auto;
  border: 0;
  background: var(--color-surface);
}

.vt-mosaico .spage__galeria-foto:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.vt-mosaico .spage__galeria-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.vt-mosaico .spage__galeria-foto:hover img {
  transform: scale(1.07);
}

/* Con pocas fotos el mosaico cambia de forma para no dejar huecos */
.vt-mosaico--n1 {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 380px;
}

.vt-mosaico--n2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 320px;
}

.vt-mosaico--n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 210px;
}

.vt-mosaico--n4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 230px;
}

.vt-mosaico--n1 .spage__galeria-foto:first-child,
.vt-mosaico--n2 .spage__galeria-foto:first-child,
.vt-mosaico--n4 .spage__galeria-foto:first-child {
  grid-column: auto;
  grid-row: auto;
}

/* ---- Preguntas frecuentes ---- */
.spage-tema .spage__faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}

.spage-tema .spage__faq-item summary::-webkit-details-marker {
  display: none;
}

.spage-tema .spage__faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.spage-tema .spage__faq-item[open] summary::after {
  content: "−";
}

/* ---- Pie de contacto ---- */
.vt-pie {
  margin-top: clamp(48px, 7vw, 92px);
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid var(--color-border-soft);
  border-radius: calc(var(--radius) + 6px);
  background: var(--color-surface);
}

.vt-pie__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 30px;
}

.vt-pie h4 {
  margin: 0 0 14px;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vt-pie__marca p,
.vt-pie__col--cta p {
  margin: 10px 0 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.vt-pie__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
}

.vt-pie__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.vt-red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.vt-red:hover,
.vt-red:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  transform: translateY(-2px);
}

.vt-pie__lista {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-pie__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.vt-pie__lista .ico {
  margin-top: 0.2em;
  color: var(--color-primary);
}

.vt-pie__lista a {
  color: var(--color-text);
  font-weight: 600;
}

.vt-pie__col--cta .vt-btn {
  margin-top: 14px;
}

.vt-pie__legal {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-muted);
  font-size: 0.82rem;
}

.vt-pie__legal a {
  color: var(--color-text);
  font-weight: 600;
}

/* ---- Personalidad de cada plantilla ---- */
.spage-tema--editorial .vt-sec__kicker::before {
  counter-increment: seccion;
  content: counter(seccion, decimal-leading-zero) " — ";
}

.spage-tema--editorial .vt-sec__titulo {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

.spage-tema--editorial .vt-hero__titulo {
  font-weight: 500;
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  letter-spacing: -0.01em;
}

.spage-tema--editorial .vt-sec__titulo::after {
  width: 70px;
  height: 1px;
}

.spage-tema--kawaii .vt-sec__titulo::before {
  content: "✿ ";
  color: var(--color-primary);
}

.spage-tema--kawaii .vt-hero,
.spage-tema--kawaii .vt-banner,
.spage-tema--kawaii .vt-pie {
  border: 3px solid #1f1b24;
}

.spage-tema--kawaii .vt-btn {
  border: 2px solid #1f1b24;
  box-shadow: 0 4px 0 #1f1b24;
}

.spage-tema--kawaii .vt-btn--sec {
  background: #ffffff;
  color: #1f1b24;
}

.spage-tema--vibrante .vt-hero,
.spage-tema--vibrante .vt-banner,
.spage-tema--vibrante .vt-pie {
  border: 2px solid #1b1b1b;
  box-shadow: 6px 6px 0 #1b1b1b;
}

.spage-tema--vibrante .vt-btn {
  border: 2px solid #1b1b1b;
  box-shadow: 3px 3px 0 #1b1b1b;
}

.spage-tema--vibrante .vt-btn--sec {
  background: #ffffff;
  color: #1b1b1b;
}

.spage-tema--vibrante .vt-col,
.spage-tema--vibrante .vt-ventaja {
  border: 2px solid #1b1b1b;
}

.spage-tema--urbana .vt-hero__titulo,
.spage-tema--urbana .vt-sec__titulo,
.spage-tema--urbana .vt-banner__titulo {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.spage-tema--urbana .vt-sec__titulo::after {
  width: 72px;
  height: 6px;
  border-radius: 0;
}

.spage-tema--urbana .vt-hero,
.spage-tema--urbana .vt-banner,
.spage-tema--urbana .vt-pie,
.spage-tema--urbana .vt-col {
  border-radius: 0;
}

.spage-tema--minimal .vt-sec__titulo,
.spage-tema--minimal .vt-hero__titulo {
  text-transform: none;
  font-weight: 700;
}

.spage-tema--minimal .vt-sec__titulo::after {
  display: none;
}

.spage-tema--minimal .vt-hero,
.spage-tema--minimal .vt-banner,
.spage-tema--minimal .vt-pie,
.spage-tema--minimal .vt-col {
  border-radius: 0;
  box-shadow: none;
}

.spage-tema--boutique .vt-sec__kicker,
.spage-tema--boutique .vt-hero__kicker {
  letter-spacing: 0.24em;
}

.spage-tema--boutique .vt-hero__titulo {
  font-weight: 600;
}

.spage-tema--oscura .vt-nav__nombre,
.spage-tema--urbana .vt-nav__nombre,
.spage-tema--editorial .vt-nav__nombre {
  color: var(--color-text);
}

/* Estilo de las tarjetas por plantilla cuando el dueño deja «según la plantilla» */
.spage-tema--editorial.spage-tarjeta--auto .card,
.spage-tema--urbana.spage-tarjeta--auto .card {
  box-shadow: none;
}

.spage-tema--boutique.spage-tarjeta--auto .card,
.spage-tema--fresca.spage-tarjeta--auto .card,
.spage-tema--moderna.spage-tarjeta--auto .card {
  border-color: transparent;
  box-shadow: 0 8px 26px -14px rgba(0, 0, 0, 0.3);
}

/* ---- Pantallas chicas ---- */
@media (max-width: 820px) {
  .vt-pie__grid {
    grid-template-columns: 1fr;
  }

  .vt-sobre {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .vt-nav__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vt-hero {
    min-height: 400px;
  }

  .spage-alto--baja .vt-hero {
    min-height: 300px;
  }

  .spage-alto--alta .vt-hero {
    min-height: 520px;
  }

  .vt-hero--dividido {
    grid-template-columns: 1fr;
  }

  .vt-hero--dividido .vt-hero__fondo {
    order: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .vt-hero--dividido .vt-hero__cuerpo {
    padding: 24px 20px 28px;
  }

  .vt-nav__links {
    order: 3;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .vt-nav__links::-webkit-scrollbar {
    display: none;
  }

  .vt-nav__link {
    flex: none;
  }

  .vt-mosaico,
  .vt-mosaico--n3,
  .vt-mosaico--n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;
  }

  .vt-mosaico--n1 {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 240px;
  }

  .vt-mosaico--n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 200px;
  }

  .vt-mosaico--n3 .spage__galeria-foto:first-child {
    grid-column: span 2;
    grid-row: auto;
  }

  .vt-cols {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .vt-col {
    min-height: 150px;
  }

  .vt-banner {
    min-height: 220px;
  }
}

/* ---- Editor: fondos prediseñados, orden con casillas y vista previa compacta ---- */
.tienda-fondos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.tienda-fondo {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 92px;
  height: 56px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.tienda-fondo span {
  width: 100%;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.tienda-fondo.is-activo {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}

.tienda-orden__nombre {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.tienda-orden__item.is-oculta .tienda-orden__nombre span {
  opacity: 0.5;
  text-decoration: line-through;
}

.tienda-vista .vt-hero {
  min-height: 260px;
}

.tienda-vista .vt-hero__titulo {
  font-size: 1.6rem;
}

.tienda-vista .vt-hero__cuerpo {
  padding: 22px;
}

.tienda-vista .vt-hero__datos {
  display: none;
}


.tienda-vista .vt-nav__links {
  display: none;
}

/* Los fondos de acento con texto blanco (anuncio de arriba, ícono de letras) se oscurecen un poco para llegar a 4,5:1 en cualquier color */
.spage-tema:not(.spage-tema--kawaii) .spage__promo,
.spage-tema .vt-logo--letras {
  background: color-mix(in srgb, var(--color-primary) 86%, #000);
}

/* ---- Editor de estilo: plantillas chicas a la izquierda y vista previa al lado (fija mientras se baja) ---- */
.tienda-estilo__cols {
  display: grid;
  gap: 16px;
}

.tienda-estilo__controles,
.tienda-estilo__vista {
  min-width: 0;
}

.tienda-estilo__vista .field-label {
  display: block;
  margin-bottom: 4px;
}

.tienda-estilo__vista .tienda-vista {
  margin: 0 0 10px;
}

.tienda-estilo__controles .tienda-plantillas {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.tienda-estilo__controles .tienda-plantilla {
  gap: 3px;
  padding: 5px;
  border-radius: 10px;
}

.tienda-estilo__controles .tienda-plantilla strong {
  font-size: 0.76rem;
  line-height: 1.15;
}

.tienda-estilo__controles .tienda-plantilla small {
  display: none;
}

.tienda-estilo__controles .tienda-grilla {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (min-width: 880px) {
  .tienda-estilo__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
  }

  .tienda-estilo__vista {
    position: sticky;
    top: calc(var(--alto-cabecera, 150px) + 12px);
  }
}

/* La vista previa se adapta a SU ancho (no al de la pantalla): si queda angosta, la foto pasa arriba del texto */
.tienda-vista {
  container-type: inline-size;
}

.tienda-vista .vt-hero {
  min-height: 190px;
}

/* La vista previa es una maqueta chica: menos texto y todo más compacto para que quepa entera al lado de las plantillas */
.tienda-vista .vt-hero__cuerpo {
  gap: 8px;
  padding: 16px 18px;
}

.tienda-vista .vt-hero__titulo {
  font-size: 1.3rem;
  line-height: 1.15;
}

.tienda-vista .vt-hero__texto {
  display: none;
}

.tienda-vista .vt-hero__kicker {
  font-size: 0.62rem;
}

.tienda-vista .vt-hero__ctas {
  gap: 6px;
  margin-top: 2px;
}

.tienda-vista .vt-btn {
  padding: 7px 12px;
  font-size: 0.76rem;
}

.tienda-vista .vt-hero--dividido {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.tienda-vista .vt-nav {
  margin: 2px 0 8px;
}

.tienda-vista .vt-logo {
  width: 32px;
  height: 32px;
}

.tienda-vista .vt-nav__nombre {
  font-size: 0.95rem;
}

.tienda-vista .spage__promo {
  margin: 2px 0;
  padding: 8px 12px;
  font-size: 0.78rem;
}

@container (max-width: 380px) {
  .tienda-vista .vt-hero--dividido {
    grid-template-columns: 1fr;
  }

  .tienda-vista .vt-hero--dividido .vt-hero__fondo {
    order: 0;
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  }

/* Aún más compacta: la vista previa tiene que caber entera debajo de la cabecera fija en una pantalla de notebook */
.tienda-vista .spage__promo {
  display: none;
}

.tienda-vista .vt-hero {
  min-height: 170px;
}

.tienda-vista .vt-hero__cuerpo {
  padding: 12px 16px;
}

.tienda-vista .vt-hero__titulo {
  font-size: 1.15rem;
}

.tienda-estilo__vista .tienda-estilo__acciones {
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
}

.tienda-estilo__vista .tienda-estilo__acciones .btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.2;
}

/* (con más peso que las reglas de cada plantilla, para que el título de la maqueta no crezca) */
.tienda-vista .spage-tema .vt-hero .vt-hero__titulo {
  font-size: 1.15rem;
  line-height: 1.15;
}

/* ===== Compartir una tienda o un producto (2026-10-27): hoja con las redes, y los botones en las tarjetas y en la página del producto ===== */
.compartir-overlay {
  align-items: flex-end;
}

.compartir-hoja {
  width: min(480px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: var(--color-surface);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}

@media (min-width: 560px) {
  .compartir-overlay {
    align-items: center;
  }

  .compartir-hoja {
    border-radius: 20px;
  }
}

.compartir-hoja__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.compartir-hoja__cab h3 {
  margin: 0;
  font-size: 1.2rem;
}

.compartir-resumen {
  margin: 6px 0 16px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.compartir-opciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 8px;
  margin-bottom: 16px;
}

.compartir-op {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.compartir-op__ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #5f6368;
  color: #ffffff;
  font-size: 1.55rem;
  transition: transform 0.15s ease;
}

.compartir-op:hover .compartir-op__ico,
.compartir-op:focus-visible .compartir-op__ico {
  transform: translateY(-3px) scale(1.05);
}

.compartir-op--wa .compartir-op__ico {
  background: #1fa855;
}

.compartir-op--fb .compartir-op__ico {
  background: #1877f2;
}

.compartir-op--tg .compartir-op__ico {
  background: #1d8fc4;
}

.compartir-op--ig .compartir-op__ico {
  background: linear-gradient(45deg, #f09433, #dc2743 55%, #8a3ab9);
}

.compartir-op--nativo .compartir-op__ico {
  background: #111111;
}

.compartir-enlace {
  display: flex;
  gap: 8px;
}

.compartir-enlace .input {
  flex: 1;
  min-width: 0;
}

.card__share {
  position: absolute;
  top: 8px;
  right: 48px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  color: var(--color-muted);
  font-size: 1rem;
  cursor: pointer;
}

.card__share:hover,
.card__share:focus-visible,
.pdetail__share:hover,
.pdetail__share:focus-visible {
  color: var(--color-primary);
}

.pdetail__acciones {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.pdetail__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-muted);
  font-size: 1.1rem;
  cursor: pointer;
}

/* ===== «Proceder a comprar»: compras a vendedores en Mis Pedidos, datos del vendedor y lista de interés con seguimiento de precio (2026-10-28) ===== */
.trato__vendedor {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
}

.trato__vendedor[hidden] {
  display: none;
}

.trato-vendedor__titulo {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.trato-vendedor__nombre,
.trato-vendedor__rep {
  margin: 0;
}

.trato-vendedor__rep {
  color: var(--color-muted);
  font-size: 0.88rem;
}

.trato-vendedor__lista {
  display: grid;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.trato-vendedor__lista li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow-wrap: anywhere;
}

.trato-vendedor__lista .ico {
  margin-top: 0.15em;
  color: var(--color-primary);
}

.trato-vendedor__tienda {
  margin-top: 4px;
  font-weight: 700;
  font-size: 0.9rem;
}

.lista-interes {
  margin-top: 8px;
}

.mmenu__nota {
  margin: 0 12px 8px;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.fav-item__baja,
.fav-item__sube {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
}

.fav-item__baja {
  color: #157347;
}

.fav-item__sube {
  color: #b02a37;
}

.fav-item__comprar {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 700;
}

/* Pago y entrega de un anuncio (2026-10-29): casillas en el paso 3 del asistente y fichas en la página del producto */
.pub-pagoentrega {
  margin-top: 16px;
}

.pub-opciones {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 4px;
}

.pub-opciones .check {
  margin: 2px 0;
}

.pub-row__aviso {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-danger);
}

.pdetail__pagoentrega {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.pdetail__pagoentrega p {
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.pdetail__pagoentrega p:last-child {
  margin-bottom: 0;
}

.pdetail__pagoentrega-nota {
  color: var(--color-muted);
  font-size: 0.84rem !important;
}

.pe-ficha {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-primary-soft);
  font-size: 0.84rem;
  white-space: nowrap;
}

/* Qué cambió el vendedor, para el administrador que revisa (2026-10-29) */
.pub-cambios {
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px solid #f0d9a8;
  border-radius: var(--radius-sm);
  background: #fff8e6;
  font-size: 0.85rem;
  line-height: 1.45;
}

.pub-cambios--nueva {
  border-color: #cfe0ff;
  background: var(--color-primary-soft);
}

.pub-cambios ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.pub-cambios li {
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.pub-cambios__campo {
  font-weight: 700;
}

.pub-cambios del {
  color: var(--color-danger);
}

.pub-cambios ins {
  color: #0a7a3b;
  font-weight: 600;
  text-decoration: none;
}

.pub-cambios__fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.pub-cambios__fotos img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* Orden y precio del catálogo (2026-11-08) */
.market-toolbar__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.market-toolbar__fila .search-bar {
  flex: 1 1 320px;
}

.market-orden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.market-orden .input {
  min-width: 190px;
  height: 40px;
  color: var(--color-text, inherit);
}

.market-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.market-filtros .market-filtros__precio {
  width: 120px;
  min-width: 0;
  height: 36px;
}

.chip__n {
  margin-left: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  opacity: 0.65;
}

.chip--vacio {
  opacity: 0.55;
}

@media (max-width: 640px) {
  .market-orden {
    width: 100%;
  }

  .market-orden .input {
    flex: 1;
    min-width: 0;
  }
}