/* ============================================================
   Tiendas Platino | Catálogo — Estilo moderno (v2)
   Se carga DESPUÉS de bootstrap/neon para sobrescribir.
   ============================================================ */

:root {
  --tp-bg: #f4f4f6;
  --tp-oscuro: #141414;
  --tp-oscuro2: #1f1f1f;
  --tp-dorado: #C9A227;
  --tp-dorado2: #e3b938;
  --tp-texto: #1a1a1a;
  --tp-gris: #6b6b6b;
  --tp-wa: #25D366;
  --tp-sombra: 0 6px 22px rgba(0,0,0,.08);
  --tp-sombra2: 0 10px 30px rgba(0,0,0,.16);
  --tp-radio: 14px;
}

body {
  background: var(--tp-bg);
  color: var(--tp-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-top: 62px;
}

/* ================= HEADER ================= */
.tp-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  background: linear-gradient(180deg, #181818, #0d0d0d);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
  padding: 8px 0;
}
.tp-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.tp-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background:#fff; }
.tp-brand-text { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .3px; line-height: 1; display:flex; flex-direction:column; }
.tp-brand-text small { color: var(--tp-dorado2); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.tp-actions { display: flex; align-items: center; gap: 10px; }
.tp-btn-wa, .tp-btn-cart {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tp-btn-wa { background: var(--tp-wa); }
.tp-btn-wa:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,211,102,.4); }
.tp-btn-cart { background: var(--tp-oscuro2); border: 1px solid #333; position: relative; }
.tp-btn-cart:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.badge-carrito {
  background: var(--tp-dorado); color: #000;
  font-size: 11px; font-weight: 800; border-radius: 999px;
  min-width: 20px; height: 20px; line-height: 20px; text-align: center;
  padding: 0 6px;
}
.tp-badge-modo {
  background: rgba(255,255,255,.12); color: #cfcfcf;
  border: 1px solid #3a3a3a; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 11px;
}

/* ================= FILTROS ================= */
.tp-filtros {
  max-width: 1280px; margin: 16px auto 0; padding: 0 16px;
  background: #fff; border-radius: var(--tp-radio);
  box-shadow: var(--tp-sombra); padding: 16px;
}
.tp-filtros-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.tp-field label { font-size: 12px; font-weight: 700; color: var(--tp-gris); text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 5px; }
.tp-field select {
  width: 100%; border: 1.5px solid #e2e2e2; background: #fafafa;
  border-radius: 10px; padding: 9px 10px; font-size: 14px; color: var(--tp-texto);
  appearance: auto; outline: none; transition: border-color .12s;
}
.tp-field select:focus { border-color: var(--tp-dorado); }
.tp-filtros-extra { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.tp-link-clean { color: var(--tp-gris); text-decoration: none; font-size: 13px; font-weight: 600; }
.tp-link-clean:hover { color: #c0392b; }
.tp-btn-copy {
  background: var(--tp-oscuro); color: #fff; border: none;
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.tp-btn-copy:hover { background: var(--tp-dorado); color:#000; }

/* ================= REDES ================= */
.tp-social {
  max-width: 1280px; margin: 12px auto 0; padding: 0 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tp-social a {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--tp-texto); text-decoration: none;
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600;
  box-shadow: var(--tp-sombra); transition: transform .12s;
}
.tp-social a:hover { transform: translateY(-1px); color: #000; }

/* ================= MODO PÚBLICO (ropa.tiendasplatino.mx) =================
   Catálogo que comparten los clientes: ocultar WhatsApp del negocio y las
   redes sociales para que no sientan que les 'roban' al cliente y lo compartan.
   En catalogo.tiendasplatino.mx (modo vendedor) todo se ve normal. */
body.tp-modo-publico .tp-btn-wa,
body.tp-modo-publico .tp-social,
body.tp-modo-publico .tp-cart-acciones .tp-btn-wa { display: none !important; }

/* ================= GRID / TARJETAS ================= */
.tp-main { max-width: 1280px; margin: 16px auto 0; padding: 0 16px 40px; }
.tp-grid { display: flex; flex-wrap: wrap; }
/* En móvil el backend envuelve tarjetas sueltas en <div class="row"> (tam=1).
   Ese .row se convierte en item del flex y rompe el grid (hueco blanco + tarjeta
   brincando abajo). Con display:contents el .row desaparece del layout y las
   .cardtodas internas participan directamente en el grid flex. */
.tp-grid > .row { display: contents; }

/* Tarjetas generadas por el backend (.cardtodas/.panel) */
.cardtodas { padding: 8px; }
.cardtodas .panel {
  background: #fff; border: none; border-radius: var(--tp-radio);
  box-shadow: var(--tp-sombra); overflow: hidden; margin-bottom: 6px;
  transition: transform .15s ease, box-shadow .15s ease; height: 100%;
}
.cardtodas .panel:hover { transform: translateY(-3px); box-shadow: var(--tp-sombra2); }
.cardtodas .panel-heading {
  background: var(--tp-oscuro); border: none; padding: 10px 12px;
  display: flex; align-items: center; min-height: 46px;
}
.cardtodas .panel-title, .cardtodas .titulopanel {
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cardtodas .panel-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cardtodas .imgpro {
  width: 100% !important; height: auto !important; aspect-ratio: 3/4;
  object-fit: cover !important; border-radius: 10px; border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: zoom-in;
}
.cardtodas .descrippanel { width: 100%; padding: 0; font-size: 13px; color: var(--tp-texto); }
.cardtodas .descrippanel p { margin: 3px 0; }
.cardtodas .descrippanel b { color: var(--tp-texto); }
.cardtodas .descrippanel .descrippanel2 { font-size: 14px; font-weight: 700; }
.cardtodas .descrippanel2 { color: var(--tp-texto); }
.cardtodas .descrippanel2 del { color: #c0392b !important; opacity: .6 !important; }

/* Bloques de precio: Menudeo (rojo) / Mayoreo (verde) */
.tp-precios { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px; }
.tp-precio {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 700;
}
.tp-precio > span { text-transform: uppercase; letter-spacing: .4px; font-size: 10px; }
.tp-precio del { text-decoration: none; font-size: 13px; }
.tp-precio-menudeo { background: #fdecea; color: #c0392b; }
.tp-precio-menudeo del { color: #c0392b; }
.tp-precio-mayoreo { background: #eaf7ee; color: #1e7e34; }
.tp-precio-mayoreo b { font-size: 17px; }

/* Botones de talla (generados por el backend, clase .btn) */
.cardtodas .btn {
  border-radius: 999px; font-weight: 700; font-size: 12px;
  border: none; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.cardtodas .btn-success { background: #1e7e34; color:#fff; }
.cardtodas .btn-warning { background: var(--tp-dorado2); color:#111; }
.cardtodas .btn-default { background: #e6e6e6; color:#555; }

/* Ver más */
.tp-btn-vermas {
  background: var(--tp-dorado); color: #111; border: none;
  border-radius: 999px; padding: 12px 34px; font-size: 15px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--tp-sombra); transition: transform .12s;
}
.tp-btn-vermas:hover { background: var(--tp-dorado2); transform: translateY(-2px); }

/* Sin resultados */
.tp-sinresultados {
  background: #fff; border: 1.5px dashed #d5d5d5; color: var(--tp-gris);
  border-radius: var(--tp-radio); padding: 28px; text-align: center;
  font-size: 16px; font-weight: 600; margin-top: 20px;
}

/* ================= TOAST (feedback al agregar/eliminar) ================= */
.tp-toast {
  position: fixed; z-index: 99999; top: 74px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: #111; color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; box-shadow: var(--tp-sombra2);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
  max-width: calc(100vw - 36px); text-align: center;
}
.tp-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tp-toast-hide { opacity: 0; transform: translateX(-50%) translateY(-10px); }

/* Botón de talla: feedback al agregar (pop verde) */
.cardtodas .btn.tp-added {
  background: #1e7e34 !important; color: #fff !important;
  transform: scale(1.12); box-shadow: 0 4px 14px rgba(30,126,52,.45);
  animation: tpPop .45s ease;
}
@keyframes tpPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1.12); }
}

/* Contador del carrito: rebote al cambiar */
.badge-carrito.tp-bump { animation: tpBump .5s ease; }
@keyframes tpBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Botón Quitar (carrito) */
.btn-quitar {
  background: #e74c3c; color: #fff; border: none; border-radius: 999px;
  font-weight: 700; font-size: 12px; padding: 6px 12px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .12s, background .12s;
}
.btn-quitar:hover { background: #c0392b; transform: translateY(-1px); }

/* ================= BOTÓN FLOTANTE (móvil) ================= */
.tp-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 1040;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--tp-oscuro); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: var(--tp-sombra2);
}
.tp-fab .badge-carrito { position: absolute; top: 2px; right: 2px; }
.tp-fab-cart { display: none; }

/* ================= COTIZADOR / CARRITO ================= */
.tp-cart-wrap { max-width: 980px; margin: 0 auto; }
.tp-cart-vacio {
  background: #fff; border-radius: var(--tp-radio); box-shadow: var(--tp-sombra);
  text-align: center; padding: 50px 20px;
}
.tp-cart-vacio i { font-size: 60px; color: #d5d5d5; }
.tp-cart-vacio h3 { font-weight: 800; margin: 12px 0 4px; }
.tp-cart-vacio p { color: var(--tp-gris); margin-bottom: 20px; }
.tp-cart-card {
  background: #fff; border-radius: var(--tp-radio); box-shadow: var(--tp-sombra);
  padding: 16px;
}
.tp-cart-table { margin-bottom: 0; }
.tp-cart-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--tp-gris); border-bottom: 2px solid var(--tp-dorado); }
.tp-cart-table tbody td { vertical-align: middle; }
.tp-cart-table tfoot td { border-top: 2px solid #eee; }
.tp-total { font-size: 20px; font-weight: 800; color: var(--tp-dorado); }
.tp-btn-continuar {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--tp-oscuro); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700;
}
.tp-btn-continuar:hover { color: #fff; background: var(--tp-dorado); }
.tp-btn-vaciar {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fff; color: #c0392b; border: 1.5px solid #f0b3a8;
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700;
}
.tp-btn-vaciar:hover { background: #c0392b; color: #fff; }
.tp-cart-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.tp-btn-copiar {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--tp-oscuro); color: #fff; border: none;
  border-radius: 999px; padding: 13px 22px; font-size: 15px; font-weight: 800;
  flex: 1; justify-content: center; transition: transform .12s;
  /* Carrito compacto en móvil (que la columna Quitar siempre se vea) */
  .tp-cart-card { padding: 10px; }
  .tp-cart-table td, .tp-cart-table th { padding: 6px 5px !important; font-size: 12px; }
  .tp-cart-table tbody td img { width: 44px !important; height: 44px !important; border-radius: 6px !important; }
  .tp-cart-table tbody td small { display: none; }
  .btn-quitar { font-size: 11px; padding: 5px 10px; }
}
.tp-btn-copiar:hover { background: var(--tp-dorado); color: #111; transform: translateY(-1px); }
.tp-cart-acciones .tp-btn-wa { flex: 1; justify-content: center; padding: 13px 22px; font-size: 15px; cursor: pointer; border: none; }
.tp-cart-nota { margin-top: 14px; font-size: 13px; color: var(--tp-gris); }

/* Modal */
#modalCatalogo .modal-content { border-radius: var(--tp-radio); overflow: hidden; }
#modalCatalogo img { border-radius: 8px; }

/* ================= RESPONSIVE ================= */
@media (min-width: 1200px) {
  .cardtodas { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .cardtodas { flex: 0 0 50%; max-width: 50%; }
  .tp-filtros-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  body { padding-top: 56px; }
  .tp-logo { width: 34px; height: 34px; }
  .tp-brand-text { font-size: 16px; }
  .tp-hide-sm { display: none; }
  .tp-btn-wa, .tp-btn-cart { padding: 8px 11px; }
  .tp-filtros { padding: 12px; }
  .tp-filtros-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cardtodas { flex: 0 0 50%; max-width: 50%; min-width: 0; padding: 5px; }
  .cardtodas .panel-body { min-width: 0; }
  .cardtodas .panel-heading { min-height: 40px; padding: 8px 9px; }
  .cardtodas .titulopanel { font-size: 11px; }
  .cardtodas .panel-body { padding: 8px; }
  .cardtodas .descrippanel { font-size: 11px; }
  .cardtodas .descrippanel .descrippanel2 { font-size: 12px; }
  .cardtodas .btn { font-size: 11px; padding: 5px 8px; margin: 2px !important; }
  .tp-fab-cart { display: flex; }
  .tp-filtros-extra { justify-content: center; }
}