:root {
  --bg: #0B0B0C;
  --bg2: #131315;
  --panel: #1A1A1E;
  --panel2: #232328;
  --card: #232328;
  --line: #2C2C33;
  --text: #E5E4E2;
  --text-dim: #8A8A93;
  --accent: #C9C9D2;
  --green: #E5E4E2;
  --red: #6E6E76;
  --gold: #A8A8B0;
}
* { 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; }
/* Logo del arranque (2026-08-19): la foto que mandó el jefe, montada como icono de app
   — cuadrado con esquinas suaves y sombra, para que despegue del fondo del splash. */
.splash-logo { width: 112px; height: 112px; border-radius: 26px; display: block;
  box-shadow: 0 14px 38px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); }

/* 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);
  /* SIN raya de abajo (1-sep-2026, orden del jefe: brillaba demasiado). La separación la hace
     un degradado que se desvanece hacia el contenido — se nota que hay barra, pero no hay línea
     que corte la pantalla. En PC la topbar se aplasta y ahí el degradado se apaga (más abajo). */
  border-bottom: 0; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,.028), rgba(255,255,255,0)); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; min-width: 0; flex-shrink: 1; }
/* Círculo de la CUENTA, lo primero de la barra de arriba (2026-08-19). Con la barra de
   abajo retirada, esta es la puerta a "Cuenta": foto del usuario si la tiene, si no el icono. */
.tb-acct { flex-shrink: 0; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; color: var(--text);
  background: var(--panel2); border: 1px solid var(--line);
  transition: border-color .15s ease, transform .14s cubic-bezier(.34,1.56,.64,1); }
.tb-acct svg { display: block; }
/* Con foto, la imagen llena TODO el círculo de borde a borde: fuera el aro y el fondo,
   y la foto se estira por encima del hueco que dejaba el borde (inset: -1px). */
.tb-acct.has-photo { border-color: transparent; background: none; position: relative; }
.tb-acct.has-photo img { position: absolute; inset: -1px; width: calc(100% + 2px);
  height: calc(100% + 2px); border-radius: 50%; object-fit: cover; display: block; }
.tb-acct.has-photo:hover { border-color: var(--accent); }
.tb-acct:hover { border-color: var(--accent); }
.tb-acct:active { transform: scale(.9); }
.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(147,147,150,.14); border: 1px solid rgba(147,147,150,.26); color: var(--text); font-size: 13.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; box-shadow: 0 0 16px rgba(147,147,150,.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(147,147,150,.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(147,147,150,.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(143,143,146,.22), rgba(143,143,146,.06)); border: 1.5px solid rgba(143,143,146,.55); box-shadow: 0 8px 24px rgba(143,143,146,.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: #8F8F92; 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(147,147,150,.4); }
.chip-mdl { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: #1D1D20;
  background: linear-gradient(90deg, #D7D7DA, #B6B6B9); border-color: transparent; box-shadow: 0 2px 8px rgba(182,182,185,.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%, #BABABD 0%, #565659 55%, #1E1E21 100%); }
.promo-grad-mensajero { background: radial-gradient(125% 135% at 82% 18%, #9D9DA0 0%, #47474A 55%, #161619 100%); }
.promo-grad-promotor { background: radial-gradient(125% 135% at 82% 18%, #CBCBCE 0%, #7B7B7E 55%, #1F1F22 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; }
/* Canal de WhatsApp: la portada YA trae el texto, así que nada de overlay lateral — solo un
   velo suave abajo y el botón verde centrado ("Unirme al canal"). */
.promo-card.promo-wa::after { background: linear-gradient(0deg, rgba(8,8,12,.62) 0%, rgba(8,8,12,.16) 26%, rgba(0,0,0,0) 48%); }
/* En PC la tarjeta es más ancha que la portada → el recorte se lleva la franja de arriba y cortaba
   el título de la imagen. Anclando arriba, el texto de la portada SIEMPRE se ve completo. */
.promo-card.promo-wa .promo-img { object-position: 50% 0; }
.promo-card.promo-wa .promo-tx { left: 0; right: 0; max-width: none; align-items: center; justify-content: flex-end; padding-bottom: 14px; }
.promo-card.promo-wa .promo-cta { align-self: center; margin-top: 0; background: #B8B8BB; color: #1C1C1F; box-shadow: 0 6px 20px rgba(184,184,187,.34); }
.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: #151518; 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 */
.view-notif { padding-top: env(safe-area-inset-top, 0px); }   /* Avisos sin topbar (ya no lleva botón atrás) */
/* 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). */
/* El respiro se SUMA al safe-area, nunca con max(): con max() el iPad (que reporta poco o nada
   de inset en horizontal) dejaba el menú debajo de la hora. Y aplica en todo ancho, no solo
   móvil, porque el iPad apaisado pasa de 999px. */
.db-view { padding-top: calc(14px + env(safe-area-inset-top)); }
/* Buscar + carrito del Inicio (solo móvil): un poco más arriba, más pegados al borde del banner. */
.home-top { position: absolute; top: max(4px, calc(env(safe-area-inset-top) - 6px)); 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 (Dropshipping / Nacionales / Promotores, en la pestaña Tiendas): un pelín más
   compacto para que quepan en fila. Con 2 (Internacional / Nacional) manda el estilo base. */
.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(147,147,150,.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: #151518; 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: #1C1C1F; font-size: 11px; font-weight: 900; }
.fchip-deal.on .fchip-pct { background: var(--green); color: #1C1C1F; }
/* "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), #656568); 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, #6B6B6E, #353538); }
@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(147,147,150,.14); color: var(--accent); border-color: rgba(147,147,150,.3); }
.cc-ca .catcard-ic { background: rgba(166,166,169,.14); color: var(--green); border-color: rgba(166,166,169,.3); }
.cc-mdl .catcard-ic { background: linear-gradient(135deg,#D7D7DA,#B6B6B9); color: #1D1D20; border-color: transparent; }
.cc-dig .catcard-ic { background: rgba(191,191,194,.14); color: var(--gold); border-color: rgba(191,191,194,.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(147,147,150,.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), #656568); }
.hero-green { background: linear-gradient(135deg, #8E8E91, #656568); }
.hero-red { background: linear-gradient(135deg, #959598, #A3A3A6); }
.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(12,12,15,.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(191,191,194,.94); color: #141417; 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(147,147,150,.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(149,149,152,.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(147,147,150,.12); border: 1px solid rgba(147,147,150,.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(8,8,11,.08) 30%, rgba(8,8,11,.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(147,147,150,.05); box-shadow: 0 0 0 3px rgba(147,147,150,.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(166,166,169,.1); border: 1px solid rgba(166,166,169,.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, #313134, #1D1D20); 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(147,147,150,.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(166,166,169,.14); color: var(--green); border-color: transparent; }
.cpt-badge.bad { background: rgba(149,149,152,.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; }
/* La Billetera CABE ENTERA en la pantalla (2026-08-19, orden del jefe): la vista mide lo que
   mide el teléfono y no se desplaza; lo único que se desplaza es el Historial, que se encoge
   hasta lo que sobre. Así el saldo y la tarjeta nunca se van de la vista. */
.view-wallet { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.view-wallet > .topbar { flex: 0 0 auto; }
.view-wallet .sheet { flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding-top: 14px;           /* el aire justo entre la barra y la tarjeta de Cuenta */
  padding-bottom: 10px; }
.view-wallet #w-tab-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view-wallet .cards-stack { padding-top: 0; }
.view-wallet #w-tab-body > .wcardcol { flex: 0 0 auto; }
/* El Historial ocupa lo que quede y se desplaza dentro: si hay poco sitio, enseña menos filas. */
.view-wallet #w-tx { flex: 1 1 auto; min-height: 76px; max-height: none; overflow-y: auto; }
.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, #303033, #18181B); 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, #3B3B3E, #1B1B1E); }
.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, #303033, #18181B); 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: #C0C0C3; }
.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: #E3E3E6; background: rgba(40,40,43,.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, #343437 0%, #202023 55%, #101013 100%); }
.dcard-visa { background: linear-gradient(135deg, #3B3B3E 0%, #2A2A2D 55%, #161619 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, #A3A3A6 0%, #848487 36%, #6B6B6E 66%, #404043 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(187,187,190,.55), transparent 60%),
              radial-gradient(55% 75% at 93% 16%, rgba(177,177,180,.5), transparent 60%),
              radial-gradient(75% 95% at 80% 112%, rgba(149,149,152,.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(232,232,235,.6), rgba(189,189,192,.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(147,147,150,.30) 26%, rgba(142,142,145,.42) 42%, rgba(167,167,170,.42) 56%, rgba(204,204,207,.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; }
/* "Atendido" (solicitudes de depósito Zelle) va debajo del de WhatsApp: mismo ancho y mismo
   alto que él, con un poco más de aire arriba para que no queden pegados. */
.txd-done { margin: 14px 15px 0; width: calc(100% - 30px); }

/* ── 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 la barra móvil se oculta, pero el botón de VOLVER va dentro de la ficha (.uh-backpc). */
.uh-backpc { display: none; cursor: pointer; flex: 0 0 auto; }
@media (min-width: 1000px) { .uh-topbar { display: none; } .uh-backpc { display: flex; } }
/* Balance TOTAL del usuario (billetera + tarjetas) — arriba del todo en su ficha. */
.uh-total { border: 1px solid rgba(147,147,150,.26); background: rgba(147,147,150,.10); border-radius: 16px; padding: 13px 16px; margin-bottom: 12px; }
.uh-total-lbl { display: flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.uh-total-lbl svg { color: var(--accent); }
.uh-total-val { font-size: 30px; font-weight: 800; letter-spacing: -.6px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.uh-total-brk { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; font-size: 12.5px; color: var(--text-dim); }
.uh-total-brk b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
@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, #B3B3B6); background: rgba(179,179,182,.14); }
.uh-tag.no { color: var(--red, #959598); background: rgba(149,149,152,.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; }
/* Recuperación del segundo factor: vive dentro de la caja de Identidad, separada
   por una línea para que no se confunda con los datos del carné. */
.uh-rec { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.uh-rec-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.uh-rec-p { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); margin: 6px 0 10px; }

/* Comparar el carné de antes con el de ahora. En el teléfono van uno debajo del
   otro; en PC lado a lado, que es como de verdad se comparan dos caras. */
.r2-casas { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.r2-casa { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); }
.r2-casa.si { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.r2-casa.no { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.r2-caras { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0; }
.r2-col { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.r2-col-h { font-size: 12px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.r2-fotos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.r2-fotos .uh-kyc-ph { width: 96px; }
.r2-fotos .uh-kyc-ph img { height: 72px; }
@media (min-width: 720px) { .r2-caras { grid-template-columns: 1fr 1fr; } }

/* 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, #717174);
  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(191,191,194,.13), rgba(191,191,194,.04)); border: 1px solid rgba(191,191,194,.3); }
.held-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(191,191,194,.18); color: #BFBFC2; }
.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: #BFBFC2; 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; }
/* Billetera: el saldo y el historial se pintan en la pantalla principal (2026-08-19).
   El buscador de movimientos se quitó; el historial se desplaza dentro de su caja para
   que la tarjeta y el saldo no se vayan de la pantalla al mirarlo. */
#w-tab-body > .bp-balrow { margin-top: 6px; }
#w-tab-body > .bp-mvh { margin: 18px 0 8px; }
.bp-tx--scroll { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding-right: 2px; }
/* La barra de desplazamiento, discreta (si el navegador la pinta). */
.bp-tx--scroll::-webkit-scrollbar { width: 4px; }
.bp-tx--scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.bp-tx--scroll::-webkit-scrollbar-track { background: transparent; }
/* Barra de arriba de la Billetera: solo el icono de tarjeta. */
#tb-wact { display: inline-flex; align-items: center; }
/* 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(166,166,169,.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: #757578; }
.brand-mc i:last-child { right: 0; background: #B2B2B5; 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, #CBCBCE, #949497); 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; }
/* Cartel de "tarjetas en mantenimiento" (Billetera y página de la tarjeta) */
.cards-notice { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 12px; padding: 12px 14px;
  border: 1px solid var(--gold); border-radius: 14px; background: rgba(179,179,182, .08); }
.cards-notice .cn-ic { flex-shrink: 0; color: var(--gold); font-size: 16px; line-height: 1.3; }
.cards-notice b { display: block; font-size: 13.5px; color: var(--gold); margin-bottom: 2px; }
.cards-notice span { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.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, #1B1B1E 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(147,147,150,.16), rgba(147,147,150,.035)); border: 1.5px dashed rgba(147,147,150,.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), #656568); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 20px rgba(147,147,150,.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: #0F0F12; background: linear-gradient(90deg,#DBDBDE,#C0C0C3); 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(191,191,194,.4); border-radius: 18px; padding: 15px 17px; box-shadow: 0 0 0 1px rgba(191,191,194,.1), 0 8px 22px rgba(191,191,194,.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: #C7C7CA; 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(191,191,194,.18); color: #BFBFC2; 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(147,147,150,.4); box-shadow: 0 0 0 1px rgba(147,147,150,.1), 0 8px 22px rgba(147,147,150,.08); }
.bstat.b-neg .bstat-ic { background: rgba(147,147,150,.16); color: #939396; }
.bstat.b-prod { border-color: rgba(166,166,169,.4); box-shadow: 0 0 0 1px rgba(166,166,169,.1), 0 8px 22px rgba(166,166,169,.08); }
.bstat.b-prod .bstat-ic { background: rgba(166,166,169,.16); color: #A6A6A9; }
.bstat.b-vent { border-color: rgba(163,163,166,.4); box-shadow: 0 0 0 1px rgba(163,163,166,.1), 0 8px 22px rgba(163,163,166,.08); }
.bstat.b-vent .bstat-ic { background: rgba(163,163,166,.16); color: #A3A3A6; }
.bstat.b-gan { border-color: rgba(191,191,194,.45); box-shadow: 0 0 0 1px rgba(191,191,194,.13), 0 8px 22px rgba(191,191,194,.1); }
.bstat.b-gan .bstat-n { color: #C7C7CA; }
.bstat.b-gan .bstat-ic { background: rgba(191,191,194,.18); color: #BFBFC2; }

.bdash-cta { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
/* ── Dirección de la tienda (dentro del formulario de crear/editar, solo nacionales) ── */
.cb-addr-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.cb-addr-t svg { color: var(--accent); }
.cb-addr .lpick { margin-top: 12px; }
.bdash-chart { background: var(--bg2); border: 1px solid rgba(191,191,194,.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: #C7C7CA; 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(147,147,150,.5); background: rgba(147,147,150,.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(191,191,194,.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(147,147,150,.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-prev { position: absolute; top: 12px; right: 88px; 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-prev:active { transform: scale(.88); }
.biz-prev:hover { background: rgba(0,0,0,.6); }
/* Previsualizar tienda (dentro del panel, pestaña Inicio) */
.bd-prev-btn { width: 100%; justify-content: center; gap: 8px; margin-bottom: 14px;
  background: var(--accent); color: #fff; font-weight: 700; border: none; }
.bd-prev-btn:hover { filter: brightness(1.06); }
.bd-prev-btn:active { transform: scale(.985); }
.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), #656568); color: #fff; box-shadow: 0 5px 14px rgba(147,147,150,.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(31,31,34,.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: 104px; }
  /* Barra ESTÁTICA del panel, idéntica a la principal (#tabbar): cada pestaña SIEMPRE en el
     mismo lugar, con icono + etiqueta y la activa en azul. Reemplaza al círculo de la activa +
     píldora con el resto, que reordenaba los iconos en cada toque y confundía. */
  .bizmanage .bd-tabs.bd-tabs-fix { display: flex; justify-content: space-around; align-items: flex-end;
    gap: 0; background: rgba(11,11,15,.86); backdrop-filter: blur(14px) saturate(1.7);
    -webkit-backdrop-filter: blur(14px) saturate(1.7); }
  .bd-tabs-fix .tab { font-size: 10.5px; }
  .bd-tabs-fix .bd-tab-badge { top: -3px; right: calc(50% - 20px); }
}
/* 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-fix { 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), #656568); color: #fff; box-shadow: 0 5px 14px rgba(147,147,150,.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(147,147,150,.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), #656568); color: #fff; box-shadow: 0 5px 14px rgba(147,147,150,.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(147,147,150,.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(147,147,150,.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(175,175,178,.14); color: #AFAFB2; }
.pt-badge.rev { background: rgba(185,185,188,.16); color: #B9B9BC; }
.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(147,147,150,.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(147,147,150,.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(147,147,150,.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(147,147,150,.12); border: 1px solid rgba(147,147,150,.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(124,124,127,.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(147,147,150,.14); padding: 4px 9px; border-radius: 8px; }
.vg-rm { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: none; background: rgba(149,149,152,.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(149,149,152,.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(147,147,150,.14); }
.vw-rm { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: none; background: rgba(149,149,152,.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(147,147,150,.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(147,147,150,.18), rgba(147,147,150,.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, #2B2B2E) 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(147,147,150,.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(149,149,152,.4); background: rgba(149,149,152,.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(147,147,150,.12); box-shadow: inset 0 0 0 1px rgba(147,147,150,.14); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bd-stat.green .bd-stat-ic { background: rgba(166,166,169,.14); box-shadow: inset 0 0 0 1px rgba(166,166,169,.18); color: var(--green); }
.bd-stat.gold .bd-stat-ic { background: rgba(191,191,194,.14); box-shadow: inset 0 0 0 1px rgba(191,191,194,.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); }
  /* Tiendas nacionales: el stat "Ganancia" sale (lo reemplaza el BALANCE) → quedan 3, sin hueco. */
  .bd-stats:has(> .bd-stat:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* ── Ojo de PREVISUALIZAR tienda ──────────────────────────────────────────────────────
   Sustituye al viejo botón ancho "Previsualizar tienda": solo el icono, pegado al texto
   "Inicio" (título de la cabecera en móvil, ítem del menú lateral en PC). */
.bd-eye { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text-dim);
  cursor: pointer; transition: background .14s, color .14s, transform .12s; }
.bd-eye:hover { background: rgba(255,255,255,.12); color: var(--text); }
.bd-eye:active { transform: scale(.92); }
/* El ojo va pegado a la DERECHA, A RAS con el borde de las tarjetas de abajo: los huecos
   vacíos de la cabecera (buscador/derecha) se quitan para que no lo empujen hacia adentro. */
.bd-head2.bd-head-eye { padding-right: 0; }
.bd-head2.bd-head-eye .bd-eye { margin-left: auto; }
.bd-head2.bd-head-eye > :empty { display: none; }

/* ── BALANCE de la tienda nacional (Inicio del panel) ─────────────────────────────────
   Tarjeta destacada: es dinero REAL del vendedor y desde aquí decide a dónde retirarlo. */
.bizbal { position: relative; overflow: hidden; border-radius: 20px; padding: 16px 17px 15px; margin-bottom: 12px;
  background: linear-gradient(150deg, rgba(147,147,150,.17), rgba(166,166,169,.10) 62%, rgba(255,255,255,.03));
  border: 1px solid rgba(147,147,150,.28); box-shadow: 0 10px 26px rgba(0,0,0,.26); }
.bizbal::after { content: ""; position: absolute; right: -46px; top: -60px; width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(147,147,150,.26), transparent 70%); pointer-events: none; }
.bizbal-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.bizbal-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-dim); }
.bizbal-lbl svg { color: var(--accent); }
.bizbal-mov { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 6px 8px 6px 11px;
  border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: background .14s, color .14s, transform .12s; }
.bizbal-mov:hover { background: rgba(255,255,255,.12); color: var(--text); }
.bizbal-mov:active { transform: scale(.96); }
.bizbal-amt { position: relative; z-index: 1; font-size: 34px; font-weight: 800; letter-spacing: -1.2px; margin: 9px 0 3px; }
.bizbal-sub { position: relative; z-index: 1; font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.bizbal-go { position: relative; z-index: 1; width: 100%; margin-top: 14px; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; }
.bizbal-go:disabled { opacity: .45; cursor: not-allowed; }

/* Hoja de MOVIMIENTOS del balance */
.bizmov-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px;
  border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); margin-bottom: 8px;
  font-size: 13px; color: var(--text-dim); font-weight: 600; }
.bizmov-top b { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.4px; }
.bizmov-top.pend b { color: var(--gold); }
.bizmov-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.bizmov { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.bizmov-ic { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.bizmov-ic.in { background: rgba(166,166,169,.14); color: var(--green); }
.bizmov-ic.out { background: rgba(149,149,152,.13); color: var(--red); }
.bizmov-tx { flex: 1; min-width: 0; }
.bizmov-t { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bizmov-d { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.bizmov-a { font-size: 14.5px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; }
.bizmov-a.in { color: var(--green); }
.bizmov-a.out { color: var(--red); }

/* Hoja de RETIRO del balance: destino + monto + lo que llega neto */
.wdbal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px;
  border-radius: 16px; margin-bottom: 16px; border: 1px solid rgba(147,147,150,.24);
  background: linear-gradient(135deg, rgba(147,147,150,.14), rgba(255,255,255,.03)); }
.wdbal-top-l { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.wdbal-top-v { font-size: 21px; font-weight: 800; letter-spacing: -.6px; }
.wdbal-mets { display: grid; gap: 8px; }
.wdbal-met { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 14px;
  border: 1.5px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); text-align: left;
  cursor: pointer; transition: border-color .14s, background .14s; }
.wdbal-met.on { border-color: var(--accent); background: rgba(147,147,150,.13); }
.wdbal-met:active { transform: scale(.985); }
.wdbal-met-ic { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.06); color: var(--text-dim); }
.wdbal-met.on .wdbal-met-ic { background: rgba(147,147,150,.18); color: var(--accent); }
.wdbal-met-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wdbal-met-tx b { font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.wdbal-met-tx i { font-style: normal; font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.wdbal-met-ck { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--accent); color: #fff; opacity: 0; transform: scale(.7); transition: opacity .14s, transform .14s; }
.wdbal-met.on .wdbal-met-ck { opacity: 1; transform: scale(1); }
.wdbal-amt { position: relative; display: flex; align-items: center; }
.wdbal-amt .input { padding-right: 76px; font-size: 17px; font-weight: 700; }
.wdbal-all { position: absolute; right: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(147,147,150,.16);
  color: var(--accent); font-size: 12.5px; font-weight: 800; cursor: pointer; transition: background .14s; }
.wdbal-all:hover { background: rgba(147,147,150,.26); }
.wdbal-sum { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin: 4px 0 14px; }
.wdbal-sum-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px;
  color: var(--text-dim); font-weight: 600; padding: 3px 0; }
.wdbal-sum-r b { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.wdbal-sum-r.fee b { color: var(--red); }
.wdbal-sum-r.net { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 9px; }
.wdbal-sum-r.net b { font-size: 18px; color: var(--green); }
.wdbal-sum-n { font-size: 11.5px; color: var(--text-dim); margin-top: 7px; }
/* Avisos: display BLOCK (no flex) para que el texto fluya como párrafo — con flex, cada
   nodo de texto y cada <b> se volvía una columna aparte. El icono va inline al inicio. */
.wdbal-note, .wdbal-warn { display: block; border-radius: 13px; padding: 11px 13px;
  font-size: 12.5px; line-height: 1.5; margin: 2px 0 14px; }
.wdbal-note svg, .wdbal-warn svg { vertical-align: -3px; margin-right: 6px; }
.wdbal-note { background: rgba(166,166,169,.10); border: 1px solid rgba(166,166,169,.24); color: var(--text-dim); }
.wdbal-note svg { color: var(--green); }
.wdbal-note b { color: var(--text); }
.wdbal-warn { background: rgba(191,191,194,.10); border: 1px solid rgba(191,191,194,.26); color: var(--text-dim); }
.wdbal-warn svg { color: var(--gold); }
.wdbal-warn b { color: var(--text); }
@media (min-width: 1000px) {
  /* En PC el ojo vive dentro del ítem "Inicio" del menú lateral, pegado a la derecha. */
  .bd-side-item .bd-eye { margin-left: auto; width: 28px; height: 28px; border-radius: 9px;
    background: rgba(255,255,255,.07); }
  .bd-side-item.on .bd-eye { background: rgba(255,255,255,.22); border-color: transparent; color: #fff; }
  .bizbal { padding: 18px 20px 17px; }
  .bizbal-amt { font-size: 38px; }
  .wdbal-mets { grid-template-columns: 1fr 1fr; }
}
.badge { display: inline-block; padding: 3px 10px; border-radius: 16px; font-size: 12px; font-weight: 700; }
.badge.pendiente, .badge.pagado { background: rgba(191,191,194,.16); color: var(--gold); }
.badge.completado { background: rgba(166,166,169,.16); color: var(--green); }
.badge.enviado { background: rgba(157,157,160,.16); color: var(--accent); }
.badge.cancelado { background: rgba(149,149,152,.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(147,147,150,.18), rgba(147,147,150,.05));
  border: 1px solid rgba(147,147,150,.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(166,166,169,.4); z-index: 40; }
/* Widget FLOTANTE de contactar al vendedor (pill) — solo en tiendas NACIONALES (vista de tienda). */
.store-chat-fab { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #A2A2A5; color: #fff; border: none; box-shadow: 0 8px 24px rgba(162,162,165,.45); cursor: pointer; transition: transform .15s ease, opacity .25s ease; }
.store-chat-fab svg { color: #fff; }
.store-chat-fab:active { transform: scale(.95); }
body.chat-float-on .store-chat-fab { opacity: 0; pointer-events: none; }   /* oculto mientras el chat flotante está abierto */
@media (min-width: 1000px) { .store-chat-fab { right: 22px; bottom: 22px; } }
/* Burbuja flotante de Soporte (pequeña) — se oculta al bajar, reaparece al subir */
.support-fab { position: fixed; right: 16px; bottom: calc(22px + 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(147,147,150,.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(147,147,150,0); pointer-events: none; }   /* se desvanece suave como sombra */
/* Con el buscador abierto la burbuja del chatbot estorba (queda justo encima de la barra y de lo
   que se está escribiendo) → desaparece mientras se busca y vuelve al cerrar. */
body.fsearch-on .support-fab { opacity: 0; box-shadow: none; pointer-events: none; }
/* 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), #656568); color: #fff; box-shadow: 0 5px 14px rgba(147,147,150,.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(147,147,150,.05); box-shadow: 0 0 0 3px rgba(147,147,150,.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(157,157,160,.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(177,177,180,.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(191,191,194,.13); color: var(--gold, #BFBFC2); 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(157,157,160,.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), #656568); 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(147,147,150,.32); transition: transform .12s ease, box-shadow .15s ease; }
.auth-btn:active { transform: scale(.99); box-shadow: 0 4px 12px rgba(147,147,150,.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); }
/* Depositar: los dos pasos en grande (antes eran un segmentado que se perdía). */
.dep-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.dep-step { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; }
.dep-step b { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-dim); }
.dep-step span { font-size: 16px; font-weight: 800; color: var(--text); }
.dep-step.on { border-color: var(--accent); background: linear-gradient(135deg, rgba(147,147,150,.18), rgba(147,147,150,.05)); }
.dep-step.on b { color: var(--accent); }
.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; }
/* Métodos de depósito: todas las filas de la misma altura, pase lo que pase con el texto. */
.dep-page .dep-method { min-height: 78px; }
.dep-page .dm-name, .dep-page .dm-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Cuadro de pago con tarjeta (Square) — diseño Desbloqueados ──────────────── */
.sq-pay-wrap { padding-bottom: 4px; }
.sq-total { background: linear-gradient(135deg, rgba(147,147,150,.16), rgba(147,147,150,.04)); border: 1px solid rgba(147,147,150,.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, #222225, #16161b); border: 1px solid rgba(147,147,150,.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, #D5D5D8, #A1A1A4); 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(191,191,194,.1); border: 1px solid rgba(191,191,194,.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: 32px; height: 38px; color: var(--text-dim); 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, #B1B1B4); }
.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(184,184,187,.15); color: #B8B8BB; }
/* 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(147,147,150,.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(172,172,175,.10); border: 1px solid rgba(172,172,175,.25); border-radius: 9px; font-size: 12px; }
.dlv-courier > svg { flex: 0 0 auto; color: var(--green, #B1B1B4); }
.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(147,147,150,.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(191,191,194,.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, #303033, #1C1C1F 60%, #14141a); border: 1px solid rgba(207,207,210,.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(207,207,210,.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, #CFCFD2, #A2A2A5); color: #232326; box-shadow: 0 8px 22px rgba(165,165,168,.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: #CFCFD2; }
.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(207,207,210,.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: #CFCFD2; 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: #B8B8BB !important; color: #1E1E21 !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(207,207,210,.16); color: #CFCFD2; 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: #CBCBCE; background: rgba(203,203,206,.16); border: 1px solid rgba(203,203,206,.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(147,147,150,.16), rgba(190,190,193,.1)); border: 1px solid rgba(147,147,150,.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; }
/* Resultado del sorteo cerrado: ganadores + aviso de que empieza otra vez el sábado */
.nido-results { background: linear-gradient(135deg, rgba(203,203,206,.16), rgba(190,190,193,.08)); border: 1px solid rgba(203,203,206,.34); border-radius: 16px; padding: 13px 14px 14px; margin-bottom: 14px; }
.nido-res-h { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); }
.nido-res-h svg { color: var(--gold); flex: none; }
.nido-res-h span { margin-left: auto; font-size: 11px; color: var(--text-dim); text-align: right; }
.nido-res-list { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.nido-res-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; }
.nido-res-row.me { border-color: rgba(190,190,193,.6); background: rgba(190,190,193,.1); }
.nido-res-row.extra { background: rgba(190,190,193,.08); }
.nido-res-pos { flex: none; width: 26px; height: 26px; border-radius: 9px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--text); }
.nido-res-nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; flex-direction: column; }
.nido-res-nm small { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-top: 2px; }
.nido-res-pz { flex: none; max-width: 42%; font-size: 11px; line-height: 1.35; color: var(--gold); text-align: right; }
.nido-res-again { margin-top: 12px; background: rgba(0,0,0,.3); border: 1px dashed rgba(190,190,193,.5); border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 800; color: #BEBEC1; text-align: center; }
.nido-res-note { margin-top: 8px; font-size: 10.5px; color: var(--text-dim); text-align: center; }
/* 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: #BEBEC1; }
.nido-note { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--text-dim);
  background: rgba(190,190,193,.07); border: 1px solid rgba(190,190,193,.22); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.nido-note svg { flex: 0 0 auto; margin-top: 1px; color: #BEBEC1; }
/* tarjeta de tareas con puntos */
.nido-card { background: linear-gradient(160deg, rgba(203,203,206,.10), rgba(190,190,193,.06)), var(--panel);
  border: 1px solid rgba(203,203,206,.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(190,190,193,.16); color: #BEBEC1; 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(190,190,193,.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: #CBCBCE; }
.nido-task.done-live .nido-tic { color: #BEBEC1; }
.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, #CBCBCE, #BEBEC1); 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: #BABABD; }
.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(81,81,84,.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: #BABABD; }
.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: #141417; 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 catálogo del promotor: solo Volver (izq). */
.psc-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 8px; }
.psc-toprow .back { margin: 0; }
/* "Crear catálogo": debajo del grupo portada+logo y EXACTAMENTE del mismo ancho (.cb-preview). */
.psc-go-block { display: flex; width: 100%; margin: 0; padding: 13px 18px; font-size: 15.5px; font-weight: 800; align-items: center; justify-content: center; cursor: pointer; border-radius: 14px; border: 1px solid var(--green); background: var(--green); background-image: none; color: #1E1E21; box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 40%, transparent); transition: filter .15s ease, transform .12s ease; }
.psc-go-block:hover { filter: brightness(1.06); }
.psc-go-block:active { transform: scale(.98); }
.psc-go-block:disabled { opacity: .6; cursor: default; transform: none; }
@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), #69696C); border-radius: 18px; padding: 15px 17px; margin-bottom: 15px; color: #fff; box-shadow: 0 10px 26px rgba(105,105,108,.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, #2D2D30, #1B1B1E 60%, #131316); border: 1px solid rgba(155,155,158,.28); }
.mnj-hero-glow { position: absolute; top: -70px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(155,155,158,.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, #9B9B9E, #747477); color: #fff; box-shadow: 0 8px 20px rgba(116,116,119,.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: #B7B7BA; 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: #B7B7BA; background: rgba(183,183,186,.14); border: 1px solid rgba(183,183,186,.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: #9B9B9E; }
.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(184,184,187,.15); color: #B8B8BB; }
.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(147,147,150,.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: #1C1C1F; 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(191,191,194,.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: #1C1C1F; }
.rolq-no { background: rgba(149,149,152,.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(191,191,194,.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(191,191,194,.5); box-shadow: 0 0 0 1px rgba(191,191,194,.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,#D9D9DC,#B1B1B4); 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: #BFBFC2; background: rgba(191,191,194,.16); }
.sale-pill.blue { color: #9B9B9E; background: rgba(155,155,158,.16); }
.sale-pill.accent { color: var(--accent); background: rgba(147,147,150,.16); }
.sale-pill.green { color: var(--green); background: rgba(170,170,173,.16); }
.sale-pill.red { color: #9B9B9E; background: rgba(155,155,158,.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(184,184,187,.15); color: #B8B8BB; }
.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(147,147,150,.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: #1C1C1F; }
.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: #9B9B9E; } .ord-st.green { color: var(--green); } .ord-st.red { color: #9B9B9E; } .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(147,147,150,.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(147,147,150,.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(147,147,150,.15); }
  50%     { box-shadow: 0 0 0 7px rgba(147,147,150,.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: #212124; }
.dlv-frame { position: relative; width: 100%; padding-bottom: 60.2%; /* 650/1080 */
  background: #212124 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, #2D2D30, #1D1D20); }
.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, .splash-logo { 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(166,166,169,.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(147,147,150,.10), transparent 60%),
      radial-gradient(55vw 55vh at 95% 105%, rgba(166,166,169,.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(109,109,112,.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: #A7A7AA; 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, #2F2F32 0%, #2B2B2E 55%, #16171c 100%); border: 1px solid rgba(147,147,150,.35);
  box-shadow: 0 10px 30px -12px rgba(147,147,150,.45); }
.acc-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(147,147,150,.35), transparent 70%); pointer-events: none; }
.acc-hero-lbl { font-size: 12.5px; color: #CECED1; 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), #656568); 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(147,147,150,.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: #BABABD; }
  .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(184,184,187,.14); color: #B8B8BB; border: 1px solid rgba(184,184,187,.42); font-weight: 700; }
  .pf-preview .pf-contact svg { color: #B8B8BB; }
  .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(132,132,135,.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(147,147,150,.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(147,147,150,.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(147,147,150,.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), #656568); color: #fff;
  box-shadow: 0 8px 22px rgba(147,147,150,.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(.dep-page) #tabbar,
body:has(.bizmanage) #tabbar,
body:has(.modal-ov) #tabbar,
body.no-tabbar #tabbar,
body.fsearch-on #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 */

/* ── Buscador FLOTANTE (móvil) ───────────────────────────────────────────────────────
   Ocupa el hueco del menú flotante (mismo sitio, tamaño y cristal líquido): lupa a la
   izquierda, input al medio, X a la derecha para cerrarlo y devolver el menú. */
#float-search {
  position: fixed; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 46;
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px 0 16px; border-radius: 28px;
  background: rgba(11,11,15,.92); 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);
  animation: fsIn .18s cubic-bezier(.34,1.4,.64,1);
}
@keyframes fsIn { from { transform: translateY(60%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#float-search .fs-ic { display: flex; align-items: center; color: var(--text-dim); flex-shrink: 0; }
#float-search input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none;
  color: var(--text); font-size: 16px; font-family: inherit;   /* 16px: evita el zoom automático de iOS al enfocar */
}
#float-search input::placeholder { color: var(--text-dim); }
#float-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* ── Ubicación (Mercado Nacional): provincia → municipio ─────────────────────────────
   Dropdowns nativos (en móvil abren el selector del sistema) con pinta de chip oscuro.
   Van SIEMPRE en la misma línea del buscador, nunca apilados. */
.geo-sel {
  flex-shrink: 0; height: 34px; max-width: 118px; padding: 0 24px 0 11px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
  /* flechita propia (el appearance:none quita la nativa) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 13px;
  transition: border-color .15s, background-color .15s;
}
.geo-sel:hover { border-color: rgba(255,255,255,.24); }
.geo-sel:disabled { opacity: .45; cursor: not-allowed; }
/* Con provincia/municipio elegido el chip se marca en azul: se ve que el feed está filtrado. */
.geo-sel.on { background-color: rgba(147,147,150,.16); border-color: rgba(147,147,150,.42); color: #fff; }
.geo-sel option { background: #14141a; color: var(--text); }
/* En la barra flotante los chips son algo más pequeños: todo tiene que caber en una línea. */
#float-search .geo-sel { height: 34px; max-width: 96px; font-size: 12px; padding: 0 21px 0 9px; background-size: 12px; }
#float-search.has-geo { padding-left: 12px; gap: 7px; }
#float-search.has-geo input { min-width: 44px; font-size: 15px; }
#float-search .fs-x {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--text);
  display: grid; place-items: center; transition: transform .15s, background .15s;
}
#float-search .fs-x:active { transform: scale(.88); background: rgba(255,255,255,.14); }
/* En PC manda el nav superior: el buscador flotante no existe. */
@media (min-width: 1000px) { #float-search { display: none; } }
/* 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), #656568); box-shadow: 0 6px 18px rgba(147,147,150,.28); }
.btn.accent:active { box-shadow: 0 3px 10px rgba(147,147,150,.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(147,147,150,.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), #656568); color: #fff; border-color: transparent; box-shadow: 0 5px 16px rgba(147,147,150,.34); }

/* ── Tarjeta de billetera con brillo premium ───────────────────────────────── */
.wallet-card { position: relative; overflow: hidden; background-image: linear-gradient(135deg, #313134 0%, #1E1E21 60%, #161619 100%); }
.wallet-card::before { content: ""; position: absolute; top: -60%; right: -20%; width: 70%; height: 200%;
  background: radial-gradient(circle, rgba(147,147,150,.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(174,174,177,.4)); }
.pubok-ring svg { width: 100%; height: 100%; }
.pubok-c { fill: none; stroke: #AEAEB1; 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: #AEAEB1; 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(191,191,194,.34); border-radius: 16px; cursor: pointer; text-align: left; color: inherit; font: inherit; overflow: hidden;
  background: linear-gradient(135deg, rgba(56,56,59,.62), rgba(23,23,26,.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(191,191,194,.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(191,191,194,.14), transparent 55%); }
.id-prompt:hover { border-color: rgba(191,191,194,.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(191,191,194,.26), rgba(191,191,194,.1)); color: #CCCCCF;
  box-shadow: inset 0 0 0 1px rgba(191,191,194,.34), 0 4px 12px rgba(191,191,194,.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: #131316; background: linear-gradient(135deg, #CCCCCF, #B1B1B4); padding: 7px 12px 7px 13px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(191,191,194,.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: #BFBFC2; background: rgba(191,191,194,.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: #F1F1F4;
  background: linear-gradient(140deg, #2B2B2E 0%, #212124 45%, #1B1B1E 100%);
  border: 1px solid rgba(217,217,220,.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, #333336 0%, #252528 45%, #1B1B1E 100%); }
.idcard-real { background-image: linear-gradient(to top, transparent 40%, rgba(0,0,0,.32) 52%, transparent 68%), linear-gradient(140deg, #2B2B2E 0%, #212124 45%, #1B1B1E 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: #F1F1F4; }
.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(217,217,220,.35);
  display: flex; align-items: center; justify-content: center; color: rgba(217,217,220,.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(12,12,15,.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: #B7B7BA; 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: #E3E3E6; 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: #B2B2B5; 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, #333336 0%, #252528 45%, #1B1B1E 100%); color: #F1F1F4; }
.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, #939396, #8E8E91, #A7A7AA, #D8D8DB, #CCCCCF, #939396);
  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: #B7B7BA; 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(217,217,220,.35); background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; color: rgba(217,217,220,.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: #B7B7BA; }
.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: #E3E3E6; opacity: .92; }

/* Overlay del carné en grande (al tocar la tarjeta de identidad) */
.idview-sheet { width: 100%; max-width: 480px; background: var(--card, #18181B); 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, #18181B);
  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: #B2B2B5; 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, #959598); 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(149,149,152,.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), #8A8A8D);
  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), #8A8A8D); }
.card-status.pendiente { background: linear-gradient(135deg, #BFBFC2, #9C9C9F); color: #131316; }
.card-status.cancelado { background: linear-gradient(135deg, #959598, #6A6A6D); }
.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(31,31,34,.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, #303033, #151518); 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(147,147,150,.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, #CFCFD2, #8F8F92); 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. */
/* Toggle Internacional / Nacional del tablero de PEDIDOS (Database). */
.db-ord-toggle { display: flex; gap: 8px; padding: 4px 12px 12px; }
.dbot { flex: 1; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text-dim); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: all .15s; }
.dbot b { background: rgba(255,255,255,.08); border-radius: 20px; padding: 1px 8px; font-size: 12px; }
.dbot.on { background: rgba(147,147,150,.14); border-color: var(--accent); color: var(--text); }
.dbot.on b { background: var(--accent); color: #fff; }
.prod-board { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 18px; }
/* En PC el contenedor .sheet ya aporta los 30px laterales: el tablero va a 0 para quedar
   alineado exactamente con la barra de pestañas y los botones de arriba. */
@media (min-width: 1000px) { .db-view .prod-board { padding-left: 0; padding-right: 0; } }
.pb-col { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 8px;
  display: flex; flex-direction: column; min-height: 0; }
/* PC: las 3 columnas en fila, compactas y organizadas (estilo Tetris), con arrastre entre ellas. */
@media (min-width: 1000px) {
  /* Las columnas se estiran hasta el borde de abajo del tablero (la altura la fija _boardFit).
     Sin padding abajo: el tablero tiene que MORIR en el borde de la pantalla, no antes. */
  .prod-board { flex-direction: row; align-items: stretch; gap: 12px; padding-bottom: 0; }
  /* La vista con tablero no reserva la franja de la barra inferior (esa es cosa del teléfono). */
  .view.db-view.con-tablero { padding-bottom: 0 !important; }
  .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(145,145,148,.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, #9D9DA0); } .pb-col-h.enviado { color: #9D9DA0; }
/* Tarjeta de transacción en el tablero de trabajo (texto + monto a la derecha). */
.pb-card-tx2 { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; cursor: pointer; }
/* Fecha y hora: línea propia al pie de la tarjeta. */
.pb-card-date { flex: 0 0 100%; font-size: 10.5px; color: var(--text-dim); opacity: .8; margin-top: 2px; font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .pb-card-tx2 { cursor: grab; } }
/* "+N más": cuántos usuarios quedan fuera de la columna del tablero (no se ocultan en silencio) */
.pb-more { margin: 8px 2px 2px; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 10px;
  font-size: 11.5px; color: var(--text-dim); text-align: center; }
.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); }
/* Las tarjetas se desplazan DENTRO de la columna: ninguna columna se hace infinita hacia abajo.
   En PC la columna llega hasta el borde inferior; en el teléfono, con las columnas apiladas, el
   tope es una pantalla escasa para que se vean las demás columnas sin scroll eterno. */
.pb-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 44px;
  flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 999px) { .pb-col-body { max-height: 62vh; } }
.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, #88888B, #A0A0A3); 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(136,136,139,.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; }
/* Ubicación (municipio, provincia) en las tarjetas del mercado NACIONAL: entre el nombre y el precio. */
.card-loc { display: flex; align-items: center; gap: 3px; color: var(--text-dim); font-size: 11.5px; font-weight: 500; margin: 3px 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-loc svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .8; }
/* 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, #88888B, #A0A0A3); 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: #939396; font-size: 11px; font-weight: 700; }
.card-offer-left svg { stroke: #939396; }
/* 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: #C0C0C3; }
/* 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(147,147,150,.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(147,147,150,.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(166,166,169,.18); color: var(--green); }
.badge-pill.top { background: rgba(191,191,194,.18); color: var(--gold); }
.badge-pill.mensajero { background: rgba(147,147,150,.18); color: var(--accent); }
.badge-pill.cajero { background: rgba(172,172,175,.16); color: var(--green, #B1B1B4); }
.badge-pill.promotor { background: rgba(194,194,197,.18); color: #C2C2C5; }
/* Baneado (shadowban): rojo, para que salte a la vista en la lista y en la ficha del usuario */
.badge-pill.baneado { background: rgba(149,149,152,.18); color: var(--red); }
/* Botón de banear en la ficha del usuario (junto a Transacción / WhatsApp) */
.uh-act.danger { color: var(--red); border-color: rgba(149,149,152,.45); }
.uh-act.go { color: var(--green); border-color: rgba(166,166,169,.45); }
.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(191,191,194,.95); color: #202023; 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(191,191,194,.18); color: var(--gold); }
.uc-tag.admin { background: rgba(147,147,150,.18); color: var(--accent); }
.uc-tag.gestor { background: rgba(166,166,169,.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(166,166,169,.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(147,147,150,.14), 0 0 34px rgba(147,147,150,.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(147,147,150,.55), rgba(147,147,150,0) 40%, rgba(147,147,150,0) 60%, rgba(147,147,150,.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(147,147,150,.22), rgba(147,147,150,.05) 70%); border: 1px solid rgba(147,147,150,.28); border-radius: 18px; padding: 16px; margin: 0 0 16px; box-shadow: 0 0 24px rgba(147,147,150,.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(147,147,150,.16); border: 1px solid rgba(147,147,150,.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(147,147,150,.12); box-shadow: inset 0 0 0 1px rgba(147,147,150,.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: #1C1C1F; 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(149,149,152,.1); color: var(--red); border: 1px solid rgba(149,149,152,.28); font-weight: 700; font-size: 15px; }
.pf2-danger:active { background: rgba(149,149,152,.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(19,19,22,.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, #A7A7AA, #656568); box-shadow: 0 14px 36px rgba(147,147,150,.65); animation: sfxcoin 1.15s cubic-bezier(.3,.7,.25,1) forwards; }
.sfx-coin svg { stroke: #0F0F12; }
@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(166,166,169,.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 (#29292C). 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: #29292C; 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: #2A2A2D; 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: #29292C; min-height: 0; }
.chat-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #29292C; 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(12,12,15,.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: #111114; border: 2px solid var(--panel); }
.cb-cam-logo svg { stroke: #111114; }
.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(147,147,150,.045); color: var(--accent); cursor: pointer; transition: background .15s, transform .12s; }
.card.add-card:hover { background: rgba(147,147,150,.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(147,147,150,.16), rgba(101,101,104,.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(147,147,150,.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: #111114; 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(147,147,150,.1); border: 1px solid rgba(147,147,150,.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(147,147,150,.28), transparent 55%),
              radial-gradient(120% 140% at 100% 100%, rgba(191,191,194,.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(147,147,150,.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(147,147,150,.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(147,147,150,.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(149,149,152,.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(147,147,150,.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(147,147,150,.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(147,147,150,.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: #0F0F12; 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, #606063 0%, #99999C 60%, #B2B2B5 100%); border-radius: 20px; overflow: hidden; color: #fff; box-shadow: 0 12px 30px rgba(89,89,92, .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: #F0F0F3; }
/* Tarjeta de casillero (móvil): etiqueta arriba + valor a TODO el ancho (dirección no se parte) */
.lk-acard { padding: 10px 14px 5px; }
/* Filas agrupadas (Nombre+Teléfono, Ciudad/Estado/Zip): sin borde superior y más compactas para bajar el alto del bloque. */
.lk-acard > div[style*="flex"] .lk-arow { border-top: none; padding: 6px 2px; }
.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: #0F0F12; 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(166,166,169,.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, #151518, #1E1E21 55%, #121215); border: 1px solid rgba(147,147,150,.35); border-radius: 13px; margin-bottom: 12px; overflow: hidden; }
/* Ksillero: la tabla de tarifas iba en azul marino y desentonaba con el resto (orden del
   jefe, 2026-08-21). Se queda en el gris oscuro de las demas tarjetas, igual que en movil. */
body.tema-ksillero .lk-tarwrap.lk-banner { background: var(--bg2); border-color: var(--line); }
.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, #939396, #B5B5B8); -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(147,147,150,.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: #DFDFE2; }
.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(208,208,211,.16), rgba(208,208,211,.05)); }
.lk-tar-exp .lk-tar-ic { color: #C0C0C3; }
.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: #C0C0C3; flex: 0 0 auto; }
/* Laptops + Celulares: tarifa plana con el mismo diseño de la tabla (icono · texto · precio), 2 en una línea. */
/* Mismas medidas que las filas de la tabla de arriba (fondo, padding, interlineado y ancho) para que se vea una sola tabla. */
.lk-tar-flat2 { display: flex; gap: 4px; margin: 4px 0 0; }
.lk-tar-flatcell { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.055); line-height: 1.14; }
.lk-tar-flatcell .lk-tar-ic { color: var(--accent); flex: 0 0 auto; margin: 0; }
.lk-tar-flatn { font-weight: 700; font-size: 11.5px; flex: 1; white-space: nowrap; }
.lk-tar-flatp { font-weight: 800; font-size: 14.5px; }
.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: #0F0F12; 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; }
/* Fotos EXTRA del paquete (un paquete puede tener varias imágenes): tira deslizable de miniaturas */
.lk-pkg-morph { display: flex; gap: 7px; margin-top: 9px; overflow-x: auto; scrollbar-width: none; }
.lk-pkg-morph::-webkit-scrollbar { display: none; }
.lk-pkg-morph img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; cursor: pointer; background: var(--bg2); }
.lk-pkinfo-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lk-pkinfo-gal img { width: 100%; aspect-ratio: 1; border-radius: 11px; object-fit: cover; border: 1px solid var(--line); cursor: pointer; background: var(--bg2); }

/* 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: #0F0F12; border: none; border-radius: 28px; padding: 13px 20px; font: inherit; font-weight: 800; font-size: 15px; box-shadow: 0 8px 24px rgba(147,147,150,.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: #B8B8BB; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(184,184,187,.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(184,184,187,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: #B8B8BB; 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: #0F0F12; 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; }
/* Cajas del casillero (armadas por la bodega): una tarjeta por caja, con su cabecera y botón de pagar. */
.lk-boxcard { margin-bottom: 12px; }
.lk-boxcard:last-child { margin-bottom: 0; }
.lk-boxhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lk-boxhead b { font-size: 15px; font-weight: 800; }
.lk-boxhead span { font-size: 12.5px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.lk-boxkind { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); margin: 10px 0 2px; }
.lk-boxkind svg { flex: 0 0 auto; }
.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(148,148,151,.18), transparent 60%),
  linear-gradient(180deg, #111114 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(145,145,148,.06); }
.mdl-tbl tr.adv td { background: rgba(171,171,174,.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(171,171,174,.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(171,171,174,.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(14,14,17,.18) 0%, rgba(12,12,15,.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(215,215,218,.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: #D7D7DA; margin: 4px 0 12px; text-shadow: 0 2px 18px rgba(0,0,0,.6), 0 0 30px rgba(215,215,218,.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, #D7D7DA, #B6B6B9); 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, #D7D7DA, #B6B6B9); color: #1D1D20; box-shadow: 0 6px 16px rgba(182,182,185,.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: #E5E5E8; 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: #D7D7DA; }
.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: #D7D7DA; background: rgba(215,215,218,.16); color: #D7D7DA; box-shadow: 0 5px 16px rgba(215,215,218,.22); }
.mdl-pick.on span { color: #D7D7DA; }
@media (hover: hover) { .mdl-pick:hover { border-color: rgba(215,215,218,.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, #D7D7DA, #B6B6B9); color: #1D1D20; }
.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: #D7D7DA; }
.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(179,179,182,.18); color: #C6C6C9; }
.mdl-tag.lose { background: rgba(155,155,158,.15); color: #A9A9AC; }
.mdl-tag.pend { background: rgba(215,215,218,.15); color: #D7D7DA; }
.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, #6C6C6F 0%, #525255 50%, #1D1D20 130%);
  box-shadow: 0 6px 18px rgba(104,104,107,.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, #D7D7DA, #B6B6B9); color: #1D1D20; 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: #E5E5E8; }
.mdl-banner-cta { background: #D7D7DA; color: #1D1D20; 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: #1D1D20; 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: #939396; }
.mdl-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #88888B; display: inline-block;
  box-shadow: 0 0 0 0 rgba(136,136,139,.6); animation: mdlPulse 1.4s infinite; }
@keyframes mdlPulse { 0% { box-shadow: 0 0 0 0 rgba(136,136,139,.55); } 70% { box-shadow: 0 0 0 7px rgba(136,136,139,0); } 100% { box-shadow: 0 0 0 0 rgba(136,136,139,0); } }
.mdl-match.is-live { border-color: rgba(136,136,139,.45); box-shadow: 0 0 0 1px rgba(136,136,139,.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(136,136,139,.15); color: #9B9B9E; 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(215,215,218,.13); color: #D7D7DA; }
.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: #D7D7DA; }
.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: #D7D7DA; }

/* Casillero — resaltar que el exprés no tiene mínimo */
.lkb-row.lkb-express { background: linear-gradient(90deg, rgba(215,215,218,.12), rgba(215,215,218,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: #1D1D20; background: linear-gradient(90deg, #D7D7DA, #B6B6B9); padding: 2px 7px; border-radius: 20px; vertical-align: middle; }
.lkb-note { font-size: 11.5px; color: #DCDCDF; margin: 8px 2px 2px; line-height: 1.4; }
.lkb-note b { color: #E5E5E8; }

/* 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(147,147,150,.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), #6C6C6F); 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(141,141,144,.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), #6C6C6F); 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,#77777A,#909093); 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;
  transform-origin: top left; will-change: transform, height; }
/* 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; }

/* ── Chat como WIDGET flotante en PC (tamaño teléfono, abajo a la derecha) ────────────────
   En ≥1000px el .sup-view (Soporte y Buscador con IA) se monta dentro de #chat-float-host:
   un panel fijo tamaño teléfono en la esquina, dejando la página visible detrás. */
@media (min-width: 1000px) {
  #chat-float-host {
    position: fixed; right: 22px; bottom: 22px; z-index: 65;
    width: 400px; height: min(680px, calc(100dvh - 90px));
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px var(--line);
    animation: chatFloatIn .22s cubic-bezier(.34,1.35,.64,1);
  }
  #chat-float-host .sup-view { position: absolute; inset: 0; z-index: auto; border-radius: inherit; }
  /* La burbuja de soporte se esconde mientras el panel está abierto (evita que se solapen). */
  body.chat-float-on #support-fab { opacity: 0; pointer-events: none; }
  /* Con el widget montado NO tomamos el fondo del body: la página de atrás conserva su color. */
  body.chat-float-on, body.chat-float-on #app { background: var(--bg) !important; }
}
@keyframes chatFloatIn { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.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 .sup-drawer-x { transform: scaleX(-1); }   /* la equis del cajón es la flecha al revés */
.sup-back2 { display: none; }                               /* solo se usa en PC (menú lateral fijo) */
.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; }
/* ── PC: el centro de ayuda es un MENÚ LATERAL fijo (no un cajón) ──────────────────────────────
   El soporte va a pantalla completa: columna izquierda = preguntas frecuentes siempre a la vista,
   columna derecha = cabecera + conversación + caja de escribir. */
@media (min-width: 1000px) {
  .sup-view.sup-side { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .sup-side .sup-drawer { position: static; transform: none; width: auto; min-height: 0; grid-column: 1; grid-row: 1 / -1;
    box-shadow: none; transition: none; z-index: auto; }
  /* El botón de VOLVER vive aquí, justo detrás del título "Preguntas frecuentes" (pedido del jefe):
     en PC ya no está en la cabecera del chat. */
  .sup-side .sup-drawer-head { padding: 18px 16px; justify-content: flex-start; gap: 10px; }
  .sup-side .sup-drawer-x { display: none; }               /* nada que cerrar: el menú vive ahí */
  .sup-side .sup-back2 { display: inline-flex; }
  .sup-side .sup-drawer-ov { display: none; }
  .sup-side .sup-help-btn { display: none; }               /* el botón "?" sobra con el menú a la vista */
  .sup-side .sup-top > #sup-back { display: none; }        /* el atrás del chat se mudó al menú */
  .sup-side .sup-top { grid-column: 2; grid-row: 1; }
  .sup-side .sup-msgs { grid-column: 2; grid-row: 2; min-height: 0; }
  .sup-side .lkchat-chips { grid-column: 2; grid-row: 3; }
  .sup-side .sup-compose { grid-column: 2; grid-row: 4; }
}
.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); }
/* Asistente de IA: el avatar es un bot, no las iniciales de una persona inventada. */
.sup-av.bot { background: linear-gradient(135deg, #848487, #B1B1B4); }
.sup-av.bot svg { width: 22px; height: 22px; }
.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;
  /* Fondo oscuro neutro (2026-08-19, orden del jefe): se retiró el mural de candados con
     el logotipo, que competía con los mensajes. */
  background: var(--bg); }
.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; } }
/* Caja de escribir: el respiro de abajo se SUMA a la zona segura. Con `max()` el campo quedaba
   pegado al borde (o a la barra de gestos de Android) y costaba tocarlo. */
/* El pie del chat iba muy alto: sumaba 16px al área segura y quedaba un
   colchón enorme debajo del campo. */
/* El aire de abajo lo pone el JS en --sup-bot: lo MIDE en el aparato (el iPhone reporta un
   safe-area enorme y el APK de Android reporta 0 aunque tenga barra de gestos). El valor del
   calc() es solo el respaldo por si el JS no llegó a correr. */
.sup-compose { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px var(--sup-bot, calc(env(safe-area-inset-bottom, 0px) * .5 + 8px));
  background: var(--bg2); border-top: 1px solid var(--line); }
.sup-view.kb .lkchat-chips { display: none; }
.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; }
/* El avión de papel tiene el peso hacia la punta: se corre un pelo para verse centrado. */
.sup-send svg { transform: translateX(-1px); }
.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: #BEBEC1; }
.sup-rate-ok { font-size: 12.5px; color: var(--green); margin-top: 8px; }

/* ── Chat NATIVO de tienda ── */
.sc-who { display: block; font-size: 10.5px; font-weight: 700; opacity: .75; margin-bottom: 2px; }
/* En el widget del COMPRADOR, los mensajes del VENDEDOR (izquierda) se tiñen de verde para diferenciarlos de la IA. */
.store-chat-view .sup-row.them .sup-bub.seller { background: #515154; color: #FAFAFD; }
/* Panel de CHAT del VENDEDOR: lista de conversaciones. */
.sc-list { display: flex; flex-direction: column; }
.sc-conv { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: none; border: none; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; width: 100%; color: var(--text); }
.sc-conv:hover { background: var(--panel); }
.sc-conv-av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.sc-conv-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-conv-tx b { font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.sc-conv-tx small { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-esc { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 20px; padding: 1px 7px; }
.sc-conv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.sc-conv-when { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.sc-conv-badge { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px; min-width: 20px; height: 20px; padding: 0 6px; display: flex; align-items: center; justify-content: center; }
/* Hilo de una conversación (vendedor responde). */
.sc-thread { display: flex; flex-direction: column; height: 68vh; min-height: 380px; }
.sc-th-head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 12px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.sc-th-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 2px; }
.sc-th-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.sc-th-compose textarea { 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; }

/* ── Buscador con IA (la lupa del Inicio): chat de búsqueda + compra asistida ── */
.shop-av { background: linear-gradient(135deg, #939396, #808083) !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; 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); }
  body:has(.sup-view) #pc-topnav { display: none !important; }
  .tn-bell { position: relative; }
  .tn-bell .cart-badge { position: absolute; top: 2px; right: 2px; }
  /* Buscador del nav (PC): input tradicional siempre visible (antes era un círculo que abría el
     chat con IA). Se ensancha al enfocarlo. */
  .tn-search { display: flex; align-items: center; gap: 8px; width: 230px; height: 40px; padding: 0 14px;
    border-radius: 999px; background: var(--bg2); border: 1px solid var(--line);
    transition: width .18s ease, border-color .15s, background .15s; }
  .tn-search:hover { border-color: rgba(255,255,255,.22); }
  .tn-search:focus-within { width: 320px; border-color: rgba(147,147,150,.55); background: rgba(147,147,150,.07); }
  .tn-search svg { color: var(--text-dim); flex-shrink: 0; }
  .tn-search input { flex: 1; min-width: 0; border: none; outline: none; background: none;
    color: var(--text); font-size: 14px; font-family: inherit; }
  .tn-search input::placeholder { color: var(--text-dim); }
  .tn-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  /* Mercado NACIONAL: provincia → municipio, en la MISMA línea del buscador. */
  .tn-geo { display: flex; align-items: center; gap: 6px; }
  .tn-geo .geo-sel { height: 40px; max-width: 148px; font-size: 13px; padding: 0 26px 0 13px; }   /* en PC hay sitio: cabe "La Habana" sin cortar */
  /* Con la ubicación al lado, el input al enfocarse crece menos (para que todo siga en una línea). */
  .tn-icons:has(.tn-geo) .tn-search { width: 200px; }
  .tn-icons:has(.tn-geo) .tn-search:focus-within { width: 250px; }
  .tn-wallet { width: auto; padding: 0 14px; gap: 7px; background: rgba(147,147,150,.14);
    border-color: rgba(147,147,150,.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), #656568); }
  .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; }
  /* Excepción: los apartados de la pestaña Tiendas (Dropshipping/Nacionales/Promotores) SÍ van en
     PC — el nav superior solo tiene el enlace "Tiendas", sin sus apartados. */
  #biz-tabs { display: block; max-width: 620px; margin: 10px auto 4px; padding-top: 0; }
  .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(147,147,150,.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(147,147,150,.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(147,147,150,.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; }
}

/* Soporte en PC: ya NO es un enlace del nav superior, sino la MISMA burbuja flotante que en móvil,
   abajo a la derecha (solo en Inicio, lo maneja mountSupportBubble). Su posición PC = bottom/right 22px. */

/* ── 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; }
/* PC: Ciudad · Estado · Zip code en UNA sola línea (como en móvil) → tarjeta más baja y pareja
   con el bloque de tarifas de al lado. */
.lk-crow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgba(255,255,255,.08); }
.lk-crow3 .lk-cc { padding: 9px 14px; cursor: pointer; min-width: 0; }
.lk-cc-l { font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.lk-cc-v { display: flex; align-items: center; gap: 7px; margin-top: 2px; min-width: 0; }
.lk-cc-v > span:first-child { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 1000px) {
  /* Dos columnas (tarifas+casillero | listas) piden más ancho que el diseño de una sola línea. */
  #lk-body { max-width: 1280px; 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; }
/* PC (pedido del jefe, 2026-08-05): DOS COLUMNAS. A la IZQUIERDA, una sobre otra, el bloque de
   TARIFAS y debajo la INFORMACIÓN DEL CASILLERO; a la DERECHA, el menú (En el casillero / En camino
   / Historial) con sus listas. Antes tarifas y dirección iban en una línea y las listas debajo. */
@media (min-width: 1000px) {
  .lk-bento { grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "addr pkgs" "how pkgs";
    gap: 16px 20px; align-items: start; }
  .lk-b-addr { grid-area: addr; display: flex; flex-direction: column; gap: 16px; }
  .lk-b-addr > * { margin-bottom: 0 !important; }
  .lk-b-addr .lk-tarwrap { display: flex; flex-direction: column; }
  .lk-b-addr .lk-banner-body { display: flex; flex-direction: column; padding: 11px; }
  /* Laptops y Celulares: los dos en UNA fila debajo de la tabla de tarifas. */
  .lk-b-addr .lk-tar-flat2 { margin-top: 4px; }
  .lk-b-addr .lk-tar-flatcell { align-items: center; }
  .lk-b-addr .lk-addr-card { display: flex; flex-direction: column; }
  .lk-b-pkgs { grid-area: pkgs; min-width: 0; }
  .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. En móvil y también en PC. */
.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(147,147,150,.6); }
/* Cada sección: se ve solo la pestaña activa (móvil y PC). */
.lk-seg { display: none; }
.lk-seg.on { display: block; }

/* Miniaturas de los paquetes DENTRO de la tarjeta del envío (arriba de la línea de flujo). */
.lk-shppk { display: flex; gap: 5px; overflow-x: auto; margin: 9px 0 2px; padding-bottom: 3px; scrollbar-width: none; }
.lk-shppk::-webkit-scrollbar { height: 3px; }
.lk-shppk::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.lk-shppk img, .lk-shppk-no { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--line); background: var(--panel); }
.lk-shppk-no { display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); }

/* Lista de paquetes del envío (popup): tira horizontal con foto cuadrada + ID + libras. */
.lk-pkstrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.lk-pkmini { flex: 0 0 104px; width: 104px; }
.lk-pkmini img, .lk-pkmini-no { width: 104px; height: 104px; border-radius: 12px; object-fit: cover; display: block;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.lk-pkmini-no { display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.lk-pkmini b { display: block; font-size: 12.5px; font-weight: 700; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-pkmini span { display: block; font-size: 11.5px; color: var(--text-dim); }

/* ── PC: tira HORIZONTAL de cajas (tarjetas cuadradas) ─────────────────────────────────────── */
.lk-hstrip { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
.lk-hstrip::-webkit-scrollbar { height: 8px; }
.lk-hstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
.lk-hstrip::-webkit-scrollbar-track { background: transparent; }
.lk-bsq { flex: 0 0 232px; width: 232px; aspect-ratio: 1 / 1; scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; padding: 0; cursor: pointer;
  color: var(--text); font: inherit; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.lk-bsq:hover { transform: translateY(-2px); border-color: rgba(147,147,150,.5); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.lk-bsq-pics { flex: 1 1 auto; min-height: 0; display: grid; gap: 2px; background: var(--panel); grid-template-columns: 1fr 1fr; }
.lk-bsq-pics.n1 { grid-template-columns: 1fr; }
.lk-bsq-pics.n3 span:first-child { grid-row: span 2; }
.lk-bsq-pics span { background-size: cover; background-position: center; display: block; }
.lk-bsq-pics.none { display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.lk-bsq-body { flex: 0 0 auto; padding: 9px 11px 11px; }
.lk-bsq-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lk-bsq-top b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-bsq-lb { font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.lk-bsq-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.lk-bsq-m { display: inline-flex; align-items: center; gap: 3px; }
.lk-bsq-m svg { width: 12px; height: 12px; }
.lk-bsq-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.lk-bsq-tot { font-size: 16px; font-weight: 800; }
.lk-bsq-cta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--accent); }
.lk-bsq-warn { font-size: 12px; font-weight: 700; color: var(--gold); }
.lk-boxsheet .lk-boxcard { border: none; background: none; padding: 0; margin: 0; }
.lk-boxsheet .btn.accent.lk-paybtn { width: 100%; margin: 16px 0 0; border-radius: 12px; padding: 15px 16px; font-size: 15.5px; }

@media (min-width: 1000px) {
  /* El menú de pestañas TAMBIÉN en PC (antes solo móvil): así el bloque de cajas queda debajo. */
  .lk-b-pkgs .lk-pkpanel { padding: 14px 14px 6px; }
  /* En camino / Historial: mismas tarjetas, en tira horizontal cuadrada. */
  #lk-encaminolist, #lk-histlist { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
  #lk-encaminolist > .shp-card, #lk-histlist > .shp-card { flex: 0 0 268px; width: 268px; aspect-ratio: 1 / 1;
    margin-bottom: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
  #lk-encaminolist > .shp-card .lk-shpflow, #lk-histlist > .shp-card .lk-shpflow { margin-top: auto; }
  /* Con miniaturas de paquetes, el hueco va ANTES de ellas: quedan pegadas a la línea de flujo. */
  #lk-encaminolist > .shp-card .lk-shppk, #lk-histlist > .shp-card .lk-shppk { margin-top: auto; }
  #lk-encaminolist > .shp-card .lk-shppk + .lk-shpflow, #lk-histlist > .shp-card .lk-shppk + .lk-shpflow { margin-top: 10px; }
}

/* 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(147,147,150,.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(194,194,197,.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::after { display: none !important; }
  .topbar .brand, .topbar .brand-tx, .topbar .brand-ic { display: none !important; }
  /* El título que acompaña al botón de atrás (Depósito, Retiro, Operación…) también sobra en PC:
     se colaba encima del nav fijo, arriba a la izquierda. */
  .topbar .tb-title { 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; }
  /* El "Volver" de Notificaciones usa la clase .tb-back (no .back): en PC sobra (ya está el nav). */
  .topbar .tb-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; }
  /* En el flujo aislado no hay nav que diga dónde estás: ahí el título SÍ hace falta. */
  body.apply-iso .topbar .tb-title { display: inline !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; }
  /* EXCEPCIÓN: la ficha de la tarjeta recargable pone congelar y "ver datos" en esta barra;
     si se aplasta a 16px con overflow oculto, los botones desaparecen. */
  .topbar.topbar-rc { height: auto !important; overflow: visible !important;
    padding: 0 0 12px !important; justify-content: flex-end; }
  .topbar.topbar-rc .rc-tb-acts .iconbtn { display: inline-flex !important;
    width: 40px !important; height: 40px !important; flex: 0 0 40px; }
  /* La tarjeta mide lo mismo que el bloque del saldo; a pantalla completa quedaría
     descomunal, así que en PC la ficha entera va centrada y con ancho de columna. */
  .rc-sheet, .topbar.topbar-rc { max-width: 560px; margin-left: auto; margin-right: auto; }
  /* En PC el fondo del chat es el mismo oscuro neutro que en móvil. */
  .sup-msgs { background: var(--bg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   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(147,147,150,.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-sub-wrap--tb { padding-top: 0; }   /* con barra propia ya no hace falta el hueco del notch */

/* ── Cuenta: la foto y el nombre, arriba del todo (2026-08-19) ────────────────
   La foto se toca y abre el selector de archivo; el nombre se toca y abre su hoja.
   "Cambiar nombre" y "Cambiar PIN" salieron del bloque de abajo. */
/* El círculo de la foto nacía pegado a la barra de "Cuenta" (se veía feo en el iPad, donde la
   barra va fija arriba). Lleva su propio aire por arriba. */
.acct-id { display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 0 20px; }
.acct-id-photo { position: relative; width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center; overflow: visible; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text-dim);
  transition: border-color .15s ease, transform .14s cubic-bezier(.34,1.56,.64,1); }
/* Igual que el circulito de arriba: con foto no se ve aro ni fondo, la imagen ocupa
   la circunferencia completa. La chapita de la cámara sigue asomando por fuera. */
.acct-id-photo.has-photo { border-color: transparent; background: none; }
.acct-id-photo img { position: absolute; inset: -1px; width: calc(100% + 2px);
  height: calc(100% + 2px); border-radius: 50%; object-fit: cover; display: block; }
.acct-id-photo.has-photo:hover { border-color: var(--accent); }
.acct-id-ph { display: grid; place-items: center; }
.acct-id-photo:hover { border-color: var(--accent); }
.acct-id-photo:active { transform: scale(.96); }
.acct-id-photo.cargando { opacity: .55; pointer-events: none; }
/* Chapita de la cámara, abajo a la derecha del círculo. */
.acct-id-cam { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px;
  border-radius: 50%; display: grid; place-items: center; color: #121215;
  background: linear-gradient(140deg, #BEBEC1, var(--accent));
  border: 3px solid var(--bg); box-shadow: 0 4px 12px rgba(147,147,150,.35); }
.acct-id-cam svg { display: block; }
/* El nombre: se toca y se cambia. El lápiz deja claro que es editable. */
.acct-id-name { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 15px; border-radius: 999px; cursor: pointer; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .15s ease, transform .14s cubic-bezier(.34,1.56,.64,1); }
.acct-id-name b { font-size: 17px; font-weight: 800; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-id-name svg { flex-shrink: 0; color: var(--text-dim); }
.acct-id-name:hover { border-color: var(--accent); }
.acct-id-name:hover svg { color: var(--accent); }
.acct-id-name:active { transform: scale(.97); }
.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); }
/* Barra superior del detalle de pedido: "Volver" a la izquierda + "Contactar" (nacional) a la derecha. */
.od-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.od-topbar .acct-back { margin: 0; }
/* Botón "Contactar" (vendedor) de un pedido NACIONAL, alineado con "Volver". */
.od-contact { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 11px; background: #A2A2A5; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; border: none; }
.od-contact svg { color: #fff; }
.od-contact:active { transform: scale(.96); }
.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(147,147,150,.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(147,147,150,.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; }
/* Flujo de 4 pasos (Pagado·Confirmado·Enviado·Entregado) para pedidos de productos: más compacto para que quepa. */
.acct-flow-4 .acct-flow-step { width: 54px; }
.acct-flow-4 .acct-flow-l { font-size: 9.5px; }
.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(147,147,150,.08); }
.pf2-hid:active { transform: scale(.985); background: rgba(147,147,150,.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, #1E1E21 0%, #151518 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(147,147,150,.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(147,147,150,.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, body:has(.dep-page) #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(147,147,150,.1); color: var(--accent); }
/* Tarjeta y Cripto como filas ricas (igual que "Saldo Desbloqueados"): fondo neutro,
   se tiñe de azul solo la seleccionada. */
.pay-wallet.pay-alt { background: rgba(255,255,255,.03); }
.pay-wallet.pay-alt.active { background: linear-gradient(135deg, rgba(147,147,150,.15), rgba(147,147,150,.035)); }
.ckpc-cardbox { margin-top: 4px; margin-bottom: 8px; }
/* Selector de stablecoin (USDT/USDC × red) para pagar con cripto */
.coin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
.coin-opt { display: flex; align-items: center; gap: 9px; text-align: left; padding: 10px 11px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1.5px solid var(--line); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.coin-opt.on { border-color: var(--accent); background: rgba(147,147,150,.1); }
.coin-sym { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.coin-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.coin-tx b { font-size: 13.5px; font-weight: 700; }
.coin-tx small { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Método de pago destacado: tarjeta "Saldo Desbloqueados" (premium) */
.pay-wallet { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px 15px;
  margin-bottom: 10px; border-radius: 16px; cursor: pointer; color: var(--text);
  background: linear-gradient(135deg, rgba(147,147,150,.15), rgba(147,147,150,.035));
  border: 1.5px solid var(--line); transition: border-color .18s, box-shadow .18s, transform .1s; }
.pay-wallet:active { transform: scale(.99); }
.pay-wallet .pw-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--accent), #858588); box-shadow: 0 6px 16px rgba(147,147,150,.35); }
.pay-wallet .pw-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-wallet .pw-main b { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.pay-wallet .pw-main small { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.pay-wallet .pw-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); color: transparent; transition: border-color .18s, background .18s, color .18s; }
.pay-wallet.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(147,147,150,.16); }
.pay-wallet.active .pw-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.ckpc-paysel-alt { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
/* 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(147,147,150,.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(172,172,175,.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(147,147,150,.18), rgba(147,147,150,.05)); border: 1px solid rgba(147,147,150,.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, #CBCBCE, #929295); }
.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); }

/* ===== Billetera en PC "Aurora": panel de saldo con luz viva, tarjeta 3D, curva de 30 días,
       resumen del periodo y movimientos agrupados por día. Reemplaza al bloque .wpc. ===== */
.wnx { max-width: 1180px; margin: 0 auto; padding-bottom: 26px; }

/* — Panel principal — */
.wnx-hero { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(155deg, #1A1A1D 0%, #141419 55%, #101014 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045); }
.wnx-aurora { position: absolute; inset: -40%; pointer-events: none; z-index: 0; opacity: .5;
  background:
    radial-gradient(38% 45% at 18% 22%, rgba(160,160,163,.34), transparent 62%),
    radial-gradient(34% 44% at 76% 12%, rgba(147,147,150,.30), transparent 64%),
    radial-gradient(40% 50% at 62% 88%, rgba(191,191,194,.16), transparent 66%);
  filter: blur(14px); animation: wnxDrift 22s ease-in-out infinite alternate; }
@keyframes wnxDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.02); }
}
/* Luz que sigue al cursor (las variables --mx/--my las escribe el JS). */
.wnx-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; transition: opacity .25s;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 0%), rgba(255,255,255,.075), transparent 70%); }
.wnx-hero-in { position: relative; z-index: 1; padding: 18px 20px 18px; }
.wnx-hi { font-size: 15px; font-weight: 700; color: var(--text-dim); display: inline-flex; align-items: center; gap: 10px; }
.wnx-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: #C2C2C5;
  background: rgba(194,194,197,.13); border: 1px solid rgba(194,194,197,.4); padding: 3px 10px; border-radius: 999px; }
.wnx-lbl { margin-top: 0; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 9px; font-weight: 700; }
.wnx-eye { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.04);
  color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wnx-eye:hover { color: var(--text); background: rgba(255,255,255,.08); }
.wnx-amt { margin-top: 4px; font-size: 38px; line-height: 1.02; font-weight: 800; letter-spacing: -2px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 30%, #C3C3C6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wnx-amt small { font-size: 15px; font-weight: 700; letter-spacing: 0; margin-left: 9px; color: var(--text-dim);
  -webkit-text-fill-color: var(--text-dim); }
.wnx-amt .wbal-hidden { letter-spacing: 2px; }
.wnx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wnx-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--text-dim); }
.wnx-chip.up.pos { color: #CDCDD0; border-color: rgba(160,160,163,.42); background: rgba(160,160,163,.12); }
.wnx-chip.up.neg { color: #AFAFB2; border-color: rgba(155,155,158,.36); background: rgba(155,155,158,.1); }
.wnx-chip.hold { color: var(--gold); border-color: rgba(191,191,194,.36); background: rgba(191,191,194,.1); }

/* — Curva del saldo — */
.wnx-spark { position: relative; margin: 10px 0 10px; height: 62px; }
.wnx-spark-svg { display: block; width: 100%; height: 62px; overflow: visible; }
.wnx-spark-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: wnxDraw 1.5s cubic-bezier(.22,.61,.36,1) forwards; filter: drop-shadow(0 3px 10px rgba(160,160,163,.4)); }
.wnx-spark-area { opacity: 0; animation: wnxFade .9s ease .55s forwards; }
.wnx-spark-dot { fill: #DADADD; stroke: rgba(10,10,12,.85); stroke-width: 3; opacity: 0; animation: wnxFade .4s ease 1.25s forwards; }
.wnx-spark-cap { position: absolute; right: 2px; top: -9px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
@keyframes wnxDraw { to { stroke-dashoffset: 0; } }
@keyframes wnxFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wnx-aurora { animation: none; }
  .wnx-spark-line { animation: none; stroke-dashoffset: 0; }
  .wnx-spark-area, .wnx-spark-dot { animation: none; opacity: 1; }
}

/* — Botones de acción — */
.wnx-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.wnx-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px 4px;
  border-radius: 12px; cursor: pointer; text-align: center; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--text); border: 1px solid var(--line); background: rgba(255,255,255,.045);
  transition: transform .12s, background .15s, border-color .15s, box-shadow .15s; }
.wnx-act.primary { grid-column: 1 / -1; flex-direction: row; gap: 9px; padding: 11px 14px; font-size: 13.5px; }
.wnx-act:hover { transform: translateY(-2px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.wnx-act:active { transform: translateY(0); }
.wnx-act-ic { width: 26px; height: 26px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); color: var(--text); flex: 0 0 auto; }
.wnx-act.primary { background: linear-gradient(135deg, #A0A0A3, #89898C); border-color: transparent; color: #fff;
  box-shadow: 0 10px 24px rgba(160,160,163,.28); }
.wnx-act.primary:hover { box-shadow: 0 14px 30px rgba(160,160,163,.42); background: linear-gradient(135deg, #AFAFB2, #939396); }
.wnx-act.primary .wnx-act-ic { background: rgba(255,255,255,.18); width: 30px; height: 30px; }
.wnx-act#w-wd .wnx-act-ic svg { transform: rotate(90deg); }

.wnx-split { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 13px; padding: 10px 13px; }
.wnx-split-bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.wnx-split-bar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #A0A0A3, #DADADD);
  transition: width .8s cubic-bezier(.22,.61,.36,1); }
.wnx-split-rows { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 8px; font-size: 11.5px; color: var(--text-dim); }
.wnx-split-rows span { display: inline-flex; align-items: center; gap: 6px; }
.wnx-split-rows b { color: var(--text); font-weight: 700; }
.wnx-split-rows .dim { opacity: .65; }
.wnx-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.wnx-dot.a { background: #A0A0A3; }
.wnx-dot.h { background: var(--gold); }

/* — Apartado de GIFT CARDS (panel lateral en PC) — */
.wgc { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 16px; }
.wgc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wgc-head b { display: block; font-size: 16px; font-weight: 800; }
.wgc-head small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.wgc-head-ic { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(147,147,150,.14); color: var(--accent); }
.wgc-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.wgc-row { display: grid; grid-template-columns: 54px 1fr auto 16px; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 13px;
  cursor: pointer; transition: background .13s, transform .13s; }
.wgc-row:hover { background: var(--panel); transform: translateX(3px); }
.wgc-row.off { opacity: .62; }
.wgc-art { width: 54px; height: 34px; border-radius: 8px; flex: 0 0 auto; background-size: cover; background-position: center;
  background-color: var(--panel2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); }
.wgc-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wgc-tx b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgc-tx small { font-size: 11.5px; color: var(--text-dim); }
.wgc-amt { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgc-ch { color: var(--text-dim); opacity: 0; transition: opacity .13s, transform .13s; }
.wgc-row:hover .wgc-ch { opacity: 1; transform: translateX(2px); }
.wgc-empty { margin-top: 14px; border: 1px dashed var(--line); border-radius: 14px; padding: 26px 18px; text-align: center;
  background: rgba(255,255,255,.02); min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wgc-empty-art { position: relative; width: 176px; height: 92px; margin: 0 0 18px; display: block; }
.wgc-empty-art i { position: absolute; left: 50%; top: 50%; width: 92px; height: 58px; margin: -29px 0 0 -46px; border-radius: 10px;
  background-size: cover; background-position: center; background-color: var(--panel2); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 22px rgba(0,0,0,.5); transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.wgc-empty-art i:nth-child(1) { transform: translate(-40px, 6px) rotate(-17deg); filter: brightness(.7); z-index: 1; }
.wgc-empty-art i:nth-child(2) { transform: translate(40px, 6px) rotate(17deg); filter: brightness(.7); z-index: 2; }
.wgc-empty-art i:nth-child(3) { transform: translate(0, -6px) rotate(-2deg); z-index: 3; }
.wgc-empty:hover .wgc-empty-art i:nth-child(1) { transform: translate(-42px, 2px) rotate(-20deg); }
.wgc-empty:hover .wgc-empty-art i:nth-child(2) { transform: translate(42px, 2px) rotate(20deg); }
.wgc-empty:hover .wgc-empty-art i:nth-child(3) { transform: translate(0, -12px) rotate(0deg); }
.wgc-empty b { display: block; font-size: 14px; }
.wgc-empty span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.wgc-cta { margin-top: 14px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.045); color: var(--text); border-radius: 13px; padding: 13px;
  font-size: 13.5px; font-weight: 700; transition: background .15s, border-color .15s, transform .12s; }
.wgc-cta:hover { background: rgba(147,147,150,.14); border-color: rgba(147,147,150,.5); transform: translateY(-2px); }

/* — Tarjetas + movimientos — */
.wnx-main { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.wnx-left { display: flex; flex-direction: column; gap: 16px; }
.wnx-cards .cpc, .wnx-cards .wgc { width: 100%; }
.wnx-main.solo { grid-template-columns: 1fr; }
/* Movimientos TERMINA justo donde termina la columna izquierda (saldo + gift cards), ni un pixel más
   abajo (pedido del jefe, línea amarilla sobre la captura). El truco: el que ocupa la celda del grid
   es .wnx-movwrap, y el panel va DENTRO en absoluto — así el contenido de la lista (que puede ser
   larguísimo) NO estira la fila; la fila la marca la columna izquierda y el panel la calca. */
.wnx-movwrap { position: relative; min-height: 420px; }
.wnx-mov { position: absolute; inset: 0;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 12px;
  display: flex; flex-direction: column; }
/* Sin panel de tarjetas (.solo) no hay columna izquierda que marque el alto: manda la pantalla. */
.wnx-main.solo .wnx-movwrap { min-height: calc(100vh - 130px); }
.wnx-mov-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.wnx-mov-head h3 { margin: 0; font-size: 16px; }
.wnx-search { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 8px 12px; color: var(--text-dim); min-width: 268px; transition: border-color .15s, box-shadow .15s; }
.wnx-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(147,147,150,.15); }
.wnx-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 13px; font: inherit; }
.wnx-txlist { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px 8px; }
.wnx-txday { position: sticky; top: 0; z-index: 2; padding: 10px 6px 6px; margin-top: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-dim); background: var(--bg2); }
.wnx-txday::after { content: ""; display: block; height: 1px; margin-top: 7px; background: var(--line); }
.wnx-tx { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 13px; padding: 11px 10px; border-radius: 12px;
  cursor: pointer; position: relative; transition: background .13s; }
.wnx-tx + .wnx-tx::before { content: ""; position: absolute; left: 61px; right: 10px; top: 0; height: 1px; background: rgba(255,255,255,.05); }
.wnx-tx:hover { background: var(--panel); }
.wnx-tx:hover::before, .wnx-tx:hover + .wnx-tx::before { opacity: 0; }
.wnx-tx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wnx-tx-ic { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.wnx-tx-ic.in { background: rgba(160,160,163,.13); color: #C9C9CC; }
.wnx-tx-ic.out { background: rgba(255,255,255,.055); color: #CACACD; }
.wnx-tx-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wnx-tx-tx b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wnx-tx-tx small { font-size: 11.5px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 7px; }
.wnx-tx-tx small .badge { font-size: 10px; padding: 1px 7px; }
.wnx-tx-amt { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.2px; }
.wnx-tx-amt.pos { color: #C9C9CC; } .wnx-tx-amt.neg { color: var(--text); }


@media (max-width: 1240px) {
  .wnx-main { grid-template-columns: 320px minmax(0, 1fr); }
  .wnx-amt { font-size: 38px; }
  .wnx-acts { grid-template-columns: repeat(3, 1fr); }
}

/* ===== 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: #C2C2C5; background: rgba(194,194,197,.14); border: 1px solid rgba(194,194,197,.42); padding: 5px 12px; border-radius: 999px; }
.wpc-promo-badge svg { color: #C2C2C5; 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, #A0A0A3, #C9C9CC); 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: #A0A0A3; }
.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); }
/* El "+" de la Billetera abre las gift cards: el borde recorre los colores de las marcas
   para que se note que ahí hay algo nuevo. Un solo elemento: el degradado gira en una
   capa de atrás y el relleno del botón la tapa por dentro (truco de máscara), así el
   color solo se ve en el borde. Se detiene si el usuario pidió menos movimiento. */
.tb-glow { position: relative; border-color: transparent; z-index: 0; }
.tb-glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from 0deg, #939396, #A2A2A5, #D7D7DA, #A9A9AC, #959598, #8A8A8D, #939396);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: tbGlowSpin 3.6s linear infinite;
}
.tb-glow::after {
  content: ""; position: absolute; inset: -3px; border-radius: 14px; z-index: -2; opacity: .45;
  background: conic-gradient(from 0deg, #939396, #A2A2A5, #D7D7DA, #A9A9AC, #959598, #8A8A8D, #939396);
  filter: blur(7px); animation: tbGlowSpin 3.6s linear infinite;
}
@keyframes tbGlowSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tb-glow::before, .tb-glow::after { animation: none; }
}
.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(203,203,206,.16); color: var(--gold, #CBCBCE); }
.cj-badge.blue { background: rgba(161,161,164,.16); color: #B4B4B7; }
.cj-badge.green { background: rgba(166,166,169,.16); color: var(--green); }
.cj-badge.red { background: rgba(137,137,140,.16); color: var(--red, #89898C); }
.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: #1C1C1F; }
.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, #18181B); 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, #CBCBCE); }
.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 #C1C1C4,
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 #C1C1C4,
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, #B3B3B6); border-color: var(--green, #B3B3B6); 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, #B3B3B6); }
.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, #B3B3B6); border-color: var(--green, #B3B3B6); }
.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, #18181B); 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: #DDDDE0; }
.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: #DDDDE0; 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(147,147,150,.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: 2px; overflow: hidden;
    padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .db-view .db-tabs::-webkit-scrollbar { display: none; }
  .db-view .db-tab {
    position: relative; width: auto; height: auto; flex: 0 0 auto;
    gap: 7px; padding: 10px 14px 12px; border-radius: 0;
    border: none; background: none; color: var(--text-dim);
    font-size: 14px; font-weight: 600; letter-spacing: .1px;
    transition: color .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: none; }
  /* Activo: solo el texto en blanco y una raya fina debajo (nada de píldora azul). */
  .db-view .db-tab.active { color: var(--text); background: none; box-shadow: none; }
  .db-view .db-tab.active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
    height: 2px; border-radius: 2px; background: var(--accent);
  }
  .db-view .db-tab.active svg { color: var(--accent); }
  .db-view .db-tab .tab-pending { top: 6px; right: 6px; }

  /* 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%, #9E9EA1 0%, #818184 45%, #67676A 100%);
    box-shadow: 0 4px 12px rgba(110,110,113,.38), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(47,47,50,.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%, #343437 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). */
  /* El campo lleva su propia lupa dentro (a la izquierda) y no se estira de pared a pared:
     ancho contenido y pegado a la derecha, para que la barra respire. */
  .db-view .db-inline-search {
    display: block; position: static; flex: 0 1 340px; min-width: 120px; max-width: 340px;
    margin: 0 0 0 auto; height: 38px;
    border: 1px solid var(--line); border-radius: 999px; outline: none;
    background-color: var(--panel); color: var(--text); font-size: 14px;
    padding: 0 16px 0 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939396' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 14px center; background-size: 16px 16px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
    opacity: 1; pointer-events: auto;
    transition: box-shadow .16s, border-color .16s, background-color .16s;
  }
  .db-view .db-inline-search:hover { border-color: var(--text-dim); }
  .db-view .db-inline-search:focus {
    border-color: rgba(147,147,150,.65); background-color: var(--bg2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.28), 0 0 0 3px rgba(147,147,150,.18);
  }
  .db-view .db-inline-search::placeholder { color: var(--text-dim); }
  /* Con el campo siempre a la vista, el círculo de la lupa sobra en pantallas anchas. */
  @media (min-width: 1180px) { .db-view .db-search-btn { display: none; } }
  /* Pantallas medianas (iPad): las pestañas + el filtro "Hoy" ya llenan la fila, así que el
     input se esconde y queda solo la lupa; al tocarla se despliega ENCIMA de las pestañas. */
  @media (max-width: 1179px) {
    .db-view .db-inline-search { display: none; }
    .db-view .db-tabs.searching .db-inline-search {
      display: block; position: absolute; left: 0; right: 46px; top: 50%; transform: translateY(-50%);
      margin: 0; max-width: none; flex: none; z-index: 3;
    }
  }
  /* 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(147,147,150,.16); color: var(--accent); border-color: rgba(147,147,150,.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(147,147,150,.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(147,147,150,.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; }
/* Botón "Actualizar" (recarga la página): mismo tamaño que los de al lado. En pantallas
   estrechas se queda solo con el icono para no robarle sitio al filtro de tiempo. */
/* "Actualizar" es SOLO el icono (orden del jefe): botón redondo, sin texto. */
.db-periodrow .db-reload-sm { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; }
.db-periodrow .db-reload-sm svg { color: var(--accent); flex: 0 0 auto; }
.db-periodrow .db-reload-sm:hover { border-color: var(--text-dim); }
.db-periodrow .db-reload-sm[disabled] { opacity: .55; pointer-events: none; }
.db-periodrow .db-reload-sm.girando svg { animation: dbSpin .8s linear infinite; }
@keyframes dbSpin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .db-periodrow .db-reload-sm { width: 36px; height: 36px; }
}
@media (min-width: 1000px) { .db-view .db-periodrow { padding: 12px 30px 2px; } }
/* Analítica en el teléfono: el filtro de tiempo es lo único de esa fila, así que ocupa el
   ancho completo en vez de quedar colgando a la derecha con un hueco al lado. */
@media (max-width: 999px) {
  .db-toolbar.solo .db-periodrow { padding-top: 4px; }
  .db-toolbar.solo .dash-period-wrap { flex: 1 1 auto; justify-content: space-between; }
}

/* UNA sola fila arriba: el menú (Analítica · Transacciones · Pedidos · Productos · Usuarios)
   a la izquierda y el filtro "Hoy" a la derecha. En móvil se apilan en el orden del DOM. */
.db-toolbar { display: block; }
.db-tbrow1 > .db-nav { min-width: 0; }
@media (min-width: 700px) {
  .db-view .db-toolbar .db-tbrow1 { display: flex; align-items: center; gap: 16px; }
  .db-view .db-toolbar .db-tbrow1 > .db-nav { flex: 1 1 auto; }
  .db-view .db-toolbar .db-tbrow1 > .db-periodrow { flex: 0 0 auto; margin-left: auto; padding: 0; }
}
@media (min-width: 1000px) {
  .db-view .db-toolbar { padding: 12px 30px 4px; }
  .db-view .db-toolbar .db-tbrow1 > .db-nav { padding: 0; }
}
/* 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(147,147,150,.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, #919194, #6F6F72); border-color: transparent; box-shadow: 0 12px 28px rgba(110,110,113,.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: #6F6F72; }

.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(147,147,150,.08), var(--panel)); border-color: rgba(147,147,150,.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(171,171,174,.10), var(--panel)); border-color: rgba(171,171,174,.30); }
.bt-panel .dash-panel-h { margin-bottom: 8px; }
.bt-panel .dash-panel-h svg { color: #ABABAE; }
.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(147,147,150,.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(147,147,150,.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(147,147,150,.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(147,147,150,.16); color: var(--accent); }
.rnav-mode.warn { background: rgba(177,177,180,.16); color: #B1B1B4; }
/* 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: #8D8D90; border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(141,141,144,.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: #ACACAF; 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, #111114 0%, #131316 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: #C2C2C5; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 3px 10px rgba(0,0,0,.6); }
.lpick .lp-map .leaflet-container { background: #151518; }

/* 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: #C2C2C5; border: 1.5px solid #262629; box-shadow: 0 0 6px rgba(194,194,197,.7); cursor: pointer; }
.lp-loc-mk b { position: absolute; left: 12px; top: -3px; white-space: nowrap; font-size: 10.5px; font-weight: 600; color: #F2F2F5; 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(8,8,11,0) 30%, rgba(8,8,11,.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: #1C1C1F; background: var(--green); }
.gana-badge.soon { color: #fff; background: rgba(124,124,127,.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(20,20,23,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(2px); box-sizing: content-box; }
.gana-badge.evt { color: #1E1E21; 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; }
/* Botones de producto NACIONAL: "Pagar en línea" (azul) + "Contactar al vendedor" (verde WhatsApp), separados. */
.pd-nat-actions { display: flex; flex-direction: column; gap: 11px; margin-bottom: 12px; }
.pd-wa-btn { background: #A2A2A5 !important; color: #fff !important; }
.pd-wa-btn svg { color: #fff; }

/* 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(147,147,150,.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(147,147,150,.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%; } }

/* ── Soporte del CASILLERO: widget flotante verde + panel de chat ── */
/* Chat del casillero a PANTALLA COMPLETA (antes era una hoja de media pantalla). */
.lkchat-panel { position: fixed; z-index: 80; inset: 0; height: 100dvh; display: none; flex-direction: column; background: var(--bg); border: none; border-radius: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.5); overflow: hidden; }
.lkchat-panel.open { display: flex; }
/* PC: el chat del casillero NO va a pantalla completa → widget tamaño teléfono, abajo a la derecha. */
@media (min-width: 1000px) {
  .lkchat-panel { inset: auto; right: 22px; bottom: 22px;
    width: 400px; height: min(680px, calc(100dvh - 90px)); border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px var(--line); overflow: hidden; }
}
/* Cabecera: el espacio de arriba es SOLO la zona segura (como el resto de la app). Antes le
   sumaba 12px encima del inset y en el APK de Android la cabecera se veía demasiado alta. */
.lkchat-top { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px 12px; background: linear-gradient(135deg, #8F8F92, #6A6A6D); color: #fff; flex-shrink: 0; }
.lkchat-av { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lkchat-info { display: flex; flex-direction: column; min-width: 0; }
.lkchat-info b { font-size: 15px; }
.lkchat-info i { font-style: normal; font-size: 12px; opacity: .92; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lkchat-close { margin-left: auto; background: rgba(255,255,255,.15); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.lkchat-msgs { background: var(--bg); }
/* Burbujas del usuario en VERDE clarito (a juego con el chat verde del casillero), no el azul del soporte general */
.lkchat-msgs .sup-row.me .sup-bub { background: #BEBEC1; color: #29292C; }
.lkchat-chips { display: flex; gap: 7px; padding: 8px 10px 12px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.lkchat-chips::-webkit-scrollbar { display: none; }
.lkchat-chip { flex-shrink: 0; background: rgba(162,162,165,.12); color: #B5B5B8; border: 1px solid rgba(162,162,165,.35); border-radius: 16px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lkchat-chip.agent { background: #8F8F92; color: #fff; border-color: transparent; }
.lkchat-chip:active { transform: scale(.96); }
/* Chips del soporte: mismo molde que los del Casillero, en el azul de la marca. */
.sup-chip { background: rgba(147,147,150,.13); color: var(--accent); border-color: rgba(147,147,150,.38); }
.lkchat-compose { flex-shrink: 0; }
.lkchat-send { background: #8F8F92 !important; color: #fff !important; }
.lkchat-wide { max-width: 96%; width: 96%; }
.lkchat-agent { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.lkchat-agent .lka-h { font-size: 13.5px; line-height: 1.4; }
.lkchat-agent label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
.lkchat-agent .input { width: 100%; }
.lkchat-agent .btn.accent { background: #8F8F92; color: #fff; }
.lkchat-att { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lkchat-att:active { transform: scale(.94); }
/* Hora del mensaje (esquina inferior izquierda de la burbuja) + línea de día estilo WhatsApp */
.lk-tm { display: block; font-size: 10px; opacity: .58; margin-top: 3px; text-align: left; line-height: 1; }
.lk-day { align-self: center; margin: 8px 0 2px; }
.lk-day span { display: inline-block; background: var(--card); border: 1px solid var(--line); color: var(--text-dim); font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 14px; }
.lk-file { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 600; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════════
   ESPACIO SUPERIOR (móvil) — Tiendas · Casillero · Billetera · Cuenta
   Estas pantallas no tienen barra superior propia: su contenido es lo primero que se ve.
   Cada una reservaba arriba una cantidad distinta (0, 8, 16 y 30 px POR ENCIMA de la zona
   segura), y en el APK de Android eso se veía como un hueco de más. Ahora no se suma NADA:
   el espacio es exactamente la zona segura del teléfono, ni un píxel más. En Android eso es
   cero hueco (el contenido arranca justo debajo de la barra de estado) y en el iPhone es el
   alto de la isla dinámica, que es justo lo que hace falta para no quedar tapado.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 999px) {
  :root { --safe-top: env(safe-area-inset-top, 0px); }
  .mode-toggle--top { padding-top: var(--safe-top); }   /* Tiendas: Dropshipping / Nacionales / Promotores */
  .view-locker { padding-top: var(--safe-top); }        /* Casillero */
  .bp-sheet { padding-top: var(--safe-top); }           /* Billetera y sus pantallas */
  .acct-wrap, .acct-sub-wrap { padding-top: var(--safe-top); }   /* Cuenta y sus subpáginas */
  .view-notif { padding-top: var(--safe-top); }        /* Avisos */
  /* Panel de la tienda: el cuerpo reservaba 16px MÁS la zona segura, y encima la cabecera metía
     otros 18px — casi 42px de aire en el APK antes del botón de atrás. */
  #bd-body { padding-top: var(--safe-top); }
  .bizmanage .bd-head2 { padding-top: 0; padding-bottom: 10px; }
  /* Apartados de Tiendas: los segmentos tampoco añaden aire propio arriba. */
  .mode-toggle--top .mode-seg { padding-top: 2px; }
}

/* Selector de apartado de la tienda (Dropshipping / Nacionales) — solo lo ve un admin al editar. */
.cb-mkt .cb-mkt-h { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }

/* ── Inicio de la tienda: balance · gráfica con tramo · pedidos ──────────────────────
   El Inicio de una tienda NACIONAL es solo esto: cuánto tiene, cómo va vendiendo y qué
   pedidos hay. (Los recuadros de Ventas/Clientes/Retenido se retiraron.) */
/* Balance actual (disponible + retenido): línea secundaria bajo la cifra grande; se toca
   para ver los movimientos. */
.bizbal-total { position: relative; z-index: 1; display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; color: var(--text-dim); font: inherit; cursor: pointer; }
.bizbal-total > span { font-size: 13.5px; font-weight: 600; }
.bizbal-total b { color: var(--text); font-weight: 800; }
.bizbal-total small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); opacity: .8; }
.bizbal-total:active { opacity: .7; }
.bizbal-sub { margin-top: 8px; }
/* Dos acciones lado a lado: transferir a la billetera personal · retirar fuera de la app. */
.bizbal-acts { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.bizbal-acts .bizbal-go { margin-top: 0; }
/* Selector de tramo de la gráfica (7 días · 30 días · 3 meses · 1 año). */
.chart-range { margin-left: 10px; flex-shrink: 0; height: 30px; padding: 0 26px 0 10px; border-radius: 999px;
  background-color: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 13px; }
.chart-range option { background: #14141a; color: var(--text); }
.chart-head .chart-total { margin-left: auto; }
/* Pedidos, debajo de la gráfica. */
.bd-orders { margin-top: 18px; }
.bd-orders-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800;
  color: var(--text); margin-bottom: 10px; }
.bd-orders-h svg { color: var(--text-dim); }
.bd-orders-h span { font-size: 12px; font-weight: 700; color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }

/* Ubicación del Mercado Nacional (provincia · municipio) en el Inicio: dos chips a mitad y mitad,
   entre la tira de tiendas y las tarjetas de producto, con el mismo ancho que el grid para que la
   línea calce. Antes iban apretados DENTRO de la barra de búsqueda. */
.home-geo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 14px 12px; }
.home-geo .geo-sel { width: 100%; max-width: none; height: 40px; font-size: 13.5px; padding: 0 28px 0 13px;
  background-position: right 10px center; background-size: 14px; }
@media (min-width: 1000px) { .home-geo { display: none; } }   /* en PC el filtro vive en el nav superior */

/* Cabecera del formulario de producto: el botón de atrás arrastraba el margen inferior de
   `.back-pill` (14px), así que quedaba más alto que el título y el interruptor. Sin ese margen,
   los tres se alinean por su centro. */
.pf-topbar2 .back-pill { margin: 0; }
.pf-topbar2 .pf-title2 { line-height: 1.2; }
/* El aire entre la cabecera y la primera tarjeta lo pone la propia cabecera (antes venía del
   margen del botón de atrás, que se quitó para poder alinearlos). */
.pf .pf-topbar2 { margin-bottom: 16px; }
/* Descripción del formulario de usuario: caja de texto directa (sin botón ni desplegable). */
.pf-card textarea.pf-desc { width: 100%; min-height: 132px; resize: vertical; line-height: 1.45; }

/* Mercado por CATEGORÍAS: el Inicio muestra las categorías (mismo estilo de tarjeta que las
   subcategorías) y los productos aparecen al buscar o al entrar en una subcategoría. */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 14px 96px; }
@media (min-width: 620px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; } }
.cat-grid .skel-card { aspect-ratio: 1; border-radius: 18px; }

/* Categoría / subcategoría: sin barra superior. El botón de atrás va a la MISMA línea vertical
   que las tarjetas de abajo (el grid tiene 16px de margen lateral) y respeta la zona segura. */
.view-cat { padding-top: env(safe-area-inset-top, 0px); }
.cat-back { margin: 12px 16px 14px; }
@media (min-width: 1000px) { .cat-back { margin-left: 22px; } }

/* Tiendas que venden una subcategoría: tira horizontal encima de los productos. */
.sc-stores { padding: 0 0 4px; }
.sc-stores-rail { padding-top: 2px; }

/* Ruedita de 'buscando trapichero' en la recarga con efectivo. */
@keyframes cuspin { to { transform: rotate(360deg); } }

/* ── Chat a pantalla completa del depósito con trapichero ───────────────────── */
.cuch-wrap { display: flex; flex-direction: column; height: calc(100vh - var(--safe-top) - 66px);
             max-width: 720px; margin: 0 auto; padding: 0 14px 10px; }
.cuch-quien { display: flex; align-items: center; gap: 11px; padding: 10px 2px 12px;
              border-bottom: 1px solid var(--line); }
.cuch-quien img, .cuch-ini { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; }
.cuch-ini { background: var(--accent); color: #fff; display: flex; align-items: center;
            justify-content: center; font-weight: 800; font-size: 17px; }
.cuch-nom { font-weight: 800; font-size: 14.5px; }
.cuch-sub { color: var(--text-dim); font-size: 12px; }
.cuch-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px;
             padding: 14px 0; }
.cuch-vacio { margin: auto; color: var(--text-dim); font-size: 13px; text-align: center; }
.cuch-b { max-width: 80%; padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45;
          word-break: break-word; display: flex; flex-direction: column; gap: 3px; }
.cuch-b i { font-size: 10.5px; opacity: .65; font-style: normal; align-self: flex-end; }
.cuch-b.mio { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.cuch-b.suyo { align-self: flex-start; background: var(--panel2, #242427); border-bottom-left-radius: 5px; }
.cuch-bar { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.cuch-bar .input { flex: 1; min-width: 0; border-radius: 22px; }
.cuch-clip, .cuch-env { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cuch-clip { background: var(--panel2, #242427); color: var(--text-dim); }
.cuch-env { background: var(--green); color: #fff; }
.cuch-env:disabled { opacity: .55; }
.cuch-img { max-width: 100%; border-radius: 12px; display: block; cursor: pointer; }
.cuch-arch { display: inline-block; padding: 7px 11px; border-radius: 10px;
  background: rgba(255,255,255,.12); color: inherit; font-size: 13px; word-break: break-all; }

/* ── Desde Cuba: elegir entre ir a una casa de cambio o que venga el trapichero ─────────────── */
.cw-op { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 15px 14px; margin-bottom: 12px; }
.cw-op:active { transform: scale(.995); }
.cw-op.off { opacity: .55; cursor: not-allowed; }
.cw-ico { width: 46px; height: 46px; flex: none; border-radius: 13px; display: flex; align-items: center;
  justify-content: center; background: rgba(147,147,150,.14); color: var(--accent); }
.cw-op.off .cw-ico { background: rgba(255,255,255,.06); color: var(--text-dim); }
.cw-tx { flex: 1; min-width: 0; }
.cw-tx b { display: block; font-size: 15.5px; font-weight: 800; }
.cw-tx span { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; margin-top: 3px; }
.cw-tx i { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--green); margin-top: 5px; }
.cw-op.off .cw-tx i { color: var(--text-dim); }
.cw-chev { color: var(--text-dim); flex: none; }

/* ── Mapa de casas de cambio ─────────────────────────────────────────────────────────────────── */
.cp-id { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; margin: 0 0 12px; }
.cp-id b { display: block; font-size: 13.5px; font-weight: 800; }
.cp-id span { display: block; color: var(--text-dim); font-size: 12px; margin-top: 1px; }
.cp-idno { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: rgba(147,147,150,.12);
  border: 1px solid rgba(147,147,150,.3); color: var(--accent); border-radius: 10px; padding: 8px 11px;
  font-size: 16px; font-weight: 900; letter-spacing: 2px; }
.cp-loc { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.cp-loc-cab { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.cp-loc-cab b { font-size: 14.5px; font-weight: 800; }
.cp-loc-cab span { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.cp-est { flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-dim); border: 1px solid var(--line); border-radius: 7px; padding: 2px 6px; }
.cp-est.on { color: var(--green); border-color: rgba(170,170,173,.45); }
.cp-loc-met { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-dim);
  font-size: 12.5px; margin-top: 8px; }
.cp-mon { font-size: 11px; font-weight: 700; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.cp-mon.on { color: var(--accent); border-color: rgba(147,147,150,.4); }
.cp-loc-nota { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; margin-top: 8px; }
.cp-loc-btns { display: flex; gap: 8px; margin-top: 11px; }
.cp-loc-btns .btn { flex: 1; padding: 9px 10px; font-size: 13px; text-align: center; text-decoration: none; }
.cp-mon.out { color: #AEAEB1; border-color: rgba(174,174,177,.4); }

/* ── Directorio de trapicheros (31-ago-2026) ─────────────────────────────────
   El cliente elige a mano con quién trata: la tarjeta tiene que decirle en un vistazo quién
   es (foto y nombre), si está verificado, cuánto ha trabajado y cómo lo califican. */
.trp-intro { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0 2px 14px; }
.trp-pie { color: var(--text-dim); font-size: 12.5px; line-height: 1.6; margin: 16px 2px 0; }
.trp-grupo { font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim); margin: 18px 2px 8px; }
.trp-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 13px; margin-bottom: 9px; color: var(--text); }
.trp-card:active { transform: scale(.995); }
.trp-av { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; background: rgba(147,147,150,.18);
  border: 1px solid var(--line); font-weight: 800; color: var(--text-dim); }
.trp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trp-tx { flex: 1; min-width: 0; }
.trp-tx b { display: flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 800; }
.trp-line { display: flex; align-items: center; gap: 5px; font-size: 12.5px; margin-top: 3px; }
.trp-line svg { color: var(--text-dim); flex: 0 0 auto; }
/* Las estrellas solo aparecen si alguien lo calificó, y van pegadas al nombre. */
.trp-est-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  font-weight: 700; margin-left: 2px; }
.trp-dim { color: var(--text-dim); }
.trp-chev { flex: 0 0 auto; color: var(--text-dim); display: flex; }
/* Sello de verificado: azul y con los picos, como el de Meta (lo pide el jefe: se reconoce). */
.trp-ok { flex: 0 0 auto; display: block; }
.trp-stars { display: inline-flex; gap: 1px; }
.trp-stars span { color: rgba(147,147,150,.35); display: inline-flex; }
.trp-stars span.on { color: #D8D8DC; }
.trp-stars svg { fill: currentColor; stroke: none; }
.trp-n { color: var(--text-dim); }
.trp-sin { color: var(--text-dim); font-size: 12.5px; }

/* El cambio del día en la barra de arriba: viene de elToque y ahí se dice de dónde sale. */
.tq-chip { display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px;
  font-size: 13.5px; font-weight: 800; color: var(--text); background: var(--panel); }
.tq-chip i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: lowercase; color: var(--text-dim); }

/* ── El mapa que filtra ──────────────────────────────────────────────────────
   SVG a mano con los municipios de la provincia (data/boundaries.json). Sin Leaflet ni losas:
   abre al instante y no gasta datos. Gris = tiene trapicheros · ámbar = los tiene y tú estás
   mirando un municipio vacío · casi negro = ahí no hay nadie. */
.trp-mapa-cab { display: flex; align-items: baseline; gap: 8px; margin: 2px 2px 8px; }
.trp-mapa-cab b { font-size: 17px; font-weight: 800; }
.trp-mapa-cab span { font-size: 12.5px; color: var(--text-dim); }
.trp-mapa { display: block; width: 100%; height: auto; max-height: 42vh; }
.trp-mapa-pie { font-size: 12px; color: var(--text-dim); margin: 6px 2px 4px; }
.trp-mp { stroke: #0C0C0E; stroke-width: 2; transition: fill .15s ease; }
.trp-mp.on { cursor: pointer; }
.trp-mp.on:hover { stroke: #D8D8DC; }
.trp-mp.sel { stroke: #FFFFFF; stroke-width: 2.6; }
/* Filtro de moneda debajo del mapa: pelotica y texto, sin banderas ni logos (orden del jefe). */
.cur-fil { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cur-op { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 11px;
  font-size: 13.5px; font-weight: 700; color: var(--text-dim); background: var(--panel); }
.cur-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.cur-op i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(170,170,175,.55);
  display: inline-block; position: relative; flex: 0 0 auto; }
.cur-op.on { color: var(--text); border-color: rgba(216,216,220,.55); }
.cur-op.on i { border-color: #D8D8DC; }
.cur-op.on i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #D8D8DC; }

.trp-vacio { border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin: 4px 0 12px; }
.trp-vacio b { display: block; font-size: 14.5px; font-weight: 800; }
.trp-vacio span { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }
.trp-cerca { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.trp-mun { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(224,168,60,.5);
  color: var(--text); background: rgba(224,168,60,.10); border-radius: 999px;
  padding: 7px 12px; font-size: 13px; font-weight: 700; }
.trp-mun i { font-style: normal; font-size: 11.5px; font-weight: 800; color: #E0A83C; }
/* El aviso de antes de entrar (popup). Va en el mismo ámbar de los municipios: en esta
   pantalla, ámbar = "ojo con esto". */
.cav-ico { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 2px auto 16px; color: #E0A83C;
  background: rgba(224,168,60,.12); border: 1px solid rgba(224,168,60,.45); }
.cav-tx { margin: 0 2px 12px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.cav-tx b { color: var(--text); }
/* Sobre el platino del .btn el blanco no se lee: tinta oscura, como el resto de botones llenos. */
#cav-ok { color: #1C1C1F; font-weight: 800; margin-top: 4px; }
.trp-mun:active { transform: scale(.98); }

/* Lo que cobra cada uno: en la tarjeta va delante, que es media decisión. */
.trp-pct { color: var(--text); font-weight: 800; }
.tf-pct { display: flex; align-items: baseline; gap: 12px; }
.tf-pct span { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.tf-pct p { margin: 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }

/* La ficha */
.tf-cab { text-align: center; padding: 6px 0 18px; }
.tf-cab .trp-av { margin: 0 auto 12px; }
.tf-cab h2 { display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 22px; font-weight: 800; margin: 0; }
.tf-est { display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 14px; margin-top: 8px; }
.tf-sub { color: var(--text-dim); font-size: 13px; margin-top: 6px; }
.tf-verif { display: flex; align-items: center; justify-content: center; gap: 5px; }
/* El botón de WhatsApp va en SU verde (orden del jefe): se reconoce sin leerlo. La tinta va
   oscura porque sobre el verde de WhatsApp el blanco se lee peor de lo que parece. */
.tf-wa { display: flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; background: #25D366; color: #07240F; font-weight: 800; }
.tf-wa svg { stroke: currentColor; }
/* Lo que cobra, encima del botón: el número grande manda y al lado su explicación. */
.tf-cobra { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 16px; margin: 0 0 14px; }
.tf-cobra > span { flex: 0 0 auto; font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.tf-cobra p { margin: 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.tf-cobra p b { display: block; color: var(--text); font-size: 14px; font-weight: 800; margin-bottom: 2px; }
.tf-nowa { color: var(--text-dim); font-size: 13px; text-align: center;
  border: 1px dashed var(--line); border-radius: 14px; padding: 14px; }
.tf-blq { border-top: 1px solid var(--line); padding: 16px 2px 0; margin-top: 16px; }
.tf-blq > b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 9px; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-pasos { margin: 0; padding-left: 20px; color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.tf-lista { display: flex; flex-direction: column; gap: 11px; }
.tf-res { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.tf-res-cab { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); }
.tf-res p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; }
/* Las 5 estrellas para calificar: grandes, que se toquen con el dedo sin apuntar. */
.cal-stars { display: flex; justify-content: center; gap: 8px; margin: 4px 0 18px; }
.cal-stars button { color: rgba(147,147,150,.35); padding: 4px; }
.cal-stars button svg { fill: currentColor; stroke: none; }
.cal-stars button.on { color: #D8D8DC; }

/* ── Gift cards (compra manual) — catálogo, tarjeta en la billetera y panel ──
   El catálogo lo abre el "+" de la Billetera. Cada marca se pinta con su arte real
   (web/gc/<marca>.jpg, 576x365) para que se vea como la tarjeta de verdad. */
.gc-sheet { padding-bottom: 34px; }
.gc-h { font-size: 15px; font-weight: 800; margin: 20px 0 10px; }
.gc-sub { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: -6px 0 12px; }
.gc-sub1 { margin-top: 6px; }   /* cuando abre la pantalla, sin h3 encima */
.gc-hint { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin: 12px 2px 0; }
.gc-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 10px 0 14px;
  background: rgba(201,201,204,.10); border: 1px solid rgba(201,201,204,.34); border-radius: 14px;
  font-size: 12.5px; line-height: 1.5; }
.gc-note svg { color: #C9C9CC; flex-shrink: 0; margin-top: 1px; }

/* Rejilla de marcas */
.gc-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
@media (min-width: 700px) { .gc-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .gc-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gc-tile { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 9px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; color: var(--text);
  text-align: left; cursor: pointer; transition: border-color .14s ease, transform .14s ease; }
.gc-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.gc-tile:active { transform: scale(.985); }
.gc-tile.hot { border-color: rgba(169,169,172,.5); }
.gc-tile-art { display: block; border-radius: 11px; overflow: hidden; aspect-ratio: 1.58 / 1; background: #111; }
.gc-tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-tile-tx { display: flex; flex-direction: column; gap: 2px; padding: 0 3px 3px; min-width: 0; }
.gc-tile-tx b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-tile-tx > span { font-size: 11px; color: var(--text-dim); }
.gc-tile-lim { font-size: 10.5px !important; color: #A9A9AC !important; }
/* ── Tarjeta Prepago: la pantalla ÚNICA (2026-08-19) ───────────────────────────
   Se acabo el catalogo de marcas y la 2a pantalla del monto: aqui va la foto de la
   tarjeta, como funciona, y abajo el monto con su total. Todo con el mismo ancho
   que la foto (.gc-hero, 380px) para que la columna se lea de un tiron. */
.gc-sheet .gcp-steps, .gc-sheet .gcp-calc,
.gc-sheet #gc-go { max-width: 380px; margin-left: auto; margin-right: auto; }
/* Botón de emitir: separado de la calculadora y con más presencia — más alto, esquinas
   suaves, degradado con brillo y una sombra de color que lo levanta del fondo. */
#gc-go { margin-top: 18px; height: 56px; padding: 0 20px; border-radius: 18px;
  font-size: 16px; font-weight: 800; letter-spacing: -.2px; position: relative; overflow: hidden;
  background-image: linear-gradient(135deg, #AAAAAD 0%, var(--accent) 46%, #656568 100%);
  box-shadow: 0 10px 26px rgba(147,147,150,.34), 0 2px 6px rgba(0,0,0,.3),
    0 1px 0 rgba(255,255,255,.22) inset;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease; }
/* Brillo diagonal fijo en la mitad de arriba: le da el acabado de cristal. */
#gc-go::after { content: ""; position: absolute; inset: 0 0 50% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); }
#gc-go:not(:disabled):hover { box-shadow: 0 14px 32px rgba(147,147,150,.42), 0 2px 6px rgba(0,0,0,.3),
  0 1px 0 rgba(255,255,255,.22) inset; }
#gc-go:not(:disabled):active { transform: scale(.975); box-shadow: 0 5px 14px rgba(147,147,150,.4); }
#gc-go:disabled, #gc-go.is-disabled { background-image: none; background: var(--panel2);
  color: var(--text-dim); box-shadow: none; filter: none; opacity: 1; }
#gc-go:disabled::after, #gc-go.is-disabled::after { display: none; }

/* Los 2 pasos, con su numero en circulo y la linea que los enhebra. */
.gcp-steps { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.gcp-step { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
.gcp-step:last-child { padding-bottom: 0; }
.gcp-step::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, var(--line), transparent); border-radius: 2px; }
.gcp-step:last-child::before { display: none; }
.gcp-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid;
  place-items: center; font-size: 13px; font-weight: 800; color: #121215;
  background: linear-gradient(140deg, #BEBEC1, var(--accent));
  box-shadow: 0 4px 14px rgba(147,147,150,.32); }
.gcp-step-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 3px; }
.gcp-step-tx b { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.gcp-step-tx span { font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }

/* El monto + $1 = el total. */
.gcp-calc { padding: 14px; margin-bottom: 12px; border-radius: 17px;
  background: var(--panel); border: 1px solid var(--line); }
.gcp-calc-row { display: flex; align-items: flex-end; gap: 10px; }
.gcp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.gcp-field small { font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .4px; }
.gcp-inbox { display: flex; align-items: center; gap: 3px; padding: 0 12px; height: 48px;
  border-radius: 13px; background: var(--bg); border: 1px solid var(--line);
  transition: border-color .14s ease; }
.gcp-inbox:focus-within { border-color: var(--accent); }
.gcp-inbox i { font-style: normal; font-size: 17px; font-weight: 700; color: var(--text-dim); }
.gcp-inbox input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none;
  color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.gcp-plus { flex-shrink: 0; height: 48px; display: flex; align-items: center; padding-bottom: 0;
  font-size: 13.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.gcp-total { flex: 0 1 auto; align-items: flex-end; text-align: right; }
.gcp-total b { height: 48px; display: flex; align-items: center; font-size: 21px; font-weight: 800;
  letter-spacing: -.5px; color: var(--green); }
.gcp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-dim); }
.gcp-rango { flex-shrink: 0; }
.gcp-msg:not(:empty) { margin-top: 9px; font-size: 12.5px; line-height: 1.4; }
.gcp-bad { color: var(--red); font-weight: 600; }
/* Atajo para recargar cuando el saldo no da: la pantalla de la tarjeta se ve entera igual. */
.gcp-addfunds { display: inline-block; margin-left: 6px; padding: 3px 10px; border: 0;
  border-radius: 999px; background: rgba(255,255,255,.09); color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer; }
.gcp-addfunds:hover { background: rgba(255,255,255,.15); }
/* La insignia nunca puede salirse del arte: los textos largos ("Pagas menos desde $200")
   se ajustan al ancho de la tarjeta en vez de desbordarse. */
.gc-fire { position: absolute; top: 15px; left: 15px; max-width: calc(100% - 30px);
  display: inline-flex; align-items: center; gap: 4px; text-align: left;
  font-size: 10.5px; font-weight: 800; line-height: 1.3; padding: 4px 8px 4px 6px;
  border-radius: 13px; background: rgba(14,14,17,.82); color: #D7D7DA;
  backdrop-filter: blur(4px); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.gc-fire svg { flex-shrink: 0; }

/* Detalle de la marca */
.gc-hero { border-radius: 18px; overflow: hidden; aspect-ratio: 1.58 / 1; max-width: 380px;
  margin: 4px auto 16px; background: #111; box-shadow: 0 12px 34px rgba(0,0,0,.34); }
.gc-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-promo { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; margin-bottom: 4px;
  background: linear-gradient(135deg, rgba(169,169,172,.16), rgba(215,215,218,.07));
  border: 1px solid rgba(169,169,172,.45); border-radius: 15px; }
.gc-promo svg { flex-shrink: 0; margin-top: 1px; }
.gc-promo > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc-promo b { font-size: 14px; font-weight: 800; color: #C1C1C4; }
.gc-promo span { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.gc-amts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.gc-amt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--text);
  cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.gc-amt:hover { border-color: var(--accent); }
.gc-amt:active { transform: scale(.97); }
.gc-amt.on { border-color: var(--accent); background: rgba(147,147,150,.10); }
.gc-amt b { font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.gc-amt span { font-size: 11px; color: var(--text-dim); }
.gc-custom { margin-top: 12px; }
.gc-custom label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 7px; }
.gc-custom-in { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; }
.gc-custom-in span { font-size: 19px; font-weight: 800; color: var(--text-dim); }
.gc-custom-in .input { border: none; background: transparent; padding: 14px 0; font-size: 20px;
  font-weight: 800; letter-spacing: -.5px; }
.gc-quote { margin: 16px 0 14px; }
.gc-quote-msg { font-size: 12.5px; color: var(--text-dim); text-align: center; padding: 10px 0; }
.gc-quote-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px; font-size: 13px; color: var(--text-dim); border-bottom: 1px solid var(--line); }
.gc-quote-row b { font-weight: 700; color: var(--text); }
.gc-quote-row.total { border-bottom: none; font-size: 14.5px; color: var(--text); font-weight: 700; }
.gc-quote-row.total b { font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.gc-ahorro { color: #A2A2A5 !important; }
.gc-quote-bal { font-size: 11.5px; color: var(--text-dim); text-align: right; }
.gc-quote-bal.bad { color: #929295; }

/* La gift card dentro de la pila de la Billetera */
/* La pila pone las tarjetas en display:block; esta necesita columna para que el rótulo
   quede arriba y el saldo pegado abajo, encima del velo oscuro. */
.dcard-gift, .cards-stack .dcard-gift { display: flex; flex-direction: column;
  background-size: cover; background-position: center; position: relative; overflow: hidden; }
.dcard-gift .gcard-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.72) 100%); }
.dcard-gift.pend { filter: saturate(.72); }
.gcard-top { position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 2px 2px 0; }
.gcard-brand { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.gcard-st { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: rgba(15,15,18,.72); color: #D7D7DA; }
.gcard-foot { position: relative; margin-top: auto; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 12px; }
.gcard-f label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px;
  color: rgba(255,255,255,.72); margin-bottom: 2px; }
.gcard-f div { font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.gcard-f.right { text-align: right; }
.gcard-f.right div { font-size: 14px; opacity: .82; }
.cpc-mini.cpc-gift { background-size: cover; background-position: center; }

/* Página de la gift card del cliente */
.gc-saldo { text-align: center; padding: 18px 16px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; margin-bottom: 4px; }
.gc-saldo label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-dim); }
.gc-saldo-n { font-size: 34px; font-weight: 800; letter-spacing: -1.2px; margin: 5px 0 12px; }
.gc-saldo > span { font-size: 11.5px; color: var(--text-dim); }
.gc-bar { height: 7px; border-radius: 999px; background: var(--card); overflow: hidden; margin-bottom: 10px; }
.gc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent);
  transition: width .5s cubic-bezier(.2,.7,.3,1); }
.gc-data { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 3px 14px; }
.gc-drow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line); }
.gc-drow:last-child { border-bottom: none; }
.gc-drow label { font-size: 12.5px; color: var(--text-dim); flex-shrink: 0; }
.gc-dval { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap;
  justify-content: flex-end; }
.gc-dval > span { font-size: 14.5px; font-weight: 700; letter-spacing: .5px; word-break: break-all; }
.gc-copy { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--card);
  color: var(--text-dim); cursor: pointer; flex-shrink: 0; }
.gc-copy:hover { color: var(--accent); border-color: rgba(147,147,150,.45); }
.gc-sp { display: flex; flex-direction: column; gap: 7px; }
.gc-sp-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 13px; }
.gc-sp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gc-sp-tx b { font-size: 14px; font-weight: 700; }
.gc-sp-tx span { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }
.gc-sp-del { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px;
  flex-shrink: 0; border-radius: 8px; }
.gc-sp-del:hover { color: var(--red); background: rgba(149,149,152,.10); }
.btn.gc-del { color: var(--red); border-color: rgba(149,149,152,.35); }
.gc-badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.gc-badge.wait { background: rgba(201,201,204,.16); color: #C9C9CC; }
.gc-badge.ok { background: rgba(162,162,165,.16); color: #A2A2A5; }
.gc-badge.bad { background: rgba(146,146,149,.16); color: #929295; }

/* Fila de acceso dentro de la Billetera */
.gc-quick { margin-top: 12px; }

/* ── Database → Gift cards (solo el creador) ─────────────────────────────── */
.gca-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 2px 0 12px; }
@media (min-width: 700px) { .gca-top { display: flex; align-items: center; flex-wrap: wrap; } }
.gca-stat { display: flex; flex-direction: column; padding: 9px 13px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 13px; }
.gca-stat b { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.gca-stat span { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; text-transform: uppercase; letter-spacing: .4px; }
.gca-stat.hot { border-color: rgba(201,201,204,.5); background: rgba(201,201,204,.09); }
.gca-stat.hot b { color: #C9C9CC; }
/* Los dos botones (cuota y visibilidad) comparten fila en el teléfono: uno por fila
   empujaba las solicitudes media pantalla hacia abajo. */
.gca-fee { width: 100%; padding: 10px 8px; font-size: 12px; }
@media (min-width: 700px) { .gca-fee { width: auto; padding: 10px 13px; font-size: 12.5px; }
  .gca-top #gca-fee { margin-left: auto; } }
.gca-tabs { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.gca-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text-dim); font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.gca-tab.on { color: var(--text); border-color: var(--accent); background: rgba(147,147,150,.10); }
.gca-tab span { font-size: 11px; font-weight: 700; background: var(--card); border-radius: 999px; padding: 1px 7px; }
/* ── Pestaña "Tarjetas" del panel: tarjetas del tablero y galería ─────────── */
.ck-card { align-items: flex-start; gap: 10px; }
.ck-art { width: 54px; flex-shrink: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1.58 / 1;
  background: #111; }
.ck-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }
/* Cliente de una empresa con fondo (Habana Brother y las que vengan): su tarjeta NO la paga
   él, la paga el fondo de la empresa. Se marca en el tablero para no cobrarle a quien no es. */
.ck-emp { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 7px;
          border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
          color: var(--gold, #d9a441); background: rgba(217, 164, 65, .12);
          border: 1px solid rgba(217, 164, 65, .28); }
.ck-emp svg { opacity: .9; }
.ck-emp-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
              color: var(--gold, #d9a441); background: rgba(217, 164, 65, .12);
              border: 1px solid rgba(217, 164, 65, .28); border-radius: 999px;
              padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.ck-ts { font-size: 10.5px; color: var(--text-dim); opacity: .8; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.ck-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ck-barra .gca-fee { width: auto; }
.ck-aviso { font-size: 12px; color: var(--text-dim); }
/* Galería SIN la foto de la tarjeta: fichas de datos, que es lo que se lee de un vistazo */
.ck-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ck-g { display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 12px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); cursor: pointer; text-align: left; overflow: hidden;
  transition: transform .12s ease, border-color .12s ease; }
.ck-g:hover { border-color: var(--accent); }
.ck-g:active { transform: scale(.99); }
.ck-g-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ck-g-top b { font-size: 12.5px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-g-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ck-g-who { min-width: 0; display: flex; flex-direction: column; }
.ck-g-who b { font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-g-who i { font-style: normal; font-size: 10.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-g-bal { font-size: 17px; font-weight: 800; letter-spacing: -.4px; flex-shrink: 0; }
.gca-note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px; font-size: 12.5px; line-height: 1.45; }
.gca-note svg { color: #C9C9CC; flex-shrink: 0; margin-top: 1px; }
.gca-warn { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin-bottom: 12px;
  background: rgba(201,201,204,.10); border: 1px solid rgba(201,201,204,.38); border-radius: 13px;
  font-size: 12.5px; line-height: 1.45; }
.gca-warn svg { color: #C9C9CC; flex-shrink: 0; margin-top: 1px; }
.gca-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; margin: 16px 0 10px; }
.gca-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 900px) { .gca-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.gca-r { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px;
  background: var(--panel); border: 1px solid rgba(201,201,204,.35); border-radius: 14px; color: var(--text);
  cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.gca-r:hover { border-color: #C9C9CC; }
.gca-r:active { transform: scale(.99); }
.gca-r.done { border-color: var(--line); }
.gca-r-art { width: 62px; flex-shrink: 0; border-radius: 9px; overflow: hidden; aspect-ratio: 1.58 / 1; background: #111; }
.gca-r-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gca-r-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gca-r-tx b { font-size: 13.5px; font-weight: 700; }
.gca-r-tx span { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }
.gca-r-ts { font-size: 10.5px !important; opacity: .8; }
.gca-brands { display: flex; flex-direction: column; gap: 9px; }
@media (min-width: 900px) { .gca-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } }
.gca-b { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--text); cursor: pointer; }
.gca-b:hover { border-color: var(--accent); }
.gca-b.off { opacity: .5; }
.gca-b-art { width: 72px; flex-shrink: 0; border-radius: 9px; overflow: hidden; aspect-ratio: 1.58 / 1; background: #111; }
.gca-b-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gca-b-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gca-b-tx b { font-size: 13.5px; font-weight: 700; }
.gca-b-tx span { font-size: 11px; color: var(--text-dim); overflow-wrap: anywhere; }
.gca-b-code { color: #C1C1C4 !important; }
.gca-b-code b { font-size: 11px; font-weight: 800; }
.gca-bhero { border-radius: 14px; overflow: hidden; aspect-ratio: 1.58 / 1; max-width: 230px;
  margin: 0 auto 14px; background: #111; }
.gca-bhero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gca-code { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(169,169,172,.14), rgba(215,215,218,.06));
  border: 1px solid rgba(169,169,172,.42); border-radius: 14px; }
.gca-code svg { flex-shrink: 0; margin-top: 1px; }
.gca-code > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gca-code b { font-size: 13.5px; font-weight: 800; color: #C1C1C4; letter-spacing: .3px; }
.gca-code span { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.gca-det { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; margin-bottom: 12px; }
.gca-det-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.gca-det-row:last-child { border-bottom: none; }
.gca-det-row span { color: var(--text-dim); }
.gca-det-row b { font-weight: 700; text-align: right; word-break: break-word; }
.gca-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gca-chk { display: flex; align-items: center; gap: 9px; font-size: 13px; margin: 4px 0 14px; cursor: pointer; }
.gca-chk input { width: 17px; height: 17px; accent-color: var(--accent); }
.gca-bad { color: #929295; }
.btn.ghost.danger { color: var(--red); border-color: rgba(149,149,152,.45); }

/* ── Analítica del panel /db (rediseño 2026-08-05) ─────────────────────────────
   Una sola pantalla: arriba la tira de indicadores (todos con la MISMA forma, para
   leerlos de un golpe) y abajo el mapa de Cuba con el detalle al lado. Sustituye a
   la antigua columna de widgets con donut, que obligaba a bajar y bajar. */
.an { padding: 0 2px 18px; }
/* En el telefono van DOS por fila y bien apretados: con uno por fila habia que bajar media
   pantalla antes de llegar al mapa. En PC son CUATRO columnas fijas: con el balance ocupando
   dos, los siete indicadores llenan dos filas exactas y no queda un hueco al final. */
.an-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
@media (min-width: 1000px) { .an-kpis { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } }
.kp {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; text-align: left; display: block; width: 100%;
  transition: border-color .16s, transform .16s;
}
@media (min-width: 1000px) { .kp { border-radius: 16px; padding: 13px 15px; } }
.kp-nav { cursor: pointer; }
.kp-nav:hover { border-color: var(--accent); transform: translateY(-1px); }
.kp-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.kp-h svg { color: var(--accent); flex: 0 0 auto; }
.kp-h span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-v { font-size: 19px; font-weight: 800; letter-spacing: -.5px; margin: 4px 0 2px; }
.kp-s { font-size: 10.5px; color: var(--text-dim); line-height: 1.4; }
@media (min-width: 1000px) { .kp-v { font-size: 24px; margin: 6px 0 3px; } .kp-s { font-size: 11.5px; line-height: 1.45; } }
/* El balance es el número que manda: ocupa el doble y se tiñe de verde como antes. */
.kp-hero { background: linear-gradient(180deg, rgba(171,171,174,.10), var(--panel)); border-color: rgba(171,171,174,.30); }
.kp-hero .kp-h svg { color: #ABABAE; }
.kp-hero { grid-column: span 2; }
.kp-hero .kp-v { font-size: 26px; }
@media (min-width: 1000px) { .kp-hero .kp-v { font-size: 30px; } }

.an-main { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 1000px) { .an-main { grid-template-columns: minmax(0, 1.85fr) minmax(270px, 1fr); } }

/* Mapa de Cuba: SVG propio (web/data/cuba-prov.json), sin Leaflet ni tiles. */
.an-map .dash-panel-h { margin-bottom: 6px; }
.an-tg { margin-left: auto; display: flex; gap: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.an-tgb { font-size: 11.5px; font-weight: 600; color: var(--text-dim); padding: 4px 9px; border-radius: 7px; }
.an-tgb.on { background: var(--accent); color: #111114; }
.cuba-wrap { position: relative; }
.cuba-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cbp { stroke: #0e0e10; stroke-width: 1.4; cursor: pointer; transition: fill .18s, filter .18s; }
.cbp:hover { filter: brightness(1.45); }
.cbp.on { stroke: var(--text); stroke-width: 2.4; filter: brightness(1.3); }
.cbl { fill: var(--text); font-size: 12px; font-weight: 700; pointer-events: none;
       paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 3px; }
/* En el telefono el mapa se ve mas chico: las cifras necesitan mas cuerpo para leerse. */
@media (max-width: 999px) { .cbl { font-size: 16px; stroke-width: 4px; } }
.cuba-leg { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.cuba-leg i { width: 18px; height: 8px; border-radius: 2px; display: block; }
.cuba-leg b { margin-left: auto; color: var(--text); font-size: 12px; }

/* Panel del lado: ranking de provincias o los municipios de la que se tocó. */
/* En PC la lista scrollea dentro del panel para no estirar la pantalla; en el telefono se
   deja correr con la pagina, que es como se lee ahi. */
.an-side { max-height: none; }
@media (min-width: 1000px) { .an-side { max-height: 520px; overflow: auto; } }

/* ════════ Pestaña Usuarios: balance suelto + lista en su bloque + mapa/ranking al lado ════════
   Tres bloques que se leen solos: arriba a la izquierda el dinero, debajo la lista con su propio
   scroll, y a la derecha el mapa con el ranking terminando en el borde de abajo de la pantalla.
   En el telefono se apila y manda el scroll de la pagina, que es como se lee ahi. */
.usr-balbox { margin-bottom: 14px; }
.usr-listbox { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
/* En el telefono la lista tambien vive en su caja: sin tope eran 11 000 px de scroll para llegar
   al mapa. Con 62dvh se ve media pantalla de cuentas y el mapa queda a un pulgar de distancia. */
.usr-listscroll { display: flex; flex-direction: column; max-height: 62dvh; overflow-y: auto; }
.usr-right .an-side { max-height: 58dvh; overflow-y: auto; }
.usr-right { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

/* Barra de scroll fina y discreta dentro de los bloques (Firefox + WebKit). */
.usr-listscroll, .an-side { scrollbar-width: thin; scrollbar-color: #3B3B3E transparent; }
.usr-listscroll::-webkit-scrollbar, .an-side::-webkit-scrollbar { width: 8px; }
.usr-listscroll::-webkit-scrollbar-thumb, .an-side::-webkit-scrollbar-thumb {
  background: #3B3B3E; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.usr-listscroll::-webkit-scrollbar-track, .an-side::-webkit-scrollbar-track { background: transparent; }

@media (min-width: 1000px) {
  /* 50/50 y ambas columnas hasta el borde inferior: --usr-h la calcula el JS con el alto real. */
  .usr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
               gap: 14px; align-items: stretch; height: var(--usr-h, 72dvh); }
  .usr-left { display: flex; flex-direction: column; min-height: 0; }
  .usr-listbox { flex: 1 1 auto; min-height: 0; display: flex; }
  .usr-listscroll { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding-right: 4px; }
  .usr-right { margin-top: 0; min-height: 0; }
  .usr-right .an-side { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  .db-view .usr-left .db-scroll { grid-template-columns: 1fr; }   /* una sola columna, pediste */
  /* El saldo, a la derecha de la tarjeta y a media altura: la columna de cifras se lee de arriba
     abajo sin buscarla dentro del texto. */
  .db-view .db-scroll-users > .user-card { align-items: center; }
  .db-view .user-card > .uc-bal { flex: 0 0 auto; margin: 0 0 0 12px; text-align: right;
                                  align-self: center; white-space: nowrap; }
  /* Tarjetas de la lista: dentro del bloque van sin sombra propia y con un hover sobrio (color y
     borde, nunca escala: mover la tarjeta bajo el cursor se siente barato). */
  .db-view .usr-left .user-card { box-shadow: none; background: var(--card);
                                  transition: background .16s ease, border-color .16s ease; }
  .db-view .usr-left .user-card:hover { background: rgba(147,147,150, .09); border-color: var(--accent); }
  .db-view .usr-left .user-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .db-view .usr-left .user-card { transition: none; }
}
.an-back { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
           background: var(--bg2); border: 1px solid var(--line); color: var(--text); }
.an-back svg { transform: rotate(180deg); }
.an-side-tot { font-size: 20px; font-weight: 800; margin: -4px 0 10px; }
.an-side-tot i { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.an-munis { display: flex; flex-direction: column; gap: 2px; }
.an-muni { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 9px;
           font-size: 12.5px; width: 100%; text-align: left; }
.an-muni-b { cursor: pointer; }
.an-muni-b:hover { background: var(--bg2); }
.an-muni-n { flex: 0 0 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-muni-bar { flex: 1; height: 6px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.an-muni-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.an-muni b { flex: 0 0 auto; color: var(--accent); font-size: 12.5px; }

/* ── Tarjeta recargable (Visa · Estados Unidos) ────────────────────────────── */
/* Encabeza el catálogo que abre el "+" de la Billetera: es la única tarjeta que se
   puede volver a cargar, así que va ancha y sola, no dentro de la rejilla de marcas. */
.gc-h1 { margin-top: 2px; }
/* La recargable usa la MISMA caja que las marcas (.gc-tile): solo se distingue por el
   precio de emisión en color de acento. */
.rc-tile-p { font-size: 10.5px !important; font-weight: 700; color: var(--accent) !important; }
/* Lo que incluye la tarjeta */
.rc-perks { list-style: none; margin: 0 0 16px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 15px; display: flex; flex-direction: column; gap: 8px; }
.rc-perks li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.35; }
.rc-perks svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
/* Botonera de la ficha */
.rc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.rc-acts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 2px; }
/* Congelar y ver los datos van en la barra de arriba, no dentro del bloque del saldo */
.rc-tb-acts { display: flex; align-items: center; gap: 8px; }
/* Bloque del saldo bajito: el número a la izquierda y Recargar a su lado */
.rc-saldo { text-align: left; padding: 14px 15px; }
.rc-saldo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-saldo-l { min-width: 0; }
.rc-saldo .gc-saldo-n { font-size: 30px; margin: 3px 0 0; }
/* El saldo y, a su lado, el botón de actualizar (vuelve a pedírselo al emisor) */
.rc-bal-row { display: flex; align-items: center; gap: 10px; }
.rc-saldo .rc-refresh { margin-left: 0; width: 28px; height: 28px; flex-shrink: 0; }
.rc-saldo > span { display: block; margin-top: 7px; }
.rc-fund-btn { flex-shrink: 0; width: auto; margin: 0; padding: 11px 16px; }
/* Los datos de la tarjeta, encima del arte. El arte mide lo mismo que el bloque del saldo. */
.rc-hero { position: relative; max-width: none; width: 100%; }
/* La dirección es larga: rótulo arriba y el texto debajo, sin partir palabras a la mitad */
.rc-bill { margin-top: 10px; }
.rc-bill .gc-drow { flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 0; }
.rc-bill .gc-dval { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
.rc-bill .gc-dval > span { font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  word-break: normal; overflow-wrap: anywhere; }
.rc-face { position: absolute; inset: 0; display: none; flex-direction: column;
  justify-content: flex-end; padding: 16px 16px 15px; color: #fff;
  background: linear-gradient(180deg, rgba(7,7,10,.42) 0%, rgba(7,7,10,.80) 100%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.rc-face.on { display: flex; }
.rc-face-msg { margin: auto; font-size: 13px; color: rgba(255,255,255,.86); }
.rc-face-in { display: flex; flex-direction: column; gap: 12px; }
.rc-fnum { display: flex; align-items: center; gap: 8px; }
.rc-fnum span { font-size: clamp(16px, 5.2vw, 21px); font-weight: 700; letter-spacing: 1.6px;
  text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.rc-frow { display: flex; align-items: flex-end; gap: 22px; }
.rc-fi label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .8px;
  color: rgba(255,255,255,.66); margin-bottom: 2px; }
.rc-fv { display: flex; align-items: center; gap: 6px; }
.rc-fv b { font-size: 15px; font-weight: 700; letter-spacing: 1px;
  text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* El nombre no puede montarse encima del logo de la marca, que va abajo a la derecha */
.rc-fname { max-width: 72%; font-size: 12.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-fcp { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  flex-shrink: 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; padding: 0; }
.rc-fcp:hover { background: rgba(255,255,255,.24); }
.rc-tx-amt { font-size: 14px; font-weight: 700; white-space: nowrap; }
/* La recargable dentro de la pila de la Billetera */
.dcard-rc, .cards-stack .dcard-rc { display: flex; flex-direction: column;
  background-size: cover; background-position: center; position: relative; overflow: hidden; }
.dcard-rc .rcard-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.70) 100%); }
.dcard-rc.susp { filter: saturate(.6); }
.rcard-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; padding: 2px 2px 0; }
/* El saldo vive arriba a la derecha; los últimos 4, abajo a la izquierda. */
.rcard-bal div { font-size: 20px; opacity: 1; }
.rcard-brand { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.rcard-st { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: rgba(16,16,19,.72); color: #CECED1; }
.rcard-foot { position: relative; margin-top: auto; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 12px; }
.rcard-f label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px;
  color: rgba(255,255,255,.72); margin-bottom: 2px; }
.rcard-f div { font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.rcard-f.right { text-align: right; }
.rcard-f.right div { font-size: 14px; opacity: .85; }

/* Plataformas donde mejor pasa cada tarjeta (van donde antes iba su foto) */
.rc-plats { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.rc-plat { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); color: var(--text); }
.rc-plat.mas { color: var(--text-dim); font-weight: 500; border-style: dashed; }
/* En los tiles de las recargables el nombre puede ocupar dos líneas (son largos) */
.rc-tile .gc-tile-tx b { white-space: normal; line-height: 1.25; }
.rc-perks li.no svg { color: var(--text-dim); }

/* ── MODO PROMUÉVELO ────────────────────────────────────────────────────────────────
   Cuando la ficha de producto y el pago se sirven desde promuevelo.com, la casa es
   Promuévelo: mismos colores que su web (index.html de /var/www/promuevelo) para que
   el cliente del promotor no vea de pronto la marca de otro. La estructura y el código
   son los mismos; solo cambian las variables de color. */
body.tema-promuevelo {
  --bg:       #0B0B0C;   /* papel-hondo */
  --bg2:      #131315;   /* papel */
  --panel:    #1A1A1E;
  --panel2:   #232328;   /* papel-alto */
  --card:     #232328;
  --line:     #2C2C33;
  --text:     #E5E4E2;   /* tinta */
  --text-dim: #8A8A93;   /* grafito */
  --accent:   #C9C9D2;   /* su azul */
  --red:      #6E6E76;   /* teja */
}

/* La tipografía de Promuévelo (Archivo), servida desde su propia web. Solo se descarga
   cuando la clase está puesta, así que en desbloqueados.com ni se pide. */
@font-face {
  font-family: "ArchivoPV";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
body.tema-promuevelo,
body.tema-promuevelo button,
body.tema-promuevelo input,
body.tema-promuevelo select,
body.tema-promuevelo textarea {
  font-family: "ArchivoPV", "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ── Pestaña "Por revisar" de la Database ────────────────────────────────────────── */
.rev-h { font-size: 14px; font-weight: 800; margin: 18px 2px 10px; display: flex; align-items: center; gap: 8px; }
.rev-h span { font-size: 12px; font-weight: 700; background: var(--accent); color: #fff;
  border-radius: 999px; padding: 1px 9px; }
.rev-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; margin-bottom: 10px; }
.rev-top { display: flex; gap: 12px; align-items: flex-start; }
.rev-img { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; flex: none; }
.rev-noimg { display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--text-dim); }
.rev-info { min-width: 0; flex: 1; }
.rev-name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.rev-meta { font-size: 13.5px; color: var(--text); margin-top: 3px; font-weight: 600; }
.rev-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.rev-desc { font-size: 13px; color: var(--text-dim); margin-top: 10px; line-height: 1.5;
  background: var(--panel); border-radius: 10px; padding: 10px 12px; }
.rev-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rev-acts .btn { flex: 1; min-width: 104px; padding: 10px 12px; font-size: 13.5px;
  border-radius: 11px; text-align: center; text-decoration: none; }
.rev-acts .btn.ok { background: var(--green); color: #1C1C1F; font-weight: 700; }
.rev-acts .btn.gray { background: var(--panel); color: var(--text); border: 1px solid var(--line); }

/* Pasarela de cobros: banderitas de la ficha del que pide claves (Database → Pasarela).
   Se leen de un vistazo para decidir sin tener que ir a buscar a la persona a otra pantalla. */
.pay-flag { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  letter-spacing: .2px; white-space: nowrap; }
.pay-flag.ok  { background: rgba(166,166,169,.14); color: var(--green); }
.pay-flag.esp { background: rgba(191,191,194,.13); color: #BFBFC2; }
.pay-flag.no  { background: rgba(149,149,152,.13); color: var(--red); }

/* ── Tablero de Tarjetas: ficha de la solicitud (build 1913) ─────────────────────── */
/* El correo lleva a la ficha del usuario, así que se ve y se toca como un enlace. */
.ck-mail { color: var(--accent); text-decoration: none; border-bottom: 1px dashed currentColor; }
.ck-mail:active { opacity: .6; }
.ck-dinero { font-size: 13px; color: var(--text-dim); text-align: right; }
.ck-dinero b { font-weight: 800; }
/* Monto editable mientras la solicitud está en Pendiente o Enviado. */
.ck-monto { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 12px; }
.ck-monto label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.ck-monto-row { display: flex; gap: 8px; align-items: stretch; }
/* .btn y .input nacen con width:100%, así que sin esto el botón empuja al input hasta
   dejarlo en una cajita y se sale por el lado. */
.ck-monto-row .input { flex: 1 1 auto; width: auto; min-width: 0; }
.ck-monto-row .btn { flex: 0 0 auto; width: auto; padding-left: 20px; padding-right: 20px; }
.ck-monto-nota { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.45; }
/* Botones para mover la solicitud de columna, uno debajo del otro. */
.ck-pasos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* Movimientos con el saldo que quedó debajo del monto (ficha del usuario). */
.tx .tam { flex-shrink: 0; text-align: right; }
.tx .tbal { font-size: 11px; color: var(--text-dim); font-weight: 600; margin-top: 2px; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   PC — PULIDO DE LA INTERFAZ (2026-08-21). SOLO ≥1000px, el móvil NO se toca.
   Va al final del archivo a propósito: no pisa ninguna regla anterior, solo
   corrige lo que quedó roto y aprovecha el ancho de una pantalla de verdad.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {

  /* ── 1. LA BILLETERA ESTABA ROTA ─────────────────────────────────────────
     Cuando la billetera de móvil pasó a ocupar la pantalla entera (build 1898),
     `.view-wallet .sheet` se volvió un flex en columna. En un flex, un hijo con
     `margin: 0 auto` DEJA de estirarse y se encoge a su contenido: `.wnx` medía
     396px en vez de 1180 y la celda `minmax(0,1fr)` de Movimientos se resolvía
     a 0px de ancho. La lista tenía sus 62 filas dentro, pero invisibles: solo
     se veía la barrita blanca del scroll. */
  .wnx { width: 100%; align-self: stretch; }

  /* ── 2. FUERA LA BARRA DE MÓVIL DENTRO DE LA BILLETERA ────────────────────
     En PC la cuenta y el saludo ya están en el nav de arriba; la `.topbar` solo
     dejaba un círculo de usuario suelto y cortado en la esquina. */
  .view-wallet > .topbar { display: none; }
  .view-wallet .sheet { padding: 24px 24px 16px; }

  /* ── 3. SIN SCROLL DE MÁS ─────────────────────────────────────────────────
     El nav fijo ocupa 64px y `#app` los compensa con padding, pero las vistas
     seguían midiendo 100dvh: sobraban justo 64px de scroll en toda la app. */
  #app > .view { min-height: calc(100dvh - 64px); }
  .view-wallet { height: calc(100dvh - 64px); }

  /* ── 4. BARRAS DE DESPLAZAMIENTO OSCURAS ──────────────────────────────────
     Salían blancas de fábrica y cortaban el panel oscuro por la mitad. */
  .wnx-txlist, .sup-msgs, .sup-drawer, .acct-sub-wrap, .pf2-col {
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
  .wnx-txlist::-webkit-scrollbar, .sup-msgs::-webkit-scrollbar,
  .sup-drawer::-webkit-scrollbar { width: 9px; }
  .wnx-txlist::-webkit-scrollbar-track, .sup-msgs::-webkit-scrollbar-track,
  .sup-drawer::-webkit-scrollbar-track { background: transparent; }
  .wnx-txlist::-webkit-scrollbar-thumb, .sup-msgs::-webkit-scrollbar-thumb,
  .sup-drawer::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
  .wnx-txlist::-webkit-scrollbar-thumb:hover, .sup-msgs::-webkit-scrollbar-thumb:hover,
  .sup-drawer::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: content-box; }

  /* ── 5. LA BILLETERA RESPIRA ──────────────────────────────────────────────
     Con el ancho recuperado hay sitio para separar las dos columnas y para que
     el saldo se lea como el número más importante de la pantalla. */
  .wnx-main { gap: 20px; }
  .wnx-hero-in { padding: 22px 24px; }
  .wnx-amt { font-size: 44px; }
  .wnx-mov { padding: 20px 20px 12px; }
  .wnx-mov-head h3 { font-size: 17px; }
  .wnx-tx { padding: 12px 12px; }
  .wnx-tx-tx b { font-size: 14px; }

  /* ── 6. LA BURBUJA DE SOPORTE ─────────────────────────────────────────────
     El 21-ago se escondió en PC porque el nav llevaba el enlace "Soporte". Ese
     menú se quitó ese mismo día, así que la burbuja VUELVE: es la única puerta
     al Soporte y abre el widget flotante (no la pantalla completa). */

  /* ── 7. CUENTA A DOS COLUMNAS ─────────────────────────────────────────────
     Era la pantalla del teléfono estirada en el centro. Ahora la ficha (foto y
     nombre) queda fija a la izquierda y los ajustes a la derecha. */
  /* OJO: la clase .acct-sub-wrap la comparten el detalle de un pedido y la pantalla de
     direcciones, que NO llevan ficha de perfil. El :has() acota el grid a la Cuenta:
     sin él, esas dos pantallas se meterían enteras en la columna de 320px. */
  .acct-sub-wrap:has(> .acct-id) {
    display: grid; grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px; align-items: start; align-content: start;
    max-width: 1080px; margin: 0 auto; padding: 26px 24px 40px; }
  .acct-sub-wrap > .acct-id {
    grid-column: 1; position: sticky; top: 88px;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 20px;
    padding: 26px 20px 24px; margin: 0; }
  .acct-sub-wrap > .pf2-col { grid-column: 2; margin: 0; max-width: none; }
  .acct-sub-wrap > .pf2-col + .pf2-col { margin-top: -8px; }
  .pf2-row { padding-top: 15px; padding-bottom: 15px; }
  .pf2-row:hover { background: rgba(255,255,255,.04); }
  .pf2-ver { text-align: center; }

  /* ── 8. SOPORTE CON ANCHO DE LECTURA ──────────────────────────────────────
     Las burbujas se estiraban más de 1000px: una línea de texto tan larga no
     se lee. Se acotan y el hilo se centra en su columna. */
  .sup-side .sup-msgs { padding: 22px 26px; }
  .sup-side .sup-row { max-width: min(760px, 72%); }
  .sup-side .sup-bub { font-size: 15px; }
  .sup-side .sup-compose { padding-left: 26px; padding-right: 26px; }
}

/* Pantallas grandes de verdad: la columna del saldo puede crecer sin apretar
   la lista de movimientos. */
@media (min-width: 1440px) {
  .wnx-main { grid-template-columns: 420px minmax(0, 1fr); }
}

/* ── PC (2ª tanda) — la billetera llena la pantalla y el soporte se lee ────── */
@media (min-width: 1000px) {

  /* 9. Antes los dos paneles terminaban a media pantalla y dejaban 300px de negro
        debajo. Ahora el bloque ocupa el alto disponible y las DOS columnas acaban
        en el mismo píxel, abajo del todo: la lista de tarjetas y la de movimientos
        se desplazan cada una dentro de su caja. */
  .view-wallet #w-tab-body > .wnx { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  .view-wallet .wnx-main { flex: 1 1 auto; min-height: 0; }
  .view-wallet .wnx-left { min-height: 0; }
  .view-wallet .wnx-hero { flex: 0 0 auto; }
  .view-wallet .wnx-left > #card-box { flex: 1 1 auto; min-height: 0; display: flex; }
  /* Desde que el panel lo encabeza el arte de la tarjeta, el que se desplaza es el
     PANEL ENTERO, no la lista: si scrolleara solo la lista, con la tarjeta arriba le
     quedaban tres dedos de alto y no se leía ninguna fila. */
  .view-wallet .wnx-left > #card-box > .wgc { flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
  .view-wallet .wnx-left > #card-box > .wgc::-webkit-scrollbar { width: 9px; }
  .view-wallet .wnx-left > #card-box > .wgc::-webkit-scrollbar-track { background: transparent; }
  .view-wallet .wnx-left > #card-box > .wgc::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14);
    border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
  .view-wallet .wgc-list { flex: 0 0 auto; }
  .view-wallet .wnx-movwrap { min-height: 0; }
  .view-wallet .wnx-main.solo .wnx-movwrap { min-height: 0; }

  /* 10. El hilo del soporte se centra con ancho de lectura: en 1600px las burbujas
         llegaban a medir más de 1000px de largo y el ojo se pierde al volver. */
  .sup-side .sup-msgs { padding-left: max(26px, calc((100% - 880px) / 2));
                        padding-right: max(26px, calc((100% - 880px) / 2)); }
  .sup-side .sup-compose { padding-left: max(14px, calc((100% - 900px) / 2));
                           padding-right: max(14px, calc((100% - 900px) / 2)); }
  .sup-side .sup-top { padding-left: max(14px, calc((100% - 900px) / 2)); }
  .sup-side .lkchat-chips { padding-left: max(14px, calc((100% - 900px) / 2));
                            padding-right: max(14px, calc((100% - 900px) / 2)); }
}

/* ── PC (3ª tanda) — el aviso de notificaciones se mudó de esquina ─────────── */
@keyframes nbInPC { from { transform: translateY(-130%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 1000px) {
  /* El banner que pide permiso para las notificaciones nacía en top:0 con z-index 48,
     o sea DEBAJO del nav de PC (z-index 50): en la pantalla solo se adivinaba una
     mancha verde borrosa detrás de la barra. Arriba no cabe (ahí asoma la barrita de
     canales), así que en computadora baja a la esquina de abajo a la derecha, que es
     justo la que dejó libre la burbuja de soporte. */
  /* Acaba ARRIBA A LA DERECHA, colgando del nav: abajo a la derecha está la burbuja de
     Soporte y abajo a la izquierda tapaba el panel de la tarjeta. Arriba el único vecino
     es la barrita de canales, que va centrada y no llega hasta este borde. */
  .notif-banner {
    top: 78px; bottom: auto; right: 22px; left: auto; transform: none;
    width: 420px; max-width: calc(100vw - 44px);
    border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
    animation: nbInPC .32s cubic-bezier(.22,.61,.36,1); }
}

/* ── PC (4ª tanda) — los métodos de depósito en dos columnas ───────────────── */
@media (min-width: 1000px) {
  /* Es la pantalla que más se usa después de la billetera y era una tira estrecha
     de 720px en medio de la pantalla, con 20 métodos uno debajo de otro. */
  .dep-page .dep-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px; max-width: 1080px; margin: 0 auto; padding: 20px 24px 40px; }
  .dep-page .dep-list > .dep-method { padding-left: 12px; padding-right: 12px; border-radius: 12px; }
  .dep-page .dep-list > .dep-method:hover { background: rgba(255,255,255,.04); }
}

/* ── PC (5ª tanda) — las subpantallas vuelven a decir dónde estás ──────────── */
@media (min-width: 1000px) {
  /* Más arriba se decidió esconder toda la topbar interna en PC porque el título
     duplicaba el del nav y "se colaba encima del nav fijo". Cierto para las pantallas
     del propio nav (Billetera, Cuenta), pero NO para las de dentro: en "Métodos de
     depósito" o en el detalle de un movimiento no quedaba ni título ni manera de
     volver, solo un vacío arriba. Cuando la barra lleva botón de atrás, se muestra
     otra vez, ya sin fondo ni barra: un encabezado limpio bajo el nav. */
  body:not(.apply-iso) .topbar:has(> .tb-back) {
    height: auto !important; overflow: visible !important;
    display: flex; align-items: center; gap: 2px;
    /* El width:100% es obligatorio: .view es un flex en columna y sin él el
       `margin: 0 auto` encoge la cabecera al ancho del botón (el mismo tropiezo
       que dejaba la columna de Movimientos en 0px). */
    width: 100%; max-width: 1080px; margin: 0 auto !important; padding: 22px 24px 4px !important; }
  body:not(.apply-iso) .topbar:has(> .tb-back) .tb-back { display: inline-flex !important;
    width: 38px; height: 38px; border-radius: 11px; }
  body:not(.apply-iso) .topbar:has(> .tb-back) .tb-back:hover { background: var(--bg2); }
  body:not(.apply-iso) .topbar:has(> .tb-back) .tb-title {
    display: inline-block !important; font-size: 21px !important; letter-spacing: -.4px !important; }

  /* Ese encabezado y la lista de métodos comparten margen: las dos cajas de 1080px
     tienen que empezar en el mismo píxel de la izquierda. */
  .dep-page .dep-list { padding-top: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PC — BARRA CON EL USUARIO, TARJETA EN GRANDE Y SOPORTE FLOTANTE (2026-08-21)
   Orden del jefe: fuera el menú y la campana de la barra de arriba; en su lugar
   la foto y el saludo. El bloque de tarjetas lo encabeza la prepago. El Soporte
   vuelve a ser un widget flotante, sin preguntas frecuentes. SOLO ≥1000px.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {

  /* ── La barra de arriba: foto + "Hola, Nombre" ───────────────────────────── */
  .tn-me { display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
    background: none; border: 1px solid transparent; color: var(--text);
    padding: 4px 14px 4px 4px; border-radius: 999px; justify-self: start;
    transition: background .15s, border-color .15s; }
  .tn-me:hover { background: var(--bg2); border-color: var(--line); }
  .tn-me-av { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
    display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line);
    color: var(--text-dim); }
  .tn-me-av.has-photo { border-color: rgba(147,147,150,.5); }
  .tn-me-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tn-me-hi { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
  .tn-brand { display: inline-flex; align-items: center; gap: 9px; justify-self: start;
    font-weight: 800; font-size: 17px; letter-spacing: -.3px; }
  .tn-brand svg { color: var(--accent); }

  /* ── El bloque de tarjetas lo encabeza LA TARJETA ────────────────────────── */
  .wgc-promo { display: flex; flex-direction: column; }
  .wgc-promo-art { border-radius: 15px; overflow: hidden; border: 1px solid var(--line);
    box-shadow: 0 16px 36px rgba(0,0,0,.5); line-height: 0;
    transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s; }
  .wgc-promo:hover .wgc-promo-art { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,0,0,.6); }
  .wgc-promo-art img { display: block; width: 100%; height: auto; }
  .wgc-promo-pend { display: flex; align-items: center; gap: 7px; margin-top: 12px;
    font-size: 12px; font-weight: 700; color: var(--gold);
    background: rgba(191,191,194,.1); border: 1px solid rgba(191,191,194,.34);
    border-radius: 10px; padding: 8px 11px; }
  .wgc-promo-pend svg { flex: 0 0 auto; }
  /* Cuando debajo hay tarjetas propias, la lista se separa con una línea fina. */
  .wgc-head-mias { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
  .wgc-conpromo .wgc-list { margin-top: 10px; }

  /* ── El Soporte flotante no tapa la barra de arriba ──────────────────────── */
  /* La regla de más arriba esconde el nav siempre que exista un .sup-view, y eso
     valía cuando el Soporte ocupaba la pantalla entera. Con el widget flotante la
     página de detrás sigue viéndose, así que la barra tiene que quedarse. */
  body.chat-float-on #pc-topnav { display: block !important; }
  /* Dentro del widget (400px de ancho) manda el diseño de móvil: las reglas de
     ancho de lectura del soporte a pantalla completa se anulan solas porque
     dependen de .sup-side, que en PC ya no se pone. */
  #chat-float-host .sup-top { padding: 12px 12px 11px; }
  #chat-float-host .sup-msgs { padding: 14px 12px; }
}

/* ── PC — la tarjeta se emite desde la propia Billetera (2026-08-21) ───────── */
@media (min-width: 1000px) {
  /* La calculadora es la misma de la pantalla completa (.gcp-*), aquí solo se le
     da el aire que necesita dentro del panel de 380px. */
  .wgc-promo .gcp-calc { margin-top: 16px; margin-bottom: 0; }
  .wgc-promo #gc-go { margin-top: 14px; height: 52px; font-size: 15.5px; }
}

/* Desglose de la comisión de un depósito (mandas / comisión / se te acredita).
   Se pinta mientras el cliente escribe el monto, en móvil y en PC por igual. */
.dep-fee { margin: -4px 2px 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); }
.dep-fee-r { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--text-dim); }
.dep-fee-r + .dep-fee-r { margin-top: 7px; }
.dep-fee-r b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.dep-fee-r b.neg { color: var(--red); }
.dep-fee-r.tot { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--text); font-weight: 600; }
.dep-fee-r.tot b { font-size: 17px; font-weight: 800; color: var(--green); letter-spacing: -.3px; }
/* Casilla de la comisión en "+ Transacción" (panel): entró X, se acredita X menos el 3%. */
.atx-fee-chk { display: flex; align-items: center; gap: 9px; margin: -4px 2px 12px;
  font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.atx-fee-chk input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* ── MODO KSILLERO (ksillero.com) ────────────────────────────────────────────────────
   El casillero con casa propia. Es la MISMA app de Desbloqueados servida en otro dominio:
   misma cuenta, mismo saldo, mismos paquetes. Aquí solo cambian la marca y la navegación,
   porque en ksillero.com el casillero no es un apartado, es la pantalla de entrada.
   La paleta se queda en la oscura de siempre y el acento pasa al verde del envío. */
body.tema-ksillero {
  --accent: #C9C9D2;   /* verde "va en camino": es una app de envíos, no un marketplace */
}

/* Cabecera propia del casillero — SOLO móvil (en PC manda #pc-topnav). */
.ks-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px;
  /* El telefono del jefe reporta un inset superior alto (el hueco de la camara, no solo la
     barra de estado) y la cabecera quedaba flotando muy abajo del logo. Se le RECORTAN hasta
     12px a ese inset: el min() es el tope de lo que se puede quitar, asi que el resultado
     nunca baja de cero y en un telefono sin muesca (inset 0) no cambia nada. No es un max()
     sobre el inset, que es lo que dejaba el titulo pegado a la hora.
     24-ago-2026: el jefe la pidio "un chin mas alta y separada de arriba". Sube por los dos
     lados: mas aire propio (8px arriba / 12px abajo, antes 2 y 4) y menos recorte del inset
     (12px, antes 22), que es lo que la separa del reloj. En un telefono con muesca son unos
     16px mas de aire; en uno sin muesca, los 6px del padding. */
  --ks-recorte: min(env(safe-area-inset-top, 0px), 12px);
  padding-top: calc(8px + env(safe-area-inset-top, 0px) - var(--ks-recorte)); }
/* La muesca del telefono la respeta YA la cabecera: si .view-locker la vuelve a sumar,
   la barra baja el doble y queda un hueco enorme sobre el logo. */
body.tema-ksillero .view-locker { padding-top: 0; }
.ks-head .ks-sp { flex: 1; }
.ks-brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 17px;
  letter-spacing: -.3px; color: var(--text); white-space: nowrap; }
.ks-brand svg { color: var(--accent); }
/* El logo de Ksillero es una imagen (la caja plateada), no un icono de trazo. */
.ks-logo { display: block; object-fit: contain; flex: 0 0 auto; }
/* El saldo es un INDICADOR, no un boton: ni cursor de mano ni efecto de pulsado. */
.ks-hbtn { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px;
  border-radius: 999px; background: var(--bg2); border: 1px solid var(--line);
  color: var(--text); font-size: 13.5px; cursor: default; user-select: none; }
.ks-hbtn b { font-weight: 700; }
/* Salir: redondo, del mismo alto que el saldo para que la fila quede pareja. Este SI es
   boton (a diferencia del saldo, que es solo indicador), asi que lleva mano y pulsado. */
.ks-hout { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 999px; background: var(--bg2); border: 1px solid var(--line);
  color: var(--text-dim); cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, transform .12s; }
.ks-hout:hover { color: var(--text); border-color: var(--accent); }
.ks-hout:active { transform: scale(.94); }
.ks-hav { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer;
  overflow: hidden; padding: 0; }
.ks-hav.has-photo { border-color: var(--accent); }
.ks-hav img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1000px) {
  .ks-head { display: none; }
  /* Accesos Casillero / Billetera en la barra de arriba de PC. */
  .tn-lnk { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px;
    border-radius: 999px; background: transparent; border: 1px solid transparent;
    color: var(--text-dim); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s; }
  .tn-lnk:hover { background: var(--bg2); border-color: var(--line); color: var(--text); }
  .tn-lnk.on { color: var(--text); background: var(--bg2); border-color: var(--line); }
  .tn-lnk.on svg { color: var(--accent); }
  /* Marca a la izquierda del saludo: en su casa el nombre tiene que verse. */
  .tn-brand-ks { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 17px;
    letter-spacing: -.3px; color: var(--text); white-space: nowrap; margin-right: 4px; }
  .tn-brand-ks svg { color: var(--accent); }
  body.tema-ksillero .tn-inner { grid-template-columns: auto 1fr auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EFECTO PLATINADO (22-ago-2026) — el mismo acabado que Trapicheros
   ═══════════════════════════════════════════════════════════════════════════
   El metal no se imita con un degradado suave, sino con paradas DURAS que alternan
   claro y oscuro: el ojo lee esos saltos como el reflejo de una superficie pulida.

   Aqui el fondo es NEGRO, asi que va el metal CLARO. Y va SOLO en lo grande: en texto
   pequeno el relleno degradado se come el contraste de los trazos finos.

   Lo aprendido en Trapicheros y que aqui NO se repite:
     · nunca en `body`: `-webkit-text-fill-color` se hereda y deja sin letras a todo
       lo que no tenga su propio degradado, botones incluidos.
     · nunca sobre un elemento de fondo CLARO: el metal claro encima es invisible.
     · nunca en botones ni campos: al recortar el fondo al texto pierden SU fondo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* MAS METALICO (22-ago-2026). Tres cambios sobre la version anterior:
       1. mas PARADAS: 13 en vez de 9. Cada salto es un filo, y un metal pulido tiene
          muchos filos juntos, no tres suaves.
       2. mas RECORRIDO: el brillo llega a blanco puro y la sombra baja mas, asi que el
          salto claro-oscuro es mas violento y se lee como reflejo, no como degradado.
       3. paradas PEGADAS (51%/53%, 62%/64%): un corte casi vertical en mitad de la letra
          es lo que de verdad dice "esto es metal". */
  --platino-brillo:linear-gradient(176deg,
      #FFFFFF 0%,  #F6F6FA 8%,  #C8C8D0 20%, #90909A 30%,
      #6A6A73 40%, #FFFFFF 51%, #FFFFFF 53%, #D2D2DA 60%,
      #82828C 70%, #EFEFF4 80%, #A6A6B0 90%, #E4E4EA 96%, #FFFFFF 100%);
  --platino-texto:linear-gradient(177deg,
      #FFFFFF 0%,  #F2F2F6 12%, #C6C6CE 30%, #A2A2AC 42%,
      #FFFFFF 51%, #FFFFFF 53%, #D8D8E0 62%, #A8A8B2 74%,
      #F0F0F4 86%, #BEBEC8 94%, #EFEFF3 100%);
  --platino-canto:linear-gradient(90deg,
      #55555C 0%,  #B4B4BC 10%, #FFFFFF 20%, #FFFFFF 22%,
      #8A8A94 34%, #E2E2E8 46%, #6E6E78 58%, #FFFFFF 70%,
      #9C9CA6 82%, #DEDEE4 92%, #61616A 100%);
}

/* Lo GRANDE, con el metal de mas contraste. */
.splash-name, .sec-title, .prod-title, .price, .big-num, .stat-num, .wallet-amount,
h1, h2{
  background-image:var(--platino-brillo);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55));
}

/* El texto de lectura, con el suave: su punto mas oscuro (#9C9CA6) todavia se lee. */
h3, h4, .sec-sub, .prod-sub, .muted-strong{
  background-image:var(--platino-texto);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Un hilo de metal donde habia una linea gris. */
hr{ border:0; height:1px; background:var(--platino-canto); opacity:.5 }

/* ── Blindaje. Va AL FINAL a proposito: ninguna regla de brillo puede dejar sin
      letras un boton, un campo o algo que viva sobre fondo claro. ────────────── */
/* OJO con `background-image:none`: NO se puede poner aqui. Muchas tarjetas del
   marketplace SON botones y su fondo es un degradado (.promo-card, .gana-card,
   .dcard-mc, .dcard-visa...). Quitarles el background-image las deja TRANSPARENTES.
   Lo que hay que deshacer no es el fondo, es el RECORTE: con `background-clip:border-box`
   el degradado vuelve a pintarse detras del elemento en vez de dentro de las letras,
   y con `-webkit-text-fill-color:currentColor` el texto vuelve a tener color. */
button, .btn, a.btn, input, textarea, select, option, ::placeholder,
.badge, .chip, .tag, .pill, svg, svg *{
  -webkit-text-fill-color:currentColor!important;
  -webkit-background-clip:border-box!important; background-clip:border-box!important;
}
button *, .btn *, .badge *, .chip *, .tag *, .pill *{
  -webkit-text-fill-color:currentColor!important;
  -webkit-background-clip:border-box!important; background-clip:border-box!important;
}

/* Sin soporte de recorte, todo plano. Mas vale sin brillo que invisible. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  *{ background-image:none!important; -webkit-text-fill-color:currentColor!important }
}

/* ── Reversion sobre fondo CLARO ────────────────────────────────────────────
   Es la regla que mas veces hizo falta en Trapicheros: el metal CLARO encima de un
   elemento de fondo CLARO deja el texto invisible. Aqui no hay ningun caso hoy (los
   68 contenedores claros son cajas de IMAGEN, botones o chips, y esos ya estan en el
   blindaje), pero se deja puesta para que no aparezca el dia que se anada una tarjeta
   clara con un titulo dentro.

   Se apaga el RELLENO y se devuelve el recorte, sin tocar el `background-image`: si el
   contenedor tuviera su propio degradado de fondo, borrarlo lo dejaria transparente. */
.detail .hero, .detail .hero *,
.sq-card-box, .sq-card-box *,
.card .ph, .card .ph *,
.cat-tile-img, .cat-tile-img *,
.catcard-img, .catcard-img *,
.subcat-chip-img, .subcat-chip-img *,
[data-fondo="claro"], [data-fondo="claro"] *{
  -webkit-text-fill-color:currentColor!important;
  -webkit-background-clip:border-box!important; background-clip:border-box!important;
}


/* ── Mas cuerpo metalico en las superficies (22-ago-2026) ───────────────────
   No basta con el texto: una chapa se reconoce por como le da la luz. Se anade un
   canto de luz arriba y una sombra abajo en las piezas grandes. Todo estatico: un
   reflejo que se mueve luce tres minutos y despues molesta en algo que se usa a diario. */
.card, .panel, .sheet, .modal, .dcard, .promo-card, .usdt-card, .sq-cardpanel{
  position:relative}
.card::before, .panel::before, .sheet::before, .dcard::before,
.usdt-card::before, .sq-cardpanel::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--platino-canto); opacity:.5; pointer-events:none; z-index:1}

/* Los botones, como chapa estampada: luz arriba, sombra abajo, hundido al pulsar. */
.btn, button.primary, .sq-pay-btn{
  background-image:linear-gradient(180deg, rgba(255,255,255,.13) 0%,
                                            rgba(255,255,255,0) 45%,
                                            rgba(0,0,0,.20) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(0,0,0,.5)}
.btn:active, button.primary:active, .sq-pay-btn:active{
  background-image:linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(255,255,255,.05) 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55)}

/* Iconos con filo: un punto de luz arriba y sombra corta abajo dan grosor al trazo. */
svg[stroke]{filter:drop-shadow(0 -.5px 0 rgba(255,255,255,.30)) drop-shadow(0 1px 1px rgba(0,0,0,.55))}

/* Los METODOS DE DEPOSITO conservan su color de marca (orden del dueno): Zelle morado,
   Cash App verde, Venmo azul, Tether verde azulado. Es identidad ajena y ademas se
   reconocen de un vistazo. Aqui se les quita cualquier filtro que los apague. */
.dm-ico, .dm-ico *{
  filter:none!important; -webkit-text-fill-color:currentColor!important;
  background-clip:border-box!important; -webkit-background-clip:border-box!important}


/* ══════════════════════════════════════════════════════════════════════════════
   APP DE iOS (WKWebView a pantalla completa) — 24-ago-2026
   La app de iPhone/iPad ES esta misma web dentro de un WebView que ignora el
   safe-area, asi que la pagina tiene que apartarse sola de la hora, la bateria
   y la barra de inicio. En un navegador normal los insets valen 0 y NADA cambia.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Lo que mide la barra del sistema arriba. El respiro se SUMA a este valor, nunca
   con max() contra un numero fijo (con max() el aire real es 0 cuando el inset es
   grande). --app-top lo escribe la app nativa con el inset medido a mano, por si el
   WebView no lo reporta; aqui manda el mayor de los dos. */
:root { --db-top: max(env(safe-area-inset-top, 0px), var(--app-top, 0px)); }

@media (min-width: 1000px) {
  /* LA BARRA DE ARRIBA CHOCABA CON LA HORA. #pc-topnav nace en top:0 y en el iPad
     el saludo "Hola, {nombre}" quedaba pisando el reloj. Se le baja el contenido y
     todo lo que reservaba sus 64px pasa a reservar 64 + la barra del sistema. */
  #pc-topnav { padding-top: var(--db-top); }
  #app { padding-top: calc(64px + var(--db-top)); }
  .topbar { top: calc(64px + var(--db-top)); }
  #app > .view { min-height: calc(100dvh - 64px - var(--db-top)); }
  .view-wallet { height: calc(100dvh - 64px - var(--db-top)); }
  /* En el detalle de producto el nav se esconde: ahi solo hace falta el inset. */
  body:has(.pdetail) #app { padding-top: var(--db-top) !important; }
}

/* ── LOGIN A PANTALLA COMPLETA EN MOVIL ────────────────────────────────────────
   Era una hoja que subia dejando 62px de hueco arriba: un toque al descuido en ese
   hueco la cerraba y, si la pantalla de debajo exigia sesion, quedaba una vista
   vacia sin ninguna puerta para volver a abrir el login. Ahora ocupa la pantalla
   entera y se cierra SOLO con la equis. En PC sigue siendo el modal de dos
   columnas de siempre. */
.auth-x { display: none; }

@media (max-width: 999px) {
  .auth-sheet {
    top: 0; bottom: 0; max-width: none; width: 100%;
    border-radius: 0; box-shadow: none;
    padding: calc(var(--db-top) + 8px) 20px max(24px, env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(16px);
  }
  .auth-sheet.show { transform: translateX(-50%) translateY(0); }
  .auth-grab { display: none; }
  /* El formulario no se estira de lado a lado en tabletas: se centra con ancho de lectura. */
  .auth-main { width: 100%; max-width: 520px; margin: 0 auto; }
  .auth-brand { margin-top: 34px; }   /* aire bajo la equis */
  /* Centrado vertical que NO recorta: los espaciadores con margen automatico reparten el hueco
     sobrante arriba y abajo, pero COLAPSAN a 0 cuando el formulario es largo (registro completo)
     y necesita desplazarse. Es el mismo truco de la columna del modal de PC. */
  .auth-sheet { display: flex; flex-direction: column; }
  .auth-sheet::before { content: ""; margin-top: auto; }
  .auth-sheet::after { content: ""; margin-bottom: auto; }

  .auth-x {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: calc(var(--db-top) + 10px); right: 14px; z-index: 72;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text);
    cursor: pointer;
  }
  .auth-x:active { background: rgba(255,255,255,.12); }
}

/* La barrita de canales (banner.js, shadow DOM con z-index 2.147.483.000) se pintaba ENCIMA
   del login a pantalla completa y tapaba el logo y la equis de cerrar. Con el login abierto
   no hay nada que hacer con los canales: se esconde, igual que se esconde la barra de abajo. */
body:has(.auth-sheet) [role="region"][aria-label="Nuestros canales"] { display: none !important; }

/* ── Detalle de un movimiento (renderTxPage): aire sobre el botón de atrás ──────
   El botón nacía pegado a lo de arriba: a la barra de estado en el móvil y a la
   barra de PC (#pc-topnav) en el iPad. Se le da un respiro SOLO a esta página —
   las demás pantallas de la Billetera (.bp-sheet) se quedan como estaban, que su
   espacio se ajustó a propósito para el APK de Android.
   El media de móvil va DESPUÉS a propósito: a igual especificidad manda el último. */
.txd-sheet { padding-top: calc(env(safe-area-inset-top, 0px) + 28px); }
@media (max-width: 999px) { .txd-sheet { padding-top: calc(var(--safe-top) + 12px); } }

/* ── PC: los popups de la Database son VENTANAS, no hojas ─────────────────────
   En el teléfono el modal sigue subiendo desde abajo (con su barrita de arrastre),
   que es lo natural con el pulgar. En pantalla grande eso se ve raro: el cuadro
   queda pegado al borde de abajo y con las esquinas de arriba redondeadas. Aquí
   se recoloca en el CENTRO exacto, con las cuatro esquinas iguales, y entra con
   un zoom corto en vez de deslizarse. La clase `db-on` la pone setView() en el
   <body> cuando la vista montada es la Database (el modal vive fuera de la vista). */
@media (min-width: 900px) {
  body.db-on .bottom-sheet {
    top: 50%; bottom: auto; left: 50%;
    transform: translate(-50%, -50%) scale(.97);
    width: min(560px, 92vw); max-width: 560px;
    max-height: 84vh;
    border-radius: 18px; border: 1px solid rgba(255,255,255,.12);
    padding: 20px 22px 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
  }
  body.db-on .bottom-sheet.show { transform: translate(-50%, -50%) scale(1); }
  /* La barrita de arrastre solo tiene sentido si la hoja se arrastra desde abajo. */
  body.db-on .bs-grab { display: none; }
  body.db-on .bs-title { margin-top: 0; }
}

/* ── Almacén de tarjetas (/db) ───────────────────────────────────────────────
   Las prepago que ya compramos y esperan a que alguien las pida. Arriba el cuadro para
   agregar, debajo la lista: todas sirven siempre (una tarjeta se puede dar a varios
   clientes), con el nombre de quien se la llevó y el número de su solicitud debajo. */
.stk-add { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: linear-gradient(135deg, rgba(170,170,173,.16), rgba(170,170,173,.05));
  border: 1px dashed rgba(190,190,195,.42); border-radius: 16px; padding: 15px 16px; color: var(--text); }
.stk-add:active { transform: scale(.995); }
.stk-add svg { flex: 0 0 auto; stroke: var(--accent); }
.stk-add b { display: block; font-size: 15.5px; font-weight: 800; }
.stk-add span { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.stk-count { font-size: 12.5px; color: var(--text-dim); margin: 14px 2px 8px; }
.stk-list { display: flex; flex-direction: column; gap: 9px; }
.stk-row { display: flex; align-items: flex-start; gap: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
/* Píldora "N veces" al lado del número: se ve de un vistazo cuál se ha repartido más. */
.stk-veces { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; background: rgba(170,170,175,.18); border: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--text-dim); }
.stk-ok b { font-weight: 800; color: var(--text); }
.stk-tx { flex: 1; min-width: 0; }
.stk-num { font-size: 15.5px; font-weight: 800; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; }
.stk-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.stk-bill { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-ok { color: var(--green); }
.stk-ok svg { vertical-align: -1px; }
.stk-del { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; }
.stk-del:active { background: rgba(255,255,255,.08); }
.stk-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Botón "Tarjetas" de la barra del /db: SOLO el icono (orden del jefe), redondo e igual
   de grande que Actualizar, que va justo a su lado. */
.db-periodrow .db-stock-sm { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; }
.db-periodrow .db-stock-sm svg { color: var(--accent); flex: 0 0 auto; }
.db-periodrow .db-stock-sm:hover { border-color: var(--text-dim); }
@media (max-width: 560px) {
  .db-periodrow .db-stock-sm { width: 36px; height: 36px; }
}

/* ── Enviar una tarjeta desde la solicitud (/db) ─────────────────────────── */
.ck-enviar { margin: 14px 0 12px; }
.ck-env-lb { display: block; font-size: 12px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
.ck-env-row { display: flex; gap: 9px; align-items: stretch; }
.ck-env-sel { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.ck-env-sel select { width: 100%; appearance: none; -webkit-appearance: none; padding-right: 34px;
  font-variant-numeric: tabular-nums; }
.ck-env-sel > svg { position: absolute; right: 11px; pointer-events: none; opacity: .65;
  transform: rotate(90deg); }
/* El .btn del proyecto nace a ancho completo: sin width:auto se come la fila y empuja
   el desplegable fuera del cuadro. */
.ck-env-row .btn { flex: 0 0 auto; width: auto; display: inline-flex; align-items: center;
  gap: 7px; padding: 0 16px; }
.ck-env-sel select { height: 100%; min-height: 46px; }
.ck-env-nota { display: block; font-size: 12px; color: var(--text-dim); line-height: 1.45; margin-top: 8px; }
.ck-env-ok, .ck-env-vacio { display: flex; gap: 11px; align-items: flex-start;
  border-radius: 14px; padding: 13px 15px; }
.ck-env-ok { background: rgba(90,170,120,.12); border: 1px solid rgba(90,170,120,.3); }
.ck-env-ok svg { stroke: var(--green); flex: 0 0 auto; margin-top: 1px; }
.ck-env-vacio { background: var(--panel); border: 1px dashed var(--line); }
.ck-env-vacio svg { stroke: var(--text-dim); flex: 0 0 auto; margin-top: 1px; }
.ck-env-ok b, .ck-env-vacio b { display: block; font-size: 14.5px; }
.ck-env-ok span, .ck-env-vacio span { display: block; font-size: 12.5px; color: var(--text-dim);
  line-height: 1.45; margin-top: 2px; }

/* ── Página de la tarjeta prepago (cliente) ─────────────────────────────────
   La foto limpia manda: ocupa el ancho, y todo lo demás cuelga de ella. Los datos van en
   filas grandes con su botón de copiar, porque nadie transcribe 16 dígitos sin fallar. */
/* La foto de la tarjeta se quitó de esta pantalla (1-sep-2026, orden del jefe): se entra a
   leer y copiar los datos, no a mirar la tarjeta. La etiqueta "En camino" vive ahora dentro
   del bloque del monto, así que ya no va posicionada sobre nada. */
.gcp-badge { display: inline-flex; align-items: center;
  gap: 5px; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.18); color: #fff;
  border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 700;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* El monto vive en la barra de arriba: mismo chip que el cambio de elToque, para que las dos
   pantallas se lean igual. */
.gcp-chip { display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; background: var(--panel);
  font-size: 14px; font-weight: 800; color: var(--text); }
.gcp-chip i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-dim); }
/* Mientras está en camino, el aviso encabeza la pantalla (ya no hay foto donde ponerlo). */
.gcp-encamino { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line);
  background: var(--panel); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
  font-size: 13.5px; font-weight: 700; color: var(--text-dim); }
.gcp-encamino svg { color: var(--accent); flex: 0 0 auto; }
.gcp-h { font-size: 16px; margin: 20px 2px 10px; }
.gcp-data { display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.gcp-row { background: var(--panel); padding: 12px 15px; }
.gcp-row label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
.gcp-val { display: flex; align-items: center; gap: 10px; }
.gcp-val > span { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; word-break: break-word; }
.gcp-mono { font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.gcp-copy { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: var(--panel2);
  border: 1px solid var(--line); color: var(--text-dim); display: flex; align-items: center;
  justify-content: center; }
.gcp-copy:active { transform: scale(.94); color: var(--text); }
.gcp-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 9px 2px 0; }
.gcp-pasos { margin: 0 0 14px; padding-left: 20px; }
.gcp-pasos li { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-bottom: 8px; }
.gcp-pasos b { color: var(--text); }
/* En el verde de WhatsApp, igual que el de la ficha del trapichero (tinta oscura: sobre ese
   verde el blanco se lee peor de lo que parece). */
.gcp-help { margin-top: 2px; background: #25D366; color: #07240F; font-weight: 800; }
.gcp-help svg { stroke: currentColor; }

/* ═════ NOVATOS — el tablero de Carlos y la etiqueta en el tablero del jefe ═════════
   El primerizo pasa por Carlos; cuando él lo da por explicado, sale en Transacciones /
   Tarjetas con la etiqueta "Nuevo · explicado". */
.nov-badge { background: rgba(201,201,210,.18); color: var(--text); font-weight: 800;
  display: inline-flex; align-items: center; gap: 3px; letter-spacing: .2px; }
.nov-badge svg { stroke: var(--text); }
.nov-asig { background: rgba(138,138,147,.16); color: var(--text-dim); font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px; }
.nov-asig svg { stroke: var(--text-dim); }
/* Tarjeta del tablero de Carlos (va dentro de .pb-card, por eso no lleva fondo propio). */
.nov-card { align-items: stretch; }
.nov-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nov-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.nov-amt { font-size: 13px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nov-what { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px;
  color: var(--text-dim); }
.nov-what svg { stroke: var(--text-dim); flex: 0 0 auto; }
.nov-meta { font-size: 11px; color: var(--text-dim); opacity: .85; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
/* El WhatsApp va DENTRO de la tarjeta: es la acción de todos los días. */
.nov-wa { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 8px; padding: 7px 10px; border-radius: 9px; width: 100%;
  background: rgba(201,201,210,.16); border: 1px solid var(--line);
  color: var(--text); font-size: 12px; font-weight: 700; }
.nov-wa svg { stroke: var(--text); }

/* Ksillero CERRADO temporalmente (25-sep-2026): cartel a pantalla completa, sin chrome. */
body.ks-cerrado #tabbar, body.ks-cerrado #support-fab, body.ks-cerrado .topnav,
body.ks-cerrado #pc-sidebar, body.ks-cerrado .sidebar, body.ks-cerrado #pc-topnav,
body.ks-cerrado .pc-only { display: none !important; }
body.ks-cerrado #app { margin-left: auto !important; padding: 0 !important; }
.view-ks-cerrado { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.ksc { max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ksc-logo { margin-bottom: 6px; }
.ksc-h { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 900; letter-spacing: -.4px; color: var(--text); }
.ksc-p { margin: 0; font-size: 16px; color: var(--muted, #9A9AA3); }
.ksc-btn { margin-top: 18px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--accent); color: #111114; font-weight: 800; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; }
.ksc-ghost { background: transparent; color: var(--muted, #9A9AA3); border: 1px solid var(--line); }
.ksc-btn:active { transform: scale(.97); }