/* ============================================================
BidSale App CSS — basado en TGS Design System v1.0
Dark-first · Mobile-first
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
/* === TOKENS === */
:root {
--f7-theme-color: #00d47d;
--bs-green: #00d47d;
--bs-green-light: #33e0a0;
--bs-green-dark: #00995a;
--bs-green-glow: rgba(0,212,125,0.25);
--bs-navy: #060f1a;
--bs-surface: #0b1623;
--bs-surface-2: #111f2e;
--bs-surface-3: #1a2c3d;
--bs-border: rgba(255,255,255,0.08);
--bs-text: #e6f1ff;
--bs-text-2: #a8c1d9;
--bs-text-3: #6b8ca6;
--bs-danger: #ff3b3b;
--bs-warning: #ffc857;
--bs-info: #00a3ff;
--bs-font-title: 'Plus Jakarta Sans', system-ui, sans-serif;
--bs-font-body: 'DM Sans', system-ui, sans-serif;
--bs-font-mono: 'JetBrains Mono', monospace;
--bs-radius-sm: 8px;
--bs-radius-md: 12px;
--bs-radius-lg: 16px;
--bs-radius-xl: 24px;
--bs-radius-full: 9999px;
--bs-shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
--bs-shadow-md: 0 4px 20px rgba(0,0,0,0.50);
--bs-shadow-lg: 0 8px 40px rgba(0,0,0,0.60);
--bs-shadow-green: 0 4px 24px rgba(0,212,125,0.35);
--bs-ease: cubic-bezier(0.4, 0, 0.2, 1);
--bs-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--bs-dur-fast: 150ms;
--bs-dur-normal: 250ms;
--bs-dur-slow: 400ms;
}
/* === RESET BASE === */
*, *::before, *::after {
box-sizing: border-box; margin: 0; padding: 0;
/* Quita el cuadro azul/oscuro del tap en WebView Android (sin esto, cada
tap pinta un highlight rectangular feo que rompe la estética native).
Cada elemento puede definir su propio :active/:hover si quiere feedback. */
-webkit-tap-highlight-color: transparent;
}
/* Highlight discreto cuando entra un reply nuevo via WebSocket — ayuda a que
el ojo lo detecte sin scroll automático ni jumpscare visual. */
@keyframes bs-reply-pop {
0% { background: color-mix(in srgb, var(--bs-green, #00d47d) 22%, transparent); }
100% { background: transparent; }
}
/* === Modal filtro de subasta (/bids-history) === */
/* Segmented control "Una / Varias" — patrón pill grupo encapsulado */
.bs-mode-segmented {
display: flex;
gap: 4px;
background: var(--bs-surface-3, rgba(255,255,255,.04));
border: 1px solid var(--bs-border, rgba(255,255,255,.06));
padding: 4px;
border-radius: 12px;
margin: 4px 0 14px;
}
.bs-mode-seg {
flex: 1;
background: transparent;
border: none;
padding: 9px 12px;
border-radius: 8px;
color: var(--bs-text-3, rgba(255,255,255,.55));
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all .18s ease;
font-family: inherit;
}
.bs-mode-seg i { font-size: 13px; }
.bs-mode-seg:hover:not(.bs-mode-seg--active) {
color: var(--bs-text, #fff);
}
.bs-mode-seg--active {
background: var(--bs-green, #00d47d);
color: var(--bs-navy, #030810);
box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-green, #00d47d) 25%, transparent);
}
/* Cards de subasta — patron radio-card pero con icono + check sólido */
.bs-bids-filter-card {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 13px;
background: var(--bs-surface-3, rgba(255,255,255,.04));
border: 1.5px solid var(--bs-border, rgba(255,255,255,.08));
border-radius: 12px;
margin-bottom: 8px;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, transform .12s ease;
position: relative;
}
.bs-bids-filter-card:hover {
border-color: color-mix(in srgb, var(--bs-green, #00d47d) 35%, var(--bs-border, rgba(255,255,255,.08)));
}
.bs-bids-filter-card input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bs-bids-filter-card__icon {
width: 34px; height: 34px;
border-radius: 9px;
background: color-mix(in srgb, var(--bs-green, #00d47d) 10%, transparent);
color: var(--bs-green, #00d47d);
display: flex; align-items: center; justify-content: center;
font-size: 15px;
flex-shrink: 0;
transition: background .18s ease, color .18s ease;
}
.bs-bids-filter-card__name {
flex: 1;
font-size: 13px;
color: var(--bs-text, #fff);
font-weight: 500;
line-height: 1.25;
}
.bs-bids-filter-card__check {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--bs-border, rgba(255,255,255,.08));
display: flex; align-items: center; justify-content: center;
color: transparent;
font-size: 11px;
flex-shrink: 0;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
/* Estado seleccionado: borde verde, fondo sutil, check sólido. Usa :has() —
Chromium 105+ lo soporta, Capacitor 5 WebView lo tiene. */
.bs-bids-filter-card:has(input:checked) {
border-color: var(--bs-green, #00d47d);
background: color-mix(in srgb, var(--bs-green, #00d47d) 8%, var(--bs-surface-3, rgba(255,255,255,.04)));
}
.bs-bids-filter-card:has(input:checked) .bs-bids-filter-card__icon {
background: var(--bs-green, #00d47d);
color: var(--bs-navy, #030810);
}
.bs-bids-filter-card:has(input:checked) .bs-bids-filter-card__check {
background: var(--bs-green, #00d47d);
color: var(--bs-navy, #030810);
transform: scale(1.05);
}
/* === Badges del autor en comentarios (tú / Vendedor) === */
.bs-comment-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 5px;
margin-left: 4px;
vertical-align: middle;
letter-spacing: .2px;
}
.bs-comment-badge--you {
color: var(--bs-green, #00d47d);
background: color-mix(in srgb, var(--bs-green, #00d47d) 14%, transparent);
}
.bs-comment-badge--seller {
color: var(--bs-navy, #030810);
background: var(--bs-green, #00d47d);
}
.bs-comment-badge--seller i {
font-size: 11px;
}
/* Staff badges: Owner (gold), Admin (azul violeta), Supervisor (cyan).
Tonos distintos del verde del seller/you para que se lean a primera vista. */
.bs-comment-badge--owner {
color: #1a1206;
background: linear-gradient(135deg, #fde047, #f59e0b);
box-shadow: 0 1px 4px rgba(245,158,11,.35);
}
.bs-comment-badge--owner i { font-size: 11px; }
.bs-comment-badge--admin {
color: #ffffff;
background: linear-gradient(135deg, #8b5cf6, #6d28d9);
box-shadow: 0 1px 4px rgba(139,92,246,.35);
}
.bs-comment-badge--admin i { font-size: 11px; }
.bs-comment-badge--supervisor {
color: #ffffff;
background: linear-gradient(135deg, #06b6d4, #0e7490);
box-shadow: 0 1px 4px rgba(6,182,212,.35);
}
.bs-comment-badge--supervisor i { font-size: 11px; }
/* === MODAL "Ingresar código" — cards de elección QR / Código === */
.bs-join-choice-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 22px 12px 18px;
background: var(--bs-surface-3, rgba(255,255,255,.04));
border: 1.5px solid var(--bs-border, rgba(255,255,255,.08));
border-radius: 14px;
color: var(--bs-text, #fff);
cursor: pointer;
transition: border-color .18s ease, transform .12s ease, background .18s ease;
}
.bs-join-choice-card:hover {
border-color: var(--bs-green, #00d47d);
background: color-mix(in srgb, var(--bs-green, #00d47d) 8%, transparent);
}
.bs-join-choice-card > i {
font-size: 38px;
color: var(--bs-green, #00d47d);
}
.bs-join-choice-card__label {
font-weight: 700;
font-size: 15px;
margin-top: 2px;
}
.bs-join-choice-card__hint {
font-size: 10px;
color: var(--bs-text-3, rgba(255,255,255,.5));
text-transform: uppercase;
letter-spacing: .5px;
}
/* Fade genérico al press en elementos interactivos — reemplaza al tap-highlight
nativo con feedback visual sutil. Componentes con :active más específico
(scale, translate, bg-color) ganan en sus propiedades; opacity se acumula. */
button:active,
a:active,
label:active,
[role="button"]:active,
[onclick]:active {
opacity: 0.65;
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; height: 100%; }
body {
font-family: var(--bs-font-body) !important;
/* App-shell tiene max-width 430px (diseño mobile-only) — en pantallas
anchas (iPad) sobra espacio a los costados. Antes era #030810 plano y
se veía como un error; este glow con los mismos tokens de marca hace
que el "margen" luzca a propósito en vez de una franja negra rota. */
background:
radial-gradient(ellipse 70% 60% at 50% 0%, var(--bs-green-glow, rgba(0,212,125,0.25)) 0%, transparent 60%),
var(--bs-navy, #060f1a) !important;
color: var(--bs-text) !important;
-webkit-font-smoothing: antialiased;
overscroll-behavior: none;
overflow: hidden !important;
height: 100% !important;
display: flex !important;
align-items: center;
justify-content: center;
}
img { max-width: 100%; display: block; }
a { color: var(--bs-green); text-decoration: none; }
a:hover { color: var(--bs-green-light); }
button { font-family: var(--bs-font-body); cursor: pointer; }
/* === APP SHELL — max 430px centrado === */
#app-shell {
width: 100%;
max-width: 430px;
height: 100vh;
height: 100dvh;
background: var(--bs-navy);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
flex-shrink: 0;
box-shadow: 0 0 80px rgba(0,0,0,0.8);
/* Safe area para dispositivos con notch / punch-hole / Dynamic Island.
Sin este padding el navbar (título, iconos, botón +) queda tapado
detrás de la cámara frontal en Samsung Galaxy A/S, iPhone X+, etc.
`env(safe-area-inset-*)` devuelve 0 en dispositivos sin notch, por lo
que el fix es 100% aditivo — cero impacto en devices tradicionales.
Requiere viewport-fit=cover en el meta viewport (ya está seteado). */
padding-top: env(safe-area-inset-top, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
/* Tablet (iPad): el shell crece de 430 a 960px. .screen usa inset:0 dentro
del shell, así que las 12 pantallas heredan el ancho nuevo solas — cada
sección de abajo decide qué hacer con el espacio extra (grids de 2 col,
forms centrados a un ancho propio, etc.). 960px deja ~32px de margen en
iPad Pro 12.9" portrait (1024px); en iPads más chicos el shell ocupa el
100% disponible sin breakpoints intermedios. */
@media (min-width: 768px) {
#app-shell { max-width: 960px; }
}
/* === SCREENS === */
.screen {
display: none;
position: absolute;
inset: 0;
flex-direction: column;
overflow: hidden;
background: var(--bs-navy);
}
.screen.active { display: flex; }
.scroll-content {
flex: 1;
/* iOS Safari flexbox bug: sin `min-height: 0` en un flex-child con
overflow, iOS calcula min-height:auto (= min-content) y el container
no clippea, delegando el scroll al body/screen y rompiendo el gesto
de pan en el centro. Con esto el flex respeta el overflow real. */
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* iOS Safari: touch iniciado sobre elementos con onclick (rows, kpi cards)
era interpretado como tap y bloqueaba pan. `pan-y` fuerza scroll vert
siempre; el tap sigue disparándose cuando el touch no se mueve. */
touch-action: pan-y;
/* Aísla el scroll chain — sin esto iOS puede propagar el gesto al padre
`#app-shell` (que tiene overflow:hidden) y matarlo antes de que el
.scroll-content lo procese. */
overscroll-behavior: contain;
}
.scroll-content::-webkit-scrollbar { display: none; }
/* === SPLASH / INIT ===
Va FUERA del app-shell (position:fixed) para ocupar toda la plataforma,
no solo la columna de 430px. Z-index alto para tapar todo durante el boot. */
#screen-init {
position: fixed;
inset: 0;
background:
radial-gradient(ellipse at top, color-mix(in srgb, var(--bs-green) 5%, transparent) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--bs-green) 3%, transparent) 0%, transparent 50%),
var(--bs-navy);
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 9999;
transition: opacity .45s ease, transform .45s ease;
}
/* Fade-out + leve scale-up al salir (lo dispara initApp antes de goTo) */
#screen-init.bs-splash-leave {
opacity: 0;
transform: scale(1.04);
pointer-events: none;
}
/* Glow ambiental central — pulsa muy lento */
#screen-init::before {
content: '';
position: absolute;
width: min(90vmin, 900px);
height: min(90vmin, 900px);
border-radius: 50%;
background: radial-gradient(circle,
color-mix(in srgb, var(--bs-green) 18%, transparent) 0%,
transparent 55%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
filter: blur(20px);
animation: bs-splash-pulse 4.5s ease-in-out infinite;
pointer-events: none;
}
/* Grain sutil sobre el glow para textura premium */
#screen-init::after {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(0deg,
rgba(255,255,255,0.012) 0 1px,
transparent 1px 3px);
mix-blend-mode: overlay;
pointer-events: none;
}
@keyframes bs-splash-pulse {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
.bs-splash {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 24px;
text-align: center;
}
/* Icono gavel — badge con halo doble */
.bs-splash-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: clamp(72px, 11vmin, 108px);
height: clamp(72px, 11vmin, 108px);
border-radius: clamp(20px, 3vmin, 28px);
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
color: var(--bs-navy);
font-size: clamp(36px, 5.5vmin, 54px);
box-shadow:
0 0 0 6px color-mix(in srgb, var(--bs-green) 14%, transparent),
0 0 0 14px color-mix(in srgb, var(--bs-green) 6%, transparent),
0 18px 50px color-mix(in srgb, var(--bs-green) 38%, transparent);
animation: bs-splash-icon-in .8s var(--bs-spring) both;
margin-bottom: 4px;
}
@keyframes bs-splash-icon-in {
from { opacity: 0; transform: scale(.5) rotate(-12deg); }
to { opacity: 1; transform: scale(1) rotate(0); }
}
/* "BidSale" — gradient + entrada fade-up */
.bs-splash-logo {
font-family: var(--bs-font-title);
font-size: clamp(56px, 10vmin, 112px);
font-weight: 700;
line-height: 1;
letter-spacing: -1.5px;
margin: 0;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 60%, #ffffff) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: bs-splash-rise .8s cubic-bezier(.16, 1, .3, 1) .15s both;
}
.bs-splash-logo span { /* "Sale" hereda el gradient del padre */ }
.bs-splash-tagline {
font-size: clamp(11px, 1.5vmin, 14px);
color: var(--bs-text-3);
letter-spacing: 0.24em;
text-transform: uppercase;
margin: 0;
animation: bs-splash-rise .8s cubic-bezier(.16, 1, .3, 1) .3s both;
}
/* Loader slim con shimmer recorriendo */
.bs-splash-loader {
margin-top: 10px;
width: clamp(120px, 18vmin, 160px);
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
overflow: hidden;
animation: bs-splash-rise .8s cubic-bezier(.16, 1, .3, 1) .45s both;
}
.bs-splash-loader span {
display: block;
height: 100%;
width: 40%;
border-radius: 999px;
background: linear-gradient(90deg,
transparent 0%,
var(--bs-green) 50%,
transparent 100%);
animation: bs-splash-shimmer 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes bs-splash-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
.bs-splash-footer {
margin-top: 18px;
font-size: clamp(10px, 1.2vmin, 12px);
color: var(--bs-text-3);
opacity: 0.55;
letter-spacing: 0.08em;
animation: bs-splash-rise .8s cubic-bezier(.16, 1, .3, 1) .6s both;
}
@keyframes bs-splash-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* === LOADER OVERLAY GLOBAL ===
Backdrop blureado + gavel pulsando. Color del icono usa --bs-green,
que applyAuctionBranding() reemplaza dentro de /auction/{code}. */
.bs-loader {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
/* Backdrop-filter removido: el loader aparece 350ms en cada cambio de
pantalla. El blur de toda la viewport en cada transición costaba un
repaint completo del compositor — visible como parpadeo en Android. */
background: rgba(6, 15, 26, 0.78);
z-index: 9998;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s ease, visibility .25s;
}
.bs-loader.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.bs-loader-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 20px;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
color: var(--bs-navy);
font-size: 32px;
box-shadow:
0 0 0 5px color-mix(in srgb, var(--bs-green) 14%, transparent),
0 0 0 12px color-mix(in srgb, var(--bs-green) 6%, transparent),
0 14px 40px color-mix(in srgb, var(--bs-green) 38%, transparent);
animation: bs-loader-pulse 1.2s ease-in-out infinite;
}
@keyframes bs-loader-pulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 0 0 5px color-mix(in srgb, var(--bs-green) 14%, transparent),
0 0 0 12px color-mix(in srgb, var(--bs-green) 6%, transparent),
0 14px 40px color-mix(in srgb, var(--bs-green) 38%, transparent);
}
50% {
transform: scale(1.08);
box-shadow:
0 0 0 8px color-mix(in srgb, var(--bs-green) 18%, transparent),
0 0 0 18px color-mix(in srgb, var(--bs-green) 8%, transparent),
0 18px 50px color-mix(in srgb, var(--bs-green) 50%, transparent);
}
}
/* === NAVBAR === */
.bs-navbar {
display: flex; align-items: center;
padding: 0 16px; height: 56px;
background: var(--bs-surface);
border-bottom: 1px solid var(--bs-border);
flex-shrink: 0; position: relative; z-index: 10;
}
.bs-navbar .title {
flex: 1; text-align: center;
font-size: 16px; font-weight: 600; color: var(--bs-text);
margin: 0; line-height: 1.3; /* reset del nativo */
}
.bs-navbar .left, .bs-navbar .right { width: 44px; display: flex; align-items: center; }
.bs-navbar .right { justify-content: flex-end; }
.bs-back, .bs-icon-btn {
background: none; border: none; color: var(--bs-green); font-size: 22px;
padding: 0; min-width: 44px; min-height: 44px;
display: flex; align-items: center; justify-content: center;
transition: opacity var(--bs-dur-fast) var(--bs-ease);
}
/* El "‹" del botón back es un caracter glyph (no icofont), se ve
notablemente más chico al mismo font-size. Lo bumpeamos solo a él
sin afectar los demás bs-icon-btn (hamburguesa, campanita). */
.bs-back {
font-size: 38px;
line-height: 1;
font-weight: 300;
}
.bs-back:active, .bs-icon-btn:active { opacity: 0.6; }
/* === LOGIN === */
#screen-login {
background: var(--bs-navy);
position: absolute; inset: 0;
overflow-y: auto;
justify-content: center;
align-items: center;
}
#screen-login::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 15% 0%, rgba(0,212,125,0.08) 0%, transparent 55%),
radial-gradient(ellipse at 85% 100%, rgba(0,163,255,0.05) 0%, transparent 50%);
pointer-events: none;
}
.bs-login-wrap {
padding: 32px 24px 40px;
width: 100%;
position: relative;
flex-shrink: 0;
}
/* Mesh decorativo de fondo del login (gradient sutil + glow del brand) */
.bs-login-mesh {
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 12%,
color-mix(in srgb, var(--bs-green) 25%, transparent) 0%,
transparent 45%),
radial-gradient(circle at 80% 70%,
color-mix(in srgb, var(--bs-green) 8%, transparent) 0%,
transparent 50%);
z-index: 0;
}
.bs-login-wrap { position: relative; z-index: 1; }
@media (min-width: 768px) {
.bs-login-wrap { max-width: 480px; margin-inline: auto; }
}
.bs-login-brand { text-align: center; margin-bottom: 36px; }
.bs-login-brand__logo {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
border-radius: 18px;
background: linear-gradient(135deg, var(--bs-green) 0%, color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
color: var(--bs-navy);
font-size: 28px;
margin-bottom: 14px;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--bs-green) 18%, transparent),
0 12px 32px color-mix(in srgb, var(--bs-green) 25%, transparent);
animation: bs-login-logo-in .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bs-login-logo-in {
from { opacity: 0; transform: scale(.6) rotate(-10deg); }
to { opacity: 1; transform: scale(1) rotate(0); }
}
.bs-login-brand__name {
font-family: var(--bs-font-title);
font-size: 48px; font-weight: 700;
line-height: 1; letter-spacing: -1px;
margin: 0;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 65%, #fff) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bs-login-brand__tagline {
font-size: 13px; color: var(--bs-text-3);
margin: 8px 0 0;
font-style: italic;
letter-spacing: .02em;
}
/* Field state visual: OK (verde) / Error (rojo) */
.bs-field { position: relative; }
.bs-field--ok .bs-input { border-color: var(--bs-green) !important; }
.bs-field--err .bs-input { border-color: var(--bs-danger) !important; }
.bs-field-status {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
font-size: 18px; pointer-events: none;
display: flex; align-items: center;
}
.bs-field--ok .bs-field-status { color: var(--bs-green); }
.bs-field--err .bs-field-status { color: var(--bs-danger); }
/* Si hay toggle de password al lado, no muestres el status (sería visual conflict) */
.bs-field:has(.bs-field-toggle) .bs-field-status { display: none; }
/* Hints debajo del field (warning de caps lock, error format, etc) */
.bs-field-hint {
display: flex; align-items: center; gap: 6px;
margin: 6px 2px 0;
font-size: 11px; color: var(--bs-text-3);
}
.bs-field-hint i { font-size: 12px; }
.bs-field-hint--warn { color: #f59e0b; }
.bs-field-hint--warn i { color: #f59e0b; }
.bs-field-hint--err { color: var(--bs-danger); }
.bs-field-hint--err i { color: var(--bs-danger); }
/* Card de error del login (más prominente que el text plano) */
.bs-error-msg--card {
display: flex; align-items: center; gap: 8px;
margin-top: 12px; padding: 10px 14px;
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--bs-danger) 40%, transparent);
border-radius: var(--bs-radius-md);
color: var(--bs-danger);
font-size: 13px;
font-weight: 500;
}
.bs-error-msg--card i { font-size: 16px; flex-shrink: 0; }
/* Shake animation para error feedback */
@keyframes bs-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
20%, 40%, 60%, 80% { transform: translateX(6px); }
}
.bs-shake { animation: bs-shake .45s cubic-bezier(.36,.07,.19,.97) both; }
/* Link "¿Olvidaste tu contraseña?" debajo del botón Login */
.bs-login-forgot {
text-align: center;
margin-top: 10px;
}
.bs-login-forgot .bs-link-btn {
font-size: 13px;
color: var(--bs-text-3);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--bs-text-3) 40%, transparent);
}
.bs-login-forgot .bs-link-btn:hover {
color: var(--bs-green);
text-decoration-color: var(--bs-green);
}
/* Password strength meter (register modal) */
.bs-pw-strength {
display: flex; align-items: center; gap: 10px;
margin: 8px 2px 0;
}
.bs-pw-strength__bar {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--bs-surface-3);
overflow: hidden;
position: relative;
}
.bs-pw-strength__fill {
height: 100%;
width: 0%;
border-radius: 3px;
background: var(--bs-danger);
transition: width .25s ease, background .25s ease;
}
.bs-pw-strength__label {
font-size: 11px; font-weight: 700;
letter-spacing: .04em;
min-width: 70px;
text-align: right;
color: var(--bs-text-3);
transition: color .25s ease;
}
/* Banner verde "Te enviamos un código..." en el step 2 del modal forgot */
.bs-forgot-success {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
margin-bottom: 16px;
background: color-mix(in srgb, var(--bs-green) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--bs-green) 30%, transparent);
border-radius: var(--bs-radius-md);
font-size: 13px;
color: var(--bs-text);
}
.bs-forgot-success > i {
font-size: 18px;
color: var(--bs-green);
flex-shrink: 0;
}
.bs-forgot-success strong { color: var(--bs-green); }
/* === FORM === */
.bs-form-group { margin-bottom: 16px; }
.bs-label {
display: block; font-size: 11px; font-weight: 600;
color: var(--bs-text-3); text-transform: uppercase;
letter-spacing: 0.08em; margin-bottom: 8px;
}
/* Campo con ícono izquierdo */
.bs-field {
position: relative;
display: flex;
align-items: center;
}
.bs-field-icon {
position: absolute; left: 16px;
color: var(--bs-text-3); font-size: 17px;
pointer-events: none; z-index: 1;
transition: color var(--bs-dur-fast) var(--bs-ease);
}
.bs-field:focus-within .bs-field-icon { color: var(--bs-green); }
.bs-field-toggle {
position: absolute; right: 0;
width: 52px; height: 100%;
background: none; border: none;
color: var(--bs-text-3); font-size: 18px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; border-radius: 0 var(--bs-radius-md) var(--bs-radius-md) 0;
transition: color var(--bs-dur-fast) var(--bs-ease);
}
.bs-field-toggle:hover { color: var(--bs-green); }
.bs-input {
width: 100%;
padding: 0 16px;
height: 52px;
background: var(--bs-surface-2);
border: 1.5px solid #1e3248;
border-radius: var(--bs-radius-md);
font-family: var(--bs-font-body);
font-size: 15px; color: var(--bs-text);
outline: none; appearance: none;
transition: border-color var(--bs-dur-fast) var(--bs-ease),
box-shadow var(--bs-dur-fast) var(--bs-ease);
}
.bs-field .bs-input { padding-left: 48px; }
.bs-field .bs-input:has(+ .bs-field-toggle) { padding-right: 52px; }
.bs-input::placeholder { color: #3d5a72; }
.bs-input:focus {
border-color: var(--bs-green);
box-shadow: 0 0 0 3px var(--bs-green-glow);
}
.bs-input:hover:not(:focus) { border-color: #2a4060; }
.bs-input--error { border-color: var(--bs-danger) !important; }
/* Selects: chevron a la derecha (appearance:none lo quita por default) */
select.bs-input {
padding-right: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
}
select.bs-input:disabled {
opacity: .55;
cursor: not-allowed;
}
/* Dentro de bs-field el icono ya empuja a la izquierda, mantenemos chevron derecha */
.bs-field select.bs-input { padding-right: 40px; }
/* ── Upload screen: wizard 2 pasos ──────────────────────────────────────── */
/* Step bar del wizard de subir artículo — dots estilo register/forgot
+ título del paso actual. Reemplaza el viejo bs-upload-steps con números. */
.bs-upload-step-bar {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 14px 16px 12px;
background: var(--bs-surface);
border-bottom: 1px solid var(--bs-border);
flex-shrink: 0;
}
.bs-upload-step-bar__title {
font-family: var(--bs-font-body);
font-size: 13px; font-weight: 700;
color: var(--bs-text);
margin: 0;
letter-spacing: -0.01em;
}
.bs-upload-section {
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-md);
padding: 14px 16px;
margin-bottom: 14px;
}
.bs-upload-section__head {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--bs-text-3);
display: flex; align-items: center; gap: 6px;
margin-bottom: 12px;
}
.bs-upload-section__head i {
font-size: 13px;
color: var(--bs-green);
}
/* Success alert en step 2 */
.bs-upload-success {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: color-mix(in srgb, var(--bs-green) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--bs-green) 30%, transparent);
border-radius: var(--bs-radius-md);
color: var(--bs-text);
font-size: 13px;
}
.bs-upload-success > i {
font-size: 22px;
color: var(--bs-green);
flex-shrink: 0;
}
/* Drop zone genérico (video) */
.bs-upload-drop {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
padding: 24px 16px;
background: var(--bs-surface-3);
border: 2px dashed var(--bs-border);
border-radius: var(--bs-radius-md);
cursor: pointer;
transition: border-color .2s ease, background .2s ease;
}
.bs-upload-drop--compact { padding: 18px 14px; }
.bs-upload-drop:hover {
border-color: var(--bs-green);
background: color-mix(in srgb, var(--bs-green) 6%, var(--bs-surface-3));
}
.bs-upload-drop > i {
font-size: 26px;
color: var(--bs-green);
}
.bs-upload-drop__label {
font-size: 13px;
font-weight: 600;
color: var(--bs-text);
}
.bs-upload-drop__hint {
font-size: 11px;
color: var(--bs-text-3);
}
/* Grid de fotos: 3 columnas en móvil */
.bs-photos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.bs-photo-thumb {
position: relative;
aspect-ratio: 1;
border-radius: var(--bs-radius-md);
overflow: hidden;
border: 1px solid var(--bs-border);
background: var(--bs-surface-3);
cursor: grab;
/* Damos control total al JS sobre touch para que el drag funcione en mobile.
Sin esto, Chrome intercepta el touchmove para hacer scroll antes de que
nuestro pointer handler pueda activar el drag. */
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* El boton X SI debe responder normal al touch (tap = delete) */
.bs-photo-thumb__remove {
touch-action: auto;
}
.bs-photo-thumb:active { cursor: grabbing; }
.bs-photo-thumb--dragging {
opacity: .4;
transform: scale(.95);
}
.bs-photo-thumb--drop-target {
border-color: var(--bs-green);
box-shadow: 0 0 0 2px var(--bs-green-glow);
transform: scale(1.04);
}
.bs-photo-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.bs-photo-thumb__overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,.4);
display: flex; align-items: center; justify-content: center;
color: #fff;
}
.bs-photo-thumb__remove {
position: absolute; top: 4px; right: 4px;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(0,0,0,.65);
border: none; color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 12px; padding: 0;
}
.bs-photo-thumb__cover {
position: absolute; bottom: 4px; left: 4px;
background: var(--bs-green); color: var(--bs-navy);
font-size: 9px; font-weight: 700;
padding: 2px 6px; border-radius: 4px;
letter-spacing: .05em;
}
.bs-photo-add {
aspect-ratio: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
background: var(--bs-surface-3);
border: 2px dashed var(--bs-border);
border-radius: var(--bs-radius-md);
cursor: pointer;
color: var(--bs-text-3);
transition: border-color .2s ease, color .2s ease;
}
.bs-photo-add:hover {
border-color: var(--bs-green);
color: var(--bs-green);
}
.bs-photo-add > i { font-size: 22px; color: var(--bs-green); }
.bs-photo-add > span { font-size: 10px; }
/* Video cargado (bloque debajo de la drop zone cuando ya hay video) */
.bs-video-loaded {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bs-surface-3);
border: 1px solid color-mix(in srgb, var(--bs-green) 35%, var(--bs-border));
border-radius: var(--bs-radius-md);
}
.bs-video-loaded__name {
flex: 1; font-size: 13px; color: var(--bs-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-video-loaded__remove {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(255,255,255,.05);
border: 1px solid var(--bs-border);
color: var(--bs-text-2); cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 13px; padding: 0; flex-shrink: 0;
}
.bs-video-loaded__remove:hover { color: var(--bs-danger); border-color: var(--bs-danger); }
/* Metadata del video (tamaño · duración · resolución) bajo el nombre */
.bs-video-meta {
font-size: 11px; color: var(--bs-text-3); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Barra de progreso para upload de video */
.bs-video-progress { margin-top: 10px; }
.bs-video-progress__bar {
width: 100%; height: 6px;
background: rgba(255,255,255,.06);
border-radius: 3px; overflow: hidden;
}
/* ── Final minute warning: glow rojo pulsante en TODO el app-shell ─────────
Se activa cuando queda 1 min en un item donde el user lidera. Presión
social visual: borde interno rojo pulsando fuerte, imposible ignorar. */
.bs-shell-final-minute {
position: relative;
}
.bs-shell-final-minute::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
border-radius: inherit;
box-shadow:
inset 0 0 0 3px rgba(255, 59, 48, .9),
inset 0 0 40px rgba(255, 59, 48, .55),
inset 0 0 80px rgba(255, 59, 48, .3);
animation: bs-shell-final-pulse 1s ease-in-out infinite;
z-index: 9997;
}
@keyframes bs-shell-final-pulse {
0%, 100% {
box-shadow:
inset 0 0 0 3px rgba(255, 59, 48, .9),
inset 0 0 40px rgba(255, 59, 48, .55),
inset 0 0 80px rgba(255, 59, 48, .3);
}
50% {
box-shadow:
inset 0 0 0 4px rgba(255, 59, 48, 1),
inset 0 0 60px rgba(255, 59, 48, .75),
inset 0 0 120px rgba(255, 59, 48, .45);
}
}
@media (prefers-reduced-motion: reduce) {
.bs-shell-final-minute::before { animation: none; }
}
/* ── Long-press peek preview de item ────────────────────────────────────────
Overlay que aparece con long-press sobre una card. Solo visual, sin CTA.
Se cierra al soltar el touch. Blur backdrop + card scale in. */
.bs-peek-overlay {
position: absolute; inset: 0;
background: rgba(6, 15, 26, .55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 9998;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0;
transition: opacity 160ms ease-out;
pointer-events: none;
}
.bs-peek-overlay--in { opacity: 1; }
.bs-peek-card {
width: 100%; max-width: 340px;
background: var(--bs-surface);
border: 1px solid var(--bs-border);
border-radius: 16px; overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
transform: scale(.7);
transition: transform 220ms cubic-bezier(.34, 1.35, .64, 1);
}
.bs-peek-overlay--in .bs-peek-card { transform: scale(1); }
.bs-peek-card--leading { box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 2px var(--bs-green); }
.bs-peek-img {
position: relative; width: 100%;
aspect-ratio: 4/3; overflow: hidden;
background: var(--bs-surface-3);
}
.bs-peek-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-peek-img__ph {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: var(--bs-text-3); font-size: 42px;
}
.bs-peek-badge {
position: absolute; top: 10px; right: 10px;
padding: 4px 10px; border-radius: 999px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
background: rgba(0,212,125,0.22); color: var(--bs-green);
border: 1px solid rgba(0,212,125,.5);
display: inline-flex; align-items: center; gap: 4px;
}
.bs-peek-info { padding: 16px; }
.bs-peek-name {
margin: 0 0 12px;
font-family: var(--bs-font-title);
font-size: 16px; font-weight: 700; color: var(--bs-text);
letter-spacing: -0.2px;
}
.bs-peek-prices {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
padding: 12px 14px; border-radius: 10px;
background: rgba(255,255,255,.03);
border: 1px solid var(--bs-border);
}
.bs-peek-price__label {
display: block;
font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
color: var(--bs-text-3); margin-bottom: 3px;
}
.bs-peek-price__val {
display: block; font-family: var(--bs-font-title);
font-size: 18px; font-weight: 700; color: var(--bs-text);
}
.bs-peek-price-current .bs-peek-price__val { color: var(--bs-green); }
.bs-peek-price-next { text-align: right; }
.bs-peek-hint {
margin: 12px 0 0; text-align: center;
font-size: 11px; color: var(--bs-text-3);
}
@media (prefers-reduced-motion: reduce) {
.bs-peek-overlay { transition: opacity 100ms linear; }
.bs-peek-card { transition: none; transform: none; }
}
/* ── Confetti celebration (win subasta) ─────────────────────────────────────
Overlay full-shell con 60 partículas que caen. absolute dentro del app-shell
para respetar max-width 430px. pointer-events none para no bloquear UI. */
.bs-confetti {
position: absolute; inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 9999;
}
.bs-confetti__piece {
position: absolute; top: -20px;
animation: bs-confetti-fall linear forwards;
will-change: transform, opacity;
}
.bs-confetti__piece--square { border-radius: 1px; }
.bs-confetti__piece--circle { border-radius: 50%; }
.bs-confetti__piece--triangle {
background: transparent !important;
width: 0 !important; height: 0 !important;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 10px solid currentColor;
color: inherit;
}
@keyframes bs-confetti-fall {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
85% { opacity: 1; }
100% {
transform: translateY(105vh) rotate(var(--rot, 720deg));
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.bs-confetti { display: none; }
}
.bs-video-progress__fill {
height: 100%; width: 0%;
background: var(--bs-green);
border-radius: 3px;
transition: width .2s ease-out;
position: relative;
overflow: hidden;
}
/* Procesando (post-100%): shimmer animado sobre la barra llena +
label pulsando — feedback de que sigue trabajando, no congelado */
.bs-video-progress__fill--shimmer::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.45) 50%,
transparent 100%
);
animation: bs-progress-shimmer 1.1s linear infinite;
}
@keyframes bs-progress-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.bs-video-progress:has(.bs-video-progress__fill--shimmer) .bs-video-progress__label {
color: var(--bs-green);
animation: bs-progress-pulse 1.4s ease-in-out infinite;
}
@keyframes bs-progress-pulse {
0%, 100% { opacity: .65; }
50% { opacity: 1; }
}
.bs-video-progress__label {
font-size: 11px; color: var(--bs-text-3);
margin-top: 6px; text-align: right;
}
/* ── Phone field con prefijo +52 fijo (no editable, visual cue de país) ── */
.bs-field--phone .bs-field-prefix {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
font-size: 14px; font-weight: 600;
color: var(--bs-text-2);
padding-right: 8px;
border-right: 1px solid var(--bs-border);
height: 22px; display: flex; align-items: center;
pointer-events: none; z-index: 1;
font-family: var(--bs-font-body);
}
.bs-field--phone .bs-input { padding-left: 56px; }
/* ── Toggle ojo dentro de bs-field para password ── */
.bs-field--with-toggle .bs-input { padding-right: 48px; }
.bs-pw-toggle {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
background: none; border: 0; padding: 8px 10px;
color: var(--bs-text-3); cursor: pointer;
font-size: 18px; line-height: 1;
z-index: 2;
}
.bs-pw-toggle:hover { color: var(--bs-text-1); }
.bs-pw-toggle:focus-visible { outline: 2px solid var(--bs-green); outline-offset: -2px; border-radius: 4px; }
/* ── Lista de requisitos del password (chips check verdes) ── */
.bs-pw-reqs {
list-style: none; padding: 0; margin: 8px 0 0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.bs-pw-reqs li {
font-size: 11px; padding: 3px 8px;
border-radius: 999px;
background: rgba(255,255,255,.04);
color: var(--bs-text-3);
transition: color .15s, background .15s;
}
.bs-pw-reqs li::before {
content: '○'; margin-right: 4px; font-weight: 700;
}
.bs-pw-reqs li.bs-pw-reqs__ok {
color: var(--bs-green);
background: rgba(0, 230, 118, .08);
}
.bs-pw-reqs li.bs-pw-reqs__ok::before { content: '✓'; }
/* ── Link-style button (reenviar OTP) ── */
.bs-link-btn {
background: none; border: 0; padding: 0;
color: var(--bs-green); cursor: pointer;
font-size: 13px; font-weight: 500;
text-decoration: underline; text-underline-offset: 3px;
}
.bs-link-btn:disabled { cursor: not-allowed; }
.bs-link-btn:focus-visible { outline: 2px solid var(--bs-green); outline-offset: 2px; border-radius: 4px; }
/* ── Bid card: fila de status de pago para cards 'won' (Sprint 1 post-venta) */
.bs-bid-card__payment {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 12px; padding: 10px 14px;
border-radius: 10px; font-size: 13px;
border: 1px solid var(--bs-border);
}
.bs-bid-card__payment i { margin-right: 6px; }
.bs-bid-card__payment--ok {
background: rgba(0,212,125,.08); color: var(--bs-green);
border-color: rgba(0,212,125,.3);
}
.bs-bid-card__payment--bad {
background: rgba(255,80,80,.08); color: #ff6b6b;
border-color: rgba(255,80,80,.3);
}
.bs-bid-card__payment--pending {
background: rgba(255,200,80,.08); color: #ffc850;
border-color: rgba(255,200,80,.3);
}
.bs-bid-card__payment--action {
background: rgba(255,255,255,.04);
color: var(--bs-text-2);
}
.bs-bid-card__payment-btn {
padding: 6px 12px; font-size: 12px; font-weight: 600;
border-radius: 8px; border: 1px solid var(--bs-border);
background: transparent; color: var(--bs-text-2); cursor: pointer;
white-space: nowrap;
}
.bs-bid-card__payment-btn--primary {
background: var(--bs-green); color: #07131f; border-color: var(--bs-green);
}
/* ── My items detail modal ──────────────────────────────────────────────── */
.bs-myi-detail-cover {
width: 100%;
aspect-ratio: 16/10;
border-radius: var(--bs-radius-md);
overflow: hidden;
background: var(--bs-surface-3);
border: 1px solid var(--bs-border);
border-left: 4px solid var(--ws-color, var(--bs-green));
margin-top: 8px;
}
.bs-myi-detail-cover img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.bs-myi-detail-cover__placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: var(--bs-text-3);
}
.bs-myi-detail-cover__placeholder i { font-size: 48px; }
/* Carrusel del modal de detalle: ratio 4:3 con flechas + dots + counter */
.bs-myi-carousel {
position: relative;
width: 100%;
aspect-ratio: 4/3;
border-radius: var(--bs-radius-md);
overflow: hidden;
background: var(--bs-surface-3);
border: 1px solid var(--bs-border);
border-left: 4px solid var(--ws-color, var(--bs-green));
margin-top: 8px;
}
.bs-myi-carousel__viewport {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: #000;
}
/* Solo hijos directos: deja que el reproductor custom maneje su propio video */
.bs-myi-carousel__viewport > img {
width: 100%; height: 100%;
}
.bs-myi-carousel__viewport > .tgs_video-player {
width: 100%; height: 100%;
}
.bs-myi-carousel__nav {
position: absolute; top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,0,0,.5);
border: none; color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 18px;
z-index: 2;
padding: 0;
transition: background .2s ease;
}
.bs-myi-carousel__nav:hover { background: rgba(0,0,0,.75); }
.bs-myi-carousel__nav--prev { left: 8px; }
.bs-myi-carousel__nav--next { right: 8px; }
.bs-myi-carousel__counter {
position: absolute; top: 8px; right: 8px;
padding: 4px 10px; border-radius: 12px;
background: rgba(0,0,0,.6); color: #fff;
font-size: 11px; font-weight: 600;
z-index: 2;
}
.bs-myi-carousel__dots {
position: absolute; bottom: 8px; left: 0; right: 0;
display: flex; justify-content: center; gap: 6px;
z-index: 2;
}
.bs-myi-carousel__dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255,255,255,.4);
border: none; cursor: pointer;
padding: 0;
transition: all .2s ease;
}
.bs-myi-carousel__dot--active {
background: var(--ws-color, var(--bs-green));
width: 22px;
border-radius: 4px;
}
.bs-myi-detail-info {
margin-top: 14px;
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-md);
overflow: hidden;
}
.bs-myi-detail-row {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--bs-border);
font-size: 13px;
}
.bs-myi-detail-row:last-child { border-bottom: none; }
.bs-myi-detail-row > i {
font-size: 15px;
color: var(--bs-text-3);
width: 18px; text-align: center;
flex-shrink: 0;
}
.bs-myi-detail-row__label {
color: var(--bs-text-3);
flex-shrink: 0;
}
.bs-myi-detail-row__value {
margin-left: auto;
color: var(--bs-text);
text-align: right;
font-weight: 600;
}
.bs-myi-detail-block {
margin-top: 14px;
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-md);
padding: 12px 14px;
}
.bs-myi-detail-block__head {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--bs-text-3);
display: flex; align-items: center; gap: 6px;
margin-bottom: 8px;
}
.bs-myi-detail-block__head i {
font-size: 13px;
color: var(--bs-green);
}
.bs-myi-detail-block__body {
font-size: 13px;
color: var(--bs-text);
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
/* Variante "warning" para el comentario de rechazo */
.bs-myi-detail-block--warn {
background: color-mix(in srgb, #f59e0b 8%, var(--bs-surface-2));
border-color: color-mix(in srgb, #f59e0b 35%, var(--bs-border));
}
.bs-myi-detail-block--warn .bs-myi-detail-block__head i {
color: #f59e0b;
}
.bs-myi-detail-block--warn .bs-myi-detail-block__head {
color: #f59e0b;
}
/* ── My Item Review (timeline rediseñado) ──────────────────────────────── */
.bs-myi-review {
margin-top: 14px;
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-md);
background: var(--bs-surface-2);
overflow: hidden;
}
.bs-myi-review--pending {
border-color: color-mix(in srgb, var(--bs-danger) 35%, var(--bs-border));
background: linear-gradient(180deg,
color-mix(in srgb, var(--bs-danger) 10%, var(--bs-surface-2)) 0%,
var(--bs-surface-2) 60%);
}
/* Variante warning ámbar — usada en el modal de pujar cuando alguien superó
el mínimo mientras estaba abierto (notif tipo bs-myi-review, mismo block). */
.bs-myi-review--warning {
border-color: color-mix(in srgb, var(--bs-warn, #f59e0b) 50%, var(--bs-border));
background: linear-gradient(180deg,
color-mix(in srgb, var(--bs-warn, #f59e0b) 12%, var(--bs-surface-2)) 0%,
var(--bs-surface-2) 60%);
animation: bs-bid-warn-in .35s ease-out;
}
.bs-myi-review--warning .bs-myi-review__title i { color: var(--bs-warn, #f59e0b); }
@keyframes bs-bid-warn-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.bs-myi-review__head {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--bs-border);
}
.bs-myi-review__title {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: var(--bs-text-3);
}
.bs-myi-review__title i { font-size: 13px; color: var(--bs-text-3); }
.bs-myi-review--pending .bs-myi-review__title { color: var(--bs-text-2); }
.bs-myi-review--pending .bs-myi-review__title i { color: var(--bs-danger); }
.bs-myi-review__counter {
margin-left: auto;
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 10px;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
background: var(--bs-surface-3);
color: var(--bs-text-3);
}
.bs-myi-review__counter i { font-size: 11px; }
.bs-myi-review__counter--pending {
background: color-mix(in srgb, var(--bs-danger) 20%, transparent);
color: var(--bs-danger);
animation: bs-pulse 2s ease-in-out infinite;
}
.bs-myi-review__body {
padding: 12px 14px;
display: flex; flex-direction: column; gap: 10px;
}
/* ── Comment card (estilo conversación con rail lateral) ──────────────── */
.bs-myi-comment {
display: flex; gap: 10px;
padding: 10px 12px;
border-radius: var(--bs-radius-md);
background: var(--bs-surface-3);
border: 1px solid var(--bs-border);
}
.bs-myi-comment__rail {
width: 3px;
border-radius: 2px;
background: var(--bs-text-3);
flex-shrink: 0;
}
.bs-myi-comment__content { flex: 1; min-width: 0; }
.bs-myi-comment__head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 4px;
}
.bs-myi-comment__label {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
}
.bs-myi-comment__label i { font-size: 12px; }
.bs-myi-comment__time {
margin-left: auto;
font-size: 11px; color: var(--bs-text-3);
font-family: var(--bs-font-mono);
}
.bs-myi-comment__text {
margin: 0;
font-size: 13px; line-height: 1.5;
color: var(--bs-text);
white-space: pre-wrap;
word-break: break-word;
}
.bs-myi-comment__cta {
display: flex; align-items: center; gap: 6px;
margin-top: 8px; padding-top: 8px;
border-top: 1px dashed var(--bs-border);
font-size: 11px; color: var(--bs-text-3);
font-style: italic;
}
.bs-myi-comment__cta i { font-size: 12px; color: var(--bs-danger); }
/* Active variant: rail + label + body destacados en rojo */
.bs-myi-comment--active {
background: color-mix(in srgb, var(--bs-danger) 8%, var(--bs-surface-3));
border-color: color-mix(in srgb, var(--bs-danger) 35%, var(--bs-border));
box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-danger) 12%, transparent);
}
.bs-myi-comment--active .bs-myi-comment__rail {
background: var(--bs-danger);
}
.bs-myi-comment--active .bs-myi-comment__label {
color: var(--bs-danger);
}
/* Archived variant: opaque + green check */
.bs-myi-comment--archived {
opacity: .72;
}
.bs-myi-comment--archived .bs-myi-comment__rail {
background: var(--bs-green);
opacity: .55;
}
.bs-myi-comment--archived .bs-myi-comment__label {
color: var(--bs-green);
}
.bs-myi-comment--archived .bs-myi-comment__text {
color: var(--bs-text-2);
}
/* ── History accordion ──────────────────────────────────────────────────── */
.bs-myi-history { margin-top: 0; }
.bs-myi-history > summary {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
font-size: 12px; font-weight: 600;
color: var(--bs-text-2);
cursor: pointer;
background: var(--bs-surface-3);
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-md);
list-style: none;
transition: background .15s ease;
}
.bs-myi-history > summary::-webkit-details-marker { display: none; }
.bs-myi-history > summary:hover { background: color-mix(in srgb, white 4%, var(--bs-surface-3)); }
.bs-myi-history > summary i:first-child { font-size: 14px; color: var(--bs-text-3); }
.bs-myi-history__chevron {
margin-left: auto;
font-size: 16px;
color: var(--bs-text-3);
transition: transform .2s ease;
}
.bs-myi-history[open] .bs-myi-history__chevron {
transform: rotate(180deg);
}
.bs-myi-history__list {
display: flex; flex-direction: column; gap: 8px;
padding-top: 10px;
}
/* Checklist del modal de my-items: reusa las clases bs-detail-* del sheet de
/auction (definidas mas arriba en este archivo) para que el visual sea
identico. No requiere CSS adicional aqui. */
/* Checklist dinámico — adaptación de tgs */
.bs-checklist-field { margin: 0; }
.bs-checklist-field .bs-label--req::after {
content: ' *'; color: var(--bs-danger);
}
.bs-radio-cards {
display: grid; gap: 6px;
}
.bs-radio-card { position: relative; }
.bs-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.bs-radio-card label {
display: block; padding: 10px 12px;
background: var(--bs-surface-3);
border: 1.5px solid var(--bs-border);
border-radius: var(--bs-radius-md);
font-size: 13px; text-align: center;
color: var(--bs-text);
cursor: pointer;
transition: all .15s ease;
}
.bs-radio-card input:checked + label {
border-color: var(--bs-green);
background: color-mix(in srgb, var(--bs-green) 12%, var(--bs-surface-3));
color: var(--bs-green);
font-weight: 600;
}
.bs-checklist-toggle {
display: flex; align-items: center;
gap: 12px; min-height: 40px;
cursor: pointer;
}
.bs-checklist-toggle input { display: none; }
.bs-checklist-toggle__track {
width: 44px; height: 24px; border-radius: 12px;
background: var(--bs-surface-3);
position: relative; flex-shrink: 0;
transition: background .2s ease;
border: 1px solid var(--bs-border);
}
.bs-checklist-toggle__track::after {
content: ''; position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--bs-text-3);
transition: all .2s ease;
}
.bs-checklist-toggle input:checked + .bs-checklist-toggle__track {
background: var(--bs-green);
border-color: var(--bs-green);
}
.bs-checklist-toggle input:checked + .bs-checklist-toggle__track::after {
left: 22px; background: var(--bs-navy);
}
.bs-checklist-range {
display: flex; align-items: center; gap: 10px;
}
.bs-checklist-range input[type="range"] {
flex: 1; -webkit-appearance: none; appearance: none;
height: 6px; border-radius: 3px;
background: var(--bs-surface-3);
outline: none;
}
.bs-checklist-range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; border-radius: 50%;
background: var(--bs-green); cursor: pointer;
border: 2px solid var(--bs-navy);
}
.bs-checklist-range__bound {
font-size: 11px; font-weight: 600;
color: var(--bs-text-3); min-width: 20px;
text-align: center;
}
.bs-checklist-range__value {
font-size: 17px; font-weight: 700;
color: var(--bs-green); min-width: 28px;
text-align: center;
}
.bs-input--error:focus { box-shadow: 0 0 0 3px rgba(255,59,59,0.2) !important; }
/* === BUTTONS === */
.bs-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 16px;
border: none; border-radius: var(--bs-radius-md);
font-family: var(--bs-font-body); font-size: 15px; font-weight: 600;
cursor: pointer; min-height: 52px; user-select: none;
transition: transform var(--bs-dur-fast) var(--bs-spring),
box-shadow var(--bs-dur-fast) var(--bs-ease),
opacity var(--bs-dur-fast) var(--bs-ease);
}
.bs-btn:active:not(:disabled) { transform: scale(0.98); }
.bs-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.bs-btn--primary { background: var(--bs-green); color: var(--bs-navy); }
.bs-btn--primary:hover:not(:disabled) { box-shadow: var(--bs-shadow-green); }
.bs-btn--secondary {
background: var(--bs-surface-2);
border: 1.5px solid var(--bs-border);
color: var(--bs-text-2);
}
.bs-btn--secondary:hover:not(:disabled) { border-color: var(--bs-green); color: var(--bs-green); }
.bs-btn--ghost {
background: transparent; color: var(--bs-text-3);
font-size: 13px; min-height: 40px; padding: 8px;
}
.bs-btn--ghost:hover { color: var(--bs-text); }
.bs-btn--danger {
background: rgba(255,59,59,0.1);
border: 1.5px solid rgba(255,59,59,0.25);
color: var(--bs-danger);
}
.bs-btn--danger:hover:not(:disabled) { background: rgba(255,59,59,0.18); }
.bs-btn-spinner {
display: none; width: 18px; height: 18px;
border: 2px solid rgba(0,0,0,0.2); border-top-color: currentColor;
border-radius: 50%; animation: bs-spin 0.7s linear infinite;
}
.bs-btn.loading .bs-btn-spinner { display: block; }
.bs-btn.loading .bs-btn-text { opacity: 0.6; }
/* btn-bid legacy override */
.btn-bid {
display: flex; align-items: center; justify-content: center;
padding: 12px 20px;
background: var(--bs-green); color: var(--bs-navy);
border: none; border-radius: var(--bs-radius-md);
font-family: var(--bs-font-body); font-size: 14px; font-weight: 700;
cursor: pointer; min-height: 44px; white-space: nowrap;
transition: transform var(--bs-dur-fast) var(--bs-spring),
box-shadow var(--bs-dur-fast) var(--bs-ease);
}
.btn-bid:hover:not(:disabled) { box-shadow: var(--bs-shadow-green); }
.btn-bid:active:not(:disabled) { transform: scale(0.96); }
.btn-bid:disabled { opacity: 0.45; cursor: not-allowed; }
/* === ERROR MSG ===
- Las variantes --card (login, register, forgot) usan display:flex y
se ocultan/muestran con inline style="display:none" + JS.
- Las planas
se ocultan automáticamente cuando
están vacías (:empty), se muestran al setear textContent. */
.bs-error-msg {
font-size: 13px; color: var(--bs-danger);
text-align: center; margin-top: 8px;
padding: 10px 12px;
background: rgba(255,59,59,0.08);
border-radius: var(--bs-radius-sm);
border: 1px solid rgba(255,59,59,0.2);
}
.bs-error-msg:empty { display: none; }
/* === DIVIDER === */
.bs-divider {
display: flex; align-items: center; gap: 12px;
margin: 20px 0; color: var(--bs-text-3); font-size: 12px;
}
.bs-divider::before, .bs-divider::after {
content: ''; flex: 1; height: 1px; background: var(--bs-border);
}
/* === MODAL === */
.bs-modal-overlay {
position: absolute; inset: 0; z-index: 1000;
/* Backdrop oscuro sólido — sin backdrop-filter. El blur durante la transición
de opacity+scale del modal interno causaba un "snap" al final visible como
parpadeo en Android. Fondo 92% opaco compensa visualmente al perder el
blur (ya bloquea casi todo el contenido detrás). */
background: rgba(6,15,26,0.92);
display: flex; align-items: center; justify-content: center;
padding: 16px;
opacity: 0; pointer-events: none;
transition: opacity var(--bs-dur-normal) var(--bs-ease);
}
/* Modales NESTED (z-index 1100 inline) — apilados sobre otro bs-modal-overlay
que ya tiene blur. Apilar 2 backdrop-filter causa parpadeo severo en Android
WebView. Compensamos con fondo más oscuro para mantener jerarquía visual. */
.bs-modal-overlay[style*="z-index:1100"],
.bs-modal-overlay[style*="z-index: 1100"] {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(6,15,26,0.55);
}
.bs-modal-overlay.open { opacity: 1; pointer-events: auto; }
.bs-modal {
background: var(--bs-surface);
border-radius: var(--bs-radius-xl);
width: 100%;
box-shadow: var(--bs-shadow-lg);
transform: scale(0.92) translateY(16px);
transition: transform var(--bs-dur-slow) var(--bs-spring),
opacity var(--bs-dur-normal) var(--bs-ease);
max-height: 90%; overflow-y: auto;
opacity: 0;
}
.bs-modal-overlay.open .bs-modal {
transform: scale(1) translateY(0);
opacity: 1;
}
/* Modal full-height para visores (PDF, imágenes grandes) que necesitan
ocupar toda la altura del app-shell en lugar de auto-sizing por content. */
.bs-modal--fullheight {
height: 92%;
max-height: 92%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.bs-modal-handle { display: none; }
.bs-modal-head {
padding: 16px 24px;
border-bottom: 1px solid var(--bs-border);
position: relative;
}
.bs-modal-head h2 {
font-family: var(--bs-font-title);
font-size: 28px; font-weight: 700; color: var(--bs-text);
}
.bs-modal-head p { font-size: 13px; color: var(--bs-text-3); margin-top: 4px; }
.bs-modal-body { padding: 24px; }
.bs-modal-x {
/* Posicionado más adentro para no quedar pisado por el border-radius xl
del modal (24px). Rounded square 10px = lenguaje consistente con
bs-offcanvas-action / bs-sheet-close-btn. */
position: absolute; top: 16px; right: 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
width: 34px; height: 34px;
color: var(--bs-text-2);
font-size: 14px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--bs-dur-fast) var(--bs-ease),
color var(--bs-dur-fast) var(--bs-ease),
transform var(--bs-dur-fast) var(--bs-ease);
z-index: 2;
}
.bs-modal-x:hover {
background: rgba(255,255,255,0.1);
color: var(--bs-text);
transform: scale(1.05);
}
/* === AUCTION CARD === */
.auction-card {
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-md);
padding: 16px; margin: 8px 16px; cursor: pointer;
transition: transform var(--bs-dur-fast) var(--bs-ease),
border-color var(--bs-dur-fast) var(--bs-ease);
}
.auction-card:active { transform: scale(0.98); }
.auction-card:hover { border-color: rgba(0,212,125,0.25); }
.auction-card h3 { font-size: 16px; font-weight: 600; color: var(--bs-text); margin-bottom: 4px; }
.auction-card .meta { font-size: 13px; color: var(--bs-text-3); }
.auction-card .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
/* Live badge */
.bs-live {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px;
background: rgba(0,212,125,0.10);
border: 1px solid rgba(0,212,125,0.25);
border-radius: var(--bs-radius-full);
font-size: 11px; font-weight: 700;
color: var(--bs-green); text-transform: uppercase; letter-spacing: 0.06em;
}
.bs-live::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--bs-green); animation: bs-pulse 1.5s ease-in-out infinite;
}
@keyframes bs-pulse {
0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}
/* === HOME ============================================================== */
/* Notif badge */
.bs-notif-btn { position: relative; transition: transform .2s; }
.bs-notif-badge {
position: absolute; top: 2px; right: 2px;
min-width: 18px; height: 18px; padding: 0 4px;
background: var(--bs-danger);
color: #fff; font-size: 10px; font-weight: 800;
border: 2px solid var(--bs-surface);
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
/* Shake animation cuando llega nueva notificación */
.bs-notif-btn--shake {
animation: bs-notif-shake .6s cubic-bezier(.36,.07,.19,.97);
}
@keyframes bs-notif-shake {
0%, 100% { transform: rotate(0); }
10% { transform: rotate(-15deg); }
20% { transform: rotate(13deg); }
30% { transform: rotate(-10deg); }
40% { transform: rotate(8deg); }
50% { transform: rotate(-6deg); }
60% { transform: rotate(4deg); }
70% { transform: rotate(-2deg); }
80% { transform: rotate(1deg); }
}
/* Row wrapper: container con overflow:hidden para clipear el swipe.
La action queda absolute a la derecha y el item se desliza para revelarla. */
.bs-notif-row {
position: relative;
margin: 4px 8px;
border-radius: var(--bs-radius-md);
overflow: hidden;
/* touch-action: pan-y deja que el browser maneje scroll vertical pero
deja la gestión horizontal a nuestros pointer events */
touch-action: pan-y;
transition: height .25s ease, opacity .25s ease, margin .25s ease;
}
.bs-notif-row--deleting {
height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
opacity: 0;
pointer-events: none;
}
.bs-notif-row--deleting .bs-notif-item { transform: translateX(-110%) !important; }
/* Visual del swipe derecha → marca como leído. Pinta el row de fondo verde
con icono ✓ que aparece detrás conforme el item se desliza. */
.bs-notif-row--swiping-right {
background: linear-gradient(135deg, var(--bs-green) 0%, color-mix(in srgb, var(--bs-green) 65%, #000) 100%);
}
.bs-notif-row--swiping-right::before {
content: '\eed7'; /* icofont-check-alt */
font-family: 'IcoFont' !important;
position: absolute;
left: 18px; top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 22px;
font-weight: 700;
z-index: 0;
pointer-events: none;
}
.bs-notif-row--swiping-left {
background: linear-gradient(135deg, var(--bs-danger) 0%, #c91414 100%);
}
/* Action layer — debajo del item, revelada al deslizar */
.bs-notif-actions {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 88px;
display: flex; align-items: stretch;
z-index: 0;
}
.bs-notif-action {
flex: 1;
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
background: linear-gradient(135deg, var(--bs-danger) 0%, #c91414 100%);
border: none;
color: #fff;
font-size: 11px; font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: filter .15s;
}
.bs-notif-action i { font-size: 20px; }
.bs-notif-action:hover { filter: brightness(1.1); }
.bs-notif-action:active { filter: brightness(0.9); }
/* ── Pills de filtrado dentro del notif offcanvas ─────────────────────── */
.bs-notif-tabs-wrap {
position: relative;
z-index: 1;
padding: 8px 12px 10px;
border-bottom: 1px solid var(--bs-border);
background: linear-gradient(180deg,
color-mix(in srgb, var(--bs-surface) 95%, transparent) 0%,
var(--bs-surface) 100%);
flex-shrink: 0;
}
.bs-notif-tabs-wrap .bs-pill-nav {
gap: 6px;
padding: 0;
margin: 0;
}
.bs-notif-tabs-wrap .bs-pill {
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
}
.bs-notif-tabs-wrap .bs-pill i {
font-size: 13px;
}
.bs-notif-tabs-wrap .bs-pill__badge {
min-width: 16px;
height: 16px;
font-size: 9px;
padding: 0 4px;
border-width: 1.5px;
margin-left: 4px;
}
/* Items en la lista de notificaciones — bg opaco para tapar la action atrás.
transform: translateX gestionado por JS para el drag.
transition se aplica solo en snap (no durante el drag activo). */
.bs-notif-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 16px 12px 20px;
background: var(--bs-surface);
cursor: pointer;
position: relative;
z-index: 1;
transition: background var(--bs-dur-fast) var(--bs-ease),
transform var(--bs-dur-normal) var(--bs-spring);
user-select: none;
-webkit-user-select: none;
}
.bs-notif-item:hover { background: color-mix(in srgb, #ffffff 4%, var(--bs-surface)); }
.bs-notif-item:active { background: color-mix(in srgb, #ffffff 6%, var(--bs-surface)); }
/* Unread: bg verde tintado opaco (sobre surface) + barra lateral verde luminosa */
.bs-notif-item--unread {
background: color-mix(in srgb, var(--bs-green) 10%, var(--bs-surface));
}
.bs-notif-item--unread:hover {
background: color-mix(in srgb, var(--bs-green) 14%, var(--bs-surface));
}
.bs-notif-item--unread::before {
content: '';
position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 32px;
background: var(--bs-green);
border-radius: 0 4px 4px 0;
box-shadow: 0 0 12px var(--bs-green);
}
/* Icon badge — 40px con halo doble (mismo lenguaje del App Loader/PTR) */
.bs-notif-item__icon {
width: 40px; height: 40px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 17px;
/* default = outbid (fuego naranja/rojo) */
background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
color: #fff;
box-shadow:
0 0 0 3px rgba(249, 115, 22, 0.10),
0 6px 16px rgba(220, 38, 38, 0.35);
}
.bs-notif-item__icon--outbid {
background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
color: #fff;
box-shadow:
0 0 0 3px rgba(249, 115, 22, 0.10),
0 6px 16px rgba(220, 38, 38, 0.35);
}
.bs-notif-item__icon--invite {
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
color: var(--bs-navy);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--bs-green) 12%, transparent),
0 6px 16px color-mix(in srgb, var(--bs-green) 35%, transparent);
}
.bs-notif-item__icon--approve {
background: linear-gradient(135deg, #00d47d 0%, #00a85e 100%);
color: var(--bs-navy);
box-shadow:
0 0 0 3px rgba(0, 212, 125, 0.12),
0 6px 16px rgba(0, 212, 125, 0.35);
}
.bs-notif-item__icon--reject {
background: linear-gradient(135deg, var(--bs-danger) 0%, #c91414 100%);
color: #fff;
box-shadow:
0 0 0 3px rgba(255, 59, 59, 0.12),
0 6px 16px rgba(255, 59, 59, 0.35);
}
/* won — trofeo dorado para celebrar */
.bs-notif-item__icon--won {
background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
color: #2a1f00;
box-shadow:
0 0 0 3px rgba(255, 215, 0, 0.14),
0 6px 16px rgba(255, 215, 0, 0.40);
}
/* auction-closed — gris azulado, neutral pero claro */
.bs-notif-item__icon--closed {
background: linear-gradient(135deg, #6b8ca6 0%, #3a5a7a 100%);
color: #ffffff;
box-shadow:
0 0 0 3px rgba(107, 140, 166, 0.14),
0 6px 16px rgba(107, 140, 166, 0.35);
}
/* auction-extended — naranja-ámbar urgencia */
.bs-notif-item__icon--extended {
background: linear-gradient(135deg, #ffc857 0%, #c97f08 100%);
color: #1c1408;
box-shadow:
0 0 0 3px rgba(255, 200, 87, 0.14),
0 6px 16px rgba(255, 200, 87, 0.40);
}
/* comment — azul info (interacción social) */
.bs-notif-item__icon--comment {
background: linear-gradient(135deg, #4f9eff 0%, #1e5a99 100%);
color: #ffffff;
box-shadow:
0 0 0 3px rgba(79, 158, 255, 0.14),
0 6px 16px rgba(79, 158, 255, 0.35);
}
/* payment.second_bidder — púrpura, oportunidad inesperada */
.bs-notif-item__icon--second-bidder {
background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%);
color: #ffffff;
box-shadow:
0 0 0 3px rgba(168, 85, 247, 0.14),
0 6px 16px rgba(168, 85, 247, 0.35);
}
/* info — fallback genérico gris neutro */
.bs-notif-item__icon--info {
background: linear-gradient(135deg, #6b8ca6 0%, #4a6a80 100%);
color: #ffffff;
box-shadow:
0 0 0 3px rgba(107, 140, 166, 0.10),
0 6px 16px rgba(107, 140, 166, 0.25);
}
.bs-notif-item__body { flex: 1; min-width: 0; }
.bs-notif-item__title {
font-size: 13px; color: var(--bs-text); margin: 0 0 4px;
line-height: 1.4;
}
.bs-notif-item__meta {
font-size: 11px; color: var(--bs-text-3); margin: 0;
line-height: 1.4;
}
/* Cascade entrance: header → items aparecen escalonados al abrir */
.bs-offcanvas.open .bs-offcanvas-header,
.bs-offcanvas.open .bs-offcanvas-body > * {
animation: bs-notif-rise .5s cubic-bezier(.16, 1, .3, 1) both;
}
.bs-offcanvas.open .bs-offcanvas-header { animation-delay: .05s; }
.bs-offcanvas.open .bs-offcanvas-body > *:nth-child(1) { animation-delay: .12s; }
.bs-offcanvas.open .bs-offcanvas-body > *:nth-child(2) { animation-delay: .18s; }
.bs-offcanvas.open .bs-offcanvas-body > *:nth-child(3) { animation-delay: .24s; }
.bs-offcanvas.open .bs-offcanvas-body > *:nth-child(4) { animation-delay: .30s; }
.bs-offcanvas.open .bs-offcanvas-body > *:nth-child(5) { animation-delay: .36s; }
.bs-offcanvas.open .bs-offcanvas-body > *:nth-child(6) { animation-delay: .42s; }
.bs-offcanvas.open .bs-offcanvas-body > *:nth-child(7) { animation-delay: .48s; }
.bs-offcanvas.open .bs-offcanvas-body > *:nth-child(8) { animation-delay: .54s; }
@keyframes bs-notif-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hero banner */
.bs-hero-banner {
position: relative; overflow: hidden;
padding: 24px 20px 20px;
background: var(--bs-surface);
border-bottom: 1px solid var(--bs-border);
animation: bs-hero-enter .55s cubic-bezier(.2,.7,.3,1) both;
}
.bs-hero-mesh {
position: absolute; inset: -40% -20%; pointer-events: none;
background:
radial-gradient(ellipse at 10% 80%, rgba(0,212,125,0.22) 0%, transparent 55%),
radial-gradient(ellipse at 90% 10%, rgba(0,163,255,0.14) 0%, transparent 50%),
radial-gradient(ellipse at 60% 50%, rgba(0,212,125,0.08) 0%, transparent 60%);
animation: bs-hero-mesh-drift 18s ease-in-out infinite alternate;
}
@keyframes bs-hero-enter {
from { opacity: 0; transform: translateY(-8px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bs-hero-mesh-drift {
from { transform: translate(0, 0) rotate(0deg); opacity: .85; }
to { transform: translate(-3%, 2%) rotate(8deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bs-hero-banner, .bs-hero-mesh { animation: none; }
}
.bs-hero-content {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bs-hero-left { flex: 1; min-width: 0; }
.bs-hero-greeting {
font-size: 11px; font-weight: 600; color: var(--bs-green);
text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 4px;
}
.bs-hero-name {
font-family: var(--bs-font-title);
font-size: 28px; font-weight: 700; color: var(--bs-text);
margin: 0 0 4px; line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ─── Chip contextual del hero (lidera / vivo / próxima / idle) ─── */
.bs-hero-context {
display: inline-flex; align-items: center; gap: 7px;
margin-top: 8px;
padding: 7px 12px 7px 10px;
font-family: var(--bs-font-body);
font-size: 12.5px; font-weight: 600;
color: var(--bs-text);
background: color-mix(in srgb, var(--bs-green) 14%, var(--bs-surface-2));
border: 1px solid color-mix(in srgb, var(--bs-green) 32%, var(--bs-border));
border-radius: 999px;
cursor: pointer;
transition: transform .15s, background .15s, border-color .15s;
}
.bs-hero-context:hover { background: color-mix(in srgb, var(--bs-green) 20%, var(--bs-surface-2)); }
.bs-hero-context:active { transform: scale(.96); }
.bs-hero-context__icon { font-size: 14px; color: var(--bs-green); }
/* Variantes por kind */
.bs-hero-context[data-kind="live"] { animation: bs-hero-ctx-pulse 2.4s ease-in-out infinite; }
.bs-hero-context[data-kind="live"] .bs-hero-context__icon { color: var(--bs-green); }
.bs-hero-context[data-kind="win"] {
background: color-mix(in srgb, #fbbf24 16%, var(--bs-surface-2));
border-color: color-mix(in srgb, #fbbf24 38%, var(--bs-border));
}
.bs-hero-context[data-kind="win"] .bs-hero-context__icon { color: #fbbf24; }
.bs-hero-context[data-kind="upcoming"] {
background: color-mix(in srgb, var(--bs-info) 14%, var(--bs-surface-2));
border-color: color-mix(in srgb, var(--bs-info) 32%, var(--bs-border));
}
.bs-hero-context[data-kind="upcoming"] .bs-hero-context__icon { color: var(--bs-info); }
.bs-hero-context[data-kind="idle"] {
background: var(--bs-surface-2);
border-color: var(--bs-border);
cursor: default;
}
.bs-hero-context[data-kind="idle"] .bs-hero-context__icon { color: var(--bs-text-3); }
@keyframes bs-hero-ctx-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bs-green) 28%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bs-green) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.bs-hero-context[data-kind="live"] { animation: none; }
}
/* ─── Pulse en el avatar del hero (status dot animado verde) ─── */
.bs-home-avatar-pulse {
position: absolute;
right: -1px; bottom: -1px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--bs-green);
border: 2px solid var(--bs-surface);
z-index: 2;
}
.bs-home-avatar-pulse::after {
content: '';
position: absolute; inset: -2px;
border-radius: 50%;
background: var(--bs-green);
opacity: .6;
animation: bs-home-avatar-pulse 1.8s ease-in-out infinite;
}
@keyframes bs-home-avatar-pulse {
0% { transform: scale(1); opacity: .55; }
70% { transform: scale(1.9); opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bs-home-avatar-pulse::after { animation: none; }
}
.bs-hero-ws {
font-size: 12px; color: var(--bs-text-3); margin: 0;
display: flex; align-items: center; gap: 5px;
}
.bs-hero-ws::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--bs-green); flex-shrink: 0;
}
/* Avatar */
/* Wrap clickeable que abre /profile cuando tappas el avatar del hero */
.bs-home-avatar-wrap {
position: relative;
width: 52px; height: 52px;
cursor: pointer;
flex-shrink: 0;
transition: transform .15s ease;
}
.bs-home-avatar-wrap:active { transform: scale(.92); }
.bs-home-avatar-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 3px rgba(0,212,125,0.20);
}
.bs-home-avatar {
width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg, var(--bs-surface-3) 0%, var(--bs-surface-2) 100%);
border: 2px solid rgba(0,212,125,0.4);
box-shadow: 0 0 0 4px rgba(0,212,125,0.08);
display: flex; align-items: center; justify-content: center;
font-family: var(--bs-font-title);
font-size: 20px; font-weight: 700; color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
text-transform: uppercase; flex-shrink: 0;
transition: background .25s ease, box-shadow .25s ease;
}
/* KPI row */
.bs-kpi-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
padding: 16px 16px 8px;
}
.bs-kpi-card {
position: relative; overflow: hidden;
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-lg);
padding: 14px 14px 12px;
display: flex; flex-direction: column; gap: 2px;
text-align: left; color: inherit; cursor: pointer;
transition: transform var(--bs-dur-fast) var(--bs-ease),
box-shadow var(--bs-dur-fast) var(--bs-ease);
}
.bs-kpi-card:active { transform: scale(0.97); }
.bs-kpi-card:focus-visible {
outline: 2px solid var(--bs-green);
outline-offset: 2px;
}
.bs-kpi-label {
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--bs-text-3);
}
.bs-kpi-value {
font-family: var(--bs-font-title);
font-size: 28px; font-weight: 700; line-height: 1; margin-top: 2px;
}
.bs-kpi-icon {
position: absolute; right: 10px; bottom: 10px;
font-size: 22px; opacity: 0.12;
}
.bs-kpi-card--green { border-color: rgba(0,212,125,0.2); }
.bs-kpi-card--green .bs-kpi-value { color: var(--bs-green); }
.bs-kpi-card--green .bs-kpi-icon { color: var(--bs-green); opacity: 0.18; }
.bs-kpi-card--blue { border-color: rgba(0,163,255,0.2); }
.bs-kpi-card--blue .bs-kpi-value { color: var(--bs-info); }
.bs-kpi-card--blue .bs-kpi-icon { color: var(--bs-info); opacity: 0.18; }
.bs-kpi-card--gold { border-color: rgba(255,200,87,0.2); }
.bs-kpi-card--gold .bs-kpi-value { color: var(--bs-warning); }
.bs-kpi-card--gold .bs-kpi-icon { color: var(--bs-warning); opacity: 0.18; }
/* Estado vacío del KPI (ej. Próximas = 0 → CTA "Te avisamos"). */
.bs-kpi-card--empty { opacity: 0.72; }
.bs-kpi-card--empty .bs-kpi-value { color: var(--bs-text-2) !important; }
.bs-kpi-card--empty .bs-kpi-icon { opacity: 0.10 !important; }
.bs-kpi-cta {
font-family: var(--bs-font-body);
font-size: 12px; font-weight: 600; line-height: 1.15;
color: var(--bs-text-2); letter-spacing: 0;
display: inline-block; padding-top: 6px;
}
/* Sections */
.bs-home-section { padding: 8px 0 4px; }
.bs-section-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 20px 10px;
}
.bs-section-title {
font-size: 11px; font-weight: 700; color: var(--bs-text-3);
text-transform: uppercase; letter-spacing: 0.1em; margin: 0;
}
/* Skeleton fiel a la nueva card de subasta */
.bs-auction-card--skeleton,
.bs-bid-card--skeleton {
pointer-events: none;
cursor: default;
}
.bs-auction-card--skeleton .bs-auction-card__accent,
.bs-bid-card--skeleton .bs-bid-card__accent {
background: var(--bs-border);
animation: bs-skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes bs-skeleton-pulse {
0%, 100% { opacity: .5; }
50% { opacity: 1; }
}
/* ── AUCTION CARDS — diseño rico con branding del workspace ─────────────── */
.bs-auction-card {
position: relative; overflow: hidden;
margin: 0 16px 12px;
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: 14px;
padding: 14px 16px 14px 20px;
cursor: pointer;
display: flex; flex-direction: column; gap: 10px;
transition: transform 200ms var(--bs-ease),
background 200ms var(--bs-ease),
box-shadow 200ms var(--bs-ease),
border-color 200ms var(--bs-ease);
}
.bs-auction-card:active { transform: scale(0.985); }
.bs-auction-card:hover {
background: var(--bs-surface-3);
border-color: color-mix(in srgb, var(--ws-color) 35%, var(--bs-border));
}
/* Acento lateral con el color del workspace */
.bs-auction-card__accent {
position: absolute; top: 0; bottom: 0; left: 0;
width: 4px;
background: var(--ws-color, var(--bs-green));
}
.bs-auction-card--live .bs-auction-card__accent::after {
content: ''; position: absolute; inset: 0;
background: var(--ws-color, var(--bs-green));
filter: blur(8px); opacity: .7;
}
.bs-auction-card--closed { opacity: .65; cursor: default; }
.bs-auction-card--closed:hover { background: var(--bs-surface-2); border-color: var(--bs-border); }
.bs-auction-card--closed .bs-auction-card__accent { opacity: .4; }
/* Header: logo workspace + nombre + info button */
.bs-auction-card__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.bs-auction-card__ws {
display: flex; align-items: center; gap: 8px;
min-width: 0; flex: 1;
}
.bs-auction-card__ws-logo {
width: 26px; height: 26px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--ws-color, var(--bs-green));
font-size: 11px; font-weight: 800;
border: 1.5px solid color-mix(in srgb, var(--ws-color, var(--bs-green)) 40%, var(--bs-border));
}
.bs-auction-card__ws-logo img { width: 100%; height: 100%; object-fit: cover; }
.bs-auction-card__ws-name {
font-size: 11px; font-weight: 600;
color: var(--bs-text-2);
letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-auction-card__info {
width: 30px; height: 30px;
border: none; background: rgba(255,255,255,.04);
border-radius: 50%;
color: var(--bs-text-3); font-size: 14px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: all 150ms;
}
.bs-auction-card__info:hover {
background: color-mix(in srgb, var(--ws-color, var(--bs-green)) 15%, transparent);
color: var(--ws-color, var(--bs-green));
}
.bs-auction-card__info:active { transform: scale(.9); }
/* Título de la subasta */
.bs-auction-card__title {
font-family: var(--bs-font-title);
font-size: 17px; font-weight: 700;
color: var(--bs-text);
margin: 0; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Footer con meta + badge */
.bs-auction-card__meta {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
flex-wrap: wrap;
}
.bs-auction-card__time {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; color: var(--bs-text-2); font-weight: 600;
flex-shrink: 0;
}
.bs-auction-card__time > i { font-size: 12px; color: var(--ws-color, var(--bs-green)); }
/* Timer segmentado compacto dentro de cards live */
.bs-cd-card {
display: inline-flex; align-items: center; gap: 3px;
}
.bs-cd-card-seg {
display: inline-flex; flex-direction: column; align-items: center;
background: rgba(255,255,255,.04);
border: 1px solid var(--bs-border);
border-radius: 5px;
padding: 2px 5px;
min-width: 24px;
line-height: 1;
}
.bs-cd-card-val {
font-family: var(--bs-font-mono);
font-size: 11px; font-weight: 700;
color: var(--ws-color, var(--bs-green));
letter-spacing: .5px;
}
.bs-cd-card-lbl {
font-size: 7px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
color: var(--bs-text-3);
margin-top: 1px;
}
.bs-auction-card--urgent .bs-cd-card-val {
color: var(--bs-danger);
animation: bs-pulse .8s ease-in-out infinite;
}
.bs-auction-card--urgent .bs-cd-card-seg {
border-color: rgba(255,59,48,.4);
}
.bs-auction-card__stats {
display: inline-flex; align-items: center; gap: 10px;
font-size: 11px; color: var(--bs-text-3);
}
.bs-auction-card__stats > span {
display: inline-flex; align-items: center; gap: 3px;
}
.bs-auction-card__stats i { font-size: 11px; }
/* Badges de estado */
.bs-auction-card-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
font-size: 9px; font-weight: 800; letter-spacing: .08em;
border-radius: 10px;
}
.bs-auction-card-badge--live {
background: #ef4444; color: #fff;
}
.bs-auction-card-badge--upcoming {
background: rgba(0,212,125,.15);
color: var(--bs-green);
border: 1px solid rgba(0,212,125,.3);
}
.bs-auction-card-badge--closed {
background: rgba(255,255,255,.06);
color: var(--bs-text-3);
}
.bs-auction-card-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #fff;
animation: bs-pill-dot-pulse 1.6s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(255,255,255,.7);
}
/* ── INFO SHEET DE SUBASTA ──────────────────────────────────────────────── */
.bs-auction-info-sheet {
display: none; flex-direction: column;
background: var(--bs-surface);
max-height: 88% !important;
}
.bs-auction-info__hero {
position: relative; overflow: hidden;
padding: 24px 20px 20px;
background:
linear-gradient(135deg,
var(--ws-color, var(--bs-green)) 0%,
color-mix(in srgb, var(--ws-color, var(--bs-green)) 70%, #000) 100%);
color: #fff;
}
.bs-auction-info__hero-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 100% at 0% 100%, rgba(255,255,255,.15), transparent 60%);
}
.bs-auction-info__close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px;
background: rgba(0,0,0,.25); color: #fff;
border: none; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 14px;
backdrop-filter: blur(6px);
z-index: 2;
}
.bs-auction-info__ws {
display: flex; align-items: center; gap: 10px;
position: relative;
margin-bottom: 14px;
}
.bs-auction-info__ws-logo {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,.18);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 13px;
border: 1.5px solid rgba(255,255,255,.35);
flex-shrink: 0;
}
.bs-auction-info__ws-logo img { width: 100%; height: 100%; object-fit: cover; }
.bs-auction-info__ws-label {
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em;
opacity: .8; margin: 0;
}
.bs-auction-info__ws-name {
font-size: 14px; font-weight: 700; margin: 1px 0 0; line-height: 1;
}
.bs-auction-info__title {
font-family: var(--bs-font-title);
font-size: 22px; font-weight: 700;
color: #fff;
margin: 0; line-height: 1.2;
position: relative;
}
.bs-auction-info__body {
flex: 1; overflow-y: auto;
padding: 18px 20px;
}
.bs-auction-info__desc {
font-size: 13px; line-height: 1.6;
color: var(--bs-text-2);
margin: 0 0 18px;
white-space: pre-wrap;
font-style: italic;
}
.bs-auction-info__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.bs-auction-info__stat {
display: flex; flex-direction: column;
padding: 12px;
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: 10px;
position: relative;
}
.bs-auction-info__stat-icon {
font-size: 16px;
color: var(--bs-green);
margin-bottom: 8px;
}
.bs-auction-info__stat-label {
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
color: var(--bs-text-3);
margin-bottom: 3px;
}
.bs-auction-info__stat-value {
font-size: 13px; font-weight: 700;
color: var(--bs-text);
}
.bs-auction-info__footer {
padding: 12px 20px 18px;
border-top: 1px solid var(--bs-border);
flex-shrink: 0;
}
.bs-auction-info__footer .bs-btn {
width: 100%; padding: 13px;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bs-auction-card--upcoming { border-left-color: var(--bs-info); }
.bs-auction-card-icon {
width: 40px; height: 40px; border-radius: var(--bs-radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.bs-auction-card--live .bs-auction-card-icon { background: rgba(0,212,125,0.1); color: var(--bs-green); }
.bs-auction-card--upcoming .bs-auction-card-icon { background: rgba(0,163,255,0.1); color: var(--bs-info); }
.bs-auction-card--closed { border-left-color: var(--bs-text-3); opacity: 0.75; }
.bs-auction-card--closed .bs-auction-card-icon { background: rgba(107,140,166,0.1); color: var(--bs-text-3); }
.bs-auction-card-body { flex: 1; min-width: 0; }
.bs-auction-card-name {
font-size: 14px; font-weight: 600; color: var(--bs-text);
margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-auction-card-meta { font-size: 11px; color: var(--bs-text-3); display: flex; align-items: center; gap: 8px; }
.bs-auction-card-arrow {
color: var(--bs-text-3); font-size: 18px; flex-shrink: 0;
transition: color var(--bs-dur-fast) var(--bs-ease), transform var(--bs-dur-fast) var(--bs-ease);
}
.bs-auction-card:hover .bs-auction-card-arrow { color: var(--bs-green); transform: translateX(2px); }
/* Empty state — icono con halo verde, mismo lenguaje del notif empty/loader.
Workspace-aware vía --bs-green. Usado en home, auctions, items, bids, etc. */
.bs-empty-icon {
width: 72px; height: 72px;
border-radius: 20px;
background: color-mix(in srgb, var(--bs-green) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--bs-green) 22%, transparent);
color: var(--bs-green);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
margin: 0 auto;
box-shadow: 0 10px 28px color-mix(in srgb, var(--bs-green) 18%, transparent);
}
/* === DRAWER ============================================================= */
.bs-drawer-backdrop {
position: absolute; inset: 0; z-index: 200;
/* Sin backdrop-filter — opacity transition + blur compositor causa parpadeo. */
background: rgba(6,15,26,0.82);
opacity: 0; pointer-events: none;
transition: opacity var(--bs-dur-normal) var(--bs-ease);
}
.bs-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.bs-drawer {
position: absolute; top: 0; left: 0; bottom: 0;
width: 300px; z-index: 201;
background: var(--bs-surface);
border-right: 1px solid var(--bs-border);
display: flex; flex-direction: column;
transform: translateX(-100%);
transition: transform var(--bs-dur-slow) var(--bs-spring);
overflow: hidden;
}
.bs-drawer.open { transform: translateX(0); }
/* Glow ambiental — radial verde sutil tras header/avatar */
.bs-drawer-glow {
position: absolute; top: 0; left: 0; right: 0; height: 360px;
background:
radial-gradient(circle at 50% 0%,
color-mix(in srgb, var(--bs-green) 18%, transparent) 0%,
transparent 55%),
radial-gradient(circle at 25% 25%,
color-mix(in srgb, var(--bs-green) 8%, transparent) 0%,
transparent 50%);
pointer-events: none;
z-index: 0;
}
/* Brand header */
.bs-drawer-brand {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 12px;
padding: 22px 20px 14px;
}
.bs-drawer-brand__logo {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 11px;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
color: var(--bs-navy);
font-size: 18px;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--bs-green) 12%, transparent),
0 6px 18px color-mix(in srgb, var(--bs-green) 35%, transparent);
}
.bs-drawer-brand__text { line-height: 1; }
.bs-drawer-brand__name {
font-family: var(--bs-font-title);
font-size: 22px; font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 60%, #ffffff) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bs-drawer-brand__tagline {
font-size: 9px; color: var(--bs-text-3);
letter-spacing: 0.22em; text-transform: uppercase;
margin-top: 4px;
}
/* User card premium */
.bs-drawer-user {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 14px;
padding: 6px 20px 18px;
}
.bs-drawer-avatar-wrap { position: relative; flex-shrink: 0; }
.bs-drawer-avatar {
width: 56px; height: 56px; border-radius: 50%;
background: var(--bs-surface-3);
border: 2px solid var(--bs-green);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--bs-green) 12%, transparent),
0 8px 24px color-mix(in srgb, var(--bs-green) 25%, transparent);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; color: var(--bs-green);
text-transform: uppercase;
}
.bs-drawer-status {
position: absolute; bottom: 1px; right: 1px;
width: 13px; height: 13px; border-radius: 50%;
background: var(--bs-green);
border: 2px solid var(--bs-surface);
animation: bs-drawer-pulse-dot 2s ease-in-out infinite;
}
@keyframes bs-drawer-pulse-dot {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bs-green) 60%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bs-green) 0%, transparent); }
}
.bs-drawer-user-info { overflow: hidden; flex: 1; }
.bs-drawer-name {
font-size: 15px; font-weight: 600; color: var(--bs-text);
margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-drawer-email {
font-size: 11px; color: var(--bs-text-3);
margin: 3px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-drawer-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--bs-border) 30%, var(--bs-border) 70%, transparent 100%);
margin: 8px 16px;
position: relative; z-index: 1;
}
.bs-drawer-nav {
display: flex; flex-direction: column;
padding: 4px 12px;
position: relative; z-index: 1;
}
.bs-drawer-item {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px; border-radius: var(--bs-radius-md);
background: none; border: none; color: var(--bs-text-2);
font-family: var(--bs-font-body); font-size: 14px; font-weight: 500;
cursor: pointer; text-align: left; width: 100%;
position: relative;
transition: background var(--bs-dur-fast) var(--bs-ease),
color var(--bs-dur-fast) var(--bs-ease),
transform var(--bs-dur-fast) var(--bs-ease);
}
.bs-drawer-item > i:first-child {
font-size: 18px; width: 20px; text-align: center; flex-shrink: 0;
}
.bs-drawer-item > span { flex: 1; }
.bs-drawer-item__arrow {
font-size: 14px !important;
width: auto !important;
color: var(--bs-text-3);
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--bs-dur-fast), transform var(--bs-dur-fast);
}
.bs-drawer-item:hover {
background: var(--bs-surface-2); color: var(--bs-text);
transform: translateX(3px);
}
.bs-drawer-item:hover .bs-drawer-item__arrow {
opacity: 1; transform: translateX(0);
}
.bs-drawer-item--active {
color: var(--bs-green) !important;
background: color-mix(in srgb, var(--bs-green) 10%, transparent);
}
.bs-drawer-item--active::before {
content: '';
position: absolute;
left: -12px; top: 50%; transform: translateY(-50%);
width: 3px; height: 24px;
background: var(--bs-green);
border-radius: 0 4px 4px 0;
box-shadow: 0 0 12px var(--bs-green);
}
.bs-drawer-item--danger { color: var(--bs-danger) !important; }
.bs-drawer-item--danger:hover {
background: rgba(255,59,59,0.08);
transform: translateX(3px);
}
/* Footer rico */
.bs-drawer-footer {
margin-top: auto;
padding: 16px 20px 20px;
position: relative; z-index: 1;
border-top: 1px solid var(--bs-border);
}
.bs-drawer-footer__links {
display: flex; gap: 14px;
margin-bottom: 10px;
}
.bs-drawer-footer__links a {
font-size: 11px;
color: var(--bs-text-2);
text-decoration: none;
transition: color var(--bs-dur-fast) var(--bs-ease);
}
.bs-drawer-footer__links a:hover { color: var(--bs-green); }
.bs-drawer-footer__meta {
font-size: 10px;
color: var(--bs-text-3);
letter-spacing: 0.06em;
display: flex; gap: 6px; align-items: center;
opacity: 0.75;
}
.bs-drawer-footer__sep { opacity: 0.5; }
/* Cascade entrance: brand → user → nav 1 → nav 2 → footer */
.bs-drawer.open .bs-drawer-brand,
.bs-drawer.open .bs-drawer-user,
.bs-drawer.open .bs-drawer-nav,
.bs-drawer.open .bs-drawer-footer {
animation: bs-drawer-rise .55s cubic-bezier(.16, 1, .3, 1) both;
}
.bs-drawer.open .bs-drawer-brand { animation-delay: .08s; }
.bs-drawer.open .bs-drawer-user { animation-delay: .14s; }
.bs-drawer.open .bs-drawer-nav:nth-of-type(1) { animation-delay: .20s; }
.bs-drawer.open .bs-drawer-nav:nth-of-type(2) { animation-delay: .28s; }
.bs-drawer.open .bs-drawer-footer { animation-delay: .36s; }
@keyframes bs-drawer-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* === OFFCANVAS (notificaciones) ========================================= */
.bs-offcanvas-backdrop {
position: absolute; inset: 0; z-index: 200;
/* Sin backdrop-filter — mismo motivo que bs-drawer-backdrop. */
background: rgba(6,15,26,0.82);
opacity: 0; pointer-events: none;
transition: opacity var(--bs-dur-normal) var(--bs-ease);
}
.bs-offcanvas-backdrop.open { opacity: 1; pointer-events: auto; }
/* Override del TGS overlay-backdrop — mismo problema de blur + opacity en
sheet-item-overlay, items-filters-overlay, auction-info-overlay. Sin tocar
tgs.css (design system) — solo override desde bidsale.css. */
.tgs_overlay-backdrop {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: rgba(6,15,26,0.82) !important;
}
.bs-offcanvas {
position: absolute; top: 0; right: 0; bottom: 0;
width: 320px; z-index: 201;
background: var(--bs-surface);
border-left: 1px solid var(--bs-border);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform var(--bs-dur-slow) var(--bs-spring);
overflow: hidden;
}
.bs-offcanvas.open { transform: translateX(0); }
/* Glow ambiental — radial verde sutil arriba (idéntico al drawer) */
.bs-offcanvas-glow {
position: absolute; top: 0; left: 0; right: 0; height: 280px;
background:
radial-gradient(circle at 50% 0%,
color-mix(in srgb, var(--bs-green) 18%, transparent) 0%,
transparent 55%),
radial-gradient(circle at 75% 25%,
color-mix(in srgb, var(--bs-green) 8%, transparent) 0%,
transparent 50%);
pointer-events: none;
z-index: 0;
}
.bs-offcanvas-header {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
padding: 22px 20px 14px;
border-bottom: 1px solid var(--bs-border);
flex-shrink: 0;
gap: 8px;
}
.bs-offcanvas-header__title {
display: flex; align-items: center; gap: 10px;
min-width: 0;
}
.bs-offcanvas-header h3 {
font-size: 17px; font-weight: 600; color: var(--bs-text); margin: 0;
white-space: nowrap;
}
.bs-notif-counter {
font-size: 10px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 8px; border-radius: 999px;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 65%, #000) 100%);
color: var(--bs-navy);
box-shadow: 0 4px 12px color-mix(in srgb, var(--bs-green) 35%, transparent);
}
.bs-offcanvas-header__actions {
display: flex; gap: 4px; flex-shrink: 0;
}
.bs-offcanvas-action {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
color: var(--bs-text-2);
font-size: 14px;
cursor: pointer;
transition: background var(--bs-dur-fast) var(--bs-ease),
color var(--bs-dur-fast) var(--bs-ease),
transform var(--bs-dur-fast) var(--bs-ease);
}
.bs-offcanvas-action:hover {
background: rgba(255,255,255,0.08);
color: var(--bs-text);
transform: scale(1.05);
}
.bs-offcanvas-body {
position: relative; z-index: 1;
flex: 1; overflow-y: auto;
padding: 4px 0 12px;
/* Scrollbar estilizada — sin esto, Chrome desktop muestra la barra default
del SO (gris ancha) mientras Android WebView usa overlay delgado. Forzamos
el mismo look en ambos. */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.14) transparent;
}
.bs-offcanvas-body::-webkit-scrollbar { width: 6px; }
.bs-offcanvas-body::-webkit-scrollbar-track { background: transparent; }
.bs-offcanvas-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.14);
border-radius: 3px;
}
.bs-offcanvas-body::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,.24);
}
/* Tabs horizontales del panel — misma consistencia, scrollbar oculta porque
el scroll horizontal es por gesto/swipe, no por barra visible. */
.bs-notif-tabs-wrap .bs-pill-nav {
scrollbar-width: none;
}
.bs-notif-tabs-wrap .bs-pill-nav::-webkit-scrollbar { display: none; }
/* Group headers ("Hoy" / "Ayer" / "Esta semana" / "Anteriores") */
.bs-notif-group {
padding: 12px 20px 6px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--bs-text-3);
}
/* Empty state premium */
.bs-offcanvas-empty {
text-align: center;
padding: 48px 24px;
margin: 0;
display: flex; flex-direction: column; align-items: center;
}
.bs-offcanvas-empty__icon {
width: 64px; height: 64px; border-radius: 20px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--bs-green) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--bs-green) 18%, transparent);
color: var(--bs-green);
font-size: 28px;
margin-bottom: 16px;
box-shadow: 0 8px 24px color-mix(in srgb, var(--bs-green) 18%, transparent);
}
.bs-offcanvas-empty__title {
font-size: 15px; font-weight: 600;
color: var(--bs-text);
margin: 0 0 6px;
}
.bs-offcanvas-empty__hint {
font-size: 12px; line-height: 1.5;
color: var(--bs-text-3);
margin: 0;
}
/* === TABS ============================================================== */
.bs-tabs {
display: flex; align-items: center;
padding: 0 4px;
background: var(--bs-surface);
border-bottom: 1px solid var(--bs-border);
overflow-x: auto; flex-shrink: 0;
scrollbar-width: none;
gap: 2px;
}
.bs-tabs::-webkit-scrollbar { display: none; }
.bs-tab {
display: inline-flex; align-items: center; gap: 5px;
padding: 12px 14px;
background: none; border: none;
font-family: var(--bs-font-body); font-size: 13px; font-weight: 500;
color: var(--bs-text-3); cursor: pointer; white-space: nowrap;
border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color var(--bs-dur-fast) var(--bs-ease),
border-color var(--bs-dur-fast) var(--bs-ease);
}
.bs-tab:hover { color: var(--bs-text-2); }
.bs-tab--active { color: var(--bs-green); border-bottom-color: var(--bs-green); font-weight: 600; }
.bs-tab-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.bs-tab-dot--green { background: var(--bs-green); animation: bs-pulse 1.5s ease-in-out infinite; }
.bs-tab-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px;
background: var(--bs-danger); color: #fff;
font-size: 9px; font-weight: 700; border-radius: 99px;
margin-left: 4px;
}
.bs-auctions-meta {
padding: 8px 20px 4px;
font-size: 11px; color: var(--bs-text-3);
flex-shrink: 0;
}
/* === INVITATION CARDS ================================================== */
.bs-inv-card {
margin: 0 16px 12px;
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-lg);
overflow: hidden;
display: flex;
}
.bs-inv-card-color {
width: 4px; flex-shrink: 0;
}
.bs-inv-card-body {
flex: 1; padding: 14px 16px;
}
.bs-inv-card-ws {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--bs-text-3);
text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
margin-bottom: 4px;
}
.bs-inv-card-title {
font-size: 15px; font-weight: 600; color: var(--bs-text);
margin: 0 0 4px;
}
.bs-inv-card-expires {
font-size: 11px; color: var(--bs-text-3);
font-family: var(--bs-font-mono); margin: 0 0 12px;
}
.bs-inv-card-actions { display: flex; gap: 8px; }
.bs-inv-btn { min-height: 36px; font-size: 13px; padding: 0 16px; width: auto; }
/* Panel my auctions flex container */
#auctions-panel-my {
display: none; flex-direction: column; flex: 1; overflow: hidden;
}
/* Skeleton loader */
.bs-skeleton {
background: linear-gradient(90deg, var(--bs-surface-2) 25%, var(--bs-surface-3) 50%, var(--bs-surface-2) 75%);
background-size: 200% 100%;
animation: bs-shimmer 1.4s ease-in-out infinite;
border-radius: var(--bs-radius-sm);
}
@keyframes bs-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.bs-skeleton-card {
margin: 0 16px 10px;
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: var(--bs-radius-lg);
padding: 14px 16px;
display: flex; align-items: center; gap: 14px;
}
.bs-skeleton-icon { width: 40px; height: 40px; border-radius: var(--bs-radius-md); flex-shrink: 0; }
.bs-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bs-skeleton-line { height: 12px; }
.bs-skeleton-line--short { width: 60%; }
/* === AUCTION SCREEN ===================================================== */
/* Status dot en navbar */
.bs-auction-status-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--bs-surface-3); flex-shrink: 0;
transition: background var(--bs-dur-normal) var(--bs-ease);
}
.bs-auction-status-dot.active {
background: var(--bs-green);
box-shadow: 0 0 0 3px var(--bs-green-glow);
animation: bs-pulse 1.5s ease-in-out infinite;
}
/* ── Viewers pill (presence count en vivo en el header de /auction) ────────
Pequeño chip al lado del status dot que muestra cuántos pujadores están
conectados al canal en este momento. Usa Soketi presence channels.
El dot rojo pulsando + el icono 👁 transmite "live activity". */
.bs-viewers-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px 4px 7px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
font-size: 11px; font-weight: 600;
color: var(--bs-text);
line-height: 1;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-variant-numeric: tabular-nums;
}
.bs-viewers-pill__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--bs-green);
box-shadow: 0 0 0 2px var(--bs-green-glow);
animation: bs-viewers-pulse 1.4s ease-in-out infinite;
}
.bs-viewers-pill i {
font-size: 12px; color: rgba(255, 255, 255, 0.75);
}
.bs-viewers-pill__count { letter-spacing: 0.3px; }
.bs-viewers-pill--flash {
animation: bs-viewers-pop .35s var(--bs-spring);
}
@keyframes bs-viewers-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: .65; }
}
@keyframes bs-viewers-pop {
0% { transform: scale(1); }
50% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* ── TOOLBAR DE ITEMS (búsqueda + filtros) ──────────────────────────────── */
.bs-items-toolbar {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
background: var(--bs-surface);
border-bottom: 1px solid var(--bs-border);
flex-shrink: 0;
}
.bs-search-wrap {
position: relative; flex: 1;
}
.bs-search-icon {
position: absolute; left: 12px; top: 50%;
transform: translateY(-50%);
font-size: 14px; color: var(--bs-text-3);
pointer-events: none;
}
.bs-search-input {
width: 100%; height: 38px;
background: var(--bs-navy); color: var(--bs-text);
border: 1px solid var(--bs-border); border-radius: 10px;
padding: 0 36px 0 36px;
font-size: 13px;
outline: none;
transition: border-color 150ms;
font-family: var(--bs-font);
}
.bs-search-input:focus { border-color: var(--bs-green); }
.bs-search-input::placeholder { color: var(--bs-text-3); }
.bs-search-clear {
position: absolute; right: 8px; top: 50%;
transform: translateY(-50%);
background: none; border: none;
color: var(--bs-text-3); cursor: pointer;
font-size: 16px; padding: 4px;
}
.bs-search-clear:hover { color: var(--bs-text); }
.bs-filter-btn {
position: relative; flex-shrink: 0;
width: 38px; height: 38px;
background: var(--bs-navy);
border: 1px solid var(--bs-border);
border-radius: 10px;
color: var(--bs-text-2);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
transition: all 150ms;
}
.bs-filter-btn:hover { border-color: var(--bs-green); color: var(--bs-green); }
.bs-filter-btn:active { transform: scale(0.94); }
.bs-filter-btn__count {
position: absolute; top: -4px; right: -4px;
min-width: 16px; height: 16px;
background: var(--bs-green);
color: var(--bs-navy);
font-size: 9px; font-weight: 800;
padding: 0 4px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
/* Chips de filtros activos */
.bs-active-filters {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px 12px;
background: var(--bs-surface);
border-bottom: 1px solid var(--bs-border);
flex-shrink: 0;
}
.bs-filter-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px 4px 10px;
background: color-mix(in srgb, var(--bs-green) 14%, var(--bs-surface));
border: 1px solid var(--bs-green);
color: var(--bs-text);
font-size: 11px; font-weight: 600;
border-radius: 20px;
cursor: pointer;
transition: filter 150ms;
font-family: var(--bs-font);
}
.bs-filter-chip:hover { filter: brightness(1.15); }
.bs-filter-chip i { font-size: 11px; color: var(--bs-green); }
/* ── OFFCANVAS DE FILTROS AVANZADOS ─────────────────────────────────────── */
.bs-filters-sheet {
display: none;
flex-direction: column;
background: var(--bs-surface);
/* Override del 50vh fijo de tgs_offcanvas--bottom — el sheet ahora se ajusta
al contenido con cap dinámico que respeta el keyboard de Android.
Antes: con keyboard abierto, labels y header se ocultaban tras el teclado;
parecía "el texto desapareció" hasta cerrar + reabrir el sheet.
dvh = viewport REAL (resta keyboard); vh = fallback para WebView <108. */
height: auto !important;
max-height: 75vh !important;
max-height: 75dvh !important;
}
.bs-filters-sheet__head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--bs-border);
}
.bs-filters-sheet__title {
margin: 0;
font-family: var(--bs-font-title);
font-size: 17px; font-weight: 700;
color: var(--bs-text);
}
.bs-filters-sheet__close {
background: none; border: none;
color: var(--bs-text-2);
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px; cursor: pointer;
transition: background 150ms;
}
.bs-filters-sheet__close:hover { background: var(--bs-surface-3); }
.bs-filters-sheet__body {
flex: 1; overflow-y: auto;
padding: 16px 18px;
display: flex; flex-direction: column; gap: 20px;
}
.bs-filter-group {
display: flex; flex-direction: column; gap: 8px;
}
.bs-filter-label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--bs-text-3);
}
/* Segmented control para sort */
.bs-filter-segmented {
display: flex; gap: 6px;
flex-wrap: wrap;
}
.bs-filter-hint {
margin: 6px 2px 0;
font-size: 11px; line-height: 1.35;
color: var(--bs-text-3);
}
/* Multi-select chips (métodos de pago). Cada chip togglea individualmente. */
.bs-filter-multichips {
display: flex; flex-wrap: wrap; gap: 6px;
}
.bs-multichip {
padding: 8px 12px;
background: var(--bs-navy);
border: 1px solid var(--bs-border);
border-radius: 999px;
color: var(--bs-text-2);
font-size: 12px; font-weight: 600;
cursor: pointer;
transition: all 150ms;
font-family: var(--bs-font);
display: inline-flex; align-items: center; gap: 5px;
}
@media (hover: hover) {
.bs-multichip:hover { border-color: var(--bs-green); color: var(--bs-green); }
}
.bs-multichip--active,
.bs-multichip--active:hover {
background: var(--bs-green);
border-color: var(--bs-green);
color: var(--bs-navy);
}
.bs-filter-seg {
flex: 1; min-width: calc(50% - 3px);
padding: 9px 10px;
background: var(--bs-navy);
border: 1px solid var(--bs-border);
border-radius: 8px;
color: var(--bs-text-2);
font-size: 12px; font-weight: 600;
cursor: pointer;
transition: all 150ms;
font-family: var(--bs-font);
}
/* Hover solo en devices con cursor real (desktop) — en touch (Android/iOS)
el :hover queda sticky tras el tap y conflicta con --active. */
@media (hover: hover) {
.bs-filter-seg:hover { border-color: var(--bs-green); color: var(--bs-green); }
}
/* Active gana siempre sobre :hover — incluimos el `:hover` explícito en el
selector para subir specificity al nivel del hover y blindar contra el
sticky-hover del WebView (texto verde sobre fondo verde = invisible). */
.bs-filter-seg--active,
.bs-filter-seg--active:hover {
background: var(--bs-green);
border-color: var(--bs-green);
color: var(--bs-navy);
}
/* Rango de precio */
.bs-filter-price-range {
display: flex; align-items: center; gap: 8px;
}
.bs-filter-price-input {
position: relative; flex: 1;
}
.bs-filter-price-prefix {
position: absolute; left: 10px; top: 50%;
transform: translateY(-50%);
color: var(--bs-text-3); font-size: 13px;
pointer-events: none;
}
.bs-filter-price-input input {
width: 100%; height: 38px;
background: var(--bs-navy); color: var(--bs-text);
border: 1px solid var(--bs-border); border-radius: 8px;
padding: 0 10px 0 22px;
font-size: 13px; font-family: var(--bs-font);
outline: none;
transition: border-color 150ms;
}
.bs-filter-price-input input:focus { border-color: var(--bs-green); }
.bs-filter-price-sep {
color: var(--bs-text-3); font-size: 14px;
}
/* Label wrapper para alinear texto + toggle TGS — el switch lo provee tgs.css */
.bs-filter-toggle {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer;
font-size: 13px; color: var(--bs-text); font-weight: 500;
user-select: none;
}
.bs-filters-sheet__footer {
display: flex; gap: 10px;
padding: 12px 18px 18px;
border-top: 1px solid var(--bs-border);
flex-shrink: 0;
}
.bs-filters-sheet__footer .bs-btn { flex: 1; padding: 11px; }
/* ── BANNER GLOBAL DE SIN CONEXIÓN ──────────────────────────────────────── */
.bs-offline-banner {
position: relative;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 0 16px;
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
color: #fff;
font-size: 12px; font-weight: 700;
letter-spacing: .02em;
flex-shrink: 0;
max-height: 0; overflow: hidden;
transition: max-height .3s ease, padding .3s ease, background .3s ease;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.bs-offline-banner--show {
max-height: 50px;
padding-top: 9px; padding-bottom: 9px;
}
.bs-offline-banner--success {
background: linear-gradient(90deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 80%, #000) 100%);
color: var(--bs-navy);
}
.bs-offline-banner__icon {
font-size: 15px;
animation: bs-pulse 1.2s ease-in-out infinite;
}
.bs-offline-banner--success .bs-offline-banner__icon { animation: none; }
/* ── INLINE ERROR STATE (reusable: tabs, listas, etc.) ───────────────────── */
.bs-inline-error {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 36px 24px;
gap: 12px;
}
.bs-inline-error__icon {
font-size: 36px;
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
color: var(--bs-text-3);
background: var(--bs-surface);
border: 1px solid var(--bs-border);
border-radius: 50%;
}
.bs-inline-error__msg {
margin: 0;
font-size: 13px;
color: var(--bs-text-2);
line-height: 1.4;
}
.bs-inline-error__btn {
width: auto; padding: 9px 22px;
display: inline-flex; align-items: center; gap: 6px;
margin-top: 4px;
}
/* ── EMPTY STATE DE SUBASTA (404, 403, error) ────────────────────────────── */
.bs-auction-empty {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 56px 32px 32px;
animation: bs-fade-up var(--bs-dur-normal) var(--bs-ease) both;
}
.bs-auction-empty__icon {
font-size: 56px;
color: var(--bs-text-3);
width: 96px; height: 96px;
display: flex; align-items: center; justify-content: center;
background: var(--bs-surface);
border: 1px solid var(--bs-border);
border-radius: 50%;
margin-bottom: 18px;
}
.bs-auction-empty__title {
font-family: var(--bs-font-title);
font-size: 19px; font-weight: 700;
color: var(--bs-text);
margin: 0 0 8px;
}
.bs-auction-empty__desc {
font-size: 13px; line-height: 1.5;
color: var(--bs-text-2);
margin: 0 0 24px;
max-width: 280px;
}
.bs-auction-empty__desc strong {
font-family: var(--bs-font-mono);
font-weight: 700;
color: var(--bs-green);
background: var(--bs-surface);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid var(--bs-border);
}
.bs-auction-empty__actions {
display: flex; flex-direction: column; gap: 8px;
width: 100%; max-width: 260px;
}
.bs-auction-empty__actions .bs-btn {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
/* ── PAGINACIÓN ELEGANTE PARA MÓVIL ──────────────────────────────────────── */
.bs-pagination {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap;
gap: 4px;
padding: 12px 16px 24px;
}
.bs-page-item {
min-width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 8px;
background: rgba(255,255,255,.04);
border: 1px solid var(--bs-border);
border-radius: 8px;
color: var(--bs-text-2);
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: all 150ms var(--bs-ease);
font-family: var(--bs-font);
user-select: none;
}
.bs-page-item:hover:not(:disabled):not(.active) {
background: rgba(0,212,125,.08);
border-color: var(--bs-green);
color: var(--bs-green);
}
.bs-page-item:active:not(:disabled) { transform: scale(.94); }
.bs-page-item.active {
background: var(--bs-green);
border-color: var(--bs-green);
color: var(--bs-navy);
box-shadow: 0 2px 12px var(--bs-green-glow);
cursor: default;
}
.bs-page-item:disabled,
.bs-page-item.disabled {
opacity: .35; cursor: not-allowed;
}
.bs-page-ellipsis {
min-width: 18px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--bs-text-3); font-size: 13px;
user-select: none;
}
/* ── BOTÓN "CARGAR MÁS" (comentarios) ────────────────────────────────────── */
.bs-load-more {
display: block; width: 100%;
background: transparent;
border: 1px dashed var(--bs-border);
color: var(--bs-text-2);
padding: 10px 16px;
margin: 12px 0 4px;
border-radius: 10px;
font-size: 12px; font-weight: 600;
cursor: pointer;
transition: all 150ms;
font-family: var(--bs-font);
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bs-load-more:hover:not(:disabled) {
background: rgba(0,212,125,.06);
border-color: var(--bs-green);
border-style: solid;
color: var(--bs-green);
}
.bs-load-more:disabled { opacity: .6; cursor: wait; }
.bs-load-more i { font-size: 13px; }
.bs-spin { animation: bs-spin .8s linear infinite; }
/* Wrapper de listas en /auctions — espaciado top/bottom respiro */
.bs-auctions-list {
padding: 16px 0 24px;
}
/* Search bar arriba del listado de subastas */
.bs-auctions-searchbar {
padding: 8px 14px 10px;
background: var(--bs-surface);
border-bottom: 1px solid var(--bs-border);
flex-shrink: 0;
}
/* Segmented sort — 3 pills compactos debajo del search */
.bs-auctions-sort {
display: flex; gap: 4px;
margin-top: 8px;
}
.bs-sort-pill {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 7px 8px;
background: rgba(255,255,255,.03);
border: 1px solid var(--bs-border);
border-radius: 8px;
color: var(--bs-text-3);
font-size: 11px; font-weight: 600;
cursor: pointer;
transition: all 180ms var(--bs-spring);
font-family: var(--bs-font);
white-space: nowrap;
}
.bs-sort-pill i { font-size: 11px; }
.bs-sort-pill:hover {
border-color: color-mix(in srgb, var(--bs-green) 40%, transparent);
color: var(--bs-text-2);
}
.bs-sort-pill:active { transform: scale(.96); }
.bs-sort-pill--active {
background: var(--bs-green);
border-color: var(--bs-green);
color: var(--bs-navy);
box-shadow: 0 2px 8px var(--bs-green-glow);
}
.bs-sort-pill--active i { color: var(--bs-navy); }
/* ── PILL NAV (5 tabs scrolleables en /auctions) ────────────────────────── */
.bs-pill-nav-wrap {
position: relative;
background: var(--bs-surface);
border-bottom: 1px solid var(--bs-border);
flex-shrink: 0;
}
/* Sombra sutil a los lados indicando que se puede scrollear */
.bs-pill-nav-wrap::before,
.bs-pill-nav-wrap::after {
content: '';
position: absolute; top: 0; bottom: 0;
width: 20px; pointer-events: none;
z-index: 2;
}
.bs-pill-nav-wrap::before {
left: 0;
background: linear-gradient(90deg, var(--bs-surface), transparent);
}
.bs-pill-nav-wrap::after {
right: 0;
background: linear-gradient(270deg, var(--bs-surface), transparent);
}
.bs-pill-nav {
display: flex; gap: 6px;
padding: 10px 14px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.bs-pill-nav::-webkit-scrollbar { display: none; }
.bs-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: rgba(255,255,255,.04);
border: 1px solid var(--bs-border);
border-radius: 20px;
color: var(--bs-text-2);
font-size: 12px; font-weight: 600;
white-space: nowrap;
cursor: pointer;
flex-shrink: 0;
scroll-snap-align: center;
font-family: var(--bs-font);
transition: all 220ms var(--bs-spring);
position: relative;
}
.bs-pill:hover {
border-color: color-mix(in srgb, var(--bs-green) 50%, transparent);
color: var(--bs-text);
}
.bs-pill:active { transform: scale(.95); }
.bs-pill i { font-size: 13px; }
.bs-pill--active {
background: var(--bs-green);
border-color: var(--bs-green);
color: var(--bs-navy);
box-shadow:
0 4px 14px var(--bs-green-glow),
0 0 0 4px color-mix(in srgb, var(--bs-green) 15%, transparent);
transform: scale(1.02);
}
/* Shake — animación para anunciar nuevas invitaciones (mismo keyframe que el bell) */
.bs-pill--shake {
animation: bs-notif-shake .7s cubic-bezier(.36,.07,.19,.97);
transform-origin: 50% 50%;
}
.bs-pill--active:hover { color: var(--bs-navy); border-color: var(--bs-green); }
.bs-pill--active i { color: var(--bs-navy); }
/* Dot live (pill "En vivo") */
.bs-pill__dot {
width: 7px; height: 7px; border-radius: 50%;
background: #ef4444;
flex-shrink: 0;
}
.bs-pill__dot--pulse {
box-shadow: 0 0 0 0 rgba(239,68,68,.7);
animation: bs-pill-dot-pulse 1.6s ease-in-out infinite;
}
.bs-pill--active .bs-pill__dot {
background: var(--bs-navy);
box-shadow: 0 0 0 0 rgba(11,22,35,.7);
}
@keyframes bs-pill-dot-pulse {
0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
/* Badge en pill (invitaciones) */
.bs-pill__badge {
min-width: 18px; height: 18px;
padding: 0 5px;
background: var(--bs-danger);
color: #fff;
font-size: 10px; font-weight: 800;
border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
margin-left: 2px;
border: 2px solid var(--bs-surface);
line-height: 1;
}
.bs-pill--active .bs-pill__badge {
background: var(--bs-navy);
color: var(--bs-green);
border-color: var(--bs-green);
}
/* Count discreto en pill — diferente al badge de alerta */
.bs-pill__count {
min-width: 16px; height: 16px;
padding: 0 4px;
background: rgba(255,255,255,.08);
color: var(--bs-text-2);
font-size: 9px; font-weight: 700;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
margin-left: 2px;
line-height: 1;
}
.bs-pill--active .bs-pill__count {
background: rgba(11,22,35,.25);
color: var(--bs-navy);
}
/* ── WS RECONNECT BANNER ─────────────────────────────────────────────────── */
.bs-ws-status {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 7px 16px;
font-size: 12px; font-weight: 600;
flex-shrink: 0;
border-bottom: 1px solid var(--bs-border);
animation: bs-ws-slide-in .25s ease;
}
.bs-ws-status--warn { background: rgba(245,158,11,.12); color: #f59e0b; }
.bs-ws-status--error { background: rgba(239,68,68,.12); color: #ef4444; }
.bs-ws-status--success { background: rgba(0,212,125,.12); color: var(--bs-green); }
.bs-ws-status__icon {
font-size: 13px;
animation: bs-spin 1s linear infinite;
}
.bs-ws-status--success .bs-ws-status__icon { animation: none; }
@keyframes bs-ws-slide-in {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ── BANNER SUBASTA CERRADA ──────────────────────────────────────────────── */
.bs-auction-closed-banner {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 10px 16px;
background: rgba(239,68,68,.1);
border-bottom: 1px solid rgba(239,68,68,.25);
color: #ef4444; font-size: 12px; font-weight: 600;
flex-shrink: 0;
}
.bs-auction-closed-banner i { font-size: 14px; }
/* Botón de puja en estado "cerrada" */
.bs-item-bid-btn--closed {
background: var(--bs-surface-3) !important;
color: var(--bs-text-3) !important;
cursor: not-allowed !important;
border-color: var(--bs-border) !important;
}
/* ── INDICADOR DE SCROLL ABAJO ──────────────────────────────────────────── */
.bs-scroll-hint {
position: absolute; bottom: 14px; left: 50%;
width: 36px; height: 36px;
background: var(--bs-surface);
border: 1px solid var(--bs-border);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--bs-green);
font-size: 18px;
box-shadow:
0 4px 14px rgba(0,0,0,.35),
0 0 0 4px color-mix(in srgb, var(--bs-green) 15%, transparent);
z-index: 5;
cursor: pointer;
transition: opacity .2s, background .2s;
animation: bs-scroll-hint-bounce 1.6s ease-in-out infinite;
backdrop-filter: blur(8px);
}
.bs-scroll-hint:hover {
background: var(--bs-green);
color: var(--bs-navy);
}
@keyframes bs-scroll-hint-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-5px); }
}
/* ── PULL-TO-REFRESH ─────────────────────────────────────────────────────────
Usa el mismo lenguaje visual del App Loader: gavel-badge con gradient y
halos, pulse al refrescar. Color se hereda de --bs-green, así que dentro
de /auction/{code} usa el color del workspace automáticamente. */
#items-scroll, .bs-ptr-host { position: relative; }
.bs-ptr {
position: absolute; top: -70px; left: 0; right: 0;
display: flex; align-items: center; justify-content: center; gap: 12px;
height: 70px;
font-size: 12px; font-weight: 600; color: var(--bs-text-3);
letter-spacing: 0.04em;
opacity: 0;
pointer-events: none;
transition: opacity .2s;
}
.bs-ptr__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
color: var(--bs-navy);
font-size: 18px;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--bs-green) 14%, transparent),
0 0 0 8px color-mix(in srgb, var(--bs-green) 6%, transparent),
0 8px 24px color-mix(in srgb, var(--bs-green) 35%, transparent);
transition: transform .25s var(--bs-spring);
}
/* Estado: pasó el threshold — listo para soltar */
.bs-ptr__icon--ready { transform: scale(1.15); }
/* Estado: refrescando — misma pulse animation del App Loader */
.bs-ptr__icon--spin { animation: bs-loader-pulse 1.2s ease-in-out infinite; }
/* Skeleton para item-card en grid */
.bs-item-card--skeleton .bs-item-img-wrap { aspect-ratio: 1 / 1; overflow: hidden; }
.bs-item-card--skeleton { pointer-events: none; overflow: hidden; }
/* ── Empty state ilustrado (/auction sin items o filtros sin resultados) ── */
.bs-empty-state {
text-align: center;
padding: 32px 24px 56px;
animation: bs-empty-in 500ms cubic-bezier(.34, 1.35, .64, 1) both;
}
/* Versión compact para offcanvas / sheets (menos aire vertical + ilustración más chica) */
.bs-empty-state--compact { padding: 20px 16px 32px; }
.bs-empty-state--compact .bs-empty-state__illus { width: 140px; height: 112px; margin-bottom: 12px; }
.bs-empty-state--compact .bs-empty-state__title { font-size: 16px; }
.bs-empty-state--compact .bs-empty-state__desc { font-size: 12px; }
.bs-empty-state__illus {
width: 200px; height: 160px;
margin: 0 auto 20px;
animation: bs-empty-float 4s ease-in-out infinite;
}
.bs-empty-illus { width: 100%; height: 100%; overflow: visible; }
.bs-empty-state__title {
font-family: var(--bs-font-title);
font-size: 20px; font-weight: 600;
color: var(--bs-text);
margin: 0 0 10px;
letter-spacing: -0.3px;
}
.bs-empty-state__desc {
color: var(--bs-text-3);
font-size: 13px; line-height: 1.55;
margin: 0 auto;
max-width: 300px;
}
.bs-empty-cta { margin-top: 20px; }
/* CTA "Unirme a una subasta" · Escenario B del flujo del + (tab "Todas"
con solo cerradas). Se renderiza arriba de la lista de cards para
ofrecer al user la forma más obvia de entrar a una nueva subasta
ya que no tiene activas ni programadas visibles. */
.bs-auctions-join-cta {
grid-column: 1 / -1;
padding: 4px 4px 16px;
margin-bottom: 4px;
border-bottom: 1px solid var(--bs-border);
}
.bs-auctions-join-cta .bs-btn {
min-height: 48px;
font-size: 15px;
}
.bs-auctions-join-cta .bs-btn i {
font-size: 20px;
}
/* Partículas: cada una con delay y trayectoria distinta para simular flotar */
.bs-empty-particle { transform-origin: center; }
.bs-empty-particle--1 { animation: bs-particle-a 3.2s ease-in-out infinite; }
.bs-empty-particle--2 { animation: bs-particle-b 3.6s ease-in-out infinite .3s; }
.bs-empty-particle--3 { animation: bs-particle-a 3.4s ease-in-out infinite .6s; }
.bs-empty-particle--4 { animation: bs-particle-b 3.8s ease-in-out infinite .9s; }
.bs-empty-particle--5 { animation: bs-particle-a 3.0s ease-in-out infinite 1.2s; }
@keyframes bs-empty-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bs-empty-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes bs-particle-a {
0%, 100% { transform: translateY(0) scale(1); opacity: .8; }
50% { transform: translateY(-14px) scale(1.3); opacity: .3; }
}
@keyframes bs-particle-b {
0%, 100% { transform: translateY(0) scale(1); opacity: .6; }
50% { transform: translateY(-10px) scale(1.4); opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
.bs-empty-state, .bs-empty-state__illus, .bs-empty-particle { animation: none; }
}
/* Logo del workspace en el navbar de /auction. Redondeado, borde sutil con
glow del color primary del workspace (branding). Aparece al lado del back. */
.bs-auction-ws-logo {
width: 30px; height: 30px;
border-radius: 8px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 0 0 1px var(--bs-green-glow),
0 2px 6px rgba(0, 0, 0, 0.3);
background: var(--bs-surface-2);
flex-shrink: 0;
}
/* ── HEADER DE SUBASTA — bloque cohesivo con mesh y shine ────────────────── */
.bs-auction-header {
position: relative; overflow: hidden;
background: var(--bs-surface);
flex-shrink: 0;
}
/* Estado colapsado on scroll: se ocultan SOLO "─ Subasta ─" (kicker) y el
nombre. El countdown de 4 segmentos original + viewers pill se mantienen.
El navbar acomoda el countdown al centro con transición suave. */
/* Kicker "─ Subasta ─": slide up + fade + collapse simultáneo. Duración
corta (240ms) para que se vaya antes que el counter aterrice. */
.bs-auction-title__kicker {
transition:
max-height 320ms cubic-bezier(.4, 0, .2, 1),
opacity 220ms ease-out,
transform 260ms cubic-bezier(.4, 0, .2, 1),
margin 320ms cubic-bezier(.4, 0, .2, 1);
max-height: 20px; overflow: hidden;
transform: translateY(0);
}
/* Nombre: slide up con un tick de delay (stagger) — la salida se siente en
cascada del kicker hacia el nombre. */
.bs-auction-title__name {
transition:
max-height 340ms cubic-bezier(.4, 0, .2, 1) 40ms,
opacity 240ms ease-out 40ms,
transform 280ms cubic-bezier(.4, 0, .2, 1) 40ms,
margin 340ms cubic-bezier(.4, 0, .2, 1) 40ms;
max-height: 40px; overflow: hidden;
transform: translateY(0);
}
.bs-auction-header--collapsed .bs-auction-title__kicker,
.bs-auction-header--collapsed .bs-auction-title__name {
max-height: 0; opacity: 0; margin: 0;
transform: translateY(-8px);
pointer-events: none;
}
/* El strip del countdown: en collapsed se posiciona absolute sobre el navbar
(línea 1) para que quede al lado del back button + viewers pill en lugar
de una segunda línea abajo. Scale ligero para que no chochen los segmentos
con los botones laterales. */
/* Spring bounce en el counter: cubic-bezier con overshoot 1.35 da un
micro-rebote al aterrizar en la posición final. Delay 60ms para que
arranque después del kicker/name y se sienta como una secuencia. */
.bs-cd-strip {
transition: transform 420ms cubic-bezier(.34, 1.35, .64, 1) 60ms,
padding 320ms cubic-bezier(.4, 0, .2, 1);
}
.bs-auction-header--collapsed .bs-cd-strip {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%) scale(.78);
transform-origin: center center;
height: 54px;
padding: 8px 0;
display: flex; align-items: center;
pointer-events: none;
z-index: 3;
}
/* Cada segmento del countdown recibe un stagger sutil al aterrizar — el
primero (días) llega antes, seg llega último. Se siente vivo. */
.bs-cd-mini-seg {
transition: border-color var(--bs-dur-normal),
box-shadow var(--bs-dur-normal),
transform 380ms cubic-bezier(.34, 1.35, .64, 1);
}
.bs-auction-header--collapsed .bs-cd-mini-seg:nth-child(1) { transition-delay: 60ms; }
.bs-auction-header--collapsed .bs-cd-mini-seg:nth-child(2) { transition-delay: 90ms; }
.bs-auction-header--collapsed .bs-cd-mini-seg:nth-child(3) { transition-delay: 120ms; }
.bs-auction-header--collapsed .bs-cd-mini-seg:nth-child(4) { transition-delay: 150ms; }
/* El divider decorativo se oculta cuando colapsa (queda muy cerca del navbar) */
.bs-auction-header__divider {
transition: opacity 240ms ease;
}
.bs-auction-header--collapsed .bs-auction-header__divider { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.bs-auction-title__kicker,
.bs-auction-title__name,
.bs-cd-strip,
.bs-auction-header__divider { transition: none; }
}
.bs-auction-header__bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 90% at 50% 130%, var(--bs-green-glow) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 0% 0%, rgba(255,255,255,.025) 0%, transparent 70%),
radial-gradient(ellipse 50% 50% at 100% 0%, rgba(255,255,255,.015) 0%, transparent 70%);
}
.bs-auction-header__shine {
position: absolute; top: 0; left: 0; right: 0; height: 1px;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.08) 30%,
rgba(255,255,255,.18) 50%,
rgba(255,255,255,.08) 70%,
transparent 100%);
}
.bs-auction-header__divider {
position: relative; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--bs-border) 20%,
var(--bs-green-glow) 50%,
var(--bs-border) 80%,
transparent 100%);
}
/* Navbar fantasma — sin fondo propio, deja ver el mesh */
.bs-navbar--ghost {
background: transparent !important;
border-bottom: none !important;
}
/* Strip contenedor del timer */
.bs-cd-strip {
display: flex; justify-content: center; align-items: center;
padding: 4px 16px 14px;
position: relative;
}
/* Timer segmentado compacto — flotante con glow */
.bs-cd-mini {
display: flex; align-items: center; gap: 5px;
position: relative;
}
.bs-cd-mini-seg {
display: flex; flex-direction: column; align-items: center;
position: relative;
background:
linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
border: 1px solid var(--bs-border);
border-radius: 8px;
padding: 4px 8px; min-width: 32px;
box-shadow:
0 1px 0 rgba(255,255,255,.04) inset,
0 2px 8px rgba(0,0,0,.25);
transition: border-color var(--bs-dur-normal), box-shadow var(--bs-dur-normal);
}
.bs-cd-mini-seg::before {
content: ''; position: absolute; inset: 0; border-radius: 8px;
pointer-events: none;
background: linear-gradient(180deg, var(--bs-green-glow) 0%, transparent 35%);
opacity: .6;
}
.bs-cd-mini-val {
font-family: var(--bs-font-mono);
font-size: 14px; font-weight: 700;
color: var(--bs-green); line-height: 1;
letter-spacing: 1px;
position: relative;
text-shadow: 0 0 8px var(--bs-green-glow);
transition: color var(--bs-dur-normal);
}
.bs-cd-mini-lbl {
font-size: 7px; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--bs-text-3); margin-top: 2px; line-height: 1;
position: relative;
}
.bs-cd-mini.urgent .bs-cd-mini-seg {
border-color: rgba(255,59,48,.4);
box-shadow:
0 1px 0 rgba(255,255,255,.04) inset,
0 0 12px rgba(255,59,48,.3);
}
.bs-cd-mini.urgent .bs-cd-mini-val {
color: var(--bs-danger);
text-shadow: 0 0 8px rgba(255,59,48,.6);
animation: bs-pulse .8s ease-in-out infinite;
}
.bs-cd-mini.closed .bs-cd-mini-val {
color: var(--bs-text-3); text-shadow: none;
}
.bs-cd-mini.closed .bs-cd-mini-seg::before { opacity: 0; }
/* Título de subasta — "SUBASTA" kicker con ornamentos + nombre con gradiente */
.bs-auction-title {
display: flex; flex-direction: column; align-items: center; line-height: 1;
min-width: 0; position: relative;
}
.bs-auction-title__kicker {
display: inline-flex; align-items: center; gap: 8px;
font-size: 9px; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(--bs-text-3);
margin-bottom: 5px;
}
.bs-auction-title__ornament {
display: inline-block; width: 16px; height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--bs-green) 100%);
opacity: .5;
}
.bs-auction-title__ornament:last-child {
background: linear-gradient(90deg, var(--bs-green) 0%, transparent 100%);
}
.bs-auction-title__name {
font-family: var(--bs-font-title);
font-size: 17px; font-weight: 700;
color: var(--bs-text); line-height: 1.15;
max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: linear-gradient(180deg,
var(--bs-text) 0%,
var(--bs-text) 60%,
color-mix(in srgb, var(--bs-green) 60%, var(--bs-text)) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bs-countdown-sep { opacity: 0.4; }
/* === ITEM CARDS ========================================================= */
/* ═══════════════════════════════════════════════════════════════════════════
ITEM CARD — Sala de subasta
Todos los colores van via var(--bs-green) para heredar white-label
═══════════════════════════════════════════════════════════════════════════ */
/* ── Contenedor card ────────────────────────────────────────────────────── */
.bs-item-card {
margin: 0;
background: var(--bs-surface-2);
border: 1px solid var(--bs-border);
border-radius: 18px;
overflow: hidden;
transition: box-shadow 240ms var(--bs-ease),
border-color 240ms var(--bs-ease),
transform 240ms var(--bs-spring);
/* Prevenir context menu del browser al long-press (copy, save image, etc.)
para que el gesto quede exclusivo del peek. */
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.bs-item-card img {
-webkit-user-drag: none;
pointer-events: none; /* clicks/holds llegan al card, no al img */
}
.bs-item-card:active { transform: scale(0.99); }
.bs-item-card--leading {
border-color: var(--bs-green);
box-shadow: 0 0 0 1px var(--bs-green),
0 8px 32px rgba(0,212,125,0.20),
0 2px 8px rgba(0,212,125,0.12);
}
/* Shake + flash rojo cuando llega bid.placed y estabas liderando.
Avisa físicamente que perdiste la puja sin necesitar tocar la card. */
.bs-item-card--outbid-shake {
animation:
bs-outbid-shake 0.55s cubic-bezier(.36, .07, .19, .97),
bs-outbid-flash 1.4s ease-out;
}
@keyframes bs-outbid-shake {
0%, 100% { transform: translateX(0); }
12% { transform: translateX(-10px); }
25% { transform: translateX(10px); }
38% { transform: translateX(-8px); }
52% { transform: translateX(8px); }
68% { transform: translateX(-4px); }
82% { transform: translateX(4px); }
}
@keyframes bs-outbid-flash {
0% { box-shadow: 0 0 0 0 transparent,
0 0 0 0 transparent; }
25% { box-shadow: 0 0 0 2px var(--bs-danger),
0 0 28px rgba(255, 59, 59, 0.55); }
100% { box-shadow: 0 0 0 0 transparent,
0 0 0 0 transparent; }
}
/* ── Imagen portada ──────────────────────────────────────────────────────── */
.bs-item-img-wrap {
position: relative; width: 100%;
aspect-ratio: 4 / 3; overflow: hidden;
background: var(--bs-surface-3);
}
.bs-item-img-wrap img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 400ms var(--bs-ease);
}
.bs-item-img-wrap:hover img { transform: scale(1.05); }
.bs-item-img-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(6,15,26,0.15) 0%, rgba(6,15,26,0.70) 100%);
pointer-events: none;
}
.bs-item-img-wrap--error img { display: none; }
.bs-item-img-wrap--error::after { content: '📦'; font-size: 28px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bs-item-placeholder-icon {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 36px; color: var(--bs-surface-3); opacity: 0.4;
}
/* Precio badge sobre imagen — esquina inferior izquierda */
.bs-item-price-badge {
position: absolute; bottom: 8px; left: 8px;
font-family: var(--bs-font-title);
font-size: 18px; font-weight: 700; color: #fff;
background: var(--bs-green);
padding: 2px 10px; border-radius: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
line-height: 1.4;
transition: transform 300ms var(--bs-spring);
}
/* Badge "Más pujado" — esquina superior izquierda */
.bs-item-hot-badge {
position: absolute; top: 8px; left: 8px;
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 9px;
background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
color: #fff;
font-size: 9px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em;
border-radius: 12px;
box-shadow:
0 2px 8px rgba(249,115,22,.5),
0 0 0 2px rgba(249,115,22,.2);
z-index: 2;
animation: bs-hot-pulse 1.6s ease-in-out infinite;
}
.bs-item-hot-badge i {
font-size: 11px;
animation: bs-hot-flicker 1.2s ease-in-out infinite alternate;
}
@keyframes bs-hot-pulse {
0%, 100% { box-shadow: 0 2px 8px rgba(249,115,22,.5), 0 0 0 2px rgba(249,115,22,.2); }
50% { box-shadow: 0 2px 14px rgba(249,115,22,.7), 0 0 0 4px rgba(249,115,22,.25); }
}
@keyframes bs-hot-flicker {
0% { transform: scale(1) rotate(-3deg); }
100% { transform: scale(1.15) rotate(3deg); }
}
/* Card con badge hot — sutil glow naranja en el borde */
.bs-item-card--hot {
box-shadow: 0 0 0 1px rgba(249,115,22,.3), 0 4px 20px rgba(249,115,22,.15);
}
/* Badge estado — esquina superior derecha */
.bs-item-live-badge {
position: absolute; top: 8px; right: 8px;
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: var(--bs-radius-full);
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; white-space: nowrap;
backdrop-filter: blur(6px);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.bs-item-live-badge--leading { background: var(--bs-green); color: var(--bs-navy); }
.bs-item-live-badge--active { background: rgba(0,212,125,0.20); color: var(--bs-green); border: 1px solid rgba(0,212,125,0.4); }
.bs-item-live-badge--waiting { background: rgba(11,22,35,0.70); color: var(--bs-text-3); border: 1px solid rgba(255,255,255,0.1); }
/* Botón historial — esquina superior izquierda */
.bs-item-more-btn {
position: absolute; top: 8px; left: 8px;
width: 28px; height: 28px; border-radius: 50%;
background: rgba(11,22,35,0.70); backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.15);
color: var(--bs-text-2); font-size: 13px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 150ms, color 150ms, transform 150ms var(--bs-spring);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.bs-item-more-btn:hover { background: var(--bs-green); color: var(--bs-navy); }
.bs-item-more-btn:active { transform: scale(0.88); }
/* ── Banner "Vas ganando" ────────────────────────────────────────────────── */
.bs-leading-banner {
display: flex; align-items: center; gap: 5px;
padding: 5px 10px;
background: linear-gradient(90deg, rgba(0,212,125,0.22) 0%, rgba(0,212,125,0.05) 100%);
border-bottom: 1px solid rgba(0,212,125,0.15);
font-size: 9px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--bs-green);
}
.bs-leading-banner--hidden { display: none; }
/* ── Info del ítem ───────────────────────────────────────────────────────── */
.bs-item-info { padding: 8px 10px 6px; }
.bs-item-name {
font-size: 13px; font-weight: 600; color: var(--bs-text);
margin: 0 0 4px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bs-item-meta {
display: flex; align-items: center; justify-content: space-between;
font-size: 10px; color: var(--bs-text-3);
}
.bs-item-meta-inc { color: var(--bs-green); font-weight: 600; }
.bs-item-meta-next { font-family: var(--bs-font-mono); color: var(--bs-text-2); }
@keyframes bs-price-flash {
0% { transform: scale(1); }
35% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.bs-price-flash { animation: bs-price-flash 450ms var(--bs-spring); }
/* ── Botón pujar ─────────────────────────────────────────────────────────── */
.bs-item-bid-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: calc(100% - 16px); margin: 0 8px 8px;
padding: 10px 8px;
background: var(--bs-green); color: var(--bs-navy);
border: none; border-radius: 10px;
font-family: var(--bs-font-body);
font-size: 13px; font-weight: 800; cursor: pointer;
box-shadow: 0 3px 12px rgba(0,212,125,0.35);
transition: filter 150ms, transform 150ms var(--bs-spring), box-shadow 150ms;
}
.bs-item-bid-btn:hover { filter: brightness(1.08); box-shadow: 0 5px 18px rgba(0,212,125,0.45); }
.bs-item-bid-btn:active { transform: scale(0.96); box-shadow: 0 2px 6px rgba(0,212,125,0.2); }
.bs-item-bid-btn:disabled { cursor: not-allowed; transform: none; }
.bs-item-bid-btn--leading {
background: transparent; border: 1.5px solid var(--bs-green);
color: var(--bs-green); box-shadow: none; opacity: 0.8;
}
/* Variante "Tu artículo" — no puedes pujar tus propias subidas */
.bs-item-bid-btn--mine {
background: transparent;
border: 1.5px dashed var(--bs-text-3);
color: var(--bs-text-2);
box-shadow: none;
opacity: 0.85;
cursor: not-allowed;
}
.bs-item-bid-btn--mine i { color: var(--bs-text-3); }
.bs-item-bid-btn i { font-size: 13px; flex-shrink: 0; }
/* ── AUTH MODAL (forgot / register) ─────────────────────────────────────────
Mismo lenguaje del bid modal: glow ambiental verde + icon badge centrado
+ gradient title. Workspace-aware vía --bs-green. */
.bs-modal--auth {
position: relative;
overflow: hidden;
/* Mobile: limita altura para que el body haga scroll en vez de cortar
contenido (ej. /register con strength meter + error visibles). */
max-height: 92dvh;
display: flex;
flex-direction: column;
}
.bs-modal--auth .bs-modal-body {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
}
/* Tablet: sin esto el form se estira a los 960px del shell. Cubre de una
register/confirm-email/open-dispute/seller-terms (las 4 comparten esta
clase). */
@media (min-width: 768px) {
.bs-modal--auth { max-width: 480px; margin-inline: auto; }
}
.bs-modal--auth::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 220px;
background: radial-gradient(circle at 50% 0%,
color-mix(in srgb, var(--bs-green) 22%, transparent) 0%,
transparent 60%);
pointer-events: none;
z-index: 0;
}
.bs-modal--auth > * { position: relative; z-index: 1; }
.bs-modal--auth .bs-modal-head {
border-bottom: none;
padding: 32px 24px 12px;
text-align: center;
}
.bs-auth-modal-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
border-radius: 16px;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
color: var(--bs-navy);
font-size: 26px;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--bs-green) 14%, transparent),
0 0 0 10px color-mix(in srgb, var(--bs-green) 6%, transparent),
0 14px 32px color-mix(in srgb, var(--bs-green) 38%, transparent);
margin-bottom: 14px;
}
.bs-modal--auth .bs-modal-head h2 {
font-family: var(--bs-font-title);
font-size: 26px; font-weight: 700;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 60%, #ffffff) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin: 0 0 6px;
letter-spacing: -0.5px;
line-height: 1.15;
}
.bs-modal--auth .bs-modal-head p {
font-size: 13px;
color: var(--bs-text-2);
margin: 0;
}
/* Re-afirmar position:absolute aquí porque `.bs-modal--auth > *` (más
específico que .bs-modal-x base) le imponía position:relative y el X
caía top-left en flujo normal en lugar de pegarse a top-right. */
.bs-modal--auth .bs-modal-x {
position: absolute !important;
top: 16px; right: 16px;
z-index: 2;
}
/* ── COACH MARKS / SPOTLIGHT TOUR ───────────────────────────────────────
Truco visual: el spotlight es un box vacío con box-shadow gigante que
"pinta" el resto de la pantalla oscuro. La caja en sí queda transparente,
creando la ilusión de un agujero iluminado sobre el elemento target. */
.bs-coach {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
}
.bs-coach.is-open {
pointer-events: auto;
opacity: 1;
}
.bs-coach__spotlight {
position: fixed;
border-radius: 14px;
/* Sombra gigante que cubre toda la pantalla excepto este box */
box-shadow:
0 0 0 9999px rgba(6, 15, 26, 0.85),
0 0 0 3px color-mix(in srgb, var(--bs-green) 50%, transparent),
0 0 28px color-mix(in srgb, var(--bs-green) 60%, transparent);
pointer-events: none;
transition: top .4s cubic-bezier(.16, 1, .3, 1),
left .4s cubic-bezier(.16, 1, .3, 1),
width .4s cubic-bezier(.16, 1, .3, 1),
height .4s cubic-bezier(.16, 1, .3, 1);
}
.bs-coach__tooltip {
position: fixed;
left: 16px;
right: 16px;
max-width: 380px;
margin: 0 auto;
background: linear-gradient(180deg,
color-mix(in srgb, var(--bs-green) 6%, var(--bs-surface)) 0%,
var(--bs-surface) 100%);
border: 1px solid color-mix(in srgb, var(--bs-green) 28%, var(--bs-border));
border-radius: 16px;
padding: 18px 18px 14px;
box-shadow:
0 14px 40px rgba(0,0,0,0.55),
0 0 32px color-mix(in srgb, var(--bs-green) 25%, transparent);
transition: top .4s cubic-bezier(.16, 1, .3, 1),
bottom .4s cubic-bezier(.16, 1, .3, 1);
}
/* Flecha del tooltip apuntando al spotlight — top/bottom según posición */
.bs-coach__tooltip--below::before {
content: '';
position: absolute;
top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
width: 14px; height: 14px;
background: color-mix(in srgb, var(--bs-green) 6%, var(--bs-surface));
border-left: 1px solid color-mix(in srgb, var(--bs-green) 28%, var(--bs-border));
border-top: 1px solid color-mix(in srgb, var(--bs-green) 28%, var(--bs-border));
}
.bs-coach__tooltip--above::after {
content: '';
position: absolute;
bottom: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
width: 14px; height: 14px;
background: var(--bs-surface);
border-right: 1px solid color-mix(in srgb, var(--bs-green) 28%, var(--bs-border));
border-bottom: 1px solid color-mix(in srgb, var(--bs-green) 28%, var(--bs-border));
}
.bs-coach__step {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bs-green);
margin-bottom: 6px;
}
.bs-coach__title {
font-family: var(--bs-font-title);
font-size: 20px;
font-weight: 700;
color: var(--bs-text);
margin: 0 0 6px;
line-height: 1.2;
}
.bs-coach__body {
font-size: 13px;
line-height: 1.5;
color: var(--bs-text-2);
margin: 0 0 14px;
}
.bs-coach__actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.bs-coach__skip {
background: none;
border: none;
color: var(--bs-text-3);
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 8px 4px;
transition: color var(--bs-dur-fast) var(--bs-ease);
}
.bs-coach__skip:hover { color: var(--bs-text-2); }
.bs-coach__next {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 10px;
background: linear-gradient(135deg,
var(--bs-green) 0%,
color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
color: var(--bs-navy);
font-size: 13px;
font-weight: 700;
border: none;
cursor: pointer;
box-shadow: 0 8px 20px color-mix(in srgb, var(--bs-green) 35%, transparent);
transition: transform var(--bs-dur-fast) var(--bs-ease);
}
.bs-coach__next:hover { transform: translateY(-1px); }
.bs-coach__next:active { transform: translateY(0); }
.bs-coach__next i { font-size: 14px; }
/* ── WELCOME TUTORIAL ──────────────────────────────────────────────────────
Overlay fullscreen al primer login con 4 slides swipeables. */
.bs-tutorial {
position: fixed;
inset: 0;
background:
radial-gradient(ellipse at top, color-mix(in srgb, var(--bs-green) 6%, transparent) 0%, transparent 55%),
var(--bs-navy);
z-index: 9999;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
overflow: hidden;
}
.bs-tutorial.is-open {
opacity: 1;
pointer-events: auto;
}
.bs-tutorial__glow {
position: absolute;
width: min(90vmin, 900px);
height: min(90vmin, 900px);
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--bs-green) 14%, transparent) 0%, transparent 55%);
top: 38%; left: 50%;
transform: translate(-50%, -50%);
filter: blur(40px);
pointer-events: none;
animation: bs-splash-pulse 5s ease-in-out infinite;
}
/* Botón skip — esquina superior derecha */
.bs-tutorial__skip {
position: absolute;
top: 18px; right: 18px;
z-index: 2;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: var(--bs-text-2);
padding: 8px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background var(--bs-dur-fast) var(--bs-ease),
color var(--bs-dur-fast) var(--bs-ease);
}
.bs-tutorial__skip:hover {
background: rgba(255,255,255,0.1);
color: var(--bs-text);
}
/* Track horizontal — contiene las slides side-by-side */
.bs-tutorial__track {
flex: 1;
display: flex;
width: 100%;
height: 100%;
transition: transform .45s cubic-bezier(.16, 1, .3, 1);
touch-action: pan-y;
position: relative;
z-index: 1;
}
.bs-tutorial__slide {
flex: 0 0 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 32px 40px;
text-align: center;
user-select: none;
-webkit-user-select: none;
}
/* Icono badge grande con halo doble — variantes por slide */
.bs-tutorial__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(80px, 14vmin, 120px);
height: clamp(80px, 14vmin, 120px);
border-radius: clamp(22px, 3.5vmin, 32px);
font-size: clamp(36px, 6vmin, 56px);
margin-bottom: 28px;
color: var(--bs-navy);
background: linear-gradient(135deg, var(--bs-green) 0%, color-mix(in srgb, var(--bs-green) 55%, #000) 100%);
box-shadow:
0 0 0 6px color-mix(in srgb, var(--bs-green) 14%, transparent),
0 0 0 14px color-mix(in srgb, var(--bs-green) 6%, transparent),
0 18px 50px color-mix(in srgb, var(--bs-green) 38%, transparent);
}
/* Variantes de color por slide (uso color-mix para mantener el branding tone) */
.bs-tutorial__icon--bolt {
background: linear-gradient(135deg, #ffc857 0%, #c97f08 100%);
color: #1c1408;
box-shadow:
0 0 0 6px rgba(255,200,87,0.14),
0 0 0 14px rgba(255,200,87,0.06),
0 18px 50px rgba(255,200,87,0.38);
}
.bs-tutorial__icon--alert {
background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
color: #fff;
box-shadow:
0 0 0 6px rgba(249,115,22,0.14),
0 0 0 14px rgba(249,115,22,0.06),
0 18px 50px rgba(220,38,38,0.42);
}
.bs-tutorial__icon--win {
background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
color: #2a1f00;
box-shadow:
0 0 0 6px rgba(255,215,0,0.14),
0 0 0 14px rgba(255,215,0,0.06),
0 18px 50px rgba(255,215,0,0.40);
}
/* Title con gradient text — usa --bs-green pero el icono define el tono */
.bs-tutorial__title {
font-family: var(--bs-font-title);
font-size: clamp(28px, 6vmin, 40px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.5px;
margin: 0 0 12px;
background: linear-gradient(135deg, var(--bs-green) 0%, color-mix(in srgb, var(--bs-green) 60%, #ffffff) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
max-width: 380px;
}
.bs-tutorial__body {
font-size: clamp(14px, 2vmin, 16px);
line-height: 1.55;
color: var(--bs-text-2);
margin: 0;
max-width: 380px;
}
.bs-tutorial__body strong {
color: var(--bs-text);
}
/* CTAs del slide opcional de biometría (Activar / Ahora no).
Stack vertical para que el dedo encuentre el primario sin precisión. */
.bs-tutorial__bio-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 28px;
width: 100%;
max-width: 300px;
}
.bs-tutorial__bio-actions .bs-btn {
width: 100%;
justify-content: center;
}
/* Footer fijo con dots + botón Next */
.bs-tutorial__footer {
position: relative;
z-index: 2;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px 28px;
gap: 16px;
background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bs-navy) 80%, transparent) 100%);
}
.bs-tutorial__dots {
display: flex;
gap: 8px;
align-items: center;
}
.bs-tutorial__dot {
width: 8px; height: 8px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
transition: width var(--bs-dur-fast) var(--bs-ease),
background var(--bs-dur-fast) var(--bs-ease);
cursor: pointer;
/* Reset cuando los dots son