/* Generated from backend/design/admin/tokens.json (assets/react/shared/design/buildTokens.ts): do not edit.
   Change the token there and run `npx vitest run assets/react/shared/design -u`. */
.admin,
.admin[data-theme='light'] {
  /* Colour */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F8FAFC;
  --color-surface-raised: #FFFFFF;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-field-line: #7C8BA1;
  --color-text: #0F172A;
  --color-text-2: #475569;
  --color-muted: #64748B;
  --color-faint: #94A3B8;
  --color-primary: #1260D6;
  --color-primary-hover: #0F4FB4;
  --color-primary-soft: #E8F1FE;
  --color-on-primary: #FFFFFF;
  --color-focus: var(--color-primary);
  --color-brand-mark: #1877F2;
  --color-success: #15803D;
  --color-success-soft: #DCFCE7;
  --color-warning: #B45309;
  --color-warning-soft: #FEF3C7;
  --color-danger: #B91C1C;
  --color-danger-soft: #FEE2E2;
  --color-danger-border: #FCA5A5;
  --color-action-confirm: #15803D;
  --color-action-confirm-soft: #DCFCE7;
  --color-action-danger: #B91C1C;
  --color-action-danger-soft: #FEE2E2;
  --color-action-edit: #1260D6;
  --color-action-edit-soft: #E8F1FE;
  --color-action-open: #6D28D9;
  --color-action-open-soft: #F3EEFE;
  --color-action-file: #0F766E;
  --color-action-file-soft: #E6F6F4;
  --color-action-create: #4338CA;
  --color-action-create-soft: #EEF0FD;
  --color-action-revert: #B45309;
  --color-action-revert-soft: #FEF3C7;
  --color-action-contact: #BE185D;
  --color-action-contact-soft: #FCE7F3;
  --color-on-action: #FFFFFF;
  --color-row-new: #F5F9FF;
  --color-row-attention: #FFFBEB;
  --color-row-problem: #FFF7F7;
  --color-row-muted: #F8FAFC;
  --color-hover: rgba(15, 23, 42, 0.03);
  --color-press: rgba(15, 23, 42, 0.12);
  --color-overlay: rgba(15, 23, 42, 0.5);
  --color-tooltip: #0F172A;
  --color-on-tooltip: #FFFFFF;
  --color-toast-icon: #86EFAC;
  --color-info: #1260D6;
  --color-info-soft: #E8F1FE;
  --color-accent: #6D28D9;
  --color-accent-soft: #F3EEFE;
  --color-indigo: #4338CA;
  --color-indigo-soft: #EEF0FD;
  --color-neutral: #475569;
  --color-neutral-soft: #F1F5F9;
  --color-qr-light: #FFFFFF;
  --color-qr-dark: #000000;
  --color-cover-paper: #FFFFFF;
  --color-cover-arc: #1877F2;
  --color-cover-ink: #0F172A;
  --color-cover-night: #0F172A;
  --color-cover-night-glow: rgba(24, 119, 242, 0.45);
  --color-cover-mist: #F8FAFC;
  --color-cover-mist-glow: rgba(24, 119, 242, 0.2);
  --color-cover-mist-ring: rgba(24, 119, 242, 0.3);
  --color-cover-mist-eyes: #1260D6;
  --color-edge: rgba(15, 23, 42, 0.06);
  --color-board-gray: #64748B;
  --color-board-gray-soft: #F1F5F9;
  --color-board-red: #B91C1C;
  --color-board-red-soft: #FEE2E2;
  --color-board-orange: #C2410C;
  --color-board-orange-soft: #FFEDD5;
  --color-board-amber: #B45309;
  --color-board-amber-soft: #FEF3C7;
  --color-board-green: #15803D;
  --color-board-green-soft: #DCFCE7;
  --color-board-teal: #0F766E;
  --color-board-teal-soft: #CCFBF1;
  --color-board-blue: #1D4ED8;
  --color-board-blue-soft: #DBEAFE;
  --color-board-violet: #6D28D9;
  --color-board-violet-soft: #EDE9FE;
  /* Elevation */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 24px 64px rgba(15, 23, 42, 0.24);
  /* Type */
  --font: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Space, shape, size, layers */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --control: 40px;
  --control-sm: 32px;
  --row: 52px;
  --sidebar: 248px;
  --content: 1080px;
  --modal-sm: 440px;
  --modal-md: 560px;
  --modal-lg: 760px;
  --z-admin-sticky: 10;
  --z-admin-savebar: 30;
  --z-admin-popover: 40;
  --z-admin-modal: 50;
  --z-admin-toast: 60;
  --z-admin-tooltip: 70;
  --dur-fast: 150ms;
  --dur-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.admin[data-theme='dark'] {
  /* Colour */
  --color-bg: #0B1120;
  --color-surface: #131C2E;
  --color-surface-sunken: #0F1726;
  --color-surface-raised: #1A2438;
  --color-border: #273449;
  --color-border-strong: #334155;
  --color-field-line: #64748B;
  --color-text: #E2E8F0;
  --color-text-2: #CBD5E1;
  --color-muted: #94A3B8;
  --color-faint: #64748B;
  --color-primary: #6AA8FF;
  --color-primary-hover: #8DBCFF;
  --color-primary-soft: #14264A;
  --color-on-primary: #0B1120;
  --color-focus: var(--color-primary);
  --color-brand-mark: #FFFFFF;
  --color-success: #4ADE80;
  --color-success-soft: #12291E;
  --color-warning: #FBBF24;
  --color-warning-soft: #33270C;
  --color-danger: #F87171;
  --color-danger-soft: #3A1A1D;
  --color-danger-border: #7F1D1D;
  --color-action-confirm: #4ADE80;
  --color-action-confirm-soft: #12291E;
  --color-action-danger: #F87171;
  --color-action-danger-soft: #3A1A1D;
  --color-action-edit: #6AA8FF;
  --color-action-edit-soft: #14264A;
  --color-action-open: #C4B5FD;
  --color-action-open-soft: #261D42;
  --color-action-file: #5EEAD4;
  --color-action-file-soft: #0E2B2B;
  --color-action-create: #A5B4FC;
  --color-action-create-soft: #1D2147;
  --color-action-revert: #FBBF24;
  --color-action-revert-soft: #33270C;
  --color-action-contact: #F9A8D4;
  --color-action-contact-soft: #3A1530;
  --color-on-action: #0B1120;
  --color-row-new: #142039;
  --color-row-attention: #2A2310;
  --color-row-problem: #2E1618;
  --color-row-muted: #0F1726;
  --color-hover: rgba(255, 255, 255, 0.03);
  --color-press: rgba(11, 17, 32, 0.18);
  --color-overlay: rgba(2, 6, 23, 0.72);
  --color-tooltip: #E2E8F0;
  --color-on-tooltip: #0B1120;
  --color-toast-icon: #15803D;
  --color-info: #6AA8FF;
  --color-info-soft: #14264A;
  --color-accent: #C4A5F5;
  --color-accent-soft: #271C45;
  --color-indigo: #A5B4FC;
  --color-indigo-soft: #1E2350;
  --color-neutral: #CBD5E1;
  --color-neutral-soft: #1C2639;
  --color-qr-light: #FFFFFF;
  --color-qr-dark: #000000;
  --color-cover-paper: #FFFFFF;
  --color-cover-arc: #1877F2;
  --color-cover-ink: #0F172A;
  --color-cover-night: #0F172A;
  --color-cover-night-glow: rgba(24, 119, 242, 0.45);
  --color-cover-mist: #F8FAFC;
  --color-cover-mist-glow: rgba(24, 119, 242, 0.2);
  --color-cover-mist-ring: rgba(24, 119, 242, 0.3);
  --color-cover-mist-eyes: #1260D6;
  --color-edge: rgba(0, 0, 0, 0.35);
  --color-board-gray: #94A3B8;
  --color-board-gray-soft: #1C2639;
  --color-board-red: #F87171;
  --color-board-red-soft: #3B1518;
  --color-board-orange: #FB923C;
  --color-board-orange-soft: #3B1D0C;
  --color-board-amber: #FBBF24;
  --color-board-amber-soft: #3A2A0C;
  --color-board-green: #4ADE80;
  --color-board-green-soft: #0F2E1C;
  --color-board-teal: #5EEAD4;
  --color-board-teal-soft: #0D2E2B;
  --color-board-blue: #60A5FA;
  --color-board-blue-soft: #14264A;
  --color-board-violet: #C4A5F5;
  --color-board-violet-soft: #271C45;
  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* The public help centre (/help, /ayuda: docs/pdr/prd-help-guides.md HLP-11): pages the server writes, no React, in
   Llyner Admin UI's tokens and type (shared/ui/admin/tokens.css, linked first by the `help-centre` style entry). Every
   rule sits under `.admin.hlp`, the page's <body>; class names hlp-, which no other page uses. One column on a phone. */

.admin.hlp {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}

.admin.hlp a {
  color: var(--color-primary);
}

.admin.hlp a:hover {
  color: var(--color-primary-hover);
}

.admin.hlp a:focus-visible,
.admin.hlp button:focus-visible,
.admin.hlp input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.admin.hlp h1 {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 26px;
  line-height: 1.25;
}

.admin.hlp h2 {
  margin: 0 0 var(--space-3);
  font-size: 18px;
  line-height: 1.3;
}

.admin .hlp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.admin .hlp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.admin .hlp-header-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 14px;
}

.admin .hlp-header-links > a:not(.hlp-button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.admin .hlp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* A link styled as a button keeps its on-colour label in every state: `.admin.hlp a` (the link colour) must not win. */
.admin.hlp a.hlp-button,
.admin.hlp a.hlp-button:link,
.admin.hlp a.hlp-button:visited,
.admin.hlp a.hlp-button:focus-visible {
  color: var(--color-on-primary);
}

.admin.hlp .hlp-button:hover,
.admin.hlp a.hlp-button:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.admin .hlp-main {
  flex: 1;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-12);
  box-sizing: border-box;
}

.admin .hlp-main:focus {
  outline: none;
}

.admin .hlp-hero {
  margin-bottom: var(--space-8);
}

.admin .hlp-hero h1 {
  font-size: 28px;
}

.admin .hlp-hero > p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-2);
}

.admin .hlp-search {
  margin-bottom: var(--space-6);
}

.admin .hlp-search-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 14px;
  font-weight: 600;
}

.admin .hlp-search-row {
  display: flex;
  gap: var(--space-2);
}

.admin .hlp-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-field-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}

.admin .hlp-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.admin .hlp-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

.admin .hlp-card + .hlp-card,
.admin .hlp-card + .hlp-ask {
  margin-top: var(--space-4);
}

.admin .hlp-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin .hlp-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.admin .hlp-list li:last-child {
  border-bottom: 0;
}

.admin .hlp-list a {
  display: inline-block;
  padding: var(--space-2) 0;
}

.admin .hlp-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

.admin .hlp-muted {
  color: var(--color-muted);
  font-size: 14px;
  white-space: nowrap;
}

.admin p.hlp-muted {
  margin: 0;
  white-space: normal;
}

.admin .hlp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
}

.admin .hlp-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.admin .hlp-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: start;
}

.admin .hlp-guide {
  min-width: 0;
}

.admin .hlp-body {
  margin: var(--space-4) 0 var(--space-6);
}

.admin .hlp-body ol,
.admin .hlp-body ul {
  padding-left: var(--space-6);
}

.admin .hlp-body li {
  margin-bottom: var(--space-3);
}

.admin .hlp-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-3) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.admin .hlp-body code {
  font-family: var(--font-mono);
  font-size: 14px;
}

.admin .hlp-ask {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
}

.admin .hlp-ask p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-2);
}

.admin .hlp-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-2);
  font-size: 14px;
}

.admin .hlp-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 860px) {
  .admin .hlp-guide-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .admin .hlp-topics {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin .hlp-header-links {
    gap: var(--space-3);
  }
}