/* ============================================================================
   FBF Tienda — Catálogo, categorías, logística e inventario
   ----------------------------------------------------------------------------
   Se monta únicamente en el panel FBF (.admin-workspace-body), que es de tema
   CLARO. La tienda es exclusiva de la Federación: no hay variante de club.
   Los tokens de radio, elevación y verde vienen de admin-refino.css.
   ============================================================================ */

#tienda-pro {
  --tp-ink: #0b2b20;
  --tp-ink-2: #3a5548;
  --tp-ink-3: #556d61;
  --tp-surface: #fff;
  --tp-line: rgba(6, 44, 31, .10);
  --tp-soft: #f2faf6;
  --tp-green: #0e7d52;
  --tp-green-bright: #14a067;
  --tp-gold-ink: #7a5a00;
  --tp-danger: #c62d38;
  --tp-r: var(--ad-r-md, 18px);
  --tp-r-sm: var(--ad-r-sm, 14px);
  --tp-shadow: var(--ad-e2, 0 2px 4px rgba(6,44,31,.07), 0 10px 24px rgba(6,44,31,.07));
  display: block;
  margin-top: 20px;
}

#tienda-pro .tp-root { display: grid; gap: 14px; }

#tienda-pro .tp-eyebrow {
  display: block;
  color: var(--tp-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#tienda-pro h3, #tienda-pro h4 {
  margin: 3px 0 0;
  color: var(--tp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  letter-spacing: -.035em;
}
#tienda-pro h3 { font-size: 19px; }
#tienda-pro h4 { font-size: 15px; }

#tienda-pro .tp-help,
#tienda-pro .tp-empty,
#tienda-pro .tp-count {
  margin: 0;
  color: var(--tp-ink-3);
  font-size: 11.5px;
  line-height: 1.55;
}
#tienda-pro .tp-help b { color: var(--tp-ink); }
#tienda-pro .tp-empty {
  padding: 24px;
  border: 1px dashed var(--tp-line);
  border-radius: var(--tp-r-sm);
  text-align: center;
}
#tienda-pro .tp-count { font-weight: 700; }

#tienda-pro .tp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

#tienda-pro .tp-flash {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--tp-r-sm);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
#tienda-pro .tp-flash.is-ok { background: rgba(20, 160, 103, .12); color: var(--tp-green); }
#tienda-pro .tp-flash.is-error { background: rgba(198, 45, 56, .10); color: var(--tp-danger); }

#tienda-pro .tp-warn {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(242, 183, 5, .34);
  border-radius: var(--tp-r-sm);
  background: rgba(242, 183, 5, .10);
  color: var(--tp-gold-ink);
  font-size: 11.5px;
  line-height: 1.55;
}
#tienda-pro .tp-warn b { font-variant-numeric: tabular-nums; }

/* ---------- Indicadores ---------- */
#tienda-pro .tp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#tienda-pro .tp-kpi {
  display: grid;
  gap: 3px;
  padding: 16px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow);
}
#tienda-pro .tp-kpi.is-warn { border-color: rgba(242, 183, 5, .42); }
#tienda-pro .tp-kpi span {
  color: var(--tp-ink-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#tienda-pro .tp-kpi strong {
  color: var(--tp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: 1.05;
}
#tienda-pro .tp-kpi small { color: var(--tp-ink-3); font-size: 11px; }

/* ---------- Pestañas ---------- */
#tienda-pro .tp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow);
}
#tienda-pro .tp-tabs button {
  flex: 1 1 auto;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--tp-r-sm);
  background: transparent;
  color: var(--tp-ink-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
#tienda-pro .tp-tabs button:hover { background: var(--tp-soft); color: var(--tp-green); }
#tienda-pro .tp-tabs button.active {
  background: linear-gradient(135deg, #0a5c3e, #04211a);
  color: #fff;
}

#tienda-pro .tp-view { display: grid; gap: 12px; }

/* ---------- Barra de filtros ---------- */
#tienda-pro .tp-toolbar { display: grid; gap: 8px; }
#tienda-pro .tp-toolbar input,
#tienda-pro .tp-toolbar select,
#tienda-pro .tp-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-sm);
  background: var(--tp-soft);
  color: var(--tp-ink);
  font: inherit;
  /* 16px exactos: por debajo, iOS hace zoom al enfocar. */
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#tienda-pro input:focus, #tienda-pro select:focus {
  outline: none;
  border-color: var(--tp-green-bright);
  box-shadow: 0 0 0 4px rgba(20, 160, 103, .14);
}

/* ---------- Producto ---------- */
#tienda-pro .tp-prods { display: grid; gap: 10px; }
#tienda-pro .tp-prod {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow);
  transition: transform .2s var(--ad-ease, ease), box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  #tienda-pro .tp-prod:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 160, 103, .30);
    box-shadow: var(--ad-e3, 0 4px 8px rgba(6,44,31,.08), 0 20px 44px rgba(6,44,31,.10));
  }
}
#tienda-pro .tp-prod-img {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--tp-r-sm);
  background: var(--tp-soft);
}
#tienda-pro .tp-prod-img img { width: 100%; height: 100%; object-fit: cover; }
#tienda-pro .tp-noimg {
  color: var(--tp-ink-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}
/* Contador de imágenes sobre la miniatura. Fondo OPACO a propósito: con
   transparencia el contraste depende de la foto que haya debajo, y sobre una
   imagen clara el número blanco desaparecía. 10px es el piso de legibilidad
   del sistema. */
#tienda-pro .tp-imgcount {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #04211a;
  color: #fff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
}
#tienda-pro .tp-prod-body { min-width: 0; }
#tienda-pro .tp-cat {
  display: inline-block;
  margin-bottom: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 160, 103, .12);
  color: var(--tp-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#tienda-pro .tp-prod-body strong {
  display: block;
  overflow: hidden;
  color: var(--tp-ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tienda-pro .tp-prod-body small { display: block; margin-top: 2px; color: var(--tp-ink-3); font-size: 11.5px; }
#tienda-pro .tp-prod-body s { opacity: .7; }
#tienda-pro .tp-prod-side { display: grid; gap: 5px; justify-items: end; text-align: right; }
#tienda-pro .tp-stock {
  display: grid;
  color: var(--tp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1;
}
#tienda-pro .tp-stock i {
  color: var(--tp-ink-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#tienda-pro .tp-prod-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--tp-line);
}

/* ---------- Estados ---------- */
#tienda-pro .tp-state {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
#tienda-pro .tp-state.is-ok { background: rgba(20, 160, 103, .14); color: var(--tp-green); }
#tienda-pro .tp-state.is-warn { background: rgba(242, 183, 5, .20); color: var(--tp-gold-ink); }
#tienda-pro .tp-state.is-danger { background: rgba(198, 45, 56, .12); color: var(--tp-danger); }
#tienda-pro .tp-state.is-off,
#tienda-pro .tp-state.is-void { background: rgba(6, 44, 31, .09); color: var(--tp-ink-3); }

/* ---------- Botones ---------- */
#tienda-pro .tp-btn {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s var(--ad-spring, ease), filter .2s ease, border-color .2s ease;
}
#tienda-pro .tp-btn-primary {
  background: linear-gradient(135deg, var(--tp-green), var(--tp-green-bright));
  color: #fff;
  box-shadow: var(--tp-shadow), inset 0 1px 0 rgba(255, 255, 255, .26);
}
#tienda-pro .tp-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
#tienda-pro .tp-btn-ghost { border-color: var(--tp-line); background: var(--tp-soft); color: var(--tp-ink); }
#tienda-pro .tp-btn-ghost:hover { border-color: var(--tp-green); }
#tienda-pro .tp-mini {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: var(--tp-soft);
  color: var(--tp-ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
#tienda-pro .tp-mini:hover { border-color: var(--tp-green); color: var(--tp-green); }
#tienda-pro .tp-mini.is-danger:hover { border-color: var(--tp-danger); color: var(--tp-danger); background: rgba(198, 45, 56, .06); }

/* ---------- Categorías ---------- */
#tienda-pro .tp-cats { display: grid; gap: 9px; }
#tienda-pro .tp-cat-card,
#tienda-pro .tp-zona {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 14px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow);
}
#tienda-pro .tp-cat-card strong,
#tienda-pro .tp-zona strong { display: block; color: var(--tp-ink); font-size: 13px; }
#tienda-pro .tp-cat-card small,
#tienda-pro .tp-zona small { display: block; margin-top: 2px; color: var(--tp-ink-3); font-size: 11.5px; }
#tienda-pro .tp-cat-nums,
#tienda-pro .tp-zona-nums { display: grid; justify-items: end; text-align: right; }
#tienda-pro .tp-cat-nums b,
#tienda-pro .tp-zona-nums b {
  color: var(--tp-ink);
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
#tienda-pro .tp-cat-nums i,
#tienda-pro .tp-zona-nums i {
  color: var(--tp-ink-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#tienda-pro .tp-zona.is-off { opacity: .58; }
#tienda-pro .tp-zona-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--tp-line); }

/* ---------- Formulario de zonas ---------- */
#tienda-pro .tp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow);
}
#tienda-pro .tp-field { display: grid; gap: 5px; min-width: 0; }
#tienda-pro .tp-col-2 { grid-column: span 2; }
#tienda-pro .tp-col-full { grid-column: 1 / -1; }
#tienda-pro label {
  color: var(--tp-ink-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---------- Paneles de inventario ---------- */
#tienda-pro .tp-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow);
}
#tienda-pro .tp-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--tp-line);
}
#tienda-pro .tp-bar-row:last-child { border-bottom: 0; }
#tienda-pro .tp-bar-name {
  min-width: 0;
  overflow: hidden;
  color: var(--tp-ink);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tienda-pro .tp-mov {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--tp-line);
}
#tienda-pro .tp-mov:last-child { border-bottom: 0; }
#tienda-pro .tp-mov strong { display: block; overflow: hidden; color: var(--tp-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#tienda-pro .tp-mov small { display: block; margin-top: 2px; color: var(--tp-ink-3); font-size: 10.5px; }
#tienda-pro .tp-mov b {
  font-family: var(--font-display, 'Archivo', sans-serif);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
#tienda-pro .tp-mov b.is-pos { color: var(--tp-green); }
#tienda-pro .tp-mov b.is-neg { color: var(--tp-danger); }
#tienda-pro .tp-mov i {
  color: var(--tp-ink-3);
  font-size: 10.5px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* ---------- Escritorio ---------- */
@media (min-width: 700px) {
  #tienda-pro .tp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #tienda-pro .tp-toolbar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  #tienda-pro .tp-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #tienda-pro .tp-col-2 { grid-column: span 2; }
  #tienda-pro .tp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #tienda-pro .tp-prod { grid-template-columns: 72px minmax(0, 1fr) auto auto; }
  #tienda-pro .tp-prod-img { width: 72px; height: 72px; }
  #tienda-pro .tp-prod-actions { grid-column: auto; padding-top: 0; border-top: 0; justify-content: flex-end; max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  #tienda-pro * { transition-duration: .01ms !important; }
}

@media print {
  #tienda-pro .tp-tabs,
  #tienda-pro .tp-toolbar,
  #tienda-pro .tp-prod-actions,
  #tienda-pro .tp-zona-actions,
  #tienda-pro .tp-btn,
  #tienda-pro .tp-mini { display: none !important; }
  #tienda-pro .tp-prod, #tienda-pro .tp-kpi, #tienda-pro .tp-panel { box-shadow: none; border-color: #bbb; }
}

/* En pantalla táctil los botones secundarios suben a 44px: 36px es cómodo con
   ratón y demasiado chico con el dedo. Se usa pointer:coarse en vez de un
   ancho de pantalla porque lo que importa es el dispositivo señalador, no el
   tamaño — una tablet ancha con dedo tiene el mismo problema. */
@media (pointer: coarse) {
  #tienda-pro .tp-mini { min-height: 44px; padding: 0 15px; font-size: 12px; }
  #tienda-pro .tp-tabs button { min-height: 46px; }
}