/* Say Alejandro — Catálogo. Tokens compartidos con el resto de la marca. */
:root {
  --purple: #832885;
  --purple-dark: #5A2362;
  --purple-light: #EC6AFF;
  --yellow: #EFDB5D;
  --yellow-dark: #EABE59;
  --cream: #F6EECA;
  --text: #3a1a4d;
  --green-ok: #2E7D32;
  --red-error: #C62828;
  --white: #ffffff;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--cream);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
}
.oculto { display: none !important; }

/* ── Barra de aviso ── */
.aviso {
  background: var(--purple-dark);
  color: var(--cream);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
}

/* ── Header ──
   El logo va aparte (position:absolute, fuera del flujo) para poder ser
   enorme y sobrepasar la franja morada sin empujar la altura del header.
   El lado izquierdo queda vacío a propósito (reservado para futuros
   botones); .header-acciones usa margin-left:auto para quedarse pegado a
   la derecha sin depender de que haya algo más a la izquierda. */
.header {
  background: var(--purple);
  box-shadow: 0 2px 16px rgba(90,35,98,.2);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px; /* vertical +12px (14→26) = header ~30% más alto */
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Logo centrado que sobresale de la franja morada hacia el cuerpo crema —
   estilo Glitch. Position:absolute → no afecta la altura del header.
   Clickeable: vuelve al inicio del catálogo (ver #btn-logo-inicio en JS). */
.header-logo-grande {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  height: 105px; width: auto; object-fit: contain; z-index: 1;
  cursor: pointer; transition: transform .15s ease;
}
.header-logo-grande:hover { transform: translateX(-50%) scale(1.05); }

.header-acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* #buscador (ID) en vez de .buscador (clase): así le gana en especificidad a la
   regla genérica de inputs de los modales (input[type="search"] entre otros),
   que si no, le pisaba el ancho, el borde y el color. */
#buscador {
  background: rgba(255,255,255,.15); border: none; border-radius: 50px;
  padding: 8px 14px; color: var(--white); font-size: 13px; width: 315px; /* 252px + 25% */
}
.buscador::placeholder { color: rgba(255,255,255,.6); }
.buscador:focus { outline: 2px solid var(--yellow); }
.btn-carrito {
  position: relative; background: var(--purple-light); border: none; border-radius: 50%;
  width: 40px; height: 40px; font-size: 18px; cursor: pointer;
  transition: transform .15s ease;
}
.btn-carrito:hover { transform: scale(1.08); }
.carrito-badge {
  position: absolute; top: -4px; right: -4px; background: var(--yellow); color: var(--purple-dark);
  font-size: 11px; font-weight: 800; border-radius: 50%; width: 19px; height: 19px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Main / secciones ── */
main { max-width: 1500px; margin: 0 auto; padding: 0 24px 72px; }
.bloque { margin-top: 44px; }
.bloque-titulo {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 24px; color: var(--purple);
  margin-bottom: 16px;
}
.bloque-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bloque-cabecera .bloque-titulo { margin-bottom: 0; }

/* ── Hero ── */

/* ── Botones ── */
.btn-oro {
  background: var(--yellow); color: var(--purple-dark); border: none; border-radius: 50px;
  padding: 11px 20px; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: 3px 3px 0 var(--purple-dark);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-oro:hover { transform: translateY(-1px); }
.btn-oro:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--purple-dark); }
.btn-plano { background: none; border: none; color: var(--purple); font-weight: 700; cursor: pointer; padding: 10px 14px; font-size: 14px; }
.btn-peligro { color: var(--red-error); }

/* ── Tiles de categoría ── */
.tiles-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.tile-categoria {
  background: var(--purple-dark); color: var(--white); border-radius: 14px; border: none; cursor: pointer;
  padding: 20px 10px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px; text-align: center;
  transition: transform .15s ease, background .15s ease;
}
.tile-categoria:hover { transform: translateY(-3px); background: var(--purple); }
.tile-categoria .tile-emoji { display: block; font-size: 26px; margin-bottom: 6px; }
.tile-categoria.tile-otras { background: transparent; border: 2px dashed rgba(131,40,133,.35); color: var(--purple); }
.tile-categoria.tile-otras:hover { background: rgba(131,40,133,.08); }

/* ── Menú "todas las categorías" (modal) ── */
.modal-categorias-lista { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chip {
  background: var(--cream); color: var(--purple-dark); border: none; border-radius: 50px;
  padding: 8px 16px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.chip:hover { background: var(--purple); color: var(--white); }

/* ── Grid de productos ──
   Denso y con alturas parejas (como Glitch): imagen cuadrada que domina la
   tarjeta, gap chico, y título/descripción truncados para que ninguna
   tarjeta quede más alta que otra dejando "huecos" en el grid. */
.grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tarjeta {
  background: var(--white); border-radius: 14px; overflow: hidden; position: relative;
  box-shadow: 0 2px 10px rgba(90,35,98,.1); display: flex; flex-direction: column;
  cursor: pointer; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  animation: entradaTarjeta .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.tarjeta:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 10px 24px rgba(90,35,98,.2); }
.tarjeta-img {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--cream); font-size: 56px;
  /* .tarjeta es flex-column, así que .tarjeta-img es un flex-item: sin esto,
     su alto mínimo automático puede ignorar el aspect-ratio cuando la imagen
     interna es grande (ej. una foto de celular en vertical), estirando la
     tarjeta. min-height:0 fuerza a que aspect-ratio mande de verdad. */
  min-height: 0;
  overflow: hidden;
}
.tarjeta-img img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-cuerpo { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tarjeta-categoria { font-size: 11px; color: var(--purple); opacity: .7; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tarjeta-titulo {
  font-weight: 800; font-size: 15px; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-precio { font-weight: 900; font-size: 17px; color: var(--purple-dark); margin-top: 2px; }
.tarjeta-acciones { display: flex; gap: 6px; margin-top: 4px; }
.btn-agregar, .btn-consultar {
  flex: 1; background: var(--purple); color: var(--white); border: none; border-radius: 10px;
  padding: 9px; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s ease;
}
.btn-agregar:hover, .btn-consultar:hover { background: var(--purple-dark); }
.btn-agregar:disabled { background: #ccc; cursor: not-allowed; }
.btn-consultar { text-align: center; text-decoration: none; }
.badge {
  position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 800; padding: 4px 9px;
  border-radius: 50px; color: var(--white); z-index: 2;
}
.badge-nuevo { background: var(--green-ok); }
.badge-agotado { background: var(--red-error); }
.badge-oculto { background: #666; top: 34px; }
.tarjeta-admin { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 2; }
.btn-icono {
  background: rgba(255,255,255,.92); border: none; border-radius: 50%; width: 30px; height: 30px;
  font-size: 14px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.vacio { text-align: center; color: rgba(58,26,77,.5); padding: 32px; }

/* ── Carrito lateral ── */
.overlay {
  position: fixed; inset: 0; background: rgba(58,26,77,.5); z-index: 60;
  animation: fadeIn .18s ease;
}
.carrito-panel {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(90vw, 380px);
  background: var(--white); z-index: 61; box-shadow: -12px 0 40px rgba(58,26,77,.25);
  display: flex; flex-direction: column; padding: 20px;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.carrito-panel.abierto { transform: translateX(0); }
.carrito-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.carrito-top h2 { font-family: 'Nunito', sans-serif; color: var(--purple-dark); font-size: 19px; }
.btn-cerrar { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--purple-dark); }
.carrito-lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.carrito-item { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(58,26,77,.08); }
.carrito-item-img { width: 48px; height: 48px; border-radius: 8px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; overflow: hidden; }
.carrito-item-img img { width: 100%; height: 100%; object-fit: cover; }
.carrito-item-info { flex: 1; min-width: 0; }
.carrito-item-titulo { font-weight: 700; font-size: 13.5px; }
.carrito-item-precio { font-size: 12px; color: var(--purple); opacity: .8; }
.carrito-item-qty { display: flex; align-items: center; gap: 6px; }
.carrito-item-qty button {
  background: var(--cream); border: none; border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-weight: 700;
}
.carrito-footer { border-top: 1px solid rgba(58,26,77,.1); padding-top: 14px; margin-top: 10px; }
.carrito-total { font-weight: 900; font-size: 17px; color: var(--purple-dark); margin-bottom: 8px; }
.btn-whatsapp { width: 100%; justify-content: center; margin-top: 4px; background: var(--green-ok); color: var(--white); box-shadow: 3px 3px 0 var(--purple-dark); }

/* ── Modo solo catálogo (config.pedidosActivos = false) ──
   Sin carrito: se esconde todo lo de pedir y cada producto lleva a WhatsApp. */
#ficha-consultar { display: none; }
.sin-pedidos #ficha-consultar { display: inline-flex; }
.sin-pedidos .btn-carrito, .sin-pedidos .carrito-panel, .sin-pedidos #carrito-overlay,
.sin-pedidos .ficha-cantidad, .sin-pedidos #ficha-agregar { display: none !important; }

/* ── Botón secreto de admin ── */
.btn-admin-secreto {
  /* Zona de clic más grande (48x48) para poder acertarla a ciegas, pero
     sigue siendo invisible: opacity 0, sin ningún indicio visual. */
  position: fixed; bottom: 0; left: 0; width: 48px; height: 48px;
  background: transparent; border: none; cursor: default; z-index: 40;
  opacity: 0; -webkit-tap-highlight-color: transparent;
}

/* ── Modales (compartido clave + producto) ── */
.modal {
  position: fixed; inset: 0; background: rgba(58,26,77,.5); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fadeIn .18s ease;
}
.card { background: var(--white); border-radius: 16px; box-shadow: 0 2px 6px rgba(90,35,98,.12); }
.modal-caja { max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 22px; animation: popIn .22s ease both; }
.modal-caja h2 { color: var(--purple-dark); margin-bottom: 6px; font-family: 'Nunito', sans-serif; }
.ayuda { font-size: 12.5px; color: rgba(58,26,77,.6); margin-bottom: 12px; }
.etiqueta { display: block; font-size: 11px; letter-spacing: 1.5px; color: rgba(58,26,77,.45); margin: 12px 0 5px; text-transform: uppercase; }
input[type="text"], input[type="number"], input[type="password"], input[type="search"], textarea {
  width: 100%; padding: 9px 11px; border: 1px solid rgba(58,26,77,.25); border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--text);
}
textarea:focus, input:focus { outline: none; border-color: var(--purple); }
.error { color: var(--red-error); font-size: 12.5px; margin-top: 6px; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-acciones-producto { justify-content: space-between; }
.modal-acciones-derecha { display: flex; gap: 8px; }
.img-preview { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.img-preview img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.chips { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.chip-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }

/* ── Ficha de producto individual ── */
.volver {
  display: inline-block; color: var(--purple); font-weight: 700; text-decoration: none;
  font-size: 14px; margin-bottom: 18px; transition: transform .15s ease;
}
.volver:hover { transform: translateX(-3px); }

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-bottom: 16px; }
.ficha-galeria { display: flex; flex-direction: column; gap: 12px; }
.ficha-imagen-principal {
  background: var(--white); border-radius: 20px; aspect-ratio: 1; display: flex;
  align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 4px 18px rgba(90,35,98,.12);
  min-height: 0; /* mismo fix que .tarjeta-img: evita que una foto grande ignore el aspect-ratio */
}
.ficha-imagen-principal img {
  width: 100%; height: 100%; object-fit: cover; animation: fadeIn .25s ease;
}
.ficha-emoji { font-size: 120px; }
.ficha-miniaturas { display: flex; gap: 10px; flex-wrap: wrap; }
.ficha-mini {
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden; padding: 0;
  border: 2px solid transparent; cursor: pointer; opacity: .6;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.ficha-mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha-mini:hover { opacity: .85; transform: translateY(-2px); }
.ficha-mini.activa { opacity: 1; border-color: var(--purple); }

.ficha-info { display: flex; flex-direction: column; }
.ficha-categoria {
  font-size: 12px; font-weight: 800; color: var(--purple); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 6px;
}
#ficha-titulo {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(22px, 3vw, 32px);
  color: var(--purple-dark); line-height: 1.2; margin-bottom: 14px;
}
.ficha-descripcion { font-size: 14.5px; line-height: 1.7; color: var(--text); opacity: .8; margin-bottom: 22px; }

/* "Buy box": agrupa precio + stock + cantidad + compra en una tarjeta
   propia, separada de título/descripción — le da jerarquía a la zona de
   acción (patrón estándar de ficha de producto). */
.ficha-comprar {
  background: var(--white); border-radius: 18px; padding: 22px;
  box-shadow: 0 3px 14px rgba(90,35,98,.12); margin-bottom: 16px; width: fit-content;
  max-width: 100%;
}
.ficha-precio { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 28px; color: var(--purple-dark); margin-bottom: 6px; }
.ficha-stock { font-weight: 700; font-size: 13.5px; color: var(--green-ok); margin-bottom: 18px; }
.ficha-stock.stock-bajo { color: var(--yellow-dark); }
.ficha-stock.stock-agotado { color: var(--red-error); }
.ficha-cantidad {
  display: inline-flex; align-items: center; gap: 14px; background: var(--cream);
  border-radius: 50px; padding: 8px 18px; margin-bottom: 16px; width: fit-content;
}
.qty-btn {
  background: var(--white); border: none; border-radius: 50%; width: 28px; height: 28px;
  font-size: 16px; font-weight: 800; cursor: pointer; color: var(--purple-dark);
  transition: transform .12s ease;
}
.qty-btn:hover { transform: scale(1.12); }
#ficha-cantidad-valor { font-weight: 800; font-size: 15px; min-width: 18px; text-align: center; }
.ficha-agregar { width: 100%; justify-content: center; padding: 14px 28px; font-size: 15px; }
.ficha-agregar:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; }

/* Badges de confianza debajo de la buy box: solo aparecen si el producto
   los tiene configurados (envío gratis / link a MercadoLibre). */
.ficha-badges { display: flex; flex-direction: column; gap: 10px; }
.ficha-badge {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--text); opacity: .85; text-decoration: none;
}
.ficha-badge-ml {
  background: var(--white); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(90,35,98,.08); transition: transform .15s ease;
}
.ficha-badge-ml:hover { transform: translateY(-2px); }
.ml-logo {
  background: #FFE600; color: #2D3277; font-weight: 800; font-size: 12px;
  padding: 3px 8px; border-radius: 4px; font-style: italic; white-space: nowrap;
}
.ml-logo b { font-weight: 900; }

@media (max-width: 720px) {
  .ficha { grid-template-columns: 1fr; gap: 20px; }
  .ficha-comprar { width: 100%; }
}

/* ── Panel de admin: miniaturas de imágenes del producto ── */
.imagenes-admin-lista { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.imagen-admin-item {
  position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.imagen-admin-item img { width: 100%; height: 100%; object-fit: cover; }
.imagen-admin-principal {
  position: absolute; bottom: 0; left: 0; right: 0; background: rgba(131,40,133,.85);
  color: var(--white); font-size: 8px; font-weight: 800; text-align: center; padding: 2px 0;
  text-transform: uppercase; letter-spacing: .04em;
}
.imagen-admin-botones { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; }
.imagen-admin-botones .btn-icono { width: 20px; height: 20px; font-size: 10px; box-shadow: none; }

/* ── Animaciones ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes entradaTarjeta { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 860px) {
  .header { flex-direction: column; gap: 14px; padding-top: 150px; }
  .header-logo-grande { height: 130px; }
  .header-acciones { justify-content: center; margin-left: 0; }
  #buscador { width: 200px; }
}