:root {
  --bg: #0e0e10;
  --bg2: #16161a;
  --panel: #1d1d22;
  --panel2: #26262c;
  --card: #26262c;
  --line: #2c2c33;
  --text: #f2f3f5;
  --text-dim: #9a9aa5;
  --accent: #6c8cff;
  --green: #5fb878;
  --red: #ff5b6e;
  --gold: #e8b84b;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.1px;
  background: var(--bg); color: var(--text); overscroll-behavior-y: none;
}
#app { max-width: 980px; margin: 0 auto; min-height: 100%; position: relative; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--accent); text-decoration: none; }
.hidden { display: none !important; }
input, select, textarea { font-family: inherit; }

/* Splash */
.splash { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.splash-name { font-size: 22px; font-weight: 800; letter-spacing: .5px; }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top));
  background: rgba(16,16,20,.7); backdrop-filter: blur(10px) saturate(1.7); -webkit-backdrop-filter: blur(10px) saturate(1.7);
  border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; min-width: 0; flex-shrink: 1; }
.brand .brand-ic { display: flex; flex-shrink: 0; cursor: pointer; transition: color .15s; }
.brand .brand-ic:hover { color: var(--accent); }
.brand .brand-ic svg { display: block; }
.brand .brand-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; cursor: pointer; }
.topbar .sp { flex: 1; min-width: 8px; }
.iconbtn { width: 40px; height: 40px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text); }
.bell-badge { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
.iconbtn:active { background: var(--panel2); }
.topbar .iconbtn { flex-shrink: 0; }
/* Chip de saldo en la barra (reemplaza al menú; nunca se recorta) */
.bal-chip { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; border-radius: 13px; background: rgba(108,140,255,.14); border: 1px solid rgba(108,140,255,.26); color: var(--text); font-size: 13.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; box-shadow: 0 0 16px rgba(108,140,255,.1); transition: background .15s; }
.bal-chip b { font-weight: 800; letter-spacing: -.2px; }
.bal-chip svg { color: var(--accent); flex-shrink: 0; }
.bal-chip:active { background: rgba(108,140,255,.24); }
/* Indicador de conexión (red intermitente) */
.net-bar { position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 90;
  margin-top: max(10px, env(safe-area-inset-top)); padding: 9px 16px; border-radius: 22px;
  background: var(--red); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.45); transition: transform .32s cubic-bezier(.22,.61,.36,1); }
.net-bar.show { transform: translate(-50%, 0); }
.net-bar.ok { background: var(--green); color: #ffffff; }
.net-bar .net-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: netpulse 1s infinite; }
@keyframes netpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Search bar */
.searchbar { display: flex; align-items: center; gap: 9px; margin: 12px 16px; padding: 13px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: border-color .15s, box-shadow .15s; }
.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 2px 14px rgba(108,140,255,.22); }
.searchbar[hidden] { display: none; }   /* el atributo hidden debe ganarle a display:flex */
.searchbar-pop { margin-top: 0; animation: searchPop .2s ease; }
@keyframes searchPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.search-close { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); color: var(--text-dim); display: flex; align-items: center; justify-content: center; }
.chips-toggle.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.searchbar input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 16px; }
.searchbar .ico { color: var(--text-dim); }
.searchbar .sb-add { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; border: none; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.coins-bar { display: flex; gap: 10px; align-items: center; padding: 0 16px 4px; }
.coins-bar .btn { flex: 1; }
.coins-bar .filt-btn { flex-shrink: 0; }
/* Oferta OFICIAL de USDT, destacada y vistosa */
.usdt-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 16px; border-radius: 16px; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, rgba(38,161,123,.22), rgba(38,161,123,.06)); border: 1.5px solid rgba(38,161,123,.55); box-shadow: 0 8px 24px rgba(38,161,123,.18); }
.usdt-card:active { transform: scale(.99); }
.usdt-card .usdt-ic { flex-shrink: 0; display: flex; }
.usdt-info { flex: 1; min-width: 0; }
.usdt-t { font-size: 17px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
.usdt-tag { font-size: 11px; font-weight: 800; background: #26a17b; color: #fff; padding: 2px 8px; border-radius: 20px; }
.usdt-s { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.usdt-p { font-size: 20px; font-weight: 900; color: var(--text); text-align: right; line-height: 1; }
.usdt-p span { display: block; font-size: 11px; font-weight: 600; color: var(--text-dim); margin-top: 3px; }
.usdt-soon { cursor: default; opacity: .55; filter: grayscale(.6); box-shadow: none; }
.usdt-soon:active { transform: none; }
.usdt-soon-tag { font-size: 12px; font-weight: 800; color: var(--text-dim); background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: 4px 10px; border-radius: 20px; white-space: nowrap; }

/* Chips de categorías */
.chips-row { display: flex; align-items: center; gap: 4px; padding-right: 12px; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 16px 8px; scrollbar-width: none; flex: 1; min-width: 0;
  /* Desvanecido a la derecha: el último chip se difumina en vez de cortarse junto a la lupa */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); }
.chips::-webkit-scrollbar { display: none; }
/* Expandida: todas visibles en varias filas, sin scroll horizontal (sin máscara) */
.chips.wrap { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
.chip { white-space: nowrap; flex-shrink: 0; padding: 8px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text-dim); font-size: 13px; font-weight: 600; }
.chip.active { background: var(--text); color: var(--bg); border-color: transparent; }
.chip-fav { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); border-color: rgba(108,140,255,.4); }
.chip-mdl { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: #2a1a00;
  background: linear-gradient(90deg, #ffd166, #f4a62a); border-color: transparent; box-shadow: 0 2px 8px rgba(244,166,42,.35); }
/* ── Carrusel de PROMOS (banners IA, full-bleed tipo hero) ───────────────────── */
.promo-wrap { position: relative; margin: 0; }
.promo-rail { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.promo-rail::-webkit-scrollbar { display: none; }
.promo-card { scroll-snap-align: center; flex: 0 0 100%; position: relative; aspect-ratio: 16 / 9; max-height: 264px; overflow: hidden; border: none; padding: 0; cursor: pointer; background: var(--bg2); }
.promo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Tarjetas de "trabajos" (cajero/mensajero/promotor): sin foto, gradiente del rol + ícono grande a la derecha. */
.promo-grad { display: flex; align-items: center; justify-content: flex-end; padding-right: 9%; }
.promo-grad svg { width: 82px; height: 82px; color: rgba(255,255,255,.9); filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); }
.promo-grad-cajero { background: radial-gradient(125% 135% at 82% 18%, #2bd47f 0%, #12633f 55%, #07231a 100%); }
.promo-grad-mensajero { background: radial-gradient(125% 135% at 82% 18%, #7d97ff 0%, #2f3f92 55%, #101430 100%); }
.promo-grad-promotor { background: radial-gradient(125% 135% at 82% 18%, #f5c451 0%, #a5701a 55%, #2a1d07 100%); }
.promo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,12,.82) 0%, rgba(8,8,12,.5) 40%, rgba(8,8,12,.08) 66%, rgba(0,0,0,0) 80%); z-index: 1; }
.promo-tx { position: absolute; left: 22px; top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; max-width: 64%; text-align: left; }
.promo-badge { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
/* Banner "Ayuda a desbloquear": texto (con la etiqueta) más abajo, sobre la zona oscura, se ve mejor. */
.promo-card.promo-desbloq .promo-tx { justify-content: flex-end; padding-bottom: 30px; }
.promo-t { font-size: 23px; font-weight: 800; color: #fff; letter-spacing: -.5px; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.promo-s { font-size: 13.5px; color: rgba(255,255,255,.94); line-height: 1.3; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.promo-cta { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 10px; background: #fff; color: #14151c; font-size: 13px; font-weight: 800; padding: 9px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.38); }
.promo-cta svg { transform: translateX(0); transition: transform .18s ease; }
.promo-card:active .promo-cta svg { transform: translateX(3px); }
@media (hover: hover) { .promo-card:hover .promo-cta svg { transform: translateX(3px); } }
/* "Sé Promotor": flecha parpadeante abajo-derecha que apunta al botón "Promotores" del selector de abajo. */
.promo-point { position: absolute; right: 16px; bottom: 12px; z-index: 3; color: #fff; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); animation: promoPoint 1.05s ease-in-out infinite; }
@keyframes promoPoint { 0%, 100% { opacity: .25; transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .promo-point { animation: none; opacity: .9; } }
/* Puntos indicadores — SOBRE el banner (sin franja negra aparte) */
.promo-dots { position: absolute; left: 0; right: 0; bottom: 11px; z-index: 3; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.promo-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: width .2s, background .2s; }
.promo-dot.on { width: 18px; background: #fff; }

/* ── Menú de arriba (inicio, móvil): Tiendas + Carrito flotantes sobre el banner ── */
.view-home { position: relative; }   /* ancla para el menú de arriba flotante */
.view-locker { padding-top: max(12px, env(safe-area-inset-top)); }   /* Casillero sin topbar: respeta el status-bar */
/* Database sin topbar (quitamos el título "Analítica" y la franja del menú de PC): en móvil
   necesita respetar el status-bar. En PC el respiro lo da #app (padding-top del nav fijo). */
@media (max-width: 999px) { .db-view { padding-top: max(10px, env(safe-area-inset-top)); } }
.home-top { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 6; display: flex; gap: 9px; }
.htop-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(14,14,18,.5); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(9px) saturate(1.4); -webkit-backdrop-filter: blur(9px) saturate(1.4);
  box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .16s ease, background .18s ease; }
.htop-btn:active { transform: scale(.9); }
.htop-btn .cart-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.htop-btn .cart-badge.hidden { display: none; }

/* ── Buscador del Inicio ─── oculto en móvil (el selector Mercado/Envíos ocupa su lugar);
   en PC se abre desde el icono de lupa del nav superior. ───────────────────────── */
.home-search { display: none; padding: 12px 16px 12px; }
.home-search.show { display: block; }   /* móvil: la lupa del menú de arriba lo abre/cierra */
.hs-box { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.hs-box svg { color: var(--text-dim); flex-shrink: 0; }
.hs-box input { flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--text); font-size: 15px; }
.hs-box input::placeholder { color: var(--text-dim); }
/* ── Selector Mercado / Envíos (estilo app de Uber: iconos 3D + texto + rayita) — solo móvil ── */
.mode-toggle { position: relative; margin: 6px 12px 2px; }
.mode-toggle--top { margin-top: 0; padding-top: max(14px, calc(env(safe-area-inset-top) + 8px)); }
.mode-segs { display: flex; }
/* Compacto (menos alto): icono AL LADO del texto, en fila. */
.mode-seg { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 8px 4px 11px; border: none; background: none; cursor: pointer; color: var(--text-dim); transition: color .18s ease; -webkit-tap-highlight-color: transparent; }
.mode-ic { width: 25px; height: 25px; flex-shrink: 0; display: grid; place-items: center; transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.mode-ic svg { width: 100%; height: 100%; }
.mode-lb { font-size: 14px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
/* 3 segmentos (Mercado / Tus Tiendas / Promotores): un pelín más compacto para que quepan en fila. */
.mode-n3 .mode-seg { gap: 5px; padding: 8px 2px 11px; }
.mode-n3 .mode-ic { width: 21px; height: 21px; }
.mode-n3 .mode-lb { font-size: 12px; }
/* El inactivo NO se atenúa (iconos siempre a full color); el activo se marca con la rayita + texto claro. */
.mode-seg.on { color: var(--text); }
.mode-seg.on .mode-ic { transform: scale(1.06); }
.mode-seg:active .mode-ic { transform: scale(.9); }
/* línea base (track) bajo los dos segmentos */
.mode-toggle::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.09); }
/* rayita indicadora: se posa bajo el segmento activo (posición según nº de segmentos --mt-n e índice --mt-i) */
.mode-underline { position: absolute; left: 0; bottom: -.5px; width: calc(100% / var(--mt-n, 2)); height: 3px; display: flex; justify-content: center; pointer-events: none; z-index: 1; transition: transform .3s cubic-bezier(.4,0,.2,1); transform: translateX(calc(var(--mt-i, 0) * 100%)); }
.mode-underline::before { content: ""; width: 62px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px rgba(108,140,255,.6); }
.mode-n3 .mode-underline::before { width: 46px; }
/* Fila de filtros (Para ti · Precios del día · Ver todo) — referencia del jefe */
.filter-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 4px 16px 12px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.fchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--text-dim); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .2s ease; }
.fchip:active { transform: scale(.95); }
.fchip.on { background: #f2f3f5; color: #14151c; border-color: transparent; box-shadow: 0 5px 14px rgba(0,0,0,.32); }
@media (hover: hover) { .fchip:not(.on):hover { color: var(--text); border-color: var(--text-dim); } }
/* Insignia % verde de "Precios del día" (como la foto) */
.fchip-pct { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #06210f; font-size: 11px; font-weight: 900; }
.fchip-deal.on .fchip-pct { background: var(--green); color: #06210f; }
/* "Ver todo >" a la derecha */
.fchip-all { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 3px; background: none; border: none; color: var(--text-dim); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 2px; white-space: nowrap; }
.fchip-all svg { color: var(--text-dim); }

/* ── Sección "Categorías" — tarjetas cuadradas (foto + nombre) → abren su página ── */
.cat-sec { margin: 16px 0 2px; }
.cat-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 11px; }
.cat-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.cat-rail { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: none; }
.cat-rail::-webkit-scrollbar { display: none; }
.cat-tile { flex-shrink: 0; width: 21%; max-width: 90px; background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.cat-tile-img { width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text-dim); box-shadow: 0 5px 13px rgba(0,0,0,.22); transition: transform .14s ease, box-shadow .2s ease; }
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile-dig .cat-tile-img { background: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff; }
.cat-tile-name { font-size: 11.5px; font-weight: 700; color: var(--text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.cat-tile-count { display: none; }   /* el conteo solo se muestra en el bento de PC */
/* Tiles de TIENDA en el inicio: el logo CUBRE todo el cuadro (cover). */
.store-tile .cat-tile-img { background: #fff; }
.store-tile .cat-tile-img img { object-fit: cover; }
.store-tile .cat-tile-ph { width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--accent); font-weight: 800; font-size: 22px; }
.cat-tile:active .cat-tile-img { transform: scale(.95); }
/* Casillero: tile FIJO al inicio (no entra en el barajado de categorías), pero la fila se scrollea normal. */
.cat-tile-locker .cat-tile-img { background: linear-gradient(135deg, #1f7a4d, #0f3d28); }
@media (hover: hover) { .cat-tile:hover .cat-tile-img { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.3); } }
/* Página de categoría: subtítulo con el conteo */
.cat-count { padding: 0 16px 12px; color: var(--text-dim); font-size: 13.5px; font-weight: 600; margin-top: -4px; }
/* Grid de SUBCATEGORÍAS (carros, motos…) — referencia "Home goods" del jefe.
   La foto LLENA la tarjeta y el nombre va encima con un degradado para legibilidad. */
.subcat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 96px; }
.subcat-card { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; cursor: pointer; border: none; padding: 0;
  background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .12s ease, box-shadow .2s ease; }
.subcat-card:active { transform: scale(.98); }
.subcat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.subcat-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--text-dim); }
.subcat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,0) 60%); z-index: 1; }
.subcat-name { position: absolute; top: 11px; left: 13px; right: 13px; z-index: 2; display: flex; flex-direction: column; gap: 1px; text-align: left;
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.2px; text-shadow: 0 1px 5px rgba(0,0,0,.45); }
.subcat-name small { font-weight: 600; font-size: 11px; opacity: .92; }
@media (hover: hover) { .subcat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.32); } }
/* ── Categorías "tipo imagen" (referencia ESTORE) — variante anterior, sin uso ── */
.catcard { flex-shrink: 0; width: 70px; background: none; border: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.catcard-img, .catcard-ic { width: 66px; height: 66px; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); transition: transform .14s ease, border-color .15s, box-shadow .15s; }
.catcard-img { background: #fff; }
.catcard-img img { width: 100%; height: 100%; object-fit: cover; }
.catcard-img.noimg { background: var(--panel); color: var(--text-dim); }
.catcard-ic { background: var(--panel); color: var(--text-dim); }
.cc-fav .catcard-ic { background: rgba(108,140,255,.14); color: var(--accent); border-color: rgba(108,140,255,.3); }
.cc-ca .catcard-ic { background: rgba(95,184,120,.14); color: var(--green); border-color: rgba(95,184,120,.3); }
.cc-mdl .catcard-ic { background: linear-gradient(135deg,#ffd166,#f4a62a); color: #2a1a00; border-color: transparent; }
.cc-dig .catcard-ic { background: rgba(232,184,75,.14); color: var(--gold); border-color: rgba(232,184,75,.32); }
.catcard-name { font-size: 11.5px; font-weight: 600; color: var(--text-dim); max-width: 70px; text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catcard:active .catcard-img, .catcard:active .catcard-ic { transform: scale(.93); }
.catcard.active .catcard-img, .catcard.active .catcard-ic { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(108,140,255,.28); }
.catcard.active .catcard-name { color: var(--text); }
/* Botón para desplegar/contraer las categorías */
.chips-toggle { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--text); display: flex; align-items: center; justify-content: center; transition: transform .22s ease, background .15s; }
.chips-toggle.open { transform: rotate(180deg); background: var(--panel2); color: var(--text); }
.chips-toggle:active { background: var(--panel2); }

/* Grid de productos */
/* Carrusel de banners del inicio */
.hero { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hero::-webkit-scrollbar { display: none; }
.hero-slide { scroll-snap-align: start; flex: 0 0 86%; min-height: 132px; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; position: relative; overflow: hidden; color: #fff; transition: transform .14s ease; }
.hero-slide:active { transform: scale(.985); }
.hero-accent { background: linear-gradient(135deg, var(--accent), #4a5cc4); }
.hero-green { background: linear-gradient(135deg, #2fa06f, #1d7350); }
.hero-red { background: linear-gradient(135deg, #ff5b6e, #f0883c); }
.hero-tx { position: relative; z-index: 1; }
.hero-slide h3 { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.hero-slide p { font-size: 12.5px; opacity: .92; margin-top: 5px; max-width: 74%; line-height: 1.45; }
.hero-cta { position: relative; z-index: 1; margin-top: auto; padding-top: 12px; }
.hero-cta::after { content: ""; }
.hero-cta { align-self: flex-start; }
.hero-slide .hero-cta { background: rgba(255,255,255,.96); color: #15151a; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 11px; margin-top: 12px; }
.hero-ico { position: absolute; right: -10px; bottom: -14px; opacity: .16; z-index: 0; line-height: 0; }
.hero-ico svg { width: 104px; height: 104px; stroke: #fff; }
@media (min-width: 700px) { .hero-slide { flex-basis: 360px; } }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 8px 14px 90px; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; transition: transform .14s ease; }
.card:active { transform: scale(.97); }
/* Perf FPS (invisible): las tarjetas del feed fuera de pantalla NO se pintan/maquetan.
   Con 200 productos en el DOM, el navegador solo renderiza las visibles → scroll fluido.
   contain-intrinsic-size reserva el alto estimado para que el scrollbar no salte. */
.grid > .card { content-visibility: auto; contain-intrinsic-size: auto 300px; }
/* Pista de reordenar arriba del grid de la tienda del dueño. */
.grid-hint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); padding: 6px 16px 0; }
.grid-hint svg { color: var(--text-dim); }
/* Reordenar productos SIN arrastrar: modo "Organizar" (tocas uno y luego otro → se intercambian). */
.reorg-bar { display: flex; align-items: center; gap: 10px; padding: 4px 16px 10px; flex-wrap: wrap; }
.reorg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.reorg-btn svg { opacity: .85; }
.reorg-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.reorg-btn.on svg { opacity: 1; }
.reorg-hint { font-size: 12.5px; color: var(--text-dim); }
/* En modo organizar el grid resalta que se puede tocar; la tarjeta marcada se ve seleccionada. */
.grid.organizing .card { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.grid.organizing .card .ph { transition: transform .12s ease, box-shadow .2s ease, outline-color .15s ease; }
.card.reorg-sel .ph { outline: 3px solid var(--accent); outline-offset: -1px; box-shadow: 0 10px 26px rgba(0,0,0,.45); transform: scale(.96); }
.card.reorg-sel .ph::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
@keyframes reorgSwap { 0% { transform: scale(.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.card.reorg-swap .ph { animation: reorgSwap .42s ease; }
/* Modo Organizar en SECCIONES: producto seleccionado (mismo look que reorg-sel) + barra de secciones. */
.card.sec-sel .ph { outline: 3px solid var(--accent); outline-offset: -1px; box-shadow: 0 10px 26px rgba(0,0,0,.45); transform: scale(.96); }
.card.sec-sel .ph::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
/* Etiqueta de sección sobre la foto del producto (en la gestión de la tienda). */
.card-sec { position: absolute; bottom: 6px; left: 6px; z-index: 2; background: rgba(10,12,18,.78); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 7px; max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Producto EN REVISIÓN (panel del dueño): chip ámbar arriba-izquierda + foto atenuada. */
.card-review { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(232,184,75,.94); color: #1a1400; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 7px; }
.card.prod-review .ph img { opacity: .55; filter: saturate(.7); }
/* Barra de secciones (chips) en modo Organizar: elige a cuál mover lo seleccionado. */
.secbar { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }
.secbar::-webkit-scrollbar { display: none; }
.sec-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sec-chip:hover { border-color: var(--accent); }
.sec-chip.sec-none { color: var(--text-dim); }
.sec-chip.sec-new { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sec-chip.sec-arrange { color: var(--text); }
/* Sheet "Acomodar categorías": lista con flechas arriba/abajo. */
.arr-list { display: flex; flex-direction: column; gap: 8px; }
.arr-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.arr-name { flex: 1; font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arr-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.arr-btn:disabled { opacity: .35; cursor: default; }
.arr-btn:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
/* Chip de sección con botón de EDITAR (renombrar/borrar) pegado. */
.sec-chip-wrap { flex: 0 0 auto; display: inline-flex; align-items: stretch; }
.sec-chip-wrap .sec-chip-tap { border-radius: 999px 0 0 999px; border-right: none; }
.sec-chip-edit { display: inline-flex; align-items: center; padding: 0 10px; border-radius: 0 999px 999px 0;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; }
.sec-chip-edit:hover { color: var(--accent); border-color: var(--accent); }
/* Selector de categorías en el FORMULARIO del producto (varias, toggle). */
.pf-secs { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-sec-chip { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.pf-sec-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-sec-chip.pf-sec-new { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
/* Buscador dentro de la tienda (filtra los productos por nombre). Fino y con separación. */
.store-search { display: flex; align-items: center; gap: 8px; margin: 16px 16px 10px; padding: 8px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.store-search:focus-within { border-color: var(--accent); }
.store-search span { display: inline-flex; color: var(--text-dim); }
.store-search span svg { width: 15px; height: 15px; }
.store-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-size: 14px; }
/* Categorías de la TIENDA PÚBLICA como TILES (imagen + nombre), igual que el inicio. Filtran el catálogo. */
.store-cats { display: flex; gap: 12px; overflow-x: auto; padding: 10px 16px 4px; scrollbar-width: none; }
.store-cats::-webkit-scrollbar { display: none; }
.store-cat-tile { flex-shrink: 0; width: 26%; max-width: 116px; }
.store-cat-tile .cat-tile-ph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px; }
.store-cat-tile.on .cat-tile-img { outline: 3px solid var(--accent); outline-offset: 2px; }
.store-cat-tile.on .cat-tile-name { color: var(--accent); }
/* "Editar categoría": fila nombre + caja de imagen (recuadro). */
.sec-edit-row { display: flex; gap: 12px; align-items: flex-end; }
.sec-img-box { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 12px; border: 1.5px dashed var(--line);
  background: var(--bg2) center/cover no-repeat; display: grid; place-items: center; color: var(--text-dim); cursor: pointer; }
.sec-img-box.has { border-style: solid; }
.sec-img-rm { width: auto; margin: 8px 0 0; padding: 4px 0; background: none; border: none; color: var(--red); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.card .ph { position: relative; width: 100%; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .16s ease, box-shadow .2s ease; }
.card .ph img { width: 100%; height: 100%; object-fit: contain; padding: 22px; box-sizing: border-box; }
.card .ph.empty { background: var(--panel); color: var(--text-dim); }
@media (hover: hover) { .card:hover { cursor: pointer; } .card:hover .ph { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.4); } }
.card .body { padding: 11px 3px 2px; }
.card .t { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.2px; }
.card .loc { font-size: 11.5px; color: var(--text-dim); margin: 3px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .price { font-size: 17.5px; font-weight: 800; letter-spacing: -.3px; }
.card-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.card-add { width: 34px; height: 34px; border-radius: 11px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 13px rgba(108,140,255,.36); transition: transform .12s ease; }
.card-add:active { transform: scale(.88); }
/* Descuentos: precio original tachado + etiqueta "-X%". */
.price-old { color: var(--text-dim); text-decoration: line-through; font-weight: 600; font-size: .82em; margin-right: 5px; }
.disc-badge { display: inline-block; margin-left: 6px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; vertical-align: middle; letter-spacing: .2px; }
.card .price .disc-badge { font-size: 10px; padding: 1px 5px; margin-left: 4px; }
.price-quote { color: var(--gold); font-weight: 800; }
.card .price .price-old { font-size: .78em; }

/* Detalle de producto */
.detail { padding-bottom: 90px; }
.detail .hero { width: 100%; aspect-ratio: 1; max-height: 430px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 0 0 30px 30px; overflow: hidden; }
.detail .hero img { width: 100%; height: 100%; object-fit: cover; }
.detail .pad { padding: 18px 18px; }
.detail h1 { font-size: 21px; font-weight: 700; letter-spacing: -.5px; line-height: 1.28; margin: 0 0 8px; }
.detail .big-price { font-size: 27px; font-weight: 800; letter-spacing: -.6px; margin: 10px 0 16px; }
.detail .big-price .price-unit { font-size: 16px; font-weight: 600; color: var(--text-dim); }
.meta { color: var(--text-dim); font-size: 14px; line-height: 1.9; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
.stat-row { display: flex; gap: 18px; color: var(--text-dim); font-size: 13.5px; margin: 4px 0 10px; }
.stat-row span { display: flex; align-items: center; gap: 5px; }

/* Floating top buttons */
.floatbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); z-index: 5; }
.floatbar .sp { flex: 1; }
/* Separación entre botones redondos contiguos del header (corazón/compartir/borrar) → no quedan pegados. */
.floatbar .floatbtn + .floatbtn { margin-left: 9px; }
.floatbtn { width: 42px; height: 42px; border-radius: 50%; background: rgba(22,22,28,.42); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px) saturate(1.6); -webkit-backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; color: #fff; margin-left: 9px; transition: background .15s; }
.floatbtn:active { background: rgba(20,20,24,.8); }
.cf-icon { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 2px auto 14px; }
.cf-icon svg { stroke-width: 2.4; }
.cf-msg { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 2px 0 16px; text-align: center; }
/* Botón eliminar dentro del formulario de negocio */
.cb-del { margin-top: 10px; background: transparent; border: 1px solid var(--red); color: var(--red); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cb-del:active { background: rgba(255,91,110,.12); }
.floatbtn.fav-on { background: var(--red); border-color: transparent; }

/* Tienda pública (vista del cliente) — premium */
.store-banner { position: relative; width: 100%; height: 190px; background-size: cover; background-position: center; background-color: #14141a; }
.store-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent 48%); pointer-events: none; }
.store-head { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px; margin-top: -40px; position: relative; z-index: 1; }
.store-logo { width: 82px; height: 82px; border-radius: 20px; border: 3px solid var(--bg); background-size: cover; background-position: center; background-color: var(--panel); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 25px; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.store-info { padding-bottom: 4px; min-width: 0; }
.store-info h1 { margin: 0; font-size: 22px; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-owner { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; background: rgba(108,140,255,.12); border: 1px solid rgba(108,140,255,.26); color: var(--accent); font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px; cursor: pointer; }
.store-owner:active { transform: scale(.96); }
.store-owner svg { color: var(--accent); }
/* Franja de stats de la tienda */
.store-stats { display: flex; gap: 10px; padding: 16px; }
.store-stats .ss { flex: 1; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 16px; padding: 14px 6px; text-align: center; }
.store-stats .ssv { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.store-stats .ssl { font-size: 11px; color: var(--text-dim); margin-top: 2px; font-weight: 600; }
.store-desc { padding: 2px 16px 4px; color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
.store-link { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 14px 0; transition: border-color .15s, background .15s; }
.store-link:active { background: var(--panel); }
.sl-logo { width: 42px; height: 42px; border-radius: 11px; background-size: cover; background-position: center; background-color: var(--panel); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }
.sl-info { flex: 1; min-width: 0; } .sl-name { font-weight: 700; font-size: 15px; } .sl-sub { font-size: 12.5px; color: var(--accent); }

/* Portada de tienda: categorías (foto + nombre) en 2 COLUMNAS → 2ª pantalla con sus productos. */
.store-catbig-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.store-catbig { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border: none; border-radius: 18px; overflow: hidden; background-size: cover; background-position: center; background-color: #14141a; cursor: pointer; padding: 0; transition: transform .12s; }
.store-catbig:active { transform: scale(.98); }
.store-catbig-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,14,.08) 30%, rgba(6,8,14,.84) 100%); }
.store-catbig-tx { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.store-catbig-tx b { font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; }
.store-catbig-tx small { font-size: 12px; font-weight: 600; opacity: .9; }
@media (min-width: 720px) { .store-catbig-list { grid-template-columns: repeat(3, 1fr); } }
/* Productos sueltos (sin categoría) debajo de los rectángulos: MISMAS columnas/gap que las categorías
   → quedan alineados (mismo borde izq/der, mismas columnas). Espacio arriba para separarlos. */
.store-uncat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.store-uncat-grid > .card { content-visibility: auto; contain-intrinsic-size: auto 300px; }
@media (min-width: 720px) { .store-uncat-grid { grid-template-columns: repeat(3, 1fr); } }
.pd-vargroup-low { padding: 0 16px; margin-top: 6px; }
/* Subcategorías con IMAGEN (tile foto + nombre) en la pantalla de categoría de la tienda. */
.subcat-chip { flex: 0 0 auto; background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 76px; }
.subcat-chip-img { width: 64px; height: 64px; border-radius: 15px; overflow: hidden; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.22); transition: outline .1s; }
.subcat-chip-img img { width: 100%; height: 100%; object-fit: cover; }
.subcat-chip-ph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; }
.subcat-chip-n { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.subcat-chip:active .subcat-chip-img { transform: scale(.95); }
.subcat-chip.on .subcat-chip-img { outline: 3px solid var(--accent); outline-offset: 2px; }
.subcat-chip.on .subcat-chip-n { color: var(--accent); }
/* Banner de la 2ª pantalla (foto de la categoría en vez del logo). */
.store-catbanner .store-catbanner-tx { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; color: #fff; }
.store-catbanner-tx h1 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
.store-catbanner-tx .store-meta { color: rgba(255,255,255,.85); margin-top: 3px; }

/* Botones */
.btn { width: 100%; padding: 14px 16px; border-radius: 14px; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; background: var(--green); color: #ffffff; transition: transform .12s ease, opacity .15s ease, background .15s ease; }
.btn:active { opacity: .92; }
.btn.block { display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.btn.accent { background: var(--accent); color: #ffffff; }
.btn:disabled { opacity: .5; }
.btn-pay { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 980px;
  padding: 14px 16px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 30%); z-index: 20; }

/* Formularios / cards */
.sheet { padding: 16px; padding-bottom: 100px; }
.box { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.box h3 { margin: 0 0 12px; font-size: 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 7px; font-weight: 600; letter-spacing: .1px; }
.input { width: 100%; padding: 14px 15px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--text); font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .2s ease, background .15s ease; }
.input::placeholder { color: var(--text-dim); opacity: .7; }
.input:focus { border-color: var(--accent); background: rgba(108,140,255,.05); box-shadow: 0 0 0 3px rgba(108,140,255,.16); }
.input:disabled { opacity: .55; cursor: not-allowed; }
/* Select: chevron propio (appearance:none quita la flecha nativa) */
select.input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
textarea.input { resize: vertical; min-height: 92px; line-height: 1.5; }
.row2 { display: flex; gap: 10px; } .row2 > * { flex: 1; min-width: 0; }
.err { color: var(--red); font-size: 13px; min-height: 16px; margin-top: 4px; text-align: center; }
.vtitle { padding: 6px 4px 10px; font-size: 22px; font-weight: 800; }
/* Botón "Volver" — pill bonito e intuitivo en toda la app. */
.back { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 14px; padding: 9px 15px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; color: var(--text);
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.back:hover { border-color: var(--accent); }
.back:active { background: var(--panel2); transform: scale(.98); }
.back svg { color: var(--text-dim); }

/* Pago: método */
/* Indicador de pasos del checkout (wizard) */
.ck-steps { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px 2px 14px; flex-wrap: wrap; }
.ck-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
.ck-step .ck-num { width: 21px; height: 21px; border-radius: 50%; background: var(--panel2); border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.ck-step.on { color: var(--accent); }
.ck-step.on .ck-num { border-color: var(--accent); color: var(--accent); }
.ck-step.done { color: var(--green); }
.ck-step.done .ck-num { background: var(--green); border-color: var(--green); color: #ffffff; }
.ck-sep { width: 14px; height: 1.5px; background: var(--line); }
.paysel { display: flex; gap: 10px; margin-bottom: 12px; }
.paysel button { flex: 1; padding: 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 13px; }
.paysel button.active { border-color: var(--accent); color: var(--accent); }
.eta-banner { display: flex; align-items: center; gap: 11px; background: rgba(95,184,120,.1); border: 1px solid rgba(95,184,120,.28); border-radius: 12px; padding: 11px 13px; margin-bottom: 12px; color: var(--text); font-size: 14px; line-height: 1.4; }
.eta-banner svg { stroke: var(--green); flex-shrink: 0; }
.eta-banner small { color: var(--text-dim); font-size: 12px; }
.summary { background: var(--panel); border-radius: 12px; padding: 12px 14px; }
.summary .sr { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-dim); font-size: 14px; }
.summary .sr.total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px; font-size: 17px; color: var(--text); font-weight: 800; }

/* Wallet */
.wallet-card { background: linear-gradient(135deg, #2a2f4a, #1a1c28); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin-bottom: 14px; }
.wallet-card .lbl { color: var(--text-dim); font-size: 13px; }
.wallet-card .bal { font-size: 36px; font-weight: 800; margin: 4px 0 14px; }
.wallet-card .bal small { font-size: 16px; color: var(--text-dim); font-weight: 600; }
.held-bal { font-size: 12.5px; color: var(--gold); margin: 2px 0 12px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.held-bal b { color: var(--gold); }
.held-bal span { color: var(--text-dim); font-weight: 400; }

/* ===== Dashboard de Billetera (estilo EFY, en oscuro) ===== */
.wdash { display: flex; flex-direction: column; gap: 14px; }
.wdash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wdash-head--end { justify-content: flex-end; }
.wdash-actions { display: flex; gap: 10px; }
.wbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, transform .1s; }
.wbtn:hover { border-color: var(--accent); }
.wbtn:active { transform: scale(.98); }
.wbtn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.wbtn--solid:hover { background: var(--accent); filter: brightness(1.08); }
.wbtn svg { flex-shrink: 0; }
.wbig { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.wbig-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wbig-lbl { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.wbig-eye { background: none; border: 0; color: var(--text-dim); cursor: pointer; display: inline-flex; padding: 4px; border-radius: 8px; }
.wbig-eye:hover { color: var(--text); background: rgba(255,255,255,.05); }
.wbig-amt { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.wbig-amt #bal-num.wbal-hidden { letter-spacing: 4px; }
.wbig-usd { font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--panel); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; align-self: center; }
.wbig .held-bal { margin: 14px 0 0; }
.wfunds { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; display: flex; flex-direction: row; align-items: center; gap: 16px; }
.wfunds-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(108,140,255,.14); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.wfunds-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wfunds-tx b { font-size: 15px; font-weight: 800; }
.wfunds-tx span { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.wfunds-btns { display: flex; gap: 10px; flex-shrink: 0; }
.wmov { margin-top: 0; }
/* PC: tarjeta (izq, estilo My EFYCards) + saldo y añadir-fondos (der). */
.wdash-main { display: grid; grid-template-columns: 0.95fr 1.5fr; gap: 14px; align-items: stretch; }
.wcardcol { display: flex; flex-direction: column; }
.wcardcol h3 { margin-bottom: 12px; }
.wdash-right { display: flex; flex-direction: column; gap: 14px; }
.wdash-right .wbig { flex: 1; }

/* ===== Página de la tarjeta ===== */
.cp-solo { max-width: 480px; }
.cp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1000px) { .cp-grid { grid-template-columns: 0.95fr 1.5fr; align-items: start; } }
.cp-tx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cp-tx-table { width: 100%; border-collapse: collapse; }
.cp-tx-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 700; padding: 0 10px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cp-tx-table th.r, .cp-tx-table td.r { text-align: right; padding-right: 0; }
.cp-tx-table td { padding: 12px 10px 12px 0; font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.cp-tx-table tbody tr:last-child td { border-bottom: none; }
.cpt-desc { font-weight: 600; color: var(--text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpt-date { color: var(--text-dim); white-space: nowrap; }
.cpt-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--panel); color: var(--text-dim); border: 1px solid var(--line); white-space: nowrap; }
.cpt-badge.ok { background: rgba(95,184,120,.14); color: var(--green); border-color: transparent; }
.cpt-badge.bad { background: rgba(255,91,110,.14); color: var(--red); border-color: transparent; }
.cpt-amt { font-weight: 800; white-space: nowrap; }
.cpt-amt.pos { color: var(--green); }
.cpt-amt.neg { color: var(--text); }

/* ===== Multitarjetas: carrusel VERTICAL (tarjeta grande, swipe arriba = siguiente) ===== */
/* La tarjeta va SUELTA en la billetera (sin caja), junto a los demás. */
.wcardcol { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.cards-vrail { overflow-y: auto; max-height: 256px; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 16px; scrollbar-width: none; padding: 14px 6px; perspective: 1100px; }
.cards-vrail::-webkit-scrollbar { width: 0; height: 0; }
/* Efecto 3D: la tarjeta se inclina un poco hacia atrás con sombra de profundidad; al pasar el cursor se endereza y levanta. */
.card-big { scroll-snap-align: center; flex: 0 0 auto; width: 100%; max-width: 400px; border: 0; cursor: pointer; text-align: left; font: inherit;
  transform: rotateX(7deg) rotateZ(-.5deg); transform-origin: center bottom; transform-style: preserve-3d;
  box-shadow: 0 20px 34px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.38);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.card-big:hover { transform: rotateX(0deg) translateY(-5px) scale(1.012); box-shadow: 0 30px 54px rgba(0,0,0,.58), 0 8px 18px rgba(0,0,0,.4); }
.card-big:active { transform: rotateX(2deg) scale(.99); }
/* ===== Pila de tarjetas estilo Apple Wallet: superpuestas, asoma la cabecera, la de abajo completa ===== */
.cards-stack { width: 100%; max-width: 600px; align-self: center; margin: 0 auto; padding: 14px 0 8px; perspective: 1400px; }
.cards-stack .card-big { display: block; width: 100%; max-width: none !important; transform: none; transform-origin: center top;
  padding-top: 48px;   /* deja sitio para la cabecera, que va FIJA arriba (ver regla .cards-stack .dcard-head) */
  box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset, 0 14px 26px rgba(0,0,0,.46), 0 4px 10px rgba(0,0,0,.34);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, margin .3s ease; position: relative; }
/* Cada tarjeta (menos la primera) sube sobre la anterior dejando ver solo su franja superior (~cabecera). */
.cards-stack .card-big:not(:first-child) { margin-top: -45%; }
/* En la pila: el nivel (Silver/Classic/Elite) + la marca van pegados al borde SUPERIOR de cada tarjeta. */
.cards-stack .dcard-head { position: absolute; top: 13px; left: 18px; right: 18px; z-index: 2; }
.cards-stack .card-big:hover, .cards-stack .card-big:focus-visible { transform: translateY(-8px) scale(1.015); z-index: 30;
  box-shadow: 0 30px 56px rgba(0,0,0,.6), 0 10px 20px rgba(0,0,0,.42); outline: none; }
.cards-stack .card-big:active { transform: translateY(-3px) scale(.995); }
/* La última (abajo) levanta su contenido inferior por encima de las sombras vecinas. */
.cards-stack .card-big:last-child { z-index: 5; }
/* ── Reordenar tarjetas: nunca seleccionar texto ni mostrar el menú "copiar" (long-press) ── */
.cards-stack, .cards-stack * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* touch-action:none = el navegador NO scrollea al mover el dedo sobre una tarjeta, así el
   arrastre (pointer events) recibe el movimiento y no se cancela. El scroll de la página
   sobre las tarjetas lo hacemos a mano en JS (fase previa al "agarre"). */
.cards-stack .card-big { -webkit-tap-highlight-color: transparent; touch-action: none; }
/* ── Modo reordenar (Apple Wallet): la pila NO se despliega; agarras UNA y bloquea el scroll ── */
.cards-stack.sorting { touch-action: none; perspective: none; }   /* touch-action:none = no scroll al arrastrar */
.cards-stack.sorting .card-big { will-change: transform; z-index: 2; }
.cards-stack.sorting .card-big:last-child { z-index: 2; }   /* anular el z-index:5 del :last-child */
/* Anular el "levantar" del hover mientras se reordena (lo controla el JS con transform). */
.cards-stack.sorting .card-big:hover, .cards-stack.sorting .card-big:focus-visible { transform: none; box-shadow: none; }
/* La tarjeta agarrada va POR ENCIMA (como Apple Wallet): siempre visible al subir y bajar, levantada
   con sombra que crece con --lift (0→1, animado por el JS). Las demás abren hueco donde caerá. */
.cards-stack .card-big.dragging, .cards-stack .card-big.dragging:hover { z-index: 60 !important; cursor: grabbing;
  box-shadow: 0 calc(8px + 26px * var(--lift, 1)) calc(16px + 42px * var(--lift, 1)) rgba(0, 0, 0, calc(.34 + .26 * var(--lift, 1))),
              0 4px 12px rgba(0, 0, 0, .4); }
/* Congelar animaciones pesadas (SVG holográfico) mientras se arrastra: menos repintado. */
.cards-stack.sorting .cc-holo, .cards-stack.sorting .idc-holo { animation: none !important; }
/* ===== Multitarjetas: carrusel horizontal (legacy) + mini tarjeta + selector ===== */
.cards-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.cards-rail::-webkit-scrollbar { height: 0; }
.card-mini { scroll-snap-align: start; flex: 0 0 230px; text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #2a2f45, #161821); display: flex; flex-direction: column; gap: 14px; min-height: 132px; transition: transform .12s ease, box-shadow .2s ease; position: relative; }
.card-mini:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.4); }
.card-mini.dcard-visa { background: linear-gradient(135deg, #1a3a6b, #0f1b30); }
.card-mini.susp { opacity: .6; filter: grayscale(.3); }
.card-mini-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; opacity: .92; }
.card-mini-logo { display: inline-flex; align-items: center; gap: 5px; }
.card-mini-num { font-size: 16px; letter-spacing: 2px; font-weight: 600; margin-top: auto; }
.card-mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-mini-foot b { font-size: 16px; }
.card-mini-tag { font-size: 10.5px; font-weight: 700; opacity: .85; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.14); padding: 2px 8px; border-radius: 999px; }
.card-add { scroll-snap-align: start; flex: 0 0 130px; min-height: 132px; cursor: pointer; border: 1.5px dashed var(--line); border-radius: 14px; background: rgba(255,255,255,.02); color: var(--text-dim); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 12.5px; transition: border-color .15s, color .15s; }
.card-add:hover { border-color: var(--accent); color: var(--accent); }
.cards-addbtn { display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 46px; height: 46px; padding: 0; background: var(--bg2); border: 1px dashed var(--line); color: var(--text); border-radius: 13px; cursor: pointer; margin-bottom: 12px; transition: border-color .15s, color .15s, transform .1s; }
.cards-addbtn:hover { border-color: var(--accent); color: var(--accent); }
.cards-addbtn:active { transform: scale(.98); }
.card-mini-hint { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.cards-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cardchip { background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: border-color .15s, color .15s; }
.cardchip:hover { border-color: var(--accent); }
.cardchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cardchip-add { border-style: dashed; }
.wallet-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 400px) { .wallet-actions { grid-template-columns: repeat(2, 1fr); } }
.wallet-actions button { padding: 11px 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.wd-calc { background: var(--bg2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; font-size: 13.5px; color: var(--text-dim); margin: 4px 0 12px; }
/* Tarjeta exclusiva */
.card-visual { background: linear-gradient(135deg, #2a2f45, #161821); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; color: #fff; }
.card-visual.expired { opacity: .6; filter: grayscale(.4); }
.card-visual .cv-brand { font-weight: 800; letter-spacing: 1px; font-size: 15px; opacity: .9; }
.card-visual .cv-num { font-size: 19px; letter-spacing: 2px; margin: 16px 0 8px; font-variant-numeric: tabular-nums; }
.card-visual .cv-st { font-size: 12.5px; color: #b9c0d0; }
.card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.card-acts button { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.card-acts button.go { border-color: var(--green); color: var(--green); }
.card-acts button:disabled { opacity: .5; }
.dcard-frozen { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: 1px; color: #cfe6ff; background: rgba(20,40,70,.45); backdrop-filter: blur(2px); }
/* Tarjeta PREMIUM */
.dcard { position: relative; border-radius: 18px; padding: 18px 18px 16px; color: #fff; aspect-ratio: 1.586; overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.45); isolation: isolate; }
/* Tarjeta de DETALLE (página de tarjeta): alto automático para que el chip grande, el nombre,
   el número y el Vence/CVV quepan con aire, sin recortarse (no fija el aspecto de tarjeta). */
.dcard-detail { aspect-ratio: auto; }
/* En pantallas anchas (PC) la tarjeta no debe verse gigante: tamaño de tarjeta real. */
@media (min-width: 451px) {
  .dcard { max-width: 380px; }
  .card-tiers .dcard, .card-visual { max-width: 380px; }
}
.dcard-mc { background: linear-gradient(135deg, #2b3350 0%, #1b1f30 55%, #0e1018 100%); }
.dcard-visa { background: linear-gradient(135deg, #1a3a6b 0%, #142a4d 55%, #0c1626 100%); }
/* Tarjeta del SALDO Desbloqueados — estilo Apple Cash: NEGRA, candado+nombre arriba izq, saldo arriba der, cúpula de flechas. */
.dcard-balance {
  background: radial-gradient(120% 140% at 50% 122%, #2a2a30 0%, #161619 46%, #0c0c0e 100%);
  color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Tarjeta del CASILLERO (todos la tienen; al tocarla se abre el casillero) — vistosa, multicolor */
.dcard-locker {
  background: linear-gradient(135deg, #10b981 0%, #0d9488 36%, #0e7490 66%, #1e3a8a 100%);
  color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.lkc-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 12% 6%, rgba(52,211,153,.55), transparent 60%),
              radial-gradient(55% 75% at 93% 16%, rgba(56,189,248,.5), transparent 60%),
              radial-gradient(75% 95% at 80% 112%, rgba(129,140,248,.55), transparent 60%); }
/* Resplandor del medio: se mueve LENTO de lado a lado y CAMBIA de color (hue-rotate) */
.lkc-glow { position: absolute; z-index: 1; width: 58%; height: 135%; left: 21%; top: -18%; pointer-events: none;
  background: radial-gradient(circle at center, rgba(120,255,220,.6), rgba(90,200,255,.28) 45%, transparent 72%);
  filter: blur(20px); will-change: transform; animation: lkcGlow 9s ease-in-out infinite; }
/* Perf: se anima SOLO transform (compositor, gratis para GPU). Antes animaba filter:blur+hue-rotate
   en cada frame = re-rasterizado carísimo siempre encendido. El glow sigue moviéndose igual. */
@keyframes lkcGlow {
  0%   { transform: translateX(-45%) translateY(-4%) scale(1); }
  50%  { transform: translateX(45%) translateY(6%) scale(1.15); }
  100% { transform: translateX(-45%) translateY(-4%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .lkc-glow { animation: none; } }
.lkc-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 33%, rgba(255,255,255,.24) 47%, rgba(255,255,255,.05) 52%, transparent 61%); }
.lkc-route { position: absolute; left: -8%; right: -8%; top: 57%; height: 2px; z-index: 1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.6) 1.4px, transparent 1.7px);
  background-size: 12px 2px; background-repeat: repeat-x; transform: rotate(-7deg); opacity: .55; }
.lkc-plane { position: absolute; top: 49%; right: 15%; color: #fff; z-index: 2; transform: rotate(-7deg);
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.4)); }
/* El avión viaja EXACTO sobre la línea de la ruta (mismo ángulo -7° y misma pendiente): recta directa, sin
   arco, velocidad continua y una sola desaceleración suave al aterrizar. Solo la 1ª vez que se ve la tarjeta.
   La pendiente 30/240 ≈ tan(7°) hace que el avión no se salga de la trayectoria punteada. */
.lkc-plane.fly { animation: lkcPlaneFly 2.2s cubic-bezier(.2, .55, .3, 1) both; }
@keyframes lkcPlaneFly {
  0%   { opacity: 0; transform: translate(-240px, 30px) rotate(-7deg); }
  14%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(-7deg); }
}
@media (prefers-reduced-motion: reduce) { .lkc-plane.fly { animation: none; transform: rotate(-7deg); } }
.dcard-locker .dcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; z-index: 3; }
.dcard-locker .cc-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0,0,0,.28); }
.lkc-no { text-align: right; line-height: 1; font-weight: 900; font-size: 25px; letter-spacing: .5px; z-index: 3; text-shadow: 0 1px 5px rgba(0,0,0,.32); }
.lkc-no small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; opacity: .78; margin-bottom: 2px; }
.lkc-foot { position: absolute; left: 18px; right: 18px; bottom: 15px; display: flex; align-items: center; z-index: 3; }
.lkc-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.2); padding: 6px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cc-arrows { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cc-arrows svg { display: block; width: 100%; height: 100%; }
.cc-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px; }
.cc-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; letter-spacing: -.2px; }
.cc-brand .dsbl-logo-img { flex: 0 0 auto; display: block; }
.cc-bal { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En la página (tarjeta grande) el header se agranda un poco. */
.dcard-balance-page .cc-head { padding: 20px 22px; }
.dcard-balance-page .cc-brand { font-size: 22px; }
.dcard-balance-page .cc-bal { font-size: 24px; }
/* Capa holográfica de la TARJETA: cambia de color SOLA, muy lento (sin movimiento). */
.cc-holo { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 8%, rgba(108,140,255,.30) 26%, rgba(176,108,255,.42) 42%, rgba(255,122,182,.42) 56%, rgba(95,224,208,.36) 72%, transparent 92%);
  background-size: 260% 260%; mix-blend-mode: screen; opacity: .7;
  animation: ccHolo 46s ease-in-out infinite; }
@keyframes ccHolo {
  0%   { background-position: 0% 50%;   filter: hue-rotate(0deg); }
  50%  { background-position: 100% 50%; filter: hue-rotate(180deg); }
  100% { background-position: 0% 50%;   filter: hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .cc-holo { animation: none; } }
/* Hoja de acciones de la cuenta (al tocar la tarjeta de saldo) */
.wacct-bal { text-align: center; margin: 2px 0 16px; }
.wacct-bal label { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.wacct-amt { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wacct-amt small { font-size: 13px; font-weight: 600; opacity: .6; margin-left: 4px; }
.wacct-mvh { margin: 18px 0 8px; font-size: 15px; }
.wacct-tx { max-height: 320px; overflow-y: auto; margin: 0 -4px; }
/* Página del SALDO (estilo Apple Account): tarjeta grande + saldo + Agregar dinero + transacciones */
/* Sin barra superior: dejar un respiro arriba para la zona del notch/status bar. */
.bp-sheet { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
.bp-cardwrap { max-width: 600px; margin: 0 auto 18px; }
.bp-cardwrap .card-big { width: 100%; max-width: none; transform: none; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.bp-balrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.bp-bal-lbl { font-size: 13px; color: var(--text-dim); margin-bottom: 2px; }
.bp-bal-amt { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bp-addmoney { background: #fff; color: #111; border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.bp-addmoney-wide { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; margin-bottom: 10px; }
.bp-addmoney:active { opacity: .8; }
/* Cabecera de la página de saldo (móvil): botón atrás (izq) + 3 puntitos (der). */
.bp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; min-height: 38px; }
.bp-back-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.bp-back-btn:active { background: var(--panel); }
.bp-head-acts { display: flex; align-items: center; gap: 8px; }
.bp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.bp-icon-btn:active { background: var(--panel); }
.bp-header .bp-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.bp-header .bp-menu-btn:active { background: var(--panel); }
/* Barra de búsqueda de transacciones (se despliega con la lupa). */
.bp-searchbar { display: flex; align-items: center; gap: 9px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 13px; padding: 0 13px; margin-bottom: 12px; color: var(--text-dim); }
.bp-searchbar[hidden] { display: none; }   /* oculto hasta tocar la lupa (el display:flex pisaba el atributo hidden) */
.bp-searchbar input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font-size: 15px; padding: 12px 0; }
.bp-searchbar input::placeholder { color: var(--text-dim); }
/* Detalle de transacción (depósito/retiro/envío) estilo Apple Cash. */
/* Bloques más estrechos y centrados (no pegados a las paredes), sobre todo en PC. */
.txd { text-align: center; padding: 4px 16px 8px; max-width: 560px; margin: 0 auto; }
/* Bloque de usuario (solo admin, desde Datos): nombre + correo + botón de WhatsApp. */
.txd-user { padding-bottom: 14px; }
.txd-user-info { padding: 2px 15px 0; text-align: left; }
.txd-user-name { font-weight: 700; font-size: 15px; }
.txd-user-email { font-size: 13px; color: var(--text-dim); margin-top: 2px; word-break: break-all; }
.txd-user-phone { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
/* Filas etiquetadas del bloque Usuario (Usuario / Correo / WhatsApp bien colocados). */
.txd-urow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.txd-urow:first-child { border-top: 0; padding-top: 4px; }
.txd-ulbl { flex: 0 0 auto; color: var(--text-dim); font-size: 13px; }
.txd-uval { font-weight: 600; font-size: 13.5px; text-align: right; word-break: break-word; min-width: 0; }
.txd-wa { margin: 12px 15px 0; width: calc(100% - 30px); text-decoration: none; }

/* ── Perfil COMPLETO del usuario (Database → tocar un usuario) ─────────────────── */
.uh-wrap { max-width: 860px; margin: 0 auto; }
.uh-hero { display: flex; align-items: center; gap: 14px; padding: 4px 2px 14px; }
.uh-av { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: #fff; }
.uh-hero-tx { min-width: 0; }
.uh-name { font-size: 20px; font-weight: 800; line-height: 1.15; }
.uh-id { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; font-variant-numeric: tabular-nums; }
.uh-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.uh-wa { text-decoration: none; margin-bottom: 4px; }
.uh-actions { display: flex; gap: 10px; margin-bottom: 10px; }
.uh-actions .uh-act { flex: 1; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
/* En PC el perfil va a 2 columnas tipo "mosaico" (los .box se acomodan). */
.uh-grid { display: block; }
/* En PC este perfil ya vive dentro del layout con nav superior → el botón de volver "<" sobra (es patrón móvil). */
@media (min-width: 1000px) { .uh-topbar { display: none; } }
@media (min-width: 1000px) { .uh-grid { column-count: 2; column-gap: 14px; } .uh-grid > .box { break-inside: avoid; display: inline-block; width: 100%; } }
.uh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.uh-row:first-of-type { border-top: 0; }
.uh-row > span { flex: 0 0 auto; color: var(--text-dim); font-size: 12.5px; }
.uh-row > b { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.uh-tag { font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--panel2, rgba(255,255,255,.06)); padding: 2px 9px; border-radius: 8px; text-transform: capitalize; }
.uh-tag.ok { color: var(--green, #2ecc71); background: rgba(46,204,113,.14); }
.uh-tag.no { color: var(--red, #ff5d5d); background: rgba(255,93,93,.14); }
/* KYC: fotos del carné + selfie */
.uh-kyc-photos { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.uh-kyc-ph { position: relative; width: 90px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.uh-kyc-ph img { width: 100%; height: 66px; object-fit: cover; display: block; }
.uh-kyc-ph span { display: block; font-size: 10.5px; color: var(--text-dim); padding: 3px 0; text-align: center; }
/* Tarjetas */
.uh-card-item { border-top: 1px solid var(--line); padding: 10px 0; }
.uh-card-item:first-of-type { border-top: 0; }
.uh-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uh-card-num { font-size: 13px; color: var(--text-dim); margin: 3px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
/* Negocios */
.uh-biz { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.uh-biz:first-of-type { border-top: 0; }
.uh-biz-logo { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; overflow: hidden; background: var(--panel2, rgba(255,255,255,.06)); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.uh-biz-logo img { width: 100%; height: 100%; object-fit: cover; }
.uh-biz-tx { min-width: 0; display: flex; flex-direction: column; }
.uh-biz-tx b { font-size: 14px; font-weight: 700; }
.uh-biz-tx span { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
/* KYB */
.uh-kyb { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.uh-kyb:first-of-type { margin-top: 2px; }
.uh-kyb-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
/* IPs */
.uh-ip { padding: 9px 0; border-top: 1px solid var(--line); }
.uh-ip:first-of-type { border-top: 0; }
.uh-ip-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.uh-ip-top b { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.uh-ip-top span { font-size: 11.5px; color: var(--text-dim); }
.uh-ip-ua { font-size: 11px; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; opacity: .8; }
.txd-amt { font-size: 40px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.txd-amt.pos { color: var(--green); }
.txd-amt.neg { color: var(--text); }
.txd-type { margin-top: 8px; font-size: 15px; color: var(--text); font-weight: 600; }
.txd-date { margin-top: 2px; font-size: 13px; color: var(--text-dim); }
.txd-card { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; margin-top: 18px; overflow: hidden; }
.txd-card-h { padding: 13px 15px; font-size: 14px; }
.txd-card-h b { font-weight: 700; }
.txd-card-sub { padding: 0 15px 12px; font-size: 12.5px; color: var(--text-dim); margin-top: -2px; }
.txd-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 15px; font-size: 14px; border-top: 1px solid var(--line); }
.txd-line span { color: var(--text-dim); }
.txd-line b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.txd-line.txd-total b { font-weight: 800; }
.txd-line.txd-party b { font-weight: 800; color: var(--text); text-align: right; max-width: 65%; overflow-wrap: anywhere; }
.txd-id { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; padding: 12px 15px; }
.txd-id span { font-size: 12px; color: var(--text-dim); }
.txd-id-v { font-size: 14px; font-variant-numeric: tabular-nums; word-break: break-all; margin-top: 2px; }
/* Página del COMERCIO (estilo Apple Card): hero de color + logo + historial. */
.mch-hero { position: relative; min-height: 240px; background: var(--mch, #6c5ce7);
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 22px 20px; display: flex; flex-direction: column; justify-content: space-between; }
.mch-back { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.3) !important; color: #fff !important; }
.mch-hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.mch-logo { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 18px; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: #fff; }
.mch-titles { text-align: right; color: #fff; min-width: 0; }
.mch-cat { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; opacity: .9; }
.mch-name { font-size: 30px; font-weight: 800; line-height: 1.08; word-break: break-word; }
.mch-body { padding: 18px 16px 28px; }
.mch-h { font-size: 21px; font-weight: 800; margin: 22px 0 12px; }
.mch-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.mch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; }
.mch-list .mch-row + .mch-row { border-top: 1px solid var(--line); }
.mch-row-l { min-width: 0; }
.mch-day { font-size: 16px; font-weight: 700; }
.mch-st { font-size: 13.5px; color: var(--text-dim); margin-top: 2px; }
.mch-st.bad { color: var(--red); }
.mch-row-r { display: flex; align-items: center; gap: 6px; color: var(--text-dim); white-space: nowrap; }
.mch-amt { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mch-amt.struck { text-decoration: line-through; color: var(--text-dim); font-weight: 600; }
/* Tarjeta de "Retenido en pedidos": acento ámbar, ícono, monto y nota — más intuitiva. */
.held-card { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 15px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,180,60,.13), rgba(245,180,60,.04)); border: 1px solid rgba(245,180,60,.3); }
.held-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(245,180,60,.18); color: #f5b43c; }
.held-tx { flex: 1; min-width: 0; }
.held-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.held-top b { font-size: 17px; color: #f5b43c; font-variant-numeric: tabular-nums; }
.held-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
.bp-acts { display: flex; gap: 8px; margin: 12px 0 4px; }
.bp-acts button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; padding: 12px 6px; color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bp-acts button:active { background: var(--panel); }
.bp-mvh { margin: 20px 0 8px; font-size: 16px; }
/* Página de tarjeta de banco en MÓVIL: misma estética que el saldo Desbloqueados (Apple Wallet).
   Reusa renderActiveCard pero oculta el título y los botones inline (las acciones van al menú de 3 puntos). */
.cardpg #card-box > h3 { display: none; }
.cardpg .card-acts { display: none; }
.cardpg .dcard .dc-eye { display: none; }   /* el ojo vive en el encabezado (junto a la lupa) */
.cardpg .dcard { width: 100%; max-width: none; }
.cardpg #cp-tx { margin-top: 2px; }
.cardpg .cp-txhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cardpg .cp-txhead .bp-mvh { margin: 18px 0 6px; }
.cardpg .cp-txtools { display: flex; align-items: center; gap: 6px; }
.cardpg .cp-txtools .bp-icon-btn { width: 36px; height: 36px; }
.cardpg #cp-refresh.spin svg { animation: cp-spin .5s linear; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
/* Fila de saldo + "Agregar dinero" idéntica a la tarjeta Desbloqueados (bp-balrow + bp-addmoney). */
.cardpg .dcard-bal { margin-top: 16px; border-radius: 16px; padding: 14px 16px; }
.cardpg .dcard-bal-l b, .cardpg .dcard-bal b { color: var(--text); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cardpg .dcard-bal-add { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #111;
  border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cardpg .dcard-bal-add:active { opacity: .8; }
.cardpg .dcard-bal-add:disabled { opacity: .5; cursor: default; }
.dcard.susp { filter: grayscale(.5) brightness(.85); }
.dcard-sheen { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.12), transparent 50%),
  radial-gradient(80% 60% at 100% 100%, rgba(95,184,120,.18), transparent 55%); }
.dcard-head { display: flex; justify-content: space-between; align-items: center; }
.dcard-logo { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.dcard-net { height: 30px; display: flex; align-items: center; }
.brand-mc { position: relative; display: inline-flex; width: 46px; height: 30px; }
.brand-mc i { position: absolute; top: 0; width: 30px; height: 30px; border-radius: 50%; }
.brand-mc i:first-child { left: 0; background: #eb001b; }
.brand-mc i:last-child { right: 0; background: #f79e1b; mix-blend-mode: hard-light; }
.brand-visa { font-style: italic; font-weight: 800; font-size: 24px; letter-spacing: 1px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.dcard-chip { width: 48px; height: 36px; border-radius: 8px; margin: 16px 0 20px;
  background: linear-gradient(135deg, #e6c878, #b48f3e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); position: relative; }
.dcard-chip::after { content: ""; position: absolute; inset: 6px 8px; border: 1px solid rgba(0,0,0,.25); border-radius: 3px; }
.dcard-num { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 19px; letter-spacing: 2.5px; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.dc-eye { color: #fff; opacity: .85; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.dc-eye:active { background: rgba(255,255,255,.15); }
.dcard-foot { display: flex; gap: 18px; }
.dcard-f label { display: block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.dcard-f div { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Disposición reordenada: nombre del titular al CENTRO; número abajo y Vence/CVV bajo el número (izq). */
.dcard-mid-name { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 16px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-top: 4px; margin-bottom: 14px; }
.dcard-foot-stack { flex-direction: column; align-items: flex-start; gap: 9px; }
.dcard-foot-row { display: flex; gap: 18px; }
.dcard-f-num { margin-bottom: 0; }
.dcard-f-num div { font-size: 16px; letter-spacing: 2px; }
.dcard-bal { display: flex; justify-content: space-between; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 14px; }
.dcard-bal b { font-size: 18px; color: var(--green); }
/* Fila de saldo estilo Apple Account: "Saldo" + monto grande a la izquierda, pill blanco a la derecha. */
.dcard-bal-l { display: flex; flex-direction: column; gap: 2px; }
.dcard-bal-l span { color: var(--text-dim); font-size: 13px; }
.dcard-bal-add { display: none; }   /* en móvil se usa el botón "Recargar" de card-acts */
@media (min-width: 1000px) {
  .dcard-bal { padding: 10px 16px; }
  .dcard-bal-l { gap: 0; }
  .dcard-bal-l span { font-size: 13px; }
  .dcard-bal-l b { font-size: 21px; }
  .dcard-bal-add { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #0d0d12;
    border: none; border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.25); transition: transform .12s ease, box-shadow .12s ease; }
  .dcard-bal-add:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0,0,0,.32); }
  .dcard-bal-add:active { transform: translateY(0); }
  .dcard-bal-add svg { stroke: #0d0d12; }
  .dcard-bal-add:disabled { opacity: .5; cursor: default; box-shadow: none; }
}
.card-mini { font-size: 12px; color: var(--text-dim); margin-top: 8px; text-align: center; }
.dcard .copyable { cursor: pointer; position: relative; }
.dcard .copyable:active { opacity: .6; }
.dcard-num .copyable, .dcard-f .copyable { text-decoration: underline dotted rgba(255,255,255,.4); text-underline-offset: 3px; }
.tx-group { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); margin: 14px 2px 6px; }
.tx-group:first-child { margin-top: 2px; }
/* Aviso para activar notificaciones */
.notif-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 980px; z-index: 48;
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--panel2); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: nbIn .32s cubic-bezier(.22,.61,.36,1); }
@keyframes nbIn { from { transform: translateX(-50%) translateY(-100%); } to { transform: translateX(-50%) translateY(0); } }
.notif-banner .nb-ico { color: var(--accent); flex-shrink: 0; display: flex; }
.notif-banner .nb-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--text); line-height: 1.35; }
.notif-banner .nb-go { flex-shrink: 0; padding: 9px 15px; border-radius: 10px; background: var(--green); color: #ffffff; font-weight: 800; font-size: 13px; }
.notif-banner .nb-x { flex-shrink: 0; color: var(--text-dim); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.card-warn { font-size: 12.5px; color: var(--gold); margin-top: 8px; text-align: center; }
.reveal-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.reveal-row span { color: var(--text-dim); font-size: 13.5px; }
.reveal-row b { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
/* Selector de productos de tarjeta */
.card-tiers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tier { text-align: left; padding: 13px 14px; border-radius: 13px; background: var(--bg2); border: 1.5px solid var(--line); color: var(--text); }
.tier.active { border-color: var(--green); background: var(--panel2); }
.tier-top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.tier-top span { font-weight: 800; color: var(--green); }
.tier-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.acct-row { display: flex; gap: 8px; align-items: center; }
.acct-row .input { flex: 1; }
.tx { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tx .ti { width: 38px; height: 38px; border-radius: 10px; background: var(--panel); display: flex; align-items: center; justify-content: center; color: var(--text-dim); flex-shrink: 0; }
.tx .tb { flex: 1; min-width: 0; } .tx .tt { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tx .ts { font-size: 12px; color: var(--text-dim); }
.tx .ta { font-weight: 800; font-size: 15px; flex-shrink: 0; }
.tx .ta.pos { color: var(--green); } .tx .ta.neg { color: var(--text); }

/* Listas (monedas, pedidos) */
.lrow { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; }
.lrow .li { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex-shrink: 0; font-size: 12px; }
.coin-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; }
.coin-logo svg { width: 100%; height: 100%; display: block; }
/* Filas de la tienda cripto: un poco más premium */
.crypto-row { background: linear-gradient(180deg, #141b2b 0%, var(--bg2) 100%); }
.lrow .lb { flex: 1; min-width: 0; } .lrow .lt { font-weight: 700; font-size: 15px; }
.lrow .ls { font-size: 12.5px; color: var(--text-dim); }
.lrow .lp { font-weight: 800; font-size: 16px; }
/* ── Tus Negocios — rediseño premium (mini-dashboard) ───────────────────────── */
.biz-wrap { padding-bottom: 96px; }
/* Resumen global del dueño */
.biz-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 18px; }
.biz-sum-it { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 16px; padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.biz-sum-n { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.4px; white-space: nowrap; }
.biz-sum-money .biz-sum-n { color: var(--green); font-size: 16px; }
.biz-sum-l { font-size: 10.5px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
/* Rejilla de negocios */
.biz-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
/* Tile crear negocio */
.biz-new { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(108,140,255,.16), rgba(108,140,255,.035)); border: 1.5px dashed rgba(108,140,255,.45); color: var(--text); cursor: pointer; transition: transform .12s ease, border-color .15s; }
.biz-new:active { transform: scale(.99); }
.biz-new-ic { width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 20px rgba(108,140,255,.4); }
.biz-new-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; font-weight: 800; font-size: 15.5px; letter-spacing: -.2px; }
.biz-new-tx small { font-weight: 500; font-size: 12.5px; color: var(--text-dim); }
.biz-new-arr { color: var(--accent); flex-shrink: 0; transform: rotate(180deg); display: flex; }
/* Tarjeta de negocio */
.biz-card { display: block; width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; cursor: pointer; text-align: left; position: relative; padding: 0; transition: transform .12s ease, border-color .15s, box-shadow .2s ease; }
.biz-card:active { transform: scale(.99); }
.biz-cover { height: 100px; background-size: cover; background-position: center; position: relative; }
.biz-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.34), transparent 60%); }
.biz-body { padding: 13px 16px 16px; }
/* Logo + nombre en una FILA limpia (el nombre AL LADO del logo, no debajo). */
.biz-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.biz-logo { position: static; width: 46px; height: 46px; border-radius: 13px; background-size: cover; background-position: center; border: none; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.28); flex-shrink: 0; }
.biz-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.3px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-special { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #0a0e1f; background: linear-gradient(90deg,#ffd76a,#ffb020); padding: 2px 7px; border-radius: 999px; vertical-align: middle; text-transform: uppercase; }
.biz-stats { display: flex; align-items: center; gap: 14px; }
.biz-stats > span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.biz-stats svg { color: var(--accent); }
.biz-stat-money { margin-left: auto; color: var(--green) !important; font-weight: 800 !important; font-size: 14.5px !important; }
.biz-stat-money.zero { color: var(--text-dim) !important; font-weight: 700 !important; }
.biz-go { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.32); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; z-index: 2; }
.biz-go svg { transform: rotate(180deg); }

/* ═══ Dashboard de Negocios (estilo pro) ═══ */
.bdash-title { display: none; }
/* Bloque superior: 3 métricas + tarjeta UNIFICADA Ganancia/gráfica + "Crear negocio". */
.bdash-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.bdash-top .biz-new { grid-column: 1 / -1; margin: 0; }
.bdash-ganchart { grid-column: 1 / -1; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid rgba(232,184,75,.4); border-radius: 18px; padding: 15px 17px; box-shadow: 0 0 0 1px rgba(232,184,75,.1), 0 8px 22px rgba(232,184,75,.09); }
.bgc-top { display: flex; align-items: center; gap: 10px; }
.bgc-info { flex: 1; min-width: 0; }
.bgc-n { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: #f0c14b; line-height: 1.1; }
.bgc-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); font-weight: 700; margin-top: 4px; }
.bgc-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(232,184,75,.18); color: #e8b84b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bgc-chart { flex: 1; display: flex; min-height: 70px; margin-top: 10px; }
.bgc-chart .bspark { width: 100%; flex: 1; min-height: 70px; }
.bdash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bstat { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.bstat-main { flex: 1; min-width: 0; }
.bstat-n { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text); line-height: 1.1; }
.bstat-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); font-weight: 700; margin-top: 4px; }
.bstat-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bstat.b-neg { border-color: rgba(108,140,255,.4); box-shadow: 0 0 0 1px rgba(108,140,255,.1), 0 8px 22px rgba(108,140,255,.08); }
.bstat.b-neg .bstat-ic { background: rgba(108,140,255,.16); color: #6c8cff; }
.bstat.b-prod { border-color: rgba(95,184,120,.4); box-shadow: 0 0 0 1px rgba(95,184,120,.1), 0 8px 22px rgba(95,184,120,.08); }
.bstat.b-prod .bstat-ic { background: rgba(95,184,120,.16); color: #5fb878; }
.bstat.b-vent { border-color: rgba(240,136,62,.4); box-shadow: 0 0 0 1px rgba(240,136,62,.1), 0 8px 22px rgba(240,136,62,.08); }
.bstat.b-vent .bstat-ic { background: rgba(240,136,62,.16); color: #f0883e; }
.bstat.b-gan { border-color: rgba(232,184,75,.45); box-shadow: 0 0 0 1px rgba(232,184,75,.13), 0 8px 22px rgba(232,184,75,.1); }
.bstat.b-gan .bstat-n { color: #f0c14b; }
.bstat.b-gan .bstat-ic { background: rgba(232,184,75,.18); color: #e8b84b; }

.bdash-cta { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.bdash-chart { background: var(--bg2); border: 1px solid rgba(232,184,75,.28); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; min-height: 116px; }
.bdash-chart-h { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; }
.bdash-chart-h b { color: #f0c14b; font-size: 15px; }
.bspark { width: 100%; flex: 1; min-height: 58px; display: block; }
.bdash-chart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-dim); font-size: 12px; }
.bdash-chart-empty svg { color: var(--gold); opacity: .8; }

.biz-ghost { display: none; flex-direction: column; align-items: center; text-align: center; gap: 3px; justify-content: center; padding: 18px; min-height: 150px; background: rgba(255,255,255,.015); border: 1.5px dashed var(--line); border-radius: 20px; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.biz-ghost:hover { border-color: rgba(108,140,255,.5); background: rgba(108,140,255,.045); transform: translateY(-2px); }
.biz-ghost-ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; color: var(--text-dim); margin-bottom: 8px; }
.biz-ghost-t { font-size: 15px; font-weight: 800; color: var(--text); }
.biz-ghost-s { font-size: 12.5px; color: var(--text-dim); }
.b-oppo .biz-ghost-ic { background: rgba(232,184,75,.14); color: var(--gold); }

.biz-recos { display: none; }
/* Estado vacío */
.biz-empty { text-align: center; color: var(--text-dim); padding: 18px 20px 6px; }
.biz-empty svg { color: var(--accent); opacity: .8; margin-bottom: 10px; }
.biz-empty p { font-size: 13.5px; line-height: 1.55; max-width: 320px; margin: 0 auto; }
/* Acceso a Servicios presenciales */
.biz-svc-link { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; color: var(--text); font-weight: 600; font-size: 14.5px; cursor: pointer; }
.biz-svc-link > span { flex: 1; text-align: left; }
.biz-svc-link svg:first-of-type { color: var(--accent); }
.biz-svc-link svg:last-of-type { color: var(--text-dim); }
.biz-svc-link:active { transform: scale(.99); background: var(--bg2); }
@media (min-width: 900px) {
  .biz-grid { grid-template-columns: 1fr 1fr; }
  .biz-new { grid-column: 1 / -1; }
}
@media (hover: hover) {
  .biz-card:hover { border-color: rgba(108,140,255,.5); box-shadow: 0 10px 28px rgba(0,0,0,.28); transform: translateY(-2px); }
  .biz-new:hover { border-color: var(--accent); }
}

/* ── Detalle de negocio — header premium ────────────────────────────────────── */
.bd-hero { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-bottom: 14px; }
.bd-cover { display: block; position: relative; height: 150px; background-size: cover; background-position: center; background-color: #14141a; cursor: pointer; }
.bd-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.42), transparent 52%); }
.bd-hero .floatbar { top: 0; padding: 12px; }
.bd-hero .floatbtn { width: 38px; height: 38px; }
.bd-hero .cb-cam-cover { top: auto; bottom: 12px; right: 12px; }   /* la cám de portada baja para no chocar con los glass de arriba */
/* Logo + nombre en una FILA debajo de la portada (el nombre AL LADO del logo, no debajo). */
.bd-hero-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px 14px; margin-top: -28px; position: relative; z-index: 3; }
.bd-logo { flex-shrink: 0; width: 74px; height: 74px; border-radius: 19px; border: 3px solid var(--bg2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.4); cursor: pointer; position: relative; }
.bd-logo .cb-cam-logo { right: -4px; bottom: -4px; }
.bd-hero-info { flex: 1; min-width: 0; padding: 0; display: flex; align-items: center; cursor: pointer; }
.bd-hero-name { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--text); display: flex; align-items: center; gap: 7px; }
.bd-hero-name .bd-name-edit { color: var(--text-dim); display: inline-flex; flex-shrink: 0; }
.bd-hero-sub { display: flex; align-items: center; gap: 14px; margin-top: 7px; }
.bd-hero-sub > span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.bd-hero-sub svg { color: var(--accent); }
.bd-hero-sub .money { color: var(--green); font-weight: 800; margin-left: auto; }
/* Tabs — control segmentado */
.bd-tabs { display: flex; gap: 5px; margin-bottom: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 15px; padding: 5px; }
.bd-tab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 11px; background: none; color: var(--text-dim); font-size: 10.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, transform .12s; }
/* Badge de pedidos pendientes en la pestaña Pedidos del panel de tienda */
.bd-tab-badge { position: absolute; top: 2px; right: calc(50% - 26px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
/* Pill de "por atender" en la tarjeta de tienda */
.biz-pending { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
/* Ojito para ocultar/mostrar la tienda del marketplace (solo el dueño) */
.biz-eye { position: absolute; top: 12px; right: 50px; width: 30px; height: 30px; border-radius: 50%; z-index: 3;
  background: rgba(0,0,0,.42); backdrop-filter: blur(6px); border: none; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; transition: transform .12s, background .15s; }
.biz-eye:active { transform: scale(.88); }
.biz-eye:hover { background: rgba(0,0,0,.6); }
.biz-eye.off { background: var(--accent); color: #fff; }
.biz-card.biz-paused { opacity: .62; }
.biz-card.biz-paused .biz-cover { filter: grayscale(.75) brightness(.7); }
.biz-hidden-tag { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.bd-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-tab:active { transform: scale(.94); }
.bd-tab.active { background: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff; box-shadow: 0 5px 14px rgba(108,140,255,.34); }
/* Dentro del negocio (móvil): las pestañas Estadísticas/Productos/Pedidos/Clientes van FIJAS ABAJO,
   reemplazando la barra normal del marketplace. */
@media (max-width: 999px) {
  /* Barra del negocio = MISMO cristal líquido que la barra principal (#tabbar): flotante, translúcida, blur. */
  .bizmanage .bd-tabs { position: fixed; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60; margin: 0;
    border-radius: 28px; padding: 7px 6px;
    background: rgba(30,30,38,.52); backdrop-filter: blur(12px) saturate(1.9); -webkit-backdrop-filter: blur(12px) saturate(1.9);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05); }
  .bizmanage #bd-tabbody { padding-bottom: 120px; }
  /* Barra de referencia (diseño del jefe): círculo AZUL de la pestaña activa a la izquierda + píldora GRIS de cristal con el resto. */
  .bizmanage .bd-tabs.bd-tabs-ref { left: 16px; right: 16px; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0; display: flex !important; align-items: center; gap: 12px; }
  .bd-t-active { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 10px 26px rgba(108,140,255,.55); transition: transform .12s ease; }
  .bd-t-active:active { transform: scale(.92); }
  .bd-t-pill { flex: 1; height: 58px; display: flex; align-items: center; justify-content: space-around; border-radius: 999px; background: rgba(44,44,54,.62); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  .bd-t-ic { flex: 1; height: 100%; background: none; border: none; color: rgba(255,255,255,.72); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: transform .12s ease, color .12s; }
  .bd-t-ic:active { transform: scale(.88); }
}
@media (hover:hover) { .bd-t-ic:hover { color: #fff; } }
/* Menú de tienda para PC: fila superior con ETIQUETAS (Actividad/Productos/Orden/Pedidos/Ajustes).
   Oculto en móvil (ahí manda la barra de cristal de abajo). */
.bd-tabs-pc { display: none; }
/* La barra lateral de la tienda solo existe en PC (en móvil manda la barra flotante de abajo). */
.bd-side { display: none; }
@media (min-width: 1000px) {
  .bizmanage .bd-tabs.bd-tabs-ref { display: none !important; }   /* en PC no va la barra de abajo */
  /* El panel de tienda (Actividad · Productos · Orden · Pedidos · Ajustes) ya tiene sus
     propias pestañas → ocultamos la barra de menú superior de PC y quitamos su respiro. */
  body:has(.bizmanage) #pc-topnav { display: none !important; }
  body:has(.bizmanage) #app { padding-top: 12px !important; }
  /* Database (panel admin): el menú superior de PC son enlaces de CLIENTE (Productos, Tiendas,
     Gana…) que aquí no hacen falta. Se oculta y se recupera su espacio: el tablero arranca
     pegado arriba. La salida se hace con el botón "Inicio" propio de la barra de la database. */
  body:has(.db-view) #pc-topnav { display: none !important; }
  body:has(.db-view) #app { padding-top: 0 !important; }
  /* El aviso "Activa las notificaciones" (fijo arriba) en PC siempre quedaba tapado por el menú;
     sin menú aquí, solapaba el toolbar → lo ocultamos en la database (sigue saliendo en móvil). */
  body:has(.db-view) .notif-banner { display: none !important; }
  /* En el panel de tienda NO hay barra superior de PC → recortar el espacio de arriba para
     que el menú (Inicio/Productos/Orden/Pedidos) suba y no quede tanto aire vacío. */
  .bizmanage .sheet { padding-top: 8px; }
  .bizmanage .bd-head2 { padding-top: 6px; padding-bottom: 10px; }
  /* El menú (pestañas) sube a la MISMA fila del botón atrás → sin márgenes de bloque. */
  .bd-tabs-pc { display: flex; gap: 6px; margin: 0; padding: 5px;
    background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; }
  .bd-pc-tab { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 11px; background: none; border: none; color: var(--text-dim);
    font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
  .bd-pc-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
  .bd-pc-tab.on { background: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff; box-shadow: 0 5px 14px rgba(108,140,255,.34); }
  .bd-pc-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff;
    font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
  /* Cabecera en una sola fila: atrás · menú · (Total) · nombre de la tienda (pegado a la derecha). */
  .bd-head2 { padding: 6px 4px 10px; gap: 14px; flex: 0 0 auto; }
  .bd-head-title { display: none; }                  /* los títulos grandes ya están en el menú lateral */
  .bd-head2.bd-head-hide { display: none; }          /* páginas sin cabecera (Inicio/Pedidos/…): sin aire arriba */
  /* Buscador de productos: ocupa el lugar donde antes iba el título "Productos". */
  .bd-head-search { flex: 1; display: flex; min-width: 0; }
  .bd-search { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 460px; padding: 10px 14px;
    background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 13px; color: var(--text-dim);
    transition: border-color .15s, box-shadow .15s; }
  .bd-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,140,255,.15); }
  .bd-search svg { flex: 0 0 auto; }
  .bd-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-size: 14.5px; }
  .bd-main .bd-head-back { display: none; }          /* el "atrás" vive ahora en la barra lateral */
  .bd-head-store { display: none; }                  /* el nombre de la tienda ya está en la barra lateral */
  .bd-head-right { white-space: nowrap; }
  /* Pestaña "Orden": el sub-menú (Categorías/Sub/Variantes) sube a la MISMA fila del menú
     principal, compacto y pegado a la derecha. El nombre de la tienda se oculta en esa fila. */
  .bd-head-right .org-seg { margin: 0 0 0 12px; padding: 4px; gap: 4px; width: auto; }
  .bd-head-right .org-seg-b { flex: 0 0 auto; font-size: 11px; padding: 8px 13px; }
  .bd-head2.bd-head-org .bd-head-right { margin-left: auto; }
  .bd-head2.bd-head-org .bd-head-store { display: none; }
  /* Página de Inicio (Actividad + Ajustes juntos): separada de los bordes, en 2 columnas. */
  .bizmanage #bd-tabbody.bd-tb-inicio { padding-left: 22px; padding-right: 22px; }
  .bd-inicio { max-width: 1160px; margin: 0; padding: 4px 0 0;
    display: grid; grid-template-columns: 1fr minmax(320px, 380px); gap: 26px; align-items: start; }
  .bd-inicio-side { position: sticky; top: 20px; }
  .bd-inicio-solo { max-width: none; padding: 4px 0 0; }
  /* ── Barra lateral de la tienda (estilo Shopify) — reemplaza el menú superior en PC ──
     El panel se ancla al alto de la pantalla: la barra lateral queda FIJA (terminando un poco
     por encima del borde inferior) y lo que escrolea es el contenido/la tabla, no la página. */
  .bizmanage .sheet { padding-bottom: 0; }
  .view.bizmanage { min-height: 0; }   /* que la página no escrolee: manda el scroll interno de la columna */
  .bizmanage .bd-shell { display: flex; align-items: stretch; gap: 24px; height: calc(100dvh - 40px); overflow: hidden; }
  .bd-side { display: flex; flex-direction: column; gap: 3px; flex: 0 0 216px; width: 216px;
    align-self: stretch; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 18px; padding: 12px 10px; }
  .bd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  /* Contenido de cada pestaña: escrolea dentro de su columna (la barra lateral se queda quieta). */
  .bizmanage #bd-tabbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* Productos: el botón "Agregar producto" queda fijo arriba y SOLO la tabla escrolea. */
  .bizmanage #bd-tabbody.bd-tb-prod { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
  .bd-tb-prod .prodtbl-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: auto; margin-top: 2px; }
  .bd-tb-prod .prodtbl thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
  .bd-head-right #prod-add { width: auto; white-space: nowrap; }
  .bd-side-back { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; margin-bottom: 2px;
    background: none; border: none; color: var(--text-dim); font-size: 13px; font-weight: 700; cursor: pointer;
    border-radius: 10px; transition: color .15s, background .15s; }
  .bd-side-back:hover { color: var(--text); background: rgba(255,255,255,.05); }
  .bd-side-store { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line); }
  .bd-side-logo { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }
  .bd-side-name { font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bd-side-nav { display: flex; flex-direction: column; gap: 3px; }
  .bd-side-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
    background: none; border: none; border-radius: 11px; color: var(--text-dim); font-size: 14.5px; font-weight: 700;
    cursor: pointer; text-align: left; transition: background .15s, color .15s; }
  .bd-side-item svg { flex: 0 0 auto; }
  .bd-side-item:hover { color: var(--text); background: rgba(255,255,255,.05); }
  .bd-side-item.on { background: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff; box-shadow: 0 5px 14px rgba(108,140,255,.34); }
  .bd-side-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff;
    font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
  .bd-side-item.on .bd-side-badge { background: rgba(255,255,255,.28); }
  /* ── "Organización" como desplegable (estilo Shopify) dentro de la barra lateral ── */
  .bd-side-group { display: flex; flex-direction: column; }
  .bd-side-parent .bd-side-caret { margin-left: auto; display: inline-flex; opacity: .75; transition: transform .2s ease; }
  .bd-side-group.open .bd-side-parent .bd-side-caret { transform: rotate(180deg); }
  .bd-side-subs { display: none; flex-direction: column; gap: 2px; margin: 3px 0 4px; }
  .bd-side-group.open .bd-side-subs { display: flex; }
  .bd-side-sub { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px 9px 30px;
    background: none; border: none; border-radius: 10px; color: var(--text-dim); font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-align: left; transition: background .15s, color .15s; }
  .bd-side-sub:hover { color: var(--text); background: rgba(255,255,255,.05); }
  .bd-side-sub-arrow { flex: 0 0 auto; display: inline-flex; color: var(--accent); opacity: 0; transform: translateX(-5px); transition: opacity .16s, transform .16s; }
  .bd-side-sub.on { color: var(--text); font-weight: 800; }
  .bd-side-sub.on .bd-side-sub-arrow { opacity: 1; transform: translateX(0); }
  /* Ajustes (PC): más ancho (aprovecha la columna, no queda tan separado a la derecha) y
     el primer bloque (portada + logo) más grande. */
  .bizmanage #bd-tabbody.bd-tb-ajustes { max-width: none; margin-inline: 0; padding-left: 22px; padding-right: 22px; }
  .bd-tb-ajustes .aj-cover { height: 268px; }
  .bd-tb-ajustes .aj-body { margin-top: -42px; padding: 0 20px 20px; }
  .bd-tb-ajustes .aj-logo { width: 92px; height: 92px; border-radius: 24px; font-size: 30px; }
}
/* ── Vista TABLA de productos (panel de tienda, solo PC) ── */
.prodtbl-top { display: flex; justify-content: flex-end; margin: 2px 0 14px; }
.prodtbl-top .btn { width: auto; }
.prodtbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.02); }
.prodtbl { width: 100%; border-collapse: collapse; }
.prodtbl thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
  font-weight: 800; padding: 13px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.prodtbl thead th.pt-img { width: 56px; }
.prodtbl thead th.pt-act { width: 52px; }
/* Conteo de productos en la cabecera de la tabla (antes iba arriba del botón "Agregar producto"). */
.pt-count { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(108,140,255,.14);
  color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: none; vertical-align: middle; }
.prodtbl-row { cursor: pointer; transition: background .12s; }
.prodtbl-row:hover { background: rgba(255,255,255,.04); }
.prodtbl-row.prod-hidden { opacity: .6; }
.prodtbl tbody td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; font-size: 14px; }
.prodtbl tbody tr:last-child td { border-bottom: none; }
.pt-thumb { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px;
  overflow: hidden; background: rgba(255,255,255,.05); color: var(--text-dim); }
.pt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pt-title { font-weight: 700; color: var(--text); display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-price { font-weight: 800; white-space: nowrap; }
.pt-cats { max-width: 260px; }
.pt-chip { display: inline-block; padding: 3px 9px; margin: 2px 4px 2px 0; border-radius: 999px; background: rgba(108,140,255,.12);
  color: var(--accent); font-size: 12px; font-weight: 700; }
.pt-dim { color: var(--text-dim); }
.pt-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.pt-badge.ok { background: rgba(52,199,120,.14); color: #34c778; }
.pt-badge.rev { background: rgba(231,177,58,.16); color: #e7b13a; }
.pt-badge.hid { background: rgba(255,255,255,.08); color: var(--text-dim); }
.pt-dup { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, color .12s; }
.pt-dup:hover { background: rgba(255,255,255,.1); color: var(--text); }
.pt-empty { text-align: center; color: var(--text-dim); padding: 40px 14px; font-size: 14px; }
/* Cabecera limpia del panel de tienda (diseño del jefe): back + título grande + info a la derecha */
.bd-head2 { display: flex; align-items: center; gap: 14px; padding: 18px 4px 12px; }
.bd-head-back { width: 44px; height: 44px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--text); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer; }
.bd-head-back:active { transform: scale(.94); }
.bd-head-title { flex: 1; font-size: 26px; font-weight: 800; letter-spacing: -.6px; margin: 0; }
.bd-head-store { display: none; }   /* el nombre de la tienda solo se muestra en PC (en la fila del menú) */
.bd-head-right { color: var(--text-dim); font-size: 15px; font-weight: 600; white-space: nowrap; }

/* ── Pestaña "Orden": control segmentado + tarjetas de categoría ── */
.org-seg { display: flex; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 16px; padding: 5px; margin: 4px 0 6px; }
.org-seg-b { flex: 1; border: none; background: transparent; color: var(--text-dim); font-weight: 800; font-size: 12px; letter-spacing: .2px; padding: 11px 4px; border-radius: 12px; cursor: pointer; transition: background .14s, color .14s; white-space: nowrap; }
.org-seg-b.on { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(108,140,255,.4); }
.org-seg-b:active { transform: scale(.96); }
/* Selector de imagen del sheet (cuadro a la izquierda del título) */
.org-imgpick { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 16px; border: 2px dashed var(--accent); background: rgba(108,140,255,.06); cursor: pointer; overflow: hidden; }
.org-imgpick:active { transform: scale(.97); }
.org-imgpick-in { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.org-imgpick-in img { width: 100%; height: 100%; object-fit: cover; }
/* Envío del producto: botones de método (multi) + selector fijo/por peso */
.pf-ship .pf-ship-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin: 12px 0 7px; }
.ship-methods { display: flex; gap: 8px; }
.ship-m { flex: 1; padding: 11px 6px; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(255,255,255,.03); color: var(--text-dim); font-weight: 700; font-size: 13px; cursor: pointer; transition: all .14s; }
.ship-m.on { border-color: var(--accent); background: rgba(108,140,255,.14); color: var(--accent); }
.ship-m:active { transform: scale(.96); }
.ship-pmode { display: flex; gap: 6px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 13px; padding: 4px; }
.ship-pm { flex: 1; padding: 10px 6px; border-radius: 10px; border: none; background: transparent; color: var(--text-dim); font-weight: 800; font-size: 13px; cursor: pointer; transition: background .14s, color .14s; }
.ship-pm.on { background: var(--accent); color: #fff; }
/* Margen editable (+N%) dentro de la fila "Precio de venta final" */
.pf-mk-wrap { display: inline-flex; align-items: center; color: var(--accent); font-style: normal; font-weight: 700; }
.pf-margin-in { width: 46px; background: rgba(108,140,255,.12); border: 1px solid rgba(108,140,255,.3); border-radius: 7px; color: var(--accent); font-weight: 800; text-align: center; padding: 2px 4px; margin: 0 1px; font-size: 13px; -moz-appearance: textfield; }
.pf-margin-in:focus { outline: none; border-color: var(--accent); }
/* Cabecera del formulario de producto: back + título "Add Producto" + interruptor mostrar/ocultar */
.pf-topbar2 { display: flex; align-items: center; gap: 12px; }
.pf-title2 { flex: 1; font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.pf-vis-switch { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.16); position: relative; cursor: pointer; border: none; transition: background .18s; }
.pf-vis-switch.on { background: var(--green); }
.pf-vis-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .18s; }
.pf-vis-switch.on::after { transform: translateX(22px); }
/* Producto OCULTO (borrador) en el panel del dueño: chip gris + foto muy atenuada */
.card-hidden { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(120,124,140,.94); color: #fff; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 7px; }
.card.prod-hidden .ph img { opacity: .4; filter: grayscale(.4); }
/* Detalle de grupo de variantes (miembros + agregar hermano) */
.vg-list { display: flex; flex-direction: column; gap: 8px; }
.vg-row { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
.vg-thumb { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 auto; background: #fff center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.vg-info { flex: 1; min-width: 0; }
.vg-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-info small { color: var(--text-dim); font-size: 12px; }
.vg-badge { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--accent); background: rgba(108,140,255,.14); padding: 4px 9px; border-radius: 8px; }
.vg-rm { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: none; background: rgba(255,91,110,.12); color: var(--red); display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* ── Asistente de variantes multi-eje ── */
.vw { display: flex; flex-direction: column; }
.vw-field { display: flex; flex-direction: column; gap: 6px; }
.vw-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.vw-sec-h { font-size: 14px; font-weight: 800; margin: 16px 0 8px; }
.vw-sec-h small { font-weight: 600; color: var(--text-dim); }
.vw-axis { border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: rgba(255,255,255,.03); margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
.vw-axis-top { display: flex; gap: 8px; align-items: center; }
.vw-axis-name { flex: 1; }
.vw-axis-del { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: none; background: rgba(255,91,110,.12); color: var(--red); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vw-members { display: flex; flex-direction: column; gap: 10px; }
.vw-mem { border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: rgba(255,255,255,.03); }
.vw-mem-top { display: flex; align-items: center; gap: 10px; }
.vw-thumb { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; background: #fff center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.vw-mem-info { flex: 1; min-width: 0; }
.vw-mem-info b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-mem-info small { color: var(--text-dim); font-size: 12px; }
.vw-main { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.vw-main.on { color: var(--accent); border-color: var(--accent); background: rgba(108,140,255,.14); }
.vw-rm { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: none; background: rgba(255,91,110,.12); color: var(--red); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vw-mem-axes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.vw-mem-ax { display: flex; flex-direction: column; gap: 3px; flex: 1 1 120px; }
.vw-mem-ax > span { font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.vw-mem-sel { padding: 8px 10px; }
/* Agregar producto al grupo: botón "Seleccionar productos" → hoja de selección múltiple */
.vw-pickbtn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vw-dd-info { flex: 1; min-width: 0; }
.vw-dd-info b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-dd-info small { font-size: 11.5px; color: var(--text-dim); }
/* Hoja de selección múltiple (buscador + lista con casillas) */
.vw-pick { display: flex; flex-direction: column; }
.vw-pick-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--text-dim); margin-bottom: 10px; }
.vw-pick-search input { flex: 1; border: none; background: transparent; color: var(--text); padding: 11px 0; font-size: 14.5px; outline: none; }
.vw-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.vw-pick-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid transparent; background: rgba(255,255,255,.03); border-radius: 12px; cursor: pointer; text-align: left; color: var(--text); }
.vw-pick-opt.on { border-color: var(--accent); background: rgba(108,140,255,.14); }
.vw-pick-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.vw-pick-opt.on .vw-pick-check { background: var(--accent); }
.vw-pick-opt:not(.on) .vw-pick-check { border: 1.6px solid var(--line); }
.vw-pick-done { margin-top: 14px; }
/* Tarjeta de categoría/subcategoría (misma silueta que una card de producto) */
.org-cat-card { align-self: start; }
.org-cat-card .ph { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: visible; padding: 7px; display: flex; align-items: center; justify-content: center; background: transparent; }
.org-cat-card .ph.empty { color: var(--text-dim); background: rgba(255,255,255,.05); border-radius: 18px; }
.org-cat-card .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.28); }

/* ── Pestaña "Ajustes": tarjeta de tienda editable + toggle + zona peligro ── */
.aj-card { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); margin-bottom: 16px; }
.aj-cover { display: block; position: relative; height: 164px; background: var(--panel-2, rgba(255,255,255,.05)) center/cover no-repeat; cursor: pointer; }
.aj-cover .aj-cover-edit { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.aj-cover.empty { display: flex; align-items: center; justify-content: center; color: var(--text-dim); background: linear-gradient(135deg, rgba(108,140,255,.18), rgba(108,140,255,.04)); }
.aj-body { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px 16px; margin-top: -34px; position: relative; }
.aj-logo { width: 74px; height: 74px; border-radius: 20px; flex: 0 0 auto; border: 3px solid var(--panel); background: var(--panel-2, #2a2a34) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; color: #fff; cursor: pointer; position: relative; overflow: hidden; }
.aj-logo .aj-logo-edit { position: absolute; inset: auto 0 0 0; height: 26px; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.aj-info { flex: 1; min-width: 0; padding-bottom: 4px; }
.aj-name { font-size: 19px; font-weight: 800; letter-spacing: -.4px; display: flex; align-items: center; gap: 7px; }
.aj-name .aj-name-edit { color: var(--text-dim); flex: 0 0 auto; cursor: pointer; }
.aj-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-row { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.03); margin-bottom: 12px; }
.aj-row .aj-row-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(108,140,255,.12); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.aj-row .aj-row-b { flex: 1; min-width: 0; }
.aj-row .aj-row-t { font-weight: 700; font-size: 15px; }
.aj-row .aj-row-s { color: var(--text-dim); font-size: 12.5px; margin-top: 1px; }
.aj-row.tap { cursor: pointer; }
.aj-row.tap:active { transform: scale(.99); }
/* Switch verde de activo/inactivo */
.aj-switch { flex: 0 0 auto; width: 50px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.16); position: relative; cursor: pointer; transition: background .18s; }
.aj-switch.on { background: var(--green); }
.aj-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .18s; }
.aj-switch.on::after { transform: translateX(20px); }
.aj-danger { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border-radius: 16px; border: 1px solid rgba(255,91,110,.4); background: rgba(255,91,110,.08); color: var(--red); font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 6px; }
.aj-danger:active { transform: scale(.99); }

/* Estadísticas premium */
.bd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.bd-stat { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.bd-stat-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(108,140,255,.12); box-shadow: inset 0 0 0 1px rgba(108,140,255,.14); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bd-stat.green .bd-stat-ic { background: rgba(95,184,120,.14); box-shadow: inset 0 0 0 1px rgba(95,184,120,.18); color: var(--green); }
.bd-stat.gold .bd-stat-ic { background: rgba(232,184,75,.14); box-shadow: inset 0 0 0 1px rgba(232,184,75,.2); color: var(--gold); }
.bd-stat-v { font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--text); white-space: nowrap; }
.bd-stat.green .bd-stat-v { color: var(--green); }
.bd-stat-l { font-size: 11.5px; color: var(--text-dim); font-weight: 600; margin-top: 1px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.chart-head .chart-title { font-size: 13px; color: var(--text-dim); font-weight: 600; margin-bottom: 0; }
.chart-head .chart-total { font-size: 16px; font-weight: 800; color: var(--green); letter-spacing: -.3px; }
@media (min-width: 900px) {
  .bd-stats { grid-template-columns: repeat(4, 1fr); }
}
.badge { display: inline-block; padding: 3px 10px; border-radius: 16px; font-size: 12px; font-weight: 700; }
.badge.pendiente, .badge.pagado { background: rgba(232,184,75,.16); color: var(--gold); }
.badge.completado { background: rgba(95,184,120,.16); color: var(--green); }
.badge.enviado { background: rgba(98,160,234,.16); color: var(--accent); }
.badge.cancelado { background: rgba(255,91,110,.16); color: var(--red); }

/* Menú lateral */
.drawer-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 60; opacity: 0; transition: opacity .2s; }
.drawer-ov.show { opacity: 1; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 84%; max-width: 340px; background: var(--bg2); z-index: 61; transform: translateX(-100%); transition: transform .22s ease; display: flex; flex-direction: column; padding: 16px 14px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.drawer.show { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 0 4px; }
.drawer-head .brand { font-size: 18px; } .drawer-head .sp { flex: 1; }
.menu-item { display: flex; align-items: center; gap: 13px; padding: 14px 14px; border-radius: 12px; background: var(--panel); margin-bottom: 9px; font-size: 15.5px; font-weight: 600; color: var(--text); }
/* Página de menú a pantalla completa (móvil): perfil anclado abajo */
.menu-page { display: flex; flex-direction: column; min-height: calc(100dvh - 150px); }
/* La campana sobra en móvil: Avisos ya está en la barra de abajo (sin repetir) */
/* La campana vive en el topbar (ya no hay pestaña Avisos en la barra inferior). */
.menu-item:active { background: var(--panel2); }
.menu-item.active { outline: 1.5px solid var(--accent); }
.menu-item .mr { margin-left: auto; color: var(--text-dim); font-size: 13px; }
.menu-spacer { flex: 1; }
.menu-wallet { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 12px; background: var(--panel); margin-bottom: 9px; }

/* ── Sidebar fijo en PC (menú siempre visible al costado, estilo Shopify) ──────── */
#pc-sidebar { display: none; }
@media (min-width: 1000px) {
  #pc-sidebar {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
    width: 248px; background: var(--bg2); border-right: 1px solid var(--line, rgba(255,255,255,.07));
    padding: 16px 12px; overflow-y: auto; z-index: 40;
  }
  #pc-sidebar .menu-item, #pc-sidebar .menu-wallet { cursor: pointer; }
  #app { margin-left: 248px; max-width: 1180px; }
  .topbar #tb-menu2 { display: none; }     /* en PC el menú ya está fijo: no hace falta el ☰ */
  /* El candado/marca ya está en el sidebar → quitar el duplicado de la barra superior (todas las páginas). */
  .topbar .brand .brand-ic { display: none; }
  /* El saldo ya se ve grande en el sidebar → quitar el chip pequeño de la barra superior en PC. */
  .topbar .bal-chip { display: none; }
}
/* Saldo destacado en el sidebar de PC (sustituye al chip pequeño, bien grande). */
.side-balance { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%;
  margin: 6px 0 16px; padding: 14px 16px; border-radius: 16px; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, rgba(108,140,255,.18), rgba(108,140,255,.05));
  border: 1px solid rgba(108,140,255,.30); transition: border-color .15s; }
.side-balance:hover { border-color: var(--accent); }
.sb-bal-lbl { font-size: 11.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.sb-bal-amt { font-size: 27px; font-weight: 900; color: var(--text); letter-spacing: -.5px; line-height: 1.1; }
.menu-wallet .mw-b { font-weight: 800; font-size: 16px; } .menu-wallet .mw-u { margin-left: auto; color: var(--text-dim); font-size: 12px; }

/* Auth */
.auth-wrap { padding: 30px 18px 40px; }
.auth-logo { text-align: center; margin-bottom: 18px; }
.auth-logo .splash-name { margin-top: 8px; }
.seg { display: flex; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 5px; margin-bottom: 14px; }
.seg button { flex: 1; padding: 11px; border-radius: 10px; color: var(--text-dim); font-weight: 700; }
.seg button.active { background: var(--accent); color: #fff; }

/* FAB */
.fab { position: fixed; right: 18px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(95,184,120,.4); z-index: 40; }
/* Burbuja flotante de Soporte (pequeña) — se oculta al bajar, reaparece al subir */
.support-fab { position: fixed; right: 16px; bottom: calc(108px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(108,140,255,.5); z-index: 39; cursor: pointer; transition: opacity .4s ease, box-shadow .4s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.support-fab:active { transform: scale(.92); }
.support-fab.hide { opacity: 0; box-shadow: 0 0 0 rgba(108,140,255,0); pointer-events: none; }   /* se desvanece suave como sombra */
/* Ondas de palpitación DETRÁS de la burbuja (indican "aquí estoy"): dos anillos escalonados. */
.support-fab::before, .support-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); z-index: -1; animation: fabPulse 2.6s ease-out infinite; }
.support-fab::after { animation-delay: 1.3s; }
@keyframes fabPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .support-fab::before, .support-fab::after { animation: none; } }
@media (min-width: 900px) { .support-fab { bottom: 22px; right: 22px; } }   /* en PC no hay tabbar */

/* Modal de login/registro (hoja clara que sube sobre el marketplace) */
.auth-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 70; opacity: 0; transition: opacity .2s; }
.auth-ov.show { opacity: 1; }
.auth-sheet { position: fixed; left: 50%; transform: translateX(-50%) translateY(30px); bottom: 0; width: 100%; max-width: 560px; top: 62px;
  background: var(--bg2); color: var(--text); border-radius: 22px 22px 0 0; z-index: 71; overflow-y: auto;
  padding: 10px 20px max(24px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity .22s, transform .22s; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
.auth-sheet.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.auth-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 16px; }
/* Encabezado de marca del login/registro */
.auth-brand { text-align: center; margin: 2px 0 20px; }
.auth-logo { width: 58px; height: 58px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.auth-logo svg { width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.auth-h { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
.auth-p { font-size: 13.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.45; max-width: 340px; margin-left: auto; margin-right: auto; }
.auth-seg { display: flex; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 16px; padding: 5px; margin: 0 0 22px; }
.auth-seg button { flex: 1; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 15.5px; color: var(--text-dim); transition: color .15s, background .2s; }
.auth-seg button.active { background: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff; box-shadow: 0 5px 14px rgba(108,140,255,.34); }
.lf { margin-bottom: 18px; }
.lf label { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.lf .wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 14px; background: rgba(255,255,255,.025); transition: border-color .15s ease, box-shadow .2s ease, background .15s ease; }
.lf .wrap:focus-within { border-color: var(--accent); background: rgba(108,140,255,.05); box-shadow: 0 0 0 3px rgba(108,140,255,.16); }
.lf .wrap .ci { color: var(--accent); display: flex; }
.lf .wrap input { flex: 1; border: none; outline: none; font-size: 16px; color: var(--text); background: none; }
.lf .wrap input::placeholder { color: var(--text-dim); }
.lf .wrap select { flex: 1; border: none; outline: none; font-size: 16px; color: var(--text); background: none; appearance: none; -webkit-appearance: none; }
.lf .wrap select option { background: var(--panel); color: var(--text); }
.lf .wrap .eye { color: var(--text-dim); display: flex; }
/* Ojito (ver/ocultar) para contraseñas y PINs en campos .input */
.eye-wrap { position: relative; }
.eye-wrap .pw-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--text-dim); display: flex; cursor: pointer; padding: 4px; }
.eye-wrap .pw-eye.on { color: var(--accent); }
/* Chip de peso prominente en el detalle del producto */
/* Chips de filtro de Movimientos (Transacciones) */
.tx-filters { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tx-filters::-webkit-scrollbar { display: none; }
.tx-filters .txf { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); color: var(--text-dim); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.tx-filters .txf.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.weight-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(98,160,234,.12); color: var(--accent); font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 10px; margin: 4px 0 6px; }
.weight-chip b { font-weight: 800; }
.ship-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(34,201,143,.12); color: var(--green); font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 10px; margin: 0 0 6px; }
.ship-chip b { font-weight: 800; }
/* Ubicación del producto (municipio · provincia): visible bajo el precio, en la ficha. NO se oculta (a diferencia de peso/entrega). */
.loc-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(232,184,75,.13); color: var(--gold, #e8b84b); font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 10px; margin: 2px 0 6px; }
.loc-chip b { font-weight: 800; }
.ship-eta { display: flex; align-items: center; gap: 6px; color: var(--green); font-size: 12.5px; font-weight: 600; margin: 8px 0 0; }
.ship-eta b { font-weight: 800; }
.src-link { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 12px; border: 1px dashed var(--accent); border-radius: 10px; color: var(--accent); font-size: 12.5px; font-weight: 600; background: rgba(98,160,234,.06); }
.pin-mask { -webkit-text-security: disc; text-security: disc; }
.pin-mask.pin-reveal { -webkit-text-security: none; text-security: none; }
.phone-row { display: flex; gap: 8px; }
.phone-row .phone-cc { flex: 0 0 auto; max-width: 158px; padding-left: 12px; padding-right: 6px; }
.phone-row .phone-cc select { font-size: 15px; cursor: pointer; }
.phone-row .phone-num { flex: 1; min-width: 0; }
@media (max-width: 360px) { .phone-row .phone-cc { max-width: 130px; } .phone-row .phone-cc select { font-size: 14px; } }
.auth-btn { width: 100%; padding: 16px; border-radius: 14px; background-image: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff; font-size: 16.5px; font-weight: 700; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 22px rgba(108,140,255,.32); transition: transform .12s ease, box-shadow .15s ease; }
.auth-btn:active { transform: scale(.99); box-shadow: 0 4px 12px rgba(108,140,255,.4); }
.auth-title { font-size: 20px; font-weight: 800; color: var(--text); margin: 2px 0 6px; }
.auth-note { font-size: 14px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.45; }
.auth-link { text-align: center; color: var(--text-dim); font-size: 14.5px; margin-top: 16px; cursor: pointer; }
.auth-link b { color: var(--accent); font-weight: 700; }
/* Campo del código OTP: angosto, centrado y con dígitos grandes espaciados. */
.lf-code { max-width: 240px; margin: 6px auto 0; }
.lf-code .wrap { justify-content: center; padding: 12px 14px; }
.lf-code .wrap input { text-align: center; font-size: 26px !important; font-weight: 700; letter-spacing: 10px; padding-left: 10px; }
.lf-code .wrap input::placeholder { color: var(--line); letter-spacing: 10px; font-weight: 600; }
/* Fila de 2 botones (p. ej. "Regresar" + "Verificar" en el paso del código). */
.auth-btn-row { display: flex; gap: 10px; margin-top: 12px; }
.auth-btn-row .auth-btn { margin-top: 0; width: auto; }
.auth-btn-row #au-verify { flex: 1; }
.auth-btn-sec { flex: 0 0 auto; background-image: none; background: rgba(255,255,255,.06); color: var(--text); box-shadow: none; border: 1px solid var(--line); }
.auth-btn-sec:active { transform: scale(.99); box-shadow: none; }
.auth-err { color: var(--red); font-size: 13px; min-height: 16px; text-align: center; margin-top: 2px; }

/* Bottom sheet oscuro (Depositar / Transferir) */
/* z-index alto: el modal debe quedar SOBRE los mapas (Leaflet usa hasta ~1000 en sus controles). */
.sheet-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 3000; opacity: 0; transition: opacity .2s; overscroll-behavior: contain; }
.sheet-ov.show { opacity: 1; }
/* Con un modal abierto, el FONDO no hace scroll (evita que la página se mueva atrás al scrollear el modal). */
body.sheet-lock { overflow: hidden; }
.bottom-sheet { position: fixed; left: 50%; transform: translateX(-50%) translateY(30px); bottom: 0; width: 100%; max-width: 560px;
  background: rgba(28,28,34,.9); backdrop-filter: blur(14px) saturate(1.7); -webkit-backdrop-filter: blur(14px) saturate(1.7);
  color: var(--text); border-radius: 22px 22px 0 0; z-index: 3001; max-height: 88vh; overflow-y: auto;
  overscroll-behavior: contain;   /* el scroll NO se propaga al fondo (no se mueve la página atrás) */
  border: 1px solid rgba(255,255,255,.1); border-bottom: 0;
  padding: 8px 20px max(24px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity .22s, transform .22s;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.bottom-sheet.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bs-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 6px auto 10px; }
.bs-title { text-align: center; font-size: 22px; margin: 4px 0 16px; }
.seg-dark { display: flex; background: var(--panel); border-radius: 26px; padding: 5px; margin-bottom: 18px; }
.seg-dark button { flex: 1; padding: 11px; border-radius: 22px; font-weight: 700; color: var(--text-dim); font-size: 15px; }
.seg-dark button.active { background: var(--panel2); color: var(--text); }
.dep-method { display: flex; align-items: center; gap: 13px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.dep-method[data-sq] { border-radius: 12px; padding: 14px; margin-bottom: 10px; }
/* ── Cuadro de pago con tarjeta (Square) — diseño Desbloqueados ──────────────── */
.sq-pay-wrap { padding-bottom: 4px; }
.sq-total { background: linear-gradient(135deg, rgba(108,140,255,.16), rgba(108,140,255,.04)); border: 1px solid rgba(108,140,255,.28); border-radius: 16px; padding: 16px 18px; text-align: center; margin-bottom: 16px; }
.sq-total-lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.sq-total-lbl svg { stroke: var(--accent); }
.sq-total-amt { font-size: 34px; font-weight: 900; letter-spacing: -.5px; margin-top: 4px; color: var(--text); }
/* Panel "tarjeta": marco oscuro con acento que contiene el campo blanco de Square (intencional, no "en blanco"). */
.sq-cardpanel { background: linear-gradient(160deg, #20212b, #16161b); border: 1px solid rgba(108,140,255,.22); border-radius: 16px; padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.sq-cardpanel-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 11px; }
.sq-chip { width: 30px; height: 22px; border-radius: 5px; flex-shrink: 0; background: linear-gradient(135deg, #f3d27a, #c79a3b); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); position: relative; }
.sq-chip::after { content: ""; position: absolute; inset: 5px 7px; border: 1px solid rgba(0,0,0,.22); border-radius: 2px; }
.sq-cardpanel-title { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--text); }
.sq-brands { color: var(--text-dim); display: inline-flex; }
.sq-brands svg { stroke: var(--text-dim); }
/* Campo blanco de Square (su iframe es claro): se presenta como una franja limpia dentro del panel. */
.sq-card-box { background: #fff; border-radius: 11px; padding: 10px 12px; min-height: 52px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.sq-cards-row { display: none; }
.sq-pay-btn { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; }
.sq-pay-btn svg { stroke: currentColor; }
.sq-trust { display: flex; align-items: flex-start; gap: 8px; color: var(--text-dim); font-size: 11.5px; line-height: 1.5; margin-top: 12px; }
.sq-trust svg { stroke: var(--green); flex-shrink: 0; margin-top: 1px; }
.sq-sandbox { color: var(--gold); font-size: 11.5px; line-height: 1.5; margin-top: 8px; background: rgba(232,184,75,.1); border: 1px solid rgba(232,184,75,.25); border-radius: 10px; padding: 8px 11px; }
.dm-ico { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; flex-shrink: 0; }
.dm-body { flex: 1; min-width: 0; } .dm-name { font-size: 16px; } .dm-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.dm-link { width: 44px; height: 38px; border-radius: 10px; background: var(--accent); color: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bs-info { list-style: none; padding: 0; margin: 0 0 12px; }
.cc-fineprint { font-size: 11px; line-height: 1.5; color: var(--text-dim); margin: 12px 2px 0; text-align: center; }
/* Banner plegable de comisiones (modal de crear tarjeta) */
.cc-fees { margin: 8px 0 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cc-fees-tog { display: flex; align-items: center; gap: 9px; width: 100%; background: var(--bg2); border: 0; color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 12px 14px; cursor: pointer; }
.cc-fees-tog > span:first-of-type { flex: 1; text-align: left; }
.cc-fees-tog svg { color: var(--text-dim); }
.cc-fees-chev { display: inline-flex; transition: transform .2s; }
.cc-fees-tog.open .cc-fees-chev { transform: rotate(180deg); }
.cc-fees-body { margin: 0 !important; padding: 4px 14px 12px !important; }
.cc-fees-body[hidden] { display: none; }
.bs-info li { padding: 4px 0; color: var(--text-dim); font-size: 15px; }
.bs-info li b { color: var(--text); }
.bs-note { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--panel2); color: var(--text); padding: 12px 18px; border-radius: 12px; font-size: 14px; z-index: 200; box-shadow: 0 10px 30px rgba(0,0,0,.5); border: 1px solid var(--line); max-width: 90%; text-align: center; animation: toastIn .26s cubic-bezier(.34,1.56,.64,1); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.empty { text-align: center; color: var(--text-dim); padding: 40px 24px; font-size: 14.5px; line-height: 1.6; }
.loading { text-align: center; color: var(--text-dim); padding: 36px; }

/* Database — panel admin */
.db-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 6px 16px 12px; scrollbar-width: none; }
.db-tabs::-webkit-scrollbar { display: none; }
.db-tab { position: relative; flex-shrink: 0; width: 52px; height: 48px; border-radius: 13px; background: var(--panel); border: 1px solid var(--line); color: var(--text-dim); display: flex; align-items: center; justify-content: center; transition: transform .12s, background .15s, color .15s, border-color .15s; }
.db-tab:active { transform: scale(.9); }
.tab-pending { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); }
/* Sub-filtros de la Database (estado / tipo de usuario) */
.db-subfilter { display: flex; gap: 7px; overflow-x: auto; padding: 0 16px 8px; scrollbar-width: none; }
.db-subfilter::-webkit-scrollbar { display: none; }
.dbsf { flex: 0 0 auto; padding: 7px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.dbsf.on { background: var(--accent); color: #fff; border-color: transparent; }
.dbsf-n { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
/* Database: en MÓVIL el subtítulo y las etiquetas de pestaña van ocultos (idéntico a antes).
   En PC se muestran para dar el look de panel institucional (ver bloque @media min-width:1000px). */
.db-head-sub { display: none; }
.db-tab-lbl { display: none; }
.db-search-btn { display: none; }   /* el círculo de búsqueda es solo PC; en móvil va la barra */
.db-inline-search { display: none; }   /* input inline de la nav: solo PC */
/* Entregas (Database → Envíos → Pedidos): vendedor esperando por el mensajero */
.dlv-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dim); margin: 4px 2px 12px; }
.dlv-head b { color: var(--text); }
/* Datos → Pedidos (solo mostrar): grilla que se ACOMODA sola por ancho (auto-fill, nunca corta una
   columna) con tarjetas compactas. Cada tile arranca con el mismo alto de contenido. */
.dlv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-content: start; }
.dlv-grid .dlv-card { margin-bottom: 0; min-width: 0; }
.dlv-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; margin-bottom: 10px; }
.dlv-top { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); margin-bottom: 9px; }
.dlv-thumb { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.dlv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dlv-mid { flex: 1; min-width: 0; }
.dlv-title { font-weight: 700; font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlv-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlv-amt { flex: 0 0 auto; font-weight: 800; font-size: 14.5px; color: var(--green, #22c98f); }
.dlv-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 13px; }
.dlv-row > span { flex: 0 0 auto; width: 66px; color: var(--text-dim); }
.dlv-row > b { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dlv-wa { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37,211,102,.15); color: #25d366; }
/* Compactación de filas SOLO dentro de la grilla de Pedidos (Datos); no afecta a los detalles
   KYB/cajero ni a la lista de mensajeros, que comparten .dlv-row / .dlv-wa. */
.dlv-grid .dlv-row { align-items: baseline; margin-top: 6px; font-size: 12.5px; }
.dlv-grid .dlv-row:first-of-type { margin-top: 0; }
.dlv-grid .dlv-row > span { width: 52px; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.dlv-addr { display: flex; align-items: flex-start; gap: 6px; margin-top: 9px; padding: 7px 9px; background: rgba(108,140,255,.09); border-radius: 9px; font-size: 12px; line-height: 1.4; }
.dlv-addr svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.dlv-addr a { color: var(--accent); font-weight: 600; }
.dlv-note { font-size: 12px; color: var(--gold); margin-top: 8px; display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.dlv-courier { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 9px; background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.25); border-radius: 9px; font-size: 12px; }
.dlv-courier > svg { flex: 0 0 auto; color: var(--green, #22c98f); }
.dlv-courier > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dlv-courier b { font-weight: 700; }
/* Selector de mensajero (asignar pedido) */
.ac-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 12px; margin-top: 8px; background: var(--card2, rgba(255,255,255,.04)); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 13px; color: inherit; cursor: pointer; }
.ac-item:active { transform: scale(.99); }
.ac-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(108,140,255,.14); color: var(--accent); }
.ac-tx { flex: 1; min-width: 0; }
.ac-tx b { display: block; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.ac-tx small { display: flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.ac-item > svg:last-child { flex: 0 0 auto; color: var(--text-dim); }
/* Apartado "Trabaja con Desbloqueados" en Ajustes */
.pf2-grouphd { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; padding: 10px 4px 6px; }
.pf2-role .pf2-lbl small { display: block; font-weight: 400; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pf2-cta { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; color: var(--accent); flex: 0 0 auto; }
.roles-note { display: flex; align-items: flex-start; gap: 8px; margin: 6px 4px 8px; padding: 10px 12px; background: rgba(232,184,75,.1); border-radius: 11px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.roles-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--gold); }
/* ── Panel de mensajero (pro, estilo reparto) ─────────────────────────── */
/* Panel de PROMOTOR (rediseño, tema dorado/estrella). */
.prom-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 18px; text-align: center; background: linear-gradient(150deg, #3a2f12, #211c0e 60%, #14141a); border: 1px solid rgba(232,205,126,.25); margin-bottom: 14px; }
.prom-hero-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(232,205,126,.35), transparent 70%); filter: blur(10px); pointer-events: none; }
.prom-hero-badge { position: relative; z-index: 1; width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e8cd7e, #c79b3a); color: #2a2205; box-shadow: 0 8px 22px rgba(200,160,50,.4); }
.prom-hero-h { position: relative; z-index: 1; font-size: 20px; font-weight: 800; color: #fff; }
.prom-hero-s { position: relative; z-index: 1; font-size: 13.5px; color: rgba(255,255,255,.75); margin-top: 3px; }
.prom-hero-s b { color: #e8cd7e; }
.prom-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.prom-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
.prom-stat-v { font-size: 24px; font-weight: 800; }
.prom-stat-l { font-size: 12px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.prom-code { background: var(--panel); border: 1px solid rgba(232,205,126,.3); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.prom-code-lbl { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; text-align: center; }
.prom-code-v { font-size: 27px; font-weight: 800; letter-spacing: 3px; text-align: center; color: #e8cd7e; margin: 6px 0 10px; }
.prom-link { background: var(--bg2); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; font-size: 12.5px; word-break: break-all; color: var(--text-dim); margin-bottom: 12px; }
.prom-wa { background: #25d366 !important; color: #05230f !important; border: none !important; font-weight: 800; }
.prom-how { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.prom-how-h { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.prom-how-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); padding: 5px 0; }
.prom-how-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(232,205,126,.16); color: #e8cd7e; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
/* Evento "Agranda el nido": apartado dedicado (hero + stats + tareas) */
.nido-hero { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 14px; aspect-ratio: 16/9; max-height: 220px; }
.nido-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nido-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,12,.85) 0%, rgba(8,8,12,.45) 45%, rgba(0,0,0,0) 78%); }
.nido-hero-tx { position: absolute; left: 16px; bottom: 14px; right: 40%; z-index: 1; }
.nido-hero-badge { display: inline-block; font-size: 11px; font-weight: 800; color: #f5c451; background: rgba(245,196,81,.16); border: 1px solid rgba(245,196,81,.3); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.nido-hero-h { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.nido-hero-s { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 3px; }
.nido-statrow { display: flex; gap: 10px; margin-bottom: 14px; }
.nido-stat { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; }
.nido-stat-v { font-size: 22px; font-weight: 800; }
.nido-stat-l { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
/* Evento sin cabecera: respeta el status-bar arriba */
.view-nido { padding-top: max(6px, env(safe-area-inset-top)); }
.nido-topbar { display: flex; align-items: center; padding: 2px 4px; }
.nido-back { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: none; border: none; color: var(--text); cursor: pointer; transition: transform .12s ease, background .15s ease; }
.nido-back:active { transform: scale(.9); }
@media (hover: hover) { .nido-back:hover { background: rgba(255,255,255,.06); } }
/* Cuenta regresiva del sorteo */
.nido-countdown { background: linear-gradient(135deg, rgba(108,140,255,.16), rgba(45,212,191,.1)); border: 1px solid rgba(108,140,255,.3); border-radius: 16px; padding: 14px 16px 16px; margin-bottom: 14px; text-align: center; }
.nido-cd-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--text); }
.nido-cd-lbl svg { color: var(--gold); }
.nido-cd-timer { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 12px; }
.nido-cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 58px; background: rgba(0,0,0,.3); border-radius: 12px; padding: 9px 6px; }
.nido-cd-unit b { font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.nido-cd-unit span { font-size: 10px; color: var(--text-dim); margin-top: 5px; text-transform: uppercase; letter-spacing: .5px; }
.nido-cd-sep { font-size: 22px; font-weight: 800; color: var(--text-dim); margin-top: 9px; }
/* Reglas + premios del sorteo */
.nido-rules-list { margin: 9px 0 0; padding-left: 18px; }
.nido-rules-list li { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin-bottom: 7px; }
.nido-rules-list li b { color: var(--text); font-weight: 700; }
/* Grupo compacto: código + copiar + compartir, y las 3 métricas en la misma tarjeta */
.nido-group .prom-code-lbl { text-align: left; }
.nido-code-line { display: flex; align-items: center; gap: 10px; margin: 7px 0 14px; }
.nido-code-line .prom-code-v { flex: 1; min-width: 0; text-align: left; margin: 0; font-size: 24px; letter-spacing: 2px; overflow: hidden; text-overflow: ellipsis; }
.nido-iconbtn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg2); border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: transform .12s ease, border-color .15s ease; }
.nido-iconbtn:active { transform: scale(.9); }
@media (hover: hover) { .nido-iconbtn:hover { border-color: var(--text-dim); } }
.nido-group .nido-statrow { margin-bottom: 0; }
.nido-group .nido-stat { background: var(--bg2); }
/* Ranking horizontal (mayor → menor puntuación) */
.nido-lead { position: relative; margin-bottom: 16px; }
.nido-lead-h { font-size: 15px; font-weight: 800; color: var(--text); margin: 2px 2px 10px; }
.nido-lead-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.nido-lead-rail::-webkit-scrollbar { display: none; }
.nido-lead-card { flex: 0 0 auto; width: 108px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.nido-lead-card.me { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.nido-lead-rank { position: absolute; top: 8px; left: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.nido-lead-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; margin-top: 6px; }
.nido-lead-nm { font-size: 12.5px; font-weight: 700; color: var(--text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nido-lead-pts { font-size: 12px; font-weight: 800; color: #2dd4bf; }
.nido-note { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--text-dim);
  background: rgba(45,212,191,.07); border: 1px solid rgba(45,212,191,.22); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.nido-note svg { flex: 0 0 auto; margin-top: 1px; color: #2dd4bf; }
/* tarjeta de tareas con puntos */
.nido-card { background: linear-gradient(160deg, rgba(245,196,81,.10), rgba(45,212,191,.06)), var(--panel);
  border: 1px solid rgba(245,196,81,.32); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.nido-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nido-title { font-weight: 800; font-size: 16px; }
.nido-pts { background: rgba(45,212,191,.16); color: #2dd4bf; font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.nido-pts b { font-size: 15px; }
.nido-sub { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; margin: 4px 0 12px; }
.nido-tasks { display: flex; flex-direction: column; gap: 8px; }
.nido-task { display: flex; align-items: center; gap: 11px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; }
.nido-task.done-live { border-color: rgba(45,212,191,.35); }
.nido-tic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: #f5c451; }
.nido-task.done-live .nido-tic { color: #2dd4bf; }
.nido-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nido-tx b { font-size: 13.5px; }
.nido-tx small { color: var(--text-dim); font-size: 11.5px; }
.nido-btn { width: auto !important; flex: 0 0 auto; padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.nido-prog { height: 8px; border-radius: 6px; background: var(--bg2); overflow: hidden; margin: 10px 0 6px; }
.nido-prog-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f5c451, #2dd4bf); transition: width .3s ease; }
.nido-prog-lbl { font-size: 12px; color: var(--text-dim); }
.prom-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.prom-panel-h { font-weight: 800; font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.prom-prow { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.prom-prow:first-of-type { border-top: 0; }
.prom-prow-img { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; color: #b9b9c2; }
.prom-prow-img img { width: 100%; height: 100%; object-fit: contain; }
.prom-prow-tx { flex: 1; min-width: 0; }
.prom-prow-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prom-prow-p { font-size: 12px; color: var(--text-dim); }
.prom-prow-earn { color: var(--green); font-weight: 800; white-space: nowrap; }
.prom-panel-sub { font-size: 12px; color: var(--text-dim); margin: 0 0 10px; line-height: 1.4; }
.prom-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 8px 11px; margin-bottom: 10px; }
.prom-search span { color: var(--text-dim); display: flex; }
.prom-search input { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.prom-earn-total { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.prom-earn-total b { color: var(--green); }
.prom-prow-gain { text-align: right; white-space: nowrap; }
.prom-prow-pct { font-size: 10.5px; color: var(--text-dim); font-weight: 600; margin-top: 1px; }
/* Etiqueta "Ganas +$X si lo vendes" dentro de las tarjetas de la tienda del promotor. */
.prom-card-earn { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding: 5px 8px; border-radius: 9px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.prom-card-earn b { font-weight: 800; }
.prom-card-earn svg { flex: 0 0 auto; }
.prom-card-earn i { margin-left: auto; font-style: normal; font-weight: 800; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--green) 22%, transparent); }
/* Tienda del promotor: cabecera con botón "Agregar productos", vitrina vacía y botón de quitar. */
.ps-topbar { display: flex; align-items: center; padding: max(10px, env(safe-area-inset-top)) 14px 10px; }
.ps-topbar .sp { flex: 1; }
.ps-exit { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 11px; background: var(--bg2); color: var(--text); cursor: pointer; transition: background .15s ease, color .15s ease; }
.ps-exit:hover { background: var(--red); color: #fff; }
.ps-code-top { display: inline-flex; align-items: baseline; gap: 10px; border: 0; background: transparent; padding: 4px 2px; cursor: pointer; color: var(--text); }
.ps-code-top .ps-code-top-l { font-size: 21px; font-weight: 800; letter-spacing: .5px; color: var(--text); }
.ps-code-top b { font-size: 21px; font-weight: 800; letter-spacing: 2px; color: var(--gold); }
.ps-exit { border-radius: 50%; }
.ps-topbar-t { font-size: 17px; font-weight: 700; }
.prom-store-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prom-add-btn { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; font-size: 13px; }
.prom-empty { text-align: center; padding: 34px 18px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prom-empty svg { color: var(--text-dim); opacity: .7; }
.prom-empty-t { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 4px; }
.prom-empty-s { font-size: 12.5px; max-width: 320px; line-height: 1.5; margin-bottom: 8px; }
.prom-card-rm { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(2px); }
.prom-card-rm:hover { background: var(--red); }
/* Botón "+" para agregar un producto a una tienda del promotor (sección "Todos los productos"). */
.prom-add-plus { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(80,80,90,.72); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(3px); transition: background .15s ease, transform .12s ease; }
.prom-add-plus:hover { background: var(--green); }
.prom-add-plus:active { transform: scale(.92); }
.prom-add-plus.added { background: var(--green); }
.prom-add-plus.added:hover { background: var(--red); }
/* Botón "Agregar" dentro de la tarjeta de tienda al elegir dónde poner un producto. */
.biz-add-btn { width: 100%; margin-top: 8px; padding: 8px 10px; font-size: 12.5px; }
/* Hoja "Agregar productos": lista del catálogo. */
.prom-cat-list { max-width: 720px; margin: 0 auto; }
.prom-cat-row { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-top: 1px solid var(--line); }
.prom-cat-row:first-child { border-top: 0; }
.prom-cat-img { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; color: #b9b9c2; }
.prom-cat-img img { width: 100%; height: 100%; object-fit: contain; }
.prom-cat-tx { flex: 1; min-width: 0; }
.prom-cat-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prom-cat-e { font-size: 12px; color: var(--text-dim); }
.prom-cat-e b { color: var(--green); }
.prom-cat-btn { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
/* Botón "Agregar" dentro de la tarjeta del catálogo del promotor: compacto, ancho de la tarjeta. */
.prom-cat-add { width: 100%; margin-top: 7px; padding: 6px 10px; font-size: 12px; min-height: 0; height: auto; }
/* Tarjeta punteada "Agregar nueva tienda" */
/* Línea "Tu código: XXXX" sobre el botón Crear catálogo (toca para copiar). */
.ps-code-line { display: flex; align-items: center; gap: 7px; width: 100%; margin: 2px 0 12px; padding: 0; background: none; border: none; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.ps-code-line b { color: var(--accent); font-weight: 800; letter-spacing: .6px; }
.ps-code-line svg { color: var(--text-dim); flex-shrink: 0; }
.prom-newstore { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; margin-bottom: 6px; border: 2px dashed var(--line); border-radius: 16px; background: transparent; color: var(--text); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.prom-newstore:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.prom-newstore-ic { position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 16%, transparent); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.prom-newstore-plus { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #1a1400; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.prom-newstore-tx { font-size: 21px; font-weight: 800; }
/* Barra verde de "Ganancia" al pie de cada tarjeta de producto */
.prom-card-gan { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; padding: 7px 11px; border-radius: 10px; background: color-mix(in srgb, var(--green) 13%, transparent); }
.prom-card-gan span { font-size: 13px; font-weight: 700; color: var(--green); }
.prom-card-gan b { font-size: 15px; font-weight: 800; color: var(--green); white-space: nowrap; }
.prom-card-gan span { flex: 0 0 auto; }
/* Selector de tiendas */
.prom-stores { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.prom-store-card { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); }
.prom-store-logo { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 12px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.prom-store-logo img { width: 100%; height: 100%; object-fit: cover; }
.prom-store-info { flex: 1; min-width: 0; }
.prom-store-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prom-store-n { font-size: 12.5px; color: var(--text-dim); }
.prom-store-btn { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
/* Tiendas PROPIAS del promotor: lista, tarjeta, formulario de crear, encabezado y hero público. */
.prom-shoplist { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 8px auto 0; }
.prom-shopcard { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); cursor: pointer; transition: border-color .15s ease; }
.prom-shopcard:hover { border-color: var(--gold); }
.prom-shopcard-logo { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 12px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.prom-shopcard-logo.big { width: 74px; height: 74px; border-radius: 18px; }
.prom-shopcard-logo img { width: 100%; height: 100%; object-fit: cover; }
.prom-shopcard-info { flex: 1; min-width: 0; }
.prom-shopcard-name { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prom-shopcard-n { font-size: 12.5px; color: var(--text-dim); }
.prom-shopcard-go { flex: 0 0 auto; color: var(--text-dim); transform: rotate(180deg); display: flex; }
.prom-form { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.prom-logo-pick { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.prom-logo-prev { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 18px; overflow: hidden; background: var(--bg2); border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.prom-logo-prev img { width: 100%; height: 100%; object-fit: cover; }
.prom-logo-pick span { font-size: 13.5px; color: var(--text); }
.prom-logo-pick small { color: var(--text-dim); }
.prom-shop-head { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 0 4px; }
.shp-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 16px 10px; }
.shp-hero-logo { width: 78px; height: 78px; border-radius: 20px; overflow: hidden; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.shp-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.shp-hero-name { font-size: 22px; font-weight: 800; }
.prom-shop-actions { max-width: 620px; margin: 12px auto 0; padding: 0 16px; }
/* Fila superior del formulario de crear tienda del promotor: Volver (izq) + Crear tienda (der). */
.psc-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 8px; }
.psc-toprow .back { margin: 0; }
.psc-toprow .psc-go-top { flex: 0 0 auto; width: auto; margin: 0; padding: 9px 18px; font-size: 14.5px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 12px; border: 1px solid var(--green); background: var(--green); background-image: none; color: #06231a; box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 40%, transparent); transition: filter .15s ease, transform .12s ease; }
.psc-toprow .psc-go-top:hover { filter: brightness(1.06); }
.psc-toprow .psc-go-top:active { transform: scale(.98); }
@media (min-width: 1000px) { .prom-panel, .prom-how, .prom-code, .prom-hero, .prom-stats { max-width: 620px; margin-left: auto; margin-right: auto; } }
/* Página del promotor (/promotores/inicio): un poco más ancha para que quepan más tarjetas. */
body.apply-iso #ps-body .prom-hero,
body.apply-iso #ps-body .prom-code,
body.apply-iso #ps-body .prom-panel { max-width: 900px; margin-left: auto; margin-right: auto; }
.mp-hero { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--accent), #4a5fd0); border-radius: 18px; padding: 15px 17px; margin-bottom: 15px; color: #fff; box-shadow: 0 10px 26px rgba(74,95,208,.28); }
.mp-hero-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.mp-hero-n { font-size: 18px; font-weight: 800; }
.mp-hero-s { font-size: 13px; opacity: .92; margin-top: 2px; }
.mp-hero-s b { font-size: 16px; }
/* Panel de MENSAJERO — hero premium (azul mensajería). */
.mnj-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 13px; border-radius: 18px; padding: 17px; margin-bottom: 15px; background: linear-gradient(140deg, #1c2b52, #141a2e 60%, #12121a); border: 1px solid rgba(91,155,255,.28); }
.mnj-hero-glow { position: absolute; top: -70px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(91,155,255,.4), transparent 70%); filter: blur(8px); pointer-events: none; }
.mnj-hero-badge { position: relative; z-index: 1; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #5b9bff, #3f6fd8); color: #fff; box-shadow: 0 8px 20px rgba(63,111,216,.45); }
.mnj-hero-tx { position: relative; z-index: 1; flex: 1; min-width: 0; }
.mnj-hero-n { font-size: 19px; font-weight: 800; color: #fff; }
.mnj-hero-s { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 2px; }
.mnj-hero-s b { color: #8fb8ff; font-size: 15px; }
.mnj-online { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #35d07f; background: rgba(53,208,127,.14); border: 1px solid rgba(53,208,127,.3); border-radius: 999px; padding: 5px 10px; }
.mp-order { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.mp-order-body { padding: 14px; }
/* Mapa embebido con el punto exacto de entrega (arriba de la tarjeta) */
.mp-map { position: relative; height: 150px; width: 100%; background: var(--panel); }
.mp-map .leaflet-container { height: 100%; width: 100%; background: var(--panel); }
.mp-map-tag { position: absolute; top: 10px; left: 10px; z-index: 500; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.mp-mk span { display: block; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; background: var(--green); border: 2.5px solid #fff; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.mp-o-head { display: flex; align-items: center; gap: 12px; }
.mp-o-thumb { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.mp-o-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mp-o-info { flex: 1; min-width: 0; }
.mp-o-title { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-o-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.mp-o-amt { flex: 0 0 auto; font-weight: 800; font-size: 16px; }
.mp-route { position: relative; margin: 13px 0 2px; }
.mp-route::before { content: ""; position: absolute; left: 12px; top: 24px; bottom: 24px; width: 2px; background: var(--line); }
.mp-stop { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; }
.mp-marker { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; z-index: 1; }
.mp-marker.pick { background: #5b9bff; }
.mp-marker.drop { background: var(--green); }
.mp-stop-tx { flex: 1; min-width: 0; }
.mp-stop-tx b { display: block; font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
.mp-stop-tx span { font-size: 14px; font-weight: 600; }
.mp-stop-tx small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 1px; overflow-wrap: anywhere; }
.mp-wa { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37,211,102,.15); color: #25d366; }
.mp-extra { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.mp-note { font-size: 12.5px; color: var(--gold); margin-top: 8px; display: flex; align-items: flex-start; gap: 6px; }
.mp-acts { display: flex; gap: 8px; margin-top: 13px; }
.mp-nav { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(108,140,255,.14); color: var(--accent); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.mp-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 12px; background: var(--green); color: #06210f; font: inherit; font-weight: 800; font-size: 14.5px; padding: 12px; cursor: pointer; }
.mp-go svg { stroke-width: 2.4; }
.mp-go:active { transform: scale(.98); }
/* Solicitudes de rol en la Database (KYC) */
.rolq { background: var(--bg2); border: 1px solid rgba(232,184,75,.35); border-radius: 14px; padding: 12px 13px; margin-bottom: 14px; }
.rolq-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--gold); margin-bottom: 10px; }
/* Grilla de tarjetas de solicitud (agrupadas por usuario), varias columnas en PC. */
.rolq-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .rolq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .rolq-grid { grid-template-columns: repeat(3, 1fr); } }
.rolq-card { display: block; background: var(--card, #16171c); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; min-width: 0; }
.rolq-user { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rolq-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 15px; }
.rolq-who { min-width: 0; }
.rolq-who b { font-size: 14px; font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolq-who small { font-size: 11.5px; color: var(--text-dim); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolq-roles { display: flex; flex-direction: column; gap: 6px; }
.rolq-role { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px 6px 10px; }
.rolq-role-name { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; min-width: 0; }
.rolq-role-name svg { color: var(--accent); flex: 0 0 auto; }
.rolq-role-acts { flex: 0 0 auto; display: flex; gap: 6px; }
.rolq-ok, .rolq-no { width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rolq-ok { background: var(--green); color: #06210f; }
.rolq-no { background: rgba(255,91,110,.15); color: var(--red); }
.db-tab.active { background: var(--panel2); color: var(--text); border-color: var(--accent); }
.db-img { width: 100%; max-height: 240px; object-fit: contain; background: #fff; border-radius: 10px; margin: 4px 0 8px; cursor: pointer; display: block; }
/* Barra de mejora de foto (IA) */
.enhance-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.enhance-bar .eh-label { font-size: 12.5px; color: var(--text-dim); margin-right: 2px; }
.eh-btn { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); transition: background .15s, opacity .15s; }
.eh-btn:active { background: var(--panel); }
.eh-btn:disabled { opacity: .55; cursor: default; }
.eh-btn.eh-revert { color: var(--text-dim); }
/* ── Ventas recibidas (pro) ─────────────────────────────────────────── */
.sales-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 12px; }
.sales-hero-n { font-size: 15px; color: var(--text-dim); }
.sales-hero-n b { font-size: 26px; font-weight: 800; color: var(--text); margin-right: 4px; }
.sales-hero-p { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gold); background: rgba(232,184,75,.13); padding: 6px 12px; border-radius: 999px; }
.sales-hero-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); }
.sales-hero-ok svg, .sales-hero-p svg { stroke-width: 2.4; }
/* Filtros por estado */
.sale-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding-bottom: 2px; }
.sale-filters::-webkit-scrollbar { display: none; }
.sale-fchip { flex: 0 0 auto; background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.sale-fchip span { display: inline-block; margin-left: 5px; background: var(--panel2, rgba(255,255,255,.08)); border-radius: 999px; padding: 0 6px; font-size: 11.5px; }
.sale-fchip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.sale-fchip.on span { background: rgba(0,0,0,.18); }
/* Tarjeta de venta */
.sale-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; margin-bottom: 11px; }
.sale-card.attn { border-color: rgba(232,184,75,.5); box-shadow: 0 0 0 1px rgba(232,184,75,.18), 0 6px 18px rgba(0,0,0,.22); }
.sale-head { display: flex; align-items: flex-start; gap: 12px; }
.sale-thumb { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 12px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.sale-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sale-thumb.coin { background: linear-gradient(135deg,#f7d774,#e0a838); font-size: 24px; }
.sale-mid { flex: 1; min-width: 0; }
.sale-title { font-weight: 700; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sale-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.sale-rt { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sale-amt { font-size: 16px; font-weight: 800; }
.sale-pill { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.sale-pill.gold { color: #e8b84b; background: rgba(232,184,75,.16); }
.sale-pill.blue { color: #5b9bff; background: rgba(91,155,255,.16); }
.sale-pill.accent { color: var(--accent); background: rgba(108,140,255,.16); }
.sale-pill.green { color: var(--green); background: rgba(46,192,138,.16); }
.sale-pill.red { color: #ff6b6b; background: rgba(255,107,107,.16); }
.sale-pill.dim { color: var(--text-dim); background: rgba(255,255,255,.07); }
.sale-buyer { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.sale-buyer-tx { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale-buyer-tx svg { flex: 0 0 auto; color: var(--text-dim); }
.sale-wa { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37,211,102,.15); color: #25d366; }
.sale-note { font-size: 12.5px; color: var(--text-dim); margin-top: 7px; }
.sale-note.gold { color: var(--gold); display: flex; align-items: flex-start; gap: 6px; }
.sale-addr { display: flex; align-items: flex-start; gap: 8px; margin-top: 9px; padding: 9px 11px; background: rgba(108,140,255,.09); border-radius: 11px; font-size: 12.5px; line-height: 1.45; }
.sale-addr svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.sale-addr a { color: var(--accent); font-weight: 600; }
.sale-hint { font-size: 12px; color: var(--text-dim); margin-top: 9px; line-height: 1.4; }
.sale-acts { display: flex; gap: 8px; margin-top: 12px; }
.sale-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14px; padding: 11px; cursor: pointer; background: var(--green); color: #06210f; }
.sale-go svg { stroke-width: 2.4; }
.sale-go:active { transform: scale(.98); }
.sale-cancel { flex: 0 0 auto; border: 1px solid var(--line); background: none; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 11px 14px; border-radius: 12px; cursor: pointer; }
.sale-ghost { flex: 0 0 auto; border: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 11px 13px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
/* Pedidos (panel de Tiendas) — filas compactas estilo transacciones; al tocar → página de detalle */
.ord-row .ti { overflow: hidden; background: #fff; padding: 0; }
.ord-row .ti img { width: 100%; height: 100%; object-fit: cover; }
.ord-row .ti svg { color: var(--text-dim); }
.ord-st { font-weight: 600; }
.ord-st.gold { color: var(--gold); } .ord-st.blue { color: #5b9bff; } .ord-st.green { color: var(--green); } .ord-st.red { color: #ff6b6b; } .ord-st.dim { color: var(--text-dim); }
/* Página de detalle del pedido — foto + cada dato en su propia fila */
.opd { padding: 6px 0 30px; max-width: 520px; margin: 0 auto; }
.opd-photo { width: 118px; height: 118px; margin: 4px auto 14px; border-radius: 20px; overflow: hidden; background: #fff;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim); box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.opd-photo img { width: 100%; height: 100%; object-fit: cover; }
.opd-name { text-align: center; font-size: 19px; font-weight: 800; line-height: 1.3; margin: 0 auto 18px; max-width: 90%; }
.opd-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.opd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; text-align: left;
  padding: 14px 15px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: 14.5px; }
.opd-row > b { min-width: 0; }
.opd-row:last-child { border-bottom: none; }
.opd-row > span { color: var(--text-dim); flex: 0 0 auto; }
.opd-row > b { font-weight: 700; text-align: right; word-break: break-word; }
button.opd-row { cursor: pointer; }
button.opd-row b { display: inline-flex; align-items: center; gap: 6px; }
button.opd-row svg { color: var(--text-dim); }
.opd-hint { text-align: center; font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 16px 6px 0; }
.op-acts { margin-top: 18px; }
.order-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; padding: 13px 14px; }
.order-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.order-top .oc { font-weight: 700; font-size: 15.5px; }
/* Transacciones (Datos): el título se recorta a UNA línea con "…" (no debe romper la
   tarjeta). El detalle completo sale al tocar (popup) y en el tooltip (title=""). */
.dbtx-card .order-top .oc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbtx-card .order-top .badge { flex: 0 0 auto; }
.order-line { font-size: 13.5px; color: var(--text-dim); padding: 1px 0; }
/* Línea de tiempo del pedido */
.otl { display: flex; align-items: flex-start; margin: 12px 2px 8px; }
.otl-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; width: 58px; }
.otl-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--line); color: var(--text-dim); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.otl-step.done .otl-dot { background: var(--green); border-color: var(--green); color: #ffffff; }
.otl-step.active .otl-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(108,140,255,.15); }
.otl-l { font-size: 11px; color: var(--text-dim); text-align: center; line-height: 1.2; }
.otl-step.done .otl-l, .otl-step.active .otl-l { color: var(--text); font-weight: 600; }
.otl-bar { flex: 1; height: 3px; background: var(--line); margin-top: 12px; border-radius: 3px; }
.otl-bar.on { background: var(--green); }
/* Segmento EN CURSO: barrita de progreso animada que fluye hacia el siguiente paso. */
.otl-bar.active {
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 35%, var(--accent) 50%, var(--green) 65%, var(--green) 100%);
  background-size: 250% 100%;
  animation: otlflow 1.15s linear infinite;
  box-shadow: 0 0 6px rgba(108,140,255,.45);
}
@keyframes otlflow { from { background-position: 200% 0; } to { background-position: 0 0; } }
.otl-step.active .otl-dot { animation: otlpulse 1.4s ease-in-out infinite; }
@keyframes otlpulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(108,140,255,.15); }
  50%     { box-shadow: 0 0 0 7px rgba(108,140,255,.05); }
}
.otl-cancel { display: flex; align-items: center; gap: 7px; margin: 10px 2px 4px; color: var(--red); font-size: 13px; font-weight: 600; }
/* Animación de reparto (doble video, bucle perfecto + póster instantáneo) — en camino */
.dlv { margin: 10px 0 6px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #1a1f3e; }
.dlv-frame { position: relative; width: 100%; padding-bottom: 60.2%; /* 650/1080 */
  background: #1a1f3e center/cover no-repeat; }
.dlv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; transition: opacity .14s linear; }
.dlv-label { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 0 9px; }
@media (prefers-reduced-motion: reduce) { .dlv-rig, .dlv-wheel, .dlv-ground, .dlv-speed { animation: none; } }
.order-line b { color: var(--text); }
.order-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.order-actions button { padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.order-actions button.go { background: var(--green); color: #ffffff; border: none; }
.order-actions button.no { background: var(--red); color: #fff; border: none; }
/* Toggle (switch) para admin cripto */
.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--panel2); border-radius: 24px; transition: .2s; cursor: pointer; }
.slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider:before { transform: translateX(18px); }

/* ════════ Animaciones / fluidez ════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Transición de vista: las vistas raíz suben (fade-up); el detalle/formularios
     (más "profundos") entran deslizando desde la derecha → sensación de jerarquía. */
  /* Vistas de pestaña: aparecen AL INSTANTE (sin animación). Antes la animación de entrada
     hacía que el contenido/barra "se levantara" o que se viera un fundido a negro al cambiar. */
  #app > .view { animation: none; }
  #app > .auth-wrap { animation: viewIn .2s cubic-bezier(.22,.61,.36,1) both; }
  #app > .detail, #app > .sheet { animation: pushIn .22s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pushIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

  /* Entrada escalonada de tarjetas de producto */
  .grid .card { animation: cardIn .26s cubic-bezier(.22,.61,.36,1) both; }
  .grid .card:nth-child(1){animation-delay:.01s}.grid .card:nth-child(2){animation-delay:.03s}
  .grid .card:nth-child(3){animation-delay:.05s}.grid .card:nth-child(4){animation-delay:.07s}
  .grid .card:nth-child(5){animation-delay:.09s}.grid .card:nth-child(6){animation-delay:.11s}
  .grid .card:nth-child(7){animation-delay:.13s}.grid .card:nth-child(n+8){animation-delay:.15s}
  @keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

  /* Filas de listas */
  .lrow, .tx, .dep-method, .order-card { animation: rowIn .22s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes rowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

  /* Imágenes aparecen suave */
  .card .ph img, .detail .hero img, .store-banner { animation: imgFade .5s ease both; }
  @keyframes imgFade { from { opacity: 0; } to { opacity: 1; } }

  /* Chips */
  .chip { transition: background .18s, color .18s, transform .12s; }
  .chip:active { transform: scale(.94); }
}

/* Micro-interacciones (siempre) */
.card, .lrow, .menu-item, .iconbtn, .btn, .coin-card, .dep-method[data-np], .store-link {
  transition: transform .12s cubic-bezier(.22,.61,.36,1), box-shadow .18s, background .18s, border-color .18s, opacity .18s;
}
.card:active { transform: translateY(1px) scale(.985); }
.lrow:active { transform: scale(.99); background: var(--panel); }
.iconbtn:active { transform: scale(.9); }
.fab { transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.fab:active { transform: scale(.88); }
.btn:active { transform: translateY(1px) scale(.99); }

/* Skeleton loaders (shimmer) */
.skel { position: relative; overflow: hidden; background: var(--bg2); border-radius: 12px; }
.skel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skel-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.skel-card .skel-ph { width: 100%; aspect-ratio: 1; }
.skel-line { height: 12px; border-radius: 6px; margin: 10px 11px; }
.skel-line.sm { width: 55%; height: 10px; }
/* Esqueleto de la pila de tarjetas de la Billetera (dos tarjetas apiladas que brillan) */
.wcard-skel { position: relative; width: 100%; max-width: 600px; margin: 26px auto 12px; }
.wcard-skel .dcard-skel { width: 100%; aspect-ratio: 1.586; border-radius: 18px; background: linear-gradient(135deg, #2a2c38, #1b1d27); }
.wcard-skel .dcard-skel.back { position: absolute; top: -13px; left: 4%; width: 92%; opacity: .45; z-index: 0; }
.wcard-skel .dcard-skel.front { position: relative; z-index: 1; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.wcard-skel .dcard-skel::after { animation-duration: 1.5s; }

/* Pulso sutil del logo en el splash */
.splash svg { animation: floaty 2.6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Ripple al tocar — OJO: NO incluir .fab en position:relative (rompería su fixed). */
.card, .btn, .lrow, .iconbtn, .chip, .auth-btn, .menu-item, .cc-save, .dm-link { position: relative; }
.card, .btn, .lrow, .iconbtn, .chip, .fab, .auth-btn, .menu-item, .cc-save { overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.22); pointer-events: none; z-index: 1; animation: rippleAnim .55s ease-out forwards; }
@keyframes rippleAnim { to { transform: scale(2.6); opacity: 0; } }

/* Transición de elemento compartido (la foto vuela al detalle) */
.fly-clone { position: fixed; z-index: 300; object-fit: contain; background: #fff; pointer-events: none;
  will-change: transform, width, height, top, left; transition: left .32s cubic-bezier(.22,.61,.36,1), top .32s cubic-bezier(.22,.61,.36,1), width .32s cubic-bezier(.22,.61,.36,1), height .32s cubic-bezier(.22,.61,.36,1), border-radius .32s; }

/* Pull-to-refresh */
.ptr { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 0; transition: height .2s, opacity .2s; }
.ptr .spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; }
.ptr.spin .spinner { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Evitar el auto-zoom de iOS al enfocar un campo (necesita >= 16px) */
input, select, textarea, .input, .lf .wrap input, .lf .wrap select { font-size: 16px !important; }

/* Botón flotante para instalar la PWA (aparece solo si el navegador lo permite) */
.install-fab { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 26px;
  background: var(--green); color: #ffffff; font-weight: 800; font-size: 14.5px;
  box-shadow: 0 10px 28px rgba(95,184,120,.45); animation: toastIn .3s cubic-bezier(.34,1.56,.64,1); }
.install-fab:active { transform: translateX(-50%) scale(.95); }

/* ── Escritorio / PC: la app se ve como un shell centrado, no flotando en negro ── */
@media (min-width: 1000px) {
  body { background: #08080a; }
  /* Fondo decorativo sutil detrás del shell */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60vw 60vh at 12% -8%, rgba(108,140,255,.10), transparent 60%),
      radial-gradient(55vw 55vh at 95% 105%, rgba(95,184,120,.10), transparent 60%);
  }
  #app {
    background: var(--bg);
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    box-shadow: 0 0 60px rgba(0,0,0,.55);
    min-height: 100vh;
  }
  /* La burbuja "+" es solo para móvil (en PC manda el sidebar con "Negocios") */
  .fab { display: none; }
  .topbar { left: 0; right: 0; }
  /* Cuatro columnas aprovechan mejor el ancho en monitores grandes */
  .grid { grid-template-columns: repeat(3, 1fr); padding: 12px 18px 100px; }
  /* Detalle/imagen no se estiran exageradamente */
  .detail .hero { max-height: 460px; }
  /* Hover states (solo donde hay puntero fino, evita "sticky hover" en táctil) */
  .card { transition: transform .12s ease, box-shadow .12s ease; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
  .chip { cursor: pointer; }
  .chip:hover { color: var(--text); border-color: var(--text-dim); }
}
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Calificaciones / estrellas ─────────────────────────────────────────────── */
.rate-row { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); margin: 3px 0 1px; }
.rate-row b { color: var(--gold); }
.rate-row.none { opacity: .65; }
.stars { line-height: 0; }
.reviews { margin-top: 6px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); padding-top: 4px; }
.review { padding: 10px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.06)); }
.review:last-child { border-bottom: none; }
.rv-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.rv-head b { font-size: 13.5px; }
.rv-body { font-size: 13.5px; color: var(--text); line-height: 1.45; margin: 4px 0 2px; }
.rv-date { font-size: 11.5px; color: var(--text-dim); }
/* Selector de estrellas en el modal */
.star-pick { display: flex; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.sp-star { background: none; border: none; padding: 2px; cursor: pointer; line-height: 0; transition: transform .1s ease; }
.sp-star:active { transform: scale(.88); }
.sp-star.on { transform: scale(1.06); }
.sp-label { text-align: center; font-size: 13.5px; color: var(--gold); font-weight: 700; min-height: 18px; margin-bottom: 6px; }

/* ── Gestor Municipal ────────────────────────────────────────────────────────── */
.g-video { display: block; position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 12px; aspect-ratio: 16/9; background: #000; }
.g-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.g-video .g-play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%; background: rgba(220,0,0,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.g-video .g-vlabel { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 12px; color: #fff; font-weight: 800; font-size: 15px; line-height: 1.25; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.g-reqs { margin: 0; padding-left: 4px; list-style: none; counter-reset: greq; }
.g-reqs li { counter-increment: greq; position: relative; padding: 7px 0 7px 34px; font-size: 14px; line-height: 1.4; border-bottom: 1px solid var(--line, rgba(255,255,255,.06)); }
.g-reqs li:last-child { border-bottom: none; }
.g-reqs li::before { content: counter(greq); position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
/* Postulaciones en admin */
.g-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 8px 0 2px; }
.g-app-grid > div { display: flex; flex-direction: column; }
.g-app-grid b { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .3px; }
.g-app-grid span { font-size: 13.5px; color: var(--text); }

/* ── Vista previa de imagen (publicar/editar) ─────────────────────────────────── */
.img-prev { width: 100%; aspect-ratio: 4/3; border-radius: 12px; background: #fff; overflow: hidden; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line, rgba(255,255,255,.08)); }
.img-prev img { width: 100%; height: 100%; object-fit: contain; }
.img-prev .img-prev-empty { color: #9aa; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ── Estadísticas / gráficas ──────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat-card { background: var(--card, #16171c); border: 1px solid var(--line, rgba(255,255,255,.07)); border-radius: 14px; padding: 14px; }
.sc-val { font-size: 22px; font-weight: 800; color: var(--text); }
.sc-lbl { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.sc-sub { font-size: 11.5px; color: var(--green); margin-top: 2px; }
/* ── Contabilidad "ultra pro" ───────────────────────────────────────── */
.acc-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 18px 18px 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, #1f2b5e 0%, #2f1f5e 55%, #16171c 100%); border: 1px solid rgba(108,140,255,.35);
  box-shadow: 0 10px 30px -12px rgba(108,140,255,.45); }
.acc-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(108,140,255,.35), transparent 70%); pointer-events: none; }
.acc-hero-lbl { font-size: 12.5px; color: #c3ccff; font-weight: 600; letter-spacing: .02em; }
.acc-hero-num { font-size: 40px; line-height: 1.05; font-weight: 800; color: #fff; margin: 4px 0 2px; letter-spacing: -.02em; }
.acc-hero-sub { font-size: 11.5px; color: rgba(255,255,255,.6); }
.acc-card { background: var(--card, #16171c); border: 1px solid var(--line); border-radius: 16px; padding: 6px 14px 10px; margin-bottom: 14px; }
.acc-card-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); padding: 12px 0 6px; }
.acc-card-h svg { color: var(--accent); }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.acc-row:first-of-type { border-top: 0; }
.acc-row-l { display: flex; flex-direction: column; font-size: 13.5px; color: var(--text); font-weight: 600; }
.acc-row-l i { font-style: normal; font-size: 11px; color: var(--text-dim); font-weight: 500; margin-top: 1px; }
.acc-row b { font-size: 16px; font-weight: 800; color: var(--green); white-space: nowrap; }
.acc-ledger { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--text-dim); }
.acc-ledger svg { color: var(--accent); }
.acc-ledger b { color: var(--green); font-weight: 800; }
.acc-ledger i { font-style: normal; width: 100%; color: var(--text-dim); opacity: .8; }
.acc-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.chart-box { background: var(--card, #16171c); border: 1px solid var(--line, rgba(255,255,255,.07)); border-radius: 14px; padding: 14px 12px 10px; }
.chart-title { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.acc-spark .bspark { height: 120px; min-height: 120px; }
/* Donut de desglose de ingresos (analítica de la Database). */
.donut-wrap { display: flex; align-items: center; gap: 16px; padding: 8px 2px 14px; flex-wrap: wrap; }
.donut { width: 128px; height: 128px; flex: 0 0 auto; }
.donut-c-v { fill: var(--text); font-size: 15px; font-weight: 800; }
.donut-c-l { fill: var(--text-dim); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 7px; }
.dleg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.dleg-l { flex: 1; }
.dleg b { color: var(--text); font-variant-numeric: tabular-nums; }
.dleg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.bar-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar-fill { width: 100%; min-height: 2px; background: linear-gradient(180deg, var(--accent), #4a5cc4); border-radius: 3px 3px 0 0; transition: height .3s ease; }
.bar-labels { display: flex; gap: 2px; margin-top: 5px; }
.bar-labels span { flex: 1; font-size: 9.5px; color: var(--text-dim); text-align: center; white-space: nowrap; overflow: hidden; }

/* ── Pestañas de la billetera (Desbloqueados / Tarjeta) ───────────────────────── */
.wallet-tabs { display: flex; gap: 6px; background: var(--card, #16171c); border: 1px solid var(--line, rgba(255,255,255,.07)); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.wtab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: none; background: transparent; color: var(--text-dim); font-size: 14px; font-weight: 700; border-radius: 9px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.wtab.active { background: var(--accent); color: #fff; }
.wtab svg { vertical-align: middle; }

/* ── Lista deslizable (movimientos/transacciones): muestra ~5 y hace scroll DENTRO ──── */
.list-scroll { max-height: min(360px, 50vh); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.list-scroll::-webkit-scrollbar { width: 6px; }
.list-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.list-scroll::-webkit-scrollbar-track { background: transparent; }

/* ── Notificaciones (clickeables, no leídas resaltadas) ──────────────────────── */
.notif-row { cursor: pointer; transition: background .12s ease; align-items: center; }
.notif-row:active { background: rgba(255,255,255,.04); }
.notif-row.unread { background: rgba(108,140,255,.08); border-radius: 10px; }
.notif-row.unread .ti { color: var(--accent); }
.notif-go { color: var(--text-dim); display: flex; align-items: center; padding-left: 4px; }

/* ── Formulario de producto estilo Shopify ───────────────────────────────────── */
.pf .pf-card { margin-bottom: 14px; }
.pf .pf-card h3 { margin: 0 0 12px; font-size: 15px; }

/* Split-screen de edición (solo PC, desde la Database): vista previa | formulario. */
@media (min-width: 1000px) {
  .pf.pf-split { max-width: 1180px; margin: 0 auto; }
  /* Formulario IZQUIERDA (ancho) · vista previa DERECHA (angosta, estilo teléfono). */
  .pf.pf-split .pf-split-body { display: grid; grid-template-columns: 1fr minmax(300px, 360px); gap: 28px; align-items: start; }
  .pf.pf-split .pf-form-col { min-width: 0; }
  .pf.pf-split .pf-preview { position: sticky; top: 84px; }
  .pf.pf-split .pf-pv-label { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; margin: 0 0 10px 2px; }
  .pf.pf-split .pf-pv-card { background: var(--panel); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.3); }
  .pf.pf-split .pf-pv-thumbs { display: flex; gap: 6px; padding: 10px 12px 0; flex-wrap: wrap; }
  .pf.pf-split .pf-pv-th { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
  .pf.pf-split .pf-pv-th img { width: 100%; height: 100%; object-fit: cover; }
  .pf.pf-split .pf-pv-pay { margin-top: 12px; }
  .pf.pf-split .pf-pv-img { aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; color: #b9b9c2; }
  .pf.pf-split .pf-pv-img img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
  .pf.pf-split .pf-pv-body { padding: 14px 16px 18px; }
  .pf.pf-split .pf-pv-badge { display: inline-block; margin-bottom: 8px; }
  .pf.pf-split .pf-pv-title { font-weight: 700; font-size: 16px; line-height: 1.35; margin-bottom: 6px; }
  .pf.pf-split .pf-pv-price b { font-size: 19px; }
  .pf.pf-split .pf-pv-old { color: var(--text-dim); text-decoration: line-through; font-size: 13px; }
  .pf.pf-split .pf-pv-disc { color: var(--green); font-size: 13px; font-weight: 700; }
  /* Acciones en la columna de la vista previa (PC), arriba y a la vista: Guardar · Contactar · Borrar. */
  .pf-preview #pf-go { margin-top: 18px; }
  .pf-preview .pf-contact { margin-top: 10px; text-decoration: none; background: rgba(37,211,102,.14); color: #25d366; border: 1px solid rgba(37,211,102,.42); font-weight: 700; }
  .pf-preview .pf-contact svg { color: #25d366; }
  .pf-preview #pf-err { margin: 6px 0 0; }
  /* "Borrar producto" al final (columna de vista previa): botón ROJO sólido. */
  .pf-preview .pf-del-pc { margin-top: 10px; background: var(--red); color: #fff; border: 1px solid var(--red); font-weight: 800; }
  .pf-preview .pf-del-pc svg { color: #fff; }
}
.pf-desc { min-height: 120px; resize: vertical; line-height: 1.5; }
#pf-desc-big { min-height: 240px; }
.pf-desc-btn { justify-content: center; gap: 7px; }
/* Fila descripción: botón editar + varita IA. La varita mejora título/descripción a pedido. */
.pf-desc-row { display: flex; gap: 8px; align-items: center; }
.pf-desc-row .pf-desc-btn { flex: 1; }
.pf-desc-row .pf-desc-btn { min-height: 0; }
.pf-wand { flex: none; width: auto; min-height: 0; display: inline-flex; align-items: center; gap: 5px; justify-content: center;
  padding: 8px 12px; font-size: 12.5px; font-weight: 700; border-radius: 10px; line-height: 1;
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pf-wand svg { width: 15px; height: 15px; color: var(--accent); }
.pf-wand:disabled { opacity: .6; }
/* Varita sobre cada foto nueva (esquina): mejora esa foto con IA. */
.pf-wandimg { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 8px;
  border: none; background: rgba(13,148,136,.92); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.pf-wandimg svg { color: #fff; }
.pf-wandimg:disabled { opacity: .7; }
.pf-thumb-load { position: relative; }
.pf-thumb-load::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' d='M12 3a9 9 0 1 0 9 9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center/30px no-repeat; }
.pf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.pf-thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line, rgba(255,255,255,.08)); }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-main { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 10.5px; text-align: center; padding: 2px; font-weight: 700; }
.pf-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pf-add { aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed var(--line, rgba(255,255,255,.18)); background: transparent; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-size: 11.5px; }
.pf-add:active { background: rgba(255,255,255,.04); }
/* ── Variantes NUEVAS: picker de productos de la tienda (formulario) ── */
.pf-varlist { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.pf-varitem { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.pf-varitem:hover { border-color: var(--accent); }
.pf-varitem.on { border-color: var(--accent); background: rgba(108,140,255,.08); }
.pf-varitem input { position: absolute; opacity: 0; pointer-events: none; }
.pf-varitem-img { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.pf-varitem-img img { width: 100%; height: 100%; object-fit: cover; }
.pf-varitem-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-varitem-tx b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-varitem-tx small { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.pf-varitem-ck { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; color: transparent; }
.pf-varitem.on .pf-varitem-ck { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ── Variantes NUEVAS: chips de productos-variante en el DETALLE ── */
.pd-vargroup { margin: 16px 0 6px; }
.pd-vargroup-h { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 10px; }
/* Cuadrícula tipo Amazon: tarjetas verticales (imagen arriba, valor, precio, disponibilidad). */
.pd-varprods { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.pd-varprod { display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg2); color: var(--text); cursor: pointer; overflow: hidden; text-align: left; transition: border-color .15s, transform .1s; }
.pd-varprod:hover { border-color: var(--accent); }
.pd-varprod:active { transform: scale(.98); }
.pd-varprod.on { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; cursor: default; opacity: 1; }
.pd-varprod-img { width: 100%; aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.pd-varprod-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-varprod-v { font-size: 12.5px; font-weight: 700; line-height: 1.25; padding: 7px 8px 0; }
.pd-varprod-p { font-size: 13px; font-weight: 800; color: var(--text); padding: 2px 8px 0; }
.pd-varprod-av { font-size: 11px; font-weight: 600; color: var(--green); padding: 1px 8px 9px; }
/* Variante de almacenamiento/capacidad: SOLO texto (sin miniatura) → tarjeta compacta tipo píldora. */
.pd-varprod.pd-varprod-txt { align-items: center; justify-content: center; min-height: 58px; padding: 10px 12px; }
.pd-varprod.pd-varprod-txt .pd-varprod-v { padding: 0; text-align: center; font-size: 13.5px; }
.pd-varprod.pd-varprod-txt .pd-varprod-p { padding: 3px 0 0; text-align: center; }
/* ── Selector de variantes MULTI-EJE (estilo Amazon): una fila de chips por cada eje ── */
.pd-varaxes { padding: 0 16px; margin: 14px 0 6px; display: flex; flex-direction: column; gap: 14px; }
.pd-varax-h { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.pd-varax-h b { color: var(--text); }
.pd-varax-vals { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-varax-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--text); cursor: pointer; transition: border-color .15s, transform .1s; min-width: 56px; }
.pd-varax-chip.has-img { align-items: center; padding: 7px 9px 8px; gap: 4px; min-width: 72px; }
.pd-varax-img { display: block; width: 58px; height: 58px; border-radius: 9px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.pd-varax-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-varax-chip.off .pd-varax-img img { filter: grayscale(1); }
.pd-varax-chip:hover { border-color: var(--accent); }
.pd-varax-chip:active { transform: scale(.97); }
.pd-varax-chip.on { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; cursor: default; }
.pd-varax-chip.off { opacity: .45; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(128,128,128,.6); }
.pd-varax-v { font-size: 13.5px; font-weight: 700; }
.pd-varax-p { font-size: 12px; font-weight: 800; color: var(--text-dim); }
.pd-varax-no { font-size: 10.5px; font-weight: 600; color: var(--text-dim); }
.pf-var { background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px; padding: 10px; margin-bottom: 12px; }
.pf-var-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pf-var-head .pf-vname { flex: 1; }
.pf-var .pf-del { position: static; width: 30px; height: 30px; flex-shrink: 0; }
.pf-vvlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pf-vv { display: grid; grid-template-columns: 46px 1fr 84px 66px auto; gap: 7px; align-items: center; }
.pf-vv-photo { width: 46px; height: 46px; border-radius: 10px; border: 1.5px dashed var(--line, rgba(255,255,255,.2)); background: rgba(255,255,255,.03); color: var(--text-dim); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; padding: 0; }
.pf-vv-photo img { width: 100%; height: 100%; object-fit: cover; }
.pf-vv .input { padding: 9px 10px; }
.pf-addval { width: 100%; font-size: 13px; padding: 9px; }

/* Galería de fotos en el detalle del producto + selectores de variantes */
.gal-thumbs { display: flex; gap: 8px; padding: 10px 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gal-t { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #fff; padding: 0; cursor: pointer; }
.gal-t.active { border-color: var(--accent); }
.gal-t img { width: 100%; height: 100%; object-fit: cover; }
.pv-variants { margin: 6px 0 14px; }
.pv-opt { margin-bottom: 10px; }
.pv-name { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.pv-vals { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-val { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--line, rgba(255,255,255,.14)); background: transparent; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.pv-val.active { border-color: var(--accent); background: rgba(108,140,255,.15); color: #fff; }
.pv-val.has-img { padding: 5px 12px 5px 5px; }
.pv-thumb { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.pv-price { color: var(--accent); font-weight: 800; font-size: 13px; }
.pv-pick { color: var(--text); font-weight: 700; }
/* Variantes de COLOR como círculos (estilo Apple): el seleccionado lleva un anillo de acento. */
.pv-colors { display: flex; flex-wrap: wrap; gap: 11px; }
.pv-color { width: 38px; height: 38px; border-radius: 50%; padding: 3px; border: 2px solid transparent; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, transform .1s; }
.pv-color-dot { width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 4px rgba(0,0,0,.35); }
.pv-color.active { border-color: var(--accent); }
.pv-color:active { transform: scale(.9); }
/* Swatches de imagen estilo Temu/Shopify: el cliente toca y cambia foto + precio */
.pv-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 5px; border-radius: 13px; border: 2px solid var(--line, rgba(255,255,255,.14)); background: transparent; color: var(--text); cursor: pointer; }
.pv-sw img, .pv-sw-noimg { width: 62px; height: 62px; border-radius: 9px; object-fit: cover; }
.pv-sw-noimg { display: flex; align-items: center; justify-content: center; background: var(--panel2, rgba(255,255,255,.06)); color: var(--text-dim); font-weight: 800; }
.pv-sw-l { font-size: 12px; font-weight: 600; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-sw .pv-price { font-size: 12px; }
.pv-sw.active { border-color: var(--accent); background: rgba(108,140,255,.12); }

/* ════════════════════════════════════════════════════════════════════════════
   MEJORAS PRO (build 75) — navegación inferior, saludo, toasts, micro-interacciones
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Barra de navegación inferior (app nativa) ─────────────────────────────── */
#tabbar {
  /* Liquid glass (estilo iOS 26): barra flotante, muy translúcida, blur fuerte y borde con brillo. */
  position: fixed; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 45;
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 7px 6px; border-radius: 28px;
  background: rgba(11,11,15,.86); backdrop-filter: blur(14px) saturate(1.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05);
  /* Sin transición de transform: antes el tabbar "se levantaba y volvía" al cambiar de vista
     (cuando venías de un checkout/hoja/login que lo ocultaba). Ahora oculta/muestra al instante. */
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 5px; color: var(--text-dim); font-size: 10.5px; font-weight: 600;
  position: relative; transition: color .15s ease;
}
.tab .tab-ic { position: relative; display: flex; align-items: center; justify-content: center; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.tab.active { color: var(--accent); }
.tab.active .tab-ic { transform: translateY(-2px); }
.tab:active .tab-ic { transform: scale(.86); }
.tab.center .tab-ic {
  width: 50px; height: 50px; margin-top: -18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff;
  box-shadow: 0 8px 22px rgba(108,140,255,.5); border: 3px solid var(--bg);
}
.tab.center.active .tab-ic { transform: translateY(-2px) scale(1.03); }
.tab-dot { position: absolute; top: -2px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); }
/* deja espacio para que la barra no tape el contenido */
#app { padding-bottom: 78px; }
/* Toda vista llena la pantalla desde el inicio (incluido el estado "Cargando…"). Antes las
   vistas async colapsaban a alto corto y al cargar el contenido daban un salto corto→alto que
   movía el viewport del navegador y hacía "saltar" la barra inferior (espacio negro). Perfil,
   al ser síncrono, no saltaba. Con esto todas se comportan igual: sin salto. */
.view { min-height: 100dvh; }
/* la barra se esconde cuando hay algo modal encima (checkout, hojas, menú, login) */
body:has(.btn-pay) #tabbar,
body:has(.bottom-sheet.show) #tabbar,
body:has(.drawer.show) #tabbar,
body:has(.auth-sheet) #tabbar,
body:has(.pf) #tabbar,
body:has(.cbform) #tabbar,
body:has(.store-view) #tabbar,
body:has(.pdetail) #tabbar,
body:has(.ck-sheet) #tabbar,
body:has(.bizmanage) #tabbar,
body:has(.modal-ov) #tabbar,
body.no-tabbar #tabbar,
body.hide-tabbar #tabbar { transform: translateY(160%); opacity: 0; pointer-events: none; }   /* respaldo sin :has (navegadores viejos); opacity+pointer-events para que el botón central (que sobresale) no quede asomando */
/* hide-tabbar oculta SOLO el tabbar móvil (Tus Tiendas / Promotores); en PC el nav superior sigue intacto. */
/* en PC manda el sidebar: no hay barra inferior */
@media (min-width: 1000px) { #tabbar { display: none; } #app { padding-bottom: 0; } #tb-db, #pr-db { display: none; } }
/* En PC el menú lateral ya tiene Database → se oculta el acceso duplicado del perfil */
@media (min-width: 1000px) { .pf-mobile-only { display: none; } }

/* ── Saludo personalizado en el inicio ─────────────────────────────────────── */
.greet-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; animation: viewIn .4s ease; }
.greet-row .greet { flex: 1; min-width: 0; animation: none; }
.greet-row .filt-btn { flex-shrink: 0; margin: 14px 16px 0 0; }
.greet { padding: 14px 16px 2px; font-size: 20px; font-weight: 800; line-height: 1.2; animation: viewIn .4s ease; }
.greet b { color: var(--accent); }
.greet span { display: block; font-size: 13px; font-weight: 500; color: var(--text-dim); margin-top: 3px; }

/* ── Toast con animación de entrada/salida e iconos de estado ──────────────── */
.toast { display: flex; align-items: center; gap: 8px; animation: none;
  opacity: 0; transform: translateX(-50%) translateY(16px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.34,1.56,.64,1); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-ic { display: flex; align-items: center; }
.toast-ok { border-color: var(--green); } .toast-ok .toast-ic { color: var(--green); }
.toast-error { border-color: var(--red); } .toast-error .toast-ic { color: var(--red); }

/* ── Micro-interacciones (sensación premium) ───────────────────────────────── */
.btn, .card, .lrow, .menu-item, .iconbtn, .floatbtn { transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, filter .15s ease; }
.btn:active { transform: scale(.97); }
.card:active { transform: scale(.985); }
.lrow:active { transform: scale(.99); }
.btn.accent { background-image: linear-gradient(135deg, var(--accent), #4a5cc4); box-shadow: 0 6px 18px rgba(108,140,255,.28); }
.btn.accent:active { box-shadow: 0 3px 10px rgba(108,140,255,.35); }
/* Publicar/Guardar deshabilitado (faltan campos obligatorios): apagado, plano y sin cursor. */
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.35); }
.searchbar { transition: box-shadow .2s ease, border-color .2s ease; }
.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,140,255,.15); }
.chip { transition: background .15s ease, color .15s ease, transform .12s ease; }
.chip:active { transform: scale(.94); }
.chip.active { background: linear-gradient(135deg, var(--accent), #4a5cc4); color: #fff; border-color: transparent; box-shadow: 0 5px 16px rgba(108,140,255,.34); }

/* ── Tarjeta de billetera con brillo premium ───────────────────────────────── */
.wallet-card { position: relative; overflow: hidden; background-image: linear-gradient(135deg, #23314f 0%, #1a1d2e 60%, #14151f 100%); }
.wallet-card::before { content: ""; position: absolute; top: -60%; right: -20%; width: 70%; height: 200%;
  background: radial-gradient(circle, rgba(108,140,255,.22), transparent 70%); pointer-events: none; }
.bal { position: relative; }

/* ════════ MEJORAS PRO 2 (build 76): favoritos, confetti, lightbox, badge ════════ */

/* Confetti */
.confetti-cv { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }

/* Overlay de ÉXITO al publicar un producto/servicio: fondo difuminado + tarjeta con check animado. */
.pubok-ov { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,14,.74); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  animation: pubok-fade .22s ease; }
.pubok-ov.out { animation: pubok-fadeout .28s ease forwards; }
.pubok-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 36px; text-align: center;
  transform: scale(.86); animation: pubok-pop .42s cubic-bezier(.2,1.35,.4,1) forwards; }
.pubok-ring { width: 104px; height: 104px; filter: drop-shadow(0 6px 22px rgba(52,199,89,.4)); }
.pubok-ring svg { width: 100%; height: 100%; }
.pubok-c { fill: none; stroke: #34c759; stroke-width: 2.4; stroke-dasharray: 151; stroke-dashoffset: 151;
  transform-origin: center; transform: rotate(-90deg); animation: pubok-circle .5s ease forwards; }
.pubok-k { fill: none; stroke: #34c759; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 44; stroke-dashoffset: 44; animation: pubok-check .34s .42s ease forwards; }
.pubok-t { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
.pubok-s { font-size: 14px; color: rgba(255,255,255,.72); max-width: 260px; line-height: 1.4; }
@keyframes pubok-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pubok-fadeout { to { opacity: 0 } }
@keyframes pubok-pop { to { transform: scale(1) } }
@keyframes pubok-circle { to { stroke-dashoffset: 0 } }
@keyframes pubok-check { to { stroke-dashoffset: 0 } }

/* ===== Identidad digital cubana (billetera) ===== */
/* Fila minimalista "Identificación cubana" (en la zona de tarjetas): al tocar → KYC. */
.id-prompt { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; margin-top: 12px; padding: 14px 15px;
  border: 1px solid rgba(232,184,75,.34); border-radius: 16px; cursor: pointer; text-align: left; color: inherit; font: inherit; overflow: hidden;
  background: linear-gradient(135deg, rgba(46,54,88,.62), rgba(17,22,42,.72));
  box-shadow: 0 8px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(232,184,75,.06);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease; }
/* Brillo dorado sutil que recorre el borde superior. */
.id-prompt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 8% 0%, rgba(232,184,75,.14), transparent 55%); }
.id-prompt:hover { border-color: rgba(232,184,75,.5); box-shadow: 0 12px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
.id-prompt:active { transform: scale(.99); }
.id-prompt.off { opacity: .72; cursor: default; }
.id-prompt-ic { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(232,184,75,.26), rgba(232,184,75,.1)); color: #f0c860;
  box-shadow: inset 0 0 0 1px rgba(232,184,75,.34), 0 4px 12px rgba(232,184,75,.16); }
.id-prompt-tx { flex: 1; min-width: 0; position: relative; }
.id-prompt-tx b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: .1px; }
.id-prompt-tx small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.id-prompt-cta { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800;
  color: #1a1206; background: linear-gradient(135deg, #f0c860, #e0a838); padding: 7px 12px 7px 13px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(232,184,75,.3); }
.id-prompt-cta svg { stroke-width: 2.6; }
.id-prompt-pill { position: relative; flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #e8b84b; background: rgba(232,184,75,.15); padding: 5px 11px; border-radius: 999px; }
/* Carné digital (estilo del diseño del jefe): tarjeta horizontal navy con logo + candados de fondo,
   foto, QR, datos y firma. */
.idcard-real { position: relative; margin-top: 4px; border-radius: 18px; padding: 16px 18px 18px; overflow: hidden;
  color: #eef1fb;
  background: linear-gradient(140deg, #232a45 0%, #1a2038 45%, #141a2e 100%);
  border: 1px solid rgba(233,216,166,.22); box-shadow: 0 16px 38px rgba(0,0,0,.45); isolation: isolate; }
/* Fuente pulida para el carné (fuentes de calidad del sistema, con fallback). */
.dcard-id, .idcard-real { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Patrón de candados con efecto 3D (relieve/emboss): capa de SOMBRA (oscura, abajo-der) + capa de LUZ
   (clara, arriba-izq); el desfase de 1px entre ambas hace que los candados parezcan tallados en relieve. */
.idcard-real::before {   /* sombra */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23050912' stroke-width='1.6'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7-2.5'/%3E%3C/svg%3E");
  background-size: 18px 18px; background-position: 0.8px 0.9px; }
.idcard-real::after {   /* luz */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23e2d3a0' stroke-width='1.4'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7-2.5'/%3E%3C/svg%3E");
  background-size: 18px 18px; background-position: -0.6px -0.7px; }
.idcard-real > * { position: relative; z-index: 1; }
/* Los candados SOLO cubren la mitad de ABAJO (suben desde el borde inferior y se desvanecen hacia el centro). */
.idcard-real::before, .idcard-real::after, .dcard-id::before, .dcard-id::after {
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 60%);
  mask-image: linear-gradient(to top, #000 40%, transparent 60%); }
/* Sombra suave en la TRANSICIÓN (donde terminan los candados, en el medio): banda horizontal oscura, como un pliegue. */
.dcard-id { background-image: linear-gradient(to top, transparent 40%, rgba(0,0,0,.32) 52%, transparent 68%), linear-gradient(140deg, #2a3150 0%, #1c2340 45%, #141a30 100%); }
.idcard-real { background-image: linear-gradient(to top, transparent 40%, rgba(0,0,0,.32) 52%, transparent 68%), linear-gradient(140deg, #232a45 0%, #1a2038 45%, #141a2e 100%); }
.idcard-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.idcard-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.idcard-brand svg { color: #eef1fb; }
.idcard-qr { width: 82px; height: 82px; flex: 0 0 auto; }
.idcard-qr svg, .idcard-qr .idqr { width: 100%; height: 100%; display: block; }
.idcard-body { display: flex; gap: 15px; margin-top: 12px; align-items: center; }
.idcard-photo { width: 116px; height: 138px; flex: 0 0 auto; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(233,216,166,.35);
  display: flex; align-items: center; justify-content: center; color: rgba(233,216,166,.5); }
.idcard-photo img { width: 100%; height: 100%; object-fit: cover; }
/* La foto del carné es tocable para cambiarla (con ícono de cámara y estado de carga). */
.idv-photo-btn { position: relative; padding: 0; cursor: pointer; font: inherit; }
.idv-photo-cam { position: absolute; right: 5px; bottom: 5px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.62); color: #fff; display: flex; align-items: center; justify-content: center; }
.idv-photo-cam svg { width: 14px; height: 14px; }
.idv-photo-btn.loading { pointer-events: none; }
.idv-photo-btn.loading::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(10,12,18,.6); }
.idv-photo-btn.loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: idkspin .8s linear infinite; }
.idcard-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.idf { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.idf span { font-size: 9.5px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; color: #c9b678; flex: 0 0 52px; }
.idf b { font-size: 13.5px; font-weight: 600; color: #ffffff; text-transform: uppercase; letter-spacing: .5px; line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.idcard-sign { position: absolute; left: 20px; bottom: 12px; z-index: 1; font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
  font-size: 24px; color: #ebe3c8; opacity: .92; }
.id-note { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; padding: 0 4px; display: flex; align-items: flex-start; gap: 6px; }
.id-note > svg { color: #46c97e; flex: 0 0 auto; margin-top: 2px; }

/* ===== Carné de identidad DENTRO de la pila de tarjetas (fiel al diseño: QR arriba-der, foto+datos, firma) ===== */
.dcard-id { background: linear-gradient(140deg, #2a3150 0%, #1c2340 45%, #141a30 100%); color: #eef1fb; }
.dcard-id::before {   /* candados: capa de SOMBRA (efecto 3D en relieve) */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23050912' stroke-width='1.6'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7-2.5'/%3E%3C/svg%3E");
  background-size: 18px 18px; background-position: 0.8px 0.9px; }
.dcard-id::after {   /* candados: capa de LUZ */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23e2d3a0' stroke-width='1.4'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7-2.5'/%3E%3C/svg%3E");
  background-size: 18px 18px; background-position: -0.6px -0.7px; }
.dcard-id > * { position: relative; z-index: 1; }
/* Efecto HOLOGRÁFICO: gradiente de colores animado que se ve SOLO dentro de la forma de los candados
   (patrón usado como máscara). Hace que los candados cambien de color continuamente. */
.idc-holo { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background: linear-gradient(115deg, #6c8cff, #b06cff, #ff7ab6, #ffd36c, #5fe0d0, #6c8cff);
  background-size: 320% 100%; animation: idc-holo 7s linear infinite;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7-2.5'/%3E%3C/svg%3E"), linear-gradient(to top, #000 40%, transparent 60%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7-2.5'/%3E%3C/svg%3E"), linear-gradient(to top, #000 40%, transparent 60%);
  -webkit-mask-size: 18px 18px, cover; mask-size: 18px 18px, cover;
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dcard-id > .idc-holo, .idcard-real > .idc-holo { z-index: 0; }
@keyframes idc-holo { to { background-position: -320% 0; } }
@media (prefers-reduced-motion: reduce) { .idc-holo { animation: none; } }
/* Cabecera (asoma en la pila): logo a la izq, QR a la der — como la foto. */
.cards-stack .dcard-id .dcard-head { top: 13px; left: 14px; right: 14px; align-items: flex-start; }
/* Encabezado: ID arriba a la izquierda, separado en 3 grupos, tamaño moderado. */
.idc-idbig { display: flex; align-items: baseline; gap: 8px; }
.idc-idbig .idc-idlab { color: #c9b678; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.idc-idbig b { font-size: 17px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; letter-spacing: 2px; line-height: 1; text-shadow: none; }
.dcard-id .idc-qr { width: 66px; height: 66px; flex: 0 0 auto; }
.dcard-id .idc-qr svg, .dcard-id .idc-qr .idqr { width: 100%; height: 100%; display: block; }
.dcard-id .idc-body { display: flex; gap: 14px; align-items: center; margin-top: 20px; }
.idc-photo { width: 84px; height: 106px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(233,216,166,.35); background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; color: rgba(233,216,166,.5); }
.idc-photo img { width: 100%; height: 100%; object-fit: cover; }
.idc-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.idc-fields .idf { display: flex; align-items: flex-start; gap: 6px; }
.idc-fields .idf span { flex: 0 0 46px; font-size: 8.5px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; color: #c9b678; }
.idc-fields .idf b { font-size: 12px; font-weight: 600; color: #ffffff; text-transform: uppercase; letter-spacing: .5px; line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.idc-sign { position: absolute; left: 18px; bottom: 9px; z-index: 1;
  font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 20px; color: #ebe3c8; opacity: .92; }

/* Overlay del carné en grande (al tocar la tarjeta de identidad) */
.idview-sheet { width: 100%; max-width: 480px; background: var(--card, #14181d); border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .24s; padding: 18px 18px calc(env(safe-area-inset-bottom,0px) + 18px); }
.idkyc-ov.show .idview-sheet { transform: none; }
.idview-sheet .btn { margin-top: 14px; }

/* Flujo KYC en vivo (identidad) — overlay a pantalla completa */
.idkyc-ov { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6,8,12,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s; }
.idkyc-ov.show { opacity: 1; }
.idkyc-sheet { width: 100%; max-width: 480px; max-height: 94vh; overflow: auto; background: var(--card, #14181d);
  border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .24s; }
.idkyc-ov.show .idkyc-sheet { transform: none; }
.idk-pad { padding: 22px 18px calc(env(safe-area-inset-bottom,0px) + 18px); }
.idk-pad h3 { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.idk-pad p { font-size: 13.5px; color: var(--text-dim); margin-bottom: 15px; line-height: 1.5; }
.idk-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.idk-step { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 12px; padding: 12px 13px; }
.idk-step > svg { color: var(--accent); flex: 0 0 auto; }
.idk-step b { display: block; font-size: 14px; font-weight: 800; }
.idk-step span { display: block; font-size: 12px; color: var(--text-dim); }
.idk-cam { padding: 16px 16px calc(env(safe-area-inset-bottom,0px) + 16px); }
.idk-head { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); text-align: center; margin-bottom: 12px; }
.idk-vwrap { position: relative; width: 100%; background: #000; overflow: hidden; isolation: isolate; }
.idk-vwrap.doc { aspect-ratio: 1.585/1; border-radius: 16px; }
.idk-vwrap.face { aspect-ratio: 3/4; max-width: 320px; margin: 0 auto; border-radius: 20px; }
.idk-vwrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.idk-vwrap.face video { transform: scaleX(-1); }
.idk-frame { position: absolute; inset: 8%; border: 2.5px dashed rgba(255,255,255,.7); border-radius: 12px; pointer-events: none; }
.idk-instr { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 4px; text-align: center; }
.idk-instr b { font-size: 18px; font-weight: 800; }
.idk-cd { font-size: 30px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.idk-cd.flash { color: #46c97e; animation: kvf .3s ease; }
@keyframes kvf { from { transform: scale(.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.idk-verify { text-align: center; padding-top: 34px; padding-bottom: 34px; }
.idk-spin { width: 44px; height: 44px; margin: 0 auto 16px; border: 4px solid var(--line, rgba(255,255,255,.15)); border-top-color: var(--accent); border-radius: 50%; animation: idkspin .8s linear infinite; }
@keyframes idkspin { to { transform: rotate(360deg) } }
.idkyc-sheet .err { color: var(--red, #ff5d5d); font-size: 13px; margin: 6px 0; }

/* Corazón de favorito en las cards */
.card .ph { position: relative; }
.card-fav { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.42); backdrop-filter: blur(4px); color: #fff; display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; transition: transform .15s ease, background .15s ease; z-index: 2; }
.card-fav svg { fill: none; }
.card-fav.on { background: rgba(255,91,110,.92); }
.card-fav.on svg { fill: #fff; }
.card-fav.pop { animation: favPop .32s cubic-bezier(.34,1.8,.5,1); }
@keyframes favPop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
/* Guardado (favorito) en el detalle: botón ROJO ENTERO con el corazón BLANCO relleno. */
.floatbtn.fav-on { background: var(--red); border-color: transparent; color: #fff; }
.floatbtn.fav-on svg { fill: #fff; color: #fff; }
.floatbtn.pop { animation: favPop .32s cubic-bezier(.34,1.8,.5,1); }

/* Badge "Nuevo" */
.card-new { position: absolute; top: 7px; left: 7px; background: linear-gradient(135deg, var(--green), #3f9c5c);
  color: #ffffff; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 8px; z-index: 2; letter-spacing: .3px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3); }
/* Etiqueta de ESTADO en la tarjeta de producto de la Database (arriba a la derecha). */
.card-status { position: absolute; top: 7px; right: 7px; z-index: 3; font-size: 10px; font-weight: 800; padding: 3px 8px;
  border-radius: 8px; color: #fff; letter-spacing: .3px; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.card-status.completado { background: linear-gradient(135deg, var(--green), #3f9c5c); }
.card-status.pendiente { background: linear-gradient(135deg, #e8b84b, #c99320); color: #1a1205; }
.card-status.cancelado { background: linear-gradient(135deg, #ff5b6e, #c43144); }
.db-prod-grid { padding: 0 14px 16px; }
/* PC: tarjetas de producto bien COMPACTAS (tetris) — se acomodan cuantas quepan, sin agrandar. */
@media (min-width: 1000px) {
  #db-body .db-prod-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; gap: 9px; }
  .db-prod-grid .card .body { padding: 7px 8px 9px; }
  .db-prod-grid .card .t { font-size: 12px; }
  .db-prod-grid .card .loc { font-size: 10.5px; }
  .db-prod-grid .card .price { font-size: 13px; }
  .db-prod-grid .card .card-rate { display: none; }   /* en el panel admin no hace falta la fila de estrellas */
  .db-prod-grid .card-status { font-size: 9px; padding: 2px 6px; }
}
/* Toggle Grilla/Tablero + tablero (kanban) de productos en la Database. */
.dbprod-toggle { display: flex; gap: 8px; padding: 2px 14px 12px; }
.dpt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); font-size: 13px; font-weight: 700; cursor: pointer; }
.dpt.on { background: var(--accent); color: #fff; border-color: transparent; }
/* Toggle Tablero | Datos (vista de la Database). */
.db-viewtoggle { display: flex; gap: 8px; padding: 8px 16px 4px; }
.dvt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 11px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.dvt.on { background: var(--accent); color: #fff; border-color: transparent; }
.dvt svg { opacity: .85; }
@media (min-width: 1000px) { .db-view .db-viewtoggle { padding: 14px 30px 2px; max-width: 620px; } }
/* Selección múltiple de productos (Database) para borrar en lote. */
.db-prod-tools { display: flex; justify-content: flex-end; padding: 0 4px 10px; }
.db-selbtn { width: auto; display: inline-flex; align-items: center; gap: 6px; }
.db-selck { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.5); border: 2px solid #fff; color: #fff; display: none; align-items: center; justify-content: center; z-index: 4; }
.db-prod-grid.sel-mode .db-selck { display: flex; }
.db-selck svg { opacity: 0; transition: opacity .12s; }
.db-prod-grid.sel-mode .card { cursor: pointer; }
.db-prod-grid.sel-mode .card-new, .db-prod-grid.sel-mode .card-oferta { display: none; }   /* no chocar con el check */
.card.db-selected { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 16px; }
.card.db-selected .db-selck { background: var(--accent); border-color: var(--accent); }
.card.db-selected .db-selck svg { opacity: 1; }
.db-selbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 14px; background: rgba(30,30,38,.94); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.db-selbar[hidden] { display: none; }
.db-selbar > span { font-weight: 700; font-size: 14px; white-space: nowrap; }
.db-selbar-del { width: auto !important; background: var(--red) !important; color: #fff !important; border: none !important; padding: 10px 18px !important; border-radius: 999px !important; font-weight: 800 !important; display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 1000px) { .db-selbar { bottom: 28px; } }
/* Datos → Tarjetas: tile de tarjeta que AFUERA solo muestra el saldo. */
.db-cardgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px 0 8px; }
@media (min-width: 700px) { .db-cardgrid { grid-template-columns: repeat(4, 1fr); } }
.db-cardtile { position: relative; aspect-ratio: 1.62/1; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; overflow: hidden; color: #fff; background: linear-gradient(135deg, #2a2f45, #14151d); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform .1s; }
.db-cardtile:active { transform: scale(.98); }
.db-cardtile::after { content: ""; position: absolute; top: -42%; right: -22%; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(108,140,255,.35), transparent 70%); pointer-events: none; }
.db-ct-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.db-ct-chip { width: 34px; height: 26px; border-radius: 6px; flex: 0 0 auto; background: linear-gradient(135deg, #e8cd7e, #b8862f); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.db-ct-num { font-size: 14px; letter-spacing: 1.5px; font-weight: 700; opacity: .9; }
.db-ct-foot { position: relative; z-index: 1; }
.db-ct-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.db-ct-balrow { display: flex; align-items: baseline; gap: 7px; }
.db-ct-lbl { font-size: 10.5px; opacity: .65; letter-spacing: .5px; text-transform: uppercase; }
.db-ct-bal { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.db-cardtile.proc .db-ct-bal { font-size: 14px; opacity: .8; font-weight: 700; }
/* Datos → Tarjetas: segmento Tarjetas | Movimientos + lista de gastos de todas las tarjetas. */
.db-cardseg { display: flex; gap: 8px; padding: 2px 0 12px; }
.dbcs { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.dbcs svg { opacity: .8; }
.dbcs.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dbcs.on svg { opacity: 1; }
.db-ctx-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-dim); padding: 0 2px 10px; }
.db-ctx-spent b { color: var(--text); font-size: 14px; }
.db-ctx-list { display: flex; flex-direction: column; gap: 2px; }
.db-ctx-row { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.db-ctx-row:last-child { border-bottom: none; }
.db-ctx-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--bg2); color: var(--text-dim); }
.db-ctx-b { flex: 1; min-width: 0; }
.db-ctx-t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-ctx-s { font-size: 12px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-ctx-a { font-size: 14.5px; font-weight: 800; flex: none; }
.db-ctx-a.pos { color: var(--green); }
.db-ctx-a.neg { color: var(--text); }
.db-ctx-a.dim { color: var(--text-dim); }
.db-ctx-row.declined .db-ctx-t { color: var(--text-dim); text-decoration: line-through; }
@media (min-width: 700px) { .db-ctx-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; } }
/* Datos → Casillero / Compras asistidas: tarjeta de cliente (avatar + nombre + datos). */
.db-clientlist { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 700px) { .db-clientlist { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; } }
.db-clientcard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: transform .1s, border-color .15s; }
.db-clientcard:active { transform: scale(.99); }
.db-cc-av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; }
.db-cc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.db-cc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-cc-name { font-weight: 700; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-cc-meta { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.db-cc-meta svg { opacity: .8; flex: 0 0 auto; }
.db-cc-money { color: var(--green); font-weight: 800; }
/* Datos → Negocios: tarjeta con PORTADA + LOGO. */
.db-biz-list { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 700px) { .db-biz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-content: start; } }
.db-biz-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .1s; }
.db-biz-card:active { transform: scale(.99); }
.db-biz-cover { position: relative; height: 92px; background-size: cover; background-position: center; }
.db-biz-logo { position: absolute; left: 12px; bottom: -18px; width: 52px; height: 52px; border-radius: 13px; overflow: hidden; border: 2px solid var(--panel); background: var(--bg2); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.db-biz-logo img { width: 100%; height: 100%; object-fit: cover; }
.db-biz-logo span { font-weight: 800; font-size: 22px; color: #fff; }
.db-biz-body { padding: 24px 14px 14px; }
.db-biz-body .uc-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.db-biz-body .uc-meta { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.db-biz-body .uc-meta svg { opacity: .8; flex: 0 0 auto; }
/* Fecha de creación del producto en la Database (grilla + tablero). */
.db-prod-date { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.db-prod-date svg { opacity: .7; flex: 0 0 auto; }
.pb-card .db-prod-date { margin-top: 3px; font-size: 11px; }
/* MÓVIL: columnas APILADAS a lo ancho (Pendiente → Aprobado → Cancelado); tocar la tarjeta abre el editor. */
.prod-board { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 18px; }
.pb-col { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
/* PC: las 3 columnas en fila, compactas y organizadas (estilo Tetris), con arrastre entre ellas. */
@media (min-width: 1000px) {
  .prod-board { flex-direction: row; align-items: flex-start; gap: 12px; }
  .pb-col { flex: 1; min-width: 0; }
  .pb-card { padding: 6px; }
  .pb-card-img { width: 40px; height: 40px; }
}
.pb-col.pb-over { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(91,140,255,.4); }
.pb-col-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; padding: 6px 8px 10px; }
.pb-col-h b { font-weight: 700; opacity: .7; }
.pb-col-h.completado { color: var(--green); } .pb-col-h.pendiente { color: var(--gold); } .pb-col-h.cancelado { color: var(--red); }
.pb-col-h.nuevo { color: var(--accent); } .pb-col-h.trabajando { color: var(--gold); }
.pb-col-h.pagado { color: var(--blue, #4d9fff); } .pb-col-h.enviado { color: #a78bfa; }
/* Tarjeta de transacción en el tablero de trabajo (texto + monto a la derecha). */
.pb-card-tx2 { justify-content: space-between; cursor: pointer; }
@media (min-width: 1000px) { .pb-card-tx2 { cursor: grab; } }
.pb-card-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.pb-card-amt { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.pb-card-amt.pos { color: var(--green); } .pb-card-amt.neg { color: var(--red); }
.pb-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.pb-card { display: flex; gap: 10px; align-items: center; background: var(--card, #16171c); border: 1px solid var(--line);
  border-radius: 11px; padding: 8px; cursor: pointer; touch-action: auto; }
.pb-card, .pb-card * { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.pb-card img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }   /* sin "copiar" la imagen al arrastrar */
@media (min-width: 1000px) { .pb-card { cursor: grab; } }
.pb-card-img { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.pb-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pb-card-tx { min-width: 0; flex: 1; }
.pb-card-t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-card-p { font-size: 13px; margin-top: 2px; }
.pb-card.pb-dragging { opacity: .35; }
.pb-ghost { position: fixed; z-index: 9999; pointer-events: none; box-shadow: 0 14px 32px rgba(0,0,0,.55); opacity: .96; }
/* Badge de OFERTA estilo Temu (descuento por tiempo) */
.card-oferta { position: absolute; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #ff3b30, #ff7a18); color: #fff; font-size: 10.5px; font-weight: 800;
  padding: 3px 8px 3px 6px; border-radius: 8px; z-index: 2; letter-spacing: .2px; box-shadow: 0 3px 10px rgba(255,59,48,.45); }
.card-oferta svg { stroke: #fff; }
.card-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.card-sold { color: var(--text-dim); font-size: 11px; font-weight: 600; }
/* Vista previa de la oferta en el formulario de publicar */
.pf-offer { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pf-offer-badge { display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, #ff3b30, #ff7a18); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 7px; }
.pf-offer-badge svg { stroke: #fff; }
.card-offer-left { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; color: #ff5b3a; font-size: 11px; font-weight: 700; }
.card-offer-left svg { stroke: #ff5b3a; }
/* Banda "¡Casi agotado!" sobre la imagen (urgencia por stock bajo, estilo Temu) */
.card-low { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.35) 70%, transparent); color: #fff; font-size: 10.5px; font-weight: 800;
  text-align: center; padding: 9px 4px 5px; letter-spacing: .2px; }
.card-low svg { stroke: #ffb020; }
/* Panel de ganancias (admin) */
.prof-row { padding: 9px 0; border-top: 1px solid var(--line); }
.prof-t { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.prof-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-dim); }
.prof-gan { color: var(--green); font-weight: 700; }
.prof-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.intl-ship { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 12px; background: rgba(108,140,255,.08); }
.intl-ship svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
/* Selector de envío internacional (el cliente elige económico/estándar/express → el precio se adapta) */
.intl-lead { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
.intl-lead svg { color: var(--accent); flex: 0 0 auto; }
/* Tablita horizontal (3 opciones en fila), estilo del selector de método de pago. */
.intl-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.intl-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 10px 6px; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(255,255,255,.03);
  cursor: pointer; text-align: center; color: inherit; font: inherit; }
.intl-opt.active { border-color: var(--accent); background: rgba(108,140,255,.12); }
.intl-opt b { font-size: 13px; font-weight: 700; line-height: 1.1; }
.intl-opt .io-p { font-size: 14.5px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.intl-opt .io-d { font-size: 10.5px; color: var(--text-dim); line-height: 1.15; }

/* Lightbox (foto a pantalla completa) */
.lightbox { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s ease; padding: 20px; }
.lightbox.show { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 12px; transform: scale(.94); transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.lightbox.show img { transform: scale(1); }
.lb-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
.hero img { cursor: zoom-in; }

/* ════════ NIVEL MAGISTRAL (build 77): vendedor, destacados, filtros ════════ */

/* Enlace al vendedor */
.seller-link { color: var(--accent); font-weight: 600; cursor: pointer; }
.seller-link svg { vertical-align: -1px; }

/* Perfil de vendedor */
.seller-hero { text-align: center; padding: 22px 16px 6px; }
.seller-av { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.seller-name { font-size: 21px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.seller-sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.badge-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }
.badge-pill.gestor { background: rgba(95,184,120,.18); color: var(--green); }
.badge-pill.top { background: rgba(232,184,75,.18); color: var(--gold); }
.badge-pill.mensajero { background: rgba(108,140,255,.18); color: var(--accent); }
.badge-pill.cajero { background: rgba(34,197,94,.16); color: var(--green, #22c98f); }
.badge-pill.promotor { background: rgba(245,184,61,.18); color: #f5b83d; }
.uc-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.cb-hint { display: block; font-size: 11.5px; color: var(--text-dim); margin: 5px 2px 0; line-height: 1.35; }
.seller-stats { display: flex; gap: 10px; padding: 14px 16px; }
.seller-stats .ss { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 6px; text-align: center; }
.seller-stats .ssv { font-size: 20px; font-weight: 800; }
.seller-stats .ssl { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

/* Carrusel de destacados en la home */
.feat-head { display: flex; align-items: center; gap: 7px; padding: 6px 16px 8px; font-size: 16px; font-weight: 800; }
.feat-head .fh-spark { color: var(--gold); }
.feat-rail { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.feat-rail::-webkit-scrollbar { display: none; }
.feat-card { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16/10; background: #1a1a20; box-shadow: 0 10px 28px rgba(0,0,0,.4); cursor: pointer; }
.feat-card img { width: 100%; height: 100%; object-fit: cover; }
.feat-card .fc-grad { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.85)); }
.feat-card .fc-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; }
.feat-card .fc-title { color: #fff; font-weight: 800; font-size: 16px; line-height: 1.2; margin-bottom: 4px; }
.feat-card .fc-price { color: #fff; font-weight: 900; font-size: 18px; }
.feat-card .fc-badge { position: absolute; top: 10px; left: 10px; background: rgba(232,184,75,.95); color: #2a1e00; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 8px; }

/* Botón y panel de filtros */
.filt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; background: var(--panel);
  border: 1px solid var(--line); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.filt-btn.active { border-color: var(--accent); color: var(--accent); }
.filt-btn .fb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sort-opt { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 15px; }
.sort-opt:last-child { border-bottom: none; }
.sort-opt.on { color: var(--accent); font-weight: 700; }

/* ════════ Database: scroll NATURAL de la página (sin altura fija) ════════
   Antes la lista tenía un scroll interno con max-height calculada que cortaba el listado
   antes de tiempo y dejaba una franja negra muerta hasta la barra de pestañas (que es fija).
   Ahora fluye con el scroll de toda la página → aprovecha todo el alto, sin hueco. */
.db-scroll { overflow: visible; }
.db-scroll.multi { max-height: none; }
/* PC: aprovechar el ancho — varias columnas (no una sola fila estrecha con el espacio
   negro vacío al lado) y la foto del producto más grande. */
@media (min-width: 1000px) {
  .db-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    align-content: start;
  }
  .db-scroll > * { margin-bottom: 0 !important; }   /* el gap del grid maneja la separación */
  .db-scroll .db-img { max-height: 340px; }          /* producto más grande en pantalla grande */
}

/* ════════ Database: tarjeta de usuario + modificador (build 81) ════════ */
.user-card .uc-tag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 8px; text-transform: capitalize; margin-bottom: 8px; }
.uc-tag.creador { background: rgba(232,184,75,.18); color: var(--gold); }
.uc-tag.admin { background: rgba(108,140,255,.18); color: var(--accent); }
.uc-tag.gestor { background: rgba(95,184,120,.18); color: var(--green); }
/* Avatar de iniciales: oculto en móvil (idéntico a antes); solo aparece en PC.
   uc-body es transparente en móvil (display:contents) → los hijos fluyen como siempre. */
.uc-avatar { display: none; }
.uc-body { display: contents; }
.uc-name { font-size: 16.5px; font-weight: 800; }
.uc-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
.uc-bal { font-size: 20px; font-weight: 800; margin-top: 9px; }
.uc-bal span { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.uc-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.uc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .12s; }
.uc-btn.wa { background: rgba(95,184,120,.15); color: var(--green); border-color: transparent; }
.uc-btn:active { transform: scale(.95); }
.uw-bal { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border-radius: 12px; padding: 14px 16px; }
.uw-bal span { color: var(--text-dim); font-size: 13px; }
.uw-bal b { font-size: 22px; font-weight: 800; }

/* ════════ Perfil: avatar + foto (build 83) ════════ */
.pr-avatar-wrap { text-align: center; padding: 8px 0 18px; }
.pr-avatar-c { margin-top: 6px; }
.pr-avatar { position: relative; width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800; color: #fff; background-size: cover; background-position: center; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(108,140,255,.14), 0 0 34px rgba(108,140,255,.22), 0 10px 26px rgba(0,0,0,.45); }
.pr-avatar::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; padding: 1px;
  background: conic-gradient(from 0deg, rgba(108,140,255,.55), rgba(108,140,255,0) 40%, rgba(108,140,255,0) 60%, rgba(108,140,255,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.pr-cam { position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg); }
.pr-avatar-name { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.pr-photo-btn { margin-top: 10px; padding: 8px 18px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; }
/* ── Perfil rediseñado (premium oscuro) ── */
.pf2 { padding-bottom: 96px; }
.pf2-head { padding: 10px 0 20px; }
.pf2-sub { color: var(--text-dim); font-size: 13px; margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; }
.pf2-sub svg { stroke: var(--text-dim); }
.pf2-id { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(108,140,255,.22), rgba(108,140,255,.05) 70%); border: 1px solid rgba(108,140,255,.28); border-radius: 18px; padding: 16px; margin: 0 0 16px; box-shadow: 0 0 24px rgba(108,140,255,.1); }
.pf2-id-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf2-id-tx span { color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.pf2-id-tx b { font-size: 19px; font-weight: 800; letter-spacing: 2.5px; color: var(--text); }
.pf2-id-copy { width: 42px; height: 42px; border-radius: 12px; background: rgba(108,140,255,.16); border: 1px solid rgba(108,140,255,.25); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.pf2-group { background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 14px; backdrop-filter: blur(4px); }
.pf2-gt { font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .8px; padding: 14px 16px 4px; }
.pf2-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; background: none; color: var(--text); text-align: left; transition: background .15s; }
.pf2-row + .pf2-row { border-top: 1px solid rgba(255,255,255,.05); }
.pf2-row:active { background: rgba(255,255,255,.04); }
.pf2-ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(108,140,255,.12); box-shadow: inset 0 0 0 1px rgba(108,140,255,.14); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.pf2-lbl { flex: 1; font-size: 14.5px; font-weight: 600; }
.pf2-arr, .pf2-chev { color: var(--text-dim); flex-shrink: 0; transition: transform .2s; }
.pf2-row.open .pf2-chev { transform: rotate(180deg); }
.pf2-tag { font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--panel2); padding: 3px 9px; border-radius: 8px; flex-shrink: 0; }
.pf2-tag.on { color: #06210f; background: var(--green); }
.pf2-rowbody { padding: 2px 14px 14px; border-top: 1px solid var(--line); }
.pf2-sec-body { padding: 0 0 6px; }   /* Seguridad: las filas internas usan su propio padding */
.pf2-hint { color: var(--text-dim); font-size: 12.5px; margin: 10px 0 8px; }
.pf2-group .field { padding: 5px 14px; margin-bottom: 0; }
.pf2-group .row2 { padding: 0 14px; gap: 8px; }
/* Provincia/Municipio: sin el padding lateral propio (el .row2 ya lo da) → se alinean con los demás. */
.pf2-group .row2 .field { padding-left: 0; padding-right: 0; }
.pf2-group > .btn.accent { width: calc(100% - 28px); margin: 10px 14px 16px; }
.pf2-danger { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border-radius: 14px; background: rgba(255,91,110,.1); color: var(--red); border: 1px solid rgba(255,91,110,.28); font-weight: 700; font-size: 15px; }
.pf2-danger:active { background: rgba(255,91,110,.16); }
.pf2-ver { text-align: center; color: var(--text-dim); font-size: 12px; padding: 18px 0 4px; }

/* ════════ Pedidos en billetera: detalle + liberar/cancelar (build 86) ════════ */
.od-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.od-row:last-of-type { border-bottom: none; }
.od-row span { color: var(--text-dim); }
.od-row b { text-align: right; }
.od-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); margin: 6px 2px 4px; cursor: pointer; }
.od-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.ord-st { text-transform: capitalize; }
.ord-st.pendiente { color: var(--gold); }
.ord-st.completado { color: var(--green); }
.ord-st.cancelado { color: var(--red); }

/* ════════ Billetera en 2 columnas en PC (en móvil apilado) (build 87) ════════ */
@media (min-width: 1000px) {
  .w-cols { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
  .w-cols .wallet-card { margin-bottom: 0; }
  .w-cols .w-left { position: sticky; top: 80px; }
  .w-cols .db-card-wrap, .w-cols .dcard { max-width: 360px; }
  .w-cols .list-scroll { max-height: calc(100dvh - 220px); }
}

/* ════════ Info de la tarjeta en filas (no se rompe) (build 88) ════════ */
.card-info { margin: 10px 0 6px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.card-info .ci { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.card-info .ci:last-child { border-bottom: none; }
.card-info .ci label { color: var(--text-dim); }
.card-info .ci span { font-weight: 700; text-align: right; }
/* Popup de información de la tarjeta: filas copiables y dirección por campos */
.ci-group { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.ci-section { color: var(--text-dim); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin: 16px 2px 8px; }
/* Banner PLEGABLE de Dirección de facturación dentro de "Información" (oscuro y minimalista). */
.ci-bill-banner { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg2); }
.ci-bill-tog { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 14px; background: none; border: 0; color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; }
.ci-bill-tt { display: flex; align-items: center; gap: 9px; }
.ci-bill-tt svg { color: var(--text-dim); }
.ci-bill-chev { display: inline-flex; color: var(--text-dim); transition: transform .22s ease; }
.ci-bill-tog[aria-expanded="true"] .ci-bill-chev { transform: rotate(180deg); }
.ci-bill-body { padding: 0 12px 12px; }
.ci-bill-body .ci-group { border-color: var(--line); }
.ci-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--text-dim); transition: background .12s; }
.ci-copy:last-child { border-bottom: none; }
.ci-copy:active { background: var(--panel); }
.ci-copy-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-copy-t label { color: var(--text-dim); font-size: 12px; }
.ci-copy-t span { color: var(--text); font-weight: 700; font-size: 14.5px; word-break: break-word; }
.ci-copy svg { flex-shrink: 0; opacity: .7; }
/* PIN de seguridad */
.pin-setup { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; font-size: 13px; color: var(--text-dim); }
.pin-setup b { color: var(--text); }
.pin-setup .btn { padding: 11px; font-size: 14px; }
.pf-sec-title { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin: 18px 2px 10px; }
.pf-sec-tag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--panel2); padding: 2px 8px; border-radius: 10px; }
.box-h { display: flex; align-items: center; gap: 8px; }
.hcount { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--panel); color: var(--text-dim); font-size: 12px; font-weight: 700; }
.mov-refresh { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; transition: color .15s, border-color .15s; }
.mov-refresh:hover { color: var(--text); border-color: var(--accent); }
.mov-refresh.spin svg { animation: spin .7s linear infinite; }
.mov-refresh.spin { pointer-events: none; color: var(--accent); }
/* Botón y guía para agregar la tarjeta a Apple/Google Pay */
.card-wallet-btn { margin: 12px 0 0; background: transparent; border: 1.5px solid var(--accent); color: var(--accent); font-size: 14px; padding: 13px; }
.wallet-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.wallet-steps li { color: var(--text); font-size: 13.5px; line-height: 1.55; }
.wallet-steps li::marker { color: var(--accent); font-weight: 800; }

/* ── QR / Recibir / Escanear / Animación de envío ─────────────────────────── */
.wallet-actions button { font-size: 12.5px; padding: 11px 4px; }
.qr-load { padding: 40px; text-align: center; color: var(--text-dim); }
.qr-card { display: flex; justify-content: center; margin: 6px 0 14px; }
.qr-frame { background: #fff; padding: 15px; border-radius: 18px; width: 196px; height: 196px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.qr-frame .qrsvg { width: 100%; height: 100%; display: block; }
.qr-acct { text-align: center; margin-bottom: 14px; }
.qr-acct-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; }
.qr-acct-no { font-size: 20px; font-weight: 800; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.qr-acts { display: flex; gap: 10px; }
.qr-acts .btn { flex: 1; }
.tr-name { min-height: 18px; margin: -6px 0 10px; font-size: 13.5px; font-weight: 600; }
.tr-name.ok { color: var(--green); }
.tr-name.bad { color: var(--red); }

.scan-wrap { position: relative; width: 100%; aspect-ratio: 1; max-width: 320px; margin: 0 auto 12px; border-radius: 18px; overflow: hidden; background: #000; }
.scan-wrap video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 17%; border: 2px solid rgba(255,255,255,.85); border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
.scan-frame::before { content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: scanline 2.2s ease-in-out infinite; }
.scan-hint { text-align: center; color: var(--text-dim); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
@keyframes scanline { 0%,100% { top: 0; } 50% { top: calc(100% - 2px); } }

.sendfx { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(20,18,26,.93), rgba(8,8,10,.97)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: sfxout .45s 2.15s forwards; }
.sendfx-stage { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.sfx-coin { position: absolute; width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #8aa2ff, #4a5cc4); box-shadow: 0 14px 36px rgba(108,140,255,.65); animation: sfxcoin 1.15s cubic-bezier(.3,.7,.25,1) forwards; }
.sfx-coin svg { stroke: #0a0e1f; }
@keyframes sfxcoin { 0% { transform: translateY(150px) scale(.5) rotate(-20deg); opacity: 0; } 22% { opacity: 1; } 68% { transform: translateY(0) scale(1) rotate(6deg); opacity: 1; } 100% { transform: translateY(-8px) scale(.18); opacity: 0; } }
.sfx-ring { position: absolute; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; animation: sfxring .9s 1s ease-out forwards; }
.sfx-ring.r2 { animation-delay: 1.18s; border-color: var(--green); }
@keyframes sfxring { 0% { opacity: .7; transform: scale(.45); } 100% { opacity: 0; transform: scale(3); } }
.sfx-check { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(95,184,120,.16); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); animation: sfxcheck .5s 1.08s cubic-bezier(.2,1.6,.4,1) forwards; }
.sfx-check svg { width: 46px; height: 46px; stroke: var(--green); stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sfxdraw .45s 1.3s forwards; }
@keyframes sfxcheck { to { opacity: 1; transform: scale(1); } }
@keyframes sfxdraw { to { stroke-dashoffset: 0; } }
.sfx-msg { position: absolute; bottom: -64px; width: 280px; text-align: center; font-size: 17px; color: var(--text); opacity: 0; animation: sfxmsg .5s 1.55s forwards; }
.sfx-msg b { color: var(--accent); }
@keyframes sfxmsg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sfxout { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .scan-frame::before, .sfx-coin, .sfx-ring, .sfx-check, .sfx-check svg, .sfx-msg, .sendfx { animation: none !important; }
}

/* ── Chat embebido (Grupos y soporte dentro de Desbloqueados) ─────────────── */
/* Chat de soporte = página INDEPENDIENTE a pantalla completa (tapa menú lateral y barra inferior). */
/* Reservamos la franja inferior del safe-area (home-indicator) y la pintamos con el color del
   composer del chat (#1e293b). Los iframes NO reciben env(safe-area-inset); el marketplace (doc
   principal) SÍ → así cubrimos esa franja para que NO quede negra debajo del campo de escribir. */
.chat-embed { position: fixed; inset: 0; z-index: 100; background: #1e293b; padding-bottom: env(safe-area-inset-bottom); animation: none; display: flex; flex-direction: column; }
.chat-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 6px;
  padding-top: env(safe-area-inset-top); box-sizing: content-box; background: #1f2c34; color: #fff; }
.chat-back { background: none; border: 0; color: #fff; padding: 9px; display: inline-flex; cursor: pointer; border-radius: 50%; }
.chat-back:active { background: rgba(255,255,255,.12); }
.chat-ttl { font-weight: 700; font-size: 17px; }
.chat-embed #chat-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: #1e293b; min-height: 0; }
.chat-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #1e293b; z-index: 1; }
@media (min-width: 1000px) { .chat-embed { left: 0; } }

/* Editar negocio: preview de la foto actual */
.cb-current { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cb-current img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: #fff; flex-shrink: 0; }
.cb-current span { font-size: 12px; color: var(--text-dim); line-height: 1.3; }

/* ── Crear/editar negocio: vista previa tipo tienda real (portada + logo) ───────── */
.cb-help { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; margin: 2px 2px 12px; }
.cb-help b { color: var(--text); }
.cb-preview { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 16px; padding-bottom: 14px; }
/* Portada — RELLENA el área (cover, estilo WhatsApp): se adapta sola, sin barras. El servidor
   guarda la imagen completa, así que el recorte aquí es solo el justo para llenar. */
.cb-cover { position: relative; display: block; height: 150px; background-size: cover; background-position: center; background-color: #14141a; cursor: pointer; }
.cb-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35)); opacity: 0; transition: opacity .2s; }
.cb-cover:hover::after { opacity: 1; }
/* Botón "Portada" / cámara en la esquina */
.cb-cam { position: absolute; display: inline-flex; align-items: center; gap: 5px; background: rgba(8,12,22,.72); color: #fff; font-weight: 700; font-size: 12px; padding: 7px 11px; border-radius: 999px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.18); pointer-events: none; z-index: 2; }
.cb-cam svg { stroke: #fff; }
.cb-cam-cover { top: 12px; right: 12px; }
/* Cabecera con el logo superpuesto */
.cb-head { display: flex; align-items: center; gap: 14px; padding: 0 16px; margin-top: -34px; position: relative; }
.cb-logo { position: relative; width: 78px; height: 78px; border-radius: 18px; border: 3px solid var(--panel); background-size: cover; background-position: center; background-color: var(--panel); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 24px; box-shadow: 0 6px 16px rgba(0,0,0,.45); cursor: pointer; }
.cb-cam-logo { right: -4px; bottom: -4px; padding: 6px; border-radius: 50%; background: var(--accent); color: #08111f; border: 2px solid var(--panel); }
.cb-cam-logo svg { stroke: #08111f; }
.cb-head-info { padding-top: 36px; min-width: 0; }
.cb-prev-name { font-size: 21px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-prev-name-in { width: 100%; background: transparent; border: none; outline: none; padding: 2px 0; font-family: inherit; }
.cb-prev-name-in::placeholder { color: var(--text-dim); opacity: .8; font-weight: 700; }
.cb-prev-name-in:focus { border-bottom: 2px solid var(--accent); }
.cb-prev-sub { display: flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.cb-prev-sub svg { stroke: var(--text-dim); }
.cb-prev-desc { padding: 12px 16px 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
/* Cabecera del negocio (detalle): lápiz junto al nombre + botón "Ver tienda". */
.bd-name-edit { display: inline-flex; vertical-align: middle; opacity: .55; margin-left: 4px; }
.bd-name-edit svg { stroke: var(--text-dim); }
.cb-head-info[id] { cursor: pointer; }
.bd-h-act { align-self: flex-end; margin-bottom: 4px; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--panel); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.bd-h-act svg { stroke: var(--accent); }
/* Tile "+ Agregar producto" (primero en el grid de productos del negocio). */
.card.add-card { align-self: start; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed var(--accent); border-radius: 18px; background: rgba(108,140,255,.045); color: var(--accent); cursor: pointer; transition: background .15s, transform .12s; }
.card.add-card:hover { background: rgba(108,140,255,.09); }
.card.add-card:active { transform: scale(.98); }
.card.add-card .add-plus { display: flex; }
.card.add-card .add-plus svg { stroke: currentColor; }
.card.add-card .add-lbl { font-weight: 700; font-size: 14px; }

/* Gestor Municipal: hero tipo "oferta" (estética USDT) + CTA fuerte */
.g-hero { background: linear-gradient(160deg, rgba(108,140,255,.16), rgba(74,92,196,.05)); border: 1px solid var(--line); border-radius: 16px; padding: 24px 18px; text-align: center; margin-bottom: 14px; }
.g-hero-ic { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: rgba(108,140,255,.18); color: var(--accent); }
.g-hero-t { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.g-hero-s { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 7px auto 0; max-width: 360px; }
.g-cta { padding: 16px; font-size: 16px; margin-top: 8px; }

/* Publicar: cabecera de la sección Envío (título + switch a la derecha) */
.pf-ship-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pf-ship-head h3 { margin: 0; }
.pf-ship-head .switch { margin-top: 2px; }

/* ── Envío a domicilio (checkout) ─────────────────────────────────────────── */
.ship-sel { display: flex; gap: 10px; }
.ship-sel button { flex: 1; padding: 12px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.25; }
.ship-sel button.active { border-color: var(--accent); color: var(--accent); }
.ship-mapwrap { position: relative; margin-top: 8px; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--line); }
.ship-map { height: 230px; width: 100%; background: var(--panel); }
/* Pin fijo en el centro: el usuario mueve el mapa, no el pin. */
.ship-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--accent); pointer-events: none; z-index: 500; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.ship-pin svg { display: block; }
.ship-geo { position: absolute; right: 10px; bottom: 10px; z-index: 500; display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; border: none; background: var(--accent); color: #08111f; font-weight: 800; font-size: 12.5px; box-shadow: 0 3px 10px rgba(0,0,0,.35); cursor: pointer; }
.ship-coords { text-align: center; color: var(--text-dim); font-size: 11.5px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.ship-form { margin-top: 8px; }
.ship-note { display: flex; gap: 8px; align-items: flex-start; background: rgba(108,140,255,.1); border: 1px solid rgba(108,140,255,.3); border-radius: 10px; padding: 9px 11px; margin: 8px 0 2px; font-size: 13px; line-height: 1.45; color: var(--text); }
.ship-note svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════════
   ALOJAMIENTOS (Airbnb de Desbloqueados)
   ════════════════════════════════════════════════════════════════════════════ */
.stay-hero { margin: 10px 16px 0; padding: 22px 20px; border-radius: 18px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(108,140,255,.28), transparent 55%),
              radial-gradient(120% 140% at 100% 100%, rgba(232,184,75,.20), transparent 55%), var(--panel); border: 1px solid var(--line); }
.stay-hero-tx h1 { margin: 0; font-size: 25px; font-weight: 900; letter-spacing: -.5px; }
.stay-hero-tx p { margin: 6px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; max-width: 30ch; }
.stay-search { margin: 12px 16px 0; }
.ss-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; }
.ss-row .ico { color: var(--text-dim); }
.ss-row input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; }
.ss-row2 { display: flex; gap: 10px; margin-top: 10px; }
.ss-field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ss-field > span { font-size: 11.5px; color: var(--text-dim); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.ss-field select { width: 100%; padding: 12px 38px 12px 13px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--text); font-size: 14px; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .15s ease, box-shadow .2s ease;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }
.ss-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,140,255,.16); outline: none; }
/* Chevron también en el selector de código de país del login (va dentro de .lf .wrap) */
.lf .wrap.phone-cc { position: relative; padding-right: 26px; }
.lf .wrap.phone-cc::after { content: ""; position: absolute; right: 11px; top: 50%; width: 13px; height: 13px; transform: translateY(-50%); pointer-events: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center; }
.stay-kinds { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 4px; scrollbar-width: none; }
.stay-kinds::-webkit-scrollbar { display: none; }
.sk-chip { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 20px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); font-size: 13px; font-weight: 700; cursor: pointer; }
.sk-chip svg { opacity: .8; }
.sk-chip.active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.sk-chip.active svg { opacity: 1; }
.stay-quick { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 2px; scrollbar-width: none; }
.stay-quick::-webkit-scrollbar { display: none; }
.sq-link { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  background: transparent; border: 1px dashed var(--line); color: var(--text-dim); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sq-link:active { background: var(--panel); }

.stay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 14px 16px 30px; }
@media (min-width: 720px) { .stay-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .stay-grid { grid-template-columns: repeat(4, 1fr); } }
.stay-card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; padding: 0; display: flex; flex-direction: column; }
.stay-card:active { transform: scale(.98); }
.sc-img { position: relative; aspect-ratio: 1/1; background: var(--bg2); display: flex; align-items: center; justify-content: center; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-noimg { color: var(--text-dim); opacity: .5; }
.sc-kind { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 14px; }
.sc-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sc-loc { font-size: 11.5px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-rate { font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; color: var(--gold); flex-shrink: 0; }
.sc-title { font-size: 14px; font-weight: 700; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.sc-meta { font-size: 11.5px; color: var(--text-dim); }
.sc-price { font-size: 13px; margin-top: 3px; } .sc-price b { font-size: 15.5px; }

/* ── Detalle ── */
.back-btn { display: inline-flex; align-items: center; gap: 5px; margin: 10px 0 0 12px; padding: 7px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.sd-gallery { margin: 12px 16px 0; }
.sd-main { aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; background: var(--bg2); }
.sd-main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.sd-noimg { aspect-ratio: 16/10; border-radius: 16px; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--text-dim); opacity: .5; }
.sd-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.sd-strip::-webkit-scrollbar { display: none; }
.sd-th { flex-shrink: 0; width: 70px; height: 70px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; }
.sd-th.active { border-color: var(--accent); }
.sd-th img { width: 100%; height: 100%; object-fit: cover; }
.sd-head { padding: 16px 16px 0; }
.sd-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
.sd-head h1 { margin: 6px 0 0; font-size: 22px; font-weight: 900; letter-spacing: -.4px; line-height: 1.2; }
.sd-sub { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; color: var(--text-dim); font-size: 13px; }
.sd-sub span { display: inline-flex; align-items: center; gap: 4px; }
.sd-sub b { color: var(--text); }
.sd-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 16px 0; }
.spec { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 12px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.spec svg { color: var(--accent); margin-bottom: 2px; }
.spec span { font-size: 17px; font-weight: 900; }
.spec small { font-size: 10.5px; color: var(--text-dim); }
.sd-host { display: flex; align-items: center; gap: 12px; margin: 18px 16px 0; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.sh-av { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 900; overflow: hidden; flex-shrink: 0; }
.sh-av img { width: 100%; height: 100%; object-fit: cover; }
.sh-name { font-weight: 800; font-size: 14.5px; }
.sh-since { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.sd-block { margin: 22px 16px 0; }
.sd-block h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.sd-desc { color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.sd-amen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.am { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); }
.am svg { color: var(--green); flex-shrink: 0; }
.sd-map { height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.sd-maphint { font-size: 12px; color: var(--text-dim); margin: 8px 2px 0; }
.sd-rev { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sd-rev:last-child { border-bottom: none; }
.sr-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.sd-rev p { margin: 6px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.sd-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 980px; display: flex; align-items: center; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(14,14,16,.95); backdrop-filter: blur(12px); border-top: 1px solid var(--line); z-index: 60; }
.sd-bar-price { flex: 1; } .sd-bar-price b { font-size: 19px; font-weight: 900; } .sd-bar-price small { color: var(--text-dim); font-size: 13px; }
.sd-bar-dates { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sd-bar .btn { width: auto; min-width: 150px; padding: 14px 22px; }

/* ── Calendario ── */
.cal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-weight: 800; font-size: 15px; text-transform: capitalize; }
.cal-nav { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cal-nav:disabled { opacity: .3; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-dim); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cell { aspect-ratio: 1/1; border: none; background: none; color: var(--text); font-size: 13.5px; font-weight: 600; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cal-cell.empty { pointer-events: none; }
.cal-cell.blocked { color: var(--text-dim); opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.cal-cell.inrange { background: rgba(108,140,255,.16); border-radius: 0; }
.cal-cell.sel { background: var(--accent); color: #ffffff; font-weight: 900; }
.cal-cell.sel.start { border-radius: 9px 0 0 9px; }
.cal-cell.sel.end { border-radius: 0 9px 9px 0; }
.cal-cell.sel.start.end { border-radius: 9px; }
.cal-hint { text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--accent); font-weight: 700; }

/* ── Hoja de reserva ── */
.bk-stay { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.bk-img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--text-dim); flex-shrink: 0; }
.bk-img img { width: 100%; height: 100%; object-fit: cover; }
.bk-title { font-weight: 800; font-size: 14.5px; line-height: 1.25; }
.bk-loc { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.bk-dates { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.bk-d { flex: 1; text-align: center; } .bk-d span { display: block; font-size: 11px; color: var(--text-dim); font-weight: 700; } .bk-d b { font-size: 14.5px; }
.bk-arrow { color: var(--text-dim); }
.bk-guests { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.bk-guests > span { display: inline-flex; align-items: center; gap: 6px; }
.bk-stepper { display: flex; align-items: center; gap: 14px; }
.bk-stepper button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 18px; cursor: pointer; }
.bk-pay { display: flex; gap: 10px; margin-bottom: 12px; }
.bkp { flex: 1; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg2); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1.4; }
.bkp small { color: var(--text-dim); font-weight: 600; }
.bkp.active { border-color: var(--accent); background: rgba(108,140,255,.12); }
.bk-sum { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.bk-sum .sr { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-dim); padding: 4px 0; }
.bk-sum .sr.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; color: var(--text); font-weight: 900; font-size: 16px; }
.bk-note { font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.5; margin: 12px 0 0; }

/* ── Viajes / reservas ── */
.trip-card { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 12px 16px 0; }
.tc-img { width: 70px; height: 70px; border-radius: 11px; overflow: hidden; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--text-dim); flex-shrink: 0; }
.tc-img img { width: 100%; height: 100%; object-fit: cover; }
.tc-body { flex: 1; min-width: 0; }
.tc-title { font-weight: 800; font-size: 14.5px; }
.tc-dates { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tc-foot b { font-size: 15px; }
.tc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mini-btn { padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mini-btn.ok { background: var(--green); color: #ffffff; border-color: var(--green); }
.mini-btn.bad { color: var(--red); border-color: rgba(255,91,110,.4); }

/* ── Mis alojamientos ── */
.ms-head { display: flex; gap: 10px; margin: 12px 16px 0; }
.ms-head .btn { width: auto; flex: 1; padding: 12px; font-size: 14px; }
.ms-card { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 12px 16px 0; }
.ms-img { width: 76px; height: 76px; border-radius: 11px; overflow: hidden; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--text-dim); flex-shrink: 0; position: relative; cursor: pointer; }
.ms-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-hidden { position: absolute; inset: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ms-body { flex: 1; min-width: 0; }
.ms-title { font-weight: 800; font-size: 14.5px; }
.ms-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ms-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ── Formulario de alojamiento ── */
.stay-form-sheet { padding-bottom: 40px; }
.row4 { display: flex; gap: 8px; } .row4 > * { flex: 1; }
.row4 .input { padding: 12px 8px; text-align: center; }
.amen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; }
.amen-chk { display: flex; align-items: center; gap: 8px; padding: 10px 11px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; cursor: pointer; }
.amen-chk input { width: 17px; height: 17px; accent-color: var(--accent); }
.sf-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sf-ph, .sf-ex { position: relative; width: 78px; height: 78px; border-radius: 10px; overflow: hidden; background: var(--bg2); }
.sf-ph img, .sf-ex img { width: 100%; height: 100%; object-fit: cover; }
.sf-ph-x, .sf-ex-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.65); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sf-ex-main { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(108,140,255,.85); color: #ffffff; font-size: 9.5px; font-weight: 800; text-align: center; padding: 2px; }
.sf-existing { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-add { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 11px; border: 1.5px dashed var(--line); color: var(--text-dim); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.rv-stars { display: flex; gap: 8px; justify-content: center; margin: 6px 0 16px; }
.rv-stars button { background: none; border: none; cursor: pointer; color: var(--gold); padding: 2px; }
.rv-stars button svg { width: 34px; height: 34px; }

/* Casillero — botones de método de la calculadora de envío */
.lk-m { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 8px; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; line-height: 1.35; text-align: center; transition: border-color .15s, background .15s; }
.lk-m small { font-weight: 500; }
.lk-m.on { border-color: var(--accent); background: rgba(108,140,255,.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.lk-m-off, .lk-m:disabled { opacity: .38; pointer-events: none; }

/* Casillero — sub-pestañas del apartado dentro del marketplace */
.lk-subtabs { display: flex; gap: 8px; padding: 10px 16px 4px; }
.lk-subtabs button { flex: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 11px; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 700; padding: 9px 6px; cursor: pointer; }
.lk-subtabs button.on { color: var(--text); border-color: var(--accent); background: rgba(108,140,255,.12); }

/* Casillero — envíos: filtros de estado + selección de paquetes */
.lk-shptabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; }
.lk-shptabs::-webkit-scrollbar { display: none; }
.lk-shptabs button { flex: 0 0 auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; cursor: pointer; white-space: nowrap; }
.lk-shptabs button.on { color: #0a0e1f; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.cs-pk { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cs-pk input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }

/* ════════ Casillero — diseño premium (rediseño con skill) ════════ */
.lk-subtabs { gap: 10px; padding: 14px 16px 12px; }
.lk-subtabs button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.lk-ti { font-size: 15px; line-height: 1; }
/* PC: que las sub-pestañas NO se estiren a todo el ancho (se veían "pegadas"): pills sueltas con espacio. */
@media (min-width: 900px) {
  .lk-subtabs { gap: 12px; padding: 18px 0 16px; }
  .lk-subtabs button { flex: 0 1 auto; padding: 10px 26px; border-radius: 12px; }
  /* Perfil en PC: dos columnas — info de usuario | menú */
  .pf2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  .pf2-col { min-width: 0; }
}
/* Tarjeta de dirección */
.lk-addr-card { background: linear-gradient(155deg, #3b46f0 0%, #1aa7c4 60%, #14c9a6 100%); border-radius: 20px; overflow: hidden; color: #fff; box-shadow: 0 12px 30px rgba(40, 70, 220, .32); position: relative; min-width: 0; max-width: 100%; }
.lk-addr-card::after { content: ""; position: absolute; top: -40%; right: -20%; width: 70%; height: 80%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.lk-addr-head { display: flex; align-items: center; gap: 9px; padding: 16px 15px 4px; position: relative; }
.lk-addr-hint { font-size: 12px; opacity: .9; padding: 0 15px 12px; }
.lk-actchip { background: rgba(255,255,255,.24); border-radius: 20px; padding: 4px 11px; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.lk-cardacts { display: flex; gap: 9px; padding: 13px 15px 16px; }
.lk-cardbtn { flex: 1; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; border-radius: 12px; font: inherit; font-weight: 700; font-size: 13.5px; padding: 12px 8px; cursor: pointer; transition: background .15s, transform .1s; }
.lk-cardbtn:hover { background: rgba(255,255,255,.26); }
.lk-cardbtn:active { transform: scale(.97); }
/* Fila copiable de la tarjeta de dirección (tocar = copia ese dato) */
.lk-crow { position: relative; transition: background .12s; -webkit-tap-highlight-color: transparent; user-select: none; }
.lk-crow:hover { background: rgba(255,255,255,.14) !important; }
.lk-crow:active { background: rgba(255,255,255,.22) !important; }
.lk-crow-cp { flex: 0 0 auto; display: inline-flex; opacity: .5; transition: opacity .12s, color .12s; }
.lk-crow:hover .lk-crow-cp { opacity: .85; }
.lk-crow-cp.ok { opacity: 1; color: #b9ffe4; }
/* Tarjeta de casillero (móvil): etiqueta arriba + valor a TODO el ancho (dirección no se parte) */
.lk-acard { padding: 13px 15px 6px; }
.lk-acard-h { font-weight: 800; font-size: 15px; margin: 0 0 6px; }
.lk-arow { display: block; padding: 9px 2px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.lk-arow:first-of-type { border-top: none; }
.lk-arow-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.lk-arow-lbl { font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.lk-arow-val { font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.lk-arow-strong { font-weight: 800; letter-spacing: .4px; }
/* Cómo funciona — 3 pasos */
.lk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (max-width: 600px) { .lk-steps { grid-template-columns: repeat(2, 1fr); } }
.lk-step { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 9px 8px 8px; text-align: center; position: relative; animation: cardIn .3s both; }
.lk-step:nth-child(2) { animation-delay: .05s; } .lk-step:nth-child(3) { animation-delay: .1s; } .lk-step:nth-child(4) { animation-delay: .15s; }
.lk-step-n { position: absolute; top: 7px; left: 7px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: #0a0e1f; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lk-step-ic { font-size: 20px; margin: 2px 0 4px; }
.lk-step-t { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.lk-step-d { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.3; }
.lk-quick2 { display: flex; gap: 10px; margin-top: 12px; }
.lk-quick2 button { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; padding: 14px 8px; cursor: pointer; transition: border-color .15s, transform .1s; }
.lk-quick2 button:hover { border-color: var(--accent); }
.lk-quick2 button:active { transform: scale(.97); }
/* Progreso del envío en la tarjeta */
.shp-prog { display: flex; gap: 5px; margin-top: 11px; }
.shp-prog i { flex: 1; height: 4px; border-radius: 3px; background: var(--line); transition: background .25s; }
.shp-prog i.on { background: var(--accent); }
.shp-prog-lb { display: flex; justify-content: space-between; margin-top: 5px; }
.shp-prog-lb span { font-size: 10px; color: var(--text-dim); flex: 1; text-align: center; }
.shp-prog-lb span.on { color: var(--text); font-weight: 700; }
.shp-prog-lb span:first-child { text-align: left; } .shp-prog-lb span:last-child { text-align: right; }
/* Línea de tiempo del seguimiento */
.lk-tl { position: relative; padding-left: 20px; }
.lk-tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 10px; width: 2px; background: var(--line); }
.lk-tl .ev { position: relative; padding: 0 0 14px; }
.lk-tl .ev:last-child { padding-bottom: 2px; }
.lk-tl .ev::before { content: ""; position: absolute; left: -20px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); }
.lk-tl .ev.on::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 3px rgba(95,184,120,.22); }

.lk-step-ic { color: var(--accent); }
.lk-ti svg { vertical-align: -2px; }

/* Casillero — 3 métodos de envío apilados (marítimo/aéreo/exprés) */
.lk-methods3 { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.lk-methods3 .lk-m { text-align: left; }
/* En la caja del casillero los métodos (hasta 3, en pesos 20–65 lb) van EN FILA, uno al lado del otro, para ahorrar espacio. */
.lk-methods3.lk-boxmeth { flex-direction: row; gap: 6px; }
.lk-methods3.lk-boxmeth .lk-m { flex: 1; min-width: 0; text-align: center; padding: 10px 5px; font-size: 12.5px; }
.lk-methods3.lk-boxmeth .lk-m span { justify-content: center; gap: 4px; }
.lk-methods3.lk-boxmeth .lk-m small { font-size: 11px; }

/* Database → Casillero: clientes tipo etiqueta */
.lkc-tags { display: flex; flex-direction: column; gap: 8px; }
.lkc-tag { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; cursor: pointer; font: inherit; text-align: left; color: var(--text); transition: border-color .15s; }
.lkc-tag:hover { border-color: var(--accent); }
.lkc-name { font-weight: 700; font-size: 14px; }
.lkc-counts { margin-left: auto; color: var(--text-dim); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Casillero — dashboard 2 columnas (estilo PC del mockup) */
.lk-grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
@media (min-width: 900px) { .lk-grid2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.lk-col { min-width: 0; }
.lk-pkpanel { padding: 16px; }
.lk-pkhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lk-pkpanel .btn.accent { width: auto; margin: 0; padding: 9px 16px; font-size: 13.5px; }
.lk-pkg { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lk-pkcancel { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--red); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.lk-pkcancel:active { transform: scale(.97); }
.lk-pkcancel:disabled { opacity: .5; }
.lk-pkg:last-child { border-bottom: none; }
.lk-pkg-row { display: flex; align-items: center; gap: 12px; }
/* Barra de progreso del paquete (8 pasos): compacta y desplazable si no cabe */
.lk-otl { margin: 6px 0 2px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lk-otl::-webkit-scrollbar { display: none; }
.lk-otl .otl-step { width: 42px; }
.lk-otl .otl-l { font-size: 9px; line-height: 1.12; }
.lk-otl .otl-bar { margin-top: 12px; min-width: 8px; }
/* SOLO móvil: 7 pasos (sin "Hoy") compactos + etiquetas que se ajustan sin chocar. PC queda igual que siempre. */
@media (max-width: 999px) {
  .lk-otl .otl-step { width: 40px; }
  .lk-otl .otl-l { line-height: 1.1; width: 100%; overflow-wrap: anywhere; }
  .lk-otl .otl-bar { min-width: 4px; }
}
/* ── Flujo del envío del bloque "En camino" (casillero): azul, barra a la mitad en curso,
      etiquetas en 1 sola línea y más aire respecto a la dirección del destinatario. ── */
.lk-shpflow { margin-top: 16px; justify-content: space-between; }
.lk-shpflow .otl-step, .lk-shpflow.lk-otl .otl-step { width: auto; min-width: 48px; }
.lk-shpflow .otl-l, .lk-shpflow.lk-otl .otl-l { font-size: 10.5px; line-height: 1.15; width: auto; white-space: nowrap; overflow-wrap: normal; }
.lk-shpflow .otl-step.done .otl-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.lk-shpflow .otl-bar.on { background: var(--accent); }
/* Segmento EN CURSO (proceso no completo): relleno hasta la mitad, en azul y sin animación. */
.lk-shpflow .otl-bar.active {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, var(--line) 50%, var(--line) 100%);
  background-size: 100% 100%;
  animation: none;
  box-shadow: none;
}
.lk-dphotos { display: flex; gap: 8px; flex-wrap: wrap; }
.lk-dphotos img { width: 82px; height: 82px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
/* Banner de tarifas del casillero (compacto y plegable) */
.lk-banner { background: linear-gradient(135deg, #0a1330, #111c40 55%, #0b1126); border: 1px solid rgba(108,140,255,.35); border-radius: 13px; margin-bottom: 12px; overflow: hidden; }
.lk-banner-bar { width: 100%; background: none; border: none; color: var(--text); font: inherit; display: flex; align-items: center; gap: 9px; padding: 11px 13px; cursor: pointer; }
.lkbar-ic { color: var(--accent); display: inline-flex; flex: 0 0 auto; }
.lkbar-t { font-weight: 800; font-size: 14px; }
.lkbar-t b { background: linear-gradient(90deg, #6c8cff, #22c9c9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lkbar-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.lkbar-cta svg { transition: transform .2s; }
.lk-banner-bar.open .lkbar-cta svg { transform: rotate(180deg); }
.lk-banner-body { padding: 0 11px 11px; }
.lk-banner-cols { display: grid; grid-template-columns: 1fr; gap: 9px; }
@media (min-width: 560px) { .lk-banner-cols { grid-template-columns: 1fr 1fr; } }
.lkb-card { background: rgba(255,255,255,.04); border: 1px solid rgba(108,140,255,.2); border-radius: 11px; padding: 8px 10px; }
.lkb-h { font-weight: 800; font-size: 11.5px; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: #cfe0ff; }
.lkb-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); }
.lkb-row:first-of-type { border-top: none; }
.lkb-ic { color: var(--accent); display: inline-flex; flex: 0 0 auto; }
.lkb-name { font-weight: 600; font-size: 13.5px; }
.lkb-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.lkb-price { font-weight: 800; font-size: 15.5px; color: #fff; }
.lkb-price small { font-size: 10px; font-weight: 600; color: var(--text-dim); }
.lkb-days { font-size: 9.5px; color: var(--text-dim); margin-top: 1px; text-align: right; max-width: 130px; }
.lkb-addbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
/* 2 columnas SOLO en PC (≥1000px, igual que el resto de la app). En móvil = una sola columna. */
/* Móvil: flujo normal en una sola columna (como antes). 2 columnas SOLO en PC (≥1000px). */
.pf-admin-2col { display: block; }
@media (min-width: 1000px) { .pf-admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } }
.pf-admin-col { min-width: 0; }
.pf-calc { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin: 10px 0; }
.pf-calc-h { font-size: 11.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .3px; padding: 8px 0 4px; }
.pf-calc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.pf-calc-row:first-child { border-top: none; }
.pf-calc-row span { color: var(--text-dim); }
.pf-calc-row span i { font-style: normal; opacity: .6; font-size: 11px; margin-left: 4px; }
.pf-calc-row b { color: var(--text); font-weight: 800; font-size: 14px; white-space: nowrap; }
.pf-calc-row.big { border-top: none; }
.pf-calc-row.big span { color: var(--text); font-weight: 700; }
.pf-calc-row.big b { color: var(--accent); font-size: 17px; }
.pkph-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pkph-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); }
.pkph-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pkph-thumb .pkph-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pkph-add { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 12px; border: 1.5px dashed var(--line); background: var(--bg2); color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.pkph-add:hover { border-color: var(--accent); }
/* Tarifas minimalistas del casillero (tabla/diagrama) */
.lkm { border: 1px solid var(--line); border-radius: 13px; padding: 2px 12px 8px; margin-bottom: 12px; background: var(--bg2); }
.lkm-h { font-size: 11.5px; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; gap: 6px; padding: 9px 0 6px; }
.lkm-h b { color: var(--text); }
.lkm-h svg { color: var(--accent); }
/* Tabla transpuesta: tipos de envío = columnas; precio/mínimo/tiempo = filas. Celdas cuadradas, sin desbordar. */
.lkg { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; margin-top: 2px; }
.lkg th, .lkg td { text-align: center; padding: 6px 2px; border-radius: 8px; line-height: 1.12; font-size: 11px; font-weight: 700; vertical-align: middle; overflow-wrap: anywhere; word-break: break-word; }
.lkg small { display: block; font-size: 8.5px; font-weight: 600; opacity: .65; margin-top: 1px; letter-spacing: .2px; }
.lkg thead th { background: var(--accent); color: #fff; font-size: 10.5px; }
.lkg thead th:first-child { background: transparent; }
.lkg tbody th { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); font-size: 10.5px; }
.lkg tbody td { background: rgba(255,255,255,.05); color: var(--text); }
.lkg thead th .lkg-ic { display: flex; align-items: center; justify-content: center; line-height: 0; }
.lkg thead th .lkg-ic svg { width: 20px; height: 20px; }
@media (max-width: 360px) { .lkg th, .lkg td { font-size: 10px; padding: 5px 1px; } .lkg small { font-size: 8px; } }
/* Tabla de tarifas ÚNICA (casillero): método · precio · peso · tiempo. Compacta, PC y móvil. */
.lk-tar { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
.lk-tar thead th { text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); padding: 0 3px 2px; }
.lk-tar thead th:first-child { text-align: left; padding-left: 9px; width: 30%; }
.lk-tar tbody td { background: rgba(255,255,255,.055); padding: 7px 3px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text); vertical-align: middle; line-height: 1.14; overflow-wrap: anywhere; }
.lk-tar tbody td:first-child { border-radius: 9px 0 0 9px; }
.lk-tar tbody td:last-child { border-radius: 0 9px 9px 0; }
.lk-tar-m { text-align: left !important; padding-left: 9px !important; white-space: nowrap; }
.lk-tar-ic { display: inline-flex; vertical-align: middle; margin-right: 5px; color: var(--accent); }
.lk-tar-p b { font-size: 14.5px; font-weight: 800; }
.lk-tar-p small, .lk-tar-p2 small { display: block; font-size: 8.5px; font-weight: 600; opacity: .6; letter-spacing: .2px; }
.lk-tar-p2 { display: block; font-size: 10px; font-weight: 700; opacity: .82; margin-top: 1px; }
.lk-tar-p2 small { display: inline; font-size: 8px; margin-left: 1px; }
.lk-tar-w, .lk-tar-d { font-size: 10.5px; font-weight: 700; }
.lk-tar-d { color: var(--text-dim); }
.lk-tar-exp td { background: linear-gradient(90deg, rgba(255,199,88,.16), rgba(255,199,88,.05)); }
.lk-tar-exp .lk-tar-ic { color: #f5b53f; }
.lk-tar-flat { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text); margin: 9px 3px 0; }
.lk-tar-flat b { font-weight: 800; }
.lk-tar-flat span { opacity: .62; font-weight: 500; }
.lk-tar-flat svg { color: #f5b53f; flex: 0 0 auto; }
.lk-tar-note { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin: 8px 3px 2px; line-height: 1.35; }
.lk-tar-note > span { flex: 1; min-width: 0; }
.lk-tar-note b { color: var(--text); font-weight: 700; }
.lk-tar-note svg { color: var(--text-dim); flex: 0 0 auto; margin-top: 1px; }
.lk-tar-note-sec { margin-top: 3px; }
.lk-tarwrap.lkm { padding: 10px 12px 11px; }
@media (max-width: 360px) { .lk-tar tbody td { font-size: 10.5px; padding: 6px 2px; } .lk-tar-p b { font-size: 13px; } .lk-tar-w, .lk-tar-d { font-size: 9.5px; } }
/* "¿Cómo funciona?" en forma de barrita (mismo estilo que la barra de estados del paquete) */
.lk-howto { margin: 2px 0 8px; }
.lk-howto .otl-step { width: 56px; }
.lk-howto .otl-dot { background: var(--accent); border-color: var(--accent); color: #0a0e1f; width: 24px; height: 24px; }
.lk-howto .otl-l { font-size: 10px; line-height: 1.15; }
.lk-howto .otl-bar { background: var(--accent); opacity: .45; margin-top: 11px; }
.lk-pkg-img { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; cursor: pointer; background: var(--bg2); }
.lk-pkg-noimg { display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: default; }
.lk-pkg-info { min-width: 0; flex: 1; }
.lk-pkg-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Casillero — carrito flotante de envíos */
.lk-cartfab { position: fixed; right: 18px; bottom: 92px; z-index: 45; display: none; align-items: center; gap: 8px; background: var(--accent); color: #0a0e1f; border: none; border-radius: 28px; padding: 13px 20px; font: inherit; font-weight: 800; font-size: 15px; box-shadow: 0 8px 24px rgba(108,140,255,.45); cursor: pointer; }
.lk-cartfab:active { transform: scale(.96); }
@media (min-width: 1000px) { .lk-cartfab { bottom: 28px; right: 28px; } }
.lk-cartcount { background: rgba(0,0,0,.28); border-radius: 12px; padding: 1px 9px; font-size: 13px; }
/* Flotante de SOPORTE por WhatsApp del casillero (estilo burbuja del chatbot del mercado, verde marca) */
.lk-wafab { position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,.5); z-index: 44; cursor: pointer; text-decoration: none; transition: bottom .25s cubic-bezier(.34,1.56,.64,1), opacity .4s ease, box-shadow .4s ease, transform .2s; }
.lk-wafab[hidden] { display: none; }
.lk-wafab:active { transform: scale(.92); }
/* Se desvanece al bajar y reaparece arriba (igual que la burbuja de soporte del mercado). */
.lk-wafab.hide { opacity: 0; box-shadow: 0 0 0 rgba(37,211,102,0); pointer-events: none; }
.lk-wafab.hide::before, .lk-wafab.hide::after { animation: none; opacity: 0; }
.lk-wafab.raised { bottom: calc(158px + env(safe-area-inset-bottom)); }
.lk-wafab::before, .lk-wafab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: fabPulse 2.6s ease-out infinite; }
.lk-wafab::after { animation-delay: 1.3s; }
@media (prefers-reduced-motion: reduce) { .lk-wafab::before, .lk-wafab::after { animation: none; } }
@media (min-width: 1000px) { .lk-wafab { bottom: 28px; right: 28px; } .lk-wafab.raised { bottom: 94px; } }
.lk-cartadd { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line2); background: var(--bg2); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.lk-cartadd.on { background: var(--accent); color: #0a0e1f; border-color: var(--accent); }

/* Casillero — bloque "Nuevos": carrito de paquetes estilo marketplace */
.lk-encamino { margin-bottom: 12px; }
.lk-cartbox { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--bg2); overflow: hidden; }
.lk-cartbox-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.lk-cartbox-h svg { width: 15px; height: 15px; }
.lk-cartrow { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lk-cartrow:last-of-type { border-bottom: none; }
.lk-cartimg { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; cursor: pointer; background: var(--bg); }
.lk-cartinfo { min-width: 0; flex: 1; }
.lk-cartname { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.lk-cartmeta { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; }
.lk-cartaran { margin-top: 1px; opacity: .9; }
.lk-cartprice { font-weight: 800; font-size: 15px; white-space: nowrap; padding-top: 2px; }
.lk-cartprice2 { font-weight: 800; font-size: 16px; }
.lk-cartsep { margin-top: 7px; background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.lk-cartsep svg { width: 11px; height: 11px; }
/* Botón "Sacar de la caja" a la derecha de la fila (donde antes iba el precio) */
.lk-outbtn { flex-shrink: 0; align-self: center; background: none; border: 1px solid var(--line2); border-radius: 9px; padding: 7px 11px; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; }
.lk-outbtn:hover { border-color: var(--accent); color: var(--accent); }
.lk-boxmeth { margin: 12px 0 6px; }
/* Resumen de checkout: total de libras · subtotal · total */
.lk-checkout { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.lk-cok-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-dim); padding: 4px 0; }
.lk-cok-row b { color: var(--text); font-weight: 700; }
.lk-cok-total { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); }
.lk-cok-total b { font-size: 20px; font-weight: 800; }
/* Botón Pagar: a todo lo ancho del grupo (borde a borde), un poco más alto y separado del total.
   Especificidad extra para ganarle a `.lk-pkpanel .btn.accent` (botón chico del panel). */
.lk-pkpanel .btn.accent.lk-paybtn { box-sizing: border-box; width: calc(100% + 24px); margin: 18px -12px -12px; border-radius: 0; padding: 17px 16px; font-size: 15.5px; }
.lk-cartbox-tot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 14px; }
.lk-cartbox-tot b { font-size: 18px; }
.lk-cartsepcard { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 12px; background: var(--bg2); }

/* Compras asistidas */
.ca-banner{margin:0 16px 8px}   /* mismos márgenes laterales que .searchbar (no pegar a las paredes) */
.ca-banner .lk-banner-bar{padding:7px 12px;gap:8px}
.ca-banner .lkbar-ic svg{width:14px;height:14px}
.ca-banner .lkbar-t{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ca-banner .lkbar-cta{font-size:11px;flex-shrink:0}
.ca-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.ca-row .input{flex:1}
.ca-del{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ca-del:active{transform:scale(.94)}
.ca-card{cursor:pointer;transition:border-color .15s}
.ca-card:active{transform:scale(.99)}

/* Ganancias de tarjetas — banner detalle */
.ce-banner .lk-banner-body{padding:10px 13px 13px}
.ceb-sec{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--text-dim);text-transform:uppercase;margin:4px 0 2px}
.ceb-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13.5px}
.ceb-net{border-top:1px solid var(--line);margin-top:8px;padding-top:4px}

/* ═══ MUNDIAL — sorteo por predicciones (estilo mundialista) ═══ */
.mdl-view { background:
  radial-gradient(1100px 380px at 50% -120px, rgba(0,170,90,.18), transparent 60%),
  linear-gradient(180deg, #07140d 0%, var(--bg2) 55%); }
.mdl-top { background: transparent; }
/* Hero PRO: la imagen IA del Mundial (copa + confeti) de fondo + degradado para legibilidad */
/* Toggle Partidos | Tabla + tabla de posiciones por grupo (estilo FIFA). */
.mdl-toggle { display: flex; gap: 8px; margin: 0 0 14px; }
.mdt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 11px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.mdt.on { background: var(--accent); color: #fff; border-color: transparent; }
.mdl-grp { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px 10px; margin-bottom: 12px; }
.mdl-grp-h { font-size: 14px; font-weight: 800; padding: 4px 2px 8px; color: var(--text); }
.mdl-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mdl-tbl th { color: var(--text-dim); font-weight: 700; font-size: 11px; text-transform: uppercase; padding: 0 5px 7px; text-align: center; }
.mdl-tbl th.l, .mdl-tbl td.l { text-align: left; }
.mdl-tbl td { padding: 7px 5px; text-align: center; border-top: 1px solid rgba(255,255,255,.05); color: var(--text); font-variant-numeric: tabular-nums; }
.mdl-tbl td.pts { font-weight: 800; }
.mdl-tbl .mdl-pos { color: var(--text-dim); width: 18px; }
.mdl-tbl .mdl-tn { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 150px; }
.mdl-tbl .mdl-tn span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-tbl .mdl-flagimg { width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto; object-fit: cover; }
.mdl-tbl tr.top td { background: rgba(91,140,255,.06); }
.mdl-tbl tr.adv td { background: rgba(54,194,117,.1); }
.mdl-tbl tr.adv .mdl-pos { color: var(--green); font-weight: 800; }
.mdl-q { color: var(--green); font-weight: 800; margin-left: 2px; }
.mdl-tbl-note { font-size: 11.5px; color: var(--text-dim); padding: 2px 4px 8px; line-height: 1.5; }
/* Cuadro de ELIMINATORIAS (bracket): columnas por ronda, scroll horizontal. */
.mdl-bracket { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; align-items: flex-start; }
.mdl-bracket::-webkit-scrollbar { display: none; }
.mbk-col { flex: 0 0 200px; }
.mbk-col-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--accent); padding: 2px 2px 8px; }
.mbk-m { background: var(--bg2); border: 1px solid var(--line); border-radius: 11px; padding: 4px; margin-bottom: 10px; }
.mbk-m.done { border-color: rgba(54,194,117,.25); }
.mbk-team { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; font-size: 13px; }
.mbk-team + .mbk-team { margin-top: 2px; }
.mbk-team .mdl-flagimg { width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto; object-fit: cover; }
.mbk-tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mbk-team b { font-variant-numeric: tabular-nums; font-weight: 800; }
.mbk-team.win { background: rgba(54,194,117,.14); }
.mbk-team.win .mbk-tn { color: var(--green); }
.mbk-team.tbd { color: var(--text-dim); }
.mbk-team.tbd .mbk-tn { font-weight: 500; font-style: italic; }
.mdl-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 110px 18px 18px; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(8,16,11,.18) 0%, rgba(7,14,10,.78) 62%, rgba(6,12,9,.94) 100%), url("icons/promo/mundial.jpg") center/cover;
  border: 1px solid rgba(255,255,255,.10); box-shadow: 0 14px 40px rgba(0,0,0,.45); text-align: center; }
.mdl-hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,209,102,.18), transparent 60%); }
.mdl-hero-lbl { position: relative; font-size: 13px; color: rgba(255,255,255,.9); font-weight: 700; letter-spacing: .2px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.mdl-hero-pts { position: relative; font-size: 56px; font-weight: 900; line-height: 1; color: #ffd166; margin: 4px 0 12px; text-shadow: 0 2px 18px rgba(0,0,0,.6), 0 0 30px rgba(255,209,102,.35); }
.mdl-hero > * { position: relative; }
.mdl-prog { height: 11px; border-radius: 20px; background: rgba(0,0,0,.35); overflow: hidden; }
.mdl-prog-bar { height: 100%; border-radius: 20px; background: linear-gradient(90deg, #ffd166, #f4a62a); transition: width .5s; }
.mdl-prog-lbl { font-size: 12px; color: rgba(255,255,255,.9); margin: 7px 0 14px; }
.mdl-redeem { width: 100%; padding: 13px; border-radius: 14px; font-weight: 800; font-size: 14.5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none;
  background: linear-gradient(90deg, #ffd166, #f4a62a); color: #2a1a00; box-shadow: 0 6px 16px rgba(244,166,42,.4); }
.mdl-redeem.off { background: rgba(255,255,255,.10); color: rgba(255,255,255,.55); box-shadow: none; cursor: default; }
.mdl-credit { margin-top: 10px; font-size: 12.5px; color: #ffe39a; font-weight: 600; }
.mdl-howto { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 0 0 16px; padding: 12px 14px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 14px; }
.mdl-howto b { color: var(--text); }
.mdl-match { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--line); border-radius: 18px; padding: 14px 15px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.mdl-m-stage { font-size: 11.5px; color: var(--text-dim); margin-bottom: 9px; text-transform: capitalize; }
.mdl-m-teams { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.mdl-team { flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; min-width: 0; letter-spacing: -.2px; }
.mdl-team span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-team.r { justify-content: flex-end; text-align: right; }
.mdl-team.win { color: #ffd166; }
.mdl-flag { font-size: 26px; }
.mdl-vs { font-size: 14px; color: var(--text-dim); font-weight: 700; min-width: 54px; text-align: center; display: flex; align-items: center; justify-content: center; }
.mdl-vs b { color: #fff; font-size: 18px; background: rgba(0,0,0,.34); padding: 5px 13px; border-radius: 11px; display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mdl-picks { display: flex; gap: 8px; }
.mdl-pick { flex: 1; padding: 11px 4px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; line-height: 1.2; transition: transform .12s ease, border-color .15s, background .15s, box-shadow .2s; }
.mdl-pick:active { transform: scale(.96); }
.mdl-pick span { display: block; font-size: 11px; color: var(--green); font-weight: 800; margin-top: 2px; }
.mdl-pick.on { border-color: #ffd166; background: rgba(255,209,102,.16); color: #ffd166; box-shadow: 0 5px 16px rgba(255,209,102,.22); }
.mdl-pick.on span { color: #ffd166; }
@media (hover: hover) { .mdl-pick:hover { border-color: rgba(255,209,102,.5); } }
.mdl-betbar { display: flex; gap: 8px; margin-top: 9px; }
.mdl-betbar .input { flex: 1; }
.mdl-betgo { padding: 0 18px; border-radius: 11px; border: none; font-weight: 800; cursor: pointer;
  background: linear-gradient(90deg, #ffd166, #f4a62a); color: #2a1a00; }
.mdl-mybet { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; }
.mdl-mybet b { color: var(--text); }
.mdl-mybet svg { color: #ffd166; }
.mdl-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 800; margin-left: 4px; }
.mdl-tag.win { background: rgba(46,204,113,.18); color: #4ee08a; }
.mdl-tag.lose { background: rgba(255,107,107,.15); color: #ff8585; }
.mdl-tag.pend { background: rgba(255,209,102,.15); color: #ffd166; }
.mdl-closed { font-size: 12.5px; color: var(--text-dim); font-style: italic; }
.mdl-adm { margin-top: 10px; font-size: 11.5px; color: var(--text-dim); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.mdl-hrow { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mdl-hrow b.pos { color: var(--green); } .mdl-hrow b.neg { color: var(--red); }

/* Banner del Mundial en el inicio */
.mdl-banner { width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 14px;
  border-radius: 14px; cursor: pointer; text-align: left; border: none;
  background: linear-gradient(100deg, #0a7d3e 0%, #075f30 50%, #1a1d22 130%);
  box-shadow: 0 6px 18px rgba(0,120,60,.28); position: relative; overflow: hidden; }
.mdl-banner::after { content: "🏆"; position: absolute; right: -6px; bottom: -10px; font-size: 60px; opacity: .12; }
.mdl-banner-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffd166, #f4a62a); color: #2a1a00; flex-shrink: 0; }
.mdl-banner-tx { flex: 1; color: #fff; font-size: 14px; line-height: 1.3; min-width: 0; }
.mdl-banner-tx span { font-size: 11.5px; color: #ffe39a; }
.mdl-banner-cta { background: #ffd166; color: #2a1a00; font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 20px; flex-shrink: 0; z-index: 1; }

/* Banderas reales (SVG) en el Mundial */
.mdl-flagimg { width: 30px; height: 21px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); background: #1a1d22; display: inline-block; vertical-align: middle; }
.mdl-flag-na { display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); font-weight: 800; font-size: 12px; }
.mdl-team .mdl-flagimg { margin: 0; }

/* Mundial — mejoras de UI (secciones, en vivo, apuesta rápida) */
.mdl-sec { font-size: 13px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
  margin: 16px 2px 9px; display: flex; align-items: center; gap: 7px; }
.mdl-sec span { font-weight: 600; opacity: .7; }
.mdl-sec.live { color: #ff5a5a; }
.mdl-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,59,59,.6); animation: mdlPulse 1.4s infinite; }
@keyframes mdlPulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,59,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); } }
.mdl-match.is-live { border-color: rgba(255,59,59,.45); box-shadow: 0 0 0 1px rgba(255,59,59,.2); }
.mdl-m-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.mdl-m-stage { font-size: 11.5px; color: var(--text-dim); text-transform: capitalize; }
.mdl-m-badge { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.mdl-m-badge.live { background: rgba(255,59,59,.15); color: #ff6b6b; display: inline-flex; align-items: center; gap: 5px; }
.mdl-m-badge.fin { background: rgba(255,255,255,.08); color: var(--text-dim); }
.mdl-m-badge.soon { background: rgba(255,209,102,.13); color: #ffd166; }
.mdl-vs-x { font-size: 11px; font-weight: 800; color: var(--text-dim); letter-spacing: 1px; background: rgba(255,255,255,.05); border: 1px solid var(--line); padding: 6px 9px; border-radius: 10px; }
.mdl-vs b i { font-style: normal; color: var(--text-dim); margin: 0 3px; }
.mdl-pick-lbl { font-size: 12px; color: var(--text-dim); margin: 2px 2px 7px; }
.mdl-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mdl-pick-t { font-size: 12px; font-weight: 700; line-height: 1.15; }
.mdl-pick-o { font-size: 11px; font-weight: 800; color: var(--green); }
.mdl-pick.on .mdl-pick-o { color: #ffd166; }
.mdl-quick { display: flex; gap: 6px; margin-bottom: 8px; }
.mdl-qchip { flex: 1; padding: 7px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.mdl-qchip:active { transform: scale(.97); }
.mdl-betrow { display: flex; gap: 8px; }
.mdl-betrow .input { flex: 1; }
.mdl-win-prev { font-size: 12px; color: var(--green); margin-top: 7px; text-align: center; min-height: 16px; }
.mdl-win-prev b { color: #ffd166; }

/* Casillero — resaltar que el exprés no tiene mínimo */
.lkb-row.lkb-express { background: linear-gradient(90deg, rgba(255,209,102,.12), rgba(255,209,102,0)); border-radius: 10px; padding: 4px 6px; margin: 2px -4px; }
.lkb-nomin { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  color: #2a1a00; background: linear-gradient(90deg, #ffd166, #f4a62a); padding: 2px 7px; border-radius: 20px; vertical-align: middle; }
.lkb-note { font-size: 11.5px; color: #ffd87a; margin: 8px 2px 2px; line-height: 1.4; }
.lkb-note b { color: #ffe39a; }

/* Casillero — formulario de envío por pasos */
.cs-addr-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  color: var(--text-dim); padding: 22px 16px 8px; }
.cs-addr-empty svg { opacity: .5; }
.cs-addr-empty p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.cs-steps { display: flex; gap: 6px; margin: 2px 0 16px; }
.cs-step { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--text-dim); padding: 8px 4px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.cs-step b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--line); color: var(--text-dim); font-size: 11px; }
.cs-step.on { color: var(--text); border-color: var(--accent); background: rgba(108,140,255,.12); }
.cs-step.on b { background: var(--accent); color: #fff; }
.cs-step.done b { background: var(--green); color: #ffffff; }
.cs-review { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cs-rrow { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cs-rrow:last-child { border-bottom: none; }
.cs-rrow span { color: var(--text-dim); flex-shrink: 0; }
.cs-rrow b { text-align: right; }

/* Direcciones guardadas (tarjetas) */
.addr-card { display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; cursor: pointer; color: var(--text); }
.addr-card:active { transform: scale(.995); }
.addr-card-t { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.addr-card-t svg { color: var(--accent); }
.addr-card-s { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.addr-card-acts { display: flex; gap: 14px; margin-top: 8px; }
.addr-card-acts button { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; }

/* Banner "Mis direcciones" en negro (estilo banner de envíos) */
.addr-banner { background: #0b0b0c; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 4px 0; }
.addr-banner .lk-banner-bar { background: transparent; }
.addr-banner .lkbar-ic { color: #fff; }
.addr-banner .lkbar-t { color: #fff; }
.addr-banner .lk-banner-body { padding: 0 14px 14px; }

/* Servicios (apartado independiente) */
.svc-card .svc-noimg { display:flex; align-items:center; justify-content:center; color:var(--text-dim); background:var(--bg2); }
.svc-meta { font-size:11.5px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc-price { font-size:14px; font-weight:800; color:var(--green); margin-top:3px; }
.svc-tags { display:flex; flex-wrap:wrap; gap:6px; }
.svc-tag { font-size:11.5px; color:var(--text-dim); background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:3px 9px; display:inline-flex; align-items:center; gap:4px; }
.svc-price-big { font-size:22px; font-weight:900; color:var(--green); margin-top:6px; }

/* Servicios — barra de acciones compacta */
.svc-tools { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.svc-tool { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.svc-tool.primary { background: linear-gradient(90deg, var(--green), #0a7d3e); color: #ffffff; border-color: transparent; }
.svc-tool:active { transform: scale(.98); }

/* Servicios — reserva por franjas (estilo Fresha/Booksy) */
.sb-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.sb-days::-webkit-scrollbar { display: none; }
.sb-day { flex: 0 0 auto; min-width: 54px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer; text-align: center; line-height: 1.2; }
.sb-day span { display: block; font-size: 10.5px; color: var(--text-dim); text-transform: capitalize; }
.sb-day b { font-size: 13px; }
.sb-day.on { background: rgba(46,160,90,.16); border-color: var(--green); color: var(--green); }
.sb-day.on span { color: var(--green); }
.sb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.sb-slot { padding: 10px 4px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; }
.sb-slot.off { opacity: .32; text-decoration: line-through; cursor: not-allowed; }
.sb-slot.on { background: linear-gradient(90deg, var(--green), #0a7d3e); color: #ffffff; border-color: transparent; }
/* Chips de categoría de servicios con emoji */
.chips .chip { white-space: nowrap; }

/* Tutorial del casillero: PC = video YouTube, móvil = botón al reel de IG */
.lk-tut-pc { display: none; }
.lk-tut-pc iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 14px; display: block; }
.lk-tut-mob { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,#2f6bff,#5a8bff); color: #fff; font-weight: 700; padding: 13px; border-radius: 12px; text-decoration: none; margin: 8px 0 4px; }
@media (min-width: 1000px) { .lk-tut-pc { display: block; } .lk-tut-mob { display: none; } }

/* Botón Filtrar integrado a la derecha de la barra de búsqueda (header minimalista) */
.searchbar .search-filt { flex-shrink: 0; background: none; border: 0; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; position: relative; padding: 2px 0 2px 6px; }
.searchbar .search-filt.active { color: var(--accent); }
.searchbar .search-filt .fb-dot { position: absolute; top: -1px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Aviso de búsqueda sin match exacto / sugerencias */
.search-note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; margin-bottom: 4px; }
.search-note svg { color: var(--accent); flex-shrink: 0; }
.search-note b { color: var(--text); font-weight: 700; }

/* Flechitas para pasar filas horizontales (categorías, eventos/promos) en PC.
   Solo en dispositivos con mouse (en móvil se hace swipe). */
.rail-arrow { display: none; }
@media (hover: hover) and (min-width: 820px) {
  .rail-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(18,18,24,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--line); color: var(--text);
    box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer; z-index: 8;
    transition: opacity .2s ease, background .2s ease, transform .15s ease;
  }
  .rail-arrow:hover { background: var(--accent); color: #fff; transform: translateY(-50%) scale(1.06); }
  .rail-arrow:active { transform: translateY(-50%) scale(.94); }
  .rail-arrow.prev { left: 4px; }
  .rail-arrow.next { right: 4px; }
  .rail-arrow.hide { opacity: 0; pointer-events: none; }
}

/* ── Soporte NATIVO (chat de agentes IA, ya no iframe) ───────────────────────── */
/* inset:0 ancla a los 4 bordes FÍSICOS (con viewport-fit=cover) → llega al fondo real.
   min-height:0 anula .view{min-height:100dvh}. Fondo = color del chat. */
.sup-view { position: fixed; inset: 0; min-height: 0; z-index: 60; background: var(--bg2); display: flex; flex-direction: column; animation: none; }
/* RED DE SEGURIDAD: con el soporte abierto, el fondo del body es el del chat. Si por dvh/safe-area
   asomara CUALQUIER franja detrás del chat, será de este color (no negra) = invisible. */
body:has(.sup-view) { background: var(--bg2) !important; }
body:has(.sup-view) #app { background: var(--bg2); }
body.sup-open, body.sup-open #app, html.sup-open { background: var(--bg2) !important; }
.sup-top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.sup-agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sup-help-btn { margin-left: auto; flex: 0 0 auto; }
/* Drawer lateral izquierdo de ayuda (FAQ + video-tutoriales) dentro del soporte. */
.sup-drawer-ov { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 30; }
.sup-drawer-ov.open { opacity: 1; pointer-events: auto; }
.sup-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: min(88%, 360px); background: var(--bg); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .26s cubic-bezier(.22,.61,.36,1); z-index: 31; display: flex; flex-direction: column; box-shadow: 8px 0 28px rgba(0,0,0,.5); }
.sup-drawer.open { transform: translateX(0); }
.sup-drawer-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(14px, env(safe-area-inset-top)) 14px 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
.sup-drawer-head .iconbtn { transform: scaleX(-1); }
.sup-drawer-body { flex: 1; overflow-y: auto; padding: 12px 14px 30px; -webkit-overflow-scrolling: touch; }
.sup-dr-h { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); font-weight: 700; margin: 16px 4px 8px; }
.sup-dr-h:first-child { margin-top: 4px; }
.sup-faq { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--bg2); overflow: hidden; }
.sup-faq summary { padding: 13px 14px; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sup-faq summary::-webkit-details-marker { display: none; }
.sup-faq summary::after { content: "+"; color: var(--text-dim); font-size: 19px; line-height: 1; flex: 0 0 auto; }
.sup-faq[open] summary::after { content: "−"; }
.sup-faq-a { padding: 0 14px 14px; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.sup-dr-soon { color: var(--text-dim); font-size: 13.5px; background: var(--bg2); border: 1px dashed var(--line); border-radius: 12px; padding: 18px 16px; text-align: center; line-height: 1.5; }
.sup-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0; background: var(--accent); }
.sup-ainfo { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sup-ainfo b { font-size: 15px; color: var(--text); }
.sup-ainfo i { font-style: normal; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.sup-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.sup-msgs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(rgba(13,13,17,.78), rgba(13,13,17,.78)), url('chatbg-mob.jpg') center center / cover no-repeat; }
.sup-row { display: flex; max-width: 86%; }
.sup-row.me { align-self: flex-end; }
.sup-row.them { align-self: flex-start; }
.sup-bub { padding: 9px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.42; word-wrap: break-word; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.sup-row.them .sup-bub { background: var(--card); color: var(--text); border-bottom-left-radius: 5px; }
.sup-row.me .sup-bub { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.sup-bub.img { padding: 3px; background: transparent; }
.sup-bub.typing { padding: 10px 14px; }
.sup-guide { max-width: 240px; width: 100%; border-radius: 12px; display: block; }
.sup-sys { align-self: center; font-size: 11.5px; color: var(--text-dim); background: var(--card); padding: 4px 12px; border-radius: 20px; margin: 4px 0; text-align: center; }
.sup-typing { display: inline-flex; gap: 4px; align-items: center; }
.sup-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); animation: supblink 1.2s infinite; }
.sup-typing span:nth-child(2) { animation-delay: .2s; }
.sup-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes supblink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.sup-compose { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); background: var(--bg2); border-top: 1px solid var(--line); }
.sup-input { flex: 1; resize: none; border: none; outline: none; border-radius: 20px; padding: 10px 14px; background: var(--panel); color: var(--text); font: inherit; font-size: 15px; max-height: 120px; line-height: 1.3; }
.sup-send { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sup-send:disabled { opacity: .5; }
.sup-rating { align-self: center; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin: 8px 0; }
.sup-rate-t { font-size: 13.5px; color: var(--text); margin-bottom: 8px; }
.sup-stars { display: flex; gap: 6px; justify-content: center; }
.sup-star { font-size: 28px; line-height: 1; background: none; border: 0; color: var(--line); cursor: pointer; padding: 0 2px; }
.sup-star.on { color: #f5b301; }
.sup-rate-ok { font-size: 12.5px; color: var(--green); margin-top: 8px; }

/* ── Buscador con IA (la lupa del Inicio): chat de búsqueda + compra asistida ── */
.shop-av { background: linear-gradient(135deg, #6c8cff, #a855f7) !important; color: #fff; display: flex; align-items: center; justify-content: center; }
.sup-row.shop-wide { max-width: 94%; }
.sup-row.shop-wide .sup-bub { background: transparent !important; box-shadow: none; padding: 2px 0; width: 100%; }
.shop-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shop-pcard { display: flex; gap: 9px; align-items: center; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 7px; cursor: pointer; overflow: hidden; }
.shop-pcard:active { transform: scale(.98); }
.spc-img { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: var(--panel); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.spc-img img { width: 100%; height: 100%; object-fit: cover; }
.spc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spc-t { font-size: 12.5px; color: var(--text); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spc-p { font-size: 13.5px; font-weight: 800; color: var(--accent); }
.shop-web, .shop-assist { display: flex; flex-direction: column; gap: 8px; }
.shop-wcard { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 11px; }
.swc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.swc-t { font-size: 13px; color: var(--text); line-height: 1.3; }
.swc-p { font-size: 13px; font-weight: 800; color: var(--green); }
.swc-link { font-size: 11.5px; color: var(--text-dim); text-decoration: none; }
.swc-link:hover { color: var(--text); }
.swc-get { flex: 0 0 auto; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; }
.sa-assist-h { font-size: 13.5px; color: var(--text); line-height: 1.4; }
.sa-assist-url { width: 100%; }
.shop-stores { display: flex; flex-direction: column; gap: 8px; }
.shop-stores-h { font-size: 12.5px; color: var(--text-dim); }
.shop-stores-row { display: flex; flex-wrap: wrap; gap: 7px; }
.shop-store-chip { font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 7px 13px; text-decoration: none; }
.shop-store-chip:hover { border-color: var(--accent); color: var(--accent); }
.sup-bub.shop-hint { background: transparent !important; box-shadow: none; padding: 0; }
.shop-hint-btn { background: transparent; border: 1px dashed var(--line); color: var(--text-dim); font-size: 12.5px; padding: 8px 13px; border-radius: 20px; cursor: pointer; }
.shop-hint-btn:hover { color: var(--text); border-color: var(--accent); }
.shop-hint-btn:disabled { opacity: .5; }

/* ════════════════════════════════════════════════════════════════════════════
   PC — REDISEÑO TIPO TIENDA (estilo ESTORE): nav superior + layout ancho + footer.
   SOLO ≥1000px. MANTIENE los colores del tema (oscuro). El móvil NO se toca.
   ════════════════════════════════════════════════════════════════════════════ */
#pc-topnav { display: none; }
.pc-sec-h, .pc-footer, .stores-rail, .hero-spot, .pc-prodhead { display: none; }   /* solo-PC: ocultos en móvil */

@media (min-width: 1000px) {
  /* El sidebar oscuro se REEMPLAZA por una barra de navegación superior. */
  #pc-sidebar { display: none !important; }

  #pc-topnav {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(14,14,16,.92); backdrop-filter: blur(12px) saturate(1.2);
    border-bottom: 1px solid var(--line);
  }
  .tn-inner { max-width: 100%; margin: 0 auto; height: 64px; display: grid;
    grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 0 34px; }
  .tn-links { display: flex; gap: 24px; justify-self: start; }
  .tn-link { background: none; border: none; color: var(--text-dim); font-size: 14.5px; font-weight: 600;
    cursor: pointer; padding: 6px 0; position: relative; transition: color .15s; white-space: nowrap; }
  .tn-link:hover { color: var(--text); }
  .tn-link.active { color: var(--text); }
  .tn-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
    background: var(--accent); border-radius: 2px; }
  .tn-logo { justify-self: center; display: flex; align-items: center; gap: 8px; background: none; border: none;
    color: var(--text); font-weight: 900; font-size: 17px; letter-spacing: -.3px; cursor: pointer; white-space: nowrap; }
  .tn-logo svg { color: var(--accent); }
  .tn-icons { justify-self: end; display: flex; align-items: center; gap: 8px; }
  .tn-ic { width: 42px; height: 42px; border-radius: 12px; background: transparent; border: 1px solid transparent;
    color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s, border-color .15s; }
  .tn-ic:hover { background: var(--bg2); border-color: var(--line); }
  .tn-wallet { width: auto; padding: 0 14px; gap: 7px; background: rgba(108,140,255,.14);
    border-color: rgba(108,140,255,.26); font-weight: 700; font-size: 13.5px; }
  .tn-wallet svg { color: var(--accent); }
  .tn-wallet b { font-weight: 800; }

  /* #app deja de tener sidebar a la izquierda → ocupa TODO el ancho de la pantalla bajo el nav fijo. */
  #app { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important;
    width: 100%; padding-top: 64px; border-left: none !important; border-right: none !important;
    box-shadow: none !important; }
  /* Los topbar de páginas internas se bajan para no quedar tapados por el nav fijo. */
  .topbar { top: 64px; }

  /* Home: más aire y ancho aprovechado. */
  .view-home { padding: 0 34px 30px; }
  .home-search { margin: 8px 0 4px; }

  /* Categorías populares NO van en el home de PC (la navegación de categorías va en los chips de productos). */
  .cat-sec { display: none; }

  /* ── HERO en 2 partes (idéntico a la referencia): carrusel (izq) + producto destacado (der),
     MISMA altura y perfectamente alineados (sin cortes). ── */
  .promo-wrap { margin: 20px 0 10px; display: grid; grid-template-columns: 1.8fr 1fr; gap: 16px; height: 384px; }
  .promo-wrap .promo-rail { border-radius: 20px; overflow-x: auto; overflow-y: hidden; height: 100%; }
  .promo-wrap .promo-card { aspect-ratio: auto !important; max-height: none !important; height: 100%; }
  .promo-wrap .promo-tx { justify-content: flex-start; padding-top: 30px; max-width: 72%; }
  .promo-wrap .promo-t { font-size: 30px; line-height: 1.08; }
  .promo-wrap .promo-s { font-size: 15px; }
  .promo-wrap .promo-dots { left: 22px; right: auto; width: auto; justify-content: flex-start; bottom: 18px; }
  .hero-spot { display: block; height: 100%; }
  .hs-card { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--bg2);
    border: 1px solid var(--line); border-radius: 18px; overflow: hidden; cursor: pointer; text-align: left;
    transition: border-color .15s, transform .12s; }
  .hs-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .hs-img { display: block; flex: 1; min-height: 170px; background-size: contain; background-repeat: no-repeat;
    background-position: center; background-color: #fff; }
  .hs-body { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 15px; }
  .hs-name { font-weight: 700; font-size: 14.5px; color: var(--text); line-height: 1.3; max-height: 2.6em; overflow: hidden; }
  .hs-store { font-size: 12px; color: var(--text-dim); }
  .hs-row { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
  .hs-price { font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -.3px; }
  .hs-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff;
    font-weight: 700; font-size: 13px; padding: 8px 15px; border-radius: 999px; }

  /* Encabezados de sección estilo tienda ("Categorías populares", "Productos populares"). */
  .pc-sec-h { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.4px;
    color: var(--text); margin: 26px 4px 14px; }

  /* ── CATEGORÍAS estilo BENTO (tarjetas grandes: nombre + conteo + imagen) ── */
  .cat-sec { margin: 0 0 4px; }
  .cat-sec .rail-arrow { display: none !important; }   /* el bento no scrollea horizontal */
  .cat-rail { display: grid !important; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 192px;
    gap: 14px; overflow: visible !important; padding: 0 !important; }
  .cat-rail .cat-tile { position: relative; flex: none !important; width: auto !important; max-width: none !important;
    height: 100%; display: block; gap: 0; border-radius: 18px; overflow: hidden;
    background: var(--bg2); border: 1px solid var(--line); box-shadow: none; }
  /* Bento: la 1ª y la 6ª de cada grupo ocupan 2 columnas (como la referencia). */
  .cat-rail .cat-tile:nth-child(6n+1), .cat-rail .cat-tile:nth-child(6n+6) { grid-column: span 2; }
  .cat-rail .cat-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
    box-shadow: none; background: var(--bg2); z-index: 0; }
  .cat-rail .cat-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
  .cat-rail .cat-tile::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(150deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.22) 36%, transparent 58%); }
  .cat-rail .cat-tile-name { position: absolute; top: 15px; left: 18px; right: 16px; z-index: 2; text-align: left;
    font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: #fff; padding: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-rail .cat-tile-count { display: block; position: absolute; top: 41px; left: 18px; z-index: 2;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.8); }
  .cat-rail .cat-tile-dig .cat-tile-img { background: linear-gradient(135deg, var(--accent), #4a5cc4); }
  .cat-rail .cat-tile:hover { border-color: var(--accent); }
  .cat-rail .cat-tile:hover .cat-tile-img img { transform: scale(1.05); }

  /* ── "Productos populares": encabezado + chips de categoría (estilo ESTORE) ── */
  .filter-row { display: none; }   /* en PC, las categorías reemplazan a "Para ti/Precios del día" */
  .pc-prodhead { display: flex; align-items: center; gap: 16px; margin: 26px 4px 14px; flex-wrap: wrap; }
  .pc-prodhead h2 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--text); margin: 0; }
  .pc-prodcats { display: flex; gap: 9px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .pcat-chip { background: none; border: 1px solid var(--line); color: var(--text-dim); font-size: 13.5px;
    font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s; }
  .pcat-chip:hover { color: var(--text); border-color: var(--text-dim); }
  .pcat-chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }

  /* Grid de productos: 4 columnas con buen espaciado en monitores. */
  .grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px; padding: 4px 0 10px !important; }

  /* ── TARJETAS de producto clonadas de la referencia (con nuestros colores) ── */
  .view-home .grid .card { background: none; border: none; box-shadow: none !important; }
  .view-home .grid .card .ph { border-radius: 16px; background: var(--bg2); border: 1px solid var(--line);
    aspect-ratio: 1; box-shadow: none; }
  .view-home .grid .card:hover .ph { transform: none; box-shadow: 0 10px 26px rgba(0,0,0,.35); border-color: var(--line); }
  .view-home .grid .card .ph img { object-fit: cover; padding: 0; }
  .view-home .grid .card-fav { top: 10px; right: 10px; left: auto; width: 34px; height: 34px;
    background: var(--bg); border: 1px solid var(--line); }
  .view-home .grid .card .body { display: flex; flex-direction: column; gap: 2px; padding: 11px 2px 2px; }
  .view-home .grid .card .price { order: -1; font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 1px; }
  .view-home .grid .card .t { font-size: 14px; font-weight: 600; color: var(--text); white-space: normal;
    line-height: 1.3; max-height: 2.6em; overflow: hidden; }
  .view-home .grid .card .loc { font-size: 12.5px; color: var(--text-dim); }
  .view-home .grid .card-rate { display: none; }   /* tarjeta limpia como la referencia */
  .view-home .grid .card-offer-left { display: none; }

  /* ── Franja de TIENDAS destacadas (equivalente a "brands") ── */
  .stores-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .store-chip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
    background: var(--bg2); border: 1px solid var(--line); cursor: pointer; text-align: left;
    transition: transform .12s ease, border-color .15s; }
  .store-chip:hover { transform: translateY(-2px); border-color: var(--accent); }
  .store-logo { width: 46px; height: 46px; border-radius: 12px; background-size: cover; background-position: center;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; }
  .store-info { display: flex; flex-direction: column; min-width: 0; }
  .store-name { font-weight: 700; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .store-count { font-size: 12.5px; color: var(--text-dim); }

  /* ── FOOTER (3 columnas de enlaces + marca + copyright) ── */
  .pc-footer { display: block; margin: 40px -34px 0; padding: 40px 34px 26px;
    border-top: 1px solid var(--line); background: var(--bg2); }
  .pf-cols { max-width: 100%; margin: 0 auto; display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
  .pf-brand .pf-logo { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 17px;
    color: var(--text); margin-bottom: 10px; }
  .pf-brand .pf-logo svg { color: var(--accent); }
  .pf-brand p { color: var(--text-dim); font-size: 13.5px; line-height: 1.55; max-width: 300px; margin: 0; }
  .pf-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim);
    margin: 4px 0 12px; font-weight: 800; }
  .pf-col button, .pf-col a { display: block; background: none; border: none; padding: 0 0 10px; cursor: pointer;
    color: var(--text); font-size: 14px; text-align: left; transition: color .15s; }
  .pf-col button:hover, .pf-col a:hover { color: var(--accent); }
  .pf-bottom { max-width: 100%; margin: 24px auto 0; padding-top: 18px; border-top: 1px solid var(--line);
    color: var(--text-dim); font-size: 12.5px; }
}
/* En monitores anchos, más columnas para que el contenido respire (no se vea estirado). */
@media (min-width: 1500px) {
  .view-home .grid { grid-template-columns: repeat(5, 1fr) !important; }
  .stores-rail { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1900px) {
  .view-home .grid { grid-template-columns: repeat(6, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PC — PASE MINIMALISTA (impecable). Sobre los colores oscuros de Desbloqueados.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  /* Buscador fuera del cuerpo: se abre desde el icono del nav. */
  .home-search { display: none; }
  body.search-on .home-search { display: block; max-width: 560px; margin: 10px auto 2px; }
  /* El selector Mercado/Envíos es solo móvil (en PC manda el nav superior con "Casillero"). */
  .mode-toggle { display: none; }
  .home-top { display: none; }   /* en PC manda el nav superior */

  /* Nav más fino y elegante. */
  #pc-topnav { background: rgba(14,14,16,.82); border-bottom: 1px solid rgba(255,255,255,.06); }
  .tn-inner { height: 62px; padding: 0 40px; }
  .tn-link { font-size: 14px; font-weight: 500; letter-spacing: .1px; }
  .tn-link.active::after { height: 1.5px; bottom: -2px; }
  .tn-logo { font-weight: 800; font-size: 16px; }
  .tn-ic { width: 40px; height: 40px; border-radius: 11px; }
  .tn-ic:hover { background: rgba(255,255,255,.05); border-color: transparent; }

  /* Más aire general. */
  .view-home { padding: 0 40px 56px; }

  /* Hero: bordes más suaves, banner sin gradiente pesado, tipografía refinada. */
  .promo-wrap { gap: 18px; height: 392px; }
  .promo-wrap .promo-rail, .hs-card { border-radius: 22px; }
  .promo-card::after { background: linear-gradient(96deg, rgba(8,8,12,.76) 0%, rgba(8,8,12,.32) 44%, transparent 72%); }
  .promo-wrap .promo-t { font-size: 31px; font-weight: 800; letter-spacing: -.6px; }
  .hs-card { border: 1px solid rgba(255,255,255,.07); }
  .hs-img { background-color: #fafafa; }
  .hs-body { padding: 16px 18px 18px; gap: 4px; }
  .hs-name { font-size: 15px; font-weight: 600; }
  .hs-cta { background: var(--text); color: var(--bg); }   /* píldora 'Comprar' clara sobre oscuro */

  /* Encabezados de sección: más ligeros y con aire. */
  .pc-sec-h { font-weight: 700; letter-spacing: -.5px; margin: 46px 2px 18px; font-size: 23px; }
  .pc-prodhead { margin: 44px 2px 18px; }
  .pc-prodhead h2 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
  .pcat-chip { font-size: 13px; font-weight: 500; padding: 7px 15px; border-color: rgba(255,255,255,.1); }
  .pcat-chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }

  /* Grid con más aire. */
  .view-home .grid { gap: 24px; }

  /* Tarjetas ultra-limpias: sin badges, sin bordes duros, mucho aire. */
  .view-home .grid .card .ph { border: none; background: rgba(255,255,255,.035); border-radius: 18px; box-shadow: none; }
  .view-home .grid .card:hover .ph { box-shadow: 0 14px 32px rgba(0,0,0,.4); }
  .view-home .grid .card .ph img { padding: 18px; }
  .view-home .grid .card-oferta, .view-home .grid .card-new, .view-home .grid .card-low { display: none; }
  .view-home .grid .card-fav { background: rgba(20,20,24,.55); border: none; backdrop-filter: blur(6px); }
  .view-home .grid .card .body { padding: 13px 3px 2px; gap: 3px; }
  .view-home .grid .card .price { font-size: 16px; font-weight: 700; }
  .view-home .grid .card .t { font-size: 13.5px; font-weight: 500; color: var(--text); }
  .view-home .grid .card .loc { font-size: 12px; color: var(--text-dim); }

  /* Tiendas y footer con más aire y sin fondo macizo. */
  .stores-rail { gap: 16px; }
  .store-chip { border-color: rgba(255,255,255,.07); }
  .pc-footer { margin: 60px -40px 0; padding: 48px 40px 30px; background: none;
    border-top: 1px solid rgba(255,255,255,.06); }
}

/* ── TIENDAS estilo "Popular brands" (compactas, logo centrado) — copia fiel de la referencia ── */
@media (min-width: 1000px) {
  .stores-rail { grid-template-columns: repeat(5, 1fr) !important; gap: 14px; }
  .store-chip { display: flex; align-items: center; justify-content: center; gap: 0 !important; height: 86px;
    padding: 16px !important; border-radius: 14px; background: var(--bg2); border: 1px solid rgba(255,255,255,.06);
    text-align: center; transition: border-color .15s ease, transform .12s ease; }
  .store-chip:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
  .store-chip img.store-logo { width: auto !important; height: auto !important; max-height: 48px; max-width: 86%;
    object-fit: contain; border-radius: 0 !important; background: none !important; box-shadow: none; }
  .store-wordmark { font-size: 14px; font-weight: 800; letter-spacing: .2px; color: var(--text-dim);
    text-align: center; line-height: 1.2; padding: 0 4px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PC — MINIMALISMO NIVEL 2 (más aire, tipografía ligera, todo más sutil).
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  /* Más aire general y entre secciones. */
  .view-home { padding: 0 48px 70px; }
  .promo-wrap { margin: 24px 0 14px; }
  .pc-prodhead { margin: 56px 2px 24px; }
  .pc-sec-h { margin: 60px 2px 24px; }

  /* Encabezados más ligeros y discretos. */
  .pc-sec-h, .pc-prodhead h2 { font-weight: 600 !important; font-size: 21px !important;
    letter-spacing: -.3px; color: var(--text); }

  /* Nav más ligero: links finos, sin subrayado (puro texto, como la referencia). */
  #pc-topnav { border-bottom: 1px solid rgba(255,255,255,.045); background: rgba(14,14,16,.78); }
  .tn-link { font-weight: 400; color: rgba(255,255,255,.58); }
  .tn-link:hover, .tn-link.active { color: var(--text); }
  .tn-link.active::after { display: none; }
  .tn-logo { font-weight: 700; }
  .tn-ic { color: rgba(255,255,255,.82); }

  /* Chips: más finos y sutiles. */
  .pc-prodcats { gap: 6px; }
  .pcat-chip { border-color: rgba(255,255,255,.08); font-weight: 400; padding: 6px 14px; }
  .pcat-chip.on { font-weight: 500; }

  /* Tarjetas: minimalismo máximo — imagen flotando, sin bordes, texto ligero, corazón discreto. */
  .view-home .grid { gap: 30px; }
  .view-home .grid .card .ph { background: rgba(255,255,255,.022); border: none; border-radius: 20px; }
  .view-home .grid .card .ph img { padding: 24px; }
  .view-home .grid .card:hover .ph { box-shadow: none; background: rgba(255,255,255,.05); }
  .view-home .grid .card-fav { background: none; border: none; backdrop-filter: none;
    color: rgba(255,255,255,.55); }
  .view-home .grid .card-fav.on { color: var(--red); }
  .view-home .grid .card-fav:hover { color: #fff; }
  .view-home .grid .card .body { padding: 14px 4px 0; gap: 4px; }
  .view-home .grid .card .price { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
  .view-home .grid .card .t { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.86); }
  .view-home .grid .card .loc { font-size: 11.5px; color: var(--text-dim); }

  /* Tiendas y footer: bordes y textos más tenues. */
  .store-chip { border-color: rgba(255,255,255,.045); }
  .pc-footer { border-top: 1px solid rgba(255,255,255,.045); margin-top: 70px; }
  .pf-col button, .pf-col a { font-weight: 400; }
  .pf-col h4 { font-weight: 600; }

  /* Hero: textos un punto más livianos. */
  .promo-wrap .promo-t { font-weight: 700; }
}

/* Fix: el chip del SALDO debe expandirse al ancho del número (una regla de .tn-ic le había
   fijado 40px y los dígitos se salían). */
@media (min-width: 1000px) {
  .tn-wallet { width: auto !important; min-width: 0; padding: 0 13px !important; white-space: nowrap; gap: 7px; }
  .tn-wallet b { font-size: 13px; font-weight: 700; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PC — PASE "PRO": micro-interacciones suaves, hover elegante, intuitivo.
   (Mantiene el minimalismo y los colores oscuros.)
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  /* Nav: efecto al hacer scroll + hover de links tipo pill (intuitivo). */
  #pc-topnav { transition: box-shadow .25s ease, background .25s ease, border-color .25s ease; }
  #pc-topnav.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.4); background: rgba(13,13,15,.93); border-bottom-color: rgba(255,255,255,.07); }
  .tn-link { padding: 8px 13px; border-radius: 10px; transition: color .18s ease, background .18s ease; }
  .tn-link:hover { background: rgba(255,255,255,.05); color: var(--text); }
  .tn-link.active { background: rgba(108,140,255,.13); color: var(--text); }
  .tn-ic { transition: background .18s ease, color .18s ease, transform .12s ease; }
  .tn-ic:active { transform: scale(.92); }
  .tn-wallet { transition: background .18s ease, border-color .18s ease; }
  .tn-wallet:hover { background: rgba(108,140,255,.22); }

  /* Tarjetas: lift + sombra + zoom sutil de la imagen (sensación premium). */
  .view-home .grid .card { transition: transform .22s cubic-bezier(.4,0,.2,1); }
  .view-home .grid .card:hover { transform: translateY(-6px); }
  .view-home .grid .card .ph { overflow: hidden; transition: background .22s ease, box-shadow .28s ease; }
  .view-home .grid .card .ph img { transition: transform .4s cubic-bezier(.4,0,.2,1); }
  .view-home .grid .card:hover .ph img { transform: scale(1.07); }
  .view-home .grid .card:hover .ph { box-shadow: 0 22px 46px rgba(0,0,0,.5); background: rgba(255,255,255,.055); }
  /* Corazón: aparece nítido al hacer hover (las favoritas siempre se ven). */
  .view-home .grid .card-fav { opacity: 0; transform: scale(.88); transition: opacity .18s ease, transform .18s ease, color .15s ease; }
  .view-home .grid .card:hover .card-fav, .view-home .grid .card-fav.on { opacity: 1; transform: scale(1); }
  .view-home .grid .card-fav:active { transform: scale(.84); }

  /* Chips: hover suave. */
  .pcat-chip { transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease; }
  .pcat-chip:hover { transform: translateY(-1px); }

  /* Producto destacado del hero: hover elegante. */
  .hs-card { transition: transform .2s cubic-bezier(.4,0,.2,1), border-color .2s ease, box-shadow .28s ease; }
  .hs-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0,0,0,.45); border-color: rgba(255,255,255,.14); }
  .hs-img { transition: transform .4s cubic-bezier(.4,0,.2,1); }
  .hs-card:hover .hs-img { transform: scale(1.04); }
  .hs-cta { transition: transform .15s ease, filter .15s ease; }
  .hs-card:hover .hs-cta { filter: brightness(1.06); }

  /* Tiendas: el logo cobra vida al hacer hover. */
  .store-chip { transition: border-color .18s ease, transform .15s ease, background .18s ease; }
  .store-chip:hover { transform: translateY(-3px); background: rgba(255,255,255,.025); }
  .store-chip img.store-logo, .store-wordmark { transition: transform .2s ease, color .2s ease; }
  .store-chip:hover img.store-logo { transform: scale(1.07); }
  .store-chip:hover .store-wordmark { color: var(--text); }

  /* Footer: enlaces con micro-desplazamiento al hover. */
  .pf-col button, .pf-col a { transition: color .16s ease, transform .16s ease; }
  .pf-col button:hover, .pf-col a:hover { color: var(--accent); transform: translateX(3px); }
}

/* En PC no va el botón flotante "Instalar app" (es solo para móvil). */
@media (min-width: 1000px) { .install-fab, #installFab { display: none !important; } }

/* ── FIX: la imagen del producto debe LLENAR la caja entera (no un cuadro dentro de otro).
   Antes la caja era oscura y la foto (con fondo blanco) quedaba chica adentro. Ahora la foto
   cubre toda la caja sin deformarse (object-fit: cover = mantiene la calidad). ── */
@media (min-width: 1000px) {
  /* Caja blanca + CONTAIN: cada producto se ve COMPLETO (no se corta), centrado, sea cuadrado,
     vertical u horizontal. La caja blanca casa con el fondo blanco de las fotos → sin "cuadro en cuadro". */
  .view-home .grid .card .ph { background: #fff !important; border: none !important; border-radius: 18px;
    overflow: hidden; box-shadow: none; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
  .view-home .grid .card .ph img { object-fit: contain !important; width: 100% !important; height: 100% !important;
    padding: 22px !important; }
  .view-home .grid .card:hover .ph { background: #fff !important; box-shadow: 0 20px 44px rgba(0,0,0,.5); }
  .view-home .grid .card:hover .ph img { transform: scale(1.05); }
}

/* Tiendas: SOLO el nombre, súper simple y limpio (como la referencia). */
@media (min-width: 1000px) {
  .store-chip { height: 92px; }
  .store-wordmark { font-size: 15px; font-weight: 700; letter-spacing: .2px; color: rgba(255,255,255,.56);
    text-align: center; line-height: 1.25; padding: 0 10px; transition: color .18s ease; }
  .store-chip:hover .store-wordmark { color: var(--text); }
}

/* ════════════════════════════════════════════════════════════════════════════
   PC — "TUS NEGOCIOS" minimalista: dashboard centrado, tarjetas limpias y compactas,
   SIN el banner cortado (se ve fea esa tira). Solo logo + nombre + métricas.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .biz-wrap { max-width: 1200px; margin: 0 auto; }
  .biz-summary { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
  .biz-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .biz-new { padding: 18px 20px; border-radius: 18px; }

  /* Dashboard pro en PC */
  .bdash-title { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.6px; margin: 2px 2px 20px; }
  /* Bloque superior: 3 métricas (fila 1, col 1-3) + "Crear negocio" (fila 2, col 1-3) a la izquierda;
     la tarjeta UNIFICADA Ganancia+gráfica ocupa la 4ª columna abarcando ambas filas. */
  .bdash-top { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr; gap: 14px; align-items: stretch; margin-bottom: 18px; }
  .bdash-top .bstat { grid-row: 1; }
  .bdash-top .biz-new { grid-column: 1 / 4; grid-row: 2; margin: 0; }
  .bdash-ganchart { grid-column: 4; grid-row: 1 / 3; }
  .bgc-n { font-size: 26px; }
  .bstat { padding: 16px 18px; border-radius: 18px; }
  .bstat-n { font-size: 26px; }
  .bstat-ic { width: 42px; height: 42px; border-radius: 12px; }
  .bdash-body { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
  .bdash-body .biz-grid { margin-bottom: 0; }
  .biz-ghost { display: flex; }
  .biz-recos { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; position: sticky; top: 80px; }
  .biz-recos-h { font-size: 15.5px; font-weight: 800; margin-bottom: 12px; letter-spacing: -.2px; }
  .biz-reco { display: flex; align-items: center; gap: 11px; padding: 11px 0; font-size: 13px; color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,.045); line-height: 1.35; }
  .biz-reco:last-child { border-bottom: none; }
  .biz-reco svg { color: var(--accent); flex-shrink: 0; }

  /* Tarjeta de negocio PRO: portada limpia + fila logo/nombre + métricas. */
  .biz-card { background: var(--bg2); border: 1px solid rgba(255,255,255,.07); border-radius: 18px;
    padding: 0; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .25s ease; }
  .biz-card:hover { transform: translateY(-4px); border-color: rgba(108,140,255,.45);
    box-shadow: 0 18px 40px rgba(0,0,0,.38); }
  .biz-card:hover .biz-cover { transform: scale(1.04); }
  .biz-cover { display: block !important; height: 124px; overflow: hidden; transition: transform .35s ease; }
  .biz-body { padding: 14px 16px 16px; }
  .biz-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
  .biz-logo { position: static !important; width: 48px; height: 48px; border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.3); border-radius: 13px; margin: 0 !important; top: auto !important;
    left: auto !important; font-size: 16px; flex-shrink: 0; }
  .biz-name { font-size: 16.5px; font-weight: 800; margin: 0; }
  .biz-stats { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px;
    color: var(--text-dim); }
  .biz-go { top: 12px !important; right: 12px !important; color: #fff; background: rgba(0,0,0,.4) !important; }
}

/* Hero más CUADRADO y limpio: esquinas menos redondeadas (no ovaladas). */
@media (min-width: 1000px) {
  .promo-wrap .promo-rail, .promo-wrap .promo-card, .hero-spot, .hs-card { border-radius: 12px !important; }
}

/* Portada de la TIENDA en PC: imagen completa (nítida), más alta y página centrada para que
   quede en buena proporción (no una tira recortada a ancho completo). */
@media (min-width: 1000px) {
  .detail:has(.store-banner) { max-width: 1080px; margin: 0 auto; }
  .store-banner { height: 300px; background-position: center; }
  .bd-cover { height: 260px; }
}

/* ── Cabecera de TIENDA tipo HERO: la imagen ocupa toda la cabecera; logo + nombre + nº de
   productos van ENCIMA (abajo), y los iconos arriba. ── */
.store-banner { display: block; }
.store-banner::after { background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.2) 56%, transparent 82%); }
.store-hero-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: flex-end;
  gap: 14px; padding: 16px; }
.store-hero-info .store-logo { width: 70px; height: 70px; border-radius: 18px; border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 22px rgba(0,0,0,.5); flex-shrink: 0; }
.store-hero-info .store-info { min-width: 0; padding-bottom: 2px; }
.store-hero-info .store-info h1 { color: #fff; font-size: 22px; letter-spacing: -.4px; margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-meta { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; margin-top: 5px;
  text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.store-hero-info .store-owner { margin-top: 8px; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.store-hero-info .store-owner svg { color: #fff; }

@media (min-width: 1000px) {
  .detail:has(.store-banner) { max-width: 1080px; margin: 0 auto; }
  .store-banner { height: 360px !important; border-radius: 16px; overflow: hidden; }
  .store-hero-info { padding: 30px; }
  .store-hero-info .store-logo { width: 100px; height: 100px; border-radius: 24px; }
  .store-hero-info .store-info h1 { font-size: 33px; }
  .store-meta { font-size: 15px; }
}

/* En PC no hace falta la burbuja de soporte (ya está "Soporte" en el nav superior). */
@media (min-width: 1000px) { .support-fab { display: none !important; } }

/* ── CASILLERO: tarjeta de dirección MINIMALISTA (oscura, no el gradiente brillante) + PC coherente ── */
.lk-addr-card { background: var(--bg2) !important; border: 1px solid var(--line); color: var(--text);
  box-shadow: none !important; border-radius: 18px; }
.lk-addr-card::after { display: none !important; }
.lk-addr-head svg { color: var(--accent); }
.lk-addr-hint { color: var(--text-dim) !important; opacity: 1 !important; }
.lk-addr-card .lk-crow:hover { background: rgba(255,255,255,.05) !important; }
.lk-addr-card .lk-crow:active { background: rgba(255,255,255,.09) !important; }

@media (min-width: 1000px) {
  #lk-body { max-width: 1080px; margin: 0 auto; }
  .lk-grid2 { grid-template-columns: 1.05fr 1fr; gap: 20px; }
  .lk-addr-card { border-radius: 16px; }
  .lk-pkpanel { border-radius: 16px; }
}

/* ── CASILLERO tipo BENTO (como el home): dirección = cuadro GRANDE; paquetes + cómo funciona = medianos. ── */
/* minmax(0,…) evita que un hijo ancho (tarjeta o línea de estados) fuerce scroll horizontal de la página. */
.lk-bento { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.lk-b-addr, .lk-b-pkgs, .lk-b-how { min-width: 0; }
.lk-b-how { padding: 16px; }
.lk-b-how > div:first-child { margin-top: 0 !important; }
@media (min-width: 1000px) {
  .lk-bento { grid-template-columns: 2fr 1fr; grid-template-areas: "addr pkgs" "addr how"; gap: 16px; align-items: start; }
  .lk-b-addr { grid-area: addr; }
  .lk-b-pkgs { grid-area: pkgs; }
  .lk-b-how  { grid-area: how; }
}

/* Menú segmentado del casillero (En el casillero / En camino / Historial) — mismo espíritu que el
   selector Mercado del inicio, con rayita animada. Solo móvil; en PC se apilan las tres secciones. */
.lk-modetabs { position: relative; margin: 2px 0 12px; }
.lkmt-segs { display: flex; }
.lkmt-seg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 11px; border: none; background: none; cursor: pointer; color: var(--text-dim); transition: color .18s ease; -webkit-tap-highlight-color: transparent; }
.lkmt-ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; transition: transform .18s ease; }
.lkmt-ic svg { width: 20px; height: 20px; }
.lkmt-lb { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.lkmt-seg.on { color: var(--text); }
.lkmt-seg.on .lkmt-ic { transform: scale(1.08); color: var(--accent); }
.lkmt-seg:active .lkmt-ic { transform: scale(.9); }
.lk-modetabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.09); }
.lkmt-underline { position: absolute; left: 0; bottom: -.5px; width: calc(100% / var(--mt-n, 3)); height: 3px; display: flex; justify-content: center; pointer-events: none; z-index: 1; transition: transform .3s cubic-bezier(.4,0,.2,1); transform: translateX(calc(var(--mt-i, 0) * 100%)); }
.lkmt-underline::before { content: ""; width: 54px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px rgba(108,140,255,.6); }
/* Cada sección: en móvil solo la pestaña activa; en PC todas visibles (sin menú). */
.lk-seg { display: none; }
.lk-seg.on { display: block; }
@media (min-width: 1000px) {
  .lk-modetabs { display: none; }
  .lk-seg { display: block !important; }
}

/* Tabla de TARIFAS del casillero (en el espacio de la columna izquierda, bajo la dirección). */
.lk-rates { margin-top: 12px; padding: 15px 16px 8px; }
.lk-rates-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; margin-bottom: 12px; color: var(--text); }
.lk-rates-h svg { color: var(--accent); }
.lk-rates-h small { font-weight: 500; color: var(--text-dim); font-size: 11.5px; }
.lk-rates-t { width: 100%; border-collapse: collapse; }
.lk-rates-t th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 700; padding: 0 6px 9px 0; border-bottom: 1px solid var(--line); }
.lk-rates-t th:last-child, .lk-rates-t td:last-child { text-align: right; padding-right: 0; }
.lk-rates-t td { padding: 12px 6px 12px 0; font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.lk-rates-t tbody tr:last-child td { border-bottom: none; }
.lkr-name { font-weight: 700; color: var(--text); }
.lkr-name .lkr-ic { display: inline-flex; width: 27px; height: 27px; border-radius: 8px; background: rgba(108,140,255,.14); color: var(--accent); align-items: center; justify-content: center; vertical-align: middle; margin-right: 8px; }
.lkr-days { color: var(--text-dim); }
.lkr-price { font-weight: 800; color: var(--green); white-space: nowrap; }
.lkr-price small { font-weight: 600; color: var(--text-dim); font-size: 10.5px; margin-left: 1px; }
.lkr-min { color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.lkr-exp .lkr-ic { background: rgba(245,184,64,.16) !important; color: var(--gold) !important; }
.lkr-exp .lkr-min { color: var(--gold); font-weight: 700; }
/* Precio fijo por categoría (Laptops / Celulares): su propio envío, sin importar el peso. */
.lk-rates-fixed { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.lk-rates-fixedh { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 700; margin-bottom: 8px; }
.lk-rates-fixedh svg { color: var(--gold); }
.lkf-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }
.lkf-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.lkf-price { font-size: 14.5px; font-weight: 800; color: var(--green); }

/* Producto del día (hero derecho): la imagen LLENA la tarjeta hasta los bordes. */
@media (min-width: 1000px) { .hs-img { background-size: contain !important; background-color: #fff !important; } }

/* FIX: el corazón de GUARDAR debe verse SIEMPRE en PC (estaba invisible: blanco sobre caja blanca).
   Como la referencia: círculo blanco con corazón oscuro; rojo si está guardado. */
@media (min-width: 1000px) {
  .view-home .grid .card-fav { opacity: 1 !important; transform: none !important; width: 34px; height: 34px;
    top: 10px; right: 10px; background: rgba(255,255,255,.94) !important; border: none !important;
    color: #3a3a3a !important; box-shadow: 0 2px 9px rgba(0,0,0,.22); backdrop-filter: none; }
  .view-home .grid .card:hover .card-fav { opacity: 1 !important; transform: none !important; }
  .view-home .grid .card-fav.on { color: var(--red) !important; }
  .view-home .grid .card-fav:hover { background: #fff !important; color: var(--red) !important; }
}

/* ── PC: la topbar de las páginas internas (título + campana + Volver) SOBRA (ya está el nav).
   La dejamos como un encabezado limpio (sin barra ni campana duplicada) y quitamos "Volver". ── */
@media (min-width: 1000px) {
  /* El título grande de cada sección (Casillero, Tiendas, etc.) SOBRA: ya está en el nav superior.
     Se oculta toda la topbar interna y se deja sólo un pequeño respiro bajo el nav fijo. */
  .topbar { position: static !important; top: auto !important; background: none !important; backdrop-filter: none !important;
    border-bottom: none !important; padding: 0 !important; height: 16px !important; overflow: hidden; }
  .topbar .brand, .topbar .brand-tx, .topbar .brand-ic { display: none !important; }
  .topbar #tb-bell, .topbar .tb-bell, .topbar .bell-badge, .topbar #pr-bell { display: none !important; }
  .topbar .bal-chip { display: none !important; }
  .back { display: none !important; }
  /* EXCEPCIÓN: el formulario de producto no tiene nav propio para volver a su origen
     (negocio/producto), así que su botón de atrás SÍ se muestra en PC. Y separamos el
     título ("Add Producto") del primer bloque para que respire. El título va alineado
     con el botón de atrás (mismo centro, sin el margen que lo desfasaba). */
  .pf .pf-topbar .back-pill { display: inline-flex !important; margin: 0 !important; }
  .pf .pf-topbar { margin-bottom: 22px; align-items: center; }
  /* El formulario de producto ocupa toda la pantalla en PC → ocultamos la barra de menú
     superior y quitamos el respiro que #app dejaba para ella. */
  body.no-tabbar #pc-topnav { display: none !important; }
  body.no-tabbar #app { padding-top: 20px !important; }
  /* EXCEPCIÓN: en el flujo AISLADO de aplicación/panel (cajero/mensajero/promotor) NO hay nav
     superior, así que el botón de atrás de la topbar es la ÚNICA salida. No debe recortarse. */
  body.apply-iso .topbar { height: auto !important; overflow: visible !important;
    padding: 14px 4px !important; gap: 10px !important; }
  body.apply-iso .topbar .brand, body.apply-iso .topbar .brand-tx, body.apply-iso .topbar .brand-ic {
    display: flex !important; }
  body.apply-iso .topbar .iconbtn, body.apply-iso #kb-back { display: inline-flex !important;
    align-items: center; justify-content: center; width: 40px !important; height: 40px !important;
    flex: 0 0 40px; }
  body.apply-iso .back { display: inline-flex !important; align-items: center; gap: 6px;
    cursor: pointer; }
  /* Chat de soporte en PC: fondo apaisado (logos + "Desbloqueados" al centro). */
  .sup-msgs { background-image: linear-gradient(rgba(13,13,17,.78), rgba(13,13,17,.78)), url('chatbg-pc.jpg'); }
}

/* ════════════════════════════════════════════════════════════════════════════
   CUENTA (pantalla principal, estilo Walmart): saludo + acciones · accesos rápidos · historial.
   ════════════════════════════════════════════════════════════════════════════ */
.acct-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 30px); padding-bottom: 90px; max-width: 720px; margin: 0 auto; }
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.acct-hello { flex: 1; min-width: 0; }
.acct-hi { font-size: 25px; font-weight: 800; letter-spacing: -.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-sub { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.acct-hactions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.acct-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  transition: background .15s ease, border-color .15s ease, transform .12s ease; }
.acct-ic:hover { border-color: var(--accent); }
.acct-ic:active { transform: scale(.92); }
.acct-ic .bell-badge { position: absolute; top: -3px; right: -3px; }

/* Accesos rápidos horizontales (Verificación · Favoritos …): botones bajos, icono AL LADO del texto */
.acct-quick { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px; margin-bottom: 22px; }
.acct-quick::-webkit-scrollbar { display: none; }
.acct-qbtn { position: relative; flex: 1 0 auto; min-width: 130px; display: flex; flex-direction: row;
  align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border-radius: 13px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  transition: border-color .15s ease, transform .12s ease; }
.acct-qbtn:hover { border-color: var(--accent); }
.acct-qbtn:active { transform: scale(.97); }
.acct-qic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  flex-shrink: 0; border-radius: 50%; background: rgba(108,140,255,.1); color: var(--accent); }
.acct-qlbl { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }

/* Bloque Historial de compras */
.acct-hist-h { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700;
  color: var(--text); margin: 0 2px 12px; }
.acct-hist-empty { text-align: center; color: var(--text-dim); padding: 34px 16px; line-height: 1.5;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; }
.acct-hist-empty svg { opacity: .5; margin-bottom: 8px; }
.acct-hrow { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; padding: 13px 14px;
  border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  margin-bottom: 8px; transition: border-color .15s ease, transform .12s ease; }
.acct-hrow:hover { border-color: var(--accent); }
.acct-hrow:active { transform: scale(.99); }
.acct-hitem { margin-bottom: 8px; }
.acct-hitem .acct-hrow { margin-bottom: 0; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; transition: border-radius .15s ease, border-color .15s ease; }
.acct-hitem.open .acct-hrow { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; border-color: var(--accent); }
.acct-hchev { display: inline-flex; color: var(--text-dim); transition: transform .2s ease; }
.acct-hitem.open .acct-hchev { transform: rotate(180deg); }
.acct-hrow-top { display: flex; align-items: center; gap: 12px; width: 100%; }
.acct-hic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  flex-shrink: 0; border-radius: 11px; background: rgba(255,255,255,.05); color: var(--text-dim); }
.acct-htx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-htx b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-htx small { font-size: 11.5px; color: var(--text-dim); }
.acct-hright { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; }
.acct-hamt { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sub-pantallas de Cuenta (Ajustes, Direcciones): sin cabecera, con "Volver" alineado a los grupos */
.acct-sub-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 30px); padding-bottom: 90px; max-width: 720px; margin: 0 auto; }
.acct-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 8px 12px 8px 8px;
  border-radius: 11px; background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  font-size: 14px; font-weight: 600; transition: border-color .15s ease, transform .12s ease; }
.acct-back:hover { border-color: var(--accent); }
.acct-back:active { transform: scale(.97); }
.acct-sub-h { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800;
  letter-spacing: -.3px; color: var(--text); margin: 0 2px 6px; }
.acct-sub-h svg { color: var(--accent); }

/* Miniatura de producto en la fila del historial */
.acct-hic-img { padding: 0; overflow: hidden; background: #fff; }
.acct-hic-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Página completa de un pedido ── */
.od-head { margin-bottom: 16px; }
.od-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.od-date { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.od-prods { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px; margin-bottom: 8px; }
.od-prods::-webkit-scrollbar { display: none; }
.od-prod { flex: 0 0 auto; width: 96px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .12s ease; }
.od-prod:hover { border-color: var(--accent); }
.od-prod:active { transform: scale(.97); }
.od-prod-img { width: 96px; height: 96px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.od-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-prod-info { padding: 7px 9px 9px; }
.od-prod-name { font-size: 11.5px; font-weight: 600; color: var(--text); line-height: 1.25; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.od-prod-price { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.od-prod-qty { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* Un solo producto: foto grande a todo lo ancho + nombre debajo */
.od-single { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  cursor: pointer; margin-bottom: 8px; transition: border-color .15s ease, transform .12s ease; }
.od-single:hover { border-color: var(--accent); }
.od-single:active { transform: scale(.995); }
.od-single-img { width: 100%; height: 300px; background: #fff;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.od-single-img img { width: 100%; height: 100%; object-fit: contain; padding: 26px; box-sizing: border-box; display: block; }
.od-single-name { padding: 12px 16px; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; }
.od-sec { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-top: 12px; }
.od-sec-h { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.od-sec-h svg { color: var(--accent); }
.od-flow { margin-top: 4px; }
.od-addr { font-size: 13.5px; line-height: 1.55; }
.od-addr b { font-weight: 700; }
.od-addr > div { color: var(--text-dim); }
.od-addr-tel { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.od-addr-note { font-size: 12px; opacity: .8; margin-top: 4px; }

/* Detalle desplegable de un pedido (acordeón, estilo casillero) */
.acct-hdetail { background: var(--bg2); border: 1px solid var(--accent); border-top: none;
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; padding: 4px 14px 14px; }
.acct-dgrid { display: flex; flex-direction: column; }
.acct-drow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.acct-drow:last-child { border-bottom: none; }
.acct-drow > span { color: var(--text-dim); flex-shrink: 0; }
.acct-drow > b { text-align: right; font-weight: 600; word-break: break-word; }
.acct-drow.acct-dtotal { font-size: 14px; }
.acct-drow.acct-dtotal > b { color: var(--text); font-weight: 800; }
.acct-drow.acct-dcol { flex-direction: column; gap: 6px; }
.acct-dlinks { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.acct-dlinks a { color: var(--accent); font-size: 12px; word-break: break-all; text-decoration: none; }
.acct-dlinks a:hover { text-decoration: underline; }

/* Control segmentado del historial de compras (En camino · Historial): estilo del casillero, visible en todo viewport */
.acct-tabs { position: relative; margin: 2px 0 14px; }
.acct-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.09); }
.acct-tabs .lkmt-underline { position: absolute; left: 0; bottom: -.5px; width: calc(100% / var(--mt-n, 2)); height: 3px;
  display: flex; justify-content: center; pointer-events: none; z-index: 1;
  transition: transform .3s cubic-bezier(.4,0,.2,1); transform: translateX(calc(var(--mt-i, 0) * 100%)); }
.acct-tabs .lkmt-underline::before { content: ""; width: 54px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px rgba(108,140,255,.6); }

/* Línea de flujo del historial (estilo casillero): Preparando · Enviado · Entregado */
.acct-flow { display: flex; align-items: flex-start; padding: 2px 2px 0; }
.acct-flow-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; width: 62px; }
.acct-flow-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--panel2, rgba(255,255,255,.05));
  border: 2px solid var(--line); color: var(--text-dim); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.acct-flow-step.done .acct-flow-dot { background: var(--green); border-color: var(--green); color: #fff; }
.acct-flow-step.active .acct-flow-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px rgba(108,140,255,.15); }
.acct-flow-l { font-size: 10px; color: var(--text-dim); text-align: center; line-height: 1.2; }
.acct-flow-step.done .acct-flow-l, .acct-flow-step.active .acct-flow-l { color: var(--text); font-weight: 600; }
.acct-flow-bar { flex: 1; height: 3px; background: var(--line); margin-top: 10px; border-radius: 3px; }
.acct-flow-bar.on { background: var(--green); }
.acct-flow-cancel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--red); padding: 2px; }

/* ════════════════════════════════════════════════════════════════════════════
   PERFIL rediseñado (pro, minimalista): cabecera limpia (avatar + nombre + ID) + 2 columnas.
   ════════════════════════════════════════════════════════════════════════════ */
.pf2-wrap { padding-bottom: 60px; }
.pf2-header { display: flex; align-items: center; gap: 18px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 18px; padding: 18px 20px; margin-bottom: 16px; }
.pf2-header .pr-avatar { margin: 0 !important; width: 80px; height: 80px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.pf2-header .pr-avatar::before { display: none !important; }
.pf2-hinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pf2-hname { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Header tocable: muestra correo · teléfono y prov · municipio bajo el nombre; al tocar abre el desplegable de edición. */
.pf2-edit-tog { cursor: pointer; }
.pf2-edit-tog:active { background: rgba(255,255,255,.03); }
.pf2-hsum { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; overflow: hidden; }
.pf2-hsum span { display: block; }
.pf2-hchev { margin-left: auto; align-self: center; }
.pf2-edit-tog.open .pf2-hchev { transform: rotate(180deg); }
.pf2-edit-body { border: 1px solid var(--line); border-radius: 18px; background: var(--bg2); padding: 14px 16px 16px; margin: -8px 0 16px; }
.pf2-idlbl { display: flex; flex-direction: column; gap: 1px; }
.pf2-idlbl small { font-size: 11px; color: var(--text-dim); }
.pf2-idlbl b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pf2-hid { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; cursor: pointer; min-width: 0; max-width: 100%;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 8px 13px;
  color: var(--text); transition: border-color .15s ease, background .15s ease; }
.pf2-hid:hover { border-color: var(--accent); background: rgba(108,140,255,.08); }
.pf2-hid:active { transform: scale(.985); background: rgba(108,140,255,.14); }
.pf2-hid-copy { display: inline-flex; flex-shrink: 0; }
.pf2-hid-copy svg { color: var(--accent); }
.pf2-hid-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 1px; }
.pf2-hid-txt span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--text-dim); }
.pf2-hid b { font-size: 15px; letter-spacing: 1.5px; font-weight: 700; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf2-id { background: rgba(255,255,255,.03) !important; border-color: var(--line) !important; box-shadow: none !important; }

/* MÓVIL: el header del perfil debe caber sin desbordar (el ID de 12 dígitos estiraba la página). */
@media (max-width: 999px) {
  .pf2-header { gap: 13px; padding: 16px; }
  .pf2-header .pr-avatar { width: 62px; height: 62px; }
  .pf2-hinfo { flex: 1; min-width: 0; gap: 8px; }
  .pf2-hname { font-size: 19px; }
  /* El ID a lo ancho de la info: icono de copiar a la IZQUIERDA, luego label arriba y número abajo. */
  .pf2-hid { align-self: stretch; gap: 10px; padding: 8px 12px; justify-content: flex-start; text-align: left; }
  .pf2-hid-txt { width: 100%; }
  .pf2-hid b { font-size: 15px; letter-spacing: 1px; text-align: left; }
}

@media (min-width: 1000px) {
  .pf2-wrap { max-width: 920px; margin: 0 auto; }
  .pf2 { gap: 20px; }
}

/* ===== Registro/login PRO en PC: modal split-screen (marca + formulario) ===== */
/* Defaults móvil: el panel de marca no existe y los pares de campos quedan apilados (sin cambios). */
.auth-aside { display: none; }
.lf-row { display: contents; }

@media (min-width: 1000px) {
  .auth-sheet {
    top: 46%; bottom: auto; left: 50%;
    transform: translate(-50%, -44%);
    width: min(960px, 94vw); max-width: 960px;
    height: auto; max-height: 84vh;
    display: grid; grid-template-columns: 0.92fr 1.08fr;
    border-radius: 24px; overflow: hidden; padding: 0;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  }
  .auth-sheet.show { transform: translate(-50%, -50%); }
  .auth-grab { display: none; }

  /* Panel de marca (izquierda) */
  .auth-aside {
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden; min-height: 0; padding: 48px 40px;
    background: linear-gradient(160deg, #1b1d2e 0%, #14141b 55%, #101015 100%);
    border-right: 1px solid var(--line);
  }
  .auth-aside-glow {
    position: absolute; width: 380px; height: 380px; border-radius: 50%;
    top: -130px; left: -110px;
    background: radial-gradient(circle, rgba(108,140,255,.38), transparent 70%);
    filter: blur(16px); pointer-events: none;
  }
  .auth-aside-in { position: relative; z-index: 1; }
  .auth-aside-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
  .auth-aside-logo svg { border-radius: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
  .auth-aside-logo span { font-size: 18px; font-weight: 800; letter-spacing: -.4px; color: #fff; }
  .auth-aside-h { font-size: 27px; font-weight: 800; letter-spacing: -.7px; line-height: 1.18; color: #fff; margin-bottom: 26px; }
  .auth-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
  .auth-aside-list li { display: flex; align-items: center; gap: 13px; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.82); }
  .auth-aside-list .aa-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(108,140,255,.14); color: var(--accent); }
  .auth-aside-foot { display: flex; align-items: center; gap: 8px; margin-top: 34px; font-size: 12px; color: rgba(255,255,255,.5); }

  /* Columna del formulario (derecha). Centrado vertical para que los pasos cortos (login,
     verificación del código) no dejen un hueco vacío abajo. Los pseudo-espaciadores con margen
     auto reparten el espacio sobrante arriba/abajo, pero COLAPSAN a 0 cuando el formulario es
     largo (registro completo) y necesita scroll → así nunca recorta el inicio. */
  .auth-main { overflow-y: auto; min-height: 0; max-height: 90vh; padding: 44px 46px;
    display: flex; flex-direction: column; }
  .auth-main::before { content: ""; margin-top: auto; }
  .auth-main::after { content: ""; margin-bottom: auto; }
  .auth-main::-webkit-scrollbar { width: 8px; }
  .auth-main::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .auth-main .auth-brand { text-align: left; margin: 0 0 22px; }
  .auth-main .auth-logo { display: none; }
  .auth-main .auth-h { font-size: 25px; }
  .auth-main .auth-p { margin-left: 0; margin-right: 0; max-width: none; }

  /* Pares de campos (contraseña/confirmar, provincia/municipio): 2 columnas que se APILAN
     solas si no hay ancho suficiente, para que el texto de adentro nunca se corte (responsivo). */
  .lf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
  .lf-row .lf { margin-bottom: 0; min-width: 0; }
  .lf-row .lf .wrap input, .lf-row .lf .wrap select { min-width: 0; }

  /* Compactar: menos aire general y el label PEGADO a su input (lo pidió el jefe). */
  .auth-main .auth-brand { margin-bottom: 16px; }
  .auth-main .auth-h { font-size: 23px; }
  .auth-main .auth-p { font-size: 13px; margin-top: 3px; }
  .auth-main .auth-seg { margin-bottom: 14px; padding: 4px; }
  .auth-main .auth-seg button { padding: 10px; font-size: 14.5px; }
  .auth-main .lf { margin-bottom: 12px; }
  .auth-main .lf label { margin-bottom: 5px; font-size: 13px; font-weight: 600; }
  .auth-main .lf .wrap { padding: 11px 13px; }
  .auth-main .auth-err { min-height: 0; margin-top: 4px; }
  .auth-main .auth-btn { padding: 13px; margin-top: 8px; }
  .auth-main .auth-link { margin-top: 12px; font-size: 13.5px; }

  /* Texto DENTRO de los inputs: en PC ocultamos TODOS los labels de arriba (incluido WhatsApp);
     el placeholder de cada campo hace de etiqueta. */
  .auth-main .lf > label { display: none; }
  /* El select muestra su opción-placeholder (Provincia/Municipio) atenuada, como un placeholder real. */
  .auth-main .lf .wrap select:has(option[value=""]:checked) { color: var(--text-dim); }
  /* Igualar la altura de los selects (Provincia/Municipio) a la de los inputs: quedan 2px más bajos. */
  .auth-main .lf .wrap:has(select) { padding-top: 12px; padding-bottom: 12px; }
}

/* ===== Vista de PRODUCTO: ajustes por plataforma (pedido del jefe) ===== */
/* PC: el topnav ya tiene volver/favoritos → ocultar la barra flotante (volver, corazón, compartir). */
@media (min-width: 1000px) {
  .pdetail .floatbar { display: none; }
}
/* Quitar los 2 chips (peso aproximado y entrega estimada) de la ficha del producto (PC y teléfono). */
.pdetail .weight-chip, .pdetail .ship-chip { display: none; }

/* ===== Vista de PRODUCTO en PC: layout e-commerce de 2 columnas (wireframe del jefe) ===== */
/* Descripción colapsable "Ver más": el botón solo aparece si el texto excede el recorte. */
.pd-desc-more { background: none; color: var(--accent); font-weight: 700; font-size: 13.5px; padding: 6px 0 0; cursor: pointer; }
/* Recorte de la descripción a 5 líneas (MÓVIL Y PC) hasta pulsar "Ver más". */
.pd-desc-txt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pd-desc-txt.expanded { -webkit-line-clamp: unset; overflow: visible; }
/* Móvil: el envoltorio .pd-block es transparente (no altera el layout actual). */
.pd-block { display: contents; }
/* "Volver a la tienda" del promotor: en MÓVIL la floatbar ya tiene el atrás → este se oculta.
   En PC la floatbar está oculta, así que este botón es el que permite regresar a la tienda. */
.pd-back-store { display: none; }
/* Botón "Volver al marketplace" SOLO en PC: en el detalle se oculta el nav superior y este lo reemplaza.
   En móvil la floatbar ya tiene el atrás → este no se muestra. */
.pd-back-pc { display: none; }
/* "Compartir" en el detalle: en MÓVIL ya está en la floatbar (arriba) → se oculta este (especificidad
   .btn.pd-share-in para ganarle a .btn.block). En PC la floatbar está oculta → este botón sí se ve. */
.btn.pd-share-in { display: none; }
@media (min-width: 1000px) {
  /* En el detalle de producto se OCULTA el nav superior; el botón "Volver al marketplace" lo reemplaza.
     Al no haber nav fijo, #app deja de necesitar el respiro superior de 64px. */
  body:has(.pdetail) #pc-topnav { display: none !important; }
  body:has(.pdetail) #app { padding-top: 0 !important; }
  .pdetail { display: block; max-width: 1180px; margin: 0 auto; padding: 24px 28px 90px; }
  .pdetail > .floatbar { display: none; }
  .pd-back-store, .pd-back-pc { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px; padding: 9px 16px;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; color: var(--text);
    font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s; }
  .pd-back-store:hover, .pd-back-pc:hover { border-color: var(--accent); }
  .btn.pd-share-in { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
    background: var(--bg2); border: 1px solid var(--line); color: var(--text); font-weight: 700; }
  .pd-share-in:hover { border-color: var(--accent); }
  .pd-share-in svg { color: var(--accent); }

  /* UN SOLO BLOQUE: imagen + info dentro de un mismo panel (fondo + borde). */
  .pd-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; column-gap: 40px;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 22px; padding: 28px;
  }
  /* La imagen queda FIJA (sticky) mientras se hace scroll por la info → no se desplaza. */
  .pd-block > .pd-media { position: sticky; top: 100px; align-self: start; }
  .pd-block > .pad { padding: 2px 0 0; }

  /* Imagen principal */
  .pdetail .hero { width: 100%; aspect-ratio: 1; max-height: 460px; border-radius: 16px; padding: 0; overflow: hidden; }
  /* Galería de miniaturas debajo de la imagen */
  .pdetail .gal-thumbs { margin-top: 14px; padding: 0; }

  /* Descripción recortada a 5 líneas hasta pulsar "Ver más" */
  .pd-desc-txt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .pd-desc-txt.expanded { -webkit-line-clamp: unset; overflow: visible; }

  /* Bloque "Más productos de la misma categoría" a todo el ancho, debajo del panel. */
  .pd-related { margin-top: 30px; padding: 0; }   /* PC: usa el padding del panel, sin doble margen */
}
/* Encabezado y grid de relacionados (sirve en PC y móvil) */
.pd-related { padding: 22px 16px 0; }   /* móvil: separado de los bordes */
.pd-related-h { font-size: 18px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 16px; }
.pd-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }

/* ===== Checkout (pago): accesibilidad y layout (pedido del jefe) ===== */
/* El botón Volver y el contenido NO deben quedar bajo la barra de estado del móvil (notch). */
.ck-sheet { padding-top: max(16px, env(safe-area-inset-top)); }
/* Volver = botón claro y tocable (no un texto tenue que parezca otro elemento). */
.ck-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 10px 15px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; color: var(--text);
  font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ck-back:active { background: var(--panel2); }
/* En el checkout NO mostramos la burbuja de soporte (estorba durante el pago). */
body:has(.ck-sheet) #support-fab { display: none !important; }

@media (min-width: 1000px) {
  /* Centrar el checkout (no estirado a todo el ancho = se veía como "prueba de ingreso"). */
  .ck-sheet { max-width: 680px; margin: 0 auto; }
  /* El Volver SÍ se muestra en el checkout de PC (la regla global .back lo ocultaba). */
  .ck-sheet > .ck-back { display: inline-flex !important; }
  .ck-sheet .btn-pay { max-width: 680px; }
}

/* Checkout destinatario: textos DENTRO de los inputs (placeholder hace de etiqueta), como el registro. */
.ck-dest .field > label { display: none; }
.ck-dest .field select.input:has(option[value=""]:checked) { color: var(--text-dim); }

/* ===== Checkout en UNA sola pantalla (un solo paso): móvil 1 columna, PC 2 columnas ===== */
.ckpc { display: flex; flex-direction: column; gap: 16px; }
.ckpc-form { display: flex; flex-direction: column; gap: 14px; }
.ckpc-sec { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 4px; }
.ckpc-h { font-size: 15.5px; font-weight: 800; margin: 0 0 14px; letter-spacing: -.2px; display: flex; align-items: center; gap: 7px; }
.ckpc-sec .field { margin-bottom: 12px; }
.ckpc-sec .row3 { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 8px; }
.ckpc-sec .row3 .field { margin-bottom: 12px; }
.ckpc-paysel { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ckpc-pm { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 10px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1.5px solid var(--line); color: var(--text); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: border-color .15s, background .15s; }
.ckpc-pm.active { border-color: var(--accent); background: rgba(108,140,255,.1); color: var(--accent); }
.ckpc-cardbox { margin-top: 4px; margin-bottom: 8px; }
/* Tarjetas de destinatario: seleccionables, con borde azul en la activa (como el método de pago). */
.ckpc-dest { display: block; width: 100%; text-align: left; background: rgba(255,255,255,.03); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.ckpc-dest:hover { border-color: var(--accent); }
.ckpc-dest.active { border-color: var(--accent); background: rgba(108,140,255,.08); }
.ckpc-dest.active, .ckpc-dest[style] { cursor: default; }
.ckpc-dest-t { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: var(--text); }
.ckpc-dest-s { color: var(--text-dim); font-size: 13px; margin-top: 3px; }
.ckpc-newdest { margin-top: 4px; }
/* Botón del destinatario ("Elegir otro destinatario") — largo y un poco separado de la tarjeta. */
.ckpc-destbtns { display: flex; gap: 8px; }
.ckpc-destbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.ckpc-destbtn:hover { border-color: var(--accent); }
.ckpc-destbtn:active { background: var(--panel2); }
.ckpc-destbtn-full { width: 100%; margin: 6px 0 12px; }
.ckpc-sum { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
/* Caja del producto: miniatura + título/precio + cantidad en una fila (compacta). */
.ckpc-prodrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
/* Código de descuento dentro de la tarjeta de resumen (PC), debajo del producto. */
.ckpc-discount { margin-bottom: 6px; position: relative; }
.ckpc-discount .input { font-size: 13.5px; padding-right: 40px; }
/* Palomita de verificación del código (aparece cuando es válido) + borde de estado. */
.ck-ref-ok { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--green); pointer-events: none; }
.ckpc-discount.valid .input { border-color: var(--green); box-shadow: 0 0 0 2px rgba(34,197,94,.18); }
.ckpc-discount.invalid .input { border-color: var(--red); }
.ck-ref-msg { font-size: 12px; margin: 0 2px 12px; display: flex; align-items: center; gap: 5px; }
.ck-ref-msg.ok { color: var(--green); }
.ck-ref-msg.bad { color: var(--red); }
.ckpc-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5px; }
.ckpc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ckpc-prodinfo { flex: 1; min-width: 0; }
.ckpc-prodt { font-weight: 700; font-size: 14px; line-height: 1.3; }
.ckpc-prodp { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; }
.ckpc-qtyc { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ckpc-summary { border-top: 1px solid var(--line); padding-top: 8px; }
.ckpc-srow { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-dim); padding: 7px 0; }
.ckpc-srow span { color: var(--text); font-weight: 600; }
.ckpc-discrow, .ckpc-discrow span { color: var(--green); }
.ckpc-srow.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; font-size: 17px; font-weight: 800; color: var(--text); }
.ckpc-srow.total span { font-size: 20px; font-weight: 800; }
.ckpc-paybtn { margin-top: 14px; padding: 15px; font-size: 16px; }
/* Método de pago DENTRO de la tarjeta de resumen (PC), encima de "Pagar": integrado, sin caja doble. */
.ckpc-sum .ckpc-sec-pay { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0 0; margin-top: 6px; }
.ckpc-sum .ckpc-sec-pay .ckpc-h { font-size: 14px; margin-bottom: 10px; }
.ckpc-sum .ckpc-sec-pay .ckpc-paysel { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 0; }
.ckpc-sum .ckpc-sec-pay .ckpc-pm { flex-direction: column; gap: 5px; padding: 11px 6px; font-size: 12px; }
@media (min-width: 1000px) {
  .ck-sheet:has(.ckpc) { max-width: 1080px; }
  .ckpc { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
  .ckpc-form { gap: 18px; }
  .ckpc-sec { padding: 18px 18px 6px; }
  .ckpc-img { max-height: 240px; }
  .ckpc-sum { position: sticky; top: 96px; }
}

/* Vista de TIENDA (negocio): el banner no debe quedar pegado al tope (bajo el notch). En móvil
   se baja por el área segura, dejando una franja limpia arriba (como las demás vistas, no como el home). */
@media (max-width: 999px) {
  .detail:has(.store-banner) { padding-top: env(safe-area-inset-top); background: var(--bg); }
  .store-banner .floatbar { padding-top: 14px; }
  #bd-body { padding-top: max(16px, env(safe-area-inset-top)); }
  /* Crear producto / crear negocio: el "Volver" no debe quedar pegado al techo. */
  .pf, .cbform { padding-top: max(16px, env(safe-area-inset-top)); }
}

/* Botón "Volver" estilo pill (bonito) — crear producto/negocio. */
.back-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 10px 16px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; color: var(--text);
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.back-pill:hover { border-color: var(--accent); }
.back-pill:active { background: var(--panel2); transform: scale(.99); }
/* Barra superior del formulario de producto: Volver (izq) + Publicar/Guardar (der).
   Con muchas variantes, el botón de arriba evita bajar hasta el final. */
.pf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-topbar .back-pill { margin-bottom: 14px; }
.pf-pub-top { width: auto; margin: 0 0 14px; padding: 8px 16px; border-radius: 11px; font-size: 13.5px;
  font-weight: 700; white-space: nowrap; flex: 0 0 auto; }

/* ===== Crear negocio con IA (botón + asistente conversacional) ===== */
.cb-ai { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, rgba(108,140,255,.18), rgba(108,140,255,.05)); border: 1px solid rgba(108,140,255,.38);
  color: var(--text); border-radius: 14px; padding: 13px 15px; margin-bottom: 14px; transition: transform .1s, border-color .15s; }
.cb-ai:active { transform: scale(.99); }
.cb-ai-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.cb-ai-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cb-ai-tx b { font-size: 15px; }
.cb-ai-tx small { color: var(--text-dim); font-size: 12px; line-height: 1.3; }
.cb-ai-arr { transform: rotate(180deg); color: var(--text-dim); flex: 0 0 auto; }
.aiw { display: flex; flex-direction: column; min-height: 62vh; }
.aiw-msgs { display: flex; flex-direction: column; gap: 10px; padding: 8px 2px 14px; }
.aiw-msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.42; white-space: pre-wrap; word-wrap: break-word; }
.aiw-msg.ai { align-self: flex-start; background: var(--bg2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.aiw-msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.aiw-typing { display: flex; gap: 4px; align-items: center; }
.aiw-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); animation: aiwblink 1.2s infinite both; }
.aiw-typing span:nth-child(2) { animation-delay: .2s; }
.aiw-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aiwblink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.aiw-bar { display: flex; gap: 8px; align-items: center; position: sticky; bottom: 8px; background: var(--bg); padding: 8px 0; }
.aiw-bar .input { flex: 1; }
.aiw-send { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.aiw-send:disabled { opacity: .5; }
.aiw-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.aiw-card-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.aiw-card-name { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.aiw-card-desc { color: var(--text-dim); font-size: 14px; line-height: 1.4; margin-bottom: 12px; }
.aiw-card-note { font-size: 12.5px; color: var(--text-dim); background: var(--panel); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; }
.aiw-card-loc { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.aiw-card-loc svg { color: var(--accent); }
.aiw-card .btn.block { width: 100%; margin-bottom: 8px; }
.aiw-loading { display: flex; align-items: center; gap: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 18px; font-size: 14px; }
.aiw-spin { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: aiwspin 1s linear infinite; }
@keyframes aiwspin { to { transform: rotate(360deg); } }

/* ===== Productos del Inicio como BANNER estilo Apple (carrusel de fotos + título + descripción) ===== */
.grid.banners { grid-template-columns: 1fr; gap: 16px; }
.pbanner { background: #0b0b0d; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; cursor: pointer; animation: cardIn .4s both; }
.pb-media { position: relative; background: radial-gradient(120% 95% at 50% 28%, #1c1c22 0%, #0a0a0c 70%); }
.pb-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pb-track::-webkit-scrollbar { display: none; }
.pb-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.pb-slide img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.pb-noimg { color: var(--text-dim); aspect-ratio: 4 / 3; }
.pb-dots { position: absolute; left: 16px; bottom: 12px; display: flex; gap: 6px; z-index: 2; }
.pb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .2s, width .2s; }
.pb-dot.on { background: #fff; width: 18px; border-radius: 4px; }
.pb-info { padding: 14px 18px 18px; }
.pb-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; }
.pb-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.4; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pb-price { font-size: 18px; font-weight: 800; }
.pb-loc { color: var(--text-dim); font-size: 12px; text-align: right; flex: 0 0 auto; }
.pbanner .card-fav { position: absolute; top: 12px; right: 12px; z-index: 2; }
.pbanner .card-oferta, .pbanner .card-new { position: absolute; top: 12px; left: 12px; z-index: 2; }

/* ===== Panel "Mis Tarjetas" del Wallet en PC (estilo dashboard) ===== */
.cpc { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 18px; height: 100%; display: flex; flex-direction: column; }
.cpc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cpc-head b { font-size: 17px; font-weight: 700; }
.cpc-menu { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cpc-menu:hover { background: var(--panel); color: var(--text); }
.cpc-upd { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; color: var(--text-dim); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; margin-bottom: 16px; }
.cpc-list { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cpc-row { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 4px; border-radius: 10px; }
.cpc-row:hover { background: var(--panel); }
.cpc-row.off { opacity: .55; }
.cpc-mini { flex: 0 0 auto; width: 56px; height: 38px; border-radius: 7px; position: relative; padding: 5px 6px; color: #fff; overflow: hidden; }
.cpc-mini-l { font-size: 7px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; opacity: .92; }
.cpc-mini-chip { position: absolute; bottom: 7px; left: 6px; width: 11px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, #e8c87a, #b88a2e); }
.cpc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cpc-info b { font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.cpc-brand { font-weight: 800; font-style: italic; color: var(--text-dim); font-size: 13px; }
.cpc-info span { font-size: 13px; color: var(--text-dim); }
.cpc-acts { display: flex; gap: 8px; flex: 0 0 auto; }
.cpc-ab { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cpc-ab:hover { background: var(--bg); color: var(--text); }
.cpc-empty { color: var(--text-dim); font-size: 13px; padding: 18px 0; text-align: center; }
.cpc-cta { margin-top: 16px; width: 100%; background: var(--accent); color: #fff; border: 0; border-radius: 12px; padding: 14px; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cpc-cta:hover { filter: brightness(1.06); }

/* ===== Wallet en PC: dashboard tipo Tetris (saludo + tarjetas | cuenta+detalle | movimientos) ===== */
.wpc { max-width: 1140px; margin: 0 auto; }
.wpc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 16px; }
.wpc-hello { font-size: 22px; font-weight: 800; display: inline-flex; align-items: center; }
.wpc-top-acts { display: flex; gap: 10px; }
/* Insignia de Promotor junto al saludo (solo si el usuario es promotor). */
.wpc-promo-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; font-size: 12.5px; font-weight: 800; color: #f5b83d; background: rgba(245,184,61,.14); border: 1px solid rgba(245,184,61,.42); padding: 5px 12px; border-radius: 999px; }
.wpc-promo-badge svg { color: #f5b83d; flex: 0 0 auto; }
.wpc-grid { display: grid; grid-template-columns: 330px 1fr; gap: 16px; align-items: stretch; }
.wpc-cards { display: flex; }
.wpc-cards .cpc { width: 100%; }
.wpc-account { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.wpc-acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; flex: 1; }
.wpc-acc-lbl { color: var(--text-dim); font-size: 13px; margin-bottom: 6px; }
.wpc-amount { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wpc-amount small { font-size: 14px; color: var(--text-dim); font-weight: 600; margin-left: 4px; }
.wpc-acc-right { border-left: 1px solid var(--line); padding-left: 22px; }
.wpc-det-head { display: flex; align-items: center; justify-content: space-between; }
.wpc-det-head b { font-size: 14px; }
.wpc-det-sub { color: var(--text-dim); font-size: 12px; margin: 3px 0 12px; }
.wpc-bar { height: 10px; border-radius: 6px; background: var(--panel); overflow: hidden; }
.wpc-bar-a { display: block; height: 100%; background: linear-gradient(90deg, #2bb673, #5fe0a0); border-radius: 6px; }
.wpc-det-rows { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.wpc-det-r { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.wpc-det-r b { color: var(--text); }
.wpc-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.wpc-dot.a { background: #2bb673; }
.wpc-dot.h { background: var(--gold); }
.wpc-funds { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 13px; padding: 14px 16px; }
.wpc-funds-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.wpc-funds-tx { flex: 1; min-width: 0; }
.wpc-funds-tx b { display: block; font-size: 14px; }
.wpc-funds-tx span { color: var(--text-dim); font-size: 12.5px; }
.wpc-funds-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.wpc-mov { margin-top: 16px; }
/* En PC las tarifas del casillero van SIEMPRE desplegadas (sin tener que tocar "Ver tarifas"). */
@media (min-width: 1000px) {
  .lk-b-addr .lk-banner-body[hidden] { display: block !important; }
  .lk-b-addr .lk-banner-bar { cursor: default; }
  .lk-b-addr .lk-banner-bar .lkbar-cta { display: none; }
}
.cpc-bal { margin-left: auto; flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* Página de la tarjeta: tarjeta+controles (izq) | transacciones (der) en PC; apilado en móvil */
.cp-grid { display: grid; grid-template-columns: minmax(400px, 480px) 1fr; gap: 16px; align-items: start; }
@media (min-width: 1000px) {
  /* En PC la columna de transacciones se limita a la altura de la izquierda (tarjeta + facturación)
     —fijada por JS— y desde ahí hace scroll interno, en vez de crecer en una lista larguísima. */
  .cp-grid { padding: 0 20px; align-items: start; }
  .cp-txbox { display: flex; flex-direction: column; min-height: 0; }
  .cp-txbox #cp-tx { flex: 1 1 auto; min-height: 120px; overflow-y: auto; }
  /* En la página de tarjeta en PC no mostramos los botones de la tarjeta (Información, Recargar,
     Congelar, Reemplazar): así la columna izquierda —y con ella el bloque de transacciones— queda más chica. */
  .cp-grid .card-acts { display: none; }
  /* Título "Tu tarjeta" fuera en PC. */
  .cp-grid #card-box > h3 { display: none; }
  /* La tarjeta ocupa TODO el ancho de la columna izquierda (hasta el borde), sin el cap de 380px. */
  .cp-grid #card-box .dcard { max-width: none; width: 100%; }
  /* El ojito "Ver datos" se mueve al menú de 3 puntitos: se oculta en la tarjeta (sigue en el DOM
     para que la opción del menú lo dispare). */
  .cp-grid #card-box .dc-eye { display: none; }
}
.cp-txbox h3 { margin: 0 0 12px; font-size: 16px; }
.cp-txbox #cp-tx { min-height: 120px; }
@media (max-width: 999px) { .cp-grid { grid-template-columns: 1fr; } }

/* Cabecera de la página de tarjeta: Volver (izq) + botón de 3 puntitos con menú (der) */
.cp-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.cp-header .back { margin: 0; }
.cp-menu-wrap { position: relative; margin-left: auto; }   /* empuja el kebab a la derecha siempre */
.cp-menu-btn { display: none; }   /* en móvil las acciones están en los botones bajo la tarjeta */
/* Kebab (3 puntos) de la barra superior de la Billetera: Crear tarjeta / Crear identificación. */
.tb-kebab { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card, #1c1c22); color: var(--text); cursor: pointer; }
.tb-kebab:active { background: var(--panel); }
.tb-menu-wrap .cp-menu-pop { min-width: 224px; }
.cp-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 210px;
  background: var(--card, #26262c); border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 16px 38px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
.cp-menu-pop[hidden] { display: none; }
.cp-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); font-size: 14px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.cp-menu-pop button:hover { background: var(--bg2); }
.cp-menu-pop button svg { color: var(--text-dim); }
@media (min-width: 1000px) {
  /* En PC la topbar oculta el botón Volver global; en la página de tarjeta SÍ lo queremos en la cabecera. */
  .cp-header .back { display: inline-flex !important; }
  /* La cabecera usa la MISMA grilla/sangría que el contenido: Volver alineado al borde izquierdo de la
     tarjeta y los 3 puntitos al borde derecho de ESA columna (no del extremo de la página). */
  .cp-header { display: grid; grid-template-columns: minmax(400px, 480px) 1fr; gap: 16px; padding: 0 20px; align-items: center; }
  .cp-header .back { grid-column: 1; grid-row: 1; justify-self: start; }
  .cp-header .cp-menu-wrap { grid-column: 1; grid-row: 1; justify-self: end; margin-left: 0; }
  .cp-menu-btn:not([hidden]) { display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line);
    color: var(--text); cursor: pointer; transition: background .12s ease; }
  .cp-menu-btn:hover { background: var(--card, #26262c); }
}

/* Columna izquierda de la página de tarjeta: tarjeta + información de facturación */
.cp-left { display: flex; flex-direction: column; gap: 16px; }
.cp-billing h3 { margin: 0 0 12px; font-size: 16px; }
.cpb-list { display: flex; flex-direction: column; }
.cpb-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.cpb-row:last-child { border-bottom: 0; }
.cpb-row label { flex: 0 0 116px; color: var(--text-dim); font-size: 13px; }
.cpb-row span { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; word-break: break-word; }
.cpb-copy { flex: 0 0 auto; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; padding: 4px; display: flex; }
.cpb-copy:hover { color: var(--text); }

/* ── Cajero (remeseros) ─────────────────────────────────────────────────────────── */
.cj-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.cj-tab { flex: 1; padding: 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); font-weight: 700; font-size: 14px; cursor: pointer; }
.cj-tab.on { background: var(--panel); color: var(--text); border-color: var(--text-dim); }
.cj-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.cj-card.off { opacity: .55; }
.cj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cj-amt { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cj-sub { font-size: 12.5px; color: var(--text-dim); }
.cj-line { font-size: 13px; color: var(--text-dim); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.cj-line svg { color: var(--text-dim); flex-shrink: 0; }
.cj-note { color: var(--text); background: var(--panel); border-radius: 8px; padding: 7px 9px; }
.cj-when { opacity: .7; }
.cj-badge { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; text-transform: uppercase; letter-spacing: .4px; }
.cj-badge.gold { background: rgba(230,200,120,.16); color: var(--gold, #e6c878); }
.cj-badge.blue { background: rgba(110,160,255,.16); color: #8fb4ff; }
.cj-badge.green { background: rgba(95,184,120,.16); color: var(--green); }
.cj-badge.red { background: rgba(230,90,90,.16); color: var(--red, #e85a5a); }
.cj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 12px; }
.cj-btn.accent { background: var(--green); border-color: var(--green); color: #06210f; }
.cj-btn.go { background: transparent; border-color: var(--green); color: var(--green); }
.cj-btn.block { width: 100%; }
.cj-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cj-acts .cj-btn { flex: 1; }
.cj-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; color: var(--text); cursor: pointer; }
.cj-pick-bal { font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.cj-report { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 8px; }
.cj-report-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cj-report-row .input { flex: 1; }
.cj-row2 { display: flex; gap: 8px; margin-top: 12px; }
.cj-row2 .cj-btn, .cj-row2 .btn { flex: 1; margin-top: 0; }
/* Revisión KYC (admin) */
.kyc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.kyc-img span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.kyc-img img { width: 100%; height: 110px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.kyc-thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; }
.kyc-th { display: block; text-decoration: none; }
.kyc-th img { width: 100%; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); }
.kyc-th span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 4px; text-align: center; }
/* Bloque KYC de la Database: tarjeta de una identidad a revisar */
.kyc-card { background: var(--card, #14181d); border: 1px solid var(--line, rgba(255,255,255,.09)); border-radius: 14px; padding: 14px; margin: 12px 16px; }
.kyc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kyc-head b { display: block; font-size: 15px; font-weight: 800; }
.kyc-head small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.kyc-kind { font-weight: 700; color: var(--accent); }
.kyc-kind svg { vertical-align: -1px; }
.kyc-badge { flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.kyc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 2px; }
.kyc-meta > div { font-size: 13px; font-weight: 600; }
.kyc-meta > div span { color: var(--text-dim); font-weight: 500; margin-right: 5px; text-transform: uppercase; font-size: 10px; letter-spacing: .4px; }
.kyc-acts { display: flex; gap: 9px; margin-top: 12px; }
.kyc-acts .btn { flex: 1; }
/* Calificar remesero (cliente) */
.rate-stars { display: flex; justify-content: center; gap: 8px; margin: 4px 0 14px; }
.rate-stars button { background: none; border: none; font-size: 38px; line-height: 1; color: var(--line); cursor: pointer; padding: 0; transition: transform .1s; }
.rate-stars button.on { color: var(--gold, #e6c878); }
.rate-stars button:active { transform: scale(1.15); }

/* ── Cajero como app APARTE (oculta el chrome de la marketplace) ────────────────────── */
body.cajero-app #tabbar,
body.cajero-app #support-fab,
body.cajero-app #fab,
body.cajero-app .topnav,
body.cajero-app .sidebar,
body.cajero-app .pc-only { display: none !important; }
body.cajero-app #app { padding-bottom: 24px !important; }
body.cajero-app .view-cajero { padding-left: 0; padding-right: 0; }
/* Flujo de aplicar (/cajeros/aplicacion…): pantalla AISLADA, sin el chrome del marketplace. */
body.apply-iso #tabbar, body.apply-iso #support-fab, body.apply-iso #fab,
body.apply-iso .topnav, body.apply-iso #pc-sidebar, body.apply-iso .sidebar,
body.apply-iso #pc-topnav, body.apply-iso .pc-only { display: none !important; }
body.apply-iso #app { padding-bottom: 24px !important; }
.cj-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.cj-top-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.cj-top-title { flex: 1; text-align: left; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.cj-top-title svg { color: var(--green); }
/* En PC el cajero se centra como una columna (no a todo lo ancho de la marketplace). */
@media (min-width: 1000px) {
  body.cajero-app #app { max-width: 720px; margin: 0 auto; }
}

/* ── Solicitud de mensajero: pasos (1→2) + tarjetas de verificación en vivo ─────────── */
.kb-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 16px; }
.kb-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); }
.kb-dot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.kb-dot.ok { background: var(--green, #2ecc71); border-color: var(--green, #2ecc71); color: #fff; }
.kb-line { width: 46px; height: 2px; background: var(--line); border-radius: 2px; }
.kb-line.on { background: var(--accent); }
.kb-group-h { font-weight: 800; font-size: 14px; margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.kb-vcard { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.kb-vcard.done { border-color: var(--green, #2ecc71); }
.kb-vic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--accent); }
.kb-vcard.done .kb-vic { color: var(--green, #2ecc71); border-color: var(--green, #2ecc71); }
.kb-vtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kb-vtx b { font-size: 14.5px; }
.kb-vtx span { font-size: 12.5px; color: var(--text-dim); }
.kb-vbtn { width: auto !important; flex: 0 0 auto; padding: 9px 18px; font-size: 14px; white-space: nowrap; }

/* ── Cajero: acceso por contraseña (remeseros) ─────────────────────────────────────── */
.cj-gate { max-width: 360px; margin: 30px auto 0; text-align: center; }
.cj-gate-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--green); }
.cj-gate h3 { font-size: 19px; margin: 0 0 4px; }
.cj-gate .input { margin-top: 14px; text-align: center; letter-spacing: 1px; }
.cj-gate .cj-btn { margin-top: 14px; }
.cj-poolhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 800; font-size: 16px; }
.cj-link { background: none; border: 0; color: var(--text-dim); font-weight: 700; font-size: 14px; cursor: pointer; }
/* Declaración jurada de cumplimiento en el registro de vendedores (EAR99 + sin nexos gobierno cubano). */
.cb-legal { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; margin: 4px 0 12px; cursor: pointer; }
.cb-legal input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent); }
.cb-legal b { color: var(--text); }
.cb-type { display: inline-flex; gap: 2px; margin: 0 0 12px; padding: 3px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--line); }
.cb-type-opt { padding: 6px 16px; border-radius: 8px; border: 0; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.cb-type-opt.active { background: var(--accent); color: #fff; }
#cb-map-wrap { margin: 0 0 12px; }
.cb-map-h { font-size: 12px; color: var(--text-dim); margin: 2px 2px 6px; display: flex; align-items: center; gap: 5px; }
/* Casilla de aceptación de Términos y Política en el registro de usuario. */
.auth-terms { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-dim); line-height: 1.4; margin: 4px 0 12px; cursor: pointer; }
.auth-terms input { margin-top: 1px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--accent); }
.auth-terms a { color: var(--accent); text-decoration: none; }
/* Gate BLOQUEANTE de Términos (obligatorio para todos) */
.terms-gate { position: fixed; inset: 0; z-index: 100002; background: rgba(6,8,12,.9); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.terms-gate-box { width: 100%; max-width: 560px; max-height: 94vh; display: flex; flex-direction: column;
  background: var(--card, #14181d); border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 18px; overflow: hidden; }
.terms-gate-head { padding: 16px 18px 10px; }
.terms-gate-head h2 { font-size: 18px; font-weight: 800; }
.terms-gate-head p { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.terms-gate-frame { flex: 1; min-height: 46vh; width: 100%; border: 0; background: #fff; }
.terms-gate-chk { display: flex; gap: 10px; align-items: flex-start; padding: 12px 18px 4px; font-size: 13px; color: var(--text); cursor: pointer; }
.terms-gate-chk input { margin-top: 2px; flex: 0 0 auto; width: 19px; height: 19px; accent-color: var(--accent); }
.terms-gate-chk input:disabled { opacity: .4; }
.terms-gate-hint { font-size: 11.5px; color: var(--text-dim); padding: 0 18px 8px; }
.terms-gate-acts { display: flex; gap: 10px; padding: 6px 18px calc(env(safe-area-inset-bottom,0px) + 16px); }
.terms-gate-acts .btn { flex: 1; }
/* Carné estilo del jefe: título "Identificación" (dorado) arriba + datos en burbujas de vidrio (sin etiquetas). */
.idc-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; color: #e8dcc0; }
.idc-title svg { flex: 0 0 auto; }
.idc-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.idc-chip { display: inline-block; max-width: 100%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: 4px 10px; font-weight: 600; color: #fff; line-height: 1.22; }
.idc-chip-id { color: #e8dcc0; font-variant-numeric: tabular-nums; letter-spacing: 1px; font-weight: 700; }
.idc-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.idcard-real .idc-chip { font-size: 13.5px; }
.dcard-id .idc-chip { font-size: 12px; padding: 3px 9px; }
/* Filtro oscuro en la foto del carné (pedido del jefe): la armoniza con el fondo navy. */
.idc-photo img, .idcard-photo img { filter: brightness(.78) contrast(1.05); }

/* ══════════════════════════════════════════════════════════════════════════════
   DATABASE en PC — panel profesional, INTUITIVO y bonito (solo ≥1000px).
   Estados claros, profundidad sutil, un acento cálido. El móvil queda intacto.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  /* Lienzo con profundidad: un halo de acento muy tenue arriba da vida sin ensuciar. */
  .db-view { padding-bottom: 56px; background:
      radial-gradient(1100px 340px at 20% -80px, rgba(108,140,255,.06), transparent 70%); }
  .db-view .prof-breakdown { display: none; }   /* Ganancias: solo las KPIs, sin desglose */

  /* Avatar de usuario (iniciales sobre color propio) → la lista se lee de un vistazo. */
  .db-view .user-card { display: flex; gap: 14px; align-items: flex-start; }
  .db-view .uc-body { display: block; flex: 1; min-width: 0; }
  .db-view .uc-avatar {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 13px; margin-top: 2px;
    color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .3px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.22);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  .db-view .user-card .uc-tag { position: absolute; top: 14px; right: 14px; margin: 0; }
  .db-view .user-card { position: relative; }

  /* Navegación: segmented control dentro de una barra suave. La pestaña activa es una
     píldora de acento clara (se ve "seleccionada" de un vistazo). */
  .db-view .db-nav { padding: 16px 30px 4px; }
  .db-view .db-tabs {
    position: relative;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden;
    padding: 6px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  }
  .db-view .db-tabs::-webkit-scrollbar { display: none; }
  .db-view .db-tab {
    position: relative; width: auto; height: auto; flex: 0 0 auto;
    gap: 8px; padding: 9px 15px; border-radius: 10px;
    border: none; background: none; color: var(--text-dim);
    font-size: 13px; font-weight: 600; letter-spacing: .1px;
    transition: color .16s, background .16s, box-shadow .16s;
  }
  .db-view .db-tab svg, .db-view .db-tab img { flex: 0 0 auto; transition: color .16s, transform .16s; }
  .db-view .db-tab-lbl { display: inline; white-space: nowrap; }
  .db-view .db-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
  .db-view .db-tab:hover svg { transform: translateY(-1px); }
  .db-view .db-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #5b8cff, #3f63e8);
    box-shadow: 0 4px 14px rgba(59,99,232,.34);
  }
  .db-view .db-tab.active svg { color: #fff; }
  .db-view .db-tab .tab-pending { top: 7px; right: 8px; }

  /* Buscador = círculo azul a la DERECHA de la barra de pestañas (como el mockup). */
  /* Buscador = círculo azul a la DERECHA de la barra de pestañas (como el mockup).
     Botón con RELIEVE (brillo interior + halo) para que no se vea plano. */
  .db-view .db-search-btn {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; margin-left: auto; width: 38px; height: 38px; border-radius: 50%;
    border: none; cursor: pointer; color: #fff;
    background: radial-gradient(120% 120% at 30% 25%, #6f9bff 0%, #4f7bf0 45%, #3a5bdb 100%);
    box-shadow: 0 4px 12px rgba(59,99,232,.38), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(20,40,110,.5);
    transition: filter .15s, transform .12s, box-shadow .15s;
  }
  .db-view .db-search-btn:hover { filter: brightness(1.07); }
  .db-view .db-search-btn:active { transform: scale(.93); }
  .db-view .db-search-btn.on {
    background: radial-gradient(120% 120% at 30% 25%, #33333d 0%, #26262c 100%); color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent), inset 0 2px 4px rgba(0,0,0,.4);
  }

  /* Input SIEMPRE VISIBLE: ocupa el espacio libre entre las pestañas y la lupa (no hay
     que tocar la lupa para verlo). PÍLDORA con profundidad (sombra interior + borde). */
  .db-view .db-inline-search {
    display: block; position: static; flex: 1 1 auto; min-width: 90px;
    margin: 0 10px; height: 34px;
    border: 1px solid var(--line); border-radius: 999px; outline: none;
    background: linear-gradient(180deg, #1a1a20, #202027); color: var(--text); font-size: 14px; padding: 0 16px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.03);
    opacity: 1; pointer-events: auto;
    transition: box-shadow .15s, border-color .15s;
  }
  .db-view .db-inline-search:focus {
    border-color: rgba(108,140,255,.6);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.4), 0 0 0 3px rgba(108,140,255,.22);
  }
  .db-view .db-inline-search::placeholder { color: var(--text-dim); }
  /* El input abierto es angosto (pegado a la lupa): las pestañas de la izquierda quedan
     visibles y siguen siendo clicables; solo las que quedan debajo del input no reciben clic. */

  /* La barra de búsqueda suelta NO se usa en PC (el buscador vive en la nav). */
  .db-view .searchbar { display: none; }

  /* Filtros: chips redondeados; el activo va en acento cálido (no invertido duro). */
  .db-view .db-subfilter { padding: 8px 30px 2px; flex-wrap: wrap; overflow: visible; gap: 7px; }
  .db-view .dbsf { background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; padding: 7px 14px; transition: all .15s; }
  .db-view .dbsf:hover { border-color: var(--text-dim); color: var(--text); }
  .db-view .dbsf.on { background: rgba(108,140,255,.16); color: var(--accent); border-color: rgba(108,140,255,.4); }

  .db-view #db-body { padding: 14px 30px 0 !important; }
  .db-view .dbprod-toggle { padding: 8px 30px 0; }

  /* Rótulo de cada bloque: mayúsculas, con un puntito de acento a la izquierda (guía la vista). */
  .db-view #db-body > h3 {
    grid-column: 1 / -1; margin: 26px 2px 12px !important;
    display: flex; align-items: center; gap: 9px;
    font-size: 12px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .7px; color: var(--text) !important;
  }
  .db-view #db-body > h3::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
  .db-view #db-body > h3 span { letter-spacing: 0; text-transform: none; }

  /* Densidad con aire: listas en varias columnas. */
  .db-view .db-scroll {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
    gap: 14px; align-items: start;
  }
  .db-view .db-scroll > * { margin-bottom: 0 !important; }
  /* USUARIOS: todas las tarjetas del MISMO alto (simétricas), con los botones anclados
     abajo aunque unas tengan "Negocio"/roles y otras no. */
  .db-view .db-scroll-users { align-items: stretch; }
  .db-view .db-scroll-users > .user-card { height: 100%; align-items: stretch; }
  .db-view .db-scroll-users .uc-body { display: flex; flex-direction: column; }
  .db-view .db-scroll-users .uc-actions { margin-top: auto; }

  /* Fichas: se sienten tocables — leve elevación + borde de acento + sombra suave al pasar. */
  .db-view .order-card, .db-view .user-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 15px;
    transition: border-color .16s, transform .16s, box-shadow .16s;
  }
  .db-view .order-card:hover, .db-view .user-card:hover {
    border-color: rgba(108,140,255,.45); transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
  }
  .db-view .empty { grid-column: 1 / -1; }

  /* Tarjetas KPI: degradado sutil, redondeadas, con profundidad amable + realce al pasar. */
  .db-view .box {
    border: 1px solid var(--line); border-radius: 16px;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    box-shadow: 0 2px 10px rgba(0,0,0,.14);
    transition: border-color .16s, transform .16s, box-shadow .16s;
  }
  .db-view .box:hover { transform: translateY(-2px); border-color: rgba(108,140,255,.35); box-shadow: 0 10px 24px rgba(0,0,0,.24); }

  /* CONTABILIDAD: dashboard estructurado en grilla (no una columna larga).
     KPIs arriba en fila · desglose y gráfico lado a lado · banner de tarjetas abajo. */
  .db-view .acc-dash {
    display: grid; gap: 14px; align-items: start; margin-top: 4px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "kpis kpis"
      "breakdown chart"
      "cards cards";
  }
  .db-view .acc-dash > .acc-card  { grid-area: breakdown; margin: 0 !important; }
  .db-view .acc-dash > .acc-flow  { grid-area: kpis; margin: 0 !important; grid-template-columns: repeat(4, 1fr); }
  .db-view .acc-dash > .acc-spark { grid-area: chart; margin: 0 !important; align-self: stretch; }
  .db-view .acc-dash > .ce-banner { grid-area: cards; margin: 0 !important; }
  /* KPIs (statCard) planas y coherentes con las demás fichas. */
  .db-view .acc-flow .box, .db-view .acc-flow > div {
    border: 1px solid var(--line); border-radius: 14px;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
  }
  /* Gráfico ocupa su columna a lo alto para no dejar hueco. */
  .db-view .acc-spark { display: flex; flex-direction: column; }
  .db-view .acc-spark .bspark { flex: 1; }
}
/* En pantallas anchas, más columnas todavía (uso pleno del espacio). */
@media (min-width: 1440px) {
  .db-view .db-scroll { grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANALÍTICA (primera página de la Database) — dashboard tipo panel: título, KPIs
   con icono (1ª hero en azul) y dos paneles (gráfico + donut). Oscuro. Responsive.
   ══════════════════════════════════════════════════════════════════════════════ */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 2px 18px; flex-wrap: wrap; }
.dash-title { font-size: 23px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.dash-subt { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.dash-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 8px 13px; }
.dash-chip svg { color: var(--accent); }
/* Desplegable de período (Hoy / Ayer / Semanal / Mensual). */
.dash-period-wrap { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; transition: border-color .15s; }
.dash-period-wrap:hover { border-color: var(--text-dim); }
.dash-period-wrap > svg:first-child { color: var(--accent); flex: 0 0 auto; }
.dash-period-wrap > svg:last-child { color: var(--text-dim); flex: 0 0 auto; pointer-events: none; }
.dash-period { appearance: none; -webkit-appearance: none; background: none; border: none; outline: none; color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0 2px; }
.dash-period option { background: var(--panel2); color: var(--text); }
/* Fila del filtro de tiempo en Tableros/Datos. */
.db-periodrow { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px 2px; }
.db-periodrow .db-selbtn { flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 11px; font-size: 13px; }
.db-periodrow .db-addtx-sm { flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 11px; font-size: 13px; }
@media (min-width: 1000px) { .db-view .db-periodrow { padding: 12px 30px 2px; } }

/* En PC, DOS filas: (1) toggle a la izquierda + filtro "Hoy" a la derecha;
   (2) las pestañas en su propia fila debajo, con el buscador al final.
   En móvil todo se apila en el orden natural del DOM. */
.db-toolbar { display: block; }
@media (min-width: 1000px) {
  .db-view .db-toolbar:not(.solo) { padding: 12px 30px 4px; }
  .db-view .db-toolbar:not(.solo) .db-tbrow1 { display: flex; align-items: center; gap: 16px; }
  .db-view .db-toolbar:not(.solo) .db-tbrow1 > .db-viewtoggle { flex: 0 0 auto; padding: 0; max-width: none; }
  .db-view .db-toolbar:not(.solo) .db-tbrow1 > .db-periodrow { flex: 0 0 auto; margin-left: auto; padding: 0; }
  /* Analítica (.solo): "Hoy" en la MISMA fila del segmento (compacto, sin banda vacía arriba). */
  .db-view .db-toolbar.solo { padding: 12px 30px 4px; }
  .db-view .db-toolbar.solo .db-tbrow1 { display: flex; align-items: center; gap: 16px; }
  .db-view .db-toolbar.solo .db-tbrow1 > .db-viewtoggle { flex: 0 0 auto; padding: 0; max-width: none; }
  .db-view .db-toolbar.solo .db-tbrow1 > .db-periodrow { flex: 0 0 auto; margin-left: auto; padding: 0; }
  .db-view .db-toolbar:not(.solo) > .db-nav { padding: 10px 0 0; }
  .db-view .db-toolbar:not(.solo) > .db-nav .db-tabs { overflow-x: auto; }
}
/* Montos por provincia → filas de municipio (Analítica de Usuarios). */
.um-row { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-top: 1px solid var(--line); }
.um-row:first-child { border-top: 0; }
.um-mun { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.um-n { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); }
.um-monto { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--green); white-space: nowrap; }

/* Contabilidad por provincia (inicio): fila de provincia + drill-down a municipios. */
.prov-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 2px; background: none; border: none; border-top: 1px solid var(--line); color: var(--text); cursor: pointer; }
.prov-acc > .prov-row:first-child { border-top: 0; }
.prov-chev { flex: 0 0 auto; color: var(--text-dim); display: flex; transition: transform .2s; }
.prov-row.open .prov-chev { transform: rotate(90deg); color: var(--accent); }
.prov-name { flex: 1; min-width: 0; text-align: left; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.prov-n { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); }
.prov-monto { flex: 0 0 auto; width: 110px; text-align: right; font-size: 15px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.prov-munis { padding: 2px 0 8px 26px; }
.prov-munis .um-row { border-top: 1px dashed var(--line); }
.prov-munis .um-row:first-child { border-top: 0; }
/* Widget de usuarios (inicio): botón que despliega la tabla de provincias. */
.uw-widget { display: block; font: inherit; color: inherit; }
.uw-widget .flow-total { display: inline-flex; align-items: center; gap: 5px; }
.uw-widget .flow-total svg { transition: transform .2s; }
.uw-widget.open .flow-total svg { transform: rotate(90deg); color: var(--accent); }
.uw-widget:hover { border-color: var(--text-dim); }

.dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 17px; transition: transform .16s, border-color .16s, box-shadow .16s; }
.kpi-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.kpi-lbl { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.kpi-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(108,140,255,.14); color: var(--accent); }
.kpi-val { font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.05; }
.kpi-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; font-weight: 500; }
.kpi-hero { background: linear-gradient(135deg, #5b8cff, #3f63e8); border-color: transparent; box-shadow: 0 12px 28px rgba(59,99,232,.34); color: #fff; }
.kpi-hero .kpi-lbl, .kpi-hero .kpi-sub { color: rgba(255,255,255,.85); }
.kpi-hero .kpi-ic { background: rgba(255,255,255,.95); color: #3f63e8; }

.dash-2col { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dash-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 17px; }
.dash-panel-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 12px; }
.dash-panel-h svg { color: var(--accent); }
/* Panel "Total de ingresos" con el desglose (donut) adentro. El total ya se ve en el centro
   del círculo, así que NO repetimos el número grande arriba. */
.inc-total { background: linear-gradient(180deg, rgba(108,140,255,.08), var(--panel)); border-color: rgba(108,140,255,.28); }
.inc-donut { margin-top: 2px; }
/* En MÓVIL se quita la gráfica de líneas (ventas); en PC sí se muestra. */
.dash-2col .chart-panel { display: none; }

/* Depósitos / Retiros / Transacciones (SOLO PC): paneles con donut, estilo del widget de ingresos. */
/* Grilla masonry del inicio (tipo Tetris): las tarjetas encajan en columnas sin dejar huecos. */
.dash-grid { column-width: 340px; column-gap: 14px; }
.dcell { break-inside: avoid; margin-bottom: 14px; }
.dcell:empty { display: none; margin: 0; }
.dcell > .dash-panel { margin-bottom: 0 !important; }

/* Widget de BALANCE TOTAL: todo el dinero que custodia la plataforma (billeteras + tarjetas + escrow). */
.bt-panel { background: linear-gradient(180deg, rgba(54,194,117,.10), var(--panel)); border-color: rgba(54,194,117,.30); }
.bt-panel .dash-panel-h { margin-bottom: 8px; }
.bt-panel .dash-panel-h svg { color: #36c275; }
.bt-amount { font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; }
.bt-sub { font-size: 12px; color: var(--text-dim); margin: 3px 0 12px; }
.bt-segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bt-seg { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; }
.bt-seg-l { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 3px; }
.bt-seg b { font-size: 14.5px; font-weight: 700; }
/* Móvil: el widget va suelto arriba del desglose (fuera del grid de PC). */
.acc-dash .bt-panel, .db-body > .bt-panel, #db-body > .bt-panel { margin-bottom: 14px; }
@media (max-width: 560px) { .bt-segs { grid-template-columns: 1fr; } .bt-seg { display: flex; justify-content: space-between; align-items: center; } .bt-seg-l { margin: 0; } }
.dcell > .dash-panel:not(:last-child) { margin-bottom: 14px !important; }
.flow-panel { background: linear-gradient(180deg, rgba(108,140,255,.06), var(--panel)); }
/* Widget-atajo del tablero: al tocarlo navega a su pestaña. */
.dash-nav { cursor: pointer; transition: border-color .15s, transform .12s; }
.dash-nav:hover { border-color: var(--accent) !important; }
.dash-nav:active { transform: scale(.995); }
.dash-nav .flow-total svg { opacity: .65; }
.flow-panel .dash-panel-h { flex-wrap: wrap; }
.flow-total { margin-left: auto; font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.flow-total b { color: var(--accent); font-size: 14.5px; }
.db-view .flow-panel .donut { width: 92px; height: 92px; }
.db-view .flow-panel .donut-wrap { gap: 10px; padding: 0; margin: 0; }
.db-view .flow-panel .donut-legend { min-width: 140px; gap: 5px; }
.db-view .flow-panel .dleg { font-size: 12px; }

/* PC: KPIs en fila de 4, paneles lado a lado (gráfico más ancho), título mayor. */
@media (min-width: 1000px) {
  .db-view .dash-head { margin: 8px 2px 20px; }
  .db-view .dash-title { font-size: 30px; }
  .db-view .dash-kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .db-view .dash-2col { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .db-view .kpi:not(.kpi-hero):hover { transform: translateY(-2px); border-color: rgba(108,140,255,.4); box-shadow: 0 10px 24px rgba(0,0,0,.24); }
  .db-view .dash-panel { padding: 18px 20px; }
  /* Widget de ingresos más COMPACTO: donut más chico y menos espacio. */
  .db-view .inc-total { padding: 12px 16px 10px; }
  .db-view .inc-total .donut { width: 96px; height: 96px; }
  .db-view .inc-total .donut-wrap { gap: 10px; padding: 0; margin: 0; }
  .db-view .inc-total .donut-legend { min-width: 130px; gap: 6px; }
}

/* ── Selector de dirección exacta (OSM): buscador + mapa con pin arrastrable ── */
.apick { margin: 4px 0 10px; }
.apick .ap-map { height: 210px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); position: relative; }
/* Pin FIJO en el centro del mapa: el mapa se arrastra bajo el pin y marca el punto exacto. */
.apick .ap-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -22px 0 0 -11px; z-index: 500; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e03b3b'><path d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>");
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.apick .ap-sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-top: 3px; box-shadow: 0 8px 22px rgba(0,0,0,.4); max-height: 240px; overflow-y: auto; }
.apick .ap-item { padding: 9px 12px; font-size: 13px; line-height: 1.3; cursor: pointer; border-bottom: 1px solid var(--line); }
.apick .ap-item:last-child { border-bottom: 0; }
.apick .ap-item:hover, .apick .ap-item:active { background: var(--bg2); }
.apick .ap-bar { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.apick .ap-geo { flex: none; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.apick .ap-geo:hover { border-color: var(--accent); }
.apick .ap-coords { flex: 1; font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apick .ap-coords .ap-ll { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--accent); letter-spacing: .2px; }
.apick .ap-coords .ap-lbl { color: var(--text-dim); font-weight: 400; }

/* ── Navegación dentro de la app (openRouteNav): mapa fullscreen + tu posición + ruta ── */
.rnav { position: fixed; inset: 0; z-index: 100003; background: var(--bg); display: flex; flex-direction: column; }
.rnav-top { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 10px) 14px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.rnav-x { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rnav-tt { display: flex; flex-direction: column; min-width: 0; }
.rnav-tt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rnav-sub { font-size: 12px; color: var(--text-dim); }
.rnav-map { flex: 1; min-height: 0; position: relative; }
.rnav-recenter { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 96px); width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(108,140,255,.5); cursor: pointer; z-index: 500; }
.rnav-foot { padding: 12px 16px calc(env(safe-area-inset-bottom) + 14px); background: var(--bg); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rnav-eta { display: flex; flex-direction: column; }
.rnav-eta b { font-size: 17px; }
.rnav-eta span { font-size: 12.5px; color: var(--text-dim); }
.rnav-mode { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.rnav-mode.ok { background: rgba(108,140,255,.16); color: var(--accent); }
.rnav-mode.warn { background: rgba(240,160,32,.16); color: #f0a020; }
/* Marcadores del mapa de navegación */
/* Punto "tú" fijo y limpio (estilo Google Maps): sin parpadeo, halo estático suave. */
.rnav-mk.me span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #2b8cff; border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(43,140,255,.18), 0 1px 4px rgba(0,0,0,.55); }
.rnav-mk.dest span { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: #22c55e; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0,0,0,.5); }

/* ── Modo navegación 3D (openRouteNav): plano inclinado + ruta animada + horizonte ── */
.rnav-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; perspective: 1500px; perspective-origin: 50% 32%;
  background: linear-gradient(to bottom, #0c1020 0%, #10131c 24%, #0e0e10 44%); }
.rnav-map { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.rnav.d3 .rnav-map { transform: rotateX(55deg) scale(1.45); transform-origin: 50% 68%; }
/* Los controles de zoom se enderezan en 3D para que se lean bien. */
.rnav.d3 .rnav-map .leaflet-control-zoom { transform: rotateX(-55deg); transform-origin: bottom left; }
/* Horizonte: degradado que funde el borde lejano del plano con el fondo (sensación de profundidad/cielo). */
.rnav-sky { position: absolute; top: 0; left: 0; right: 0; height: 46%; z-index: 440; pointer-events: none; opacity: 0; transition: opacity .7s ease;
  background: linear-gradient(to bottom, var(--bg) 2%, rgba(14,14,16,.72) 34%, rgba(14,14,16,.28) 66%, transparent 100%); }
.rnav.d3 .rnav-sky { opacity: 1; }
.rnav-glow { display: none; }
/* Ruta: línea limpia con "tráfico" fluyendo hacia el destino (brillo sutil, profesional). */
.rnav-route-path { filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.rnav-route-flow { stroke-dasharray: 3 16; stroke-linecap: round; animation: rnavFlow .9s linear infinite; }
@keyframes rnavFlow { to { stroke-dashoffset: -19; } }
.rnav-route-draw { animation: rnavDraw 1.1s ease-out forwards; }
@keyframes rnavDraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
/* Botón 2D/3D */
.rnav-3dbtn { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 150px); width: 46px; height: 46px; border-radius: 50%; background: var(--bg2); color: var(--text); border: 1px solid var(--line); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.5); cursor: pointer; z-index: 500; }
.rnav.d3 .rnav-3dbtn { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Marcadores de pie en 3D (billboard). Sin animaciones: quietos y limpios. */
.rnav-mk.me span { transform-style: preserve-3d; }
.rnav.d3 .rnav-mk.me span { transform: rotateX(-55deg); }
.rnav.d3 .rnav-mk.dest span { transform: rotateX(-55deg) rotate(-45deg); }

/* ── Selector visual de Cuba (localidadPicker): Provincia → Municipio → Localidad + mapa ── */
.lpick { margin: 4px 0 10px; }
.lpick .lp-map { height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); margin-top: 8px; }
.lpick .lp-map .leaflet-container { width: 100%; height: 100%; background: var(--bg2); }
.lpick .lp-hint { font-size: 12px; color: var(--text-dim); margin: 7px 2px 0; }
.lpick .lp-hint .lp-ll { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--accent); letter-spacing: .2px; }
.lpick .lp-hint .lp-hint-x { color: var(--text-dim); font-weight: 400; opacity: .8; }

/* Pin del selector de localidad (mapa oscuro) */
.lp-mk span { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: #4dd0ff; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 3px 10px rgba(0,0,0,.6); }
.lpick .lp-map .leaflet-container { background: #12151c; }

/* Puntos de localidad en el mapa oscuro del selector (dot cian + etiqueta) */
.lp-loc-mk { pointer-events: auto; }
.lp-loc-mk i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #4dd0ff; border: 1.5px solid #0a2a33; box-shadow: 0 0 6px rgba(77,208,255,.7); cursor: pointer; }
.lp-loc-mk b { position: absolute; left: 12px; top: -3px; white-space: nowrap; font-size: 10.5px; font-weight: 600; color: #dff6ff; text-shadow: 0 1px 3px #000, 0 0 3px #000; cursor: pointer; pointer-events: auto; }

/* Vista Trabajos (pestaña de la barra de abajo). */
.trab-intro { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; margin: 4px 2px 14px; }
.trab-list { display: flex; flex-direction: column; gap: 12px; }
.trab-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); cursor: pointer; transition: border-color .15s, transform .12s; }
.trab-card:hover { border-color: var(--accent); }
.trab-card:active { transform: scale(.98); }
.trab-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.trab-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trab-tx b { font-size: 15.5px; font-weight: 700; }
.trab-tx span { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.trab-go { flex: 0 0 auto; color: var(--text-dim); transform: rotate(180deg); display: flex; }
.trab-card.trab-on { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.trab-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
@media (min-width: 1000px) { .trab-list, .trab-intro { max-width: 620px; margin-left: auto; margin-right: auto; } }

/* "Gana" (ex-Trabajos): tarjetas tipo banner (imagen + texto encima). Solo Promotor activo. */
.gana-list { display: flex; flex-direction: column; gap: 14px; }
.gana-card { position: relative; display: block; width: 100%; padding: 0; border: none; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--bg2); cursor: pointer; text-align: left; font: inherit; transition: transform .12s; }
.gana-card:active { transform: scale(.985); }
.gana-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gana-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 16px 18px; background: linear-gradient(180deg, rgba(6,8,14,0) 30%, rgba(6,8,14,.86) 100%); }
.gana-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-bottom: 4px; }
.gana-badge.on { color: #06210f; background: var(--green); }
.gana-badge.soon { color: #fff; background: rgba(120,124,140,.9); }
.gana-t { font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.gana-s { font-size: 13px; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.gana-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 800; color: #fff; background: var(--accent); padding: 8px 16px; border-radius: 999px; }
.gana-card.gana-soon { cursor: default; }
.gana-card.gana-soon .gana-img { filter: grayscale(.5) brightness(.38) blur(3px); }
.gana-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; color: #fff; opacity: .92; pointer-events: none; }
.gana-lock svg { width: 26px; height: 26px; padding: 13px; border-radius: 999px; background: rgba(18,20,28,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(2px); box-sizing: content-box; }
.gana-badge.evt { color: #2a1c05; background: var(--gold); }
@media (min-width: 1000px) { .gana-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1040px; margin: 0 auto; } }

/* ═══ CARRITO ═══════════════════════════════════════════════════════════════════════ */
.tb-cart, .tn-ic.tb-cart, button.tb-cart { width: 40px; height: 40px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; }
.tb-cart:active { transform: scale(.9); }
.pc-topnav .tb-cart { background: transparent; border: none; width: 38px; height: 38px; color: inherit; }
.cart-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px var(--bg); }
.cart-badge.hidden { display: none; }
.pd-cart-btn { background: var(--panel) !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; margin-top: 12px; }

/* El carrito ya no tiene cabecera: respiro superior (notch/safe-area) + orden código→resumen→botón→lista. */
.cart-sheet { padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)); }
.cart-sheet .cart-list { margin-top: 14px; }
.cart-list { display: flex; flex-direction: column; gap: 10px; }
.cart-item { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.cart-item-off { opacity: .7; }
/* Caja combinada: envía juntos los productos livianos para abaratar el flete. */
.cart-box { background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 16px; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.cart-box-head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.cart-box-head svg { color: var(--accent); flex-shrink: 0; }
.cart-box-meta { margin-left: auto; font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.cart-box-hint { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; margin-top: -4px; }
.cart-box .cart-item-box { border: none; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0 4px; background: transparent; }
.cart-box .cart-item-box:first-of-type { border-top: none; }
.cart-box-opts { margin-top: 2px; }
.cart-box-ship { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); border-top: 1px dashed var(--line); padding-top: 9px; }
.cart-box-ship svg { color: var(--accent); flex-shrink: 0; }
.cart-box-ship b { margin-left: auto; color: var(--text); font-size: 13.5px; }
.cart-sep-btn { margin-top: 8px; background: transparent; border: 1px solid var(--line); color: var(--accent); font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.cart-sep-btn:hover { border-color: var(--accent); }
.cart-thumb { width: 66px; height: 66px; border-radius: 12px; background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #bbb; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-info { flex: 1; min-width: 0; }
.cart-t { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.cart-var { font-size: 12px; color: var(--accent); margin-top: 2px; }
.cart-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.cart-ship-opts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cart-ship-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); font-size: 11px; }
.cart-ship-opt b { font-size: 12px; }
.cart-ship-opt span { color: var(--text-dim); }
.cart-ship-opt.on { border-color: var(--accent); background: rgba(108,140,255,.12); color: var(--accent); }
.cart-ship-opt.on span { color: var(--accent); }
.cart-ship-one { margin-top: 7px; font-size: 12px; color: var(--text-dim); }
.cart-eta-in { color: var(--green); font-weight: 600; }
.cart-box-eta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green); font-weight: 600; }
.cart-box-eta svg { color: var(--green); flex-shrink: 0; }
.cart-qrow { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.cart-qty { display: flex; align-items: center; gap: 10px; }
.cart-qty .iconbtn { width: 32px; height: 32px; border-radius: 9px; font-size: 18px; }
.cart-qty b { min-width: 20px; text-align: center; }
.cart-line-total { font-weight: 800; font-size: 16px; }
.cart-x { align-self: flex-start; width: 34px; height: 34px; border-radius: 10px; background: transparent; border: none; color: var(--text-dim); flex-shrink: 0; }
.cart-x:active { color: var(--red); }

.cart-coupon { position: relative; margin: 14px 0 4px; }
.cart-coupon .input { padding-right: 40px; border-style: dashed; }
.cart-coupon .ck-ref-ok { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--green); }
.cart-summary { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-top: 12px; }
.cart-srow { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--text-dim); }
.cart-srow span { color: var(--text); font-weight: 600; }
.cart-srow.cart-total { font-size: 18px; font-weight: 800; color: var(--text); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 11px; }
.cart-srow.cart-total span { font-weight: 900; }
.cart-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-top: 8px; }
.cart-actions { display: flex; gap: 10px; align-items: center; margin: 14px 0 20px; }
.cart-actions .btn.ghost { flex: 0 0 auto; }
.cart-actions .btn.accent.block { flex: 1; }

.cck-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cck-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cck-item:last-child { border-bottom: none; }
.cck-it-t { color: var(--text); min-width: 0; }
.cck-it-p { font-weight: 700; flex-shrink: 0; }

.cart-grp-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: rgba(108,140,255,.16); color: var(--accent); margin-right: 6px; }

/* Acceso rápido a Pedidos/Carrito dentro de la Billetera (estilo Apple Wallet) */
.w-quick { display: flex; flex-direction: column; gap: 1px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 12px 0; }
.w-quick-row { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: transparent; border: none; color: var(--text); text-align: left; width: 100%; }
.w-quick-row + .w-quick-row { border-top: 1px solid var(--line); }
.w-quick-row:active { background: var(--panel2); }
.w-quick-ic { color: var(--accent); flex-shrink: 0; display: inline-flex; }
.w-quick-lb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.w-quick-lb b { font-size: 14.5px; font-weight: 700; }
.w-quick-lb span { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.w-quick-ch { color: var(--text-dim); flex-shrink: 0; }
@media (min-width: 1000px) { .w-quick { max-width: 100%; } }