/* ── TIMS pay-page theme (conocete /pay is the reference) — light default + dark ──
     Palette lifted from pay.html's tokens: ink #14315e (headings), body #55617a, muted #7b869b,
     lines #e3e7ee/#eef1f6, surface #f7f9fc, selected/interactive blue #1e62c9, TIMS red #dd0c15.
     In an ADMIN tool red must stay meaningful (danger + brand mark), so the primary interactive
     color is the pay page's BLUE; red is reserved for the wordmark accent and destructive paths.
     The old noise texture is gone on purpose — the reference page is clean flat surfaces. */
  :root {
    --admin-bg-outer:#f7f9fc; --admin-bg-panel:#ffffff; --admin-bg-card:#ffffff; --admin-bg-card-hover:#f7f9fc;
    --admin-bg-input:#ffffff; --admin-bg-hover:rgba(20,49,94,0.05); --admin-bg-active:rgba(20,49,94,0.09); --admin-bg-icon-box:#eef1f6;
    --admin-border-default:#e3e7ee; --admin-border-hover:#cfd8e6; --admin-border-light:#eef1f6; --admin-border-panel:#e3e7ee;
    --admin-font-primary:#14315e; --admin-font-secondary:#55617a; --admin-font-tertiary:#7b869b; --admin-font-light:#a5aebf; --admin-font-section:#7b869b;
    --admin-accent-green:#12945b; --admin-accent-red:#dd0c15; --admin-accent-blue:#1e62c9; --admin-accent-amber:#b9820f;
    --admin-brand:#dd0c15; --admin-brand-hover:#b90a11;
    --admin-bg-noisy:none;
    --acc-green-bg:rgba(18,148,91,0.09); --acc-blue-bg:rgba(30,98,201,0.08); --acc-amber-bg:rgba(232,163,23,0.12); --acc-red-bg:rgba(221,12,21,0.07);
  }
  html[data-theme="dark"] {
    --admin-bg-outer:#1d1d1d; --admin-bg-panel:#171717; --admin-bg-card:#1e1e1e; --admin-bg-card-hover:#222;
    --admin-bg-input:#1e1e1e; --admin-bg-hover:rgba(255,255,255,0.06); --admin-bg-active:rgba(255,255,255,0.10); --admin-bg-icon-box:#2a2a2a;
    --admin-border-default:#333; --admin-border-hover:#444; --admin-border-light:#2a2a2a; --admin-border-panel:#333;
    --admin-font-primary:#ebebeb; --admin-font-secondary:#b3b3b3; --admin-font-tertiary:#818181; --admin-font-light:#555; --admin-font-section:#666;
    --admin-accent-green:#10b981; --admin-accent-red:#e8474e; --admin-accent-blue:#4a86e0; --admin-accent-amber:#f59e0b;
    --admin-brand:#e02730; --admin-brand-hover:#e84850;
    --admin-bg-noisy:none;
    --acc-green-bg:rgba(16,185,129,0.10); --acc-blue-bg:rgba(74,134,224,0.12); --acc-amber-bg:rgba(245,158,11,0.10); --acc-red-bg:rgba(232,71,78,0.12);
  }
  * { box-sizing:border-box; }
  /* Backstop: nothing on this page should ever grow the whole body wider than the viewport — a
     wide table (now sized to its natural content via .tbl-scroll) must stay contained in ITS OWN
     scroll region, never push the sidebar/page sideways. */
  html, body { overflow-x:hidden; }
  body { margin:0; font-family:Inter,-apple-system,system-ui,sans-serif; font-size:13px; color:var(--admin-font-primary);
    background:var(--admin-bg-noisy) repeat, var(--admin-bg-outer); }
  a { color:var(--admin-accent-blue); text-decoration:none; }

  /* shell */
  .app { display:flex; height:100dvh; width:100%; position:relative; }
  .sidebar { width:220px; flex-shrink:0; display:flex; flex-direction:column; height:100%; overflow:hidden;
    font-family:Poppins,Inter,system-ui,sans-serif; user-select:none; transition:width .2s ease; }
  .app.collapsed .sidebar { width:52px; }
  .main-wrap { display:flex; flex:0 1 100%; overflow:hidden; }
  /* min-width:0 overrides the flex default (min-width:auto = content's intrinsic width) — without
     it, a wide table inside (even one meant to scroll via .tbl-scroll) forces this flex item to
     grow past the available width instead of shrinking, pushing the whole page/sidebar sideways. */
  .main-col { display:flex; flex:1 1 auto; flex-direction:column; padding-right:12px; padding-bottom:12px; width:100%; min-width:0; min-height:0; }

  /* sidebar logo */
  .logo-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 10px 10px 12px; height:52px; }
  .wordmark { font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
  .wordmark .a { color:var(--admin-font-primary); } .wordmark .b { color:var(--admin-brand); }
  .app.collapsed .wordmark, .app.collapsed .nav-label, .app.collapsed .sec-label, .app.collapsed .sb-foot-full { display:none; }
  .icon-btn { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:4px; border:none;
    background:transparent; color:var(--admin-font-tertiary); cursor:pointer; transition:background .1s; }
  .icon-btn:hover { background:var(--admin-bg-hover); }

  /* nav */
  .nav { padding:6px; display:flex; flex-direction:column; gap:2px; }
  .sec-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--admin-font-section);
    padding:12px 8px 4px; }
  .nav-item { display:flex; align-items:center; gap:8px; height:28px; padding:0 8px; border-radius:4px; font-size:13px;
    color:var(--admin-font-secondary); cursor:pointer; transition:background .1s; }
  .app.collapsed .nav-item { justify-content:center; padding:0 4px; gap:0; }
  .nav-item:hover { background:var(--admin-bg-hover); }
  .nav-item.active { background:var(--admin-accent-blue); color:#fff; font-weight:600; }
  .nav-item.active svg { color:#fff; }
  .nav-item svg { width:16px; height:16px; flex-shrink:0; color:var(--admin-font-tertiary); }
  .sb-spacer { flex:1 1 auto; }
  .sb-foot { padding:8px; border-top:1px solid var(--admin-border-light); display:flex; flex-direction:column; gap:6px; }
  .sb-foot label { font-size:10px; color:var(--admin-font-section); text-transform:uppercase; letter-spacing:.04em; }

  /* top bar */
  .topbar { min-height:40px; padding:10px 12px 10px 16px; display:flex; align-items:center; gap:8px; }
  .worker-pill { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--admin-font-tertiary); }
  .dot { width:7px; height:7px; border-radius:50%; }
  .ok { color:var(--admin-accent-green); } .ok .dot, .dot.ok { background:var(--admin-accent-green); }
  .stale { color:var(--admin-accent-red); } .dot.stale { background:var(--admin-accent-red); }
  .kbd { display:inline-flex; align-items:center; border-radius:4px; padding:2px 6px; font-size:10px; font-weight:500;
    background:var(--admin-bg-hover); border:1px solid var(--admin-border-default); color:var(--admin-font-light); }

  /* main panel */
  .panel { flex:1; background:var(--admin-bg-panel); border:1px solid var(--admin-border-panel); border-radius:14px;
    overflow-y:auto; overflow-x:hidden; box-shadow:0 1px 3px rgba(20,49,94,0.05); }
  .panel-inner { padding:24px 28px 60px; max-width:1080px; margin:0 auto; }

  /* cards + content — the reference page's cards: clear #e3e7ee border, generous radius, flat white */
  .card { background:var(--admin-bg-card); border:1px solid var(--admin-border-default); border-radius:12px; padding:20px 22px; margin-bottom:16px; }
  .card-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .card-icon { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .card-icon svg { width:16px; height:16px; }
  .ci-blue { background:var(--acc-blue-bg); color:var(--admin-accent-blue); }
  .ci-green { background:var(--acc-green-bg); color:var(--admin-accent-green); }
  .ci-amber { background:var(--acc-amber-bg); color:var(--admin-accent-amber); }
  h2 { font-size:15px; margin:0; font-weight:700; letter-spacing:-0.01em; color:var(--admin-font-primary); }
  .sub { color:var(--admin-font-tertiary); font-size:12px; margin:0 0 12px; }

  input, select, textarea, button { font-family:inherit; font-size:13px; }
  input, select, textarea { background:var(--admin-bg-input); color:var(--admin-font-primary); border:1px solid var(--admin-border-default);
    border-radius:7px; padding:7px 10px; outline:none; transition:border-color .1s, box-shadow .1s; }
  input:focus, select:focus, textarea:focus { border-color:var(--admin-accent-blue); box-shadow:0 0 0 3px var(--acc-blue-bg); }
  input::placeholder, textarea::placeholder { color:var(--admin-font-light); }
  button { cursor:pointer; background:var(--admin-accent-blue); color:#fff; border:1px solid var(--admin-accent-blue);
    border-radius:7px; padding:7px 14px; font-weight:600; transition:filter .1s; }
  button:hover { filter:brightness(1.06); }
  button.ghost { background:transparent; color:var(--admin-font-secondary); border-color:var(--admin-border-default); }
  button.ghost:hover { background:var(--admin-bg-hover); filter:none; }
  button.danger-solid { background:var(--admin-accent-red); border-color:var(--admin-accent-red); color:#fff; }
  button.ghost.danger { color:var(--admin-accent-red); border-color:var(--admin-accent-red); }
  button.ghost.danger:hover:not(:disabled) { background:var(--acc-red-bg); filter:none; }
  button.ghost.danger:disabled { color:var(--admin-font-light); border-color:var(--admin-border-default); cursor:not-allowed; opacity:.7; }
  /* Row actions flex-wrap onto a second line instead of overflowing the card (pack rows can have 6). */
  td.acts-cell { text-align:right; }
  .row-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center; }

  table { width:100%; border-collapse:collapse; font-size:13px; }
  th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--admin-border-light); }
  th { color:var(--admin-font-tertiary); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
  td { color:var(--admin-font-secondary); }
  .tbl-scroll tbody tr { transition:background .1s; }
  .tbl-scroll tbody tr:hover td { background:var(--admin-bg-card-hover); }

  .badge { padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; text-transform:capitalize; }
  .emailed { background:var(--acc-green-bg); color:var(--admin-accent-green); }
  .pending { background:var(--acc-amber-bg); color:var(--admin-accent-amber); }
  .sending { background:var(--acc-blue-bg); color:var(--admin-accent-blue); }
  .awaiting { background:var(--acc-blue-bg); color:var(--admin-accent-blue); }
  .failed  { background:var(--acc-red-bg); color:var(--admin-accent-red); }
  .skipped { background:var(--admin-bg-hover); color:var(--admin-font-tertiary); }
  .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .muted { color:var(--admin-font-tertiary); font-size:12px; }

  /* actions dropdown */
  .actions-wrap { position:relative; display:inline-block; }
  .actions-menu { position:absolute; right:0; top:100%; z-index:200; min-width:170px;
    background:var(--admin-bg-panel); border:1px solid var(--admin-border-default);
    border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.18); padding:4px 0; display:none; }
  .actions-menu.open { display:block; }
  .actions-menu button { display:block; width:100%; text-align:left; background:transparent;
    color:var(--admin-font-secondary); border:none; border-radius:0; padding:7px 14px;
    font-weight:400; }
  .actions-menu button:hover { background:var(--admin-bg-hover); filter:none; color:var(--admin-font-primary); }
  .actions-menu button.danger { color:var(--admin-accent-red); }
  .actions-menu button.danger:hover { background:var(--acc-red-bg); }

  /* Every data table: horizontal scroll instead of shrinking/wrapping columns on narrow screens.
     width:max-content lets the table grow past the wrapper to its natural content width (min-width:100%
     keeps it filling the card on wide screens); .tbl-scroll's overflow-x:auto is what actually scrolls. */
  .tbl-scroll { overflow-x:auto; margin-top:4px; }
  .tbl-scroll table { width:max-content; min-width:100%; }
  .tbl-scroll th, .tbl-scroll td { white-space:nowrap; vertical-align:middle; }
  .links-tbl td.trunc { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
  .act-btn { padding:4px 10px; font-size:12px; white-space:nowrap; }
  .actions-wrap .actions-menu { min-width:180px; }

  /* toast */
  #toast { position:fixed; bottom:24px; right:24px; z-index:2000; background:var(--admin-font-primary);
    color:var(--admin-bg-panel); padding:10px 18px; border-radius:8px; font-size:13px;
    opacity:0; pointer-events:none; transition:opacity .2s; }
  #toast.show { opacity:1; }

  /* login gate — blurs the dashboard behind it */
  body.locked .app { filter:blur(7px); pointer-events:none; user-select:none; }
  #login-overlay { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.30); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  html[data-theme="light"] #login-overlay { background:rgba(240,240,240,0.45); }
  .login-card { width:320px; background:var(--admin-bg-panel); border:1px solid var(--admin-border-panel); border-radius:16px;
    padding:26px 24px 22px; display:flex; flex-direction:column; gap:11px; box-shadow:0 24px 70px rgba(20,49,94,0.28);
    font-family:Poppins,Inter,system-ui,sans-serif; }
  .login-word { font-size:20px; font-weight:700; letter-spacing:-.01em; text-align:center; }
  .login-word .a { color:var(--admin-font-primary); } .login-word .b { color:var(--admin-brand); }
  .login-title { font-size:12px; color:var(--admin-font-tertiary); text-align:center; margin-bottom:6px; }
  .login-card input { width:100%; padding:9px 11px; }
  .login-card button { width:100%; padding:9px; font-size:14px; margin-top:2px; }
  .login-err { color:var(--admin-accent-red); font-size:12px; min-height:15px; text-align:center; }

/* ── hash-routed views: one visible at a time (hidden attr wins over any display rule) ── */
.view[hidden] { display: none !important; }

/* ── company-detail tabs ── */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--admin-border-light); margin-top:6px; }
.tab { background:transparent; color:var(--admin-font-tertiary); border:none; border-bottom:2px solid transparent;
  border-radius:0; padding:8px 14px; font-weight:500; font-size:13px; }
.tab:hover { color:var(--admin-font-primary); filter:none; background:var(--admin-bg-hover); }
.tab.active { color:var(--admin-accent-blue); border-bottom-color:var(--admin-accent-blue); }
.tab-pane[hidden] { display:none !important; }

/* ── empresas list rows are clickable ── */
#empresas_tb tr { cursor:pointer; }
#empresas_tb tr:hover td { background:var(--admin-bg-hover); }

/* ── Cmd+K palette ── */
#palette { position:fixed; inset:0; z-index:1500; display:none; align-items:flex-start; justify-content:center;
  padding-top:14vh; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); }
.pal-card { width:460px; max-width:92vw; background:var(--admin-bg-panel); border:1px solid var(--admin-border-panel);
  border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.4); overflow:hidden; }
.pal-card input { width:100%; border:none; border-bottom:1px solid var(--admin-border-light); border-radius:0;
  padding:13px 16px; font-size:14px; background:var(--admin-bg-panel); }
#pal_list { max-height:320px; overflow-y:auto; padding:6px 0; }
.pal-item { padding:8px 16px; font-size:13px; color:var(--admin-font-secondary); cursor:pointer; }
.pal-item:hover, .pal-item.sel { background:var(--admin-bg-hover); color:var(--admin-font-primary); }

/* ── Company combobox (replaces native <datalist> company pickers — see core.js companyCombobox) ── */
.co-combo-wrap { position:relative; }
.co-combo-wrap input[type="search"] { -webkit-appearance:none; appearance:none; }
.co-combo-wrap input[type="search"]::-webkit-search-cancel-button,
.co-combo-wrap input[type="search"]::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }
/* position:fixed + portaled to <body> by core.js companyCombobox() — left/top/bottom/width/
   max-height are all set inline by its reposition() function; the values below are just the
   visual styling. z-index:1100 clears #pl_modal (1000) and every other page-level modal (also
   1000) but stays under #arm_modal/#confirm_modal (1600/1700), which can still stack above it. */
.co-combo-panel { position:fixed; z-index:1100; overflow-y:auto; background:var(--admin-bg-panel);
  border:1px solid var(--admin-border-default); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.18); }
.co-combo-row { padding:7px 12px; cursor:pointer; min-height:40px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; flex-shrink:0; }
.co-combo-row:hover, .co-combo-row.sel { background:var(--admin-bg-hover); }
.co-combo-name { font-size:13px; color:var(--admin-font-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co-combo-id { font-size:11px; color:var(--admin-font-tertiary); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co-combo-empty { padding:8px 12px; font-size:12px; color:var(--admin-font-tertiary); }

/* ── Position catalog picker (paid-link modal — see pagos.js Position CATALOG picker) ── */
.pld-search-wrap { position:relative; }
.pld-search { padding:6px 10px; border:1px solid var(--admin-border-default); border-radius:6px;
  background:var(--admin-bg-input); color:var(--admin-font-primary); font-size:13px; }
/* In-flow (NOT absolute) so the results live inside the scrollable modal and can never spill past the
   viewport bottom — an absolute overlay escaped the modal scroll and overflowed when the search sat low. */
.pld-results { margin-top:4px; max-height:240px; overflow-y:auto; background:var(--admin-bg-panel);
  border:1px solid var(--admin-border-default); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.15); }
.pld-result-row { padding:7px 12px; cursor:pointer; }
.pld-result-row:hover { background:var(--admin-bg-hover); }
.pld-job { display:block; font-size:13px; color:var(--admin-font-primary); }
.pld-co { display:block; font-size:11px; color:var(--admin-font-tertiary); margin-top:1px; }
.pld-badge { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:10px; font-size:10px;
  font-weight:500; color:var(--admin-accent-green); background:var(--acc-green-bg); vertical-align:middle; }
.pld-note { padding:8px 12px; font-size:12px; color:var(--admin-font-tertiary); }
.pld-attached { align-items:center; gap:10px; max-width:360px; padding:7px 10px; border:1px solid var(--admin-border-default);
  border-radius:6px; background:var(--admin-bg-input); }
.pld-att-job { font-size:13px; font-weight:500; color:var(--admin-font-primary); }
.pld-att-co { font-size:11px; color:var(--admin-font-tertiary); }
.pld-att-unavailable { color:var(--admin-accent-red); font-weight:400; }
.pld-att-clear { margin-left:auto; padding:2px 8px; border:1px solid var(--admin-border-default); border-radius:5px;
  background:transparent; color:var(--admin-accent-red); font-size:11px; cursor:pointer; }
.pld-att-clear:hover { background:var(--acc-red-bg); }
/* Auto-puestos mode radio (cart+empresa selling a comparison): live company set vs the explicit
   picker below, plus the read-only "hoy: N puestos" snapshot shown while company mode is active.
   display:flex would beat the [hidden] UA rule at author level — pin it (same fix as #pl_pack_row). */
.pld-mode-row { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.pld-mode-row[hidden] { display:none !important; }
.pld-mode-opt { display:flex; align-items:flex-start; gap:7px; cursor:pointer; }
.pld-mode-opt input { margin:2px 0 0; flex:none; cursor:pointer; }
.pld-mode-label { display:block; font-size:13px; color:var(--admin-font-primary); }
.pld-mode-help { display:block; font-size:11px; margin-top:1px; }
.pld-snapshot { max-width:360px; padding:7px 10px; border:1px solid var(--admin-border-default);
  border-radius:6px; background:var(--admin-bg-input); }
.pld-snap-count { font-size:12px; font-weight:500; color:var(--admin-font-primary); }
.pld-snap-names { font-size:11px; color:var(--admin-font-tertiary); margin-top:3px; line-height:1.5; }
/* jvp comparison-report rows: each carries a checkbox toggle deciding whether the link SELLS it. */
.pld-jvp-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--admin-font-primary); }
.pld-jvp-toggle { cursor:pointer; margin:0; flex:none; }
.pld-jvp-label { flex:none; }
.pld-jvp-off { opacity:.5; }
.pld-jvp-off .pld-jvp-toggle { opacity:1; } /* keep the toggle itself readable when the row is off */

/* ── Payment-link creation wizard (index.html #pl_modal + js/pagos.js) ── */
.pl-stepper { display:flex; align-items:center; gap:6px; margin:10px 0 14px; }
.pl-step { display:flex; align-items:center; gap:6px; color:var(--admin-font-tertiary); font-size:12px; }
.pl-step:not(:last-child)::after { content:""; width:20px; height:1px; background:var(--admin-border-light); margin:0 4px; }
.pl-step-num { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--admin-border-default); font-size:11px; font-weight:600; flex:none; }
.pl-step.active { color:var(--admin-font-primary); }
.pl-step.active .pl-step-num { background:var(--admin-accent-blue); border-color:var(--admin-accent-blue); color:#fff; }
.pl-step.done .pl-step-num { background:var(--acc-green-bg); border-color:var(--admin-accent-green); color:var(--admin-accent-green); }
.pl-step-panel[hidden] { display:none !important; }
.pl-kind-badge { margin-left:auto; padding:2px 10px; border-radius:12px; font-size:11px; font-weight:500;
  background:var(--admin-bg-input); border:1px solid var(--admin-border-default); color:var(--admin-font-secondary); }
.pl-kind-cards { display:flex; flex-direction:column; gap:8px; }
.pl-kind-card { border:1px solid var(--admin-border-default); border-radius:8px; padding:10px 14px; cursor:pointer; }
.pl-kind-card:hover { background:var(--admin-bg-hover); }
.pl-kind-card.selected { border-color:var(--admin-accent-blue); background:var(--acc-blue-bg); }
.pl-kind-card-label { font-size:13px; font-weight:500; color:var(--admin-font-primary); }
.pl-kind-card-desc { font-size:12px; margin-top:2px; }
.pl-review-row { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--admin-border-light); font-size:13px; }
.pl-review-label { flex:0 0 180px; color:var(--admin-font-secondary); }
.pl-review-value { flex:1; color:var(--admin-font-primary); overflow-wrap:anywhere; }

/* Multi-position chips (cart buyer-choice set): the attached box wraps N chips, one per puesto,
   each with its own remove — plus a full-width note explaining the buyer will choose. */
.pld-attached { flex-wrap: wrap; }
.pld-att-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px;
  border: 1px solid var(--admin-border-default); border-radius: 6px; background: var(--admin-bg-card); }
.pld-att-chip .pld-att-clear { margin-left: 2px; }
.pld-att-note { flex-basis: 100%; font-size: 11px; color: var(--admin-font-tertiary); }

/* ── Tipo step rework: ALL FOUR kinds, grouped by audience (Para personas / Para empresas).
   The group matching the active Pagos tab renders first; the other stays fully clickable but sits
   slightly recessed until hovered/selected. Cards gain a schematic mini-preview (plt-* primitives
   below) and a URL-shape chip. The card max-width moved here from index.html inline style so the
   .pl-wide step-5 widening can win without !important. ── */
#pl_modal_card { max-width:640px; }
#pl_modal_card.pl-wide { max-width:980px; } /* step 5: summary + live buyer preview side by side */
.pl-kind-group { display:flex; flex-direction:column; gap:8px; }
.pl-kind-group + .pl-kind-group { margin-top:14px; }
.pl-kind-group-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--admin-font-section); }
.pl-kind-group-secondary .pl-kind-card:not(.selected):not(:hover) { opacity:.85; }
.pl-kind-card { display:flex; align-items:center; gap:12px; }
.pl-kind-card-text { flex:1; min-width:0; }
.pl-kind-url-chip { flex:none; align-self:flex-start; font-size:10px; padding:2px 8px; border-radius:10px;
  border:1px solid var(--admin-border-default); background:var(--admin-bg-input); color:var(--admin-font-tertiary); }

/* Mini-preview primitives (plKindThumb / plSurveyThumb in pagos.js): tiny skeleton screens of what
   the RECIPIENT sees, built from theme tokens only so they follow dark/light like everything else. */
.pl-thumb { flex:none; width:92px; height:64px; display:flex; gap:6px; padding:8px; overflow:hidden;
  border:1px solid var(--admin-border-light); border-radius:6px; background:var(--admin-bg-input); }
.plt-vert { flex-direction:column; justify-content:center; gap:5px; }
.plt-col { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.plt-side { flex:0 0 24px; border-left:1px dashed var(--admin-border-light); padding-left:6px; gap:6px; }
.plt-bar { display:block; height:5px; border-radius:2px; background:var(--admin-border-hover); }
.plt-short { width:65%; }
.plt-btn { display:block; height:9px; border-radius:3px; background:var(--admin-accent-blue); }
.plt-price { font-size:9px; font-weight:700; line-height:1; color:var(--admin-font-primary); }
.plt-checkrow { display:flex; align-items:center; gap:4px; }
.plt-checkrow .plt-bar { flex:1; }
.plt-check { flex:none; width:6px; height:6px; border:1px solid var(--admin-accent-blue); border-radius:1px;
  background:var(--acc-blue-bg); }
.plt-round { border-radius:50%; }
.plt-select { display:block; height:9px; border:1px solid var(--admin-border-hover); border-radius:2px;
  background:var(--admin-bg-card); }
.plt-stepper { display:flex; align-items:center; justify-content:center; gap:5px; font-size:8px; line-height:1;
  color:var(--admin-font-secondary); border:1px solid var(--admin-border-hover); border-radius:3px; padding:2px 0; }
.plt-stepper i { font-style:normal; color:var(--admin-accent-blue); font-weight:700; }
.plt-stepper b { font-weight:600; }
.plt-line { display:flex; align-items:center; gap:5px; }
.plt-line .plt-bar { flex:1; }
.plt-amt { flex:none; width:12px; height:5px; border-radius:2px; background:var(--admin-border-hover); }
.plt-amt.plt-off { background:var(--admin-accent-green); opacity:.55; }
.plt-total .plt-amt, .plt-total .plt-bar { background:var(--admin-font-tertiary); }

/* ── Revisar step: summary + embedded live buyer preview (renderReviewPreview in pagos.js).
   Two flexible columns that wrap on narrow viewports; the pane hides entirely when the mint
   fails, leaving the summary full-width exactly as before. ── */
.pl-review-wrap { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.pl-review-wrap .pl-review { flex:1 1 300px; min-width:0; }
.pl-preview-pane { flex:1 1 340px; min-width:280px; }
.pl-preview-title { font-size:12px; font-weight:600; color:var(--admin-font-secondary); margin-bottom:6px; }
.pl-preview-box { position:relative; height:430px; border:1px solid var(--admin-border-default); border-radius:8px;
  overflow:hidden; background:var(--admin-bg-input); }
.pl-preview-frame { display:block; width:100%; height:100%; border:0; background:#fff; }
.pl-preview-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--admin-font-tertiary); background:var(--admin-bg-input); }
.pl-preview-loading[hidden] { display:none; } /* display:flex above would beat the [hidden] UA rule */

/* ── "¿Qué enlace necesito?" guide modal rows (openLinkGuide in pagos.js) ── */
.guide-row { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--admin-border-light); }
.guide-row:last-child { border-bottom:none; }
.guide-main { flex:1; min-width:0; }
.guide-label { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:600;
  color:var(--admin-font-primary); }
.guide-tag { font-size:10px; font-weight:500; padding:1px 7px; border-radius:10px;
  border:1px solid var(--admin-border-default); background:var(--admin-bg-input); color:var(--admin-font-tertiary); }
.guide-fact { font-size:12px; color:var(--admin-font-secondary); margin-top:3px; }
.guide-fact b { font-weight:600; color:var(--admin-font-tertiary); }
.guide-go { display:inline-block; margin-top:6px; font-size:12px; }