/* Koozco.UI design system: theme tokens, shell, panels, tables, forms, states.
   Per-business branding overrides the custom properties of :root below; components are never forked.
   Every color comes from a token: :root holds the light values and :root[data-theme="dark"] the dark ones (ADR 0038).
   koozco-theme.js sets data-theme on <html> before the first paint. --brand is the per-business color (set by each app, kept as is in both
   themes: it is used as a background with white text); --brand-text is the same color made readable as text, border or icon on the surface. */
:root {
  --rz-primary: #217769;
  --rz-primary-dark: #175d53;
  --rz-primary-light: #e7f3ef;
  --rz-success: #237566;
  --rz-info: #467799;
  --rz-warning: #a26b24;
  --rz-body-font-family: var(--font-sans);
  --rz-border-radius: var(--radius-md);
  --brand: #217769;
  --brand-text: var(--brand);
  --header-title-font: var(--font-display); --header-title-weight: 700; --header-title-tracking: -.2px; /* the business name in the header (ADR 0049); a vertical's app.css may override them */
  /* Theme token contract (theming.md section 4, P15-001). Every value a theme may change is read from a token below; the defaults equal the look
     the app had before themes existed, so with no theme layer the computed styles do not change. The color tokens follow the scheme through
     the var() chains (the dark block only re-declares the base colors); koozco-pro.css re-declares the tokens whose sober default differs.
     A theme (css/koozco-themes.css, loaded after this file) overrides them on :root[data-koozco-theme="<id>"]. */
  --font-sans: Inter, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-display: var(--font-sans); /* headings and the header title */
  --base-size: 14px;
  --heading-weight: 650;
  --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px;
  --radius-button: calc(var(--radius-md) - 1px); /* buttons; a pill theme sets it to 999px */
  --radius-chip: var(--radius-sm); /* badges; a pill theme sets it to 999px */
  --border-width: 1px;
  --line-strong: var(--line); /* borders of inputs */
  --accent: var(--brand);
  --on-accent: var(--on-brand);
  --anchor: var(--link); /* color of plain links; an app identity may set its own */
  --nav-bg: var(--card);
  --nav-title-ink: var(--ink); /* the business name of the sidebar brand block; a theme with a dark sidebar sets it to navInk */
  --nav-muted: var(--muted);
  --nav-icon: var(--icon-muted); /* sidebar icons; a theme sets it to navMuted */
  --nav-active-bar: var(--brand-text);
  --header-bg: var(--card);
  --header-ink: var(--ink);
  --header-line: var(--line);
  --elevation-card: none;
  --elevation-popover: 0 12px 32px var(--shadow);
  --elevation-drawer: 10px 0 50px var(--shadow);
  --elevation-tip: 0 4px 14px var(--shadow);
  --elevation-chip: 0 6px 24px var(--shadow);
  /* Density: spacing, control and row heights (comfortable). A theme maps its density to these. */
  --space-page-x: 38px; --space-page-top: 34px; --space-page-bottom: 20px;
  --space-header-x: 38px; --header-h: 76px;
  --space-panel: 24px; --space-panel-gap: 22px; --space-section: 28px;
  --space-form: 18px; --space-form-grid: 16px;
  --space-nav-y: 13px; --space-nav-x: 14px;
  --space-cell-y: 16px;
  --control-h: 40px; --row-h: auto;
  --on-brand: #fff;
  --ink: #203c37;
  --muted: #5d6b65;
  --line: #e7ebe6;
  --surface: #f6f7f3;
  --card: #fff;
  --card-alt: #fafbf8;
  --nav-ink: #4d5a54;
  --nav-hover: #f4f7f3;
  --nav-active-bg: #e8f3ee;
  --nav-active-ink: #165a4e;
  --link: #1a6a5d;
  --avatar-bg: #e8eee7;
  --avatar-ink: #3f5c49;
  --eyebrow: #4f6354;
  --head-ink: #4f5d54;
  --separator: #6f7a75;
  --focus: #0b5cad;
  --action: #0b5cad;
  --icon-muted: #6b7d73;
  --danger: #a3321f;
  --danger-solid: #b3261e;
  --track: #dce8df;
  --scrim: #0006;
  --shadow: #0001;
  --badge-success-bg: #e6f3ed;
  --badge-success-ink: #1f634f;
  --badge-info-bg: #eaf1f7;
  --badge-info-ink: #3c6580;
  --badge-warning-bg: #fbf1de;
  --badge-warning-ink: #7d5a16;
  --badge-danger-bg: #fbeae8;
  --badge-danger-ink: #9f2a1f;
  --badge-light-ink: #3f4a45;
  --alert-bg: #fdf1ee;
  --alert-line: #e6b8b0;
  --alert-ink: #7a2617;
  --warn-bg: #fff8e6;
  --warn-line: #e6c88a;
  --warn-bar: #b7791f;
  --warn-ink: #5c3d0a;
  --ok-bg: #f1faf4;
  --ok-line: #b6d9c3;
  --ok-bar: #2f7d4f;
  --ok-ink: #1d4e32;
  --secret-bg: #fffbe8;
  --toast-bg: #fff1d4;
  --chip-bg: #fff;
  --chip-ink: #1b1b1b;
  /* Type accents (P18-007, theming section 4a): categorical INDICATOR colors (a dot, a rule, a tab underline, an icon glyph), never a text color and never the only
     carrier of meaning. Each is gated at 3:1 against --surface and --card and mutually distinguishable; a theme sets its own in koozco-themes.css. */
  --kz-kind-1: #2060c0;
  --kz-kind-2: #c2570c;
  --kz-kind-3: #12803f;
  --kz-kind-4: #8e3fd8;
  --kz-kind-5: #d12e69;
  --kz-kind-6: #8a6a00;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --brand-text: color-mix(in srgb, var(--brand) 45%, #fff);
  --ink: #e4ede9;
  --muted: #a7b5ae;
  --line: #2e3d38;
  --surface: #0f1613;
  --card: #17211e;
  --card-alt: #1c2824;
  --nav-ink: #bccac3;
  --nav-hover: #1e2b27;
  --nav-active-bg: #1f3b34;
  --nav-active-ink: var(--brand-text);
  --link: var(--brand-text);
  --avatar-bg: #2a3a33;
  --avatar-ink: #bfdccb;
  --eyebrow: #a9c0b0;
  --head-ink: #b5c4bb;
  --separator: #8d9a93;
  --focus: #8ec1ff;
  --action: #1f6bc2;
  --icon-muted: #9db1a6;
  --danger: #ff9f8f;
  --danger-solid: #b3261e;
  --track: #2b3a34;
  --scrim: #000a;
  --shadow: #0009;
  --badge-success-bg: #1c3a30;
  --badge-success-ink: #8fd9bd;
  --badge-info-bg: #1d3140;
  --badge-info-ink: #9cc7e6;
  --badge-warning-bg: #3d3217;
  --badge-warning-ink: #f0c978;
  --badge-danger-bg: #402120;
  --badge-danger-ink: #ffaaa0;
  --badge-light-ink: #cbd6d0;
  --alert-bg: #3a1e1a;
  --alert-line: #7a4037;
  --alert-ink: #ffc2b8;
  --warn-bg: #3a2f14;
  --warn-line: #6e5726;
  --warn-bar: #d9a441;
  --warn-ink: #f2d9a0;
  --ok-bg: #17301f;
  --ok-line: #2f5b40;
  --ok-bar: #4ca877;
  --ok-ink: #bfe6cc;
  --secret-bg: #2f2c15;
  --toast-bg: #3a3015;
  --rz-input-disabled-color: var(--muted);
  --rz-text-disabled-color: var(--muted);
  --rz-text-tertiary-color: var(--muted);
  --rz-primary: var(--brand-text);
  --rz-primary-dark: color-mix(in srgb, var(--brand-text) 85%, #000);
  --rz-primary-light: color-mix(in srgb, var(--brand) 35%, #0f1613);
  --rz-on-primary: #0f1613;
  --rz-input-placeholder-color: var(--muted);
  --chip-bg: #fff;
  --chip-ink: #1b1b1b;
  --kz-kind-1: #6aa0ff;
  --kz-kind-2: #ff9a57;
  --kz-kind-3: #4cd97b;
  --kz-kind-4: #c39bff;
  --kz-kind-5: #ff7daa;
  --kz-kind-6: #e0bc3a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: var(--font-sans); background: var(--surface); font-size: var(--base-size); }
a { color: var(--anchor); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea { font-family: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { font-size: 32px; letter-spacing: -1px; font-weight: var(--heading-weight); margin: 8px 0 10px; }
h1:focus { outline: none; }
h2 { font-size: 22px; }
h3 { font-size: 17px; margin-bottom: 6px; letter-spacing: -.3px; }
p { line-height: 1.65; }
small { font-size: 12px; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }

/* Visible keyboard focus everywhere. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 3000; background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-md); border: 2px solid var(--focus); }
.skip-link:focus { top: 8px; }

/* Shell: the header comes first in the document, the grid puts it beside the sidebar. */
.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
.app-shell > .app-header { grid-column: 2; grid-row: 1; }
.app-shell > .sidebar { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.app-shell > .workspace { grid-column: 2; grid-row: 2; }
.sidebar { width: 250px; background: var(--nav-bg); border-right: var(--border-width) solid var(--line); padding: 30px 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; gap: 12px; align-items: center; color: var(--nav-title-ink); font-size: 28px; font-weight: 700; letter-spacing: -1px; padding: 0 8px; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: calc(var(--radius-md) + 5px); background: var(--brand); color: var(--on-brand); font-size: 32px; }
.brand-caption { display: block; letter-spacing: 1.7px; font-size: 9px; margin-top: 4px; font-weight: 600; color: var(--nav-muted); }
.nav-caption { display: block; font-size: 10px; letter-spacing: 1.6px; color: var(--nav-muted); font-weight: 700; padding: 0 12px; margin: 24px 0 12px; }
.sidebar nav .nav-caption:first-child { margin-top: 8px; }
.nav-parent.has-active > a { font-weight: 700; }
.nav-caption-link { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: none; }
.nav-caption-link:hover { text-decoration: underline; }
.nav-caption-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Sidebar links only: scoped to .sidebar so other <nav> elements (admin tabs, breadcrumbs, the settings menu) keep their own styles. */
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: var(--space-nav-y) var(--space-nav-x); color: var(--nav-ink); border-radius: var(--radius-md); margin: 4px 0; font-size: 13px; font-weight: 500; }
.sidebar nav a:hover { background: var(--nav-hover); text-decoration: none; }
.sidebar nav a.nav-sub { margin-left: 16px; padding: 9px 12px; font-size: 12.5px; }
.sidebar nav a.active { color: var(--nav-active-ink); background: var(--nav-active-bg); font-weight: 650; }
/* Touch (P13-012, design sidebar-navigation 10.2): every sidebar link, children included, is a 44 px target; the pointer does not change the look on a mouse. */
@media (pointer: coarse) { .sidebar nav a { min-height: 44px; } }
/* Groups and page parents (P20-004, design menu-builder section 11): a group, or a page the member cannot open, is a header row (a button, no link); a page parent keeps its link and gains
   a toggle beside it. Their sub-items are the usual .nav-sub links, indented as for any page parent. Everything reads the tokens of the sidebar. */
.sidebar nav .nav-group-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: var(--space-nav-y) var(--space-nav-x); margin: 4px 0; color: var(--nav-ink); background: none; border: 0; border-radius: var(--radius-md); font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.sidebar nav .nav-group-toggle:hover { background: var(--nav-hover); }
.sidebar nav .nav-group-toggle .nav-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sidebar nav .nav-chevron { display: inline-flex; margin-left: auto; color: var(--nav-icon); }
.sidebar nav .nav-children[hidden] { display: none; }
.sidebar nav .nav-flyout-title { display: none; }
.sidebar nav .nav-parent { display: flex; align-items: center; gap: 2px; }
.sidebar nav .nav-parent > a { flex: 1; min-width: 0; }
.sidebar nav .nav-toggle { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--nav-icon); background: none; border: 0; border-radius: var(--radius-md); cursor: pointer; }
.sidebar nav .nav-toggle:hover { background: var(--nav-hover); }
.sidebar nav .nav-toggle[aria-disabled="true"], .sidebar nav .nav-group-toggle[aria-disabled="true"] { cursor: default; }
@media (pointer: coarse) { .sidebar nav .nav-group-toggle { min-height: 44px; } .sidebar nav .nav-toggle { width: 44px; height: 44px; } }
.avatar { position: relative; overflow: hidden; display: inline-grid; place-items: center; background: var(--avatar-bg); color: var(--avatar-ink); border-radius: 50%; width: 34px; height: 34px; font-size: 11px; font-weight: 650; flex-shrink: 0; }
.avatar.small { width: 32px; height: 32px; font-size: 11px; }
.avatar.large { width: 56px; height: 56px; font-size: 18px; }
.avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.workspace { min-width: 0; }
.separator { color: var(--separator); }
.sidebar-backdrop { display: none; }
main { padding: var(--space-page-top) var(--space-page-x) var(--space-page-bottom); max-width: 1700px; margin: auto; }
main:focus { outline: none; }
footer { padding: 12px var(--space-page-x) 24px; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }

/* Common header (AppHeader, ADR 0038): menu button, name, search slot, theme selector, bell and user menu. */
.app-header { position: relative; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: var(--header-h); padding: 0 var(--space-header-x); background: var(--header-bg); color: var(--header-ink); border-bottom: var(--border-width) solid var(--header-line); font-size: 13px; }
.app-header-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.app-header-mark { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: calc(var(--radius-md) + 1px); background: var(--brand); color: var(--on-brand); }
.app-header-mark .rzi { font-size: 20px; }
:root[data-theme="dark"] .app-header-mark { box-shadow: inset 0 0 0 1px var(--line); }
.app-header-title { min-width: 0; max-width: min(40ch, 36vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--header-title-font); font-weight: var(--header-title-weight); letter-spacing: var(--header-title-tracking); font-size: 17px; color: var(--header-ink); }
.app-header-section { flex-shrink: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.app-header-title:hover { text-decoration: none; }
.app-header-search { flex: 1 1 0; min-width: 0; }
.app-header-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.hdr-menu { position: relative; }
.hdr-btn { appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--header-ink); cursor: pointer; }
.hdr-btn:hover { background: var(--nav-hover); }
.hdr-btn[aria-expanded="true"] { background: var(--nav-active-bg); }
.hdr-badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: calc(var(--radius-md) + 1px); background: var(--danger-solid); color: var(--on-brand); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.hdr-backdrop { position: fixed; inset: 0; z-index: 35; background: transparent; }
.hdr-popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px; max-width: min(92vw, 360px); padding: 6px; background: var(--card); color: var(--ink); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--elevation-popover); }
.hdr-bell { width: 340px; }
.hdr-item { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.hdr-item:hover { background: var(--nav-hover); text-decoration: none; }
.hdr-item[aria-pressed="true"] { font-weight: 650; }
.hdr-item .rzi { width: 24px; flex-shrink: 0; }
.hdr-userinfo { padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: var(--border-width) solid var(--line); overflow-wrap: anywhere; }
.hdr-userinfo strong { display: block; font-size: 14px; }
.hdr-userinfo small { display: block; margin-top: 3px; color: var(--muted); }
.hdr-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 12px; border-bottom: var(--border-width) solid var(--line); }
.hdr-link { appearance: none; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--link); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.hdr-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.hdr-empty { margin: 0; padding: 20px 12px; color: var(--muted); text-align: center; }
.hdr-notes { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.hdr-notes li { border-bottom: var(--border-width) solid var(--line); }
.hdr-notes li:last-child { border-bottom: 0; }
.hdr-notes li > a, .hdr-notes li > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; color: var(--ink); }
.hdr-notes li.unread > a, .hdr-notes li.unread > div { border-left: 3px solid var(--brand-text); }
.hdr-notes li small { color: var(--muted); }
.hdr-signin { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hdr-signin:hover { filter: brightness(.92); }

/* Global search (GlobalSearchBox, P2-012) in the search slot: a field on desktop, an icon that opens a full-width field over the header on phones. */
.gsb { position: relative; max-width: 520px; margin: 0 auto; }
.gsb-toggle, .gsb-close { display: none !important; }
.gsb-field { position: relative; z-index: 36; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: var(--border-width) solid var(--line-strong); border-radius: var(--radius-md); background: var(--card-alt); color: var(--muted); }
.gsb-field:focus-within { outline: 2px solid var(--brand-text); outline-offset: 1px; }
.gsb-input { flex: 1 1 auto; min-width: 0; min-height: 42px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.gsb-input:focus { outline: none; }
.gsb-input::placeholder { color: var(--muted); opacity: 1; }
.gsb-panel { left: 0; right: 0; max-width: none; padding: 0; }
.gsb-list { max-height: min(60vh, 440px); overflow-y: auto; padding: 6px; }
.gsb-group-title { padding: 8px 12px 4px; font-size: 11px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
/* The heading of a group opens the type view of the Búsqueda screen with the text (a mouse and touch shortcut; the focus stays in the input, so it is not a tab stop). */
.gsb-group-nav { cursor: pointer; }
.gsb-group-nav:hover { text-decoration: underline; }
/* The last option, "Ver todos los resultados de «…»": set apart from the hits by a rule. */
.gsb-see-all { margin-top: 4px; border-top: var(--border-width) solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.gsb-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer; }
.gsb-option:hover { background: var(--nav-hover); }
.gsb-option.active { background: var(--nav-active-bg); outline: 2px solid var(--brand-text); outline-offset: -2px; }
.gsb-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.gsb-sub { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.gsb-badge { flex: none; margin-left: auto; padding: 2px 8px; border: var(--border-width) solid var(--line); border-radius: calc(var(--radius-lg) - 2px); font-size: 11px; color: var(--ink); }
.gsb-note { margin: 0; padding: 10px 14px; border-top: var(--border-width) solid var(--line); font-size: 12px; color: var(--muted); }
.gsb-panel > .hdr-empty { padding: 16px 14px; }
/* The quick actions of the manifest as buttons (QuickActionLinks, P5-030): a wrapping row of links of at least 44 px. */
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-action { gap: 8px; min-height: 44px; }
/* The large variant of the home (P5-030): in the page, always open, at every width; the phone rules of the header box below do not apply to it. */
.gsb.gsb-large { position: relative; max-width: none; margin: 0; }
.gsb.gsb-large .gsb-toggle, .gsb.gsb-large .gsb-close { display: none !important; }
.gsb.gsb-large .gsb-field { display: flex; min-height: 56px; padding: 0 16px; border-radius: var(--radius-lg); background: var(--card); }
.gsb.gsb-large .gsb-input { min-height: 52px; font-size: 16px; }
.gsb.gsb-large .gsb-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); width: auto; }

/* Page heading and panels */
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: var(--space-section); }
.page-heading p { color: var(--muted); margin: 0; font-size: 13px; }
.eyebrow { font-size: 10px; letter-spacing: 1.7px; font-weight: 650; color: var(--eyebrow); }
/* The actions of a heading wrap (heading-actions-row) instead of widening the page when a vertical registers many (the customer file of the optics app has up to ten buttons, P5-017). */
.heading-actions { flex-shrink: 1; min-width: 0; }
.panel { background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); padding: var(--space-panel); min-width: 0; margin-bottom: var(--space-panel-gap); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.panel-heading p { font-size: 12px; color: var(--muted); margin-bottom: 0; }
.panel-heading a { font-size: 12px; white-space: nowrap; }
.panel-title { font-size: 17px; margin-bottom: 6px; letter-spacing: -.3px; }

/* Tables and toolbars */
.table-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.table-toolbar > span { margin-left: auto; font-size: 12px; }
.rz-data-grid { border: 0 !important; }
.rz-grid-table thead th { background: var(--card-alt) !important; font-size: 11px !important; color: var(--head-ink) !important; font-weight: 600 !important; }
.rz-grid-table td { font-size: 13px !important; padding: var(--space-cell-y) 12px !important; height: var(--row-h); }
.client-cell { display: flex; align-items: center; gap: 10px; }
.client-cell strong { font-size: 13px; font-weight: 500; }

/* Forms and dialogs */
.form-stack { display: flex; flex-direction: column; gap: var(--space-form); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-form-grid); }
.form-grid > * { min-width: 0; }
.rz-form-field { width: 100%; }
.rz-form-field-content > input, .rz-form-field-content > .rz-dropdown, .rz-form-field-content > .rz-datepicker, .rz-form-field-content > .rz-numeric { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 22px; }
.rz-dialog { border-radius: calc(var(--radius-lg) + 2px) !important; }
.rz-dialog-title { font-size: 19px !important; }

/* Radzen tuning */
.rz-button { box-shadow: none !important; border-radius: var(--radius-button) !important; text-transform: none !important; font-size: 13px !important; letter-spacing: 0 !important; }
.rz-badge { font-size: 11px !important; border-radius: var(--radius-chip) !important; font-weight: 500 !important; text-transform: none !important; white-space: nowrap; }
.rz-badge-success { background: var(--badge-success-bg) !important; color: var(--badge-success-ink) !important; }
.rz-badge-info { background: var(--badge-info-bg) !important; color: var(--badge-info-ink) !important; }
.rz-badge-warning { background: var(--badge-warning-bg) !important; color: var(--badge-warning-ink) !important; }
.rz-badge-danger { background: var(--badge-danger-bg) !important; color: var(--badge-danger-ink) !important; }
.rz-badge-light { color: var(--badge-light-ink) !important; }
.rz-alert { font-size: 13px; border-radius: var(--radius-md); }
/* Toasts take the message tokens of the theme (the pairs already checked for contrast in both schemes) instead of the lighter and darker variants Radzen derives from the status color: the
   success one measured 4.49:1 on the Catálogo smoke check, just under the 4.5:1 of WCAG AA for 14 px text. */
.rz-notification-success .rz-notification-item { background-color: var(--ok-bg); color: var(--ok-ink); }
.rz-notification-warn .rz-notification-item { background-color: var(--warn-bg); color: var(--warn-ink); }
.rz-notification-error .rz-notification-item { background-color: var(--alert-bg); color: var(--alert-ink); }
.rz-notification-info .rz-notification-item { background-color: var(--badge-info-bg); color: var(--badge-info-ink); }
.rz-notification-item .rz-notification-icon { color: inherit; }

/* Loading, empty and error states */
.state-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--muted); }
.state-panel h1, .state-panel h2 { margin: 0; font-size: 20px; color: var(--ink); letter-spacing: -.3px; }
.state-panel p { margin: 0 0 8px; max-width: 460px; }
.state-panel .rzi { font-size: 40px; color: var(--icon-muted); }
.state-panel.error .rzi { color: var(--danger); }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 4px solid var(--track); border-top-color: var(--brand-text); animation: koozco-spin .9s linear infinite; }
@keyframes koozco-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.neutral-page { max-width: 560px; margin: 12vh auto; padding: 0 16px; text-align: center; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; background: var(--toast-bg); padding: 15px; width: 100%; z-index: 2000; color: var(--ink); }
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 25vh auto 1rem; }
.loading-progress circle { fill: none; stroke: var(--track); stroke-width: .3rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--brand-text); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; }
.loading-progress-text { text-align: center; color: var(--eyebrow); }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .sidebar { width: 220px; padding: 24px 14px; }
  main { padding: 28px 24px; }
  .app-header { padding: 0 24px; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell > .app-header, .app-shell > .workspace { grid-column: 1; }
  .sidebar { position: fixed; left: -260px; z-index: 100; transition: left .2s, visibility 0s .2s; width: 250px; box-shadow: var(--elevation-drawer); visibility: hidden; }
  .sidebar.open { left: 0; visibility: visible; transition: left .2s; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 99; }
}

/* Icon rail (ADR 0049): koozco-shell.js sets data-sidebar on <html> before the first paint. Only above 900 px; under it the drawer is unchanged. */
@media (min-width: 901px) {
  .sidebar { z-index: 31; }
  :root[data-sidebar="collapsed"] .app-shell { grid-template-columns: 72px minmax(0, 1fr); }
  :root[data-sidebar="collapsed"] .sidebar { width: 72px; padding: 24px 12px; overflow-x: hidden; }
  :root[data-sidebar="collapsed"] .brand { justify-content: center; padding: 0; }
  :root[data-sidebar="collapsed"] .brand > span:not(.brand-mark) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  :root[data-sidebar="collapsed"] .nav-caption { height: 0; margin: 14px 8px; padding: 0; overflow: hidden; border-top: var(--border-width) solid var(--line); background: none; font-size: 0; line-height: 0; color: transparent; text-indent: -9999px; white-space: nowrap; }
  :root[data-sidebar="collapsed"] .sidebar nav a { justify-content: center; padding: var(--space-nav-y) 0; }
  :root[data-sidebar="collapsed"] .sidebar nav a.nav-sub { margin-left: 0; padding: 13px 0; }
  :root[data-sidebar="collapsed"] .sidebar nav a .nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  :root[data-sidebar="collapsed"] .sidebar nav a[data-tip="on"] .nav-tip { display: block; }
  /* Rail, groups (P20-004): the group is an icon button (the label is its accessible name and its tooltip) that opens a flyout with its sub-items; a page parent keeps its icons and loses its toggle. */
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group-toggle { justify-content: center; padding: var(--space-nav-y) 0; }
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group-toggle .nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group-toggle .nav-chevron, :root[data-sidebar="collapsed"] .sidebar nav .nav-toggle { display: none; }
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group-toggle[data-tip="on"] .nav-tip { display: block; }
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group-toggle[aria-expanded="true"] .nav-tip { display: none; }
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group > .nav-children:not([hidden]) { position: fixed; left: 80px; z-index: 210; box-sizing: border-box; min-width: 208px; max-width: 280px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 8px; background: var(--card); color: var(--ink); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--elevation-popover); }
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group > .nav-children .nav-flyout-title { display: block; margin: 4px 8px 6px; font-size: 10px; letter-spacing: 1.6px; font-weight: 700; color: var(--nav-muted); overflow-wrap: anywhere; }
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group > .nav-children a.nav-sub { justify-content: flex-start; margin-left: 0; padding: 9px 12px; }
  :root[data-sidebar="collapsed"] .sidebar nav .nav-group > .nav-children a .nav-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}
.nav-tip { display: none; position: fixed; left: 80px; z-index: 200; transform: translateY(-50%); padding: 6px 10px; border-radius: calc(var(--radius-md) - 2px); background: var(--ink); color: var(--card); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--elevation-tip); }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .app-shell { transition: grid-template-columns .2s; }
  .sidebar { transition: width .2s; }
}

@media (max-width: 600px) {
  main { padding: 22px 16px; }
  .app-header { min-height: 64px; padding: 0 8px 0 12px; gap: 4px; }
  .app-header-section, .app-header .separator { display: none; }
  .app-header-title { max-width: none; font-size: 15px; }
  .app-header-search { flex: none; } /* the search icon keeps its 44 px; the business name gives way first */
  .app-header-actions { gap: 0; }
  .hdr-popover { position: fixed; left: 8px; right: 8px; top: 68px; width: auto; max-width: none; }
  .hdr-bell { width: auto; }
  /* The search collapses to an icon (P1-039); opened, its field covers the header and the results use the width of the screen. */
  .gsb { position: static; margin: 0 0 0 auto; max-width: none; }
  .gsb-toggle { display: inline-flex !important; }
  .gsb-field { display: none; }
  .gsb.open .gsb-field { position: absolute; z-index: 45; inset: 0; display: flex; padding: 0 4px 0 12px; border: 0; border-radius: 0; background: var(--header-bg); }
  .gsb.open .gsb-close { display: inline-flex !important; }
  .gsb-panel { position: fixed; left: 8px; right: 8px; top: 68px; z-index: 50; width: auto; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading h1 { font-size: 28px; }
  .panel { padding: 18px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .table-toolbar > .rz-textbox, .table-toolbar > .rz-dropdown { width: 100% !important; }
  .panel-heading { align-items: flex-start; }
  footer { padding: 20px 16px; }
}

/* Roles and members screens */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.inline-alert { border: 1px solid var(--alert-line); background: var(--alert-bg); color: var(--alert-ink); border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
.inline-alert p { margin: 0 0 6px; }
.inline-alert ul { margin: 6px 0 0; padding-left: 18px; }
.inline-alert .rz-button { margin-top: 8px; }
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }
.field-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.text-input { width: 100%; box-sizing: border-box; min-height: var(--control-h); padding: 8px 12px; border: var(--border-width) solid var(--line-strong); border-radius: calc(var(--radius-md) - 1px); font: inherit; background: var(--card); color: var(--ink); }
.text-input[aria-invalid="true"] { border-color: var(--danger); }
.text-input:focus-visible, .check-row input:focus-visible, .native-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.native-select { min-height: var(--control-h); padding: 6px 10px; border: var(--border-width) solid var(--line-strong); border-radius: calc(var(--radius-md) - 1px); font: inherit; background: var(--card); color: var(--ink); }
.perm-groups { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding-right: 4px; }
.perm-group { border: var(--border-width) solid var(--line); border-radius: calc(var(--radius-lg) - 2px); padding: 10px 14px 12px; min-width: 0; }
.perm-group legend { font-size: 12px; font-weight: 700; letter-spacing: .5px; padding: 0 6px; text-transform: uppercase; color: var(--head-ink); }
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; min-height: 32px; }
.check-row input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.check-row label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.check-row small { color: var(--muted); font-size: 12px; }
.check-row.reserved label { color: var(--muted); }
.badge-row { display: flex; flex-wrap: wrap; gap: 4px; }
.row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.row-actions .rz-button { min-width: 36px; min-height: 36px; }
.load-more { display: flex; justify-content: center; padding-top: 16px; }
.rz-dialog { max-width: 96vw; }
/* The close icon of a dialog is 12 px: its hit area grows to 44 px without moving anything (WCAG 2.5.5), whatever the pointer. */
.rz-dialog-titlebar-close { position: relative; }
.rz-dialog-titlebar-close::after { content: ""; position: absolute; inset: -16px; }
@media (pointer: coarse) { html:root .rz-dialog :is(.rz-button, .text-input, .native-select) { min-height: 44px; } html:root .rz-dialog .dialog-actions { flex-wrap: wrap; } }
/* The role editor: a reserved-permission badge may be long ("Solo propietarios y administradores"), so it wraps; on touch every row is a 44 px target. */
.check-row label { min-width: 0; }
.check-row .rz-badge { white-space: normal; text-align: left; max-width: 100%; }
@media (pointer: coarse) {
  html:root .rz-dialog .perm-groups .check-row { min-height: 44px; align-items: center; }
  html:root .rz-dialog .perm-groups .check-row input { width: 24px; height: 24px; margin-top: 0; }
  html:root .rz-dialog .perm-groups .check-row label { flex: 1; min-height: 44px; justify-content: center; }
}
@media (max-width: 600px) { .rz-dialog { width: 96vw !important; } .perm-groups { max-height: 40vh; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Audit screen (Koozco.UI.Modules): filters, notes, actor badge and the detail dialog. */
.audit-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; align-items: start; margin-bottom: 12px; }
.audit-filters-alert { grid-column: 1 / -1; margin-bottom: 0; }
.audit-filter { min-width: 0; }
.audit-filter .native-select, .audit-filter .text-input { width: 100%; }
.audit-filter-actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; align-self: end; }
.audit-note { margin: 0 0 8px; font-size: 13px; }
.audit-count { margin: 12px 0 8px; font-size: 12px; }
.audit-actor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.inline-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; font-size: 13px; }
.detail-list { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 8px 16px; margin: 0 0 8px; }
.detail-list dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.audit-changes-heading { margin-top: 14px; }
.audit-changes { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-changes th, .audit-changes td { text-align: left; padding: 8px 10px; border-bottom: var(--border-width) solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.audit-changes thead th { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .detail-list { grid-template-columns: 1fr; gap: 2px; } .detail-list dd { margin-bottom: 8px; } }

/* Settings screens (P1-017) */
.settings-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: var(--border-width) solid var(--line); margin-bottom: 18px; }
.settings-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; min-height: 44px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.settings-tab:hover { color: inherit; }
.settings-tab.active { color: inherit; border-bottom-color: var(--focus); }
.settings-tab:focus-visible, #settings-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#settings-panel > .panel + .panel, #settings-panel > section.panel ~ section.panel { margin-top: 18px; }
.settings-form { display: flex; flex-direction: column; gap: 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; align-items: start; }
.settings-section { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); padding: 12px 16px 16px; margin: 0; min-width: 0; }
.settings-section legend { font-weight: 700; padding: 0 6px; }
.field-help { display: block; margin-top: 4px; }
.info-note { border: var(--border-width) solid var(--line); border-left: 4px solid var(--focus); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; }
.hours-day { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; padding: 8px 0; border-top: var(--border-width) solid var(--line); }
.hours-day:first-of-type { border-top: 0; }
.hours-day-name { font-weight: 600; padding-top: 8px; }
.hours-day-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hours-interval { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hours-interval .text-input { width: 130px; }
@media (max-width: 600px) { .hours-day { grid-template-columns: 1fr; } .hours-day-name { padding-top: 0; } }
.hours-tools { align-items: center; margin-bottom: 12px; }

/* Agenda setup screens (P3-008) */
.agenda-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; align-items: end; }
.agenda-filters .text-input, .agenda-filters .native-select { width: 100%; }
.color-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; border: var(--border-width) solid var(--line); vertical-align: -1px; }
.color-input { width: 56px; height: 36px; padding: 2px; border: var(--border-width) solid var(--line); border-radius: calc(var(--radius-md) - 2px); background: var(--card); cursor: pointer; }
.color-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.member-picker .assignee-options { gap: 6px; }

/* Access flow screens (P1-022) */
.section-title { font-size: 16px; margin: 0 0 8px; }
.secret-box { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); padding: 14px; margin-bottom: 16px; background: var(--secret-bg); }
.secret-box p { margin: 0 0 8px; }
.secret-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.profile-form { max-width: 560px; }
.file-button { position: relative; cursor: pointer; }
.visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.file-button:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.join-flow { min-height: 100vh; }
.neutral-page .rz-button, .neutral-page small { margin-top: 10px; }

/* Business export and deletion screens (P1-023) */
.life-steps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.life-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 18px; border-radius: var(--radius-button); background: var(--action); color: var(--on-brand); font-weight: 600; text-decoration: none; }
.button-link:hover { filter: brightness(.92); }
.button-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.button-link.secondary { background: var(--card); color: inherit; border: var(--border-width) solid var(--line); }
.warning-note { border: 1px solid var(--warn-line); border-left: 4px solid var(--warn-bar); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
.warning-note h2, .warning-note h3 { margin: 0 0 6px; font-size: 14px; }
.warning-note p { margin: 0 0 6px; }
.success-note { border: 1px solid var(--ok-line); border-left: 4px solid var(--ok-bar); background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
.life-status { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.life-status .spinner { flex-shrink: 0; }
.life-result { max-width: 640px; }

/* Radzen dark theme tuning: its placeholder and dropdown label gray is below AA on its dark inputs. */
:root[data-theme="dark"] .rz-dropdown .rz-dropdown-label, :root[data-theme="dark"] .rz-placeholder, :root[data-theme="dark"] ::placeholder { color: var(--muted); }
:root[data-theme="dark"] .rz-form-field-content > label, :root[data-theme="dark"] .rz-form-field-label { color: var(--muted); }

/* Field components (LegalIdInput, AddressInput, DebouncedSearchBox) */
.legal-id-input { display: flex; gap: 8px; align-items: stretch; }
.legal-id-input .rz-textbox:not(.legal-id-kind) { flex: 1 1 auto; min-width: 0; }
.legal-id-kind { flex: 0 0 auto; max-width: 11rem; }
/* A cell of the person form grid that needs the whole row (the document of the quick registration, whose select and number do not fit half a dialog). */
.pcs-grid > .pcs-wide { grid-column: 1 / -1; }
.address-input { border: 0; padding: 0; margin: 0; min-width: 0; }
.address-input legend { padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.search-box { width: 100%; }

/* People screens (P2-011): list filters, form rows, detail grid, tags, consents and timeline */
.people-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; width: 100%; }
.people-filter { min-width: 0; }
.people-filter-search { grid-column: 1 / -1; }
.people-filter .native-select { width: 100%; }
.people-filter-check .check-row { min-height: 40px; align-items: center; }
.person-link { font-weight: 600; }
.kind-switch { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.kind-switch legend { padding: 0; width: 100%; }
.kind-option { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.kind-option input { width: 18px; height: 18px; }
.contact-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: end; }
.contact-row-field { min-width: 0; }
.contact-row .check-row { min-height: 40px; align-items: center; }
.contact-row .rz-button { min-width: 40px; min-height: 40px; }
.address-row { border-top: var(--border-width) solid var(--line); padding-top: 14px; }
.address-row:first-child { border-top: 0; padding-top: 0; }
.address-row-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 10px; }
.duplicate-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.duplicate-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; }
.duplicate-list li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.heading-actions-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tag-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-choices { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); padding: 8px 12px; margin: 0; min-width: 0; max-height: 260px; overflow-y: auto; }
.tag-choices legend { padding: 0 6px; }
.tag-create { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.tag-create > div { flex: 1 1 200px; }
/* The person chosen in a PersonPicker: a card with a check, so a choice cannot be missed. */
.person-chosen { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; padding: 10px 14px; border: var(--border-width) solid var(--brand); border-left-width: 4px; border-radius: var(--radius-md); background: var(--card); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.person-chosen-icon { color: var(--brand-text); font-size: 28px; flex: 0 0 auto; }
.person-chosen-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person-chosen-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.person-chosen-name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; color: var(--ink); }
a.person-chosen-name { color: var(--anchor); text-decoration: underline; text-underline-offset: 3px; }
.person-chosen-open { font-size: 16px; vertical-align: -3px; }
/* The dropdown of the person picker (a combobox): drops under the box and floats over what follows. */
.person-combo { position: relative; }
.person-combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--card); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.person-combo-option { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-md); cursor: pointer; }
.person-combo-option:hover { background: var(--nav-hover); }
.person-combo-option.active { background: var(--nav-active-bg); outline: 2px solid var(--brand-text); outline-offset: -2px; }
.person-combo-title { font-weight: 600; }
.person-combo-sub { color: var(--muted); font-size: 13px; }
.assignee-current { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.assignee-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.consent-item { border-top: var(--border-width) solid var(--line); padding: 12px 0; }
.consent-item:first-child { border-top: 0; padding-top: 0; }
.consent-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.consent-type { margin: 0; font-size: 15px; }
.consent-history { margin-top: 10px; font-size: 13px; }
.consent-history summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.consent-history summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.consent-history ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.consent-history li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.timeline-form { border-bottom: var(--border-width) solid var(--line); margin-bottom: 18px; padding-bottom: 6px; }
.timeline-sensitive { align-self: end; }
.timeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.timeline-entry { border-left: 3px solid var(--line); padding-left: 12px; }
.timeline-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12px; }
.timeline-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline-text.reserved { color: var(--muted); font-style: italic; display: flex; gap: 6px; align-items: center; }
.person-vertical-tab { margin-top: 0; }
@media (max-width: 600px) {
  .contact-row { grid-template-columns: minmax(0, 1fr) auto; }
  .contact-row .contact-row-field { grid-column: 1 / -1; }
  .duplicate-list li { flex-direction: column; align-items: stretch; }
  .heading-actions-row { justify-content: flex-start; }
}
/* The vertical apps colour every link in the dark theme with a more specific rule than .button-link; keep the buttons readable on their own backgrounds. */
html:root:root:root[data-theme="dark"] .button-link { color: var(--on-brand); }
html:root:root:root[data-theme="dark"] .button-link.secondary { color: var(--ink); }

/* Payment banner of the vertical apps (P9-005, design 16.9): the standing of the business with the platform's charge. Colours come from the badge tokens so both themes keep their contrast. */
.payment-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 38px; border-bottom: var(--border-width) solid var(--line); font-size: 13px; }
.payment-banner-text { margin: 0; flex: 1 1 260px; min-width: 0; }
.payment-banner-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.payment-banner .button-link { min-height: 36px; padding: 0 14px; font-size: 13px; }
.payment-banner--info { background: var(--badge-info-bg); color: var(--badge-info-ink); }
.payment-banner--warn { background: var(--warn-bg); color: var(--warn-ink); border-bottom-color: var(--warn-line); }
.payment-banner--danger { background: var(--badge-danger-bg); color: var(--badge-danger-ink); }
.payment-banner-tell { font-weight: 600; }
.payment-banner-close { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; border: 0; border-radius: calc(var(--radius-md) - 1px); background: transparent; color: inherit; cursor: pointer; }
.payment-banner-close:hover { background: rgb(0 0 0 / 8%); }
.payment-banner-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.payment-disabled-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
@media (max-width: 600px) { .payment-banner { padding: 10px 16px; } }

/* Keyboard shortcuts and help (ADR 0049, P13-003/004): key chips, the "Ir a… g" chip and the help dialog. Hints of single keys hide while the switch is off (data-shortcuts="off", WCAG 2.1.4); chords stay. */
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: var(--border-width) solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--card-alt); color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.5; text-align: center; }
.keyhint { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding-left: 10px; }
.keyhint-plus { color: var(--muted); font-size: 11px; }
:root[data-shortcuts="off"] .keyhint:not(.keyhint-chord) { display: none; }
.hdr-help .keyhint { margin-left: auto; }
.nav-tip .keyhint { margin-left: 0; padding-left: 8px; }
.nav-tip kbd { border-color: color-mix(in srgb, var(--card) 45%, transparent); background: transparent; color: inherit; }
.gsb-hint { display: inline-flex; flex: none; }
.gsb-hint .keyhint { margin-left: 0; padding-left: 0; }
.gsb-input:focus ~ .gsb-hint, .gsb-hint:empty { display: none; }
.shortcut-chip { position: fixed; left: 50%; bottom: 24px; z-index: 1500; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 13px; font-weight: 600; box-shadow: var(--elevation-chip); pointer-events: none; }
.shortcut-chip kbd { border-color: color-mix(in srgb, var(--card) 45%, transparent); background: transparent; color: inherit; }
.shortcut-help { display: flex; flex-direction: column; gap: 18px; max-height: 70vh; overflow-y: auto; padding: 2px; }
.shortcut-heading { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.shortcut-list { display: grid; grid-template-columns: 1fr; gap: 2px 24px; margin: 0; }
.shortcut-row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; align-items: center; gap: 12px; min-height: 32px; }
.shortcut-row dt, .shortcut-row dd { margin: 0; }
.shortcut-row dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.shortcut-or { color: var(--muted); }
.shortcut-keys { display: inline-flex; align-items: center; gap: 6px; }
.shortcut-keys .keyhint { margin-left: 0; padding-left: 0; }
.shortcut-off { opacity: .75; }
.shortcut-off small { color: var(--muted); }
.shortcut-topics { display: flex; flex-direction: column; margin-top: 10px; border-top: var(--border-width) solid var(--line); }
.shortcut-topic { border-bottom: var(--border-width) solid var(--line); }
.shortcut-topic-button { appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.shortcut-topic-button:hover { background: var(--nav-hover); }
.shortcut-topic-text { padding: 0 4px 12px 32px; color: var(--ink); }
.shortcut-topic-text p { margin: 0 0 8px; }
.shortcut-switch { display: flex; align-items: flex-start; gap: 12px; padding-top: 14px; border-top: var(--border-width) solid var(--line); }
.shortcut-switch label { display: block; font-weight: 600; }
.shortcut-switch small { display: block; margin-top: 2px; color: var(--muted); }
@media (max-width: 600px) { .gsb-hint { display: none; } .shortcut-row { grid-template-columns: 1fr; gap: 2px; padding: 4px 0; } }

/* Calendar (UI-10, P3-009): the toolbar, the Radzen scheduler dressed with the theme, and the list that replaces the grid on phones */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 14px; }
.cal-nav, .cal-modes { display: flex; align-items: center; gap: 6px; }
.cal-nav .rz-button, .cal-modes .rz-button { min-height: 40px; }
.cal-date { display: flex; flex-direction: column; gap: 4px; }
.cal-title { flex: 1 1 100%; margin: 0; font-size: 16px; font-weight: 700; }
.cal-title::first-letter { text-transform: uppercase; }
.cal-legend { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
/* No inner scroll box: the page scrolls, so every item can be reached and measured by assistive technology (the stacked groups of a week would otherwise scroll inside the calendar). Radzen sizes its views from a fixed height, so they take the height of their content here. The scheduler takes the colors of the theme through its own variables. */
.cal .rz-scheduler { height: auto; overflow: visible; --rz-scheduler-background-color: var(--card); --rz-scheduler-color: var(--ink); --rz-scheduler-header-color: var(--muted); --rz-scheduler-header-background-color: var(--card-alt); --rz-scheduler-border-color: var(--line); --rz-scheduler-event-background-color: var(--brand); --rz-scheduler-event-color: var(--on-brand); }
.cal .rz-view-content, .cal .rz-resource-groups { height: auto; flex: none; overflow: visible; }
.cal .rz-event-content.cal-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; box-sizing: border-box; background: var(--cal-bg, var(--brand)); color: var(--cal-fg, var(--on-brand)); }
.cal .rz-event-content.cal-item.cal-status-noshow { outline: 2px dashed var(--cal-fg, var(--on-brand)); outline-offset: -3px; }
.cal-row { display: flex; flex-direction: column; gap: 1px; box-sizing: border-box; width: 100%; padding: 2px 6px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cal-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cal-item-time { font-size: 11px; font-weight: 600; }
.cal-item-title { font-weight: 700; overflow-wrap: anywhere; }
.cal-item-detail { font-size: 11px; overflow-wrap: anywhere; }
.cal-chip { display: inline-block; align-self: flex-start; padding: 0 7px; border: 1px solid var(--chip-ink); border-radius: 999px; background: var(--chip-bg); color: var(--chip-ink); font-size: 11px; font-weight: 600; line-height: 16px; }
.cal .cal-off { background-color: color-mix(in srgb, var(--muted) 10%, transparent); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--muted) 28%, transparent) 6px 7px); }
.cal .cal-now { position: relative; }
.cal .cal-now::after { content: ""; position: absolute; left: 0; right: 0; top: var(--cal-now, 0); border-top: 2px solid var(--danger-solid); pointer-events: none; z-index: 2; }
.cal-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cal-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 2px 12px; min-height: 64px; padding: 10px 12px; border: var(--border-width) solid var(--line); border-left: 6px solid var(--cal-bg, var(--brand-text)); border-radius: var(--radius-md); background: var(--card); color: var(--ink); }
.cal-row .cal-item-time { grid-column: 1; grid-row: 1 / span 3; font-size: 13px; }
.cal-row .cal-item-title, .cal-row .cal-item-detail, .cal-row .cal-chip { grid-column: 2; }
.cal-row .cal-item-detail { color: var(--muted); font-size: 13px; }
.cal-row:hover { background: var(--card-alt); }
@media (max-width: 767px) { .cal-nav, .cal-date, .cal-modes { flex: 1 1 auto; } .cal-date .text-input { width: 100%; min-height: 44px; } .cal-nav .rz-button { min-height: 44px; min-width: 44px; } }

/* Booking and appointment screens (P3-010) */
.slot-picker { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; }
.slot-search { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.slot-search .text-input { min-width: 11rem; }
.slot-zone { margin: 0; }
.slot-days, .slot-times { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.slot-button { appearance: none; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 44px; padding: 6px 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); color: inherit; font: inherit; cursor: pointer; }
.slot-button:hover { background: var(--card-alt); }
.slot-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.slot-button[aria-pressed="true"] { border-color: var(--action); border-width: 2px; padding: 5px 11px; background: var(--card-alt); font-weight: 700; }
.slot-time { min-width: 4.5rem; justify-content: center; }
.slot-chosen { margin: 0; }
.agenda-layout { display: block; }
.agenda-main { min-width: 0; }
.agenda-panel { margin-top: 18px; padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.agenda-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
@media (min-width: 1100px) {
    .agenda-layout.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
    .agenda-layout.with-panel .agenda-panel { margin-top: 0; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
}
.appt-detail { display: flex; flex-direction: column; gap: 14px; }
.appt-detail h2 { margin: 0 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.appt-detail h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.appt-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: flex-start; }
.appt-when { margin: 0; }
.appt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.appt-actions { gap: 8px; }
.appt-notes { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.plain-table { width: 100%; border-collapse: collapse; }
.plain-table th, .plain-table td { text-align: left; padding: 8px 10px; border-bottom: var(--border-width) solid var(--line); vertical-align: top; }
@media (max-width: 767px) { .appt-actions .rz-button { min-height: 44px; } }

/* Shared "En construcción" page (Koozco.UI UnderConstruction) */
.under-construction { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 520px; margin: 8vh auto 0; padding: 28px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.under-construction .rzi { font-size: 28px; color: var(--icon-muted); }
.under-construction h1 { margin: 0; }
.under-construction p { margin: 0; }
.under-construction .uc-badge { display: inline-block; padding: 1px 8px; border: var(--border-width) solid var(--line); border-radius: calc(var(--radius-sm) - 1px); background: var(--card-alt); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.under-construction .button-link { margin-top: 10px; }

/* Record tabs (P2-014): the tab strip scrolls sideways on narrow screens; touch targets are at least 44 px. */
.record-tabs { display: flex; gap: 4px; border-bottom: var(--border-width) solid var(--line); margin: 0 0 18px; overflow-x: auto; scrollbar-width: thin; }
.record-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 0 16px; min-height: 44px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.record-tab:hover { color: var(--ink); }
.record-tab.active { color: var(--ink); border-bottom-color: var(--focus); }
.record-tab:focus-visible, .record-tab-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.consent-required-banner { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.consent-required-banner p { margin: 0; }
.quick-action[disabled] { opacity: .65; cursor: not-allowed; }
button.button-link { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.button-link.secondary { border: var(--border-width) solid var(--line); }
@media (max-width: 600px) {
  .heading-actions-row .button-link, .heading-actions-row .rz-button { min-height: 44px; }
}

/* People import, merge and anonymization (P2-013) */
.import-modes { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.import-modes legend { padding: 0; margin-bottom: 4px; }
.import-counts { margin-top: 4px; }
#import-progress, .import-progress { display: block; width: 100%; max-width: 520px; height: 14px; accent-color: var(--action); }
.plain-table caption.sr-only { text-align: left; }
.plain-table .check-row { min-height: 40px; }
.plain-table select.native-select { width: 100%; min-width: 180px; }
.plain-table label { cursor: pointer; }
@media (max-width: 600px) {
  .plain-table th, .plain-table td { padding: 8px 6px; }
  .plain-table select.native-select { min-width: 0; }
}

/* Planned menu entries (ADR 0064): a small construction mark after the label (the text is in its title, in the rail tooltip and in the accessible name). */
.sidebar nav a .nav-wip { margin-left: auto; display: inline-flex; color: var(--nav-icon); }
.sidebar nav a .nav-wip .rzi { font-size: 16px; }
@media (min-width: 901px) { :root[data-sidebar="collapsed"] .sidebar nav a .nav-wip { display: none; } }

/* The sidebar toggle is a quiet control: muted small icon, no highlighted background while the sidebar is open (it is not a menu that "opens"). */
.hdr-btn.sidebar-toggle { min-width: 36px; min-height: 36px; color: var(--muted, var(--ink)); opacity: .75; }
.hdr-btn.sidebar-toggle[aria-expanded="true"] { background: transparent; }
.hdr-btn.sidebar-toggle:hover, .hdr-btn.sidebar-toggle:focus-visible { background: var(--nav-hover); opacity: 1; }
.hdr-btn.sidebar-toggle .rzi { font-size: 20px; }

/* Configuración: its own side menu (a Radzen PanelMenu) beside the screen; one column under 900 px. */
.settings-frame { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-menu { position: sticky; top: 16px; }
.settings-menu .rz-panel-menu { border: 0; background: transparent; box-shadow: none; padding: 0; }
.settings-menu .rz-navigation-item-link { border-radius: calc(var(--radius-md) - 2px); font-size: 14px; }
.settings-menu .rz-navigation-item-link { color: var(--ink); }
.settings-menu .rz-navigation-item-text, .settings-menu .rz-navigation-item-icon, .settings-menu .rz-navigation-item-link .rzi { color: inherit; }
/* The menu sits on the page surface, not on the dark sidebar, so the hover must not use --nav-hover (a sidebar token that is dark in several themes): a faint tint of the ink always reads. */
.settings-menu .rz-navigation-item-link:hover, .settings-menu .rz-navigation-item-link:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.settings-menu .rz-navigation-item-link-active, .settings-menu .rz-navigation-item-link-active:hover { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 600; }
.settings-menu .rz-state-disabled, .settings-menu .rz-navigation-item-link.rz-state-disabled { opacity: 1; color: var(--muted); }
.settings-menu .settings-menu-danger .rz-navigation-item-text, .settings-menu .settings-menu-danger .rz-navigation-item-icon { color: var(--danger); }
.settings-menu .settings-menu-child { padding-left: 22px; }
.settings-content { min-width: 0; }
@media (max-width: 900px) {
  .settings-frame { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .settings-menu { position: static; }
}

/* Administración (P10-002): routed tabs are links; the landing lists the areas as cards (one column on a phone, auto-fill from there up, 44 px touch targets). */
a.settings-tab { display: inline-flex; align-items: center; text-decoration: none; }
.admin-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-panel-gap); }
.admin-area { display: flex; gap: 14px; align-items: flex-start; min-height: 44px; height: 100%; padding: var(--space-panel); background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); color: inherit; text-decoration: none; }
.admin-area:hover { border-color: var(--focus); }
.admin-area:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.admin-area-icon { flex: none; font-size: 24px; color: var(--muted); }
.admin-area-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.admin-area-text .muted { font-size: 13px; }

/* Soporte (P10-004): the sessions as a plain semantic table that becomes one card per session on a phone (labels come from data-label), a skeleton while the list loads, 44 px targets. */
.support-note { margin: 0 0 16px; max-width: 70ch; }
.support-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.support-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: var(--border-width) solid var(--line); }
.support-table td { padding: var(--space-cell-y) 12px; border-bottom: var(--border-width) solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.support-row-active td:first-child { box-shadow: inset 4px 0 0 var(--warn-bar); }
.support-ended { display: block; margin-top: 4px; }
.support-end.rz-button { min-height: 44px; min-width: 44px; }
.support-skeleton { display: flex; flex-direction: column; gap: 12px; }
.support-skeleton-row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; padding: 12px 0; }
.support-skeleton-row span { height: 16px; border-radius: var(--radius-sm); background: var(--card-alt); border: var(--border-width) solid var(--line); }
@media (prefers-reduced-motion: no-preference) { .support-skeleton-row span { animation: koozco-pulse 1.4s ease-in-out infinite; } }
@keyframes koozco-pulse { 50% { opacity: .45; } }
@media (max-width: 640px) {
  .support-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .support-table, .support-table tbody { display: block; }
  .support-table tr { display: block; margin-bottom: 12px; padding: 8px 12px; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); }
  .support-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
  .support-table td::before { content: attr(data-label); flex: none; font-weight: 600; color: var(--muted); text-align: left; }
  .support-table td[data-label] > :last-child { min-width: 0; }
  .support-row-active td:first-child { box-shadow: none; }
  .support-row-active { border-left: 4px solid var(--warn-bar); }
  .support-table td.support-actions { display: block; text-align: left; padding-top: 10px; }
  .support-table td.support-actions::before { content: none; }
  .support-end.rz-button { width: 100%; }
}

/* Contactos: emails, phones and addresses in one card, each as a group with a quiet heading. */
.contact-group + .contact-group { margin-top: 22px; padding-top: 18px; border-top: var(--border-width) solid var(--line); }
.contact-group-title { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }

/* The business name leads the sidebar brand block: one line, cut with an ellipsis (the full name stays in the DOM and the link title). */
.brand > span:not(.brand-mark) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 1.2; }
.brand > span:not(.brand-mark) .brand-caption { overflow: hidden; text-overflow: ellipsis; }

/* Development theme gallery (P15-002): decorative samples drawn inside the [data-preview-theme] scope of koozco-themes.css; every value is a token. */
.theme-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 20px; margin-top: 16px; }
.theme-gallery-item { margin: 0; min-width: 0; }
.theme-gallery-item figcaption { margin-bottom: 6px; font-size: 13px; }
/* Type accents fixture (P18-007): the six --kz-kind-n indicators on the page surface and on the raised surface. Text stays on --ink; the accent is a dot, a rule and an icon glyph. */
.kind-accents { margin-top: 24px; }
.kind-accents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 16px; margin-top: 12px; }
.kind-accents-surface { padding: 16px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); }
.kind-accents-surface.is-page { background: var(--surface); }
.kind-accents-surface.is-raised { background: var(--card); }
.kind-accents-surface h3 { margin: 0 0 8px; font-size: 14px; }
.kind-accents-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kind-accents-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-left: 4px solid var(--kind-accent, transparent); }
.kind-accents-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--kind-accent, transparent); }
.kind-accents-item .kind-accents-icon { color: var(--kind-accent, inherit); font-size: 20px; } /* a glyph is an indicator, not text */
.kind-accents-item[data-kind="1"] { --kind-accent: var(--kz-kind-1); }
.kind-accents-item[data-kind="2"] { --kind-accent: var(--kz-kind-2); }
.kind-accents-item[data-kind="3"] { --kind-accent: var(--kz-kind-3); }
.kind-accents-item[data-kind="4"] { --kind-accent: var(--kz-kind-4); }
.kind-accents-item[data-kind="5"] { --kind-accent: var(--kz-kind-5); }
.kind-accents-item[data-kind="6"] { --kind-accent: var(--kz-kind-6); }
.theme-preview { display: grid; grid-template-columns: minmax(6rem, 28%) minmax(0, 1fr); min-height: 17rem; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--base-size); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.theme-preview-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; background: var(--nav-bg); color: var(--nav-ink); }
.theme-preview-brand { padding: 4px 8px 10px; font-family: var(--font-display); font-weight: var(--heading-weight); color: var(--nav-ink); }
.theme-preview-nav-item { padding: 6px 8px; border-radius: var(--radius-sm); color: var(--nav-muted); border-left: 3px solid transparent; }
.theme-preview-nav-item.is-active { background: var(--nav-active-bg); color: var(--nav-active-ink); border-left-color: var(--nav-active-bar); }
.theme-preview-main { display: flex; flex-direction: column; min-width: 0; }
.theme-preview-header { padding: 8px 12px; background: var(--header-bg); color: var(--header-ink); border-bottom: var(--border-width) solid var(--header-line); font-family: var(--font-display); font-weight: var(--heading-weight); }
.theme-preview-card { margin: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--elevation-card); }
.theme-preview-card h3 { margin: 0; font-family: var(--font-display); font-weight: var(--heading-weight); font-size: 1.1em; color: var(--ink); }
.theme-preview-card p { margin: 0; color: var(--muted); }
.theme-preview-card a { color: var(--link); text-decoration: underline; } /* a link inside text must not rely on color alone (axe link-in-text-block; found by the P15-009 matrix) */
.theme-preview-input { padding: 6px 10px; background: var(--card); color: var(--muted); border: var(--border-width) solid var(--line-strong); border-radius: calc(var(--radius-md) - 1px); }
.theme-preview-row { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-preview-btn { padding: 5px 12px; background: var(--brand); color: var(--on-brand); border-radius: var(--radius-button); font-weight: 600; }
.theme-preview-btn.is-accent { background: var(--accent); color: var(--on-accent); }
.theme-preview-btn.is-danger { background: var(--danger-solid); color: var(--on-danger); }
.theme-preview-badge { padding: 2px 8px; border-radius: var(--radius-chip); font-size: .85em; font-weight: 600; }
.theme-preview-badge.is-success { background: var(--badge-success-bg); color: var(--badge-success-ink); }
.theme-preview-badge.is-info { background: var(--badge-info-bg); color: var(--badge-info-ink); }
.theme-preview-badge.is-warning { background: var(--badge-warning-bg); color: var(--badge-warning-ink); }
.theme-preview-badge.is-danger { background: var(--badge-danger-bg); color: var(--badge-danger-ink); }
.theme-preview-code { font-family: var(--font-mono); color: var(--brand-text); }

/* Header theme menu: the business theme as plain text (P15-006). */
.hdr-theme-business { margin: 6px 12px; padding-top: 8px; border-top: var(--border-width) solid var(--line); font-size: 12px; color: var(--muted); }

/* Configuración > Apariencia (P15-006). The previews inside the cards are drawn from the preview scope of koozco-themes.css; the rest of the page reads the active tokens. */
.theme-preview.is-compact { min-height: 9.5rem; font-size: 12px; }
.theme-preview.is-compact .theme-preview-nav { padding: 8px 6px; }
.theme-preview.is-compact .theme-preview-card { margin: 8px; padding: 8px; gap: 6px; }
.appearance-page { display: flex; flex-direction: column; gap: 16px; }
.appearance-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; background: var(--warn-bg); color: var(--warn-ink); border: var(--border-width) solid var(--warn-line); border-radius: var(--radius-md); }
.appearance-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.appearance-scheme { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.appearance-segments { display: flex; padding: 3px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.appearance-segment { appearance: none; min-height: 44px; min-width: 44px; padding: 0 16px; border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.appearance-segment[aria-pressed="true"] { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 650; box-shadow: inset 0 -3px 0 var(--nav-active-bar); }
.appearance-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.appearance-fieldset legend { padding: 0 0 12px; font-size: 15px; font-weight: 650; }
.appearance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.theme-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.theme-card.is-selected { border-color: var(--action); }
.theme-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-card-head { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.theme-card-head input[type="radio"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--action); }
.theme-card-name { font-size: 15px; font-weight: 650; }
.theme-card-use { margin-left: auto; padding: 2px 8px; border-radius: var(--radius-chip); background: var(--nav-active-bg); color: var(--nav-active-ink); font-size: 12px; font-weight: 650; }
.theme-card-desc { font-size: 13px; line-height: 18px; color: var(--muted); }
.theme-card-selected { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--brand-text); }
.theme-card-skeleton { cursor: default; }
.theme-skeleton-preview { height: 9.5rem; border-radius: var(--radius-md); background: var(--card-alt); }
.theme-skeleton-line { height: 14px; border-radius: var(--radius-sm); background: var(--card-alt); }
.theme-skeleton-line.short { width: 60%; }
.appearance-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 0; background: var(--surface); border-top: var(--border-width) solid var(--line); }
.appearance-saved { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--badge-success-ink); }
@media (max-width: 600px) {
  .appearance-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .appearance-actions { padding: 12px 0; }
  .appearance-actions .appearance-action-save { order: -1; flex: 1 1 100%; }
  .appearance-actions .appearance-action-preview, .appearance-actions .appearance-action-discard { flex: 1 1 0; }
  .appearance-actions .appearance-saved { order: -2; flex: 1 1 100%; }
  .appearance-scheme { flex: 1 1 100%; }
  .appearance-segments { flex: 1; }
  .appearance-segment { flex: 1; }
}

/* Person core section (P16-002): the same personal data block for clients and staff. Tokens only; sections stack under 768 px; 44 px targets on coarse pointers. */
.pcs { display: contents; }
.pcs-help { margin: 0 0 14px; font-size: 13px; }
.pcs-reserved { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card-alt, var(--card)); color: var(--ink); font-size: 13px; }
.pcs-reserved-icon { flex: none; color: var(--muted); }
.pcs-primary { color: var(--brand-text, var(--ink)); white-space: nowrap; }
.pcs-read { margin: 0; }
.pcs-read .plain-list { gap: 2px; }
.pcs-read a { color: var(--brand-text, var(--ink)); overflow-wrap: anywhere; }
.pcs .address-input { min-width: 0; margin: 0; padding: 0; border: 0; }
@media (max-width: 767px) {
  .pcs .form-grid { grid-template-columns: minmax(0, 1fr); }
  .pcs .contact-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pcs .contact-row .contact-row-field { grid-column: 1 / -1; }
  .pcs .detail-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pcs .detail-list dd { margin-bottom: 8px; }
}
@media (pointer: coarse) {
  html:root .pcs :is(.text-input, .native-select, .legal-id-kind, .rz-textbox, .rz-button) { min-height: 44px; }
  html:root .pcs .rz-button { min-width: 44px; }
  html:root .pcs .check-row { min-height: 44px; align-items: center; }
  html:root .pcs .check-row input[type="radio"] { width: 24px; height: 24px; margin-top: 0; }
  html:root .pcs .pcs-read a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 420px) {
  .pcs .legal-id-input { flex-direction: column; }
  .pcs .legal-id-kind { max-width: none; }
}

/* Person record in two sections (P16-013): "Datos personales" (PersonCoreSection, read mode) and "Datos del negocio". Tokens only. The sections sit side by side when each gets at least 380 px
   and always stack under 768 px; the consents row, the duplicates warning and the PersonSection blocks follow. 44 px targets on coarse pointers. */
.person-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); column-gap: var(--space-panel-gap); align-items: start; }
.person-sections > * { min-width: 0; }
.pbd dd { min-width: 0; }
.pbd .tag-list { margin-bottom: 8px; }
.consent-states { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.consent-states li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.consent-state-type { font-weight: 600; }
.consent-actions { gap: 8px; }
.consents-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.consents-error p { margin: 0; }
.person-section { border-top: var(--border-width) solid var(--line); margin-top: 16px; padding-top: 14px; }
.person-section-title { margin: 0 0 8px; font-size: 14px; }
.duplicates-warning .muted { color: inherit; }
.duplicates-warning .duplicate-list li { background: var(--card); color: var(--ink); }
.duplicates-warning .duplicate-list .muted { color: var(--muted); }
@media (max-width: 767px) {
  .person-sections { grid-template-columns: minmax(0, 1fr); }
  .pbd.detail-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pbd.detail-list dd { margin-bottom: 8px; }
}
@media (pointer: coarse) {
  html:root .pbd :is(.rz-button, .text-input, .native-select) { min-height: 44px; }
  html:root .pbd .rz-button { min-width: 44px; }
  html:root .pbd .check-row { min-height: 44px; align-items: center; }
  html:root .pbd .check-row input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; }
  html:root .consent-actions .rz-button { min-height: 44px; }
  html:root .duplicates-warning .button-link { min-height: 44px; }
  html:root .record-tab { min-height: 44px; }
}

/* Profesionales (Equipo) screens (P16-008): the staff list, the record header and the inline forms of its tabs. Tokens only; the list is a semantic list whose rows stack under 768 px
   (name above the chips) and whose whole row is one link (a stretched link, so the target is far above 44 px); 44 px targets on coarse pointers. */
.team-members-note { margin: 0 0 14px; }
.team-members-note a, .members-staff-note a { text-decoration: underline; } /* a link inside a sentence must not rely on color alone (axe link-in-text-block) */
.team-list { list-style: none; margin: 0; padding: 0; }
.team-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; min-height: 56px; padding: 10px 8px; border-top: var(--border-width) solid var(--line); border-radius: var(--radius-sm); }
.team-row:first-child { border-top: 0; }
.team-row:hover { background: var(--card-alt, var(--card)); }
.team-row:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.team-row-link::after { content: ""; position: absolute; inset: 0; }
.team-row-link:focus-visible { outline: none; }
.team-avatar { width: 40px; height: 40px; font-size: 13px; }
.team-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.team-row-sub { font-size: 13px; }
.team-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.team-chip { display: inline-flex; align-items: center; padding: 1px 8px; border: var(--border-width) solid var(--line); border-radius: var(--radius-chip); background: var(--card-alt, var(--card)); color: var(--badge-light-ink); font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.team-chip.ok { background: var(--badge-success-bg); color: var(--badge-success-ink); border-color: transparent; }
.team-chip.info { background: var(--badge-info-bg); color: var(--badge-info-ink); border-color: transparent; }
.team-chip.warn { background: var(--badge-warning-bg); color: var(--badge-warning-ink); border-color: transparent; }
.team-record-chips { justify-content: flex-start; margin: 0 0 16px; }
.team-review { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.team-review p { margin: 0; }
.team-review-note { margin-bottom: 16px; }
.team-crumbs, .record-crumbs { margin: 0 0 8px; font-size: 13px; }
.team-crumbs ol, .record-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; }
/* Each crumb is a flex row so the separator, a link (44 px tall on touch) and the plain current-page text share one centre line. record-crumbs is the breadcrumb of the record pages of a
   search type (Búsqueda › Clientes › name, P18-005); the staff pages carry both classes. */
.team-crumbs li, .record-crumbs li { display: flex; align-items: center; }
.team-crumbs li + li::before, .record-crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--muted); }
.team-crumbs a, .record-crumbs a { color: var(--brand-text, var(--ink)); }
.team-crumbs li[aria-current="page"], .record-crumbs li[aria-current="page"] { color: var(--muted); overflow-wrap: anywhere; }
.team-contact-link, .team-wrap { overflow-wrap: anywhere; }
.team-contact-link { color: var(--brand-text, var(--ink)); }
.team-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.team-inline-form { margin-top: 12px; padding: 14px 16px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); }
.team-inline-title { margin: 0 0 6px; font-size: 14px; }
.team-switch { min-height: 40px; align-items: center; gap: 10px; }
.team-switch-help { display: block; margin: 0 0 12px; }
.team-overflow { position: relative; display: inline-block; }
.team-overflow-menu { position: absolute; right: 0; z-index: 20; min-width: 12rem; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--elevation-popover); }
.team-overflow-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.team-overflow-item:hover, .team-overflow-item:focus-visible { background: var(--card-alt, var(--card)); }
.team-overflow-item:focus-visible, .team-overflow-button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.team-overflow-item.danger { color: var(--badge-danger-ink); }
.team-overflow-button { min-height: 40px; min-width: 40px; justify-content: center; }
.team-work-hint { margin: 10px 0 0; font-size: 0.875rem; }
.member-staff-link { min-height: 36px; }
@media (max-width: 767px) {
  .team-row { grid-template-columns: auto minmax(0, 1fr); }
  .team-row .team-chips { grid-column: 2; justify-content: flex-start; }
  /* The menu opens under the whole row of actions, left-aligned to it, so it can never leave the screen wherever the wrapped button lands. */
  .team-heading-actions { position: relative; }
  .team-heading-actions .team-overflow { position: static; }
  .team-heading-actions .team-overflow-menu { top: 100%; left: 0; right: auto; max-width: 100%; }
}
@media (pointer: coarse) {
  html:root .team-row { min-height: 64px; }
  html:root .team-actions :is(.rz-button, .button-link), html:root .team-inline-form :is(.rz-button, .text-input, .native-select) { min-height: 44px; }
  html:root .team-switch input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; }
  html:root .team-switch { min-height: 44px; }
  html:root .team-overflow-button { min-width: 44px; min-height: 44px; }
  html:root .team-crumbs a, html:root .record-crumbs a, html:root .member-staff-link, html:root .team-contact-link { display: inline-flex; align-items: center; min-height: 44px; }
  html:root .team-crumbs li, html:root .record-crumbs li { min-height: 44px; }
  html:root .team-review .button-link { min-height: 44px; }
}

/* ---- File upload (UI-20), document viewer (UI-21) and the documents screens (P4-005). Tokens of the themes only; touch targets of 44 px at every width. ---- */
.file-upload { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.file-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; text-align: center; border: calc(var(--border-width) * 2) dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--card-alt, var(--card)); }
.file-drop[data-dragging="true"] { border-style: solid; border-color: var(--brand-text, var(--focus)); background: var(--nav-active-bg, var(--card-alt)); }
.file-drop-icon { font-size: 36px; color: var(--icon-muted, var(--muted)); }
.file-drop-title { margin: 0; font-weight: 600; }
.file-hint { margin: 0; font-size: 13px; }
.file-drop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.file-picker { position: relative; display: inline-flex; }
.file-picker label.button-link { min-height: 44px; cursor: pointer; }
.file-picker label.button-link.is-disabled { opacity: .6; cursor: not-allowed; }
/* The native input stays in the page (focusable, announced, opens the chooser or the camera) but is not seen; the label next to it is the button. */
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.file-input:disabled { cursor: not-allowed; }
.file-input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .file-camera { display: none; } }
@media (pointer: coarse) { .file-drop-title { display: none; } }
.file-selected { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); min-width: 0; }
.file-selected-icon { font-size: 28px; color: var(--icon-muted, var(--muted)); flex-shrink: 0; }
.file-selected-main { display: flex; flex-direction: column; min-width: 0; }
.file-name { font-weight: 600; overflow-wrap: anywhere; }
.file-meta { font-size: 13px; }
.file-progress-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-progress { flex: 1 1 160px; height: 12px; accent-color: var(--brand-text, var(--focus)); }
.file-progress-text { font-size: 13px; }
.file-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.file-actions .button-link, .file-upload .inline-alert .button-link { min-height: 44px; }

.doc-viewer { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.doc-viewer-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.doc-viewer-version { min-width: 0; }
.doc-viewer-version .native-select { min-height: 44px; max-width: 100%; }
.doc-viewer-group { display: inline-flex; align-items: center; gap: 4px; }
.doc-viewer-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-button); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.doc-viewer-button:hover:not(:disabled) { background: var(--card-alt, var(--card)); }
.doc-viewer-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.doc-viewer-button:disabled { opacity: .5; cursor: not-allowed; }
.doc-viewer-page, .doc-viewer-zoom { min-width: 3.5rem; text-align: center; font-size: 13px; white-space: nowrap; }
.doc-viewer-stage { position: relative; height: min(70dvh, 760px); min-height: 260px; overflow: auto; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card-alt, var(--card)); }
.doc-viewer-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.doc-viewer-host { display: flex; justify-content: safe center; padding: 8px; width: max-content; min-width: 100%; box-sizing: border-box; }
.doc-viewer-canvas { display: block; max-width: none; background: var(--card); box-shadow: var(--elevation-chip); }
.doc-viewer-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: var(--card-alt, var(--card)); }
.doc-viewer-overlay p { margin: 0; }
@media (max-width: 700px) {
  .rz-dialog.doc-viewer-dialog { width: 100vw !important; max-width: 100vw; border-radius: 0 !important; }
  .doc-viewer-stage { height: calc(100dvh - 230px); }
  .doc-viewer-button.with-text span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 12px 8px; border-top: var(--border-width) solid var(--line); }
.doc-row:first-child { border-top: 0; }
.doc-icon { font-size: 30px; color: var(--icon-muted, var(--muted)); }
.doc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-title { font-weight: 600; overflow-wrap: anywhere; }
.doc-meta { font-size: 13px; overflow-wrap: anywhere; }
.doc-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.doc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: var(--border-width) solid var(--line); border-radius: var(--radius-chip); background: var(--card-alt, var(--card)); color: var(--badge-light-ink, var(--ink)); font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.doc-chip.ok { background: var(--badge-success-bg); color: var(--badge-success-ink); border-color: transparent; }
.doc-chip.info { background: var(--badge-info-bg); color: var(--badge-info-ink); border-color: transparent; }
.doc-chip.warn { background: var(--badge-warning-bg); color: var(--badge-warning-ink); border-color: transparent; }
.doc-chip.danger { background: var(--badge-danger-bg); color: var(--badge-danger-ink); border-color: transparent; }
.doc-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-actions .button-link { min-height: 44px; }
.doc-actions .button-link.danger { color: var(--badge-danger-ink); }
.doc-open { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-align: left; color: var(--brand-text, var(--ink)); cursor: pointer; overflow-wrap: anywhere; min-height: 44px; display: inline-flex; align-items: center; }
.doc-open:hover { text-decoration: underline; }
.doc-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.doc-open:disabled { color: var(--ink); cursor: default; text-decoration: none; }
.doc-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.doc-panel-head .button-link { min-height: 44px; }
.doc-filters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.doc-filters .text-input, .doc-filters .native-select { min-height: 44px; }
.doc-dialog-fields { display: flex; flex-direction: column; gap: var(--space-form); }
@media (min-width: 900px) {
  .doc-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .doc-chips { grid-column: auto; justify-content: flex-end; }
  .doc-actions { grid-column: 2 / -1; }
}
@media (min-width: 1800px) {
  .doc-viewer-stage { height: min(74dvh, 1100px); }
}
.doc-dialog-fields .native-select, .doc-dialog-fields .text-input { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; }

/* ---- Inventario (P17-007): the item list, the item screen and its Stock tab, the receipt, adjustment, count and price update dialogs. Tokens only. The tables become cards at 640 px
   or less (each cell carries its label in data-label, the header row is hidden visually and stays for assistive technology); targets are 44 px on coarse pointers. ---- */
.inventory-crumbs { margin: 0 0 8px; font-size: 13px; }
.inventory-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; }
.inventory-crumbs li { display: flex; align-items: center; }
.inventory-crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--muted); }
.inventory-crumbs a { color: var(--brand-text, var(--ink)); }
.inventory-crumbs li[aria-current="page"] { color: var(--muted); overflow-wrap: anywhere; }
.inventory-heading-actions { align-items: center; justify-content: flex-start; margin: 0 0 16px; }
.inventory-search-status { min-height: 1.25em; margin: 0 0 8px; font-size: 13px; }
.inventory-search { width: 100%; }
.inventory-table { width: 100%; border-collapse: collapse; }
.inventory-table th, .inventory-table td { text-align: left; padding: 8px 10px; border-bottom: var(--border-width) solid var(--line); vertical-align: top; }
.inventory-table th { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.inventory-table .inventory-num { text-align: right; font-variant-numeric: tabular-nums; }
.inventory-table th.inventory-num { text-align: right; }
.inventory-table tbody tr:hover { background: var(--card-alt, var(--card)); }
.inventory-sku { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
.inventory-type { display: block; font-size: 12px; }
.inventory-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; vertical-align: middle; }
.inventory-badges:empty { display: none; }
.inventory-row-inactive td { color: var(--muted); }
.inventory-row-difference td:first-child { box-shadow: inset 4px 0 0 var(--warn-bar); }
.inventory-line-sku { display: block; font-size: 12px; font-family: var(--font-mono); }
.inventory-qty { width: 8rem; max-width: 100%; text-align: right; }
.inventory-line-actions { white-space: nowrap; }
.inventory-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.inventory-onhand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.inventory-onhand h2 { flex: 1 1 100%; margin: 0; }
.inventory-onhand-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.inventory-onhand-value { font-size: 28px; font-weight: 700; line-height: 1.2; }
.inventory-movement-filter { display: flex; flex-direction: column; max-width: 16rem; margin: 0 0 12px; }
.inventory-chosen-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 12px; margin: 0 0 14px; background: var(--card-alt, var(--card)); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); }
.inventory-fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.inventory-fieldset legend { padding: 0; }
.inventory-subheading { margin: 18px 0 8px; font-size: 15px; }
.inventory-free-text-note { margin: 4px 0 12px; font-size: 13px; }
.inventory-empty-lines { margin: 12px 0; }
.inventory-count-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 4px 0 12px; }
.inventory-sync { margin: 6px 0; font-size: 13px; }
.inventory-count-actions { flex-wrap: wrap; }
.inventory-notice { margin-bottom: 12px; }
.inventory-adjust-preview { margin: 8px 0; font-weight: 600; }
.inventory-success { border-color: var(--badge-success-ink); }
.inventory-progress { display: flex; flex-direction: column; gap: 10px; }
.inventory-progress-bar { width: 100%; height: 16px; accent-color: var(--action); }
.inventory-preview { margin-top: 18px; }
.inventory-preview-scroll { max-height: 18rem; overflow: auto; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); }
.inventory-preview-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.inventory-one-at-a-time { font-size: 13px; }
.inventory-attributes { margin: 0; }
.inventory-detail dd { overflow-wrap: anywhere; }
.form-grid-wide { grid-column: 1 / -1; }
.item-picker { margin: 0 0 8px; }
.item-picker-status { min-height: 1.25em; margin: 4px 0 6px; font-size: 13px; }
.item-picker-results { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.item-picker-option { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; width: 100%; min-height: 44px; padding: 6px 12px; text-align: left; font: inherit; color: var(--ink); background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.item-picker-option:hover { background: var(--card-alt, var(--card)); }
.item-picker-option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.item-picker-option:disabled { cursor: default; opacity: .6; }
.item-picker-sku { font-family: var(--font-mono); font-size: 13px; }
.item-picker-name { font-weight: 600; overflow-wrap: anywhere; }
.item-picker-stock { font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .inventory-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inventory-table, .inventory-table tbody { display: block; }
  .inventory-table tr { display: block; margin-bottom: 12px; padding: 8px 12px; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); }
  .inventory-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 0; border: 0; text-align: right; min-width: 0; }
  .inventory-table td::before { content: attr(data-label); flex: none; font-weight: 600; color: var(--muted); text-align: left; }
  .inventory-table td > * { min-width: 0; }
  .inventory-table td.inventory-line-actions { display: block; text-align: left; padding-top: 10px; }
  .inventory-table td.inventory-line-actions::before { content: none; }
  .inventory-table td.inventory-line-actions .rz-button { width: 100%; }
  .inventory-row-difference td:first-child { box-shadow: none; }
  .inventory-row-difference { border-left: 4px solid var(--warn-bar); }
  .inventory-qty { width: 7rem; }
  .item-picker-option { grid-template-columns: minmax(0, 1fr); }
  .inventory-movement-filter { max-width: none; }
  .inventory-heading-actions .rz-button, .inventory-heading-actions .button-link { flex: 1 1 auto; }
}
@media (pointer: coarse) {
  html:root .inventory-table .person-link, html:root .inventory-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  html:root .inventory-crumbs li { min-height: 44px; }
  html:root .inventory-field, html:root .inventory-qty, html:root .inventory-search { min-height: 44px; }
  html:root .item-picker-option { min-height: 48px; }
  html:root .inventory-actions :is(.rz-button, .button-link), html:root .inventory-heading-actions :is(.rz-button, .button-link), html:root .inventory-line-actions .rz-button { min-height: 44px; }
  html:root .inventory-onhand .rz-button { min-height: 44px; }
  html:root .check-row input[type="checkbox"], html:root .check-row input[type="radio"] { width: 24px; height: 24px; margin-top: 0; }
}

/* Búsqueda (P18-004, search-screen.md sections 4, 5, 6 and 11): one frame (heading, field with the type token, tablist with counts) over the type hub, the grouped results of Todo or the embedded
   list of a type. The type accent (--kz-kind-n through --kind-accent) is an INDICATOR only: a rule on the left edge, the underline of the selected tab, a glyph (a selector with "icon"); the
   text stays on --ink and --muted and every place names the type, so no meaning rests on color alone. */
.search-kind[data-kind="1"] { --kind-accent: var(--kz-kind-1); }
.search-kind[data-kind="2"] { --kind-accent: var(--kz-kind-2); }
.search-kind[data-kind="3"] { --kind-accent: var(--kz-kind-3); }
.search-kind[data-kind="4"] { --kind-accent: var(--kz-kind-4); }
.search-kind[data-kind="5"] { --kind-accent: var(--kz-kind-5); }
.search-kind[data-kind="6"] { --kind-accent: var(--kz-kind-6); }
.search-frame { min-width: 0; }
.search-heading { align-items: flex-end; margin-bottom: 20px; }
.search-heading-main { min-width: 0; padding-left: 14px; border-left: 4px solid var(--kind-accent, var(--line)); }
.search-heading-main p { margin: 0; }
.search-title { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; overflow-wrap: anywhere; }
.search-title-icon { flex: none; font-size: 32px; color: var(--kind-accent, var(--brand-text)); }
.search-actions-menu { display: none; }
.search-field { position: relative; display: flex; align-items: stretch; min-height: 56px; margin: 0 0 16px; background: var(--card); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius-lg); }
.search-field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.search-token-wrap { position: relative; display: flex; flex: none; }
.search-menu-backdrop { position: fixed; inset: 0; z-index: 24; background: transparent; }
.search-token { appearance: none; display: inline-flex; align-items: center; gap: 8px; max-width: 14rem; min-height: 54px; padding: 0 14px; border: 0; border-right: var(--border-width) solid var(--line); border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--card-alt, var(--card)); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.search-token:hover { background: var(--nav-hover); }
.search-token:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.search-token-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-token-icon { color: var(--kind-accent, var(--icon-muted)); }
.search-type-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 25; min-width: 14rem; margin: 0; padding: 4px; list-style: none; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--elevation-popover); }
.search-type-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.search-type-item:hover, .search-type-item:focus-visible { background: var(--nav-hover); }
.search-type-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.search-type-item[aria-checked="true"] { font-weight: 650; background: var(--nav-active-bg); }
.search-input { flex: 1 1 auto; min-width: 0; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-clear { appearance: none; flex: none; display: inline-grid; place-items: center; min-width: 48px; border: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: transparent; color: var(--muted); cursor: pointer; }
.search-clear:hover { color: var(--ink); background: var(--nav-hover); }
.search-clear:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.search-tabs { display: flex; gap: 4px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: thin; border-bottom: var(--border-width) solid var(--line); }
.search-tab { appearance: none; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.search-tab:hover { color: var(--ink); }
.search-tab.active { color: var(--ink); border-bottom-color: var(--kind-accent, var(--brand-text)); }
.search-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.search-tab-icon { font-size: 20px; color: var(--icon-muted); }
.search-tab.active .search-tab-icon { color: var(--kind-accent, var(--brand-text)); }
.search-tab-count { padding: 0 8px; border: var(--border-width) solid var(--line); border-radius: var(--radius-chip); background: var(--card-alt, var(--card)); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 20px; }
.search-panel { min-width: 0; border-left: 4px solid var(--kind-accent, transparent); padding-left: 14px; scroll-margin-top: 72px; }
.search-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.search-count { margin: 0 0 12px; min-height: 1.5em; font-weight: 600; }
.search-hint { margin: 0 0 12px; font-size: 13px; }
.search-note { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.search-note p { margin: 0; }
.search-nohits { margin: 0 0 16px; font-size: 13px; }
/* The list of a type view brings its own empty state and its own count: the frame names the type in its count line and its empty state, so the embedded ones are not drawn twice. */
.search-list .table-toolbar > span.muted[role="status"] { display: none; }
.search-list.frame-empty .state-panel.empty { display: none; }
.search-hub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-panel-gap); }
/* The tile home (P23-001): the first type is the featured tile, two columns by two rows from 900 px when there are three types or more; one type takes the whole width, two are equal. */
@media (min-width: 900px) {
  .search-hub:not([data-count="1"]):not([data-count="2"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .search-hub[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-hub[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .search-hub:not([data-count="1"]):not([data-count="2"]) .search-card.featured { grid-column: span 2; grid-row: span 2; }
}
.search-card.featured { padding: calc(var(--space-panel) * 1.25); background: var(--card-alt, var(--card)); }
.search-card.featured .search-card-title { font-size: 22px; }
.search-recents { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.search-recents-title { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.search-recents-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.search-recent-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; margin: 0 -8px; border-radius: var(--radius-md); color: var(--ink); }
.search-recent-link:hover { background: var(--nav-hover); text-decoration: none; }
.search-recent-icon { flex: none; font-size: 20px; color: var(--kind-accent, var(--icon-muted)); }
.search-recent-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.search-recent-ago { flex: none; font-size: 12px; }
/* The rail and the list (P23-002): the type selector is a vertical tablist beside the panel; on phones it goes back to the sticky chip row (below). */
.search-layout { display: flex; align-items: flex-start; gap: 24px; }
.search-layout > .search-panel { flex: 1 1 0; min-width: 0; position: relative; overflow-x: auto; }
.search-rail { flex: 0 0 15rem; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; }
.search-rail .search-tabs { flex-direction: column; margin: 0; overflow: visible; border-bottom: 0; }
.search-rail .search-tab { width: 100%; border-bottom: 0; border-left: 3px solid transparent; border-radius: var(--radius-md); }
.search-rail .search-tab.active { background: var(--nav-active-bg); border-left-color: var(--kind-accent, var(--brand-text)); }
.search-rail .search-tab-count { margin-left: auto; }
.search-create { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: var(--border-width) solid var(--line); }
.search-create-title { font-size: 11px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.search-create .button-link, .search-create .search-overflow-button { justify-content: flex-start; width: 100%; }
.search-results { display: flex; flex-direction: column; gap: 12px; }
.search-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 2.6fr); gap: 10px; padding: 0 12px; font-size: 11px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.search-results .search-rows { padding: 0; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); }
.search-results .search-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 2.6fr) auto; gap: 10px; align-items: center; border-radius: 0; border-bottom: var(--border-width) solid var(--line); }
.search-results .search-row:last-child { border-bottom: 0; }
.search-type-badge { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.search-type-icon { flex: none; font-size: 18px; color: var(--kind-accent, var(--icon-muted)); }
.search-more { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.search-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--space-panel); background: var(--card); border: var(--border-width) solid var(--line); border-left: 4px solid var(--kind-accent, var(--line)); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.search-card-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; }
.search-card-icon { flex: none; color: var(--kind-accent, var(--icon-muted)); }
.search-card p { margin: 0; }
.search-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.search-group { margin: 0 0 var(--space-panel-gap); background: var(--card); border: var(--border-width) solid var(--line); border-left: 4px solid var(--kind-accent, var(--line)); border-radius: var(--radius-lg); }
.search-group-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: space-between; padding: 12px 16px 4px; }
.search-group-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.search-group-icon { font-size: 20px; color: var(--kind-accent, var(--icon-muted)); }
.search-group-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; text-decoration: underline; }
.search-rows { display: flex; flex-direction: column; padding: 0 8px 8px; }
.search-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: var(--radius-md); color: var(--ink); }
.search-row:hover { background: var(--nav-hover); text-decoration: none; }
.search-row.active { background: var(--nav-active-bg); outline: 2px solid var(--focus); outline-offset: -2px; }
.search-row-icon { flex: none; font-size: 20px; color: var(--kind-accent, var(--icon-muted)); }
.search-row-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.search-row-sub { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.search-row-badge { flex: none; margin-left: auto; padding: 2px 8px; border: var(--border-width) solid var(--line); border-radius: calc(var(--radius-lg) - 2px); font-size: 11px; color: var(--ink); }
.search-overflow { position: relative; display: inline-block; }
.search-overflow-button { min-height: 44px; min-width: 44px; justify-content: center; }
.search-overflow-menu { position: absolute; right: 0; z-index: 25; min-width: 12rem; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--elevation-popover); }
.search-overflow-item { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; }
.search-overflow-item:hover, .search-overflow-item:focus-visible { background: var(--nav-hover); text-decoration: none; }
.search-overflow-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (pointer: coarse) {
  html:root .search-clear, html:root .search-token, html:root .search-row, html:root .search-type-item, html:root .search-tab { min-height: 48px; }
  html:root .search-card-actions .button-link, html:root .search-heading .button-link, html:root .search-note .button-link { min-height: 44px; }
}
/* Phones (<= 600 px): the type selector is a sticky, horizontally scrollable chip row under the field, the actions go into an overflow menu and nothing scrolls the page sideways. */
@media (max-width: 600px) {
  :root:has(.search-frame) { scroll-padding-top: 72px; }
  .search-heading { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .search-title { font-size: 26px; }
  .search-actions-wide { display: none; }
  .search-actions-menu { display: block; }
  .search-field { min-height: 52px; }
  .search-token { max-width: 9rem; padding: 0 10px; }
  .search-layout { flex-direction: column; align-items: stretch; gap: 0; }
  .search-layout > .search-panel { flex: none; width: 100%; max-width: 100%; }
  .search-rail { flex: none; width: 100%; position: static; max-height: none; overflow: visible; }
  .search-create { display: none; }
  .search-tabs { position: sticky; top: 0; z-index: 6; gap: 8px; margin: 0 -4px 12px; padding: 8px 4px; background: var(--surface); border-bottom: 0; scroll-snap-type: x proximity; }
  .search-rail .search-tabs { flex-direction: row; margin: 0 -4px 12px; overflow-x: auto; }
  .search-rail .search-tab { width: auto; border-left: var(--border-width) solid var(--line); }
  .search-rail .search-tab.active { background: var(--card); border-color: var(--line-strong); border-bottom-color: var(--kind-accent, var(--brand-text)); }
  .search-cols { display: none; }
  .search-results .search-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .search-results .search-type-badge { grid-column: 1; }
  .search-results .search-row-sub { grid-column: 1 / -1; padding-left: 0; }
  .search-tab { scroll-snap-align: start; padding: 0 12px; border: var(--border-width) solid var(--line); border-bottom-width: 3px; border-radius: 999px; background: var(--card); }
  .search-tab.active { border-color: var(--line-strong); border-bottom-color: var(--kind-accent, var(--brand-text)); }
  .search-panel { padding-left: 10px; }
  .search-group-head { padding: 10px 12px 2px; }
  .search-row { flex-wrap: wrap; row-gap: 2px; }
  .search-row-sub { flex-basis: 100%; order: 3; padding-left: 30px; }
  .search-row-badge { margin-left: auto; }
}

/* Configuración > Menú (P20-005, design menu-builder section 9): the menu editor. Tokens only (no literal color, radius, shadow or font). Three columns from 1200 px (Páginas, Tu menú, Vista
   previa), two under that with the preview below, and under 768 px one column with the Tu menú / Vista previa tabs. Every row and button is a 44 px target on coarse pointers. */
.menu-editor { display: flex; flex-direction: column; gap: 14px; container: menu-editor / inline-size; }
.menu-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.menu-status-line { margin: 0; font-weight: 600; }
.menu-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: var(--border-width) solid var(--line); border-radius: var(--radius-chip); color: var(--badge-light-ink); font-size: 11px; font-weight: 600; white-space: nowrap; }
.menu-chip.is-in { background: var(--badge-success-bg); border-color: transparent; color: var(--badge-success-ink); }
.menu-chip.is-new, .menu-chip.is-group { background: var(--badge-info-bg); border-color: transparent; color: var(--badge-info-ink); }
.menu-chip.is-unsaved { background: var(--badge-warning-bg); border-color: transparent; color: var(--badge-warning-ink); }
.menu-chip.is-hidden, .menu-chip.is-available, .menu-chip.is-locked { background: transparent; }
.menu-readonly { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; border: var(--border-width) solid var(--warn-line); border-left: 4px solid var(--warn-bar); border-radius: var(--radius-md); background: var(--warn-bg); color: var(--warn-ink); padding: 10px 14px; font-size: 13px; }
.menu-issue-summary p { margin: 0; }
/* The columns follow the width of the editor itself (the Configuración frame takes 220 px of the page): one column, two from 620 px (catalog and tree, the preview below), three from 980 px. */
.menu-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container menu-editor (min-width: 620px) {
  .menu-editor-grid:not(.is-phone) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .menu-editor-grid:not(.is-phone) .menu-preview { grid-column: 1 / -1; }
}
@container menu-editor (min-width: 980px) {
  .menu-editor-grid:not(.is-phone) { grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.4fr) minmax(220px, 1fr); }
  .menu-editor-grid:not(.is-phone) .menu-preview { grid-column: auto; }
}
.menu-panel { min-width: 0; border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 14px; box-shadow: var(--elevation-card); }
.menu-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-head-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.menu-bulk { position: relative; }
.menu-bulk-button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.menu-bulk-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.menu-actions.menu-bulk-list { left: auto; right: 0; top: calc(100% + 4px); min-width: 15rem; max-width: calc(100vw - 32px); }
.menu-panel-title { margin: 0 0 10px; font-size: 15px; }
.menu-skeleton { min-height: 140px; }
.menu-tabs { display: flex; gap: 6px; border-bottom: var(--border-width) solid var(--line); }
.menu-tab { min-height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.menu-tab.active { border-bottom-color: var(--brand-text); }
.menu-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.menu-add-page { min-height: 44px; }

/* The catalog. */
.menu-catalog-tools { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.menu-catalog-tools .native-select { width: 100%; }
.menu-catalog-caption { margin: 14px 0 4px; font-size: 11px; letter-spacing: 1.4px; font-weight: 700; color: var(--head-ink); }
.menu-catalog-list { list-style: none; margin: 0; padding: 0; }
.menu-catalog-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 40px; padding: 4px 6px; border-radius: var(--radius-md); }
.menu-catalog-row:hover { background: var(--nav-hover); }
.menu-catalog-text { flex: 1 1 8rem; min-width: 0; overflow-wrap: break-word; }
.menu-chips { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; gap: 4px; }
.menu-catalog-add { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border: var(--border-width) solid var(--line-strong); border-radius: var(--radius-button); background: var(--card); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.menu-catalog-add:hover { background: var(--nav-hover); }
.menu-catalog-add:focus-visible, .menu-more:focus-visible, .menu-add-group:focus-visible, .menu-action:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* The tree: one role=tree, a card per section. */
.menu-tree, .menu-group { list-style: none; margin: 0; padding: 0; }
.menu-section { margin: 0 0 12px; padding: 6px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card-alt); }
.menu-section.is-locked { background: transparent; color: var(--muted); }
.menu-section:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.menu-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 6px; }
.menu-section-caption { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1.4px; font-weight: 700; color: var(--head-ink); }
.menu-section-empty { margin: 4px 8px 8px; font-size: 12px; }
.menu-add-group { min-height: 36px; padding: 0 10px; border: var(--border-width) solid transparent; border-radius: var(--radius-button); background: none; color: var(--link); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.menu-add-group:hover { background: var(--nav-hover); }
.menu-group .menu-group { margin-left: 22px; border-left: var(--border-width) solid var(--line); padding-left: 6px; }
.menu-item { position: relative; border-radius: var(--radius-md); }
.menu-item:focus-visible { outline: none; }
.menu-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; padding: 4px 8px; border: var(--border-width) solid transparent; border-radius: var(--radius-md); background: var(--card); }
.menu-row:hover { background: var(--nav-hover); }
.menu-item:focus-visible > .menu-row { outline: 3px solid var(--focus); outline-offset: 1px; }
.menu-item.is-grabbed > .menu-row { border: 2px dashed var(--focus); background: var(--nav-active-bg); }
.menu-item.has-issue > .menu-row { border-color: var(--danger); }
.menu-item-text { font-weight: 500; overflow-wrap: break-word; }
.menu-renamed { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.menu-renamed .rzi { font-size: 14px; }
.menu-row-issue { display: flex; align-items: flex-start; gap: 4px; margin: 2px 8px 6px; }
.menu-more { margin-left: auto; display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius-button); background: none; color: var(--ink); cursor: pointer; }
.menu-more:hover { background: var(--nav-hover); }
.menu-actions { position: absolute; right: 8px; top: 44px; z-index: 30; min-width: 15rem; max-width: calc(100vw - 48px); margin: 0; padding: 4px; list-style: none; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--elevation-popover); }
.menu-action { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: 40px; padding: 4px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.menu-action:hover { background: var(--nav-hover); }
.menu-action.is-disabled { color: var(--muted); cursor: not-allowed; }
.menu-action small { font-size: 12px; }
.menu-rename { display: flex; flex: 1 1 14rem; flex-direction: column; gap: 2px; min-width: 0; }
.menu-counter { align-self: flex-end; }
.menu-move-fieldset { margin: 0 0 12px; padding: 0; border: 0; }
.menu-move-fieldset legend { margin-bottom: 6px; font-size: 12px; font-weight: 700; }

/* The preview: the real sidebar links (the markup of SidebarNav), restyled here because the sidebar's own rules are scoped to the app shell's .sidebar. Inert: nothing in it is a control. */
.menu-preview-box { max-width: 280px; padding: 8px 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--nav-bg); }
.menu-preview-box nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--nav-ink); border-radius: var(--radius-md); margin: 2px 0; font-size: 13px; font-weight: 500; }
.menu-preview-box nav a.nav-sub { margin-left: 16px; font-size: 12.5px; }
.menu-preview-box nav a.active { color: var(--nav-active-ink); background: var(--nav-active-bg); font-weight: 650; }
.menu-preview-box nav .nav-group-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; margin: 2px 0; color: var(--nav-ink); background: none; border: 0; font: inherit; font-size: 13px; font-weight: 500; text-align: left; }
.menu-preview-box nav .nav-group-toggle .nav-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.menu-preview-box nav .nav-chevron, .menu-preview-box nav .nav-toggle, .menu-preview-box nav .nav-flyout-title, .menu-preview-box nav .nav-tip { display: none; }
.menu-preview-box nav .nav-parent { display: flex; align-items: center; }
.menu-preview-box nav .nav-parent > a { flex: 1; min-width: 0; }
.menu-preview-box nav .nav-children[hidden] { display: none; }
.menu-preview-note { margin: 0 0 8px; font-size: 12px; }
.menu-preview-empty { margin: 4px 0; font-size: 12px; }
/* A header without a link keeps its chevron in the preview (the sidebar's own look), so it reads as a title and not as a link. */
.menu-preview-box nav .nav-group-toggle .nav-chevron { display: inline-flex; color: var(--muted); }

/* Ver como and the warnings (P20-007, design menu-builder section 10). A warning is an icon plus the word Aviso, never a color alone; the list sits above the bar and does not block saving. */
.menu-viewas { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.menu-viewas .native-select { width: 100%; }
.menu-viewas small { font-size: 12px; }
.menu-row-warning { margin: 2px 8px 6px; font-size: 12px; }
.menu-row-warning p { display: flex; align-items: flex-start; gap: 4px; margin: 0; color: var(--warn-ink); }
.menu-row-warning .rzi { font-size: 16px; }
.menu-warning-word { font-weight: 700; }
.menu-warnings { padding: 10px 14px; border: var(--border-width) solid var(--warn-line); border-left: 4px solid var(--warn-bar); border-radius: var(--radius-md); background: var(--warn-bg); color: var(--warn-ink); }
.menu-warnings .menu-panel-title { margin-bottom: 4px; }
.menu-warnings p { margin: 0 0 6px; font-size: 12px; }
.menu-warnings-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.menu-warnings-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 13px; }
.menu-warnings-list .rzi { font-size: 16px; align-self: center; }
.menu-warning-link { color: var(--link); font-weight: 600; text-decoration: underline; }
.menu-warning-link:focus-visible, .menu-warnings-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.menu-warnings-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: var(--border-width) solid var(--warn-line); border-radius: var(--radius-button); background: var(--warn-bg); color: var(--warn-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.menu-warnings-none { font-size: 13px; }
.menu-catalog-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* The bar of Restablecer predeterminado, Descartar and Guardar cambios: sticky on phones. */
.menu-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: var(--border-width) solid var(--line); }
.menu-bar-spacer { flex: 1 1 auto; }
@media (max-width: 767px) {
  .menu-bar { position: sticky; bottom: 0; z-index: 20; padding: 10px 12px; background: var(--card); }
  .menu-panel { padding: 10px; }
  .menu-actions { right: 0; left: 0; min-width: 0; max-width: none; }
}
@media (pointer: coarse) {
  html:root .menu-row, html:root .menu-catalog-row { min-height: 48px; }
  html:root .menu-more, html:root .menu-add-group, html:root .menu-catalog-add { min-width: 44px; min-height: 44px; }
  html:root .menu-action { min-height: 48px; }
  html:root .menu-bar .rz-button, html:root .menu-warnings-toggle { min-height: 44px; }
}
.menu-section-lead { display: inline-flex; align-items: center; gap: 6px; }

/* Drag and drop of the menu editor (P20-006, design menu-builder section 9.3): a mouse enhancement over the menu operations. The handle is a hint, the zones exist only while a drag is going
   on, and an accepted target is a line or an outline AND an icon (never color alone); a refused one shows the not-allowed cursor and the reason. Tokens only. */
.menu-handle { display: inline-grid; place-items: center; color: var(--muted); cursor: grab; }
.menu-handle .rzi { font-size: 18px; }
.menu-row[draggable="true"], .menu-catalog-row[draggable="true"] { cursor: grab; }
.menu-row[draggable="true"]:active, .menu-catalog-row[draggable="true"]:active { cursor: grabbing; }
.menu-section { position: relative; }
.menu-row { position: relative; }
.drop-zone { position: absolute; z-index: 5; box-sizing: border-box; }
.drop-zone.is-before { left: 0; right: 0; top: 0; height: 30%; z-index: 7; }
.drop-zone.is-after { left: 0; right: 0; bottom: 0; height: 30%; z-index: 7; }
.drop-zone.is-inside { inset: 0; z-index: 6; }
.drop-zone.is-area { inset: 0; z-index: 1; }
.drop-zone.is-refused { cursor: not-allowed; }
.drop-zone-mark { position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; border: 2px solid var(--focus); border-radius: var(--radius-chip); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.drop-zone-mark .rzi { font-size: 16px; }
.drop-zone.is-before .drop-zone-mark { left: 6px; top: -11px; }
.drop-zone.is-after .drop-zone-mark { left: 6px; bottom: -11px; }
.drop-zone.is-inside .drop-zone-mark { right: 8px; top: 50%; transform: translateY(-50%); }
.drop-zone.is-area .drop-zone-mark { right: 12px; top: 8px; }
.drop-zone.is-over.is-allowed.is-before::before, .drop-zone.is-over.is-allowed.is-after::after, .drop-zone.is-over.is-refused.is-before::before, .drop-zone.is-over.is-refused.is-after::after {
  content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: var(--radius-sm); pointer-events: none;
}
.drop-zone.is-over.is-allowed.is-before::before, .drop-zone.is-over.is-allowed.is-after::after { background: var(--focus); }
.drop-zone.is-over.is-refused.is-before::before, .drop-zone.is-over.is-refused.is-after::after { background: repeating-linear-gradient(90deg, var(--danger) 0 8px, transparent 8px 12px); }
.drop-zone.is-before::before { top: -2px; }
.drop-zone.is-after::after { bottom: -2px; }
.drop-zone.is-over.is-allowed.is-inside, .drop-zone.is-over.is-allowed.is-area { outline: 2px dashed var(--focus); outline-offset: -2px; background: var(--nav-active-bg); border-radius: var(--radius-md); }
.drop-zone.is-over.is-refused.is-inside, .drop-zone.is-over.is-refused.is-area { outline: 2px dotted var(--danger); outline-offset: -2px; border-radius: var(--radius-md); }
.drop-zone-tip { position: absolute; z-index: 40; display: inline-flex; align-items: flex-start; gap: 6px; max-width: min(28rem, calc(100% - 24px)); padding: 6px 10px; border: 2px solid var(--danger); border-radius: var(--radius-md); background: var(--card); color: var(--ink); box-shadow: var(--elevation-popover); font-size: 12.5px; font-weight: 600; pointer-events: none; }
.drop-zone-tip .rzi { font-size: 16px; color: var(--danger); }
.drop-zone-tip.is-before, .drop-zone-tip.is-after, .drop-zone-tip.is-inside { left: 28px; top: calc(100% + 4px); }
.drop-zone-tip.is-area { left: 12px; top: 8px; }

/* The icon picker (P20-008, design menu-builder section 5.1): a six-column listbox of icon buttons in a dialog. Tokens only, and only pairs the theme contrast test already checks (ink on
   card, the active navigation ink on its background, the focus color against the card). The icon in use is marked with an outline AND a check mark; every option is at least a 44 px target. The grid scrolls inside the dialog (its options are focusable, so the region is reachable by keyboard). */
.icon-picker { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.icon-picker-count { margin: 0; font-size: 12px; }
.icon-picker-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-height: min(52vh, 24rem); overflow-y: auto; padding: 4px; }
.icon-picker-option { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 44px; min-height: 48px; padding: 0; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.icon-picker-option .rzi { font-size: 26px; }
.icon-picker-option:hover { border-color: var(--focus); }
.icon-picker-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.icon-picker-option.is-current { border: 2px solid var(--focus); background: var(--nav-active-bg); color: var(--nav-active-ink); }
.icon-picker-check { position: absolute; top: 1px; right: 1px; display: inline-flex; line-height: 1; color: var(--nav-active-ink); }
.icon-picker-check .rzi { font-size: 14px; }
.icon-picker-caption { min-height: 1.5em; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (pointer: coarse) { .icon-picker-option { min-height: 52px; } }
.menu-group-icon { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.menu-group-icon-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.menu-group-icon-preview { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--ink); }
.menu-group-icon-preview .rzi { font-size: 24px; }

/* Facturación (P4-015, UI-11): amounts, the money field and the billing screens. Tokens only. The tables reuse the card layout of the inventory tables under 640 px (each cell carries its
   label in data-label). Amounts keep their digit width so a column lines up; the symbol of the field is decoration (the label names the field). Targets are 44 px on coarse pointers. */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-negative { color: var(--danger); }
.money-input { display: flex; align-items: stretch; }
.money-symbol { display: inline-flex; align-items: center; padding: 0 10px; border: var(--border-width) solid var(--line-strong); border-right: 0; border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px); background: var(--card-alt, var(--card)); color: var(--muted); font-weight: 600; }
.money-field { flex: 1 1 auto; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.money-symbol + .money-field { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.team-chip.danger { background: var(--badge-danger-bg); color: var(--badge-danger-ink); border-color: transparent; }
.billing-table { width: 100%; }
.billing-cell-field { margin: 0; min-width: 0; }
.billing-cell-field > .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.billing-qty { width: 6rem; max-width: 100%; text-align: right; }
.billing-lines-table td { min-width: 5.5rem; }
.billing-lines-table td:first-child { min-width: 12rem; }
.billing-lines-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.billing-includes-tax { max-width: 36rem; }
.billing-totals { display: grid; grid-template-columns: 1fr max-content; gap: 4px 24px; margin: 8px 0 0; padding: 12px 0 0; max-width: 24rem; margin-left: auto; border-top: var(--border-width) solid var(--line); }
.billing-totals dt { color: var(--muted); }
.billing-totals dd { margin: 0; text-align: right; }
.billing-total-label, .billing-total-value { font-size: 18px; font-weight: 700; color: var(--ink); }
.billing-totals-note { margin: 0; font-size: 12px; }
.billing-chosen-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; }
.billing-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.billing-success { padding: 12px 14px; margin: 0 0 12px; border: var(--border-width) solid var(--badge-success-ink); border-radius: var(--radius-md); background: var(--badge-success-bg); color: var(--badge-success-ink); }
.billing-success p { margin: 0 0 6px; }
.billing-allocation { margin-top: 8px; }
.billing-unallocated { margin: 8px 0; font-weight: 600; }
.billing-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 16px; }
.billing-summary-total { margin: 0 0 12px; font-size: 28px; font-weight: 700; }
.billing-summary-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.billing-summary-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.billing-account-figures { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 16px; }
.billing-account-figures dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.billing-account-figures dd { margin: 0; font-size: 24px; font-weight: 700; }
.billing-vat-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 8px; }
@media (max-width: 640px) {
  .billing-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .billing-table, .billing-table tbody { display: block; }
  .billing-table tr { display: block; margin-bottom: 12px; padding: 8px 12px; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); }
  .billing-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 0; border: 0; text-align: right; min-width: 0; }
  .billing-table td::before { content: attr(data-label); flex: none; font-weight: 600; color: var(--muted); text-align: left; }
  .billing-table td > * { min-width: 0; }
  .billing-table td.inventory-line-actions { display: block; text-align: left; padding-top: 10px; }
  .billing-table td.inventory-line-actions::before { content: none; }
  .billing-table td.inventory-line-actions .rz-button { width: 100%; }
  .billing-lines-table td, .billing-lines-table td:first-child { min-width: 0; }
  .billing-cell-field { flex: 1 1 auto; text-align: left; }
  .billing-cell-field > .field-label { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; }
  .billing-totals { max-width: none; }
  .billing-quick-actions .rz-button, .billing-quick-actions .button-link { flex: 1 1 auto; }
}
@media (pointer: coarse) {
  html:root .money-field, html:root .billing-quick-actions :is(.rz-button, .button-link) { min-height: 44px; }
}

/* Action bar of a record (UI-17, P5-018) and the barcode field (UI-23). Tokens only. The bar wraps; each action that is disabled carries the reason right under it. Targets are 44 px
   on coarse pointers. */
.transition-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin: 0 0 16px; }
.transition-item { display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; }
.transition-reason { max-width: 18rem; }
.barcode-input { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.barcode-input-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.barcode-input-row .text-input { flex: 1 1 14rem; min-width: 0; }
.barcode-input-help { margin: 0; font-size: 12px; }
@media (pointer: coarse) {
  html:root .transition-bar :is(.rz-button, .button-link), html:root .barcode-input-row :is(.rz-button, .text-input) { min-height: 44px; }
}

/* Kanban board (UI-15, P5-026). Columns side by side, stacked on a phone (no horizontal scroll); tokens only. */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; align-items: start; }
.kanban-column { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card-alt, var(--card)); }
.kanban-column-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; }
.kanban-count { display: inline-flex; min-width: 24px; justify-content: center; padding: 0 8px; border: var(--border-width) solid var(--line); border-radius: var(--radius-chip); background: var(--card); color: var(--badge-light-ink); font-size: 12px; font-weight: 700; line-height: 20px; }
.kanban-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kanban-card { min-width: 0; padding: 10px 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.kanban-empty { margin: 0; font-size: 13px; }