/* Frontend público de tienda -- diseño inspirado en D'Platico (dominio
   real: dplatico.toddoapp.com), adaptado a un sistema tejido por el motor:
   --primario/--primario-dark/--primario-light se inyectan por tienda desde
   server.js (servirFrontendConTienda), igual patrón que D'Platico deriva
   sus variantes de rojo desde un único color configurable en BD. Todo lo
   demás (tipografía, radios, sombras, estructura) es fijo -- lo que cambia
   entre tiendas es el color de marca, el nombre y la foto de portada, no
   el sistema de diseño completo. */

:root {
  --primario: #C8281E;
  --primario-dark: #A01F17;
  --primario-light: #E8433A;
  --blanco: #ffffff;
  --gris-claro: #F7F7F5;
  --gris: #E8E8E4;
  --gris-texto: #666660;
  --negro: #1A1A18;
  --dorado: #C89A2A;
  --nav-h: 76px;
}

* { box-sizing: border-box; }

body.tienda-publica {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--blanco);
  color: var(--negro);
  min-height: 100vh;
}

.tienda-publica h1, .tienda-publica h2, .tienda-publica h3 {
  font-family: 'Lora', serif;
  margin: 0;
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.tp-navbar {
  height: var(--nav-h);
  background: var(--blanco);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  position: sticky; top: 0; z-index: 200;
  gap: 24px;
}
.tp-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.tp-logo-badge {
  width: 52px; height: 52px; flex-shrink: 0; background: var(--primario); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: white;
  font-family: 'Lora', serif; font-style: italic; font-weight: 600; font-size: 20px; overflow: hidden;
}
.tp-logo-badge img { width: 100%; height: 100%; object-fit: cover; }
.tp-marca-nombre { font-size: 17px; font-weight: 800; color: var(--negro); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-marca-eyebrow { font-size: 10px; color: var(--primario); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.tp-nav-acciones { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tp-btn-cart {
  display: flex; align-items: center; gap: 8px; background: var(--primario); color: white; border: none;
  cursor: pointer; padding: 10px 18px; border-radius: 6px; font-family: inherit; font-size: 13px;
  font-weight: 700; letter-spacing: .3px; transition: background .2s, transform .15s; text-decoration: none;
}
.tp-btn-cart:hover { background: var(--primario-dark); transform: translateY(-1px); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.tp-hero {
  position: relative; width: 100%; height: 320px; overflow: hidden; background: var(--primario);
  display: flex; align-items: center;
}
.tp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,8,8,.72) 0%, rgba(10,8,8,.25) 55%, transparent 100%); }
.tp-hero-content { position: relative; z-index: 1; padding: 0 48px; max-width: 640px; }
.tp-hero-tag {
  display: inline-block; background: var(--primario); color: white; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; padding: 5px 14px; border-radius: 2px; margin-bottom: 14px;
}
.tp-hero h1 { font-size: 38px; font-weight: 600; color: white; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.tp-hero p { color: rgba(255,255,255,.88); font-size: 14px; margin-top: 10px; line-height: 1.5; }

/* ── Buscador + info ────────────────────────────────────────────────── */
.tp-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 24px 60px; }
.tp-buscador { display: flex; gap: 10px; margin-bottom: 8px; }
.tp-buscador input {
  flex: 1; background: var(--gris-claro); border: 1px solid var(--gris); border-radius: 8px;
  padding: 13px 16px; font-size: 14px; font-family: inherit; color: var(--negro);
}
.tp-buscador input:focus { outline: none; border-color: var(--primario); }
.tp-info { font-size: 12px; color: var(--gris-texto); margin-bottom: 24px; }

/* ── Grid de productos ──────────────────────────────────────────────── */
.tp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .tp-grid { grid-template-columns: repeat(2, 1fr); } .tp-hero { height: 240px; } .tp-hero h1 { font-size: 28px; } }
@media (max-width: 480px) { .tp-grid { grid-template-columns: 1fr; } .tp-navbar { padding: 0 16px; } .tp-hero-content { padding: 0 24px; } }

.tp-card {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--gris); background: white;
  display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s;
  cursor: pointer;
}
.tp-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(0,0,0,.1); border-color: transparent; }
.tp-card-img { height: 190px; background: var(--gris-claro); position: relative; overflow: hidden; }
.tp-card-img img { width: 100%; height: 100%; object-fit: cover; }
.tp-card-sinstock {
  position: absolute; inset: 0; background: rgba(255,255,255,.75); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: var(--negro); text-transform: uppercase; letter-spacing: .05em;
}
.tp-card-body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tp-card-categoria { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primario); }
.tp-card h3 { font-size: 17px; font-weight: 600; color: var(--negro); line-height: 1.3; }
.tp-card-desc { font-size: 12px; color: var(--gris-texto); line-height: 1.5; flex: 1; }
.tp-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--gris); }
.tp-card-precio { font-size: 19px; font-weight: 800; color: var(--primario); font-family: 'Lora', serif; }
.tp-card-add {
  background: var(--primario); color: white; border: none; cursor: pointer; width: 38px; height: 38px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;
  font-weight: 700; flex-shrink: 0; transition: all .2s;
}
.tp-card-add:hover:not(:disabled) { background: var(--primario-dark); transform: scale(1.1); }
.tp-card-add:disabled { background: var(--gris); color: var(--gris-texto); cursor: default; }

.tp-vacio { text-align: center; padding: 80px 20px; color: var(--gris-texto); grid-column: 1 / -1; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.tp-footer { background: #111; color: rgba(255,255,255,.75); margin-top: 40px; }
.tp-footer-inner { max-width: 1200px; margin: 0 auto; padding: 36px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.tp-footer a { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 600; }
.tp-footer a:hover { color: var(--primario-light); }

/* Contacto/redes -- vacíos por defecto (display:contents no aplica bien a
   flex-wrap, así que simplemente no ocupan espacio si su innerHTML queda
   vacío: sin bordes/padding propios, el gap del padre no deja huecos). */
.tp-footer-contacto:empty, .tp-footer-social:empty { display: none; }
.tp-footer-contacto a, .tp-footer-contacto span { color: rgba(255,255,255,.75); }
.tp-footer-social { display: flex; gap: 14px; }
.tp-footer-social a { text-decoration: none; opacity: .85; transition: opacity .2s, transform .2s; display: inline-flex; }
.tp-footer-social a:hover { opacity: 1; transform: translateY(-2px); }
/* Íconos reales de marca (4 Sep 2026) -- SVG con fill="currentColor",
   hereda el mismo color/opacidad del <a> que ya define el footer oscuro. */
.tp-ico-social { width: 22px; height: 22px; }

/* ── Botón flotante de WhatsApp ─────────────────────────────────────── */
.tp-btn-whatsapp {
  position: fixed; bottom: 22px; right: 22px; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: white; display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 150;
  transition: transform .2s, background .2s;
}
.tp-btn-whatsapp:hover { background: #128C7E; transform: scale(1.08); }
.tp-ico-whatsapp { width: 30px; height: 30px; }

/* ── Modal de producto (4 Sep 2026): galería de fotos + specs + link
   compartible -- abierto al tocar una tarjeta del catálogo, o directo
   desde un link con ?producto=<id> (ver abrirModalProducto en
   frontend.html). ─────────────────────────────────────────────────────── */
.tp-modal-overlay {
  position: fixed; inset: 0; background: rgba(26,26,24,.65); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tp-modal-caja {
  position: relative; background: white; border-radius: 14px; overflow: hidden;
  max-width: 880px; width: 100%; max-height: 90vh; overflow-y: auto;
  display: flex; box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
@media (max-width: 720px) { .tp-modal-caja { flex-direction: column; } }
.tp-modal-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.45); color: white; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tp-modal-cerrar:hover { background: rgba(0,0,0,.65); }
.tp-modal-galeria { flex: 1 1 45%; background: var(--gris-claro); display: flex; flex-direction: column; }
.tp-modal-foto-principal { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--gris-claro); }
.tp-modal-miniaturas { display: flex; gap: 8px; padding: 10px; flex-wrap: wrap; }
.tp-modal-miniaturas:empty { display: none; }
.tp-modal-miniaturas img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; opacity: .7; transition: opacity .15s, border-color .15s;
}
.tp-modal-miniaturas img:hover { opacity: 1; }
.tp-modal-miniaturas img.activa { border-color: var(--primario); opacity: 1; }
.tp-modal-info { flex: 1 1 55%; padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; }
.tp-modal-info h2 { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.25; }
.tp-modal-precio { font-size: 24px; font-weight: 800; color: var(--primario); font-family: 'Lora', serif; }
.tp-modal-desc { font-size: 14px; color: var(--gris-texto); line-height: 1.6; margin: 4px 0; }
.tp-modal-specs { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.tp-modal-specs:empty { display: none; margin: 0; }
.tp-modal-spec-fila {
  display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
  padding: 8px 0; border-bottom: 1px solid var(--gris);
}
.tp-modal-spec-fila span:first-child { color: var(--gris-texto); font-weight: 600; }
.tp-modal-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 14px; }
.tp-modal-btn-agregar {
  width: 100%; height: 46px; border-radius: 8px; font-size: 14px; font-weight: 700;
}
.tp-modal-btn-link {
  width: 100%; height: 44px; border-radius: 8px; border: 1px solid var(--gris); background: white;
  color: var(--negro); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tp-modal-btn-link:hover { border-color: var(--primario); background: var(--gris-claro); }