/* GENERATED by @crystelis/design-system — do not edit by hand. */
:root {
  color-scheme: light dark;
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-control: 3px;
  --radius-card: 6px;
  --radius-pill: 999px;
  --radius-focus: 4px;
  --hairline: 1px;
  --border-width: 1px;
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
  --dur-fast: 80ms;
  --dur: 120ms;
  --dur-slow: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --focus-ring-width: 2px;
  --focus-offset: 2px;
  --row-h: 40px;
  --control-h: 36px;
  --pad-y: 0.5rem;
  --pad-x: 0.75rem;
  --elevation-menu: 0 2px 8px rgba(28, 26, 22, 0.14);
  --elevation-modal: 0 12px 32px rgba(28, 26, 22, 0.22);
  --elevation-toast: 0 4px 14px rgba(28, 26, 22, 0.18);
  --fg-primary: #1C1A16;
  --fg-secondary: #45413A;
  --fg-tertiary: #5E5952;
  --fg-muted: #6C665C;
  --surface-0: #FBFAF6;
  --surface-1: #F4F2EC;
  --surface-2: #ECE9E1;
  --surface-3: #E3DFD5;
  --border-hairline: #E7E3DA;
  --border: #D8D3C8;
  --border-emphasis: #B7B0A2;
  --border-focus: #0B6E50;
  --control-bg: #F4F2EC;
  --control-border: #837B70;
  --control-fg: #1C1A16;
  --brand: #0B6E50;
  --brand-hover: #0A6047;
  --brand-active: #08543E;
  --brand-fg: #FFFFFF;
  --link: #0A6E50;
  --verified: #B4862E;
  --verified-fg: #6E5210;
  --verified-bg: #F6ECCF;
  --money-default: #1C1A16;
  --money-negative: #97281E;
  --money-credit: #1F5793;
  --status-draft-fg: #524D45;
  --status-draft-bg: #ECEAE4;
  --status-draft-border: #D8D3C8;
  --status-submitted-fg: #1F5793;
  --status-submitted-bg: #E1ECF7;
  --status-submitted-border: #BBD3EC;
  --status-accepted-fg: #6E5210;
  --status-accepted-bg: #F6ECCF;
  --status-accepted-border: #E4D2A0;
  --status-rejected-fg: #97281E;
  --status-rejected-bg: #F7E4E1;
  --status-rejected-border: #EEC5BE;
  --status-errored-fg: #8A3D08;
  --status-errored-bg: #F7E9DC;
  --status-errored-border: #EAD0B4;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fg-primary: #F3EFE7;
  --fg-secondary: #C9C3B7;
  --fg-tertiary: #A39D90;
  --fg-muted: #989283;
  --surface-0: #191712;
  --surface-1: #211E18;
  --surface-2: #2A261E;
  --surface-3: #332E25;
  --border-hairline: #2E2A22;
  --border: #3A352B;
  --border-emphasis: #4E4839;
  --border-focus: #3CBF93;
  --control-bg: #141210;
  --control-border: #817A66;
  --control-fg: #F3EFE7;
  --brand: #2AB588;
  --brand-hover: #38C295;
  --brand-active: #22A079;
  --brand-fg: #06231A;
  --link: #3CBF93;
  --verified: #D9AE52;
  --verified-fg: #E7C878;
  --verified-bg: #2E2612;
  --money-default: #F3EFE7;
  --money-negative: #F0A79C;
  --money-credit: #7FB2E6;
  --status-draft-fg: #B7B1A4;
  --status-draft-bg: #2A261E;
  --status-draft-border: #3A352B;
  --status-submitted-fg: #7FB2E6;
  --status-submitted-bg: #16283C;
  --status-submitted-border: #274863;
  --status-accepted-fg: #E7C878;
  --status-accepted-bg: #2E2612;
  --status-accepted-border: #4A3D1C;
  --status-rejected-fg: #F0A79C;
  --status-rejected-bg: #3A211C;
  --status-rejected-border: #5A342C;
  --status-errored-fg: #E8B583;
  --status-errored-bg: #3A2A18;
  --status-errored-border: #5A4224;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fg-primary: #F3EFE7;
    --fg-secondary: #C9C3B7;
    --fg-tertiary: #A39D90;
    --fg-muted: #989283;
    --surface-0: #191712;
    --surface-1: #211E18;
    --surface-2: #2A261E;
    --surface-3: #332E25;
    --border-hairline: #2E2A22;
    --border: #3A352B;
    --border-emphasis: #4E4839;
    --border-focus: #3CBF93;
    --control-bg: #141210;
    --control-border: #817A66;
    --control-fg: #F3EFE7;
    --brand: #2AB588;
    --brand-hover: #38C295;
    --brand-active: #22A079;
    --brand-fg: #06231A;
    --link: #3CBF93;
    --verified: #D9AE52;
    --verified-fg: #E7C878;
    --verified-bg: #2E2612;
    --money-default: #F3EFE7;
    --money-negative: #F0A79C;
    --money-credit: #7FB2E6;
    --status-draft-fg: #B7B1A4;
    --status-draft-bg: #2A261E;
    --status-draft-border: #3A352B;
    --status-submitted-fg: #7FB2E6;
    --status-submitted-bg: #16283C;
    --status-submitted-border: #274863;
    --status-accepted-fg: #E7C878;
    --status-accepted-bg: #2E2612;
    --status-accepted-border: #4A3D1C;
    --status-rejected-fg: #F0A79C;
    --status-rejected-bg: #3A211C;
    --status-rejected-border: #5A342C;
    --status-errored-fg: #E8B583;
    --status-errored-bg: #3A2A18;
    --status-errored-border: #5A4224;
  }
}

[data-density="compact"] {
  --row-h: 32px;
  --control-h: 30px;
  --pad-y: 0.375rem;
  --pad-x: 0.625rem;
}


/* --- fonts.css --- */
/* IBM Plex Sans/Mono — self-hosted (no CDN). Files copied to ./assets/fonts by the build. */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* --- reset.css --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-inline-size: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- base.css --- */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-primary);
  background: var(--surface-0);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1; /* tabular + slashed zero (fiscal IDs) */
  accent-color: var(--brand);
}
body { font-size: var(--text-base); }

h1 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); text-wrap: balance; }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
small { font-size: var(--text-sm); color: var(--fg-tertiary); }

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration: underline; }

/* Global visible focus — never removed without replacement. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-focus);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
hr { border: none; border-block-start: var(--hairline) solid var(--border-hairline); }

/* Skip link — visible on focus. */
.skip-link {
  position: absolute; inset-inline-start: var(--space-2); inset-block-start: var(--space-2);
  padding: var(--space-2) var(--space-3); background: var(--surface-1);
  border: var(--border-width) solid var(--border-emphasis); border-radius: var(--radius-control);
  transform: translateY(-150%); transition: transform var(--dur) var(--ease); z-index: var(--z-toast);
}
.skip-link:focus { transform: translateY(0); }


/* --- utilities.css --- */
.cr-tabular { font-variant-numeric: tabular-nums; }
.cr-mono { font-family: var(--font-mono); }
.cr-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.cr-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cr-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.cr-row { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.cr-icon { inline-size: 1em; block-size: 1em; flex: none; }
.cr-icon-lg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }


/* --- components/button.css --- */
/* Contract:
   <button class="cr-btn cr-btn--primary" type="button">Guardar</button>
   <button class="cr-btn cr-btn--secondary"><svg class="cr-icon" aria-hidden="true"><use href="#i-plus"/></svg> Nueva factura</button>
   <button class="cr-btn cr-btn--danger">Eliminar</button>
   <button class="cr-btn cr-btn--primary" data-loading aria-busy="true">…</button>
   Permission-restricted (present but not permitted):
   <button class="cr-btn cr-btn--primary" data-restricted disabled aria-describedby="perm-hint">Transmitir</button>
   Icon-only: <button class="cr-btn cr-btn--icon" aria-label="Filtrar"><svg class="cr-icon-lg" aria-hidden="true"><use href="#i-filter"/></svg></button>
*/
.cr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  block-size: var(--control-h); padding-inline: var(--pad-x);
  font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1;
  border-radius: var(--radius-control); border: var(--border-width) solid transparent;
  white-space: nowrap; user-select: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.cr-btn--primary { background: var(--brand); color: var(--brand-fg); }
.cr-btn--primary:hover { background: var(--brand-hover); }
.cr-btn--primary:active { background: var(--brand-active); }
.cr-btn--secondary { background: var(--surface-1); color: var(--fg-primary); border-color: var(--border-emphasis); }
.cr-btn--secondary:hover { background: var(--surface-2); }
.cr-btn--ghost { background: transparent; color: var(--fg-secondary); }
.cr-btn--ghost:hover { background: var(--surface-1); color: var(--fg-primary); }
.cr-btn--danger { background: var(--surface-1); color: var(--status-rejected-fg); border-color: var(--status-rejected-border); }
.cr-btn--danger:hover { background: var(--status-rejected-bg); }
.cr-btn--icon { inline-size: var(--control-h); padding-inline: 0; color: var(--fg-secondary); }
.cr-btn--icon:hover { background: var(--surface-1); color: var(--fg-primary); }

.cr-btn:disabled, .cr-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
/* Permission-restricted: visually distinct from a plain disabled control (a lock, dashed edge). */
.cr-btn[data-restricted] { opacity: 1; cursor: not-allowed; color: var(--fg-muted);
  background: var(--surface-1); border-style: dashed; border-color: var(--border-emphasis); }
.cr-btn[data-restricted]::before {
  content: ""; inline-size: 1em; block-size: 1em; flex: none;
  background: currentColor; -webkit-mask: var(--cr-lock) center/contain no-repeat; mask: var(--cr-lock) center/contain no-repeat;
}
/* Mask-only SVG: painted by `background: currentColor`, so the glyph carries no baked
   color (stroke='currentColor' resolves opaque inside the isolated mask document). */
:root { --cr-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }

/* Loading: spinner + keeps its box; enabled until the request starts (host toggles data-loading). */
.cr-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
.cr-btn[data-loading]::after {
  content: ""; position: absolute; inline-size: 1em; block-size: 1em;
  border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%;
  color: var(--brand-fg); animation: cr-spin 0.6s linear infinite;
}
.cr-btn--secondary[data-loading]::after, .cr-btn--ghost[data-loading]::after { color: var(--fg-secondary); }
@keyframes cr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cr-btn[data-loading]::after { animation: none; border-block-start-color: currentColor; opacity: 0.6; } }


/* --- components/link.css --- */
/* Contract: <a class="cr-link" href="…">Ver factura</a>  ·  external adds an icon + rel */
.cr-link { color: var(--link); text-decoration: none; text-underline-offset: 0.15em; border-radius: 2px; }
.cr-link:hover { text-decoration: underline; }
.cr-link--external::after {
  content: ""; display: inline-block; inline-size: 0.85em; block-size: 0.85em; margin-inline-start: 0.2em;
  background: currentColor; -webkit-mask: var(--cr-ext) center/contain no-repeat; mask: var(--cr-ext) center/contain no-repeat;
}
/* Mask-only SVG: painted by `background: currentColor`; the glyph carries no baked color. */
:root { --cr-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); }


/* --- components/field.css --- */
/* Contract:
   <div class="cr-field" data-invalid>
     <label class="cr-field__label" for="nit">NIT <span class="cr-field__req" aria-hidden="true">*</span></label>
     <input id="nit" class="cr-input" aria-describedby="nit-hint nit-err" aria-invalid="true" required>
     <p id="nit-hint" class="cr-field__hint">Sin dígito de verificación.</p>
     <p id="nit-err" class="cr-field__error" role="alert">Ingrese un NIT válido.</p>
   </div>
*/
.cr-field { display: flex; flex-direction: column; gap: var(--space-1); }
.cr-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-secondary); }
.cr-field__req { color: var(--status-rejected-fg); margin-inline-start: 2px; }
.cr-field__hint { font-size: var(--text-sm); color: var(--fg-tertiary); }
.cr-field__error { font-size: var(--text-sm); color: var(--status-rejected-fg); display: none; }
.cr-field[data-invalid] .cr-field__error { display: block; }
.cr-field[data-invalid] .cr-input, .cr-field[data-invalid] .cr-select__trigger { border-color: var(--status-rejected-fg); }


/* --- components/input.css --- */
/* Contract: <input class="cr-input" type="text" name="razon_social" autocomplete="organization" placeholder="Razón social…">
   Search: <input class="cr-input" type="search" inputmode="search" spellcheck="false" placeholder="Buscar facturas…">
   Textarea: <textarea class="cr-input" rows="3"></textarea> */
.cr-input {
  inline-size: 100%; min-inline-size: 0; block-size: var(--control-h);
  padding-inline: var(--pad-x); padding-block: 0;
  background: var(--control-bg); color: var(--control-fg);
  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-control);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea.cr-input { block-size: auto; padding-block: var(--pad-y); resize: vertical; line-height: var(--leading-normal); }
.cr-input::placeholder { color: var(--fg-muted); }
.cr-input:hover { border-color: var(--fg-tertiary); }
.cr-input:focus-visible { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--brand) 30%, transparent); }
.cr-input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--surface-2); }
.cr-input[aria-invalid="true"] { border-color: var(--status-rejected-fg); }


/* --- components/choice.css --- */
/* Contract:
   <label class="cr-choice"><input type="checkbox" class="cr-choice__control"> Acepto</label>
   <label class="cr-choice"><input type="radio" name="env" class="cr-choice__control"> Producción</label>
   <label class="cr-switch"><input type="checkbox" class="cr-switch__control"><span class="cr-switch__track"></span> Modo compacto</label>
*/
.cr-choice { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 24px; cursor: pointer; }
.cr-choice__control { inline-size: 18px; block-size: 18px; accent-color: var(--brand); flex: none; }
.cr-switch { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 24px; cursor: pointer; }
.cr-switch__control { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.cr-switch__track { inline-size: 34px; block-size: 20px; border-radius: var(--radius-pill);
  background: var(--surface-3); border: var(--border-width) solid var(--border-emphasis); position: relative;
  transition: background-color var(--dur) var(--ease); flex: none; }
.cr-switch__track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--surface-0);
  transition: transform var(--dur) var(--ease); }
.cr-switch__control:checked + .cr-switch__track { background: var(--brand); border-color: var(--brand); }
.cr-switch__control:checked + .cr-switch__track::after { transform: translateX(14px); }
.cr-switch__control:focus-visible + .cr-switch__track {
  outline: var(--focus-ring-width) solid var(--border-focus); outline-offset: var(--focus-offset); }


/* --- components/select.css --- */
/* Contract — baseline (works with no JS): a native <select> wrapped so its chevron can be a
   masked, token-painted affordance (a <select> can't host a ::after pseudo-element, so the
   wrapper carries it):
     <div class="cr-select"><select class="cr-select-native"><option>…</option></select></div>
   Enhanced (Alpine replaces the native when JS present): a <button class="cr-select__trigger"
   aria-haspopup="listbox">…</button> plus a token-styled listbox. The two share the visual
   language below. Only the trigger is themed today; the Alpine listbox lands later. */
.cr-select-native, .cr-select__trigger {
  inline-size: 100%; min-inline-size: 0; block-size: var(--control-h);
  padding-inline: var(--pad-x); text-align: start;
  background: var(--control-bg); color: var(--control-fg);
  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-control);
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.cr-select { position: relative; display: block; inline-size: 100%; }
.cr-select-native { appearance: none; padding-inline-end: calc(var(--pad-x) * 2 + 1em); }
/* Chevron: a mask-only SVG (no baked color) painted with a semantic token, so it follows
   data-theme and any tenant theme — same mask + token technique as --cr-lock / --cr-ext. */
.cr-select::after {
  content: ""; position: absolute; inset-inline-end: var(--pad-x); inset-block-start: 50%;
  transform: translateY(-50%); inline-size: 1em; block-size: 1em; pointer-events: none;
  background: var(--fg-tertiary);
  -webkit-mask: var(--cr-chevron) center / contain no-repeat; mask: var(--cr-chevron) center / contain no-repeat;
}
.cr-select__trigger:focus-visible, .cr-select-native:focus-visible { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--brand) 30%, transparent); }
:root { --cr-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }


/* --- components/card.css --- */
/* Contract:
   <section class="cr-card">
     <header class="cr-card__header"><h3>Resolución de numeración</h3><div class="cr-card__actions">…</div></header>
     <div class="cr-card__body">…</div>
     <footer class="cr-card__footer">…</footer>
   </section> */
.cr-card { background: var(--surface-1); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.cr-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-block-end: var(--hairline) solid var(--border-hairline); }
.cr-card__body { padding: var(--space-4); }
.cr-card__footer { padding: var(--space-3) var(--space-4); border-block-start: var(--hairline) solid var(--border-hairline);
  display: flex; gap: var(--space-2); justify-content: flex-end; }


/* --- components/tag.css --- */
/* Contract: <span class="cr-tag">IVA 19%</span>  ·  removable: <span class="cr-tag">Aceptada <button class="cr-tag__x" aria-label="Quitar filtro"><svg class="cr-icon" aria-hidden="true"><use href="#i-x"/></svg></button></span> */
.cr-tag { display: inline-flex; align-items: center; gap: var(--space-1);
  padding-inline: var(--space-2); padding-block: 2px; font-size: var(--text-sm);
  background: var(--surface-2); color: var(--fg-secondary);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-pill); }
.cr-tag__x { display: inline-flex; color: var(--fg-tertiary); border-radius: var(--radius-pill); }
.cr-tag__x:hover { color: var(--fg-primary); }


/* --- components/badge.css --- */
/* Contract — icon + text label ALWAYS (color never alone):
   <span class="cr-badge cr-badge--draft"><svg class="cr-icon" aria-hidden="true"><use href="#i-file-text"/></svg> Borrador</span>
   <span class="cr-badge cr-badge--submitted"><svg class="cr-icon" aria-hidden="true"><use href="#i-clock"/></svg> Enviada</span>
   <span class="cr-badge cr-badge--accepted"><svg class="cr-icon" aria-hidden="true"><use href="#i-sello"/></svg> Aceptada</span>
   <span class="cr-badge cr-badge--rejected"><svg class="cr-icon" aria-hidden="true"><use href="#i-x-circle"/></svg> Rechazada</span>
   <span class="cr-badge cr-badge--errored"><svg class="cr-icon" aria-hidden="true"><use href="#i-alert-triangle"/></svg> Con error</span>
   The accepted badge is the gold sello. Errored pairs with a retry affordance in context.
   The role variant is neutral (membership/access, not a fiscal state — never a status colour):
   <span class="cr-badge cr-badge--role"><svg class="cr-icon" aria-hidden="true"><use href="#i-user"/></svg> Propietario</span> */
.cr-badge { display: inline-flex; align-items: center; gap: var(--space-1);
  padding-inline: var(--space-2); padding-block: 2px; font-size: var(--text-sm); font-weight: var(--weight-medium);
  border-radius: var(--radius-pill); border: var(--border-width) solid transparent; white-space: nowrap; }
.cr-badge .cr-icon { inline-size: 0.9em; block-size: 0.9em; }
.cr-badge--draft { color: var(--status-draft-fg); background: var(--status-draft-bg); border-color: var(--status-draft-border); }
.cr-badge--submitted { color: var(--status-submitted-fg); background: var(--status-submitted-bg); border-color: var(--status-submitted-border); }
.cr-badge--accepted { color: var(--status-accepted-fg); background: var(--status-accepted-bg); border-color: var(--status-accepted-border); }
.cr-badge--rejected { color: var(--status-rejected-fg); background: var(--status-rejected-bg); border-color: var(--status-rejected-border); }
.cr-badge--errored { color: var(--status-errored-fg); background: var(--status-errored-bg); border-color: var(--status-errored-border); }
/* Roles are membership/access, not fiscal states — a single neutral treatment,
   distinguished by label + icon rather than colour (matches the neutral cr-tag). */
.cr-badge--role { color: var(--fg-secondary); background: var(--surface-2); border-color: var(--border); }

/* Standalone verified sello (beside a validated CUFE). */
.cr-sello { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--verified-fg);
  background: var(--verified-bg); border: var(--border-width) solid var(--status-accepted-border);
  border-radius: var(--radius-pill); padding-inline: var(--space-2); padding-block: 2px; font-size: var(--text-sm); }
.cr-sello .cr-icon { color: var(--verified); }


/* --- components/money.css --- */
/* Contract (numeric string formatted server-side via Intl es-CO):
   <span class="cr-money"><span class="cr-money__cur">COP</span> <span class="cr-money__val">1.250.000</span></span>
   Negative: add cr-money--negative; the value string itself carries the sign/parentheses, e.g. "(1.234,50)". */
.cr-money { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--money-default); }
.cr-money__cur { color: var(--fg-tertiary); font-size: 0.9em; margin-inline-end: 0.25em; }
.cr-money__val { font-weight: var(--weight-medium); }
.cr-money--negative { color: var(--money-negative); }
.cr-money--credit { color: var(--money-credit); }
/* In tables, money cells align to the end and share a mono-like rhythm. */
.cr-td--money { text-align: end; font-variant-numeric: tabular-nums; }


/* --- components/identifier.css --- */
/* Contract:
   <span class="cr-id" translate="no">
     <span class="cr-id__val cr-truncate">a1b2c3…very-long-CUFE</span>
     <button class="cr-id__copy" aria-label="Copiar CUFE"><svg class="cr-icon" aria-hidden="true"><use href="#i-copy"/></svg></button>
   </span> */
.cr-id { display: inline-flex; align-items: center; gap: var(--space-1); max-inline-size: 100%;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-secondary); }
.cr-id__val { min-inline-size: 0; }
.cr-id__copy { display: inline-flex; color: var(--fg-tertiary); flex: none; border-radius: 2px; }
.cr-id__copy:hover { color: var(--brand); }


/* --- components/table.css --- */
/* Contract:
   <div class="cr-table-wrap">
     <table class="cr-table">
       <caption class="cr-visually-hidden">Registro de facturas</caption>
       <thead><tr>
         <th scope="col" class="cr-th--select"><input type="checkbox" aria-label="Seleccionar todo"></th>
         <th scope="col"><button class="cr-th-sort" aria-label="Ordenar por número">Número <svg class="cr-icon" aria-hidden="true"><use href="#i-arrow-up-down"/></svg></button></th>
         <th scope="col" aria-sort="ascending">Fecha</th>
         <th scope="col" class="cr-th--num">Total</th>
         <th scope="col">Estado</th>
       </tr></thead>
       <tbody>
         <tr><td>…</td>…</tr>
         <tr aria-selected="true">…</tr>
       </tbody>
     </table>
   </div>
   Empty:   <tbody><tr><td colspan="5"><div class="cr-table-state">… (see empty-state)</div></td></tr></tbody>
   Loading: add class cr-table-wrap--loading (skeleton rows) ; Error: cr-table-state with retry. */
.cr-table-wrap { inline-size: 100%; overflow-x: auto; border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.cr-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-base); }
.cr-table caption { text-align: start; }
.cr-table thead th { position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  background: var(--surface-2); color: var(--fg-secondary); font-weight: var(--weight-semibold);
  text-align: start; padding: var(--space-2) var(--space-3); white-space: nowrap;
  border-block-end: var(--border-width) solid var(--border-emphasis); }
.cr-table tbody td { padding-inline: var(--space-3); block-size: var(--row-h);
  border-block-start: var(--hairline) solid var(--border-hairline); color: var(--fg-primary); vertical-align: middle; }
.cr-table tbody tr:hover td { background: var(--surface-1); }
.cr-table tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--brand) 8%, var(--surface-0)); }
.cr-table tbody tr:focus-within td { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 40%, transparent); }
.cr-th--num, .cr-td--num { text-align: end; font-variant-numeric: tabular-nums; }
.cr-th--select, .cr-td--select { inline-size: 1%; white-space: nowrap; }
.cr-th-sort { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; font: inherit; font-weight: inherit; }
.cr-th-sort .cr-icon { color: var(--fg-tertiary); }
th[aria-sort] .cr-th-sort .cr-icon, th[aria-sort] { color: var(--fg-primary); }

/* States shown in a full-width row. */
.cr-table-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-12) var(--space-4); color: var(--fg-tertiary); text-align: center; }
.cr-table-wrap--loading tbody td { color: transparent; }
.cr-table-wrap--loading tbody td > * { visibility: hidden; }
.cr-table-wrap--loading tbody td::after { content: ""; display: block; block-size: 0.8em; border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%;
  animation: cr-shimmer 1.2s ease-in-out infinite; }
@keyframes cr-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cr-table-wrap--loading tbody td::after { animation: none; } }

@media (max-width: 640px) { /* engraved rules stay legible when horizontally scrolled */ .cr-table { min-inline-size: 40rem; } }


/* --- components/timeline.css --- */
/* Contract (ordered list; aria-current marks the active step; data-state colors the terminal node):
   <ol class="cr-timeline" role="list" data-state="accepted">
     <li class="cr-timeline__step" data-done><span class="cr-timeline__node"></span>Borrador</li>
     <li class="cr-timeline__step" data-done><span class="cr-timeline__node"></span>Enviada a DIAN</li>
     <li class="cr-timeline__step" aria-current="step"><span class="cr-timeline__node"></span>Aceptada</li>
   </ol>
   role="list" is required: stripping list-style below drops list semantics in Safari/VO. */
.cr-timeline { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; list-style: none;
  font-size: var(--text-sm); color: var(--fg-tertiary); }
.cr-timeline__step { display: inline-flex; align-items: center; gap: var(--space-2); position: relative; }
.cr-timeline__step:not(:last-child)::after { content: ""; inline-size: var(--space-4); block-size: var(--hairline);
  background: var(--border-emphasis); margin-inline-start: var(--space-2); }
.cr-timeline__node { inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--surface-3); border: 2px solid var(--border-emphasis); flex: none; }
.cr-timeline__step[data-done] { color: var(--fg-secondary); }
.cr-timeline__step[data-done] .cr-timeline__node { background: var(--fg-tertiary); border-color: var(--fg-tertiary); }
.cr-timeline__step[aria-current="step"] { color: var(--fg-primary); font-weight: var(--weight-semibold); }
/* Terminal colouring by outcome. */
.cr-timeline[data-state="accepted"] [aria-current] .cr-timeline__node { background: var(--verified); border-color: var(--verified); }
.cr-timeline[data-state="rejected"] [aria-current] .cr-timeline__node { background: var(--status-rejected-fg); border-color: var(--status-rejected-fg); }
.cr-timeline[data-state="errored"] [aria-current] .cr-timeline__node { background: var(--status-errored-fg); border-color: var(--status-errored-fg); }
.cr-timeline[data-state="submitted"] [aria-current] .cr-timeline__node { background: var(--status-submitted-fg); border-color: var(--status-submitted-fg); }


/* --- components/tabs.css --- */
/* Contract: <div class="cr-tabs" role="tablist">
     <button class="cr-tab" role="tab" aria-selected="true">Detalle</button>
     <button class="cr-tab" role="tab" aria-selected="false">XML</button></div> */
.cr-tabs { display: flex; gap: var(--space-1); border-block-end: var(--border-width) solid var(--border); }
.cr-tab { padding: var(--space-2) var(--space-3); font-weight: var(--weight-medium); color: var(--fg-tertiary);
  border-block-end: 2px solid transparent; margin-block-end: -1px; }
.cr-tab:hover { color: var(--fg-primary); }
.cr-tab[aria-selected="true"] { color: var(--fg-primary); border-block-end-color: var(--brand); }


/* --- components/breadcrumb.css --- */
/* Contract: <nav class="cr-breadcrumb" aria-label="Ruta"><ol role="list">
     <li><a class="cr-link" href="/facturas">Facturas</a></li>
     <li aria-current="page">FE-0042</li></ol></nav>
   role="list" is required: stripping list-style below drops list semantics in Safari/VO. */
.cr-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; padding: 0;
  font-size: var(--text-sm); color: var(--fg-tertiary); }
.cr-breadcrumb li:not(:last-child)::after { content: "/"; margin-inline-start: var(--space-2); color: var(--border-emphasis); }
.cr-breadcrumb [aria-current="page"] { color: var(--fg-secondary); }


/* --- components/menu.css --- */
/* Contract (works with no JS): <details class="cr-menu">
     <summary class="cr-btn cr-btn--secondary">Acciones <svg class="cr-icon" aria-hidden="true"><use href="#i-chevron-down"/></svg></summary>
     <div class="cr-menu__list" role="menu">
       <button class="cr-menu__item" role="menuitem">Ver XML</button>
       <button class="cr-menu__item cr-menu__item--danger" role="menuitem">Anular</button>
     </div></details> */
.cr-menu { position: relative; display: inline-block; }
.cr-menu > summary { list-style: none; }
.cr-menu > summary::-webkit-details-marker { display: none; }
.cr-menu__list { position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-end: 0; z-index: var(--z-dropdown);
  min-inline-size: 12rem; padding: var(--space-1); background: var(--surface-1);
  border: var(--border-width) solid var(--border-emphasis); border-radius: var(--radius-control); box-shadow: var(--elevation-menu); }
.cr-menu__item { display: flex; inline-size: 100%; align-items: center; gap: var(--space-2); text-align: start;
  padding: var(--space-2) var(--space-2); border-radius: var(--radius-control); color: var(--fg-primary); font-size: var(--text-base); }
.cr-menu__item:hover { background: var(--surface-2); }
.cr-menu__item--danger { color: var(--status-rejected-fg); }
.cr-menu__item:disabled, .cr-menu__item[data-restricted] { color: var(--fg-muted); cursor: not-allowed; }


/* --- components/tooltip.css --- */
/* Contract: <span class="cr-tooltip"><button aria-describedby="tt1">…</button>
     <span role="tooltip" id="tt1" class="cr-tooltip__bubble">Requiere permiso einvoice.transmit</span></span> */
.cr-tooltip { position: relative; display: inline-flex; }
.cr-tooltip__bubble { position: absolute; inset-block-end: calc(100% + var(--space-1)); inset-inline-start: 50%;
  transform: translateX(-50%); z-index: var(--z-toast); max-inline-size: 16rem; padding: var(--space-1) var(--space-2);
  background: var(--fg-primary); color: var(--surface-0); font-size: var(--text-sm); border-radius: var(--radius-control);
  box-shadow: var(--elevation-menu); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease); white-space: normal; }
.cr-tooltip:hover .cr-tooltip__bubble, .cr-tooltip:focus-within .cr-tooltip__bubble { opacity: 1; visibility: visible; }


/* --- components/pagination.css --- */
/* Contract: <nav class="cr-pager" aria-label="Paginación">
     <a class="cr-btn cr-btn--secondary" href="?page=1" aria-label="Anterior"><svg class="cr-icon" aria-hidden="true"><use href="#i-chevron-left"/></svg></a>
     <span class="cr-pager__info">Página 2 de 18 · 1.245 facturas</span>
     <a class="cr-btn cr-btn--secondary" href="?page=3" aria-label="Siguiente"><svg class="cr-icon" aria-hidden="true"><use href="#i-chevron-right"/></svg></a></nav> */
.cr-pager { display: flex; align-items: center; gap: var(--space-3); justify-content: flex-end; }
.cr-pager__info { font-size: var(--text-sm); color: var(--fg-tertiary); font-variant-numeric: tabular-nums; }


/* --- components/feedback.css --- */
/* Contract — inline alert: <div class="cr-alert cr-alert--errored" role="alert">
     <svg class="cr-icon-lg" aria-hidden="true"><use href="#i-alert-triangle"/></svg>
     <div><strong>No se pudo transmitir.</strong> Reintente el envío a DIAN. <button class="cr-btn cr-btn--secondary">Reintentar</button></div></div>
   Toast region: <div class="cr-toasts" aria-live="polite" aria-atomic="false"> <div class="cr-toast cr-toast--accepted">…</div> </div> */
.cr-alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface-1);
  border-inline-start-width: 3px; }
.cr-alert .cr-icon-lg { flex: none; margin-block-start: 2px; }
.cr-alert--info { border-inline-start-color: var(--status-submitted-fg); }
.cr-alert--info .cr-icon-lg { color: var(--status-submitted-fg); }
.cr-alert--accepted { border-inline-start-color: var(--verified); }
.cr-alert--accepted .cr-icon-lg { color: var(--verified); }
.cr-alert--errored { border-inline-start-color: var(--status-errored-fg); }
.cr-alert--errored .cr-icon-lg { color: var(--status-errored-fg); }
.cr-alert--rejected { border-inline-start-color: var(--status-rejected-fg); }
.cr-alert--rejected .cr-icon-lg { color: var(--status-rejected-fg); }

.cr-toasts { position: fixed; inset-block-end: var(--space-4); inset-inline-end: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast); max-inline-size: 22rem; }
.cr-toast { display: flex; gap: var(--space-2); padding: var(--space-3); background: var(--surface-1);
  border: var(--border-width) solid var(--border-emphasis); border-radius: var(--radius-control); box-shadow: var(--elevation-toast); }


/* --- components/modal.css --- */
/* Contract (native dialog; host opens with showModal()):
   <dialog class="cr-modal" aria-labelledby="m-title">
     <form method="dialog" class="cr-modal__panel">
       <header class="cr-modal__header"><h2 id="m-title">Anular factura</h2></header>
       <div class="cr-modal__body">…</div>
       <footer class="cr-modal__footer">
         <button class="cr-btn cr-btn--ghost" value="cancel">Cancelar</button>
         <button class="cr-btn cr-btn--danger" value="confirm">Anular</button>
       </footer>
     </form>
   </dialog>
   Consequential (irreversible, NOT a delete — e.g. transmit to DIAN): add class cr-modal--consequential and use cr-btn--primary. */
.cr-modal { padding: 0; border: none; background: transparent; max-inline-size: min(32rem, 92vw); }
.cr-modal::backdrop { background: color-mix(in srgb, var(--fg-primary) 45%, transparent); }
.cr-modal__panel { background: var(--surface-1); border: var(--border-width) solid var(--border-emphasis);
  border-radius: var(--radius-card); box-shadow: var(--elevation-modal); overscroll-behavior: contain; }
.cr-modal__header { padding: var(--space-4); border-block-end: var(--hairline) solid var(--border-hairline); }
.cr-modal__body { padding: var(--space-4); color: var(--fg-secondary); }
.cr-modal__footer { padding: var(--space-3) var(--space-4); border-block-start: var(--hairline) solid var(--border-hairline);
  display: flex; gap: var(--space-2); justify-content: flex-end; }
/* Consequential actions announce the stakes with an accent edge distinct from destructive. */
.cr-modal--consequential .cr-modal__panel { border-inline-start: 3px solid var(--verified); }


/* --- components/shell.css --- */
/* Contract:
   <a class="skip-link" href="#cr-main">Saltar al contenido</a>
   <div class="cr-app">
     <header class="cr-topbar">
       <a class="cr-brand" href="/"><svg class="cr-icon-lg" aria-hidden="true"><use href="#i-sello"/></svg> Crystelis</a>
       <button class="cr-org" aria-haspopup="menu" aria-expanded="false">
         <svg class="cr-icon-lg" aria-hidden="true"><use href="#i-building-2"/></svg>
         <span class="cr-org__text"><span class="cr-org__name">Comercial Andina SAS</span>
           <span class="cr-org__nit" translate="no">NIT 900.123.456-7</span></span>
         <svg class="cr-icon" aria-hidden="true"><use href="#i-chevron-down"/></svg>
       </button>
       <div class="cr-topbar__search"><input class="cr-input" type="search" aria-label="Buscar facturas, NIT o CUFE" placeholder="Buscar facturas, NIT, CUFE…" spellcheck="false"></div>
       <div class="cr-topbar__actions">
         <button class="cr-btn cr-btn--icon" aria-label="Densidad" data-density-toggle><svg class="cr-icon-lg" aria-hidden="true"><use href="#i-rows-3"/></svg></button>
         <button class="cr-btn cr-btn--icon" aria-label="Tema" data-theme-toggle><svg class="cr-icon-lg" aria-hidden="true"><use href="#i-moon"/></svg></button>
         <button class="cr-btn cr-btn--icon" aria-label="Cuenta"><svg class="cr-icon-lg" aria-hidden="true"><use href="#i-user"/></svg></button>
       </div>
     </header>
     <div class="cr-app__body">
       <nav class="cr-sidebar" aria-label="Módulos">
         <div class="cr-sidebar__group"><p class="cr-sidebar__title">Facturación</p>
           <a class="cr-navitem" href="/facturas" aria-current="page"><svg class="cr-icon" aria-hidden="true"><use href="#i-file-text"/></svg> Facturas</a>
           <a class="cr-navitem" href="/clientes"><svg class="cr-icon" aria-hidden="true"><use href="#i-user"/></svg> Clientes</a>
         </div>
       </nav>
       <main id="cr-main" class="cr-main">
         <div class="cr-page-header">
           <nav class="cr-breadcrumb" aria-label="Ruta"><ol><li><a class="cr-link" href="/facturas">Facturas</a></li><li aria-current="page">FE-0042</li></ol></nav>
           <div class="cr-page-header__row"><h1>Facturas</h1><div class="cr-page-header__actions">…</div></div>
         </div>
         <div class="cr-page-body">…</div>
       </main>
     </div>
   </div>
*/
.cr-app { min-block-size: 100vh; display: flex; flex-direction: column; }
.cr-topbar { display: flex; align-items: center; gap: var(--space-4); padding-inline: var(--space-4);
  block-size: 52px; background: var(--surface-0); border-block-end: var(--border-width) solid var(--border);
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky); }
.cr-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold);
  color: var(--fg-primary); text-decoration: none; letter-spacing: var(--tracking-tight); }
.cr-brand .cr-icon-lg { color: var(--verified); }

/* Org-switcher plate — the empresa activa is a first-class, always-legible element. */
.cr-org { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3);
  background: var(--surface-1); border: var(--border-width) solid var(--border-emphasis); border-radius: var(--radius-control);
  color: var(--fg-primary); max-inline-size: 22rem; }
.cr-org:hover { background: var(--surface-2); }
.cr-org__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-inline-size: 0; }
.cr-org__name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 15rem; }
.cr-org__nit { font-size: var(--text-xs); color: var(--fg-tertiary); font-variant-numeric: tabular-nums; }
.cr-org .cr-icon-lg { color: var(--fg-tertiary); }

.cr-topbar__search { flex: 1; max-inline-size: 32rem; }
.cr-topbar__actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }

.cr-app__body { display: flex; flex: 1; min-block-size: 0; }
.cr-sidebar { inline-size: 15rem; flex: none; padding: var(--space-3); background: var(--surface-0);
  border-inline-end: var(--border-width) solid var(--border); overflow-y: auto; }
.cr-sidebar__group { margin-block-end: var(--space-4); }
.cr-sidebar__title { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-muted); padding-inline: var(--space-2); margin-block-end: var(--space-1); }
.cr-navitem { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-control); color: var(--fg-secondary); text-decoration: none; font-size: var(--text-base); }
.cr-navitem:hover { background: var(--surface-1); color: var(--fg-primary); }
.cr-navitem[aria-current="page"] { background: color-mix(in srgb, var(--brand) 10%, var(--surface-0));
  color: var(--fg-primary); font-weight: var(--weight-medium); box-shadow: inset 2px 0 0 var(--brand); }
.cr-navitem .cr-icon { color: var(--fg-tertiary); }
.cr-navitem[aria-current="page"] .cr-icon { color: var(--brand); }

.cr-main { flex: 1; min-inline-size: 0; overflow-y: auto; }
.cr-page-header { padding: var(--space-4) var(--space-6); border-block-end: var(--hairline) solid var(--border-hairline); }
.cr-page-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-2); }
.cr-page-header__actions { display: flex; gap: var(--space-2); }
.cr-page-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }

@media (max-width: 860px) {
  .cr-sidebar { position: fixed; inset-block: 52px 0; inset-inline-start: 0; z-index: var(--z-dropdown);
    transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); box-shadow: var(--elevation-menu); }
  .cr-app[data-nav-open] .cr-sidebar { transform: translateX(0); }
  .cr-org__name { max-inline-size: 8rem; }
  .cr-topbar__search { display: none; }
}