/* =========================================================================
   Clasificados Caza y Pesca — Design System
   Caza · Tiro deportivo · Pesca marketplace UI
   Green tactical / hunting palette · gold "destacado" accent
   Explicit light/dark theme via :root[data-theme]; OS fallback for no choice.
   Plain CSS, no build step. Mobile-first.
   ========================================================================= */

/* ----------------------------------------------------------------------- */
/* 1. Tokens                                                                */
/* ----------------------------------------------------------------------- */
/* :root holds the LIGHT theme (green tactical). Dark tokens are applied via
   :root[data-theme="dark"] (explicit choice) and duplicated inside the
   prefers-color-scheme media block scoped to :root:not([data-theme]) so the
   OS preference only applies when the user has NOT made an explicit choice. */
:root {
  /* Brand gradient (olive/forest green) */
  --brand-1: #65a30d;
  --brand-2: #3f6212;
  --brand-gradient: linear-gradient(135deg, #65a30d 0%, #3f6212 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(101,163,13,.12) 0%, rgba(63,98,18,.12) 100%);

  /* Primary (solid, for non-gradient needs / focus rings) */
  --primary: #4d7c0f;
  --primary-strong: #3f6212;
  --primary-ink: #ffffff;
  --primary-tint: rgba(77,124,15,.10);

  /* Neutrals — green-stone, faint olive bias (chosen, not default grey) */
  --ink:        #16201a;   /* near-black, green bias */
  --ink-soft:   #38463a;
  --muted:      #687567;
  --muted-2:    #9aa595;
  --line:       #dde4d6;
  --line-soft:  #e8ede2;

  /* Surfaces */
  --bg:         #f5f7f1;   /* app background, faint green/stone tint */
  --bg-2:       #eceee4;
  --surface:    #ffffff;   /* cards, header */
  --surface-2:  #fafcf6;
  --surface-3:  #eef1e8;   /* skeletons, inset wells */

  /* Semantic (separate from brand accent — success green kept distinct
     from the olive brand: a brighter emerald reads clearly as "approved") */
  --ok:        #15803d;  --ok-bg:   #dcf5e4;  --ok-ink:   #0f6b32;
  --warn:      #d97706;  --warn-bg: #fdf1dd;  --warn-ink: #9a5b04;
  --danger:    #dc2626;  --danger-bg:#fde4e4; --danger-ink:#b01c1c;
  --neutral-badge-bg: #e8ede2; --neutral-badge-ink: #475044;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows — soft, layered */
  --sh-xs: 0 1px 2px rgba(22,32,26,.06);
  --sh-sm: 0 2px 6px rgba(22,32,26,.06), 0 1px 2px rgba(22,32,26,.05);
  --sh-md: 0 8px 24px rgba(22,32,26,.08), 0 2px 6px rgba(22,32,26,.05);
  --sh-lg: 0 18px 48px rgba(22,32,26,.14), 0 6px 16px rgba(22,32,26,.08);
  --sh-brand: 0 10px 30px rgba(77,124,15,.32);

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Type */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --container: 1140px;
  --header-h: 68px;

  --transition: 180ms cubic-bezier(.4,0,.2,1);
}

/* DARK theme — explicit choice (data-theme="dark") always wins. */
:root[data-theme="dark"] {
  --brand-1: #84cc16;
  --brand-2: #4d7c0f;
  --brand-gradient: linear-gradient(135deg, #84cc16 0%, #4d7c0f 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(132,204,22,.16) 0%, rgba(77,124,15,.16) 100%);

  --primary: #84cc16;
  --primary-strong: #a3e635;
  --primary-ink: #11160a;
  --primary-tint: rgba(132,204,22,.16);

  --ink:        #eef2e8;
  --ink-soft:   #ccd4c2;
  --muted:      #98a48f;
  --muted-2:    #6f7a67;
  --line:       #2a341f;
  --line-soft:  #232c1e;

  --bg:         #0e130d;
  --bg-2:       #131a10;
  --surface:    #161c14;
  --surface-2:  #1d2519;
  --surface-3:  #232c1e;

  --ok:        #4ade80;  --ok-bg:   rgba(34,197,94,.18);  --ok-ink:   #86efac;
  --warn:      #fbbf24;  --warn-bg: rgba(217,119,6,.22);  --warn-ink: #fcd34d;
  --danger:    #f87171;  --danger-bg:rgba(220,38,38,.22); --danger-ink:#fca5a5;
  --neutral-badge-bg: #232c1e; --neutral-badge-ink: #aeb9a3;

  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 2px 6px rgba(0,0,0,.4);
  --sh-md: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --sh-lg: 0 18px 48px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.5);
  --sh-brand: 0 10px 30px rgba(132,204,22,.40);
}

/* OS preference — only when the user has made NO explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --brand-1: #84cc16;
    --brand-2: #4d7c0f;
    --brand-gradient: linear-gradient(135deg, #84cc16 0%, #4d7c0f 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(132,204,22,.16) 0%, rgba(77,124,15,.16) 100%);

    --primary: #84cc16;
    --primary-strong: #a3e635;
    --primary-ink: #11160a;
    --primary-tint: rgba(132,204,22,.16);

    --ink:        #eef2e8;
    --ink-soft:   #ccd4c2;
    --muted:      #98a48f;
    --muted-2:    #6f7a67;
    --line:       #2a341f;
    --line-soft:  #232c1e;

    --bg:         #0e130d;
    --bg-2:       #131a10;
    --surface:    #161c14;
    --surface-2:  #1d2519;
    --surface-3:  #232c1e;

    --ok:        #4ade80;  --ok-bg:   rgba(34,197,94,.18);  --ok-ink:   #86efac;
    --warn:      #fbbf24;  --warn-bg: rgba(217,119,6,.22);  --warn-ink: #fcd34d;
    --danger:    #f87171;  --danger-bg:rgba(220,38,38,.22); --danger-ink:#fca5a5;
    --neutral-badge-bg: #232c1e; --neutral-badge-ink: #aeb9a3;

    --sh-xs: 0 1px 2px rgba(0,0,0,.4);
    --sh-sm: 0 2px 6px rgba(0,0,0,.4);
    --sh-md: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
    --sh-lg: 0 18px 48px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.5);
    --sh-brand: 0 10px 30px rgba(132,204,22,.40);
  }
}

/* ----------------------------------------------------------------------- */
/* 2. Base / reset companions                                              */
/* ----------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--primary-tint), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
h3 { font-size: 1.15rem; }

p { margin: 0; }

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-strong); }

img, video { max-width: 100%; display: block; }

small, .text-sm { font-size: .85rem; }
.text-muted { color: var(--muted); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--primary-tint); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------------------- */
/* 3. Layout helpers                                                       */
/* ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 720px) {
  .container { padding-inline: var(--s-5); }
}

.stack > * + * { margin-top: var(--s-4); }
.section { padding-block: var(--s-7); }
.page { padding-bottom: var(--s-8); }

.row { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ----------------------------------------------------------------------- */
/* 4. Header / nav (glassy sticky)                                         */
/* ----------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--brand-gradient);
  box-shadow: var(--sh-brand);
  display: grid; place-items: center;
  color: #fff; font-size: 1rem; font-weight: 700;
  flex: none;
}
.brand__mark svg { width: 22px; height: 22px; }

/* Wordmark en dos líneas: "CLASIFICADOS" (bajada) + "Caza y Pesca". */
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__over {
  font-family: var(--font-body);
  font-size: .58rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.brand__name { font-size: 1.12rem; font-weight: 700; margin-top: 3px; white-space: nowrap; }
.brand__amp { color: var(--primary); }
/* En pantallas muy estrechas se prescinde de la bajada para no comer espacio. */
@media (max-width: 420px) {
  .brand__over { display: none; }
  .brand__name { font-size: 1rem; }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: .94rem;
  transition: background var(--transition), color var(--transition);
}
.nav__link:hover { background: var(--surface-3); color: var(--ink); }
.nav__user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 500; font-size: .9rem;
}
.nav__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff; font-weight: 600; font-size: .8rem;
  display: grid; place-items: center; flex: none;
}

/* Theme toggle — round icon button in the header. Shows the icon for the
   mode you would switch TO (moon in light mode, sun in dark mode). */
.theme-toggle {
  appearance: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.theme-toggle:hover { background: var(--surface-3); color: var(--ink); border-color: var(--muted-2); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle svg { width: 19px; height: 19px; }

/* Hamburger — hidden on desktop, shown on phones (see header media query).
   The .nav__menu holds the collapsible links; inline on desktop, a dropdown
   sheet on phones. */
.nav__hamburger {
  display: none;            /* shown < 768px */
  appearance: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  position: relative;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: background var(--transition), border-color var(--transition);
}
.nav__hamburger:hover { background: var(--surface-3); border-color: var(--muted-2); }
.nav__hamburger-bars,
.nav__hamburger-bars::before,
.nav__hamburger-bars::after {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}
.nav__hamburger-bars::before { content: ""; transform: translate(-50%, -7px); }
.nav__hamburger-bars::after  { content: ""; transform: translate(-50%, 5px); }
.nav__hamburger.is-open .nav__hamburger-bars { background: transparent; }
.nav__hamburger.is-open .nav__hamburger-bars::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav__hamburger.is-open .nav__hamburger-bars::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* --- Phones: collapse nav links into a hamburger dropdown sheet --------- */
@media (max-width: 767px) {
  .nav__hamburger { display: inline-grid; place-items: center; }

  /* The collapsible links become a floating sheet anchored under the header.
     Hidden until .nav.is-open is set by wireMobileNav(). */
  .nav__menu {
    position: absolute;
    top: calc(var(--header-h) - 6px);
    right: var(--s-4);
    left: auto;
    min-width: 220px;
    max-width: calc(100vw - var(--s-4) * 2);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    /* hidden state */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 60;
  }
  .nav.is-open .nav__menu {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
  }
  /* Full-width, comfortably tappable rows inside the sheet. */
  .nav__menu .nav__link,
  .nav__menu .btn,
  .nav__menu .nav__user {
    width: 100%;
    justify-content: flex-start;
    min-height: 44px;
    box-sizing: border-box;
  }
  .nav__menu .btn { justify-content: center; }
  .nav__menu .nav__user {
    border-radius: var(--r-sm);
    padding: 8px 12px;
    margin-top: 2px;
  }
  /* Keep inline icons (shield/logout) from ballooning in the column layout. */
  .nav__menu .nav__link svg,
  .nav__menu .btn svg { width: 18px; height: 18px; flex: none; }
}

/* ----------------------------------------------------------------------- */
/* 5. Buttons                                                              */
/* ----------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-ink);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition), border-color var(--transition);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn--primary {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(77,124,15,.42); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--sh-xs);
}
.btn--ghost:hover:not(:disabled) { background: var(--surface-3); border-color: var(--muted-2); }

.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(220,38,38,.34); }

.btn--ok {
  background: var(--ok);
  color: #fff;
}
.btn--ok:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(21,128,61,.30); }

.btn--sm { padding: 8px 13px; font-size: .85rem; gap: 6px; }
.btn--lg { padding: 15px 26px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn--icon { padding: 9px; border-radius: 50%; }

/* ----------------------------------------------------------------------- */
/* 6. Cards                                                                */
/* ----------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--s-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card__header { margin-bottom: var(--s-4); }
.card__title { font-family: var(--font-head); font-size: 1.2rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

/* ----------------------------------------------------------------------- */
/* 7. Hero                                                                 */
/* ----------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(var(--s-6), 6vw, var(--s-8));
  text-align: center;
  overflow: hidden;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 6px 14px; border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}
.hero__title { font-size: clamp(2rem, 5.2vw, 3.2rem); }
.hero__title .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__subtitle {
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  max-width: 56ch;
  margin: var(--s-4) auto 0;
  text-wrap: balance;
}

/* Search bar — composite pill */
.searchbar {
  margin: var(--s-6) auto 0;
  max-width: 760px;
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: 8px;
}
.searchbar__input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  padding: 0 16px; font-size: 1rem; color: var(--ink);
  font-family: inherit;
}
.searchbar__input:focus { outline: none; }
.searchbar__select {
  border: none; background: var(--surface-3);
  border-radius: var(--r-lg);
  padding: 0 14px; font-size: .95rem; color: var(--ink-soft);
  font-family: inherit; cursor: pointer;
}
.searchbar__select:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-tint) inset; }
@media (max-width: 640px) {
  .searchbar { flex-wrap: wrap; border-radius: var(--r-lg); }
  .searchbar__input { flex-basis: 100%; padding: 12px 16px; }
  .searchbar__select { flex: 1; padding: 12px 14px; }
  .searchbar .btn { flex: 1; }
}

/* ----------------------------------------------------------------------- */
/* 8. Ad grid + ad card                                                    */
/* ----------------------------------------------------------------------- */
.ad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 560px)  { .ad-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .ad-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ad-grid { grid-template-columns: repeat(4, 1fr); } }

.ad-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none;
  color: inherit;
}
.ad-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
}
.ad-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ad-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
  overflow: hidden;
}
.ad-card__media img,
.ad-card__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.ad-card:hover .ad-card__media img { transform: scale(1.05); }
.ad-card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--brand-gradient-soft);
  color: var(--muted-2);
}
.ad-card__placeholder svg { width: 38px; height: 38px; opacity: .6; }

.ad-card__body {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-4);
  flex: 1;
}
.ad-card__title {
  font-family: var(--font-head);
  font-size: 1.02rem; font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-card__price {
  font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ad-card__price--free { color: var(--ok); }
.ad-card__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: 8px;
  color: var(--muted); font-size: .82rem;
}
.ad-card__loc { display: inline-flex; align-items: center; gap: 4px; }
.ad-card__loc svg { width: 14px; height: 14px; }

/* category chip (small inline tag) */
.chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .01em;
}

/* ----------------------------------------------------------------------- */
/* 9. Status badges                                                        */
/* ----------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .9; flex: none;
}
.badge--pending { background: var(--warn-bg);   color: var(--warn-ink); }
.badge--active,
.badge--approved { background: var(--ok-bg);    color: var(--ok-ink); }
.badge--suspended,
.badge--rejected { background: var(--danger-bg);color: var(--danger-ink); }
.badge--neutral  { background: var(--neutral-badge-bg); color: var(--neutral-badge-ink); }
.badge--admin {
  background: var(--brand-gradient); color: #fff;
}
.badge--admin::before { background: #fff; }

/* ----------------------------------------------------------------------- */
/* 10. Forms / inputs                                                      */
/* ----------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: var(--s-4); }
.form-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 620px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.label {
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
}
.label .req { color: var(--danger); }
.hint { font-size: .8rem; color: var(--muted); }

.input, .textarea, .select {
  width: 100%;
  font-family: inherit; font-size: .98rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--surface-3); color: var(--muted); cursor: not-allowed;
}
.textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7090' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}

/* Precio + moneda: input (grows) alongside a compact currency select. */
.price-currency { display: flex; gap: var(--s-3); align-items: stretch; }
.price-currency .input { flex: 1 1 auto; min-width: 0; }
.price-currency__select { flex: 0 0 auto; width: auto; min-width: 116px; }

/* disabled wrapper veil — used to grey out the whole create-ad form */
.form-locked { position: relative; }
.form-locked > fieldset[disabled] { opacity: .6; }

.auth-card {
  max-width: 440px; margin: var(--s-7) auto;
}

/* ----------------------------------------------------------------------- */
/* 11. Tabs + filter chips                                                 */
/* ----------------------------------------------------------------------- */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.tab {
  appearance: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .92rem;
  color: var(--muted);
  background: transparent;
  padding: 9px 18px; border-radius: var(--r-pill);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-xs);
}

.filters {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.filter-chip {
  appearance: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .85rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 15px; border-radius: var(--r-pill);
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 7px;
}
.filter-chip:hover { border-color: var(--muted-2); background: var(--surface-3); }
.filter-chip.is-active {
  background: var(--brand-gradient);
  color: #fff; border-color: transparent;
  box-shadow: var(--sh-brand);
}
.filter-chip__count {
  font-size: .75rem; font-weight: 700;
  background: rgba(0,0,0,.10); padding: 1px 7px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.filter-chip.is-active .filter-chip__count { background: rgba(255,255,255,.25); }

/* tab panel visibility helper */
.tab-panel[hidden] { display: none; }

/* ----------------------------------------------------------------------- */
/* 12. Table                                                               */
/* ----------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 640px;
}
.table thead th {
  text-align: left;
  font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  padding: 14px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--surface-3); }
.table .td-strong { color: var(--ink); font-weight: 600; }
.table .td-num { font-variant-numeric: tabular-nums; text-align: right; }
.table .td-actions { text-align: right; white-space: nowrap; }

/* ----------------------------------------------------------------------- */
/* 13. Stat cards                                                          */
/* ----------------------------------------------------------------------- */
.stat-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: 4px;
}
.stat__label {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.stat__value {
  font-family: var(--font-head);
  font-size: 2rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat__sub { font-size: .82rem; color: var(--muted); }
.stat--accent { background: var(--brand-gradient); border-color: transparent; box-shadow: var(--sh-brand); }
.stat--accent .stat__label,
.stat--accent .stat__value,
.stat--accent .stat__sub { color: #fff; }
.stat--accent .stat__label { color: rgba(255,255,255,.82); }

/* ----------------------------------------------------------------------- */
/* 14. Modal                                                               */
/* ----------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11,16,9,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s-5) var(--s-4);
  overflow-y: auto;
  animation: overlay-in 160ms ease;
}
.modal-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  width: 100%; max-width: 620px;
  margin: auto;
  animation: dialog-in 200ms cubic-bezier(.4,0,.2,1);
}
.modal-dialog--wide { max-width: 820px; }
.modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.modal__title { font-family: var(--font-head); font-size: 1.25rem; }
.modal__close {
  appearance: none; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-soft);
  display: grid; place-items: center; flex: none;
  font-size: 1.2rem; line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.modal__close:hover { background: var(--danger-bg); color: var(--danger-ink); }
.modal__body { padding: var(--s-5); }
.modal__footer {
  display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-top: 1px solid var(--line-soft);
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* detail key/value list (used in user detail modal) */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .92rem; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; color: var(--ink); }

/* ----------------------------------------------------------------------- */
/* 15. Toast                                                               */
/* ----------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: var(--s-5); right: var(--s-5);
  z-index: 200;
  display: flex; flex-direction: column; gap: var(--s-2);
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted-2);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  padding: 13px 16px;
  font-size: .92rem; color: var(--ink);
  animation: toast-in 220ms cubic-bezier(.4,0,.2,1);
}
.toast.is-leaving { animation: toast-out 200ms ease forwards; }
.toast--success { border-left-color: var(--ok); }
.toast--error   { border-left-color: var(--danger); }
.toast--info    { border-left-color: var(--primary); }
.toast__icon { flex: none; margin-top: 1px; }
.toast__icon svg { width: 18px; height: 18px; }
.toast--success .toast__icon { color: var(--ok); }
.toast--error .toast__icon { color: var(--danger); }
.toast--info .toast__icon { color: var(--primary); }
.toast__msg { flex: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }
@media (max-width: 520px) {
  .toast-container { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); max-width: none; }
}

/* ----------------------------------------------------------------------- */
/* 16. Dropzone + media previews                                           */
/* ----------------------------------------------------------------------- */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--s-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.dropzone:hover { border-color: var(--primary); background: var(--primary-tint); }
.dropzone.is-dragover {
  border-color: var(--primary);
  background: var(--primary-tint);
}
.dropzone__icon { color: var(--primary); }
.dropzone__icon svg { width: 34px; height: 34px; }
.dropzone__title { font-weight: 600; color: var(--ink); }
.dropzone__hint { font-size: .82rem; color: var(--muted); }
.dropzone__input { display: none; }

.dz-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.dz-previews:empty { display: none; }
.dz-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.dz-tile img, .dz-tile video {
  width: 100%; height: 100%; object-fit: cover;
}
.dz-tile__file {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; text-align: center;
}
.dz-tile__file svg { width: 26px; height: 26px; color: var(--primary); }
.dz-tile__ext {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted);
}
.dz-tile__name {
  font-size: .66rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.dz-tile__remove {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border-radius: 50%; border: none;
  background: rgba(11,16,9,.72); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  font-size: .9rem; line-height: 1;
  transition: background var(--transition);
  backdrop-filter: blur(2px);
}
.dz-tile__remove:hover { background: var(--danger); }
/* existing media tile flagged for removal in the edit-ad modal */
.dz-tile.is-removing { opacity: .42; }
.dz-tile.is-removing::after {
  content: ""; position: absolute; inset: 0;
  background: var(--danger-bg);
  border: 2px solid var(--danger);
  border-radius: inherit;
  pointer-events: none;
}
.dz-tile.is-removing .dz-tile__remove { background: var(--ok); }
.dz-tile.is-removing .dz-tile__remove svg { width: 14px; height: 14px; }
.dz-tile__badge {
  position: absolute; bottom: 5px; left: 5px;
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  background: rgba(11,16,9,.72); color: #fff;
  padding: 2px 7px; border-radius: var(--r-pill);
  backdrop-filter: blur(2px);
}
.dz-count { font-size: .82rem; color: var(--muted); margin-top: 8px; }

/* ----------------------------------------------------------------------- */
/* 17. Media gallery (ad.html + admin previews)                            */
/* ----------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--s-3);
}
.gallery__main {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
}
.gallery__main img, .gallery__main video {
  width: 100%; height: 100%; object-fit: contain;
  background: #0e130d;
}
.gallery__thumbs {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.gallery__thumb {
  width: 72px; height: 56px; border-radius: var(--r-xs);
  overflow: hidden; cursor: pointer;
  border: 2px solid transparent;
  background: var(--surface-3);
  transition: border-color var(--transition);
  flex: none;
}
.gallery__thumb img, .gallery__thumb video { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--primary); }
.gallery__empty {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  background: var(--brand-gradient-soft);
  color: var(--muted-2);
  border: 1px solid var(--line);
}
.gallery__empty svg { width: 56px; height: 56px; opacity: .5; }

/* compact media preview strip (admin ad cards) */
.media-strip {
  display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: 4px;
}
.media-strip__item {
  width: 90px; height: 68px; border-radius: var(--r-xs); overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line); flex: none;
}
.media-strip__item img, .media-strip__item video { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------------- */
/* 18. Status banner (dashboard)                                           */
/* ----------------------------------------------------------------------- */
.status-banner {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.status-banner__icon {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.status-banner__icon svg { width: 22px; height: 22px; }
.status-banner__body { flex: 1; }
.status-banner__title { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.status-banner__text { color: var(--muted); font-size: .92rem; margin-top: 2px; }

.status-banner--pending { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-bg); }
.status-banner--pending .status-banner__icon { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn-ink); }
.status-banner--pending .status-banner__title { color: var(--warn-ink); }
.status-banner--pending .status-banner__text { color: color-mix(in srgb, var(--warn-ink) 80%, var(--ink)); }

.status-banner--active { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--ok-bg); }
.status-banner--active .status-banner__icon { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok-ink); }
.status-banner--active .status-banner__title { color: var(--ok-ink); }
.status-banner--active .status-banner__text { color: color-mix(in srgb, var(--ok-ink) 80%, var(--ink)); }

.status-banner--suspended { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-bg); }
.status-banner--suspended .status-banner__icon { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger-ink); }
.status-banner--suspended .status-banner__title { color: var(--danger-ink); }
.status-banner--suspended .status-banner__text { color: color-mix(in srgb, var(--danger-ink) 80%, var(--ink)); }

/* reject reason callout (dashboard my-ads + admin) */
.reject-note {
  margin-top: 8px; padding: 8px 12px;
  background: var(--danger-bg); color: var(--danger-ink);
  border-radius: var(--r-xs); font-size: .85rem;
  border-left: 3px solid var(--danger);
  /* El icono va inline: sin tamaño explícito el SVG (viewBox 24x24, sin
     width/height) se estira a todo el ancho y rompe la maquetación. */
  display: flex; align-items: flex-start; gap: 6px;
}
.reject-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

/* ----------------------------------------------------------------------- */
/* 19. Empty state                                                         */
/* ----------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--s-7) var(--s-4);
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.empty-state__icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--brand-gradient-soft);
  display: grid; place-items: center;
  color: var(--primary);
}
.empty-state__icon svg { width: 34px; height: 34px; }
.empty-state__title { font-family: var(--font-head); font-size: 1.15rem; color: var(--ink); font-weight: 600; }
.empty-state__text { max-width: 42ch; }

/* ----------------------------------------------------------------------- */
/* 20. Skeleton (shimmer)                                                  */
/* ----------------------------------------------------------------------- */
.skeleton {
  position: relative;
  background: var(--surface-3);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

.skel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.skel-card__media { aspect-ratio: 4/3; }
.skel-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
.skel-line { height: 12px; border-radius: 6px; }
.skel-line--title { height: 16px; width: 85%; }
.skel-line--price { height: 18px; width: 40%; }
.skel-line--sm { width: 60%; }

/* spinner (inline loading) */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------- */
/* 21. Misc utilities                                                      */
/* ----------------------------------------------------------------------- */
.divider { height: 1px; background: var(--line); border: none; margin-block: var(--s-4); }
.price-tag {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2rem); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.meta-list { display: flex; flex-wrap: wrap; gap: var(--s-4); color: var(--muted); font-size: .9rem; }
.meta-list > span { display: inline-flex; align-items: center; gap: 6px; }
.meta-list svg { width: 16px; height: 16px; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-weight: 600; font-size: .92rem;
}
.back-link:hover { color: var(--ink); }
.back-link svg { width: 16px; height: 16px; }

.prose { color: var(--ink-soft); line-height: 1.7; white-space: pre-wrap; }
.prose-narrow { max-width: 68ch; }

/* ----------------------------------------------------------------------- */
/* 22. Pager (portal pagination)                                           */
/* ----------------------------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}
.pager__btn {
  appearance: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .9rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  min-width: 40px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.pager__btn:hover:not(:disabled):not(.pager__btn--active) {
  background: var(--surface-3); border-color: var(--muted-2);
}
.pager__btn:active:not(:disabled) { transform: translateY(1px); }
.pager__btn--active {
  background: var(--brand-gradient);
  color: #fff; border-color: transparent;
  box-shadow: var(--sh-brand);
  cursor: default;
}
.pager__btn:disabled, .pager__btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed;
}
.pager__btn svg { width: 16px; height: 16px; }
.pager__ellipsis {
  min-width: 28px; text-align: center;
  color: var(--muted); font-weight: 700;
  user-select: none;
}
@media (max-width: 520px) {
  .pager__btn { min-width: 36px; padding: 8px 11px; }
  .pager__btn--edge-label { display: none; }
}

/* ----------------------------------------------------------------------- */
/* 23. Category admin (editable rows)                                      */
/* ----------------------------------------------------------------------- */
.cat-addbar {
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: var(--s-4);
}
.cat-addbar .field { flex: 1; min-width: 220px; gap: 6px; }
.cat-name-edit {
  width: 100%;
  font-family: inherit; font-size: .92rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--primary);
  border-radius: var(--r-sm); padding: 8px 10px;
  box-shadow: 0 0 0 4px var(--primary-tint);
}
.cat-name-edit:focus { outline: none; }

/* list of admin ad review cards */
.review-list { display: grid; gap: var(--s-4); }
@media (min-width: 860px) { .review-list { grid-template-columns: 1fr 1fr; } }
.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.review-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.review-card__title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; }
.review-card__owner { font-size: .85rem; color: var(--muted); }
.review-card__excerpt {
  color: var(--ink-soft); font-size: .92rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: auto; }

/* Anti-desborde en móvil: sin min-width:0 los hijos flex (título largo, tira
   de miniaturas, selector de destaque) imponen su ancho intrínseco y empujan
   la tarjeta más allá del viewport. */
.review-list, .review-card { min-width: 0; }
.review-card > * { min-width: 0; max-width: 100%; }
.review-card__head { flex-wrap: wrap; }
.review-card__title, .review-card__owner, .review-card__excerpt { overflow-wrap: anywhere; }
.review-card .media-strip { max-width: 100%; }
.review-card .destaque-control { flex-wrap: wrap; }
.review-card .destaque-control .select { min-width: 0; flex: 1 1 140px; }

/* ----------------------------------------------------------------------- */
/* 24. Destaque (featured listing plans)                                   */
/* ----------------------------------------------------------------------- */
/* Gold/amber accent tokens, scoped to this section (no dark-mode override
   needed — gold reads well on both surfaces). */
:root {
  --gold-1: #f59e0b;
  --gold-2: #d97706;
  --gold-3: #fbbf24;
  --gold-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
  --gold-ink: #5a3a04;
  --gold-glow: 0 0 0 1px rgba(245,158,11,.45), 0 10px 30px rgba(245,158,11,.28);
}

/* The featured pill (used on cards, ad detail, dashboard, admin table). */
.badge--featured {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--r-pill);
  background: var(--gold-gradient);
  color: var(--gold-ink);
  font-family: var(--font-head);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.badge--featured__star { display: inline-flex; }
.badge--featured__star svg { width: 13px; height: 13px; }
.badge--featured__label { display: inline-flex; }

/* Featured ad card — prominent gold border + glow, clearly above normal. */
.ad-card--featured {
  border-color: var(--gold-1);
  box-shadow: var(--gold-glow);
}
.ad-card--featured:hover {
  border-color: var(--gold-2);
  box-shadow: 0 0 0 1px rgba(245,158,11,.6), var(--sh-lg);
}
/* Corner ribbon overlaying the media. */
.ad-ribbon {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  pointer-events: none;
}
.ad-ribbon .badge--featured {
  box-shadow: 0 2px 10px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.25) inset;
}

/* Ad detail page — featured pill above the title. */
.ad-detail__featured { margin-bottom: 2px; }

/* Dashboard "Mis anuncios" — read-only destaque status line. */
.destaque-status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 2px;
}
.destaque-status__text { font-size: .82rem; color: var(--gold-2); font-weight: 600; }
.destaque-status__off {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 600; color: var(--muted-2);
}

/* Dashboard info note wrapper (note itself reuses .reject-note styling). */
.destaque-note { margin: 0 var(--s-5); }

/* ----------------------------------------------------------------------- */
/* 25. Plans admin (Planes tab + per-ad destaque control)                  */
/* ----------------------------------------------------------------------- */
.plan-addbar {
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: var(--s-4);
}
.plan-addbar .field { flex: 1; min-width: 130px; gap: 6px; margin-top: 0; }
.plan-addbar .field + .field { margin-top: 0; }

/* Compact select reused by the per-ad destaque control. */
.select--sm { padding: 8px 34px 8px 11px; font-size: .9rem; }

/* Per-ad "Destaque" control inside admin review cards. */
.destaque-control {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3);
  border: 1px dashed var(--gold-1);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--gold-3) 12%, var(--surface));
}
.destaque-control__label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .82rem; font-weight: 700; color: var(--gold-2);
}
.destaque-control__label svg { width: 14px; height: 14px; }
.destaque-control .select { flex: 1; min-width: 150px; }
.destaque-control__until {
  font-size: .78rem; color: var(--muted);
  flex-basis: 100%;
}

/* ----------------------------------------------------------------------- */
/* 26. Destacados (home carousel)                                          */
/* ----------------------------------------------------------------------- */
.featured-section { padding-bottom: 0; }

.featured-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.featured-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.45rem; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
}
.featured-title svg { width: 22px; height: 22px; }

.featured-nav { display: flex; gap: .5rem; }
.featured-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.featured-arrow:hover { border-color: var(--gold-1); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.featured-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.featured-arrow svg { width: 18px; height: 18px; }

.featured-carousel {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px var(--s-3);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.featured-carousel > .ad-card {
  flex: 0 0 auto;
  width: 264px;
  scroll-snap-align: start;
}
@media (max-width: 600px) {
  .featured-nav { display: none; }
  .featured-carousel > .ad-card { width: 78vw; max-width: 300px; }
}

/* ----------------------------------------------------------------------- */
/* 27. Responsive / mobile polish (additive)                               */
/* ----------------------------------------------------------------------- */
/* Goals: no horizontal page overflow at any width; legible type; ≥44px tap
   targets; admin tables scroll; add-forms + dashboard rows stack on phones;
   modals near-full-width with internal scroll. Tokens only. */

/* --- Global overflow guard ------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }
/* Long unbroken strings (urls, emails) shouldn't blow out layout. */
.prose, .ad-card__title, .review-card__excerpt, .meta-list, .kv dd, .toast__msg {
  overflow-wrap: anywhere;
}
img, video { height: auto; }

/* --- Hero / searchbar -------------------------------------------------- */
@media (max-width: 600px) {
  .hero { padding-block: clamp(var(--s-5), 8vw, var(--s-7)); }
  .hero__subtitle { font-size: 1rem; }
  .searchbar { margin-top: var(--s-5); }
}
/* Stack the searchbar controls below ~520px so nothing is cramped. The base
   sheet already wraps at 640px; here we force the select + button onto their
   own full-width row for the smallest phones. */
@media (max-width: 460px) {
  .searchbar { gap: var(--s-2); }
  .searchbar__select { flex: 1 1 auto; }
  .searchbar .btn { flex: 1 1 auto; min-height: 44px; }
}

/* --- Tap targets: comfortable controls on touch ---------------------- */
@media (max-width: 767px) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .input, .textarea, .select { font-size: 16px; }  /* avoids iOS zoom-on-focus */
  .filter-chip { min-height: 38px; }
  .tab { min-height: 40px; }
}

/* --- Admin: stat cards 4 -> 2 -> 1 ----------------------------------- */
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat__value { font-size: 1.7rem; }
}

/* --- Admin: tabs + filters scroll/wrap, never overflow --------------- */
@media (max-width: 600px) {
  /* tabs can exceed width with 4 items; let them scroll instead of squashing */
  .tabs {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 9px 14px; }
  .filters { gap: var(--s-2); }   /* already wraps via flex-wrap */
}

/* --- Admin: add-forms (Planes / Categorías) stack to 1 column -------- */
@media (max-width: 600px) {
  .plan-addbar,
  .cat-addbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }
  .plan-addbar .field,
  .cat-addbar .field {
    flex: 1 1 auto;
    min-width: 0;       /* override the 130px/220px min so they don't overflow */
    width: 100%;
  }
  .plan-addbar .btn,
  .cat-addbar .btn { width: 100%; }
}

/* --- Admin: per-ad destaque control + review actions wrap ------------ */
@media (max-width: 600px) {
  .destaque-control { align-items: stretch; }
  .destaque-control .select { width: 100%; min-width: 0; }
  .review-card__actions .btn { flex: 1 1 auto; }
  .review-list { grid-template-columns: 1fr; }
}

/* admin tables already scroll horizontally via .table-wrap (overflow-x:auto)
   + .table { min-width:640px } — verified, no change needed. */

/* --- Dashboard: "Mis anuncios" rows stack on phones ------------------ */
/* The rows are JS-rendered as `.row.wrap[data-ad-id]` with inline styles
   (thumb 88px + grow info + actions). On phones: thumb + info side-by-side,
   actions drop to a full-width row of equal buttons. */
@media (max-width: 560px) {
  #my-ads [data-ad-id] {
    align-items: flex-start;
  }
  /* action button group spans the full row, buttons share the width */
  #my-ads [data-ad-id] > .row:last-child {
    flex: 1 1 100%;
    width: 100%;
  }
  #my-ads [data-ad-id] > .row:last-child > .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

/* --- Ad detail: gallery + info stack cleanly ------------------------- */
@media (max-width: 600px) {
  .gallery__main { aspect-ratio: 4 / 3; }
  .price-tag { font-size: 1.6rem; }
}

/* --- Modals: near-full-width, internal scroll on phones -------------- */
@media (max-width: 640px) {
  .modal-overlay {
    padding: var(--s-3);
    align-items: flex-start;
  }
  .modal-dialog,
  .modal-dialog--wide {
    max-width: 100%;
    max-height: calc(100dvh - var(--s-3) * 2);
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
  }
  /* header/footer pinned, body scrolls */
  .modal__header, .modal__footer { flex: none; }
  .modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-4);
  }
  .modal__header { padding: var(--s-4) var(--s-4) var(--s-3); }
  .modal__footer { padding: var(--s-3) var(--s-4) var(--s-4); }
  .modal__footer .btn { flex: 1 1 auto; }
  /* user-detail key/value list: stack label above value on narrow screens */
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
}

/* --- Register / generic 2-col form -> 1 col already handled by .form-grid
   (collapses below 620px). No change needed. --------------------------- */

/* --- Page section padding eases on phones ---------------------------- */
@media (max-width: 600px) {
  .section { padding-block: var(--s-6); }
  .page { padding-bottom: var(--s-7); }
}

/* ----------------------------------------------------------------------- */
/* 28. Portal results layout (filter sidebar + sort toolbar + mobile sheet) */
/* ----------------------------------------------------------------------- */
/* Desktop: sticky filter sidebar + main column. Mobile (<=860px): the aside
   becomes a fixed slide-over sheet opened by the "Filtros" toolbar button. */
.results-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 861px) {
  .results-layout { grid-template-columns: 264px minmax(0, 1fr); }
  /* Inside the narrower main column cap the grid at 3 columns. */
  .results-main .ad-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .results-main .ad-grid { grid-template-columns: repeat(3, 1fr); }
}
.results-main { min-width: 0; }

.filter-sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.filter-sidebar__head {
  display: none; /* shown only in the mobile sheet */
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.filter-sidebar__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.filter-sidebar__body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
@media (min-width: 861px) {
  .filter-sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    max-height: calc(100dvh - var(--header-h) - var(--s-5));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* Sort toolbar (result count + sort select + mobile Filtros button) */
.results-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.results-count {
  flex: 1 1 auto;
  min-width: 110px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sort-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.sort-control .select { width: auto; }
@media (max-width: 480px) {
  .sort-control { width: 100%; }
  .sort-control .select { flex: 1; }
}

/* "Filtros" button — mobile only, with active-filter count chip */
.filters-btn {
  display: none; /* shown <= 860px */
  appearance: none;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  min-height: 40px;
  box-shadow: var(--sh-xs);
  transition: background var(--transition), border-color var(--transition);
}
.filters-btn:hover { background: var(--surface-3); border-color: var(--muted-2); }
.filters-btn svg { width: 16px; height: 16px; }
.filters-btn__chip {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--brand-gradient);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

/* Mobile: aside -> fixed slide-over sheet with internal scroll */
@media (max-width: 860px) {
  .filters-btn { display: inline-flex; }
  .filter-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 120;
    width: min(340px, 88vw);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    border-left: none;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh-lg);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(.4,0,.2,1), visibility 240ms;
  }
  .filter-sidebar.is-open { transform: none; visibility: visible; }
  .filter-sidebar__head { display: flex; flex: none; }
  .filter-sidebar__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.filter-backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(11,16,9,.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: overlay-in 160ms ease;
}
.filter-backdrop[hidden] { display: none; }

/* Seller filter banner ("Anuncios de <name>" + X) */
.seller-banner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--primary-tint);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: var(--r-md);
  color: var(--primary);
  font-weight: 600;
  font-size: .92rem;
}
.seller-banner[hidden] { display: none; }
.seller-banner__icon { display: inline-flex; flex: none; }
.seller-banner__icon svg { width: 17px; height: 17px; }
.seller-banner__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.seller-banner__close {
  appearance: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: transparent; color: inherit;
  display: grid; place-items: center;
  transition: background var(--transition);
}
.seller-banner__close:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.seller-banner__close svg { width: 15px; height: 15px; }

/* ----------------------------------------------------------------------- */
/* 29. Facet blocks (filter sidebar contents)                              */
/* ----------------------------------------------------------------------- */
.facet { display: flex; flex-direction: column; gap: var(--s-2); }
.facet__title {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.facet__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.facet__item {
  appearance: none; border: none; cursor: pointer;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-xs);
  background: transparent;
  font-family: inherit; font-size: .9rem; text-align: left;
  color: var(--ink-soft);
  transition: background var(--transition), color var(--transition);
}
.facet__item:hover { background: var(--surface-3); color: var(--ink); }
.facet__item.is-active {
  background: var(--primary-tint);
  color: var(--primary);
  font-weight: 600;
}
.facet__label {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.facet__count {
  flex: none;
  font-size: .78rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.facet__item.is-active .facet__count { color: inherit; opacity: .75; }

/* checkbox-style square (Estado / Marca / Envío / negociables) */
.facet__box {
  width: 16px; height: 16px; flex: none;
  border-radius: 4px;
  border: 1.5px solid var(--muted-2);
  background: var(--surface);
  display: inline-grid; place-items: center;
  transition: background var(--transition), border-color var(--transition);
}
.facet__box svg { width: 11px; height: 11px; opacity: 0; transition: opacity var(--transition); }
.facet__item.is-active .facet__box {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}
.facet__item.is-active .facet__box svg { opacity: 1; }

/* category drill-down: back link, parent title, indented children */
.facet-back {
  appearance: none; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 0;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  color: var(--primary);
  transition: color var(--transition);
}
.facet-back:hover { color: var(--primary-strong); }
.facet-back svg { width: 14px; height: 14px; }
.facet__item--parent {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
}
.facet__list--children {
  margin-left: 4px;
  padding-left: var(--s-3);
  border-left: 2px solid var(--line-soft);
}

/* "Ver más" / "Ver menos" (brands) */
.facet__more {
  appearance: none; border: none; background: none; cursor: pointer;
  align-self: flex-start;
  padding: 2px 9px;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--primary);
  transition: color var(--transition);
}
.facet__more:hover { color: var(--primary-strong); }

/* price range inputs + apply */
.facet__price { display: flex; align-items: center; gap: 6px; }
.facet__price .input {
  width: 0; flex: 1;
  padding: 9px 10px;
  font-size: .88rem;
}
.facet__price-sep { color: var(--muted-2); flex: none; }
.facet__apply { width: 100%; }

/* province select */
.facet__select { width: 100%; }

/* "Limpiar filtros" */
.filters-clear {
  appearance: none; border: none; background: none; cursor: pointer;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  color: var(--danger);
  transition: opacity var(--transition);
}
.filters-clear:hover { opacity: .8; }
.filters-clear svg { width: 14px; height: 14px; }

/* ----------------------------------------------------------------------- */
/* 30. "Explora por categoría" tiles (home)                                */
/* ----------------------------------------------------------------------- */
.explore-section { padding-bottom: 0; }
.explore-title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-head);
  font-size: 1.45rem; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
}
.explore-title svg { width: 22px; height: 22px; }

.cat-tiles {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .cat-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .cat-tiles { grid-template-columns: repeat(7, 1fr); } }

.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--s-4) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  text-align: center;
  color: var(--ink);
  font-weight: 600; font-size: .86rem; line-height: 1.25;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.cat-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
  box-shadow: var(--sh-md);
  color: var(--ink);
}
.cat-tile__icon {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--brand-gradient-soft);
  color: var(--primary);
  display: grid; place-items: center;
}
.cat-tile__icon svg { width: 22px; height: 22px; }
.cat-tile__count { font-size: .74rem; font-weight: 500; color: var(--muted); }

/* ----------------------------------------------------------------------- */
/* 31. Ad card extras (chips row, "Negociable" chip, condition line)       */
/* ----------------------------------------------------------------------- */
.ad-card__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip--negotiable {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.ad-card__cond { font-size: .82rem; color: var(--muted); }

/* ----------------------------------------------------------------------- */
/* 32. Ad detail: breadcrumb, columns, facts list, specs table             */
/* ----------------------------------------------------------------------- */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: .88rem; color: var(--muted);
  overflow-wrap: anywhere;
}
.breadcrumb a { color: var(--muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb__sep { color: var(--muted-2); user-select: none; }
.breadcrumb__current { color: var(--ink); font-weight: 600; }
.breadcrumb[hidden] { display: none; }
/* .back-link sets display:inline-flex, which would defeat [hidden] */
.back-link[hidden] { display: none; }

.ad-detail__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 900px) {
  .ad-detail__cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.ad-detail__col {
  display: flex; flex-direction: column; gap: var(--s-4);
  min-width: 0;
}
.ad-detail__panel { padding: var(--s-5); }

/* price + negociable chip on one line */
.price-line { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* facts list (envío/provincia, publicado, nº anuncio, visto N veces) */
.ad-facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  font-size: .9rem; color: var(--ink-soft);
}
.ad-facts li { display: flex; align-items: center; gap: 8px; }
.ad-facts svg { width: 16px; height: 16px; color: var(--muted); flex: none; }

/* "Características" specs table — striped rows, both themes via tokens */
.specs-panel { padding: var(--s-5); }
.specs-panel__title {
  font-family: var(--font-head);
  font-size: 1.1rem; font-weight: 600;
  margin-bottom: var(--s-3);
}
.specs-table-wrap { overflow-x: auto; }
.specs-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: .92rem;
}
.specs-table th, .specs-table td {
  text-align: left; vertical-align: top;
  padding: 10px 14px;
}
.specs-table th {
  color: var(--muted); font-weight: 600;
  width: 38%; white-space: nowrap;
}
.specs-table td { color: var(--ink); overflow-wrap: anywhere; }
.specs-table tr:nth-child(odd) th,
.specs-table tr:nth-child(odd) td { background: var(--surface-2); }
.specs-table tr > *:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.specs-table tr > *:last-child { border-radius: 0 var(--r-xs) var(--r-xs) 0; }

/* Per-category structured attribute fields (create form + edit modal).
   Injected by JS as a full-width container of .field elements; lay them out
   on the same 2-col grid as the surrounding form. Empty container collapses
   (no gap) so it leaves no trace when a category has no attributes. */
.attr-fields:empty { display: none; }
.attr-fields {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
.attr-fields .field + .field { margin-top: 0; }
@media (min-width: 620px) {
  .attr-fields { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------------- */
/* 33. Legal notice (weapons categories) — amber/warning box               */
/* ----------------------------------------------------------------------- */
.legal-notice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-left: 4px solid var(--warn);
  box-shadow: var(--sh-xs);
}
.legal-notice__icon { flex: none; color: var(--warn); margin-top: 2px; }
.legal-notice__icon svg { width: 20px; height: 20px; }
.legal-notice__title {
  font-family: var(--font-head);
  font-weight: 700; font-size: .98rem;
  color: var(--warn-ink);
  margin-bottom: 4px;
}
.legal-notice__text {
  font-size: .88rem; line-height: 1.6;
  color: color-mix(in srgb, var(--warn-ink) 85%, var(--ink));
}

/* ----------------------------------------------------------------------- */
/* 34. Seller box ("Vendido por") + seller-type badge                      */
/* ----------------------------------------------------------------------- */
.seller-box {
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.seller-box__title {
  font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.seller-box__head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.seller-box__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--brand-gradient);
  color: #fff; font-weight: 700; font-size: 1.05rem;
  display: grid; place-items: center;
}
.seller-box__name {
  font-family: var(--font-head); font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.seller-box__meta {
  margin-top: 2px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: .85rem; color: var(--muted);
}
.seller-box .btn { align-self: flex-start; }

/* "Profesional" seller-type pill (Particular reuses .badge--neutral) */
.badge--pro { background: var(--brand-gradient); color: #fff; }
.badge--pro::before { background: #fff; }

/* ----------------------------------------------------------------------- */
/* 35. Similar ads ("Anuncios similares")                                  */
/* ----------------------------------------------------------------------- */
.similar-section { padding-top: 0; }
.similar-title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-head);
  font-size: 1.45rem; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
}
.similar-title svg { width: 22px; height: 22px; }

/* ----------------------------------------------------------------------- */
/* 36. Favoritos ("Seguir anuncios") — heart toggle button                 */
/* ----------------------------------------------------------------------- */
/* Rose/red accent for the active (filled) heart — reads well on both
   themes; brightened slightly in dark mode. */
:root {
  --fav-rose:    #e11d48;
  --fav-rose-2:  #f43f5e;
  --fav-rose-bg: rgba(225,29,72,.12);
}
:root[data-theme="dark"] {
  --fav-rose:    #fb7185;
  --fav-rose-2:  #fda4af;
  --fav-rose-bg: rgba(251,113,133,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fav-rose:    #fb7185;
    --fav-rose-2:  #fda4af;
    --fav-rose-bg: rgba(251,113,133,.16);
  }
}

/* Round toggle overlaid on the ad-card media (top-right; ribbon is top-left). */
.fav-btn {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  appearance: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-grid; place-items: center;
  padding: 0;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform var(--transition), background var(--transition),
              color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.fav-btn:hover {
  background: var(--surface);
  color: var(--fav-rose);
  border-color: color-mix(in srgb, var(--fav-rose) 45%, var(--line));
  transform: translateY(-1px);
}
.fav-btn:active { transform: translateY(0); }
.fav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fav-btn:disabled { cursor: progress; opacity: .8; }
.fav-btn__icon { display: inline-flex; }
.fav-btn__icon svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  transition: fill var(--transition), stroke var(--transition);
}
/* Active = filled rose heart. */
.fav-btn.is-active {
  color: var(--fav-rose);
  border-color: color-mix(in srgb, var(--fav-rose) 55%, var(--line));
}
.fav-btn.is-active .fav-btn__icon svg {
  fill: var(--fav-rose);
  stroke: var(--fav-rose);
}
/* Subtle pop when toggled. */
.fav-btn.is-pulsing .fav-btn__icon { animation: fav-pop 320ms cubic-bezier(.34,1.56,.64,1); }
@keyframes fav-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* Standalone inline (labelled) variant — used on the ad detail page. */
.fav-btn--inline {
  position: static;
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; border-radius: var(--r-pill);
  gap: 8px; padding: 11px 18px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--sh-xs);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.fav-btn--inline:hover {
  transform: translateY(-1px);
  color: var(--fav-rose);
  background: var(--fav-rose-bg);
  border-color: color-mix(in srgb, var(--fav-rose) 45%, var(--line));
}
.fav-btn--inline.is-active {
  background: var(--fav-rose-bg);
  color: var(--fav-rose);
}
.fav-btn--inline .fav-btn__label { line-height: 1; }

/* Ad detail follow block (button + "Seguido por N personas"). */
.ad-follow { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.ad-follow__count {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: .88rem; font-weight: 500;
}
.ad-follow__count svg { width: 15px; height: 15px; color: var(--fav-rose); fill: var(--fav-rose); stroke: var(--fav-rose); }

/* ----------------------------------------------------------------------- */
/* 37. Guardar búsqueda button + autocomplete suggest panel                */
/* ----------------------------------------------------------------------- */
/* Pill button in the results toolbar (bell icon). */
.save-search-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-weight: 600; font-size: .88rem;
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: var(--r-pill);
  padding: 8px 15px; min-height: 40px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition);
}
.save-search-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  border-color: var(--primary);
  transform: translateY(-1px);
}
.save-search-btn:active:not(:disabled) { transform: translateY(0); }
.save-search-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.save-search-btn:disabled { opacity: .6; cursor: progress; }
.save-search-btn svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .save-search-btn span { display: none; } /* icon-only on very small screens */
  .save-search-btn { padding: 8px 12px; }
}

/* Searchbar wrapper — positioning context for the dropdown panel. */
.searchbar-wrap {
  position: relative;
  margin: var(--s-6) auto 0;
  max-width: 760px;
}
.searchbar-wrap .searchbar { margin-top: 0; }

/* Autocomplete dropdown. Anchored under the searchbar, full width of it. */
.suggest-panel {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--s-2);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: suggest-in 140ms ease;
}
.suggest-panel[hidden] { display: none; }
@keyframes suggest-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.suggest-section + .suggest-section { margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.suggest-section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 4px;
}
.suggest-section__title {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px 4px;
  display: block;
}
.suggest-section__head .suggest-section__title { padding: 0; }
.suggest-clear {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 600;
  color: var(--primary);
  padding: 2px 6px; border-radius: var(--r-xs);
  transition: background var(--transition), color var(--transition);
}
.suggest-clear:hover { background: var(--primary-tint); color: var(--primary-strong); }

.suggest-item {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  font-family: inherit; font-size: .94rem; color: var(--ink);
  background: transparent; border: none;
  padding: 10px 12px; border-radius: var(--r-sm);
  transition: background var(--transition), color var(--transition);
}
.suggest-item:hover,
.suggest-item.is-highlighted {
  background: var(--surface-3);
  color: var(--ink);
}
.suggest-item.is-highlighted { box-shadow: inset 2px 0 0 var(--primary); }
.suggest-item__icon {
  flex: none; display: inline-flex; color: var(--muted);
}
.suggest-item__icon svg { width: 17px; height: 17px; }
.suggest-item__text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: baseline; gap: 8px;
}
.suggest-item__sub {
  font-size: .8rem; color: var(--muted); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ----------------------------------------------------------------------- */
/* 38. Dashboard: favoritos + búsquedas guardadas rows (Agent B)           */
/* ----------------------------------------------------------------------- */
/* Compact list rows reused by the dashboard "Favoritos" and "Búsquedas
   guardadas" panels. Themed + responsive; mirrors the card/panel styling. */
.saved-list { display: flex; flex-direction: column; gap: var(--s-3); }

.fav-row,
.saved-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.fav-row:hover,
.saved-row:hover { border-color: var(--muted-2); box-shadow: var(--sh-sm); }

/* Favorito row: thumb + title/price + estado chip + actions. */
.fav-row__thumb {
  width: 64px; height: 48px; flex: none;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted-2);
}
.fav-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fav-row__thumb svg { width: 20px; height: 20px; opacity: .6; }
.fav-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fav-row__title {
  font-weight: 600; color: var(--ink); font-size: .96rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-row__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.fav-row__price { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fav-row__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* Búsqueda guardada row: name + summary + date + actions. */
.saved-row { align-items: flex-start; }
.saved-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.saved-row__name {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--ink); font-size: .98rem;
}
.saved-row__name svg { width: 16px; height: 16px; color: var(--primary); flex: none; }
.saved-row__summary { font-size: .86rem; color: var(--muted); }
.saved-row__summary .chip { margin-right: 5px; margin-bottom: 3px; }
.saved-row__date { font-size: .78rem; color: var(--muted-2); }
.saved-row__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; flex-wrap: wrap; }

@media (max-width: 560px) {
  .fav-row, .saved-row { flex-wrap: wrap; }
  .fav-row__actions, .saved-row__actions { width: 100%; justify-content: flex-end; }
}

/* ----------------------------------------------------------------------- */
/* 29. Precio oculto (solo cuentas verificadas ven el precio)              */
/* ----------------------------------------------------------------------- */
.ad-card__price--locked {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
}
.ad-card__price--locked svg { width: 15px; height: 15px; flex: 0 0 auto; }

.price-locked-box {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .8rem;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.price-locked-box svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.price-locked-box span { flex: 1; min-width: 150px; font-size: .95rem; font-weight: 600; }

/* ----------------------------------------------------------------------- */
/* 39. Dashboard console shell (page head + sidebar nav + sections)         */
/* ----------------------------------------------------------------------- */
/* Seller console (dashboard.html): a persistent nav rail on desktop that
   collapses into a sticky, horizontally scrollable tab bar on <=900px, plus
   the section wrappers. Only the section matching the URL hash is visible;
   dashboard.js toggles [hidden] + .is-active. All new classes are dash-*. */

.dash-page { padding-block: var(--s-6) var(--s-7); }

/* --- page head -------------------------------------------------------- */
.dash-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.dash-head__text { min-width: 0; }
.dash-head__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-tint);
  padding: 5px 12px; border-radius: var(--r-pill);
  margin-bottom: 10px;
}
.dash-head__eyebrow svg { width: 14px; height: 14px; }
.dash-head__title { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.dash-head__sub {
  color: var(--muted); font-size: .95rem; margin-top: 6px; max-width: 62ch;
}
.dash-head__actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* generic inline icon holder (buttons, notes, eyebrow) */
.dash-ico { display: inline-flex; align-items: center; }
.dash-ico svg { width: 16px; height: 16px; }

/* --- shell grid ------------------------------------------------------- */
.dash-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.dash-sidebar { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.dash-main { min-width: 0; }

@media (min-width: 901px) {
  .dash-shell { grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-6); }
  .dash-sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
  }
}

/* --- nav rail (desktop) ---------------------------------------------- */
.dash-nav {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  min-width: 0;
}
.dash-nav__item {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit; font-size: .94rem; font-weight: 600;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.dash-nav__item:hover { background: var(--surface-3); color: var(--ink); }
.dash-nav__item.is-active {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}
.dash-nav__item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dash-nav__icon { display: inline-flex; flex: none; }
.dash-nav__icon svg { width: 18px; height: 18px; }
.dash-nav__label { flex: 1 1 auto; min-width: 0; }
.dash-nav__count {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; min-width: 24px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--muted);
  font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-nav__item.is-active .dash-nav__count {
  background: var(--primary); color: var(--primary-ink);
}
.dash-nav__count[hidden] { display: none; }

/* --- account mini card (desktop rail only) --------------------------- */
.dash-account {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.dash-account:empty { display: none; }
.dash-account__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-account__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-gradient); color: #fff;
  font-family: var(--font-head); font-weight: 700;
  box-shadow: var(--sh-brand);
}
.dash-account__id { min-width: 0; display: flex; flex-direction: column; }
.dash-account__name {
  font-weight: 700; color: var(--ink); font-size: .94rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-account__mail {
  font-size: .79rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-account__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-account__since { font-size: .77rem; color: var(--muted-2); }

/* --- mobile: rail -> sticky scrollable tab bar (<=900px) ------------- */
@media (max-width: 900px) {
  .dash-sidebar {
    position: sticky;
    top: var(--header-h);
    z-index: 20;                    /* below .site-header (z-index 50) */
    gap: 0;
    padding-block: var(--s-2);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
  }
  .dash-nav {
    flex-direction: row;
    gap: 6px;
    padding: 6px;
    border-radius: var(--r-pill);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dash-nav::-webkit-scrollbar { display: none; }
  .dash-nav__item {
    width: auto; flex: 0 0 auto;
    border-radius: var(--r-pill);
    padding: 10px 15px;
    white-space: nowrap;
  }
  .dash-nav__label { flex: 0 0 auto; }
  .dash-account { display: none; }   /* identity lives in the header on phones */
}

/* --- sections -------------------------------------------------------- */
.dash-section {
  display: flex; flex-direction: column; gap: var(--s-4);
  min-width: 0;
}
.dash-section[hidden] { display: none; }
.dash-section:focus { outline: none; }
.dash-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.dash-section__headtext { min-width: 0; }
.dash-section__title { font-size: clamp(1.25rem, 2.6vw, 1.5rem); }
.dash-section__sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }

/* destaque note reuses .destaque-note, but here it is not inside a
   .card--flush, so drop the horizontal inset. */
.destaque-note.dash-note { margin: 0; }

/* --- status filter bar ("Mis anuncios") ------------------------------ */
.dash-filterbar {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
.dash-filterbar .filters { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
  /* chips scroll sideways inside their own box: no page overflow */
  .dash-filterbar .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .dash-filterbar .filters::-webkit-scrollbar { display: none; }
  .dash-filterbar .filter-chip { flex: 0 0 auto; min-height: 44px; }
}

/* --- generic panel (used by "Tus últimos anuncios") ------------------ */
.dash-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.dash-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.dash-panel__title { font-family: var(--font-head); font-size: 1.05rem; }
.dash-panel__body { padding: var(--s-4) var(--s-5) var(--s-5); }
@media (max-width: 560px) {
  .dash-panel__head, .dash-panel__body { padding-inline: var(--s-4); }
}

/* ----------------------------------------------------------------------- */
/* 40. Dashboard stat cards ("Resumen")                                    */
/* ----------------------------------------------------------------------- */
.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (min-width: 620px) {
  .dash-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
}
@media (min-width: 1024px) {
  .dash-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dash-stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.dash-stat__icon {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted);
}
.dash-stat__icon svg { width: 17px; height: 17px; }
.dash-stat__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  padding-right: 36px;
}
.dash-stat__value {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 4.6vw, 1.95rem); font-weight: 700; line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dash-stat__sub { font-size: .77rem; color: var(--muted); }

/* Brand-gradient cards (total anuncios + visitas) — same treatment as the
   admin .stat--accent so both consoles feel like one product. */
.dash-stat--brand {
  /* Gradiente algo más oscuro que --brand-gradient: con el verde claro
     original, el texto blanco no llegaba al contraste AA (4.5:1). */
  background: linear-gradient(135deg, #4d7c0f 0%, #35530f 100%);
  border-color: transparent;
  box-shadow: var(--sh-brand);
}
.dash-stat--brand .dash-stat__label { color: #fff; }
.dash-stat--brand .dash-stat__value { color: #fff; }
.dash-stat--brand .dash-stat__sub { color: rgba(255,255,255,.92); }
.dash-stat--brand .dash-stat__icon { background: rgba(255,255,255,.20); color: #fff; }

/* Semantic cards keep the plain surface, tint only icon + number. */
.dash-stat--ok .dash-stat__icon { background: var(--ok-bg); color: var(--ok-ink); }
.dash-stat--ok .dash-stat__value { color: var(--ok-ink); }
.dash-stat--warn .dash-stat__icon { background: var(--warn-bg); color: var(--warn-ink); }
.dash-stat--warn .dash-stat__value { color: var(--warn-ink); }
.dash-stat--danger .dash-stat__icon { background: var(--danger-bg); color: var(--danger-ink); }
.dash-stat--danger .dash-stat__value { color: var(--danger-ink); }
.dash-stat--gold {
  border-color: color-mix(in srgb, var(--gold-1) 40%, var(--line));
}
.dash-stat--gold .dash-stat__icon {
  background: color-mix(in srgb, var(--gold-3) 26%, transparent);
  color: var(--gold-2);
}
.dash-stat--gold .dash-stat__value { color: var(--gold-2); }

/* Dark theme: deepen the gradient behind the white numbers (the lime end of
   --brand-gradient is too light to carry white text on a dark UI). */
:root[data-theme="dark"] .dash-stat--brand {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.16) 100%),
    var(--brand-gradient);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dash-stat--brand {
    background-image:
      linear-gradient(135deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.16) 100%),
      var(--brand-gradient);
  }
}

/* Dark theme: the amber-600 gold reads too dark on the dark surface. */
:root[data-theme="dark"] .dash-stat--gold .dash-stat__value,
:root[data-theme="dark"] .dash-stat--gold .dash-stat__icon { color: var(--gold-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dash-stat--gold .dash-stat__value,
  :root:not([data-theme]) .dash-stat--gold .dash-stat__icon { color: var(--gold-3); }
}

/* Loading placeholders (7 cards while GET /api/ads/mine is in flight). */
.dash-stat--skel { gap: 10px; min-height: 104px; }
.dash-stat--skel .skel-line { display: block; }
#dash-stats .empty-state { grid-column: 1 / -1; }

/* ----------------------------------------------------------------------- */
/* 41. Dashboard ad cards ("Mis anuncios" grid)                             */
/* ----------------------------------------------------------------------- */
.dash-adgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
@media (min-width: 760px)  { .dash-adgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dash-adgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dash-adcard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.dash-adcard:hover {
  box-shadow: var(--sh-md);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
}
/* The legacy phone rule `#my-ads [data-ad-id] { align-items: flex-start }`
   (section 27, written for the old flat rows) still matches these cards —
   restore the flex default so the media/footer span the full width. */
#my-ads .dash-adcard { align-items: stretch; }

.dash-adcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
  overflow: hidden;
}
.dash-adcard__media img { width: 100%; height: 100%; object-fit: cover; }
.dash-adcard__media .ad-card__placeholder { width: 100%; height: 100%; }
.dash-adcard__status { position: absolute; top: 10px; right: 10px; z-index: 2; }
.dash-adcard__status .badge { box-shadow: var(--sh-sm); }
.dash-adcard__ribbon { position: absolute; top: 10px; left: 10px; z-index: 2; }
.dash-adcard--featured { border-color: var(--gold-1); box-shadow: var(--gold-glow); }

.dash-adcard__body {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-4);
  min-width: 0;
}
.dash-adcard__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-chip--muted { background: var(--surface-3); color: var(--muted); }
.dash-adcard__title {
  font-family: var(--font-head);
  font-size: 1.02rem; font-weight: 600; line-height: 1.3;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-adcard__price {
  font-family: var(--font-head);
  font-size: 1.14rem; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dash-adcard__meta { font-size: .82rem; color: var(--muted); }
.dash-adcard__counters { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: 2px; }
.dash-adcard__counter {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dash-adcard__counter svg { width: 15px; height: 15px; opacity: .85; }
.dash-adcard__foot {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.dash-adcard__foot .btn { flex: 1 1 auto; min-height: 40px; }

/* ----------------------------------------------------------------------- */
/* 42. Dashboard publish form (grouped fieldsets) + shared bits             */
/* ----------------------------------------------------------------------- */
/* The create-ad <fieldset id="create-fieldset"> is only a disabling wrapper:
   strip the browser chrome. The visual grouping is done by .dash-formgroup. */
#create-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.dash-form { display: flex; flex-direction: column; gap: var(--s-4); }
.dash-form--modal { gap: var(--s-5); }

.dash-formgroup {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  min-width: 0;
}
.dash-formgroup--flat {
  padding: 0; background: transparent; border: 0; box-shadow: none;
}
.dash-formgroup__head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed var(--line);
}
.dash-formgroup__num {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--primary-tint); color: var(--primary);
  font-family: var(--font-head); font-weight: 700; font-size: .85rem;
}
.dash-formgroup__titles { min-width: 0; }
.dash-formgroup__title { font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; }
.dash-formgroup__hint { font-size: .84rem; color: var(--muted); margin-top: 2px; }

.dash-form__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.dash-form__note {
  display: flex; align-items: center; gap: 8px;
  font-size: .86rem; color: var(--muted);
}
.dash-form__note svg { width: 16px; height: 16px; color: var(--primary); flex: none; }

@media (max-width: 560px) {
  .dash-formgroup { padding: var(--s-4); }
  .dash-form__foot { padding: var(--s-4); }
  .dash-form__foot .btn { width: 100%; }
}

/* --- checkbox row (precio negociable) -------------------------------- */
.dash-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.dash-check:hover { border-color: var(--primary); background: var(--primary-tint); }
.dash-check:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); }
.dash-check input[type="checkbox"] {
  width: 20px; height: 20px; margin: 1px 0 0; flex: none;
  accent-color: var(--primary); cursor: pointer;
}
.dash-check__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-check__title { font-weight: 600; color: var(--ink); font-size: .93rem; }
.dash-check__hint { font-size: .8rem; color: var(--muted); }

/* --- locked-form callout (cuenta no activa) --------------------------- */
.dash-lock {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-left: 4px solid var(--warn);
  border-radius: var(--r-lg);
}
.dash-lock__icon { flex: none; color: var(--warn-ink); }
.dash-lock__icon svg { width: 22px; height: 22px; }
.dash-lock__body { min-width: 0; }
.dash-lock__title { font-family: var(--font-head); font-weight: 600; color: var(--warn-ink); }
.dash-lock__text {
  font-size: .89rem; margin-top: 2px;
  color: color-mix(in srgb, var(--warn-ink) 82%, var(--ink));
}

/* --- empty states + list skeletons inside the console ---------------- */
#my-ads .empty-state,
#fav-list .empty-state,
#saved-search-list .empty-state {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.dash-empty__cta { margin-top: var(--s-2); }

.dash-skelrow { pointer-events: none; }
.dash-skelrow__thumb { width: 64px; height: 48px; border-radius: var(--r-sm); flex: none; }
.dash-skelrow__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-skelrow .skel-line { display: block; }

/* --- edit-ad modal: a touch more air between groups ------------------ */
.modal-dialog .dash-form--modal .dash-formgroup + .dash-formgroup {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}

/* ----------------------------------------------------------------------- */
/* 43. Lightbox (visor de medios a pantalla completa) + thumb "ampliar"     */
/* ----------------------------------------------------------------------- */
/* Own overlay (never .modal-overlay) so it can sit ON TOP of an open modal —
   the KYC document viewer is opened from inside the user-detail modal.
   Chrome is deliberately light-on-dark in BOTH themes (it is a media viewer:
   a dark stage is what makes the media readable); brand tokens supply the
   accents so it still reads as Caza y Pesca. */
.lb-overlay {
  position: fixed; inset: 0; z-index: 300;      /* .modal-overlay is 100 */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 2.5vw, 28px);
  background: rgba(6, 10, 5, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overscroll-behavior: contain;
  color-scheme: dark;
  animation: overlay-in 160ms ease;
}
.lb-figure {
  margin: 0; min-width: 0; min-height: 0;
  max-width: 92vw; max-height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-3);
}
/* The media is a flex item of .lb-figure with min-height:0, so on short
   viewports it shrinks (object-fit keeps it undistorted) instead of pushing
   the caption out of the overlay. */
.lb-media {
  display: block;
  width: auto; height: auto;
  max-width: 92vw; max-height: 88vh;
  min-width: 0; min-height: 0;
  object-fit: contain;
  border-radius: var(--r-md);
  background: #0b0f08;
  box-shadow: var(--sh-lg);
  animation: dialog-in 200ms cubic-bezier(.4, 0, .2, 1);
}
/* A <video> has no intrinsic size until metadata loads — give it a floor. */
video.lb-media { width: min(92vw, 960px); }

.lb-caption {
  flex: none; max-width: 92vw;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  background: rgba(16, 22, 14, .74);
  color: #f1f5ea;
  font-size: .9rem; line-height: 1.35;
}
.lb-caption__text {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-caption__text:empty { display: none; }
.lb-counter {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-1);
}

/* close (×) + prev/next arrows — 44px touch targets, absolute over the stage */
.lb-close, .lb-nav {
  position: absolute; z-index: 2;
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  background: rgba(16, 22, 14, .68); color: #f1f5ea;
  display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.lb-close svg, .lb-nav svg { width: 22px; height: 22px; }
.lb-close { top: clamp(8px, 2vw, 20px); right: clamp(8px, 2vw, 20px); }
.lb-nav { top: 50%; margin-top: -22px; }
.lb-nav--prev { left: clamp(6px, 2vw, 20px); }
.lb-nav--next { right: clamp(6px, 2vw, 20px); }
.lb-nav:hover { background: rgba(101, 163, 13, .62); border-color: var(--brand-1); }
.lb-close:hover { background: rgba(220, 38, 38, .62); border-color: #f87171; }
.lb-close:focus-visible, .lb-nav:focus-visible {
  outline: 2px solid var(--brand-1); outline-offset: 3px;
}

/* --- clickable thumbnails ("ampliar") -------------------------------- */
/* Used two ways: the tile ITSELF is the button (admin ad review strips), or
   the button fills an existing .media-strip__item tile (KYC doc previews). */
.lb-thumb-btn {
  appearance: none; -webkit-appearance: none;
  display: block; position: relative;
  padding: 0; margin: 0; border: 0;
  background: none; color: inherit; font: inherit;
  overflow: hidden;
  cursor: pointer;            /* fallback */
  cursor: zoom-in;
}
.media-strip__item.lb-thumb-btn {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  transition: border-color var(--transition);
}
.media-strip__item > .lb-thumb-btn { width: 100%; height: 100%; border-radius: inherit; }
.media-strip__item.lb-thumb-btn:hover { border-color: var(--primary); }
.lb-thumb-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* video tiles have no poster: centred glyph instead of a stretched icon */
.lb-thumb-glyph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--muted);
}
.lb-thumb-glyph svg { width: 26px; height: 26px; }

/* magnifier overlay revealed on hover/focus so the zoom is discoverable */
.lb-thumb-zoom {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(11, 16, 9, .5);
  color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.lb-thumb-zoom svg { width: 22px; height: 22px; }
.lb-thumb-btn:hover .lb-thumb-zoom,
.lb-thumb-btn:focus-visible .lb-thumb-zoom { opacity: 1; }

/* touch devices never hover: keep a small, permanent corner hint */
@media (hover: none) {
  .lb-thumb-zoom {
    opacity: 1;
    inset: auto 3px 3px auto;
    width: 22px; height: 22px;
    border-radius: var(--r-xs);
    background: rgba(11, 16, 9, .66);
  }
  .lb-thumb-zoom svg { width: 14px; height: 14px; }
}

/* phones (360px included): chrome stays inside the viewport, caption legible */
@media (max-width: 560px) {
  .lb-overlay { padding: 8px; }
  .lb-figure { max-width: 92vw; gap: var(--s-2); }
  .lb-media { max-height: 74vh; border-radius: var(--r-sm); }
  .lb-caption {
    max-width: 92vw; gap: var(--s-2);
    padding: 7px 12px; font-size: .84rem;
  }
  .lb-close { top: 8px; right: 8px; }
  .lb-nav--prev { left: 6px; }
  .lb-nav--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-overlay, .lb-media { animation: none; }
}

/* ----------------------------------------------------------------------- */
/* 44. Paid listing: tipo de publicación (plan cards) + comprobante        */
/* ----------------------------------------------------------------------- */
/* Grupo "Tipo de publicación y pago" del formulario de publicar (y del modal
   de edición). Cada tarjeta es un <label> que envuelve un <input type="radio">
   NATIVO y visible: así el grupo es navegable con teclado (flechas), el foco
   lo pinta el navegador y toda la tarjeta (>=44px) es zona pulsable.
   Se usa auto-fit en lugar de media queries porque el mismo grupo vive dentro
   del modal, que es mucho más estrecho que la página. */
.dash-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-3);
}
.dash-plans__empty { margin: 0; }

.dash-plan {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
              box-shadow var(--transition);
}
.dash-plan:hover { border-color: var(--primary); background: var(--primary-tint); }
.dash-plan.is-selected {
  border-color: var(--primary);
  background: var(--primary-tint);
  box-shadow: 0 0 0 1px var(--primary) inset, var(--sh-sm);
}
/* Radio nativo: acento de marca + objetivo cómodo (la tarjeta entera lo activa). */
.dash-plan__radio {
  width: 20px; height: 20px; margin: 1px 0 0; flex: none;
  accent-color: var(--primary); cursor: pointer;
}
.dash-plan__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.dash-plan__top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dash-plan__name {
  font-family: var(--font-head);
  font-size: .98rem; font-weight: 600; color: var(--ink);
}
.dash-plan__pill { display: inline-flex; }
.dash-plan__price {
  font-family: var(--font-head);
  font-size: 1.22rem; font-weight: 700; line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dash-plan__dur {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 600; color: var(--muted);
}
.dash-plan__dur svg { width: 14px; height: 14px; flex: none; opacity: .85; }
.dash-plan__desc { font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* Marca de "elegido" en la esquina: solo visible en la tarjeta seleccionada. */
.dash-plan__check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink);
  opacity: 0; transform: scale(.7);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}
.dash-plan__check svg { width: 14px; height: 14px; }
.dash-plan.is-selected .dash-plan__check { opacity: 1; transform: scale(1); }

/* Tipos con destaque (rank > 0): acento dorado, como el resto del destaque. */
.dash-plan--featured { border-color: color-mix(in srgb, var(--gold-1) 55%, var(--line)); }
.dash-plan--featured:hover { border-color: var(--gold-1); }
.dash-plan--featured.is-selected {
  border-color: var(--gold-1);
  background: color-mix(in srgb, var(--gold-3) 12%, var(--surface));
  box-shadow: var(--gold-glow);
}
.dash-plan--featured .dash-plan__radio { accent-color: var(--gold-2); }
.dash-plan--featured.is-selected .dash-plan__check {
  background: var(--gold-2); color: #fff;
}

/* Formulario bloqueado (cuenta no activa): el fieldset ya baja la opacidad. */
fieldset:disabled .dash-plan,
fieldset:disabled .dash-plan__radio { cursor: not-allowed; }
fieldset:disabled .dash-plan:hover { border-color: var(--line); background: var(--surface); }

/* --- resumen "A pagar" ------------------------------------------------ */
.dash-plan-summary {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: var(--s-3);
  padding: 10px var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: .88rem; color: var(--muted);
}
.dash-plan-summary__label { font-weight: 600; color: var(--ink-soft); }
.dash-plan-summary__amount {
  font-family: var(--font-head);
  font-size: 1.06rem; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.dash-plan-summary__name { color: var(--ink-soft); }

/* --- aviso "nada se publica sin verificar el pago" -------------------- */
.dash-plan-notice {
  display: flex; align-items: flex-start; gap: 9px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-size: .85rem; color: var(--muted);
  line-height: 1.45;
}
.dash-plan-notice svg { width: 17px; height: 17px; color: var(--primary); flex: none; }
.dash-plan-notice .dash-ico { display: inline-flex; flex: none; margin-top: 1px; }

/* --- dropzone compacta (comprobante: 1 archivo) ----------------------- */
.dropzone--compact { padding: var(--s-4); gap: 6px; }
.dropzone--compact .dropzone__icon svg { width: 24px; height: 24px; }
.dropzone--compact .dropzone__title { font-size: .92rem; }

/* Un solo archivo: la miniatura no debe estirarse por todo el ancho. */
.dropzone--compact + .dz-previews {
  grid-template-columns: repeat(auto-fill, 96px);
}

/* --- estado del comprobante ya guardado (modal de edición) ------------ */
.dash-receipt-note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .82rem; line-height: 1.45;
  color: var(--ok-ink);
}
.dash-receipt-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.dash-receipt-note strong { font-weight: 600; }
.dash-receipt-note.is-missing { color: var(--warn-ink); }

/* --- "Mis anuncios": tipo solicitado + estado del comprobante --------- */
.dash-chip--type {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-3));
  color: var(--ink-soft);
}
.dash-adcard__receipt {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  font-size: .8rem; font-weight: 600; color: var(--muted);
}
.dash-adcard__receipt svg { width: 14px; height: 14px; flex: none; }
.dash-adcard__receipt.is-ok { color: var(--ok-ink); }
.dash-adcard__receipt.is-missing { color: var(--warn-ink); }

/* --- móviles (360px incluido) ----------------------------------------- */
@media (max-width: 560px) {
  .dash-plans { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .dash-plan { padding: var(--s-3); }
  .dash-plan__price { font-size: 1.12rem; }
  .dash-plan-summary { padding: 10px var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .dash-plan, .dash-plan__check { transition: none; }
}

/* ----------------------------------------------------------------------- */
/* 45. Admin: pago del anuncio (tipo solicitado + comprobante) y tipos      */
/*     de publicación con moneda y descripción                              */
/* ----------------------------------------------------------------------- */
/* Arreglo de la línea de propietario de la tarjeta de revisión: su icono no
   tenía tamaño y, como los SVG del set van sin width/height, se estiraba a
   todo el ancho y empujaba el resto de la tarjeta (incluido este bloque). */
.review-card__owner { display: flex; align-items: center; gap: 5px; }
.review-card__owner svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Bloque de pago dentro de las tarjetas de revisión (#ads-list). Todo se
   construye con tokens, así que hereda claro/oscuro sin overrides. */
.pay-block {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-xs);
  background: var(--surface-3);
  min-width: 0;
}
/* Falta el comprobante de un tipo de pago > 0: aviso ámbar. */
.pay-block--missing {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  border-left-color: var(--warn);
  background: var(--warn-bg);
}
.pay-block__row {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; min-width: 0;
}
.pay-block__label {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.pay-block__value {
  font-size: .94rem; font-weight: 600; color: var(--ink);
  overflow-wrap: anywhere;
}
.pay-block__value--none { color: var(--muted-2); font-weight: 500; }
.pay-block__meta { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
/* Los SVG del set no traen width/height: dentro de un .btn flex hay que fijarlos. */
.pay-block .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Distintivo dorado cuando el tipo solicitado además destaca (rank > 0). */
.pay-block__flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gold-3) 26%, var(--surface));
  color: var(--gold-2);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.pay-block__flag svg { width: 12px; height: 12px; }

/* Chips de estado del comprobante. */
.pay-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; line-height: 1.35;
  white-space: nowrap;
}
.pay-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pay-chip--ok { background: var(--ok-bg); color: var(--ok-ink); }
/* Rojo (no ámbar) para que siga leyéndose sobre el fondo ámbar del bloque. */
.pay-chip--missing {
  background: var(--danger-bg); color: var(--danger-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);
}

/* Casilla "Aplicar el tipo solicitado" del modal de aprobación. */
.pay-check {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-3);
  font-size: .92rem; line-height: 1.45; color: var(--ink-soft);
  cursor: pointer;
}
.pay-check:hover { border-color: var(--muted-2); }
.pay-check input {
  margin-top: 3px; flex: 0 0 auto; cursor: pointer;
  accent-color: var(--primary);
}
.pay-check strong { color: var(--ink); }

/* Planes admin: campo de descripción más ancho en la barra de alta y celda
   de descripción acotada en la tabla. */
.plan-addbar .field--desc { flex: 2 1 220px; }
/* El precio lleva ahora su moneda: no debe partirse en dos líneas. */
.plan-cell-price { white-space: nowrap; }
.plan-cell-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 150px; max-width: 260px;
  font-size: .86rem; color: var(--ink-soft);
}

/* Móvil: el botón del comprobante ocupa el ancho disponible y la descripción
   de la tabla se acorta (la tabla ya hace scroll horizontal). */
@media (max-width: 560px) {
  .pay-block__row .btn { flex: 1 1 auto; }
  .plan-cell-desc { max-width: 180px; }
}

/* ----------------------------------------------------------------------- */
/* 46. Pie del sitio (footer compartido)                                   */
/* ----------------------------------------------------------------------- */
/* renderFooter() (ui.js) inyecta este pie dentro de #site-footer en todas las
   páginas. Móvil: una sola columna con los enlaces apilados y 44px de zona
   pulsable. Desde 720px: la marca a la izquierda, los enlaces a la derecha y
   la nota + el copyright ocupando la fila inferior completa.
   CONTRASTE del texto pequeño sobre var(--surface) — AA pide 4.5:1 y se
   cumple en los DOS temas (medido con la fórmula WCAG sobre los tokens):
     · .site-footer__link, var(--muted): claro #687567 sobre #ffffff = 4.85:1;
       oscuro #98a48f sobre #161c14 = 6.6:1.
     · nota y copyright, var(--muted-2) mezclado con var(--ink) al 40%:
       claro ≈#656f64 sobre #ffffff = 5.2:1; oscuro ≈#a2aa9b sobre #161c14 =
       7.2:1.
   var(--muted-2) a secas se queda en 2.3:1 (claro) y 3.9:1 (oscuro), así que
   NO es legible tal cual a este tamaño: de ahí el color-mix. */
.site-footer {
  margin-top: var(--s-8);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
/* El marcado pone .container en este mismo elemento; se repiten sus valores
   para no depender de él. Misma especificidad (una clase) y va después, así
   que gana esta regla: el padding no se duplica. */
.site-footer__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
  padding-block: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

/* Marca: el mismo aspecto de .brand de la cabecera, un paso más pequeña. */
.site-footer__brand {
  display: inline-flex; align-items: center; gap: 9px;
  min-width: 0;
  font-family: var(--font-head);
  font-size: 1rem; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.site-footer__brand:hover { color: var(--primary); }
/* Los SVG del set van SIN width/height: hay que fijarlos o el isotipo se
   estira y revienta la fila (ya pasó en la tarjeta de revisión, sección 45).
   No se toca el color aquí para que, si el icono va dentro de .brand__mark,
   siga heredando el blanco sobre el degradado. */
.site-footer__brand svg { width: 22px; height: 22px; flex: 0 0 auto; }

.site-footer__links {
  display: flex; flex-direction: column;
  gap: 0;
  min-width: 0;
}
.site-footer__link {
  display: inline-flex; align-items: center;
  min-height: 44px;            /* zona pulsable cómoda en móvil */
  color: var(--muted);
  font-size: .9rem; font-weight: 600;
  transition: color var(--transition);
}
.site-footer__link:hover { color: var(--primary); }
.site-footer__link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-xs);
  color: var(--primary);
}

.site-footer__note,
.site-footer__copy {
  font-size: .78rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--muted-2) 60%, var(--ink));
}
.site-footer__note { max-width: 68ch; }
.site-footer__copy {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}

/* Tabletas y escritorio: marca / enlaces en una fila, resto a ancho completo.
   Se usa grid para que la nota y el copyright cierren el pie sin envolverse
   con los enlaces. */
@media (min-width: 720px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s-5);
    row-gap: var(--s-4);
    padding-inline: var(--s-5);
    padding-block: var(--s-6);
  }
  .site-footer__brand { grid-column: 1; }
  .site-footer__links {
    grid-column: 2;
    flex-direction: row; flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-2) var(--s-5);
  }
  .site-footer__link { min-height: 0; }
  .site-footer__note,
  .site-footer__copy { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------------- */
/* 47. Documentos legales (página pública + editor del panel)              */
/* ----------------------------------------------------------------------- */
/* legal.html pinta UN documento (?doc=<slug>) con .legal-nav de selector y
   .legal-doc como tarjeta de lectura larga; el cuerpo lo genera legal.js a
   partir de texto plano (encabezados '## ', listas '- ' y párrafos), así que
   aquí solo se estilan h2/p/ul/li. El editor de la pestaña "Legales" del
   panel reutiliza los mismos tokens.
   OJO: nada que ver con .legal-notice (sección 33), que es la caja ámbar de
   aviso sobre armas de la ficha del anuncio. */

/* --- selector de documento (público) ---------------------------------- */
.legal-nav {
  display: flex;
  gap: var(--s-2);
  min-width: 0;
  margin-bottom: var(--s-5);
  padding-bottom: 4px;
  /* Las píldoras se desplazan DENTRO de su caja: a 375px la página no
     desborda aunque los tres títulos no quepan. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.legal-nav::-webkit-scrollbar { display: none; }
.legal-nav__link {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
.legal-nav__link:hover {
  background: var(--surface-3);
  border-color: var(--muted-2);
  color: var(--ink);
}
.legal-nav__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.legal-nav__link.is-active {
  background: var(--primary-tint);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}

/* --- tarjeta del documento -------------------------------------------- */
.legal-doc {
  max-width: 100%; min-width: 0;
  padding: var(--s-5) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow-wrap: break-word;   /* urls y correos largos no estiran la tarjeta */
}
.legal-doc__title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  line-height: 1.2;
  color: var(--ink);
}
.legal-doc__meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
  font-size: .82rem; color: var(--muted);
}
.legal-doc__meta svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Lectura larga: línea de ~70 caracteres, interlineado holgado y separación
   generosa entre secciones. La medida se limita pero NO se centra: el cuerpo
   tiene que arrancar en el mismo borde izquierdo que el título del documento,
   porque centrarlo dentro de una tarjeta ancha deja un escalón visible entre
   el título y el primer párrafo. */
.legal-doc__body {
  max-width: 68ch;
  margin: var(--s-5) 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}
.legal-doc__body h2 {
  font-family: var(--font-head);
  font-size: 1.22rem; font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
/* El primer encabezado va pegado al título del documento, sin filete. */
.legal-doc__body > h2:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}
.legal-doc__body p { margin: 0 0 var(--s-4); }
.legal-doc__body ul {
  margin: 0 0 var(--s-4);
  padding-left: 0;
  list-style: none;
}
.legal-doc__body li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-2);
}
/* Viñeta propia (punto de marca) alineada con la primera línea del punto. */
.legal-doc__body li::before {
  content: "";
  position: absolute; left: 6px; top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.legal-doc__body > *:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .legal-doc { padding: var(--s-6); }
}

/* --- editor del panel de administración (pestaña "Legales") ----------- */
.legal-editor {
  display: flex; flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}
.legal-editor__card {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  max-width: 100%; min-width: 0;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.legal-editor__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  min-width: 0;
}
.legal-editor__title {
  min-width: 0;
  font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
}
.legal-editor__meta {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .8rem; color: var(--muted);
}
.legal-editor__meta svg { width: 14px; height: 14px; flex: 0 0 auto; }
.legal-editor__actions {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  min-width: 0;
}
/* Los SVG del set no traen tamaño: dentro de un .btn flex hay que fijarlo. */
.legal-editor__actions .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Misma piel que .input (borde, radio y foco), pero monoespaciada porque el
   cuerpo es texto plano con marcado ligero y la alineación importa. */
.legal-textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
  min-height: 340px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9rem; line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition);
}
.legal-textarea::placeholder { color: var(--muted-2); }
.legal-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
}

/* --- móviles (375px incluido) ----------------------------------------- */
@media (max-width: 767px) {
  .legal-textarea { font-size: 16px; }   /* evita el zoom al enfocar en iOS */
}
@media (max-width: 560px) {
  .legal-doc { padding: var(--s-4) var(--s-3); }
  /* Los dos botones de cada tarjeta se reparten la fila en vez de apretarse. */
  .legal-editor__actions .btn { flex: 1 1 auto; }
}

/* ----------------------------------------------------------------------- */
/* 48. Aceptación de documentos legales (casilla + estado + historial)     */
/* ----------------------------------------------------------------------- */
/* .legal-consent es el bloque de "He leído y acepto…" del alta de cuenta y del
   paso 5 de publicar/editar. Nada que ver con .legal-doc / .legal-editor
   (sección 47, los documentos en sí) ni con .legal-notice (sección 33).

   El mismo bloque se pinta con marcado LIGERAMENTE distinto según la página,
   así que ninguna regla depende de la etiqueta concreta:
     · register.html  -> .legal-consent__row es un <label for> y el texto un <span>
     · dashboard.html -> la fila es un <div> y el texto un <label for>
     · dashboard.js   -> igual que dashboard.html, para el modal de edición
   De ahí que el cursor de mano se ponga sobre los elementos que DE VERDAD
   activan la casilla (label.legal-consent__row, label.legal-consent__text) y
   no sobre la fila a secas: un puntero de mano sobre un <div> inerte engaña.

   CONTRASTE sobre el fondo del bloque, var(--surface-2) — AA pide 4.5:1 para
   texto pequeño y se cumple en los DOS temas (fórmula WCAG sobre los tokens):
     · .legal-consent__note: var(--muted-2) A SECAS no llega (claro #9aa595
       sobre #fafcf6 = 2.5:1; oscuro #6f7a67 sobre #1d2519 = 3.5:1), así que se
       mezcla con var(--ink) al 60% (mismo recurso que el pie, sección 46):
       claro ≈#657064 sobre #fafcf6 = 5.0:1; oscuro ≈#a2aa9b sobre #1d2519 =
       6.6:1.
     · enlaces del texto, var(--primary): claro #4d7c0f = 4.8:1; oscuro
       #84cc16 = 8.0:1.
     · .legal-consent__done, var(--ok-ink) sobre var(--ok-bg): claro #0f6b32
       sobre #dcf5e4 = 5.7:1; oscuro #86efac sobre el color que resulta de
       componer rgba(34,197,94,.18) con var(--surface-2) (≈#1e4225) = 8.0:1. */

/* --- bloque de aceptación (formulario) -------------------------------- */
.legal-consent {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  max-width: 100%; min-width: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  /* Filete de marca a la izquierda, como .pay-block (45) y .dash-lock (42):
     el bloque destaca dentro del grupo del formulario sin gritar, para que no
     se lea como la letra pequeña que nadie mira. */
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
}
/* Foco dentro (casilla o enlaces): se marca el bloque entero, igual que
   .dash-check, para que se vea dónde está el teclado. */
.legal-consent:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
}

.legal-consent__row {
  display: flex; align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
label.legal-consent__row,
label.legal-consent__text { cursor: pointer; }

.legal-consent__check {
  width: 20px; height: 20px;   /* >= 18px: objetivo cómodo, no un punto */
  margin: 2px 0 0;             /* centrada en la primera línea del texto */
  flex: 0 0 auto;
  accent-color: var(--primary);
  cursor: pointer;
}
.legal-consent__check:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.legal-consent__text {
  min-width: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-soft);
  /* El título más largo ("Política de manejo y uso de datos personales") no
     debe estirar la tarjeta a 375px. */
  overflow-wrap: break-word;
}
.legal-consent__text a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
.legal-consent__text a:hover { color: var(--primary-strong); }
.legal-consent__text a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.legal-consent__note {
  margin: 0;
  font-size: .78rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--muted-2) 60%, var(--ink));
}
/* Los SVG del set van SIN width/height: si la nota llevara icono, se estiraría
   a todo el ancho. Se dimensiona por si acaso, inline con el texto. */
.legal-consent__note svg {
  width: 13px; height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}

/* --- estado "ya aceptado" (edición de un anuncio con aceptación vigente) */
/* Va dentro de .legal-consent (así lo pinta dashboard.js), de ahí que no lleve
   borde propio: solo el fondo verde y un filete interior muy suave, para no
   encajonar una caja dentro de otra. También se sostiene suelto. */
.legal-consent__done {
  display: flex; align-items: flex-start;
  gap: 8px;
  margin: 0;
  max-width: 100%; min-width: 0;
  padding: 10px var(--s-3);
  background: var(--ok-bg);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
  font-size: .9rem; font-weight: 600;
  line-height: 1.4;
  color: var(--ok-ink);
  overflow-wrap: anywhere;
}
/* Tamaño EXPLÍCITO: UI.icon() devuelve un SVG sin width/height y dentro de un
   contenedor flex se estira a todo el ancho (ya reventó la tarjeta de revisión
   del panel, sección 45). */
.legal-consent__done svg {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  margin-top: 1px;
}
.legal-consent__done > span { min-width: 0; }

/* El historial de asientos que abre el panel NO tiene estilos propios a
   propósito: admin.js lo pinta con .table-wrap + .table, el mismo par que usan
   las demás tablas del panel, así que hereda su aspecto y su scroll horizontal.
   La columna del navegador se recorta a 70 caracteres con el valor completo en
   el title, y la de la IP parte por cualquier punto, porque las dos son texto
   que manda el cliente y pueden venir larguísimas. */

/* --- móviles y pantallas táctiles (375px incluido) --------------------- */
/* La fila entera activa la casilla: garantizándole 44px de alto, la zona
   pulsable cumple el mínimo cómodo aunque el texto ocupe una sola línea. */
@media (max-width: 767px) {
  .legal-consent__row { min-height: 44px; }
}
@media (max-width: 560px) {
  .legal-consent { padding: var(--s-3); }
  .legal-consent__text { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-consent__text a { transition: none; }
}

/* ----------------------------------------------------------------------- */
/* 49. Contacto del anuncio (botón de WhatsApp + teléfono cerrado)         */
/* ----------------------------------------------------------------------- */
/* Se pinta dentro de la caja "Vendido por" de la ficha (.seller-box, sección
   34). El servidor decide cuál de los tres estados llega al navegador:
     · contact_phone     -> .contact-block: botón de WhatsApp + número en texto
     · contact_hidden    -> .contact-locked: candado, SIN número en el DOM
     · has_contact false -> no se pinta nada (ese anuncio no tiene teléfono)
   Cuando el teléfono está cerrado el número no viaja en el JSON, así que aquí
   no hay nada que tapar: ocultar con CSS (display:none, color transparente,
   ::after) no protegería nada porque el dato seguiría en el código de la
   página. El cierre es del servidor; estos estilos solo lo acompañan. */

/* --- verde de marca de WhatsApp ---------------------------------------- */
/* ÚNICA excepción a la regla de "solo tokens del sistema": este verde no es
   nuestro, es la marca de WhatsApp, y por eso NO cambia con el tema. Se
   declara aquí, en la sección, y no en el :root de la sección 1, para no
   tocar los tokens del sistema.
   Contraste del texto sobre el verde (WCAG AA pide 4.5:1 en texto normal):
     · blanco  #fff sobre --wa (#25d366) -> 1.98:1  NO CUMPLE (de ahí que el
       botón no lleve texto blanco, que es lo que se pondría por costumbre)
     · --wa-ink (casi negro) sobre --wa        -> 8.5:1  cumple
     · --wa-ink sobre --wa-strong (#1da851)   -> 5.4:1  cumple (estado hover)
   --wa-ink se deriva del propio verde mezclado hacia negro, así no se añade un
   tercer color de marca; NO puede ser var(--ink) porque en tema oscuro es casi
   blanco y el contraste se desplomaría a ese 1.98:1. */
.contact-block,
.wa-btn {
  --wa: #25d366;
  --wa-strong: #1da851;
  --wa-ink: color-mix(in srgb, var(--wa) 16%, black);
}

/* --- estado con teléfono visible --------------------------------------- */
.contact-block {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  /* Defensivo a 375px: la caja del vendedor es estrecha y el número puede ser
     largo (+54 9 351 …), no debe empujar la columna. */
  min-width: 0; max-width: 100%;
}

/* Botón de ancho completo: la columna del vendedor es estrecha en cualquier
   tamaño, así que se mantiene al 100% también en escritorio. Se puede usar
   junto a .btn (comparte radio de pastilla y tipografía) o suelta: todo lo
   necesario está declarado aquí. */
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  width: 100%; min-width: 0; max-width: 100%;
  min-height: 44px;                 /* objetivo táctil cómodo */
  padding: 11px var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: var(--wa-ink);
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 700; line-height: 1.25;
  text-align: center; text-decoration: none;
  /* .btn (sección 5) trae white-space:nowrap; en la columna estrecha del
     vendedor a 375px, o con la tipografía del sistema agrandada, eso desborda:
     aquí el texto puede partir en dos líneas antes que salirse. */
  white-space: normal; overflow-wrap: break-word;
  cursor: pointer; user-select: none;
  box-shadow: var(--sh-xs);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.wa-btn:hover {
  background: var(--wa-strong);
  color: var(--wa-ink);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}
.wa-btn:active {
  background: var(--wa-strong);
  transform: translateY(1px);
  box-shadow: none;
}
/* El foco global (sección 2) usa --primary, un oliva que sobre el verde de
   WhatsApp casi no se ve. Con --ink y el offset, el anillo cae sobre el fondo
   de la página y se distingue en los dos temas. */
.wa-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Los SVG del set (UI.icon) salen sin width/height: dentro de un flex se
   estiran a todo el ancho, así que el tamaño va explícito. Sirve tanto si la
   clase está en el propio SVG como si es un contenedor. */
.wa-btn__icon,
.wa-btn > svg {
  width: 20px; height: 20px;
  flex: 0 0 auto;
}
.wa-btn__icon > svg { width: 100%; height: 100%; display: block; }

/* Número en texto bajo el botón (también enlace tel:): discreto, tabular para
   que los dígitos no bailen, y partible si no cabe. */
.contact-block__phone {
  align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%;
  padding: 2px 0;
  font-size: .9rem; font-weight: 600; line-height: 1.4;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--muted);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--transition);
}
.contact-block__phone:hover {
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px;
}
.contact-block__phone svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* --- estado cerrado (candado) ------------------------------------------ */
/* Mismo lenguaje visual que el candado del precio (.price-locked-box, sección
   29): borde discontinuo --line, fondo --surface-2, radio --r-md, texto
   --ink-soft y el icono en --muted. Se reutilizan sus VALORES, no se duplica
   su bloque: lo propio de aquí es que el botón de iniciar sesión se centra y,
   en móvil, pasa a ocupar la fila. */
.contact-locked {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem .8rem;
  padding: var(--s-3) var(--s-4);
  min-width: 0; max-width: 100%;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-soft);
}
/* Solo el candado directo: el hijo > evita pisar el icono de un botón dentro. */
.contact-locked > svg {
  width: 20px; height: 20px;
  color: var(--muted);
  flex: 0 0 auto;
}
.contact-locked__text {
  flex: 1 1 150px; min-width: 0;
  font-size: .95rem; font-weight: 600; line-height: 1.45;
  overflow-wrap: break-word;
}
/* .seller-box .btn (sección 34) fuerza align-self:flex-start; dentro del
   candado el botón debe quedar centrado con el texto. Misma especificidad y
   más abajo en el fichero, así que gana. */
.contact-locked .btn { align-self: center; flex: 0 0 auto; }
.contact-locked .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* --- móviles (375px incluido) ------------------------------------------ */
@media (max-width: 560px) {
  .wa-btn { padding: 11px var(--s-3); font-size: .92rem; }
  .contact-locked { padding: var(--s-3); }
  .contact-locked__text { flex-basis: 100%; font-size: .9rem; }
  /* A 375px el botón cabe justo: fila propia y ancho completo. */
  .contact-locked .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-btn, .contact-block__phone { transition: none; }
  .wa-btn:hover, .wa-btn:active { transform: none; }
}