/* Revalia dashboard — minimal Removiles-palette CSS, no framework.

   Cascade order (later wins). Use these named layers when adding new
   rules so the cascade can't be polluted by accident:
     - tokens     : palette + fonts (CSS custom props)
     - reset      : box-sizing, body, a, base reset
     - chrome     : topbar, status strip, footer, brand, nav, usermenu
     - components : reusable widgets (.kpi, .card, .btn, .pill, .flash,
                    .auth-card, .tier-option, table.list, .empty)
     - pages      : page-specific layout (.auth-shell, .auth-note,
                    .admin-banner, .listings-*, .profiles-*)
     - utilities  : .muted, .sr-only, .form-inline-block, focus-visible
*/
@layer tokens, reset, chrome, components, pages, utilities;
/* Existing rules below are NOT in a layer (highest cascade priority) so
   nothing in this consolidation broke. New additions should go in the
   named layers above. The "Auth split shell" block at the end is the
   first real adopter (@layer pages). */

:root {
  /* Editorial palette — same hex as landing/auth so visual language is
     unified across landing → auth → /app. Legacy aliases (--bg, --fg,
     --primary, --border) kept for backwards compat with the rest of
     this file. */
  --paper:    #FAF6EE;
  --cream:    #FCF5E2;
  --ink:      #212529;
  --slate:    #5b6370;
  /* --mute: WCAG AA contrast on --paper. Previous #8a8f97 was 3.2:1
     (fails AA for body text); #6b7280 is ~4.7:1 (passes). Audit
     2026-05-10. */
  --mute:     #6b7280;
  --line:     #E5E1D2;
  --line-2:   #EFEAD8;
  --grass:    #28a745;
  --grass-d:  #1f7c32;
  --bg:       var(--cream);
  --bg-card:  #ffffff;
  --fg:       var(--ink);
  --muted:    var(--slate);
  --primary:  var(--ink);
  --primary-hover: #111417;
  --border:   var(--line);
  --ok:       var(--grass);
  --warn:     #ffc107;
  --err:      #dc3545;
  --info:     #38bdf8;
  --display:  'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --edit:     'Fraunces', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { display: flex; flex-direction: column; min-height: 100vh; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(252,245,226,0.5), rgba(250,246,238,0) 70%),
    repeating-linear-gradient(0deg,  transparent 0 63px, rgba(229,225,210,0.35) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(229,225,210,0.35) 63px 64px);
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Top status strip — same shape as landing/auth */
.oba-status { border-bottom: 1px solid var(--line); background: rgba(252,245,226,0.6); }
.oba-status__row {
  max-width: 1216px; margin: 0 auto; padding: 7px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--display); font-size: 12px; letter-spacing: 0.02em;
  color: rgba(91,100,112,0.85);
}
.oba-status__pulse { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.oba-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--grass);
  position: relative; display: inline-block;
}
.oba-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--grass); opacity: 0.45;
  animation: oba-pulse 2.4s ease-out infinite;
}
@keyframes oba-pulse { 0% { transform: scale(0.7); opacity: 0.55; } 60%, 100% { transform: scale(1.4); opacity: 0; } }
.oba-status__sub, .oba-status__meta { display: none; color: var(--mute); }
.oba-status__meta { gap: 18px; align-items: center; }
@media (min-width: 640px) { .oba-status__sub { display: inline; } }
@media (min-width: 768px) { .oba-status__meta { display: inline-flex; } }

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250,246,238,0.85);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: 1216px; margin: 0 auto; padding: 0 24px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); flex-shrink: 0;
}
.brand__mark { display: inline-flex; align-items: center; filter: drop-shadow(0 1px 0 rgba(33,37,41,0.06)); }
.brand__name {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; white-space: nowrap; color: var(--ink);
}
.nav { display: flex; gap: 4px; flex: 1; justify-content: center; font-family: var(--display); }
.nav a {
  padding: 8px 14px; border-radius: 8px;
  font-size: 13.5px; color: var(--slate); font-weight: 500; letter-spacing: 0.005em;
  transition: color 120ms ease, background-color 120ms ease;
}
.nav a:hover { background: rgba(229,225,210,0.55); color: var(--ink); text-decoration: none; }
.nav a.active { background: var(--ink); color: var(--paper); box-shadow: 0 4px 12px -4px rgba(33,37,41,0.35); }
.usermenu { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 12px; }
.usermenu__email {
  display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 8px;
  text-decoration: none; max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  transition: background-color 120ms ease;
}
.usermenu__email:hover { background: rgba(229,225,210,0.55); text-decoration: none; }
.usermenu__email .muted { font-size: 12.5px; color: var(--slate); }
.muted { color: var(--slate); }

@media (max-width: 768px) {
  .topbar__inner { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
  .nav { order: 3; flex: 1 0 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .nav a { padding: 8px 12px; font-size: 13px; }
  .usermenu__email { max-width: 140px; font-size: 11.5px; }
}

.container {
  flex: 1 0 auto;
  max-width: 1216px;
  margin: 0 auto;
  padding: 36px 24px 48px;
  width: 100%;
}
@media (max-width: 768px) { .container { padding: 20px 16px 32px; } }

h1, h2, h3 { font-family: var(--display); letter-spacing: -0.015em; color: var(--ink); }
h1 { font-weight: 500; font-size: 28px; margin: 0 0 8px; }
h1 + .lede { color: var(--slate); margin: 0 0 28px; font-size: 15px; }
h2 { font-weight: 500; font-size: 17px; margin: 32px 0 14px; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 22px; margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(33,37,41,0.03);
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(33,37,41,0.03);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.kpi:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -16px rgba(33,37,41,0.18); }
.kpi .label {
  font-family: var(--display); color: var(--mute); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.kpi .value {
  font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.05;
  letter-spacing: -0.02em; margin-top: 8px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.kpi .meta { color: var(--slate); font-size: 12.5px; margin-top: 6px; }
.kpi .meta a { color: var(--ink); border-bottom: 1px solid rgba(33,37,41,0.2); }
.kpi .meta a:hover { border-bottom-color: var(--ink); text-decoration: none; }

table.list {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
table.list th, table.list td {
  padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; vertical-align: middle;
}
table.list th {
  background: rgba(252,245,226,0.5); color: var(--mute);
  font-family: var(--display); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
table.list tbody tr:last-child td { border-bottom: none; }
table.list tbody tr:hover { background: rgba(252,245,226,0.4); }
.empty {
  background: #fff; border: 1px dashed var(--line); border-radius: 12px;
  padding: 48px 24px; text-align: center; color: var(--slate);
}

@media (prefers-reduced-motion: reduce) {
  .oba-dot::after { animation: none; }
  .kpi { transition: none; }
}

/* App footer (chrome only — visible only when tenant logged in) */
.oba-app__footer { flex-shrink: 0; margin-top: auto; border-top: 1px solid var(--line); background: var(--paper); }
.oba-app__footer-row {
  max-width: 1216px; margin: 0 auto; padding: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--display); font-size: 12.5px; color: var(--mute);
}
.oba-app__footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--slate); text-decoration: none; font-weight: 500; }
.oba-app__footer-links { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.oba-app__footer-links a {
  color: var(--slate); text-decoration: none; padding: 6px 10px; border-radius: 6px;
  transition: color 120ms ease, background-color 120ms ease;
}
.oba-app__footer-links a:hover { color: var(--ink); background: rgba(229,225,210,0.45); text-decoration: none; }
.oba-app__footer-links span[aria-hidden] { color: rgba(138,143,151,0.5); user-select: none; }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.pill.published { background: var(--ok); }
.pill.dry_run { background: var(--warn); color: #78350f; }
.pill.error { background: var(--err); }
.pill.deleted, .pill.pending { background: var(--muted); }
.pill.publishing { background: var(--info); }
.pill.ok { background: var(--ok); }
.pill.warn { background: var(--warn); color: #78350f; }
.pill.err { background: var(--err); }

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--primary-hover); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg); }
.btn-ok { background: var(--ok); }
.btn-ok:hover { background: #1f7c32; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
.flash.info { background: #e0f2fe; border: 1px solid var(--info); color: #075985; }
.flash.success { background: rgba(40, 167, 69, 0.1); border: 1px solid var(--ok); color: #14532d; }
.flash.error { background: rgba(220, 53, 69, 0.1); border: 1px solid var(--err); color: #7f1d1d; }

.auth-card {
  /* Reusable card: works in the auth split-shell (left-aligned in its
     column) and as a standalone modal-like form (add --standalone for
     the centered margin). max-width keeps it readable inside the wide
     split-shell column instead of stretching to ~700px. */
  max-width: 520px;
  padding: 36px 40px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 36px -16px rgba(33, 37, 41, 0.12);
}
.auth-card--standalone { margin: 48px auto; }
.auth-card h1 {
  margin: 0 0 6px;
  font-size: 26px;
  letter-spacing: -0.02em;
  text-align: center;
}
.auth-card .auth-sub {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 26px;
}
.auth-card label {
  display: block;
  font-size: 13px;
  color: var(--fg);
  margin: 14px 0 5px;
  font-weight: 600;
}
.auth-card label .muted {
  font-weight: 400;
  font-size: 12px;
}
.auth-card input,
.auth-card select,
.auth-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.08);
}
.auth-card .auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.auth-card .auth-row > div { min-width: 0; }
@media (max-width: 540px) {
  .auth-card { padding: 24px 22px; }
  .auth-card .auth-row { grid-template-columns: 1fr; gap: 0; }
}
.auth-card .vertical-help {
  font-size: 11.5px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.45;
}
.auth-card .btn {
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
}
.auth-card .alt {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}
.auth-card .alt a { color: var(--primary); font-weight: 500; }
/* Tier picker — bigger card-like options, easier to scan and click. */
.auth-card .tier-picker {
  border: 0;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.auth-card .tier-picker legend {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}
.auth-card .tier-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 80ms ease, background 80ms ease;
}
.auth-card .tier-option:hover { background: #fafaf7; }
.auth-card .tier-option input[type="radio"] {
  width: auto;
  margin: 4px 0 0;
  accent-color: var(--primary);
}
.auth-card .tier-option:has(input:checked) {
  border-color: var(--primary);
  background: rgba(33, 37, 41, 0.03);
}
.auth-card .tier-option strong { font-size: 14px; }
.auth-card .tier-option .text-xs-plus { font-size: 12px; line-height: 1.5; margin-top: 2px; }
.auth-card .signup-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}
.auth-card .signup-checkbox input[type="checkbox"] {
  width: auto;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.auth-card .signup-checkbox a { color: var(--primary); }

code { background: #f3f4f6; padding: 2px 5px; border-radius: 3px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, monospace; }

/* ---------------------------------------------------------------------------
 * Accessibility utilities
 * ------------------------------------------------------------------------- */

/* Visually hidden, still announced by screen readers. Use for header
 * cells with no visible text ("Acciones") and for off-screen labels. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-to-content link — first focusable element in <body>, off-screen
 * until focused so keyboard users can jump past the status strip + nav
 * straight to the page's <main>. WCAG 2.4.1 Bypass Blocks. */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: top 0.15s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 8px;
  outline: 2px solid var(--grass);
  outline-offset: 2px;
}

/* Password reveal toggle — wired by js/password-reveal.js. The wrap
 * sits in place of the original input so existing CSS layout (form
 * grid, label alignment) is preserved; the button sits absolutely
 * inside the wrap. */
.pwd-reveal-wrap {
  position: relative;
  display: block;
}
.pwd-reveal-wrap input {
  /* Reserve right padding for the toggle button so the typed text
   * doesn't run under the icon. */
  padding-right: 42px;
}
.pwd-reveal-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--mute);
  cursor: pointer;
  padding: 0;
}
.pwd-reveal-btn:hover {
  color: var(--ink);
  background: rgba(33, 37, 41, 0.06);
}
.pwd-reveal-btn:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Focus ring — visible on keyboard navigation, hidden on mouse click.
 * 2px solid outline with offset works against any background. The
 * primary-on-card combination meets 3:1 against bg-card and bg. */
:where(.btn, .btn-ghost, a, button, input, select, textarea, summary, details, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Remove the legacy focus-blanking inside auth forms — :focus-visible
 * handles it now in a more accessible way. */
.auth-card input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

/* ---------------------------------------------------------------------------
 * Confirm modal (replaces native window.confirm).
 * Used by the confirm_form Jinja macro + dashboard/static/js/modal.js.
 * ------------------------------------------------------------------------- */

dialog.ob-confirm {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  max-width: 460px;
  width: calc(100% - 32px);
  background: var(--bg-card);
  color: var(--fg);
  box-shadow: 0 24px 48px -12px rgba(33, 37, 41, 0.25);
}
dialog.ob-confirm::backdrop {
  background: rgba(33, 37, 41, 0.45);
  backdrop-filter: blur(2px);
}
.ob-confirm-inner {
  padding: 22px 24px 18px;
}
.ob-confirm-title {
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.ob-confirm-body {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-line; /* preserve \n in body strings */
}
.ob-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ob-confirm-actions .btn { min-width: 100px; padding: 8px 16px; }
.ob-confirm-actions .btn-danger {
  background: var(--err);
  border-color: var(--err);
  color: #fff;
}
.ob-confirm-actions .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* ---------------------------------------------------------------------------
 * Utilities — minimal Tailwind-flavored set used across templates.
 *
 * Scale rationale (4-px-based, with named exceptions):
 *   1=4px   2=8px   3=12/14px   4=16px   5=18px   6=24px
 * The mb-3 = 14px rather than 12px to match the dashboard's existing rhythm
 * (cards, flash bars, etc. were already on a 14px base before cleanup).
 *
 * We only add a class when the same inline value appears 3+ times. One-off
 * inline values stay inline — extracting them adds noise without reuse.
 * ------------------------------------------------------------------------- */

/* Spacing — vertical rhythm */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 6px; }
.mt-3 { margin-top: 10px; }
.mt-4 { margin-top: 14px; }
.mt-5 { margin-top: 18px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 14px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 18px; }
.mb-6 { margin-bottom: 24px; }

/* Layout flex helpers */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 6px; }
.gap-3 { gap: 8px; }
.gap-4 { gap: 10px; }
.gap-5 { gap: 12px; }
.gap-6 { gap: 14px; }
.nowrap { white-space: nowrap; }

/* Typography sizes */
.text-xxs { font-size: 10.5px; }
.text-xs { font-size: 11px; }
.text-xs-plus { font-size: 11.5px; }
.text-sm { font-size: 12px; }
.text-sm-plus { font-size: 12.5px; }
.text-base { font-size: 13px; }
.text-base-plus { font-size: 13.5px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 15px; }
.text-xl { font-size: 16px; }

/* Typography colors — pull from CSS vars where possible.
 * Removed (0 hits in templates): .text-muted (dup of .muted), .text-secondary, .text-indigo. */
/* used in: admin_marketplace_detail.html (bulk-sync summary) */
.text-strong { color: #374151; }
/* used in: admin_marketplace_detail.html (wizard hint paragraph) */
.text-soft { color: #6b7280; }
.text-danger { color: var(--err); }
.text-danger-deep { color: #b91c1c; }
.text-danger-text { color: #7f1d1d; }
.text-success { color: #166534; }
.text-warn { color: #92400e; }
.text-right { text-align: right; }
.font-mono { font-family: ui-monospace, SFMono-Regular, monospace; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Confirm-form trigger — used by the confirm_form Jinja macro to render
 * an inline form whose only purpose is to expose its <button> as the
 * trigger. Without this the form would line-break before/after the
 * button. The class replaces inline style="display:inline; margin:0;" */
.ob-confirm-form { display: inline; margin: 0; }

/* Card variants — color-coded callouts */
.card.card-warn {
  background: #fcf5e2;
  border-color: #f59e0b;
}
.card.card-warn-light {
  background: #fef3c7;
  border-color: #f59e0b;
}
.card.card-info {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.card.card-padless { padding: 0; }

/* Compact card heading: kills the default top margin so cards with an
 * h2 as first child don't stack double-padding. Used heavily across
 * /app/* and /admin/* cards. */
.card-h2 { margin-top: 0; }

/* Inline tag pill — neutral gray, used to enumerate brands / sources */
.tag {
  display: inline-block;
  background: #f3f4f6;
  color: #374151;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  margin: 1px 3px 1px 0;
}
.tag-indigo {
  background: #e0e7ff;
  color: #3730a3;
  font-size: 10px;
  padding: 1px 6px;
}
.tag-blue {
  background: #dbeafe;
  color: #1e40af;
}

/* Button size variants — used for inline row actions */
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; }
.btn-xxs { padding: 2px 8px; font-size: 11px; }

/* Danger button (destructive actions) — paired with confirm modal */
.btn-danger {
  background: var(--err);
  color: #fff;
  border-color: var(--err);
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-danger-ghost {
  color: var(--err);
  border-color: #fecaca;
  background: transparent;
}
.btn-danger-ghost:hover { background: #fef2f2; }

/* Filter / inline form rows — used for /admin/bi filters and value-mapping
 * add-source forms. The display:inline override neutralizes the
 * confirm-form macro's inline display style without needing inline CSS. */
.filter-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.form-inline {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.form-select-sm {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12.5px;
}
.form-select-xs {
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11.5px;
}
.form-input-sm {
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
}
.form-label-sm {
  font-size: 12px;
  color: var(--muted);
}

/* Mini hint paragraph (under selects, inside details, etc.) */
.hint-xxs { margin: 6px 0 0; font-size: 10.5px; }

/* App-sessions: expired warning paragraph spacing */
.session-expired-msg { margin: 0 0 8px; }

/* App-profiles quota card — flex layout with the "multi-ERP" pill */
.quota-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Listings page — top filter bar */
.state-filter-btn { margin-right: 6px; }

/* Listings page — error cell and row actions (lifted out of inline <style>) */
.ob-err-cell { max-width: 360px; }
.ob-err-msg {
  color: #7f1d1d;
  font-size: 11.5px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 6px 8px;
  border-radius: 4px;
  word-break: break-word;
  margin-top: 6px;
}
.ob-err-hint {
  color: #1f2937;
  font-size: 11.5px;
  margin-top: 6px;
}
.ob-err-summary {
  cursor: pointer;
  color: #7f1d1d;
  font-size: 12px;
  font-weight: 600;
}
.ob-err-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ob-err-actions .btn { padding: 3px 8px; font-size: 11px; }
.ob-listing-title { font-weight: 600; font-size: 13px; color: #111827; line-height: 1.3; }
.ob-listing-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.ob-listing-meta code { background: transparent; font-size: 11px; }
.ob-listing-meta .ob-ref {
  display: inline-block;
  background: #ecfdf5;
  color: #065f46;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-right: 6px;
}
.ob-listing-meta .ob-erp-id { color: #6b7280; }
.ob-row-actions { display: flex; flex-direction: column; gap: 4px; }
.ob-row-actions .btn { padding: 3px 8px; font-size: 11px; white-space: nowrap; }

/* Bulk-action toolbar — appears above the table when ≥1 row checked. */
.ob-checkbox-col { width: 32px; text-align: center; padding-right: 4px !important; }
.ob-checkbox-col input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; vertical-align: middle;
}
.ob-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 12.5px;
}
.ob-bulk-count { font-weight: 600; color: #78350f; }
.ob-bulk-spacer { flex: 1; }
.ob-bulk-bar .btn { padding: 4px 10px; font-size: 12px; }

/* /app/value-mappings — site heading + per-attribute block */
.vm-site-h { font-size: 16px; margin-top: 22px; }
.vm-attr-title { margin: 0 0 8px; font-size: 13px; }
.vm-th-channel { width: 42%; }
.vm-cell { vertical-align: top; }
.vm-add-summary { font-size: 11.5px; color: #3730a3; }
.vm-add-input { flex: 1; min-width: 180px; }
.btn-vm-add { padding: 3px 10px; font-size: 11.5px; }

/* /app/value-mappings — mapping group / inline delete button */
.vm-channel-bar {
  padding: 10px 14px;
  background: #fcf5e2;
  font-size: 12.5px;
}
.vm-attr-block {
  border-top: 1px solid #f0f0f0;
  padding: 10px 14px;
}
.vm-tag-row { margin-bottom: 6px; }
.vm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  color: #374151;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  margin: 1px 3px 1px 0;
}
.vm-tag code { background: transparent; font-size: 11px; }
.vm-tag-delete {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #dc2626;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

/* App home — AI quota card */
.ai-quota-text { margin: 0; font-size: 13px; }

/* Onboarding (app_home.html) */
.onboard-intro {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 12px;
}
.ob-onboard { list-style: none; padding-left: 0; margin: 0; }
.ob-onboard-step {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #f3f4f6;
  align-items: flex-start;
}
.ob-onboard-step:first-child { border-top: 0; }
.ob-onboard-mark {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ob-onboard-step--done .ob-onboard-mark { background: #22c55e; color: #fff; }
.ob-onboard-step--done > div { opacity: 0.7; }
.ob-onboard-step--done strong { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Top-of-page banner (TOS acceptance, etc.) */
.ob-tos-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: #FCF5E2;
  border: 1px solid #ffc107;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 6px;
  margin: 0 0 16px 0;
  font-size: 13.5px;
}
.ob-tos-banner a { font-weight: 600; }

/* /app/settings — section paragraph rhythms */
.settings-section-intro { margin: 6px 0 14px; font-size: 13.5px; }
.settings-section-detail { font-size: 12.5px; margin: 0 0 14px; }
.settings-status { font-size: 12px; margin-top: 10px; }
.settings-line { margin: 6px 0; }
.settings-line-md { font-size: 13.5px; }
.settings-line-warn { color: #b54708; }

/* Settings BI consent toggle */
.ob-toggle-form { margin: 4px 0; }
.ob-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.ob-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ob-toggle-slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ob-toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}
.ob-toggle input:checked ~ .ob-toggle-slider { background: #28a745; }
.ob-toggle input:checked ~ .ob-toggle-slider::before { transform: translateX(18px); }
.ob-toggle-text { font-size: 13.5px; }

/* Signup helper */
.vertical-help { font-size: 11.5px; margin: 4px 0 12px; }

/* Signup tier-picker */
.tier-picker {
  margin: 14px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.tier-picker legend {
  font-size: 12px;
  color: var(--muted);
  padding: 0 4px;
}
.tier-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}
.tier-option input[type="radio"] { margin-top: 4px; }
/* Note: the inline `display:flex` in the original was lost due to the
 * `.auth-card label { display:block }` rule that wins on specificity.
 * Preserving that behavior to avoid a visual change. If we ever want
 * the flex layout we'd need a more specific selector here. */
.signup-checkbox {
  margin: 10px 0;
  cursor: pointer;
  font-size: 13px;
}
.signup-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
/* a11y helper — visible to screen readers, hidden visually */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Legal pages (terms.html, privacy.html) */
.legal {
  max-width: 740px;
  margin: 0 auto;
  padding: 16px 0 64px;
  line-height: 1.55;
}
.legal h1 { margin-bottom: 4px; }
.legal h2 { margin-top: 28px; font-size: 18px; }
.legal ul { margin: 8px 0 16px 0; padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal p { margin: 10px 0; }
.legal code {
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 3px;
}
.legal-footer { margin-top: 32px; }

/* Admin marketplace detail — category browser */
.ob-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12.5px;
}
.ob-cat-row:hover { background: #fcf5e2; }
.ob-cat-leaf { color: #6b7280; font-style: italic; }
.ob-cat-extid {
  color: #9ca3af;
  font-family: monospace;
  font-size: 11px;
  min-width: 60px;
  text-align: right;
}
.ob-cat-name { flex: 1; }
.ob-cat-path { color: #6b7280; font-size: 11px; }
.ob-search-form { margin: 12px 0; display: flex; gap: 8px; }
.ob-search-form input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 12.5px;
}
.ob-bc {
  color: #6b7280;
  font-size: 12px;
  margin-bottom: 10px;
}
.ob-bc a { color: #343a40; }

.ob-cat-list {
  padding: 0;
  max-height: 70vh;
  overflow: auto;
}
.ob-pre-cli {
  background: #f3f4f6;
  padding: 8px 10px;
  border-radius: 4px;
  margin: 6px 0;
  font-size: 11px;
}

/* Admin top-bar (admin_base.html) */
.admin-zone-body { background: linear-gradient(180deg, #fcf5e2 0%, #fce9c2 100%); }
.admin-banner {
  background: #343a40;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.admin-banner a { color: #fcf5e2; }
.admin-nav { display: flex; gap: 12px; flex: 1; }
.admin-nav a {
  color: #fcf5e2;
  opacity: 0.7;
  padding: 2px 8px;
  border-radius: 4px;
}
.admin-nav a:hover,
.admin-nav a.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

/* Admin nav button in topbar (header.usermenu) */
.btn-admin-link {
  background: #343a40;
  color: #fcf5e2;
  border-color: #343a40;
}
.btn-admin-link:hover {
  background: #2e2714;
  color: #fcf5e2;
}

/* API-key reveal page */
.card.card-warn-yellow {
  background: #fff3cd;
  border-color: #f59e0b;
}
.key-reveal-warning { margin: 0 0 10px; font-size: 13px; }
.key-reveal {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 14px;
  font-family: monospace;
  font-size: 14px;
  word-break: break-all;
  user-select: all;
}
.api-key-steps {
  line-height: 1.8;
  padding-left: 20px;
  font-size: 13px;
}

/* Generic compact bulleted list inside cards */
.list-bulleted { padding-left: 18px; margin: 0; }
.list-bulleted-sm { padding-left: 18px; margin: 6px 0 0; font-size: 11.5px; }

/* "Cómo funciona" list (admin/marketplaces) and similar info bullets */
.market-howto {
  font-size: 12.5px;
  color: #4b5563;
  padding-left: 18px;
}

/* Table flush — kills the default top margin so a table inside a
 * card (.card padding handles spacing) doesn't introduce a gap. */
.table-flush { margin: 0; }
.globalfields-hint { font-size: 11px; margin: 4px 0 10px; }
.gf-note { font-size: 11px; margin-top: 6px; }

/* /admin/bi page */
.bi-resolver-grid { gap: 18px; margin-bottom: 24px; }
.bi-resolver-hint { font-size: 11.5px; margin: 0 0 8px; }
.bi-toplist-hint { font-size: 12px; margin: 0 0 10px; }
.bi-footnote { font-size: 11px; margin-top: 18px; }
.th-events-col { width: 80px; text-align: right; }
.th-price-col { width: 240px; }

/* Cat list pill: count of fields per category leaf */
.cat-fields-tag {
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 6px;
}
.cat-result-count { font-size: 11px; margin-top: 8px; }
.uuid-code { font-size: 10.5px; color: #6b7280; }

/* Diff card details */
.diff-period { font-weight: normal; }
.diff-no-changes { margin: 0; color: #166534; font-size: 12px; }
.diff-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.diff-renames { margin: 4px 0 0; font-size: 11.5px; }
.diff-info { font-size: 11px; margin-top: 8px; }

/* Vertical filter row */
.vertical-filter { margin: 8px 0 12px; }
.vertical-filter-btn { margin-left: 4px; }
.vertical-filter .vertical-filter-btn:first-of-type { margin-left: 6px; }

/* Marketplace detail page helpers */
.back-link { margin-left: 10px; }
.form-inline-block { display: inline; margin: 0; }
.sync-hint { font-size: 11px; margin-left: 10px; }
.bulk-sync-details { margin-top: 8px; font-size: 11.5px; }
.bulk-sync-body { margin-top: 6px; color: #4b5563; line-height: 1.55; }
.field-required-star { color: #dc2626; }

/* Diff card on admin marketplace detail */
.card.card-diff {
  border-color: #f59e0b;
  background: #fef3c7;
}

/* CTA pill in the auth-page nav. Has to sit OUTSIDE @layer pages so it
   beats the unlayered `.nav a` color rule above (layered always loses
   to unlayered). Specificity 0,2,1 to overcome `.nav a` (0,1,1). */
.nav a.nav__cta {
  background: var(--ink); color: var(--paper);
  padding: 9px 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: 13px; font-weight: 500;
  transition: background-color 120ms ease;
}
.nav a.nav__cta:hover { background: var(--primary-hover); color: var(--paper); text-decoration: none; }
.nav a.nav__cta svg { transition: transform 180ms cubic-bezier(0.2, 0.6, 0.2, 1); }
.nav a.nav__cta:hover svg { transform: translateX(2px); }

@layer pages {

/* ----- Auth split shell (login / signup / forgot-password) -----------
   Reuses .auth-card + .flash + .btn from above. Adds: 2-col split with
   editorial side note, hero header (eyebrow + h1 + lede), header CTA. */

.auth-shell {
  display: grid; grid-template-columns: 1fr; gap: 48px;
  max-width: 1216px; margin: 0 auto; padding: 56px 24px 80px; width: 100%;
  align-items: start; flex: 1 0 auto;
}
@media (min-width: 960px)  { .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 64px; padding-top: 80px; } }
@media (min-width: 1200px) { .auth-shell { gap: 96px; } }

.auth-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(91,100,112,0.75); margin-bottom: 18px;
}
.auth-eyebrow::before { content: ""; width: 28px; height: 1px; background: rgba(91,100,112,0.45); }
.auth-h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(34px, 5.4vw, 56px); line-height: 1.04; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 12px;
}
.auth-h1 strong { font-weight: 600; }
.auth-h1__accent { color: var(--grass); }
.auth-lede { color: var(--slate); font-size: 16px; line-height: 1.55; margin: 0 0 36px; max-width: 46ch; }

.auth-aside { display: none; align-self: stretch; position: sticky; top: 96px; }
@media (min-width: 960px) { .auth-aside { display: block; } }

.auth-note {
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  border: 1px solid var(--line); border-radius: 16px; padding: 32px;
  position: relative; transform: rotate(-0.4deg);
  box-shadow: 0 1px 0 rgba(33,37,41,0.04), 0 30px 60px -32px rgba(33,37,41,0.22), inset 0 1px 0 rgba(255,255,255,0.6);
}
.auth-note::before {
  content: ""; position: absolute; top: -10px; left: 32px;
  width: 64px; height: 18px;
  background: linear-gradient(180deg, rgba(40,167,69,0.55) 0%, rgba(40,167,69,0.35) 100%);
  border: 1px solid rgba(31,124,50,0.4); border-radius: 1px;
  transform: rotate(-3deg); box-shadow: 0 2px 4px -1px rgba(33,37,41,0.18);
}
.auth-note__kicker {
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute); margin: 8px 0 14px;
}
.auth-note__quote {
  font-family: var(--edit); font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.32; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 20px;
}
.auth-note__quote::before { content: "\201C"; color: var(--grass); margin-right: 4px; }
.auth-note__quote::after  { content: "\201D"; color: var(--grass); margin-left: 4px; }
.auth-note__byline { font-family: var(--display); font-size: 13px; color: var(--slate); margin-bottom: 24px; }
.auth-note__byline strong { color: var(--ink); font-weight: 500; }

.auth-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 22px; border-top: 1px solid rgba(229,225,210,0.85); }
.auth-stats dt {
  font-family: var(--display); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute); display: block; margin-bottom: 4px;
}
.auth-stats dd {
  font-family: var(--display); font-weight: 600; font-size: 22px;
  color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em; display: block; margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nav__cta svg { transition: none; }
  .auth-note { transform: none; }
}


/* /app/categories — Mis categorías wizard */

/* Onboarding banner */
.ob-cat-banner { padding: 18px 22px; }
.ob-cat-banner__intro { margin: 0; font-size: 14px; }
.ob-cat-banner__steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--slate);
  line-height: 1.7;
}

/* Section headings */
.ob-cat-section-h {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate);
  margin: 24px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Table cells */
.ob-cat-cell-name { font-size: 13.5px; min-width: 140px; }
.ob-cat-cell-type { font-size: 13px; min-width: 160px; }
.ob-cat-cell-actions { width: 140px; }

.ob-cat-erp-name { color: var(--ink); }
.ob-cat-suggestion { margin-left: 6px; font-size: 13px; color: var(--slate); }
.ob-cat-confirmed-name { margin-left: 6px; font-size: 13px; color: var(--grass-d); }

/* Row spinner (htmx-indicator) */
.ob-row-spinner { font-size: 11px; color: var(--slate); }

/* Confirmed details — collapsible with summary listing first 4 */
.ob-cat-confirmed-details > summary {
  list-style: none;
  padding: 10px 0;
  color: var(--slate);
}
.ob-cat-confirmed-details > summary::-webkit-details-marker { display: none; }
.ob-cat-see-all { color: var(--ink); font-weight: 500; }

/* Concept tooltip */
.ob-cat-concept { margin-top: 32px; }
.ob-cat-concept__body { max-width: 600px; font-size: 13px; color: var(--slate); line-height: 1.55; }

/* ── Editor page: 2-col layout ─────────────────────────────────────── */
.ob-cat-edit-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .ob-cat-edit-layout { grid-template-columns: 1fr; }
}

/* Search input */
.ob-cat-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.ob-cat-search-input {
  width: 100%;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
.ob-cat-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.08);
}
.ob-search-spinner {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--slate);
}

/* Search results list */
.ob-cat-search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ob-cat-search-item { border-bottom: 1px solid var(--line-2); }
.ob-cat-search-item:last-child { border-bottom: none; }
.ob-cat-search-item--current { background: rgba(40, 167, 69, 0.06); }
.ob-cat-search-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 80ms ease;
  font-family: inherit;
}
.ob-cat-search-btn:hover { background: rgba(252, 245, 226, 0.7); }
.ob-cat-search-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: 4px;
}
.ob-cat-search-item-form { margin: 0; padding: 0; display: block; }
.ob-cat-search-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ob-cat-search-path { color: var(--slate); }
.ob-cat-search-current-mark { color: var(--grass-d); font-weight: 500; }
.ob-cat-search-empty { padding: 12px 14px; color: var(--slate); font-size: 13px; }

/* Request zone */
.ob-cat-request-zone { }
.ob-cat-divider { border: none; border-top: 1px solid var(--line); margin: 0 0 12px; }
.ob-request-spinner { font-size: 11px; color: var(--slate); }
.ob-cat-request-sent { margin: 0; }

/* Preview panel */
.ob-cat-preview-selected { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-cat-preview-title { font-size: 14px; }
.ob-cat-preview-note { padding: 10px 14px; margin-bottom: 0; }
.ob-cat-preview-actions { }

/* Mobile: cards instead of table rows in categories list */
@media (max-width: 375px) {
  .ob-cat-table thead { display: none; }
  .ob-cat-table tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
  }
  .ob-cat-table td {
    display: block;
    padding: 2px 0;
    border-bottom: none;
  }
  .ob-cat-cell-actions { width: auto; }
}

/* ── Sub-tabs (Equivalencias) ───────────────────────────────────── */
.ob-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.ob-subtab {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  color: var(--slate);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.ob-subtab:hover { color: var(--ink); }
.ob-subtab.active {
  color: var(--ink);
  border-bottom-color: var(--grass);
  font-weight: 600;
}

/* ── Master Mappings table (admin) ──────────────────────────────── */
.ob-mm-table th,
.ob-mm-table td { vertical-align: top; padding: 0.6rem 0.7rem; }
.ob-mm-master { min-width: 200px; }
.ob-mm-master code { color: var(--slate); }
.ob-mm-cell { min-width: 200px; }
.ob-mm-ext { margin-top: 0.3rem; }
.ob-mm-ext code { background: var(--soft); padding: 1px 5px; border-radius: 3px; font-size: .85em; }
.ob-mm-path { margin-top: 0.2rem; line-height: 1.3; }

/* ── Drill-down: highlight attribute rows missing concept_slug ─── */
.ob-row-gap { background: rgba(255, 200, 80, 0.10); }
.ob-row-gap td { border-left: 3px solid #f4a92b; }
.ob-row-gap td:not(:first-child) { border-left: 0; }
.ob-concept-cell code { font-size: .85em; }
.ob-concept-form { display: inline-flex; align-items: center; gap: 0.3rem; }
.ob-concept-select { font-size: .85em; padding: 2px 4px; max-width: 180px; }
.ob-concept-spinner { display: none; }
.htmx-request .ob-concept-spinner { display: inline; }
.ob-concept-status { margin-left: 0.3rem; }

/* ── Fallback "Otros" cells in master mappings ───────────────── */
.ob-mm-fallback { background: rgba(120, 100, 200, 0.06); }
.ob-mm-fallback code { color: var(--violet, #6d4ea3); }

/* ── Wire + label inline display in alias cells ─────────────── */
/* Curator always sees both the wire (technical) and the label    */
/* (human text from the channel) on the same line. wire is bold,  */
/* label is muted + smaller. When wire and label diverge strongly  */
/* the cell gets a warm highlight so the curator pauses.           */
.alias-cell { display: inline-flex; align-items: baseline; gap: 0.25rem; flex-wrap: wrap; }
.alias-cell .wire { font-weight: 600; color: #2a2a2a; }
.alias-cell .alias-label { color: var(--mute, #6b7280); font-size: 0.85em; }
.alias-cell .alias-no-schema { color: var(--mute, #6b7280); font-size: 0.82em; font-style: italic; }
/* mismatch: Levenshtein ratio < 0.4 — JS adds this class */
.alias-cell.mismatch {
  background-color: #fff3e0;
  padding: 2px 5px;
  border-radius: 3px;
  outline: 1px solid #e8a838;
}
/* warn marker added by JS when mismatch is detected */
.alias-mismatch-warn {
  display: block;
  color: #c44;
  font-size: 0.8em;
  font-weight: 500;
  margin-top: 2px;
}
/* Schema validation warning inside edit forms */
.mm-wire-ghost-warn {
  display: none;
  color: #c44;
  font-size: 0.82em;
  font-weight: 500;
  margin-top: 3px;
}
.mm-wire-ghost-warn.visible { display: block; }

/* ── Variant dedup badge + keep-primary button ───────────────── */
/* Shown when a key has >1 active alias row (noise after curation). */
.ob-mm-variants-badge {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.72em;
  color: var(--slate, #64748b);
  background: var(--soft, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  padding: 1px 7px;
  cursor: default;
}
.ob-mm-keep-primary {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.72em;
}

} /* /@layer pages */