/* ══════════════════════════════════════════════════════════════
   catalogo.css — Piezas de producto COMPARTIDAS entre inicio.php
   (los "destacados") y productos/index.php (el catálogo completo).
   Se carga siempre desde components/header.php, en todas las
   páginas, junto con variables.css/header.css/footer.css.

   Si algún día quieres que el catálogo se vea distinto al inicio,
   este es el archivo que se edita — ambas páginas leen de aquí.
═══════════════════════════════════════════════════════════════ */

/* ── Filtros de categoría ── */
.filter-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 6px; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.ftab {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--card-bg); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--text-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ftab svg { width: 15px; height: 15px; }
.ftab.active, .ftab:active { background: var(--g2); border-color: var(--g2); color: #fff; }
.scroll-hint { display: none; font-size: .74rem; color: var(--text-3); gap: 5px; align-items: center; margin-bottom: 14px; }
.scroll-hint svg { width: 13px; height: 13px; }

/* ── Tarjetas grandes de categoría (entrada al catálogo) ──
   Lo primero que ve el cliente al entrar a /productos/ sin filtrar
   nada — así entra directo a lo que busca en vez de ver de golpe
   TODO el catálogo (que ya puede traer cientos de productos). */
.cat-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin-bottom: 8px;
}
.cat-tile {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 12px 12px 16px; text-align: center; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

/* Foto real de la categoría — sube tus 6 fotos a /img/categorias/
   (ver productos/index.php, $fotosPorCategoria). Si falta una foto,
   onerror le agrega .sin-foto y mostramos un fondo neutro en vez de
   un ícono roto. */
.cat-tile-foto {
  width: 100%; aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-s);
}
.cat-tile-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile-foto.sin-foto img { display: none; }
.cat-tile-foto.sin-foto { background: linear-gradient(135deg, var(--g2-soft), var(--blue-soft)); }

.cat-tile-nombre { font-size: .9rem; font-weight: 700; color: var(--text-1); }
.cat-tile-count { font-size: .72rem; color: var(--text-3); }

@media (max-width: 560px) {
  .cat-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ── Grid y tarjeta de producto ── */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.pcard {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.pcard-vis { position: relative; background: var(--bg-s); aspect-ratio: 1.3/1; display: flex; align-items: center; justify-content: center; }
.prod-ico { width: 62%; height: 62%; object-fit: contain; }
.pbadge { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: var(--r-pill); font-size: .68rem; font-weight: 800; color: #fff; }
.b-hot { background: var(--red); }
.b-new { background: var(--blue); }
.b-sale { background: var(--amber); }
.pstock { position: absolute; bottom: 10px; left: 10px; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); padding: 5px 10px; border-radius: var(--r-pill); font-size: .68rem; font-weight: 700; color: var(--red); }
.pstock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse 1.4s infinite; }
.pstock-out { background: rgba(255,255,255,.92); color: var(--text-3); }
/* Existencia REAL baja (Syscom sí nos deja jalar el número) — le da
   ese toque de "tienda seria" en vez de un simple sí/no disponible. */
.pstock-low { color: #A8760E; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.pcard-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.pcat { font-size: .68rem; font-weight: 700; color: var(--g2); text-transform: uppercase; letter-spacing: .03em; }
.pname { font-size: .95rem; font-weight: 700; margin: 6px 0; line-height: 1.3; }
.pdesc { font-size: .78rem; color: var(--text-2); line-height: 1.5; margin-bottom: 10px; }
.pspecs { display: flex; flex-wrap: wrap; gap: 6px; }
.spec { font-size: .68rem; font-weight: 600; color: var(--text-2); background: var(--bg-s); padding: 4px 9px; border-radius: 6px; }

.cd-wrap { margin-top: 12px; padding: 8px 10px; background: var(--amber-soft); border-radius: var(--r-sm); }
.cd-label { font-size: .68rem; font-weight: 700; color: #A8760E; }
.cd-display { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.cd-seg { display: flex; flex-direction: column; align-items: center; }
.cd-num { font-size: .95rem; font-weight: 800; color: var(--text-1); font-variant-numeric: tabular-nums; }
.cd-unit { font-size: .58rem; color: var(--text-3); }
.cd-sep { font-weight: 800; color: var(--text-3); }

.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.p-was { font-size: .74rem; color: var(--text-3); text-decoration: line-through; display: block; }
.p-now { font-size: 1.05rem; font-weight: 800; color: var(--text-1); }
.p-soon { font-size: .82rem; font-weight: 700; color: var(--text-3); font-style: italic; }
.free-ship { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700; color: var(--g1); margin-left: 6px; }
.free-ship svg { width: 12px; height: 12px; }

.pbtn {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--g2), var(--g1)); color: #fff;
  padding: 10px 14px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 700;
}
.pbtn svg { width: 14px; height: 14px; }
.pbtn:active { transform: scale(.94); }
.pbtn:disabled { opacity: .5; }
.pbtn-disabled { background: var(--bg-s); color: var(--text-3); border: 1px solid var(--border); }

/* ── Feedback al agregar al carrito ──
   Antes no había ninguna señal de que sí se agregó — con 2-3 clics
   parecía que no pasaba nada hasta entrar al carrito a checar. Ahora
   el botón cambia un instante a "¡Agregado!" con un rebote chiquito
   (lo dispara js/carrito.js agregando/quitando esta clase). */
.pbtn.gt-agregado,
.pd-actions .btn.gt-agregado {
  animation: gtBotonAgregado .35s ease;
}
@keyframes gtBotonAgregado {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Caja de precios internos (SOLO admin) ──
   Aparece dentro de cada tarjeta y en la ficha de producto, pero
   únicamente cuando esAdmin() es true (components/admin-precio.php).
   La marcamos bien distinta (fondo ámbar) para que sea obvio que el
   cliente normal jamás la ve. */
.admin-precio-box {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(245, 166, 35, .08); border: 1px dashed var(--amber);
  font-size: .78rem;
}
.apb-head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; color: #A8760E; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .02em; font-size: .68rem;
}
.apb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; color: var(--text-2); }
.apb-row strong { color: var(--text-1); }
.apb-row.apb-actual strong { color: var(--g1); }

/* SKU de Syscom con botón de copiar — para no tener que buscarlo a
   mano en syscom.mx cada vez que Axel va a surtir un pedido. */
.apb-sku { display: flex; align-items: center; gap: 8px; font-family: monospace; font-size: .82rem; }
.apb-copy-btn {
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2);
  border-radius: var(--r-pill); padding: 2px 10px; font-size: .64rem; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.apb-copy-btn:hover { border-color: var(--g2); color: var(--g2); }
.apb-copy-btn.apb-copiado { border-color: var(--g2); color: #fff; background: var(--g2); }
.apb-warn {
  background: rgba(229, 72, 77, .1); color: var(--red); font-weight: 700;
  padding: 8px 10px; border-radius: var(--r-sm); margin: 6px 0; font-size: .74rem;
}
.apb-calc { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--amber); }
.apb-calc label { display: block; font-size: .72rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.apb-input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card-bg); color: var(--text-1); font-size: .88rem; font-weight: 700;
}
.apb-calc-result { margin-top: 8px; }
.apb-calc-line { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; color: var(--text-2); }
.apb-calc-line strong { color: var(--text-1); }
.apb-calc-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; font-weight: 700; }
.apb-hint { margin-top: 10px; font-size: .68rem; color: var(--text-3); line-height: 1.5; word-break: break-word; }
.apb-hint code { background: var(--bg-s); padding: 1px 5px; border-radius: 4px; font-size: .68rem; }

.apb-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.apb-guardar { width: 100%; justify-content: center; font-size: .82rem; padding: 10px; }
.apb-quitar {
  background: none; border: none; color: var(--red); font-size: .72rem; font-weight: 700;
  cursor: pointer; padding: 4px 0; text-decoration: underline; text-align: center;
}

.pwarranty { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--g1); font-weight: 600; margin-top: 12px; }
.pwarranty svg { width: 13px; height: 13px; }

.qv-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 9px; border-radius: var(--r-sm); border: 1px dashed var(--border); font-size: .76rem; font-weight: 600; color: var(--text-2); }

/* ── Panel de administrador (admin/index.php, clientes.php, pedidos.php) ──
   Vive aquí (no en un css nuevo) porque catalogo.css ya se carga en
   TODAS las páginas del sitio (lo incluye components/header.php), igual
   que .admin-precio-box de arriba — así no hay que dar de alta un
   nuevo <link> solo para 3 páginas que además ya cargan cuenta.css. */
.admin-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.admin-hub-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 20px; transition: border-color .15s ease, transform .15s ease;
}
.admin-hub-card:hover { border-color: var(--g2); transform: translateY(-2px); }
.admin-hub-card-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--g2), var(--g1));
}
.admin-hub-card-ico svg { width: 19px; height: 19px; }
.admin-hub-card strong { font-size: .95rem; color: var(--text-1); }
.admin-hub-card span { font-size: .8rem; color: var(--text-2); }

.admin-tabla-wrap { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); }
.admin-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.admin-tabla th, .admin-tabla td { padding: 12px 14px; text-align: left; white-space: nowrap; }
.admin-tabla th {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-3); border-bottom: 1px solid var(--border);
}
.admin-tabla td { border-bottom: 1px solid var(--border); color: var(--text-2); }
.admin-tabla tr:last-child td { border-bottom: none; }
.admin-tabla td strong { color: var(--text-1); }
.admin-tabla td a { color: var(--g2); font-weight: 700; }

.admin-tabla-acciones { display: flex; gap: 8px; }
.admin-tabla-acciones form { display: inline; }
.admin-btn-aprobar, .admin-btn-rechazar {
  border: none; border-radius: var(--r-sm); padding: 6px 12px;
  font-size: .72rem; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.admin-btn-aprobar { background: var(--g2-soft); color: var(--g1); }
.admin-btn-rechazar { background: rgba(229,72,77,.1); color: var(--red); }

.admin-pendientes-box {
  background: rgba(245, 166, 35, .07); border: 1px dashed var(--amber);
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 24px;
}
.admin-pendientes-box h3 { font-size: .85rem; font-weight: 800; color: #A8760E; margin-bottom: 12px; }
.qv-btn svg { width: 13px; height: 13px; }
.qv-btn:hover { border-color: var(--g2); color: var(--g1); }

/* ── Filtro de cliente (admin/pedidos.php) ── */
.admin-filtro-form { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-filtro-input {
  flex: 1; min-width: 200px; padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-1); font-size: .86rem;
}
.admin-filtro-input:focus { outline: none; border-color: var(--g2); }
.admin-filtro-btn {
  padding: 10px 18px; border-radius: var(--r-sm); border: none; background: var(--g2); color: #fff;
  font-weight: 700; font-size: .82rem; cursor: pointer; white-space: nowrap;
}
.admin-filtro-limpiar { font-size: .78rem; color: var(--text-3); align-self: center; }

/* ── Estatus de despacho: Pendiente → En proceso → Despachado
   (admin/pedidos.php) — distinto del estatus de PAGO (.acc-estatus-*),
   porque un pedido puede estar pagado y aun así seguir sin despachar. ── */
.acc-envio-badge {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap;
}
.acc-envio-pendiente  { background: rgba(229,72,77,.1); color: var(--red); }
.acc-envio-en_proceso { background: rgba(245,166,35,.12); color: #A8760E; }
.acc-envio-despachado { background: var(--g2-soft); color: var(--g1); }

.acc-envio-controles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.acc-envio-controles form { display: inline; }
.acc-envio-btn {
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2);
  border-radius: var(--r-pill); padding: 5px 12px; font-size: .68rem; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.acc-envio-btn:hover { border-color: var(--g2); color: var(--g2); }
.acc-envio-btn.acc-envio-btn-activo { background: var(--g2); border-color: var(--g2); color: #fff; }

/* Aviso de "este cliente ya pidió hoy antes" — junto al nombre del cliente. */
.acc-duplicado-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(245,166,35,.14); color: #A8760E; font-size: .64rem; font-weight: 800;
  padding: 3px 9px; border-radius: var(--r-pill); margin-left: 6px; text-transform: uppercase;
}

/* Caja con la dirección/datos de entrega de cada pedido. */
.acc-envio-info {
  margin-top: 10px; padding: 10px 12px; background: var(--bg-s); border-radius: var(--r-sm);
  font-size: .78rem; color: var(--text-2); line-height: 1.6;
}
.acc-envio-info strong { color: var(--text-1); }

/* ── Consolidado de SKUs del día (admin/consolidado.php) ── */
.consolidado-toolbar {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.consolidado-campo { display: flex; flex-direction: column; gap: 6px; }
.consolidado-campo label { font-size: .74rem; font-weight: 700; color: var(--text-2); }
.consolidado-campo input[type="date"] {
  padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text-1); font-size: .84rem;
}
.consolidado-check { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-2); }
.consolidado-resumen {
  background: var(--g2-soft); color: var(--g1); border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: 20px; font-size: .86rem; line-height: 1.7;
}
.consolidado-resumen strong { font-weight: 800; }
.consolidado-plazo-vencido { background: rgba(229,72,77,.1); color: var(--red); }

/* ── Modal genérico (base para Vista Rápida y Contacto) ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15, 23, 42, .5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-sheet {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: var(--card-bg); border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(30px); transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.modal-overlay.active .modal-sheet { transform: translateY(0); }
.modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: var(--r-pill); margin: 10px auto; }
.modal-close { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-s); display: flex; align-items: center; justify-content: center; color: var(--text-2); }

/* ── Vista rápida (Quick View) ── */
.qv-grid { padding: 4px 22px 22px; }
.qv-vis { background: var(--bg-s); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; padding: 24px; margin-bottom: 18px; min-height: 200px; }
/* Antes la imagen se quedaba fija en 120x120 (inline en el HTML) —
   se veía chica. Con !important la agrandamos sin tener que tocar
   inicio.php y productos/index.php (que son los que traen esa
   Vista Rápida). */
.qv-vis #qvImg { width: 190px !important; height: 190px !important; }
.qv-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }

/* ── Página de catálogo (productos/index.php) ── */
.cat-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.cat-count { font-size: .82rem; color: var(--text-3); }
.cat-empty {
  text-align: center; padding: 60px 20px; color: var(--text-2);
  background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--r-lg);
}

@media (max-width: 560px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pname { font-size: .84rem; }
  .p-now { font-size: .92rem; }
  .pbtn span { display: none; }
  .modal-sheet { max-height: 92vh; }
}