/* ============================================================ Componente cart_trust — encabezado de confianza de /carrito. Estilo autocontenido (no depende de recompilar Tailwind). Dark mode por clase .dark en (estrategia del proyecto). Markup: web/templates/components/cart_trust.html Interacción: web/static/js/modules/cart-trust.js (data-action) ============================================================ */ .ct { display: block; margin-bottom: 2rem; /* separa la banda del grid (items + resumen) */ animation: ctFadeUp 0.35s ease forwards; } @media (min-width: 1024px) { .ct { margin-bottom: 2.5rem; } } @keyframes ctFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---- Tarjeta glass ---- */ .ct__card { background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid #e2e8f0; /* slate-200 */ border-radius: 1.5rem; /* rounded-3xl */ box-shadow: 0 4px 32px -4px rgba(79, 70, 229, 0.12), 0 1px 6px rgba(0, 0, 0, 0.04); overflow: hidden; } .dark .ct__card { background: rgba(30, 41, 59, 0.5); /* slate-800/50 */ border-color: rgba(255, 255, 255, 0.1); } /* ---- Fila principal: texto + chips ---- */ .ct__main { display: flex; align-items: stretch; } .ct__text { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; /* mobile: lead arriba, meta abajo */ justify-content: center; gap: 0.625rem; padding: 1rem 1.25rem; /* = banda del checkout (.acomp-band) */ } /* Bloque guía (eyebrow + título) y bloque señales (subtítulo + total) */ .ct__lead { display: flex; flex-direction: column; gap: 0.375rem; flex-shrink: 0; } .ct__meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .ct__chips { flex-shrink: 0; display: flex; flex-direction: row; /* lado a lado: NO apilar — era lo que estiraba la tarjeta */ gap: 0.5rem; align-items: center; justify-content: center; padding: 1rem 1.25rem; } /* Desktop: UNA SOLA FILA — lead | meta | chips, como la banda del checkout */ @media (min-width: 768px) { .ct__text { flex-direction: row; /* horizontal: deja de apilar */ align-items: center; justify-content: flex-start; /* ancla el título a la IZQUIERDA (no centrado) */ gap: 1.5rem; padding: 1.25rem 1.75rem; /* mismo alto que .acomp-band desktop */ } /* Divisor vertical entre la guía y las señales (igual que el del checkout) */ .ct__meta { border-left: 1px solid #e2e8f0; padding-left: 1.5rem; } .dark .ct__meta { border-left-color: rgba(255, 255, 255, 0.1); } .ct__chips { gap: 0.75rem; padding: 1.25rem 2rem; border-left: 1px solid #e2e8f0; } .dark .ct__chips { border-left-color: rgba(255, 255, 255, 0.1); } } /* ---- Título ---- */ .ct__title { font-size: 1.25rem; /* mobile — más compacto, no domina la banda */ line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; /* slate-900 */ } .dark .ct__title { color: #ffffff; } @media (min-width: 768px) { .ct__title { font-size: 1.5rem; } /* antes 2.25rem: era el principal culpable del grosor */ } .ct__grad { background: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- Subtítulo ---- */ .ct__subtitle { font-size: 0.75rem; /* = .acomp-phrase del checkout (mobile) */ line-height: 1.45; color: #64748b; /* slate-500 */ } .dark .ct__subtitle { color: #94a3b8; } /* slate-400 */ @media (min-width: 768px) { .ct__subtitle { font-size: 0.875rem; max-width: 32rem; } /* = .acomp-phrase desktop */ } /* ---- Total honesto ---- */ .ct__total { display: flex; align-items: center; gap: 0.5rem; font-size: 11px; line-height: 1.4; color: #94a3b8; /* slate-400 */ } .dark .ct__total { color: #64748b; } .ct__total svg { flex-shrink: 0; color: #818cf8; /* indigo-400 */ } /* ---- Mobile: la banda guia NO debe estorbar la lista de compras ---- Se oculta el bloque .ct__meta (subtitulo + total honesto) por debajo de 768px: queda solo eyebrow + titulo + chips, una guia compacta. El texto NO se borra — reaparece en desktop (.ct__meta vuelve a display:flex). */ @media (max-width: 767px) { .ct__meta { display: none; } /* Aprieta la distancia a la tarjeta de abajo (banner/productos): el aire de 2rem comia espacio sobre la lista de compras. Desktop mantiene 2/2.5rem. */ .ct { margin-bottom: 0.75rem; } } /* ---- Chips (control) ---- */ .ct__chip { padding: 0; border: none; background: none; border-radius: 0.75rem; cursor: pointer; outline: none; transition: transform 0.15s ease, box-shadow 0.25s ease; } .ct__chip:active { transform: scale(0.93); } .ct__chip:focus-visible { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.55); } .ct__chipicon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { .ct__chipicon { width: 2.75rem; height: 2.75rem; } } .ct__chipicon--brand { background: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%); box-shadow: 0 0 18px rgba(79, 70, 229, 0.30); } /* Verde de marca SOLO en el chip de WhatsApp (canal real de venta) */ .ct__chipicon--wa { background: #25d366; box-shadow: 0 0 18px rgba(37, 211, 102, 0.35); } .ct__chip:hover .ct__chipicon--brand { box-shadow: 0 0 26px rgba(79, 70, 229, 0.50); } .ct__chip:hover .ct__chipicon--wa { box-shadow: 0 0 26px rgba(37, 211, 102, 0.55); } /* Anillo del chip activo (color según la señal) */ .ct__chip.is-active[data-signal="cuenta"] { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.55); } .ct__chip.is-active[data-signal="wa"] { box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.60); } /* ---- Área de detalle: colapsada por defecto, crece al presionar ---- */ .ct__detail { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; } .ct__detail.is-open { max-height: 240px; } .ct__detailbox { margin: 0 1.25rem 1.25rem; padding: 0.75rem 0.75rem 0.75rem 0.875rem; border-left: 3px solid transparent; border-radius: 0 0.5rem 0.5rem 0; opacity: 0; transition: opacity 0.25s ease 0.05s, border-color 0.25s ease, background-color 0.25s ease; } .ct__detail.is-open .ct__detailbox { opacity: 1; } @media (min-width: 768px) { .ct__detailbox { margin: 0 1.75rem 1.5rem; padding: 1rem 1rem 1rem 1.25rem; } } .ct__detailbox.accent-cuenta { border-color: #4f46e5; background-color: rgba(79, 70, 229, 0.05); } .ct__detailbox.accent-wa { border-color: #25d366; background-color: rgba(37, 211, 102, 0.06); } .ct__detailtitle { margin-bottom: 0.125rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.25; color: #1e293b; /* slate-800 */ } .dark .ct__detailtitle { color: #f1f5f9; } /* slate-100 */ .ct__detaildesc { font-size: 0.75rem; line-height: 1.4; color: #64748b; /* slate-500 */ } .dark .ct__detaildesc { color: #94a3b8; } /* slate-400 */ @media (min-width: 768px) { .ct__detailtitle { font-size: 0.875rem; } .ct__detaildesc { font-size: 0.875rem; } } /* Respeta usuarios que prefieren menos movimiento */ @media (prefers-reduced-motion: reduce) { .ct { animation: none; } .ct__chip, .ct__chipicon, .ct__detail, .ct__detailbox { transition: none; } }