:root {
  /* Marca -- paleta naranja "food delivery / comercio local" (antes verde
     #1db954). Cambiada en bloque el 14/9/2026 a pedido: mismo naranja para
     marca y para accion/CTA (la nueva paleta no los distingue como antes). */
  --primary: #ff6b00;
  --primary-dark: #de5d00;
  --primary-light: #ffa96b;

  /* Accion / CTA (botones, agregar, confirmar) */
  --action: #ff6b00;
  --action-dark: #de5d00;
  --action-light: #ffa96b;

  /* Acentos comerciales (ofertas, descuentos, promos). "orange" se aleja a
     proposito del nuevo --primary (que ahora tambien es naranja) para que
     la etiqueta "Promo" se siga distinguiendo del color de marca. */
  --yellow: #f4c430;
  --red: #ff4d4d;
  --orange: #b85c2e;

  --dark: #171717;
  --bg: #fff4e1;
  --card: #fffaf3;
  --text: #171717;
  --muted: #77736d;
  --border: #f0e8dd;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 14px #281e140f;
  --shadow-lift: 0 8px 28px #281e141f;
  /* Verde: ahora "acento ocasional" (checkmarks, exito) en vez de color de
     marca -- ver paleta nueva. */
  --green: #a8c98a;
  /* Tipografia de cuerpo: sobreescribible por el diseno avanzado del plan
     Premium (ver applyDesign en store.js). El resto de la tienda sigue
     usando 'Inter' para titulos sin importar esto -- es deliberado, para
     no perder la identidad visual de Yumi incluso en tiendas personalizadas. */
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  padding-bottom: 90px;
}

a { color: inherit; }

img { display: block; }

/* ---------- Top admin bar (admin.html only) ---------- */
.admin-topbar {
  background: var(--dark);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-topbar .brand { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.admin-brand-mark { width: 20px; height: auto; }
.admin-topbar a { color: #fff; text-decoration: none; font-size: 0.85rem; opacity: 0.8; }
.admin-topbar a:hover { opacity: 1; }
.role-badge {
  background: #ffffff26;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 700;
}
.order-status-select {
  padding: 6px 8px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}
.status-pending { color: var(--orange); }
.status-preparing { color: #2563eb; }
.status-ready { color: var(--green); }
.status-delivered { color: var(--muted); }
.status-cancelled { color: var(--red); }

.announcement-bar {
  background: var(--primary);
  color: #fff;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
}

/* ---------- Storefront hero ---------- */
.cover {
  height: 150px;
  width: 100%;
  background-color: var(--primary);
  background-image: linear-gradient(
    135deg,
    #ffffff1a 25%, transparent 25%,
    transparent 50%, #ffffff1a 50%,
    #ffffff1a 75%, transparent 75%, transparent
  );
  background-size: 26px 26px;
  background-position: center;
}

.store-header {
  max-width: 720px;
  margin: -36px auto 0;
  padding: 0 20px;
  display: flex;
  gap: 14px;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.share-btn {
  margin-left: auto;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.share-btn:hover { border-color: var(--primary); color: var(--primary); }
.share-btn-copied { border-color: var(--green); color: var(--green); }

.store-logo {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: var(--card);
  border: 3px solid var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--primary);
}
.store-logo img { width: 100%; height: 100%; object-fit: cover; }

.store-info { min-width: 0; flex: 1; margin-top: 10px; }
.store-info h1 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
  overflow-wrap: break-word;
}
@media (max-width: 420px) {
  .store-info h1 { font-size: 1.25rem; }
}

.store-meta {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.store-desc {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.4;
}
.store-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}
.badge-closed { color: var(--red); }
.badge-icon { flex-shrink: 0; }

/* ---------- Search + categories ---------- */
.search-wrap {
  max-width: 720px;
  margin: 16px auto 0;
  padding: 0 20px;
}
.search-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-size: 0.92rem;
}
.search-input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

.category-chips-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  max-width: 720px;
  margin: 14px auto 0;
  padding-top: 8px;
  padding-bottom: 8px;
}
.category-chips-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36px;
  background: linear-gradient(to right, #f7f7f500, var(--bg) 85%);
  pointer-events: none;
}

.category-chips {
  padding: 0 20px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.84rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
/* Chiquito a proposito: al cambiar sola (scroll spy, ver watchCategorySections
   en store.js) o al tocarla, la que queda activa "pop-ea" un poco en vez de
   cambiar de golpe -- ayuda a que se note cual categoria es la nueva. */
.chip.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
  .chip.active { transform: none; }
}
.chip:focus-visible,
.add-fab:focus-visible,
.delivery-option:focus-visible,
.product-card:focus-visible,
.floating-cart-inner:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Estilo alternativo de categorias (opcional, estilo Pedix): banners anchos
   apilados en vez de las burbujas chicas de arriba. Ver categoryDisplayStyle. */
.category-banners-wrap {
  max-width: 720px;
  margin: 14px auto 0;
  padding: 0 20px;
}
.category-banners {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.category-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 84px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--card);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.category-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0000008c, #00000000 60%);
}
.category-banner-plain {
  background-image: linear-gradient(135deg, var(--primary), var(--dark));
}
.category-banner-label {
  position: relative;
  z-index: 1;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-align: left;
}
.category-banner.active {
  border-color: var(--dark);
  transform: scale(0.99);
}
@media (prefers-reduced-motion: reduce) {
  .category-banner { transition: none; }
}

/* ---------- Catalog grid ---------- */
main.catalog {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 20px 20px;
}

.section-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 22px 0 12px;
}
.section-title:first-child { margin-top: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
/* En mobile, lista horizontal (foto chica + info) en vez de grilla de fotos:
   se lee mas rapido un menu entero sin tener que tocar cada producto — patron
   que vimos repetirse en Pedix y Wapix, dos competidores reales. */
@media (max-width: 559px) {
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .product-card { flex-direction: row; align-items: stretch; }
  .product-image { width: 92px; flex-shrink: 0; aspect-ratio: 1 / 1; }
  .product-body { padding: 8px 10px; gap: 2px; }
  .product-body p.desc { -webkit-line-clamp: 1; }
  .product-footer { margin-top: 4px; }
}

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Densidad de grilla elegida por el dueno (plan Premium, ver applyDesign en
   store.js) -- solo pisa el layout de escritorio/tablet; en mobile angosto
   la grilla sigue siendo siempre 1 columna sin importar esta eleccion,
   porque 3 columnas en un telefono chico no entra bien. "list" es la
   excepcion: fuerza el mismo layout compacto (foto chica + info) que ya usa
   mobile automaticamente, pero en cualquier ancho. */
@media (min-width: 560px) {
  .catalog-density-2 .grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-density-3 .grid { grid-template-columns: repeat(3, 1fr); }
}
.catalog-density-list .grid { grid-template-columns: 1fr; gap: 10px; }
.catalog-density-list .product-card { flex-direction: row; align-items: stretch; }
.catalog-density-list .product-image { width: 92px; flex-shrink: 0; aspect-ratio: 1 / 1; }
.catalog-density-list .product-body { padding: 8px 10px; gap: 2px; }
.catalog-density-list .product-body p.desc { -webkit-line-clamp: 1; }
.catalog-density-list .product-footer { margin-top: 4px; }

.product-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.1s ease;
}
.product-card:hover { border-color: var(--primary); }
.product-card:active { transform: scale(0.98); }

.product-image { position: relative; aspect-ratio: 4/3; background: #f0f0f2; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }

.stock-flag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #171717d9;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.corner-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
}
.corner-badge-discount { background: var(--red); }
.corner-badge-oferta { background: var(--yellow); color: var(--dark); }
.corner-badge-promo { background: var(--orange); }
.corner-badge-destacado { background: var(--primary); color: #fff; }

.product-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-body h3 { margin: 0; font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.product-body p.desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.price { font-weight: 800; font-size: 0.95rem; }
.price-on-request { color: var(--primary); }
.price-old { text-decoration: line-through; color: var(--muted); font-weight: 500; font-size: 0.78rem; margin-right: 4px; }

.add-fab {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--action);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.1s ease, background 0.12s ease;
}
.add-fab:hover { background: var(--action-dark); }
.add-fab:active:not(:disabled) { transform: scale(0.92); }
.add-fab:disabled { background: #d8d8dc; cursor: not-allowed; }

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 52px 20px;
  font-size: 0.92rem;
}
.empty-state-icon { margin: 0 auto 4px; display: block; }
.empty-state-title { font-weight: 700; color: var(--text); font-size: 1rem; margin: 0 0 4px; }
.empty-state p { margin: 0; }

/* ---------- Loading skeletons ---------- */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.skeleton {
  background: #e8e8ec;
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.3s ease-in-out infinite;
}
.skeleton-text { height: 0.9em; }
.skeleton-header-name { width: 140px; height: 20px; margin-top: 4px; }
.store-header.is-loading .store-logo { background: #e8e8ec; animation: skeleton-pulse 1.3s ease-in-out infinite; }
.skeleton-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 560px) { .skeleton-grid { grid-template-columns: repeat(3, 1fr); } }
.skeleton-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.skeleton-card .skeleton-img { aspect-ratio: 4/3; border-radius: 0; }
.skeleton-card .skeleton-lines { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.skeleton-card .skeleton-lines .skeleton-text:nth-child(1) { width: 80%; }
.skeleton-card .skeleton-lines .skeleton-text:nth-child(2) { width: 55%; }

.catalog-spinner-wrap {
  display: flex;
  justify-content: center;
  padding: 70px 20px;
}
.catalog-spinner {
  width: 44px;
  height: 44px;
  animation: catalog-spin 1s linear infinite;
}
@keyframes catalog-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-spinner { animation: catalog-spin-pulse 1.3s ease-in-out infinite; }
  @keyframes catalog-spin-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
}

.table-empty-row td { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 0.86rem; }

.store-footer {
  max-width: 720px;
  margin: 12px auto 0;
  padding: 0 20px;
  text-align: center;
}
.store-footer a {
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.store-footer a:hover { color: var(--primary-dark); text-decoration: underline; }
.store-footer-mark { width: 14px; height: auto; opacity: 0.7; }

/* ---------- Buttons ---------- */
.btn {
  background: var(--action);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  padding: 13px 18px;
}
.btn:hover { background: var(--action-dark); }
.btn:disabled { background: #d8d8dc; cursor: not-allowed; }
.btn-block { width: 100%; }

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  padding: 10px 16px;
}
.btn-text {
  background: none;
  border: none;
  color: var(--muted);
  font-weight: 600;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  text-align: center;
}
/* .btn-text nace pensado para un boton solo debajo de un formulario (por
   eso width:100%) -- estos dos usos lo comparten dentro de una fila flex
   (topbar, chips de periodo), donde ese 100% los estira mal. Ver el bug real
   que esto causo en .stats-preset-btn (quedaban apilados en vez de en fila). */
#push-notif-btn,
.stats-preset-btn {
  width: auto;
}

/* ---------- Floating cart bar ---------- */
.floating-cart {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
}
.floating-cart-inner {
  max-width: 688px;
  width: 100%;
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  gap: 12px;
}
.floating-cart-count {
  background: var(--primary);
  border-radius: 50%;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0 6px;
}
.floating-cart-label { font-weight: 600; font-size: 0.88rem; flex: 1; }
.floating-cart-total { font-weight: 800; font-size: 0.95rem; }

/* ---------- Sheets / modals ---------- */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: #0f0f1473;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}
@media (min-width: 560px) {
  .sheet-overlay { align-items: center; padding: 20px; }
}

.sheet {
  background: var(--card);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 10px 20px 22px;
}
@media (min-width: 560px) {
  .sheet { border-radius: var(--radius-lg); }
}

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 6px auto 14px;
}

.sheet h2 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.25rem; margin: 0 0 14px; }

.sheet-product-image { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; background: #f0f0f2; }
.sheet-product-image img { width: 100%; height: 100%; object-fit: cover; }
.sheet-product-desc { color: var(--muted); font-size: 0.86rem; margin: -8px 0 14px; }

.variant-group { margin-bottom: 14px; }
.variant-group-label { font-weight: 700; font-size: 0.86rem; margin-bottom: 8px; display: block; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--card);
}
.variant-option.selected { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }

.qty-stepper { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.qty-stepper button {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--card); font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
.qty-stepper span { font-weight: 700; font-size: 1rem; min-width: 20px; text-align: center; }

/* ---------- Cart items ---------- */
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.cart-item .meta { flex: 1; min-width: 0; }
.cart-item .meta .name { font-weight: 700; }
.cart-item .variants { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.cart-item .line-price { font-weight: 700; white-space: nowrap; }
.remove-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 1.1rem; padding: 0 2px; line-height: 1;
}
.remove-btn:hover { color: #c0392b; }

.subtotal-row {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  margin-top: 14px;
  font-size: 1.05rem;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.empty-cart { text-align: center; color: var(--muted); padding: 30px 10px; font-size: 0.88rem; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--text); }
select, input, textarea {
  font: inherit;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  width: 100%;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--primary); }

.delivery-toggle { display: flex; gap: 8px; margin-bottom: 4px; }
.delivery-option {
  flex: 1;
  text-align: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  appearance: none;
}
.delivery-option.selected { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.payment-toggle { flex-wrap: wrap; }
.payment-toggle .delivery-option { flex: 1 1 calc(50% - 4px); }

.error-text { color: #c0392b; font-size: 0.84rem; margin: -4px 0 10px; }
.success-box {
  background: #e9f9ee;
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 10px 0;
  text-align: center;
}
.success-box p { margin: 0 0 6px; font-size: 0.88rem; }
.success-box a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }

.hidden { display: none !important; }

/* ---------- Admin ---------- */
.admin-wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }

.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tab-btn-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
}
.tab-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.tab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 14px #ff6b0047;
}
.tab-btn.active img.tab-btn-icon { filter: brightness(0) invert(1); }
.tab-btn.has-new-badge { position: relative; }
.tab-btn.has-new-badge::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red, #ff4d4d);
  border: 2px solid var(--card);
  animation: rt-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes rt-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* ---------- Panel admin de escritorio: sidebar fija en vez de pills arriba ----------
   En mobile el panel se queda igual que siempre (pills horizontales, todo
   apilado en una columna). En pantallas anchas pasa a verse como cualquier
   otro dashboard: nav vertical fija a la izquierda + contenido a la derecha,
   usando el ancho real de la pantalla en vez de una columna angosta centrada.
   Ver .admin-wrap/.tabs/section[id^="tab-"] arriba, que son los unicos hijos
   directos de .admin-wrap en flujo normal (los .sheet-overlay de los modales
   son position:fixed, asi que el grid de abajo ni los toca). */
@media (min-width: 980px) {
  .admin-wrap {
    max-width: 1360px;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-areas:
      "top  top"
      "nav  main";
    align-items: start;
    gap: 16px 28px;
  }
  .store-link-panel { grid-area: top; margin: 0; }
  .tabs {
    grid-area: nav;
    position: sticky;
    top: 20px;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 3px;
    margin-bottom: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
  }
  .tabs .tab-btn {
    justify-content: flex-start;
    width: 100%;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
  }
  .tabs .tab-btn-icon { width: 17px; height: 17px; }
  .tabs .tab-btn:hover { transform: none; box-shadow: none; background: var(--bg); }
  .tabs .tab-btn.active { box-shadow: none; }
  section[id^="tab-"] { grid-area: main; min-width: 0; }
}

.rt-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--dark);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px #00000040;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
  pointer-events: none;
}
.rt-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.config-subnav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.config-subnav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.config-subnav-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.config-subnav-btn:hover { background: var(--bg); color: var(--text); }
.config-subnav-btn.active { background: var(--primary); color: #fff; }

/* ---------- Tarjetas de plan ---------- */
.plan-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 720px) {
  .plan-cards-grid { grid-template-columns: 1fr; }
}
.plan-card {
  position: relative;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.plan-card-icon { display: inline-flex; margin-bottom: 4px; color: var(--primary); }
.plan-card-icon svg { width: 26px; height: 26px; }
.plan-card-premium .plan-card-icon { color: var(--primary-light, #ffa96b); }
.plan-card h3 { margin: 0 0 2px; font-size: 1.1rem; }
.plan-card-price { font-size: 1.5rem; font-weight: 800; margin: 0 0 12px; }
.plan-card-price span { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.plan-card-features { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.plan-card-features li {
  font-size: 0.82rem;
  padding-left: 20px;
  position: relative;
  color: var(--text);
}
.plan-card-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
.plan-card-btn { width: 100%; text-align: center; }
.plan-card-current-tag {
  display: none;
  position: absolute;
  top: -11px;
  left: 18px;
  background: var(--dark);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-card.is-current-plan { border-color: var(--dark); box-shadow: 0 4px 16px #1717171f; }
.plan-card.is-current-plan .plan-card-current-tag { display: inline-block; }
.plan-card-popular-tag {
  position: absolute;
  top: -11px;
  right: 18px;
  background: var(--primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-card-pro { border-color: var(--primary-light); }
.plan-card-pro.is-current-plan { border-color: var(--dark); }

.plan-card-premium {
  background: linear-gradient(160deg, #23211d 0%, #171717 55%, #2b1d0c 100%);
  border: 1.5px solid #3a2f1e;
  color: #fff;
  overflow: hidden;
}
.plan-card-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, #ffa96b29, transparent 55%);
  pointer-events: none;
}
.plan-card-premium::after {
  content: 'PREMIUM';
  position: absolute;
  top: 14px;
  right: -34px;
  transform: rotate(45deg);
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  color: #171717;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 40px;
  box-shadow: 0 2px 8px #00000059;
}
.plan-card-premium h3, .plan-card-premium .plan-card-price { color: #fff; }
.plan-card-premium .plan-card-price span { color: #c9beae; }
.plan-card-premium .plan-card-features li { color: #eee8de; }
.plan-card-premium .plan-card-features li::before { color: var(--primary-light); }
.plan-card-premium .plan-card-current-tag {
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  color: #171717;
  box-shadow: 0 2px 10px #ffa96b59;
}
.plan-card-premium:hover { box-shadow: 0 10px 28px #00000066; }
.plan-card-premium.is-current-plan { border-color: var(--primary-light); box-shadow: 0 4px 20px #ffa96b4c; }

.config-save-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  position: sticky;
  top: 8px;
  z-index: 5;
}
.config-save-bar .error-text,
.config-save-bar .success-box { margin: 0; flex: 1 1 auto; min-width: 160px; }
.config-save-bar .success-box p { margin: 0; }


.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.panel h2 { margin-top: 0; font-size: 1.05rem; }
.panel-hint { color: var(--muted); font-size: 0.8rem; margin: -8px 0 16px; }

.theme-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.theme-panel-header h2 { margin: 0; }
/* .theme-panel-header h2 pierde el margin-bottom que .panel-hint (arriba) descuenta
   con su margin-top negativo: sin este margin-bottom el badge de plan (Free/Pro/Premium)
   termina superpuesto sobre la primera linea del parrafo de abajo. Afecta a los paneles
   "Tema de la tienda", "Diseno avanzado" y "Sucursales". */
.plan-badge {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
}
.plan-badge.is-pro { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }

.theme-locked {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.theme-locked p { margin: 0; font-size: 0.86rem; color: var(--text); }

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: #d8d8dc;
  position: relative;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000040;
  transition: transform 0.15s ease;
}
.toggle-switch input:checked + .toggle-track { background: var(--green); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; }

.theme-color-row { display: flex; align-items: center; gap: 12px; }
.theme-color-row input[type="color"] {
  width: 52px;
  height: 40px;
  padding: 4px;
  cursor: pointer;
}

.admin-form { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.admin-form .full { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .admin-form { grid-template-columns: 1fr; }
  .admin-topbar { flex-wrap: wrap; gap: 8px; }
  .store-link-panel { flex-direction: column; align-items: flex-start; }
  .tabs { flex-wrap: wrap; }
  /* Las tablas de Productos/Pedidos/Cupones/Personal/Estadisticas tienen mas
     columnas de las que entran en mobile, asi que su ancho natural (auto layout)
     supera el viewport y .table-wrap las deja scrollear horizontal -- a proposito,
     para no perder columnas cuando hay datos. Pero cuando la tabla solo tiene la
     fila vacia (.table-empty-row, "Todavia no cargaste productos", etc.) ese mismo
     ancho de header hace que el mensaje centrado quede cortado/desplazado fuera de
     la pantalla visible. Si la tabla no tiene mas fila que esa, la forzamos a 100%
     del contenedor para que el texto se vea realmente centrado.*/
  .table-wrap:has(.table-empty-row) thead { display: none; }
  .table-empty-row td { white-space: normal; }
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
th { color: var(--muted); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover { background: var(--bg); }
tbody tr.table-empty-row:hover { background: none; }
.table-wrap { overflow-x: auto; }

/* ---------- Product management (modal + table) ---------- */
.products-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.products-toolbar h2 { margin: 0; }
#product-search { margin-bottom: 14px; }

.table-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg);
  display: block;
}

.stock-cell-zero { color: var(--red); font-weight: 700; }
.stock-cell-low { color: var(--orange); font-weight: 700; }

.table-empty-row td { text-align: center; color: var(--muted); padding: 24px 8px; }

.product-form-sheet { max-width: 460px; }

.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
@media (max-width: 480px) {
  .field-row { flex-direction: column; gap: 14px; }
}
.field-hint { margin: -4px 0 10px; font-size: 0.78rem; color: var(--muted); }

.image-picker { display: flex; gap: 10px; align-items: center; }
.image-preview {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.62rem;
  text-align: center;
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-upload-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.image-upload-row .field-hint { margin: 0; }

.variant-group-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
}
.variant-group-header { display: flex; gap: 8px; margin-bottom: 10px; }
.variant-group-name { flex: 1; }
.variant-group-remove {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  width: 40px;
  cursor: pointer;
  font-size: 1rem;
}
.variant-group-remove:hover { color: var(--red); border-color: var(--red); }

.variant-options-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.variant-option-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 6px 5px 10px;
  font-size: 0.82rem;
}
.variant-option-chip button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 2px;
}
.variant-option-chip button:hover { color: var(--red); }
.variant-option-input {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 0.82rem;
  width: 140px;
}

.order-items-list { margin: 0; padding: 0; list-style: none; font-size: 0.84rem; }
.order-items-list li { padding: 2px 0; }

.extras-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: 0.86rem;
}
.extras-row .extra-price { color: var(--muted); margin-right: 10px; }
.extras-row button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
}
.extras-row button:hover { color: var(--red); }
.extra-add-row { display: flex; gap: 8px; align-items: center; }
.extra-add-row input[type="text"] { flex: 2; }
.extra-add-row input[type="number"] { flex: 1; }
/* .extra-add-row se usa para extras de producto y zonas de envio (generales y
   por sucursal): con las 3 columnas (nombre flex:2, precio/costo flex:1, boton)
   comprimidas en mobile, el input numerico queda tan angosto que su placeholder
   ("Costo", "Precio") se corta a una sola letra. Lo pasamos a dos filas. */
@media (max-width: 480px) {
  .extra-add-row { flex-wrap: wrap; }
  .extra-add-row input[type="text"] { flex: 1 1 100%; }
  .extra-add-row input[type="number"] { flex: 1 1 auto; min-width: 90px; }
}

.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; }

.hours-mode-choice { display: flex; gap: 16px; flex-wrap: wrap; }
.hours-mode-option { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; cursor: pointer; }
.hours-mode-option input { cursor: pointer; }

.business-hours-list { display: flex; flex-direction: column; gap: 6px; }
.business-hours-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  flex-wrap: wrap;
}
.business-hours-row .bh-day { flex: 0 0 90px; font-weight: 600; }
.business-hours-row .bh-open-toggle { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.business-hours-row .bh-times { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 180px; }
.business-hours-row .bh-times input[type="time"] { flex: 1; min-width: 0; }
.business-hours-row.is-closed { color: var(--muted); }

.scheduled-closures-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.scheduled-closure-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
}
.scheduled-closure-date { flex: 0 0 auto; font-weight: 700; }
.scheduled-closure-message { flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheduled-closure-remove {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.scheduled-closure-remove:hover { color: var(--red); }
.coupon-row button { flex-shrink: 0; }

.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; }
/* La regla global "select, input, textarea { width: 100% }" tambien pega en
   los checkbox -- adentro de un flex con flex-basis:auto (ver .permissions-grid
   mas abajo) eso hace que el checkbox ocupe TODO el ancho del flex item en vez
   de su tamaño chico normal, empujando el texto del label bien lejos. Ancho
   fijo aca lo resuelve para cualquier checkbox del sitio, no solo el grid de
   permisos donde se noto. */
.checkbox-label input { cursor: pointer; width: 16px; flex: 0 0 auto; }

.permissions-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.permissions-grid .checkbox-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}
.permissions-grid .checkbox-label input { flex: 0 0 auto; margin: 0; }
.permissions-grid .checkbox-label span { text-align: left; }
@media (min-width: 600px) {
  .permissions-grid { flex-direction: row; flex-wrap: wrap; }
  .permissions-grid .checkbox-label { width: auto; flex: 0 1 180px; }
}
.staff-permissions-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.staff-permission-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: #ff6b001a;
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---------- Caja (venta de mostrador, tipo POS) ---------- */
.register-layout { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) {
  .register-layout { grid-template-columns: 1fr 320px; align-items: start; }
}
.register-cart-panel { position: sticky; top: 20px; }
.register-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
  max-height: 70vh;
  overflow-y: auto;
}
.register-product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.register-product-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.register-product-card:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.register-product-card img { width: 100%; height: 84px; object-fit: cover; background: var(--card); }
.register-product-card-body { padding: 8px 10px; }
.register-product-card-name { font-size: 0.8rem; font-weight: 700; line-height: 1.25; }
.register-product-card-price { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.register-cart-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.register-cart-row { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; }
.register-cart-row-info { flex: 1; min-width: 0; }
.register-cart-row-name { font-weight: 600; }
.register-cart-row-detail { color: var(--muted); font-size: 0.76rem; }
.register-cart-row-qty { display: flex; align-items: center; gap: 4px; }
.register-cart-row-qty button {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; line-height: 1; font-weight: 700;
}
.register-cart-row-total { font-weight: 700; min-width: 60px; text-align: right; }
.register-cart-row-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.register-cart-row-remove:hover { color: var(--red); }
.register-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.15rem; font-weight: 800; padding: 10px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 12px;
}

.variant-stock-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.variant-stock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  flex-wrap: wrap;
}
.variant-stock-row .vs-combo { flex: 1; min-width: 140px; font-weight: 600; }
.variant-stock-row .vs-stock { flex: 0 0 90px; }
.variant-stock-empty { color: var(--muted); font-size: 0.84rem; margin-top: 6px; }

.plan-upgrade-row { display: flex; gap: 10px; flex-wrap: wrap; }

.category-order-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.category-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
}
.category-order-row .co-name { flex: 1; font-weight: 600; }
.category-order-row .co-move { display: flex; gap: 4px; }
.category-order-row button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  color: var(--muted);
}
.category-order-row button:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.category-order-row button:disabled { opacity: 0.35; cursor: default; }
.category-order-empty { color: var(--muted); font-size: 0.84rem; }
.order-items-list .variants-note { color: var(--muted); font-size: 0.78rem; }

/* ---- Temas prearmados y guardados (plan Premium) ---- */
.theme-presets-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.theme-preset-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  width: 86px;
}
.theme-preset-swatch:hover { border-color: var(--primary); }
.theme-preset-swatch-colors {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.theme-preset-swatch-colors span { flex: 1; }
.theme-preset-swatch-name { font-size: 0.74rem; font-weight: 600; text-align: center; }

.saved-themes-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.saved-theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
}
.saved-theme-row .st-swatch { display: flex; width: 40px; height: 22px; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.saved-theme-row .st-swatch span { flex: 1; }
.saved-theme-row .st-name { flex: 1; font-weight: 600; }
.saved-theme-row .st-actions { display: flex; gap: 6px; }
.saved-theme-row button { flex-shrink: 0; }
.saved-themes-empty { color: var(--muted); font-size: 0.84rem; }

/* ---- Sucursales (multi-sucursal, plan Premium) ---- */
.branches-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.branch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.branch-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.branch-card-info strong { font-size: 0.9rem; }
.branch-card-info span { font-size: 0.8rem; color: var(--muted); }
.branch-card-actions { display: flex; gap: 8px; flex-shrink: 0; }

.branch-form {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.branch-form h3 { margin: 0; font-size: 1rem; }
@media (max-width: 480px) {
  .branch-card { flex-direction: column; align-items: stretch; }
  .branch-card-actions { justify-content: flex-end; }
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}
.login-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 28px;
  max-width: 360px;
  width: 100%;
}
.login-card h2 { margin-top: 0; }
.login-card-logo { width: 34px; height: auto; margin-bottom: 10px; }
.login-hint { font-size: 0.78rem; color: var(--muted); margin-top: 10px; text-align: center; }
.back-link {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 14px;
}
.back-link:hover { color: var(--text); }

.store-link-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.86rem;
}
.store-link-text { color: var(--primary-dark); font-weight: 700; word-break: break-all; }

/* ---------- Landing page ---------- */
.landing-body {
  background: var(--bg);
  font-family: 'Inter', -apple-system, sans-serif;
}
.landing-body h1,
.landing-body h2,
.landing-body h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.landing-nav {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
}
.landing-brand {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}
.landing-brand-mark { width: 22px; height: auto; }
.landing-nav-actions { display: flex; align-items: baseline; gap: 22px; }
.landing-nav-actions a { font-size: 0.88rem; text-decoration: none; color: var(--text); white-space: nowrap; }
.landing-nav-actions a:first-child { color: var(--muted); }
.landing-nav-cta { border-bottom: 1.5px solid var(--primary); padding-bottom: 1px; font-weight: 600; }
@media (max-width: 420px) {
  .landing-nav-actions { gap: 12px; }
  .landing-nav-actions a { font-size: 0.8rem; }
}

.landing-hero {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 24px 70px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 780px) {
  .landing-hero { grid-template-columns: 1fr; padding-bottom: 40px; }
}

.landing-hero h1 {
  font-size: 2.6rem;
  line-height: 1.12;
  margin: 0 0 20px;
}
.landing-subtitle {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 440px;
  margin: 0 0 26px;
}
.landing-hero-cta {
  display: inline-block;
  background: var(--dark);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 22px;
  border-radius: 8px;
}
.landing-hero-cta:hover { background: var(--primary-dark); }
.landing-hero-fine {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

/* Whatsapp-style chat mockup */
.chat-mock {
  background: #ffdfc7;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 45px -18px #141e1959;
  transform: rotate(1.2deg);
  max-width: 340px;
  margin: 0 auto;
}
.chat-mock-header {
  background: var(--dark);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 12px 16px;
}
.chat-mock-body { padding: 16px; }
.chat-bubble {
  background: #ffffff;
  border-radius: 4px 12px 12px 12px;
  padding: 12px 14px;
  font-size: 0.72rem;
  line-height: 1.55;
  color: #202020;
  box-shadow: 0 1px 2px #00000014;
  position: relative;
}
.chat-bubble p { margin: 0; }
.chat-bubble-time {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 0.62rem;
  margin-top: 4px;
}

.landing-eyebrow {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 22px;
  font-weight: 600;
}

.landing-list-section {
  max-width: 780px;
  margin: 0 auto;
  padding: 50px 24px;
  border-top: 1px solid var(--border);
}

.landing-list-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.landing-list-row:last-child { border-bottom: none; }
.landing-list-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  color: #cfcac0;
}
.landing-list-row h3 { margin: 0 0 6px; font-size: 1.05rem; }
.landing-list-row p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; max-width: 480px; }

.landing-steps-section {
  max-width: 780px;
  margin: 0 auto;
  padding: 50px 24px;
  border-top: 1px solid var(--border);
}

.landing-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.landing-timeline li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 18px;
  padding-bottom: 30px;
  position: relative;
}
.landing-timeline li:last-child { padding-bottom: 0; }
.landing-timeline li::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.landing-timeline li:last-child::before { display: none; }
.landing-timeline-mark {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--dark);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}
.landing-timeline h3 { margin: 0 0 4px; font-size: 1rem; }
.landing-timeline p { margin: 0; color: var(--muted); font-size: 0.86rem; }

.landing-closing {
  max-width: 780px;
  margin: 0 auto;
  padding: 60px 24px 70px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.landing-closing h2 { font-size: 1.7rem; margin: 0 0 20px; }

.landing-footer {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 24px 40px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.76rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 500px) {
  .landing-footer { flex-direction: column; gap: 4px; }
}

.landing-footer-links { display: flex; gap: 14px; }
.landing-footer-links a { text-decoration: underline; }
@media (max-width: 500px) {
  .landing-footer-links { gap: 12px; flex-wrap: wrap; }
}

/* Paginas legales (terminos, privacidad) */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 70px;
}
.legal-page .back-link {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 0.86rem;
  text-decoration: none;
}
.legal-page h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 6px;
}
.legal-page .legal-updated {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 32px;
}
.legal-page h2 {
  font-size: 1.05rem;
  margin: 34px 0 10px;
}
.legal-page p, .legal-page li {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.65;
}
.legal-page ul, .legal-page ol { padding-left: 20px; }
.legal-page li { margin-bottom: 6px; }
.legal-page strong { font-weight: 700; }
.legal-page .legal-nav {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.84rem;
}
.legal-page .legal-nav a { text-decoration: underline; color: var(--muted); }

/* Boton de arrepentimiento */
.regret-box {
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 18px 0;
}
.regret-box h3 { margin: 0 0 8px; font-size: 0.95rem; }
.regret-box p { margin: 0 0 10px; font-size: 0.88rem; }
.regret-box a.btn-secondary { display: inline-block; text-decoration: none; }

/* Checklist de primeros pasos, solo para tiendas nuevas (ver
   renderWelcomeChecklist en admin.js) -- se oculta solo cuando ya cargaron
   un producto y un WhatsApp, o si el dueño la cierra a mano. */
.welcome-checklist { background: #fff7ed; border: 1px solid #fed7aa; }
.welcome-checklist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.welcome-checklist-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.welcome-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}
.welcome-step:hover { transform: translateY(-1px); }
.welcome-step-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.welcome-step.done { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.welcome-step.done .welcome-step-check { border-color: #22c55e; background: #22c55e; }
.welcome-step.done span:last-child { text-decoration: line-through; opacity: 0.8; }

/* Aviso de prueba gratis / tienda pausada en el panel admin */
.trial-banner {
  padding: 12px 20px;
  font-size: 0.86rem;
  text-align: center;
}
.trial-banner a { text-decoration: underline; font-weight: 700; }
.trial-banner.trial-warning { background: var(--yellow); color: var(--dark); }
.trial-banner.trial-grace { background: var(--orange); color: #fff; }
.trial-banner.trial-paused { background: var(--red); color: #fff; }

/* ---------- Planes y precios ---------- */
.landing-pricing-section {
  max-width: 780px;
  margin: 0 auto;
  padding: 50px 24px;
  border-top: 1px solid var(--border);
}
.landing-pricing-section:has(.pricing-grid-3) { max-width: 1020px; }

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (min-width: 621px) and (max-width: 860px) {
  .pricing-grid-3 { grid-template-columns: 1fr 1fr; }
}

.pricing-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.pricing-card-highlight {
  border-color: var(--dark);
  background: var(--dark);
  color: #fff;
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 26px;
  margin: 0;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 999px;
}

.pricing-card h3 {
  margin: 0 0 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
}

.pricing-price {
  margin: 0 0 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
}
.pricing-price span {
  display: block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--muted);
}
.pricing-card-highlight .pricing-price span { color: #b7b7b2; }

.pricing-desc {
  margin: 0 0 20px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}
.pricing-card-highlight .pricing-desc { color: #cfcfc9; }

.pricing-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex-grow: 1;
}
.pricing-features li {
  font-size: 0.86rem;
  padding: 9px 0 9px 22px;
  border-top: 1px solid var(--border);
  position: relative;
}
.pricing-features li:first-child { border-top: none; }
.pricing-card-highlight .pricing-features li { border-top-color: #ffffff24; }
.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--primary);
  border-bottom: 1.6px solid var(--primary);
  transform: rotate(-45deg);
}
.pricing-card-highlight .pricing-features li::before { border-color: var(--green); }

.pricing-cta {
  display: block;
  text-align: center;
  background: var(--dark);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 20px;
  border-radius: 8px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.pricing-card-highlight .pricing-cta { background: var(--primary); }
.pricing-card-highlight .pricing-cta:hover { background: var(--primary-dark); }
.pricing-cta-secondary { background: transparent; color: var(--text); border: 1.5px solid var(--dark); }
.pricing-cta-secondary:hover { background: var(--dark); color: #fff; }
.pricing-cta:hover { transform: translateY(-1px); }

.pricing-fine {
  margin: 12px 0 0;
  font-size: 0.74rem;
  text-align: center;
  color: #b7b7b2;
}

/* ---------- Animaciones ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  .landing-list-row,
  .landing-timeline li,
  .pricing-card {
    transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .landing-list-row:hover,
  .landing-timeline li:hover { transform: translateX(3px); }
  .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

  @keyframes hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .landing-hero-text > * {
    opacity: 0;
    animation: hero-in 0.7s ease forwards;
  }
  .landing-hero-text h1 { animation-delay: 0.05s; }
  .landing-subtitle { animation-delay: 0.16s; }
  .landing-hero-cta { animation-delay: 0.27s; }
  .landing-hero-fine { animation-delay: 0.36s; }

  @keyframes chat-in {
    from { opacity: 0; transform: rotate(1.2deg) translateY(22px) scale(0.97); }
    to { opacity: 1; transform: rotate(1.2deg) translateY(0) scale(1); }
  }
  .chat-mock {
    opacity: 0;
    animation: chat-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s forwards;
  }

  @keyframes check-in {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
  }
  .chat-bubble-time svg {
    opacity: 0;
    animation: check-in 0.3s ease 1.1s forwards;
  }

  .landing-hero-cta { transition: background 0.15s ease, transform 0.15s ease; }
  .landing-hero-cta:active { transform: scale(0.97); }
  .landing-nav-cta { transition: opacity 0.15s ease; }
  .landing-nav-cta:hover { opacity: 0.7; }
}

/* ---------- Tabla comparativa (paginas "alternativa a") ---------- */
.compare-section {
  max-width: 780px;
  margin: 0 auto;
  padding: 50px 24px;
  border-top: 1px solid var(--border);
}
.compare-table-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.compare-table th, .compare-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}
.compare-table th.compare-yumi-col { color: var(--primary-dark); }
.compare-table td.compare-yumi-col { font-weight: 600; }
.compare-fine {
  margin: 16px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- Blog ---------- */
.blog-list-section {
  max-width: 780px;
  margin: 0 auto;
  padding: 50px 24px 70px;
}
.blog-post-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.blog-post-row:last-child { border-bottom: none; }
.blog-post-thumb {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .blog-post-thumb { display: none; }
}
.blog-post-row h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.blog-post-row p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

.blog-post-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 70px;
}
.blog-post-page .back-link {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 0.86rem;
  text-decoration: none;
}
.blog-post-page .post-eyebrow {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 10px;
}
.blog-post-page h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 28px;
}
.blog-post-page h2 { font-size: 1.15rem; margin: 32px 0 10px; }
.blog-post-page p, .blog-post-page li { font-size: 0.94rem; line-height: 1.7; color: var(--text); }
.blog-post-page ul, .blog-post-page ol { padding-left: 20px; }
.blog-post-page li { margin-bottom: 6px; }
.blog-post-page .post-cta {
  margin-top: 40px;
  padding: 26px;
  background: var(--dark);
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
}
.blog-post-page .post-cta p { color: #cfcfc9; margin: 0 0 16px; }
.blog-post-page .post-cta .landing-hero-cta { background: var(--primary); }
.blog-post-page .post-cta .landing-hero-cta:hover { background: var(--primary-dark); }

.blog-post-page .post-faq { margin-top: 40px; }
.blog-post-page .post-faq h2 { margin: 0 0 6px; }
.blog-post-page .post-faq details { border-top: 1px solid var(--border); padding: 14px 0; }
.blog-post-page .post-faq details:last-child { border-bottom: 1px solid var(--border); }
.blog-post-page .post-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.94rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.blog-post-page .post-faq summary::-webkit-details-marker { display: none; }
.blog-post-page .post-faq summary::after { content: '+'; color: var(--primary); font-size: 1.2rem; flex-shrink: 0; }
.blog-post-page .post-faq details[open] summary::after { content: '\2212'; }
.blog-post-page .post-faq .faq-answer { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

.blog-post-page .post-related { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
.blog-post-page .post-related p { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; margin: 0 0 12px; }
.blog-post-page .post-related a { display: block; font-size: 0.9rem; color: var(--text); text-decoration: none; margin-bottom: 8px; font-weight: 500; }
.blog-post-page .post-related a:hover { color: var(--primary-dark); text-decoration: underline; }

/* ---------- Estadisticas (barras simples, sin libreria de graficos) ---------- */
.stats-bar-chart { display: flex; flex-direction: column; gap: 8px; }
.stats-bar-row { display: grid; grid-template-columns: 90px 1fr 42px; align-items: center; gap: 10px; }
.stats-bar-label { font-size: 0.8rem; color: var(--muted); }
.stats-bar-track { background: var(--border); border-radius: var(--radius-sm); height: 14px; overflow: hidden; }
.stats-bar-fill { background: var(--primary); height: 100%; border-radius: var(--radius-sm); min-width: 2px; }
.stats-bar-count { font-size: 0.8rem; color: var(--text); text-align: right; }

.stats-range-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.stats-preset-btn { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; }
.stats-preset-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.stats-custom-range { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }
.stats-custom-range .field { margin: 0; }
.stat-delta { font-size: 0.78rem; color: var(--muted); }
.stat-delta.stat-delta-up { color: var(--green); }
.stat-delta.stat-delta-down { color: var(--red); }

/* ---------- Tienda publica: mejoras de UI/UX ---------- */

/* 1) Confirmacion visual al agregar un producto: la barra flotante "pega un
   salto" en vez de solo cambiar un numero chico, para que se note de verdad. */
@keyframes floating-cart-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.floating-cart-bump .floating-cart-inner { animation: floating-cart-bump 0.32s ease; }

/* 2) Notas/cupon agrupados en un <details> para no alargar el formulario de
   checkout con campos opcionales que la mayoria no usa. */
.optional-extras {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px 14px;
  margin: 4px 0 16px;
}
.optional-extras[open] { padding-bottom: 12px; }
.optional-extras summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 0.86rem;
  font-weight: 600;
  list-style: none;
}
.optional-extras summary::-webkit-details-marker { display: none; }
.optional-extras summary::before {
  content: '+';
  display: inline-block;
  width: 16px;
  color: var(--primary-dark);
  font-weight: 800;
}
.optional-extras[open] summary::before { content: '−'; }
.optional-extras-hint { color: var(--muted); font-weight: 500; }
.optional-extras .field:last-child { margin-bottom: 0; }

/* 4) Boton de compartir: en pantallas con lugar de sobra, muestra el texto
   ademas del icono (en mobile se queda solo con el icono, como ya estaba). */
.share-btn-label { display: none; }
@media (min-width: 640px) {
  .share-btn {
    width: auto;
    border-radius: 999px;
    padding: 0 16px 0 14px;
    gap: 7px;
  }
  .share-btn-label { display: inline; font-size: 0.84rem; font-weight: 600; }
}

/* 5) El carrito puede tener muchos items: que el boton "Continuar" quede
   siempre a la vista abajo, en vez de tener que scrollear toda la lista. */
#cart-sheet .sheet {
  display: flex;
  flex-direction: column;
}
#cart-sheet #cart-items {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 60px;
}
#cart-sheet .subtotal-row,
#cart-sheet #checkout-btn,
#cart-sheet #close-cart-btn {
  flex-shrink: 0;
}

/* 6) Que se note mas cual variante/extra esta elegido: antes solo cambiaba
   un borde fino de color, dificil de ver de reojo en una pantalla chica. */
.variant-option.selected {
  border-width: 2px;
  font-weight: 700;
}
.variant-option.selected::before {
  content: '✓';
  margin-right: 5px;
  font-weight: 700;
}

/* 7) Orden manual de productos (Premium): flechas subir/bajar en la tabla. */
.order-cell {
  white-space: nowrap;
}
.btn-icon {
  border: 1px solid var(--border, #ddd);
  background: #fff;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  margin-right: 4px;
}
.btn-icon:disabled {
  opacity: 0.35;
  cursor: default;
}
.premium-only-col {
  white-space: nowrap;
}

/* 8) Panel de superadmin: tarjetas de metricas del resumen general. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.stat-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card-highlight {
  background: #171717;
  border-color: #171717;
  color: #fff;
}
.stat-label {
  font-size: 0.78rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.stat-card-highlight .stat-label {
  color: #ffffffa6;
}
.stat-card-highlight .stat-delta {
  color: #ffffffbf;
}
.stat-card-highlight .stat-delta.stat-delta-up { color: var(--green); }
.stat-card-highlight .stat-delta.stat-delta-down { color: #ff8080; }
.stat-value {
  font-size: 1.55rem;
  font-weight: 700;
}
.sa-tenant-actions {
  white-space: nowrap;
}

/* 9) Novedades, testimonios, carrusel de banner, imagen por categoria y
   coleccion curada -- panel admin. */
.posts-list, .testimonials-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post-card, .testimonial-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 12px;
}
.post-card img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.post-card-body, .testimonial-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.post-card-body p, .testimonial-card-body p {
  margin: 0 0 4px;
  font-size: 0.88rem;
}
.post-card-date, .testimonial-card-meta {
  font-size: 0.76rem;
  color: #888;
}
.testimonial-card-meta strong {
  color: #171717;
}

.banner-carousel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.banner-carousel-item {
  position: relative;
  width: 96px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.banner-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-carousel-item button {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #00000099;
  color: #fff;
  border: none;
  border-radius: 6px;
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  cursor: pointer;
  line-height: 1;
}

.category-images-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.category-image-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.category-image-row .image-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
}
.category-image-row .category-image-name {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 0.88rem;
}

.curated-products-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 8px;
}
.curated-products-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 400;
}

/* 10) Tienda publica: chip de categoria con foto, producto destacado grande,
   novedades, testimonios, sobre nosotros, redes sociales. */
.chip-with-image {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip-with-image img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.hero-product-wrap {
  margin-bottom: 18px;
}
.product-card-hero {
  flex-direction: row;
  align-items: stretch;
  height: 260px;
}
.product-card-hero .product-image {
  width: 45%;
  height: 100%;
  aspect-ratio: unset;
  flex-shrink: 0;
}
.product-card-hero .product-body {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 18px 20px;
  min-width: 0;
}
.product-card-hero .product-footer {
  margin-top: auto;
}
.product-card-hero h3 {
  font-size: 1.15rem;
}
@media (max-width: 560px) {
  .product-card-hero {
    flex-direction: column;
    height: auto;
  }
  .product-card-hero .product-image {
    width: 100%;
    height: 160px;
  }
}

.content-section {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 0 16px;
}
.content-section .section-title {
  margin-bottom: 12px;
}

.posts-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-feed-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid #eee;
}
.post-feed-card img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.post-feed-body p {
  margin: 0 0 4px;
  font-size: 0.9rem;
}
.post-feed-date {
  font-size: 0.76rem;
  color: #888;
}

.testimonials-feed {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.testimonial-feed-card {
  flex: 0 0 240px;
  background: var(--card);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #eee;
}
.testimonial-feed-stars {
  color: var(--yellow);
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.testimonial-feed-card p {
  font-size: 0.88rem;
  margin: 6px 0;
  font-style: italic;
}
.testimonial-feed-author {
  font-size: 0.8rem;
  font-weight: 700;
}

.review-stars {
  display: flex;
  gap: 4px;
}
.review-stars button {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: #ddd;
  cursor: pointer;
  padding: 2px;
}
.review-stars button.selected {
  color: var(--yellow);
}

#about-text {
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 20px 0 0;
}
.social-link {
  color: var(--text);
  opacity: 0.7;
}
.social-link:hover {
  opacity: 1;
}

/* 11) Animaciones (plan Premium, opcional): presets fijos, nunca codigo del
   dueno -- ver applyAnimationStyle en store.js. Respetan
   prefers-reduced-motion, asi que nadie que pidio menos movimiento en su
   sistema lo ve igual. */
@keyframes yumi-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim-subtle .product-card,
.anim-dynamic .product-card {
  animation: yumi-fade-in 0.45s ease both;
}
.anim-subtle .product-image img,
.anim-dynamic .product-image img {
  transition: transform 0.35s ease;
}
.anim-subtle .product-card:hover .product-image img,
.anim-dynamic .product-card:hover .product-image img {
  transform: scale(1.04);
}

.anim-dynamic .product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.anim-dynamic .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -12px #0000002e;
}
.anim-dynamic .add-fab {
  transition: transform 0.2s ease;
}
.anim-dynamic .add-fab:hover {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .anim-subtle .product-card,
  .anim-dynamic .product-card,
  .anim-subtle .product-image img,
  .anim-dynamic .product-image img,
  .anim-dynamic .add-fab {
    animation: none !important;
    transition: none !important;
  }
}