/* Dropi Radar · soft neumorphism (light by default, manual dark toggle via [data-theme]) */
:root {
  --bg: #e6ebf3;
  --surface: #edf1f7;
  --surface-2: #f3f6fa;
  --text: #17213a;
  --muted: #4e5c74;
  --faint: #5f6c83;
  --line: rgba(120, 137, 166, .18);
  --edge: rgba(255, 255, 255, .7);
  --blue: #2f6bff;
  --blue-soft: #dfe8ff;
  --blue-ink: #1d4ed8;
  --grad: linear-gradient(135deg, #2c63ee, #1b4bd1);
  --green: #12813f; --green-soft: #daf5e5; --green-dot: #22c55e;
  --amber: #94560a; --amber-soft: #fdf0d2;
  --red: #c42b3b; --red-soft: #fde2e4;
  --purple: #6d28d9; --purple-soft: #ece4fe;
  --sh-dark: rgba(150, 166, 194, .55);
  --sh-light: rgba(255, 255, 255, .95);
  --raised: 9px 9px 20px var(--sh-dark), -9px -9px 20px var(--sh-light);
  --raised-sm: 5px 5px 12px var(--sh-dark), -5px -5px 12px var(--sh-light);
  --raised-xs: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  --inset: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
  --inset-sm: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light);
  --blue-glow: 5px 5px 14px rgba(47, 107, 255, .32), -5px -5px 12px var(--sh-light);
  --r-xl: 26px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  /* level colors kept for the existing badges/chips */
  --viral: var(--red); --mega: var(--purple); --best: var(--blue-ink); --trending: var(--green);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #1b2130;
  --surface: #202738;
  --surface-2: #252d40;
  --text: #e7ecf6;
  --muted: #a8b3c8;
  --faint: #8f9bb3;
  --line: rgba(160, 175, 205, .14);
  --edge: rgba(255, 255, 255, .04);
  --blue: #5b8cff; --blue-soft: #263a6b; --blue-ink: #a9c1ff;
  --green: #4ade80; --green-soft: #173d2b;
  --amber: #f3b23f; --amber-soft: #43341a;
  --red: #ff7b88; --red-soft: #46222a;
  --purple: #c4a7ff; --purple-soft: #33275a;
  --sh-dark: rgba(7, 10, 18, .6);
  --sh-light: rgba(62, 74, 102, .32);
  --blue-glow: 5px 5px 14px rgba(0, 0, 0, .45), -4px -4px 10px var(--sh-light);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font: 14px/1.45 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
::selection { background: var(--blue-soft); color: var(--blue-ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0; }
h1 { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 17px; line-height: 1.25; font-weight: 700; }
h3 { font-size: 14px; margin: 18px 0 8px; }
p { margin: 0; }
a { color: var(--blue-ink); }
button { font: inherit; color: inherit; }
.muted, .hint { color: var(--muted); }
.muted { font-size: 13px; }
.hint { font-size: 12px; }
.sm { font-size: 12px; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
td, .num, .bigv, .card .v { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 26px; padding: 22px; max-width: 1680px; margin: 0 auto; min-height: 100vh; }
.side { position: sticky; top: 22px; height: calc(100vh - 44px); display: flex; flex-direction: column; gap: 6px; padding: 22px 14px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--raised); border: 1px solid var(--edge); }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; color: inherit; text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: var(--raised-xs); }
.brand b { display: block; font: 700 17px/1.1 var(--font-display); }
.brand span { font-size: 12px; color: var(--muted); }
/* Round flag of the Dropi country being viewed, next to the name. */
.brand .flag { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%; overflow: hidden; flex: none; margin-left: auto; box-shadow: var(--raised-xs), 0 0 0 2px var(--surface); }
.brand .flag svg, .brand .flag img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.photo-sort-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav a, .nav button { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 0; background: none; border-radius: var(--r-md); color: var(--muted); text-decoration: none; font-weight: 600; text-align: left; cursor: pointer; transition: color .2s, box-shadow .2s; }
.nav a:hover, .nav button:hover { color: var(--text); }
.nav a.on { color: var(--blue-ink); box-shadow: var(--inset); }
.nav a.on svg { color: var(--blue); }
.grow { flex: 1; }
.sstatus { padding: 14px; border-radius: var(--r-lg); box-shadow: var(--inset); display: grid; gap: 10px; font-size: 12.5px; color: var(--muted); }
.sstatus > div { display: flex; align-items: center; gap: 9px; }
.sstatus svg { width: 16px; height: 16px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); box-shadow: 0 0 0 3px var(--green-soft); flex: none; }
.dot.warn { background: #f5a524; box-shadow: 0 0 0 3px var(--amber-soft); }
.dot.off { background: var(--faint); box-shadow: 0 0 0 3px var(--line); }
.me-wrap { position: relative; margin-top: 10px; }
.me { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 0; background: none; border-radius: var(--r-md); text-align: left; cursor: pointer; transition: box-shadow .2s; }
.me:hover, .me[aria-expanded="true"] { box-shadow: var(--inset); }
.me div { min-width: 0; flex: 1; }
.me b { display: block; font-size: 14px; } .me div span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-chev { width: 16px; height: 16px; color: var(--faint); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--blue-ink); background: var(--surface); box-shadow: var(--raised-xs); flex: none; overflow: hidden; padding: 2px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar.big { width: 76px; height: 76px; font-size: 26px; padding: 3px; box-shadow: var(--raised-sm); }
.profile-pop { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 40; width: 300px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--raised), 0 18px 40px rgba(0, 0, 0, .14); display: grid; gap: 12px; }
.profile-pop h3 { margin: 0; font-size: 15px; }
.pp-photo { display: flex; align-items: center; gap: 14px; }
.pp-actions { display: grid; gap: 8px; }
.pp-actions .btn { width: 100%; }
.pp-field { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pp-field .inp { height: 38px; font-size: 13px; font-weight: 400; }
.pp-foot { display: flex; justify-content: flex-end; gap: 8px; }
.profile-pop .hint:empty { display: none; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 12.5px; color: var(--muted); }
.switch input { position: absolute; opacity: 0; }
.track { width: 38px; height: 22px; border-radius: 999px; background: var(--surface); box-shadow: var(--inset-sm); position: relative; transition: background .2s; }
.thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-2); box-shadow: var(--raised-xs); transition: transform .2s; }
.switch input:checked + .track { background: var(--blue); box-shadow: none; }
.switch input:checked + .track .thumb { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--blue); outline-offset: 2px; }

.main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.top { display: flex; align-items: center; gap: 16px; }
.mbrand { display: none; }
.gsearch { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 50px; border-radius: 999px; background: var(--surface); box-shadow: var(--inset); color: var(--faint); }
.gsearch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--text); }
input::placeholder { color: var(--faint); opacity: 1; }
.sp { flex: 1; }
.ibtn { width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface); color: var(--muted); box-shadow: var(--raised-sm); cursor: pointer; transition: color .2s, box-shadow .2s; }
.ibtn:hover { color: var(--blue); }
.ibtn:active { box-shadow: var(--inset); }
.cta { height: 50px; padding: 0 24px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; background: var(--grad); box-shadow: var(--blue-glow); transition: transform .15s; white-space: nowrap; }
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(1px); }
.cta.sm { height: 42px; padding: 0 18px; font-size: 13px; }
.cta.sm svg { width: 16px; height: 16px; }

.banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; }
.banner svg { width: 18px; height: 18px; }
.banner.warn { background: var(--amber-soft); color: var(--amber); }
.banner.info { background: var(--blue-soft); color: var(--blue-ink); }
.status { font-size: 12px; color: var(--muted); padding: 7px 12px; border-radius: 999px; box-shadow: var(--inset-sm); white-space: nowrap; }

/* ---------- surfaces & controls ---------- */
.view { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.panel { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--raised); border: 1px solid var(--edge); padding: 24px; min-width: 0; }
.panel > h2 { margin-bottom: 14px; }
.phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.phead .muted { margin-top: 4px; }
.vhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vhead .muted { margin-top: 6px; max-width: 75ch; font-size: 14px; }
.link { color: var(--blue-ink); text-decoration: none; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.link svg { width: 15px; height: 15px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: var(--blue-glow); cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform .15s, box-shadow .2s, color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { color: var(--blue-ink); background: var(--surface); box-shadow: var(--raised-xs); }
.btn.ghost:active, .btn:active { transform: translateY(1px); box-shadow: var(--inset-sm); }
.btn.sm { height: 38px; padding: 0 16px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--inset); color: var(--faint); min-width: 200px; }
.field svg { width: 17px; height: 17px; }
.field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--text); }
.field.grow { flex: 1 1 240px; }
.inp, .sel, .range input, dialog input { font: inherit; color: var(--text); background: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--inset); height: 42px; padding: 0 12px; outline: none; }
.inp.grow { flex: 1 1 220px; }
/* Category filter: a text box with a list of matching categories under it. */
.combo { position: relative; }
.combo .sel { width: 210px; cursor: text; }
.combo .sel::placeholder { color: var(--text); }
.combo-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--raised), 0 18px 40px rgba(0, 0, 0, .14); }
.combo-list li { padding: 8px 12px; border-radius: 10px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.combo-list li.on { background: var(--blue-soft); color: var(--blue-ink); }
.combo-list li.cur { font-weight: 700; }
.combo-list li.none { color: var(--muted); cursor: default; }
.inp:focus, .sel:focus, .range input:focus, dialog input:focus, .field:focus-within, .gsearch:focus-within { box-shadow: var(--inset), 0 0 0 2px var(--blue); }
.sel { padding-right: 30px; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
.small { width: 130px; }

.seg { display: inline-flex; padding: 4px; border-radius: 999px; box-shadow: var(--inset); gap: 2px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--blue-ink); box-shadow: var(--raised-xs); }
.seg.market { background: var(--surface); padding: 5px; }
.seg.market button { padding: 9px 16px; font-size: 13px; }
/* Side menu: full width under "Dropi Radar", above Resumen. The top-bar copy only shows on phones. */
.side-market { display: flex; margin: -8px 0 14px; }
.side-market button { flex: 1; }
.market .short { display: none; }
.top-market { display: none; }

/* Program switch (Dropi Radar | Dropia | Chat Center): its own compact row, centered above the search, strong blue. */
.progrow { display: flex; justify-content: center; margin-bottom: -12px; }
.prog { background: var(--blue-soft); padding: 4px; gap: 3px; box-shadow: var(--raised-xs); border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); }
.prog button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 18px; font-size: 13.5px; font-weight: 700; color: var(--blue-ink); }
.prog button svg { width: 16px; height: 16px; }
.prog button:hover { background: var(--surface); }
.prog button.on { background: var(--blue); color: #fff; box-shadow: 0 6px 16px -6px var(--blue); }
/* Only Dropi Radar shows its search, country, menu and notices; the other programs show their own screen. */
html:not([data-prog="radar"]) .radar-only { display: none !important; }
.soon { display: grid; place-items: center; text-align: center; gap: 14px; padding: 70px 24px; }
.soon .ichip { width: 72px; height: 72px; }
.soon .ichip svg { width: 32px; height: 32px; }
.soon p { max-width: 460px; color: var(--muted); margin: 0; }
.soon .tag { font-size: 12px; font-weight: 700; color: var(--blue-ink); background: var(--blue-soft); border-radius: 999px; padding: 5px 12px; }

.ptabs { display: flex; gap: 10px; flex-wrap: wrap; }
.ptabs button { border: 0; padding: 9px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--raised-xs); color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; transition: color .2s, box-shadow .2s; }
.ptabs button:hover { color: var(--text); }
.ptabs button.active, .ptabs button[aria-selected="true"] { color: #fff; background: var(--grad); box-shadow: var(--blue-glow); }
.ptabs .n { opacity: .8; font-weight: 500; }

.ichip { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--blue); background: var(--surface); box-shadow: var(--inset); flex: none; }
.ichip.g { color: var(--green); } .ichip.a { color: var(--amber); } .ichip.r { color: var(--red); } .ichip.p { color: var(--purple); }
.ichip.big { width: 64px; height: 64px; } .ichip.big svg { width: 28px; height: 28px; }

/* ---------- tables ---------- */
.twrap, .table-wrap { overflow-x: auto; }
.table-wrap { padding: 10px 10px; }
table.soft { width: 100%; border-collapse: separate; border-spacing: 0 8px; min-width: 600px; }
#table { min-width: 900px; }
table.soft th { text-align: right; font-size: 12px; font-weight: 600; color: var(--faint); padding: 4px 8px; white-space: nowrap; }
/* Product table: the column names stay at the top of the screen while scrolling down the list. A horizontal scroll box
   would stop that, so on screens where the table fits the box is turned off (narrow screens keep it). */
#table thead th { position: sticky; top: 0; z-index: 5; background: var(--surface); padding-top: 12px; padding-bottom: 10px; box-shadow: 0 6px 8px -6px rgba(0, 0, 0, .25); font-size: 14px; font-weight: 700; color: var(--muted); padding-left: 6px; padding-right: 6px; }
@media (min-width: 1100px) { .panel.table-wrap { overflow: visible; } }
table.soft td { padding: 10px 8px; background: var(--surface-2); text-align: right; vertical-align: middle; white-space: nowrap; }
table.soft tbody tr td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
table.soft tbody tr td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
table.soft tbody tr:hover td { background: var(--surface); }
th.left, td.left { text-align: left !important; }
th[data-sort] { cursor: pointer; } th[data-sort]:hover { color: var(--text); }
th.sorted { color: var(--blue-ink) !important; }
th.sorted::after { content: " ▾"; } th.sorted.asc::after { content: " ▴"; }
.prod { display: flex; gap: 12px; align-items: center; min-width: 220px; white-space: normal; }
.plink { color: inherit; text-decoration: none; display: flex; gap: 12px; align-items: center; }
.plink:hover .pname { color: var(--blue-ink); }
.thumbimg { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--surface); padding: 4px; box-shadow: var(--raised-xs); flex: none; }
.pname { font-weight: 600; line-height: 1.25; max-width: 280px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pmeta { display: block; font-size: 12px; color: var(--faint); margin-top: 3px; }
.num { font-weight: 700; }
.big { font: 700 16px/1.1 var(--font-display); }
.delta { display: block; font-size: 11.5px; font-weight: 600; margin-top: 3px; }
.up { color: var(--green); } .down { color: var(--red); }
.zero { color: var(--faint); font-weight: 400; }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.badge.viral { color: var(--red); background: var(--red-soft); }
.badge.mega { color: var(--purple); background: var(--purple-soft); }
.badge.best { color: var(--blue-ink); background: var(--blue-soft); }
.badge.trending { color: var(--green); background: var(--green-soft); }
.flag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--amber); background: var(--amber-soft); border-radius: 6px; padding: 1px 7px; margin-left: 6px; }
.spark { display: block; }
.empty { text-align: center !important; padding: 40px !important; color: var(--muted); white-space: normal !important; }
table.mini { width: 100%; border-collapse: collapse; }
table.mini th { text-align: right; font-size: 12px; font-weight: 600; color: var(--faint); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.mini td { text-align: right; padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
table.mini tr:last-child td { border-bottom: 0; }
table.mini a { color: var(--blue-ink); text-decoration: none; }
table.mini a:hover { text-decoration: underline; }
.wrap { white-space: normal; max-width: 300px; }
/* "Abrir en Dropi" links */
.dlink { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--blue-ink) !important; text-decoration: none; padding: 2px 8px; border-radius: 999px; background: var(--blue-soft); white-space: nowrap; vertical-align: middle; }
.dlink svg { width: 12px; height: 12px; stroke-width: 2.2; }
.dlink:hover { text-decoration: none; filter: brightness(.97); }
.dlink.btnlink { align-self: flex-start; margin-top: 6px; padding: 5px 12px; font-size: 12px; }
#d-dropi { margin-bottom: 12px; }
/* product rows with photo inside small tables (Anuncios → En Dropi Guatemala) */
.mprod { display: flex; align-items: center; gap: 12px; }
.mprod .thumbimg { width: 48px; height: 48px; }
.mprod .wrap a { color: var(--text); font-weight: 600; }
.mprod .wrap a:hover { color: var(--blue-ink); text-decoration: none; }
.twin-why { font-size: 11px; color: var(--green) !important; font-weight: 600; margin-top: 2px; }
#d-twins-note { margin: -6px 0 10px; }
.dkw { margin: -6px 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kwbtn { border: 0; background: none; padding: 2px; color: var(--blue-ink); cursor: pointer; display: inline-grid; place-items: center; border-radius: 6px; }
.kwbtn svg { width: 14px; height: 14px; }
.kwform { display: flex; gap: 8px; width: 100%; }
.kwform input { flex: 1; min-width: 0; height: 36px; font: inherit; font-size: 13px; color: var(--text); border: 0; border-radius: 10px; background: var(--surface); box-shadow: var(--inset-sm); padding: 0 10px; outline: none; }
.pcard .row2 .sold { color: var(--blue-ink); font-weight: 700; }
.pcard .pn { color: inherit; text-decoration: none; }
.pcard .pn:hover { color: var(--blue-ink); }

/* ---------- product list ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px; }
.range { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.range input { width: 78px; }
.range i { font-style: normal; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 0; background: var(--surface); box-shadow: var(--raised-xs); color: var(--muted); border-radius: 999px; padding: 7px 12px; cursor: pointer; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.chip .dot { width: 8px; height: 8px; box-shadow: none; }
.chip.on { box-shadow: var(--inset-sm); }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; color: var(--muted); }
.check input { accent-color: var(--blue); width: 16px; height: 16px; }
.resultbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; padding: 0 4px; margin-bottom: -4px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); }
.period { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.period-title { font-weight: 700; font-size: 13px; }
.period-off .pcol { display: none; }
th.pcol, td.pcol { background: var(--blue-soft) !important; }
th.pcol { border-radius: 10px 10px 0 0; color: var(--blue-ink) !important; }
.pstock { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

/* range calendar */
.dp-wrap { position: relative; }
.dp-btn[aria-expanded="true"] { box-shadow: var(--inset-sm); }
.dp { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; width: 310px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--raised), 0 18px 40px rgba(0, 0, 0, .12); border: 1px solid var(--edge); padding: 16px; }
.dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 16px; }
.dp-nav { width: 32px; height: 30px; margin-left: 6px; border: 0; border-radius: 9px; background: var(--grad); color: #fff; cursor: pointer; display: inline-grid; place-items: center; }
.dp-nav svg { width: 16px; height: 16px; stroke-width: 2.2; }
.dp-nav:disabled { opacity: .3; cursor: default; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; text-align: center; }
.dp-grid .wd { font-size: 12px; font-weight: 700; padding: 4px 0; color: var(--muted); }
.dp-day { position: relative; border: 0; background: transparent; color: var(--text); font-size: 14px; height: 34px; cursor: pointer; }
.dp-day:disabled { color: var(--faint); opacity: .45; cursor: default; }
.dp-day.out { visibility: hidden; }
.dp-day.in { background: var(--blue-soft); }
.dp-day.start, .dp-day.end { color: #fff; }
.dp-day.start::before, .dp-day.end::before { content: ""; position: absolute; inset: 3px 5px; background: var(--grad); border-radius: 9px; z-index: 0; }
.dp-day.start { background: linear-gradient(90deg, transparent 50%, var(--blue-soft) 50%); }
.dp-day.end { background: linear-gradient(90deg, var(--blue-soft) 50%, transparent 50%); }
.dp-day.start.end { background: transparent; }
.dp-day span { position: relative; z-index: 1; }
.dp-help { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- Resumen ---------- */
.hello { padding: 28px; }
.hello .lead { margin-top: 6px; color: var(--muted); max-width: 75ch; }
.sugs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.sug { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--raised-sm); min-width: 0; }
.sug .ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--inset); flex: none; }
.sug .ph img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: cover; border-radius: 10px; }
.sug .rec { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #fff; background: #12813f; border-radius: 999px; padding: 4px 10px; box-shadow: 0 4px 10px rgba(18, 129, 63, .35); }
.sug .rec svg { width: 13px; height: 13px; stroke-width: 2.2; }
.sug .nm { font-weight: 700; font-size: 14px; line-height: 1.25; min-height: 2.5em; color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug .nm:hover { color: var(--blue-ink); }
.sug .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sug .stats div { padding: 8px 10px; border-radius: 12px; box-shadow: var(--inset-sm); }
.sug .stats b { display: block; font: 700 18px/1.1 var(--font-display); }
.sug .stats span { font-size: 11.5px; color: var(--muted); }
.sug .why { font-size: 12px; color: var(--muted); }
.sug .acts { display: flex; gap: 8px; margin-top: auto; }
.sug .acts a { flex: 1; text-align: center; text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 9px 6px; border-radius: 999px; color: var(--blue-ink); background: var(--surface); box-shadow: var(--raised-xs); }
.sug .acts a.pri { color: #fff; background: var(--grad); }
.sugs-empty { grid-column: 1 / -1; padding: 22px; border-radius: var(--r-lg); box-shadow: var(--inset); color: var(--muted); text-align: center; }
.sugs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.hgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.hstack { display: grid; gap: 24px; }
.hrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .85fr); gap: 24px; align-items: start; }
.ptabs + .twrap { margin-top: 14px; }

.qa { display: grid; gap: 2px; margin-top: -6px; }
.qa a { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: var(--r-md); color: var(--text); text-decoration: none; transition: background .2s; }
.qa a:hover { background: var(--surface-2); }
.qa .ichip { width: 42px; height: 42px; }
.qa b { display: block; font-size: 14px; font-weight: 600; }
.qa span { font-size: 12px; color: var(--muted); }
.qa .go { margin-left: auto; color: var(--faint); width: 18px; height: 18px; }
.bigv { font: 700 30px/1 var(--font-display); letter-spacing: -.02em; }
.dline { font-size: 12.5px; font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dline svg { width: 14px; height: 14px; stroke-width: 2.4; }
.dline small { color: var(--faint); font-weight: 500; }
.lchart { margin-top: 12px; }
.lchart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cats { display: grid; gap: 16px; }
.cat { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; }
.cat .ichip { width: 40px; height: 40px; grid-row: span 2; }
.cat b { font-size: 13.5px; font-weight: 600; }
.cat .pct { font-weight: 700; font-size: 13px; }
.bar { grid-column: 2 / 4; height: 8px; border-radius: 999px; box-shadow: var(--inset-sm); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6aa0ff, var(--blue)); }

.vsum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.v-test { color: var(--green); background: var(--green-soft); }
.v-check, .v-error { color: var(--amber); background: var(--amber-soft); }
.v-crowded { color: var(--red); background: var(--red-soft); }
.tri { display: grid; gap: 6px; max-height: 420px; overflow: auto; padding: 2px 6px 6px 2px; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); }
.trow > a { font-size: 13px; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow > a:hover { color: var(--blue-ink); }
.trow .kw { grid-column: 1; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
.trow .kw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .kw button { border: 0; background: none; padding: 2px; color: var(--blue-ink); cursor: pointer; display: inline-grid; place-items: center; border-radius: 6px; }
.trow .kw button svg { width: 13px; height: 13px; }
.trow .kw form { display: flex; gap: 6px; align-items: center; flex: 1; }
.trow .kw input { flex: 1; min-width: 0; height: 28px; font: inherit; font-size: 12px; color: var(--text); border: 0; border-radius: 8px; background: var(--surface); box-shadow: var(--inset-sm); padding: 0 8px; outline: none; }
.trow .n { grid-row: 1 / 3; grid-column: 2; text-align: right; font-size: 11.5px; color: var(--muted); }
.trow .n strong { display: block; font: 700 15px/1 var(--font-display); color: var(--text); }
.trow .pill { grid-row: 1 / 3; grid-column: 3; }
.act { display: grid; gap: 2px; margin-top: -6px; }
.arow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 8px 4px; color: inherit; text-decoration: none; border-radius: var(--r-md); }
a.arow:hover { background: var(--surface-2); }
.arow .ichip { width: 40px; height: 40px; grid-row: 1 / 3; }
.arow b { font-size: 13.5px; font-weight: 600; }
.arow span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(160deg, var(--surface) 0%, var(--blue-soft) 140%); }
.promo h2 { margin-top: 6px; }
.promo p { color: var(--muted); font-size: 13px; max-width: 34ch; position: relative; z-index: 1; padding-right: 70px; }
.promo .cta { align-self: flex-start; margin-top: 8px; position: relative; z-index: 1; }
.promo .orb { position: absolute; right: -40px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%; background: var(--surface); box-shadow: var(--raised); }
.promo .orb img { position: absolute; inset: 42px; width: 86px; height: 86px; border-radius: 22px; }

/* ---------- product detail ---------- */
#back { align-self: flex-start; }
.dhead { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.dimgwrap { padding: 8px; border-radius: var(--r-lg); box-shadow: var(--inset); flex: none; }
.dimg { width: 230px; height: 230px; object-fit: cover; border-radius: 14px; display: block; background: var(--surface-2); }
.dinfo { flex: 1 1 420px; min-width: 0; }
.dinfo h1 { font-size: 24px; }
.dinfo .muted { margin: 6px 0 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.card { background: var(--surface-2); border-radius: var(--r-md); box-shadow: var(--raised-xs); padding: 12px 14px; }
.card .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.card .v { font: 700 21px/1.15 var(--font-display); margin-top: 4px; }
.card .s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; min-width: 100%; }
.chart-empty { padding: 50px 10px; text-align: center; color: var(--muted); }
.small-note { font-size: 12px; margin-top: 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ---------- Meta ads ---------- */
.ads-search { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 18px; }
.ads-tr-hint { flex-basis: 100%; margin: 0; }
/* Anuncios encontrados: one card per advertiser, numbered buttons open each ad in a side window. */
.adcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin: 4px 0 14px; }
.adcard { background: var(--surface-2); border-radius: var(--r-lg); box-shadow: var(--raised-xs); padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.adcard header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.adcard header b { display: block; font-size: 14px; }
.adcard .pmeta { display: block; margin-top: 2px; }
.adline { display: grid; gap: 6px; }
.adtitle { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.adbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.adbtn { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--blue-ink); background: var(--surface); box-shadow: var(--raised-xs); padding: 5px 10px; border-radius: 999px; }
.adbtn svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.adbtn:hover { box-shadow: var(--inset-sm); }
.adbtn.seen { color: var(--muted); }
.adbtn.seen-now { color: #fff; background: var(--blue); box-shadow: none; }
.tag-cod { display: inline-block; font-size: 11px; font-weight: 600; color: var(--green); background: var(--green-soft); border-radius: 6px; padding: 0 6px; margin-left: 6px; }
.lang-tag { display: inline-block; font-size: 10px; font-weight: 700; color: var(--blue-ink); background: var(--blue-soft); border-radius: 5px; padding: 0 5px; margin-left: 6px; }

/* ---------- photo search ---------- */
.drop { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 180px; padding: 22px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--inset); color: var(--muted); text-align: center; cursor: pointer; transition: box-shadow .2s; }
.drop:hover, .drop.over, .drop:focus-visible { box-shadow: var(--inset), 0 0 0 2px var(--blue); outline: none; }
.pv { position: relative; display: inline-block; }
.drop img { display: block; max-height: 180px; max-width: 220px; border-radius: 14px; object-fit: contain; background: #fff; box-shadow: var(--raised-sm); }
.pv:not([hidden]) + .ichip { display: none; }
.pv-x { position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--blue); background: var(--surface); box-shadow: var(--raised-xs); transition: transform .15s, color .15s; }
.pv-x:hover { transform: scale(1.08); }
.pv-x:active { box-shadow: var(--inset-sm); }
.pv-x svg { width: 16px; height: 16px; stroke-width: 2.4; }
kbd { font: 12px ui-monospace, monospace; border-radius: 6px; padding: 1px 6px; background: var(--surface); box-shadow: var(--raised-xs); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.pcard { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; color: inherit; text-decoration: none; display: flex; flex-direction: column; box-shadow: var(--raised-sm); border: 1px solid var(--edge); transition: transform .15s; }
.pcard:hover { transform: translateY(-2px); }
.pcard img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.pcard .pb { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.pcard .pn { font-weight: 600; font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard .pm { font-size: 12px; color: var(--muted); }
.pcard .row2 { display: flex; justify-content: space-between; font-size: 13px; }
/* Photo-search card, top to bottom: similarity, name, ID, units sold (green, larger), price + suggested, stock, Dropi. */
.pcard .units { font-size: 16px; font-weight: 800; color: var(--green); }
.pcard .units.zero { color: var(--muted); font-weight: 600; font-size: 13px; }
.pcard .prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.pcard .prices span { font-size: 12.5px; color: var(--muted); }
.sim { align-self: flex-start; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; color: #fff; }
.sim.hi { background: #12813f; } .sim.mid { background: var(--blue-ink); } .sim.lo { background: #5f6c83; }

/* ---------- settings dialog ---------- */
dialog { border: 0; border-radius: var(--r-xl); background: var(--surface); color: var(--text); padding: 26px; width: min(520px, 92vw); box-shadow: var(--raised), 0 30px 70px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(15, 20, 35, .45); }
dialog .muted { margin: 6px 0 14px; }
dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
menu { display: flex; justify-content: flex-end; gap: 10px; padding: 0; margin: 22px 0 0; }

.bnav { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1320px) {
  .hgrid { grid-template-columns: minmax(0, 1fr); }
  .hstack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hrow .promo { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: 86px minmax(0, 1fr); }
  .brand div, .nav span, .sstatus, .me div, .me-chev { display: none; }
  .brand { justify-content: center; padding-inline: 0; }
  .nav a, .nav button { justify-content: center; padding: 14px; }
  .me { justify-content: center; }
  .side-market { flex-direction: column; border-radius: 18px; }
  .side-market button { padding: 8px 0; }
  .market .long { display: none; } .market .short { display: inline; }
  .sugs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hstack { grid-template-columns: minmax(0, 1fr); }
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 100px; gap: 18px; }
  .main, .view { gap: 18px; }
  .side { display: none; }
  .top-market { display: inline-flex; }
  .prog button { padding: 9px 16px; } .prog button span { display: none; } /* phones: icons only */
  .top { flex-wrap: wrap; gap: 12px; }
  .mbrand { display: block; width: 46px; height: 46px; border-radius: 14px; box-shadow: var(--raised-xs); }
  .gsearch { order: 3; flex-basis: 100%; max-width: none; height: 46px; }
  .sp { display: none; }
  .top .cta { margin-left: auto; height: 46px; padding: 0 18px; }
  .ibtn { width: 46px; height: 46px; }
  h1 { font-size: 22px; }
  .panel { padding: 18px; border-radius: 22px; }
  .hello { padding: 20px 18px; }
  .sugs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 12px; margin-inline: -4px; }
  .sug { scroll-snap-align: start; }
  .hrow { grid-template-columns: minmax(0, 1fr); }
  .hrow .promo { grid-column: auto; }
  .filters, .ads-search { padding: 14px; }
  .range input { width: 64px; }
  .dimg { width: 150px; height: 150px; }
  .grid2 { grid-template-columns: 1fr; }
  .bnav { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; justify-content: space-around; padding: 8px; border-radius: 24px; background: var(--surface); box-shadow: var(--raised); border: 1px solid var(--edge); }
  .bnav a { display: grid; justify-items: center; gap: 3px; padding: 8px 12px; border-radius: 16px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; }
  .bnav a.on { color: var(--blue-ink); box-shadow: var(--inset); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Dropi Radar en la nube (cloud.js; ver PLATAFORMAS.md) ──
   Lo que necesita la PC (foto, anuncios en vivo, corregir palabras, cambiar foto de perfil) no se muestra. */
html[data-cloud] a[href="#foto"], html[data-cloud] a[href="#anuncios"], html[data-cloud] #tri-run,
html[data-cloud] .kwbtn, html[data-cloud] label:has(#pp-file), html[data-cloud] table:has(#d-ads) { display: none !important; }
#cloud-note { margin-bottom: 12px; }
#cloud-login { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
#cloud-login .cl-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--r-xl); padding: 26px 22px; display: grid; gap: 14px; box-shadow: var(--raised); border: 1px solid var(--edge); }
#cloud-login .cl-logo { width: 60px; height: 60px; border-radius: 16px; justify-self: center; box-shadow: var(--raised-sm); }
#cloud-login h1 { margin: 0; text-align: center; font-size: 24px; }
#cloud-login .cl-sub, #cloud-login .cl-note { margin: 0; text-align: center; color: var(--muted); font-size: 13.5px; }
#cloud-login .cl-note { font-size: 12.5px; color: var(--faint); }
#cloud-login label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
#cloud-login input { border: 0; border-radius: var(--r-md); padding: 13px 14px; font: inherit; font-size: 15px; background: var(--bg); color: var(--text); box-shadow: var(--inset); }
#cloud-login button { min-height: 48px; border: 0; border-radius: var(--r-md); background: var(--grad); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: var(--blue-glow); }
#cloud-login button:disabled { opacity: .7; cursor: default; }
#cloud-login .cl-err { margin: 0; color: var(--red); font-size: 13px; font-weight: 600; text-align: center; }