/* ============================================================
   TiendaPocket — modals.css
   Estilos para: Modal genérico, Waitlist popup, Share modal,
   Botón de favorito (corazón), Barra flotante de favoritos.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   MODAL BASE
═══════════════════════════════════════════════════════════════ */
.tp-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay, 1050);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tp-modal[hidden]            { display: flex; visibility: hidden; pointer-events: none; }
.tp-modal[aria-hidden="true"]{ visibility: hidden; pointer-events: none; }

.tp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  animation: tp-fade-in .25s ease;
}
.tp-modal[aria-hidden="true"] .tp-modal__backdrop {
  animation: tp-fade-out .2s ease forwards;
}

/* Caja del modal */
.tp-modal__box {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  animation: tp-modal-in .3s cubic-bezier(.34,1.56,.64,1);
}
.tp-modal[aria-hidden="true"] .tp-modal__box {
  animation: tp-modal-out .2s ease forwards;
}
.tp-modal__box--sm { max-width: 400px; }

/* Cerrar */
.tp-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
}
.tp-modal__close:hover { background: var(--color-surface); color: var(--color-text); }

/* Ícono */
.tp-modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.tp-modal__icon--bell  { background: #ede9fe; color: var(--color-accent); }
.tp-modal__icon--heart { background: #fee2e2; color: #ef4444; }

.tp-modal__title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--color-primary);
}
.tp-modal__desc {
  text-align: center;
  color: var(--color-text-muted);
  font-size: .9375rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  font-weight: 500;
}

/* Success state */
.tp-modal__success {
  text-align: center;
  padding: 1rem 0;
  animation: tp-fade-in .3s ease;
}
.tp-modal__success-icon { font-size: 3rem; margin-bottom: .75rem; }
.tp-modal__success-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.tp-modal__success-desc  { color: var(--color-text-muted); margin-bottom: 1.5rem; }

/* Animaciones */
@keyframes tp-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tp-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tp-modal-in {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tp-modal-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.95) translateY(8px); }
}

/* ══════════════════════════════════════════════════════════════
   FORMULARIO DEL MODAL (Waitlist)
═══════════════════════════════════════════════════════════════ */
.tp-form-group { margin-bottom: 1rem; }
.tp-form-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--color-primary);
}
.tp-form-required { color: var(--color-danger); margin-left: .15rem; }

.tp-form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.tp-form-input-icon {
  position: absolute;
  left: .875rem;
  color: var(--color-text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.tp-form-input {
  width: 100%;
  padding: .75rem .875rem .75rem 2.625rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.tp-form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.tp-form-input--error { border-color: var(--color-danger); }

.tp-form-error {
  font-size: .8125rem;
  color: var(--color-danger);
  margin-top: .375rem;
}
.tp-form-error:not(:empty)::before { content: '⚠ '; font-size: .8rem; }

/* Checkbox */
.tp-form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  cursor: pointer;
  margin-bottom: 1.25rem;
}
.tp-form-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tp-form-checkbox__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition);
  margin-top: .1rem;
}
.tp-form-checkbox__input:checked + .tp-form-checkbox__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.tp-form-checkbox__input:checked + .tp-form-checkbox__box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}
.tp-form-checkbox__input:focus + .tp-form-checkbox__box {
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}
.tp-form-checkbox__label {
  font-size: .8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   SHARE MODAL
═══════════════════════════════════════════════════════════════ */
.tp-share-loading {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--color-text-muted);
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.tp-share-networks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
  margin-bottom: 1rem;
}

.tp-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem .5rem;
  border-radius: var(--radius-md);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter var(--transition), transform var(--transition);
  color: #fff;
  border: none;
  cursor: pointer;
}
.tp-share-btn:hover { filter: brightness(1.08); transform: translateY(-2px); color: #fff; }
.tp-share-btn:active { transform: scale(.97); }

.tp-share-btn--whatsapp  { background: #25D366; }
.tp-share-btn--telegram  { background: #229ED9; }
.tp-share-btn--facebook  { background: #1877F2; }
.tp-share-btn--twitter   { background: #000; }
.tp-share-btn--pinterest { background: #E60023; }
.tp-share-btn--copy {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.tp-share-btn--copy:hover { background: var(--color-border); color: var(--color-text); }
.tp-share-btn--copied { background: var(--color-success) !important; color: #fff !important; }

/* Link copiable */
.tp-share-link { margin-top: .5rem; }
.tp-share-link__input {
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .8125rem;
  background: var(--color-surface);
  color: var(--color-text-muted);
  outline: none;
}

/* ══════════════════════════════════════════════════════════════
   BOTÓN FAVORITO (CORAZÓN)
═══════════════════════════════════════════════════════════════ */
.tp-wishlist-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  border: none;
  cursor: pointer;
}
.tp-wishlist-btn:hover {
  background: #fff;
  color: #ef4444;
  box-shadow: var(--shadow-md);
}
.tp-wishlist-btn--active {
  background: #fff;
  color: #ef4444;
}
.tp-wishlist-btn--active .tp-wishlist-btn__icon {
  fill: #ef4444;
  stroke: #ef4444;
}
.tp-wishlist-btn__icon {
  fill: none;
  transition: fill var(--transition), stroke var(--transition);
}

/* Tamaño grande (single product) */
.tp-wishlist-btn--lg {
  width: 44px;
  height: 44px;
}
.tp-wishlist-btn--lg svg { width: 22px; height: 22px; }

/* Animación pop al hacer clic */
.tp-wishlist-btn--pop { animation: tp-heart-pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes tp-heart-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Posición en la product card estándar (.tp-product-card) */
.tp-product-card__img-wrap .tp-wishlist-btn {
  position: absolute;
  top: .625rem;
  right: .625rem;
  z-index: 2;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--transition), transform var(--transition),
              background var(--transition), color var(--transition), box-shadow var(--transition);
}

/* Posición en card 7: corazón a la IZQUIERDA para no tapar la lupa (derecha) */
.tp-card7__media .tp-wishlist-btn {
  position: absolute;
  top: .625rem;
  left: .625rem;
  right: auto;
  z-index: 3;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--transition), transform var(--transition),
              background var(--transition), color var(--transition), box-shadow var(--transition);
}
/* Posición en card 8: bookmark inf-der, sin fondo ni sombra */
.tp-card8__media .tp-wishlist-btn {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  top: auto;
  left: auto;
  z-index: 5;
  opacity: 0;
  transform: scale(.85);
  width: auto;
  height: auto;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0;
  color: var(--color-text, #111);
  padding: .25rem;
  transition: opacity var(--transition), transform var(--transition), color var(--transition);
}
.tp-card8__media .tp-wishlist-btn:hover {
  background: none !important;
  box-shadow: none !important;
  color: var(--color-text, #111);
}
.tp-product-card:hover .tp-wishlist-btn,
.tp-product-card__img-wrap .tp-wishlist-btn--active,
.tp-card7:hover .tp-wishlist-btn,
.tp-card7__media .tp-wishlist-btn--active,
.tp-card8:hover .tp-card8__media .tp-wishlist-btn,
.tp-card8__media .tp-wishlist-btn--active {
  opacity: 1;
  transform: scale(1);
}
@media (hover: none) {
  .tp-card8__media .tp-wishlist-btn { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   BARRA FLOTANTE DE FAVORITOS
═══════════════════════════════════════════════════════════════ */
.tp-wishlist-bar {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--color-primary);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl);
  font-size: .9rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.tp-wishlist-bar--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.tp-wishlist-bar__heart {
  color: #ef4444;
  font-size: 1.1rem;
  line-height: 1;
}
.tp-wishlist-bar__text { white-space: nowrap; }
.tp-wishlist-bar__count {
  background: var(--color-accent);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
}
.tp-wishlist-bar__share-btn {
  background: rgba(255,255,255,.15);
  border-radius: var(--radius-full);
  padding: .3rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background var(--transition);
}
.tp-wishlist-bar__share-btn:hover { background: rgba(255,255,255,.25); }

/* ══════════════════════════════════════════════════════════════
   BOTÓN "AVISAME CUANDO LLEGUE" (Waitlist)
═══════════════════════════════════════════════════════════════ */
.tp-waitlist-btn {
  gap: .5rem;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .tp-modal__box    { padding: 1.5rem; }
  .tp-share-networks{ grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .tp-share-btn     { padding: .75rem .375rem; font-size: .72rem; }
  .tp-wishlist-bar  { bottom: 1rem; right: 1rem; padding: .625rem 1rem; font-size: .825rem; }
}